@qlover/create-app 0.10.1 → 0.10.3

package/dist/templates/next-app/src/uikit/{components → components-app}/ThemeSwitcher.tsx

@@ -14,11 +14,20 @@ import { useMountedClient } from '@brain-toolkit/react-kit';
 import { Dropdown } from 'antd';
 import { clsx } from 'clsx';
 import { useTheme } from 'next-themes';
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
+import {
+  COMMON_THEME_DARK,
+  COMMON_THEME_DEFAULT,
+  COMMON_THEME_LIGHT,
+  COMMON_THEME_PINK
+} from '@config/Identifier';
+import { I } from '@config/IOCIdentifier';
 import { type SupportedTheme, themeConfig } from '@config/theme';
+import { useIOC } from '../hook/useIOC';
+import { useWarnTranslations } from '../hook/useWarnTranslations';
 import type { ItemType } from 'antd/es/menu/interface';
 
-const { supportedThemes } = themeConfig;
+const { supportedThemes, storageKey } = themeConfig;
 
 const defaultTheme = supportedThemes[0] || 'system';
 const themesList = ['system', ...supportedThemes];
@@ -31,71 +40,76 @@ const colorMap: Record<
     normalColor: string;
     Icon: React.ElementType;
     SelectedIcon: React.ElementType;
-    TriggerIcon: React.ElementType;
   }
 > = {
   system: {
-    i18nkey: 'System',
+    i18nkey: COMMON_THEME_DEFAULT,
     selectedColor: 'text-text',
     normalColor: 'text-text-secondary',
     Icon: SettingOutlined,
-    SelectedIcon: SettingFilled,
-    TriggerIcon: SettingOutlined
+    SelectedIcon: SettingFilled
   },
   light: {
-    i18nkey: 'Light',
+    i18nkey: COMMON_THEME_LIGHT,
     selectedColor: 'text-text',
     normalColor: 'text-text-secondary',
     Icon: SunOutlined,
-    SelectedIcon: SunFilled,
-    TriggerIcon: SunOutlined
+    SelectedIcon: SunFilled
   },
   dark: {
-    i18nkey: 'Dark',
+    i18nkey: COMMON_THEME_DARK,
     selectedColor: 'text-[#9333ea]',
     normalColor: 'text-[#a855f7]',
     Icon: MoonOutlined,
-    SelectedIcon: MoonFilled,
-    TriggerIcon: MoonOutlined
+    SelectedIcon: MoonFilled
   },
   pink: {
-    i18nkey: 'Pink',
+    i18nkey: COMMON_THEME_PINK,
     selectedColor: 'text-[#f472b6]',
     normalColor: 'text-[#ec4899]',
     Icon: HeartOutlined,
-    SelectedIcon: HeartFilled,
-    TriggerIcon: HeartOutlined
+    SelectedIcon: HeartFilled
   }
 };
 
 export function ThemeSwitcher() {
   const { theme: currentTheme, resolvedTheme, setTheme } = useTheme();
   const mounted = useMountedClient();
+  const cookieStorage = useIOC(I.CookieStorage);
+  const t = useWarnTranslations();
+
+  useEffect(() => {
+    if (resolvedTheme) {
+      cookieStorage.setItem(storageKey, resolvedTheme);
+    }
+  }, [resolvedTheme, cookieStorage]);
 
-  const themeOptions = themesList.map((themeName) => {
-    const { i18nkey, selectedColor, normalColor, Icon, SelectedIcon } =
-      colorMap[themeName] || colorMap.light;
+  const themeOptions = useMemo(() => {
+    return themesList.map((themeName) => {
+      const { i18nkey, selectedColor, normalColor, Icon, SelectedIcon } =
+        colorMap[themeName] || colorMap.light;
 
-    const isCurrentTheme =
-      currentTheme === themeName ||
-      (themeName === resolvedTheme && currentTheme === 'system');
+      const isCurrentTheme =
+        currentTheme === themeName ||
+        (themeName === resolvedTheme && currentTheme === 'system');
 
-    return {
-      key: themeName,
-      value: themeName,
-      label: (
-        <div
-          className={clsx(
-            'flex items-center gap-2',
-            isCurrentTheme ? selectedColor : normalColor
-          )}
-        >
-          {isCurrentTheme ? <SelectedIcon /> : <Icon />}
-          <span>{i18nkey}</span>
-        </div>
-      )
-    } as ItemType;
-  });
+      return {
+        key: themeName,
+        value: themeName,
+        label: (
+          <div
+            className={clsx(
+              'flex items-center gap-2',
+              isCurrentTheme ? selectedColor : normalColor
+            )}
+          >
+            {isCurrentTheme ? <SelectedIcon /> : <Icon />}
+            <span>{t(i18nkey)}</span>
+          </div>
+        )
+      } as ItemType;
+    });
+  }, [currentTheme, resolvedTheme, t]);
 
   const nextTheme = useMemo(() => {
     if (!currentTheme) {
@@ -106,26 +120,13 @@ export function ThemeSwitcher() {
     return supportedThemes[targetIndex % supportedThemes.length];
   }, [currentTheme]);
 
-  const TriggerIcon = colorMap[currentTheme || defaultTheme].TriggerIcon;
-
-  if (!mounted) {
-    return (
-      <span
-        data-testid="ThemeSwitcher"
-        className="text-text hover:text-text-hover cursor-pointer text-lg transition-colors"
-      >
-        <SettingOutlined />
-      </span>
-    );
-  }
-
   return (
     <Dropdown
       data-testid="ThemeSwitcherDropdown"
       trigger={['hover']}
       menu={{
         items: themeOptions,
-        selectedKeys: [currentTheme!],
+        selectedKeys: mounted ? [resolvedTheme!] : undefined,
         onClick: ({ key }) => {
           setTheme(key);
         }
@@ -136,7 +137,7 @@ export function ThemeSwitcher() {
         className="text-text hover:text-text-hover cursor-pointer text-lg transition-colors"
         onClick={() => setTheme(nextTheme)}
       >
-        <TriggerIcon />
+        <SunOutlined />
       </span>
     </Dropdown>
   );

package/dist/templates/next-app/src/uikit/components-pages/LanguageSwitcher.tsx

@@ -0,0 +1,98 @@
+'use client';
+
+import { TranslationOutlined } from '@ant-design/icons';
+import { Dropdown } from 'antd';
+import { useRouter } from 'next/router';
+import { useLocale } from 'next-intl';
+import { useCallback, useMemo, useState } from 'react';
+import { useLocaleRoutes } from '@config/common';
+import { i18nConfig } from '@config/i18n';
+import type { LocaleType } from '@config/i18n';
+import type { ItemType } from 'antd/es/menu/interface';
+
+export function LanguageSwitcher() {
+  const router = useRouter();
+  const currentLocale = useLocale() as LocaleType;
+  const [isPending, setIsPending] = useState(false);
+
+  const options: ItemType[] = useMemo(() => {
+    return i18nConfig.supportedLngs.map(
+      (lang) =>
+        ({
+          type: 'item',
+          key: lang,
+          value: lang,
+          label:
+            i18nConfig.localeNames[lang as keyof typeof i18nConfig.localeNames]
+        }) as ItemType
+    );
+  }, []);
+
+  const handleLanguageChange = useCallback(
+    async (value: string) => {
+      if (isPending || value === currentLocale) return;
+
+      setIsPending(true);
+
+      try {
+        // Get current path
+        let newPath = router.asPath;
+
+        if (useLocaleRoutes) {
+          // Replace locale in path (e.g., /en/about -> /zh/about)
+          const pathWithoutLocale = newPath.replace(
+            new RegExp(`^/${currentLocale}(/|$)`),
+            '/'
+          );
+          // Remove leading slash if path is root
+          const cleanPath = pathWithoutLocale === '/' ? '' : pathWithoutLocale;
+          newPath = `/${value}${cleanPath}`;
+        } else {
+          // If not using locale routes, just update query param
+          newPath = router.pathname;
+          router.replace({
+            pathname: router.pathname,
+            query: { ...router.query, locale: value }
+          });
+          setIsPending(false);
+          return;
+        }
+
+        // Replace the route
+        router.replace(newPath);
+      } finally {
+        setIsPending(false);
+      }
+    },
+    [router, currentLocale, isPending]
+  );
+
+  const nextLocale = useMemo(() => {
+    const targetIndex = i18nConfig.supportedLngs.indexOf(currentLocale) + 1;
+    return i18nConfig.supportedLngs[
+      targetIndex % i18nConfig.supportedLngs.length
+    ];
+  }, [currentLocale]);
+
+  return (
+    <Dropdown
+      data-testid="LanguageSwitcherDropdown"
+      trigger={['hover']}
+      menu={{
+        selectedKeys: [currentLocale],
+        items: options,
+        onClick: ({ key }) => {
+          handleLanguageChange(key);
+        }
+      }}
+    >
+      <span
+        data-testid="LanguageSwitcher"
+        className="text-text hover:text-text-hover cursor-pointer text-lg transition-colors"
+        onClick={() => handleLanguageChange(nextLocale)}
+      >
+        <TranslationOutlined />
+      </span>
+    </Dropdown>
+  );
+}

package/dist/templates/next-app/src/uikit/components-pages/PagesRoutePage.tsx

@@ -0,0 +1,93 @@
+import { TeamOutlined } from '@ant-design/icons';
+import { clsx } from 'clsx';
+import { useLocale } from 'next-intl';
+import { useMemo } from 'react';
+import { LanguageSwitcher } from './LanguageSwitcher';
+import { LocaleLink } from '../components/LocaleLink';
+import { ThemeSwitcher } from '../components-app/ThemeSwitcher';
+import type { AppRoutePageProps } from '../components-app/AppRoutePage';
+
+/**
+ * App Route Page
+ *
+ * 主要用于 /src/app 目录下页面的基础布局，包含头部、主体内容等
+ *
+ * @description
+ * - /src/app/[locale]/page.tsx
+ * - /src/app/[locale]/login/page.tsx
+ *
+ */
+export function PagesRoutePage({
+  children,
+  showAdminButton,
+  mainProps,
+  headerClassName,
+  tt,
+  headerHref = '/',
+  ...props
+}: AppRoutePageProps) {
+  const locale = useLocale();
+  const adminTitle = tt.adminTitle;
+
+  const actions = useMemo(() => {
+    return [
+      showAdminButton && (
+        <LocaleLink
+          key="admin-button"
+          href="/admin"
+          title={adminTitle}
+          locale={locale}
+          className="text-text hover:text-text-hover cursor-pointer text-lg transition-colors"
+        >
+          <TeamOutlined className="text-lg text-text" />
+        </LocaleLink>
+      ),
+
+      <LanguageSwitcher key="language-switcher" />,
+
+      <ThemeSwitcher key="theme-switcher" />
+    ].filter(Boolean);
+  }, [adminTitle, showAdminButton, locale]);
+
+  return (
+    <div
+      data-testid="AppRoutePage"
+      className="flex flex-col min-h-screen"
+      {...props}
+    >
+      <header
+        data-testid="BaseHeader"
+        className="h-14 bg-secondary border-b border-c-border sticky top-0 z-50"
+      >
+        <div
+          className={clsx(
+            'flex items-center justify-between h-full px-4 mx-auto max-w-7xl',
+            headerClassName
+          )}
+        >
+          <div className="flex items-center">
+            <LocaleLink
+              data-testid="BaseHeaderLogo"
+              title={tt.title}
+              href={headerHref}
+              locale={locale}
+              className="flex items-center hover:opacity-80 transition-opacity"
+            >
+              <span
+                data-testid="base-header-app-name"
+                className="text-lg font-semibold text-text"
+              >
+                {tt.title}
+              </span>
+            </LocaleLink>
+          </div>
+          <div className="flex items-center gap-2 md:gap-4">{actions}</div>
+        </div>
+      </header>
+
+      <main className="flex flex-1 flex-col bg-primary" {...mainProps}>
+        {children}
+      </main>
+    </div>
+  );
+}

package/dist/templates/next-app/src/uikit/context/IOCContext.ts

@@ -1,11 +1,23 @@
 'use client';
 
+import {
+  type IOCContainerInterface,
+  type IOCFunctionInterface
+} from '@qlover/corekit-bridge';
 import { createContext } from 'react';
+import { ClientIOC } from '@/core/clientIoc/ClientIOC';
 import type { IOCIdentifierMap } from '@config/IOCIdentifier';
-import type {
-  IOCContainerInterface,
-  IOCFunctionInterface
-} from '@qlover/corekit-bridge';
+
+// export const IOCInstance = new ClientIOC();
+
+// export const IOCContext =
+//   createContext<IOCInterface<IOCIdentifierMap, IOCContainerInterface>>(
+//     IOCInstance
+//   );
+
+export const clientIOC = new ClientIOC();
+
+export const IOCInstance = clientIOC.create();
 
 export const IOCContext = createContext<IOCFunctionInterface<
   IOCIdentifierMap,

package/dist/templates/next-app/src/uikit/hook/useStrictEffect.ts

@@ -0,0 +1,32 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * In React Strict Mode, ensure that the effect is executed only once when each dependency changes
+ * @param effect The effect function to execute
+ * @param deps The dependency array
+ */
+export const useStrictEffect = (
+  effect: () => void | (() => void),
+  deps?: React.DependencyList
+) => {
+  const mountedRef = useRef(false);
+  const depsRef = useRef(deps);
+
+  useEffect(() => {
+    // Check if the dependencies have changed
+    const depsChanged =
+      !deps ||
+      !depsRef.current ||
+      deps.some((dep, i) => dep !== depsRef.current![i]);
+
+    // Update the dependency reference
+    depsRef.current = deps;
+
+    // If it's the first mount or the dependencies have changed, execute the effect
+    if (!mountedRef.current || depsChanged) {
+      mountedRef.current = true;
+      return effect();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+};

package/dist/templates/next-app/tsconfig.json

@@ -11,7 +11,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,
@@ -32,7 +32,8 @@
     "src/**/*.tsx",
     "migrations/**/*.ts",
     ".next/types/**/*.ts",
-    "config/**/*.ts"
+    "config/**/*.ts",
+    ".next/dev/types/**/*.ts"
   ],
   "exclude": ["node_modules"]
 }

package/dist/templates/react-app/__tests__/__mocks__/BootstrapTest.ts

@@ -7,7 +7,9 @@ export interface BootstrapTestArgs extends Omit<BootstrapClientArgs, 'ioc'> {
 }
 
 export class BootstrapTest {
-  static async main(args: BootstrapTestArgs): Promise<BootstrapClientArgs> {
+  public static async main(
+    args: BootstrapTestArgs
+  ): Promise<BootstrapClientArgs> {
     const result = await BootstrapClient.main({ ...args, ioc: testIOC });
     return result;
   }

package/dist/templates/react-app/__tests__/__mocks__/MockAppConfig.ts

@@ -2,17 +2,17 @@ import { name, version } from '../../package.json';
 import type { EnvConfigInterface } from '@qlover/corekit-bridge';
 
 export class MockAppConfig implements EnvConfigInterface {
-  appName = name;
+  public appName = name;
 
-  appVersion = version;
+  public appVersion = version;
 
-  env: string = 'test';
+  public env: string = 'test';
 
-  userTokenStorageKey = '__fe_user_token__';
+  public userTokenStorageKey = '__fe_user_token__';
 
-  userInfoStorageKey = '__fe_user_info__';
+  public userInfoStorageKey = '__fe_user_info__';
 
-  openAiModels = [
+  public openAiModels = [
     'gpt-4o-mini',
     'gpt-3.5-turbo',
     'gpt-3.5-turbo-2',
@@ -20,29 +20,29 @@ export class MockAppConfig implements EnvConfigInterface {
     'gpt-4-32k'
   ];
 
-  openAiBaseUrl = '';
+  public openAiBaseUrl = '';
 
-  openAiToken = '';
+  public openAiToken = '';
 
-  openAiTokenPrefix = '';
+  public openAiTokenPrefix = '';
 
-  openAiRequireToken = true;
+  public openAiRequireToken = true;
 
-  loginUser = '';
+  public loginUser = '';
 
-  loginPassword = '';
+  public loginPassword = '';
 
-  feApiBaseUrl = '';
+  public feApiBaseUrl = '';
 
-  userApiBaseUrl = '';
+  public userApiBaseUrl = '';
 
-  aiApiBaseUrl = 'https://api.openai.com/v1';
+  public aiApiBaseUrl = 'https://api.openai.com/v1';
 
-  aiApiToken = '';
+  public aiApiToken = '';
 
-  aiApiTokenPrefix = 'Bearer';
+  public aiApiTokenPrefix = 'Bearer';
 
-  aiApiRequireToken = true;
+  public aiApiRequireToken = true;
 
-  bootHref = '';
+  public bootHref = '';
 }

package/dist/templates/react-app/__tests__/__mocks__/MockDialogHandler.ts

@@ -5,12 +5,12 @@ import type { AntdStaticApiInterface } from '@brain-toolkit/antd-theme-override/
 export class MockDialogHandler
   implements InteractionHubInterface, AntdStaticApiInterface
 {
-  setMessage = vi.fn();
-  setModal = vi.fn();
-  setNotification = vi.fn();
-  success = vi.fn();
-  error = vi.fn();
-  info = vi.fn();
-  warn = vi.fn();
-  confirm = vi.fn();
+  public setMessage = vi.fn();
+  public setModal = vi.fn();
+  public setNotification = vi.fn();
+  public success = vi.fn();
+  public error = vi.fn();
+  public info = vi.fn();
+  public warn = vi.fn();
+  public confirm = vi.fn();
 }

package/dist/templates/react-app/__tests__/__mocks__/MockLogger.ts

@@ -2,13 +2,13 @@ import { vi } from 'vitest';
 import type { LoggerInterface } from '@qlover/logger';
 
 export class MockLogger implements LoggerInterface {
-  info = vi.fn();
-  error = vi.fn();
-  debug = vi.fn();
-  warn = vi.fn();
-  trace = vi.fn();
-  log = vi.fn();
-  fatal = vi.fn();
-  addAppender = vi.fn();
-  context = vi.fn();
+  public info = vi.fn();
+  public error = vi.fn();
+  public debug = vi.fn();
+  public warn = vi.fn();
+  public trace = vi.fn();
+  public log = vi.fn();
+  public fatal = vi.fn();
+  public addAppender = vi.fn();
+  public context = vi.fn();
 }

package/dist/templates/react-app/__tests__/__mocks__/components/TestBootstrapsProvider.tsx

@@ -41,7 +41,7 @@ export function TestBootstrapsProvider({
   });
 
   return (
-    <IOCContext.Provider data-testid="TestBootstrapsProvider" value={IOC}>
+    <IOCContext.Provider value={IOC}>
       <TestRouter
         initialEntries={routerInitialEntries}
         initialIndex={routerInitialIndex}

package/dist/templates/react-app/__tests__/__mocks__/i18nextHttpBackend.ts

@@ -24,13 +24,13 @@ const resources: Record<string, Record<string, Record<string, string>>> = {
  * Implements the backend interface to avoid network requests
  */
 export class MockHttpBackend {
-  type = 'backend';
+  public type = 'backend';
 
   /**
    * Initialize the backend
    * This is called by i18next when .use() is called
    */
-  init(
+  public init(
     _services: unknown,
     _backendOptions: unknown,
     _i18nextOptions: unknown,
@@ -60,7 +60,7 @@ export class MockHttpBackend {
    * Read translation data for a language and namespace
    * This method is called by i18next to load translations
    */
-  read(
+  public read(
     language: string,
     namespace: string,
     callback: (error: Error | null, data?: Record<string, string>) => void
@@ -82,7 +82,7 @@ export class MockHttpBackend {
    * Load URL - called by i18next-http-backend to load from URL
    * We intercept this and return data from memory instead
    */
-  loadUrl(
+  public loadUrl(
     _url: string,
     callback: (error: Error | null, data?: Record<string, string>) => void
   ): void {
@@ -104,7 +104,7 @@ export class MockHttpBackend {
   /**
    * Create - not used in our mock
    */
-  create(): void {
+  public create(): void {
     // No-op
   }
 }

package/dist/templates/react-app/__tests__/__mocks__/testIOC/TestIOC.ts

@@ -11,22 +11,26 @@ import type {
   IOCFunctionInterface
 } from '@qlover/corekit-bridge';
 
-export class TestIOC
-  implements IOCInterface<IOCIdentifierMap, IOCContainerInterface>
-{
+export class TestIOC implements IOCInterface<
+  IOCIdentifierMap,
+  IOCContainerInterface
+> {
   protected ioc: IOCFunctionInterface<
     IOCIdentifierMap,
     IOCContainerInterface
   > | null = null;
 
-  getIoc(): IOCFunctionInterface<
+  public getIoc(): IOCFunctionInterface<
     IOCIdentifierMap,
     IOCContainerInterface
   > | null {
     return this.ioc;
   }
 
-  create(
+  /**
+   * @override
+   */
+  public create(
     options: IocRegisterOptions
   ): IOCFunctionInterface<IOCIdentifierMap, IOCContainerInterface> {
     if (this.ioc) {

package/dist/templates/react-app/__tests__/__mocks__/testIOC/TestIOCRegister.ts

@@ -18,9 +18,10 @@ import type {
 /**
  * TestIOCRegister - Register mock services for testing
  */
-export class TestIOCRegister
-  implements IOCRegisterInterface<IOCContainerInterface, IocRegisterOptions>
-{
+export class TestIOCRegister implements IOCRegisterInterface<
+  IOCContainerInterface,
+  IocRegisterOptions
+> {
   constructor(protected options: IocRegisterOptions) {}
 
   protected registerGlobals(ioc: IOCContainerInterface): void {
@@ -39,7 +40,10 @@ export class TestIOCRegister
     ioc.bind(I.CookieStorage, globals.cookieStorage);
   }
 
-  register(
+  /**
+   * @override
+   */
+  public register(
     ioc: IOCContainerInterface,
     _manager: IOCManagerInterface<IOCContainerInterface>
   ): void {