@qlover/create-app 0.10.1 → 0.10.3

package/dist/templates/next-app/src/styles/css/index.css

@@ -2,5 +2,5 @@
 @import './zIndex.css';
 
 @import './antd-themes/index.css';
-
+@import './scrollbar.css';
 @import './page.css';

package/dist/templates/next-app/src/styles/css/scrollbar.css

@@ -0,0 +1,34 @@
+html,
+.fe-theme {
+  --scrollbar-track-color: var(--color-secondary);
+  --scrollbar-thumb-color: var(--color-text-secondary);
+  --scrollbar-thumb-hover-color: var(--color-brand-hover);
+
+  /* Webkit browsers (Chrome, Safari, Edge) - 全局样式，使用最高优先级 */
+  body *::-webkit-scrollbar,
+  *::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+
+  body *::-webkit-scrollbar-track,
+  *::-webkit-scrollbar-track {
+    background: var(--scrollbar-track-color);
+  }
+
+  body *::-webkit-scrollbar-thumb,
+  *::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar-thumb-color);
+    border-radius: 6px;
+    border: 1px solid var(--scrollbar-track-color);
+    transition: background-color 0.2s ease;
+  }
+
+  body *::-webkit-scrollbar-thumb:hover {
+    background-color: var(--scrollbar-thumb-hover-color) !important;
+  }
+
+  *::-webkit-scrollbar-thumb:hover {
+    background-color: var(--scrollbar-thumb-hover-color) !important;
+  }
+}

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

@@ -13,12 +13,13 @@ import { clsx } from 'clsx';
 import { usePathname } from 'next/navigation';
 import React, { useMemo, type HTMLAttributes } from 'react';
 import { AdminPageManager } from '@/base/cases/AdminPageManager';
-import { BaseHeader } from './BaseHeader';
-import { LanguageSwitcher } from './LanguageSwitcher';
+import { COMMON_ADMIN_TITLE } from '@config/Identifier';
 import { LocaleLink } from './LocaleLink';
-import { LogoutButton } from './LogoutButton';
-import { ThemeSwitcher } from './ThemeSwitcher';
+import { LanguageSwitcher } from '../components-app/LanguageSwitcher';
+import { LogoutButton } from '../components-app/LogoutButton';
+import { ThemeSwitcher } from '../components-app/ThemeSwitcher';
 import { useIOC } from '../hook/useIOC';
+import { useWarnTranslations } from '../hook/useWarnTranslations';
 import type { ItemType } from 'antd/es/menu/interface';
 
 const { Sider } = Layout;
@@ -41,10 +42,13 @@ export function AdminLayout(props: AdminLayoutProps) {
   const page = useIOC(AdminPageManager);
   const collapsedSidebar = useStore(page, page.selectors.collapsedSidebar);
   const navItems = useStore(page, page.selectors.navItems);
+  const t = useWarnTranslations();
+
+  const title = useMemo(() => t(COMMON_ADMIN_TITLE), [t]);
 
   const selectedKey = useMemo(() => {
     // 移除语言前缀，例如 /en/admin/users -> /admin/users
-    const normalizedPath = pathname.replace(/^\/[^/]+/, '');
+    const normalizedPath = pathname?.replace(/^\/[^/]+/, '') ?? '';
     return navItems.find((item) => item.pathname === normalizedPath)?.key || '';
   }, [pathname, navItems]);
 
@@ -81,7 +85,7 @@ export function AdminLayout(props: AdminLayoutProps) {
 
   return (
     <Layout data-testid="AdminLayout" className={className} {...rest}>
-      <div className="overflow-y-auto overflow-x-hidden h-screen sticky top-0 bottom-0 scrollbar-thin scrollbar-gutter-stable">
+      <div className="overflow-y-auto overflow-x-hidden h-screen sticky top-0 bottom-0">
         <Sider
           className="h-full relative"
           onCollapse={() => page.toggleSidebar()}
@@ -111,11 +115,30 @@ export function AdminLayout(props: AdminLayoutProps) {
       </div>
 
       <Layout>
-        <BaseHeader
-          href="/admin"
-          className="max-w-full pl-0"
-          rightActions={rightActions}
-        />
+        <header
+          data-testid="AdminLayoutHeader"
+          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',
+              className
+            )}
+          >
+            <div className="flex items-center">
+              <LocaleLink
+                href="/admin"
+                title={title}
+                className="flex items-center hover:opacity-80 transition-opacity"
+              >
+                <span className="text-lg font-semibold text-text">{title}</span>
+              </LocaleLink>
+            </div>
+            <div className="flex items-center gap-2 md:gap-4">
+              {rightActions}
+            </div>
+          </div>
+        </header>
         <main
           className={clsx('p-2 bg-primary text-text flex-1', mainClassName)}
         >

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

@@ -1,45 +1,75 @@
 'use client';
 import '@ant-design/v5-patch-for-react-19';
-import { useRouter } from 'next/navigation';
-import { useLocale } from 'next-intl';
-import { useEffect } from 'react';
-import { NavigateBridge } from '@/base/cases/NavigateBridge';
-import type { I18nServiceLocale } from '@/base/port/I18nServiceInterface';
+
+import { useState } from 'react';
 import { BootstrapClient } from '@/core/bootstraps/BootstrapClient';
-import { clientIOC } from '@/core/clientIoc/ClientIOC';
-import { I } from '@config/IOCIdentifier';
-import { IOCContext } from '../context/IOCContext';
-import { useWarnTranslations } from '../hook/useWarnTranslations';
+import { useIOC } from '../hook/useIOC';
+import { useStrictEffect } from '../hook/useStrictEffect';
 
 export function BootstrapsProvider(props: { children: React.ReactNode }) {
-  const IOC = clientIOC.create();
-  const locale = useLocale();
-  const router = useRouter();
-  const t = useWarnTranslations();
-
-  useEffect(() => {
-    IOC(I.RouterServiceInterface).setLocale(locale);
-    IOC(NavigateBridge).setUIBridge(router);
-  }, [locale, router, IOC]);
-
-  useEffect(() => {
-    IOC(I.I18nServiceInterface).changeLanguage(locale as I18nServiceLocale);
-    IOC(I.I18nServiceInterface).setTranslator(t);
-  }, [t, IOC, locale]);
-
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      BootstrapClient.main({
-        root: window,
-        pathname: window.location.pathname,
-        IOC: IOC
-      });
-    }
-  }, [IOC]);
-
-  return (
-    <IOCContext.Provider data-testid="BootstrapsProvider" value={IOC}>
-      {props.children}
-    </IOCContext.Provider>
-  );
+  const IOC = useIOC();
+
+  const [, setIocMounted] = useState(false);
+
+  useStrictEffect(() => {
+    // clientIOC.register({
+    //   appConfig: appConfig
+    // });
+    BootstrapClient.main({
+      root: window,
+      pathname: window.location.pathname,
+      IOC: IOC
+    }).then(() => {
+      setIocMounted(true);
+    });
+  }, []);
+
+  // useEffect(() => {
+  //   const register = new ClientIOCRegister({
+  //     appConfig: appConfig
+  //   });
+
+  //   // 启动前注册所有依赖
+  //   // clientIOC.register(register);
+
+  //   BootstrapClient.main({
+  //     root: window,
+  //     pathname: window.location.pathname,
+  //     IOC: IOC,
+  //     register: register
+  //   }).then(() => {
+  //     setIocMounted(true);
+  //   });
+  // }, []);
+
+  // if (!register) {
+  //   return <div data-testid="BootstrapsProviderLoading">Loading...</div>;
+  // }
+
+  // const IOC = clientIOC.create();
+  // const locale = useLocale();
+  // const router = useRouter();
+  // const t = useWarnTranslations();
+
+  // useEffect(() => {
+  //   IOC(I.RouterServiceInterface).setLocale(locale);
+  //   IOC(NavigateBridge).setUIBridge(router);
+  // }, [locale, router, IOC]);
+
+  // useEffect(() => {
+  //   IOC(I.I18nServiceInterface).changeLanguage(locale as I18nServiceLocale);
+  //   IOC(I.I18nServiceInterface).setTranslator(t);
+  // }, [t, IOC, locale]);
+
+  // useEffect(() => {
+  //   if (typeof window !== 'undefined') {
+  //     BootstrapClient.main({
+  //       root: window,
+  //       pathname: window.location.pathname,
+  //       IOC: IOC
+  //     });
+  //   }
+  // }, [IOC]);
+
+  return props.children;
 }

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

@@ -0,0 +1,64 @@
+'use client';
+import '@ant-design/v5-patch-for-react-19';
+import { AntdRegistry } from '@ant-design/nextjs-registry';
+import { AntdThemeProvider } from '@brain-toolkit/antd-theme-override/react';
+import { ThemeProvider } from 'next-themes';
+import { I } from '@config/IOCIdentifier';
+import type { CommonThemeConfig } from '@config/theme';
+import { useIOC } from '../hook/useIOC';
+
+/**
+ * ClientRootProvider is a provider for the client components
+ *
+ * - ThemeProvider
+ * - AntdProvider
+ *
+ * TODO: 存在问题：
+ *
+ * 1. antd 样式存在闪烁问题, 目前没有解决, 可能是因为 cssinjs 的技术性问题
+ *
+ * 目前能将完美解决的就是完全使用客户端渲染,也就是引入 useMountedClient 当客户端渲染时才渲染, 这样就不会出现闪烁问题
+ * 但是他会导致国际化切换闪烁问题
+ *
+ * 可能需要等待 antd 官方解决这个问题
+ *
+ * @example
+ *
+ * ```tsx
+ * const mounted = useMountedClient();
+ *
+ * return mounted && children;
+ * ```
+ *
+ *
+ * @param themeConfig - The theme config
+ * @param children - The children components
+ * @returns
+ */
+export function ClientRootProvider(props: {
+  themeConfig: CommonThemeConfig;
+  children: React.ReactNode;
+}) {
+  const { themeConfig, children } = props;
+
+  const IOC = useIOC();
+
+  return (
+    <AntdThemeProvider
+      data-testid="ComboProvider"
+      theme={themeConfig.antdTheme}
+      staticApi={IOC(I.DialogHandler)}
+    >
+      <ThemeProvider
+        themes={themeConfig.supportedThemes as unknown as string[]}
+        attribute={themeConfig.domAttribute}
+        defaultTheme={themeConfig.defaultTheme}
+        enableSystem={themeConfig.enableSystem}
+        enableColorScheme={false}
+        storageKey={themeConfig.storageKey}
+      >
+        <AntdRegistry>{children}</AntdRegistry>
+      </ThemeProvider>
+    </AntdThemeProvider>
+  );
+}

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

@@ -0,0 +1,42 @@
+'use client';
+
+import { useMountedClient } from '@brain-toolkit/react-kit';
+
+export interface ClinetRenderProviderProps {
+  children: React.ReactNode;
+}
+
+/**
+ * ClinetRenderProvider is a provider for the client components
+ *
+ *
+ * 当前组件仅用于需要客户端渲染的组件, 比如 adminLayout 等完全客户端渲染的组件
+ *
+ *
+ * @param children - The children components
+ * @returns
+ */
+export function ClinetRenderProvider(props: ClinetRenderProviderProps) {
+  const { children } = props;
+
+  const mounted = useMountedClient();
+
+  return (
+    <>
+      {children}
+
+      {/* 为了防止语言切换时页面闪烁, 使用一个固定定位的div, 当客户端渲染时才渲染 */}
+      {!mounted && (
+        <div
+          role="status"
+          aria-label="Loading..."
+          aria-busy="true"
+          style={{
+            zIndex: '99999 !important'
+          }}
+          className="fixed inset-0 overflow-hidden cursor-wait no-scrollbar bg-primary pointer-events-none"
+        ></div>
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,34 @@
+'use client';
+
+import { useMemo } from 'react';
+import { appConfig } from '@/core/globals';
+import { clientIOC, IOCContext, IOCInstance } from '../context/IOCContext';
+
+export function IOCProvider(props: { children: React.ReactNode }) {
+  /**
+   * 加载组件就立即注册
+   *
+   * 这样在渲染子组件时保证 IOC.get 正常工作
+   *
+   * 但是这样会导致注册时无法传递浏览器端的依赖, 比如 window.location.pathname
+   *
+   * - 如果有需要，可以将注册放在下面 useStrictEffect 中, 然后 IocMounted=true 时在渲染子节点
+   *
+   * **但是这样会有一个问题, 组件会重新挂载渲染，当切换语言时会闪烁**
+   *
+   * 因为页面初始化时有些组件可能已经使用了容器注入，这样就会丢失注册的依赖
+   *
+   * TODO: 这是一个需要解决的问题
+   */
+  useMemo(() => {
+    clientIOC.register({
+      appConfig: appConfig
+    });
+  }, []);
+
+  return (
+    <IOCContext.Provider value={IOCInstance}>
+      {props.children}
+    </IOCContext.Provider>
+  );
+}

package/dist/templates/next-app/src/uikit/components/localesImportButton/LocalesImportEvent.ts

@@ -10,13 +10,19 @@ export class LocalesImportEvent extends StoreInterface<LocalesImportEventState>
     super(() => new LocalesImportEventState());
   }
 
+  /**
+   * @override
+   */
   protected validate(file: File): void {
     if (file.type !== 'application/json') {
       throw new Error('File must be a JSON file');
     }
   }
 
-  async onImport(type: LocaleType, file: File): Promise<void> {
+  /**
+   * @override
+   */
+  public async onImport(type: LocaleType, file: File): Promise<void> {
     try {
       this.validate(file);
 

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

@@ -0,0 +1,17 @@
+'use client';
+
+import { useEffect } from 'react';
+import { NavigateBridge } from '@/base/cases/NavigateBridge';
+import { useRouter } from '@/i18n/routing';
+import { useIOC } from '../hook/useIOC';
+
+export function AppBridge() {
+  const router = useRouter();
+  const navigateBridge = useIOC(NavigateBridge);
+
+  useEffect(() => {
+    navigateBridge.setUIBridge(router);
+  }, [router, navigateBridge]);
+
+  return null;
+}

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

@@ -0,0 +1,112 @@
+import { TeamOutlined } from '@ant-design/icons';
+import { clsx } from 'clsx';
+import { useLocale } from 'next-intl';
+import { useMemo, type HTMLAttributes } from 'react';
+import { AppBridge } from './AppBridge';
+import { LanguageSwitcher } from './LanguageSwitcher';
+import { LogoutButton } from './LogoutButton';
+import { ThemeSwitcher } from './ThemeSwitcher';
+import { LocaleLink } from '../components/LocaleLink';
+
+export interface AppRoutePageTT {
+  title: string;
+  adminTitle: string;
+}
+
+export interface AppRoutePageProps extends HTMLAttributes<HTMLDivElement> {
+  showLogoutButton?: boolean;
+  showAdminButton?: boolean;
+  mainProps?: HTMLAttributes<HTMLElement>;
+  headerClassName?: string;
+  headerHref?: string;
+  tt: AppRoutePageTT;
+}
+
+/**
+ * App Route Page
+ *
+ * 主要用于 /src/app 目录下页面的基础布局，包含头部、主体内容等
+ *
+ * @description
+ * - /src/app/[locale]/page.tsx
+ * - /src/app/[locale]/login/page.tsx
+ *
+ */
+export function AppRoutePage({
+  children,
+  showLogoutButton,
+  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" />,
+
+      showLogoutButton && <LogoutButton key="logout-button" />
+    ].filter(Boolean);
+  }, [adminTitle, showAdminButton, showLogoutButton, locale]);
+
+  return (
+    <div
+      data-testid="AppRoutePage"
+      className="flex flex-col min-h-screen"
+      {...props}
+    >
+      <AppBridge />
+      <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/{components → components-app}/LanguageSwitcher.tsx

@@ -2,22 +2,20 @@
 
 import { TranslationOutlined } from '@ant-design/icons';
 import { Dropdown } from 'antd';
+import { useParams } from 'next/navigation';
 import { useLocale } from 'next-intl';
-import { useCallback, useMemo } from 'react';
-import type { I18nServiceLocale } from '@/base/port/I18nServiceInterface';
+import { useCallback, useMemo, useTransition } from 'react';
 import { usePathname, useRouter } from '@/i18n/routing';
 import { i18nConfig } from '@config/i18n';
 import type { LocaleType } from '@config/i18n';
-import { I } from '@config/IOCIdentifier';
-import { useIOC } from '../hook/useIOC';
 import type { ItemType } from 'antd/es/menu/interface';
 
 export function LanguageSwitcher() {
-  const i18nService = useIOC(I.I18nServiceInterface);
-  const pathname = usePathname(); // current pathname, aware of i18n
-
-  const router = useRouter(); // i18n-aware router instance
-  const currentLocale = useLocale() as LocaleType; // currently active locale
+  const pathname = usePathname();
+  const router = useRouter();
+  const currentLocale = useLocale() as LocaleType;
+  const [isPending, startTransition] = useTransition();
+  const params = useParams();
 
   const options: ItemType[] = useMemo(() => {
     return i18nConfig.supportedLngs.map(
@@ -34,18 +32,16 @@ export function LanguageSwitcher() {
 
   const handleLanguageChange = useCallback(
     async (value: string) => {
-      // Set a persistent cookie with the user's preferred locale (valid for 1 year)
-      document.cookie = `NEXT_LOCALE=${value}; path=/; max-age=31536000; SameSite=Lax`;
-      // Route to the same page in the selected locale
-      router.replace(pathname, { locale: value });
+      if (isPending) return;
 
-      try {
-        await i18nService.changeLanguage(value as I18nServiceLocale);
-      } catch (error) {
-        console.error('Failed to change language:', error);
-      }
+      startTransition(() => {
+        // @ts-expect-error -- TypeScript will validate that only known `params`
+        // are used in combination with a given `pathname`. Since the two will
+        // always match for the current route, we can skip runtime checks.
+        router.replace({ pathname, params }, { locale: value });
+      });
     },
-    [i18nService, pathname, router]
+    [pathname, router, isPending, params]
   );
 
   const nextLocale = useMemo(() => {