@manohub/skill-select-workbench 0.0.1-beta1 → 0.0.1-beta2
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/README.md +151 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
# @manohub/skill-select-workbench
|
|
2
|
+
|
|
3
|
+
技能选择帮助（Vue 3 组件包）：左侧业务域/技能分类导航树 + 右侧技能表格的双面板选择弹窗，底部已选回显，支持单选/跨页多选、关键字搜索、技能类型过滤。基于 `@farris/ui-vue` 表格与树组件，数据层内置（`@aihub/api-client` 已打包），开箱即用。
|
|
4
|
+
|
|
5
|
+
## 环境要求
|
|
6
|
+
|
|
7
|
+
- Vue ^3.4
|
|
8
|
+
- `@farris/ui-vue` ^1.8（运行时 peer 依赖，与宿主共享实例）
|
|
9
|
+
- 运行环境需可达 AIHub 服务（请求前缀 `/api/runtime/aihub/v1.0`，由部署侧的网关/dev proxy 转发）
|
|
10
|
+
- 宿主工程需具备 `@gsp-sys/utils`（宿主框架 SDK，承担平台 request 能力；ManoHarness 体系内的工程天然具备）
|
|
11
|
+
|
|
12
|
+
## 安装
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
npm install @manohub/skill-select-workbench
|
|
16
|
+
# 或
|
|
17
|
+
pnpm add @manohub/skill-select-workbench
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## 快速开始
|
|
21
|
+
|
|
22
|
+
```tsx
|
|
23
|
+
import { ref } from 'vue'
|
|
24
|
+
import { FButton } from '@farris/ui-vue'
|
|
25
|
+
import {
|
|
26
|
+
SkillSelectDialog,
|
|
27
|
+
SKILL_CATEGORIES,
|
|
28
|
+
} from '@manohub/skill-select-workbench'
|
|
29
|
+
import type { SkillSelectConfirmPayload, SkillSelectItem } from '@manohub/skill-select-workbench'
|
|
30
|
+
import '@manohub/skill-select-workbench/index.css'
|
|
31
|
+
|
|
32
|
+
const open = ref(false)
|
|
33
|
+
const picked = ref<SkillSelectItem[]>([])
|
|
34
|
+
|
|
35
|
+
const handleConfirm = (payload: SkillSelectConfirmPayload) => {
|
|
36
|
+
picked.value = payload.items
|
|
37
|
+
}
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
```tsx
|
|
41
|
+
<FButton type="primary" onClick={() => (open.value = true)}>选择技能</FButton>
|
|
42
|
+
|
|
43
|
+
<SkillSelectDialog
|
|
44
|
+
modelValue={open.value}
|
|
45
|
+
onUpdate:modelValue={(v: boolean) => (open.value = v)}
|
|
46
|
+
initSelected={picked.value}
|
|
47
|
+
onConfirm={handleConfirm}
|
|
48
|
+
/>
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
> 样式需手动引入一次：`import '@manohub/skill-select-workbench/index.css'`
|
|
52
|
+
|
|
53
|
+
## SkillSelectDialog
|
|
54
|
+
|
|
55
|
+
### Props
|
|
56
|
+
|
|
57
|
+
| Prop | 类型 | 默认 | 说明 |
|
|
58
|
+
|---|---|---|---|
|
|
59
|
+
| `modelValue` | `boolean` | `false` | 弹窗开关（v-model） |
|
|
60
|
+
| `singleSelect` | `boolean` | `false` | 单选：一次只能选定一个技能；`false` = 跨页多选 |
|
|
61
|
+
| `initSelected` | `SkillSelectItem[]` | `[]` | 打开时回显的已选项 |
|
|
62
|
+
| `initCategory` | `string` | `''` | 技能类型（使用类别）锁定，见下方语义 |
|
|
63
|
+
| `title` | `string` | `'选择技能'` | 弹窗标题 |
|
|
64
|
+
|
|
65
|
+
### Emits
|
|
66
|
+
|
|
67
|
+
| Emit | 载荷 | 触发 |
|
|
68
|
+
|---|---|---|
|
|
69
|
+
| `update:modelValue` | `boolean` | 关闭弹窗 |
|
|
70
|
+
| `confirm` | `{ items: SkillSelectItem[] }` | 点「确定」 |
|
|
71
|
+
|
|
72
|
+
### initCategory 锁定语义
|
|
73
|
+
|
|
74
|
+
- `''`（默认）：**不锁定**。左侧为业务域树，表格含「技能类型」切换行（全部 / 通用办公技能 / 业务系统技能）。
|
|
75
|
+
- `'GENERAL_OFFICE'`：**锁定通用办公类**。隐藏类型切换行，左侧切换为技能分类树（按 `topic` 过滤）。
|
|
76
|
+
- `'BUSINESS_SYSTEM'`：**锁定业务系统类**。隐藏类型切换行，左侧为业务域树（按 `businessDomain` 过滤）。
|
|
77
|
+
|
|
78
|
+
### 交互行为
|
|
79
|
+
|
|
80
|
+
- **点行切换选中**：点击表格行即选中/取消该技能（勾选框同样可用）；单选模式下点已选行取消。
|
|
81
|
+
- **跨页保留**：多选模式下翻页不清空勾选。
|
|
82
|
+
- **已选回显**：底部操作区展示「已选 N 条」、已选项 chip（可单个删除或一键清空）。
|
|
83
|
+
- **搜索**：按技能名称模糊搜索，350ms 防抖。
|
|
84
|
+
- **分页**：10 / 20 / 50 每页可切。
|
|
85
|
+
|
|
86
|
+
## SkillSelectField
|
|
87
|
+
|
|
88
|
+
只读字段帮助形态：展示已选文本，点击唤起 SkillSelectDialog。
|
|
89
|
+
|
|
90
|
+
```tsx
|
|
91
|
+
import { SkillSelectField } from '@manohub/skill-select-workbench'
|
|
92
|
+
|
|
93
|
+
<SkillSelectField
|
|
94
|
+
singleSelect
|
|
95
|
+
selectedItems={items.value}
|
|
96
|
+
onUpdate:selectedItems={(v: SkillSelectItem[]) => (items.value = v)}
|
|
97
|
+
/>
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
| Prop | 类型 | 默认 | 说明 |
|
|
101
|
+
|---|---|---|---|
|
|
102
|
+
| `singleSelect` | `boolean` | `false` | 单选模式 |
|
|
103
|
+
| `disabled` | `boolean` | `false` | 禁用 |
|
|
104
|
+
| `placeholder` | `string` | `'请选择技能'` | 空态文案 |
|
|
105
|
+
| `selectedItems` | `SkillSelectItem[]` | `[]` | 已选项（v-model） |
|
|
106
|
+
|
|
107
|
+
Emits：`update:selectedItems`。
|
|
108
|
+
|
|
109
|
+
## 数据契约
|
|
110
|
+
|
|
111
|
+
```ts
|
|
112
|
+
/** 已选技能条目 */
|
|
113
|
+
interface SkillSelectItem {
|
|
114
|
+
value: string // 技能 id，保存/回传
|
|
115
|
+
text: string // 回显文本（displayName || name）
|
|
116
|
+
skill?: SkillSummaryResponse // 完整技能快照，确认后可直接消费
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
interface SkillSelectConfirmPayload {
|
|
120
|
+
items: SkillSelectItem[]
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
/** 由技能快照构造条目 */
|
|
124
|
+
function toSkillSelectItem(skill: SkillSummaryResponse): SkillSelectItem
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
确认载荷携带完整技能快照，无需按 id 回查。
|
|
128
|
+
|
|
129
|
+
## 数据接口
|
|
130
|
+
|
|
131
|
+
组件数据经内置数据层请求以下接口（AIHub 服务）：
|
|
132
|
+
|
|
133
|
+
| 用途 | 接口 |
|
|
134
|
+
|---|---|
|
|
135
|
+
| 技能分页查询 | `GET /api/runtime/aihub/v1.0/listByAuth` |
|
|
136
|
+
| 业务域树 | `GET /api/runtime/aihub/v1.0/business-domains/tree` |
|
|
137
|
+
| 技能分类 | `GET /api/runtime/aihub/v1.0/topics` |
|
|
138
|
+
|
|
139
|
+
接入方需保证运行环境可访问上述接口（同域网关或 dev proxy 转发）。
|
|
140
|
+
|
|
141
|
+
## 本地开发
|
|
142
|
+
|
|
143
|
+
```bash
|
|
144
|
+
pnpm install
|
|
145
|
+
pnpm playground # 启动测试场 http://localhost:3012（/api 代理到 localhost:5300）
|
|
146
|
+
pnpm build # 类型检查 + lib 构建（dist/index.js + dist/index.css + d.ts）
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
## License
|
|
150
|
+
|
|
151
|
+
MIT
|
package/package.json
CHANGED