add helper

src/components/CodeEditor.vue

@@ -4,6 +4,7 @@ import { useDark } from "@vueuse/core"
 import { Codemirror } from "vue-codemirror"
 import { cpp } from "@codemirror/lang-cpp"
 import { python } from "@codemirror/lang-python"
+import { EditorState } from "@codemirror/state"
 import { EditorView } from "@codemirror/view"
 import { LANGUAGE } from "../types"
 import { oneDark } from "../themes/oneDark"
@@ -35,7 +36,7 @@ const styleTheme = EditorView.baseTheme({
     outline: "none",
   },
 })
-const emit = defineEmits(["update:modelValue"])
+const emit = defineEmits(["update:modelValue", "ready"])
 
 watch(
   () => props.modelValue,
@@ -54,6 +55,14 @@ const lang = computed(() => {
 function onChange(v: string) {
   emit("update:modelValue", v)
 }
+
+function onReady(payload: {
+  view: EditorView
+  state: EditorState
+  container: HTMLDivElement
+}) {
+  emit("ready", payload.view)
+}
 </script>
 <template>
   <n-flex align="center" class="header" v-if="props.label">
@@ -72,6 +81,7 @@ function onChange(v: string) {
       fontSize: props.fontSize + 'px',
     }"
     @change="onChange"
+    @ready="onReady"
   />
 </template>
 <style scoped>

src/composables/helper.ts

@@ -0,0 +1,3 @@
+import { ref } from "vue"
+
+export const insertText = ref("")

src/mobile/Content.vue

@@ -6,10 +6,17 @@ import { tab } from "../composables/tab"
 import { Tab } from "../types"
 import ThemeButton from "../components/ThemeButton.vue"
 import SelectLanguage from "../components/SelectLanguage.vue"
+import Helper from "./Helper.vue"
 import { useThemeVars } from "naive-ui"
 import { computed } from "vue"
+import { EditorView } from "@codemirror/view"
+import { insertText } from "../composables/helper"
+import { whenever } from "@vueuse/core"
+import { onUnmounted } from "vue"
 
-function onChange(v: Tab) {
+let codeEditor: EditorView | null = null
+
+function onChangeTab(v: Tab) {
   tab.value = v
 }
 
@@ -23,6 +30,19 @@ const color = computed(() => {
   else if (status.value === Status.Accepted) return theme.value.primaryColor
   else return theme.value.warningColor
 })
+
+function onReady(view: EditorView) {
+  codeEditor = view
+}
+
+whenever(insertText, (text: string) => {
+  if (!codeEditor) return
+  codeEditor.dispatch(codeEditor.state.replaceSelection(text))
+  insertText.value = ""
+})
+onUnmounted(() => {
+  codeEditor = null
+})
 </script>
 <template>
   <n-layout-content>
@@ -30,14 +50,18 @@ const color = computed(() => {
       pane-style="height: calc(100vh - 111px)"
       type="segment"
       :value="tab"
-      @update:value="onChange"
+      @update:value="onChangeTab"
     >
       <n-tab-pane name="code" tab="代码">
+        <div>
+          <Helper />
           <CodeEditor
             v-model:model-value="code.value"
             :language="code.language"
             :font-size="size"
+            @ready="onReady"
           />
+        </div>
       </n-tab-pane>
       <n-tab-pane name="input" tab="输入">
         <CodeEditor v-model:model-value="input" :font-size="size" />

src/mobile/Helper.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { insertText } from "../composables/helper"
+
+function insert(text: string) {
+  insertText.value = text
+}
+</script>
+<template>
+  <n-flex align="center" class="container">
+    <span>编程助手</span>
+    <n-button size="small" @click="insert(':')">:</n-button>
+    <n-button size="small" @click="insert('=')">=</n-button>
+    <n-button size="small" @click="insert('print')">print</n-button>
+    <n-button size="small" @click="insert('input')">input</n-button>
+  </n-flex>
+</template>
+<style scoped>
+.container {
+  margin-bottom: 10px;
+}
+</style>