@qlover/create-app 0.7.14 → 0.8.0

package/dist/templates/react-app/src/uikit/components/ClientSeo.tsx

@@ -0,0 +1,62 @@
+/* eslint-disable no-restricted-globals */
+import { useEffect } from 'react';
+import type { PageI18nInterface } from '@config/i18n/PageI18nInterface';
+
+export function ClientSeo(props: {
+  i18nInterface: PageI18nInterface;
+  children?: React.ReactNode;
+}) {
+  const { i18nInterface, children } = props;
+
+  useEffect(() => {
+    // Set title
+    document.title = i18nInterface.title;
+
+    // Helper function to create or update meta tag
+    const setMetaTag = (name: string, content: string | undefined) => {
+      if (!content) return;
+
+      let meta = document.querySelector(`meta[name="${name}"]`);
+      if (!meta) {
+        meta = document.createElement('meta');
+        meta.setAttribute('name', name);
+        document.head.appendChild(meta);
+      }
+      meta.setAttribute('content', content);
+    };
+
+    // Set basic meta tags
+    setMetaTag('description', i18nInterface.description);
+    setMetaTag('keywords', i18nInterface.keywords);
+    setMetaTag('author', i18nInterface.author);
+    setMetaTag('publishedTime', i18nInterface.publishedTime);
+    setMetaTag('modifiedTime', i18nInterface.modifiedTime);
+
+    // Set canonical
+    if (i18nInterface.canonical) {
+      setMetaTag('canonical', i18nInterface.canonical);
+    }
+
+    // Set Open Graph tags
+    if (i18nInterface.og) {
+      setMetaTag('og:title', i18nInterface.og.title);
+      setMetaTag('og:description', i18nInterface.og.description);
+      setMetaTag('og:image', i18nInterface.og.image);
+    }
+
+    // Cleanup function (optional, removes meta tags when component unmounts)
+    return () => {
+      // You can optionally remove these tags on unmount
+      // const metaNames = [
+      //   'description', 'keywords', 'author', 'publishedTime',
+      //   'modifiedTime', 'canonical', 'og:title', 'og:description', 'og:image'
+      // ];
+      // metaNames.forEach(name => {
+      //   const meta = document.querySelector(`meta[name="${name}"]`);
+      //   if (meta) meta.remove();
+      // });
+    };
+  }, [i18nInterface]);
+
+  return <>{children}</>;
+}

package/dist/templates/react-app/src/uikit/components/ComboProvider.tsx

@@ -0,0 +1,38 @@
+'use client';
+import { AntdThemeProvider } from '@brain-toolkit/antd-theme-override/react';
+import { useMountedClient } from '@brain-toolkit/react-kit';
+import { I } from '@config/IOCIdentifier';
+import { clientIOC } from '@/core/clientIoc/ClientIOC';
+import type { CommonThemeConfig } from '@config/theme';
+
+/**
+ * CommonProvider is a provider for the common components
+ *
+ * @param param0
+ * @returns
+ */
+export function ComboProvider(props: {
+  themeConfig: CommonThemeConfig;
+  children: React.ReactNode;
+}) {
+  /**
+   * useMountedClient 会等待客户端完全初始化
+   * 只有在客户端准备就绪后才渲染组件内容
+   * 这样可以确保所有的客户端代码（包括 API 配置、插件等）都已经正确初始化
+   */
+  const mounted = useMountedClient();
+
+  const { themeConfig, children } = props;
+
+  const IOC = clientIOC.create();
+
+  return (
+    <AntdThemeProvider
+      data-testid="ComboProvider"
+      theme={themeConfig.antdTheme}
+      staticApi={IOC(I.DialogHandler)}
+    >
+      {mounted ? children : null}
+    </AntdThemeProvider>
+  );
+}

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

@@ -1,27 +1,29 @@
-import { Select } from 'antd';
-import { GlobalOutlined } from '@ant-design/icons';
-import { useLocation, useNavigate, useParams } from 'react-router-dom';
-import i18nConfig from '@config/i18n';
-import { IOC } from '@/core/IOC';
-import { I18nServiceLocale } from '@/base/services/I18nService';
-import { useCallback } from 'react';
-import { useStore } from '@/uikit/hooks/useStore';
+import { GlobalOutlined, TranslationOutlined } from '@ant-design/icons';
+import { useStore } from '@brain-toolkit/react-kit/hooks/useStore';
+import { i18nConfig } from '@config/i18n/i18nConfig';
 import { IOCIdentifier } from '@config/IOCIdentifier';
+import { Dropdown } from 'antd';
+import { useCallback } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import type { LocaleType } from '@config/i18n/i18nConfig';
+import { useIOC } from '../hooks/useIOC';
 
 const { supportedLngs } = i18nConfig;
 
-export default function LanguageSwitcher() {
+export function LanguageSwitcher() {
   const navigate = useNavigate();
-  const i18nService = IOC(IOCIdentifier.I18nServiceInterface);
-  const loading = useStore(i18nService, i18nService.selector.loading);
-  const { lng } = useParams<{ lng: I18nServiceLocale }>();
+  const i18nService = useIOC(IOCIdentifier.I18nServiceInterface);
+  const language = useStore(i18nService, i18nService.selector.language);
   const { pathname } = useLocation();
 
   const languageOptions = supportedLngs.map((lang) => ({
     key: lang,
     value: lang,
     label: (
-      <div className="flex items-center gap-2">
+      <div
+        className="flex items-center gap-2"
+        data-testid={`LanguageSwitcherOption-${lang}`}
+      >
         <GlobalOutlined />
         <span>{lang.toUpperCase()}</span>
       </div>
@@ -29,29 +31,48 @@ export default function LanguageSwitcher() {
   }));
 
   const handleLanguageChange = useCallback(
-    async (newLang: I18nServiceLocale) => {
+    async (newLang: LocaleType) => {
       i18nService.changeLoading(true);
       // Change i18n language
       await i18nService.changeLanguage(newLang);
       // Update URL path
-      navigate(pathname.replace(`/${lng}`, `/${newLang}`));
+      navigate(pathname.replace(`/${language}`, `/${newLang}`));
 
       i18nService.changeLoading(false);
     },
-    [lng, pathname, navigate, i18nService]
+    [language, pathname, navigate, i18nService]
   );
 
+  // const nextLocale = useMemo(() => {
+  //   const targetIndex = i18nConfig.supportedLngs.indexOf(language) + 1;
+  //   return i18nConfig.supportedLngs[
+  //     targetIndex % i18nConfig.supportedLngs.length
+  //   ];
+  // }, [language]);
+
   return (
-    <div className="flex items-center gap-2">
-      <Select
-        loading={loading}
-        disabled={loading}
-        value={lng}
-        onChange={handleLanguageChange}
-        options={languageOptions}
-        style={{ width: 100 }}
-        className="min-w-24 max-w-full"
-      />
-    </div>
+    <Dropdown
+      data-testid="LanguageSwitcherDropdown"
+      trigger={['hover', 'click']}
+      placement="bottom"
+      menu={{
+        // @ts-ignore
+        'data-testid': 'LanguageSwitcherSelect',
+        selectedKeys: [language],
+        items: languageOptions,
+        onClick: ({ key }) => {
+          handleLanguageChange(key as LocaleType);
+        }
+      }}
+    >
+      <span
+        data-testid="LanguageSwitcher"
+        data-testvalue={language}
+        className="text-text hover:text-text-hover cursor-pointer text-lg transition-colors"
+        // onClick={() => handleLanguageChange(nextLocale)}
+      >
+        <TranslationOutlined />
+      </span>
+    </Dropdown>
   );
 }

package/dist/templates/react-app/src/uikit/components/Loading.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 
 /**
  * Loading component
@@ -16,6 +16,7 @@ import clsx from 'clsx';
 export function Loading({ fullscreen = false }: { fullscreen?: boolean }) {
   return (
     <div
+      data-testid="LoadingRoot"
       className={clsx('flex justify-center items-center', {
         'fixed inset-0 backdrop-blur-sm z-50': fullscreen,
         relative: !fullscreen
@@ -29,10 +30,11 @@ export function Loading({ fullscreen = false }: { fullscreen?: boolean }) {
       <div className="flex space-x-3">
         {[0, 1, 2].map((i) => (
           <div
+            data-testid="Loading"
             key={i}
             className={clsx(
               'w-3 h-3 rounded-full',
-              'bg-[var(--fe-color-primary)]',
+              'bg-(--fe-color-primary)',
               'animate-[bounce_1s_ease-in-out_infinite]'
             )}
             style={{

package/dist/templates/react-app/src/uikit/components/LocaleLink.tsx

@@ -1,6 +1,7 @@
-import { LinkProps, Link as RouterLink, To, useParams } from 'react-router-dom';
-import { ReactNode } from 'react';
 import { useLocaleRoutes } from '@config/common';
+import { Link as RouterLink, useParams } from 'react-router-dom';
+import type { ReactNode } from 'react';
+import type { LinkProps, To } from 'react-router-dom';
 
 interface LocaleLinkProps extends Omit<LinkProps, 'href' | 'to'> {
   href: string | To;
@@ -10,7 +11,7 @@ interface LocaleLinkProps extends Omit<LinkProps, 'href' | 'to'> {
   className?: string;
 }
 
-const LocaleLink: React.FC<LocaleLinkProps> = ({
+export const LocaleLink: React.FC<LocaleLinkProps> = ({
   href,
   locale,
   children,
@@ -40,5 +41,3 @@ const LocaleLink: React.FC<LocaleLinkProps> = ({
     </RouterLink>
   );
 };
-
-export default LocaleLink;

package/dist/templates/react-app/src/uikit/components/LogoutButton.tsx

@@ -1,32 +1,55 @@
-import { IOC } from '@/core/IOC';
+import { LogoutOutlined } from '@ant-design/icons';
 import {
   AUTH_LOGOUT_DIALOG_CONTENT,
   AUTH_LOGOUT_DIALOG_TITLE
-} from '@config/Identifier/common';
+} from '@config/Identifier/common/common';
 import { IOCIdentifier } from '@config/IOCIdentifier';
-import { Button } from 'antd';
+import { Button, Grid } from 'antd';
 import { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
+import { useAppTranslation } from '../hooks/useAppTranslation';
+import { useIOC } from '../hooks/useIOC';
 
-export default function LogoutButton() {
-  const { t } = useTranslation();
+const { useBreakpoint } = Grid;
 
+export function LogoutButton() {
+  const { t } = useAppTranslation();
+  const dialogHandler = useIOC(IOCIdentifier.DialogHandler);
+  const userService = useIOC(IOCIdentifier.UserServiceInterface);
+  const breakpoint = useBreakpoint();
   const tTitle = t(AUTH_LOGOUT_DIALOG_TITLE);
   const tContent = t(AUTH_LOGOUT_DIALOG_CONTENT);
 
   const onClick = useCallback(() => {
-    IOC('DialogHandler').confirm({
+    dialogHandler.confirm({
       title: tTitle,
+      okButtonProps: {
+        'data-testid': 'LogoutButton-OkButton'
+      },
+      cancelButtonProps: {
+        'data-testid': 'LogoutButton-CancelButton'
+      },
       content: tContent,
       onOk: () => {
-        IOC(IOCIdentifier.UserServiceInterface).logout();
+        userService.logout();
       }
     });
   }, [tTitle, tContent]);
 
+  if (breakpoint.md) {
+    return (
+      <Button data-testid="LogoutButton" danger onClick={onClick}>
+        {tTitle}
+      </Button>
+    );
+  }
+
   return (
-    <Button danger onClick={onClick}>
-      {tTitle}
-    </Button>
+    <span
+      data-testid="LogoutButton"
+      className="text-text hover:text-red-500 cursor-pointer text-lg transition-colors block md:hidden"
+      onClick={onClick}
+    >
+      <LogoutOutlined />
+    </span>
   );
 }

package/dist/templates/react-app/src/uikit/components/ProcessExecutorProvider.tsx

@@ -1,16 +1,16 @@
+import { IOCIdentifier } from '@config/IOCIdentifier';
 import { UserAuthProvider } from './UserAuthProvider';
-import { useStrictEffect } from '../hooks/useStrictEffect';
-import { IOC } from '@/core/IOC';
 import { useI18nGuard } from '../hooks/useI18nGuard';
-import { IOCIdentifier } from '@config/IOCIdentifier';
+import { useIOC } from '../hooks/useIOC';
 import { useNavigateBridge } from '../hooks/useNavigateBridge';
+import { useStrictEffect } from '../hooks/useStrictEffect';
 
 export function ProcessExecutorProvider({
   children
 }: {
   children: React.ReactNode;
 }) {
-  const processerExecutor = IOC(IOCIdentifier.ProcesserExecutorInterface);
+  const processerExecutor = useIOC(IOCIdentifier.ProcesserExecutorInterface);
 
   useI18nGuard();
 
@@ -20,5 +20,9 @@ export function ProcessExecutorProvider({
     processerExecutor.starup();
   }, []);
 
-  return <UserAuthProvider>{children}</UserAuthProvider>;
+  return (
+    <UserAuthProvider data-testid="ProcessExecutorProvider">
+      {children}
+    </UserAuthProvider>
+  );
 }

package/dist/templates/react-app/src/uikit/components/RouterRenderComponent.tsx

@@ -1,13 +1,16 @@
 import { Suspense } from 'react';
+import type { RouterLoaderRender } from '@/base/cases/RouterLoader';
+import { BaseRouteProvider } from '@/uikit/components/BaseRouteProvider';
 import { Loading } from './Loading';
-import BaseRouteProvider from '@/uikit/components/BaseRouteProvider';
-import { RouterLoaderRender } from '@/base/cases/RouterLoader';
 
 export const RouterRenderComponent: RouterLoaderRender = (route) => {
   const Component = route.element();
 
   return (
-    <Suspense fallback={<Loading fullscreen />}>
+    <Suspense
+      data-testid="RouterRenderComponent"
+      fallback={<Loading fullscreen />}
+    >
       <BaseRouteProvider {...route.meta}>
         <Component />
       </BaseRouteProvider>

package/dist/templates/react-app/src/uikit/components/ThemeSwitcher.tsx

@@ -1,80 +1,137 @@
-import { IOC } from '@/core/IOC';
-import { useStore } from '@/uikit/hooks/useStore';
-import { useTranslation } from 'react-i18next';
-import { Select } from 'antd';
 import {
-  BulbOutlined,
-  BulbFilled,
   HeartFilled,
-  HeartOutlined
+  SettingOutlined,
+  MoonOutlined,
+  SettingFilled,
+  MoonFilled,
+  HeartOutlined,
+  SunOutlined,
+  SunFilled
 } from '@ant-design/icons';
-import clsx from 'clsx';
-import { useMemo } from 'react';
-import * as i18nKeys from '@config/Identifier/common';
+import { useStore } from '@brain-toolkit/react-kit/hooks/useStore';
+import * as i18nKeys from '@config/Identifier/common/common';
 import { IOCIdentifier } from '@config/IOCIdentifier';
+import { themeConfig, type SupportedTheme } from '@config/theme';
+import { Dropdown } from 'antd';
+import { clsx } from 'clsx';
+import { useMemo } from 'react';
+import { useAppTranslation } from '../hooks/useAppTranslation';
+import { useIOC } from '../hooks/useIOC';
+import type { ItemType } from 'antd/es/menu/interface';
 
 const colorMap: Record<
   string,
-  { i18nkey: string; colors: string[]; icons: React.ElementType[] }
+  {
+    i18nkey: string;
+    selectedColor: string;
+    normalColor: string;
+    Icon: React.ElementType;
+    SelectedIcon: React.ElementType;
+    TriggerIcon: React.ElementType;
+  }
 > = {
-  default: {
+  system: {
+    i18nkey: 'System',
+    selectedColor: 'text-text',
+    normalColor: 'text-text-secondary',
+    Icon: SettingOutlined,
+    SelectedIcon: SettingFilled,
+    TriggerIcon: SettingOutlined
+  },
+  light: {
     i18nkey: i18nKeys.HEADER_THEME_DEFAULT,
-    colors: ['text-text', 'text-text-secondary'],
-    icons: [BulbFilled, BulbOutlined]
+    selectedColor: 'text-text',
+    normalColor: 'text-text-secondary',
+    Icon: SunOutlined,
+    SelectedIcon: SunFilled,
+    TriggerIcon: SunOutlined
   },
   dark: {
     i18nkey: i18nKeys.HEADER_THEME_DARK,
-    colors: ['text-[#9333ea]', 'text-[#a855f7]'],
-    icons: [BulbFilled, BulbOutlined]
+    selectedColor: 'text-[#9333ea]',
+    normalColor: 'text-[#a855f7]',
+    Icon: MoonOutlined,
+    SelectedIcon: MoonFilled,
+    TriggerIcon: MoonOutlined
   },
   pink: {
     i18nkey: i18nKeys.HEADER_THEME_PINK,
-    colors: ['text-[#f472b6]', 'text-[#ec4899]'],
-    icons: [HeartFilled, HeartOutlined]
+    selectedColor: 'text-[#f472b6]',
+    normalColor: 'text-[#ec4899]',
+    Icon: HeartOutlined,
+    SelectedIcon: HeartFilled,
+    TriggerIcon: HeartOutlined
   }
 };
 
-export default function ThemeSwitcher() {
-  const themeService = IOC(IOCIdentifier.ThemeService);
+const themesList = ['system', ...themeConfig.supportedThemes];
+
+export function ThemeSwitcher() {
+  const themeService = useIOC(IOCIdentifier.ThemeService);
   const { theme } = useStore(themeService);
   const themes = themeService.getSupportedThemes();
-  const { t } = useTranslation('common');
+  const { t } = useAppTranslation('common');
 
   const themeOptions = useMemo(() => {
-    return themes.map((themeName) => {
-      const { i18nkey, colors, icons } =
-        colorMap[themeName] || colorMap.default;
-      const [currentColor, normalColor] = colors;
-      const [CurrentIcon, NormalIcon] = icons;
-      const isSelf = theme === themeName;
+    return themesList.map((themeName) => {
+      const { i18nkey, selectedColor, normalColor, Icon, SelectedIcon } =
+        colorMap[themeName] || colorMap.light;
+
+      const isCurrentTheme =
+        theme === themeName || (themeName === theme && theme === 'system');
 
       return {
-        key: themeName + i18nkey,
+        key: themeName,
         value: themeName,
         label: (
           <div
+            data-testid={`ThemeSwitcherOption-${themeName}`}
             className={clsx(
               'flex items-center gap-2',
-              isSelf ? currentColor : normalColor
+              isCurrentTheme ? selectedColor : normalColor
             )}
           >
-            {isSelf ? <CurrentIcon /> : <NormalIcon />}
+            {isCurrentTheme ? <SelectedIcon /> : <Icon />}
             <span>{t(i18nkey)}</span>
           </div>
         )
-      };
+      } as ItemType;
     });
   }, [theme, themes, t]);
 
+  // const nextTheme = useMemo(() => {
+  //   if (!theme) {
+  //     return themeConfig.defaultTheme;
+  //   }
+  //   const targetIndex = themes.indexOf(theme as SupportedTheme) + 1;
+  //   return themes[targetIndex % themes.length];
+  // }, [theme]);
+
+  const TriggerIcon = colorMap[theme || themeConfig.defaultTheme].TriggerIcon;
+
   return (
-    <div className="flex items-center gap-2">
-      <Select
-        value={theme}
-        onChange={(value) => themeService.changeTheme(value)}
-        options={themeOptions}
-        style={{ width: 120 }}
-        className="min-w-40 max-w-full"
-      />
-    </div>
+    <Dropdown
+      data-testid="ThemeSwitcherDropdown"
+      trigger={['hover']}
+      placement="bottom"
+      menu={{
+        // @ts-ignore
+        'data-testid': 'ThemeSwitcherSelect',
+        items: themeOptions,
+        selectedKeys: [theme],
+        onClick: ({ key }) => {
+          themeService.changeTheme(key as SupportedTheme);
+        }
+      }}
+    >
+      <span
+        data-testid="ThemeSwitcher"
+        data-testvalue={theme}
+        className="text-text hover:text-text-hover cursor-pointer text-lg transition-colors"
+        // onClick={() => setTheme(nextTheme)}
+      >
+        <TriggerIcon />
+      </span>
+    </Dropdown>
   );
 }

package/dist/templates/react-app/src/uikit/components/UserAuthProvider.tsx

@@ -1,15 +1,15 @@
-import { IOC } from '@/core/IOC';
-import { Loading } from './Loading';
-import { useStore } from '../hooks/useStore';
+import { useStore } from '@brain-toolkit/react-kit/hooks/useStore';
 import { IOCIdentifier } from '@config/IOCIdentifier';
+import { Loading } from './Loading';
+import { useIOC } from '../hooks/useIOC';
 
 export function UserAuthProvider({ children }: { children: React.ReactNode }) {
-  const userService = IOC(IOCIdentifier.UserServiceInterface);
+  const userService = useIOC(IOCIdentifier.UserServiceInterface);
 
   useStore(userService.store);
 
   if (!userService.isAuthenticated()) {
-    return <Loading fullscreen />;
+    return <Loading data-testid="UserAuthProvider" fullscreen />;
   }
 
   return children;

package/dist/templates/react-app/src/uikit/components/With.tsx

@@ -0,0 +1,17 @@
+export function With<T>(props: {
+  fallback?: React.ReactNode;
+  it: T;
+  children: React.ReactNode | ((it: NonNullable<T>) => React.ReactNode);
+}) {
+  const { fallback, it, children } = props;
+
+  if (it != null && it !== false) {
+    if (typeof children === 'function') {
+      return children(it as NonNullable<T>);
+    }
+
+    return children;
+  }
+
+  return fallback ?? null;
+}

package/dist/templates/react-app/src/uikit/contexts/BaseRouteContext.ts

@@ -1,23 +1,25 @@
-import { useTranslation } from 'react-i18next';
-import { useContext, useMemo } from 'react';
-import { BasePageProvider } from '@/base/types/Page';
-import { RouteMeta } from '@/base/types/Page';
-import { createContext } from 'react';
+import { i18nConfig } from '@config/i18n/i18nConfig';
+import { WITHIN_PAGE_PROVIDER } from '@config/Identifier/common/common.error';
 import merge from 'lodash/merge';
-import i18nConfig from '@config/i18n';
-import { WITHIN_PAGE_PROVIDER } from '@config/Identifier/common.error';
+import { useContext, useMemo, createContext } from 'react';
+import type { BasePageProvider, RouteMeta } from '@/base/types/Page';
+import { useAppTranslation } from '../hooks/useAppTranslation';
+import { useI18nInterface } from '../hooks/useI18nInterface';
 
 const { defaultNS } = i18nConfig;
 
 const defaultBaseRoutemeta = {
   localNamespace: defaultNS,
   title: '',
-  icon: ''
+  icon: '',
+  i18nInterface: {}
 };
 
 export const BaseRoutePageContext = createContext<RouteMeta>({});
 
-export function useBaseRoutePage(): BasePageProvider {
+export function useBaseRoutePage<
+  T extends Record<string, string>
+>(): BasePageProvider<T> {
   const meta = useContext(BaseRoutePageContext);
 
   if (!meta) {
@@ -26,10 +28,14 @@ export function useBaseRoutePage(): BasePageProvider {
 
   const _meta = useMemo(() => merge({}, defaultBaseRoutemeta, meta), [meta]);
 
-  const i18n = useTranslation(_meta.localNamespace);
+  const i18n = useAppTranslation(_meta.localNamespace);
+
+  const i18nInterface = useI18nInterface(_meta.i18nInterface as T);
 
   return {
-    meta: _meta,
+    meta: _meta as Omit<RouteMeta, 'i18nInterface'> & { i18nInterface?: T },
+    i18nInterface: i18nInterface as T,
+    tt: i18nInterface as T,
     i18n,
     t: i18n.t
   };

package/dist/templates/react-app/src/uikit/contexts/IOCContext.ts

@@ -0,0 +1,13 @@
+'use client';
+
+import { createContext } from 'react';
+import type { IOCIdentifierMap } from '@config/IOCIdentifier';
+import type {
+  IOCContainerInterface,
+  IOCFunctionInterface
+} from '@qlover/corekit-bridge';
+
+export const IOCContext = createContext<IOCFunctionInterface<
+  IOCIdentifierMap,
+  IOCContainerInterface
+> | null>(null);