多文件功能优化，部分样式调整

src/components/ProjectExplorer.vue

@@ -4,13 +4,38 @@
         :data="allFiles"
         :props="defaultProps"
         @node-click="handleNodeClick"
-    />
+        node-key="name"
+        default-expand-all
+        :expand-on-click-node="false"
+    >
+      <template #default="{ node, data }">
+        <div class="custom-tree-node">
+          <span>{{ node.label }}</span>
+          <div>
+            <el-dropdown>
+              <el-button
+                  style="margin-left: 4px"
+                  icon="MoreFilled"
+                  link
+              />
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item @click="() => renameFile(data)">Rename</el-dropdown-item>
+                  <el-dropdown-item @click="() => deleteFile(data)">Delete</el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </div>
+        </div>
+      </template>
+    </el-tree>
   </div>
 </template>
 
 <script setup lang="ts">
-import { defineProps, defineEmits } from 'vue';
-import { useFilesStore } from "@/stores/files";
+import {defineProps, defineEmits, ref} from 'vue';
+import {useFilesStore} from "@/ts/files";
+import {ElTree, ElButton, ElDropdownMenu, ElDropdownItem} from 'element-plus';
 
 const filesStore = useFilesStore();
 
@@ -21,21 +46,61 @@ const props = defineProps({
   },
 });
 
-
 const defaultProps = {
   children: 'children',
   label: 'label',
 };
 
+const visibleDropdown = ref(false);
+const dropdownLeft = ref(0);
+const dropdownTop = ref(0);
+const selectedData = ref(null);
+
 const handleNodeClick = (data) => {
   filesStore.setActiveFile(data.name);
   filesStore.setVisible(data.name, true);
 };
+
+const showOptions = (node, data) => {
+  visibleDropdown.value = true;
+  dropdownLeft.value = node.$el.offsetLeft + 20;
+  dropdownTop.value = node.$el.offsetTop + 20;
+  selectedData.value = data;
+};
+
+const hideDropdown = () => {
+  visibleDropdown.value = false;
+};
+
+document.addEventListener('click', hideDropdown);
+
+const deleteFile = (data) => {
+  filesStore.deleteFile(data.name);
+  hideDropdown();
+};
+
+const renameFile = (data) => {
+  const newName = prompt("Enter new name:", data.label);
+  if (newName && newName !== data.label) {
+    filesStore.renameFile(data.name, newName);
+  }
+  hideDropdown();
+};
 </script>
 
 <style scoped>
 .project-explorer {
   height: 50%; /* 占据侧边栏的一半 */
+  min-height: 400px;
   overflow-y: auto; /* 允许内容滚动 */
 }
+
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
+}
 </style>

src/components/Toolbar.vue

@@ -83,7 +83,7 @@ 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";
+import {useFilesStore} from "@/ts/files";
 
 const filesStore = useFilesStore();
 

src/components/Yys.vue

@@ -122,7 +122,7 @@ import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import shikigamiData from '../data/Shikigami.json';
 import _ from 'lodash';
 import {Action, ElMessage, ElMessageBox} from "element-plus";
-
+import { useGlobalMessage } from '../ts/useGlobalMessage'; // 引入全局消息通知工具
 const props = defineProps<{
   groups: any[];
 }>();
@@ -141,6 +141,7 @@ const state = reactive({
 
 const clipboard = ref('');
 
+const { showMessage } = useGlobalMessage();
 
 // 获取当前的 i18n 实例
 const {t} = useI18n()
@@ -217,60 +218,45 @@ const updateProperty = (property) => {
   props.groups[state.groupIndex].groupInfo[state.positionIndex].properties = _.cloneDeep(property);
 };
 
-const removeGroupElement = (groupIndex, positionIndex) => {
+const removeGroupElement = async (groupIndex: number, positionIndex: number) => {
   const group = props.groups[groupIndex];
 
   if (group.groupInfo.length === 1) {
-    ElMessageBox.alert('无法删除', '提示', {
-      confirmButtonText: '确定',
-    });
+    showMessage('warning', '无法删除');
     return;
   }
 
-  ElMessageBox.confirm('确定要删除此元素吗?', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  }).then(() => {
+  try {
+    await ElMessageBox.confirm('确定要删除此元素吗?', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    });
     group.groupInfo.splice(positionIndex, 1);
-    ElMessage({
-      type: 'success',
-      message: '删除成功!',
-    });
-  }).catch(() => {
-    ElMessage({
-      type: 'info',
-      message: '已取消删除',
-    });
-  });
+    showMessage('success', '删除成功!');
+  } catch (error) {
+    showMessage('info', '已取消删除');
+  }
 };
 
-const removeGroup = (groupIndex) => {
+const removeGroup = async (groupIndex: number) => {
   if (props.groups.length === 1) {
-    ElMessageBox.alert('无法删除最后一个队伍', '提示', {
-      confirmButtonText: '确定',
-    });
+    showMessage('warning', '无法删除最后一个队伍');
     return;
   }
 
-  ElMessageBox.confirm('确定要删除此组吗?', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  }).then(() => {
+  try {
+    await ElMessageBox.confirm('确定要删除此组吗?', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    });
     props.groups.splice(groupIndex, 1);
-    ElMessage({
-      type: 'success',
-      message: '删除成功!',
-    });
-  }).catch(() => {
-    ElMessage({
-      type: 'info',
-      message: '已取消删除',
-    });
-  });
+    showMessage('success', '删除成功!');
+  } catch (error) {
+    showMessage('info', '已取消删除');
+  }
 };
-
 const addGroup = () => {
   props.groups.push({
     shortDescription: '',