@qlover/create-app 0.3.2 → 0.3.4

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>