refactor: 增加单个暂停调试

田强
1 parent dd730420
Showing 1 changed file with 53 additions and 48 deletions
src/devtool/App.vue
--- a/src/devtool/App.vue
View file @83f07fa
+++ b/src/devtool/App.vue
View file @83f07fa
@@ -2,16 +2,26 @@
   <el-tabs>
     <el-tab-pane label="Debugger Apps">
       <div class="app-list">
-        <template v-for="(app, key) in QX_DEBUG_APPS" :key="key">
+        <template v-for="(app, key) in debuggerApps" :key="key">
           <div class="app-list-item">
             <div class="app-list-item__content">
-              <el-input placeholder="子应用名称" v-model="app.name"></el-input>
+              <el-input placeholder="子应用名称" v-model="app.name"> </el-input>
               <el-input placeholder="子应用地址" v-model="app.entry"></el-input>
             </div>
             <div class="app-list-item__btn">
+              <el-button
+                v-if="app.debugging"
+                type=""
+                @click="handleDebugging(key)"
+              >
+                <VideoPause style="width: 1em; height: 1em" />
+              </el-button>
+              <el-button v-else type="" @click="handleDebugging(key)">
+                <VideoPlay style="width: 1em; height: 1em" />
+              </el-button>
               <el-button type="" @click="deleteItem(key)">-</el-button>
               <el-button
-                v-if="key === QX_DEBUG_APPS.length - 1"
+                v-if="key === debuggerApps.length - 1"
                 type=""
                 @click="add"
                 >+</el-button
@@ -24,14 +34,9 @@
         <el-button @click="start(true)"
           ><Refresh style="width: 1em; height: 1em" />
         </el-button>
-        <el-button
-          v-if="DEVELOPER_MODE == 1 && filterDebuggerApps.length"
-          @click="end"
-        >
+        <el-button v-if="debuggerStatus" @click="end">
           <VideoPause style="width: 1em; height: 1em; margin-right: 8px" />
-          <el-tooltip content="关闭调试模式，会同步关闭开发者模式" placement="">
-            关闭调试
-          </el-tooltip>
+          结束调试
         </el-button>
         <el-button v-else @click="start"
           ><VideoPlay style="width: 1em; height: 1em; margin-right: 8px" />
@@ -44,49 +49,58 @@
 <script setup>
 import { reactive, ref, computed, watchEffect } from "vue";
+const defaultApps = [{ name: "", entry: "", debugging: false }];
 const { sessionStorage } =
   chrome.extension.getBackgroundPage().backgroundState || {};
-const defaultApps = [{ name: "", entry: "" }];
-
-const sessionDebuggerApps = JSON.parse(
-  sessionStorage.QX_DEBUG_APPS || JSON.stringify(defaultApps)
+const debuggerApps = ref(
+  JSON.parse(
+    window.localStorage.getItem("qx-debugger-apps") ||
+      JSON.stringify(defaultApps)
+  )
 );
-const QX_DEBUG_APPS = reactive(
-  sessionDebuggerApps.length ? sessionDebuggerApps : defaultApps
+const debuggerStatus = ref(
+  JSON.parse(window.localStorage.getItem("qx-debugger-status") || "false")
 );
 const filterDebuggerApps = computed(() =>
-  QX_DEBUG_APPS.filter((item) => item.name && item.entry)
+  debuggerApps.value.filter((app) => app.name && app.entry && app.debugging)
 );
-const DEVELOPER_MODE = ref(sessionStorage.DEVELOPER_MODE === "1");
+watchEffect(() => {
+  window.localStorage.setItem(
+    "qx-debugger-apps",
+    JSON.stringify(debuggerApps.value || defaultApps)
+  );
+
+  chrome.runtime.sendMessage({
+    type: "setSessionStorage",
+    key: "QX_DEBUG_APPS",
+    value: JSON.stringify(filterDebuggerApps.value),
+  });
+});
-console.log("sessionStorage", sessionStorage);
+
+const DEVELOPER_MODE = ref(sessionStorage.DEVELOPER_MODE === "1");
 function add() {
-  QX_DEBUG_APPS.push({ name: "", entry: "" });
+  debuggerApps.value.push(defaultApps[0]);
 }
 function deleteItem(index) {
-  QX_DEBUG_APPS.splice(index, 1);
-
-  if (index == 0 && !QX_DEBUG_APPS.length) {
-    QX_DEBUG_APPS.push({ name: "", entry: "" });
-  }
-}
+  debuggerApps.value.splice(index, 1);
-function validate(refresh) {
-  if (filterDebuggerApps.value.length || refresh) {
-    return true;
+  if (index == 0 && !debuggerApps.length) {
+    debuggerApps.value.push({ name: "", entry: "" });
   }
-
-  return false;
 }
-async function save() {
+async function start() {
+  chrome.runtime.sendMessage({ type: "reload" });
+  debuggerStatus.value = true;
+  window.localStorage.setItem("qx-debugger-status", "true");
   chrome.runtime.sendMessage({
     type: "setSessionStorage",
     key: "QX_DEBUG_APPS",
@@ -94,30 +108,21 @@ async function save() {
   });
 }
-async function start(refresh) {
-  if (validate(refresh)) {
-    DEVELOPER_MODE.value = "1";
-    save();
-    chrome.runtime.sendMessage({
-      type: "setSessionStorage",
-      key: "DEVELOPER_MODE",
-      value: "1",
-    });
-
-    chrome.runtime.sendMessage({ type: "reload" });
-  }
-}
-
 async function end() {
-  DEVELOPER_MODE.value = null;
+  debuggerStatus.value = false;
+  window.localStorage.setItem("qx-debugger-status", "false");
   chrome.runtime.sendMessage({
     type: "removeSessionStorage",
-    key: "DEVELOPER_MODE",
+    key: "QX_DEBUG_APPS",
   });
   chrome.runtime.sendMessage({ type: "reload" });
 }
+
+function handleDebugging(index) {
+  debuggerApps.value[index].debugging = !debuggerApps.value[index].debugging;
+}
 </script>
 <style>