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.
Files changed (235) hide show
  1. package/LICENSE +21 -0
  2. package/README.en.md +75 -0
  3. package/README.md +75 -0
  4. package/dist/alert/index.d.ts +10 -0
  5. package/dist/alert/index.js +48 -0
  6. package/dist/alert/style.css +116 -0
  7. package/dist/avatar/index.d.ts +9 -0
  8. package/dist/avatar/index.js +30 -0
  9. package/dist/avatar/style.css +32 -0
  10. package/dist/badge/index.d.ts +32 -0
  11. package/dist/badge/index.js +61 -0
  12. package/dist/badge/style.css +68 -0
  13. package/dist/breadcrumb/index.d.ts +25 -0
  14. package/dist/breadcrumb/index.js +47 -0
  15. package/dist/breadcrumb/style.css +35 -0
  16. package/dist/button/index.d.ts +34 -0
  17. package/dist/button/index.js +57 -0
  18. package/dist/button/style.css +133 -0
  19. package/dist/card/index.d.ts +25 -0
  20. package/dist/card/index.js +29 -0
  21. package/dist/card/style.css +23 -0
  22. package/dist/collapse/index.d.ts +89 -0
  23. package/dist/collapse/index.js +213 -0
  24. package/dist/collapse/style.css +76 -0
  25. package/dist/context-menu/context-menu.d.ts +113 -0
  26. package/dist/context-menu/context-menu.js +150 -0
  27. package/dist/context-menu/index.d.ts +30 -0
  28. package/dist/context-menu/index.js +42 -0
  29. package/dist/context-menu/style.css +46 -0
  30. package/dist/date-picker/calendar-panel.d.ts +44 -0
  31. package/dist/date-picker/calendar-panel.js +180 -0
  32. package/dist/date-picker/date-picker.d.ts +29 -0
  33. package/dist/date-picker/date-picker.js +81 -0
  34. package/dist/date-picker/date-utils.d.ts +63 -0
  35. package/dist/date-picker/date-utils.js +130 -0
  36. package/dist/date-picker/index.d.ts +7 -0
  37. package/dist/date-picker/index.js +5 -0
  38. package/dist/date-picker/layer.d.ts +19 -0
  39. package/dist/date-picker/layer.js +36 -0
  40. package/dist/date-picker/range-picker.d.ts +30 -0
  41. package/dist/date-picker/range-picker.js +117 -0
  42. package/dist/date-picker/style.css +161 -0
  43. package/dist/description-list/index.d.ts +37 -0
  44. package/dist/description-list/index.js +145 -0
  45. package/dist/description-list/style.css +63 -0
  46. package/dist/divider/index.d.ts +29 -0
  47. package/dist/divider/index.js +29 -0
  48. package/dist/divider/style.css +50 -0
  49. package/dist/drawer/index.d.ts +51 -0
  50. package/dist/drawer/index.js +183 -0
  51. package/dist/drawer/style.css +100 -0
  52. package/dist/dropdown/index.d.ts +38 -0
  53. package/dist/dropdown/index.js +97 -0
  54. package/dist/dropdown/style.css +39 -0
  55. package/dist/empty/index.d.ts +11 -0
  56. package/dist/empty/index.js +20 -0
  57. package/dist/empty/style.css +19 -0
  58. package/dist/floating-layer/index.d.ts +109 -0
  59. package/dist/floating-layer/index.js +337 -0
  60. package/dist/floating-layer/style.css +5 -0
  61. package/dist/form/form-item/index.d.ts +26 -0
  62. package/dist/form/form-item/index.js +21 -0
  63. package/dist/form/form-item/style.css +33 -0
  64. package/dist/form/form-modal/index.d.ts +18 -0
  65. package/dist/form/form-modal/index.js +38 -0
  66. package/dist/form/form.d.ts +21 -0
  67. package/dist/form/form.js +28 -0
  68. package/dist/form/index.d.ts +4 -0
  69. package/dist/form/index.js +4 -0
  70. package/dist/form/select/index.d.ts +48 -0
  71. package/dist/form/select/index.js +94 -0
  72. package/dist/form/select/style.css +29 -0
  73. package/dist/global.css +71 -0
  74. package/dist/i18n/de-DE.d.ts +2 -0
  75. package/dist/i18n/de-DE.js +36 -0
  76. package/dist/i18n/en-US.d.ts +2 -0
  77. package/dist/i18n/en-US.js +36 -0
  78. package/dist/i18n/es-ES.d.ts +2 -0
  79. package/dist/i18n/es-ES.js +36 -0
  80. package/dist/i18n/fr-FR.d.ts +2 -0
  81. package/dist/i18n/fr-FR.js +36 -0
  82. package/dist/i18n/index.d.ts +12 -0
  83. package/dist/i18n/index.js +39 -0
  84. package/dist/i18n/ja-JP.d.ts +2 -0
  85. package/dist/i18n/ja-JP.js +36 -0
  86. package/dist/i18n/ko-KR.d.ts +2 -0
  87. package/dist/i18n/ko-KR.js +36 -0
  88. package/dist/i18n/messages.d.ts +40 -0
  89. package/dist/i18n/messages.js +1 -0
  90. package/dist/i18n/wok-ui/de-DE.d.ts +2 -0
  91. package/dist/i18n/wok-ui/de-DE.js +20 -0
  92. package/dist/i18n/wok-ui/es-ES.d.ts +2 -0
  93. package/dist/i18n/wok-ui/es-ES.js +20 -0
  94. package/dist/i18n/wok-ui/fr-FR.d.ts +2 -0
  95. package/dist/i18n/wok-ui/fr-FR.js +20 -0
  96. package/dist/i18n/wok-ui/ja-JP.d.ts +2 -0
  97. package/dist/i18n/wok-ui/ja-JP.js +20 -0
  98. package/dist/i18n/wok-ui/ko-KR.d.ts +2 -0
  99. package/dist/i18n/wok-ui/ko-KR.js +20 -0
  100. package/dist/i18n/wok-ui/zh-TW.d.ts +2 -0
  101. package/dist/i18n/wok-ui/zh-TW.js +20 -0
  102. package/dist/i18n/zh-CN.d.ts +2 -0
  103. package/dist/i18n/zh-CN.js +36 -0
  104. package/dist/i18n/zh-TW.d.ts +2 -0
  105. package/dist/i18n/zh-TW.js +36 -0
  106. package/dist/icons.d.ts +88 -0
  107. package/dist/icons.js +176 -0
  108. package/dist/image/index.d.ts +38 -0
  109. package/dist/image/index.js +97 -0
  110. package/dist/image/style.css +72 -0
  111. package/dist/image-preview/index.d.ts +26 -0
  112. package/dist/image-preview/index.js +134 -0
  113. package/dist/image-preview/style.css +96 -0
  114. package/dist/index.d.ts +46 -0
  115. package/dist/index.js +45 -0
  116. package/dist/list/index.d.ts +32 -0
  117. package/dist/list/index.js +42 -0
  118. package/dist/list/list-item.d.ts +27 -0
  119. package/dist/list/list-item.js +51 -0
  120. package/dist/list/style.css +20 -0
  121. package/dist/loading/index.d.ts +10 -0
  122. package/dist/loading/index.js +46 -0
  123. package/dist/loading/style.css +48 -0
  124. package/dist/menu/index.d.ts +38 -0
  125. package/dist/menu/index.js +62 -0
  126. package/dist/menu/leaf-item.d.ts +12 -0
  127. package/dist/menu/leaf-item.js +41 -0
  128. package/dist/menu/style.css +117 -0
  129. package/dist/menu/sub-menu.d.ts +21 -0
  130. package/dist/menu/sub-menu.js +85 -0
  131. package/dist/menu/types.d.ts +36 -0
  132. package/dist/menu/types.js +1 -0
  133. package/dist/menu/utils.d.ts +11 -0
  134. package/dist/menu/utils.js +24 -0
  135. package/dist/modal/index.d.ts +23 -0
  136. package/dist/modal/index.js +79 -0
  137. package/dist/modal/modal.d.ts +76 -0
  138. package/dist/modal/modal.js +188 -0
  139. package/dist/modal/style.css +90 -0
  140. package/dist/pagination/index.d.ts +31 -0
  141. package/dist/pagination/index.js +215 -0
  142. package/dist/pagination/style.css +50 -0
  143. package/dist/popconfirm/api.d.ts +43 -0
  144. package/dist/popconfirm/api.js +77 -0
  145. package/dist/popconfirm/component.d.ts +47 -0
  146. package/dist/popconfirm/component.js +48 -0
  147. package/dist/popconfirm/index.d.ts +3 -0
  148. package/dist/popconfirm/index.js +3 -0
  149. package/dist/popconfirm/style.css +22 -0
  150. package/dist/popover/api.d.ts +36 -0
  151. package/dist/popover/api.js +61 -0
  152. package/dist/popover/component.d.ts +38 -0
  153. package/dist/popover/component.js +51 -0
  154. package/dist/popover/index.d.ts +3 -0
  155. package/dist/popover/index.js +3 -0
  156. package/dist/popover/style.css +102 -0
  157. package/dist/progress/index.d.ts +34 -0
  158. package/dist/progress/index.js +70 -0
  159. package/dist/progress/style.css +37 -0
  160. package/dist/quick-input/index.d.ts +2 -0
  161. package/dist/quick-input/index.js +2 -0
  162. package/dist/quick-input/number.d.ts +35 -0
  163. package/dist/quick-input/number.js +68 -0
  164. package/dist/quick-input/text.d.ts +20 -0
  165. package/dist/quick-input/text.js +61 -0
  166. package/dist/result/index.d.ts +39 -0
  167. package/dist/result/index.js +71 -0
  168. package/dist/result/style.css +41 -0
  169. package/dist/search-box/index.d.ts +26 -0
  170. package/dist/search-box/index.js +60 -0
  171. package/dist/search-box/style.css +22 -0
  172. package/dist/segmented/index.d.ts +42 -0
  173. package/dist/segmented/index.js +61 -0
  174. package/dist/segmented/style.css +28 -0
  175. package/dist/skeleton/index.d.ts +22 -0
  176. package/dist/skeleton/index.js +68 -0
  177. package/dist/skeleton/style.css +31 -0
  178. package/dist/steps/index.d.ts +46 -0
  179. package/dist/steps/index.js +95 -0
  180. package/dist/steps/style.css +181 -0
  181. package/dist/switch/index.d.ts +32 -0
  182. package/dist/switch/index.js +74 -0
  183. package/dist/switch/style.css +52 -0
  184. package/dist/table/body.d.ts +21 -0
  185. package/dist/table/body.js +35 -0
  186. package/dist/table/column.d.ts +78 -0
  187. package/dist/table/column.js +113 -0
  188. package/dist/table/header.d.ts +13 -0
  189. package/dist/table/header.js +15 -0
  190. package/dist/table/index.d.ts +41 -0
  191. package/dist/table/index.js +84 -0
  192. package/dist/table/row.d.ts +25 -0
  193. package/dist/table/row.js +74 -0
  194. package/dist/table/style.css +98 -0
  195. package/dist/tabs/index.d.ts +49 -0
  196. package/dist/tabs/index.js +76 -0
  197. package/dist/tabs/style.css +41 -0
  198. package/dist/tag/index.d.ts +53 -0
  199. package/dist/tag/index.js +100 -0
  200. package/dist/tag/style.css +134 -0
  201. package/dist/text/index.d.ts +104 -0
  202. package/dist/text/index.js +143 -0
  203. package/dist/text/style.css +113 -0
  204. package/dist/theme/index.d.ts +14 -0
  205. package/dist/theme/index.js +94 -0
  206. package/dist/theme/themes.d.ts +3 -0
  207. package/dist/theme/themes.js +323 -0
  208. package/dist/theme/types.d.ts +58 -0
  209. package/dist/theme/types.js +1 -0
  210. package/dist/timeline/index.d.ts +28 -0
  211. package/dist/timeline/index.js +35 -0
  212. package/dist/timeline/style.css +53 -0
  213. package/dist/toast/index.d.ts +53 -0
  214. package/dist/toast/index.js +131 -0
  215. package/dist/toast/style.css +76 -0
  216. package/dist/tooltip/api.d.ts +44 -0
  217. package/dist/tooltip/api.js +103 -0
  218. package/dist/tooltip/component.d.ts +28 -0
  219. package/dist/tooltip/component.js +35 -0
  220. package/dist/tooltip/index.d.ts +3 -0
  221. package/dist/tooltip/index.js +3 -0
  222. package/dist/tooltip/style.css +46 -0
  223. package/dist/tree/dragging-img.d.ts +13 -0
  224. package/dist/tree/dragging-img.js +23 -0
  225. package/dist/tree/index.d.ts +180 -0
  226. package/dist/tree/index.js +385 -0
  227. package/dist/tree/node-info.d.ts +63 -0
  228. package/dist/tree/node-info.js +128 -0
  229. package/dist/tree/node.d.ts +132 -0
  230. package/dist/tree/node.js +264 -0
  231. package/dist/tree/style.css +99 -0
  232. package/dist/upload/index.d.ts +48 -0
  233. package/dist/upload/index.js +141 -0
  234. package/dist/upload/style.css +41 -0
  235. 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,3 @@
1
+ import type { ThemeName, ThemeConfig } from './types';
2
+ declare const THEMES: Record<ThemeName, ThemeConfig>;
3
+ export default THEMES;
@@ -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;