更新电商AI平台原型交互

2026-05-25 19:12:56 +08:00
parent 04335f3269
commit 553014cc79
23 changed files with 6661 additions and 860 deletions
@@ -542,10 +542,436 @@ Disabled: 底 `--black-alpha-5` + 边 `--black-alpha-12` + 半透明。

 **颜色:** 默认 `--black-alpha-56` / hover `--accent-black` / active `--heat` / disabled `--black-alpha-12` / 在主 CTA 内 `#fff`。

+### §4.13 AI 对话面板(编辑器型页面专用)
+
+> **使用范围:** AI 图片创作 / 流水线 AI 助手 / 商品 AI 优化 / 镜头脚本编辑。3 个编辑器页(pipeline / model-photo / image-optimize)定义一致 — 已成事实组件,该抽到 restraint.css。
+
+#### HTML 结构
+
+```html
+<div class="pane chat-pane">
+  <div class="pane-h">
+    <span class="ic-box"><svg>...</svg></span>
+    <span class="ti">AI 助手</span>
+    <span class="mono" style="margin-left:auto">// chat /v2</span>
+  </div>
+  <div class="chat-body">
+    <div class="msg ai">
+      <div class="bubble">你好,我来帮你优化这张图...</div>
+      <div class="mono ts">// 14:32</div>
+    </div>
+    <div class="msg user">
+      <div class="bubble">请把背景换成咖啡厅</div>
+    </div>
+    <div class="msg ai">
+      <div class="ai-thinking"><span class="dots"><span></span><span></span><span></span></span></div>
+    </div>
+  </div>
+  <div class="chat-input">
+    <div class="chat-input-card">
+      <textarea placeholder="@AI 帮我..."></textarea>
+      <div class="chat-input-actions">
+        <button class="btn btn-sm btn-ghost">附件</button>
+        <button class="btn btn-sm btn-primary">发送 →</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+#### 关键 CSS
+
+| 类 | 关键属性 |
+| -- | -------- |
+| `.chat-pane` | `flex column / 高度填充父容器` |
+| `.chat-body` | `flex 1 / overflow-y auto / padding 16 18 / gap 14 / flex column / max-height 460(可选)` |
+| `.chat-input` | `padding 14 18 18 / border-top 1px var(--border-faint)` |
+| `.chat-input-card` | `bg --background-base / border 1px --border-faint / radius 8 / padding 12 14 10` · `:focus-within` 边变 `--accent-black` + ring `0 0 0 3px rgba(0,0,0,.04)` |
+
+#### 消息气泡(`.msg.ai` / `.msg.user`)
+
+| 类型 | 对齐 | 气泡背景 | 气泡边框 | 字色 |
+| ---- | ---- | -------- | -------- | ---- |
+| `.msg.ai` | 左对齐(默认) | `--surface` 白 | `--border-faint` | `--accent-black` |
+| `.msg.user` | 右对齐(`align-items: flex-end`) | `--heat-12` 浅橙 | `--heat-20` | `--accent-black` |
+
+所有气泡共享:`max-width 90% / padding 10 14 / font-size 13 / line-height 1.6 / radius 8`。
+时间戳放气泡下:mono 11 px / `--black-alpha-48` / 格式 `// 14:32`。
+
+#### 打字指示器(`.ai-thinking`)
+
+3 个 6×6 圆点 · 1.2 s 交替闪烁:
+
+```css
+.ai-thinking .dots { display: inline-flex; gap: 3px; }
+.ai-thinking .dots span {
+  width: 6px; height: 6px; background: var(--black-alpha-32);
+  border-radius: 50%;
+  animation: thinking 1.2s ease-in-out infinite;
+}
+.ai-thinking .dots span:nth-child(2) { animation-delay: .15s; }
+.ai-thinking .dots span:nth-child(3) { animation-delay: .30s; }
+@keyframes thinking {
+  0%, 80%, 100% { opacity: .25; }
+  40% { opacity: 1; }
+}
+```
+
+---
+
+### §4.14 商品 / 资产卡片体系(3 种形态)
+
+> **核心原则:** 商品 + 资产 + 人物 + 场景共用**一套**卡片体系,按"使用场景"选形态。**不要为每种内容类型做新类。**
+
+#### 三种形态总览
+
+| 形态 | 类名(建议统一) | 缩图比 | 缩图宽度 | 使用场景 |
+| ---- | -------------- | ------ | -------- | -------- |
+| **网格主卡** | `.product-card` | 1.4:1(商品)· 1:1(资产/场景)· 3:4(人物) | 自适应宽 | 商品库 / 资产库 / 团队页主网格 |
+| **行卡(列表)** | `.prod-row` 或 `.mp-prod-item` | 1:1 | 28–36 px | 表单内已选行 / 侧栏列表 |
+| **选择器卡** | `.pl-card` / `.opt-card` / `.model-card` | 1:1 或 3:4 | 100–160 px | Modal 内多选 picker |
+
+#### 4.14.1 网格主卡(`.product-card`)
+
+```html
+<div class="product-card">
+  <div class="product-thumb placeholder">9:16</div>
+  <div class="product-body">
+    <div class="product-name">夏季新款蕾丝连衣裙</div>
+    <div class="product-cat mono">// 女装 · 蓝色</div>
+  </div>
+  <div class="product-footer">
+    <span class="stat">素材 <b>124</b></span>
+    <span class="sep">·</span>
+    <span class="stat">视频 <b>36</b></span>
+  </div>
+</div>
+```
+
+关键 CSS:
+- 容器:`bg --surface / border 1px --border-faint / radius 8 / display flex column / overflow hidden / cursor pointer`
+- hover:`bg --background-lighter / border --black-alpha-48`
+- 缩图:`aspect-ratio` 按内容类型选 — 商品 `1.4/1` · 资产 `1/1` · 人物 `3/4`
+- body:`padding 14 14 12 / flex 1`
+- name:`14 / 600 / --accent-black / 单行省略`
+- cat(分类):mono 11 / `--black-alpha-48`
+- footer:`grid 1fr auto 1fr / padding 10 12 / border-top 1px --border-faint / bg --background-base / font 11.5 / 字 --black-alpha-56`
+
+**变体:**
+- `.product-card.with-action` — footer 右侧加一个小按钮(用于流水线 stage 2 资产库的"AI 生成"入口)
+- `.product-card` 默认支持 selectable 模式:加 `.card-check` 22×22 圆形 checkbox(左上 hover 显示)+ 选中态 border 加深
+
+#### 4.14.2 行卡(`.prod-row` / `.mp-prod-item`)
+
+```html
+<div class="prod-row">
+  <div class="thumb placeholder">9:16</div>
+  <div class="nm">夏季新款蕾丝连衣裙</div>
+  <button class="row-swap"><svg>swap</svg></button>
+  <button class="row-x"><svg>×</svg></button>
+</div>
+```
+
+紧凑行卡:`flex align-center / gap 10 / padding 8 10 / bg --background-lighter / border 1px --border-faint / radius 6 / 28-36 px 缩图 + 单行文本`。
+
+**用法:**
+- 表单里"已选商品"列表(可删可换)
+- 侧栏商品/演员列表(`.mp-prod-item` · 36×36 缩图)
+- 流水线 stage 选中态
+
+#### 4.14.3 选择器卡(`.pl-card`)
+
+```html
+<div class="pl-card selected">
+  <div class="pl-thumb placeholder">3:4</div>
+  <div class="pl-name">夏季新款蕾丝连衣裙</div>
+  <div class="pl-check"><svg>✓</svg></div>
+</div>
+```
+
+Modal 内多选 picker:`bg --background-lighter / padding 10 / display flex column / gap 6 / cursor pointer`。
+
+3 种状态:
+
+| 状态 | 视觉 |
+| ---- | ---- |
+| 默认 | `bg --background-lighter / border 1px --border-faint` |
+| hover | `bg --surface`(变白) |
+| **selected ★** | `border var(--heat) / bg var(--heat-12)` + 右上角橙色勾 SVG |
+
+---
+
+### §4.15 人物 / 演员 / 模特卡片(`.model-card`)
+
+> **本质:** 选择器卡的"人物 3:4 竖图"特例。**复用 `.pl-card` 的选中态逻辑**,只换缩图比例。
+
+```html
+<div class="model-card selected">
+  <div class="m-thumb placeholder">3:4</div>
+  <div class="m-name">林夏 · 25 岁</div>
+  <div class="m-meta mono">// 165cm · 都市风</div>
+</div>
+```
+
+| 元素 | 样式 |
+| ---- | ---- |
+| 缩图 | `aspect-ratio: 3/4`(人物竖图标准) |
+| name | 12.5 / 500 / `--accent-black` |
+| meta | mono 11 / `--black-alpha-48` |
+| 选中态 | 同 `.pl-card`(橙边 + 橙底 + 右上勾) |
+
+**与 `.pl-card` 的关系:** 同一基类,仅缩图比例不同 — 商品 1:1 / 人物 3:4。
+**建议实现:** `.model-card` 继承 `.pl-card` 基类 + 覆盖 `.pl-thumb` 的 `aspect-ratio`。
+
+---
+
+### §4.16 场景卡片(复用 `.asset-card-2`)
+
+> 场景卡 = 资产卡的"1:1 通用"形态。**不要做新类**,只语义命名。
+
+```html
+<div class="asset-card-2 scene-card">
+  <div class="thumb-2 placeholder">1:1</div>
+  <div class="body-2">
+    <div class="ti">咖啡厅 · 暖光</div>
+    <div class="sub mono">// indoor · warm</div>
+  </div>
+</div>
+```
+
+`.asset-card-2`(通用资产卡基础):
+- `bg --surface / border 1px --border-faint / radius 8 / overflow hidden / display flex column`
+- hover:`border --heat-40 / box-shadow 0 1 3 rgba(0,0,0,.04)`
+- 缩图:`aspect-ratio 1` 正方形 · 通常宽 240 px(flex shrink 0)
+- body:`padding 12 14`
+- ti:14 / 500 / `--accent-black` · sub:mono 11 / `--black-alpha-48`
+
+**派生类只做语义命名:** `.scene-card` / `.person-card` / `.background-card` — 样式继承 `.asset-card-2`,**不要重新写规则**。
+
+---
+
+### §4.17 其他高频复用组件
+
+以下组件已在 2-5 个页面重复定义,需要尽快抽到 restraint.css。规范在此先记录。
+
+#### 4.17.1 流程步骤条(`.stepper` / `.stage-step`)
+
+```html
+<div class="stepper">
+  <div class="stage-step done"><span class="num">1</span><span class="lbl">商品</span></div>
+  <div class="stage-step active"><span class="num">2</span><span class="lbl">故事板</span></div>
+  <div class="stage-step"><span class="num">3</span><span class="lbl">镜头</span></div>
+  <div class="stage-step"><span class="num">4</span><span class="lbl">生成</span></div>
+  <div class="stage-step"><span class="num">5</span><span class="lbl">投放</span></div>
+</div>
+```
+
+| 元素 | 样式 |
+| ---- | ---- |
+| 容器 | `flex align-center / padding 14 18 / bg --surface / border 1px --border-faint / radius 8` |
+| `.num` 编号 | 26×26 / mono 12 / 600 / radius 4 / 默认 `bg --surface + border 1px --border-faint + 字 --black-alpha-48` |
+| `.done .num` | `bg --accent-black + 字 --accent-white`(已完成 · 黑) |
+| **`.active .num`** | `bg --heat + 字 --accent-white`(进行中 · 橙) |
+| 步间连接线 | 1 px / `--border-faint` / 高 1 px / 长度自适应 |
+
+**与 `.prog` 区别:** `.prog` 是 5 段进度条徽标(横放在卡片角落),`.stepper` 是大尺寸主流程步骤条(放在 page-head 之下)。
+
+#### 4.17.2 分页(`.pagination`)
+
+```html
+<div class="pagination">
+  <span class="total">共 <b>12</b> 条</span>
+  <button class="page-size">12 条/页</button>
+  <span class="pages">
+    <button>1</button>
+    <button class="active">2</button>
+    <button>3</button>
+  </span>
+  <span class="jump">跳至 <input type="number"> 页</span>
+</div>
+```
+
+| 元素 | 样式 |
+| ---- | ---- |
+| 容器 | sticky bottom / `flex gap 16 / padding 14 0 / border-top 1px --border-faint / bg --background-base / font 12.5 / 字 --black-alpha-56` |
+| 页码按钮 | 30×30 / radius 4 · 4 px 不是 8(密集场景小圆角不破节奏) |
+| 默认页 | `bg --surface / border 1px --border-faint / 字 --black-alpha-72` |
+| **激活页 ★** | `bg --heat / 字 --accent-white / 600 字重` |
+
+#### 4.17.3 视图切换(`.view-toggle`)
+
+```html
+<div class="view-toggle">
+  <button class="active"><svg>grid</svg></button>
+  <button><svg>list</svg></button>
+</div>
+```
+
+| 元素 | 样式 |
+| ---- | ---- |
+| 容器 | `inline-flex / bg --surface / border 1px --border-faint / radius 4 / padding 2`(外壳 4,因子按钮 4) |
+| 按钮 | 30×28 / radius 4 / transparent / 字 `--black-alpha-48` |
+| hover | `bg --black-alpha-4 / 字 --accent-black` |
+| **激活 ★** | `bg --accent-black / 字 --accent-white`(**注意:不是橙**) |
+
+> **为何用黑不用橙:** 视图切换是"显示模式开关",不是 CTA。黑表达"激活态"又不抢主橙的舞台。**同理:任何"模式切换"按钮组都用黑激活,不用橙。**
+
+#### 4.17.4 操作型胶囊(`.pill-tip`)
+
+```html
+<button class="pill-tip">→ 去商品库</button>
+```
+
+- 高 28 / padding 0 14 / radius 999 / font 12 / weight 500
+- 默认:`bg --heat-12 / border 1px --heat-20 / 字 --heat`
+- hover:`bg --heat / 字 --accent-white / box-shadow var(--shadow-cta)`
+
+**与 `.pill.info` 区别:** `.pill.info` 是状态徽标(静态展示),`.pill-tip` 是可点击操作(动态橙底反馈 · hover 升级到主 CTA 视觉)。
+
+#### 4.17.5 卖点 / 编辑式列表(`.bullet-list`)
+
+```html
+<ul class="bullet-list">
+  <li class="bl-item">
+    <span class="num">1</span>
+    <span class="bl-text">100% 棉麻 · 透气吸汗</span>
+    <button class="bl-x">×</button>
+  </li>
+  <li class="bl-item">
+    <span class="num">2</span>
+    <span class="bl-text">独家设计 · 限量 200 件</span>
+    <button class="bl-x">×</button>
+  </li>
+  <li class="bl-add">
+    <span class="num">+</span>
+    <input class="bl-input" placeholder="添加卖点(Enter 确认)">
+  </li>
+</ul>
+```
+
+| 元素 | 样式 |
+| ---- | ---- |
+| 行 `.bl-item` | `flex gap 10 / padding 8 12 / bg --background-lighter / border 1px --border-faint / radius 8 / mb 6` |
+| 序号 `.num` | 22×22 / mono 11 / 700 / 字 `--heat` / `bg --surface / border 1px --border-faint / radius 4` |
+| `.bl-text` | 13.5 / `--accent-black` / `flex 1` |
+| `.bl-x` 删除 | 22×22 / 圆 · hover 时显示(默认 `opacity 0`)· hover 变红 |
+| **`.bl-add` 添加行 ★** | 同 `.bl-item` 但 `border-style: dashed / bg transparent` |
+| `.bl-add .num` | `bg transparent / border 1px dashed --heat-40 / 字 --heat`(显示 `+`) |
+| `.bl-input` | `height 24 / border 0 / bg transparent / outline none / 字 13` |
+
+---
+
+### §4.18 AI 生成结果卡(`.gen-card`)
+
+> **来源:** AI 图片创作 / 视频创作 / 任何"输入提示词 → 多候选输出"场景。
+> **三个可变接口:** ① 图片比例 ② 悬浮按钮的功能 ③ 底部按钮的功能。**其他全部复用。**
+
+#### 组件骨架
+
+```html
+<div class="gen-card">
+  <!-- ① Prompt 提示词行 -->
+  <div class="gen-prompt">
+    <svg class="quote"><!-- 16px " 引号 --></svg>
+    <span class="text">一只穿着宇航服的橘猫,漂浮在霓虹色星云中,赛博朋克风</span>
+  </div>
+
+  <!-- ② Meta chip 行(竖线分隔) -->
+  <div class="gen-meta">
+    <span class="m-item">流·Studio v2</span>
+    <span class="m-sep">|</span>
+    <span class="m-item">1:1</span>
+    <span class="m-sep">|</span>
+    <span class="m-item">1K · 2 天前</span>
+  </div>
+
+  <!-- ③ 图片网格(N 张候选 · 比例由 --ratio 控制) -->
+  <div class="gen-images" style="--cols:4; --ratio: 1/1">
+    <div class="gen-image">
+      <div class="placeholder"><span class="ph-frame">1:1 · #1</span></div>
+      <!-- hover 浮层 · 右上按钮组 -->
+      <div class="gen-image-actions">
+        <button class="gen-img-btn" data-act="regen"><svg><!-- ↻ --></svg></button>
+        <button class="gen-img-btn" data-act="dl"><svg><!-- ↓ --></svg></button>
+        <button class="gen-img-btn" data-act="more"><svg><!-- ··· --></svg></button>
+      </div>
+      <!-- 点击反馈 · 中央 toast(默认 opacity 0) -->
+      <div class="gen-image-feedback">
+        <svg><!-- ✓ --></svg>
+        <span>已添加到剪贴板</span>
+      </div>
+    </div>
+    <!-- × N -->
+  </div>
+
+  <!-- ④ 底部操作按钮行 -->
+  <div class="gen-card-actions">
+    <button class="btn btn-sm"><svg></svg>重新编辑</button>
+    <button class="btn btn-sm"><svg></svg>再次生成</button>
+    <button class="btn btn-sm btn-ghost"><svg></svg></button>
+  </div>
+</div>
+```
+
+#### 关键 CSS
+
+| 区域 | 样式 |
+| ---- | ---- |
+| 容器 `.gen-card` | `bg --surface / border 1px --border-faint / radius 8 / padding 16 / display flex column / gap 14` |
+| 选中态 `.gen-card.selected` | `border-color --heat`(可选 modifier) |
+| Prompt `.gen-prompt` | `flex align-start / gap 10 / padding 0 4` |
+| Prompt 引号 `svg.quote` | 16×16 / `--black-alpha-32` / margin-top 2 |
+| Prompt 文本 `.text` | 14 / 500 / `--accent-black` |
+| Meta 行 `.gen-meta` | `flex align-center / gap 8 / padding 0 4 / font 11.5 mono / 字 --black-alpha-48 / letter-spacing .04em` |
+| Meta 分隔 `.m-sep` | `--black-alpha-24`(直接用 `\|` 字符) |
+| 图片网格 `.gen-images` | `display grid / grid-template-columns repeat(var(--cols), 1fr) / gap 10` |
+| 单张图 `.gen-image` | `position relative / aspect-ratio var(--ratio) / radius 8 / overflow hidden / cursor pointer` |
+| 浮层按钮组 `.gen-image-actions` | `absolute / top 8 right 8 / flex gap 2 / bg --surface / border 1px --border-faint / radius 8 / padding 2 / opacity 0 / z-index 2 / shadow 0 2 8 rgba(0,0,0,.08)` · hover `.gen-image` 时 `opacity 1` |
+| 浮层按钮 `.gen-img-btn` | `28×28 / radius 6 / bg transparent / 字 --black-alpha-56 / border 0 / cursor pointer` · hover `bg --black-alpha-4 / 字 --accent-black` |
+| 中央反馈 `.gen-image-feedback` | `absolute / inset 0 / flex column center / gap 8 / bg rgba(38,38,38,.88) / 字 --accent-white / radius 8 / opacity 0 / transition opacity .2s / pointer-events none` |
+| 反馈触发态 `.gen-image.show-feedback .gen-image-feedback` | `opacity 1`(1.5 s 后 JS 移除) |
+| 反馈 icon | 20×20 / 白 SVG ✓ |
+| 反馈文字 | 12.5 / 500 / 白 |
+| 底部按钮行 `.gen-card-actions` | `flex gap 8 / padding-top 4` |
+
+#### 三个可变接口
+
+| 维度 | 怎么变 |
+| ---- | ------ |
+| **① 图片比例** | 改 `style="--ratio: 1/1"` 为 `9/16` `16/9` `4/5` `3/4` 等 · 同时可改 `--cols` 控制列数(4 张方图 4 列 / 2 张竖图 2 列) |
+| **② 悬浮按钮功能** | 改 `<button data-act="X">` 的 act 名 + icon SVG · 数量 1–4 个(超过 4 个合并到 ··· 弹出菜单) |
+| **③ 底部按钮功能** | `.gen-card-actions` 内放 `.btn.btn-sm` · 通常 1-2 个二级 + 1 个三级 ghost ··· · **不放主橙**(避免抢 prompt 视觉) |
+
+#### 反馈 toast 触发 JS
+
+```js
+img.addEventListener('click', () => {
+  img.classList.add('show-feedback');
+  setTimeout(() => img.classList.remove('show-feedback'), 1500);
+});
+```
+
+#### 适用场景
+
+- AI 图片创作(2-8 张候选图 · 1:1 或 9:16)
+- AI 视频创作(1-4 段候选视频 · 16:9 或 9:16 · 缩图用 video poster)
+- 模板生成结果(批量预览选择)
+- 任何"prompt 输入 → 多候选输出"流程
+
+#### Don't
+
+- ❌ **给每个图片单独写卡样式** — 用 `.gen-image` 通用
+- ❌ **悬浮按钮组放图片底部** — 永远右上(避免遮挡图片主体)
+- ❌ **用全局 toast 通知"已复制"** — 用本组件内的 `.gen-image-feedback`(就地反馈,用户不必转头看屏幕角落)
+- ❌ **把 prompt 文字截断省略** — 完整显示(它就是用户的输入 · 要看清)
+- ❌ **底部按钮做成主橙 primary** — 抢了 prompt 的视觉重心,用二级 `.btn` 即可
+
 ---

 ## §5 · Mono 装饰元素(品牌签名 · 不能丢)

+> 方括号标签 / 双斜杠注释 / 中点连接 —— 这些是流·Studio 独有的"调试视图感",Firecrawl 没有,绝对保留。
+
 | 用法 | 示例 |
 | ---- | ---- |
 | 方括号标签 | `[ 200 OK ]` `[ /v2 ]` `[ .MP4 · 9:16 ]` `[ STUDIO ]` `[ ALL · 12 ] →` |