diff --git a/src/desktop/TestPanel.vue b/src/composables/file.ts
similarity index 50%
rename from src/desktop/TestPanel.vue
rename to src/composables/file.ts
index 314728a..21a1296 100644
--- a/src/desktop/TestPanel.vue
+++ b/src/composables/file.ts
@@ -1,23 +1,27 @@
-<script lang="ts" setup>
 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"
+import { code } from "./code"
+import { downloadZip } from "client-zip"
+import saveAs from "file-saver"
 
-interface Props {
-  files: File[]
-}
-const props = defineProps<Props>()
-const files = ref(props.files)
+export const files = ref(
+  Array.from({ length: 5 }).map(() => ({ in: "", out: "", error: false })),
+)
 
 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() {
+export function reset() {
+  files.value = Array.from({ length: 5 }).map(() => ({
+    in: "",
+    out: "",
+    error: false,
+  }))
+}
+
+export function addFive() {
   files.value.push(
     ...Array.from({ length: 5 }).map(() => ({
       in: "",
@@ -27,11 +31,11 @@ function addFive() {
   )
 }
 
-function remove(index: number) {
+export function remove(index: number) {
   files.value = files.value.filter((_, i) => i !== index)
 }
 
-function onChange(value: string, index: number, slot: "in" | "out") {
+export function onChange(value: string, index: number, slot: "in" | "out") {
   files.value = files.value.map((item, i) => {
     if (i === index) {
       item[slot] = value
@@ -40,7 +44,7 @@ function onChange(value: string, index: number, slot: "in" | "out") {
   })
 }
 
-async function run() {
+export async function run() {
   files.value = files.value.filter((it) => {
     if (it.in === "" && it.out === "") return false
     return true
@@ -59,18 +63,14 @@ async function run() {
   files.value = newFiles
 }
 
-async function download() {
+export async function download() {
   let failed = false
+  const data = []
   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) {
+    } else {
       data.push({
         name: `${i + 1}.in`,
         input: files.value[i].in,
@@ -83,39 +83,7 @@ async function download() {
       })
     }
   }
-  if (!data.length) return
+  if (failed || !data.length) return
   const blob = await downloadZip(data).blob()
   saveAs(blob, "testcase.zip")
 }
-</script>
-<template>
-  <n-flex vertical>
-    <n-flex>
-      <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 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/File.vue b/src/desktop/File.vue
new file mode 100644
index 0000000..41fce0c
--- /dev/null
+++ b/src/desktop/File.vue
@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+import {
+  files,
+  addFive,
+  run,
+  download,
+  onChange,
+  remove,
+  reset,
+} from "../composables/file"
+</script>
+<template>
+  <n-flex vertical>
+    <n-flex>
+      <n-button @click="reset">重置</n-button>
+      <n-button @click="addFive">增加5个</n-button>
+      <n-button @click="run">先运行</n-button>
+      <n-button @click="download">再下载</n-button>
+    </n-flex>
+    <n-flex v-for="(it, index) in files" :key="index">
+      <n-flex vertical class="testcase">
+        <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 class="testcase">
+        <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>
+<style scoped>
+.testcase {
+  flex: 1;
+}
+</style>
diff --git a/src/desktop/index.vue b/src/desktop/index.vue
index 5704226..3f7b0d9 100644
--- a/src/desktop/index.vue
+++ b/src/desktop/index.vue
@@ -8,22 +8,19 @@
     :mask-closable="false"
     title="测试用例文件生成器"
   >
-    <TestPanel :files="files" />
+    <File />
   </n-modal>
 </template>
 <script lang="ts" setup>
 import Header from "./Header.vue"
 import Content from "./Content.vue"
-import TestPanel from "./TestPanel.vue"
+import File from "./File.vue"
 import { useMagicKeys, whenever } from "@vueuse/core"
 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