vue-element-ui-x 0.1.8-beta → 0.1.10-beta

package/src/components/Welcome/src/main.vue

@@ -1,151 +1,151 @@
-<template>
-  <div
-    :class="containerClass"
-    :style="styleConfig"
-    class="el-x-welcome"
-  >
-    <!--  image -->
-    <slot name="image">
-      <div
-        v-if="hasIcon"
-        :class="iconClass"
-        :style="styles && styles.icon"
-        class="el-x-welcome-icon"
-      >
-        <el-image
-          :src="icon"
-          class="icon-image"
-        />
-      </div>
-    </slot>
-
-    <div class="content-wrapper">
-      <!-- extra -->
-      <div
-        v-if="hasTitleOrExtra"
-        class="title-wrapper"
-      >
-        <div
-          v-if="title"
-          :class="titleClass"
-          :style="styles && styles.title"
-          class="el-x-welcome-title"
-        >
-          {{ title }}
-        </div>
-        <div
-          v-if="hasExtraOrSlot"
-          :class="extraClass"
-          :style="styles && styles.extra"
-          class="el-x-welcome-extra"
-        >
-          <slot name="extra">{{ extra }}</slot>
-        </div>
-      </div>
-
-      <!--  description -->
-      <div
-        v-if="hasDescription"
-        :class="descriptionClass"
-        :style="styles && styles.description"
-        class="el-x-welcome-description"
-      >
-        {{ description }}
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: 'ElXWelcome',
-    props: {
-      className: {
-        type: String,
-        default: '',
-      },
-      rootClassName: {
-        type: String,
-        default: '',
-      },
-      variant: {
-        type: String,
-        default: 'filled',
-        validator: value => ['filled', 'borderless'].includes(value),
-      },
-      direction: {
-        type: String,
-        default: 'ltr',
-        validator: value => ['ltr', 'rtl'].includes(value),
-      },
-      classNames: {
-        type: Object,
-        default: () => ({}),
-      },
-      icon: {
-        type: String,
-        default: '',
-      },
-      title: {
-        type: String,
-        default: '',
-      },
-      extra: {
-        type: [String, Object],
-        default: '',
-      },
-      description: {
-        type: String,
-        default: '',
-      },
-      styleConfig: {
-        type: Object,
-        default: () => ({}),
-      },
-      styles: {
-        type: Object,
-        default: () => ({}),
-      },
-    },
-    computed: {
-      hasIcon() {
-        return !!this.icon;
-      },
-      hasTitleOrExtra() {
-        return !!this.title || !!this.extra;
-      },
-      hasExtraOrSlot() {
-        return !!this.extra || !!this.$slots.extra;
-      },
-      hasDescription() {
-        return !!this.description;
-      },
-      containerClass() {
-        return [
-          this.className,
-          this.rootClassName,
-          `el-x-welcome-${this.variant}`,
-          {
-            'el-x-welcome-rtl': this.direction === 'rtl',
-          },
-        ];
-      },
-      iconClass() {
-        return this.classNames && this.classNames.icon;
-      },
-      titleClass() {
-        return this.classNames && this.classNames.title;
-      },
-      extraClass() {
-        return this.classNames && this.classNames.extra;
-      },
-      descriptionClass() {
-        return this.classNames && this.classNames.description;
-      },
-    },
-  };
-</script>
-
-<style lang="scss" scoped>
-  @import '../../../styles/Welcome.scss';
-</style>
+<template>
+  <div
+    :class="containerClass"
+    :style="styleConfig"
+    class="el-x-welcome"
+  >
+    <!--  image -->
+    <slot name="image">
+      <div
+        v-if="hasIcon"
+        :class="iconClass"
+        :style="styles && styles.icon"
+        class="el-x-welcome-icon"
+      >
+        <el-image
+          :src="icon"
+          class="icon-image"
+        />
+      </div>
+    </slot>
+
+    <div class="content-wrapper">
+      <!-- extra -->
+      <div
+        v-if="hasTitleOrExtra"
+        class="title-wrapper"
+      >
+        <div
+          v-if="title"
+          :class="titleClass"
+          :style="styles && styles.title"
+          class="el-x-welcome-title"
+        >
+          {{ title }}
+        </div>
+        <div
+          v-if="hasExtraOrSlot"
+          :class="extraClass"
+          :style="styles && styles.extra"
+          class="el-x-welcome-extra"
+        >
+          <slot name="extra">{{ extra }}</slot>
+        </div>
+      </div>
+
+      <!--  description -->
+      <div
+        v-if="hasDescription"
+        :class="descriptionClass"
+        :style="styles && styles.description"
+        class="el-x-welcome-description"
+      >
+        {{ description }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'ElXWelcome',
+    props: {
+      className: {
+        type: String,
+        default: '',
+      },
+      rootClassName: {
+        type: String,
+        default: '',
+      },
+      variant: {
+        type: String,
+        default: 'filled',
+        validator: value => ['filled', 'borderless'].includes(value),
+      },
+      direction: {
+        type: String,
+        default: 'ltr',
+        validator: value => ['ltr', 'rtl'].includes(value),
+      },
+      classNames: {
+        type: Object,
+        default: () => ({}),
+      },
+      icon: {
+        type: String,
+        default: '',
+      },
+      title: {
+        type: String,
+        default: '',
+      },
+      extra: {
+        type: [String, Object],
+        default: '',
+      },
+      description: {
+        type: String,
+        default: '',
+      },
+      styleConfig: {
+        type: Object,
+        default: () => ({}),
+      },
+      styles: {
+        type: Object,
+        default: () => ({}),
+      },
+    },
+    computed: {
+      hasIcon() {
+        return !!this.icon;
+      },
+      hasTitleOrExtra() {
+        return !!this.title || !!this.extra;
+      },
+      hasExtraOrSlot() {
+        return !!this.extra || !!this.$slots.extra;
+      },
+      hasDescription() {
+        return !!this.description;
+      },
+      containerClass() {
+        return [
+          this.className,
+          this.rootClassName,
+          `el-x-welcome-${this.variant}`,
+          {
+            'el-x-welcome-rtl': this.direction === 'rtl',
+          },
+        ];
+      },
+      iconClass() {
+        return this.classNames && this.classNames.icon;
+      },
+      titleClass() {
+        return this.classNames && this.classNames.title;
+      },
+      extraClass() {
+        return this.classNames && this.classNames.extra;
+      },
+      descriptionClass() {
+        return this.classNames && this.classNames.description;
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  @import '../../../styles/Welcome.scss';
+</style>

package/src/mixins/recordMixin.js

@@ -1,6 +1,5 @@
 /**
  * @description 提供语音识别的混入，允许语音输入并处理开始、结束、结果及错误等各种事件。
- *
  * @mixin recordMixin
  */
 

package/src/mixins/sendMixin.js

@@ -44,6 +44,9 @@ export class XRequest {
       signal,
     };
 
+    // 用于存储跨 chunk 的不完整数据
+    let buffer = '';
+
     return fetch(this._baseURL + url, fetchOptions)
       .then(res => res.body)
       .then(async body => {
@@ -60,6 +63,10 @@ export class XRequest {
           done = streamDone;
 
           if (streamDone) {
+            // 处理缓冲区中剩余的数据
+            if (buffer.trim()) {
+              this.processBufferData(buffer);
+            }
             this._onFinish && this._onFinish(this._messages);
             return;
           }
@@ -68,17 +75,23 @@ export class XRequest {
             const chunk = decoder.decode(value, {
               stream: true,
             });
-            const chunkUse = chunk.startsWith('data: ') ? chunk.slice(6) : chunk;
-
-            try {
-              const res = this._transformer ? this._transformer(chunkUse) : chunkUse;
-              this._messages.push(res);
-              this._onMessage && this._onMessage(res);
-            } catch (error) {
-              this._onError && this._onError(error);
-              this._controller && this._controller.abort();
-              return Promise.reject(error);
-            }
+            // console.log('chunk:', chunk);
+            // 将新数据添加到缓冲区
+            buffer += chunk;
+
+            // 处理缓冲区中的完整行
+            buffer = this.processBuffer(buffer);
+            // const chunkUse = chunk.startsWith('data: ') ? chunk.slice(6) : chunk;
+
+            // try {
+            //   const res = this._transformer ? this._transformer(chunkUse) : chunkUse;
+            //   this._messages.push(res);
+            //   this._onMessage && this._onMessage(res);
+            // } catch (error) {
+            //   this._onError && this._onError(error);
+            //   this._controller && this._controller.abort();
+            //   return Promise.reject(error);
+            // }
           }
         }
       })
@@ -91,6 +104,86 @@ export class XRequest {
         this._controller && this._controller.abort();
       });
   }
+  /**
+   * 处理缓冲区数据，提取完整的行
+   * @param {string} buffer - 缓冲区数据
+   * @returns {string} 剩余的不完整数据
+   */
+  processBuffer(buffer) {
+    const lines = buffer.split('\n');
+    // console.log('lines:', lines);
+    // 保留最后一行（可能不完整）
+    const remainingData = lines.pop();
+
+    // 处理完整的行
+    for (const line of lines) {
+      this.processLine(line);
+    }
+
+    return remainingData || '';
+  }
+
+  /**
+   * 处理单行数据
+   * @param {string} line - 单行数据
+   */
+  processLine(line) {
+    // 跳过空行
+    if (!line.trim()) {
+      return;
+    }
+
+    // 处理 data: 开头的行
+    if (line.startsWith('data: ')) {
+      const dataContent = line.slice(6);
+
+      // 检查是否是结束标识
+      if (dataContent.trim() === '[DONE]') {
+        this._isFinished = true;
+        this._onFinish && this._onFinish(this._messages);
+        this.abort();
+        return;
+      }
+
+      // 跳过空数据
+      if (!dataContent.trim()) {
+        return;
+      }
+
+      try {
+        // 尝试解析和处理数据
+        let processedData;
+        try {
+          // 首先尝试作为 JSON 解析
+          processedData = JSON.parse(dataContent);
+        } catch {
+          // 如果不是 JSON，使用原始数据
+          processedData = dataContent;
+        }
+        // console.log('processedData:', processedData, processedData.answer);
+
+        const res = this._transformer ? this._transformer(processedData) : processedData;
+        this._messages.push(res);
+        this._onMessage && this._onMessage(res);
+      } catch (error) {
+        console.error('Error processing line:', line, error);
+        this._onError && this._onError(error);
+        this._controller && this._controller.abort();
+      }
+    }
+    // 可以在这里处理其他类型的行（如果需要）
+  }
+
+  /**
+   * 处理缓冲区中剩余的数据（在流结束时调用）
+   * @param {string} buffer - 剩余的缓冲区数据
+   */
+  processBufferData(buffer) {
+    const lines = buffer.split('\n');
+    for (const line of lines) {
+      this.processLine(line);
+    }
+  }
 
   _sendWithSSE(url, options = {}) {
     const es = new EventSource(this._baseURL + url, {

package/src/mixins/streamMixin.js

@@ -1,8 +1,6 @@
 /**
- * @fileoverview Vue2 流式数据处理 Mixin
- * 从 Vue3 useXStream hooks 转换而来，支持 SSE 数据解析和中断功能
- * @author Element UI X Team
- * @version 1.0.0
+ * @fileoverview  流式数据处理 Mixin
+ * 支持 SSE 数据解析和中断功能
  */
 
 /**
@@ -189,7 +187,7 @@ function XStream(options, signal) {
 }
 
 /**
- * streamMixin -
+ * streamMixin
  * 用于处理流式数据的 mixin，支持 SSE 数据解析和中断功能
  * @namespace streamMixin
  * @type {Object}