评论功能5

Author: biliww

yunyu-web/app/components/ThemeModeSwitch.vue

@@ -5,8 +5,19 @@ import { computed, onMounted, ref } from 'vue'
  * 主题切换组件。
  * 作用：以前后台共用的单按钮方式切换明亮、暗黑、系统三种主题模式。
  */
+interface ThemeModeSwitchProps {
+  /**
+   * 组件展示风格。
+   * 作用：允许在导航栏中使用纯图标样式，在后台继续复用默认按钮样式。
+   */
+  variant?: 'default' | 'icon'
+}
+
 const colorMode = useColorMode()
 const isMounted = ref(false)
+const props = withDefaults(defineProps<ThemeModeSwitchProps>(), {
+  variant: 'default'
+})
 
 const themeOptions = [
   {
@@ -56,6 +67,18 @@ const nextTheme = computed(() => {
   return themeOptions[nextIndex]
 })
 
+/**
+ * 计算按钮样式。
+ * 作用：根据不同使用场景切换为默认按钮态或纯图标态，避免导航栏额外出现背景块。
+ */
+const buttonClassName = computed(() => {
+  if (props.variant === 'icon') {
+    return 'inline-flex size-10 items-center justify-center text-slate-600 transition duration-200 hover:text-slate-900 focus:outline-none focus:ring-0 dark:text-slate-300 dark:hover:text-slate-50'
+  }
+
+  return 'inline-flex size-10 items-center justify-center rounded-[8px] border border-slate-200 bg-white text-slate-600 transition duration-200 hover:border-slate-300 hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-sky-400/35 dark:border-slate-700 dark:bg-slate-950/70 dark:text-slate-300 dark:hover:border-slate-600 dark:hover:text-slate-50'
+})
+
 /**
  * 顺序切换主题模式。
  * 作用：按照“明亮 -> 暗黑 -> 系统”的顺序循环切换。
@@ -72,7 +95,7 @@ onMounted(() => {
 <template>
   <button
     type="button"
-    class="inline-flex size-10 items-center justify-center rounded-[8px] border border-slate-200 bg-white text-slate-600 transition duration-200 hover:border-slate-300 hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-sky-400/35 dark:border-slate-700 dark:bg-slate-950/70 dark:text-slate-300 dark:hover:border-slate-600 dark:hover:text-slate-50"
+    :class="buttonClassName"
     :aria-label="`当前主题：${activeTheme.label}，点击切换到${nextTheme.label}`"
     :title="`当前主题：${activeTheme.label}，点击切换到${nextTheme.label}`"
     @click="cycleTheme"

yunyu-web/app/layouts/default.vue

@@ -266,8 +266,14 @@ async function handleUserMenuSelect(item: { key: string }) {
         >
           <div class="flex min-w-0 items-center gap-3 sm:gap-4">
             <NuxtLink to="/" class="flex shrink-0 items-center gap-3">
-              <div class="flex h-11 w-11 items-center justify-center rounded-2xl bg-[linear-gradient(135deg,#38bdf8,#fb923c)] text-sm font-semibold text-white shadow-[0_12px_28px_-16px_rgba(56,189,248,0.7)]">
-                云
+              <div
+                class="flex h-11 w-11 items-center justify-center overflow-hidden rounded-2xl shadow-[0_12px_28px_-18px_rgba(15,23,42,0.18)]"
+              >
+                <img
+                  src="/icon-512-maskable.png"
+                  alt="云屿图标"
+                  class="h-full w-full object-cover"
+                >
               </div>
               <div class="min-w-0">
                 <p class="text-[clamp(1.25rem,1.05rem+0.75vw,1.7rem)] font-semibold leading-[0.96] tracking-[-0.05em] [font-family:var(--font-display)]" :class="brandTitleClassName">云屿</p>
@@ -294,7 +300,7 @@ async function handleUserMenuSelect(item: { key: string }) {
           </div>
 
           <div class="flex shrink-0 items-center gap-2">
-            <ThemeModeSwitch />
+            <ThemeModeSwitch variant="icon" />
 
             <YunyuDropdownMenu
               v-if="isLoggedIn"

yunyu-web/nuxt.config.ts

@@ -37,18 +37,23 @@ export default defineNuxtConfig({
         },
         {
           rel: 'icon',
-          type: 'image/svg+xml',
-          href: '/favicon.svg'
+          type: 'image/x-icon',
+          href: '/favicon.ico',
+          sizes: 'any'
         },
         {
-          rel: 'alternate icon',
-          type: 'image/x-icon',
-          href: '/favicon.ico'
+          rel: 'apple-touch-icon',
+          href: '/apple-touch-icon.png'
+        },
+        {
+          rel: 'manifest',
+          href: '/site.webmanifest'
         }
       ],
       meta: [
         { charset: 'utf-8' },
         { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+        { name: 'theme-color', content: '#f7f5ef' },
         {
           name: 'description',
           content: '云屿前端项目，基于 Nuxt 4 构建内容站与后台管理界面。'