pda-kit-mcp-server 2.0.1

package/spec-data/drawer.md

@@ -0,0 +1,301 @@
+---
+id: drawer
+name: 弹出层抽屉 Drawer
+category: "反馈/Feedback"
+version: "1.0.0"
+source: PDAKit-基础组件
+source_url: https://mastergo.ky-tech.com.cn/goto/UgWcXgl5
+source_doc_id: 103417331857122
+component_count: 1
+---
+
+# 弹出层抽屉 Drawer
+
+底部弹出式抽屉面板。由底部向上滑入，默认占页面 **75% 高度**。头部标题固定展示，内容区可自定义，底部操作按钮可配置显隐。
+
+> **交互**: 底部滑入（Bottom Sheet），顶部圆角 `16px`，支持下滑关闭或点击遮罩关闭。
+> **动效**: 由下往上滑入，`300ms ease-in`。
+> **颜色规则**: 全部使用 Token（`--color-{色系}-{色阶}`），禁止 Hex。
+
+---
+
+## 结构
+
+```
+┌──────────────────────────────────────┐
+│           遮罩层 (.drawer-overlay)    │  rgba(0,0,0,0.5) 全屏
+│  ┌────────────────────────────────┐  │
+│  │     头部标题 (居中)             │  │
+│  │     描述文本                    │  │  94px, flex-shrink: 0
+│  │              ✕                  │  │  关闭按钮绝对定位右侧
+│  │  ─────────────────────────────  │  │  1px 分割线
+│  │                                │  │
+│  │  内容区 (.drawer-body)           │  │  自定义内容，flex: 1，可滚动
+│  │                                │  │
+│  │                                │  │
+│  │  ─────────────────────────────  │  │
+│  │  底部操作栏 (.drawer-footer)     │  │  可选，可配置显隐
+│  └────────────────────────────────┘  │
+└──────────────────────────────────────┘
+```
+
+---
+
+## 容器规格
+
+| 属性 | 值 |
+|------|-----|
+| 面板高度 | `75vh`（默认占页面 75%） |
+| 面板宽度 | `100%` |
+| 顶部圆角 | `16px 16px 0 0` |
+| 背景 | `--color-grey-1`（`#FFFFFF`） |
+| 遮罩层 | `rgba(0,0,0,0.5)`，覆盖全屏 |
+
+---
+
+## 子区域规格
+
+### 拖拽条
+
+> **无拖拽条**。面板顶部直接为头部标题区，不展示拖拽手柄。
+
+### 头部标题 (.drawer-header)
+
+| 属性 | 值 |
+|------|-----|
+| 高度 | `94px` |
+| 布局 | `flex-col` + `align-items: center` + `justify-content: center` + `position: relative` |
+| 内边距 | `16px` |
+| 标题字号 | `20px / 28px`，`font-weight: 600` |
+| 标题颜色 | `--color-black-6`（`#333333`） |
+| 标题对齐 | **居中** |
+| 描述文本字号 | `14px / 20px`，`font-weight: 400` |
+| 描述文本颜色 | `--color-black-4`（`#888888`） |
+| 描述文本间距 | `margin-top: 4px` |
+| 关闭图标 | `common_ic_close_o.svg`，`24×24px`，绝对定位右侧 |
+| 底部分割线 | `1px`，`--color-black-2`（`#DDDDDD`） |
+
+### 内容区 (.drawer-body)
+
+| 属性 | 值 |
+|------|-----|
+| 布局 | `flex: 1` + `overflow-y: auto` |
+| 内边距 | `16px` |
+| 内容 | 完全自定义，支持任意组件 |
+
+### 底部操作栏 (.drawer-footer)
+
+| 属性 | 值 |
+|------|-----|
+| 高度 | `80px` |
+| 显示 | 可选，通过 prop 控制 |
+| 布局 | `flex` + `align-items: center` + `justify-content: center` |
+| 内边距 | `0 16px` |
+| 顶部分割线 | `1px`，`--color-black-2`（`#DDDDDD`） |
+| 按钮样式 | 使用 `button.md` 规范 |
+
+---
+
+## 动效
+
+| 属性 | 值 |
+|------|-----|
+| 动画 | `transform: translateY(100%) → translateY(0)` |
+| 时长 | `300ms` |
+| 缓动 | `ease-in`（打开）/ `ease-out`（关闭） |
+
+```css
+.drawer-panel {
+  animation: drawerSlideIn 300ms ease-in;
+}
+
+@keyframes drawerSlideIn {
+  from { transform: translateY(100%); }
+  to   { transform: translateY(0); }
+}
+```
+
+---
+
+## 尺寸速查
+
+| 元素 | 值 |
+|------|------|
+| 面板高度 | `75vh` |
+| 面板宽度 | `100%` |
+| 顶部圆角 | `16px` |
+| 头部高度 | `94px` |
+| 标题字号 | `20px / 28px`，Semibold，居中 |
+| 描述字号 | `14px / 20px`，`--color-black-4` |
+| 关闭图标 | `24×24px` |
+| 底部操作栏 | `80px`（可选） |
+| 分割线 | `1px`，`--color-black-2` |
+
+---
+
+## HTML 示例
+
+```html
+<!-- 遮罩层 -->
+<div class="drawer-overlay" onclick="closeDrawer()">
+  <!-- 面板 -->
+  <div class="drawer-panel" onclick="event.stopPropagation()">
+
+    <!-- 头部（居中标题 + 描述） -->
+    <div class="drawer-header">
+      <span class="drawer-title">标题</span>
+      <span class="drawer-desc">描述文本</span>
+      <img src="./icons/assets/common_ic_close_o.svg" class="drawer-close" width="24" height="24" alt="关闭" onclick="closeDrawer()">
+    </div>
+    <div class="drawer-header-divider"></div>
+
+    <!-- 内容区（自定义） -->
+    <div class="drawer-body">
+      <!-- 任意组件内容 -->
+    </div>
+
+    <!-- 底部操作栏（可选） -->
+    <div class="drawer-header-divider"></div>
+    <div class="drawer-footer">
+      <button class="btn-primary">确定</button>
+    </div>
+  </div>
+</div>
+```
+
+---
+
+## CSS
+
+```css
+/* 遮罩 */
+.drawer-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+/* 面板 */
+.drawer-panel {
+  width: 100%;
+  height: 75vh;
+  background: var(--color-grey-1);
+  border-radius: 16px 16px 0 0;
+  display: flex;
+  flex-direction: column;
+  animation: drawerSlideIn 300ms ease-in;
+}
+
+@keyframes drawerSlideIn {
+  from { transform: translateY(100%); }
+  to   { transform: translateY(0); }
+}
+
+/* 头部：居中标题 + 描述 */
+.drawer-header {
+  height: 94px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.drawer-title {
+  font: 600 20px/28px "PingFang SC", -apple-system, sans-serif;
+  color: var(--color-black-6);
+}
+
+.drawer-desc {
+  font: 400 14px/20px "PingFang SC", -apple-system, sans-serif;
+  color: var(--color-black-4);
+  margin-top: 4px;
+}
+
+.drawer-close {
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+/* 头部分割线 */
+.drawer-header-divider {
+  width: 100%;
+  height: 1px;
+  background: var(--color-black-2);
+  flex-shrink: 0;
+}
+
+/* 内容区 */
+.drawer-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+}
+
+/* 底部操作栏 */
+.drawer-footer {
+  height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 16px;
+  flex-shrink: 0;
+}
+```
+
+---
+
+## JS 示例
+
+```javascript
+function openDrawer(id) {
+  document.getElementById(id).classList.remove('hidden');
+}
+
+function closeDrawer(id) {
+  document.getElementById(id).classList.add('hidden');
+}
+```
+
+---
+
+## 颜色 Token
+
+| Token | 色值 | 使用场景 |
+|-------|------|---------|
+| `--color-grey-1` | `#FFFFFF` | 面板背景 |
+| `--color-black-2` | `#DDDDDD` | 头部分割线、底部分割线 |
+| `--color-black-4` | `#888888` | 描述文字 |
+| `--color-black-6` | `#333333` | 标题文字 |
+| 遮罩 | `rgba(0,0,0,0.5)` | 遮罩背景 |
+
+---
+
+## 使用规则（AI 必读）
+
+1. **面板固定 `75vh`**：默认占页面 75% 高度，不随内容变化
+2. **面板宽度 `100%`**：撑满父容器全宽，不留间隙
+3. **遮罩层关键 CSS**：`flex-direction: column; justify-content: flex-end` 将面板推到底部且撑满宽度
+4. **无拖拽条**：面板顶部直接为头部标题区，不要画拖拽手柄
+5. **标题居中**：`.drawer-title` 水平居中，下方可选描述文本（`.drawer-desc`）
+6. **头部 `94px`**：固定高度，标题 + 描述始终可见，不随内容滚动
+7. **关闭按钮必右侧**：绝对定位 `right: 16px; top: 50%; transform: translateY(-50%)`
+8. **内容完全自定义**：`.drawer-body` 内可放入 input-row、selectable-list、photo-list 等任意组件
+9. **底部操作栏可选**：通过是否渲染 `.drawer-footer` 控制显隐
+10. **遮罩点击关闭**：点击遮罩层触发关闭，面板内 `event.stopPropagation()` 阻止冒泡
+11. **底部按钮**：仅一个按钮占满宽度；两个按钮 `gap: 12px`，各 `flex: 1`
+12. **打开/关闭**：通过 `classList.add/remove('hidden')` 控制显示，动画由 CSS `drawerSlideIn` 驱动
+13. **关闭图标**：固定使用 `common_ic_close_o.svg`，不可替换
+14. **颜色全部 Token**：禁止使用 Hex 色值

package/spec-data/empty-state.md

@@ -0,0 +1,336 @@
+---
+id: empty-state
+name: 空状态
+category: "反馈/Feedback"
+version: "1.0.0"
+source: PDAKit-基础组件
+source_url: https://mastergo.ky-tech.com.cn/goto/TXXlKmov
+source_doc_id: 103417331857122
+component_count: 1
+---
+
+# 空状态 Empty State
+
+缺省页组件，用于列表为空、无数据、无权限、网络断开等场景。包含插画、标题、辅助说明和操作按钮，各元素按实际场景按需显示或隐藏。
+
+> **颜色规则**：全部使用 Token（`--color-{色系}-{色阶}`），禁止 Hex。
+> **字体**：PingFang SC。
+
+---
+
+## 组件总览
+
+| 区域 | 是否必须 | 说明 |
+|------|---------|------|
+| 插画 | 是 | 空状态插图，位于最上方 |
+| 标题文字 | 是 | 核心提示文字 |
+| 次级标题说明文案 | 否 | 补充说明，辅助用户理解当前状态 |
+| 主按钮 | 否 | 主操作入口（如"重试""创建任务"） |
+| 次按钮 | 否 | 次要操作入口（如"查看帮助"） |
+| 文字按钮组 | 否 | 1-2 个弱操作入口，中间竖线分隔 |
+
+---
+
+## 布局结构
+
+```
+┌──────────────────────────────────┐
+│                                  │
+│         [插画 Illustration]       │  ← 空状态图片，按场景选择
+│                                  │
+
+
+│            标题文字               │  ← 20px/28px Semibold
+│        次级标题说明文案            │  ← 16px/22px Regular（可选）
+│                                  │
+│       [      主按钮      ]        │  ← 中号/主色/240px（可选）
+│       [      次按钮      ]        │  ← 中号/线条/240px（可选）
+│                                  │
+│      创建任务   │  一键装货        │  ← 文字按钮小号（可选，1-2个）
+│                                  │
+└──────────────────────────────────┘
+```
+
+---
+
+## 规格
+
+### 容器
+
+| 属性 | 值 |
+|------|------|
+| 宽度 | `480px` |
+| 最小高度 | `430px`（随内容自适应） |
+| 布局 | 垂直排列（`flex-col`） |
+| 水平对齐 | `items-center` |
+| 插画-文字区间距 | `16px` |
+| 文字区-按钮区间距 | `32px` |
+
+### 标题文字
+
+| 属性 | 值 |
+|------|------|
+| 字体 | PingFang SC，`20px / 28px`，Semibold（`600`） |
+| 颜色 | `--color-grey-6`（`#52567B`） |
+| 对齐 | `text-center` |
+
+### 次级标题说明文案
+
+| 属性 | 值 |
+|------|------|
+| 字体 | PingFang SC，`16px / 22px`，Regular（`400`），沿用 `text/16/22` |
+| 颜色 | `--color-black-4`（`#888888`） |
+| 最大宽度 | `384px` |
+| 对齐 | `text-center` |
+| 与标题间距 | `12px` |
+
+### 按钮区
+
+| 按钮 | 类型 | 宽度 | 说明 |
+|------|------|------|------|
+| 主按钮 | 中号/主色 | `240px` | 单个主操作（如"重试""去创建"） |
+| 次按钮 | 中号/线条（主要线条） | `240px` | 次要操作（如"查看帮助"） |
+| 文字按钮组 | 文字按钮-小号/主要 | 自适应 | 1-2 个弱操作，中间 `│` 分隔 |
+
+> 按钮区内部间距：主按钮与次按钮间距 `16px`，文字按钮组与前一个按钮间距 `16px`。
+> 文字按钮组内间距：文字按钮之间间距 `12px`，分隔符为 `1px × 16px` 竖线。
+
+---
+
+## 插画资源
+
+插画 PNG 文件位于 [`空状态/`](../空状态/)，共 **10 张**，对应不同业务场景：
+
+| 文件名 | 场景 |
+|--------|------|
+| `填写运单号.png` | 需要用户输入运单号 |
+| `暂无任务.png` | 当前没有待处理任务 |
+| `暂无内容.png` | 列表/页面无内容 |
+| `暂无收款项.png` | 没有待收款项 |
+| `暂无权限.png` | 当前用户无权限访问 |
+| `暂无查询结果.png` | 搜索/查询无匹配结果 |
+| `暂无记录.png` | 没有历史记录 |
+| `网络无连接.png` | 网络断开，无法加载 |
+| `请扫描运单号.png` | 引导用户扫描运单号 |
+| `请扫齐托盘货物.png` | 引导用户扫描托盘货物 |
+
+引用方式：`src="./空状态/暂无任务.png"`
+
+---
+
+## HTML 示例
+
+### 场景 A：网络断开（插画 + 标题 + 主按钮）
+
+```html
+<!-- 空状态：网络无连接 -->
+<div class="empty-state">
+  <img class="empty-state-illustration" src="./空状态/网络无连接.png" alt="网络无连接" />
+  <div class="empty-state-text">
+    <p class="empty-state-title">网络无连接</p>
+  </div>
+  <div class="empty-state-actions">
+    <button class="btn-empty-primary">重试</button>
+  </div>
+</div>
+```
+
+### 场景 B：暂无任务（插画 + 标题，无按钮）
+
+```html
+<div class="empty-state">
+  <img class="empty-state-illustration" src="./空状态/暂无任务.png" alt="暂无任务" />
+  <div class="empty-state-text">
+    <p class="empty-state-title">暂无任务</p>
+  </div>
+</div>
+```
+
+### 场景 C：请扫描运单号（插画 + 标题 + 说明 + 文字按钮组）
+
+```html
+<div class="empty-state">
+  <img class="empty-state-illustration" src="./空状态/请扫描运单号.png" alt="请扫描运单号" />
+  <div class="empty-state-text">
+    <p class="empty-state-title">请扫描运单号</p>
+    <p class="empty-state-subtitle">扫描运单号条形码，快速录入信息</p>
+  </div>
+  <div class="empty-state-actions">
+    <div class="empty-state-text-links">
+      <span class="btn-empty-text-link">创建任务</span>
+      <span class="empty-state-divider"></span>
+      <span class="btn-empty-text-link">一键装货</span>
+    </div>
+  </div>
+</div>
+```
+
+### 场景 D：暂无查询结果（插画 + 标题 + 说明 + 主按钮 + 次按钮）
+
+```html
+<div class="empty-state">
+  <img class="empty-state-illustration" src="./空状态/暂无查询结果.png" alt="暂无查询结果" />
+  <div class="empty-state-text">
+    <p class="empty-state-title">暂无查询结果</p>
+    <p class="empty-state-subtitle">请调整筛选条件后重试</p>
+  </div>
+  <div class="empty-state-actions">
+    <button class="btn-empty-primary">重新查询</button>
+    <button class="btn-empty-secondary">查看帮助</button>
+  </div>
+</div>
+```
+
+---
+
+## CSS
+
+```css
+/* 空状态容器 */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  width: 480px;
+  min-height: 430px;
+}
+
+/* 插画 */
+.empty-state-illustration {
+  display: block;
+  width: 160px;
+  height: 160px;
+}
+
+/* 文字区 */
+.empty-state-text {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 12px;
+  padding-top: 16px;
+}
+
+/* 标题 */
+.empty-state-title {
+  color: var(--color-grey-6);
+  font-size: 20px;
+  line-height: 28px;
+  font-weight: 600;
+  font-family: PingFang SC;
+  text-align: center;
+}
+
+/* 次级说明 */
+.empty-state-subtitle {
+  max-width: 384px;
+  color: var(--color-black-4);
+  font-size: 16px;
+  line-height: 22px;
+  font-weight: 400;
+  font-family: PingFang SC;
+  text-align: center;
+}
+
+/* 按钮区 */
+.empty-state-actions {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 16px;
+  padding-top: 32px;
+}
+
+/* 主按钮 */
+.btn-empty-primary {
+  width: 240px;
+  min-height: 46px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: var(--color-main-6);
+  color: var(--color-grey-1);
+  font-size: 16px;
+  line-height: 22px;
+  font-weight: 600;
+  font-family: PingFang SC;
+  border-radius: 4px;
+  border: none;
+  cursor: pointer;
+}
+
+/* 次按钮（线条） */
+.btn-empty-secondary {
+  width: 240px;
+  min-height: 46px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: var(--color-grey-1);
+  color: var(--color-main-6);
+  font-size: 16px;
+  line-height: 22px;
+  font-weight: 600;
+  font-family: PingFang SC;
+  border: 1px solid var(--color-main-6);
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+/* 文字按钮组 */
+.empty-state-text-links {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+}
+
+/* 文字链接 */
+.btn-empty-text-link {
+  color: var(--color-main-6);
+  font-size: 16px;
+  line-height: 22px;
+  font-weight: 400;
+  font-family: PingFang SC;
+  cursor: pointer;
+}
+
+/* 竖线分隔 */
+.empty-state-divider {
+  width: 1px;
+  height: 16px;
+  background: var(--color-black-2);
+}
+```
+
+---
+
+## 颜色 Token
+
+| Token | 色值 | 使用场景 |
+|-------|------|---------|
+| `--color-grey-6` | `#52567B` | 标题文字 |
+| `--color-black-4` | `#888888` | 次级标题说明文案 |
+| `--color-main-6` | `#6445D1` | 主按钮背景、次按钮边框与文字、文字链接 |
+| `--color-grey-1` | `#FFFFFF` | 主按钮文字、次按钮背景 |
+| `--color-black-2` | `#DDDDDD` | 文字按钮组分隔竖线 |
+
+---
+
+## 使用规则（AI 必读）
+
+1. **按场景选插画**：根据 `10 张插画` 匹配当前空状态场景（网络/权限/无数据/引导扫描等），不通用插画
+2. **标题必填**：任何时候都显示标题文字，明确告知用户当前状态
+3. **副标题按需**：需要补充说明时显示（如"请调整筛选条件后重试"），简单场景可省略
+4. **按钮按场景显隐**：
+   - 网络断开 → 主按钮「重试」
+   - 无权限 → 通常无按钮
+   - 引导操作 → 文字按钮组（如"创建任务│一键装货"）
+5. **文字按钮组最多 2 个**：1 个时不显示分隔符，2 个时中间插入 `│`
+6. **主/次按钮配对**：需要单一操作时只显示主按钮；需要双操作时主按钮 + 次按钮
+7. **按钮沿用规范**：主按钮 = 中号/主色，次按钮 = 中号/线条（主要线条），文字链接 = 文字按钮-小号/主要。详见 [button.md](button.md)
+8. **禁止同时显示主按钮和文字按钮组**：两者场景不同（主动操作 vs 弱引导），不同时出现