调整字体栏编辑效果，增加LocalStorage缓存

src/components/Yys.vue

@@ -36,7 +36,7 @@
                 <el-button type="danger" icon="Delete" circle @click="removeGroup(groupIndex)"></el-button>
               </div>
             </div>
-            <QuillEditor ref="shortDescriptionEditor" contentType="html" theme="snow" :toolbar="toolbarOptions"/>
+            <QuillEditor ref="shortDescriptionEditor" v-model:content="group.shortDescription" contentType="html" theme="snow" :toolbar="toolbarOptions"/>
           </div>
           <div class="group-body">
             <draggable :list="group.groupInfo" item-key="name" class="body-content">
@@ -180,20 +180,20 @@ registerSizes()
 
 // 工具栏配置
 const toolbarOptions = ref([
+  [{ font: ['SimSun', 'SimHei', 'KaiTi', 'FangSong', 'Microsoft YaHei', 'PingFang SC'] }],
+  [{ header: 1 }, { header: 2 }],
+  [{ size: ['12px', '14px', '16px', '18px', '21px', '29px', '32px', '34px'] }],
   ['bold', 'italic', 'underline', 'strike'],
+  [{ color: [] }, { background: [] }],
   // ['blockquote', 'code-block'],
-  [{ header: 1 }, { header: 2 }],
-  [{ list: 'ordered' }, { list: 'bullet' }, {'list': 'check'}],
-  [{ script: 'sub' }, { script: 'super' }],
+  [ { list: 'bullet' }, { list: 'ordered' }, {'list': 'check'}],
+
   [{ indent: '-1' }, { indent: '+1' }],
+  [{ align: [] }],
   [{ direction: 'rtl' }],
-  [{ color: [] }, { background: [] }],
   // [{ header: [1, 2, 3, 4, 5, 6, false] }],
-  [{ size: ['12px', '14px', '16px', '18px', '21px', '29px', '32px', '34px'] }],
-  [{ font: ['SimSun', 'SimHei', 'KaiTi', 'FangSong', 'Microsoft YaHei', 'PingFang SC'] }],
-  [{ align: [] }],
   // ['link', 'image', 'video'],
-  ['clean']
+  // ['clean']
 ] as const)
 
 // 定义方法

src/main.js

@@ -16,6 +16,7 @@ import zh from './locales/zh.json'
 import ja from './locales/ja.json'
 
 import { createPinia } from 'pinia' // 导入 Pinia
+import {useFilesStore} from "@/ts/files";
 
 const app = createApp(App)
 
@@ -59,4 +60,8 @@ app.use(pinia) // 使用 Pinia
     .use(i18n)
     .use(ElementPlus)
     .use(Vue3DraggableResizable)
-    .mount('#app')
+    .mount('#app')
+
+const filesStore = useFilesStore();
+filesStore.setupAutoSave();
+filesStore.initializeWithPrompt();

src/ts/files.ts

@@ -3,6 +3,19 @@ import {ElMessageBox} from "element-plus";
 import {useGlobalMessage} from "./useGlobalMessage";
 
 const { showMessage } = useGlobalMessage();
+
+function saveStateToLocalStorage(state) {
+    localStorage.setItem('filesStore', JSON.stringify(state));
+}
+
+function clearLocalStorage() {
+    localStorage.clear()
+}
+
+function loadStateFromLocalStorage() {
+    return JSON.parse(localStorage.getItem('filesStore'));
+}
+
 export const useFilesStore = defineStore('files', {
     state: () => ({
         fileList: [
@@ -194,6 +207,32 @@ export const useFilesStore = defineStore('files', {
         visibleFiles: (state) => state.fileList.filter(file => file.visible),
     },
     actions: {
+        initializeWithPrompt() {
+            const savedState = loadStateFromLocalStorage();
+            if (savedState) {
+                ElMessageBox.confirm(
+                    '检测到有未保存的旧数据，是否恢复？',
+                    '提示',
+                    {
+                        confirmButtonText: '恢复',
+                        cancelButtonText: '不恢复',
+                        type: 'warning',
+                    }
+                ).then(() => {
+                    this.fileList = savedState.fileList || [];
+                    this.activeFile = savedState.activeFile || "1";
+                    showMessage('success', '数据已恢复');
+                }).catch(() => {
+                    clearLocalStorage();
+                    showMessage('info', '选择了不恢复旧数据');
+                });
+            }
+        },
+        setupAutoSave() {
+            setInterval(() => {
+                saveStateToLocalStorage(this.$state);
+            }, 30000); // 设置间隔时间为30秒
+        },
         addFile(file) {
             this.fileList.push({...file, visible: true});
             this.activeFile = file.name;