@scemoon/cdh 1.0.8 → 1.0.9-beta.2

package/ai-dlc-skill/phases/plan/design_system/platform_ui/wxa.md

@@ -0,0 +1,374 @@
+# WXA UI 规范 — 微信小程序
+
+微信小程序 UI 规范，基于 Vant Weapp 组件库。
+
+## 技术栈
+
+| 类别 | 选项 | 说明 |
+|------|------|------|
+| 框架 | 微信原生 / Taro / uni-app | 推荐 Taro (跨端) |
+| UI 组件库 | Vant Weapp | 默认 per skill.yaml |
+| 语言 | TypeScript | 必选 |
+| 样式 | CSS / Sass | - |
+| 状态管理 | mobx-miniprogram | 推荐 |
+
+## Vant Weapp 组件规范
+
+### 安装
+
+```bash
+npm i @vant/weapp -S --production
+```
+
+### app.json 配置
+
+```json
+{
+  "usingComponents": {
+    "van-button": "@vant/weapp/button/index",
+    "van-cell": "@vant/weapp/cell/index",
+    "van-cell-group": "@vant/weapp/cell-group/index",
+    "van-field": "@vant/weapp/field/index",
+    "van-icon": "@vant/weapp/icon/index",
+    "van-toast": "@vant/weapp/toast/index",
+    "van-dialog": "@vant/weapp/dialog/index",
+    "van-notify": "@vant/weapp/notify/index",
+    "van-picker": "@vant/weapp/picker/index",
+    "van-popup": "@vant/weapp/popup/index",
+    "van-transition": "@vant/weapp/transition/index"
+  }
+}
+```
+
+## 颜色规范
+
+### Vant Weapp 主题色
+
+```css
+/* app.wxss */
+page {
+  --primary-color: #1989fa;
+  --success-color: #07c160;
+  --danger-color: #ee0a24;
+  --warning-color: #ff976a;
+  --gray-color: #323233;
+  --text-color: #323233;
+  --text-primary: #323233;
+  --text-second: #969799;
+  --text-disabled: #c8c9cc;
+  --background-color: #f7f8fa;
+  --background: #f7f8fa;
+  --border-color: #ebedf0;
+  --border: #ebedf0;
+  --divider-color: #ebedf0;
+  --radius-md: 8rpx;
+  --radius-lg: 16rpx;
+  --radius-squared: 8rpx;
+}
+```
+
+## 字体规范
+
+| 用途 | 字号 | 行高 |
+|------|------|------|
+| 标题 (H1) | 32rpx | 40rpx |
+| 标题 (H2) | 28rpx | 36rpx |
+| 标题 (H3) | 24rpx | 32rpx |
+| 正文 | 28rpx | 40rpx |
+| 小字 | 24rpx | 32rpx |
+| 辅助文字 | 20rpx | 28rpx |
+
+```css
+/* 字体变量 */
+page {
+  --font-size-xs: 20rpx;
+  --font-size-sm: 24rpx;
+  --font-size-base: 28rpx;
+  --font-size-lg: 32rpx;
+  --font-size-xl: 36rpx;
+}
+```
+
+## 间距规范
+
+| 名称 | 值 | 用途 |
+|------|-----|------|
+| xs | 8rpx | 紧凑间距 |
+| sm | 16rpx | 小间距 |
+| md | 24rpx | 中间距 |
+| lg | 32rpx | 大间距 |
+| xl | 48rpx | 较大间距 |
+
+## 常用组件使用规范
+
+### Button
+
+```xml
+<van-button type="primary" size="large" block>
+  主要按钮
+</van-button>
+
+<van-button type="default" size="normal" loading="{{loading}}">
+  默认按钮
+</van-button>
+
+<van-button type="warning" size="small" disabled>
+  禁用
+</van-button>
+```
+
+| type | 用途 |
+|------|------|
+| primary | 主操作 (蓝色) |
+| default | 次操作 |
+| warning | 警告操作 (橙色) |
+| danger | 危险操作 (红色) |
+| info | 信息 (灰色) |
+
+### Cell 单元格
+
+```xml
+<van-cell-group>
+  <van-cell title="单元格" value="内容" is-link url="/pages/detail/index" />
+  <van-cell title="单元格" label="描述信息" border="{{false}}" />
+</van-cell-group>
+```
+
+### Field 输入框
+
+```xml
+<van-field
+  value="{{ value }}"
+  label="标签"
+  placeholder="请输入"
+  error="{{ error }}"
+  disabled="{{ disabled }}"
+  bind:change="onChange"
+  bind:blur="onBlur"
+/>
+```
+
+### 页面结构
+
+```xml
+<!-- 标准页面结构 -->
+<view class="page">
+  <!-- 标题栏 -->
+  <van-nav-bar title="标题" left-arrow bind:click-left="onBack" />
+
+  <!-- 内容区 -->
+  <view class="page-content">
+    <!-- 页面内容 -->
+  </view>
+
+  <!-- 底部操作栏 -->
+  <view class="page-footer">
+    <van-button type="primary" block>确认</van-button>
+  </view>
+</view>
+```
+
+```css
+/* page.wxss */
+.page {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--background-color);
+}
+
+.page-content {
+  flex: 1;
+  padding: 32rpx;
+}
+
+.page-footer {
+  padding: 24rpx 32rpx;
+  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
+  background-color: #fff;
+  box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.05);
+}
+```
+
+## 分包加载规范
+
+### 主包结构
+
+```
+pages/
+├── index/           # 首页
+├── user/            # 用户中心
+└── ...              # 其他核心页面
+```
+
+### 分包结构
+
+```
+subpackages/
+├── goods/           # 商品模块
+│   ├── list/        # 商品列表
+│   └── detail/      # 商品详情
+├── order/           # 订单模块
+│   ├── list/        # 订单列表
+│   └── detail/      # 订单详情
+└── ...
+```
+
+### app.json 配置
+
+```json
+{
+  "subpackages": [
+    {
+      "root": "subpackages/goods",
+      "pages": [
+        { "path": "list/index", "name": "goods-list" },
+        { "path": "detail/index", "name": "goods-detail" }
+      ]
+    }
+  ]
+}
+```
+
+## API 请求规范
+
+```typescript
+// request.ts
+interface RequestOptions {
+  url: string;
+  method?: 'GET' | 'POST' | 'PUT' | 'DELETE';
+  data?: any;
+  header?: object;
+}
+
+const BASE_URL = 'https://api.example.com';
+
+const request = (options: RequestOptions) => {
+  return new Promise((resolve, reject) => {
+    wx.request({
+      url: BASE_URL + options.url,
+      method: options.method || 'GET',
+      data: options.data,
+      header: {
+        'Content-Type': 'application/json',
+        'Authorization': wx.getStorageSync('token'),
+        ...options.header,
+      },
+      success: (res) => {
+        if (res.statusCode === 200) {
+          resolve(res.data);
+        } else {
+          reject(res);
+        }
+      },
+      fail: reject,
+    });
+  });
+};
+```
+
+## 登录流程
+
+```typescript
+// login.ts
+const login = async () => {
+  // 1. 获取 code
+  const { code } = await wx.login();
+
+  // 2. 发送到服务器换取 token
+  const res = await request({
+    url: '/auth/login',
+    method: 'POST',
+    data: { code },
+  });
+
+  // 3. 存储 token
+  wx.setStorageSync('token', res.token);
+
+  return res;
+};
+```
+
+## 状态管理
+
+```typescript
+// store/user.ts
+import { observable } from 'mobx-miniprogram';
+
+export const userStore = observable({
+  // 状态
+  userInfo: null as UserInfo | null,
+  token: '',
+
+  // 计算属性
+  get isLoggedIn() {
+    return !!this.token;
+  },
+
+  // Actions
+  setUserInfo(userInfo: UserInfo) {
+    this.userInfo = userInfo;
+  },
+
+  setToken(token: string) {
+    this.token = token;
+  },
+});
+```
+
+## 样式规范
+
+### BEM 命名
+
+```css
+/* Block */
+.goods-card {
+  /* Element */
+}
+
+.goods-card__image {
+  /* Modifier */
+}
+
+.goods-card__image--large {
+}
+```
+
+### 常用类名
+
+| 类名 | 用途 |
+|------|------|
+| `.container` | 页面容器 |
+| `.flex` | flex 布局 |
+| `.flex-row` | 水平排列 |
+| `.flex-col` | 垂直排列 |
+| `.flex-center` | 居中 |
+| `.flex-between` | 两端对齐 |
+| `.gap-sm` | 小间距 |
+| `.gap-md` | 中间距 |
+| `.text-center` | 居中文字 |
+| `.text-primary` | 主要文字 |
+| `.text-secondary` | 次要文字 |
+| `.text-ellipsis` | 单行省略 |
+| `.text-ellipsis-2` | 两行省略 |
+
+## 安全规范
+
+- `openid` / `unionid` 不得明文暴露在 log 中
+- 用户信息获取必须通过 `wx.getUserProfile()`
+- 支付相关逻辑必须在后端完成签名
+- 敏感数据存储用加密，不存明文 token
+- 域名必须在微信公众平台配置
+
+## 评审清单
+
+- [ ] 使用 Vant Weapp 组件库
+- [ ] 主题色通过 CSS 变量覆盖
+- [ ] 字体使用 rpx 单位
+- [ ] 页面结构符合标准布局
+- [ ] 分包加载策略正确 (主包 ≤ 2MB)
+- [ ] API 请求统一封装
+- [ ] 登录流程安全
+- [ ] 状态管理使用 mobx-miniprogram
+- [ ] 所有敏感数据加密存储
+- [ ] 支持暗色模式 (如需要)

package/ai-dlc-skill/phases/plan/design_system/theme_system.md

@@ -0,0 +1,318 @@
+# Theme System — 主题系统
+
+支持浅色/暗色模式切换，通过 CSS 变量实现，无需改变组件代码。
+
+## 主题架构
+
+```
+ThemeProvider
+  └── CSS Variables (in :root)
+        ├── Light Theme (data-theme="light" or default)
+        └── Dark Theme (data-theme="dark")
+```
+
+## CSS 变量定义
+
+### 浅色主题 (Light)
+
+```css
+:root,
+[data-theme="light"] {
+  /* 背景色 */
+  --color-bg-primary: #FFFFFF;
+  --color-bg-secondary: #F8FAFC;
+  --color-bg-tertiary: #F1F5F9;
+  --color-bg-inverse: #0F172A;
+
+  /* 文字色 */
+  --color-text-primary: #0F172A;
+  --color-text-secondary: #475569;
+  --color-text-tertiary: #94A3B8;
+  --color-text-inverse: #FFFFFF;
+  --color-text-disabled: #CBD5E1;
+
+  /* 边框色 */
+  --color-border-default: #E2E8F0;
+  --color-border-strong: #94A3B8;
+  --color-border-focus: #3B82F6;
+
+  /* 功能色 */
+  --color-primary: #3B82F6;
+  --color-primary-hover: #2563EB;
+  --color-success: #10B981;
+  --color-danger: #EF4444;
+  --color-warning: #F59E0B;
+  --color-info: #06B6D4;
+
+  /* 阴影 (浅色主题更深) */
+  --shadow-sm: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
+  --shadow-md: 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);
+  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
+
+  /* 遮罩 */
+  --color-overlay: rgba(15, 23, 42, 0.5);
+}
+```
+
+### 暗色主题 (Dark)
+
+```css
+[data-theme="dark"] {
+  /* 背景色 */
+  --color-bg-primary: #0F172A;
+  --color-bg-secondary: #1E293B;
+  --color-bg-tertiary: #334155;
+  --color-bg-inverse: #FFFFFF;
+
+  /* 文字色 */
+  --color-text-primary: #F8FAFC;
+  --color-text-secondary: #94A3B8;
+  --color-text-tertiary: #64748B;
+  --color-text-inverse: #0F172A;
+  --color-text-disabled: #475569;
+
+  /* 边框色 */
+  --color-border-default: #334155;
+  --color-border-strong: #64748B;
+  --color-border-focus: #60A5FA;
+
+  /* 功能色 (暗色主题稍亮) */
+  --color-primary: #60A5FA;
+  --color-primary-hover: #3B82F6;
+  --color-success: #34D399;
+  --color-danger: #F87171;
+  --color-warning: #FBBF24;
+  --color-info: #22D3EE;
+
+  /* 阴影 (暗色主题更浅) */
+  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
+  --shadow-md: 0 4px 6px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.2);
+  --shadow-lg: 0 10px 15px rgba(0,0,0,0.3), 0 4px 6px rgba(0,0,0,0.2);
+
+  /* 遮罩 */
+  --color-overlay: rgba(0, 0, 0, 0.7);
+}
+```
+
+## 主题切换机制
+
+### 1. 系统偏好 (默认)
+
+```css
+/* 自动跟随系统 */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    /* 暗色变量 */
+  }
+}
+```
+
+### 2. 手动切换
+
+```typescript
+// 切换主题
+const toggleTheme = () => {
+  const current = document.documentElement.dataset.theme;
+  const next = current === 'dark' ? 'light' : 'dark';
+  document.documentElement.dataset.theme = next;
+  localStorage.setItem('theme', next);
+};
+
+// 初始化
+const initTheme = () => {
+  const saved = localStorage.getItem('theme');
+  if (saved) {
+    document.documentElement.dataset.theme = saved;
+  }
+};
+```
+
+### 3. 自动切换 (可选)
+
+```typescript
+// 监听系统主题变化
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+  if (!localStorage.getItem('theme')) {
+    document.documentElement.dataset.theme = e.matches ? 'dark' : 'light';
+  }
+});
+```
+
+## 主题配置
+
+### ThemeProvider (React)
+
+```typescript
+interface ThemeProviderProps {
+  defaultTheme?: 'light' | 'dark' | 'system';
+  children: ReactNode;
+}
+
+const ThemeProvider: React.FC<ThemeProviderProps> = ({
+  defaultTheme = 'system',
+  children
+}) => {
+  useEffect(() => {
+    const saved = localStorage.getItem('theme');
+    if (saved) {
+      document.documentElement.dataset.theme = saved;
+    }
+  }, []);
+
+  return <>{children}</>;
+};
+```
+
+### useTheme Hook
+
+```typescript
+const useTheme = () => {
+  const [theme, setTheme] = useState<'light' | 'dark'>(() => {
+    return (document.documentElement.dataset.theme as 'light' | 'dark') || 'light';
+  });
+
+  const toggleTheme = () => {
+    const next = theme === 'dark' ? 'light' : 'dark';
+    setTheme(next);
+    document.documentElement.dataset.theme = next;
+    localStorage.setItem('theme', next);
+  };
+
+  return { theme, setTheme, toggleTheme };
+};
+```
+
+## 组件主题适配
+
+### 正确方式
+
+```tsx
+// ✅ 使用 CSS 变量
+const Button = styled.button`
+  background: var(--color-primary);
+  color: var(--color-text-inverse);
+`;
+
+// ✅ 使用 CSS 变量
+const Card = styled.div`
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-default);
+  box-shadow: var(--shadow-sm);
+`;
+```
+
+### 错误方式
+
+```tsx
+// ❌ 硬编码颜色
+const Button = styled.button`
+  background: #3B82F6;  // 不允许
+`;
+
+// ❌ 硬编码阴影
+const Card = styled.div`
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);  // 不允许
+`;
+```
+
+## 图片与媒体
+
+### 暗色模式图片变体
+
+```css
+/* 使用 CSS filter 简单处理 */
+[data-theme="dark"] img {
+  filter: brightness(0.9) contrast(1.1);
+}
+
+/* 或使用 picture 元素 */
+<picture>
+  <source srcset="/logo-dark.svg" media="(prefers-color-scheme: dark)">
+  <img src="/logo-light.svg" alt="Logo">
+</picture>
+```
+
+## 平台特殊处理
+
+### Web
+
+```css
+/* 自动应用 */
+:root {
+  color-scheme: light dark;
+}
+```
+
+### 小程序
+
+```javascript
+// app.ts
+App({
+  onThemeChange({ theme }) {
+    this.globalData.theme = theme;
+    // 通知所有页面
+  }
+});
+
+// 页面中使用
+Page({
+  data: {
+    isDark: false
+  },
+  onLoad() {
+    const app = getApp<IAppOption>();
+    this.setData({ isDark: app.globalData.theme === 'dark' });
+  }
+});
+```
+
+### Native (React Native)
+
+```typescript
+// 使用 @react-native-community Appearance
+import { Appearance } from 'react-native';
+
+const colorScheme = Appearance.getColorScheme();
+// 'light' | 'dark' | null
+
+// 监听变化
+Appearance.addChangeListener(({ colorScheme }) => {
+  // 更新状态
+});
+```
+
+## 主题切换动画
+
+```css
+/* 主题切换平滑过渡 */
+html {
+  transition:
+    background-color var(--duration-normal) var(--ease-in-out),
+    color var(--duration-normal) var(--ease-in-out);
+}
+
+/* 排除有动画的元素 */
+.no-transition {
+  transition: none !important;
+}
+```
+
+## 主题持久化
+
+```typescript
+// 存储优先级
+1. localStorage.getItem('theme')  // 用户手动选择
+2. prefers-color-scheme            // 系统偏好
+3. 'light'                         // 默认
+```
+
+## 评审清单
+
+- [ ] 所有颜色通过 CSS 变量使用
+- [ ] 暗色主题覆盖完整 (背景/文字/边框/阴影/功能色)
+- [ ] 主题切换无闪烁 (FOUC)
+- [ ] 主题偏好持久化到 localStorage
+- [ ] 组件在两种主题下都符合对比度要求
+- [ ] 支持 prefers-color-scheme 媒体查询
+- [ ] 主题切换有平滑过渡动画 (可选)
+- [ ] 图片在暗色模式下无异常 (如需要)

package/ai-dlc-skill/phases/plan/entry.md

@@ -0,0 +1,33 @@
+---
+name: ai-dlc-plan
+description: "Plan Phase: Design Doc → Task DAG → Test Plan"
+entry_point: phases/plan/entry.md
+triggers:
+  - plan
+  - design
+  - task-list
+---
+
+# Plan Phase (规划)
+
+Convert approved spec into technical design and task decomposition.
+
+## Lifecycle
+
+See `lifecycle.md` for the full phase flow.
+See `rules.md` for enforceable rules (PLN-001 to PLN-004).
+See `prompt.md` for the sub-agent delegation prompt template.
+
+## 当被委派时
+
+0. 先调用 `TodoClear` 清除上阶段遗留的 todos，确保从空白计划开始
+1. 读取 spec-delta 和 feature 文件
+2. 生成设计文档（per-component + integration）→ `{spec_dir}/design.md`
+3. 分解为带 DAG 依赖的任务单元 → `{spec_dir}/task-list.md`
+4. 编写测试计划（每层）
+
+## 产出
+
+- `aidlc/openspec/changes/{id}/design.md`
+- `aidlc/openspec/changes/{id}/task-list.md`
+- `aidlc/openspec/changes/{id}/contract-diff.md`（合约变更时）