@ruixinkeji/prism-ui 1.0.0 → 1.0.2

package/components/PrismImagePicker/PrismImagePicker.vue

@@ -1,457 +1,457 @@
-<template>
-  <view class="prism-image-picker" :class="{ 'dark-mode': appStore.isDarkMode }">
-    <!-- 主图片区域 -->
-    <view class="picker-main">
-      <!-- 已选图片预览 -->
-      <view class="image-preview" v-if="modelValue" @click="handleMainClick">
-        <image class="preview-img" :src="modelValue" :mode="imageMode"></image>
-        <view class="image-remove" @click.stop="removeImage" v-if="!disabled">
-          <text class="fa fa-times"></text>
-        </view>
-        <view class="image-edit" v-if="!disabled">
-          <text class="fa fa-camera"></text>
-        </view>
-      </view>
-      <!-- 上传按钮 -->
-      <view class="upload-btn" v-else @click="handleUpload" :class="{ 'disabled': disabled }">
-        <text class="fa" :class="uploadIcon"></text>
-        <text class="upload-text">{{ uploadText }}</text>
-      </view>
-    </view>
-
-    <!-- 默认图片选择区域 -->
-    <view class="default-images" v-if="defaultImages.length && showDefaults">
-      <view class="default-title" v-if="defaultTitle">{{ defaultTitle }}</view>
-      <scroll-view class="default-scroll" scroll-x>
-        <view class="default-list">
-          <view
-            v-for="(img, index) in defaultImages"
-            :key="index"
-            class="default-item"
-            :class="{ 'active': modelValue === img }"
-            @click="selectDefault(img)"
-          >
-            <image :src="img" mode="aspectFill"></image>
-            <view class="check-icon" v-if="modelValue === img">
-              <text class="fa fa-check"></text>
-            </view>
-          </view>
-        </view>
-      </scroll-view>
-    </view>
-
-    <!-- 来源选择弹窗 -->
-    <view class="source-popup" v-if="showSourcePopup" @click="showSourcePopup = false">
-      <view class="source-content" @click.stop>
-        <view class="source-title">选择图片</view>
-        <view class="source-options">
-          <view class="source-option" @click="chooseFromCamera">
-            <view class="option-icon">
-              <text class="fa fa-camera"></text>
-            </view>
-            <text>拍照</text>
-          </view>
-          <view class="source-option" @click="chooseFromAlbum">
-            <view class="option-icon">
-              <text class="fa fa-images"></text>
-            </view>
-            <text>相册</text>
-          </view>
-        </view>
-        <view class="source-cancel" @click="showSourcePopup = false">取消</view>
-      </view>
-    </view>
-  </view>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { useAppStore } from '@/store/app';
-
-const props = defineProps({
-  modelValue: {
-    type: String,
-    default: ''
-  },
-  // 默认图片列表
-  defaultImages: {
-    type: Array,
-    default: () => []
-  },
-  // 是否显示默认图片
-  showDefaults: {
-    type: Boolean,
-    default: true
-  },
-  // 默认图片区域标题
-  defaultTitle: {
-    type: String,
-    default: ''
-  },
-  // 上传按钮图标
-  uploadIcon: {
-    type: String,
-    default: 'fa-camera'
-  },
-  // 上传按钮文字
-  uploadText: {
-    type: String,
-    default: '添加图片'
-  },
-  // 图片显示模式
-  imageMode: {
-    type: String,
-    default: 'aspectFill'
-  },
-  // 是否显示来源选择弹窗
-  showSourceSelect: {
-    type: Boolean,
-    default: false
-  },
-  // 图片来源：album/camera/both
-  sourceType: {
-    type: String,
-    default: 'both',
-    validator: (val) => ['album', 'camera', 'both'].includes(val)
-  },
-  // 是否压缩
-  compressed: {
-    type: Boolean,
-    default: true
-  },
-  // 禁用状态
-  disabled: {
-    type: Boolean,
-    default: false
-  }
-});
-
-const emit = defineEmits(['update:modelValue', 'change', 'upload', 'remove']);
-
-const appStore = useAppStore();
-const showSourcePopup = ref(false);
-
-// 处理上传
-function handleUpload() {
-  if (props.disabled) return;
-
-  if (props.showSourceSelect && props.sourceType === 'both') {
-    showSourcePopup.value = true;
-  } else if (props.sourceType === 'camera') {
-    chooseFromCamera();
-  } else {
-    chooseFromAlbum();
-  }
-}
-
-// 点击主图片
-function handleMainClick() {
-  if (props.disabled) return;
-  handleUpload();
-}
-
-// 从相机选择
-function chooseFromCamera() {
-  showSourcePopup.value = false;
-  chooseImage(['camera']);
-}
-
-// 从相册选择
-function chooseFromAlbum() {
-  showSourcePopup.value = false;
-  chooseImage(['album']);
-}
-
-// 选择图片
-function chooseImage(sourceType) {
-  uni.chooseImage({
-    count: 1,
-    sizeType: props.compressed ? ['compressed'] : ['original'],
-    sourceType: sourceType,
-    success: (res) => {
-      const tempFilePath = res.tempFilePaths[0];
-      emit('update:modelValue', tempFilePath);
-      emit('change', tempFilePath);
-      emit('upload', {
-        tempFilePath,
-        tempFile: res.tempFiles[0]
-      });
-    },
-    fail: (err) => {
-      console.log('选择图片失败', err);
-    }
-  });
-}
-
-// 选择默认图片
-function selectDefault(img) {
-  if (props.disabled) return;
-  emit('update:modelValue', img);
-  emit('change', img);
-}
-
-// 移除图片
-function removeImage() {
-  emit('update:modelValue', '');
-  emit('change', '');
-  emit('remove');
-}
-</script>
-
-<style lang="scss">
-.prism-image-picker {
-  .picker-main {
-    display: inline-block;
-  }
-
-  .image-preview {
-    position: relative;
-    width: 160rpx;
-    height: 160rpx;
-    border-radius: 16rpx;
-    overflow: hidden;
-  }
-
-  .preview-img {
-    width: 100%;
-    height: 100%;
-  }
-
-  .image-remove {
-    position: absolute;
-    top: 8rpx;
-    right: 8rpx;
-    width: 40rpx;
-    height: 40rpx;
-    background: rgba(0, 0, 0, 0.5);
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .fa {
-      font-size: 20rpx;
-      color: #FFFFFF;
-    }
-  }
-
-  .image-edit {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 48rpx;
-    background: rgba(0, 0, 0, 0.5);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .fa {
-      font-size: 24rpx;
-      color: #FFFFFF;
-    }
-  }
-
-  .upload-btn {
-    width: 160rpx;
-    height: 160rpx;
-    background: var(--prism-bg-color-container, #F7F8FA);
-    border: 2rpx dashed var(--prism-border-color-light, #E5E6EB);
-    border-radius: 16rpx;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 12rpx;
-    transition: all 0.2s;
-
-    .fa {
-      font-size: 48rpx;
-      color: var(--prism-text-placeholder, #C9CDD4);
-    }
-
-    .upload-text {
-      font-size: 24rpx;
-      color: var(--prism-text-secondary, #86909C);
-    }
-
-    &:active {
-      background: var(--prism-primary-light, rgba(52, 120, 246, 0.08));
-      border-color: var(--prism-primary-color, #3478F6);
-
-      .fa {
-        color: var(--prism-primary-color, #3478F6);
-      }
-    }
-
-    &.disabled {
-      opacity: 0.5;
-      pointer-events: none;
-    }
-  }
-
-  // 默认图片区域
-  .default-images {
-    margin-top: 24rpx;
-  }
-
-  .default-title {
-    font-size: 26rpx;
-    color: var(--prism-text-secondary, #86909C);
-    margin-bottom: 16rpx;
-  }
-
-  .default-scroll {
-    white-space: nowrap;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-
-  .default-list {
-    display: inline-flex;
-    gap: 16rpx;
-  }
-
-  .default-item {
-    position: relative;
-    width: 96rpx;
-    height: 96rpx;
-    border-radius: 12rpx;
-    overflow: hidden;
-    border: 2rpx solid transparent;
-    flex-shrink: 0;
-    transition: all 0.2s;
-
-    image {
-      width: 100%;
-      height: 100%;
-    }
-
-    &.active {
-      border-color: var(--prism-primary-color, #3478F6);
-    }
-
-    .check-icon {
-      position: absolute;
-      bottom: 0;
-      right: 0;
-      width: 32rpx;
-      height: 32rpx;
-      background: var(--prism-primary-color, #3478F6);
-      border-radius: 8rpx 0 0 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      .fa {
-        font-size: 18rpx;
-        color: #FFFFFF;
-      }
-    }
-  }
-
-  // 来源选择弹窗
-  .source-popup {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: var(--prism-mask-bg, rgba(0, 0, 0, 0.5));
-    display: flex;
-    align-items: flex-end;
-    justify-content: center;
-    z-index: 9999;
-  }
-
-  .source-content {
-    width: 100%;
-    background: var(--prism-bg-color-card, #FFFFFF);
-    border-radius: 24rpx 24rpx 0 0;
-    padding: 32rpx;
-    padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
-  }
-
-  .source-title {
-    font-size: 32rpx;
-    font-weight: 600;
-    color: var(--prism-text-primary, #1D2129);
-    text-align: center;
-    margin-bottom: 32rpx;
-  }
-
-  .source-options {
-    display: flex;
-    gap: 24rpx;
-  }
-
-  .source-option {
-    flex: 1;
-    height: 160rpx;
-    background: var(--prism-bg-color-container, #F7F8FA);
-    border-radius: 16rpx;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 16rpx;
-    transition: all 0.2s;
-
-    .option-icon {
-      width: 64rpx;
-      height: 64rpx;
-      background: var(--prism-primary-light, rgba(52, 120, 246, 0.1));
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      .fa {
-        font-size: 32rpx;
-        color: var(--prism-primary-color, #3478F6);
-      }
-    }
-
-    text:last-child {
-      font-size: 28rpx;
-      color: var(--prism-text-primary, #1D2129);
-    }
-
-    &:active {
-      background: var(--prism-primary-light, rgba(52, 120, 246, 0.1));
-    }
-  }
-
-  .source-cancel {
-    margin-top: 24rpx;
-    height: 88rpx;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 32rpx;
-    color: var(--prism-text-secondary, #86909C);
-  }
-}
-
-// 深色模式
-.dark-mode.prism-image-picker {
-  .upload-btn {
-    background: var(--prism-bg-color-container, #2A2A2A);
-    border-color: rgba(255, 255, 255, 0.15);
-  }
-
-  .source-content {
-    background: var(--prism-bg-color-card, #1A1A1A);
-  }
-
-  .source-option {
-    background: var(--prism-bg-color-container, #2A2A2A);
-
-    &:active {
-      background: rgba(52, 120, 246, 0.15);
-    }
-  }
-}
-</style>
+<template>
+  <view class="prism-image-picker" :class="{ 'dark-mode': appStore.isDarkMode }">
+    <!-- 主图片区域 -->
+    <view class="picker-main">
+      <!-- 已选图片预览 -->
+      <view class="image-preview" v-if="modelValue" @click="handleMainClick">
+        <image class="preview-img" :src="modelValue" :mode="imageMode"></image>
+        <view class="image-remove" @click.stop="removeImage" v-if="!disabled">
+          <text class="fa fa-times"></text>
+        </view>
+        <view class="image-edit" v-if="!disabled">
+          <text class="fa fa-camera"></text>
+        </view>
+      </view>
+      <!-- 上传按钮 -->
+      <view class="upload-btn" v-else @click="handleUpload" :class="{ 'disabled': disabled }">
+        <text class="fa" :class="uploadIcon"></text>
+        <text class="upload-text">{{ uploadText }}</text>
+      </view>
+    </view>
+
+    <!-- 默认图片选择区域 -->
+    <view class="default-images" v-if="defaultImages.length && showDefaults">
+      <view class="default-title" v-if="defaultTitle">{{ defaultTitle }}</view>
+      <scroll-view class="default-scroll" scroll-x>
+        <view class="default-list">
+          <view
+            v-for="(img, index) in defaultImages"
+            :key="index"
+            class="default-item"
+            :class="{ 'active': modelValue === img }"
+            @click="selectDefault(img)"
+          >
+            <image :src="img" mode="aspectFill"></image>
+            <view class="check-icon" v-if="modelValue === img">
+              <text class="fa fa-check"></text>
+            </view>
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+
+    <!-- 来源选择弹窗 -->
+    <view class="source-popup" v-if="showSourcePopup" @click="showSourcePopup = false">
+      <view class="source-content" @click.stop>
+        <view class="source-title">选择图片</view>
+        <view class="source-options">
+          <view class="source-option" @click="chooseFromCamera">
+            <view class="option-icon">
+              <text class="fa fa-camera"></text>
+            </view>
+            <text>拍照</text>
+          </view>
+          <view class="source-option" @click="chooseFromAlbum">
+            <view class="option-icon">
+              <text class="fa fa-images"></text>
+            </view>
+            <text>相册</text>
+          </view>
+        </view>
+        <view class="source-cancel" @click="showSourcePopup = false">取消</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useAppStore } from '@/store/app';
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: ''
+  },
+  // 默认图片列表
+  defaultImages: {
+    type: Array,
+    default: () => []
+  },
+  // 是否显示默认图片
+  showDefaults: {
+    type: Boolean,
+    default: true
+  },
+  // 默认图片区域标题
+  defaultTitle: {
+    type: String,
+    default: ''
+  },
+  // 上传按钮图标
+  uploadIcon: {
+    type: String,
+    default: 'fa-camera'
+  },
+  // 上传按钮文字
+  uploadText: {
+    type: String,
+    default: '添加图片'
+  },
+  // 图片显示模式
+  imageMode: {
+    type: String,
+    default: 'aspectFill'
+  },
+  // 是否显示来源选择弹窗
+  showSourceSelect: {
+    type: Boolean,
+    default: false
+  },
+  // 图片来源：album/camera/both
+  sourceType: {
+    type: String,
+    default: 'both',
+    validator: (val) => ['album', 'camera', 'both'].includes(val)
+  },
+  // 是否压缩
+  compressed: {
+    type: Boolean,
+    default: true
+  },
+  // 禁用状态
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'change', 'upload', 'remove']);
+
+const appStore = useAppStore();
+const showSourcePopup = ref(false);
+
+// 处理上传
+function handleUpload() {
+  if (props.disabled) return;
+
+  if (props.showSourceSelect && props.sourceType === 'both') {
+    showSourcePopup.value = true;
+  } else if (props.sourceType === 'camera') {
+    chooseFromCamera();
+  } else {
+    chooseFromAlbum();
+  }
+}
+
+// 点击主图片
+function handleMainClick() {
+  if (props.disabled) return;
+  handleUpload();
+}
+
+// 从相机选择
+function chooseFromCamera() {
+  showSourcePopup.value = false;
+  chooseImage(['camera']);
+}
+
+// 从相册选择
+function chooseFromAlbum() {
+  showSourcePopup.value = false;
+  chooseImage(['album']);
+}
+
+// 选择图片
+function chooseImage(sourceType) {
+  uni.chooseImage({
+    count: 1,
+    sizeType: props.compressed ? ['compressed'] : ['original'],
+    sourceType: sourceType,
+    success: (res) => {
+      const tempFilePath = res.tempFilePaths[0];
+      emit('update:modelValue', tempFilePath);
+      emit('change', tempFilePath);
+      emit('upload', {
+        tempFilePath,
+        tempFile: res.tempFiles[0]
+      });
+    },
+    fail: (err) => {
+      console.log('选择图片失败', err);
+    }
+  });
+}
+
+// 选择默认图片
+function selectDefault(img) {
+  if (props.disabled) return;
+  emit('update:modelValue', img);
+  emit('change', img);
+}
+
+// 移除图片
+function removeImage() {
+  emit('update:modelValue', '');
+  emit('change', '');
+  emit('remove');
+}
+</script>
+
+<style lang="scss">
+.prism-image-picker {
+  .picker-main {
+    display: inline-block;
+  }
+
+  .image-preview {
+    position: relative;
+    width: 160rpx;
+    height: 160rpx;
+    border-radius: 16rpx;
+    overflow: hidden;
+  }
+
+  .preview-img {
+    width: 100%;
+    height: 100%;
+  }
+
+  .image-remove {
+    position: absolute;
+    top: 8rpx;
+    right: 8rpx;
+    width: 40rpx;
+    height: 40rpx;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .fa {
+      font-size: 20rpx;
+      color: #FFFFFF;
+    }
+  }
+
+  .image-edit {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 48rpx;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .fa {
+      font-size: 24rpx;
+      color: #FFFFFF;
+    }
+  }
+
+  .upload-btn {
+    width: 160rpx;
+    height: 160rpx;
+    background: var(--prism-bg-color-container, #F7F8FA);
+    border: 2rpx dashed var(--prism-border-color-light, #E5E6EB);
+    border-radius: 16rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 12rpx;
+    transition: all 0.2s;
+
+    .fa {
+      font-size: 48rpx;
+      color: var(--prism-text-placeholder, #C9CDD4);
+    }
+
+    .upload-text {
+      font-size: 24rpx;
+      color: var(--prism-text-secondary, #86909C);
+    }
+
+    &:active {
+      background: var(--prism-primary-light, rgba(52, 120, 246, 0.08));
+      border-color: var(--prism-primary-color, #3478F6);
+
+      .fa {
+        color: var(--prism-primary-color, #3478F6);
+      }
+    }
+
+    &.disabled {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+  }
+
+  // 默认图片区域
+  .default-images {
+    margin-top: 24rpx;
+  }
+
+  .default-title {
+    font-size: 26rpx;
+    color: var(--prism-text-secondary, #86909C);
+    margin-bottom: 16rpx;
+  }
+
+  .default-scroll {
+    white-space: nowrap;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  .default-list {
+    display: inline-flex;
+    gap: 16rpx;
+  }
+
+  .default-item {
+    position: relative;
+    width: 96rpx;
+    height: 96rpx;
+    border-radius: 12rpx;
+    overflow: hidden;
+    border: 2rpx solid transparent;
+    flex-shrink: 0;
+    transition: all 0.2s;
+
+    image {
+      width: 100%;
+      height: 100%;
+    }
+
+    &.active {
+      border-color: var(--prism-primary-color, #3478F6);
+    }
+
+    .check-icon {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      width: 32rpx;
+      height: 32rpx;
+      background: var(--prism-primary-color, #3478F6);
+      border-radius: 8rpx 0 0 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .fa {
+        font-size: 18rpx;
+        color: #FFFFFF;
+      }
+    }
+  }
+
+  // 来源选择弹窗
+  .source-popup {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--prism-mask-bg, rgba(0, 0, 0, 0.5));
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    z-index: 9999;
+  }
+
+  .source-content {
+    width: 100%;
+    background: var(--prism-bg-color-card, #FFFFFF);
+    border-radius: 24rpx 24rpx 0 0;
+    padding: 32rpx;
+    padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
+  }
+
+  .source-title {
+    font-size: 32rpx;
+    font-weight: 600;
+    color: var(--prism-text-primary, #1D2129);
+    text-align: center;
+    margin-bottom: 32rpx;
+  }
+
+  .source-options {
+    display: flex;
+    gap: 24rpx;
+  }
+
+  .source-option {
+    flex: 1;
+    height: 160rpx;
+    background: var(--prism-bg-color-container, #F7F8FA);
+    border-radius: 16rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 16rpx;
+    transition: all 0.2s;
+
+    .option-icon {
+      width: 64rpx;
+      height: 64rpx;
+      background: var(--prism-primary-light, rgba(52, 120, 246, 0.1));
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .fa {
+        font-size: 32rpx;
+        color: var(--prism-primary-color, #3478F6);
+      }
+    }
+
+    text:last-child {
+      font-size: 28rpx;
+      color: var(--prism-text-primary, #1D2129);
+    }
+
+    &:active {
+      background: var(--prism-primary-light, rgba(52, 120, 246, 0.1));
+    }
+  }
+
+  .source-cancel {
+    margin-top: 24rpx;
+    height: 88rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 32rpx;
+    color: var(--prism-text-secondary, #86909C);
+  }
+}
+
+// 深色模式
+.dark-mode.prism-image-picker {
+  .upload-btn {
+    background: var(--prism-bg-color-container, #2A2A2A);
+    border-color: rgba(255, 255, 255, 0.15);
+  }
+
+  .source-content {
+    background: var(--prism-bg-color-card, #1A1A1A);
+  }
+
+  .source-option {
+    background: var(--prism-bg-color-container, #2A2A2A);
+
+    &:active {
+      background: rgba(52, 120, 246, 0.15);
+    }
+  }
+}
+</style>