@ruixinkeji/prism-ui 1.0.0

package/components/PrismImagePicker/PrismImagePicker.vue

@@ -0,0 +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>

package/components/PrismIndexBar/PrismIndexBar.vue

@@ -0,0 +1,243 @@
+<template>
+  <view>
+    <!-- 右侧索引条 -->
+    <view
+      class="prism-index-bar"
+      :class="{ 'dark-mode': isDarkMode }"
+      @touchstart="onIndexTouchStart"
+      @touchmove.stop.prevent="onIndexTouchMove"
+      @touchend="onIndexTouchEnd"
+    >
+      <view
+        v-for="item in items"
+        :key="item.value"
+        class="prism-index-item"
+        :class="{ 'active': currentIndex === item.value }"
+        :style="{ background: item.background }"
+      >
+      </view>
+    </view>
+
+    <!-- 气泡提示 -->
+    <view
+      v-if="showIndicator && currentIndex"
+      class="prism-index-indicator"
+      :class="{ 'dark-mode': isDarkMode }"
+      :style="{
+        top: indicatorTop + 'px',
+        background: currentItemBackground
+      }"
+    >
+      {{ currentItemLabel }}
+      <!-- 箭头 -->
+      <view
+        class="prism-index-indicator-arrow"
+        :style="{ borderLeftColor: currentItemBackground }"
+      ></view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, computed, getCurrentInstance } from 'vue';
+
+const props = defineProps({
+  // 索引项列表 [{ value: 'key', label: '显示文字', background: '#fff' 或 'linear-gradient(...)' }]
+  items: {
+    type: Array,
+    default: () => []
+  },
+  // 是否深色模式
+  isDarkMode: {
+    type: Boolean,
+    default: false
+  },
+  // 当前选中的索引值（支持 v-model）
+  modelValue: {
+    type: String,
+    default: ''
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const instance = getCurrentInstance();
+
+// 当前选中的索引
+const currentIndex = ref(props.modelValue);
+// 是否显示气泡
+const showIndicator = ref(false);
+// 气泡位置
+const indicatorTop = ref(0);
+// 索引条位置信息
+let indexBarRect = null;
+
+// 当前选中项的标签
+const currentItemLabel = computed(() => {
+  const item = props.items.find(i => i.value === currentIndex.value);
+  return item ? item.label : '';
+});
+
+// 当前选中项的背景
+const currentItemBackground = computed(() => {
+  const item = props.items.find(i => i.value === currentIndex.value);
+  return item ? item.background : 'rgba(0, 0, 0, 0.85)';
+});
+
+// 根据触摸位置计算当前索引
+const getItemByTouch = (touchY) => {
+  if (!indexBarRect || !props.items.length) return null;
+  const itemHeight = indexBarRect.height / props.items.length;
+  const relativeY = touchY - indexBarRect.top;
+  const index = Math.floor(relativeY / itemHeight);
+  if (index < 0) return props.items[0];
+  if (index >= props.items.length) return props.items[props.items.length - 1];
+  return props.items[index];
+};
+
+// 更新选中索引
+const updateIndex = (touchY) => {
+  // 更新气泡位置
+  indicatorTop.value = touchY;
+
+  const item = getItemByTouch(touchY);
+  if (item && item.value !== currentIndex.value) {
+    currentIndex.value = item.value;
+    emit('update:modelValue', item.value);
+    emit('change', item.value);
+  }
+};
+
+// 触摸开始
+const onIndexTouchStart = (e) => {
+  showIndicator.value = true;
+  const touchY = e.touches[0].clientY;
+  indicatorTop.value = touchY;
+
+  // 获取索引条位置并更新索引
+  uni.createSelectorQuery()
+    .in(instance)
+    .select('.prism-index-bar')
+    .boundingClientRect((rect) => {
+      if (rect) {
+        indexBarRect = rect;
+        const item = getItemByTouch(touchY);
+        if (item) {
+          currentIndex.value = item.value;
+          emit('update:modelValue', item.value);
+          emit('change', item.value);
+        }
+      }
+    })
+    .exec();
+};
+
+// 触摸移动
+const onIndexTouchMove = (e) => {
+  const touchY = e.touches[0].clientY;
+  if (indexBarRect) {
+    updateIndex(touchY);
+  }
+};
+
+// 触摸结束
+const onIndexTouchEnd = () => {
+  showIndicator.value = false;
+};
+</script>
+
+<style lang="scss" scoped>
+/* 右侧索引条 */
+.prism-index-bar {
+  position: fixed;
+  right: 8rpx;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12rpx;
+  z-index: 999;
+  padding: 16rpx 12rpx;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 24rpx;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+
+.prism-index-item {
+  width: 40rpx;
+  height: 40rpx;
+  border-radius: 50%;
+  border: 3rpx solid rgba(255, 255, 255, 0.8);
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
+  transition: all 0.3s ease;
+  position: relative;
+  flex-shrink: 0;
+
+  &:active {
+    transform: scale(1.15);
+  }
+
+  &.active {
+    width: 48rpx;
+    height: 48rpx;
+    border-width: 4rpx;
+    border-color: #FFFFFF;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.3);
+  }
+}
+
+/* 气泡提示 */
+.prism-index-indicator {
+  position: fixed;
+  right: 80rpx;
+  padding: 12rpx 20rpx;
+  color: #FFFFFF;
+  border-radius: 8rpx;
+  font-size: 24rpx;
+  white-space: nowrap;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.3);
+  animation: fadeIn 0.2s ease;
+  z-index: 1000;
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+/* 气泡箭头 */
+.prism-index-indicator-arrow {
+  position: absolute;
+  right: -8rpx;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 0;
+  height: 0;
+  border-left: 8rpx solid;
+  border-top: 8rpx solid transparent;
+  border-bottom: 8rpx solid transparent;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* 深色模式适配 */
+.dark-mode.prism-index-bar {
+  .prism-index-item {
+    border-color: rgba(0, 0, 0, 0.5);
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.4);
+
+    &.active {
+      border-color: rgba(255, 255, 255, 0.9);
+      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.6);
+    }
+  }
+}
+</style>