From 553014cc7903b0b65cf46c5cfcf190842b378277 Mon Sep 17 00:00:00 2001 From: iye <1713042409@qq.com> Date: Mon, 25 May 2026 19:12:56 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E7=94=B5=E5=95=86AI=E5=B9=B3?= =?UTF-8?q?=E5=8F=B0=E5=8E=9F=E5=9E=8B=E4=BA=A4=E4=BA=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 电商AI平台/account.html | 4 +- 电商AI平台/assets/restraint.css | 3 + 电商AI平台/assets/shell.js | 4 +- 电商AI平台/design-system.html | 1082 ++++++++++++ 电商AI平台/design.md | 426 +++++ 电商AI平台/image-optimize.html | 44 +- 电商AI平台/library.html | 419 ++++- 电商AI平台/login.html | 28 +- 电商AI平台/messages.html | 769 ++++++++ 电商AI平台/model-photo-demo-a.html | 24 +- 电商AI平台/model-photo.html | 1738 ++++++++++++++++--- 电商AI平台/pipeline.html | 2602 ++++++++++++++++++++++++---- 电商AI平台/platform-cover.html | 134 +- 电商AI平台/product-create-v2.html | 2 +- 电商AI平台/product-detail.html | 36 +- 电商AI平台/product-studio.html | 6 +- 电商AI平台/products.html | 76 +- 电商AI平台/projects-new.html | 14 +- 电商AI平台/projects.html | 68 +- 电商AI平台/register.html | 32 +- 电商AI平台/settings.html | 2 +- 电商AI平台/studio-v2.html | 4 +- 电商AI平台/studio.html | 4 +- 23 files changed, 6661 insertions(+), 860 deletions(-) create mode 100644 电商AI平台/messages.html diff --git a/电商AI平台/account.html b/电商AI平台/account.html index 6889735..83ced40 100644 --- a/电商AI平台/account.html +++ b/电商AI平台/account.html @@ -249,7 +249,7 @@
+ +
+
+ // §4.13 · CHAT · AI 对话面板 +

AI 对话面板

+

编辑器型页面专用(AI 图片创作 / 流水线 AI 助手 / 商品 AI 优化 / 镜头脚本)。3 个编辑器页定义一致,已成事实组件 — 应抽到 restraint.css。

+
+ +
+

完整对话面板 // .chat-pane · 试在输入框打字看 focus 反馈

+
+
+ + AI 助手 + // chat /v2 +
+
+
+
你好,我可以帮你优化这张图。试试告诉我:换背景、调光线、加文字 等。
+
// 14:30
+
+
+
把背景换成咖啡厅,加暖色光线
+
// 14:32
+
+
+
收到,正在生成 4 个候选...
+
+
+
+
+
+ +
+ + +
+
+
+
+
+ +
+

消息气泡规则 // .msg.ai vs .msg.user

+ + + + + + +
类型对齐气泡背景气泡边框
.msg.ai左对齐(默认)--surface 白--border-faint
.msg.user右对齐(flex-end)--heat-12 浅橙--heat-20
+

// 所有气泡共享:max-width 90% / padding 10·14 / font 13 / line-height 1.6 / radius 8 · 时间戳放气泡下用 mono 11px / alpha-48

+
+ +
+

打字指示器 // .ai-thinking · 1.2s 交替闪烁

+
+ AI 正在思考 + +
+
+
+ + +
+
+ // §4.14 · CARD SYSTEM · 商品 / 资产卡片三种形态 +

商品 / 资产卡片体系

+

商品 + 资产 + 人物 + 场景共用一套卡片体系。按"使用场景"选形态,不要为每种内容类型做新类。

+
+ +
+

三种形态对照 // 选谁?看场景

+ + + + + + + +
形态类名缩图比缩图宽度使用场景
网格主卡.product-card1.4:1 / 1:1 / 3:4自适应宽商品库 / 资产库 / 主网格
行卡(列表).prod-row / .mp-prod-item1:128–36 px表单已选行 / 侧栏列表
选择器卡.pl-card / .opt-card1:1 或 3:4100–160 pxModal 内多选 picker
+
+ +
+

形态 1 · 网格主卡 // .product-card · 主网格用

+
+
+
9:16
+
+
夏季新款蕾丝连衣裙
+
// 女装 · 蓝色
+
+
+ 素材 124 + · + 视频 36 +
+
+
+
9:16
+
+
秋季风衣 · 卡其色
+
// 女装 · M / L
+
+
+ 素材 67 + · + 视频 12 +
+
+
+
9:16
+
+
运动 T 恤 · 黑白款
+
// 男女同款
+
+
+ 素材 89 + · + 视频 23 +
+
+
+

// 缩图比例按内容类型选 · 商品 1.4:1(.product-thumb 默认)· 资产 1:1(加 .r-square)· 人物 3:4(加 .r-portrait)

+
+ +
+

形态 2 · 行卡 // .prod-row · 表单 / 侧栏用

+
+
+
9:16
+
夏季新款蕾丝连衣裙
+ +
+
+
4:5
+
秋季风衣 · 卡其色
+ +
+
+

// hover 右侧 X 变红 · 用于"已选商品"列表 / 流水线 stage 选中态

+
+ +
+

形态 3 · 选择器卡 // .pl-card · Modal 多选 picker · 点击切换 selected

+
+
1:1
商品 A
+
1:1
商品 B(已选)
+
1:1
商品 C(已选)
+
1:1
商品 D
+
1:1
商品 E
+
+

// 3 种状态:默认浅灰 / hover 变白 / selected 橙边 + 浅橙底 + 右上勾

+
+
+ + +
+
+ // §4.15 · MODEL CARD · 人物 / 演员 / 模特卡 +

人物 / 演员 / 模特卡

+

选择器卡的"人物 3:4 竖图"特例。复用 .pl-card 的选中态逻辑,只换缩图比例为 3:4。点击切换:

+
+ +
+
+
+
3:4
+
林夏 · 25 岁
+
// 165cm · 都市风
+
+
+
+
3:4
+
陈宇 · 28 岁(已选)
+
// 178cm · 商务休闲
+
+
+
+
3:4
+
王悦 · 22 岁
+
// 168cm · 学院风
+
+
+
+
3:4
+
张涛 · 30 岁
+
// 180cm · 运动型
+
+
+
+

// 跟 .pl-card 同基础 · 只是 .m-thumb 用 aspect-ratio: 3/4(人物竖图标准) · 多了 .m-meta 行

+
+
+ + +
+
+ // §4.16 · SCENE CARD · 场景卡(复用 asset-card-2) +

场景 / 通用资产卡

+

场景卡 = 资产卡的"1:1 通用"形态。不要做新类,派生类(`.scene-card / .person-card / .background-card`)只语义命名,样式继承 `.asset-card-2`。

+
+ +
+
+
+
1:1
+
+
咖啡厅 · 暖光
+
// indoor · warm
+
+
+
+
1:1
+
+
街头 · 黄昏
+
// outdoor · sunset
+
+
+
+
1:1
+
+
极简白底
+
// studio · pure
+
+
+
+
1:1
+
+
海滩 · 蓝调
+
// outdoor · cool
+
+
+
+

// hover 边变橙 + 浅阴影 · 通常宽 240px(可放在 flex 横滑容器里) · 同样 class 也用于素材库 / 人物库 通用卡

+
+
+ + +
+
+ // §4.17 · FREQUENT · 其他高频复用组件 +

其他高频复用组件

+

以下组件已在 2–5 个页面重复定义,需要尽快抽到 restraint.css。在此先做规范展示。

+
+ +
+

§4.17.1 流程步骤条 // .stepper · 大尺寸主流程

+
+
1商品
+
+
2故事板
+
+
3镜头
+
+
4生成
+
+
5投放
+
+

// 已完成:黑底白字 · 进行中:橙底白字 + 600 字重 · 未开始:白底灰字 · 与 .prog 区别:.prog 是小徽标横在卡片角,.stepper 是大尺寸主流程

+
+ +
+

§4.17.2 分页 // .pagination · sticky bottom

+
+ 共 247 条 + + + + + + + + + + 跳至 页 +
+

// 激活页用橙底白字 600 · 页码按钮 30×30 / 4 px 圆角(密集场景小圆角不破节奏)

+
+ +
+

§4.17.3 视图切换 // .view-toggle · 模式切换组

+
+
+ + +
+ // 当前 grid 视图 · 点击切换 +
+
+
+ DO +
激活态用 --accent-black 黑底白字 · 模式开关不抢主橙的舞台
+
+
+ DON'T +
用橙底 — 视图切换不是 CTA,用了橙就跟主操作按钮抢戏
+
+
+
+ +
+

§4.17.4 操作型胶囊 // .pill-tip · 可点击的链接式 CTA

+
+ + + +
+

// hover 时 bg → 橙 / 字 → 白 + shadow-cta · 与 .pill.info(静态状态徽标)区别:.pill-tip 是可点击操作

+
+ +
+

§4.17.5 卖点 / 编辑式列表 // .bullet-list · 表单常用

+
    +
  • + 1 + 100% 棉麻 · 透气吸汗 + +
    • +
  • + 2 + 独家设计 · 限量 200 件 + +
    • +
  • + 3 + 隐形拉链 · 显瘦剪裁 + +
    • +
  • + + + +
    • +
+

// 序号 .num 22×22 mono 700 字色 heat · 最后一行 .bl-add 用 dashed 虚线区别于已添加项 · hover 时删除按钮显示

+
+
+ + +
+
+ // §4.18 · GEN CARD · AI 生成结果卡 +

AI 生成结果卡

+

用于"输入提示词 → 多候选输出"场景(AI 图片 / 视频创作 · 模板生成 · 批量预览)。三个可变接口:① 图片比例 ② 悬浮按钮 ③ 底部按钮,其他全部复用。

+
+ +
+

完整示例 // hover 图片看右上浮层 · 点击图片看中央反馈 toast

+ + +
+ +
+ + 一只穿着宇航服的橘猫,漂浮在霓虹色星云中,赛博朋克风 +
+ + +
+ 流·Studio v2 + | + 1:1 + | + 1K · 2 天前 +
+ + +
+
+
1:1 · #1
+
+ + + +
+
+ + 已添加到剪贴板 +
+
+
+
1:1 · #2
+
+ + + +
+
+ + 已添加到剪贴板 +
+
+
+
1:1 · #3
+
+ + + +
+
+ + 已添加到剪贴板 +
+
+
+
1:1 · #4
+
+ + + +
+
+ + 已添加到剪贴板 +
+
+
+ + +
+ + + +
+
+
+ +
+

变体 · 9:16 竖图 / 2 列 // --ratio: 9/16 --cols: 2

+
+
+ + 东方美人 · 古典园林背景 · 短视频 9:16 +
+
+ 流·Studio v2 + | + 9:16 + | + 2K · 刚刚 +
+
+
+
9:16 · #1
+
+ + +
+
+ + 已收藏 +
+
+
+
9:16 · #2
+
+ + +
+
+ + 已收藏 +
+
+
+
+ + + +
+
+

// 切换 --ratio 和 --cols 即可适配视频 9:16 / 横屏 16:9 / 海报 4:5 / 头像 1:1 · 悬浮按钮和底部按钮按业务定制

+
+ +
+

三个可变接口对照 // 决策表

+ + + + + + + +
维度怎么变典型场景
① 图片比例style="--ratio: 9/16; --cols: 2"1:1 头像 · 9:16 短视频 · 16:9 横屏 · 4:5 海报
② 悬浮按钮.gen-image-actions 内放 1–4 个 .gen-img-btn重新生成 · 下载 · 收藏 · 分享 · 用作参考 · 更多 ···
③ 底部按钮.gen-card-actions 内放 .btn-sm重新编辑 · 再次生成 · 编辑分镜 · 导出 · 更多 ···
+
+ +
+

Don't // 常见错误

+
+
×悬浮按钮放图片底部 · 永远放右上(避免遮挡图片主体)
+
×用全局 toast 通知"已复制" · 用本组件内的 .gen-image-feedback(就地反馈,用户不必转头看屏幕角落)
+
×把 prompt 文字截断省略 · 完整显示 — 它就是用户的输入,要看清
+
×底部按钮做成主橙 primary · 抢了 prompt 视觉重心,用二级 .btn 即可
+
×给每个图片单独写卡样式 · 用 .gen-image 通用 · 比例靠 --ratio CSS 变量切换
+
+
+
+
@@ -2018,6 +3055,51 @@ document.querySelectorAll('[data-toast]').forEach(btn => { }); }); +/* ====== §4.14 / §4.15 picker 多选切换 ====== */ +document.querySelectorAll('[data-pl-group]').forEach(group => { + group.addEventListener('click', e => { + const card = e.target.closest('[data-pl]'); + if (!card) return; + card.classList.toggle('selected'); + }); +}); + +/* ====== §4.17.3 view-toggle 切换 ====== */ +document.querySelectorAll('[data-vt]').forEach(group => { + const cur = document.querySelector('[data-vt-cur]'); + group.addEventListener('click', e => { + const btn = e.target.closest('button'); + if (!btn) return; + group.querySelectorAll('button').forEach(b => b.classList.remove('active')); + btn.classList.add('active'); + if (cur) cur.textContent = btn.dataset.v; + }); +}); + +/* ====== §4.18 gen-image 点击反馈 ====== */ +document.querySelectorAll('[data-gen-grid] .gen-image').forEach(img => { + img.addEventListener('click', e => { + // 点击浮层按钮不触发图片反馈 + if (e.target.closest('.gen-image-actions')) return; + img.classList.add('show-feedback'); + setTimeout(() => img.classList.remove('show-feedback'), 1500); + }); +}); + +/* ====== §4.17.2 分页按钮切换 ====== */ +document.querySelectorAll('.pagination-demo .pages').forEach(group => { + group.addEventListener('click', e => { + const btn = e.target.closest('button'); + if (!btn) return; + // 跳过 ‹ › 切换按钮 + if (btn.textContent === '‹' || btn.textContent === '›') return; + group.querySelectorAll('button').forEach(b => { + if (b.textContent !== '‹' && b.textContent !== '›') b.classList.remove('active'); + }); + btn.classList.add('active'); + }); +}); + /* ====== Nav active on scroll ====== */ const navLinks = document.querySelectorAll('.ds-nav a'); const sections = [...document.querySelectorAll('.ds-main > section')]; diff --git a/电商AI平台/design.md b/电商AI平台/design.md index b72b161..89deb9d 100644 --- a/电商AI平台/design.md +++ b/电商AI平台/design.md @@ -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 +
+
+ ... + AI 助手 + // chat /v2 +
+
+
+
你好,我来帮你优化这张图...
+
// 14:32
+
+
+
请把背景换成咖啡厅
+
+
+
+
+
+
+
+ +
+ + +
+
+
+
+``` + +#### 关键 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 +
+
9:16
+
+
夏季新款蕾丝连衣裙
+
// 女装 · 蓝色
+
+
+ 素材 124 + · + 视频 36 +
+
+``` + +关键 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 +
+
9:16
+
夏季新款蕾丝连衣裙
+ + +
+``` + +紧凑行卡:`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 +
+
3:4
+
夏季新款蕾丝连衣裙
+
✓
+
+``` + +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 +
+
3:4
+
林夏 · 25 岁
+
// 165cm · 都市风
+
+``` + +| 元素 | 样式 | +| ---- | ---- | +| 缩图 | `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 +
+
1:1
+
+
咖啡厅 · 暖光
+
// indoor · warm
+
+
+``` + +`.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 +
+
1商品
+
2故事板
+
3镜头
+
4生成
+
5投放
+
+``` + +| 元素 | 样式 | +| ---- | ---- | +| 容器 | `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 + +``` + +| 元素 | 样式 | +| ---- | ---- | +| 容器 | 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 +
+ + +
+``` + +| 元素 | 样式 | +| ---- | ---- | +| 容器 | `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 + +``` + +- 高 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 +
    +
  • + 1 + 100% 棉麻 · 透气吸汗 + +
    • +
  • + 2 + 独家设计 · 限量 200 件 + +
    • +
  • + + + +
    • +
+``` + +| 元素 | 样式 | +| ---- | ---- | +| 行 `.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 +
+ +
+ + 一只穿着宇航服的橘猫,漂浮在霓虹色星云中,赛博朋克风 +
+ + +
+ 流·Studio v2 + | + 1:1 + | + 1K · 2 天前 +
+ + +
+
+
1:1 · #1
+ +
+ + + +
+ +
+ + 已添加到剪贴板 +
+
+ +
+ + +
+ + + +
+
+``` + +#### 关键 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 列) | +| **② 悬浮按钮功能** | 改 `
@@ -695,7 +695,7 @@
- +
默认创作
@@ -713,7 +713,7 @@
@@ -747,7 +747,7 @@
@@ -803,7 +803,7 @@
- +
图片已在资产库 @@ -1021,11 +1021,11 @@ Shell.render({ convList.innerHTML = state.convs.map(c => `
- ${c.thumb ? '' : ''} + ${c.thumb ? '' : ''}
${esc(c.title)}
`).join(''); @@ -1078,7 +1078,7 @@ Shell.render({ streamInner.innerHTML = `
- +
// IMAGE STUDIO

开始你的创作

@@ -1113,18 +1113,18 @@ Shell.render({ ${r.status === 'ok' ? `
- - + +
@@ -1156,24 +1156,24 @@ Shell.render({
${cellsHTML}
@@ -1500,7 +1500,7 @@ Shell.render({ inputRefs.innerHTML = state.refImages.map(r => `
- +
`).join(''); inputRefs.querySelectorAll('.x').forEach(b => { diff --git a/电商AI平台/library.html b/电商AI平台/library.html index 01dba4a..3988cf3 100644 --- a/电商AI平台/library.html +++ b/电商AI平台/library.html @@ -398,7 +398,7 @@
- +
林夕 · 都市白领
林夕
@@ -407,7 +407,7 @@
- +
阿楠 · 同事女
阿楠
@@ -416,7 +416,7 @@
- +
小七 · 学生女
小七
@@ -425,7 +425,7 @@
- +
阿杰 · 通勤男
阿杰
@@ -434,14 +434,14 @@
- +
缺三视图 - + MISSING TRI-VIEW 手动上传的人物未生成 正 / 侧 / 背 三视图。直接进入图片或视频生成,人脸/服饰一致性可能下降。 @@ -457,7 +457,7 @@
- +
阿强 · 健身男
阿强
@@ -466,7 +466,7 @@
- +
小苏 · 文艺女
小苏
@@ -475,7 +475,7 @@
- +
闺蜜组合 · 双人
闺蜜组合
@@ -484,7 +484,7 @@
- +
豆豆 · 幼儿
豆豆
@@ -493,7 +493,7 @@
- +
小宇 · 中学生
小宇
@@ -502,14 +502,14 @@
- +
缺三视图 - + MISSING TRI-VIEW 手动上传的人物未生成 正 / 侧 / 背 三视图。直接进入图片或视频生成,人脸/服饰一致性可能下降。 @@ -529,73 +529,73 @@
- - - + + +
@@ -582,9 +582,9 @@
透真补水面膜 · 3:4 · 12 分钟前 · ¥1.20
- - - + + +
@@ -604,7 +604,7 @@
透真补水面膜 · 3:4 · 刚刚 · 生成中
- +
diff --git a/电商AI平台/model-photo.html b/电商AI平台/model-photo.html index b1725e5..41854c2 100644 --- a/电商AI平台/model-photo.html +++ b/电商AI平台/model-photo.html @@ -882,28 +882,50 @@ color: var(--accent-crimson, #c43d3d); background: rgba(196, 61, 61, .05); } - /* 右上 hover 操作组 (再次生成 + 下载 + 更多) */ + /* 右上 hover 操作组 · 同 spec §4.18 .gen-image-actions (整体容器 + 透明按钮) */ .mp-result .cell-ops { - position: absolute; top: 6px; right: 6px; - display: flex; gap: 4px; + position: absolute; top: 8px; right: 8px; + display: flex; gap: 2px; + padding: 2px; + background: var(--surface); + border: 1px solid var(--border-faint); + border-radius: var(--r-md); + box-shadow: 0 2px 8px rgba(0,0,0,.08); opacity: 0; transition: opacity var(--t-base); z-index: 2; } .mp-result:hover .cell-ops { opacity: 1; } .mp-result .cell-ops button { - width: 26px; height: 26px; - background: rgba(255, 255, 255, .92); - border: 1px solid var(--border-faint); - border-radius: var(--r-sm); - color: var(--accent-black); + width: 28px; height: 28px; + background: transparent; + border: 0; + border-radius: 6px; + color: var(--black-alpha-56); cursor: pointer; display: grid; place-items: center; - backdrop-filter: blur(4px); - transition: border-color var(--t-base), color var(--t-base); + transition: background var(--t-base), color var(--t-base); } - .mp-result .cell-ops button:hover { border-color: var(--heat); color: var(--heat); } - .mp-result .cell-ops button svg { width: 12px; height: 12px; } + .mp-result .cell-ops button:hover { + background: var(--black-alpha-4); + color: var(--accent-black); + } + .mp-result .cell-ops button svg { width: 14px; height: 14px; } + /* 中央采用反馈 · 同 spec §4.18 .gen-image-feedback */ + .mp-result .cell-feedback { + position: absolute; inset: 0; + display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; + background: rgba(38, 38, 38, .88); + color: var(--accent-white); + border-radius: var(--r-md); + opacity: 0; + pointer-events: none; + transition: opacity .2s var(--t-base, ease); + z-index: 3; + } + .mp-result.show-feedback .cell-feedback { opacity: 1; } + .mp-result .cell-feedback svg { width: 20px; height: 20px; } + .mp-result .cell-feedback span { font-size: 12.5px; font-weight: 500; letter-spacing: .02em; } /* 更多 · 下拉气泡 */ .mp-result .cell-more-wrap { position: relative; } .mp-result .cell-more-menu { @@ -1001,25 +1023,24 @@ color: var(--black-alpha-48); letter-spacing: .02em; } .mp-pv-batch .summary b { color: var(--heat); font-weight: 700; } + /* 底栏按钮 · 同 spec §4.18 + image-optimize .io-msg-ops button */ .mp-pv-batch .pill-btn { - height: 34px; - padding: 0 18px; + height: 30px; + padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; background: var(--surface); - border: 1px solid var(--black-alpha-12); - border-radius: var(--r-pill); + border: 1px solid var(--border-faint); + border-radius: var(--r-md); color: var(--accent-black); font-family: inherit; font-size: 12.5px; cursor: pointer; transition: background var(--t-base), border-color var(--t-base), color var(--t-base); } - .mp-pv-batch .pill-btn:hover { background: var(--background-lighter); border-color: var(--black-alpha-24); } - .mp-pv-batch .pill-btn.primary { - background: var(--heat); color: #fff; border-color: var(--heat); + .mp-pv-batch .pill-btn:hover { + border-color: var(--heat-20); color: var(--heat); background: var(--heat-12); } - .mp-pv-batch .pill-btn.primary:hover { filter: brightness(.94); } .mp-pv-batch .pill-btn svg { width: 13px; height: 13px; } - .mp-pv-batch .pill-btn.icon { width: 34px; padding: 0; justify-content: center; } + .mp-pv-batch .pill-btn.icon { width: 30px; padding: 0; justify-content: center; } /* 批次更多气泡 (全部加入资产库 / 删除该批结果) */ .mp-pv-batch .batch-more-wrap { position: relative; display: inline-flex; } .mp-pv-batch .batch-more-menu { @@ -1207,53 +1228,58 @@ .mc-ai { position: relative; display: flex; flex-direction: column; min-height: 0; background: var(--background-base); } .mc-up { position: relative; display: flex; flex-direction: column; min-height: 0; background: var(--surface); border-left: 1px solid var(--border-faint); } - /* ── 左:AI 生成 · 复制 image-optimize 内容区结构 ── */ + /* ── 左:AI 生成 · 完全照搬 image-optimize .io-* 输入对话框样式 ── */ .mc-stream { flex: 1; min-height: 0; overflow-y: auto; - padding: 28px 28px 200px; + /* 左右 28px · 与 .ml-canvas-h(padding: 14px 28px)版心对齐 */ + padding: 28px 28px 220px; + background: var(--background-base); } .mc-stream-inner { - max-width: 720px; margin: 0 auto; + /* 取消 max-width 限制 · 让结果网格在固定画布宽度下吃满可用空间,并与头部 28px 版心对齐 */ + width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; } + + /* 空态 · 同 .io-empty */ .mc-empty { flex: 1; min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; - gap: 14px; - padding: 32px; + gap: 16px; + padding: 40px; color: var(--black-alpha-56); text-align: center; } .mc-empty .badge { - font-family: var(--font-mono); font-size: 10.5px; + font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--black-alpha-48); text-transform: uppercase; } .mc-empty h2 { - font-size: 20px; font-weight: 600; + font-size: 22px; font-weight: 600; color: var(--accent-black); letter-spacing: -.015em; margin: 0; } - .mc-empty p { font-size: 13px; max-width: 420px; line-height: 1.6; margin: 0; } + .mc-empty p { font-size: 13px; max-width: 460px; line-height: 1.6; margin: 0; } .mc-empty .ic { - width: 56px; height: 56px; + width: 64px; height: 64px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); display: grid; place-items: center; color: var(--heat); } - .mc-empty .ic svg { width: 24px; height: 24px; } + .mc-empty .ic svg { width: 28px; height: 28px; } .mc-empty .examples { - margin-top: 8px; + margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; - max-width: 620px; + max-width: 720px; } .mc-empty .examples .ex { - padding: 5px 11px; + padding: 6px 12px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-pill); @@ -1264,9 +1290,167 @@ } .mc-empty .examples .ex:hover { border-color: var(--heat-20); color: var(--heat); background: var(--heat-12); } + /* 单条对话气泡 · 同 .io-msg(去掉 padding-left,让消息贴齐外层 28px 版心) */ + .mc-msg { display: flex; flex-direction: column; gap: 14px; } + .mc-msg-prompt { display: flex; align-items: flex-start; gap: 12px; } + .mc-msg-prompt .quote { + flex-shrink: 0; width: 28px; height: 28px; + border-radius: var(--r-sm); + background: var(--surface); border: 1px solid var(--border-faint); + color: var(--heat); display: grid; place-items: center; + font-family: var(--font-mono); font-size: 13px; + } + .mc-msg-prompt .quote svg { width: 13px; height: 13px; } + .mc-msg-prompt .pt { flex: 1; min-width: 0; padding-top: 4px; } + .mc-msg-prompt .pt-text { + font-size: 14px; color: var(--accent-black); + line-height: 1.55; word-break: break-word; + } + .mc-msg-prompt .pt-tags { + margin-top: 8px; + display: flex; flex-wrap: wrap; gap: 6px; + font-family: var(--font-mono); font-size: 11px; + color: var(--black-alpha-48); letter-spacing: .02em; + align-items: center; + } + .mc-msg-prompt .pt-tags .meta-chip { + padding: 2px 8px; + background: var(--surface); + border: 1px solid var(--border-faint); + border-radius: var(--r-sm); + } + .mc-msg-prompt .pt-tags .sep { color: var(--black-alpha-24); } + .mc-msg-grid { + display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; + } + @media (max-width: 1280px) { .mc-msg-grid { grid-template-columns: repeat(3, 1fr); } } + .mc-cell { + position: relative; + background: var(--background-lighter); + border: 1px solid var(--border-faint); + border-radius: var(--r-md); + overflow: hidden; + aspect-ratio: 3/4; + } + .mc-cell .ph-frame { + position: absolute; inset: 0; + display: grid; place-items: center; + font-family: var(--font-mono); font-size: 11px; + color: var(--black-alpha-32); letter-spacing: .02em; + background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(0,0,0,.03) 6px 7px); + } + .mc-cell.gen .ph-frame { animation: mc-pulse 1.4s ease-in-out infinite; } + @keyframes mc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } } + .mc-cell:hover { border-color: var(--black-alpha-32); } + .mc-cell.err { border-color: var(--accent-crimson, #c43d3d); } + .mc-cell.err .ph-frame { color: var(--accent-crimson, #c43d3d); background: rgba(196, 61, 61, .05); } + + /* 单图右上 hover 操作组 · 同 .io-cell .cell-ops */ + .mc-cell .cell-ops { + position: absolute; top: 6px; right: 6px; + display: flex; gap: 4px; + opacity: 0; + transition: opacity var(--t-base); + z-index: 2; + } + .mc-cell:hover .cell-ops { opacity: 1; } + .mc-cell .cell-ops button { + width: 26px; height: 26px; + background: rgba(255, 255, 255, .92); + border: 1px solid var(--border-faint); + border-radius: var(--r-sm); + color: var(--accent-black); + cursor: pointer; + display: grid; place-items: center; + backdrop-filter: blur(4px); + transition: border-color var(--t-base), color var(--t-base); + } + .mc-cell .cell-ops button:hover { border-color: var(--heat); color: var(--heat); } + .mc-cell .cell-ops button svg { width: 12px; height: 12px; } + .mc-cell .cell-more-wrap { position: relative; } + .mc-cell .cell-more-menu { + position: absolute; top: calc(100% + 4px); right: 0; + min-width: 140px; + background: var(--surface); + border: 1px solid var(--border-faint); + border-radius: var(--r-md); + box-shadow: 0 6px 24px rgba(0,0,0,.10); + padding: 4px; + display: none; + z-index: 12; + } + .mc-cell .cell-more-wrap.open .cell-more-menu { display: block; } + .mc-cell .cell-more-menu button { + width: 100%; + display: inline-flex !important; align-items: center; gap: 8px; + height: auto !important; + padding: 7px 10px !important; + background: transparent !important; + border: 0 !important; border-radius: var(--r-sm) !important; + font-size: 12.5px; + color: var(--accent-black) !important; + font-family: inherit; + text-align: left; + cursor: pointer; + backdrop-filter: none !important; + justify-content: flex-start !important; + } + .mc-cell .cell-more-menu button:hover { background: var(--background-lighter) !important; color: var(--heat) !important; } + .mc-cell .cell-more-menu button.danger:hover { color: var(--accent-crimson) !important; background: var(--crimson-bg, #fdebea) !important; } + .mc-cell .cell-more-menu button svg { width: 13px !important; height: 13px !important; flex-shrink: 0; } + + /* 操作行 · 同 .io-msg-ops(去掉 padding-left,与版心对齐) */ + .mc-msg-ops { display: flex; gap: 8px; } + .mc-msg-ops button { + display: inline-flex; align-items: center; gap: 6px; + height: 30px; padding: 0 12px; + background: var(--surface); + border: 1px solid var(--border-faint); + border-radius: var(--r-md); + font-size: 12.5px; + color: var(--accent-black); + font-family: inherit; + cursor: pointer; + transition: border-color var(--t-base), color var(--t-base), background var(--t-base); + } + .mc-msg-ops button:hover { border-color: var(--heat-20); color: var(--heat); background: var(--heat-12); } + .mc-msg-ops button.icon { width: 30px; padding: 0; justify-content: center; } + .mc-msg-ops button svg { width: 13px; height: 13px; } + /* 批次更多气泡 · 同 .io-msg-ops .msg-more-wrap */ + .mc-msg-ops .msg-more-wrap { position: relative; } + .mc-msg-ops .msg-more-menu { + position: absolute; bottom: calc(100% + 6px); left: 0; + min-width: 168px; + background: var(--surface); + border: 1px solid var(--border-faint); + border-radius: var(--r-md); + box-shadow: 0 6px 24px rgba(0,0,0,.10); + padding: 4px; + display: none; + z-index: 12; + } + .mc-msg-ops .msg-more-wrap.open .msg-more-menu { display: block; } + .mc-msg-ops .msg-more-menu button { + width: 100%; + display: inline-flex !important; align-items: center; gap: 8px; + height: auto !important; + padding: 7px 10px !important; + background: transparent !important; + border: 0 !important; border-radius: var(--r-sm) !important; + font-size: 12.5px; + color: var(--accent-black) !important; + text-align: left; + justify-content: flex-start !important; + cursor: pointer; font-family: inherit; + } + .mc-msg-ops .msg-more-menu button:hover { background: var(--background-lighter) !important; color: var(--heat) !important; } + .mc-msg-ops .msg-more-menu button.danger:hover { color: var(--accent-crimson) !important; background: var(--crimson-bg, #fdebea) !important; } + .mc-msg-ops .msg-more-menu button svg { width: 13px !important; height: 13px !important; flex-shrink: 0; } + + /* 底部输入栏 · 完全照搬 .io-input 各项尺寸 */ .mc-input-wrap { position: absolute; left: 0; right: 0; bottom: 0; - padding: 12px 28px 22px; + padding: 14px 28px 22px; background: linear-gradient(to bottom, transparent 0, var(--background-base) 24px); z-index: 5; } @@ -1281,47 +1465,59 @@ transition: border-color var(--t-base); } .mc-input:focus-within { border-color: var(--heat-40); } - .mc-input-refs { display: none; flex-wrap: wrap; gap: 6px; padding-bottom: 2px; } - .mc-input-refs.show { display: flex; } - .mc-input-ref { position: relative; width: 48px; height: 48px; border-radius: var(--r-sm); overflow: hidden; background: var(--background-lighter); border: 1px solid var(--border-faint); } - .mc-input-ref img { width: 100%; height: 100%; object-fit: cover; } - .mc-input-ref .x { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; background: rgba(0,0,0,.7); color: var(--accent-white); border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; } - .mc-input-ref .x svg { width: 9px; height: 9px; } - .mc-input-top { display: flex; align-items: flex-end; gap: 10px; } + /* 上行 · 加号 + 参考图(同一 flex 行,均 64×64,refs 容器用 display:contents 让子项直接参与上行排列) */ + .mc-input-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .mc-input-top .add-btn { - flex-shrink: 0; width: 34px; height: 34px; + flex-shrink: 0; width: 64px; height: 64px; background: var(--background-lighter); - border: 1px solid var(--border-faint); + border: 1px dashed var(--border-faint); border-radius: var(--r-md); display: grid; place-items: center; - color: var(--black-alpha-72); cursor: pointer; + color: var(--black-alpha-56); cursor: pointer; transition: border-color var(--t-base), color var(--t-base), background var(--t-base); } - .mc-input-top .add-btn:hover { border-color: var(--heat-20); color: var(--heat); background: var(--heat-12); } - .mc-input-top .add-btn svg { width: 14px; height: 14px; } - .mc-input-top textarea { - flex: 1; border: 0; outline: 0; resize: none; - background: transparent; font-family: inherit; - font-size: 13.5px; line-height: 1.5; color: var(--accent-black); - min-height: 34px; max-height: 160px; padding: 6px 0; - } - .mc-input-top textarea::placeholder { color: var(--black-alpha-48); } - .mc-input-top .send-btn { - flex-shrink: 0; width: 34px; height: 34px; - background: var(--heat); color: var(--accent-white); - border: 0; border-radius: var(--r-md); cursor: pointer; - display: grid; place-items: center; - transition: filter var(--t-base), opacity var(--t-base); - } - .mc-input-top .send-btn:hover { filter: brightness(1.05); } - .mc-input-top .send-btn:disabled { opacity: .4; cursor: not-allowed; } - .mc-input-top .send-btn svg { width: 14px; height: 14px; } + .mc-input-top .add-btn:hover { border-color: var(--heat-40); color: var(--heat); background: var(--heat-12); } + .mc-input-top .add-btn svg { width: 22px; height: 22px; } + .mc-input-refs { display: contents; } + .mc-input-ref { + position: relative; width: 64px; height: 64px; + border-radius: var(--r-md); overflow: hidden; + background: var(--background-lighter); + border: 1px solid var(--border-faint); + flex-shrink: 0; + } + .mc-input-ref img { width: 100%; height: 100%; object-fit: cover; } + .mc-input-ref .x { + position: absolute; top: 3px; right: 3px; + width: 18px; height: 18px; + background: rgba(0,0,0,.7); color: var(--accent-white); + border: 0; border-radius: 50%; + display: grid; place-items: center; + cursor: pointer; + } + .mc-input-ref .x svg { width: 10px; height: 10px; } + + /* 中行 · textarea 满宽 · 直接作为 .mc-input 的子级,自成一行 */ + .mc-input textarea#mc-input-text { + width: 100%; + border: 0; outline: 0; resize: none; + background: transparent; + font-family: inherit; + font-size: 14px; + line-height: 1.5; + color: var(--accent-black); + min-height: 44px; max-height: 220px; + padding: 4px 2px; + } + .mc-input textarea#mc-input-text::placeholder { color: var(--black-alpha-48); } + + /* 下行 · 参数胶囊 + 右 meta + 发送按钮(32×32 放在最右,margin-left:8) */ .mc-input-bottom { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .mc-input-bottom .param { position: relative; display: inline-flex; align-items: center; gap: 4px; - height: 24px; padding: 0 9px; + height: 26px; padding: 0 9px; background: var(--background-lighter); border: 1px solid transparent; border-radius: var(--r-pill); @@ -1331,74 +1527,226 @@ } .mc-input-bottom .param:hover { background: var(--surface); border-color: var(--border-faint); } .mc-input-bottom .param .lbl-mono { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .02em; margin-right: 1px; } - .mc-input-bottom .param svg { width: 9px; height: 9px; opacity: .6; } + .mc-input-bottom .param svg { width: 10px; height: 10px; opacity: .6; } .mc-input-bottom .right-meta { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .02em; } .mc-input-bottom .right-meta .val { color: var(--accent-black); } + .mc-input .send-btn { + flex-shrink: 0; width: 32px; height: 32px; + background: var(--heat); color: var(--accent-white); + border: 0; border-radius: var(--r-md); cursor: pointer; + display: grid; place-items: center; + transition: opacity var(--t-base), filter var(--t-base); + margin-left: 8px; + } + .mc-input .send-btn:hover { filter: brightness(1.05); } + .mc-input .send-btn:disabled { opacity: .4; cursor: not-allowed; } + .mc-input .send-btn svg { width: 15px; height: 15px; } - /* ── 右:本地上传 副视觉 ── */ - .mc-up-h { padding: 18px 22px 12px; display: flex; align-items: baseline; gap: 8px; flex-shrink: 0; } - .mc-up-h h4 { font-size: 13.5px; font-weight: 600; color: var(--accent-black); margin: 0; } - .mc-up-h .mono { font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); letter-spacing: .04em; text-transform: uppercase; } - .mc-up-body { flex: 1; min-height: 0; padding: 0 22px 14px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; } - .mc-up-drop { - flex-shrink: 0; + /* ── 右:副视觉 · 顶部 tab 切换(AI 生成 / 本地上传)+ 3 模块(姓名/立绘/三视图) ── */ + .mc-up-tabs { display: flex; border-bottom: 1px solid var(--border-faint); flex-shrink: 0; background: var(--surface); } + .mc-up-tab { + flex: 1; height: 44px; + background: transparent; border: 0; + border-bottom: 2px solid transparent; + font-family: inherit; font-size: 13px; font-weight: 500; + color: var(--black-alpha-56); cursor: pointer; + transition: color var(--t-base), border-color var(--t-base), background var(--t-base); + } + .mc-up-tab:hover { color: var(--accent-black); background: var(--background-lighter); } + .mc-up-tab.active { color: var(--heat); border-bottom-color: var(--heat); font-weight: 600; background: var(--surface); } + + .mc-up-body { flex: 1; min-height: 0; padding: 18px 20px 14px; display: flex; flex-direction: column; gap: 18px; overflow-y: auto; } + .mc-up-section { display: flex; flex-direction: column; gap: 8px; } + .mc-up-sec-h { font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); letter-spacing: .04em; text-transform: uppercase; } + + /* 模特姓名 输入 */ + .mc-up-name { + width: 100%; height: 36px; + padding: 0 12px; + background: var(--background-lighter); + border: 1px solid var(--border-faint); + border-radius: var(--r-md); + font-family: inherit; font-size: 13.5px; color: var(--accent-black); + outline: none; + transition: border-color var(--t-base), background var(--t-base); + } + .mc-up-name:focus { border-color: var(--heat-40); background: var(--surface); } + .mc-up-name::placeholder { color: var(--black-alpha-40); } + + /* 立绘模块 · AI 选中态 */ + .mc-portrait-ai .empty { + aspect-ratio: 3/4; max-height: 220px; border: 1.5px dashed var(--black-alpha-24); border-radius: var(--r-md); - padding: 28px 16px; + display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; + background: var(--background-lighter); + text-align: center; padding: 14px; + } + .mc-portrait-ai .empty[hidden] { display: none; } + .mc-portrait-ai .picked[hidden] { display: none; } + .mc-portrait-ai .empty .ic { width: 38px; height: 38px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border-faint); display: grid; place-items: center; color: var(--black-alpha-48); } + .mc-portrait-ai .empty .ic svg { width: 16px; height: 16px; } + .mc-portrait-ai .empty .desc { font-size: 12.5px; color: var(--black-alpha-72); line-height: 1.55; } + .mc-portrait-ai .empty .mono { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .04em; } + .mc-portrait-ai .picked { + position: relative; aspect-ratio: 3/4; max-height: 280px; + background: var(--background-lighter); border: 1.5px solid var(--heat); + border-radius: var(--r-md); overflow: hidden; + } + .mc-portrait-ai .picked .ph-frame { + position: absolute; inset: 0; display: grid; place-items: center; + font-family: var(--font-mono); font-size: 11px; + color: var(--black-alpha-32); letter-spacing: .02em; + background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(0,0,0,.03) 6px 7px); + } + .mc-portrait-ai .picked .ops { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; } + .mc-portrait-ai .picked .ops button { + width: 26px; height: 26px; + background: rgba(255,255,255,.92); border: 1px solid var(--border-faint); + border-radius: var(--r-sm); + display: grid; place-items: center; + color: var(--accent-black); cursor: pointer; + transition: border-color var(--t-base), color var(--t-base); + } + .mc-portrait-ai .picked .ops button:hover { border-color: var(--heat); color: var(--heat); } + .mc-portrait-ai .picked .ops button svg { width: 12px; height: 12px; } + .mc-portrait-ai .picked .badge { + position: absolute; top: 8px; left: 8px; + background: var(--heat); color: var(--accent-white); + padding: 2px 7px; border-radius: var(--r-sm); + font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .04em; + } + + /* 立绘模块 · 本地上传(多张) */ + .mc-portrait-local .drop { + border: 1.5px dashed var(--black-alpha-24); + border-radius: var(--r-md); + padding: 20px 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; background: var(--background-lighter); transition: border-color var(--t-base), background var(--t-base); text-align: center; } - .mc-up-drop:hover, .mc-up-drop.dragover { border-color: var(--heat); background: var(--heat-12); } - .mc-up-drop .ic { - width: 36px; height: 36px; + .mc-portrait-local .drop:hover, .mc-portrait-local .drop.dragover { border-color: var(--heat); background: var(--heat-12); } + .mc-portrait-local .drop .ic { + width: 32px; height: 32px; background: var(--heat); color: var(--accent-white); - border-radius: 50%; - display: grid; place-items: center; + border-radius: 50%; display: grid; place-items: center; } - .mc-up-drop .ic svg { width: 16px; height: 16px; } - .mc-up-drop .t { font-size: 13px; font-weight: 600; color: var(--accent-black); } - .mc-up-drop .d { font-size: 11.5px; color: var(--black-alpha-56); line-height: 1.5; } - .mc-up-drop .mono { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .04em; } - - .mc-up-list-h { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } - .mc-up-list-h .lbl { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .04em; text-transform: uppercase; } - .mc-up-list-h .ct { font-size: 12px; font-weight: 600; color: var(--accent-black); } - .mc-up-list-h .clear { margin-left: auto; background: transparent; border: 0; font-family: inherit; font-size: 11.5px; color: var(--black-alpha-56); cursor: pointer; padding: 0; } - .mc-up-list-h .clear:hover { color: var(--heat); } - - .mc-up-list { - flex: 1; min-height: 0; - overflow-y: auto; - display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; - align-content: start; - } - .mc-up-list:empty::before { - content: '// 暂未上传'; - grid-column: 1 / -1; - text-align: center; - font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-32); - padding: 12px 0; - } - .mc-up-thumb { + .mc-portrait-local .drop .ic svg { width: 14px; height: 14px; } + .mc-portrait-local .drop .t { font-size: 12.5px; font-weight: 600; color: var(--accent-black); } + .mc-portrait-local .drop .d { font-size: 11px; color: var(--black-alpha-48); } + .mc-portrait-local .list-h { display: flex; align-items: center; gap: 4px; margin-top: 6px; font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .04em; } + .mc-portrait-local .list-h .ct { color: var(--accent-black); font-weight: 600; } + .mc-portrait-local .list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } + .mc-portrait-local .list:empty { display: none; } + .mc-portrait-local .thumb { position: relative; aspect-ratio: 3/4; - border-radius: var(--r-sm); - overflow: hidden; - background: var(--background-lighter); - border: 1px solid var(--border-faint); + border-radius: var(--r-sm); overflow: hidden; + background: var(--background-lighter); border: 1px solid var(--border-faint); } - .mc-up-thumb img { width: 100%; height: 100%; object-fit: cover; } - .mc-up-thumb .x { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; background: rgba(0,0,0,.7); color: var(--accent-white); border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; } - .mc-up-thumb .x svg { width: 10px; height: 10px; } - .mc-up-thumb .nm { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 6px; font-family: var(--font-mono); font-size: 9.5px; color: var(--accent-white); background: linear-gradient(transparent, rgba(0,0,0,.6)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } + .mc-portrait-local .thumb img { width: 100%; height: 100%; object-fit: cover; } + .mc-portrait-local .thumb .x { + position: absolute; top: 4px; right: 4px; + width: 20px; height: 20px; + background: rgba(0,0,0,.7); color: var(--accent-white); + border: 0; border-radius: 50%; + display: grid; place-items: center; cursor: pointer; + } + .mc-portrait-local .thumb .x svg { width: 10px; height: 10px; } - .mc-up-foot { padding: 12px 22px 18px; border-top: 1px solid var(--border-faint); display: flex; align-items: center; gap: 10px; flex-shrink: 0; } - .mc-up-foot .stat { font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); letter-spacing: .02em; } + /* 三视图模块 · 始终展示 16:9 占位 · 空态时生成按钮居中覆盖 · 有版本时按钮消失,显示重跑 + 历史 */ + .mc-triview .result-wrap { display: flex; flex-direction: column; gap: 8px; } + .mc-triview .result { + position: relative; aspect-ratio: 16/9; + background: var(--background-lighter); border: 1.5px solid var(--border-faint); + border-radius: var(--r-md); overflow: hidden; + transition: border-color var(--t-base); + } + .mc-triview.has-result .result { border-color: var(--heat); } + .mc-triview .result .ph-frame { + position: absolute; inset: 0; display: grid; place-items: center; + font-family: var(--font-mono); font-size: 11px; + color: var(--black-alpha-32); letter-spacing: .02em; + background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(0,0,0,.03) 6px 7px); + pointer-events: none; + } + .mc-triview .result.gen .ph-frame { animation: mc-pulse 1.4s ease-in-out infinite; } + + /* 居中覆盖生成按钮(无版本 / 非生成中时显示) */ + .mc-triview .overlay-gen-btn { + position: absolute; top: 50%; left: 50%; + transform: translate(-50%, -50%); + z-index: 2; + display: inline-flex; align-items: center; gap: 6px; + height: 36px; padding: 0 18px; + background: var(--heat); color: var(--accent-white); + border: 0; border-radius: var(--r-pill); + font-family: inherit; font-size: 13px; font-weight: 500; + cursor: pointer; + box-shadow: 0 4px 12px rgba(250, 93, 25, .28); + transition: filter var(--t-base), opacity var(--t-base), transform var(--t-base), box-shadow var(--t-base); + } + .mc-triview .overlay-gen-btn:hover:not(:disabled) { + filter: brightness(1.06); + transform: translate(-50%, -50%) scale(1.03); + box-shadow: 0 6px 16px rgba(250, 93, 25, .36); + } + .mc-triview .overlay-gen-btn:disabled { + background: var(--black-alpha-24); color: var(--surface); + cursor: not-allowed; box-shadow: none; + } + .mc-triview .overlay-gen-btn svg { width: 13px; height: 13px; } + .mc-triview .overlay-hint { + position: absolute; left: 0; right: 0; bottom: 10px; + text-align: center; + font-family: var(--font-mono); font-size: 10.5px; + color: var(--black-alpha-48); letter-spacing: .04em; + pointer-events: none; + z-index: 2; + } + + .mc-triview .result-ops { display: flex; gap: 6px; align-items: center; } + .mc-triview .result-ops .cost { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .02em; } + .mc-triview .result-ops button { + display: inline-flex; align-items: center; gap: 5px; + height: 28px; padding: 0 10px; + background: var(--surface); border: 1px solid var(--border-faint); + border-radius: var(--r-sm); + font-family: inherit; font-size: 11.5px; + color: var(--accent-black); cursor: pointer; + transition: border-color var(--t-base), color var(--t-base); + } + .mc-triview .result-ops button:hover { border-color: var(--heat); color: var(--heat); } + .mc-triview .result-ops button svg { width: 11px; height: 11px; } + + /* 历史版本 strip · 同商品详情页 popover 视觉 */ + .mc-triview .history { display: flex; flex-direction: column; gap: 6px; } + .mc-triview .history .h-lbl { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .04em; text-transform: uppercase; } + .mc-triview .history .h-lbl .ct { color: var(--accent-black); font-weight: 600; } + .mc-triview .history .h-row { display: flex; gap: 6px; overflow-x: auto; padding: 2px; } + .mc-triview .history .h-thumb { + flex: 0 0 auto; + width: 72px; aspect-ratio: 16/9; + background: var(--background-lighter); border: 1px solid var(--border-faint); border-radius: var(--r-sm); + position: relative; cursor: pointer; + display: grid; place-items: center; overflow: hidden; + transition: border-color var(--t-base); + } + .mc-triview .history .h-thumb:hover { border-color: var(--heat-40); } + .mc-triview .history .h-thumb.active { border-color: var(--heat); border-width: 2px; box-shadow: 0 0 0 2px var(--heat-12); } + .mc-triview .history .h-thumb .v { font-family: var(--font-mono); font-size: 10px; color: var(--black-alpha-56); letter-spacing: .02em; } + .mc-triview .history .h-thumb.active .v { color: var(--heat); font-weight: 600; } + .mc-triview .history .h-thumb .badge { position: absolute; top: 2px; left: 2px; font-family: var(--font-mono); font-size: 8.5px; padding: 0 4px; line-height: 12px; background: var(--heat); color: var(--accent-white); border-radius: 2px; letter-spacing: .02em; display: none; } + .mc-triview .history .h-thumb.active .badge { display: block; } + + /* 底部提交栏 */ + .mc-up-foot { padding: 12px 20px 16px; border-top: 1px solid var(--border-faint); display: flex; align-items: center; gap: 10px; flex-shrink: 0; flex-wrap: wrap; } + .mc-up-foot .stat { font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); letter-spacing: .02em; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mc-up-foot .stat b { color: var(--accent-black); font-weight: 600; } + .mc-up-foot .stat.ok { color: var(--heat); } .mc-up-foot .commit-btn { - margin-left: auto; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 14px; background: var(--heat); color: var(--accent-white); @@ -1409,6 +1757,12 @@ .mc-up-foot .commit-btn:hover { filter: brightness(1.05); } .mc-up-foot .commit-btn:disabled { opacity: .4; cursor: not-allowed; filter: none; } .mc-up-foot .commit-btn svg { width: 12px; height: 12px; } + + /* 左侧结果卡 · 可点击选为立绘(仅 AI tab) */ + .mc-cell { cursor: pointer; } + .mc-cell.selected { border-color: var(--heat); box-shadow: 0 0 0 2px var(--heat-12); } + .mc-cell .pick-badge { position: absolute; top: 6px; left: 6px; background: var(--heat); color: var(--accent-white); padding: 2px 7px; border-radius: var(--r-sm); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .04em; display: none; } + .mc-cell.selected .pick-badge { display: block; } .ml-toolbar { padding: 14px 28px; border-bottom: 1px solid var(--border-faint); @@ -1612,9 +1966,13 @@ .md-lead-img { aspect-ratio: 3/4; border-radius: var(--r-md); background: var(--background-lighter); border: 1px solid var(--border-faint); position: relative; overflow: hidden; } .md-lead-img .ph-frame { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); background: rgba(255,255,255,.85); font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-56); padding: 2px 10px; border-radius: var(--r-sm); } .md-lead-img .ph-name { position: absolute; left: 0; top: 0; padding: 12px 14px; font-size: 14px; font-weight: 600; color: var(--black-alpha-72); background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,0)); width: 100%; } - .md-zoom-btn { position: absolute; right: 10px; bottom: 10px; height: 28px; padding: 0 12px; background: rgba(21,20,15,.7); color: #fff; border: 0; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-family: inherit; cursor: pointer; } - .md-zoom-btn:hover { background: rgba(21,20,15,.9); } - .md-zoom-btn svg { width: 12px; height: 12px; } + /* 查看大图 icon · 悬浮容器才显示 · 32×32 icon-only */ + .md-zoom-btn { position: absolute; right: 8px; bottom: 8px; width: 32px; height: 32px; padding: 0; background: rgba(21,20,15,.7); color: #fff; border: 0; border-radius: var(--r-sm); display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity var(--t-base), background var(--t-base); z-index: 3; } + .md-zoom-btn:hover { background: rgba(21,20,15,.92); } + .md-zoom-btn svg { width: 14px; height: 14px; } + .md-lead-wrap:hover .md-zoom-btn, + .md-views .md-view:hover .md-zoom-btn { opacity: 1; } + .md-views .md-view { position: relative; } .md-thumbs { display: flex; gap: 8px; } .md-thumbs .thumb { flex: 0 0 64px; aspect-ratio: 3/4; border-radius: var(--r-sm); border: 1px solid var(--border-faint); background: var(--background-lighter); cursor: pointer; overflow: hidden; position: relative; } .md-thumbs .thumb:hover { border-color: var(--heat-40); } @@ -1629,9 +1987,22 @@ .md-section-h .icon-btn:hover { color: var(--heat); border-color: var(--heat-40); } .md-section-h .icon-btn svg { width: 12px; height: 12px; } /* 三视图 — 始终单张 16:9 大图 */ - .md-views { display: block; } + .md-views { display: flex; flex-direction: column; gap: 8px; } .md-views .md-view { aspect-ratio: 16/9; background: var(--background-lighter); border: 1px solid var(--border-faint); border-radius: var(--r-md); position: relative; display: grid; place-items: end center; overflow: hidden; } .md-views .md-view .lbl { position: absolute; bottom: 8px; font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); background: rgba(255,255,255,.85); padding: 2px 8px; border-radius: var(--r-sm); } + /* 三视图 · 用户上传:历史版本横向 strip · 与 mc-triview history 视觉对齐 */ + .md-view-versions { display: flex; gap: 6px; overflow-x: auto; padding: 2px; } + .md-view-versions .v-thumb { flex: 0 0 auto; width: 72px; aspect-ratio: 16/9; background: var(--background-lighter); border: 1px solid var(--border-faint); border-radius: var(--r-sm); position: relative; cursor: pointer; display: grid; place-items: center; overflow: hidden; transition: border-color var(--t-base); } + .md-view-versions .v-thumb:hover { border-color: var(--heat-40); } + .md-view-versions .v-thumb.active { border-color: var(--heat); border-width: 2px; box-shadow: 0 0 0 2px var(--heat-12); } + .md-view-versions .v-thumb .v { font-family: var(--font-mono); font-size: 10px; color: var(--black-alpha-56); letter-spacing: .02em; } + .md-view-versions .v-thumb.active .v { color: var(--heat); font-weight: 600; } + /* 立绘大图 · 支持 · cover */ + .md-lead-img img.md-lead-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } + /* 缩略图 · 支持 · 多张时允许换行(避免横向爆款) */ + .md-thumbs { flex-wrap: wrap; } + .md-thumbs .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } + .md-thumbs .thumb .ph-frame { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-56); background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(0,0,0,.03) 6px 7px); } /* 简介 */ .md-intro { font-size: 13px; line-height: 1.65; color: var(--black-alpha-72); margin: 0 0 12px; } .md-tags { display: flex; flex-wrap: wrap; gap: 8px; } @@ -1653,6 +2024,71 @@ .md-modal-f .stat-btn svg { width: 13px; height: 13px; } .md-modal-f .stat-btn b { color: var(--accent-black); font-weight: 600; } + /* ─── 离开工作台 · 二次确认弹窗 ─── */ + .mc-leave-bg { + position: fixed; inset: 0; + background: rgba(21,20,15,.42); + backdrop-filter: blur(8px); + z-index: 1200; + display: none; + align-items: center; justify-content: center; + padding: 40px; + } + .mc-leave-bg.show { display: flex; } + .mc-leave { + background: var(--surface); + border: 1px solid var(--border-faint); + border-radius: var(--r-md); + width: 420px; max-width: 100%; + box-shadow: 0 16px 48px rgba(0,0,0,.18); + overflow: hidden; + position: relative; + } + .mc-leave .lv-h { + display: flex; align-items: center; gap: 10px; + padding: 14px 20px 10px; + } + .mc-leave .lv-h .ic { + width: 28px; height: 28px; + display: grid; place-items: center; + border-radius: var(--r-sm); + background: var(--crimson-bg); + color: var(--accent-crimson); + flex-shrink: 0; + } + .mc-leave .lv-h .ic svg { width: 16px; height: 16px; } + .mc-leave .lv-h h3 { font-size: 15px; font-weight: 600; color: var(--accent-black); margin: 0; } + .mc-leave .lv-h .mono { + margin-left: auto; + font-family: var(--font-mono); font-size: 10.5px; + color: var(--black-alpha-48); letter-spacing: .04em; + } + .mc-leave .lv-b { + padding: 4px 20px 18px; + font-size: 13px; line-height: 1.65; + color: var(--black-alpha-72); + } + .mc-leave .lv-b b { color: var(--accent-black); font-weight: 600; } + .mc-leave .lv-f { + display: flex; align-items: center; gap: 8px; + padding: 12px 20px; + border-top: 1px solid var(--border-faint); + background: var(--background-lighter); + } + .mc-leave .lv-f .spacer { flex: 1; } + .mc-leave .lv-f .btn { height: 34px; padding: 0 14px; font-size: 13px; } + .mc-leave .btn-danger { + background: var(--accent-crimson); + color: var(--accent-white); + border-color: var(--accent-crimson); + font-weight: 600; + } + .mc-leave .btn-danger:hover { + background: var(--accent-crimson); + border-color: var(--accent-crimson); + filter: brightness(.95); + } + /* 编辑商品 drawer (复用 .drawer 基础样式, 提高 z-index 覆盖商品库) */ .pc-drawer { width: 720px; max-width: 100vw; z-index: 1101; } .pc-drawer .drawer-b { padding: 24px 28px; } @@ -1753,16 +2189,16 @@
- +
@@ -1776,10 +2212,10 @@
@@ -1795,7 +2231,7 @@
@@ -1963,11 +2399,11 @@
- +
@@ -2083,15 +2519,12 @@
- +
@@ -2184,7 +2675,7 @@