@qlover/create-app 0.3.2 → 0.3.3

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

@@ -1,106 +1,112 @@
-import LocaleLink from '@/uikit/components/LocaleLink';
+import { Button } from 'antd';
 import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
-
-const navigationItems = [
-  {
-    href: '/about',
-    bgColor: 'bg-blue-50',
-    hoverColor: 'hover:bg-blue-100',
-    titleColor: 'text-blue-700',
-    titleKey: 'about',
-    descriptionKey: 'about_description'
-  },
-  {
-    href: '/jsonstorage',
-    bgColor: 'bg-green-50',
-    hoverColor: 'hover:bg-green-100',
-    titleColor: 'text-green-700',
-    titleKey: 'jsonstorage',
-    descriptionKey: 'jsonstorage_description'
-  },
-  {
-    href: '/request',
-    bgColor: 'bg-red-50',
-    hoverColor: 'hover:bg-red-100',
-    titleColor: 'text-red-700',
-    titleKey: 'request',
-    descriptionKey: 'request_description'
-  },
-  {
-    href: '/executor',
-    bgColor: 'bg-purple-50',
-    hoverColor: 'hover:bg-purple-100',
-    titleColor: 'text-purple-700',
-    titleKey: 'executor',
-    descriptionKey: 'executor_description'
-  },
-  {
-    href: '/errorIdentifier',
-    bgColor: 'bg-amber-50',
-    hoverColor: 'hover:bg-amber-100',
-    titleColor: 'text-amber-700',
-    titleKey: 'errorIdentifier',
-    descriptionKey: 'errorIdentifier_description'
-  }
-];
+import LocaleLink from '@/uikit/components/LocaleLink';
+import clsx from 'clsx';
+import * as i18nKeys from '@config/Identifier.I18n';
 
 export default function Home() {
   const { t } = useBaseRoutePage();
 
+  const navigationItems = [
+    {
+      href: '/about',
+      bgColor: 'bg-blue-50',
+      hoverColor: 'hover:bg-blue-100',
+      titleColor: 'text-blue-700',
+      titleKey: i18nKeys.PAGE_ABOUT_TITLE,
+      descriptionKey: i18nKeys.PAGE_ABOUT_DESCRIPTION
+    },
+    {
+      href: '/jsonstorage',
+      bgColor: 'bg-green-50',
+      hoverColor: 'hover:bg-green-100',
+      titleColor: 'text-green-700',
+      titleKey: i18nKeys.PAGE_JSONSTORAGE_TITLE,
+      descriptionKey: i18nKeys.PAGE_JSONSTORAGE_DESCRIPTION
+    },
+    {
+      href: '/request',
+      bgColor: 'bg-red-50',
+      hoverColor: 'hover:bg-red-100',
+      titleColor: 'text-red-700',
+      titleKey: i18nKeys.PAGE_REQUEST_TITLE,
+      descriptionKey: i18nKeys.PAGE_REQUEST_DESCRIPTION
+    },
+    {
+      href: '/executor',
+      bgColor: 'bg-purple-50',
+      hoverColor: 'hover:bg-purple-100',
+      titleColor: 'text-purple-700',
+      titleKey: i18nKeys.PAGE_EXECUTOR_TITLE,
+      descriptionKey: i18nKeys.PAGE_EXECUTOR_DESCRIPTION
+    },
+    {
+      href: '/errorIdentifier',
+      bgColor: 'bg-amber-50',
+      hoverColor: 'hover:bg-amber-100',
+      titleColor: 'text-amber-700',
+      titleKey: i18nKeys.PAGE_ERROR_IDENTIFIER_TITLE,
+      descriptionKey: i18nKeys.PAGE_ERROR_IDENTIFIER_DESCRIPTION
+    }
+  ];
+
   return (
-    <div className="min-h-screen bg-gray-100/90 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-white shadow-lg rounded-lg px-8 py-6">
-          <h1 className="text-3xl font-bold text-center text-gray-800 mb-8">
-            {t('welcome')}
+    <div 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)}
           </h1>
+          <p className="text-xl text-text-secondary mb-8">
+            {t(i18nKeys.HOME_DESCRIPTION)}
+          </p>
+        </div>
+      </section>
 
-          <div className="space-y-6">
-            <div className="text-center text-gray-600 mb-8">
-              {t('description')}
-            </div>
-
-            <div className="grid gap-4">
-              {navigationItems.map((item, index) => (
-                <LocaleLink
-                  key={index}
-                  href={item.href}
-                  className={`block p-4 ${item.bgColor} rounded-lg ${item.hoverColor} transition-colors duration-200`}
-                >
-                  <h2
-                    className={`text-xl font-semibold ${item.titleColor} mb-2`}
-                  >
-                    {t(item.titleKey)}
-                  </h2>
-                  <p className="text-gray-600">{t(item.descriptionKey)}</p>
-                </LocaleLink>
-              ))}
-            </div>
+      {/* Navigation Grid */}
+      <section className="max-w-6xl mx-auto px-4 py-12">
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {navigationItems.map((item) => (
+            <LocaleLink
+              key={item.href}
+              href={item.href}
+              className={clsx(
+                'block rounded-lg p-6',
+                'bg-secondary',
+                'border border-border',
+                'hover:bg-elevated',
+                'transition-colors duration-200'
+              )}
+            >
+              <h3 className={`text-xl font-semibold mb-3 text-text`}>
+                {t(item.titleKey)}
+              </h3>
+              <p className="text-text-secondary mb-4">
+                {t(item.descriptionKey)}
+              </p>
+              <Button type="primary" className="w-full">
+                {t(i18nKeys.HOME_EXPLORE)}
+              </Button>
+            </LocaleLink>
+          ))}
+        </div>
+      </section>
 
-            <div className="mt-8 text-center">
-              <LocaleLink
-                href="https://github.com/qlover/fe-base"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="inline-flex items-center text-gray-600 hover:text-gray-800"
-              >
-                <svg
-                  className="w-5 h-5 mr-2"
-                  fill="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.17 6.839 9.49.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.604-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.464-1.11-1.464-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.167 22 16.418 22 12c0-5.523-4.477-10-10-10z"
-                    clipRule="evenodd"
-                  />
-                </svg>
-                Visit GitHub
-              </LocaleLink>
-            </div>
-          </div>
+      {/* Call to Action Section */}
+      <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)}
+          </h2>
+          <p className="text-lg text-text-secondary mb-8">
+            {t(i18nKeys.HOME_GET_STARTED_DESCRIPTION)}
+          </p>
+          <Button type="primary" size="large" className="px-8">
+            {t(i18nKeys.HOME_GET_STARTED_BUTTON)}
+          </Button>
         </div>
-      </div>
+      </section>
     </div>
   );
 }

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

@@ -3,29 +3,30 @@ import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
 import template from 'lodash/template';
 import { JSONStorageController } from '@/uikit/controllers/JSONStorageController';
 import { useSliceStore } from '@qlover/slice-store-react';
+import { Button, Input } from 'antd';
+import * as i18nKeys from '@config/Identifier.I18n';
 
 export default function JSONStorage() {
   const jsonStorageController = IOC(JSONStorageController);
   const controllerState = useSliceStore(jsonStorageController);
-
   const { t } = useBaseRoutePage();
 
   return (
-    <div className="min-h-screen bg-gray-100 py-6 flex flex-col justify-center sm:py-12">
+    <div 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-white shadow-lg rounded-lg px-8 py-6">
-          <h1 className="text-3xl font-bold text-center text-gray-800 mb-8">
-            {t('title')}
+        <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)}
           </h1>
 
           <div className="space-y-6">
             {/* 无过期时间的测试 */}
-            <div className="p-6 bg-gray-50 rounded-lg">
-              <h2 className="text-xl font-semibold text-gray-800 mb-4">
-                {t('title2')}
+            <div className="p-6 bg-elevated rounded-lg">
+              <h2 className="text-xl font-semibold text-text mb-4">
+                {t(i18nKeys.PAGE_JSONSTORAGE_PERMANENT_TITLE)}
               </h2>
-              <div className="text-gray-600 mb-4">
-                {template(t('format.title'))({
+              <div className="text-text-secondary mb-4">
+                {template(t(i18nKeys.PAGE_JSONSTORAGE_FORMAT_TITLE))({
                   key: 'testKey1',
                   min: 100,
                   max: 9000
@@ -33,16 +34,18 @@ export default function JSONStorage() {
               </div>
 
               <div className="flex flex-col items-center space-y-4">
-                <button
+                <Button
+                  type="primary"
                   onClick={jsonStorageController.changeRandomTestKey1}
-                  className="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors duration-200"
                 >
-                  {t('setRandomValue')}
-                </button>
+                  {t(i18nKeys.PAGE_JSONSTORAGE_SET_RANDOM)}
+                </Button>
 
-                <div className="p-4 bg-white rounded-lg w-full text-center">
-                  <span className="text-gray-600">{t('currentValue')}: </span>
-                  <span className="font-semibold text-gray-800">
+                <div className="p-4 bg-secondary rounded-lg w-full text-center">
+                  <span className="text-text-secondary">
+                    {t(i18nKeys.PAGE_JSONSTORAGE_CURRENT_VALUE)}:{' '}
+                  </span>
+                  <span className="font-semibold text-text">
                     {controllerState.testKey1}
                   </span>
                 </div>
@@ -50,12 +53,12 @@ export default function JSONStorage() {
             </div>
 
             {/* 带过期时间的测试 */}
-            <div className="p-6 bg-gray-50 rounded-lg">
-              <h2 className="text-xl font-semibold text-gray-800 mb-4">
-                {t('title3')}
+            <div className="p-6 bg-elevated rounded-lg">
+              <h2 className="text-xl font-semibold text-text mb-4">
+                {t(i18nKeys.PAGE_JSONSTORAGE_EXPIRE_TITLE)}
               </h2>
-              <div className="text-gray-600 mb-4">
-                {template(t('format.title'))({
+              <div className="text-text-secondary mb-4">
+                {template(t(i18nKeys.PAGE_JSONSTORAGE_FORMAT_TITLE))({
                   key: 'testKey2',
                   min: 100,
                   max: 9000
@@ -64,7 +67,7 @@ export default function JSONStorage() {
 
               <div className="flex flex-col items-center space-y-4">
                 <div className="flex items-center space-x-4">
-                  <input
+                  <Input
                     type="number"
                     value={controllerState.expireTime}
                     onChange={(e) =>
@@ -72,23 +75,27 @@ export default function JSONStorage() {
                         Number(e.target.value)
                       )
                     }
-                    className="px-4 py-2 border rounded-lg w-32"
+                    className="w-32"
                     min="1000"
                     step="1000"
                   />
-                  <span className="text-gray-600">{t('ms')}</span>
+                  <span className="text-text-secondary">
+                    {t(i18nKeys.PAGE_JSONSTORAGE_MS)}
+                  </span>
                 </div>
 
-                <button
+                <Button
+                  type="primary"
                   onClick={jsonStorageController.onChangeRandomTestKey2}
-                  className="px-6 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors duration-200"
                 >
-                  {t('setExpireTime')}
-                </button>
+                  {t(i18nKeys.PAGE_JSONSTORAGE_SET_EXPIRE)}
+                </Button>
 
-                <div className="p-4 bg-white rounded-lg w-full text-center">
-                  <span className="text-gray-600">{t('currentValue')}: </span>
-                  <span className="font-semibold text-gray-800">
+                <div className="p-4 bg-secondary rounded-lg w-full text-center">
+                  <span className="text-text-secondary">
+                    {t(i18nKeys.PAGE_JSONSTORAGE_CURRENT_VALUE)}:{' '}
+                  </span>
+                  <span className="font-semibold text-text">
                     {controllerState.testKey2}
                   </span>
                 </div>
@@ -96,12 +103,12 @@ export default function JSONStorage() {
             </div>
 
             {/* 请求超时时间设置 */}
-            <div className="p-6 bg-gray-50 rounded-lg">
-              <h2 className="text-xl font-semibold text-gray-800 mb-4">
-                {t('title4')}
+            <div className="p-6 bg-elevated rounded-lg">
+              <h2 className="text-xl font-semibold text-text mb-4">
+                {t(i18nKeys.PAGE_JSONSTORAGE_TIMEOUT_TITLE)}
               </h2>
               <div className="flex items-center space-x-4">
-                <input
+                <Input
                   type="number"
                   value={controllerState.requestTimeout}
                   onChange={(e) =>
@@ -109,11 +116,13 @@ export default function JSONStorage() {
                       Number(e.target.value)
                     )
                   }
-                  className="px-4 py-2 border rounded-lg w-32"
+                  className="w-32"
                   min="1000"
                   step="1000"
                 />
-                <span className="text-gray-600">{t('ms')}</span>
+                <span className="text-text-secondary">
+                  {t(i18nKeys.PAGE_JSONSTORAGE_MS)}
+                </span>
               </div>
             </div>
           </div>

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

@@ -5,10 +5,13 @@ import { ProcessProvider } from '@/uikit/providers/ProcessProvider';
 export default function Layout() {
   return (
     <ProcessProvider>
-      <div data-testid="basic-layout" className="text-base">
+      <div
+        data-testid="basic-layout"
+        className="text-base min-h-screen bg-primary"
+      >
         <BaseHeader />
 
-        <div className="text-black bg-white">
+        <div className="text-text bg-primary">
           <Outlet />
         </div>
       </div>