@qlover/create-app 0.7.15 → 0.9.0

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

@@ -1,10 +1,12 @@
+import { useStore } from '@brain-toolkit/react-kit/hooks/useStore';
+import { executorI18n } from '@config/i18n/executorI18n';
+import * as i18nKeys from '@config/Identifier/pages/page.executor';
+import { IOCIdentifier } from '@config/IOCIdentifier';
 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 { useStore } from '@/uikit/hooks/useStore';
-import * as i18nKeys from '@config/Identifier/page.executor';
-import { IOCIdentifier } from '@config/IOCIdentifier';
+import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
+import { useI18nInterface } from '@/uikit/hooks/useI18nInterface';
+import { useIOC } from '@/uikit/hooks/useIOC';
 
 interface Task {
   id: string;
@@ -20,16 +22,19 @@ interface Task {
 }
 
 export default function ExecutorPage() {
-  const { t } = useBaseRoutePage();
-  const pageBridge = IOC(IOCIdentifier.ExecutorPageBridgeInterface);
-  const jspBridge = IOC(IOCIdentifier.JSONStoragePageInterface);
+  const pageBridge = useIOC(IOCIdentifier.ExecutorPageBridgeInterface);
+  const jspBridge = useIOC(IOCIdentifier.JSONStoragePageInterface);
+  const dialogHandler = useIOC(IOCIdentifier.DialogHandler);
+  const jsonSerializer = useIOC(IOCIdentifier.JSONSerializer);
   const requestTimeout = useStore(jspBridge, jspBridge.selector.requestTimeout);
   const helloState = useStore(pageBridge, pageBridge.selector.helloState);
+  const { t } = useBaseRoutePage();
+  const tt = useI18nInterface(executorI18n);
 
   const [tasks, setTasks] = useState<Task[]>([
     {
       id: '1',
-      name: t(i18nKeys.PAGE_EXECUTOR_TEST_PLUGIN_TITLE),
+      name: tt.testPluginTitle,
       status: 'pending',
       progress: 0,
       type: 'data-sync',
@@ -39,7 +44,7 @@ export default function ExecutorPage() {
     },
     {
       id: '2',
-      name: t(i18nKeys.PAGE_EXECUTOR_TASK_TYPE_DATA_SYNC),
+      name: tt.taskTypeDataSync,
       status: 'pending',
       progress: 0,
       type: 'data-sync',
@@ -49,7 +54,7 @@ export default function ExecutorPage() {
     },
     {
       id: '3',
-      name: t(i18nKeys.PAGE_EXECUTOR_TASK_TYPE_MAINTENANCE),
+      name: tt.taskTypeMaintenance,
       status: 'pending',
       progress: 0,
       type: 'system-maintenance',
@@ -59,7 +64,7 @@ export default function ExecutorPage() {
     },
     {
       id: '4',
-      name: t(i18nKeys.PAGE_EXECUTOR_TASK_TYPE_BACKUP),
+      name: tt.taskTypeBackup,
       status: 'pending',
       progress: 0,
       type: 'backup',
@@ -80,9 +85,7 @@ export default function ExecutorPage() {
   // 监听 helloState 变化，更新任务状态
   useEffect(() => {
     if (helloState.result) {
-      IOC('DialogHandler').success(
-        t(i18nKeys.PAGE_EXECUTOR_PLUGIN_TEST_SUCCESS)
-      );
+      dialogHandler.success(tt.pluginTestSuccess);
       // 更新任务状态
       setTasks((prevTasks) =>
         prevTasks.map((task) =>
@@ -97,7 +100,7 @@ export default function ExecutorPage() {
         )
       );
     } else if (helloState.error) {
-      IOC('DialogHandler').error(t(i18nKeys.PAGE_EXECUTOR_PLUGIN_TEST_FAILURE));
+      dialogHandler.error(tt.pluginTestFailure);
       // 更新任务状态
       setTasks((prevTasks) =>
         prevTasks.map((task) =>
@@ -107,7 +110,7 @@ export default function ExecutorPage() {
         )
       );
     }
-  }, [helloState.result, helloState.error, t]);
+  }, [helloState.result, helloState.error, tt]);
 
   const getStatusColor = (status: Task['status']) => {
     switch (status) {
@@ -142,7 +145,7 @@ export default function ExecutorPage() {
     const end = endTime || new Date();
     const duration = end.getTime() - startTime.getTime();
     const minutes = Math.floor(duration / (1000 * 60));
-    return `${minutes} ${t(i18nKeys.PAGE_EXECUTOR_TASK_DURATION_UNIT)}`;
+    return `${minutes} ${tt.taskDurationUnit}`;
   };
 
   const handleStartTask = async (taskId: string) => {
@@ -166,7 +169,7 @@ export default function ExecutorPage() {
         )
       );
 
-      IOC('DialogHandler').success(
+      dialogHandler.success(
         t(i18nKeys.PAGE_EXECUTOR_TASK_SUCCESS, { name: task.name })
       );
     } catch {
@@ -176,7 +179,7 @@ export default function ExecutorPage() {
         )
       );
 
-      IOC('DialogHandler').error(
+      dialogHandler.error(
         t(i18nKeys.PAGE_EXECUTOR_TASK_FAILURE, { name: task.name })
       );
     }
@@ -194,9 +197,7 @@ export default function ExecutorPage() {
 
   const handleCreateTask = () => {
     if (!customUrl) {
-      IOC('DialogHandler').error(
-        t(i18nKeys.PAGE_EXECUTOR_CUSTOM_TASK_URL_REQUIRED)
-      );
+      dialogHandler.error(tt.customTaskUrlRequired);
       return;
     }
 
@@ -221,35 +222,36 @@ export default function ExecutorPage() {
   };
 
   return (
-    <div className="min-h-screen bg-primary py-8 px-4 sm:px-6 lg:px-8">
+    <div
+      data-testid="ExecutorPage"
+      className="min-h-screen bg-primary py-8 px-4 sm:px-6 lg:px-8"
+    >
       <div className="max-w-6xl mx-auto space-y-6">
         {/* Header Section */}
         <section className="py-8">
           <div className="text-center">
             <h1 className="text-4xl md:text-5xl font-bold mb-6 text-text">
-              {t(i18nKeys.PAGE_EXECUTOR_MAIN_TITLE)}
+              {tt.mainTitle}
             </h1>
-            <p className="text-xl text-text-secondary mb-8">
-              {t(i18nKeys.PAGE_EXECUTOR_DESCRIPTION)}
-            </p>
+            <p className="text-xl text-text-secondary mb-8">{tt.description}</p>
           </div>
         </section>
 
         {/* Test Plugin Section */}
         <section className="bg-secondary shadow sm:rounded-lg p-6 border border-border">
           <h2 className="text-xl font-medium text-text mb-4">
-            {t(i18nKeys.PAGE_EXECUTOR_TEST_PLUGIN_TITLE)}
+            {tt.testPluginTitle}
           </h2>
           <div className="space-y-4">
             <div className="text-text-secondary">
-              {t(i18nKeys.PAGE_EXECUTOR_REQUEST_TIMEOUT)}: {requestTimeout}
+              {tt.requestTimeout}: {requestTimeout}
             </div>
             <div>
               {helloState.loading ? (
                 <div className="text-text-secondary">Loading...</div>
               ) : (
                 <Button type="primary" onClick={pageBridge.onTestPlugins}>
-                  {t(i18nKeys.PAGE_EXECUTOR_TEST_PLUGIN_TITLE)}
+                  {tt.testPluginTitle}
                 </Button>
               )}
             </div>
@@ -258,7 +260,7 @@ export default function ExecutorPage() {
                 <div className="text-red-500">{helloState.error.message}</div>
               ) : (
                 <pre className="text-text-secondary">
-                  {IOC('JSONSerializer').stringify(helloState.result?.data)}
+                  {jsonSerializer.stringify(helloState.result?.data)}
                 </pre>
               )}
             </div>
@@ -268,12 +270,12 @@ export default function ExecutorPage() {
         {/* Create Task Section */}
         <section className="bg-secondary shadow sm:rounded-lg p-6 border border-border">
           <h2 className="text-xl font-medium text-text mb-4">
-            {t(i18nKeys.PAGE_EXECUTOR_CREATE_TASK_TITLE)}
+            {tt.createTaskTitle}
           </h2>
           <div className="space-y-4">
             <div className="flex items-center space-x-4">
               <Input
-                placeholder={t(i18nKeys.PAGE_EXECUTOR_ENTER_URL)}
+                placeholder={tt.enterUrl}
                 value={customUrl}
                 onChange={(e) => setCustomUrl(e.target.value)}
                 className="flex-1"
@@ -298,7 +300,7 @@ export default function ExecutorPage() {
                 <Select.Option value="blob">Blob</Select.Option>
               </Select>
               <Button type="primary" onClick={handleCreateTask}>
-                {t(i18nKeys.PAGE_EXECUTOR_CREATE_BUTTON)}
+                {tt.createButton}
               </Button>
             </div>
           </div>
@@ -310,7 +312,7 @@ export default function ExecutorPage() {
             <div className="text-center">
               <div className="text-2xl font-bold text-text">{tasks.length}</div>
               <div className="text-sm text-text-secondary">
-                {t(i18nKeys.PAGE_EXECUTOR_TASK_STATS_TOTAL)}
+                {tt.taskStatsTotal}
               </div>
             </div>
           </Card>
@@ -320,7 +322,7 @@ export default function ExecutorPage() {
                 {tasks.filter((t) => t.status === 'running').length}
               </div>
               <div className="text-sm text-text-secondary">
-                {t(i18nKeys.PAGE_EXECUTOR_TASK_STATS_RUNNING)}
+                {tt.taskStatsRunning}
               </div>
             </div>
           </Card>
@@ -330,7 +332,7 @@ export default function ExecutorPage() {
                 {tasks.filter((t) => t.status === 'completed').length}
               </div>
               <div className="text-sm text-text-secondary">
-                {t(i18nKeys.PAGE_EXECUTOR_TASK_STATS_COMPLETED)}
+                {tt.taskStatsCompleted}
               </div>
             </div>
           </Card>
@@ -340,7 +342,7 @@ export default function ExecutorPage() {
                 {tasks.filter((t) => t.status === 'failed').length}
               </div>
               <div className="text-sm text-text-secondary">
-                {t(i18nKeys.PAGE_EXECUTOR_TASK_STATS_FAILED)}
+                {tt.taskStatsFailed}
               </div>
             </div>
           </Card>
@@ -349,11 +351,12 @@ export default function ExecutorPage() {
         {/* Task List Section */}
         <section className="bg-secondary shadow sm:rounded-lg p-6 border border-border">
           <h2 className="text-xl font-medium text-text mb-4">
-            {t(i18nKeys.PAGE_EXECUTOR_TASK_LIST_TITLE)}
+            {tt.taskListTitle}
           </h2>
           <div className="space-y-4">
             {tasks.map((task) => (
               <Card
+                data-testid={`ExecutorPageCard-${task.id}`}
                 key={task.id}
                 className="bg-elevated border-border"
                 title={
@@ -395,7 +398,7 @@ export default function ExecutorPage() {
                         type="primary"
                         onClick={() => handleStartTask(task.id)}
                       >
-                        {t(i18nKeys.PAGE_EXECUTOR_TASK_START)}
+                        {tt.taskStart}
                       </Button>
                     )}
                     {task.status === 'running' && (
@@ -404,7 +407,7 @@ export default function ExecutorPage() {
                         danger
                         onClick={() => handleStopTask(task.id)}
                       >
-                        {t(i18nKeys.PAGE_EXECUTOR_TASK_STOP)}
+                        {tt.taskStop}
                       </Button>
                     )}
                   </div>
@@ -417,7 +420,7 @@ export default function ExecutorPage() {
         {/* Task History */}
         <section className="bg-secondary shadow sm:rounded-lg p-6 border border-border">
           <h2 className="text-xl font-medium text-text mb-4">
-            {t(i18nKeys.PAGE_EXECUTOR_TASK_HISTORY_TITLE)}
+            {tt.taskHistoryTitle}
           </h2>
           <div className="space-y-2">
             {tasks
@@ -427,6 +430,7 @@ export default function ExecutorPage() {
               )
               .map((task) => (
                 <div
+                  data-testid={`ExecutorPageHistory-${task.id}`}
                   key={task.id}
                   className="flex items-center justify-between p-2 bg-elevated rounded"
                 >
@@ -444,19 +448,15 @@ export default function ExecutorPage() {
 
         {/* Call to Action Section */}
         <section className="py-8 text-center">
-          <h2 className="text-2xl font-bold mb-4 text-text">
-            {t(i18nKeys.PAGE_EXECUTOR_HELP_TITLE)}
-          </h2>
+          <h2 className="text-2xl font-bold mb-4 text-text">{tt.helpTitle}</h2>
           <p className="text-lg text-text-secondary mb-6">
-            {t(i18nKeys.PAGE_EXECUTOR_HELP_DESCRIPTION)}
+            {tt.helpDescription}
           </p>
           <Space>
             <Button type="primary" size="large">
-              {t(i18nKeys.PAGE_EXECUTOR_VIEW_GUIDE)}
-            </Button>
-            <Button size="large">
-              {t(i18nKeys.PAGE_EXECUTOR_CONTACT_SUPPORT)}
+              {tt.viewGuide}
             </Button>
+            <Button size="large">{tt.contactSupport}</Button>
           </Space>
         </section>
       </div>

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

@@ -1,16 +1,16 @@
+import { baseRoutes } from '@config/app.router';
 import { Button } from 'antd';
+import { clsx } from 'clsx';
+import { LocaleLink } from '@/uikit/components/LocaleLink';
 import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
-import LocaleLink from '@/uikit/components/LocaleLink';
-import clsx from 'clsx';
-import * as i18nKeys from '@config/Identifier';
-import { baseRoutes } from '@config/app.router';
+import type { HomeI18nInterface } from '@config/i18n/homeI18n';
 
 const layoutRoutes = baseRoutes.filter(
   (route) => route.element === 'base/Layout'
 );
 
 const navigationItems = layoutRoutes[0]!
-  .children!.filter((route) => !route.index)
+  .children!.filter((route) => route.path !== '*' && !route.index)
   .map((route) => ({
     href: `/${route.path}`,
     titleKey: route.meta!.title!,
@@ -18,19 +18,17 @@ const navigationItems = layoutRoutes[0]!
   }));
 
 export default function HomePage() {
-  const { t } = useBaseRoutePage();
+  const { t, tt } = useBaseRoutePage<HomeI18nInterface>();
 
   return (
-    <div className="min-h-screen bg-primary">
+    <div data-testid="HomePage" className="min-h-screen bg-primary">
       {/* Hero Section */}
       <section className="py-16 px-4">
         <div className="max-w-4xl mx-auto text-center">
           <h1 className="text-4xl md:text-5xl font-bold mb-6 text-text">
-            {t(i18nKeys.HOME_WELCOME)}
+            {tt.welcome}
           </h1>
-          <p className="text-xl text-text-secondary mb-8">
-            {t(i18nKeys.HOME_DESCRIPTION)}
-          </p>
+          <p className="text-xl text-text-secondary mb-8">{tt.description2}</p>
         </div>
       </section>
 
@@ -39,6 +37,7 @@ export default function HomePage() {
         <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
           {navigationItems.map((item) => (
             <LocaleLink
+              data-testid={`HomePage-NavLink-${item.href.replace('/', '')}`}
               key={item.href}
               href={item.href}
               className={clsx(
@@ -56,7 +55,7 @@ export default function HomePage() {
                 {t(item.descriptionKey)}
               </p>
               <Button type="primary" className="w-full">
-                {t(i18nKeys.HOME_EXPLORE)}
+                {tt.explore}
               </Button>
             </LocaleLink>
           ))}
@@ -67,13 +66,13 @@ export default function HomePage() {
       <section className="py-16 px-4 bg-elevated">
         <div className="max-w-4xl mx-auto text-center">
           <h2 className="text-3xl font-bold mb-4 text-text">
-            {t(i18nKeys.HOME_GET_STARTED_TITLE)}
+            {tt.getStartedTitle}
           </h2>
           <p className="text-lg text-text-secondary mb-8">
-            {t(i18nKeys.HOME_GET_STARTED_DESCRIPTION)}
+            {tt.getStartedDescription}
           </p>
           <Button type="primary" size="large" className="px-8">
-            {t(i18nKeys.HOME_GET_STARTED_BUTTON)}
+            {tt.getStartedButton}
           </Button>
         </div>
       </section>

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

@@ -1,22 +1,60 @@
+import {
+  ResourceEvent,
+  ResourceTable
+} from '@brain-toolkit/antd-blocks/resourceTable';
+import { useFactory, useLifecycle } from '@brain-toolkit/react-kit';
+import * as ErrorIdentifierList from '@config/Identifier/common/common.error';
 import { Button } from 'antd';
+import { IdentifierService } from '@/base/services/IdentifierService';
 import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
-import * as ErrorIdentifierList from '@config/Identifier/common.error';
-import * as i18nKeys from '@config/Identifier/page.identifiter';
+import { useIOC } from '@/uikit/hooks/useIOC';
+import type { Identifiter18nInterface } from '@config/i18n/identifiter18n';
+import type { ResourceTableOption } from '@brain-toolkit/antd-blocks/resourceTable';
 
 export default function IdentifierPage() {
-  const { t } = useBaseRoutePage();
+  const { t, tt } = useBaseRoutePage<Identifiter18nInterface>();
+  const identifierService = useIOC(IdentifierService);
+  const tableEvent = useFactory(ResourceEvent, 'identifier', identifierService);
+
+  useLifecycle(tableEvent);
+
+  const columns: ResourceTableOption<any>[] = [
+    {
+      title: tt.iTableIndex,
+      dataIndex: 'index',
+      key: 'index'
+    },
+    {
+      title: tt.iTableId,
+      dataIndex: 'id',
+      key: 'id'
+    },
+    {
+      title: tt.iTableLabel,
+      dataIndex: 'locale',
+      key: 'locale'
+    },
+    {
+      title: tt.iTableLocaleValue,
+      dataIndex: 'localeValue',
+      key: 'localeValue'
+    }
+  ] as ResourceTableOption<any>[];
 
   return (
-    <div className="min-h-screen bg-primary py-8 px-4 sm:px-6 lg:px-8">
+    <div
+      data-testid="IdentifierPage"
+      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">
         {/* Header Section */}
         <section className="py-8">
           <div className="text-center">
             <h1 className="text-4xl md:text-5xl font-bold mb-6 text-text">
-              {t(i18nKeys.PAGE_ERROR_IDENTIFIER_MAIN_TITLE)}
+              {tt.title}
             </h1>
             <p className="text-xl text-text-secondary mb-8">
-              {t(i18nKeys.PAGE_ERROR_IDENTIFIER_SOURCE_DESCRIPTION)}
+              {tt.sourceDescription}
             </p>
           </div>
         </section>
@@ -25,6 +63,7 @@ export default function IdentifierPage() {
         <div className="grid gap-4">
           {Object.entries(ErrorIdentifierList).map(([key, value]) => (
             <div
+              data-testid={`IdentifierPage-${key}`}
               key={key}
               className="bg-secondary shadow sm:rounded-lg p-6 border border-border hover:bg-elevated transition-colors duration-200"
             >
@@ -40,16 +79,36 @@ export default function IdentifierPage() {
           ))}
         </div>
 
-        {/* Call to Action Section */}
-        <section className="py-8 text-center">
+        <div className="space-y-4">
           <h2 className="text-2xl font-bold mb-4 text-text">
-            {t(i18nKeys.PAGE_ERROR_IDENTIFIER_HELP_TITLE)}
+            {tt.iTableTitle}
           </h2>
+          <div className="text-lg text-text-secondary mb-6">
+            {tt.iTableDescription}
+          </div>
+          <ResourceTable
+            columns={columns}
+            tableEvent={tableEvent}
+            actionProps={false}
+            // use antd default pagination
+            pagination={{
+              pageSizeOptions: [20, 50, 100],
+              current: undefined,
+              pageSize: undefined,
+              total: undefined,
+              onChange: undefined
+            }}
+          />
+        </div>
+
+        {/* Call to Action Section */}
+        <section className="py-8 text-center">
+          <h2 className="text-2xl font-bold mb-4 text-text">{tt.helpTitle}</h2>
           <p className="text-lg text-text-secondary mb-6">
-            {t(i18nKeys.PAGE_ERROR_IDENTIFIER_HELP_DESCRIPTION)}
+            {tt.helpDescription}
           </p>
           <Button type="primary" size="large">
-            {t(i18nKeys.PAGE_ERROR_IDENTIFIER_CONTACT_SUPPORT)}
+            {tt.contactSupport}
           </Button>
         </section>
       </div>

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

@@ -1,32 +1,35 @@
-import { IOC } from '@/core/IOC';
-import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
-import template from 'lodash/template';
-import { useStore } from '@/uikit/hooks/useStore';
-import { Button, Input } from 'antd';
-import * as i18nKeys from '@config/Identifier/page.jsonStorage';
+import { useStore } from '@brain-toolkit/react-kit/hooks/useStore';
+import { jsonStorage18n } from '@config/i18n/jsonStorage18n';
 import { IOCIdentifier } from '@config/IOCIdentifier';
+import { Button, Input } from 'antd';
+import template from 'lodash/template';
+import { useI18nInterface } from '@/uikit/hooks/useI18nInterface';
+import { useIOC } from '@/uikit/hooks/useIOC';
 
 export default function JSONStoragePage() {
-  const pageBridge = IOC(IOCIdentifier.JSONStoragePageInterface);
+  const pageBridge = useIOC(IOCIdentifier.JSONStoragePageInterface);
   const pageState = useStore(pageBridge);
-  const { t } = useBaseRoutePage();
+  const tt = useI18nInterface(jsonStorage18n);
 
   return (
-    <div className="min-h-screen bg-primary py-6 flex flex-col justify-center sm:py-12">
+    <div
+      data-testid="JSONStoragePage"
+      className="min-h-screen bg-primary py-6 flex flex-col justify-center sm:py-12"
+    >
       <div className="relative py-3 sm:max-w-xl sm:mx-auto">
         <div className="bg-secondary shadow-lg rounded-lg px-8 py-6">
           <h1 className="text-3xl font-bold text-center text-text mb-8">
-            {t(i18nKeys.PAGE_JSONSTORAGE_MAIN_TITLE)}
+            {tt.mainTitle}
           </h1>
 
           <div className="space-y-6">
             {/* 无过期时间的测试 */}
             <div className="p-6 bg-elevated rounded-lg">
               <h2 className="text-xl font-semibold text-text mb-4">
-                {t(i18nKeys.PAGE_JSONSTORAGE_PERMANENT_TITLE)}
+                {tt.permanentTitle}
               </h2>
               <div className="text-text-secondary mb-4">
-                {template(t(i18nKeys.PAGE_JSONSTORAGE_FORMAT_TITLE))({
+                {template(tt.formatTitle)({
                   key: 'testKey1',
                   min: 100,
                   max: 9000
@@ -38,12 +41,12 @@ export default function JSONStoragePage() {
                   type="primary"
                   onClick={pageBridge.changeRandomTestKey1}
                 >
-                  {t(i18nKeys.PAGE_JSONSTORAGE_SET_RANDOM)}
+                  {tt.setRandom}
                 </Button>
 
                 <div className="p-4 bg-secondary rounded-lg w-full text-center">
                   <span className="text-text-secondary">
-                    {t(i18nKeys.PAGE_JSONSTORAGE_CURRENT_VALUE)}:{' '}
+                    {tt.currentValue}:{' '}
                   </span>
                   <span className="font-semibold text-text">
                     {JSON.stringify(pageState.testKey1)}
@@ -55,10 +58,10 @@ export default function JSONStoragePage() {
             {/* 带过期时间的测试 */}
             <div className="p-6 bg-elevated rounded-lg">
               <h2 className="text-xl font-semibold text-text mb-4">
-                {t(i18nKeys.PAGE_JSONSTORAGE_EXPIRE_TITLE)}
+                {tt.expireTitle}
               </h2>
               <div className="text-text-secondary mb-4">
-                {template(t(i18nKeys.PAGE_JSONSTORAGE_FORMAT_TITLE))({
+                {template(tt.formatTitle)({
                   key: 'testKey2',
                   min: 100,
                   max: 9000
@@ -77,21 +80,19 @@ export default function JSONStoragePage() {
                     min="1000"
                     step="1000"
                   />
-                  <span className="text-text-secondary">
-                    {t(i18nKeys.PAGE_JSONSTORAGE_MS)}
-                  </span>
+                  <span className="text-text-secondary">{tt.ms}</span>
                 </div>
 
                 <Button
                   type="primary"
                   onClick={pageBridge.onChangeRandomTestKey2}
                 >
-                  {t(i18nKeys.PAGE_JSONSTORAGE_SET_EXPIRE)}
+                  {tt.setExpire}
                 </Button>
 
                 <div className="p-4 bg-secondary rounded-lg w-full text-center">
                   <span className="text-text-secondary">
-                    {t(i18nKeys.PAGE_JSONSTORAGE_CURRENT_VALUE)}:{' '}
+                    {tt.currentValue}:{' '}
                   </span>
                   <span className="font-semibold text-text">
                     {pageState.testKey2}
@@ -103,7 +104,7 @@ export default function JSONStoragePage() {
             {/* 请求超时时间设置 */}
             <div className="p-6 bg-elevated rounded-lg">
               <h2 className="text-xl font-semibold text-text mb-4">
-                {t(i18nKeys.PAGE_JSONSTORAGE_TIMEOUT_TITLE)}
+                {tt.timeoutTitle}
               </h2>
               <div className="flex items-center space-x-4">
                 <Input
@@ -116,9 +117,7 @@ export default function JSONStoragePage() {
                   min="1000"
                   step="1000"
                 />
-                <span className="text-text-secondary">
-                  {t(i18nKeys.PAGE_JSONSTORAGE_MS)}
-                </span>
+                <span className="text-text-secondary">{tt.ms}</span>
               </div>
             </div>
           </div>

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

@@ -1,10 +1,10 @@
-import BaseHeader from '../../uikit/components/BaseHeader';
 import { Outlet } from 'react-router-dom';
 import { ProcessExecutorProvider } from '@/uikit/components/ProcessExecutorProvider';
+import { BaseHeader } from '../../uikit/components/BaseHeader';
 
 export default function Layout() {
   return (
-    <ProcessExecutorProvider>
+    <ProcessExecutorProvider data-testid="Layout">
       <div
         data-testid="basic-layout"
         className="text-base min-h-screen bg-primary"