Skip to content

Commit 0b1d2a8

Browse files
zzcrzzcr
authored
chore: sync release-3.24.0 to dev (#3507)
* feat: New MCP comprehensive example added to the official website (#3497) * feat: 官网新增mcp综合示例 * fix: 修复 tiny-robot-chat 组件中的提示项和建议项的传递逻辑，优化 Demo 组件的 QR 码展示样式 * fix: 修复引入路径问题 * chore: Update changelog and add TinyVue intelligent component access documentation (#3498) * chore: 更新changelog，并添加TinyVue智能化组件接入文档 * chore: 添加菜单优化文档 * chore: 更新mcp.md文档中的sessionId说明，简化调试提示 * chore: 更新mcp-en.md文档中的标题和内容，统一语言为英文 * feat: add remote control page, update next dependency (#3501) * feat: 添加遥控器页面，更新next依赖 * chore: 修改代理为https url * feat: 更新会话ID的处理逻辑 * fix: 更新依赖版本约束以支持更高版本 * fix: 更新版本号至3.24.4
1 parent fc5a11e commit 0b1d2a8

31 files changed

+1638
-151
lines changed

‎examples/sites/demos/pc/menus.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,11 @@ const docMenusChildren = [
4242
'titleEn': 'theme-dark',
4343
'key': 'theme-dark'
4444
},
45+
{
46+
'title': '智能化',
47+
'titleEn': 'mcp',
48+
'key': 'mcp'
49+
},
4550
{ 'title': '表单校验配置', 'titleEn': 'formValid', 'key': 'form-valid' },
4651
{ 'title': '常见问题', 'titleEn': 'faq', 'key': 'faq' },
4752
{

‎examples/sites/demos/pc/webdoc/changelog.md‎

Lines changed: 52 additions & 119 deletions
Large diffs are not rendered by default.

‎examples/sites/demos/pc/webdoc/mcp-en.md‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
# TinyVue Intelligent Component Access Guide
2+
3+
TinyVue's intelligent components provide a complete intelligent solution, allowing your application to have AI conversation, voice interaction, and other capabilities. This guide will walk you through how to integrate TinyVue's intelligent components into your project.
4+
5+
## Install dependencies
6+
7+
First, you need to install the following core dependency packages:
8+
9+
```bash
10+
npm install @opentiny/tiny-vue-mcp @opentiny/next-vue @opentiny/vue-common @opentiny/vue
11+
```
12+
13+
## Access steps
14+
15+
### 1. Initialize MCP Configuration
16+
17+
Initialize MCP configuration in the application entry file (e.g., `main.js`):
18+
19+
```js
20+
import { registerMcpConfig } from '@opentiny/vue-common'
21+
import { createMcpTools, getTinyVueMcpConfig } from '@opentiny/tiny-vue-mcp'
22+
23+
// Register TinyVue component MCP configuration
24+
registerMcpConfig(getTinyVueMcpConfig(), createMcpTools)
25+
```
26+
27+
### 2. Create NextClient Proxy Client
28+
29+
Create a NextClient proxy client in `App.vue` to establish real-time communication:
30+
31+
```html
32+
<script setup lang="ts">
33+
import { useNextClient } from '@opentiny/next-vue'
34+
35+
const { sessionId } = useNextClient({
36+
clientInfo: {
37+
name: 'your-app-name', // Application name
38+
version: '1.0.0', // Application version
39+
sessionId: 'your-session-id' // Optional, will be passed in by the backend if not provided; for debugging, you can use crypto.randomUUID() to generate a fixed one
40+
},
41+
proxyOptions: {
42+
url: 'your-sse-url', // SSE service address
43+
token: 'your-token' // Authentication token
44+
}
45+
})
46+
</script>
47+
48+
<template>
49+
<div>
50+
<h1>NextClient Proxy Client</h1>
51+
<p>Session ID: {{ sessionId }}</p>
52+
</div>
53+
</template>
54+
```
55+
56+
### 3. MCP Component Configuration
57+
58+
When using
59+
60+
```html
61+
<script setup lang="ts">
62+
import { useNextServer } from '@opentiny/next-vue'
63+
64+
const { server } = useNextServer({
65+
serverInfo: { name: 'your-server-name', version: '1.0.0' }
66+
})
67+
</script>
68+
69+
<template>
70+
<tiny-grid
71+
:tiny_mcp_config="{
72+
server,
73+
business: {
74+
id: 'your-business-id',
75+
description: 'Business description'
76+
}
77+
}"
78+
>
79+
<!-- Table content -->
80+
</tiny-grid>
81+
</template>
82+
```
83+
84+
## Notes
85+
86+
1. Ensure that the server supports SSE (Server-Sent Events) connections
87+
2. It is recommended to use HTTPS in production environments
88+
3. CORS needs to be correctly configured to support cross-origin requests
89+
90+
## Common issues
91+
92+
1. Session connection failed
93+
94+
- Check if the SSE service address is correct
95+
- Confirm that the network connection is normal
96+
- Verify that the authentication information is valid
97+
98+
2. AI conversation response is not available
99+
- Check if the session is established normally
100+
- Confirm that the prompt item configuration is correct
101+
- Check if there are errors in the network request

‎examples/sites/demos/pc/webdoc/mcp.md‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
# TinyVue 智能化组件接入指南
2+
3+
TinyVue 的智能化组件提供了一套完整的智能化解决方案，让您的应用具备 AI 对话、语音交互等能力。本文将指导您如何在项目中接入 TinyVue 的智能化组件。
4+
5+
## 安装依赖
6+
7+
首先需要安装以下核心依赖包：
8+
9+
```bash
10+
npm install @opentiny/tiny-vue-mcp @opentiny/next-vue @opentiny/vue-common @opentiny/vue
11+
```
12+
13+
## 接入步骤
14+
15+
### 1. 初始化 MCP 配置
16+
17+
在应用入口文件（如 `main.js`）中初始化 MCP 配置：
18+
19+
```js
20+
import { registerMcpConfig } from '@opentiny/vue-common'
21+
import { createMcpTools, getTinyVueMcpConfig } from '@opentiny/tiny-vue-mcp'
22+
23+
// 注册 TinyVue 组件 MCP 配置
24+
registerMcpConfig(getTinyVueMcpConfig(), createMcpTools)
25+
```
26+
27+
### 2. 创建 NextClient 代理客户端
28+
29+
在 `App.vue` 中创建 NextClient 代理客户端，用于建立实时通信：
30+
31+
```html
32+
<script setup lang="ts">
33+
import { useNextClient } from '@opentiny/next-vue'
34+
35+
const { sessionId } = useNextClient({
36+
clientInfo: {
37+
name: 'your-app-name', // 应用名称
38+
version: '1.0.0', // 应用版本
39+
sessionId: 'your-session-id' // 可选，不传由后台自动生成。调试时可使用 crypto.randomUUID() 生成固定值
40+
},
41+
proxyOptions: {
42+
url: 'your-sse-url', // SSE 服务地址，目前agent代理服务器代码未开源，如想进一步了解可以在github中提issue单
43+
token: 'your-token' // 认证 token
44+
}
45+
})
46+
</script>
47+
48+
<template>
49+
<div>
50+
<h1>NextClient 代理客户端</h1>
51+
<p>会话 ID: {{ sessionId }}</p>
52+
</div>
53+
</template>
54+
```
55+
56+
### 3. MCP 组件配置
57+
58+
在子页面中使用 Grid 等支持 MCP 的组件时，添加 MCP 配置：
59+
60+
```html
61+
<script setup lang="ts">
62+
import { useNextServer } from '@opentiny/next-vue'
63+
64+
const { server } = useNextServer({
65+
serverInfo: { name: 'your-server-name', version: '1.0.0' }
66+
})
67+
</script>
68+
69+
<template>
70+
<tiny-grid
71+
:tiny_mcp_config="{
72+
server,
73+
business: {
74+
id: 'your-business-id',
75+
description: '业务描述'
76+
}
77+
}"
78+
>
79+
<!-- 表格内容 -->
80+
</tiny-grid>
81+
</template>
82+
```
83+
84+
## 注意事项
85+
86+
1. 确保服务端支持 SSE（Server-Sent Events）连接
87+
2. 建议在生产环境使用 HTTPS 协议
88+
3. 需要正确配置 CORS 以支持跨域请求
89+
90+
## 常见问题
91+
92+
1. 会话连接失败
93+
94+
- 检查 SSE 服务地址是否正确
95+
- 确认网络连接是否正常
96+
- 验证认证信息是否有效
97+
98+
2. AI 对话无响应
99+
- 检查会话是否正常建立
100+
- 确认提示项配置是否正确
101+
- 查看网络请求是否有错误

‎examples/sites/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@opentiny/vue-docs",
33
"type": "module",
4-
"version": "3.24.0",
4+
"version": "3.24.4",
55
"license": "MIT",
66
"scripts": {
77
"start": "vite",
@@ -27,12 +27,11 @@
2727
"@docsearch/css": "^3.8.0",
2828
"@docsearch/js": "^3.8.0",
2929
"@docsearch/react": "npm:@docsearch/css",
30-
"@opentiny/next": "0.1.2",
31-
"@opentiny/next-vue": "0.0.1-alpha.1",
30+
"@opentiny/next-vue": "^0.0.1",
3231
"@opentiny/tiny-robot": "0.2.1",
3332
"@opentiny/tiny-robot-kit": "0.2.1",
3433
"@opentiny/tiny-robot-svgs": "0.2.1",
35-
"@opentiny/tiny-vue-mcp": "0.0.1-alpha.3",
34+
"@opentiny/tiny-vue-mcp": "^0.0.1",
3635
"@opentiny/utils": "workspace:~",
3736
"@opentiny/vue": "workspace:~",
3837
"@opentiny/vue-common": "workspace:~",
@@ -58,6 +57,7 @@
5857
"@vue/shared": "^3.4.31",
5958
"@vueuse/core": "^12.7.0",
6059
"@vueuse/head": "0.7.13",
60+
"crypto-js": "^4.2.0",
6161
"github-markdown-css": "~5.1.0",
6262
"highlight.js": "^11.5.1",
6363
"marked": "^4.3.0",

‎examples/sites/src/App.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import { iconClose } from '@opentiny/vue-icon'
1717
import { appData } from './tools'
1818
import useTheme from './tools/useTheme'
1919
import { useNextClient } from '@opentiny/next-vue'
20-
import { globalConversation } from './views/components-doc/composition/utils'
20+
import { globalConversation, $session } from './composable/utils'
2121
2222
export default defineComponent({
2323
name: 'AppVue',
@@ -33,13 +33,14 @@ export default defineComponent({
3333
3434
const { sessionId } = useNextClient({
3535
clientInfo: { name: 'tiny-vue-website', version: '1.0.0' },
36-
proxyOptions: { url: 'https://39.108.160.245/sse', token: '' }
36+
proxyOptions: { url: 'https://agent.icjs.ink/sse', token: '', sessionId: $session.sessionId }
3737
})
3838
3939
watch(
4040
() => sessionId.value,
4141
(newVal) => {
4242
if (newVal) {
43+
$session.sessionId = newVal
4344
globalConversation.sessionId = newVal
4445
}
4546
}

‎examples/sites/src/components/MessageCard.vue‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
<template>
2+
<div class="message-card" :class="role">
3+
<div class="avatar">
4+
<component :is="avatarIcon" class="avatar-icon" />
5+
</div>
6+
<div class="content">
7+
<div class="role-name">{{ roleName }}</div>
8+
<div class="message">{{ message }}</div>
9+
<div class="time">{{ formatTime }}</div>
10+
</div>
11+
</div>
12+
</template>
13+
14+
<script setup lang="ts">
15+
import { computed } from 'vue'
16+
import { IconAi, IconUser } from '@opentiny/tiny-robot-svgs'
17+
18+
interface Props {
19+
role: 'user' | 'assistant'
20+
message: string
21+
timestamp: number
22+
}
23+
24+
const props = defineProps<Props>()
25+
26+
const roleName = computed(() => (props.role === 'assistant' ? '智能助手' : '我'))
27+
28+
const avatarIcon = computed(() => (props.role === 'assistant' ? IconAi : IconUser))
29+
30+
const formatTime = computed(() => {
31+
const date = new Date(props.timestamp)
32+
return date.toLocaleTimeString('zh-CN', {
33+
hour: '2-digit',
34+
minute: '2-digit',
35+
hour12: false
36+
})
37+
})
38+
</script>
39+
40+
<style scoped lang="less">
41+
.message-card {
42+
display: flex;
43+
margin: 16px;
44+
gap: 12px;
45+
max-width: 80%;
46+
47+
&.assistant {
48+
margin-right: auto;
49+
50+
.content {
51+
background-color: #f0f2f5;
52+
}
53+
54+
.avatar-icon {
55+
color: #2080f0;
56+
}
57+
}
58+
59+
&.user {
60+
margin-left: auto;
61+
flex-direction: row-reverse;
62+
63+
.content {
64+
background-color: #e8f5e9;
65+
}
66+
67+
.avatar-icon {
68+
color: #18a058;
69+
}
70+
}
71+
72+
.avatar {
73+
width: 40px;
74+
height: 40px;
75+
border-radius: 50%;
76+
overflow: hidden;
77+
flex-shrink: 0;
78+
display: flex;
79+
align-items: center;
80+
justify-content: center;
81+
background-color: #f5f7fa;
82+
83+
.avatar-icon {
84+
width: 24px;
85+
height: 24px;
86+
}
87+
}
88+
89+
.content {
90+
padding: 12px;
91+
border-radius: 12px;
92+
position: relative;
93+
min-width: 120px;
94+
max-width: calc(100% - 60px);
95+
96+
.role-name {
97+
font-size: 14px;
98+
color: #666;
99+
margin-bottom: 4px;
100+
}
101+
102+
.message {
103+
font-size: 16px;
104+
line-height: 1.5;
105+
word-break: break-word;
106+
white-space: pre-wrap;
107+
}
108+
109+
.time {
110+
font-size: 12px;
111+
color: #999;
112+
margin-top: 4px;
113+
text-align: right;
114+
}
115+
}
116+
}
117+
</style>

examples/sites/src/views/components-doc/components/anchor.vue renamed to examples/sites/src/components/anchor.vue

File renamed without changes.

examples/sites/src/views/components-doc/components/api-docs.vue renamed to examples/sites/src/components/api-docs.vue

File renamed without changes.

examples/sites/src/views/components-doc/components/async-highlight.vue renamed to examples/sites/src/components/async-highlight.vue

File renamed without changes.

0 commit comments

Comments
 (0)