@qlover/create-app 0.7.9 → 0.7.11

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

@@ -0,0 +1,43 @@
+[data-theme='dark'],
+[data-theme='dark'] .fe-theme {
+  /* Antd Table 组件变量 */
+  .ant-table-css-var {
+    --fe-table-header-bg: rgb(var(--color-bg-secondary));
+    --fe-table-header-color: rgb(var(--text-primary));
+    --fe-table-header-sort-active-bg: rgb(var(--color-bg-elevated));
+    --fe-table-header-sort-hover-bg: rgb(var(--color-bg-elevated));
+    --fe-table-body-sort-bg: rgb(var(--color-bg-secondary));
+    --fe-table-row-hover-bg: rgb(var(--color-bg-elevated));
+    --fe-table-row-selected-bg: rgba(var(--color-brand), 0.2);
+    --fe-table-row-selected-hover-bg: rgba(var(--color-brand-hover), 0.3);
+    --fe-table-row-expanded-bg: rgba(var(--text-primary), 0.02);
+    --fe-table-cell-padding-block: 16px;
+    --fe-table-cell-padding-inline: 16px;
+    --fe-table-cell-padding-block-md: 12px;
+    --fe-table-cell-padding-inline-md: 8px;
+    --fe-table-cell-padding-block-sm: 8px;
+    --fe-table-cell-padding-inline-sm: 8px;
+    --fe-table-border-color: rgb(var(--color-border));
+    --fe-table-header-border-radius: 8px;
+    --fe-table-footer-bg: rgb(var(--color-bg-secondary));
+    --fe-table-footer-color: rgb(var(--text-primary));
+    --fe-table-cell-font-size: 14px;
+    --fe-table-cell-font-size-md: 14px;
+    --fe-table-cell-font-size-sm: 14px;
+    --fe-table-header-split-color: rgb(var(--color-border));
+    --fe-table-fixed-header-sort-active-bg: rgb(var(--color-bg-elevated));
+    --fe-table-header-filter-hover-bg: rgba(var(--text-primary), 0.06);
+    --fe-table-filter-dropdown-menu-bg: rgb(var(--color-bg-base));
+    --fe-table-filter-dropdown-bg: rgb(var(--color-bg-base));
+    --fe-table-expand-icon-bg: rgb(var(--color-bg-base));
+    --fe-table-selection-column-width: 32px;
+    --fe-table-sticky-scroll-bar-bg: rgba(var(--text-primary), 0.25);
+    --fe-table-sticky-scroll-bar-border-radius: 100px;
+    --fe-table-expand-icon-margin-top: 2.5px;
+    --fe-table-header-icon-color: rgb(var(--text-tertiary));
+    --fe-table-header-icon-hover-color: rgb(var(--text-secondary));
+    --fe-table-expand-icon-half-inner: 7px;
+    --fe-table-expand-icon-size: 17px;
+    --fe-table-expand-icon-scale: 0.9411764705882353;
+  }
+}

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

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

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

@@ -0,0 +1,43 @@
+[data-theme='pink'],
+[data-theme='pink'] .fe-theme {
+  /* Antd Table 组件变量 */
+  .ant-table-css-var {
+    --fe-table-header-bg: var(--ant-color-bg-container);
+    --fe-table-header-color: var(--ant-color-text);
+    --fe-table-header-sort-active-bg: var(--ant-color-bg-elevated);
+    --fe-table-header-sort-hover-bg: var(--ant-color-bg-elevated);
+    --fe-table-body-sort-bg: var(--ant-color-bg-container);
+    --fe-table-row-hover-bg: var(--ant-color-bg-elevated);
+    --fe-table-row-selected-bg: var(--fe-color-primary-bg);
+    --fe-table-row-selected-hover-bg: rgba(var(--fe-color-primary-hover), 0.2);
+    --fe-table-row-expanded-bg: rgba(var(--ant-color-text), 0.02);
+    --fe-table-cell-padding-block: 16px;
+    --fe-table-cell-padding-inline: 16px;
+    --fe-table-cell-padding-block-md: 12px;
+    --fe-table-cell-padding-inline-md: 8px;
+    --fe-table-cell-padding-block-sm: 8px;
+    --fe-table-cell-padding-inline-sm: 8px;
+    --fe-table-border-color: var(--ant-color-border);
+    --fe-table-header-border-radius: 8px;
+    --fe-table-footer-bg: var(--ant-color-bg-container);
+    --fe-table-footer-color: var(--ant-color-text);
+    --fe-table-cell-font-size: 14px;
+    --fe-table-cell-font-size-md: 14px;
+    --fe-table-cell-font-size-sm: 14px;
+    --fe-table-header-split-color: var(--ant-color-border);
+    --fe-table-fixed-header-sort-active-bg: var(--ant-color-bg-elevated);
+    --fe-table-header-filter-hover-bg: rgba(var(--ant-color-text), 0.06);
+    --fe-table-filter-dropdown-menu-bg: var(--ant-color-bg-container);
+    --fe-table-filter-dropdown-bg: var(--ant-color-bg-container);
+    --fe-table-expand-icon-bg: var(--ant-color-bg-container);
+    --fe-table-selection-column-width: 32px;
+    --fe-table-sticky-scroll-bar-bg: rgba(var(--ant-color-text), 0.25);
+    --fe-table-sticky-scroll-bar-border-radius: 100px;
+    --fe-table-expand-icon-margin-top: 2.5px;
+    --fe-table-header-icon-color: var(--fe-color-icon);
+    --fe-table-header-icon-hover-color: var(--fe-color-icon-hover);
+    --fe-table-expand-icon-half-inner: 7px;
+    --fe-table-expand-icon-size: 17px;
+    --fe-table-expand-icon-scale: 0.9411764705882353;
+  }
+}

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

@@ -0,0 +1,106 @@
+'use client';
+
+import {
+  DashboardOutlined,
+  UserOutlined,
+  MenuFoldOutlined,
+  MenuUnfoldOutlined
+} from '@ant-design/icons';
+import { Layout, Menu } from 'antd';
+import { clsx } from 'clsx';
+import React, { useCallback, useMemo, type HTMLAttributes } from 'react';
+import { AdminPageManager } from '@/base/cases/AdminPageManager';
+import { BaseHeader } from './BaseHeader';
+import { LocaleLink } from './LocaleLink';
+import { useIOC } from '../hook/useIOC';
+import { useStore } from '../hook/useStore';
+import type { RenderLeftFunction } from './BaseHeader';
+import type { ItemType } from 'antd/es/menu/interface';
+
+const { Sider } = Layout;
+
+const IconMap = {
+  dashboard: <DashboardOutlined />,
+  users: <UserOutlined />
+};
+
+export interface AdminLayoutProps extends HTMLAttributes<HTMLDivElement> {
+  mainClassName?: string;
+  children: React.ReactNode;
+}
+
+export function AdminLayout(props: AdminLayoutProps) {
+  const { children, className, mainClassName, ...rest } = props;
+
+  const page = useIOC(AdminPageManager);
+
+  const collapsedSidebar = useStore(page, page.selectors.collapsedSidebar);
+  const navItems = useStore(page, page.selectors.navItems);
+
+  const sidebarItems = useMemo(() => {
+    return navItems.map((item) => {
+      // TODO: use i18n
+      const title = item.i18nKey;
+      const icon = IconMap[item.key as keyof typeof IconMap];
+
+      return {
+        key: item.key,
+        label: (
+          <LocaleLink
+            href={item.pathname!}
+            title={title}
+            className="flex items-center gap-2"
+          >
+            {icon}
+            <span>{title}</span>
+          </LocaleLink>
+        ),
+        link: item.pathname
+      } as ItemType;
+    });
+  }, [navItems]);
+
+  const renderHeaderLeft: RenderLeftFunction = useCallback(
+    ({ defaultElement }) => (
+      <div data-testid="AdminLayoutHeader" className="flex items-center">
+        <span
+          className="text-text hover:text-text-hover cursor-pointer text-md transition-colors"
+          onClick={() => page.toggleSidebar()}
+        >
+          {collapsedSidebar ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+        </span>
+
+        {defaultElement}
+      </div>
+    ),
+    [collapsedSidebar, page]
+  );
+
+  return (
+    <Layout data-testid="AdminLayout" className={className} {...rest}>
+      <div className="overflow-auto h-screen sticky top-0 bottom-0 scrollbar-thin scrollbar-gutter-stable">
+        <Sider
+          className="h-full"
+          onCollapse={() => page.toggleSidebar()}
+          collapsed={collapsedSidebar}
+        >
+          <div className="demo-logo-vertical" />
+          <Menu mode="inline" items={sidebarItems} />
+        </Sider>
+      </div>
+
+      <Layout>
+        <BaseHeader
+          href="/admin"
+          showLogoutButton
+          renderLeft={renderHeaderLeft}
+        />
+        <main
+          className={clsx('p-2 bg-primary text-text flex-1', mainClassName)}
+        >
+          {children}
+        </main>
+      </Layout>
+    </Layout>
+  );
+}

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

@@ -1,16 +1,68 @@
 'use client';
 
-import Link from 'next/link';
-import { IOCIdentifier } from '@config/IOCIdentifier';
+import { TeamOutlined } from '@ant-design/icons';
+import { useLocale, useTranslations } from 'next-intl';
+import { useMemo } from 'react';
 import { useIOC } from '@/uikit/hook/useIOC';
+import { PAGE_HEAD_ADMIN_TITLE } from '@config/Identifier';
+import { IOCIdentifier } from '@config/IOCIdentifier';
 import { LanguageSwitcher } from './LanguageSwitcher';
+import { LocaleLink } from './LocaleLink';
 import { LogoutButton } from './LogoutButton';
 import { ThemeSwitcher } from './ThemeSwitcher';
 
-export function BaseHeader(props: { showLogoutButton?: boolean }) {
-  const { showLogoutButton } = props;
+export type RenderLeftFunction = (props: {
+  locale: string;
+  defaultElement: React.ReactNode;
+}) => React.ReactNode;
+
+export function BaseHeader(props: {
+  href?: string;
+  showLogoutButton?: boolean;
+  showAdminButton?: boolean;
+  renderLeft?: React.ReactNode | RenderLeftFunction;
+}) {
+  const { href = '/', showLogoutButton, showAdminButton, renderLeft } = props;
   const appConfig = useIOC(IOCIdentifier.AppConfig);
   const i18nService = useIOC(IOCIdentifier.I18nServiceInterface);
+  const locale = useLocale();
+  const t = useTranslations();
+
+  const tt = {
+    title: appConfig.appName,
+    admin: t(PAGE_HEAD_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="ml-2 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
@@ -18,20 +70,19 @@ export function BaseHeader(props: { showLogoutButton?: boolean }) {
       className="h-14 bg-secondary border-b border-c-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"
-          >
-            <span
-              data-testid="base-header-app-name"
-              className="ml-2 text-lg font-semibold text-text"
+        <div className="flex items-center">{RenderLeft}</div>
+        <div className="flex items-center gap-2 md:gap-4">
+          {showAdminButton && (
+            <LocaleLink
+              href="/admin"
+              title={tt.admin}
+              locale={locale}
+              className="text-text hover:text-text-hover cursor-pointer text-lg transition-colors"
             >
-              {appConfig.appName}
-            </span>
-          </Link>
-        </div>
-        <div className="flex items-center gap-2">
+              <TeamOutlined className="text-lg text-text" />
+            </LocaleLink>
+          )}
+
           <LanguageSwitcher i18nService={i18nService} />
           <ThemeSwitcher />
           {showLogoutButton && <LogoutButton />}

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

@@ -3,12 +3,14 @@ import type { HTMLAttributes } from 'react';
 
 export interface BaseLayoutProps extends HTMLAttributes<HTMLDivElement> {
   showLogoutButton?: boolean;
+  showAdminButton?: boolean;
   mainProps?: HTMLAttributes<HTMLElement>;
 }
 
 export function BaseLayout({
   children,
   showLogoutButton,
+  showAdminButton,
   mainProps,
   ...props
 }: BaseLayoutProps) {
@@ -18,7 +20,10 @@ export function BaseLayout({
       className="flex flex-col min-h-screen"
       {...props}
     >
-      <BaseHeader showLogoutButton={showLogoutButton} />
+      <BaseHeader
+        showLogoutButton={showLogoutButton}
+        showAdminButton={showAdminButton}
+      />
       <main className="flex flex-1 flex-col bg-primary" {...mainProps}>
         {children}
       </main>

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

@@ -1,24 +1,31 @@
 'use client';
 import '@ant-design/v5-patch-for-react-19';
 import { useRouter } from 'next/navigation';
-import { useLocale } from 'next-intl';
+import { useLocale, useTranslations } from 'next-intl';
 import { useEffect } from 'react';
-import { I } from '@config/IOCIdentifier';
 import { NavigateBridge } from '@/base/cases/NavigateBridge';
+import type { I18nServiceLocale } from '@/base/port/I18nServiceInterface';
 import { BootstrapClient } from '@/core/bootstraps/BootstrapClient';
 import { clientIOC } from '@/core/clientIoc/ClientIOC';
+import { I } from '@config/IOCIdentifier';
 import { IOCContext } from '../context/IOCContext';
 
 export function BootstrapsProvider(props: { children: React.ReactNode }) {
   const IOC = clientIOC.create();
   const locale = useLocale();
   const router = useRouter();
+  const t = useTranslations();
 
   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({

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

@@ -3,10 +3,11 @@ 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 { IOCIdentifier } from '@config/IOCIdentifier';
 import type { CommonThemeConfig } from '@config/theme';
+import { BootstrapsProvider } from './BootstrapsProvider';
+import { useMountedClient } from '../hook/useMountedClient';
 
 /**
  * CommonProvider is a provider for the common components
@@ -23,6 +24,13 @@ export function ComboProvider(props: {
   themeConfig: CommonThemeConfig;
   children: React.ReactNode;
 }) {
+  /**
+   * useMountedClient 会等待客户端完全初始化
+   * 只有在客户端准备就绪后才渲染组件内容
+   * 这样可以确保所有的客户端代码（包括 API 配置、插件等）都已经正确初始化
+   */
+  const mounted = useMountedClient();
+
   const { themeConfig, children } = props;
 
   const IOC = clientIOC.create();
@@ -42,7 +50,7 @@ export function ComboProvider(props: {
         storageKey={themeConfig.storageKey}
       >
         <BootstrapsProvider>
-          <AntdRegistry>{children}</AntdRegistry>
+          <AntdRegistry>{mounted ? children : null}</AntdRegistry>
         </BootstrapsProvider>
       </ThemeProvider>
     </AntdThemeProvider>

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

@@ -4,12 +4,12 @@ import { TranslationOutlined } from '@ant-design/icons';
 import { Dropdown } from 'antd';
 import { useLocale } from 'next-intl';
 import { useCallback, useMemo } from 'react';
-import { i18nConfig } from '@config/i18n';
 import type {
   I18nServiceInterface,
   I18nServiceLocale
 } from '@/base/port/I18nServiceInterface';
 import { usePathname, useRouter } from '@/i18n/routing';
+import { i18nConfig } from '@config/i18n';
 import type { LocaleType } from '@config/i18n';
 import type { ItemType } from 'antd/es/menu/interface';
 

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

@@ -1,34 +1,44 @@
-import { Button } from 'antd';
+import { LogoutOutlined } from '@ant-design/icons';
+import { Tooltip } from 'antd';
 import { useCallback } from 'react';
+import type { PageI18nInterface } from '@config/i18n';
 import {
   AUTH_LOGOUT_DIALOG_CONTENT,
   AUTH_LOGOUT_DIALOG_TITLE
 } from '@config/Identifier';
-import { IOCIdentifier } from '@config/IOCIdentifier';
+import { I } 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 dialogHandler = useIOC(I.DialogHandler);
+  const userService = useIOC(I.UserServiceInterface);
+  const routerService = useIOC(I.RouterServiceInterface);
+
   const tt = useI18nInterface({
     title: AUTH_LOGOUT_DIALOG_TITLE,
     content: AUTH_LOGOUT_DIALOG_CONTENT
   } as PageI18nInterface);
 
   const onClick = useCallback(() => {
-    IOC(IOCIdentifier.DialogHandler).confirm({
+    dialogHandler.confirm({
       title: tt.title,
       content: tt.content,
-      onOk: () => {
-        IOC(IOCIdentifier.UserServiceInterface).logout();
+      onOk: async () => {
+        await userService.logout();
+        routerService.gotoLogin();
       }
     });
-  }, [tt, IOC]);
+  }, [tt, dialogHandler, userService, routerService]);
 
   return (
-    <Button data-testid="LogoutButton" danger onClick={onClick}>
-      {tt.title}
-    </Button>
+    <Tooltip data-testid="LogoutIcon" title={tt.title} placement="right">
+      <span
+        className="text-text hover:text-red-500 cursor-pointer text-lg transition-colors"
+        onClick={onClick}
+      >
+        <LogoutOutlined />
+      </span>
+    </Tooltip>
   );
 }

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

@@ -1,6 +1,6 @@
 import { useContext } from 'react';
-import { IOCContext } from '../context/IOCContext';
 import type { IOCIdentifierMap } from '@config/IOCIdentifier';
+import { IOCContext } from '../context/IOCContext';
 import type {
   IOCContainerInterface,
   IOCFunctionInterface

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

@@ -4,7 +4,13 @@ export const useMountedClient = () => {
   const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
-    setMounted(true);
+    const timer = requestAnimationFrame(() => {
+      setMounted(true);
+    });
+
+    return () => {
+      cancelAnimationFrame(timer);
+    };
   }, []);
 
   return mounted;

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

@@ -22,13 +22,15 @@
     ],
     "paths": {
       "@/*": ["./src/*"],
-      "@config/*": ["./config/*"]
+      "@config/*": ["./config/*"],
+      "@migrations/*": ["./migrations/*"]
     }
   },
   "include": [
     "next-env.d.ts",
     "src/**/*.ts",
     "src/**/*.tsx",
+    "migrations/**/*.ts",
     ".next/types/**/*.ts",
     "config/**/*.ts"
   ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qlover/create-app",
-  "version": "0.7.9",
+  "version": "0.7.11",
   "description": "Create a new app with a single command",
   "private": false,
   "type": "module",
@@ -38,7 +38,7 @@
   "dependencies": {
     "commander": "^13.1.0",
     "inquirer": "^12.3.2",
-    "@qlover/scripts-context": "1.1.3"
+    "@qlover/scripts-context": "1.1.4"
   },
   "scripts": {
     "build": "tsup",

package/dist/templates/next-app/src/base/cases/ServerAuth.ts

@@ -1,17 +0,0 @@
-import { cookies } from 'next/headers';
-import { I } from '@config/IOCIdentifier';
-import type { ServerAuthInterface } from '../port/ServerAuthInterface';
-import type { ServerInterface } from '../port/ServerInterface';
-
-export class ServerAuth implements ServerAuthInterface {
-  constructor(protected server: ServerInterface) {}
-
-  async hasAuth(): Promise<boolean> {
-    const cookieStore = await cookies();
-    const appConfig = this.server.getIOC(I.AppConfig);
-
-    const token = cookieStore.get(appConfig.userTokenKey);
-
-    return !!token;
-  }
-}

package/dist/templates/next-app/src/base/cases/ServerErrorHandler.ts

@@ -1,27 +0,0 @@
-import { ExecutorError, type ExecutorContext } from '@qlover/fe-corekit';
-import { SERVER_AUTH_ERROR } from '@config/Identifier';
-import type { BootstrapServerContextValue } from '@/core/bootstraps/BootstrapServer';
-import type { BootstrapExecutorPlugin } from '@qlover/corekit-bridge';
-
-export class ServerErrorHandler implements BootstrapExecutorPlugin {
-  pluginName = 'ServerErrorHandler';
-
-  onError(
-    context: ExecutorContext<BootstrapServerContextValue>
-  ): ExecutorError | void {
-    const { parameters, error } = context;
-    const { messages } = parameters;
-
-    if (error instanceof Error) {
-      const messageId = error.message;
-
-      if (messageId === SERVER_AUTH_ERROR) {
-        const message = messages[messageId];
-
-        if (message) {
-          return new ExecutorError(messageId, message);
-        }
-      }
-    }
-  }
-}

package/dist/templates/next-app/src/base/port/ServerAuthInterface.ts

@@ -1,3 +0,0 @@
-export interface ServerAuthInterface {
-  hasAuth(): Promise<boolean>;
-}

package/dist/templates/next-app/src/base/port/ServerInterface.ts

@@ -1,12 +0,0 @@
-import {
-  type IOCContainerInterface,
-  type IOCFunctionInterface
-} from '@qlover/corekit-bridge';
-import { type IOCIdentifierMapServer } from '@config/IOCIdentifier';
-
-export interface ServerInterface {
-  getIOC(): IOCFunctionInterface<IOCIdentifierMapServer, IOCContainerInterface>;
-  getIOC<T extends keyof IOCIdentifierMapServer>(
-    identifier: T
-  ): IOCIdentifierMapServer[T];
-}