@4399ywkf/core 5.0.12 → 5.0.13

package/dist/index.js

@@ -2763,33 +2763,38 @@ import { join as join8 } from "path";
 var i18nPlugin = createPlugin((options = {}) => ({
   name: "@4399ywkf/plugin-i18n",
   version: "1.0.0",
-  description: "\u56FD\u9645\u5316 (i18next) \u63D2\u4EF6",
+  description: "\u56FD\u9645\u5316 (i18next) \u63D2\u4EF6 \u2014 TS-first \u5DE5\u4F5C\u6D41",
   setup(context) {
     const {
       defaultLocale = "zh-CN",
       locales = ["zh-CN", "en-US"],
       localesDir = "locales",
+      sourceDir = "src/locales/default",
       defaultNS = ["common"],
       autoScaffold = true
     } = options;
-    const { cwd, logger } = context;
+    const { cwd, logger, isDev } = context;
     if (autoScaffold) {
-      scaffoldLocaleFiles(cwd, localesDir, locales, defaultNS, logger);
+      scaffoldSourceFiles(cwd, sourceDir, defaultNS, logger);
+      scaffoldResourcesFile(cwd, sourceDir, defaultNS, locales, defaultLocale, logger);
+      scaffoldConvertScript(cwd, sourceDir, localesDir, defaultLocale, logger);
+      scaffoldI18nRc(cwd, localesDir, defaultLocale, locales, logger);
+      scaffoldLocaleJsonDirs(cwd, localesDir, locales, defaultLocale, defaultNS, logger);
     }
     const hooks = {
       modifyRspackConfig(rspackConfig) {
         const aliases = rspackConfig.resolve?.alias || {};
         if (!aliases["@locales"]) {
           aliases["@locales"] = join8(cwd, localesDir);
-          rspackConfig.resolve = { ...rspackConfig.resolve, alias: aliases };
         }
+        rspackConfig.resolve = { ...rspackConfig.resolve, alias: aliases };
         return rspackConfig;
       },
       generateFiles(ctx) {
         return [
           {
             path: "i18n.ts",
-            content: generateI18nCode(defaultLocale, locales, localesDir, defaultNS)
+            content: generateI18nCode({ defaultLocale, locales, localesDir, sourceDir, defaultNS, isDev })
           }
         ];
       },
@@ -2799,7 +2804,6 @@ var i18nPlugin = createPlugin((options = {}) => ({
             `import { initI18n } from "./i18n";`
           ],
           topLevel: [
-            `// \u521D\u59CB\u5316 i18n\uFF08\u5728\u5E94\u7528\u542F\u52A8\u524D\uFF09`,
             `await initI18n();`
           ]
         };
@@ -2808,38 +2812,43 @@ var i18nPlugin = createPlugin((options = {}) => ({
     return hooks;
   }
 }));
-function generateI18nCode(defaultLocale, locales, localesDir, defaultNS) {
+function generateI18nCode(opts) {
+  const { defaultLocale, locales, defaultNS, sourceDir } = opts;
+  const defaultDirAlias = sourceDir.replace(/^src\//, "");
+  const parentDirAlias = defaultDirAlias.replace(/\/[^/]+$/, "");
   return `// \u6B64\u6587\u4EF6\u7531 @4399ywkf/plugin-i18n \u81EA\u52A8\u751F\u6210
 import i18n from "i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
 import resourcesToBackend from "i18next-resources-to-backend";
 import { initReactI18next } from "react-i18next";
+import { normalizeLocale, SUPPORTED_LOCALES, DEFAULT_LOCALE } from "@/${parentDirAlias}/resources";
 
-export const DEFAULT_LOCALE = "${defaultLocale}";
-
-export const SUPPORTED_LOCALES = ${JSON.stringify(locales)} as const;
+export { DEFAULT_LOCALE, SUPPORTED_LOCALES, normalizeLocale };
+export type { SupportedLocale, NS } from "@/${parentDirAlias}/resources";
 
-export type SupportedLocale = typeof SUPPORTED_LOCALES[number];
+const isDev = process.env.NODE_ENV === "development";
 
 const instance = i18n
   .use(initReactI18next)
   .use(LanguageDetector)
   .use(
     resourcesToBackend(async (lng: string, ns: string) => {
-      return import(\`@locales/\${normalizeLocale(lng)}/\${ns}.json\`);
+      const normalizedLng = normalizeLocale(lng);
+
+      // \u5F00\u53D1\u6A21\u5F0F\u4E0B\uFF0C\u9ED8\u8BA4\u8BED\u8A00\u76F4\u63A5 import TS\uFF08\u5373\u65F6\u751F\u6548\uFF0C\u65E0\u9700\u5148\u751F\u6210 JSON\uFF09
+      if (isDev && normalizedLng === "${defaultLocale}") {
+        return import("@/${defaultDirAlias}/" + ns);
+      }
+
+      // \u5176\u4ED6\u8BED\u8A00 / \u751F\u4EA7\u6A21\u5F0F\uFF1A\u61D2\u52A0\u8F7D JSON
+      return import(
+        /* webpackInclude: /\\.json$/ */
+        /* webpackChunkName: "locales-[request]" */
+        \`@locales/\${normalizedLng}/\${ns}.json\`
+      );
     })
   );
 
-function normalizeLocale(locale?: string): string {
-  if (!locale) return DEFAULT_LOCALE;
-  for (const l of SUPPORTED_LOCALES) {
-    if (l.startsWith(locale) || locale.startsWith(l.split("-")[0])) {
-      return l;
-    }
-  }
-  return DEFAULT_LOCALE;
-}
-
 let initialized = false;
 
 export async function initI18n(lang?: string): Promise<typeof i18n> {
@@ -2860,19 +2869,191 @@ export { instance as i18n };
 export default instance;
 `;
 }
-function scaffoldLocaleFiles(cwd, localesDir, locales, namespaces, logger) {
+function scaffoldSourceFiles(cwd, sourceDir, namespaces, logger) {
+  const dir = join8(cwd, sourceDir);
+  if (!existsSync8(dir)) {
+    mkdirSync3(dir, { recursive: true });
+  }
+  for (const ns of namespaces) {
+    const filePath = join8(dir, `${ns}.ts`);
+    if (!existsSync8(filePath)) {
+      writeFileSync4(filePath, buildDefaultNsFile(ns), "utf-8");
+      logger.info(`\u5DF2\u751F\u6210\u7FFB\u8BD1\u6E90\u6587\u4EF6: ${sourceDir}/${ns}.ts`);
+    }
+  }
+  const indexPath = join8(dir, "index.ts");
+  if (!existsSync8(indexPath)) {
+    const imports = namespaces.map((ns) => `import ${ns} from "./${ns}";`).join("\n");
+    const entries = namespaces.join(",\n  ");
+    const content = `${imports}
+
+const resources = {
+  ${entries},
+} as const;
+
+export default resources;
+`;
+    writeFileSync4(indexPath, content, "utf-8");
+    logger.info(`\u5DF2\u751F\u6210\u7FFB\u8BD1\u7D22\u5F15: ${sourceDir}/index.ts`);
+  }
+}
+function buildDefaultNsFile(ns) {
+  if (ns === "common") {
+    return `export default {
+  welcome: "\u6B22\u8FCE\u4F7F\u7528",
+  loading: "\u52A0\u8F7D\u4E2D...",
+  confirm: "\u786E\u5B9A",
+  cancel: "\u53D6\u6D88",
+  save: "\u4FDD\u5B58",
+  delete: "\u5220\u9664",
+  edit: "\u7F16\u8F91",
+  back: "\u8FD4\u56DE",
+} as const;
+`;
+  }
+  return `export default {
+  title: "${ns}",
+} as const;
+`;
+}
+function scaffoldResourcesFile(cwd, sourceDir, namespaces, locales, defaultLocale, logger) {
+  const parentDir = join8(cwd, sourceDir, "..");
+  const filePath = join8(parentDir, "resources.ts");
+  if (existsSync8(filePath)) return;
+  const content = `import resources from "./default";
+
+export const DEFAULT_LOCALE = "${defaultLocale}";
+
+export const SUPPORTED_LOCALES = ${JSON.stringify(locales)} as const;
+
+export type SupportedLocale = (typeof SUPPORTED_LOCALES)[number];
+
+export type DefaultResources = typeof resources;
+
+export type NS = keyof DefaultResources;
+
+export const normalizeLocale = (locale?: string): SupportedLocale => {
+  if (!locale) return DEFAULT_LOCALE as SupportedLocale;
+
+  for (const l of SUPPORTED_LOCALES) {
+    if (l.startsWith(locale) || locale.startsWith(l.split("-")[0])) {
+      return l;
+    }
+  }
+
+  return DEFAULT_LOCALE as SupportedLocale;
+};
+
+export const localeOptions = ${JSON.stringify(
+    locales.map((l) => ({ value: l, label: getLocaleLabel(l) })),
+    null,
+    2
+  )} as const;
+`;
+  writeFileSync4(filePath, content, "utf-8");
+  logger.info(`\u5DF2\u751F\u6210\u7C7B\u578B\u6587\u4EF6: ${sourceDir}/../resources.ts`);
+}
+function getLocaleLabel(locale) {
+  const map = {
+    "zh-CN": "\u7B80\u4F53\u4E2D\u6587",
+    "zh-TW": "\u7E41\u9AD4\u4E2D\u6587",
+    "en-US": "English",
+    "ja-JP": "\u65E5\u672C\u8A9E",
+    "ko-KR": "\uD55C\uAD6D\uC5B4",
+    "de-DE": "Deutsch",
+    "fr-FR": "Fran\xE7ais",
+    "es-ES": "Espa\xF1ol",
+    "pt-BR": "Portugu\xEAs",
+    "ru-RU": "\u0420\u0443\u0441\u0441\u043A\u0438\u0439",
+    "it-IT": "Italiano",
+    "vi-VN": "Ti\u1EBFng Vi\u1EC7t",
+    "ar": "\u0627\u0644\u0639\u0631\u0628\u064A\u0629"
+  };
+  return map[locale] || locale;
+}
+function scaffoldConvertScript(cwd, sourceDir, localesDir, defaultLocale, logger) {
+  const scriptsDir = join8(cwd, "scripts");
+  const scriptPath = join8(scriptsDir, "i18n-gen.js");
+  if (existsSync8(scriptPath)) return;
+  if (!existsSync8(scriptsDir)) {
+    mkdirSync3(scriptsDir, { recursive: true });
+  }
+  const content = `const fs = require("fs");
+const path = require("path");
+
+const sourceDir = path.join(__dirname, "../${sourceDir}");
+const targetDir = path.join(__dirname, "../${localesDir}/${defaultLocale}");
+
+const files = fs
+  .readdirSync(sourceDir)
+  .filter((file) => file.endsWith(".ts") && file !== "index.ts")
+  .map((file) => path.basename(file, ".ts"));
+
+require("ts-node/register");
+
+if (!fs.existsSync(targetDir)) {
+  fs.mkdirSync(targetDir, { recursive: true });
+}
+
+console.log("\u5F00\u59CB\u8F6C\u6362 TypeScript \u6587\u4EF6\u5230 JSON...\\n");
+
+files.forEach((fileName) => {
+  try {
+    const modulePath = path.join(sourceDir, \`\${fileName}.ts\`);
+    delete require.cache[require.resolve(modulePath)];
+    const moduleContent = require(modulePath).default;
+    const jsonContent = JSON.stringify(moduleContent, null, 2);
+    const targetPath = path.join(targetDir, \`\${fileName}.json\`);
+    fs.writeFileSync(targetPath, jsonContent, "utf8");
+    console.log(\`  \${fileName}.ts \u2192 \${fileName}.json\`);
+  } catch (error) {
+    console.error(\`  \u8F6C\u6362 \${fileName}.ts \u5931\u8D25:\`, error.message);
+  }
+});
+
+console.log("\\n\u8F6C\u6362\u5B8C\u6210\uFF01");
+`;
+  writeFileSync4(scriptPath, content, "utf-8");
+  logger.info("\u5DF2\u751F\u6210\u8F6C\u6362\u811A\u672C: scripts/i18n-gen.js");
+}
+function scaffoldI18nRc(cwd, localesDir, defaultLocale, locales, logger) {
+  const filePath = join8(cwd, ".i18nrc.js");
+  if (existsSync8(filePath)) return;
+  const outputLocales = locales.filter((l) => l !== defaultLocale).map((l) => `"${l}"`).join(", ");
+  const content = `const { defineConfig } = require("@lobehub/i18n-cli");
+
+module.exports = defineConfig({
+  entry: "${localesDir}/${defaultLocale}",
+  entryLocale: "${defaultLocale}",
+  output: "${localesDir}",
+  outputLocales: [${outputLocales}],
+});
+`;
+  writeFileSync4(filePath, content, "utf-8");
+  logger.info("\u5DF2\u751F\u6210\u7FFB\u8BD1\u914D\u7F6E: .i18nrc.js\uFF08@lobehub/i18n-cli\uFF09");
+}
+function scaffoldLocaleJsonDirs(cwd, localesDir, locales, defaultLocale, namespaces, logger) {
   const baseDir = join8(cwd, localesDir);
   for (const locale of locales) {
     const localeDir = join8(baseDir, locale);
     if (!existsSync8(localeDir)) {
       mkdirSync3(localeDir, { recursive: true });
     }
+    if (locale === defaultLocale) continue;
     for (const ns of namespaces) {
       const filePath = join8(localeDir, `${ns}.json`);
       if (!existsSync8(filePath)) {
-        const isDefault = locale === locales[0];
-        const content = isDefault ? JSON.stringify({ welcome: "\u6B22\u8FCE\u4F7F\u7528" }, null, 2) : JSON.stringify({ welcome: "Welcome" }, null, 2);
-        writeFileSync4(filePath, content + "\n", "utf-8");
+        const placeholder = ns === "common" ? JSON.stringify({
+          welcome: "Welcome",
+          loading: "Loading...",
+          confirm: "OK",
+          cancel: "Cancel",
+          save: "Save",
+          delete: "Delete",
+          edit: "Edit",
+          back: "Back"
+        }, null, 2) : JSON.stringify({ title: ns }, null, 2);
+        writeFileSync4(filePath, placeholder + "\n", "utf-8");
         logger.info(`\u5DF2\u751F\u6210\u7FFB\u8BD1\u6587\u4EF6: ${localesDir}/${locale}/${ns}.json`);
       }
     }
@@ -2880,22 +3061,37 @@ function scaffoldLocaleFiles(cwd, localesDir, locales, namespaces, logger) {
 }
 
 // src/plugin/builtin/theme.ts
+import { join as join9 } from "path";
 var themePlugin = createPlugin((options = {}) => ({
   name: "@4399ywkf/plugin-theme",
-  version: "1.0.0",
-  description: "antd-style \u4E3B\u9898\u7CFB\u7EDF\u63D2\u4EF6",
+  version: "2.0.0",
+  description: "antd-style \u54CD\u5E94\u5F0F\u4E3B\u9898\u7CFB\u7EDF\u63D2\u4EF6",
   setup(context) {
     const {
       darkMode = true,
-      defaultAppearance = "auto",
-      primaryColor = "blue",
+      defaultAppearance = "dark",
+      primaryColor = "#1677ff",
+      neutralColor,
       prefixCls = "ant",
       cssVar = true,
-      globalReset = true
+      globalReset = true,
+      externalTheme = false
     } = options;
     const { logger } = context;
-    logger.info(`\u4E3B\u9898\u6A21\u5F0F: ${defaultAppearance}, \u4E3B\u8272: ${primaryColor}`);
+    logger.info(`\u4E3B\u9898\u6A21\u5F0F: ${defaultAppearance}, \u4E3B\u8272: ${primaryColor}, \u54CD\u5E94\u5F0F: \u2713`);
     const hooks = {
+      modifyRspackConfig(config, ctx) {
+        const themePath = join9(ctx.cwd, ".ywkf", "theme.tsx");
+        const currentAlias = config.resolve?.alias ?? {};
+        config.resolve = {
+          ...config.resolve,
+          alias: {
+            ...currentAlias,
+            "@ywkf/theme": themePath
+          }
+        };
+        return config;
+      },
       generateFiles(ctx) {
         return [
           {
@@ -2904,9 +3100,11 @@ var themePlugin = createPlugin((options = {}) => ({
               darkMode,
               defaultAppearance,
               primaryColor,
+              neutralColor,
               prefixCls,
               cssVar,
-              globalReset
+              globalReset,
+              externalTheme
             })
           }
         ];
@@ -2917,61 +3115,168 @@ var themePlugin = createPlugin((options = {}) => ({
             `import { ThemeWrapper } from "./theme";`
           ]
         };
+      },
+      modifyBootstrapCode(code) {
+        const providerEntry = `    {
+      component: ThemeWrapper as React.ComponentType<{ children: React.ReactNode }>,
+      props: {},
+      order: 10,
+    }`;
+        if (code.includes("providers: []")) {
+          code = code.replace(
+            "providers: []",
+            `providers: [
+${providerEntry},
+  ]`
+          );
+        } else if (code.includes("providers: [")) {
+          code = code.replace(
+            "providers: [",
+            `providers: [
+${providerEntry},`
+          );
+        }
+        if (!code.includes("import React")) {
+          code = code.replace(
+            `import { bootstrap`,
+            `import React from "react";
+import { bootstrap`
+          );
+        }
+        return code;
       }
-      // Provider 由生成的 theme.tsx 文件在用户层使用
-      // 用户可以在 src/app.config.ts 中通过 providers 引入 ThemeWrapper
     };
     return hooks;
   }
 }));
 function generateThemeProvider(opts) {
-  const { darkMode, defaultAppearance, primaryColor, prefixCls, cssVar, globalReset } = opts;
-  return `// \u6B64\u6587\u4EF6\u7531 @4399ywkf/plugin-theme \u81EA\u52A8\u751F\u6210
-import React, { useEffect, type ReactNode } from "react";
-import { ThemeProvider, createGlobalStyle } from "antd-style";
+  const {
+    darkMode,
+    defaultAppearance,
+    primaryColor,
+    neutralColor,
+    prefixCls,
+    cssVar,
+    globalReset,
+    externalTheme
+  } = opts;
+  const sections = [];
+  sections.push(`// \u6B64\u6587\u4EF6\u7531 @4399ywkf/plugin-theme \u81EA\u52A8\u751F\u6210\uFF0C\u8BF7\u52FF\u624B\u52A8\u4FEE\u6539`);
+  sections.push(buildImports({ globalReset, cssVar }));
+  sections.push(TYPES_CODE);
+  sections.push(buildStoreCode({ defaultAppearance, primaryColor, neutralColor }));
+  sections.push(HOOKS_CODE);
+  if (globalReset) sections.push(GLOBAL_RESET_CODE);
+  if (cssVar) sections.push(CSS_VAR_SYNC_CODE);
+  if (darkMode) sections.push(APPEARANCE_SYNC_CODE);
+  if (externalTheme) sections.push(EXTERNAL_THEME_CODE);
+  sections.push(buildWrapperCode({ darkMode, cssVar, globalReset, externalTheme, prefixCls }));
+  return sections.join("\n");
+}
+function buildImports(opts) {
+  const reactImports = [
+    "useCallback",
+    "useEffect",
+    ...opts.cssVar ? ["useLayoutEffect", "useRef"] : [],
+    "type ReactNode"
+  ];
+  const antdStyleImports = [
+    "ThemeProvider as AntdThemeProvider",
+    "type GetAntdTheme",
+    ...opts.globalReset ? ["createGlobalStyle", "css"] : []
+  ];
+  return `
+import React, { ${reactImports.join(", ")} } from "react";
+import { ${antdStyleImports.join(", ")} } from "antd-style";
+import { createWithEqualityFn } from "zustand/traditional";
+import { shallow } from "zustand/shallow";`;
+}
+var TYPES_CODE = `
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 Types \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
 
-${globalReset ? GLOBAL_RESET_CODE : ""}
+export type ThemeAppearance = "light" | "dark" | "auto";
 
-const DEFAULT_APPEARANCE = "${defaultAppearance}" as const;
+export interface ThemeState {
+  appearance: ThemeAppearance;
+  primaryColor: string;
+  neutralColor?: string;
+}
 
-interface ThemeWrapperProps {
-  children: ReactNode;
+export interface ThemeActions {
+  setAppearance: (mode: ThemeAppearance) => void;
+  setPrimaryColor: (color: string) => void;
+  setNeutralColor: (color: string) => void;
+  /** \u6279\u91CF\u66F4\u65B0\u4E3B\u9898\u72B6\u6001 */
+  setTheme: (partial: Partial<ThemeState>) => void;
 }
 
-/**
- * \u4E3B\u9898\u5305\u88F9\u7EC4\u4EF6
- * \u7531 themePlugin \u81EA\u52A8\u6CE8\u5165\u5230\u5E94\u7528\u542F\u52A8\u5C42
- */
-export function ThemeWrapper({ children }: ThemeWrapperProps) {
-  ${darkMode ? DARK_MODE_EFFECT : ""}
+export type ThemeStore = ThemeState & ThemeActions;`;
+function buildStoreCode(opts) {
+  const neutralLine = opts.neutralColor ? `
+  neutralColor: "${opts.neutralColor}",` : "";
+  return `
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 Theme Store \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
 
-  return (
-    <ThemeProvider
-      prefixCls="${prefixCls}"
-      ${defaultAppearance !== "auto" ? `appearance="${defaultAppearance}"` : ""}
-      theme={{
-        cssVar: ${cssVar},
-        token: {
-          colorPrimary: "${primaryColor}",
-        },
-      }}
-      themeMode={DEFAULT_APPEARANCE}
-    >
-      ${globalReset ? "<GlobalReset />" : ""}
-      {children}
-    </ThemeProvider>
-  );
-}
+const DEFAULT_THEME: ThemeState = {
+  appearance: "${opts.defaultAppearance}",
+  primaryColor: "${opts.primaryColor}",${neutralLine}
+};
 
-export default ThemeWrapper;
-`;
+export const useThemeStore = createWithEqualityFn<ThemeStore>()(
+  (set) => ({
+    ...DEFAULT_THEME,
+    setAppearance: (mode) => set({ appearance: mode }),
+    setPrimaryColor: (color) => set({ primaryColor: color }),
+    setNeutralColor: (color) => set({ neutralColor: color }),
+    setTheme: (partial) => set(partial),
+  }),
+  shallow,
+);`;
 }
+var HOOKS_CODE = `
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 Convenience Hooks \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+
+/** \u83B7\u53D6\u5F53\u524D\u4E3B\u9898\u72B6\u6001\uFF08appearance + primaryColor + neutralColor\uFF09 */
+export const useTheme = () =>
+  useThemeStore(
+    (s) => ({
+      appearance: s.appearance,
+      primaryColor: s.primaryColor,
+      neutralColor: s.neutralColor,
+    }),
+    shallow,
+  );
+
+/** \u4EC5\u8BA2\u9605 appearance */
+export const useAppearance = () => useThemeStore((s) => s.appearance);
+
+/** \u4EC5\u8BA2\u9605 primaryColor */
+export const usePrimaryColor = () => useThemeStore((s) => s.primaryColor);`;
 var GLOBAL_RESET_CODE = `
-const GlobalReset = createGlobalStyle\`
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 Global Style \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// \u53C2\u8003 lobe-ui GlobalStyle\uFF1A\u4F7F\u7528 theme tokens \u5B9E\u73B0\u54CD\u5E94\u5F0F\u5168\u5C40\u6837\u5F0F
+
+const GlobalReset = createGlobalStyle(({ theme }) => css\`
+  :root {
+    --font-settings: "cv01", "tnum", "kern";
+    --font-variations: "opsz" auto, tabular-nums;
+  }
+
   *,
   *::before,
   *::after {
     box-sizing: border-box;
+    vertical-align: baseline;
+  }
+
+  * {
+    scrollbar-color: \${theme.colorFill} transparent;
+    scrollbar-width: thin;
+  }
+
+  html {
+    overscroll-behavior: none;
+    color-scheme: \${theme.isDarkMode ? "dark" : "light"};
   }
 
   html, body, #root, #app {
@@ -2981,34 +3286,191 @@ const GlobalReset = createGlobalStyle\`
   }
 
   body {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-      "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+    overflow: hidden auto;
+    min-height: 100vh;
+    font-family: \${theme.fontFamily};
+    font-size: \${theme.fontSize}px;
+    font-feature-settings: var(--font-settings);
+    font-variation-settings: var(--font-variations);
+    line-height: 1;
+    color: \${theme.colorTextBase};
+    text-size-adjust: none;
+    text-rendering: optimizelegibility;
+    word-wrap: break-word;
+    background-color: \${theme.colorBgLayout};
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+    -webkit-overflow-scrolling: touch;
+    -webkit-tap-highlight-color: transparent;
   }
-\`;
-`;
-var DARK_MODE_EFFECT = `
+
+  code {
+    font-family: \${theme.fontFamilyCode} !important;
+  }
+
+  ::selection {
+    color: #000;
+    -webkit-text-fill-color: unset !important;
+  }
+\`);`;
+var CSS_VAR_SYNC_CODE = `
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 CSS Variable Sync \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// \u5C06 antd-style \u6CE8\u5165\u7684 css-var-* class \u540C\u6B65\u5230 <html>\uFF0C
+// \u4F7F\u5168\u5C40 CSS / Tailwind \u4E5F\u80FD\u6D88\u8D39 antd CSS \u53D8\u91CF
+
+const CSS_VAR_PREFIX = "css-var-";
+
+function useCssVarSync(ref: React.RefObject<HTMLDivElement | null>) {
+  useLayoutEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+
+    const htmlEl = document.documentElement;
+    let currentClasses: string[] = [];
+
+    const sync = () => {
+      for (const cls of currentClasses) htmlEl.classList.remove(cls);
+
+      const next: string[] = [];
+      let el: HTMLElement | null = node;
+      while (el && el !== htmlEl) {
+        for (const cls of el.classList) {
+          if (cls.startsWith(CSS_VAR_PREFIX)) next.push(cls);
+        }
+        el = el.parentElement;
+      }
+
+      for (const cls of next) htmlEl.classList.add(cls);
+      currentClasses = next;
+    };
+
+    sync();
+
+    const observer = new MutationObserver(sync);
+    let el: HTMLElement | null = node;
+    while (el && el !== htmlEl) {
+      observer.observe(el, { attributeFilter: ["class"] });
+      el = el.parentElement;
+    }
+
+    return () => {
+      observer.disconnect();
+      for (const cls of currentClasses) htmlEl.classList.remove(cls);
+    };
+  }, []);
+}`;
+var APPEARANCE_SYNC_CODE = `
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 Appearance Sync \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+
+function useAppearanceSync(appearance: ThemeAppearance) {
   useEffect(() => {
-    if (DEFAULT_APPEARANCE !== "auto") {
-      document.documentElement.dataset.theme = DEFAULT_APPEARANCE;
+    if (appearance !== "auto") {
+      document.documentElement.dataset.theme = appearance;
       return;
     }
 
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    document.documentElement.dataset.theme = mediaQuery.matches ? "dark" : "light";
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    document.documentElement.dataset.theme = mq.matches ? "dark" : "light";
 
     function handleChange(e: MediaQueryListEvent) {
       document.documentElement.dataset.theme = e.matches ? "dark" : "light";
     }
 
-    mediaQuery.addEventListener("change", handleChange);
-    return () => mediaQuery.removeEventListener("change", handleChange);
+    mq.addEventListener("change", handleChange);
+    return () => mq.removeEventListener("change", handleChange);
+  }, [appearance]);
+}`;
+var EXTERNAL_THEME_CODE = `
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 External Theme Injection \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// \u5FAE\u524D\u7AEF\u573A\u666F\uFF1A\u76D1\u542C\u4E3B\u5E94\u7528\u4E0B\u53D1\u7684\u4E3B\u9898\u53D8\u66F4
+
+function useExternalTheme() {
+  useEffect(() => {
+    const hostTheme = (window as any).__YWKF_THEME__;
+    if (hostTheme && typeof hostTheme === "object") {
+      useThemeStore.getState().setTheme(hostTheme);
+    }
+
+    const handler = (e: Event) => {
+      const detail = (e as CustomEvent<Partial<ThemeState>>).detail;
+      if (detail) useThemeStore.getState().setTheme(detail);
+    };
+
+    window.addEventListener("ywkf:theme-change", handler);
+    return () => window.removeEventListener("ywkf:theme-change", handler);
   }, []);
+}`;
+function buildWrapperCode(opts) {
+  const { darkMode, cssVar, globalReset, externalTheme, prefixCls } = opts;
+  const refLine = cssVar ? "\n  const containerRef = useRef<HTMLDivElement>(null);" : "";
+  const cssVarSyncLine = cssVar ? "\n  useCssVarSync(containerRef);" : "";
+  const appearanceSyncLine = darkMode ? "\n  useAppearanceSync(appearance);" : "";
+  const externalThemeLine = externalTheme ? "\n  useExternalTheme();" : "";
+  const childrenSlot = cssVar ? `<div ref={containerRef} style={{ display: "contents" }}>
+        {children}
+      </div>` : "{children}";
+  return `
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 ThemeWrapper \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+
+interface ThemeWrapperProps {
+  children: ReactNode;
+}
+
+/**
+ * \u4E3B\u9898\u5305\u88F9\u7EC4\u4EF6
+ *
+ * \u7531 themePlugin \u81EA\u52A8\u6CE8\u5165\u5230\u5E94\u7528\u542F\u52A8\u5C42\uFF0C\u4ECE useThemeStore \u8BFB\u53D6\u4E3B\u9898\u72B6\u6001\u3002
+ * \u4E1A\u52A1\u4FA7\u901A\u8FC7 useThemeStore / useTheme \u6D88\u8D39\u6216\u4FEE\u6539\u4E3B\u9898\u3002
+ */
+export function ThemeWrapper({ children }: ThemeWrapperProps) {${refLine}
+  const { appearance, primaryColor } = useThemeStore(
+    (s) => ({ appearance: s.appearance, primaryColor: s.primaryColor }),
+    shallow,
+  );${cssVarSyncLine}${appearanceSyncLine}${externalThemeLine}
+
+  const theme = useCallback<GetAntdTheme>(
+    () => ({${cssVar ? "\n      cssVar: true," : ""}
+      token: {
+        colorPrimary: primaryColor,
+        // lobe-ui base tokens
+        borderRadius: 8,
+        borderRadiusLG: 12,
+        borderRadiusSM: 6,
+        borderRadiusXS: 4,
+        controlHeight: 36,
+        fontFamily: [
+          '"HarmonyOS Sans", "Segoe UI", "SF Pro Display"',
+          '-apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial',
+          '"PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", "Noto Sans SC", sans-serif',
+          '"Segoe UI Emoji", "Noto Color Emoji"',
+        ].join(", "),
+        fontFamilyCode: [
+          'Hack, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas',
+          '"PingFang SC", "Noto Sans SC", monospace',
+        ].join(", "),
+      },
+    }),
+    [primaryColor],
+  );
+
+  return (
+    <AntdThemeProvider
+      prefixCls="${prefixCls}"
+      themeMode={appearance}
+      theme={theme}
+    >
+      ${globalReset ? "<GlobalReset />" : ""}
+      ${childrenSlot}
+    </AntdThemeProvider>
+  );
+}
+
+export default ThemeWrapper;
 `;
+}
 
 // src/plugin/builtin/mock.ts
-import { resolve as resolve2, join as join9 } from "path";
+import { resolve as resolve2, join as join10 } from "path";
 import { existsSync as existsSync9, readdirSync as readdirSync2, statSync as statSync2 } from "fs";
 var mockPlugin = createPlugin((options = {}) => ({
   name: "@4399ywkf/plugin-mock",
@@ -3063,7 +3525,7 @@ function scanMockFiles(dir) {
   }
   const entries = readdirSync2(dir);
   for (const entry of entries) {
-    const fullPath = join9(dir, entry);
+    const fullPath = join10(dir, entry);
     const stat = statSync2(fullPath);
     if (stat.isFile() && /\.(ts|js|mjs)$/.test(entry)) {
       files.push(fullPath);
@@ -3232,7 +3694,8 @@ function buildRequestFile(opts) {
   return `// \u6B64\u6587\u4EF6\u7531 @4399ywkf/plugin-react-query \u81EA\u52A8\u751F\u6210\uFF0C\u8BF7\u52FF\u624B\u52A8\u4FEE\u6539
 // \u5982\u9700\u5B9A\u5236\u62E6\u622A\u5668\uFF0C\u8BF7\u7F16\u8F91 src/request.ts
 import axios from "axios";
-import type { AxiosInstance, InternalAxiosRequestConfig, AxiosResponse, AxiosError } from "axios";
+import qs from "qs";
+import type { AxiosInstance, AxiosRequestConfig, InternalAxiosRequestConfig, AxiosResponse, AxiosError } from "axios";
 import type { RequestConfig, Result } from "@4399ywkf/core/runtime";
 
 // ============ \u52A0\u8F7D\u7528\u6237\u914D\u7F6E ============
@@ -3246,9 +3709,38 @@ try {
   // src/request.ts \u4E0D\u5B58\u5728\uFF0C\u4F7F\u7528\u9ED8\u8BA4\u914D\u7F6E
 }
 
+// ============ \u53C2\u6570\u5E8F\u5217\u5316\uFF08GET \u8BF7\u6C42\u4E13\u7528\uFF09============
+
+/**
+ * GET \u8BF7\u6C42\u53C2\u6570\u5E8F\u5217\u5316\u89C4\u5219\uFF1A
+ * - \u6570\u7EC4\uFF1Arepeat \u6A21\u5F0F\uFF08key=1&key=2\uFF09
+ * - \u5BF9\u8C61\uFF1AJSON.stringify \u540E\u4F5C\u4E3A\u5B57\u7B26\u4E32\u4F20\u9012
+ * - null / undefined\uFF1AskipNulls \u8DF3\u8FC7
+ * - \u57FA\u672C\u7C7B\u578B\uFF1A\u539F\u6837\u4F20\u9012
+ */
+export function paramsSerializer(params: Record<string, any>): string {
+  const normalized: Record<string, any> = {};
+
+  Object.keys(params).forEach((key) => {
+    const value = params[key];
+
+    if (value === null || value === undefined) {
+      normalized[key] = value;
+    } else if (Array.isArray(value)) {
+      normalized[key] = value;
+    } else if (typeof value === "object") {
+      normalized[key] = JSON.stringify(value);
+    } else {
+      normalized[key] = value;
+    }
+  });
+
+  return qs.stringify(normalized, { arrayFormat: "repeat", skipNulls: true });
+}
+
 // ============ \u521B\u5EFA Axios \u5B9E\u4F8B ============
 
-export const request: AxiosInstance = axios.create({
+const instance: AxiosInstance = axios.create({
   baseURL: userConfig.baseURL ?? ("${baseURL}" || ""),
   timeout: userConfig.timeout ?? ${timeout},
   withCredentials: userConfig.withCredentials ?? false,
@@ -3260,7 +3752,7 @@ export const request: AxiosInstance = axios.create({
 
 // ============ \u8BF7\u6C42\u62E6\u622A\u5668 ============
 
-request.interceptors.request.use(
+instance.interceptors.request.use(
   (config: InternalAxiosRequestConfig) => {
     // 1. Token \u6CE8\u5165
     if (userConfig.getToken) {
@@ -3291,7 +3783,7 @@ request.interceptors.request.use(
 
 // ============ \u54CD\u5E94\u62E6\u622A\u5668 ============
 
-request.interceptors.response.use(
+instance.interceptors.response.use(
   (response: AxiosResponse) => {
     // \u7528\u6237\u81EA\u5B9A\u4E49\u54CD\u5E94\u62E6\u622A
     if (userConfig.responseInterceptor) {
@@ -3330,8 +3822,45 @@ request.interceptors.response.use(
   }
 );
 
+// ============ \u8BF7\u6C42\u5C01\u88C5\u7C7B ============
+
+type ExtraConfig = AxiosRequestConfig & { suppressErrorNotification?: boolean };
+
+class Request {
+  constructor(private readonly http: AxiosInstance) {}
+
+  get<T = any>(url: string, params?: Record<string, any>, config?: ExtraConfig): Promise<Result<T>> {
+    return this.http.get(url, {
+      ...config,
+      params,
+      paramsSerializer,
+    });
+  }
+
+  post<T = any>(url: string, data?: any, config?: ExtraConfig): Promise<Result<T>> {
+    return this.http.post(url, data, config);
+  }
+
+  put<T = any>(url: string, data?: any, config?: ExtraConfig): Promise<Result<T>> {
+    return this.http.put(url, data, config);
+  }
+
+  delete<T = any>(url: string, params?: Record<string, any>, config?: ExtraConfig): Promise<Result<T>> {
+    return this.http.delete(url, {
+      ...config,
+      params,
+      paramsSerializer,
+    });
+  }
+
+  patch<T = any>(url: string, data?: any, config?: ExtraConfig): Promise<Result<T>> {
+    return this.http.patch(url, data, config);
+  }
+}
+
 // ============ \u5BFC\u51FA ============
 
+export const request = new Request(instance);
 export type { Result };
 export default request;
 `;
@@ -3339,7 +3868,7 @@ export default request;
 
 // src/plugin/builtin/zustand.ts
 import { existsSync as existsSync10, mkdirSync as mkdirSync4, writeFileSync as writeFileSync5 } from "fs";
-import { join as join10 } from "path";
+import { join as join11 } from "path";
 var zustandPlugin = createPlugin((options = {}) => ({
   name: "@4399ywkf/plugin-zustand",
   version: "1.0.0",
@@ -3347,7 +3876,7 @@ var zustandPlugin = createPlugin((options = {}) => ({
   setup(context) {
     const { scaffold = true, storeDir = "store" } = options;
     const { cwd, logger } = context;
-    const storePath = join10(cwd, storeDir);
+    const storePath = join11(cwd, storeDir);
     if (scaffold && !existsSync10(storePath)) {
       scaffoldStore(storePath, logger);
     }
@@ -3376,10 +3905,10 @@ var zustandPlugin = createPlugin((options = {}) => ({
 function scaffoldStore(storePath, logger) {
   const dirs = [
     storePath,
-    join10(storePath, "middleware"),
-    join10(storePath, "app"),
-    join10(storePath, "app", "slices"),
-    join10(storePath, "app", "slices", "counter")
+    join11(storePath, "middleware"),
+    join11(storePath, "app"),
+    join11(storePath, "app", "slices"),
+    join11(storePath, "app", "slices", "counter")
   ];
   for (const dir of dirs) {
     if (!existsSync10(dir)) {
@@ -3387,36 +3916,36 @@ function scaffoldStore(storePath, logger) {
     }
   }
   writeFileSync5(
-    join10(storePath, "middleware", "createDevtools.ts"),
+    join11(storePath, "middleware", "createDevtools.ts"),
     TPL_CREATE_DEVTOOLS,
     "utf-8"
   );
   writeFileSync5(
-    join10(storePath, "app", "slices", "counter", "initialState.ts"),
+    join11(storePath, "app", "slices", "counter", "initialState.ts"),
     TPL_COUNTER_INITIAL_STATE,
     "utf-8"
   );
   writeFileSync5(
-    join10(storePath, "app", "slices", "counter", "actions.ts"),
+    join11(storePath, "app", "slices", "counter", "actions.ts"),
     TPL_COUNTER_ACTIONS,
     "utf-8"
   );
   writeFileSync5(
-    join10(storePath, "app", "initialState.ts"),
+    join11(storePath, "app", "initialState.ts"),
     TPL_APP_INITIAL_STATE,
     "utf-8"
   );
   writeFileSync5(
-    join10(storePath, "app", "store.ts"),
+    join11(storePath, "app", "store.ts"),
     TPL_APP_STORE,
     "utf-8"
   );
   writeFileSync5(
-    join10(storePath, "app", "index.tsx"),
+    join11(storePath, "app", "index.tsx"),
     TPL_APP_INDEX,
     "utf-8"
   );
-  writeFileSync5(join10(storePath, "index.ts"), TPL_STORE_INDEX, "utf-8");
+  writeFileSync5(join11(storePath, "index.ts"), TPL_STORE_INDEX, "utf-8");
   logger.info("\u5DF2\u751F\u6210 store/ \u811A\u624B\u67B6\uFF08Agent/Slice \u67B6\u6784\uFF09");
 }
 var TPL_CREATE_DEVTOOLS = `import type { DevtoolsOptions } from "zustand/middleware";
@@ -3673,7 +4202,7 @@ import chalk from "chalk";
 import os from "os";
 import { createRequire as createRequire3 } from "module";
 import { fileURLToPath as fileURLToPath2 } from "url";
-import { dirname as dirname2, join as join11 } from "path";
+import { dirname as dirname2, join as join12 } from "path";
 var __filename = fileURLToPath2(import.meta.url);
 var __dirname2 = dirname2(__filename);
 var require4 = createRequire3(import.meta.url);
@@ -3681,7 +4210,7 @@ var _version = null;
 function getFrameworkVersion() {
   if (_version) return _version;
   try {
-    const pkgPath = join11(__dirname2, "../../package.json");
+    const pkgPath = join12(__dirname2, "../../package.json");
     const pkg = require4(pkgPath);
     _version = pkg.version || "0.0.0";
   } catch {