pda-kit-mcp-server 2.0.1

package/spec-data/home-page.md

@@ -0,0 +1,352 @@
+---
+id: home-page
+name: HomePage 首页
+category: template
+version: "1.0.0"
+tokens:
+  pageWidth: 480px
+  pageMinHeight: 844px
+  bannerHeight: 260px
+  searchBarHeight: 64px
+  searchBarBorder: 3px
+  taskCardHeight: 109px
+  funcGridCols: 4
+  funcIconSize: 44px
+  tabBarHeight: 70px
+  borderRadius: rounded
+composes:
+  - tab-bar (底部 4 项标签栏)
+  - scan-input (搜索扫描条)
+  - task-cards (待取/待派看板卡片)
+  - function-grid (4×N 功能入口网格)
+sections:
+  - id: status-bar
+    role: 系统状态栏
+    height: 56px
+  - id: banner
+    role: 顶部品牌区
+    height: 260px
+  - id: search-bar
+    role: 扫描搜索入口
+    height: 64px
+  - id: task-dashboard
+    role: 取派任务看板
+    height: 109px
+  - id: function-grid
+    role: 常用功能入口网格
+    cols: 4
+  - id: apply-bar
+    role: 编辑/全部应用操作栏
+  - id: tab-bar
+    role: 底部标签导航
+    height: 70px
+    items: ["首页", "任务", "营地", "我的"]
+---
+
+> **🧠 AI 指令 — 强制约束（MANDATORY，违反即错误）**
+>
+> ```yaml
+> NEGATIVE_PROMPTS:
+>   - ⛔ 禁止身体居中布局（如 body flex justify-center min-h-screen）
+>   - ⛔ 禁止将所有内容放在单一白色卡片中（这是 PDA 全屏页面，不是 Web Card）
+>   - ⛔ 禁止顶部 Banner 区域使用纯色（必须使用渐变色 + 模糊背景图）
+>   - ⛔ 禁止功能网格使用 rounded-lg / rounded-xl 大圆角
+>   - ⛔ 禁止搜索条使用圆角 border-radius ≥ 5px
+>   - ⛔ 禁止功能网格行数不足（至少 4 行常用功能）
+>   - ⛔ 禁止缺失底部 TabBar（首页必须包含 4 项标签栏）
+>   - ⛔ 禁止缺失任务看板卡片（首页固定显示 待取 + 待派 两个任务卡片）
+>   - ⛔ 禁止在 HTML 中手写 style="background: var(--color-*)"
+>   - ⛔ 禁止使用 transition 属性
+>   - ⛔ 禁止手写 SVG <path>，所有图标通过 <svg><use href="#icon_name"/></svg> 调用
+>
+> MANDATORY:
+>   - 响应式骨架：移动端 100vw/100vh，桌面端 @media 412×844 沙箱
+>   - 布局为 Flex 垂直流式：Banner → SearchBar → TaskCards → FunctionGrid → TabBar
+>   - 所有容器圆角 = rounded（4px），不可使用更大圆角
+>   - 所有容器禁止 transition
+>   - 底部 TabBar 固定 4 项：首页（选中）/ 任务 / 营地 / 我的
+>   - 顶部必须包含 StatusBar（时间 + 信号/WiFi/电池图标）
+> ```
+>
+> ```css
+> /* ⛔ AI 必须逐字复制的强制 CSS */
+> .home-banner { height: 260px; flex-shrink: 0; position: relative; overflow: hidden; }
+> .scan-search-bar {
+>   display: flex; align-items: center; height: 64px;
+>   margin: 0 12px; padding: 0 16px;
+>   background: var(--color-grey-1);
+>   border: 3px solid var(--color-black-6);
+>   border-radius: 4px;
+> }
+> .task-dashboard { display: flex; gap: 12px; margin: 12px 12px 0; }
+> .task-card { flex: 1; height: 109px; border-radius: 4px; border: 1px solid var(--color-grey-1); }
+> .function-grid { display: flex; flex-wrap: wrap; }
+> .func-item { width: 25%; /* 4 列 */ }
+> .tab-bar { display: flex; justify-content: space-around; height: 70px; }
+> /* ⛔ 无 transition */
+> ```
+>
+> ```yaml
+> # 上下文锚点 — AI 在生成首页时，必须连带调用以下组件规范：
+> DEPENDENCIES:
+>   - layout-page.md     (响应式骨架)
+>   - tab-bar.md          (底部 4 项标签栏)
+>   - scan-input.md       (搜索扫描条)
+>   - button.md           (全部应用按钮)
+>   - icons.md           (图标字典，禁止手写 path)
+> ```
+
+---
+
+# HomePage 首页
+
+> **PDA 应用主入口页面模板。** 所有 PDA 业务应用启动后看到的首页，必须按此模板组装。首页为固定样式的特写页面，不可大幅调整布局层级。
+
+## 语义结构（Semantic Structure）
+
+```
+┌─────────────────────────────────────────┐
+│  #app-shell（响应式容器）                  │
+│  ┌─────────────────────────────────────┐ │
+│  │  StatusBar (56px)                    │ │  ← 时间 + 信号/WiFi/电池
+│  ├─────────────────────────────────────┤ │
+│  │  Banner (260px)                      │ │  ← 品牌色渐变 + 模糊背景
+│  │  ├─ 欢迎语（用户头像 + "上午好，张师傅"） │
+│  ├─────────────────────────────────────┤ │
+│  │  ScanSearchBar (64px, 3px 黑色边框)    │ │  ← 扫运单查件/搜索模块
+│  ├─────────────────────────────────────┤ │
+│  │  TaskDashboard (109px)                │ │  ← 待取(5) + 待派(22)
+│  │  ├─ TaskCard · 待取 (flex-1)         │ │
+│  │  └─ TaskCard · 待派 (flex-1)         │ │
+│  ├─────────────────────────────────────┤ │
+│  │  FunctionGrid (4cols × 4rows)        │ │  ← 常用功能入口
+│  │  ├─ Row1: 代理标签/拒收退单/交接扫描/发件扫描  │
+│  │  ├─ Row2: 代理标签/拒收退单/仓库管理/发件扫描  │
+│  │  ├─ Row3: 代理标签/拒收退单/配载建包/自动转运  │
+│  │  └─ Row4: 代理标签/拒收退单/少货管理/添加工具  │
+│  ├─────────────────────────────────────┤ │
+│  │  ApplyBar（编辑 + 全部应用按钮）        │ │
+│  ├─────────────────────────────────────┤ │
+│  │  TabBar (70px)                        │ │  ← 首页/任务/营地/我的
+│  └─────────────────────────────────────┘ │
+└─────────────────────────────────────────┘
+```
+
+## 区域详规
+
+### 1. StatusBar — 系统状态栏
+
+| 属性 | 值 |
+|------|-----|
+| 高度 | 56px |
+| 左侧 | 时间文本（17.92px/600, `--color-black-7`） |
+| 右侧 | 信号 + WiFi + 电池图标 |
+| 背景 | 透明（叠在 Banner 上） |
+| Z-index | 高于 Banner |
+
+### 2. Banner — 顶部品牌区
+
+| 属性 | 值 |
+|------|-----|
+| 高度 | 260px |
+| 宽度 | 100%（跟随容器） |
+| 背景 | 品牌紫渐变（`--color-main-2` → `--color-main-1`）+ 20px 模糊覆盖图 |
+| 渐变叠加 | `linear-gradient(180deg, rgba(247,247,249,0) 0%, var(--color-grey-2) 100%)` |
+| 欢迎语 | 用户头像(48×48) + "上午好，\n张师傅" |
+| 欢迎语位置 | 左上角，距左 28px，距顶 68px |
+
+### 3. ScanSearchBar — 扫描搜索条
+
+| 属性 | 值 |
+|------|-----|
+| 高度 | 64px |
+| 左右边距 | 12px |
+| 背景 | `--color-grey-1` |
+| 边框 | `3px solid --color-black-6` |
+| 圆角 | 4px |
+| 左侧图标 | `common_ic_scanning_o`（21×21px，`--color-main-6`） |
+| 占位文字 | "扫运单查件/搜索模块" |
+| 占位颜色 | `--color-black-3` |
+| 占位字号 | 20px/400 |
+| 触发方式 | PDA 物理扫描键 / 点击跳转查件页 |
+
+### 4. TaskDashboard — 任务看板
+
+| 属性 | 值 |
+|------|-----|
+| 布局 | 2 列等宽，flex gap: 12px |
+| 卡片高度 | 109px |
+| 圆角 | 4px |
+| 边框 | `1px solid --color-grey-1` |
+
+**待取卡片**：
+| 属性 | 值 |
+|------|-----|
+| 背景 | `linear-gradient(7deg, var(--color-grey-1) 5%, rgba(240,242,255,0.44) 98%)` |
+| 标签文字 | "待取"（20px/600） |
+| 数字 | "5"（28px/700，`--color-main-6`） |
+| 单位 | "任务"（18px/400，`--color-black-5`） |
+| 装饰 | 右下角半透明盒子图标 |
+
+**待派卡片**：
+| 属性 | 值 |
+|------|-----|
+| 背景 | `linear-gradient(16deg, var(--color-grey-1) 5%, #f3f6ff 99%)` |
+| 标签文字 | "待派"（20px/600） |
+| 数字 | "22"（28px/700，`--color-main-6`） |
+| 单位 | "票"（18px/400，`--color-black-5`） |
+| 装饰 | 右下角半透明盒子图标 |
+
+### 5. FunctionGrid — 常用功能网格
+
+| 属性 | 值 |
+|------|-----|
+| 布局 | 4 列 flex-wrap |
+| 容器背景 | `--color-grey-1` |
+| 容器圆角 | 4px |
+| 容器边距 | 0 12px |
+| 顶部标题 | "常用功能"（20px/600）+ 右侧「编辑」按钮 |
+| 标题下方分割线 | `1px solid --color-grey-3`，左右边距 16px |
+
+**网格项**：
+| 属性 | 值 |
+|------|-----|
+| 宽度 | 25%（4 列） |
+| 图标容器 | 44×44px |
+| 图标尺寸 | 36×36px |
+| 图标颜色 | `--color-main-6` |
+| 文字字号 | 16px/400 |
+| 文字颜色 | `--color-black-6` |
+| 按下态 | `background: --color-main-1` |
+
+**默认 4×4 功能列表**（从左到右，从上到下）：
+
+| 列1 | 列2 | 列3 | 列4 |
+|-----|-----|-----|-----|
+| 代理标签 | 拒收退单 | 交接扫描 | 发件扫描 |
+| 代理标签 | 拒收退单 | 仓库管理 | 发件扫描 |
+| 代理标签 | 拒收退单 | 配载建包 | 自动转运 |
+| 代理标签 | 拒收退单 | 少货管理 | 添加工具 |
+
+> 功能网格支持编辑模式（通过右上角「编辑」按钮进入）。编辑模式下可拖拽排序、删除/添加功能项。静态展示时按照上述默认排列。
+
+### 6. ApplyBar — 编辑/应用操作栏
+
+| 属性 | 值 |
+|------|-----|
+| 布局 | flex，右对齐 |
+| 编辑按钮 | 编辑图标(20×20) + "编辑"文字（18px/400，`--color-main-6`） |
+| 分隔线 | `1px × 11px, --color-main-1` |
+| 全部应用按钮 | 小号按钮，`padding: 6px 12px` |
+| 按钮背景 | `--color-main-6` |
+| 按钮文字 | "全部应用"（16px/400，`--color-grey-1`）+ 右侧箭头图标 |
+
+### 7. TabBar — 底部标签栏
+
+| 属性 | 值 |
+|------|-----|
+| 高度 | 70px |
+| 背景 | `--color-grey-1` |
+| 顶部边框 | `1px solid --color-grey-3` |
+| 项数 | 4 项，等宽分布 |
+
+| 序号 | 标签名 | 图标 | 默认态 |
+|------|--------|------|:------:|
+| 1 | 首页 | ic_tab_home | **选中**（`--color-main-6`） |
+| 2 | 任务 | ic_tab_task | 未选（`--color-black-4`） |
+| 3 | 营地 | ic_tab_apps | 未选（`--color-black-4`） |
+| 4 | 我的 | ic_tab_mine | 未选（`--color-black-4`） |
+
+> 底部标签栏规格详见 [tab-bar.md](tab-bar.md)。
+
+---
+
+## 布局约束（Layout Constraints）
+
+| 约束 | 值 |
+|------|-----|
+| 外层容器 | `width: 100vw; height: 100vh; overflow: hidden`（移动端） |
+| 桌面沙箱 | `@media (min-width: 768px) { width: 412px; height: 844px; border-radius: 16px; box-shadow }` |
+| 内容滚动 | `.page-content { flex: 1; overflow-y: auto }` |
+| 页面级滚动容器 | 必须设 `flex-1` 和 `overflow-y-auto` |
+| 底部 TabBar | `flex-shrink: 0`（固定在底部，不随页面滚动） |
+
+---
+
+## Tailwind 实现参考
+
+```html
+<!-- 结构骨架（Tailwind 类名版本） -->
+<div id="app-shell" class="w-screen h-screen flex flex-col overflow-hidden">
+
+  <!-- 可滚动内容区 -->
+  <div class="flex-1 overflow-y-auto flex flex-col">
+
+    <!-- Banner -->
+    <div class="relative flex-shrink-0 h-[260px] overflow-hidden">
+      <div class="absolute inset-0 bg-gradient-to-b from-main-2 to-main-1"></div>
+      <div class="absolute inset-0 bg-gradient-to-b from-transparent to-grey-2"></div>
+    </div>
+
+    <!-- Search Bar -->
+    <div class="flex items-center h-16 mx-3 px-4 bg-grey-1 border-3 border-black-6 rounded gap-2">
+      <svg class="w-[21px] h-[21px] text-main-6"><use href="#ic_scanning"/></svg>
+      <span class="text-20 text-black-3">扫运单查件/搜索模块</span>
+    </div>
+
+    <!-- Task Cards -->
+    <div class="flex gap-3 mx-3 mt-3">
+      <div class="flex-1 h-[109px] rounded border border-grey-1 p-4 bg-gradient-to-br from-grey-1 to-main-1/10">
+        <div class="text-20 font-semibold text-black-6">待取</div>
+        <div class="flex items-baseline gap-2 mt-2">
+          <strong class="text-[28px] font-bold text-main-6">5</strong>
+          <span class="text-18 text-black-5">任务</span>
+        </div>
+      </div>
+      <!-- 待派同理 -->
+    </div>
+
+    <!-- Function Grid -->
+    <!-- 4×N 网格，每项 25% 宽度 -->
+
+  </div>
+
+  <!-- TabBar (flex-shrink: 0) -->
+  <div class="flex justify-around h-[70px] bg-grey-1 border-t border-grey-3 flex-shrink-0">
+    <!-- 4 项标签 -->
+  </div>
+
+</div>
+```
+
+---
+
+## 颜色 Token
+
+| Token | 色值 | 使用场景 |
+|-------|------|---------|
+| `--color-main-6` | `#6445d1` | TabBar 选中态、数字高亮、功能图标、编辑按钮 |
+| `--color-main-2` | `#d4c2f4` | Banner 渐变起点 |
+| `--color-main-1` | `#f1e7ff` | Banner 渐变终点、功能网格按下态 |
+| `--color-grey-1` | `#ffffff` | 搜索条背景、功能网格背景、TabBar 背景 |
+| `--color-grey-2` | `#f3f4f6` | 页面底色、Banner 渐变终点 |
+| `--color-grey-3` | `#e0e4f0` | 分割线、TabBar 顶部边框 |
+| `--color-black-6` | `#333333` | 搜索条边框、卡片标签、功能文字 |
+| `--color-black-5` | `#666666` | 任务看板单位文字 |
+| `--color-black-4` | `#888888` | TabBar 未选中态 |
+| `--color-black-3` | `#bbbbbb` | 搜索条占位文字 |
+| `--color-black-7` | `#000000` | StatusBar 时间 |
+
+---
+
+## 使用规则（AI 必读）
+
+1. **首页为固定样式的特写页面**：本文档定义的 Banner 高度（260px）、搜索条高度（64px）、卡片高度（109px）、功能网格列数（4 列）、TabBar 高度（70px）均为硬性约束
+2. **布局不可破坏**：页面从上到下必须保持 Banner → SearchBar → TaskDashboard → FunctionGrid → TabBar 的顺序
+3. **功能网格最少 4 行**：行数不够时用占位项填充，不可缩减为 2 行或 3 行
+4. **TabBar 固定 4 项**：首页选中态固定为「首页」，其余 3 项为「任务/营地/我的」
+5. **图标必须使用 Sprite**：所有图标通过 `<svg><use href="#icon_name"/></svg>` 调用，不可手写 path
+6. **禁止 Web 居中思维**：壳容器为全屏布局，不可在 body 上 `justify-content: center`
+7. **响应式沙箱**：桌面端自动缩小为 412×844px 预览窗口
+8. **功能网格支持编辑模式**：右上角「编辑」按钮进入编辑态，可排序/增删功能项
+9. **用户欢迎语**：固定格式「{时段}好，{姓名}」，时段根据当前时间自动判断（上午好/下午好/晚上好）

package/spec-data/input-row.md

@@ -0,0 +1,346 @@
+---
+id: input-row
+name: 输入行 Input Row
+category: "表单/Form"
+version: "1.0.0"
+source: PDAKit-基础组件
+source_url: https://mastergo.ky-tech.com.cn/goto/UgR7AUO8
+source_doc_id: 103417331857122
+component_count: 1
+---
+
+# 输入行 Input Row
+
+表单行容器，支持 **标题 + 输入/选择/标签** 的灵活组合。每条占一行，白色背景，底部 1px 分割线。常用于详情表单、设置页等「标题：值」型列表。
+
+> **颜色规则**：全部使用 Token（`--color-{色系}-{色阶}`），禁止 Hex。
+> **字体**：PingFang SC。
+
+---
+
+## 容器规格
+
+| 属性 | 值 |
+|------|-----|
+| 宽度 | `480px`（撑满父容器） |
+| 高度 | `70px` |
+| 背景 | `--color-grey-1`（`#FFFFFF`） |
+| 布局 | 垂直排列（`flex-col`），内容行 + 底部分割线 |
+| 内容行内边距 | `16px` |
+| 内容行间距 | `gap: 16px`（左侧标题 ↔ 右侧内容） |
+| 底部线条 | `1px` 高，`--color-black-2`（`#DDDDDD`），撑满宽度 |
+
+---
+
+## 三种内容模式
+
+```
+┌──────────────────────────────────────────────┐
+│  mode 1: 纯输入（带箭头）                      │
+│  ┌──────────┬──────────────────────┬────────┐ │
+│  │ 标题名称  │  请输入               │   >    │ │
+│  │ (120px)  │  (272px placeholder) │ (箭头) │ │
+│  └──────────┴──────────────────────┴────────┘ │
+│  ──────────────────────────────────────────── │  1px 线
+├──────────────────────────────────────────────┤
+│  mode 2: 选项选择                              │
+│  ┌──────────┬───────────────────────────────┐ │
+│  │ 标题名称 ?│  ○ 选项1  ○ 选项2  ○ 选项3   │ │
+│  │    (帮助)│  (radio 图标 28×28)           │ │
+│  └──────────┴───────────────────────────────┘ │
+│  ──────────────────────────────────────────── │
+├──────────────────────────────────────────────┤
+│  mode 3: 输入 + 统计标签                       │
+│  ┌──────────┬──────────────────────┬────────┐ │
+│  │ 标题名称  │  请输入               │ [2] >  │ │
+│  │  [标签]  │  (272px placeholder) │(计数)  │ │
+│  └──────────┴──────────────────────┴────────┘ │
+│  ──────────────────────────────────────────── │
+└──────────────────────────────────────────────┘
+```
+
+### Mode 1：纯输入（文本输入 + 箭头）
+
+| 属性 | 值 |
+|------|------|
+| **左侧** | 标题，宽 `120px`，`font-size: 20px`，`font-weight: 600`，`color: #333333` |
+| **右侧-输入区** | flex-1，占位符文案 `"请输入"`，`font-size: 20px`，`color: #BBBBBB` |
+| **右侧-图标** | 箭头图标 `common_ic_arrow_right_o.svg`，`24×24` |
+
+> 右侧箭头表示可点击进入下一级页面或触发关联组件。
+
+### Mode 2：选项选择（Radio 组）
+
+| 属性 | 值 |
+|------|------|
+| **左侧** | 标题 + 帮助图标 `common_ic_help_o.svg`（`22×22`） |
+| **右侧** | 选项组，flex-row + `gap: 16px` |
+| **单选项** | Radio 图标（`28×28`）+ 文本（`font-size: 20px`），`gap: 8px` |
+| **未选中 Radio** | `common_ic_radio_o.svg` |
+
+### Mode 3：输入 + 统计标签
+
+| 属性 | 值 |
+|------|------|
+| **左侧** | 标题 + 标签徽章（详见「标签徽章」子组件） |
+| **右侧-输入区** | 同 Mode 1 |
+| **右侧-统计** | 数字标签（`font-size: 18px`，`color: #383B6F`）+ 箭头图标 `24×24` |
+
+---
+
+## 子组件：标签徽章
+
+用于标题旁或统计区的小标签。
+
+| 属性 | 值 |
+|------|------|
+| 背景 | `--color-grey-2`（`#F3F4F6`） |
+| 边框 | `1px solid --color-grey-3`（`#E0E4F0`） |
+| 圆角 | `8px` |
+| 内边距 | `4px 8px`（上下 4px，左右 8px） |
+| 文字 | `font-size: 18px`，`line-height: 25px`，`color: --color-grey-7`（`#383B6F`） |
+
+---
+
+## 尺寸速查
+
+| 元素 | 值 |
+|------|------|
+| 容器 | `480 × 70px` |
+| 内容行高度 | `69px`（= 70 - 1px 线） |
+| 内容行 padding | `16px` |
+| 标题宽度 | `120px`（最小） |
+| 标题字号 | `20px / 28px`，Semibold（`600`） |
+| 占位符字号 | `20px / 28px` |
+| 占位符颜色 | `--color-black-3`（`#BBBBBB`） |
+| 右侧图标 | `24 × 24px` |
+| 帮助图标 | `22 × 22px` |
+| Radio 图标 | `28 × 28px` |
+| 标签字号 | `18px / 25px` |
+| 标签圆角 | `8px` |
+| 标签 padding | `4px 8px` |
+| 分割线 | `1px`，`--color-black-2` |
+
+---
+
+## HTML 示例
+
+### Mode 1：纯输入
+
+```html
+<!-- 单行输入 -->
+<div class="input-row">
+  <div class="input-row-body">
+    <div class="input-row-left">
+      <span class="input-title">标题名称</span>
+    </div>
+    <div class="input-row-right">
+      <span class="input-placeholder">请输入</span>
+      <img src="./icons/assets/common_ic_arrow_right_o.svg" class="ic-arrow" width="24" height="24" alt="">
+    </div>
+  </div>
+  <div class="input-divider"></div>
+</div>
+```
+
+### Mode 2：选项选择
+
+```html
+<!-- 单行选择 -->
+<div class="input-row">
+  <div class="input-row-body">
+    <div class="input-row-left">
+      <span class="input-title">标题名称</span>
+      <img src="./icons/assets/common_ic_help_o.svg" class="ic-help" width="22" height="22" alt="">
+    </div>
+    <div class="input-row-right">
+      <div class="radio-group">
+        <label class="radio-option">
+          <img src="./icons/assets/common_ic_radio_o.svg" width="28" height="28" alt="">
+          <span>选项1</span>
+        </label>
+        <label class="radio-option">
+          <img src="./icons/assets/common_ic_radio_o.svg" width="28" height="28" alt="">
+          <span>选项2</span>
+        </label>
+        <label class="radio-option">
+          <img src="./icons/assets/common_ic_radio_o.svg" width="28" height="28" alt="">
+          <span>选项3</span>
+        </label>
+      </div>
+    </div>
+  </div>
+  <div class="input-divider"></div>
+</div>
+```
+
+### Mode 3：输入 + 统计标签
+
+```html
+<!-- 单行输入 + 统计 -->
+<div class="input-row">
+  <div class="input-row-body">
+    <div class="input-row-left">
+      <span class="input-title">标题名称</span>
+      <span class="input-tag">标签</span>
+    </div>
+    <div class="input-row-right">
+      <span class="input-placeholder">请输入</span>
+      <div class="input-count">
+        <span class="input-tag">2</span>
+        <img src="./icons/assets/common_ic_arrow_right_o.svg" width="24" height="24" alt="">
+      </div>
+    </div>
+  </div>
+  <div class="input-divider"></div>
+</div>
+```
+
+---
+
+## CSS
+
+```css
+/* 容器 */
+.input-row {
+  width: 100%;
+  height: 70px;
+  display: flex;
+  flex-direction: column;
+  background: var(--color-grey-1);
+}
+
+/* 底部 1px 分割线 */
+.input-divider {
+  width: 100%;
+  height: 1px;
+  flex-shrink: 0;
+  background: var(--color-black-2);
+}
+
+/* 内容行 */
+.input-row-body {
+  height: 69px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px;
+}
+
+/* 左侧标题区 */
+.input-row-left {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 0;
+  width: 120px;
+}
+
+/* 标题文字 */
+.input-title {
+  color: var(--color-black-6);
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 28px;
+  font-family: "PingFang SC";
+}
+
+/* 帮助图标 */
+.ic-help {
+  width: 22px;
+  height: 22px;
+}
+
+/* 右侧内容区 */
+.input-row-right {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 16px;
+}
+
+/* 占位符 */
+.input-placeholder {
+  flex: 1;
+  color: var(--color-black-3);
+  font-size: 20px;
+  line-height: 28px;
+  font-family: "PingFang SC";
+}
+
+/* 箭头图标 */
+.ic-arrow {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+
+/* 统计区 */
+.input-count {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 4px;
+}
+
+/* 标签徽章 */
+.input-tag {
+  display: flex;
+  align-items: center;
+  padding: 4px 8px;
+  background: var(--color-grey-2);
+  border: 1px solid var(--color-grey-3);
+  border-radius: 8px;
+  font-size: 18px;
+  line-height: 25px;
+  font-family: "PingFang SC";
+  color: var(--color-grey-7);
+}
+
+/* 选项组 */
+.radio-group {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+/* 单选项 */
+.radio-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  font-size: 20px;
+  line-height: 28px;
+  font-family: "PingFang SC";
+  color: var(--color-black-6);
+}
+```
+
+---
+
+## 颜色 Token
+
+| Token | 色值 | 使用场景 |
+|-------|------|---------|
+| `--color-grey-1` | `#FFFFFF` | 行容器背景 |
+| `--color-grey-2` | `#F3F4F6` | 标签徽章背景 |
+| `--color-grey-3` | `#E0E4F0` | 标签徽章边框 |
+| `--color-grey-7` | `#383B6F` | 标签文字颜色 |
+| `--color-black-2` | `#DDDDDD` | 底部分割线 |
+| `--color-black-3` | `#BBBBBB` | 占位符文字 |
+| `--color-black-6` | `#333333` | 标题、选项文字 |
+
+---
+
+## 使用规则（AI 必读）
+
+1. **三模式可组合**：左侧（标题 / 标题+帮助 / 标题+标签） + 右侧（输入 / 选项 / 输入+统计）自由组合
+2. **箭头表示可点击**：右侧出现箭头图标时，表示点击该行可进入下一级页面或触发关联操作
+3. **标题固定 `120px`**：保持对齐一致，内容过长可 flex-grow
+4. **底部必有分割线**：每行底部 `1px` `--color-black-2`，最后一行可选隐藏（`.input-row:last-child .input-divider { display: none }`）
+5. **占位符不可省略**：空输入行必须显示 "请输入" 占位符，颜色 `--color-black-3`
+6. **帮助图标可选**：标题后的 `common_ic_help_o` 为可选元素，有补充说明时展示
+7. **标签徽章类型**：左侧用于分类标识（如「标签」），右侧用于统计计数（如「2」）