@qlover/create-app 0.7.6 → 0.7.8

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

@@ -0,0 +1,5 @@
+@layer theme, base, antd, components, utilities;
+
+@import 'tailwindcss';
+
+@import './themes/index.css';

package/dist/templates/next-app/src/styles/css/themes/_default.css

@@ -0,0 +1,29 @@
+/* theme variables - for tailwind */
+@layer base {
+  :root {
+    /* 基础背景色 */
+    --color-bg-base: 255 255 255;
+    --color-bg-secondary: 241 245 249; /* slate-100 */
+    --color-bg-elevated: 248 250 252; /* slate-50 */
+
+    /* 文字颜色 */
+    --text-primary: 15 23 42; /* slate-900 */
+    --text-secondary: 71 85 105; /* slate-600 */
+    --text-tertiary: 100 116 139; /* slate-500 */
+
+    /* 边框颜色 */
+    --color-border: 226 232 240; /* slate-200 */
+
+    /* 品牌色 */
+    --color-brand: 37 99 235; /* blue-600 */
+    --color-brand-hover: 59 130 246; /* blue-500 */
+
+    /* 登录页特定样式 */
+    --login-card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    --login-input-bg: var(--fe-color-bg-container);
+    --login-input-border: var(--fe-color-border);
+    --login-button-text: rgb(255 255 255);
+    --login-social-button-bg: var(--fe-color-bg-container);
+    --login-social-button-border: var(--fe-color-border);
+  }
+}

package/dist/templates/next-app/src/styles/css/themes/dark.css

@@ -0,0 +1,29 @@
+/* theme variables - for tailwind */
+@layer base {
+  [data-theme='dark'] {
+    /* 基础背景色 */
+    --color-bg-base: 15 23 42; /* slate-900 */
+    --color-bg-secondary: 30 41 59; /* slate-800 */
+    --color-bg-elevated: 51 65 85; /* slate-700 */
+
+    /* 文字颜色 */
+    --text-primary: 255 255 255;
+    --text-secondary: 148 163 184; /* slate-400 */
+    --text-tertiary: 100 116 139; /* slate-500 */
+
+    /* 边框颜色 */
+    --color-border: 51 65 85; /* slate-700 */
+
+    /* 品牌色 */
+    --color-brand: 37 99 235; /* blue-600 */
+    --color-brand-hover: 59 130 246; /* blue-500 */
+
+    /* 登录页特定样式 */
+    --login-card-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    --login-input-bg: var(--fe-color-bg-container);
+    --login-input-border: var(--fe-color-border);
+    --login-button-text: rgb(255 255 255);
+    --login-social-button-bg: var(--fe-color-bg-container);
+    --login-social-button-border: var(--fe-color-border);
+  }
+}

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

@@ -0,0 +1,3 @@
+@import './_default.css';
+@import './dark.css';
+@import './pink.css';

package/dist/templates/next-app/src/styles/css/themes/pink.css

@@ -0,0 +1,29 @@
+/* theme variables - for tailwind */
+@layer base {
+  [data-theme='pink'] {
+    /* 基础背景色 */
+    --color-bg-base: 255 241 242; /* rose-50 */
+    --color-bg-secondary: 255 228 230; /* rose-100 */
+    --color-bg-elevated: 254 205 211; /* rose-200 */
+
+    /* 文字颜色 */
+    --text-primary: 190 18 60; /* rose-700 */
+    --text-secondary: 225 29 72; /* rose-600 */
+    --text-tertiary: 244 63 94; /* rose-500 */
+
+    /* 边框颜色 */
+    --color-border: 254 205 211; /* rose-200 */
+
+    /* 品牌色 */
+    --color-brand: 225 29 72; /* rose-600 */
+    --color-brand-hover: 244 63 94; /* rose-500 */
+
+    /* 登录页特定样式 */
+    --login-card-shadow: 0 4px 12px rgba(244 63 94 / 0.15);
+    --login-input-bg: var(--ant-color-bg-container);
+    --login-input-border: var(--ant-color-border);
+    --login-button-text: rgb(255 255 255);
+    --login-social-button-bg: var(--ant-color-bg-container);
+    --login-social-button-border: var(--ant-color-border);
+  }
+}

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

@@ -0,0 +1,9 @@
+/**
+ * This file is used to define the z-index values for the app.
+ */
+:root {
+  /* antd select popup zindex */
+  --zi-select: 1050;
+  /* antd message zindex */
+  --zi-message: 2010;
+}

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

@@ -0,0 +1,47 @@
+'use client';
+
+import Link from 'next/link';
+import { IOCIdentifier } from '@config/IOCIdentifier';
+import { useIOC } from '@/uikit/hook/useIOC';
+import { LanguageSwitcher } from './LanguageSwitcher';
+import { LogoutButton } from './LogoutButton';
+import { ThemeSwitcher } from './ThemeSwitcher';
+
+export function BaseHeader(props: { showLogoutButton?: boolean }) {
+  const { showLogoutButton } = props;
+  const appConfig = useIOC(IOCIdentifier.AppConfig);
+  return (
+    <header
+      data-testid="base-header"
+      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">
+        <div className="flex items-center">
+          <Link
+            href="/"
+            className="flex items-center hover:opacity-80 transition-opacity"
+          >
+            {/* <img
+              data-testid="base-header-logo"
+              src={IOC(PublicAssetsPath).getPath('/logo.svg')}
+              alt="logo"
+              className="h-8 w-auto"
+            /> */}
+            <span
+              data-testid="base-header-app-name"
+              className="ml-2 text-lg font-semibold text-text"
+            >
+              {appConfig.appName}
+            </span>
+          </Link>
+        </div>
+        <div className="flex items-center gap-4">
+          <LanguageSwitcher />
+          <ThemeSwitcher />
+
+          {showLogoutButton && <LogoutButton />}
+        </div>
+      </div>
+    </header>
+  );
+}

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

@@ -0,0 +1,37 @@
+'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 { I } from '@config/IOCIdentifier';
+import { NavigateBridge } from '@/base/cases/NavigateBridge';
+import { BootstrapClient } from '@/core/bootstraps/BootstrapClient';
+import { clientIOC } from '@/core/clientIoc/ClientIOC';
+import { IOCContext } from '../context/IOCContext';
+
+export function BootstrapsProvider(props: { children: React.ReactNode }) {
+  const IOC = clientIOC.create();
+  const locale = useLocale();
+  const router = useRouter();
+
+  useEffect(() => {
+    IOC(I.RouterServiceInterface).setLocale(locale);
+    IOC(NavigateBridge).setUIBridge(router);
+  }, [locale, router, IOC]);
+
+  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>
+  );
+}

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

@@ -0,0 +1,50 @@
+'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 { IOCIdentifier } from '@config/IOCIdentifier';
+import { clientIOC } from '@/core/clientIoc/ClientIOC';
+import { BootstrapsProvider } from './BootstrapsProvider';
+import type { CommonThemeConfig } from '@config/theme';
+
+/**
+ * CommonProvider is a provider for the common components
+ *
+ * - IOCProvider
+ * - BootstrapsProvider
+ * - ThemeProvider
+ * - AntdProvider
+ *
+ * @param param0
+ * @returns
+ */
+export function ComboProvider(props: {
+  themeConfig: CommonThemeConfig;
+  children: React.ReactNode;
+}) {
+  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>{children}</AntdRegistry>
+        </BootstrapsProvider>
+      </ThemeProvider>
+    </AntdThemeProvider>
+  );
+}

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

@@ -0,0 +1,52 @@
+'use client';
+
+import { Select } from 'antd';
+import { useLocale } from 'next-intl';
+import { useCallback } from 'react';
+import { i18nConfig } from '@config/i18n';
+import { IOCIdentifier } from '@config/IOCIdentifier';
+import type { I18nServiceLocale } from '@/base/port/I18nServiceInterface';
+import { usePathname, useRouter } from '@/i18n/routing';
+import { useIOC } from '../hook/useIOC';
+import { useStore } from '../hook/useStore';
+import type { LocaleType } from '@config/i18n';
+
+export function LanguageSwitcher() {
+  const i18nService = useIOC(IOCIdentifier.I18nServiceInterface);
+  const { loading } = useStore(i18nService);
+  const pathname = usePathname(); // current pathname, aware of i18n
+
+  const router = useRouter(); // i18n-aware router instance
+  const currentLocale = useLocale() as LocaleType; // currently active locale
+
+  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 });
+
+      try {
+        await i18nService.changeLanguage(value as I18nServiceLocale);
+      } catch (error) {
+        console.error('Failed to change language:', error);
+      }
+    },
+    [i18nService, pathname, router]
+  );
+
+  return (
+    <Select
+      data-testid="LanguageSwitcher"
+      loading={loading}
+      value={currentLocale}
+      onChange={handleLanguageChange}
+      options={i18nConfig.supportedLngs.map((lang) => ({
+        value: lang,
+        label:
+          i18nConfig.localeNames[lang as keyof typeof i18nConfig.localeNames]
+      }))}
+      className="w-24"
+    />
+  );
+}

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

@@ -0,0 +1,51 @@
+import Link from 'next/link';
+import { useLocaleRoutes } from '@config/common';
+import { i18nConfig } from '@config/i18n';
+import type { LinkProps } from 'next/link';
+import type { ReactNode } from 'react';
+
+interface LocaleLinkProps
+  extends Omit<LinkProps, 'href'>,
+    React.HTMLAttributes<HTMLAnchorElement> {
+  href:
+    | string
+    | {
+        pathname: string;
+        query?: Record<string, string>;
+        hash?: string;
+      };
+  locale?: string;
+  title: string;
+  children: ReactNode;
+  defaultLocale?: string;
+  className?: string;
+}
+
+export const LocaleLink: React.FC<LocaleLinkProps> = ({
+  href,
+  locale,
+  children,
+  defaultLocale,
+  ...props
+}) => {
+  locale = locale || i18nConfig.fallbackLng;
+
+  const isDefaultLocale = locale === defaultLocale;
+  const shouldAddLocale = useLocaleRoutes && !isDefaultLocale;
+
+  let localizedHref: typeof href;
+  if (typeof href === 'string') {
+    localizedHref = shouldAddLocale ? `/${locale}${href}` : href;
+  } else {
+    localizedHref = {
+      ...href,
+      pathname: shouldAddLocale ? `/${locale}${href.pathname}` : href.pathname
+    };
+  }
+
+  return (
+    <Link data-testid="locale-link" {...props} href={localizedHref}>
+      {children}
+    </Link>
+  );
+};

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

@@ -0,0 +1,34 @@
+import { Button } from 'antd';
+import { useCallback } from 'react';
+import {
+  AUTH_LOGOUT_DIALOG_CONTENT,
+  AUTH_LOGOUT_DIALOG_TITLE
+} from '@config/Identifier';
+import { IOCIdentifier } from '@config/IOCIdentifier';
+import { useI18nInterface } from '../hook/useI18nInterface';
+import { useIOC } from '../hook/useIOC';
+import type { PageI18nInterface } from '@config/i18n';
+
+export function LogoutButton() {
+  const IOC = useIOC();
+  const tt = useI18nInterface({
+    title: AUTH_LOGOUT_DIALOG_TITLE,
+    content: AUTH_LOGOUT_DIALOG_CONTENT
+  } as PageI18nInterface);
+
+  const onClick = useCallback(() => {
+    IOC(IOCIdentifier.DialogHandler).confirm({
+      title: tt.title,
+      content: tt.content,
+      onOk: () => {
+        IOC(IOCIdentifier.UserServiceInterface).logout();
+      }
+    });
+  }, [tt, IOC]);
+
+  return (
+    <Button data-testid="LogoutButton" danger onClick={onClick}>
+      {tt.title}
+    </Button>
+  );
+}

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

@@ -0,0 +1,21 @@
+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>
+  );
+}

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

@@ -0,0 +1,99 @@
+'use client';
+
+import {
+  BulbOutlined,
+  BulbFilled,
+  HeartFilled,
+  HeartOutlined,
+  DesktopOutlined
+} from '@ant-design/icons';
+import { Select } from 'antd';
+import { clsx } from 'clsx';
+import { useTheme } from 'next-themes';
+import { themeConfig } from '@config/theme';
+import { useMountedClient } from '../hook/useMountedClient';
+
+const { supportedThemes } = themeConfig;
+
+const colorMap: Record<
+  string,
+  { i18nkey: string; colors: string[]; icons: React.ElementType[] }
+> = {
+  system: {
+    i18nkey: 'System',
+    colors: ['text-text', 'text-text-secondary'],
+    icons: [DesktopOutlined, DesktopOutlined]
+  },
+  light: {
+    i18nkey: 'Light',
+    colors: ['text-text', 'text-text-secondary'],
+    icons: [BulbFilled, BulbOutlined]
+  },
+  dark: {
+    i18nkey: 'Dark',
+    colors: ['text-[#9333ea]', 'text-[#a855f7]'],
+    icons: [BulbFilled, BulbOutlined]
+  },
+  pink: {
+    i18nkey: 'Pink',
+    colors: ['text-[#f472b6]', 'text-[#ec4899]'],
+    icons: [HeartFilled, HeartOutlined]
+  }
+};
+
+export function ThemeSwitcher() {
+  const { theme, resolvedTheme, setTheme } = useTheme();
+  const mounted = useMountedClient();
+
+  // 如果组件未挂载，返回空的 Select 以避免闪烁
+  if (!mounted) {
+    return (
+      <Select
+        data-testid="ThemeSwitcher"
+        loading
+        value="system"
+        options={[]}
+        style={{ width: 120 }}
+        className="min-w-40 max-w-full"
+        disabled
+      />
+    );
+  }
+
+  const themeOptions = ['system', ...supportedThemes!].map((themeName) => {
+    const { i18nkey, colors, icons } = colorMap[themeName] || colorMap.light;
+    const [currentColor, normalColor] = colors;
+    const [CurrentIcon, NormalIcon] = icons;
+
+    const isCurrentTheme =
+      theme === themeName ||
+      (themeName === resolvedTheme && theme === 'system');
+
+    return {
+      key: themeName,
+      value: themeName,
+      label: (
+        <div
+          className={clsx(
+            'flex items-center gap-2',
+            isCurrentTheme ? currentColor : normalColor
+          )}
+        >
+          {isCurrentTheme ? <CurrentIcon /> : <NormalIcon />}
+          <span>{i18nkey}</span>
+        </div>
+      )
+    };
+  });
+
+  return (
+    <Select
+      data-testid="ThemeSwitcher"
+      value={theme}
+      onChange={setTheme}
+      options={themeOptions}
+      style={{ width: 120 }}
+      className="min-w-40 max-w-full"
+    />
+  );
+}

package/dist/templates/next-app/src/uikit/context/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);

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

@@ -0,0 +1,28 @@
+import { useTranslations } from 'next-intl';
+import { useMemo } from 'react';
+import type { PageI18nInterface } from '@config/i18n/PageI18nInterface';
+
+/**
+ * Hook to get the i18n interface
+ *
+ * @param i18nInterface - The i18n interface to get
+ * @returns The i18n interface
+ */
+export function useI18nInterface<T extends PageI18nInterface>(
+  i18nInterface: T
+): T {
+  const t = useTranslations();
+
+  const i18n = useMemo(() => {
+    return Object.fromEntries(
+      Object.entries(i18nInterface).map(([key, value]) => {
+        if (typeof value === 'string') {
+          return [key, t(value)];
+        }
+        return [key, value];
+      })
+    ) as T;
+  }, [i18nInterface, t]);
+
+  return i18n;
+}

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

@@ -0,0 +1,37 @@
+import { useContext } from 'react';
+import { IOCContext } from '../context/IOCContext';
+import type { IOCIdentifierMap } from '@config/IOCIdentifier';
+import type {
+  IOCContainerInterface,
+  IOCFunctionInterface
+} from '@qlover/corekit-bridge';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type IOCIdentifier = keyof IOCIdentifierMap | (new (...args: any[]) => any);
+
+export function useIOC(): IOCFunctionInterface<
+  IOCIdentifierMap,
+  IOCContainerInterface
+>;
+export function useIOC<T extends IOCIdentifier>(
+  identifier: T
+): T extends keyof IOCIdentifierMap
+  ? IOCIdentifierMap[T]
+  : // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    T extends new (...args: any[]) => any
+    ? InstanceType<T>
+    : never;
+
+export function useIOC<T extends IOCIdentifier>(identifier?: T) {
+  const IOC = useContext(IOCContext);
+
+  if (!IOC) {
+    throw new Error('IOC is not found');
+  }
+
+  if (identifier === undefined) {
+    return IOC;
+  }
+
+  return IOC(identifier);
+}

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

@@ -0,0 +1,11 @@
+import { useEffect, useState } from 'react';
+
+export const useMountedClient = () => {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  return mounted;
+};

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

@@ -0,0 +1,15 @@
+import { useSliceStore, type SliceStore } from '@qlover/slice-store-react';
+import type {
+  StoreInterface,
+  StoreStateInterface
+} from '@qlover/corekit-bridge';
+
+export function useStore<
+  C extends StoreInterface<StoreStateInterface>,
+  State = C['state']
+>(store: C, selector?: (state: C['state']) => State): State {
+  return useSliceStore(
+    store as unknown as SliceStore<StoreStateInterface>,
+    selector
+  );
+}

package/dist/templates/next-app/tailwind.config.ts

@@ -0,0 +1,8 @@
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+  darkMode: ['class', '[data-theme="dark"]'],
+  content: ['./src/**/*.{js,ts,jsx,tsx}']
+};
+
+export default config;

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

@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"],
+      "@config/*": ["./config/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    ".next/types/**/*.ts",
+    "config/**/*.ts"
+  ],
+  "exclude": ["node_modules"]
+}

package/package.json

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