🏮 《同福客栈》剧情与道具整合编辑器美术风格与 UI 规范 (v1)

导言：本规范基于《同福客栈·剧情与道具整合编辑器 V2.1》的实际视觉呈现进行提炼与标准化。编辑器的核心设计理念为**“账房理账与戏折评书的完美融合”**——它既具备专业开发工具的高效、严谨与清晰度，又流淌着同福客栈特有的暖木、宣纸与市井烟火气。

一、 核心设计语言：【朱砂理账 · 戏折审阅】

编辑器的视觉包装围绕古代客栈的“账房”与“戏台”展开：

1. 账房理账（左侧代码区）：模拟账房先生在宣纸上用朱砂、墨笔整理账目。严谨、对齐、高对比度，确保代码编写的绝对专注。
2. 戏折评书（右侧预览区）：将枯燥的 JSON 数据编译为“同福戏折”（剧本折子），用宣纸卡片、朱红边框、手作标签呈现，让策划在配置剧情时，如同在审阅一出出精彩的同福好戏。

二、 核心配色方案 (Editor Color Tokens)

编辑器采用高雅、温暖的低饱和度国风色系，避免了传统编辑器冷冰冰的暗黑科技感，代之以温润的纸张与木质感。

:root {
  /* 基础背景与纸张 */
  --edit-bg-canvas:      #F4ECE1;  /* 铺底画布色：温润的宣纸微黄，降低长时间注视的眼部疲劳 */
  --edit-bg-panel:       #FAF6F0;  /* 面板背景色：高亮宣纸白，用于代码区、预览区容器 */
  --edit-bg-card:        #FFFFFF;  /* 卡片背景色：纯白，用于戏折卡片、弹窗 */
  
  /* 品牌与高亮（朱砂与灯火） */
  --edit-vermilion:      #8C2D19;  /* 朱砂红：主品牌色、核心按钮、重要标题、戏折边框 */
  --edit-vermilion-light:#A74935;  /* 亮朱砂：悬停状态、高亮标签 */
  --edit-gold-lamp:      #C69045;  /* 灯火金：次要高亮、时间线节点、特殊边框 */
  --edit-gold-bg:        #FDF8F0;  /* 金色微光底：用于高亮提示区域 */

  /* 墨色与字色（徽墨） */
  --edit-ink-dark:       #231B18;  /* 徽墨黑：主标题、正文字色，极高易读性 */
  --edit-ink-muted:      #7A6E67;  /* 灰墨色：次要说明、字段 key、未激活状态 */
  --edit-ink-light:      #A89C94;  /* 浅灰墨：占位符、边框线、禁用状态 */

  /* 边框与分割线 */
  --edit-border-thin:    rgba(90, 58, 39, 0.12); /* 暖木细线：面板、卡片的分隔线 */
  --edit-border-focus:   #8C2D19;                /* 聚焦线：输入框、卡片选中时的朱砂边框 */
}

三、 布局与栅格规范 (Layout & Grid)

编辑器采用三栏式响应式流式布局，高度固定为一屏（100vh），严禁页面级纵向滚动，各子面板内部独立滚动。

1. 顶栏 (Header) —— 高度 64px

• 左侧：同福红灯笼 Logo + 品牌标题（Noto Serif SC，粗体，18px）+ 版本号与数据状态标签。
• 右侧：功能页签导航（时间线、剧情线、羁绊网络、触发模拟器、道具开发），采用胶囊式按钮设计。

2. 主体区 (Main Canvas) —— 高度 calc(100vh - 64px - 32px)

采用三栏黄金比例划分：

• 左栏：数据代码编辑区 (JSON Editor) —— 占比 35% - 40%
  • 顶部常驻“账房木签”快捷模板按钮。
  • 主体为高度自适应的 JSON 编辑器，背景为 --edit-bg-panel，四周有 1px 暖木细线。
• 中栏：可视化实时编译预览图 (Chronology Grid) —— 占比 35% - 40%
  • 顶部为“掌柜记事本·二十四节月剧情编年史”。
  • 中部为 6x4 的 24 个月度网格，每个网格（M1-M24）为圆角卡片，内含事件节点。
  • 底部为“全部剧情任务列表”，支持搜索与分类筛选。
• 右栏：折扇折叠·同福戏折审查窗 (Review Window) —— 占比 25% - 30%
  • 模拟传统“戏折子”的卡片式设计。
  • 卡片四周有双重朱红细线边框，顶部带“折扇折叠”装饰感。

3. 底栏 (Footer) —— 高度 32px

• 采用极简设计，展示版权信息、当前编译状态（如 ● 数据源: 12张事件表 · 29事件 · TypeScript OK）。

四、 字体与排版规范 (Typography)

为了体现“账房与戏折”的文化质感，排版上严格区分品牌标题与数据正文：

1. 字体族 (Font Family)

• 国风标题/装饰性文字："Noto Serif SC", "Songti SC", "Georgia", serif（展现宋体/宣纸刻字的书卷气）。
• UI 标签/按钮/正文："PingFang SC", "Microsoft YaHei", sans-serif（保证清晰易读）。
• 代码/数值/英文 Key："JetBrains Mono", "Fira Code", "Consolas", monospace（确保代码对齐与字符等宽）。

2. 字号与字重阶梯

• 编辑器大标题：20px / Bold / Noto Serif SC（如：顶栏标题）
• 面板/模块标题：15px / Bold / Noto Serif SC（如：掌柜记事本、同福戏折审查窗）
• 卡片标题/重要字段：13px / Bold / sans-serif（如：事件标题“清晨古井排队”）
• 常规正文/代码：12px / Regular / monospace 或 sans-serif（如：JSON 代码、剧情回放文本）
• 辅助说明/元数据：11px / Regular / sans-serif（如：标签、月份、状态提示）

五、 核心组件美术规格 (Component Specifications)

1. 戏折卡片 (Theater Program Card) —— 右侧审查窗核心

• 背景：#FFFFFF
• 边框：内缩 4px 的双重朱红细边框（border: 1px solid var(--edit-vermilion)，内加 padding 后再套一层细线）。
• 顶部装饰：右上角带斜角标签或印章式 ID 框（如 [dawn_well_queue]）。
• 阴影：box-shadow: 0 4px 12px rgba(90, 58, 39, 0.06);（极轻微的暖褐色投影，模拟纸张叠放厚度）。
• 圆角：radius-2 (8px)。

2. 账房木签按钮 (Wooden Tag Buttons) —— 左侧快捷模板

• 视觉包装：模拟古代账房挂在墙上的竹简木签。
• 配色：
  • 主按钮：朱砂红底（#8C2D19）+ 宣纸白字（#FAF6F0）。
  • 次要按钮：暖木棕底（#7A5A3F）+ 宣纸白字。
  • 快捷木签：暗绿底（#4A6B5D，代表安全/新增）或暗金底（#A88048，代表修改）。
• 尺寸：高度固定为 28px 或 32px，圆角 4px。

3. 编年史月度网格 (Chronology Grid Nodes) —— 中间编年史

• 尺寸：64px * 64px 的正方形微型卡片。
• 未激活状态：背景 #FAF6F0，边框 1px solid rgba(90, 58, 39, 0.1)，文字 --edit-ink-muted。
• 激活/有事件状态：
  • 右上角带一颗朱砂红星号（★）或红点。
  • 底部带一个代表事件类型的金色或红色小圆点。
  • 鼠标悬停时，边框变为 1px solid var(--edit-gold-lamp)，背景变为 --edit-gold-bg。

4. 标签与徽章 (Tags & Badges)

• 元数据标签（如 #核心大戏、#water < 20）：
  • 采用浅色底 + 对应深色字。
  • 剧情类：浅红底（rgba(140,45,25,0.06)）+ 朱红字（#8C2D19）。
  • 条件类：浅金底（rgba(198,144,69,0.06)）+ 金棕字（#C69045）。
  • 属性类：浅蓝底（rgba(70,89,105,0.06)）+ 靛蓝字（#465969）。
  • 圆角：radius-pill (9999px)，极小字号 11px。

六、 交互动态规范 (Interactive States)

为了保持“有爱的家”的温润感，编辑器的所有交互过渡必须平滑，严禁使用生硬的无过渡切换。

1. 过渡时间 (Transition)：统一使用 transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);。
2. 悬停反馈 (Hover)：
   • 可点击卡片悬停时，整体轻微上移 1px（transform: translateY(-1px)），投影加深。
   • 按钮悬停时，背景色向亮色微调（如 --edit-vermilion 渐变为 --edit-vermilion-light）。
3. 代码区聚焦 (Editor Focus)：
   • 当光标进入 JSON 编辑器或输入框时，外边框呈现 1px solid var(--edit-vermilion)，并带极淡的朱红外发光（box-shadow: 0 0 0 3px rgba(140,45,25,0.08)）。

七、 变更与维护记录

| 版本 | 修改日期 | 修改人 | 变更内容说明 | | --- | --- | --- | --- | | v1.0 | 2026-06-25 | 同福掌柜 AI | 基于编辑器 V2.1 真实截图，首次整理并归档编辑器美术与 UI 规范。 |