@oinone/kunlun-theme 6.3.1 → 6.4.0

package/src/style/default-minimalism/drawer/drawer.ts

@@ -0,0 +1,10 @@
+export const component = 'drawer';
+
+export const cssVars = {
+  'width-small': '20%',
+  'width-medium': '40%',
+  'width-large': '80%',
+  'height-small': '40vh',
+  'height-medium': '60vh',
+  'height-large': '90vh'
+};

package/src/style/default-minimalism/dropdown/index.ts

@@ -0,0 +1,18 @@
+import { DEFAULT_PREFIX } from '../../../mount';
+
+export const component = 'dropdown';
+
+export const cssVars = {
+  'background-color': 'var(--oio-background)',
+  'background-hover': `var(--${DEFAULT_PREFIX}-hover-background-color)`,
+  'border-color': 'var(--oio-border-color)',
+  'box-shadow': '-2px 2px 6px 0px rgba(136, 156, 176, 0.2)',
+  color: 'var(--oio-text-color)',
+  'color-hover': `var(--${DEFAULT_PREFIX}-text-color-secondary)`,
+  'color-disabled': 'var(--oio-disabled-color)',
+  'color-disabled-hover': 'var(--oio-disabled-color)',
+
+  'item-background-color-hover': 'var(--oio-hover-background-color)',
+  'item-background-color-disabled-hover': 'transparent',
+  'button-text-color': `var(--${DEFAULT_PREFIX}-text-color-secondary)`
+};

package/src/style/default-minimalism/form-item/form-item.ts

@@ -0,0 +1,12 @@
+export const component = 'form-item';
+
+export const cssVars = {
+  config: {
+    // 只读模式展示占位符
+    readonlyShowPlaceholder: false,
+    // 禁用模式展示占位符
+    disabledShowPlaceholder: false
+  },
+  'label-color': 'var(--oio-text-color-secondary)',
+  'label-weight': '0'
+};

package/src/style/default-minimalism/header/header.ts

@@ -0,0 +1,6 @@
+export const component = 'header';
+
+export const cssVars = {
+  'border-bottom': `1px solid rgba(0, 0, 0, 0.06)`,
+  color: 'rgba(0,0,0,0.65)'
+};

package/src/style/default-minimalism/index.ts

@@ -0,0 +1 @@
+export * from './registry';

package/src/style/default-minimalism/input/input.ts

@@ -0,0 +1,48 @@
+import { DEFAULT_PREFIX } from '../../../mount';
+
+export const component = 'input';
+const prefix = `${DEFAULT_PREFIX}-${component}`;
+
+export const cssVars = {
+  // default
+  background: '#ffffff',
+  'background-color': '#ffffff',
+  'border-style': `var(--${DEFAULT_PREFIX}-border-style)`,
+  'border-color': `var(--${DEFAULT_PREFIX}-border-color)`,
+  outline: 'none',
+  shadow: 'none',
+  'text-color': `var(--${DEFAULT_PREFIX}-text-color)`,
+  'counter-background': '#ffffff',
+  'counter-color': 'rgba(0, 0, 0, 0.25)',
+  // default-hover
+  'background-hover': `var(--${prefix}-background)`,
+  'border-width-hover': `var(--${prefix}-border-width)`,
+  'border-style-hover': `var(--${prefix}-border-style)`,
+  'border-color-hover': `var(--${DEFAULT_PREFIX}-primary-color-hover)`,
+  'border-radius-hover': `var(--${prefix}-border-radius)`,
+  'outline-hover': `var(--${prefix}-outline)`,
+  'shadow-hover': `var(--${prefix}-shadow)`,
+  'text-color-hover': `var(--${prefix}-text-color)`,
+  // default-focus
+  'background-focus': `var(--${prefix}-background)`,
+  'border-width-focus': `var(--${prefix}-border-width)`,
+  'border-style-focus': `var(--${prefix}-border-style)`,
+  'border-color-focus': `var(--${DEFAULT_PREFIX}-primary-color-focus)`,
+  'border-radius-focus': `var(--${prefix}-border-radius)`,
+  'outline-focus': `var(--${prefix}-outline)`,
+  'shadow-focus': `0px 0px 0px 2px rgba(var(--${DEFAULT_PREFIX}-primary-color-rgb),0.1);`,
+  'text-color-focus': `var(--${prefix}-text-color)`,
+  // readonly
+  'readonly-border-color': `var(--${DEFAULT_PREFIX}-readonly-border-color)`,
+  'error-border-color': '#ff4d4f',
+  // disabled
+  'disabled-border-color': `var(--${DEFAULT_PREFIX}-disabled-border-color)`,
+
+  'addon-background': '#F7F7F7',
+  'addon-color': ' rgba(0,0,0,0.65)',
+  'tag-background': 'rgba(3,93,255, 0.1)',
+  'ready-delete-tag-background': 'rgba(224, 32, 32, 0.1)',
+  'ready-delete-tag-color': '#ff4d4f',
+  'clear-background': '#fff',
+  'clear-color': 'rgba(0,0,0,.25)'
+};

package/src/style/default-minimalism/menu/menu.ts

@@ -0,0 +1,7 @@
+import { getMenuColorVarsByTheme } from '../../../color';
+
+export const component = 'menu';
+
+export const cssVars = () => {
+  return getMenuColorVarsByTheme();
+};

package/src/style/default-minimalism/modal/modal.ts

@@ -0,0 +1,11 @@
+export const component = 'modal';
+
+export const cssVars = {
+  color: 'rgba(0, 0, 0, 0.85)',
+  'width-small': '560px',
+  'width-medium': '890px',
+  'width-large': '1200px',
+  'height-small': '40vh',
+  'height-medium': '60vh',
+  'height-large': '90vh'
+};

package/src/style/default-minimalism/multi-tab/multi-tab.ts

@@ -0,0 +1,67 @@
+import { DEFAULT_PREFIX } from '../../../mount';
+
+export const component = 'multi-tabs';
+
+export const cssVars = {
+  /**
+   * 标准样式
+   */
+  background: '#e9e9e9',
+  color: `var(--${DEFAULT_PREFIX}-text-color-secondary)`,
+  'active-color': `var(--${DEFAULT_PREFIX}-primary-color)`,
+  'active-font-weight': 500,
+  'active-background': '#ffffff',
+  'icon-color': 'rgba(0, 0, 0, 0.3)',
+  'hover-background-color': '#f6f6f6',
+
+  /**
+   * 内联样式
+   */
+  'background-color-inline': '#ffffff',
+  'color-inline': `var(--${DEFAULT_PREFIX}-text-color)`,
+  'active-color-inline': `var(--${DEFAULT_PREFIX}-primary-color)`,
+  'active-background-color-inline': `var(--${DEFAULT_PREFIX}-body-background)`,
+  'hover-background-color-inline': `var(--${DEFAULT_PREFIX}-body-background)`,
+
+  /**
+   * theme1
+   */
+  'background-color-theme1': '#f6f6f6',
+  'background-color-active-theme1': '#ffffff',
+  'border-color-theme1': '#e2e6e9',
+
+  /**
+   * theme1 inline
+   */
+  'background-color-theme1-inline': '#ffffff',
+  'background-color-active-theme1-inline': `rgba(var(--${DEFAULT_PREFIX}-primary-color-rgb), 0.2)`,
+  'active-color-active-theme1-inline': `var(--${DEFAULT_PREFIX}-primary-color)`,
+  'icon-color-active-theme1-inline': `var(--${DEFAULT_PREFIX}-multi-tabs-icon-color)`,
+
+  /**
+   * theme2
+   */
+  'background-color-theme2': '#ffffff',
+  'border-color-theme2': '#e2e6e9',
+
+  /**
+   * theme3
+   */
+  'background-color-theme3': '#f6f6f6',
+  'background-color-active-theme3': `rgba(var(--${DEFAULT_PREFIX}-primary-color-rgb), 0.2)`,
+  'active-color-active-theme3': `var(--${DEFAULT_PREFIX}-primary-color)`,
+  'icon-color-active-theme3': `var(--${DEFAULT_PREFIX}-multi-tabs-icon-color)`,
+
+  /**
+   * theme3 inline
+   */
+  'background-color-theme3-inline': '#ffffff',
+
+  /**
+   * theme4 inline
+   */
+  'background-color-theme4-inline': '#ffffff',
+  'background-color-active-theme4-inline': `rgba(var(--${DEFAULT_PREFIX}-primary-color-rgb), 0.2)`,
+  'active-color-active-theme4-inline': `var(--${DEFAULT_PREFIX}-primary-color)`,
+  'icon-color-active-theme4-inline': `var(--${DEFAULT_PREFIX}-multi-tabs-icon-color)`
+};

package/src/style/default-minimalism/pagination/pagination.ts

@@ -0,0 +1,15 @@
+import { DEFAULT_PREFIX } from '../../../mount';
+
+export const component = 'pagination';
+
+export const cssVars = {
+  background: `var(--${DEFAULT_PREFIX}-background)`,
+  'border-color': `none`,
+  'text-color': `var(--${DEFAULT_PREFIX}-text-color)`,
+  'background-active': '#fff',
+  'border-color-active': `var(--${DEFAULT_PREFIX}-primary-color)`,
+  'text-color-active': `var(--${DEFAULT_PREFIX}-primary-color)`,
+  'background-hover': `var(--${DEFAULT_PREFIX}-primary-color-hover)`,
+  'border-color-hover': '#fff',
+  'text-color-hover': '#fff'
+};

package/src/style/default-minimalism/popconfirm/popconfirm.ts

@@ -0,0 +1,8 @@
+export const component = 'popconfirm';
+
+export const cssVars = {
+  background: 'var(--oio-background)',
+  color: 'var(--oio-text-color)',
+  borderColor: 'var(--oio-border-color)',
+  arrowBackground: 'ar(--oio-background)'
+};

package/src/style/default-minimalism/registry.ts

@@ -0,0 +1,63 @@
+import { registerTheme } from '../../register';
+import { ThemeSize } from '../../typing';
+import { getComponentTheme } from './component-theme';
+
+import { defaultModernVars } from '../../color';
+import { defaultLargeSizeVars, defaultMediumSizeVars, defaultSmallSizeVars } from '../../size';
+
+function registerComponentThemeWithBase(baseCssVars) {
+  return function registerComponentTheme(
+    component: string,
+    componentCSSVars: Record<string, string | number | boolean | Record<string, unknown>>
+  ): void {
+    Object.entries(componentCSSVars).forEach(([key, value]) => {
+      baseCssVars[`${component}-${key}`] = value;
+    });
+  };
+}
+
+function registerDefaultTheme(size: ThemeSize) {
+  const defaultSizeVars =
+    // eslint-disable-next-line no-nested-ternary
+    size === 'large' ? defaultLargeSizeVars : size === 'medium' ? defaultMediumSizeVars : defaultSmallSizeVars;
+
+  const cssVars = {
+    ...defaultModernVars,
+    ...defaultSizeVars
+  };
+
+  const registerComponentTheme = registerComponentThemeWithBase(cssVars);
+
+  /**
+   * componentTheme 数据格式如下：
+   *
+   * {
+   *   input: {
+   *     large: {.....},
+   *     medium: {.....},
+   *     small: {.....},
+   *   },
+   *   button: {
+   *     large: {.....},
+   *     medium: {.....},
+   *     small: {.....},
+   *   },
+   *   .....
+   * }
+   */
+
+  const componentTheme = getComponentTheme();
+  Object.entries(componentTheme).forEach(([key, value]) => {
+    if (value[size]) {
+      registerComponentTheme(key, value[size]);
+    }
+  });
+
+  registerTheme(`default-minimalism-${size}`, cssVars);
+}
+
+export function registerDefaultModernThemeFn() {
+  registerDefaultTheme('large');
+  registerDefaultTheme('medium');
+  registerDefaultTheme('small');
+}

package/src/style/default-minimalism/rich-text/rich-text.ts

@@ -0,0 +1,25 @@
+import { DEFAULT_PREFIX } from '../../../mount';
+
+export const component = 'rich-text';
+
+export const cssVars = {
+  'textarea-bg-color': `var(--${DEFAULT_PREFIX}-background)`,
+  'textarea-color': `var(--${DEFAULT_PREFIX}-text-color)`,
+  'textarea-border-color': `var(--${DEFAULT_PREFIX}-border-color)`,
+  'textarea-slight-border-color': `var(--${DEFAULT_PREFIX}-border-color)`,
+  'textarea-slight-color': `var(--${DEFAULT_PREFIX}-text-color)`,
+  'textarea-slight-bg-color': `var(--${DEFAULT_PREFIX}-body-background)`,
+  'textarea-selected-border-color': '#b4d5ff',
+  'textarea-handler-bg-color': '#4290f7',
+  'toolbar-color': `var(--${DEFAULT_PREFIX}-select-dropdown-color)`,
+  'toolbar-bg-color': `var(--${DEFAULT_PREFIX}-select-dropdown-background)`,
+  'toolbar-active-color': `var(--${DEFAULT_PREFIX}-select-dropdown-selected-color)`,
+  'toolbar-active-bg-color': `var(--${DEFAULT_PREFIX}-select-dropdown-selected)`,
+  'toolbar-color-active-bg-color': `var(--${DEFAULT_PREFIX}-primary-color)`,
+  'toolbar-disabled-color': `var(--${DEFAULT_PREFIX}-disabled-color)`,
+  'toolbar-border-color': `var(--${DEFAULT_PREFIX}-border-color)`,
+  'modal-button-bg-color': '#fafafa',
+  'modal-button-border-color': '#d9d9d9',
+  'button-tooltip-bg-color': '#333',
+  'button-tooltip-color': '#fff'
+};

package/src/style/default-minimalism/scrollbar/scrollbar.ts

@@ -0,0 +1,6 @@
+export const component = 'scrollbar';
+
+export const cssVars = {
+  'thumb-background-color': '#d9d9d9',
+  'thumb-background-color-hover': '#cccccc'
+};

package/src/style/default-minimalism/select/select.ts

@@ -0,0 +1,51 @@
+import { DEFAULT_PREFIX } from '../../../mount';
+
+export const component = 'select';
+const prefix = `${DEFAULT_PREFIX}-${component}`;
+
+export const cssVars = {
+  // default
+  background: '#ffffff',
+  'border-width': `var(--${DEFAULT_PREFIX}-border-width)`,
+  'border-style': `var(--${DEFAULT_PREFIX}-border-style)`,
+  'border-color': `var(--${DEFAULT_PREFIX}-border-color)`,
+  'border-radius': `var(--${DEFAULT_PREFIX}-border-radius)`,
+  outline: 'none',
+  shadow: 'none',
+  'text-color': `var(--${DEFAULT_PREFIX}-text-color)`,
+  'counter-background': '#ffffff',
+  'counter-color': 'rgba(0, 0, 0, 0.25)',
+  'counter-font-size': `var(--${DEFAULT_PREFIX}-font-size-sm)`,
+  // default-hover
+  'background-hover': `var(--${prefix}-background)`,
+  'border-width-hover': `var(--${prefix}-border-width)`,
+  'border-style-hover': `var(--${prefix}-border-style)`,
+  'border-color-hover': `var(--${DEFAULT_PREFIX}-primary-color-hover)`,
+  'border-radius-hover': `var(--${prefix}-border-radius)`,
+  'outline-hover': `var(--${prefix}-outline)`,
+  'shadow-hover': `var(--${prefix}-shadow)`,
+  'text-color-hover': `var(--${prefix}-text-color)`,
+  // default-focus
+  'background-focus': `var(--${prefix}-background)`,
+  'border-width-focus': `var(--${prefix}-border-width)`,
+  'border-style-focus': `var(--${prefix}-border-style)`,
+  'border-color-focus': `var(--${DEFAULT_PREFIX}-primary-color-focus)`,
+  'border-radius-focus': `var(--${prefix}-border-radius)`,
+  'outline-focus': `var(--${prefix}-outline)`,
+  'shadow-focus': `0px 0px 0px 2px rgba(3,93,255,0.1);`,
+  'text-color-focus': `var(--${prefix}-text-color)`,
+  // readonly
+  'readonly-border-color': `var(--${DEFAULT_PREFIX}-readonly-border-color)`,
+  'item-readonly-bg': `var(--${DEFAULT_PREFIX}-primary-color-rgb)`,
+  'item-readonly-color': `var(--${DEFAULT_PREFIX}-primary-color)`,
+  'item-readonly-radius': `var(--${DEFAULT_PREFIX}-border-radius)`,
+
+  'dropdown-background': '#fff',
+  'dropdown-selected-color': 'var(--oio-primary-color)',
+  'dropdown-color': 'var(--oio-text-color-secondary)',
+  'dropdown-selected': 'rgba(var(--oio-primary-color-rgb), 0.1)',
+  'dropdown-hover-color': 'var(--oio-select-dropdown-color)',
+  'dropdown-hover-background': `var(--${DEFAULT_PREFIX}-hover-background-color)`,
+  'dropdown-box-shadow':
+    '0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),0 9px 28px 8px rgba(0, 0, 0, 0.05)'
+};

package/src/style/default-minimalism/switch/switch.ts

@@ -0,0 +1,5 @@
+export const component = 'switch';
+
+export const cssVars = {
+  background: 'rgba(0, 0, 0, 0.25)'
+};

package/src/style/default-minimalism/table/table.ts

@@ -0,0 +1,24 @@
+import { DEFAULT_PREFIX } from '../../../mount';
+
+export const component = 'table';
+
+export const cssVars = {
+  'thead-bg': '#f7f8fa',
+  'body-bg': '#ffffff',
+  'text-color': 'rgba(0, 0, 0, 0.65)',
+  'title-color': 'rgba(0, 0, 0, 0.85)',
+  'title-font-weight': 500,
+  'title-sort-icon-size': '11px',
+  'tr-height': `var(--${DEFAULT_PREFIX}-height-lg)`,
+  'tr-stripe-bg': '#fafafa',
+  'tr-checked-bg': `rgba(var(--${DEFAULT_PREFIX}-primary-color-rgb), 0.1)`,
+  'tr-hover-bg': `rgba(var(--${DEFAULT_PREFIX}-primary-color-rgb), 0.1)`,
+  'row-border': 'rgba(243, 243, 243, 1)', // 无效参数
+  'row-body-border': '#e8eaec',
+  config: {
+    border: 'full',
+    stripe: true,
+    isCurrent: true,
+    isHover: true
+  }
+};

package/src/style/default-minimalism/tabs/tabs.ts

@@ -0,0 +1,7 @@
+export const component = 'tabs';
+
+export const cssVars = {
+  'card-tab-background': '#f7f8fa',
+  'card-tab-active-background': 'var(--oio-background)',
+  'active-text-color': 'var(--oio-primary-color)'
+};

package/src/style/default-minimalism/textarea/textarea.ts

@@ -0,0 +1,34 @@
+import { DEFAULT_PREFIX } from '../../../mount';
+
+export const component = 'textarea';
+const prefix = `${DEFAULT_PREFIX}-${component}`;
+
+export const cssVars = {
+  // default
+  background: '#ffffff',
+  'border-width': `var(--${DEFAULT_PREFIX}-border-width)`,
+  'border-style': `var(--${DEFAULT_PREFIX}-border-style)`,
+  'border-color': `var(--${DEFAULT_PREFIX}-border-color)`,
+  'border-radius': `var(--${DEFAULT_PREFIX}-border-radius)`,
+  outline: 'none',
+  shadow: 'none',
+  'text-color': `var(--${DEFAULT_PREFIX}-text-color)`,
+  // default-hover
+  'background-hover': `var(--${prefix}-background)`,
+  'border-width-hover': `var(--${prefix}-border-width)`,
+  'border-style-hover': `var(--${prefix}-border-style)`,
+  'border-color-hover': `var(--${DEFAULT_PREFIX}-primary-color-hover)`,
+  'border-radius-hover': `var(--${prefix}-border-radius)`,
+  'outline-hover': `var(--${prefix}-outline)`,
+  'shadow-hover': `var(--${prefix}-shadow)`,
+  'text-color-hover': `var(--${prefix}-text-color)`,
+  // default-focus
+  'background-focus': `var(--${prefix}-background)`,
+  'border-width-focus': `var(--${prefix}-border-width)`,
+  'border-style-focus': `var(--${prefix}-border-style)`,
+  'border-color-focus': `var(--${DEFAULT_PREFIX}-primary-color-hover)`,
+  'border-radius-focus': `var(--${prefix}-border-radius)`,
+  'outline-focus': `var(--${prefix}-outline)`,
+  'shadow-focus': `0px 0px 0px 2px rgba(var(--${DEFAULT_PREFIX}-primary-color-rgb),0.1);`,
+  'text-color-focus': `var(--${prefix}-text-color)`
+};

package/src/style/default-minimalism/transfer/transfer.ts

@@ -0,0 +1,6 @@
+export const component = 'transfer';
+
+export const cssVars = {
+  'background-color': '#f7f7f7',
+  'header-border-color': '#e3e7ee'
+};

package/src/style/default-minimalism/tree-select/tree-select.ts

@@ -0,0 +1 @@
+export const component = 'tree-select';

package/src/style/default-minimalism/upload/upload.ts

@@ -0,0 +1,34 @@
+import { DEFAULT_PREFIX } from '../../../mount';
+
+export const component = 'upload';
+const prefix = `${DEFAULT_PREFIX}-${component}`;
+
+export const cssVars = {
+  // default
+  background: '#ffffff',
+  'border-width': `var(--${DEFAULT_PREFIX}-border-width)`,
+  'border-style': 'dashed',
+  'border-color': `var(--${DEFAULT_PREFIX}-border-color)`,
+  'border-radius': `var(--${DEFAULT_PREFIX}-border-radius)`,
+  outline: 'none',
+  shadow: 'none',
+  'text-color': `var(--${DEFAULT_PREFIX}-text-color)`,
+  // default-hover
+  'background-hover': `var(--${prefix}-background)`,
+  'border-width-hover': `var(--${prefix}-border-width)`,
+  'border-style-hover': `var(--${prefix}-border-style)`,
+  'border-color-hover': `var(--${DEFAULT_PREFIX}-primary-color-hover)`,
+  'border-radius-hover': `var(--${prefix}-border-radius)`,
+  'outline-hover': `var(--${prefix}-outline)`,
+  'shadow-hover': `var(--${prefix}-shadow)`,
+  'text-color-hover': `var(--${prefix}-text-color)`,
+  // default-focus
+  'background-focus': `var(--${prefix}-background)`,
+  'border-width-focus': `var(--${prefix}-border-width)`,
+  'border-style-focus': `var(--${prefix}-border-style)`,
+  'border-color-focus': `var(--${DEFAULT_PREFIX}-primary-color-hover)`,
+  'border-radius-focus': `var(--${prefix}-border-radius)`,
+  'outline-focus': `var(--${prefix}-outline)`,
+  'shadow-focus': `var(--${prefix}-shadow)`,
+  'text-color-focus': `var(--${prefix}-text-color)`
+};

package/src/style/index.ts

@@ -1,2 +1,4 @@
 export * from './default';
+export * from './default-minimalism';
 export * from './dark';
+export * from './dark-minimalism';

package/src/typing.ts

@@ -11,18 +11,32 @@ export enum DefaultThemeName {
   DEFAULT_MEDIUM = 'default-medium',
   DEFAULT_SMALL = 'default-small',
 
+  DEFAULT_MINIMALISM_LARGE = 'default-minimalism-large',
+  DEFAULT_MINIMALISM_MEDIUM = 'default-minimalism-medium',
+  DEFAULT_MINIMALISM_SMALL = 'default-minimalism-small',
+
   DARK_LARGE = 'dark-large',
   DARK_MEDIUM = 'dark-medium',
-  DARK_SMALL = 'dark-small'
+  DARK_SMALL = 'dark-small',
+
+  DARK_MINIMALISM_LARGE = 'dark-minimalism-large',
+  DARK_MINIMALISM_MEDIUM = 'dark-minimalism-medium',
+  DARK_MINIMALISM_SMALL = 'dark-minimalism-small'
 }
 
 export type ThemeName =
   | 'default-large'
   | 'default-medium'
   | 'default-small'
+  | 'default-minimalism-large'
+  | 'default-minimalism-medium'
+  | 'default-minimalism-small'
   | 'dark-large'
   | 'dark-medium'
   | 'dark-small'
+  | 'dark-minimalism-large'
+  | 'dark-minimalism-medium'
+  | 'dark-minimalism-small'
   | string;
 
 export const isSystemTheme = (name: ThemeName) => {

package/src/utils/ColorHelper.ts

@@ -0,0 +1,75 @@
+export interface RGB {
+  r: number;
+  g: number;
+  b: number;
+}
+
+export class ColorHelper {
+  /**
+   * 将十六进制颜色转换为RGB对象
+   * @param {string} hex - 十六进制颜色字符串，如 '#035DFF'
+   * @returns {Object} RGB对象，包含r, g, b属性，值为0-255
+   */
+  public static hexToRgb(hex: string): RGB {
+    // 移除可能的#号
+    hex = hex.replace(/^#/, '');
+
+    // 解析RGB分量
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+
+    return { r, g, b };
+  }
+
+  /**
+   * 将RGB对象转换为十六进制颜色
+   * @param {Object} rgb - RGB对象，包含r, g, b属性，值为0-255
+   * @returns {string} 十六进制颜色字符串，如 '#E6EFFE'
+   */
+  public static rgbToHex(rgb: RGB): string {
+    // 将每个分量转换为两位十六进制数，并拼接
+    const r = ColorHelper.componentToHex(rgb.r);
+    const g = ColorHelper.componentToHex(rgb.g);
+    const b = ColorHelper.componentToHex(rgb.b);
+
+    return `#${r}${g}${b}`;
+  }
+
+  /**
+   * 将单个颜色分量转换为两位十六进制数
+   * @param {number} c - 颜色分量，值为0-255
+   * @returns {string} 两位十六进制字符串
+   */
+  private static componentToHex(c: number): string {
+    const hex = c.toString(16);
+    // 确保结果是两位，不足的前面补0
+    return hex.length === 1 ? `0${hex}` : hex;
+  }
+
+  /**
+   * 计算半透明颜色在背景色上的等效不透明颜色
+   * @param {string} color - 半透明颜色的十六进制字符串，如 '#035DFF'
+   * @param {number} alpha - 透明度，0-1之间的数值，如0.1
+   * @param {string} backgroundColor - 背景色的十六进制字符串，默认为白色 '#FFFFFF'
+   * @returns {string} 等效的不透明颜色的十六进制字符串
+   */
+  public static getAlphaColor(color: string, alpha: number, backgroundColor = '#FFFFFF') {
+    // 验证输入
+    if (alpha < 0 || alpha > 1) {
+      throw new Error('透明度必须是0到1之间的数值');
+    }
+
+    // 转换为RGB
+    const colorRgb = ColorHelper.hexToRgb(color);
+    const bgRgb = ColorHelper.hexToRgb(backgroundColor);
+
+    // 计算等效RGB值
+    const r = Math.round(colorRgb.r * alpha + bgRgb.r * (1 - alpha));
+    const g = Math.round(colorRgb.g * alpha + bgRgb.g * (1 - alpha));
+    const b = Math.round(colorRgb.b * alpha + bgRgb.b * (1 - alpha));
+
+    // 转换回十六进制
+    return ColorHelper.rgbToHex({ r, g, b });
+  }
+}