pda-kit-mcp-server 2.0.1

package/spec-data/tab-bar.md

@@ -0,0 +1,254 @@
+---
+id: tab-bar
+name: 底部标签栏
+category: "导航/Navigation"
+version: "1.0.0"
+source: PDAKit-基础组件
+source_url: https://mastergo.ky-tech.com.cn/goto/TXZpLs43
+source_doc_id: 103417331857122
+component_count: 5
+---
+
+# 底部标签栏 Tab Bar
+
+业务属性标签栏，底部固定展示，用于首页导航切换。**4 个栏目固定**，不可增删，每个栏目有选中/未选中两态。
+
+> **颜色规则**：全部使用 Token（`--color-{色系}-{色阶}`），禁止 Hex。
+> **字体**：PingFang SC，Semibold（`600`）。
+
+---
+
+## 组件总览
+
+| 组件 | Key | 说明 |
+|------|-----|------|
+| 底部标签栏/组合 | `028-底部标签栏导航-组合` | 容器：白底 + 顶部 1px 分割线 + 4 项均分 |
+| 底部标签栏/首页 | `026-底部标签栏导航-首页` | 标签项：首页 |
+| 底部标签栏/任务 | `027-底部标签栏导航-任务` | 标签项：任务 |
+| 底部标签栏/营地 | `023-底部标签栏导航-营地` | 标签项：营地 |
+| 底部标签栏/我的 | `025-底部标签栏导航-我的` | 标签项：我的 |
+
+---
+
+## 容器规格
+
+| 属性 | 值 |
+|------|------|
+| 宽度 | `480px`（撑满父容器） |
+| 高度 | `71px` |
+| 背景 | `--color-grey-1`（`#FFFFFF`） |
+| 布局 | 垂直排列（`flex-col`），内部分割线 + 标签行 |
+| 顶部线条 | `1px` 高，`--color-black-2`（`#DDDDDD`），撑满宽度 |
+| 标签行内边距 | `6px 40px`（上下 6px，左右 40px） |
+| 标签分布 | `space-between`（4 项均分） |
+
+---
+
+## 标签项规格
+
+### 单个标签
+
+| 属性 | 值 |
+|------|------|
+| 布局 | 纵向（`flex-col`），居中对齐 |
+| 图标尺寸 | `32×32` |
+| 图标-文字间距 | `6px` |
+| 文字字体 | `14px / 20px`，PingFang SC Semibold（`600`） |
+
+### 选中态
+
+| 属性 | 值 |
+|------|------|
+| 图标 | `icons-标签栏/{栏目名}选中.svg` |
+| 文字颜色 | `--color-main-6`（`#6445D1`） |
+
+### 未选中态
+
+| 属性 | 值 |
+|------|------|
+| 图标 | `icons-标签栏/{栏目名}未选.svg` |
+| 文字颜色 | `--color-black-5`（`#666666`） |
+
+---
+
+## 固定栏目
+
+| 序号 | 栏目名 | 选中图标 | 未选图标 |
+|------|--------|---------|---------|
+| 1 | 首页 | `icons-标签栏/首页选中.svg` | `icons-标签栏/首页未选.svg` |
+| 2 | 任务 | `icons-标签栏/任务选中.svg` | `icons-标签栏/任务未选.svg` |
+| 3 | 营地 | `icons-标签栏/营地选中.svg` | `icons-标签栏/营地未选.svg` |
+| 4 | 我的 | `icons-标签栏/我的选中.svg` | `icons-标签栏/我的未选.svg` |
+
+> **4 个栏目固定，不可增删也不可改名。** 图标位于 [`icons-标签栏/`](../icons-标签栏/) 目录。
+
+---
+
+## 布局结构
+
+```
+┌──────────────────────────────────────────┐
+│  ───  1px 分割线  ───                      │  ← --color-black-2
+├──────────────────────────────────────────┤
+│                                          │
+│   [首页]     [任务]     [营地]     [我的]   │  ← space-between, padding 6px 40px
+│   icon 32    icon 32    icon 32    icon 32 │
+│   文字 14    文字 14    文字 14    文字 14  │  ← gap 6px
+│                                          │
+└──────────────────────────────────────────┘
+```
+
+---
+
+## HTML 示例
+
+### 完整结构（含交互）
+
+```html
+<!-- 底部标签栏：首页默认选中 -->
+<nav class="tabbar">
+  <div class="tabbar-divider"></div>
+  <div class="tabbar-items">
+    <!-- 首页（选中） -->
+    <div class="tab-item tab-item-on" data-tab="home" onclick="switchTabBar('home')">
+      <img src="./icons-标签栏/首页选中.svg" width="32" height="32" alt="首页" />
+      <span class="tab-label">首页</span>
+    </div>
+    <!-- 任务（未选） -->
+    <div class="tab-item tab-item-off" data-tab="task" onclick="switchTabBar('task')">
+      <img src="./icons-标签栏/任务未选.svg" width="32" height="32" alt="任务" />
+      <span class="tab-label">任务</span>
+    </div>
+    <!-- 营地（未选） -->
+    <div class="tab-item tab-item-off" data-tab="camp" onclick="switchTabBar('camp')">
+      <img src="./icons-标签栏/营地未选.svg" width="32" height="32" alt="营地" />
+      <span class="tab-label">营地</span>
+    </div>
+    <!-- 我的（未选） -->
+    <div class="tab-item tab-item-off" data-tab="mine" onclick="switchTabBar('mine')">
+      <img src="./icons-标签栏/我的未选.svg" width="32" height="32" alt="我的" />
+      <span class="tab-label">我的</span>
+    </div>
+  </div>
+</nav>
+
+<script>
+var TAB_NAMES = { home: '首页', task: '任务', camp: '营地', mine: '我的' };
+
+function switchTabBar(name) {
+  var items = document.querySelectorAll('.tab-item');
+  items.forEach(function(item) {
+    var tab = item.getAttribute('data-tab');
+    var img = item.querySelector('img');
+    var label = item.querySelector('.tab-label');
+    if (tab === name) {
+      item.className = 'tab-item tab-item-on';
+      img.src = './icons-标签栏/' + TAB_NAMES[tab] + '选中.svg';
+      label.style.color = 'var(--color-main-6)';
+    } else {
+      item.className = 'tab-item tab-item-off';
+      img.src = './icons-标签栏/' + TAB_NAMES[tab] + '未选.svg';
+      label.style.color = 'var(--color-black-5)';
+    }
+  });
+}
+</script>
+```
+
+### 交互逻辑
+
+| 事件 | 行为 |
+|------|------|
+| 点击未选中标签 | 该标签 → `tab-item-on`，图标切为「选中.svg」，文字色 `--color-main-6` |
+| 其余标签 | 恢复 `tab-item-off`，图标切为「未选.svg」，文字色 `--color-black-5` |
+| 点击已选中标签 | 无变化（不触发切换） |
+
+> 同时只有 1 个标签处于选中态。切换通过 `class`（`tab-item-on` / `tab-item-off`）控制样式，通过 `img.src` 替换图标，通过内联 `style.color` 覆盖文字颜色。
+
+---
+
+## CSS
+
+```css
+/* 容器 */
+.tabbar {
+  width: 100%;
+  height: 71px;
+  display: flex;
+  flex-direction: column;
+  background: var(--color-grey-1);
+}
+
+/* 顶部 1px 分割线 */
+.tabbar-divider {
+  width: 100%;
+  height: 1px;
+  background: var(--color-black-2);
+}
+
+/* 标签行 */
+.tabbar-items {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 6px 40px;
+  flex: 1;
+}
+
+/* 标签项 */
+.tab-item {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 6px;
+}
+
+/* 图标 */
+.tab-item img {
+  width: 32px;
+  height: 32px;
+}
+
+/* 文字 */
+.tab-label {
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+  font-family: PingFang SC;
+}
+
+/* 选中态 */
+.tab-item-on .tab-label {
+  color: var(--color-main-6);
+}
+
+/* 未选中态 */
+.tab-item-off .tab-label {
+  color: var(--color-black-5);
+}
+```
+
+---
+
+## 颜色 Token
+
+| Token | 色值 | 使用场景 |
+|-------|------|---------|
+| `--color-grey-1` | `#FFFFFF` | 容器背景 |
+| `--color-black-2` | `#DDDDDD` | 顶部分割线 |
+| `--color-main-6` | `#6445D1` | 选中态文字颜色 |
+| `--color-black-5` | `#666666` | 未选中态文字颜色 |
+
+---
+
+## 使用规则（AI 必读）
+
+1. **栏目固定不可变**：仅 4 个栏目（首页/任务/营地/我的），不可增删或改名
+2. **图标固定**：每个栏目有两套图标（选中/未选），位于 `icons-标签栏/` 目录，强制使用
+3. **选中态**：文字色 `--color-main-6`（品牌紫），图标用「选中」版本
+4. **未选中态**：文字色 `--color-black-5`（灰色），图标用「未选」版本
+5. **同时仅一项选中**：4 个标签中同一时间只有 1 个处于选中态。点击未选中的标签 → 该标签切换为选中态，其余全部恢复未选态
+6. **布局固定**：容器 480×71px，`space-between` 均分，padding `6px 40px`
+7. **分割线固定**：顶部 1px，颜色 `--color-black-2`，与 `icons-标签栏/` 内线条资源保持一致
+8. **底部吸底**：标签栏固定在页面底部，不作为滚动内容的一部分

package/spec-data/tab.md

@@ -0,0 +1,349 @@
+---
+id: tab
+name: 标签页
+category: "导航/Navigation"
+version: "1.0.0"
+source: PDAKit-基础组件
+source_url: https://mastergo.ky-tech.com.cn/goto/TXnzdYq3
+source_doc_id: 103417331857122
+component_count: 4
+---
+
+# 标签页 Tab
+
+PDAKit 标签页体系：**圆角标签 2 态 / 小标签 7 色系 / TAB 按钮 2 尺寸**，用于分类切换、状态标记及按钮组合。
+
+> **状态命名**：圆角标签 `default`（默认）/ `selected`（已选）；TAB 按钮 `on`（选中）/ `off`（未选中）；小标签枚举变体。
+> **颜色规则**：全部使用 Token（`--color-{色系}-{色阶}`），禁止 Hex。Token 定义见文末 [附录 A](#附录-a颜色-token)。
+
+---
+
+## 组件总览
+
+| 组件 | Key | 变体数 |
+|------|-----|--------|
+| 圆角标签 | `029-圆角标签` | 2 态 |
+| 小标签 | `064-小标签` | 7 色系 |
+| 标签资源/按钮组件 | `034-标签资源-按钮组件` | 2 态 (on/off) |
+| 标签资源/小按钮组件 | `030-标签资源-小按钮组件` | 2 态 (on/off) |
+
+---
+
+## 1. 圆角标签
+
+**描述**: 最底层标签选择，用于一级分类切换。胶囊型（`border-radius: 45px`）。
+
+### Props
+
+| Prop | 类型 | 值 |
+|------|------|-----|
+| 文本 | string | 任意（默认 `请输入`） |
+| 类型 | enum | `默认` / `已选` |
+
+### 规格
+
+| 属性 | 值 |
+|------|------|
+| 最小宽度 | `36px` |
+| 内边距 | t/b `3px`, l/r `16px` |
+| 圆角 | `45px`（胶囊型） |
+| 字体 | `22px / 30px`，PingFang SC Regular |
+
+### 颜色
+
+| state | bg | text | border |
+|-------|-----|------|--------|
+| default | `--color-grey-1` | `--color-black-6` | `1px --color-black-2` |
+| selected | `--color-main-1` | `--color-main-6` | `1px --color-main-6` |
+
+### CSS 示例
+
+```css
+/* 圆角标签 默认 */
+.tab-rounded {
+  min-width: 36px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 3px 16px;
+  background: var(--color-grey-1);
+  border: 1px solid var(--color-black-2);
+  border-radius: 45px;
+  color: var(--color-black-6);
+  font-size: 22px;
+  line-height: 30px;
+  font-family: PingFang SC;
+  overflow: hidden;
+}
+/* 已选 */
+.tab-rounded-selected {
+  background: var(--color-main-1);
+  border-color: var(--color-main-6);
+  color: var(--color-main-6);
+}
+```
+
+---
+
+## 2. 小标签
+
+**描述**: 状态标签，7 种色系覆盖全业务场景。高度固定 28px，可带图标。
+
+### Props
+
+| Prop | 类型 | 值 |
+|------|------|-----|
+| 属性 1 | enum | `默认通用` / `默认带图标` / `失败出错` / `完成成功` / `突出警示` / `正常状态` / `主题紫色` |
+
+### 规格
+
+| 属性 | 值 |
+|------|------|
+| 高度 | `28px` |
+| 内边距 | t/b `4px`, l/r `8px` |
+| 圆角 | `--radius-4` |
+| 字体 | `14px / 20px`，PingFang SC Semibold |
+| 图标尺寸 | `16×16`（仅默认带图标） |
+| 图标间距 | `--spacing-4` |
+| 边框 | `1px solid` |
+
+### 颜色矩阵
+
+| 变体 | bg | border | text | Token |
+|------|-----|--------|------|-------|
+| 默认通用 | `#f3f4f6` | `#e0e4f0` | `#52567b` | grey-2/3/6 |
+| 默认带图标 | `#f3f4f6` | `#e0e4f0` | `#52567b` | grey-2/3/6 |
+| 失败出错 | `#ffece8` | `#fdb2ac` | `#cf3337` | red-1/3/7 |
+| 完成成功 | `#e9fff0` | `#82e6a8` | `#01a356` | green-1/3/7 |
+| 突出警示 | `#fffae7` | `#fede8b` | `#d07a01` | yellow-1/3/7 |
+| 正常状态 | `#e7f3ff` | `#9fc8fd` | `#3376fa` | blue-1/3/6 |
+| 主题紫色 | `#f1e7ff` | `#b9a0ed` | `#6445d1` | main-1/3/6 |
+
+### CSS 示例
+
+```css
+/* 小标签 默认通用 */
+.tag-default {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 4px 8px;
+  height: 28px;
+  background: var(--color-grey-2);
+  border: 1px solid var(--color-grey-3);
+  border-radius: var(--radius-4);
+  color: var(--color-grey-6);
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+  font-family: PingFang SC;
+  overflow: hidden;
+}
+
+/* 失败出错 */
+.tag-error  { background: var(--color-red-1);    border-color: var(--color-red-3);    color: var(--color-red-7);    }
+/* 完成成功 */
+.tag-success{ background: var(--color-green-1);  border-color: var(--color-green-3);  color: var(--color-green-7);  }
+/* 突出警示 */
+.tag-warning{ background: var(--color-yellow-1); border-color: var(--color-yellow-3); color: var(--color-yellow-7); }
+/* 正常状态 */
+.tag-info   { background: var(--color-blue-1);   border-color: var(--color-blue-3);   color: var(--color-blue-6);   }
+/* 主题紫色 */
+.tag-purple { background: var(--color-main-1);   border-color: var(--color-main-3);   color: var(--color-main-6);   }
+
+/* 带图标 */
+.tag-default-icon {
+  gap: var(--spacing-4);
+}
+.tag-default-icon svg {
+  width: 16px;
+  height: 16px;
+  color: var(--color-grey-6);
+}
+```
+
+---
+
+## 3. 标签资源/按钮组件（TAB 按钮）
+
+**描述**: 用于按钮组合（TAB 切换）中的子标签块。白底凸块式。
+
+### Props
+
+| Prop | 类型 | 值 |
+|------|------|-----|
+| 标签名 | string | 任意（默认 `TAB`） |
+| 选中 | enum | `on` / `off` |
+| 可关闭 | boolean | — |
+| 显示数量 | boolean | — |
+| 显示单位 | boolean | — |
+| 数量 | string | `"1"` |
+| 数量红色 | boolean | — |
+| 单位 | string | `"票"` |
+
+### 规格
+
+| 属性 | 值 |
+|------|------|
+| 最小宽度 | `68px` |
+| 内边距 | t/b `12px`, l/r `16px` |
+| 圆角 | `10px` |
+| 字体 | `18px / 25px`，PingFang SC（on=Semibold, off=Regular） |
+
+### 颜色
+
+| state | bg | text |
+|-------|-----|------|
+| on | `--color-grey-1` | `--color-black-6` |
+| off | `--color-grey-2` | `--color-black-5` |
+
+### CSS 示例
+
+```css
+/* TAB 按钮 on */
+.tab-btn-on {
+  min-width: 68px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 2px;
+  padding: 12px 16px;
+  background: var(--color-grey-1);
+  border-radius: 10px;
+  color: var(--color-black-6);
+  font-size: 18px;
+  line-height: 25px;
+  font-weight: 600;
+  font-family: PingFang SC;
+}
+/* TAB 按钮 off */
+.tab-btn-off {
+  min-width: 68px;
+  padding: 12px 16px;
+  background: var(--color-grey-2);
+  border-radius: 10px;
+  color: var(--color-black-5);
+  font-size: 18px;
+  line-height: 25px;
+  font-weight: 400;
+  font-family: PingFang SC;
+}
+```
+
+---
+
+## 4. 标签资源/小按钮组件（小号 TAB 按钮）
+
+**描述**: 紧凑型 TAB 切换按钮，固定宽度 58px。
+
+### Props
+
+| Prop | 类型 | 值 |
+|------|------|-----|
+| 文本 | string | 任意（默认 `请输入`） |
+| 选中 | enum | `on` / `off` |
+
+### 规格
+
+| 属性 | 值 |
+|------|------|
+| 尺寸 | `58×33` |
+| 内边距 | t/b `4px`, l/r `2px` |
+| 圆角 | `--radius-4` |
+| 字体 | `18px / 25px`，PingFang SC（on=Semibold, off=Regular） |
+
+### 颜色
+
+| state | bg | text |
+|-------|-----|------|
+| on | `--color-main-6` | `--color-grey-1` |
+| off | `--color-grey-2` | `--color-black-5` |
+
+### CSS 示例
+
+```css
+/* 小号 TAB 按钮 on */
+.tab-sm-on {
+  width: 58px;
+  height: 33px;
+  min-width: 58px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 2px;
+  padding: 4px 2px;
+  background: var(--color-main-6);
+  border-radius: var(--radius-4);
+  color: var(--color-grey-1);
+  font-size: 18px;
+  line-height: 25px;
+  font-weight: 600;
+  font-family: PingFang SC;
+}
+/* off */
+.tab-sm-off {
+  background: var(--color-grey-2);
+  color: var(--color-black-5);
+  font-weight: 400;
+}
+```
+
+---
+
+## 附录 A：颜色 Token
+
+| Token | 色值 | 使用场景 |
+|-------|------|---------|
+| `--color-grey-1` | `#ffffff` | 圆角标签默认背景；TAB 按钮 on 背景 |
+| `--color-grey-2` | `#f3f4f6` | 默认通用/带图标标签背景；TAB 按钮 off 背景 |
+| `--color-grey-3` | `#e0e4f0` | 默认通用/带图标标签边框 |
+| `--color-grey-6` | `#52567b` | 默认通用/带图标标签文字 |
+| `--color-black-2` | `#dddddd` | 圆角标签默认边框 |
+| `--color-black-5` | `#666666` | TAB 按钮 off 文字 |
+| `--color-black-6` | `#333333` | 圆角标签默认文字；TAB 按钮 on 文字 |
+| `--color-main-1` | `#f1e7ff` | 圆角标签 selected 背景；主题紫色标签背景 |
+| `--color-main-3` | `#b9a0ed` | 主题紫色标签边框 |
+| `--color-main-6` | `#6445d1` | 圆角标签 selected 文字/边框；主题紫色标签文字；小按钮 on 背景 |
+| `--color-red-1` | `#ffece8` | 失败出错标签背景 |
+| `--color-red-3` | `#fdb2ac` | 失败出错标签边框 |
+| `--color-red-7` | `#cf3337` | 失败出错标签文字 |
+| `--color-green-1` | `#e9fff0` | 完成成功标签背景 |
+| `--color-green-3` | `#82e6a8` | 完成成功标签边框 |
+| `--color-green-7` | `#01a356` | 完成成功标签文字 |
+| `--color-yellow-1` | `#fffae7` | 突出警示标签背景 |
+| `--color-yellow-3` | `#fede8b` | 突出警示标签边框 |
+| `--color-yellow-7` | `#d07a01` | 突出警示标签文字 |
+| `--color-blue-1` | `#e7f3ff` | 正常状态标签背景 |
+| `--color-blue-3` | `#9fc8fd` | 正常状态标签边框 |
+| `--color-blue-6` | `#3376fa` | 正常状态标签文字 |
+
+> 详见 [tokens/colors.md](../tokens/colors.md)。小标签 Color Token 共 6 色系 × 3 色阶 = 18 组（含跨色系复用）。
+
+---
+
+## 附录 B：字体 Token
+
+| Token | 字号 | 行高 | 字重 | 适用组件 |
+|-------|------|------|------|---------|
+| `text/22/30` | 22px | 30px | Regular | 圆角标签 |
+| 18/25 | 18px | 25px | Semibold/Regular | TAB 按钮 / 小按钮 |
+| 14/20/Semibold | 14px | 20px | Semibold | 小标签 |
+
+> 字体统一 PingFang SC。详见 [tokens/typography.md](../tokens/typography.md)
+
+---
+
+## 使用规则（AI 必读）
+
+1. **颜色用 Token**：禁止裸 Hex，全部用 `--color-*` 引用
+2. **标签选型**：
+   | 场景 | 组件 |
+   |------|------|
+   | 一级分类切换 | 圆角标签 |
+   | 状态标记（成功/失败/警示等） | 小标签 |
+   | 按钮组合内 TAB 块 | 标签资源/按钮组件 |
+   | 紧凑型 TAB 切换 | 标签资源/小按钮组件 |
+3. **圆角标签**：必须覆盖 `default` / `selected` 两态
+4. **TAB 按钮**：必须覆盖 `on` / `off` 两态
+5. **小标签色系**：按语义选择 — 失败→红、成功→绿、警示→黄、信息→蓝、品牌→紫
+6. **引用命名**：使用 `❖PDAKit™：圆角标签` 格式