@qlover/create-app 0.7.14 → 0.8.0

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

@@ -1,32 +1,31 @@
 [data-theme='dark'],
-[data-theme='dark'] .fe-theme {
+[data-theme='dark'] .fe-theme .ant-pagination-css-var,
+[data-theme='dark'] .fe-theme.ant-pagination {
   /* Antd Pagination 组件变量 */
-  .ant-pagination-css-var {
-    --fe-pagination-item-bg: rgb(var(--color-bg-secondary));
-    --fe-pagination-item-size: 32px;
-    --fe-pagination-item-size-sm: 24px;
-    --fe-pagination-item-active-bg: rgb(var(--color-bg-secondary));
-    --fe-pagination-item-link-bg: rgb(var(--color-bg-secondary));
-    --fe-pagination-item-active-color-disabled: rgb(var(--text-tertiary));
-    --fe-pagination-item-active-bg-disabled: rgba(var(--text-primary), 0.15);
-    --fe-pagination-item-input-bg: rgb(var(--color-bg-secondary));
-    --fe-pagination-mini-options-size-changer-top: 0px;
-    --fe-pagination-padding-block: 4px;
-    --fe-pagination-padding-block-sm: 0px;
-    --fe-pagination-padding-block-lg: 7px;
-    --fe-pagination-padding-inline: 11px;
-    --fe-pagination-padding-inline-sm: 7px;
-    --fe-pagination-padding-inline-lg: 11px;
-    --fe-pagination-addon-bg: rgba(var(--text-primary), 0.02);
-    --fe-pagination-active-border-color: rgb(var(--color-brand));
-    --fe-pagination-hover-border-color: rgb(var(--color-brand-hover));
-    --fe-pagination-active-shadow: 0 0 0 2px rgba(var(--color-brand), 0.2);
-    --fe-pagination-error-active-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
-    --fe-pagination-warning-active-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
-    --fe-pagination-hover-bg: rgb(var(--color-bg-elevated));
-    --fe-pagination-active-bg: rgb(var(--color-bg-elevated));
-    --fe-pagination-input-font-size: 14px;
-    --fe-pagination-input-font-size-lg: 16px;
-    --fe-pagination-input-font-size-sm: 14px;
-  }
+  --fe-pagination-item-bg: rgb(var(--color-bg-secondary));
+  --fe-pagination-item-size: 32px;
+  --fe-pagination-item-size-sm: 24px;
+  --fe-pagination-item-active-bg: rgb(var(--color-bg-secondary));
+  --fe-pagination-item-link-bg: rgb(var(--color-bg-secondary));
+  --fe-pagination-item-active-color-disabled: rgb(var(--text-tertiary));
+  --fe-pagination-item-active-bg-disabled: rgba(var(--text-primary), 0.15);
+  --fe-pagination-item-input-bg: rgb(var(--color-bg-secondary));
+  --fe-pagination-mini-options-size-changer-top: 0px;
+  --fe-pagination-padding-block: 4px;
+  --fe-pagination-padding-block-sm: 0px;
+  --fe-pagination-padding-block-lg: 7px;
+  --fe-pagination-padding-inline: 11px;
+  --fe-pagination-padding-inline-sm: 7px;
+  --fe-pagination-padding-inline-lg: 11px;
+  --fe-pagination-addon-bg: rgba(var(--text-primary), 0.02);
+  --fe-pagination-active-border-color: rgb(var(--color-brand));
+  --fe-pagination-hover-border-color: rgb(var(--color-brand-hover));
+  --fe-pagination-active-shadow: 0 0 0 2px rgba(var(--color-brand), 0.2);
+  --fe-pagination-error-active-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
+  --fe-pagination-warning-active-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
+  --fe-pagination-hover-bg: rgb(var(--color-bg-elevated));
+  --fe-pagination-active-bg: rgb(var(--color-bg-elevated));
+  --fe-pagination-input-font-size: 14px;
+  --fe-pagination-input-font-size-lg: 16px;
+  --fe-pagination-input-font-size-sm: 14px;
 }

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

@@ -1,5 +1,6 @@
 [data-theme='pink'],
-[data-theme='pink'] .fe-theme {
+[data-theme='pink'] .fe-theme .ant-pagination-css-var,
+[data-theme='pink'] .fe-theme.ant-pagination {
   /* Antd Pagination 组件变量 */
   .ant-pagination-css-var {
     --fe-pagination-item-bg: var(--ant-color-bg-container);

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

@@ -2,12 +2,15 @@
 
 import {
   DashboardOutlined,
+  GlobalOutlined,
   UserOutlined,
   VerticalAlignBottomOutlined,
   VerticalAlignTopOutlined
 } from '@ant-design/icons';
+import { useStore } from '@brain-toolkit/react-kit';
 import { Layout, Menu } from 'antd';
 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';
@@ -16,14 +19,14 @@ import { LocaleLink } from './LocaleLink';
 import { LogoutButton } from './LogoutButton';
 import { ThemeSwitcher } from './ThemeSwitcher';
 import { useIOC } from '../hook/useIOC';
-import { useStore } from '../hook/useStore';
 import type { ItemType } from 'antd/es/menu/interface';
 
 const { Sider } = Layout;
 
 const IconMap = {
   dashboard: <DashboardOutlined />,
-  users: <UserOutlined />
+  users: <UserOutlined />,
+  locales: <GlobalOutlined />
 };
 
 export interface AdminLayoutProps extends HTMLAttributes<HTMLDivElement> {
@@ -34,10 +37,17 @@ export interface AdminLayoutProps extends HTMLAttributes<HTMLDivElement> {
 export function AdminLayout(props: AdminLayoutProps) {
   const { children, className, mainClassName, ...rest } = props;
 
+  const pathname = usePathname();
   const page = useIOC(AdminPageManager);
   const collapsedSidebar = useStore(page, page.selectors.collapsedSidebar);
   const navItems = useStore(page, page.selectors.navItems);
 
+  const selectedKey = useMemo(() => {
+    // 移除语言前缀，例如 /en/admin/users -> /admin/users
+    const normalizedPath = pathname.replace(/^\/[^/]+/, '');
+    return navItems.find((item) => item.pathname === normalizedPath)?.key || '';
+  }, [pathname, navItems]);
+
   const sidebarItems = useMemo(() => {
     return navItems.map((item) => {
       // TODO: use i18n
@@ -78,7 +88,11 @@ export function AdminLayout(props: AdminLayoutProps) {
           collapsed={collapsedSidebar}
           collapsedWidth={46}
         >
-          <Menu mode="inline" items={sidebarItems} />
+          <Menu
+            mode="inline"
+            items={sidebarItems}
+            selectedKeys={selectedKey ? [selectedKey] : []}
+          />
 
           <div
             data-testid="ToggleSidebarButton"

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

@@ -1,12 +1,13 @@
 'use client';
 
 import { clsx } from 'clsx';
-import { useLocale, useTranslations } from 'next-intl';
+import { useLocale } from 'next-intl';
 import { useMemo } from 'react';
 import { useIOC } from '@/uikit/hook/useIOC';
-import { PAGE_HEAD_ADMIN_TITLE } from '@config/Identifier';
+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;
@@ -22,11 +23,11 @@ export function BaseHeader(props: {
   const { href = '/', className, renderLeft, rightActions } = props;
   const appConfig = useIOC(IOCIdentifier.AppConfig);
   const locale = useLocale();
-  const t = useTranslations();
+  const t = useWarnTranslations();
 
   const tt = {
     title: appConfig.appName,
-    admin: t(PAGE_HEAD_ADMIN_TITLE)
+    admin: t(COMMON_ADMIN_TITLE)
   };
 
   const leftDefault = useMemo(

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

@@ -1,12 +1,13 @@
 import { TeamOutlined } from '@ant-design/icons';
-import { useLocale, useTranslations } from 'next-intl';
+import { useLocale } from 'next-intl';
 import { useMemo, type HTMLAttributes } from 'react';
-import { PAGE_HEAD_ADMIN_TITLE } from '@config/Identifier';
+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;
@@ -22,10 +23,10 @@ export function BaseLayout({
   ...props
 }: BaseLayoutProps) {
   const locale = useLocale();
-  const t = useTranslations();
+  const t = useWarnTranslations();
 
   const tt = {
-    admin: t(PAGE_HEAD_ADMIN_TITLE)
+    admin: t(COMMON_ADMIN_TITLE)
   };
 
   const actions = useMemo(

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

@@ -1,7 +1,7 @@
 'use client';
 import '@ant-design/v5-patch-for-react-19';
 import { useRouter } from 'next/navigation';
-import { useLocale, useTranslations } from 'next-intl';
+import { useLocale } from 'next-intl';
 import { useEffect } from 'react';
 import { NavigateBridge } from '@/base/cases/NavigateBridge';
 import type { I18nServiceLocale } from '@/base/port/I18nServiceInterface';
@@ -9,12 +9,13 @@ 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';
 
 export function BootstrapsProvider(props: { children: React.ReactNode }) {
   const IOC = clientIOC.create();
   const locale = useLocale();
   const router = useRouter();
-  const t = useTranslations();
+  const t = useWarnTranslations();
 
   useEffect(() => {
     IOC(I.RouterServiceInterface).setLocale(locale);

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

@@ -2,12 +2,12 @@
 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';
-import { useMountedClient } from '../hook/useMountedClient';
 
 /**
  * CommonProvider is a provider for the common components

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

@@ -0,0 +1,118 @@
+'use client';
+
+import {
+  EditOutlined,
+  CheckOutlined,
+  CloseOutlined,
+  LoadingOutlined
+} from '@ant-design/icons';
+import { Button, Input } from 'antd';
+import { clsx } from 'clsx';
+import { useState, useRef, useEffect } from 'react';
+import type { InputRef } from 'antd/lib/input';
+
+interface EditableCellProps {
+  value: string;
+  className?: string;
+  onSave?: (value: string) => Promise<unknown> | unknown;
+}
+
+export const EditableCell: React.FC<EditableCellProps> = ({
+  value,
+  className,
+  onSave
+}) => {
+  const [editing, setEditing] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [inputValue, setInputValue] = useState(value);
+  const inputRef = useRef<InputRef>(null);
+
+  useEffect(() => {
+    if (editing) {
+      inputRef.current?.focus();
+    }
+  }, [editing]);
+
+  const handleEdit = () => {
+    if (loading) return;
+    setEditing(true);
+    setInputValue(value);
+  };
+
+  const handleSave = async () => {
+    if (loading) return;
+    if (onSave && inputValue !== value) {
+      setLoading(true);
+      try {
+        await onSave(inputValue);
+        setEditing(false);
+      } catch (error) {
+        console.error(error);
+      } finally {
+        setLoading(false);
+      }
+    }
+  };
+
+  const handleCancel = () => {
+    if (loading) return;
+    setEditing(false);
+    setInputValue(value);
+  };
+
+  if (editing) {
+    return (
+      <div
+        data-testid="EditableCellContainer"
+        className="flex w-full items-center"
+      >
+        <Input
+          data-testid="EditableCellInput"
+          disabled={loading}
+          ref={inputRef}
+          value={inputValue}
+          onChange={(e) => setInputValue(e.target.value)}
+          onPressEnter={handleSave}
+          onBlur={handleSave}
+        />
+        <div data-testid="EditableCellActions" className="flex gap-0.5 ">
+          <Button
+            disabled={loading}
+            className="cursor-pointer flex items-center justify-center w-5 h-5 rounded hover:bg-gray-100 text-gray-400 hover:text-blue-500 transition-colors"
+            onClick={handleSave}
+          >
+            {loading ? <LoadingOutlined /> : <CheckOutlined />}
+          </Button>
+          <Button
+            disabled={loading}
+            className="cursor-pointer flex items-center justify-center w-5 h-5 rounded hover:bg-gray-100 text-gray-400 hover:text-blue-500 transition-colors"
+            onClick={handleCancel}
+          >
+            <CloseOutlined />
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      data-testid="EditableCellSpan"
+      className={clsx(
+        'group flex items-center relative py-0.5 px-1 w-full max-w-48',
+        className
+      )}
+      onDoubleClick={handleEdit}
+    >
+      <span title={value} className="truncate flex-1">
+        {value}
+      </span>
+      <span
+        onClick={handleEdit}
+        className="opacity-0 group-hover:opacity-100 transition-opacity duration-200 cursor-pointer ml-2 text-gray-400 hover:text-blue-500"
+      >
+        <EditOutlined className="text-sm" />
+      </span>
+    </div>
+  );
+};

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

@@ -3,10 +3,9 @@
 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
+  COMMON_LOGOUT_DIALOG_CONTENT,
+  COMMON_LOGOUT_DIALOG_TITLE
 } from '@config/Identifier';
 import { I } from '@config/IOCIdentifier';
 import { useI18nInterface } from '../hook/useI18nInterface';
@@ -18,9 +17,9 @@ export function LogoutButton() {
   const routerService = useIOC(I.RouterServiceInterface);
 
   const tt = useI18nInterface({
-    title: AUTH_LOGOUT_DIALOG_TITLE,
-    content: AUTH_LOGOUT_DIALOG_CONTENT
-  } as PageI18nInterface);
+    title: COMMON_LOGOUT_DIALOG_TITLE,
+    content: COMMON_LOGOUT_DIALOG_CONTENT
+  });
 
   const onClick = useCallback(() => {
     dialogHandler.confirm({

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

@@ -10,12 +10,12 @@ import {
   MoonFilled,
   HeartOutlined
 } from '@ant-design/icons';
+import { useMountedClient } from '@brain-toolkit/react-kit';
 import { Dropdown } from 'antd';
 import { clsx } from 'clsx';
 import { useTheme } from 'next-themes';
 import { useMemo } from 'react';
 import { type SupportedTheme, themeConfig } from '@config/theme';
-import { useMountedClient } from '../hook/useMountedClient';
 import type { ItemType } from 'antd/es/menu/interface';
 
 const { supportedThemes } = themeConfig;

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

@@ -5,9 +5,9 @@ export function With<T>(props: {
 }) {
   const { fallback, it, children } = props;
 
-  if (it) {
+  if (it != null && it !== false) {
     if (typeof children === 'function') {
-      return children(it);
+      return children(it as NonNullable<T>);
     }
 
     return children;

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

@@ -0,0 +1,62 @@
+import { UploadOutlined } from '@ant-design/icons';
+import { Button, Upload, Popover } from 'antd';
+import type { LocaleType } from '@config/i18n';
+import { i18nConfig } from '@config/i18n';
+import css from './import.module.css';
+import type { LocalesImportEvent } from './LocalesImportEvent';
+
+interface LocalesImportButtonProps {
+  event: LocalesImportEvent;
+  title: string;
+  tt: {
+    [key in LocaleType]: {
+      title: string;
+    };
+  };
+}
+
+export function LocalesImportButton({
+  event,
+  title,
+  tt
+}: LocalesImportButtonProps) {
+  const importPanel = (
+    <div className="flex flex-col gap-2">
+      {i18nConfig.supportedLngs.map((key) => {
+        const targetTT = tt[key];
+
+        return (
+          <Upload
+            className={css.uploadRoot}
+            key={key}
+            data-testid={`LocalesImportButton${key}`}
+            accept=".json"
+            maxCount={1}
+            showUploadList={false}
+            beforeUpload={(file) => {
+              event.onImport(key as LocaleType, file);
+              return false;
+            }}
+          >
+            <Button block data-testid="LocalesImportButtonEn">
+              {targetTT.title}
+            </Button>
+          </Upload>
+        );
+      })}
+    </div>
+  );
+
+  return (
+    <Popover
+      data-testid="LocalesImportPopover"
+      content={importPanel}
+      trigger={['click']}
+    >
+      <Button data-testid="LocalesImportButton">
+        <UploadOutlined />
+        {title}
+      </Button>
+    </Popover>
+  );
+}

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

@@ -0,0 +1,28 @@
+import { StoreInterface } from '@qlover/corekit-bridge';
+import type { AdminLocalesApi } from '@/base/services/adminApi/AdminLocalesApi';
+import type { LocaleType } from '@config/i18n';
+import type { StoreStateInterface } from '@qlover/corekit-bridge';
+
+export class LocalesImportEventState implements StoreStateInterface {}
+
+export class LocalesImportEvent extends StoreInterface<LocalesImportEventState> {
+  constructor(protected localesApi: AdminLocalesApi) {
+    super(() => new LocalesImportEventState());
+  }
+
+  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> {
+    try {
+      this.validate(file);
+
+      await this.localesApi.import({ [type]: file });
+    } catch (error) {
+      console.log(error);
+    }
+  }
+}

package/dist/templates/next-app/src/uikit/components/localesImportButton/import.module.css

@@ -0,0 +1,6 @@
+.uploadRoot {
+  width: 100%;
+  :global(.ant-upload) {
+    width: 100%;
+  }
+}

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

@@ -1,6 +1,6 @@
-import { useTranslations } from 'next-intl';
 import { useMemo } from 'react';
-import type { PageI18nInterface } from '@config/i18n/PageI18nInterface';
+import { TranslateI18nInterface } from '@/base/cases/TranslateI18nInterface';
+import { useWarnTranslations } from './useWarnTranslations';
 
 /**
  * Hook to get the i18n interface
@@ -8,21 +8,15 @@ import type { PageI18nInterface } from '@config/i18n/PageI18nInterface';
  * @param i18nInterface - The i18n interface to get
  * @returns The i18n interface
  */
-export function useI18nInterface<T extends PageI18nInterface>(
+export function useI18nInterface<T extends Record<string, string>>(
   i18nInterface: T
 ): T {
-  const t = useTranslations();
+  const t = useWarnTranslations();
 
-  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]);
+  const i18n = useMemo(
+    () => TranslateI18nInterface.translate(i18nInterface, t),
+    [i18nInterface, t]
+  );
 
   return i18n;
 }

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

@@ -0,0 +1,25 @@
+import { useTranslations as useNextTranslations } from 'next-intl';
+import { useCallback } from 'react';
+import { i18nWarnMissingTranslation } from '@config/common';
+
+export function useWarnTranslations() {
+  const t = useNextTranslations();
+
+  const overrideT = useCallback(
+    (key: string) => {
+      if (!i18nWarnMissingTranslation) {
+        return t(key);
+      }
+
+      if (t.has(key)) {
+        return t(key);
+      }
+
+      console.warn(`[i18n] Missing translation: ${key}`);
+      return key;
+    },
+    [t]
+  );
+
+  return Object.assign(overrideT, t);
+}

package/dist/templates/react-app/.prettierignore

@@ -0,0 +1,17 @@
+# Build output
+dist
+dist/**
+
+# Dependencies
+node_modules
+
+# Generated files
+public/locales/**
+
+# Coverage
+coverage
+
+# Playwright reports
+playwright-report
+test-results
+