@4399ywkf/cli 1.0.8 → 1.0.10

package/dist/templates/AntdStaticMethods/index.tsx

@@ -0,0 +1,20 @@
+// Entry component
+import { App } from 'antd';
+import type { MessageInstance } from 'antd/es/message/interface';
+import type { ModalStaticFunctions } from 'antd/es/modal/confirm';
+import type { NotificationInstance } from 'antd/es/notification/interface';
+import { memo } from 'react';
+
+let message: MessageInstance;
+let notification: NotificationInstance;
+let modal: Omit<ModalStaticFunctions, 'warn'>;
+
+export default memo(() => {
+  const staticFunction = App.useApp();
+  message = staticFunction.message;
+  modal = staticFunction.modal;
+  notification = staticFunction.notification;
+  return null;
+});
+
+export { message, modal, notification };

package/dist/templates/AppTheme.tsx

@@ -0,0 +1,136 @@
+import ThemeProvider from "@/components/ThemeProvider";
+import { CLOUD_THEME_APPEARANCE } from "@/const/theme";
+import { setCookie } from "@/utils/cookie";
+
+// import { useGlobalStore } from "@store/global";
+import React, { memo, useEffect, type ReactNode } from "react";
+
+import { SYSTEM_PREFIX } from "@/const/system";
+import { GlobalStyle } from "@/styles";
+import { useUserStore } from "@store/user";
+import { createStaticStyles, cx } from "antd-style";
+import HarmonyOS_Sans_Regular from "@public/fonts/HarmonyOS_Sans_Regular.woff2";
+import AntdStaticMethods from "@/components/AntdStaticMethods";
+
+const styles = createStaticStyles(({ css, cssVar }) => ({
+  app: css`
+    position: relative;
+
+    overscroll-behavior: none;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    height: 100%;
+    min-height: 100dvh;
+    max-height: 100dvh;
+
+    @media (min-device-width: 576px) {
+      overflow: hidden;
+    }
+  `,
+  // scrollbar-width and scrollbar-color are supported from Chrome 121
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
+  scrollbar: css`
+    scrollbar-color: ${cssVar.colorFill} transparent;
+    scrollbar-width: thin;
+
+    #lobe-mobile-scroll-container {
+      scrollbar-width: none;
+
+      ::-webkit-scrollbar {
+        width: 0;
+        height: 0;
+      }
+    }
+  `,
+
+  // so this is a polyfill for older browsers
+  scrollbarPolyfill: css`
+    ::-webkit-scrollbar {
+      width: 0.75em;
+      height: 0.75em;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      border-radius: 10px;
+    }
+
+    :hover::-webkit-scrollbar-thumb {
+      border: 3px solid transparent;
+      background-color: ${cssVar.colorText};
+      background-clip: content-box;
+    }
+
+    ::-webkit-scrollbar-track {
+      background-color: transparent;
+    }
+  `,
+}));
+
+interface AppThemeProps {
+  children: ReactNode;
+}
+
+const AppTheme = memo(({ children }: AppThemeProps) => {
+  const themeMode = useUserStore((s) => s.themeMode);
+  const animationMode = useUserStore((s) => s.animationMode);
+  const neutralColor = useUserStore((s) => s.neutralColor);
+  const primaryColor = useUserStore((s) => s.primaryColor);
+
+  useEffect(() => {
+    // Update data-theme accordingly if user selects light or dark
+    if (themeMode !== "auto") {
+      document.documentElement.dataset.theme = themeMode;
+      return;
+    }
+
+    // For auto mode, we need to watch system preferences
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+    // Set initial theme based on system preference
+    document.documentElement.dataset.theme = mediaQuery.matches
+      ? "dark"
+      : "light";
+
+    // Update theme when system preference changes
+    function handleChange(e) {
+      document.documentElement.dataset.theme = e.matches ? "dark" : "light";
+    }
+
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [themeMode]);
+
+  return (
+    <ThemeProvider
+      prefixCls={SYSTEM_PREFIX}
+      appearance={themeMode !== "auto" ? themeMode : undefined}
+      className={cx(styles.app, styles.scrollbar, styles.scrollbarPolyfill)}
+      customTheme={{
+        neutralColor: neutralColor,
+        primaryColor: primaryColor,
+      }}
+      customFonts={[HarmonyOS_Sans_Regular]}
+      theme={{
+        cssVar: true,
+        token: {
+          motion: animationMode !== "disabled",
+          motionUnit: animationMode === "agile" ? 0.05 : 0.1,
+        },
+      }}
+      themeMode={themeMode}
+      onAppearanceChange={(appearance) => {
+        if (themeMode !== "auto") return;
+
+        setCookie(CLOUD_THEME_APPEARANCE, appearance);
+      }}
+    >
+      {children}
+      <AntdStaticMethods />
+      <GlobalStyle />
+    </ThemeProvider>
+  );
+});
+
+export default AppTheme;

package/dist/templates/DIRECTORY_STRUCTURE.md

@@ -0,0 +1,141 @@
+# 企业脚手架目录规划说明
+
+## 1. 现状概览
+
+```
+app/
+├── config/           # 构建 + 运行时配置混放
+│   ├── env/          # 环境变量文件
+│   ├── jwt/          # 运行时
+│   ├── request/      # 运行时
+│   ├── router/       # 渲染入口（renderClient）
+│   └── rspack/       # 构建
+├── locales/          # 文案 JSON（与 src/locales 双源）
+├── public/
+├── scripts/
+├── src/
+│   ├── bootstrap/
+│   ├── color/        # 设计 token 色板
+│   ├── components/
+│   ├── config/       # 仅 env.ts（与根 config 易混淆）
+│   ├── const/
+│   ├── layout/
+│   ├── locales/      # i18n 逻辑 + TS 文案
+│   ├── micro/
+│   ├── pages/
+│   ├── routes.tsx
+│   ├── styles/       # 全局样式 + theme 算法
+│   ├── types/
+│   └── utils/
+└── store/            # 与 src 平级
+    ├── middleware/
+    └── user/
+```
+
+---
+
+## 2. 结论：整体可用，有几处需约定或收敛
+
+- **做得好的**：`store` 独立、按 agent/slice 拆分；`pages` + `layout` + `components` 分层清晰；构建配置集中在 `config/rspack`、环境变量在 `config/env`，便于维护。
+- **需要约定的**：根目录 `config` 与 `src/config` 的职责边界、`locales` 双源、`color`/`styles`/`theme` 的归属。
+- **可优化项**：收敛「配置与文案」的入口、统一命名（如 `const` vs `constants`）、可选能力（如 `micro`）在文档中说明。
+
+---
+
+## 3. 问题与建议
+
+### 3.1 config 双位置（根 config vs src/config）
+
+| 位置       | 内容           | 问题                         |
+|------------|----------------|------------------------------|
+| 根 `config/` | env 文件、rspack、request、jwt、router | 构建与运行时混在同一层       |
+| `src/config/` | 仅 `env.ts`（zod 解析）     | 新人易困惑「改 env 改哪边」 |
+
+**建议（二选一或折中）：**
+
+- **方案 A（推荐）**：约定「根 `config/` = 仅构建与环境文件」：只放 `env/`、`rspack/`；把 `request/`、`jwt/`、`router/` 迁到 `src/config/`（或 `src/core/`），alias 保持 `@config` 指向 `src/config`，构建配置单独用 `config/rspack` 路径。这样「构建配置在根 config，运行时配置在 src」边界清晰。
+- **方案 B**：维持现状，在 README 中明确写清：「环境变量与构建用根 `config/`，运行时解析用 `src/config/env.ts`；请求/路由等由根 `config/` 的模块提供」，减少误改。
+
+### 3.2 locales 双源（根 locales vs src/locales）
+
+- 根 `locales/zh-CN/common.json` 与 `src/locales/default/common.ts` 内容重复，且有脚本把 TS 转 JSON。
+- **建议**：选单一数据源。若以 i18n 代码为主，保留 `src/locales`，删除根 `locales/` 和转换脚本，构建或运行时从 `src/locales` 生成/加载；若以 JSON 为主，则只保留根 `locales/`，在 README 中说明「文案只放根 locales」。
+
+### 3.3 store 与 src 平级
+
+- `store/` 在项目根与 `src/` 平级，符合「状态与 UI 分离」的常见企业习惯；alias `@store` 指向根下 `store` 也合理。
+- **建议**：保持现状；在 README 或本说明中写一句：「业务 UI 在 `src/`，领域状态在 `store/`，按 agent/slice 拆分」，避免被误挪进 `src`。
+
+### 3.4 src 内部：color / styles / theme
+
+- `color/`：色板与 token 数据；`styles/`：全局样式、antd 覆盖、**theme 算法与 customToken**；`types/` 中还有 `customStylish`、`customToken`。
+- 问题：主题相关分散在 `color`、`styles/theme`、`styles`、`types`，新人找「改主题」入口不直观。
+- **建议**：
+  - 要么保留 `color/` 但在 README 标明「设计 token 与色板，被 `styles/theme` 消费」；
+  - 要么将 `color/` 收进 `styles/theme/`（如 `styles/theme/color/`），入口统一为 `styles/theme`，减少顶层目录。
+- 不强求一步到位，但需在文档中画一条线：**主题与 token 的入口是 `src/styles/theme`（及可选 `src/color`）**。
+
+### 3.5 横切目录：const / types / utils
+
+- `const/`、`types/`、`utils/` 是常见横切层，结构合理。
+- 小问题：`const/constants.ts` 当前为空；`types` 里既有全局类型又有与 theme 强相关的类型。
+- **建议**：`const` 保留，删除或补全 `constants.ts`，避免空文件；在 README 或本说明中约定「全局业务常量放 `const/`，组件/页面私有常量随模块」。`types` 可注明「与 theme/样式强相关的类型与 `styles/theme` 同目录或在本目录集中维护」，二选一即可。
+
+### 3.6 可选能力：micro、bootstrap
+
+- `micro/` 仅 Garfish，已作为可选项；`bootstrap/` 仅应用启动逻辑。
+- **建议**：保持 `micro/` 在 `src` 下，README 中说明「微前端为可选项，入口与配置见 xxx」。`bootstrap/` 可保留；若希望根入口更短，可把 `bootstrapWithEnv()` 的实现迁到 `src/index.tsx` 或 `src/config/bootstrap.ts`，只保留单文件也可。
+
+### 3.7 pages 与路由
+
+- `pages/` 下有 404、base、index 等；路由定义在 `src/routes.tsx`，渲染入口在 `config/router/index.tsx`。
+- **建议**：约定「路由表仅由 `src/routes.tsx` 维护；`config/router` 只负责 `renderClient` 与挂载」，在 README 或本说明写清，避免在 `config/router` 里再配路由造成双源。
+
+### 3.8 根目录与脚本
+
+- 根目录的 `tsconfig`、`tailwind`、`postcss`、`scripts/` 等符合常规，无需调整。
+- `scripts/` 若仅剩「locales 转 JSON」且已决定废弃根 `locales/`，可删除该脚本；否则保留并注明用途。
+
+---
+
+## 4. 推荐约定（最小改动版）
+
+在不做大范围迁移的前提下，建议先做「约定文档化 + 少量收敛」：
+
+1. **配置**：在 README 中写清「根 `config/` = 构建与环境文件；运行时配置与请求/路由实现来自 `@config`（当前指向根 config，或你们改为 src/config）」。  
+2. **文案**：选定 locales 单一数据源（推荐 `src/locales`），删除或弃用另一侧及转换脚本。  
+3. **主题**：在 README 中标明「主题与 token 入口：`src/styles/theme`，色板数据见 `src/color`（可选）」。  
+4. **store**：说明「全局状态在根 `store/`，按 agent/slice 划分，与 `src` 并列」。  
+5. **路由**：说明「路由表只在 `src/routes.tsx` 维护；`config/router` 仅负责渲染与挂载」。  
+6. **空文件**：删除或补全 `src/const/constants.ts`。
+
+若后续要做更大调整，再考虑：把 request/jwt/router 迁入 `src/config` 或 `src/core`、将 `color` 并入 `styles/theme` 等。
+
+---
+
+## 5. 可选：目标结构示意（供长期演进参考）
+
+```
+app/
+├── config/                 # 仅构建与环境
+│   ├── env/
+│   └── rspack/
+├── public/
+├── scripts/
+├── src/
+│   ├── config/             # 运行时：env 解析、request、router 挂载等
+│   ├── core/                # 可选：bootstrap、微前端入口等
+│   ├── layout/
+│   ├── pages/
+│   ├── components/
+│   ├── styles/              # 全局样式 + theme（含 token/color 或引用）
+│   ├── locales/             # 单一 i18n 数据源
+│   ├── const/
+│   ├── types/
+│   ├── utils/
+│   ├── routes.tsx
+│   └── index.tsx
+└── store/
+```
+
+当前模板不必立刻改成上述结构，可先落实「约定 + 文档 + 删除冗余」，再按团队习惯逐步演进。

package/dist/templates/GlobalProvider/AppTheme.tsx

@@ -0,0 +1,136 @@
+import ThemeProvider from "@/components/ThemeProvider";
+import { CLOUD_THEME_APPEARANCE } from "@/const/theme";
+import { setCookie } from "@/utils/cookie";
+
+// import { useGlobalStore } from "@store/global";
+import React, { memo, useEffect, type ReactNode } from "react";
+
+import { SYSTEM_PREFIX } from "@/const/system";
+import { GlobalStyle } from "@/styles";
+import { useUserStore } from "@store/user";
+import { createStaticStyles, cx } from "antd-style";
+import HarmonyOS_Sans_Regular from "@public/fonts/HarmonyOS_Sans_Regular.woff2";
+import AntdStaticMethods from "@/components/AntdStaticMethods";
+
+const styles = createStaticStyles(({ css, cssVar }) => ({
+  app: css`
+    position: relative;
+
+    overscroll-behavior: none;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    height: 100%;
+    min-height: 100dvh;
+    max-height: 100dvh;
+
+    @media (min-device-width: 576px) {
+      overflow: hidden;
+    }
+  `,
+  // scrollbar-width and scrollbar-color are supported from Chrome 121
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
+  scrollbar: css`
+    scrollbar-color: ${cssVar.colorFill} transparent;
+    scrollbar-width: thin;
+
+    #lobe-mobile-scroll-container {
+      scrollbar-width: none;
+
+      ::-webkit-scrollbar {
+        width: 0;
+        height: 0;
+      }
+    }
+  `,
+
+  // so this is a polyfill for older browsers
+  scrollbarPolyfill: css`
+    ::-webkit-scrollbar {
+      width: 0.75em;
+      height: 0.75em;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      border-radius: 10px;
+    }
+
+    :hover::-webkit-scrollbar-thumb {
+      border: 3px solid transparent;
+      background-color: ${cssVar.colorText};
+      background-clip: content-box;
+    }
+
+    ::-webkit-scrollbar-track {
+      background-color: transparent;
+    }
+  `,
+}));
+
+interface AppThemeProps {
+  children: ReactNode;
+}
+
+const AppTheme = memo(({ children }: AppThemeProps) => {
+  const themeMode = useUserStore((s) => s.themeMode);
+  const animationMode = useUserStore((s) => s.animationMode);
+  const neutralColor = useUserStore((s) => s.neutralColor);
+  const primaryColor = useUserStore((s) => s.primaryColor);
+
+  useEffect(() => {
+    // Update data-theme accordingly if user selects light or dark
+    if (themeMode !== "auto") {
+      document.documentElement.dataset.theme = themeMode;
+      return;
+    }
+
+    // For auto mode, we need to watch system preferences
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+    // Set initial theme based on system preference
+    document.documentElement.dataset.theme = mediaQuery.matches
+      ? "dark"
+      : "light";
+
+    // Update theme when system preference changes
+    function handleChange(e) {
+      document.documentElement.dataset.theme = e.matches ? "dark" : "light";
+    }
+
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [themeMode]);
+
+  return (
+    <ThemeProvider
+      prefixCls={SYSTEM_PREFIX}
+      appearance={themeMode !== "auto" ? themeMode : undefined}
+      className={cx(styles.app, styles.scrollbar, styles.scrollbarPolyfill)}
+      customTheme={{
+        neutralColor: neutralColor,
+        primaryColor: primaryColor,
+      }}
+      customFonts={[HarmonyOS_Sans_Regular]}
+      theme={{
+        cssVar: true,
+        token: {
+          motion: animationMode !== "disabled",
+          motionUnit: animationMode === "agile" ? 0.05 : 0.1,
+        },
+      }}
+      themeMode={themeMode}
+      onAppearanceChange={(appearance) => {
+        if (themeMode !== "auto") return;
+
+        setCookie(CLOUD_THEME_APPEARANCE, appearance);
+      }}
+    >
+      {children}
+      <AntdStaticMethods />
+      <GlobalStyle />
+    </ThemeProvider>
+  );
+});
+
+export default AppTheme;

package/dist/templates/GlobalProvider/Locale.tsx

@@ -0,0 +1,84 @@
+import { ConfigProvider } from 'antd';
+import dayjs from 'dayjs';
+import { type PropsWithChildren, memo, useEffect, useState } from 'react';
+import { isRtlLang } from 'rtl-detect';
+
+import { createI18nNext } from '@/locales/create';
+import { getAntdLocale } from '@/utils/locale';
+
+
+const updateDayjs = async (lang: string) => {
+  let dayJSLocale;
+  try {
+    // dayjs locale is using `en` instead of `en-US`
+    // refs: https://github.com/lobehub/lobe-chat/issues/3396
+    const locale = lang!.toLowerCase() === 'en-us' ? 'en' : lang!.toLowerCase();
+
+    dayJSLocale = await import(`dayjs/locale/${locale}.js`);
+  } catch {
+    console.warn(`dayjs locale for ${lang} not found, fallback to en`);
+    dayJSLocale = await import(`dayjs/locale/en.js`);
+  }
+
+  dayjs.locale(dayJSLocale.default);
+};
+
+interface LocaleLayoutProps extends PropsWithChildren {
+  antdLocale?: any;
+  defaultLang?: string;
+}
+
+const Locale = memo<LocaleLayoutProps>(({ children, defaultLang, antdLocale }) => {
+  const [i18n] = useState(() => createI18nNext(defaultLang));
+  const [lang, setLang] = useState(defaultLang);
+  const [locale, setLocale] = useState(antdLocale);
+
+  if (!i18n.instance.isInitialized)
+      i18n.init().then(async () => {
+        if (!lang) return;
+
+        await updateDayjs(lang);
+      });
+
+  // handle i18n instance language change
+  useEffect(() => {
+    const handleLang = async (lng: string) => {
+      setLang(lng);
+
+      if (lang === lng) return;
+
+      const newLocale = await getAntdLocale(lng);
+      setLocale(newLocale);
+
+      await updateDayjs(lng);
+    };
+
+    i18n.instance.on('languageChanged', handleLang);
+    return () => {
+      i18n.instance.off('languageChanged', handleLang);
+    };
+  }, [i18n, lang]);
+
+  // detect document direction
+  const documentDir = isRtlLang(lang!) ? 'rtl' : 'ltr';
+
+  return (
+    <ConfigProvider
+      direction={documentDir}
+      locale={locale}
+      theme={{
+        components: {
+          Button: {
+            contentFontSizeSM: 12,
+          },
+        },
+      }}
+    >
+      {children}
+    </ConfigProvider>
+  );
+});
+
+Locale.displayName = 'Locale';
+
+export default Locale;

package/dist/templates/GlobalProvider/Query.tsx

@@ -0,0 +1,12 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import React, { type PropsWithChildren, useEffect, useState } from 'react';
+
+const QueryProvider = ({ children }: PropsWithChildren) => {
+  const [queryClient] = useState(() => new QueryClient());
+
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+};
+
+export default QueryProvider;

package/dist/templates/GlobalProvider/StyleRegistry.tsx

@@ -0,0 +1,9 @@
+import { StyleProvider } from 'antd-style';
+import { type PropsWithChildren } from 'react';
+
+
+const StyleRegistry = ({ children }: PropsWithChildren) => {
+  return <StyleProvider>{children}</StyleProvider>;
+};
+
+export default StyleRegistry;

package/dist/templates/GlobalProvider/index.tsx

@@ -0,0 +1,23 @@
+import StyleRegistry from "./StyleRegistry";
+import AppTheme from "./AppTheme";
+import QueryProvider from "./Query";
+import Locale from "./Locale";
+import { Outlet } from "react-router";
+
+interface GlobalProviderProps {
+
+}
+
+export default function GlobalProvider({  }: GlobalProviderProps) {
+  return (
+    <StyleRegistry>
+      <Locale>
+        <AppTheme>
+          <QueryProvider>
+            <Outlet />
+          </QueryProvider>
+        </AppTheme>
+      </Locale>
+    </StyleRegistry>
+  );
+}