@agile-team/wl-skills-ui 1.6.2

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 (150) hide show
  1. package/CHANGELOG.md +207 -0
  2. package/README.md +623 -0
  3. package/SKILL.md +632 -0
  4. package/bin/wl-ui.js +794 -0
  5. package/design/spec/color.md +41 -0
  6. package/design/spec/spacing.md +28 -0
  7. package/design/spec/typography.md +29 -0
  8. package/design/tokens/base.css +144 -0
  9. package/design/tokens/index.css +8 -0
  10. package/dist/ag-grid-override.scss +1 -0
  11. package/dist/element.scss +1 -0
  12. package/dist/index.scss +1 -0
  13. package/dist/portal.scss +1 -0
  14. package/dist/style-override.scss +1 -0
  15. package/dist/tokens.css +144 -0
  16. package/es/chunk-GBB7LDKQ.js +261 -0
  17. package/es/chunk-MDI2SCUP.js +281 -0
  18. package/es/chunk-QDTNMM7W.js +286 -0
  19. package/es/chunk-YLNAFAWE.js +233 -0
  20. package/es/common-preset.d.ts +38 -0
  21. package/es/common-preset.js +157 -0
  22. package/es/index.d.ts +32 -0
  23. package/es/index.js +1 -0
  24. package/es/presets/security.d.ts +16 -0
  25. package/es/presets/security.js +99 -0
  26. package/es/renderers-BFRSp2BH.d.ts +51 -0
  27. package/es/renderers-DMZbi_Gs.d.ts +51 -0
  28. package/es/renderers-DWhUlI2y.d.ts +47 -0
  29. package/es/types-04qLKHMt.d.ts +62 -0
  30. package/es/types-BrCPjAH6.d.ts +62 -0
  31. package/es/types-QZ1gy9KX.d.ts +63 -0
  32. package/examples/migration-operations-to-renderOps.md +107 -0
  33. package/examples/wk-exempt.example.json +30 -0
  34. package/mcp/server.js +394 -0
  35. package/package.json +130 -0
  36. package/reference/SelectPopupCom.vue +634 -0
  37. package/reference/ag-cell-renders.ts +644 -0
  38. package/reference/define-columns.ts +185 -0
  39. package/reference/jhlc.d.ts +1 -0
  40. package/scanner/coverage.mjs +287 -0
  41. package/scanner/exempt.mjs +127 -0
  42. package/scanner/fix.mjs +216 -0
  43. package/scanner/index.mjs +403 -0
  44. package/scanner/integration.mjs +155 -0
  45. package/scanner/report.mjs +459 -0
  46. package/scanner/rules/_shared.mjs +134 -0
  47. package/scanner/rules/button.mjs +97 -0
  48. package/scanner/rules/color.mjs +118 -0
  49. package/scanner/rules/componentFamily.mjs +184 -0
  50. package/scanner/rules/dialog.mjs +42 -0
  51. package/scanner/rules/form.mjs +86 -0
  52. package/scanner/rules/index.mjs +58 -0
  53. package/scanner/rules/table.mjs +170 -0
  54. package/scanner/rules/tag.mjs +245 -0
  55. package/scanner/snapshot.mjs +198 -0
  56. package/skills/_flows/full-audit.md +65 -0
  57. package/skills/_flows/legacy-skin-align.md +71 -0
  58. package/skills/_flows/new-project-init.md +80 -0
  59. package/skills/_flows/progressive-migrate.md +49 -0
  60. package/skills/_meta/_compat/README.md +47 -0
  61. package/skills/_meta/_compat/editors.json +76 -0
  62. package/skills/_meta/_compat/headers/agents.txt +7 -0
  63. package/skills/_meta/_compat/headers/claude-code.txt +7 -0
  64. package/skills/_meta/_compat/headers/cline.txt +7 -0
  65. package/skills/_meta/_compat/headers/cursor-mdc.txt +5 -0
  66. package/skills/_meta/_compat/headers/github-copilot.txt +5 -0
  67. package/skills/_meta/_compat/headers/kiro.txt +4 -0
  68. package/skills/_meta/_compat/headers/qoder.txt +4 -0
  69. package/skills/_meta/_compat/headers/trae.txt +3 -0
  70. package/skills/_meta/_compat/headers/windsurf.txt +5 -0
  71. package/skills/_meta/_detection.md +81 -0
  72. package/skills/_meta/_registry.md +96 -0
  73. package/skills/element/component-family/SKILL.md +71 -0
  74. package/skills/element/el-dialog/SKILL.md +124 -0
  75. package/skills/element/el-form/SKILL.md +84 -0
  76. package/skills/element/el-table/SKILL.md +86 -0
  77. package/skills/element/el-tag/SKILL.md +127 -0
  78. package/skills/layouts/detail-page/SKILL.md +99 -0
  79. package/skills/layouts/form-dialog/SKILL.md +128 -0
  80. package/skills/layouts/list-page/SKILL.md +111 -0
  81. package/skills/layouts/tree-list/SKILL.md +108 -0
  82. package/skills/ops/audit/SKILL.md +109 -0
  83. package/skills/ops/fix/SKILL.md +52 -0
  84. package/skills/ops/fix/USAGE.md +24 -0
  85. package/skills/ops/migrate/SKILL.md +157 -0
  86. package/skills/ops/scan/SKILL.md +71 -0
  87. package/skills/ops/scan/USAGE.md +16 -0
  88. package/skills/runtime/design-tokens/SKILL.md +88 -0
  89. package/skills/runtime/design-tokens/USAGE.md +19 -0
  90. package/skills/runtime/migration/SKILL.md +106 -0
  91. package/skills/runtime/migration/USAGE.md +34 -0
  92. package/skills/runtime/style-align/SKILL.md +124 -0
  93. package/skills/runtime/style-align/USAGE.md +52 -0
  94. package/skills/vendors/ag-grid/SKILL.md +94 -0
  95. package/skills/vendors/base-table/SKILL.md +57 -0
  96. package/skills/vendors/c-components/SKILL.md +36 -0
  97. package/skills/vendors/custom-wrappers/SKILL.md +45 -0
  98. package/skills/vendors/jh-components/SKILL.md +42 -0
  99. package/skills/vendors/unknown-wrapper/SKILL.md +44 -0
  100. package/standards/engineering/01-import-order.md +46 -0
  101. package/standards/engineering/02-naming.md +54 -0
  102. package/standards/engineering/03-scss-structure.md +59 -0
  103. package/standards/ui/01-table.md +111 -0
  104. package/standards/ui/02-button.md +83 -0
  105. package/standards/ui/03-form.md +118 -0
  106. package/standards/ui/04-tag-status.md +110 -0
  107. package/standards/ui/05-dialog-pagination.md +118 -0
  108. package/styles/element/_card.scss +26 -0
  109. package/styles/element/_descriptions.scss +22 -0
  110. package/styles/element/_dialog.scss +43 -0
  111. package/styles/element/_drawer.scss +22 -0
  112. package/styles/element/_feedback.scss +52 -0
  113. package/styles/element/_form.scss +22 -0
  114. package/styles/element/_navigation.scss +36 -0
  115. package/styles/element/_overlay.scss +32 -0
  116. package/styles/element/_pagination.scss +16 -0
  117. package/styles/element/_steps.scss +32 -0
  118. package/styles/element/_table.scss +13 -0
  119. package/styles/element/_tabs.scss +40 -0
  120. package/styles/element/_tree.scss +27 -0
  121. package/styles/element/_upload.scss +34 -0
  122. package/styles/element/index.scss +17 -0
  123. package/styles/index.scss +21 -0
  124. package/styles/layouts/_detail-page.scss +27 -0
  125. package/styles/layouts/_form-dialog.scss +19 -0
  126. package/styles/layouts/_list-page.scss +47 -0
  127. package/styles/layouts/_tree-list.scss +33 -0
  128. package/styles/layouts/index.scss +6 -0
  129. package/styles/presets/element-only.scss +6 -0
  130. package/styles/presets/full.scss +12 -0
  131. package/styles/presets/security.scss +37 -0
  132. package/styles/presets/skin.scss +14 -0
  133. package/styles/presets/tokens-only.scss +7 -0
  134. package/styles/tokens/index.scss +79 -0
  135. package/styles/vendors/_ag-grid.scss +273 -0
  136. package/styles/vendors/_base-components.scss +480 -0
  137. package/styles/vendors/_base-query-toolbar.scss +253 -0
  138. package/styles/vendors/_base-table.scss +41 -0
  139. package/styles/vendors/_c-components.scss +34 -0
  140. package/styles/vendors/_custom-wrappers.scss +30 -0
  141. package/styles/vendors/_jh-drag-col.scss +63 -0
  142. package/styles/vendors/_jh-pagination.scss +81 -0
  143. package/styles/vendors/_jh-tree.scss +196 -0
  144. package/styles/vendors/_portal.scss +114 -0
  145. package/styles/vendors/index.scss +17 -0
  146. package/templates/ag-grid-page/TPL-AG-GRID.md +76 -0
  147. package/templates/form-dialog/TPL-FORM-DIALOG.md +165 -0
  148. package/templates/list-page/TPL-LIST.md +139 -0
  149. package/templates/tree-list/TPL-TREE-LIST.md +176 -0
  150. package/templates/ui-optimization-report/TPL-UI-OPTIM-REPORT.md +343 -0
package/styles/index.scss ADDED
@@ -0,0 +1,21 @@
1
+ // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
2
+ // wk-skills-ui — 样式层入口（v3 默认 = full preset）
3
+ //
4
+ // 五层架构：
5
+ // L0 tokens — 设计令牌（颜色/间距/圆角/字号）
6
+ // L1 element — Element Plus 控件对齐
7
+ // L2 vendors — 封装组件化妆（Base*/jh-*/C_*/c_*/custom + AG Grid + portal）
8
+ // L3 layouts — 团队约定页面骨架（list-page / tree-list / form-dialog ...）
9
+ // L4 runtime — 业务渲染（TS/JS API，不在样式层）
10
+ //
11
+ // 不同场景按需替换：
12
+ // 完整接入（推荐 / 新项目）：@use 'wk-skills-ui/styles' as *;
13
+ // 化妆模式（老项目）： @use 'wk-skills-ui/styles/presets/skin' as *;
14
+ // 仅 Element： @use 'wk-skills-ui/styles/presets/element-only' as *;
15
+ // 仅 tokens： @use 'wk-skills-ui/styles/presets/tokens-only' as *;
16
+ //
17
+ // 前置：在 index.html <head> 加载设计令牌：
18
+ // <link rel="stylesheet" href="/node_modules/@agile-team/wk-skills-ui/design/tokens/base.css" />
19
+ // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
20
+
21
+ @forward './presets/full';
package/styles/layouts/_detail-page.scss ADDED
@@ -0,0 +1,27 @@
1
+ // styles/layouts/_detail-page.scss — 详情页骨架（描述列表 + 卡片）
2
+
3
+ .detail-page {
4
+ padding: 12px;
5
+ display: flex;
6
+ flex-direction: column;
7
+ gap: 12px;
8
+
9
+ &__header {
10
+ background: var(--el-bg-color, #fff);
11
+ padding: 16px;
12
+ border-radius: var(--el-border-radius-base, 4px);
13
+ }
14
+
15
+ &__section {
16
+ background: var(--el-bg-color, #fff);
17
+ padding: 16px;
18
+ border-radius: var(--el-border-radius-base, 4px);
19
+
20
+ > h3 {
21
+ font-size: 14px;
22
+ font-weight: 600;
23
+ margin: 0 0 12px;
24
+ color: var(--el-text-color-primary);
25
+ }
26
+ }
27
+ }
package/styles/layouts/_form-dialog.scss ADDED
@@ -0,0 +1,19 @@
1
+ // styles/layouts/_form-dialog.scss — 表单弹窗骨架（el-dialog 内部一致性）
2
+ // 适用：所有 add/edit/view 模式的弹窗
3
+ //
4
+ // 【DOM 约定】el-dialog 内部 .form-dialog__body / .form-dialog__footer
5
+
6
+ .form-dialog {
7
+ &__body {
8
+ padding: 0 8px;
9
+ .el-form-item {
10
+ margin-bottom: 12px;
11
+ }
12
+ }
13
+
14
+ &__footer {
15
+ display: flex;
16
+ justify-content: flex-end;
17
+ gap: 8px;
18
+ }
19
+ }
package/styles/layouts/_list-page.scss ADDED
@@ -0,0 +1,47 @@
1
+ // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
2
+ // styles/layouts/_list-page.scss — 标准列表页骨架
3
+ // 适用：搜索区 + 工具栏 + 表格 + 分页 的经典 CRUD 列表页
4
+ //
5
+ // 【DOM 结构约定】
6
+ // <div class="list-page">
7
+ // <div class="list-page__search"> 搜索区（el-form inline）
8
+ // <div class="list-page__toolbar"> 工具栏（新增/导入/导出按钮）
9
+ // <div class="list-page__table"> 表格区（BaseTable / el-table）
10
+ // <div class="list-page__pager"> 分页区（el-pagination）
11
+ // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
12
+
13
+ .list-page {
14
+ display: flex;
15
+ flex-direction: column;
16
+ height: 100%;
17
+ padding: 12px;
18
+ gap: 12px;
19
+ background: var(--el-bg-color-page, #f5f7fa);
20
+
21
+ &__search {
22
+ background: var(--el-bg-color, #fff);
23
+ padding: 12px 16px 0;
24
+ border-radius: var(--el-border-radius-base, 4px);
25
+ }
26
+
27
+ &__toolbar {
28
+ display: flex;
29
+ justify-content: flex-end;
30
+ gap: 8px;
31
+ padding: 0 4px;
32
+ }
33
+
34
+ &__table {
35
+ flex: 1;
36
+ min-height: 0;
37
+ background: var(--el-bg-color, #fff);
38
+ border-radius: var(--el-border-radius-base, 4px);
39
+ overflow: hidden;
40
+ }
41
+
42
+ &__pager {
43
+ display: flex;
44
+ justify-content: flex-end;
45
+ padding: 8px 0;
46
+ }
47
+ }
package/styles/layouts/_tree-list.scss ADDED
@@ -0,0 +1,33 @@
1
+ // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
2
+ // styles/layouts/_tree-list.scss — 左树右表骨架（不含 jh-drag-col 实现）
3
+ // 适用：左侧组织/分类树 + 右侧数据列表的双栏页面
4
+ //
5
+ // 【DOM 结构约定】
6
+ // <div class="tree-list">
7
+ // <div class="tree-list__aside"> 左树
8
+ // <div class="tree-list__main"> 右侧 list-page
9
+ //
10
+ // 注：使用 jh-drag-col 的项目，其样式由 vendors/_jh-drag-col.scss 提供，
11
+ // 本文件仅提供基础 flex 骨架，二者可叠加使用。
12
+ // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
13
+
14
+ .tree-list {
15
+ display: flex;
16
+ height: 100%;
17
+ gap: 12px;
18
+
19
+ &__aside {
20
+ width: 240px;
21
+ flex-shrink: 0;
22
+ background: var(--el-bg-color, #fff);
23
+ border-radius: var(--el-border-radius-base, 4px);
24
+ padding: 12px;
25
+ overflow: auto;
26
+ }
27
+
28
+ &__main {
29
+ flex: 1;
30
+ min-width: 0;
31
+ overflow: hidden;
32
+ }
33
+ }
package/styles/layouts/index.scss ADDED
@@ -0,0 +1,6 @@
1
+ // styles/layouts/index.scss — 页面骨架层（L3）汇总
2
+
3
+ @forward './_list-page';
4
+ @forward './_tree-list';
5
+ @forward './_form-dialog';
6
+ @forward './_detail-page';
package/styles/presets/element-only.scss ADDED
@@ -0,0 +1,6 @@
1
+ // styles/presets/element-only.scss — 仅 Element Plus 对齐预设
2
+ // 包含：L0 tokens + L1 element
3
+ // 适用：只用原生 Element Plus、没有自封装的小型项目
4
+
5
+ @forward '../tokens/index';
6
+ @forward '../element/index';
package/styles/presets/full.scss ADDED
@@ -0,0 +1,12 @@
1
+ // styles/presets/full.scss — 完整接入预设（默认推荐 / 新项目）
2
+ // 包含：L0 tokens + L1 element + L2 vendors + L3 layouts
3
+ //
4
+ // 使用：
5
+ // @use '@agile-team/wk-skills-ui/styles' as *;
6
+ // // 等价于：
7
+ // @use '@agile-team/wk-skills-ui/styles/presets/full' as *;
8
+
9
+ @forward '../tokens/index';
10
+ @forward '../element/index';
11
+ @forward '../vendors/index';
12
+ @forward '../layouts/index';
package/styles/presets/security.scss ADDED
@@ -0,0 +1,37 @@
1
+ // styles/presets/security.scss — 安防模块样式预设
2
+ // 基于 skin 模式（L0 + L1 + L2），主色跟随统一 PPT 规范
3
+ //
4
+ // 适用场景：
5
+ // - wl-ui-security 项目接入 skills-ui
6
+ // - 不包含 L3 layouts（security 已有自己的页面骨架）
7
+ //
8
+ // 使用：
9
+ // @use '@agile-team/wk-skills-ui/styles/presets/security' as *;
10
+
11
+ @forward '../tokens/index';
12
+ @forward '../element/index';
13
+ @forward '../vendors/index';
14
+
15
+ :root {
16
+ --el-color-primary: #2254f4;
17
+ --el-color-primary-light-1: #3865f5;
18
+ --el-color-primary-light-2: #5178f6;
19
+ --el-color-primary-light-3: #7a98f8;
20
+ --el-color-primary-light-4: #91aaf9;
21
+ --el-color-primary-light-5: #a8bbfa;
22
+ --el-color-primary-light-6: #bfccfc;
23
+ --el-color-primary-light-7: #d3ddfd;
24
+ --el-color-primary-light-8: #e6ebfe;
25
+ --el-color-primary-light-9: #f2f5ff;
26
+ --el-color-primary-dark-1: #1b43c3;
27
+ --el-color-primary-dark-2: #1738a3;
28
+ --el-color-primary-dark-3: #102873;
29
+ --el-color-primary-dark-4: #0a1a4d;
30
+
31
+ --el-color-danger: #bb2d3f;
32
+ --el-color-danger-light-3: #d16b78;
33
+ --el-color-danger-light-5: #dd969f;
34
+ --el-color-danger-light-7: #e8c0c5;
35
+ --el-color-danger-light-8: #f0d5d9;
36
+ --el-color-danger-light-9: #f7eaec;
37
+ }
package/styles/presets/skin.scss ADDED
@@ -0,0 +1,14 @@
1
+ // styles/presets/skin.scss — 化妆模式（老项目专用）
2
+ // 包含：L0 tokens + L1 element + L2 vendors（不包含 L3 layouts，避免冲击老项目布局）
3
+ //
4
+ // 适用场景：
5
+ // - 老项目已有自己的 layout / 容器 class
6
+ // - 不想引入新的 .list-page / .tree-list 骨架
7
+ // - 只想"化个妆"统一控件视觉
8
+ //
9
+ // 使用：
10
+ // @use '@agile-team/wk-skills-ui/styles/presets/skin' as *;
11
+
12
+ @forward '../tokens/index';
13
+ @forward '../element/index';
14
+ @forward '../vendors/index';
package/styles/presets/tokens-only.scss ADDED
@@ -0,0 +1,7 @@
1
+ // styles/presets/tokens-only.scss — 仅设计令牌
2
+ // 适用：只想引入色板/间距/圆角变量，自己控制所有控件样式
3
+ // 注：本文件目前为空（tokens 通过 design/tokens/base.css 注入到 :root）
4
+ // 仅 SCSS 工程链需要时使用：
5
+ // @use '@agile-team/wk-skills-ui/styles/presets/tokens-only' as *;
6
+
7
+ @forward '../tokens/index';
package/styles/tokens/index.scss ADDED
@@ -0,0 +1,79 @@
1
+ // styles/tokens/index.scss — L0 设计令牌（SCSS 入口）
2
+ //
3
+ // 注意：设计令牌的主体由 design/tokens/base.css 提供（通过 <link> 在 index.html 加载）。
4
+ // 本文件提供 SCSS 变量映射层，让用户可在 SCSS 中使用 $wk-* 变量进行运算和覆盖。
5
+
6
+ // ── 颜色 ──────────────────────────────────────────────────────────────────────
7
+ $wk-color-primary: var(--el-color-primary) !default;
8
+ $wk-color-success: var(--el-color-success) !default;
9
+ $wk-color-warning: var(--el-color-warning) !default;
10
+ $wk-color-danger: var(--el-color-danger) !default;
11
+ $wk-color-error: var(--el-color-error) !default;
12
+ $wk-color-info: var(--el-color-info) !default;
13
+
14
+ $wk-color-primary-light-9: var(--el-color-primary-light-9) !default;
15
+ $wk-color-primary-light-8: var(--el-color-primary-light-8) !default;
16
+ $wk-color-primary-light-7: var(--el-color-primary-light-7) !default;
17
+ $wk-color-primary-light-6: var(--el-color-primary-light-6) !default;
18
+ $wk-color-primary-light-5: var(--el-color-primary-light-5) !default;
19
+ $wk-color-primary-light-4: var(--el-color-primary-light-4) !default;
20
+ $wk-color-primary-light-3: var(--el-color-primary-light-3) !default;
21
+ $wk-color-primary-light-2: var(--el-color-primary-light-2) !default;
22
+ $wk-color-primary-light-1: var(--el-color-primary-light-1) !default;
23
+
24
+ // ── 文字 ──────────────────────────────────────────────────────────────────────
25
+ $wk-text-color-primary: var(--el-text-color-primary) !default;
26
+ $wk-text-color-regular: var(--el-text-color-regular) !default;
27
+ $wk-text-color-secondary: var(--el-text-color-secondary) !default;
28
+ $wk-text-color-placeholder: var(--el-text-color-placeholder) !default;
29
+ $wk-text-color-disabled: var(--el-text-color-disabled) !default;
30
+
31
+ // ── 边框 ──────────────────────────────────────────────────────────────────────
32
+ $wk-border-color: var(--el-border-color) !default;
33
+ $wk-border-color-light: var(--el-border-color-light) !default;
34
+ $wk-border-color-lighter: var(--el-border-color-lighter) !default;
35
+ $wk-border-color-dark: var(--el-border-color-dark) !default;
36
+ $wk-border-color-darker: var(--el-border-color-darker) !default;
37
+
38
+ // ── 填充 ──────────────────────────────────────────────────────────────────────
39
+ $wk-fill-color: var(--el-fill-color) !default;
40
+ $wk-fill-color-light: var(--el-fill-color-light) !default;
41
+ $wk-fill-color-lighter: var(--el-fill-color-lighter) !default;
42
+ $wk-fill-color-dark: var(--el-fill-color-dark) !default;
43
+ $wk-fill-color-darker: var(--el-fill-color-darker) !default;
44
+ $wk-fill-color-blank: var(--el-fill-color-blank) !default;
45
+
46
+ // ── 字号 ──────────────────────────────────────────────────────────────────────
47
+ $wk-font-size-extra-large: var(--el-font-size-extra-large) !default;
48
+ $wk-font-size-large: var(--el-font-size-large) !default;
49
+ $wk-font-size-medium: var(--el-font-size-medium) !default;
50
+ $wk-font-size-base: var(--el-font-size-base) !default;
51
+ $wk-font-size-small: var(--el-font-size-small) !default;
52
+ $wk-font-size-extra-small: var(--el-font-size-extra-small) !default;
53
+
54
+ // ── 圆角 ──────────────────────────────────────────────────────────────────────
55
+ $wk-border-radius-base: var(--el-border-radius-base) !default;
56
+ $wk-border-radius-small: var(--el-border-radius-small) !default;
57
+ $wk-border-radius-round: var(--el-border-radius-round) !default;
58
+ $wk-border-radius-circle: var(--el-border-radius-circle) !default;
59
+
60
+ // ── 阴影 ──────────────────────────────────────────────────────────────────────
61
+ $wk-box-shadow: var(--el-box-shadow) !default;
62
+ $wk-box-shadow-light: var(--el-box-shadow-light) !default;
63
+ $wk-box-shadow-lighter: var(--el-box-shadow-lighter) !default;
64
+ $wk-box-shadow-dark: var(--el-box-shadow-dark) !default;
65
+
66
+ // ── 间距 ──────────────────────────────────────────────────────────────────────
67
+ $wk-padding: var(--el-padding) !default;
68
+ $wk-padding-large: var(--el-padding-large) !default;
69
+ $wk-padding-small: var(--el-padding-small) !default;
70
+
71
+ // ── 组件尺寸 ──────────────────────────────────────────────────────────────────
72
+ $wk-component-size-small: var(--el-component-size-small) !default;
73
+ $wk-component-size-default: var(--el-component-size-default) !default;
74
+ $wk-component-size-large: var(--el-component-size-large) !default;
75
+
76
+ // ── 侧边栏 ────────────────────────────────────────────────────────────────────
77
+ $wk-sidebar-bg: var(--el-sidebar-bg) !default;
78
+ $wk-sidebar-bg-active: var(--el-sidebar-bg-active) !default;
79
+ $wk-sidebar-width: var(--el-sidebar-width) !default;
package/styles/vendors/_ag-grid.scss ADDED
@@ -0,0 +1,273 @@
1
+ // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
2
+ // AG Grid 全局样式 — wl-ui-safe 统一设计规范
3
+ // 适用：所有使用 BaseTable renderType="agGrid" 的页面
4
+ // 维护：只改这一个文件，全项目生效
5
+ // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
6
+
7
+ // ── CSS 变量注入（AG Grid 28+ 支持）──────────────────────────────────────────
8
+ .ag-root-wrapper {
9
+ --ag-background-color: #ffffff;
10
+ --ag-odd-row-background-color: #ffffff;
11
+ --ag-header-background-color: #fafafa;
12
+ --ag-header-foreground-color: #374151;
13
+ --ag-border-color: rgba(0, 0, 0, 0.06);
14
+ --ag-row-border-color: rgba(0, 0, 0, 0.06);
15
+ --ag-row-hover-color: rgba(34, 84, 244, 0.06);
16
+ --ag-selected-row-background-color: rgba(34, 84, 244, 0.10);
17
+ --ag-range-selection-border-color: rgba(34, 84, 244, 0.4);
18
+ --ag-font-size: 13px;
19
+ --ag-font-family: inherit;
20
+ --ag-row-height: 26px;
21
+ --ag-header-height: 36px;
22
+ --ag-cell-horizontal-padding: 8px;
23
+ --ag-checkbox-checked-color: var(--el-color-primary);
24
+ --ag-input-focus-border-color: var(--el-color-primary);
25
+
26
+ border: 1px solid rgba(0, 0, 0, 0.06);
27
+ border-radius: 6px;
28
+ overflow: hidden;
29
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
30
+ }
31
+
32
+ // ── 表头 ──────────────────────────────────────────────────────────────────────
33
+ .ag-header {
34
+ background-color: #fafafa !important;
35
+ border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
36
+ min-height: 36px !important;
37
+ }
38
+
39
+ .ag-header-row {
40
+ height: 36px !important;
41
+ }
42
+
43
+ .ag-header-cell {
44
+ height: 36px !important;
45
+ padding: 0 8px !important;
46
+ font-size: 12.5px !important;
47
+ font-weight: 600 !important;
48
+ color: #374151 !important;
49
+ letter-spacing: 0.02em;
50
+ display: flex !important;
51
+ align-items: center !important;
52
+
53
+ &::after {
54
+ background-color: rgba(0, 0, 0, 0.06) !important;
55
+ }
56
+ }
57
+
58
+ .ag-header-cell-comp-wrapper {
59
+ height: 100% !important;
60
+ display: flex !important;
61
+ align-items: center !important;
62
+ flex: 1;
63
+ min-width: 0;
64
+ }
65
+
66
+ .ag-header-cell-label {
67
+ height: 100%;
68
+ display: flex !important;
69
+ align-items: center !important;
70
+ justify-content: center !important;
71
+ padding: 0 !important;
72
+ width: 100%;
73
+ }
74
+
75
+ .ag-header-cell-text {
76
+ font-size: 12.5px;
77
+ font-weight: 600;
78
+ color: #374151;
79
+ white-space: nowrap;
80
+ overflow: hidden;
81
+ text-overflow: ellipsis;
82
+ }
83
+
84
+ // 表头全选框：通过列定义 headerCheckboxSelection: true 实现，无需 CSS hack
85
+
86
+ // ── 行 ────────────────────────────────────────────────────────────────────────
87
+ .ag-row {
88
+ font-size: 13px !important;
89
+ color: var(--el-text-color-primary) !important;
90
+ border-bottom-color: var(--el-border-color-lighter) !important;
91
+ transition: background-color 0.15s ease;
92
+ }
93
+
94
+ .ag-row-even { background-color: #ffffff; }
95
+ .ag-row-odd {
96
+ background-color: #ffffff;
97
+ }
98
+
99
+ .ag-row:hover,
100
+ .ag-row.ag-row-hover {
101
+ background-color: rgba(34, 84, 244, 0.06) !important;
102
+ }
103
+
104
+ .ag-row.ag-row-selected {
105
+ background-color: rgba(34, 84, 244, 0.10) !important;
106
+ }
107
+
108
+ // ── 单元格 ────────────────────────────────────────────────────────────────────
109
+ .ag-cell {
110
+ font-size: 13px !important;
111
+ color: #374151;
112
+ padding: 0 8px !important;
113
+ display: flex !important;
114
+ align-items: center !important;
115
+ justify-content: center !important;
116
+ border-right-color: transparent !important;
117
+ }
118
+
119
+ .ag-cell-value {
120
+ overflow: hidden;
121
+ text-overflow: ellipsis;
122
+ white-space: nowrap;
123
+ max-width: 100%;
124
+ }
125
+
126
+ // 复选框单元格（header 与 body 使用相同规则，确保视觉对齐）
127
+ .ag-cell.ag-checkbox-cell { padding: 0 !important; }
128
+
129
+ // 多选列表头：精准命中 ag-header-select-all，与 body checkbox 保持相同居中方式
130
+ .ag-header-cell:has(.ag-header-select-all) {
131
+ padding: 0 !important;
132
+ justify-content: center !important;
133
+ }
134
+
135
+ .ag-header-cell.ag-header-cell-sortable:first-child,
136
+ .ag-pinned-left-header .ag-header-cell:first-child {
137
+ padding: 0 !important;
138
+ justify-content: center !important;
139
+ }
140
+
141
+ .ag-header-cell .ag-header-cell-comp-wrapper:has(.ag-checkbox) {
142
+ justify-content: center !important;
143
+ flex: none !important;
144
+ width: 100% !important;
145
+ }
146
+
147
+ // 固定列分割线
148
+ .ag-pinned-right-cols-container { border-left: 1px solid var(--el-border-color-light); }
149
+ .ag-pinned-left-cols-container { border-right: 1px solid var(--el-border-color-light); }
150
+
151
+ // ── 空数据占位 ────────────────────────────────────────────────────────────────
152
+ .ag-overlay-no-rows-wrapper {
153
+ display: flex !important;
154
+ flex-direction: column !important;
155
+ align-items: center !important;
156
+ justify-content: center !important;
157
+ padding: 56px 0;
158
+
159
+ &::before {
160
+ content: '';
161
+ display: block;
162
+ width: 100px;
163
+ height: 84px;
164
+ margin-bottom: 18px;
165
+ background-image: url("data:image/svg+xml,%3Csvg width='100' height='84' viewBox='0 0 100 84' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='8' y='10' width='84' height='70' rx='8' fill='%23E2E8F0' opacity='0.5'/%3E%3Crect x='4' y='4' width='84' height='70' rx='8' fill='white' stroke='%23CBD5E1' stroke-width='1.5'/%3E%3Crect x='4' y='4' width='84' height='22' rx='8' fill='%23EEF2FF'/%3E%3Crect x='4' y='18' width='84' height='8' fill='%23EEF2FF'/%3E%3Crect x='14' y='10' width='20' height='6' rx='3' fill='%23C7D2FE'/%3E%3Crect x='44' y='10' width='14' height='6' rx='3' fill='%23C7D2FE'/%3E%3Crect x='68' y='10' width='14' height='6' rx='3' fill='%23C7D2FE'/%3E%3Cline x1='4' y1='26' x2='88' y2='26' stroke='%23E2E8F0' stroke-width='1'/%3E%3Cline x1='40' y1='26' x2='40' y2='74' stroke='%23F1F5F9' stroke-width='1'/%3E%3Cline x1='64' y1='26' x2='64' y2='74' stroke='%23F1F5F9' stroke-width='1'/%3E%3Crect x='14' y='31' width='18' height='5' rx='2.5' fill='%23F1F5F9'/%3E%3Crect x='44' y='31' width='12' height='5' rx='2.5' fill='%23F1F5F9'/%3E%3Crect x='68' y='31' width='14' height='5' rx='2.5' fill='%23F1F5F9'/%3E%3Cline x1='4' y1='43' x2='88' y2='43' stroke='%23F8FAFC' stroke-width='1'/%3E%3Crect x='14' y='47' width='22' height='5' rx='2.5' fill='%23F8FAFC'/%3E%3Crect x='44' y='47' width='10' height='5' rx='2.5' fill='%23F8FAFC'/%3E%3Crect x='68' y='47' width='12' height='5' rx='2.5' fill='%23F8FAFC'/%3E%3Cline x1='4' y1='59' x2='88' y2='59' stroke='%23F8FAFC' stroke-width='1'/%3E%3Crect x='14' y='63' width='16' height='5' rx='2.5' fill='%23FAFAFA'/%3E%3Crect x='44' y='63' width='14' height='5' rx='2.5' fill='%23FAFAFA'/%3E%3Crect x='68' y='63' width='10' height='5' rx='2.5' fill='%23FAFAFA'/%3E%3Ccircle cx='74' cy='58' r='18' fill='white' stroke='%23E2E8F0' stroke-width='1.5'/%3E%3Ccircle cx='72' cy='56' r='9' fill='%23EEF2FF' stroke='%23818CF8' stroke-width='2'/%3E%3Cline x1='78.5' y1='62.5' x2='83' y2='67' stroke='%23818CF8' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M68.5 52.5 L75.5 59.5' stroke='%23A5B4FC' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M75.5 52.5 L68.5 59.5' stroke='%23A5B4FC' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
166
+ background-repeat: no-repeat;
167
+ background-size: contain;
168
+ background-position: center;
169
+ }
170
+
171
+ &::after {
172
+ content: '请尝试调整筛选条件或在左侧选择组织机构';
173
+ display: block;
174
+ font-size: 12px;
175
+ color: #B0B7C3;
176
+ margin-top: 6px;
177
+ letter-spacing: 0.01em;
178
+ }
179
+ }
180
+
181
+ .ag-overlay-no-rows-center {
182
+ font-size: 14px;
183
+ font-weight: 500;
184
+ color: #374151;
185
+ letter-spacing: 0.02em;
186
+ }
187
+
188
+ // ── 滚动条 ────────────────────────────────────────────────────────────────────
189
+ .ag-body-viewport::-webkit-scrollbar { width: 4px; }
190
+ .ag-body-viewport::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.15); border-radius: 2px; }
191
+ .ag-body-viewport::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.3); }
192
+ .ag-body-viewport::-webkit-scrollbar-track { background: transparent; }
193
+
194
+ .ag-body-horizontal-scroll-viewport::-webkit-scrollbar { height: 4px; }
195
+ .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-track { background: transparent; }
196
+ .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 2px; }
197
+ .ag-body-horizontal-scroll-viewport:hover::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.2); }
198
+ .ag-body-horizontal-scroll-viewport:hover::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.35); }
199
+
200
+ // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
201
+ // 表格加载动画 — 高质感定制 loading overlay
202
+ // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
203
+ @keyframes ag-spin-outer {
204
+ 0% { stroke-dashoffset: 230; }
205
+ 50% { stroke-dashoffset: 80; }
206
+ 100% { stroke-dashoffset: 230; }
207
+ }
208
+ @keyframes ag-spin-inner {
209
+ 0% { stroke-dashoffset: 150; }
210
+ 50% { stroke-dashoffset: 40; }
211
+ 100% { stroke-dashoffset: 150; }
212
+ }
213
+ @keyframes ag-rotate-cw { to { transform: rotate(360deg); } }
214
+ @keyframes ag-rotate-ccw { to { transform: rotate(-360deg); } }
215
+ @keyframes ag-pulse-dot { 0%, 100% { r: 3.5; opacity: 0.6; } 50% { r: 5; opacity: 1; } }
216
+ @keyframes ag-dot-bounce {
217
+ 0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
218
+ 40% { transform: translateY(-5px); opacity: 1; }
219
+ }
220
+
221
+ .ag-overlay-loading-wrapper {
222
+ // 磨砂玻璃背景
223
+ background: rgba(248, 249, 251, 0.82) !important;
224
+ backdrop-filter: blur(6px);
225
+ -webkit-backdrop-filter: blur(6px);
226
+ display: flex !important;
227
+ align-items: center !important;
228
+ justify-content: center !important;
229
+
230
+ .ag-overlay-loading-center {
231
+ display: flex;
232
+ flex-direction: column;
233
+ align-items: center;
234
+ gap: 14px;
235
+ }
236
+ }
237
+
238
+ // 用 ::before 注入 SVG 动画徽标
239
+ .ag-overlay-loading-center {
240
+ &::before {
241
+ content: '';
242
+ display: block;
243
+ width: 52px;
244
+ height: 52px;
245
+ background: url("data:image/svg+xml,%3Csvg width='52' height='52' viewBox='0 0 52 52' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='26' cy='26' r='22' stroke='%23F2F5FF' stroke-width='2.5'/%3E%3Ccircle cx='26' cy='26' r='22' stroke='%232254F4' stroke-width='2.5' stroke-linecap='round' stroke-dasharray='138' stroke-dashoffset='230' style='transform-origin:center;animation:ag-spin-outer 1.4s ease-in-out infinite,ag-rotate-cw 1.8s linear infinite'/%3E%3Ccircle cx='26' cy='26' r='13' stroke='%23D3DDFD' stroke-width='2'/%3E%3Ccircle cx='26' cy='26' r='13' stroke='%237A98F8' stroke-width='2' stroke-linecap='round' stroke-dasharray='82' stroke-dashoffset='150' style='transform-origin:center;animation:ag-spin-inner 1.0s ease-in-out infinite,ag-rotate-ccw 1.2s linear infinite'/%3E%3Ccircle cx='26' cy='26' r='3.5' fill='%232254F4' style='transform-origin:center;animation:ag-pulse-dot 1.6s ease-in-out infinite'/%3E%3C/svg%3E") center/contain no-repeat;
246
+ }
247
+
248
+ // 省略号文字（AG Grid 默认插入"Loading..."，此处做字体优化）
249
+ font-size: 13px !important;
250
+ font-weight: 500 !important;
251
+ color: #57606a !important;
252
+ letter-spacing: 0.02em !important;
253
+ line-height: 1.4 !important;
254
+ }
255
+
256
+ // 三个跳动小点（补充到文字后面，用 ::after 伪元素模拟）
257
+ // 注：AG Grid 加载文本由 overlayLoadingTemplate 控制，
258
+ // 这里的动画是纯 CSS 加持，无需改 JS
259
+ .ag-overlay-loading-center::after {
260
+ content: '';
261
+ display: flex;
262
+ gap: 4px;
263
+ align-items: center;
264
+ justify-content: center;
265
+ height: 12px;
266
+ // 三个点用 box-shadow 模拟
267
+ width: 36px;
268
+ background: radial-gradient(circle at 6px 6px, #2254f4 3.5px, transparent 3.5px),
269
+ radial-gradient(circle at 18px 6px, #2254f4 3.5px, transparent 3.5px),
270
+ radial-gradient(circle at 30px 6px, #2254f4 3.5px, transparent 3.5px);
271
+ animation: ag-dot-bounce 1.2s ease-in-out infinite;
272
+ opacity: 0.7;
273
+ }