fix: 解决界面设置无法上传大图片的问题 (#4332)

backend/init/router/router.go

@@ -2,6 +2,8 @@ package router
 
 import (
 	"fmt"
+	"net/http"
+
 	"github.com/1Panel-dev/1Panel/backend/global"
 	"github.com/1Panel-dev/1Panel/backend/i18n"
 	"github.com/1Panel-dev/1Panel/backend/middleware"
@@ -12,7 +14,6 @@ import (
 	"github.com/gin-gonic/gin"
 	swaggerfiles "github.com/swaggo/files"
 	ginSwagger "github.com/swaggo/gin-swagger"
-	"net/http"
 )
 
 var (
@@ -21,6 +22,7 @@ var (
 
 func setWebStatic(rootRouter *gin.RouterGroup) {
 	rootRouter.StaticFS("/public", http.FS(web.Favicon))
+	rootRouter.Static("/api/v1/images", "./uploads")
 	rootRouter.Use(func(c *gin.Context) {
 		c.Next()
 	})

frontend/src/hooks/use-logo.ts

@@ -0,0 +1,18 @@
+import { GlobalStore } from '@/store';
+import { searchXSetting } from '@/xpack/api/modules/setting';
+
+export const useLogo = async () => {
+    const globalStore = GlobalStore();
+    const res = await searchXSetting();
+    localStorage.setItem('1p-favicon', res.data.logo);
+    globalStore.themeConfig.title = res.data.title;
+    globalStore.themeConfig.logo = res.data.logo;
+    globalStore.themeConfig.logoWithText = res.data.logoWithText;
+    globalStore.themeConfig.favicon = res.data.favicon;
+
+    const link = (document.querySelector("link[rel*='icon']") || document.createElement('link')) as HTMLLinkElement;
+    link.type = 'image/x-icon';
+    link.rel = 'shortcut icon';
+    link.href = globalStore.themeConfig.favicon ? '/api/v1/images/favicon' : '/public/favicon.png';
+    document.getElementsByTagName('head')[0].appendChild(link);
+};

frontend/src/layout/components/Sidebar/components/Logo.vue

@@ -13,13 +13,13 @@ const globalStore = GlobalStore();
 const getLogoUrl = (isCollapse: boolean) => {
     if (isCollapse) {
         if (globalStore.themeConfig.logo) {
-            return globalStore.themeConfig.logo;
+            return '/api/v1/images/logo';
         } else {
             return new URL(`../../../../assets/images/1panel-logo-light.png`, import.meta.url).href;
         }
     } else {
         if (globalStore.themeConfig.logoWithText) {
-            return globalStore.themeConfig.logoWithText;
+            return '/api/v1/images/logoWithText';
         } else {
             return new URL(`../../../../assets/images/1panel-menu-light.png`, import.meta.url).href;
         }
@@ -35,6 +35,7 @@ const getLogoUrl = (isCollapse: boolean) => {
     height: 55px;
     img {
         object-fit: contain;
+        width: 95%;
         height: 40px;
     }
 }

frontend/src/layout/index.vue

@@ -23,6 +23,7 @@ import { MenuStore } from '@/store/modules/menu';
 import { DeviceType } from '@/enums/app';
 import { useI18n } from 'vue-i18n';
 import { useTheme } from '@/hooks/use-theme';
+import { useLogo } from '@/hooks/use-logo';
 import { getLicense, getSettingInfo, getSystemAvailable } from '@/api/modules/setting';
 useResize();
 
@@ -88,12 +89,12 @@ const updateDarkMode = async (event: MediaQueryListEvent) => {
     switchDark();
 };
 
-const initStatus = () => {
-    document.title = globalStore.themeConfig.panelName;
+const initFavicon = () => {
+    let favicon = localStorage.getItem('1p-favicon');
     const link = (document.querySelector("link[rel*='icon']") || document.createElement('link')) as HTMLLinkElement;
     link.type = 'image/x-icon';
     link.rel = 'shortcut icon';
-    link.href = globalStore.themeConfig.favicon;
+    link.href = favicon ? '/api/v1/images/favicon' : '/public/favicon.png';
     document.getElementsByTagName('head')[0].appendChild(link);
 };
 
@@ -123,9 +124,10 @@ onBeforeUnmount(() => {
     timer = null;
 });
 onMounted(() => {
-    initStatus();
     loadStatus();
+    initFavicon();
     loadDataFromDB();
+    useLogo();
     loadProductProFromDB();
 
     const mqList = window.matchMedia('(prefers-color-scheme: dark)');

frontend/src/views/setting/about/index.vue

@@ -63,9 +63,9 @@ const toGithubStar = () => {
 
 const getLogoUrl = () => {
     if (globalStore.themeConfig.logo) {
-        return globalStore.themeConfig.logo;
+        return '/api/v1/images/logo';
     } else {
-        return new URL(`../../../../assets/images/1panel-logo-light.png`, import.meta.url).href;
+        return new URL(`../../../assets/images/1panel-logo-light.png`, import.meta.url).href;
     }
 };