refactor: 规范化调整.vue文件结构及命名

src/views/error-page/404.vue

@@ -1,8 +1,3 @@
-<script setup>
-import { useRouter } from 'vue-router'
-const { replace } = useRouter()
-</script>
-
 <template>
   <div class="page-404">
     <n-result status="404" description="抱歉，您访问的页面不存在。">
@@ -16,6 +11,11 @@ const { replace } = useRouter()
   </div>
 </template>
 
+<script setup>
+import { useRouter } from 'vue-router'
+const { replace } = useRouter()
+</script>
+
 <style lang="scss" scoped>
 .page-404 {
   height: 100%;

src/views/examples/table/post/post-create.vue

@@ -4,7 +4,7 @@
       <input v-model="post.title" type="text" placeholder="输入文章标题..." class="title" />
       <n-button type="primary" style="width: 80px" :loading="btnLoading" @click="handleSavePost">保存</n-button>
     </div>
-    <md-editor v-model="post.content" style="height: calc(100vh - 140px)" />
+    <MdEditor v-model="post.content" style="height: calc(100vh - 140px)" />
   </div>
 </template>
 

src/views/login/index.vue

@@ -1,3 +1,33 @@
+<template>
+  <div class="login-page">
+    <div class="form-wrapper">
+      <h2 class="title">{{ title }}</h2>
+      <div class="form-item" mt-20>
+        <input
+          v-model="loginInfo.name"
+          autofocus
+          type="text"
+          class="input"
+          placeholder="username"
+          @keydown.enter="handleLogin"
+        />
+      </div>
+      <div class="form-item" mt-20>
+        <input
+          v-model="loginInfo.password"
+          type="password"
+          class="input"
+          placeholder="password"
+          @keydown.enter="handleLogin"
+        />
+      </div>
+      <div class="form-item" mt-20>
+        <button class="submit-btn" @click="handleLogin">登录</button>
+      </div>
+    </div>
+  </div>
+</template>
+
 <script setup>
 import { ref, unref } from 'vue'
 import { useRouter } from 'vue-router'
@@ -53,36 +83,6 @@ async function handleLogin() {
 }
 </script>
 
-<template>
-  <div class="login-page">
-    <div class="form-wrapper">
-      <h2 class="title">{{ title }}</h2>
-      <div class="form-item" mt-20>
-        <input
-          v-model="loginInfo.name"
-          autofocus
-          type="text"
-          class="input"
-          placeholder="username"
-          @keydown.enter="handleLogin"
-        />
-      </div>
-      <div class="form-item" mt-20>
-        <input
-          v-model="loginInfo.password"
-          type="password"
-          class="input"
-          placeholder="password"
-          @keydown.enter="handleLogin"
-        />
-      </div>
-      <div class="form-item" mt-20>
-        <button class="submit-btn" @click="handleLogin">登录</button>
-      </div>
-    </div>
-  </div>
-</template>
-
 <style lang="scss" scoped>
 @property --perA {
   syntax: '<percentage>';

src/views/redirect/index.vue

@@ -1,3 +1,5 @@
+<template></template>
+
 <script setup>
 import { useRouter } from 'vue-router'
 
@@ -19,5 +21,3 @@ replace({
   query,
 })
 </script>
-
-<template></template>

src/views/test-page/TestDialog.vue

@@ -1,3 +1,9 @@
+<template>
+  <div p24>
+    <n-button type="error" @click="handleDelete">删除</n-button>
+  </div>
+</template>
+
 <script setup name="TestDialog">
 const handleDelete = function () {
   $dialog.confirm({
@@ -11,9 +17,3 @@ const handleDelete = function () {
   })
 }
 </script>
-
-<template>
-  <div p24>
-    <n-button type="error" @click="handleDelete">删除</n-button>
-  </div>
-</template>

src/views/test-page/TestKeepAlive.vue

@@ -1,3 +1,9 @@
+<template>
+  <div p24>
+    <n-gradient-text gradient="linear-gradient(90deg, red 0%, green 50%, blue 100%)"> 注意查看提示语 </n-gradient-text>
+  </div>
+</template>
+
 <!--使用keep-alive须设置name，注意请与对应的路由的name保持一致，方便统一处理-->
 <script setup name="TEST-KEEP-ALIVE">
 import { onMounted, onActivated, onDeactivated } from 'vue'
@@ -14,9 +20,3 @@ onDeactivated(() => {
   $message.success('触发onDeactivated')
 })
 </script>
-
-<template>
-  <div p24>
-    <n-gradient-text gradient="linear-gradient(90deg, red 0%, green 50%, blue 100%)"> 注意查看提示语 </n-gradient-text>
-  </div>
-</template>

src/views/test-page/TestMessage.vue

@@ -1,3 +1,9 @@
+<template>
+  <div p24>
+    <n-button type="primary" @click="handleLogin">点击登陆</n-button>
+  </div>
+</template>
+
 <script setup>
 function handleLogin() {
   $message.loading('登陆中...')
@@ -10,9 +16,3 @@ function handleLogin() {
   }, 2000)
 }
 </script>
-
-<template>
-  <div p24>
-    <n-button type="primary" @click="handleLogin">点击登陆</n-button>
-  </div>
-</template>