@atooyu/uxto-ui 1.0.0

package/src/components/u-upload/u-upload.vue

@@ -0,0 +1,403 @@
+<template>
+  <view class="u-upload">
+    <view class="u-upload__list">
+      <!-- 已上传文件列表 -->
+      <view
+        v-for="(file, index) in fileList"
+        :key="index"
+        class="u-upload__item"
+        :class="{
+          'u-upload__item--error': file.status === 'error',
+          'u-upload__item--uploading': file.status === 'uploading'
+        }"
+      >
+        <!-- 图片预览 -->
+        <image
+          v-if="isImage(file)"
+          class="u-upload__preview"
+          :src="file.url || file.thumb"
+          mode="aspectFill"
+          @click="handlePreview(file, index)"
+        />
+
+        <!-- 视频预览 -->
+        <view v-else-if="isVideo(file)" class="u-upload__video">
+          <image
+            class="u-upload__preview"
+            :src="file.thumb || defaultVideoThumb"
+            mode="aspectFill"
+            @click="handlePreview(file, index)"
+          />
+          <view class="u-upload__video-icon">
+            <text>▶</text>
+          </view>
+        </view>
+
+        <!-- 其他文件 -->
+        <view v-else class="u-upload__file" @click="handlePreview(file, index)">
+          <text class="u-upload__file-icon">📄</text>
+          <text class="u-upload__file-name">{{ getFileName(file) }}</text>
+        </view>
+
+        <!-- 上传进度 -->
+        <view v-if="file.status === 'uploading'" class="u-upload__progress">
+          <view class="u-upload__progress-bar" :style="{ width: file.progress + '%' }"></view>
+        </view>
+
+        <!-- 删除按钮 -->
+        <view
+          v-if="deletable && file.status !== 'uploading'"
+          class="u-upload__delete"
+          @click="handleDelete(index)"
+        >
+          <text class="u-upload__delete-icon">×</text>
+        </view>
+
+        <!-- 上传失败提示 -->
+        <view v-if="file.status === 'error'" class="u-upload__error">
+          <text>上传失败</text>
+        </view>
+      </view>
+
+      <!-- 上传按钮 -->
+      <view
+        v-if="showUploadBtn"
+        class="u-upload__trigger"
+        :class="{
+          'u-upload__trigger--disabled': disabled || fileList.length >= maxCount
+        }"
+        @click="handleTrigger"
+      >
+        <slot name="trigger">
+          <view class="u-upload__trigger-default">
+            <text class="u-upload__trigger-icon">+</text>
+            <text v-if="triggerText" class="u-upload__trigger-text">{{ triggerText }}</text>
+          </view>
+        </slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+
+interface UploadFile {
+  url?: string
+  thumb?: string
+  name?: string
+  size?: number
+  status?: 'pending' | 'uploading' | 'done' | 'error'
+  progress?: number
+  type?: string
+  file?: any
+}
+
+interface Props {
+  modelValue?: UploadFile[]
+  accept?: 'image' | 'video' | 'media' | 'all'
+  multiple?: boolean
+  maxCount?: number
+  maxSize?: number
+  disabled?: boolean
+  deletable?: boolean
+  showUpload?: boolean
+  triggerText?: string
+  previewFull?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: () => [],
+  accept: 'image',
+  multiple: false,
+  maxCount: 99,
+  maxSize: 10 * 1024 * 1024,
+  disabled: false,
+  deletable: true,
+  showUpload: true,
+  triggerText: '',
+  previewFull: true
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [files: UploadFile[]]
+  change: [files: UploadFile[]]
+  success: [file: UploadFile]
+  fail: [error: any]
+  delete: [file: UploadFile, index: number]
+  preview: [file: UploadFile, index: number]
+  oversize: [files: UploadFile[]]
+  overcount: []
+}>()
+
+const fileList = ref<UploadFile[]>(props.modelValue)
+// 默认视频缩略图占位符
+const defaultVideoThumb = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHZpZXdCb3g9IjAgMCA4MCA4MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iODAiIGhlaWdodD0iODAiIGZpbGw9IiNFNUU1RTUiLz48dGV4dCB4PSI1MCUiIHk9IjUwJSIgZmlsbD0iIzk5OSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgZm9udC1zaXplPSIyNCI+▶PC90ZXh0Pjwvc3ZnPg=='
+
+const showUploadBtn = computed(() => {
+  return props.showUpload && (!props.maxCount || fileList.value.length < props.maxCount)
+})
+
+watch(() => props.modelValue, (val) => {
+  fileList.value = val
+}, { deep: true })
+
+const isImage = (file: UploadFile) => {
+  if (file.type) return file.type.startsWith('image/')
+  const url = file.url || ''
+  return /\.(jpg|jpeg|png|gif|bmp|webp)$/i.test(url)
+}
+
+const isVideo = (file: UploadFile) => {
+  if (file.type) return file.type.startsWith('video/')
+  const url = file.url || ''
+  return /\.(mp4|mov|avi|mkv|webm)$/i.test(url)
+}
+
+const getFileName = (file: UploadFile) => {
+  if (file.name) return file.name
+  const url = file.url || ''
+  const match = url.match(/[^/]+$/)
+  return match ? match[0] : '文件'
+}
+
+const handleTrigger = () => {
+  if (props.disabled || fileList.value.length >= props.maxCount) {
+    if (fileList.value.length >= props.maxCount) {
+      emit('overcount')
+    }
+    return
+  }
+
+  // 模拟文件选择，实际在uni-app中使用 uni.chooseImage/uni.chooseVideo
+  // 这里仅作演示
+}
+
+const handlePreview = (file: UploadFile, index: number) => {
+  emit('preview', file, index)
+}
+
+const handleDelete = (index: number) => {
+  const file = fileList.value[index]
+  fileList.value.splice(index, 1)
+  emit('update:modelValue', fileList.value)
+  emit('change', fileList.value)
+  emit('delete', file, index)
+}
+
+const afterRead = (files: UploadFile | UploadFile[]) => {
+  const fileArray = Array.isArray(files) ? files : [files]
+
+  // 检查数量限制
+  if (fileList.value.length + fileArray.length > props.maxCount) {
+    emit('overcount')
+    return
+  }
+
+  // 检查大小限制
+  const oversizeFiles = fileArray.filter(f => f.size && f.size > props.maxSize)
+  if (oversizeFiles.length > 0) {
+    emit('oversize', oversizeFiles)
+    return
+  }
+
+  // 添加文件到列表
+  fileArray.forEach(file => {
+    file.status = 'uploading'
+    file.progress = 0
+    fileList.value.push(file)
+
+    // 模拟上传过程
+    simulateUpload(file)
+  })
+}
+
+const simulateUpload = (file: UploadFile) => {
+  // 模拟上传进度
+  let progress = 0
+  const timer = setInterval(() => {
+    progress += Math.random() * 30
+    if (progress >= 100) {
+      progress = 100
+      file.status = 'done'
+      file.progress = 100
+      clearInterval(timer)
+      emit('update:modelValue', fileList.value)
+      emit('change', fileList.value)
+      emit('success', file)
+    } else {
+      file.progress = progress
+    }
+  }, 200)
+}
+
+// 提供外部调用的方法
+defineExpose({
+  afterRead,
+  fileList
+})
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.u-upload {
+  width: 100%;
+
+  &__list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $--spacing-sm;
+  }
+
+  &__item {
+    position: relative;
+    width: 80px;
+    height: 80px;
+    border-radius: $--border-radius-md;
+    overflow: hidden;
+    background: $--bg-color-2;
+    border: 1px solid $--border-color;
+
+    &--error {
+      border-color: $--color-danger;
+    }
+
+    &--uploading {
+      opacity: 0.8;
+    }
+  }
+
+  &__preview {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  &__video {
+    width: 100%;
+    height: 100%;
+    position: relative;
+
+    &-icon {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: rgba(0, 0, 0, 0.3);
+      color: #fff;
+      font-size: 24px;
+    }
+  }
+
+  &__file {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: $--spacing-xs;
+
+    &-icon {
+      font-size: 24px;
+      margin-bottom: 4px;
+    }
+
+    &-name {
+      font-size: $--font-size-xs;
+      color: $--text-color-2;
+      text-align: center;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 100%;
+    }
+  }
+
+  &__progress {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: rgba(255, 255, 255, 0.8);
+
+    &-bar {
+      height: 100%;
+      background: $--color-primary;
+      transition: width 0.2s;
+    }
+  }
+
+  &__delete {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 16px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 0 $--border-radius-md 0 0;
+
+    &-icon {
+      color: #fff;
+      font-size: 12px;
+    }
+  }
+
+  &__error {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(238, 10, 36, 0.1);
+    color: $--color-danger;
+    font-size: $--font-size-xs;
+  }
+
+  &__trigger {
+    width: 80px;
+    height: 80px;
+    border-radius: $--border-radius-md;
+    background: $--bg-color;
+    border: 1px solid $--border-color;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &--disabled {
+      opacity: 0.5;
+    }
+
+    &-default {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &-icon {
+      font-size: 24px;
+      color: $--text-color-3;
+    }
+
+    &-text {
+      font-size: $--font-size-xs;
+      color: $--text-color-3;
+      margin-top: 4px;
+    }
+  }
+}
+</style>

package/src/styles/index.scss

@@ -0,0 +1,59 @@
+@import './variables.scss';
+
+/* 全局样式 */
+page {
+  background-color: $--bg-color;
+  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
+  font-size: $--font-size-md;
+  color: $--text-color;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* 清除默认样式 */
+view, text, image, scroll-view {
+  box-sizing: border-box;
+}
+
+/* 安全区域适配 */
+.safe-area-bottom {
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+/* Flex 布局工具类 */
+.flex {
+  display: flex;
+}
+
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flex-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+/* 文字省略 */
+.ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ellipsis-2 {
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}

package/src/styles/variables.scss

@@ -0,0 +1,68 @@
+// 主题色
+$--color-primary: #1989fa !default;
+$--color-success: #07c160 !default;
+$--color-warning: #ff976a !default;
+$--color-danger: #ee0a24 !default;
+$--color-info: #969799 !default;
+
+// 文字颜色
+$--text-color: #323233 !default;
+$--text-color-2: #646566 !default;
+$--text-color-3: #969799 !default;
+$--text-color-white: #ffffff !default;
+
+// 背景色
+$--bg-color: #f7f8fa !default;
+$--bg-color-2: #ffffff !default;
+$--bg-color-3: #f2f3f5 !default;
+
+// 边框
+$--border-color: #ebedf0 !default;
+$--border-radius-sm: 4px !default;
+$--border-radius-md: 8px !default;
+$--border-radius-lg: 12px !default;
+
+// 边框半径别名
+$--radius-sm: $--border-radius-sm !default;
+$--radius-md: $--border-radius-md !default;
+$--radius-lg: $--border-radius-lg !default;
+
+// 字体大小
+$--font-size-xs: 10px !default;
+$--font-size-sm: 12px !default;
+$--font-size-md: 14px !default;
+$--font-size-lg: 16px !default;
+$--font-size-xl: 18px !default;
+$--font-size-base: $--font-size-md !default;
+
+// 间距
+$--spacing-xs: 4px !default;
+$--spacing-sm: 8px !default;
+$--spacing-base: 12px !default;
+$--spacing-md: 12px !default;
+$--spacing-lg: 16px !default;
+$--spacing-xl: 24px !default;
+
+// 动画
+$--transition-duration: 0.3s !default;
+
+// 组件变量
+// Button
+$--button-height: 44px !default;
+$--button-height-sm: 32px !default;
+$--button-height-lg: 50px !default;
+
+// Input
+$--input-height: 44px !default;
+
+// Search
+$--search-height: 36px !default;
+
+// Textarea
+$--textarea-line-height: 1.5 !default;
+
+// Slider
+$--slider-button-size: 24px !default;
+
+// Cell
+$--cell-height: 48px !default;