@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.
- package/CHANGELOG.md +207 -0
- package/README.md +623 -0
- package/SKILL.md +632 -0
- package/bin/wl-ui.js +794 -0
- package/design/spec/color.md +41 -0
- package/design/spec/spacing.md +28 -0
- package/design/spec/typography.md +29 -0
- package/design/tokens/base.css +144 -0
- package/design/tokens/index.css +8 -0
- package/dist/ag-grid-override.scss +1 -0
- package/dist/element.scss +1 -0
- package/dist/index.scss +1 -0
- package/dist/portal.scss +1 -0
- package/dist/style-override.scss +1 -0
- package/dist/tokens.css +144 -0
- package/es/chunk-GBB7LDKQ.js +261 -0
- package/es/chunk-MDI2SCUP.js +281 -0
- package/es/chunk-QDTNMM7W.js +286 -0
- package/es/chunk-YLNAFAWE.js +233 -0
- package/es/common-preset.d.ts +38 -0
- package/es/common-preset.js +157 -0
- package/es/index.d.ts +32 -0
- package/es/index.js +1 -0
- package/es/presets/security.d.ts +16 -0
- package/es/presets/security.js +99 -0
- package/es/renderers-BFRSp2BH.d.ts +51 -0
- package/es/renderers-DMZbi_Gs.d.ts +51 -0
- package/es/renderers-DWhUlI2y.d.ts +47 -0
- package/es/types-04qLKHMt.d.ts +62 -0
- package/es/types-BrCPjAH6.d.ts +62 -0
- package/es/types-QZ1gy9KX.d.ts +63 -0
- package/examples/migration-operations-to-renderOps.md +107 -0
- package/examples/wk-exempt.example.json +30 -0
- package/mcp/server.js +394 -0
- package/package.json +130 -0
- package/reference/SelectPopupCom.vue +634 -0
- package/reference/ag-cell-renders.ts +644 -0
- package/reference/define-columns.ts +185 -0
- package/reference/jhlc.d.ts +1 -0
- package/scanner/coverage.mjs +287 -0
- package/scanner/exempt.mjs +127 -0
- package/scanner/fix.mjs +216 -0
- package/scanner/index.mjs +403 -0
- package/scanner/integration.mjs +155 -0
- package/scanner/report.mjs +459 -0
- package/scanner/rules/_shared.mjs +134 -0
- package/scanner/rules/button.mjs +97 -0
- package/scanner/rules/color.mjs +118 -0
- package/scanner/rules/componentFamily.mjs +184 -0
- package/scanner/rules/dialog.mjs +42 -0
- package/scanner/rules/form.mjs +86 -0
- package/scanner/rules/index.mjs +58 -0
- package/scanner/rules/table.mjs +170 -0
- package/scanner/rules/tag.mjs +245 -0
- package/scanner/snapshot.mjs +198 -0
- package/skills/_flows/full-audit.md +65 -0
- package/skills/_flows/legacy-skin-align.md +71 -0
- package/skills/_flows/new-project-init.md +80 -0
- package/skills/_flows/progressive-migrate.md +49 -0
- package/skills/_meta/_compat/README.md +47 -0
- package/skills/_meta/_compat/editors.json +76 -0
- package/skills/_meta/_compat/headers/agents.txt +7 -0
- package/skills/_meta/_compat/headers/claude-code.txt +7 -0
- package/skills/_meta/_compat/headers/cline.txt +7 -0
- package/skills/_meta/_compat/headers/cursor-mdc.txt +5 -0
- package/skills/_meta/_compat/headers/github-copilot.txt +5 -0
- package/skills/_meta/_compat/headers/kiro.txt +4 -0
- package/skills/_meta/_compat/headers/qoder.txt +4 -0
- package/skills/_meta/_compat/headers/trae.txt +3 -0
- package/skills/_meta/_compat/headers/windsurf.txt +5 -0
- package/skills/_meta/_detection.md +81 -0
- package/skills/_meta/_registry.md +96 -0
- package/skills/element/component-family/SKILL.md +71 -0
- package/skills/element/el-dialog/SKILL.md +124 -0
- package/skills/element/el-form/SKILL.md +84 -0
- package/skills/element/el-table/SKILL.md +86 -0
- package/skills/element/el-tag/SKILL.md +127 -0
- package/skills/layouts/detail-page/SKILL.md +99 -0
- package/skills/layouts/form-dialog/SKILL.md +128 -0
- package/skills/layouts/list-page/SKILL.md +111 -0
- package/skills/layouts/tree-list/SKILL.md +108 -0
- package/skills/ops/audit/SKILL.md +109 -0
- package/skills/ops/fix/SKILL.md +52 -0
- package/skills/ops/fix/USAGE.md +24 -0
- package/skills/ops/migrate/SKILL.md +157 -0
- package/skills/ops/scan/SKILL.md +71 -0
- package/skills/ops/scan/USAGE.md +16 -0
- package/skills/runtime/design-tokens/SKILL.md +88 -0
- package/skills/runtime/design-tokens/USAGE.md +19 -0
- package/skills/runtime/migration/SKILL.md +106 -0
- package/skills/runtime/migration/USAGE.md +34 -0
- package/skills/runtime/style-align/SKILL.md +124 -0
- package/skills/runtime/style-align/USAGE.md +52 -0
- package/skills/vendors/ag-grid/SKILL.md +94 -0
- package/skills/vendors/base-table/SKILL.md +57 -0
- package/skills/vendors/c-components/SKILL.md +36 -0
- package/skills/vendors/custom-wrappers/SKILL.md +45 -0
- package/skills/vendors/jh-components/SKILL.md +42 -0
- package/skills/vendors/unknown-wrapper/SKILL.md +44 -0
- package/standards/engineering/01-import-order.md +46 -0
- package/standards/engineering/02-naming.md +54 -0
- package/standards/engineering/03-scss-structure.md +59 -0
- package/standards/ui/01-table.md +111 -0
- package/standards/ui/02-button.md +83 -0
- package/standards/ui/03-form.md +118 -0
- package/standards/ui/04-tag-status.md +110 -0
- package/standards/ui/05-dialog-pagination.md +118 -0
- package/styles/element/_card.scss +26 -0
- package/styles/element/_descriptions.scss +22 -0
- package/styles/element/_dialog.scss +43 -0
- package/styles/element/_drawer.scss +22 -0
- package/styles/element/_feedback.scss +52 -0
- package/styles/element/_form.scss +22 -0
- package/styles/element/_navigation.scss +36 -0
- package/styles/element/_overlay.scss +32 -0
- package/styles/element/_pagination.scss +16 -0
- package/styles/element/_steps.scss +32 -0
- package/styles/element/_table.scss +13 -0
- package/styles/element/_tabs.scss +40 -0
- package/styles/element/_tree.scss +27 -0
- package/styles/element/_upload.scss +34 -0
- package/styles/element/index.scss +17 -0
- package/styles/index.scss +21 -0
- package/styles/layouts/_detail-page.scss +27 -0
- package/styles/layouts/_form-dialog.scss +19 -0
- package/styles/layouts/_list-page.scss +47 -0
- package/styles/layouts/_tree-list.scss +33 -0
- package/styles/layouts/index.scss +6 -0
- package/styles/presets/element-only.scss +6 -0
- package/styles/presets/full.scss +12 -0
- package/styles/presets/security.scss +37 -0
- package/styles/presets/skin.scss +14 -0
- package/styles/presets/tokens-only.scss +7 -0
- package/styles/tokens/index.scss +79 -0
- package/styles/vendors/_ag-grid.scss +273 -0
- package/styles/vendors/_base-components.scss +480 -0
- package/styles/vendors/_base-query-toolbar.scss +253 -0
- package/styles/vendors/_base-table.scss +41 -0
- package/styles/vendors/_c-components.scss +34 -0
- package/styles/vendors/_custom-wrappers.scss +30 -0
- package/styles/vendors/_jh-drag-col.scss +63 -0
- package/styles/vendors/_jh-pagination.scss +81 -0
- package/styles/vendors/_jh-tree.scss +196 -0
- package/styles/vendors/_portal.scss +114 -0
- package/styles/vendors/index.scss +17 -0
- package/templates/ag-grid-page/TPL-AG-GRID.md +76 -0
- package/templates/form-dialog/TPL-FORM-DIALOG.md +165 -0
- package/templates/list-page/TPL-LIST.md +139 -0
- package/templates/tree-list/TPL-TREE-LIST.md +176 -0
- package/templates/ui-optimization-report/TPL-UI-OPTIM-REPORT.md +343 -0
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { VNode } from 'vue';
|
|
2
|
+
import { T as TagMapItem, J as JhTagNode, a as OpItem } from './types-BrCPjAH6.js';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* runtime/core/renderers.ts — 通用渲染器 + 通用状态映射
|
|
6
|
+
*
|
|
7
|
+
* 依赖:vue / element-plus / @element-plus/icons-vue
|
|
8
|
+
* 无业务耦合,可独立使用。
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
/** 启用/停用 */
|
|
12
|
+
declare const ENABLE_STATUS_MAP: Record<string | number, TagMapItem>;
|
|
13
|
+
/** 审批状态(0=待审批, 1=已通过, 2=已驳回) */
|
|
14
|
+
declare const AUDIT_STATUS_MAP: Record<string | number, TagMapItem>;
|
|
15
|
+
/** 核实状态(0=未核实, 1=已核实) */
|
|
16
|
+
declare const VERIFY_STATUS_MAP: Record<string | number, TagMapItem>;
|
|
17
|
+
/** 评价级别色(一/二/三/四/五 ←→ 1-5) */
|
|
18
|
+
declare const RATING_LEVEL_COLORS: Record<string, {
|
|
19
|
+
bg: string;
|
|
20
|
+
color: string;
|
|
21
|
+
}>;
|
|
22
|
+
/** 渲染状态标签(defaultNode 格式 — jh-tag) */
|
|
23
|
+
declare function renderTagNode(value: string | number | null | undefined, map: Record<string | number, TagMapItem>): JhTagNode | null;
|
|
24
|
+
/** 渲染状态标签(defaultSlot 格式 — VNode) */
|
|
25
|
+
declare function renderTagSlot(value: string | number | null | undefined, map: Record<string | number, TagMapItem>): VNode | null;
|
|
26
|
+
/** 渲染分类/层级 plain outline Tag */
|
|
27
|
+
declare function renderClassifyTag(value: string | number | null | undefined, map: Record<string | number, TagMapItem>): VNode | null;
|
|
28
|
+
type DictResolver = (dictKey: string, value: string | number) => string | undefined;
|
|
29
|
+
/** 注入字典查询函数(解耦 Store 依赖) */
|
|
30
|
+
declare function setDictResolver(fn: DictResolver): void;
|
|
31
|
+
/** 注册单个 dictKey 的配色方案 */
|
|
32
|
+
declare function registerDictColorMap(dictKey: string, colorMap: Record<string, string>): void;
|
|
33
|
+
/** 批量注册 dictKey 配色方案 */
|
|
34
|
+
declare function registerDictColorMaps(maps: Record<string, Record<string, string>>): void;
|
|
35
|
+
/** 渲染动态字典分类 Tag,适用于 logicType=dict 的类型/来源/方式/规则类型等列 */
|
|
36
|
+
declare function renderDictClassifyTag(value: string | number | null | undefined, dictKey: string, typeColorMap?: Record<string, string>): VNode | null;
|
|
37
|
+
/** 蓝色圆角徽标(编号类) */
|
|
38
|
+
declare function renderBadge(value: string | number | null | undefined): VNode | null;
|
|
39
|
+
/** 绿色圆角徽标(数值类) */
|
|
40
|
+
declare function renderCountBadge(value: string | number | null | undefined): VNode | null;
|
|
41
|
+
/** 红色警示文本 */
|
|
42
|
+
declare function renderDangerText(value: string | number | null | undefined): VNode | null;
|
|
43
|
+
/** 评价级别圆形徽标 */
|
|
44
|
+
declare function renderRatingLevel(value: string | null | undefined): VNode | null;
|
|
45
|
+
declare const renderEnableStatus: (v: string | number | null | undefined) => JhTagNode | null;
|
|
46
|
+
declare const renderAuditStatus: (v: string | number | null | undefined) => JhTagNode | null;
|
|
47
|
+
declare const renderVerifyStatus: (v: string | number | null | undefined) => JhTagNode | null;
|
|
48
|
+
/** 渲染操作列按钮组(图标 + 胶囊 + 文字链接,自动 stopPropagation) */
|
|
49
|
+
declare function renderOps(items: OpItem[]): VNode;
|
|
50
|
+
|
|
51
|
+
export { AUDIT_STATUS_MAP as A, ENABLE_STATUS_MAP as E, RATING_LEVEL_COLORS as R, VERIFY_STATUS_MAP as V, registerDictColorMaps as a, renderAuditStatus as b, renderBadge as c, renderClassifyTag as d, renderCountBadge as e, renderDangerText as f, renderDictClassifyTag as g, renderEnableStatus as h, renderOps as i, renderRatingLevel as j, renderTagNode as k, renderTagSlot as l, renderVerifyStatus as m, registerDictColorMap as r, setDictResolver as s };
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { VNode } from 'vue';
|
|
2
|
+
import { T as TagMapItem, J as JhTagNode, a as OpItem } from './types-BrCPjAH6.js';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* runtime/core/renderers.ts — 通用渲染器 + 通用状态映射
|
|
6
|
+
*
|
|
7
|
+
* 依赖:vue / element-plus / @element-plus/icons-vue
|
|
8
|
+
* 无业务耦合,可独立使用。
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
/** 启用/停用 */
|
|
12
|
+
declare const ENABLE_STATUS_MAP: Record<string | number, TagMapItem>;
|
|
13
|
+
/** 审批状态(0=待审批, 1=已通过, 2=已驳回) */
|
|
14
|
+
declare const AUDIT_STATUS_MAP: Record<string | number, TagMapItem>;
|
|
15
|
+
/** 核实状态(0=未核实, 1=已核实) */
|
|
16
|
+
declare const VERIFY_STATUS_MAP: Record<string | number, TagMapItem>;
|
|
17
|
+
/** 评价级别色(一/二/三/四/五 ←→ 1-5) */
|
|
18
|
+
declare const RATING_LEVEL_COLORS: Record<string, {
|
|
19
|
+
bg: string;
|
|
20
|
+
color: string;
|
|
21
|
+
}>;
|
|
22
|
+
/** 渲染状态标签(defaultNode 格式 — jh-tag) */
|
|
23
|
+
declare function renderTagNode(value: string | number | null | undefined, map: Record<string | number, TagMapItem>): JhTagNode | null;
|
|
24
|
+
/** 渲染状态标签(defaultSlot 格式 — VNode) */
|
|
25
|
+
declare function renderTagSlot(value: string | number | null | undefined, map: Record<string | number, TagMapItem>): VNode | null;
|
|
26
|
+
/** 渲染分类/层级 plain outline Tag */
|
|
27
|
+
declare function renderClassifyTag(value: string | number | null | undefined, map: Record<string | number, TagMapItem>): VNode | null;
|
|
28
|
+
type DictResolver = (dictKey: string, value: string | number) => string | undefined;
|
|
29
|
+
/** 注入字典查询函数(解耦 Store 依赖) */
|
|
30
|
+
declare function setDictResolver(fn: DictResolver): void;
|
|
31
|
+
/** 渲染动态字典分类 Tag,适用于 logicType=dict 的类型/来源/方式/规则类型等列 */
|
|
32
|
+
declare function renderDictClassifyTag(value: string | number | null | undefined, dictKey: string, typeColorMap?: Record<string, string>): VNode | null;
|
|
33
|
+
/** 蓝色圆角徽标(编号类) */
|
|
34
|
+
declare function renderBadge(value: string | number | null | undefined): VNode | null;
|
|
35
|
+
/** 绿色圆角徽标(数值类) */
|
|
36
|
+
declare function renderCountBadge(value: string | number | null | undefined): VNode | null;
|
|
37
|
+
/** 红色警示文本 */
|
|
38
|
+
declare function renderDangerText(value: string | number | null | undefined): VNode | null;
|
|
39
|
+
/** 评价级别圆形徽标 */
|
|
40
|
+
declare function renderRatingLevel(value: string | null | undefined): VNode | null;
|
|
41
|
+
declare const renderEnableStatus: (v: string | number | null | undefined) => JhTagNode | null;
|
|
42
|
+
declare const renderAuditStatus: (v: string | number | null | undefined) => JhTagNode | null;
|
|
43
|
+
declare const renderVerifyStatus: (v: string | number | null | undefined) => JhTagNode | null;
|
|
44
|
+
/** 渲染操作列按钮组(图标 + 胶囊 + 文字链接,自动 stopPropagation) */
|
|
45
|
+
declare function renderOps(items: OpItem[]): VNode;
|
|
46
|
+
|
|
47
|
+
export { AUDIT_STATUS_MAP as A, ENABLE_STATUS_MAP as E, RATING_LEVEL_COLORS as R, VERIFY_STATUS_MAP as V, renderBadge as a, renderClassifyTag as b, renderCountBadge as c, renderDangerText as d, renderDictClassifyTag as e, renderEnableStatus as f, renderOps as g, renderRatingLevel as h, renderTagNode as i, renderTagSlot as j, renderVerifyStatus as k, renderAuditStatus as r, setDictResolver as s };
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import * as vue from 'vue';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* runtime/core/types.ts — 基础类型与接口定义
|
|
5
|
+
*
|
|
6
|
+
* 无任何运行时依赖,可被 types-only import 引用。
|
|
7
|
+
*/
|
|
8
|
+
/** defaultNode 返回格式(对应 jh-tag 组件配置结构) */
|
|
9
|
+
interface JhTagNode {
|
|
10
|
+
tag: "jh-tag";
|
|
11
|
+
item: Array<{
|
|
12
|
+
title: string;
|
|
13
|
+
type?: string;
|
|
14
|
+
}>;
|
|
15
|
+
}
|
|
16
|
+
/** Element Plus ElTag type 属性合法值 */
|
|
17
|
+
type ElTagType = "primary" | "success" | "warning" | "danger" | "info";
|
|
18
|
+
/** 状态映射表中每条记录 */
|
|
19
|
+
interface TagMapItem {
|
|
20
|
+
label: string;
|
|
21
|
+
type: ElTagType;
|
|
22
|
+
}
|
|
23
|
+
/** 列定义最小契约(兼容 BaseTable / el-table-column / AG Grid 适配层) */
|
|
24
|
+
interface ColumnLike {
|
|
25
|
+
name?: string;
|
|
26
|
+
label?: string;
|
|
27
|
+
width?: number | string;
|
|
28
|
+
fixed?: string | boolean;
|
|
29
|
+
type?: string;
|
|
30
|
+
defaultNode?: (ctx: {
|
|
31
|
+
row: any;
|
|
32
|
+
}) => any;
|
|
33
|
+
defaultSlot?: (ctx: {
|
|
34
|
+
row: any;
|
|
35
|
+
}) => any;
|
|
36
|
+
[key: string]: any;
|
|
37
|
+
}
|
|
38
|
+
/** renderOps:预设图标按钮 */
|
|
39
|
+
interface OpPreset {
|
|
40
|
+
type: "view" | "edit" | "del" | "log" | "ok" | "send";
|
|
41
|
+
title?: string;
|
|
42
|
+
show?: boolean;
|
|
43
|
+
onClick: (e: MouseEvent) => void;
|
|
44
|
+
}
|
|
45
|
+
/** renderOps:胶囊按钮(图标 + 文字) */
|
|
46
|
+
interface OpChip {
|
|
47
|
+
type: "chip";
|
|
48
|
+
label: string;
|
|
49
|
+
icon?: vue.Component;
|
|
50
|
+
show?: boolean;
|
|
51
|
+
onClick: (e: MouseEvent) => void;
|
|
52
|
+
}
|
|
53
|
+
/** renderOps:纯文字链接按钮 */
|
|
54
|
+
interface OpLink {
|
|
55
|
+
type: "link";
|
|
56
|
+
label: string;
|
|
57
|
+
show?: boolean;
|
|
58
|
+
onClick: (e: MouseEvent) => void;
|
|
59
|
+
}
|
|
60
|
+
type OpItem = OpPreset | OpChip | OpLink;
|
|
61
|
+
|
|
62
|
+
export type { ColumnLike as C, ElTagType as E, JhTagNode as J, OpItem as O, TagMapItem as T, OpChip as a, OpLink as b, OpPreset as c };
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import * as vue from 'vue';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* runtime/core/types.ts — 基础类型与接口定义
|
|
5
|
+
*
|
|
6
|
+
* 无任何运行时依赖,可被 types-only import 引用。
|
|
7
|
+
*/
|
|
8
|
+
/** defaultNode 返回格式(对应 jh-tag 组件配置结构) */
|
|
9
|
+
interface JhTagNode {
|
|
10
|
+
tag: "jh-tag";
|
|
11
|
+
item: Array<{
|
|
12
|
+
title: string;
|
|
13
|
+
type?: string;
|
|
14
|
+
}>;
|
|
15
|
+
}
|
|
16
|
+
/** Element Plus ElTag type 属性合法值 */
|
|
17
|
+
type ElTagType = "primary" | "success" | "warning" | "danger" | "info";
|
|
18
|
+
/** 状态映射表中每条记录 */
|
|
19
|
+
interface TagMapItem {
|
|
20
|
+
label: string;
|
|
21
|
+
type: ElTagType;
|
|
22
|
+
}
|
|
23
|
+
/** 列定义最小契约(兼容 BaseTable / el-table-column / AG Grid 适配层) */
|
|
24
|
+
interface ColumnLike {
|
|
25
|
+
name?: string;
|
|
26
|
+
label?: string;
|
|
27
|
+
width?: number | string;
|
|
28
|
+
fixed?: string | boolean;
|
|
29
|
+
type?: string;
|
|
30
|
+
defaultNode?: (ctx: {
|
|
31
|
+
row: any;
|
|
32
|
+
}) => any;
|
|
33
|
+
defaultSlot?: (ctx: {
|
|
34
|
+
row: any;
|
|
35
|
+
}) => any;
|
|
36
|
+
[key: string]: any;
|
|
37
|
+
}
|
|
38
|
+
/** renderOps:预设图标按钮 */
|
|
39
|
+
interface OpPreset {
|
|
40
|
+
type: "view" | "edit" | "del" | "log" | "ok" | "send";
|
|
41
|
+
title?: string;
|
|
42
|
+
show?: boolean;
|
|
43
|
+
onClick: (e: MouseEvent) => void;
|
|
44
|
+
}
|
|
45
|
+
/** renderOps:胶囊按钮(图标 + 文字) */
|
|
46
|
+
interface OpChip {
|
|
47
|
+
type: "chip";
|
|
48
|
+
label: string;
|
|
49
|
+
icon?: vue.Component;
|
|
50
|
+
show?: boolean;
|
|
51
|
+
onClick: (e: MouseEvent) => void;
|
|
52
|
+
}
|
|
53
|
+
/** renderOps:纯文字链接按钮 */
|
|
54
|
+
interface OpLink {
|
|
55
|
+
type: "link";
|
|
56
|
+
label: string;
|
|
57
|
+
show?: boolean;
|
|
58
|
+
onClick: (e: MouseEvent) => void;
|
|
59
|
+
}
|
|
60
|
+
type OpItem = OpPreset | OpChip | OpLink;
|
|
61
|
+
|
|
62
|
+
export type { ColumnLike as C, ElTagType as E, JhTagNode as J, OpChip as O, TagMapItem as T, OpItem as a, OpLink as b, OpPreset as c };
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import * as vue from 'vue';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* runtime/core/types.ts — 基础类型与接口定义
|
|
5
|
+
*
|
|
6
|
+
* 无任何运行时依赖,可被 types-only import 引用。
|
|
7
|
+
*/
|
|
8
|
+
/** defaultNode 返回格式(对应 jh-tag 组件配置结构) */
|
|
9
|
+
interface JhTagNode {
|
|
10
|
+
tag: "jh-tag";
|
|
11
|
+
item: Array<{
|
|
12
|
+
title: string;
|
|
13
|
+
type?: string;
|
|
14
|
+
}>;
|
|
15
|
+
}
|
|
16
|
+
/** Element Plus ElTag type 属性合法值 */
|
|
17
|
+
type ElTagType = "primary" | "success" | "warning" | "danger" | "info";
|
|
18
|
+
/** 状态映射表中每条记录 */
|
|
19
|
+
interface TagMapItem {
|
|
20
|
+
label: string;
|
|
21
|
+
type: ElTagType;
|
|
22
|
+
}
|
|
23
|
+
/** 列定义最小契约(兼容 BaseTable / el-table-column / AG Grid 适配层) */
|
|
24
|
+
interface ColumnLike {
|
|
25
|
+
name?: string;
|
|
26
|
+
label?: string;
|
|
27
|
+
width?: number | string;
|
|
28
|
+
fixed?: string | boolean;
|
|
29
|
+
type?: string;
|
|
30
|
+
defaultNode?: (ctx: {
|
|
31
|
+
row: any;
|
|
32
|
+
}) => any;
|
|
33
|
+
defaultSlot?: (ctx: {
|
|
34
|
+
row: any;
|
|
35
|
+
}) => any;
|
|
36
|
+
[key: string]: any;
|
|
37
|
+
}
|
|
38
|
+
/** renderOps:预设图标按钮 */
|
|
39
|
+
interface OpPreset {
|
|
40
|
+
type: "view" | "edit" | "del" | "danger" | "log" | "ok" | "send";
|
|
41
|
+
label?: string;
|
|
42
|
+
title?: string;
|
|
43
|
+
show?: boolean | (() => boolean);
|
|
44
|
+
onClick: (e: MouseEvent) => void;
|
|
45
|
+
}
|
|
46
|
+
/** renderOps:胶囊按钮(图标 + 文字) */
|
|
47
|
+
interface OpChip {
|
|
48
|
+
type: "chip";
|
|
49
|
+
label: string;
|
|
50
|
+
icon?: vue.Component;
|
|
51
|
+
show?: boolean | (() => boolean);
|
|
52
|
+
onClick: (e: MouseEvent) => void;
|
|
53
|
+
}
|
|
54
|
+
/** renderOps:纯文字链接按钮 */
|
|
55
|
+
interface OpLink {
|
|
56
|
+
type: "link";
|
|
57
|
+
label: string;
|
|
58
|
+
show?: boolean | (() => boolean);
|
|
59
|
+
onClick: (e: MouseEvent) => void;
|
|
60
|
+
}
|
|
61
|
+
type OpItem = OpPreset | OpChip | OpLink;
|
|
62
|
+
|
|
63
|
+
export type { ColumnLike as C, ElTagType as E, JhTagNode as J, OpChip as O, TagMapItem as T, OpItem as a, OpLink as b, OpPreset as c };
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
# operations → defaultSlot(renderOps) 迁移指南
|
|
2
|
+
|
|
3
|
+
## 背景
|
|
4
|
+
|
|
5
|
+
老项目中 BaseTable 的操作列通常使用 `operations: [...]` 格式,渲染为文字按钮。
|
|
6
|
+
统一 UI 风格后,操作列改用 `defaultSlot: ({ row }) => renderOps([...])` 格式,渲染为图标按钮组。
|
|
7
|
+
|
|
8
|
+
## 迁移前(旧格式)
|
|
9
|
+
|
|
10
|
+
```ts
|
|
11
|
+
const columnsDef = [
|
|
12
|
+
{ label: "名称", name: "name" },
|
|
13
|
+
{ label: "状态", name: "enableStatus" },
|
|
14
|
+
{
|
|
15
|
+
label: "操作",
|
|
16
|
+
width: 180,
|
|
17
|
+
fixed: "right",
|
|
18
|
+
operations: [
|
|
19
|
+
{ name: "查看", click: (row) => handleView(row) },
|
|
20
|
+
{ name: "编辑", click: (row) => handleEdit(row), show: (row) => row.enableStatus === 1 },
|
|
21
|
+
{ name: "删除", click: (row) => handleDel(row), type: "danger" },
|
|
22
|
+
],
|
|
23
|
+
},
|
|
24
|
+
];
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## 迁移后(新格式)
|
|
28
|
+
|
|
29
|
+
```ts
|
|
30
|
+
import { renderOps } from "@agile-team/wk-skills-ui/runtime";
|
|
31
|
+
|
|
32
|
+
const columnsDef = [
|
|
33
|
+
{ label: "名称", name: "name" },
|
|
34
|
+
{ label: "状态", name: "enableStatus" },
|
|
35
|
+
{
|
|
36
|
+
label: "操作",
|
|
37
|
+
width: 140,
|
|
38
|
+
fixed: "right",
|
|
39
|
+
defaultSlot: ({ row }) =>
|
|
40
|
+
renderOps([
|
|
41
|
+
{ type: "view", onClick: () => handleView(row) },
|
|
42
|
+
{ type: "edit", onClick: () => handleEdit(row), show: row.enableStatus === 1 },
|
|
43
|
+
{ type: "del", onClick: () => handleDel(row) },
|
|
44
|
+
]),
|
|
45
|
+
},
|
|
46
|
+
];
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
## 映射关系
|
|
50
|
+
|
|
51
|
+
| 旧 operations 字段 | 新 renderOps 字段 | 说明 |
|
|
52
|
+
|---|---|---|
|
|
53
|
+
| `name: "查看"` | `type: "view"` | 预设图标按钮,自带 title |
|
|
54
|
+
| `name: "编辑"` | `type: "edit"` | 预设图标按钮 |
|
|
55
|
+
| `name: "删除"` | `type: "del"` | 预设图标按钮(红色) |
|
|
56
|
+
| `click: fn` | `onClick: fn` | 回调函数 |
|
|
57
|
+
| `show: fn/bool` | `show: fn/bool` | 控制显隐 |
|
|
58
|
+
| `type: "danger"` | _(由 type 决定)_ | del 自动红色 |
|
|
59
|
+
| 自定义文字 | `type: "chip"` 或 `type: "link"` | 胶囊/文字按钮 |
|
|
60
|
+
|
|
61
|
+
## 预设图标类型
|
|
62
|
+
|
|
63
|
+
| type | 图标 | 标题 | 颜色 |
|
|
64
|
+
|---|---|---|---|
|
|
65
|
+
| `view` | Eye (View) | 查看 | 蓝色 |
|
|
66
|
+
| `edit` | Edit | 编辑 | 绿色 |
|
|
67
|
+
| `del` | Delete | 删除 | 红色 |
|
|
68
|
+
| `log` | Document | 记录 | 灰色 |
|
|
69
|
+
| `ok` | CircleCheck | 审核 | 绿色 |
|
|
70
|
+
| `send` | Upload | 提交 | 蓝色 |
|
|
71
|
+
|
|
72
|
+
## 非预设操作(胶囊/文字)
|
|
73
|
+
|
|
74
|
+
```ts
|
|
75
|
+
renderOps([
|
|
76
|
+
{ type: "view", onClick: () => handleView(row) },
|
|
77
|
+
// 胶囊按钮(图标 + 文字)
|
|
78
|
+
{ type: "chip", label: "下载", icon: Download, onClick: () => handleDownload(row) },
|
|
79
|
+
// 纯文字链接
|
|
80
|
+
{ type: "link", label: "详情", onClick: () => handleDetail(row) },
|
|
81
|
+
])
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
## defaultNode vs defaultSlot
|
|
85
|
+
|
|
86
|
+
| 属性 | 返回类型 | 使用场景 |
|
|
87
|
+
|---|---|---|
|
|
88
|
+
| `defaultNode` | `JhTagNode` 对象 | 状态标签(jh-tag 组件格式) |
|
|
89
|
+
| `defaultSlot` | `VNode` | 自定义渲染(操作列、徽标、复杂布局) |
|
|
90
|
+
|
|
91
|
+
- 状态字段用 `defaultNode` + `renderTagNode()`
|
|
92
|
+
- 操作列用 `defaultSlot` + `renderOps()`
|
|
93
|
+
- 徽标/评级用 `defaultSlot` + `renderBadge()` / `renderRatingLevel()`
|
|
94
|
+
|
|
95
|
+
## 批量迁移
|
|
96
|
+
|
|
97
|
+
Scanner 规则 R013 会自动检测旧格式 `operations: [...]`。
|
|
98
|
+
|
|
99
|
+
```bash
|
|
100
|
+
# 扫描所有旧格式
|
|
101
|
+
npx wk-scan scan --target src --layer L4
|
|
102
|
+
|
|
103
|
+
# 查看影响文件
|
|
104
|
+
npx wk-scan scan --target src --output json | jq '.issues[] | select(.rule == "R013") | .file'
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
> 注意:operations → renderOps 不可自动修复,需要人工确认每个操作的图标类型和回调。
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
{
|
|
2
|
+
"exemptPaths": [
|
|
3
|
+
"src/views/**/big-screen/**",
|
|
4
|
+
"src/views/**/dashboard/**",
|
|
5
|
+
"src/views/**/map-view/**",
|
|
6
|
+
"src/views/**/topology/**",
|
|
7
|
+
"src/views/**/flow-designer/**",
|
|
8
|
+
"src/views/**/report-designer/**",
|
|
9
|
+
"src/views/**/chart/**",
|
|
10
|
+
"src/views/**/3d/**",
|
|
11
|
+
"src/views/**/canvas/**"
|
|
12
|
+
],
|
|
13
|
+
"exemptRules": {
|
|
14
|
+
"R016": ["src/views/**/big-screen/**"],
|
|
15
|
+
"R017": ["src/views/**/big-screen/**"]
|
|
16
|
+
},
|
|
17
|
+
"exemptCategories": [
|
|
18
|
+
"dashboard",
|
|
19
|
+
"big-screen",
|
|
20
|
+
"map",
|
|
21
|
+
"chart",
|
|
22
|
+
"topology",
|
|
23
|
+
"flow-designer",
|
|
24
|
+
"3d",
|
|
25
|
+
"canvas",
|
|
26
|
+
"report-designer",
|
|
27
|
+
"rich-editor"
|
|
28
|
+
],
|
|
29
|
+
"description": "大屏、地图、图谱、流程设计器等强个性化页面豁免风格统一扫描"
|
|
30
|
+
}
|