@qlover/create-app 0.3.2 → 0.3.4

package/templates/react-app/src/styles/css/themes/_default.css

@@ -0,0 +1,29 @@
+/* theme variables - for tailwind */
+@layer base {
+  :root {
+    /* 基础背景色 */
+    --color-bg-base: 255 255 255;
+    --color-bg-secondary: 241 245 249; /* slate-100 */
+    --color-bg-elevated: 248 250 252; /* slate-50 */
+
+    /* 文字颜色 */
+    --color-text-primary: 15 23 42; /* slate-900 */
+    --color-text-secondary: 71 85 105; /* slate-600 */
+    --color-text-tertiary: 100 116 139; /* slate-500 */
+
+    /* 边框颜色 */
+    --color-border: 226 232 240; /* slate-200 */
+
+    /* 品牌色 */
+    --color-brand: 37 99 235; /* blue-600 */
+    --color-brand-hover: 59 130 246; /* blue-500 */
+
+    /* 登录页特定样式 */
+    --login-card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    --login-input-bg: var(--fe-color-bg-container);
+    --login-input-border: var(--fe-color-border);
+    --login-button-text: rgb(255 255 255);
+    --login-social-button-bg: var(--fe-color-bg-container);
+    --login-social-button-border: var(--fe-color-border);
+  }
+}

package/templates/react-app/src/styles/css/themes/dark.css

@@ -0,0 +1,29 @@
+/* theme variables - for tailwind */
+@layer base {
+  [data-theme='dark'] {
+    /* 基础背景色 */
+    --color-bg-base: 15 23 42; /* slate-900 */
+    --color-bg-secondary: 30 41 59; /* slate-800 */
+    --color-bg-elevated: 51 65 85; /* slate-700 */
+
+    /* 文字颜色 */
+    --color-text-primary: 255 255 255;
+    --color-text-secondary: 148 163 184; /* slate-400 */
+    --color-text-tertiary: 100 116 139; /* slate-500 */
+
+    /* 边框颜色 */
+    --color-border: 51 65 85; /* slate-700 */
+
+    /* 品牌色 */
+    --color-brand: 37 99 235; /* blue-600 */
+    --color-brand-hover: 59 130 246; /* blue-500 */
+
+    /* 登录页特定样式 */
+    --login-card-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    --login-input-bg: var(--fe-color-bg-container);
+    --login-input-border: var(--fe-color-border);
+    --login-button-text: rgb(255 255 255);
+    --login-social-button-bg: var(--fe-color-bg-container);
+    --login-social-button-border: var(--fe-color-border);
+  }
+}

package/templates/react-app/src/styles/css/themes/index.css

@@ -0,0 +1,3 @@
+@import './_default.css';
+@import './dark.css';
+@import './pink.css';

package/templates/react-app/src/styles/css/themes/pink.css

@@ -0,0 +1,29 @@
+/* theme variables - for tailwind */
+@layer base {
+  [data-theme='pink'] {
+    /* 基础背景色 */
+    --color-bg-base: 255 241 242; /* rose-50 */
+    --color-bg-secondary: 255 228 230; /* rose-100 */
+    --color-bg-elevated: 254 205 211; /* rose-200 */
+
+    /* 文字颜色 */
+    --color-text-primary: 190 18 60; /* rose-700 */
+    --color-text-secondary: 225 29 72; /* rose-600 */
+    --color-text-tertiary: 244 63 94; /* rose-500 */
+
+    /* 边框颜色 */
+    --color-border: 254 205 211; /* rose-200 */
+
+    /* 品牌色 */
+    --color-brand: 225 29 72; /* rose-600 */
+    --color-brand-hover: 244 63 94; /* rose-500 */
+
+    /* 登录页特定样式 */
+    --login-card-shadow: 0 4px 12px rgba(244 63 94 / 0.15);
+    --login-input-bg: var(--ant-color-bg-container);
+    --login-input-border: var(--ant-color-border);
+    --login-button-text: rgb(255 255 255);
+    --login-social-button-bg: var(--ant-color-bg-container);
+    --login-social-button-border: var(--ant-color-border);
+  }
+}

package/templates/react-app/src/uikit/components/LanguageSwitcher.tsx

@@ -0,0 +1,56 @@
+import { Select } from 'antd';
+import { GlobalOutlined } from '@ant-design/icons';
+import { useNavigate, useParams } from 'react-router-dom';
+import i18nConfig from '@config/i18n';
+import { IOC } from '@/core/IOC';
+import { I18nService, I18nServiceLocale } from '@/base/services/I18nService';
+import { useCallback } from 'react';
+import { useSliceStore } from '@qlover/slice-store-react';
+
+const { supportedLngs } = i18nConfig;
+
+export default function LanguageSwitcher() {
+  const navigate = useNavigate();
+  const i18nService = IOC(I18nService);
+  const loading = useSliceStore(i18nService, i18nService.selector.loading);
+  const { lng } = useParams<{ lng: I18nServiceLocale }>();
+  const currentPath = window.location.pathname;
+
+  const languageOptions = supportedLngs.map((lang) => ({
+    key: lang,
+    value: lang,
+    label: (
+      <div className="flex items-center gap-2">
+        <GlobalOutlined />
+        <span>{lang.toUpperCase()}</span>
+      </div>
+    )
+  }));
+
+  const handleLanguageChange = useCallback(
+    async (newLang: I18nServiceLocale) => {
+      i18nService.changeLoading(true);
+      // Change i18n language
+      await i18nService.changeLanguage(newLang);
+      // Update URL path
+      const newPath = currentPath.replace(`/${lng}`, `/${newLang}`);
+      navigate(newPath);
+      i18nService.changeLoading(false);
+    },
+    [lng, currentPath, navigate, i18nService]
+  );
+
+  return (
+    <div className="flex items-center gap-2">
+      <Select
+        loading={loading}
+        disabled={loading}
+        value={lng}
+        onChange={handleLanguageChange}
+        options={languageOptions}
+        style={{ width: 100 }}
+        className="min-w-24 max-w-full"
+      />
+    </div>
+  );
+}

package/templates/react-app/src/uikit/components/Loading.tsx

@@ -1,3 +1,5 @@
+import clsx from 'clsx';
+
 /**
  * Loading component
  *
@@ -14,28 +16,32 @@
 export function Loading({ fullscreen = false }: { fullscreen?: boolean }) {
   return (
     <div
-      className={`flex justify-center items-center ${fullscreen ? 'fixed inset-0 bg-white bg-opacity-80 z-50' : 'relative'}`}
+      className={clsx('flex justify-center items-center', {
+        'fixed inset-0 backdrop-blur-sm z-50': fullscreen,
+        relative: !fullscreen
+      })}
+      style={{
+        backgroundColor: fullscreen
+          ? 'var(--fe-color-bg-container)'
+          : 'transparent'
+      }}
     >
-      <svg
-        className="animate-spin h-8 w-8 text-gray-500"
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <circle
-          className="opacity-25"
-          cx="12"
-          cy="12"
-          r="10"
-          stroke="currentColor"
-          strokeWidth="4"
-        ></circle>
-        <path
-          className="opacity-75"
-          fill="currentColor"
-          d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
-        ></path>
-      </svg>
+      <div className="flex space-x-3">
+        {[0, 1, 2].map((i) => (
+          <div
+            key={i}
+            className={clsx(
+              'w-3 h-3 rounded-full',
+              'bg-[var(--fe-color-primary)]',
+              'animate-[bounce_1s_ease-in-out_infinite]'
+            )}
+            style={{
+              animationDelay: `${i * 0.2}s`,
+              opacity: 0.6
+            }}
+          />
+        ))}
+      </div>
     </div>
   );
 }

package/templates/react-app/src/uikit/components/RouterRenderComponent.tsx

@@ -1,7 +1,7 @@
 import { Suspense } from 'react';
 import { Loading } from './Loading';
 import BaseRouteProvider from '@/uikit/providers/BaseRouteProvider';
-import { RouterLoaderRender } from '@/base/cases/router-loader';
+import { RouterLoaderRender } from '@/base/cases/RouterLoader';
 
 export const RouterRenderComponent: RouterLoaderRender = (route) => {
   const Component = route.element();

package/templates/react-app/src/uikit/components/ThemeSwitcher.tsx

@@ -2,6 +2,37 @@ import { IOC } from '@/core/IOC';
 import { ThemeService } from '@qlover/corekit-bridge';
 import { useSliceStore } from '@qlover/slice-store-react';
 import { useTranslation } from 'react-i18next';
+import { Select } from 'antd';
+import {
+  BulbOutlined,
+  BulbFilled,
+  HeartFilled,
+  HeartOutlined
+} from '@ant-design/icons';
+import clsx from 'clsx';
+import { useMemo } from 'react';
+import * as i18nKeys from '@config/Identifier.I18n';
+
+const colorMap: Record<
+  string,
+  { i18nkey: string; colors: string[]; icons: React.ElementType[] }
+> = {
+  default: {
+    i18nkey: i18nKeys.HEADER_THEME_DEFAULT,
+    colors: ['text-text', 'text-text-secondary'],
+    icons: [BulbFilled, BulbOutlined]
+  },
+  dark: {
+    i18nkey: i18nKeys.HEADER_THEME_DARK,
+    colors: ['text-[#9333ea]', 'text-[#a855f7]'],
+    icons: [BulbFilled, BulbOutlined]
+  },
+  pink: {
+    i18nkey: i18nKeys.HEADER_THEME_PINK,
+    colors: ['text-[#f472b6]', 'text-[#ec4899]'],
+    icons: [HeartFilled, HeartOutlined]
+  }
+};
 
 export default function ThemeSwitcher() {
   const themeService = IOC(ThemeService);
@@ -9,22 +40,41 @@ export default function ThemeSwitcher() {
   const themes = themeService.getSupportedThemes();
   const { t } = useTranslation('common');
 
+  const themeOptions = useMemo(() => {
+    return themes.map((themeName) => {
+      const { i18nkey, colors, icons } =
+        colorMap[themeName] || colorMap.default;
+      const [currentColor, normalColor] = colors;
+      const [CurrentIcon, NormalIcon] = icons;
+      const isSelf = theme === themeName;
+
+      return {
+        key: themeName + i18nkey,
+        value: themeName,
+        label: (
+          <div
+            className={clsx(
+              'flex items-center gap-2',
+              isSelf ? currentColor : normalColor
+            )}
+          >
+            {isSelf ? <CurrentIcon /> : <NormalIcon />}
+            <span>{t(i18nkey)}</span>
+          </div>
+        )
+      };
+    });
+  }, [theme, themes, t]);
+
   return (
     <div className="flex items-center gap-2">
-      <label className="text-black" htmlFor="theme-select">
-        {t('header.theme.label')}
-      </label>
-      <select
-        id="theme-select"
+      <Select
         value={theme}
-        onChange={(e) => themeService.changeTheme(e.target.value)}
-      >
-        {themes.map((theme) => (
-          <option key={theme} value={theme}>
-            {theme}
-          </option>
-        ))}
-      </select>
+        onChange={(value) => themeService.changeTheme(value)}
+        options={themeOptions}
+        style={{ width: 120 }}
+        className="min-w-40 max-w-full"
+      />
     </div>
   );
 }

package/templates/react-app/src/uikit/contexts/BaseRouteContext.ts

@@ -5,7 +5,7 @@ import { RouteMeta } from '@/base/types/Page';
 import { createContext } from 'react';
 import merge from 'lodash/merge';
 import i18nConfig from '@config/i18n';
-import { WITHIN_PAGE_PROVIDER } from '@config/ErrorIdentifier';
+import { WITHIN_PAGE_PROVIDER } from '@config/Identifier.Error';
 
 const { defaultNS } = i18nConfig;
 

package/templates/react-app/src/uikit/controllers/RouterController.ts

@@ -1,4 +1,4 @@
-import type { RouteConfigValue } from '@/base/cases/router-loader';
+import type { RouteConfigValue } from '@/base/cases/RouterLoader';
 import type { NavigateFunction, NavigateOptions } from 'react-router-dom';
 import type { UIDependenciesInterface } from '@/base/port/UIDependenciesInterface';
 import type { LoggerInterface } from '@qlover/logger';

package/templates/react-app/src/uikit/controllers/UserController.ts

@@ -9,8 +9,8 @@ import { inject, injectable } from 'inversify';
 import { IOCIdentifier } from '@/core/IOC';
 import { LoginInterface } from '@/base/port/LoginInterface';
 import { UserApi } from '@/base/apis/userApi/UserApi';
-import { AppError } from '@/base/cases/appError/AppError';
-import { LOCAL_NO_USER_TOKEN } from '@config/ErrorIdentifier';
+import { AppError } from '@/base/cases/AppError';
+import { LOCAL_NO_USER_TOKEN } from '@config/Identifier.Error';
 import { SliceStore } from '@qlover/slice-store-react';
 
 class UserControllerState {

package/templates/react-app/tailwind.config.js

@@ -1,18 +1,4 @@
-import root10px from './lib/tailwind/root10px';
-import themeCreate from './lib/tailwind/theme-generator';
-import themeConfig from './config/theme.json';
-
-const theme = themeCreate(themeConfig.override);
-
-/** @type {import('tailwindcss').Config} */
 export default {
   darkMode: 'class',
-  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
-  theme: {
-    extend: {
-      ...root10px.themes,
-      colors: theme.colors
-    }
-  },
-  plugins: [root10px.plugin, theme.plugin]
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}']
 };

package/templates/react-app/tsconfig.json

@@ -20,10 +20,11 @@
     "types": ["vite/client"],
     "paths": {
       "@/*": ["./src/*"],
-      "@config/*": ["./config/*"]
+      "@config/*": ["./config/*"],
+      "@lib/*": ["./lib/*"]
     },
     "experimentalDecorators": true
   },
-  "include": ["src"],
+  "include": ["src", "lib/**/*.tsx"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

package/templates/react-app/tsconfig.node.json

@@ -9,5 +9,6 @@
       "@config/*": ["./config/*"]
     }
   },
-  "include": ["vite.config.ts", "fe-prod", "config"]
+  "include": ["vite.config.ts", "config", "lib"],
+  "exclude": ["lib/**/*.tsx"]
 }

package/templates/react-app/vite.config.ts

@@ -1,15 +1,18 @@
 import { defineConfig } from 'vitest/config';
 import react from '@vitejs/plugin-react';
-import { envPrefix } from './config/common';
+import { envPrefix, overrideAntdThemeMode } from './config/common';
 import { name, version } from './package.json';
 import tsconfigPaths from 'vite-tsconfig-paths';
 import envConfig from '@qlover/corekit-bridge/vite-env-config/index';
-import ts2Locales from '@qlover/corekit-bridge/vite-ts-to-locales/index';
+import ts2Locales from '@brain-toolkit/ts2locales/vite';
 import i18nConfig from './config/i18n';
+import tailwindcss from '@tailwindcss/vite';
+import viteDeprecatedAntd from '@brain-toolkit/antd-theme-override/vite';
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
+    tailwindcss(),
     envConfig({
       envPops: true,
       envPrefix,
@@ -24,10 +27,19 @@ export default defineConfig({
       locales: i18nConfig.supportedLngs as unknown as string[],
       options: [
         {
-          source: './config/ErrorIdentifier.ts',
+          source: './config/Identifier.Error.ts',
+          target: './public/locales/{{lng}}/common.json'
+        },
+        {
+          source: './config/Identifier.I18n.ts',
           target: './public/locales/{{lng}}/common.json'
         }
       ]
+    }),
+    viteDeprecatedAntd({
+      mode: overrideAntdThemeMode,
+      overriedCssFilePath: './src/styles/css/antd-themes/no-context.css',
+      targetPath: './src/base/types/deprecated-antd.d.ts'
     })
   ],
   envPrefix: envPrefix,

package/templates/react-app/lib/tailwind/root10px.js

@@ -1,178 +0,0 @@
-import plugin from 'tailwindcss/plugin';
-
-/**
- * Tailwind CSS 配置 - 10px 根字体大小
- *
- * 注意事项：
- * 1. 所有的 rem 值都基于 10px 计算
- * 2. 16px = 1.6rem
- * 3. spacing 中的值需要乘以 1.6 来保持与原来的单位一致
- *
- * 由于移动端开发需求，方便计算，重置像素 10px, 将默认 16px 变成 10px
- *
- * 但是 tailwind 中的单位间距都是有个 rem 做单位， 16px 变成 10px 基数改变, 需要在原来不变像素上用 10px 基数重写一遍
- *
- * @see https://redpixelthemes.com/blog/change-tailwindcss-base-font-size/
- * @type {import('tailwindcss').Config['theme']}
- *
- * @example
- * // 使用示例
- * text-base -> 1.6rem -> 16px
- * p-4 -> 1.6rem -> 16px
- * w-40 -> 16rem -> 160px
- */
-const root10pxThemes = {
-  lineHeight: {
-    3: '1.2rem',
-    4: '1.6rem',
-    5: '2.0rem',
-    6: '2.4rem',
-    7: '2.8rem',
-    8: '3.2rem',
-    9: '3.6rem',
-    10: '4.0rem',
-    none: 1,
-    tight: 1.25,
-    snug: 1.375,
-    normal: 1.5,
-    relaxed: 1.625,
-    loose: 2
-  },
-  maxWidth: {
-    xs: '32.0rem',
-    sm: '38.4rem',
-    md: '44.8rem',
-    lg: '51.2rem',
-    xl: '57.6rem',
-    '2xl': '67.2rem',
-    '3xl': '76.8rem',
-    '4xl': '89.6rem',
-    '5xl': '102.4rem',
-    '6xl': '115.2rem',
-    '7xl': '128.0rem'
-  },
-
-  //
-  // 为了兼容之前的写法，在10的倍数上以 16px 作为基准单位计算
-  // 默认是以 4的倍数作为基数计算间距，但是由于 html font-size 变为了 10px
-  // 现在版本从之前的16px -> 10px 整体缩小，所以，这里需要手动将间距放大，去适应以前的环境
-  // TODO： 后期将所有间距调整为基准值， 不使用放大值
-
-  /**
-   * 因为之前版本 root size 为默认 16px,  tailwind 默认就以 16px 为基准设置 spacing
-   *
-   * 而现在版本 root size 为 10px, 为了兼容以前代码, 将所有 spacing 重写
-   *
-   * @see https://tailwindcss.com/docs/customizing-spacing#default-spacing-scale
-   *
-   * 例如：
-   *   以前版本 1 -> 4px -> 0.25rem， 而现在 1 -> 4px -> 0.1rem
-   *   以前版本 4 -> 16px -> 1rem 而现在 4 -> 16px -> 1.6rem
-   *
-   * 注意只是 spaceing 使用这规则，也就是将默认的 px 间距用 10 重新换算一遍，间距并未改变
-   */
-  spacing: {
-    0.5: '0.2rem',
-    1: '0.4rem',
-    1.5: '0.6rem',
-    2: '0.8rem',
-    2.5: '1rem',
-    3: '1.2rem',
-    3.5: '1.4rem',
-    4: '1.6rem',
-    5: '2rem',
-    6: '2.4rem',
-    7: '2.8rem',
-    8: '3.2rem',
-    9: '3.6rem',
-    10: '4rem',
-    11: '4.4rem',
-    12: '4.8rem',
-    14: '5.6rem',
-    16: '6.4rem',
-    20: '8rem',
-    24: '9.6rem',
-    28: '11.2rem',
-    32: '12.8rem',
-    36: '14.4rem',
-    40: '16rem',
-    44: '17.6rem',
-    48: '19.2rem',
-    52: '20.8rem',
-    56: '22.4rem',
-    60: '24rem',
-    64: '25.6rem',
-    72: '28.8rem',
-    80: '32rem',
-    96: '38.4rem'
-  },
-
-  /**
-   * 字体对应 font-size 和 line-height
-   *
-   * @see https://tailwindcss.com/docs/font-size
-   */
-  fontSize: {
-    xxs: ['2rem', '1.2rem'],
-    xs: ['1.2rem', '1.6rem'],
-    sm: ['1.4rem', '2rem'],
-    base: ['1.6rem', '2.4rem'],
-    lg: ['1.8rem', '2.8rem'],
-    xl: ['2rem', '2.8rem'],
-    '2xl': ['2.4rem', '3.2rem'],
-    '3xl': ['3rem', '3.6rem'],
-    '4xl': ['3.6rem', '4rem'],
-    '5xl': ['4.8rem', 1],
-    '6xl': ['6rem', 1],
-    '7xl': ['7.2rem', 1],
-    '8xl': ['9.6rem', 1],
-    '9xl': ['12.8rem', 1],
-    12: ['1.2rem'],
-    14: ['1.4rem'],
-    16: ['1.6rem'],
-    18: ['1.8rem'],
-    20: ['2rem'],
-    22: ['2.2rem'],
-    24: ['2.4rem'],
-    26: ['2.6rem'],
-    32: ['3.2rem'],
-    34: ['3.4rem'],
-    36: ['3.6rem'],
-    40: ['4rem'],
-    46: ['4.6rem'],
-    50: ['5rem'],
-    54: ['5.4rem'],
-    60: ['6rem'],
-    70: ['7rem'],
-    80: ['8rem'],
-    90: ['9rem'],
-    100: ['10rem']
-  },
-
-  screens: {
-    /** @media (min-width: 375px) { ... } */
-    xs: '375px',
-    /** @media (min-width: 640px) { ... } */
-    sm: '640px',
-    /** @media (min-width: 768px) { ... } */
-    md: '768px',
-    /** @media (min-width: 1024px) { ... } */
-    lg: '1024px',
-    /** @media (min-width: 1280px) { ... } */
-    xl: '1280px',
-    /** @media (min-width: 1536px) { ... } */
-    '2xl': '1536px',
-    /** @media (min-width: 1640px) { ... } */
-    '3xl': '1640px',
-    /** @media (min-width: 1920px) { ... } */
-    maxxl: '1920px'
-  }
-};
-
-const root10pxPlugin = plugin(({ addBase }) => {
-  addBase({
-    html: { fontSize: '10px' }
-  });
-});
-
-export default { themes: root10pxThemes, plugin: root10pxPlugin };