perf: 作业编辑使用 form

Author: clansty

package.json

@@ -16,18 +16,18 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^2.2.4",
     "@vueuse/core": "^8.2.3",
+    "dayjs": "^1.11.0",
     "electron": "^17.2.0",
     "electron-builder": "^22.14.5",
     "naive-ui": "^2.26.1",
     "typescript": "^4.5.5",
+    "unplugin-vue-components": "^0.18.5",
     "vite": "^2.7.13",
     "vite-plugin-resolve": "^1.4.4",
     "vue": "^3.2.29",
     "vue-router": "^4.0.13",
     "vue-tsc": "^0.31.1",
-    "win-win-api": "^0.0.5",
-    "dayjs": "^1.11.0",
-    "unplugin-vue-components": "^0.18.5"
+    "win-win-api": "^0.0.5"
   },
   "env": {
     "PORT": 3344

src/renderer/components.d.ts

@@ -4,6 +4,8 @@
 
 declare module 'vue' {
   export interface GlobalComponents {
+    NForm: typeof import('naive-ui')['NForm']
+    NFormItem: typeof import('naive-ui')['NFormItem']
     NGi: typeof import('naive-ui')['NGi']
     NGrid: typeof import('naive-ui')['NGrid']
     NInput: typeof import('naive-ui')['NInput']

src/renderer/src/views/Homework.vue

@@ -1,12 +1,21 @@
 <script setup lang="ts">
+import locale from '../language/zh_CN.json'
 import useHomeworks from '../stores/homeworks';
 
 const homeworks = useHomeworks();
 
 </script>
 
 <template>
-  <div v-for="(homework, subject) in homeworks">
-    <p><n-input type="text" v-model:value="homeworks[subject]"/></p>
-  </div>
+  <n-form
+    label-placement="left"
+    label-width="auto"
+  >
+    <n-form-item
+      v-for="(homework, subject) in homeworks"
+      :label="locale.subject[subject]"
+    >
+      <n-input type="text" v-model:value="homeworks[subject]"/>
+    </n-form-item>
+  </n-form>
 </template>