镜像自地址
https://github.com/lhly/search-syntax-pro.git
已同步 2026-10-20 22:37:48 +08:00
200 行
4.3 KiB
Markdown
200 行
4.3 KiB
Markdown
# Logo 更新指南
|
|
|
|
## 📋 更新概览
|
|
|
|
已成功将项目的 logo 从原设计更新为 `simpleLogo.svg` 设计。此更新包括:
|
|
|
|
1. ✅ **PNG 图标生成** - 为 Chrome 扩展生成了标准尺寸的 PNG 图标
|
|
2. ✅ **SVG 文件生成** - 生成了不同尺寸的 SVG 版本
|
|
3. ✅ **组件更新** - 更新了 Logo.tsx 组件以使用新设计
|
|
4. ✅ **测试通过** - 所有单元测试已更新并通过
|
|
|
|
---
|
|
|
|
## 📁 生成的文件
|
|
|
|
### PNG 图标文件 (Chrome 扩展标准尺寸)
|
|
```
|
|
public/icons/
|
|
├── icon16.png (16x16)
|
|
├── icon32.png (32x32)
|
|
├── icon48.png (48x48)
|
|
└── icon128.png (128x128)
|
|
```
|
|
|
|
### SVG 文件
|
|
```
|
|
public/icons/
|
|
├── icon16.svg (16x16)
|
|
├── icon32.svg (32x32)
|
|
├── icon48.svg (48x48)
|
|
├── icon128.svg (128x128)
|
|
├── logo.svg (主 logo,基于 simpleLogo.svg)
|
|
└── simpleLogo.svg (原始设计文件)
|
|
```
|
|
|
|
### 备份文件
|
|
```
|
|
public/icons/
|
|
└── logo.svg.backup (原始 logo 的备份)
|
|
```
|
|
|
|
---
|
|
|
|
## 🛠️ 使用的工具和脚本
|
|
|
|
### 1. SVG 到 PNG 转换脚本
|
|
**文件**: `scripts/convert-simple-logo.js`
|
|
|
|
**功能**:
|
|
- 使用 Sharp 库将 simpleLogo.svg 转换为多种尺寸的 PNG
|
|
- 支持透明背景
|
|
- 自动适配 Chrome 扩展所需的标准尺寸
|
|
|
|
**使用方法**:
|
|
```bash
|
|
node scripts/convert-simple-logo.js
|
|
```
|
|
|
|
### 2. SVG 尺寸生成脚本
|
|
**文件**: `scripts/generate-svg-sizes.js`
|
|
|
|
**功能**:
|
|
- 基于 simpleLogo.svg 生成不同尺寸的 SVG 文件
|
|
- 自动备份原有 logo.svg
|
|
- 将 simpleLogo.svg 复制为主 logo.svg
|
|
|
|
**使用方法**:
|
|
```bash
|
|
node scripts/generate-svg-sizes.js
|
|
```
|
|
|
|
---
|
|
|
|
## 💻 组件使用
|
|
|
|
### Logo 组件
|
|
```tsx
|
|
import { Logo, LogoIcon } from './components/Logo'
|
|
|
|
// 完整 Logo (带文字)
|
|
<Logo size={48} color="currentColor" showText={true} />
|
|
|
|
// 仅图标 (不带文字)
|
|
<LogoIcon size={32} color="#2563eb" />
|
|
```
|
|
|
|
### Props 说明
|
|
| Prop | 类型 | 默认值 | 说明 |
|
|
|------|------|--------|------|
|
|
| size | number | 48 | 图标尺寸 (px) |
|
|
| color | string | 'currentColor' | 主色调 |
|
|
| showText | boolean | true | 是否显示文字部分 |
|
|
| className | string | '' | 自定义类名 |
|
|
|
|
---
|
|
|
|
## 🎨 设计元素说明
|
|
|
|
simpleLogo.svg 包含以下设计元素:
|
|
|
|
1. **主要搜索图标** (#2563eb 蓝色)
|
|
- 放大镜图形
|
|
- 代表搜索功能
|
|
|
|
2. **内圈高亮** (#93c5fd 浅蓝色, 60% 透明度)
|
|
- 增强视觉层次
|
|
- 提供深度感
|
|
|
|
3. **装饰元素** (#2563eb 蓝色)
|
|
- 语法符号
|
|
- 品牌特征
|
|
|
|
4. **文字部分** (可选)
|
|
- 字母 "S" 和 "P" 的图形化表示
|
|
- 通过 `showText` prop 控制显示
|
|
|
|
---
|
|
|
|
## 🧪 测试
|
|
|
|
所有测试已更新并通过:
|
|
|
|
```bash
|
|
npm test -- Logo.test.tsx
|
|
```
|
|
|
|
**测试覆盖**:
|
|
- ✅ Logo 组件基础渲染
|
|
- ✅ LogoIcon 组件渲染
|
|
- ✅ 自定义尺寸支持
|
|
- ✅ 自定义颜色支持
|
|
- ✅ 文字显示控制
|
|
- ✅ 可访问性属性
|
|
- ✅ 自定义 className
|
|
|
|
---
|
|
|
|
## 📦 依赖
|
|
|
|
新增依赖:
|
|
- **sharp** (^0.33.x) - 用于 SVG 到 PNG 的转换
|
|
|
|
安装方式:
|
|
```bash
|
|
npm install --save-dev sharp
|
|
```
|
|
|
|
---
|
|
|
|
## 🔄 如果需要重新生成图标
|
|
|
|
如果 simpleLogo.svg 有更新,可以按以下步骤重新生成所有尺寸:
|
|
|
|
```bash
|
|
# 1. 确保 sharp 已安装
|
|
npm install
|
|
|
|
# 2. 生成 PNG 图标
|
|
node scripts/convert-simple-logo.js
|
|
|
|
# 3. 生成 SVG 文件
|
|
node scripts/generate-svg-sizes.js
|
|
|
|
# 4. 运行测试验证
|
|
npm test -- Logo.test.tsx
|
|
```
|
|
|
|
---
|
|
|
|
## 📝 注意事项
|
|
|
|
1. **ViewBox 变化**: 新 logo 使用 viewBox="650 600 1400 1550",与原始设计不同
|
|
2. **颜色系统**: 默认使用 Tailwind CSS 的蓝色色系 (#2563eb, #93c5fd)
|
|
3. **向后兼容**: 保持了原有的 Logo 组件 API,无需修改使用代码
|
|
4. **文件备份**: 原有 logo.svg 已备份为 logo.svg.backup
|
|
|
|
---
|
|
|
|
## 🎯 下一步建议
|
|
|
|
1. **更新 manifest.json**: 确保 Chrome 扩展配置文件引用了正确的图标路径
|
|
2. **检查其他使用点**: 搜索项目中其他可能使用旧 logo 的地方
|
|
3. **视觉验证**: 在实际浏览器中测试不同尺寸的图标显示效果
|
|
4. **文档更新**: 更新项目 README 中的 logo 相关说明
|
|
|
|
---
|
|
|
|
## 📞 问题反馈
|
|
|
|
如遇到任何问题,请检查:
|
|
1. Sharp 库是否正确安装
|
|
2. simpleLogo.svg 文件是否完整
|
|
3. 文件权限是否正确
|
|
4. Node.js 版本是否兼容 (建议 v16+)
|
|
|
|
---
|
|
|
|
**生成日期**: 2025-11-07
|
|
**工具版本**: Sharp ^0.33.x, Vite 5.0.0, React 18.2.0
|