vue-element-ui-x 0.1.0

package/src/styles/Attachments.scss

@@ -0,0 +1,236 @@
+@import '../theme/var.scss';
+
+/* CSS 动画样式调整 */
+.card-motion {
+  &-enter-active,
+  &-move,
+  &-leave-active {
+    transition: all 0.3s ease;
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  &-enter,
+  &-leave-to {
+    opacity: 0;
+    /* 从左侧外进入（进场）/ 移动到右侧外（退场） */
+    transform: translateX(-100%);
+    /* 进场初始位置在左侧外 */
+  }
+
+  &-leave-active {
+    /* 退场时从当前位置移动到右侧外 */
+    transform: translateX(100%);
+    opacity: 0;
+  }
+}
+
+.el-x-attachments {
+  &-file-card-wrap {
+    display: flex;
+    height: 100%;
+    align-items: center;
+  }
+
+  &-upload-placeholder {
+    display: inline-block;
+    width: fit-content;
+    align-self: center;
+    margin: 6px;
+  }
+
+  &-card {
+    display: inline-block;
+    vertical-align: top;
+
+    &-item {
+      margin: 6px;
+    }
+  }
+
+  &-prev-btn,
+  &-next-btn {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 10;
+    background-color: rgba(0, 0, 0, 0.3);
+    color: white;
+    border: none;
+    padding: 4px 0px;
+    border-radius: 3px;
+    transition: background-color 0.3s ease;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.5);
+    }
+
+    &:active {
+      background-color: rgba(0, 0, 0, 0.7);
+    }
+  }
+
+  &-prev-btn {
+    left: 8px;
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+  }
+
+  &-next-btn {
+    right: 8px;
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: 0px;
+  }
+
+  &-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    pointer-events: none;
+
+    &-start {
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      width: 50px;
+      background: linear-gradient(to right, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
+      z-index: 5;
+    }
+
+    &-end {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: 50px;
+      background: linear-gradient(to left, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
+      z-index: 5;
+    }
+  }
+
+  &-overflow-scrollX {
+    height: 100%;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    scrollbar-width: none;
+  }
+
+  &-overflow-scrollY {
+    width: 100%;
+    height: 100%;
+  }
+
+  &-wrapper {
+    position: relative;
+    display: block;
+  }
+
+  &-upload-btn {
+    display: flex;
+
+    ::v-deep .el-upload {
+      border: 1px dashed $--border-color-base;
+      border-radius: 6px;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+      transition: $--all-transition;
+      box-sizing: border-box;
+      text-align: center;
+
+      &:hover {
+        border-color: $--color-primary;
+
+        .uploader-icon {
+          color: $--color-primary;
+        }
+      }
+    }
+
+    .uploader-icon {
+      font-size: 28px;
+      color: #8c939d;
+      text-align: center;
+      width: var(--el-x-attachments-upload-icon-size);
+      height: var(--el-x-attachments-upload-icon-size);
+      line-height: var(--el-x-attachments-upload-icon-size);
+    }
+
+    ::v-deep .el-upload-dragger {
+      padding: 0;
+      width: auto !important;
+      height: auto !important;
+      background-color: transparent;
+
+      &:hover .el-icon {
+        color: $--color-primary;
+      }
+    }
+  }
+
+  /* 设置拖放区域的样式 */
+  &-drop-area {
+    position: absolute !important;
+    top: 0 !important;
+    left: 0 !important;
+    width: calc(100% - 4px) !important;
+    height: calc(100% - 4px) !important;
+    border-radius: 15px !important;
+    border: 2px dashed $--color-primary !important;
+    z-index: 9999 !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    flex-direction: column !important;
+    background: rgba(225, 225, 225, 0.8) !important; // 增加透明度
+    backdrop-filter: blur(4px) !important; // 增加模糊效果
+    animation: dragAreaShow 0.3s ease-in-out !important; // 添加显示动画
+    pointer-events: none !important; // 防止拖拽区域本身阻止事件
+
+    &-icon {
+      font-size: 50px !important;
+      color: $--color-primary !important;
+      animation: bounce 1s infinite alternate !important; // 添加跳动动画
+    }
+
+    &-text {
+      font-size: 16px !important;
+      color: $--color-primary !important;
+      margin-top: 10px !important;
+      text-align: center !important;
+      width: 100% !important;
+      max-width: 300px !important;
+      font-weight: bold !important;
+    }
+  }
+
+  // 添加动画关键帧
+  @keyframes dragAreaShow {
+    from {
+      opacity: 0;
+      transform: scale(0.9);
+    }
+
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes bounce {
+    from {
+      transform: translateY(0);
+    }
+
+    to {
+      transform: translateY(-10px);
+    }
+  }
+}

package/src/styles/Bubble.scss

@@ -0,0 +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: calc($--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: calc($--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: calc($--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/BubbleList.scss

@@ -0,0 +1,148 @@
+@import '../theme/var.scss';
+
+.el-x-bubble-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-height: 0;
+  max-height: var(--el-x-bubble-list-max-height);
+  overflow: auto;
+  scroll-behavior: smooth;
+
+  position: relative;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 8px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: transparent;
+    background-color: #0003;
+    border-radius: 10px;
+    transition: background-color 0.2s ease-in-out;
+  }
+
+  &::-webkit-scrollbar-track {
+    border-radius: 10px;
+    background: transparent;
+  }
+
+  &:hover {
+    &::-webkit-scrollbar-thumb {
+      background: #c1c1c1;
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+      background: #a8a8a8;
+    }
+  }
+
+  &.always-scrollbar {
+    &::-webkit-scrollbar-thumb {
+      background: #c1c1c1;
+    }
+
+    &:hover::-webkit-scrollbar-thumb {
+      background: #a8a8a8;
+    }
+  }
+}
+
+@supports (scrollbar-color: auto) {
+  .el-x-bubble-list {
+    scrollbar-color: transparent transparent;
+    scrollbar-width: thin;
+
+    &:hover {
+      scrollbar-color: #c1c1c1 transparent;
+    }
+
+    &.always-scrollbar {
+      scrollbar-color: #c1c1c1 transparent;
+    }
+  }
+}
+
+.el-x-bubble-list-default-back-button {
+  position: sticky;
+  user-select: none;
+  cursor: pointer;
+  width: 40px;
+  height: 40px;
+  padding: 10px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #ffffff;
+  border-radius: 50%;
+  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.02), 0 6px 10px 0 rgba(47, 53, 64, 0.1);
+  transition: all 0.3s ease;
+  z-index: 100;
+
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+
+  .el-x-bubble-list-back-to-bottom-icon {
+    font-size: var(--el-x-bubble-list-btn-size);
+    position: relative;
+
+    .back-to-bottom-loading-svg-bg {
+      position: absolute;
+      font-size: calc(var(--el-x-bubble-list-btn-size) + 26px);
+      animation: is-loading 1s infinite linear;
+      width: 40px;
+      height: 40px;
+    }
+
+    @keyframes is-loading {
+      0% {
+        transform: rotate(0deg);
+      }
+
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+  }
+
+  .back-to-bottom-loading-svg-bg {
+    position: absolute;
+    font-size: calc(var(--el-x-bubble-list-btn-size) + 26px);
+    animation: is-loading 1s infinite linear;
+    width: 40px;
+    height: 40px;
+  }
+
+  @keyframes is-loading {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}
+
+.el-x-bubble-list-back-to-bottom-solt {
+  position: sticky;
+  user-select: none;
+  cursor: initial;
+  width: fit-content;
+  height: fit-content;
+  padding: 0;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: initial;
+
+  &:hover {
+    transform: translateY(0px);
+    box-shadow: initial;
+  }
+}