Merge pull request #359 from jumpserver/pr@new_terminal@feat_console_stability

fix(chen): sync console input and theme

Author: Zxc4wonder

ui/chen/components/SqlEditor.client.vue

@@ -35,15 +35,17 @@ const emit = defineEmits<{
 const colorMode = useColorMode();
 const container = ref<HTMLElement | null>(null);
 const themeSlot = new Compartment();
+const syntaxThemeSlot = new Compartment();
 const editableSlot = new Compartment();
 const sqlLanguageSlot = new Compartment();
 let editor: EditorView | null = null;
+let themeObserver: MutationObserver | null = null;
 let applyingExternalValue = false;
 
 const editorExtensions: Extension[] = [
   basicSetup,
   sqlLanguageSlot.of(sql(chenSqlConfig(props.dbType, props.hints))),
-  createCodeMirrorSyntaxTheme(),
+  syntaxThemeSlot.of(createCodeMirrorSyntaxTheme()),
   EditorView.lineWrapping,
   EditorState.tabSize.of(2),
   Prec.highest(
@@ -111,6 +113,15 @@ function replaceDocument(value: string) {
   replaceChenSqlDocument(editor, value);
 }
 
+function refreshTheme() {
+  editor?.dispatch({
+    effects: [
+      themeSlot.reconfigure(createCodeMirrorTheme()),
+      syntaxThemeSlot.reconfigure(createCodeMirrorSyntaxTheme())
+    ]
+  });
+}
+
 onMounted(() => {
   if (!container.value) return;
   editor = new EditorView({
@@ -124,6 +135,11 @@ onMounted(() => {
       ]
     })
   });
+  themeObserver = new MutationObserver(refreshTheme);
+  themeObserver.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["class", "data-theme-preset", "style"]
+  });
 });
 
 watch(
@@ -150,15 +166,12 @@ watch(
   }
 );
 
-watch(
-  () => colorMode.value,
-  async () => {
-    await nextTick();
-    editor?.dispatch({ effects: themeSlot.reconfigure(createCodeMirrorTheme()) });
-  }
-);
+watch(() => colorMode.value, refreshTheme);
 
-onBeforeUnmount(() => editor?.destroy());
+onBeforeUnmount(() => {
+  themeObserver?.disconnect();
+  editor?.destroy();
+});
 
 defineExpose({
   focus,

ui/chen/composables/useChenQueryConsole.ts

@@ -217,32 +217,41 @@ export function useChenQueryConsole(
     }
   }
 
-  function runQueryTab(tab: ChenQueryConsoleTab, selectedSql = "") {
-    if (tab.state.loading || tab.state.inQuery) return;
-    const sql = selectedSql || tab.statement;
-    if (!sql.trim()) return;
-    dismissQueryMessage(tab);
-
+  function sendSql(tab: ChenQueryLikeWorkspaceTab, sql: string) {
     if (sql.length <= SQL_CHUNK_SIZE) {
-      sendConsoleAction(tab, "query_console_action", { action: "run_sql", data: sql });
-      return;
+      return sendConsoleAction(tab, "query_console_action", { action: "run_sql", data: sql }) !== false;
     }
 
     const total = Math.ceil(sql.length / SQL_CHUNK_SIZE);
     for (let index = 0; index < total; index += 1) {
-      sendConsoleAction(tab, "query_console_action", {
-        action: "run_sql_chunk",
-        data: {
-          chunk: sql.slice(index * SQL_CHUNK_SIZE, (index + 1) * SQL_CHUNK_SIZE),
-          index,
-          total
-        }
-      });
+      if (
+        sendConsoleAction(tab, "query_console_action", {
+          action: "run_sql_chunk",
+          data: {
+            chunk: sql.slice(index * SQL_CHUNK_SIZE, (index + 1) * SQL_CHUNK_SIZE),
+            index,
+            total
+          }
+        }) === false
+      ) {
+        return false;
+      }
     }
-    sendConsoleAction(tab, "query_console_action", {
-      action: "run_sql_complete",
-      data: { total }
-    });
+    return (
+      sendConsoleAction(tab, "query_console_action", {
+        action: "run_sql_complete",
+        data: { total }
+      }) !== false
+    );
+  }
+
+  function runQueryTab(tab: ChenQueryConsoleTab, selectedSql = "") {
+    if (tab.state.loading || tab.state.inQuery) return;
+    const sql = selectedSql || tab.statement;
+    if (!sql.trim()) return;
+    dismissQueryMessage(tab);
+
+    sendSql(tab, sql);
   }
 
   function runQueryFile(tab: ChenQueryConsoleTab, path: string) {
@@ -296,8 +305,7 @@ export function useChenQueryConsole(
       tab.timelineEntries.splice(0, tab.timelineEntries.length - MAX_CONSOLE_TIMELINE_ENTRIES);
     }
     tab.activeTimelineEntryId = entry.id;
-    const sent = sendConsoleAction(tab, "query_console_action", { action: "run_sql", data: sql });
-    if (sent === false) {
+    if (!sendSql(tab, sql)) {
       entry.status = "error";
       entry.completedAt = Date.now();
       const message = tab.connectionError || "Console websocket is not connected";