@coze-arch/cli 0.0.1-alpha.c53937 → 0.0.1-alpha.c7a03c

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

@@ -1,40 +1,73 @@
-import { Platform } from "react-native";
-
-const tintColorLight = "#007AFF";
-const tintColorDark = "#0A84FF";
+import { Platform, StyleSheet } from "react-native";
 
 export const Colors = {
   light: {
-    text: "#11181C",
-    textPrimary: "#11181C",
-    textSecondary: "#687076",
-    textMuted: "#9BA1A6",
-    buttonText: "#FFFFFF",
-    tabIconDefault: "#687076",
-    tabIconSelected: tintColorLight,
-    primary: tintColorLight,
-    link: "#007AFF",
-    backgroundRoot: "#FFFFFF", // Elevation 0
-    backgroundDefault: "#F2F2F2", // Elevation 1
-    backgroundSecondary: "#E6E6E6", // Elevation 2
-    backgroundTertiary: "#D9D9D9", // Elevation 3
-    border: "#E6E6E6",
+    background: '#ffffff',
+    foreground: '#0a0a0a',
+    card: '#ffffff',
+    cardForeground: '#0a0a0a',
+    popover: '#ffffff',
+    popoverForeground: '#0a0a0a',
+    primary: '#171717',
+    primaryForeground: '#fafafa',
+    secondary: '#f5f5f5',
+    secondaryForeground: '#171717',
+    muted: '#f5f5f5',
+    mutedForeground: '#737373',
+    accent: '#f5f5f5',
+    accentForeground: '#171717',
+    destructive: '#e7000b',
+    destructiveForeground: '#ffffff',
+    border: '#e5e5e5',
+    input: '#e5e5e5',
+    ring: '#a1a1a1',
+    chart1: '#91c5ff',
+    chart2: '#3a81f6',
+    chart3: '#2563ef',
+    chart4: '#1a4eda',
+    chart5: '#1f3fad',
+    sidebar: '#fafafa',
+    sidebarForeground: '#0a0a0a',
+    sidebarPrimary: '#171717',
+    sidebarPrimaryForeground: '#fafafa',
+    sidebarAccent: '#f5f5f5',
+    sidebarAccentForeground: '#171717',
+    sidebarBorder: '#e5e5e5',
+    sidebarRing: '#a1a1a1',
   },
   dark: {
-    text: "#ECEDEE",
-    textPrimary: "#ECEDEE",
-    textSecondary: "#9BA1A6",
-    textMuted: "#6F767E",
-    buttonText: "#FFFFFF",
-    tabIconDefault: "#9BA1A6",
-    tabIconSelected: tintColorDark,
-    primary: tintColorDark,
-    link: "#0A84FF",
-    backgroundRoot: "#1F2123", // Elevation 0
-    backgroundDefault: "#2A2C2E", // Elevation 1
-    backgroundSecondary: "#353739", // Elevation 2
-    backgroundTertiary: "#404244", // Elevation 3
-    border: "#353739",
+    background: '#0a0a0a',
+    foreground: '#fafafa',
+    card: '#171717',
+    cardForeground: '#fafafa',
+    popover: '#262626',
+    popoverForeground: '#fafafa',
+    primary: '#e5e5e5',
+    primaryForeground: '#171717',
+    secondary: '#262626',
+    secondaryForeground: '#fafafa',
+    muted: '#262626',
+    mutedForeground: '#a1a1a1',
+    accent: '#404040',
+    accentForeground: '#fafafa',
+    destructive: '#ff6467',
+    destructiveForeground: '#fafafa',
+    border: '#282828',
+    input: '#343434',
+    ring: '#737373',
+    chart1: '#91c5ff',
+    chart2: '#3a81f6',
+    chart3: '#2563ef',
+    chart4: '#1a4eda',
+    chart5: '#1f3fad',
+    sidebar: '#171717',
+    sidebarForeground: '#fafafa',
+    sidebarPrimary: '#1447e6',
+    sidebarPrimaryForeground: '#fafafa',
+    sidebarAccent: '#262626',
+    sidebarAccentForeground: '#fafafa',
+    sidebarBorder: '#282828',
+    sidebarRing: '#525252',
   },
 };
 
@@ -48,22 +81,48 @@ export const Spacing = {
   "3xl": 32,
   "4xl": 40,
   "5xl": 48,
+  "6xl": 64,
   inputHeight: 48,
-  buttonHeight: 52,
+  buttonHeight: 48,
+  avatarSize: 40,
+  iconButtonSize: 32,
+  contentPaddingHorizontal: 32,
+  sectionGap: 40,
+  sectionGapLarge: 48,
+  itemGap: 8,
+  detailGap: 48,
+  chartHeight: 128,
 };
 
 export const BorderRadius = {
-  xs: 8,
-  sm: 12,
-  md: 18,
-  lg: 24,
-  xl: 30,
-  "2xl": 40,
-  "3xl": 50,
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 20,
+  "2xl": 24,
+  "3xl": 40,
   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,
@@ -77,52 +136,387 @@ export const Typography = {
   h3: {
     fontSize: 24,
     lineHeight: 32,
-    fontWeight: "600" as const,
+    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 const Fonts = Platform.select({
   ios: {
-    /** iOS `UIFontDescriptorSystemDesignDefault` */
-    sans: "system-ui",
-    /** iOS `UIFontDescriptorSystemDesignSerif` */
-    serif: "ui-serif",
-    /** iOS `UIFontDescriptorSystemDesignRounded` */
-    rounded: "ui-rounded",
-    /** iOS `UIFontDescriptorSystemDesignMonospaced` */
-    mono: "ui-monospace",
+    sans: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
+  },
+  android: {
+    sans: "Roboto, 'Segoe UI', Helvetica, Arial, sans-serif",
   },
   default: {
-    sans: "normal",
-    serif: "serif",
-    rounded: "normal",
-    mono: "monospace",
-  },
-  web: {
-    sans: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
-    serif: "Georgia, 'Times New Roman', serif",
-    rounded:
-      "'SF Pro Rounded', 'Hiragino Maru Gothic ProN', Meiryo, 'MS PGothic', sans-serif",
-    mono: "SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+    sans: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
+  },
+});
+
+export const Shadow = {
+  none: {},
+  minimal: Platform.select({
+    ios: { shadowColor: "#000", shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.05, shadowRadius: 2 },
+    android: { elevation: 1 },
+    default: {},
+  }),
+  sm: Platform.select({
+    ios: { shadowColor: "#000", shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.05, shadowRadius: 2 },
+    android: { elevation: 1 },
+    default: {},
+  }),
+  md: Platform.select({
+    ios: { shadowColor: "#000", shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1, shadowRadius: 4 },
+    android: { elevation: 3 },
+    default: {},
+  }),
+  lg: Platform.select({
+    ios: { shadowColor: "#000", shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.15, shadowRadius: 8 },
+    android: { elevation: 6 },
+    default: {},
+  }),
+  island: Platform.select({
+    ios: { shadowColor: "#000", shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.1, shadowRadius: 20 },
+    android: { elevation: 8 },
+    default: {},
+  }),
+};
+
+export const Duration = {
+  fast: 150,
+  normal: 250,
+  slow: 400,
+};
+
+export const ZIndex = {
+  base: 0,
+  dropdown: 100,
+  sticky: 200,
+  modal: 300,
+  toast: 400,
+  overlay: 500,
+};
+
+export type Theme = typeof Colors.light;
+
+export const CommonStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  scrollContent: {
+    paddingHorizontal: Spacing.contentPaddingHorizontal,
+  },
+  centerContent: {
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  rowGap: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: Spacing.sm,
+  },
+  rowBetween: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  rowBetweenEnd: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "flex-end",
+  },
+  rowBetweenStart: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "flex-start",
+  },
+  rowCenter: {
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  rowCenterGap: {
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: Spacing.detailGap,
+  },
+  column: {
+    flexDirection: "column",
+  },
+  columnCenter: {
+    flexDirection: "column",
+    alignItems: "center",
+  },
+  flex1: {
+    flex: 1,
+  },
+  textCenter: {
+    textAlign: "center",
+  },
+  avatar: {
+    width: Spacing.avatarSize,
+    height: Spacing.avatarSize,
+    borderRadius: Spacing.avatarSize / 2,
+    borderWidth: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  iconButton: {
+    width: Spacing.iconButtonSize,
+    height: Spacing.iconButtonSize,
+    borderRadius: Spacing.iconButtonSize / 2,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  button: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: Spacing.sm,
+    paddingHorizontal: Spacing.contentPaddingHorizontal,
+    paddingVertical: Spacing.md,
+    borderWidth: 1,
+    borderRadius: BorderRadius.full,
+  },
+  buttonSmall: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: Spacing.sm,
+    paddingHorizontal: Spacing.lg,
+    paddingVertical: Spacing.sm,
+    borderRadius: BorderRadius.sm,
+  },
+  card: {
+    borderRadius: BorderRadius.xl,
+    padding: Spacing.sm,
+  },
+  chartContainer: {
+    height: Spacing.chartHeight,
+    borderRadius: BorderRadius.xl,
+    padding: Spacing.sm,
+    borderWidth: 1,
+    position: "relative",
+  },
+  chartGrid: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    padding: Spacing.lg,
+    justifyContent: "space-between",
+  },
+  chartEmpty: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  progressBar: {
+    width: "100%",
+    height: 2,
+    borderRadius: 1,
+    overflow: "hidden",
+    marginTop: Spacing.sm,
+  },
+  progressFill: {
+    height: "100%",
+    borderRadius: 1,
+  },
+  divider: {
+    height: 1,
+    width: "100%",
+  },
+  dividerVertical: {
+    width: 1,
+    height: "100%",
+  },
+  dot: {
+    width: 4,
+    height: 4,
+    borderRadius: 2,
+  },
+  absoluteFill: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+  tooltip: {
+    paddingHorizontal: Spacing.sm,
+    paddingVertical: Spacing.xs,
+    borderRadius: BorderRadius.xs,
+  },
+  emptyState: {
+    alignItems: "center",
+    paddingVertical: Spacing["2xl"],
+  },
+  section: {
+    marginBottom: Spacing.sectionGap,
+  },
+  sectionLarge: {
+    marginBottom: Spacing.sectionGapLarge,
+  },
+  sectionHeader: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "flex-end",
+    marginBottom: Spacing["2xl"],
+  },
+  gridLine: {
+    width: "100%",
+    height: 1,
+    borderTopWidth: 1,
+    borderStyle: "dashed",
+  },
+  statsGrid: {
+    flexDirection: "row",
+  },
+  statsColumn: {
+    flex: 1,
+  },
+  statsColumnLeft: {
+    paddingRight: Spacing.lg,
+  },
+  statsColumnRight: {
+    paddingLeft: Spacing.contentPaddingHorizontal,
+    borderLeftWidth: 1,
+  },
+  statsHeader: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "flex-start",
+    marginBottom: Spacing.lg,
+  },
+  detailItem: {
+    alignItems: "center",
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "flex-end",
+    paddingBottom: Spacing.lg,
+  },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  glucoseSection: {
+    marginTop: Spacing["2xl"],
+    marginBottom: Spacing.sectionGap,
+    alignItems: "center",
+  },
+  glucoseHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: Spacing.sm,
+    marginBottom: Spacing.sm,
+  },
+  glucoseUnit: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: Spacing.sm,
+    marginTop: Spacing.sm,
+  },
+  glucoseDetails: {
+    flexDirection: "row",
+    justifyContent: "center",
+    gap: Spacing.detailGap,
+    marginTop: Spacing["2xl"],
   },
 });
+
+export const createThemedStyles = (theme: Theme) => {
+  return StyleSheet.create({
+    container: {
+      ...CommonStyles.container,
+    },
+  });
+};

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/{eslint.config.mjs → client/eslint.config.mjs}

@@ -1,10 +1,11 @@
-import js from "@eslint/js";
-import globals from "globals";
-import tseslint from "typescript-eslint";
-import pluginReact from "eslint-plugin-react";
-import reactHooks from "eslint-plugin-react-hooks";
-import regexp from "eslint-plugin-regexp";
-import pluginImport from "eslint-plugin-import";
+import js from '@eslint/js';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+import pluginReact from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+import regexp from 'eslint-plugin-regexp';
+import pluginImport from 'eslint-plugin-import';
+import fontawesome6 from '../eslint-plugins/fontawesome6/index.js';
 
 export default [
   {
@@ -20,14 +21,14 @@ export default [
   regexp.configs["flat/recommended"],
   js.configs.recommended,
   ...tseslint.configs.recommended,
-  
+
   // React 的推荐配置
   pluginReact.configs.flat.recommended,
   pluginReact.configs.flat['jsx-runtime'],
   reactHooks.configs.flat.recommended,
   {
     files: ["**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
-    
+
     // 语言选项：设置全局变量
     languageOptions: {
       globals: {
@@ -52,6 +53,7 @@ export default [
 
     plugins: {
       import: pluginImport,
+      fontawesome6,
     },
     rules: {
       // 关闭代码风格规则
@@ -70,6 +72,7 @@ export default [
       'no-prototype-builtins': 'off',
       'react/react-in-jsx-scope': 'off',
       'react/jsx-uses-react': 'off',
+      'fontawesome6/valid-name': 'error',
     },
   },
 
@@ -91,7 +94,7 @@ export default [
       // 在 .js 文件中关闭 TS 规则
       '@typescript-eslint/no-require-imports': 'off',
       // 在 Node.js 文件中允许 require
-      '@typescript-eslint/no-var-requires': 'off', 
+      '@typescript-eslint/no-var-requires': 'off',
       'no-undef': 'off',
     },
   },

package/lib/__templates__/expo/client/hooks/useColorScheme.ts

@@ -1 +1,34 @@
-export { useColorScheme } from "react-native";
+import { useEffect, useState } from 'react';
+import { ColorSchemeName, useColorScheme as useReactNativeColorScheme, Platform } from 'react-native';
+
+export function useColorScheme() {
+  const systemColorScheme = useReactNativeColorScheme();
+  const [colorScheme, setColorScheme] = useState<ColorSchemeName>(systemColorScheme);
+
+  useEffect(() => {
+    setColorScheme(systemColorScheme);
+  }, [systemColorScheme])
+
+  useEffect(() => {
+    function handleMessage(e: MessageEvent<{ event: string; colorScheme: ColorSchemeName; } | undefined>) {
+      if (e.data?.event === 'coze.workbench.colorScheme') {
+        const cs = e.data.colorScheme;
+        if (typeof cs === 'string') {
+          setColorScheme(cs);
+        }
+      }
+    }
+
+    if (Platform.OS === 'web') {
+      window.addEventListener('message', handleMessage, false);
+    }
+
+    return () => {
+      if (Platform.OS === 'web') {
+        window.removeEventListener('message', handleMessage, false);
+      }
+    }
+  }, []);
+
+  return colorScheme;
+}