1Panel-dev/1Panel
1
1
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-10-27 01:05:57 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
ssongliu 2024-03-26 16:44:07 +08:00 • committed by GitHub
parent 821b8dfe63
commit 306082d625
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 50 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/index.html
View file

@ -2,7 +2,6 @@
<html> <html>
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/public/favicon.png" />
<meta name="robots" content="noindex,nofollow" /> <meta name="robots" content="noindex,nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>loading...</title> <title>loading...</title>

BIN
frontend/src/assets/images/favicon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 9.1 KiB

36
frontend/src/hooks/use-logo.ts
View file

@ -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);
}
};

8
frontend/src/lang/modules/en.ts
View file

@ -1445,7 +1445,7 @@ const message = {
issue: 'Feedback', issue: 'Feedback',
doc: 'Official document', doc: 'Official document',
star: 'Star', 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', forum: 'Forum Help',
doc2: 'User Manual', doc2: 'User Manual',
currentVersion: 'Version', currentVersion: 'Version',
@ -2325,11 +2325,9 @@ const message = {
tamper: { tamper: {
tamper: 'Tamper', tamper: 'Tamper',
tamperHelper1: 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: 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;', 'It will restrict the read, write, delete, permission, and owner modification operations of protected files under non-excluded directories',
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].',
op: 'Operation', op: 'Operation',
create: 'Create', create: 'Create',
file: 'File', file: 'File',

9
frontend/src/lang/modules/tw.ts
View file

@ -1346,7 +1346,7 @@ const message = {
issue: '問題反饋', issue: '問題反饋',
doc: '官方文檔', doc: '官方文檔',
star: '點亮 Star', star: '點亮 Star',
description: '1Panel，現代化、開源的 Linux 服務器運維管理面板。', description: 'Linux 服務器運維管理面板',
forum: '論壇求助', forum: '論壇求助',
doc2: '使用手冊', doc2: '使用手冊',
currentVersion: '當前運行版本：', currentVersion: '當前運行版本：',
@ -2173,10 +2173,9 @@ const message = {
}, },
tamper: { tamper: {
tamper: '防篡改', tamper: '防篡改',
tamperHelper1: '一鍵部署類型的網站，建議啟用應用目錄防篡改功能；', tamperHelper1:
tamperHelper2: '如果在啟用防篡改功能後出現網站無法正常使用或備份、恢復失敗的情況，請先關閉防篡改功能；', '一鍵部署類型的網站，建議啟用應用目錄防篡改功能；如出現網站無法正常使用或備份、恢復失敗的情況，請先關閉防篡改功能；',
tamperHelper3: tamperHelper2: '將限制非排除目錄下受保護文件的讀寫、刪除、權限和所有者修改操作',
'啟用防篡改，將限制非排除目錄下受保護文件的讀寫、刪除、權限和所有者修改操作，請在設定 [排除目錄] 和 [保護] 時謹慎選擇。',
op: '操作', op: '操作',
create: '創建', create: '創建',
file: '文件', file: '文件',

16
frontend/src/lang/modules/zh.ts
View file

@ -1347,7 +1347,7 @@ const message = {
issue: '问题反馈', issue: '问题反馈',
doc: '官方文档', doc: '官方文档',
star: '点亮 Star', star: '点亮 Star',
description: '1Panel，现代化、开源的 Linux 服务器运维管理面板。', description: 'Linux 服务器运维管理面板',
forum: '论坛求助', forum: '论坛求助',
doc2: '使用手册', doc2: '使用手册',
currentVersion: '当前运行版本：', currentVersion: '当前运行版本：',
@ -2178,10 +2178,9 @@ const message = {
}, },
tamper: { tamper: {
tamper: '防篡改', tamper: '防篡改',
tamperHelper1: '一键部署类型的网站，建议启用应用目录防篡改功能；', tamperHelper1:
tamperHelper2: '如果在启用防篡改功能后出现网站无法正常使用或备份、恢复失败的情况，请先关闭防篡改功能；', '一键部署类型的网站，建议启用应用目录防篡改功能；如出现网站无法正常使用或备份、恢复失败的情况，请先关闭防篡改功能；',
tamperHelper3: tamperHelper2: '将限制非排除目录下受保护文件的读写、删除、权限和所有者修改操作',
'启用防篡改，将限制非排除目录下受保护文件的读写、删除、权限和所有者修改操作，请在设定 [排除目录] 和 [保护] 时谨慎选择。',
op: '操作', op: '操作',
create: '创建', create: '创建',
file: '文件', file: '文件',
@ -2207,13 +2206,14 @@ const message = {
title: '面板描述', title: '面板描述',
titleHelper: '将会显示在用户登录页面 (例: Linux 服务器运维管理面板)', titleHelper: '将会显示在用户登录页面 (例: Linux 服务器运维管理面板)',
logo: 'Logo', logo: 'Logo',
logoHelper: '将会显示在菜单收缩时管理页面左上方 (建议图片大小为: 82px*82px)', logoHelper: '将会显示在菜单收缩时管理页面左上方 (建议图片大小为: 82px*82px，最大支持 15KB )',
logoWithText: 'Logo (带文字)', logoWithText: 'Logo (带文字)',
logoWithTextHelper: '将会显示在菜单展开时管理页面左上方 (建议图片大小为: 185px*55px)', logoWithTextHelper: '将会显示在菜单展开时管理页面左上方 (建议图片大小为: 185px*55px，最大支持 30KB )',
favicon: '网站图标', favicon: '网站图标',
faviconHelper: '网站图标 (建议图片大小为: 16px*16px)', faviconHelper: '网站图标 (建议图片大小为: 16px*16px，最大支持 8KB )',
reUpload: '重新上传', reUpload: '重新上传',
supportType: '只能上传 jpg/png/jpeg 文件!', supportType: '只能上传 jpg/png/jpeg 文件!',
supportSize: '只能上传小于 {0}KB 的文件!',
setDefault: '恢复默认', setDefault: '恢复默认',
reset: '重置', reset: '重置',
}, },

13
frontend/src/layout/components/Sidebar/components/Logo.vue
View file

@ -11,11 +11,18 @@ defineProps<{ isCollapse: boolean }>();
const globalStore = GlobalStore(); const globalStore = GlobalStore();
const getLogoUrl = (isCollapse: boolean) => { const getLogoUrl = (isCollapse: boolean) => {
const theme = globalStore.$state.themeConfig.theme || 'light';
if (isCollapse) { 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-logo-light.png`, import.meta.url).href;
}
} else { } else {
return new URL(`../../../../assets/images/1panel-menu-${theme}.png`, import.meta.url).href; if (globalStore.themeConfig.logoWithText) {
return globalStore.themeConfig.logoWithText;
} else {
return new URL(`../../../../assets/images/1panel-menu-light.png`, import.meta.url).href;
}
} }
}; };
</script> </script>

10
frontend/src/layout/index.vue
View file

@ -88,6 +88,15 @@ const updateDarkMode = async (event: MediaQueryListEvent) => {
switchDark(); 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 () => { const loadStatus = async () => {
loading.value = globalStore.isLoading; loading.value = globalStore.isLoading;
loadingText.value = globalStore.loadingText; loadingText.value = globalStore.loadingText;
@ -114,6 +123,7 @@ onBeforeUnmount(() => {
timer = null; timer = null;
}); });
onMounted(() => { onMounted(() => {
initStatus();
loadStatus(); loadStatus();
loadDataFromDB(); loadDataFromDB();
loadProductProFromDB(); loadProductProFromDB();

2
frontend/src/views/login/entrance/index.vue
View file

@ -4,7 +4,7 @@
<div class="login-wrapper"> <div class="login-wrapper">
<div :class="screenWidth > 1110 ? 'left inline-block' : ''"> <div :class="screenWidth > 1110 ? 'left inline-block' : ''">
<div class="login-title"> <div class="login-title">
<span>{{ $t('commons.login.title') }}</span> <span>{{ globalStore.themeConfig.title || $t('setting.description') }}</span>
</div> </div>
<img src="@/assets/images/1panel-login.png" alt="" v-if="screenWidth > 1110" /> <img src="@/assets/images/1panel-login.png" alt="" v-if="screenWidth > 1110" />
</div> </div>

2
frontend/src/views/login/index.vue
View file

@ -4,7 +4,7 @@
<div class="login-wrapper"> <div class="login-wrapper">
<div :class="screenWidth > 1110 ? 'left inline-block' : ''"> <div :class="screenWidth > 1110 ? 'left inline-block' : ''">
<div class="login-title"> <div class="login-title">
<span>{{ $t('commons.login.title') }}</span> <span>{{ globalStore.themeConfig.title || $t('setting.description') }}</span>
</div> </div>
<img src="@/assets/images/1panel-login.png" alt="" v-if="screenWidth > 1110" /> <img src="@/assets/images/1panel-login.png" alt="" v-if="screenWidth > 1110" />
</div> </div>

16
frontend/src/views/setting/about/index.vue
View file

@ -4,16 +4,16 @@
<template #main> <template #main>
<div style="text-align: center; margin-top: 20px"> <div style="text-align: center; margin-top: 20px">
<div style="justify-self: center"> <div style="justify-self: center">
<img style="width: 80px" src="@/assets/images/1panel-logo-light.png" /> <img style="width: 80px" :src="getLogoUrl()" />
</div> </div>
<h3>{{ $t('setting.description') }}</h3> <h3>{{ globalStore.themeConfig.title || $t('setting.description') }}</h3>
<h3> <h3>
<SystemUpgrade /> <SystemUpgrade />
</h3> </h3>
<div style="margin-top: 10px"> <div style="margin-top: 10px">
<el-link @click="toDoc"> <el-link @click="toDoc">
<el-icon><Document /></el-icon> <el-icon><Document /></el-icon>
<span>{{ $t('setting.doc') }}</span> <span>{{ $t('setting.doc2') }}</span>
</el-link> </el-link>
<el-link @click="toGithub" class="system-link"> <el-link @click="toGithub" class="system-link">
<svg-icon iconName="p-huaban88"></svg-icon> <svg-icon iconName="p-huaban88"></svg-icon>
@ -38,6 +38,8 @@
import { getSettingInfo, getSystemAvailable } from '@/api/modules/setting'; import { getSettingInfo, getSystemAvailable } from '@/api/modules/setting';
import { onMounted, ref } from 'vue'; import { onMounted, ref } from 'vue';
import SystemUpgrade from '@/components/system-upgrade/index.vue'; import SystemUpgrade from '@/components/system-upgrade/index.vue';
import { GlobalStore } from '@/store';
const globalStore = GlobalStore();
const version = ref(); const version = ref();
const loading = ref(); const loading = ref();
@ -59,6 +61,14 @@ const toGithubStar = () => {
window.open('https://github.com/1Panel-dev/1Panel', '_blank', 'noopener,noreferrer'); 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(() => { onMounted(() => {
search(); search();
getSystemAvailable(); getSystemAvailable();