create-secra 0.1.4 → 0.1.7

package/antd-adapter-template/packages/sdk/src/styles/reset.css

@@ -0,0 +1,111 @@
+/* Reset CSS - 常用的样式重置 */
+
+/* 使用更直观的盒模型 */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+/* 移除默认的 margin 和 padding */
+* {
+    margin: 0;
+    padding: 0;
+}
+
+/* 设置根元素字体大小和行高 */
+html {
+    font-size: 16px;
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    -moz-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+}
+
+/* 设置 body 样式 */
+body {
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+/* 移除列表样式 */
+ul,
+ol {
+    list-style: none;
+}
+
+/* 移除链接默认样式 */
+a {
+    text-decoration: none;
+    color: inherit;
+}
+
+/* 移除按钮默认样式 */
+button {
+    background: none;
+    border: none;
+    padding: 0;
+    font: inherit;
+    cursor: pointer;
+    outline: inherit;
+}
+
+/* 移除输入框默认样式 */
+input,
+textarea,
+select {
+    font: inherit;
+    border: none;
+    outline: none;
+}
+
+/* 移除图片默认样式 */
+img,
+picture,
+video,
+canvas,
+svg {
+    display: block;
+    max-width: 100%;
+    height: auto;
+}
+
+/* 移除表格默认样式 */
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+/* 移除标题默认样式 */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-size: inherit;
+    font-weight: inherit;
+}
+
+/* 移除段落默认样式 */
+p {
+    margin: 0;
+}
+
+/* 移除引用默认样式 */
+blockquote,
+q {
+    quotes: none;
+}
+
+blockquote::before,
+blockquote::after,
+q::before,
+q::after {
+    content: '';
+    content: none;
+}

package/antd-adapter-template/packages/sdk/src/theme/index.ts

@@ -0,0 +1,466 @@
+import { useConfig, useTheme, type ThemeConfig, type ThemeContextValue } from '@vlian/framework/core';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { ConfigProviderProps } from 'antd';
+
+export type ThemeMode = NonNullable<ThemeConfig['mode']>;
+
+type ResolvedThemeMode = Exclude<ThemeMode, 'system'>;
+
+type CssThemeTokenName =
+  | 'background'
+  | 'foreground'
+  | 'card'
+  | 'card-foreground'
+  | 'popover'
+  | 'popover-foreground'
+  | 'primary'
+  | 'primary-foreground'
+  | 'secondary'
+  | 'secondary-foreground'
+  | 'muted'
+  | 'muted-foreground'
+  | 'accent'
+  | 'accent-foreground'
+  | 'destructive'
+  | 'destructive-foreground'
+  | 'border'
+  | 'input'
+  | 'ring';
+
+type CssThemeTokenMap = Partial<Record<CssThemeTokenName, string>>;
+
+type CssThemeConfig = Partial<Record<ResolvedThemeMode, CssThemeTokenMap>>;
+
+const MODE_CYCLE: readonly ThemeMode[] = ['light', 'dark', 'system'] as const;
+
+const DEFAULT_THEME_TOKENS: Record<ResolvedThemeMode, Record<CssThemeTokenName, string>> = {
+  light: {
+    background: '0 0% 100%',
+    foreground: '222.2 84% 4.9%',
+    card: '0 0% 100%',
+    'card-foreground': '222.2 84% 4.9%',
+    popover: '0 0% 100%',
+    'popover-foreground': '222.2 84% 4.9%',
+    primary: '221.2 83.2% 53.3%',
+    'primary-foreground': '210 40% 98%',
+    secondary: '210 40% 96.1%',
+    'secondary-foreground': '222.2 47.4% 11.2%',
+    muted: '210 40% 96.1%',
+    'muted-foreground': '215.4 16.3% 46.9%',
+    accent: '210 40% 96.1%',
+    'accent-foreground': '222.2 47.4% 11.2%',
+    destructive: '0 84.2% 60.2%',
+    'destructive-foreground': '210 40% 98%',
+    border: '214.3 31.8% 91.4%',
+    input: '214.3 31.8% 91.4%',
+    ring: '221.2 83.2% 53.3%',
+  },
+  dark: {
+    background: '222.2 84% 4.9%',
+    foreground: '210 40% 98%',
+    card: '222.2 84% 4.9%',
+    'card-foreground': '210 40% 98%',
+    popover: '222.2 84% 4.9%',
+    'popover-foreground': '210 40% 98%',
+    primary: '217.2 91.2% 59.8%',
+    'primary-foreground': '222.2 47.4% 11.2%',
+    secondary: '217.2 32.6% 17.5%',
+    'secondary-foreground': '210 40% 98%',
+    muted: '217.2 32.6% 17.5%',
+    'muted-foreground': '215 20.2% 65.1%',
+    accent: '217.2 32.6% 17.5%',
+    'accent-foreground': '210 40% 98%',
+    destructive: '0 62.8% 30.6%',
+    'destructive-foreground': '210 40% 98%',
+    border: '217.2 32.6% 17.5%',
+    input: '217.2 32.6% 17.5%',
+    ring: '224.3 76.3% 48%',
+  },
+};
+
+const normalizeMode = (mode: ThemeConfig['mode']): ThemeMode => {
+  if (mode === 'light' || mode === 'dark' || mode === 'system') {
+    return mode;
+  }
+  return 'light';
+};
+
+const normalizeHexColor = (value: string): string | null => {
+  const hex = value.trim().replace(/^#/, '');
+  if (!/^[0-9a-fA-F]{3}$|^[0-9a-fA-F]{6}$/.test(hex)) {
+    return null;
+  }
+  if (hex.length === 3) {
+    return `#${hex
+      .split('')
+      .map((char) => `${char}${char}`)
+      .join('')}`;
+  }
+  return `#${hex}`;
+};
+
+const hexToHslTriplet = (hexColor: string): string | null => {
+  const normalizedHex = normalizeHexColor(hexColor);
+  if (!normalizedHex) {
+    return null;
+  }
+
+  const hex = normalizedHex.slice(1);
+  const r = parseInt(hex.slice(0, 2), 16) / 255;
+  const g = parseInt(hex.slice(2, 4), 16) / 255;
+  const b = parseInt(hex.slice(4, 6), 16) / 255;
+
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const delta = max - min;
+
+  let h = 0;
+  const l = (max + min) / 2;
+  const s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
+
+  if (delta !== 0) {
+    if (max === r) {
+      h = ((g - b) / delta) % 6;
+    } else if (max === g) {
+      h = (b - r) / delta + 2;
+    } else {
+      h = (r - g) / delta + 4;
+    }
+  }
+
+  const hue = Math.round((h * 60 + 360) % 360);
+  const saturation = Number((s * 100).toFixed(1));
+  const lightness = Number((l * 100).toFixed(1));
+  return `${hue} ${saturation}% ${lightness}%`;
+};
+
+const readThemeTokenConfig = (custom: ThemeConfig['custom']): CssThemeConfig => {
+  const source = (custom as { tokens?: CssThemeConfig } | undefined)?.tokens;
+  return source ?? {};
+};
+
+const hasTokenDiff = (current: CssThemeTokenMap | undefined, next: CssThemeTokenMap): boolean => {
+  for (const [key, value] of Object.entries(next)) {
+    if (current?.[key as CssThemeTokenName] !== value) {
+      return true;
+    }
+  }
+  return false;
+};
+
+const getSystemDark = (): boolean => {
+  if (typeof window === 'undefined') {
+    return false;
+  }
+  return window.matchMedia('(prefers-color-scheme: dark)').matches;
+};
+
+const toHslColor = (triplet: string): string => `hsl(${triplet})`;
+
+export interface ThemeSwitchContextValue extends ThemeContextValue {
+  mode: ThemeMode;
+  resolvedMode: ResolvedThemeMode;
+  setThemeMode: (mode: ThemeMode) => void;
+  toggleThemeMode: () => void;
+  cycleThemeMode: () => void;
+}
+
+export interface UnifiedThemeSwitchContextValue extends ThemeSwitchContextValue {
+  setAntdTheme: (nextTheme: NonNullable<ConfigProviderProps['theme']>) => void;
+  setThemeTokens: (mode: ResolvedThemeMode, tokens: CssThemeTokenMap) => void;
+  themeTokens: Record<CssThemeTokenName, string>;
+}
+
+export const useThemeSwitch = (): UnifiedThemeSwitchContextValue => {
+  const themeContext = useTheme();
+  const configContext = useConfig();
+  const mode = normalizeMode(themeContext.theme.mode);
+  const [isSystemDark, setIsSystemDark] = useState<boolean>(getSystemDark);
+  const { setTheme } = themeContext;
+  const { setAntdConfig, antdConfig } = configContext;
+  const antdConfigRef = useRef(antdConfig);
+  const resolvedMode: ResolvedThemeMode = mode === 'system' ? (isSystemDark ? 'dark' : 'light') : mode;
+
+  useEffect(() => {
+    antdConfigRef.current = antdConfig;
+  }, [antdConfig]);
+
+  const setThemeMode = useCallback(
+    (nextMode: ThemeMode) => {
+      setTheme((prev) => {
+        const previous = prev ?? {};
+        if (previous.mode === nextMode) {
+          return previous;
+        }
+        return { ...previous, mode: nextMode };
+      });
+    },
+    [setTheme],
+  );
+
+  const toggleThemeMode = useCallback(() => {
+    const nextMode: ThemeMode = mode === 'dark' ? 'light' : 'dark';
+    setThemeMode(nextMode);
+  }, [mode, setThemeMode]);
+
+  const cycleThemeMode = useCallback(() => {
+    const index = MODE_CYCLE.indexOf(mode);
+    const nextMode = MODE_CYCLE[(index + 1) % MODE_CYCLE.length];
+    setThemeMode(nextMode);
+  }, [mode, setThemeMode]);
+
+  const setAntdTheme = useCallback(
+    (nextTheme: NonNullable<ConfigProviderProps['theme']>) => {
+      const currentAntdConfig = antdConfigRef.current;
+      const currentTheme = (currentAntdConfig as ConfigProviderProps | undefined)?.theme;
+      setAntdConfig({
+        ...(currentAntdConfig ?? {}),
+        theme: {
+          ...(currentTheme ?? {}),
+          ...nextTheme,
+          token: {
+            ...(currentTheme?.token ?? {}),
+            ...(nextTheme.token ?? {}),
+          },
+        },
+      });
+    },
+    [setAntdConfig],
+  );
+
+  const setThemeTokens = useCallback(
+    (targetMode: ResolvedThemeMode, tokens: CssThemeTokenMap) => {
+      setTheme((prev) => {
+        const previous = prev ?? {};
+        const themeTokenConfig = readThemeTokenConfig(previous.custom);
+        const currentTokens = themeTokenConfig[targetMode];
+        if (!hasTokenDiff(currentTokens, tokens)) {
+          return previous;
+        }
+        return {
+          ...previous,
+          custom: {
+            ...(previous.custom ?? {}),
+            tokens: {
+              ...themeTokenConfig,
+              [targetMode]: {
+                ...(themeTokenConfig[targetMode] ?? {}),
+                ...tokens,
+              },
+            },
+          },
+        };
+      });
+    },
+    [setTheme],
+  );
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const handleChange = (event: MediaQueryListEvent) => {
+      setIsSystemDark(event.matches);
+    };
+    setIsSystemDark(mediaQuery.matches);
+    if (typeof mediaQuery.addEventListener === 'function') {
+      mediaQuery.addEventListener('change', handleChange);
+      return () => {
+        mediaQuery.removeEventListener('change', handleChange);
+      };
+    }
+
+    mediaQuery.addListener(handleChange);
+    return () => {
+      mediaQuery.removeListener(handleChange);
+    };
+  }, []);
+
+  const effectiveThemeTokens = useMemo(() => {
+    const fromCustom = readThemeTokenConfig(themeContext.theme.custom)[resolvedMode] ?? {};
+    const primaryFromTheme = themeContext.theme.primaryColor ? hexToHslTriplet(themeContext.theme.primaryColor) : null;
+    const base = DEFAULT_THEME_TOKENS[resolvedMode];
+    const primary = fromCustom.primary ?? primaryFromTheme ?? base.primary;
+    return {
+      ...base,
+      ...fromCustom,
+      primary,
+      ring: fromCustom.ring ?? primary,
+    };
+  }, [resolvedMode, themeContext.theme.custom, themeContext.theme.primaryColor]);
+
+  useEffect(() => {
+    if (typeof document === 'undefined') {
+      return;
+    }
+    const root = document.documentElement;
+    const isDark = resolvedMode === 'dark';
+    root.classList.toggle('dark', isDark);
+    root.style.colorScheme = isDark ? 'dark' : 'light';
+    root.dataset.theme = resolvedMode;
+  }, [resolvedMode]);
+
+  useEffect(() => {
+    if (typeof document === 'undefined') {
+      return;
+    }
+    const root = document.documentElement;
+    for (const [tokenName, tokenValue] of Object.entries(effectiveThemeTokens)) {
+      root.style.setProperty(`--${tokenName}`, tokenValue);
+    }
+  }, [effectiveThemeTokens]);
+
+  return {
+    ...themeContext,
+    mode,
+    resolvedMode,
+    setThemeMode,
+    toggleThemeMode,
+    cycleThemeMode,
+    setAntdTheme,
+    setThemeTokens,
+    themeTokens: effectiveThemeTokens,
+  };
+};
+
+export interface UnifiedThemePreset {
+  key: string;
+  label: string;
+  primaryColor: string;
+  tokens?: Record<ResolvedThemeMode, CssThemeTokenMap>;
+}
+
+export interface UseUnifiedThemePresetOptions {
+  defaultPresetKey?: string;
+  borderRadius?: number;
+}
+
+export interface UnifiedThemePresetContextValue extends UnifiedThemeSwitchContextValue {
+  presetKey: string;
+  setPresetKey: (presetKey: string) => void;
+  activePreset: UnifiedThemePreset | null;
+  applyPreset: (presetKey: string) => void;
+  setUnifiedPrimaryColor: (primaryColor: string) => void;
+}
+
+export const useUnifiedThemePreset = (
+  presets: readonly UnifiedThemePreset[],
+  options?: UseUnifiedThemePresetOptions,
+): UnifiedThemePresetContextValue => {
+  const themeSwitch = useThemeSwitch();
+  const { setTheme, setThemeTokens, setAntdTheme, themeTokens, theme } = themeSwitch;
+  const { defaultPresetKey, borderRadius = 8 } = options ?? {};
+
+  const fallbackPreset = presets[0] ?? null;
+  const [presetKey, setPresetKey] = useState<string>(defaultPresetKey ?? fallbackPreset?.key ?? '');
+  const antdSyncSignatureRef = useRef<string>('');
+
+  const activePreset = useMemo(() => {
+    if (presets.length === 0) {
+      return null;
+    }
+    return presets.find((item) => item.key === presetKey) ?? fallbackPreset;
+  }, [fallbackPreset, presetKey, presets]);
+
+  useEffect(() => {
+    try {
+      if (!activePreset) {
+        return;
+      }
+      const expectedPrimary = activePreset.primaryColor;
+      const shouldSyncPrimary = theme.primaryColor !== expectedPrimary;
+      if (shouldSyncPrimary) {
+        setTheme((prev) => {
+          const previous = prev ?? {};
+          if (previous.primaryColor === expectedPrimary) {
+            return previous;
+          }
+          return { ...previous, primaryColor: expectedPrimary };
+        });
+      }
+      if (activePreset.tokens?.light) {
+        setThemeTokens('light', activePreset.tokens.light);
+      }
+      if (activePreset.tokens?.dark) {
+        setThemeTokens('dark', activePreset.tokens.dark);
+      }
+    } catch (error) {
+      console.error('[sdk/useUnifiedThemePreset] apply preset failed', error);
+    }
+  }, [activePreset, setTheme, setThemeTokens, theme.primaryColor]);
+
+  useEffect(() => {
+    try {
+      const signature = [
+        theme.primaryColor ?? '',
+        themeTokens.background,
+        themeTokens.card,
+        themeTokens.foreground,
+        themeTokens.border,
+        themeTokens.accent,
+        String(borderRadius),
+      ].join('|');
+      if (antdSyncSignatureRef.current === signature) {
+        return;
+      }
+      antdSyncSignatureRef.current = signature;
+      setAntdTheme({
+        token: {
+          colorPrimary: theme.primaryColor,
+          colorInfo: theme.primaryColor,
+          colorBgBase: toHslColor(themeTokens.background),
+          colorBgContainer: toHslColor(themeTokens.card),
+          colorTextBase: toHslColor(themeTokens.foreground),
+          colorBorder: toHslColor(themeTokens.border),
+          colorFillSecondary: toHslColor(themeTokens.accent),
+          borderRadius,
+        },
+      });
+    } catch (error) {
+      console.error('[sdk/useUnifiedThemePreset] sync antd theme failed', error);
+    }
+  }, [
+    borderRadius,
+    setAntdTheme,
+    theme.primaryColor,
+    themeTokens.accent,
+    themeTokens.background,
+    themeTokens.border,
+    themeTokens.card,
+    themeTokens.foreground,
+  ]);
+
+  const applyPreset = useCallback((nextPresetKey: string) => {
+    setPresetKey(nextPresetKey);
+  }, []);
+
+  const setUnifiedPrimaryColor = useCallback(
+    (primaryColor: string) => {
+      try {
+        setTheme((prev) => {
+          const previous = prev ?? {};
+          return { ...previous, primaryColor };
+        });
+        const hsl = hexToHslTriplet(primaryColor);
+        if (!hsl) {
+          return;
+        }
+        setThemeTokens('light', { primary: hsl, ring: hsl });
+        setThemeTokens('dark', { primary: hsl, ring: hsl });
+      } catch (error) {
+        console.error('[sdk/useUnifiedThemePreset] set primary failed', error);
+      }
+    },
+    [setTheme, setThemeTokens],
+  );
+
+  return {
+    ...themeSwitch,
+    presetKey,
+    setPresetKey,
+    activePreset,
+    applyPreset,
+    setUnifiedPrimaryColor,
+  };
+};

package/antd-adapter-template/packages/sdk/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM"],
+    "jsx": "react-jsx",
+    "moduleResolution": "bundler",
+    "types": ["react", "react-dom"],
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "outDir": "dist"
+  },
+  "include": ["src"]
+}

package/antd-adapter-template/pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+packages:
+  - "apps/*"
+  - "packages/*"

package/antd-adapter-template/tsconfig.app.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "composite": true,
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/antd-adapter-template/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/antd-adapter-template/tsconfig.node.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "composite": true,
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/antd-adapter-template/turbo.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://turbo.build/schema.json",
+  "tasks": {
+    "build": {
+      "dependsOn": ["^build"],
+      "outputs": ["dist/**", "build/**"]
+    },
+    "dev": {
+      "cache": false,
+      "persistent": true
+    },
+    "lint": {},
+    "test": {
+      "dependsOn": ["^test"]
+    }
+  }
+}