@qlover/create-app 0.3.1 → 0.3.3

package/templates/react-app/src/pages/base/Request.tsx

@@ -4,6 +4,9 @@ import { JSONStorageController } from '@/uikit/controllers/JSONStorageController
 import { RequestController } from '@/uikit/controllers/RequestController';
 import { useMemo } from 'react';
 import { useSliceStore } from '@qlover/slice-store-react';
+import { Button } from 'antd';
+import { LoadingOutlined } from '@ant-design/icons';
+import * as i18nKeys from '@config/Identifier.I18n';
 
 function JSONValue({ value }: { value: unknown }) {
   const output = useMemo(() => {
@@ -14,7 +17,7 @@ function JSONValue({ value }: { value: unknown }) {
     }
   }, [value]);
   return (
-    <pre className="mt-1 text-sm text-gray-600 font-mono bg-gray-50 p-2 rounded overflow-x-auto">
+    <pre className="mt-1 text-sm text-text-secondary font-mono bg-secondary p-2 rounded overflow-x-auto">
       {output}
     </pre>
   );
@@ -27,72 +30,48 @@ export default function Request() {
   const { t } = useBaseRoutePage();
 
   return (
-    <div className="min-h-screen bg-gray-50 py-8 px-4 sm:px-6 lg:px-8">
+    <div className="min-h-screen bg-primary py-8 px-4 sm:px-6 lg:px-8">
       <div className="max-w-4xl mx-auto space-y-6">
         {/* Request Timeout Information */}
-        <div className="bg-white shadow sm:rounded-lg p-6 border border-gray-200">
-          <h2 className="text-lg font-medium text-gray-900 mb-2">
-            {t('requestTimeout')}
+        <div className="bg-secondary shadow sm:rounded-lg p-6 border border-primary">
+          <h2 className="text-lg font-medium text-text mb-2">
+            {t(i18nKeys.PAGE_REQUEST_TIMEOUT)}
           </h2>
-          <div className="text-sm text-gray-600 font-mono bg-gray-50 p-2 rounded">
+          <div className="text-sm text-text-secondary font-mono bg-base p-2 rounded">
             {jsonStorageControllerState.requestTimeout}
           </div>
         </div>
 
         {/* Hello Request Card */}
-        <div className="bg-white shadow sm:rounded-lg p-6 border border-gray-200">
-          <h2 className="text-lg font-medium text-gray-900 mb-4">
-            AI API: Hello
+        <div className="bg-secondary shadow sm:rounded-lg p-6 border border-primary hover:bg-elevated transition-colors duration-200">
+          <h2 className="text-lg font-medium text-text mb-4">
+            {t(i18nKeys.PAGE_REQUEST_HELLO_TITLE)}
           </h2>
 
-          <p className="text-sm text-gray-600 mb-4">
-            函数式 api, 使用了 FetchURLPlugin, RequestCommonPlugin,
-            ApiMockPlugin, RequestLogger 插件
+          <p className="text-sm text-text-secondary mb-4">
+            {t(i18nKeys.PAGE_REQUEST_HELLO_DESCRIPTION)}
           </p>
-          <button
-            className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
+          <Button
+            type="primary"
             onClick={requestController.onHello}
+            loading={requestControllerState.helloState.loading}
           >
-            {requestControllerState.helloState.loading ? (
-              <>
-                <svg
-                  className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
-                  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-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                  ></path>
-                </svg>
-                {t('loading')}
-              </>
-            ) : (
-              'Hello'
-            )}
-          </button>
+            {requestControllerState.helloState.loading
+              ? t(i18nKeys.REQUEST_LOADING)
+              : t(i18nKeys.PAGE_REQUEST_HELLO_BUTTON)}
+          </Button>
 
           <div className="mt-4 space-y-2">
             <div>
-              <p className="text-sm font-medium text-gray-700">
-                {t('helloResult')}:
+              <p className="text-sm font-medium text-text">
+                {t(i18nKeys.REQUEST_HELLO_RESULT)}:
               </p>
               <JSONValue value={requestControllerState.helloState.result} />
             </div>
 
             <div>
-              <p className="text-sm font-medium text-gray-700">
-                {t('helloError')}:
+              <p className="text-sm font-medium text-text">
+                {t(i18nKeys.REQUEST_HELLO_ERROR)}:
               </p>
               <JSONValue value={requestControllerState.helloState.error} />
             </div>
@@ -100,105 +79,54 @@ export default function Request() {
         </div>
 
         {/* IP Information Card */}
-        <div className="bg-white shadow sm:rounded-lg p-6 border border-gray-200">
-          <h2 className="text-lg font-medium text-gray-900 mb-4">
-            FeApi: IP Information
+        <div className="bg-secondary shadow sm:rounded-lg p-6 border border-primary hover:bg-elevated transition-colors duration-200">
+          <h2 className="text-lg font-medium text-text mb-4">
+            {t(i18nKeys.PAGE_REQUEST_IP_INFO_TITLE)}
           </h2>
 
-          <p className="text-sm text-gray-600 mb-4">
-            RequestScheduler 类式 api, 使用了 FetchURLPlugin,
-            RequestCommonPlugin, RequestLogger, ApiPickDataPlugin 插件, 其中
-            ApiPickDataPlugin 插件可以将返回类型统一扁平到 data 字段
+          <p className="text-sm text-text-secondary mb-4">
+            {t(i18nKeys.PAGE_REQUEST_IP_INFO_DESCRIPTION)}
           </p>
-          <button
-            className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
+          <Button
+            type="primary"
             onClick={requestController.onIpInfo}
+            loading={requestControllerState.ipInfoState.loading}
           >
-            {requestControllerState.ipInfoState.loading ? (
-              <>
-                <svg
-                  className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
-                  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-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                  ></path>
-                </svg>
-                {t('loading')}
-              </>
-            ) : (
-              t('ipInfo')
-            )}
-          </button>
+            {requestControllerState.ipInfoState.loading
+              ? t(i18nKeys.REQUEST_LOADING)
+              : t(i18nKeys.REQUEST_IP_INFO)}
+          </Button>
 
           <div className="mt-4">
-            <p className="text-sm font-medium text-gray-700">
-              {t('ipInfoResult')}:
+            <p className="text-sm font-medium text-text">
+              {t(i18nKeys.REQUEST_IP_INFO_RESULT)}:
             </p>
             <JSONValue value={requestControllerState.ipInfoState.result} />
           </div>
         </div>
 
         {/* Random User Card */}
-        <div className="bg-white shadow sm:rounded-lg p-6 border border-gray-200">
-          <h2 className="text-lg font-medium text-gray-900 mb-4">
-            UserApi:Random User
+        <div className="bg-secondary shadow sm:rounded-lg p-6 border border-primary hover:bg-elevated transition-colors duration-200">
+          <h2 className="text-lg font-medium text-text mb-4">
+            {t(i18nKeys.PAGE_REQUEST_RANDOM_USER_TITLE)}
           </h2>
-          <p className="text-sm text-gray-600 mb-4">
-            RequestTransaction 类式 api, 使用了 FetchURLPlugin,
-            RequestCommonPlugin, ApiMockPlugin, FetchAbortPlugin,
-            RequestLogger,ApiCatchPlugin 插件, 其中 FetchAbortPlugin 可以
-            中止请求, ApiCatchPlugin 可以将捕获的错误统一到 apiCatchResult 字段
+          <p className="text-sm text-text-secondary mb-4">
+            {t(i18nKeys.PAGE_REQUEST_RANDOM_USER_DESCRIPTION)}
           </p>
-          <button
-            className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
+          <Button
+            type="primary"
             onClick={requestController.onRandomUser}
+            loading={requestControllerState.randomUserState.loading}
           >
-            {requestControllerState.randomUserState.loading ? (
-              <>
-                <svg
-                  className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
-                  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-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                  ></path>
-                </svg>
-                {t('loading')}
-              </>
-            ) : (
-              t('randomUser')
-            )}
-          </button>
+            {requestControllerState.randomUserState.loading
+              ? t(i18nKeys.REQUEST_LOADING)
+              : t(i18nKeys.REQUEST_RANDOM_USER)}
+          </Button>
 
           <div className="mt-4 space-y-2">
             <div>
-              <p className="text-sm font-medium text-gray-700">
-                {t('randomUserResult')}:
+              <p className="text-sm font-medium text-text">
+                {t(i18nKeys.REQUEST_RANDOM_USER_RESULT)}:
               </p>
               <JSONValue
                 value={requestControllerState.randomUserState.result}
@@ -206,8 +134,8 @@ export default function Request() {
             </div>
 
             <div>
-              <p className="text-sm font-medium text-gray-700">
-                {t('randomUserError')}:
+              <p className="text-sm font-medium text-text">
+                {t(i18nKeys.REQUEST_RANDOM_USER_ERROR)}:
               </p>
               <JSONValue value={requestControllerState.randomUserState.error} />
             </div>
@@ -215,51 +143,29 @@ export default function Request() {
         </div>
 
         {/* Api catch result */}
-        <div className="bg-white shadow sm:rounded-lg p-6 border border-gray-200">
-          <h2 className="text-lg font-medium text-gray-900 mb-4">
-            UserApi: Api Catch Result
+        <div className="bg-secondary shadow sm:rounded-lg p-6 border border-primary hover:bg-elevated transition-colors duration-200">
+          <h2 className="text-lg font-medium text-text mb-4">
+            {t(i18nKeys.PAGE_REQUEST_API_CATCH_TITLE)}
           </h2>
-          <button
-            className={`inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors ${
+          <Button
+            type={
               requestControllerState.apiCatchResultState.loading
-                ? 'bg-red-600 hover:bg-red-700'
-                : 'bg-blue-600 hover:bg-blue-700'
-            }`}
+                ? 'primary'
+                : 'primary'
+            }
+            danger={requestControllerState.apiCatchResultState.loading}
             onClick={requestController.onTriggerApiCatchResult}
+            loading={requestControllerState.apiCatchResultState.loading}
           >
-            {requestControllerState.apiCatchResultState.loading ? (
-              <>
-                <svg
-                  className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
-                  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-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                  ></path>
-                </svg>
-                {t('stopApiCatchResult')}
-              </>
-            ) : (
-              t('triggerApiCatchResult')
-            )}
-          </button>
+            {requestControllerState.apiCatchResultState.loading
+              ? t(i18nKeys.PAGE_REQUEST_STOP_API_CATCH)
+              : t(i18nKeys.PAGE_REQUEST_TRIGGER_API_CATCH)}
+          </Button>
 
           <div className="mt-4 space-y-2">
             <div>
-              <p className="text-sm font-medium text-gray-700">
-                {t('abortRequestResult')}:
+              <p className="text-sm font-medium text-text">
+                {t(i18nKeys.REQUEST_ABORT_RESULT)}:
               </p>
               <JSONValue
                 value={requestControllerState.apiCatchResultState.result}
@@ -267,8 +173,8 @@ export default function Request() {
             </div>
 
             <div>
-              <p className="text-sm font-medium text-gray-700">
-                {t('abortRequestError')}:
+              <p className="text-sm font-medium text-text">
+                {t(i18nKeys.REQUEST_ABORT_ERROR)}:
               </p>
               <JSONValue
                 value={requestControllerState.apiCatchResultState.error}
@@ -278,58 +184,34 @@ export default function Request() {
         </div>
 
         {/* Abort Request Card */}
-        <div className="bg-white shadow sm:rounded-lg p-6 border border-gray-200">
-          <h2 className="text-lg font-medium text-gray-900 mb-4">
-            UserApi: Abort Request
+        <div className="bg-secondary shadow sm:rounded-lg p-6 border border-primary hover:bg-elevated transition-colors duration-200">
+          <h2 className="text-lg font-medium text-text mb-4">
+            {t(i18nKeys.PAGE_REQUEST_ABORT_TITLE)}
           </h2>
-          <button
-            className={`inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors ${
-              requestControllerState.abortState.loading
-                ? 'bg-red-600 hover:bg-red-700'
-                : 'bg-blue-600 hover:bg-blue-700'
-            }`}
+          <Button
+            type={
+              requestControllerState.abortState.loading ? 'primary' : 'primary'
+            }
+            danger={requestControllerState.abortState.loading}
             onClick={requestController.onTriggerAbortRequest}
           >
-            {requestControllerState.abortState.loading ? (
-              <>
-                <svg
-                  className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
-                  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-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                  ></path>
-                </svg>
-                {t('stopAbortRequest')}
-              </>
-            ) : (
-              t('triggerAbortRequest')
-            )}
-          </button>
+            {requestControllerState.abortState.loading && <LoadingOutlined />}
+            {requestControllerState.abortState.loading
+              ? t(i18nKeys.PAGE_REQUEST_STOP_ABORT)
+              : t(i18nKeys.PAGE_REQUEST_TRIGGER_ABORT)}
+          </Button>
 
           <div className="mt-4 space-y-2">
             <div>
-              <p className="text-sm font-medium text-gray-700">
-                {t('abortRequestResult')}:
+              <p className="text-sm font-medium text-text">
+                {t(i18nKeys.REQUEST_ABORT_RESULT)}:
               </p>
               <JSONValue value={requestControllerState.abortState.result} />
             </div>
 
             <div>
-              <p className="text-sm font-medium text-gray-700">
-                {t('abortRequestError')}:
+              <p className="text-sm font-medium text-text">
+                {t(i18nKeys.REQUEST_ABORT_ERROR)}:
               </p>
               <JSONValue value={requestControllerState.abortState.error} />
             </div>

package/templates/react-app/src/pages/base/components/BaseHeader.tsx

@@ -1,16 +1,24 @@
 import ThemeSwitcher from '@/uikit/components/ThemeSwitcher';
 import LocaleLink from '@/uikit/components/LocaleLink';
+import LanguageSwitcher from '@/uikit/components/LanguageSwitcher';
 
 export default function BaseHeader() {
   return (
-    <header className="h-10 bg-white sticky top-0 z-50">
-      <div className="flex items-center justify-between h-full px-2">
+    <header className="h-14 bg-secondary border-b border-border sticky top-0 z-50">
+      <div className="flex items-center justify-between h-full px-4 mx-auto max-w-7xl">
         <div className="flex items-center">
-          <LocaleLink href="/">
-            <img src="/logo.svg" alt="logo" />
+          <LocaleLink
+            href="/"
+            className="flex items-center hover:opacity-80 transition-opacity"
+          >
+            <img src="/logo.svg" alt="logo" className="h-8 w-auto" />
+            <span className="ml-2 text-lg font-semibold text-text">
+              {'appName'}
+            </span>
           </LocaleLink>
         </div>
-        <div className="flex items-center">
+        <div className="flex items-center gap-4">
+          <LanguageSwitcher />
           <ThemeSwitcher />
         </div>
       </div>

package/templates/react-app/src/styles/css/page.css

@@ -0,0 +1,11 @@
+@theme {
+  --color-primary: rgba(var(--color-bg-base));
+  --color-secondary: rgba(var(--color-bg-secondary));
+  --color-elevated: rgba(var(--color-bg-elevated));
+  --color-text: rgba(var(--color-text-primary));
+  --color-text-secondary: rgba(var(--color-text-secondary));
+  --color-text-tertiary: rgba(var(--color-text-tertiary));
+  --color-border: rgba(var(--color-border));
+  --color-brand: rgba(var(--color-brand));
+  --color-brand-hover: rgba(var(--color-brand-hover));
+}

package/templates/react-app/src/styles/css/tailwind.css

@@ -0,0 +1,5 @@
+@layer theme, base, antd, components, utilities;
+
+@import 'tailwindcss';
+
+@import './themes/index.css';

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

@@ -0,0 +1,200 @@
+/* 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 */
+  }
+}
+
+/* custom variables - for antd and custom css */
+html,
+.fe-theme {
+  /* Antd 主色调相关变量 - 浅蓝色主题 */
+  --fe-color-primary: #60a5fa; /* blue-400 */
+  --fe-color-primary-hover: #3b82f6; /* blue-500 */
+  --fe-color-primary-active: #2563eb; /* blue-600 */
+  --fe-color-primary-bg: rgba(96, 165, 250, 0.1); /* blue-400 with 0.1 opacity */
+  --fe-color-primary-border: #60a5fa; /* blue-400 */
+  --fe-color-primary-text: #60a5fa; /* blue-400 */
+  --fe-color-primary-text-hover: #3b82f6; /* blue-500 */
+  --fe-color-primary-text-active: #2563eb; /* blue-600 */
+  --fe-color-primary-deprecated-bg: #60a5fa; /* blue-400 */
+  --fe-color-primary-deprecated-border: #60a5fa; /* blue-400 */
+  
+  /* Antd 基础变量 */
+  --fe-color-bg-container: rgb(255 255 255);
+  --fe-color-bg-elevated: rgb(248 250 252);
+  --fe-color-text: rgba(15 23 42 / 0.85);
+  --fe-color-text-secondary: rgba(15 23 42 / 0.45);
+  --fe-color-text-tertiary: rgba(15 23 42 / 0.35);
+  --fe-color-text-quaternary: rgba(15 23 42 / 0.15);
+  --fe-color-text-placeholder: rgba(15 23 42 / 0.25);
+  --fe-color-border: rgb(226 232 240);
+  
+  /* Antd 组件通用变量 */
+  --fe-line-width: 1px;
+  --fe-line-type: solid;
+  --fe-border-radius: 6px;
+  --fe-motion-duration-mid: 0.2s;
+  --fe-line-height: 1.5715;
+
+  /* Antd Input 组件变量 */
+  &.ant-input-css-var {
+    /* Input 内边距 */
+    --fe-input-padding-block: 4px;
+    --fe-input-padding-block-sm: 0px;
+    --fe-input-padding-block-lg: 7px;
+    --fe-input-padding-inline: 11px;
+    --fe-input-padding-inline-sm: 7px;
+    --fe-input-padding-inline-lg: 11px;
+
+    /* Input 字体大小 */
+    --fe-input-input-font-size: 14px;
+    --fe-input-input-font-size-lg: 16px;
+    --fe-input-input-font-size-sm: 14px;
+
+    /* 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.1);
+    --fe-input-error-active-shadow: 0 0 0 2px rgba(255, 38, 5, 0.06);
+    --fe-input-warning-active-shadow: 0 0 0 2px rgba(255, 215, 5, 0.1);
+    --fe-input-hover-bg: #ffffff;
+    --fe-input-active-bg: #ffffff;
+    --fe-input-addon-bg: rgba(0, 0, 0, 0.02);
+  }
+
+  /* 登录页特定样式 */
+  --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);
+
+  /* Antd Button 组件变量 */
+  &.ant-btn {
+    /* 基础样式 */
+    --fe-button-font-weight: 400;
+    --fe-button-padding-inline: 15px;
+    --fe-button-padding-inline-lg: 15px;
+    --fe-button-padding-inline-sm: 7px;
+    --fe-button-padding-block: 4px;
+    --fe-button-padding-block-sm: 0px;
+    --fe-button-padding-block-lg: 7px;
+    
+    /* 字体大小 */
+    --fe-button-content-font-size: 14px;
+    --fe-button-content-font-size-sm: 14px;
+    --fe-button-content-font-size-lg: 16px;
+    --fe-button-content-line-height: 1.5714285714285714;
+    --fe-button-content-line-height-sm: 1.5714285714285714;
+    --fe-button-content-line-height-lg: 1.5;
+
+    /* 浅蓝色主题 */
+    --fe-button-primary-color: #fff;
+    --fe-button-primary-bg: #60a5fa; /* blue-400 */
+    --fe-button-primary-hover-bg: #3b82f6; /* blue-500 */
+    --fe-button-primary-active-bg: #2563eb; /* blue-600 */
+    --fe-button-primary-shadow: 0 2px 0 rgba(37, 99, 235, 0.1);
+
+    /* 默认按钮 */
+    --fe-button-default-color: rgba(0, 0, 0, 0.88);
+    --fe-button-default-bg: #ffffff;
+    --fe-button-default-border-color: #d9d9d9;
+    --fe-button-default-hover-bg: #ffffff;
+    --fe-button-default-hover-color: #60a5fa;
+    --fe-button-default-hover-border-color: #60a5fa;
+    --fe-button-default-active-bg: #ffffff;
+    --fe-button-default-active-color: #2563eb;
+    --fe-button-default-active-border-color: #2563eb;
+    --fe-button-default-shadow: 0 2px 0 rgba(0, 0, 0, 0.02);
+
+    /* 其他状态 */
+    --fe-button-danger-color: #fff;
+    --fe-button-danger-shadow: 0 2px 0 rgba(255, 38, 5, 0.06);
+    --fe-button-border-color-disabled: #d9d9d9;
+    --fe-button-text-hover-bg: rgba(0, 0, 0, 0.04);
+  }
+
+  /* Antd 图标相关变量 */
+  --fe-color-icon: rgba(0, 0, 0, 0.45); /* 默认图标颜色 */
+  --fe-color-icon-hover: rgba(0, 0, 0, 0.88); /* 图标悬停颜色 */
+  --fe-color-icon-active: var(--fe-color-primary); /* 图标激活颜色 */
+  --fe-color-icon-disabled: rgba(0, 0, 0, 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(0, 0, 0, 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(0, 0, 0, 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(0, 0, 0, 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(0, 0, 0, 0.04);
+    --fe-select-multiple-item-color-disabled: rgba(0, 0, 0, 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;
+  }
+  
+  /* Motion 动画变量 */
+  --fe-motion-duration-slow: 0.3s;
+  --fe-motion-duration-normal: 0.2s;
+  --fe-motion-duration-fast: 0.1s;
+}