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

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>