@qlover/create-app 0.7.5 → 0.7.6

package/dist/templates/react-app/src/core/bootstraps/BootstrapApp.ts

@@ -3,12 +3,12 @@ import {
   IOCContainerInterface,
   IOCFunctionInterface
 } from '@qlover/corekit-bridge';
+import type { IOCIdentifierMap } from '@config/IOCIdentifier';
 import { envBlackList, envPrefix, browserGlobalsName } from '@config/common';
 import * as globals from '../globals';
-import { IocRegisterImpl } from '../registers/IocRegisterImpl';
+import { IocRegisterImpl } from '../IocRegisterImpl';
 import { BootstrapsRegistry } from './BootstrapsRegistry';
 import { isObject } from 'lodash';
-import { IOCIdentifierMap } from '../IOC';
 
 export type BootstrapAppArgs = {
   /**
@@ -44,10 +44,9 @@ export class BootstrapApp {
       },
       envOptions: {
         target: appConfig,
-        source: {
-          ...import.meta.env,
+        source: Object.assign({}, import.meta.env, {
           [envPrefix + 'BOOT_HREF']: bootHref
-        },
+        }),
         prefix: envPrefix,
         blackList: envBlackList
       },
@@ -67,7 +66,6 @@ export class BootstrapApp {
 
       await bootstrap.use(bootstrapsRegistry.register()).start();
     } catch (error) {
-      console.log(error);
       logger.error(`${appConfig.appName} starup error:`, error);
     }
 

package/dist/templates/react-app/src/core/bootstraps/BootstrapsRegistry.ts

@@ -8,10 +8,8 @@ import { UserApiBootstarp } from '@/base/apis/userApi/UserApiBootstarp';
 import { FeApiBootstarp } from '@/base/apis/feApi/FeApiBootstarp';
 import { AiApiBootstarp } from '@/base/apis/AiApi';
 import { printBootstrap } from './PrintBootstrap';
-import { IOCIdentifier } from '@config/IOCIdentifier';
-import { I18nService } from '@/base/services/I18nService';
-import { I18nKeyErrorPlugin } from '@/base/cases/I18nKeyErrorPlugin';
-import { IOCIdentifierMap } from '../IOC';
+import { IOCIdentifier, IOCIdentifierMap } from '@config/IOCIdentifier';
+import { IocIdentifierTest } from './IocIdentifierTest';
 
 export class BootstrapsRegistry {
   constructor(
@@ -26,17 +24,21 @@ export class BootstrapsRegistry {
     const IOC = this.IOC;
 
     const bootstrapList = [
-      IOC(I18nService),
+      IOC(IOCIdentifier.I18nServiceInterface),
       new UserApiBootstarp(),
       new FeApiBootstarp(),
       AiApiBootstarp,
-      IOC(I18nKeyErrorPlugin)
+      IOC(IOCIdentifier.I18nKeyErrorPlugin)
     ];
 
     if (!this.appConfig.isProduction) {
       bootstrapList.push(printBootstrap);
     }
 
+    bootstrapList.push(IocIdentifierTest);
+    // TODO: 需要使用到
+    bootstrapList.push(IOC(IOCIdentifier.ProcesserExecutorInterface));
+
     return bootstrapList;
   }
 }

package/dist/templates/react-app/src/core/bootstraps/IocIdentifierTest.ts

@@ -0,0 +1,26 @@
+import { IOCIdentifier } from '@config/IOCIdentifier';
+import { BootstrapExecutorPlugin } from '@qlover/corekit-bridge';
+
+export const IocIdentifierTest: BootstrapExecutorPlugin = {
+  pluginName: 'IocIdentifierTest',
+  onSuccess({ parameters: { logger, ioc } }) {
+    const errorList: string[] = [];
+    const keyList: string[] = Object.keys(IOCIdentifier);
+    keyList.forEach((key) => {
+      try {
+        const value = ioc.get(key);
+        if (value === undefined) {
+          errorList.push(key);
+        }
+      } catch {
+        errorList.push(key);
+      }
+    });
+
+    if (errorList.length > 0) {
+      logger.warn(`IOC ${errorList.join(', ')} is not found`);
+    } else {
+      logger.info(`IOC all identifiers are found ${keyList.length}`);
+    }
+  }
+};

package/dist/templates/react-app/src/pages/auth/Layout.tsx

@@ -1,11 +1,11 @@
 import { IOC } from '@/core/IOC';
-import { UserService } from '@/base/services/UserService';
 import { Navigate, Outlet } from 'react-router-dom';
 import { useStore } from '@/uikit/hooks/useStore';
 import BaseHeader from '../../uikit/components/BaseHeader';
+import { IOCIdentifier } from '@config/IOCIdentifier';
 
 export default function Layout() {
-  const userService = IOC(UserService);
+  const userService = IOC(IOCIdentifier.UserServiceInterface);
   useStore(userService.store);
 
   // If user is authenticated, redirect to home page

package/dist/templates/react-app/src/pages/auth/LoginPage.tsx

@@ -3,10 +3,9 @@ import { Form, Input, Button } from 'antd';
 import { UserOutlined, LockOutlined, GoogleOutlined } from '@ant-design/icons';
 import { IOC } from '@/core/IOC';
 import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
-import { RouteService } from '@/base/services/RouteService';
-import { UserService } from '@/base/services/UserService';
 import * as i18nKeys from '@config/Identifier/page.login';
 import LocaleLink from '@/uikit/components/LocaleLink';
+import { IOCIdentifier } from '@config/IOCIdentifier';
 
 interface LoginFormData {
   email: string;
@@ -15,8 +14,8 @@ interface LoginFormData {
 
 export default function LoginPage() {
   const { t } = useBaseRoutePage();
-  const userService = IOC(UserService);
-  const AppConfig = IOC('AppConfig');
+  const userService = IOC(IOCIdentifier.UserServiceInterface);
+  const AppConfig = IOC(IOCIdentifier.AppConfig);
   const [loading, setLoading] = useState(false);
 
   const handleLogin = async (values: LoginFormData) => {
@@ -26,9 +25,9 @@ export default function LoginPage() {
         username: values.email,
         password: values.password
       });
-      IOC(RouteService).replaceToHome();
+      IOC(IOCIdentifier.RouteServiceInterface).replaceToHome();
     } catch (error) {
-      console.error(error);
+      IOC(IOCIdentifier.Logger).error(error);
     } finally {
       setLoading(false);
     }

package/dist/templates/react-app/src/pages/auth/RegisterPage.tsx

@@ -3,14 +3,15 @@ import { Form, Input, Button, Checkbox } from 'antd';
 import { UserOutlined, LockOutlined, MailOutlined } from '@ant-design/icons';
 import { IOC } from '@/core/IOC';
 import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
-import { RouteService } from '@/base/services/RouteService';
-import { RegisterFormData, UserService } from '@/base/services/UserService';
+import { RegisterFormData } from '@/base/services/UserService';
 import * as i18nKeys from '@config/Identifier/page.register';
+import { IOCIdentifier } from '@config/IOCIdentifier';
 
 export default function RegisterPage() {
   const { t } = useBaseRoutePage();
-  const userService = IOC(UserService);
-  const AppConfig = IOC('AppConfig');
+  const AppConfig = IOC(IOCIdentifier.AppConfig);
+  const userService = IOC(IOCIdentifier.UserServiceInterface);
+  const routeService = IOC(IOCIdentifier.RouteServiceInterface);
   const [loading, setLoading] = useState(false);
   const [form] = Form.useForm();
 
@@ -18,9 +19,9 @@ export default function RegisterPage() {
     try {
       setLoading(true);
       await userService.register(values);
-      IOC(RouteService).replaceToHome();
+      routeService.replaceToHome();
     } catch (error) {
-      console.error(error);
+      IOC(IOCIdentifier.Logger).error(error);
     } finally {
       setLoading(false);
     }
@@ -28,7 +29,7 @@ export default function RegisterPage() {
 
   const handleLoginClick = (e: React.MouseEvent) => {
     e.preventDefault();
-    IOC(RouteService).gotoLogin();
+    routeService.gotoLogin();
   };
 
   return (

package/dist/templates/react-app/src/pages/base/ExecutorPage.tsx

@@ -2,10 +2,9 @@ import { Button, Progress, Tag, Space, Card, Input, Select } from 'antd';
 import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
 import { useState, useEffect } from 'react';
 import { IOC } from '@/core/IOC';
-import { JSONStorageController } from '@/uikit/controllers/JSONStorageController';
-import { ExecutorController } from '@/uikit/controllers/ExecutorController';
 import { useStore } from '@/uikit/hooks/useStore';
 import * as i18nKeys from '@config/Identifier/page.executor';
+import { IOCIdentifier } from '@config/IOCIdentifier';
 
 interface Task {
   id: string;
@@ -22,17 +21,10 @@ interface Task {
 
 export default function ExecutorPage() {
   const { t } = useBaseRoutePage();
-  const executorController = IOC(ExecutorController);
-  const jSONStorageController = IOC(JSONStorageController);
-  const requestTimeout = useStore(
-    jSONStorageController,
-    jSONStorageController.selector.requestTimeout
-  );
-
-  const helloState = useStore(
-    executorController,
-    executorController.selector.helloState
-  );
+  const pageBridge = IOC(IOCIdentifier.ExecutorPageBridgeInterface);
+  const jspBridge = IOC(IOCIdentifier.JSONStoragePageInterface);
+  const requestTimeout = useStore(jspBridge, jspBridge.selector.requestTimeout);
+  const helloState = useStore(pageBridge, pageBridge.selector.helloState);
 
   const [tasks, setTasks] = useState<Task[]>([
     {
@@ -164,7 +156,7 @@ export default function ExecutorPage() {
     );
 
     try {
-      await executorController.onTestPlugins();
+      await pageBridge.onTestPlugins();
 
       setTasks((prevTasks) =>
         prevTasks.map((t) =>
@@ -256,10 +248,7 @@ export default function ExecutorPage() {
               {helloState.loading ? (
                 <div className="text-text-secondary">Loading...</div>
               ) : (
-                <Button
-                  type="primary"
-                  onClick={executorController.onTestPlugins}
-                >
+                <Button type="primary" onClick={pageBridge.onTestPlugins}>
                   {t(i18nKeys.PAGE_EXECUTOR_TEST_PLUGIN_TITLE)}
                 </Button>
               )}
@@ -269,7 +258,7 @@ export default function ExecutorPage() {
                 <div className="text-red-500">{helloState.error.message}</div>
               ) : (
                 <pre className="text-text-secondary">
-                  {IOC('JSON').stringify(helloState.result?.data)}
+                  {IOC('JSONSerializer').stringify(helloState.result?.data)}
                 </pre>
               )}
             </div>

package/dist/templates/react-app/src/pages/base/{ErrorIdentifierPage.tsx → IdentifierPage.tsx}

@@ -3,7 +3,7 @@ import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
 import * as ErrorIdentifierList from '@config/Identifier/common.error';
 import * as i18nKeys from '@config/Identifier/page.identifiter';
 
-export default function ErrorIdentifierPage() {
+export default function IdentifierPage() {
   const { t } = useBaseRoutePage();
 
   return (

package/dist/templates/react-app/src/pages/base/JSONStoragePage.tsx

@@ -1,14 +1,14 @@
 import { IOC } from '@/core/IOC';
 import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
 import template from 'lodash/template';
-import { JSONStorageController } from '@/uikit/controllers/JSONStorageController';
 import { useStore } from '@/uikit/hooks/useStore';
 import { Button, Input } from 'antd';
 import * as i18nKeys from '@config/Identifier/page.jsonStorage';
+import { IOCIdentifier } from '@config/IOCIdentifier';
 
 export default function JSONStoragePage() {
-  const jsonStorageController = IOC(JSONStorageController);
-  const controllerState = useStore(jsonStorageController);
+  const pageBridge = IOC(IOCIdentifier.JSONStoragePageInterface);
+  const pageState = useStore(pageBridge);
   const { t } = useBaseRoutePage();
 
   return (
@@ -36,7 +36,7 @@ export default function JSONStoragePage() {
               <div className="flex flex-col items-center space-y-4">
                 <Button
                   type="primary"
-                  onClick={jsonStorageController.changeRandomTestKey1}
+                  onClick={pageBridge.changeRandomTestKey1}
                 >
                   {t(i18nKeys.PAGE_JSONSTORAGE_SET_RANDOM)}
                 </Button>
@@ -46,7 +46,7 @@ export default function JSONStoragePage() {
                     {t(i18nKeys.PAGE_JSONSTORAGE_CURRENT_VALUE)}:{' '}
                   </span>
                   <span className="font-semibold text-text">
-                    {JSON.stringify(controllerState.testKey1)}
+                    {JSON.stringify(pageState.testKey1)}
                   </span>
                 </div>
               </div>
@@ -69,11 +69,9 @@ export default function JSONStoragePage() {
                 <div className="flex items-center space-x-4">
                   <Input
                     type="number"
-                    value={controllerState.expireTime}
+                    value={pageState.expireTime}
                     onChange={(e) =>
-                      jsonStorageController.changeExpireTime(
-                        Number(e.target.value)
-                      )
+                      pageBridge.changeExpireTime(Number(e.target.value))
                     }
                     className="w-32"
                     min="1000"
@@ -86,7 +84,7 @@ export default function JSONStoragePage() {
 
                 <Button
                   type="primary"
-                  onClick={jsonStorageController.onChangeRandomTestKey2}
+                  onClick={pageBridge.onChangeRandomTestKey2}
                 >
                   {t(i18nKeys.PAGE_JSONSTORAGE_SET_EXPIRE)}
                 </Button>
@@ -96,7 +94,7 @@ export default function JSONStoragePage() {
                     {t(i18nKeys.PAGE_JSONSTORAGE_CURRENT_VALUE)}:{' '}
                   </span>
                   <span className="font-semibold text-text">
-                    {controllerState.testKey2}
+                    {pageState.testKey2}
                   </span>
                 </div>
               </div>
@@ -110,11 +108,9 @@ export default function JSONStoragePage() {
               <div className="flex items-center space-x-4">
                 <Input
                   type="number"
-                  value={controllerState.requestTimeout}
+                  value={pageState.requestTimeout}
                   onChange={(e) =>
-                    jsonStorageController.changeRequestTimeout(
-                      Number(e.target.value)
-                    )
+                    pageBridge.changeRequestTimeout(Number(e.target.value))
                   }
                   className="w-32"
                   min="1000"

package/dist/templates/react-app/src/pages/base/Layout.tsx

@@ -1,6 +1,6 @@
 import BaseHeader from '../../uikit/components/BaseHeader';
 import { Outlet } from 'react-router-dom';
-import { ProcessExecutorProvider } from '@/uikit/providers/ProcessExecutorProvider';
+import { ProcessExecutorProvider } from '@/uikit/components/ProcessExecutorProvider';
 
 export default function Layout() {
   return (

package/dist/templates/react-app/src/pages/base/RedirectPathname.tsx

@@ -1,5 +1,5 @@
-import { RouteService } from '@/base/services/RouteService';
 import { IOC } from '@/core/IOC';
+import { IOCIdentifier } from '@config/IOCIdentifier';
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 
@@ -8,7 +8,7 @@ const RedirectToDefault = () => {
 
   useEffect(() => {
     // Redirect to the default language path
-    IOC(RouteService).redirectToDefault(navigate);
+    IOC(IOCIdentifier.RouteServiceInterface).redirectToDefault(navigate);
   }, [navigate]);
 
   return null;

package/dist/templates/react-app/src/pages/base/RequestPage.tsx

@@ -1,12 +1,11 @@
 import { IOC } from '@/core/IOC';
 import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
-import { JSONStorageController } from '@/uikit/controllers/JSONStorageController';
-import { RequestController } from '@/uikit/controllers/RequestController';
 import { useMemo } from 'react';
 import { useStore } from '@/uikit/hooks/useStore';
 import { Button } from 'antd';
 import { LoadingOutlined } from '@ant-design/icons';
 import * as i18nKeys from '@config/Identifier/page.request';
+import { IOCIdentifier } from '@config/IOCIdentifier';
 
 function JSONValue({ value }: { value: unknown }) {
   const output = useMemo(() => {
@@ -24,9 +23,10 @@ function JSONValue({ value }: { value: unknown }) {
 }
 
 export default function RequestPage() {
-  const requestController = IOC(RequestController);
-  const requestControllerState = useStore(requestController);
-  const jsonStorageControllerState = useStore(IOC(JSONStorageController));
+  const pageBridge = IOC(IOCIdentifier.RequestPageBridgeInterface);
+  const pageState = useStore(pageBridge);
+  const jsonStoragePageBridge = IOC(IOCIdentifier.JSONStoragePageInterface);
+  const jsonStoragePageState = useStore(jsonStoragePageBridge);
   const { t } = useBaseRoutePage();
 
   return (
@@ -38,7 +38,7 @@ export default function RequestPage() {
             {t(i18nKeys.PAGE_REQUEST_TIMEOUT)}
           </h2>
           <div className="text-sm text-text-secondary font-mono bg-base p-2 rounded">
-            {jsonStorageControllerState.requestTimeout}
+            {jsonStoragePageState.requestTimeout}
           </div>
         </div>
 
@@ -53,10 +53,10 @@ export default function RequestPage() {
           </p>
           <Button
             type="primary"
-            onClick={requestController.onHello}
-            loading={requestControllerState.helloState.loading}
+            onClick={pageBridge.onHello}
+            loading={pageState.helloState.loading}
           >
-            {requestControllerState.helloState.loading
+            {pageState.helloState.loading
               ? t(i18nKeys.REQUEST_LOADING)
               : t(i18nKeys.PAGE_REQUEST_HELLO_BUTTON)}
           </Button>
@@ -66,14 +66,14 @@ export default function RequestPage() {
               <p className="text-sm font-medium text-text">
                 {t(i18nKeys.REQUEST_HELLO_RESULT)}:
               </p>
-              <JSONValue value={requestControllerState.helloState.result} />
+              <JSONValue value={pageState.helloState.result} />
             </div>
 
             <div>
               <p className="text-sm font-medium text-text">
                 {t(i18nKeys.REQUEST_HELLO_ERROR)}:
               </p>
-              <JSONValue value={requestControllerState.helloState.error} />
+              <JSONValue value={pageState.helloState.error} />
             </div>
           </div>
         </div>
@@ -89,10 +89,10 @@ export default function RequestPage() {
           </p>
           <Button
             type="primary"
-            onClick={requestController.onIpInfo}
-            loading={requestControllerState.ipInfoState.loading}
+            onClick={pageBridge.onIpInfo}
+            loading={pageState.ipInfoState.loading}
           >
-            {requestControllerState.ipInfoState.loading
+            {pageState.ipInfoState.loading
               ? t(i18nKeys.REQUEST_LOADING)
               : t(i18nKeys.REQUEST_IP_INFO)}
           </Button>
@@ -101,7 +101,7 @@ export default function RequestPage() {
             <p className="text-sm font-medium text-text">
               {t(i18nKeys.REQUEST_IP_INFO_RESULT)}:
             </p>
-            <JSONValue value={requestControllerState.ipInfoState.result} />
+            <JSONValue value={pageState.ipInfoState.result} />
           </div>
         </div>
 
@@ -115,10 +115,10 @@ export default function RequestPage() {
           </p>
           <Button
             type="primary"
-            onClick={requestController.onRandomUser}
-            loading={requestControllerState.randomUserState.loading}
+            onClick={pageBridge.onRandomUser}
+            loading={pageState.randomUserState.loading}
           >
-            {requestControllerState.randomUserState.loading
+            {pageState.randomUserState.loading
               ? t(i18nKeys.REQUEST_LOADING)
               : t(i18nKeys.REQUEST_RANDOM_USER)}
           </Button>
@@ -128,16 +128,14 @@ export default function RequestPage() {
               <p className="text-sm font-medium text-text">
                 {t(i18nKeys.REQUEST_RANDOM_USER_RESULT)}:
               </p>
-              <JSONValue
-                value={requestControllerState.randomUserState.result}
-              />
+              <JSONValue value={pageState.randomUserState.result} />
             </div>
 
             <div>
               <p className="text-sm font-medium text-text">
                 {t(i18nKeys.REQUEST_RANDOM_USER_ERROR)}:
               </p>
-              <JSONValue value={requestControllerState.randomUserState.error} />
+              <JSONValue value={pageState.randomUserState.error} />
             </div>
           </div>
         </div>
@@ -148,16 +146,12 @@ export default function RequestPage() {
             {t(i18nKeys.PAGE_REQUEST_API_CATCH_TITLE)}
           </h2>
           <Button
-            type={
-              requestControllerState.apiCatchResultState.loading
-                ? 'primary'
-                : 'primary'
-            }
-            danger={requestControllerState.apiCatchResultState.loading}
-            onClick={requestController.onTriggerApiCatchResult}
-            loading={requestControllerState.apiCatchResultState.loading}
+            type={pageState.apiCatchResultState.loading ? 'primary' : 'primary'}
+            danger={pageState.apiCatchResultState.loading}
+            onClick={pageBridge.onTriggerApiCatchResult}
+            loading={pageState.apiCatchResultState.loading}
           >
-            {requestControllerState.apiCatchResultState.loading
+            {pageState.apiCatchResultState.loading
               ? t(i18nKeys.PAGE_REQUEST_STOP_API_CATCH)
               : t(i18nKeys.PAGE_REQUEST_TRIGGER_API_CATCH)}
           </Button>
@@ -167,18 +161,14 @@ export default function RequestPage() {
               <p className="text-sm font-medium text-text">
                 {t(i18nKeys.REQUEST_ABORT_RESULT)}:
               </p>
-              <JSONValue
-                value={requestControllerState.apiCatchResultState.result}
-              />
+              <JSONValue value={pageState.apiCatchResultState.result} />
             </div>
 
             <div>
               <p className="text-sm font-medium text-text">
                 {t(i18nKeys.REQUEST_ABORT_ERROR)}:
               </p>
-              <JSONValue
-                value={requestControllerState.apiCatchResultState.error}
-              />
+              <JSONValue value={pageState.apiCatchResultState.error} />
             </div>
           </div>
         </div>
@@ -189,14 +179,12 @@ export default function RequestPage() {
             {t(i18nKeys.PAGE_REQUEST_ABORT_TITLE)}
           </h2>
           <Button
-            type={
-              requestControllerState.abortState.loading ? 'primary' : 'primary'
-            }
-            danger={requestControllerState.abortState.loading}
-            onClick={requestController.onTriggerAbortRequest}
+            type={pageState.abortState.loading ? 'primary' : 'primary'}
+            danger={pageState.abortState.loading}
+            onClick={pageBridge.onTriggerAbortRequest}
           >
-            {requestControllerState.abortState.loading && <LoadingOutlined />}
-            {requestControllerState.abortState.loading
+            {pageState.abortState.loading && <LoadingOutlined />}
+            {pageState.abortState.loading
               ? t(i18nKeys.PAGE_REQUEST_STOP_ABORT)
               : t(i18nKeys.PAGE_REQUEST_TRIGGER_ABORT)}
           </Button>
@@ -206,14 +194,14 @@ export default function RequestPage() {
               <p className="text-sm font-medium text-text">
                 {t(i18nKeys.REQUEST_ABORT_RESULT)}:
               </p>
-              <JSONValue value={requestControllerState.abortState.result} />
+              <JSONValue value={pageState.abortState.result} />
             </div>
 
             <div>
               <p className="text-sm font-medium text-text">
                 {t(i18nKeys.REQUEST_ABORT_ERROR)}:
               </p>
-              <JSONValue value={requestControllerState.abortState.error} />
+              <JSONValue value={pageState.abortState.error} />
             </div>
           </div>
         </div>

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

@@ -141,7 +141,7 @@ html,
   .ant-select,
   .ant-select-css-var {
     --fe-select-internal_fixed_item_margin: 2px;
-    --fe-select-z-index-popup: 1050;
+    --fe-select-z-index-popup: var(--zi-select);
     --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);
@@ -222,7 +222,7 @@ html,
   /* Antd Message 组件变量 */
   .ant-message,
   .ant-message-css-var {
-    --fe-message-z-index-popup: 2010;
+    --fe-message-z-index-popup: var(--zi-message);
     --fe-message-content-bg: var(--fe-color-bg-container);
     --fe-message-content-padding: 9px 12px;
     --fe-message-notice-content-padding: 10px 16px;

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

@@ -96,7 +96,7 @@
   .ant-select,
   .ant-select-css-var {
     --fe-select-internal_fixed_item_margin: 2px;
-    --fe-select-z-index-popup: 1050;
+    --fe-select-z-index-popup: var(--zi-select);
     --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);
@@ -154,7 +154,7 @@
   /* Antd Message 组件变量 */
   .ant-message,
   .ant-message-css-var {
-    --fe-message-z-index-popup: 2010;
+    --fe-message-z-index-popup: var(--zi-message);
     --fe-message-content-bg: rgb(51 65 85); /* slate-700，比容器背景色深一点 */
     --fe-message-content-padding: 9px 12px;
     --fe-message-notice-content-padding: 10px 16px;

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

@@ -100,7 +100,7 @@
   .ant-select,
   .ant-select-css-var {
     --fe-select-internal_fixed_item_margin: 2px;
-    --fe-select-z-index-popup: 1050;
+    --fe-select-z-index-popup: var(--zi-select);
     --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);
@@ -158,7 +158,7 @@
   /* Antd Message 组件变量 */
   .ant-message,
   .ant-message-css-var {
-    --fe-message-z-index-popup: 2010;
+    --fe-message-z-index-popup: var(--zi-message);
     --fe-message-content-bg: var(--ant-color-bg-container);
     --fe-message-content-padding: 9px 12px;
     --fe-message-notice-content-padding: 10px 16px;

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

@@ -1,4 +1,5 @@
 @import './tailwind.css';
+@import './zIndex.css';
 
 @import './antd-themes/index.css';
 

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

@@ -1,3 +1,11 @@
+/**
+ * This file is used to define the page styles for the app.
+ * 
+ * @example --color-primary
+ * ```tsx
+ * <div className="bg-primary text-primary border-text-tertiary"></div>
+ * ```
+ */
 @theme {
   --color-primary: rgba(var(--color-bg-base));
   --color-secondary: rgba(var(--color-bg-secondary));

package/dist/templates/react-app/src/styles/css/zIndex.css

@@ -0,0 +1,9 @@
+/**
+ * This file is used to define the z-index values for the app.
+ */
+:root {
+  /* antd select popup zindex */
+  --zi-select: 1050;
+  /* antd message zindex */
+  --zi-message: 2010;
+}