@cfmm/umi-plugins-ui-v2 0.0.30 → 0.0.32

package/dist/cjs/components/GlobalHeader.tpl

@@ -35,7 +35,7 @@ const ENV_TAG_COLOR: GlobalHeaderProps['ENVTagColor'] = {
  * 全局头部组件
  */
 const GlobalHeader: React.FC<GlobalHeaderProps> = (props) => {
-  const { replaceItems, insertItems, ENVTagColor = ENV_TAG_COLOR } = props;
+  const { replaceItems, insertItems, ENVTagColor = ENV_TAG_COLOR, themeSwitchProps } = props;
 
   const { setIsDarkTheme, templateDownloadModalOpenChange } = useModel('global');
 
@@ -236,7 +236,7 @@ const GlobalHeader: React.FC<GlobalHeaderProps> = (props) => {
     {
       key: 'ThemeSwitch',
       group: groupMap.themeSwitch,
-      component: <ThemeSwitch style={{ height: 22 }} onThemeChange={setIsDarkTheme} />,
+      component: <ThemeSwitch style={{ height: 22 }} onThemeChange={setIsDarkTheme} {...themeSwitchProps}/>,
     },
   ];
 

package/dist/cjs/components/ThemeSwitch.tpl

@@ -13,7 +13,7 @@ import { ThemeSwitchProps } from "../types";
  * @returns 
  */
 const ThemeSwitch: React.FC<ThemeSwitchProps> = (props) => {
-  const { onThemeChange, defaultChecked, ...switchProps } = props;
+  const { onThemeChange, defaultChecked, dynamicThemeFix = {}, ...switchProps } = props;
 
   let darkMode = typeof defaultChecked === 'boolean' ? defaultChecked : localStorage.getItem('darkMode') === '1';
 
@@ -30,10 +30,13 @@ const ThemeSwitch: React.FC<ThemeSwitchProps> = (props) => {
 
       const defaultFixes = {
         invert: [],
+        // 1. css 字段：DarkReader 注入此 CSS 时不会二次处理，!important 可覆盖其动态改写的样式表
+        // 2. ignoreInlineStyle 追加 防止 DarkReader 修改组件通过 style 注入的 CSS 变量
         css: '',
-        ignoreInlineStyle: ['.react-switch-handle'],
+        ignoreInlineStyle: [],
         ignoreImageAnalysis: [],
         disableStyleSheetsProxy: true,
+        ...dynamicThemeFix,
       };
       if (window.MutationObserver && window.fetch) {
         setFetch(window.fetch);

package/dist/cjs/types/GlobalHeaderTypes.d.ts

@@ -1 +1 @@
-export declare const GlobalHeaderTypes = "\n/**\n * \u73AF\u5883\u6807\u7B7E\u989C\u8272\u7C7B\u578B\n */\ntype EnvTagColorType = Record<string, string>;\n\n/**\n * \u53F3\u4FA7\u9879\u76EE\u7C7B\u578B\n */\nexport type RightItemKey =\n  | 'AuthDropdown'\n  | 'HeaderSearch'\n  | 'Website'\n  | 'helpDocs'\n  | 'Full'\n  | 'more'\n  | 'AvatarDropdown'\n  | 'REACT_APP_ENV'\n  | 'MySelectLang'\n  | 'ThemeSwitch';\n\n/**\n * \u53F3\u4FA7\u9879\u76EE\u7C7B\u578B\n */\nexport interface GlobalRightItem {\n  key: RightItemKey | string;\n  group?: string;\n  component: React.ReactNode;\n}\n\n/**\n * \u63D2\u5165\u9879\u76EE\u7C7B\u578B\n */\ninterface InsertItem extends Omit<GlobalRightItem, 'key'> {\n  key: string;\n  index: number;\n}\n\n/**\n * \u5168\u5C40\u5934\u90E8\u7EC4\u4EF6\u7C7B\u578B\n */\nexport interface GlobalHeaderProps {\n  /** \u73AF\u5883\u6807\u7B7E\u989C\u8272 */\n  ENVTagColor?: EnvTagColorType;\n  /** \u66FF\u6362item */\n  replaceItems?: GlobalRightItem[];\n  /** \u63D2\u5165item */\n  insertItems?: InsertItem[];\n}\n";
+export declare const GlobalHeaderTypes = "\n/**\n * \u73AF\u5883\u6807\u7B7E\u989C\u8272\u7C7B\u578B\n */\ntype EnvTagColorType = Record<string, string>;\n\n/**\n * \u53F3\u4FA7\u9879\u76EE\u7C7B\u578B\n */\nexport type RightItemKey =\n  | 'AuthDropdown'\n  | 'HeaderSearch'\n  | 'Website'\n  | 'helpDocs'\n  | 'Full'\n  | 'more'\n  | 'AvatarDropdown'\n  | 'REACT_APP_ENV'\n  | 'MySelectLang'\n  | 'ThemeSwitch';\n\n/**\n * \u53F3\u4FA7\u9879\u76EE\u7C7B\u578B\n */\nexport interface GlobalRightItem {\n  key: RightItemKey | string;\n  group?: string;\n  component: React.ReactNode;\n}\n\n/**\n * \u63D2\u5165\u9879\u76EE\u7C7B\u578B\n */\ninterface InsertItem extends Omit<GlobalRightItem, 'key'> {\n  key: string;\n  index: number;\n}\n\n/**\n * \u5168\u5C40\u5934\u90E8\u7EC4\u4EF6\u7C7B\u578B\n */\nexport interface GlobalHeaderProps {\n  /** \u73AF\u5883\u6807\u7B7E\u989C\u8272 */\n  ENVTagColor?: EnvTagColorType;\n  /** \u66FF\u6362item */\n  replaceItems?: GlobalRightItem[];\n  /** \u63D2\u5165item */\n  insertItems?: InsertItem[];\n  /** \u4E3B\u9898\u5207\u6362\u7EC4\u4EF6\u5C5E\u6027 */\n  themeSwitchProps?: ThemeSwitchProps;\n}\n";

package/dist/cjs/types/GlobalHeaderTypes.js

@@ -4,4 +4,4 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GlobalHeaderTypes = void 0;
-var GlobalHeaderTypes = exports.GlobalHeaderTypes = "\n/**\n * \u73AF\u5883\u6807\u7B7E\u989C\u8272\u7C7B\u578B\n */\ntype EnvTagColorType = Record<string, string>;\n\n/**\n * \u53F3\u4FA7\u9879\u76EE\u7C7B\u578B\n */\nexport type RightItemKey =\n  | 'AuthDropdown'\n  | 'HeaderSearch'\n  | 'Website'\n  | 'helpDocs'\n  | 'Full'\n  | 'more'\n  | 'AvatarDropdown'\n  | 'REACT_APP_ENV'\n  | 'MySelectLang'\n  | 'ThemeSwitch';\n\n/**\n * \u53F3\u4FA7\u9879\u76EE\u7C7B\u578B\n */\nexport interface GlobalRightItem {\n  key: RightItemKey | string;\n  group?: string;\n  component: React.ReactNode;\n}\n\n/**\n * \u63D2\u5165\u9879\u76EE\u7C7B\u578B\n */\ninterface InsertItem extends Omit<GlobalRightItem, 'key'> {\n  key: string;\n  index: number;\n}\n\n/**\n * \u5168\u5C40\u5934\u90E8\u7EC4\u4EF6\u7C7B\u578B\n */\nexport interface GlobalHeaderProps {\n  /** \u73AF\u5883\u6807\u7B7E\u989C\u8272 */\n  ENVTagColor?: EnvTagColorType;\n  /** \u66FF\u6362item */\n  replaceItems?: GlobalRightItem[];\n  /** \u63D2\u5165item */\n  insertItems?: InsertItem[];\n}\n";
+var GlobalHeaderTypes = exports.GlobalHeaderTypes = "\n/**\n * \u73AF\u5883\u6807\u7B7E\u989C\u8272\u7C7B\u578B\n */\ntype EnvTagColorType = Record<string, string>;\n\n/**\n * \u53F3\u4FA7\u9879\u76EE\u7C7B\u578B\n */\nexport type RightItemKey =\n  | 'AuthDropdown'\n  | 'HeaderSearch'\n  | 'Website'\n  | 'helpDocs'\n  | 'Full'\n  | 'more'\n  | 'AvatarDropdown'\n  | 'REACT_APP_ENV'\n  | 'MySelectLang'\n  | 'ThemeSwitch';\n\n/**\n * \u53F3\u4FA7\u9879\u76EE\u7C7B\u578B\n */\nexport interface GlobalRightItem {\n  key: RightItemKey | string;\n  group?: string;\n  component: React.ReactNode;\n}\n\n/**\n * \u63D2\u5165\u9879\u76EE\u7C7B\u578B\n */\ninterface InsertItem extends Omit<GlobalRightItem, 'key'> {\n  key: string;\n  index: number;\n}\n\n/**\n * \u5168\u5C40\u5934\u90E8\u7EC4\u4EF6\u7C7B\u578B\n */\nexport interface GlobalHeaderProps {\n  /** \u73AF\u5883\u6807\u7B7E\u989C\u8272 */\n  ENVTagColor?: EnvTagColorType;\n  /** \u66FF\u6362item */\n  replaceItems?: GlobalRightItem[];\n  /** \u63D2\u5165item */\n  insertItems?: InsertItem[];\n  /** \u4E3B\u9898\u5207\u6362\u7EC4\u4EF6\u5C5E\u6027 */\n  themeSwitchProps?: ThemeSwitchProps;\n}\n";

package/dist/cjs/types/ThemeSwitchTypes.d.ts

@@ -1 +1 @@
-export declare const ThemeSwitchTypes = "\nexport interface ThemeSwitchProps extends SwitchProps {\n  /**\n   * \u5207\u6362\u4E3B\u9898\u89E6\u53D1\n   * @param darkMode \u662F\u5426\u9ED1\u6697\u4E3B\u9898\n   * @returns\n   */\n  onThemeChange?: (darkMode: boolean) => void;\n}\n";
+export declare const ThemeSwitchTypes = "\nimport {\n  type DynamicThemeFix,\n} from '@umijs/ssr-darkreader';\n \nexport interface ThemeSwitchProps extends SwitchProps {\n  /** \u52A8\u6001\u4E3B\u9898\u4FEE\u590D */\n  dynamicThemeFix?: Partial<DynamicThemeFix>;\n  /**\n   * \u5207\u6362\u4E3B\u9898\u89E6\u53D1\n   * @param darkMode \u662F\u5426\u9ED1\u6697\u4E3B\u9898\n   * @returns\n   */\n  onThemeChange?: (darkMode: boolean) => void;\n}\n";

package/dist/cjs/types/ThemeSwitchTypes.js

@@ -4,4 +4,4 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ThemeSwitchTypes = void 0;
-var ThemeSwitchTypes = exports.ThemeSwitchTypes = "\nexport interface ThemeSwitchProps extends SwitchProps {\n  /**\n   * \u5207\u6362\u4E3B\u9898\u89E6\u53D1\n   * @param darkMode \u662F\u5426\u9ED1\u6697\u4E3B\u9898\n   * @returns\n   */\n  onThemeChange?: (darkMode: boolean) => void;\n}\n";
+var ThemeSwitchTypes = exports.ThemeSwitchTypes = "\nimport {\n  type DynamicThemeFix,\n} from '@umijs/ssr-darkreader';\n \nexport interface ThemeSwitchProps extends SwitchProps {\n  /** \u52A8\u6001\u4E3B\u9898\u4FEE\u590D */\n  dynamicThemeFix?: Partial<DynamicThemeFix>;\n  /**\n   * \u5207\u6362\u4E3B\u9898\u89E6\u53D1\n   * @param darkMode \u662F\u5426\u9ED1\u6697\u4E3B\u9898\n   * @returns\n   */\n  onThemeChange?: (darkMode: boolean) => void;\n}\n";

package/dist/esm/components/GlobalHeader.tpl

@@ -35,7 +35,7 @@ const ENV_TAG_COLOR: GlobalHeaderProps['ENVTagColor'] = {
  * 全局头部组件
  */
 const GlobalHeader: React.FC<GlobalHeaderProps> = (props) => {
-  const { replaceItems, insertItems, ENVTagColor = ENV_TAG_COLOR } = props;
+  const { replaceItems, insertItems, ENVTagColor = ENV_TAG_COLOR, themeSwitchProps } = props;
 
   const { setIsDarkTheme, templateDownloadModalOpenChange } = useModel('global');
 
@@ -236,7 +236,7 @@ const GlobalHeader: React.FC<GlobalHeaderProps> = (props) => {
     {
       key: 'ThemeSwitch',
       group: groupMap.themeSwitch,
-      component: <ThemeSwitch style={{ height: 22 }} onThemeChange={setIsDarkTheme} />,
+      component: <ThemeSwitch style={{ height: 22 }} onThemeChange={setIsDarkTheme} {...themeSwitchProps}/>,
     },
   ];
 

package/dist/esm/components/ThemeSwitch.tpl

@@ -13,7 +13,7 @@ import { ThemeSwitchProps } from "../types";
  * @returns 
  */
 const ThemeSwitch: React.FC<ThemeSwitchProps> = (props) => {
-  const { onThemeChange, defaultChecked, ...switchProps } = props;
+  const { onThemeChange, defaultChecked, dynamicThemeFix = {}, ...switchProps } = props;
 
   let darkMode = typeof defaultChecked === 'boolean' ? defaultChecked : localStorage.getItem('darkMode') === '1';
 
@@ -30,10 +30,13 @@ const ThemeSwitch: React.FC<ThemeSwitchProps> = (props) => {
 
       const defaultFixes = {
         invert: [],
+        // 1. css 字段：DarkReader 注入此 CSS 时不会二次处理，!important 可覆盖其动态改写的样式表
+        // 2. ignoreInlineStyle 追加 防止 DarkReader 修改组件通过 style 注入的 CSS 变量
         css: '',
-        ignoreInlineStyle: ['.react-switch-handle'],
+        ignoreInlineStyle: [],
         ignoreImageAnalysis: [],
         disableStyleSheetsProxy: true,
+        ...dynamicThemeFix,
       };
       if (window.MutationObserver && window.fetch) {
         setFetch(window.fetch);

package/dist/esm/types/GlobalHeaderTypes.d.ts

@@ -1 +1 @@
-export declare const GlobalHeaderTypes = "\n/**\n * \u73AF\u5883\u6807\u7B7E\u989C\u8272\u7C7B\u578B\n */\ntype EnvTagColorType = Record<string, string>;\n\n/**\n * \u53F3\u4FA7\u9879\u76EE\u7C7B\u578B\n */\nexport type RightItemKey =\n  | 'AuthDropdown'\n  | 'HeaderSearch'\n  | 'Website'\n  | 'helpDocs'\n  | 'Full'\n  | 'more'\n  | 'AvatarDropdown'\n  | 'REACT_APP_ENV'\n  | 'MySelectLang'\n  | 'ThemeSwitch';\n\n/**\n * \u53F3\u4FA7\u9879\u76EE\u7C7B\u578B\n */\nexport interface GlobalRightItem {\n  key: RightItemKey | string;\n  group?: string;\n  component: React.ReactNode;\n}\n\n/**\n * \u63D2\u5165\u9879\u76EE\u7C7B\u578B\n */\ninterface InsertItem extends Omit<GlobalRightItem, 'key'> {\n  key: string;\n  index: number;\n}\n\n/**\n * \u5168\u5C40\u5934\u90E8\u7EC4\u4EF6\u7C7B\u578B\n */\nexport interface GlobalHeaderProps {\n  /** \u73AF\u5883\u6807\u7B7E\u989C\u8272 */\n  ENVTagColor?: EnvTagColorType;\n  /** \u66FF\u6362item */\n  replaceItems?: GlobalRightItem[];\n  /** \u63D2\u5165item */\n  insertItems?: InsertItem[];\n}\n";
+export declare const GlobalHeaderTypes = "\n/**\n * \u73AF\u5883\u6807\u7B7E\u989C\u8272\u7C7B\u578B\n */\ntype EnvTagColorType = Record<string, string>;\n\n/**\n * \u53F3\u4FA7\u9879\u76EE\u7C7B\u578B\n */\nexport type RightItemKey =\n  | 'AuthDropdown'\n  | 'HeaderSearch'\n  | 'Website'\n  | 'helpDocs'\n  | 'Full'\n  | 'more'\n  | 'AvatarDropdown'\n  | 'REACT_APP_ENV'\n  | 'MySelectLang'\n  | 'ThemeSwitch';\n\n/**\n * \u53F3\u4FA7\u9879\u76EE\u7C7B\u578B\n */\nexport interface GlobalRightItem {\n  key: RightItemKey | string;\n  group?: string;\n  component: React.ReactNode;\n}\n\n/**\n * \u63D2\u5165\u9879\u76EE\u7C7B\u578B\n */\ninterface InsertItem extends Omit<GlobalRightItem, 'key'> {\n  key: string;\n  index: number;\n}\n\n/**\n * \u5168\u5C40\u5934\u90E8\u7EC4\u4EF6\u7C7B\u578B\n */\nexport interface GlobalHeaderProps {\n  /** \u73AF\u5883\u6807\u7B7E\u989C\u8272 */\n  ENVTagColor?: EnvTagColorType;\n  /** \u66FF\u6362item */\n  replaceItems?: GlobalRightItem[];\n  /** \u63D2\u5165item */\n  insertItems?: InsertItem[];\n  /** \u4E3B\u9898\u5207\u6362\u7EC4\u4EF6\u5C5E\u6027 */\n  themeSwitchProps?: ThemeSwitchProps;\n}\n";

package/dist/esm/types/GlobalHeaderTypes.js

@@ -1 +1 @@
-export var GlobalHeaderTypes = "\n/**\n * \u73AF\u5883\u6807\u7B7E\u989C\u8272\u7C7B\u578B\n */\ntype EnvTagColorType = Record<string, string>;\n\n/**\n * \u53F3\u4FA7\u9879\u76EE\u7C7B\u578B\n */\nexport type RightItemKey =\n  | 'AuthDropdown'\n  | 'HeaderSearch'\n  | 'Website'\n  | 'helpDocs'\n  | 'Full'\n  | 'more'\n  | 'AvatarDropdown'\n  | 'REACT_APP_ENV'\n  | 'MySelectLang'\n  | 'ThemeSwitch';\n\n/**\n * \u53F3\u4FA7\u9879\u76EE\u7C7B\u578B\n */\nexport interface GlobalRightItem {\n  key: RightItemKey | string;\n  group?: string;\n  component: React.ReactNode;\n}\n\n/**\n * \u63D2\u5165\u9879\u76EE\u7C7B\u578B\n */\ninterface InsertItem extends Omit<GlobalRightItem, 'key'> {\n  key: string;\n  index: number;\n}\n\n/**\n * \u5168\u5C40\u5934\u90E8\u7EC4\u4EF6\u7C7B\u578B\n */\nexport interface GlobalHeaderProps {\n  /** \u73AF\u5883\u6807\u7B7E\u989C\u8272 */\n  ENVTagColor?: EnvTagColorType;\n  /** \u66FF\u6362item */\n  replaceItems?: GlobalRightItem[];\n  /** \u63D2\u5165item */\n  insertItems?: InsertItem[];\n}\n";
+export var GlobalHeaderTypes = "\n/**\n * \u73AF\u5883\u6807\u7B7E\u989C\u8272\u7C7B\u578B\n */\ntype EnvTagColorType = Record<string, string>;\n\n/**\n * \u53F3\u4FA7\u9879\u76EE\u7C7B\u578B\n */\nexport type RightItemKey =\n  | 'AuthDropdown'\n  | 'HeaderSearch'\n  | 'Website'\n  | 'helpDocs'\n  | 'Full'\n  | 'more'\n  | 'AvatarDropdown'\n  | 'REACT_APP_ENV'\n  | 'MySelectLang'\n  | 'ThemeSwitch';\n\n/**\n * \u53F3\u4FA7\u9879\u76EE\u7C7B\u578B\n */\nexport interface GlobalRightItem {\n  key: RightItemKey | string;\n  group?: string;\n  component: React.ReactNode;\n}\n\n/**\n * \u63D2\u5165\u9879\u76EE\u7C7B\u578B\n */\ninterface InsertItem extends Omit<GlobalRightItem, 'key'> {\n  key: string;\n  index: number;\n}\n\n/**\n * \u5168\u5C40\u5934\u90E8\u7EC4\u4EF6\u7C7B\u578B\n */\nexport interface GlobalHeaderProps {\n  /** \u73AF\u5883\u6807\u7B7E\u989C\u8272 */\n  ENVTagColor?: EnvTagColorType;\n  /** \u66FF\u6362item */\n  replaceItems?: GlobalRightItem[];\n  /** \u63D2\u5165item */\n  insertItems?: InsertItem[];\n  /** \u4E3B\u9898\u5207\u6362\u7EC4\u4EF6\u5C5E\u6027 */\n  themeSwitchProps?: ThemeSwitchProps;\n}\n";

package/dist/esm/types/ThemeSwitchTypes.d.ts

@@ -1 +1 @@
-export declare const ThemeSwitchTypes = "\nexport interface ThemeSwitchProps extends SwitchProps {\n  /**\n   * \u5207\u6362\u4E3B\u9898\u89E6\u53D1\n   * @param darkMode \u662F\u5426\u9ED1\u6697\u4E3B\u9898\n   * @returns\n   */\n  onThemeChange?: (darkMode: boolean) => void;\n}\n";
+export declare const ThemeSwitchTypes = "\nimport {\n  type DynamicThemeFix,\n} from '@umijs/ssr-darkreader';\n \nexport interface ThemeSwitchProps extends SwitchProps {\n  /** \u52A8\u6001\u4E3B\u9898\u4FEE\u590D */\n  dynamicThemeFix?: Partial<DynamicThemeFix>;\n  /**\n   * \u5207\u6362\u4E3B\u9898\u89E6\u53D1\n   * @param darkMode \u662F\u5426\u9ED1\u6697\u4E3B\u9898\n   * @returns\n   */\n  onThemeChange?: (darkMode: boolean) => void;\n}\n";

package/dist/esm/types/ThemeSwitchTypes.js

@@ -1 +1 @@
-export var ThemeSwitchTypes = "\nexport interface ThemeSwitchProps extends SwitchProps {\n  /**\n   * \u5207\u6362\u4E3B\u9898\u89E6\u53D1\n   * @param darkMode \u662F\u5426\u9ED1\u6697\u4E3B\u9898\n   * @returns\n   */\n  onThemeChange?: (darkMode: boolean) => void;\n}\n";
+export var ThemeSwitchTypes = "\nimport {\n  type DynamicThemeFix,\n} from '@umijs/ssr-darkreader';\n \nexport interface ThemeSwitchProps extends SwitchProps {\n  /** \u52A8\u6001\u4E3B\u9898\u4FEE\u590D */\n  dynamicThemeFix?: Partial<DynamicThemeFix>;\n  /**\n   * \u5207\u6362\u4E3B\u9898\u89E6\u53D1\n   * @param darkMode \u662F\u5426\u9ED1\u6697\u4E3B\u9898\n   * @returns\n   */\n  onThemeChange?: (darkMode: boolean) => void;\n}\n";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cfmm/umi-plugins-ui-v2",
   "author": "ysj <411367308@qq.com>",
-  "version": "0.0.30",
+  "version": "0.0.32",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",
   "publishConfig": {