剑琅联盟移动端设计规范

移动端设计规范 · 统一视觉语言与组件标准，支撑 AI 批量出图。本站视觉已按全局强制 UI 落地（#F7F7F7 页面底、无阴影无渐变、苹方 + TCloudNumber）。

390 × 844 #F7F7F7 页面底无阴影 · 无渐变按钮 48px · 圆角 4/8/12/16

★全局强制 UI 规范

以下条款为剑琅联盟移动端最高优先级约束，优先于本规范其他章节及历史 Figma 样稿。AI 出图、设计评审与 HTML + Tailwind 落地均须先满足本章；冲突时以本章为准。

画布基准：390×844px 移动端 1 倍设计稿（宽固定 390；高默认 844，内容超出可向下延展）。
- 画布外框 ★：Figma / AI 出图画布为直角矩形，禁止给画板加圆角、外描边、投影或设备外壳装饰；规范站内 phone-frame 机模仅为本站预览，非交付稿样式。
- Figma 自动布局 ★：设计稿中所有 Frame（容器）须启用自动布局（Auto Layout）；禁止仅用绝对定位手工摆放。根画板、页面主容器、标题栏、卡片、按钮、列表行等一律用 Auto Layout 纵向或横向排布，间距遵循 4px 模数。
页面背景色：#F7F7F7（--bg-page）。
#F7F7F7
视觉铁律：全站无阴影、无投影、无渐变；层级仅通过底色 / 1px 分割线 / 间距 / 字重区分。唯一例外：TabBar、Bottom Action Bar 允许顶部分离投影（见下条）。
品牌色体系
- 主色：#F32F41
- 辅助色：#FFD5D9、#FFF2F2
- 文字：重点标题 #333333；常规正文 / 模块标题 #929292；辅助说明 #929292；必要时最强强调可用 #000000
- 分割线 / 边框：边框 #D7D7D5；内容分隔线 #EDEDED 0.5px
- 禁用浅灰块：#EDEDED
- 卡片底色：#FFFFFF
主色辅助浅底标题次要分割禁用卡片
字体规范（按设备）
- Apple 设备（macOS / iOS / iPadOS）：常规文案使用 PingFang SC（苹方），与现有规则一致。
- Windows 设备：凡本规范中的 PingFang SC 一律改用 思源黑体 Source Han Sans SC（Source Han Sans CN 作备选）。原因：Windows 上 PingFang SC 在 AI 识图与标注时易误判，思源黑体更稳定。
- 两平台不变：金额纯数字 + 小数点仍用 TCloudNumber（v1.010）；默认 Regular（400），字号 ≥24px 时用 Bold（700）；色板、字号、间距、圆角等 Token 不变。
- 混排：¥ 与「应付 / 实付 / 小计」等文字符号随当前平台的 UI 字体（苹果=苹方，Windows=思源黑体）；¥ 与数字间距固定 4px。
本规范站预览：当前为 — · 设计稿与 HTML 交付须在说明中标注目标平台字体。

实付¥1,286.40
图标规范
- 通用功能图标：24×24px 画布，可视安全区 20×20px
- 小箭头 / 辅助图标：16×16px
- 颜色：重要操作 #F32F41 · 常规 #333333 · 次要 #929292
- 风格：线性简约、统一圆角倒角
- 调用优先级 ★：优先调用第 6 章图标库（Stratis → Iconex → WeChat）；库内无合适项时，可从外部引入矢量图标（如 Figma Community、业务专属素材），须遵守本章尺寸与颜色规范，并在标注中说明来源。
- 确认 / 正确态勾号 ★：勾选、步骤完成、成功反馈等禁止使用字符 √、✓ 或手写「勾」字；须用图标 check（16px 线性）或 check-circle-filled（面性成功），见第 7 章表单控件。
- 顶栏返回 ★：PageTitleBar 返回须用 chevron-left 矢量图标，禁止文字 < / ＜。
间距体系（4px 模数）
- 页面左右安全边距：16px
- 模块与模块外间距：16px
- 卡片内边距：上下 16px、左右 16px
- 图文 / 图标文字间距：8px
- 列表单行上下间距：12px
- 标签边距：上下 4px、左右 8px
- 分割线上下留白：12px
圆角规范
- 全局卡片：12px
- 文字按钮：在 4 / 8 / 12 / 16px 四档中按场景选用（见下条）
- 标签 / 角标：4px
- 输入框 / 小模块：8px
分割线 ★
- 边框（输入框、描边按钮等）：1px #D7D7D5（--border）
- 卡片内 / 列表 Cell 组内同级内容分隔：线粗 0.5px · 色 #EDEDED（--gray-2 / --divider-color）；左右缩进 16px（--divider-inset = --space-card），两端与内容对齐，禁止左右贴卡片或列表容器外缘；AI 标注 Divider/inset · 类名 u-divider u-divider--inset。
- 上下留白默认 12px（--space-divider-y）
顶部导航 / 标题栏：内页统一使用组件库 PageTitleBar（页面标题栏）；固定高 44px、白底、主体无描边；返回区为 chevron-left 矢量图标（24px），禁止文字 < / ＜；返回图标区垂直居中，标题与右侧操作文案底部水平对齐（不含系统状态栏）。
全局按钮：统一高 48px、文案 16px / 500、最大宽度 370px（含通栏主按钮与底栏按钮，不得超出）；无阴影无渐变；圆角仅在 4 / 8 / 12 / 16px 四档中选择，同一按钮类型在全站须使用同一圆角值。变体：填充按钮 品牌红底 #F32F41 + 白字；描边按钮 白底 + 红字 + 红描边 1px；禁用灰底 #EDEDED。按钮内文案须在按钮区域内水平、垂直双向居中，禁止贴顶、贴底或偏左/偏右。

页面与组件硬性约束

以下规则与上文并列执行，适用于 AI 出图、Figma 稿与前端实现。

品牌图标按钮（圆角方形 + 线性图标）
- 由圆角方形底与线性图标组成的功能入口（如顶栏快捷、宫格图标钮）。
- 常规态：方形填充品牌色 #F32F41，圆角建议 8px（与输入框小模块一致）；内嵌线性图标为白色，描边粗细 stroke-width: 2。
- 禁用态可用 #EDEDED 底 + #929292 图标；不得用 emoji 代替图标。
常规 · 品牌底 + 白线 icon · 2px 描边
禁止使用 Emoji：页面、弹层、空状态与按钮文案中不得出现 emoji 表情；情绪与状态须用规范图标、文字或插画素材表达。
Tab 与卡片禁止层叠遮挡：Tabs / 分段器与下方内容卡片分属上下布局，禁止负边距、上浮、z-index 叠压导致 Tab 压住卡片或卡片盖住 Tab；模块之间以间距与分割线区分。
图片占位规范：凡预留图片位置，统一为浅灰底 #EDEDED，居中放置白色线性 image 图标（描边 2）；未给到素材时亦不得留空或使用 emoji / 外链占位图。

96×96 占位示例

商品主图位 · 1:1
禁止横向溢出画布：内容区宽度不得超过 390px；禁止出现横向滚动条。长文案、表格与标签须换行、截断或改为纵向排布，图片与卡片宽度适配安全边距（左右各 16px）。
顶部 Tab 条：页面级 Tab / 分段器容器宽度固定 390px，在画布内水平居中；Tab 主体无描边；单项等分，选中仅用底部指示条（见 PageTabs）。
标题栏与 Tab 主体无描边：PageTitleBar、PageTabs、TabBar、页内 Tabs 的容器禁止四周边框或 1px 描边包裹；与内容区通过底色、间距、选中指示条区分（指示条不属于容器描边）。
底部栏白底与顶部分离 ★：TabBar、Bottom Action Bar 内容区高 56px、填充 #FFFFFF（--bg-container）；与底安全区 34px 白块分两层（TabBar 场景）。顶缘分离投影 box-shadow: 0 -0.5px 4px 0 rgba(0,0,0,0.08)（--bottom-surface-shadow）；无描边。底安全区白块仍无投影、无描边。
状态栏占位：设计稿与 HTML 原型中，系统状态栏区域用与状态栏同尺寸（390×53px）的纯白块占位，不绘制时间、电量、信号等系统 UI。
底部占位区 ★：每页设计稿最底部预留 390×34px 纯白矩形（#FFFFFF）；对齐 iPhone 17 竖屏底部安全区（--safe-bottom）；无阴影、无描边、无圆角，不绘制 Home Indicator 等系统 UI；页面内容与底栏不得侵入此区域。
卡片内容裁切：卡片容器须设置 overflow: hidden（或等价裁切）；内部图标、标题、标签、按钮不得溢出到卡片圆角外，长文案须截断或换行。
白底内容卡片无描边 ★：填充色为纯白（#FFFFFF / --bg-container）的内容卡片禁止四周边框或 1px 描边；与 #F7F7F7 页面底通过底色对比 + 圆角 + 间距区分。有色浅底卡（如 #FFF2F2 业绩卡）及输入框、描边按钮等不适用本条。
卡片 / 列表内分隔线内容对齐 ★：分隔同级区块时使用 Divider/inset（0.5px · #EDEDED · 左右各 16px）；线两端须与正文/主内容左右缘对齐，禁止通栏贴边。
提示信息栏图标对齐：Notice / Alert 等提示条中，前置图标与第一行文案的基线（底部对齐）对齐；多行时图标仍对齐首行，不垂直居中整段文字。
空状态垂直居中：空状态页在可滚动内容区（扣除状态栏、标题栏、底栏后的区域）内，图标 + 主副文案作为一组垂直居中；禁止贴顶或仅留顶部留白。
页面标题栏：所有设计页 / 原型 / AI 出图的内页顶栏须调用组件库 PageTitleBar（页面标题栏），禁止自定义 Navbar 样式；RTS-AI 读稿 · Figma node 6-623 为整页 Home 稿，本组件仅对齐其顶栏区域（见 7 章 · PageTitleBar 实测差异表）。
标题栏文案底对齐：PageTitleBar 居中标题（18px）与右侧操作（16px）须文字底部在同一水平线对齐；返回区仍为 44×44 垂直居中。
返回须用矢量图标 ★：PageTitleBar 左侧返回禁止使用文字符号 <、＜、‹ 等；须调用图标 chevron-left（24px · #333），见第 6 章。
勾号用图标：组件内表示确认、已选、步骤完成时禁止文字 √/✓；使用 check 或 check-circle-filled（见第 6、7 章）。
按钮文案居中：Button、对话框底栏、底栏操作条等一切带文字按钮，文案在按钮可点击区域内水平居中且垂直居中（单行、双行均适用；双行时整体居中）。
图标与组件调用 ★：优先调用本规范第 6 章图标库与第 7 章组件库；若库内无合适项，可从外部引入图标或组件，但外观须符合 ★ 全局强制 UI（尺寸、色板、圆角、无阴影等），并在设计标注 / AI 说明中注明来源。
弹窗边距 ★：居中弹窗（ModalPopup/centered）距画布左右各 32px（内容区宽 326px = 390 − 32×2）。底部弹窗（ModalPopup/bottom）左、右、下边距均为 0（通栏 390px 贴底）。规范不包含半透明遮罩层组件；Figma 源稿遮罩仅作交互说明，不入库。

Tab + 卡片布局示意（正确）：Tab 区域完整落在卡片上方，中间以间距分隔，无重叠。

全部待处理已完成

内容卡片 · 距 Tab 下缘 16px · 独立白底区块 · 卡片 overflow hidden

◎品牌标识 Brand

剑琅联盟 · Logo 使用规范

Logo 为圆形徽章：红色底（#F32F41）+ 剑与盾金属质感图形，象征联盟、守护与专业力量。APP 内与对外物料须使用官方文件，禁止变形、改色或添加效果。

浅色背景

登录页 / 白底 Navbar / 关于我们

深色背景

启动页 / 品牌头图区域

最小尺寸导航栏 24px · 列表 32px · 启动页 80px

安全留白Logo 四周至少留 0.5× 直径空白

文件路径LOGO2.png（与规范同目录）

场景	展示方式	配套文案
启动页 / Splash	Logo 96px 居中 + 应用名	剑琅联盟 · 商务协作平台
登录页	Logo 72px + 标题 28px Medium	剑琅联盟
Navbar 首页	左 Logo 28px + 文字 16px（可选）	剑琅联盟
关于 / 设置	Logo 48px + 版本号	剑琅联盟 v{x.x.x}

0.1HTML + Tailwind 落地指引

阶段 1：本规范站使用 Tailwind CSS v3 CDN + @layer components + @apply 封装组件（如 MemberCard）。阶段 2（当前）：WebView 产品工程位于 app/，已切换 Vite + Tailwind + Capacitor，Token 自 assets/tailwind-spec-config.js 迁入 app/tailwind.config.js。

项	阶段 1 · 规范站	阶段 2 · WebView 产品（`app/`）
样式	Tailwind CDN · `preflight: false`	Vite + PostCSS + Tailwind v3 · `npm run dev`
组件	`@apply` 类名（`.u-member-card` 等）	`src/styles/components/` 同 class · JS 模板渲染
Token	`assets/tailwind-spec-config.js`	`app/tailwind.config.js` `theme.extend`
图标	Lucide（新）+ 既有 SVG 库（过渡）	Lucide · `createIcons`
交互	纯 HTML 预览	Hash 路由 · 卡详情演示 · Capacitor 原生壳

// app/tailwind.config.js（节选）
export default {
  theme: {
    extend: {
      spacing: { 'status-bar-h': '53px', 'nav-h': '44px', 'bottom-placeholder': '34px', 'page-title-bar-side': '72px' },
      height: { 'status-bar-h': '53px', 'bottom-placeholder': '34px' },
      colors: { brand: { 6: '#F32F41' }, figma: { primary: '#333333' } },
      maxWidth: { card: '358px', canvas: '390px', btn: '370px' },
    },
  },
};

产品工程演示：cd app && npm run dev · 路由 #/（HomeNavbar）· #/card-detail/stored（卡详情）· 组件 HomeNavbar / PageTitleBar / MemberCard / Button。

0概述与 AI 使用指引

剑琅联盟 AI Ready v1.6 · 390×844 · Tailwind CDN + Vite App

本规范为剑琅联盟（含 RTP 商品零售模块）专属。请先阅读并遵守 ★ 全局强制 UI，再使用下方组件库与 Token 章节。

AI 批量出图必读规则

第一优先级：完整执行 ★ 全局强制 UI（直角画板、所有 Frame 自动布局、#F7F7F7 底、无阴影无渐变、顶/底白块占位、色板、字体、图标尺寸、间距、圆角、44px 导航、48px 按钮、返回 chevron-left 矢量图标）。组件使用第 7 章命名（如 PageTitleBar、TabBar），视觉不得违背全局章。

组合组件：优先从第 7 章组件库按场景选用；库内无合适项时可从外部引入，视觉须符合本规范。
图标与组件：优先第 6、7 章库内资源；无合适项时可调用外部图标 / 组件，仍须遵守 ★ 全局强制 UI，并注明来源。
颜色 / 圆角 / 间距：仅使用全局章与第 2–5 章 Token；按钮圆角四档择一且同类型一致；禁止投影与渐变背景。
金额排版：数字默认 TCloudNumber Regular（400）；字号 ≥24px 时用 Bold（700）；商品卡/列表价 14px 固定 Regular；¥ 与「应付/实付」等用 UI 字体（苹果 PingFang SC / Windows 思源黑体），¥ 与数字间距 4px。
字体按设备：苹果 → PingFang SC；Windows → 思源黑体 Source Han Sans SC（勿在 Windows 稿中用 PingFang SC）。
勾号：确认/正确态只用图标 check，禁止文字 √。
品牌露出：启动/登录/首页 Navbar 使用 LOGO2.png 与「剑琅联盟」。
硬性约束：画布无圆角/无阴影/无描边 · 所有 Frame 自动布局 · 居中弹窗左右边距 32px · 状态栏占位 390×53 白块 · 底栏占位 390×34 白块 · 返回用 chevron-left 矢量图标 · 白底内容卡片无描边 · 卡片/列表内分隔线 0.5px #EDEDED 左右缩进 16px · 无 emoji · 无文字勾号 √/✓ · 按钮文案水平垂直居中 · Tab/卡片不叠压 · 内页顶栏必用 PageTitleBar（44px，独立于状态栏） · 标题与右侧文案底对齐 · 标题栏/Tab 主体无描边 · 图片位灰底白 icon · 内容不横向溢出 · 按钮宽 ≤370px · 顶 Tab 390 居中 · 卡片不溢出 · 提示 icon 首行底对齐 · 空状态垂直居中。

技术栈对齐

层级	引用	说明
组件库	第 7 章 · 剑琅联盟	页面组件命名、预览与调用说明
开发落地	HTML + Tailwind CSS	CDN（规范站）→ Vite + Capacitor（WebView 产品）· Token 见 0.1
设计稿	RTP 零售模块 Figma	节点 72-137 · 与 HTML 原型库同步
设计资源	Figma 实测 + Lucide + 图标库	Lucide 线性图标 · 业务映射表 · 过渡保留 Stratis/Iconex SVG
设计基准	宽 390（固定）× 高 844（默认）	高可向下延展；顶占位 53px · 底占位 34px
UI 字体	苹果 PingFang SC · Windows 思源黑体	见全局字体按设备；金额仍 TCloudNumber
全局 UI	★ 强制章节	高于本章与 Figma 历史稿
主按钮	高 48px · 字号 16px · 圆角 4/8/12/16 择档	见全局章 · 同类型一致

1设计原则

高效 Efficient

减少操作步骤，常用功能 2 次点击可达。列表支持搜索、筛选、批量操作。表单支持自动填充与历史记录。

清晰 Clear

信息层级分明，关键数据突出。状态用颜色+文字双重标识。空状态、加载态、错误态均有明确指引。

一致 Consistent

全局统一导航、按钮、表单、反馈方式。同类业务使用相同页面结构与组件组合。

专业 Professional

视觉克制：无阴影、无渐变、扁平分区。品牌色用于关键操作与状态强调，不作为大面积铺底（顶栏等见全局章例外）。

视觉风格关键词

商务 · 简洁 · 可信赖 · 数据驱动 · 操作明确 · 留白适度 · 白底灰底交替分区

2色彩系统

色值以 ★ 全局强制 UI 为准。下表为 Token 映射；10 级品牌色阶供按下态/禁用推导，日常界面优先使用全局章固定色板。功能色用于状态标识，须配合图标与文字说明。

2.1 品牌色 Brand Color

brand-1#FEF0F1 · 浅色背景

brand-2#FDD9DC · 悬浮背景

brand-3#FCBDC3 · 选中背景

brand-4#FB9BA3 · 禁用/边框

brand-5#F97883 · 悬浮态

brand-6 ★#F32F41 · 主色

brand-7#D92939 · 点击态

brand-8#BF2432 · 强调

brand-9#991D28 · 深色文字

brand-10#73161E · 最深

2.2 功能色 Functional Colors

语义	浅色背景	常规色	深色/点击	使用场景
成功 Success	#E8F8F2	#2BA471	#008858	完成、通过、已生效
警告 Warning	#FEF3E6	#E37318	#BE5A00	待处理、即将到期
错误 Error	#FDECEE	#D54941	#AD352F	失败、驳回、异常
信息 Info	#ECF2FE	#0052D9	#003CAB	提示、链接、信息说明

2.3 中性色 Neutral Colors

Token	色值	用途
gray-1 ★	#F7F7F7	页面背景 bg-page
gray-2 ★	#EDEDED	禁用底 / 卡片·列表内内容分隔线
gray-3 ★	#D7D7D5	边框 border（非内容分隔线）
gray-4 ~ gray-8	#DCDCDC ~ #777777	图标、占位、次要元素
gray-9 ~ gray-12	#5E5E5E ~ #2C2C2C	深色文字、深色模式基础

2.4 文字色 Text Colors（Figma 主页面实测 ★）

Token	色值	用途
text-primary ★	#333333	标题、正文、导航文字（优先于 rgba 黑）
text-secondary ★	#929292	描述、数据标签、次要信息
text-muted	#B8B8B8	日期 Tab 未选中、弱提示
text-inactive	#D7D7D5	分段器未选中（如实业绩）
text-placeholder	#929292	输入框占位符（与 text-secondary 同色 · 表单页）
text-disabled	#929292	禁用文字（与 :root 一致）
text-brand	#F32F41	品牌强调、可点击文字
text-link	#0052D9	超链接（区别于品牌色）
text-anti	#FFFFFF	深色/品牌色背景上的文字

2.5 场景色（业务扩展 · 禁止渐变）

Token	色值	用途
brand-aux-1	#FFD5D9	浅色强调底、标签底
brand-aux-2 ★	#FFF2F2	业绩卡、品牌浅区块（纯色）
accent-blue	#1A70FE	提醒条文字、可点击「查看」
accent-blue-bg	#E7F1FF	异常/重要提醒条背景
accent-orange	#F77357	营销副标题、活动强调

2.6 背景与边框

Token	色值	用途
bg-page ★	#F7F7F7	页面底色
bg-container ★	#FFFFFF	卡片、Cell、弹窗
bg-disabled ★	#EDEDED	禁用按钮、浅灰块
border ★	#D7D7D5	默认边框 1px（非内容分隔线）
border-focus	#F32F41	输入框聚焦边框

2.7 色彩使用比例（B端）

页面 70% 中性色（白/灰背景）+ 25% 文字色 + 5% 品牌/功能色点缀
主按钮、Tab 选中、关键链接：brand-6
大面积禁止使用 brand-6 作为背景（除 Navbar 品牌头图等特殊场景）
状态色仅用于 Tag、Badge、NoticeBar，不做按钮主色（除 Danger 操作）

3字体排版

3.1 字体家族

UI 正文字体按目标设备二选一，勿混用。完整说明见 ★ 全局强制 UI · 字体规范。

用途	字体	说明
UI 字体 · Apple ★	PingFang SC	macOS / iOS / iPadOS 设计稿与实现
UI 字体 · Windows ★	Source Han Sans SC（思源黑体）	替代 PingFang SC；避免 AI 识图误判
字重 Regular	400	正文、描述
字重 Medium	500	标题、按钮、强调
字重 Semibold	600	核心数据数字（非 TCloudNumber 时）
数据字体 ★	TCloudNumber v1.010	金额纯数字与小数点；默认 Regular 400 · ≥24px 用 Bold 700
金额混排 ★	`¥`、应付/实付/小计 → UI 字体	`¥` 与数字间距 4px

3.1.1 TCloudNumber 字体包（v1.010）

官方数据字体。金额数字默认 TCloudNumber-Regular（400）；字号 ≥24px 的大指标使用 TCloudNumber-Bold（700）。

¥1,286.40

下载 Bold 下载 Regular 下载 Light 下载 VF 可变

Web UI 字体：苹果 PingFang SC · Windows / 安卓 Source Han Sans SC（思源黑体）。金额：font-family: TCloudNumber · 通过 @font-face 引入 assets/fonts/TCloudNumber/ · Tailwind 使用 font-data / font-ui。

3.2 字号阶梯（390px 画布，单位 px）

Token	字号	行高	字重	场景
font-xs	10	16	400	极小标签
font-tabbar ★	11	15	400	标准底栏 Tab 文案
font-s	12	20	400	辅助说明、时间戳、Badge
font-base ★	14	22	400	正文、Cell 标题、表单标签
font-m	16	24	400/500	Navbar 标题、列表主标题
font-l	20	28	500	区块标题、关键数据
font-xl	24	32	500	页面大标题、统计数字
font-xxl	28	36	500	登录页标题、空状态标题
font-data ★	20	22	400 (TCloudNumber-Regular)	业绩卡、实付等常规金额
font-data-lg ★	32	40	700 (TCloudNumber-Bold)	仪表盘大指标（≥24px 规则）
font-nav-label	11	15	400	标准底栏 Tab 文案（同 font-tabbar）
font-grid-label	13	18	400	店务宫格入口（价目表等）

3.3 排版规则

单行文字超出使用省略号 text-overflow: ellipsis
多行描述最多 2 行，超出截断
金额数字默认 font-weight: 400（TCloudNumber-Regular）；字号 ≥24px 时用 700（TCloudNumber-Bold）
商品卡 / 列表价 14px：固定 Regular，不受 ≥24px 规则影响
数字金额右对齐，使用千分位；日期格式 YYYY-MM-DD HH:mm
中英文混排时英文与中文之间无需额外空格（中文产品惯例）
禁止低于 10px 的可读文字（标准底栏 Tab 文案为 11px）
确认、勾选、步骤完成等不得使用文字勾号（√ / ✓），须用第 6 章 check 或 check-circle-filled 图标

4间距与布局

间距以 ★ 全局强制 UI 为准（16 / 8 / 12 / 4px 等），下表为扩展 Token。

4.1 间距 Token（4px 基准网格）

Token	值	用途
size-1	4px	图标与文字间距、紧凑内边距
size-2	8px	Tag 内边距、小间距
size-3	12px	Cell 内部间距、表单字段间距
size-4 ★	16px	页面左右边距、卡片内边距
size-5	20px	区块间距
size-6	24px	大区块间距、Section 分隔
size-8	32px	页面顶部留白
size-10	40px	大按钮高度、输入框高度（large）
size-12	48px	主按钮高度、Bottom Bar 按钮区

4.2 页面布局常量

画布尺寸规则 ★
· 宽度：固定 390px，所有页面设计、HTML 原型与 AI 出图不得改变宽度，禁止横向扩展画布。
· 高度：默认 844px（常见全面屏逻辑高度基准）；当显示内容超出默认画布可视区域时，画布高度可向下延长，以完整呈现可滚动内容，宽度仍为 390px。
· 画布外框 ★：交付设计稿画板为直角矩形，无圆角、无阴影、无描边（不含页面内组件样式）。

元素	尺寸	说明
画布宽度 ★	390 px（固定）	全站统一，禁止加宽
画布高度（默认）	844 px	首屏/短页基准；AI 出图默认从此高度起稿
画布高度（延展）	≥ 844 px，按内容向下增高	长列表、多段表单、长详情等；仅纵向扩展
WebView 2x 切图	宽 780 · 高 1688 起	逻辑宽 390 固定；高度 2x 随设计稿延展
画布外框 ★	直角矩形	画板禁止圆角 / 投影 / 外描边
Figma 自动布局 ★	全部 Frame	须启用 Auto Layout，禁止纯绝对定位摆版
页面水平边距	16px	内容区距屏幕边缘
PageTitleBar ★	44px	内页顶栏 · 组件库「页面标题栏」· 白底 · 主体无描边
TabBar 高度	56px	内容区高度；与底安全区 34px 分两层（合计 90px 白底）
TabBar 背景 ★	`#FFFFFF`	`--bg-container`
底部栏顶部分离 ★	`0 -0.5px 4px 0 rgba(0,0,0,0.08)`	`--bottom-surface-shadow` · TabBar / Bottom Action Bar 共用
状态栏占位 ★	390×53px 纯白块	设计稿不画系统状态 UI；与 PageTitleBar（44px）分属上下区域
底部占位区 ★	390×34px 纯白块	对齐 iPhone 17 竖屏底部安全区；设计 / 开发均为 34px；无阴影、无描边、无圆角
居中弹窗边距 ★	左右各 32px	ModalPopup/centered · 内容宽 326px
底部弹窗边距 ★	左 / 右 / 下 0	ModalPopup/bottom · 390 通栏贴底
列表行高	56px	标准单行列表
列表行高（多行）	≥72px	含描述文字
Bottom Action Bar	56px + safe-bottom	固定底部操作栏

4.3 布局结构示意

剑琅联盟 · 390 × 844

剑琅联盟

商务协作 · 高效共赢

启动页 · 390×844 · 顶状态栏 53px · 底安全区 34px

订单详情

内容卡片

左右 16px · 模块间距 16px · 圆角 12px · 无描边

列表行 · 高度 56px

● 首页● 工作台● 消息● 我的

标准内页 · TabBar 56px + 底安全区 34px · 内容卡片无描边

5圆角

圆角以 ★ 全局强制 UI 为准，下表为 Token 命名映射。

5.1 圆角 Token

Token	值	用途
radius-tag ★	4px	标签、角标
radius-input ★	8px	输入框、小模块、搜索框
radius-card ★	12px	全局卡片、弹层顶角
radius-btn-4	4px	紧凑按钮、表格内操作
radius-btn-8	8px	卡片内次要按钮、并排双钮
radius-btn-12 ★	12px	表单提交、页内主操作（推荐默认档）
radius-btn-16	16px	底部栏主按钮、强强调 CTA
radius-circle	50%	Avatar、圆形图标底

5.2 按钮圆角选用（同类型须一致）

按钮类型	建议圆角	说明
底部栏主按钮 / 次按钮	16px 或 12px	同一 App 底栏两套按钮须同值；与卡片圆角可不同
表单页「提交」「保存」	12px 或 8px	与登录页主钮保持同档
列表 / 弹窗内描边、幽灵钮	8px 或 4px	与同级列表操作钮一致
品牌图标方形钮	8px	属图标按钮，非文字按钮；见全局第 14 条

禁止在同一类型混用两种圆角（例如底栏左「取消」8px、右「确定」16px）。选定后写入设计 Token / 组件变体名（如 Button/r16）。

圆角可视化

radius-tag

4px

radius-input

8px

radius-card

12px

按钮圆角四档（高 48px）

5.3 阴影（全局禁用）

剑琅联盟移动端默认不使用投影层级（--shadow-1/2/3 均为 none）。卡片、弹层、Fab 等通过白底/灰底、1px 边框（--border）、圆角与间距区分层次；例外：TabBar、Bottom Action Bar 顶部分离投影见 ★ 全局强制 UI。

6图标库（可直接调用）

Web 落地（阶段 1）：新 HTML 组件优先使用 Lucide（如 MemberCard 删除 trash-2： + lucide.createIcons()）。既有规范图标仍走下方 Stratis / Iconex / WeChat 三套库。

尺寸与颜色以 ★ 全局强制 UI 为准。优先调用本库已有图标；库内无合适项时，可从外部引入矢量图标，须符合全局尺寸与色板，并标注来源。图标库由三套 Figma 资源构成：Stratis UI Icons（主库）· Iconex Freebie（补充）· WeChat UX Kit（微信场景精选，icons/wechat/、icons/wechat-filled/，构建见 scripts/build-wechat-ux-icons.js）。解析顺序：Stratis → Iconex → WeChat；卡片分别标注 Iconex / WeChat。微信专属语义优先用 wx-* 命名；可与 Stratis 等价的项在目录中带 alias 仍显示 Stratis 资源。

Stratis UI Icons · 1000+ 免费图标
Figma Community · 主图标库（线性 / 面性）

Iconex · Freebie icons
Figma Community · 补充促销、媒体、分类、包裹等场景（本规范已精选 115 个）

WeChat UX Kit · Le Wagon
微信生态组件与图标 · 本规范已精选 30 个图标 + 组件映射表（见 7.0）

6.0 设计稿功能 → 图标映射（剑琅管家 / RTP）

设计稿文案	图标名	分类	说明
开单	`file-add` 或 `edit-1`	美业	顶栏快捷区，可用定制 SVG
开卡	`creditcard`	美业	会员卡开卡
验券	`coupon`	美业	核销验券
结算	`wallet`	美业	收银结算
价目表	`view-list`	美业	宫格 38px 区
会员卡	`creditcard`	美业	会员管理入口
会员管理	`usergroup`	美业	—
员工管理	`member`	美业	—
预约	`calendar`	美业	—
经营分析	`chart`	美业	—
业绩排行	`chart-bar`	美业	—
联盟广场 / 商城 Tab	`shopping-bag`	零售	TabBar 商城 · Iconex
首页 Tab（选中）	`home-tab-filled`	导航	定制 · 门洞圆头粗短线
首页 Tab（未选）	`home-tab`	导航	定制线性
客户 Tab	`user`	导航	—
业绩 Tab	`chart-line`	导航	—
工作台 Tab	`app`	导航	—
上架到店	`add`	零售	选品卡片主按钮
购物车	`cart`	零售	底栏 Badge 数量
供货价/零售价	`money`	零售	价格三档表单
物流	`undertake-delivery` 或 `box-package`	订单	Iconex 包裹
促销/特卖	`sale` / `sale-filled`	零售	Iconex
商品分类	`category` / `category-filled`	零售	Iconex
领券	`coupon-badge` / `sale-tag-filled`	零售	Iconex
计时/服务时长	`timer` / `timer-filled`	美业	Iconex
语音/客服	`microphone` / `headphones-filled`	通讯	Iconex
朋友圈	`wx-moments`	社交	WeChat
小程序	`wx-miniprogram`	系统	WeChat
付款码	`wx-pay-code`	订单	WeChat
卡券包	`wx-coupon-wallet`	零售	WeChat
扫一扫	`wx-scan` 或 `scan`	操作	WeChat / Stratis
转账	`wx-transfer`	订单	WeChat
公众号	`wx-official-account`	通讯	WeChat

调用方式：线性  · 面性  · Figma Stratis UI Icons · AI 标注 icon:search / icon:home-filled

Token	px	用途
icon-sm ★	16	小箭头、辅助图标
icon-base ★	24（安全区 20）	通用功能图标、Navbar、按钮内

图标颜色

重要操作 #F32F41 · 常规 #333333 · 次要 #929292 · 反色 #FFFFFF

浏览与检索

线性优先 Stratis；面性为 -filled 后缀；wx-* 为 WeChat UX Kit 精选（构建脚本导出 SVG）。Iconex / WeChat 卡片有来源标签。面性适用于 Tab 选中、状态强调。

7组件库（可调用）

以下为剑琅联盟移动端可调用组件。优先选用本目录已有组件；库内无合适项时，可从外部 Figma 资源或业务组件引入，视觉须遵循 ★ 全局强制 UI，并标注来源。AI 出图须标注 组件名 + 变体。微信生态页面可参考 WeChat UX Kit 结构，但颜色、圆角、按钮、无阴影仍以本规范为准。

7.0 WeChat UX Kit 组件映射Le Wagon · 精选

左列为 Figma 源组件名，右列为剑琅规范内应标注的组件 ID。落地时视觉不得使用微信绿顶栏/投影，须套入全局 Token。

WeChat UX Kit	规范组件 ID	名称	说明

SearchBar 搜索栏

搜索订单、客户

ActionSheet 动作面板

分类	组件 ID	名称	场景
导航	PageTitleBar	页面标题栏	内页顶栏必用 · 左右等宽栅格 · Lucide 返回 · Figma 6-623（仅顶栏）
导航	HomeNavbar	首页顶栏	左 Logo 28px + 品牌名 16px · 见 7 章
导航	PageTabs	顶部 Tab 条	宽 390 居中 · 页面级分段
导航	TabBar	标准底栏	子模块 3–4 Tab
反馈	AlertBanner	提示信息栏	图标与首行文案底对齐
反馈	ActionSheet	动作面板	WeChat UX · 底出菜单 · 见 7.0
反馈	ModalPopup	弹窗	全局通用 · 7 变体 · 见 7.1
反馈	Toast	轻提示	屏幕居中 · 无图标 · 见 7.2
反馈	Dialog	简易对话框	轻量确认 · 与 ModalPopup 并存
表单	SearchBar	搜索栏	WeChat UX · 圆角 8px 灰底
通讯	ChatBubble	聊天气泡	WeChat UX · 客服/IM
营销	PromoCard	营销卡（纯色底）	获客/推客 · 无渐变
零售	ProductCard	商品双列卡	选品上架
零售	PriceRow	价格三档行	原价/零售/供货
美业	MemberCard	会员卡	详卡 · 列表条 · 五类卡面主题
零售	CartBar	商品底栏	店铺/客服/加购/购买
基础	Button / Input / Tag / …	通用基础组件	见下方预览

ProductCard 商品卡RTP 选品 · 双列 grid

馥绿德雅

复合精油按摩护理油 100ml

¥128

建议售 ¥298 · 毛利 ¥170

馥绿德雅

头皮深层洁净洗发露 200ml

¥86

已上架 · 销 32 件

PriceRow 价格三档PRD-214 · list/retail/supply

原价（划线）

¥298

零售价

¥168

供货价

¥128

渠道价

¥118

编辑页表格：规格 × 原价/零售价/供货价/库存 · 分销默认渠道价=供货价

MemberCard 会员卡RTA-R1 · node 1122-1114 · 详卡 + 列表条

卡面使用切图背景（assets/member-card/）· 详卡 Frame 五张 · 列表条 Mask 五张 · CTA 色由切图主色推导。AI 标注：MemberCard/detail + --stored 或 MemberCard/compact + --times。

形态一 · 详卡 MemberCard/detail

详卡像素对齐 RTA-R1 · 头区 168px / padding 24px · 白区 12px #8E8E8E · 开单 28px · 删除仅图标。

储值卡

享受折扣所有项目8折

卡内余额 ¥2000.99

有效期限：永久有效

赠送项目：洗吹3次，烫染1次，洗吹3次，烫染1次…

五类详卡（横向对照）

储值卡

享受折扣所有项目8折

卡内余额¥2000.99

有效期限：永久有效

赠送项目：洗吹3次，烫染1次…

计次卡

享受折扣所有项目8折

卡内余额¥2000.99

有效期限：永久有效

赠送项目：洗吹3次，烫染1次…

折扣卡

享受折扣所有项目8折

卡内余额¥2000.99

有效期限：永久有效

赠送项目：洗吹3次，烫染1次…

周期卡

享受折扣所有项目8折

卡内余额¥2000.99

有效期限：永久有效

赠送项目：洗吹3次，烫染1次…

套餐卡

享受折扣所有项目8折

卡内余额¥2000.99

有效期限：永久有效

赠送项目：洗吹3次，烫染1次…

形态二 · 列表条 MemberCard/compact

高度 48px · 圆角 10px · Mask 切图含左侧类型名标签 · 仅显示卡名称 · 保留 1px 描边。

储值3000元

剪发5次卡

烫染5折卡

美发卡

套餐5次卡

页面场景 · 卡详情

compact 卡置于 PageTitleBar 下方 · 卡统计区块（持卡人数 / 总计余额）。

卡详情

储值3000元

卡统计

持卡人数

0人

总计余额

2000元

修饰符	详卡切图	开单按钮	列表条切图
`--stored`	`stored-detail.png`	#BDD5ED	`stored-compact.png`
`--times`	`times-detail.png`	#B9D4DD	`times-compact.png`
`--discount`	`discount-detail.png`	#E1C789	`discount-compact.png`
`--period`	`period-detail.png`	#E3BFB3	`period-compact.png`
`--package`	`package-detail.png`	#D7C3A8	`package-compact.png`

详卡宽 358 · 头 min-height 168px · 头 padding 24/16/16 · 头底 gap 8px · 白区 padding-top 8px · 底栏 padding 14px · 开单 28px · 资源 assets/member-card/。

Button 按钮Button · primary · radius 4px

变体	规格
Primary ★	高 48px · 字号 16px / 500 · 圆角四档择一 · 红底 #F32F41 + 白字 · 无投影
字号变体	默认 16px · `btn-sm` 14px · `btn-lg` 16px（加宽 padding）
文案对齐 ★	按钮内文字水平 + 垂直居中（flex 居中或等价实现；禁止偏上/偏下/单侧留白不均）
Outline ★	白底 + 红字 + 红描边 1px · 与同级 Primary 相同圆角
Disabled	圆角与同页主按钮一致 · bg #EDEDED
BottomBar 示例	取消 Outline `btn--r16` + 确定 Primary `btn--r16`
最大宽度 ★	370px（通栏亦同，左右各约 10px 留白）
Block	宽度 100%，且 max-width 370px
BottomBar	双按钮：左 Outline + 右 Primary，间距 12px
填充 / 描边 ★	填充：红底白字 · 描边：白底红字红边（对话框、底栏同规）

HomeNavbar 首页顶栏Logo 28px + 品牌名 16px

首页 / 工作台等无返回场景使用；与内页 PageTitleBar 分轨。位于状态栏占位（53px）之下，栏高 44px，白底、主体无描边。产品工程：renderHomeNavbar() · app/src/components/home-navbar.js。

属性	值	说明
栏高 ★	44px	`--nav-h` · 白底 · 无描边
Logo ★	28×28px	`LOGO2.png` · 与品牌章一致
品牌名	16px / 500 / #333	`<h1 class="u-home-navbar__title">`
左内边距	16px	Logo 与文案间距 8px
与 PageTitleBar	分轨	首页用本组件；内页用 PageTitleBar（含返回）

PageTitleBar 页面标题栏RTS-AI · node 6-623（仅顶栏）

RTS-AI 读稿 · Figma 6-623 为整页 Home 稿（含 Tab、内容区）；本组件仅对齐其顶栏区域。设计页 / 原型 / AI 出图内页顶栏必须调用 PageTitleBar；返回图标统一 Lucide chevron-left（与 app/ 一致）。首页品牌头请用 HomeNavbar。

默认 · 返回 + 标题 + 操作

订单详情

无返回

工作台

无右侧操作

订单列表

图标 + 文案操作（对齐 Figma「我的推广」）

首页

次要操作 muted

编辑资料

长标题省略

剑琅联盟门店业绩统计与对账明细

与 Figma 6-623 实测差异（仅顶栏相关）
项	Figma 6-623 实测	本规范 PageTitleBar
引用范围	整页 Home（Tab + 内容区）	仅顶栏 44px 区域
顶区总高	Header 约 90px（含状态区）	状态栏占位 53px + 标题栏 44px
标题字号	17px Medium	18px / 500（规范统一）
右侧操作	图标 +「我的推广」	16px 文案；可选 `action--icon` 变体
返回图标	chevron-left 24px	Lucide chevron-left 24px · #333
标题栏描边	无	无（主体无描边）

属性	值	说明
状态栏占位 ★	390×53px	纯白块，不画系统状态元素
标题栏高度 ★	44px	白底 · 主体无描边
栅格列宽 ★	`--page-title-bar-side` 72px · 1fr · 72px	左右等宽，标题几何居中
标题	18px / 500 / #333	`<h1 class="title">` · 过长单行省略
文案对齐 ★	底对齐	标题与右侧操作文字底部在同一水平线；返回区垂直居中
返回 ★	Lucide chevron-left · 24px	`<a class="back">` 44×44 · 禁止文字 `<`
右侧操作	16px · #333	`<button class="action">` · `action--muted` · `action--icon`
变体	见上方预览	`--no-back` · 无操作 · 图标文案 · muted · 长标题
调用 ★	设计页必用	内页 PageTitleBar · 首页 HomeNavbar
禁止	—	标题栏内不放 Logo（首页等特殊场景用 HomeNavbar）

PageTabs 顶部 Tab宽 390 · 画布居中

全部待处理已完成

内容区 · Tab 与卡片上下排列，间距 16px · 白底无描边

属性	值
容器宽 ★	390px，相对画布水平居中
高度	48px · 白底 · 主体无描边
指示器	32×3px · brand-6 · 贴底居中（非容器描边）

TabBar 标准底栏子模块页 · 非首页

首页

商城

购物车

我的

属性	值
首页图标 ★	`home-tab-filled`（选中）· 门洞为圆头粗短线 · 定制 SVG
商城图标 ★	`shopping-bag`（Iconex 外部库）
图标 ★	24×24 · 未选中线性 · stroke-width 1.5
选中态 ★	切换为品牌色面性图标（`-filled`）· 文案 #F32F41
文案	11px · 未选中 #929292
栏高	56px 内容区 + 34px 底安全区 · 白底 `--bg-container` · 主体无描边
顶部分离 ★	`box-shadow: 0 -0.5px 4px 0 rgba(0,0,0,0.08)`（`--bottom-surface-shadow`）

Tabs 选项卡Tabs

全部待审批已完成

高 48px · 主体无描边 · 选中指示器 32×3px brand-6（居中 · 长度为原 16px 的两倍）· ≤4 项等分

Search 搜索框Search

搜索订单、客户

高 36px · bg gray-1 · 圆角 capsule · 图标 search 20px

Input / Textarea 输入Input · Textarea

多行文本输入…

0/200

Input 高 40px · 圆角 6px · 聚焦 border brand-6 · 必填标签前红色 *

Tag / Badge 标签与徽标Tag · Badge

草稿待审批已通过即将到期已驳回消息 8

Switch / CheckBox / RadioSwitch · CheckBox · Radio

记住账号选项 A

勾号 ★	规格
禁止	字符 `√`、`✓`、Unicode 勾形文字
多选已选	`check` · 16px · 白 icon 于品牌色 20×20 方底
步骤完成 / 成功	`check` 于成功色圆底，或 `check-circle-filled` 16px

Steps 步骤条Steps

提交

审批

完成

圆点与步骤文案间距 8px · 完成态勾号 17px

NoticeBar / AlertBanner 提示信息栏图标 · 首行底对齐

您有 3 条待审批事项请及时处理

这是一条可换行的提示信息，前置图标与第一行文字底部对齐，不得相对整段垂直居中。

属性	值
图标 ★	16px · 与第一行文案 baseline 底对齐
文案	13px · 行高 1.5 · 可换行
间距	图标与文字 8px

7.1 ModalPopup 弹窗全局通用 · Figma xqMgMp7wLhmEvvgiv6rSdW

剑琅联盟全局通用弹窗组件（居中 / 底部共 7 变体）。视觉服从 ★ 全局强制 UI（无阴影、按钮高 48px、次钮 Outline、主钮 Primary）。不含遮罩层。设计稿参照 Figma · xiaobin。AI 标注：ModalPopup + 变体。

属性	居中弹窗	底部弹窗
边距 ★	左右各 32px（宽 326px）	左 / 右 / 下均为 0（宽 390 贴底）
圆角	16px 四角	顶左 / 顶右 16px · 底边 0
内边距	20px	上 20 · 左右 20 · 下 40
标题	17px / 600 / #333 · 居中
副文案	16px / 400 / #929292 · 居中
按钮区	距文案 8px · 间距 12px · 高 48px · 圆角 12px
双按钮顺序	左 Outline 取消 · 右 Primary 确定
Icon 媒体	40×40 圆底 #EDEDED · 24px SVG · `icons/xiaobin/bell-notification.svg`
Image 媒体	宽 100% · 高 135px · 圆角 8px · 占位 #EDEDED + 白 image icon

变体预览

与 Figma 初稿差异：去除弹窗/按钮投影；次按钮由灰底改为 Outline；按钮高度 48px；居中弹窗边距按规范 32px。

Dialog 对话框轻量确认

确认驳回？

驳回后需重新提交审批，是否继续？

按钮	规格
填充按钮 ★	红底 `#F32F41` + 白字
描边按钮 ★	白底 + 红字 + 红描边 1px

轻提示请使用独立组件 Toast，勿与本 Dialog 混用样式。

Toast 轻提示业绩PK动画设置 · node 27-381

用于操作结果、权限不足等短时反馈。视觉以 Figma · 业绩PK动画设置 · 27-381 为准。AI 标注：Toast/default。

单行 · 未触达边距不换行

保存成功

多行 · 触达左右 40px 边距后换行

暂无查看权限，请联系店主开通相关权限后再试

属性	值
位置 ★	屏幕水平 + 垂直居中（相对 390 画布内容区）
填充色 ★	`#333333` · 不透明度 90%（`rgba(51, 51, 51, 0.9)`）
圆角	4px
内边距 ★	左右 16px · 上下 10px
字体 ★	思源黑体（Source Han Sans SC / CN）
字色 ★	`#FFFFFF`
字重 ★	Regular（400）
字号 ★	14px
行高 ★	20px
字距 ★	0
对齐	单行 / 多行文案均水平居中
换行 ★	外缘距画布左右各 40px（`--toast-margin-h`）后自动换行 · 不限制行数
宽度	随文案自适应 · 最大宽 `310px`（`--toast-max-width` = 390 − 40×2）
图标	无（纯文字 Toast）
遮罩	无 · 不阻断页面操作
阴影	无
展示时长	建议 2–3s 自动消失（实现层约定）

与 NoticeBar / AlertBanner（页内条）区分：Toast 为浮层短时提示；与 Dialog / ModalPopup 区分：Toast 无按钮、无标题、无遮罩。

Empty / Result 空状态与结果页RTP 零售 · node 666-1758

占位插画以 RTP 零售模块 · Figma 666-1758 为准。AI 标注：Empty/default · 插画类 u-empty__illustration。

订单列表

暂无订单数据

点击下方按钮创建第一笔订单

属性	值
插画外框	144 × 128px（含装饰圆；Figma 实测）
主圆底	120 × 120px 正圆 · 填充 `#FFFFFF`（`--bg-container`）
主圆偏移	距外框左 16px · 上 8px
文件图标	57 × 57px · 描边 `#D1D5DC`（`--empty-state-icon`）· 资源 `assets/empty-state/file-icon.svg`
装饰圆（右上）	24 × 24px · `#e5e7eb` · 不透明度 50%
装饰圆（左下）	16 × 16px · 同色同透明度
布局	插画 + 文案组在内容区垂直居中；主按钮宽 ≤370px

Avatar 头像Avatar

尺寸 32 / 40 / 48px · 圆形 · 默认 gray-3 底

Progress / Loading 进度与加载Progress · Loading

加载中…

Fab 悬浮按钮Fab

48×48 圆形 · brand-6 · 无投影 · 列表页「新建」

Upload 上传Upload

上传

虚线框 80×80 · 支持图片/PDF · 表单附件区

Skeleton 骨架屏Skeleton

Bottom Action Bar 底部操作栏固定底栏

按钮	规格
主操作（填充）★	红底白字 · brand-6
次操作（描边）★	白底红字红描边
布局	高 56px + safe-bottom · 双按钮间距 12px · 圆角同档（建议 16px）· 白底 · 主体无描边
顶部分离 ★	`box-shadow: 0 -0.5px 4px 0 rgba(0,0,0,0.08)`（`--bottom-surface-shadow` · 与 TabBar 共用）

Divider 分割线Divider / inset

卡片内、列表 Cell 组内分隔同级内容时使用 Divider/inset：线粗 0.5px · 色 #EDEDED · 左右缩进 16px，两端与内容对齐，禁止左右贴容器外缘。类名：u-divider u-divider--inset。

区块标题 A

同级内容 · 左右 16px

区块标题 B

分隔线两端与上文对齐，不贴卡片左右边

属性	值
变体 ★	`Divider/inset` · 卡片内 / 列表 Cell 组内同级分隔
线粗 ★	0.5px（`--divider-weight`）
颜色 ★	`#EDEDED`（`--gray-2` / `--divider-color`）
左右缩进 ★	各 16px（`--divider-inset` = `--space-card`）· 与内容对齐
上下留白	默认 12px（`--space-divider-y`）
禁止	左右通栏贴边（贴卡片或列表容器外缘）

Card 业务卡片组合组件

本月销售额

¥1,286,400

↑ 12.5% 较上月

白底 #FFFFFF · 圆角 12px · padding 16px · 无描边 · 金额 28px · TCloudNumber-Bold（≥24px）· 用于工作台数据概览

8B端业务专项规范

8.1 状态色映射（通用）

业务状态	Tag 类型	颜色
草稿 / 未提交	default	gray-1 / text-secondary
待审批 / 进行中	brand	brand-1 / brand-6
已通过 / 已完成	success	success-1 / success-6
已驳回 / 已取消	error	error-1 / error-6
即将到期 / 待补充	warning	warning-1 / warning-6
已归档 / 只读	default	gray-2 / gray-8

8.2 数据展示

金额：¥ 前缀 + 千分位 + 2 位小数，font-m Medium，正数 text-primary，负数 error-6
百分比：保留 1 位小数 + % 后缀
日期：YYYY-MM-DD；时间：HH:mm；完整 YYYY-MM-DD HH:mm
ID/编号：font-s text-secondary，可复制，点击 Toast「已复制」
大数字概览：font-data-lg（≥24px Bold）+ 单位 font-s text-secondary

8.3 权限与空状态

无权限：Result 页 + lock 图标 + 「暂无访问权限」+ 联系管理员
无数据：Empty + 引导创建按钮
搜索无结果：Empty + 「未找到相关内容」
维护中：NoticeBar + 全页 Result

8.4 表单 B 端规则

字段分组：基础信息 / 业务信息 / 附件
长表单：分步 Steps 或锚点 Tabs
只读模式：列表行样式，值 text-secondary，无 Input 边框
审批意见：Textarea 必填，最少 5 字

9Design Token JSON

可复制到 tailwind.config.js 的 theme.extend、CSS 变量，或导入设计工具 Token 插件。

坐标系说明：tokens1x 为 HTML 画布 / CSS 逻辑像素（宽 390）；tokens2x 为 Figma / Flutter 设计稿（宽 780，数值一般为 1x 的 2 倍）。实现 CSS / Tailwind 时仅使用 tokens1x。

{
  "specVersion": "1.6",
  "appName": "剑琅联盟",
  "appLogo": "LOGO2.png",
  "figmaFile": "RTP-零售模块",
  "figmaNode": "72-137",
  "tokens1x": {
    "color": {
      "textPrimary": "#333333",
      "textSecondary": "#929292",
      "textPlaceholder": "#929292",
      "textDisabled": "#929292",
      "textStrong": "#000000",
      "textBrand": "#F32F41",
      "bgPage": "#F7F7F7",
      "bgContainer": "#FFFFFF",
      "bgDisabled": "#EDEDED",
      "border": "#D7D7D5",
      "brand6": "#F32F41"
    },
    "font": {
      "fontXs": { "size": 10, "lineHeight": 16 },
      "fontTabbar": { "size": 11, "lineHeight": 15 },
      "fontS": { "size": 12, "lineHeight": 20 },
      "fontBase": { "size": 14, "lineHeight": 22 },
      "fontM": { "size": 16, "lineHeight": 24 },
      "fontL": { "size": 20, "lineHeight": 28 },
      "fontXl": { "size": 24, "lineHeight": 32 },
      "button": { "size": 16, "weight": 500 }
    },
    "radius": {
      "radiusTag": 4,
      "radiusInput": 8,
      "radiusCard": 12,
      "radiusBtn4": 4,
      "radiusBtn8": 8,
      "radiusBtn12": 12,
      "radiusBtn16": 16
    },
    "layout": {
      "canvasWidth": 390,
      "canvasHeightDefault": 844,
      "statusBarHeight": 53,
      "navBarHeight": 44,
      "tabBarHeight": 56,
      "buttonHeight": 48,
      "buttonMaxWidth": 370,
      "buttonFontSize": 16,
      "bottomPlaceholderHeight": 34,
      "pageTitleBarSideWidth": 72,
      "pageTabWidth": 390,
      "modalMarginHorizontal": 32
    },
    "components": {
      "pageTitleBarBackIcon": "lucide:chevron-left",
      "pageTitleBarTitle": { "size": 18, "weight": 500 },
      "pageTitleBarAction": { "size": 16, "weight": 400 },
      "homeNavbarLogo": 28,
      "homeNavbarTitle": { "size": 16, "weight": 500 },
      "toastMarginHorizontal": 40,
      "toastMaxWidth": 310,
      "toastWrap": "unlimited-lines-center"
    }
  },
  "tokens2x": {
    "note": "Figma / Flutter 设计稿坐标，使用前勿与 tokens1x 混用",
    "designWidth": 780,
    "designHeightDefault": 1688,
    "font": {
      "fontBase": { "size": 28, "lineHeight": 44 },
      "fontM": { "size": 32, "lineHeight": 48 }
    },
    "radius": {
      "radiusCard": 24,
      "radiusBtn12": 24
    },
    "layout": {
      "navBarHeight": 88,
      "buttonHeight": 96,
      "tabBarHeight": 112,
      "pagePaddingH": 32
    }
  },
  "references": {
    "pageTitleBarFigma": "https://www.figma.com/design/44P9g5yKcQEyXdHCayIrMn/RTS-AI读稿?node-id=6-623",
    "modalPopupSource": "https://www.figma.com/design/xqMgMp7wLhmEvvgiv6rSdW/xiaobin",
    "globalUIMandate": "#global-ui"
  }
}

注：画布 390×844 直角无外框；顶状态栏占位 390×53、底安全区 390×34 白块；PageTitleBar 44px 独立于状态栏；按钮高 48px、字号 16px、圆角四档 4/8/12/16；返回 chevron-left 矢量图标。

AI Prompt 模板

请按照《剑琅联盟 移动端设计规范 v1.6》设计 [页面名称]：
- 最高优先级：★ 全局强制 UI — 390×844 直角画板（无圆角/无阴影/无描边）、所有 Frame 自动布局、#F7F7F7 底、无阴影无渐变；按钮高 48px、字号 16px、圆角仅 4/8/12/16 且同类型一致
- 产品：剑琅联盟 · Logo: LOGO2.png
- 字体：苹果 PingFang SC / Windows 思源黑体 Source Han Sans SC（Windows 禁止 PingFang SC）；金额 TCloudNumber 默认 Regular、≥24px Bold；商品价 14px 固定 Regular；¥ 与「应付/实付」用 UI 字体，¥ 与数字间距 4px
- 勾号：仅用图标 check / check-circle-filled，禁止文字 √ 或 ✓
- 文字：#333 / #929292 · 边框 #D7D7D5 · 主色 #F32F41
- 图标：优先第 6 章库（Stratis / Iconex / WeChat）；无合适项可外部矢量图标 · 24px（安全 20）/ 16px · 颜色 #F32F41 / #333 / #929
- 组件：优先第 7 章库；无合适项可外部引入，须符合全局 UI 并注明来源
- 占位：状态栏 390×53 白块；页面最底 390×34 白块（无阴影/描边/圆角）
- 硬性：无 emoji；Figma 所有 Frame 须 Auto Layout；返回用 Lucide chevron-left 矢量图标（禁止文字 <）；白底内容卡片无描边；卡片/列表内分隔线 0.5px #EDEDED、左右缩进 16px（禁止贴边）；按钮高 48px 字号 16px；按钮文案在按钮内水平垂直居中；Tab/卡片不遮挡；内页顶栏必用 PageTitleBar（44px）；首页顶栏用 HomeNavbar；状态栏占位 53px、底栏 34px；标题与右侧文案底对齐；栅格 --page-title-bar-side 72px 左右等宽；Figma 6-623 仅参考顶栏区域；PageTitleBar/PageTabs/TabBar 主体无描边；图片位 #EDEDED+白 image icon；不横向溢出；按钮 max 370px；顶 Tab 390 居中；卡片内容不溢出；提示 icon 与首行底对齐；空状态内容区垂直居中
- 组件：优先第 7 章库；弹窗用 ModalPopup（7.1 · 7 变体）；无合适项可外部引入
- 弹窗：居中左右边距 32px · 底部弹窗左/右/下 0 · 无遮罩入库 · 无阴影 · 按钮 48px
- 内容：[具体业务字段]

★全局强制 UI 规范

页面与组件硬性约束

◎品牌标识 Brand

0.1HTML + Tailwind 落地指引

0概述与 AI 使用指引

AI 批量出图必读规则

技术栈对齐

1设计原则

视觉风格关键词

2色彩系统

2.1 品牌色 Brand Color

2.2 功能色 Functional Colors

2.3 中性色 Neutral Colors

2.4 文字色 Text Colors（Figma 主页面实测 ★）

2.5 场景色（业务扩展 · 禁止渐变）

2.6 背景与边框

2.7 色彩使用比例（B端）

3字体排版

3.1 字体家族

3.1.1 TCloudNumber 字体包（v1.010）

3.2 字号阶梯（390px 画布，单位 px）

3.3 排版规则

4间距与布局

4.1 间距 Token（4px 基准网格）

4.2 页面布局常量

4.3 布局结构示意

5圆角

5.1 圆角 Token

5.2 按钮圆角选用（同类型须一致）

圆角可视化

按钮圆角四档（高 48px）

5.3 阴影（全局禁用）

6图标库（可直接调用）

6.0 设计稿功能 → 图标映射（剑琅管家 / RTP）

图标颜色

浏览与检索

7组件库（可调用）

形态一 · 详卡 MemberCard/detail

五类详卡（横向对照）

形态二 · 列表条 MemberCard/compact

页面场景 · 卡详情

变体预览

主标题

主标题

主标题

主标题

主标题

主标题

主标题

确认驳回？

8B端业务专项规范

8.1 状态色映射（通用）

8.2 数据展示

8.3 权限与空状态

8.4 表单 B 端规则

9Design Token JSON

AI Prompt 模板