用途
tinyship-brand 用于将 TinyShip 项目改造为自有品牌，覆盖应用名称、Logo、颜色主题与国际化默认语言四项自定义内容。当用户提出“修改应用名称”“自定义品牌”“更换 Logo”等需求时使用。
主要能力
1. 应用名称
编辑项目根目录的 config.ts：
export const config = { app: { name: 'YourAppName', // 原值为 'TinyShip' } }
该名称会出现在页面标题、导航栏、邮件模板以及整个 UI 中。
2. Logo
TinyShip 支持两种 Logo 模式。
模式 A：图标 + 文字（默认）
- 准备一个正方形图标（推荐 24x24px SVG，彩色背景使用白色填充）
- 放入当前应用的 public/ 文件夹（例如 apps/next-app/public/logo.svg）
- 若存在文档应用，也需放入 apps/docs-app/public/
更新 config.ts：
logo: { iconUrl: '/my-logo.svg', fullLogoUrl: '', iconClassName: 'bg-blue-500 rounded-full p-1', }
模式 B：完整 Logo 图片
- 准备一张宽幅 Logo 图片（推荐 200x40px PNG/SVG）
- 放入当前应用的 public/ 文件夹
更新 config.ts：
logo: { iconUrl: '/my-icon.svg', fullLogoUrl: '/my-full-logo.png', iconClassName: '', }
3. 颜色主题
TinyShip 内置 5 套配色方案：
| 方案 | 风格 |
|---|---|
| default | 经典灰配蓝紫渐变 |
| claude | 暖橙色调 |
| cosmic-night | 深紫、宇宙感 |
| modern-minimal | 紫蓝极简 |
| ocean-breeze | 清新青绿 |
更新 config.ts：
theme: { defaultTheme: 'light', // 'light' 或 'dark' defaultColorScheme: 'claude', // 从上表中选择 storageKey: 'yourapp-ui-theme' // 修改以避免冲突 }
自定义主题
若需完全自定义配色：
- 访问 tweakcn.com/editor/theme
- 可视化设计主题
- 导出 CSS
- 在 libs/ui/styles/themes/ 中新建文件（例如 my-theme.css）
- 添加导出的 CSS，并使用类选择器（例如 .theme-my-theme）
- 在主题配置中注册该主题
主题系统详情可阅读 libs/ui/AGENTS.md。
4. 默认语言
更新 config.ts：
i18n: { defaultLocale: 'en', // 'en' 或 'zh-CN' locales: ['en', 'zh-CN'], cookieKey: 'NEXT_LOCALE', autoDetect: false // 设为 true 可检测浏览器语言 }
使用方式
- 编辑项目根目录 config.ts 中的应用名称
- 准备并放置 Logo 文件，按所选模式更新 config.ts 的 logo 配置
- 选择内置配色或制作自定义主题，更新 theme 配置
- 更新 i18n 配置设定默认语言
- 启动开发服务器验证：导航栏显示新名称/Logo、主题颜色已应用、默认语言正确、切换暗色模式检查两套模式下的主题、切换语言确认 i18n 仍正常工作
参考文件（TinyShip 仓库内）
- config.ts — 主要配置文件
- docs/user-guide/basic-config.md — 品牌定制详细文档
- libs/ui/styles/themes/ — 主题 CSS 文件
- libs/ui/AGENTS.md — 主题系统架构
适用场景与限制
适用于基于 TinyShip 模板进行品牌化改造的项目。本技能仅涉及名称、Logo、配色与默认语言四项配置，未提供其他功能、收费、价格或效果方面的信息。