@qlover/create-app 0.10.1 → 0.10.2

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qlover/create-app",
-  "version": "0.10.1",
+  "version": "0.10.2",
   "description": "Create a new app with a single command",
   "private": false,
   "type": "module",

package/dist/templates/next-app/src/server/PageParams.ts

@@ -1,66 +0,0 @@
-import { notFound } from 'next/navigation';
-import { getMessages, getTranslations } from 'next-intl/server';
-import { TranslateI18nInterface } from '@/base/cases/TranslateI18nInterface';
-import { i18nConfig } from '@config/i18n';
-import type { LocaleType, PageI18nInterface } from '@config/i18n';
-import type { ParamsHandlerInterface as ParamsHandlerInterface } from './port/ParamsHandlerInterface';
-
-export interface PageWithParams {
-  params?: Promise<PageParamsType>;
-}
-
-export interface PageParamsType {
-  locale?: string;
-}
-
-/**
- * Handler Page Params
- */
-export class PageParams implements ParamsHandlerInterface {
-  private locale: string | null;
-
-  constructor(protected readonly params: PageParamsType) {
-    this.locale = this.params.locale || i18nConfig.fallbackLng;
-  }
-
-  public getLocale(defaultLocale?: string): string {
-    if (this.locale) {
-      return this.locale;
-    }
-
-    this.locale = this.params.locale || defaultLocale || i18nConfig.fallbackLng;
-
-    return this.locale;
-  }
-
-  public getI18nWithNotFound(): string {
-    const locale = this.getLocale();
-
-    if (!i18nConfig.supportedLngs.includes(locale as LocaleType)) {
-      notFound();
-    }
-
-    return locale;
-  }
-
-  public async getI18nMessages(): Promise<Record<string, string>> {
-    const locale = this.getLocale();
-
-    const messages = await getMessages({ locale });
-
-    return messages;
-  }
-
-  public async getI18nInterface<T extends PageI18nInterface>(
-    i18nInterface: T,
-    namespace?: string
-  ): Promise<T> {
-    // Load translation messages from the HomePage namespace
-    const t = await getTranslations({
-      locale: this.getLocale(),
-      namespace: namespace
-    });
-
-    return TranslateI18nInterface.translate<T>(i18nInterface, t);
-  }
-}

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

@@ -1,80 +0,0 @@
-'use client';
-
-import { clsx } from 'clsx';
-import { useLocale } from 'next-intl';
-import { useMemo } from 'react';
-import { useIOC } from '@/uikit/hook/useIOC';
-import { COMMON_ADMIN_TITLE } from '@config/Identifier';
-import { IOCIdentifier } from '@config/IOCIdentifier';
-import { LocaleLink } from './LocaleLink';
-import { useWarnTranslations } from '../hook/useWarnTranslations';
-
-export type RenderLeftFunction = (props: {
-  locale: string;
-  defaultElement: React.ReactNode;
-}) => React.ReactNode;
-
-export function BaseHeader(props: {
-  href?: string;
-  renderLeft?: React.ReactNode | RenderLeftFunction;
-  rightActions?: React.ReactNode;
-  className?: string;
-}) {
-  const { href = '/', className, renderLeft, rightActions } = props;
-  const appConfig = useIOC(IOCIdentifier.AppConfig);
-  const locale = useLocale();
-  const t = useWarnTranslations();
-
-  const tt = {
-    title: appConfig.appName,
-    admin: t(COMMON_ADMIN_TITLE)
-  };
-
-  const leftDefault = useMemo(
-    () => (
-      <LocaleLink
-        data-testid="BaseHeaderLogo"
-        title={tt.title}
-        href={href}
-        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>
-    ),
-    [href, locale, tt.title]
-  );
-
-  const RenderLeft = useMemo(() => {
-    if (!renderLeft) {
-      return leftDefault;
-    }
-
-    if (typeof renderLeft === 'function') {
-      return renderLeft({ locale, defaultElement: leftDefault });
-    }
-    return renderLeft;
-  }, [renderLeft, locale, leftDefault]);
-
-  return (
-    <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',
-          className
-        )}
-      >
-        <div className="flex items-center">{RenderLeft}</div>
-        <div className="flex items-center gap-2 md:gap-4">{rightActions}</div>
-      </div>
-    </header>
-  );
-}

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

@@ -1,65 +0,0 @@
-import { TeamOutlined } from '@ant-design/icons';
-import { useLocale } from 'next-intl';
-import { useMemo, type HTMLAttributes } from 'react';
-import { COMMON_ADMIN_TITLE } from '@config/Identifier';
-import { BaseHeader } from './BaseHeader';
-import { LanguageSwitcher } from './LanguageSwitcher';
-import { LocaleLink } from './LocaleLink';
-import { LogoutButton } from './LogoutButton';
-import { ThemeSwitcher } from './ThemeSwitcher';
-import { useWarnTranslations } from '../hook/useWarnTranslations';
-
-export interface BaseLayoutProps extends HTMLAttributes<HTMLDivElement> {
-  showLogoutButton?: boolean;
-  showAdminButton?: boolean;
-  mainProps?: HTMLAttributes<HTMLElement>;
-}
-
-export function BaseLayout({
-  children,
-  showLogoutButton,
-  showAdminButton,
-  mainProps,
-  ...props
-}: BaseLayoutProps) {
-  const locale = useLocale();
-  const t = useWarnTranslations();
-
-  const tt = {
-    admin: t(COMMON_ADMIN_TITLE)
-  };
-
-  const actions = useMemo(
-    () =>
-      [
-        showAdminButton && (
-          <LocaleLink
-            key="admin-button"
-            href="/admin"
-            title={tt.admin}
-            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),
-    [showAdminButton, tt.admin, locale, showLogoutButton]
-  );
-
-  return (
-    <div
-      data-testid="BaseLayout"
-      className="flex flex-col min-h-screen"
-      {...props}
-    >
-      <BaseHeader rightActions={actions} />
-      <main className="flex flex-1 flex-col bg-primary" {...mainProps}>
-        {children}
-      </main>
-    </div>
-  );
-}

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

@@ -1,58 +0,0 @@
-'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 { useMountedClient } from '@brain-toolkit/react-kit';
-import { ThemeProvider } from 'next-themes';
-import { clientIOC } from '@/core/clientIoc/ClientIOC';
-import { IOCIdentifier } from '@config/IOCIdentifier';
-import type { CommonThemeConfig } from '@config/theme';
-import { BootstrapsProvider } from './BootstrapsProvider';
-
-/**
- * CommonProvider is a provider for the common components
- *
- * - IOCProvider
- * - BootstrapsProvider
- * - ThemeProvider
- * - AntdProvider
- *
- * @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(IOCIdentifier.DialogHandler)}
-    >
-      <ThemeProvider
-        themes={themeConfig.supportedThemes as unknown as string[]}
-        attribute={themeConfig.domAttribute}
-        defaultTheme={themeConfig.defaultTheme}
-        enableSystem
-        enableColorScheme={false}
-        storageKey={themeConfig.storageKey}
-      >
-        <BootstrapsProvider>
-          <AntdRegistry>{mounted ? children : null}</AntdRegistry>
-        </BootstrapsProvider>
-      </ThemeProvider>
-    </AntdThemeProvider>
-  );
-}

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

@@ -1,21 +0,0 @@
-import { NextIntlClientProvider, useMessages } from 'next-intl';
-import type { ReactNode } from 'react';
-
-type Props = {
-  children: ReactNode;
-  locale: string;
-};
-
-export function NextIntlProvider({ children, locale }: Props) {
-  const messages = useMessages();
-
-  return (
-    <NextIntlClientProvider
-      data-testid="NextIntlProvider"
-      locale={locale}
-      messages={messages}
-    >
-      {children}
-    </NextIntlClientProvider>
-  );
-}