@mc-markets/ui 1.0.90 → 1.0.92

package/packages/resolver.js

@@ -0,0 +1,179 @@
+/**
+ * @mc-markets/ui 组件解析器
+ * 用于 unplugin-vue-components 和 unplugin-auto-import
+ * 
+ * 支持自动导入组件和 API
+ */
+
+/**
+ * 组件解析器
+ * @param {Object} options - 配置选项
+ * @param {string} options.prefix - 组件前缀，默认 'm'
+ * @param {boolean} options.importStyle - 是否自动导入样式，默认 true
+ * @returns {Object} 解析器配置
+ */
+export function McMarketsUIResolver(options = {}) {
+  const {
+    prefix = 'm',
+    importStyle = true
+  } = options
+
+  return {
+    type: 'component',
+    resolve: (name) => {
+      // 只处理指定前缀的组件
+      const prefixPattern = new RegExp(`^${prefix}(?:-|[A-Z])`, 'i')
+      if (!prefixPattern.test(name)) {
+        return
+      }
+
+      // 组件名映射表（处理特殊命名）
+      const componentMap = {
+        // 自定义组件
+        'MIcon': 'Icon',
+        'MButton': 'Button',
+        'MInput': 'Input',
+        'MForm': 'Form',
+        'MFormItem': 'FormItem',
+        'MTooltip': 'Tooltip',
+        'MSelect': 'Select',
+        'MOption': 'Option',
+        'MOptionGroup': 'OptionGroup',
+        'MPagination': 'Pagination',
+        'MRadio': 'Radio',
+        'MRadioGroup': 'RadioGroup',
+        'MRadioButton': 'RadioButton',
+        'MSwitch': 'Switch',
+        'MTag': 'Tag',
+        'MAlert': 'Alert',
+        'MDialog': 'Dialog',
+        'MNotification': 'Notification',
+        'MMessage': 'Message',
+        'MNotifiMessage': 'NotifiMessage',
+        'MDatePicker': 'DatePicker',
+        'MEmpty': 'Empty',
+        'MTable': 'Table',
+        'MTableColumn': 'TableColumn',
+        'MBanner': 'Banner',
+        'MTabs': 'Tabs',
+        'MTabPane': 'TabPane',
+        'MTabCard': 'TabCard',
+        'MTabCardItem': 'TabCardItem',
+        'MBreadcrumb': 'Breadcrumb',
+        'MBreadcrumbSeparator': 'BreadcrumbSeparator',
+      }
+
+      // 检查是否是已定义的组件
+      const componentName = componentMap[name]
+      
+      if (componentName) {
+        // 返回组件导入配置
+        return {
+          name,
+          from: '@mc-markets/ui',
+          // 可选：自动导入样式
+          sideEffects: importStyle ? '@mc-markets/ui/dist/style.css' : undefined
+        }
+      }
+
+      // 如果不是自定义组件，可能是 Element Plus 组件（通过 m- 前缀）
+      // 这些会通过库的智能注册机制自动处理
+      if (name.startsWith('M')) {
+        return {
+          name,
+          from: '@mc-markets/ui',
+          sideEffects: importStyle ? '@mc-markets/ui/dist/style.css' : undefined
+        }
+      }
+    }
+  }
+}
+
+/**
+ * API 自动导入配置
+ * 用于 unplugin-auto-import
+ */
+export function getMcMarketsUIImports() {
+  return {
+    '@mc-markets/ui': [
+      // 组件
+      'MIcon',
+      'MButton',
+      'MInput',
+      'MForm',
+      'MFormItem',
+      'MTooltip',
+      'MSelect',
+      'MOption',
+      'MOptionGroup',
+      'MPagination',
+      'MRadio',
+      'MRadioGroup',
+      'MRadioButton',
+      'MSwitch',
+      'MTag',
+      'MAlert',
+      'MDialog',
+      'MNotification',
+      'MMessage',
+      'MNotifiMessage',
+      'MDatePicker',
+      'MEmpty',
+      'MTable',
+      'MTableColumn',
+      'MBanner',
+      'MTabs',
+      'MTabPane',
+      'MTabCard',
+      'MTabCardItem',
+      'MBreadcrumb',
+      
+      // API 方法
+      'Message',
+      'NotifiMessage',
+      'MMessageBox',
+      
+      // 工具函数
+      'addOverrideClass',
+      'addComponentOverride',
+      'applyGlobalOverride',
+      'forceRefreshStyles',
+      'createOverrideComponent',
+      'checkComponentRegistration',
+      
+      // Element Plus 转换组件
+      'MButtonGroup',
+      'MCarousel',
+      'MCarouselItem',
+      'MCascader',
+      'MCascaderPanel',
+      'MCheckTag',
+      'MCalendar',
+      'MTimePicker',
+      'MDateTimePicker',
+      'MColorPicker',
+      'MTransfer',
+      'MTree',
+      'MTreeSelect',
+      'MUpload',
+      'MImage',
+      'MImageViewer',
+      'MBacktop',
+      'MInfiniteScroll',
+      'MAffix',
+      'MScrollbar',
+      'MResult',
+      'MSkeleton',
+      'MLoading',
+      'MSpinner',
+      'MProgress',
+      'MBadge',
+      'MAvatar',
+      'MConfigProvider'
+    ]
+  }
+}
+
+// 默认导出解析器
+export default McMarketsUIResolver
+

package/packages/styles/README.md

@@ -1,129 +1,129 @@
-# 样式覆盖说明
-
-## 🎨 完全覆盖 Element Plus 样式
-
-本组件库通过多层策略确保样式能够**完全覆盖** Element Plus 的默认样式：
-
-### 📋 覆盖策略
-
-#### 1. **CSS 变量覆盖**
-通过 `@forward` 指令在编译时覆盖 Element Plus 的 SCSS 变量：
-```scss
-@forward 'element-plus/theme-chalk/src/common/var.scss' with (
-  $colors: (
-    'primary': ( 'base': #FFD905 ),
-    // ... 其他颜色配置
-  )
-);
-```
-
-#### 2. **组件级样式覆盖**
-针对每个组件创建专门的覆盖样式文件：
-- `components/button.scss` - Button 组件样式
-- `components/select.scss` - Select 组件样式  
-- `components/table.scss` - Table 组件样式
-- 等等...
-
-#### 3. **强制覆盖样式**
-通过 `components/override.scss` 使用 `!important` 和高权重选择器：
-```scss
-.mc-ui-override .el-button {
-  height: 40px !important;
-  padding: 8px 16px !important;
-  // ... 其他强制样式
-}
-```
-
-#### 4. **PostCSS 优先级增强**
-自动为样式选择器添加高权重前缀：
-```javascript
-// 自动将 .el-button 转换为 .mc-ui-override .el-button
-```
-
-#### 5. **JavaScript 运行时覆盖**
-通过 `styleUtils.js` 在运行时动态添加覆盖类：
-```javascript
-import { applyGlobalOverride } from '@mc-markets/ui';
-applyGlobalOverride(); // 全局应用样式覆盖
-```
-
-### 🚀 使用方法
-
-#### 自动模式（推荐）
-```javascript
-import McUI from '@mc-markets/ui';
-import '@mc-markets/ui/styles/index';
-
-app.use(McUI); // 自动应用样式覆盖
-```
-
-#### 手动模式
-```javascript
-import { applyGlobalOverride, forceRefreshStyles } from '@mc-markets/ui';
-
-// 应用全局覆盖
-applyGlobalOverride();
-
-// 强制刷新特定组件样式
-forceRefreshStyles('.el-button');
-```
-
-#### 组件级覆盖
-```javascript
-import { addOverrideClass } from '@mc-markets/ui';
-
-// 在组件挂载后添加覆盖类
-mounted() {
-  addOverrideClass(this.$el);
-}
-```
-
-### 🎯 覆盖优先级
-
-样式覆盖按以下优先级生效（从低到高）：
-
-1. **Element Plus 默认样式** (最低优先级)
-2. **CSS 变量覆盖** 
-3. **组件样式文件**
-4. **PostCSS 权重增强**
-5. **强制覆盖样式 (!important)** (最高优先级)
-
-### 📝 自定义样式
-
-如需进一步自定义样式，建议按以下顺序：
-
-1. **优先使用 CSS 变量**：
-```scss
-:root {
-  --bg-brand: #your-color;
-  --text-primary: #your-text-color;
-}
-```
-
-2. **组件级覆盖**：
-```scss
-.mc-ui-override .el-button {
-  // 你的自定义样式
-}
-```
-
-3. **使用 !important**（最后手段）：
-```scss
-.el-button {
-  color: red !important;
-}
-```
-
-### 🔧 调试技巧
-
-1. **检查覆盖类**：确保元素包含 `mc-ui-override` 类
-2. **查看样式优先级**：使用浏览器开发工具检查样式覆盖情况  
-3. **强制刷新**：调用 `forceRefreshStyles()` 重新应用覆盖
-4. **全局覆盖**：确保 `document.body` 包含 `mc-ui-override` 类
-
-### ⚠️ 注意事项
-
-- 样式覆盖会在组件库初始化时自动应用
-- 动态添加的 Element Plus 组件会被自动检测并应用覆盖
-- 如果样式仍未生效，请检查 CSS 加载顺序
-- 建议在应用根组件中引入样式文件以确保正确的加载顺序
+# 样式覆盖说明
+
+## 🎨 完全覆盖 Element Plus 样式
+
+本组件库通过多层策略确保样式能够**完全覆盖** Element Plus 的默认样式：
+
+### 📋 覆盖策略
+
+#### 1. **CSS 变量覆盖**
+通过 `@forward` 指令在编译时覆盖 Element Plus 的 SCSS 变量：
+```scss
+@forward 'element-plus/theme-chalk/src/common/var.scss' with (
+  $colors: (
+    'primary': ( 'base': #FFD905 ),
+    // ... 其他颜色配置
+  )
+);
+```
+
+#### 2. **组件级样式覆盖**
+针对每个组件创建专门的覆盖样式文件：
+- `components/button.scss` - Button 组件样式
+- `components/select.scss` - Select 组件样式  
+- `components/table.scss` - Table 组件样式
+- 等等...
+
+#### 3. **强制覆盖样式**
+通过 `components/override.scss` 使用 `!important` 和高权重选择器：
+```scss
+.mc-ui-override .el-button {
+  height: 40px !important;
+  padding: 8px 16px !important;
+  // ... 其他强制样式
+}
+```
+
+#### 4. **PostCSS 优先级增强**
+自动为样式选择器添加高权重前缀：
+```javascript
+// 自动将 .el-button 转换为 .mc-ui-override .el-button
+```
+
+#### 5. **JavaScript 运行时覆盖**
+通过 `styleUtils.js` 在运行时动态添加覆盖类：
+```javascript
+import { applyGlobalOverride } from '@mc-markets/ui';
+applyGlobalOverride(); // 全局应用样式覆盖
+```
+
+### 🚀 使用方法
+
+#### 自动模式（推荐）
+```javascript
+import McUI from '@mc-markets/ui';
+import '@mc-markets/ui/styles/index';
+
+app.use(McUI); // 自动应用样式覆盖
+```
+
+#### 手动模式
+```javascript
+import { applyGlobalOverride, forceRefreshStyles } from '@mc-markets/ui';
+
+// 应用全局覆盖
+applyGlobalOverride();
+
+// 强制刷新特定组件样式
+forceRefreshStyles('.el-button');
+```
+
+#### 组件级覆盖
+```javascript
+import { addOverrideClass } from '@mc-markets/ui';
+
+// 在组件挂载后添加覆盖类
+mounted() {
+  addOverrideClass(this.$el);
+}
+```
+
+### 🎯 覆盖优先级
+
+样式覆盖按以下优先级生效（从低到高）：
+
+1. **Element Plus 默认样式** (最低优先级)
+2. **CSS 变量覆盖** 
+3. **组件样式文件**
+4. **PostCSS 权重增强**
+5. **强制覆盖样式 (!important)** (最高优先级)
+
+### 📝 自定义样式
+
+如需进一步自定义样式，建议按以下顺序：
+
+1. **优先使用 CSS 变量**：
+```scss
+:root {
+  --bg-brand: #your-color;
+  --text-primary: #your-text-color;
+}
+```
+
+2. **组件级覆盖**：
+```scss
+.mc-ui-override .el-button {
+  // 你的自定义样式
+}
+```
+
+3. **使用 !important**（最后手段）：
+```scss
+.el-button {
+  color: red !important;
+}
+```
+
+### 🔧 调试技巧
+
+1. **检查覆盖类**：确保元素包含 `mc-ui-override` 类
+2. **查看样式优先级**：使用浏览器开发工具检查样式覆盖情况  
+3. **强制刷新**：调用 `forceRefreshStyles()` 重新应用覆盖
+4. **全局覆盖**：确保 `document.body` 包含 `mc-ui-override` 类
+
+### ⚠️ 注意事项
+
+- 样式覆盖会在组件库初始化时自动应用
+- 动态添加的 Element Plus 组件会被自动检测并应用覆盖
+- 如果样式仍未生效，请检查 CSS 加载顺序
+- 建议在应用根组件中引入样式文件以确保正确的加载顺序

package/packages/styles/colorfont/iconfont.css

@@ -5,6 +5,7 @@
        url('./iconfont.woff2?t=1759051846956') format('woff2'),
        url('./iconfont.woff?t=1759051846956') format('woff'),
        url('./iconfont.ttf?t=1759051846956') format('truetype');
+  font-display: swap;
 }
 
 .colorfont {

package/packages/styles/components/button.scss

@@ -1,121 +1,121 @@
-.mc-ui-override {
-  .el-button {
-    --el-button-font-weight: 600;
-    --el-button-border-color: var(--bg-quaternary);
-    --el-button-bg-color: var(--bg-quaternary);
-    --el-button-text-color: var(--text-primary);
-    --el-button-disabled-text-color: var(--text-quaternary);
-    --el-button-disabled-bg-color: color-mix(
-      in srgb,
-      var(--bg-tertiary-hover) 50%,
-      transparent
-    );
-    --el-button-disabled-border-color: var(--el-button-disabled-bg-color);
-    --el-button-divide-border-color: rgba(255, 255, 255, 0.5);
-    --el-button-hover-text-color: var(--text-primary);
-    --el-button-hover-bg-color: var(--bg-tertiary-hover);
-    --el-button-hover-border-color: var(--bg-tertiary);
-    --el-button-active-text-color: var(--text-primary);
-    --el-button-active-border-color: var(--bg-tertiary);
-    --el-button-active-bg-color: var(--bg-tertiary);
-    --el-button-outline-color: var(--bg-tertiary);
-    --el-button-hover-link-text-color: var(--text-brand);
-    --el-button-active-color: var(--text-primary);
-    height: 40px;
-    padding: 8px 16px;
-
-    &.is-plain {
-      --el-button-hover-text-color: var(--text-primary);
-      --el-button-hover-bg-color: var(--bg-brand-secondary);
-      --el-button-hover-border-color: var(--border-brand-hover);
-
-      border-color: var(--border-brand);
-      background-color: transparent;
-
-      &.is-disabled {
-        background-color: transparent;
-        border-color: color-mix(in srgb, var(--bg-brand) 50%, transparent);
-        color: var(--el-button-hover-text-color);
-      }
-    }
-
-    &.el-button--large {
-      height: 48px;
-      padding: 12px 20px;
-    }
-    &.el-button--small {
-      height: 32px;
-      padding: 5px 12px;
-      font-size: 14px;
-    }
-
-    &.el-button--text {
-      height: 20px;
-      padding: 0;
-      line-height: 20px;
-    }
-
-    &.el-button--primary {
-      --el-button-text-color: var(--text-quaternary);
-      --el-button-outline-color: var(--text-quaternary);
-      --el-button-active-color: var(--bg-brand-hover);
-      --el-button-hover-text-color: var(--text-quaternary);
-      --el-button-hover-link-text-color: var(--text-quaternary);
-      --el-button-hover-bg-color: var(--bg-brand-hover);
-      --el-button-hover-border-color: var(--bg-brand-hover);
-      --el-button-active-text-color: var(--text-quaternary);
-      --el-button-active-bg-color: var(--bg-brand-hover);
-      --el-button-active-border-color: var(--bg-brand-hover);
-      --el-button-disabled-text-color: var(--text-quaternary);
-      --el-button-disabled-bg-color: color-mix(
-        in srgb,
-        var(--bg-brand) 50%,
-        transparent
-      );
-      --el-button-disabled-border-color: color-mix(
-        in srgb,
-        var(--bg-brand) 50%,
-        transparent
-      );
-
-      background-color: var(--bg-brand);
-      border-color: var(--bg-brand);
-
-      &.is-disabled {
-        --el-button-disabled-text-color: var(--text-quaternary);
-        background-color: color-mix(in srgb, var(--bg-brand) 50%, transparent);
-        border-color: transparent;
-      }
-    }
-
-    &.is-circle {
-      width: 40px;
-    }
-
-    &:hover {
-      color: var(--el-button-hover-text-color);
-      border-color: var(--el-button-hover-border-color);
-      background-color: var(--el-button-hover-bg-color);
-    }
-
-    &.is-text,&.is-link{
-      color: var(--text-brand);
-      border: 0 solid transparent;
-      background-color: transparent;
-      &:hover {
-        color: var(--text-brand-hover);
-        border: 0 solid transparent;
-        background-color: transparent;
-      }
-      &.is-disabled {
-        color: color-mix(in srgb, var(--bg-brand) 50%, transparent);
-        border: 0 solid transparent;
-        background-color: transparent;
-      }
-    }
-
-    [class*="el-icon"] + span {
-      margin-left: 5px;
-    }
-  }
-}
+.mc-ui-override {
+  .el-button {
+    --el-button-font-weight: 600;
+    --el-button-border-color: var(--bg-quaternary);
+    --el-button-bg-color: var(--bg-quaternary);
+    --el-button-text-color: var(--text-primary);
+    --el-button-disabled-text-color: var(--text-quaternary);
+    --el-button-disabled-bg-color: color-mix(
+      in srgb,
+      var(--bg-tertiary-hover) 50%,
+      transparent
+    );
+    --el-button-disabled-border-color: var(--el-button-disabled-bg-color);
+    --el-button-divide-border-color: rgba(255, 255, 255, 0.5);
+    --el-button-hover-text-color: var(--text-primary);
+    --el-button-hover-bg-color: var(--bg-tertiary-hover);
+    --el-button-hover-border-color: var(--bg-tertiary);
+    --el-button-active-text-color: var(--text-primary);
+    --el-button-active-border-color: var(--bg-tertiary);
+    --el-button-active-bg-color: var(--bg-tertiary);
+    --el-button-outline-color: var(--bg-tertiary);
+    --el-button-hover-link-text-color: var(--text-brand);
+    --el-button-active-color: var(--text-primary);
+    height: 40px;
+    padding: 8px 16px;
+
+    &.is-plain {
+      --el-button-hover-text-color: var(--text-primary);
+      --el-button-hover-bg-color: var(--bg-brand-secondary);
+      --el-button-hover-border-color: var(--border-brand-hover);
+
+      border-color: var(--border-brand);
+      background-color: transparent;
+
+      &.is-disabled {
+        background-color: transparent;
+        border-color: color-mix(in srgb, var(--bg-brand) 50%, transparent);
+        color: var(--el-button-hover-text-color);
+      }
+    }
+
+    &.el-button--large {
+      height: 48px;
+      padding: 12px 20px;
+    }
+    &.el-button--small {
+      height: 32px;
+      padding: 5px 12px;
+      font-size: 14px;
+    }
+
+    &.el-button--text {
+      height: 20px;
+      padding: 0;
+      line-height: 20px;
+    }
+
+    &.el-button--primary {
+      --el-button-text-color: var(--text-quaternary);
+      --el-button-outline-color: var(--text-quaternary);
+      --el-button-active-color: var(--bg-brand-hover);
+      --el-button-hover-text-color: var(--text-quaternary);
+      --el-button-hover-link-text-color: var(--text-quaternary);
+      --el-button-hover-bg-color: var(--bg-brand-hover);
+      --el-button-hover-border-color: var(--bg-brand-hover);
+      --el-button-active-text-color: var(--text-quaternary);
+      --el-button-active-bg-color: var(--bg-brand-hover);
+      --el-button-active-border-color: var(--bg-brand-hover);
+      --el-button-disabled-text-color: var(--text-quaternary);
+      --el-button-disabled-bg-color: color-mix(
+        in srgb,
+        var(--bg-brand) 50%,
+        transparent
+      );
+      --el-button-disabled-border-color: color-mix(
+        in srgb,
+        var(--bg-brand) 50%,
+        transparent
+      );
+
+      background-color: var(--bg-brand);
+      border-color: var(--bg-brand);
+
+      &.is-disabled {
+        --el-button-disabled-text-color: var(--text-quaternary);
+        background-color: color-mix(in srgb, var(--bg-brand) 50%, transparent);
+        border-color: transparent;
+      }
+    }
+
+    &.is-circle {
+      width: 40px;
+    }
+
+    &:hover {
+      color: var(--el-button-hover-text-color);
+      border-color: var(--el-button-hover-border-color);
+      background-color: var(--el-button-hover-bg-color);
+    }
+
+    &.is-text,&.is-link{
+      color: var(--text-brand);
+      border: 0 solid transparent;
+      background-color: transparent;
+      &:hover {
+        color: var(--text-brand-hover);
+        border: 0 solid transparent;
+        background-color: transparent;
+      }
+      &.is-disabled {
+        color: color-mix(in srgb, var(--bg-brand) 50%, transparent);
+        border: 0 solid transparent;
+        background-color: transparent;
+      }
+    }
+
+    [class*="el-icon"] + span {
+      margin-left: 5px;
+    }
+  }
+}