From 7eb59e5f29a4a1e90fd6b661e6d0db1b470810b0 Mon Sep 17 00:00:00 2001
From: aoshisen <aoshisen.23@gmail.com>
Date: Thu, 29 Jan 2026 22:35:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9C=86=E8=A7=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Card.vue | 26 +++++++++++++++++++++++---
 src/stores/editor.ts    |  1 +
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/components/Card.vue b/src/components/Card.vue
index 0afabbe..efdd17e 100644
--- a/src/components/Card.vue
+++ b/src/components/Card.vue
@@ -1,8 +1,12 @@
 <script setup lang="ts">
 import { useEditorStore } from '@/stores/editor';
 import { useHoverTiltStore } from '@/stores/hoverTilt';
+import { computed } from 'vue';
 const store = useEditorStore();
 const tilt_store = useHoverTiltStore();
+const borderRadiusStyle = computed(() => ({
+  '--border-radius': store.formData['border-radius'] + 'px'
+}));
 </script>
 
 <style scoped>
@@ -12,7 +16,23 @@ img {
 }
 </style>
 <template>
-  <hover-tilt v-bind="tilt_store.tiltProps">
-    <img src="https://images.pokemontcg.io/swsh4/25_hires.png" :style="store.imageStyle" />
-  </hover-tilt>
+  <!-- 利用这个元素承载 style 穿透到hover-tilt 内 -->
+  <div class="container" :style="borderRadiusStyle">
+    <hover-tilt v-bind="tilt_store.tiltProps" class="hover-tilt">
+      <img src="https://images.pokemontcg.io/swsh4/25_hires.png" :style="store.imageStyle" />
+    </hover-tilt>
+  </div>
 </template>
+
+<style lang="scss" scoped>
+.container {
+  .hover-tilt {
+    &::part(tilt) {
+      &::before {
+        border-radius: var(--border-radius, 0px);
+        overflow: hidden;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/stores/editor.ts b/src/stores/editor.ts
index ccc9aa5..b25182d 100644
--- a/src/stores/editor.ts
+++ b/src/stores/editor.ts
@@ -4,6 +4,7 @@ import { EditorFolder } from '@/const/editor'
 
 // 定义哪些属性需要添加 px 单位
 const PX_PROPERTIES = ['width', 'border-radius']
+const TILT_PROPERTIES = ["border-radius"]
 
 export const useEditorStore = defineStore('editor', () => {
   // 存储表单数据