vue-element-ui-x 0.2.2 → 1.0.2

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

@@ -1,43 +1,41 @@
-<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 '../../../../theme/var.scss';
+
+  .el-x-send-button {
+    .el-button {
+      padding: 0;
+      width: 32px;
+      height: 32px;
+    }
+    .loading-svg {
+      color: $--color-primary;
+      width: 16px;
+    }
+  }
+</style>

package/src/components/Sender/src/main.vue

@@ -2,6 +2,7 @@
   <div
     class="el-x-sender-wrap"
     :style="{
+      display: 'block',
       cursor: disabled ? 'not-allowed' : 'default',
       '--el-x-sender-trigger-popover-width': triggerPopoverWidth,
       '--el-x-sender-trigger-popover-left': triggerPopoverLeft,
@@ -56,7 +57,7 @@
           :autosize="computedAutoSize"
           type="textarea"
           :validate-event="false"
-          :placeholder="placeholder"
+          :placeholder="computedPlaceholder"
           :readonly="readOnly || disabled"
           :disabled="disabled"
           @keydown.native="handleKeyDown"
@@ -163,6 +164,7 @@
         v-model="popoverVisible"
         :disabled="disabled"
         :visible-arrow="false"
+        :appendToBody="false"
         :placement="triggerPopoverPlacement"
         :offset="triggerPopoverOffset"
         popper-class="el-x-sender-trigger-popover"
@@ -185,6 +187,7 @@
 </template>
 
 <script>
+  import Locale from '../../../locale/mixin';
   import ClearButton from './components/ClearButton.vue';
   import LoadingButton from './components/LoadingButton.vue';
   import SendButton from './components/SendButton.vue';
@@ -193,6 +196,7 @@
 
   export default {
     name: 'ElXSender',
+    mixins: [Locale],
 
     components: {
       ClearButton,
@@ -209,7 +213,7 @@
       },
       placeholder: {
         type: String,
-        default: '请输入内容',
+        default: '',
       },
       autoSize: {
         type: Object,
@@ -344,6 +348,11 @@
           maxRows: 6,
         };
       },
+
+      // 计算 placeholder
+      computedPlaceholder() {
+        return this.placeholder || this.elXt('el_x.sender.placeholder');
+      },
     },
 
     watch: {
@@ -479,8 +488,9 @@
 
         // 设置默认基础样式
         const defaultStyles = {
+          width: this.inputWidth || '100%',
+          height: '24px',
           maxHeight: '176px',
-          maxWidth: this.inputWidth || '100%',
           boxSizing: 'border-box',
         };
 

package/src/components/Thinking/src/main.vue

@@ -46,12 +46,12 @@
         >
           {{
             localStatus === 'thinking'
-              ? '思考中...'
+              ? elXt('el_x.thinking.processing')
               : localStatus === 'error'
-              ? '思考遇到问题'
+              ? elXt('el_x.thinking.error')
               : localStatus === 'end'
-              ? '思考完成'
-              : '开始思考'
+              ? elXt('el_x.thinking.completed')
+              : elXt('el_x.thinking.start')
           }}
         </slot>
       </span>
@@ -69,10 +69,9 @@
       </transition>
     </button>
 
-    <Transition name="slide">
+    <transition name="slide">
       <div
-        v-show="isExpanded"
-        v-if="displayedContent"
+        v-if="isExpanded && displayedContent"
         class="content-wrapper"
         :class="{ 'error-state': localStatus === 'error' }"
       >
@@ -94,13 +93,16 @@
           </slot>
         </div>
       </div>
-    </Transition>
+    </transition>
   </div>
 </template>
 
 <script>
+  import Locale from '../../../locale/mixin';
+
   export default {
     name: 'ElXThinking',
+    mixins: [Locale],
     props: {
       content: {
         type: String,
@@ -154,7 +156,9 @@
     },
     computed: {
       displayedContent() {
-        return this.localStatus === 'error' ? '思考过程中出现错误' : this.content;
+        return this.localStatus === 'error'
+          ? this.elXt('el_x.thinking.errorContent')
+          : this.content;
       },
     },
     watch: {

package/src/components/ThoughtChain/src/main.vue

@@ -102,9 +102,7 @@
   import ElXTypewriter from '../../Typewriter/index.js';
   export default {
     name: 'ElXThoughtChain',
-    components: {
-      ElXTypewriter,
-    },
+    components: { ElXTypewriter },
     props: {
       thinkingItems: {
         type: Array,

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

@@ -76,11 +76,11 @@
               const grammar = Prism.languages[lang];
               if (grammar) {
                 const highlighted = Prism.highlight(code, grammar, lang);
-                return `<pre class="language-${lang}"><code class="language-${lang}">${highlighted}</code></pre>`;
+                return highlighted;
               }
-              return `<pre class="language-${lang}"><code class="language-${lang}">${code}</code></pre>`;
+              return code;
             } catch {
-              return `<pre><code>${code}</code></pre>`;
+              return code;
             }
           },
         }),
@@ -158,7 +158,6 @@
     },
     mounted() {
       this.initMarkdownPlugins();
-      this.updateFogColor();
       this.$nextTick(() => {
         Prism.highlightAll();
       });
@@ -240,9 +239,6 @@
           progress: this.typingProgress,
         };
       },
-      updateFogColor() {
-        // 实现雾化颜色更新逻辑
-      },
     },
   };
 </script>

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/index.js

@@ -20,6 +20,9 @@ import {
   XRequest,
   XStream,
 } from './mixins';
+// 导入国际化功能
+import locale from './locale';
+import lang from './locale/lang';
 
 const components = [
   ElXTypewriter,
@@ -35,7 +38,15 @@ const components = [
   ElXWelcome,
 ];
 
-const install = function (Vue) {
+const install = function (Vue, opts = {}) {
+  // 处理国际化配置
+  if (opts.locale) {
+    locale.use(opts.locale);
+  }
+  if (opts.i18n) {
+    locale.i18n(opts.i18n);
+  }
+
   components.forEach(component => {
     Vue.component(component.name, component);
   });
@@ -43,6 +54,10 @@ const install = function (Vue) {
 
 // 具名导出（按需引入）- 组件和Mixins
 export {
+  // Mixins
+  createSendUtils,
+  createStreamUtils,
+  customMixins,
   // 组件
   ElXAttachments,
   ElXBubble,
@@ -55,20 +70,22 @@ export {
   ElXThoughtChain,
   ElXTypewriter,
   ElXWelcome,
-  // Mixins
-  createSendUtils,
-  createStreamUtils,
-  customMixins,
+  lang,
+  // 国际化
+  locale,
   recordMixin,
   sendMixin,
   streamMixin,
   XRequest,
   XStream,
 };
+
 // 默认导出（完整引入）
 const ElementUIX = {
-  version: '1.0.0',
+  version: '0.2.2',
   install,
+  locale,
+  lang,
 };
 
 // 将组件添加到默认导出对象中