pda-kit-mcp-server 2.0.1

package/spec-data/photo-list.md

@@ -0,0 +1,461 @@
+---
+id: photo-list
+name: 拍照列表
+category: "媒体/Media"
+version: "1.0.0"
+source: PDAKit-业务组件
+source_url: https://mastergo.ky-tech.com.cn/goto/U4gdKtzv
+source_doc_id: 103417331857122
+component_count: 2
+---
+
+# 拍照列表 Photo List
+
+货物拍照入口列表组件，每个货物类型独立一行。未拍时右侧展示示例图，点击可放大预览（样式与相机预览一致）；已拍后示例图隐藏，显示已拍摄照片缩略图（98×98px），超出宽度自动折行，点击缩略图支持删除。
+
+> **核心规则**：每行一个拍照类型。拍摄按钮始终在左侧，右侧根据状态切换示例图 / 已拍照片列表。
+> **颜色规则**：全部使用 Token（`--color-{色系}-{色阶}`），禁止 Hex。
+> **字体**：PingFang SC。
+
+---
+
+## 组件总览
+
+| 组件 | 用途 |
+|------|------|
+| 拍照入口行（未拍） | 拍摄按钮 + 类型名称 + 示例图（可点击放大预览） |
+| 拍照入口行（已拍） | 拍摄按钮 + 类型名称 + 已拍照片列表（折行、可删除） |
+
+---
+
+## 1. 布局结构
+
+### 未拍态
+
+```
+┌── 480px ────────────────────────────────────┐
+│ ┌──────────┐  ┌───────────────────────────┐ │
+│ │ 📷 图标   │  │ ┌──────┐                   │ │
+│ │ 货物完整  │  │ │ 示例图 │                   │ │  ← 示例图（角标左上）
+│ │          │  │ │(角标) │                   │ │
+│ └──────────┘  │ └──────┘                   │ │
+│               └───────────────────────────┘ │
+└─────────────────────────────────────────────┘
+```
+
+### 已拍态
+
+```
+┌── 480px ────────────────────────────────────┐
+│ ┌──────────┐  ┌───────────────────────────┐ │
+│ │ 📷 图标   │  │ ┌────┐┌────┐┌────┐┌────┐  │ │
+│ │ 货物完整  │  │ │照片││照片││照片││照片│  │ │  ← 已拍照片（折行）
+│ │          │  │ └────┘└────┘└────┘└────┘  │ │
+│ └──────────┘  │                           │ │
+│               └───────────────────────────┘ │
+└─────────────────────────────────────────────┘
+```
+
+---
+
+## 2. 整体规格
+
+| 属性 | 值 |
+|------|------|
+| 宽度 | `480px`，内边距 `12px` |
+| 每行布局 | `display: flex; flex-wrap: wrap; gap: 16px; align-items: start` |
+| 行间距 | `12px` |
+
+---
+
+## 3. 拍摄按钮
+
+| 属性 | 值 |
+|------|------|
+| 标签 | `<button>` |
+| 尺寸 | `98×98px` |
+| 布局 | `display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0; gap: 6px` |
+| 圆角 | `4px` |
+| 背景 | `#EEEEEE`（Black/NO.1） |
+| 图标 | `icons/assets/common_ic_camera.svg`，尺寸 `40×40px`，颜色 Black/NO.3 |
+| 文字 | 拍照类型名称（如「货物完整」），PingFang SC，`16px`，`font-weight: normal`，居中，颜色 `#333333`（Black/NO.6） |
+| 交互 | 点击跳转至拍照页面（[camera.md](camera.md)），以 `?types=类型1,类型2&entryIndex=0` URL 参数传入当前列表所有拍照类型 |
+| 动效 | 缩放反馈 `150ms` |
+
+---
+
+### 示例图（未拍态）
+
+| 属性 | 值 |
+|------|------|
+| 容器 | `position: relative; width: 98px; height: 98px` |
+| 图片 | `98×98px`，圆角 `4px`，`object-fit: cover`，无描边 |
+| 背景 | `--color-grey-2`（`#F3F4F6`） |
+| 角标 | `拍照示例图/角标.svg`，`36×36px`，绝对定位左上角 `top: 0; left: 0`，`pointer-events: none` |
+| 交互 | 点击容器弹出全屏预览（与 camera.md 示例图预览一致） |
+
+### 已拍照片列表（已拍态）
+
+| 属性 | 值 |
+|------|------|
+| 布局 | `.photo-item-wrap` 作为 `.photo-list-row` 直接子元素，与按钮同级 flex，自然折行 |
+| 缩略图尺寸 | `98×98px`，圆角 `4px`，与示例图尺寸一致，无描边 |
+| 背景 | `--color-grey-2`（`#F3F4F6`） |
+| 排列 | 自动折行，最新拍照在最右侧展示，一行最多 4 组 |
+| 关闭按钮 | `assets/关闭按钮.svg`，`28×28px`，绝对定位右上角 `top: 0; right: 0` |
+| 点击交互 | 点击右上角关闭按钮直接删除，Toast 提示「已删除」 |
+| 空列表 | 已拍照片全部删除后自动切换回未拍态（显示示例图） |
+
+---
+
+## 5. 照片排列规则
+
+| 规则 | 说明 |
+|------|------|
+| 首行 | 按钮 + 最多 3 张照片（98×3 + 16×3 gap = 342px，总计 98 + 342 = 440px < 480px），超出 3 张则第 4 张折行 |
+| 第二行 | 第二行折行后自然从 `.photo-list-row` 左缘开始，即与拍摄按钮左侧对齐，一行最多 4 组 |
+| 方向 | 最新拍照在最右侧展示（数组反转渲染） |
+
+---
+
+## 6. 示例图放大预览
+
+| 属性 | 值 |
+|------|------|
+| 触发 | 点击右侧示例图 |
+| 展示 | 全屏黑色遮罩（`rgba(0,0,0,0.9)`），图片居中，上层叠加类型名称 |
+| 类型名称样式 | `font-size: 100px; font-weight: 600; color: rgba(0, 0, 0, 0.5);` 绝对定位居中 |
+| 关闭 | 点击遮罩任意位置关闭 |
+| z-index | `950` |
+| **强制一致** | 此预览样式与 [camera.md](camera.md) 示例图放大预览完全一致 |
+
+---
+
+## CSS 示例
+
+```css
+/* ===== 拍照入口行 ===== */
+.photo-list-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  align-items: start;
+  padding: 12px;
+  background: var(--color-grey-1);
+}
+
+/* 拍摄按钮 */
+.photo-shutter {
+  width: 98px; height: 98px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  gap: 6px;
+  border-radius: 4px;
+  background: #EEEEEE;
+  border: none;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: transform 0.15s;
+}
+.photo-shutter:active { transform: scale(0.92); }
+.photo-shutter-icon {
+  width: 40px; height: 40px;
+  flex-shrink: 0;
+}
+.photo-shutter-text {
+  font-family: PingFang SC;
+  font-size: 16px;
+  font-weight: normal;
+  line-height: normal;
+  text-align: center;
+  letter-spacing: normal;
+  color: #333333;
+}
+
+/* 示例图（未拍态） */
+.photo-sample-wrap {
+  position: relative;
+  width: 98px; height: 98px;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+.photo-sample {
+  width: 98px; height: 98px;
+  border-radius: 4px;
+  border: none;
+  background: var(--color-grey-2);
+  object-fit: cover;
+  display: block;
+}
+.photo-sample-badge {
+  position: absolute;
+  top: 0; left: 0;
+  width: 36px; height: 36px;
+  pointer-events: none;
+}
+
+/* 已拍照片 */
+.photo-item-wrap {
+  position: relative;
+  width: 98px; height: 98px;
+  flex-shrink: 0;
+}
+.photo-item {
+  width: 98px; height: 98px;
+  border-radius: 4px;
+  border: none;
+  object-fit: cover;
+  display: block;
+  background: var(--color-grey-2);
+}
+.photo-item-close {
+  position: absolute;
+  top: 0; right: 0;
+  width: 28px; height: 28px;
+  cursor: pointer;
+  z-index: 1;
+}
+
+/* ===== 示例图放大预览（与 camera.md 一致） ===== */
+.photo-preview-overlay {
+  position: fixed; top: 0; left: 0;
+  width: 100vw; height: 100vh;
+  background: rgba(0,0,0,0.9);
+  z-index: 950;
+  display: none;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  overflow: hidden;
+}
+.photo-preview-overlay.show { display: flex; }
+.photo-preview-overlay img {
+  max-width: 90vw;
+  max-height: 80vh;
+  object-fit: contain;
+  border-radius: 4px;
+}
+.photo-preview-title {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 100px;
+  font-weight: 600;
+  line-height: 1;
+  color: rgba(0, 0, 0, 0.5);
+  text-align: center;
+  font-family: PingFang SC;
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* ===== 删除确认弹窗 ===== */
+.photo-delete-toast {
+  position: fixed;
+  top: 50%; left: 50%;
+  transform: translate(-50%, -50%);
+  background: rgba(0,0,0,0.85);
+  color: #fff;
+  padding: 16px 32px;
+  border-radius: 8px;
+  font-size: 16px;
+  font-family: PingFang SC;
+  z-index: 999;
+  opacity: 0;
+  transition: opacity 0.2s;
+  pointer-events: none;
+  text-align: center;
+  white-space: nowrap;
+}
+.photo-delete-toast.show { opacity: 1; }
+```
+
+---
+
+## 资源引用说明
+
+### 示例图路径
+
+示例图统一存放在 `拍照示例图/` 目录下，引用路径：
+
+```
+拍照示例图/
+├── 角标.svg                    # 示例图左上角角标
+├── 货物完整@8x.png            # 货物完整拍照示例
+├── 外包装全貌照@8x.png        # 外包装全貌拍照示例
+├── 开箱点数@8x.png            # 开箱点数拍照示例
+├── 破损近景图@8x.png          # 破损近景拍照示例
+└── ...                        # 其他拍照类型示例图
+```
+
+**引用方式**：
+- 如果 HTML 文件在 `demos/` 目录：`../拍照示例图/货物完整@8x.png`
+- 如果 HTML 文件在根目录：`./拍照示例图/货物完整@8x.png`
+
+### 图标引用
+
+| 图标 | 路径 | 用途 |
+|------|------|------|
+| 相机图标 | `icons/assets/common_ic_camera.svg` | 拍摄按钮图标 |
+| 角标 | `拍照示例图/角标.svg` | 示例图左上角标记 |
+| 关闭按钮 | `assets/关闭按钮.svg` | 已拍照片删除按钮 |
+
+---
+
+## HTML 骨架
+
+```html
+<!-- 拍照列表完整结构示例 -->
+<!-- 假设 HTML 文件位于 demos/ 目录 -->
+
+<div class="photo-list-section">
+  <!-- 标题（可选） -->
+  <div class="section-heading">
+    <span class="section-title">货物照片</span>
+    <span class="section-subtitle">（选填）</span>
+  </div>
+  
+  <!-- 拍照列表 -->
+  <div class="photo-list">
+    <!-- 拍照入口行 -->
+    <div class="photo-list-row" data-type="货物完整">
+      <!-- 拍摄按钮 -->
+      <button class="photo-shutter" onclick="goToCamera('货物完整')">
+        <img class="photo-shutter-icon" src="../icons/assets/common_ic_camera.svg" alt="拍照" />
+        <span class="photo-shutter-text">货物完整</span>
+      </button>
+
+      <!-- 未拍态：示例图 -->
+      <div class="photo-sample-wrap" onclick="openPhotoPreview('货物完整', '../拍照示例图/货物完整@8x.png')">
+        <img class="photo-sample" src="../拍照示例图/货物完整@8x.png" alt="示例图" />
+        <img class="photo-sample-badge" src="../拍照示例图/角标.svg" alt="" />
+      </div>
+
+      <!-- 已拍态：照片列表（JS 动态渲染） -->
+      <!-- <div class="photo-item-wrap">
+        <img class="photo-item" src="..." />
+        <img class="photo-item-close" src="../assets/关闭按钮.svg" onclick="deletePhoto(...)" />
+      </div> -->
+    </div>
+  </div>
+</div>
+
+<!-- 示例图放大预览 -->
+<div class="photo-preview-overlay" id="photoPreviewOverlay"
+     onclick="closePhotoPreview()">
+  <p class="photo-preview-title" id="photoPreviewTitle"></p>
+  <img id="photoPreviewImage" src="" alt="预览" />
+</div>
+```
+
+---
+
+## JS 交互示例
+
+```javascript
+// 拍照类型数据
+// 注意：路径根据 HTML 文件位置调整
+// 如果 HTML 在 demos/ 目录，使用 ../拍照示例图/
+// 如果 HTML 在根目录，使用 ./拍照示例图/
+const photoEntries = [
+  { name: '货物完整',   sample: '../拍照示例图/货物完整@8x.png',   photos: [] },
+  { name: '外包装全貌照', sample: '../拍照示例图/外包装全貌照@8x.png', photos: [] },
+  { name: '开箱点数',   sample: '../拍照示例图/开箱点数@8x.png',   photos: [] },
+];
+
+// 渲染某行的内容区
+function renderPhotoContent(index) {
+  const entry = photoEntries[index];
+  const rowEl = document.querySelectorAll('.photo-list-row')[index];
+
+  if (entry.photos.length === 0) {
+    // 未拍态：显示示例图
+    rowEl.querySelector('.photo-sample-wrap').style.display = 'block';
+    rowEl.querySelectorAll('.photo-item-wrap').forEach(el => el.remove());
+  } else {
+    // 已拍态：隐藏示例图，photo-item-wrap 直接作为 rowEl 子元素（按钮 + 最多3张首行，超出折行）
+    rowEl.querySelector('.photo-sample-wrap').style.display = 'none';
+    rowEl.querySelectorAll('.photo-item-wrap').forEach(el => el.remove());
+    // 反转数组使最新照片在右侧
+    [...entry.photos].reverse().forEach((src, pi) => {
+      const realIndex = entry.photos.length - 1 - pi;
+      const wrap = document.createElement('div');
+      wrap.className = 'photo-item-wrap';
+      wrap.innerHTML = `<img class="photo-item" src="${src}" alt="照片" />
+        <img class="photo-item-close" src="assets/关闭按钮.svg" alt="删除" onclick="deletePhoto(${index}, ${realIndex})" />`;
+      rowEl.appendChild(wrap);
+    });
+  }
+}
+
+// 删除照片（直接删除，Toast 提示）
+function deletePhoto(entryIndex, photoIndex) {
+  photoEntries[entryIndex].photos.splice(photoIndex, 1);
+  renderPhotoContent(entryIndex);
+  showToast('已删除');
+}
+
+// 打开拍照组件（传入所有类型）
+function goToCamera(entryIndex) {
+  const typeNames = photoEntries.map(e => encodeURIComponent(e.name)).join(',');
+  window.location.href = `camera.html?types=${typeNames}&entryIndex=${entryIndex}`;
+}
+
+// 页面初始化时检查 camera 组件回传数据
+(function init() {
+  const cameraResult = sessionStorage.getItem('cameraResult');
+  if (cameraResult) {
+    sessionStorage.removeItem('cameraResult');
+    const result = JSON.parse(cameraResult);
+    result.types.forEach(t => {
+      if (t.count > 0) {
+        const entry = photoEntries.find(e => e.name === t.name);
+        if (entry) {
+          for (let i = 0; i < t.count; i++) entry.photos.push(t.sample);
+        }
+      }
+    });
+  }
+  renderAll(); // 渲染整个列表
+})();
+
+// 示例图预览
+function openPhotoPreview(name, src) {
+  document.getElementById('photoPreviewTitle').textContent = name;
+  document.getElementById('photoPreviewImage').src = src;
+  document.getElementById('photoPreviewOverlay').classList.add('show');
+}
+
+function closePhotoPreview() {
+  document.getElementById('photoPreviewOverlay').classList.remove('show');
+  document.getElementById('photoPreviewTitle').textContent = '';
+}
+```
+
+---
+
+## 颜色 Token
+
+| Token | 色值 | 使用场景 |
+|-------|------|---------|
+| `--color-grey-1` | `#FFFFFF` | 页面背景、拍摄按钮 |
+| `--color-grey-2` | `#F3F4F6` | 示例图背景 |
+| `--color-black-7` | `#000000` | 类型名称文字 |
+
+---
+
+## 使用规则（AI 必读）
+
+1. **每行一个拍照类型**：每种货物类型独立一行，各行的照片互不干扰
+2. **双态切换**：未拍时显示示例图，拍照后示例图隐藏、显示已拍照片列表。已拍照片全部删除后自动切回未拍态
+3. **照片折行**：`.photo-item-wrap` 直接作为 `.photo-list-row` 子元素，按钮始终在第一行，首行按钮 + 最多 3 张照片，第 4 张折行至第二行并与按钮左缘对齐
+4. **点击删除**：点击已拍缩略图右上角关闭按钮直接删除，Toast 提示「已删除」，无需二次确认
+5. **示例图预览与相机一致**（⚠️ 强制一致）：点击示例图弹出全屏预览，文字样式（100px/600/50%透明黑居中）必须与 [camera.md](camera.md) 完全一致
+6. **拍摄按钮样式**：`<button>` 标签 `98×98px`，`flex-direction: column`，`gap: 6px`，上方 `common_ic_camera` 图标（40×40、Black/NO.3），下方拍照类型名称（16px/normal、Black/NO.6），背景 `#EEEEEE`，圆角 `4px`
+7. **颜色用 Token**：禁止裸 Hex，全部用 `--color-*` 引用
+8. **拍摄按钮交互**：点击打开 [camera.md](camera.md)，通过 URL 参数 `?types=货物完整,开箱点数&entryIndex=0` 传入列表所有类型。camera 组件完成拍摄后通过 `sessionStorage.setItem('cameraResult', ...)` 回传 `{ types: [{ name, count, sample }] }`，列表页在初始化时读取 `sessionStorage` 并回显照片

package/spec-data/picker-single.md

@@ -0,0 +1,199 @@
+---
+id: picker-single
+name: 选择器-单选
+category: "表单/Form"
+version: "1.0.0"
+source: PDAKit-业务组件
+source_url: https://mastergo.ky-tech.com.cn/goto/TZDl2lv0
+source_doc_id: 103417331857122
+---
+
+# 选择器-单选 Picker Single
+
+单列选择器，**纯文本选项 + 底部取消关闭**，选中态为灰底高亮，无图标指示器。用于单一项选择场景。
+
+> **核心规则**：单列列表，单选互斥，选中项背景变灰。底部仅取消按钮，点击选项即确认/切换。
+> **选项上限**：最多 **7 个**。
+> **颜色规则**：全部使用 Token（`--color-{色系}-{色阶}`），禁止 Hex。
+> **字体**：PingFang SC。
+
+---
+
+## Props
+
+### 父组件 Props
+
+| Prop | 类型 | 值 | 默认 |
+|------|------|-----|------|
+| 标题 | string | 头部标题文字 | `标题文本` |
+| 显示关闭 | boolean | 是否显示右上角关闭按钮 | `true` |
+| 显示描述 | boolean | 标题下方是否显示描述文字 | `false` |
+| 描述文字 | string | 描述内容 | `描述信息位置展示` |
+| 选项列表 | array | 选项数据（最多 7 项） | `[]` |
+| 已选项 ID | string | 当前已选中的选项 ID | `null` |
+
+### 选项行 Props
+
+| Prop | 类型 | 说明 |
+|------|------|------|
+| 选中状态 | enum | `选中` / `默认` |
+| 文本 | string | 选项文字 |
+
+### 底部按钮 Props
+
+| Prop | 类型 | 值 |
+|------|------|------|
+| 按钮文字 | string | `取消` |
+| 交互 | — | 点击取消 → 关闭面板；若有已选项则带出选中值 |
+
+---
+
+## 整体容器规格
+
+| 属性 | 值 |
+|------|------|
+| 宽度 | `480px` |
+| 高度 | 自适应（选项数动态），`max-height: 740px` |
+| 布局 | `flex-column` |
+| 圆角（顶部） | `16px` |
+| 弹窗类型 | Bottom Sheet |
+| 遮罩 | `rgba(0,0,0,0.4)` |
+
+---
+
+## 1. 头部
+
+| 属性 | 值 |
+|------|------|
+| 背景 | `--color-grey-1` |
+| 内边距 | `24px 16px 8px` |
+| 子元素间距 | `gap: 4px` |
+
+| 元素 | 样式 |
+|------|------|
+| 标题 | `24px / 36px`, font-weight: `600`, `--color-black-6`, text-align: `center` |
+| 描述 | `16px / 22px`, `#666666`, text-align: `center`（可选） |
+| 关闭按钮 | `24×24`, absolute, `right: 16px, top: 24px` |
+
+---
+
+## 2. 选项列表
+
+| 属性 | 值 |
+|------|------|
+| 最大数量 | **7 个** |
+| 布局 | `flex-column` |
+| 溢出 | `overflow-y: auto` |
+
+### 选项行
+
+| 属性 | 值 |
+|------|------|
+| 内边距 | `16px` |
+| 文字 | `20px / 28px`, `--color-black-6`, text-align: `center`, 宽 `440px` |
+| 默认背景 | `--color-grey-1`（`#FFFFFF`） |
+| **选中背景** | **`--color-grey-2`**（`#F3F4F6`） |
+| 交互 | `:active` → `--color-grey-2` |
+
+### 行间分割线
+
+| 属性 | 值 |
+|------|------|
+| 颜色 | `--color-black-2`（`#DDDDDD`） |
+| 高度 | `1px` |
+| 宽度 | `448px`，居中 |
+| 规则 | 除最后一项外，每项下方显示 |
+
+---
+
+## 3. 底部取消按钮
+
+| 属性 | 值 |
+|------|------|
+| 顶部分割线 | `4px solid --color-black-2`（粗线） |
+| 按钮背景 | `--color-grey-1` |
+| 按钮文字 | `取消`, `20px / 28px`, `--color-black-6`, 居中 |
+| 按钮内边距 | `16px` |
+| 交互 | `:active` → `--color-grey-2` |
+| 行为 | 点击关闭面板；有已选项时带出选中值 |
+
+---
+
+## HTML 骨架
+
+```html
+<div class="picker-single-panel">
+  <div class="picker-single-header">
+    <p class="picker-single-header-title">标题文本</p>
+    <p class="picker-single-header-desc">描述信息位置展示</p>
+    <div class="picker-single-header-close">×</div>
+  </div>
+  <div class="picker-single-list">
+    <!-- 选项循环，选中项追加 .selected -->
+    <div class="picker-single-option selected">
+      <span class="picker-single-option-text">点击</span>
+    </div>
+    <div class="picker-single-divider"></div>
+    <div class="picker-single-option">
+      <span class="picker-single-option-text">选项</span>
+    </div>
+    <!-- ...最多7项 -->
+  </div>
+  <div class="picker-single-bottom">
+    <div class="picker-single-bottom-divider"></div>
+    <button class="picker-single-btn-cancel">
+      <span class="picker-single-btn-text">取消</span>
+    </button>
+  </div>
+</div>
+```
+
+---
+
+## JS 交互逻辑
+
+```javascript
+const options = [
+  { id: '1', name: '选项一' },
+  { id: '2', name: '选项二' },
+  // ... 最多 7 项
+];
+let selectedId = null;
+
+function selectOption(id) {
+  selectedId = (selectedId === id) ? null : id;
+  renderList();
+}
+
+function closePicker() {
+  // 关闭面板；若有已选项则带出
+  if (selectedId) {
+    const opt = options.find(o => o.id === selectedId);
+    // 回调外传 opt
+  }
+}
+```
+
+---
+
+## ⚙️ PDA 硬性约束
+
+| # | 约束 | 值 | 原因 |
+|---|------|-----|------|
+| 1 | 选项上限 | **7 个** | 超过则需滚动或换组件 |
+| 2 | 最小触控热区 | 选项行高度 ≥ **60px**（16+28+16） | 仓储手套操作 |
+| 3 | 选中反馈 | 背景变色（`--color-grey-2`），无额外图标 | 极简设计 |
+| 4 | 底部粗分割线 | `4px` | 视觉区分选项区与取消区 |
+| 5 | 字体下界 | 选项文字 ≥ 20px | 小屏可读性底线 |
+
+---
+
+## 🔴 常见 AI 错误
+
+| # | ❌ 错误 | ✅ 正确 |
+|---|--------|--------|
+| 1 | 选项超过 7 个 | 最多 7 个，超出需分页或改用搜索选择器 |
+| 2 | 选中态加勾选图标 | 仅灰底变色，无任何图标 |
+| 3 | 底部加确定按钮 | 仅取消按钮 |
+| 4 | 行间用 gap 间距 | 必须用 `1px` 分割线，最后一项无 |
+| 5 | 底部用 `1px` 线分隔 | 必须用 `4px` 粗线 |