wok-ui-ext 0.1.0
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/LICENSE +21 -0
- package/README.en.md +75 -0
- package/README.md +75 -0
- package/dist/alert/index.d.ts +10 -0
- package/dist/alert/index.js +48 -0
- package/dist/alert/style.css +116 -0
- package/dist/avatar/index.d.ts +9 -0
- package/dist/avatar/index.js +30 -0
- package/dist/avatar/style.css +32 -0
- package/dist/badge/index.d.ts +32 -0
- package/dist/badge/index.js +61 -0
- package/dist/badge/style.css +68 -0
- package/dist/breadcrumb/index.d.ts +25 -0
- package/dist/breadcrumb/index.js +47 -0
- package/dist/breadcrumb/style.css +35 -0
- package/dist/button/index.d.ts +34 -0
- package/dist/button/index.js +57 -0
- package/dist/button/style.css +133 -0
- package/dist/card/index.d.ts +25 -0
- package/dist/card/index.js +29 -0
- package/dist/card/style.css +23 -0
- package/dist/collapse/index.d.ts +89 -0
- package/dist/collapse/index.js +213 -0
- package/dist/collapse/style.css +76 -0
- package/dist/context-menu/context-menu.d.ts +113 -0
- package/dist/context-menu/context-menu.js +150 -0
- package/dist/context-menu/index.d.ts +30 -0
- package/dist/context-menu/index.js +42 -0
- package/dist/context-menu/style.css +46 -0
- package/dist/date-picker/calendar-panel.d.ts +44 -0
- package/dist/date-picker/calendar-panel.js +180 -0
- package/dist/date-picker/date-picker.d.ts +29 -0
- package/dist/date-picker/date-picker.js +81 -0
- package/dist/date-picker/date-utils.d.ts +63 -0
- package/dist/date-picker/date-utils.js +130 -0
- package/dist/date-picker/index.d.ts +7 -0
- package/dist/date-picker/index.js +5 -0
- package/dist/date-picker/layer.d.ts +19 -0
- package/dist/date-picker/layer.js +36 -0
- package/dist/date-picker/range-picker.d.ts +30 -0
- package/dist/date-picker/range-picker.js +117 -0
- package/dist/date-picker/style.css +161 -0
- package/dist/description-list/index.d.ts +37 -0
- package/dist/description-list/index.js +145 -0
- package/dist/description-list/style.css +63 -0
- package/dist/divider/index.d.ts +29 -0
- package/dist/divider/index.js +29 -0
- package/dist/divider/style.css +50 -0
- package/dist/drawer/index.d.ts +51 -0
- package/dist/drawer/index.js +183 -0
- package/dist/drawer/style.css +100 -0
- package/dist/dropdown/index.d.ts +38 -0
- package/dist/dropdown/index.js +97 -0
- package/dist/dropdown/style.css +39 -0
- package/dist/empty/index.d.ts +11 -0
- package/dist/empty/index.js +20 -0
- package/dist/empty/style.css +19 -0
- package/dist/floating-layer/index.d.ts +109 -0
- package/dist/floating-layer/index.js +337 -0
- package/dist/floating-layer/style.css +5 -0
- package/dist/form/form-item/index.d.ts +26 -0
- package/dist/form/form-item/index.js +21 -0
- package/dist/form/form-item/style.css +33 -0
- package/dist/form/form-modal/index.d.ts +18 -0
- package/dist/form/form-modal/index.js +38 -0
- package/dist/form/form.d.ts +21 -0
- package/dist/form/form.js +28 -0
- package/dist/form/index.d.ts +4 -0
- package/dist/form/index.js +4 -0
- package/dist/form/select/index.d.ts +48 -0
- package/dist/form/select/index.js +94 -0
- package/dist/form/select/style.css +29 -0
- package/dist/global.css +71 -0
- package/dist/i18n/de-DE.d.ts +2 -0
- package/dist/i18n/de-DE.js +36 -0
- package/dist/i18n/en-US.d.ts +2 -0
- package/dist/i18n/en-US.js +36 -0
- package/dist/i18n/es-ES.d.ts +2 -0
- package/dist/i18n/es-ES.js +36 -0
- package/dist/i18n/fr-FR.d.ts +2 -0
- package/dist/i18n/fr-FR.js +36 -0
- package/dist/i18n/index.d.ts +12 -0
- package/dist/i18n/index.js +39 -0
- package/dist/i18n/ja-JP.d.ts +2 -0
- package/dist/i18n/ja-JP.js +36 -0
- package/dist/i18n/ko-KR.d.ts +2 -0
- package/dist/i18n/ko-KR.js +36 -0
- package/dist/i18n/messages.d.ts +40 -0
- package/dist/i18n/messages.js +1 -0
- package/dist/i18n/wok-ui/de-DE.d.ts +2 -0
- package/dist/i18n/wok-ui/de-DE.js +20 -0
- package/dist/i18n/wok-ui/es-ES.d.ts +2 -0
- package/dist/i18n/wok-ui/es-ES.js +20 -0
- package/dist/i18n/wok-ui/fr-FR.d.ts +2 -0
- package/dist/i18n/wok-ui/fr-FR.js +20 -0
- package/dist/i18n/wok-ui/ja-JP.d.ts +2 -0
- package/dist/i18n/wok-ui/ja-JP.js +20 -0
- package/dist/i18n/wok-ui/ko-KR.d.ts +2 -0
- package/dist/i18n/wok-ui/ko-KR.js +20 -0
- package/dist/i18n/wok-ui/zh-TW.d.ts +2 -0
- package/dist/i18n/wok-ui/zh-TW.js +20 -0
- package/dist/i18n/zh-CN.d.ts +2 -0
- package/dist/i18n/zh-CN.js +36 -0
- package/dist/i18n/zh-TW.d.ts +2 -0
- package/dist/i18n/zh-TW.js +36 -0
- package/dist/icons.d.ts +88 -0
- package/dist/icons.js +176 -0
- package/dist/image/index.d.ts +38 -0
- package/dist/image/index.js +97 -0
- package/dist/image/style.css +72 -0
- package/dist/image-preview/index.d.ts +26 -0
- package/dist/image-preview/index.js +134 -0
- package/dist/image-preview/style.css +96 -0
- package/dist/index.d.ts +46 -0
- package/dist/index.js +45 -0
- package/dist/list/index.d.ts +32 -0
- package/dist/list/index.js +42 -0
- package/dist/list/list-item.d.ts +27 -0
- package/dist/list/list-item.js +51 -0
- package/dist/list/style.css +20 -0
- package/dist/loading/index.d.ts +10 -0
- package/dist/loading/index.js +46 -0
- package/dist/loading/style.css +48 -0
- package/dist/menu/index.d.ts +38 -0
- package/dist/menu/index.js +62 -0
- package/dist/menu/leaf-item.d.ts +12 -0
- package/dist/menu/leaf-item.js +41 -0
- package/dist/menu/style.css +117 -0
- package/dist/menu/sub-menu.d.ts +21 -0
- package/dist/menu/sub-menu.js +85 -0
- package/dist/menu/types.d.ts +36 -0
- package/dist/menu/types.js +1 -0
- package/dist/menu/utils.d.ts +11 -0
- package/dist/menu/utils.js +24 -0
- package/dist/modal/index.d.ts +23 -0
- package/dist/modal/index.js +79 -0
- package/dist/modal/modal.d.ts +76 -0
- package/dist/modal/modal.js +188 -0
- package/dist/modal/style.css +90 -0
- package/dist/pagination/index.d.ts +31 -0
- package/dist/pagination/index.js +215 -0
- package/dist/pagination/style.css +50 -0
- package/dist/popconfirm/api.d.ts +43 -0
- package/dist/popconfirm/api.js +77 -0
- package/dist/popconfirm/component.d.ts +47 -0
- package/dist/popconfirm/component.js +48 -0
- package/dist/popconfirm/index.d.ts +3 -0
- package/dist/popconfirm/index.js +3 -0
- package/dist/popconfirm/style.css +22 -0
- package/dist/popover/api.d.ts +36 -0
- package/dist/popover/api.js +61 -0
- package/dist/popover/component.d.ts +38 -0
- package/dist/popover/component.js +51 -0
- package/dist/popover/index.d.ts +3 -0
- package/dist/popover/index.js +3 -0
- package/dist/popover/style.css +102 -0
- package/dist/progress/index.d.ts +34 -0
- package/dist/progress/index.js +70 -0
- package/dist/progress/style.css +37 -0
- package/dist/quick-input/index.d.ts +2 -0
- package/dist/quick-input/index.js +2 -0
- package/dist/quick-input/number.d.ts +35 -0
- package/dist/quick-input/number.js +68 -0
- package/dist/quick-input/text.d.ts +20 -0
- package/dist/quick-input/text.js +61 -0
- package/dist/result/index.d.ts +39 -0
- package/dist/result/index.js +71 -0
- package/dist/result/style.css +41 -0
- package/dist/search-box/index.d.ts +26 -0
- package/dist/search-box/index.js +60 -0
- package/dist/search-box/style.css +22 -0
- package/dist/segmented/index.d.ts +42 -0
- package/dist/segmented/index.js +61 -0
- package/dist/segmented/style.css +28 -0
- package/dist/skeleton/index.d.ts +22 -0
- package/dist/skeleton/index.js +68 -0
- package/dist/skeleton/style.css +31 -0
- package/dist/steps/index.d.ts +46 -0
- package/dist/steps/index.js +95 -0
- package/dist/steps/style.css +181 -0
- package/dist/switch/index.d.ts +32 -0
- package/dist/switch/index.js +74 -0
- package/dist/switch/style.css +52 -0
- package/dist/table/body.d.ts +21 -0
- package/dist/table/body.js +35 -0
- package/dist/table/column.d.ts +78 -0
- package/dist/table/column.js +113 -0
- package/dist/table/header.d.ts +13 -0
- package/dist/table/header.js +15 -0
- package/dist/table/index.d.ts +41 -0
- package/dist/table/index.js +84 -0
- package/dist/table/row.d.ts +25 -0
- package/dist/table/row.js +74 -0
- package/dist/table/style.css +98 -0
- package/dist/tabs/index.d.ts +49 -0
- package/dist/tabs/index.js +76 -0
- package/dist/tabs/style.css +41 -0
- package/dist/tag/index.d.ts +53 -0
- package/dist/tag/index.js +100 -0
- package/dist/tag/style.css +134 -0
- package/dist/text/index.d.ts +104 -0
- package/dist/text/index.js +143 -0
- package/dist/text/style.css +113 -0
- package/dist/theme/index.d.ts +14 -0
- package/dist/theme/index.js +94 -0
- package/dist/theme/themes.d.ts +3 -0
- package/dist/theme/themes.js +323 -0
- package/dist/theme/types.d.ts +58 -0
- package/dist/theme/types.js +1 -0
- package/dist/timeline/index.d.ts +28 -0
- package/dist/timeline/index.js +35 -0
- package/dist/timeline/style.css +53 -0
- package/dist/toast/index.d.ts +53 -0
- package/dist/toast/index.js +131 -0
- package/dist/toast/style.css +76 -0
- package/dist/tooltip/api.d.ts +44 -0
- package/dist/tooltip/api.js +103 -0
- package/dist/tooltip/component.d.ts +28 -0
- package/dist/tooltip/component.js +35 -0
- package/dist/tooltip/index.d.ts +3 -0
- package/dist/tooltip/index.js +3 -0
- package/dist/tooltip/style.css +46 -0
- package/dist/tree/dragging-img.d.ts +13 -0
- package/dist/tree/dragging-img.js +23 -0
- package/dist/tree/index.d.ts +180 -0
- package/dist/tree/index.js +385 -0
- package/dist/tree/node-info.d.ts +63 -0
- package/dist/tree/node-info.js +128 -0
- package/dist/tree/node.d.ts +132 -0
- package/dist/tree/node.js +264 -0
- package/dist/tree/style.css +99 -0
- package/dist/upload/index.d.ts +48 -0
- package/dist/upload/index.js +141 -0
- package/dist/upload/style.css +41 -0
- package/package.json +51 -0
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import { setColor } from 'wok-ui';
|
|
2
|
+
import THEMES from './themes';
|
|
3
|
+
const ALL_THEMES = ['default', 'dark', 'orange', 'purple', 'green', 'red'];
|
|
4
|
+
let currentTheme = 'default';
|
|
5
|
+
/** 获取所有主题名称 */
|
|
6
|
+
export function getAllThemes() {
|
|
7
|
+
return [...ALL_THEMES];
|
|
8
|
+
}
|
|
9
|
+
/** 获取指定主题的完整配置,不传 name 则返回当前主题 */
|
|
10
|
+
export function getTheme(name) {
|
|
11
|
+
return THEMES[name ?? currentTheme];
|
|
12
|
+
}
|
|
13
|
+
/** 自定义主题配置,合并到指定主题中。若修改的是当前主题,自动重新应用 */
|
|
14
|
+
export function setTheme(name, config) {
|
|
15
|
+
Object.assign(THEMES[name], config);
|
|
16
|
+
if (name === currentTheme) {
|
|
17
|
+
applyTheme(name);
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* 应用主题
|
|
22
|
+
* 1. 通过 setColor 更新 wok-ui 框架组件的颜色
|
|
23
|
+
* 2. 通过 style.setProperty 更新 lib CSS 变量
|
|
24
|
+
*/
|
|
25
|
+
export function applyTheme(name) {
|
|
26
|
+
currentTheme = name;
|
|
27
|
+
const config = THEMES[name];
|
|
28
|
+
// 更新 wok-ui 框架颜色
|
|
29
|
+
setColor({
|
|
30
|
+
primary: config.primary,
|
|
31
|
+
success: config.success,
|
|
32
|
+
danger: config.danger,
|
|
33
|
+
warning: config.warning,
|
|
34
|
+
border: config.border,
|
|
35
|
+
text: config.text,
|
|
36
|
+
textSecondary: config.textSecondary,
|
|
37
|
+
outline: config.outline
|
|
38
|
+
});
|
|
39
|
+
// 更新所有 CSS 变量
|
|
40
|
+
const { style } = document.documentElement;
|
|
41
|
+
/* 主色 */
|
|
42
|
+
style.setProperty('--color-primary-dark', config.primaryDark);
|
|
43
|
+
style.setProperty('--color-primary-light', config.primaryLight);
|
|
44
|
+
style.setProperty('--color-primary-soft', config.primarySoft);
|
|
45
|
+
/* 功能色 */
|
|
46
|
+
style.setProperty('--color-success-light', config.successLight);
|
|
47
|
+
style.setProperty('--color-warning-light', config.warningLight);
|
|
48
|
+
style.setProperty('--color-danger-light', config.dangerLight);
|
|
49
|
+
style.setProperty('--color-info', config.primary);
|
|
50
|
+
style.setProperty('--color-info-light', config.primaryLight);
|
|
51
|
+
/* 文字颜色 */
|
|
52
|
+
style.setProperty('--text-primary', config.text);
|
|
53
|
+
style.setProperty('--text-secondary', config.textSecondary);
|
|
54
|
+
style.setProperty('--text-tertiary', config.textTertiary);
|
|
55
|
+
style.setProperty('--text-muted', config.textMuted);
|
|
56
|
+
style.setProperty('--text-placeholder', config.textPlaceholder);
|
|
57
|
+
style.setProperty('--text-disabled', config.textDisabled);
|
|
58
|
+
/* 边框颜色 */
|
|
59
|
+
style.setProperty('--border-light', config.borderLight);
|
|
60
|
+
style.setProperty('--border-medium', config.borderMedium);
|
|
61
|
+
style.setProperty('--border-dark', config.borderDark);
|
|
62
|
+
/* 背景色 */
|
|
63
|
+
style.setProperty('--bg-body', config.bgBody);
|
|
64
|
+
style.setProperty('--bg-content', config.bgContent);
|
|
65
|
+
style.setProperty('--bg-card', config.bgCard);
|
|
66
|
+
style.setProperty('--bg-sidebar', config.bgSidebar);
|
|
67
|
+
style.setProperty('--bg-hover', config.bgHover);
|
|
68
|
+
style.setProperty('--bg-active', config.bgActive);
|
|
69
|
+
/* 阴影 */
|
|
70
|
+
style.setProperty('--shadow-sm', config.shadowSm);
|
|
71
|
+
style.setProperty('--shadow-md', config.shadowMd);
|
|
72
|
+
style.setProperty('--shadow-lg', config.shadowLg);
|
|
73
|
+
style.setProperty('--shadow-primary', config.shadowPrimary);
|
|
74
|
+
style.setProperty('--shadow-danger', config.shadowDanger);
|
|
75
|
+
/* 圆角 */
|
|
76
|
+
style.setProperty('--radius-sm', config.radiusSm);
|
|
77
|
+
style.setProperty('--radius-md', config.radiusMd);
|
|
78
|
+
style.setProperty('--radius-lg', config.radiusLg);
|
|
79
|
+
style.setProperty('--radius-xl', config.radiusXl);
|
|
80
|
+
style.setProperty('--radius-full', config.radiusFull);
|
|
81
|
+
style.setProperty('--radius-circle', config.radiusCircle);
|
|
82
|
+
/* 字体 */
|
|
83
|
+
style.setProperty('--font-family', config.fontFamily);
|
|
84
|
+
style.setProperty('--font-size-title-large', config.fontSizeTitleLarge);
|
|
85
|
+
style.setProperty('--font-size-title', config.fontSizeTitle);
|
|
86
|
+
style.setProperty('--font-size-body', config.fontSizeBody);
|
|
87
|
+
style.setProperty('--font-size-small', config.fontSizeSmall);
|
|
88
|
+
style.setProperty('--font-size-xs', config.fontSizeXs);
|
|
89
|
+
style.setProperty('--font-weight-normal', config.fontWeightNormal);
|
|
90
|
+
style.setProperty('--font-weight-medium', config.fontWeightMedium);
|
|
91
|
+
style.setProperty('--font-weight-semibold', config.fontWeightSemibold);
|
|
92
|
+
/* 过渡 */
|
|
93
|
+
style.setProperty('--transition-speed', config.transitionSpeed);
|
|
94
|
+
}
|
|
@@ -0,0 +1,323 @@
|
|
|
1
|
+
const THEMES = {
|
|
2
|
+
default: {
|
|
3
|
+
/* wok-ui setColor 子集 */
|
|
4
|
+
primary: '#2d7ee9',
|
|
5
|
+
success: '#0f6e3f',
|
|
6
|
+
danger: '#c33535',
|
|
7
|
+
warning: '#b45b0a',
|
|
8
|
+
border: '#e6edf5',
|
|
9
|
+
text: '#0c2a4b',
|
|
10
|
+
textSecondary: '#1d3a5c',
|
|
11
|
+
outline: '#c7ddff',
|
|
12
|
+
/* lib 扩展 */
|
|
13
|
+
primaryDark: '#1b5fc0',
|
|
14
|
+
primaryLight: '#e8f0fe',
|
|
15
|
+
primarySoft: '#e2edff',
|
|
16
|
+
successLight: '#e0f5e9',
|
|
17
|
+
warningLight: '#fff1dd',
|
|
18
|
+
dangerLight: '#ffeeed',
|
|
19
|
+
textTertiary: '#4d6e9a',
|
|
20
|
+
textMuted: '#6b8dad',
|
|
21
|
+
textPlaceholder: '#8099b5',
|
|
22
|
+
textDisabled: '#a5c4e3',
|
|
23
|
+
borderLight: '#e6edf5',
|
|
24
|
+
borderMedium: '#d0e2fa',
|
|
25
|
+
borderDark: '#c7ddff',
|
|
26
|
+
bgBody: '#f0f4f8',
|
|
27
|
+
bgContent: '#f5f9ff',
|
|
28
|
+
bgCard: '#ffffff',
|
|
29
|
+
bgSidebar: '#ffffff',
|
|
30
|
+
bgHover: '#f0f6ff',
|
|
31
|
+
bgActive: '#e8f0fe',
|
|
32
|
+
shadowSm: '0 4px 10px rgba(0, 30, 60, 0.04)',
|
|
33
|
+
shadowMd: '0 15px 30px -12px rgba(0, 40, 80, 0.1)',
|
|
34
|
+
shadowLg: '0 20px 35px -10px rgba(30, 80, 150, 0.2)',
|
|
35
|
+
shadowPrimary: '0 8px 16px rgba(45, 126, 233, 0.4)',
|
|
36
|
+
shadowDanger: '0 10px 20px rgba(195, 53, 53, 0.15)',
|
|
37
|
+
/* 圆角 */
|
|
38
|
+
radiusSm: '8px',
|
|
39
|
+
radiusMd: '12px',
|
|
40
|
+
radiusLg: '16px',
|
|
41
|
+
radiusXl: '22px',
|
|
42
|
+
radiusFull: '40px',
|
|
43
|
+
radiusCircle: '50%',
|
|
44
|
+
/* 字体 */
|
|
45
|
+
fontFamily: '\'Inter\', -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, Helvetica, Arial, sans-serif',
|
|
46
|
+
fontSizeTitleLarge: '20px',
|
|
47
|
+
fontSizeTitle: '18px',
|
|
48
|
+
fontSizeBody: '16px',
|
|
49
|
+
fontSizeSmall: '14px',
|
|
50
|
+
fontSizeXs: '12px',
|
|
51
|
+
fontWeightNormal: '400',
|
|
52
|
+
fontWeightMedium: '500',
|
|
53
|
+
fontWeightSemibold: '600',
|
|
54
|
+
/* 过渡 */
|
|
55
|
+
transitionSpeed: '0.15s'
|
|
56
|
+
},
|
|
57
|
+
dark: {
|
|
58
|
+
primary: '#4da6ff',
|
|
59
|
+
success: '#4caf50',
|
|
60
|
+
danger: '#f44336',
|
|
61
|
+
warning: '#ff9800',
|
|
62
|
+
border: '#303030',
|
|
63
|
+
text: '#e0e0e0',
|
|
64
|
+
textSecondary: '#b0b0b0',
|
|
65
|
+
outline: '#1a3a5f',
|
|
66
|
+
primaryDark: '#3a8de0',
|
|
67
|
+
primaryLight: '#0a1a2a',
|
|
68
|
+
primarySoft: '#1a3a5f',
|
|
69
|
+
successLight: '#0d2d1a',
|
|
70
|
+
warningLight: '#2d220d',
|
|
71
|
+
dangerLight: '#2d1a1a',
|
|
72
|
+
textTertiary: '#909090',
|
|
73
|
+
textMuted: '#707070',
|
|
74
|
+
textPlaceholder: '#606060',
|
|
75
|
+
textDisabled: '#505050',
|
|
76
|
+
borderLight: '#303030',
|
|
77
|
+
borderMedium: '#404040',
|
|
78
|
+
borderDark: '#505050',
|
|
79
|
+
bgBody: '#121212',
|
|
80
|
+
bgContent: '#1a1a1a',
|
|
81
|
+
bgCard: '#222222',
|
|
82
|
+
bgSidebar: '#1e1e1e',
|
|
83
|
+
bgHover: '#2a2a2a',
|
|
84
|
+
bgActive: '#303030',
|
|
85
|
+
shadowSm: '0 4px 10px rgba(0, 0, 0, 0.3)',
|
|
86
|
+
shadowMd: '0 15px 30px -12px rgba(0, 0, 0, 0.4)',
|
|
87
|
+
shadowLg: '0 20px 35px -10px rgba(0, 0, 0, 0.5)',
|
|
88
|
+
shadowPrimary: '0 8px 16px rgba(77, 166, 255, 0.3)',
|
|
89
|
+
shadowDanger: '0 10px 20px rgba(244, 67, 54, 0.2)',
|
|
90
|
+
/* 圆角 */
|
|
91
|
+
radiusSm: '8px',
|
|
92
|
+
radiusMd: '12px',
|
|
93
|
+
radiusLg: '16px',
|
|
94
|
+
radiusXl: '22px',
|
|
95
|
+
radiusFull: '40px',
|
|
96
|
+
radiusCircle: '50%',
|
|
97
|
+
/* 字体 */
|
|
98
|
+
fontFamily: '\'Inter\', -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, Helvetica, Arial, sans-serif',
|
|
99
|
+
fontSizeTitleLarge: '20px',
|
|
100
|
+
fontSizeTitle: '18px',
|
|
101
|
+
fontSizeBody: '16px',
|
|
102
|
+
fontSizeSmall: '14px',
|
|
103
|
+
fontSizeXs: '12px',
|
|
104
|
+
fontWeightNormal: '400',
|
|
105
|
+
fontWeightMedium: '500',
|
|
106
|
+
fontWeightSemibold: '600',
|
|
107
|
+
/* 过渡 */
|
|
108
|
+
transitionSpeed: '0.15s'
|
|
109
|
+
},
|
|
110
|
+
orange: {
|
|
111
|
+
primary: '#ff6b35',
|
|
112
|
+
success: '#0f6e3f',
|
|
113
|
+
danger: '#c33535',
|
|
114
|
+
warning: '#b45b0a',
|
|
115
|
+
border: '#f0e0d0',
|
|
116
|
+
text: '#332211',
|
|
117
|
+
textSecondary: '#443322',
|
|
118
|
+
outline: '#ffe0d0',
|
|
119
|
+
primaryDark: '#e05a2a',
|
|
120
|
+
primaryLight: '#fff5f0',
|
|
121
|
+
primarySoft: '#ffe0d0',
|
|
122
|
+
successLight: '#e0f5e9',
|
|
123
|
+
warningLight: '#fff1dd',
|
|
124
|
+
dangerLight: '#ffeeed',
|
|
125
|
+
textTertiary: '#665544',
|
|
126
|
+
textMuted: '#887766',
|
|
127
|
+
textPlaceholder: '#998877',
|
|
128
|
+
textDisabled: '#bb9988',
|
|
129
|
+
borderLight: '#f0e0d0',
|
|
130
|
+
borderMedium: '#ffd0b0',
|
|
131
|
+
borderDark: '#ffb080',
|
|
132
|
+
bgBody: '#fefaf8',
|
|
133
|
+
bgContent: '#fff8f0',
|
|
134
|
+
bgCard: '#ffffff',
|
|
135
|
+
bgSidebar: '#ffffff',
|
|
136
|
+
bgHover: '#fff0e0',
|
|
137
|
+
bgActive: '#ffe0c0',
|
|
138
|
+
shadowSm: '0 4px 10px rgba(255, 107, 53, 0.04)',
|
|
139
|
+
shadowMd: '0 15px 30px -12px rgba(255, 107, 53, 0.1)',
|
|
140
|
+
shadowLg: '0 20px 35px -10px rgba(255, 107, 53, 0.2)',
|
|
141
|
+
shadowPrimary: '0 8px 16px rgba(255, 107, 53, 0.4)',
|
|
142
|
+
shadowDanger: '0 10px 20px rgba(195, 53, 53, 0.15)',
|
|
143
|
+
/* 圆角 */
|
|
144
|
+
radiusSm: '8px',
|
|
145
|
+
radiusMd: '12px',
|
|
146
|
+
radiusLg: '16px',
|
|
147
|
+
radiusXl: '22px',
|
|
148
|
+
radiusFull: '40px',
|
|
149
|
+
radiusCircle: '50%',
|
|
150
|
+
/* 字体 */
|
|
151
|
+
fontFamily: '\'Inter\', -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, Helvetica, Arial, sans-serif',
|
|
152
|
+
fontSizeTitleLarge: '20px',
|
|
153
|
+
fontSizeTitle: '18px',
|
|
154
|
+
fontSizeBody: '16px',
|
|
155
|
+
fontSizeSmall: '14px',
|
|
156
|
+
fontSizeXs: '12px',
|
|
157
|
+
fontWeightNormal: '400',
|
|
158
|
+
fontWeightMedium: '500',
|
|
159
|
+
fontWeightSemibold: '600',
|
|
160
|
+
/* 过渡 */
|
|
161
|
+
transitionSpeed: '0.15s'
|
|
162
|
+
},
|
|
163
|
+
purple: {
|
|
164
|
+
primary: '#9c27b0',
|
|
165
|
+
success: '#4caf50',
|
|
166
|
+
danger: '#f44336',
|
|
167
|
+
warning: '#ff9800',
|
|
168
|
+
border: '#e0d0e0',
|
|
169
|
+
text: '#332233',
|
|
170
|
+
textSecondary: '#443344',
|
|
171
|
+
outline: '#e1bee7',
|
|
172
|
+
primaryDark: '#7b1fa2',
|
|
173
|
+
primaryLight: '#f3e5f5',
|
|
174
|
+
primarySoft: '#e1bee7',
|
|
175
|
+
successLight: '#e8f5e9',
|
|
176
|
+
warningLight: '#fff3e0',
|
|
177
|
+
dangerLight: '#ffebee',
|
|
178
|
+
textTertiary: '#665566',
|
|
179
|
+
textMuted: '#887788',
|
|
180
|
+
textPlaceholder: '#998899',
|
|
181
|
+
textDisabled: '#bb99bb',
|
|
182
|
+
borderLight: '#e0d0e0',
|
|
183
|
+
borderMedium: '#d0b0d0',
|
|
184
|
+
borderDark: '#c090c0',
|
|
185
|
+
bgBody: '#f8f4f8',
|
|
186
|
+
bgContent: '#f5f0f5',
|
|
187
|
+
bgCard: '#ffffff',
|
|
188
|
+
bgSidebar: '#ffffff',
|
|
189
|
+
bgHover: '#f0e0f0',
|
|
190
|
+
bgActive: '#e0d0e0',
|
|
191
|
+
shadowSm: '0 4px 10px rgba(156, 39, 176, 0.04)',
|
|
192
|
+
shadowMd: '0 15px 30px -12px rgba(156, 39, 176, 0.1)',
|
|
193
|
+
shadowLg: '0 20px 35px -10px rgba(156, 39, 176, 0.2)',
|
|
194
|
+
shadowPrimary: '0 8px 16px rgba(156, 39, 176, 0.4)',
|
|
195
|
+
shadowDanger: '0 10px 20px rgba(244, 67, 54, 0.15)',
|
|
196
|
+
/* 圆角 */
|
|
197
|
+
radiusSm: '8px',
|
|
198
|
+
radiusMd: '12px',
|
|
199
|
+
radiusLg: '16px',
|
|
200
|
+
radiusXl: '22px',
|
|
201
|
+
radiusFull: '40px',
|
|
202
|
+
radiusCircle: '50%',
|
|
203
|
+
/* 字体 */
|
|
204
|
+
fontFamily: '\'Inter\', -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, Helvetica, Arial, sans-serif',
|
|
205
|
+
fontSizeTitleLarge: '20px',
|
|
206
|
+
fontSizeTitle: '18px',
|
|
207
|
+
fontSizeBody: '16px',
|
|
208
|
+
fontSizeSmall: '14px',
|
|
209
|
+
fontSizeXs: '12px',
|
|
210
|
+
fontWeightNormal: '400',
|
|
211
|
+
fontWeightMedium: '500',
|
|
212
|
+
fontWeightSemibold: '600',
|
|
213
|
+
/* 过渡 */
|
|
214
|
+
transitionSpeed: '0.15s'
|
|
215
|
+
},
|
|
216
|
+
green: {
|
|
217
|
+
primary: '#4caf50',
|
|
218
|
+
success: '#2e7d32',
|
|
219
|
+
danger: '#f44336',
|
|
220
|
+
warning: '#ff9800',
|
|
221
|
+
border: '#c8e6c9',
|
|
222
|
+
text: '#1b5e20',
|
|
223
|
+
textSecondary: '#2e7d32',
|
|
224
|
+
outline: '#c8e6c9',
|
|
225
|
+
primaryDark: '#388e3c',
|
|
226
|
+
primaryLight: '#e8f5e9',
|
|
227
|
+
primarySoft: '#c8e6c9',
|
|
228
|
+
successLight: '#e8f5e9',
|
|
229
|
+
warningLight: '#fff3e0',
|
|
230
|
+
dangerLight: '#ffebee',
|
|
231
|
+
textTertiary: '#388e3c',
|
|
232
|
+
textMuted: '#4caf50',
|
|
233
|
+
textPlaceholder: '#66bb6a',
|
|
234
|
+
textDisabled: '#81c784',
|
|
235
|
+
borderLight: '#c8e6c9',
|
|
236
|
+
borderMedium: '#a5d6a7',
|
|
237
|
+
borderDark: '#81c784',
|
|
238
|
+
bgBody: '#f1f8e9',
|
|
239
|
+
bgContent: '#e8f5e9',
|
|
240
|
+
bgCard: '#ffffff',
|
|
241
|
+
bgSidebar: '#ffffff',
|
|
242
|
+
bgHover: '#e0f2e9',
|
|
243
|
+
bgActive: '#c8e6c9',
|
|
244
|
+
shadowSm: '0 4px 10px rgba(76, 175, 80, 0.04)',
|
|
245
|
+
shadowMd: '0 15px 30px -12px rgba(76, 175, 80, 0.1)',
|
|
246
|
+
shadowLg: '0 20px 35px -10px rgba(76, 175, 80, 0.2)',
|
|
247
|
+
shadowPrimary: '0 8px 16px rgba(76, 175, 80, 0.4)',
|
|
248
|
+
shadowDanger: '0 10px 20px rgba(244, 67, 54, 0.15)',
|
|
249
|
+
/* 圆角 */
|
|
250
|
+
radiusSm: '8px',
|
|
251
|
+
radiusMd: '12px',
|
|
252
|
+
radiusLg: '16px',
|
|
253
|
+
radiusXl: '22px',
|
|
254
|
+
radiusFull: '40px',
|
|
255
|
+
radiusCircle: '50%',
|
|
256
|
+
/* 字体 */
|
|
257
|
+
fontFamily: '\'Inter\', -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, Helvetica, Arial, sans-serif',
|
|
258
|
+
fontSizeTitleLarge: '20px',
|
|
259
|
+
fontSizeTitle: '18px',
|
|
260
|
+
fontSizeBody: '16px',
|
|
261
|
+
fontSizeSmall: '14px',
|
|
262
|
+
fontSizeXs: '12px',
|
|
263
|
+
fontWeightNormal: '400',
|
|
264
|
+
fontWeightMedium: '500',
|
|
265
|
+
fontWeightSemibold: '600',
|
|
266
|
+
/* 过渡 */
|
|
267
|
+
transitionSpeed: '0.15s'
|
|
268
|
+
},
|
|
269
|
+
red: {
|
|
270
|
+
primary: '#f44336',
|
|
271
|
+
success: '#4caf50',
|
|
272
|
+
danger: '#d32f2f',
|
|
273
|
+
warning: '#ff9800',
|
|
274
|
+
border: '#ffcdd2',
|
|
275
|
+
text: '#b71c1c',
|
|
276
|
+
textSecondary: '#c62828',
|
|
277
|
+
outline: '#ffcdd2',
|
|
278
|
+
primaryDark: '#d32f2f',
|
|
279
|
+
primaryLight: '#ffebee',
|
|
280
|
+
primarySoft: '#ffcdd2',
|
|
281
|
+
successLight: '#e8f5e9',
|
|
282
|
+
warningLight: '#fff3e0',
|
|
283
|
+
dangerLight: '#ffcdd2',
|
|
284
|
+
textTertiary: '#d32f2f',
|
|
285
|
+
textMuted: '#e53935',
|
|
286
|
+
textPlaceholder: '#ef5350',
|
|
287
|
+
textDisabled: '#ef9a9a',
|
|
288
|
+
borderLight: '#ffcdd2',
|
|
289
|
+
borderMedium: '#ef9a9a',
|
|
290
|
+
borderDark: '#e57373',
|
|
291
|
+
bgBody: '#ffebee',
|
|
292
|
+
bgContent: '#ffebee',
|
|
293
|
+
bgCard: '#ffffff',
|
|
294
|
+
bgSidebar: '#ffffff',
|
|
295
|
+
bgHover: '#ffcdd2',
|
|
296
|
+
bgActive: '#ef9a9a',
|
|
297
|
+
shadowSm: '0 4px 10px rgba(244, 67, 54, 0.04)',
|
|
298
|
+
shadowMd: '0 15px 30px -12px rgba(244, 67, 54, 0.1)',
|
|
299
|
+
shadowLg: '0 20px 35px -10px rgba(244, 67, 54, 0.2)',
|
|
300
|
+
shadowPrimary: '0 8px 16px rgba(244, 67, 54, 0.4)',
|
|
301
|
+
shadowDanger: '0 10px 20px rgba(211, 47, 47, 0.15)',
|
|
302
|
+
/* 圆角 */
|
|
303
|
+
radiusSm: '8px',
|
|
304
|
+
radiusMd: '12px',
|
|
305
|
+
radiusLg: '16px',
|
|
306
|
+
radiusXl: '22px',
|
|
307
|
+
radiusFull: '40px',
|
|
308
|
+
radiusCircle: '50%',
|
|
309
|
+
/* 字体 */
|
|
310
|
+
fontFamily: '\'Inter\', -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, Helvetica, Arial, sans-serif',
|
|
311
|
+
fontSizeTitleLarge: '20px',
|
|
312
|
+
fontSizeTitle: '18px',
|
|
313
|
+
fontSizeBody: '16px',
|
|
314
|
+
fontSizeSmall: '14px',
|
|
315
|
+
fontSizeXs: '12px',
|
|
316
|
+
fontWeightNormal: '400',
|
|
317
|
+
fontWeightMedium: '500',
|
|
318
|
+
fontWeightSemibold: '600',
|
|
319
|
+
/* 过渡 */
|
|
320
|
+
transitionSpeed: '0.15s'
|
|
321
|
+
}
|
|
322
|
+
};
|
|
323
|
+
export default THEMES;
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 主题名称
|
|
3
|
+
*/
|
|
4
|
+
export type ThemeName = 'default' | 'dark' | 'orange' | 'purple' | 'green' | 'red';
|
|
5
|
+
/**
|
|
6
|
+
* 主题配置
|
|
7
|
+
* 包含颜色、圆角、字体、过渡等所有主题 token
|
|
8
|
+
*/
|
|
9
|
+
export interface ThemeConfig {
|
|
10
|
+
primary: string;
|
|
11
|
+
success: string;
|
|
12
|
+
danger: string;
|
|
13
|
+
warning: string;
|
|
14
|
+
border: string;
|
|
15
|
+
text: string;
|
|
16
|
+
textSecondary: string;
|
|
17
|
+
outline: string;
|
|
18
|
+
primaryDark: string;
|
|
19
|
+
primaryLight: string;
|
|
20
|
+
primarySoft: string;
|
|
21
|
+
successLight: string;
|
|
22
|
+
warningLight: string;
|
|
23
|
+
dangerLight: string;
|
|
24
|
+
textTertiary: string;
|
|
25
|
+
textMuted: string;
|
|
26
|
+
textPlaceholder: string;
|
|
27
|
+
textDisabled: string;
|
|
28
|
+
borderLight: string;
|
|
29
|
+
borderMedium: string;
|
|
30
|
+
borderDark: string;
|
|
31
|
+
bgBody: string;
|
|
32
|
+
bgContent: string;
|
|
33
|
+
bgCard: string;
|
|
34
|
+
bgSidebar: string;
|
|
35
|
+
bgHover: string;
|
|
36
|
+
bgActive: string;
|
|
37
|
+
shadowSm: string;
|
|
38
|
+
shadowMd: string;
|
|
39
|
+
shadowLg: string;
|
|
40
|
+
shadowPrimary: string;
|
|
41
|
+
shadowDanger: string;
|
|
42
|
+
radiusSm: string;
|
|
43
|
+
radiusMd: string;
|
|
44
|
+
radiusLg: string;
|
|
45
|
+
radiusXl: string;
|
|
46
|
+
radiusFull: string;
|
|
47
|
+
radiusCircle: string;
|
|
48
|
+
fontFamily: string;
|
|
49
|
+
fontSizeTitleLarge: string;
|
|
50
|
+
fontSizeTitle: string;
|
|
51
|
+
fontSizeBody: string;
|
|
52
|
+
fontSizeSmall: string;
|
|
53
|
+
fontSizeXs: string;
|
|
54
|
+
fontWeightNormal: string;
|
|
55
|
+
fontWeightMedium: string;
|
|
56
|
+
fontWeightSemibold: string;
|
|
57
|
+
transitionSpeed: string;
|
|
58
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { DivModule, SubModulesOpt } from 'wok-ui';
|
|
2
|
+
import './style.less';
|
|
3
|
+
/**
|
|
4
|
+
* 时间轴条目选项
|
|
5
|
+
*/
|
|
6
|
+
export interface TimelineItem {
|
|
7
|
+
/**
|
|
8
|
+
* 条目标题
|
|
9
|
+
*/
|
|
10
|
+
title: string;
|
|
11
|
+
/**
|
|
12
|
+
* 条目内容
|
|
13
|
+
*/
|
|
14
|
+
content: SubModulesOpt;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* 时间轴组件
|
|
18
|
+
* 展示一系列按时间顺序排列的条目
|
|
19
|
+
*/
|
|
20
|
+
export declare class Timeline extends DivModule {
|
|
21
|
+
constructor(opts: {
|
|
22
|
+
showIndex?: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* 时间轴条目列表
|
|
25
|
+
*/
|
|
26
|
+
items: TimelineItem[];
|
|
27
|
+
});
|
|
28
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { DivModule } from 'wok-ui';
|
|
2
|
+
import './style.css';
|
|
3
|
+
/**
|
|
4
|
+
* 时间轴组件
|
|
5
|
+
* 展示一系列按时间顺序排列的条目
|
|
6
|
+
*/
|
|
7
|
+
export class Timeline extends DivModule {
|
|
8
|
+
constructor(opts) {
|
|
9
|
+
super('wok-ui-ext-timeline');
|
|
10
|
+
for (const [index, item] of opts.items.entries()) {
|
|
11
|
+
this.addChild({
|
|
12
|
+
classNames: 'wok-ui-ext-timeline-item',
|
|
13
|
+
children: [
|
|
14
|
+
{
|
|
15
|
+
classNames: 'wok-ui-ext-timeline-dot',
|
|
16
|
+
innerText: opts.showIndex ? (index + 1).toString() : ''
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
classNames: 'wok-ui-ext-timeline-content',
|
|
20
|
+
children: [
|
|
21
|
+
{
|
|
22
|
+
classNames: 'wok-ui-ext-timeline-title',
|
|
23
|
+
innerText: item.title
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
classNames: 'wok-ui-ext-timeline-body',
|
|
27
|
+
children: item.content
|
|
28
|
+
}
|
|
29
|
+
]
|
|
30
|
+
}
|
|
31
|
+
]
|
|
32
|
+
});
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
.wok-ui-ext-timeline {
|
|
2
|
+
padding-left: 24px;
|
|
3
|
+
}
|
|
4
|
+
.wok-ui-ext-timeline .wok-ui-ext-timeline-item {
|
|
5
|
+
position: relative;
|
|
6
|
+
}
|
|
7
|
+
.wok-ui-ext-timeline .wok-ui-ext-timeline-item::before {
|
|
8
|
+
content: '';
|
|
9
|
+
position: absolute;
|
|
10
|
+
left: -1px;
|
|
11
|
+
top: 0;
|
|
12
|
+
bottom: 0;
|
|
13
|
+
width: 2px;
|
|
14
|
+
background-color: var(--border-light);
|
|
15
|
+
z-index: 1;
|
|
16
|
+
}
|
|
17
|
+
.wok-ui-ext-timeline .wok-ui-ext-timeline-item:last-child::before {
|
|
18
|
+
display: none;
|
|
19
|
+
}
|
|
20
|
+
.wok-ui-ext-timeline .wok-ui-ext-timeline-item .wok-ui-ext-timeline-dot {
|
|
21
|
+
position: absolute;
|
|
22
|
+
width: 2rem;
|
|
23
|
+
height: 2rem;
|
|
24
|
+
left: 0;
|
|
25
|
+
top: calc(var(--font-size-title) / 2);
|
|
26
|
+
transform: translate(-50%, -50%);
|
|
27
|
+
border-radius: var(--radius-circle);
|
|
28
|
+
background-color: var(--bg-card);
|
|
29
|
+
border: 2px solid var(--color-primary);
|
|
30
|
+
z-index: 1;
|
|
31
|
+
display: flex;
|
|
32
|
+
align-items: center;
|
|
33
|
+
justify-content: center;
|
|
34
|
+
font-size: var(--font-size-small);
|
|
35
|
+
color: var(--text-primary);
|
|
36
|
+
}
|
|
37
|
+
.wok-ui-ext-timeline .wok-ui-ext-timeline-item .wok-ui-ext-timeline-content {
|
|
38
|
+
background-color: var(--bg-card);
|
|
39
|
+
border-radius: var(--radius-md);
|
|
40
|
+
padding: 0 1rem 2rem 2rem;
|
|
41
|
+
}
|
|
42
|
+
.wok-ui-ext-timeline .wok-ui-ext-timeline-item .wok-ui-ext-timeline-content .wok-ui-ext-timeline-title {
|
|
43
|
+
font-size: var(--font-size-title);
|
|
44
|
+
font-weight: var(--font-weight-semibold);
|
|
45
|
+
color: var(--text-primary);
|
|
46
|
+
margin-bottom: 1rem;
|
|
47
|
+
line-height: 1;
|
|
48
|
+
}
|
|
49
|
+
.wok-ui-ext-timeline .wok-ui-ext-timeline-item .wok-ui-ext-timeline-content .wok-ui-ext-timeline-body {
|
|
50
|
+
font-size: var(--font-size-small);
|
|
51
|
+
color: var(--text-tertiary);
|
|
52
|
+
line-height: 1.57;
|
|
53
|
+
}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import './style.less';
|
|
2
|
+
export interface ToastOpts {
|
|
3
|
+
/**
|
|
4
|
+
* 类型
|
|
5
|
+
*/
|
|
6
|
+
type: 'success' | 'warning' | 'error' | 'info';
|
|
7
|
+
/**
|
|
8
|
+
* 消息内容
|
|
9
|
+
*/
|
|
10
|
+
text: string;
|
|
11
|
+
/**
|
|
12
|
+
* 持续时间
|
|
13
|
+
*/
|
|
14
|
+
duration?: number;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* 显示弹出式消息
|
|
18
|
+
* @param opts
|
|
19
|
+
*/
|
|
20
|
+
export declare function showToast(opts: {
|
|
21
|
+
/**
|
|
22
|
+
* 类型
|
|
23
|
+
*/
|
|
24
|
+
type: 'success' | 'warning' | 'error' | 'info';
|
|
25
|
+
/**
|
|
26
|
+
* 消息内容
|
|
27
|
+
*/
|
|
28
|
+
text: string;
|
|
29
|
+
/**
|
|
30
|
+
* 持续时间
|
|
31
|
+
*/
|
|
32
|
+
duration?: number;
|
|
33
|
+
}): void;
|
|
34
|
+
/**
|
|
35
|
+
* 显示信息消息
|
|
36
|
+
* @param text 消息内容
|
|
37
|
+
*/
|
|
38
|
+
export declare function showInfo(text: string): void;
|
|
39
|
+
/**
|
|
40
|
+
* 显示错误消息
|
|
41
|
+
* @param errMsg 错误消息内容
|
|
42
|
+
*/
|
|
43
|
+
export declare function showError(errMsg: any): void;
|
|
44
|
+
/**
|
|
45
|
+
* 显示警告消息
|
|
46
|
+
* @param errMsg 警告消息内容
|
|
47
|
+
*/
|
|
48
|
+
export declare function showWarning(errMsg: any): void;
|
|
49
|
+
/**
|
|
50
|
+
* 显示成功消息
|
|
51
|
+
* @param text 成功消息内容
|
|
52
|
+
*/
|
|
53
|
+
export declare function showSuccess(text: string): void;
|