update

src/App.vue

@@ -14,9 +14,12 @@ const isDark = useDark()
     :date-locale="dateZhCN"
     :theme="isDark ? darkTheme : null"
   >
-    <n-layout>
+    <n-message-provider :max="1">
-      <Desktop v-if="isDesktop" />
+      <n-layout>
-      <Mobile v-if="isMobile" />
+        <Desktop v-if="isDesktop" />
-    </n-layout>
+        <Mobile v-if="isMobile" />
+      </n-layout>
+    </n-message-provider>
   </n-config-provider>
 </template>
+./themes/breakpoints

src/components/CodeEditor.vue

@@ -19,7 +19,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  language: "c",
+  language: "python",
   fontSize: 24,
   readonly: false,
   placeholder: "",
@@ -45,10 +45,10 @@ watch(
 )
 
 const lang = computed(() => {
-  if (props.language === "c") {
+  if (props.language === "python") {
-    return cpp()
+    return python()
   }
-  return python()
+  return cpp()
 })
 
 function onChange(v: string) {

src/composables/code.ts

@@ -1,6 +1,6 @@
 import { ref } from "vue"
 import copyTextToClipboard from "copy-text-to-clipboard"
-import { Code } from "../types"
+import { Code, LANGUAGE } from "../types"
 import { sources } from "../templates"
 import { submit } from "../api"
 
@@ -21,6 +21,11 @@ export function reset() {
   output.value = ""
 }
 
+export function changeLanguage(language: LANGUAGE) {
+  code.value.value = sources[language]
+  output.value = ""
+}
+
 export async function run() {
   loading.value = true
   const cleanCode = code.value.value.trim()

src/desktop/Header.vue

@@ -1,18 +1,29 @@
 <script setup lang="ts">
-import type { SelectOption } from "naive-ui"
+import { useMessage, type SelectOption } from "naive-ui"
 import { useDark, useToggle } from "@vueuse/core"
 import Play from "../icons/Play.vue"
-import { copy, reset, run, loading } from "../composables/code"
+import {
+  code,
+  copy,
+  reset,
+  run,
+  loading,
+  changeLanguage,
+} from "../composables/code"
 
+const message = useMessage()
 const isDark = useDark()
 const toggleDark = useToggle(isDark)
 
 const languages: SelectOption[] = [
-  { value: "c", label: "C" },
   { value: "python", label: "Python" },
-  { value: "cpp", label: "C++" },
+  { value: "c", label: "C" },
-  { value: "java", label: "Java" },
 ]
+
+function copyAndNotify() {
+  copy()
+  message.success("已经复制好了")
+}
 </script>
 
 <template>
@@ -24,8 +35,13 @@ const languages: SelectOption[] = [
           {{ isDark ? "浅色" : "深色" }}
         </n-button>
         <n-button @click="reset">重置</n-button>
-        <n-button @click="copy">复制</n-button>
+        <n-button @click="copyAndNotify">复制</n-button>
-        <n-select class="select" :options="languages"></n-select>
+        <n-select
+          class="select"
+          :options="languages"
+          v-model:value="code.language"
+          @update:value="changeLanguage"
+        />
         <n-button type="primary" @click="run" :loading="loading">
           <template #icon>
             <n-icon>

src/main.ts

@@ -12,6 +12,7 @@ import {
   NSplit,
   NFlex,
   NIcon,
+  NMessageProvider,
 } from "naive-ui"
 import App from "./App.vue"
 import "normalize.css"
@@ -20,6 +21,7 @@ const naive = create({
   components: [
     NButton,
     NConfigProvider,
+    NMessageProvider,
     NLayout,
     NLayoutHeader,
     NLayoutContent,

vite.config.ts

@@ -3,5 +3,19 @@ import vue from "@vitejs/plugin-vue"
 import legacy from "@vitejs/plugin-legacy"
 
 export default defineConfig({
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          editor: [
+            "vue-codemirror",
+            "codemirror",
+            "@codemirror/lang-cpp",
+            "@codemirror/lang-python",
+          ],
+        },
+      },
+    },
+  },
   plugins: [vue(), legacy({ targets: ["chrome 66", "not IE 11"] })],
 })