fix

src/components/CodeEditor.vue

@@ -80,7 +80,7 @@ function onReady(payload: {
     :tabSize="4"
     :placeholder="props.placeholder"
     :style="{
-      height: props.label ? 'calc(100% - 60px)' : '100%',
+      height: !!props.label ? 'calc(100% - 60px)' : '100%',
       fontSize: props.fontSize + 'px',
     }"
     @change="onChange"

src/composables/code.ts

@@ -24,7 +24,7 @@ export const code = reactive<Code>({
 export const input = ref(cache.input.value)
 export const output = ref("")
 export const status = ref(Status.NotStarted)
-export const loading = ref(false)
+export const loading = ref(!code.value)
 export const size = ref(cache.fontsize)
 
 watch(size, (value: number) => {
@@ -45,7 +45,7 @@ watch(
   () => code.value,
   (value: string) => {
     cache.code[code.language].value = value
-    if (!code.value) loading.value = true
+    loading.value = !value
   },
 )
 

src/composables/helper.ts

@@ -1,3 +1,33 @@
 import { ref } from "vue"
 
 export const insertText = ref("")
+
+export const cTexts = [
+  ",",
+  ";",
+  "printf();",
+  "{\n}",
+  "int",
+  "%d",
+  "if () ",
+  " else ",
+]
+
+export const pythonTexts = [
+  ":",
+  '""',
+  " = ",
+  " == ",
+  " > ",
+  " < ",
+  " != ",
+  "print()",
+  "input()",
+  "if ",
+  "else:",
+  "elif ",
+  "for ",
+  " in ",
+  "range():",
+  "while",
+]

src/mobile/Content.vue

@@ -13,6 +13,7 @@ import { EditorView } from "@codemirror/view"
 import { insertText } from "../composables/helper"
 import { whenever } from "@vueuse/core"
 import { onUnmounted } from "vue"
+import { watch } from "vue"
 
 let codeEditor: EditorView | null = null
 
@@ -38,8 +39,26 @@ function onReady(view: EditorView) {
 whenever(insertText, (text: string) => {
   if (!codeEditor) return
   codeEditor.dispatch(codeEditor.state.replaceSelection(text))
+  codeEditor.focus() // 保持光标选中状态
+  // 处理换行或者移动光标
+  let delta = 0
+  if (text === '""' || text === "''") delta = 1
+  if (text[text.length - 1] === ")") delta = 1
+  if (text[text.length - 1] === ":" && text[text.length - 2] === ")") {
+    delta = 2
+  }
+  if (delta > 0) {
+    const newPos = codeEditor.state.selection.ranges[0].from - delta
+    codeEditor.dispatch({
+      selection: {
+        anchor: newPos,
+        head: newPos,
+      },
+    })
+  }
   insertText.value = ""
 })
+
 onUnmounted(() => {
   codeEditor = null
 })
@@ -53,7 +72,7 @@ onUnmounted(() => {
       @update:value="onChangeTab"
     >
       <n-tab-pane name="code" tab="代码">
-        <div>
+        <n-flex vertical class="wrapper">
           <Helper />
           <CodeEditor
             v-model:model-value="code.value"
@@ -61,7 +80,7 @@ onUnmounted(() => {
             :font-size="size"
             @ready="onReady"
           />
-        </div>
+        </n-flex>
       </n-tab-pane>
       <n-tab-pane name="input" tab="输入">
         <CodeEditor v-model:model-value="input" :font-size="size" />
@@ -106,4 +125,7 @@ onUnmounted(() => {
 .label {
   font-size: 16px;
 }
+.wrapper {
+  height: 100%;
+}
 </style>

src/mobile/Helper.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { insertText } from "../composables/helper"
+import { cTexts, insertText, pythonTexts } from "../composables/helper"
 import { code } from "../composables/code"
 import { computed } from "vue"
 
@@ -7,29 +7,20 @@ function insert(text: string) {
   insertText.value = text
 }
 
-const texts = computed(() => {
-  if (code.language === "c") return [",", ";", "printf();", "{\n}", "int", "%d"]
-  else
-    return [
-      ":",
-      "=",
-      "==",
-      "print()",
-      "input()",
-      "if",
-      "else",
-      "elif",
-      "for",
-      "in",
-      "range",
-      "while",
-    ]
-})
+const texts = computed(
+  () => ({ c: cTexts, python: pythonTexts })[code.language],
+)
 </script>
 <template>
   <n-flex align="center" class="container" wrap>
     <span>编程助手</span>
-    <n-button v-for="it in texts" :key="it" size="small" @click="insert(it)">
+    <n-button
+      secondary
+      v-for="it in texts"
+      :key="it"
+      size="small"
+      @click="insert(it)"
+    >
       {{ it }}
     </n-button>
   </n-flex>
@@ -37,6 +28,5 @@ const texts = computed(() => {
 <style scoped>
 .container {
   padding: 0 10px;
-  margin-bottom: 10px;
 }
 </style>