style: 一些复杂而综合的细节修正

webui/src/assets/main.scss

@@ -6,6 +6,10 @@ body {
   overflow: hidden;
 }
 
+* {
+  box-sizing: border-box;
+}
+
 div#app {
   height: 100%;
   overflow: hidden;

webui/src/pages/AdminPage.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import UserAction from '@/components/admin/UserAction.vue'
-import type { MenuOption } from 'naive-ui'
-import { computed, onMounted, ref, useTemplateRef } from 'vue'
-import { useRouter } from 'vue-router'
-import { useNowUser } from '@/stores/now-user.js'
-import { useHead } from '@unhead/vue'
+import type {MenuOption} from 'naive-ui'
+import {computed, onMounted, ref, useTemplateRef} from 'vue'
+import {useRouter} from 'vue-router'
+import {useNowUser} from '@/stores/now-user.js'
+import {useHead} from '@unhead/vue'
 
 useHead({
   titleTemplate: '%s | 管理面板 | NayHome',
@@ -62,7 +62,9 @@ function handleMenuClick(key: string) {
 
 onMounted(() => {
   const key = ROUTER.currentRoute.value.fullPath.replace('/admin/', '')
-  if (key) {
+  if (key.endsWith('/admin')) {
+    selectOption.value = ''
+  } else if (key) {
     selectOption.value = key
     menu.value?.showOption(key)
   } else {
@@ -74,16 +76,16 @@ onMounted(() => {
 <template>
   <div id="user-page">
     <div id="user-page-sidebar">
-      <user-action />
+      <user-action/>
       <div class="nyahome-card">
-        <n-menu ref="menu" v-model:value="selectOption" :options @update:value="handleMenuClick" />
+        <n-menu ref="menu" v-model:value="selectOption" :options @update:value="handleMenuClick"/>
       </div>
     </div>
 
     <router-view v-slot="{ Component }">
       <div id="user-page-content">
         <keep-alive>
-          <component :is="Component" />
+          <component :is="Component"/>
         </keep-alive>
       </div>
     </router-view>

webui/src/pages/admin/AdminUserInfo.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { useNowUser } from '@/stores/now-user.js'
-import { ref, watch } from 'vue'
+import {useNowUser} from '@/stores/now-user.js'
+import {ref, watch} from 'vue'
 import SelectFileModal from '@/components/file/SelectFileModal.vue'
-import { api } from '@/tools/web.js'
-import type { UploadFileDto, UserDto } from '@/types/user.js'
-import { useHead } from '@unhead/vue'
+import {api} from '@/tools/web.js'
+import type {UploadFileDto, UserDto} from '@/types/user.js'
+import {useHead} from '@unhead/vue'
 import ChangeEmailModal from '@/components/admin/ChangeEmailModal.vue'
 import ChangePhoneModal from '@/components/admin/ChangePhoneModal.vue'
 
@@ -69,7 +69,7 @@ watch(
   () => {
     reInitForm()
   },
-  { immediate: true },
+  {immediate: true},
 )
 
 async function save() {
@@ -91,14 +91,14 @@ async function save() {
     <div class="ui-content">
       <n-form style="width: 450px" label-width="auto" label-placement="left" label-align="right">
         <n-form-item label="用户名">
-          <n-input v-model:value="infoForm.name" />
+          <n-input v-model:value="infoForm.name"/>
         </n-form-item>
         <n-form-item label="展示名称">
-          <n-input v-model:value="infoForm.display_name" />
+          <n-input v-model:value="infoForm.display_name"/>
         </n-form-item>
         <n-form-item label="头像">
           <n-flex>
-            <n-avatar v-model:src="infoForm.avatar_url" :size="96" circle />
+            <n-avatar v-model:src="infoForm.avatar_url" :size="96" circle/>
             <n-flex vertical>
               <n-tag type="info">需在「内容-上传」中提前上传图像。</n-tag>
               <n-tag type="warning">使用方形图像以获得最佳效果。</n-tag>
@@ -108,7 +108,7 @@ async function save() {
                   secondary
                   type="tertiary"
                   @click="infoForm.avatar_url = NOWUSER.avatar_url"
-                  >重置
+                >重置
                 </n-button>
               </n-flex>
             </n-flex>
@@ -116,7 +116,7 @@ async function save() {
         </n-form-item>
         <n-form-item label="个人背景">
           <n-flex>
-            <n-avatar v-model:src="infoForm.background_url" :size="96" object-fit="cover" />
+            <n-avatar v-model:src="infoForm.background_url" :size="96" object-fit="cover"/>
             <n-flex vertical>
               <n-tag type="info">需在「内容-上传」中提前上传图像。</n-tag>
               <n-flex>
@@ -125,7 +125,7 @@ async function save() {
                   secondary
                   type="tertiary"
                   @click="infoForm.background_url = NOWUSER.background_url"
-                  >重置
+                >重置
                 </n-button>
               </n-flex>
             </n-flex>
@@ -139,10 +139,10 @@ async function save() {
           />
         </n-form-item>
         <n-form-item label="邮箱">
-          <n-input v-model:value="NOWUSER.email" disabled />
+          <n-input v-model:value="NOWUSER.email" disabled/>
         </n-form-item>
         <n-form-item label="手机号">
-          <n-input v-model:value="NOWUSER.phone" disabled />
+          <n-input v-model:value="NOWUSER.phone" disabled/>
         </n-form-item>
       </n-form>
       <n-flex>