@qlover/create-app 0.7.15 → 0.9.0

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

@@ -0,0 +1,40 @@
+import { useFactory } from '@brain-toolkit/react-kit';
+import { chatMessageI18n } from '@config/i18n/chatMessageI18n';
+import {
+  ChatMessageStore,
+  ChatSenderStrategy,
+  SendFailureStrategy
+} from '@qlover/corekit-bridge';
+import { useState } from 'react';
+import { logger } from '@/core/globals';
+import { ChatMessageBridge } from '@/uikit/components/chatMessage/ChatMessageBridge';
+import { ChatRoot } from '@/uikit/components/chatMessage/ChatRoot';
+import { MessageApi } from '@/uikit/components/chatMessage/MessageApi';
+import { MessageBaseList } from '@/uikit/components/MessageBaseList';
+import { useI18nInterface } from '@/uikit/hooks/useI18nInterface';
+
+export default function MessagePage() {
+  const tt = useI18nInterface(chatMessageI18n);
+  const messagesStore = useFactory(ChatMessageStore<string>);
+  const messageApi = useFactory(MessageApi, messagesStore);
+
+  const [bridge] = useState(() => {
+    return new ChatMessageBridge<string>(messagesStore, {
+      gateway: messageApi,
+      logger: logger,
+      senderName: 'ChatSender',
+      gatewayOptions: { stream: true }
+    }).use(new ChatSenderStrategy(SendFailureStrategy.KEEP_FAILED, logger));
+  });
+
+  return (
+    <div
+      data-testid="MessagePage"
+      className="min-h-screen bg-primary py-8 px-4 sm:px-6 lg:px-8"
+    >
+      <MessageBaseList />
+
+      <ChatRoot bridge={bridge} tt={tt} />
+    </div>
+  );
+}

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

@@ -1,14 +1,15 @@
-import { IOC } from '@/core/IOC';
 import { IOCIdentifier } from '@config/IOCIdentifier';
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useIOC } from '@/uikit/hooks/useIOC';
 
 const RedirectToDefault = () => {
   const navigate = useNavigate();
+  const routeService = useIOC(IOCIdentifier.RouteServiceInterface);
 
   useEffect(() => {
     // Redirect to the default language path
-    IOC(IOCIdentifier.RouteServiceInterface).redirectToDefault(navigate);
+    routeService.redirectToDefault(navigate);
   }, [navigate]);
 
   return null;

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

@@ -1,11 +1,11 @@
-import { IOC } from '@/core/IOC';
-import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
-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 { useStore } from '@brain-toolkit/react-kit/hooks/useStore';
+import { request18n } from '@config/i18n/request18n';
 import { IOCIdentifier } from '@config/IOCIdentifier';
+import { Button } from 'antd';
+import { useMemo } from 'react';
+import { useI18nInterface } from '@/uikit/hooks/useI18nInterface';
+import { useIOC } from '@/uikit/hooks/useIOC';
 
 function JSONValue({ value }: { value: unknown }) {
   const output = useMemo(() => {
@@ -16,27 +16,31 @@ function JSONValue({ value }: { value: unknown }) {
     }
   }, [value]);
   return (
-    <pre className="mt-1 text-sm text-text-secondary font-mono bg-secondary p-2 rounded overflow-x-auto">
+    <pre
+      data-testid="JSONValue"
+      className="mt-1 text-sm text-text-secondary font-mono bg-secondary p-2 rounded overflow-x-auto"
+    >
       {output}
     </pre>
   );
 }
 
 export default function RequestPage() {
-  const pageBridge = IOC(IOCIdentifier.RequestPageBridgeInterface);
+  const pageBridge = useIOC(IOCIdentifier.RequestPageBridgeInterface);
   const pageState = useStore(pageBridge);
-  const jsonStoragePageBridge = IOC(IOCIdentifier.JSONStoragePageInterface);
+  const jsonStoragePageBridge = useIOC(IOCIdentifier.JSONStoragePageInterface);
   const jsonStoragePageState = useStore(jsonStoragePageBridge);
-  const { t } = useBaseRoutePage();
+  const tt = useI18nInterface(request18n);
 
   return (
-    <div className="min-h-screen bg-primary py-8 px-4 sm:px-6 lg:px-8">
+    <div
+      data-testid="RequestPage"
+      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-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>
+          <h2 className="text-lg font-medium text-text mb-2">{tt.timeout}</h2>
           <div className="text-sm text-text-secondary font-mono bg-base p-2 rounded">
             {jsonStoragePageState.requestTimeout}
           </div>
@@ -45,34 +49,28 @@ export default function RequestPage() {
         {/* Hello Request Card */}
         <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)}
+            {tt.helloTitle}
           </h2>
 
           <p className="text-sm text-text-secondary mb-4">
-            {t(i18nKeys.PAGE_REQUEST_HELLO_DESCRIPTION)}
+            {tt.helloDescription}
           </p>
           <Button
             type="primary"
             onClick={pageBridge.onHello}
             loading={pageState.helloState.loading}
           >
-            {pageState.helloState.loading
-              ? t(i18nKeys.REQUEST_LOADING)
-              : t(i18nKeys.PAGE_REQUEST_HELLO_BUTTON)}
+            {pageState.helloState.loading ? tt.loading : tt.helloButton}
           </Button>
 
           <div className="mt-4 space-y-2">
             <div>
-              <p className="text-sm font-medium text-text">
-                {t(i18nKeys.REQUEST_HELLO_RESULT)}:
-              </p>
+              <p className="text-sm font-medium text-text">{tt.helloResult}:</p>
               <JSONValue value={pageState.helloState.result} />
             </div>
 
             <div>
-              <p className="text-sm font-medium text-text">
-                {t(i18nKeys.REQUEST_HELLO_ERROR)}:
-              </p>
+              <p className="text-sm font-medium text-text">{tt.helloError}:</p>
               <JSONValue value={pageState.helloState.error} />
             </div>
           </div>
@@ -81,26 +79,22 @@ export default function RequestPage() {
         {/* IP Information Card */}
         <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)}
+            {tt.ipInfoTitle}
           </h2>
 
           <p className="text-sm text-text-secondary mb-4">
-            {t(i18nKeys.PAGE_REQUEST_IP_INFO_DESCRIPTION)}
+            {tt.ipInfoDescription}
           </p>
           <Button
             type="primary"
             onClick={pageBridge.onIpInfo}
             loading={pageState.ipInfoState.loading}
           >
-            {pageState.ipInfoState.loading
-              ? t(i18nKeys.REQUEST_LOADING)
-              : t(i18nKeys.REQUEST_IP_INFO)}
+            {pageState.ipInfoState.loading ? tt.loading : tt.ipInfo}
           </Button>
 
           <div className="mt-4">
-            <p className="text-sm font-medium text-text">
-              {t(i18nKeys.REQUEST_IP_INFO_RESULT)}:
-            </p>
+            <p className="text-sm font-medium text-text">{tt.ipInfoResult}:</p>
             <JSONValue value={pageState.ipInfoState.result} />
           </div>
         </div>
@@ -108,32 +102,30 @@ export default function RequestPage() {
         {/* Random User Card */}
         <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)}
+            {tt.randomUserTitle}
           </h2>
           <p className="text-sm text-text-secondary mb-4">
-            {t(i18nKeys.PAGE_REQUEST_RANDOM_USER_DESCRIPTION)}
+            {tt.randomUserDescription}
           </p>
           <Button
             type="primary"
             onClick={pageBridge.onRandomUser}
             loading={pageState.randomUserState.loading}
           >
-            {pageState.randomUserState.loading
-              ? t(i18nKeys.REQUEST_LOADING)
-              : t(i18nKeys.REQUEST_RANDOM_USER)}
+            {pageState.randomUserState.loading ? tt.loading : tt.randomUser}
           </Button>
 
           <div className="mt-4 space-y-2">
             <div>
               <p className="text-sm font-medium text-text">
-                {t(i18nKeys.REQUEST_RANDOM_USER_RESULT)}:
+                {tt.randomUserResult}:
               </p>
               <JSONValue value={pageState.randomUserState.result} />
             </div>
 
             <div>
               <p className="text-sm font-medium text-text">
-                {t(i18nKeys.REQUEST_RANDOM_USER_ERROR)}:
+                {tt.randomUserError}:
               </p>
               <JSONValue value={pageState.randomUserState.error} />
             </div>
@@ -143,7 +135,7 @@ export default function RequestPage() {
         {/* 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)}
+            {tt.apiCatchTitle}
           </h2>
           <Button
             type={pageState.apiCatchResultState.loading ? 'primary' : 'primary'}
@@ -152,22 +144,18 @@ export default function RequestPage() {
             loading={pageState.apiCatchResultState.loading}
           >
             {pageState.apiCatchResultState.loading
-              ? t(i18nKeys.PAGE_REQUEST_STOP_API_CATCH)
-              : t(i18nKeys.PAGE_REQUEST_TRIGGER_API_CATCH)}
+              ? tt.stopAbort
+              : tt.triggerApiCatch}
           </Button>
 
           <div className="mt-4 space-y-2">
             <div>
-              <p className="text-sm font-medium text-text">
-                {t(i18nKeys.REQUEST_ABORT_RESULT)}:
-              </p>
+              <p className="text-sm font-medium text-text">{tt.abortResult}:</p>
               <JSONValue value={pageState.apiCatchResultState.result} />
             </div>
 
             <div>
-              <p className="text-sm font-medium text-text">
-                {t(i18nKeys.REQUEST_ABORT_ERROR)}:
-              </p>
+              <p className="text-sm font-medium text-text">{tt.abortError}:</p>
               <JSONValue value={pageState.apiCatchResultState.error} />
             </div>
           </div>
@@ -176,7 +164,7 @@ export default function RequestPage() {
         {/* Abort Request Card */}
         <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)}
+            {tt.abortTitle}
           </h2>
           <Button
             type={pageState.abortState.loading ? 'primary' : 'primary'}
@@ -184,23 +172,17 @@ export default function RequestPage() {
             onClick={pageBridge.onTriggerAbortRequest}
           >
             {pageState.abortState.loading && <LoadingOutlined />}
-            {pageState.abortState.loading
-              ? t(i18nKeys.PAGE_REQUEST_STOP_ABORT)
-              : t(i18nKeys.PAGE_REQUEST_TRIGGER_ABORT)}
+            {pageState.abortState.loading ? tt.stopAbort : tt.triggerAbort}
           </Button>
 
           <div className="mt-4 space-y-2">
             <div>
-              <p className="text-sm font-medium text-text">
-                {t(i18nKeys.REQUEST_ABORT_RESULT)}:
-              </p>
+              <p className="text-sm font-medium text-text">{tt.abortResult}:</p>
               <JSONValue value={pageState.abortState.result} />
             </div>
 
             <div>
-              <p className="text-sm font-medium text-text">
-                {t(i18nKeys.REQUEST_ABORT_ERROR)}:
-              </p>
+              <p className="text-sm font-medium text-text">{tt.abortError}:</p>
               <JSONValue value={pageState.abortState.error} />
             </div>
           </div>

package/dist/templates/react-app/src/styles/css/antd-themes/{_default.css → _common/_default.css}

@@ -44,6 +44,7 @@ html,
   --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-text-disabled: rgba(15 23 42 / 0.25); /* 禁用状态文本颜色 */
   --fe-color-border: rgb(226 232 240);
 
   /* Antd 组件通用变量 */
@@ -236,4 +237,88 @@ html,
     --fe-message-info-color: var(--fe-color-primary);
     --fe-message-loading-color: var(--fe-color-primary);
   }
+
+  .ant-dropdown-css-var {
+    /* Control Variables - Default Theme */
+    --fe-control-outline-width: 2px;
+    --fe-control-interactive-size: 16px;
+    --fe-control-item-bg-hover: rgba(0, 0, 0, 0.04);
+    --fe-control-item-bg-active: #e6f4ff;
+    --fe-control-item-bg-active-hover: #bae0ff;
+    --fe-control-item-bg-active-disabled: rgba(0, 0, 0, 0.15);
+    --fe-control-tmp-outline: rgba(0, 0, 0, 0.02);
+    --fe-control-outline: rgba(
+      96,
+      165,
+      250,
+      0.1
+    ); /* blue-400 with 0.1 opacity */
+  }
+
+  /* Antd Layout 组件变量 */
+  &.ant-layout-sider {
+    --fe-layout-color-bg-header: rgb(var(--color-bg-base));
+    --fe-layout-color-bg-body: rgb(var(--color-bg-secondary));
+    --fe-layout-color-bg-trigger: rgb(var(--color-bg-elevated));
+    --fe-layout-body-bg: rgb(var(--color-bg-secondary));
+    --fe-layout-header-bg: rgb(var(--color-bg-base));
+    --fe-layout-header-height: 64px;
+    --fe-layout-header-padding: 0 50px;
+    --fe-layout-header-color: rgb(var(--text-primary));
+    --fe-layout-footer-padding: 24px 50px;
+    --fe-layout-footer-bg: rgb(var(--color-bg-secondary));
+    --fe-layout-sider-bg: rgb(var(--color-bg-base));
+    --fe-layout-trigger-height: 48px;
+    --fe-layout-trigger-bg: rgb(var(--color-bg-elevated));
+    --fe-layout-trigger-color: rgb(var(--text-primary));
+    --fe-layout-zero-trigger-width: 40px;
+    --fe-layout-zero-trigger-height: 40px;
+    --fe-layout-light-sider-bg: rgb(var(--color-bg-base));
+    --fe-layout-light-trigger-bg: rgb(var(--color-bg-base));
+    --fe-layout-light-trigger-color: rgb(var(--text-primary));
+  }
+
+  /* 滚动条样式变量 */
+  --fe-scrollbar-size: 6px;
+  --fe-scrollbar-thumb-bg: rgba(15 23 42 / 0.2);
+  --fe-scrollbar-thumb-hover-bg: rgba(15 23 42 / 0.3);
+  --fe-scrollbar-track-bg: transparent;
+
+  /* 滚动条样式 */
+  ::-webkit-scrollbar {
+    width: var(--fe-scrollbar-size);
+    height: var(--fe-scrollbar-size);
+  }
+
+  ::-webkit-scrollbar-track {
+    background: var(--fe-scrollbar-track-bg);
+    border-radius: var(--fe-scrollbar-size);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--fe-scrollbar-thumb-bg);
+    border-radius: var(--fe-scrollbar-size);
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--fe-scrollbar-thumb-hover-bg);
+  }
+
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  /* 可选的细滚动条样式 */
+  .scrollbar-thin {
+    --fe-scrollbar-size: 4px;
+  }
+
+  /* 隐藏滚动条但保持可滚动 */
+  .scrollbar-hidden {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
 }

package/dist/templates/react-app/src/styles/css/antd-themes/{dark.css → _common/dark.css}

@@ -45,6 +45,12 @@
   --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-text-disabled: rgba(
+    255,
+    255,
+    255,
+    0.25
+  ); /* 暗色主题禁用状态文本颜色 */
   --fe-color-border: rgb(51 65 85);
 
   /* Antd 图标相关变量 */
@@ -175,4 +181,97 @@
       0.85
     ); /* 确保文字在深色背景上清晰可见 */
   }
+  .ant-dropdown-css-var {
+    /* Control Variables - Dark Theme */
+    --fe-control-outline-width: 2px;
+    --fe-control-interactive-size: 16px;
+    --fe-control-item-bg-hover: rgba(255, 255, 255, 0.08);
+    --fe-control-item-bg-active: rgba(
+      96,
+      165,
+      250,
+      0.2
+    ); /* blue-400 with 0.2 opacity */
+    --fe-control-item-bg-active-hover: rgba(
+      96,
+      165,
+      250,
+      0.3
+    ); /* blue-400 with 0.3 opacity */
+    --fe-control-item-bg-active-disabled: rgba(255, 255, 255, 0.15);
+    --fe-control-tmp-outline: rgba(255, 255, 255, 0.02);
+    --fe-control-outline: rgba(
+      96,
+      165,
+      250,
+      0.1
+    ); /* blue-400 with 0.1 opacity */
+  }
+
+  /* Antd Layout 组件变量 */
+  &.ant-layout-sider {
+    --fe-layout-color-bg-header: rgb(15 23 42);
+    --fe-layout-color-bg-body: rgb(30 41 59);
+    --fe-layout-color-bg-trigger: rgb(15 23 42);
+    --fe-layout-body-bg: rgb(30 41 59);
+    --fe-layout-header-bg: rgb(15 23 42);
+    --fe-layout-header-height: 64px;
+    --fe-layout-header-padding: 0 50px;
+    --fe-layout-header-color: rgb(var(--text-primary));
+    --fe-layout-footer-padding: 24px 50px;
+    --fe-layout-footer-bg: rgb(30 41 59);
+    --fe-layout-sider-bg: rgb(15 23 42);
+    --fe-layout-trigger-height: 48px;
+    --fe-layout-trigger-bg: rgb(15 23 42);
+    --fe-layout-trigger-color: rgb(255 255 255);
+    --fe-layout-zero-trigger-width: 40px;
+    --fe-layout-zero-trigger-height: 40px;
+    --fe-layout-light-sider-bg: rgb(30 41 59);
+    --fe-layout-light-trigger-bg: rgb(30 41 59);
+    --fe-layout-light-trigger-color: rgb(var(--text-primary));
+  }
+
+  /* 滚动条样式变量 */
+  --fe-scrollbar-size: 6px;
+  --fe-scrollbar-thumb-bg: rgba(255 255 255 / 0.2);
+  --fe-scrollbar-thumb-hover-bg: rgba(255 255 255 / 0.3);
+  --fe-scrollbar-track-bg: transparent;
+
+  /* 滚动条样式 */
+  ::-webkit-scrollbar {
+    width: var(--fe-scrollbar-size);
+    height: var(--fe-scrollbar-size);
+  }
+
+  ::-webkit-scrollbar-track {
+    background: var(--fe-scrollbar-track-bg);
+    border-radius: var(--fe-scrollbar-size);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--fe-scrollbar-thumb-bg);
+    border-radius: var(--fe-scrollbar-size);
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--fe-scrollbar-thumb-hover-bg);
+  }
+
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  /* 可选的细滚动条样式 */
+  .scrollbar-thin {
+    --fe-scrollbar-size: 4px;
+  }
+
+  /* 隐藏滚动条但保持可滚动 */
+  .scrollbar-hidden {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
 }

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

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

package/dist/templates/react-app/src/styles/css/antd-themes/{pink.css → _common/pink.css}

@@ -43,6 +43,9 @@
   --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);
+  --fe-color-text-disabled: rgba(
+    190 18 60 / 0.25
+  ); /* 粉色主题禁用状态文本颜色 */
   --ant-color-border: rgb(254 205 211);
 
   /* Antd 图标相关变量 */
@@ -201,4 +204,87 @@
       0 9px 28px 8px rgba(244, 114, 182, 0.05);
     --fe-modal-mask-bg: rgba(244, 114, 182, 0.45);
   }
+  .ant-dropdown-css-var {
+    /* Control Variables - Pink Theme */
+    --fe-control-outline-width: 2px;
+    --fe-control-interactive-size: 16px;
+    --fe-control-item-bg-hover: rgba(0, 0, 0, 0.04);
+    --fe-control-item-bg-active: #fce7f3; /* pink-100 */
+    --fe-control-item-bg-active-hover: #fbcfe8; /* pink-200 */
+    --fe-control-item-bg-active-disabled: rgba(0, 0, 0, 0.15);
+    --fe-control-tmp-outline: rgba(0, 0, 0, 0.02);
+    --fe-control-outline: rgba(
+      244,
+      114,
+      182,
+      0.1
+    ); /* pink-400 with 0.1 opacity */
+  }
+
+  /* Antd Layout 组件变量 */
+  &.ant-layout-sider {
+    --fe-layout-color-bg-header: var(--ant-color-bg-container);
+    --fe-layout-color-bg-body: rgb(255 241 242);
+    --fe-layout-color-bg-trigger: var(--ant-color-bg-elevated);
+    --fe-layout-body-bg: rgb(255 241 242);
+    --fe-layout-header-bg: var(--ant-color-bg-container);
+    --fe-layout-header-height: 64px;
+    --fe-layout-header-padding: 0 50px;
+    --fe-layout-header-color: var(--ant-color-text);
+    --fe-layout-footer-padding: 24px 50px;
+    --fe-layout-footer-bg: rgb(255 241 242);
+    --fe-layout-sider-bg: var(--ant-color-bg-container);
+    --fe-layout-trigger-height: 48px;
+    --fe-layout-trigger-bg: var(--ant-color-bg-elevated);
+    --fe-layout-trigger-color: var(--ant-color-text);
+    --fe-layout-zero-trigger-width: 40px;
+    --fe-layout-zero-trigger-height: 40px;
+    --fe-layout-light-sider-bg: var(--ant-color-bg-container);
+    --fe-layout-light-trigger-bg: var(--ant-color-bg-container);
+    --fe-layout-light-trigger-color: var(--ant-color-text);
+  }
+
+  /* 滚动条样式变量 */
+  --fe-scrollbar-size: 6px;
+  --fe-scrollbar-thumb-bg: rgba(244 114 182 / 0.3);
+  --fe-scrollbar-thumb-hover-bg: rgba(244 114 182 / 0.4);
+  --fe-scrollbar-track-bg: transparent;
+
+  /* 滚动条样式 */
+  ::-webkit-scrollbar {
+    width: var(--fe-scrollbar-size);
+    height: var(--fe-scrollbar-size);
+  }
+
+  ::-webkit-scrollbar-track {
+    background: var(--fe-scrollbar-track-bg);
+    border-radius: var(--fe-scrollbar-size);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--fe-scrollbar-thumb-bg);
+    border-radius: var(--fe-scrollbar-size);
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--fe-scrollbar-thumb-hover-bg);
+  }
+
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  /* 可选的细滚动条样式 */
+  .scrollbar-thin {
+    --fe-scrollbar-size: 4px;
+  }
+
+  /* 隐藏滚动条但保持可滚动 */
+  .scrollbar-hidden {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
 }

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

@@ -1,3 +1,4 @@
-@import './_default.css';
-@import './dark.css';
-@import './pink.css';
+@import './_common/index.css';
+@import './table/index.css';
+@import './pagination/index.css';
+@import './menu/index.css';