feat(Main): 优化工作区创建和增加数据导入导出功能

- 移除不必要的页面组件
- 重构工作区创建逻辑，增加表单验证
- 添加工作区数据导入导出功能
- 优化工作区列表显示和操作
- 调整页面样式和布局

Author: fanchencloud

manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "TabManager",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "chrome和QQ浏览器有个好用的功能,就是当你直接关闭浏览器时,如果当时打开了多个tab,在你再次打开浏览器时,可以在历史记录(最近关闭的标签)一次恢复他们.但是如果你忘记了恢复,并且开了一些网页并关闭过,再想恢复时,发现找不到了...",
   "icons": {
     "16": "src/assets/images/tab.png",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tabmanager",
   "private": true,
-  "version": "0.0.1",
+  "version": "1.0.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {computed, onMounted, ref} from "vue";
+import {computed, ref} from "vue";
 import {routes} from "./router.js";
 import NotFound from "./pages/NotFound.vue";
 

src/common.js

@@ -1,33 +1,33 @@
 import localforage from "localforage";
 
 export const TabItem = function () {
-    this.id = "";
-    this.title = "";
-    this.url = "";
+  this.id = "";
+  this.title = "";
+  this.url = "";
 }
 
 export var WorkSpaceItem = function () {
-    this.fid = "";            // 主键ID
-    this.workSpaceName = "";  // 工作区名称
-    this.saveDataTime = "";   // 保存时间
-    this.spaceTabs = [];      // 工作区中的页面
+  this.fid = "";            // 主键ID
+  this.workSpaceName = "";  // 工作区名称
+  this.saveDataTime = "";   // 保存时间
+  this.spaceTabs = [];      // 工作区中的页面
 }
 /**
  * 地址让获取参数
  * @param variable 地址栏参数名称
  * @returns {string|boolean} 参数数据
  */
 export const getQueryVariable = (variable) => {
-    const hashUrl = window.location.hash
-    const query = hashUrl.split('?')[1]
-    const vars = query.split('&')
-    for (const element of vars) {
-        const pair = element.split('=')
-        if (pair[0] === variable) {
-            return pair[1]
-        }
+  const hashUrl = window.location.hash
+  const query = hashUrl.split('?')[1]
+  const vars = query.split('&')
+  for (const element of vars) {
+    const pair = element.split('=')
+    if (pair[0] === variable) {
+      return pair[1]
     }
-    return ''
+  }
+  return ''
 }
 
 /**
@@ -37,22 +37,54 @@ export const getQueryVariable = (variable) => {
  * @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)
+  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)
-        })
+  return new Promise((resolve, reject) => {
+    localforage.getItem(key).then((data) => {
+      if (serialization) {
+        data = JSON.parse(data)
+      }
+      resolve(data)
+    }).catch((err) => {
+      reject(err)
     })
-}
+  })
+}
+
+/**
+ * 合并数据（将本地的数据合并到上传的数据中）
+ * @param data1 需要合并的数据（上传的）
+ * @param data2 需要合并的数据（本地的）
+ * @returns {*[]}
+ */
+export const mergeData = (data1, data2) => {
+  const mergedData = [...data1];
+  data2.forEach(newItem => {
+    const existingItemIndex = mergedData.findIndex(item => item.fid === newItem.fid);
+    if (existingItemIndex === -1) {
+      // 如果新数据的fid不存在，则添加新的工作空间
+      mergedData.push(newItem);
+    } else {
+      // 如果fid已经存在，合并spaceTabs
+      const existingItem = mergedData[existingItemIndex];
+      newItem.spaceTabs.forEach(newTab => {
+        // 判断是否存在相同title和url的tab
+        const existingTabIndex = existingItem.spaceTabs.findIndex(tab => tab.title === newTab.title && tab.url === newTab.url);
+        if (existingTabIndex === -1) {
+          // 如果tab不存在，添加新的tab
+          existingItem.spaceTabs.push(newTab);
+        } else {
+          // 如果tab已经存在，可以选择合并字段或者跳过
+          console.log(`Tab 已存在：${newTab.title} - ${newTab.url}`);
+        }
+      });
+    }
+  });
+  return mergedData;
+}

src/pages/NotFound.vue

@@ -3,7 +3,7 @@
 </script>
 
 <template>
-<h1>404</h1>
+  <h1>404</h1>
 </template>
 
 <style scoped>

src/pages/haha.vue

@@ -1,11 +1,7 @@
-import Test from "./pages/test.vue";
-import Haha from "./pages/haha.vue";
 import Main from "./views/Main.vue";
 import WorkspaceManager from "./views/workspaceManager.vue";
 
 export const routes = {
-    "/": Main,
-    "/workspaceManager": WorkspaceManager,
-    "/test": Test,
-    "/haha": Haha,
+  "/": Main,
+  "/workspaceManager": WorkspaceManager,
 }