This commit is contained in:
wchino
2026-06-13 17:38:25 +08:00
parent e7e938f261
commit 7b33d9f9fa
190 changed files with 23222 additions and 4336 deletions

View File

@@ -907,4 +907,956 @@ body {
.el-time-panel { background: #1c1c1c !important; border-color: #333 !important; }
.el-time-spinner__item { color: #aaa !important; }
.el-time-spinner__item.is-active:not(.is-disabled) { color: #fff !important; }
/* ──────────────────────────────────────────────────────────────
Admin light refresh
The legacy admin theme was built as one dark surface. These
overrides intentionally keep the current component system while
giving every page clearer hierarchy, calmer colors and stronger
table/form affordance.
────────────────────────────────────────────────────────────── */
:root {
--accent: #1f2320;
--accent-muted: #5f5b53;
--accent-dim: #8c867c;
--accent-subtle: #f0ede6;
--accent-border: #ded8cc;
--accent-hover: #f5f2eb;
--accent-focus: rgba(31, 35, 32, 0.16);
--success-text: #346538;
--success-bg: #edf3ec;
--success-border: #d6e3d4;
--warning-text: #956400;
--warning-bg: #fbf3db;
--warning-border: #eadcad;
--danger-text: #9f2f2d;
--danger-bg: #fdebec;
--danger-border: #f3c5c7;
--info-text: #1f6c9f;
--info-bg: #e1f3fe;
--info-border: #c7e4f6;
--gold-deep: var(--warning-text);
--gold-mid: #b88928;
--gold-bright: #8f6a18;
--gold-glow: #8f6a18;
--gold-surface: var(--warning-bg);
--gold-border: var(--warning-border);
--gold-text: var(--warning-text);
--green-deep: var(--success-text);
--green-mid: #477a4c;
--green-bright: #346538;
--green-glow: #346538;
--green-surface: var(--success-bg);
--green-border: var(--success-border);
--green-text: var(--success-text);
--primary: #1f2320;
--primary-dark: #111411;
--primary-light: #363a35;
--primary-link: #1f6c9f;
--primary-on: #ffffff;
--primary-grad: #1f2320;
--primary-grad-hover: #363a35;
--primary-shadow: none;
--bg-body: #f7f6f3;
--bg-card: #ffffff;
--bg-elevated: #fbfbfa;
--bg-hover: #f1eee8;
--text: #1f2320;
--text-muted: #78746b;
--border: #e7e2d8;
--border-soft: #f0ece4;
--radius: 8px;
--radius-sm: 6px;
--shadow: 0 8px 28px rgba(56, 49, 37, 0.05);
--el-bg-color: #ffffff;
--el-bg-color-page: #f7f6f3;
--el-bg-color-overlay: #ffffff;
--el-text-color-primary: #1f2320;
--el-text-color-regular: #3d413b;
--el-text-color-secondary: #78746b;
--el-text-color-placeholder:#aaa49a;
--el-border-color: #e7e2d8;
--el-border-color-light: #eee9df;
--el-border-color-lighter: #f4f0e8;
--el-fill-color: #f8f6f1;
--el-fill-color-blank: #ffffff;
--el-fill-color-light: #fbfaf7;
--el-color-primary: #1f2320;
--el-color-primary-light-3: #5d635c;
--el-color-primary-light-5: #8d938b;
--el-color-primary-light-7: #d9ddd6;
--el-color-primary-light-9: #f4f6f2;
--el-color-primary-dark-2: #111411;
--el-color-success: var(--success-text);
--el-color-success-light-9: var(--success-bg);
--el-color-warning: var(--warning-text);
--el-color-warning-light-9: var(--warning-bg);
--el-color-danger: var(--danger-text);
--el-color-danger-light-9: var(--danger-bg);
--el-color-info: var(--info-text);
--el-color-info-light-9: var(--info-bg);
--el-table-bg-color: #ffffff;
--el-table-tr-bg-color: #ffffff;
--el-table-header-bg-color: #fbfaf7;
--el-table-row-hover-bg-color: #f7f4ee;
--el-table-border-color: #eee9df;
--el-table-text-color: #363a35;
--el-table-header-text-color: #6c675f;
--el-card-bg-color: #ffffff;
--el-card-border-color: #e7e2d8;
color-scheme: light;
}
html,
body,
#app {
background: var(--bg-body) !important;
color: var(--text) !important;
}
body {
font-family: 'SF Pro Display', 'Geist Sans', 'Helvetica Neue', 'PingFang SC',
'Microsoft YaHei', Arial, sans-serif;
font-variant-numeric: tabular-nums;
}
button,
input,
textarea,
select {
font-family: inherit;
}
*:focus-visible {
outline: 2px solid rgba(31, 35, 32, 0.28);
outline-offset: 2px;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #d5cfc3;
border: 3px solid transparent;
border-radius: 999px;
background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
background: #bdb6a9;
border: 3px solid transparent;
background-clip: padding-box;
}
* {
scrollbar-color: #d5cfc3 transparent;
}
a {
color: var(--primary-link);
}
.el-card {
border: 1px solid var(--border) !important;
border-radius: var(--radius) !important;
background: var(--bg-card) !important;
box-shadow: var(--shadow) !important;
color: var(--text) !important;
}
.el-card__header {
border-bottom: 1px solid var(--border-soft) !important;
padding: 14px 18px !important;
}
.el-card__body {
color: var(--text) !important;
}
.el-table {
border-radius: var(--radius) !important;
background: #ffffff !important;
color: #363a35 !important;
font-size: 13px;
--el-table-border-color: var(--border-soft);
}
.el-table::before,
.el-table__inner-wrapper::before {
background: var(--border-soft) !important;
}
.el-table th.el-table__cell {
height: 42px;
background: #fbfaf7 !important;
border-bottom: 1px solid var(--border) !important;
color: #6c675f !important;
font-size: 12px;
font-weight: 700;
letter-spacing: 0;
}
.el-table td.el-table__cell {
border-bottom-color: var(--border-soft) !important;
color: #363a35 !important;
}
.el-table--striped .el-table__body tr.el-table__row--striped td {
background: #fbfaf7 !important;
}
.el-table__body tr:hover > td {
background: #f7f4ee !important;
}
.el-table .cell {
line-height: 1.45;
}
.el-table__empty-block {
min-height: 168px;
}
.el-table__empty-text {
color: var(--text-muted) !important;
}
.el-table__fixed-right,
.el-table__fixed {
box-shadow: none !important;
}
.el-table__fixed-right::before,
.el-table__fixed::before {
background: var(--border-soft) !important;
}
.el-input__wrapper,
.el-select__wrapper,
.el-textarea__inner,
.el-input-number .el-input__wrapper,
.el-date-editor .el-input__wrapper {
min-height: 34px;
border-radius: 7px !important;
background: #ffffff !important;
box-shadow: 0 0 0 1px var(--border) inset !important;
color: var(--text) !important;
}
.el-input__wrapper:hover,
.el-select__wrapper:hover,
.el-textarea__inner:hover {
box-shadow: 0 0 0 1px #d5cfc3 inset !important;
}
.el-input__wrapper.is-focus,
.el-select__wrapper.is-focused,
.el-textarea__inner:focus {
box-shadow: 0 0 0 1px #1f2320 inset, 0 0 0 3px rgba(31, 35, 32, 0.08) !important;
}
.el-input-number {
--el-input-number-controls-height: 15px;
}
.el-input-number .el-input__wrapper {
padding-right: 32px !important;
}
.el-input-number .el-input__inner {
padding: 0 4px !important;
text-align: center;
}
.el-input-number.is-controls-right .el-input__wrapper {
padding-left: 8px !important;
padding-right: 32px !important;
}
.el-input-number--small.is-controls-right .el-input__wrapper {
padding-right: 28px !important;
}
.el-input-number__increase,
.el-input-number__decrease {
background: #fbfaf7 !important;
border-color: var(--border) !important;
color: #6c675f !important;
box-shadow: none !important;
}
.el-input-number__increase:hover,
.el-input-number__decrease:hover {
background: var(--accent-hover) !important;
color: var(--text) !important;
}
.el-input-number.is-controls-right .el-input-number__increase {
top: 1px !important;
right: 1px !important;
width: 30px !important;
height: calc((100% - 2px) / 2) !important;
border-left: 1px solid var(--border) !important;
border-bottom: 1px solid var(--border) !important;
border-radius: 0 7px 0 0 !important;
}
.el-input-number.is-controls-right .el-input-number__decrease {
right: 1px !important;
bottom: 1px !important;
width: 30px !important;
height: calc((100% - 2px) / 2) !important;
border-left: 1px solid var(--border) !important;
border-radius: 0 0 7px 0 !important;
}
.el-input-number--small.is-controls-right .el-input-number__increase,
.el-input-number--small.is-controls-right .el-input-number__decrease {
width: 28px !important;
}
.el-input-number__increase,
.el-input-number__decrease {
display: inline-flex !important;
align-items: center;
justify-content: center;
line-height: 1 !important;
}
.el-input-number:not(.is-controls-right) .el-input-number__decrease {
border-right: 1px solid var(--border) !important;
}
.el-input-number:not(.is-controls-right) .el-input-number__increase {
border-left: 1px solid var(--border) !important;
}
.el-input-number__increase.is-disabled,
.el-input-number__decrease.is-disabled {
background: #f4f0e8 !important;
color: #b6afa3 !important;
}
input[type='number'] {
-moz-appearance: textfield;
}
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
margin: 0;
-webkit-appearance: none;
}
.el-input__inner,
.el-select__placeholder,
.el-date-editor .el-input__inner,
.el-textarea__inner {
color: var(--text) !important;
}
.el-input__inner::placeholder,
.el-textarea__inner::placeholder {
color: #aaa49a !important;
}
.el-input.is-disabled .el-input__wrapper,
.el-select.is-disabled .el-select__wrapper,
.el-textarea.is-disabled .el-textarea__inner {
background: #f4f0e8 !important;
box-shadow: 0 0 0 1px #ebe5da inset !important;
}
.el-input.is-disabled .el-input__inner,
.el-select.is-disabled .el-select__placeholder {
color: #aaa49a !important;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
-webkit-text-fill-color: var(--text) !important;
caret-color: var(--text) !important;
}
.el-form-item__label {
color: #6c675f !important;
font-weight: 650;
}
.el-form-item__error {
color: var(--danger-text) !important;
}
.el-button {
border-radius: 7px !important;
border-color: var(--border) !important;
background: #ffffff !important;
color: var(--text) !important;
font-weight: 650 !important;
box-shadow: none !important;
}
.el-button:hover,
.el-button:focus {
background: var(--accent-hover) !important;
border-color: #d5cfc3 !important;
color: var(--text) !important;
}
.el-button--primary {
background: var(--primary) !important;
border-color: var(--primary) !important;
color: #ffffff !important;
}
.el-button--primary:hover,
.el-button--primary:focus {
background: var(--primary-light) !important;
border-color: var(--primary-light) !important;
color: #ffffff !important;
}
.el-button--primary.is-plain,
.el-button--info.is-plain {
background: var(--info-bg) !important;
border-color: var(--info-border) !important;
color: var(--info-text) !important;
}
.el-button--primary.is-plain:hover,
.el-button--primary.is-plain:focus,
.el-button--info.is-plain:hover,
.el-button--info.is-plain:focus {
background: #d5ecfb !important;
border-color: #9fd0ed !important;
color: #155b86 !important;
}
.el-button--success {
background: var(--success-text) !important;
border-color: var(--success-text) !important;
color: #ffffff !important;
}
.el-button--success.is-plain {
background: var(--success-bg) !important;
border-color: var(--success-border) !important;
color: var(--success-text) !important;
}
.el-button--success.is-plain:hover,
.el-button--success.is-plain:focus {
background: #dcebd9 !important;
border-color: #bad0b8 !important;
color: #2f5d34 !important;
}
.el-button--warning {
background: var(--warning-text) !important;
border-color: var(--warning-text) !important;
color: #ffffff !important;
}
.el-button--warning.is-plain {
background: var(--warning-bg) !important;
border-color: var(--warning-border) !important;
color: var(--warning-text) !important;
}
.el-button--warning.is-plain:hover,
.el-button--warning.is-plain:focus {
background: #f3e6bd !important;
border-color: #d4bd75 !important;
color: #7f5500 !important;
}
.el-button--danger {
background: var(--danger-text) !important;
border-color: var(--danger-text) !important;
color: #ffffff !important;
}
.el-button--danger.is-plain {
background: var(--danger-bg) !important;
border-color: var(--danger-border) !important;
color: var(--danger-text) !important;
}
.el-button--danger.is-plain:hover,
.el-button--danger.is-plain:focus {
background: #f8d9dc !important;
border-color: #e3a8ac !important;
color: #842827 !important;
}
.el-button--info {
background: #eef1ec !important;
border-color: #d9ddd6 !important;
color: #4d524b !important;
}
.el-button.is-link,
.el-button--primary.is-link,
.el-button--success.is-link,
.el-button--warning.is-link,
.el-button--danger.is-link {
min-height: 0;
padding: 0 4px !important;
border-color: transparent !important;
background: transparent !important;
color: var(--primary-link) !important;
}
.el-button--danger.is-link {
color: var(--danger-text) !important;
}
.el-button--warning.is-link {
color: var(--warning-text) !important;
}
.el-button.is-disabled,
.el-button.is-disabled:hover {
background: #f4f0e8 !important;
border-color: #ebe5da !important;
color: #aaa49a !important;
}
.el-button.is-plain.is-disabled,
.el-button.is-plain.is-disabled:hover,
.el-button.is-plain.is-disabled:focus,
.el-button.is-plain:disabled,
.el-button--primary.is-plain.is-disabled,
.el-button--primary.is-plain.is-disabled:hover,
.el-button--primary.is-plain:disabled,
.el-button--success.is-plain.is-disabled,
.el-button--success.is-plain.is-disabled:hover,
.el-button--success.is-plain:disabled,
.el-button--warning.is-plain.is-disabled,
.el-button--warning.is-plain.is-disabled:hover,
.el-button--warning.is-plain:disabled,
.el-button--danger.is-plain.is-disabled,
.el-button--danger.is-plain.is-disabled:hover,
.el-button--danger.is-plain:disabled {
background: #f4f0e8 !important;
border-color: #e3dcca !important;
color: #aaa49a !important;
}
.el-tag {
border-radius: 999px !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
}
.el-tag--success {
background: var(--success-bg) !important;
border-color: var(--success-border) !important;
color: var(--success-text) !important;
}
.el-tag--warning {
background: var(--warning-bg) !important;
border-color: var(--warning-border) !important;
color: var(--warning-text) !important;
}
.el-tag--danger {
background: var(--danger-bg) !important;
border-color: var(--danger-border) !important;
color: var(--danger-text) !important;
}
.el-tag--info {
background: #eef1ec !important;
border-color: #d9ddd6 !important;
color: #5d635c !important;
}
.el-tag--primary {
background: var(--accent-subtle) !important;
border-color: var(--accent-border) !important;
color: var(--accent) !important;
}
.el-pagination {
--el-pagination-bg-color: #ffffff;
--el-pagination-button-bg-color: #ffffff;
--el-pagination-hover-color: #1f2320;
--el-pagination-text-color: #6c675f;
--el-pagination-button-disabled-bg-color: #f4f0e8;
gap: 4px;
}
.el-pagination .btn-prev,
.el-pagination .btn-next,
.el-pager li {
border: 1px solid var(--border) !important;
border-radius: 7px !important;
color: var(--text-muted) !important;
}
.el-pager li.is-active {
background: var(--primary) !important;
border-color: var(--primary) !important;
color: #ffffff !important;
}
.el-dropdown__popper,
.el-select__popper,
.el-popover.el-popper {
border: 1px solid var(--border) !important;
background: #ffffff !important;
box-shadow: 0 18px 44px rgba(56, 49, 37, 0.12) !important;
}
.el-dropdown-menu,
.el-select-dropdown {
background: #ffffff !important;
}
.el-dropdown-menu__item,
.el-select-dropdown__item {
color: var(--text) !important;
}
.el-dropdown-menu__item:hover,
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
background: var(--accent-hover) !important;
color: var(--text) !important;
}
.el-select-dropdown__item.is-selected {
color: var(--text) !important;
font-weight: 700;
}
.el-dialog,
.el-message-box {
border: 1px solid var(--border) !important;
border-radius: 10px !important;
background: #ffffff !important;
box-shadow: 0 24px 64px rgba(56, 49, 37, 0.14) !important;
}
.el-dialog__header,
.el-message-box__header {
border-bottom: 1px solid var(--border-soft) !important;
}
.el-dialog__title,
.el-message-box__title {
color: var(--text) !important;
font-weight: 750 !important;
}
.el-dialog__body,
.el-message-box__content {
color: var(--text) !important;
}
.el-dialog__footer,
.el-message-box__btns {
border-top: 1px solid var(--border-soft) !important;
}
.el-overlay {
background: rgba(31, 35, 32, 0.22) !important;
backdrop-filter: blur(3px);
}
.el-loading-mask {
background: rgba(247, 246, 243, 0.78) !important;
backdrop-filter: blur(2px);
}
.el-loading-spinner .path {
stroke: var(--primary) !important;
}
.el-loading-spinner .el-loading-text {
color: var(--text-muted) !important;
}
.el-message {
border: 1px solid var(--border) !important;
border-radius: 8px !important;
background: #ffffff !important;
box-shadow: 0 12px 30px rgba(56, 49, 37, 0.12) !important;
}
.el-alert {
border-radius: 8px !important;
}
.el-tabs__item {
color: var(--text-muted) !important;
font-weight: 650;
}
.el-tabs__item.is-active,
.el-tabs__item:hover {
color: var(--text) !important;
}
.el-tabs__active-bar {
background: var(--primary) !important;
}
.el-tabs__nav-wrap::after {
background: var(--border-soft) !important;
}
.el-statistic__head {
color: var(--text-muted) !important;
font-size: 12px !important;
font-weight: 650 !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
.el-statistic__content .el-statistic__number {
color: var(--text) !important;
font-size: 24px !important;
font-weight: 750 !important;
}
.el-picker-panel,
.el-time-panel {
background: #ffffff !important;
border-color: var(--border) !important;
color: var(--text) !important;
box-shadow: 0 18px 44px rgba(56, 49, 37, 0.12) !important;
}
.el-picker-panel__footer {
background: #fbfaf7 !important;
border-top-color: var(--border-soft) !important;
}
.el-date-picker__header-label,
.el-date-table th,
.el-date-table td .el-date-table-cell__text,
.el-time-spinner__item {
color: var(--text) !important;
}
.el-date-table td.available:hover {
color: var(--primary) !important;
}
.el-date-table td.current:not(.disabled) .el-date-table-cell__text {
background: var(--primary) !important;
color: #ffffff !important;
}
.el-time-spinner__item.is-active:not(.is-disabled) {
color: var(--primary) !important;
font-weight: 700;
}
.admin-list-page {
display: flex;
flex-direction: column;
gap: 16px;
color: var(--text);
}
.list-chrome {
display: flex;
flex-direction: column;
gap: 14px;
min-height: 0;
padding: 18px;
border: 1px solid var(--border);
border-radius: 10px;
background: #ffffff;
box-shadow: var(--shadow);
}
.list-toolbar,
.filter-bar,
.filters,
.list-panel-toolbar,
.table-toolbar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
padding: 0;
}
.list-toolbar + .table-wrap,
.filter-bar + .table-wrap,
.filters + .table-wrap,
.list-panel-toolbar + .table-wrap {
margin-top: 2px;
}
.table-wrap,
.admin-table-wrap,
.table-panel,
.list-panel {
min-width: 0;
border: 1px solid var(--border);
border-radius: 10px;
background: #ffffff;
box-shadow: var(--shadow);
overflow: hidden;
}
.list-chrome > .table-wrap,
.list-chrome > .admin-table-wrap,
.list-chrome > .table-panel,
.list-chrome > .list-panel {
border-color: var(--border-soft);
box-shadow: none;
}
.table-scroll,
.admin-table-scroll,
.el-table__body-wrapper {
scrollbar-color: #d5cfc3 transparent;
}
.pager,
.list-pager,
.table-pager,
.pagination-bar {
display: flex;
justify-content: flex-end;
align-items: center;
flex-wrap: wrap;
gap: 10px;
padding-top: 12px;
}
.muted,
.hint,
.subtext,
.desc,
.table-hint,
.section-hint {
color: var(--text-muted) !important;
}
.danger-text,
.c-red {
color: var(--danger-text) !important;
}
.success-text,
.c-green {
color: var(--success-text) !important;
}
.warning-text,
.c-gold,
.c-yellow {
color: var(--warning-text) !important;
}
.admin-page-state,
.state-card,
.empty-state,
.error-state {
border: 1px solid var(--border);
border-radius: 10px;
background: #ffffff;
color: var(--text);
box-shadow: var(--shadow);
}
.error-state,
.state-card.is-error {
background: var(--danger-bg);
border-color: var(--danger-border);
}
.error-state .state-title,
.state-card.is-error .state-title {
color: var(--danger-text);
}
.user-edit-dialog .edit-stats-panel,
.agent-edit-dialog .edit-stats-panel,
.detail-actions {
border-top-color: var(--border-soft);
}
.user-edit-dialog .password-field-label,
.agent-edit-dialog .password-field-label,
.user-edit-dialog .password-empty,
.agent-edit-dialog .password-empty {
color: var(--text-muted);
}
.user-edit-dialog .password-plain,
.agent-edit-dialog .password-plain {
color: var(--warning-text);
}
@media (max-width: 700px) {
.admin-list-page {
gap: 12px;
}
.list-chrome {
padding: 12px;
border-radius: 8px;
}
.list-toolbar,
.filter-bar,
.filters,
.list-panel-toolbar,
.table-toolbar {
align-items: stretch;
}
.list-toolbar > *,
.filter-bar > *,
.filters > *,
.list-panel-toolbar > *,
.table-toolbar > * {
max-width: 100%;
}
.el-input,
.el-select,
.el-date-editor,
.el-button {
max-width: 100%;
}
.el-table {
font-size: 12px;
}
.pager,
.list-pager,
.table-pager,
.pagination-bar {
justify-content: center;
}
.el-pagination {
justify-content: center;
width: 100%;
white-space: normal;
}
}
</style>