From cae935588b6c54e0e6decad4f20cd3ee1d6a4fc1 Mon Sep 17 00:00:00 2001 From: iye <1713042409@qq.com> Date: Fri, 15 May 2026 17:55:11 +0800 Subject: [PATCH] =?UTF-8?q?init:=20=E7=94=B5=E5=95=86AI=E5=B9=B3=E5=8F=B0?= =?UTF-8?q?=20v2.1=20=E9=9D=99=E6=80=81=E8=AE=BE=E8=AE=A1=E7=A8=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 10 个页面 (工作台/项目/商品/流水线/资产/账户/创建向导) - V2.1 Restraint 设计规范 (冷灰底 + #FA5D19 + 8px 圆角) - 完整 design-system.html 组件库参考 - SVG line icon · stroke 1.5 全合规 Co-Authored-By: Claude Opus 4.7 --- .gitignore | 28 + README.md | 33 + 电商AI平台/DESIGN_SPEC_V2.md | 952 +++++++++++++++++ 电商AI平台/README.md | 53 + 电商AI平台/account.html | 170 +++ 电商AI平台/assets/restraint.css | 885 ++++++++++++++++ 电商AI平台/assets/shell.js | 195 ++++ 电商AI平台/design-system.html | 1730 +++++++++++++++++++++++++++++++ 电商AI平台/index.html | 173 ++++ 电商AI平台/library.html | 120 +++ 电商AI平台/pipeline.html | 784 ++++++++++++++ 电商AI平台/product-create.html | 1594 ++++++++++++++++++++++++++++ 电商AI平台/products.html | 128 +++ 电商AI平台/projects-new.html | 287 +++++ 电商AI平台/projects.html | 523 ++++++++++ 15 files changed, 7655 insertions(+) create mode 100644 .gitignore create mode 100644 README.md create mode 100644 电商AI平台/DESIGN_SPEC_V2.md create mode 100644 电商AI平台/README.md create mode 100644 电商AI平台/account.html create mode 100644 电商AI平台/assets/restraint.css create mode 100644 电商AI平台/assets/shell.js create mode 100644 电商AI平台/design-system.html create mode 100644 电商AI平台/index.html create mode 100644 电商AI平台/library.html create mode 100644 电商AI平台/pipeline.html create mode 100644 电商AI平台/product-create.html create mode 100644 电商AI平台/products.html create mode 100644 电商AI平台/projects-new.html create mode 100644 电商AI平台/projects.html diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..4e5a4f6 --- /dev/null +++ b/.gitignore @@ -0,0 +1,28 @@ +# 工程文件 +node_modules/ +.next/ +.turbo/ +dist/ +build/ + +# OS / IDE +.DS_Store +Thumbs.db +.vscode/ +.idea/ +*.swp + +# 日志 +*.log +npm-debug.log* +pnpm-debug.log* + +# 本地环境 +.env +.env.local +.env.*.local + +# 临时 +*.tmp +*.bak +screenshots/ diff --git a/README.md b/README.md new file mode 100644 index 0000000..da86bbc --- /dev/null +++ b/README.md @@ -0,0 +1,33 @@ +# AirShelf · UI 设计稿货架 + +@zyc / iye 的 UI 设计稿合集。每个子目录是一个独立项目,各自有自己的设计规范和静态稿。 + +## 货架内容 + +| 项目 | 风格 | 说明 | +| --- | --- | --- | +| [电商AI平台/](电商AI平台/) | Restraint V2.1 (Firecrawl-aligned) | AI 短视频带货生成平台 · 10 个页面 · 完整 5 阶段流水线 | + +--- + +## 浏览方式 + +直接 clone + 用浏览器打开任意 `*.html`: + +```bash +git clone https://gitea.airlabs.art/zyc/AirShelf.git +cd AirShelf/电商AI平台 +# 浏览器直开 index.html · 或本地起 server +npx http-server . -p 8080 +``` + +## 添加新项目 + +新项目作为根目录下的兄弟文件夹(中文命名 OK),保持各自独立: + +``` +AirShelf/ +├── 电商AI平台/ +├── <未来项目 B>/ +└── <未来项目 C>/ +``` diff --git a/电商AI平台/DESIGN_SPEC_V2.md b/电商AI平台/DESIGN_SPEC_V2.md new file mode 100644 index 0000000..834b55b --- /dev/null +++ b/电商AI平台/DESIGN_SPEC_V2.md @@ -0,0 +1,952 @@ +# 流·Studio 设计规范 · V2.1 + +> **版本:** V2.1(2026-05-15) +> **风格代号:** Restraint(克制)· Firecrawl-aligned +> **适用范围:** 流·Studio 全产品(工作台 / 项目 / 商品库 / 流水线 / 资产库 / 编辑器 / 账户) +> **V2.1 更新:** 色彩系统全面对齐 Firecrawl 实测——**冷灰底色**(放弃米白)· **主橙 #FA5D19**(从 #E55B26 调亮)· **20 档 black-alpha**(从 11 档扩展)· **5 色 accent 多彩点**(新增)· accent-black 替代 ink。保留 V2 所有结构性决策(8 px 圆角、inside-border、装订线、mono 装饰)。 +> **与 V2 关系:** V2.1 兼容 V2 的所有 token 命名(`--ink` `--bg` `--card` `--green` `--red` 等保留为 legacy 别名),代码层无需重写。 + +--- + +## 0. 变更速查 + +### V2 → V2.1(本次 · 色彩系统对齐 Firecrawl) + +| # | 维度 | V2 | V2.1 | +| - | ---- | -- | ---- | +| C1 | 底色 | `#FAF9F5` 暖米白 | **`#f9f9f9` 冷灰**(`--background-base`) | +| C2 | 主橙 | `#E55B26` 砖红 | **`#FA5D19`** 更红更饱和 | +| C3 | 文字基色 | `--ink: #15140F` | **`--accent-black: #262626`**(更柔和)· `--ink` 作 legacy 别名 | +| C4 | Alpha 阶梯 | 11 档 `--ink-alpha-*` | **20 档 `--black-alpha-*`**(1/2/3/4/5/6/7/8/10/12/16/20/24/32/40/48/56/64/72/88) | +| C5 | Alpha base | 全部用 `rgba(0,0,0,...)` | **32% 起换 `rgba(38,38,38,...)`**(避免叠出"灰中带蓝") | +| C6 | 状态色 | `--green #3F6B3F` 深森林绿 / `--red #B33A2A` 暗砖红 | **`--accent-forest #42c366`** / **`--accent-crimson #eb3424`**(信号灯感) | +| C7 | Accent 多彩 | 仅橙+绿+红 | **新增 5 色** amethyst/bluetron/crimson/forest/honey(仅用于语义信号) | +| C8 | 边框 | `#EFEBE0` 暖色 | **`#ededed`** 冷灰(无色相) | +| C9 | Selection | 未定义 | **`background: var(--heat-20)` + `color: var(--heat)`**(Firecrawl 签名) | + +### V1 → V2(上次 · 结构性变更,保留) + +| # | 维度 | V1 | V2 | 决策类型 | +| - | ---- | -- | -- | -------- | +| Δ1 | 圆角 | 大容器 0 / 按钮 9 / pill 999 | **大容器 8 / 按钮 8 / pill 999 / dot 999** | **变更** | +| Δ2 | mono `[ STATUS ]` | 大量使用 | **保留**(品牌签名) | 保留 | +| Δ3 | 字体 | Inter | **Inter Tight + 字重 500 替代 450**(免费) | 变更(轻) | +| Δ4 | 边框 | 真 `border:1px` | **`::before` inside-border**(hover 不抖动) | 变更 | +| Δ5 | 主容器左右垂直边 | 无 | **加 `border-x` + 四角准星**(图纸装订线) | 新增 | +| Δ6 | 主 CTA 阴影 | 全场无 | **4 层橙色发光** | 变更(小幅) | + +--- + +## 1. 设计哲学 + +**一句话:** 一台精密设备的工作面板。 + +**三条铁律:** +1. **克制大于装饰** — 留白 > 容器 > 内容,大量空气感。 +2. **单色锚点** — 全场只有一种 accent(橙色),且只用于 CTA / 关键状态 / 强调单词。 +3. **结构清晰可见** — 用 **1 px 边框 + 8 px 圆角 + 四角准星 + 容器纵向装订线 + mono `[ ]` 标签**暴露"图纸感",而非阴影/渐变隐藏结构。 + +**避免的"AI 味":** +- 渐变铺面 / 玻璃拟态 / 彩色阴影 +- 多色 emoji 图标 +- 圆角无差别(全部 8px / 16px 的 SaaS 模板感) +- 卡片浮在背景上的"贴纸感" +- 装饰盖过内容(场记板 / 霓虹 / 丝绒幕布) + +**新增禁令:** +- ❌ **0 px 硬切角的卡片** —— V2 起所有结构性容器都用 8 px 圆角 +- ❌ **变深 hue 的 hover 色** —— 橙色 hover 用 alpha 阶梯,不用更深的橙 + +--- + +## 2. 色彩系统(V2.1 · 对齐 Firecrawl) + +### 2.1 表面 / 背景(冷灰 · 无色相) + +| Token | Hex | 用途 | +| ---------------------- | --------- | --------------------------- | +| `--background-base` | `#f9f9f9` | 页面底色 · 冷灰 | +| `--background-lighter` | `#fbfbfb` | 容器底色 / hover 浅底 | +| `--surface` | `#ffffff` | 卡片 / 容器表面 | +| `--surface-raised` | `#ffffff` | 浮层 / Modal 表面 | + +> **Legacy 别名(V2 → V2.1):** `--bg = var(--background-base)` / `--bg-soft = var(--background-lighter)` / `--card = var(--surface)`。组件 CSS 不用改。 + +### 2.2 边框(冷灰 · 3 档差距极小) + +| Token | Hex | 用途 | +| ---------------- | --------- | --------------------- | +| `--border-faint` | `#ededed` | **默认 1 px 边框 ★ 80% 场景** | +| `--border-muted` | `#e8e8e8` | 略深 | +| `--border-loud` | `#e6e6e6` | 最深(强分隔) | + +> **设计意图:** 3 档之间只差 1–2 个色阶,**肉眼几乎看不出**。**用语义(faint/muted/loud)选择,不用视觉对比选择。** 这是 Firecrawl 的细节哲学。 + +### 2.3 Heat · 主橙(单 hue + 8 档 alpha) + +| Token | Value | 用途 | +| ----------- | ----------------------- | ----------------------------- | +| `--heat` | `#fa5d19` | **主橙 100% · CTA / 链接 ★** | +| `--heat-90` | `rgba(250,93,25,.90)` | hover(替代 V1 `#D04E1F`) | +| `--heat-40` | `rgba(250,93,25,.40)` | focus ring / 边框次级 | +| `--heat-20` | `rgba(250,93,25,.20)` | pill 边框 / **selection 底色 ★** | +| `--heat-16` | `rgba(250,93,25,.16)` | hover 软底 | +| `--heat-12` | `rgba(250,93,25,.12)` | tint 底(active nav / icon-box) | +| `--heat-8` | `rgba(250,93,25,.08)` | | +| `--heat-4` | `rgba(250,93,25,.04)` | 极弱底 | + +> **从 V2 `#E55B26` 调亮到 V2.1 `#FA5D19`** —— 更红更饱和,与 Firecrawl 100% 实测一致。**hover 永远不换 hue,只换 alpha。** + +### 2.4 Accent · 5 色信号(新增) + +> **作用:** 仅用于**语义信号**——代码高亮、图标色、状态色源。**禁止做大面积背景或装饰**。全场仍只有 1 个 accent(橙)。 + +| Token | Hex | 用途 | +| ------------------ | --------- | ----------------------------- | +| `--accent-black` | `#262626` | **主前景**(替代 V2 `--ink #15140F`,更柔和) | +| `--accent-white` | `#ffffff` | 反色文字(在橙底 / 黑底上) | +| `--accent-amethyst`| `#9061ff` | 紫 · 代码 property | +| `--accent-bluetron`| `#2a6dfb` | 蓝 · info | +| `--accent-crimson` | `#eb3424` | 红 · **error / 失败 ★** | +| `--accent-forest` | `#42c366` | 绿 · **success / 成功 ★** | +| `--accent-honey` | `#ecb730` | 黄 · warning | + +> **Legacy 别名:** `--ink = var(--accent-black)` / `--green = var(--accent-forest)` / `--red = var(--accent-crimson)`。 + +### 2.5 Black-Alpha 阶梯(20 档 · 核心工具尺) + +> **替代 V2 的 11 档 ink-alpha**。这是日常用得最多的 token。0–24% 用 `rgba(0,0,0,...)`;**32% 起换 `rgba(38,38,38,...)`**(=`--accent-black` 作底),避免叠出"灰中带蓝"——Firecrawl 实测细节。 + +| Token | Light 值 | Dark 值 | 典型用途 | +| ------------------ | ---------------------- | ---------------------- | ----------------------- | +| `--black-alpha-1` | `rgba(0,0,0,.01)` | `rgba(255,255,255,.01)`| 极弱底 | +| `--black-alpha-2` | `rgba(0,0,0,.02)` | `rgba(255,255,255,.02)`| | +| `--black-alpha-3` | `rgba(0,0,0,.03)` | `rgba(255,255,255,.03)`| | +| `--black-alpha-4` | `rgba(0,0,0,.04)` | `rgba(255,255,255,.04)`| **hover bg ★** | +| `--black-alpha-5` | `rgba(0,0,0,.05)` | `rgba(255,255,255,.05)`| tab 间分隔条 | +| `--black-alpha-6` | `rgba(0,0,0,.06)` | `rgba(255,255,255,.06)`| | +| `--black-alpha-7` | `rgba(0,0,0,.07)` | `rgba(255,255,255,.07)`| **active bg ★** | +| `--black-alpha-8` | `rgba(0,0,0,.08)` | `rgba(255,255,255,.08)`| | +| `--black-alpha-10` | `rgba(0,0,0,.10)` | `rgba(255,255,255,.10)`| | +| `--black-alpha-12` | `rgba(0,0,0,.12)` | `rgba(255,255,255,.12)`| **inside-border ★** | +| `--black-alpha-16` | `rgba(0,0,0,.16)` | `rgba(255,255,255,.16)`| | +| `--black-alpha-20` | `rgba(0,0,0,.20)` | `rgba(255,255,255,.20)`| | +| `--black-alpha-24` | `rgba(0,0,0,.24)` | `rgba(255,255,255,.24)`| input hover 边框 | +| `--black-alpha-32` | `rgba(38,38,38,.32)` | `rgba(255,255,255,.32)`| ← base 切换 → ↓ | +| `--black-alpha-40` | `rgba(38,38,38,.40)` | `rgba(255,255,255,.40)`| | +| `--black-alpha-48` | `rgba(38,38,38,.48)` | `rgba(255,255,255,.48)`| **占位字色 ★** | +| `--black-alpha-56` | `rgba(38,38,38,.56)` | `rgba(255,255,255,.56)`| **次级文字 / 未选中 Tab ★** | +| `--black-alpha-64` | `rgba(38,38,38,.64)` | `rgba(255,255,255,.64)`| 描述文字 | +| `--black-alpha-72` | `rgba(38,38,38,.72)` | `rgba(255,255,255,.72)`| 强次级 | +| `--black-alpha-88` | `rgba(38,38,38,.88)` | `rgba(255,255,255,.88)`| 近主前景 | + +> **V2 → V2.1 兼容映射(legacy 别名,组件 CSS 不必改):** +> - `--ink-alpha-4` → `--black-alpha-4` +> - `--ink-alpha-7` → `--black-alpha-7` +> - `--ink-alpha-12` → `--black-alpha-12` +> - `--ink-alpha-24` → `--black-alpha-24` +> - `--ink-alpha-32` → `--black-alpha-32` +> - `--ink-alpha-48` → `--black-alpha-48` +> - `--ink-alpha-56` → `--black-alpha-56` +> - `--ink-alpha-64` → `--black-alpha-64` +> - `--ink-alpha-72` → `--black-alpha-72` +> - `--ink-alpha-88` → `--black-alpha-88` + +### 2.6 状态色配套底/边 + +| 含义 | 主色 | 配套底色(8% alpha) | 配套边框(20% alpha) | +| ---- | -------------------------- | --------------------------- | --------------------------- | +| 成功 | `--green` (`#42c366`) | `rgba(66,195,102,.08)` | `rgba(66,195,102,.20)` | +| 失败 | `--red` (`#eb3424`) | `rgba(235,52,36,.08)` | `rgba(235,52,36,.20)` | +| 信息 | `--heat` (`#fa5d19`) | `--heat-12` | `--heat-20` | +| 警告 | `--accent-honey`(`#ecb730`)| `rgba(236,183,48,.08)` | `rgba(236,183,48,.20)` | + +### 2.7 Selection · 文字选中色(Firecrawl 签名) + +```css +::selection { + background: var(--heat-20); + color: var(--heat); +} +``` + +选中任何文字时,底色 20% 橙、文字 100% 橙。这是 Firecrawl 易被忽略但**整站感知到位**的细节。 + +--- + +## 3. 字体系统(V2.1 · 中英混排策略) + +### 3.1 字体族 · Inter + 阿里巴巴普惠体 + +| 用途 | 字体声明 | +| ------------ | ------------------------------------------------------------------------------------------------- | +| **正文 / UI**| `'Inter', 'Alibaba PuHuiTi', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif` | +| **纯英文场景** | `'Inter', system-ui, sans-serif`(`--font-inter`)· 用于"Ctrl K"等强制纯英文徽标 | +| **Mono 装饰** | `'JetBrains Mono', 'Geist Mono', ui-monospace, monospace` | + +**核心策略 · 浏览器字符级 fallthrough:** + +``` +Inter ────────→ 英文 / 数字 / 符号(命中) + │ + ↓ (CJK 不命中,继续找) +Alibaba PuHuiTi ──→ 中文(命中) + │ + ↓ (字体未加载到) +PingFang SC / Microsoft YaHei ──→ 系统中文兜底 +``` + +浏览器对每个字符**逐个查找** font-family 链,Inter 不含 CJK 字形 → 中文字符自动跳到下一个候选。这是中英混排的标准做法,**不需要 JS、不会字重错位**。 + +**V2 → V2.1 → V2.1 变更轨迹:** +- V2: `Inter Tight` → 中文走系统 fallback → 字重错位 +- V2.1 (前一版): 单一 `Alibaba PuHuiTi` → 英文用普惠体英文字形 → 英文略圆,缺乏 Inter 的"科技感" +- **V2.1 (本版)** : **Inter(英)+ Alibaba PuHuiTi(中)双字体协作** → 各自处理最擅长的语种 + +**为什么这个组合最优:** +- Inter:Vercel / Linear / Stripe 御用,**工程产品默认审美**。专门给屏幕 UI 优化,数字字形漂亮(同宽)。中文不擅长。 +- Alibaba PuHuiTi:阿里出品,免费商用,**为中英混排专门设计的笔画粗细配比**(45/55/65/85 多档),中文笔画与 Inter 视觉重量贴近。专门给中文优化。 +- 两者结合:**英文有 Inter 的锐利,中文有普惠体的清晰**,字重之间衔接自然。 + +**Inter 载入:** + +```html + +``` + +**Alibaba PuHuiTi 载入:** + +```css +@font-face { + font-family: 'Alibaba PuHuiTi'; + font-weight: 400; /* 55 Regular */ + src: local('Alibaba PuHuiTi 3.0'), + local('AlibabaPuHuiTi-3-55-Regular'), + url('https://chinese-fonts-cdn.deno.dev/packages/alibaba_puhuiti/dist/AlibabaPuHuiTi-3-55-Regular/AlibabaPuHuiTi-3-55-Regular.woff2') format('woff2'); +} +/* 同写法处理 500 Medium / 600 SemiBold / 700 Bold */ +``` + +> **优先级:** 本地安装(设计师机器一般装了)→ CDN 加载 → 系统中文兜底。**永远不会出现假字或方框。** + +**特殊场景 · 强制纯英文用 `--font-inter`:** + +某些场景必须确保用 Inter(比如 "Ctrl K" 这种快捷键徽标想要 Inter Bold 的紧凑感),直接用专属变量: + +```css +.search-wrap .k { + font-family: var(--font-inter); /* 跳过 fallback 链,锁定 Inter */ + font-weight: 700; + font-size: 11.5px; + letter-spacing: 0.02em; +} +``` + +Mono 字体保留 `JetBrains Mono`——用作装饰元素 `[ 200 OK ]` `// 05.14` `/v2`,**不参与中文**。 + +### 3.2 字号 / 字重 / 行高(V2.1 整体放大半档,行高提升) + +| 角色 | 字号 | 字重 | 字距 | 行高 | 用途 | +| ---------------- | ------- | ---- | ---------- | ---- | ---------------- | +| H1 / Hero | 36 px | 500 | -0.024em | 1.2 | 页面主标题(从 V2 的 32 上调) | +| 区块 H2 | 28 px | 500 | -0.02em | 1.25 | section-head 标题 | +| KPI 数值 | 32 px | 500 | -0.02em | 1.1 | 统计大数字 | +| 子区 H3 | 16 px | 500 | -0.01em | 1.4 | subsection 标题(从 15 上调) | +| 卡片标题 | 14 px | 500 | normal | 1.4 | 项目名 / 商品名(从 13.5 上调) | +| 正文 body | 14 px | 400 | normal | **1.65** | 默认正文(行高从 1.5 上调) | +| 区块描述 | 14 px | 400 | normal | 1.75 | section-head 描述 | +| 子区 lead | 13 px | 400 | normal | 1.8 | 子区下方说明 | +| Label(按钮/Tab)| 13 px | 500 | normal | 1.4 | 按钮文字 / Tab | +| Pill 文字 | 11.5 px | 500 | normal | 1.3 | 状态徽标 | +| Mono 标签 | 11–11.5 px | 400/500 | 0.04em | 1.5 | `[ STATUS ]` | +| Mono 散点 | 8.5 px | 400 | 0.04em | 1 | 背景 ASCII 装饰 | + +**字重档位仍仅 3 档:400 / 500 / 600**。普惠体 500(Medium 65)的中文笔画比 Inter 500 重一些,**整体不显单薄**,因此 600 几乎不需要。 + +**关键属性:** +- 数值类必须加 `font-variant-numeric: tabular-nums` +- 标题用 negative letter-spacing(-0.01 ~ -0.024em) +- 正文行高 **1.65–1.8**(V2 是 1.5–1.7),中文字间留呼吸 + +--- + +## 4. 圆角规则 · V2 统一 8 px + +> **核心原则(V2 改写):统一 8 px / 状态徽标完全圆 / 极少数微元素降到 4–6 px** + +| 元素类型 | 圆角值 | 例子 | +| ------------------------------ | ---------- | ------------------------------- | +| 所有结构性容器(大卡片 / 区块) | **8 px** | `.stats` `.list-card` `.shortcut` `.tip` `.modal` | +| 所有按钮 / 输入框 | **8 px** | `.btn` `.pill-btn` `.icon-btn` `.search` | +| nav 项 | **8 px** | `nav a`(V1 是 7,V2 统一) | +| 缩略图 / 画面占位 | **8 px** | `.thumb` `.ic` | +| 头像 / 小色块 | **6 px** | `.av` `.team .p`(可选 8) | +| Mono 标签 / badge / kbd | **4 px** | `.kbd` `.badge` | +| 进度条段位 | **2 px** | `.prog span` | +| Pill 状态徽标 / dot | **999 px** | `.pill` `.dot`(完全圆) | + +**为什么改:** Firecrawl 实测全站统一 8 px,工程感来自"准星 + 装订线 + mono 装饰",**不是硬切角**。0 圆角容器在小尺寸下会显得"卡顿、廉价",8 px 是同时兼顾"图纸感"和"成品感"的最佳值。 + +--- + +## 5. 边框 / 阴影 / 描边 + +### 5.1 边框策略 · V2 改为 inside-border + +> **V2 改进:** 默认边框用 `::before` 伪元素绘制,而非真 `border`。原因:hover 时让 `::before` 透明度 → 0 不会触发布局抖动。 + +**通用工具类:** + +```css +.inside-border { + position: relative; +} +.inside-border::before { + content: ''; + position: absolute; + inset: 0; + border: 1px solid var(--border-faint); + border-radius: inherit; + pointer-events: none; + transition: opacity .2s ease, border-color .2s ease; +} +.inside-border:hover::before { opacity: 0; } +``` + +**层级:** +- 默认:`var(--border-faint)` +- 略深:`var(--border-muted)`(主分隔线) +- 最深:`var(--border-loud)`(强分隔,少用) +- **禁止 2px / 3px 实线** +- **虚线**仅用于 `.tip` 提示框:`1px dashed var(--border-faint)` + +### 5.2 阴影 · V2 引入主 CTA 专属橙色发光 + +**默认无阴影**(V1 规则保留)。 + +**新增例外 · 主 CTA 4 层橙色阴影**(替代 V1 的"全场无"): + +```css +.btn-primary { + box-shadow: + inset 0 -4px 8px rgba(250, 93, 25, 0.20), /* 内阴影:底部暗一点 = 立体 */ + 0 1px 1px rgba(250, 93, 25, 0.12), + 0 2px 4px rgba(250, 93, 25, 0.10), + 0 0.5px 0.5px rgba(250, 93, 25, 0.16); +} +.btn-primary:hover { + box-shadow: + inset 0 -4px 8px rgba(250, 93, 25, 0.20), + 0 1px 1px rgba(250, 93, 25, 0.16), + 0 4px 8px rgba(250, 93, 25, 0.20), /* 更高更亮 */ + 0 0.5px 0.5px rgba(250, 93, 25, 0.16); +} +``` + +**Toast 阴影**(V1 保留):`0 4px 20px rgba(21,20,15,0.06)`,白色调,不属于橙色发光体系。 + +### 5.3 容器四角"+"准星(签名元素 · V2 升级为 SVG) + +V1 用字符 `+`(font-family JetBrains Mono);V2 升级为 SVG 路径,带圆弧内凹,质感更工程化: + +```html + + + +``` + +**位置:** 容器四角,中心精确落在边框交点上(用 `-translate-x-1/2 -translate-y-1/2`)。 + +**字符版本兼容:** 简单卡片(如 modal 内嵌)仍可用 `content: '+'` 字符版,但全屏主容器必须用 SVG。 + +--- + +## 6. 主内容容器 · 新增装订线规则(V2 新增章节) + +> **核心签名:** 主工作区始终被两条 1 px 垂直边线包夹,配合四角准星,形成图纸装订线效果。 + +```html +
+ ... + ... + ... + ... + +
+``` + +```css +.workbench-container { + max-width: 1480px; + margin: 0 auto; + border-left: 1px solid var(--border-faint); + border-right: 1px solid var(--border-faint); + position: relative; + /* 上下边线不要,只左右 */ +} +.workbench-container .corner { + position: absolute; + width: 22px; height: 21px; +} +.workbench-container .corner.top-left { top: -10.5px; left: -11px; } +.workbench-container .corner.top-right { top: -10.5px; right: -11px; } +.workbench-container .corner.bottom-left { bottom: -10.5px; left: -11px; } +.workbench-container .corner.bottom-right { bottom: -10.5px; right: -11px; } +``` + +适用范围:工作台 / 项目列表页 / 商品库 / 流水线主区。**编辑器全屏画布、Modal 内不必加。** + +--- + +## 7. 间距 / 栅格(V2.1 全局放大,Firecrawl-level 呼吸) + +**基础栅格:** 4 px + +**常用间距阶梯:** 4 / 8 / 12 / 16 / 20 / 24 / 28 / 32 / 40 / 48 / 64 / 80 / 104 + +> **V2 → V2.1 变更:** 全局垂直间距系统性放大 30%。原因:Alibaba PuHuiTi 中文笔画比 Inter 厚一档,**字体密度提升 → 必须用更大的留白补偿**,否则视觉拥挤。这就是为什么 Firecrawl 的间距看起来"奢侈"——它的字体也是出版级偏紧凑的 Suisse Intl,留白补偿到位。 + +**主区块布局:** +- 侧边栏宽度:`248 px`(无变) +- **主内容 padding:`72 px 80 px 120 px`**(从 V2 的 `48 56 56` 上调) +- 内容最大宽度:`1280 px`(从 1480 收窄,留更多自然边距) +- 区块间垂直:**`104 px`**(`section margin-bottom` · 从 80 上调) +- 子区间垂直:**`64 px`**(`subsection margin-bottom` · 从 48 上调) +- 子区标题底距:**`22 px`**(`h3 → 内容` · 从 16 上调) +- 卡片网格间距:`24 px`(主区) / `14 px`(子区) +- 卡片内 padding: + - 大卡片 / stats: **`28 px 30 px`**(从 22 24 上调) + - 列表行: **`20 px 24 px`**(从 14 18 上调) + - 快捷入口: **`18 px 20 px`**(从 14 上调) + - Modal 头/体: **`24 px 28 px`**(从 20 24 上调) + - Hero / section-head: **`52 px 56 px`** / `padding-bottom: 28 px` + +**最重要的一条:** 别再吝啬空气。**当不确定 padding 是 16 还是 24 时,选 24。** 当不确定 margin 是 48 还是 64 时,选 64。 + +**间距/字号配对原则:** +- 标题旁边的描述/副标:`mb 10–14 px`(紧凑组合) +- 标题下方的正文/列表:`mb 22–28 px`(分组组合) +- section 顶部 mono-tag → h2:`mb 14 px` +- h2 → section description:`mb 12 px` +- section-head 整体下方边线:`pb 28 px / mb 44 px` + +--- + +## 8. 背景:制图纸网格(V1 保留) + +### 8.1 三层叠加 + +``` +图层 1(最上):主交叉点 "+" 准星 SVG — 240×240 重复 +图层 2(中间):子交叉点小圆点 — 60×60 重复 +图层 3(最下):虚线网格 — 240×240 重复(stroke-dasharray: 1.5 4) +``` + +**配色:** +- "+" 准星:`#B8B3A4`(stroke 1 px) +- 小点:`#CFCABB`(r=0.9) +- 虚线:`#E2DED2`(stroke 1 px) + +### 8.2 视觉聚焦遮罩 + +```css +mask-image: radial-gradient(ellipse 95% 80% at 50% 35%, #000 25%, transparent 95%); +``` + +### 8.3 装饰散点(Mono ASCII) + +主区域 4 个固定位置撒 ASCII 散点。字号 8.5 px / 颜色 `--ink-alpha-12` / 透明度 0.8 / `pointer-events: none`。 + +### 8.4 边角 Mono 标签(品牌签名 · 保留) + +主区域 4 个角各放一个 Mono 标签: +``` +左上 [ 200 OK ] 右上 [ /v2 ] +左下 [ .MP4 · 9:16 ] 右下 [ STUDIO ] +``` + +字号 10.5 px / 颜色 `--ink-alpha-48` / 字距 0.06em。 + +> **作用:** 让页面看起来像「在某个开发环境 / 调试视图里」,而不是普通官网。Firecrawl **没有**这个元素,这是流·Studio 的独特品牌资产。 + +--- + +## 9. Icon 系统(V2 强化章节,直接对应用户优化诉求 ①) + +### 9.1 通用规则 + +- **格式:** 一律 SVG inline,**禁止** `` 引图标 +- **库选择:** 推荐 Lucide(line icon,1.5–2 px stroke)或 Phosphor Regular +- **stroke width:** 统一 **1.5 px**(替代 V1 提到的 1.8) +- **stroke linecap / linejoin:** `round` +- **填充:** **不填充**(纯 line icon) +- **颜色:** 通过 `stroke="currentColor"`,继承父元素 `color` +- **emoji 禁用:** 任何场景都不允许彩色 emoji + +### 9.2 尺寸阶梯 + +| 场景 | 尺寸 | 用途 | +| ------------------- | ------- | ----------------------------- | +| Icon-S | 14 px | 内嵌 inline 文字旁 | +| Icon-M(默认) | 16 px | 按钮内 / Tab / list 行 | +| Icon-L | 20 px | 顶栏 / 快捷入口 / dropdown 触发器 | +| Icon-XL | 24 px | Modal 头部 / Toast / 空状态 | +| Icon-Hero | 36 px | 空状态插画 / 大占位 | + +### 9.3 颜色规则 + +| 场景 | 颜色 | +| ------------ | --------------------- | +| 默认 | `--ink-alpha-56` | +| Hover | `--ink` | +| Active / 选中| `--heat` | +| Disabled | `--ink-alpha-12` | +| 在主 CTA 内 | `#FFFFFF` | + +### 9.4 Icon-Box(快捷入口左侧的方块图标容器) + +```css +.icon-box { + width: 32px; + height: 32px; + border-radius: 8px; /* V1 是 0,V2 改 8 */ + background: var(--heat-12); + display: grid; + place-items: center; +} +.icon-box svg { width: 16px; stroke: var(--heat); } +``` + +--- + +## 10. 组件规范 · 含完整状态(V2 大幅扩充,对应用户诉求 ②③④) + +### 10.1 按钮(3 种类型 × 5 种状态 × 3 种尺寸) + +**类型:** + +| 类型 | 背景 | 文字 | 边框/描边 | +| ----------------- | ---------------- | ------------------ | ---------------------------------- | +| `.btn` 默认 | `--card` 白 | `--ink` | inside-border `--ink-alpha-12` | +| `.btn-primary` 主 | `--heat` | `#FFFFFF` | 无,靠橙色阴影分层 | +| `.btn-ghost` 无框 | transparent | `--ink-alpha-56` | 无 | + +**尺寸:** + +| 尺寸 | 高度 | padding | 字号 | icon 尺寸 | +| ------ | ----- | ------------ | ------- | --------- | +| `-sm` | 28 px | `0 10 px` | 12 px | 14 px | +| 默认 | 32 px | `0 14 px` | 13 px | 16 px | +| `-lg` | 40 px | `0 18 px` | 14 px | 16 px | + +**5 种状态(每种类型都要实现):** + +| 状态 | `.btn` 默认 | `.btn-primary` 主 | +| -------- | ------------------------------------------ | ---------------------------------------------- | +| Default | 白底 / inside-border `--ink-alpha-12` | 橙底 + 4 层橙阴影 | +| Hover | 底色 `--ink-alpha-4` + 边框 opacity → 0 | 阴影第 3 层加亮(`0 4px 8px rgba(229,91,38,0.20)`) | +| Active(按下) | 底色 `--ink-alpha-7` + `scale(0.99)` | `scale(0.995)` + 阴影 inset 加深 | +| Focused | 外层 2 px `--heat-40` ring,offset 2 px | 同左 | +| Disabled | 底 `--bg-soft` + 文字 `--ink-alpha-12` + `cursor: not-allowed` + 无 hover | 底 `--heat-40` + 文字 `#FFFFFF` + 阴影消失 + `cursor: not-allowed` | + +**过渡:** 全场统一 `transition: background-color 200ms, opacity 200ms, transform 100ms, box-shadow 100ms ease`。 + +### 10.2 Pill(状态徽标)· 严格分级(对应用户诉求 ②) + +> **V2 核心改进:Pill 分 3 级,同级别尺寸完全一致** + +| 级别 | 高度 | padding | 字号 | 圆角 | dot 尺寸 | 用途 | +| ------------ | ----- | ------------ | ------- | ----- | -------- | --------------------- | +| **L1 大胶囊** | 28 px | `0 12 px` | 13 px | 999 px| 8 px | 项目状态 / 列表行 | +| **L2 中胶囊** | 22 px | `0 10 px` | 11.5 px | 999 px| 6 px | **默认 / 通用** | +| **L3 小胶囊** | 18 px | `0 8 px` | 10.5 px | 999 px| 5 px | KPI 卡角标 / Mono 标签 | + +**色调(3 种,通用所有级别):** + +| 状态 | 文字色 | 底色 | 边框(20% alpha)| +| ---- | --------------- | ------------- | ---------------- | +| info | `--heat` | `--heat-12` | `--heat-20` | +| ok | `--green` | `--green-bg`(`#3F6B3F14`) | `--green-bd`(`#3F6B3F33`) | +| err | `--red` | `--red-bg`(`#B33A2A14`) | `--red-bd`(`#B33A2A33`) | + +每个 pill 前置圆点(`.dot`,直径同上表,颜色继承文字色)。 + +**HTML 写法:** + +```html + + + 生成中 + +``` + +### 10.3 输入框 / 搜索(V2.1 · 含 Firecrawl 式快捷键提示) + +**尺寸:** 高 **36 px**(从 V2 的 32 上调,中文留白更舒展)/ padding `0 14 px` / 字号 14 px / 圆角 8 px + +**状态:** + +| 状态 | 边框 | 底色 | +| -------- | --------------------------------- | --------------------- | +| Default | inside-border `--black-alpha-12` | `--card` | +| Hover | inside-border `--black-alpha-24` | `--card` | +| Focused | inside-border `--heat-40` + inset 1 px | `--card` | +| Error | inside-border `--red` | `--red-bg` | +| Disabled | inside-border `--black-alpha-12` | **`--black-alpha-5`**(从 `--bg-soft` 改 · 冷灰底太接近白,看不出禁用) | + +占位字色 `--black-alpha-48`,disabled 占位 `--black-alpha-24`。 + +**带图标 / 快捷键搜索框(参考 Firecrawl 实测):** + +``` +[🔍] [ 搜索任意内容... ] Ctrl K + │ │ + │ 16px line icon, color: --black-alpha-56 │ mono · 11.5px · --black-alpha-48 + │ 左 14 px,**z-index: 2**(关键) │ 右 14 px,**z-index: 2** + │ │ 平铺文本(无边框盒),不用 kbd 样式 +``` + +**关键坑(已修):** +1. **搜索 icon 看不见** —— `` 的白色 bg 会盖住同级的 SVG icon。**SVG 必须加 `z-index: 2`** 才能抬到 input 之上。同理 Ctrl K 提示也要 z-index。 +2. **快捷键不用 `⌘`** —— JetBrains Mono webfont 不带 U+2318 `⌘` 字形,会显示成方框。**Windows 用户体系用 "Ctrl K" 纯文本**;Mac 端要显示 ⌘ 时用 SVG command 图标(见 §9.4)。 +3. **快捷键提示不要用 kbd 边框盒** —— Firecrawl 是平铺灰色 mono 文本,无任何 border / bg / radius。**显得克制,符合"克制大于装饰"。** + +### 10.4 KPI 统计行(`.stats`) + +- 1 行 4 格,共用一个 inside-border 容器,圆角 8 px,**无 gap** +- 列与列之间用 `border-right: 1px solid var(--border-faint)` 分隔(最后一列去掉) +- 容器四角加 SVG "+" 准星 +- 每格结构:label + L3 pill → 大数字(30 px) → delta / progress + +### 10.5 列表行(`.list-row`) + +``` +[缩略图 54×70] [标题 + meta] [进度条 5 段] [L2 pill] [按钮 -sm] +``` + +- grid 5 列:`54px 1fr auto auto auto` +- 行高 padding `14 px 18 px` +- 行间 1 px 分隔线(`--border-faint`),最后行去掉 +- **整行 hover** → `--ink-alpha-4` 底色 +- **整行 active**(键盘选中)→ `--ink-alpha-7` 底色 +- **整行 disabled** → opacity 0.5 + `cursor: not-allowed` + +### 10.6 进度条段位(流水线 5 阶段专用)· **V2.1 语义色重写** + +5 个 `18×5 px` 小段,3 px 间距,**每段颜色映射真实业务状态**(替代 V2 的"全灰已完成"——那样像项目失败): + +| 状态 | 颜色 | 视觉处理 | +| -------- | --------------------- | ------------------------------ | +| 未开始 | `--black-alpha-8` | 极弱灰底 · 静态 | +| **已完成** | `--accent-forest`(`#42c366`)| **绿色 · 静态**(替代 V2 灰色) | +| **进行中** | `--heat`(`#fa5d19`) | **橙色 + 1.4s 脉动**(opacity 1↔0.55 + scaleY 1↔0.7)· 区别于失败 | +| 失败 | `--accent-crimson`(`#eb3424`)| 红色 · 静态 | + +圆角:每段 2 px。 + +**关键设计:** +- **绿/橙/红/灰** 四色一眼可辨:已完成的绿色让"5/5 全绿"=完美交付,**不会再有"全灰像失败了"的误读** +- **橙色脉动动画** 是区分"进行中"与"失败"的关键——红色永远静态,只有橙色会呼吸,潜意识上"动 = 在运行,静 = 出错" + +```css +.prog span.now { + background: var(--heat); + animation: prog-pulse 1.4s ease-in-out infinite; +} +@keyframes prog-pulse { + 0%,100% { opacity: 1; transform: scaleY(1); } + 50% { opacity: .55; transform: scaleY(.7); } +} +``` + +### 10.7 快捷入口卡(`.shortcut`) + +- 白底 / inside-border / **8 px 圆角**(V1 是 0) / 14 px padding +- 左侧 32×32 橙色 tint 图标块(`--heat-12` 底 / 8 px 圆角 / 居中 16 px line icon) +- 右侧:标题(13 px 500)+ Mono 描述(11.5 px,`--ink-alpha-48`) +- **Default → Hover → Active 完整状态:** + - Hover:底色 `--ink-alpha-4` / 标题 underline-from-orange 1 px(可选) + - Active(点击瞬间):scale(0.99) + - Focused(键盘):2 px `--heat-40` ring + +### 10.8 提示框(`.tip`) + +- 白底 / **1 px 虚线**边框(`dashed`)/ **8 px 圆角** +- 加粗标题独立一行 + 正文 +- 内联代码用 `.mono` 类:橙色文字 + `--heat-12` 底 + 4 px 圆角 + +### 10.9 Toast + +- 右下角 24 px 偏移 / 白底 / inside-border / **8 px 圆角** +- 唯一允许的"白阴影":`0 4px 20px rgba(21,20,15,0.06)` +- 进入动画:`translateX(420px → 0)`,缓动 `cubic-bezier(0.34, 1.56, 0.64, 1)`,300 ms +- 自动消失:2400 ms +- 内容结构:左侧 24×24 橙色 tint 图标(`--heat-12` 底)+ 右侧标题 + Mono 副文本(`[ 200 OK ]`) + +### 10.10 弹窗(Modal) + +- 居中,460–480 px 宽,白底,**8 px 圆角**(V1 是 0) +- 四角加 SVG "+" 准星 +- 遮罩 `rgba(21,20,15,0.42)`,带 `backdrop-filter: blur(8px)` +- 进入动画:`scale(0.96 → 1)`,250 ms 弹性缓动 +- 三段结构: + - **Header:** 36 px 橙色 tint 图标 + 标题 + Mono 副标 + - **Body:** 13 px / `--ink-alpha-56` / 行高 1.7 + - **Footer:** 右对齐两个按钮(取消 + 主 CTA) +- ESC 关闭 / 点击遮罩关闭 + +### 10.11 Tab(双层) + +**主 Tab:** +- 高 36 px / padding `0 14 px` / 字号 13 px / 字重 500 +- 未选中:`--ink-alpha-56` 文字 +- 选中:`--ink` 文字 + 底部 2 px `--heat` 横线(整个 tab 宽度) +- Hover(未选中态):`--ink-alpha-7` 底色 + +**副 Tab(过滤型):** +- 高 28 px / padding `0 10 px` / 字号 12 px +- 未选中:`--ink-alpha-56` + 灰度 icon +- 选中:`--ink` + 多色 icon(grayscale: 0) +- Tab 之间用 1 px 高 12 px 的 `--ink-alpha-7` 竖条分隔(可选) + +### 10.12 Dropdown / Select + +- 触发器:同输入框样式(高 32 / 圆角 8 / inside-border) +- 右侧 16 px chevron-down icon,色 `--ink-alpha-48`,展开时旋转 180° +- 弹层:白底 / 8 px 圆角 / `0 4px 20px rgba(21,20,15,0.06)` 阴影 / **唯一允许阴影场景之二** +- 选项:高 32 / padding `0 12 / hover `--ink-alpha-4` / 选中 `--heat-12` + 右侧 14 px checkmark `--heat` +- 分组分隔:1 px `--border-faint` + +### 10.13 Checkbox / Radio / Switch(V2.1 · 全部用 SVG icon) + +**通用原则:** 所有 indicator 都用真 SVG(via background-image data URI 或 inline ``),**禁止用 border-width / transform: rotate(45deg) 凑对勾**——那种 CSS hack 在缩放/字体渲染下会变形。 + +**Checkbox:** +- **容器:** 16×16 / 4 px 圆角 / inside-border `--black-alpha-24`(hover 时 → `--black-alpha-48`) +- **Checked:** `--heat` 底 · 居中 12×12 白色 SVG checkmark(`` · stroke 3 · linecap round) +- **Indeterminate:** `--heat` 底 · 居中 12×12 白色 SVG 横线(`` · stroke 3) +- **Disabled:** 底 `--black-alpha-5` + 边 `--black-alpha-12` + icon 不渲染或半透明 +- **实现方式:** `background-image: url("data:image/svg+xml,...")` · `background-size: 12px 12px` · `background-position: center` · 这样不需要 ::after 凑出 icon,SVG 是真实的 + +**Radio:** +- 16×16 圆 / inside-border `--black-alpha-24` +- Checked:内嵌 8×8 `--heat` 实心圆(纯几何形状,不算 icon,用 ::after 即可) +- Disabled:底 `--black-alpha-5` + +**Switch:** +- 容器 28×16 / 999 px 圆角 +- Off:底 `--black-alpha-12` / 圆球 `#FFFFFF` 12×12 + 1 px subtle shadow +- On:底 `--heat` / 圆球右移到 `left: 14px` +- 过渡:`background 200 ms`,圆球位移 `left 200 ms` + +> **为什么不用字符 `✓` `✗` 这种 Unicode:** 不同系统、不同字体对这些字符的字形支持差异巨大(`⌘` 在 JetBrains Mono Web 字体里就是缺字形 → 显示成方框)。**SVG 是唯一可靠的解。** + +--- + +## 11. 微观细节(品牌签名 · V1 保留) + +### 11.1 标签全部包方括号 +`[ 200 OK ]` `[ .MP4 · 9:16 ]` `[ /v2 ]` `[ /sidebar collapse ]` + +### 11.2 时间戳像代码注释 +`// 05.14 · 周五` + +### 11.3 数值后缀 +`¥327` 主体大字 + `.40` 小字次级(``) + +### 11.4 强调单词上色 +正文里 `3 个项目` —— 让具体数值/名词比周围文字更深一档(不是变橙)。**橙色只留给 CTA。** + +### 11.5 ASCII 字符做装饰 +`↑ 本月 +3` `↓ -1.2%` + +### 11.6 链接式"更多"按钮 +`[ ALL · 12 ] →` —— Mono 标签 + 箭头,色 `--ink-alpha-48`,hover 转橙。 + +### 11.7 缩略图不放图,放比例 +`9:16` Mono 字符占位。 + +--- + +## 12. Don't List(绝对禁止) + +- ❌ **0 px 卡片**(V1 → V2 反转) +- ❌ 渐变背景(只有 hero 区可考虑,但首选纯色) +- ❌ 玻璃拟态(`backdrop-filter` 只用于 modal 遮罩) +- ❌ 彩色 emoji 图标(用 SVG line icon,1.5 px stroke) +- ❌ 多个 accent 色(全场只有橙色) +- ❌ 大圆角容器(>12 px 直接判错) +- ❌ 灰色阴影 / 文字阴影(只允许橙色主 CTA 阴影 + Toast/Dropdown 白阴影) +- ❌ 鲜艳的状态色(避免荧光绿、电光蓝、霓虹粉) +- ❌ 居中对齐大段正文(全部左对齐) +- ❌ 把装饰当主角(场记板、丝绒、霓虹灯) +- ❌ 无意义的微动效(hover 旋转、缩放、彩虹流光) +- ❌ **hover 时换深 hue 的橙**(用 alpha) +- ❌ **真 `border` + hover 边框消失**(用 inside-border ::before) +- ❌ **同一行混用直角和圆角**(用户原话:"不要有些是直角,胶囊又是圆角") + +--- + +## 13. Sass / CSS Token 速查表(V2.1) + +```css +:root { + /* ============================================================ + Color system V2.1 · Firecrawl-aligned + ============================================================ */ + + /* === 表面 / 背景(冷灰)=== */ + --background-base: #f9f9f9; + --background-lighter: #fbfbfb; + --surface: #ffffff; + --surface-raised: #ffffff; + + /* === 边框(冷灰 · 3 档)=== */ + --border-faint: #ededed; /* 默认 1 px */ + --border-muted: #e8e8e8; + --border-loud: #e6e6e6; + + /* === Accent 多彩(5 色信号)=== */ + --accent-black: #262626; + --accent-white: #ffffff; + --accent-amethyst: #9061ff; + --accent-bluetron: #2a6dfb; + --accent-crimson: #eb3424; + --accent-forest: #42c366; + --accent-honey: #ecb730; + + /* === Heat · 单 hue + 8 档 alpha === */ + --heat: #fa5d19; + --heat-90: rgba(250, 93, 25, .90); + --heat-40: rgba(250, 93, 25, .40); + --heat-20: rgba(250, 93, 25, .20); + --heat-16: rgba(250, 93, 25, .16); + --heat-12: rgba(250, 93, 25, .12); + --heat-8: rgba(250, 93, 25, .08); + --heat-4: rgba(250, 93, 25, .04); + + /* === Black-Alpha 阶梯(20 档 · 0–24 用 #000,32+ 用 #262626)=== */ + --black-alpha-1: rgba(0, 0, 0, .01); + --black-alpha-2: rgba(0, 0, 0, .02); + --black-alpha-3: rgba(0, 0, 0, .03); + --black-alpha-4: rgba(0, 0, 0, .04); + --black-alpha-5: rgba(0, 0, 0, .05); + --black-alpha-6: rgba(0, 0, 0, .06); + --black-alpha-7: rgba(0, 0, 0, .07); + --black-alpha-8: rgba(0, 0, 0, .08); + --black-alpha-10: rgba(0, 0, 0, .10); + --black-alpha-12: rgba(0, 0, 0, .12); + --black-alpha-16: rgba(0, 0, 0, .16); + --black-alpha-20: rgba(0, 0, 0, .20); + --black-alpha-24: rgba(0, 0, 0, .24); + --black-alpha-32: rgba(38, 38, 38, .32); + --black-alpha-40: rgba(38, 38, 38, .40); + --black-alpha-48: rgba(38, 38, 38, .48); + --black-alpha-56: rgba(38, 38, 38, .56); + --black-alpha-64: rgba(38, 38, 38, .64); + --black-alpha-72: rgba(38, 38, 38, .72); + --black-alpha-88: rgba(38, 38, 38, .88); + + /* === Legacy aliases(V2 命名 → V2.1 token,组件 CSS 无需重写)=== */ + --bg: var(--background-base); + --bg-soft: var(--background-lighter); + --card: var(--surface); + --ink: var(--accent-black); + --green: var(--accent-forest); + --red: var(--accent-crimson); + --green-bg: rgba(66, 195, 102, .08); + --green-bd: rgba(66, 195, 102, .20); + --red-bg: rgba(235, 52, 36, .08); + --red-bd: rgba(235, 52, 36, .20); + --ink-alpha-4: var(--black-alpha-4); + --ink-alpha-7: var(--black-alpha-7); + --ink-alpha-12: var(--black-alpha-12); + --ink-alpha-24: var(--black-alpha-24); + --ink-alpha-32: var(--black-alpha-32); + --ink-alpha-48: var(--black-alpha-48); + --ink-alpha-56: var(--black-alpha-56); + --ink-alpha-64: var(--black-alpha-64); + --ink-alpha-72: var(--black-alpha-72); + --ink-alpha-88: var(--black-alpha-88); + + /* === 圆角 === */ + --r-sm: 4px; + --r-md: 8px; /* 默认主圆角 */ + --r-pill: 999px; + + /* === 字体 === */ + --font-sans: 'Inter Tight', 'PingFang SC', 'Microsoft YaHei', sans-serif; + --font-mono: 'JetBrains Mono', 'Geist Mono', monospace; + + /* === 容器宽度 === */ + --container-max: 1480px; + --sidebar-w: 248px; + + /* === 过渡 === */ + --t-fast: 100ms ease; + --t-base: 200ms ease; + --t-slow: 300ms cubic-bezier(0.34, 1.56, 0.64, 1); +} + +/* === Selection · Firecrawl 签名细节 === */ +::selection { + background: var(--heat-20); + color: var(--heat); +} + +/* === Dark mode · 翻转底色 + black-alpha 改用 white-alpha === */ +.dark { + --background-base: #0a0a0a; + --background-lighter: #141414; + --surface: #171717; + --surface-raised: #1f1f1f; + --border-faint: #2a2a2a; + --border-muted: #333333; + --border-loud: #404040; + --accent-black: #f5f5f5; + --black-alpha-1: rgba(255,255,255,.01); + --black-alpha-2: rgba(255,255,255,.02); + --black-alpha-3: rgba(255,255,255,.03); + --black-alpha-4: rgba(255,255,255,.04); + --black-alpha-5: rgba(255,255,255,.05); + --black-alpha-6: rgba(255,255,255,.06); + --black-alpha-7: rgba(255,255,255,.07); + --black-alpha-8: rgba(255,255,255,.08); + --black-alpha-10: rgba(255,255,255,.10); + --black-alpha-12: rgba(255,255,255,.12); + --black-alpha-16: rgba(255,255,255,.16); + --black-alpha-20: rgba(255,255,255,.20); + --black-alpha-24: rgba(255,255,255,.24); + --black-alpha-32: rgba(255,255,255,.32); + --black-alpha-40: rgba(255,255,255,.40); + --black-alpha-48: rgba(255,255,255,.48); + --black-alpha-56: rgba(255,255,255,.56); + --black-alpha-64: rgba(255,255,255,.64); + --black-alpha-72: rgba(255,255,255,.72); + --black-alpha-88: rgba(255,255,255,.88); +} +``` + +--- + +## 14. V1 → V2 迁移检查清单(给后续改代码用) + +- [ ] 全局替换 `border-radius: 0` → `border-radius: 8px`(卡片 / stats / shortcut / modal / toast / thumb) +- [ ] 替换 V1 ink-2/3/4 token 为 ink-alpha-56/48/12 +- [ ] 替换 `--orange-tint` `--orange-soft` 为 `--heat-12` `--heat-20` +- [ ] 主 CTA hover 移除 `#D04E1F`,改用 4 层橙阴影变化 +- [ ] 所有 `.btn` `.input` 加 `inside-border` 类 +- [ ] 主工作区容器加 `border-left + border-right` + 4 个 SVG 准星 +- [ ] 字体 Inter → Inter Tight +- [ ] 所有 icon 转 SVG line icon,stroke 1.5 +- [ ] Pill 按 L1/L2/L3 三级规范化高度/字号/圆点尺寸 +- [ ] 每个交互组件补齐 hover / active / focused / disabled 状态 + +--- + +## 15. 参考与来源 + +- **视觉灵感(实测):** [Firecrawl Playground](https://www.firecrawl.dev/playground?endpoint=parse) · 详见 [firecrawl_playground_spec.md](_design_src/firecrawl_playground_spec.md) +- **结构灵感:** Linear / Stripe Dashboard +- **图纸感来源:** 印刷套版准星 + 老 Unix 终端 +- **V1 文档:** [DESIGN_SPEC.md](DESIGN_SPEC.md)(保留作为历史) diff --git a/电商AI平台/README.md b/电商AI平台/README.md new file mode 100644 index 0000000..96b51d2 --- /dev/null +++ b/电商AI平台/README.md @@ -0,0 +1,53 @@ +# 电商AI平台 · 流·Studio + +AI 短视频带货生成平台 · 静态设计稿(V2.1 Restraint)。 + +## 快速浏览 + +直接用浏览器打开任意 HTML,或本地起服务: + +```bash +npx http-server . -p 8080 +# 然后访问 http://localhost:8080/ +``` + +入口页:[index.html](index.html)(工作台) + +## 页面索引 + +| 页面 | 文件 | 说明 | +| --- | --- | --- | +| 工作台 | [index.html](index.html) | 进入后首屏 · 4 块 KPI + 最近项目 + 快捷入口 | +| 视频项目 | [projects.html](projects.html) | 项目列表 · 表格 + 状态 + 进度 | +| 新建项目 | [projects-new.html](projects-new.html) | 4 步向导 · 含实时预估面板 + 推荐气泡 | +| 商品库 | [products.html](products.html) | SKU 列表 | +| 创建商品 | [product-create.html](product-create.html) | 4 步向导 + 子流程(挑模特 → 生上身) | +| 流水线 | [pipeline.html](pipeline.html) | 5 阶段:脚本 → 资产 → 故事板 → 片段 → 拼接 | +| 资产库 | [library.html](library.html) | 人物 / 场景 / 视频片段管理 | +| 账户 | [account.html](account.html) | 余额 / 充值 / 消费明细 | +| 设计系统 | [design-system.html](design-system.html) | 完整 V2.1 token + 组件 + 状态 + Modal/Toast | + +## 设计规范 + +详见 [DESIGN_SPEC_V2.md](DESIGN_SPEC_V2.md) · 当前 V2.1。 + +**核心视觉特征:** +- 配色:冷灰底 `#f9f9f9` + 单橙 accent `#FA5D19`(Firecrawl-aligned) +- 圆角:统一 8 px / pill 999 px / 微元素 4 px +- Icon:SVG line · stroke 1.5 · linecap round · `currentColor` 继承 +- 签名元素:容器装订线(左右 1 px 边)+ 四角 22×21 px SVG 准星(圆弧内凹) +- 字体:Inter Tight + JetBrains Mono + Alibaba PuHuiTi +- 主 CTA:橙底 + 4 层橙阴影(全场唯一允许阴影的组件) + +## 目录结构 + +``` +电商AI平台/ +├── README.md ← 本文档 +├── DESIGN_SPEC_V2.md ← 设计规范 source of truth +├── design-system.html ← 可交互组件参考(token + 状态 demo) +├── assets/ +│ ├── restraint.css ← V2.1 共享样式 · 无 V1 legacy alias +│ └── shell.js ← sidebar/topbar/Toast/Modal 渲染器 +└── *.html ← 8 个页面 +``` diff --git a/电商AI平台/account.html b/电商AI平台/account.html new file mode 100644 index 0000000..7eaab31 --- /dev/null +++ b/电商AI平台/account.html @@ -0,0 +1,170 @@ + + + + +账户 · 流·Studio + + + + + +
+ +
+
+

账户

+
// 余额 · 充值 · 消费明细
+
+
+ +
+
+
+ +
[ CURRENT BALANCE ]
+
¥327.40
+
// 本月已消费 ¥162.60 · 可使用约 32 个项目
+
+ + +
+
+ +
+

快速充值

+
// 充值后立刻到账,可开发票
+
+
¥100
无赠送
+
推荐
¥500
+ ¥30 赠送
+
¥1000
+ ¥80 赠送
+
¥3000
+ ¥300 赠送
+
+
+ + + +
+
+ +
+

消费明细

+ +
+ + +
+
+ + + + + + + + + + + + + + + +
时间项目 / 类型详情金额
05.09 14:08补水面膜 · v3故事板 image-2 · 1 次-¥0.45
05.09 14:02补水面膜 · v3脚本 LLM · 2.4k tokens-¥0.04
05.09 13:38补水面膜 · v3基础资产 · 5 张图-¥1.05
05.08 18:21透真防晒 · 通勤对比视频片段 · 6 镜-¥1.20
05.08 11:02充值微信支付 · TX2024050811021Z+¥500.00
05.07 20:14蓝牙耳机 · 开箱视频片段 · 5 镜(1 镜重跑不扣)-¥0.94
05.07 15:48咖啡冻干 · 早八故事板生成失败 · 不扣费¥0.00
05.06 10:30瑜伽裤 · 通勤穿搭项目导出 · 1 次-¥3.20
+
+ +
+
+

本月消费分布

+
视频片段(Seedance)¥98.40
+
+ +
故事板(image-2)¥36.00
+
+ +
基础资产¥21.00
+
+ +
脚本 LLM¥7.20
+
+ +
+
合计¥162.60
+
+ +
+

扣费规则

+
+ ① 失败不扣:模型超时、内容审核拦截、生成异常一律不扣费。
+ ② 用户重跑不扣首次:第一次重跑保留原扣费,第二次起按次结算。
+ ③ 仅在你点击 [ 确认通过 ] 时入账。
+ ④ 导出不再扣费,所有 token 已在过程中结算。 +
+
+ +
+

开发票

+
本月可开发票额度:¥162.60
+ +
+
+
+ +
+ + + + diff --git a/电商AI平台/assets/restraint.css b/电商AI平台/assets/restraint.css new file mode 100644 index 0000000..87ce4ad --- /dev/null +++ b/电商AI平台/assets/restraint.css @@ -0,0 +1,885 @@ +/* ============================================================ + 流·Studio · Restraint V2.1 · Firecrawl-aligned · 纯净版 + ============================================================ + 严格遵循 DESIGN_SPEC_V2.md V2.1 · 不含任何 V1/V2 legacy alias + ============================================================ */ + +/* ============ Web font · Alibaba PuHuiTi 3.0 ============ */ +@font-face { + font-family: 'Alibaba PuHuiTi'; + font-weight: 400; + font-style: normal; + font-display: swap; + src: local('Alibaba PuHuiTi 3.0'), + local('AlibabaPuHuiTi-3-55-Regular'), + local('Alibaba PuHuiTi 2.0'), + local('AlibabaPuHuiTi-2-55-Regular'), + url('https://chinese-fonts-cdn.deno.dev/packages/alibaba_puhuiti/dist/AlibabaPuHuiTi-3-55-Regular/AlibabaPuHuiTi-3-55-Regular.woff2') format('woff2'); +} +@font-face { + font-family: 'Alibaba PuHuiTi'; + font-weight: 500; + font-style: normal; + font-display: swap; + src: local('Alibaba PuHuiTi 3.0 Medium'), + local('AlibabaPuHuiTi-3-65-Medium'), + local('AlibabaPuHuiTi-2-65-Medium'), + url('https://chinese-fonts-cdn.deno.dev/packages/alibaba_puhuiti/dist/AlibabaPuHuiTi-3-65-Medium/AlibabaPuHuiTi-3-65-Medium.woff2') format('woff2'); +} +@font-face { + font-family: 'Alibaba PuHuiTi'; + font-weight: 600; + font-style: normal; + font-display: swap; + src: local('AlibabaPuHuiTi-3-75-SemiBold'), + local('AlibabaPuHuiTi-2-75-SemiBold'), + url('https://chinese-fonts-cdn.deno.dev/packages/alibaba_puhuiti/dist/AlibabaPuHuiTi-3-75-SemiBold/AlibabaPuHuiTi-3-75-SemiBold.woff2') format('woff2'); +} +@font-face { + font-family: 'Alibaba PuHuiTi'; + font-weight: 700; + font-style: normal; + font-display: swap; + src: local('Alibaba PuHuiTi 3.0 Bold'), + local('AlibabaPuHuiTi-3-85-Bold'), + local('AlibabaPuHuiTi-2-85-Bold'), + url('https://chinese-fonts-cdn.deno.dev/packages/alibaba_puhuiti/dist/AlibabaPuHuiTi-3-85-Bold/AlibabaPuHuiTi-3-85-Bold.woff2') format('woff2'); +} + +* { box-sizing: border-box; margin: 0; padding: 0; } + +:root { + /* ===== Backgrounds (冷灰) ===== */ + --background-base: #f9f9f9; + --background-lighter: #fbfbfb; + --surface: #ffffff; + --surface-raised: #ffffff; + + /* ===== Borders (冷灰 3 档,语义优先) ===== */ + --border-faint: #ededed; + --border-muted: #e8e8e8; + --border-loud: #e6e6e6; + + /* ===== Accent multi-color (5 色信号) ===== */ + --accent-black: #262626; + --accent-white: #ffffff; + --accent-amethyst: #9061ff; + --accent-bluetron: #2a6dfb; + --accent-crimson: #eb3424; + --accent-forest: #42c366; + --accent-honey: #ecb730; + + /* status 配套底/边 */ + --forest-bg: rgba(66, 195, 102, .08); + --forest-bd: rgba(66, 195, 102, .20); + --crimson-bg: rgba(235, 52, 36, .08); + --crimson-bd: rgba(235, 52, 36, .20); + --honey-bg: rgba(236, 183, 48, .08); + --honey-bd: rgba(236, 183, 48, .20); + + /* ===== Heat · 单 hue + 8 档 alpha ===== */ + --heat: #fa5d19; + --heat-90: rgba(250, 93, 25, .90); + --heat-40: rgba(250, 93, 25, .40); + --heat-20: rgba(250, 93, 25, .20); + --heat-16: rgba(250, 93, 25, .16); + --heat-12: rgba(250, 93, 25, .12); + --heat-8: rgba(250, 93, 25, .08); + --heat-4: rgba(250, 93, 25, .04); + + /* ===== Black-alpha 阶梯 (20 档) ===== */ + --black-alpha-1: rgba(0, 0, 0, .01); + --black-alpha-2: rgba(0, 0, 0, .02); + --black-alpha-3: rgba(0, 0, 0, .03); + --black-alpha-4: rgba(0, 0, 0, .04); + --black-alpha-5: rgba(0, 0, 0, .05); + --black-alpha-6: rgba(0, 0, 0, .06); + --black-alpha-7: rgba(0, 0, 0, .07); + --black-alpha-8: rgba(0, 0, 0, .08); + --black-alpha-10: rgba(0, 0, 0, .10); + --black-alpha-12: rgba(0, 0, 0, .12); + --black-alpha-16: rgba(0, 0, 0, .16); + --black-alpha-20: rgba(0, 0, 0, .20); + --black-alpha-24: rgba(0, 0, 0, .24); + --black-alpha-32: rgba(38, 38, 38, .32); + --black-alpha-40: rgba(38, 38, 38, .40); + --black-alpha-48: rgba(38, 38, 38, .48); + --black-alpha-56: rgba(38, 38, 38, .56); + --black-alpha-64: rgba(38, 38, 38, .64); + --black-alpha-72: rgba(38, 38, 38, .72); + --black-alpha-88: rgba(38, 38, 38, .88); + + /* ===== Radius ===== */ + --r-sm: 4px; + --r-md: 8px; + --r-pill: 999px; + + /* ===== Font · 关键:--font-mono 必须含 PuHuiTi 中文 fallback ===== */ + /* Inter / JetBrains Mono 都不含 CJK 字形。 + 字体链按字符级 fallthrough,中文字符会找下一个候选 —— 必须包含 PuHuiTi。 */ + --font-sans: 'Inter', 'Alibaba PuHuiTi', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif; + --font-inter: 'Inter', system-ui, sans-serif; + --font-mono: 'JetBrains Mono', 'Geist Mono', ui-monospace, 'Alibaba PuHuiTi', 'PingFang SC', 'Microsoft YaHei', monospace; + + /* ===== Transition ===== */ + --t-fast: 100ms ease; + --t-base: 200ms ease; + --t-slow: 300ms cubic-bezier(0.34, 1.56, 0.64, 1); + + /* ===== Shadows ===== */ + --shadow-cta: + inset 0 -4px 8px rgba(250, 93, 25, .20), + 0 1px 1px rgba(250, 93, 25, .12), + 0 2px 4px rgba(250, 93, 25, .10), + 0 .5px .5px rgba(250, 93, 25, .16); + --shadow-cta-hover: + inset 0 -4px 8px rgba(250, 93, 25, .20), + 0 1px 1px rgba(250, 93, 25, .16), + 0 4px 8px rgba(250, 93, 25, .20), + 0 .5px .5px rgba(250, 93, 25, .16); + --shadow-cta-active: + inset 0 -4px 8px rgba(250, 93, 25, .28), + 0 1px 2px rgba(250, 93, 25, .16); + --shadow-floating: 0 4px 20px rgba(21, 20, 15, .06); +} + +::selection { background: var(--heat-20); color: var(--heat); } + +html, body { + background: var(--background-base); + color: var(--accent-black); + font-family: var(--font-sans); + font-size: 14px; + line-height: 1.65; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; +} + +a { color: inherit; text-decoration: none; } +button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; } +input, textarea, select { font: inherit; color: inherit; outline: none; } +img, svg, video { display: block; max-width: 100%; } + +.num, .tnum { font-variant-numeric: tabular-nums; } +.mono { font-family: var(--font-mono); } +.muted { color: var(--black-alpha-56); } +.muted-2 { color: var(--black-alpha-48); } +.spacer { flex: 1; } +.hstack { display: flex; align-items: center; gap: 8px; } +.vstack { display: flex; flex-direction: column; gap: 8px; } +.divider { height: 1px; background: var(--border-faint); margin: 16px 0; } + +/* ─── App shell ─── */ +.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; } + +/* ─── Sidebar ─── */ +aside.sidebar { + padding: 22px 16px; + border-right: 1px solid var(--border-faint); + background: var(--background-base); + position: sticky; + top: 0; + height: 100vh; + overflow-y: auto; +} +.brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 16px; } +.flame { width: 22px; height: 22px; color: var(--heat); } +.flame svg { width: 100%; height: 100%; } +.brand .name { font-weight: 600; font-size: 18px; letter-spacing: -.012em; color: var(--accent-black); } + +/* sidebar search · Ctrl K Inter Bold 平铺 */ +.search-box { + display: flex; align-items: center; gap: 10px; + padding: 9px 12px; + background: var(--surface); + border: 1px solid var(--border-faint); + border-radius: var(--r-md); + color: var(--black-alpha-48); + margin-bottom: 18px; + cursor: text; + transition: border-color var(--t-base); +} +.search-box:hover { border-color: var(--black-alpha-24); } +.search-box:focus-within { border-color: var(--heat-40); box-shadow: inset 0 0 0 1px var(--heat-40); } +.search-box svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--black-alpha-56); } +.search-box input { + flex: 1; min-width: 0; + border: 0; background: transparent; + font-size: 13.5px; color: var(--accent-black); + padding: 0; +} +.search-box input::placeholder { color: var(--black-alpha-48); } +.search-box .kbd { + margin-left: auto; + flex-shrink: 0; + white-space: nowrap; + font-family: var(--font-inter); + font-weight: 700; + font-size: 11px; + color: var(--black-alpha-48); + letter-spacing: .02em; +} + +.nav-section { + font-size: 11px; color: var(--black-alpha-48); + padding: 16px 12px 8px; + letter-spacing: .04em; + font-weight: 500; + /* 中文标签用 sans 字体,不用 mono + uppercase */ +} +nav { display: flex; flex-direction: column; gap: 2px; } +nav a { + display: flex; align-items: center; gap: 11px; + padding: 9px 12px; + color: var(--black-alpha-56); + font-size: 13.5px; font-weight: 500; + border-radius: var(--r-md); + cursor: pointer; + user-select: none; + transition: background var(--t-base), color var(--t-base); +} +nav a:hover { background: var(--black-alpha-4); color: var(--accent-black); } +nav a.active { background: var(--heat-12); color: var(--heat); } +nav a svg { width: 14px; height: 14px; opacity: .85; } +nav a.active svg { opacity: 1; } +nav a .pill-mini { + margin-left: auto; + font-family: var(--font-mono); + font-size: 9.5px; font-weight: 600; + padding: 2px 7px; + background: var(--surface); + color: var(--black-alpha-48); + border: 1px solid var(--border-faint); + border-radius: var(--r-pill); + letter-spacing: .04em; +} +nav a.disabled { color: var(--black-alpha-32); cursor: not-allowed; } +nav a.disabled:hover { background: transparent; color: var(--black-alpha-32); } +.aside-foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-faint); } +.user { + display: flex; align-items: center; gap: 10px; + padding: 8px 10px; + border-radius: var(--r-md); + cursor: pointer; + transition: background var(--t-base); +} +.user:hover { background: var(--black-alpha-4); } +.user .av { + width: 26px; height: 26px; + border-radius: 6px; + background: var(--accent-black); + color: var(--accent-white); + display: flex; align-items: center; justify-content: center; + font-weight: 600; font-size: 11px; +} +.user .em { font-size: 13px; color: var(--accent-black); } + +/* ─── Main + grid background ─── */ +main { position: relative; overflow: hidden; background: var(--background-base); } +.grid-bg { + position: absolute; inset: 0; pointer-events: none; + background-image: + url("data:image/svg+xml;utf8,"), + url("data:image/svg+xml;utf8,"), + url("data:image/svg+xml;utf8,"); + background-size: 240px 240px, 60px 60px, 240px 240px; + mask-image: radial-gradient(ellipse 95% 80% at 50% 35%, #000 25%, transparent 95%); + -webkit-mask-image: radial-gradient(ellipse 95% 80% at 50% 35%, #000 25%, transparent 95%); +} +.scatter { + position: absolute; + font-family: var(--font-mono); font-size: 8.5px; line-height: 1.05; + color: var(--black-alpha-20); white-space: pre; pointer-events: none; + opacity: .85; letter-spacing: .04em; +} +.tag-corner { + position: absolute; + color: var(--black-alpha-48); + font-family: var(--font-mono); + font-size: 10.5px; letter-spacing: .06em; + pointer-events: none; opacity: .85; z-index: 1; +} +.sq-mark { position: absolute; width: 5px; height: 5px; background: var(--black-alpha-24); pointer-events: none; } + +/* ─── Topbar ─── */ +.topbar { + display: flex; align-items: center; gap: 12px; + padding: 14px 28px; + border-bottom: 1px solid var(--border-faint); + background: var(--background-base); + position: relative; z-index: 2; +} +.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--black-alpha-48); } +.crumbs .sep { color: var(--black-alpha-32); } +.crumbs .here { color: var(--accent-black); font-weight: 500; } +.crumbs a:hover { color: var(--accent-black); } +.topbar .right { margin-left: auto; display: flex; align-items: center; gap: 10px; } +.balance-chip { + display: inline-flex; align-items: center; gap: 7px; + height: 36px; + padding: 0 14px 0 12px; + background: var(--surface); + border: 1px solid var(--border-faint); + border-radius: var(--r-pill); + font-size: 13px; + color: var(--black-alpha-56); + cursor: pointer; + transition: background var(--t-base), border-color var(--t-base); +} +.balance-chip:hover { background: var(--black-alpha-4); border-color: var(--black-alpha-24); } +.balance-chip strong { color: var(--accent-black); font-weight: 600; font-variant-numeric: tabular-nums; } +.balance-chip svg { width: 13px; height: 13px; color: var(--heat); } +.icon-btn { + width: 36px; height: 36px; + display: flex; align-items: center; justify-content: center; + background: var(--surface); + border: 1px solid var(--border-faint); + border-radius: var(--r-md); + color: var(--black-alpha-56); + cursor: pointer; + position: relative; + transition: background var(--t-base), border-color var(--t-base), color var(--t-base); +} +.icon-btn:hover { background: var(--black-alpha-4); color: var(--accent-black); border-color: var(--black-alpha-24); } +.icon-btn svg { width: 15px; height: 15px; } +.icon-btn .dot-noti { + position: absolute; top: 8px; right: 9px; + width: 7px; height: 7px; border-radius: 50%; + background: var(--heat); border: 1.5px solid var(--surface); +} + +/* ─── Content ─── */ +.content { + padding: 48px 56px 72px; + position: relative; + z-index: 1; + max-width: 1480px; + margin: 0 auto; + min-height: calc(100vh - 64px); +} + +.content > .corner-mark { display: none; } +.page-head { + display: flex; align-items: flex-start; justify-content: space-between; + margin-bottom: 36px; gap: 16px; flex-wrap: wrap; +} +.page-head h1 { + font-size: 28px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; + color: var(--accent-black); +} +.page-head .sub { + font-size: 14px; color: var(--black-alpha-56); + margin-top: 10px; + display: flex; align-items: center; gap: 10px; flex-wrap: wrap; +} +.page-head .sub .mono { font-family: var(--font-mono); font-size: 11.5px; color: var(--black-alpha-48); letter-spacing: .04em; } +.page-head .actions { display: flex; gap: 10px; align-items: center; } + +.section-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; } +.section-h h2 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--accent-black); } +.section-h .more { + font-family: var(--font-mono); font-size: 11.5px; + color: var(--black-alpha-48); letter-spacing: .04em; + cursor: pointer; + transition: color var(--t-base); +} +.section-h .more:hover { color: var(--heat); } + +/* ─── Buttons · 统一高度 36 / 8 px 圆角 / 真 1px border / hover bg 切换 ─── */ +.btn { + display: inline-flex; align-items: center; justify-content: center; gap: 6px; + height: 36px; + padding: 0 16px; + border-radius: var(--r-md); + font-size: 13px; font-weight: 500; + background: var(--surface); + color: var(--accent-black); + cursor: pointer; + white-space: nowrap; + font-family: inherit; + border: 1px solid var(--black-alpha-12); + transition: background var(--t-base), border-color var(--t-base), transform var(--t-fast); +} +.btn:hover { background: var(--black-alpha-4); border-color: var(--black-alpha-24); } +.btn:active { background: var(--black-alpha-7); transform: scale(.99); } +.btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--background-base), 0 0 0 4px var(--heat-40); } +.btn:disabled, .btn.disabled { + color: var(--black-alpha-32); + background: var(--black-alpha-5); + border-color: var(--black-alpha-12); + cursor: not-allowed; + transform: none; +} +.btn:disabled:hover, .btn.disabled:hover { + background: var(--black-alpha-5); + border-color: var(--black-alpha-12); +} +.btn svg { width: 13px; height: 13px; } + +.btn-primary { + background: var(--heat); + color: var(--accent-white); + border-color: var(--heat); + font-weight: 600; + /* 继承 .btn 的 height: 36px / padding: 0 16px */ + box-shadow: var(--shadow-cta); +} +.btn-primary:hover { + background: var(--heat); + border-color: var(--heat); + box-shadow: var(--shadow-cta-hover); +} +.btn-primary:active { + background: var(--heat); + transform: scale(.995); + box-shadow: var(--shadow-cta-active); +} +.btn-primary:disabled, .btn-primary.disabled { + background: var(--heat-40); + color: var(--accent-white); + border-color: var(--heat-40); + box-shadow: none; +} + +.btn-ghost { + background: transparent; + border-color: transparent; + color: var(--black-alpha-56); +} +.btn-ghost:hover { background: var(--black-alpha-4); border-color: transparent; color: var(--accent-black); } +.btn-ghost:active { background: var(--black-alpha-7); } + +.btn-sm { height: 28px; padding: 0 12px; font-size: 12px; border-radius: var(--r-md); } +.btn-lg { height: 40px; padding: 0 20px; font-size: 13.5px; } + +/* ─── Pills ─── */ +.pill { + display: inline-flex; align-items: center; gap: 6px; + padding: 4px 10px; + border-radius: var(--r-pill); + font-size: 11.5px; font-weight: 500; + border: 1px solid var(--border-faint); + background: var(--surface); + color: var(--black-alpha-56); + white-space: nowrap; +} +.pill.info { background: var(--heat-12); color: var(--heat); border-color: var(--heat-20); } +.pill.ok { background: var(--forest-bg); color: var(--accent-forest); border-color: var(--forest-bd); } +.pill.err { background: var(--crimson-bg); color: var(--accent-crimson); border-color: var(--crimson-bd); } +.pill.neutral { background: var(--black-alpha-4); color: var(--black-alpha-56); border-color: var(--border-faint); } +.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } + +/* ─── Cards / containers · V2.1 统一 8 px 圆角 ─── */ +.card-hard { + background: var(--surface); + border: 1px solid var(--border-faint); + border-radius: var(--r-md); + position: relative; +} +/* V2.1 spec §5.3 · 容器四角准星 · SVG 圆弧内凹(22×21 viewBox) */ +.card-hard.with-corners::before, .card-hard.with-corners::after, +.with-corners .corner-tr, .with-corners .corner-bl { + content: ''; position: absolute; + width: 14px; height: 14px; + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 21' fill='%23e8e8e8'%3E%3Cpath d='M10.5 4C10.5 7.31371 7.81371 10 4.5 10H0.5V11H4.5C7.81371 11 10.5 13.6863 10.5 17V21H11.5V17C11.5 13.6863 14.1863 11 17.5 11H21.5V10H17.5C14.1863 10 11.5 7.31371 11.5 4V0H10.5V4Z'/%3E%3C/svg%3E") no-repeat center; + background-size: contain; + pointer-events: none; +} +.card-hard.with-corners::before { top: -7px; left: -7px; } +.card-hard.with-corners::after { bottom: -7px; right: -7px; } +.with-corners .corner-tr { top: -7px; right: -7px; } +.with-corners .corner-bl { bottom: -7px; left: -7px; } + +/* ─── Stats (KPI bar) ─── */ +.stats { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 0; + background: var(--surface); + border: 1px solid var(--border-faint); + border-radius: var(--r-md); + position: relative; + margin-bottom: 36px; + overflow: hidden; +} +.stat { + padding: 24px 28px; + border-right: 1px solid var(--border-faint); + position: relative; + cursor: pointer; + transition: background var(--t-base); +} +.stat:hover { background: var(--black-alpha-4); } +.stat:last-child { border-right: 0; } +.stat .lbl { + font-size: 12.5px; color: var(--black-alpha-48); + font-weight: 500; display: flex; align-items: center; gap: 8px; +} +.stat .lbl .badge { + font-family: var(--font-mono); + font-size: 10px; color: var(--black-alpha-48); + background: var(--black-alpha-4); + padding: 1px 7px; + border-radius: var(--r-sm); + border: 1px solid var(--border-faint); + letter-spacing: .04em; +} +.stat .v { + font-size: 32px; font-weight: 600; letter-spacing: -.02em; + line-height: 1.1; margin-top: 14px; + font-variant-numeric: tabular-nums; + color: var(--accent-black); +} +.stat .v small { font-size: 15px; color: var(--black-alpha-48); font-weight: 500; margin-left: 2px; } +.stat .delta { + font-family: var(--font-mono); font-size: 11px; + margin-top: 10px; color: var(--black-alpha-48); letter-spacing: .02em; +} +.stat .delta.up { color: var(--accent-forest); } +.stat .bar { height: 5px; background: var(--black-alpha-7); border-radius: 3px; margin-top: 14px; overflow: hidden; } +.stat .bar > span { display: block; height: 100%; background: var(--heat); border-radius: 3px; } +.stat .sub { + font-family: var(--font-mono); font-size: 10.5px; + color: var(--black-alpha-48); margin-top: 10px; letter-spacing: .02em; +} + +/* ─── Form fields ─── */ +.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; } +.field-label { font-size: 13px; font-weight: 500; color: var(--accent-black); } +.field-label .req { color: var(--accent-crimson); margin-left: 2px; } +.field-hint { font-size: 12px; color: var(--black-alpha-48); } +.input, .textarea, .select { + height: 36px; + padding: 0 14px; + background: var(--surface); + border: 1px solid var(--black-alpha-12); + border-radius: var(--r-md); + font-size: 13.5px; + width: 100%; + font-family: inherit; + color: var(--accent-black); + transition: border-color var(--t-base), box-shadow var(--t-base), background var(--t-base); +} +.input:hover, .textarea:hover, .select:hover { border-color: var(--black-alpha-24); } +.input:focus, .textarea:focus, .select:focus { + border-color: var(--heat-40); + box-shadow: inset 0 0 0 1px var(--heat-40); +} +.input::placeholder, .textarea::placeholder { color: var(--black-alpha-48); } +.input:disabled, .textarea:disabled, .select:disabled { + background: var(--black-alpha-5); + color: var(--black-alpha-32); + cursor: not-allowed; +} +.textarea { height: auto; min-height: 88px; padding: 12px 14px; line-height: 1.6; resize: vertical; } +.select { + appearance: none; + background-image: url("data:image/svg+xml;utf8,"); + background-repeat: no-repeat; + background-position: right 12px center; + padding-right: 32px; +} + +/* ─── Tabs ─── */ +.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-faint); margin-bottom: 20px; } +.tab { + padding: 10px 14px; font-size: 13px; + color: var(--black-alpha-56); + border-bottom: 2px solid transparent; + margin-bottom: -1px; + cursor: pointer; + font-weight: 500; user-select: none; + transition: color var(--t-base), background var(--t-base); + border-radius: var(--r-md) var(--r-md) 0 0; +} +.tab:hover { color: var(--accent-black); background: var(--black-alpha-4); } +.tab.active { color: var(--accent-black); border-bottom-color: var(--heat); } +.tab .count { + font-family: var(--font-mono); font-size: 10.5px; + color: var(--black-alpha-48); margin-left: 6px; + padding: 1px 7px; + background: var(--black-alpha-4); + border-radius: var(--r-sm); letter-spacing: .04em; +} +.tab.active .count { background: var(--heat-12); color: var(--heat); } + +/* ─── Filter chips · 统一高度 36 px 与 .btn / .input 对齐 ─── */ +.chip { + height: 36px; padding: 0 14px; + border: 1px solid var(--border-faint); + background: var(--surface); + border-radius: var(--r-md); + font-size: 13px; + color: var(--black-alpha-56); + display: inline-flex; align-items: center; gap: 6px; + cursor: pointer; + font-family: inherit; + transition: background var(--t-base), border-color var(--t-base), color var(--t-base); +} +.chip:hover { background: var(--black-alpha-4); border-color: var(--black-alpha-24); color: var(--accent-black); } +.chip.active { border-color: var(--heat-40); color: var(--heat); background: var(--heat-12); } +.chip svg { width: 12px; height: 12px; } + +/* ─── Toolbar ─── */ +.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; } +.toolbar .search-inline { + position: relative; flex: 1; max-width: 360px; +} +.toolbar .search-inline svg { + position: absolute; left: 12px; top: 50%; transform: translateY(-50%); + color: var(--black-alpha-56); width: 14px; height: 14px; + z-index: 2; pointer-events: none; +} +.toolbar .search-inline input { padding-left: 36px; } + +/* ─── Progress (5 段流水线 · V2.1 语义色 + 脉动) ─── */ +.prog { display: flex; gap: 3px; } +.prog span { + width: 18px; height: 5px; border-radius: 2px; + background: var(--black-alpha-8); + transition: background var(--t-base); +} +.prog span.done { background: var(--accent-forest); } +.prog span.cur { + background: var(--heat); + animation: prog-pulse 1.4s ease-in-out infinite; +} +.prog span.fail { background: var(--accent-crimson); } +@keyframes prog-pulse { + 0%, 100% { opacity: 1; transform: scaleY(1); } + 50% { opacity: .55; transform: scaleY(.7); } +} + +/* ─── Table ─── */ +table.t { + width: 100%; border-collapse: collapse; + background: var(--surface); + border: 1px solid var(--border-faint); + border-radius: var(--r-md); + overflow: hidden; +} +table.t thead th { + text-align: left; + font-size: 11.5px; + font-weight: 500; + color: var(--black-alpha-48); + padding: 14px 16px; + background: var(--black-alpha-3); + border-bottom: 1px solid var(--border-faint); + letter-spacing: .04em; + text-transform: uppercase; + font-family: var(--font-mono); +} +table.t tbody td { + padding: 16px; + border-bottom: 1px solid var(--border-faint); + font-size: 13px; + vertical-align: middle; + color: var(--accent-black); +} +table.t tbody tr:last-child td { border-bottom: 0; } +table.t tbody tr { cursor: pointer; transition: background var(--t-base); } +table.t tbody tr:hover { background: var(--black-alpha-4); } + +/* ─── Placeholder thumb ─── */ +.placeholder { + background: + repeating-linear-gradient(135deg, rgba(0,0,0,0.025) 0 1px, transparent 1px 12px), + var(--black-alpha-4); + border: 1px solid var(--border-faint); + border-radius: var(--r-md); + display: grid; place-items: center; + color: var(--black-alpha-48); + font-family: var(--font-mono); + font-size: 10px; + letter-spacing: .04em; + user-select: none; + overflow: hidden; + position: relative; + text-align: center; + padding: 6px; +} +.placeholder .ph-frame { + background: rgba(255, 255, 255, .92); + border: 1px solid var(--border-faint); + border-radius: var(--r-sm); + padding: 3px 8px; + font-size: 10.5px; + color: var(--black-alpha-56); + font-weight: 500; +} + +/* ─── Toast ─── */ +.toast { + position: fixed; bottom: 24px; right: 24px; + background: var(--surface); + border: 1px solid var(--border-faint); + border-radius: var(--r-md); + padding: 14px 18px; + display: flex; align-items: center; gap: 12px; + box-shadow: var(--shadow-floating); + transform: translateX(420px); + transition: transform var(--t-slow); + z-index: 1000; + min-width: 260px; +} +.toast.show { transform: translateX(0); } +.toast .ic-t { + width: 26px; height: 26px; + background: var(--heat-12); + color: var(--heat); + border-radius: var(--r-md); + display: grid; place-items: center; + flex-shrink: 0; +} +.toast .ic-t svg { width: 13px; height: 13px; } +.toast .txt { font-size: 13px; color: var(--accent-black); font-weight: 500; } +.toast .txt .mono { + font-family: var(--font-mono); font-size: 11px; + color: var(--black-alpha-48); display: block; margin-top: 2px; + letter-spacing: .04em; font-weight: 400; +} + +/* ─── Modal ─── */ +.modal-bg { + position: fixed; inset: 0; + background: rgba(21, 20, 15, .42); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + display: none; align-items: center; justify-content: center; + z-index: 999; + opacity: 0; + transition: opacity .2s; +} +.modal-bg.show { display: flex; opacity: 1; } +.modal { + background: var(--surface); + border: 1px solid var(--border-faint); + border-radius: var(--r-md); + max-width: 480px; width: 90%; + position: relative; + transform: scale(.96); + transition: transform .25s cubic-bezier(0.34, 1.56, 0.64, 1); +} +.modal-bg.show .modal { transform: scale(1); } +.modal::before, .modal::after { + content: ''; + position: absolute; + width: 14px; height: 14px; + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 21' fill='%23e8e8e8'%3E%3Cpath d='M10.5 4C10.5 7.31371 7.81371 10 4.5 10H0.5V11H4.5C7.81371 11 10.5 13.6863 10.5 17V21H11.5V17C11.5 13.6863 14.1863 11 17.5 11H21.5V10H17.5C14.1863 10 11.5 7.31371 11.5 4V0H10.5V4Z'/%3E%3C/svg%3E") no-repeat center; + background-size: contain; + pointer-events: none; + color: var(--black-alpha-48); + font-family: var(--font-mono); + font-size: 13px; line-height: 1; +} +.modal::before { top: -7px; left: -7px; } +.modal::after { bottom: -7px; right: -7px; } +.modal .corner-tr, .modal .corner-bl { + position: absolute; + width: 14px; height: 14px; + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 21' fill='%23e8e8e8'%3E%3Cpath d='M10.5 4C10.5 7.31371 7.81371 10 4.5 10H0.5V11H4.5C7.81371 11 10.5 13.6863 10.5 17V21H11.5V17C11.5 13.6863 14.1863 11 17.5 11H21.5V10H17.5C14.1863 10 11.5 7.31371 11.5 4V0H10.5V4Z'/%3E%3C/svg%3E") no-repeat center; + background-size: contain; + pointer-events: none; +} +.modal .corner-tr { top: -7px; right: -7px; } +.modal .corner-bl { bottom: -7px; left: -7px; } +.modal-h { + padding: 22px 24px 16px; + border-bottom: 1px solid var(--border-faint); + display: flex; align-items: center; gap: 14px; +} +.modal-h .ic-m { + width: 36px; height: 36px; + background: var(--heat-12); + color: var(--heat); + border-radius: var(--r-md); + display: flex; align-items: center; justify-content: center; + flex-shrink: 0; +} +.modal-h .ic-m svg { width: 17px; height: 17px; } +.modal-h .ti { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--accent-black); } +.modal-h .ti span { + display: block; font-family: var(--font-mono); font-size: 11px; + color: var(--black-alpha-48); font-weight: 400; margin-top: 4px; letter-spacing: .04em; +} +.modal-b { padding: 20px 24px; font-size: 13.5px; color: var(--black-alpha-72); line-height: 1.75; } +.modal-b .mono-acc { + font-family: var(--font-mono); color: var(--heat); + background: var(--heat-12); padding: 2px 6px; + font-size: 11.5px; border-radius: var(--r-sm); +} +.modal-f { + padding: 16px 24px; + border-top: 1px solid var(--border-faint); + display: flex; justify-content: flex-end; gap: 10px; +} + +/* ─── Drawer ─── */ +.drawer-bg { + position: fixed; inset: 0; + background: rgba(21, 20, 15, .32); + display: none; + z-index: 90; +} +.drawer-bg.show { display: block; } +.drawer { + position: fixed; right: 0; top: 0; bottom: 0; + width: 540px; max-width: 100vw; + background: var(--surface); + border-left: 1px solid var(--border-faint); + z-index: 95; + transform: translateX(100%); + transition: transform .25s cubic-bezier(.32, .72, 0, 1); + display: flex; flex-direction: column; + box-shadow: -4px 0 24px rgba(21, 20, 15, .04); +} +.drawer.show { transform: translateX(0); } +.drawer-h { + padding: 20px 24px; + border-bottom: 1px solid var(--border-faint); + display: flex; align-items: center; +} +.drawer-h h3 { font-size: 16px; font-weight: 600; color: var(--accent-black); } +.drawer-h .x { + margin-left: auto; width: 32px; height: 32px; + border-radius: var(--r-md); + display: grid; place-items: center; + color: var(--black-alpha-56); cursor: pointer; + transition: background var(--t-base); +} +.drawer-h .x:hover { background: var(--black-alpha-4); color: var(--accent-black); } +.drawer-b { padding: 24px; overflow-y: auto; flex: 1; } +.drawer-f { + padding: 16px 24px; + border-top: 1px solid var(--border-faint); + display: flex; gap: 10px; justify-content: flex-end; + background: var(--background-lighter); +} + +/* ─── Scrollbar ─── */ +::-webkit-scrollbar { width: 8px; height: 8px; } +::-webkit-scrollbar-track { background: transparent; } +::-webkit-scrollbar-thumb { background: var(--black-alpha-12); border-radius: 4px; } +::-webkit-scrollbar-thumb:hover { background: var(--black-alpha-24); } + +/* ─── Responsive ─── */ +@media (max-width: 1100px) { + .app { grid-template-columns: 1fr; } + aside.sidebar { display: none; } + .stats { grid-template-columns: repeat(2, 1fr); } + .stat:nth-child(2) { border-right: 0; } + .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--border-faint); } + .content { padding: 28px 24px 48px; } +} + +/* ─── Spinner ─── */ +.spinner { + width: 18px; height: 18px; + border: 2px solid var(--border-faint); + border-top-color: var(--heat); + border-radius: 50%; + animation: spin 0.8s linear infinite; +} +@keyframes spin { to { transform: rotate(360deg); } } diff --git a/电商AI平台/assets/shell.js b/电商AI平台/assets/shell.js new file mode 100644 index 0000000..b55e626 --- /dev/null +++ b/电商AI平台/assets/shell.js @@ -0,0 +1,195 @@ +/* ============================================================ + 流·Studio · Shell renderer V2.1 + 渲染 sidebar / topbar / 网格背景装饰 / Toast / Modal helpers + 每个页面调用 Shell.render({ active, crumbs, balance, topActions }) + + V2.1 变化: + - sidebar 搜索 ⌘K → "Ctrl K" Inter Bold 平铺(无 kbd 边框) + ============================================================ */ + +const NAV = [ + { + id: 'dashboard', label: '工作台', href: 'index.html', + icon: '' + }, + { + id: 'products', label: '商品库', href: 'products.html', badge: '12', + icon: '' + }, + { + id: 'projects', label: '视频项目', href: 'projects.html', + icon: '' + }, + { + id: 'library', label: '资产库', href: 'library.html', + icon: '' + }, + { + id: 'account', label: '账户', href: 'account.html', + icon: '' + }, + { + id: 'settings', label: '设置', href: '#', + icon: '' + } +]; + +const TEAM_NAV = { + label: '团队', icon: + '', + badge: 'V1.5' +}; + +window.Shell = { + render({ active = '', crumbs = [], balance = '¥327.40', topActions = '' } = {}) { + const navHtml = NAV.map(n => ` + + ${n.icon} + ${n.label} + ${n.badge ? `${n.badge}` : ''} + + `).join(''); + + const sidebar = ` + + `; + + const crumbHtml = crumbs.length ? ` +
+ ${crumbs.map((c, i) => { + const last = i === crumbs.length - 1; + const sep = i > 0 ? '/' : ''; + if (last) return `${sep}${c.label}`; + return `${sep}${c.label}`; + }).join('')} +
+ ` : ''; + + const topbar = ` +
+ ${crumbHtml} +
+ + + 余额 ${balance} + + + ${topActions} +
+
+ `; + + const decorations = ` +
+ 
  · ·  +
+ ·  +XX+
+  +XXXX·
+   +X·
+ 
+   ·  ·
+ XX· ·
+·XXXX·+
+ ·++·
+ 
 ·    +
++·XX·
+ ·X+ ·
+   ·
+ 
  +X·
+ ·XX·
++·X·+
+ + + + + [ 200 OK ] + [ /v2 ] + [ .MP4 · 9:16 ] + [ STUDIO ] + `; + + const toastHtml = ` +
+
+
操作成功[ 200 OK ]
+
+ `; + + // 装订线 SVG 准星 · V2.1 签名元素(圆弧内凹的"+") + const cornerSvg = ``; + const cornerMarks = ` + ${cornerSvg} + ${cornerSvg} + ${cornerSvg} + ${cornerSvg} + `; + + const app = document.createElement('div'); + app.className = 'app'; + app.innerHTML = sidebar + `
${decorations}${topbar}
${cornerMarks}
`; + + const src = document.getElementById('page'); + document.body.prepend(app); + if (src) { + // 把页面 body 内容追加到 .content,保留 4 个 corner-mark SVG + document.getElementById('page-content').insertAdjacentHTML('beforeend', src.innerHTML); + src.remove(); + } + document.body.insertAdjacentHTML('beforeend', toastHtml); + + document.addEventListener('keydown', e => { + if ((e.metaKey || e.ctrlKey) && e.key === 'k') { + e.preventDefault(); + document.getElementById('global-search')?.focus(); + } + }); + }, + + toast(text, mono) { + const t = document.getElementById('__toast'); + const txt = document.getElementById('__toast-txt'); + if (!t || !txt) return; + txt.innerHTML = text + (mono ? `[ ${mono} ]` : ''); + t.classList.add('show'); + clearTimeout(this._tt); + this._tt = setTimeout(() => t.classList.remove('show'), 2400); + }, + + openModal(id) { document.getElementById(id)?.classList.add('show'); }, + closeModal(id) { document.getElementById(id)?.classList.remove('show'); }, + openDrawer(id) { + document.getElementById(id)?.classList.add('show'); + document.getElementById(id + '-bg')?.classList.add('show'); + }, + closeDrawer(id) { + document.getElementById(id)?.classList.remove('show'); + document.getElementById(id + '-bg')?.classList.remove('show'); + } +}; diff --git a/电商AI平台/design-system.html b/电商AI平台/design-system.html new file mode 100644 index 0000000..37fd368 --- /dev/null +++ b/电商AI平台/design-system.html @@ -0,0 +1,1730 @@ + + + + + +流·Studio 设计系统 V2 · Interactive + + + + + + + +
+ + + + + +
+ + +
+ // V2 · INTERACTIVE +

流·Studio 设计系统

+

所有 token、组件、状态的可交互参照。基于 Firecrawl Playground 实测规范校准。 hover / 点击下方组件可看到真实交互反馈。

+
+ [ Restraint · v2.0 ] + · + // based on DESIGN_SPEC_V2.md +
+
+ + + + +
+
+ // §1 · COLOR TOKENS · V2.1 · FIRECRAWL-ALIGNED +

色彩系统

+

V2.1 全面对齐 Firecrawl Playground 实测色板:**冷灰底**(非米白)· **#FA5D19 主橙**(更亮一档)· **20 档 black-alpha 阶梯**(替代 11 档 ink-alpha)· **5 色 accent 多彩点**(amethyst / bluetron / crimson / forest / honey)。点击任何色块复制值。

+
+ +
+

表面 / 背景 // 4 档 · 冷灰无色相

+

告别 V2 的暖米白(#FAF9F5),全面切换 Firecrawl 的纯冷灰。--bg/--bg-soft/--card 作为 legacy 别名仍可用。

+
+
--background-base
#f9f9f9 · 页面底
copied
+
--background-lighter
#fbfbfb · 容器底
copied
+
--surface
#ffffff · 卡片
copied
+
--surface-raised
#ffffff · Modal
copied
+
+
+ +
+

边框 // 3 档 · 冷灰 · 差距极小靠语义

+

3 档相差只 1–2 个色阶,肉眼几乎看不出。**用语义,不用视觉对比**——80% 场景用 --border-faint。

+
+
--border-faint
#ededed · 默认 ★
copied
+
--border-muted
#e8e8e8 · 略深
copied
+
--border-loud
#e6e6e6 · 强分隔
copied
+
+
+ +
+

主橙 Heat // 单 hue #FA5D19 + 8 档 alpha

+

从 V2 砖红 #E55B26 调亮到 Firecrawl 实测 #FA5D19(更红更饱和)。**全靠 alpha 叠加,绝不换 hue。** hover 不再切换到更深的橙,而是用 90% / 16% 这些档位组合。

+
+
--heat
#fa5d19 · 100% · CTA ★
copied
+
--heat-90
90% · hover
copied
+
--heat-40
40% · ring / edge
copied
+
--heat-20
20% · pill border / selection
copied
+
--heat-16
16% · hover bg
copied
+
--heat-12
12% · tint bg
copied
+
--heat-8
8%
copied
+
--heat-4
4% · 极弱
copied
+
+
+ +
+

Accent 多彩点 // 5 色信号 · 限定语义场景

+

**新增章节 · 取自 Firecrawl 实测**。这 5 色只用于**语义信号**(代码高亮 / info / 状态色),**禁止做大面积装饰**——全场依然只有橙色一个 accent。--accent-black 替代 V2 的 --ink #15140F(更柔和的灰黑)。

+
+
--accent-black
#262626 · 主前景
copied
+
--accent-white
#ffffff · 反色文字
copied
+
--accent-amethyst
#9061ff · 紫 / code property
copied
+
--accent-bluetron
#2a6dfb · 蓝 / info
copied
+
--accent-crimson
#eb3424 · 红 / error ★
copied
+
--accent-forest
#42c366 · 绿 / success ★
copied
+
--accent-honey
#ecb730 · 黄 / warning
copied
+
+
+ +
+

Black-Alpha 阶梯 // 20 档 · 替代 V2 的 11 档 ink-alpha

+

**核心工具尺。** 0–24% 用 rgba(0,0,0,...) 纯黑透明;**32% 起换 rgba(38,38,38,...)**(即 accent-black 作底)避免叠出"灰中带蓝"——这是 Firecrawl 的细节技巧,我们 1:1 复刻。dark mode 时这套 token 自动翻转为 white-alpha。原 --ink-alpha-* 全部作为 legacy 别名映射到对应 black-alpha。

+
+
--black-alpha-1
1%
copied
+
--black-alpha-2
2%
copied
+
--black-alpha-3
3%
copied
+
--black-alpha-4
4% · hover bg ★
copied
+
--black-alpha-5
5% · tab 分隔
copied
+
--black-alpha-6
6%
copied
+
--black-alpha-7
7% · active bg ★
copied
+
--black-alpha-8
8%
copied
+
--black-alpha-10
10%
copied
+
--black-alpha-12
12% · inside-border ★
copied
+
--black-alpha-16
16%
copied
+
--black-alpha-20
20%
copied
+
--black-alpha-24
24%
copied
+
--black-alpha-32
32% · base 切换 →
copied
+
--black-alpha-40
40%
copied
+
--black-alpha-48
48% · 占位字色 ★
copied
+
--black-alpha-56
56% · 次级文字 ★
copied
+
--black-alpha-64
64% · 描述
copied
+
--black-alpha-72
72%
copied
+
--black-alpha-88
88% · 近主前景
copied
+
+
+ +
+

状态色 // 用 accent-forest / crimson 作语义

+

V2 的 --green #3F6B3F(深森林绿)与 --red #B33A2A(暗砖红)替换为 Firecrawl 的 --accent-forest #42c366 与 --accent-crimson #eb3424——更明亮、更接近真实"信号灯"颜色,但仍保持非荧光。

+
+
--green
#42c366 · 成功(=forest)
copied
+
--green-bg
8% · 配套底
copied
+
--green-bd
20% · 配套边
copied
+
--red
#eb3424 · 失败(=crimson)
copied
+
--red-bg
8% · 配套底
copied
+
--red-bd
20% · 配套边
copied
+
+
+ +
+

Selection 选中色 // Firecrawl 签名细节

+

页面内任何文字选中时,底色 --heat-20 + 字色 --heat。**试着选中下面这行字看效果:**

+

本月营收 ¥327,400 较上月增长 33%,有 5 个项目处于"生成中"状态。其中 2 个需要重新调整模特模板。

+
+
+ + + + +
+
+ // §2 · TYPE · V2.1 MIXED STRATEGY +

字体系统 · 中英协作

+

V2.1 改为**中英双字体协作** —— Inter 处理英文/数字,Alibaba PuHuiTi 处理中文,装饰用 JetBrains Mono。浏览器按字符级 fallthrough,Inter 不含 CJK 字形 → 中文自动跳到普惠体。**不需要 JS,中英自然分工。**

+
+ +
+

字体族原理 // browser-level character fallthrough

+
+
+
// 01 · ENGLISH
+
Inter
+
The quick brown fox jumps. 0123456789 — Vercel / Linear / Stripe 御用,屏幕 UI 优化,数字同宽。
+
+
+
// 02 · 中文
+
阿里普惠体
+
为中英混排专门设计的笔画粗细配比,与 Inter 视觉重量贴近,中文版面舒适匀质。
+
+
+
// 03 · 装饰 MONO
+
JetBrains
+
[ 200 OK ] · // 05.14 · /v2 — 仅用于装饰标签,不参与正文。
+
+
+
+
// 混排实测 · MIXED RENDERING
+
本月营收 ¥327,400 较上月 +33%,共 5 个 AI 项目处于 "生成中" 状态
+
↑ 这一行里:中文走 PuHuiTi · "¥" "327,400" "+33%" "5" "AI" 走 Inter · 字重视觉匀质,无错位
+
+
+ +
+

字号 / 字重 / 行高阶梯 // 11 档

+
+
H1 / Hero36 / 500 / -0.024em / 1.2
+
早上好,大莱
+
+
+
区块 H228 / 500 / -0.02em / 1.25
+
设计系统总览
+
+
+
KPI 数值32 / 500 / -0.02em / tabular-nums
+
¥327.40 K
+
+
+
子区 H316 / 500 / -0.01em / 1.4
+
最近项目
+
+
+
卡片标题14 / 500 / normal / 1.4
+
夏季新款蕾丝连衣裙 · 蓝色 / M
+
+
+
正文 body14 / 400 / normal / **1.65**
+
商家可能没有现成的商品图,需要新增一种「AI 生成」模式 —— 商家上传一张随手拍的原图,AI 生成 4 张满意的头图,选 1 张。
+
+
+
Label · 按钮 / Tab13 / 500 / normal
+
查看 Demo
+
+
+
描述次级13 / 400 / --ink-alpha-64 / 1.8
+
本月营收较上月增长 33%,5 个项目处于"生成中"状态,2 个需要重新调整模特模板
+
+
+
Pill 文字11.5 / 500 / normal
+
生成中
+
+
+
Inter Bold · 徽标11.5 / 700 / Inter only
+
Ctrl K · ESC · Enter · ⇧+Tab
+
+
+
Mono 标签11 / 400 / 0.04em · JetBrains
+
[ 200 OK ] [ .MP4 · 9:16 ] [ /v2 ]
+
+
+
Mono 散点装饰8.5 / 400 / 0.04em
+
· · + · +XX+ +XXXX· +X·
+
+
+ +
+

字重档位 // 仅 400 / 500 / 600 / 700

+
+
+
// REGULAR · 400
+
流·Studio · Aa Bb 123
+
+
+
// MEDIUM · 500 ★ 默认强调
+
流·Studio · Aa Bb 123
+
+
+
// SEMIBOLD · 600
+
流·Studio · Aa Bb 123
+
+
+
// BOLD · 700 · 限徽标
+
流·Studio · Aa Bb 123
+
+
+

// Bold 700 仅用于 Ctrl K 这种纯英文徽标场景,**正文严禁 700**(中英字重错位会暴露)

+
+
+ + + + +
+
+ // §3 · RADIUS +

圆角阶梯

+

V2 核心变化:统一 8 px 作为默认主圆角。完全圆 999 px 仅用于 pill 和 dot。微元素降到 4–6 px。

+
+ +
+
x
禁用 V1
0 px
+
progress
2 px
+
kbd / badge
4 px
+
小色块
6 px
+
主默认
8 px ★
+
pill
pill / dot
999 px
+
+
+ + + + +
+
+ // §4 · ICONS +

Icon 系统

+

统一 SVG line icon · stroke 1.5 · linecap round · 颜色通过 currentColor 继承。禁用 emoji / filled icon。

+
+ +
+

尺寸阶梯 // 5 档

+
+
+
+
S · 14 px
+
+
+
+
M · 16 px ★
+
+
+
+
L · 20 px
+
+
+
+
XL · 24 px
+
+
+
+
Hero · 36 px
+
+
+
+ +
+

颜色场景 // 通过 currentColor 继承

+
+
+ + 默认 ink-56 +
+
+ + hover · ink +
+
+ + active · heat +
+
+ + 在主 CTA 内 +
+
+ + disabled +
+
+
+ +
+

Icon Box // 快捷入口/Modal 头部用

+
+
+
+
+ 32×32 · 8 px 圆角 · --heat-12 底 · 16 px line icon +
+
+
+ + + + +
+
+ // §5 · BUTTONS +

按钮 · 3 类型 × 5 状态 × 3 尺寸

+

所有按钮:高 32 / 圆角 8 / 字号 13 / 字重 500。默认按钮用 ::before inside-border,hover 时边框淡出底色淡入,无布局抖动。

+
+ +
+

类型 1 · 默认 // .btn

+
// default
+
// hover
+
// active
+
// focused
+
// disabled
+
+ +
+

类型 2 · 主 CTA // .btn-primary

+

唯一允许阴影的按钮 —— 4 层橙色多重阴影,hover 时阴影向上抬起。

+
// default
+
// hover
+
// active
+
// focused
+
// disabled
+
+ +
+

类型 3 · 无框 // .btn-ghost

+
// default
+
// hover
+
// active
+
// disabled
+
+ +
+

尺寸 // -sm / 默认 / -lg

+
+ + + +
+
+ + + +
+
+
+ + + + +
+
+ // §6 · PILLS +

胶囊 · 严格 3 级分层

+

同级别尺寸必须完全一致。不允许混用。pill 永远是 999 px(完全圆),靠 dot 体现状态。

+
+ +
+

L1 · 大胶囊 // h:28 / fs:13 / dot:8

+

用于项目状态、列表行主标签。

+
+ 生成中 + 已完成 + 失败 +
+
+ +
+

L2 · 中胶囊 // h:22 / fs:11.5 / dot:6 ★ 默认

+

最常用尺寸。卡片内 / 表格内默认。

+
+ 生成中 + 200 OK + 超时 +
+
+ +
+

L3 · 小胶囊 // h:18 / fs:10.5 / dot:5

+

KPI 角标 / 行内 Mono 标签场景。

+
+ NEW + +33% + -1.2% +
+
+ +
+

对比展示 // 同色 3 级并列看大小差距

+
+ L1 · 生成中 + L2 · 生成中 + L3 · 生成中 +
+
+
+ + + + +
+
+ // §7 · INPUTS +

输入框 · 5 状态

+

同样用 inside-border。focused 时橙色 ring 2 px,error 时红色边框 + 红色软底。点击下方各字段可看到真实 focus 反馈。

+
+ +
+
// default
+
// hover
+
// focused
+
// error
+
// disabled
+
+ +
+

带图标 / 搜索 // 含 Ctrl+K 提示

+
+ + + Ctrl K +
+
+
+ + + + +
+
+ // §8 · FORM CONTROLS +

表单控件

+

Checkbox / Radio / Switch 全部可点击。disabled 状态也可演示。

+
+ +
+

Checkbox

+
+ + + + +
+
+ +
+

Radio

+
+ + + + +
+
+ +
+

Switch

+
+ + + +
+
+
+ + + + +
+
+ // §9 · TABS +

Tab · 双层结构

+

主 Tab 在区块顶部,带橙色下划线指示;副 Tab 用于过滤,带灰度→彩色 icon 反馈。点击切换。

+
+ +
+

主 Tab

+
+ + + + +
+
当前显示:全部
+
+ +
+

副 Tab · 灰度→彩色

+
+ +
+ +
+ +
+ +
+
+
+ + + + +
+
+ // §10 · CARDS +

卡片 / 快捷入口

+

所有卡片统一 8 px 圆角、1 px 边框、无阴影。快捷入口含 hover / active 状态。

+
+ +
+

快捷入口 // hover 我

+ +
+
+ + + + +
+
+ // §11 · KPI +

统计行 · 4 格 stats

+
+ +
+
+
本月营收+33%
+
¥327.40 K
+
↑ 较上月 +33%
+
+
+
活跃项目
+
12
+
↑ 本月 +3
+
+
+
生成中RUNNING
+
5
+
+
+
+
资产总数
+
847
+
·MP4·JPG·PNG
+
+
+
+ + + + +
+
+ // §12 · LIST +

列表行

+

hover 我看整行底色变化。

+
+ +
+
+
9:16
+
夏季新款蕾丝连衣裙
// 创建于 05.14 · 蓝色 / M
+
+ 生成中 + +
+
+
4:5
+
秋季风衣 · 卡其色
// 创建于 05.12 · M / L
+
+ 已完成 + +
+
+
1:1
+
运动 T 恤 · 黑白款
// 创建于 05.10 · 全色系
+
+ 生成失败 + +
+
+
+ + + + +
+
+ // §13 · TIP +

提示框 / 进度

+
+ +
+
+
小提示
+
使用 Ctrl+K 快速搜索任意项目、商品或资产。Tab 切换不同维度,Enter 直达。
+
+
+ +
+

进度条段位 // 5 段 · 流水线专用

+
+
未开始
+
进行中(2/5)
+
已完成
+
失败
+
+
+
+ + + + + + + + + +
+
+ // §15 · TOAST +

Toast 通知

+

右下角浮出。300ms 弹性入场,2400ms 自动消失。

+
+ +
+ + +
+
+ + + + +
+
+ // §16 · SIGNATURE +

主容器装订线

+

整个工作区被左右两条 1 px 边线包夹,四角放圆弧内凹的 SVG 准星。这是流·Studio 视觉的"图纸"签名。Modal 内不必加。

+
+ +
+ + + + +
+ 这块容器左右贯穿两条 1 px 边线,四角带圆弧内凹的 SVG 准星
+ // container-demo · max-width: 720 · border-x only +
+
+
+ + + + +
+
+ // §17 · DECOR +

Mono 装饰元素 · 品牌签名

+

方括号标签 / 双斜杠注释 / 中点连接 —— 这些是流·Studio 独有的"调试视图感",Firecrawl 没有,绝对保留。

+
+ +
+

方括号标签

+
+ [ 200 OK ] + [ /v2 ] + [ .MP4 · 9:16 ] + [ STUDIO ] + [ ALL · 12 ] → +
+
+ +
+

注释样式时间戳

+
// 05.14 · 周五 · 14:32
+
+ +
+

命令路径

+
/sidebar collapse · /toast dismiss · /modal open
+
+ +
+

ASCII 散点(背景装饰)

+
+· ·  +
+·  +XX+
+ +XXXX·
+   +X· +
+
+ +
+

强调单词上色

+

+ 本月营收较上月增长 +33%,有 5 个项目处于"生成中"状态。其中 2 个需要重新调整模特模板。 +

+

// 关键名词加深一档(不变橙),橙色只留给 CTA

+
+
+ + + + +
+
+ // §18 · GUARDRAILS +

Don't List · 绝对禁止

+

任何 mockup / 代码 review 时,对照此清单。每一条违反都判错。

+
+ +
+
+ DO +
用 8 px 统一圆角 + 准星 + 装订线 + mono 装饰做"图纸感"
+
+
+ DON'T +
用 0 px 硬切角的卡片 —— V1 的做法,V2 起判错
+
+
+ DO +
橙色 hover 用 --heat-90 等 alpha 阶梯
+
+
+ DON'T +
hover 时切换到更深的橙 hex(如 #D04E1F)
+
+
+ DO +
主 CTA 用多层橙色阴影(4 层)制造发光感
+
+
+ DON'T +
用灰色阴影 / 文字阴影 / 通用 box-shadow 装饰
+
+
+ +
+
×渐变背景 —— 只有 hero 区可考虑,首选纯色。绝禁多色渐变。
+
×玻璃拟态 —— backdrop-filter 只用于 modal 遮罩。
+
×彩色 emoji —— 所有图标必须 SVG line(stroke 1.5)。
+
×多 accent 色 —— 全场只有橙色一个 accent。
+
×大圆角容器(>12 px)—— 直接判错。
+
×鲜艳荧光状态色 —— 避免霓虹绿、电光蓝、霓虹粉。
+
×居中对齐大段正文 —— 全部左对齐。
+
×装饰当主角 —— 场记板 / 丝绒 / 霓虹灯都不要。
+
×无意义微动效 —— hover 旋转、缩放、彩虹流光,禁。
+
×同行混用直角+圆角 —— 用户原话:"不要有些是直角,胶囊又是圆角"。
+
+
+ +
+
+ + + + + +
+ + + + diff --git a/电商AI平台/index.html b/电商AI平台/index.html new file mode 100644 index 0000000..18a42c6 --- /dev/null +++ b/电商AI平台/index.html @@ -0,0 +1,173 @@ + + + + +工作台 · 流·Studio + + + + + +
+ +
+
+

欢迎回来，小李

+
+ // 05.14 · 周三 + · + 你有 3 个项目 正在进行中 +
+
+
+ + + 新建商品 + + + + 新建项目 + +
+
+ +
+ + +
总项目 ALL
+
12
+
本月 +3
+ + +
进行中 WIP
+
3
+
2 个待审核
+ + +
本月成片 DONE
+
8
+
较上月 +33%
+ + +
余额 ¥
+
¥327.40
+
+
已用 ¥162.60 / ¥500
+ +
+ +
+ + +
+ +
+

提示

[ FAQ ]
+
+ 扣费规则 + 生成失败、超时、用户重跑 — 均不扣费。仅在你点 [ 确认通过 ] 时按 token 实际结算。 +
+
+
+
+ +
+ + + + diff --git a/电商AI平台/library.html b/电商AI平台/library.html new file mode 100644 index 0000000..96dff81 --- /dev/null +++ b/电商AI平台/library.html @@ -0,0 +1,120 @@ + + + + +资产库 · 流·Studio + + + + + +
+ +
+
+

资产库

+
// 跨项目复用 · 人 8 · 景 14 · 商 12 · 片 8
+
+
+ +
+
+ +
+
人物 8
+
场景 14
+
商品图 12
+
成片 8
+
我的上传 3
+
+ +
+
+ + +
+ + + + + + + +
+ +
+
+
林夕 · 都市白领
+
+
林夕
+
女 · 25-30 · 用过 4 次
+
+
+
+
阿楠 · 同事女
+
+
阿楠
+
女 · 25-30 · 用过 2 次
+
+
+
+
小七 · 学生女
+
+
小七
+
女 · 18-22 · 用过 3 次
+
+
+
+
阿杰 · 通勤男
+
+
阿杰
+
男 · 28-35 · 用过 2 次
+
+
+
+
妈妈 · 居家
+
+
妈妈 · 王姐
+
女 · 38-45 · 用过 1 次
+
+
+
+
阿强 · 健身男
+
+
阿强
+
男 · 22-28 · 用过 2 次
+
+
+
+
研究生 · 文艺女
+
+
小苏
+
女 · 22-26 · 用过 1 次
+
+
+
+
闺蜜组合 · 双人
+
+
闺蜜组合
+
双人 · 25-30 · 用过 1 次
+
+
+
+ +
+ + + + diff --git a/电商AI平台/pipeline.html b/电商AI平台/pipeline.html new file mode 100644 index 0000000..3b0b26a --- /dev/null +++ b/电商AI平台/pipeline.html @@ -0,0 +1,784 @@ + + + + +补水面膜 · v3 · 流水线 · 流·Studio + + + + + +
+ + +
+
+
9:16
+
+
+

补水面膜 · 痛点种草 · v3

+ 进行中 +
+
// 透真补水面膜 · AI 全生 · 6 镜 · 0-15s · 9:16
+
+
+
+ + + +
+
+ + +
+ +
1
脚本
已确认
 +
+
2
基础资产
已确认
 +
+
3
故事板
待确认
 +
+
4
视频片段
未开始
 +
+
5
拼接导出
未开始
 +
+ + +
+
+
+
+
AI
+ 脚本助手 + · GPT-4o + + +
+
+
+
+
AI
+
根据 透真补水面膜 和"痛点种草"风格,我先生成了一版 6 镜的脚本,主线是"加班党的深夜急救"。你可以直接编辑右侧的镜头,或者让我重写某一镜。
+
+
14:02
+
+
+
第 4 镜对白太硬了,能不能更口语化?
+
14:05
+
+
+
+
AI
+
+
把 "补水力极强,锁水持久" 改成 "真的,敷完第二天起来脸是软的,不是绷着的",更像真实分享。已替换右侧第 4 镜,确认要的话点 [接受]。
+
+ + +
+
+
+
14:05
+
+
+
+ +
+ + + +
+
+
+ +
+
+ 镜头脚本 + · 6 镜 · 0-15s + + +
+
+
+
1
0-2s
+
画面
深夜的办公桌,电脑屏幕亮着,女主对着镜子叹气,皮肤干燥起皮特写。
+
对白
(叹气)"加班三天,脸已经不能看了……"
+
+
+
2
2-5s
+
画面
女主从抽屉拿出补水面膜,包装特写,光线柔和。
+
对白
"还好我有这个 —— 透真玻尿酸面膜。"
+
+
+
3
5-8s
+
画面
面膜布展开,30g 精华液从布上滴落特写,慢镜头。
+
对白
"30g 精华液,一片顶三片的量。"
+
+
+
4
8-11s
刚改
+
画面
女主敷面膜,闭眼平躺,灯光暖。床头闹钟显示 23:41。
+
对白
"真的,敷完第二天起来脸是软的,不是绷着的。"
+
+
+
5
11-13s
+
画面
第二天早上,女主对镜化妆,皮肤透亮,状态饱满。
+
对白
"早上化妆都能看出来,不假吹。"
+
+
+
6
13-15s
+
画面
面膜产品大图,价格标签 "5 片装 ¥39.9",购物车浮动按钮。
+
对白
"618 五片才 39.9,囤起来。"
+
+
+
+
+ +
+
[ LLM 用量 ~2.4k tokens · ¥0.04 ]
+
+ + +
+
+
+ + +
+
+
+
人物2/2
+
场景3/3
+
商品3 张
+
+ 基础资产是后续故事板的素材。生成后可以单独修改提示词重跑,或上传你已有的图替换。 +

+ // 人物 +¥0.20/张 + // 场景 +¥0.15/张 + 商品图无成本(直接复用商品库) +
+
+ +
+
+

人物 · 2 个

+ + + +
+ +
+
+
林夕 · 都市白领
+
+
主角 · 林夕已确认
+
25-30 岁都市白领,长发,穿宽松米色家居服,温柔但带点疲倦感,肤色偏黄/略干。
+
+ + + + +
+
+
+ +
+
+
+ + 生成中 · 约 8s +
+
+
+
朋友/同事 · 阿楠生成中
+
25-30 岁同龄女性,短发,穿白色衬衫,妆容精致皮肤好,作为对比。
+
+ + + + +
+
+
+
+ +
+

场景 · 3 个

+ + + +
+ +
+
+
深夜办公桌
+
+
深夜办公桌已确认
+
深夜居家办公环境,木质书桌,台灯暖光,电脑屏幕亮着,背景虚化。
+
+
+
+
床头特写
+
+
卧室床头已确认
+
米白色床品,木质床头柜,闹钟显示晚间时间,氛围温柔安静。
+
+
+
+
+
+
!
+ 生成失败 +
+
+
+
通勤地铁失败
+
早高峰地铁车厢,光线偏冷,年轻通勤族,氛围紧张。
+
提示词被安全审核拦截,请调整后重试(不扣费)
+
+ + +
+
+
+
+
+
+ +
+
[ 已确认 ¥0.85 · 待生成 ¥0.20 · 失败 ¥0(不扣) ]
+
+ + +
+
+
+ + +
+
+
+
+
镜号
画面
机位 / 对白 / 音效
+
+
+
10-2s
+
深夜办公桌 · 女主对镜叹气 · 暖光
+
+
中景 / 固定机位
+
"加班三天,脸已经不能看了……"
+
SFX:键盘声 + 远处空调嗡鸣
+
+
+
+
22-5s
+
面膜包装特写 · 抽屉光线柔和
+
+
特写 / 缓推
+
"还好我有这个 —— 透真玻尿酸面膜。"
+
SFX:抽屉滑动声
+
+
+
+
35-8s
+
面膜布展开 · 30g 精华滴落 · 慢动作
+
+
微距 / 慢镜头
+
"30g 精华液,一片顶三片的量。"
+
SFX:水滴慢速回弹
+
+
+
+
48-11s
+
女主敷面膜平躺 · 闹钟 23:41
+
+
中近景 / 固定
+
"敷完第二天起来脸是软的,不是绷着的。"
+
SFX:呼吸声 + 窗外风声
+
+
+
+
511-13s
+
早晨化妆台 · 女主对镜上妆 · 透亮
+
+
中景 / 固定
+
"早上化妆都能看出来,不假吹。"
+
SFX:化妆刷轻扫声
+
+
+
+
613-15s
+
产品大图 · 价格 5片¥39.9 · 购物车
+
+
产品定格 / 静止
+
"618 五片才 39.9,囤起来。"
+
SFX:清脆叮咚音效
+
+
+
+ +
+
+
+ 故事板 + + 已生成 +
+
+ 整张故事板由 image-2 一次性输出,包含画面 + 镜头说明。如需修改请编辑下方提示词整张重跑(不能局部改)。 +
+ +
// 视觉提示词
+
风格:日系小清新短视频,暖色调,午夜→清晨光线变化。 +镜头列表(6 镜,0-15s): +1. 中景 · 深夜办公桌女主对镜叹气 +2. 特写 · 面膜包装从抽屉拿出 +3. 微距 · 面膜布展开 + 精华液滴落慢镜 +4. 中近景 · 女主敷面膜平躺,床头闹钟 23:41 +5. 中景 · 早晨化妆台 + 女主透亮上妆 +6. 产品定格 · 面膜盒 + 价格标签 ¥39.9 +人物:林夕(参考 R1) +场景:深夜办公桌(S1) + 卧室床头(S2) +要求:表格化布局,每镜含画面 + 文字说明
+ +
+ + + ~¥0.45 +
+ +
+ +
// 绑定的资产
+
+ 林夕(人物) + 深夜办公桌(场景) + 卧室床头(场景) + 面膜盒(商品) +
+
+
+
+ +
+
[ image-2 一次 ¥0.45 · 累计 ¥1.50 ]
+
+ + +
+
+
+ + +
+
+
+
视频生成中 · 4 / 6 完成
+
// 每镜 Seedance 调用 ~30s · 预计还需 1 分钟
+
+
+ 67% + +
+ +
+
+
+ 镜 1 · 0-2s +
+
+
+
镜 1 · 深夜办公桌完成
+
2.0s · 1080×1920 · ¥0.18
+
+ + +
+
+
+
+
+ 镜 2 · 2-5s +
+
+
+
镜 2 · 面膜包装完成
+
3.0s · 1080×1920 · ¥0.22
+
+ + +
+
+
+
+
+ 镜 3 · 5-8s +
+
+
+
镜 3 · 精华液微距完成
+
3.0s · 1080×1920 · ¥0.22
+
+ + +
+
+
+
+
+ 镜 4 · 8-11s +
+
+
+
镜 4 · 敷面膜平躺完成
+
3.0s · 1080×1920 · ¥0.22
+
+ + +
+
+
+
+
+
+ + 镜 5 · 生成中 18s +
+
+
+
镜 5 · 化妆台生成中
+
2.0s · 排队中 · ~¥0.18
+
+ + +
+
+
+
+
镜 6 · 排队
+
+
镜 6 · 产品定格排队中
+
2.0s · 等待中 · ~¥0.18
+
+
+
+ +
+
[ 已确认 ¥0.84 · 待生成 ¥0.36 · 累计 ¥2.34 ]
+
+ + +
+
+
+ + +
+
+
+
9:16 预览 · 1080×1920
+
+ + + + 00:08.42 / 00:15.00 +
+
+ +
+
+
字幕
+
转场
+
BGM
+
+
// 字幕样式
+
+
真实分享
朴素白底
+
真实分享
影视黑底
+
真实分享
手写描边
+
真实分享
综艺暖黄
+
+ +
+ +
// 当前选中(镜 4)
+
起始
+
时长
+
音量
+
速度
+
入场交叉淡化
+ +
+ +
// BGM
+
+ 温柔治愈钢琴 · 0:42 + +
+
+ +
+
+ + + | + + + + + 缩放 + +
+ +
+
// time
+
+ 0s2s5s8s11s13s15s +
+
+ +
+
视频
+
+
1 深夜办公桌
+
2 面膜包装
+
3 精华液微距
+
4 敷面膜平躺
+
5 化妆台
+
6 产品定格
+
+
+ +
+
字幕
+
+
加班三天 脸已经不能看了…
+
还好我有这个 透真玻尿酸面膜
+
30g 精华 一片顶三片
+
敷完起来脸是软的
+
化妆都能看出来
+
5 片 ¥39.9 囤起来
+
+
+
+ +
+
BGM
+
+
温柔治愈钢琴 · 0:42(循环 1 次,淡入淡出)
+
+
+
+
+ +
+
[ 合成预估 ~30s · 不消耗 token ]
+
+ + + +
+
+
+ +
+ + + + diff --git a/电商AI平台/product-create.html b/电商AI平台/product-create.html new file mode 100644 index 0000000..54fad20 --- /dev/null +++ b/电商AI平台/product-create.html @@ -0,0 +1,1594 @@ + + + + +新建商品 · 流·Studio + + + + + + +
+ + +
+ + + 返回商品库 + +
+ + [ AI 生成模式 ] +
+
+ +
+ +
+
+
+ + +
+ // 创建模式 +
+ + +
+
+ // AI 模式 · 上传 1 张原图,AI 生成头图 + 模特上身图 +
+
+ + +
+ + + + + +
+ + +
+ + +
+
+ ① + 挑选模特 +
+ +
+ ② + 生成上身图 +
+ // SUB-STEP 1 / 2 · 已选模特 2 +
+ +
+ + +
+
+
+

商品信息 · 上传原图

+

上传一张你拍的商品图(任何角度都行,AI 会优化),并填写商品基本信息。

+
+ // STEP 1 / 4 · INFO + UPLOAD +
+
+
+
+
补水面膜.jpg
1200×1500
+
// 已上传 · 点击重新选择
+
+
+
+ + +
+
+
+ + +
+
+ + +
+
+
+ +
    +
  • 1 透明质酸 + B5,敷完不黏不闷
    • +
  • 2 30g 大容量精华液
    • +
  • +
    • +
+
+
+ + +
+
+
+
+
+ + +
+
+
+

选一张你最满意的头图

+

AI 已基于你上传的原图生成 4 张候选,点击你想要的那张。可重新生成。

+
+ // STEP 2 / 4 · HEAD IMAGES +
+
+
候选 A · 白底简约
[ A · 1920×1920 · WHITE-BG ]
+
候选 B · 木纹背景
[ B · 1920×1920 · WOOD ]
+
候选 C · 浅米石材
[ C · 1920×1920 · STONE ]
+
候选 D · 暖光氛围
[ D · 1920×1920 · AMBIENT ]
+
+
+ + // ~¥0.20 / 4 张 · 不满意不扣费 +
+
+ + +
+ + +
+
+
+

挑选模特 · 子步骤 ①

+

从 AI 模特库选 1 个或多个,统一白 T + 白短裤立绘。悬浮看详情和三视图。选好后点右下「下一步」自动跳到 ②。

+
+ // STEP 3 / 4 · SUB 1 · MODEL +
+ +
+
+ + +
+ + + + + + + + + // 12 / 52 · 已选 2 +
+ +
+
+ [ 立绘 · 肩上 ] +
林夕 · 都市女
+
林夕
女 · 25-30 · 都市白领
+
+
+ [ 立绘 · 肩上 ] +
阿楠
+
阿楠
女 · 25-30 · 同事
+
+
+ [ 立绘 · 肩上 ] +
小七 · 学生
+
小七
女 · 18-22 · 学生
+
+
+ [ 立绘 · 肩上 ] +
王姐 · 居家
+
王姐
女 · 38-45 · 妈妈
+
+
+ [ 立绘 · 肩上 ] +
阿杰 · 通勤男
+
阿杰
男 · 28-35 · 通勤
+
+
+ [ 立绘 · 肩上 ] +
阿强 · 健身男
+
阿强
男 · 22-28 · 健身
+
+
+ [ 立绘 · 肩上 ] +
小苏 · 文艺女
+
小苏
女 · 22-26 · 文艺
+
+
+ [ 立绘 · 肩上 ] +
文文 · 母亲
+
文文
女 · 30-38 · 母亲
+
+
+ [ 立绘 · 肩上 ] +
老王 · 大叔
+
老王
男 · 45-55 · 大叔
+
+
+ [ 立绘 · 肩上 ] +
萌萌 · Z世代
+
萌萌
女 · 18-22 · Z 世代
+
+
+ [ 立绘 · 肩上 ] +
Leo · 教练
+
Leo
男 · 30-38 · 教练
+
+
+ [ 立绘 · 双人 ] +
闺蜜双人
+
闺蜜组合
双人 · 25-30
+
+
+ +
+ // 还有 40 个模特 · 滚动加载 / 用上方筛选缩小范围 +
+
+ + +
+
+
+

生成上身图 · 子步骤 ②

+

已为你选的每个模特生成 4 张上身图,可多选保留。点 ← 回到「① 挑选模特」改人。

+
+ // STEP 3 / 4 · SUB 2 · WEAR +
+ +
+ // 当前模特: + + + // 切换模特看不同上身效果 +
+ +
+
上身 A · 持物半身
[ A · 持物半身 ]
+
上身 B · 敷面膜中
[ B · 敷面膜中 ]
+
上身 C · 镜前自拍
[ C · 镜前自拍 ]
+
上身 D · 床边特写
[ D · 床边特写 ]
+
+ +
+ + // ~¥0.40 / 4 张 · 已选 2 / 4 张 +
+
+ +
+ + +
+
+
+

预览 · 创建

+

检查下面的素材和信息无误后,点击右下「✓ 创建商品」。

+
+ // STEP 4 / 4 · CONFIRM +
+
+

透真玻尿酸补水面膜

+
// 美妆个护 · ¥39.9 · AI 生成 · 模特: 林夕 + 小七
+
+
原图
+
头图 A
+
上身 A
+
上身 C
+
+
+
+
核心卖点
透明质酸 + B5 · 30g 大容量精华
+
目标人群
22-32 岁女性、熬夜党、敏感肌
+
原图
1 张(已上传)
+
头图
1 张(候选 A · 白底简约)
+
上身图
2 张(A + C · 模特林夕 / 小七)
+
+
+
+
+ +
+
+ + +
+
+
+
+

填写商品信息 · 上传图册

+

已有现成商品图册(主图 + 细节图)的快速通道。一次性填完,直接创建商品。

+
+ // UPLOAD MODE · ALL-IN-ONE +
+
+
+ + +
+
+
+ + +
+
+ + +
+
+
+ +
+ 将图片拖到此处,或 点击上传
+ // 建议 3-6 张 · 1200×1200+ · JPG / PNG +
+
+
主图
+
细节
+
使用
+
+
+
+
+
+ +
    +
  • 1 透明质酸 + B5,敷完不黏不闷
    • +
  • 2 30g 大容量精华液
    • +
  • 3 0 香精 0 酒精,敏感肌可用
    • +
  • +
    • +
+
+
+ + +
+
+
+
+ +
+ + + + +
+
+ + + + + + diff --git a/电商AI平台/products.html b/电商AI平台/products.html new file mode 100644 index 0000000..4d98e7b --- /dev/null +++ b/电商AI平台/products.html @@ -0,0 +1,128 @@ + + + + +商品库 · 流·Studio + + + + + +
+ +
+
+

商品库

+
// 12 SKU · 商品信息会作为脚本和资产生成的素材
+
+
+ + + 新建商品 + +
+
+ +
+
+ + +
+ + + + + + + +
+ +
+
+
补水面膜 · 1200×800
+
+
透真玻尿酸补水面膜
+
美妆个护 · 3 张图
+
熬夜党敏感肌¥39.9
+
+
+
+
蓝牙耳机 · 1200×800
+
+
南卡 Lite Pro 蓝牙耳机
+
数码 3C · 5 张图
+
通勤运动¥199
+
+
+
+
速食牛肉面 · 1200×800
+
+
滋啦速食牛肉面 · 6 桶装
+
食品饮料 · 4 张图
+
加班独居¥49.9
+
+
+
+
防晒霜 · 1200×800
+
+
透真清透物理防晒霜
+
美妆个护 · 4 张图
+
SPF50通勤¥69
+
+
+
+
咖啡冻干粉 · 1200×800
+
+
三顿半同款冻干咖啡粉
+
食品饮料 · 6 张图
+
提神早八¥89/24 颗
+
+
+
+
空气炸锅 · 1200×800
+
+
小熊 4L 可视空气炸锅
+
家电 · 5 张图
+
小户型健康¥159
+
+
+
+
瑜伽裤 · 1200×800
+
+
露露同款裸感瑜伽裤
+
服饰 · 8 张图
+
健身房通勤¥119
+
+
+ +
+
新建商品
+ +
+ +
+ + + + + diff --git a/电商AI平台/projects-new.html b/电商AI平台/projects-new.html new file mode 100644 index 0000000..b5c99fd --- /dev/null +++ b/电商AI平台/projects-new.html @@ -0,0 +1,287 @@ + + + + +新建项目 · 流·Studio + + + + + +
+ +
+
+

新建项目

+
// 商品 → 脚本来源 → 配置 → 确认 · 4 步开始生成
+
+
+ 退出 +
+
+ +
+ + +
+ + + + +
+
+

第 3 步 · 项目配置

+

这些设置会影响 LLM 生成脚本的方向,确认后会进入流水线第 1 步(脚本生成)。

+
+ +
+ + +
+ +
+ +
+

0-10 秒

3-4 镜
黄金完播
完播 52%
+

0-15 秒

4-5 镜
完播率最佳
完播 42%
+

0-30 秒

6-8 镜
卖点详解
完播 32%
+

0-60 秒

10-12 镜
故事化
完播 26%
+
+
数据来源:抖音同品类 TOP 视频均值 · 实际镜头数由 LLM 决定
+
+ +
+ +
+
+

痛点种草

+
用户痛点切入,以「我懂你」的口吻引出产品。
+ 最常用 +
+
+

开箱测评

+
朋友式分享,从开箱到使用感受娓娓道来。
+
+
+

对比展示

+
「用前 vs 用后 / 同类 vs 本品」直观呈现。
+
+
+
+ +
+ +
+

都市白领女性

25-30 岁
大盘消费力
+

闺蜜种草

邻家女孩
复购最高
+

总裁亲选

创始人 IP
30 万销额
+

专业测评师

垂类达人
互动 +30%
+

实用宝妈

家庭决策者
母婴/家清
+

学生党

Z 世代 18-24
平价快消
+
+ +
+ + + +
+ 抖音同人设 TOP 视频更常用 0-10 秒 + 对比展示 + 当前 0-15 秒 · 痛点种草 → 推荐换为学生党最优组合 +
+ + +
+
+ +
+ +
+ 透明质酸 + B5 + 30g 大容量精华 + + 0 香精 0 酒精 +
+
+
+ +
+ +
+ // 下一步:确认与计费 + 下一步 +
+
+
+ + + +
+ +
+ + + + diff --git a/电商AI平台/projects.html b/电商AI平台/projects.html new file mode 100644 index 0000000..2d5fab2 --- /dev/null +++ b/电商AI平台/projects.html @@ -0,0 +1,523 @@ + + + + +视频项目 · 流·Studio + + + + + +
+ +
+
+

视频项目

+
// 12 个 · 3 进行中 · 8 完成 · 1 失败
+
+
+ + + 新建项目 + +
+
+ +
+
全部 12
+
进行中 3
+
已完成 8
+
失败 1
+
+ +
+
+ + +
+ + + + +
+ + +
+
+ +
// 显示 12 / 12 个项目
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
项目商品脚本来源进度状态更新于
+
+
9:16
+
补水面膜 · 痛点种草 · v3
6 镜 · 0-15s
+
+ 		透真补水面膜AI 全生 +
+
+ 3/5 +
+ 		故事板 待确认12 分钟前 +
+ + +
+
+
+
9:16
+
速食牛肉面 · 加班治愈
4 镜 · 0-12s
+
+ 		滋啦速食 · 6 桶装一句话主题 +
+
+ 2/5 +
+ 		资产生成中37 分钟前
+
+
9:16
+
透真防晒 · 通勤对比
6 镜 · 0-18s
+
+ 		透真清透防晒霜AI 全生 +
+
+ 4/5 +
+ 		视频生成 4/62 小时前
+
+
9:16
+
咖啡冻干 · 早八剧情
5 镜 · 0-15s
+
+ 		三顿半同款冻干一句话主题 +
+
+ 3/5 +
+ 		故事板生成失败昨天 18:42
+
+
9:16
+
蓝牙耳机 · 开箱测评
5 镜 · 0-15s
+
+ 		南卡 Lite Pro自带脚本 +
+
+ 5/5 +
+ 		已完成5 月 7 日
+
+
9:16
+
瑜伽裤 · 通勤穿搭
5 镜 · 0-15s
+
+ 		露露同款瑜伽裤AI 全生 +
+
+ 5/5 +
+ 		已完成5 月 6 日
+
+
9:16
+
空气炸锅 · 小户型
4 镜 · 0-12s
+
+ 		小熊 4L 空气炸锅一句话主题 +
+
+ 5/5 +
+ 		已完成5 月 4 日
+
+
9:16
+
补水面膜 · 痛点种草 · v1
6 镜 · 0-15s
+
+ 		透真补水面膜AI 全生 +
+
+ 5/5 +
+ 		已归档4 月 28 日
+
+ + + + + +
+
+ +
+

没有匹配的项目

+

// 试试切换 tab 或修改搜索词

+
+ +
+ + + +