支持水印排列

御魂2,4,6属性简称
修正截图大小
式神,御魂信息更新

src/App.vue

@@ -1,16 +1,25 @@
 <script setup>
 import Yys from './components/Yys.vue'
-import Watermark from './components/Watermark.vue' // 引入 Watermark 组件
 import Toolbar from './components/Toolbar.vue'
+import {ref} from "vue";
 
+const yysRef = ref(null);
+
+const onHandleInport = (file) => {
+  yysRef.value.importGroups(file);
+};
+
+const onHandleExport = () => {
+  yysRef.value.exportGroups();
+};
 </script>
 
 <template>
   <main id="main-container">
     <!-- 添加工具栏 -->
-    <Toolbar title="我的应用" username="示例用户" data-html2canvas-ignore="true"/>
+    <Toolbar title="yys-editor" username="示例用户" data-html2canvas-ignore="true" @handleExport="onHandleExport" @handleImport="onHandleInport"/>
     <!-- 添加 Watermark 组件 -->
-    <Yys/>
+    <Yys ref="yysRef"/>
 
   </main>
 </template>
@@ -20,9 +29,11 @@ import Toolbar from './components/Toolbar.vue'
 #main-container {
   margin-top: 48px; /* 与工具栏高度相同 */
   position: relative;
-  width: 100%;
+
   min-height: 100vh; /* 允许容器扩展 */
-//position: relative;
+  display: inline-block;
+  max-width: 100%;
+
 }
 
 /* 如果 Yys 组件需要特定的高度或布局，可以根据需要调整 */