fix

src/components/SelectLanguage.vue

@@ -1,30 +1,46 @@
 <script lang="ts" setup>
 import type { SelectOption } from "naive-ui"
-import { h } from "vue"
+import { h, computed, watch } from "vue"
 import { code } from "../composables/code"
+import { isMobile } from "../composables/breakpoints"
 
-const LANGS = [
+const LANGS = computed(() => {
-  ["python", "Python"],
+  const allLangs = [
-  ["turtle", "海龟绘图"],
+    ["python", "Python"],
-  ["c", "C 语言"],
+    ["turtle", "海龟绘图"],
-  ["cpp", "C++"],
+    ["c", "C 语言"],
-]
+    ["cpp", "C++"],
+  ]
+  if (isMobile.value) {
+    return allLangs.filter(([lang]) => lang !== "turtle")
+  }
+  return allLangs
+})
 
-const languages: SelectOption[] = LANGS.map((it) => ({
+// 如果当前在移动端且语言是海龟绘图，自动切换到 Python
-  value: it[0],
+watch(isMobile, (mobile) => {
-  label: () => [
+  if (mobile && code.language === "turtle") {
-    h("img", {
+    code.language = "python"
-      src: `/${it[0]}.svg`,
+  }
-      style: {
+})
-        width: "16px",
+
-        height: "16px",
+const languages = computed<SelectOption[]>(() =>
-        marginRight: "8px",
+  LANGS.value.map((it) => ({
-        transform: "translateY(3px)",
+    value: it[0],
-      },
+    label: () => [
-    }),
+      h("img", {
-    it[1],
+        src: `/${it[0]}.svg`,
-  ],
+        style: {
-}))
+          width: "16px",
+          height: "16px",
+          marginRight: "8px",
+          transform: "translateY(3px)",
+        },
+      }),
+      it[1],
+    ],
+  })),
+)
 </script>
 <template>
   <n-select