feat: 完善界面设置功能 (#4316)

2024-11-23 18:49:21 +08:00 · 2024-03-26 16:44:07 +08:00 · 2024-03-26 16:44:07 +08:00 · 306082d625
commit 306082d625
parent 821b8dfe63
11 changed files with 50 additions and 63 deletions
--- a/frontend/index.html
+++ b/frontend/index.html
@ -2,7 +2,6 @@
 <html>
    <head>
        <meta charset="UTF-8" />
-        <link rel="icon" href="/public/favicon.png" />
        <meta name="robots" content="noindex,nofollow" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
        <title>loading...</title>
--- a/frontend/src/assets/images/favicon.png
+++ b/frontend/src/assets/images/favicon.png
--- a/frontend/src/hooks/use-logo.ts
+++ b/frontend/src/hooks/use-logo.ts
@ -1,36 +0,0 @@
-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);
-    }
-};
--- a/frontend/src/lang/modules/en.ts
+++ b/frontend/src/lang/modules/en.ts
@ -1445,7 +1445,7 @@ const message = {
        issue: 'Feedback',
        doc: 'Official document',
        star: 'Star',
-        description: '1Panel, Modern, open source Linux server operation and maintenance management panel.',
+        description: 'Linux server operation and maintenance management panel',
        forum: 'Forum Help',
        doc2: 'User Manual',
        currentVersion: 'Version',
@ -2325,11 +2325,9 @@ const message = {
        tamper: {
            tamper: 'Tamper',
            tamperHelper1:
-                'One-click deployment type of website, it is recommended to enable the application directory anti-tampering function;',
+                'For one-click deployment type websites, it is recommended to enable the application directory anti-tamper function; if the website cannot be used normally or backup and restore fail, please disable the anti-tamper function first;',
            tamperHelper2:
-                'If the website cannot be used normally or backup and restore fail after enabling the anti-tampering function, please disable the anti-tampering function first;',
-            tamperHelper3:
-                'Enabling tamper-proofing will restrict reading, writing, deleting, permission, and owner modification operations of protected files under non-excluded directories. Please choose carefully when setting [Exclude Directory] and [Protect].',
+                'It will restrict the read, write, delete, permission, and owner modification operations of protected files under non-excluded directories',
            op: 'Operation',
            create: 'Create',
            file: 'File',
--- a/frontend/src/lang/modules/tw.ts
+++ b/frontend/src/lang/modules/tw.ts
@ -1346,7 +1346,7 @@ const message = {
        issue: '問題反饋',
        doc: '官方文檔',
        star: '點亮 Star',
-        description: '1Panel，現代化、開源的 Linux 服務器運維管理面板。',
+        description: 'Linux 服務器運維管理面板',
        forum: '論壇求助',
        doc2: '使用手冊',
        currentVersion: '當前運行版本：',
@ -2173,10 +2173,9 @@ const message = {
        },
        tamper: {
            tamper: '防篡改',
-            tamperHelper1: '一鍵部署類型的網站，建議啟用應用目錄防篡改功能；',
-            tamperHelper2: '如果在啟用防篡改功能後出現網站無法正常使用或備份、恢復失敗的情況，請先關閉防篡改功能；',
-            tamperHelper3:
-                '啟用防篡改，將限制非排除目錄下受保護文件的讀寫、刪除、權限和所有者修改操作，請在設定 [排除目錄] 和 [保護] 時謹慎選擇。',
+            tamperHelper1:
+                '一鍵部署類型的網站，建議啟用應用目錄防篡改功能；如出現網站無法正常使用或備份、恢復失敗的情況，請先關閉防篡改功能；',
+            tamperHelper2: '將限制非排除目錄下受保護文件的讀寫、刪除、權限和所有者修改操作',
            op: '操作',
            create: '創建',
            file: '文件',
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@ -1347,7 +1347,7 @@ const message = {
        issue: '问题反馈',
        doc: '官方文档',
        star: '点亮 Star',
-        description: '1Panel，现代化、开源的 Linux 服务器运维管理面板。',
+        description: 'Linux 服务器运维管理面板',
        forum: '论坛求助',
        doc2: '使用手册',
        currentVersion: '当前运行版本：',
@ -2178,10 +2178,9 @@ const message = {
        },
        tamper: {
            tamper: '防篡改',
-            tamperHelper1: '一键部署类型的网站，建议启用应用目录防篡改功能；',
-            tamperHelper2: '如果在启用防篡改功能后出现网站无法正常使用或备份、恢复失败的情况，请先关闭防篡改功能；',
-            tamperHelper3:
-                '启用防篡改，将限制非排除目录下受保护文件的读写、删除、权限和所有者修改操作，请在设定 [排除目录] 和 [保护] 时谨慎选择。',
+            tamperHelper1:
+                '一键部署类型的网站，建议启用应用目录防篡改功能；如出现网站无法正常使用或备份、恢复失败的情况，请先关闭防篡改功能；',
+            tamperHelper2: '将限制非排除目录下受保护文件的读写、删除、权限和所有者修改操作',
            op: '操作',
            create: '创建',
            file: '文件',
@ -2207,13 +2206,14 @@ const message = {
            title: '面板描述',
            titleHelper: '将会显示在用户登录页面 (例: Linux 服务器运维管理面板)',
            logo: 'Logo',
-            logoHelper: '将会显示在菜单收缩时管理页面左上方 (建议图片大小为: 82px*82px)',
+            logoHelper: '将会显示在菜单收缩时管理页面左上方 (建议图片大小为: 82px*82px，最大支持 15KB )',
            logoWithText: 'Logo (带文字)',
-            logoWithTextHelper: '将会显示在菜单展开时管理页面左上方 (建议图片大小为: 185px*55px)',
+            logoWithTextHelper: '将会显示在菜单展开时管理页面左上方 (建议图片大小为: 185px*55px，最大支持 30KB )',
            favicon: '网站图标',
-            faviconHelper: '网站图标 (建议图片大小为: 16px*16px)',
+            faviconHelper: '网站图标 (建议图片大小为: 16px*16px，最大支持 8KB )',
            reUpload: '重新上传',
            supportType: '只能上传 jpg/png/jpeg 文件!',
+            supportSize: '只能上传小于 {0}KB 的文件!',
            setDefault: '恢复默认',
            reset: '重置',
        },
--- a/frontend/src/layout/components/Sidebar/components/Logo.vue
+++ b/frontend/src/layout/components/Sidebar/components/Logo.vue
@ -11,11 +11,18 @@ defineProps<{ isCollapse: boolean }>();
 const globalStore = GlobalStore();

 const getLogoUrl = (isCollapse: boolean) => {
-    const theme = globalStore.$state.themeConfig.theme || 'light';
    if (isCollapse) {
-        return new URL(`../../../../assets/images/1panel-logo-${theme}.png`, import.meta.url).href;
+        if (globalStore.themeConfig.logo) {
+            return globalStore.themeConfig.logo;
        } else {
-        return new URL(`../../../../assets/images/1panel-menu-${theme}.png`, import.meta.url).href;
+            return new URL(`../../../../assets/images/1panel-logo-light.png`, import.meta.url).href;
+        }
+    } else {
+        if (globalStore.themeConfig.logoWithText) {
+            return globalStore.themeConfig.logoWithText;
+        } else {
+            return new URL(`../../../../assets/images/1panel-menu-light.png`, import.meta.url).href;
+        }
    }
 };
 </script>
--- a/frontend/src/layout/index.vue
+++ b/frontend/src/layout/index.vue
@ -88,6 +88,15 @@ const updateDarkMode = async (event: MediaQueryListEvent) => {
    switchDark();
 };

+const initStatus = () => {
+    document.title = globalStore.themeConfig.panelName;
+    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;
+    document.getElementsByTagName('head')[0].appendChild(link);
+};
+
 const loadStatus = async () => {
    loading.value = globalStore.isLoading;
    loadingText.value = globalStore.loadingText;
@ -114,6 +123,7 @@ onBeforeUnmount(() => {
    timer = null;
 });
 onMounted(() => {
+    initStatus();
    loadStatus();
    loadDataFromDB();
    loadProductProFromDB();
--- a/frontend/src/views/login/entrance/index.vue
+++ b/frontend/src/views/login/entrance/index.vue
@ -4,7 +4,7 @@
            <div class="login-wrapper">
                <div :class="screenWidth > 1110 ? 'left inline-block' : ''">
                    <div class="login-title">
-                        <span>{{ $t('commons.login.title') }}</span>
+                        <span>{{ globalStore.themeConfig.title || $t('setting.description') }}</span>
                    </div>
                    <img src="@/assets/images/1panel-login.png" alt="" v-if="screenWidth > 1110" />
                </div>
--- a/frontend/src/views/login/index.vue
+++ b/frontend/src/views/login/index.vue
@ -4,7 +4,7 @@
            <div class="login-wrapper">
                <div :class="screenWidth > 1110 ? 'left inline-block' : ''">
                    <div class="login-title">
-                        <span>{{ $t('commons.login.title') }}</span>
+                        <span>{{ globalStore.themeConfig.title || $t('setting.description') }}</span>
                    </div>
                    <img src="@/assets/images/1panel-login.png" alt="" v-if="screenWidth > 1110" />
                </div>
--- a/frontend/src/views/setting/about/index.vue
+++ b/frontend/src/views/setting/about/index.vue
@ -4,16 +4,16 @@
            <template #main>
                <div style="text-align: center; margin-top: 20px">
                    <div style="justify-self: center">
-                        <img style="width: 80px" src="@/assets/images/1panel-logo-light.png" />
+                        <img style="width: 80px" :src="getLogoUrl()" />
                    </div>
-                    <h3>{{ $t('setting.description') }}</h3>
+                    <h3>{{ globalStore.themeConfig.title || $t('setting.description') }}</h3>
                    <h3>
                        <SystemUpgrade />
                    </h3>
                    <div style="margin-top: 10px">
                        <el-link @click="toDoc">
                            <el-icon><Document /></el-icon>
-                            <span>{{ $t('setting.doc') }}</span>
+                            <span>{{ $t('setting.doc2') }}</span>
                        </el-link>
                        <el-link @click="toGithub" class="system-link">
                            <svg-icon iconName="p-huaban88"></svg-icon>
@ -38,6 +38,8 @@
 import { getSettingInfo, getSystemAvailable } from '@/api/modules/setting';
 import { onMounted, ref } from 'vue';
 import SystemUpgrade from '@/components/system-upgrade/index.vue';
+import { GlobalStore } from '@/store';
+const globalStore = GlobalStore();

 const version = ref();
 const loading = ref();
@ -59,6 +61,14 @@ const toGithubStar = () => {
    window.open('https://github.com/1Panel-dev/1Panel', '_blank', 'noopener,noreferrer');
 };

+const getLogoUrl = () => {
+    if (globalStore.themeConfig.logo) {
+        return globalStore.themeConfig.logo;
+    } else {
+        return new URL(`../../../../assets/images/1panel-logo-light.png`, import.meta.url).href;
+    }
+};
+
 onMounted(() => {
    search();
    getSystemAvailable();