feat: 新增 useRecord useSend useXStream 钩子函数和 XRequest 工具类

Author: 何嘉悦

apps/playground/components.d.ts

@@ -15,6 +15,7 @@ declare module 'vue' {
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
     HooksUseXStreamScenarioSIP: typeof import('./src/components/hooks-useXStream-scenarioSIP.vue')['default']

apps/playground/src/App.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import UseBubble from './components/demo-useBubble.vue'
-// import UseBubbleList from './components/demo-useBubbleList.vue'
+import UseBubbleList from './components/demo-useBubbleList.vue'
 import UseSender from './components/demo-useSender.vue'
 import ScenarioSIP from './components/hooks-useXStream-scenarioSIP.vue'
 import ScenarioSSE from './components/hooks-useXStream-scenarioSSE.vue'
@@ -23,9 +23,10 @@ import UseRecord from './components/useRecord.vue'
       <el-tab-pane label="Bubble">
         <UseBubble />
       </el-tab-pane>
-      <!-- <el-tab-pane label="BubbleList">
+
+      <el-tab-pane label="BubbleList">
         <UseBubbleList />
-      </el-tab-pane> -->
+      </el-tab-pane>
 
       <el-tab-pane label="Sender">
         <UseSender />

apps/playground/src/components/hooks-useXStream-scenarioSIP.vue

@@ -5,7 +5,7 @@ const { startStream, cancel, data, error, isLoading } = useXStream()
 
 async function startSIPStream() {
   try {
-    const response = await fetch('http://localhost:3000/api/sip', {
+    const response = await fetch('https://node-test.element-plus-x.com/api/sip', {
       headers: { 'Content-Type': 'application/sip' },
     })
     const readableStream = response.body!

apps/playground/src/components/hooks-useXStream-scenarioSSE.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { useXStream } from 'vue-element-plus-x'
+import { useXStream } from 'vue-element-plus-x/src/hooks/useXStream'
 
 const { startStream, cancel, data, error, isLoading } = useXStream()
 
 async function startSSE() {
   try {
-    const response = await fetch('http://localhost:3000/api/sse', {
+    const response = await fetch('https://node-test.element-plus-x.com/api/sse', {
       headers: { 'Content-Type': 'text/event-stream' },
     })
     const readableStream = response.body!
@@ -16,7 +16,7 @@ async function startSSE() {
   }
 }
 
-// 计算属性
+// 机器人的 content 计算属性
 const content = computed(() => {
   if (!data.value.length)
     return ''
@@ -41,10 +41,6 @@ const content = computed(() => {
   console.log('Text:', text)
   return text
 })
-
-watch(() => data.value, () => {
-  console.log('New data:', data.value)
-}, { deep: true })
 </script>
 
 <template>

apps/playground/src/components/useRecord.vue

@@ -109,6 +109,10 @@ watch(text, (val) => {
   display: flex;
   flex-direction: column;
   gap: 12px;
+  padding: 12px;
+  background: white;
+  border-radius: 15px;
+
   .btn-list {
     display: flex;
     gap: 12px;

apps/playground/src/components/useSend.vue

@@ -35,21 +35,12 @@ const sse = new XRequest({
 
 function startFn() {
   str.value = ''
-  sse.send('/api/sip')
-  // es.value = new EventSource('https://sse.dev/test')
-  // es.value.onopen = () => {
-  //   console.log('onOpen')
-  // }
-  // es.value.onerror = () => {
-  //   clearEs()
-  // }
-  // es.value.onmessage = (e) => {
-  //   console.log('getData:', e.data)
-  //   const r = JSON.parse(e.data)
-  //   str.value += `\n${r.msg}`
-  // }
+  sse.send('/test')
 }
 
+// useSend 的 abort 和 finish 是一样的方法。
+// 为了体现 这边 xrequest 请求，支持手动中断，和结束回调。
+// 所以 也在 useSend 中，也暴露了一个名字叫 finish 的方法。
 const { send, loading, abort, finish: _finish } = useSend({
   sendHandler: startFn,
   abortHandler: sse.abort,
@@ -63,11 +54,11 @@ setTimeout(() => {
 </script>
 
 <template>
-  <button v-if="!loading" @click="send">
-    开始发送
-  </button>
-  <button v-else @click="abort">
-    终止发送
-  </button>
+  <el-button v-if="!loading" @click="send">
+    开始请求流式接口
+  </el-button>
+  <el-button v-else @click="abort">
+    终止请求
+  </el-button>
   <div>{{ str }}</div>
 </template>

packages/components/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-element-plus-x",
   "type": "module",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "license": "MIT",
   "homepage": "https://element-plus-x.com",
   "repository": {

packages/components/src/hooks/useXStream.ts

@@ -1,6 +1,3 @@
-// 常量定义
-import { onUnmounted, ref, shallowRef } from 'vue'
-
 const DEFAULT_STREAM_SEPARATOR = '\n\n'
 const DEFAULT_PART_SEPARATOR = '\n'
 const DEFAULT_KV_SEPARATOR = ':'
@@ -152,11 +149,6 @@ export function useXStream() {
     }
   }
 
-  // 组件卸载时自动中断
-  onUnmounted(() => {
-    cancel()
-  })
-
   return {
     startStream,
     cancel, // 新增中断方法