vue-element-ui-x 0.1.9-beta → 0.2.0

package/src/components/Sender/src/components/LoadingButton.vue

@@ -1,39 +1,39 @@
-<template>
-  <div class="el-x-send-button">
-    <el-button
-      circle
-      @click="$emit('cancel')"
-      size="small"
-    >
-      <loading class="loading-svg" />
-    </el-button>
-  </div>
-</template>
-
-<script>
-  import Loading from './Loading.vue';
-
-  export default {
-    name: 'LoadingButton',
-    components: {
-      Loading,
-    },
-  };
-</script>
-
-<style scoped lang="scss">
-  @import '~element-ui/packages/theme-chalk/src/common/var';
-
-  .el-x-send-button {
-    height: 32px;
-    .el-button {
-      padding: 0;
-      width: 32px;
-      height: 32px;
-    }
-    .loading-svg {
-      color: $--color-primary;
-      width: 100%;
-    }
-  }
-</style>
+<template>
+  <div class="el-x-send-button">
+    <el-button
+      circle
+      @click="$emit('cancel')"
+      size="small"
+    >
+      <loading class="loading-svg" />
+    </el-button>
+  </div>
+</template>
+
+<script>
+  import Loading from './Loading.vue';
+
+  export default {
+    name: 'LoadingButton',
+    components: {
+      Loading,
+    },
+  };
+</script>
+
+<style scoped lang="scss">
+  @import '~element-ui/packages/theme-chalk/src/common/var';
+
+  .el-x-send-button {
+    height: 32px;
+    .el-button {
+      padding: 0;
+      width: 32px;
+      height: 32px;
+    }
+    .loading-svg {
+      color: $--color-primary;
+      width: 100%;
+    }
+  }
+</style>

package/src/components/Sender/src/components/SendButton.vue

@@ -1,26 +1,26 @@
-<template>
-  <div class="el-x-send-button">
-    <el-button
-      circle
-      :disabled="disabled"
-      @click="$emit('submit')"
-      size="small"
-    >
-      <i class="el-icon-top"></i>
-    </el-button>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: 'SendButton',
-    props: {
-      disabled: {
-        type: Boolean,
-        default: false,
-      },
-    },
-  };
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+  <div class="el-x-send-button">
+    <el-button
+      circle
+      :disabled="disabled"
+      @click="$emit('submit')"
+      size="small"
+    >
+      <i class="el-icon-top"></i>
+    </el-button>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'SendButton',
+    props: {
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+    },
+  };
+</script>
+
+<style scoped lang="scss"></style>

package/src/components/Sender/src/components/SpeechButton.vue

@@ -1,24 +1,24 @@
-<template>
-  <div class="el-x-send-button">
-    <el-button
-      circle
-      size="small"
-      @click="onClick"
-    >
-      <i class="el-icon-microphone"></i>
-    </el-button>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: 'SpeechButton',
-    methods: {
-      onClick() {
-        this.$emit('click');
-      },
-    },
-  };
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+  <div class="el-x-send-button">
+    <el-button
+      circle
+      size="small"
+      @click="onClick"
+    >
+      <i class="el-icon-microphone"></i>
+    </el-button>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'SpeechButton',
+    methods: {
+      onClick() {
+        this.$emit('click');
+      },
+    },
+  };
+</script>
+
+<style scoped lang="scss"></style>

package/src/components/Sender/src/components/SpeechLoading.vue

@@ -1,87 +1,87 @@
-<template>
-  <svg
-    :class="className"
-    color="currentColor"
-    :viewBox="`0 0 ${SIZE} ${SIZE}`"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-  >
-    <title>Speech Recording</title>
-
-    <rect
-      v-for="(item, index) in rects"
-      :key="index"
-      fill="currentColor"
-      :rx="RECT_RADIUS"
-      :ry="RECT_RADIUS"
-      :height="RECT_HEIGHT_MIN"
-      :width="RECT_WIDTH"
-      :x="item.x"
-      :y="item.yMin"
-    >
-      <animate
-        attributeName="height"
-        :values="`${RECT_HEIGHT_MIN}; ${RECT_HEIGHT_MAX}; ${RECT_HEIGHT_MIN}`"
-        keyTimes="0; 0.5; 1"
-        :dur="`${DURATION}s`"
-        :begin="`${(DURATION / COUNT) * index}s`"
-        repeatCount="indefinite"
-      />
-      <animate
-        attributeName="y"
-        :values="`${item.yMin}; ${item.yMax}; ${item.yMin}`"
-        keyTimes="0; 0.5; 1"
-        :dur="`${DURATION}s`"
-        :begin="`${(DURATION / COUNT) * index}s`"
-        repeatCount="indefinite"
-      />
-    </rect>
-  </svg>
-</template>
-
-<script>
-  export default {
-    name: 'SpeechLoading',
-
-    props: {
-      className: {
-        type: String,
-        default: '',
-      },
-    },
-
-    data() {
-      return {
-        // 定义常量
-        SIZE: 1000,
-        COUNT: 4,
-        RECT_WIDTH: 140,
-        RECT_RADIUS: 70, // RECT_WIDTH / 2
-        RECT_HEIGHT_MIN: 250,
-        RECT_HEIGHT_MAX: 500,
-        DURATION: 0.8,
-      };
-    },
-
-    computed: {
-      // 计算矩形的位置和高度范围
-      rects() {
-        const dest = (this.SIZE - this.RECT_WIDTH * this.COUNT) / (this.COUNT - 1);
-        return Array.from({
-          length: this.COUNT,
-        }).map((_, index) => {
-          const x = index * (dest + this.RECT_WIDTH);
-          const yMin = this.SIZE / 2 - this.RECT_HEIGHT_MIN / 2;
-          const yMax = this.SIZE / 2 - this.RECT_HEIGHT_MAX / 2;
-          return {
-            x,
-            yMin,
-            yMax,
-          };
-        });
-      },
-    },
-  };
-</script>
-
-<style scoped></style>
+<template>
+  <svg
+    :class="className"
+    color="currentColor"
+    :viewBox="`0 0 ${SIZE} ${SIZE}`"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+  >
+    <title>Speech Recording</title>
+
+    <rect
+      v-for="(item, index) in rects"
+      :key="index"
+      fill="currentColor"
+      :rx="RECT_RADIUS"
+      :ry="RECT_RADIUS"
+      :height="RECT_HEIGHT_MIN"
+      :width="RECT_WIDTH"
+      :x="item.x"
+      :y="item.yMin"
+    >
+      <animate
+        attributeName="height"
+        :values="`${RECT_HEIGHT_MIN}; ${RECT_HEIGHT_MAX}; ${RECT_HEIGHT_MIN}`"
+        keyTimes="0; 0.5; 1"
+        :dur="`${DURATION}s`"
+        :begin="`${(DURATION / COUNT) * index}s`"
+        repeatCount="indefinite"
+      />
+      <animate
+        attributeName="y"
+        :values="`${item.yMin}; ${item.yMax}; ${item.yMin}`"
+        keyTimes="0; 0.5; 1"
+        :dur="`${DURATION}s`"
+        :begin="`${(DURATION / COUNT) * index}s`"
+        repeatCount="indefinite"
+      />
+    </rect>
+  </svg>
+</template>
+
+<script>
+  export default {
+    name: 'SpeechLoading',
+
+    props: {
+      className: {
+        type: String,
+        default: '',
+      },
+    },
+
+    data() {
+      return {
+        // 定义常量
+        SIZE: 1000,
+        COUNT: 4,
+        RECT_WIDTH: 140,
+        RECT_RADIUS: 70, // RECT_WIDTH / 2
+        RECT_HEIGHT_MIN: 250,
+        RECT_HEIGHT_MAX: 500,
+        DURATION: 0.8,
+      };
+    },
+
+    computed: {
+      // 计算矩形的位置和高度范围
+      rects() {
+        const dest = (this.SIZE - this.RECT_WIDTH * this.COUNT) / (this.COUNT - 1);
+        return Array.from({
+          length: this.COUNT,
+        }).map((_, index) => {
+          const x = index * (dest + this.RECT_WIDTH);
+          const yMin = this.SIZE / 2 - this.RECT_HEIGHT_MIN / 2;
+          const yMax = this.SIZE / 2 - this.RECT_HEIGHT_MAX / 2;
+          return {
+            x,
+            yMin,
+            yMax,
+          };
+        });
+      },
+    },
+  };
+</script>
+
+<style scoped></style>

package/src/components/Sender/src/components/SpeechLoadingButton.vue

@@ -1,43 +1,43 @@
-<template>
-  <div class="el-x-send-button">
-    <el-button
-      circle
-      size="small"
-      @click="onClick"
-    >
-      <speech-loading class="loading-svg" />
-    </el-button>
-  </div>
-</template>
-
-<script>
-  import SpeechLoading from './SpeechLoading.vue';
-
-  export default {
-    name: 'SpeechLoadingButton',
-    components: {
-      SpeechLoading,
-    },
-    methods: {
-      onClick() {
-        this.$emit('click');
-      },
-    },
-  };
-</script>
-
-<style scoped lang="scss">
-  @import '~element-ui/packages/theme-chalk/src/common/var';
-
-  .el-x-send-button {
-    .el-button {
-      padding: 0;
-      width: 32px;
-      height: 32px;
-    }
-    .loading-svg {
-      color: $--color-primary;
-      width: 16px;
-    }
-  }
-</style>
+<template>
+  <div class="el-x-send-button">
+    <el-button
+      circle
+      size="small"
+      @click="onClick"
+    >
+      <speech-loading class="loading-svg" />
+    </el-button>
+  </div>
+</template>
+
+<script>
+  import SpeechLoading from './SpeechLoading.vue';
+
+  export default {
+    name: 'SpeechLoadingButton',
+    components: {
+      SpeechLoading,
+    },
+    methods: {
+      onClick() {
+        this.$emit('click');
+      },
+    },
+  };
+</script>
+
+<style scoped lang="scss">
+  @import '~element-ui/packages/theme-chalk/src/common/var';
+
+  .el-x-send-button {
+    .el-button {
+      padding: 0;
+      width: 32px;
+      height: 32px;
+    }
+    .loading-svg {
+      color: $--color-primary;
+      width: 16px;
+    }
+  }
+</style>

package/src/components/Thinking/index.js

@@ -1,8 +1,8 @@
-import ElXThinking from './src/main.vue';
-
-/* istanbul ignore next */
-ElXThinking.install = function (Vue) {
-  Vue.component(ElXThinking.name, ElXThinking);
-};
-
-export default ElXThinking;
+import ElXThinking from './src/main.vue';
+
+/* istanbul ignore next */
+ElXThinking.install = function (Vue) {
+  Vue.component(ElXThinking.name, ElXThinking);
+};
+
+export default ElXThinking;

package/src/components/ThoughtChain/index.js

@@ -1,8 +1,8 @@
-import ElXThoughtChain from './src/main.vue';
-
-/* istanbul ignore next */
-ElXThoughtChain.install = function (Vue) {
-  Vue.component(ElXThoughtChain.name, ElXThoughtChain);
-};
-
-export default ElXThoughtChain;
+import ElXThoughtChain from './src/main.vue';
+
+/* istanbul ignore next */
+ElXThoughtChain.install = function (Vue) {
+  Vue.component(ElXThoughtChain.name, ElXThoughtChain);
+};
+
+export default ElXThoughtChain;

package/src/components/Typewriter/index.js

@@ -1,8 +1,8 @@
-import ElXTypewriter from './src/main.vue';
-
-/* istanbul ignore next */
-ElXTypewriter.install = function (Vue) {
-  Vue.component(ElXTypewriter.name, ElXTypewriter);
-};
-
-export default ElXTypewriter;
+import ElXTypewriter from './src/main.vue';
+
+/* istanbul ignore next */
+ElXTypewriter.install = function (Vue) {
+  Vue.component(ElXTypewriter.name, ElXTypewriter);
+};
+
+export default ElXTypewriter;

package/src/components/Typewriter/src/main.vue

@@ -137,8 +137,16 @@
             return;
           }
 
-          // 仅在内容完全不同时重置
-          if (!oldVal || newVal !== oldVal) {
+          // 流式更新优化：如果新内容是旧内容的扩展，则不重置
+          if (oldVal && newVal && newVal.startsWith(oldVal)) {
+            // 增量更新，只更新缓存，不重置打字状态
+            this.contentCache = newVal;
+            // 如果当前没在打字，且有新内容，继续打字
+            if (!this.isTyping && this.typingIndex < newVal.length) {
+              this.startTyping();
+            }
+          } else if (!oldVal || newVal !== oldVal) {
+            // 完全不同的内容才重置
             this.contentCache = newVal || '';
             if (!this.isTyping) {
               this.typingIndex = 0;

package/src/components/Welcome/index.js

@@ -1,8 +1,8 @@
-import ElXWelcome from './src/main.vue';
-
-/* istanbul ignore next */
-ElXWelcome.install = function (Vue) {
-  Vue.component(ElXWelcome.name, ElXWelcome);
-};
-
-export default ElXWelcome;
+import ElXWelcome from './src/main.vue';
+
+/* istanbul ignore next */
+ElXWelcome.install = function (Vue) {
+  Vue.component(ElXWelcome.name, ElXWelcome);
+};
+
+export default ElXWelcome;