vue-element-ui-x 0.2.1 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-element-ui-x",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "基于Vue 2 + Element UI的AI聊天组件库",
   "main": "lib/index.esm.js",
   "module": "lib/index.umd.js",

package/src/components/Conversations/src/main.vue

@@ -193,9 +193,7 @@
   export default {
     name: 'ElXConversations',
 
-    components: {
-      ConversationsItem,
-    },
+    components: { ConversationsItem },
 
     props: {
       items: {
@@ -549,6 +547,14 @@
       loadMoreData() {
         if (!this.loadMore) return;
         this.loadMore();
+        // 确保loading元素可见
+        this.$nextTick(() => {
+          const scrollContainer = this.$refs.scrollContainer;
+          if (scrollContainer) {
+            // 滚动到底部，确保loading元素可见
+            scrollContainer.scrollTop = scrollContainer.scrollHeight;
+          }
+        });
       },
 
       scrollToTop() {

package/src/index.js

@@ -41,8 +41,9 @@ const install = function (Vue) {
   });
 };
 
-// 具名导出（按需引入）- 组件
+// 具名导出（按需引入）- 组件和Mixins
 export {
+  // 组件
   ElXAttachments,
   ElXBubble,
   ElXBubbleList,
@@ -54,10 +55,7 @@ export {
   ElXThoughtChain,
   ElXTypewriter,
   ElXWelcome,
-};
-
-// 具名导出（按需引入）- Mixins
-export {
+  // Mixins
   createSendUtils,
   createStreamUtils,
   customMixins,

package/src/styles/Bubble.scss

@@ -1,157 +1,157 @@
-@import '../theme/var.scss';
-
-.el-x-bubble {
-  display: flex;
-  gap: var(--el-x-bubble-avatar-placeholder-gap);
-}
-
-.el-x-bubble-avatar-size {
-  ::v-deep .el-avatar {
-    width: var(--el-x-bubble-avatar-placeholder-width);
-    height: var(--el-x-bubble-avatar-placeholder-height);
-  }
-}
-
-.el-x-bubble-avatar-placeholder {
-  width: var(--el-x-bubble-avatar-placeholder-width);
-  height: var(--el-x-bubble-avatar-placeholder-height);
-}
-
-.el-x-bubble-start {
-  .el-x-bubble-content-wrapper {
-    .el-x-bubble-content-corner {
-      border-start-start-radius: $--el-x-border-radius-base - 2px;
-    }
-  }
-}
-
-.el-x-bubble-end {
-  justify-content: end;
-  flex-direction: row-reverse;
-
-  .el-x-bubble-content-wrapper {
-    align-items: flex-end;
-
-    .el-x-bubble-content-corner {
-      border-start-end-radius: $--el-x-border-radius-base - 2px;
-    }
-  }
-}
-
-.el-x-bubble-no-style {
-  .el-x-bubble-content-wrapper {
-    .el-x-bubble-content {
-      background-color: transparent;
-      padding: 0;
-    }
-  }
-}
-
-.el-x-bubble-content-wrapper {
-  flex: auto;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  min-width: 0;
-  max-width: 100%;
-
-  .el-x-bubble-header,
-  .el-x-bubble-content,
-  .el-x-bubble-footer {
-    font-size: $--el-x-font-size-base;
-    color: $--el-x-text-color-primary;
-    line-height: $--el-x-font-line-height-primary;
-  }
-
-  // .el-x-bubble-header {
-  //   margin-bottom: var();
-  // }
-
-  .el-x-bubble-content {
-    background-color: $--el-x-fill-color;
-    padding: $--el-x-padding-md $--el-x-padding-lg;
-    border-radius: $--el-x-border-radius-base + 4px;
-    position: relative;
-    box-sizing: border-box;
-    min-width: 0;
-    max-width: var(--bubble-content-max-width);
-    color: $--el-x-text-color-primary;
-    font-size: $--el-x-font-size-base;
-    line-height: $--el-x-font-line-height-primary;
-    // min-height: calc(#{$--el-x-padding-md} * 2 + #{$--el-x-font-line-height-primary} * #{$--el-x-font-size-base} );
-    word-break: break-word;
-
-    // 打字器没有内容时候展示高度
-    .no-content {
-      // height: 16px;
-      height: 0;
-    }
-  }
-
-  // 气泡圆角
-  .el-x-bubble-content-round {
-    border-radius: $--el-x-border-radius-round;
-  }
-
-  // 气泡样式
-  .el-x-bubble-content-filled {
-    background-color: $--el-x-fill-color;
-  }
-
-  .el-x-bubble-content-borderless {
-    background-color: $--el-x-fill-color;
-    border: $--el-x-border-width solid $--el-x-border-color;
-  }
-
-  .el-x-bubble-content-outlined {
-    background: none;
-    border: $--el-x-border-width solid $--el-x-border-color;
-  }
-
-  .el-x-bubble-content-shadow {
-    background: none;
-    // box-shadow: var(--el-box-shadow-tertiary);
-    box-shadow: $--el-x-box-shadow-base;
-  }
-
-  .el-x-bubble-content-loading {
-    width: fit-content;
-
-    .el-x-bubble-loading-wrap {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      // height: 16px;
-      /* 盒子高度 */
-      gap: 5px;
-    }
-
-    .dot {
-      width: 5px;
-      height: 5px;
-      background-color: $--color-primary;
-      /* 点的颜色 */
-      border-radius: 50%;
-      /* 圆形 */
-      animation: wave 1s infinite ease-in-out;
-      /* 动画 */
-    }
-
-    /* 波浪动画 */
-    @keyframes wave {
-      0%,
-      100% {
-        transform: translateY(-2px);
-      }
-
-      50% {
-        transform: translateY(2px);
-        /* 上下波动 */
-      }
-    }
-  }
-
-  .el-x-bubble-footer {
-    margin-top: $--el-x-padding-sm;
-  }
-}
+@import '../theme/var.scss';
+
+.el-x-bubble {
+  display: flex;
+  gap: var(--el-x-bubble-avatar-placeholder-gap);
+}
+
+.el-x-bubble-avatar-size {
+  ::v-deep .el-avatar {
+    width: var(--el-x-bubble-avatar-placeholder-width);
+    height: var(--el-x-bubble-avatar-placeholder-height);
+  }
+}
+
+.el-x-bubble-avatar-placeholder {
+  width: var(--el-x-bubble-avatar-placeholder-width);
+  height: var(--el-x-bubble-avatar-placeholder-height);
+}
+
+.el-x-bubble-start {
+  .el-x-bubble-content-wrapper {
+    .el-x-bubble-content-corner {
+      border-start-start-radius: $--el-x-border-radius-base - 2px;
+    }
+  }
+}
+
+.el-x-bubble-end {
+  justify-content: end;
+  flex-direction: row-reverse;
+
+  .el-x-bubble-content-wrapper {
+    align-items: flex-end;
+
+    .el-x-bubble-content-corner {
+      border-start-end-radius: $--el-x-border-radius-base - 2px;
+    }
+  }
+}
+
+.el-x-bubble-no-style {
+  .el-x-bubble-content-wrapper {
+    .el-x-bubble-content {
+      background-color: transparent;
+      padding: 0;
+    }
+  }
+}
+
+.el-x-bubble-content-wrapper {
+  flex: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  min-width: 0;
+  max-width: 100%;
+
+  .el-x-bubble-header,
+  .el-x-bubble-content,
+  .el-x-bubble-footer {
+    font-size: $--el-x-font-size-base;
+    color: $--el-x-text-color-primary;
+    line-height: $--el-x-font-line-height-primary;
+  }
+
+  // .el-x-bubble-header {
+  //   margin-bottom: var();
+  // }
+
+  .el-x-bubble-content {
+    background-color: $--el-x-fill-color;
+    padding: $--el-x-padding-md $--el-x-padding-lg;
+    border-radius: $--el-x-border-radius-base + 4px;
+    position: relative;
+    box-sizing: border-box;
+    min-width: 0;
+    max-width: var(--bubble-content-max-width);
+    color: $--el-x-text-color-primary;
+    font-size: $--el-x-font-size-base;
+    line-height: $--el-x-font-line-height-primary;
+    // min-height: calc(#{$--el-x-padding-md} * 2 + #{$--el-x-font-line-height-primary} * #{$--el-x-font-size-base} );
+    word-break: break-word;
+
+    // 打字器没有内容时候展示高度
+    .no-content {
+      // height: 16px;
+      height: 0;
+    }
+  }
+
+  // 气泡圆角
+  .el-x-bubble-content-round {
+    border-radius: $--el-x-border-radius-round;
+  }
+
+  // 气泡样式
+  .el-x-bubble-content-filled {
+    background-color: $--el-x-fill-color;
+  }
+
+  .el-x-bubble-content-borderless {
+    background-color: $--el-x-fill-color;
+    border: $--el-x-border-width solid $--el-x-border-color;
+  }
+
+  .el-x-bubble-content-outlined {
+    background: none;
+    border: $--el-x-border-width solid $--el-x-border-color;
+  }
+
+  .el-x-bubble-content-shadow {
+    background: none;
+    // box-shadow: var(--el-box-shadow-tertiary);
+    box-shadow: $--el-x-box-shadow-base;
+  }
+
+  .el-x-bubble-content-loading {
+    width: fit-content;
+
+    .el-x-bubble-loading-wrap {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      // height: 16px;
+      /* 盒子高度 */
+      gap: 5px;
+    }
+
+    .dot {
+      width: 5px;
+      height: 5px;
+      background-color: $--color-primary;
+      /* 点的颜色 */
+      border-radius: 50%;
+      /* 圆形 */
+      animation: wave 1s infinite ease-in-out;
+      /* 动画 */
+    }
+
+    /* 波浪动画 */
+    @keyframes wave {
+      0%,
+      100% {
+        transform: translateY(-2px);
+      }
+
+      50% {
+        transform: translateY(2px);
+        /* 上下波动 */
+      }
+    }
+  }
+
+  .el-x-bubble-footer {
+    margin-top: $--el-x-padding-sm;
+  }
+}

package/src/styles/Conversations.scss

@@ -46,7 +46,7 @@
 .el-x-conversations-load-more {
   display: flex;
   width: calc(100% - 20px);
-  padding: 14px 10px;
+  padding: 4px 0;
   justify-content: center;
   align-items: center;
   font-size: 12px;