add code preset

src/desktop/Query.vue

@@ -0,0 +1,69 @@
+<template>
+  <n-flex vertical size="large">
+    <n-flex v-if="code.value">
+      <n-flex align="center">
+        <span>复制当前代码，输入 Query</span>
+        <div>
+          <n-input v-model:value="query" />
+        </div>
+      </n-flex>
+      <n-button type="primary" @click="create" :disabled="!query.length">
+        新建
+      </n-button>
+    </n-flex>
+    <span v-else style="color: red">当前无代码</span>
+    <n-flex>
+      <div style="margin-top: 6px" v-if="codes.length">已有的 Query</div>
+      <n-tag
+        v-for="item in codes"
+        :key="item.query"
+        closable
+        size="large"
+        round
+        @click="show(item.code)"
+        @close="remove(item.id)"
+      >
+        {{ item.query }}
+      </n-tag>
+    </n-flex>
+  </n-flex>
+</template>
+<script setup lang="ts">
+import { useMessage } from "naive-ui"
+import { onMounted, ref } from "vue"
+import { createCode, listCode, removeCode } from "../api"
+import { code } from "../composables/code"
+
+const message = useMessage()
+
+const query = ref("")
+const codes = ref<{ code: string; query: string; id: number }[]>([])
+
+async function create() {
+  try {
+    await createCode({
+      code: code.value,
+      query: query.value,
+    })
+    list()
+  } catch (err) {
+    message.error("query重复，创建失败")
+  }
+}
+
+async function remove(id: number) {
+  await removeCode(id)
+  list()
+}
+
+function show(codeStr: string) {
+  code.value = codeStr
+}
+
+async function list() {
+  const res = await listCode()
+  codes.value = res.data
+}
+
+onMounted(list)
+</script>

src/desktop/index.vue

@@ -2,7 +2,7 @@
   <Header />
   <Content />
   <n-modal
-    v-model:show="show"
+    v-model:show="file"
     preset="card"
     style="width: 600px"
     :mask-closable="false"
@@ -10,6 +10,15 @@
   >
     <File />
   </n-modal>
+  <n-modal
+    v-model:show="query"
+    preset="card"
+    style="width: 600px"
+    :mask-closable="false"
+    title="代码预设"
+  >
+    <Query />
+  </n-modal>
 </template>
 <script lang="ts" setup>
 import { useMagicKeys, whenever } from "@vueuse/core"
@@ -18,19 +27,25 @@ import { run } from "../composables/code"
 import Content from "./Content.vue"
 import File from "./File.vue"
 import Header from "./Header.vue"
+import Query from "./Query.vue"
 
-const show = ref(false)
+const file = ref(false)
+const query = ref(false)
 
-const { alt_shift_p, ctrl_shift_p, ctrl_shift_z } = useMagicKeys()
+const { alt_shift_p, ctrl_shift_p, ctrl_shift_z, ctrl_shift_m } = useMagicKeys()
 
 whenever(alt_shift_p, () => {
-  show.value = true
+  file.value = true
 })
 whenever(ctrl_shift_p, () => {
-  show.value = true
+  file.value = true
 })
 whenever(ctrl_shift_z, () => {
-  show.value = true
+  file.value = true
+})
+
+whenever(ctrl_shift_m, () => {
+  query.value = true
 })
 
 const { ctrl_s } = useMagicKeys({