241 lines
4.0 KiB
Markdown
Executable File
241 lines
4.0 KiB
Markdown
Executable File
# Logo 使用规范
|
||
|
||
**版本**: v1.0.0
|
||
**更新日期**: 2026-03-16
|
||
**状态**: ✅ 官方指定 Logo
|
||
|
||
---
|
||
|
||
## 🐉 官方 Logo
|
||
|
||
### 主 Logo
|
||
|
||
**文件**: `jiachenlong-logo.png`
|
||
|
||
**位置**:
|
||
- 本地：`/static/images/jiachenlong-logo.png`
|
||
- 前端服务器：`/var/www/html/static/images/jiachenlong-logo.png`
|
||
|
||
**规格**:
|
||
- 格式：PNG
|
||
- 大小：606KB
|
||
- 尺寸：正方形（适合圆形裁剪）
|
||
- 颜色：橙色（中国传统色）
|
||
- 设计：龙型环绕 + "甲辰收藏"文字
|
||
|
||
---
|
||
|
||
## 📋 使用场景
|
||
|
||
### 1. 登录页面
|
||
|
||
**文件**: `frontend/src/pages/Login.jsx`
|
||
|
||
```jsx
|
||
<img
|
||
src="/static/images/jiachenlong-logo.png"
|
||
alt="甲辰收藏"
|
||
style={{
|
||
width: '200px',
|
||
height: '200px',
|
||
borderRadius: '50%',
|
||
boxShadow: '0 0 40px rgba(251, 191, 36, 0.4)',
|
||
background: '#fff'
|
||
}}
|
||
/>
|
||
```
|
||
|
||
### 2. 首页
|
||
|
||
**文件**: `frontend/src/pages/Home.jsx`
|
||
|
||
```jsx
|
||
<img
|
||
src="/static/images/jiachenlong-logo.png"
|
||
alt="甲辰收藏"
|
||
style={{
|
||
width: '48px',
|
||
height: '48px',
|
||
borderRadius: '50%',
|
||
objectFit: 'cover'
|
||
}}
|
||
/>
|
||
```
|
||
|
||
### 3. 藏品详情页
|
||
|
||
**文件**: `frontend/src/pages/Detail.jsx`
|
||
|
||
```jsx
|
||
<img
|
||
src="/static/images/jiachenlong-logo.png"
|
||
alt="甲辰收藏"
|
||
onError={(e) => {
|
||
e.target.src = '/static/images/jiachenlong-logo.png';
|
||
}}
|
||
/>
|
||
```
|
||
|
||
---
|
||
|
||
## 🎨 样式规范
|
||
|
||
### 圆形样式（推荐）
|
||
|
||
```css
|
||
.logo {
|
||
width: 200px;
|
||
height: 200px;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
box-shadow: 0 0 40px rgba(251, 191, 36, 0.4);
|
||
background: #fff;
|
||
}
|
||
```
|
||
|
||
### 小尺寸（导航栏等）
|
||
|
||
```css
|
||
.logo-small {
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
}
|
||
```
|
||
|
||
### 中等尺寸
|
||
|
||
```css
|
||
.logo-medium {
|
||
width: 100px;
|
||
height: 100px;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 📦 部署规范
|
||
|
||
### 部署脚本
|
||
|
||
**文件**: `scripts/deploy.sh`
|
||
|
||
部署脚本会自动：
|
||
1. ✅ 检查 Logo 文件是否存在
|
||
2. ✅ 部署前端构建文件
|
||
3. ✅ 部署 Logo 到服务器
|
||
4. ✅ 重启 Nginx
|
||
|
||
### 部署命令
|
||
|
||
```bash
|
||
# 测试环境
|
||
./scripts/deploy.sh 1.0.0 test
|
||
|
||
# 生产环境
|
||
./scripts/deploy.sh 1.0.0 production
|
||
```
|
||
|
||
### 手动部署
|
||
|
||
```bash
|
||
# 1. 构建前端
|
||
cd frontend
|
||
npm run build
|
||
|
||
# 2. 部署到服务器
|
||
scp -r dist/* root@8.149.137.26:/var/www/html/
|
||
scp static/images/jiachenlong-logo.png root@8.149.137.26:/var/www/html/static/images/
|
||
|
||
# 3. 重启 Nginx
|
||
ssh root@8.149.137.26 "nginx -s reload"
|
||
```
|
||
|
||
---
|
||
|
||
## ⚠️ 注意事项
|
||
|
||
### 必须遵守
|
||
|
||
1. ✅ **统一使用** `jiachenlong-logo.png`
|
||
2. ✅ **禁止使用** 旧版 `logo.jpg`、`dragon-logo.jpg`、`title_logo.svg`
|
||
3. ✅ **保持比例** - 始终使用正方形容器
|
||
4. ✅ **圆形裁剪** - 使用 `border-radius: 50%`
|
||
5. ✅ **白色背景** - Logo 需要白色背景衬托
|
||
|
||
### 禁止行为
|
||
|
||
- ❌ 不要修改 Logo 颜色
|
||
- ❌ 不要拉伸变形
|
||
- ❌ 不要添加其他效果
|
||
- ❌ 不要使用其他 Logo 文件
|
||
|
||
---
|
||
|
||
## 📁 文件位置
|
||
|
||
### 本地开发
|
||
|
||
```
|
||
jiachenlong/
|
||
└── static/
|
||
└── images/
|
||
└── jiachenlong-logo.png # ✅ 官方 Logo
|
||
```
|
||
|
||
### 前端服务器
|
||
|
||
```
|
||
/var/www/html/
|
||
└── static/
|
||
└── images/
|
||
└── jiachenlong-logo.png # ✅ 官方 Logo
|
||
```
|
||
|
||
---
|
||
|
||
## 🔄 更新流程
|
||
|
||
如需更新 Logo：
|
||
|
||
1. **替换文件**
|
||
```bash
|
||
cp new-logo.png /static/images/jiachenlong-logo.png
|
||
```
|
||
|
||
2. **重新构建**
|
||
```bash
|
||
cd frontend
|
||
npm run build
|
||
```
|
||
|
||
3. **部署到服务器**
|
||
```bash
|
||
./scripts/deploy.sh 1.0.1 production
|
||
```
|
||
|
||
4. **验证部署**
|
||
```bash
|
||
curl http://8.149.137.26/static/images/jiachenlong-logo.png -o /tmp/logo-check.png
|
||
```
|
||
|
||
---
|
||
|
||
## 📊 Logo 对比
|
||
|
||
| 文件 | 状态 | 说明 |
|
||
|------|------|------|
|
||
| `jiachenlong-logo.png` | ✅ **官方指定** | 橙色圆形龙型 Logo |
|
||
| `logo.jpg` | ❌ 废弃 | 旧版 Logo |
|
||
| `dragon-logo.jpg` | ❌ 废弃 | 旧版龙型 Logo |
|
||
| `title_logo.svg` | ❌ 废弃 | 旧版 SVG Logo |
|
||
|
||
---
|
||
|
||
**所有部署必须使用 `jiachenlong-logo.png`！**
|
||
|
||
**最后更新**: 2026-03-16
|