@deep-eye/core 0.3.0 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -76
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,104 +1,43 @@
|
|
|
1
1
|
# @deep-eye/core
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Vue 3 组件库，提供思维导图和 AI 会话组件。
|
|
4
4
|
|
|
5
5
|
## 安装
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
8
|
pnpm add @deep-eye/core
|
|
9
|
-
# 或 npm install @deep-eye/core
|
|
10
9
|
```
|
|
11
10
|
|
|
11
|
+
## 使用
|
|
12
|
+
|
|
12
13
|
```ts
|
|
13
|
-
import {
|
|
14
|
+
import {
|
|
15
|
+
D3MindMap,
|
|
16
|
+
AiConversation,
|
|
17
|
+
useConversation,
|
|
18
|
+
ASK_USER_FORM_SYSTEM_PROMPT,
|
|
19
|
+
} from '@deep-eye/core'
|
|
14
20
|
import '@deep-eye/core/style.css'
|
|
15
21
|
```
|
|
16
22
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
## 组件
|
|
20
|
-
|
|
21
|
-
| 组件 | 说明 |
|
|
22
|
-
| --- | --- |
|
|
23
|
-
| **D3MindMap** | D3 思维导图：缩放、拖拽、折叠、主题 |
|
|
24
|
-
| **AiConversation** | AI 会话渲染：流式文本、富媒体、工具调用、AskUserForm |
|
|
25
|
-
|
|
26
|
-
输入框与 SSE 由宿主实现；库只负责消息渲染。
|
|
27
|
-
|
|
28
|
-
## AiConversation 快速上手
|
|
29
|
-
|
|
30
|
-
### 基础流式
|
|
23
|
+
### AiConversation
|
|
31
24
|
|
|
32
25
|
```ts
|
|
33
|
-
import { AiConversation, useConversation } from '@deep-eye/core'
|
|
34
|
-
|
|
35
26
|
const { messages, appendDelta } = useConversation()
|
|
36
|
-
|
|
37
27
|
appendDelta({ id: 'a1', role: 'assistant', contentDelta: chunk })
|
|
38
|
-
appendDelta({ id: 'a1', contentDelta: more })
|
|
39
28
|
appendDelta({ id: 'a1', done: true })
|
|
40
29
|
```
|
|
41
30
|
|
|
42
31
|
```vue
|
|
43
|
-
<AiConversation :messages="messages"
|
|
32
|
+
<AiConversation :messages="messages" @action="onAction" />
|
|
44
33
|
```
|
|
45
34
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
### 交互组件（AskUserForm）
|
|
35
|
+
AskUserForm 使用 `ASK_USER_FORM_SYSTEM_PROMPT`；多个问题可切换，结果以 `formId` 区分。
|
|
49
36
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
```ts
|
|
53
|
-
import { ASK_USER_FORM_SYSTEM_PROMPT } from '@deep-eye/core'
|
|
54
|
-
|
|
55
|
-
const system = ['你是助手……', ASK_USER_FORM_SYSTEM_PROMPT].join('\n\n')
|
|
56
|
-
```
|
|
37
|
+
### D3MindMap
|
|
57
38
|
|
|
58
39
|
```vue
|
|
59
|
-
<
|
|
60
|
-
:messages="messages"
|
|
61
|
-
:user-avatar="userAvatarUrl"
|
|
62
|
-
:assistant-avatar="assistantAvatarUrl"
|
|
63
|
-
@action="onAction"
|
|
64
|
-
/>
|
|
40
|
+
<D3MindMap :data="data" height="600px" show-toolbar />
|
|
65
41
|
```
|
|
66
42
|
|
|
67
|
-
|
|
68
|
-
- AskUserForm 暂不支持自定义位置（固定底部居中）
|
|
69
|
-
|
|
70
|
-
## D3MindMap 快速上手
|
|
71
|
-
|
|
72
|
-
```vue
|
|
73
|
-
<script setup>
|
|
74
|
-
import { D3MindMap } from '@deep-eye/core'
|
|
75
|
-
|
|
76
|
-
const data = {
|
|
77
|
-
nodeData: {
|
|
78
|
-
id: 'root',
|
|
79
|
-
topic: 'Deep-Eye',
|
|
80
|
-
root: true,
|
|
81
|
-
children: [
|
|
82
|
-
{ id: '1', topic: '可视化' },
|
|
83
|
-
{ id: '2', topic: 'AI 会话' },
|
|
84
|
-
],
|
|
85
|
-
},
|
|
86
|
-
}
|
|
87
|
-
</script>
|
|
88
|
-
|
|
89
|
-
<template>
|
|
90
|
-
<D3MindMap :data="data" height="600px" show-toolbar />
|
|
91
|
-
</template>
|
|
92
|
-
```
|
|
93
|
-
|
|
94
|
-
## 要求
|
|
95
|
-
|
|
96
|
-
| 依赖 | 版本 |
|
|
97
|
-
| --- | --- |
|
|
98
|
-
| Node.js | ≥ 22 |
|
|
99
|
-
| Vue | ≥ 3.5 |
|
|
100
|
-
| TypeScript | ≥ 5.9（开发） |
|
|
101
|
-
|
|
102
|
-
## License
|
|
103
|
-
|
|
104
|
-
MIT · Author: King · 深瞳前端团队
|
|
43
|
+
Node ≥ 22 · Vue ≥ 3.5 · MIT
|