修复工作区中标签页无法删除的bug

Author: fanchencloud

src/common.js

@@ -1,3 +1,5 @@
+import localforage from "localforage";
+
 export const TabItem = function () {
     this.id = "";
     this.title = "";
@@ -27,3 +29,30 @@ export const getQueryVariable = (variable) => {
     }
     return ''
 }
+
+/**
+ * 保存数据
+ * @param key 键
+ * @param data 值
+ * @param serialization 是否序列化
+ */
+export const saveData = async (key, data, serialization = true) => {
+    console.debug("saveData key:" , key + " data:" , data)
+    if (serialization) {
+        data = JSON.stringify(data)
+    }
+    await localforage.setItem(key, data)
+}
+
+export const getData = (key, serialization = true) => {
+    return new Promise((resolve, reject) => {
+        localforage.getItem(key).then((data) => {
+            if (serialization) {
+                data = JSON.parse(data)
+            }
+            resolve(data)
+        }).catch((err) => {
+            reject(err)
+        })
+    })
+}

src/views/Main.vue

@@ -91,7 +91,7 @@
 
 <script setup>
 import {ref, onMounted} from 'vue'
-import {TabItem, WorkSpaceItem} from "../common.js";
+import {getData, saveData, TabItem, WorkSpaceItem} from "../common.js";
 import {ElNotification} from "element-plus";
 import localforage from "localforage";
 
@@ -116,7 +116,7 @@ const createWorkSpace = async () => {
   workSpaceItem.workSpaceName = workspaceName.value
   workSpaceItem.fid = new Date().getTime()
   workSpaceItem.saveDataTime = new Date().toLocaleString()
-  const res = await localforage.setItem(workSpaceItem.fid, workSpaceItem)
+  await saveData(workSpaceItem.fid, workSpaceItem)
   // 清空工作区名称
   workspaceName.value = ''
   // 刷新工作区列表
@@ -133,7 +133,7 @@ const loadWorkSpaces = async () => {
   const sortedObjKeys = res.sort();
   for (let index in sortedObjKeys) {
     const fid = sortedObjKeys[index]
-    const workSpaceItem = await localforage.getItem(fid)
+    const workSpaceItem = await getData(fid)
     workSpaceList.value.push(workSpaceItem)
   }
 }
@@ -176,7 +176,7 @@ const closeAllTabFun = () => {
  */
 const savePages = async (fid) => {
   // 查询当前工作区
-  const workspaceItem = await localforage.getItem(fid)
+  const workspaceItem = await getData(fid)
   if (workspaceItem === null) {
     ElNotification({
       message: '工作区不存在',
@@ -199,7 +199,7 @@ const savePages = async (fid) => {
       workspaceItem.spaceTabs.push(tabItem)
     })
     // 保存工作区
-    const res = await localforage.setItem(workspaceItem.fid, workspaceItem)
+    await saveData(workspaceItem.fid, workspaceItem)
     ElNotification({
       message: '保存成功',
       type: 'success',
@@ -215,7 +215,7 @@ const savePages = async (fid) => {
  */
 const handoff = async (fid) => {
   // 查询当前工作区
-  const workspaceItem = await localforage.getItem(fid)
+  const workspaceItem = await getData(fid)
   if (workspaceItem === null) {
     ElNotification({
       message: '工作区不存在',
@@ -263,7 +263,7 @@ const openWorkspace = () => {
  */
 const deleteWorkspace = async (fid) => {
   // 查询当前工作区
-  const workspaceItem = await localforage.getItem(fid)
+  const workspaceItem = await getData(fid)
   if (workspaceItem === null) {
     ElNotification({
       message: '工作区不存在',

src/views/workspaceManager.vue

@@ -66,7 +66,7 @@
 
 <script setup>
 import {onMounted, ref} from "vue";
-import {getQueryVariable} from "../common.js";
+import {getData, getQueryVariable, saveData} from "../common.js";
 import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 import {ElNotification} from "element-plus";
 import localforage from "localforage";
@@ -93,7 +93,7 @@ onMounted(async () => {
 
 const loadPageData = async () => {
   // 从数据库中获取工作区信息
-  const item = await localforage.getItem(fid.value)
+  const item = await getData(fid.value)
   if (item === null) {
     ElNotification({
       message: '工作区不存在',
@@ -118,7 +118,7 @@ const view = (pageUrl) => {
   );
 }
 
-const deletePage = (pageId) => {
+const deletePage = async (pageId) => {
   // 遍历工作区中的页面，删除id为pageId的页面
   for (let i = 0; i < workspaceItem.value.spaceTabs.length; i++) {
     const pageItem = workspaceItem.value.spaceTabs[i];
@@ -127,8 +127,9 @@ const deletePage = (pageId) => {
       break
     }
   }
-  // 更新数据库中的工作区信息
-  localforage.setItem(fid.value, workspaceItem.value).then(() => {
+  console.debug(workspaceItem.value)
+  // 更新本地存储
+  saveData(fid.value, workspaceItem.value).then(() => {
     ElNotification({
       message: '删除成功',
       type: 'success',