@qlover/create-app 0.3.3 → 0.3.4

package/templates/react-app/config/Identifier.I18n.ts

@@ -876,3 +876,173 @@ export const PAGE_ERROR_IDENTIFIER_HELP_DESCRIPTION =
  */
 export const PAGE_ERROR_IDENTIFIER_CONTACT_SUPPORT =
   'page.error.identifier.contact_support';
+
+/**
+ * @description Test message for About page
+ * @localZh 这是一条测试消息
+ * @localEn This is a test message
+ */
+export const ABOUT_MESSAGE_TEST = 'about.message.test';
+
+/**
+ * @description Notification title for About page
+ * @localZh 通知标题
+ * @localEn Notification Title
+ */
+export const ABOUT_NOTIFICATION_TITLE = 'about.notification.title';
+
+/**
+ * @description Notification description for About page
+ * @localZh 这是一条测试通知
+ * @localEn This is a test notification
+ */
+export const ABOUT_NOTIFICATION_DESC = 'about.notification.description';
+
+/**
+ * @description Message button text for About page
+ * @localZh 显示 Message
+ * @localEn Show Message
+ */
+export const ABOUT_BTN_MESSAGE = 'about.button.message';
+
+/**
+ * @description Message button text for About page
+ * @localZh 静态消息
+ * @localEn Static Message
+ */
+export const ABOUT_BTN_MESSAGE2 = 'about.button.message2';
+
+/**
+ * @description Notification button text for About page
+ * @localZh 显示 Notification
+ * @localEn Show Notification
+ */
+export const ABOUT_BTN_NOTIFICATION = 'about.button.notification';
+
+/**
+ * @description Notification button text for About page
+ * @localZh 静态通知
+ * @localEn Static Notification
+ */
+export const ABOUT_BTN_NOTIFICATION2 = 'about.button.notification2';
+
+/**
+ * @description Tooltip text for About page
+ * @localZh 这是一个提示文本
+ * @localEn This is a tooltip text
+ */
+export const ABOUT_TOOLTIP_TEXT = 'about.tooltip.text';
+
+/**
+ * @description Tooltip button text for About page
+ * @localZh 悬停显示 Tooltip
+ * @localEn Hover to show Tooltip
+ */
+export const ABOUT_BTN_TOOLTIP = 'about.button.tooltip';
+
+/**
+ * @description Modal title for About page
+ * @localZh 模态框示例
+ * @localEn Modal Example
+ */
+export const ABOUT_MODAL_TITLE = 'about.modal.title';
+
+/**
+ * @description Modal content for About page
+ * @localZh 这是一个模态框的内容
+ * @localEn This is modal content
+ */
+export const ABOUT_MODAL_CONTENT = 'about.modal.content';
+
+/**
+ * @description Modal button text for About page
+ * @localZh 显示 Modal
+ * @localEn Show Modal
+ */
+export const ABOUT_BTN_MODAL = 'about.button.modal';
+
+/**
+ * @description Drawer title for About page
+ * @localZh 抽屉示例
+ * @localEn Drawer Example
+ */
+export const ABOUT_DRAWER_TITLE = 'about.drawer.title';
+
+/**
+ * @description Drawer content for About page
+ * @localZh 这是一个抽屉的内容
+ * @localEn This is drawer content
+ */
+export const ABOUT_DRAWER_CONTENT = 'about.drawer.content';
+
+/**
+ * @description Drawer button text for About page
+ * @localZh 显示 Drawer
+ * @localEn Show Drawer
+ */
+export const ABOUT_BTN_DRAWER = 'about.button.drawer';
+
+/**
+ * @description Popover content for About page
+ * @localZh 这是一个气泡卡片
+ * @localEn This is a popover card
+ */
+export const ABOUT_POPOVER_CONTENT = 'about.popover.content';
+
+/**
+ * @description Popover title for About page
+ * @localZh Popover 标题
+ * @localEn Popover Title
+ */
+export const ABOUT_POPOVER_TITLE = 'about.popover.title';
+
+/**
+ * @description Popover button text for About page
+ * @localZh 显示 Popover
+ * @localEn Show Popover
+ */
+export const ABOUT_BTN_POPOVER = 'about.button.popover';
+
+/**
+ * @description Popconfirm title for About page
+ * @localZh 确认提示
+ * @localEn Confirmation
+ */
+export const ABOUT_POPCONFIRM_TITLE = 'about.popconfirm.title';
+
+/**
+ * @description Popconfirm description for About page
+ * @localZh 您确定要执行此操作吗？
+ * @localEn Are you sure you want to perform this action?
+ */
+export const ABOUT_POPCONFIRM_DESC = 'about.popconfirm.description';
+
+/**
+ * @description Popconfirm button text for About page
+ * @localZh 显示 Popconfirm
+ * @localEn Show Popconfirm
+ */
+export const ABOUT_BTN_POPCONFIRM = 'about.button.popconfirm';
+
+/**
+ * @description Alert message for About page
+ * @localZh 这是一个警告提示
+ * @localEn This is a warning alert
+ */
+export const ABOUT_ALERT_MESSAGE = 'about.alert.message';
+
+/**
+ * @description Common OK button text
+ * @localZh 确定
+ * @localEn OK
+ * @Codebase
+ */
+export const COMMON_OK = 'common.ok';
+
+/**
+ * @description Common Cancel button text
+ * @localZh 取消
+ * @localEn Cancel
+ * @Codebase
+ */
+export const COMMON_CANCEL = 'common.cancel';

package/templates/react-app/config/common.ts

@@ -1,7 +1,20 @@
+import type { ViteDeprecatedAntdOptions } from '@brain-toolkit/antd-theme-override/vite';
+
 export const envPrefix = 'VITE_';
 
 export const browserGlobalsName = 'feGlobals';
 
+/**
+ * 覆盖 antd 主题模式
+ *
+ * - noGlobals 不要使用全局的 antd 组件(推荐)
+ * - overrideStatic 单独覆盖静态组件变量(这个文件就是这个作用)
+ *
+ * If use vite-deprecated-antd, automatically change file
+ */
+export const overrideAntdThemeMode: ViteDeprecatedAntdOptions['mode'] =
+  'noGlobals';
+
 /**
  * bootstrap ,not inject env
  */

package/templates/react-app/package.json

@@ -51,6 +51,7 @@
     "test": "vitest run"
   },
   "dependencies": {
+    "@brain-toolkit/antd-theme-override": "^0.0.3",
     "@qlover/corekit-bridge": "^1.0.3",
     "@qlover/fe-corekit": "^1.3.1",
     "@qlover/logger": "^0.1.1",
@@ -68,9 +69,11 @@
     "react-dom": "^18.3.1",
     "react-i18next": "^15.2.0",
     "react-router-dom": "^7.1.5",
-    "reflect-metadata": "^0.2.2"
+    "reflect-metadata": "^0.2.2",
+    "vite": "^6.3.5"
   },
   "devDependencies": {
+    "@brain-toolkit/ts2locales": "^0.2.3",
     "@qlover/env-loader": "latest",
     "@qlover/eslint-plugin-fe-dev": "^0.2.0",
     "@qlover/fe-scripts": "latest",
@@ -96,7 +99,6 @@
     "tailwindcss": "^4.1.8",
     "typescript": "^5.6.3",
     "typescript-eslint": "^8.15.0",
-    "vite": "^5.4.8",
     "vite-plugin-cross-origin-isolation": "^0.1.6",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.0.5"

package/templates/react-app/public/locales/en/common.json

@@ -123,5 +123,29 @@
   "page.error.identifier.source_description": "Identifier From: '@config/Identifier.Error'",
   "page.error.identifier.help.title": "Need Help?",
   "page.error.identifier.help.description": "If you encounter any issues while using error identifiers, please contact our support team",
-  "page.error.identifier.contact_support": "Contact Support"
+  "page.error.identifier.contact_support": "Contact Support",
+  "about.message.test": "This is a test message",
+  "about.notification.title": "Notification Title",
+  "about.notification.description": "This is a test notification",
+  "about.button.message": "Show Message",
+  "about.button.notification": "Show Notification",
+  "about.tooltip.text": "This is a tooltip text",
+  "about.button.tooltip": "Hover to show Tooltip",
+  "about.modal.title": "Modal Example",
+  "about.modal.content": "This is modal content",
+  "about.button.modal": "Show Modal",
+  "about.drawer.title": "Drawer Example",
+  "about.drawer.content": "This is drawer content",
+  "about.button.drawer": "Show Drawer",
+  "about.popover.content": "This is a popover card",
+  "about.popover.title": "Popover Title",
+  "about.button.popover": "Show Popover",
+  "about.popconfirm.title": "Confirmation",
+  "about.popconfirm.description": "Are you sure you want to perform this action?",
+  "about.button.popconfirm": "Show Popconfirm",
+  "about.alert.message": "This is a warning alert",
+  "common.ok": "OK",
+  "common.cancel": "Cancel",
+  "about.button.message2": "Static Message",
+  "about.button.notification2": "Static Notification"
 }

package/templates/react-app/public/locales/zh/common.json

@@ -123,5 +123,29 @@
   "page.error.identifier.source_description": "来自 '@config/Identifier.Error' 的标识符",
   "page.error.identifier.help.title": "需要帮助？",
   "page.error.identifier.help.description": "如果您在使用错误标识符时遇到问题，请联系我们的支持团队",
-  "page.error.identifier.contact_support": "联系支持"
+  "page.error.identifier.contact_support": "联系支持",
+  "about.message.test": "这是一条测试消息",
+  "about.notification.title": "通知标题",
+  "about.notification.description": "这是一条测试通知",
+  "about.button.message": "显示 Message",
+  "about.button.notification": "显示 Notification",
+  "about.tooltip.text": "这是一个提示文本",
+  "about.button.tooltip": "悬停显示 Tooltip",
+  "about.modal.title": "模态框示例",
+  "about.modal.content": "这是一个模态框的内容",
+  "about.button.modal": "显示 Modal",
+  "about.drawer.title": "抽屉示例",
+  "about.drawer.content": "这是一个抽屉的内容",
+  "about.button.drawer": "显示 Drawer",
+  "about.popover.content": "这是一个气泡卡片",
+  "about.popover.title": "Popover 标题",
+  "about.button.popover": "显示 Popover",
+  "about.popconfirm.title": "确认提示",
+  "about.popconfirm.description": "您确定要执行此操作吗？",
+  "about.button.popconfirm": "显示 Popconfirm",
+  "about.alert.message": "这是一个警告提示",
+  "common.ok": "确定",
+  "common.cancel": "取消",
+  "about.button.message2": "静态消息",
+  "about.button.notification2": "静态通知"
 }

package/templates/react-app/src/App.tsx

@@ -4,8 +4,8 @@ import { lazy, useMemo } from 'react';
 import { RouterRenderComponent } from './uikit/components/RouterRenderComponent';
 import { IOC } from './core/IOC';
 import { RouterController } from './uikit/controllers/RouterController';
-import { RouterLoader, type ComponentValue } from '@/base/cases/router-loader';
-import { ConfigProvider } from 'antd';
+import { RouterLoader, type ComponentValue } from '@/base/cases/RouterLoader';
+import { AntdThemeProvider } from '@brain-toolkit/antd-theme-override/react';
 
 function getAllPages() {
   const modules = import.meta.glob('./pages/**/*.tsx');
@@ -36,7 +36,8 @@ function App() {
   }, []);
 
   return (
-    <ConfigProvider
+    <AntdThemeProvider
+      staticApi={IOC('DialogHandler')}
       theme={{
         cssVar: {
           key: 'fe-theme',
@@ -45,7 +46,7 @@ function App() {
       }}
     >
       <RouterProvider router={routerBase} />
-    </ConfigProvider>
+    </AntdThemeProvider>
   );
 }
 

package/templates/react-app/src/base/apis/AiApi.ts

@@ -1,4 +1,3 @@
-import AppConfig from '@/core/AppConfig';
 import {
   FetchURLPlugin,
   RequestAdapterFetch,
@@ -10,9 +9,10 @@ import {
 } from '@qlover/corekit-bridge';
 import { RequestLogger } from '../cases/RequestLogger';
 import { IOCIdentifier } from '@/core/IOC';
+import { appConfig } from '@/core/globals';
 
 const apiApiAdapter = new RequestAdapterFetch({
-  baseURL: AppConfig.aiApiBaseUrl
+  baseURL: appConfig.aiApiBaseUrl
 });
 
 // 使用 RequestScheduler
@@ -27,8 +27,8 @@ export const AiApiBootstarp: BootstrapExecutorPlugin = {
     apiApiAdapter.usePlugin(new FetchURLPlugin());
     apiApiAdapter.usePlugin(
       new RequestCommonPlugin({
-        tokenPrefix: AppConfig.aiApiTokenPrefix,
-        token: AppConfig.aiApiToken
+        tokenPrefix: appConfig.aiApiTokenPrefix,
+        token: appConfig.aiApiToken
       })
     );
     apiApiAdapter.usePlugin(ioc.get(IOCIdentifier.ApiMockPlugin));

package/templates/react-app/src/base/apis/feApi/FeApiAdapter.ts

@@ -1,11 +1,11 @@
+import type { AppConfig } from '@/base/cases/AppConfig';
 import { IOCIdentifier } from '@/core/IOC';
 import { RequestAdapterFetch } from '@qlover/fe-corekit';
 import { inject, injectable } from 'inversify';
-import { AppConfigImpl } from '@/core/AppConfig';
 
 @injectable()
 export class FeApiAdapter extends RequestAdapterFetch {
-  constructor(@inject(IOCIdentifier.AppConfig) appConfig: AppConfigImpl) {
+  constructor(@inject(IOCIdentifier.AppConfig) appConfig: AppConfig) {
     super({
       responseType: 'json',
       baseURL: appConfig.feApiBaseUrl

package/templates/react-app/src/base/apis/userApi/UserApiAdapter.ts

@@ -1,11 +1,11 @@
+import type { AppConfig } from '@/base/cases/AppConfig';
 import { IOCIdentifier } from '@/core/IOC';
 import { RequestAdapterFetch } from '@qlover/fe-corekit';
 import { inject, injectable } from 'inversify';
-import { AppConfigImpl } from '@/core/AppConfig';
 
 @injectable()
 export class UserApiAdapter extends RequestAdapterFetch {
-  constructor(@inject(IOCIdentifier.AppConfig) appConfig: AppConfigImpl) {
+  constructor(@inject(IOCIdentifier.AppConfig) appConfig: AppConfig) {
     super({
       responseType: 'json',
       baseURL: appConfig.feApiBaseUrl

package/templates/react-app/src/base/cases/AppConfig.ts

@@ -0,0 +1,103 @@
+import type { EnvConfigInterface } from '@qlover/corekit-bridge';
+
+/**
+ * Application Configuration Management
+ *
+ * Significance: Centralized configuration management for the application
+ * Core idea: Single source of truth for all environment and application settings
+ * Main function: Provide typed access to application configuration values
+ * Main purpose: Maintain consistent configuration across the application
+ *
+ * Configuration values are automatically injected from the project's .env files:
+ * - .env: Default environment variables
+ * - .env.development: Development environment variables
+ * - .env.production: Production environment variables
+ * - .env.local: Local overrides (git ignored)
+ *
+ * Environment variables should be prefixed with VITE_ to be exposed to the client side.
+ * Example .env file:
+ * ```
+ * VITE_APP_NAME=MyApp
+ * VITE_API_BASE_URL=http://api.example.com
+ * VITE_USER_TOKEN_KEY=user_token
+ * ```
+ *
+ * @example
+ * const config = new AppConfig();
+ * console.log(config.appName); // Value from VITE_APP_NAME
+ * console.log(config.aiApiBaseUrl); // Value from VITE_AI_API_BASE_URL
+ */
+export class AppConfig implements EnvConfigInterface {
+  /**
+   * Application name identifier
+   * @description Injected from VITE_APP_NAME environment variable
+   */
+  readonly appName = '';
+
+  /**
+   * Current version of the application
+   * @description Injected from VITE_APP_VERSION environment variable
+   */
+  readonly appVersion = '';
+
+  /**
+   * Current environment mode for Vite
+   * @description Represents the running environment (development, production, etc.)
+   * Automatically set based on the current .env file being used
+   */
+  readonly env: string = '';
+
+  /**
+   * Storage key for user authentication token
+   * @description Injected from VITE_USER_TOKEN_STORAGE_KEY environment variable
+   */
+  readonly userTokenStorageKey = '';
+
+  /**
+   * Available OpenAI model configurations
+   * @description List of supported OpenAI models for the application
+   */
+  readonly openAiModels = [
+    'gpt-4o-mini',
+    'gpt-3.5-turbo',
+    'gpt-3.5-turbo-2',
+    'gpt-4',
+    'gpt-4-32k'
+  ];
+
+  /** Base URL for OpenAI API endpoints */
+  readonly openAiBaseUrl = '';
+
+  /** Authentication token for OpenAI API */
+  readonly openAiToken = '';
+
+  /** Prefix for OpenAI authentication token */
+  readonly openAiTokenPrefix = '';
+
+  /** Flag indicating if OpenAI token is required */
+  readonly openAiRequireToken = true;
+
+  /** Default login username */
+  readonly loginUser = '';
+
+  /** Default login password */
+  readonly loginPassword = '';
+
+  /** Base URL for frontend API endpoints */
+  readonly feApiBaseUrl = '';
+
+  /** Base URL for user-related API endpoints */
+  readonly userApiBaseUrl = '';
+
+  /** Base URL for AI service API endpoints */
+  readonly aiApiBaseUrl = 'https://api.openai.com/v1';
+
+  /** Authentication token for AI service API */
+  readonly aiApiToken = '';
+
+  /** Prefix for AI service authentication token */
+  readonly aiApiTokenPrefix = 'Bearer';
+
+  /** Flag indicating if AI service token is required */
+  readonly aiApiRequireToken = true;
+}

package/templates/react-app/src/base/cases/{appError/AppError.ts → AppError.ts}

@@ -1,8 +1,5 @@
 import { ExecutorError } from '@qlover/fe-corekit';
 
-/**
- * 统一当前项目中开发的错误
- */
 export class AppError extends ExecutorError {
   constructor(
     public readonly id: string,

package/templates/react-app/src/base/cases/DialogHandler.ts

@@ -0,0 +1,86 @@
+import type {
+  AntdStaticApiInterface,
+  MessageApi,
+  ModalApi,
+  NotificationApi
+} from '@brain-toolkit/antd-theme-override/react';
+import type {
+  InteractionHubInterface,
+  InteractionOptions,
+  ConfirmOptions
+} from '../port/InteractionHubInterface';
+
+/**
+ * Dialog Handler Implementation
+ *
+ * Implements the InteractionHubInterface using Ant Design components.
+ * Provides concrete implementations for displaying notifications and confirmation dialogs.
+ *
+ * Features:
+ * - Uses Ant Design's message component for notifications
+ * - Uses Ant Design's Modal component for confirmations
+ * - Supports customizable display durations
+ * - Handles error objects appropriately
+ *
+ * @example
+ * const dialog = new DialogHandler();
+ * dialog.success('Data saved successfully');
+ * dialog.confirm({
+ *   title: 'Confirm Delete',
+ *   content: 'Are you sure you want to delete this item?',
+ *   onOk: () => handleDelete(),
+ * });
+ */
+export class DialogHandler
+  implements InteractionHubInterface, AntdStaticApiInterface
+{
+  private antds: {
+    message?: MessageApi;
+    modal?: ModalApi;
+    notification?: NotificationApi;
+  } = {};
+
+  setMessage(message: MessageApi): void {
+    this.antds.message = message;
+  }
+
+  setModal(modal: ModalApi): void {
+    this.antds.modal = modal;
+  }
+
+  setNotification(notification: NotificationApi): void {
+    this.antds.notification = notification;
+  }
+
+  /**
+   * Formats error message from various error types
+   */
+  private formatErrorMessage(error: unknown): string {
+    if (error instanceof Error) return error.message;
+    if (typeof error === 'string') return error;
+    return 'An unknown error occurred';
+  }
+
+  public success(msg: string, options?: InteractionOptions): void {
+    this.antds.message?.success({ content: msg, ...options });
+  }
+
+  public error(msg: string, options?: InteractionOptions): void {
+    this.antds.message?.error({
+      content: options?.error ? this.formatErrorMessage(options.error) : msg,
+      ...options
+    });
+  }
+
+  public info(msg: string, options?: InteractionOptions): void {
+    this.antds.message?.info({ content: msg, ...options });
+  }
+
+  public warn(msg: string, options?: InteractionOptions): void {
+    this.antds.message?.warning({ content: msg, ...options });
+  }
+
+  public confirm(options: ConfirmOptions): void {
+    this.antds.modal?.confirm(options);
+  }
+}