feat: 增加界面设置功能 (#4128)

frontend/src/hooks/use-logo.ts

@@ -0,0 +1,36 @@
+import { GlobalStore } from '@/store';
+import { searchXSetting } from '@/xpack/frontend/api/modules/setting';
+import { computed } from 'vue';
+
+export const useLogo = async () => {
+    const globalStore = GlobalStore();
+    const themeConfig = computed(() => globalStore.themeConfig);
+
+    if (!themeConfig.value.logo) {
+        const res = await searchXSetting();
+        globalStore.setThemeConfig({
+            ...themeConfig.value,
+            title: res.data.title,
+            logo: res.data.logo,
+            logoWithText: res.data.logoWithText,
+            favicon: res.data.favicon,
+        });
+    }
+    let link = document.querySelector("link[rel*='icon']") as HTMLLinkElement | null;
+    if (link) {
+        if (globalStore.themeConfig.favicon) {
+            link.href = globalStore.themeConfig.favicon;
+        } else {
+            link.href = '/public/favicon.png';
+        }
+    } else {
+        const newLink = document.createElement('link');
+        newLink.rel = 'icon';
+        if (globalStore.themeConfig.favicon) {
+            newLink.href = globalStore.themeConfig.favicon;
+        } else {
+            newLink.href = '/public/favicon.png';
+        }
+        document.head.appendChild(newLink);
+    }
+};

frontend/src/lang/modules/en.ts

@@ -2245,6 +2245,24 @@ const message = {
                 disableHelper:
                     'The anti-tampering function of website {0} is about to be disabled. Do you want to continue?',
             },
+            setting: {
+                setting: 'Interface Settings',
+                title: 'Panel Description',
+                titleHelper:
+                    'Will be displayed on the user login page (e.g., Linux Server Operation and Maintenance Management Panel)',
+                logo: 'Logo',
+                logoHelper:
+                    'Will be displayed on the top left of the management page when the menu is collapsed (recommended image size: 82px*82px)',
+                logoWithText: 'Logo (with text)',
+                logoWithTextHelper:
+                    'Will be displayed on the top left of the management page when the menu is expanded (recommended image size: 185px*55px)',
+                favicon: 'Website Icon',
+                faviconHelper: 'Website icon (recommended image size: 16px*16px)',
+                reUpload: 'Re-upload',
+                supportType: 'Only jpg/png/jpeg files are allowed!',
+                setDefault: 'Restore Default',
+                reset: 'Reset',
+            },
         },
     },
 };

frontend/src/lang/modules/tw.ts

@@ -2096,6 +2096,21 @@ const message = {
                 enableHelper: '即將啟用 {0} 網站的防窜改功能，以提升網站安全性，是否繼續？',
                 disableHelper: '即將關閉 {0} 網站的防窜改功能，是否繼續？',
             },
+            setting: {
+                setting: '界面設置',
+                title: '面板描述',
+                titleHelper: '將會顯示在使用者登錄頁面 (例: Linux 伺服器運維管理面板)',
+                logo: 'Logo',
+                logoHelper: '將會顯示在菜單收縮時管理頁面左上方 (建議圖片大小為: 82px*82px)',
+                logoWithText: 'Logo (帶文字)',
+                logoWithTextHelper: '將會顯示在菜單展開時管理頁面左上方 (建議圖片大小為: 185px*55px)',
+                favicon: '網站圖標',
+                faviconHelper: '網站圖標 (建議圖片大小為: 16px*16px)',
+                reUpload: '重新上傳',
+                supportType: '只能上傳 jpg/png/jpeg 檔案!',
+                setDefault: '恢復默認',
+                reset: '重置',
+            },
         },
     },
 };

frontend/src/lang/modules/zh.ts

@@ -2098,6 +2098,21 @@ const message = {
             enableHelper: '即将启用 {0} 网站的防窜改功能，以提升网站安全性，是否继续？',
             disableHelper: '即将关闭 {0} 网站的防窜改功能，是否继续？',
         },
+        setting: {
+            setting: '界面设置',
+            title: '面板描述',
+            titleHelper: '将会显示在用户登录页面 (例: Linux 服务器运维管理面板)',
+            logo: 'Logo',
+            logoHelper: '将会显示在菜单收缩时管理页面左上方 (建议图片大小为: 82px*82px)',
+            logoWithText: 'Logo (带文字)',
+            logoWithTextHelper: '将会显示在菜单展开时管理页面左上方 (建议图片大小为: 185px*55px)',
+            favicon: '网站图标',
+            faviconHelper: '网站图标 (建议图片大小为: 16px*16px)',
+            reUpload: '重新上传',
+            supportType: '只能上传 jpg/png/jpeg 文件!',
+            setDefault: '恢复默认',
+            reset: '重置',
+        },
     },
 };
 export default {

frontend/src/store/index.ts

@@ -20,6 +20,11 @@ export const GlobalStore = defineStore({
             primary: '#005EEB',
             theme: 'auto',
             footer: true,
+
+            title: '',
+            logo: '',
+            logoWithText: '',
+            favicon: '',
         },
         isFullScreen: false,
         isOnRestart: false,

frontend/src/store/interface/index.ts

@@ -5,6 +5,11 @@ export interface ThemeConfigProp {
     primary: string;
     theme: string; // dark | bright ｜ auto
     footer: boolean;
+
+    title: string;
+    logo: string;
+    logoWithText: string;
+    favicon: string;
 }
 
 export interface GlobalState {