@mc-markets/ui 1.0.97 → 1.0.98
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/FIX_ESM_ERROR.md +22 -2
- package/README.md +18 -0
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -1
- package/packages/styles/README.md +2 -1
- package/packages/styles/index.scss +42 -56
- package/packages/styles/standalone.scss +82 -0
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mc-markets/ui",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.98",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "chenyu",
|
|
7
7
|
"description": "Vue 3 组件库，基于 Element Plus 的自定义组件",
|
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
"types": "./dist/index.d.ts"
|
|
16
16
|
},
|
|
17
17
|
"./styles/index": "./packages/styles/index.scss",
|
|
18
|
+
"./styles/standalone": "./packages/styles/standalone.scss",
|
|
18
19
|
"./styles/font": "./packages/styles/font/iconfont.css",
|
|
19
20
|
"./styles/colorfont": "./packages/styles/colorfont/iconfont.css",
|
|
20
21
|
"./dist/style": "./dist/style.css",
|
|
@@ -9,7 +9,8 @@
|
|
|
9
9
|
#### 1. **CSS 变量覆盖**
|
|
10
10
|
通过 `@forward` 指令在编译时覆盖 Element Plus 的 SCSS 变量：
|
|
11
11
|
```scss
|
|
12
|
-
|
|
12
|
+
// 使用 CSS 变量代替 SCSS 导入
|
|
13
|
+
// 自定义 CSS 变量在 :root 中定义
|
|
13
14
|
$colors: (
|
|
14
15
|
'primary': ( 'base': #FFD905 ),
|
|
15
16
|
// ... 其他颜色配置
|
|
@@ -1,63 +1,11 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @mc-markets/ui -
|
|
2
|
+
* @mc-markets/ui - 自定义样式配置
|
|
3
3
|
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
4
|
+
* 提供自定义的 CSS 变量和组件样式
|
|
5
|
+
* 不依赖 Element Plus 的 SCSS 源文件，避免导入路径问题
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
-
//
|
|
9
|
-
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
|
|
10
|
-
// 自定义颜色变量
|
|
11
|
-
$colors: (
|
|
12
|
-
'primary': (
|
|
13
|
-
'base': #FFD905,
|
|
14
|
-
),
|
|
15
|
-
'success': (
|
|
16
|
-
'base': #34A88B ,
|
|
17
|
-
),
|
|
18
|
-
'warning': (
|
|
19
|
-
'base': #FFA61F,
|
|
20
|
-
),
|
|
21
|
-
'danger': (
|
|
22
|
-
'base': #f14654,
|
|
23
|
-
),
|
|
24
|
-
'info': (
|
|
25
|
-
'base': #585660,
|
|
26
|
-
),
|
|
27
|
-
),
|
|
28
|
-
$text-color: (
|
|
29
|
-
'primary': #303133,
|
|
30
|
-
'secondary': #909399,
|
|
31
|
-
'placeholder': #C0C4CC,
|
|
32
|
-
),
|
|
33
|
-
// 自定义字体大小
|
|
34
|
-
$font-size: (
|
|
35
|
-
'extra-large': 20px,
|
|
36
|
-
'large': 18px,
|
|
37
|
-
'medium': 16px,
|
|
38
|
-
'base': 14px,
|
|
39
|
-
'small': 12px,
|
|
40
|
-
'extra-small': 10px,
|
|
41
|
-
),
|
|
42
|
-
// 自定义圆角
|
|
43
|
-
$border-radius: (
|
|
44
|
-
'base': 8px,
|
|
45
|
-
'small': 4px,
|
|
46
|
-
'round': 20px,
|
|
47
|
-
'circle': 100%,
|
|
48
|
-
),
|
|
49
|
-
$border-color-hover:var(--text-brand),
|
|
50
|
-
// 自定义阴影
|
|
51
|
-
$common-component-size: (
|
|
52
|
-
'large': 48px,
|
|
53
|
-
'default': 40px,
|
|
54
|
-
'small': 32px,
|
|
55
|
-
)
|
|
56
|
-
);
|
|
57
|
-
@use "element-plus/theme-chalk/src/index.scss" as *;
|
|
58
|
-
@use 'element-plus/theme-chalk/src/dark/css-vars.scss' as *;
|
|
59
|
-
|
|
60
|
-
// 导入项目变量
|
|
8
|
+
// 导入项目变量（@use 规则必须在其他规则之前）
|
|
61
9
|
@use './variables/border-mode.css';
|
|
62
10
|
@use './variables/color-modes-dark.css';
|
|
63
11
|
@use './variables/primitives-style.css';
|
|
@@ -75,6 +23,44 @@
|
|
|
75
23
|
@use './components/input.scss';
|
|
76
24
|
@use './components/tag.scss';
|
|
77
25
|
|
|
26
|
+
// 自定义 CSS 变量
|
|
27
|
+
:root {
|
|
28
|
+
// 自定义颜色变量
|
|
29
|
+
--el-color-primary: #FFD905;
|
|
30
|
+
--el-color-success: #34A88B;
|
|
31
|
+
--el-color-warning: #FFA61F;
|
|
32
|
+
--el-color-danger: #f14654;
|
|
33
|
+
--el-color-info: #585660;
|
|
34
|
+
|
|
35
|
+
// 文本颜色
|
|
36
|
+
--el-text-color-primary: #303133;
|
|
37
|
+
--el-text-color-regular: #606266;
|
|
38
|
+
--el-text-color-secondary: #909399;
|
|
39
|
+
--el-text-color-placeholder: #C0C4CC;
|
|
40
|
+
|
|
41
|
+
// 字体大小
|
|
42
|
+
--el-font-size-extra-large: 20px;
|
|
43
|
+
--el-font-size-large: 18px;
|
|
44
|
+
--el-font-size-medium: 16px;
|
|
45
|
+
--el-font-size-base: 14px;
|
|
46
|
+
--el-font-size-small: 12px;
|
|
47
|
+
--el-font-size-extra-small: 10px;
|
|
48
|
+
|
|
49
|
+
// 圆角
|
|
50
|
+
--el-border-radius-base: 8px;
|
|
51
|
+
--el-border-radius-small: 4px;
|
|
52
|
+
--el-border-radius-round: 20px;
|
|
53
|
+
--el-border-radius-circle: 100%;
|
|
54
|
+
|
|
55
|
+
// 组件尺寸
|
|
56
|
+
--el-component-size-large: 48px;
|
|
57
|
+
--el-component-size-default: 40px;
|
|
58
|
+
--el-component-size-small: 32px;
|
|
59
|
+
|
|
60
|
+
// 边框颜色
|
|
61
|
+
--el-border-color-hover: var(--text-brand, #FFD905);
|
|
62
|
+
}
|
|
63
|
+
|
|
78
64
|
|
|
79
65
|
|
|
80
66
|
html.dark{
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @mc-markets/ui - 独立样式文件
|
|
3
|
+
*
|
|
4
|
+
* 不依赖 Element Plus 的 SCSS 源文件，避免导入路径问题
|
|
5
|
+
* 提供完整的自定义样式配置
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
// 导入项目变量（@use 规则必须在其他规则之前）
|
|
9
|
+
@use './variables/border-mode.css';
|
|
10
|
+
@use './variables/color-modes-dark.css';
|
|
11
|
+
@use './variables/primitives-style.css';
|
|
12
|
+
@use './variables/radius-mode.css';
|
|
13
|
+
@use './variables/spacing-mode.css';
|
|
14
|
+
@use './variables/typography-desktop.css';
|
|
15
|
+
|
|
16
|
+
// 导入组件样式
|
|
17
|
+
@use './components/select.scss';
|
|
18
|
+
@use './components/checkbox.scss';
|
|
19
|
+
@use './components/button.scss';
|
|
20
|
+
@use './components/table.scss';
|
|
21
|
+
@use './components/form.scss';
|
|
22
|
+
@use './components/dialog.scss';
|
|
23
|
+
@use './components/input.scss';
|
|
24
|
+
@use './components/tag.scss';
|
|
25
|
+
@use './components/tabs.scss';
|
|
26
|
+
@use './components/override.scss';
|
|
27
|
+
|
|
28
|
+
// 自定义 CSS 变量
|
|
29
|
+
:root {
|
|
30
|
+
// 自定义颜色变量
|
|
31
|
+
--el-color-primary: #FFD905;
|
|
32
|
+
--el-color-success: #34A88B;
|
|
33
|
+
--el-color-warning: #FFA61F;
|
|
34
|
+
--el-color-danger: #f14654;
|
|
35
|
+
--el-color-info: #585660;
|
|
36
|
+
|
|
37
|
+
// 文本颜色
|
|
38
|
+
--el-text-color-primary: #303133;
|
|
39
|
+
--el-text-color-regular: #606266;
|
|
40
|
+
--el-text-color-secondary: #909399;
|
|
41
|
+
--el-text-color-placeholder: #C0C4CC;
|
|
42
|
+
|
|
43
|
+
// 字体大小
|
|
44
|
+
--el-font-size-extra-large: 20px;
|
|
45
|
+
--el-font-size-large: 18px;
|
|
46
|
+
--el-font-size-medium: 16px;
|
|
47
|
+
--el-font-size-base: 14px;
|
|
48
|
+
--el-font-size-small: 12px;
|
|
49
|
+
--el-font-size-extra-small: 10px;
|
|
50
|
+
|
|
51
|
+
// 圆角
|
|
52
|
+
--el-border-radius-base: 8px;
|
|
53
|
+
--el-border-radius-small: 4px;
|
|
54
|
+
--el-border-radius-round: 20px;
|
|
55
|
+
--el-border-radius-circle: 100%;
|
|
56
|
+
|
|
57
|
+
// 组件尺寸
|
|
58
|
+
--el-component-size-large: 48px;
|
|
59
|
+
--el-component-size-default: 40px;
|
|
60
|
+
--el-component-size-small: 32px;
|
|
61
|
+
|
|
62
|
+
// 边框颜色
|
|
63
|
+
--el-border-color-hover: var(--text-brand, #FFD905);
|
|
64
|
+
|
|
65
|
+
// 字体族
|
|
66
|
+
--el-font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
// 暗色主题
|
|
70
|
+
html.dark {
|
|
71
|
+
--el-text-color-regular: var(--text-white, #ffffff);
|
|
72
|
+
--el-disabled-border-color: rgba(255, 255, 255, 0);
|
|
73
|
+
--el-border-color-light: var(--border-primary, #dcdfe6);
|
|
74
|
+
--el-popover-border-radius: 8px;
|
|
75
|
+
--el-text-color-placeholder: var(--text-tertiary, #a8abb2);
|
|
76
|
+
--el-border-radius-base: 8px;
|
|
77
|
+
--el-border-color-hover: var(--text-brand, #FFD905);
|
|
78
|
+
--el-component-size-large: 48px;
|
|
79
|
+
--el-component-size: 40px;
|
|
80
|
+
--el-component-size-small: 32px;
|
|
81
|
+
--el-font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
82
|
+
}
|