1Panel-dev/1Panel
1
1
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2024-11-15 04:00:00 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

perf: 优化主题色及样式 (#7015)

Browse source
This commit is contained in:
蘭 2024-11-12 18:32:00 +08:00 committed by GitHub
parent 5e8b23db6a
commit f5435c581b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 96 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
frontend/src/components/app-status/index.vue
View file

@ -72,9 +72,14 @@
:content="$t('website.openrestyHelper', [httpPort, httpsPort])"
placement="top-start"
>
<el-button size="small" type="warning" :icon="Warning">
{{ $t('app.checkTitle') }}
</el-button>
<el-alert
:title="$t('app.checkTitle')"
:closable="false"
center
type="warning"
show-icon
class="h-6 check-title"
/>
</el-tooltip>
</div>
</div>
@ -109,7 +114,6 @@ import { ElMessageBox } from 'element-plus';
import i18n from '@/lang';
import { MsgSuccess } from '@/utils/message';
import { ClearNginxCache } from '@/api/modules/nginx';
import { Warning } from '@element-plus/icons-vue';
const props = defineProps({
appKey: {
@ -237,3 +241,12 @@ defineExpose({
onCheck,
});
</script>
<style scoped lang="scss">
.check-title {
color: var(--el-color-warning);
border: 1px solid var(--el-color-warning);
background-color: transparent;
padding: 8px 8px;
width: 70px;
}
</style>

2
frontend/src/components/router-button/index.vue
View file

@ -1,6 +1,6 @@
<template>
<el-card class="router_card">
<div class="flex w-full flex-col md:justify-between md:flex-row">
<div class="flex w-full flex-col items-center md:justify-between md:flex-row">
<el-radio-group v-model="activeName" @change="handleChange">
<el-radio-button
class="router_card_button"

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

@ -1392,14 +1392,18 @@ const message = {
proxyHelper: 'After setting up the proxy server, it will be effective in the following scenarios:',
proxyHelper1: 'Downloading and synchronizing installation packages from the app store (Professional)',
proxyHelper2: 'System version upgrades and retrieving update information (Professional)',
proxyHelper4: 'Docker Daemon provides network access proxy (Professional)',
proxyHelper4: 'Docker network access will be done through a proxy server (Professional)',
proxyHelper3: 'Verification and synchronization of system licenses',
proxyType: 'Proxy Type',
proxyUrl: 'Proxy Address',
proxyPort: 'Proxy Port',
proxyPasswdKeep: 'Remember Password',
proxyDocker: 'Docker Proxy',
proxyDockerHelper: 'Docker Daemon provides network access proxy',
ProxyDockerHelper:
'Synchronize proxy server configuration to Docker, support offline server image pulling and other operations',
ConfDockerProxy: 'Configure Docker Proxy',
RestartNowHelper: 'Configuring Docker proxy requires restarting the Docker service.',
RestartNow: 'Restart immediately',
systemIPWarning: 'The server address is not currently set. Please set it in the control panel first!',
systemIPWarning1: 'The current server address is set to {0}, and quick redirection is not possible!',
defaultNetwork: 'Network Card',

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

@ -1314,14 +1314,17 @@ const message = {
proxyHelper: '設置代理伺服器後，將在以下場景中生效：',
proxyHelper1: '應用商店的安裝包下載和同步（專業版功能）',
proxyHelper2: '系統版本升級及獲取更新說明（專業版功能）',
proxyHelper4: 'Docker Daemon 提供網絡訪問代理（專業版功能）',
proxyHelper4: 'Docker 的網絡訪問將通過代理伺服器進行（專業版功能）',
proxyHelper3: '系統許可證的驗證和同步',
proxyType: '代理類型',
proxyUrl: '代理地址',
proxyPort: '代理端口',
proxyPasswdKeep: '記住密碼',
proxyDocker: 'Docker 代理',
proxyDockerHelper: '為 Docker Daemon 提供網絡訪問代理',
proxyDockerHelper: '將代理伺服器配寘同步至Docker，支持離線服務器拉取鏡像等操作',
confDockerProxy: '配寘Docker代理',
restartNowHelper: '配寘Docker代理需要重啓Docker服務。',
restartNow: '立即重啓',
systemIPWarning: '當前未設置服務器地址，請先在面板設置中設置！',
systemIPWarning1: '當前服務器地址設置為 {0}，無法快速跳轉！',
defaultNetwork: '默認網卡',

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

@ -1317,13 +1317,16 @@ const message = {
proxyHelper1: '应用商店的安装包下载和同步（专业版功能）',
proxyHelper2: '系统版本升级及获取更新说明（专业版功能）',
proxyHelper3: '系统许可证的验证和同步',
proxyHelper4: 'Docker Daemon 提供网络访问代理（专业版功能）',
proxyHelper4: 'Docker 的网络访问将通过代理服务器进行（专业版功能）',
proxyType: '代理类型',
proxyUrl: '代理地址',
proxyPort: '代理端口',
proxyPasswdKeep: '记住密码',
proxyDocker: 'Docker 代理',
proxyDockerHelper: '为 Docker Daemon 提供网络访问代理',
proxyDockerHelper: '将代理服务器配置同步至 Docker，支持离线服务器拉取镜像等操作',
confDockerProxy: '配置 Docker 代理',
restartNowHelper: '配置 Docker 代理需要重启 Docker 服务。',
restartNow: '立即重启',
systemIPWarning: '当前未设置服务器地址，请先在面板设置中设置！',
systemIPWarning1: '当前服务器地址设置为 {0}，无法快速跳转！',
defaultNetwork: '默认网卡',

75
frontend/src/styles/element-dark.scss
View file

@ -24,19 +24,44 @@ html.dark {
--panel-main-bg-color-11: #60626F;
--panel-alert-error-bg-color: #54293A;
--panel-alert-error-text-color: #B22F48;
--panel-alert-error-hover-bg-color: #672A3D;
--panel-alert-error-text-color: #E2324F;
--panel-alert-error-hover-bg-color: #E9657B;
--panel-alert-success-bg-color: #1E5146;
--panel-alert-success-text-color: #169262;
--panel-alert-success-hover-bg-color: #1D5849;
--panel-alert-success-text-color: #11B671;
--panel-alert-success-hover-bg-color: #4DC894;
--panel-alert-warning-bg-color: #59472A;
--panel-alert-warning-text-color: #BB8A2E;
--panel-alert-warning-hover-bg-color: #6A5531;
--panel-alert-warning-text-color: #EDAC2C;
--panel-alert-warning-hover-bg-color: #F1C161;
--panel-alert-info-bg-color: var(--panel-main-bg-color-6);
--panel-alert-info-text-color: var(--panel-main-bg-color-3);
--el-color-success: #3fb950;
--el-color-success-light-5: #4DC894;
--el-color-success-light-8: #3fb950;
--el-color-success-light-9: #1E5146;
--el-color-warning: #EDAC2C;
--el-color-warning-light-5: #F1C161;
--el-color-warning-light-8: #EDAC2C;
--el-color-warning-light-9: #59472A;
--el-color-danger: #E2324F;
--el-color-danger-light-5: #E9657B;
--el-color-danger-light-8: #E2324F;
--el-color-danger-light-9: #54293A;
--el-color-error: #E2324F;
--el-color-error-light-5: #E9657B;
--el-color-error-light-8: #E2324F;
--el-color-error-light-9: #54293A;
--el-color-info: var(--panel-text-color-white);
--el-color-info-light-5: var(--panel-main-bg-color-3);
--el-color-info-light-8: var(--panel-text-color-white);
--el-color-info-light-9: var(--panel-main-bg-color-8);
--panel-alert-info-bg-color: var(--panel-main-bg-color-8);
--panel-alert-info-text-color: var(--panel-text-color-white);
--panel-alert-info-hover-bg-color: var(--panel-main-bg-color-4);
--panel-pie-bg-color: #434552;
@ -52,10 +77,6 @@ html.dark {
--el-color-primary-dark-2: var(--panel-color-primary);
--el-scrollbar-bg-color: var(--panel-main-bg-color-8);
--el-border-color-darker: var(--panel-main-bg-color-6);
--el-color-success:#238636;
--el-color-success-light-8: #3fb950;
--el-color-success-light-9: #3fb95030;
--panel-border: 2px solid var(--panel-main-bg-color-8);
--panel-button-active: var(--panel-main-bg-color-10);
@ -92,6 +113,32 @@ html.dark {
--el-text-color-placeholder: var(--panel-main-bg-color-4);
.el-message {
--el-color-primary: #409eff;
--el-color-primary-light-5: #a0cfff;
--el-color-primary-light-8: #d9ecff;
--el-color-primary-light-9: #ecf5ff;
--el-color-success: #67c23a;
--el-color-success-light-5: #b3e19d;
--el-color-success-light-8: #e1f3d8;
--el-color-success-light-9: #f0f9eb;
--el-color-warning: #e6a23c;
--el-color-warning-light-5: #f3d19e;
--el-color-warning-light-8: #faecd8;
--el-color-warning-light-9: #fdf6ec;
--el-color-danger: #f56c6c;
--el-color-danger-light-5: #fab6b6;
--el-color-danger-light-8: #fde2e2;
--el-color-error: #f56c6c;
--el-color-error-light-5: #fab6b6;
--el-color-error-light-8: #fde2e2;
--el-color-error-light-9: #fef0f0;
--el-color-info: #909399;
--el-color-info-light-5: #c8c9cc;
--el-color-info-light-8: #e9e9eb;
--el-color-info-light-9: #f4f4f5;
}
.el-descriptions__content:not(.is-bordered-label) {
color: var(--panel-main-bg-color-3);
}
@ -114,7 +161,7 @@ html.dark {
.el-tag.el-tag--primary {
--el-tag-bg-color: var(--panel-main-bg-color-9);
--el-tag-border-color: var(--panel-main-bg-color-8);
--el-tag-border-color: var(--panel-main-bg-color-11);
--el-tag-hover-color: var(--panel-color-primary);
}
@ -272,7 +319,7 @@ html.dark {
}
.el-avatar {
--el-avatar-bg-color: var(--panel-main-bg-color-7) !important;
--el-avatar-bg-color: var(--panel-text-color-white) !important;
box-shadow: 0 0 4px rgba(0, 94, 235, 0.1);
border: 0.5px solid var(--panel-main-bg-color-7);
}

2
frontend/src/views/app-store/index.vue
View file

@ -3,7 +3,7 @@
<div v-if="showButton">
<RouterButton :buttons="buttons">
<template #route-button>
<div class="pr-5 mt-1">
<div class="pr-5">
<el-badge is-dot :hidden="!canUpdate">
<el-button @click="sync" type="primary" plain :disabled="syncing">
{{ $t('app.syncAppList') }}