refactor!: 升级 @nuxt/ui@3，重构所有页面和组件，调整配置，移除不在需求中的页面

app/layouts/default.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
+import type { DropdownMenuItem } from '@nuxt/ui'
 import ModalAuthentication from '~/components/ModalAuthentication.vue'
 
 const colorMode = useColorMode()
 const dayjs = useDayjs()
-const modal = useModal()
+const overlay = useOverlay()
 const toast = useToast()
 const router = useRouter()
 const loginState = useLoginState()
@@ -40,7 +41,9 @@ const links = [
   },
 ]
 
-const items = [
+const items: (DropdownMenuItem & {
+  icon?: string
+})[][] = [
   [
     {
       label: 'support@fenshenzhike.com',
@@ -64,7 +67,7 @@ const items = [
           toast.add({
             title: '退出登录',
             description: `您已成功退出登录账号`,
-            color: 'indigo',
+            color: 'success',
             icon: 'i-tabler-logout-2',
           })
           router.push({ path: '/user/authenticate' })
@@ -74,7 +77,8 @@ const items = [
 ]
 
 const open_login_modal = () => {
-  modal.open(ModalAuthentication)
+  const modal = overlay.create(ModalAuthentication)
+  modal.open()
 }
 
 onMounted(async () => {
@@ -97,22 +101,22 @@ onMounted(async () => {
       toast.add({
         title: '获取待审核用户失败',
         description: '获取未审核用户列表失败',
-        color: 'red',
+        color: 'error',
         icon: 'i-tabler-alert-triangle',
       })
     } else if (unverifiedUsers.data.total > 0) {
       toast.add({
         title: '有新用户等待审核',
         description: `有 ${unverifiedUsers.data.total} 个新用户注册，请尽快审核`,
-        color: 'amber',
+        color: 'warning',
         icon: 'i-tabler-user-plus',
-        timeout: 0,
+        duration: 0,
         actions: [
           {
             label: '前往处理',
             variant: 'solid',
-            color: 'amber',
-            click: () => {
+            color: 'warning',
+            onClick: () => {
               router.push({
                 path: '/generation/admin/users',
                 query: {
@@ -123,7 +127,7 @@ onMounted(async () => {
           },
           // {
           //   label: '全部忽略',
-          //   click: () => {
+          //   onClick: () => {
           //     alert('ignored')
           //   },
           // },
@@ -144,7 +148,8 @@ onMounted(async () => {
         <!-- <span class="text-xs text-neutral-600 dark:text-neutral-300">眩生花科技</span> -->
       </h1>
       <!-- <div class="hidden md:block">
-        <UHorizontalNavigation
+        <NavigationMenu
+          orientation="horizontal"
           :links="links"
           class="select-none"
         />
@@ -157,7 +162,7 @@ onMounted(async () => {
                 ? 'i-line-md-sunny-outline-to-moon-alt-loop-transition'
                 : 'i-line-md-moon-alt-to-sunny-outline-loop-transition'
             "
-            color="gray"
+            color="neutral"
             variant="ghost"
             aria-label="Theme"
             @click="isDark = !isDark"
@@ -167,21 +172,24 @@ onMounted(async () => {
             label="登录或注册"
             size="xs"
             class="font-bold"
-            color="indigo"
+            color="primary"
             @click="open_login_modal"
           />
-          <UDropdown
+          <UDropdownMenu
             v-if="loginState.is_logged_in"
             :items="items"
-            :popper="{ placement: 'bottom-start' }"
-            :ui="{ item: { disabled: 'cursor-text select-text' } }"
+            :content="{
+              align: 'end',
+            }"
           >
             <UAvatar
               :alt="loginState.user.username.toUpperCase()"
               :src="loginState.user.avatar"
-              chip-color="amber"
-              chip-position="bottom-right"
-              chip-text="OP"
+              :chip="{
+                color: 'warning',
+                position: 'bottom-right',
+                text: 'OP',
+              }"
               size="md"
             />
             <template #account="{ item }">
@@ -190,7 +198,7 @@ onMounted(async () => {
                   已登录为
                   <UBadge
                     v-if="loginState.user.auth_code === 2"
-                    color="amber"
+                    color="warning"
                     size="xs"
                     variant="subtle"
                   >
@@ -207,11 +215,12 @@ onMounted(async () => {
             <template #item="{ item }">
               <span class="truncate">{{ item.label }}</span>
               <UIcon
+                v-if="item.icon"
                 :name="item.icon"
                 class="ms-auto size-4 shrink-0 text-gray-400 dark:text-gray-500"
               />
             </template>
-          </UDropdown>
+          </UDropdownMenu>
         </ClientOnly>
       </div>
     </header>
@@ -229,6 +238,8 @@ onMounted(async () => {
 </template>
 
 <style>
+@reference '@/assets/css/main.css';
+
 body {
   @apply bg-neutral-50 bg-fixed dark:bg-neutral-950;
   /* @apply bg-[url('~/assets/background-pattern.svg')] dark:bg-[url('~/assets/background-pattern-dark.svg')]; */
@@ -270,11 +281,13 @@ body {
 </style>
 
 <style scoped>
+@reference '@/assets/css/main.css';
+
 header {
-  @apply fixed inset-x-0 z-30 h-16 border-b bg-white;
-  @apply dark:border-neutral-800 dark:bg-neutral-900;
+  @apply fixed inset-x-0 z-30 h-16 border-b bg-white/50;
+  @apply dark:border-neutral-800 dark:bg-neutral-900/50;
   @apply flex flex-row items-center justify-between px-4;
-  @apply bg-opacity-50 backdrop-blur-3xl backdrop-saturate-150 dark:bg-opacity-50;
+  @apply backdrop-blur-3xl backdrop-saturate-150;
 }
 
 main {