design: add brand tokens, apply to homepage v1, extend T-606
- docs/brand.md 品牌单一真相源(靛蓝=生成/琥珀=点数、字体/术语/语气 + 可复制 CSS 变量) - v1 原型精修:色彩语言按 brand rule 归位(点数统一琥珀、生成图标统一靛蓝)、生成台连接与导航配平 - 06-tasks.md T-606 验收加「首页 + portal 同套 brand token」;README 导航登记 brand.md Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
+1
-1
@@ -84,7 +84,7 @@
|
|||||||
| T-603 | django-admin 中文化(第 4 层·字段级) | T-602 | 给各模型**字段**加中文 `verbose_name`,使 admin 列表/编辑页的字段标签显示中文,在 T-602(1-3 层)之上做。范围覆盖 `users`/`billing`/`ai`(及 portal 相关)模型的业务字段,例如 `points_balance`→点数余额、`key_prefix`→Key 前缀、`points_delta`→点数变动、`balance_after`→变动后余额、`amount_money`→金额、`exchange_rate`→汇率、`points_granted`→到账点数、`api_type`/`capabilities`/`is_active`/`created_at` 等;`admin.py` 里自定义显示方法(`@admin.display(description=...)`)同步中文。**仅显示层**:`verbose_name` 只改展示,**不改字段名、不改代码引用、英文字段名保持不变**;产出的是 `AlterField`(metadata-only,**无 DB schema 变更**)迁移。验收:`makemigrations`(仅 AlterField,无 schema 变更)→ `migrate` → `check` 0 issues → `test` 全绿 → `/admin/` 字段标签目视中文,并在 `../progress.md` 留证据。T-605 已解除邮箱验证口径阻塞;当前待在稳定 MySQL 测试库上补跑完整验证后再标 `DONE` | TODO |
|
| T-603 | django-admin 中文化(第 4 层·字段级) | T-602 | 给各模型**字段**加中文 `verbose_name`,使 admin 列表/编辑页的字段标签显示中文,在 T-602(1-3 层)之上做。范围覆盖 `users`/`billing`/`ai`(及 portal 相关)模型的业务字段,例如 `points_balance`→点数余额、`key_prefix`→Key 前缀、`points_delta`→点数变动、`balance_after`→变动后余额、`amount_money`→金额、`exchange_rate`→汇率、`points_granted`→到账点数、`api_type`/`capabilities`/`is_active`/`created_at` 等;`admin.py` 里自定义显示方法(`@admin.display(description=...)`)同步中文。**仅显示层**:`verbose_name` 只改展示,**不改字段名、不改代码引用、英文字段名保持不变**;产出的是 `AlterField`(metadata-only,**无 DB schema 变更**)迁移。验收:`makemigrations`(仅 AlterField,无 schema 变更)→ `migrate` → `check` 0 issues → `test` 全绿 → `/admin/` 字段标签目视中文,并在 `../progress.md` 留证据。T-605 已解除邮箱验证口径阻塞;当前待在稳定 MySQL 测试库上补跑完整验证后再标 `DONE` | TODO |
|
||||||
| T-605 | 落实「免邮箱验证」策略 | T-501 | 把 `ACCOUNT_EMAIL_VERIFICATION="none"`(注册即可用、不发验证邮件、邮箱仍必填且唯一)作为**既定策略**清理落地:① `config/settings.py` 把 `ACCOUNT_EMAIL_VERIFICATION = "none"#"mandatory"` 改为干净的 `"none"`(去行内注释),并把免验证下无实际意义的 `ACCOUNT_LOGIN_ON_EMAIL_CONFIRMATION` 设为 `False`;② 更新 `apps/portal/tests.py` 里假设 mandatory 的 2 条测试(signup 不再依赖验证邮件、未验证也可直接登录),改为断言「注册后可直接登录」;③ 同步全项目文档口径(`02-requirements`/`05-coding-rules`/`api`/`04-architecture`/`03-tech-stack`/`routes`/`env`/`deployment`/`00-ai-start-here` 中「邮箱验证」→「免邮箱验证,邮箱仍唯一」)。验收:`check` 通过,`apps.portal` 26 tests OK;全量 `manage.py test` 已尝试,跑到 95/131 后因远程 MySQL 连接超时失败(WinError 10051/10060),非本任务断言失败,详见 `../progress.md` | DONE |
|
| T-605 | 落实「免邮箱验证」策略 | T-501 | 把 `ACCOUNT_EMAIL_VERIFICATION="none"`(注册即可用、不发验证邮件、邮箱仍必填且唯一)作为**既定策略**清理落地:① `config/settings.py` 把 `ACCOUNT_EMAIL_VERIFICATION = "none"#"mandatory"` 改为干净的 `"none"`(去行内注释),并把免验证下无实际意义的 `ACCOUNT_LOGIN_ON_EMAIL_CONFIRMATION` 设为 `False`;② 更新 `apps/portal/tests.py` 里假设 mandatory 的 2 条测试(signup 不再依赖验证邮件、未验证也可直接登录),改为断言「注册后可直接登录」;③ 同步全项目文档口径(`02-requirements`/`05-coding-rules`/`api`/`04-architecture`/`03-tech-stack`/`routes`/`env`/`deployment`/`00-ai-start-here` 中「邮箱验证」→「免邮箱验证,邮箱仍唯一」)。验收:`check` 通过,`apps.portal` 26 tests OK;全量 `manage.py test` 已尝试,跑到 95/131 后因远程 MySQL 连接超时失败(WinError 10051/10060),非本任务断言失败,详见 `../progress.md` | DONE |
|
||||||
| T-604 | 中文敏感词本地过滤(本地 keyword provider) | T-302, T-401 | 按 [`moderation.md`](moderation.md) 实施。**范围收紧**:T-604 只做输入 prompt 的本地敏感词快筛,不做云内容安全、不做输出审核、不做图片审核。**关键时序**:serializer 后先审 prompt,命中即 `400 content_blocked`;不得先下载 `image_url`,不得预扣点,不写 `CallRecord` / `PointsLedger`,不调上游。**核心实现**:新增 `apps.moderation`、`SensitiveWord` 模型/admin/迁移、keyword provider、归一化管线、Aho-Corasick matcher;`ahocorapy` 作为候选依赖,编码前必须验证 PyPI 可用性和 API 形状。**缓存**:matcher 进程内缓存,词库变更用共享 cache 版本号失效,不能只靠 `post_save` signal;生产依赖共享 cache。**配置**:`MODERATION_ENABLED=false` 默认 no-op;启用时 `MODERATION_PROVIDER=keyword`;MVP `SensitiveWord.action` 只支持 `block`。**验收**:`check`/`test` 全绿,覆盖 no-op、命中拦截且不扣点/不建记录/不调上游/不下载图片、归一化防绕过、词库变更后 matcher 重建;真实词库数据不进仓库,`__pycache__` 不进 Git | DONE |
|
| T-604 | 中文敏感词本地过滤(本地 keyword provider) | T-302, T-401 | 按 [`moderation.md`](moderation.md) 实施。**范围收紧**:T-604 只做输入 prompt 的本地敏感词快筛,不做云内容安全、不做输出审核、不做图片审核。**关键时序**:serializer 后先审 prompt,命中即 `400 content_blocked`;不得先下载 `image_url`,不得预扣点,不写 `CallRecord` / `PointsLedger`,不调上游。**核心实现**:新增 `apps.moderation`、`SensitiveWord` 模型/admin/迁移、keyword provider、归一化管线、Aho-Corasick matcher;`ahocorapy` 作为候选依赖,编码前必须验证 PyPI 可用性和 API 形状。**缓存**:matcher 进程内缓存,词库变更用共享 cache 版本号失效,不能只靠 `post_save` signal;生产依赖共享 cache。**配置**:`MODERATION_ENABLED=false` 默认 no-op;启用时 `MODERATION_PROVIDER=keyword`;MVP `SensitiveWord.action` 只支持 `block`。**验收**:`check`/`test` 全绿,覆盖 no-op、命中拦截且不扣点/不建记录/不调上游/不下载图片、归一化防绕过、词库变更后 matcher 重建;真实词库数据不进仓库,`__pycache__` 不进 Git | DONE |
|
||||||
| T-606 | 公开首页 + 客户端下载入口 | T-501 | 给网站补「前门」并提供桌面端下载。**路由改造**:`/` 从「重定向到 `/dashboard`」改为**公开首页**(匿名可访问、不跳登录);已登录用户显示「进入控制台」,匿名显示「注册/登录 + 下载客户端」。**首页内容**(SSR 模板):项目一句话介绍(生成标题/图片、按点数计费)+ 三步上手(注册→充值→建 API Key→桌面端填 Key)+ 下载入口 + 文档链接。**`DownloadRelease` 模型**:`platform`(如 windows)、`version`、`file`(FileField,**前期存 `MEDIA_ROOT`、服务器托管**) + `external_url`(URLField 可选,**后续切对象存储/CDN 用,有则优先**)、`sha256`、`is_current`(每平台仅一个当前版本)、`release_notes`、时间戳;admin 可上传安装包并标记当前版本;迁移。**下载区块**:展示当前 release 的版本、下载按钮、**SHA256 校验值**、可选 release notes;无 current release 时优雅提示「暂未发布」。**托管策略**:**前期安装包放本服务器**(生产由 **Nginx 直接服务 media/下载文件、不走 Django**,与 T-403 static/media serving 一致,大文件不占 gunicorn worker);`external_url` 预留,后续切对象存储只改后台链接不改代码。**安全**:下载走 HTTPS,页面展示 SHA256 供校验;**代码签名**作为决策登记——未签名 Windows 安装包会被 SmartScreen 拦「未知发布者」、macOS 被 Gatekeeper 拦,首页先给「如何忽略警告」说明,正式签名后续补(挂 Backlog / deployment)。**含测试**:`/` 匿名 200 不跳登录、下载区展示当前 release、无 current release 优雅处理、已登录用户显示「进入控制台」。**视觉原型(已定 v1)**:按 `prototypes/cmhub-homepage-v1.svg` 落地——「生成台」方向:靛蓝=生成 / 琥珀=点数;Hero 为「商品图 + 一句话 → 吸睛标题 + 生成主图 + 点数计量」转化图;四步上手 01–04、两张能力卡、深色计费 band、下载区(版本/SHA256/未签名提示);配色、间距、结构照此原型转成 Django 模板(Bootstrap + 本地 static)。验收 `check`/`test`/`init` 全绿并在 `../progress.md` 留证据 | TODO |
|
| T-606 | 公开首页 + 客户端下载入口 | T-501 | 给网站补「前门」并提供桌面端下载。**路由改造**:`/` 从「重定向到 `/dashboard`」改为**公开首页**(匿名可访问、不跳登录);已登录用户显示「进入控制台」,匿名显示「注册/登录 + 下载客户端」。**首页内容**(SSR 模板):项目一句话介绍(生成标题/图片、按点数计费)+ 三步上手(注册→充值→建 API Key→桌面端填 Key)+ 下载入口 + 文档链接。**`DownloadRelease` 模型**:`platform`(如 windows)、`version`、`file`(FileField,**前期存 `MEDIA_ROOT`、服务器托管**) + `external_url`(URLField 可选,**后续切对象存储/CDN 用,有则优先**)、`sha256`、`is_current`(每平台仅一个当前版本)、`release_notes`、时间戳;admin 可上传安装包并标记当前版本;迁移。**下载区块**:展示当前 release 的版本、下载按钮、**SHA256 校验值**、可选 release notes;无 current release 时优雅提示「暂未发布」。**托管策略**:**前期安装包放本服务器**(生产由 **Nginx 直接服务 media/下载文件、不走 Django**,与 T-403 static/media serving 一致,大文件不占 gunicorn worker);`external_url` 预留,后续切对象存储只改后台链接不改代码。**安全**:下载走 HTTPS,页面展示 SHA256 供校验;**代码签名**作为决策登记——未签名 Windows 安装包会被 SmartScreen 拦「未知发布者」、macOS 被 Gatekeeper 拦,首页先给「如何忽略警告」说明,正式签名后续补(挂 Backlog / deployment)。**含测试**:`/` 匿名 200 不跳登录、下载区展示当前 release、无 current release 优雅处理、已登录用户显示「进入控制台」。**视觉原型(已定 v1)**:按 `prototypes/cmhub-homepage-v1.svg` 落地——「生成台」方向:靛蓝=生成 / 琥珀=点数;Hero 为「商品图 + 一句话 → 吸睛标题 + 生成主图 + 点数计量」转化图;四步上手 01–04、两张能力卡、深色计费 band、下载区(版本/SHA256/未签名提示);配色、间距、结构照此原型转成 Django 模板(Bootstrap + 本地 static)。**视觉一致性(brand token)**:按 [`brand.md`](brand.md) 抽出共享 CSS 变量(如 `apps/portal/static/portal/brand.css`),**首页与现有 portal 页面(dashboard/记录/充值/API Key)一起套用同一套 token**(把配色/字体变量灌进现有 Bootstrap,各页只引用变量不散写 hex),确保落地页与登录后控制台风格一致——**不是只做漂亮首页**。验收 `check`/`test`/`init` 全绿并在 `../progress.md` 留证据 | TODO |
|
||||||
|
|
||||||
## 里程碑
|
## 里程碑
|
||||||
|
|
||||||
|
|||||||
@@ -30,6 +30,7 @@
|
|||||||
- [API 合约](api.md):对外接口、支付回调、AI 调用模块合约、错误码。
|
- [API 合约](api.md):对外接口、支付回调、AI 调用模块合约、错误码。
|
||||||
- [内容安全与本地敏感词过滤](moderation.md):T-604 的 prompt 敏感词过滤设计、时序、缓存和验收口径。
|
- [内容安全与本地敏感词过滤](moderation.md):T-604 的 prompt 敏感词过滤设计、时序、缓存和验收口径。
|
||||||
- [路由与页面结构](routes.md):API 路由与 django-admin 后台职责。
|
- [路由与页面结构](routes.md):API 路由与 django-admin 后台职责。
|
||||||
|
- [品牌基线 Brand Tokens](brand.md):配色/字体/logo/术语/语气的单一真相源(含可复制 CSS 变量);首页、portal、桌面端统一引用,对应任务 T-606。
|
||||||
- [环境变量与配置](env.md):Django、数据库、AI 密钥加密、支付、对象存储等配置项。
|
- [环境变量与配置](env.md):Django、数据库、AI 密钥加密、支付、对象存储等配置项。
|
||||||
- [当前实现状态](current-state.md):可覆盖的当前快照、可运行命令、下一步任务。
|
- [当前实现状态](current-state.md):可覆盖的当前快照、可运行命令、下一步任务。
|
||||||
- [已有项目接入清单](adoption-checklist.md):把模板补进已有代码库时的迁移步骤。
|
- [已有项目接入清单](adoption-checklist.md):把模板补进已有代码库时的迁移步骤。
|
||||||
|
|||||||
+121
@@ -0,0 +1,121 @@
|
|||||||
|
# 品牌基线(Brand Tokens)
|
||||||
|
|
||||||
|
> cmhub 的视觉单一真相源。首页、用户端(portal)、后台(admin 部分)、桌面端(品牌层)都引用本文;**一致的是这套 token(色/字/logo/术语/语气),布局按各自的活儿来**。
|
||||||
|
> 取自选定的首页原型 `prototypes/cmhub-homepage-v1.svg`(「生成台」方向)。
|
||||||
|
|
||||||
|
## 0. 一句话定位
|
||||||
|
|
||||||
|
cmhub 有双重身份——**AI 生成** + **按点数计费**。视觉主线就用两种颜色编码这两件事:**靛蓝=生成**,**琥珀=点数**。
|
||||||
|
|
||||||
|
## 1. 配色(Color)
|
||||||
|
|
||||||
|
| Token | Hex | 角色 / 用途 |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| `--cm-paper` | `#F5F7FB` | 页面背景(冷调纸白,**不是** cream) |
|
||||||
|
| `--cm-card` | `#FFFFFF` | 卡片 / 面板 |
|
||||||
|
| `--cm-ink-strong` | `#161C2B` | 大标题 |
|
||||||
|
| `--cm-ink` | `#1A2030` | 正文主色 |
|
||||||
|
| `--cm-ink-soft` | `#5A6478` | 次要文字 / 说明 |
|
||||||
|
| `--cm-faint` | `#8A93A6` | 弱文字 / 占位 |
|
||||||
|
| `--cm-line` | `#DCE1EC` | 分隔线 / 描边 |
|
||||||
|
| **`--cm-indigo`** | `#5B4BEF` | **生成 / AI / 主行动**(主按钮、链接、强调) |
|
||||||
|
| `--cm-indigo-deep` | `#3A2FB0` | 靛蓝渐变深端 |
|
||||||
|
| **`--cm-amber`** | `#E8A02D` | **点数 / 额度 / 价值**(点数数字、计量、价格标签) |
|
||||||
|
| `--cm-amber-ink` | `#C9821A` | 琥珀文字(浅底上可读的深琥珀) |
|
||||||
|
| `--cm-mint` | `#3FCB7E` | 成功 / 生成完成(**克制使用**,只做状态点/对勾) |
|
||||||
|
| `--cm-chip-indigo` | `#ECEBFF` | 靛蓝浅底 chip |
|
||||||
|
| `--cm-chip-amber` | `#FBEFD9` | 琥珀浅底 chip |
|
||||||
|
| `--cm-band-1` | `#1B1740` | 深色计费段渐变(起) |
|
||||||
|
| `--cm-band-2` | `#2A1E5E` | 深色计费段渐变(止) |
|
||||||
|
|
||||||
|
**用色纪律**:
|
||||||
|
- 靛蓝和琥珀**各司其职**,别混用(琥珀专属点数/价值,靛蓝专属生成/行动)。
|
||||||
|
- 整页浅色,深色只用在**计费段**一处,给长页面重心和呼吸。
|
||||||
|
- mint 只点缀「成功/在线」,不当主色。
|
||||||
|
|
||||||
|
## 2. 字体(Type)
|
||||||
|
|
||||||
|
**字体栈**:
|
||||||
|
|
||||||
|
```
|
||||||
|
拉丁展示/正文:'Space Grotesk', system-ui, sans-serif
|
||||||
|
中文:'PingFang SC','Microsoft YaHei','Noto Sans SC', sans-serif
|
||||||
|
等宽(点数/SHA256/API Key/代码/端点):'JetBrains Mono','SFMono-Regular',Consolas, monospace
|
||||||
|
```
|
||||||
|
|
||||||
|
**类型阶梯(桌面基准)**:
|
||||||
|
|
||||||
|
| 角色 | 字号 / 字重 | 备注 |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| H1 / Hero | 56–58 / 700 | 字距 `-1.5px` |
|
||||||
|
| 区块标题 | 38 / 700 | 字距 `-0.8px` |
|
||||||
|
| 卡片标题 | 22 / 700 | |
|
||||||
|
| 引导语 lead | 19 / 400 | `--cm-ink-soft` |
|
||||||
|
| 正文 | 15.5 / 400 | |
|
||||||
|
| eyebrow / 标签 | 13 / 600 | 字距 `+3~4px`,`--cm-indigo` |
|
||||||
|
| 数据 / 等宽 | 14 / 500 | 点数、校验值、Key、端点用等宽 |
|
||||||
|
|
||||||
|
**规矩**:点数、SHA256、API Key、接口端点一律**等宽字体**——它们是「可复制的精确值」,等宽传达这一点。
|
||||||
|
|
||||||
|
## 3. Logo / 图标
|
||||||
|
|
||||||
|
- **Wordmark**:计量 glyph + `cmhub`(700)。glyph = **三根递增的竖条,最后一根琥珀色**,隐喻「点数计量」。
|
||||||
|
- **圆角**:小元素 `14px`,大卡片 `20px`。
|
||||||
|
- **图标**:几何线性,描边 `2–2.4px`,靛蓝/琥珀,圆角端点。
|
||||||
|
|
||||||
|
## 4. 术语(用词一致,跨端统一)
|
||||||
|
|
||||||
|
界面用词是导航系统,各端必须一致。
|
||||||
|
|
||||||
|
| 概念 | ✅ 用 | ❌ 别用 |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| 计费单位 | **点数** | 积分 / 额度 / credit(对外文案不用) |
|
||||||
|
| 对外模型标识 | **能力别名**(如 `title-standard`) | 模型名 / SKU(不暴露给用户) |
|
||||||
|
| 两个操作 | **生成标题** / **生成主图(改图)** | 文生图/AI 画图(口径不统一) |
|
||||||
|
| 鉴权凭证 | **API Key** | 密钥 / token(对外统一叫 API Key) |
|
||||||
|
| 加点 | **充值** | 付费 / 购买点数 |
|
||||||
|
| 扣/退 | **扣点** / **退点** | 扣费 / 退款(退款专指钱) |
|
||||||
|
|
||||||
|
## 5. 语气(Voice)
|
||||||
|
|
||||||
|
- **说人话**:按用户看得懂的说,不用系统术语(说「管理 API Key」,不说「凭证配置」)。
|
||||||
|
- **诚实**:如实说「注册不送点数」「失败自动退点」「首次安装点『仍要运行』」——不粉饰。
|
||||||
|
- **动词优先、句子式大小写**:按钮说清「做完会发生什么」(「下载 .exe」而非「获取」)。
|
||||||
|
- **同一动作全程同名**:按钮「充值」→ 结果提示也用「充值」。
|
||||||
|
|
||||||
|
## 6. 落地:CSS 变量(复制即用)
|
||||||
|
|
||||||
|
首页与 portal 落地时把下面这段放进共享样式(如 `apps/portal/static/portal/brand.css`),Bootstrap 主题变量指向这些值,**各页只引用变量、不散写 hex**:
|
||||||
|
|
||||||
|
```css
|
||||||
|
:root{
|
||||||
|
--cm-paper:#F5F7FB; --cm-card:#FFFFFF;
|
||||||
|
--cm-ink-strong:#161C2B; --cm-ink:#1A2030; --cm-ink-soft:#5A6478; --cm-faint:#8A93A6;
|
||||||
|
--cm-line:#DCE1EC;
|
||||||
|
--cm-indigo:#5B4BEF; --cm-indigo-deep:#3A2FB0;
|
||||||
|
--cm-amber:#E8A02D; --cm-amber-ink:#C9821A;
|
||||||
|
--cm-mint:#3FCB7E;
|
||||||
|
--cm-chip-indigo:#ECEBFF; --cm-chip-amber:#FBEFD9;
|
||||||
|
--cm-band-1:#1B1740; --cm-band-2:#2A1E5E;
|
||||||
|
--cm-radius:14px; --cm-radius-lg:20px;
|
||||||
|
--cm-font-cjk:'PingFang SC','Microsoft YaHei','Noto Sans SC',sans-serif;
|
||||||
|
--cm-font-latin:'Space Grotesk',system-ui,sans-serif;
|
||||||
|
--cm-font-mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;
|
||||||
|
--cm-btn:linear-gradient(#6455F2,#4335CF);
|
||||||
|
--cm-thread:linear-gradient(#5B4BEF,#E8A02D);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 7. 应用范围
|
||||||
|
|
||||||
|
| 界面 | 一致要求 |
|
||||||
|
| --- | --- |
|
||||||
|
| **首页**(T-606) | 全套 token,视觉即原型 v1 |
|
||||||
|
| **用户端 portal**(dashboard/记录/充值/API Key) | **同套 token**,与首页一致(避免落地页精致、控制台朴素的割裂)——见 T-606 验收 |
|
||||||
|
| **django-admin** | 主要靠 Django 自带 + 中文化(T-602/603);不强求,但主色/logo 可选对齐 |
|
||||||
|
| **桌面端 cmbot** | **品牌层对齐**(logo、主色靛蓝×琥珀、术语),UI 布局按桌面工具习惯,**渐进靠拢、单独排期** |
|
||||||
|
|
||||||
|
## 关联
|
||||||
|
|
||||||
|
- 首页原型:`prototypes/cmhub-homepage-v1.svg`(选定)、`cmhub-homepage-v2.svg`(开发者页参考)。
|
||||||
|
- 任务:`06-tasks.md` T-606。
|
||||||
+10
@@ -1308,3 +1308,13 @@
|
|||||||
- 决策:**首页采用 v1「生成台」方向**。理由:首页第一受众是自助注册的电商卖家,v1 的「看图就懂 + 讲价值」更利于转化;v2 的终端质感更适合后续「开发者/文档页」,可保留复用,非二选一。
|
- 决策:**首页采用 v1「生成台」方向**。理由:首页第一受众是自助注册的电商卖家,v1 的「看图就懂 + 讲价值」更利于转化;v2 的终端质感更适合后续「开发者/文档页」,可保留复用,非二选一。
|
||||||
- 落点:`06-tasks.md` T-606 验收要点已指向 `prototypes/cmhub-homepage-v1.svg`,要求配色/间距/结构照此原型转 Django 模板(Bootstrap + 本地 static)。
|
- 落点:`06-tasks.md` T-606 验收要点已指向 `prototypes/cmhub-homepage-v1.svg`,要求配色/间距/结构照此原型转 Django 模板(Bootstrap + 本地 static)。
|
||||||
- 说明:`prototypes/` 两个 SVG 为设计存档,未来实现 T-606 时以 v1 为准;v2 留作开发者页参考。
|
- 说明:`prototypes/` 两个 SVG 为设计存档,未来实现 T-606 时以 v1 为准;v2 留作开发者页参考。
|
||||||
|
|
||||||
|
## 2026-07-06 品牌基线 brand.md + T-606 加 portal 视觉一致
|
||||||
|
|
||||||
|
- 背景:v1 首页精致,但现有 portal 是朴素 Bootstrap;只做漂亮首页会造成「落地页酷、控制台朴素」的割裂。且桌面端是独立项目,需要一份跨端的品牌单一真相源。
|
||||||
|
- 决策:一致的是**品牌 token**(色/字/logo/术语/语气),不是像素级 UI;各端布局按各自的活儿来。
|
||||||
|
- 落点:
|
||||||
|
- 新增 `docs/brand.md`:靛蓝=生成 / 琥珀=点数的配色、字体栈与阶梯、logo/图标、术语表、语气、**可复制的 `:root` CSS 变量**、应用范围(首页/portal/admin/桌面端)。取自 `prototypes/cmhub-homepage-v1.svg`。
|
||||||
|
- `06-tasks.md` T-606 验收新增「视觉一致性」:抽共享 CSS 变量(`brand.css`),**首页与现有 portal(dashboard/记录/充值/API Key)一起套同一套 token**,不是只做漂亮首页。
|
||||||
|
- `docs/README.md` 导航登记 brand.md。
|
||||||
|
- 桌面端 cmbot(独立项目):品牌层对齐(logo/主色/术语),UI 渐进靠拢、单独排期,不阻塞 T-606。
|
||||||
|
|||||||
@@ -56,9 +56,9 @@
|
|||||||
<rect x="144" y="37" width="4" height="17" rx="2" fill="#E8A02D"/>
|
<rect x="144" y="37" width="4" height="17" rx="2" fill="#E8A02D"/>
|
||||||
<text x="164" y="52" font-size="22" font-weight="700" class="ink">cmhub</text>
|
<text x="164" y="52" font-size="22" font-weight="700" class="ink">cmhub</text>
|
||||||
|
|
||||||
<text x="470" y="51" font-size="15.5" font-weight="500" class="soft">功能</text>
|
<text x="812" y="51" font-size="15.5" font-weight="500" class="soft">功能</text>
|
||||||
<text x="560" y="51" font-size="15.5" font-weight="500" class="soft">计费</text>
|
<text x="902" y="51" font-size="15.5" font-weight="500" class="soft">计费</text>
|
||||||
<text x="650" y="51" font-size="15.5" font-weight="500" class="soft">文档</text>
|
<text x="992" y="51" font-size="15.5" font-weight="500" class="soft">文档</text>
|
||||||
|
|
||||||
<text x="1085" y="51" font-size="15.5" font-weight="600" class="ink">登录</text>
|
<text x="1085" y="51" font-size="15.5" font-weight="600" class="ink">登录</text>
|
||||||
<rect x="1160" y="26" width="160" height="40" rx="10" fill="url(#btn)"/>
|
<rect x="1160" y="26" width="160" height="40" rx="10" fill="url(#btn)"/>
|
||||||
@@ -73,7 +73,7 @@
|
|||||||
<text x="118" y="252" class="h1">把商品图和一句话,</text>
|
<text x="118" y="252" class="h1">把商品图和一句话,</text>
|
||||||
<text x="118" y="322" class="h1">变成能卖货的</text>
|
<text x="118" y="322" class="h1">变成能卖货的</text>
|
||||||
<text x="500" y="322" class="h1" fill="#5B4BEF">标题与主图</text>
|
<text x="500" y="322" class="h1" fill="#5B4BEF">标题与主图</text>
|
||||||
<text x="810" y="322" class="h1">。</text>
|
<text x="786" y="322" class="h1">。</text>
|
||||||
|
|
||||||
<text x="120" y="392" class="lead">cmhub 把「生成标题」「生成主图」封装成 HTTP 接口,桌面端拿</text>
|
<text x="120" y="392" class="lead">cmhub 把「生成标题」「生成主图」封装成 HTTP 接口,桌面端拿</text>
|
||||||
<text x="120" y="422" class="lead">API Key 直接用,按点数计费——换底层模型,价格不变。</text>
|
<text x="120" y="422" class="lead">API Key 直接用,按点数计费——换底层模型,价格不变。</text>
|
||||||
@@ -114,11 +114,13 @@
|
|||||||
<text x="868" y="290" font-size="15" font-weight="600" class="ink">白色纯棉基础款 T 恤</text>
|
<text x="868" y="290" font-size="15" font-weight="600" class="ink">白色纯棉基础款 T 恤</text>
|
||||||
<text x="868" y="313" font-size="13" class="faint">提示词:夏季清爽 · 男女同款 · 主图去背景</text>
|
<text x="868" y="313" font-size="13" class="faint">提示词:夏季清爽 · 男女同款 · 主图去背景</text>
|
||||||
|
|
||||||
<!-- pipeline: thread + 点数计量 -->
|
<!-- pipeline: 生成 + 点数计量(输入 ↓ 计量 ↓ 输出) -->
|
||||||
<line x1="1041" y1="344" x2="1041" y2="378" stroke="url(#thread)" stroke-width="2.5" stroke-dasharray="3 4"/>
|
<line x1="1041" y1="338" x2="1041" y2="348" stroke="url(#thread)" stroke-width="2.5"/>
|
||||||
<rect x="946" y="348" width="190" height="26" rx="13" fill="#FBEFD9"/>
|
<rect x="928" y="348" width="226" height="28" rx="14" fill="#FBEFD9"/>
|
||||||
<path d="M962 361 h10 M967 356 v10" stroke="#C9821A" stroke-width="2" stroke-linecap="round"/>
|
<circle cx="950" cy="362" r="6" fill="none" stroke="#C9821A" stroke-width="2"/>
|
||||||
<text x="982" y="365" class="metric" fill="#9A6510">生成中 · 计量扣点</text>
|
<path d="M950 358 v4 l3 2" stroke="#C9821A" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<text x="968" y="367" class="metric" fill="#9A6510">生成中 · 按点数计量</text>
|
||||||
|
<path d="M1034 382 l7 7 l7 -7" stroke="#D6B678" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
|
||||||
<!-- OUTPUT -->
|
<!-- OUTPUT -->
|
||||||
<text x="790" y="410" class="kicker">输出</text>
|
<text x="790" y="410" class="kicker">输出</text>
|
||||||
@@ -126,15 +128,15 @@
|
|||||||
<g>
|
<g>
|
||||||
<rect x="790" y="422" width="330" height="34" rx="9" fill="#F3F2FF"/>
|
<rect x="790" y="422" width="330" height="34" rx="9" fill="#F3F2FF"/>
|
||||||
<text x="806" y="444" class="chiptxt">纯棉白T恤男夏季薄款情侣装宽松半袖</text>
|
<text x="806" y="444" class="chiptxt">纯棉白T恤男夏季薄款情侣装宽松半袖</text>
|
||||||
<text x="1104" y="444" text-anchor="end" class="metric" fill="#5B4BEF">−2</text>
|
<text x="1104" y="444" text-anchor="end" class="metric" fill="#C9821A">−2</text>
|
||||||
|
|
||||||
<rect x="790" y="464" width="330" height="34" rx="9" fill="#F3F2FF"/>
|
<rect x="790" y="464" width="330" height="34" rx="9" fill="#F3F2FF"/>
|
||||||
<text x="806" y="486" class="chiptxt">日系基础款白色短袖打底衫百搭上衣</text>
|
<text x="806" y="486" class="chiptxt">日系基础款白色短袖打底衫百搭上衣</text>
|
||||||
<text x="1104" y="486" text-anchor="end" class="metric" fill="#5B4BEF">−2</text>
|
<text x="1104" y="486" text-anchor="end" class="metric" fill="#C9821A">−2</text>
|
||||||
|
|
||||||
<rect x="790" y="506" width="330" height="34" rx="9" fill="#F3F2FF"/>
|
<rect x="790" y="506" width="330" height="34" rx="9" fill="#F3F2FF"/>
|
||||||
<text x="806" y="528" class="chiptxt">纯色圆领纯棉T恤男女同款舒适透气</text>
|
<text x="806" y="528" class="chiptxt">纯色圆领纯棉T恤男女同款舒适透气</text>
|
||||||
<text x="1104" y="528" text-anchor="end" class="metric" fill="#5B4BEF">−2</text>
|
<text x="1104" y="528" text-anchor="end" class="metric" fill="#C9821A">−2</text>
|
||||||
</g>
|
</g>
|
||||||
<!-- generated 主图 -->
|
<!-- generated 主图 -->
|
||||||
<rect x="1138" y="422" width="154" height="118" rx="14" fill="url(#thumbOut)" stroke="#E7E3FA"/>
|
<rect x="1138" y="422" width="154" height="118" rx="14" fill="url(#thumbOut)" stroke="#E7E3FA"/>
|
||||||
@@ -197,18 +199,18 @@
|
|||||||
<rect x="152" y="1342" width="52" height="52" rx="14" fill="#ECEBFF"/>
|
<rect x="152" y="1342" width="52" height="52" rx="14" fill="#ECEBFF"/>
|
||||||
<path d="M167 1362 h22 M167 1370 h22 M167 1378 h14" stroke="#5B4BEF" stroke-width="2.4" stroke-linecap="round"/>
|
<path d="M167 1362 h22 M167 1370 h22 M167 1378 h14" stroke="#5B4BEF" stroke-width="2.4" stroke-linecap="round"/>
|
||||||
<text x="152" y="1432" class="cardtitle">生成标题</text>
|
<text x="152" y="1432" class="cardtitle">生成标题</text>
|
||||||
<rect x="560" y="1352" width="104" height="30" rx="15" fill="#F3F2FF"/>
|
<rect x="560" y="1352" width="104" height="30" rx="15" fill="#FBEFD9"/>
|
||||||
<text x="612" y="1372" text-anchor="middle" class="metric" fill="#5B4BEF">2 点 / 次起</text>
|
<text x="612" y="1372" text-anchor="middle" class="metric" fill="#C9821A">2 点 / 次起</text>
|
||||||
<text x="152" y="1468" class="body">给商品生成多个吸睛中文标题,可纯文字,也可看图生成。</text>
|
<text x="152" y="1468" class="body">给商品生成多个吸睛中文标题,可纯文字,也可看图生成。</text>
|
||||||
<text x="152" y="1494" class="body">别名调用,换底层模型价格不变;失败自动退点。</text>
|
<text x="152" y="1494" class="body">别名调用,换底层模型价格不变;失败自动退点。</text>
|
||||||
</g>
|
</g>
|
||||||
<!-- card B: 主图 -->
|
<!-- card B: 主图 -->
|
||||||
<g filter="url(#softsm)"><rect x="744" y="1310" width="576" height="230" rx="18" fill="#fff"/></g>
|
<g filter="url(#softsm)"><rect x="744" y="1310" width="576" height="230" rx="18" fill="#fff"/></g>
|
||||||
<g>
|
<g>
|
||||||
<rect x="776" y="1342" width="52" height="52" rx="14" fill="#FBEFD9"/>
|
<rect x="776" y="1342" width="52" height="52" rx="14" fill="#ECEBFF"/>
|
||||||
<rect x="789" y="1356" width="26" height="24" rx="5" fill="none" stroke="#C9821A" stroke-width="2.2"/>
|
<rect x="789" y="1356" width="26" height="24" rx="5" fill="none" stroke="#5B4BEF" stroke-width="2.2"/>
|
||||||
<circle cx="797" cy="1364" r="2.6" fill="#C9821A"/>
|
<circle cx="797" cy="1364" r="2.6" fill="#5B4BEF"/>
|
||||||
<path d="M791 1378 l6 -7 l5 5 l4 -5 l6 7 z" fill="#C9821A"/>
|
<path d="M791 1378 l6 -7 l5 5 l4 -5 l6 7 z" fill="#5B4BEF"/>
|
||||||
<text x="776" y="1432" class="cardtitle">生成主图 / 改图</text>
|
<text x="776" y="1432" class="cardtitle">生成主图 / 改图</text>
|
||||||
<rect x="1176" y="1352" width="112" height="30" rx="15" fill="#FBEFD9"/>
|
<rect x="1176" y="1352" width="112" height="30" rx="15" fill="#FBEFD9"/>
|
||||||
<text x="1232" y="1372" text-anchor="middle" class="metric" fill="#C9821A">10 点 / 次起</text>
|
<text x="1232" y="1372" text-anchor="middle" class="metric" fill="#C9821A">10 点 / 次起</text>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 18 KiB |
Reference in New Issue
Block a user