@mc-markets/ui 1.0.90 → 1.0.91

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;
+    }
+  }
+}

package/packages/styles/components/checkbox.scss

@@ -1,18 +1,18 @@
-.mc-ui-override {
-  .el-checkbox {
-    --el-checkbox-checked-icon-color: #000;
-    --el-checkbox-input-height: 16px;
-    --el-checkbox-input-width: 16px;
-    --el-checkbox-input-border: 2px solid var(--icon-tertiary);
-    --el-checkbox-disabled-checked-input-border-color: var(--icon-tertiary);
-    --el-checkbox-disabled-input-fill:var(--all-alphe-white-20);
-    &.el-checkbox--large{
-      --el-checkbox-input-height: 20px;
-      --el-checkbox-input-width: 20px;
-       .el-checkbox__inner{
-        height: var(--el-checkbox-input-height);
-        width: var(--el-checkbox-input-width);
-       }
-    }
-  }
-}
+.mc-ui-override {
+  .el-checkbox {
+    --el-checkbox-checked-icon-color: #000;
+    --el-checkbox-input-height: 16px;
+    --el-checkbox-input-width: 16px;
+    --el-checkbox-input-border: 2px solid var(--icon-tertiary);
+    --el-checkbox-disabled-checked-input-border-color: var(--icon-tertiary);
+    --el-checkbox-disabled-input-fill:var(--all-alphe-white-20);
+    &.el-checkbox--large{
+      --el-checkbox-input-height: 20px;
+      --el-checkbox-input-width: 20px;
+       .el-checkbox__inner{
+        height: var(--el-checkbox-input-height);
+        width: var(--el-checkbox-input-width);
+       }
+    }
+  }
+}

package/packages/styles/components/dialog.scss

@@ -1,47 +1,47 @@
-.mc-ui-override {
-  .el-dialog {
-    --el-dialog-padding-primary: 24px;
-    --el-dialog-title-font-size: 24px;
-    --el-dialog-border-radius: 16px;
-    --el-dialog-bg-color: var(--bg-tertiary);
-  }
-
-  .el-dialog__header {
-    padding-bottom: 24px;
-    padding-right: 0;
-
-    .el-dialog__title {
-      line-height: 32px;
-      font-weight: 600;
-      color: var(--text-primary);
-    }
-
-    .el-dialog__headerbtn {
-      width: 24px;
-      height: 24px;
-      right: 22px;
-      top: 22px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      .el-dialog__close {
-        font-size: 20px;
-        color: var(--icon-tertiary);
-      }
-
-      &:hover {
-        .el-dialog__close {
-          color: var(--bg-brand-hover);
-        }
-      }
-    }
-  }
-
-  .el-dialog__footer {
-    display: flex;
-    > .el-button {
-      flex: 1;
-    }
-  }
-}
+.mc-ui-override {
+  .el-dialog {
+    --el-dialog-padding-primary: 24px;
+    --el-dialog-title-font-size: 24px;
+    --el-dialog-border-radius: 16px;
+    --el-dialog-bg-color: var(--bg-tertiary);
+  }
+
+  .el-dialog__header {
+    padding-bottom: 24px;
+    padding-right: 0;
+
+    .el-dialog__title {
+      line-height: 32px;
+      font-weight: 600;
+      color: var(--text-primary);
+    }
+
+    .el-dialog__headerbtn {
+      width: 24px;
+      height: 24px;
+      right: 22px;
+      top: 22px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .el-dialog__close {
+        font-size: 20px;
+        color: var(--icon-tertiary);
+      }
+
+      &:hover {
+        .el-dialog__close {
+          color: var(--bg-brand-hover);
+        }
+      }
+    }
+  }
+
+  .el-dialog__footer {
+    display: flex;
+    > .el-button {
+      flex: 1;
+    }
+  }
+}

package/packages/styles/components/form.scss

@@ -1,18 +1,18 @@
-.mc-ui-override {
-  .el-form {
-    .el-form-item__label {
-      height: var(--el-component-size);
-      line-height: var(--el-component-size);
-      color: var(--text-primary);
-    }
-
-    .el-form-item--label-top .el-form-item__label {
-      line-height: 20px;
-      height: 20px;
-    }
-
-    .el-form-item {
-      margin-bottom: 20px;
-    }
-  }
-}
+.mc-ui-override {
+  .el-form {
+    .el-form-item__label {
+      height: var(--el-component-size);
+      line-height: var(--el-component-size);
+      color: var(--text-primary);
+    }
+
+    .el-form-item--label-top .el-form-item__label {
+      line-height: 20px;
+      height: 20px;
+    }
+
+    .el-form-item {
+      margin-bottom: 20px;
+    }
+  }
+}