feat: refactor editor tokenlize #24

Signed-off-by: seven <[email protected]>

src/common/editor.ts

@@ -9,10 +9,21 @@ export type Decoration = {
   range: Range;
   options: { isWholeLine: boolean; linesDecorationsClassName: string };
 };
+
 export const executeActions = {
   regexp: /^(GET|DELETE|POST|PUT)\s\w+/,
   decorationClassName: 'action-execute-decoration',
 };
+
+export type SearchToken = {
+  qdsl: string;
+  actionPosition: Range;
+  qdslPosition: Range;
+  method: string;
+  index: string;
+  path: string;
+};
+
 export const searchTokensProvider = {
   // Set defaultToken to invalid to see what you do not tokenize yet
   defaultToken: 'invalid',
@@ -193,3 +204,42 @@ export const searchTokensProvider = {
     ],
   },
 };
+
+export const buildSearchToken = (lines: Array<{ lineNumber: number; lineContent: string }>) => {
+  const commands = lines.filter(({ lineContent }) => executeActions.regexp.test(lineContent));
+
+  return commands.map(({ lineContent, lineNumber }, index, commands) => {
+    const rawCmd = lineContent.split(/[/\s]+/);
+    const method = rawCmd[0]?.toUpperCase();
+    const indexName = rawCmd[1]?.startsWith('_') ? undefined : rawCmd[1];
+    const path = rawCmd.slice(indexName ? 2 : 1, rawCmd.length).join('/');
+    const endLineNumber = commands[index + 1]?.lineNumber
+      ? commands[index + 1]?.lineNumber - 1
+      : lines.length;
+
+    const qdsl = lines
+      .slice(lineNumber, endLineNumber)
+      .map(({ lineContent }) => lineContent)
+      .join('');
+    return {
+      qdsl,
+      method,
+      index: indexName,
+      path,
+      actionPosition: {
+        startLineNumber: lineNumber,
+        endLineNumber: lineNumber,
+        startColumn: 1,
+        endColumn: lineContent.length,
+      },
+      qdslPosition: qdsl
+        ? {
+            startLineNumber: lineNumber + 1,
+            startColumn: 1,
+            endLineNumber: endLineNumber,
+            endColumn: lines[endLineNumber - 1].lineContent.length,
+          }
+        : null,
+    } as SearchToken;
+  });
+};

src/layout/components/the-aside.vue

@@ -42,12 +42,15 @@
 </template>
 
 <script setup lang="ts">
+import { ref, markRaw } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
 import { DataBase, Folders, LogoGithub, Settings, UserAvatar, ExpandAll } from '@vicons/carbon';
-import { useAppStore } from './../../store';
+import { useAppStore } from '../../store';
 import theAsideIcon from './the-aside-icon.vue';
 const router = useRouter();
 const route = useRoute();
 const appStore = useAppStore();
+const { setConnectPanel } = appStore;
 
 const mainNavList = ref([
   {
@@ -113,7 +116,7 @@ const navClick = (item: RouteItem) => {
     window.electronAPI.openGitHub();
   } else {
     if (route.path === item.path) {
-      appStore.setConnectPannel();
+      setConnectPanel();
     } else {
       router.push({
         path: item.path,

src/store/appStore.ts

@@ -10,7 +10,11 @@ export enum LanguageType {
   EN_US = 'enUS',
 }
 export const useAppStore = defineStore('app', {
-  state: () => {
+  state: (): {
+    themeType: ThemeType;
+    languageType: LanguageType;
+    connectPanel: boolean;
+  } => {
     return {
       themeType: ThemeType.AUTO,
       languageType: LanguageType.AUTO,
@@ -19,7 +23,7 @@ export const useAppStore = defineStore('app', {
   },
   persist: true,
   actions: {
-    setConnectPannel() {
+    setConnectPanel() {
       this.connectPanel = !this.connectPanel;
     },
     getEditorTheme() {

src/store/connectionStore.ts

@@ -45,10 +45,10 @@ const buildPath = (index: string | undefined, path: string | undefined) => {
 };
 
 export const useConnectionStore = defineStore('connectionStore', {
-  state(): {
+  state: (): {
     connections: Connection[];
     established: Established;
-  } {
+  } => {
     return {
       connections: [],
       established: null,
@@ -69,7 +69,7 @@ export const useConnectionStore = defineStore('connectionStore', {
       return await client.get(undefined, 'format=json');
     },
     saveConnection(connection: Connection) {
-      const index = this.connections.findIndex(item => item.id === connection.id);
+      const index = this.connections.findIndex(({ id }: Connection) => id === connection.id);
       if (index >= 0) {
         this.connections[index] = connection;
       } else {
@@ -78,7 +78,7 @@ export const useConnectionStore = defineStore('connectionStore', {
       storeAPI.set('connections', pureObject(this.connections));
     },
     removeConnection(connection: Connection) {
-      this.connections = this.connections.filter(item => item.id !== connection.id);
+      this.connections = this.connections.filter(({ id }: Connection) => id !== connection.id);
       storeAPI.set('connections', pureObject(this.connections));
     },
     async establishConnection(connection: Connection) {
@@ -112,7 +112,9 @@ export const useConnectionStore = defineStore('connectionStore', {
     selectIndex(indexName: string) {
       this.established = {
         ...this.established,
-        activeIndex: this.established?.indices.find(({ index }) => index === indexName),
+        activeIndex: this.established?.indices.find(
+          ({ index }: { index: string }) => index === indexName,
+        ),
       } as Established;
     },
     async searchQDSL({

src/views/connect/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="connect-container">
-    <div v-if="isPannelOpen" class="connect-list">
+    <div v-if="connectPanel" class="connect-list">
       <div class="add-connect" @click="addConnect">
         <n-icon size="28">
           <Add />
@@ -22,6 +22,8 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { storeToRefs } from 'pinia';
 import { Add } from '@vicons/carbon';
 import ConnectModal from './components/connect-dialog.vue';
 import connectList from './components/connect-list.vue';
@@ -30,15 +32,15 @@ import Editor from '../editor/index.vue';
 import { useAppStore } from '../../store';
 
 const appStore = useAppStore();
+const { setConnectPanel } = appStore;
+const { connectPanel } = storeToRefs(appStore);
+
 // DOM
 const connectModalRef = ref();
-const isPannelOpen = computed(() => {
-  return appStore.connectPannel;
-});
 
 onMounted(() => {
-  if (!appStore.connectPannel) {
-    appStore.setConnectPannel();
+  if (!connectPanel.value) {
+    setConnectPanel();
   }
 });