优化 Logo 相关内容 (#2099)

pixelmaxQm · web-flow · commit 2e224a8e58d6 · 2025-09-21T17:31:53.000+08:00
* chore: 更新.gitignore，添加对本地配置文件的忽略

* feat(logo): 新增Logo组件并在多个页面中替换原有logo实现

* fix: 修复菜单 Logo 部分删除文本后显示异常的问题
diff --git a/.gitignore b/.gitignore
@@ -27,6 +27,7 @@ rm_file/
 /server/server
 /server/latest_log
 /server/__debug_bin*
+/server/*.local.yaml
 server/uploads/
 
 *.iml
diff --git a/web/src/components/logo/index.vue b/web/src/components/logo/index.vue
@@ -0,0 +1,82 @@
+<script setup>
+import { ref, watchEffect } from 'vue';
+import { useAppStore } from '@/pinia/modules/app.js';
+import { storeToRefs } from 'pinia';
+
+const props = defineProps({
+  // logo 尺寸，单位为:rem
+  size: {
+    type: Number,
+    default: 2
+  }
+})
+
+const darkLogoPath = '/logo-dark.png';
+const lightLogoPath = '/logo.png';
+
+const appStore = useAppStore();
+const { isDark } = storeToRefs(appStore);
+
+const logoSrc = ref('');
+const showTextPlaceholder = ref(false);
+
+// 检查图片是否存在
+function checkImageExists(url) {
+  return new Promise((resolve) => {
+    const tryToLoad = new Image();
+    tryToLoad.onload = () => resolve(true);
+    tryToLoad.onerror = () => resolve(false);
+    tryToLoad.src = url;
+  });
+}
+
+watchEffect(async () => {
+  showTextPlaceholder.value = false; // 重置占位符状态
+
+  // 暗色模式直接 load，可以省一次亮色的 load
+  if (isDark.value && await checkImageExists(darkLogoPath)) {
+    logoSrc.value = darkLogoPath;
+    return;
+  }
+
+  if (await checkImageExists(lightLogoPath)) {
+    logoSrc.value = lightLogoPath;
+    return
+  }
+
+  // 到这里就包没有提供两种 logo 了
+  showTextPlaceholder.value = true;
+  console.error(
+    '错误: 在公共目录中找不到logo.png（或logo-dark.png）。'
+  );
+  console.warn(
+    '解决方案: 请在您的公共目录(/public)中放置logo.png和/或logo-dark.png文件，或确保路径正确。'
+  );
+});
+
+// 直接用 16px 作为默认的基准大小
+const SPACING = 16
+function getSize() {
+  return {
+    width: `${props.size * SPACING}px`,
+    height: `${props.size * SPACING}px`,
+  }
+}
+</script>
+
+<template>
+  <img v-if="!showTextPlaceholder && logoSrc" :src="logoSrc" :alt="$GIN_VUE_ADMIN.appName" class="object-contain"
+    :style="{
+      ...getSize()
+    }" :class="{
+      'filter invert-[90%] hue-rotate-180 brightness-110':
+        isDark && logoSrc === '/logo.png',
+    }" />
+  <div v-else-if="showTextPlaceholder"
+    class="rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center text-gray-700 dark:text-gray-200 font-bold text-xs"
+    :style="{
+      ...getSize()
+    }">
+    GVA
+  </div>
+</template>
diff --git a/web/src/core/config.js b/web/src/core/config.js
@@ -7,7 +7,6 @@ const greenText = (text) => `\x1b[32m${text}\x1b[0m`
 
 const config = {
   appName: 'Gin-Vue-Admin',
-  appLogo: 'logo.png',
   showViteLogo: true,
   logs: []
 }
diff --git a/web/src/view/layout/header/index.vue b/web/src/view/layout/header/index.vue
@@ -9,15 +9,11 @@
   >
     <div class="flex items-center cursor-pointer flex-1">
       <div
-        class="flex items-center cursor-pointer"
+        class="flex items-center justify-center cursor-pointer"
         :class="isMobile ? '' : 'min-w-48'"
         @click="router.push({ path: '/' })"
       >
-        <img
-          alt
-          class="h-12 bg-white rounded-full"
-          :src="$GIN_VUE_ADMIN.appLogo"
-        />
+        <Logo />
         <div
           v-if="!isMobile"
           class="inline-flex font-bold text-2xl ml-2"
@@ -112,6 +108,8 @@
   import { setUserAuthority } from '@/api/user'
   import { fmtTitle } from '@/utils/fmtRouterTitle'
   import gvaAside from '@/view/layout/aside/index.vue'
+  import Logo from '@/components/logo/index.vue'
+
   const userStore = useUserStore()
   const router = useRouter()
   const route = useRoute()
diff --git a/web/src/view/layout/setting/modules/general/index.vue b/web/src/view/layout/setting/modules/general/index.vue
@@ -49,69 +49,61 @@
       <div class="section-content">
         <div class="bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-6 shadow-sm">
           <div class="space-y-5">
-            <div class="bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-5 flex items-center justify-between hover:shadow-md transition-all duration-150 ease-in-out hover:-translate-y-0.5">
+            <div
+              class="bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-5 flex items-center justify-between hover:shadow-md transition-all duration-150 ease-in-out hover:-translate-y-0.5">
               <div class="flex items-center gap-4">
-                <div class="w-12 h-12 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl flex items-center justify-center text-red-600 dark:text-red-400 text-xl">
+                <div
+                  class="w-12 h-12 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl flex items-center justify-center text-red-600 dark:text-red-400 text-xl">
                   🔄
                 </div>
                 <div>
                   <h4 class="text-sm font-semibold text-gray-900 dark:text-white">重置配置</h4>
                   <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">将所有设置恢复为默认值</p>
                 </div>
               </div>
-              <el-button
-                type="danger"
-                size="small"
+              <el-button type="danger" size="small"
                 class="rounded-lg font-medium transition-all duration-150 ease-in-out hover:-translate-y-0.5"
-                @click="handleResetConfig"
-              >
+                @click="handleResetConfig">
                 重置配置
               </el-button>
             </div>
 
-            <div class="bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-5 flex items-center justify-between hover:shadow-md transition-all duration-150 ease-in-out hover:-translate-y-0.5">
+            <div
+              class="bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-5 flex items-center justify-between hover:shadow-md transition-all duration-150 ease-in-out hover:-translate-y-0.5">
               <div class="flex items-center gap-4">
-                <div class="w-12 h-12 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-xl flex items-center justify-center text-blue-600 dark:text-blue-400 text-xl">
+                <div
+                  class="w-12 h-12 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-xl flex items-center justify-center text-blue-600 dark:text-blue-400 text-xl">
                   📤
                 </div>
                 <div>
                   <h4 class="text-sm font-semibold text-gray-900 dark:text-white">导出配置</h4>
                   <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">导出当前配置为 JSON 文件</p>
                 </div>
               </div>
-              <el-button
-                type="primary"
-                size="small"
+              <el-button type="primary" size="small"
                 class="rounded-lg font-medium transition-all duration-150 ease-in-out hover:-translate-y-0.5"
                 :style="{ backgroundColor: config.primaryColor, borderColor: config.primaryColor }"
-                @click="handleExportConfig"
-              >
+                @click="handleExportConfig">
                 导出配置
               </el-button>
             </div>
 
-            <div class="bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-5 flex items-center justify-between hover:shadow-md transition-all duration-150 ease-in-out hover:-translate-y-0.5">
+            <div
+              class="bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-5 flex items-center justify-between hover:shadow-md transition-all duration-150 ease-in-out hover:-translate-y-0.5">
               <div class="flex items-center gap-4">
-                <div class="w-12 h-12 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-xl flex items-center justify-center text-green-600 dark:text-green-400 text-xl">
+                <div
+                  class="w-12 h-12 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-xl flex items-center justify-center text-green-600 dark:text-green-400 text-xl">
                   📥
                 </div>
                 <div>
                   <h4 class="text-sm font-semibold text-gray-900 dark:text-white">导入配置</h4>
                   <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">从 JSON 文件导入配置</p>
                 </div>
               </div>
-              <el-upload
-                ref="uploadRef"
-                :auto-upload="false"
-                :show-file-list="false"
-                accept=".json"
-                @change="handleImportConfig"
-              >
-                <el-button
-                  type="success"
-                  size="small"
-                  class="rounded-lg font-medium transition-all duration-150 ease-in-out hover:-translate-y-0.5"
-                >
+              <el-upload ref="uploadRef" :auto-upload="false" :show-file-list="false" accept=".json"
+                @change="handleImportConfig">
+                <el-button type="success" size="small"
+                  class="rounded-lg font-medium transition-all duration-150 ease-in-out hover:-translate-y-0.5">
                   导入配置
                 </el-button>
               </el-upload>
@@ -131,35 +123,25 @@
       <div class="section-content">
         <div class="bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-6 shadow-sm">
           <div class="flex items-start gap-5">
-            <div class="w-16 h-16 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl flex items-center justify-center flex-shrink-0 shadow-sm">
-              <img
-                src="/logo.png"
-                alt="Gin-Vue-Admin Logo"
-                class="w-10 h-10 object-contain"
-                @error="handleLogoError"
-              />
+            <div
+              class="w-16 h-16 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl flex items-center justify-center flex-shrink-0 shadow-sm">
+              <Logo />
             </div>
             <div class="flex-1">
               <h4 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">Gin-Vue-Admin</h4>
               <p class="text-sm text-gray-600 dark:text-gray-400 mb-5 leading-relaxed">
                 基于 Vue3 + Gin 的全栈开发基础平台，提供完整的后台管理解决方案
               </p>
               <div class="flex items-center gap-3 text-sm">
-                <a
-                  href="https://github.com/flipped-aurora/gin-vue-admin"
-                  target="_blank"
+                <a href="https://github.com/flipped-aurora/gin-vue-admin" target="_blank"
                   class="font-medium transition-colors duration-150 hover:underline"
-                  :style="{ color: config.primaryColor }"
-                >
+                  :style="{ color: config.primaryColor }">
                   GitHub 仓库
                 </a>
                 <span class="text-gray-400 dark:text-gray-500">·</span>
-                <a
-                  href="https://www.gin-vue-admin.com/"
-                  target="_blank"
+                <a href="https://www.gin-vue-admin.com/" target="_blank"
                   class="font-medium transition-colors duration-150 hover:underline"
-                  :style="{ color: config.primaryColor }"
-                >
+                  :style="{ color: config.primaryColor }">
                   官方文档
                 </a>
               </div>
@@ -172,10 +154,11 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { storeToRefs } from 'pinia'
 import { useAppStore } from '@/pinia'
+import Logo from '@/components/logo/index.vue'
 
 defineOptions({
   name: 'GeneralSettings'
@@ -187,7 +170,6 @@ const uploadRef = ref()
 
 const browserInfo = ref('')
 const screenResolution = ref('')
-const logoUrl = ref('')
 
 onMounted(() => {
   const userAgent = navigator.userAgent
@@ -206,10 +188,6 @@ onMounted(() => {
   screenResolution.value = `${screen.width}×${screen.height}`
 })
 
-const handleLogoError = () => {
-  logoUrl.value = ''
-}
-
 const handleResetConfig = async () => {
   try {
     await ElMessageBox.confirm(
@@ -221,7 +199,7 @@ const handleResetConfig = async () => {
         type: 'warning'
       }
     )
-    
+
     appStore.resetConfig()
     ElMessage.success('配置已重置')
   } catch {
@@ -233,15 +211,15 @@ const handleExportConfig = () => {
   const configData = JSON.stringify(config.value, null, 2)
   const blob = new Blob([configData], { type: 'application/json' })
   const url = URL.createObjectURL(blob)
-  
+
   const link = document.createElement('a')
   link.href = url
   link.download = `gin-vue-admin-config-${new Date().toISOString().split('T')[0]}.json`
   document.body.appendChild(link)
   link.click()
   document.body.removeChild(link)
   URL.revokeObjectURL(url)
-  
+
   ElMessage.success('配置已导出')
 }
 
@@ -250,13 +228,13 @@ const handleImportConfig = (file) => {
   reader.onload = (e) => {
     try {
       const importedConfig = JSON.parse(e.target.result)
-      
+
       Object.keys(importedConfig).forEach(key => {
         if (key in config.value) {
           config.value[key] = importedConfig[key]
         }
       })
-      
+
       ElMessage.success('配置已导入')
     } catch (error) {
       ElMessage.error('配置文件格式错误')
@@ -280,6 +258,7 @@ const handleImportConfig = (file) => {
     opacity: 0;
     transform: translateY(12px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
diff --git a/web/src/view/login/index.vue b/web/src/view/login/index.vue
@@ -13,7 +13,7 @@
         >
           <div>
             <div class="flex items-center justify-center">
-              <img class="w-24" :src="$GIN_VUE_ADMIN.appLogo" alt />
+              <Logo :size="6" />
             </div>
             <div class="mb-9">
               <p class="text-center text-4xl font-bold">
@@ -131,6 +131,7 @@
   import { ElMessage } from 'element-plus'
   import { useRouter } from 'vue-router'
   import { useUserStore } from '@/pinia/modules/user'
+  import Logo from '@/components/logo/index.vue'
 
   defineOptions({
     name: 'Login'

Original file line number	Diff line number	Diff line change
@@ -7,7 +7,6 @@ const greenText = (text) => `\x1b[32m${text}\x1b[0m`
`7`	`7`
`8`	`8`	`const config = {`
`9`	`9`	`appName: 'Gin-Vue-Admin',`
`10`		`- appLogo: 'logo.png',`
`11`	`10`	`showViteLogo: true,`
`12`	`11`	`logs: []`
`13`	`12`	`}`