first commit

src/desktop/Content.vue

@@ -0,0 +1,37 @@
+<template>
+  <n-layout-content class="container">
+    <n-split direction="horizontal" :min="1 / 3" :max="4 / 5">
+      <template #1>
+        <CodeEditor
+          label="代码区"
+          v-model="code.value"
+          :language="code.language"
+        />
+      </template>
+      <template #2>
+        <n-split
+          direction="vertical"
+          :default-size="1 / 3"
+          :min="1 / 5"
+          :max="3 / 5"
+        >
+          <template #1>
+            <CodeEditor label="输入框" v-model="input" />
+          </template>
+          <template #2>
+            <CodeEditor label="输出框" v-model="output" readonly />
+          </template>
+        </n-split>
+      </template>
+    </n-split>
+  </n-layout-content>
+</template>
+<script lang="ts" setup>
+import { code, input, output } from "../composables/code"
+import CodeEditor from "../components/CodeEditor.vue"
+</script>
+<style scoped>
+.container {
+  height: calc(100vh - 60px);
+}
+</style>

src/desktop/Header.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import 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"
+
+const isDark = useDark()
+const toggleDark = useToggle(isDark)
+
+const languages: SelectOption[] = [
+  { value: "c", label: "C" },
+  { value: "python", label: "Python" },
+  { value: "cpp", label: "C++" },
+  { value: "java", label: "Java" },
+]
+</script>
+
+<template>
+  <n-layout-header bordered class="header">
+    <n-flex justify="space-between" align="center">
+      <div class="title">徐越的自测猫</div>
+      <n-flex>
+        <n-button @click="toggleDark()">
+          {{ isDark ? "浅色" : "深色" }}
+        </n-button>
+        <n-button @click="reset">重置</n-button>
+        <n-button @click="copy">复制</n-button>
+        <n-select class="select" :options="languages"></n-select>
+        <n-button type="primary" @click="run" :loading="loading">
+          <template #icon>
+            <n-icon>
+              <Play />
+            </n-icon>
+          </template>
+          运行 (F5)
+        </n-button>
+      </n-flex>
+    </n-flex>
+  </n-layout-header>
+</template>
+
+<style scoped>
+.header {
+  height: 60px;
+  padding: 12px;
+}
+.title {
+  font-size: 20px;
+}
+.select {
+  width: 100px;
+}
+</style>

src/desktop/index.vue

@@ -0,0 +1,8 @@
+<template>
+  <Header />
+  <Content />
+</template>
+<script lang="ts" setup>
+import Header from "./Header.vue"
+import Content from "./Content.vue"
+</script>