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

style: 主题样式优化

Browse Source
This commit is contained in:
lan-yonghui 2024-11-13 20:36:28 +08:00
parent ec372dbb98
commit 3f44b81335
11 changed files with 259 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/components/system-upgrade/index.vue
View File

@ -2,17 +2,17 @@
<div>
<div class="flex w-full flex-col gap-2 md:flex-row items-center">
<div class="flex flex-wrap items-center" v-if="props.footer">
<el-button type="primary" link @click="toForum">
<el-link type="primary" :underline="false" @click="toForum">
<span class="font-normal">{{ $t('setting.forum') }}</span>
</el-button>
</el-link>
<el-divider direction="vertical" />
<el-button type="primary" link @click="toDoc">
<el-link type="primary" :underline="false" @click="toDoc">
<span class="font-normal">{{ $t('setting.doc2') }}</span>
</el-button>
</el-link>
<el-divider direction="vertical" />
<el-button type="primary" link @click="toGithub">
<el-link type="primary" :underline="false" @click="toGithub">
<span class="font-normal">{{ $t('setting.project') }}</span>
</el-button>
</el-link>
<el-divider v-if="!mobile" direction="vertical" />
</div>
<div class="flex flex-wrap items-center">
@ -27,14 +27,14 @@
（{{ $t('setting.hasNewVersion') }}）
</el-link>
</el-badge>
<el-button
<el-link
v-if="version !== 'Waiting' && !globalStore.hasNewVersion"
type="primary"
link
:underline="false"
@click="onLoadUpgradeInfo"
>
（{{ $t('setting.upgradeCheck') }}）
</el-button>
</el-link>
<el-tag v-if="version === 'Waiting'" round style="margin-left: 10px">
{{ $t('setting.upgrading') }}
</el-tag>

21
frontend/src/styles/common.scss
View File

@ -464,3 +464,24 @@ html {
.monaco-editor-tree-dark .el-tree-node.is-current > .el-tree-node__content {
background-color: #111417;
}
.check-label{
background: var(--panel-main-bg-color-10) !important;
.check-label-a {
color: var(--panel-color-primary);
}
}
.check-content {
background: var(--panel-main-bg-color-10);
pre {
margin: 0;
width: 350px;
overflow: hidden;
text-overflow: ellipsis;
}
}
.el-descriptions {
overflow: hidden;
text-overflow: ellipsis;
}

148
frontend/src/styles/element-dark.scss
View File

@ -22,19 +22,24 @@ html.dark {
--panel-main-bg-color-9: #2E313D;
--panel-main-bg-color-10: #242633;
--panel-main-bg-color-11: #60626F;
--panel-main-bg-color-12: #000000;
--panel-alert-error-bg-color: #54293A;
--panel-alert-error-text-color: #E2324F;
--panel-alert-error-bg-color: #fef0f0;
--panel-alert-error-text-color: #f56c6c;
--panel-alert-error-hover-bg-color: #E9657B;
--panel-alert-success-bg-color: #1E5146;
--panel-alert-success-text-color: #11B671;
--panel-alert-success-bg-color: #e1f3d8;
--panel-alert-success-text-color: #67c23a;
--panel-alert-success-hover-bg-color: #4DC894;
--panel-alert-warning-bg-color: #59472A;
--panel-alert-warning-text-color: #EDAC2C;
--panel-alert-warning-hover-bg-color: #F1C161;
--panel-alert-info-bg-color: var(--panel-main-bg-color-7);
--panel-alert-info-text-color: var(--panel-text-color-white);
--panel-alert-info-hover-bg-color: var(--panel-main-bg-color-4);
--el-color-success: #3fb950;
--el-color-success-light-5: #4DC894;
--el-color-success-light-8: #3fb950;
@ -55,14 +60,11 @@ html.dark {
--el-color-error-light-8: #E2324F;
--el-color-error-light-9: #54293A;
--el-color-info: var(--panel-text-color-white);
--el-color-info: var(--panel-main-bg-color-2);
--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-8: var(--panel-color-primary);
--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;
--panel-text-color-white: #ffffff;
@ -78,7 +80,8 @@ html.dark {
--el-scrollbar-bg-color: var(--panel-main-bg-color-8);
--el-border-color-darker: var(--panel-main-bg-color-6);
--panel-border: 2px solid var(--panel-main-bg-color-8);
--panel-border: 1px solid var(--panel-main-bg-color-8);
--panel-border-color: var(--panel-main-bg-color-8);
--panel-button-active: var(--panel-main-bg-color-10);
--panel-button-text-color: var(--panel-main-bg-color-10);
--panel-button-bg-color: var(--panel-color-primary);
@ -113,6 +116,9 @@ html.dark {
--el-text-color-placeholder: var(--panel-main-bg-color-4);
.el-radio-button {
--el-radio-button-checked-text-color: var(--panel-main-bg-color-10);
}
.el-descriptions__content:not(.is-bordered-label) {
color: var(--panel-main-bg-color-3);
}
@ -180,21 +186,52 @@ html.dark {
}
.el-button--primary {
--el-button-text-color: var(--panel-main-bg-color-10);
--el-button-hover-link-text-color: var(--panel-color-primary-light-1);
&.tag-button,
&.brief-button {
--el-button-text-color: var(--panel-main-bg-color-10);
--el-button-hover-text-color: var(--el-color-white);
--el-button-hover-border-color:var(--el-color-primary);
--el-button-hover-bg-color: var(--el-color-primary);
}
&.app-button {
--el-button-text-color: var(--el-color-primary);
}
&.h-app-button {
--el-button-text-color: var(--panel-main-bg-color-10);
--el-button-hover-text-color: var(--el-color-white);
--el-button-hover-border-color: var(--el-color-primary);
--el-button-hover-bg-color: var(--el-color-primary);
}
}
.el-button--primary.is-plain, .el-button--primary.is-text, .el-button--primary.is-link {
--el-button-text-color: var(--panel-main-bg-color-2);
--el-button-bg-color: var(--panel-main-bg-color-9);
--el-button-border-color: var(--panel-main-bg-color-8);
--el-button-hover-bg-color: var(--panel-main-bg-color-9);
--el-button-hover-border-color: var(--panel-main-bg-color-8);
}
.el-button--primary.is-text,.el-button--primary.is-link {
--el-button-text-color: var(--panel-color-primary);
}
.el-button--primary:hover {
--el-button-hover-text-color: var(--panel-text-color-white);
--el-button-border-color: var(--el-color-primary-light-3);
--el-button-hover-bg-color: var(--el-color-primary-light-3);
--el-button-hover-border-color: var(--el-color-primary-light-3);
--el-button-hover-text-color: var(--panel-main-bg-color-2);
--el-button-border-color: var(--el-color-primary);
--el-button-hover-bg-color: var(--panel-main-bg-color-9);
--el-button-hover-border-color: var(--panel-main-bg-color-8);
}
.el-button--primary.is-plain:hover {
--el-button-hover-text-color: var(--panel-main-bg-color-10);
--el-button-border-color: var(--el-color-primary);
--el-button-hover-bg-color: var(--el-color-primary);
--el-button-hover-border-color: var(--el-color-primary);
}
.el-button--primary:active {
@ -231,7 +268,7 @@ html.dark {
}
.el-dialog {
background-color: var(--panel-main-bg-color-8);
background-color: var(--panel-main-bg-color-9);
border: 1px solid var(--panel-border-color);
.el-dialog__header {
@ -265,15 +302,24 @@ html.dark {
}
.md-editor-dark {
--md-bk-color: var(--panel-main-bg-color-8);
--md-bk-color: var(--panel-main-bg-color-9);
}
.md-editor-dark .md-editor-preview {
--md-theme-color: var(--el-text-color-primary);
}
.md-editor-dark .default-theme a {
--md-theme-link-color: var(--el-color-primary);
}
.md-editor-dark .default-theme pre code {
background-color: var(--panel-main-bg-color-8);
}
.md-editor-dark .default-theme pre:before {
background-color: var(--panel-main-bg-color-10);
}
.el-descriptions__title {
color: var(--el-text-color-primary);
}
@ -297,12 +343,20 @@ html.dark {
box-shadow: 0 0 4px rgba(0, 94, 235, 0.1);
border: 0.5px solid var(--panel-main-bg-color-7);
}
.el-drawer {
.cm-editor {
background-color: var(--panel-main-bg-color-10);
}
.cm-gutters {
background-color: var(--panel-main-bg-color-10);
}
}
.cm-editor {
background-color: var(--panel-main-bg-color-9);
}
.cm-gutters {
background-color: var(--panel-main-bg-color-8);
background-color: var(--panel-main-bg-color-9);
}
// scroll-bar
@ -312,6 +366,9 @@ html.dark {
::-webkit-scrollbar-thumb {
background-color: var(--el-border-color-darker);
}
::-webkit-scrollbar-corner {
background-color: var(--el-scrollbar-bg-color);
}
.app-warn {
span {
@ -325,4 +382,61 @@ html.dark {
}
}
.el-table {
--el-table-bg-color: var(--el-bg-color);
--el-table-tr-bg-color: var(--el-bg-color);
--el-table-header-bg-color: var(--el-bg-color);
--el-table-border: 1px solid var(--panel-main-bg-color-8);
--el-table-border-color: var(--panel-main-bg-color-8);
}
.el-message-box {
--el-messagebox-title-color: var(--el-menu-text-color);
border: 1px solid var(--panel-border-color);
}
.el-popover {
--el-popover-title-text-color: var(--panel-main-bg-color-2);
border: 1px solid var(--panel-border-color);
}
.app-wrapper {
.main-container {
background-color: var(--panel-main-bg-color-9) !important;
}
.app-footer {
background-color: var(--panel-main-bg-color-9) !important;
border-top: var(--panel-border);
}
.mobile-header {
background-color: var(--panel-main-bg-color-9) !important;
border-bottom: var(--panel-border);
color: #ffffff;
}
}
.router_card_button {
.el-radio-button__inner {
background: none !important;
}
.el-radio-button__original-radio:checked + .el-radio-button__inner {
color: var(--panel-main-bg-color-10);
background-color: var(--panel-color-primary) !important;
box-shadow: none !important;
border: none !important;
}
}
.el-date-table td.in-range .el-date-table-cell {
background-color: var(--panel-main-bg-color-8);
}
.el-collapse-item__header {
color: #ffffff;
background-color: var(--panel-main-bg-color-10) !important;
}
.el-loading-mask {
background-color: rgba(36, 38, 51, 0.8);
}
}

7
frontend/src/views/app-store/detail/index.vue
View File

@ -162,7 +162,7 @@ defineExpose({
});
</script>
<style lang="scss">
<style lang="scss" scoped>
.brief {
.name {
span {
@ -183,6 +183,7 @@ defineExpose({
.icon {
width: 180px;
height: 180px;
background-color: #ffffff;
}
.version {
@ -196,4 +197,8 @@ defineExpose({
}
}
}
:deep(.md-editor-dark) {
background-color: var(--panel-main-bg-color-9);
}
</style>

17
frontend/src/views/app-store/installed/check/index.vue
View File

@ -1,5 +1,5 @@
<template>
<el-dialog v-model="open" :title="$t('app.checkTitle')" width="50%" :close-on-click-modal="false">
<el-dialog v-model="open" :title="$t('app.checkTitle')" width="40%" :close-on-click-modal="false">
<el-row>
<el-col :span="20" :offset="2" v-if="open">
<el-alert
@ -9,11 +9,18 @@
show-icon
:closable="false"
/>
<br />
<el-descriptions border :column="1">
<el-descriptions-item v-for="(item, key) in map" :key="key">
<el-descriptions :column="1" border>
<el-descriptions-item
v-for="(item, key) in map"
:key="key"
label-class-name="check-label"
class-name="check-content"
min-width="60px"
>
<template #label>
<a href="javascript:void(0);" @click="toPage(item[0])">{{ $t('app.' + item[0]) }}</a>
<a href="javascript:void(0);" class="check-label-a" @click="toPage(item[0])">
{{ $t('app.' + item[0]) }}
</a>
</template>
<span class="resources">
{{ map.get(item[0]).toString() }}

31
frontend/src/views/database/mysql/check/index.vue
View File

@ -15,10 +15,12 @@
show-icon
:closable="false"
/>
<el-descriptions :column="1" border>
<el-descriptions-item label-class-name="label" class-name="content" min-width="60px">
<el-descriptions border :column="1">
<el-descriptions-item label-class-name="check-label" class-name="check-content" min-width="60px">
<template #label>
<a href="javascript:void(0);" class="content-a" @click="toApp()">{{ $t('app.app') }}</a>
<a href="javascript:void(0);" class="check-label-a" @click="toApp()">
{{ $t('app.app') }}
</a>
</template>
<pre>{{ installData.join('\n') }}</pre>
</el-descriptions-item>
@ -40,7 +42,6 @@ let open = ref(false);
const acceptParams = (props: InstallProps) => {
installData.value = props.items;
installData.value.push('sdsfhjdghjdgfhsdgfhjsgfkhjsdgfhjasgdfhjasgdfjhsagdfhjsagdfashdfgaskhjdfgaskjhdf');
open.value = true;
};
@ -52,25 +53,3 @@ defineExpose({
acceptParams,
});
</script>
<style scoped>
:deep(.label) {
background: var(--panel-main-bg-color-10) !important;
}
:deep(.content) {
background: var(--panel-main-bg-color-10);
}
:deep(.content-a) {
color: var(--panel-color-primary);
}
pre {
margin: 0;
width: 350px;
overflow: hidden;
text-overflow: ellipsis;
}
:deep(.el-descriptions) {
overflow: hidden;
text-overflow: ellipsis;
}
</style>

11
frontend/src/views/database/postgresql/check/index.vue
View File

@ -2,7 +2,7 @@
<el-dialog
v-model="open"
:title="$t('app.checkTitle')"
width="50%"
width="40%"
:close-on-click-modal="false"
:destroy-on-close="true"
>
@ -15,13 +15,14 @@
show-icon
:closable="false"
/>
<br />
<el-descriptions border :column="1">
<el-descriptions-item>
<el-descriptions-item label-class-name="check-label" class-name="check-content" min-width="60px">
<template #label>
<a href="javascript:void(0);" @click="toApp()">{{ $t('app.app') }}</a>
<a href="javascript:void(0);" class="check-label-a" @click="toApp()">
{{ $t('app.app') }}
</a>
</template>
{{ installData.join(',') }}
<pre>{{ installData.join('\n') }}</pre>
</el-descriptions-item>
</el-descriptions>
</el-col>

11
frontend/src/views/database/redis/check/index.vue
View File

@ -2,7 +2,7 @@
<el-dialog
v-model="open"
:title="$t('app.checkTitle')"
width="50%"
width="40%"
:close-on-click-modal="false"
:destroy-on-close="true"
>
@ -15,13 +15,14 @@
show-icon
:closable="false"
/>
<br />
<el-descriptions border :column="1">
<el-descriptions-item>
<el-descriptions-item label-class-name="check-label" class-name="check-content" min-width="60px">
<template #label>
<a href="javascript:void(0);" @click="toApp()">{{ $t('app.app') }}</a>
<a href="javascript:void(0);" class="check-label-a" @click="toApp()">
{{ $t('app.app') }}
</a>
</template>
{{ installData.join(',') }}
<pre>{{ installData.join('\n') }}</pre>
</el-descriptions-item>
</el-descriptions>
</el-col>

81
frontend/src/views/setting/snapshot/snap_status/index.vue
View File

@ -14,69 +14,89 @@
<div v-loading="loading">
<el-alert :type="loadStatus(status.panelInfo)" :closable="false">
<template #title>
<el-button :icon="loadIcon(status.panelInfo)" link>{{ $t('setting.panelInfo') }}</el-button>
<div v-if="showErrorMsg(status.panelInfo)" class="top-margin">
<span class="err-message">{{ status.panelInfo }}</span>
<div class="flex flex-wrap items-center justify-start">
<component :is="loadIcon(status.panelInfo)" class="w-4 pr-1" />
{{ $t('setting.panelInfo') }}
<div v-if="showErrorMsg(status.panelInfo)" class="top-margin">
<span class="err-message">{{ status.panelInfo }}</span>
</div>
</div>
</template>
</el-alert>
<el-alert :type="loadStatus(status.panel)" :closable="false">
<template #title>
<el-button :icon="loadIcon(status.panel)" link>{{ $t('setting.panelBin') }}</el-button>
<div v-if="showErrorMsg(status.panel)" class="top-margin">
<span class="err-message">{{ status.panel }}</span>
<div class="flex flex-wrap items-center justify-start">
<component :is="loadIcon(status.panel)" class="w-4 pr-1" />
{{ $t('setting.panelBin') }}
<div v-if="showErrorMsg(status.panel)" class="top-margin">
<span class="err-message">{{ status.panel }}</span>
</div>
</div>
</template>
</el-alert>
<el-alert :type="loadStatus(status.daemonJson)" :closable="false">
<template #title>
<el-button :icon="loadIcon(status.daemonJson)" link>{{ $t('setting.daemonJson') }}</el-button>
<div v-if="showErrorMsg(status.daemonJson)" class="top-margin">
<span class="err-message">{{ status.daemonJson }}</span>
<div class="flex flex-wrap items-center justify-start">
<component :is="loadIcon(status.daemonJson)" class="w-4 pr-1" />
{{ $t('setting.daemonJson') }}
<div v-if="showErrorMsg(status.daemonJson)" class="top-margin">
<span class="err-message">{{ status.daemonJson }}</span>
</div>
</div>
</template>
</el-alert>
<el-alert :type="loadStatus(status.appData)" :closable="false">
<template #title>
<el-button :icon="loadIcon(status.appData)" link>{{ $t('setting.appData') }}</el-button>
<div v-if="showErrorMsg(status.appData)" class="top-margin">
<span class="err-message">{{ status.appData }}</span>
<div class="flex flex-wrap items-center justify-start">
<component :is="loadIcon(status.appData)" class="w-4 pr-1" />
{{ $t('setting.appData') }}
<div v-if="showErrorMsg(status.appData)" class="top-margin">
<span class="err-message">{{ status.appData }}</span>
</div>
</div>
</template>
</el-alert>
<el-alert :type="loadStatus(status.backupData)" :closable="false">
<template #title>
<el-button :icon="loadIcon(status.backupData)" link>{{ $t('setting.backupData') }}</el-button>
<div v-if="showErrorMsg(status.backupData)" class="top-margin">
<span class="err-message">{{ status.backupData }}</span>
<div class="flex flex-wrap items-center justify-start">
<component :is="loadIcon(status.backupData)" class="w-4 pr-1" />
{{ $t('setting.backupData') }}
<div v-if="showErrorMsg(status.backupData)" class="top-margin">
<span class="err-message">{{ status.backupData }}</span>
</div>
</div>
</template>
</el-alert>
<el-alert :type="loadStatus(status.panelData)" :closable="false">
<template #title>
<el-button :icon="loadIcon(status.panelData)" link>{{ $t('setting.panelData') }}</el-button>
<div v-if="showErrorMsg(status.panelData)" class="top-margin">
<span class="err-message">{{ status.panelData }}</span>
<div class="flex flex-wrap items-center justify-start">
<component :is="loadIcon(status.panelData)" class="w-4 pr-1" />
{{ $t('setting.panelData') }}
<div v-if="showErrorMsg(status.panelData)" class="top-margin">
<span class="err-message">{{ status.panelData }}</span>
</div>
</div>
</template>
</el-alert>
<el-alert :type="loadStatus(status.compress)" :closable="false">
<template #title>
<el-button :icon="loadIcon(status.compress)" link>
{{ $t('setting.compress') }} {{ status.size }}
</el-button>
<div v-if="showErrorMsg(status.compress)" class="top-margin">
<span class="err-message">{{ status.compress }}</span>
<div class="flex flex-wrap items-center justify-start">
<component :is="loadIcon(status.compress)" class="w-4 pr-1" />
{{ $t('setting.compress') }}
<div v-if="showErrorMsg(status.compress)" class="top-margin">
<span class="err-message">{{ status.compress }}</span>
</div>
</div>
</template>
</el-alert>
<el-alert :type="loadStatus(status.upload)" :closable="false">
<template #title>
<el-button :icon="loadIcon(status.upload)" link>
<div class="flex flex-wrap items-center justify-start">
<component :is="loadIcon(status.upload)" class="w-4 pr-1" />
{{ $t('setting.upload') }}
</el-button>
<div v-if="showErrorMsg(status.upload)" class="top-margin">
<span class="err-message">{{ status.upload }}</span>
<div v-if="showErrorMsg(status.upload)" class="top-margin">
<span class="err-message">{{ status.upload }}</span>
</div>
</div>
</template>
</el-alert>
@ -98,6 +118,7 @@
import { Setting } from '@/api/interface/setting';
import { loadSnapStatus, snapshotCreate } from '@/api/modules/setting';
import { nextTick, onBeforeUnmount, reactive, ref } from 'vue';
import { Loading, Check, Close } from '@element-plus/icons-vue';
const status = reactive<Setting.SnapshotStatus>({
panel: '',
@ -285,11 +306,11 @@ const loadIcon = (status: string) => {
case 'Running':
case 'Waiting':
case 'Uploading':
return 'Loading';
return Loading;
case 'Done':
return 'Check';
return Check;
default:
return 'Close';
return Close;
}
};

2
frontend/src/views/setting/snapshot/status/index.vue
View File

@ -230,7 +230,7 @@ defineExpose({
border-top: 1px var(--el-border-color) var(--el-border-style);
}
.alert {
background-color: rgba(0, 94, 235, 0.03);
background-color: var(--panel-main-bg-color-10);
}
.card-title {

15
frontend/src/views/website/runtime/php/check/index.vue
View File

@ -1,5 +1,5 @@
<template>
<el-dialog v-model="open" :title="$t('app.checkTitle')" width="50%" :close-on-click-modal="false">
<el-dialog v-model="open" :title="$t('app.checkTitle')" width="40%" :close-on-click-modal="false">
<el-row>
<el-col :span="20" :offset="2" v-if="open">
<el-alert
@ -9,11 +9,18 @@
show-icon
:closable="false"
/>
<br />
<el-descriptions border :column="1">
<el-descriptions-item v-for="(item, key) in map" :key="key">
<el-descriptions-item
v-for="(item, key) in map"
:key="key"
label-class-name="check-label"
class-name="check-content"
min-width="60px"
>
<template #label>
<a href="javascript:void(0);" @click="toPage(item[0])">{{ $t('app.' + item[0]) }}</a>
<a href="javascript:void(0);" class="check-label-a" @click="toPage(item[0])">
{{ $t('app.' + item[0]) }}
</a>
</template>
<span class="resources">
{{ map.get(item[0]).toString() }}