@foundbyte/uni-agent 1.0.0-alpha.0

package/components/bubble-list/index.scss

@@ -0,0 +1,254 @@
+// BubbleList 组件样式
+// 兼容小程序的 uni-app 组件样式
+
+@use '../../styles/base' as base;
+
+.#{base.$prefix}-bubble {
+  // 列表内容
+  &__list-content {
+    padding: 24rpx;
+    font-size: base.$font-size-base;
+  }
+
+  // 列表底部锚点（用于滚动定位）
+  &__list-bottom-anchor {
+    width: 100%;
+    height: 1px;
+  }
+
+  // 消息项
+  &__item {
+    display: flex;
+    align-items: flex-start;
+
+    & + & {
+      margin-top: 40rpx;
+    }
+
+    &--start {
+      flex-direction: row;
+    }
+
+    // &--end {
+    //   flex-direction: row-reverse;
+    // }
+
+    &--last {
+      margin-bottom: 0;
+    }
+  }
+
+  // 头像
+  &__avatar {
+    flex-shrink: 0;
+    width: 72rpx;
+    height: 72rpx;
+    border-radius: 50%;
+    overflow: hidden;
+    background-color: #f0f0f0;
+
+    &--left {
+      margin-right: 16rpx;
+    }
+
+    &--right {
+      margin-left: 16rpx;
+    }
+  }
+
+  // 头像图片
+  &__avatar-image {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+  }
+
+  // 头像默认图标
+  &__avatar-default {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+
+    &--ai {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    }
+
+    &--user {
+      background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
+    }
+  }
+
+  // 头像图标
+  &__avatar-icon {
+    font-size: 36rpx;
+  }
+
+  // 内容区域
+  &__content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    // max-width: calc(100% - 120rpx);
+
+    &--start {
+      align-items: flex-start;
+    }
+
+    &--end {
+      align-items: flex-end;
+    }
+  }
+
+  // 角色名称
+  &__role-name {
+    font-size: 24rpx;
+    color: #999;
+    margin-bottom: 8rpx;
+  }
+
+  // 消息气泡
+  &__message {
+    position: relative;
+    max-width: 100%;
+    word-break: break-word;
+    line-height: calc(48 / 32);
+    font-weight: 400;
+
+    &--end {
+      display: flex;
+      justify-content: flex-end;
+    }
+
+    &--center {
+      display: flex;
+      justify-content: center;
+    }
+
+    &--loading {
+      min-width: 120rpx;
+      min-height: 60rpx;
+      // display: flex;
+      // align-items: center;
+      // justify-content: center;
+    }
+  }
+
+  // 加载动画
+  &__loading {
+    display: flex;
+    align-items: center;
+    min-height: 60rpx;
+    gap: 12rpx;
+  }
+
+  // 加载动画点
+  &__loading-dot {
+    width: 12rpx;
+    height: 12rpx;
+    border-radius: 50%;
+    background-color: #999;
+    animation: #{base.$prefix}-bubble-loading 1.4s infinite ease-in-out both;
+
+    &:nth-child(1) {
+      animation-delay: -0.32s;
+    }
+
+    &:nth-child(2) {
+      animation-delay: -0.16s;
+    }
+  }
+
+  @keyframes #{base.$prefix}-bubble-loading {
+    0%,
+    80%,
+    100% {
+      transform: scale(0.6);
+      opacity: 0.5;
+    }
+    40% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  // 消息底部区域
+  &__message-footer {
+    display: flex;
+    align-items: center;
+    margin-top: 8rpx;
+    gap: 12rpx;
+  }
+
+  // 工具图标
+  &__tool-icon {
+    width: 48rpx;
+    height: 48rpx;
+  }
+
+  // 时间戳
+  &__time {
+    font-size: 22rpx;
+    color: #bbb;
+  }
+
+  // ========== 动画相关样式（使用 transition）==========
+
+  // 动画变量（作为默认值，可被内联样式覆盖）
+  --animation-duration: 300ms;
+  --animation-delay: 0ms;
+
+  // 淡入过渡
+  &__animate--fade {
+    opacity: 1;
+    transition: opacity var(--animation-duration) ease-out var(--animation-delay);
+  }
+
+  // 从左滑入过渡
+  &__animate--slide-left {
+    opacity: 1;
+    transform: translateX(0);
+    transition: opacity var(--animation-duration) ease-out var(--animation-delay),
+                transform var(--animation-duration) ease-out var(--animation-delay);
+  }
+
+  // 从右滑入过渡
+  &__animate--slide-right {
+    opacity: 1;
+    transform: translateX(0);
+    transition: opacity var(--animation-duration) ease-out var(--animation-delay),
+                transform var(--animation-duration) ease-out var(--animation-delay);
+  }
+
+  // 缩放进入过渡
+  &__animate--scale {
+    opacity: 1;
+    transform: scale(1);
+    transition: opacity var(--animation-duration) ease-out var(--animation-delay),
+                transform var(--animation-duration) ease-out var(--animation-delay);
+  }
+
+  // 弹跳进入过渡（transition 无法实现多关键帧弹跳效果，用 scale 代替）
+  &__animate--bounce {
+    opacity: 1;
+    transform: scale(1);
+    transition: opacity calc(var(--animation-duration) * 0.5) ease-out var(--animation-delay),
+                transform var(--animation-duration) cubic-bezier(0.68, -0.55, 0.265, 1.55) var(--animation-delay);
+  }
+}
+
+// 加载动画关键帧保留
+@keyframes #{base.$prefix}-bubble-loading {
+  0%,
+  80%,
+  100% {
+    transform: scale(0.6);
+    opacity: 0.5;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}