@coze-arch/cli 0.0.1-alpha.01c0ee

package/lib/__templates__/expo/client/components/SmartDateInput.tsx

@@ -0,0 +1,238 @@
+import React, { useState, useMemo } from 'react';
+import { 
+  View, 
+  Text, 
+  TouchableOpacity, 
+  StyleSheet, 
+  Keyboard,
+  Platform,
+  useColorScheme,
+  ViewStyle,
+  TextStyle
+} from 'react-native';
+import DateTimePickerModal from 'react-native-modal-datetime-picker';
+import dayjs from 'dayjs';
+import { FontAwesome6 } from '@expo/vector-icons';
+
+// --------------------------------------------------------
+// 1. 配置 Dayjs 
+// --------------------------------------------------------
+// 即使服务端返回 '2023-10-20T10:00:00Z' (UTC)，
+// dayjs(utcString).format() 会自动转为手机当前的本地时区显示。
+// 如果需要传回给后端，我们再转回 ISO 格式。
+
+interface SmartDateInputProps {
+  label?: string;           // 表单标题 (可选)
+  value?: string | null;    // 服务端返回的时间字符串 (ISO 8601, 带 T)
+  onChange: (isoDate: string) => void; // 回调给父组件的值，依然是标准 ISO 字符串
+  placeholder?: string;
+  mode?: 'date' | 'time' | 'datetime'; // 支持日期、时间、或两者
+  displayFormat?: string;   // UI展示的格式，默认 YYYY-MM-DD
+  error?: string;           // 错误信息
+  
+  // 样式自定义（可选）
+  containerStyle?: ViewStyle;        // 外层容器样式
+  inputStyle?: ViewStyle;            // 输入框样式
+  textStyle?: TextStyle;             // 文字样式
+  labelStyle?: TextStyle;            // 标签样式
+  placeholderTextStyle?: TextStyle;  // 占位符文字样式
+  errorTextStyle?: TextStyle;        // 错误信息文字样式
+  iconColor?: string;                // 图标颜色
+  iconSize?: number;                 // 图标大小
+}
+
+export const SmartDateInput = ({ 
+  label, 
+  value, 
+  onChange, 
+  placeholder = '请选择',
+  mode = 'date',
+  displayFormat,
+  error,
+  containerStyle,
+  inputStyle,
+  textStyle,
+  labelStyle,
+  placeholderTextStyle,
+  errorTextStyle,
+  iconColor,
+  iconSize = 18
+}: SmartDateInputProps) => {
+  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
+  const colorScheme = useColorScheme();
+  const isDark = colorScheme === 'dark';
+
+  // 默认展示格式
+  const format = displayFormat || (mode === 'time' ? 'HH:mm' : 'YYYY-MM-DD');
+
+  // --------------------------------------------------------
+  // 2. 核心：数据转换逻辑 
+  // --------------------------------------------------------
+  
+  // 解析服务端值，确保无效值不传给控件；time 模式兼容仅时间字符串
+  const parsedValue = useMemo(() => {
+    if (!value) return null;
+
+    const direct = dayjs(value);
+    if (direct.isValid()) return direct;
+
+    if (mode === 'time') {
+      const timeOnly = dayjs(`1970-01-01T${value}`);
+      if (timeOnly.isValid()) return timeOnly;
+    }
+
+    return null;
+  }, [value, mode]);
+
+  // A. 将字符串转为 JS Date 对象给控件使用
+  // 如果 value 是空或无效，回退到当前时间
+  const dateObjectForPicker = useMemo(() => {
+    return parsedValue ? parsedValue.toDate() : new Date();
+  }, [parsedValue]);
+
+  // B. 将 Date 对象转为展示字符串
+  const displayString = useMemo(() => {
+    if (!parsedValue) return '';
+    return parsedValue.format(format);
+  }, [parsedValue, format]);
+
+  // --------------------------------------------------------
+  // 3. 核心：交互逻辑 (解决键盘遮挡/无法收起)
+  // --------------------------------------------------------
+
+  const showDatePicker = () => {
+    // 【关键点】打开日期控件前，必须强制收起键盘！
+    // 否则键盘会遮挡 iOS 的底部滚轮，或者导致 Android 焦点混乱
+    Keyboard.dismiss(); 
+    setDatePickerVisibility(true);
+  };
+
+  const hideDatePicker = () => {
+    setDatePickerVisibility(false);
+  };
+
+  const handleConfirm = (date: Date) => {
+    hideDatePicker();
+    // 采用带本地偏移的 ISO 字符串，避免 date 模式在非 UTC 时区出现跨天
+    const serverString = dayjs(date).format(format);
+    onChange(serverString);
+  };
+
+  // 根据 mode 选择图标
+  const iconName = mode === 'time' ? 'clock' : 'calendar';
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      {/* 标题 */}
+      {label && <Text style={[styles.label, labelStyle]}>{label}</Text>}
+
+      {/* 
+         这里用 TouchableOpacity 模拟 Input。
+         模拟组件永远不会唤起键盘。
+      */}
+      <TouchableOpacity 
+        style={[
+          styles.inputBox, 
+          error ? styles.inputBoxError : null,
+          inputStyle
+        ]} 
+        onPress={showDatePicker}
+        activeOpacity={0.7}
+      >
+        <Text 
+          style={[
+            styles.text,
+            textStyle,
+            !value && styles.placeholder,
+            !value && placeholderTextStyle
+          ]}
+          numberOfLines={1}
+        >
+          {displayString || placeholder}
+        </Text>
+        
+        <FontAwesome6 
+          name={iconName} 
+          size={iconSize} 
+          color={iconColor || (value ? '#4B5563' : '#9CA3AF')} 
+          style={styles.icon}
+        />
+      </TouchableOpacity>
+      
+      {error && <Text style={[styles.errorText, errorTextStyle]}>{error}</Text>}
+
+      {/* 
+         DateTimePickerModal 是 React Native Modal。
+         它会覆盖在所有 View 之上。
+      */}
+      <DateTimePickerModal
+        isVisible={isDatePickerVisible}
+        mode={mode}
+        date={dateObjectForPicker} // 传入 Date 对象
+        onConfirm={handleConfirm}
+        onCancel={hideDatePicker}
+        // iOS 只有用这个 display 样式才最稳，避免乱七八糟的 inline 样式
+        display={Platform.OS === 'ios' ? 'spinner' : 'default'} 
+        // 自动适配系统深色模式，或者根据 isDark 变量控制
+        isDarkModeEnabled={isDark}
+        // 强制使用中文环境
+        locale="zh-CN"
+        confirmTextIOS="确定"
+        cancelTextIOS="取消"
+      />
+    </View>
+  );
+};
+
+// 设计样式
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 20,
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#374151', // Gray 700
+    marginBottom: 8,
+    marginLeft: 2,
+  },
+  inputBox: {
+    height: 52, // 增加高度提升触控体验
+    backgroundColor: '#FFFFFF',
+    borderRadius: 12, // 更圆润的角
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    borderWidth: 1,
+    borderColor: '#E5E7EB', // Gray 200
+    // 增加轻微阴影提升层次感 (iOS)
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 2,
+    // Android
+    elevation: 1,
+  },
+  inputBoxError: {
+    borderColor: '#EF4444', // Red 500
+    backgroundColor: '#FEF2F2', // Red 50
+  },
+  text: {
+    fontSize: 16,
+    color: '#111827', // Gray 900
+    flex: 1,
+  },
+  placeholder: {
+    color: '#9CA3AF', // Gray 400 - 标准占位符颜色
+  },
+  icon: {
+    marginLeft: 12,
+  },
+  errorText: {
+    marginTop: 4,
+    marginLeft: 2,
+    fontSize: 12,
+    color: '#EF4444',
+  }
+});

package/lib/__templates__/expo/client/components/ThemedText.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Text, TextProps, TextStyle } from 'react-native';
+import { useTheme } from '@/hooks/useTheme';
+import { Typography } from '@/constants/theme';
+
+type TypographyVariant = keyof typeof Typography;
+
+interface ThemedTextProps extends TextProps {
+  variant?: TypographyVariant;
+  color?: string;
+}
+
+export function ThemedText({
+  variant = 'body',
+  color,
+  style,
+  children,
+  ...props
+}: ThemedTextProps) {
+  const { theme } = useTheme();
+  const typographyStyle = Typography[variant];
+
+  const textStyle: TextStyle = {
+    ...typographyStyle,
+    color: color ?? theme.textPrimary,
+  };
+
+  return (
+    <Text style={[textStyle, style]} {...props}>
+      {children}
+    </Text>
+  );
+}

package/lib/__templates__/expo/client/components/ThemedView.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { View, ViewProps, ViewStyle } from 'react-native';
+import { useTheme } from '@/hooks/useTheme';
+
+type BackgroundLevel = 'root' | 'default' | 'tertiary';
+
+interface ThemedViewProps extends ViewProps {
+  level?: BackgroundLevel;
+  backgroundColor?: string;
+}
+
+const backgroundMap: Record<BackgroundLevel, string> = {
+  root: 'backgroundRoot',
+  default: 'backgroundDefault',
+  tertiary: 'backgroundTertiary',
+};
+
+export function ThemedView({
+  level = 'root',
+  backgroundColor,
+  style,
+  children,
+  ...props
+}: ThemedViewProps) {
+  const { theme } = useTheme();
+  const bgColor = backgroundColor ?? (theme as any)[backgroundMap[level]];
+
+  const viewStyle: ViewStyle = {
+    backgroundColor: bgColor,
+  };
+
+  return (
+    <View style={[viewStyle, style]} {...props}>
+      {children}
+    </View>
+  );
+}

package/lib/__templates__/expo/client/constants/theme.ts

@@ -0,0 +1,177 @@
+export const Colors = {
+  light: {
+    textPrimary: "#1C1917",
+    textSecondary: "#78716c",
+    textMuted: "#9CA3AF",
+    primary: "#4F46E5", // Indigo-600 - 品牌主色，代表科技与智能
+    accent: "#8B5CF6", // Violet-500 - 辅助色，代表创造力
+    success: "#10B981", // Emerald-500
+    error: "#EF4444",
+    backgroundRoot: "#FAFAFA",
+    backgroundDefault: "#FFFFFF",
+    backgroundTertiary: "#F9FAFB", // 更浅的背景色，用于去线留白
+    buttonPrimaryText: "#FFFFFF",
+    tabIconSelected: "#4F46E5",
+    border: "#E5E7EB",
+    borderLight: "#F3F4F6",
+  },
+  dark: {
+    textPrimary: "#FAFAF9",
+    textSecondary: "#A8A29E",
+    textMuted: "#6F767E",
+    primary: "#818CF8", // Indigo-400 - 暗色模式品牌主色
+    accent: "#A78BFA", // Violet-400
+    success: "#34D399",
+    error: "#F87171",
+    backgroundRoot: "#09090B", // 更深的背景色
+    backgroundDefault: "#1C1C1E",
+    backgroundTertiary: "#1F1F22", // 暗色模式去线留白背景
+    buttonPrimaryText: "#09090B",
+    tabIconSelected: "#818CF8",
+    border: "#3F3F46",
+    borderLight: "#27272A",
+  },
+};
+
+export const Spacing = {
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 20,
+  "2xl": 24,
+  "3xl": 32,
+  "4xl": 40,
+  "5xl": 48,
+  "6xl": 64,
+};
+
+export const BorderRadius = {
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 20,
+  "2xl": 24,
+  "3xl": 28,
+  "4xl": 32,
+  full: 9999,
+};
+
+export const Typography = {
+  display: {
+    fontSize: 112,
+    lineHeight: 112,
+    fontWeight: "200" as const,
+    letterSpacing: -4,
+  },
+  displayLarge: {
+    fontSize: 112,
+    lineHeight: 112,
+    fontWeight: "200" as const,
+    letterSpacing: -2,
+  },
+  displayMedium: {
+    fontSize: 48,
+    lineHeight: 56,
+    fontWeight: "200" as const,
+  },
+  h1: {
+    fontSize: 32,
+    lineHeight: 40,
+    fontWeight: "700" as const,
+  },
+  h2: {
+    fontSize: 28,
+    lineHeight: 36,
+    fontWeight: "700" as const,
+  },
+  h3: {
+    fontSize: 24,
+    lineHeight: 32,
+    fontWeight: "300" as const,
+  },
+  h4: {
+    fontSize: 20,
+    lineHeight: 28,
+    fontWeight: "600" as const,
+  },
+  title: {
+    fontSize: 18,
+    lineHeight: 24,
+    fontWeight: "700" as const,
+  },
+  body: {
+    fontSize: 16,
+    lineHeight: 24,
+    fontWeight: "400" as const,
+  },
+  bodyMedium: {
+    fontSize: 16,
+    lineHeight: 24,
+    fontWeight: "500" as const,
+  },
+  small: {
+    fontSize: 14,
+    lineHeight: 20,
+    fontWeight: "400" as const,
+  },
+  smallMedium: {
+    fontSize: 14,
+    lineHeight: 20,
+    fontWeight: "500" as const,
+  },
+  caption: {
+    fontSize: 12,
+    lineHeight: 16,
+    fontWeight: "400" as const,
+  },
+  captionMedium: {
+    fontSize: 12,
+    lineHeight: 16,
+    fontWeight: "500" as const,
+  },
+  label: {
+    fontSize: 14,
+    lineHeight: 20,
+    fontWeight: "500" as const,
+    letterSpacing: 2,
+    textTransform: "uppercase" as const,
+  },
+  labelSmall: {
+    fontSize: 12,
+    lineHeight: 16,
+    fontWeight: "500" as const,
+    letterSpacing: 1,
+    textTransform: "uppercase" as const,
+  },
+  labelTitle: {
+    fontSize: 14,
+    lineHeight: 20,
+    fontWeight: "700" as const,
+    letterSpacing: 2,
+    textTransform: "uppercase" as const,
+  },
+  link: {
+    fontSize: 16,
+    lineHeight: 24,
+    fontWeight: "400" as const,
+  },
+  stat: {
+    fontSize: 30,
+    lineHeight: 36,
+    fontWeight: "300" as const,
+  },
+  tiny: {
+    fontSize: 10,
+    lineHeight: 14,
+    fontWeight: "400" as const,
+  },
+  navLabel: {
+    fontSize: 10,
+    lineHeight: 14,
+    fontWeight: "500" as const,
+  },
+};
+
+export type Theme = typeof Colors.light;

package/lib/__templates__/expo/client/contexts/AuthContext.tsx

@@ -0,0 +1,49 @@
+// @ts-nocheck
+/**
+ * 通用认证上下文
+ *
+ * 基于固定的 API 接口实现，可复用到其他项目
+ * 其他项目使用时，只需修改 @api 的导入路径指向项目的 api 模块
+ *
+ * 注意：
+ * - 如果需要登录/鉴权场景，请扩展本文件，完善 login/logout、token 管理、用户信息获取与刷新等逻辑
+ * - 将示例中的占位实现替换为项目实际的接口调用与状态管理
+ */
+import React, { createContext, useContext, ReactNode } from "react";
+
+interface UserOut {
+
+}
+
+interface AuthContextType {
+  user: UserOut | null;
+  token: string | null;
+  isAuthenticated: boolean;
+  isLoading: boolean;
+  login: (token: string) => Promise<void>;
+  logout: () => Promise<void>;
+  updateUser: (userData: Partial<UserOut>) => void;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const value: AuthContextType = {
+    user: null,
+    token: null,
+    isAuthenticated: false,
+    isLoading: false,
+    login: async (token: string) => {},
+    logout: async () => {},
+    updateUser: () => {},
+  };
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+};
+
+export const useAuth = (): AuthContextType => {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+  return context;
+};

package/lib/__templates__/expo/client/declarations.d.ts

@@ -0,0 +1,5 @@
+// declarations.d.ts
+
+declare module 'expo-file-system/legacy' {
+  export * from 'expo-file-system';
+}

package/lib/__templates__/expo/client/eslint-formatter-simple.mjs

@@ -0,0 +1,49 @@
+export default function (results) {
+  
+  return results
+    .flatMap(file =>
+      file.messages.map(m => {
+        // split into lines
+        const lines = m.message.split('\n');
+
+        // 第一行（句子）：直接用
+        const first = lines[0];
+
+        // 附加解释：过滤掉所有 codeframe/箭头/行号/重复路径
+        const details = lines
+          .slice(1)
+          .filter(l => {
+            // 移除空行
+            if (!l.trim()) return false;
+
+            // 移除 "58 | xxx" 这样的行
+            if (/^\s*\d+\s*\|/.test(l)) return false;
+
+            // 移除 "> 60 | ..." 这样的箭头行
+            if (/^\s*>/.test(l)) return false;
+
+            // 移除只有箭头提示的行，如 "| ^^^^^"
+            if (/^\s*\|/.test(l)) return false;
+
+            // 移除 "…" 省略号行
+            if (/^\s*…/.test(l)) return false;
+
+            // 移除重复路径行（eslint message 有时夹带 file:line）
+            if (/\.tsx:\d+:\d+/.test(l)) return false;
+
+            return true;
+          })
+          .join('\n')
+          .trim();
+
+        let output = `${file.filePath}:${m.line}:${m.column}  ${
+          m.severity === 2 ? 'error' : 'warn'
+        }  ${first}`;
+
+        if (details) output += `\n${details}\n`;
+
+        return output;
+      })
+    )
+    .join('\n');
+};