@mc-markets/ui 1.0.35 → 1.0.38

package/packages/styles/variables.scss

@@ -6,9 +6,76 @@
  */
 
 // 导入所有 Element Plus 样式
+// 自定义 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,
+    ),
+  ),
+  $text-color: (
+    'primary': #303133,
+    'regular': red,
+    'secondary': #909399,
+    'placeholder': #C0C4CC,
+  ),
+  // 自定义字体大小
+  $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%,
+  ),
+  $border-color-hover:var(--text-brand),
+  // 自定义阴影
+  $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)
+    ),
+  ),
+  $common-component-size: (
+    'large': 40px,
+    'default': 48px,
+    'small': 40px,
+  )
+);
 @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';
@@ -17,83 +84,12 @@
 @use './variables/spacing-mode.css';
 @use './variables/typography-desktop.css';
 
-// 生成CSS变量
-:root.dark {
-  // 主色调
-  --el-color-primary: #FFD905;
-  --el-color-primary-light-3: #FFE855;
-  --el-color-primary-light-5: #FFED7A;
-  --el-color-primary-light-7: #FFF2A0;
-  --el-color-primary-light-8: #FFF5B3;
-  --el-color-primary-light-9: #FFF9D9;
-  --el-color-primary-dark-2: #E6C300;
-  
-  // 成功色
-  --el-color-success: #34A88B;
-  --el-color-success-light-3: #5BB89E;
-  --el-color-success-light-5: #7CC7B1;
-  --el-color-success-light-7: #9DD6C4;
-  --el-color-success-light-8: #B3E0D2;
-  --el-color-success-light-9: #D9F0E8;
-  --el-color-success-dark-2: #2A8A73;
-  
-  // 警告色
-  --el-color-warning: #FFA61F;
-  --el-color-warning-light-3: #FFB84D;
-  --el-color-warning-light-5: #FFC973;
-  --el-color-warning-light-7: #FFD999;
-  --el-color-warning-light-8: #FFE2B3;
-  --el-color-warning-light-9: #FFF0D9;
-  --el-color-warning-dark-2: #E6940C;
-  
-  // 危险色
-  --el-color-danger: #f14654;
-  --el-color-danger-light-3: #F46B77;
-  --el-color-danger-light-5: #F78A94;
-  --el-color-danger-light-7: #FAA9B1;
-  --el-color-danger-light-8: #FBC2C8;
-  --el-color-danger-light-9: #FDE0E3;
-  --el-color-danger-dark-2: #D63A47;
-  
-  // 信息色
-  --el-color-info: #585660;
-  --el-color-info-light-3: #7A7A82;
-  --el-color-info-light-5: #96969C;
-  --el-color-info-light-7: #B2B2B6;
-  --el-color-info-light-8: #C6C6C9;
-  --el-color-info-light-9: #E0E0E2;
-  --el-color-info-dark-2: #46464E;
-  
-  // 字体大小
-  --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);
+
+html.dark{
+  --el-text-color-regular: var(--text-white);
+  --el-disabled-border-color:rgba(255, 255, 255, 0);
+  --el-border-color-light:var(--border-primary);
+  --el-popover-border-radius:8px;
+
+  --el-text-color-placeholder:var(--text-tertiary);
 }

package/USAGE.md

@@ -1,383 +0,0 @@
-# @mc-markets/ui 使用指南
-
-这是一个完整的 Element Plus 导出包，提供了 Element Plus 的所有功能，包括组件、指令、服务、样式、主题和国际化支持。
-
-## 安装
-
-```bash
-npm install @mc-markets/ui
-# 或
-yarn add @mc-markets/ui
-# 或
-pnpm add @mc-markets/ui
-```
-
-## 基础使用
-
-### 1. 完整导入（推荐）
-
-```typescript
-import { createApp } from 'vue'
-import McMarketsUI from '@mc-markets/ui'
-import '@mc-markets/ui/style' // 导入样式
-
-const app = createApp(App)
-
-// 使用默认配置
-app.use(McMarketsUI)
-
-// 或使用自定义配置
-app.use(McMarketsUI, {
-  locale: 'zh-cn', // 默认语言
-  theme: {
-    name: 'custom',
-    dark: false,
-    cssVars: {
-      '--el-color-primary': '#409eff',
-      '--el-color-success': '#67c23a'
-    }
-  },
-  importStyle: true // 是否自动导入样式
-})
-
-app.mount('#app')
-```
-
-### 2. 按需导入
-
-```typescript
-import { createApp } from 'vue'
-import { ElButton, ElInput, ElForm, ElFormItem } from '@mc-markets/ui'
-import '@mc-markets/ui/style'
-
-const app = createApp(App)
-
-// 手动注册组件
-app.component('ElButton', ElButton)
-app.component('ElInput', ElInput)
-app.component('ElForm', ElForm)
-app.component('ElFormItem', ElFormItem)
-
-app.mount('#app')
-```
-
-## 国际化支持
-
-### 1. 使用内置语言包
-
-```typescript
-import { createApp } from 'vue'
-import McMarketsUI, { locales, getLocale } from '@mc-markets/ui'
-
-const app = createApp(App)
-
-// 使用中文
-app.use(McMarketsUI, {
-  locale: 'zh-cn'
-})
-
-// 使用英文
-app.use(McMarketsUI, {
-  locale: 'en'
-})
-
-// 动态切换语言
-const switchToEnglish = () => {
-  const locale = getLocale('en')
-  // 重新配置 Element Plus
-}
-```
-
-### 2. 支持的语言列表
-
-```typescript
-import { supportedLocales } from '@mc-markets/ui'
-
-console.log(supportedLocales)
-// ['zh-cn', 'en', 'zh-tw', 'ja', 'ko', 'es', 'fr', 'de', ...]
-```
-
-## 主题定制
-
-### 1. 使用主题管理器
-
-```typescript
-import { themeManager } from '@mc-markets/ui'
-
-// 设置主题
-themeManager.setTheme({
-  name: 'custom',
-  dark: false,
-  cssVars: {
-    '--el-color-primary': '#409eff',
-    '--el-color-success': '#67c23a',
-    '--el-color-warning': '#e6a23c',
-    '--el-color-danger': '#f56c6c',
-    '--el-color-info': '#909399'
-  },
-  customClass: 'my-custom-theme'
-})
-
-// 切换暗色主题
-themeManager.toggleDark()
-
-// 获取当前主题
-const currentTheme = themeManager.getTheme()
-```
-
-### 2. 在组件中使用
-
-```vue
-<template>
-  <div>
-    <el-button @click="toggleTheme">切换主题</el-button>
-    <el-button @click="setCustomTheme">设置自定义主题</el-button>
-  </div>
-</template>
-
-<script setup>
-import { themeManager } from '@mc-markets/ui'
-
-const toggleTheme = () => {
-  themeManager.toggleDark()
-}
-
-const setCustomTheme = () => {
-  themeManager.setTheme({
-    name: 'blue',
-    cssVars: {
-      '--el-color-primary': '#1890ff'
-    }
-  })
-}
-</script>
-```
-
-## 样式覆盖和主题配置
-
-### 1. 使用 CSS 变量（推荐）
-
-```typescript
-import { createApp } from 'vue'
-import McMarketsUI from '@mc-markets/ui'
-import '@mc-markets/ui/scss-variables' // 导入SCSS变量
-
-const app = createApp(App)
-app.use(McMarketsUI)
-```
-
-```css
-/* 在你的 CSS 文件中 */
-:root {
-  --el-color-primary: #409eff;
-  --el-color-success: #67c23a;
-  --el-color-warning: #e6a23c;
-  --el-color-danger: #f56c6c;
-  --el-color-info: #909399;
-}
-
-/* 暗色主题 */
-.dark {
-  --el-color-primary: #409eff;
-  --el-color-success: #67c23a;
-  --el-color-warning: #e6a23c;
-  --el-color-danger: #f56c6c;
-  --el-color-info: #909399;
-}
-```
-
-### 2. 使用 SCSS 变量
-
-```scss
-// 在你的 SCSS 文件中
-@use '@mc-markets/ui/scss-variables' as *;
-
-// 或者自定义变量
-@forward 'element-plus/theme-chalk/src/common/var.scss' with (
-  $colors: (
-    'primary': (
-      'base': #409eff,
-    ),
-    'success': (
-      'base': #67c23a,
-    ),
-  )
-);
-```
-
-### 3. JavaScript 动态配置
-
-```typescript
-import { 
-  setTheme, 
-  setPrimaryColor, 
-  toggleDark,
-  themeConfigManager 
-} from '@mc-markets/ui'
-
-// 设置主题
-setTheme({
-  name: 'custom',
-  dark: false,
-  primaryColor: '#1890ff',
-  successColor: '#52c41a',
-  warningColor: '#faad14',
-  dangerColor: '#ff4d4f',
-  infoColor: '#1890ff',
-  cssVars: {
-    '--el-border-radius-base': '6px',
-    '--el-font-size-base': '14px'
-  }
-})
-
-// 单独设置颜色
-setPrimaryColor('#1890ff')
-setSuccessColor('#52c41a')
-setWarningColor('#faad14')
-setDangerColor('#ff4d4f')
-setInfoColor('#1890ff')
-
-// 切换暗色主题
-toggleDark()
-```
-
-## 高级用法
-
-### 1. 自定义配置
-
-```typescript
-import { createApp } from 'vue'
-import McMarketsUI, { 
-  themeManager, 
-  getLocale, 
-  supportedLocales 
-} from '@mc-markets/ui'
-
-const app = createApp(App)
-
-// 自定义配置
-app.use(McMarketsUI, {
-  locale: 'zh-cn',
-  theme: {
-    name: 'enterprise',
-    dark: false,
-    cssVars: {
-      '--el-color-primary': '#1890ff',
-      '--el-border-radius-base': '6px',
-      '--el-font-size-base': '14px'
-    }
-  },
-  importStyle: true
-})
-
-// 全局访问
-app.config.globalProperties.$theme = themeManager
-app.config.globalProperties.$locales = supportedLocales
-```
-
-### 2. 在组合式 API 中使用
-
-```vue
-<template>
-  <div>
-    <el-button @click="changeLanguage">切换语言</el-button>
-    <el-button @click="changeTheme">切换主题</el-button>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { themeManager, getLocale, supportedLocales } from '@mc-markets/ui'
-
-const currentLocale = ref('zh-cn')
-
-const changeLanguage = () => {
-  const currentIndex = supportedLocales.indexOf(currentLocale.value)
-  const nextIndex = (currentIndex + 1) % supportedLocales.length
-  currentLocale.value = supportedLocales[nextIndex]
-  
-  // 重新配置语言
-  const locale = getLocale(currentLocale.value)
-  // 这里需要重新配置 Element Plus
-}
-
-const changeTheme = () => {
-  themeManager.toggleDark()
-}
-</script>
-```
-
-## 类型支持
-
-```typescript
-import type { 
-  ThemeConfig, 
-  McMarketsUI 
-} from '@mc-markets/ui'
-
-// 使用类型
-const theme: ThemeConfig = {
-  name: 'custom',
-  dark: false,
-  cssVars: {
-    '--el-color-primary': '#409eff'
-  }
-}
-```
-
-## 注意事项
-
-1. **样式导入**：确保导入了 Element Plus 的样式文件
-2. **语言包**：所有语言包都已内置，无需额外安装
-3. **主题切换**：主题切换是全局的，会影响整个应用
-4. **性能优化**：建议使用按需导入来减少包体积
-5. **兼容性**：需要 Vue 3.3+ 和 Element Plus 2.8+
-
-## 完整示例
-
-```vue
-<template>
-  <div class="app">
-    <el-header>
-      <el-menu mode="horizontal">
-        <el-menu-item index="1">首页</el-menu-item>
-        <el-menu-item index="2">关于</el-menu-item>
-      </el-menu>
-    </el-header>
-    
-    <el-main>
-      <el-form :model="form" label-width="100px">
-        <el-form-item label="用户名">
-          <el-input v-model="form.username" />
-        </el-form-item>
-        <el-form-item label="密码">
-          <el-input v-model="form.password" type="password" />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="submit">提交</el-button>
-        </el-form-item>
-      </el-form>
-    </el-main>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { ElMessage } from '@mc-markets/ui'
-
-const form = ref({
-  username: '',
-  password: ''
-})
-
-const submit = () => {
-  ElMessage.success('提交成功！')
-}
-</script>
-
-<style>
-@import '@mc-markets/ui/style';
-</style>
-```
-
-这个包提供了 Element Plus 的完整功能，包括所有组件、指令、服务、样式、主题和国际化支持，让您可以轻松地在项目中使用 Element Plus 的所有功能。

package/dist/packages/components/Alert/Alert.vue.d.ts

@@ -1,18 +0,0 @@
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        title?(_: {}): any;
-        default?(_: {}): any;
-    };
-    refs: {};
-    rootEl: any;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, 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/components/Alert/index.d.ts

@@ -1,3 +0,0 @@
-import { default as Alert } from './Alert.vue';
-export { Alert };
-export default Alert;

package/dist/packages/components/Banner/Banner.vue.d.ts

@@ -1,18 +0,0 @@
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        title?(_: {}): any;
-        default?(_: {}): any;
-    };
-    refs: {};
-    rootEl: any;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, 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/components/Banner/index.d.ts

@@ -1,3 +0,0 @@
-import { default as Banner } from './Banner.vue';
-export { Banner };
-export default Banner;

package/dist/packages/components/DatePicker/DatePicker.vue.d.ts

@@ -1,17 +0,0 @@
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {};
-    rootEl: any;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, 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/components/DatePicker/index.d.ts

@@ -1,3 +0,0 @@
-import { default as DatePicker } from './DatePicker.vue';
-export { DatePicker };
-export default DatePicker;

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

@@ -1,51 +0,0 @@
-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/components/Empty/Empty.vue.d.ts

@@ -1,19 +0,0 @@
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        image?(_: {}): any;
-        description?(_: {}): any;
-        default?(_: {}): any;
-    };
-    refs: {};
-    rootEl: any;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, 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/components/Empty/index.d.ts

@@ -1,3 +0,0 @@
-import { default as Empty } from './Empty.vue';
-export { Empty };
-export default Empty;

package/dist/packages/components/Icon/index.d.ts

@@ -1,3 +0,0 @@
-export { default as Icon } from './Icon.vue';
-export * from './types';
-export { iconList } from './types';