pda-kit-mcp-server 2.0.1

package/spec-data/more-actions.md

@@ -0,0 +1,427 @@
+---
+id: more-actions
+name: 更多操作弹窗
+category: "反馈/Feedback"
+version: "1.0.0"
+source: PDAKit-基础组件
+source_url: https://mastergo.ky-tech.com.cn/goto/TXpebXRm
+source_doc_id: 103417331857122
+component_count: 2
+binds_to: navbar.md
+---
+
+# 更多操作弹窗 More Actions
+
+底部弹出式功能入口面板，**与导航栏强绑定** —— 点击导航栏右侧"更多"图标触发，由底部向上滑入。
+
+> **交互**: 底部弹出（Bottom Sheet），顶部圆角 16px，下滑或点击"关闭"按钮收起。
+> **动效**: 抽屉类从底部弹出的面板统一使用由下往上滑入动画，`300ms` 缓入（`ease-in`）。
+> **颜色规则**: 全部使用 Token（`--color-{色系}-{色阶}`），禁止 Hex。
+
+---
+
+## 组件总览
+
+| 组件 | Key | 用途 |
+|------|-----|------|
+| 更多操作弹窗 | `036-更多操作弹窗` | 底部面板容器（标题 + 滑动网格 + 固定底栏） |
+| 更多操作项 | `037-更多操作项` | 单个功能入口（圆形图标 + 文字） |
+
+---
+
+## 1. 更多操作弹窗（面板容器）
+
+### Props
+
+| Prop | 类型 | 默认 | 说明 |
+|------|------|------|------|
+| 报单切换 | boolean | `false` | 是否显示报单切换区 |
+| 无快捷跳转 | boolean | `true` | 是否隐藏快捷跳转行 |
+| 更多选项 | boolean | `false` | 是否显示更多选项行 1 |
+| 更多选项2 | boolean | `false` | 是否显示更多选项行 2 |
+
+### 规格
+
+| 属性 | 值 |
+|------|------|
+| 宽度 | `480px` |
+| 最小高度 | `320px` |
+| 最大高度 | `740px` |
+| 背景 | `--color-grey-2` |
+| 顶部圆角 | `16px`（仅左上/右上） |
+| 内边距 | t/b `16px`, l/r `24px` |
+| 弹出方式 | 底部向上滑入（Bottom Sheet） |
+| 触发 | 导航栏右侧"更多"图标 `➤更多` |
+
+### 布局结构
+
+```
+┌──────────────────────────────────────┐
+│         更多操作 (22/30/Semibold)      │  ← 标题（居中）
+│                                         │
+├──────────────────────────────────────┤  ← 标题下方 16px 间距
+│  ┌──────┐  ┌──────┐  ┌──────┐  ┌──────┐ │
+│  │ 白框  │  │ 白框  │  │ 白框  │  │ 白框  │ │  ← 行 1（68×68 白色圆框 + 40×40 图标）
+│  │ 文字  │  │ 文字  │  │ 文字  │  │ 文字  │ │
+│  └──────┘  └──────┘  └──────┘  └──────┘ │
+│  ┌──────┐  ┌──────┐  ┌──────┐  ┌──────┐ │
+│  │ 图标  │  │ 图标  │  │ 图标  │  │ 图标  │ │  ← 行 2..N
+│  │ 文字  │  │ 文字  │  │ 文字  │  │ 文字  │ │
+│  └──────┘  └──────┘  └──────┘  └──────┘ │
+│  ... (可滚动，max-h: 417px)              │
+├──────────────────────────────────────┤
+│  ─── 分割线 ───                        │
+│  ┌──────┐                             │
+│  │ 白框  │                             │  ← 模块评价（始终展示，图标在上文字在下）
+│  │模块评价│                             │
+│  └──────┘                             │
+├──────────────────────────────────────┤
+│        [ 关闭 ] (线条按钮/次要)         │  ← 固定底栏
+└──────────────────────────────────────┘
+```
+
+### 颜色
+
+| 元素 | Token | 色值 |
+|------|-------|------|
+| 面板背景 | `--color-grey-2` | `#F3F4F6` |
+| 标题 | `--color-black-6` | `#333333` |
+| 分割线 | `--color-black-2` | `#DDDDDD` |
+| 关闭按钮 | 线条按钮/次要（沿用 button.md） | — |
+
+### 字体
+
+| 元素 | 字号 | 行高 | 字重 |
+|------|------|------|------|
+| 标题 "更多操作" | 22px | 30px | Semibold | 标题下方 `16px` 间距 |
+| 功能入口文字 | 16px | 22px | Semibold |
+
+---
+
+## 2. 更多操作项（单个入口）
+
+每个入口展示一个应用功能图标，结构为：**上方图标 → 下方名称**。图标区域用 68×68 白色圆形外框包裹，内部放置 40×40 的应用图标。
+
+### Props
+
+| Prop | 类型 | 值 |
+|------|------|-----|
+| 类型 | enum | `功能入口` |
+| 模块名称 | string | 任意（默认 `请输入名称`） |
+| 应用图标 | icon-ref | `icons-应用/` 目录下的 SVG 图标引用 |
+
+### 规格
+
+| 属性 | 值 |
+|------|------|
+| 外框 | `68×68`，圆形，白色背景（`--color-grey-1` / `#FFFFFF`） |
+| 图标尺寸 | `40×40`，居中放置于白色外框内部 |
+| 文字宽度 | `80px`（限制两行） |
+| 图标-文字间距 | `--spacing-8` |
+| 字体 | `16px / 22px`，PingFang SC Semibold，居中对齐 |
+| 文字颜色 | `--color-black-6` |
+| 水平对齐 | 整体垂直排列，文字和图标均居中 |
+
+### 网格规格
+
+| 属性 | 值 |
+|------|------|
+| 列数 | 4 列 |
+| 列间距 | `36px` |
+| 行间距 | `18px` |
+| 水平排列 | **居左**（`justify-content: flex-start`），禁止居中 |
+| 内容区宽度 | `432px`（480 - 24×2） |
+| 可滚动区最大高度 | `417px` |
+| 默认预置入口 | 16 个（4 行 × 4 列） |
+
+### CSS 示例
+
+```css
+/* 更多操作弹窗 — 底部面板 */
+.more-actions-panel {
+  width: 480px;
+  min-height: 320px;
+  max-height: 740px;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--spacing-16);
+  padding: 16px 24px;
+  background: var(--color-grey-2);
+  border-radius: 16px 16px 0 0;
+  overflow: hidden;
+  /* 动画：从底部滑入，300ms ease-in */
+  animation: slideUp 300ms ease-in;
+}
+
+@keyframes slideUp {
+  from { transform: translateY(100%); }
+  to   { transform: translateY(0); }
+}
+
+/* 标题 */
+.more-actions-title {
+  align-self: stretch;
+  color: var(--color-black-6);
+  font-size: 22px;
+  line-height: 30px;
+  font-weight: 600;
+  font-family: PingFang SC;
+  text-align: center;
+}
+
+/* 可滚动网格区 */
+.more-actions-grid {
+  flex: 1;
+  max-height: 417px;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  overflow: hidden auto;
+}
+.more-actions-row {
+  display: flex;
+  justify-content: flex-start;
+  gap: 36px;
+}
+
+/* 固定底栏 */
+.more-actions-footer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  padding-top: 16px;
+  background: var(--color-grey-2);
+}
+.more-actions-footer .divider {
+  width: 432px;
+  height: 1px;
+  background: var(--color-black-2);
+}
+.more-actions-footer .bottom-row {
+  display: flex;
+  gap: 36px;
+  padding: 16px 0;
+}
+
+/* 关闭按钮 */
+.more-actions-close {
+  width: 100%;
+  min-height: 64px;
+  max-height: 64px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* 线条按钮/次要 Token 沿用 button.md */
+}
+
+---
+
+/* 更多操作项 */
+.more-action-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-8);
+  flex-shrink: 0;
+}
+.more-action-icon {
+  width: 68px;
+  height: 68px;
+  border-radius: 68px;
+  background: var(--color-grey-1);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.more-action-icon svg {
+  width: 40px;
+  height: 40px;
+}
+.more-action-text {
+  width: 80px;
+  color: var(--color-black-6);
+  font-size: 16px;
+  line-height: 22px;
+  font-weight: 600;
+  font-family: PingFang SC;
+  text-align: center;
+}
+```
+
+---
+
+## HTML 示例
+
+### 图标引用方式
+
+```html
+<!-- 功能入口图标引用示例 -->
+<!-- 假设 HTML 文件位于 demos/ 目录，图标位于 icons-应用/ 目录 -->
+
+<!-- 取货类图标 -->
+<img src="../icons-应用/应用/取货/快速揽件.svg" alt="快速揽件">
+<img src="../icons-应用/应用/取货/打印运单.svg" alt="打印运单">
+<img src="../icons-应用/应用/取货/取货核对.svg" alt="取货核对">
+<img src="../icons-应用/应用/取货/开箱拍照.svg" alt="开箱拍照">
+
+<!-- 派货类图标 -->
+<img src="../icons-应用/应用/派货/一键签收.svg" alt="一键签收">
+<img src="../icons-应用/应用/派货/派货异常.svg" alt="派货异常">
+<img src="../icons-应用/应用/派货/货物拍照.svg" alt="货物拍照">
+
+<!-- 干线类图标 -->
+<img src="../icons-应用/应用/干线/到件扫描.svg" alt="到件扫描">
+<img src="../icons-应用/应用/干线/发件扫描.svg" alt="发件扫描">
+<img src="../icons-应用/应用/干线/交接扫描.svg" alt="交接扫描">
+
+<!-- 理货类图标 -->
+<img src="../icons-应用/应用/理货/分拣扫描.svg" alt="分拣扫描">
+<img src="../icons-应用/应用/理货/建包管理.svg" alt="建包管理">
+<img src="../icons-应用/应用/理货/中转解包.svg" alt="中转解包">
+
+<!-- 更多/固定入口 -->
+<img src="../icons-应用/更多/刷新.svg" alt="刷新">
+<img src="../icons-应用/更多/报单切换.svg" alt="报单切换">
+<img src="../icons-应用/更多/模块评价.svg" alt="模块评价">
+```
+
+### 完整结构示例
+
+```html
+<!-- 更多操作弹窗完整 HTML 结构 -->
+<div class="more-actions-overlay" id="moreActionsOverlay">
+  <div class="more-actions-panel">
+    <!-- 标题 -->
+    <div class="more-actions-title">更多操作</div>
+    
+    <!-- 可滚动网格区 -->
+    <div class="more-actions-grid">
+      <div class="more-actions-row">
+        <!-- 单个入口 -->
+        <div class="more-action-item">
+          <div class="more-action-icon">
+            <!-- ⚠️ 必须使用 icons-应用/ 目录下的图标 -->
+            <img src="../icons-应用/应用/取货/快速揽件.svg" alt="快速揽件">
+          </div>
+          <span class="more-action-text">快速揽件</span>
+        </div>
+        <!-- 更多入口... -->
+      </div>
+    </div>
+    
+    <!-- 固定底部：分割线 + 模块评价 + 关闭按钮 -->
+    <div class="more-actions-footer">
+      <div class="divider"></div>
+      <div class="bottom-row">
+        <div class="more-action-item">
+          <div class="more-action-icon">
+            <!-- 模块评价图标（始终存在） -->
+            <img src="../icons-应用/更多/模块评价.svg" alt="模块评价">
+          </div>
+          <span class="more-action-text">模块评价</span>
+        </div>
+      </div>
+      <button class="more-actions-close">关闭</button>
+    </div>
+  </div>
+</div>
+```
+
+---
+
+## 与导航栏的绑定关系
+
+| 导航栏变体 | 更多图标位置 | 触发后 |
+|-----------|-------------|--------|
+| 默认标题 | 最右侧 `➤更多` | 弹出更多操作弹窗 |
+| 标签页-圆角 | 最右侧 `➤更多` | 弹出更多操作弹窗 |
+| 标签页-下划线 | 最右侧 `➤更多` | 弹出更多操作弹窗 |
+| 头部作业人 | 右侧（作业人胶囊后）`➤更多` | 弹出更多操作弹窗 |
+| 头部搜索 | 无更多图标 | — |
+| 右侧按钮+菜单 | 最右侧 `➤更多` | 弹出更多操作弹窗 |
+
+> 更多操作弹窗是导航栏的附属组件，不作为独立页面存在。AI 生成时应自动关联 `➤更多` 图标 → 更多操作弹窗。
+
+---
+
+## 附录 A：颜色 Token
+
+| Token | 色值 | 使用场景 |
+|-------|------|---------|
+| `--color-grey-2` | `#F3F4F6` | 面板背景、底部固定区背景 |
+| `--color-grey-1` | `#FFFFFF` | 图标容器背景、关闭按钮 |
+| `--color-black-6` | `#333333` | 标题、功能入口文字 |
+| `--color-black-2` | `#DDDDDD` | 底部分割线 |
+
+---
+
+## 附录 B：字体 Token
+
+| Token | 字号 | 行高 | 字重 | 适用 |
+|-------|------|------|------|------|
+| `text/22/30` | 22px | 30px | Semibold | 标题 "更多操作" |
+| 16/22/Semibold | 16px | 22px | Semibold | 功能入口文字 |
+
+> 字体统一 PingFang SC。详见 [tokens/typography.md](../tokens/typography.md)
+
+---
+
+## 使用规则（AI 必读）
+
+1. **与导航栏强绑定**：不为独立组件，必须作为导航栏 `➤更多` 图标的弹出层
+2. **标题居中**：标题 "更多操作" 始终水平居中展示
+3. **4 列网格，居左排列**：每行 4 个入口，列间距 36px，行间距 18px，**默认居左**（`justify-content: flex-start`），禁止居中
+4. **白色圆框包裹图标**：每个入口的图标用 68×68 白色圆形外框（`--color-grey-1`）包裹，内部放置 40×40 应用图标
+5. **图标来源（⚠️ 强制）**：功能入口图标**必须全部**从 `icons-应用/` 目录引用，按业务分类（取货/派货/干线/理货/进港/出港/分拨/取派/工具箱/其他）。**禁止**使用 `icons/assets/` 下的通用图标（如 `common_ic_xxx.svg`）作为 more-actions 的功能入口图标
+6. **模块评价始终固定**：分割线下方始终展示「模块评价」入口，**无论是否有其他入口，模块评价都不可隐藏**。入口样式与其他功能入口一致（上方 68×68 白色圆框 + 40×40 图标，下方 16px/22px 居中文字）。图标使用 `icons-应用/更多/模块评价.svg`
+7. **固定底部**：分割线 + 模块评价 + 关闭按钮不随网格区滚动。**分割线上方间距 16px**（`padding-top: 16px`）；footer 容器必须设置 `align-items: flex-start` 防止子元素被拉伸后居中
+8. **关闭按钮**：线条按钮/次要，64px 高，撑满宽度，点击收起面板
+9. **可配置入口**：通过 Props 控制快捷跳转行显隐，但模块评价入口始终存在
+10. **动效**：所有抽屉类从底部弹出的面板，统一使用 `slideUp` 动画：`translateY(100%)` → `translateY(0)`，`300ms ease-in`。CSS: `animation: slideUp 300ms ease-in;`，`@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }`
+
+---
+
+## 🔴 常见 AI 错误 & 自检清单
+
+> **生成完后必须逐项自查。以下每一项记录了过去实际犯过的错误，不要再次踩坑。**
+
+| # | ❌ 错误写法 | ✅ 正确写法 | 为什么 |
+|---|-----------|-----------|--------|
+| 1 | 面板背景 `#FFFFFF` | `#F3F4F6` | `#FFFFFF` 和 `#F3F4F6` 刚好相反——面板是灰底(`#F3F4F6`)，图标外框是白底(`#FFFFFF`) |
+| 2 | 图标外框背景 `#F3F4F6` | `#FFFFFF` | 同上，这两个色绝不能互换 |
+| 3 | `icons/assets/common_ic_xxx.svg` | `icons-应用/应用/派货/一键签收.svg` | more-actions 的功能入口图标只能来自 `icons-应用/`，不能是 `icons/assets/` |
+| 4 | 模块评价缺失 | 分割线 + 模块评价 + 关闭按钮，三个缺一不可 | 模块评价**始终存在**，不能省略 |
+| 5 | footer 无 `align-items: flex-start` | `align-items: flex-start` | 默认 `stretch` 会导致模块评价水平居中，必须显式靠左 |
+| 6 | `transition` 做动效 | `animation: slideUp 300ms ease-in` | 抽屉类 Bottom Sheet 统一用 `@keyframes`，不是 `transition` |
+| 7 | 图标 36×36 | 图标 **40×40** | — |
+| 8 | 功能文字 14px / 行高 20px | **16px / 22px** Semibold | — |
+| 9 | 3 列网格 | **4 列**，列间距 36px，行间距 18px | — |
+| 10 | 弹窗用空 `div` placeholder | 完整结构：遮罩 + 面板（标题+网格+分割线+模块评价+关闭按钮） | navbar.md 的更多按钮强绑定到此完整结构 |
+
+### 自检步骤
+
+生成完 more-actions 弹窗后，在终端执行以下检查：
+
+```bash
+# 1. 检查图标是不是都来自 icons-应用/（不应该出现 common_ic_ 前缀）
+grep -n 'more-action-icon.*src' your-demo.html | grep 'icons/assets'
+# ↑ 如果有输出，说明图标来源错了，改成 icons-应用/
+
+# 2. 检查是否包含模块评价
+grep -c '模块评价' your-demo.html
+# ↑ 输出必须 ≥ 1
+
+# 3. 检查是否有关闭按钮
+grep -c 'more-actions-close' your-demo.html
+# ↑ 输出必须 ≥ 1
+
+# 4. 检查面板背景色
+grep 'more-actions-panel' your-demo.html -A5 | grep 'background'
+# ↑ 必须是 #F3F4F6，不能是 #FFFFFF
+
+# 5. 检查图标外框背景
+grep 'more-action-icon' your-demo.html -A3 | grep 'background'
+# ↑ 必须是 #FFFFFF，不能是 #F3F4F6
+```