@qlover/create-app 0.7.15 → 0.9.0

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

@@ -1,18 +1,22 @@
-import ThemeSwitcher from '@/uikit/components/ThemeSwitcher';
-import LocaleLink from '@/uikit/components/LocaleLink';
-import LanguageSwitcher from '@/uikit/components/LanguageSwitcher';
+import { IOCIdentifier } from '@config/IOCIdentifier';
 import { PublicAssetsPath } from '@/base/cases/PublicAssetsPath';
-import { IOC } from '@/core/IOC';
-import LogoutButton from './LogoutButton';
+import { LanguageSwitcher } from '@/uikit/components/LanguageSwitcher';
+import { LocaleLink } from '@/uikit/components/LocaleLink';
+import { ThemeSwitcher } from '@/uikit/components/ThemeSwitcher';
+import { LogoutButton } from './LogoutButton';
+import { useIOC } from '../hooks/useIOC';
 
-export default function BaseHeader({
+export function BaseHeader({
   showLogoutButton
 }: {
   showLogoutButton?: boolean;
 }) {
+  const AppConfig = useIOC(IOCIdentifier.AppConfig);
+  const publicAssetsPath = useIOC(PublicAssetsPath);
+
   return (
     <header
-      data-testid="base-header"
+      data-testid="BaseHeader"
       className="h-14 bg-secondary border-b border-border sticky top-0 z-50"
     >
       <div className="flex items-center justify-between h-full px-4 mx-auto max-w-7xl">
@@ -22,16 +26,16 @@ export default function BaseHeader({
             className="flex items-center hover:opacity-80 transition-opacity"
           >
             <img
-              data-testid="base-header-logo"
-              src={IOC(PublicAssetsPath).getPath('/logo.svg')}
+              data-testid="BaseHeader-logo"
+              src={publicAssetsPath.getPath('/logo.svg')}
               alt="logo"
               className="h-8 w-auto"
             />
             <span
-              data-testid="base-header-app-name"
+              data-testid="BaseHeader-app-name"
               className="ml-2 text-lg font-semibold text-text"
             >
-              {IOC('AppConfig').appName}
+              {AppConfig.appName}
             </span>
           </LocaleLink>
         </div>

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

@@ -1,18 +1,21 @@
-import { PropsWithChildren } from 'react';
-import { RouteMeta } from '@/base/types/Page';
+import type { RouteMeta } from '@/base/types/Page';
 import { BaseRoutePageContext } from '@/uikit/contexts/BaseRouteContext';
-import { useDocumentTitle } from '@/uikit/hooks/useDocumentTitle';
-import { IOC } from '@/core/IOC';
-import { useTranslation } from 'react-i18next';
+import { BaseRouteSeo } from './BaseRouteSeo';
+import type { PropsWithChildren } from 'react';
 
-export default function BaseRouteProvider(props: PropsWithChildren<RouteMeta>) {
-  const { t } = useTranslation();
-
-  useDocumentTitle(props.title ? t(props.title) : IOC('AppConfig').appName);
+export function BaseRouteProvider(props: PropsWithChildren<RouteMeta>) {
+  const { children, ..._props } = props;
 
   return (
-    <BaseRoutePageContext.Provider value={props}>
-      {props.children}
+    <BaseRoutePageContext.Provider
+      data-testid="BaseRouteProvider"
+      value={_props}
+    >
+      {typeof _props.i18nInterface === 'object' &&
+        _props.i18nInterface != null &&
+        Object.keys(_props.i18nInterface).length > 0 && <BaseRouteSeo />}
+
+      {children}
     </BaseRoutePageContext.Provider>
   );
 }

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

@@ -0,0 +1,18 @@
+import type { PageI18nInterface } from '@config/i18n/PageI18nInterface';
+import { ClientSeo } from './ClientSeo';
+import { useBaseRoutePage } from '../contexts/BaseRouteContext';
+
+export function BaseRouteSeo() {
+  const { i18nInterface } = useBaseRoutePage();
+
+  if (!i18nInterface) {
+    return null;
+  }
+
+  return (
+    <ClientSeo
+      data-testid="BaseRouteSeo"
+      i18nInterface={i18nInterface as unknown as PageI18nInterface}
+    />
+  );
+}

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

@@ -0,0 +1,13 @@
+'use client';
+import { clientIOC } from '@/core/clientIoc/ClientIOC';
+import { IOCContext } from '../contexts/IOCContext';
+
+export function BootstrapsProvider(props: { children: React.ReactNode }) {
+  const IOC = clientIOC.create();
+
+  return (
+    <IOCContext.Provider data-testid="BootstrapsProvider" value={IOC}>
+      {props.children}
+    </IOCContext.Provider>
+  );
+}

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>
   );
 }