@scemoon/cdh 1.0.9 → 1.0.10-beta.1

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

@@ -1,354 +0,0 @@
-# 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

@@ -1,328 +0,0 @@
-# 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
-- [ ] 支持深色模式
-- [ ] 处理键盘遮挡输入框
-- [ ] 支持系统字体缩放
-- [ ] 处理网络状态变化