@scemoon/cdh 1.0.8 → 1.0.9-beta.2

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

@@ -0,0 +1,354 @@
+# MYA UI 规范 — 支付宝小程序
+
+支付宝小程序 UI 规范，基于 Ant Design Mini 组件库。
+
+## 技术栈
+
+| 类别 | 选项 | 说明 |
+|------|------|------|
+| 框架 | 支付宝原生 / uni-app | 推荐 uni-app (跨端) |
+| UI 组件库 | Ant Design Mini | 默认 per skill.yaml |
+| 语言 | TypeScript | 必选 |
+| 样式 | CSS / Sass | - |
+| 状态管理 | mobx-miniprogram | 推荐 |
+
+## Ant Design Mini 组件规范
+
+### 安装
+
+```bash
+npm i ant-design-mini -S --production
+```
+
+### app.json 配置
+
+```json
+{
+  "usingComponents": {
+    "ant-button": "ant-design-mini/es/Button/index",
+    "ant-cell": "ant-design-mini/es/Cell/index",
+    "ant-field": "ant-design-mini/es/Field/index",
+    "ant-icon": "ant-design-mini/es/Icon/index",
+    "ant-toast": "ant-design-mini/es/Toast/index",
+    "ant-modal": "ant-design-mini/es/Modal/index",
+    "ant-picker": "ant-design-mini/es/Picker/index",
+    "ant-popup": "ant-design-mini/es/Popup/index"
+  }
+}
+```
+
+## 颜色规范
+
+### Ant Design Mini 主题色
+
+```css
+/* app.acss */
+page {
+  --color-primary: #1677ff;
+  --color-success: #00b578;
+  --color-warning: #ff8f1a;
+  --color-error: #ff3141;
+  --color-disabled: #bfbfb5;
+  --color-text-base: #323232;
+  --color-text-secondary: #b2b2b2;
+  --color-text-disabled: #bfbfbf;
+  --color-text-placeholder: #b2b2b2;
+  --color-border-base: #d9d9d9;
+  --color-border-light: #e5e5e5;
+  --color-border-outline: #b2b2b2;
+  --color-fill-base: #f5f5f5;
+  --color-fill-secondary: #fafafa;
+  --color-bg-color: #ffffff;
+  --radius-sm: 4rpx;
+  --radius-md: 8rpx;
+  --radius-lg: 16rpx;
+  --radius-full: 999rpx;
+}
+```
+
+## 字体规范
+
+| 用途 | 字号 | 行高 |
+|------|------|------|
+| 标题 (H1) | 40rpx | 56rpx |
+| 标题 (H2) | 36rpx | 52rpx |
+| 标题 (H3) | 32rpx | 48rpx |
+| 正文 | 30rpx | 44rpx |
+| 小字 | 26rpx | 36rpx |
+| 辅助文字 | 24rpx | 32rpx |
+
+```css
+/* 字体变量 */
+page {
+  --font-size-xs: 24rpx;
+  --font-size-sm: 26rpx;
+  --font-size-base: 30rpx;
+  --font-size-lg: 32rpx;
+  --font-size-xl: 36rpx;
+  --font-size-xxl: 40rpx;
+}
+```
+
+## 间距规范
+
+| 名称 | 值 | 用途 |
+|------|-----|------|
+| xs | 8rpx | 紧凑间距 |
+| sm | 16rpx | 小间距 |
+| md | 24rpx | 中间距 |
+| lg | 32rpx | 大间距 |
+| xl | 48rpx | 较大间距 |
+
+## 常用组件使用规范
+
+### Button
+
+```xml
+<button type="primary" size="lg" block>
+  主要按钮
+</button>
+
+<button type="default" size="md" loading="{{loading}}">
+  默认按钮
+</button>
+
+<button type="warning" size="sm" disabled>
+  禁用
+</button>
+```
+
+| type | 用途 |
+|------|------|
+| primary | 主操作 (蓝色 #1677ff) |
+| default | 次操作 (白色) |
+| success | 成功操作 (绿色) |
+| warning | 警告操作 (橙色) |
+| danger | 危险操作 (红色) |
+
+### Cell 单元格
+
+```xml
+<cell-group>
+  <cell title="单元格" value="内容" isLink="{{true}}" onClick="onCellClick" />
+  <cell title="单元格" brief="描述信息" border="{{false}}" />
+</cell-group>
+```
+
+### Field 输入框
+
+```xml
+<field
+  value="{{value}}"
+  label="标签"
+  placeholder="请输入"
+  state="{{ state }}"
+  onChange="onChange"
+  onBlur="onBlur"
+/>
+```
+
+### 页面结构
+
+```xml
+<!-- 标准页面结构 -->
+<view class="page">
+  <!-- 标题栏 -->
+  <nav-bar title="标题" onLeftTap="onBack" />
+
+  <!-- 内容区 -->
+  <scroll-view class="page-content" scroll-y>
+    <!-- 页面内容 -->
+  </scroll-view>
+
+  <!-- 底部操作栏 -->
+  <view class="page-footer">
+    <button type="primary" block>确认</button>
+  </view>
+</view>
+```
+
+```css
+/* page.acss */
+.page {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-bg-color);
+}
+
+.page-content {
+  flex: 1;
+  padding: 32rpx;
+}
+
+.page-footer {
+  padding: 24rpx 32rpx;
+  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
+  background-color: #fff;
+}
+```
+
+## 分包加载规范
+
+### app.json 配置
+
+```json
+{
+  "subPackages": [
+    {
+      "root": "pages/order",
+      "pages": [
+        { "path": "list/index", "name": "order-list" },
+        { "path": "detail/index", "name": "order-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) => {
+    my.request({
+      url: BASE_URL + options.url,
+      method: options.method || 'GET',
+      data: options.data,
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': my.getStorageSync({ key: 'token' }),
+        ...options.header,
+      },
+      success: (res) => {
+        if (res.status === 200) {
+          resolve(res.data);
+        } else {
+          reject(res);
+        }
+      },
+      fail: reject,
+    });
+  });
+};
+```
+
+## 登录流程
+
+```typescript
+// login.ts
+const login = async () => {
+  // 1. 获取 authcode
+  const { authCode } = await new Promise((resolve) => {
+    my.getAuthCode({
+      scopes: ['auth_user'],
+      success: (res) => resolve(res),
+    });
+  });
+
+  // 2. 发送到服务器换取 token
+  const res = await request({
+    url: '/auth/login',
+    method: 'POST',
+    data: { authCode },
+  });
+
+  // 3. 存储 token
+  my.setStorageSync({ key: 'token', data: 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-xs` | 极小间距 |
+| `.gap-sm` | 小间距 |
+| `.gap-md` | 中间距 |
+| `.text-center` | 居中文字 |
+| `.text-primary` | 主要文字 |
+| `.text-secondary` | 次要文字 |
+| `.text-ellipsis` | 单行省略 |
+
+## 安全规范
+
+- `user_id` / `open_id` 不得明文暴露在 log 中
+- 用户信息获取必须通过 `my.getUserInfo()` 或 `my.getPhoneNumber()`
+- 支付相关逻辑必须在后端完成签名
+- 敏感数据存储用加密，不存明文 token
+
+## 评审清单
+
+- [ ] 使用 Ant Design Mini 组件库
+- [ ] 主题色通过 CSS 变量覆盖
+- [ ] 字体使用 rpx 单位
+- [ ] 页面结构符合标准布局
+- [ ] 分包加载策略正确 (主包 ≤ 2MB)
+- [ ] API 请求统一封装
+- [ ] 登录流程安全 (使用 authcode)
+- [ ] 状态管理使用 mobx-miniprogram
+- [ ] 所有敏感数据加密存储
+- [ ] 支持暗色模式 (如需要)

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

@@ -0,0 +1,328 @@
+# Native UI 规范 — iOS & Android
+
+React Native 跨平台 UI 规范。
+
+## 技术栈
+
+| 平台 | 框架 | UI 库 | 状态管理 |
+|------|------|-------|----------|
+| iOS | React Native | SwiftUI-style Components | Zustand / Redux Toolkit |
+| Android | React Native | Material Design 3 | Zustand / Redux Toolkit |
+| 跨平台 | - | React Native Paper | - |
+
+## 设计系统
+
+| 平台 | 设计语言 | 设计库 |
+|------|----------|--------|
+| iOS | Human Interface Guidelines (HIG) | SwiftUI / UIKit |
+| Android | Material Design 3 | Material You |
+| React Native | 跨平台统一 | React Native Paper |
+
+## iOS 设计规范
+
+### 安全区域 (Safe Area)
+
+```tsx
+import { SafeAreaView } from 'react-native';
+
+<SafeAreaView className="flex-1 bg-white">
+  {/* 内容 */}
+</SafeAreaView>
+```
+
+| 区域 | 说明 |
+|------|------|
+| Top | status bar, notch, Dynamic Island |
+| Bottom | home indicator |
+
+### 字体 (SF Pro)
+
+| 样式 | 字重 | 字号 | 行高 |
+|------|------|------|------|
+| Large Title | Bold | 34px | 41px |
+| Title 1 | Bold | 28px | 34px |
+| Title 2 | Bold | 22px | 28px |
+| Title 3 | Semibold | 20px | 25px |
+| Headline | Semibold | 17px | 22px |
+| Body | Regular | 17px | 22px |
+| Callout | Regular | 16px | 21px |
+| Subhead | Regular | 15px | 20px |
+| Footnote | Regular | 13px | 18px |
+| Caption 1 | Regular | 12px | 16px |
+| Caption 2 | Regular | 11px | 13px |
+
+### iOS 颜色
+
+```typescript
+const iOSColors = {
+  // 系统色
+  systemBlue: '#007AFF',
+  systemGreen: '#34C759',
+  systemRed: '#FF3B30',
+  systemOrange: '#FF9500',
+  systemYellow: '#FFCC00',
+  systemPink: '#FF2D55',
+  systemPurple: '#AF52DE',
+  systemTeal: '#5AC8FA',
+  systemIndigo: '#5856D6',
+
+  // 背景色
+  systemBackground: '#FFFFFF',
+  secondarySystemBackground: '#F2F2F7',
+  tertiarySystemBackground: '#FFFFFF',
+  systemGroupedBackground: '#F2F2F7',
+
+  // 文字色
+  label: '#000000',
+  secondaryLabel: 'rgba(60, 60, 67, 0.6)',
+  tertiaryLabel: 'rgba(60, 60, 67, 0.3)',
+
+  // 分隔线
+  separator: 'rgba(60, 60, 67, 0.29)',
+};
+```
+
+## Android 设计规范
+
+### Material Design 3
+
+```tsx
+import { MD3LightTheme, MD3DarkTheme } from 'react-native-paper';
+
+const lightTheme = {
+  ...MD3LightTheme,
+  colors: {
+    ...MD3LightTheme.colors,
+    primary: '#0066CC',
+    secondary: '#6B6B6B',
+    error: '#BA1A1A',
+    background: '#FFFBFE',
+    surface: '#FFFBFE',
+  },
+};
+```
+
+### 字体 (Roboto)
+
+| 样式 | 字重 | 字号 | 行高 |
+|------|------|------|------|
+| Display Large | Regular | 57px | 64px |
+| Display Medium | Regular | 45px | 52px |
+| Display Small | Regular | 36px | 44px |
+| Headline Large | Regular | 32px | 40px |
+| Headline Medium | Regular | 28px | 36px |
+| Headline Small | Regular | 24px | 32px |
+| Title Large | Medium | 22px | 28px |
+| Title Medium | Medium | 16px | 24px |
+| Title Small | Medium | 14px | 20px |
+| Body Large | Regular | 16px | 24px |
+| Body Medium | Regular | 14px | 20px |
+| Body Small | Regular | 12px | 16px |
+| Label Large | Medium | 14px | 20px |
+| Label Medium | Medium | 12px | 16px |
+| Label Small | Medium | 11px | 16px |
+
+### Android 颜色
+
+```typescript
+const MaterialColors = {
+  primary: '#0066CC',
+  onPrimary: '#FFFFFF',
+  primaryContainer: '#D3E4FF',
+  onPrimaryContainer: '#001D36',
+
+  secondary: '#6B6B6B',
+  onSecondary: '#FFFFFF',
+  secondaryContainer: '#E5E0EC',
+  onSecondaryContainer: '#1D1B20',
+
+  tertiary: '#785900',
+  onTertiary: '#FFFFFF',
+  tertiaryContainer: '#FFDEA6',
+  onTertiaryContainer: '#261A00',
+
+  error: '#BA1A1A',
+  onError: '#FFFFFF',
+  errorContainer: '#FFDAD6',
+  onErrorContainer: '#410002',
+
+  background: '#FFFBFE',
+  onBackground: '#1C1B1E',
+  surface: '#FFFBFE',
+  onSurface: '#1C1B1E',
+  surfaceVariant: '#E7E0EC',
+  onSurfaceVariant: '#49454E',
+
+  outline: '#79747E',
+  outlineVariant: '#CAC4D0',
+};
+```
+
+## 跨平台组件规范
+
+### 1. Button
+
+```tsx
+interface ButtonProps {
+  variant: 'filled' | 'outlined' | 'text' | 'elevated';
+  size: 'small' | 'medium' | 'large';
+  disabled?: boolean;
+  loading?: boolean;
+  leftIcon?: ReactNode;
+  rightIcon?: ReactNode;
+  onPress: () => void;
+  children: ReactNode;
+}
+```
+
+| 平台 | 样式 | 最小尺寸 |
+|------|------|----------|
+| iOS | 系统风格，圆角 10px | 44x44px |
+| Android | Material 3，圆角 20px (full width rounded) | 48x48px |
+
+### 2. Input
+
+```tsx
+interface InputProps {
+  label: string;
+  placeholder?: string;
+  value: string;
+  onChangeText: (text: string) => void;
+  error?: string;
+  disabled?: boolean;
+  leftIcon?: ReactNode;
+  rightIcon?: ReactNode;
+  secureTextEntry?: boolean;
+}
+```
+
+| 平台 | 样式 |
+|------|------|
+| iOS | SF Pro 风格，下划线或圆角背景 |
+| Android | Material 3 OutlinedBox |
+
+### 3. Card
+
+```tsx
+interface CardProps {
+  variant: 'elevated' | 'outlined' | 'filled';
+  children: ReactNode;
+  onPress?: () => void;
+}
+```
+
+| 平台 | 样式 |
+|------|------|
+| iOS | 白色背景，轻阴影，圆角 12px |
+| Android | Material 3 ElevatedCard |
+
+### 4. Navigation
+
+```tsx
+// Stack Navigator
+<Stack.Navigator>
+  <Stack.Screen name="Home" component={HomeScreen} />
+  <Stack.Screen name="Detail" component={DetailScreen} />
+</Stack.Navigator>
+
+// Tab Navigator
+<Tab.Navigator>
+  <Tab.Screen name="Home" component={HomeScreen} />
+  <Tab.Screen name="Profile" component={ProfileScreen} />
+</Tab.Navigator>
+```
+
+| 平台 | Tab Bar 样式 |
+|------|--------------|
+| iOS | 底部 Tab Bar，SF Symbols 图标 |
+| Android | 底部 Navigation Bar，Material Icons |
+
+## 状态处理
+
+### Loading 状态
+
+```tsx
+// iOS
+<ActivityIndicator size="large" color="#007AFF" />
+
+// Android
+<CircularProgressIndicator />
+
+// 统一 LoadingOverlay
+<LoadingOverlay visible={isLoading} />
+```
+
+### Empty State
+
+```tsx
+<EmptyState
+  icon={<IllustrationNoData />}
+  title="暂无数据"
+  description="稍后再试"
+  action={<Button>刷新</Button>}
+/>
+```
+
+### Error State
+
+```tsx
+<ErrorState
+  icon={<IllustrationError />}
+  title="加载失败"
+  description="请检查网络连接"
+  action={<Button onPress={retry}>重试</Button>}
+/>
+```
+
+## 平台检测
+
+```typescript
+import { Platform, StatusBar } from 'react-native';
+
+// 平台检测
+const isIOS = Platform.OS === 'ios';
+const isAndroid = Platform.OS === 'android';
+
+// 平台特定样式
+const containerStyle = {
+  ...(Platform.OS === 'ios'
+    ? { paddingTop: 50 }
+    : { paddingTop: StatusBar.currentHeight }),
+};
+
+// 平台特定组件
+{Platform.OS === 'ios' ? (
+  <IOSPicker />
+) : (
+  <AndroidPicker />
+)}
+```
+
+## 手势与交互
+
+### iOS
+
+| 手势 | 行为 |
+|------|------|
+| Swipe from left | 返回上一页 |
+| Pull to refresh | 下拉刷新 |
+| Long press | Context menu |
+
+### Android
+
+| 手势 | 行为 |
+|------|------|
+| Swipe from left edge | 返回 |
+| Long press | 选择/Context menu |
+| Double tap | 缩放 |
+
+## 评审清单
+
+- [ ] iOS 使用 SafeAreaView
+- [ ] iOS 使用 SF Pro 字体，Android 使用 Roboto
+- [ ] iOS 使用系统蓝 (#007AFF)，Android 使用 Material 3 primary
+- [ ] 所有点击目标 ≥ 44x44dp
+- [ ] 支持深色模式
+- [ ] 处理键盘遮挡输入框
+- [ ] 支持系统字体缩放
+- [ ] 处理网络状态变化