@qlover/create-app 0.7.10 → 0.7.11

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

@@ -0,0 +1,44 @@
+/* custom variables - for antd and custom css */
+html,
+.fe-theme {
+  /* Antd Table 组件变量 */
+  .ant-table-css-var {
+    --fe-table-header-bg: rgb(var(--color-bg-elevated));
+    --fe-table-header-color: rgb(var(--text-primary));
+    --fe-table-header-sort-active-bg: rgb(var(--color-bg-secondary));
+    --fe-table-header-sort-hover-bg: rgb(var(--color-bg-secondary));
+    --fe-table-body-sort-bg: rgb(var(--color-bg-elevated));
+    --fe-table-row-hover-bg: rgb(var(--color-bg-secondary));
+    --fe-table-row-selected-bg: rgba(var(--color-brand), 0.1);
+    --fe-table-row-selected-hover-bg: rgba(var(--color-brand-hover), 0.2);
+    --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-elevated));
+    --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-secondary));
+    --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/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"
-            >
-              {appConfig.appName}
-            </span>
-          </Link>
-        </div>
+        <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"
+            >
+              <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

@@ -3,11 +3,11 @@ import '@ant-design/v5-patch-for-react-19';
 import { useRouter } from 'next/navigation';
 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 }) {

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,6 +1,7 @@
 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
@@ -8,7 +9,6 @@ import {
 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 dialogHandler = useIOC(I.DialogHandler);

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

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

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/DBTableInterface.ts

@@ -1,3 +0,0 @@
-export interface DBTableInterface {
-  readonly name: string;
-}

package/dist/templates/next-app/src/base/services/appApi/AppUserType.ts

@@ -1,51 +0,0 @@
-import type { RequestEncryptPluginProps } from '@/base/cases/RequestEncryptPlugin';
-import type { AppApiResponse } from '@/base/port/AppApiInterface';
-import type {
-  RequestAdapterConfig,
-  RequestAdapterResponse,
-  RequestTransactionInterface
-} from '@qlover/fe-corekit';
-
-export interface UserApiConfig<Request = unknown>
-  extends RequestAdapterConfig<Request>,
-    RequestEncryptPluginProps<Request> {}
-
-/**
- * UserApiResponse
- *
- * @description
- * UserApiResponse is the response for the UserApi.
- *
- * extends:
- * - RequestAdapterResponse<Request, Response>
- */
-export type UserApiResponse<
-  Request = unknown,
-  Response = unknown
-> = RequestAdapterResponse<Request, AppApiResponse<Response>>;
-
-/**
- * UserApi common transaction
- */
-export interface UserApiTransaction<Request = unknown, Response = unknown>
-  extends RequestTransactionInterface<
-    UserApiConfig<Request>,
-    UserApiResponse<Request, Response>
-  > {
-  data: UserApiConfig<Request>['data'];
-}
-
-export type UserApiLoginTransaction = UserApiTransaction<
-  { email: string; password: string },
-  {
-    token: string;
-  }
->;
-
-export type UserApiRegisterTransaction = UserApiTransaction<
-  {
-    email: string;
-    password: string;
-  },
-  UserApiTransaction['response']['data']
->;