jiachenlong/frontend/static/images/LOGO_GUIDE.md

# 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