diff --git a/v2/DESIGN_SPEC_V2.md b/v2/DESIGN_SPEC_V2.md deleted file mode 100644 index 834b55b..0000000 --- a/v2/DESIGN_SPEC_V2.md +++ /dev/null @@ -1,952 +0,0 @@ -# 流·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/v2/account.html b/v2/account.html deleted file mode 100644 index 7eaab31..0000000 --- a/v2/account.html +++ /dev/null @@ -1,170 +0,0 @@ - - - - -账户 · 流·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/v2/asset-factory.html b/v2/asset-factory.html deleted file mode 100644 index 17f3730..0000000 --- a/v2/asset-factory.html +++ /dev/null @@ -1,900 +0,0 @@ - - - - -图片生成 · 流·Studio - - - - - -
- -
-
-

图片生成

-
- // 一键生成 - · - 电商视觉素材,提升内容制作效率 -
-
-
- - -
- - -
- - - -
-
- [ MODEL · TRY-ON ] -
模特上身图
-
选择模特,AI 生成商品模特上身效果图
- -
    -
  • - - - - 支持多模特选择 -
    • -
  • - - - - 一次生成 4 张 -
    • -
  • - - - - 支持多商品并行 -
    • -
- -
- - 开始生成 - - - [ ≈ ¥0.30 / 张 ] -
-
- -
-
Ava · 9:16
-
-
变体 01
-
变体 02
-
变体 03
-
-
-
-
- - -
- - - -
-
- [ PLATFORM · KIT ] -
平台套图
-
选择平台模板,AI 生成电商平台套图
- -
    -
  • - - - - 覆盖主流电商平台 -
    • -
  • - - - - 一键生成 4 张套图 -
    • -
  • - - - - 智能排版设计 -
    • -
- -
-
DY抖音
-
TB淘宝
-
XHS小红书
-
PDD拼多多
-
AMZ亚马逊
-
- -
- - 开始生成 - - - [ ≈ ¥0.50 / 张 ] -
-
- -
-
套图 / TB
-
套图 / DY
-
套图 / XHS
-
套图 / PDD
-
-
-
- - -
- - - -
-
- [ TRI-VIEW · OPTIMIZE ] -
图片优化
-
为人物 / 商品生成三视图,保证多镜头一致性
- -
    -
  • - - - - 人物 · 商品 全支持 -
    • -
  • - - - - 正面 / 侧面 / 背面 一次输出 -
    • -
  • - - - - 多镜头一致性保证 -
    • -
- -
- - 开始生成 - - - [ ≈ ¥0.40 / 组 ] -
-
- -
-
正面
-
侧面
-
背面
-
-
-
- -
- - -
-

任务中心

- // 0 个 · 0 生成中 · 0 已完成 · 0 失败 -
- - -
-
全部 0
-
生成中 0
-
已完成 0
-
失败 0
-
- - -
-
- - -
-
- -
-
- - -
- - -
-
- -
// 显示 0 / 0 个任务
- - -
- - - - - - - - - - - - -
任务类型进度状态创建于
-
- - - - -
- - - - - - - - - diff --git a/v2/assets/new-product-drawer.js b/v2/assets/new-product-drawer.js deleted file mode 100644 index f62dd03..0000000 --- a/v2/assets/new-product-drawer.js +++ /dev/null @@ -1,578 +0,0 @@ -/* ============================================================ - 新建商品 · 共享 Drawer 模块 - ---------------------------------------------------------- - 在任意页面只需 - - diff --git a/v2/index.html b/v2/index.html deleted file mode 100644 index 3c3c4fb..0000000 --- a/v2/index.html +++ /dev/null @@ -1,176 +0,0 @@ - - - - -工作台 · 流·Studio - - - - - -
- -
-
-

欢迎回来，小李

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

最近项目

- [ ALL · 8 ] -
-
- -
9:16
-
-
补水面膜 · 痛点种草
-
补水面膜 / AI 全生 / 6 镜
-
-
- 故事板 待确认 - 继续 - - -
9:16
-
-
蓝牙耳机 · 开箱测评
-
南卡 Lite Pro / 自带脚本 / 5 镜
-
-
- 已完成 - 打开 - - -
9:16
-
-
速食牛肉面 · 一句话主题
-
滋啦速食 / 一句话 / 4 镜
-
-
- 资产生成中 - 继续 - - -
9:16
-
-
防晒霜 · 对比展示
-
透真防晒 / AI 全生 / 6 镜
-
-
- 视频生成 4/6 - 继续 - - -
9:16
-
-
咖啡冻干粉 · 剧情带货
-
三顿半同款 / 一句话 / 5 镜
-
-
- 故事板失败 - 查看 - -
-
- -
-
-

快捷入口

[ /shortcuts ]
-
- -
-
商品库
7 SKU
- - -
-
资产库
人 8 · 景 14 · 片 8
- - -
-
充值
¥327.40
- - -
-
所有项目
8 个
- -
-
-
-

提示

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

资产库

-
// 跨项目复用 · 0 人 · 0 景 · 0 商 · 0 片
-
-
- - -
-
- -
-
人物 0
-
场景 0
-
商品图 0
-
成片 0
-
我的上传 0
-
- -
-
- - -
- - -
- -
-
-
- -
-
-
- -
-
- - -
- -
-
- - -
- -
-
- - -
- -
-
-
- -
-
- - -
- -
-
- - -
- -
-
- - - - - -
- -
-
-
- -
// 显示 0 / 0 个资产
- - -
-
- - -
林夕 · 都市白领
-
-
林夕
-
女 · 青年 · 都市白领 · 用过 4 次
-
-
-
- - -
阿楠 · 同事女
-
-
阿楠
-
女 · 青年 · 都市白领 · 用过 2 次
-
-
-
- - -
小七 · 学生女
-
-
小七
-
女 · 青年 · 学生 · 用过 3 次
-
-
-
- - -
阿杰 · 通勤男
-
-
阿杰
-
男 · 青年 · 都市白领 · 用过 2 次
-
-
-
- - -
妈妈 · 居家
-
-
妈妈 · 王姐
-
女 · 中年 · 居家 · 用过 1 次
-
-
-
- - -
阿强 · 健身男
-
-
阿强
-
男 · 青年 · 健身 · 用过 2 次
-
-
-
- - -
小苏 · 文艺女
-
-
小苏
-
女 · 青年 · 文艺 · 用过 1 次
-
-
-
- - -
闺蜜组合 · 双人
-
-
闺蜜组合
-
女 · 青年 · 都市白领 · 用过 1 次
-
-
-
- - -
豆豆 · 幼儿
-
-
豆豆
-
女 · 幼年 · 居家 · 用过 2 次
-
-
-
- - -
小宇 · 中学生
-
-
小宇
-
男 · 少年 · 学生 · 用过 1 次
-
-
-
- - -
李爷爷 · 居家
-
-
李爷爷
-
男 · 老年 · 居家 · 用过 1 次
-
-
-
- - - - - - - - - - - - - -
-
- -
-

没有匹配的资产

-

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

-
- - - - - - - -
- - - - - -
- 已选 0 项 - - - - -
- - - - - diff --git a/v2/model-photo.html b/v2/model-photo.html deleted file mode 100644 index 795dbe8..0000000 --- a/v2/model-photo.html +++ /dev/null @@ -1,1961 +0,0 @@ - - - - -模特上身图 · 流·Studio - - - - - -
- -
-
-

模特上身图

-
// 选商品 + 选模特 → 生成 AI 上身效果图 · 失败不扣费,采纳入库才计费
-
-
- - - 返回图片生成 - -
-
- -
- - -
-
- 历史任务 - 0 - -
-
-
- - -
- - -
-
- 1 - 选择商品 -
-
- -
- -
- - -
-
- 2 - 选择模特 - 全部模特 → -
-
-
-
-
Ava
-
Ava
-
亚洲·25岁·清新
-
-
-
-
Luna
-
Luna
-
亚洲·22岁·学生
-
-
-
-
Mia
-
Mia
-
混血·28岁·OL
-
-
-
-
Zoe
-
Zoe
-
亚洲·30岁·健身
-
-
- - 上传我的模特 -
-
-
- - -
-
- 3 - 生成设置 -
-
-
// 生成数量 (每模特)
-
- - - -
-
-
-
// 图片比例
-
- - - -
-
-
- - -
- -
// 满意后点 [入资产库] 才扣费 · 失败不扣
-
- -
- - -
-
-
- 已选商品 - 补水保湿精华液 -
-
- 已选模特 - Ava (亚洲·25岁·清新) - 更换模特 -
-
- 生成 - 4 张 · 1:1 -
-
- -
- -
待生成 · 1:1
-
待生成 · 1:1
-
待生成 · 1:1
-
待生成 · 1:1
-
- -
- // 生成结果默认不入资产库,每张图采纳后点 [入资产库] 才扣费并保存 -
// 任务进度可在 任务中心 → 查看 -
-
- -
-
- - -
-
-
-

商品库

- // 共 7 个商品 -
- -
-
-
- -
-
-
- - -
- -
-
-
- -
-
-
-
-
-
// 已选 0 个商品
- - -
-
-
- - -
- - - -
-
-
-

模特库

- -
-
- -
-
-
- 性别 - - - -
-
- 年龄 - - - -
- -
-
-
- -
-
-
-
-
-
- - -
-
-
-

模特详情

- -
-
-
-
-
—
-
立绘 · 3:4
-
-
-
角色属性
-
- // 文化区域— - // 气质 — - // 性别 — - // 体格 — - // 年龄段 — - // 身高 — - // 肤色 — - // 发长 — - // 发色 — - // 来源 — -
-
-
-
全身三视图
-
-
正面
-
侧面
-
背面
-
-
-
- - -
-
-
- - - - - - diff --git a/v2/pipeline.html b/v2/pipeline.html deleted file mode 100644 index d96758e..0000000 --- a/v2/pipeline.html +++ /dev/null @@ -1,1737 +0,0 @@ - - - - -补水面膜 · v3 · 流水线 · 流·Studio - - - - - -
- - -
-
-
9:16
-
-
-

补水面膜 · 痛点种草 · v3

- 进行中 -
-
// 透真补水面膜 · AI 全生 · 待生成镜头脚本 · 9:16
-
-
-
- - - -
-
- - -
- -
1
脚本
进行中
 -
-
2
基础资产
待开始
 -
-
3
故事板
待开始
 -
-
4
视频
待开始
 -
-
5
拼接导出
待开始
 -
- - -
-
-
-
- 镜头脚本 - · 空 · 待生成 -
-
- -
-
- -
-
-
AI
- 脚本助手 - · GPT-4o - - -
-
- -
-
- -
- - - -
-
-
-
- -
-
[ LLM 用量 ~2.4k tokens · ¥0.04 ]
-
- - -
-
-
- - -
-
-
-
商品3 张
-
人物2/2
-
场景3/3
-
- 基础资产是后续故事板的素材。所有卡片同时展示,点左侧分类直接定位。 -

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

商品 · 透真补水面膜

- -
-
-
-
透真补水面膜 · 主图
-
-
透真补水面膜缺三视图
-
- - -
-
-
-
-
// 三视图预览 · 生成中
-
-
-
-
-
- - -
-
-

人物 · 2 个

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

场景 · 3 个

- - -
- -
-
-
深夜办公桌
-
-
深夜办公桌
-
深夜居家办公环境,木质书桌,台灯暖光,电脑屏幕亮着。
-
- - - -
-
-
-
-
床头特写
-
-
卧室床头
-
米白色床品,木质床头柜,闹钟显示晚间时间。
-
- - - -
-
-
-
-
-
-
!
- 生成失败 -
-
-
-
通勤地铁失败
-
早高峰地铁车厢,光线偏冷,年轻通勤族,氛围紧张。
-
- - - -
-
-
-
- -
-
-
- -
-
[ 已确认 ¥0.85 · 待生成 ¥0.20 · 失败 ¥0(不扣) ]
-
- - -
-
-
- - -
-
- -
-
-
-
- -
-
未选择
-
- -
-
-
- 故事板 · 场 1 - - 已生成 -
-
- 整张故事板由 image-2 一次性输出,包含画面 + 镜头说明。如需修改请编辑下方提示词整张重跑(不能局部改)。 -
- -
// 本场提示词
-
- -
- - - - ~¥0.45/场 -
- -
-
// 历史版本(0)
-
-
// 暂无历史版本
-
-
- -
- -
// 绑定的资产
-
- 林夕(人物) - 深夜办公桌(场景) -
-
-
-
- -
-
[ image-2 单场 ¥0.45 · 累计 ¥1.35 ]
-
- - -
-
-
- - -
-
-
-
视频生成 · 3 / 3 完成
-
// 每场 Seedance 约 15 秒 · 已完成所有场次
-
-
- 100% - -
- -
-
-
- 场 1 · 0-15s -
-
-
-
场 1 · 深夜办公桌完成
-
15s · 1080×1920 · ¥0.45
-
- - -
-
-
-
-
- 场 2 · 15-27s -
-
-
-
场 2 · 面膜包装/特写完成
-
12s · 1080×1920 · ¥0.45
-
- - -
-
-
-
-
- 场 3 · 27-40s -
-
-
-
场 3 · 化妆台/产品定格完成
-
13s · 1080×1920 · ¥0.45
-
- - -
-
-
-
- -
-
[ 已完成 3 场 · 累计 ¥1.35 · 总时长 40s ]
-
- - -
-
-
- - -
-
-
-

视频详情

- // 场 1 · 15s - -
-
-
-
-
大视频预览
-
-
-
// 基础信息
-
-
-
// 历史版本 · 3 版
-
-
-
// 点击历史略缩切换 · 「采用此版」标记当前展示版为最终采用
-
-
-
-
- - - -
-
-
- - -
-
-
-
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 ]
-
- - - -
-
-
- - -
-
-
-

资产详情

- // kind - -
-
-
-
-
立绘
-
// 三视图
-
-
正面
-
侧面
-
背面
-
-
-
-
// 基础信息
-
- -
-
-
-
- - -
-
-
- - -
-
-
-

新增人物

- // 立绘必填 + 三视图(可 AI 生成) - -
-
-
- - -
-
-
-
// 立绘*
-
- - 点击上传立绘 - PNG / JPG · ≤10MB -
-
-
-
// 三视图(可选)
-
-
正面
-
侧面
-
背面
-
-
- - 没有三视图?上传立绘后用 AI 自动生成 - -
-
-
-
-
- - -
-
-
- - -
-
-
-

模特库

- // 共 0 个 - -
-
- -
-
- -
-
-
- -
-
-
-
-
-
- -
- - - - diff --git a/v2/platform-cover.html b/v2/platform-cover.html deleted file mode 100644 index f52a04b..0000000 --- a/v2/platform-cover.html +++ /dev/null @@ -1,1360 +0,0 @@ - - - - -平台套图 · 流·Studio - - - - - -
- -
-
-

平台套图

-
// 选商品 + 选平台 → 生成 AI 套图 · 失败不扣费,采纳入库才计费
-
-
- - - 返回图片生成 - -
-
- -
- - -
-
- 历史任务 - 0 - -
-
-
- - -
- - -
-
- 1 - 选择商品 -
-
- -
- -
- - -
-
- 2 - 选择平台 -
-
-
-
- -
抖音电商
-
-
-
- -
淘宝
-
-
-
- -
天猫
-
-
-
- -
京东
-
-
-
- -
拼多多
-
-
-
- -
小红书
-
-
-
- -
快手
-
-
-
- -
视频号
-
-
-
- -
亚马逊
-
-
-
- -
1688
-
-
-
- - -
-
- 3 - 生成设置 -
-
-
// 生成数量
-
- - - -
-
-
- - -
- -
// 满意后点 [入资产库] 才扣费 · 失败不扣
-
- -
- - -
-
-
已选商品补水保湿精华液
-
已选平台抖音电商 / 淘宝
-
生成4
-
-
- -
-
- // 生成结果默认不入资产库,满意后点 [入资产库] 才扣费并保存 -
// 任务进度可在 任务中心 → 查看 -
-
- -
-
- - -
- - - -
-
-
-

商品库

- // 共 7 个商品 -
- -
-
-
- -
-
-
- - -
- -
-
-
-
-
-
-
-
// 已选 0 个商品
- - -
-
-
- - - - - - - diff --git a/v2/product-create-upload.html b/v2/product-create-upload.html deleted file mode 100644 index 8b79fae..0000000 --- a/v2/product-create-upload.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - -新建商品 · 跳转中... - - - - diff --git a/v2/product-create-v2.html b/v2/product-create-v2.html deleted file mode 100644 index c923e81..0000000 --- a/v2/product-create-v2.html +++ /dev/null @@ -1,413 +0,0 @@ - - - - -新建商品 · 流·Studio - - - - - -
- -
-
-

新建商品

-
// 上传原图 + 填写基本信息 · 保存后可在工作台逐步丰富素材
-
-
- - -
- - -
-
-

商品原图

- 必填 -
-
// 1-5 张 · 这是后续所有 AI 生成的源材料
- -
-
- - 建议上传 正面 / 侧面 / 细节 / 包装 4 张,后续在工作台生成的白底三视图更准确。 -
-
- - -
-
-

基本信息

- 必填 -
-
- - -
-
- - -
-
- - -
-
- -
- -
-
-

卖点 & 人群

- 选填 · 推荐 -
-
- - 填上这两项,后续 AI 生脚本(痛点种草 / 剧情带货 等模板)质量明显更高 —— 系统会用卖点构造钩子,用人群定语气。现在不填也可以,做视频项目时仍可补。 -
- -
- -
3-5 条要点,回车添加
-
    -
  • +
    • -
-
-
- - -
-
- - -
- // 必填检查:商品名 / 品类 / ≥1 张图 未完成 -
- 取消 - -
-
- -
- - - - diff --git a/v2/product-create.html b/v2/product-create.html deleted file mode 100644 index 293ea22..0000000 --- a/v2/product-create.html +++ /dev/null @@ -1,54 +0,0 @@ - - - - -新建商品 · 流·Studio - - - - - - - - -
-
正在打开「新建商品」…
-
如未自动跳转,点击这里
-
- - - diff --git a/v2/product-create.legacy.html b/v2/product-create.legacy.html deleted file mode 100644 index f3f92b3..0000000 --- a/v2/product-create.legacy.html +++ /dev/null @@ -1,3883 +0,0 @@ - - - - -新建商品 · 流·Studio - - - - - - - -
- - -
- - - - - - - - diff --git a/v2/product-detail.html b/v2/product-detail.html deleted file mode 100644 index 040abaa..0000000 --- a/v2/product-detail.html +++ /dev/null @@ -1,1359 +0,0 @@ - - - - - - - -商品详情 · 流·Studio - - - - - -
- - -
-

补水保湿精华液

-
- - -
- -
-
- 商品信息 - - - -
- - - -
-
- -
- -
-
-
商品名称
-
- 补水保湿精华液 - -
-
-
-
品类
-
- 美妆个护 / 精华液 - -
-
-
-
目标人群
-
- 22-32 岁女性、敏感肌、办公室通勤 - -
-
-
-
核心卖点
-
-
- 透明质酸 + B5,敷完不黏不闷 - 30g 大容量精华液 - 0 香精 0 酒精,敏感肌可用 -
-
    - -
-
-
-
- -
-
- 商品图片 - (6) -
-
-
1:1
-
1:1
-
1:1
-
1:1
-
1:1
-
1:1
-
- -
-
-
- -
-
- -
-
快速操作
-
-
// 图片生成
-
-
- - 模特上身图 -
-
- - 平台套图 -
-
- - 图片优化 -
-
-
-
-
// 视频生成
-
-
- - 生成视频 -
-
-
-
- -
- - -
- - - -
- - -
- -
-
全部 AI 素材 (32)
- - -
-
- - -
- -
-
- -
-
模特上身图3:4
通过2026-05-19 15:30
-
模特上身图3:4
通过2026-05-19 15:30
-
模特上身图3:4
不通过2026-05-19 15:30
-
模特上身图3:4
通过2026-05-19 15:30
-
模特上身图3:4
归档2026-05-19 15:30
-
平台套图3:4
通过2026-05-19 15:30
-
平台套图3:4
通过2026-05-19 15:30
-
平台套图3:4
不通过2026-05-19 15:30
-
平台套图3:4
归档2026-05-19 15:30
-
平台套图3:4
通过2026-05-19 15:30
-
三视图3:4
通过2026-05-19 15:30
-
三视图3:4
归档2026-05-19 15:30
-
- -
-
- - -
-
-
该商品视频项目 (4)
- -
- -
-
- -
-
视频 · 9:16补水面膜 · v3
通过2026-05-20 12:08
-
视频 · 9:16补水面膜 · v2
通过2026-05-19 10:24
-
视频 · 9:16熬夜急救 · v1
归档2026-05-18 21:42
-
视频 · 9:16补水面膜 · v1
不通过2026-05-17 16:00
-
- -
-
- - -
- - -
-
-
// TOTAL
-
12 个任务
-
-
-
// SUCCESS
-
9
-
-
-
// RUNNING
-
2
-
-
-
// FAILED
-
1
-
-
- - -
-
任务记录 (12)
- - - -
- -
-
- - -
-
- - 任务 / 编号 - 数量 - 状态 - 提交时间 - 完成时间 - 耗时 - 操作 -
- -
-
-
视频素材 // T-2026-0519-0007
-
1 个
-
- 生成中 60% - -
-
2026-05-19 16:00
-
—
-
—
-
- - -
-
- -
-
-
模特上身图 // T-2026-0519-0006
-
3 张
-
- 排队中 -
-
2026-05-19 15:58
-
—
-
—
-
- - -
-
- -
-
-
模特上身图 // T-2026-0519-0005
-
5 张
-
- 已完成 -
-
2026-05-19 15:30
-
2026-05-19 15:32
-
2m 14s
-
- -
-
- -
-
-
平台套图 // T-2026-0519-0004
-
4 张
-
- 已完成 -
-
2026-05-19 14:20
-
2026-05-19 14:23
-
3m 02s
-
- -
-
- -
-
-
模特上身图 // T-2026-0519-0003
-
4 张
-
- 已完成 -
-
2026-05-19 13:10
-
2026-05-19 13:13
-
2m 50s
-
- -
-
- -
-
-
三视图 // T-2026-0519-0002
-
3 张
-
- 失败 -
-
2026-05-19 12:00
-
2026-05-19 12:01
-
30s
-
- - -
-
- -
-
-
平台套图 // T-2026-0518-0001
-
6 张
-
- 已完成 -
-
2026-05-18 18:42
-
2026-05-18 18:46
-
4m 10s
-
- -
-
- -
- -
-
- -
- - - - - diff --git a/v2/product-studio.html b/v2/product-studio.html deleted file mode 100644 index 6404f70..0000000 --- a/v2/product-studio.html +++ /dev/null @@ -1,1082 +0,0 @@ - - - - -商品工作台 · 流·Studio - - - - - -
- -
-
-

透真补水面膜

-
// 商品工作台 · 已生成 11 张资产 · 创建于 5/19
-
-
- - - 返回商品库 - - - - - 创建视频项目 - -
-
- - - - - -
-
-
-
- -
-
-
透真玻尿酸补水面膜
-
[ 美妆个护 ] · ¥39.9 · 22-32 岁女性
-
- -
-
- 熬夜党 - 敏感肌 - 补水 - 玻尿酸 - 通勤 -
-
- // 卖点 - 玻尿酸双效保湿 · 4 小时持久水润 · 敏感肌可用 · 通勤补水 · 平价代替 -
-
- -
-
- 原图册 · 3 / 5 - JPG / PNG · ≤ 5MB -
-
-
- MAIN -
-
-
-
- -
-
-
-
- - -
-

AI 工具箱

- // 按需调用 · 生成结果自动入资产库 · 失败不扣费 -
-
- -
-
- -
-
-
白底三视图
-
正/侧/背 · Seedance 效果 +60%
-
-
- ~18 秒 · ¥1.6 - -
-
- -
-
- -
-
-
AI 模特上身图
-
8 模特库可选 · 每次 4 张
-
-
- ~35 秒 · ¥3.2 - -
-
- -
-
- -
-
-
平台套图
-
6 平台规格 · 每平台 4 张
-
-
- ~28 秒 · ¥2.4 - -
-
- -
-
- -
-
-
更多工具
-
卖点海报 / 详情页插画
-
-
- 即将上线 -
-
- -
- - -
-
-

已生成资产

- // 自动入「资产库 / 跨项目共享 / 商品图」 -
-
- - - - -
-
-
- -
- - -
-
- -
-
-
选择模特
// 系统已有 8 位模特 · 每次生成 4 张上身图
- -
-
-
-
-
- -
- 室内自拍 - 梳妆台 - 户外清晨 - 纯色背景 -
-
-
- -
- 半身 - 特写 - 全身 -
-
-
- - 4 张 · 不满意可原地重跑 -
-
-
-
- // 预计耗时 35 秒 · ¥3.2 · 失败不扣费 - - -
-
-
- - -
-
- -
-
-
选择平台
// 按平台调性 + 比例生成 · 每平台 4 张
- -
-
-
-
-
- -
- 主图(1:1) - 详情页头图(750×1000) - 活动横幅(750×260) -
-
-
- -
- 干净电商 - 种草风 - 节日热闹 -
-
-
- - 4 张 · 不满意可原地重跑 -
-
-
-
- // 预计耗时 28 秒 · ¥2.4 · 失败不扣费 - - -
-
-
- - -
-
- -
-
-
生成白底三视图
// 一次出 3 张 · 正面 / 侧面 / 背面
- -
-
-
- AI 会以「主图」为基准,自动去白底 + 重打光 + 推算另外两个视角。商品形态尽量保持稳定。 -
-
-
- -
- 正面 - 侧面 - 背面 -
-
-
- -
- 纯白 - 浅灰 - 柔和渐变 -
-
-
-
-
- // 预计 18 秒 · ¥1.6 - - -
-
-
- - - - - diff --git a/v2/products.html b/v2/products.html deleted file mode 100644 index fb963e2..0000000 --- a/v2/products.html +++ /dev/null @@ -1,1787 +0,0 @@ - - - - -商品库 · 流·Studio - - - - - -
- -
-
-

商品库

-
// 0 SKU · 商品信息会作为脚本和资产生成的素材
-
-
- - -
-
- - -
- - -
-
- - -
-
- -
-
-
- -
-
- -
- -
- // 显示 7 / 7 个商品 -
- - -
-
- - -
-
-
- - -
补水面膜 · 1200×800
-
-
透真玻尿酸补水面膜
-
美妆个护
-
2026-05-15 创建
-
-
- - - 素材 124 - - · - - - 视频 36 - - -
-
- -
- - -
蓝牙耳机 · 1200×800
-
-
南卡 Lite Pro 蓝牙耳机
-
数码 3C
-
2026-05-12 创建
-
-
- - - 素材 96 - - · - - - 视频 28 - - -
-
- -
- - -
速食牛肉面 · 1200×800
-
-
滋啦速食牛肉面 · 6 桶装
-
食品饮料
-
2026-05-10 创建
-
-
- - - 素材 96 - - · - - - 视频 24 - - -
-
- -
- - -
防晒霜 · 1200×800
-
-
透真清透物理防晒霜
-
美妆个护
-
2026-05-08 创建
-
-
- - - 素材 76 - - · - - - 视频 18 - - -
-
- -
- - -
咖啡冻干粉 · 1200×800
-
-
三顿半同款冻干咖啡粉
-
食品饮料
-
2026-05-05 创建
-
-
- - - 素材 68 - - · - - - 视频 21 - - -
-
- -
- - -
空气炸锅 · 1200×800
-
-
小熊 4L 可视空气炸锅
-
家居家电
-
2026-05-03 创建
-
-
- - - 素材 54 - - · - - - 视频 16 - - -
-
- -
- - -
瑜伽裤 · 1200×800
-
-
露露同款裸感瑜伽裤
-
运动户外
-
2026-04-30 创建
-
-
- - - 素材 42 - - · - - - 视频 12 - - -
-
-
- -
-
- -
-

没有匹配的商品

-

// 试试切换分类或修改搜索词

-
-
- - - - -
- -
- - -
- - - - - - - - - -
- 已选 0 项 - - - - -
- - - - - diff --git a/v2/projects-new.html b/v2/projects-new.html deleted file mode 100644 index 6d16bf6..0000000 --- a/v2/projects-new.html +++ /dev/null @@ -1,1231 +0,0 @@ - - - - -新建项目 · 流·Studio - - - - - -
- -
-
-

新建项目

-
// 商品 → 配置 · 2 步开始生成
-
-
- 退出 -
-
- -
- -
- -
- -
- - -
-
-
-

商品库

- -
- -
-
-
- -
-
-
- - -
- -
-
-
-
-
-
-
-
// 单选:点击商品即选用,自动关闭
- -
-
-
- - - - - - - - diff --git a/v2/projects.html b/v2/projects.html deleted file mode 100644 index ae638d1..0000000 --- a/v2/projects.html +++ /dev/null @@ -1,1063 +0,0 @@ - - - - -视频项目 · 流·Studio - - - - - -
- -
-
-

视频项目

-
// 0 个 · 0 进行中 · 0 完成 · 0 失败
-
-
- - - - 新建项目 - -
-
- -
-
全部 0
-
进行中 0
-
已完成 0
-
失败 0
-
已归档 0
-
- -
-
- - -
-
- -
-
-
- -
-
-
- -
-
- - -
- - -
-
- -
// 显示 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 或修改搜索词

-
- -
- - - - - - - -
- 已选 0 项 - - - - -
- - diff --git a/v2/settings.html b/v2/settings.html deleted file mode 100644 index ef34250..0000000 --- a/v2/settings.html +++ /dev/null @@ -1,524 +0,0 @@ - - - - -设置 · 流·Studio - - - - - -
- -
-
-

设置

-
// 个人信息 · 偏好 · 通知 · 安全
-
-
- - -
-
- -
- - - - -
- -
-

个人信息

-
// 头像、姓名、联系方式 · 邮箱用于接收通知
- -
-
头像
-
-
-
李
-
- - -
-
-
-
-
-
显示名称*
-
-
-
-
登录邮箱
-
- - -
-
-
-
手机号
-
- - -
-
-
-
所属团队
// 一人一团队
-
- 小李的店 - 超管 · 创建者 - 管理团队 → -
-
-
-
用户 ID
// 不可改
-
USR-2026-A8F2-001
-
-
- - -
-

安全

-
// 登录密码、双因素、在用设备
- -
-
登录密码
-
- ●●●●●●●●●● - 上次修改 2026-04-12 - -
-
-
-
两步验证
// 推荐开启
-
- - 短信 + Authenticator -
-
- -

在用设备

-
// 不在此列表上的设备登录会触发短信告警
-
-
-
-
-
MacBook Pro · ChromeCURRENT
-
// 上海 · 2026-05-21 14:08 · IP 116.xxx.xxx.42
-
-
- 当前会话 -
-
-
-
-
iPhone 15 · Safari
-
// 上海 · 2026-05-20 21:43
-
-
- -
-
-
-
-
Windows · Edge
-
// 杭州 · 2026-05-18 09:12
-
-
- -
-
-
- -
-
- - -
-

通知

-
// 邮件、短信、站内提示开关
- -
-
项目完成通知
// 视频导出后
-
- - 站内 · 邮件 · 短信 -
-
-
-
任务失败告警
-
- - 站内 · 邮件 -
-
-
-
额度不足提醒
// 团队或个人剩余 < 20%
-
- - 站内 · 短信 -
-
-
-
异地登录告警
-
- - 短信 -
-
-
-
营销 / 产品更新
-
- - 邮件 -
-
-
- - -
-

创作默认

-
// 新建项目时的预填值,可在向导中改
- -
-
默认模板
-
-
-
痛点种草
// 30s 默认档
-
开箱测评
// 45s 默认档
-
对比展示
// 45s 默认档
-
教程演示
// 60s 默认档
-
剧情带货
// 60s 默认档
-
-
-
-
-
默认时长档
-
-
- 30s - 45s - 60s -
- // 60s = 4 段 × 15s -
-
-
-
默认字幕样式
-
-
-
大字综艺
// 抖音热门
-
简洁电商
// 信息清晰
-
高级排版
// 居中衬线
-
弹幕轻量
// 滚动出现
-
强调爆款
// 高对比
-
-
-
-
-
默认 BGM 库
-
- -
-
-
-
默认转场
-
- -
-
-
-
导出水印
// VIP 可关闭
-
- - 右下角 · 流·Studio - 升级 VIP → -
-
-
- - -
-

显示

-
// 界面外观与语言
- -
-
外观
-
- -
-
-
-
语言
-
- -
-
-
-
表格密度
-
- -
-
-
- - -
-

危险操作

-
// 这些操作不可撤销,请确认后再执行
- -
-
导出我的数据
// 项目 + 资产元数据
-
- // 准备时间约 24 小时,完成后邮件通知 - -
-
-
-
退出登录
-
- // 仅退出当前设备,数据保留 - -
-
-
-
注销账号
-
- // 团队余额清零、所有项目作为孤儿归档 - -
-
-
- -
- // 流·Studio · v2.1 · build 20260521 -
-
-
- -
- - - - diff --git a/v2/studio-v2.html b/v2/studio-v2.html deleted file mode 100644 index 307a242..0000000 --- a/v2/studio-v2.html +++ /dev/null @@ -1,1402 +0,0 @@ - - - - -商品工作台 V2 · 流·Studio - - - - - -
- -
- - - - -
-
- -
- - -
-
-
-
-
选择模特
// 8 位模特可选
-
- -
-
-
-
-
- -
-
-
-
- // ~35 秒 · ¥3.2 - - -
-
-
-
- - - - - diff --git a/v2/studio.html b/v2/studio.html deleted file mode 100644 index a6a116f..0000000 --- a/v2/studio.html +++ /dev/null @@ -1,1634 +0,0 @@ - - - - -商品工作台 · 流·Studio - - - - - -
- -
- - - - -
-
- -
- - -
-
-
-
-
生成白底三视图
// 透真补水面膜
- -
-
-
- AI 会以「主图」为基准,自动去白底 + 重打光 + 推算另外两个视角。 -
-
-
- -
- 正面 - 侧面 - 背面 -
-
-
- -
- 纯白 - 浅灰 - 柔和渐变 -
-
-
-
-
- // 预计 18 秒 · ¥1.6 - - -
-
-
- -
-
-
-
-
选择模特
// 8 位模特 · 每次 4 张
- -
-
-
-
-
- // 预计 35 秒 · ¥3.2 · 失败不扣费 - - -
-
-
- -
-
-
-
-
选择平台
// 每平台 4 张
- -
-
-
-
-
- // 预计 28 秒 · ¥2.4 · 失败不扣费 - - -
-
-
- - - - - diff --git a/v2/team.html b/v2/team.html deleted file mode 100644 index d5af136..0000000 --- a/v2/team.html +++ /dev/null @@ -1,518 +0,0 @@ - - - - -团队 · 流·Studio - - - - - -
- -
-
-

团队管理

-
// 成员 · 角色 · 额度 · 共享资产库
-
-
- - -
-
- - -
- - - - - - - -
- -
- -
-
-
-

成员列表 // 5 人 · 1 超管 / 1 团管 / 3 成员

- - -
- - - - - - - - - - - - - - -
成员角色每日额度月度额度当月已用操作
-
-
- - -
-
-

角色权限

-
// PRD §10.2 权限矩阵节选
- - - - - - - - - - - - - - -
能力超管团管成员
邀请 / 移除成员✓✓—
设置成员额度✓✓—
团队充值✓——
设置月限额✓——
编辑别人项目✓✓—
团队共享资产库管理✓✓仅自传
查看团队消费明细✓✓仅自己
创建项目 / 用 AI 流程✓✓✓
-
- -
-

额度预检规则

-
// 任一不通过即拦截
-
-
1个人日剩余 ≥ 任务预估 × 1.2
-
2个人月剩余 ≥ 同上
-
3团队月剩余 ≥ 同上
-
4团队总余额 ≥ 同上
-
-
- -
-

- - 失败不扣费 -

-
- 所有生成任务仅在用户 [ 通过 ] 时才扣费。失败 / 超时 / 重跑(旧版本作废)一律不扣。 -
-
-
-
- - - - - - - -
- - - - diff --git a/电商AI平台/asset-factory.html b/电商AI平台/asset-factory.html index 792693f..b31eb3b 100644 --- a/电商AI平台/asset-factory.html +++ b/电商AI平台/asset-factory.html @@ -118,8 +118,9 @@ .model-visual .stack .placeholder { aspect-ratio: 3 / 4; } .kit-visual { grid-template-columns: repeat(4, 1fr); } .kit-visual .placeholder { aspect-ratio: 1 / 1; } - .tri-visual { grid-template-columns: repeat(3, 1fr); } - .tri-visual .placeholder { aspect-ratio: 1 / 1; } + .tri-visual { display: block; } + .tri-visual .placeholder { aspect-ratio: 16 / 9; } + .tri-visual .placeholder + .placeholder { display: none; } /* ─── 任务中心 · section header ─── */ .section-h { display: flex; align-items: center; gap: 12px; margin-top: 24px; margin-bottom: 14px; } @@ -432,9 +433,7 @@
-
正面
-
侧面
-
背面
+
正 / 侧 / 背 · 三视图
@@ -501,117 +500,13 @@ - - @@ -647,68 +542,112 @@ Shell.render({ }); /* ============================================================ - 任务中心 · projects.html 风格 (tabs + toolbar + 双视图) + 任务中心 · 从 localStorage 读取(与 model-photo / platform-cover 共享) ============================================================ */ (function () { 'use strict'; - const TYPE_LABEL = { model: '模特上身图', platform: '平台套图' }; + const TYPE_LABEL = { model: '模特上身图', platform: '平台套图' }; const STATUS_LABEL = { ok: '已完成', gen: '生成中', err: '失败' }; - const STATUS_PILL = { ok: 'ok', gen: 'info', err: 'err' }; + const STATUS_PILL = { ok: 'ok', gen: 'info', err: 'err' }; + const KEY_BY_TYPE = { model: 'fs-image-tasks-model', platform: 'fs-image-tasks-platform' }; const taskGrid = document.getElementById('task-grid'); const listTbody = document.getElementById('task-list-tbody'); - const gridView = document.getElementById('task-grid'); + const gridView = taskGrid; const listView = document.getElementById('task-list-view'); - const cards = [...taskGrid.querySelectorAll('.task-card')]; + + let cards = []; // 动态生成的 .task-card 元素数组(顺序与任务时间倒序一致) const state = { filter: 'all', type: 'all', search: '', view: 'list' }; function esc(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c])); } - // 任务行点击 → 跳转到对应工作台,携带商品名(任务名一般是「商品 × 模特/平台」格式) - function goToWorkbench(type, name) { - const productName = (name || '').split(/\s[×x]\s/)[0].trim(); - const q = '?t=' + Date.now() + (productName ? '&product=' + encodeURIComponent(productName) : ''); - const url = (type === 'model') ? 'model-photo.html' + q - : (type === 'platform') ? 'platform-cover.html' + q - : 'projects-new.html' + q; + /* ---------- localStorage 读写 ---------- */ + function loadType(type) { + try { return JSON.parse(localStorage.getItem(KEY_BY_TYPE[type]) || '[]'); } catch (e) { return []; } + } + function saveType(type, arr) { + try { localStorage.setItem(KEY_BY_TYPE[type], JSON.stringify(arr)); } catch (e) {} + } + function loadAllTasks() { + const all = []; + Object.keys(KEY_BY_TYPE).forEach(type => { + loadType(type).forEach(t => all.push({ ...t, type })); // type 兜底 + }); + all.sort((a, b) => (b.createdAt || 0) - (a.createdAt || 0)); + return all; + } + + /* ---------- task → 渲染辅助 ---------- */ + function subTextOf(t) { + const lbl = TYPE_LABEL[t.type] || t.type; + const count = (t.snap && t.snap.count) || 4; + return `${lbl} · ${count} 张`; + } + function thumbLabelOf(t) { + // 取「商品 × 模特/平台」中右半作为缩略图占位文字 + const parts = (t.name || '').split(/\s[×x]\s/); + return (parts[1] || parts[0] || '—').slice(0, 8); + } + + /* ---------- 点击行 / 卡片 → 跳转工作台(携带 taskId) ---------- */ + function goToWorkbench(t) { + const url = (t.type === 'model' ? 'model-photo.html' : 'platform-cover.html') + + '?taskId=' + encodeURIComponent(t.id); location.href = url; } - /* ---------- 1. 从卡片生成 list 表行 (单数据源) ---------- */ - function rowFor(card) { - const name = card.dataset.name; - const type = card.dataset.type; - const status = card.dataset.status; - const subText = (card.querySelector('.history-type')?.textContent || '').trim(); - const timeText = (card.querySelector('.history-foot .mono')?.textContent || '').replace(/^\/\/\s*/, ''); - const pct = card.querySelector('.history-prog .pct')?.textContent || ''; - const pillClass = STATUS_PILL[status] || 'info'; - const pillLabel = STATUS_LABEL[status] || status; + /* ---------- 1. 从 task 数据生成卡片 + list 行 ---------- */ + function cardFor(t) { + const card = document.createElement('div'); + card.className = 'task-card history-card'; + card.dataset.status = t.status; + card.dataset.type = t.type; + card.dataset.name = t.name; + card.dataset.taskId = t.id; + card.style.cursor = 'pointer'; + card.innerHTML = ` + +
${esc(thumbLabelOf(t))}
+
+
${esc(t.name)}
+
${esc(subTextOf(t))}
+
+ // ${esc(t.time || '')} + ${esc(STATUS_LABEL[t.status] || t.status)} +
+
+ `; + return card; + } + function rowFor(t) { const tr = document.createElement('tr'); tr.dataset.taskRow = '1'; - tr.dataset.name = name; - tr.dataset.type = type; - tr.dataset.status = status; - tr.addEventListener('click', () => goToWorkbench(type, name)); + tr.dataset.name = t.name; + tr.dataset.type = t.type; + tr.dataset.status = t.status; + tr.dataset.taskId = t.id; + tr.addEventListener('click', () => goToWorkbench(t)); tr.innerHTML = `
-
${esc(name.split(' ')[0] || '')}
+
${esc(thumbLabelOf(t))}
-
${esc(name)}
-
${esc(subText)}
+
${esc(t.name)}
+
${esc(subTextOf(t))}
- ${esc(TYPE_LABEL[type] || type)} - ${status === 'gen' - ? `
${esc(pct || '60%')}
` - : (status === 'ok' ? '已完成' : '—')} - ${esc(pillLabel)} - ${esc(timeText)} + ${esc(TYPE_LABEL[t.type] || t.type)} + ${t.status === 'gen' + ? `
60%
` + : (t.status === 'ok' ? '已完成' : '—')} + ${esc(STATUS_LABEL[t.status] || t.status)} + ${esc(t.time || '')}
@@ -717,24 +656,54 @@ Shell.render({
`; - // 阻止 row-more 区域冒泡触发整行点击 tr.querySelector('.row-more').addEventListener('click', e => e.stopPropagation()); return tr; } - cards.forEach(card => { - const tr = rowFor(card); - listTbody.appendChild(tr); - card._listRow = tr; - tr._card = card; - }); + /* ---------- 2. 全量重渲染(load → render → filter) ---------- */ + function renderAll() { + // 清空 grid / list + taskGrid.innerHTML = ''; + listTbody.innerHTML = ''; + cards = []; - /* ---------- 2. 构建类型 chip 菜单 ---------- */ + const tasks = loadAllTasks(); + tasks.forEach(t => { + const card = cardFor(t); + const row = rowFor(t); + taskGrid.appendChild(card); + listTbody.appendChild(row); + card._listRow = row; + card._task = t; + row._card = card; + cards.push(card); + + // 卡片点击 → 跳工作台 + card.addEventListener('click', e => { + if (e.target.closest('.card-del-btn')) return; + goToWorkbench(t); + }); + // 卡片删除按钮 + card.querySelector('.card-del-btn').addEventListener('click', e => { + e.stopPropagation(); + openDelConfirm(card); + }); + }); + + // 类型 chip 菜单(基于现有 task 的 type 集合,动态) + rebuildTypeMenu(); + applyFilter(); + } + + /* ---------- 3. 构建类型 chip 菜单(基于当前 cards 的 type 集合) ---------- */ const checkSvg = ''; const typeMenu = document.querySelector('.chip-wrap[data-key="type"] .chip-menu'); - const typeOptions = [...new Set(cards.map(c => c.dataset.type))]; - typeMenu.innerHTML = `
${checkSvg}全部任务类型
` - + typeOptions.map(v => `
${checkSvg}${esc(TYPE_LABEL[v] || v)}
`).join(''); + function rebuildTypeMenu() { + const typeOptions = [...new Set(cards.map(c => c.dataset.type))]; + typeMenu.innerHTML = `
${checkSvg}全部任务类型
` + + typeOptions.map(v => `
${checkSvg}${esc(TYPE_LABEL[v] || v)}
`).join(''); + syncTypeChip(); + } function syncTypeChip() { const wrap = document.querySelector('.chip-wrap[data-key="type"]'); @@ -778,6 +747,24 @@ Shell.render({ document.getElementById('tc-result-meta').innerHTML = `// 显示 ${visible} / ${cards.length} 个任务`; document.getElementById('tc-clear').hidden = !(state.search || state.type !== 'all'); + + // 空态 + const emptyEl = document.getElementById('tc-empty'); + const emptyText = document.getElementById('tc-empty-text'); + if (cards.length === 0) { + emptyEl.hidden = false; + emptyText.textContent = '还没有任务,去上方选一个工序开始生成吧'; + listView.hidden = true; gridView.hidden = true; + } else if (visible === 0) { + emptyEl.hidden = false; + emptyText.textContent = '没有符合筛选条件的任务'; + // 视图本身保留,空表头也保留 + } else { + emptyEl.hidden = true; + // 恢复 view 显示(可能在 length===0 分支被隐藏) + if (state.view === 'list') { listView.hidden = false; gridView.hidden = true; } + else { listView.hidden = true; gridView.hidden = false; } + } } /* ---------- 4. 事件绑定 ---------- */ @@ -835,7 +822,7 @@ Shell.render({ }); }); - /* ---------- 5. 删除 modal + 配对删除 (复用 projects.html 模式) ---------- */ + /* ---------- 6. 删除 modal + 同步 localStorage ---------- */ const delBg = document.getElementById('tc-del-bg'); const delBody = document.getElementById('tc-del-body'); const delCancel = document.getElementById('tc-del-cancel'); @@ -853,37 +840,21 @@ Shell.render({ delBg.addEventListener('click', e => { if (e.target === delBg) closeDelConfirm(); }); delOk.addEventListener('click', () => { if (!_delTarget) return; - const card = _delTarget._card || _delTarget; // 可能传 row (with ._card) 或 card (with ._listRow) - const row = card._listRow; + const card = _delTarget._card || _delTarget; // 可能传 row 或 card + const taskId = card.dataset.taskId; + const taskType = card.dataset.type; const name = card.dataset.name; - card.remove(); - if (row) row.remove(); - // 同步 cards 数组 - const idx = cards.indexOf(card); - if (idx >= 0) cards.splice(idx, 1); + // 从 localStorage 移除对应任务 + if (taskType && KEY_BY_TYPE[taskType]) { + const arr = loadType(taskType).filter(t => t.id !== taskId); + saveType(taskType, arr); + } closeDelConfirm(); Shell.toast('已删除', name); - applyFilter(); + renderAll(); }); - // 绑定网格卡 删除按钮 - document.querySelectorAll('.task-card .card-del-btn').forEach(btn => { - btn.addEventListener('click', e => { - e.stopPropagation(); - const card = btn.closest('.task-card'); - if (card) openDelConfirm(card); - }); - }); - - // 绑定网格卡片点击 → 跳工作台 - cards.forEach(card => { - card.style.cursor = 'pointer'; - card.addEventListener('click', e => { - if (e.target.closest('.card-del-btn')) return; - goToWorkbench(card.dataset.type, card.dataset.name); - }); - }); - // 绑定列表行 删除按钮 (事件委托, 因为是动态生成) + // 列表行 删除按钮(事件委托,因为是动态生成) listTbody.addEventListener('click', e => { const btn = e.target.closest('.mi-del-task'); if (!btn) return; @@ -892,8 +863,8 @@ Shell.render({ if (tr) openDelConfirm(tr); }); - /* ---------- 6. 初始化 ---------- */ - applyFilter(); + /* ---------- 7. 初始化 ---------- */ + renderAll(); })(); diff --git a/电商AI平台/assets/new-product-drawer.js b/电商AI平台/assets/new-product-drawer.js index f62dd03..953d365 100644 --- a/电商AI平台/assets/new-product-drawer.js +++ b/电商AI平台/assets/new-product-drawer.js @@ -204,6 +204,25 @@ font-size: 13.5px; } #${DRAWER_ID} .bullet-list .bl-add { background: transparent; border-style: dashed; } + #${DRAWER_ID} .bullet-list .bl-add-row { + margin: 8px 0 0; + display: none; + padding: 0; + background: transparent; + border: 0; + } + #${DRAWER_ID} .bullet-list .bl-add-row.show { display: flex; justify-content: flex-start; } + #${DRAWER_ID} .bl-add-btn { + display: inline-flex; align-items: center; gap: 6px; + padding: 7px 14px; + background: var(--heat); color: #fff; + border: 0; border-radius: var(--r-md); + font-size: 13px; font-weight: 600; + cursor: pointer; font-family: inherit; + transition: filter var(--t-base); + } + #${DRAWER_ID} .bl-add-btn:hover { filter: brightness(.94); } + #${DRAWER_ID} .bl-add-btn svg { width: 12px; height: 12px; } #${DRAWER_ID} .bullet-list .num { width: 22px; height: 22px; background: var(--surface); @@ -298,7 +317,13 @@
@@ -371,6 +396,13 @@ if (act === 'guide') return toast('使用指南', '点击查看完整填写指南'); if (act === 'save') return save(); if (act === 'upload-zone') return openFilePicker(); + if (act === 'bl-add') { + blAdd($blInput.value); + $blInput.value = ''; + $blInput.focus(); + updateBlAddBtn(); + return; + } }); document.addEventListener('keydown', e => { if (e.key === 'Escape' && drawer.classList.contains('show')) close(); @@ -388,8 +420,20 @@ // 卖点 bullet-list $blInput.addEventListener('keydown', e => { - if (e.key === 'Enter') { e.preventDefault(); blAdd($blInput.value); $blInput.value = ''; } + if (e.key === 'Enter') { + e.preventDefault(); + blAdd($blInput.value); + $blInput.value = ''; + updateBlAddBtn(); + } }); + $blInput.addEventListener('input', updateBlAddBtn); + } + + function updateBlAddBtn() { + const row = $bullets && $bullets.querySelector('[data-f="add-row"]'); + if (!row) return; + row.classList.toggle('show', !!($blInput.value || '').trim()); } function openFilePicker() { if (pfFiles.length < PF_MAX) $f.file.click(); } @@ -465,6 +509,7 @@ pfRender(); [...$bullets.querySelectorAll('.bl-item')].forEach(li => li.remove()); $blInput.value = ''; + updateBlAddBtn(); } function lockBody() { @@ -550,9 +595,36 @@ images, imgs: images.length, }; + // 持久化到 localStorage('fs-extra-products'),让 products.html 下次加载时 + // 自动从 storage 读出并 prepend 到 grid(否则用户在工作台创建后 → 跳详情 → + // 回商品库会看不到刚创建的商品) + try { + const KEY = 'fs-extra-products'; + const list = JSON.parse(localStorage.getItem(KEY) || '[]'); + list.push({ + id: product.id, + name, cat, + tags: '', + assets: 0, + videos: 0, + bullets: points, + date: new Date().toISOString().slice(0, 10), + createdAt: Date.now(), + }); + localStorage.setItem(KEY, JSON.stringify(list)); + } catch (e) { /* storage 不可用降级到只跳转 */ } + + if (typeof currentOpts.onSave === 'function') { + toast('商品已创建', '+ ' + name); + currentOpts.onSave(product); + close(); + return; + } + // 默认行为: 不 close drawer · 跳转期间 drawer 仍覆盖 host 页面 → 视觉上彻底 + // 消除"闪 host"(浏览器导航开始后,整页被新页面替换,drawer 自然消失) toast('商品已创建', '+ ' + name); - if (typeof currentOpts.onSave === 'function') currentOpts.onSave(product); - close(); + const url = 'product-detail.html?product=' + encodeURIComponent(name) + '&id=new'; + location.href = url; } window.NewProductDrawer = { open, close }; diff --git a/电商AI平台/assets/shell.js b/电商AI平台/assets/shell.js index d388609..302aeea 100644 --- a/电商AI平台/assets/shell.js +++ b/电商AI平台/assets/shell.js @@ -21,7 +21,7 @@ const NAV = [ icon: '' }, { - id: 'asset-factory', label: '图片生成', href: 'asset-factory.html', + id: 'asset-factory', label: '图片生成', href: 'asset-factory.html', badge: '12', icon: '' }, { @@ -29,11 +29,11 @@ const NAV = [ icon: '' }, { - id: 'team', label: '团队', href: 'team.html', badge: '5', + id: 'team', label: '团队', href: 'team.html', icon: '' }, { - id: 'account', label: '账户', href: 'account.html', + id: 'account', label: '消费', href: 'account.html', icon: '' }, { @@ -574,8 +574,18 @@ window.Shell = { openModal(id) { const el = document.getElementById(id); if (!el || el.classList.contains('show')) return; + // 把 modal-bg 挪到 body 直接子节点,绕开 .content 的层叠上下文(z-index:1)困住模态、让 topbar 漏出来的问题 + if (el.parentNode !== document.body) document.body.appendChild(el); el.classList.add('show'); this.lockScroll(); + if (!this._modalEsc) { + this._modalEsc = (e) => { + if (e.key !== 'Escape') return; + const open = document.querySelector('.modal-bg.show'); + if (open) this.closeModal(open.id); + }; + document.addEventListener('keydown', this._modalEsc); + } }, closeModal(id) { const el = document.getElementById(id); diff --git a/电商AI平台/library.html b/电商AI平台/library.html index 6d36cb9..a852f89 100644 --- a/电商AI平台/library.html +++ b/电商AI平台/library.html @@ -4,7 +4,7 @@ 资产库 · 流·Studio - +