fix: style

src/layout/header/Actions/component/ThemeDropdown.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { NPopselect } from 'naive-ui'
-import { computed, h, ref } from 'vue'
+import { computed, h } from 'vue'
 
 import { ButtonAnimation } from '@/components'
 import { usePersonalization } from '@/composable/usePersonalization'
@@ -9,8 +9,6 @@ import type { Theme } from '@/composable/usePersonalization'
 
 const { setTheme, theme } = usePersonalization()
 
-const themeKey = ref(theme.value)
-
 const themeDropdownOptions = [
   {
     icon: () => h('span', { class: 'iconify ph--sun size-5' }),
@@ -60,7 +58,7 @@ function renderSelectLabel(option: (typeof themeDropdownOptions)[number]) {
 <template>
   <NPopselect
     trigger="click"
-    v-model:value="themeKey"
+    v-model:value="theme"
     :options="themeDropdownOptions"
     :render-label="renderSelectLabel"
     show-arrow

src/views/sign-in/index.vue

@@ -95,9 +95,11 @@ onUnmounted(() => {
 })
 </script>
 <template>
-  <div class="relative flex h-screen items-center justify-center bg-neutral-50 dark:bg-neutral-900">
+  <div
+    class="relative flex h-screen items-center justify-center bg-neutral-50 transition-[background-color] duration-300 ease-naive-bezier dark:bg-neutral-900"
+  >
     <div
-      class="absolute top-0 left-0 size-full bg-neutral-200/45 dark:bg-neutral-800/50"
+      class="absolute top-0 left-0 size-full bg-neutral-200/45 transition-[background-color] duration-300 ease-naive-bezier dark:bg-neutral-800/50"
       :style="{
         'mask-image': `url(${topographySvg})`,
         '-webkit-mask-image': `url(${topographySvg})`,
@@ -108,7 +110,7 @@ onUnmounted(() => {
       }"
     />
     <div
-      class="pointer-events-none absolute inset-0 z-10"
+      class="pointer-events-none absolute inset-0 z-10 transition-[filter] duration-300 ease-naive-bezier"
       :style="{
         'background-image': `url(${topographySvg})`,
         'background-size': textureMaskParams.size,
@@ -118,7 +120,9 @@ onUnmounted(() => {
       }"
     />
     <div class="relative z-50 flex h-[480px] w-[800px] rounded shadow-lg">
-      <div class="flex-1 bg-neutral-50 py-6 pl-6 text-primary dark:bg-neutral-850">
+      <div
+        class="flex-1 bg-neutral-50 py-6 pl-6 text-primary transition-[background-color] duration-300 ease-naive-bezier dark:bg-neutral-850"
+      >
         <NCarousel
           draggable
           :show-dots="false"
@@ -132,7 +136,9 @@ onUnmounted(() => {
           <Illustration3 class="p-5" />
         </NCarousel>
       </div>
-      <div class="relative flex w-[340px] flex-col bg-white px-10 py-12 dark:bg-neutral-800">
+      <div
+        class="relative flex w-[340px] flex-col bg-white px-10 py-12 transition-[background-color] duration-300 ease-naive-bezier dark:bg-neutral-800"
+      >
         <div class="absolute top-0 left-0 z-50 flex w-full items-center justify-end gap-x-4 p-4">
           <ThemeColorPopover />
           <ThemeDropdown />
@@ -140,7 +146,7 @@ onUnmounted(() => {
         <div>
           <div>
             <h2 class="text-2xl">登&nbsp;录</h2>
-            <p class="text-neutral-400 dark:text-neutral-500">SIGN IN</p>
+            <p class="text-neutral-400 dark:text-neutral-500 transition-[color] duration-300 ease-naive-bezier">SIGN IN</p>
           </div>
           <div class="mt-12">
             <NForm