workdesktop-ai 1.0.2 → 1.1.1
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 +155 -93
- package/README.md +123 -25
- package/dist/api-button/index.mjs +7 -0
- package/dist/api-button/index.mjs.map +1 -0
- package/dist/assets/Select-CNzSyvlZ.css +1 -0
- package/dist/auto-complete/index.mjs +7 -0
- package/dist/auto-complete/index.mjs.map +1 -0
- package/dist/auto-complete/style.css +1 -0
- package/dist/base.css +1 -0
- package/dist/checkbox-list/index.mjs +7 -0
- package/dist/checkbox-list/index.mjs.map +1 -0
- package/dist/checkbox-list/style.css +1 -0
- package/dist/chunks/ApiButton.vue_vue_type_script_setup_true_lang-KKzJxwpV.mjs +80 -0
- package/dist/chunks/ApiButton.vue_vue_type_script_setup_true_lang-KKzJxwpV.mjs.map +1 -0
- package/dist/chunks/AutoComplete-CLV_PwcZ.mjs +80 -0
- package/dist/chunks/AutoComplete-CLV_PwcZ.mjs.map +1 -0
- package/dist/chunks/CheckboxList-Bx3Ce1q5.mjs +129 -0
- package/dist/chunks/CheckboxList-Bx3Ce1q5.mjs.map +1 -0
- package/dist/chunks/ConfirmButton.vue_vue_type_script_setup_true_lang-D4w6G2Kv.mjs +99 -0
- package/dist/chunks/ConfirmButton.vue_vue_type_script_setup_true_lang-D4w6G2Kv.mjs.map +1 -0
- package/dist/chunks/DataForm-C5MBVdei.mjs +305 -0
- package/dist/chunks/DataForm-C5MBVdei.mjs.map +1 -0
- package/dist/chunks/DataGrid-HUzKWuQx.mjs +1124 -0
- package/dist/chunks/DataGrid-HUzKWuQx.mjs.map +1 -0
- package/dist/chunks/DialogButton.vue_vue_type_script_setup_true_lang-CTXP79zc.mjs +117 -0
- package/dist/chunks/DialogButton.vue_vue_type_script_setup_true_lang-CTXP79zc.mjs.map +1 -0
- package/dist/chunks/Drawer-ucXKUecL.mjs +259 -0
- package/dist/chunks/Drawer-ucXKUecL.mjs.map +1 -0
- package/dist/chunks/DrawerButton.vue_vue_type_script_setup_true_lang-DUda4p7_.mjs +125 -0
- package/dist/chunks/DrawerButton.vue_vue_type_script_setup_true_lang-DUda4p7_.mjs.map +1 -0
- package/dist/chunks/EditableGrid-C8A-nJZv.mjs +1783 -0
- package/dist/chunks/EditableGrid-C8A-nJZv.mjs.map +1 -0
- package/dist/chunks/FormItem-C1q0opnk.mjs +79 -0
- package/dist/chunks/FormItem-C1q0opnk.mjs.map +1 -0
- package/dist/chunks/Iframe-CeSiMnvR.mjs +65 -0
- package/dist/chunks/Iframe-CeSiMnvR.mjs.map +1 -0
- package/dist/chunks/ImageUpload-DGehzaYa.mjs +193 -0
- package/dist/chunks/ImageUpload-DGehzaYa.mjs.map +1 -0
- package/dist/chunks/Panel-CrRqBTj6.mjs +115 -0
- package/dist/chunks/Panel-CrRqBTj6.mjs.map +1 -0
- package/dist/chunks/PromptButton.vue_vue_type_script_setup_true_lang-Gck1QAHc.mjs +118 -0
- package/dist/chunks/PromptButton.vue_vue_type_script_setup_true_lang-Gck1QAHc.mjs.map +1 -0
- package/dist/chunks/RadioList-vE8JOuST.mjs +129 -0
- package/dist/chunks/RadioList-vE8JOuST.mjs.map +1 -0
- package/dist/chunks/Requester.vue_vue_type_script_setup_true_lang-B8TwXbYR.mjs +80 -0
- package/dist/chunks/Requester.vue_vue_type_script_setup_true_lang-B8TwXbYR.mjs.map +1 -0
- package/dist/chunks/RouteButton.vue_vue_type_script_setup_true_lang-Da0D3tKA.mjs +73 -0
- package/dist/chunks/RouteButton.vue_vue_type_script_setup_true_lang-Da0D3tKA.mjs.map +1 -0
- package/dist/chunks/SearchItem-pFO57lEO.mjs +79 -0
- package/dist/chunks/SearchItem-pFO57lEO.mjs.map +1 -0
- package/dist/chunks/SearchPanel-xQ1hPaNq.mjs +158 -0
- package/dist/chunks/SearchPanel-xQ1hPaNq.mjs.map +1 -0
- package/dist/chunks/Select-DAGZDXvI.mjs +114 -0
- package/dist/chunks/Select-DAGZDXvI.mjs.map +1 -0
- package/dist/chunks/Station-BF_QlQ8c.mjs +796 -0
- package/dist/chunks/Station-BF_QlQ8c.mjs.map +1 -0
- package/dist/chunks/Switch.vue_vue_type_script_setup_true_lang-CulPqp7M.mjs +71 -0
- package/dist/chunks/Switch.vue_vue_type_script_setup_true_lang-CulPqp7M.mjs.map +1 -0
- package/dist/chunks/Tips-IWCZcR1K.mjs +63 -0
- package/dist/chunks/Tips-IWCZcR1K.mjs.map +1 -0
- package/dist/chunks/TipsButton.vue_vue_type_script_setup_true_lang-DvcpRSV1.mjs +51 -0
- package/dist/chunks/TipsButton.vue_vue_type_script_setup_true_lang-DvcpRSV1.mjs.map +1 -0
- package/dist/chunks/Upload.vue_vue_type_script_setup_true_lang-D07Bhllc.mjs +200 -0
- package/dist/chunks/Upload.vue_vue_type_script_setup_true_lang-D07Bhllc.mjs.map +1 -0
- package/dist/chunks/Viewer-iub6TjoD.mjs +381 -0
- package/dist/chunks/Viewer-iub6TjoD.mjs.map +1 -0
- package/dist/chunks/_plugin-vue_export-helper-CHgC5LLL.mjs +10 -0
- package/dist/chunks/_plugin-vue_export-helper-CHgC5LLL.mjs.map +1 -0
- package/dist/chunks/containerContext-BgphFDeH.mjs +13 -0
- package/dist/chunks/containerContext-BgphFDeH.mjs.map +1 -0
- package/dist/chunks/http-Bs-dM076.mjs +2951 -0
- package/dist/chunks/http-Bs-dM076.mjs.map +1 -0
- package/dist/chunks/linkage-FbL1mcz3.mjs +66 -0
- package/dist/chunks/linkage-FbL1mcz3.mjs.map +1 -0
- package/dist/chunks/props-DAytpx7D.mjs +65 -0
- package/dist/chunks/props-DAytpx7D.mjs.map +1 -0
- package/dist/chunks/useApiAction-6_vvf5Fd.mjs +30 -0
- package/dist/chunks/useApiAction-6_vvf5Fd.mjs.map +1 -0
- package/dist/chunks/useColumnSettings-BYDQdk4o.mjs +216 -0
- package/dist/chunks/useColumnSettings-BYDQdk4o.mjs.map +1 -0
- package/dist/chunks/useOptionsLoader-Bi8oqNbG.mjs +64 -0
- package/dist/chunks/useOptionsLoader-Bi8oqNbG.mjs.map +1 -0
- package/dist/confirm-button/index.mjs +7 -0
- package/dist/confirm-button/index.mjs.map +1 -0
- package/dist/data-form/index.mjs +7 -0
- package/dist/data-form/index.mjs.map +1 -0
- package/dist/data-form/style.css +1 -0
- package/dist/data-grid/index.mjs +7 -0
- package/dist/data-grid/index.mjs.map +1 -0
- package/dist/data-grid/style.css +1 -0
- package/dist/dialog-button/index.mjs +7 -0
- package/dist/dialog-button/index.mjs.map +1 -0
- package/dist/drawer/index.mjs +7 -0
- package/dist/drawer/index.mjs.map +1 -0
- package/dist/drawer/style.css +1 -0
- package/dist/drawer-button/index.mjs +7 -0
- package/dist/drawer-button/index.mjs.map +1 -0
- package/dist/editable-grid/index.mjs +7 -0
- package/dist/editable-grid/index.mjs.map +1 -0
- package/dist/editable-grid/style.css +1 -0
- package/dist/form-item/index.mjs +7 -0
- package/dist/form-item/index.mjs.map +1 -0
- package/dist/form-item/style.css +1 -0
- package/dist/iframe/index.mjs +7 -0
- package/dist/iframe/index.mjs.map +1 -0
- package/dist/iframe/style.css +1 -0
- package/dist/image-upload/index.mjs +7 -0
- package/dist/image-upload/index.mjs.map +1 -0
- package/dist/image-upload/style.css +1 -0
- package/dist/index.esm.js +318 -6495
- package/dist/index.esm.js.map +1 -1
- package/dist/index.umd.js +20 -9
- package/dist/index.umd.js.map +1 -1
- package/dist/panel/index.mjs +7 -0
- package/dist/panel/index.mjs.map +1 -0
- package/dist/panel/style.css +1 -0
- package/dist/prompt-button/index.mjs +7 -0
- package/dist/prompt-button/index.mjs.map +1 -0
- package/dist/radio-list/index.mjs +7 -0
- package/dist/radio-list/index.mjs.map +1 -0
- package/dist/radio-list/style.css +1 -0
- package/dist/requester/index.mjs +7 -0
- package/dist/requester/index.mjs.map +1 -0
- package/dist/route-button/index.mjs +7 -0
- package/dist/route-button/index.mjs.map +1 -0
- package/dist/search-item/index.mjs +7 -0
- package/dist/search-item/index.mjs.map +1 -0
- package/dist/search-item/style.css +1 -0
- package/dist/search-panel/index.mjs +7 -0
- package/dist/search-panel/index.mjs.map +1 -0
- package/dist/search-panel/style.css +1 -0
- package/dist/select/index.mjs +7 -0
- package/dist/select/index.mjs.map +1 -0
- package/dist/station/index.mjs +7 -0
- package/dist/station/index.mjs.map +1 -0
- package/dist/station/style.css +1 -0
- package/dist/style.css +1 -1
- package/dist/switch/index.mjs +7 -0
- package/dist/switch/index.mjs.map +1 -0
- package/dist/tips/index.mjs +7 -0
- package/dist/tips/index.mjs.map +1 -0
- package/dist/tips/style.css +1 -0
- package/dist/tips-button/index.mjs +7 -0
- package/dist/tips-button/index.mjs.map +1 -0
- package/dist/types/src/components/buttons/ApiButton.vue.d.ts +35 -6
- package/dist/types/src/components/buttons/ConfirmButton.vue.d.ts +37 -8
- package/dist/types/src/components/buttons/DialogButton.vue.d.ts +89 -29
- package/dist/types/src/components/buttons/DrawerButton.vue.d.ts +99 -31
- package/dist/types/src/components/buttons/PopconfirmButton.vue.d.ts +317 -0
- package/dist/types/src/components/buttons/PromptButton.vue.d.ts +45 -14
- package/dist/types/src/components/buttons/RouteButton.vue.d.ts +34 -5
- package/dist/types/src/components/buttons/TipsButton.vue.d.ts +8 -15
- package/dist/types/src/components/common/props.d.ts +32 -2
- package/dist/types/src/components/containers/Drawer.vue.d.ts +61 -8
- package/dist/types/src/components/containers/Iframe.vue.d.ts +39 -2
- package/dist/types/src/components/containers/containerContext.d.ts +1 -1
- package/dist/types/src/components/containers/useContainerController.d.ts +5 -0
- package/dist/types/src/components/containers/useIframeContainer.d.ts +20 -0
- package/dist/types/src/components/core/Requester.vue.d.ts +41 -0
- package/dist/types/src/components/data/datagrid/DataGrid.vue.d.ts +212 -5
- package/dist/types/src/components/data/datagrid/useColumnSettings.d.ts +14 -0
- package/dist/types/src/components/data/editable-grid/EditableGrid.vue.d.ts +586 -0
- package/dist/types/src/components/data/viewer/Viewer.vue.d.ts +187 -0
- package/dist/types/src/components/form/FormItem.vue.d.ts +62 -0
- package/dist/types/src/components/form/SearchItem.vue.d.ts +62 -0
- package/dist/types/src/components/{containers → form}/SearchPanel.vue.d.ts +17 -2
- package/dist/types/src/components/form/data-form/DataForm.vue.d.ts +6 -6
- package/dist/types/src/components/index.d.ts +10 -6
- package/dist/types/src/components/inputs/AutoComplete.vue.d.ts +10 -1
- package/dist/types/src/components/inputs/CheckboxList.vue.d.ts +28 -3
- package/dist/types/src/components/inputs/RadioList.vue.d.ts +28 -3
- package/dist/types/src/components/inputs/Select.vue.d.ts +11 -1
- package/dist/types/src/components/inputs/Switch.vue.d.ts +2 -2
- package/dist/types/src/components/inputs/useOptionsLoader.d.ts +3 -0
- package/dist/types/src/components/layout/Station.vue.d.ts +302 -0
- package/dist/types/src/components/layout/StationMenuNode.vue.d.ts +20 -0
- package/dist/types/src/components/layout/types.d.ts +54 -0
- package/dist/types/src/components/styles/Panel.vue.d.ts +58 -5
- package/dist/types/src/components/upload/ImageUpload.vue.d.ts +4 -4
- package/dist/types/src/components/upload/Upload.vue.d.ts +1 -1
- package/dist/types/src/entries/api-button.d.ts +9 -0
- package/dist/types/src/entries/auto-complete.d.ts +9 -0
- package/dist/types/src/entries/checkbox-list.d.ts +9 -0
- package/dist/types/src/entries/components-map.d.ts +8 -0
- package/dist/types/src/entries/confirm-button.d.ts +9 -0
- package/dist/types/src/entries/data-form.d.ts +9 -0
- package/dist/types/src/entries/data-grid.d.ts +9 -0
- package/dist/types/src/entries/dialog-button.d.ts +9 -0
- package/dist/types/src/entries/drawer-button.d.ts +9 -0
- package/dist/types/src/entries/drawer.d.ts +9 -0
- package/dist/types/src/entries/editable-grid.d.ts +9 -0
- package/dist/types/src/entries/form-item.d.ts +9 -0
- package/dist/types/src/entries/iframe.d.ts +9 -0
- package/dist/types/src/entries/image-upload.d.ts +9 -0
- package/dist/types/src/entries/panel.d.ts +9 -0
- package/dist/types/src/entries/prompt-button.d.ts +9 -0
- package/dist/types/src/entries/radio-list.d.ts +9 -0
- package/dist/types/src/entries/requester.d.ts +9 -0
- package/dist/types/src/entries/route-button.d.ts +9 -0
- package/dist/types/src/entries/search-item.d.ts +9 -0
- package/dist/types/src/entries/search-panel.d.ts +9 -0
- package/dist/types/src/entries/select.d.ts +9 -0
- package/dist/types/src/entries/station.d.ts +9 -0
- package/dist/types/src/entries/switch.d.ts +9 -0
- package/dist/types/src/entries/tips-button.d.ts +9 -0
- package/dist/types/src/entries/tips.d.ts +9 -0
- package/dist/types/src/entries/upload.d.ts +9 -0
- package/dist/types/src/entries/viewer.d.ts +9 -0
- package/dist/types/src/index.d.ts +2 -1
- package/dist/types/src/lib/composables/useDataGrid.d.ts +15 -0
- package/dist/types/src/lib/core/http.d.ts +21 -4
- package/dist/types/src/lib/core/station-linkage.d.ts +41 -0
- package/dist/types/src/types/config.d.ts +20 -3
- package/dist/types/vite.config.d.ts +6 -1
- package/dist/upload/index.mjs +7 -0
- package/dist/upload/index.mjs.map +1 -0
- package/dist/viewer/index.mjs +7 -0
- package/dist/viewer/index.mjs.map +1 -0
- package/dist/viewer/style.css +1 -0
- package/llms.txt +658 -0
- package/package.json +200 -68
- package/dist/types/src/components/containers/Dialog.vue.d.ts +0 -112
- package/dist/types/src/components/data/editable-table/EditableTable.vue.d.ts +0 -306
- package/dist/types/src/components/utils/Viewer.vue.d.ts +0 -131
package/llms.txt
ADDED
|
@@ -0,0 +1,658 @@
|
|
|
1
|
+
# workdesktop-ai — AI 开发参考(LLM-Optimized Component Library Reference)
|
|
2
|
+
|
|
3
|
+
- 创建时间: 2026-09-16 19:45:30
|
|
4
|
+
- 最后修改时间: 2026-09-16 22:03:47
|
|
5
|
+
- 当前版本: V_1.1
|
|
6
|
+
- 适用对象: AI 编码助手(非人类读者;信息密度优先,无修辞)
|
|
7
|
+
- 核心目标: 使 AI 完整认识 workdesktop-ai 组件库,并能正确使用其完成开发任务
|
|
8
|
+
- 文档简略描述: workdesktop-ai@1.0.2 全量事实参考:包结构 / 引入方式 / 全局配置 / 请求体系 / 声明式联动 / 28 组件 API(props/emits/slots/methods)/ 跨 iframe 协议 / 陷阱清单
|
|
9
|
+
|
|
10
|
+
================================================================================
|
|
11
|
+
## 0. 如何使用本文档(FOR AI)
|
|
12
|
+
================================================================================
|
|
13
|
+
- 本文档为唯一事实源优先级:本文档 < 源码(src/)。冲突时以源码为准。
|
|
14
|
+
- 所有组件注册名(name)均为 `WdXxx`;模板中可用 `<wd-xxx>` 或 `<WdXxx>`。
|
|
15
|
+
- 组件基于 ElementPlus(el-*),多数 $attrs 透传到底层 el 组件,标注「透传」处可直接使用 el-* 原生属性。
|
|
16
|
+
- 「默认值」列 = 组件内置默认;全局配置可覆盖的项会标注 [G](page.componentDefault)。
|
|
17
|
+
- 标注 [陷阱] 的条目见 §11,开发前必读。
|
|
18
|
+
|
|
19
|
+
================================================================================
|
|
20
|
+
## 1. 包事实(PACKAGE FACTS)
|
|
21
|
+
================================================================================
|
|
22
|
+
```yaml
|
|
23
|
+
name: workdesktop-ai
|
|
24
|
+
version: 1.0.2
|
|
25
|
+
description: WorkDesktop 企业级 Vue3 组件库(基于 ElementPlus,HTML 模板渲染友好、AI 编码友好)
|
|
26
|
+
type: module
|
|
27
|
+
main: dist/index.umd.js # UMD, window.WorkDesktop
|
|
28
|
+
module: dist/index.esm.js # ESM
|
|
29
|
+
types: dist/types/src/index.d.ts
|
|
30
|
+
sideEffects: ["*.css", "**/*.css"] # CSS 有副作用,tree-shaking 不会删
|
|
31
|
+
peerDependencies: # 宿主项目必须安装
|
|
32
|
+
vue: ^3.3.0
|
|
33
|
+
element-plus: ^2.5.0
|
|
34
|
+
"@element-plus/icons-vue": ^2.0.0
|
|
35
|
+
dependencies:
|
|
36
|
+
axios: ^1.7.7
|
|
37
|
+
async-validator: ^4.2.5
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
================================================================================
|
|
41
|
+
## 2. 引入方式(IMPORT)
|
|
42
|
+
================================================================================
|
|
43
|
+
### 2.1 ESM 全量(构建工具项目首选)
|
|
44
|
+
```ts
|
|
45
|
+
import { createApp } from 'vue'
|
|
46
|
+
import ElementPlus from 'element-plus'
|
|
47
|
+
import 'element-plus/dist/index.css'
|
|
48
|
+
import WorkDesktop from 'workdesktop-ai'
|
|
49
|
+
import 'workdesktop-ai/style.css' // 全量样式(含全部组件)
|
|
50
|
+
// import 'workdesktop-ai/base.css' // 仅基础样式(按需场景)
|
|
51
|
+
|
|
52
|
+
app.use(ElementPlus)
|
|
53
|
+
app.use(WorkDesktop, globalConfig?) // 第二参 = 全局配置,见 §4
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
### 2.2 UMD / 浏览器直引(HTML 模板渲染场景)
|
|
57
|
+
```html
|
|
58
|
+
<script>
|
|
59
|
+
// 在加载 UMD 之前定义全局配置(可选)
|
|
60
|
+
window.workDesktopConfig = { /* 同 globalConfig */ }
|
|
61
|
+
</script>
|
|
62
|
+
<script src=".../dist/index.umd.js"></script>
|
|
63
|
+
<!-- 全局变量: window.WorkDesktop;组件自动注册为 wd-* -->
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
### 2.3 按需子路径(27 个组件入口)
|
|
67
|
+
格式:`import WdXxx from 'workdesktop-ai/<subpath>'`
|
|
68
|
+
每个子路径含 types + ESM(.mjs)。
|
|
69
|
+
|
|
70
|
+
| 子路径 | 组件 | 独立样式 |
|
|
71
|
+
|---|---|---|
|
|
72
|
+
| api-button | WdApiButton | — |
|
|
73
|
+
| auto-complete | WdAutoComplete | auto-complete/style.css |
|
|
74
|
+
| checkbox-list | WdCheckboxList | — |
|
|
75
|
+
| confirm-button | WdConfirmButton | — |
|
|
76
|
+
| data-form | WdDataForm | data-form/style.css |
|
|
77
|
+
| data-grid | WdDataGrid | data-grid/style.css |
|
|
78
|
+
| dialog-button | WdDialogButton | — |
|
|
79
|
+
| drawer | WdDrawer | drawer/style.css |
|
|
80
|
+
| drawer-button | WdDrawerButton | — |
|
|
81
|
+
| editable-grid | WdEditableGrid | editable-grid/style.css |
|
|
82
|
+
| form-item | WdFormItem | form-item/style.css |
|
|
83
|
+
| iframe | WdIframe | iframe/style.css |
|
|
84
|
+
| image-upload | WdImageUpload | image-upload/style.css |
|
|
85
|
+
| panel | WdPanel | panel/style.css |
|
|
86
|
+
| prompt-button | WdPromptButton | — |
|
|
87
|
+
| radio-list | WdRadioList | — |
|
|
88
|
+
| requester | WdRequester | — |
|
|
89
|
+
| route-button | WdRouteButton | — |
|
|
90
|
+
| search-item | WdSearchItem | search-item/style.css |
|
|
91
|
+
| search-panel | WdSearchPanel | search-panel/style.css |
|
|
92
|
+
| select | WdSelect | — |
|
|
93
|
+
| station | WdStation | station/style.css |
|
|
94
|
+
| switch | WdSwitch | — |
|
|
95
|
+
| tips | WdTips | tips/style.css |
|
|
96
|
+
| tips-button | WdTipsButton | — |
|
|
97
|
+
| upload | WdUpload | — |
|
|
98
|
+
| viewer | WdViewer | viewer/style.css |
|
|
99
|
+
|
|
100
|
+
- [陷阱] WdPopconfirmButton 无独立子路径,只能从主入口 `import { WdPopconfirmButton } from 'workdesktop-ai'`。
|
|
101
|
+
- 无独立 style.css 的子路径:组件样式为零依赖(纯 el-* 组合)或已含在 base.css。
|
|
102
|
+
- 按需引入样式写法:`import 'workdesktop-ai/base.css'` + `import 'workdesktop-ai/<subpath>/style.css'`(仅上表列出的 14 个)。
|
|
103
|
+
|
|
104
|
+
### 2.4 主入口导出面(src/index.ts 逐字)
|
|
105
|
+
```ts
|
|
106
|
+
export default WorkDesktop // Vue 插件(install 注册全部 28 组件 + 初始化配置)
|
|
107
|
+
export * from './components' // 28 个组件,全部 Wd 前缀
|
|
108
|
+
// 配置
|
|
109
|
+
export { initConfig, setGlobalConfig, getGlobalConfig, resetConfig, mergeConfig, getComponentDefault }
|
|
110
|
+
// 请求
|
|
111
|
+
export { RequestAPI, request } // request = 全局单例
|
|
112
|
+
export { default as http } // 同 request 体系默认导出
|
|
113
|
+
export type { ApiResult, ApiEventPayload, ApiEventType, ApiEventHandler }
|
|
114
|
+
// 联动(§6)
|
|
115
|
+
export { registerDataGrid, refreshDataGrid, searchDataGrid, resetSearchDataGrid, getDataGrids, clearLinkageRegistry }
|
|
116
|
+
// Station 联动(§6.3)
|
|
117
|
+
export { registerStation, setStationFooter, refreshStationView }
|
|
118
|
+
// hooks
|
|
119
|
+
export { useRequest, useDataGrid, useConfig, useGlobalConfig, useEventBus, useGlobalState }
|
|
120
|
+
// 工具
|
|
121
|
+
export { deepMerge }
|
|
122
|
+
export type * from './types'
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
================================================================================
|
|
126
|
+
## 3. 统一响应协议(RESPONSE PROTOCOL)
|
|
127
|
+
================================================================================
|
|
128
|
+
- 所有 API 响应结构:`{ code: number, data: any, message: string }`
|
|
129
|
+
- 成功判定:`code >= successCode`(successCode 默认 0,全局可配)
|
|
130
|
+
- 字段名可全局改名:response.props(§4)
|
|
131
|
+
- 列表结构字段可全局改名:response.list(§4)
|
|
132
|
+
- Promise 语义:[关键] 业务失败(code 不达标)→ **resolve**,`success=false`,**不 reject**;仅网络/运行异常 → reject。
|
|
133
|
+
```ts
|
|
134
|
+
interface ApiResult<T = any> {
|
|
135
|
+
success: boolean // 业务成功
|
|
136
|
+
data: T
|
|
137
|
+
code?: number
|
|
138
|
+
message?: string
|
|
139
|
+
raw?: any // 原始响应
|
|
140
|
+
}
|
|
141
|
+
interface ReqOptions {
|
|
142
|
+
showLoading?: boolean
|
|
143
|
+
showTips?: boolean
|
|
144
|
+
tipsConfig?: TipsConfig
|
|
145
|
+
axiosConfig?: AxiosRequestConfig
|
|
146
|
+
signal?: AbortSignal
|
|
147
|
+
dedup?: boolean // 并发去重,默认 true:method+url+params 一致时只发一次
|
|
148
|
+
[key: string]: any
|
|
149
|
+
}
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
================================================================================
|
|
153
|
+
## 4. 全局配置(GLOBAL CONFIG)
|
|
154
|
+
================================================================================
|
|
155
|
+
### 4.1 三级覆盖与缓存时机 [关键]
|
|
156
|
+
优先级(低→高):内置 defaultConfig < 全局层(`app.use(WorkDesktop, cfg)` / `window.workDesktopConfig`)< 组件 props。
|
|
157
|
+
- 配置在**组件挂载时读取一次并缓存**;运行中修改全局配置只影响**之后新挂载**的组件。
|
|
158
|
+
- 已挂载组件要应用新配置:用 `:key` 变更强制重建。
|
|
159
|
+
|
|
160
|
+
### 4.2 WorkDesktopConfig 结构
|
|
161
|
+
```ts
|
|
162
|
+
interface WorkDesktopConfig {
|
|
163
|
+
page?: {
|
|
164
|
+
componentDefault?: Record<string, Record<string, any>> // 按组件 name 覆盖 props 默认值,如 { WdRequester: { method: 'get' } }
|
|
165
|
+
pager?: PagerConfig
|
|
166
|
+
}
|
|
167
|
+
request?: {
|
|
168
|
+
urlPrefix?: string // URL 前缀,默认 ''
|
|
169
|
+
throwException?: boolean // 默认 false:业务失败不抛异常
|
|
170
|
+
dedup?: boolean // 默认 true:并发相同请求合并去重
|
|
171
|
+
loading?: { enable: boolean; props?: Record<string, any> }
|
|
172
|
+
axiosConfig?: AxiosRequestConfig // 默认 { timeout: 30000 },透传 axios
|
|
173
|
+
pageParam?: PageParamConfig
|
|
174
|
+
transform?: { requestInterceptor?: (cfg: any) => any; responseInterceptor?: (res: any) => any }
|
|
175
|
+
}
|
|
176
|
+
response?: ResponseConfig
|
|
177
|
+
theme?: { colors?: Record<string, string>; cssVars?: Record<string, string> } // 变更后 applyTheme 写入 :root CSS 变量
|
|
178
|
+
}
|
|
179
|
+
interface PagerConfig {
|
|
180
|
+
size?: 'small' | 'default' | 'large'
|
|
181
|
+
pageSizes?: number[]
|
|
182
|
+
pageSize?: number
|
|
183
|
+
layout?: string // el-pagination layout
|
|
184
|
+
hideOnSinglePage?: boolean
|
|
185
|
+
position?: 'left' | 'center' | 'right'
|
|
186
|
+
}
|
|
187
|
+
interface PageParamConfig {
|
|
188
|
+
pageField?: string // 默认 'currentPage'
|
|
189
|
+
sizeField?: string // 默认 'pageSize'
|
|
190
|
+
searchField?: string // 默认 'param'(搜索条件包裹字段)
|
|
191
|
+
}
|
|
192
|
+
interface ResponseConfig {
|
|
193
|
+
props?: { codeName?: string; messageName?: string; dataName?: string } // 响应字段名映射,默认 code/message/data
|
|
194
|
+
successCode?: number // 默认 0
|
|
195
|
+
list?: { listName?: string; totalName?: string; pageSizeName?: string; currentPageName?: string }
|
|
196
|
+
success?: TipsConfig
|
|
197
|
+
fail?: TipsConfig
|
|
198
|
+
exception?: TipsConfig
|
|
199
|
+
complete?: TipsConfig
|
|
200
|
+
}
|
|
201
|
+
interface TipsConfig {
|
|
202
|
+
tipsMode?: 'message' | 'notify' | 'messagebox' | 'none'
|
|
203
|
+
tipsType?: 'success' | 'warning' | 'error' | 'info'
|
|
204
|
+
showTips?: boolean
|
|
205
|
+
title?: string
|
|
206
|
+
props?: Record<string, any> // 透传给对应 ElMessage/ElNotification/ElMessageBox
|
|
207
|
+
}
|
|
208
|
+
// 所有配置方法均接受 DeepPartial(深合并)
|
|
209
|
+
```
|
|
210
|
+
|
|
211
|
+
### 4.3 配置 API(6 个方法)
|
|
212
|
+
```ts
|
|
213
|
+
useGlobalConfig(): WorkDesktopConfig // 组合式中获取全局配置
|
|
214
|
+
setGlobalConfig(cfg: DeepPartial<WorkDesktopConfig>): void
|
|
215
|
+
mergeConfig(target, source): any // 深合并
|
|
216
|
+
getGlobalConfig(): WorkDesktopConfig
|
|
217
|
+
resetConfig(): void
|
|
218
|
+
useConfig(): WorkDesktopConfig
|
|
219
|
+
// 入口另导出: initConfig(cfg), getComponentDefault(name)
|
|
220
|
+
```
|
|
221
|
+
|
|
222
|
+
================================================================================
|
|
223
|
+
## 5. 请求体系(HTTP / REQUEST)
|
|
224
|
+
================================================================================
|
|
225
|
+
### 5.1 RequestAPI 与全局单例
|
|
226
|
+
```ts
|
|
227
|
+
const api = new RequestAPI(axiosConfig?) // 自建实例
|
|
228
|
+
// 全局单例 request(入口导出):
|
|
229
|
+
request.get(url, params?, reqOptions?)
|
|
230
|
+
request.post(url, data?, reqOptions?)
|
|
231
|
+
request.put(url, data?, reqOptions?)
|
|
232
|
+
request.delete(url, params?, reqOptions?)
|
|
233
|
+
request.request(axiosConfig, reqOptions?)
|
|
234
|
+
request.create(componentReqConfig?) // 派生组件级请求配置
|
|
235
|
+
request.on(handler): () => void // 订阅全局事件,返回取消函数
|
|
236
|
+
```
|
|
237
|
+
### 5.2 请求生命周期事件(所有请求类组件统一,顺序固定)
|
|
238
|
+
```
|
|
239
|
+
apiBefore → (apiSuccess | apiFail | apiException) → apiAfter
|
|
240
|
+
// apiFail=业务失败(resolve);apiException=异常(reject 路径)
|
|
241
|
+
```
|
|
242
|
+
### 5.3 useRequest hook
|
|
243
|
+
```ts
|
|
244
|
+
const { data, loading, error, run, refresh, abort } = useRequest(api, options?)
|
|
245
|
+
interface UseRequestOptions {
|
|
246
|
+
method?: string // 默认 'post'
|
|
247
|
+
immediate?: boolean // 默认 true
|
|
248
|
+
initialParams?: any
|
|
249
|
+
reqOptions?: ReqOptions
|
|
250
|
+
onSuccess?: (result: ApiResult) => void
|
|
251
|
+
onFail?: (result: ApiResult) => void
|
|
252
|
+
onError?: (err: any) => void
|
|
253
|
+
}
|
|
254
|
+
```
|
|
255
|
+
|
|
256
|
+
================================================================================
|
|
257
|
+
## 6. 声明式联动(LINKAGE)
|
|
258
|
+
================================================================================
|
|
259
|
+
### 6.1 机制
|
|
260
|
+
- `filter: string`:联动分组标识。同一 filter 值的组件视为一组;空串 = 默认组。
|
|
261
|
+
- `headRefreshDatagrid: boolean | string`:请求类动作成功后触发联动刷新。
|
|
262
|
+
- `true`:刷新同 filter 组的所有 DataGrid。
|
|
263
|
+
- `string`:定向刷新指定 filter 名的组。
|
|
264
|
+
- 适用:按钮组(API/Drawer/Dialog/Prompt 等)、WdSwitch、WdUpload/WdImageUpload、WdDataForm、WdSearchPanel 等均带此二属性。
|
|
265
|
+
|
|
266
|
+
### 6.2 DataGrid 联动注册表 API(6 个)
|
|
267
|
+
```ts
|
|
268
|
+
registerDataGrid(instance): () => void // 注册,返回注销函数
|
|
269
|
+
refreshDataGrid(headRefreshDatagrid: boolean|string, selfFilter?): number // 返回刷新数量
|
|
270
|
+
searchDataGrid(params, headRefreshDatagrid, selfFilter?): void
|
|
271
|
+
resetSearchDataGrid(headRefreshDatagrid, selfFilter?): void
|
|
272
|
+
getDataGrids(filter?): DataGridInstance[]
|
|
273
|
+
clearLinkageRegistry(): void
|
|
274
|
+
```
|
|
275
|
+
### 6.3 Station 联动 API(3 个)
|
|
276
|
+
```ts
|
|
277
|
+
registerStation(instance): () => void
|
|
278
|
+
setStationFooter(target: boolean|string, info: string, selfFilter?): void // target=true 同组;string 定向
|
|
279
|
+
refreshStationView(target: boolean|string = true, selfFilter?): number // 返回刷新数量
|
|
280
|
+
```
|
|
281
|
+
|
|
282
|
+
================================================================================
|
|
283
|
+
## 7. 共享 Props / Emits 组(先定义,组件节引用)
|
|
284
|
+
================================================================================
|
|
285
|
+
```ts
|
|
286
|
+
// elButtonCommonProps(15,透传 el-button):
|
|
287
|
+
type, size, plain, round, circle, link, text, bg, disabled, icon, native-type, autofocus, tag, color, dark
|
|
288
|
+
// elButtonProps = elButtonCommonProps + loading
|
|
289
|
+
// elButtonPropsNoLoading = elButtonCommonProps(API 类按钮专用:loading 由组件内部接管)
|
|
290
|
+
|
|
291
|
+
tipsProp: { tips?: string, tipsType?: 'dark'|'light' = 'dark', placement?: string = 'top' }
|
|
292
|
+
|
|
293
|
+
buttonApiProps: {
|
|
294
|
+
api?: string // 请求地址
|
|
295
|
+
apiMethod?: string = 'post'
|
|
296
|
+
apiParam?: Record<string, any> = {}
|
|
297
|
+
buttonLoading?: boolean = true // 请求期间按钮 loading
|
|
298
|
+
pageLoading?: boolean = false // 请求期间整页 loading
|
|
299
|
+
headRefreshDatagrid?: boolean|string = false
|
|
300
|
+
filter?: string = ''
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
optionsProps: { // 选项加载类(Select/AutoComplete/CheckboxList/RadioList)
|
|
304
|
+
api?: string
|
|
305
|
+
apiMethod?: string = 'get'
|
|
306
|
+
apiParam?: Record<string, any>
|
|
307
|
+
active?: boolean = true // 挂载即加载 [注意:与 DataGrid.active 默认 false 不同]
|
|
308
|
+
dataSource?: any[] // 静态数据,优先于 api
|
|
309
|
+
textProp?: string = 'text'
|
|
310
|
+
valueProp?: string = 'value'
|
|
311
|
+
tipsProp?: string = 'tips' // 选项 tips 字段名(此处为字符串字段名,非 tipsProp 组)
|
|
312
|
+
addData?: any // 头部追加项
|
|
313
|
+
appendData?: any // 尾部追加项
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
containerProps: { // 弹层容器类(Drawer/DrawerButton/DialogButton)
|
|
317
|
+
modelValue?: boolean // v-model 控制显隐(按钮类不需要)
|
|
318
|
+
title?: string
|
|
319
|
+
url?: string // iframe 地址
|
|
320
|
+
size?: string = '50%' // 弹层宽度(drawer 宽 / dialog 宽)
|
|
321
|
+
confirmMessage?: string // 关闭前确认
|
|
322
|
+
data?: Record<string, any> // 传给弹层的数据
|
|
323
|
+
headRefreshDatagrid?: boolean|string
|
|
324
|
+
filter?: string
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
popconfirmProps: { // WdPopconfirmButton 专用(部分改名避 el-button 冲突)
|
|
328
|
+
confirmButtonText = '确定', cancelButtonText = '取消',
|
|
329
|
+
confirmButtonType = 'primary', cancelButtonType = 'text',
|
|
330
|
+
popIcon, popIconColor = '#f90', hideAfter = 200, popDisabled = false,
|
|
331
|
+
width = 150, trigger = 'click', popperClass, popperOptions,
|
|
332
|
+
showAfter = 0, teleported = true, persistent = false
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
buttonLabelProp: { label?: string } // 按钮文案
|
|
336
|
+
|
|
337
|
+
// optionsEmits(选项类统一 6 个):
|
|
338
|
+
'update:modelValue'(val), change(val), apiBefore({url}), apiSuccess({data}), apiFail({code,message}), apiAfter()
|
|
339
|
+
// buttonApiEmits(API 按钮统一 6 个):
|
|
340
|
+
click(evt), apiBefore({url,method,params}), apiSuccess({data,code,message}),
|
|
341
|
+
apiFail({code,message}), apiException({error,message}), apiAfter({data?,error?})
|
|
342
|
+
```
|
|
343
|
+
|
|
344
|
+
================================================================================
|
|
345
|
+
## 8. 组件总览(28 个)
|
|
346
|
+
================================================================================
|
|
347
|
+
| # | 组件 | 类 | 一句话职能 |
|
|
348
|
+
|---|---|---|---|
|
|
349
|
+
| 1 | WdApiButton | 按钮 | 点击发 API 请求 |
|
|
350
|
+
| 2 | WdConfirmButton | 按钮 | MessageBox 确认后发请求 |
|
|
351
|
+
| 3 | WdDialogButton | 按钮 | 打开 dialog 弹层(iframe/插槽) |
|
|
352
|
+
| 4 | WdPopconfirmButton | 按钮 | Popconfirm 确认后发请求 |
|
|
353
|
+
| 5 | WdPromptButton | 按钮 | 输入值并入参后发请求 |
|
|
354
|
+
| 6 | WdRouteButton | 按钮 | 路由/链接跳转 |
|
|
355
|
+
| 7 | WdTipsButton | 按钮 | 纯提示按钮(按钮基座) |
|
|
356
|
+
| 8 | WdDrawerButton | 按钮 | 打开 drawer/dialog 弹层 |
|
|
357
|
+
| 9 | WdDataGrid | 数据 | 分页表格(远程/静态) |
|
|
358
|
+
| 10 | WdEditableGrid | 数据 | 可编辑表格 |
|
|
359
|
+
| 11 | WdViewer | 数据 | 描述列表/详情查看 |
|
|
360
|
+
| 12 | WdRequester | 数据 | 命令式请求器(v-model 开关触发) |
|
|
361
|
+
| 13 | WdDataForm | 表单 | 数据表单(加载/提交/脏检查) |
|
|
362
|
+
| 14 | WdSearchPanel | 表单 | 搜索面板(联动 DataGrid) |
|
|
363
|
+
| 15 | WdFormItem | 表单 | 表单项包装(tip) |
|
|
364
|
+
| 16 | WdSearchItem | 表单 | 搜索项(SearchPanel 语义) |
|
|
365
|
+
| 17 | WdDrawer | 容器 | 抽屉/对话框(iframe 宿主) |
|
|
366
|
+
| 18 | WdIframe | 容器 | iframe 嵌入(通信/自适应高) |
|
|
367
|
+
| 19 | WdSelect | 输入 | 下拉选择(远程/静态) |
|
|
368
|
+
| 20 | WdAutoComplete | 输入 | 自动完成 |
|
|
369
|
+
| 21 | WdCheckboxList | 输入 | 多选组 |
|
|
370
|
+
| 22 | WdRadioList | 输入 | 单选组 |
|
|
371
|
+
| 23 | WdSwitch | 输入 | 开关(切换即请求,失败回滚) |
|
|
372
|
+
| 24 | WdUpload | 上传 | 文件上传 |
|
|
373
|
+
| 25 | WdImageUpload | 上传 | 图片上传(强制 image/*) |
|
|
374
|
+
| 26 | WdPanel | 样式 | 面板容器 |
|
|
375
|
+
| 27 | WdTips | 样式 | 提示图标/提示框 |
|
|
376
|
+
| 28 | WdStation | 布局 | 管理台整页布局(菜单/标签页/工具栏) |
|
|
377
|
+
|
|
378
|
+
================================================================================
|
|
379
|
+
## 9. 组件详目(props / emits / slots / methods)
|
|
380
|
+
================================================================================
|
|
381
|
+
格式约定:`= 默认值`;`?` 可选;`[G]` 可被 page.componentDefault 全局覆盖;`+` 表示在引用组之上新增。
|
|
382
|
+
|
|
383
|
+
### 9.1 WdApiButton(按钮基座 + API)
|
|
384
|
+
- props: buttonLabelProp + elButtonPropsNoLoading + tipsProp + buttonApiProps
|
|
385
|
+
- emits: buttonApiEmits
|
|
386
|
+
- 行为: api 为空时仅触发 click,不发请求。
|
|
387
|
+
- [陷阱] 外部透传 loading 无效(内部接管),控制 loading 用 buttonLoading。
|
|
388
|
+
|
|
389
|
+
### 9.2 WdConfirmButton
|
|
390
|
+
- props: WdApiButton 全部 + confirmText = '确认执行该操作?' / cancelText = '取消'(置空字符串则不显示取消按钮)/ confirmTitle = '提示'
|
|
391
|
+
- emits: buttonApiEmits + confirm / cancel
|
|
392
|
+
- 行为: ElMessageBox.confirm,type 固定 warning;「确定」按钮文案固定不可配。
|
|
393
|
+
|
|
394
|
+
### 9.3 WdPopconfirmButton
|
|
395
|
+
- props: WdApiButton 全部 + popconfirmProps(16 项,见 §7)
|
|
396
|
+
- emits: buttonApiEmits + confirm / cancel / show / hide
|
|
397
|
+
- 行为: tooltip 与 popconfirm 平级(virtual-ref);placement 同时作用于 tooltip 与 popconfirm。
|
|
398
|
+
- 引入: 仅主入口(无子路径,见 §2.3 [陷阱])。
|
|
399
|
+
|
|
400
|
+
### 9.4 WdPromptButton
|
|
401
|
+
- props: WdApiButton 全部 + promptTitle = '请输入' / promptPlaceholder = '请输入内容' / paramKey = 'value' / promptDefault = ''
|
|
402
|
+
- emits: buttonApiEmits + prompt(value)(无插槽模式)或 confirm(有插槽模式)
|
|
403
|
+
- slots: #content — 存在即切换为自定义内容模式(此时触发 confirm 而非 prompt)
|
|
404
|
+
- 行为: 输入值以 `{ [paramKey]: value }` 浅合并入 apiParam(同名键被覆盖);API 成功才关弹窗,失败保留;弹窗按钮文案固定「确定/取消」。
|
|
405
|
+
|
|
406
|
+
### 9.5 WdRouteButton
|
|
407
|
+
- props: buttonLabelProp + elButtonProps + tipsProp + filter +
|
|
408
|
+
routeName / routePath / params = {} / query = {} / target = '_self'
|
|
409
|
+
- 行为: routeName 优先于 routePath;target = '_blank' 仅支持 routePath(window.open 拼 query);无 router 环境退化 location.href。
|
|
410
|
+
|
|
411
|
+
### 9.6 WdTipsButton
|
|
412
|
+
- props: buttonLabelProp + elButtonProps + tipsProp + filter
|
|
413
|
+
- 行为: 提示基座;tips 非空才包裹 el-tooltip。
|
|
414
|
+
|
|
415
|
+
### 9.7 WdDrawerButton
|
|
416
|
+
- props: WdTipsButton 全部 + mode = 'drawer' | 'dialog' / title / url / data = {} / size = '50%'(弹层宽度)/ direction = 'rtl' / headRefreshDatagrid / filter
|
|
417
|
+
- emits: open / close / confirm(payload 透传)
|
|
418
|
+
- slots: #button(按钮内容);默认插槽 { data, close }(close = 关闭弹层函数);#footer(透传 footerProps,含 close)
|
|
419
|
+
- 行为: 弹层懒挂载(首次点击才渲染);url 模式 data 拼 query。
|
|
420
|
+
- [陷阱] size 被弹层宽度占用 → 控制按钮本身尺寸用 buttonSize。
|
|
421
|
+
|
|
422
|
+
### 9.8 WdDialogButton(WdDrawerButton 的 dialog 专用简化版)
|
|
423
|
+
- name: WdDialogButton;inheritAttrs = false
|
|
424
|
+
- props: filter / headRefreshDatagrid / tipsProp / label = '' / title = '' / url = '' / data = {} / size = '50%'(对话框宽度)/ type = 'primary' / buttonSize = 'default' / disabled = false
|
|
425
|
+
- emits: open / close / confirm(payload 透传)
|
|
426
|
+
- slots: #button;默认插槽 { data, close };#footer(透传 footerProps)
|
|
427
|
+
- 行为: 内部固定组合 WdDrawer `mode="dialog"`;懒挂载(首次点击 → rendered → nextTick → 打开)。
|
|
428
|
+
|
|
429
|
+
### 9.9 WdDataGrid
|
|
430
|
+
- props(33):
|
|
431
|
+
```
|
|
432
|
+
api, apiMethod = 'post', apiParam, active = false [G], dataSource,
|
|
433
|
+
withPager = true, pagerStyle = 'normal', pagerPosition,
|
|
434
|
+
modeSwitch(卡片/表格模式切换), dynamicColumn, columnStorageKey,
|
|
435
|
+
border, stripe, autoHeight, height = 'fix' | string | number,
|
|
436
|
+
rowKey, tableSize, withIndex = true, withSelection, modelValue(已选 v-model),
|
|
437
|
+
selectionKey, withSelectionCart, cartRowKey, cartConfig,
|
|
438
|
+
rowspanKey, rowspanColumn, treeProps, defaultExpandAll,
|
|
439
|
+
tools, toolsPosition = 'right', toolbarPosition = 'left', rowActions, filter
|
|
440
|
+
```
|
|
441
|
+
- 类型:
|
|
442
|
+
```ts
|
|
443
|
+
tools = { refresh?, columnSetting?, modeSwitch?, size?, add?, export?, mode? = 'round', buttonSize? }
|
|
444
|
+
cartConfig = { type? = 'dialog', title? = '已选数据', buttonText?, size? = 560, showClear?, showRemove? }
|
|
445
|
+
RowAction = { text: string, command?: string, type?: string }
|
|
446
|
+
treeProps = { children?: string, hasChildren?: string }
|
|
447
|
+
```
|
|
448
|
+
- emits(11): add / export / row-action({command,row}) / page-change / selection-change / mode-change / loaded / apiBefore / apiAfter / cart-change / update:modelValue
|
|
449
|
+
- slots(5): 默认(列定义,el-table-column 或列配置)/ toolbar { selection, list } / empty / card-item { row, index } / cart-content { list, remove, clear }
|
|
450
|
+
- methods(11): requestApi(extraParam?) / refresh() / search(params) / resetSearch() / getSelection() / clearSelection() / getCartList() / clearCart() / onChangeCurrentpage(page) / onChangePagesize(size) / tableRef(逃生舱 → el-table 实例)
|
|
451
|
+
- 请求参数结构: `{ [pageField]: n, [sizeField]: n, [searchField]: {...条件} }`(字段名见 PageParamConfig)
|
|
452
|
+
|
|
453
|
+
### 9.10 WdEditableGrid(继承 WdDataGrid 能力)
|
|
454
|
+
- 列配置 EditableColumn(17 字段):
|
|
455
|
+
```
|
|
456
|
+
prop, label, width, minWidth, align, fixed,
|
|
457
|
+
editor: 'input' | 'number' | 'select' | 'date',
|
|
458
|
+
editable, placeholder, options, min, max, precision,
|
|
459
|
+
required, validator, rules, formatter
|
|
460
|
+
```
|
|
461
|
+
- 新增 props: editMode = 'cell' | 'row' / saveApi / saveMethod = 'post' / defaultRow / withToolbar / withAdd / withSave / withDelete / withActions / addButtonText = '新增一行' / saveButtonText = '批量保存' / actionWidth = 150
|
|
462
|
+
- 默认差异: rowKey = 'id';border/stripe = true;withIndex = false;tools.refresh = true
|
|
463
|
+
- 脏行机制 [关键]: 新增行恒脏;修改回原值自动取消脏标记;validate/saveAll 只处理脏行;翻页清空编辑态;静态数据深拷贝隔离。
|
|
464
|
+
- methods: saveAll() / validate() / addRow(row?) / getDirtyRows() + WdDataGrid 全套。
|
|
465
|
+
|
|
466
|
+
### 9.11 WdViewer
|
|
467
|
+
- 项配置 ViewerItem(13 字段):
|
|
468
|
+
```
|
|
469
|
+
prop, label, span, width, align, labelAlign, slot, render, formatter,
|
|
470
|
+
type: 'text' | 'tag' | 'time' | 'status' | 'image' | 'copy',
|
|
471
|
+
tagColors, timeFormat, imageSize
|
|
472
|
+
```
|
|
473
|
+
- props: title / column = 3 / border = true / size / labelStyle = { width:'100px', textAlign:'right' } / contentStyle / api / apiMethod = 'get' / apiParam / active = false [G] / data / items / emptyText = '暂无数据'
|
|
474
|
+
- 行为: data(静态)优先于 api;apiParam 变化自动重新请求;标题栏自带大小切换/字段显隐工具。
|
|
475
|
+
- slots: #content { row, data }(全接管);`{prop}-cell` { row, value }(单元格级)
|
|
476
|
+
- methods: requestApi(extraParam?) / getData() / resetData()
|
|
477
|
+
|
|
478
|
+
### 9.12 WdRequester(命令式请求器)
|
|
479
|
+
- props: modelValue(触发开关)/ url / method = 'post' [G] / params / reqOptions [G]
|
|
480
|
+
- emits: update:modelValue / api-before(abort 函数) / api-success(ApiResult) / api-fail(ApiResult) / api-exception(error) / api-after
|
|
481
|
+
- 行为: 一次性开关语义(modelValue true 触发后自动回 false);新请求自动静默中断旧请求。
|
|
482
|
+
|
|
483
|
+
### 9.13 WdDataForm
|
|
484
|
+
- props:
|
|
485
|
+
```
|
|
486
|
+
mode = 'create' | 'edit',
|
|
487
|
+
api(详情加载), apiMethod = 'get', apiParam,
|
|
488
|
+
submitApi, submitMethod = 'post', submitKeys, submitExcludeKeys(数组或逗号字符串),
|
|
489
|
+
active = false [G], confirmLeave = true, withActions = true,
|
|
490
|
+
actionConfig = { resetText, submitText, continueText, closeText, showReset, showContinue },
|
|
491
|
+
headCloseDrawer = true, headRefreshDatagrid, keepFormButton = true,
|
|
492
|
+
rules, labelWidth = '100px', labelPosition = 'right', inline, data, filter
|
|
493
|
+
```
|
|
494
|
+
- emits: submit-success / submit-fail / load-success / change / close({reason}) / apiBefore({type}) / apiAfter({type})
|
|
495
|
+
- slots: 默认 { model, form };#footer { submit, reset, loading }
|
|
496
|
+
- methods: submitForm(continueNext?) / validate() / resetForm(clearOnly?) / getFormData() / fillForm(data) / requestApi() / isDirty() / beforeLeave() / formRef(逃生舱 → el-form)
|
|
497
|
+
- 行为: 底部操作按钮仅在宿主环境(WdDrawer / iframe 弹层)中显示 [陷阱]。
|
|
498
|
+
|
|
499
|
+
### 9.14 WdSearchPanel
|
|
500
|
+
- props: collapsible = true / expand(v-model)/ defaultExpand [陷阱: 元数据标注 true,源码实际 false → 需显式传入] / withActions = true / searchText = '搜索' / resetText = '重置' / expandText = '展开' / collapseText = '收起' / labelWidth = '80px' / actionWidth = 'auto' / headRefreshDatagrid / filter
|
|
501
|
+
- emits: search(params) / reset / expand-change / update:expand
|
|
502
|
+
- slots: 默认 { model }(表单项)/ more { model }(折叠区)/ actions { search, reset }
|
|
503
|
+
- methods: resetForm() / getSearchParams() / expand() / collapse()
|
|
504
|
+
- 行为: $attrs 透传 el-form;HTML(无构建)场景可用全局属性 `q`。
|
|
505
|
+
|
|
506
|
+
### 9.15 WdFormItem
|
|
507
|
+
- props: label / prop / tip / tipPlacement = 'top'
|
|
508
|
+
- slots: 默认 / label
|
|
509
|
+
- 行为: $attrs 透传 el-form-item。
|
|
510
|
+
|
|
511
|
+
### 9.16 WdSearchItem
|
|
512
|
+
- 同 WdFormItem(SearchPanel 内语义化别名)。
|
|
513
|
+
|
|
514
|
+
### 9.17 WdDrawer
|
|
515
|
+
- props: containerProps(8)+ mode = 'drawer' | 'dialog' / direction = 'rtl' / origin / reloadOnOpen = false
|
|
516
|
+
- emits: update:modelValue / open / close / confirm({reason}) / iframe-message({type,payload}) / iframe-ready / iframe-dirty({dirty}) / iframe-submit-success
|
|
517
|
+
- slots: 默认 / footer { close }
|
|
518
|
+
- methods: open() / sendToIframe(type, payload?)
|
|
519
|
+
- 行为: url 模式 data 拼 query,iframe ready 后下发 `wd-container:init`;内嵌 iframe 高度 drawer = 100%(min 400px)、dialog = 60vh;append-to-body。
|
|
520
|
+
|
|
521
|
+
### 9.18 WdIframe
|
|
522
|
+
- props: src / height = '480px' / autoHeight / origin / refreshKey = 0
|
|
523
|
+
- emits: load / message(data)
|
|
524
|
+
- methods: send(message) / refresh()
|
|
525
|
+
- 行为: autoHeight 依赖子页 postMessage 上报 `{ type: 'wd-iframe-height', height }`。
|
|
526
|
+
|
|
527
|
+
### 9.19 WdPanel
|
|
528
|
+
- props: title / description / collapsible = false / opened = true / shadow = 'hover'
|
|
529
|
+
- emits: update:opened / change
|
|
530
|
+
- slots: title / extra(内部 @click.stop)/ 默认 / footer
|
|
531
|
+
- 行为: title 属性或 title 插槽存在才渲染头部。
|
|
532
|
+
|
|
533
|
+
### 9.20 WdSelect
|
|
534
|
+
- props: modelValue / multiple = false / remote = false / filterable = true(默认开启)/ keywordKey = 'keyword' + optionsProps
|
|
535
|
+
- 数据形态: OptionItem 支持对象或基本类型;内部标准化 NormalizedOption { text, value, tips, raw };dataSource 优先于 api;响应 data 为 `{ list }` 结构时自动取 list。
|
|
536
|
+
- emits: optionsEmits
|
|
537
|
+
- slots: 默认 { option, text, value }(自定义选项)
|
|
538
|
+
|
|
539
|
+
### 9.21 WdAutoComplete
|
|
540
|
+
- props: modelValue = string / valueKey = 'value' / labelKey = 'text' / keywordKey = 'keyword' + optionsProps
|
|
541
|
+
- emits: optionsEmits + select(raw)
|
|
542
|
+
- 行为: api + active = true → 输入即远程搜索;否则首次输入加载一次后本地过滤。
|
|
543
|
+
|
|
544
|
+
### 9.22 WdCheckboxList
|
|
545
|
+
- props: modelValue = array / buttonStyle = false + optionsProps
|
|
546
|
+
- emits: optionsEmits
|
|
547
|
+
|
|
548
|
+
### 9.23 WdRadioList
|
|
549
|
+
- props: modelValue = any / buttonStyle = false + optionsProps
|
|
550
|
+
- emits: optionsEmits
|
|
551
|
+
|
|
552
|
+
### 9.24 WdSwitch
|
|
553
|
+
- props: modelValue = false / api / apiMethod = 'post' / apiParam / paramKey = 'status' / activeValue = true / inactiveValue = false / tips / headRefreshDatagrid / filter
|
|
554
|
+
- 行为: 切换即请求 `{ ...apiParam, [paramKey]: 当前值 }`;[关键] 失败自动回滚(apiFail / apiException 均回滚);无 api 时退化为普通开关。
|
|
555
|
+
|
|
556
|
+
### 9.25 WdUpload
|
|
557
|
+
- props: api(自动拼 urlPrefix;完整 http(s):// 不拼)/ deleteApi / deleteMethod = 'post' / primaryKey = 'id' / submitButtonText = '开始上传' / buttonText = '点击上传' / accept / limit / multiple = false / autoUpload = true / name = 'file' / data = {} / disabled / showFileList = true / maxSize = 0(MB,0 = 不限)/ modelValue = array / headRefreshDatagrid / filter
|
|
558
|
+
- 记录结构 UploadFileRecord: { name, url, [primaryKey], ...其他 }
|
|
559
|
+
- 行为 [关键]: 走 el-upload 原生 XHR(不经 axios),但自动拼 urlPrefix 并透传 token 头(Authorization: Bearer);上传成功后整个响应 data 挂在文件对象 biz 上,取 data.url / data.path 回显;删除先二次确认,再按 `{ ...data, [primaryKey]: 值 }` 调 deleteApi。
|
|
560
|
+
- methods: submitUpload() / clearFiles()(仅本地)/ addFile(UploadUserFile) / uploadRef(逃生舱 → el-upload)
|
|
561
|
+
|
|
562
|
+
### 9.26 WdImageUpload
|
|
563
|
+
- props: api / deleteApi / deleteMethod = 'post' / primaryKey = 'id' / maxCount = 8 / thumbnailSize = 100 / preview = true(el-image-viewer)/ accept(默认 image/*)/ maxSize = 5(MB)/ tip / modelValue = string[] / headRefreshDatagrid / filter
|
|
564
|
+
- 行为: [关键] 强制 image/* 校验(改 accept 也绕不过);data 为对象取 data.url/data.path,为字符串直接用;上传失败条目自动移除;达 maxCount 隐藏加号。
|
|
565
|
+
- methods: clearFiles() / uploadRef
|
|
566
|
+
|
|
567
|
+
### 9.27 WdTips
|
|
568
|
+
- props: tips / type = 'word' | 'box'(默认 word)/ icon / color = '#909399'
|
|
569
|
+
- icon: 仅内置 InfoFilled / WarningFilled / QuestionFilled 三个,其他值回退 InfoFilled。
|
|
570
|
+
- 行为: word 模式 tooltip 固定 dark + top;默认插槽仅 box 模式生效。
|
|
571
|
+
|
|
572
|
+
### 9.28 WdStation(管理台布局)
|
|
573
|
+
- 类型:
|
|
574
|
+
```ts
|
|
575
|
+
StationMenuGroup = { key, title, icon?, menus }
|
|
576
|
+
StationMenuItem = { title, icon?, path?, name?, badge?, disabled?, affix?, group?, groupKey?, groupIcon?, children?, [key: string]: any }
|
|
577
|
+
StationTab = { key, title, path?, affix? }
|
|
578
|
+
StationToolbarConfig = { refresh?, settings?, user?, login? } // 各项: 'left' | 'right' | 'none',默认 'right'
|
|
579
|
+
```
|
|
580
|
+
- props(20):
|
|
581
|
+
```
|
|
582
|
+
title, logo, menuGroups(array | JSON 字符串,优先), menus(array | JSON 字符串),
|
|
583
|
+
headerMode = 'nav' | 'title', menuMode = 'side' | 'top' | 'none',
|
|
584
|
+
contentMode = 'page' | 'tabs', routerMode = 'auto' | 'router' | 'html',
|
|
585
|
+
collapsible = true, collapsed(v-model), activeGroup, activeMenu,
|
|
586
|
+
openTabs(v-model 受控), userName, userAvatar, copyright,
|
|
587
|
+
footerInfo(v-model), keepAlive = false, toolbarConfig(object | JSON 字符串), filter
|
|
588
|
+
```
|
|
589
|
+
- 菜单 key 规则 [关键]: `分组key:name||path||title`(内部称 _key,按此优先级取 name → path → title 生成)。
|
|
590
|
+
- emits(13): 含 menu-select / group-change / tab-click / tab-close / update:collapsed / update:openTabs / update:footerInfo 等。
|
|
591
|
+
- slots(12): 默认 / logo { collapsed } / menu-top / menu-bottom / header-left / header-center / header-right / top-menu-left / top-menu-right / tabs-left / tabs-right / footer
|
|
592
|
+
- methods: refresh() / openTab(tab) / closeTab(key)
|
|
593
|
+
- 行为: [陷阱] 父容器必须提供确定高度否则塌陷;affix 标签固定不可关闭;分导台仅 headerMode = 'nav' 且分组数 > 1 时显示;group-change 不触发路由;menuGroups / menus 可直接传 JSON 字符串(HTML 场景)。
|
|
594
|
+
|
|
595
|
+
================================================================================
|
|
596
|
+
## 10. 跨 iframe 协议(POSTMESSAGE PROTOCOL)
|
|
597
|
+
================================================================================
|
|
598
|
+
宿主(WdDrawer/WdIframe)与 iframe 子页通过 postMessage 通信:
|
|
599
|
+
```
|
|
600
|
+
wd-container:ready 子页 → 宿主:子页就绪
|
|
601
|
+
wd-container:init 宿主 → 子页:下发初始化数据(Drawer url 模式 data)
|
|
602
|
+
wd-container:dirty 子页 → 宿主:表单脏状态 { dirty: boolean }
|
|
603
|
+
wd-container:submit-success 子页 → 宿主:提交成功(宿主据此关闭/联动刷新)
|
|
604
|
+
wd-iframe-height 子页 → 宿主(WdIframe):高度上报 { type, height },autoHeight 依赖
|
|
605
|
+
```
|
|
606
|
+
宿主 API: WdDrawer.sendToIframe(type, payload?) / WdIframe.send(message)。
|
|
607
|
+
宿主事件: iframe-message({type,payload}) / iframe-ready / iframe-dirty({dirty}) / iframe-submit-success(WdDrawer);message(data)(WdIframe)。
|
|
608
|
+
|
|
609
|
+
================================================================================
|
|
610
|
+
## 11. 陷阱清单(PITFALLS — 开发前必读)
|
|
611
|
+
================================================================================
|
|
612
|
+
1. API 类按钮(ApiButton 系):外部透传 `loading` 无效,组件内部接管;控制用 `buttonLoading`。
|
|
613
|
+
2. WdDrawerButton / WdDialogButton:`size` 是弹层宽度;按钮自身尺寸用 `buttonSize`。
|
|
614
|
+
3. `active` 默认值不一致:optionsProps.active = true;WdDataGrid.active / WdViewer.active / WdDataForm.active = false(需远程加载时显式开启)。
|
|
615
|
+
4. WdSwitch:请求失败自动回滚状态(apiFail / apiException 都回滚),无需手动恢复。
|
|
616
|
+
5. WdStation:菜单 key 规则 `分组key:name||path||title`;父容器必须给定确定高度(flex/定高),否则塌陷。
|
|
617
|
+
6. WdSearchPanel:defaultExpand 元数据标注 true 与源码 false 不一致 → 需要默认展开时显式 `:default-expand="true"` 或 v-model:expand。
|
|
618
|
+
7. WdUpload:上传走 el-upload 原生 XHR(不经 axios 实例拦截器),但自动拼 urlPrefix + 透传 Authorization: Bearer token;删除有二次确认。
|
|
619
|
+
8. WdEditableGrid:翻页清空未保存编辑态;静态 dataSource 会被深拷贝(改源数据不生效,需重新赋值);saveAll/validate 只处理脏行。
|
|
620
|
+
9. WdViewer:data(静态)优先于 api;apiParam 变化自动重拉。
|
|
621
|
+
10. WdPromptButton:API 失败弹窗保留不关闭(成功才关)。
|
|
622
|
+
11. WdPopconfirmButton:无独立子路径入口,仅主入口导出。
|
|
623
|
+
12. 全局配置在组件挂载时缓存:运行中改配置只影响新挂载组件;已挂载组件用 :key 强制重建。
|
|
624
|
+
13. WdDataForm:底部操作按钮仅在宿主环境(Drawer/iframe 弹层)显示;独立页面内使用需自建按钮并用 methods。
|
|
625
|
+
14. WdConfirmButton:ElMessageBox type 固定 warning;「确定」按钮文案固定不可配(cancelText 置空可隐藏取消按钮)。
|
|
626
|
+
15. WdImageUpload:强制 image/* 校验,accept 改为非图片也绕不过;modelValue 为 string[](非对象数组)。
|
|
627
|
+
16. 业务失败(code 未达 successCode)Promise 仍然 resolve(success=false),只有网络/运行异常才 reject — 不要用 try/catch 捕获业务失败。
|
|
628
|
+
17. WdTips.icon 仅支持 3 个内置图标名,其他值静默回退 InfoFilled。
|
|
629
|
+
18. optionsProps 中的 `tipsProp` 是「选项 tips 字段名」(string),与按钮的 tipsProp 组(tips/tipsType/placement)同名不同义。
|
|
630
|
+
19. WdRequester:method / reqOptions 支持 page.componentDefault.WdRequester 全局覆盖;新请求自动中断旧请求。
|
|
631
|
+
20. 并发去重 dedup 默认开启:method+url+params 完全一致的并发请求只发一次;需要强制多次时传 `dedup: false`。
|
|
632
|
+
|
|
633
|
+
================================================================================
|
|
634
|
+
## 12. 典型组合模式(USAGE PATTERNS)
|
|
635
|
+
================================================================================
|
|
636
|
+
### 12.1 搜索 + 表格 + 操作按钮(同组联动)
|
|
637
|
+
```vue
|
|
638
|
+
<wd-search-panel filter="user" head-refresh-datagrid>
|
|
639
|
+
<wd-search-item label="姓名" prop="name"><el-input v-model="m.name" /></wd-search-item>
|
|
640
|
+
</wd-search-panel>
|
|
641
|
+
<wd-data-grid ref="grid" api="/user/list" :active="true" filter="user" :row-actions="[{text:'删除',command:'del'}]" @row-action="onAction" />
|
|
642
|
+
<wd-api-button label="新增" api="/user/save" head-refresh-datagrid />
|
|
643
|
+
```
|
|
644
|
+
### 12.2 弹层表单(按钮 → Drawer → DataForm → 自动回刷)
|
|
645
|
+
```vue
|
|
646
|
+
<wd-drawer-button label="编辑" url="/form.html" :data="{ id: row.id }" head-refresh-datagrid />
|
|
647
|
+
<!-- 弹层内: <wd-data-form submit-api="/user/save" @submit-success="..."> -->
|
|
648
|
+
```
|
|
649
|
+
### 12.3 命令式请求
|
|
650
|
+
```vue
|
|
651
|
+
<wd-requester v-model="trigger" url="/api/refresh" method="post" @api-success="onOk" />
|
|
652
|
+
```
|
|
653
|
+
|
|
654
|
+
================================================================================
|
|
655
|
+
## 版本变化
|
|
656
|
+
================================================================================
|
|
657
|
+
- V_1.1(2026-09-16 22:03:47):校正 §4.2 配置结构 —— ResponseConfig.props 键名更正为 codeName/messageName/dataName(对齐 src/lib/configs/default-config.ts);request 配置块补全 urlPrefix/throwException/dedup/loading/axiosConfig/transform;theme 明确 colors/cssVars 结构。
|
|
658
|
+
- V_1.0(2026-09-16 19:45:30):首版。覆盖 workdesktop-ai@1.0.2 全量事实:包结构、3 种引入方式(27 子路径 + 14 独立样式对照)、WorkDesktopConfig 完整结构与 6 配置 API、统一响应协议、RequestAPI/request/useRequest、声明式联动(6 + 3 函数)、共享 Props/Emits 组、28 组件详目(含 api-meta 缺失的 WdDialogButton,源自源码核对)、跨 iframe 协议、20 条陷阱清单、3 个典型组合模式。
|