feat: add remote control page, update next dependency (#3501)

zzcr · web-flow · commit 63a172ad472e · 2025-06-13T17:25:38.000+08:00
* feat: 添加遥控器页面，更新next依赖

* chore: 修改代理为https url
diff --git a/examples/sites/package.json b/examples/sites/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@opentiny/vue-docs",
   "type": "module",
-  "version": "3.24.0",
+  "version": "3.24.3",
   "license": "MIT",
   "scripts": {
     "start": "vite",
@@ -27,8 +27,7 @@
     "@docsearch/css": "^3.8.0",
     "@docsearch/js": "^3.8.0",
     "@docsearch/react": "npm:@docsearch/css",
-    "@opentiny/next": "0.1.2",
-    "@opentiny/next-vue": "0.0.1-alpha.1",
+    "@opentiny/next-vue": "0.0.1",
     "@opentiny/tiny-robot": "0.2.1",
     "@opentiny/tiny-robot-kit": "0.2.1",
     "@opentiny/tiny-robot-svgs": "0.2.1",
diff --git a/examples/sites/src/App.vue b/examples/sites/src/App.vue
@@ -17,7 +17,7 @@ import { iconClose } from '@opentiny/vue-icon'
 import { appData } from './tools'
 import useTheme from './tools/useTheme'
 import { useNextClient } from '@opentiny/next-vue'
-import { globalConversation } from './composable/utils'
+import { globalConversation, $session } from './composable/utils'
 
 export default defineComponent({
   name: 'AppVue',
@@ -33,7 +33,7 @@ export default defineComponent({
 
     const { sessionId } = useNextClient({
       clientInfo: { name: 'tiny-vue-website', version: '1.0.0' },
-      proxyOptions: { url: 'https://39.108.160.245/sse', token: '' }
+      proxyOptions: { url: 'https://agent.icjs.ink/sse', token: '', sessionId: $session.sessionId }
     })
 
     watch(
diff --git a/examples/sites/src/components/MessageCard.vue b/examples/sites/src/components/MessageCard.vue
@@ -0,0 +1,117 @@
+<template>
+  <div class="message-card" :class="role">
+    <div class="avatar">
+      <component :is="avatarIcon" class="avatar-icon" />
+    </div>
+    <div class="content">
+      <div class="role-name">{{ roleName }}</div>
+      <div class="message">{{ message }}</div>
+      <div class="time">{{ formatTime }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { IconAi, IconUser } from '@opentiny/tiny-robot-svgs'
+
+interface Props {
+  role: 'user' | 'assistant'
+  message: string
+  timestamp: number
+}
+
+const props = defineProps<Props>()
+
+const roleName = computed(() => (props.role === 'assistant' ? '智能助手' : '我'))
+
+const avatarIcon = computed(() => (props.role === 'assistant' ? IconAi : IconUser))
+
+const formatTime = computed(() => {
+  const date = new Date(props.timestamp)
+  return date.toLocaleTimeString('zh-CN', {
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false
+  })
+})
+</script>
+
+<style scoped lang="less">
+.message-card {
+  display: flex;
+  margin: 16px;
+  gap: 12px;
+  max-width: 80%;
+
+  &.assistant {
+    margin-right: auto;
+
+    .content {
+      background-color: #f0f2f5;
+    }
+
+    .avatar-icon {
+      color: #2080f0;
+    }
+  }
+
+  &.user {
+    margin-left: auto;
+    flex-direction: row-reverse;
+
+    .content {
+      background-color: #e8f5e9;
+    }
+
+    .avatar-icon {
+      color: #18a058;
+    }
+  }
+
+  .avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    overflow: hidden;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #f5f7fa;
+
+    .avatar-icon {
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  .content {
+    padding: 12px;
+    border-radius: 12px;
+    position: relative;
+    min-width: 120px;
+    max-width: calc(100% - 60px);
+
+    .role-name {
+      font-size: 14px;
+      color: #666;
+      margin-bottom: 4px;
+    }
+
+    .message {
+      font-size: 16px;
+      line-height: 1.5;
+      word-break: break-word;
+      white-space: pre-wrap;
+    }
+
+    .time {
+      font-size: 12px;
+      color: #999;
+      margin-top: 4px;
+      text-align: right;
+    }
+  }
+}
+</style>
diff --git a/examples/sites/src/composable/utils.ts b/examples/sites/src/composable/utils.ts
@@ -5,16 +5,16 @@
 
 import type { ChatMessage, ChatCompletionResponse, StreamHandler } from '@opentiny/tiny-robot-kit'
 import type { ChatCompletionRequest } from '@opentiny/tiny-robot-kit'
-import { ref, type Ref } from 'vue'
+import { ref, reactive, type Ref } from 'vue'
 
-export { $local } from './storage'
+export { $local, $session } from './storage'
 
 export const showTinyRobot = ref(true)
 
-export const globalConversation = {
+export const globalConversation = reactive({
   id: '',
   sessionId: ''
-}
+})
 /**
  * 处理SSE流式响应
  * @param response fetch响应对象
diff --git a/examples/sites/src/router.js b/examples/sites/src/router.js
@@ -8,6 +8,7 @@ const Docs = () => import('@/views/docs/docs.vue')
 const Overview = () => import('@/views/overview.vue')
 const Features = () => import('@/views/features.vue')
 const Comprehensive = () => import('@/views/comprehensive/index.vue')
+const Remoter = () => import('@/views/remoter/index.vue')
 
 const context = import.meta.env.VITE_CONTEXT
 
@@ -24,6 +25,11 @@ let routes = [
     component: Comprehensive,
     name: 'comprehensive'
   },
+  {
+    path: `${context}:all?/zh-CN/:theme/remoter`,
+    component: Remoter,
+    name: 'remoter'
+  },
   // 文档
   {
     path: `${context}:all?/:lang/:theme/docs/:docId`,
diff --git a/examples/sites/src/views/comprehensive/index.vue b/examples/sites/src/views/comprehensive/index.vue
@@ -96,7 +96,7 @@ watch(
       const encryptedId = CryptoJS.AES.encrypt(newVal, 'secret-session-id').toString()
 
       const secretId = encodeURIComponent(encryptedId)
-      sessionUrl.value = 'http://39.108.160.245?id=' + secretId
+      sessionUrl.value = `https://agent.icjs.ink?id=${secretId}`
     }
   },
   { immediate: true }
@@ -202,9 +202,7 @@ watch(
   border-radius: 12px;
   padding: 32px;
   width: 460px;
-  box-shadow:
-    0 20px 25px -5px rgba(0, 0, 0, 0.1),
-    0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 }
 
 .qr-modal-header {
@@ -267,22 +265,13 @@ watch(
 
 @keyframes glow {
   0% {
-    box-shadow:
-      0 0 5px rgba(22, 119, 255, 0.2),
-      0 0 10px rgba(22, 119, 255, 0.2),
-      0 0 15px rgba(22, 119, 255, 0.2);
+    box-shadow: 0 0 5px rgba(22, 119, 255, 0.2), 0 0 10px rgba(22, 119, 255, 0.2), 0 0 15px rgba(22, 119, 255, 0.2);
   }
   50% {
-    box-shadow:
-      0 0 10px rgba(22, 119, 255, 0.3),
-      0 0 20px rgba(22, 119, 255, 0.3),
-      0 0 30px rgba(22, 119, 255, 0.3);
+    box-shadow: 0 0 10px rgba(22, 119, 255, 0.3), 0 0 20px rgba(22, 119, 255, 0.3), 0 0 30px rgba(22, 119, 255, 0.3);
   }
   100% {
-    box-shadow:
-      0 0 5px rgba(22, 119, 255, 0.2),
-      0 0 10px rgba(22, 119, 255, 0.2),
-      0 0 15px rgba(22, 119, 255, 0.2);
+    box-shadow: 0 0 5px rgba(22, 119, 255, 0.2), 0 0 10px rgba(22, 119, 255, 0.2), 0 0 15px rgba(22, 119, 255, 0.2);
   }
 }
 
diff --git a/examples/sites/src/views/remoter/index.vue b/examples/sites/src/views/remoter/index.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+// 导入 CryptoJS 库
+import CryptoJS from 'crypto-js'
+import { reactive } from 'vue'
+import { TinyButton, TinyDrawer } from '@opentiny/vue'
+import RobotChat from '../../components/tiny-robot-chat.vue'
+import Sound from './sound.vue'
+import { globalConversation } from '../../composable/utils'
+
+// 加密密钥，需要和生成二维码的页面保持一致
+const secretKey = 'secret-session-id'
+// 获取 URL 参数
+const urlParams = new URLSearchParams(window.location.search)
+const encryptedId = urlParams.get('id')
+const state = reactive({ isShow: true, showChat: false, showSound: false })
+
+if (encryptedId) {
+  // 解密 id
+  const bytes = CryptoJS.AES.decrypt(encryptedId, secretKey)
+  const originalText = bytes.toString(CryptoJS.enc.Utf8)
+  // 存储解密后的 id 到 window.sessionId
+  globalConversation.sessionId = originalText
+}
+const showMoter = (type) => {
+  state.isShow = false
+  state[type] = true
+}
+</script>
+
+<template>
+  <div>
+    <RobotChat v-if="state.showChat" />
+    <Sound v-if="state.showSound" />
+    <tiny-drawer
+      v-if="state.isShow"
+      title="请选择控制器"
+      placement="bottom"
+      :mask-closable="false"
+      :show-close="false"
+      v-model:visible="state.isShow"
+      height="400px"
+    >
+      <div class="link-box">
+        <tiny-button @click="showMoter('showSound')" type="info" size="large">语音控制器</tiny-button>
+
+        <tiny-button @click="showMoter('showChat')" type="info" size="large">综合控制器</tiny-button>
+      </div>
+    </tiny-drawer>
+  </div>
+</template>
+
+<style scoped lang="less">
+.link-box {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  .tiny-button {
+    margin-bottom: 20px;
+  }
+}
+</style>
diff --git a/examples/sites/src/views/remoter/sound.vue b/examples/sites/src/views/remoter/sound.vue
