✨ add image recognition classification

src/components/MyUI/CheckCard/CheckCard.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="check-card" :class="{ 'selected': isSelected }" @click="handleClick" :style="cardStyle">
+  <div
+      class="check-card"
+      :class="{ 'selected': isSelected && props.showSelectedEffect }"
+      @click="handleClick"
+      :style="cardStyle">
     <div class="hover-circle" @click.stop="toggleSelection"
          v-if="showHoverCircle"
          :style="{ width: iconSize + 'px', height: iconSize + 'px' }">
@@ -35,6 +39,7 @@ interface Props {
   backgroundColor?: string;
   showHoverCircle?: boolean; // 控制是否显示悬停圆环
   iconSize?: number; // 控制图标大小
+  showSelectedEffect?: boolean; // 控制是否显示选中效果
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -45,6 +50,7 @@ const props = withDefaults(defineProps<Props>(), {
   backgroundColor: '#e5eeff',
   showHoverCircle: true, // 默认显示悬停圆环
   iconSize: 24, // 默认图标大小
+  showSelectedEffect: true, // 默认显示选中效果
 });
 
 const emits = defineEmits(['update:modelValue']);
@@ -90,6 +96,7 @@ function toggleSelection() {
   transition: border-color 0.3s, background-color 0.3s;
   overflow: visible; /* Ensure the icon is not cut off */
 }
+
 .check-card.selected {
   border: 1px solid rgba(125, 167, 255, 0.68);
   box-shadow: 0 0 2px rgba(77, 167, 255, 0.89);

src/components/MyUI/PhotoStack/PhotoStack.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="stack rotated">
+    <img :src="imageSrc" alt="">
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps } from 'vue';
+
+const props = defineProps<{
+  src?: string;
+  defaultSrc: string;
+}>();
+
+const imageSrc = computed(() => props.src || props.defaultSrc);
+</script>
+
+<style scoped lang="scss">
+.stack {
+  position: relative;
+  z-index: 10;
+  float: left;
+}
+
+.stack img {
+  width: 200px;
+  height: 180px;
+  vertical-align: bottom;
+  border: 5px #fff solid;
+  border-radius: 10px;
+  box-sizing: border-box;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+}
+
+.stack:before,
+.stack:after {
+  content: "";
+  border-radius: 10px;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  border: 10px solid #fff;
+  left: 0;
+  box-sizing: border-box;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+  transition: 0.3s all ease-out;
+}
+
+.stack:before {
+  top: 4px;
+  z-index: -10;
+}
+
+.stack:after {
+  top: 8px;
+  z-index: -20;
+}
+
+.stack.rotated:before {
+  transform-origin: bottom left;
+  transform: rotate(2deg);
+}
+
+.stack.rotated:after {
+  transform-origin: bottom left;
+  transform: rotate(4deg);
+}
+
+.stack.twisted:before {
+  transform: rotate(4deg);
+}
+
+.stack.twisted:after {
+  transform: rotate(-4deg);
+}
+
+.stack.rotated-left:before {
+  transform-origin: bottom left;
+  transform: rotate(-3deg);
+}
+
+.stack.rotated-left:after {
+  transform-origin: bottom left;
+  transform: rotate(-6deg);
+}
+
+.stack:hover:before,
+.stack:hover:after {
+  transform: rotate(0deg);
+}
+</style>