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

webui/components.d.ts

@@ -15,6 +15,7 @@ declare module 'vue' {
     AiiModelAddModal: typeof import('./src/components/chatroom/AiiModelAddModal.vue')['default']
     AiiProviderAddModal: typeof import('./src/components/chatroom/AiiProviderAddModal.vue')['default']
     ChangeEmailModal: typeof import('./src/components/admin/ChangeEmailModal.vue')['default']
+    ChangePhoneModal: typeof import('./src/components/admin/ChangePhoneModal.vue')['default']
     ChatControlPanel: typeof import('./src/components/chatroom/ChatControlPanel.vue')['default']
     ChatMessage: typeof import('./src/components/chatroom/ChatMessage.vue')['default']
     ChatPromptQuicker: typeof import('./src/components/chatroom/ChatPromptQuicker.vue')['default']
@@ -84,6 +85,7 @@ declare global {
   const AiiModelAddModal: typeof import('./src/components/chatroom/AiiModelAddModal.vue')['default']
   const AiiProviderAddModal: typeof import('./src/components/chatroom/AiiProviderAddModal.vue')['default']
   const ChangeEmailModal: typeof import('./src/components/admin/ChangeEmailModal.vue')['default']
+  const ChangePhoneModal: typeof import('./src/components/admin/ChangePhoneModal.vue')['default']
   const ChatControlPanel: typeof import('./src/components/chatroom/ChatControlPanel.vue')['default']
   const ChatMessage: typeof import('./src/components/chatroom/ChatMessage.vue')['default']
   const ChatPromptQuicker: typeof import('./src/components/chatroom/ChatPromptQuicker.vue')['default']

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>

webui/tsconfig.node.json

@@ -13,13 +13,10 @@
     // Bundler mode provides a smoother developer experience.
     "module": "preserve",
     "moduleResolution": "bundler",
-
     // Include Node.js types and avoid accidentally including other `@types/*` packages.
     "types": ["node"],
-
     // Disable emitting output during `vue-tsc --build`, which is used for type-checking only.
     "noEmit": true,
-
     // `vue-tsc --build` produces a .tsbuildinfo file for incremental type-checking.
     // Specified here to keep it out of the root directory.
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo"

webui/vite.config.ts

@@ -4,15 +4,15 @@ import {defineConfig} from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import vueDevTools from 'vite-plugin-vue-devtools'
-import {readFileSync} from "node:fs";
-import {resolve} from "path";
+import {readFileSync} from 'node:fs'
+import {resolve} from 'path'
 import AutoImport from 'unplugin-auto-import/vite'
 import {NaiveUiResolver} from 'unplugin-vue-components/resolvers'
 import Components from 'unplugin-vue-components/vite'
-import {unheadVueComposablesImports} from "@unhead/vue";
+import {unheadVueComposablesImports} from '@unhead/vue'
 
 // 从 package.json 里搞到 WebUI 版本号
-const pkg = JSON.parse(readFileSync(resolve(__dirname, 'package.json'), 'utf-8'));
+const pkg = JSON.parse(readFileSync(resolve(__dirname, 'package.json'), 'utf-8'))
 
 // https://vite.dev/config/
 export default defineConfig({
@@ -24,22 +24,17 @@ export default defineConfig({
       imports: [
         'vue',
         {
-          'naive-ui': [
-            'useDialog',
-            'useMessage',
-            'useNotification',
-            'useLoadingBar'
-          ]
+          'naive-ui': ['useDialog', 'useMessage', 'useNotification', 'useLoadingBar'],
         },
         unheadVueComposablesImports,
-      ]
+      ],
     }),
     Components({
-      resolvers: [NaiveUiResolver()]
-    })
+      resolvers: [NaiveUiResolver()],
+    }),
   ],
   define: {
-    __VERSION__: JSON.stringify(pkg.version)
+    __VERSION__: JSON.stringify(pkg.version),
   },
   build: {
     rolldownOptions: {
@@ -47,11 +42,11 @@ export default defineConfig({
         index: resolve(__dirname, 'index.html'),
       },
     },
-    outDir: "../src/nyahome/static"
+    outDir: '../src/nyahome/static',
   },
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
     },
   },
   server: {