@qlover/create-app 0.3.2 → 0.3.3

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

@@ -0,0 +1,154 @@
+/* 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 */
+  }
+}
+
+/* custom variables - for antd and custom css */
+[data-theme='dark'],
+[data-theme='dark'] .fe-theme {
+  /* Antd 主色调相关变量 - 紫色主题 */
+  --fe-color-primary: #9333ea; /* purple-600 */
+  --fe-color-primary-hover: #a855f7; /* purple-500 */
+  --fe-color-primary-active: #7e22ce; /* purple-700 */
+  --fe-color-primary-bg: rgba(147, 51, 234, 0.1); /* purple-600 with 0.1 opacity */
+  --fe-color-primary-border: #9333ea; /* purple-600 */
+  --fe-color-primary-text: #a855f7; /* purple-500 - 文字用亮一点的紫色 */
+  --fe-color-primary-text-hover: #c084fc; /* purple-400 */
+  --fe-color-primary-text-active: #9333ea; /* purple-600 */
+  --fe-color-primary-deprecated-bg: #9333ea; /* purple-600 */
+  --fe-color-primary-deprecated-border: #9333ea; /* purple-600 */
+  
+  /* Antd 基础变量 */
+  --fe-color-bg-container: rgb(30 41 59);
+  --fe-color-bg-elevated: rgb(51 65 85);
+  --fe-color-text: rgba(255, 255, 255, 0.85);
+  --fe-color-text-secondary: rgba(255, 255, 255, 0.45);
+  --fe-color-text-tertiary: rgba(255, 255, 255, 0.35);
+  --fe-color-text-quaternary: rgba(255, 255, 255, 0.15);
+  --fe-color-text-placeholder: rgba(255, 255, 255, 0.25);
+  --fe-color-border: rgb(51 65 85);
+
+  /* Antd Input 组件变量 */
+  &.ant-input-css-var {
+    /* Input 交互状态 */
+    --fe-input-hover-border-color: #4096ff;
+    --fe-input-active-border-color: #1677ff;
+    --fe-input-active-shadow: 0 0 0 2px rgba(5, 145, 255, 0.2);
+    --fe-input-hover-bg: rgb(51 65 85);
+    --fe-input-active-bg: rgb(51 65 85);
+    --fe-input-addon-bg: rgba(255, 255, 255, 0.02);
+  }
+
+  /* 登录页特定样式 */
+  --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);
+
+  /* Antd Button 组件变量 */
+  &.ant-btn {
+    /* 紫色主题 */
+    --fe-button-primary-color: #fff;
+    --fe-button-primary-bg: #8b5cf6; /* violet-500 */
+    --fe-button-primary-hover-bg: #7c3aed; /* violet-600 */
+    --fe-button-primary-active-bg: #6d28d9; /* violet-700 */
+    --fe-button-primary-shadow: 0 2px 0 rgba(109, 40, 217, 0.2);
+
+    /* 默认按钮 */
+    --fe-button-default-color: rgba(255, 255, 255, 0.85);
+    --fe-button-default-bg: rgb(30 41 59); /* slate-800 */
+    --fe-button-default-border-color: rgb(51 65 85); /* slate-700 */
+    --fe-button-default-hover-bg: rgb(30 41 59);
+    --fe-button-default-hover-color: #8b5cf6;
+    --fe-button-default-hover-border-color: #8b5cf6;
+    --fe-button-default-active-bg: rgb(30 41 59);
+    --fe-button-default-active-color: #6d28d9;
+    --fe-button-default-active-border-color: #6d28d9;
+    --fe-button-default-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
+
+    /* 其他状态 */
+    --fe-button-text-hover-bg: rgba(255, 255, 255, 0.08);
+    --fe-button-border-color-disabled: rgb(51 65 85);
+  }
+
+  /* Antd 图标相关变量 */
+  --fe-color-icon: rgba(255, 255, 255, 0.45); /* 暗色主题下的图标颜色 */
+  --fe-color-icon-hover: rgba(255, 255, 255, 0.85); /* 暗色主题下图标悬停颜色 */
+  --fe-color-icon-active: var(--fe-color-primary); /* 使用主题紫色 */
+  --fe-color-icon-disabled: rgba(255, 255, 255, 0.25); /* 暗色主题下禁用状态 */
+
+  /* Antd Select 组件变量 */
+  &.ant-select-css-var {
+    --fe-select-internal_fixed_item_margin: 2px;
+    --fe-select-z-index-popup: 1050;
+    --fe-select-option-selected-color: rgba(255, 255, 255, 0.88);
+    --fe-select-option-selected-font-weight: 600;
+    --fe-select-option-selected-bg: var(--fe-color-primary-bg);
+    --fe-select-option-active-bg: rgba(255, 255, 255, 0.08);
+    --fe-select-option-padding: 5px 12px;
+    --fe-select-option-font-size: 14px;
+    --fe-select-option-line-height: 1.5714285714285714;
+    --fe-select-option-height: 32px;
+    --fe-select-selector-bg: var(--fe-color-bg-container);
+    --fe-select-clear-bg: var(--fe-color-bg-container);
+    --fe-select-single-item-height-lg: 40px;
+    --fe-select-multiple-item-bg: rgba(255, 255, 255, 0.08);
+    --fe-select-multiple-item-border-color: transparent;
+    --fe-select-multiple-item-height: 24px;
+    --fe-select-multiple-item-height-sm: 16px;
+    --fe-select-multiple-item-height-lg: 32px;
+    --fe-select-multiple-selector-bg-disabled: rgba(255, 255, 255, 0.08);
+    --fe-select-multiple-item-color-disabled: rgba(255, 255, 255, 0.25);
+    --fe-select-multiple-item-border-color-disabled: transparent;
+    --fe-select-show-arrow-padding-inline-end: 18px;
+    --fe-select-hover-border-color: var(--fe-color-primary);
+    --fe-select-active-border-color: var(--fe-color-primary-active);
+    --fe-select-active-outline-color: var(--fe-color-primary-bg);
+    --fe-select-select-affix-padding: 4px;
+  }
+
+  /* Antd Tag 组件变量 */
+  &.ant-tag-css-var {
+    --fe-tag-default-bg: var(--fe-color-bg-container);
+    --fe-tag-default-color: var(--fe-color-text);
+    --fe-tag-default-border-color: var(--fe-color-border);
+    --fe-tag-font-size: 12px;
+    --fe-tag-line-height: 20px;
+    --fe-tag-height: 22px;
+    --fe-tag-padding-horizontal: 7px;
+    --fe-tag-margin: 0 8px 0 0;
+    --fe-tag-border-radius: 4px;
+  }
+
+  /* Antd Progress 组件变量 */
+  &.ant-progress-css-var {
+    --fe-progress-default-color: var(--fe-color-primary);
+    --fe-progress-remaining-color: var(--fe-color-bg-elevated);
+    --fe-progress-text-color: var(--fe-color-text);
+    --fe-progress-line-font-size: 14px;
+    --fe-progress-circle-font-size: 14px;
+    --fe-progress-circle-text-color: var(--fe-color-text);
+    --fe-progress-circle-trail-color: var(--fe-color-bg-elevated);
+    --fe-progress-circle-stroke-width: 6px;
+    --fe-progress-line-stroke-width: 8px;
+  }
+}

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,160 @@
+/* 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 */
+  }
+}
+
+/* custom variables - for antd and custom css */
+[data-theme='pink'],
+[data-theme='pink'] .fe-theme {
+  /* Antd 主色调相关变量 - 玫瑰色主题 */
+  --fe-color-primary: #f472b6; /* pink-400 */
+  --fe-color-primary-hover: #ec4899; /* pink-500 */
+  --fe-color-primary-active: #db2777; /* pink-600 */
+  --fe-color-primary-bg: rgba(244, 114, 182, 0.1); /* pink-400 with 0.1 opacity */
+  --fe-color-primary-border: #f472b6; /* pink-400 */
+  --fe-color-primary-text: #f472b6; /* pink-400 */
+  --fe-color-primary-text-hover: #ec4899; /* pink-500 */
+  --fe-color-primary-text-active: #db2777; /* pink-600 */
+  --fe-color-primary-deprecated-bg: #f472b6; /* pink-400 */
+  --fe-color-primary-deprecated-border: #f472b6; /* pink-400 */
+  
+  /* Antd 基础变量 */
+  --ant-color-bg-container: rgb(255 241 242);
+  --ant-color-bg-elevated: rgb(254 205 211);
+  --ant-color-text: rgba(190 18 60 / 0.85);
+  --ant-color-text-secondary: rgba(190 18 60 / 0.45);
+  --ant-color-text-tertiary: rgba(190 18 60 / 0.35);
+  --ant-color-text-quaternary: rgba(190 18 60 / 0.15);
+  --ant-color-text-placeholder: rgba(190 18 60 / 0.25);
+  --ant-color-border: rgb(254 205 211);
+
+  /* Antd Input 组件变量 */
+  &.ant-input-css-var {
+    /* Input 背景色 */
+    --fe-input-bg: var(--ant-color-bg-container);
+    --fe-input-hover-bg: var(--ant-color-bg-elevated);
+    --fe-input-active-bg: var(--ant-color-bg-elevated);
+    --fe-input-addon-bg: rgba(190 18 60, 0.02);
+
+    /* Input 边框颜色 */
+    --fe-input-border-color: var(--ant-color-border);
+    --fe-input-hover-border-color: rgb(var(--color-brand));
+    --fe-input-active-border-color: rgb(var(--color-brand));
+
+    /* Input 阴影效果 */
+    --fe-input-active-shadow: 0 0 0 2px rgba(var(--color-brand), 0.1);
+  }
+
+  /* 登录页特定样式 */
+  --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);
+
+  /* Antd Button 组件变量 */
+  &.ant-btn {
+    /* 玫瑰色主题 */
+    --fe-button-primary-color: #fff;
+    --fe-button-primary-bg: #f472b6; /* pink-400 */
+    --fe-button-primary-hover-bg: #ec4899; /* pink-500 */
+    --fe-button-primary-active-bg: #db2777; /* pink-600 */
+    --fe-button-primary-shadow: 0 2px 0 rgba(219, 39, 119, 0.15);
+
+    /* 默认按钮 */
+    --fe-button-default-color: rgb(190 18 60);
+    --fe-button-default-bg: rgb(255 241 242);
+    --fe-button-default-border-color: rgb(254 205 211);
+    --fe-button-default-hover-bg: rgb(255 241 242);
+    --fe-button-default-hover-color: #f472b6;
+    --fe-button-default-hover-border-color: #f472b6;
+    --fe-button-default-active-bg: rgb(255 241 242);
+    --fe-button-default-active-color: #db2777;
+    --fe-button-default-active-border-color: #db2777;
+    --fe-button-default-shadow: 0 2px 0 rgba(244, 114, 182, 0.1);
+
+    /* 其他状态 */
+    --fe-button-text-hover-bg: rgba(244, 114, 182, 0.08);
+    --fe-button-border-color-disabled: rgb(254 205 211);
+  }
+
+  /* Antd 图标相关变量 */
+  --fe-color-icon: rgba(190, 18, 60, 0.45); /* 粉色主题下的图标颜色 */
+  --fe-color-icon-hover: rgba(190, 18, 60, 0.85); /* 粉色主题下图标悬停颜色 */
+  --fe-color-icon-active: var(--fe-color-primary); /* 使用主题粉色 */
+  --fe-color-icon-disabled: rgba(190, 18, 60, 0.25); /* 粉色主题下禁用状态 */
+
+  /* Antd Select 组件变量 */
+  &.ant-select-css-var {
+    --fe-select-internal_fixed_item_margin: 2px;
+    --fe-select-z-index-popup: 1050;
+    --fe-select-option-selected-color: rgba(190, 18, 60, 0.88);
+    --fe-select-option-selected-font-weight: 600;
+    --fe-select-option-selected-bg: var(--fe-color-primary-bg);
+    --fe-select-option-active-bg: rgba(190, 18, 60, 0.04);
+    --fe-select-option-padding: 5px 12px;
+    --fe-select-option-font-size: 14px;
+    --fe-select-option-line-height: 1.5714285714285714;
+    --fe-select-option-height: 32px;
+    --fe-select-selector-bg: var(--fe-color-bg-container);
+    --fe-select-clear-bg: var(--fe-color-bg-container);
+    --fe-select-single-item-height-lg: 40px;
+    --fe-select-multiple-item-bg: rgba(190, 18, 60, 0.06);
+    --fe-select-multiple-item-border-color: transparent;
+    --fe-select-multiple-item-height: 24px;
+    --fe-select-multiple-item-height-sm: 16px;
+    --fe-select-multiple-item-height-lg: 32px;
+    --fe-select-multiple-selector-bg-disabled: rgba(190, 18, 60, 0.04);
+    --fe-select-multiple-item-color-disabled: rgba(190, 18, 60, 0.25);
+    --fe-select-multiple-item-border-color-disabled: transparent;
+    --fe-select-show-arrow-padding-inline-end: 18px;
+    --fe-select-hover-border-color: var(--fe-color-primary);
+    --fe-select-active-border-color: var(--fe-color-primary-active);
+    --fe-select-active-outline-color: var(--fe-color-primary-bg);
+    --fe-select-select-affix-padding: 4px;
+  }
+
+  /* Antd Tag 组件变量 */
+  &.ant-tag-css-var {
+    --fe-tag-default-bg: var(--fe-color-bg-container);
+    --fe-tag-default-color: var(--fe-color-text);
+    --fe-tag-default-border-color: var(--fe-color-border);
+    --fe-tag-font-size: 12px;
+    --fe-tag-line-height: 20px;
+    --fe-tag-height: 22px;
+    --fe-tag-padding-horizontal: 7px;
+    --fe-tag-margin: 0 8px 0 0;
+    --fe-tag-border-radius: 4px;
+  }
+
+  /* Antd Progress 组件变量 */
+  &.ant-progress-css-var {
+    --fe-progress-default-color: var(--fe-color-primary);
+    --fe-progress-remaining-color: var(--fe-color-bg-elevated);
+    --fe-progress-text-color: var(--fe-color-text);
+    --fe-progress-line-font-size: 14px;
+    --fe-progress-circle-font-size: 14px;
+    --fe-progress-circle-text-color: var(--fe-color-text);
+    --fe-progress-circle-trail-color: var(--fe-color-bg-elevated);
+    --fe-progress-circle-stroke-width: 6px;
+    --fe-progress-line-stroke-width: 8px;
+  }
+}

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/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/UserController.ts

@@ -10,7 +10,7 @@ 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 { 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/vite.config.ts

@@ -6,10 +6,12 @@ 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 i18nConfig from './config/i18n';
+import tailwindcss from '@tailwindcss/vite';
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
+    tailwindcss(),
     envConfig({
       envPops: true,
       envPrefix,
@@ -24,7 +26,11 @@ 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'
         }
       ]