mirror of https://github.com/1Panel-dev/1Panel
蘭
2 weeks ago
committed by
GitHub
26 changed files with 631 additions and 478 deletions
@ -1,375 +1,237 @@
|
||||
html.dark { |
||||
--el-box-shadow-light: 0px 0px 4px rgba(0, 0, 0, 0.1) !important; |
||||
--dark-gold-base-color: #5a5a5a; |
||||
--el-border-color-lighter: #1d2023; |
||||
--el-fill-color-blank: #111417; |
||||
--el-bg-color: rgba(0, 11, 21, 1); |
||||
// --el-text-color-primary: #999999;
|
||||
--el-text-color-regular: #bbbfc4 !important; |
||||
--el-fill-color-light: #111417; |
||||
--el-border-color: #303438; |
||||
--el-bg-color-overlay: rgba(0, 11, 21, 1); |
||||
--el-border-color-light: #1d2023; |
||||
// * menu
|
||||
--el-menu-bg-color: #111417 !important; |
||||
--el-menu-item-bg-color: #111417; |
||||
--el-menu-text-color: #ffffff; |
||||
--el-menu-item-bg-color-active: rgb(44, 45, 46); |
||||
|
||||
// * panel-admin
|
||||
--panel-text-color: rgb(174, 166, 153); |
||||
--panel-border: 1px solid #1d2023; |
||||
--panel-border-color: #394c5e; |
||||
--panel-main-bg-color: rgba(12, 12, 12, 1); |
||||
--panel-button-active: var(--el-color-primary); |
||||
|
||||
--panel-login-shadow-light: 5px 5px 15px rgb(255 255 255 / 20%); |
||||
--panel-box-shadow-light: 0 0 10px rgb(255 255 255 / 10%); |
||||
--panel-popup-color: #060708; |
||||
--panel-alert-bg: #2f3030; |
||||
--panel-path-bg: #2f3030; |
||||
--panel-button-disabled: #5a5a5a; |
||||
|
||||
.el-tag.el-tag--info { |
||||
--el-tag-bg-color: rgb(49, 51, 51); |
||||
--el-tag-border-color: rgb(64, 67, 67); |
||||
|
||||
--panel-color-primary: #3D8EFF; |
||||
--panel-color-primary-light-8: #3674CC; |
||||
--panel-color-primary-light-1: #6EAAFF; |
||||
--panel-color-primary-light-2: #366FC2; |
||||
--panel-color-primary-light-3: #3364AD; |
||||
--panel-color-primary-light-4: #2F558F; |
||||
--panel-color-primary-light-5: #372E46; |
||||
--panel-color-primary-light-6: #2A4066; |
||||
--panel-color-primary-light-7: #2D4A7A; |
||||
--panel-color-primary-light-9: #2D4A7A; |
||||
|
||||
--panel-main-bg-color-1: #E3E6F3; |
||||
--panel-main-bg-color-2: #C0C2CF; |
||||
--panel-main-bg-color-3: #ADB0BC; |
||||
--panel-main-bg-color-4: #9597A4; |
||||
--panel-main-bg-color-5: #90929F; |
||||
--panel-main-bg-color-6: #787B88; |
||||
--panel-main-bg-color-7: #5B5E6A; |
||||
--panel-main-bg-color-8: #434552; |
||||
--panel-main-bg-color-9: #2E313D; |
||||
--panel-main-bg-color-10: #242633; |
||||
--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-success-bg-color: #1E5146; |
||||
--panel-alert-success-text-color: #169262; |
||||
--panel-alert-success-hover-bg-color: #1D5849; |
||||
|
||||
--panel-alert-warning-bg-color: #59472A; |
||||
--panel-alert-warning-text-color: #BB8A2E; |
||||
--panel-alert-warning-hover-bg-color: #6A5531; |
||||
|
||||
--panel-alert-info-bg-color: var(--panel-main-bg-color-6); |
||||
--panel-alert-info-text-color: var(--panel-main-bg-color-3); |
||||
--panel-alert-info-hover-bg-color: var(--panel-main-bg-color-4); |
||||
|
||||
--panel-pie-bg-color: #434552; |
||||
--panel-text-color-white: #ffffff; |
||||
|
||||
|
||||
--el-color-primary: var(--panel-color-primary); |
||||
--el-color-primary-light-3: var(--panel-color-primary-light-3); |
||||
--el-color-primary-light-5: var(--panel-color-primary-light-5); |
||||
--el-color-primary-light-7: var(--panel-color-primary-light-7); |
||||
--el-color-primary-light-8: var(--panel-color-primary-light-8); |
||||
--el-color-primary-light-9: var(--panel-color-primary-light-9); |
||||
|
||||
|
||||
--panel-border: 2px solid 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); |
||||
--panel-footer-bg: var(--panel-main-bg-color-9); |
||||
--panel-footer-border: var(--panel-main-bg-color-7); |
||||
--panel-text-color: var(--panel-main-bg-color-1); |
||||
--panel-menu-bg-color: var(--panel-main-bg-color-10); |
||||
--panel-terminal-tag-bg-color: var(--panel-main-bg-color-10); |
||||
|
||||
--el-menu-item-bg-color: var(--panel-main-bg-color-10); |
||||
--el-menu-item-bg-color-active: var(--panel-main-bg-color-8); |
||||
--el-menu-hover-bg-color: var(--panel-main-bg-color-8); |
||||
--el-menu-text-color: var(--panel-main-bg-color-2); |
||||
--el-fill-color-blank: var(--panel-main-bg-color-10); |
||||
--el-fill-color-light: var(--panel-main-bg-color-10); |
||||
--el-border-color: var(--panel-main-bg-color-8); |
||||
--el-border-color-light: var(--panel-main-bg-color-8); |
||||
--el-border-color-lighter: var(--panel-main-bg-color-8); |
||||
|
||||
--el-text-color-primary: var(--panel-main-bg-color-2); |
||||
--el-text-color-regular: var(--panel-main-bg-color-2); |
||||
|
||||
--el-box-shadow: 0px 12px 32px 4px rgba(36, 38, 51, .36), 0px 8px 20px rgba(36, 38, 51, .72); |
||||
--el-box-shadow-light: 0px 0px 12px rgba(36, 38, 51, .72); |
||||
--el-box-shadow-lighter: 0px 0px 6px rgba(36, 38, 51, .72); |
||||
--el-box-shadow-dark: 0px 16px 48px 16px rgba(36, 38, 51, .72), 0px 12px 32px #242633, 0px 8px 16px -8px #242633; |
||||
--el-bg-color: var(--panel-main-bg-color-9); |
||||
--el-bg-color-overlay: var(--panel-main-bg-color-9); |
||||
|
||||
--el-text-color-placeholder: var(--panel-main-bg-color-4); |
||||
|
||||
.el-descriptions__content:not(.is-bordered-label) { |
||||
color: var(--panel-main-bg-color-3); |
||||
} |
||||
.el-tag.el-tag--light { |
||||
--el-tag-bg-color: #111417; |
||||
--el-tag-border-color: var(--el-color-primary); |
||||
|
||||
.el-menu-item:hover, .el-sub-menu__title:hover{ |
||||
background: var(--panel-main-bg-color-8) !important; |
||||
} |
||||
.el-tag.el-tag--success { |
||||
--el-tag-border-color: var(--el-color-success); |
||||
|
||||
.el-menu .el-menu-item { |
||||
box-shadow: 0 0 4px rgba(36, 38, 51, .72); |
||||
} |
||||
.el-tag.el-tag--danger { |
||||
--el-tag-border-color: var(--el-color-danger); |
||||
|
||||
.el-menu .el-sub-menu__title { |
||||
box-shadow: 0 0 4px rgba(36, 38, 51, .72); |
||||
} |
||||
.el-card { |
||||
--el-card-bg-color: rgb(35, 35, 35); |
||||
color: #ffffff; |
||||
border: 1px solid var(--el-card-border-color) !important; |
||||
|
||||
.el-overlay { |
||||
background-color: #2E313D90; |
||||
} |
||||
|
||||
.el-table { |
||||
--el-table-bg-color: rgba(0, 11, 21, 1); |
||||
--el-table-tr-bg-color: rgba(0, 11, 21, 1); |
||||
--el-table-header-bg-color: rgba(0, 11, 21, 1); |
||||
--el-table-border: var(--panel-border); |
||||
--el-table-border-color: rgb(64, 67, 67); |
||||
.el-tag.el-tag--primary { |
||||
--el-tag-bg-color: var(--panel-main-bg-color-9); |
||||
--el-tag-border-color: var(--panel-color-primary-light-8); |
||||
--el-tag-hover-color: var(--panel-color-primary); |
||||
} |
||||
.el-message-box { |
||||
--el-messagebox-title-color: var(--el-menu-text-color); |
||||
border: 1px solid var(--panel-border-color); |
||||
|
||||
.el-tabs--card > .el-tabs__header .el-tabs__nav { |
||||
border: 1px solid var(--panel-main-bg-color-8); |
||||
} |
||||
|
||||
.el-alert--info { |
||||
--el-alert-bg-color: rgb(56, 59, 59); |
||||
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active { |
||||
border-bottom-color: var(--panel-color-primary); |
||||
--el-text-color-regular: var(--panel-color-primary); |
||||
} |
||||
|
||||
.el-loading-mask { |
||||
background-color:var(--panel-main-bg-color-10); |
||||
} |
||||
|
||||
.el-input { |
||||
--el-input-bg-color: rgb(47 48 48); |
||||
--el-input-border-color: #303438; |
||||
--el-input-border-color: var(--panel-main-bg-color-8); |
||||
} |
||||
|
||||
.el-pagination { |
||||
--el-pagination-button-color: #999999; |
||||
input:-webkit-autofill { |
||||
box-shadow: 0 0 0 1000px var(--el-box-shadow) inset; |
||||
background-color: var(--panel-main-bg-color-1); |
||||
transition: background-color 1000s ease-out 0.5s; |
||||
} |
||||
|
||||
.el-popover { |
||||
--el-popover-title-text-color: #999999; |
||||
border: 1px solid var(--panel-border-color); |
||||
.el-input.is-disabled .el-input__wrapper { |
||||
--el-disabled-bg-color: var(--panel-main-bg-color-9); |
||||
--el-disabled-border-color: var(--panel-main-bg-color-8); |
||||
} |
||||
|
||||
.md-editor-dark { |
||||
--md-bk-color: #111417; |
||||
.el-input > .el-input-group__append:hover { |
||||
background-color: var(--panel-main-bg-color-9) !important; |
||||
} |
||||
|
||||
// * 以下为自定义暗黑模式内容
|
||||
// login
|
||||
.login-container { |
||||
.login-form { |
||||
input:-webkit-autofill { |
||||
box-shadow: 0 0 0 1000px #f1f4f9 inset; |
||||
-webkit-text-fill-color: #333333; |
||||
-webkit-transition: background-color 1000s ease-out 0.5s; |
||||
transition: background-color 1000s ease-out 0.5s; |
||||
} |
||||
.el-input__wrapper { |
||||
background-color: #ffffff; |
||||
box-shadow: 0 0 0 1px #dcdfe6 inset; |
||||
} |
||||
.el-input__inner { |
||||
color: #606266; |
||||
} |
||||
} |
||||
.el-form-item__label { |
||||
color: var(--panel-main-bg-color-3); |
||||
} |
||||
|
||||
// scroll-bar
|
||||
::-webkit-scrollbar { |
||||
background-color: var(--el-scrollbar-bg-color) !important; |
||||
.el-card { |
||||
--el-card-bg-color: var(--panel-main-bg-color-10) |
||||
} |
||||
::-webkit-scrollbar-thumb { |
||||
background-color: var(--el-border-color-darker); |
||||
|
||||
.el-button--primary { |
||||
--el-button-hover-link-text-color: var(--panel-color-primary-light-1); |
||||
} |
||||
// sidebar
|
||||
.sidebar-container-popper { |
||||
border: 1px solid #66686c; |
||||
.el-menu--popup-container { |
||||
border: none; |
||||
} |
||||
|
||||
.el-button--primary.is-plain, .el-button--primary.is-text, .el-button--primary.is-link { |
||||
--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); |
||||
} |
||||
.sidebar-container { |
||||
border-right: 1px solid var(--el-border-color-light); |
||||
|
||||
.el-button: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-menu { |
||||
.el-menu-item { |
||||
&:hover { |
||||
background: rgba(37, 39, 44, 1); |
||||
} |
||||
&.is-active { |
||||
background: var(--el-color-primary); |
||||
color: #ffffff; |
||||
&:hover { |
||||
.el-icon { |
||||
color: #ffffff !important; |
||||
} |
||||
|
||||
span { |
||||
color: #ffffff !important; |
||||
} |
||||
} |
||||
&::before { |
||||
background: #ffffff; |
||||
} |
||||
} |
||||
} |
||||
.el-sub-menu { |
||||
.el-sub-menu__title { |
||||
&:hover { |
||||
background: rgba(37, 39, 44, 1); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.el-button:active { |
||||
--el-button-hover-text-color: var(--panel-text-color-white); |
||||
--el-button-active-bg-color: var(--el-color-primary-light-3); |
||||
--el-button-active-border-color: var(--el-color-primary-light-3); |
||||
} |
||||
.menu-collapse { |
||||
color: var(--el-menu-text-color); |
||||
border: var(--panel-border); |
||||
|
||||
.el-button:focus-visible { |
||||
outline: none; |
||||
} |
||||
|
||||
// layout
|
||||
.app-wrapper { |
||||
.main-container { |
||||
background-color: var(--panel-main-bg-color) !important; |
||||
} |
||||
.app-footer { |
||||
background-color: var(--panel-main-bg-color) !important; |
||||
border-top: var(--panel-border); |
||||
} |
||||
.mobile-header { |
||||
background-color: var(--panel-main-bg-color) !important; |
||||
border-bottom: var(--panel-border); |
||||
color: #ffffff; |
||||
} |
||||
.el-button.is-disabled { |
||||
color: var(--panel-main-bg-color-7); |
||||
border-color: var(--panel-main-bg-color-8); |
||||
background: var(--panel-main-bg-color-9); |
||||
} |
||||
.system-label { |
||||
color: var(--el-menu-text-color); |
||||
|
||||
.el-button.is-disabled:hover { |
||||
border-color: var(--panel-main-bg-color-8); |
||||
background: var(--panel-main-bg-color-9); |
||||
} |
||||
|
||||
.router_card_button { |
||||
.el-radio-button__inner { |
||||
background: none !important; |
||||
} |
||||
.el-radio-button__original-radio:checked + .el-radio-button__inner { |
||||
color: #ffffff; |
||||
background-color: var(--panel-button-active) !important; |
||||
box-shadow: none !important; |
||||
border: none !important; |
||||
} |
||||
.el-button--primary.is-link.is-disabled { |
||||
color: var(--panel-main-bg-color-8); |
||||
} |
||||
// content-box
|
||||
.content-box { |
||||
.text { |
||||
color: var(--el-text-color-regular) !important; |
||||
} |
||||
|
||||
.el-dropdown-menu__item:hover { |
||||
background-color: var(--panel-main-bg-color-7); |
||||
} |
||||
|
||||
.el-drawer .el-drawer__header span { |
||||
color: var(--el-menu-text-color); |
||||
} |
||||
.el-drawer { |
||||
border-left: 0.5px solid var(--panel-border-color); |
||||
} |
||||
|
||||
.el-input__wrapper { |
||||
background-color: var(--el-disabled-bg-color); |
||||
} |
||||
.el-input.is-disabled .el-input__wrapper { |
||||
box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset; |
||||
} |
||||
.el-radio-button__inner { |
||||
background: #1d2023; |
||||
} |
||||
.el-button--primary.is-plain.is-disabled { |
||||
background: #1d2023; |
||||
border-color: #303438; |
||||
} |
||||
.el-button--primary.is-plain { |
||||
background: #1d2023; |
||||
border-color: #303438; |
||||
} |
||||
.el-button.is-link.is-disabled { |
||||
color: var(--panel-button-disabled) !important; |
||||
} |
||||
.el-button.is-disabled { |
||||
border-color: #303438; |
||||
color: var(--panel-button-disabled); |
||||
} |
||||
.el-popper.is-dark { |
||||
color: rgb(171 173 173); |
||||
} |
||||
.path { |
||||
border: var(--panel-border); |
||||
.split { |
||||
color: #666666; |
||||
} |
||||
} |
||||
input:-webkit-autofill { |
||||
box-shadow: 0 0 0 1000px #323232 inset; |
||||
-webkit-text-fill-color: #cfd3dc; |
||||
transition: background-color 1000s ease-out 0.5s; |
||||
} |
||||
.el-avatar { |
||||
--el-avatar-bg-color: #111417 !important; |
||||
box-shadow: 0px 0px 4px rgba(0, 94, 235, 0.1); |
||||
border: 0.5px solid #1f2022; |
||||
} |
||||
.el-page-header__content { |
||||
color: rgb(174, 166, 153); |
||||
} |
||||
.el-dialog { |
||||
background-color: var(--panel-main-bg-color-8); |
||||
border: 1px solid var(--panel-border-color); |
||||
|
||||
.el-dialog__header { |
||||
border-bottom: var(--panel-border); |
||||
color: #999999; |
||||
color: var(--el-text-color-primary); |
||||
|
||||
.el-dialog__title { |
||||
color: var(--el-menu-text-color); |
||||
} |
||||
} |
||||
} |
||||
.el-tabs__item { |
||||
color: #999999; |
||||
} |
||||
.el-tabs__item.is-active { |
||||
color: var(--el-color-primary) !important; |
||||
} |
||||
.el-descriptions__title { |
||||
color: #999999; |
||||
} |
||||
.el-descriptions__content.el-descriptions__cell.is-bordered-content { |
||||
color: #999999; |
||||
} |
||||
.el-descriptions--large .el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell { |
||||
padding: 12px 15px; |
||||
background-color: transparent; |
||||
} |
||||
.el-descriptions__body { |
||||
background-color: transparent; |
||||
} |
||||
.el-descriptions__label { |
||||
color: var(--el-color-primary) !important; |
||||
margin-right: 16px; |
||||
} |
||||
|
||||
.terminal-tabs { |
||||
background: none !important; |
||||
.el-tabs__header { |
||||
background: #000000; |
||||
} |
||||
} |
||||
.el-pager { |
||||
li { |
||||
color: #999999; |
||||
&.is-active { |
||||
color: var(--el-pagination-hover-color); |
||||
} |
||||
} |
||||
} |
||||
.el-loading-mask { |
||||
background-color: rgba(0, 0, 0, 0.8); |
||||
} |
||||
|
||||
.h-app-card { |
||||
.h-app-content { |
||||
.h-app-title { |
||||
color: #f2f8ff; |
||||
} |
||||
} |
||||
.el-alert--error { |
||||
--el-alert-bg-color: var(--panel-alert-error-bg-color); |
||||
--el-color-error: var(--panel-alert-error-text-color); |
||||
} |
||||
|
||||
.infinite-list .infinite-list-item { |
||||
background: #212426; |
||||
&:hover { |
||||
background: #212426; |
||||
} |
||||
.el-alert--success { |
||||
--el-alert-bg-color: var(--panel-alert-success-bg-color); |
||||
--el-color-success: var(--panel-alert-success-text-color);; |
||||
} |
||||
|
||||
.el-alert--warning.is-light { |
||||
background-color: rgb(56, 59, 59); |
||||
color: var(--el-color-warning); |
||||
} |
||||
.el-dropdown-menu__item.is-disabled { |
||||
color: var(--panel-button-disabled); |
||||
} |
||||
.el-date-editor .el-range-separator { |
||||
color: var(--panel-button-disabled); |
||||
.el-alert--warning { |
||||
--el-alert-bg-color: var(--panel-alert-warning-bg-color); |
||||
--el-color-warning: var(--panel-alert-warning-text-color); |
||||
} |
||||
|
||||
.el-input-group__append { |
||||
border-left: 0; |
||||
background-color: #212426 !important; |
||||
border-top-left-radius: 0; |
||||
border-bottom-left-radius: 0; |
||||
box-shadow: 0 1px 0 0 var(--el-input-border-color) inset, 0 -1px 0 0 var(--el-input-border-color) inset, |
||||
-1px 0 0 0 var(--el-input-border-color) inset; |
||||
|
||||
&:hover { |
||||
color: var(--el-color-primary); |
||||
background-color: var(--el-color-primary-light-9) !important; |
||||
} |
||||
} |
||||
|
||||
.el-collapse-item__header { |
||||
color: #ffffff; |
||||
} |
||||
|
||||
.file-item:hover { |
||||
background-color: #4f4f4f; |
||||
.el-alert--info { |
||||
--el-alert-bg-color: var(--panel-alert-info-bg-color); |
||||
--el-color-info: var(--panel-alert-info-text-color); |
||||
} |
||||
|
||||
.level-up-pro { |
||||
--dark-gold-base-color: #eaba63; |
||||
--dark-gold-text-color: #1f2329; |
||||
--el-color-primary: var(--dark-gold-base-color); |
||||
|
||||
.title { |
||||
color: var(--dark-gold-base-color); |
||||
} |
||||
.el-button--primary { |
||||
&.is-plain { |
||||
background: var(--dark-gold-base-color); |
||||
--el-button-text-color: var(--dark-gold-text-color); |
||||
|
||||
&.is-disabled { |
||||
background: #1d2023; |
||||
border-color: #303438; |
||||
} |
||||
} |
||||
|
||||
&.is-text { |
||||
--el-button-text-color: var(--dark-gold-base-color); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,8 @@
|
||||
export function setPrimaryColor(color: string) { |
||||
let setPrimaryColor: (arg0: string) => any; |
||||
const xpackModules = import.meta.glob('../xpack/utils/theme/tool.ts', { eager: true }); |
||||
if (xpackModules['../xpack/utils/theme/tool.ts']) { |
||||
setPrimaryColor = xpackModules['../xpack/utils/theme/tool.ts']['setPrimaryColor'] || {}; |
||||
return setPrimaryColor(color); |
||||
} |
||||
} |
||||
@ -1,59 +0,0 @@
|
||||
import { MsgWarning } from '../message'; |
||||
|
||||
/** |
||||
* hex颜色转rgb颜色 |
||||
* @param str 颜色值字符串 |
||||
* @returns 返回处理后的颜色值 |
||||
*/ |
||||
export function hexToRgb(str: any) { |
||||
let hexs: any = ''; |
||||
let reg = /^\#?[0-9A-Fa-f]{6}$/; |
||||
if (!reg.test(str)) return MsgWarning('输入错误的hex'); |
||||
str = str.replace('#', ''); |
||||
hexs = str.match(/../g); |
||||
for (let i = 0; i < 3; i++) hexs[i] = parseInt(hexs[i], 16); |
||||
return hexs; |
||||
} |
||||
|
||||
/** |
||||
* rgb颜色转Hex颜色 |
||||
* @param r 代表红色 |
||||
* @param g 代表绿色 |
||||
* @param b 代表蓝色 |
||||
* @returns 返回处理后的颜色值 |
||||
*/ |
||||
export function rgbToHex(r: any, g: any, b: any) { |
||||
let reg = /^\d{1,3}$/; |
||||
if (!reg.test(r) || !reg.test(g) || !reg.test(b)) return MsgWarning('输入错误的rgb颜色值'); |
||||
let hexs = [r.toString(16), g.toString(16), b.toString(16)]; |
||||
for (let i = 0; i < 3; i++) if (hexs[i].length == 1) hexs[i] = `0${hexs[i]}`; |
||||
return `#${hexs.join('')}`; |
||||
} |
||||
|
||||
/** |
||||
* 加深颜色值 |
||||
* @param color 颜色值字符串 |
||||
* @param level 加深的程度，限0-1之间 |
||||
* @returns 返回处理后的颜色值 |
||||
*/ |
||||
export function getDarkColor(color: string, level: number) { |
||||
let reg = /^\#?[0-9A-Fa-f]{6}$/; |
||||
if (!reg.test(color)) return MsgWarning('输入错误的hex颜色值'); |
||||
let rgb = hexToRgb(color); |
||||
for (let i = 0; i < 3; i++) rgb[i] = Math.floor(rgb[i] * (1 - level)); |
||||
return rgbToHex(rgb[0], rgb[1], rgb[2]); |
||||
} |
||||
|
||||
/** |
||||
* 变浅颜色值 |
||||
* @param color 颜色值字符串 |
||||
* @param level 加深的程度，限0-1之间 |
||||
* @returns 返回处理后的颜色值 |
||||
*/ |
||||
export function getLightColor(color: string, level: number) { |
||||
let reg = /^\#?[0-9A-Fa-f]{6}$/; |
||||
if (!reg.test(color)) return MsgWarning('输入错误的hex颜色值'); |
||||
let rgb = hexToRgb(color); |
||||
for (let i = 0; i < 3; i++) rgb[i] = Math.floor((255 - rgb[i]) * level + rgb[i]); |
||||
return rgbToHex(rgb[0], rgb[1], rgb[2]); |
||||
} |
||||
@ -0,0 +1,226 @@
|
||||
<template> |
||||
<div> |
||||
<el-drawer |
||||
v-model="drawerVisible" |
||||
:destroy-on-close="true" |
||||
:close-on-click-modal="false" |
||||
:close-on-press-escape="false" |
||||
size="30%" |
||||
> |
||||
<template #header> |
||||
<DrawerHeader :header="$t('xpack.theme.customColor')" :back="handleClose" /> |
||||
</template> |
||||
<el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading"> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="22"> |
||||
<el-form-item :label="$t('setting.light')" prop="light"> |
||||
<div class="flex flex-wrap justify-between items-center sm:items-start"> |
||||
<div class="flex gap-1"> |
||||
<el-tooltip :content="$t('xpack.theme.classicBlue')" placement="top"> |
||||
<el-button |
||||
color="#005eeb" |
||||
circle |
||||
dark |
||||
:class="form.light === '#005eeb' ? 'selected-white' : ''" |
||||
@click="changeLightColor('#005eeb')" |
||||
/> |
||||
</el-tooltip> |
||||
<el-tooltip :content="$t('xpack.theme.freshGreen')" placement="top"> |
||||
<el-button |
||||
color="#00CC00" |
||||
:class="form.light === '#00CC00' ? 'selected-white' : ''" |
||||
circle |
||||
dark |
||||
@click="changeLightColor('#00CC00')" |
||||
/> |
||||
</el-tooltip> |
||||
<el-color-picker |
||||
v-model="form.light" |
||||
class="ml-4" |
||||
:predefine="predefineColors" |
||||
show-alpha |
||||
/> |
||||
</div> |
||||
</div> |
||||
</el-form-item> |
||||
|
||||
<el-form-item :label="$t('setting.dark')" prop="dark"> |
||||
<div class="flex flex-wrap justify-between items-center sm:items-start"> |
||||
<div class="flex flex-wrap justify-between items-center mt-4 sm:mt-0"> |
||||
<div class="flex gap-1"> |
||||
<el-tooltip :content="$t('xpack.theme.classicBlue')" placement="top"> |
||||
<el-button |
||||
color="#3D8EFF" |
||||
circle |
||||
dark |
||||
:class="form.dark === '#3D8EFF' ? 'selected-white' : ''" |
||||
@click="changeDarkColor('#3D8EFF')" |
||||
/> |
||||
</el-tooltip> |
||||
<el-tooltip :content="$t('xpack.theme.lingXiaGold')" placement="top"> |
||||
<el-button |
||||
color="#F0BE96" |
||||
:class="form.dark === '#F0BE96' ? 'selected-white' : ''" |
||||
circle |
||||
dark |
||||
@click="changeDarkColor('#F0BE96')" |
||||
/> |
||||
</el-tooltip> |
||||
<el-tooltip :content="$t('xpack.theme.freshGreen')" placement="top"> |
||||
<el-button |
||||
color="#00CC00" |
||||
:class="form.dark === '#00CC00' ? 'selected-white' : ''" |
||||
circle |
||||
dark |
||||
@click="changeDarkColor('#00CC00')" |
||||
/> |
||||
</el-tooltip> |
||||
<el-color-picker |
||||
v-model="form.dark" |
||||
class="ml-4" |
||||
:predefine="predefineColors" |
||||
show-alpha |
||||
/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form> |
||||
<template #footer> |
||||
<span class="dialog-footer"> |
||||
<el-button @click="onReSet">{{ $t('xpack.theme.setDefault') }}</el-button> |
||||
<el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button> |
||||
<el-button :disabled="loading" type="primary" @click="onSave(formRef)"> |
||||
{{ $t('commons.button.confirm') }} |
||||
</el-button> |
||||
</span> |
||||
</template> |
||||
</el-drawer> |
||||
</div> |
||||
</template> |
||||
<script lang="ts" setup> |
||||
import { reactive, ref } from 'vue'; |
||||
import i18n from '@/lang'; |
||||
import { MsgSuccess } from '@/utils/message'; |
||||
import DrawerHeader from '@/components/drawer-header/index.vue'; |
||||
import { FormInstance } from 'element-plus'; |
||||
import { initFavicon, updateXpackSettingByKey } from '@/utils/xpack'; |
||||
import { setPrimaryColor } from '@/utils/theme'; |
||||
import { GlobalStore } from '@/store'; |
||||
|
||||
const emit = defineEmits<{ (e: 'search'): void }>(); |
||||
const drawerVisible = ref(); |
||||
const loading = ref(); |
||||
|
||||
interface DialogProps { |
||||
themeColor: { light: string; dark: string }; |
||||
theme: ''; |
||||
} |
||||
|
||||
interface ThemeColor { |
||||
light: string; |
||||
dark: string; |
||||
} |
||||
|
||||
const form = reactive({ |
||||
themeColor: {} as ThemeColor, |
||||
theme: '', |
||||
light: '', |
||||
dark: '', |
||||
}); |
||||
const formRef = ref<FormInstance>(); |
||||
|
||||
const predefineColors = ref([ |
||||
'#005eeb', |
||||
'#3D8EFF', |
||||
'#F0BE96', |
||||
'#00CC00', |
||||
'#00ced1', |
||||
'#c71585', |
||||
'#ff4500', |
||||
'#ff8c00', |
||||
'#ffd700', |
||||
]); |
||||
|
||||
const globalStore = GlobalStore(); |
||||
|
||||
const acceptParams = (params: DialogProps): void => { |
||||
form.themeColor = params.themeColor; |
||||
form.theme = params.theme; |
||||
form.dark = form.themeColor.dark; |
||||
form.light = form.themeColor.light; |
||||
drawerVisible.value = true; |
||||
}; |
||||
|
||||
const changeLightColor = (color: string) => { |
||||
form.light = color; |
||||
}; |
||||
|
||||
const changeDarkColor = (color: string) => { |
||||
form.dark = color; |
||||
}; |
||||
|
||||
const onSave = async (formEl: FormInstance | undefined) => { |
||||
if (!formEl) return; |
||||
await formEl.validate(async (valid) => { |
||||
if (!valid) return; |
||||
form.themeColor = { light: form.light, dark: form.dark }; |
||||
if (globalStore.isProductPro) { |
||||
await updateXpackSettingByKey('ThemeColor', JSON.stringify(form.themeColor)); |
||||
MsgSuccess(i18n.global.t('commons.msg.operationSuccess')); |
||||
globalStore.themeConfig.themeColor = JSON.stringify(form.themeColor); |
||||
loading.value = false; |
||||
let color: string; |
||||
if (form.theme === 'auto') { |
||||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); |
||||
color = prefersDark.matches ? form.dark : form.light; |
||||
} else { |
||||
color = form.theme === 'dark' ? form.dark : form.light; |
||||
} |
||||
globalStore.themeConfig.primary = color; |
||||
setPrimaryColor(color); |
||||
initFavicon(); |
||||
drawerVisible.value = false; |
||||
emit('search'); |
||||
return; |
||||
} |
||||
}); |
||||
}; |
||||
|
||||
const onReSet = async () => { |
||||
form.themeColor = { light: '#005eeb', dark: '#F0BE96' }; |
||||
if (globalStore.isProductPro) { |
||||
await updateXpackSettingByKey('ThemeColor', JSON.stringify(form.themeColor)); |
||||
MsgSuccess(i18n.global.t('commons.msg.operationSuccess')); |
||||
loading.value = false; |
||||
globalStore.themeConfig.themeColor = JSON.stringify(form.themeColor); |
||||
let color: string; |
||||
if (form.theme === 'auto') { |
||||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); |
||||
color = prefersDark.matches ? '#F0BE96' : '#005eeb'; |
||||
} else { |
||||
color = form.theme === 'dark' ? '#F0BE96' : '#005eeb'; |
||||
} |
||||
globalStore.themeConfig.primary = color; |
||||
setPrimaryColor(color); |
||||
initFavicon(); |
||||
drawerVisible.value = false; |
||||
return; |
||||
} |
||||
}; |
||||
|
||||
const handleClose = () => { |
||||
drawerVisible.value = false; |
||||
}; |
||||
|
||||
defineExpose({ |
||||
acceptParams, |
||||
}); |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.selected-white { |
||||
box-shadow: inset 0 0 0 1px white; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue