update

.prettierrc.toml

@@ -1 +1,2 @@
 semi=false
+plugins=["prettier-plugin-organize-imports"]

package.json

@@ -1,7 +1,7 @@
 {
   "name": "code-next",
   "private": true,
-  "version": "1.0.0",
+  "version": "1.1.0",
   "type": "module",
   "scripts": {
     "start": "vite",
@@ -11,7 +11,7 @@
   "dependencies": {
     "@codemirror/lang-cpp": "^6.0.2",
     "@codemirror/lang-python": "^6.1.6",
-    "@vueuse/core": "^10.10.1",
+    "@vueuse/core": "^10.11.0",
     "axios": "^1.7.2",
     "client-zip": "^1.6.4",
     "codemirror": "^6.0.1",
@@ -21,17 +21,19 @@
     "naive-ui": "^2.38.2",
     "normalize.css": "^8.0.1",
     "query-string": "^9.0.0",
-    "vue": "^3.4.27",
+    "vue": "^3.4.30",
     "vue-codemirror": "^6.1.1"
   },
   "devDependencies": {
+    "@iconify/vue": "^4.1.2",
     "@types/file-saver": "^2.0.7",
     "@vitejs/plugin-legacy": "^5.4.1",
     "@vitejs/plugin-vue": "^5.0.5",
     "prettier": "^3.3.2",
+    "prettier-plugin-organize-imports": "^3.2.4",
     "terser": "^5.31.1",
-    "typescript": "^5.4.5",
+    "typescript": "^5.5.2",
-    "vite": "^5.2.13",
+    "vite": "^5.3.1",
-    "vue-tsc": "^2.0.21"
+    "vue-tsc": "^2.0.22"
   }
 }

src/api.ts

@@ -1,6 +1,6 @@
 import axios from "axios"
-import { Code, Submission } from "./types"
 import { deadResults, languageToId } from "./templates"
+import { Code, Submission } from "./types"
 
 function getChromeVersion() {
   var raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./)

src/components/CodeEditor.vue

@@ -9,10 +9,12 @@ import { EditorView } from "@codemirror/view"
 import { LANGUAGE } from "../types"
 import { oneDark } from "../themes/oneDark"
 import { smoothy } from "../themes/smoothy"
+import { Icon } from "@iconify/vue"
 
 interface Props {
   modelValue: string
   label?: string
+  icon?: string
   language?: LANGUAGE
   fontSize?: number
   readonly?: boolean
@@ -20,6 +22,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  label: "",
   language: "python",
   fontSize: 24,
   readonly: false,
@@ -69,6 +72,7 @@ function onReady(payload: {
 </script>
 <template>
   <n-flex align="center" class="header" v-if="props.label">
+    <Icon v-if="icon" :icon="icon" :width="24" :height="24"></Icon>
     <span class="title">{{ label }}</span>
     <slot name="actions"></slot>
   </n-flex>

src/composables/analyse.ts

@@ -1,6 +1,6 @@
 import { computed, reactive } from "vue"
-import { output, status } from "./code"
 import { Status } from "../types"
+import { output, status } from "./code"
 
 export const analyse = reactive({
   line: -1,

src/composables/code.ts

@@ -1,12 +1,12 @@
-import { reactive, ref, watch } from "vue"
-import { Code, LANGUAGE, Cache, Status } from "../types"
-import { sources } from "../templates"
-import { submit } from "../api"
 import { useStorage } from "@vueuse/core"
-import { isMobile } from "./breakpoints"
-import { atou, utoa } from "../utils"
 import copyTextToClipboard from "copy-text-to-clipboard"
 import queryString from "query-string"
+import { reactive, ref, watch } from "vue"
+import { submit } from "../api"
+import { sources } from "../templates"
+import { Cache, Code, LANGUAGE, Status } from "../types"
+import { atou, utoa } from "../utils"
+import { isMobile } from "./breakpoints"
 
 const defaultLanguage = "python"
 

src/composables/file.ts

@@ -1,8 +1,8 @@
+import { downloadZip } from "client-zip"
+import saveAs from "file-saver"
 import { ref } from "vue"
 import { submit } from "../api"
 import { code } from "./code"
-import { downloadZip } from "client-zip"
-import saveAs from "file-saver"
 
 export const files = ref(
   Array.from({ length: 5 }).map(() => ({ in: "", out: "", error: false })),

src/desktop/Content.vue

@@ -30,6 +30,7 @@ function copy() {
       <template #1>
         <CodeEditor
           label="代码区"
+          icon="streamline-emojis:lemon"
           :font-size="size"
           v-model="code.value"
           :language="code.language"
@@ -48,7 +49,12 @@ function copy() {
           :max="3 / 5"
         >
           <template #1>
-            <CodeEditor label="输入框" :font-size="size" v-model="input">
+            <CodeEditor
+              icon="streamline-emojis:four-leaf-clover"
+              label="输入框"
+              :font-size="size"
+              v-model="input"
+            >
               <template #actions>
                 <n-button
                   quaternary
@@ -63,6 +69,7 @@ function copy() {
           </template>
           <template #2>
             <CodeEditor
+              icon="streamline-emojis:hibiscus"
               label="输出框"
               v-model="output"
               readonly

src/desktop/Header.vue

@@ -3,6 +3,7 @@ import { size, run, loading, share } from "../composables/code"
 import ThemeButton from "../components/ThemeButton.vue"
 import SelectLanguage from "../components/SelectLanguage.vue"
 import { useMessage } from "naive-ui"
+import { Icon } from "@iconify/vue"
 
 const message = useMessage()
 
@@ -15,7 +16,10 @@ function handleShare() {
 <template>
   <n-layout-header bordered class="header">
     <n-flex justify="space-between" align="center">
+      <n-flex align="center">
+        <Icon icon="streamline-emojis:cat" :width="30" :height="30"></Icon>
         <div class="title">徐越的自测猫</div>
+      </n-flex>
       <n-flex>
         <n-button @click="handleShare">分享</n-button>
         <ThemeButton />

src/main.ts

@@ -1,27 +1,27 @@
-import { createApp } from "vue"
 import {
-  create,
   NButton,
   NConfigProvider,
+  NDropdown,
+  NFlex,
+  NIcon,
   NInput,
+  NInputNumber,
   NLayout,
   NLayoutContent,
   NLayoutHeader,
+  NMessageProvider,
+  NModal,
+  NPopover,
   NSelect,
   NSplit,
-  NFlex,
-  NIcon,
-  NMessageProvider,
-  NInputNumber,
-  NPopover,
-  NTag,
-  NModal,
-  NTabs,
   NTabPane,
-  NDropdown,
+  NTabs,
+  NTag,
+  create,
 } from "naive-ui"
-import App from "./App.vue"
 import "normalize.css"
+import { createApp } from "vue"
+import App from "./App.vue"
 
 const naive = create({
   components: [

src/themes/createTheme.ts

@@ -1,10 +1,10 @@
-import { EditorView } from "@codemirror/view"
-import { Extension } from "@codemirror/state"
 import {
   HighlightStyle,
   TagStyle,
   syntaxHighlighting,
 } from "@codemirror/language"
+import { Extension } from "@codemirror/state"
+import { EditorView } from "@codemirror/view"
 
 interface Options {
   /**

src/themes/oneDark.ts

@@ -1,6 +1,6 @@
-import { EditorView } from "@codemirror/view"
-import { Extension } from "@codemirror/state"
 import { HighlightStyle, syntaxHighlighting } from "@codemirror/language"
+import { Extension } from "@codemirror/state"
+import { EditorView } from "@codemirror/view"
 import { tags as t } from "@lezer/highlight"
 
 // Using https://github.com/one-dark/vscode-one-dark-theme/ as reference for the colors