@4399ywkf/core 5.0.16 → 5.0.17

package/dist/index.d.ts

@@ -278,27 +278,41 @@ declare const i18nPlugin: (options?: I18nPluginOptions | undefined) => YwkfPlugi
 
 interface ThemePluginOptions {
     /**
-     * 是否启用暗色模式
+     * 是否启用暗色模式切换能力
      * @default true
      */
     darkMode?: boolean;
     /**
-     * 默认主题模式（作为 store 的初始值，运行时可通过 useThemeStore 动态切换）
-     * 参考 lobe-ui 默认暗色风格
-     * @default "dark"
+     * 默认主题模式（运行时可通过 useThemeStore 动态切换）
+     * @default "light"
      */
     defaultAppearance?: "light" | "dark" | "auto";
     /**
-     * 主色调（作为 store 的初始值，运行时可通过 useThemeStore 动态切换）
-     * @default "#1677ff"
+     * 主色调（Lobe-UI 命名预设，运行时可通过 useThemeStore 动态切换）
+     *
+     * 不设置时使用 Lobe-UI 默认 primary 色阶（黑色系），
+     * 可选值："blue" | "cyan" | "geekblue" | "gold" | "green" | "lime"
+     *       | "magenta" | "orange" | "purple" | "red" | "volcano" | "yellow"
+     *
+     * @default undefined
      */
     primaryColor?: string;
     /**
-     * 中性色（作为 store 的初始值）
+     * 中性色（Lobe-UI 命名预设）
+     *
+     * 可选值："mauve" | "olive" | "sage" | "sand" | "slate"
+     *
+     * @default undefined
      */
     neutralColor?: string;
     /**
-     * antd 前缀
+     * antd 组件前缀
+     *
+     * 支持三种配置方式（优先级从高到低）：
+     * 1. 运行时环境变量 process.env.YWKF_PREFIX_CLS
+     * 2. 插件选项中直接指定
+     * 3. 默认值 "ant"
+     *
      * @default "ant"
      */
     prefixCls?: string;
@@ -319,14 +333,6 @@ interface ThemePluginOptions {
      * - 应用启动时读取 window.__YWKF_THEME__ 作为初始覆盖
      * - 监听 ywkf:theme-change 自定义事件，实现运行时主题同步
      *
-     * 主应用注入示例：
-     * ```ts
-     * window.__YWKF_THEME__ = { primaryColor: "#ff4d4f", appearance: "dark" };
-     * window.dispatchEvent(new CustomEvent("ywkf:theme-change", {
-     *   detail: { primaryColor: "#52c41a" },
-     * }));
-     * ```
-     *
      * @default false
      */
     externalTheme?: boolean;
@@ -334,12 +340,11 @@ interface ThemePluginOptions {
 /**
  * 响应式主题系统插件
  *
- * 基于 antd-style + Zustand 提供运行时可变的主题管理能力：
- * - 生成 ThemeProvider 包裹组件到 .ywkf/theme.tsx
- * - 生成 useThemeStore / useTheme 等 hooks 供业务消费
- * - 注入 ThemeProvider 到 bootstrap
- * - 支持亮/暗色/跟随系统自动切换
- * - 支持微前端场景下主应用注入主题
+ * 基于 antd-style + @4399ywkf/theme-system + Zustand 提供运行时可变的主题管理：
+ * - 使用 Lobe-UI 色彩体系（13 阶色阶 + 自定义算法）
+ * - 支持 PrimaryColors / NeutralColors 命名预设
+ * - 亮/暗色/跟随系统自动切换
+ * - 支持微前端场景主应用注入主题
  *
  * @example
  * ```ts
@@ -348,26 +353,14 @@ interface ThemePluginOptions {
  * export default defineConfig({
  *   plugins: [
  *     themePlugin({
- *       darkMode: true,
- *       defaultAppearance: "auto",
- *       primaryColor: "#1677ff",
- *       externalTheme: true,
+ *       defaultAppearance: "light",
+ *       primaryColor: "geekblue",
+ *       neutralColor: "slate",
+ *       prefixCls: "my-app",
  *     }),
  *   ],
  * });
  * ```
- *
- * 业务组件中使用：
- * ```tsx
- * import { useThemeStore, useTheme } from "@/.ywkf/theme";
- *
- * function ThemeSwitch() {
- *   const { appearance, setAppearance } = useThemeStore(
- *     (s) => ({ appearance: s.appearance, setAppearance: s.setAppearance }),
- *   );
- *   return <Switch checked={appearance === "dark"} onChange={(v) => setAppearance(v ? "dark" : "light")} />;
- * }
- * ```
  */
 declare const themePlugin: (options?: ThemePluginOptions | undefined) => YwkfPlugin;
 

package/dist/index.js

@@ -3064,13 +3064,13 @@ function scaffoldLocaleJsonDirs(cwd, localesDir, locales, defaultLocale, namespa
 import { join as join9 } from "path";
 var themePlugin = createPlugin((options = {}) => ({
   name: "@4399ywkf/plugin-theme",
-  version: "2.0.0",
-  description: "antd-style \u54CD\u5E94\u5F0F\u4E3B\u9898\u7CFB\u7EDF\u63D2\u4EF6",
+  version: "3.0.0",
+  description: "Lobe-UI \u98CE\u683C\u54CD\u5E94\u5F0F\u4E3B\u9898\u7CFB\u7EDF\u63D2\u4EF6",
   setup(context) {
     const {
       darkMode = true,
-      defaultAppearance = "dark",
-      primaryColor = "#1677ff",
+      defaultAppearance = "light",
+      primaryColor,
       neutralColor,
       prefixCls = "ant",
       cssVar = true,
@@ -3078,7 +3078,7 @@ var themePlugin = createPlugin((options = {}) => ({
       externalTheme = false
     } = options;
     const { logger } = context;
-    logger.info(`\u4E3B\u9898\u6A21\u5F0F: ${defaultAppearance}, \u4E3B\u8272: ${primaryColor}, \u54CD\u5E94\u5F0F: \u2713`);
+    logger.info(`\u4E3B\u9898\u6A21\u5F0F: ${defaultAppearance}, \u4E3B\u8272: ${primaryColor ?? "primary(\u9ED8\u8BA4\u9ED1)"}, \u54CD\u5E94\u5F0F: \u2713`);
     const hooks = {
       modifyRspackConfig(config, ctx) {
         const themePath = join9(ctx.cwd, ".ywkf", "theme.tsx");
@@ -3161,7 +3161,7 @@ function generateThemeProvider(opts) {
     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(`// \u6B64\u6587\u4EF6\u7531 @4399ywkf/plugin-theme v3 \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 }));
@@ -3177,6 +3177,7 @@ function buildImports(opts) {
   const reactImports = [
     "useCallback",
     "useEffect",
+    "useMemo",
     ...opts.cssVar ? ["useLayoutEffect", "useRef"] : [],
     "type ReactNode"
   ];
@@ -3189,7 +3190,8 @@ function buildImports(opts) {
 import React, { ${reactImports.join(", ")} } from "react";
 import { ${antdStyleImports.join(", ")} } from "antd-style";
 import { createWithEqualityFn } from "zustand/traditional";
-import { shallow } from "zustand/shallow";`;
+import { shallow } from "zustand/shallow";
+import { createThemeConfig, type PrimaryColors, type NeutralColors } from "@4399ywkf/theme-system";`;
 }
 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
@@ -3198,28 +3200,30 @@ export type ThemeAppearance = "light" | "dark" | "auto";
 
 export interface ThemeState {
   appearance: ThemeAppearance;
-  primaryColor: string;
-  neutralColor?: string;
+  primaryColor?: PrimaryColors;
+  neutralColor?: NeutralColors;
 }
 
 export interface ThemeActions {
   setAppearance: (mode: ThemeAppearance) => void;
-  setPrimaryColor: (color: string) => void;
-  setNeutralColor: (color: string) => void;
-  /** \u6279\u91CF\u66F4\u65B0\u4E3B\u9898\u72B6\u6001 */
+  setPrimaryColor: (color: PrimaryColors | undefined) => void;
+  setNeutralColor: (color: NeutralColors | undefined) => void;
   setTheme: (partial: Partial<ThemeState>) => void;
 }
 
-export type ThemeStore = ThemeState & ThemeActions;`;
+export type ThemeStore = ThemeState & ThemeActions;
+
+export type { PrimaryColors, NeutralColors };`;
 function buildStoreCode(opts) {
-  const neutralLine = opts.neutralColor ? `
-  neutralColor: "${opts.neutralColor}",` : "";
+  const primaryLine = opts.primaryColor ? `  primaryColor: "${opts.primaryColor}" as PrimaryColors,` : `  primaryColor: undefined,`;
+  const neutralLine = opts.neutralColor ? `  neutralColor: "${opts.neutralColor}" as NeutralColors,` : `  neutralColor: undefined,`;
   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
 
 const DEFAULT_THEME: ThemeState = {
   appearance: "${opts.defaultAppearance}",
-  primaryColor: "${opts.primaryColor}",${neutralLine}
+${primaryLine}
+${neutralLine}
 };
 
 export const useThemeStore = createWithEqualityFn<ThemeStore>()(
@@ -3236,7 +3240,6 @@ export const useThemeStore = createWithEqualityFn<ThemeStore>()(
 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) => ({
@@ -3247,14 +3250,10 @@ export const useTheme = () =>
     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 = `
 // \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 {
@@ -3315,8 +3314,6 @@ const GlobalReset = createGlobalStyle(({ theme }) => css\`
 \`);`;
 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-";
 
@@ -3382,7 +3379,6 @@ function useAppearanceSync(appearance: ThemeAppearance) {
 }`;
 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(() => {
@@ -3412,52 +3408,41 @@ function buildWrapperCode(opts) {
   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
 
+const RUNTIME_PREFIX_CLS = typeof process !== "undefined"
+  && process.env?.YWKF_PREFIX_CLS
+  || "${prefixCls}";
+
 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 }),
+  const { appearance, primaryColor, neutralColor } = useThemeStore(
+    (s) => ({ appearance: s.appearance, primaryColor: s.primaryColor, neutralColor: s.neutralColor }),
     shallow,
   );${cssVarSyncLine}${appearanceSyncLine}${externalThemeLine}
 
+  const resolvedAppearance = useMemo(() => {
+    if (appearance !== "auto") return appearance;
+    if (typeof window === "undefined") return "light";
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  }, [appearance]);
+
   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(", "),
-      },
+    (ap) => createThemeConfig({
+      appearance: ap as "light" | "dark",
+      primaryColor,
+      neutralColor,
     }),
-    [primaryColor],
+    [primaryColor, neutralColor],
   );
 
   return (
     <AntdThemeProvider
-      prefixCls="${prefixCls}"
+      prefixCls={RUNTIME_PREFIX_CLS}
+      appearance={resolvedAppearance}
       themeMode={appearance}
-      theme={theme}
+      theme={theme}${cssVar ? "\n      customToken={{ cssVar: true }}" : ""}
     >
       ${globalReset ? "<GlobalReset />" : ""}
       ${childrenSlot}