LumenX Studio · Tasty Sam · Settings Rework

SettingsPage 重写
Before / After Review

把原本「单列长滚动 + 玻璃大卡」的设置页，重构为 Line A「Cyber Refined」 的三栏信息架构（全局轨 · 分类侧栏 · 主区），并把 Line B「Luminous Atelier」 签名（暖底浮起卡 / 光晕 / 颗粒 / 衬线标题）作为品牌刷新层，仅挂在 atelier 主题上。 全程零侵入既有数据契约，保留全部原设置项，并修复了「默认值不回灌项目」这一隐性 bug。

typecheck · 0 error check:colors · 100% tokenized 5 主题验证 6 设置分类 分支 feat/atelier-pilot-20260611-161001
01

信息架构的转变

从「一页到底、用户靠滚动找设置」到「左侧分类导航、主区聚焦单一主题」。

BEFORE 单列长滚动 · 玻璃大卡堆叠
旧设置页：单列长滚动
AFTER 三栏 · 分类侧栏 + SECTION 卡
新设置页：三栏 Line A IA
核心改动：新增 SettingsSidebar（220px，6 分类：通用 / 模型 / 默认 Prompt / API 密钥 / 存储 OSS / 关于）+ SettingsControls（SectionCard 带 mono 数字眉标、200px 标签的 FormRow、可显隐+复制的 KeyField、Toggle、ModeSegment）。主区按分类切换，每屏只呈现一组设置， 告别盲目滚动。
02

裁决记录（Q1–Q7）

改动前与你确认的 7 项决策，全部已落地。

编号决策落地结果
Q1 T2I / I2I 合并为单一图像模型选择器；阿里云 AK/SK 移入「存储 OSS」组；缓存/日志目录可发现 已合并——UI 单选 GroupedModelGrid，handleSaveModelDefaults 仍同时写 t2i_model / i2i_model / image_model 三字段；AK/SK 归位存储组；目录只读可复制
Q2 新增「关于 / About」页，带 FFmpeg 检测 已新增——版本 / 设计线 / 后端 API / 数据目录 / 日志目录 + 实时 FFmpeg 检测（checkSystem）+ 重新检测按钮
Q3 补齐 mock 里缺失的字段 已补齐——高保真还原，无 TODO 占位
Q4 保留 Provider Mode 双按钮 + 条件 vendor 字段 保留——Kling / Vidu ModeSegment + 条件 KeyField，Line A form-row 样式
Q5 本地缓存 / 数据目录 = 只读展示（不可编辑） 只读——PathField 仅展示 + 复制
Q6 真正把 Settings 默认值注入新建项目（修 bug） 已修复——projectStore.createProject 创建后调用 injectDefaultsIntoProject 回灌模型/Prompt 默认；失败仅 warn 不阻断
Q7 砍掉 FPS；新增 style_analysis + entity_extraction prompt 已调整——后端无 FPS 概念，移除；Prompt 页扩为 5 段（实体抽取 / 风格分析 / 分镜润色 / 视频润色 / R2V 润色）
不做项（按你的要求）：不加 PixVerse Key、不加 T2V 默认模型、不加 FPS 字段。
03

功能点保全 + 新增

原页所有设置项 1:1 保留；带 +NEW 为本次新增。

通用

  • 界面语言（中 / EN）
  • 主题：5 预设选择器
  • 动效开关+NEW

模型

  • 图像模型（T2I+I2I 合并）
  • 角色 / 场景 / 道具画幅
  • 分镜画幅
  • I2V 模型 · R2V 模型

默认 Prompt

  • 实体抽取+NEW
  • 风格分析+NEW
  • 分镜润色 · 视频润色 · R2V 润色

API 密钥

  • DashScope Key
  • Kling / Vidu Provider Mode + vendor Key
  • MuleRun 一键登录 + 手动 CLI
  • 高级 endpoints

存储 OSS

  • 阿里云 AK / SK
  • OSS bucket / endpoint / basepath
  • 数据目录 · 日志目录（只读）+NEW

关于+NEW

  • 版本 / 设计线 / 后端 API
  • 数据 / 日志目录
  • FFmpeg 实时检测 + 重检
04

六大分类（atelier-dark）

默认主题下的每个设置分类。注意 SECTION 数字眉标、form-row 对齐、KeyField 掩码。

AFTER 模型
模型分类
AFTER 默认 Prompt
Prompt 分类
AFTER API 密钥
API 密钥分类
AFTER 存储 OSS
存储分类
AFTER 关于 · FFmpeg 检测
关于分类
05

五主题验证

同一 IA 在 5 个预设下的呈现。左=通用，右=模型。Atelier 双主题带签名层（暖底 / 浮起卡 / 衬线 / 颗粒），其余为 Cyber 平面层。

Atelier 暗 ★ 默认SIGNATURE · TEAL↔AMBER
atelier-dark 通用atelier-dark 模型
Atelier 亮SIGNATURE · PAPER
atelier-light 通用atelier-light 模型
Warm Bridge 暗CYBER · NEUTRAL
bridge-dark 通用bridge-dark 模型
Brand 暗CYBER · BRAND BLUE
brand-dark 通用brand-dark 模型
Brand 亮CYBER · BRAND LIGHT
brand-light 通用brand-light 模型
签名隔离验证通过：对比 Atelier 与 Brand/Bridge 两组卡片可见——atelier 的浮起阴影、暖纸底、 衬线标题、teal↔amber 配色仅出现在 atelier-dark / atelier-light；非 atelier 主题为平面 Cyber 外观， 签名 CSS 由 html.atelier-dark / html.atelier-light 门控，未泄漏。
06

验证与残余风险

维度结果说明
类型PASSnpm run typecheck 退出码 0，无错误
颜色PASSnpm run check:colors 退出码 0，全树 100% token 化，无硬编码 hex / white-alpha
功能视觉验证6 分类 × 截图渲染正常；ModeSegment / Toggle / KeyField / 主题选择器交互结构正确
主题PASS5 预设全部切换并截图，签名门控正确
响应式未覆盖本轮仅在 1440×900 桌面视口验证；移动 / 平板断点未截图
后端联调环境受限本地后端无 DashScope key，配置加载呈 loadError 态；表单填充态需在配齐 env 的环境复验
Q6 回灌需 E2E注入逻辑已落地并通过类型检查；建议在真实后端跑一次「建项目→查项目模型设置」端到端确认