From 16174d60a7f2a362629543bed0742f36999b04ab Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Fri, 13 Jun 2025 10:55:18 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E9=81=A5?=
 =?UTF-8?q?=E6=8E=A7=E5=99=A8=E9=A1=B5=E9=9D=A2=EF=BC=8C=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?next=E4=BE=9D=E8=B5=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/sites/package.json                   |   3 +-
 examples/sites/src/App.vue                    |   4 +-
 examples/sites/src/components/MessageCard.vue | 117 ++++++
 examples/sites/src/composable/utils.ts        |   8 +-
 examples/sites/src/router.js                  |   6 +
 .../sites/src/views/comprehensive/index.vue   |   2 +-
 examples/sites/src/views/remoter/index.vue    |  63 ++++
 examples/sites/src/views/remoter/sound.vue    | 349 ++++++++++++++++++
 8 files changed, 543 insertions(+), 9 deletions(-)
 create mode 100644 examples/sites/src/components/MessageCard.vue
 create mode 100644 examples/sites/src/views/remoter/index.vue
 create mode 100644 examples/sites/src/views/remoter/sound.vue

diff --git a/examples/sites/package.json b/examples/sites/package.json
index 5956602b10..217832ebcd 100644
--- a/examples/sites/package.json
+++ b/examples/sites/package.json
@@ -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
index 22969fc421..add4966a0c 100644
--- 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://39.108.160.245/sse', token: '', sessionId: $session.sessionId }
     })
 
     watch(
diff --git a/examples/sites/src/components/MessageCard.vue b/examples/sites/src/components/MessageCard.vue
new file mode 100644
index 0000000000..503704abff
--- /dev/null
+++ 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
index 217bcfc3aa..82453888a2 100644
--- 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
index 9b471c4a94..c438df9d23 100644
--- 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
index 310d78cc59..afd40f43a2 100644
--- 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 = `${location.href.replace('comprehensive', 'remoter')}?id=${secretId}`
     }
   },
   { immediate: true }
diff --git a/examples/sites/src/views/remoter/index.vue b/examples/sites/src/views/remoter/index.vue
new file mode 100644
index 0000000000..61af1798a2
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..d9a7b17718
--- /dev/null
+++ b/examples/sites/src/views/remoter/sound.vue
@@ -0,0 +1,349 @@
+<template>
+  <div class="sound-container">
+    <div class="messages-container" ref="messagesContainer">
+      <template v-if="messages && messages.length > 0">
+        <message-card
+          v-for="(msg, index) in messages"
+          :key="index"
+          :role="msg.role === 'system' ? 'assistant' : msg.role"
+          :message="msg.content"
+          :timestamp="messageTimestamps[index]"
+        />
+      </template>
+      <div v-else class="empty-message">
+        <p>暂无对话记录</p>
+      </div>
+    </div>
+    <div class="sound-box">
+      <div class="recording-status" v-show="isTalk">
+        <div class="wave-animation"></div>
+        <span>{{ recordingTime }}s</span>
+      </div>
+      <tiny-button
+        @touchstart.prevent="handleStart"
+        @touchend.prevent="handleEnd"
+        @touchcancel.prevent="handleEnd"
+        :type="isTalk ? 'danger' : 'info'"
+        class="talk-button"
+        size="large"
+        :reset-time="0"
+        :disabled="!isSupported"
+      >
+        {{ buttonText }}
+      </tiny-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onUnmounted, watch, nextTick } from 'vue'
+import { TinyButton, TinyNotify } from '@opentiny/vue'
+import { useTinyRobot } from '../../composable/useTinyRobot'
+import MessageCard from '../../components/MessageCard.vue'
+
+// 类型定义
+interface SpeechRecognitionResult {
+  [index: number]: {
+    transcript: string
+    confidence: number
+  }
+  isFinal?: boolean
+  length: number
+}
+
+interface SpeechRecognitionResultList {
+  [index: number]: SpeechRecognitionResult
+  length: number
+}
+
+interface SpeechRecognitionEvent extends Event {
+  results: SpeechRecognitionResultList
+}
+
+interface SpeechRecognitionErrorEvent extends Event {
+  error: string
+  message: string
+}
+
+// 获取SpeechRecognition构造函数
+const getSpeechRecognition = () => {
+  const SpeechRecognition =
+    (window as any).SpeechRecognition ||
+    (window as any).webkitSpeechRecognition ||
+    (window as any).mozSpeechRecognition ||
+    (window as any).msSpeechRecognition
+  return SpeechRecognition
+}
+
+// 状态管理
+const isTalk = ref(false)
+const isSupported = ref(false)
+const recordingTime = ref(0)
+const maxRecordingTime = 60
+let recognition: any = null
+let recordingTimer: number | null = null
+const messagesContainer = ref<HTMLElement | null>(null)
+const messageTimestamps = ref<number[]>([])
+const { sendMessage, messages } = useTinyRobot()
+const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
+
+// 计算属性
+const buttonText = computed(() => {
+  if (!isSupported.value) return '当前浏览器不支持语音识别'
+  if (isTalk.value) return `录音中 ${recordingTime.value}s`
+  return '长按说话'
+})
+
+// 监听消息变化，更新时间戳和自动滚动
+watch(
+  () => messages.value,
+  async (newMessages) => {
+    if (!newMessages) return
+
+    // 更新时间戳
+    if (messageTimestamps.value.length < newMessages.length) {
+      const timestamp = Date.now()
+      messageTimestamps.value = newMessages.map((_, index) => messageTimestamps.value[index] || timestamp)
+    }
+
+    // 自动滚动到底部
+    await nextTick()
+    if (messagesContainer.value) {
+      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
+    }
+  },
+  { deep: true }
+)
+
+// 初始化语音识别
+const initSpeechRecognition = () => {
+  const SpeechRecognition = getSpeechRecognition()
+
+  if (SpeechRecognition) {
+    isSupported.value = true
+    recognition = new SpeechRecognition()
+    recognition.lang = 'zh-CN'
+    recognition.continuous = false
+    recognition.interimResults = false
+    recognition.maxAlternatives = 1
+
+    // Safari 需要特殊处理
+    if (isSafari) {
+      recognition.interimResults = true
+    }
+
+    let finalTranscript = ''
+
+    recognition.addEventListener('result', (event: SpeechRecognitionEvent) => {
+      const transcript = event.results[0][0].transcript
+      if (transcript.trim()) {
+        finalTranscript = transcript
+      }
+    })
+
+    recognition.addEventListener('end', () => {
+      stopRecording()
+      // 确保在录音结束时发送消息
+      if (finalTranscript.trim()) {
+        sendMessage(finalTranscript)
+        finalTranscript = ''
+      }
+    })
+
+    recognition.addEventListener('error', (event: SpeechRecognitionErrorEvent) => {
+      handleRecognitionError(event)
+      finalTranscript = ''
+    })
+  } else {
+    isSupported.value = false
+    TinyNotify({
+      type: 'error',
+      title: '提示',
+      message: '您的浏览器不支持语音识别，请使用Chrome、Safari或Edge浏览器',
+      position: 'top-right',
+      duration: 5000
+    })
+  }
+}
+
+// 错误处理
+const handleRecognitionError = (event: SpeechRecognitionErrorEvent) => {
+  stopRecording()
+  let errorMessage = '语音识别出错'
+
+  switch (event.error) {
+    case 'not-allowed':
+      errorMessage = '请允许浏览器使用麦克风'
+      break
+    case 'no-speech':
+      errorMessage = '未检测到语音，请重试'
+      break
+    case 'network':
+      errorMessage = '网络连接出错，请检查网络后重试'
+      break
+    case 'aborted':
+      return // 用户主动取消，不显示错误
+    default:
+      errorMessage = `语音识别失败: ${event.message || '未知错误'}`
+  }
+
+  TinyNotify({
+    type: 'error',
+    title: '语音识别出错',
+    message: errorMessage,
+    position: 'top-right',
+    duration: 3000
+  })
+}
+
+// 开始录音
+const handleStart = async (event: TouchEvent) => {
+  event.preventDefault()
+  event.stopPropagation()
+
+  if (!isSupported.value) {
+    TinyNotify({
+      type: 'error',
+      title: '提示',
+      message: '当前浏览器不支持语音识别',
+      position: 'top-right',
+      duration: 3000
+    })
+    return
+  }
+
+  if (isTalk.value) return
+
+  try {
+    recognition.start()
+    isTalk.value = true
+    recordingTime.value = 0
+    startRecordingTimer()
+  } catch (error) {
+    handleRecognitionError({
+      error: 'start_error',
+      message: '启动语音识别失败，请重试'
+    } as SpeechRecognitionErrorEvent)
+  }
+}
+
+// 结束录音
+const handleEnd = () => {
+  if (!isTalk.value) return
+  try {
+    recognition.stop()
+  } catch (error) {
+    console.error('停止录音失败:', error)
+  }
+  stopRecording()
+}
+
+// 开始计时
+const startRecordingTimer = () => {
+  recordingTimer = window.setInterval(() => {
+    recordingTime.value++
+    if (recordingTime.value >= maxRecordingTime) {
+      handleEnd()
+      TinyNotify({
+        type: 'warning',
+        title: '提示',
+        message: '已达到最大录音时长',
+        position: 'top-right',
+        duration: 3000
+      })
+    }
+  }, 1000)
+}
+
+// 停止录音
+const stopRecording = () => {
+  isTalk.value = false
+  if (recordingTimer) {
+    clearInterval(recordingTimer)
+    recordingTimer = null
+  }
+}
+
+// 初始化
+initSpeechRecognition()
+
+// 组件卸载时清理
+onUnmounted(() => {
+  if (recordingTimer) {
+    clearInterval(recordingTimer)
+  }
+  if (recognition) {
+    try {
+      recognition.abort()
+    } catch (error) {
+      console.error('清理语音识别失败:', error)
+    }
+  }
+})
+</script>
+
+<style scoped lang="less">
+.sound-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  position: relative;
+
+  .messages-container {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px;
+    margin-bottom: 120px;
+
+    .empty-message {
+      text-align: center;
+      color: #999;
+      padding: 20px;
+    }
+  }
+
+  .sound-box {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: 10px;
+    background: white;
+    padding: 10px;
+    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+
+    .recording-status {
+      text-align: center;
+      margin-bottom: 10px;
+
+      .wave-animation {
+        width: 100px;
+        height: 20px;
+        margin: 0 auto 5px;
+        background: linear-gradient(90deg, #ff4d4f 25%, #ff7875 50%, #ff4d4f 75%);
+        background-size: 200% 100%;
+        animation: wave 2s linear infinite;
+      }
+    }
+
+    .talk-button {
+      width: 100%;
+      margin: 20px 0;
+      transition: all 0.3s;
+
+      &:active {
+        transform: scale(0.98);
+      }
+    }
+  }
+}
+
+@keyframes wave {
+  0% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+</style>

From 87888c861fde0001679895ebec3cee0fc82a5820 Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Fri, 13 Jun 2025 16:07:28 +0800
Subject: [PATCH 2/2] =?UTF-8?q?chore:=20=E4=BF=AE=E6=94=B9=E4=BB=A3?=
 =?UTF-8?q?=E7=90=86=E4=B8=BAhttps=20url?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/sites/package.json                   |  2 +-
 examples/sites/src/App.vue                    |  2 +-
 .../sites/src/views/comprehensive/index.vue   | 21 +++++--------------
 3 files changed, 7 insertions(+), 18 deletions(-)

diff --git a/examples/sites/package.json b/examples/sites/package.json
index 217832ebcd..49eebbf846 100644
--- 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",
diff --git a/examples/sites/src/App.vue b/examples/sites/src/App.vue
index add4966a0c..c9f43ba785 100644
--- a/examples/sites/src/App.vue
+++ b/examples/sites/src/App.vue
@@ -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: '', sessionId: $session.sessionId }
+      proxyOptions: { url: 'https://agent.icjs.ink/sse', token: '', sessionId: $session.sessionId }
     })
 
     watch(
diff --git a/examples/sites/src/views/comprehensive/index.vue b/examples/sites/src/views/comprehensive/index.vue
index afd40f43a2..289b88157b 100644
--- 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 = `${location.href.replace('comprehensive', 'remoter')}?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);
   }
 }