添加跟换图片功能

package.json

@@ -12,6 +12,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@kitschpatrol/tweakpane-plugin-image": "^2.0.1-beta.8",
     "@tweakpane/plugin-essentials": "^0.2.1",
     "hover-tilt": "^1.0.0",
     "lodash-es": "^4.17.23",

src/App.vue

@@ -30,7 +30,7 @@ import Editor from './components/Editor.vue';
   }
 
   .editor-zone {
-    width: 350px;
+    width: 600px;
     overflow-y: auto;
   }
 }

src/components/Card.vue

@@ -19,7 +19,7 @@ img {
   <!-- 利用这个元素承载 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" />
+      <img :src="store.formData.image.src" :style="store.imageStyle" />
     </hover-tilt>
   </div>
 </template>

src/components/Editor.vue

@@ -5,6 +5,7 @@ import { useEditorStore } from "@/stores/editor"
 import { onMounted, ref } from 'vue'
 import { Pane } from 'tweakpane'
 import { useHoverTiltStore } from "@/stores/hoverTilt"
+import * as ImagePlugin from '@kitschpatrol/tweakpane-plugin-image';
 const editorStore = useEditorStore()
 const hoverTiltStore = useHoverTiltStore()
 
@@ -16,6 +17,7 @@ function createPane(container: HTMLDivElement) {
 	// 清理旧的 pane
 
 	const pane = new Pane({ container })
+  pane.registerPlugin(ImagePlugin);
 	const editorFolderInstance = pane.addFolder({
 		title: EditorFolder.label,
 		expanded: true

src/const/editor.ts

@@ -1,4 +1,12 @@
 const editorConfig = [
+	{
+		label: "image",
+		value: '',
+		params: {
+			view: 'input-image',
+			label: 'Preview',
+		}
+	},
 	{
 		label: "border-radius",
 		value: 10,