添加跟换图片功能

src/components/Card.vue

@@ -1,12 +1,20 @@
 <script setup lang="ts">
 import { useEditorStore } from '@/stores/editor';
 import { useHoverTiltStore } from '@/stores/hoverTilt';
-import { computed } from 'vue';
+import {computed, watchEffect} from 'vue';
 const store = useEditorStore();
 const tilt_store = useHoverTiltStore();
+
 const borderRadiusStyle = computed(() => ({
   '--border-radius': store.formData['border-radius'] + 'px'
 }));
+
+watchEffect(() => {
+  console.log(tilt_store.tiltProps.shadow)
+});
+
+
+
 </script>
 
 <style scoped>
@@ -19,7 +27,7 @@ img {
   <!-- 利用这个元素承载 style 穿透到hover-tilt 内 -->
   <div class="container" :style="borderRadiusStyle">
     <hover-tilt v-bind="tilt_store.tiltProps" class="hover-tilt">
-      <img :src="store.formData.image.src" :style="store.imageStyle" />
+      <img :src="store.formData.image?.src ?? 'https://images.pokemontcg.io/swsh4/25_hires.png'" :style="store.imageStyle" />
     </hover-tilt>
   </div>
 </template>

src/const/hoverTilt.ts

@@ -46,6 +46,13 @@ export const hoverTiltConfig = [
 			step: 50
 		}
 	},
+
+	{
+		label: "shadow2",
+		value: true,
+		params: {
+		}
+	},
 	//TODO:shadow @see https://hover-tilt.simey.me/options/props/#shadow
 	{
 		label: "shadow-blur",

src/stores/hoverTilt.ts

@@ -19,7 +19,7 @@ export const useHoverTiltStore = defineStore('hoverTilt', () => {
   const tiltProps = computed(() => {
     const props: Record<string, any> = {}
     Object.entries(formData).forEach(([key, value]) => {
-      if (value !== undefined) {
+      if (value !== undefined && value !== false) {
         props[key] = value
       }
     })