vue-element-ui-x 0.1.0

package/lib/mixins.js

@@ -0,0 +1,1016 @@
+module.exports =
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 82);
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ 82:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, "createSendUtils", function() { return /* reexport */ createSendUtils; });
+__webpack_require__.d(__webpack_exports__, "createStreamUtils", function() { return /* reexport */ createStreamUtils; });
+__webpack_require__.d(__webpack_exports__, "DEFAULT_KV_SEPARATOR", function() { return /* reexport */ DEFAULT_KV_SEPARATOR; });
+__webpack_require__.d(__webpack_exports__, "DEFAULT_PART_SEPARATOR", function() { return /* reexport */ DEFAULT_PART_SEPARATOR; });
+__webpack_require__.d(__webpack_exports__, "DEFAULT_STREAM_SEPARATOR", function() { return /* reexport */ DEFAULT_STREAM_SEPARATOR; });
+__webpack_require__.d(__webpack_exports__, "isValidString", function() { return /* reexport */ isValidString; });
+__webpack_require__.d(__webpack_exports__, "recordMixin", function() { return /* reexport */ recordMixin; });
+__webpack_require__.d(__webpack_exports__, "sendMixin", function() { return /* reexport */ sendMixin; });
+__webpack_require__.d(__webpack_exports__, "splitPart", function() { return /* reexport */ splitPart; });
+__webpack_require__.d(__webpack_exports__, "splitStream", function() { return /* reexport */ splitStream; });
+__webpack_require__.d(__webpack_exports__, "streamMixin", function() { return /* reexport */ streamMixin; });
+__webpack_require__.d(__webpack_exports__, "XRequest", function() { return /* reexport */ XRequest; });
+__webpack_require__.d(__webpack_exports__, "XStream", function() { return /* reexport */ XStream; });
+
+// CONCATENATED MODULE: ./src/mixins/recordMixin.js
+/**
+ * @description 提供语音识别的混入，允许语音输入并处理开始、结束、结果及错误等各种事件。
+ *
+ * @mixin recordMixin
+ */
+
+/* harmony default export */ var recordMixin = ({
+  data() {
+    return {
+      // 语音识别状态
+      recordLoading: false,
+      // 识别结果
+      recordValue: '',
+      // 识别实例
+      recordRecognition: null,
+      // 配置选项
+      recordOptions: {
+        onError: null,
+        onStart: null,
+        onEnd: null,
+        onResult: null
+      }
+    };
+  },
+  methods: {
+    /**
+     * 初始化语音识别配置
+     * @param {Object} options - 配置选项
+     * @param {Function} [options.onError] - 错误回调
+     * @param {Function} [options.onStart] - 开始回调
+     * @param {Function} [options.onEnd] - 结束回调
+     * @param {Function} [options.onResult] - 结果回调
+     */
+    initRecord(options = {}) {
+      this.recordOptions = {
+        ...this.recordOptions,
+        ...options
+      };
+    },
+    /**
+     * 开始语音识别
+     */
+    startRecord() {
+      if ('webkitSpeechRecognition' in window) {
+        this.recordRecognition = new window.webkitSpeechRecognition();
+        this.recordRecognition.continuous = true;
+        this.recordRecognition.interimResults = true;
+        this.recordRecognition.lang = 'zh-CN';
+        this.recordRecognition.onstart = () => {
+          this.recordLoading = true;
+          this.recordValue = '';
+          if (this.recordOptions.onStart) {
+            this.recordOptions.onStart();
+          }
+        };
+        this.recordRecognition.onend = () => {
+          this.recordLoading = false;
+          if (this.recordOptions.onEnd) {
+            this.recordOptions.onEnd(this.recordValue);
+          }
+        };
+        this.recordRecognition.onerror = e => {
+          this.recordLoading = false;
+          if (this.recordOptions.onError) {
+            this.recordOptions.onError(e);
+          }
+        };
+        this.recordRecognition.onresult = e => {
+          let results = '';
+          for (let i = 0; i <= e.resultIndex; i++) {
+            results += e.results[i][0].transcript;
+          }
+          this.recordValue = results;
+          if (this.recordOptions.onResult) {
+            this.recordOptions.onResult(results);
+          }
+        };
+        this.recordRecognition.start();
+      } else {
+        const error = {
+          code: -1,
+          message: 'The current browser does not support voice recognition'
+        };
+        if (this.recordOptions.onError) {
+          this.recordOptions.onError(error);
+        }
+      }
+    },
+    /**
+     * 停止语音识别
+     */
+    stopRecord() {
+      if (this.recordRecognition) {
+        this.recordRecognition.stop();
+      }
+    },
+    /**
+     * 清理语音识别资源
+     */
+    cleanupRecord() {
+      this.stopRecord();
+      this.recordRecognition = null;
+    }
+  },
+  beforeDestroy() {
+    this.cleanupRecord();
+  }
+});
+// CONCATENATED MODULE: ./src/mixins/sendMixin.js
+/**
+ * XRequest 类 - 用于处理 SSE 和 Fetch 请求
+ */
+class XRequest {
+  constructor(options = {}) {
+    const {
+      baseURL,
+      onAbort,
+      onMessage,
+      onError,
+      baseOptions,
+      transformer,
+      type,
+      onFinish,
+      onOpen
+    } = options;
+    this._instance = null;
+    this._transformer = transformer;
+    this._baseURL = baseURL || '';
+    this._baseOptions = baseOptions || {};
+    this._onAbort = onAbort;
+    this._onMessage = onMessage;
+    this._onError = onError;
+    this._onOpen = onOpen;
+    this._type = type || 'sse';
+    this._controller = null;
+    this._onFinish = onFinish;
+    this._messages = [];
+    // 添加结束标志和超时控制
+    this._isFinished = false;
+    this._finishTimeout = null;
+
+    // 绑定方法上下文
+    this.abort = this.abort.bind(this);
+    this.send = this.send.bind(this);
+  }
+  _sendWithFetch(url, options = {}) {
+    this._controller = new AbortController();
+    const signal = this._controller.signal;
+    const fetchOptions = {
+      ...options,
+      signal
+    };
+    return fetch(this._baseURL + url, fetchOptions).then(res => res.body).then(async body => {
+      if (!body) {
+        return Promise.reject(new Error('Response body is null in stream mode'));
+      }
+      const reader = body.getReader();
+      const decoder = new TextDecoder('utf-8');
+      let done = false;
+      while (!done) {
+        const {
+          value,
+          done: streamDone
+        } = await reader.read();
+        done = streamDone;
+        if (streamDone) {
+          this._onFinish && this._onFinish(this._messages);
+          return;
+        }
+        if (value) {
+          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);
+          }
+        }
+      }
+    }).catch(err => {
+      if (err.name === 'AbortError') {
+        this._onAbort && this._onAbort(this._messages);
+        return;
+      }
+      this._onError && this._onError(err);
+      this._controller && this._controller.abort();
+    });
+  }
+  _sendWithSSE(url, options = {}) {
+    const es = new EventSource(this._baseURL + url, {
+      ...this._baseOptions,
+      ...options
+    });
+    es.onmessage = e => {
+      // 检查是否是结束消息
+      if (e.data === '[DONE]' || e.data === 'data: [DONE]') {
+        this._isFinished = true;
+        this._onFinish && this._onFinish(this._messages);
+        this.abort();
+        return;
+      }
+      const res = this._transformer ? this._transformer(e.data) : e;
+      this._messages.push(res);
+      this._onMessage && this._onMessage(res);
+
+      // 重置超时定时器
+      if (this._finishTimeout) {
+        clearTimeout(this._finishTimeout);
+      }
+
+      // 设置超时检测：如果 10 秒内没有新消息，认为连接可能已结束
+      this._finishTimeout = setTimeout(() => {
+        if (!this._isFinished && es.readyState !== EventSource.CONNECTING) {
+          this._isFinished = true;
+          this._onFinish && this._onFinish(this._messages);
+          this.abort();
+        }
+      }, 10000);
+    };
+    es.onopen = () => {
+      this._onOpen && this._onOpen();
+    };
+    es.onerror = ev => {
+      // 清除超时定时器
+      if (this._finishTimeout) {
+        clearTimeout(this._finishTimeout);
+        this._finishTimeout = null;
+      }
+
+      // 如果已经标记为结束，直接返回
+      if (this._isFinished) {
+        return;
+      }
+
+      // 更可靠的结束检测逻辑
+      if (es.readyState === EventSource.CLOSED || this._messages.length > 0 && es.readyState !== EventSource.CONNECTING) {
+        // 有消息且连接状态不是正在连接，很可能是正常结束
+        this._isFinished = true;
+        this._onFinish && this._onFinish(this._messages);
+      } else {
+        // 真正的错误情况
+        this._onError && this._onError(es, ev);
+      }
+      this.abort();
+    };
+    this._instance = es;
+    return es;
+  }
+  send(url, options = {}) {
+    switch (this._type) {
+      case 'fetch':
+        this._sendWithFetch(url, options);
+        break;
+      default:
+        this._sendWithSSE(url, options);
+    }
+    return this;
+  }
+  abort() {
+    // 清除超时定时器
+    if (this._finishTimeout) {
+      clearTimeout(this._finishTimeout);
+      this._finishTimeout = null;
+    }
+    if (this._instance && this._instance.close) {
+      this._instance.close();
+    }
+    this._instance = null;
+    if (this._controller) {
+      this._controller.abort();
+    }
+    this._controller = null;
+
+    // 只有在未正常结束时才调用 onAbort
+    if (!this._isFinished) {
+      this._onAbort && this._onAbort(this._messages);
+    }
+    this._messages = [];
+    this._isFinished = false;
+  }
+}
+
+/**
+ * sendMixin - Vue2 版本
+ * 用于处理发送操作管理请求状态的 mixin，支持可选的中止功能，同时支持 Promise 和 SSE（服务端事件）
+ */
+const sendMixin = {
+  data() {
+    return {
+      loading: false,
+      _sendPromise: null,
+      _sendController: null
+    };
+  },
+  methods: {
+    /**
+     * 初始化发送配置
+     * @param {Object} options - 配置选项
+     * @param {Function} options.onAbort - 中止回调
+     * @param {Function} options.sendHandler - 发送处理器
+     * @param {Function} options.abortHandler - 中止处理器
+     * @param {Function} options.finishHandler - 完成处理器
+     */
+    initSend(options = {}) {
+      this._sendOptions = {
+        onAbort: options.onAbort,
+        sendHandler: options.sendHandler,
+        abortHandler: options.abortHandler,
+        finishHandler: options.finishHandler
+      };
+    },
+    /**
+     * 发送操作
+     * @param {...any} args - 传递给 sendHandler 的参数
+     */
+    handleSend(...args) {
+      if (this.loading) {
+        return;
+      }
+      if (this._sendOptions && this._sendOptions.sendHandler) {
+        this._sendOptions.sendHandler(...args);
+      }
+      this.loading = true;
+    },
+    /**
+     * 中止操作
+     */
+    handleAbort() {
+      this.loading = false;
+      if (this._sendOptions && this._sendOptions.abortHandler) {
+        this._sendOptions.abortHandler();
+      }
+      if (this._sendOptions && this._sendOptions.onAbort) {
+        this._sendOptions.onAbort();
+      }
+    },
+    /**
+     * 完成操作
+     */
+    handleFinish() {
+      this.loading = false;
+      if (this._sendOptions && this._sendOptions.finishHandler) {
+        this._sendOptions.finishHandler();
+      }
+    },
+    /**
+     * 创建 XRequest 实例的便捷方法
+     * @param {Object} options - XRequest 配置选项
+     * @returns {XRequest} XRequest 实例
+     */
+    createXRequest(options = {}) {
+      return new XRequest({
+        ...options,
+        onAbort: (...args) => {
+          this.handleAbort();
+          if (options.onAbort) {
+            options.onAbort(...args);
+          }
+        },
+        onFinish: (...args) => {
+          this.handleFinish();
+          if (options.onFinish) {
+            options.onFinish(...args);
+          }
+        }
+      });
+    }
+  },
+  beforeDestroy() {
+    // 组件销毁时清理资源
+    if (this._sendController) {
+      this._sendController.abort();
+    }
+  }
+};
+
+/**
+ * 工具函数版本 - 用于非组件场景
+ * @param {Object} options - 配置选项
+ * @returns {Object} 包含发送相关方法的对象
+ */
+function createSendUtils(options = {}) {
+  const state = {
+    loading: false
+  };
+  const handleSend = (...args) => {
+    if (state.loading) {
+      return;
+    }
+    if (options.sendHandler) {
+      options.sendHandler(...args);
+    }
+    state.loading = true;
+  };
+  const handleAbort = () => {
+    state.loading = false;
+    if (options.abortHandler) {
+      options.abortHandler();
+    }
+    if (options.onAbort) {
+      options.onAbort();
+    }
+  };
+  const handleFinish = () => {
+    state.loading = false;
+    if (options.finishHandler) {
+      options.finishHandler();
+    }
+  };
+  return {
+    state,
+    send: handleSend,
+    abort: handleAbort,
+    finish: handleFinish
+  };
+}
+/* harmony default export */ var mixins_sendMixin = (sendMixin);
+// CONCATENATED MODULE: ./src/mixins/streamMixin.js
+/**
+ * @fileoverview Vue2 流式数据处理 Mixin
+ * 从 Vue3 useXStream hooks 转换而来，支持 SSE 数据解析和中断功能
+ * @author Element UI X Team
+ * @version 1.0.0
+ */
+
+/**
+ * 默认流分隔符
+ * @type {string}
+ * @constant
+ */
+const DEFAULT_STREAM_SEPARATOR = '\n\n';
+
+/**
+ * 默认部分分隔符
+ * @type {string}
+ * @constant
+ */
+const DEFAULT_PART_SEPARATOR = '\n';
+
+/**
+ * 默认键值分隔符
+ * @type {string}
+ * @constant
+ */
+const DEFAULT_KV_SEPARATOR = ':';
+
+/**
+ * SSE 字段类型定义
+ * @typedef {'data'|'event'|'id'|'retry'} SSEFields
+ */
+
+/**
+ * SSE 输出对象类型
+ * @typedef {Object} SSEOutput
+ * @property {string} [data] - 数据字段
+ * @property {string} [event] - 事件字段
+ * @property {string} [id] - ID字段
+ * @property {string} [retry] - 重试字段
+ */
+
+/**
+ * 流配置选项
+ * @typedef {Object} XStreamOptions
+ * @property {ReadableStream<Uint8Array>} readableStream - 可读流
+ * @property {TransformStream<string, *>} [transformStream] - 可选的转换流
+ */
+
+/**
+ * 流状态对象
+ * @typedef {Object} StreamState
+ * @property {Array<*>} data - 流数据数组
+ * @property {Error|null} error - 错误信息
+ * @property {boolean} loading - 加载状态
+ */
+
+/**
+ * 流回调函数配置
+ * @typedef {Object} StreamCallbacks
+ * @property {function(*): void} [onData] - 数据回调函数
+ * @property {function(Array<*>): void} [onComplete] - 完成回调函数
+ * @property {function(Error): void} [onError] - 错误回调函数
+ * @property {function(): void} [onCancel] - 取消回调函数
+ * @property {function(): void} [onFinish] - 结束回调函数
+ */
+
+/**
+ * 流工具函数返回对象
+ * @typedef {Object} StreamUtils
+ * @property {StreamState} state - 流状态
+ * @property {function(XStreamOptions): Promise<void>} startStream - 启动流处理
+ * @property {function(): void} cancel - 取消流处理
+ * @property {function(): void} reset - 重置流状态
+ */
+
+/**
+ * 验证字符串是否有效（非空且非空白）
+ * @param {string} str - 待验证的字符串
+ * @returns {boolean} 是否为有效字符串
+ */
+const isValidString = str => (str === null || str === undefined ? '' : str).trim() !== '';
+
+/**
+ * 创建流分割转换器
+ * 按照默认分隔符分割流数据
+ * @returns {TransformStream<string, string>} 流分割转换器
+ */
+function splitStream() {
+  let buffer = '';
+  return new TransformStream({
+    /**
+     * 转换函数
+     * @param {string} chunk - 数据块
+     * @param {TransformStreamDefaultController<string>} controller - 控制器
+     */
+    transform(chunk, controller) {
+      buffer += chunk;
+      const parts = buffer.split(DEFAULT_STREAM_SEPARATOR);
+      parts.slice(0, -1).forEach(part => {
+        if (isValidString(part)) controller.enqueue(part);
+      });
+      buffer = parts[parts.length - 1];
+    },
+    /**
+     * 刷新函数
+     * @param {TransformStreamDefaultController<string>} controller - 控制器
+     */
+    flush(controller) {
+      if (isValidString(buffer)) controller.enqueue(buffer);
+    }
+  });
+}
+
+/**
+ * 创建 SSE 数据解析转换器
+ * 将文本数据解析为 SSE 格式对象
+ * @returns {TransformStream<string, SSEOutput>} SSE 解析转换器
+ */
+function splitPart() {
+  return new TransformStream({
+    /**
+     * 转换函数
+     * @param {string} partChunk - 数据块
+     * @param {TransformStreamDefaultController<SSEOutput>} controller - 控制器
+     */
+    transform(partChunk, controller) {
+      const lines = partChunk.split(DEFAULT_PART_SEPARATOR);
+      const sseEvent = lines.reduce((acc, line) => {
+        const sepIndex = line.indexOf(DEFAULT_KV_SEPARATOR);
+        if (sepIndex === -1) return acc;
+        const key = line.slice(0, sepIndex);
+        if (!isValidString(key)) return acc;
+        const value = line.slice(sepIndex + 1);
+        return {
+          ...acc,
+          [key]: value
+        };
+      }, {});
+      if (Object.keys(sseEvent).length > 0) controller.enqueue(sseEvent);
+    }
+  });
+}
+
+/**
+ * 核心流处理函数（支持中断）
+ * @param {XStreamOptions} options - 配置选项
+ * @param {ReadableStream<Uint8Array>} options.readableStream - 可读流
+ * @param {TransformStream<string, *>} [options.transformStream] - 可选的转换流
+ * @param {AbortSignal} [signal] - 中断信号
+ * @returns {ReadableStream<*>} 处理后的流，支持异步迭代
+ * @throws {TypeError} 当 readableStream 不是 ReadableStream 实例时抛出
+ */
+function XStream(options, signal) {
+  const {
+    readableStream,
+    transformStream
+  } = options;
+  if (!(readableStream instanceof ReadableStream)) {
+    throw new TypeError('options.readableStream 必须是 ReadableStream 的实例。');
+  }
+  const decoderStream = new TextDecoderStream();
+  const processedStream = transformStream ? readableStream.pipeThrough(decoderStream).pipeThrough(transformStream) : readableStream.pipeThrough(decoderStream).pipeThrough(splitStream()).pipeThrough(splitPart());
+
+  // 为流添加异步迭代器并处理中断信号
+  processedStream[Symbol.asyncIterator] = async function* () {
+    const reader = this.getReader();
+    this.reader = reader; // 保存读取器引用
+    try {
+      while (true) {
+        if (signal && signal.aborted) {
+          await reader.cancel(); // 主动取消 reader
+          break;
+        }
+        const {
+          done,
+          value
+        } = await reader.read();
+        if (done) break;
+        if (value) yield value;
+      }
+    } finally {
+      reader.releaseLock(); // 释放锁
+    }
+  };
+  return processedStream;
+}
+
+/**
+ * streamMixin - Vue2 版本
+ * 用于处理流式数据的 mixin，支持 SSE 数据解析和中断功能
+ * @namespace streamMixin
+ * @type {Object}
+ */
+const streamMixin = {
+  /**
+   * 组件数据
+   * @returns {Object} 响应式数据对象
+   * @property {Array<*>} streamData - 流数据数组
+   * @property {Error|null} streamError - 流错误信息
+   * @property {boolean} streamLoading - 流处理状态
+   * @property {AbortController|null} _abortController - 私有：中断控制器
+   * @property {ReadableStream|null} _currentStream - 私有：当前流引用
+   */
+  data() {
+    return {
+      streamData: [],
+      streamError: null,
+      streamLoading: false,
+      _abortController: null,
+      _currentStream: null
+    };
+  },
+  methods: {
+    /**
+     * 启动流式请求
+     * @async
+     * @param {XStreamOptions} options - 流配置选项
+     * @param {ReadableStream<Uint8Array>} options.readableStream - 可读流
+     * @param {TransformStream<string, *>} [options.transformStream] - 可选的转换流
+     * @returns {Promise<void>} 流处理完成的 Promise
+     * @fires streamMixin#stream-data - 收到新数据时触发
+     * @fires streamMixin#stream-complete - 流完成时触发
+     * @fires streamMixin#stream-error - 流错误时触发
+     * @fires streamMixin#stream-finish - 流处理结束时触发
+     * @example
+     * // 基础使用
+     * const response = await fetch('/api/stream')
+     * await this.startStream({ readableStream: response.body })
+     *
+     * // 使用自定义转换流
+     * const customTransform = new TransformStream({ ... })
+     * await this.startStream({
+     *   readableStream: response.body,
+     *   transformStream: customTransform
+     * })
+     */
+    async startStream(options) {
+      this.streamLoading = true;
+      this.streamError = null;
+      this.streamData = [];
+      this._abortController = new AbortController();
+      this._currentStream = XStream(options, this._abortController.signal);
+      try {
+        for await (const item of this._currentStream) {
+          this.streamData.push(item);
+          // 触发数据更新事件
+          /**
+           * 流数据事件
+           * @event streamMixin#stream-data
+           * @type {*} 流数据项
+           */
+          this.$emit('stream-data', item);
+        }
+        // 流完成事件
+        /**
+         * 流完成事件
+         * @event streamMixin#stream-complete
+         * @type {Array<*>} 所有流数据
+         */
+        this.$emit('stream-complete', this.streamData);
+      } catch (err) {
+        if (err instanceof Error) {
+          this.streamError = err;
+          /**
+           * 流错误事件
+           * @event streamMixin#stream-error
+           * @type {Error} 错误对象
+           */
+          this.$emit('stream-error', err);
+        }
+      } finally {
+        this.streamLoading = false;
+        this._currentStream = null; // 释放流引用
+        this._abortController = null; // 释放控制器
+        /**
+         * 流处理结束事件
+         * @event streamMixin#stream-finish
+         */
+        this.$emit('stream-finish');
+      }
+    },
+    /**
+     * 中断流式请求（强制关闭流）
+     * @returns {void}
+     * @fires streamMixin#stream-cancel - 流被中断时触发
+     * @example
+     * this.cancelStream()
+     */
+    cancelStream() {
+      if (this._abortController) {
+        this._abortController.abort();
+        /**
+         * 流取消事件
+         * @event streamMixin#stream-cancel
+         */
+        this.$emit('stream-cancel');
+      }
+    },
+    /**
+     * 重置流状态
+     * 清空所有数据和状态，但不触发事件
+     * @returns {void}
+     * @example
+     * this.resetStream()
+     */
+    resetStream() {
+      this.streamData = [];
+      this.streamError = null;
+      this.streamLoading = false;
+      this._abortController = null;
+      this._currentStream = null;
+    },
+    /**
+     * 创建流处理器的便捷方法
+     * @param {ReadableStream<Uint8Array>} readableStream - 可读流
+     * @param {TransformStream<string, *>} [transformStream] - 可选的转换流
+     * @returns {XStreamOptions} 流处理器配置对象
+     * @example
+     * const processor = this.createStreamProcessor(response.body)
+     * await this.startStream(processor)
+     */
+    createStreamProcessor(readableStream, transformStream) {
+      return {
+        readableStream,
+        transformStream
+      };
+    }
+  },
+  /**
+   * 组件销毁前的生命周期钩子
+   * 自动清理流资源
+   * @returns {void}
+   */
+  beforeDestroy() {
+    // 组件销毁时清理资源
+    this.cancelStream();
+  }
+};
+
+/**
+ * 工具函数版本 - 用于非组件场景
+ * @param {StreamCallbacks} [callbacks={}] - 回调函数配置
+ * @param {function(*): void} [callbacks.onData] - 数据回调函数
+ * @param {function(Array<*>): void} [callbacks.onComplete] - 完成回调函数
+ * @param {function(Error): void} [callbacks.onError] - 错误回调函数
+ * @param {function(): void} [callbacks.onCancel] - 取消回调函数
+ * @param {function(): void} [callbacks.onFinish] - 结束回调函数
+ * @returns {StreamUtils} 包含流处理相关方法的对象
+ * @example
+ * // 基础使用
+ * const streamUtils = createStreamUtils({
+ *   onData: (item) => console.log('数据:', item),
+ *   onComplete: (allData) => console.log('完成:', allData),
+ *   onError: (error) => console.error('错误:', error)
+ * })
+ *
+ * const response = await fetch('/api/stream')
+ * await streamUtils.startStream({ readableStream: response.body })
+ */
+function createStreamUtils(callbacks = {}) {
+  /**
+   * 流状态对象
+   * @type {StreamState}
+   */
+  const state = {
+    data: [],
+    error: null,
+    loading: false
+  };
+  let abortController = null;
+  let currentStream = null;
+
+  /**
+   * 启动流处理
+   * @async
+   * @param {XStreamOptions} options - 流配置选项
+   * @returns {Promise<void>} 流处理完成的 Promise
+   */
+  const startStream = async options => {
+    state.loading = true;
+    state.error = null;
+    state.data = [];
+    abortController = new AbortController();
+    currentStream = XStream(options, abortController.signal);
+    try {
+      for await (const item of currentStream) {
+        state.data.push(item);
+        if (callbacks.onData) {
+          callbacks.onData(item);
+        }
+      }
+      if (callbacks.onComplete) {
+        callbacks.onComplete(state.data);
+      }
+    } catch (err) {
+      if (err instanceof Error) {
+        state.error = err;
+        if (callbacks.onError) {
+          callbacks.onError(err);
+        }
+      }
+    } finally {
+      state.loading = false;
+      currentStream = null;
+      abortController = null;
+      if (callbacks.onFinish) {
+        callbacks.onFinish();
+      }
+    }
+  };
+
+  /**
+   * 取消流处理
+   * @returns {void}
+   */
+  const cancel = () => {
+    if (abortController) {
+      abortController.abort();
+      if (callbacks.onCancel) {
+        callbacks.onCancel();
+      }
+    }
+  };
+
+  /**
+   * 重置流状态
+   * @returns {void}
+   */
+  const reset = () => {
+    state.data = [];
+    state.error = null;
+    state.loading = false;
+    abortController = null;
+    currentStream = null;
+  };
+  return {
+    state,
+    startStream,
+    cancel,
+    reset
+  };
+}
+
+// 导出常量和工具函数
+
+
+/**
+ * 默认导出 streamMixin
+ * @type {Object}
+ */
+/* harmony default export */ var mixins_streamMixin = (streamMixin);
+// CONCATENATED MODULE: ./src/mixins/index.js
+/**
+ * Mixins 入口文件
+ */
+
+
+
+
+
+/* harmony default export */ var mixins = __webpack_exports__["default"] = ({
+  recordMixin: recordMixin,
+  sendMixin: sendMixin,
+  XRequest: XRequest,
+  createSendUtils: createSendUtils,
+  streamMixin: streamMixin,
+  createStreamUtils: createStreamUtils,
+  XStream: XStream,
+  splitStream: splitStream,
+  splitPart: splitPart,
+  isValidString: isValidString,
+  DEFAULT_STREAM_SEPARATOR: DEFAULT_STREAM_SEPARATOR,
+  DEFAULT_PART_SEPARATOR: DEFAULT_PART_SEPARATOR,
+  DEFAULT_KV_SEPARATOR: DEFAULT_KV_SEPARATOR
+});
+
+/***/ })
+
+/******/ });