@zat-design/sisyphus-react 4.5.9 → 4.5.10-beta.2

package/es/ProThemeTools/index.js

@@ -1,38 +1,43 @@
-import _isEqual from "lodash/isEqual";
-/* eslint-disable prefer-const */
-// 导入语句
-import { message } from 'antd';
-import { useEffect, useState } from 'react';
-import { usePrevious, useUpdateEffect, useToggle } from 'ahooks';
-import { ReactSVG } from 'react-svg';
-import classnames from 'classnames';
-import { getKebabCase, setThemes, setTableBorder, getMapKebabCase, getMapHumpCase, getAntd5ThemeConfig, setThemeUpdatersGetter } from "./utils/index";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { message } from "antd";
+import { useEffect, useState } from "react";
+import { usePrevious, useUpdateEffect, useToggle } from "ahooks";
+import { ReactSVG } from "react-svg";
+import isEqual from "lodash/isEqual";
+import classnames from "classnames";
+import {
+  getKebabCase,
+  setThemes,
+  setTableBorder,
+  getMapKebabCase,
+  getMapHumpCase,
+  getAntd5ThemeConfig,
+  setThemeUpdatersGetter
+} from "./utils/index";
 import settingSvg from "../assets/setting.svg";
 import { ProTools } from "./component";
 import locale from "../locale";
 import { useTheme, getThemeUpdaters } from "./context/ThemeContext";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const defaultCacheTime = 1; // 配置保存时间为一天
-
+const defaultCacheTime = 1;
 const defaultThemeConfig = {
-  zauiBrand: '#006AFF',
+  zauiBrand: "#006AFF",
   // 主题颜色
-  zauiText: '#343434',
-  zauiFontSize: '14px',
-  zauiFormAlign: 'left',
+  zauiText: "#343434",
+  zauiFontSize: "14px",
+  zauiFormAlign: "left",
   // 表单左对齐
-  zauiFormRequiredBefore: 'none',
+  zauiFormRequiredBefore: "none",
   // 前面*display
-  zauiFormRequiredAfter: 'inline',
+  zauiFormRequiredAfter: "inline",
   // 后面*display
   zauiSize: 1,
   // 间距倍数
-  zauiSpaceSizeLg: '32px',
+  zauiSpaceSizeLg: "32px",
   // 卡片行间距
-  zauiSpaceSizeMd: '16px',
+  zauiSpaceSizeMd: "16px",
   // 控件行间距
   zauiBigText: false,
-  zauiBaseFontSize: '0px',
+  zauiBaseFontSize: "0px",
   zauiTableBorder: false,
   zauiStripe: true
 };
@@ -40,235 +45,177 @@ const ProThemeTools = ({
   size = 24,
   className,
   cacheTime = false,
-  color = '#343434',
-  mode = 'prd',
+  color = "#343434",
+  mode = "prd",
   iconFollowTheme = false,
-  prefixCls = 'ant',
+  prefixCls = "ant",
   tableBorder = false,
   tableStripe = false,
   theme = {},
   onChange,
   ...props
 }) => {
-  // Props 和基础 Hooks
-  const [visible, {
-    toggle
-  }] = useToggle(false);
-  const {
-    updateLocalConfig,
-    updateAntdConfig,
-    updateCssVariables
-  } = useTheme();
-
-  // 状态和 Refs
+  const [visible, { toggle }] = useToggle(false);
+  const { updateLocalConfig, updateAntdConfig, updateCssVariables } = useTheme();
   const [state, setState] = useState({
     ...defaultThemeConfig,
     ...getMapHumpCase(theme)
   });
   const previousState = usePrevious(state);
-
-  // 配置和计算值
-  const {
-    zauiBrand,
-    zauiStripe,
-    zauiTableBorder
-  } = state;
+  const { zauiBrand, zauiStripe, zauiTableBorder } = state;
   const cls = classnames({
-    'pro-theme-tools': true,
-    'pro-theme-tools-follow': iconFollowTheme,
+    "pro-theme-tools": true,
+    "pro-theme-tools-follow": iconFollowTheme,
     [className]: className
   });
-
-  // 事件处理函数
   const onReset = () => {
     const resetConfig = {
       ...state,
       ...defaultThemeConfig
     };
     setState(resetConfig);
-
-    // 更新 Context
     updateLocalConfig(resetConfig);
-
-    // 更新 antd 主题
     const antdConfig = getAntd5ThemeConfig({
-      'zaui-brand': '#006AFF'
+      "zaui-brand": "#006AFF"
     });
     updateAntdConfig(antdConfig);
-
-    // 设置 CSS 变量
     const cssVars = {
-      'zaui-brand': '#006AFF',
-      'zaui-text': '#343434',
-      'zaui-form-required-after': 'inline',
-      'zaui-form-required-before': 'none',
-      'zaui-size': 1,
-      'zaui-space-size-lg': '32px',
-      'zaui-font-size': '14px',
-      'zaui-space-size-md': '16px',
-      'zaui-base-font-size': 0,
-      'zaui-big-text': false,
-      'zaui-table-border': false,
-      'zaui-stripe': true
+      "zaui-brand": "#006AFF",
+      "zaui-text": "#343434",
+      "zaui-form-required-after": "inline",
+      "zaui-form-required-before": "none",
+      "zaui-size": 1,
+      "zaui-space-size-lg": "32px",
+      "zaui-font-size": "14px",
+      "zaui-space-size-md": "16px",
+      "zaui-base-font-size": 0,
+      "zaui-big-text": false,
+      "zaui-table-border": false,
+      "zaui-stripe": true
     };
     setThemes(cssVars);
     updateCssVariables(cssVars);
   };
   const onCopy = () => {
-    const data = JSON.stringify(getMapKebabCase(state, '@'));
-    const input = document.createElement('input');
+    const data = JSON.stringify(getMapKebabCase(state, "@"));
+    const input = document.createElement("input");
     document.body.appendChild(input);
-    input.setAttribute('value', data);
+    input.setAttribute("value", data);
     input.select();
-    if (document.execCommand('copy')) {
-      document.execCommand('copy');
+    if (document.execCommand("copy")) {
+      document.execCommand("copy");
       message.success(`${locale.ProThemeTools.copySuccess}`);
     }
     document.body.removeChild(input);
   };
-
-  // 所有 useEffect 集中放置
-  // 注册全局更新函数，供 setThemes 静态方法使用
   useEffect(() => {
     setThemeUpdatersGetter(() => getThemeUpdaters());
   }, []);
-
-  // 首次从缓存中读取主题配置
   useEffect(() => {
-    // 检查 CSS 变量是否已被 setThemes 设置（优先级高于缓存）
-    const existingZauiBrand = document.documentElement.style.getPropertyValue('--zaui-brand')?.trim();
-    const themeConfig = localStorage.getItem('themeConfig');
+    var _a;
+    const existingZauiBrand = (_a = document.documentElement.style.getPropertyValue("--zaui-brand")) == null ? void 0 : _a.trim();
+    const themeConfig = localStorage.getItem("themeConfig");
     const curThemeConfig = themeConfig ? JSON.parse(themeConfig) : {};
-    const startTime = curThemeConfig?.startTime;
-    // 默认时间间隔
-    const duration = (typeof cacheTime === 'number' ? cacheTime : defaultCacheTime) * 86400000;
-    if (cacheTime && startTime && new Date().getTime() - startTime < duration) {
+    const startTime = curThemeConfig == null ? void 0 : curThemeConfig.startTime;
+    const duration = (typeof cacheTime === "number" ? cacheTime : defaultCacheTime) * 864e5;
+    if (cacheTime && startTime && (/* @__PURE__ */ new Date()).getTime() - startTime < duration) {
       let localThemeConfig;
       localThemeConfig = curThemeConfig.data;
-
-      // 如果 CSS 变量已被 setThemes 设置，优先使用 CSS 变量的值
       if (existingZauiBrand && existingZauiBrand !== localThemeConfig.zauiBrand) {
         localThemeConfig.zauiBrand = existingZauiBrand;
       }
-      const cssVariables = Object.fromEntries(Object.entries(localThemeConfig).map(item => [`${getKebabCase(item?.[0])}`, ['zauiSize'].includes(item?.[0]) || typeof item?.[1] !== 'number' ? item?.[1] : `${item?.[1]}px` // zauiSize取数字
-      ]));
-      setState({
-        ...state,
-        ...localThemeConfig
-      });
+      const cssVariables = Object.fromEntries(
+        Object.entries(localThemeConfig).map((item) => [
+          `${getKebabCase(item == null ? void 0 : item[0])}`,
+          ["zauiSize"].includes(item == null ? void 0 : item[0]) || typeof (item == null ? void 0 : item[1]) !== "number" ? item == null ? void 0 : item[1] : `${item == null ? void 0 : item[1]}px`
+          // zauiSize取数字
+        ])
+      );
+      setState({ ...state, ...localThemeConfig });
       setThemes(cssVariables);
-
-      // 更新 Context
       updateLocalConfig(localThemeConfig);
       updateCssVariables(cssVariables);
-
-      // 更新 antd 主题
       const antdConfig = getAntd5ThemeConfig({
-        'zaui-brand': localThemeConfig?.zauiBrand
+        "zaui-brand": localThemeConfig == null ? void 0 : localThemeConfig.zauiBrand
       });
       updateAntdConfig(antdConfig);
     } else {
-      // 如果 CSS 变量已被 setThemes 设置，优先使用 CSS 变量的值
-      let finalZauiBrand = state?.zauiBrand;
-      if (existingZauiBrand && existingZauiBrand !== state?.zauiBrand) {
+      let finalZauiBrand = state == null ? void 0 : state.zauiBrand;
+      if (existingZauiBrand && existingZauiBrand !== (state == null ? void 0 : state.zauiBrand)) {
         finalZauiBrand = existingZauiBrand;
       }
-      const cssVars = getMapKebabCase({
-        ...state,
-        zauiBrand: finalZauiBrand
-      });
+      const cssVars = getMapKebabCase({ ...state, zauiBrand: finalZauiBrand });
       setThemes(cssVars);
       updateCssVariables(cssVars);
-
-      // 更新 antd 主题
       const antdConfig = getAntd5ThemeConfig({
-        'zaui-brand': finalZauiBrand
+        "zaui-brand": finalZauiBrand
       });
       updateAntdConfig(antdConfig);
     }
   }, []);
-
-  // 主题色动态切换
   useEffect(() => {
     if (visible && zauiBrand) {
-      // 更新 antd 主题
       const antdConfig = getAntd5ThemeConfig({
-        'zaui-brand': zauiBrand
+        "zaui-brand": zauiBrand
       });
       updateAntdConfig(antdConfig);
     }
   }, [zauiBrand, visible]);
-
-  // 斑马纹设置
   useEffect(() => {
     const cssVar = {
-      'zaui-table-strip-bg': zauiStripe ? '#fafafa' : '#ffffff'
+      "zaui-table-strip-bg": zauiStripe ? "#fafafa" : "#ffffff"
     };
     setThemes(cssVar);
     updateCssVariables(cssVar);
   }, [zauiStripe]);
-
-  // 表格边框设置
   useEffect(() => {
     setTableBorder(zauiTableBorder);
   }, [zauiTableBorder]);
-
-  // 主题配置缓存
   useEffect(() => {
     if (cacheTime) {
       const newThemeConfig = {
-        startTime: new Date().getTime(),
-        data: {
-          ...state
-        }
+        startTime: (/* @__PURE__ */ new Date()).getTime(),
+        data: { ...state }
       };
-      localStorage.setItem('themeConfig', JSON.stringify(newThemeConfig));
+      localStorage.setItem("themeConfig", JSON.stringify(newThemeConfig));
     }
   }, [state, cacheTime]);
-
-  // 状态变化时同步到 Context
   useUpdateEffect(() => {
-    if (!_isEqual(state, previousState) && visible) {
-      // 更新本地配置
+    if (!isEqual(state, previousState) && visible) {
       updateLocalConfig(state);
-
-      // 更新 CSS 变量
       const cssVars = getMapKebabCase(state);
       setThemes(cssVars);
       updateCssVariables(cssVars);
-
-      // 更新 antd 主题
       const antdConfig = getAntd5ThemeConfig({
-        'zaui-brand': state.zauiBrand
+        "zaui-brand": state.zauiBrand
       });
       updateAntdConfig(antdConfig);
-      onChange?.(state);
+      onChange == null ? void 0 : onChange(state);
     }
   }, [state]);
-  return /*#__PURE__*/_jsxs("div", {
-    ...props,
-    children: [/*#__PURE__*/_jsx("div", {
-      className: cls,
-      onClick: toggle,
-      children: /*#__PURE__*/_jsx(ReactSVG, {
-        className: "setting-icon",
-        src: settingSvg
-      })
-    }), /*#__PURE__*/_jsx(ProTools, {
-      prefixCls: prefixCls,
-      onReset: onReset,
-      onClose: toggle,
-      onCopy: onCopy,
-      setState: setState,
-      open: visible,
-      state: state,
-      tableBorder: tableBorder,
-      tableStripe: tableStripe
-    })]
-  });
+  return /* @__PURE__ */ jsxs("div", { ...props, children: [
+    /* @__PURE__ */ jsx("div", { className: cls, onClick: toggle, children: /* @__PURE__ */ jsx(ReactSVG, { className: "setting-icon", src: settingSvg }) }),
+    /* @__PURE__ */ jsx(
+      ProTools,
+      {
+        prefixCls,
+        onReset,
+        onClose: toggle,
+        onCopy,
+        setState,
+        open: visible,
+        state,
+        tableBorder,
+        tableStripe
+      }
+    )
+  ] });
 };
 ProThemeTools.setThemes = setThemes;
-export default ProThemeTools;
-
-// 导出主题相关组件和类型
-export { ThemeProvider, useTheme } from "./context/ThemeContext";
+var ProThemeTools_default = ProThemeTools;
+import { ThemeProvider, useTheme as useTheme2 } from "./context/ThemeContext";
+export {
+  ThemeProvider,
+  ProThemeTools_default as default,
+  useTheme2 as useTheme
+};

package/es/ProThemeTools/propsType.js

@@ -1 +0,0 @@
-export {};

package/es/ProThemeTools/utils/index.js

@@ -1,60 +1,36 @@
 import { getThemeUpdaters as getThemeUpdatersFromContext } from "../context/ThemeContext";
-// 动态导入 getThemeUpdaters，避免循环依赖
-// 保留向后兼容性，但优先使用 ThemeContext 中的 getThemeUpdaters
 let getThemeUpdaters = null;
-
-// 设置 getThemeUpdaters 函数（由 index.tsx 调用，用于向后兼容）
-export const setThemeUpdatersGetter = getter => {
+const setThemeUpdatersGetter = (getter) => {
   getThemeUpdaters = getter;
 };
-
-// 保存待应用的主题配置（用于 ThemeProvider 初始化前设置的主题）
 let pendingThemes = null;
-
-// 获取待应用的主题配置
-export const getPendingThemes = () => {
+const getPendingThemes = () => {
   return pendingThemes;
 };
-
-// 清除待应用的主题配置
-export const clearPendingThemes = () => {
+const clearPendingThemes = () => {
   pendingThemes = null;
 };
-
-// 获取主题更新函数的统一入口
-// 优先使用 ThemeContext 中的 getThemeUpdaters，如果不可用则使用局部变量
 const getThemeUpdatersWrapper = () => {
   try {
-    // 优先使用 ThemeContext 中的 getThemeUpdaters（不依赖 ProThemeTools 组件）
     const contextUpdaters = getThemeUpdatersFromContext();
     if (contextUpdaters && (contextUpdaters.updateAntdConfig || contextUpdaters.updateCssVariables || contextUpdaters.updateLocalConfig)) {
       return contextUpdaters;
     }
   } catch (e) {
-    // ThemeContext 可能还未初始化，继续使用局部变量
   }
-  // 回退到局部变量（向后兼容）
   return getThemeUpdaters ? getThemeUpdaters() : null;
 };
-
-/** antd5 主题配置 mapping */
 const antd5ConfigMapping = {
-  'zaui-brand': 'colorPrimary'
+  "zaui-brand": "colorPrimary"
   // 可以根据需要添加更多映射
 };
-
-/**
- * 将 kebab-case 的主题配置转换为 antd5 的 token 格式
- * @param themes kebab-case 格式的主题配置
- * @param themeMapping 自定义映射关系
- */
-export const convertToAntd5Tokens = (themes, themeMapping) => {
+const convertToAntd5Tokens = (themes, themeMapping) => {
   const mapping = {
     ...antd5ConfigMapping,
     ...themeMapping
   };
   const tokens = {};
-  Object.keys(themes).forEach(key => {
+  Object.keys(themes).forEach((key) => {
     const value = themes[key];
     const mappingKey = mapping[key];
     if (mappingKey) {
@@ -65,64 +41,49 @@ export const convertToAntd5Tokens = (themes, themeMapping) => {
     token: tokens
   };
 };
-
-/**
- * 设置主题变量 - antd5 兼容版本
- * 设置 CSS 变量，并同步更新 Context 的 antdConfig
- * @param themes 主题配置对象，会自动过滤掉 antdConfig
- */
-export const setThemes = themes => {
+const setThemes = (themes) => {
   if (!themes || !Object.keys(themes).length) {
     return false;
   }
-
-  // 过滤掉 antdConfig，它只用于 Ant Design ConfigProvider，不应作为 CSS 变量
-  const filteredThemes = Object.entries(themes).filter(([key]) => key !== 'antdConfig');
+  const filteredThemes = Object.entries(themes).filter(([key]) => key !== "antdConfig");
   if (!filteredThemes.length) {
     return false;
   }
-
-  // 设置 CSS 变量
   filteredThemes.forEach(([key, value]) => {
-    // 确保值是字符串或数字，对象类型不应作为 CSS 变量
-    if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+    if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
       const cssVarName = `--${key}`;
       const cssVarValue = String(value);
       document.documentElement.style.setProperty(cssVarName, cssVarValue);
     }
   });
-
-  // 同步更新 Context（如果已注册）
-  // 使用统一的获取函数，优先使用 ThemeContext 中的更新函数
   const updaters = getThemeUpdatersWrapper();
   if (updaters) {
-    // 更新 CSS 变量到 Context
     if (updaters.updateCssVariables) {
-      updaters.updateCssVariables(filteredThemes.reduce((acc, [key, value]) => {
-        if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
-          acc[key] = value;
-        }
-        return acc;
-      }, {}));
+      updaters.updateCssVariables(
+        filteredThemes.reduce(
+          (acc, [key, value]) => {
+            if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+              acc[key] = value;
+            }
+            return acc;
+          },
+          {}
+        )
+      );
     }
-
-    // 如果设置了 zaui-brand，同步更新 antdConfig
-    const zauiBrand = themes['zaui-brand'];
-    if (zauiBrand && typeof zauiBrand === 'string' && updaters.updateAntdConfig) {
+    const zauiBrand = themes["zaui-brand"];
+    if (zauiBrand && typeof zauiBrand === "string" && updaters.updateAntdConfig) {
       const antdConfig = convertToAntd5Tokens({
-        'zaui-brand': zauiBrand
+        "zaui-brand": zauiBrand
       });
       updaters.updateAntdConfig(antdConfig);
     }
-
-    // 更新本地配置（将 kebab-case 转换为驼峰格式）
     if (updaters.updateLocalConfig) {
       const localConfig = {};
       filteredThemes.forEach(([key, value]) => {
-        if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
-          // 将 kebab-case 转换为驼峰格式
+        if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
           const camelKey = key.replace(/-(\w)/g, (_, letter) => letter.toUpperCase());
-          if (camelKey === 'zauiBrand') {
+          if (camelKey === "zauiBrand") {
             localConfig.zauiBrand = value;
           }
         }
@@ -131,56 +92,38 @@ export const setThemes = themes => {
         updaters.updateLocalConfig(localConfig);
       }
     }
-    // 清除待应用的主题配置（因为已经应用了）
     pendingThemes = null;
   } else {
-    // 如果更新函数不可用，保存主题配置，等待 ThemeProvider 初始化后应用
-    pendingThemes = {
-      ...themes
-    };
+    pendingThemes = { ...themes };
   }
   return true;
 };
-
-/**
- * 获取 antd5 主题配置
- * @param themes kebab-case 格式的主题配置
- */
-export const getAntd5ThemeConfig = themes => {
+const getAntd5ThemeConfig = (themes) => {
   return convertToAntd5Tokens(themes);
 };
-
-/** JS实现驼峰命名与横线命名的转换  */
-export const getKebabCase = str => {
-  let temp = str.replace(/[A-Z]/g, i => {
+const getKebabCase = (str) => {
+  let temp = str.replace(/[A-Z]/g, (i) => {
     return `-${i.toLowerCase()}`;
   });
-  if (temp.slice(0, 1) === '-') {
-    temp = temp.slice(1); // 如果首字母是大写，执行replace时会多一个-，需要去掉
+  if (temp.slice(0, 1) === "-") {
+    temp = temp.slice(1);
   }
   return temp;
 };
-
-/** JS实现对象驼峰命名与横线命名的转换  */
-export const getMapKebabCase = (obj, prefix = '') => {
-  return Object.fromEntries(Object.entries(obj).map(item => [`${prefix}${getKebabCase(item?.[0])}`, item?.[1]]));
+const getMapKebabCase = (obj, prefix = "") => {
+  return Object.fromEntries(
+    Object.entries(obj).map((item) => [`${prefix}${getKebabCase(item == null ? void 0 : item[0])}`, item == null ? void 0 : item[1]])
+  );
 };
-
-/** JS实现对象横线命名与驼峰命名的转换  */
-export const getMapHumpCase = (obj = {}) => {
+const getMapHumpCase = (obj = {}) => {
   return Object.keys(obj).reduce((acc, key) => {
     const transformedKey = key.replace(/-(\w)/g, (_, letter) => letter.toUpperCase());
     acc[transformedKey] = obj[key];
     return acc;
   }, {});
 };
-
-/**
- * 设置表格斑马纹
- * @param stripe boolean
- */
-export const setTableNoStripe = (stripe, prefixCls = 'ant') => {
-  const proTables = document.querySelectorAll('.pro-table');
+const setTableNoStripe = (stripe, prefixCls = "ant") => {
+  const proTables = document.querySelectorAll(".pro-table");
   const antTables = document.querySelectorAll(`.${prefixCls}-table`);
   if (!proTables.length) {
     return;
@@ -188,27 +131,22 @@ export const setTableNoStripe = (stripe, prefixCls = 'ant') => {
   for (let i = 0; i < proTables.length; i++) {
     const proTable = proTables[i];
     if (stripe) {
-      proTable.classList.remove('pro-table-no-stripe');
+      proTable.classList.remove("pro-table-no-stripe");
     } else {
-      proTable.classList.add('pro-table-no-stripe');
+      proTable.classList.add("pro-table-no-stripe");
     }
   }
   for (let i = 0; i < antTables.length; i++) {
     const antTable = antTables[i];
     if (stripe) {
-      antTable.classList.remove('pro-table-no-stripe');
+      antTable.classList.remove("pro-table-no-stripe");
     } else {
-      antTable.classList.add('pro-table-no-stripe');
+      antTable.classList.add("pro-table-no-stripe");
     }
   }
 };
-
-/**
- * 设置表格边框
- * @param border boolean
- */
-export const setTableBorder = border => {
-  const proTables = document.querySelectorAll('.pro-table');
+const setTableBorder = (border) => {
+  const proTables = document.querySelectorAll(".pro-table");
   if (!proTables.length) {
     return;
   }
@@ -216,10 +154,23 @@ export const setTableBorder = border => {
     const proTable = proTables[i];
     if (proTable && proTable.classList) {
       if (border) {
-        proTable.classList.add('pro-table-bordered');
+        proTable.classList.add("pro-table-bordered");
       } else {
-        proTable.classList.remove('pro-table-bordered');
+        proTable.classList.remove("pro-table-bordered");
       }
     }
   }
-};
+};
+export {
+  clearPendingThemes,
+  convertToAntd5Tokens,
+  getAntd5ThemeConfig,
+  getKebabCase,
+  getMapHumpCase,
+  getMapKebabCase,
+  getPendingThemes,
+  setTableBorder,
+  setTableNoStripe,
+  setThemeUpdatersGetter,
+  setThemes
+};