plain-design 1.0.0-beta.6 → 1.0.0-beta.61

package/src/packages/components/Application/theme/theme.ts

@@ -1,260 +1,282 @@
-import {ThemeColorNum, tThemeColorNum} from "./theme.utils";
-import {DeepPartial} from "../../../utils/type";
-import {darken, lighter} from "../../../utils/color.utils";
-import {clearFields} from "../../../utils/clearFields";
-
-/*默认的基础色*/
-export const BaseColors = {
-  gray: '',
-  secondary: '',
-  primary: '#452feb',
-  success: '#00b42a',
-  warn: '#ff7d00',
-  error: '#f53f3f',
-};
-
-/*基础的灰色*/
-export const BaseGrayColors = {
-  'gray-1': '#fbfbfc',
-  'gray-2': '#f2f3f5',
-  'gray-3': '#e1e2e7',
-  'gray-4': '#c9cdd4',
-  'gray-5': '#a9aeb8',
-  'gray-6': '#86909c',
-  'gray-7': '#6b7785',
-  'gray-8': '#464f5e',
-  'gray-9': '#272e3b',
-  'gray-10': '#1d2129',
-};
-
-/**
- * 生成gray颜色
- * @author  韦胜健
- * @date    2022.5.14 13:08
- * @param   dark  是否为黑色主题
- * @param   light 是否为轻色
- */
-const createGrayColors = (dark: boolean, light: boolean) => {
-  const colors: any = {};
-  if (!dark && !light) {return { ...BaseGrayColors };}
-  const getName = (index: number) => light ? `gray-light-${index}` : `gray-${index}`;
-
-  if (dark) {
-    ThemeColorNum.forEach(i => {
-      colors[getName(i)] = (BaseGrayColors as any)[`gray-${ThemeColorNum.length + 1 - i}`];
-    });
-  } else {
-    ThemeColorNum.forEach(i => {
-      colors[getName(i)] = (BaseGrayColors as any)[`gray-${i}`];
-    });
-  }
-  /*if (light) {
-    ThemeColorNum.forEach(i => {
-      if (i === ThemeColorNum.length) {
-        colors[getName(i)] = dark ? '#ffffff' : '#131313';
-      } else {
-        colors[getName(i)] = colors[getName(i + 1)];
-      }
-    });
-  }*/
-
-  return colors;
-};
-
-/*其他主题变量*/
-function createOtherVars(prefix: string | null, referenceVariable: (name: string) => string) {
-
-
-  return {
-    /*---------------------------------------base-------------------------------------------*/
-    'font-family': "Inter,-apple-system,BlinkMacSystemFont,PingFang SC,Hiragino Sans GB,noto sans,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif",
-    'scrollbar-size': '9px',
-    'border-color': "rgba(0, 0, 0, .06)",
-    'background-color': "#ffffff",
-    'background-lite': "#ffffff",
-    'background-hover': referenceVariable("gray-2"),
-    'scrollbar-color': referenceVariable("gray-3"),
-    'loading-mask-color': 'rgba(255,255,255,0.5)',
-
-    'font-size-mini': '12px',
-    'font-size-small': '12px',
-    'font-size-normal': '14px',
-    'font-size-large': '16px',
-
-    /*---------------------------------------text-------------------------------------------*/
-    'text-1': 'rgba(0,0,0,0.85)',
-    'text-2': 'rgba(0,0,0,0.65)',
-    'text-3': 'rgba(0,0,0,0.45)',
-    'text-4': 'rgba(0,0,0,0.25)',
-    'text-placeholder': 'rgba(0,0,0,0.35)',
-    /*---------------------------------------margin-------------------------------------------*/
-    /*height of sizes*/
-    'margin-mini': '12px',
-    'margin-small': '12px',
-    'margin-normal': '16px',
-    'margin-large': '16px',
-    /*---------------------------------------box-------------------------------------------*/
-    /*min-width of sizes*/
-    'box-size-mini-min-width': '',
-    'box-size-small-min-width': '',
-    'box-size-normal-min-width': '68px',
-    'box-size-large-min-width': '88px',
-    /*height of sizes*/
-    'box-size-mini-height': '24px',
-    'box-size-small-height': '28px',
-    'box-size-normal-height': '32px',
-    'box-size-large-height': '36px',
-    /*padding x of sizes*/
-    'box-size-mini-padding': '0 11px',
-    'box-size-small-padding': '0 15px',
-    'box-size-normal-padding': '0 15px',
-    'box-size-large-padding': '0 19px',
-    /*font size of sizes*/
-    'box-size-mini-font-size': referenceVariable('font-size-mini'),
-    'box-size-small-font-size': referenceVariable('font-size-small'),
-    'box-size-normal-font-size': referenceVariable('font-size-normal'),
-    'box-size-large-font-size': referenceVariable('font-size-normal'),
-    /*border radius of sizes*/
-    'box-size-mini-border-radius': '2px',
-    'box-size-small-border-radius': '2px',
-    'box-size-normal-border-radius': '2px',
-    'box-size-large-border-radius': '2px',
-    /*---------------------------------------input-------------------------------------------*/
-    'input-padding-x': '11px',
-    /*---------------------------------------dialog-------------------------------------------*/
-    'dialog-mask-color': 'rgba(0,0,0,0.3)',
-    'dialog-head-padding-x': '20px',
-    'dialog-body-padding': '16px 20px',
-    'dialog-foot-padding': '8px 16px',
-    'dialog-head-size': '48px',
-    /*---------------------------------------message-------------------------------------------*/
-    'message-padding': '12px 20px',
-    'message-box-shadow': '0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05)',
-    'message-font-size': referenceVariable('font-size-normal'),
-    /*---------------------------------------notice-------------------------------------------*/
-    'notice-padding': '20px 24px',
-    'notice-box-shadow': '0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05)',
-    'notice-width': '332px',
-    'notice-max-width': 'calc(100vw / 3)',
-    'notice-space': '16px',
-    'notice-title-font-size': referenceVariable('font-size-normal'),
-    'notice-title-padding': '8px 0',
-    'notice-content-font-size': referenceVariable('font-size-small'),
-    /*---------------------------------------popper-------------------------------------------*/
-    'popper-size-mini-padding-x': '10px',
-    'popper-size-mini-padding-y': '5px',
-    'popper-size-mini-font-size': referenceVariable('font-size-mini'),
-    'popper-size-small-padding-x': '10px',
-    'popper-size-small-padding-y': '5px',
-    'popper-size-small-font-size': referenceVariable('font-size-small'),
-    'popper-size-normal-padding-x': '12px',
-    'popper-size-normal-padding-y': '5px',
-    'popper-size-normal-font-size': referenceVariable('font-size-normal'),
-    'popper-size-large-padding-x': '12px',
-    'popper-size-large-padding-y': '5px',
-    'popper-size-large-font-size': referenceVariable('font-size-normal'),
-    /*---------------------------------------dropdown-------------------------------------------*/
-    'dropdown-size-mini-padding-x': '10px',
-    'dropdown-size-mini-padding-y': '4px',
-    'dropdown-size-small-padding-x': '10px',
-    'dropdown-size-small-padding-y': '6px',
-    'dropdown-size-normal-padding-x': '10px',
-    'dropdown-size-normal-padding-y': '6px',
-    'dropdown-size-large-padding-x': '10px',
-    'dropdown-size-large-padding-y': '6px',
-    /*---------------------------------------input-------------------------------------------*/
-    'input-clear-size-mini': '16px',
-    'input-clear-size-small': '16px',
-    'input-clear-size-normal': '20px',
-    'input-clear-size-large': '20px',
-    /*---------------------------------------tag-------------------------------------------*/
-    'tag-size-mini-height': '20px',
-    'tag-size-small-height': '22px',
-    'tag-size-normal-height': '24px',
-    'tag-size-large-height': '26px',
-    /*---------------------------------------table-------------------------------------------*/
-    'table-head-background': '#ffffff',
-    'table-summary-background': '#fafafa',
-    'table-head-background-hover': '#f0f0f0',
-    'table-border-color': '#f0f0f0',
-    'table-row-hover-color': '#fafafa',
-    'table-row-current-color': '#fafafa',
-  };
-}
-
-/*基础色*/
-type iThemeBaseColors = keyof typeof BaseColors
-/*其他主题变量*/
-type iThemeOtherVars = keyof ReturnType<typeof createOtherVars>
-/*基础色衍生的变量*/
-type tGenerateBaseColorList<color extends string> = tThemeColorNum extends number ? `${color}-${tThemeColorNum}` | `${color}-light-${tThemeColorNum}` : never
-
-/*主题配置对象类型，结果值，所有都会有值*/
-export interface iThemeConfiguration {
-  dark: boolean,
-  base: Record<iThemeBaseColors, string>,
-  vars: Record<tGenerateBaseColorList<iThemeBaseColors> | iThemeOtherVars, string>,
-}
-
-export function createThemeConfigurationData(prefix: string | null, config?: DeepPartial<iThemeConfiguration>): iThemeConfiguration {
-  const dark = config?.dark == undefined ? false : config.dark;
-  const base = { ...BaseColors, ...clearFields(config?.base) };
-  const referenceVariable = (varName: string): string => `var(--${!!prefix ? prefix + '-' : ''}${varName})`;
-
-  const baseColorList: Record<tGenerateBaseColorList<iThemeBaseColors>, string> = (() => {
-    const colors = {} as any;
-    Object.keys(BaseColors).forEach((colorName) => {
-      const baseColor = (base as any)[colorName];
-      if (!baseColor) {return;}
-      ThemeColorNum.forEach(i => {
-        const colorIndex = i;
-        const fun = dark ? darken : lighter;
-        colors[`${colorName}-${i}`] = fun(baseColor, colorIndex);
-        colors[`${colorName}-light-${i}`] = fun(baseColor, colorIndex - 1);
-      });
-    });
-    return colors;
-  })();
-  const secondaryColorList = (() => {
-    const colors: any = {};
-    ThemeColorNum.forEach(i => {
-      colors[`secondary-${i}`] = referenceVariable(`gray-${i}`);
-      colors[`secondary-light-${i}`] = referenceVariable(`gray-light-${i}`);
-    });
-    return colors;
-  })();
-  return {
-    dark,
-    base,
-    vars: {
-      ...baseColorList,
-      ...createOtherVars(prefix, referenceVariable),
-      ...secondaryColorList,
-      ...createGrayColors(dark, false),
-      ...createGrayColors(dark, true),
-      ...dark ? {
-        'background-hover': '#3c3c4d',
-        'scrollbar-color': '#141414',
-
-        'border-color': "#333335",
-        "background-color": '#17171a',
-        "background-lite": '#171922',
-        'loading-mask-color': 'rgba(0,0,0,0.5)',
-        'text-1': 'rgba(255,255,255,0.85)',
-        'text-2': 'rgba(255,255,255,0.65)',
-        'text-3': 'rgba(255,255,255,0.45)',
-        'text-4': 'rgba(255,255,255,0.25)',
-        'text-placeholder': 'rgba(255,255,255,0.35)',
-        'dialog-mask-color': 'rgba(0,0,0,0.75)',
-        // 'table-head-background': '#252527',
-        'table-head-background': referenceVariable('background-color'),
-        'table-head-background-hover': '#29292c',
-        'table-summary-background': '#252527',
-        'table-border-color': '#29292c',
-        'table-row-hover-color': '#1c1f26',
-        'table-row-current-color': '#1c1f26',
-      } : {},
-      ...clearFields(config?.vars),
-    },
-  };
-}
+import {ThemeColorNum, tThemeColorNum} from "./theme.utils";
+import {DeepPartial} from "../../../utils/type";
+import {darken, lighter} from "../../../utils/color.utils";
+import {clearFields} from "../../../utils/clearFields";
+
+/*默认的基础色*/
+export const BaseColors = {
+  dark: {
+    gray: '',
+    secondary: '',
+    primary: '#5e53ff',
+    success: '#00b42a',
+    warn: '#ff7d00',
+    error: '#f53f3f',
+  },
+  light: {
+    gray: '',
+    secondary: '',
+    primary: '#452feb',
+    success: '#00b42a',
+    warn: '#ff7d00',
+    error: '#f53f3f',
+  },
+};
+
+/*基础的灰色*/
+export const BaseGrayColors = {
+  'gray-1': '#fbfbfc',
+  'gray-2': '#f2f3f5',
+  'gray-3': '#e1e2e7',
+  'gray-4': '#c9cdd4',
+  'gray-5': '#a9aeb8',
+  'gray-6': '#86909c',
+  'gray-7': '#6b7785',
+  'gray-8': '#464f5e',
+  'gray-9': '#272e3b',
+  'gray-10': '#1d2129',
+};
+
+/**
+ * 生成gray颜色
+ * @author  韦胜健
+ * @date    2022.5.14 13:08
+ * @param   dark  是否为黑色主题
+ * @param   light 是否为轻色
+ */
+const createGrayColors = (dark: boolean, light: boolean) => {
+  const colors: any = {};
+  if (!dark && !light) {return { ...BaseGrayColors };}
+  const getName = (index: number) => light ? `gray-light-${index}` : `gray-${index}`;
+
+  if (dark) {
+    ThemeColorNum.forEach(i => {
+      colors[getName(i)] = (BaseGrayColors as any)[`gray-${ThemeColorNum.length + 1 - i}`];
+    });
+  } else {
+    ThemeColorNum.forEach(i => {
+      colors[getName(i)] = (BaseGrayColors as any)[`gray-${i}`];
+    });
+  }
+  /*if (light) {
+    ThemeColorNum.forEach(i => {
+      if (i === ThemeColorNum.length) {
+        colors[getName(i)] = dark ? '#ffffff' : '#131313';
+      } else {
+        colors[getName(i)] = colors[getName(i + 1)];
+      }
+    });
+  }*/
+
+  return colors;
+};
+
+/*其他主题变量*/
+function createOtherVars(prefix: string | null, referenceVariable: (name: string) => string) {
+
+
+  return {
+    /*---------------------------------------base-------------------------------------------*/
+    'font-family': `v-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
+    'scrollbar-size': '9px',
+    'border-color': "rgba(0, 0, 0, .06)",
+    'background-color': "#ffffff",
+    'background-lite': "#ffffff",
+    'background-hover': referenceVariable("gray-2"),
+    'scrollbar-color': referenceVariable("gray-3"),
+    'loading-mask-color': 'rgba(255,255,255,0.5)',
+    'line-height': '1.5715',
+
+    'font-size-mini': '12px',
+    'font-size-small': '12px',
+    'font-size-normal': '14px',
+    'font-size-large': '16px',
+
+    /*---------------------------------------text-------------------------------------------*/
+    'text-1': 'rgba(0,0,0,0.85)',
+    'text-2': 'rgba(0,0,0,0.65)',
+    'text-3': 'rgba(0,0,0,0.45)',
+    'text-4': 'rgba(0,0,0,0.25)',
+    'text-placeholder': 'rgba(0,0,0,0.35)',
+    /*---------------------------------------background-color-------------------------------------------*/
+    'bg-1': '#f2f3f5',
+    'bg-2': '#FFFFFF',
+    'bg-3': '#FFFFFF',
+    'bg-4': '#FFFFFF',
+    /*---------------------------------------margin-------------------------------------------*/
+    /*height of sizes*/
+    'margin-mini': '8px',
+    'margin-small': '12px',
+    'margin-normal': '16px',
+    'margin-large': '20px',
+    /*---------------------------------------box-------------------------------------------*/
+    /*min-width of sizes*/
+    'box-size-mini-min-width': '',
+    'box-size-small-min-width': '',
+    'box-size-normal-min-width': '68px',
+    'box-size-large-min-width': '88px',
+    /*height of sizes*/
+    'box-size-mini-height': '26px',
+    'box-size-small-height': '30px',
+    'box-size-normal-height': '34px',
+    'box-size-large-height': '40px',
+    /*padding x of sizes*/
+    'box-size-mini-padding': '0 11px',
+    'box-size-small-padding': '0 15px',
+    'box-size-normal-padding': '0 15px',
+    'box-size-large-padding': '0 19px',
+    /*font size of sizes*/
+    'box-size-mini-font-size': referenceVariable('font-size-mini'),
+    'box-size-small-font-size': referenceVariable('font-size-small'),
+    'box-size-normal-font-size': referenceVariable('font-size-normal'),
+    'box-size-large-font-size': referenceVariable('font-size-normal'),
+    /*border radius of sizes*/
+    'box-size-mini-border-radius': '2px',
+    'box-size-small-border-radius': '4px',
+    'box-size-normal-border-radius': '6px',
+    'box-size-large-border-radius': '8px',
+    /*---------------------------------------input-------------------------------------------*/
+    'input-padding-x-mini': '9px',
+    'input-padding-x-small': '11px',
+    'input-padding-x-normal': '13px',
+    'input-padding-x-large': '15px',
+
+    'input-clear-size-mini': '16px',
+    'input-clear-size-small': '18px',
+    'input-clear-size-normal': '21px',
+    'input-clear-size-large': '23px',
+    /*---------------------------------------dialog-------------------------------------------*/
+    'dialog-mask-color': 'rgba(0,0,0,0.3)',
+    'dialog-head-padding-x': '16px',
+    'dialog-body-padding': '16px 16px',
+    'dialog-foot-padding': '8px 16px',
+    'dialog-head-size': '48px',
+    /*---------------------------------------message-------------------------------------------*/
+    'message-box-shadow': '0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05)',
+    /*---------------------------------------notice-------------------------------------------*/
+    'notice-padding': '20px 24px',
+    'notice-box-shadow': '0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05)',
+    'notice-width': '332px',
+    'notice-max-width': 'calc(100vw / 3)',
+    'notice-space': '16px',
+    'notice-title-font-size': referenceVariable('font-size-normal'),
+    'notice-title-padding': '8px 0',
+    'notice-content-font-size': referenceVariable('font-size-small'),
+    /*---------------------------------------popper-------------------------------------------*/
+    'popper-size-mini-padding-x': '10px',
+    'popper-size-mini-padding-y': '5px',
+    'popper-size-mini-font-size': referenceVariable('font-size-mini'),
+    'popper-size-small-padding-x': '10px',
+    'popper-size-small-padding-y': '5px',
+    'popper-size-small-font-size': referenceVariable('font-size-small'),
+    'popper-size-normal-padding-x': '12px',
+    'popper-size-normal-padding-y': '5px',
+    'popper-size-normal-font-size': referenceVariable('font-size-normal'),
+    'popper-size-large-padding-x': '12px',
+    'popper-size-large-padding-y': '5px',
+    'popper-size-large-font-size': referenceVariable('font-size-normal'),
+    /*---------------------------------------dropdown-------------------------------------------*/
+    'dropdown-size-mini-padding-x': '10px',
+    'dropdown-size-mini-padding-y': '4px',
+    'dropdown-size-small-padding-x': '10px',
+    'dropdown-size-small-padding-y': '6px',
+    'dropdown-size-normal-padding-x': '10px',
+    'dropdown-size-normal-padding-y': '6px',
+    'dropdown-size-large-padding-x': '10px',
+    'dropdown-size-large-padding-y': '6px',
+    /*---------------------------------------tag-------------------------------------------*/
+    'tag-size-mini-height': '20px',
+    'tag-size-small-height': '22px',
+    'tag-size-normal-height': '24px',
+    'tag-size-large-height': '26px',
+    /*---------------------------------------table-------------------------------------------*/
+    'table-head-background': '#ffffff',
+    'table-summary-background': '#fafafa',
+    'table-head-background-hover': '#f0f0f0',
+    'table-border-color': '#f0f0f0',
+    'table-row-hover-color': '#fafafa',
+    'table-row-current-color': '#fafafa',
+  };
+}
+
+/*基础色*/
+type iThemeBaseColors = keyof typeof BaseColors.dark
+/*其他主题变量*/
+type iThemeOtherVars = keyof ReturnType<typeof createOtherVars>
+/*基础色衍生的变量*/
+type tGenerateBaseColorList<color extends string> = tThemeColorNum extends number ? `${color}-${tThemeColorNum}` | `${color}-light-${tThemeColorNum}` : never
+
+/*主题配置对象类型，结果值，所有都会有值*/
+export interface iThemeConfiguration {
+  dark: boolean,
+  base: Record<iThemeBaseColors, string>,
+  vars: Record<tGenerateBaseColorList<iThemeBaseColors> | iThemeOtherVars, string>,
+}
+
+export function createThemeConfigurationData(prefix: string | null, config?: DeepPartial<iThemeConfiguration>): iThemeConfiguration {
+  const dark = config?.dark == undefined ? false : config.dark;
+  const base = { ...dark ? BaseColors.dark : BaseColors.light, ...clearFields(config?.base) };
+  const referenceVariable = (varName: string): string => `var(--${!!prefix ? prefix + '-' : ''}${varName})`;
+
+  const baseColorList: Record<tGenerateBaseColorList<iThemeBaseColors>, string> = (() => {
+    const colors = {} as any;
+    Object.keys(base).forEach((colorName) => {
+      const baseColor = (base as any)[colorName];
+      if (!baseColor) {return;}
+      ThemeColorNum.forEach(i => {
+        const colorIndex = i;
+        const fun = dark ? darken : lighter;
+        colors[`${colorName}-${i}`] = fun(baseColor, colorIndex);
+        colors[`${colorName}-light-${i}`] = fun(baseColor, colorIndex - 1);
+      });
+    });
+    return colors;
+  })();
+  const secondaryColorList = (() => {
+    const colors: any = {};
+    ThemeColorNum.forEach(i => {
+      colors[`secondary-${i}`] = referenceVariable(`gray-${i}`);
+      colors[`secondary-light-${i}`] = referenceVariable(`gray-light-${i}`);
+    });
+    return colors;
+  })();
+  return {
+    dark,
+    base,
+    vars: {
+      ...baseColorList,
+      ...createOtherVars(prefix, referenceVariable),
+      ...secondaryColorList,
+      ...createGrayColors(dark, false),
+      ...createGrayColors(dark, true),
+      ...base.primary.toLowerCase() === '#ffffff' ? { 'pbfc': 'black' } : { 'pbfc': 'white' },
+      ...dark ? {
+        'background-hover': '#3c3c4d',
+        'scrollbar-color': '#141414',
+
+        'border-color': "#333335",
+        "background-color": '#17171a',
+        "background-lite": '#171922',
+        'loading-mask-color': 'rgba(0,0,0,0.5)',
+        'text-1': 'rgba(255,255,255,0.85)',
+        'text-2': 'rgba(255,255,255,0.65)',
+        'text-3': 'rgba(255,255,255,0.45)',
+        'text-4': 'rgba(255,255,255,0.25)',
+        'bg-1': '#101014',
+        'bg-2': '#18181c',
+        'bg-3': '#18181c',
+        'bg-4': '#242429',
+        'text-placeholder': 'rgba(255,255,255,0.35)',
+        'dialog-mask-color': 'rgba(0,0,0,0.75)',
+        // 'table-head-background': '#252527',
+        'table-head-background': referenceVariable('background-color'),
+        'table-head-background-hover': '#29292c',
+        'table-summary-background': '#252527',
+        'table-border-color': '#29292c',
+        'table-row-hover-color': '#1c1f26',
+        'table-row-current-color': '#1c1f26',
+      } : {},
+      ...clearFields(config?.vars),
+    },
+  };
+}

package/src/packages/components/Application/theme/theme.utils.ts

@@ -1,17 +1,17 @@
-import {ThemeStatus} from "../../../uses/useStyle";
-
-/**
- * 基于基础色派生的颜色个数
- * @author  韦胜健
- * @date    2022.4.25 11:15
- */
-export const ThemeColorNum = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] as const;
-export type tThemeColorNum = (typeof ThemeColorNum)[number]
-
-export const ThemeStatusIcons: Record<typeof ThemeStatus.TYPE, string> = {
-  primary: 'pi-info-circle-fill',
-  secondary: 'pi-info-circle-fill',
-  success: 'pi-check-circle-fill',
-  warn: 'pi-exclamation-circle-fill',
-  error: 'pi-close-circle-fill',
-};
+import {ThemeStatus} from "../../../uses/useStyle";
+
+/**
+ * 基于基础色派生的颜色个数
+ * @author  韦胜健
+ * @date    2022.4.25 11:15
+ */
+export const ThemeColorNum = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] as const;
+export type tThemeColorNum = (typeof ThemeColorNum)[number]
+
+export const ThemeStatusIcons: Record<typeof ThemeStatus.TYPE, string> = {
+  primary: 'pi-info-circle-fill',
+  secondary: 'pi-info-circle-fill',
+  success: 'pi-check-circle-fill',
+  warn: 'pi-exclamation-circle-fill',
+  error: 'pi-close-circle-fill',
+};