1。根据pinia调整toolbar和projecExplorer 2.删除按钮增加确认，禁止删除最后一个元素

src/components/ProjectExplorer.vue

@@ -10,6 +10,9 @@
 
 <script setup lang="ts">
 import { defineProps, defineEmits } from 'vue';
+import { useFilesStore } from "@/stores/files";
+
+const filesStore = useFilesStore();
 
 const props = defineProps({
   allFiles: {
@@ -18,7 +21,6 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['file-selected']);
 
 const defaultProps = {
   children: 'children',
@@ -26,7 +28,8 @@ const defaultProps = {
 };
 
 const handleNodeClick = (data) => {
-  emit('file-selected', data.name);
+  filesStore.setActiveFile(data.name);
+  filesStore.setVisible(data.name, true);
 };
 </script>
 

src/components/Toolbar.vue

@@ -78,14 +78,17 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import {ref, reactive} from 'vue';
 import html2canvas from "html2canvas";
 import {useI18n} from 'vue-i18n';
+import updateLogs from "../data/updateLog.json"
+import {useFilesStore} from "@/stores/files";
+
+const filesStore = useFilesStore();
 
 // 获取当前的 i18n 实例
 const {t} = useI18n();
-const emit = defineEmits(['handleExport', 'handleImport']);
 
 // 定义响应式数据
 const state = reactive({
@@ -96,26 +99,6 @@ const state = reactive({
   showFeedbackFormDialog: false, // 控制反馈表单对话框的显示状态
 });
 
-// 版本记录数据
-const updateLogs = [
-  {
-    version: '2.0.0',
-    date: '2025-03-16',
-    changes: [
-      '修复了相同式神不能正确设置属性的问题',
-      '支持了多文件编辑',
-      'PS:当前导出截图宽度无法'
-    ]
-  },
-  {
-    version: '1.0.0',
-    date: '2025-03-09',
-    changes: [
-      '首次发布'
-    ]
-  },
-
-];
 
 const showUpdateLog = () => {
   state.showUpdateLogDialog = !state.showUpdateLogDialog;
@@ -126,7 +109,14 @@ const showFeedbackForm = () => {
 };
 
 const handleExport = () => {
-  emit('handleExport');
+  const dataStr = JSON.stringify(filesStore.fileList, null, 2);
+  const blob = new Blob([dataStr], { type: 'application/json;charset=utf-8' });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = 'files.json';
+  link.click();
+  URL.revokeObjectURL(url);
 };
 
 const handleImport = () => {
@@ -135,7 +125,30 @@ const handleImport = () => {
   input.accept = '.json';
   input.onchange = (e) => {
     const file = e.target.files[0];
-    if (file) emit('handleImport', file);
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        try {
+          const data = JSON.parse(e.target.result as string);
+          if (data[0].visible === true) {
+            // 新版本格式：直接替换 fileList
+            filesStore.$patch({ fileList: data });
+          } else  {
+            // 旧版本格式：仅包含 groups 数组
+            const newFile = {
+              label: `File ${filesStore.fileList.length + 1}`,
+              name: String(filesStore.fileList.length + 1),
+              visible: true,
+              groups: data
+            };
+            filesStore.addFile(newFile);
+          }
+        } catch (error) {
+          console.error('Failed to import file', error);
+        }
+      };
+      reader.readAsText(file);
+    }
   };
   input.click();
 };

src/components/Yys.vue

@@ -119,6 +119,7 @@ import '@vueup/vue-quill/dist/vue-quill.snow.css' // 引入样式文件
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import shikigamiData from '../data/Shikigami.json';
 import _ from 'lodash';
+import {Action, ElMessage, ElMessageBox} from "element-plus";
 
 const props = defineProps<{
   groups: any[];
@@ -215,11 +216,57 @@ const updateProperty = (property) => {
 };
 
 const removeGroupElement = (groupIndex, positionIndex) => {
-  props.groups[groupIndex].groupInfo.splice(positionIndex, 1);
+  const group = props.groups[groupIndex];
+
+  if (group.groupInfo.length === 1) {
+    ElMessageBox.alert('无法删除', '提示', {
+      confirmButtonText: '确定',
+    });
+    return;
+  }
+
+  ElMessageBox.confirm('确定要删除此元素吗?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    group.groupInfo.splice(positionIndex, 1);
+    ElMessage({
+      type: 'success',
+      message: '删除成功!',
+    });
+  }).catch(() => {
+    ElMessage({
+      type: 'info',
+      message: '已取消删除',
+    });
+  });
 };
 
 const removeGroup = (groupIndex) => {
-  props.groups.splice(groupIndex, 1);
+  if (props.groups.length === 1) {
+    ElMessageBox.alert('无法删除最后一个队伍', '提示', {
+      confirmButtonText: '确定',
+    });
+    return;
+  }
+
+  ElMessageBox.confirm('确定要删除此组吗?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    props.groups.splice(groupIndex, 1);
+    ElMessage({
+      type: 'success',
+      message: '删除成功!',
+    });
+  }).catch(() => {
+    ElMessage({
+      type: 'info',
+      message: '已取消删除',
+    });
+  });
 };
 
 const addGroup = () => {
@@ -392,7 +439,8 @@ defineExpose({
 
   .opt-btn {
     position: absolute;
-    top: -10px;
+    top: 0px;
+    z-index: 10;
     opacity: 0;
   }
 }