feat: 圆角

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">
+  <!-- 利用这个元素承载 style 穿透到hover-tilt 内 -->
-    <img src="https://images.pokemontcg.io/swsh4/25_hires.png" :style="store.imageStyle" />
+  <div class="container" :style="borderRadiusStyle">
-  </hover-tilt>
+    <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>

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', () => {
   // 存储表单数据