From 98fd6081a0d9b24751f285f9b4f0a569199012ea Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Wed, 24 Jan 2024 11:50:18 +0800
Subject: [PATCH] add helper

---
 src/components/CodeEditor.vue | 12 ++++++++++-
 src/composables/helper.ts     |  3 +++
 src/mobile/Content.vue        | 38 ++++++++++++++++++++++++++++-------
 src/mobile/Helper.vue         | 21 +++++++++++++++++++
 4 files changed, 66 insertions(+), 8 deletions(-)
 create mode 100644 src/composables/helper.ts
 create mode 100644 src/mobile/Helper.vue

diff --git a/src/components/CodeEditor.vue b/src/components/CodeEditor.vue
index e9f6f6b..58f333d 100644
--- a/src/components/CodeEditor.vue
+++ b/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>
diff --git a/src/composables/helper.ts b/src/composables/helper.ts
new file mode 100644
index 0000000..3404263
--- /dev/null
+++ b/src/composables/helper.ts
@@ -0,0 +1,3 @@
+import { ref } from "vue"
+
+export const insertText = ref("")
diff --git a/src/mobile/Content.vue b/src/mobile/Content.vue
index 439ad8a..cbdbee2 100644
--- a/src/mobile/Content.vue
+++ b/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="代码">
-        <CodeEditor
-          v-model:model-value="code.value"
-          :language="code.language"
-          :font-size="size"
-        />
+        <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" />
diff --git a/src/mobile/Helper.vue b/src/mobile/Helper.vue
new file mode 100644
index 0000000..f3f763a
--- /dev/null
+++ b/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>