@mc-markets/ui 1.0.31 → 1.0.33

package/dist/packages/components/Dialog/index.vue.d.ts

@@ -0,0 +1,51 @@
+interface DialogParam {
+    modelValue: boolean;
+    attrs?: Object;
+    title?: string;
+    width?: number | string;
+    draggable?: boolean;
+    showConfirmButton?: boolean;
+    showCancelButton?: boolean;
+    confirmButtonText?: string;
+    cancelButtonText?: string;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        header?(_: {
+            close: () => void;
+            titleId: string;
+            titleClass: string;
+        }): any;
+        default?(_: {}): any;
+        footer?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<DialogParam, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+    close: (...args: any[]) => void;
+    confirm: (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<DialogParam> & Readonly<{
+    "onUpdate:modelValue"?: (...args: any[]) => any;
+    onClose?: (...args: any[]) => any;
+    onConfirm?: (...args: any[]) => any;
+}>, {
+    modelValue: boolean;
+    title: string;
+    width: number | string;
+    draggable: boolean;
+    showConfirmButton: boolean;
+    showCancelButton: boolean;
+    confirmButtonText: string;
+    cancelButtonText: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/packages/index.d.ts

@@ -1,5 +1,5 @@
 import { App } from 'vue';
-import { default as Dialog } from './components/Dialog/index.vue';
+import { default as TDDialog } from './components/Dialog/index.vue';
 import { Icon } from './components/Icon';
 import { default as Tab } from './components/Tab/Tab.vue';
 import { default as TabPane } from './components/Tab/TabPane.vue';
@@ -10,7 +10,7 @@ import { Pagination } from './components/Pagination';
 import { Banner } from './components/Banner';
 import { Empty } from './components/Empty';
 import { Tooltips } from './components/Tooltips';
-export { Dialog, Icon, Tab, TabPane, Alert, Notification, DatePicker, Pagination, Banner, Empty, Tooltips };
+export { TDDialog, Icon, Tab, TabPane, Alert, Notification, DatePicker, Pagination, Banner, Empty, Tooltips };
 export * from './styles/theme-config';
 export { default as variables } from './styles/variables.scss?inline';
 export { default as styles } from './styles/index.scss?inline';

package/dist/packages/styles/theme-config.d.ts

@@ -60,6 +60,8 @@ export declare class ThemeConfigManager {
     private generateLightColors;
     /** 生成深色变体 */
     private generateDarkColors;
+    /** 使颜色变暗 */
+    private darkenColor;
     /** 重置主题 */
     resetTheme(): void;
     /** 导出主题配置 */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mc-markets/ui",
   "private": false,
-  "version": "1.0.31",
+  "version": "1.0.33",
   "type": "module",
   "author": "chenyu",
   "description": "Element Plus 完整导出包，提供所有组件、指令和服务",

package/packages/styles/index.scss

@@ -8,10 +8,9 @@
  * - 图标字体
  */
 
-// 导入 Element Plus 主题定制（包含所有 CSS 变量）
+// 导入主题变量配置（包含所有CSS变量定义）
 @use './variables.scss';
-@use './element/button.scss';
-@use './font/iconfont.scss';
 
-// 导入 Element Plus 基础样式
-@import 'element-plus/dist/index.css';
+// 导入自定义组件样式
+@use './element/button.scss';
+@use './font/iconfont.scss';

package/packages/styles/theme-config.ts

@@ -115,6 +115,21 @@ export class ThemeConfigManager {
     root.style.setProperty(`--el-color-${type}-light-8`, lightColors[8])
     root.style.setProperty(`--el-color-${type}-light-9`, lightColors[9])
     root.style.setProperty(`--el-color-${type}-dark-2`, darkColors[2])
+    
+    // 同时更新暗色主题变量
+    if (this.currentTheme.dark) {
+      const darkBaseColor = this.darkenColor(baseColor, 0.1)
+      const darkLightColors = this.generateLightColors(darkBaseColor)
+      const darkDarkColors = this.generateDarkColors(darkBaseColor)
+      
+      root.style.setProperty(`--el-color-${type}`, this.rgbToHex(darkBaseColor.r, darkBaseColor.g, darkBaseColor.b))
+      root.style.setProperty(`--el-color-${type}-light-3`, darkLightColors[3])
+      root.style.setProperty(`--el-color-${type}-light-5`, darkLightColors[5])
+      root.style.setProperty(`--el-color-${type}-light-7`, darkLightColors[7])
+      root.style.setProperty(`--el-color-${type}-light-8`, darkLightColors[8])
+      root.style.setProperty(`--el-color-${type}-light-9`, darkLightColors[9])
+      root.style.setProperty(`--el-color-${type}-dark-2`, darkDarkColors[2])
+    }
   }
   
   /** 应用主题 */
@@ -203,6 +218,15 @@ export class ThemeConfigManager {
     return colors
   }
   
+  /** 使颜色变暗 */
+  private darkenColor(rgb: { r: number; g: number; b: number }, factor: number): { r: number; g: number; b: number } {
+    return {
+      r: Math.round(rgb.r * (1 - factor)),
+      g: Math.round(rgb.g * (1 - factor)),
+      b: Math.round(rgb.b * (1 - factor))
+    }
+  }
+  
   /** 重置主题 */
   resetTheme(): void {
     const root = document.documentElement

package/packages/styles/variables.scss

@@ -5,65 +5,10 @@
  * @see https://element-plus.org/zh-CN/guide/theming.html
  */
 
-// 自定义 Element Plus 变量
-@forward 'element-plus/theme-chalk/src/common/var.scss' with (
-  // 自定义颜色变量
-  $colors: (
-    'primary': (
-      'base': #FFD905,
-    ),
-    'success': (
-      'base': #34A88B ,
-    ),
-    'warning': (
-      'base': #FFA61F,
-    ),
-    'danger': (
-      'base': #f14654,
-    ),
-    'info': (
-      'base': #585660,
-    ),
-  ),
-  // 自定义字体大小
-  $font-size: (
-    'extra-large': 20px,
-    'large': 18px,
-    'medium': 16px,
-    'base': 14px,
-    'small': 12px,
-    'extra-small': 10px,
-  ),
-  // 自定义圆角
-  $border-radius: (
-    'base': 8px,
-    'small': 4px,
-    'round': 20px,
-    'circle': 100%,
-  ),
-  
-  // 自定义阴影
-  $box-shadow: (
-    'base': (
-      0 2px 4px rgba(0, 0, 0, 0.12),
-      0 0 6px rgba(0, 0, 0, 0.04)
-    ),
-    'light': (
-      0 2px 12px 0 rgba(0, 0, 0, 0.1)
-    ),
-    'lighter': (
-      0 2px 12px 0 rgba(0, 0, 0, 0.06)
-    ),
-    'dark': (
-      0 2px 4px rgba(0, 0, 0, 0.12),
-      0 0 6px rgba(0, 0, 0, 0.12)
-    ),
-  )
-);
-
 // 导入所有 Element Plus 样式
 @use "element-plus/theme-chalk/src/index.scss" as *;
 @use 'element-plus/theme-chalk/src/dark/css-vars.scss';
+
 // 导入项目变量
 @use './variables/border-mode.css';
 @use './variables/color-modes-dark.css';
@@ -71,3 +16,131 @@
 @use './variables/radius-mode.css';
 @use './variables/spacing-mode.css';
 @use './variables/typography-desktop.css';
+
+// 定义主题变量映射
+$theme-variables: (
+  // 主色调
+  'primary': (
+    'base': #FFD905,
+    'light-3': #FFE855,
+    'light-5': #FFED7A,
+    'light-7': #FFF2A0,
+    'light-8': #FFF5B3,
+    'light-9': #FFF9D9,
+    'dark-2': #E6C300
+  ),
+  // 成功色
+  'success': (
+    'base': #34A88B,
+    'light-3': #5BB89E,
+    'light-5': #7CC7B1,
+    'light-7': #9DD6C4,
+    'light-8': #B3E0D2,
+    'light-9': #D9F0E8,
+    'dark-2': #2A8A73
+  ),
+  // 警告色
+  'warning': (
+    'base': #FFA61F,
+    'light-3': #FFB84D,
+    'light-5': #FFC973,
+    'light-7': #FFD999,
+    'light-8': #FFE2B3,
+    'light-9': #FFF0D9,
+    'dark-2': #E6940C
+  ),
+  // 危险色
+  'danger': (
+    'base': #f14654,
+    'light-3': #F46B77,
+    'light-5': #F78A94,
+    'light-7': #FAA9B1,
+    'light-8': #FBC2C8,
+    'light-9': #FDE0E3,
+    'dark-2': #D63A47
+  ),
+  // 信息色
+  'info': (
+    'base': #585660,
+    'light-3': #7A7A82,
+    'light-5': #96969C,
+    'light-7': #B2B2B6,
+    'light-8': #C6C6C9,
+    'light-9': #E0E0E2,
+    'dark-2': #46464E
+  )
+);
+
+// 生成CSS变量
+:root {
+  // 颜色变量
+  @each $color-name, $color-variants in $theme-variables {
+    @each $variant, $value in $color-variants {
+      --el-color-#{$color-name}#{if($variant != 'base', '-' + $variant, '')}: #{$value};
+    }
+  }
+  
+  // 字体大小
+  --el-font-size-extra-large: 20px;
+  --el-font-size-large: 18px;
+  --el-font-size-medium: 16px;
+  --el-font-size-base: 14px;
+  --el-font-size-small: 12px;
+  --el-font-size-extra-small: 10px;
+  
+  // 圆角
+  --el-border-radius-base: 8px;
+  --el-border-radius-small: 4px;
+  --el-border-radius-round: 20px;
+  --el-border-radius-circle: 100%;
+  
+  // 间距
+  --el-spacing-base: 16px;
+  --el-spacing-small: 8px;
+  --el-spacing-large: 24px;
+  
+  // 阴影
+  --el-box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+  --el-box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  --el-box-shadow-dark: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
+  
+  // 过渡动画
+  --el-transition-base: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  --el-transition-fade: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  --el-transition-md-fade: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  --el-transition-fade-linear: opacity 0.2s linear;
+  --el-transition-border: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  --el-transition-box-shadow: box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  --el-transition-color: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+// 暗色主题
+.dark {
+  // 在暗色主题中重新定义颜色变量
+  @each $color-name, $color-variants in $theme-variables {
+    @each $variant, $value in $color-variants {
+      --el-color-#{$color-name}#{if($variant != 'base', '-' + $variant, '')}: #{darken($value, 10%)};
+    }
+  }
+  
+  // 暗色主题特殊变量
+  --el-bg-color: #141414;
+  --el-bg-color-page: #0a0a0a;
+  --el-text-color-primary: #e5eaf3;
+  --el-text-color-regular: #cfd3dc;
+  --el-text-color-secondary: #a3a6ad;
+  --el-text-color-placeholder: #8d9095;
+  --el-text-color-disabled: #6c6e72;
+  --el-border-color: #4c4d4f;
+  --el-border-color-light: #414243;
+  --el-border-color-lighter: #363637;
+  --el-border-color-extra-light: #2b2b2c;
+  --el-fill-color: #f0f2f5;
+  --el-fill-color-light: #f5f7fa;
+  --el-fill-color-lighter: #fafafa;
+  --el-fill-color-extra-light: #fafcff;
+  --el-fill-color-blank: #ffffff;
+  --el-fill-color-dark: #ebedf0;
+  --el-fill-color-darker: #e6e8eb;
+  --el-fill-color-darkest: #b1b3b8;
+}