添加跟换图片功能

src/assets/main.css

@@ -3,8 +3,8 @@ body,
 html {
   margin: 0;
   padding: 0;
-  background-color: #0f0f0f;
+  background-color: #f3f2f2;
-  color: white;
+  color: #2d2c2c;
   font-family: 'Inter', system-ui, sans-serif;
   overflow: hidden;
 }
@@ -14,4 +14,52 @@ html {
   margin: 0 auto;
   padding: 0;
   font-weight: normal;
+}
+
+/* Custom Colored Gradient */
+:global(.custom-gradient) {
+  --hover-tilt-custom-gradient: radial-gradient(
+          circle at var(--gradient-x, 50%) var(--gradient-y, 50%),
+          rgba(125, 255, 194, calc(var(--hover-tilt-glare-intensity, 1) * 0.5)) 10%,
+          rgba(255, 255, 255, 0) 80%,
+          transparent 70%
+  );
+}
+
+/* Specular Highlight */
+:global(.specular-highlight) {
+  --hover-tilt-custom-gradient: radial-gradient(
+          80% 100% at var(--gradient-x, 50%) var(--gradient-y, 50%),
+          rgb(255 255 255 / calc(var(--hover-tilt-glare-intensity, 1))) 50%,
+          transparent 55%
+  );
+}
+
+/* Aurora Sweep */
+:global(.aurora-sweep) {
+  --hover-tilt-custom-gradient: conic-gradient(
+          from calc(var(--hover-tilt-angle, 0)) at center center,
+          rgba(255, 255, 255, calc(var(--hover-tilt-glare-intensity, 1) * 0.9)),
+          rgba(6, 182, 212, calc(var(--hover-tilt-glare-intensity, 1) * 0.7)),
+          rgba(255, 255, 255, calc(var(--hover-tilt-glare-intensity, 1) * 0.9))
+  );
+}
+
+/* Luminance Beam */
+:global(.luminance-beam) {
+  --hover-tilt-custom-gradient: linear-gradient(
+          120deg,
+          rgb(0 0 0 / 0) calc((var(--gradient-x, 50%) / 2 + var(--gradient-y, 50%) / 2) - 60%),
+          rgb(249 218 173 / var(--hover-tilt-glare-intensity, 1)) calc((var(--gradient-x, 50%) / 2 + var(--gradient-y, 50%) / 2)),
+          rgb(0 0 0 / 0) calc((var(--gradient-x, 50%) / 2 + var(--gradient-y, 50%) / 2) + 60%)
+  );
+}
+
+/* Inverted Gradient */
+:global(.inverted-gradient) {
+  --hover-tilt-custom-gradient: radial-gradient(
+          200% 200% at calc( var(--gradient-x, 50%) * 2 - 50% ) calc( var(--gradient-y, 50%) * 2 - 50% ),
+          transparent 30%,
+          rgb(255 255 255 / var(--hover-tilt-glare-intensity, 1)) 80%
+  );
 }

src/components/Card.vue

@@ -9,10 +9,6 @@ const borderRadiusStyle = computed(() => ({
   '--border-radius': store.formData['border-radius'] + 'px'
 }));
 
-watchEffect(() => {
-  console.log(tilt_store.tiltProps.shadow)
-});
-
 
 
 </script>
@@ -26,7 +22,7 @@ img {
 <template>
   <!-- 利用这个元素承载 style 穿透到hover-tilt 内 -->
   <div class="container" :style="borderRadiusStyle">
-    <hover-tilt v-bind="tilt_store.tiltProps" class="hover-tilt">
+    <hover-tilt v-bind="tilt_store.tiltProps" class="hover-tilt specular-highlight">
       <img :src="store.formData.image?.src ?? 'https://images.pokemontcg.io/swsh4/25_hires.png'" :style="store.imageStyle" />
     </hover-tilt>
   </div>

src/const/editor.ts

@@ -25,9 +25,18 @@ const editorConfig = [
 			step: 10
 		}
 	},
+	{
+		label: "padding",
+		value: 10,
+		params: {
+			min: 0,
+			step: 1,
+			max: 100
+		}
+	},
 	{
 		label: "background-color",
-		value: "#fff",
+		value: "#fffffff0",
 		params: {}
 	}
 ].map((i, index) => ({ ...i, id: index }));

src/const/hoverTilt.ts

@@ -28,6 +28,24 @@ export const hoverTiltConfig = [
 	},
 	//TODO:springOptions @see https://hover-tilt.simey.me/options/props/#springoptions
 	//TODO:tiltSpringOptions  @see https://hover-tilt.simey.me/options/props/#tiltspringoptions
+	{
+		label: "stiffness",
+		value: 0.7,
+		params: {
+			min: 0,
+			max: 1,
+			step: 0.01
+		}
+	},
+	{
+		label: "damping",
+		value: 0.7,
+		params: {
+			min: 0,
+			max: 1,
+			step: 0.01
+		}
+	},
 	{
 		label: "enter-delay",
 		value: 0,
@@ -48,8 +66,8 @@ export const hoverTiltConfig = [
 	},
 
 	{
-		label: "shadow2",
+		label: "shadow",
-		value: true,
+		value: false,
 		params: {
 		}
 	},

src/stores/editor.ts

@@ -3,7 +3,7 @@ import { reactive, computed } from 'vue'
 import { EditorFolder } from '@/const/editor'
 
 // 定义哪些属性需要添加 px 单位
-const PX_PROPERTIES = ['width', 'border-radius']
+const PX_PROPERTIES = ['width', 'border-radius', 'padding']
 const TILT_PROPERTIES = ["border-radius"]
 
 export const useEditorStore = defineStore('editor', () => {
@@ -12,10 +12,20 @@ export const useEditorStore = defineStore('editor', () => {
 
   // 初始化表单数据
   function initializeFormData() {
+    let spring = { stiffness: 0.6, damping: 0.7 };
     EditorFolder.children.forEach((item: any) => {
       if (!(item.label in formData)) {
-        formData[item.label] = item.value
+        if (item.label == 'stiffness'){
+          spring.stiffness = item.value
+        }else if (item.label == 'damping'){
+          spring.damping = item.value
+        }else {
+          formData[item.label] = item.value
+        }
       }
+
+      formData['spring-options'] = JSON.stringify(spring)
+      formData['tilt-spring-options'] = JSON.stringify(spring)
     })
   }
 

src/stores/hoverTilt.ts

@@ -1,37 +1,45 @@
-import { defineStore } from 'pinia'
+import {defineStore} from 'pinia'
-import { reactive, computed } from 'vue'
+import {reactive, computed} from 'vue'
-import { TiltFolder } from '@/const/hoverTilt'
+import {TiltFolder} from '@/const/hoverTilt'
 
 export const useHoverTiltStore = defineStore('hoverTilt', () => {
-  // 存储 hover-tilt 配置数据
+    // 存储 hover-tilt 配置数据
-  const formData = reactive<Record<string, any>>({})
+    const formData = reactive<Record<string, any>>({})
 
-  // 初始化表单数据
+    // 初始化表单数据
-  function initializeFormData() {
+    function initializeFormData() {
-    TiltFolder.children.forEach((item: any) => {
+        TiltFolder.children.forEach((item: any) => {
-      if (!(item.label in formData)) {
+            if (!(item.label in formData)) {
-        formData[item.label] = item.value
+                formData[item.label] = item.value
-      }
+            }
+        })
+    }
+
+    // 获取转换后的 props 对象，将驼峰命名转换为连字符命名
+    const tiltProps = computed(() => {
+        const props: Record<string, any> = {}
+        let spring = {stiffness: 0.6, damping: 0.7};
+        Object.entries(formData).forEach(([key, value]) => {
+            if (key == 'stiffness') {
+                spring.stiffness = value
+            } else if (key == 'damping') {
+                spring.damping = value
+            } else if (value !== false) {
+                props[key] = value;
+            }
+        })
+
+        props['spring-options'] = JSON.stringify(spring)
+        props['tilt-spring-options'] = JSON.stringify(spring)
+        return props
     })
-  }
 
-  // 获取转换后的 props 对象，将驼峰命名转换为连字符命名
+    return {
-  const tiltProps = computed(() => {
+        formData,
-    const props: Record<string, any> = {}
+        tiltProps,
-    Object.entries(formData).forEach(([key, value]) => {
+        initializeFormData,
-      if (value !== undefined && value !== false) {
-        props[key] = value
-      }
-    })
-    return props
-  })
 
-  return {
+    }
-    formData,
-    tiltProps,
-    initializeFormData,
-
-  }
 }, {
-  persist: false
+    persist: false
 })