diff --git a/package-lock.json b/package-lock.json
index c04c507..43f1f9c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,8 +12,10 @@
         "@codemirror/lang-python": "^6.1.3",
         "@vueuse/core": "^10.7.2",
         "axios": "^1.6.5",
+        "client-zip": "^2.4.4",
         "codemirror": "^6.0.1",
         "copy-text-to-clipboard": "^3.2.0",
+        "file-saver": "^2.0.5",
         "naive-ui": "^2.37.3",
         "normalize.css": "^8.0.1",
         "query-string": "^8.1.0",
@@ -21,6 +23,7 @@
         "vue-codemirror": "^6.1.1"
       },
       "devDependencies": {
+        "@types/file-saver": "^2.0.7",
         "@vitejs/plugin-legacy": "^5.2.0",
         "@vitejs/plugin-vue": "^5.0.3",
         "prettier": "^3.2.4",
@@ -2513,6 +2516,12 @@
       "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
       "dev": true
     },
+    "node_modules/@types/file-saver": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.7.tgz",
+      "integrity": "sha512-dNKVfHd/jk0SkR/exKGj2ggkB45MAkzvWCaqLUUgkyjITkGNzH8H+yUwr+BLJUBjZOe9w8X3wgmXhZDRg1ED6A==",
+      "dev": true
+    },
     "node_modules/@types/katex": {
       "version": "0.16.7",
       "resolved": "https://registry.npmmirror.com/@types/katex/-/katex-0.16.7.tgz",
@@ -2949,6 +2958,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/client-zip": {
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/client-zip/-/client-zip-2.4.4.tgz",
+      "integrity": "sha512-Ixk40BUI7VvNDxW7SCze20GbCuC+gjP4tGkXUpo6/W96bOf96HSed6cOQVeUOIe74SJAG/dIrBr7AtR4xBVnsA=="
+    },
     "node_modules/codemirror": {
       "version": "6.0.1",
       "resolved": "https://registry.npmmirror.com/codemirror/-/codemirror-6.0.1.tgz",
@@ -3202,6 +3216,11 @@
       "resolved": "https://registry.npmmirror.com/evtd/-/evtd-0.2.4.tgz",
       "integrity": "sha512-qaeGN5bx63s/AXgQo8gj6fBkxge+OoLddLniox5qtLAEY5HSnuSlISXVPxnSae1dWblvTh4/HoMIB+mbMsvZzw=="
     },
+    "node_modules/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "node_modules/filter-obj": {
       "version": "5.1.0",
       "resolved": "https://registry.npmmirror.com/filter-obj/-/filter-obj-5.1.0.tgz",
@@ -5673,6 +5692,12 @@
       "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
       "dev": true
     },
+    "@types/file-saver": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.7.tgz",
+      "integrity": "sha512-dNKVfHd/jk0SkR/exKGj2ggkB45MAkzvWCaqLUUgkyjITkGNzH8H+yUwr+BLJUBjZOe9w8X3wgmXhZDRg1ED6A==",
+      "dev": true
+    },
     "@types/katex": {
       "version": "0.16.7",
       "resolved": "https://registry.npmmirror.com/@types/katex/-/katex-0.16.7.tgz",
@@ -6028,6 +6053,11 @@
         "supports-color": "^5.3.0"
       }
     },
+    "client-zip": {
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/client-zip/-/client-zip-2.4.4.tgz",
+      "integrity": "sha512-Ixk40BUI7VvNDxW7SCze20GbCuC+gjP4tGkXUpo6/W96bOf96HSed6cOQVeUOIe74SJAG/dIrBr7AtR4xBVnsA=="
+    },
     "codemirror": {
       "version": "6.0.1",
       "resolved": "https://registry.npmmirror.com/codemirror/-/codemirror-6.0.1.tgz",
@@ -6238,6 +6268,11 @@
       "resolved": "https://registry.npmmirror.com/evtd/-/evtd-0.2.4.tgz",
       "integrity": "sha512-qaeGN5bx63s/AXgQo8gj6fBkxge+OoLddLniox5qtLAEY5HSnuSlISXVPxnSae1dWblvTh4/HoMIB+mbMsvZzw=="
     },
+    "file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "filter-obj": {
       "version": "5.1.0",
       "resolved": "https://registry.npmmirror.com/filter-obj/-/filter-obj-5.1.0.tgz",
diff --git a/package.json b/package.json
index 6d6e9cb..0b82218 100644
--- a/package.json
+++ b/package.json
@@ -13,8 +13,10 @@
     "@codemirror/lang-python": "^6.1.3",
     "@vueuse/core": "^10.7.2",
     "axios": "^1.6.5",
+    "client-zip": "^2.4.4",
     "codemirror": "^6.0.1",
     "copy-text-to-clipboard": "^3.2.0",
+    "file-saver": "^2.0.5",
     "naive-ui": "^2.37.3",
     "normalize.css": "^8.0.1",
     "query-string": "^8.1.0",
@@ -22,6 +24,7 @@
     "vue-codemirror": "^6.1.1"
   },
   "devDependencies": {
+    "@types/file-saver": "^2.0.7",
     "@vitejs/plugin-legacy": "^5.2.0",
     "@vitejs/plugin-vue": "^5.0.3",
     "prettier": "^3.2.4",
diff --git a/src/desktop/TestPanel.vue b/src/desktop/TestPanel.vue
index 10b88fc..314728a 100644
--- a/src/desktop/TestPanel.vue
+++ b/src/desktop/TestPanel.vue
@@ -1,24 +1,121 @@
 <script lang="ts" setup>
-const count = 5
+import { ref } from "vue"
+import { downloadZip } from "client-zip"
+import { saveAs } from "file-saver"
+import { submit } from "../api"
+import { code } from "../composables/code"
+import { File } from "../types"
+
+interface Props {
+  files: File[]
+}
+const props = defineProps<Props>()
+const files = ref(props.files)
+
+function unique(arr: any[], key: string) {
+  const res = new Map()
+  return arr.filter((item) => !res.has(item[key]) && res.set(item[key], 1))
+}
+
+function addFive() {
+  files.value.push(
+    ...Array.from({ length: 5 }).map(() => ({
+      in: "",
+      out: "",
+      error: false,
+    })),
+  )
+}
+
+function remove(index: number) {
+  files.value = files.value.filter((_, i) => i !== index)
+}
+
+function onChange(value: string, index: number, slot: "in" | "out") {
+  files.value = files.value.map((item, i) => {
+    if (i === index) {
+      item[slot] = value
+    }
+    return item
+  })
+}
+
+async function run() {
+  files.value = files.value.filter((it) => {
+    if (it.in === "" && it.out === "") return false
+    return true
+  })
+  files.value = unique(files.value, "in")
+  const requests = files.value.map((file) => submit(code, file.in))
+  const responses = await Promise.all(requests)
+  const newFiles = responses.map((r) => ({
+    in: "",
+    out: r.output,
+    error: r.status !== 3,
+  }))
+  files.value.forEach((file, index) => {
+    newFiles[index].in = file.in
+  })
+  files.value = newFiles
+}
+
+async function download() {
+  let failed = false
+  for (let i = 0; i < files.value.length; i++) {
+    if (files.value[i].error) {
+      failed = true
+      break
+    }
+  }
+  if (failed) return
+  const data = []
+  for (let i = 0; i < files.value.length; i++) {
+    if (files.value[i].out) {
+      data.push({
+        name: `${i + 1}.in`,
+        input: files.value[i].in,
+        lastModified: new Date(),
+      })
+      data.push({
+        name: `${i + 1}.out`,
+        input: files.value[i].out,
+        lastModified: new Date(),
+      })
+    }
+  }
+  if (!data.length) return
+  const blob = await downloadZip(data).blob()
+  saveAs(blob, "testcase.zip")
+}
 </script>
 <template>
   <n-flex vertical>
     <n-flex>
-      <n-button>增加5个</n-button>
-      <n-button>运行看看</n-button>
-      <n-button type="primary">生成并下载</n-button>
+      <n-button @click="addFive">增加5个</n-button>
+      <n-button @click="run">先运行</n-button>
+      <n-button type="primary" @click="download">再下载</n-button>
     </n-flex>
-    <n-flex vertical>
-      <n-flex v-for="it in count" :key="it">
-        <n-flex vertical>
-          <span>{{ it }}.in</span>
-          <n-input type="textarea" />
-        </n-flex>
-        <n-flex vertical>
-          <span>{{ it }}.out</span>
-          <n-input type="textarea" />
-        </n-flex>
+    <n-flex v-for="(it, index) in files" :key="index">
+      <n-flex vertical>
+        <span>{{ index + 1 }}.in</span>
+        <n-input
+          type="textarea"
+          v-model:value="it.in"
+          @update:value="(v) => onChange(v, index, 'in')"
+        />
       </n-flex>
+      <n-flex vertical>
+        <span>{{ index + 1 }}.out</span>
+        <n-input
+          type="textarea"
+          v-model:value="it.out"
+          @update:value="(v) => onChange(v, index, 'out')"
+          :status="it.error ? 'error' : 'success'"
+        />
+      </n-flex>
+      <n-button :disabled="files.length == 1" @click="remove(index)">
+        删除
+      </n-button>
     </n-flex>
   </n-flex>
 </template>
diff --git a/src/desktop/index.vue b/src/desktop/index.vue
index 8c4c33d..5704226 100644
--- a/src/desktop/index.vue
+++ b/src/desktop/index.vue
@@ -8,7 +8,7 @@
     :mask-closable="false"
     title="测试用例文件生成器"
   >
-    <TestPanel />
+    <TestPanel :files="files" />
   </n-modal>
 </template>
 <script lang="ts" setup>
@@ -21,6 +21,9 @@ import { ref } from "vue"
 const { alt_shift_p, ctrl_shift_p, ctrl_shift_z } = useMagicKeys()
 
 const show = ref(false)
+const files = ref(
+  Array.from({ length: 5 }).map(() => ({ in: "", out: "", error: false })),
+)
 
 whenever(alt_shift_p, () => {
   show.value = true
diff --git a/src/types.ts b/src/types.ts
index d2b7729..594e362 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -34,3 +34,9 @@ export interface Submission {
     description: string
   }
 }
+
+export interface File {
+  in: string
+  out: string
+  error: boolean
+}