@foundbyte/uni-agent 1.0.0-alpha.0

package/components/sender/image-picker.ts

@@ -0,0 +1,100 @@
+import type { ChooseImageOptions, ChooseImageResult } from './types'
+
+export interface ChooseImageCallbacks {
+  /** 选择成功回调 */
+  onSuccess?: (result: ChooseImageResult) => void
+  /** 选择失败回调 */
+  onError?: (error: string) => void
+  /** 用户取消回调 */
+  onCancel?: () => void
+}
+
+/**
+ * 选择图片 - 兼容小程序和APP
+ * @param options 图片选择选项
+ * @param callbacks 回调函数
+ */
+export function chooseImage(
+  options: ChooseImageOptions = {},
+  callbacks: ChooseImageCallbacks = {},
+): void {
+  const { count = 9, sizeType = ['compressed'], sourceType = ['album', 'camera'] } = options
+
+  const { onSuccess, onError, onCancel } = callbacks
+
+  uni.chooseImage({
+    count,
+    sizeType,
+    sourceType,
+    success: (res) => {
+      // 处理 tempFilePaths - 可能是 string 或 string[]
+      const tempFilePaths = Array.isArray(res.tempFilePaths)
+        ? res.tempFilePaths
+        : [res.tempFilePaths]
+
+      // 处理 tempFiles - 可能是对象或对象数组
+      const tempFilesRaw = Array.isArray(res.tempFiles) ? res.tempFiles : [res.tempFiles]
+      const tempFiles = tempFilesRaw.map((file: any) => ({
+        path: file.path,
+        size: file.size,
+      }))
+
+      const result: ChooseImageResult = {
+        tempFilePaths,
+        tempFiles,
+      }
+
+      onSuccess?.(result)
+    },
+    fail: (err) => {
+      // 用户取消选择
+      if (err.errMsg?.includes('cancel')) {
+        onCancel?.()
+        return
+      }
+      onError?.(err.errMsg || '选择图片失败')
+    },
+  })
+}
+
+/**
+ * 选择图片 - Promise 版本
+ * @param options 图片选择选项
+ * @returns Promise<ChooseImageResult>
+ *
+ * @example
+ * ```ts
+ * try {
+ *   const result = await chooseImageAsync({ count: 1, sourceType: ['camera'] })
+ *   console.log('拍照结果:', result.tempFilePaths[0])
+ * } catch (error) {
+ *   console.error('选择失败:', error)
+ * }
+ * ```
+ */
+export function chooseImageAsync(options: ChooseImageOptions = {}): Promise<ChooseImageResult> {
+  return new Promise((resolve, reject) => {
+    chooseImage(options, {
+      onSuccess: resolve,
+      onError: reject,
+      onCancel: () => reject(new Error('用户取消选择')),
+    })
+  })
+}
+
+/**
+ * 从相册选择图片
+ * @param count 最多选择的图片数量
+ * @returns Promise<ChooseImageResult>
+ */
+export function chooseFromAlbum(count: number = 9): Promise<ChooseImageResult> {
+  return chooseImageAsync({ count, sourceType: ['album'] })
+}
+
+/**
+ * 拍照
+ * @returns Promise<ChooseImageResult>
+ */
+export function takePhoto(): Promise<ChooseImageResult> {
+  return chooseImageAsync({ count: 1, sourceType: ['camera'] })
+}

package/components/sender/index.scss

@@ -0,0 +1,288 @@
+@use '../../styles/base' as base;
+
+// 输入区域
+.#{base.$prefix}-sender {
+  padding: 24rpx;
+
+  &__input-wrapper {
+    display: flex;
+    align-items: flex-end;
+    gap: 24rpx;
+    padding: 22rpx 24rpx;
+    background-color: #fff;
+    min-height: 100rpx;
+    border-radius: 50rpx;
+    box-shadow: 1px 4rpx 25rpx 0 rgba(0, 0, 0, 0.1);
+    transition: border-radius 0.3s;
+
+    &--multi-line {
+      border-radius: 24rpx;
+    }
+  }
+
+  // 输入模式切换
+  &__mode-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:active {
+      opacity: 0.7;
+    }
+  }
+
+  &__toggle-icon {
+    width: 56rpx;
+    height: 56rpx;
+
+    &--disabled {
+      opacity: 0.5;
+    }
+  }
+
+  &__chat-input {
+    flex: 1;
+    padding: 8rpx 0;
+    font-size: 28rpx;
+    color: rgba(0, 0, 0, 0.85);
+    text-align: justify;
+    line-height: 40rpx;
+    /** 最多4行 */
+    max-height: calc(40rpx * 4 + 16rpx);
+    overflow: auto;
+  }
+
+  // 语音输入按钮
+  &__voice-input-btn {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 56rpx;
+    border-radius: 36rpx;
+    transition: all 0.2s;
+    font-size: 28rpx;
+    color: rgba(0, 0, 0, 0.85);
+    line-height: 38rpx;
+    font-weight: 400;
+
+    &--recording {
+      .#{base.$prefix}-sender__voice-text {
+        color: #ff8041;
+      }
+    }
+
+    &--recording#{&}--will-cancel,
+    &--will-cancel {
+      .#{base.$prefix}-sender__voice-text {
+        color: #ff4141;
+      }
+    }
+
+    &--disabled {
+      opacity: 0.5;
+    }
+  }
+
+  &__send-btn {
+    width: 56rpx;
+    height: 56rpx;
+    flex-shrink: 0;
+
+    &--disabled,
+    &[disabled] {
+      opacity: 0.5;
+    }
+  }
+
+  // 附件按钮 (+号)
+  &__attachment-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:active {
+      opacity: 0.7;
+    }
+
+    &--active {
+      .#{base.$prefix}-sender__attachment-icon {
+        transform: rotate(225deg);
+      }
+    }
+
+    &--disabled {
+      opacity: 0.5;
+    }
+  }
+
+  &__attachment-icon {
+    transition: all 0.3s;
+    width: 56rpx;
+    height: 56rpx;
+  }
+
+  // 附件选择面板
+  &__attachment-panel {
+    max-height: 0;
+    overflow: hidden;
+    transition: all 0.3s ease;
+
+    &--visible {
+      max-height: 160rpx;
+    }
+  }
+
+  &__attachment-options {
+    padding: 24rpx 8rpx 0;
+    display: flex;
+    gap: 80rpx;
+  }
+
+  &__attachment-item {
+    height: 136rpx;
+    border-radius: 12rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8rpx;
+
+    &:active {
+      opacity: 0.7;
+    }
+  }
+
+  &__attachment-item-icon {
+    width: 52rpx;
+    height: 52rpx;
+
+    &-wrap {
+      width: 90rpx;
+      height: 90rpx;
+      background: #fefaf7;
+      border-radius: 32rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: 2rpx solid #fff;
+    }
+  }
+
+  &__attachment-item-label {
+    font-size: 20rpx;
+    color: rgba(0, 0, 0, 0.85);
+    line-height: 36rpx;
+  }
+
+  // 录音遮罩层（微信风格）
+  &__voice-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    // background-color: rgba(0, 0, 0, 0.5);
+
+    &__content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  &__voice-output-text {
+    font-size: 28rpx;
+    color: #fff;
+    font-weight: 600;
+    margin-bottom: 48rpx;
+    text-align: center;
+  }
+
+  &__voice-mic {
+    width: 100%;
+    padding: 76rpx 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 56rpx;
+    position: relative;
+  }
+
+  &__voice-mic-bg {
+    position: absolute;
+    inset: 0;
+    background: #fff;
+
+    &--will-cancel {
+      background: #fff;
+    }
+  }
+
+  &__voice-mic-text {
+    font-size: 24rpx;
+    color: rgba(0, 0, 0, 0.45);
+    font-weight: 400;
+    position: relative;
+  }
+
+  // 录音动画
+  &__voice-marquee-viewport {
+    width: 272rpx;
+    /* 图片宽度 */
+    height: 28rpx;
+    /* 图片高度 */
+    overflow: hidden;
+  }
+
+  &__voice-marquee-track {
+    display: flex;
+    width: fit-content;
+    // animation: scrollSingle 4s linear infinite;
+    will-change: transform;
+
+    &--paused {
+      animation-play-state: paused;
+    }
+  }
+
+  &__voice-marquee-item {
+    flex: 0 0 auto;
+    width: 272rpx;
+    /* 与视口宽度一致 */
+    height: 28rpx;
+
+    /* 与视口高度一致 */
+    &:first-child {
+      margin-left: -272rpx;
+    }
+
+    & + & {
+      margin-left: 8rpx;
+    }
+  }
+
+  &__voice-marquee-img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    /* 或根据需求改为 fill / contain */
+  }
+}
+
+/* 关键帧 — 移动距离 = 单张图片宽度 */
+@keyframes scrollSingle {
+  0% {
+    transform: translateX(0);
+  }
+
+  100% {
+    transform: translateX(272rpx + 8rpx);
+  }
+}