@spacego/fe-components 0.0.1-alpha.1 → 0.0.1-alpha.3

package/src/utils/theme.ts

@@ -1,219 +0,0 @@
-/*
- * @Author: dushuai
- * @Date: 2026-01-28
- * @LastEditors: dushuai
- * @LastEditTime: 2026-01-31 23:30:06
- * @description: 主题工具函数
- */
-import { type ThemeMode, useThemeStore } from '@/store';
-
-const THEME_ATTRIBUTE = 'data-theme';
-
-/**
- * 获取当前主题（实际显示的 light/dark）
- * @param mode 主题模式 (light/dark/system)
- * @returns 实际主题 (light/dark)
- */
-export function getRealTheme(mode: ThemeMode): 'light' | 'dark' {
-  if(mode === 'system') {
-    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-  }
-  return mode;
-}
-
-/**
- * 应用主题到 DOM
- * @param theme 主题模式
- */
-export function applyTheme(theme: ThemeMode): void {
-  const root = document.documentElement;
-  // 获取实际主题（system 会转换为 light/dark）
-  const realTheme = getRealTheme(theme);
-  // data-theme 属性设置为实际主题值，而不是 system
-  root.setAttribute(THEME_ATTRIBUTE, realTheme);
-  root.classList.toggle('dark', realTheme === 'dark');
-}
-
-/**
- * 获取当前主题
- * @returns 当前主题模式
- */
-export function getTheme(): ThemeMode {
-  // 优先从 DOM 获取
-  const root = document.documentElement;
-  const themeFromDom = root.getAttribute(THEME_ATTRIBUTE) as ThemeMode | null;
-  if(themeFromDom && (themeFromDom === 'light' || themeFromDom === 'dark')) {
-    return themeFromDom;
-  }
-
-  // 从 localStorage 获取
-  const { theme } = useThemeStore.getState();
-  if(theme && (theme === 'light' || theme === 'dark')) {
-    return theme;
-  }
-
-  // 检测系统主题
-  if(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-    return 'dark';
-  }
-
-  // 默认返回 light
-  return 'light';
-}
-
-/**
- * 监听系统主题变化
- */
-export function listenSystemTheme(): void {
-  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-  const handler = (e: MediaQueryListEvent) => {
-    const { theme } = useThemeStore.getState();
-    if(theme === 'system') {
-      const newTheme = e.matches ? 'dark' : 'light';
-      document.documentElement.classList.toggle('dark', newTheme === 'dark');
-    }
-  };
-
-  mediaQuery.addEventListener('change', handler);
-}
-
-/**
- * 初始化主题
- */
-export function initTheme(): ThemeMode {
-  const theme = getTheme();
-  applyTheme(theme);
-  listenSystemTheme(); // 启动监听
-  return theme;
-}
-
-/**
- * 切换主题
- * @param currentTheme 当前主题
- * @returns 新主题
- */
-export function toggleTheme(currentTheme: ThemeMode): ThemeMode {
-  let newTheme: ThemeMode;
-  if(currentTheme === 'system') {
-    const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    newTheme = isDark ? 'light' : 'dark';
-  } else {
-    newTheme = currentTheme === 'light' ? 'dark' : 'light';
-  }
-  applyTheme(newTheme);
-  return newTheme;
-}
-
-/**
- * 应用主题色到 DOM
- * @param color 主题色
- */
-export function applyThemeColor(color: string): void {
-  if(document.documentElement) {
-    document.documentElement.style.setProperty('--color-primary', color);
-  }
-}
-
-/**
- * 从指定位置开始应用主题过渡效果
- * @param theme 新主题模式
- * @param x 点击位置的 x 坐标
- * @param y 点击位置的 y 坐标
- */
-export function applyThemeWithTransition(theme: ThemeMode, x: number, y: number): Promise<void> {
-  // 降级处理：不支持 View Transition
-  if(!(document as any).startViewTransition) {
-    applyTheme(theme);
-    return Promise.resolve();
-  }
-
-  return new Promise((resolve) => {
-    // 1. 确定扩散的圆心位置
-    const width = window.innerWidth;
-    const height = window.innerHeight;
-
-    // 始终以点击位置为圆心
-    const centerX = x;
-    const centerY = y;
-
-    // 2. 计算最大半径，确保圆能覆盖全屏
-    const radius = Math.hypot(
-      Math.max(centerX, width - centerX),
-      Math.max(centerY, height - centerY)
-    );
-
-    // 判断是否是切换到暗色模式（变暗）
-    const realTheme = getRealTheme(theme);
-    const isDark = realTheme === 'dark';
-
-    // 3. 注入样式
-    // 禁用默认动画
-    // 根据是变亮还是变暗，调整层级顺序
-    // 变亮(Light): New(Light) 在上，Old(Dark) 在下。New 从 0 变大。 (默认层级 New 在上，无需调整)
-    // 变暗(Dark): Old(Light) 在上，New(Dark) 在下。Old 从大变 0。 (需要调整层级 Old 在上)
-    const style = document.createElement('style');
-    style.innerHTML = `
-      ::view-transition-old(root),
-      ::view-transition-new(root) {
-        animation: none;
-        mix-blend-mode: normal;
-        display: block;
-      }
-      ${isDark ? `
-        ::view-transition-old(root) { z-index: 9999; }
-        ::view-transition-new(root) { z-index: 1; }
-      ` : ''}
-    `;
-    document.head.appendChild(style);
-
-    // 4. 开始 View Transition
-    const transition = (document as any).startViewTransition(() => {
-      applyTheme(theme);
-      resolve();
-    });
-
-    // 5. 自定义动画
-    transition.ready.then(() => {
-      const clipPath = [
-        `circle(0px at ${centerX}px ${centerY}px)`,
-        `circle(${radius}px at ${centerX}px ${centerY}px)`
-      ];
-
-      // 关键修复：添加 fill: 'forwards' 确保动画结束后保持状态，防止闪烁
-      const animationOptions: KeyframeAnimationOptions = {
-        duration: 500,
-        easing: 'ease-in-out',
-        fill: 'forwards'
-      };
-
-      if(isDark) {
-        // 变暗：Old(Light) 收缩
-        document.documentElement.animate(
-          {
-            clipPath: [...clipPath].reverse()
-          },
-          {
-            ...animationOptions,
-            pseudoElement: '::view-transition-old(root)'
-          }
-        );
-      } else {
-        // 变亮：New(Light) 扩散
-        document.documentElement.animate(
-          {
-            clipPath: clipPath
-          },
-          {
-            ...animationOptions,
-            pseudoElement: '::view-transition-new(root)'
-          }
-        );
-      }
-    });
-
-    // 6. 动画结束，清理样式
-    transition.finished.then(() => {
-      document.head.removeChild(style);
-    });
-  });
-}

package/tsconfig.json

@@ -1,28 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-    "allowSyntheticDefaultImports": true,
-
-    /* Bundler mode */
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": false,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "paths": {
-      "@/*": ["./src/*"]
-    },
-    "allowImportingTsExtensions": true
-  },
-  "include": ["src"]
-}

package/vite.config.ts

@@ -1,85 +0,0 @@
-/*
- * @Author: dushuai
- * @Date: 2025-04-28 00:00:05
- * @LastEditors: dushuai
- * @LastEditTime: 2026-02-01 02:07:30
- * @description: vite.config
- */
-import tailwindcss from '@tailwindcss/vite';
-import react from '@vitejs/plugin-react-swc';
-import { resolve } from 'path';
-import clear from 'rollup-plugin-clear';
-import { defineConfig } from 'vite';
-import dts from 'vite-plugin-dts';
-
-export default defineConfig({
-  plugins: [
-    clear({ targets: ['dist', 'bin', 'lib', 'es'], watch: true }),
-    dts({
-      entryRoot: resolve(__dirname, 'src'),
-      outDir: resolve(__dirname, 'lib/types')
-    }),
-    react(),
-    tailwindcss()
-  ],
-  resolve: {
-    alias: {
-      '@': resolve(__dirname, './src')
-    }
-  },
-  build: {
-    outDir: 'lib',
-    sourcemap: false,
-    lib: {
-      entry: 'src/index.ts',
-      name: '@spacego/fe-components',
-      fileName: 'index'
-    },
-    rollupOptions: {
-      external: [
-        'react',
-        'react-dom',
-        'react/jsx-runtime',
-        'react-router-dom',
-        'antd',
-        'axios',
-        'nprogress',
-        'react-icons',
-        'react-icons/fa6',
-        'react-icons/io5',
-        'react-icons/lu',
-        'react-icons/md',
-        'sass',
-        'zustand',
-        'zustand/middleware',
-        'tailwindcss',
-        '@ant-design/icons',
-        '@types/react',
-        '@spacego/turbo-utils',
-        '@spacego/hooks',
-        '@spacego/zustand'
-      ],
-      output: [
-        // 1. ESM 配置 (给 Vite/Webpack/现代浏览器)
-        {
-          format: 'es',
-          dir: resolve(__dirname, 'lib'),
-          preserveModules: true, // 保留目录结构，利于 Tree Shaking
-          preserveModulesRoot: 'src',
-          entryFileNames: '[name].js',
-          chunkFileNames: '[name].js'
-        }
-        // 2. CJS 配置 (给 Node.js/旧工具)
-        // {
-        //   format: 'cjs',
-        //   dir: resolve(__dirname, 'lib/cjs'),
-        //   preserveModules: true, // 同样保留结构，方便 Node.js 深层 require
-        //   preserveModulesRoot: 'src',
-        //   entryFileNames: '[name].cjs',
-        //   chunkFileNames: '[name].cjs',
-        //   exports: 'named' // 推荐：使用命名导出
-        // }
-      ]
-    }
-  }
-});