From 9f577be6ff8beba9929755dd10e124e3711a1f45 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=96=AF=E7=8B=82=E7=9A=84=E7=8B=AE=E5=AD=90Li?= <15040126243@163.com> Date: Wed, 25 Mar 2026 12:06:46 +0800 Subject: [PATCH] =?UTF-8?q?update=20=E9=87=8D=E6=9E=84=20=E5=B0=86scss?= =?UTF-8?q?=E6=96=87=E4=BB=B6=E6=8B=86=E8=A7=A3=20=E6=8C=89=E5=85=B7?= =?UTF-8?q?=E4=BD=93=E5=8A=9F=E8=83=BD=E7=BB=86=E5=88=86=E6=96=87=E4=BB=B6?= =?UTF-8?q?=20=E4=BE=BF=E4=BA=8E=E5=90=8E=E7=BB=AD=E7=BB=B4=E6=8A=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/styles/base/_document.scss | 144 +++ src/assets/styles/components/_card-shell.scss | 110 ++ .../styles/components/_legacy-layout.scss | 54 + .../styles/components/_legacy-utilities.scss | 124 +++ src/assets/styles/components/_page-shell.scss | 81 ++ src/assets/styles/components/_query-form.scss | 89 ++ .../styles/components/_search-panel.scss | 115 +++ .../styles/components/_selector-dialog.scss | 74 ++ .../styles/components/_table-toolbar.scss | 84 ++ .../styles/components/_theme-helpers.scss | 75 ++ src/assets/styles/element-ui.scss | 956 ------------------ src/assets/styles/index.scss | 293 +----- src/assets/styles/layout/_surface.scss | 25 + .../styles/layout/sidebar/_collapsed.scss | 141 +++ src/assets/styles/layout/sidebar/_menu.scss | 111 ++ src/assets/styles/layout/sidebar/_popper.scss | 22 + .../styles/layout/sidebar/_responsive.scss | 31 + src/assets/styles/layout/sidebar/_shell.scss | 130 +++ src/assets/styles/ruoyi.scss | 623 ------------ src/assets/styles/sidebar.scss | 416 -------- src/assets/styles/tokens/_exports.scss | 21 + src/assets/styles/tokens/_sass-vars.scss | 42 + src/assets/styles/tokens/_theme-dark.scss | 194 ++++ src/assets/styles/tokens/_theme.scss | 57 ++ src/assets/styles/variables.module.scss | 318 +----- .../styles/vendors/element-plus/_base.scss | 65 ++ .../styles/vendors/element-plus/_dialog.scss | 111 ++ .../vendors/element-plus/_dropdown.scss | 63 ++ .../vendors/element-plus/_feedback.scss | 225 +++++ .../styles/vendors/element-plus/_form.scss | 63 ++ .../vendors/element-plus/_navigation.scss | 68 ++ .../styles/vendors/element-plus/_popper.scss | 247 +++++ .../vendors/element-plus/_primitives.scss | 45 + .../styles/vendors/element-plus/_shell.scss | 110 ++ src/components/RoleSelect/index.vue | 65 +- src/components/UserSelect/index.vue | 66 +- src/views/demo/demo/index.vue | 40 +- src/views/demo/tree/index.vue | 34 +- src/views/monitor/logininfo/index.vue | 20 +- src/views/monitor/online/index.vue | 14 +- src/views/monitor/operlog/index.vue | 20 +- src/views/system/config/index.vue | 20 +- src/views/system/dept/index.vue | 20 +- src/views/system/menu/index.vue | 20 +- src/views/system/notice/index.vue | 20 +- src/views/system/oss/config.vue | 20 +- src/views/system/oss/index.vue | 20 +- src/views/system/post/index.vue | 30 +- src/views/system/role/index.vue | 20 +- src/views/system/role/selectUser.vue | 11 +- src/views/system/user/index.vue | 30 +- src/views/tool/gen/index.vue | 20 +- 52 files changed, 2830 insertions(+), 2987 deletions(-) create mode 100644 src/assets/styles/base/_document.scss create mode 100644 src/assets/styles/components/_card-shell.scss create mode 100644 src/assets/styles/components/_legacy-layout.scss create mode 100644 src/assets/styles/components/_legacy-utilities.scss create mode 100644 src/assets/styles/components/_page-shell.scss create mode 100644 src/assets/styles/components/_query-form.scss create mode 100644 src/assets/styles/components/_search-panel.scss create mode 100644 src/assets/styles/components/_selector-dialog.scss create mode 100644 src/assets/styles/components/_table-toolbar.scss create mode 100644 src/assets/styles/components/_theme-helpers.scss delete mode 100644 src/assets/styles/element-ui.scss create mode 100644 src/assets/styles/layout/_surface.scss create mode 100644 src/assets/styles/layout/sidebar/_collapsed.scss create mode 100644 src/assets/styles/layout/sidebar/_menu.scss create mode 100644 src/assets/styles/layout/sidebar/_popper.scss create mode 100644 src/assets/styles/layout/sidebar/_responsive.scss create mode 100644 src/assets/styles/layout/sidebar/_shell.scss delete mode 100644 src/assets/styles/ruoyi.scss delete mode 100644 src/assets/styles/sidebar.scss create mode 100644 src/assets/styles/tokens/_exports.scss create mode 100644 src/assets/styles/tokens/_sass-vars.scss create mode 100644 src/assets/styles/tokens/_theme-dark.scss create mode 100644 src/assets/styles/tokens/_theme.scss create mode 100644 src/assets/styles/vendors/element-plus/_base.scss create mode 100644 src/assets/styles/vendors/element-plus/_dialog.scss create mode 100644 src/assets/styles/vendors/element-plus/_dropdown.scss create mode 100644 src/assets/styles/vendors/element-plus/_feedback.scss create mode 100644 src/assets/styles/vendors/element-plus/_form.scss create mode 100644 src/assets/styles/vendors/element-plus/_navigation.scss create mode 100644 src/assets/styles/vendors/element-plus/_popper.scss create mode 100644 src/assets/styles/vendors/element-plus/_primitives.scss create mode 100644 src/assets/styles/vendors/element-plus/_shell.scss diff --git a/src/assets/styles/base/_document.scss b/src/assets/styles/base/_document.scss new file mode 100644 index 0000000..654dc3f --- /dev/null +++ b/src/assets/styles/base/_document.scss @@ -0,0 +1,144 @@ +/* Global document styles and lightweight utility helpers. */ + +body { + height: 100%; + margin: 0; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + background: var(--app-shell-bg); + font-family: + 'MiSans', + 'HarmonyOS Sans SC', + 'PingFang SC', + 'Source Han Sans SC', + 'Noto Sans SC', + 'Hiragino Sans GB', + 'Microsoft YaHei', + sans-serif; +} + +label { + font-weight: 600; +} + +html { + height: 100%; + box-sizing: border-box; +} + +html.dark .svg-icon, +html.dark svg { + fill: var(--el-text-color-regular); +} + +#app { + height: 100%; +} + +html, +body, +#app { + min-height: 100%; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +.no-padding { + padding: 0px !important; +} + +.padding-content { + padding: 4px 0; +} + +a:focus, +a:active { + outline: none; +} + +a, +a:focus, +a:hover { + cursor: pointer; + color: inherit; + text-decoration: none; +} + +div:focus { + outline: none; +} + +.fr { + float: right; +} + +.fl { + float: left; +} + +.pr-5 { + padding-right: 5px; +} + +.pl-5 { + padding-left: 5px; +} + +.block { + display: block; +} + +.pointer { + cursor: pointer; +} + +.inlineBlock { + display: block; +} + +.clearfix { + &:after { + visibility: hidden; + display: block; + font-size: 0; + content: ' '; + clear: both; + height: 0; + } +} + +aside { + background: #eef1f6; + padding: 8px 24px; + margin-bottom: 20px; + border-radius: var(--app-radius-md); + display: block; + line-height: 32px; + font-size: 16px; + font-family: + 'MiSans', + 'HarmonyOS Sans SC', + 'PingFang SC', + 'Source Han Sans SC', + 'Noto Sans SC', + 'Hiragino Sans GB', + 'Microsoft YaHei', + sans-serif; + color: #2c3e50; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + + a { + color: #337ab7; + cursor: pointer; + + &:hover { + color: rgb(32, 160, 255); + } + } +} diff --git a/src/assets/styles/components/_card-shell.scss b/src/assets/styles/components/_card-shell.scss new file mode 100644 index 0000000..654f312 --- /dev/null +++ b/src/assets/styles/components/_card-shell.scss @@ -0,0 +1,110 @@ +/* Shared cards, panels, and content surfaces. */ + +.form-header { + font-size: 15px; + color: #6379bb; + border-bottom: 1px solid #ddd; + margin: 8px 10px 25px 10px; + padding-bottom: 5px; +} + +.pagination-container { + display: flex; + justify-content: flex-end; + margin-top: 18px; + padding: 10px 0 0 !important; +} + +.tree-border { + margin-top: 8px; + border: 1px solid rgba(148, 163, 184, 0.16); + background: rgba(255, 255, 255, 0.42) none; + border-radius: 22px; + width: 100%; + padding: 12px; +} + +@media (max-width: 768px) { + .pagination-container .el-pagination > .el-pagination__jump { + display: none !important; + } + + .pagination-container .el-pagination > .el-pagination__sizes { + display: none !important; + } +} + +.el-table .fixed-width .el-button--small { + padding-left: 0; + padding-right: 0; + width: inherit; +} + +.el-table .el-dropdown-link { + cursor: pointer; + color: #409eff; + margin-left: 10px; +} + +.el-table .el-dropdown, +.el-icon-arrow-down { + font-size: 12px; +} + +.el-tree-node__content > .el-checkbox { + margin-right: 8px; +} + +.list-group-striped > .list-group-item { + border-left: 0; + border-right: 0; + border-radius: 0; + padding-left: 0; + padding-right: 0; +} + +.list-group { + padding-left: 0px; + list-style: none; +} + +.list-group-item { + border-bottom: 1px solid #e7eaec; + border-top: 1px solid #e7eaec; + margin-bottom: -1px; + padding: 11px 0px; + font-size: 13px; +} + +.pull-right { + float: right !important; +} + +.el-card__header { + padding: 14px 16px 10px !important; + min-height: auto; + background: transparent; + border-bottom: 1px solid rgba(148, 163, 184, 0.14); +} + +.el-card__body { + padding: 16px !important; +} + +.el-card { + border-radius: var(--app-radius-lg); + box-shadow: var(--app-shadow-sm); + border-color: var(--app-surface-border); + overflow: hidden; + transition: box-shadow 0.2s ease, border-color 0.2s ease; + background: var(--app-surface-bg); +} + +.el-card:hover { + box-shadow: var(--app-shadow-md); + border-color: rgba(64, 158, 255, 0.16); +} + +.card-box { + margin-bottom: 10px; +} diff --git a/src/assets/styles/components/_legacy-layout.scss b/src/assets/styles/components/_legacy-layout.scss new file mode 100644 index 0000000..3c09c41 --- /dev/null +++ b/src/assets/styles/components/_legacy-layout.scss @@ -0,0 +1,54 @@ +/* Legacy shared layout helpers that were previously kept in index.scss. */ + +.components-container { + margin: 30px 50px; + position: relative; +} + +.text-center { + text-align: center; +} + +.sub-navbar { + height: 50px; + line-height: 50px; + position: relative; + width: 100%; + text-align: right; + padding-right: 20px; + transition: 600ms ease position; + background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%); + + .subtitle { + font-size: 20px; + color: #fff; + } + + &.draft { + background: #d0d0d0; + } + + &.deleted { + background: #d0d0d0; + } +} + +.link-type, +.link-type:focus { + color: #337ab7; + cursor: pointer; + + &:hover { + color: rgb(32, 160, 255); + } +} + +.filter-container { + padding-bottom: 10px; + + .filter-item { + display: inline-block; + vertical-align: middle; + margin-bottom: 10px; + } +} diff --git a/src/assets/styles/components/_legacy-utilities.scss b/src/assets/styles/components/_legacy-utilities.scss new file mode 100644 index 0000000..3575154 --- /dev/null +++ b/src/assets/styles/components/_legacy-utilities.scss @@ -0,0 +1,124 @@ +/* Legacy shared utility classes that are still used across pages. */ + +@use '../variables.module.scss' as *; + +.pt5 { + padding-top: 5px; +} + +.pr5 { + padding-right: 5px; +} + +.pb5 { + padding-bottom: 5px; +} + +.mt5 { + margin-top: 5px; +} + +.mr5 { + margin-right: 5px; +} + +.mb5 { + margin-bottom: 5px; +} + +.mb8 { + margin-bottom: 8px; +} + +.ml5 { + margin-left: 5px; +} + +.mt10 { + margin-top: 10px; +} + +.mr10 { + margin-right: 10px; +} + +.mb10 { + margin-bottom: 10px; +} + +.ml10 { + margin-left: 10px; +} + +.mt20 { + margin-top: 20px; +} + +.mr20 { + margin-right: 20px; +} + +.mb20 { + margin-bottom: 20px; +} + +.ml20 { + margin-left: 20px; +} + +.h1, +.h2, +.h3, +.h4, +.h5, +.h6, +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: inherit; + font-weight: 500; + line-height: 1.1; + color: inherit; +} + +.el-form .el-form-item__label { + font-weight: 600; +} + +.el-dialog:not(.is-fullscreen) { + margin-top: 6vh !important; +} + +.el-dialog.scrollbar .el-dialog__body { + overflow: auto; + overflow-x: hidden; + max-height: 70vh; + padding: 14px 22px 4px; +} + +.el-table { + .el-table__header-wrapper, + .el-table__fixed-header-wrapper { + th { + word-break: break-word; + background-color: $table-header-bg !important; + color: $table-header-text-color; + height: 40px !important; + font-size: 13px; + } + } + + .el-table__body-wrapper { + .el-button [class*='el-icon-'] + span { + margin-left: 1px; + } + } +} + +.el-menu--horizontal .el-menu-item .svg-icon + span, +.el-menu--horizontal .el-sub-menu__title .svg-icon + span { + margin-left: 3px; +} diff --git a/src/assets/styles/components/_page-shell.scss b/src/assets/styles/components/_page-shell.scss new file mode 100644 index 0000000..8b6d284 --- /dev/null +++ b/src/assets/styles/components/_page-shell.scss @@ -0,0 +1,81 @@ +/* Shared vertical page shell spacing helpers. */ + +.p-2 { + display: flex; + flex-direction: column; + gap: 12px; +} + +.page-shell { + display: flex; + flex-direction: column; + gap: 12px; +} + +.app-main > .page-shell, +.app-main > .page-shell.p-2 { + padding: 0 !important; + margin: 0 !important; +} + +.p-2 > .el-row, +.p-2 > .el-card, +.p-2 > .search-wrap, +.p-2 > div, +.p-2 > section { + margin-bottom: 0 !important; +} + +.page-shell > .el-row, +.page-shell > .el-card, +.page-shell > .search-wrap, +.page-shell > div, +.page-shell > section { + margin-bottom: 0 !important; +} + +/* Scoped mixins for CRUD pages so view-level styles stay focused on page-specific rules. */ + +@mixin action-link-buttons($background: rgba(53, 109, 255, 0.08)) { + .data-table { + :deep(.el-button.is-link) { + width: 32px; + height: 32px; + border-radius: 10px; + background: $background; + } + } +} + +@mixin toolbar-responsive($mobile-breakpoint: 900px) { + @media (max-width: $mobile-breakpoint) { + .toolbar-shell { + align-items: flex-start; + } + } +} + +@mixin content-stack($gap: 12px) { + .content-main { + display: flex; + flex-direction: column; + gap: $gap; + } +} + +@mixin dept-tree-panel($padding-top: 6px) { + .dept-tree { + padding-top: $padding-top; + } +} + +@mixin table-crud-page($mobile-breakpoint: 900px, $background: rgba(53, 109, 255, 0.08)) { + @include action-link-buttons($background); + @include toolbar-responsive($mobile-breakpoint); +} + +@mixin tree-table-crud-page($mobile-breakpoint: 900px, $gap: 12px, $tree-padding-top: 6px, $background: rgba(53, 109, 255, 0.08)) { + @include content-stack($gap); + @include dept-tree-panel($tree-padding-top); + @include table-crud-page($mobile-breakpoint, $background); +} diff --git a/src/assets/styles/components/_query-form.scss b/src/assets/styles/components/_query-form.scss new file mode 100644 index 0000000..d027bda --- /dev/null +++ b/src/assets/styles/components/_query-form.scss @@ -0,0 +1,89 @@ +/* Shared search and filter form layout. */ + +.query-form { + display: flex; + flex-wrap: wrap; + gap: 10px 14px; + align-items: end; +} + +.query-form .el-form-item { + flex: 0 0 auto; + margin-bottom: 0; + margin-right: 0; + display: flex; + align-items: flex-end; + min-width: 0; +} + +.query-form .el-form-item__content { + min-width: 0; +} + +.query-form .el-form-item:last-child { + margin-left: auto; + align-self: end; +} + +.query-form .el-form-item:last-child .el-form-item__content { + display: inline-flex; + align-items: center; + justify-content: flex-end; + gap: 6px; + flex-wrap: nowrap; +} + +.query-form .el-form-item:last-child .el-button { + margin-left: 0 !important; + flex-shrink: 0; +} + +.query-form .el-form-item:last-child .el-button + .el-button { + margin-left: 0 !important; +} + +.query-form .el-input__wrapper, +.query-form .el-select__wrapper, +.query-form .el-textarea__inner, +.query-form .el-date-editor, +.query-form .el-range-editor, +.query-form .el-cascader .el-input__wrapper, +.query-form .el-input-number, +.query-form .el-input-number__decrease, +.query-form .el-input-number__increase { + border-radius: 12px !important; +} + +.query-form .el-button { + border-radius: 10px !important; +} + +@media (max-width: 900px) { + .query-form { + gap: 10px 12px; + } +} + +@media (max-width: 640px) { + .query-form { + display: flex; + flex-direction: column; + align-items: stretch; + } + + .query-form .el-form-item { + width: 100%; + } + + .query-form .el-input, + .query-form .el-select, + .query-form .el-date-editor, + .query-form .el-cascader, + .query-form .el-input-number { + width: 100% !important; + } + + .query-form .el-form-item:last-child { + margin-left: 0; + } +} diff --git a/src/assets/styles/components/_search-panel.scss b/src/assets/styles/components/_search-panel.scss new file mode 100644 index 0000000..544faae --- /dev/null +++ b/src/assets/styles/components/_search-panel.scss @@ -0,0 +1,115 @@ +/* Search panel, table actions, and responsive panel shells. */ + +.data-table .el-button.is-link { + width: 28px !important; + height: 28px !important; + min-width: 28px !important; + padding: 0 !important; + border-radius: 10px !important; + background: rgba(53, 109, 255, 0.08) !important; +} + +.data-table .el-button.is-link + .el-button.is-link { + margin-left: 4px !important; +} + +.search-wrap { + margin-bottom: 0 !important; +} + +.el-card.search-panel, +.el-card.side-panel { + border-radius: 16px !important; + overflow: hidden; +} + +.el-card.table-panel { + border-radius: 14px !important; + overflow: hidden; +} + +.el-card.search-panel .el-card__header, +.el-card.side-panel .el-card__header { + border-top-left-radius: 16px; + border-top-right-radius: 16px; +} + +.el-card.table-panel .el-card__header { + border-top-left-radius: 14px; + border-top-right-radius: 14px; +} + +.el-card.search-panel .el-card__body, +.el-card.side-panel .el-card__body { + border-bottom-left-radius: 16px; + border-bottom-right-radius: 16px; +} + +.el-card.table-panel .el-card__body { + border-bottom-left-radius: 14px; + border-bottom-right-radius: 14px; +} + +.search-panel { + .el-card__header { + display: block; + padding: 12px 16px !important; + } + + .el-card__body { + padding-top: 16px !important; + overflow: hidden; + max-height: 560px; + opacity: 1; + transition: + max-height 0.32s cubic-bezier(0.22, 1, 0.36, 1), + opacity 0.24s ease, + padding-top 0.24s ease, + padding-bottom 0.24s ease; + } +} + +.search-panel.is-collapsed { + .el-card__body { + max-height: 0; + opacity: 0; + padding-top: 0 !important; + padding-bottom: 0 !important; + pointer-events: none; + } +} + +.search-panel-toggle { + cursor: pointer; + user-select: none; + transition: color 0.24s ease; + + &:hover { + color: var(--app-accent-strong); + } + + &::after { + content: ''; + margin-left: auto; + width: 9px; + height: 9px; + border-right: 2px solid currentColor; + border-bottom: 2px solid currentColor; + color: var(--app-text-muted); + transform: rotate(-135deg); + transition: + transform 0.24s ease, + color 0.24s ease; + } +} + +.search-panel.is-collapsed .search-panel-toggle::after { + transform: rotate(45deg); +} + +:global(html.dark) { + .tree-border { + background: rgba(15, 23, 42, 0.42); + border-color: rgba(100, 116, 139, 0.22); + } +} diff --git a/src/assets/styles/components/_selector-dialog.scss b/src/assets/styles/components/_selector-dialog.scss new file mode 100644 index 0000000..2e93bfc --- /dev/null +++ b/src/assets/styles/components/_selector-dialog.scss @@ -0,0 +1,74 @@ +/* Reusable scoped mixins for selector dialogs backed by cards and vxe tables. */ + +@mixin shell-gap($selectors...) { + @each $selector in $selectors { + #{$selector} { + gap: 12px; + } + } +} + +@mixin card-shell { + .selector-card { + height: 100%; + } +} + +@mixin dialog-body-padding($dialog-class) { + .#{$dialog-class} :deep(.el-dialog__body) { + padding-top: 12px; + } +} + +@mixin selector-header-tags($mobile-breakpoint: 768px) { + .selector-header { + align-items: flex-start; + } + + .selector-tags { + display: flex; + flex-wrap: wrap; + justify-content: flex-end; + gap: 6px; + max-width: min(100%, 520px); + } + + .selector-tags :deep(.el-tag) { + margin: 0; + } + + @media (max-width: $mobile-breakpoint) { + .selector-tags { + justify-content: flex-start; + max-width: 100%; + } + } +} + +@mixin selector-table { + .selector-table { + border-radius: 10px; + overflow: hidden; + } + + .selector-table :deep(.vxe-table--render-default) { + border-radius: 10px; + color: var(--app-text-title); + } + + .selector-table :deep(.vxe-header--column) { + background: var(--tableHeaderBg); + color: var(--tableHeaderTextColor); + font-weight: 600; + } + + .selector-table :deep(.vxe-body--column), + .selector-table :deep(.vxe-header--column) { + border-color: var(--app-surface-border); + } + + .selector-table :deep(.vxe-body--row.row--hover), + .selector-table :deep(.vxe-body--row:hover) { + background-color: rgba(53, 109, 255, 0.05); + } +} diff --git a/src/assets/styles/components/_table-toolbar.scss b/src/assets/styles/components/_table-toolbar.scss new file mode 100644 index 0000000..a99e5e2 --- /dev/null +++ b/src/assets/styles/components/_table-toolbar.scss @@ -0,0 +1,84 @@ +/* Table headers and toolbar action layouts. */ + +.top-right-btn { + margin-left: auto; +} + +.panel-heading { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; +} + +.panel-heading h3, +.table-heading h3 { + margin: 0; + font-size: 15px; + letter-spacing: 0; + color: var(--app-text-title); +} + +.panel-kicker { + display: none; + color: var(--app-accent-strong); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.04em; + text-transform: uppercase; +} + +.toolbar-shell { + display: flex; + align-items: center; + justify-content: space-between; + gap: 10px; + flex-wrap: wrap; +} + +.table-heading p { + margin: 4px 0 0; + font-size: 13px; + color: var(--app-text-muted); + line-height: 1.5; +} + +.toolbar-actions { + display: flex; + align-items: center; + flex-wrap: nowrap; + gap: 8px; + margin-left: auto; + white-space: nowrap; + overflow-x: auto; + overflow-y: hidden; + padding-bottom: 2px; +} + +.toolbar-actions::-webkit-scrollbar { + height: 0; +} + +.toolbar-actions > * { + flex-shrink: 0; +} + +.toolbar-actions .top-right-btn { + margin-left: 0; + flex-shrink: 0; +} + +.toolbar-actions .el-button + .el-button, +.toolbar-actions .el-dropdown + .el-button, +.toolbar-actions .el-button + .el-dropdown, +.toolbar-actions .el-dropdown + .el-dropdown, +.toolbar-actions .top-right-btn + .el-button, +.toolbar-actions .el-button + .top-right-btn, +.toolbar-actions .top-right-btn + .el-dropdown, +.toolbar-actions .el-dropdown + .top-right-btn { + margin-left: 0 !important; +} + +.table-panel .toolbar-actions .el-button:not(.is-circle):not(.is-link) { + border-radius: 10px !important; +} diff --git a/src/assets/styles/components/_theme-helpers.scss b/src/assets/styles/components/_theme-helpers.scss new file mode 100644 index 0000000..db46553 --- /dev/null +++ b/src/assets/styles/components/_theme-helpers.scss @@ -0,0 +1,75 @@ +/* Legacy theme helper classes and color accents. */ + +.el-button--cyan.is-active, +.el-button--cyan:active { + background: #20b2aa; + border-color: #20b2aa; + color: #ffffff; +} + +.el-button--cyan:focus, +.el-button--cyan:hover { + background: #48d1cc; + border-color: #48d1cc; + color: #ffffff; +} + +.el-button--cyan { + background-color: #20b2aa; + border-color: #20b2aa; + color: #ffffff; +} + +.text-navy { + color: #1ab394; +} + +.text-primary { + color: inherit; +} + +.text-success { + color: #1c84c6; +} + +.text-info { + color: #23c6c8; +} + +.text-warning { + color: #f8ac59; +} + +.text-danger { + color: #ed5565; +} + +.text-muted { + color: #888888; +} + +.img-circle { + border-radius: 50%; +} + +.img-lg { + width: 120px; + height: 120px; +} + +.avatar-upload-preview { + position: absolute; + top: 50%; + transform: translate(50%, -50%); + width: 200px; + height: 200px; + border-radius: 50%; + box-shadow: 0 0 4px #ccc; + overflow: hidden; +} + +.sortable-ghost { + opacity: 0.8; + color: #fff !important; + background: #42b983 !important; +} diff --git a/src/assets/styles/element-ui.scss b/src/assets/styles/element-ui.scss deleted file mode 100644 index 2824646..0000000 --- a/src/assets/styles/element-ui.scss +++ /dev/null @@ -1,956 +0,0 @@ -.el-collapse { - .collapse__title { - font-weight: 600; - padding: 0 8px; - font-size: 1.2em; - line-height: 1.1em; - } - .el-collapse-item__content { - padding: 0 8px; - } -} - -.el-divider--horizontal { - margin-bottom: 10px; - margin-top: 10px; -} - -.el-breadcrumb__inner, -.el-breadcrumb__inner a { - font-weight: 400 !important; -} - -.el-upload { - input[type='file'] { - display: none !important; - } -} - -.el-upload__input { - display: none; -} - -.cell { - .el-tag { - margin-right: 0px; - } -} - -.small-padding { - .cell { - padding-left: 5px; - padding-right: 5px; - } -} - -.fixed-width { - .el-button--mini { - padding: 7px 10px; - width: 60px; - } -} - -.status-col { - .cell { - padding: 0 10px; - text-align: center; - - .el-tag { - margin-right: 0px; - } - } -} - -/*-------------Dialog-------------**/ -.el-overlay { - overflow: hidden; - background: var(--app-overlay-mask); - backdrop-filter: blur(10px); - - .el-overlay-dialog { - display: flex; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; - padding: 20px; - - .el-dialog { - margin: 0 auto !important; - border-radius: var(--app-radius-lg); - box-shadow: var(--app-shadow-md); - overflow: hidden; - border: 1px solid var(--app-surface-border); - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)) padding-box, - var(--app-surface-bg); - - .el-dialog__header { - padding: 18px 20px 14px; - box-sizing: border-box; - border-bottom: 1px solid rgba(148, 163, 184, 0.14); - margin-right: 0; - background: var(--app-elevated-soft-bg); - } - - .el-dialog__title { - font-size: 16px; - font-weight: 600; - line-height: 1.3; - color: var(--app-text-title); - letter-spacing: 0; - } - - .el-dialog__headerbtn { - top: 15px; - right: 16px; - width: 32px; - height: 32px; - border-radius: 10px; - background: var(--app-elevated-close-bg); - transition: - background-color 0.2s ease, - transform 0.2s ease, - color 0.2s ease; - - .el-dialog__close { - color: var(--app-text-muted); - font-size: 16px; - } - - &:hover { - background: var(--app-elevated-close-hover-bg); - transform: translateY(-1px); - - .el-dialog__close { - color: var(--app-accent-strong); - } - } - } - - .el-dialog__body { - padding: 18px 20px 12px !important; - } - - .el-dialog__footer { - display: flex; - align-items: center; - justify-content: flex-end; - gap: 8px; - padding: 14px 20px 20px; - border-top: 1px solid rgba(148, 163, 184, 0.14); - } - } - } -} - -.el-dialog__body { - max-height: calc(90vh - 111px) !important; - overflow-y: auto; - overflow-x: hidden; -} - -.el-dialog__footer .el-button { - margin-left: 0 !important; -} - -.el-dialog__footer .dialog-footer { - display: flex; - width: 100%; - justify-content: flex-end; - gap: 12px; -} - -// refine element ui upload -.upload-container { - .el-upload { - width: 100%; - - .el-upload-dragger { - width: 100%; - height: 200px; - } - } -} - -// dropdown -.el-dropdown-menu { - padding: 8px; - border-radius: 14px; - border: 1px solid var(--app-surface-border); - background: var(--app-surface-bg); - box-shadow: var(--app-shadow-md); - - .el-dropdown-menu__item { - min-height: 36px; - margin: 2px 0; - border-radius: 10px; - color: var(--app-text-title); - transition: - background-color 0.2s ease, - color 0.2s ease; - - &:hover, - &:focus { - background: var(--app-accent-soft); - color: var(--app-accent-strong); - } - } - - .el-dropdown-menu__item.is-disabled { - opacity: 0.5; - } - - .el-dropdown-menu__item--divided { - margin-top: 8px; - position: relative; - border-top: none; - - &::before { - left: 2px; - right: 2px; - top: -6px; - width: auto; - background: rgba(148, 163, 184, 0.14); - } - } - - a { - display: block; - } -} - -// fix date-picker ui bug in filter-item -.el-range-editor.el-input__inner { - display: inline-flex !important; -} - -// to fix el-date-picker css style -.el-range-separator { - box-sizing: content-box; -} - -.el-menu--collapse > div > .el-sub-menu > .el-sub-menu__title .el-sub-menu__icon-arrow { - display: none; -} - -.el-dropdown .el-dropdown-link { - color: var(--el-color-primary) !important; -} - -/* 当 el-form 的 inline 属性为 true 时 */ -/* 设置 label 的宽度默认为 68px */ -.el-form--inline .el-form-item__label { - width: 68px; -} - -/* 设置 el-select 的宽度默认为 240px */ -.el-form--inline .el-select { - width: 240px; -} - -/* 设置 el-input 的宽度默认为 240px */ -.el-form--inline .el-input { - width: 240px; -} - -.el-form--inline .el-date-editor { - width: 308px; -} - -/* 设置 el-message-box 消息弹框内容强制换行 */ -.el-message-box .el-message-box__message { - word-break: break-word; -} - -.el-message-box { - width: min(440px, calc(100vw - 32px)); - padding: 0; - overflow: hidden; - border: 1px solid var(--app-surface-border); - background: var(--app-surface-bg); - border-radius: 20px; - box-shadow: var(--app-shadow-md); - - .el-message-box__header { - padding: 18px 20px 0; - } - - .el-message-box__title { - font-size: 17px; - font-weight: 600; - color: var(--app-text-title); - } - - .el-message-box__headerbtn { - top: 14px; - right: 16px; - width: 32px; - height: 32px; - border-radius: 10px; - background: var(--app-elevated-close-bg); - transition: - background-color 0.2s ease, - transform 0.2s ease; - - .el-message-box__close { - color: var(--app-text-muted); - font-size: 16px; - } - - &:hover { - background: var(--app-elevated-close-hover-bg); - transform: translateY(-1px); - - .el-message-box__close { - color: var(--app-accent-strong); - } - } - } - - .el-message-box__content { - padding: 16px 20px 18px; - } - - .el-message-box__container { - align-items: flex-start; - gap: 12px; - } - - .el-message-box__status { - position: static; - margin-top: 1px; - width: 30px; - height: 30px; - border-radius: 10px; - display: inline-flex; - align-items: center; - justify-content: center; - font-size: 18px !important; - background: var(--app-elevated-soft-bg); - } - - .el-message-box__message { - color: var(--app-text-title); - font-size: 14px; - line-height: 1.7; - } - - .el-message-box__btns { - display: flex; - justify-content: flex-end; - gap: 8px; - padding: 16px 20px 20px; - border-top: 1px solid rgba(148, 163, 184, 0.14); - } - - .el-message-box__btns .el-button { - margin-left: 0; - min-width: 88px; - } - - .el-message-box__input { - padding-top: 2px; - } -} - -.el-message, -.el-notification, -.el-alert { - border-radius: var(--app-radius-md); - box-shadow: var(--app-shadow-sm); -} - -.el-message { - min-width: 320px; - padding: 12px 14px; - border: 1px solid var(--app-surface-border); - background: var(--app-surface-bg); - gap: 10px; - align-items: center; - - .el-message__icon { - font-size: 18px; - } - - .el-message__content { - font-size: 14px; - font-weight: 500; - line-height: 1.5; - color: var(--app-text-title); - } - - .el-message__closeBtn { - color: var(--app-text-muted); - transition: color 0.2s ease; - - &:hover { - color: var(--app-accent-strong); - } - } -} - -.el-message--success { - border-color: var(--el-color-success-light-7); - background: var(--el-color-success-light-9); -} - -.el-message--warning { - border-color: var(--el-color-warning-light-7); - background: var(--el-color-warning-light-9); -} - -.el-message--error { - border-color: var(--el-color-danger-light-7); - background: var(--el-color-danger-light-9); -} - -.el-message--info { - border-color: var(--el-color-primary-light-7); - background: var(--el-color-primary-light-9); -} - -.el-notification { - width: 340px; - padding: 16px 18px 16px 16px; - border: 1px solid var(--app-surface-border); - background: var(--app-surface-bg); - - .el-notification__group { - margin-left: 8px; - } - - .el-notification__title { - font-size: 15px; - font-weight: 600; - color: var(--app-text-title); - } - - .el-notification__content { - margin-top: 6px; - font-size: 13px; - line-height: 1.65; - color: var(--app-text-muted); - } - - .el-notification__closeBtn { - top: 18px; - color: var(--app-text-muted); - transition: color 0.2s ease; - - &:hover { - color: var(--app-accent-strong); - } - } -} - -.el-notification.right, -.el-notification.left { - margin-top: 12px; -} - -.el-notification--success { - border-color: var(--el-color-success-light-7); -} - -.el-notification--warning { - border-color: var(--el-color-warning-light-7); -} - -.el-notification--error { - border-color: var(--el-color-danger-light-7); -} - -.el-notification--info { - border-color: var(--el-color-primary-light-7); -} - -.el-select__popper.el-popper, -.el-picker__popper.el-popper, -.el-autocomplete__popper.el-popper, -.el-cascader__dropdown, -.el-dropdown__popper.el-popper, -.el-popover.el-popper { - border: 1px solid var(--app-surface-border); - background: var(--app-surface-bg); - box-shadow: var(--app-shadow-md); -} - -.el-select__popper.el-popper, -.el-autocomplete__popper.el-popper, -.el-cascader__dropdown, -.el-dropdown__popper.el-popper, -.el-popover.el-popper { - padding: 8px; -} - -.el-select-dropdown__list, -.el-autocomplete-suggestion__list, -.el-cascader-menu { - padding: 0; -} - -.el-select-dropdown__item, -.el-autocomplete-suggestion li, -.el-cascader-node { - min-height: 38px; - margin: 2px 0; - border-radius: 10px; - color: var(--app-text-title); - line-height: 38px; - transition: - background-color 0.2s ease, - color 0.2s ease; -} - -.el-select-dropdown__item.hover, -.el-select-dropdown__item:hover, -.el-autocomplete-suggestion li:hover, -.el-cascader-node:not(.is-disabled):hover, -.el-cascader-node.in-active-path { - background: var(--app-accent-soft); - color: var(--app-accent-strong); -} - -.el-select-dropdown__item.is-selected, -.el-autocomplete-suggestion li.highlighted { - background: rgba(64, 158, 255, 0.12); - color: var(--app-accent-strong); - font-weight: 600; -} - -.el-select-dropdown__item.is-disabled, -.el-cascader-node.is-disabled { - opacity: 0.5; -} - -.el-tree-select__popper .el-tree-node__content { - display: flex; - align-items: center; -} - -.el-tree-select__popper .el-select-dropdown__item { - display: flex; - align-items: center; - flex: 1; - min-height: 20px; - height: 20px; - line-height: 20px; - margin: 0; - padding-left: 0; - background: transparent !important; -} - -.el-tree-select__popper .el-tree-node__expand-icon { - display: inline-flex; - align-items: center; - justify-content: center; - align-self: center; -} - -.el-autocomplete-suggestion li { - display: flex; - align-items: center; - padding: 0 12px; -} - -.el-autocomplete-suggestion li div { - width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.el-cascader-menu { - min-width: 180px; - border-right-color: rgba(148, 163, 184, 0.12); -} - -.el-cascader-node__prefix, -.el-cascader-node__postfix { - color: var(--app-text-muted); -} - -.el-popper.is-dark { - border-color: rgba(15, 23, 42, 0.72); - background: rgba(15, 23, 42, 0.92); - color: #f8fafc; -} - -.el-popper.is-dark .el-popper__arrow::before { - background: rgba(15, 23, 42, 0.92); - border-color: rgba(15, 23, 42, 0.72); -} - -.el-popper.is-light { - border-color: var(--app-surface-border); - background: var(--app-surface-bg); -} - -.el-popper.is-light .el-popper__arrow::before { - background: var(--app-surface-bg); - border-color: var(--app-surface-border); -} - -.el-picker__popper.el-popper { - padding: 12px; -} - -.el-date-picker, -.el-date-range-picker, -.el-time-panel, -.el-time-range-picker, -.el-picker-panel { - background: transparent; - color: var(--app-text-title); -} - -.el-picker-panel__body-wrapper, -.el-date-range-picker__content { - background: transparent; -} - -.el-picker-panel__icon-btn, -.el-date-picker__header-label, -.el-date-range-picker__header-label { - color: var(--app-text-title); -} - -.el-date-table td, -.el-month-table td .cell, -.el-year-table td .cell { - border-radius: 10px; -} - -.el-date-table td.today .el-date-table-cell__text, -.el-month-table td.today .cell, -.el-year-table td.today .cell { - color: var(--app-accent-strong); - font-weight: 700; -} - -.el-date-table td.available:hover, -.el-month-table td .cell:hover, -.el-year-table td .cell:hover { - color: var(--app-accent-strong); - background: var(--app-accent-soft); -} - -.el-date-table td.current:not(.disabled) .el-date-table-cell__text, -.el-month-table td.current:not(.disabled) .cell, -.el-year-table td.current:not(.disabled) .cell { - background: var(--app-accent-strong); - color: #fff; -} - -.el-date-editor .el-range-separator { - color: var(--app-text-muted); -} - -.el-time-panel__content::before, -.el-time-panel__content::after { - border-color: rgba(148, 163, 184, 0.14); -} - -.el-scrollbar__thumb { - background: rgba(148, 163, 184, 0.42); -} - -.el-scrollbar__thumb:hover { - background: rgba(100, 116, 139, 0.56); -} - -// Modern rounded inputs -.el-input__wrapper, -.el-textarea__inner, -.el-select__wrapper, -.el-date-editor, -.el-range-editor, -.el-input-number, -.el-input-number__decrease, -.el-input-number__increase { - border-radius: var(--app-radius-md); - transition: box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; -} - -.el-input__wrapper.is-focus, -.el-textarea__inner:focus, -.el-select__wrapper.is-focus, -.el-date-editor.is-focus, -.el-range-editor.is-focus { - box-shadow: 0 0 0 2px var(--el-color-primary-light-8); -} - -// Buttons -.el-button { - border-radius: var(--app-radius-md); - transition: box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; -} - -.el-button:not(.is-text):not(.is-link):hover { - box-shadow: var(--app-shadow-sm); -} - -// Tags and badges -.el-tag { - border-radius: var(--app-radius-md); -} - -// Cards, popovers, drawers -.el-popover, -.el-tooltip__popper, -.el-popper { - border-radius: var(--app-radius-md); - box-shadow: var(--app-shadow-sm); -} - -.el-popover { - padding: 10px 12px; -} - -.el-tooltip__popper { - max-width: 320px; - padding: 8px 10px; - font-size: 12px; - line-height: 1.5; -} - -.el-popconfirm { - max-width: 320px; -} - -.el-popconfirm__main { - gap: 10px; - line-height: 1.6; - color: var(--app-text-title); -} - -.el-popconfirm__action { - display: flex; - justify-content: flex-end; - gap: 8px; - margin-top: 14px; -} - -.el-popconfirm__action .el-button { - margin-left: 0 !important; -} - -.el-drawer { - border-radius: var(--app-radius-lg); - box-shadow: var(--app-shadow-md); - border: 1px solid var(--app-surface-border); -} - -.el-drawer__header { - margin-bottom: 0; - padding: 18px 20px 16px; - border-bottom: 1px solid rgba(148, 163, 184, 0.14); - background: var(--app-elevated-soft-bg); - color: var(--app-text-title); -} - -.el-drawer__title { - font-size: 16px; - font-weight: 600; - color: var(--app-text-title); -} - -.el-drawer__body { - padding: 18px 20px 20px; -} - -.el-drawer__close-btn { - width: 32px; - height: 32px; - border-radius: 10px; - background: var(--app-elevated-close-bg); - color: var(--app-text-muted); - transition: - background-color 0.2s ease, - color 0.2s ease, - transform 0.2s ease; - - &:hover { - background: var(--app-elevated-close-hover-bg); - color: var(--app-accent-strong); - transform: translateY(-1px); - } -} - -.el-loading-mask { - background: rgba(248, 250, 252, 0.76); - backdrop-filter: blur(4px); -} - -.el-loading-spinner .path { - stroke: var(--app-accent-strong); -} - -.el-descriptions { - --el-descriptions-table-border: rgba(148, 163, 184, 0.14); -} - -.el-descriptions__body .el-descriptions__table { - border-radius: 12px; - overflow: hidden; -} - -.el-descriptions__label.el-descriptions__cell { - background: var(--app-elevated-soft-bg) !important; - color: var(--app-text-title); - font-weight: 600; -} - -.el-descriptions__content.el-descriptions__cell { - color: var(--app-text-title); -} - -.el-tree { - color: var(--app-text-title); - background: transparent; -} - -.el-tree-node__content { - min-height: 34px; - margin: 2px 0; - border-radius: 10px; - transition: - background-color 0.2s ease, - color 0.2s ease; -} - -.el-tree-node__content:hover, -.el-tree-node.is-current > .el-tree-node__content { - background: var(--app-accent-soft); -} - -.el-radio-button__inner, -.el-checkbox-button__inner { - border-radius: 10px !important; - box-shadow: none !important; -} - -.el-radio-button:first-child .el-radio-button__inner, -.el-checkbox-button:first-child .el-checkbox-button__inner, -.el-radio-button:last-child .el-radio-button__inner, -.el-checkbox-button:last-child .el-checkbox-button__inner { - border-radius: 10px !important; -} - -.el-empty__image { - opacity: 0.9; -} - -.el-empty__description p { - color: var(--app-text-muted); -} - -.el-color-dropdown { - border-radius: 16px; - border: 1px solid var(--app-surface-border); - box-shadow: var(--app-shadow-md); -} - -html.dark { - .el-message--success { - background: rgba(31, 138, 90, 0.18); - } - - .el-message--warning { - background: rgba(184, 121, 34, 0.18); - } - - .el-message--error { - background: rgba(178, 74, 74, 0.18); - } - - .el-message--info { - background: rgba(43, 107, 211, 0.18); - } - - .el-loading-mask { - background: rgba(6, 11, 22, 0.7); - } - - .el-popper.is-dark { - border-color: rgba(30, 41, 59, 0.92); - background: rgba(15, 23, 42, 0.96); - } - - .el-popper.is-dark .el-popper__arrow::before { - background: rgba(15, 23, 42, 0.96); - border-color: rgba(30, 41, 59, 0.92); - } -} - -// Table polish -.el-table { - border-radius: 10px; - overflow: hidden; - border: 1px solid var(--app-surface-border); -} - -.el-table__header-wrapper, -.el-table__body-wrapper { - background: transparent; -} - -.el-table__row:hover td.el-table__cell { - background-color: rgba(53, 109, 255, 0.05) !important; -} - -// Tabs -.el-tabs__header { - margin: 0 0 12px 0; -} - -.el-tabs__item { - border-radius: var(--app-radius-md); - margin: 0 2px; -} - -.el-tabs__nav-wrap::after { - background-color: var(--el-border-color-lighter); -} - -// Pagination -.el-pagination .btn-prev, -.el-pagination .btn-next, -.el-pagination .el-pager li { - border-radius: var(--app-radius-sm); - transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; -} - -.el-pagination { - gap: 6px; - flex-wrap: wrap; - color: var(--app-text-muted); -} - -.el-pagination .el-pagination__total, -.el-pagination .el-pagination__jump { - color: var(--app-text-muted); -} - -.el-pagination .btn-prev, -.el-pagination .btn-next, -.el-pagination .el-pager li, -.el-pagination .el-pagination__sizes .el-input__wrapper { - min-width: 32px; - height: 32px; - border: 1px solid rgba(148, 163, 184, 0.14); - background: var(--app-surface-bg); -} - -.el-pagination .el-pager li.is-active { - box-shadow: var(--app-shadow-sm); -} - -// Breadcrumb -.el-breadcrumb { - padding: 0; - background: transparent; - border: none; - border-radius: 0; -} diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index 605bfff..57ca6ab 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -1,275 +1,30 @@ @use './variables.module.scss' as *; @use './mixin.scss'; @use './transition.scss'; -@use './element-ui.scss'; -@use './sidebar.scss'; +@use './base/document'; +@use './layout/surface'; +@use './layout/sidebar/shell' as sidebar-shell; +@use './layout/sidebar/menu'; +@use './layout/sidebar/collapsed'; +@use './layout/sidebar/responsive'; +@use './layout/sidebar/popper' as sidebar-popper; +@use './components/legacy-layout'; +@use './components/legacy-utilities'; +@use './components/page-shell'; +@use './components/card-shell'; +@use './components/theme-helpers'; +@use './components/table-toolbar'; +@use './components/query-form'; +@use './components/search-panel'; +@use './vendors/element-plus/primitives'; +@use './vendors/element-plus/base'; +@use './vendors/element-plus/dialog'; +@use './vendors/element-plus/dropdown'; +@use './vendors/element-plus/form'; +@use './vendors/element-plus/feedback'; +@use './vendors/element-plus/popper' as element-popper; +@use './vendors/element-plus/shell' as element-shell; +@use './vendors/element-plus/navigation'; @use './btn.scss'; -@use './ruoyi.scss'; @use 'animate.css'; @use 'element-plus/dist/index.css'; - -body { - height: 100%; - margin: 0; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; - background: var(--app-shell-bg); - font-family: - 'MiSans', - 'HarmonyOS Sans SC', - 'PingFang SC', - 'Source Han Sans SC', - 'Noto Sans SC', - 'Hiragino Sans GB', - 'Microsoft YaHei', - sans-serif; -} - -label { - font-weight: 600; -} - -html { - height: 100%; - box-sizing: border-box; -} - -html.dark .svg-icon, -html.dark svg { - fill: var(--el-text-color-regular); -} - -#app { - height: 100%; -} - -html, -body, -#app { - min-height: 100%; -} - -*, -*:before, -*:after { - box-sizing: inherit; -} - -.no-padding { - padding: 0px !important; -} - -.padding-content { - padding: 4px 0; -} - -a:focus, -a:active { - outline: none; -} - -a, -a:focus, -a:hover { - cursor: pointer; - color: inherit; - text-decoration: none; -} - -div:focus { - outline: none; -} - -.fr { - float: right; -} - -.fl { - float: left; -} - -.pr-5 { - padding-right: 5px; -} - -.pl-5 { - padding-left: 5px; -} - -.block { - display: block; -} - -.pointer { - cursor: pointer; -} - -.inlineBlock { - display: block; -} - -.clearfix { - &:after { - visibility: hidden; - display: block; - font-size: 0; - content: ' '; - clear: both; - height: 0; - } -} - -aside { - background: #eef1f6; - padding: 8px 24px; - margin-bottom: 20px; - border-radius: var(--app-radius-md); - display: block; - line-height: 32px; - font-size: 16px; - font-family: - 'MiSans', - 'HarmonyOS Sans SC', - 'PingFang SC', - 'Source Han Sans SC', - 'Noto Sans SC', - 'Hiragino Sans GB', - 'Microsoft YaHei', - sans-serif; - color: #2c3e50; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - - a { - color: #337ab7; - cursor: pointer; - - &:hover { - color: rgb(32, 160, 255); - } - } -} - -//main-container全局样式 -.app-container { - padding: 16px; - background: var(--app-surface-bg); - border: 1px solid var(--app-surface-border); - border-radius: var(--app-radius-lg); - box-shadow: var(--app-shadow-sm); -} - -// search面板样式 -.panel, -.search { - margin-bottom: 0.75rem; - border-radius: var(--app-radius-lg); - border: 1px solid var(--app-surface-border); - background-color: var(--app-surface-bg); - padding: 0.75rem; - box-shadow: 0 0 0 rgba(0, 0, 0, 0); - transition: box-shadow 0.2s ease, border-color 0.2s ease; - - &:hover { - box-shadow: var(--app-shadow-sm); - border-color: rgba(64, 158, 255, 0.2); - } -} - -.el-card, -.el-dialog, -.el-drawer, -.el-popover.el-popper, -.el-dropdown__popper .el-dropdown-menu, -.el-picker__popper, -.el-select__popper.el-popper { - border-radius: var(--app-radius-lg); - border-color: var(--app-surface-border); - box-shadow: var(--app-shadow-md); -} - -.el-card, -.el-dialog, -.el-drawer { - background: var(--app-surface-bg); -} - -.el-button { - font-weight: 500; -} - -.el-button--primary { - --el-button-bg-color: var(--app-accent-strong); - --el-button-border-color: var(--app-accent-strong); - --el-button-hover-bg-color: #4a7cff; - --el-button-hover-border-color: #4a7cff; - --el-button-active-bg-color: #2e5ce0; - --el-button-active-border-color: #2e5ce0; -} - -.el-table { - --el-table-border-color: var(--app-surface-border); - --el-table-header-bg-color: var(--tableHeaderBg); - --el-table-tr-bg-color: transparent; - background: transparent; -} - -.el-input__wrapper, -.el-textarea__inner, -.el-select__wrapper { - box-shadow: 0 0 0 1px var(--el-border-color) inset; -} - -.components-container { - margin: 30px 50px; - position: relative; -} - -.text-center { - text-align: center; -} - -.sub-navbar { - height: 50px; - line-height: 50px; - position: relative; - width: 100%; - text-align: right; - padding-right: 20px; - transition: 600ms ease position; - background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%); - - .subtitle { - font-size: 20px; - color: #fff; - } - - &.draft { - background: #d0d0d0; - } - - &.deleted { - background: #d0d0d0; - } -} - -.link-type, -.link-type:focus { - color: #337ab7; - cursor: pointer; - - &:hover { - color: rgb(32, 160, 255); - } -} - -.filter-container { - padding-bottom: 10px; - - .filter-item { - display: inline-block; - vertical-align: middle; - margin-bottom: 10px; - } -} diff --git a/src/assets/styles/layout/_surface.scss b/src/assets/styles/layout/_surface.scss new file mode 100644 index 0000000..367ce2a --- /dev/null +++ b/src/assets/styles/layout/_surface.scss @@ -0,0 +1,25 @@ +/* Shared page shells that are not tied to a specific component library. */ + +.app-container { + padding: 16px; + background: var(--app-surface-bg); + border: 1px solid var(--app-surface-border); + border-radius: var(--app-radius-lg); + box-shadow: var(--app-shadow-sm); +} + +.panel, +.search { + margin-bottom: 0.75rem; + border-radius: var(--app-radius-lg); + border: 1px solid var(--app-surface-border); + background-color: var(--app-surface-bg); + padding: 0.75rem; + box-shadow: 0 0 0 rgba(0, 0, 0, 0); + transition: box-shadow 0.2s ease, border-color 0.2s ease; + + &:hover { + box-shadow: var(--app-shadow-sm); + border-color: rgba(64, 158, 255, 0.2); + } +} diff --git a/src/assets/styles/layout/sidebar/_collapsed.scss b/src/assets/styles/layout/sidebar/_collapsed.scss new file mode 100644 index 0000000..0034f33 --- /dev/null +++ b/src/assets/styles/layout/sidebar/_collapsed.scss @@ -0,0 +1,141 @@ +/* Collapsed desktop sidebar behavior and compact trigger states. */ + +#app { + .hideSidebar { + .sidebar-container { + width: 58px !important; + } + + .main-container { + margin-left: 70px; + } + + .sidebar-shell { + padding-left: 4px; + padding-right: 4px; + } + + .submenu-title-noDropdown { + padding: 0 !important; + position: relative; + height: 40px; + width: 40px !important; + min-width: 40px !important; + margin: 3px auto !important; + display: flex; + align-items: center; + justify-content: center !important; + box-sizing: border-box; + + &.is-active { + background-color: var(--side-menu-active-bg) !important; + color: var(--side-menu-active-text) !important; + box-shadow: inset 3px 0 0 var(--side-menu-active-line); + } + + .el-tooltip { + padding: 0 !important; + } + + .el-menu-tooltip__trigger { + width: 100%; + height: 100%; + display: inline-flex !important; + align-items: center; + justify-content: center; + line-height: 1; + } + + .svg-icon { + margin-right: 0 !important; + } + } + + & .el-sub-menu { + overflow: hidden; + border-radius: var(--app-radius-md); + + .el-sub-menu__title, + .el-sub-menu__title.el-tooltip__trigger { + border-radius: var(--app-radius-md); + height: 40px; + padding: 0 !important; + display: flex; + align-items: center; + justify-content: center !important; + line-height: 1; + } + + &.is-active .el-sub-menu__title, + &.is-active .el-sub-menu__title.el-tooltip__trigger { + background-color: var(--side-menu-active-bg) !important; + box-shadow: inset 3px 0 0 var(--side-menu-active-line); + } + + & > .el-sub-menu__title { + padding: 0 !important; + } + } + + .el-menu--collapse { + > div > .el-sub-menu { + width: 40px !important; + min-width: 40px !important; + margin: 3px auto !important; + } + + > div > .el-sub-menu > .el-sub-menu__title, + > div > .el-sub-menu > .el-sub-menu__title.el-tooltip__trigger { + width: 100% !important; + min-width: 100% !important; + margin: 0 !important; + box-sizing: border-box; + transform: none; + position: relative; + } + + .is-active .svg-icon { + fill: currentColor; + } + + > div > .el-sub-menu > .el-sub-menu__title .svg-icon { + position: absolute; + left: 50%; + top: 50%; + width: 16px; + height: 16px; + transform: translate(-50%, -50%); + display: block; + margin: 0 !important; + margin-right: 0 !important; + } + + > div > .el-sub-menu > .el-sub-menu__title { + justify-content: center !important; + + .el-sub-menu__icon-arrow { + display: none !important; + width: 0 !important; + margin: 0 !important; + overflow: hidden !important; + } + + & > span { + height: 0; + width: 0; + overflow: hidden; + visibility: hidden; + display: inline-block; + } + + & > i { + height: 0; + width: 0; + overflow: hidden; + visibility: hidden; + display: inline-block; + } + } + } + } +} diff --git a/src/assets/styles/layout/sidebar/_menu.scss b/src/assets/styles/layout/sidebar/_menu.scss new file mode 100644 index 0000000..e860fcf --- /dev/null +++ b/src/assets/styles/layout/sidebar/_menu.scss @@ -0,0 +1,111 @@ +/* Menu hover, active states, and nested item styling. */ + +@use '../../variables.module.scss' as *; + +#app { + .sidebar-container { + .theme-dark .submenu-title-noDropdown, + .theme-dark .el-sub-menu__title { + border-radius: var(--app-radius-md); + margin: 3px 8px; + + &:hover { + background-color: var(--side-menu-hover-bg) !important; + color: var(--side-menu-hover-text) !important; + } + } + + .submenu-title-noDropdown, + .el-sub-menu__title { + border-radius: var(--app-radius-md); + margin: 3px 8px; + color: var(--side-menu-text) !important; + + &:hover { + background-color: var(--side-menu-hover-bg) !important; + color: var(--side-menu-hover-text) !important; + } + } + + & .theme-dark .is-active > .el-sub-menu__title { + color: var(--side-menu-active-text) !important; + } + + & .nest-menu .el-sub-menu > .el-sub-menu__title, + & .el-sub-menu .el-menu-item { + min-width: calc($base-sidebar-width - 16px) !important; + border-radius: var(--app-radius-md); + height: 40px; + margin: 3px 8px; + background: transparent !important; + + &:not(.is-active):hover { + background-color: var(--side-menu-hover-bg) !important; + color: var(--side-menu-hover-text) !important; + } + } + + & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title, + & .theme-dark .el-sub-menu .el-menu-item { + border-radius: var(--app-radius-md); + height: 40px; + margin: 3px 8px; + background: transparent !important; + + &.is-active { + background: var(--side-menu-active-bg) !important; + color: var(--side-menu-active-text) !important; + box-shadow: + inset 3px 0 0 var(--side-menu-active-line), + inset 0 0 0 1px var(--side-menu-active-border); + } + + &:not(.is-active):hover { + background-color: var(--side-menu-hover-bg) !important; + color: var(--side-menu-hover-text) !important; + } + } + + & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title, + & .theme-dark .el-menu-item { + border-radius: var(--app-radius-md); + height: 40px; + margin: 3px 8px; + background: transparent !important; + + &.is-active { + background: var(--side-menu-active-bg) !important; + color: var(--side-menu-active-text) !important; + box-shadow: + inset 3px 0 0 var(--side-menu-active-line), + inset 0 0 0 1px var(--side-menu-active-border); + } + + &:not(.is-active):hover { + background-color: var(--side-menu-hover-bg) !important; + color: var(--side-menu-hover-text) !important; + } + } + + & .nest-menu .el-sub-menu > .el-sub-menu__title, + & .el-menu-item { + border-radius: var(--app-radius-md); + height: 40px; + margin: 3px 8px; + background: transparent !important; + + &.is-active { + background: var(--side-menu-active-bg) !important; + color: var(--side-menu-active-text) !important; + box-shadow: + inset 3px 0 0 var(--side-menu-active-line), + inset 0 0 0 1px var(--side-menu-active-border); + } + + &:not(.is-active):hover { + background-color: var(--side-menu-hover-bg) !important; + color: var(--side-menu-hover-text) !important; + } + } + } +} diff --git a/src/assets/styles/layout/sidebar/_popper.scss b/src/assets/styles/layout/sidebar/_popper.scss new file mode 100644 index 0000000..92477f0 --- /dev/null +++ b/src/assets/styles/layout/sidebar/_popper.scss @@ -0,0 +1,22 @@ +/* Collapsed navigation poppers and popup menu refinements. */ + +.el-menu--vertical { + & > .el-menu { + .svg-icon { + margin-right: 16px; + } + } +} + +.el-popper.is-pure { + border-radius: var(--app-radius-md); + box-shadow: var(--app-shadow-md); + + .el-menu--popup { + border-radius: var(--app-radius-md); + } + + .el-menu-item { + border-radius: var(--app-radius-sm); + } +} diff --git a/src/assets/styles/layout/sidebar/_responsive.scss b/src/assets/styles/layout/sidebar/_responsive.scss new file mode 100644 index 0000000..0d48152 --- /dev/null +++ b/src/assets/styles/layout/sidebar/_responsive.scss @@ -0,0 +1,31 @@ +/* Responsive sidebar behavior for mobile and transition disabling. */ + +@use '../../variables.module.scss' as *; + +#app { + .mobile { + .main-container { + margin-left: 0px; + } + + .sidebar-container { + transition: transform 0.28s; + width: $base-sidebar-width !important; + } + + &.hideSidebar { + .sidebar-container { + pointer-events: none; + transition-duration: 0.3s; + transform: translate3d(calc(-#{$base-sidebar-width} - 12px), 0, 0); + } + } + } + + .withoutAnimation { + .main-container, + .sidebar-container { + transition: none; + } + } +} diff --git a/src/assets/styles/layout/sidebar/_shell.scss b/src/assets/styles/layout/sidebar/_shell.scss new file mode 100644 index 0000000..1b2e495 --- /dev/null +++ b/src/assets/styles/layout/sidebar/_shell.scss @@ -0,0 +1,130 @@ +/* Sidebar shell, base sizing, and main container offsets. */ + +@use '../../variables.module.scss' as *; + +#app { + .main-container { + height: 100%; + transition: margin-left 0.28s; + margin-left: calc(#{$base-sidebar-width} + 12px); + position: relative; + background: transparent; + } + + .sidebarHide { + margin-left: 0 !important; + } + + .sidebar-container { + -webkit-transition: width 0.28s; + transition: width 0.28s; + width: $base-sidebar-width !important; + background: transparent; + height: calc(100vh - 24px); + position: fixed; + font-size: 0; + top: 12px; + left: 12px; + z-index: 1001; + overflow: hidden; + box-sizing: border-box; + padding: 0; + border-right: none; + -webkit-box-shadow: none; + box-shadow: none; + + .horizontal-collapse-transition { + transition: + 0s width ease-in-out, + 0s padding-left ease-in-out, + 0s padding-right ease-in-out; + } + + .scrollbar-wrapper { + overflow-x: hidden !important; + } + + .el-scrollbar__bar.is-vertical { + right: 0; + } + + .el-scrollbar { + height: 100%; + } + + .el-scrollbar.theme-light { + --side-menu-text: #1f2937; + --side-menu-hover-bg: rgba(64, 158, 255, 0.08); + --side-menu-hover-text: #111827; + --side-menu-active-bg: rgba(64, 158, 255, 0.12); + --side-menu-active-text: #409eff; + --side-menu-active-border: rgba(64, 158, 255, 0.16); + --side-menu-active-line: #409eff; + } + + .el-scrollbar.theme-dark { + --side-menu-text: #e5edf8; + --side-menu-hover-bg: rgba(255, 255, 255, 0.08); + --side-menu-hover-text: #ffffff; + --side-menu-active-bg: rgba(64, 158, 255, 0.22); + --side-menu-active-text: #ffffff; + --side-menu-active-border: rgba(96, 165, 250, 0.24); + --side-menu-active-line: #60a5fa; + } + + .is-horizontal { + display: none; + } + + a { + display: inline-block; + width: 100%; + overflow: hidden; + } + + .svg-icon { + margin-right: 10px; + } + + .el-menu { + border: none; + height: 100%; + width: 100% !important; + background: transparent !important; + } + + .el-menu--inline { + background: transparent !important; + } + + .el-menu-item, + .menu-title { + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + } + + .el-menu-item, + .el-sub-menu__title, + .el-menu-item .svg-icon, + .el-sub-menu__title .svg-icon, + .el-sub-menu__icon-arrow { + color: var(--side-menu-text) !important; + fill: currentColor; + } + + .el-menu-item, + .el-sub-menu__title { + position: relative; + font-weight: 500; + } + + .el-menu-item .el-menu-tooltip__trigger { + display: inline-block !important; + } + } + + .el-menu--collapse .el-menu .el-sub-menu { + min-width: $base-sidebar-width !important; + } +} diff --git a/src/assets/styles/ruoyi.scss b/src/assets/styles/ruoyi.scss deleted file mode 100644 index 060ce9e..0000000 --- a/src/assets/styles/ruoyi.scss +++ /dev/null @@ -1,623 +0,0 @@ -@use './variables.module.scss' as *; - -/** - * 通用css样式布局处理 - * Copyright (c) 2019 ruoyi - */ - -/** 基础通用 **/ -.pt5 { - padding-top: 5px; -} -.pr5 { - padding-right: 5px; -} -.pb5 { - padding-bottom: 5px; -} -.mt5 { - margin-top: 5px; -} -.mr5 { - margin-right: 5px; -} -.mb5 { - margin-bottom: 5px; -} -.mb8 { - margin-bottom: 8px; -} -.ml5 { - margin-left: 5px; -} -.mt10 { - margin-top: 10px; -} -.mr10 { - margin-right: 10px; -} -.mb10 { - margin-bottom: 10px; -} -.ml10 { - margin-left: 10px; -} -.mt20 { - margin-top: 20px; -} -.mr20 { - margin-right: 20px; -} -.mb20 { - margin-bottom: 20px; -} -.ml20 { - margin-left: 20px; -} - -.h1, -.h2, -.h3, -.h4, -.h5, -.h6, -h1, -h2, -h3, -h4, -h5, -h6 { - font-family: inherit; - font-weight: 500; - line-height: 1.1; - color: inherit; -} - -.el-form .el-form-item__label { - font-weight: 600; -} - -.p-2 { - display: flex; - flex-direction: column; - gap: 12px; -} - -.page-shell { - display: flex; - flex-direction: column; - gap: 12px; -} - -.app-main > .page-shell, -.app-main > .page-shell.p-2 { - padding: 0 !important; - margin: 0 !important; -} - -.p-2 > .el-row, -.p-2 > .el-card, -.p-2 > .search-wrap, -.p-2 > div, -.p-2 > section { - margin-bottom: 0 !important; -} - -.page-shell > .el-row, -.page-shell > .el-card, -.page-shell > .search-wrap, -.page-shell > div, -.page-shell > section { - margin-bottom: 0 !important; -} - -.el-dialog:not(.is-fullscreen) { - margin-top: 6vh !important; -} - -.el-dialog.scrollbar .el-dialog__body { - overflow: auto; - overflow-x: hidden; - max-height: 70vh; - padding: 14px 22px 4px; -} - -.el-table { - .el-table__header-wrapper, - .el-table__fixed-header-wrapper { - th { - word-break: break-word; - background-color: $table-header-bg !important; - color: $table-header-text-color; - height: 40px !important; - font-size: 13px; - } - } - .el-table__body-wrapper { - .el-button [class*='el-icon-'] + span { - margin-left: 1px; - } - } -} - -/** 表单布局 **/ -.form-header { - font-size: 15px; - color: #6379bb; - border-bottom: 1px solid #ddd; - margin: 8px 10px 25px 10px; - padding-bottom: 5px; -} - -/** 表格布局 **/ -.pagination-container { - display: flex; - justify-content: flex-end; - margin-top: 18px; - padding: 10px 0 0 !important; -} - -/* tree border */ -.tree-border { - margin-top: 8px; - border: 1px solid rgba(148, 163, 184, 0.16); - background: rgba(255, 255, 255, 0.42) none; - border-radius: 22px; - width: 100%; - padding: 12px; -} - -@media (max-width: 768px) { - .pagination-container .el-pagination > .el-pagination__jump { - display: none !important; - } - .pagination-container .el-pagination > .el-pagination__sizes { - display: none !important; - } -} - -.el-table .fixed-width .el-button--small { - padding-left: 0; - padding-right: 0; - width: inherit; -} - -/** 表格更多操作下拉样式 */ -.el-table .el-dropdown-link { - cursor: pointer; - color: #409eff; - margin-left: 10px; -} - -.el-table .el-dropdown, -.el-icon-arrow-down { - font-size: 12px; -} - -.el-tree-node__content > .el-checkbox { - margin-right: 8px; -} - -.list-group-striped > .list-group-item { - border-left: 0; - border-right: 0; - border-radius: 0; - padding-left: 0; - padding-right: 0; -} - -.list-group { - padding-left: 0px; - list-style: none; -} - -.list-group-item { - border-bottom: 1px solid #e7eaec; - border-top: 1px solid #e7eaec; - margin-bottom: -1px; - padding: 11px 0px; - font-size: 13px; -} - -.pull-right { - float: right !important; -} - -.el-card__header { - padding: 14px 16px 10px !important; - min-height: auto; - background: transparent; - border-bottom: 1px solid rgba(148, 163, 184, 0.14); -} - -.el-card__body { - padding: 16px !important; -} - -.el-card { - border-radius: var(--app-radius-lg); - box-shadow: var(--app-shadow-sm); - border-color: var(--app-surface-border); - overflow: hidden; - transition: box-shadow 0.2s ease, border-color 0.2s ease; - background: var(--app-surface-bg); -} - -.el-card:hover { - box-shadow: var(--app-shadow-md); - border-color: rgba(64, 158, 255, 0.16); -} - -.card-box { - margin-bottom: 10px; -} - -/* button color */ -.el-button--cyan.is-active, -.el-button--cyan:active { - background: #20b2aa; - border-color: #20b2aa; - color: #ffffff; -} - -.el-button--cyan:focus, -.el-button--cyan:hover { - background: #48d1cc; - border-color: #48d1cc; - color: #ffffff; -} - -.el-button--cyan { - background-color: #20b2aa; - border-color: #20b2aa; - color: #ffffff; -} - -/* text color */ -.text-navy { - color: #1ab394; -} - -.text-primary { - color: inherit; -} - -.text-success { - color: #1c84c6; -} - -.text-info { - color: #23c6c8; -} - -.text-warning { - color: #f8ac59; -} - -.text-danger { - color: #ed5565; -} - -.text-muted { - color: #888888; -} - -/* image */ -.img-circle { - border-radius: 50%; -} - -.img-lg { - width: 120px; - height: 120px; -} - -.avatar-upload-preview { - position: absolute; - top: 50%; - transform: translate(50%, -50%); - width: 200px; - height: 200px; - border-radius: 50%; - box-shadow: 0 0 4px #ccc; - overflow: hidden; -} - -/* 拖拽列样式 */ -.sortable-ghost { - opacity: 0.8; - color: #fff !important; - background: #42b983 !important; -} - -/* 表格右侧工具栏样式 */ -.top-right-btn { - margin-left: auto; -} - -.panel-heading { - display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; -} - -.panel-heading h3, -.table-heading h3 { - margin: 0; - font-size: 15px; - letter-spacing: 0; - color: var(--app-text-title); -} - -.panel-kicker { - display: none; - color: var(--app-accent-strong); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.04em; - text-transform: uppercase; -} - -.toolbar-shell { - display: flex; - align-items: center; - justify-content: space-between; - gap: 10px; - flex-wrap: wrap; -} - -.table-heading p { - margin: 4px 0 0; - font-size: 13px; - color: var(--app-text-muted); - line-height: 1.5; -} - -.toolbar-actions { - display: flex; - align-items: center; - flex-wrap: nowrap; - gap: 8px; - margin-left: auto; - white-space: nowrap; - overflow-x: auto; - overflow-y: hidden; - padding-bottom: 2px; -} - -.toolbar-actions::-webkit-scrollbar { - height: 0; -} - -.toolbar-actions > * { - flex-shrink: 0; -} - -.toolbar-actions .top-right-btn { - margin-left: 0; - flex-shrink: 0; -} - -.toolbar-actions .el-button + .el-button, -.toolbar-actions .el-dropdown + .el-button, -.toolbar-actions .el-button + .el-dropdown, -.toolbar-actions .el-dropdown + .el-dropdown, -.toolbar-actions .top-right-btn + .el-button, -.toolbar-actions .el-button + .top-right-btn, -.toolbar-actions .top-right-btn + .el-dropdown, -.toolbar-actions .el-dropdown + .top-right-btn { - margin-left: 0 !important; -} - -.table-panel .toolbar-actions .el-button:not(.is-circle):not(.is-link) { - border-radius: 10px !important; -} - -.query-form { - display: flex; - flex-wrap: wrap; - gap: 10px 14px; - align-items: end; -} - -.query-form .el-form-item { - flex: 0 0 auto; - margin-bottom: 0; - margin-right: 0; - display: flex; - align-items: flex-end; - min-width: 0; -} - -.query-form .el-form-item__content { - min-width: 0; -} - -.query-form .el-form-item:last-child { - margin-left: auto; - align-self: end; -} - -.query-form .el-form-item:last-child .el-form-item__content { - display: inline-flex; - align-items: center; - justify-content: flex-end; - gap: 6px; - flex-wrap: nowrap; -} - -.query-form .el-form-item:last-child .el-button { - margin-left: 0 !important; - flex-shrink: 0; -} - -.query-form .el-form-item:last-child .el-button + .el-button { - margin-left: 0 !important; -} - -.query-form .el-input__wrapper, -.query-form .el-select__wrapper, -.query-form .el-textarea__inner, -.query-form .el-date-editor, -.query-form .el-range-editor, -.query-form .el-cascader .el-input__wrapper, -.query-form .el-input-number, -.query-form .el-input-number__decrease, -.query-form .el-input-number__increase { - border-radius: 12px !important; -} - -.query-form .el-button { - border-radius: 10px !important; -} - -@media (max-width: 900px) { - .query-form { - gap: 10px 12px; - } -} - -@media (max-width: 640px) { - .query-form { - display: flex; - flex-direction: column; - align-items: stretch; - } - - .query-form .el-form-item { - width: 100%; - } - - .query-form .el-input, - .query-form .el-select, - .query-form .el-date-editor, - .query-form .el-cascader, - .query-form .el-input-number { - width: 100% !important; - } - - .query-form .el-form-item:last-child { - margin-left: 0; - } -} - -.data-table .el-button.is-link { - width: 28px !important; - height: 28px !important; - min-width: 28px !important; - padding: 0 !important; - border-radius: 10px !important; - background: rgba(53, 109, 255, 0.08) !important; -} - -.data-table .el-button.is-link + .el-button.is-link { - margin-left: 4px !important; -} - -.search-wrap { - margin-bottom: 0 !important; -} - -.el-card.search-panel, -.el-card.side-panel { - border-radius: 16px !important; - overflow: hidden; -} - -.el-card.table-panel { - border-radius: 14px !important; - overflow: hidden; -} - -.el-card.search-panel .el-card__header, -.el-card.side-panel .el-card__header { - border-top-left-radius: 16px; - border-top-right-radius: 16px; -} - -.el-card.table-panel .el-card__header { - border-top-left-radius: 14px; - border-top-right-radius: 14px; -} - -.el-card.search-panel .el-card__body, -.el-card.side-panel .el-card__body { - border-bottom-left-radius: 16px; - border-bottom-right-radius: 16px; -} - -.el-card.table-panel .el-card__body { - border-bottom-left-radius: 14px; - border-bottom-right-radius: 14px; -} - -.search-panel { - .el-card__header { - display: block; - padding: 12px 16px !important; - } - - .el-card__body { - padding-top: 16px !important; - overflow: hidden; - max-height: 560px; - opacity: 1; - transition: - max-height 0.32s cubic-bezier(0.22, 1, 0.36, 1), - opacity 0.24s ease, - padding-top 0.24s ease, - padding-bottom 0.24s ease; - } -} - -.search-panel.is-collapsed { - .el-card__body { - max-height: 0; - opacity: 0; - padding-top: 0 !important; - padding-bottom: 0 !important; - pointer-events: none; - } -} - -.search-panel-toggle { - cursor: pointer; - user-select: none; - transition: color 0.24s ease; - - &:hover { - color: var(--app-accent-strong); - } - - &::after { - content: ''; - margin-left: auto; - width: 9px; - height: 9px; - border-right: 2px solid currentColor; - border-bottom: 2px solid currentColor; - color: var(--app-text-muted); - transform: rotate(-135deg); - transition: - transform 0.24s ease, - color 0.24s ease; - } -} - -.search-panel.is-collapsed .search-panel-toggle::after { - transform: rotate(45deg); -} - -:global(html.dark) { - .tree-border { - background: rgba(15, 23, 42, 0.42); - border-color: rgba(100, 116, 139, 0.22); - } -} - -/* horizontal el menu */ -.el-menu--horizontal .el-menu-item .svg-icon + span, -.el-menu--horizontal .el-sub-menu__title .svg-icon + span { - margin-left: 3px; -} diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss deleted file mode 100644 index 0914321..0000000 --- a/src/assets/styles/sidebar.scss +++ /dev/null @@ -1,416 +0,0 @@ -@use './variables.module.scss' as *; - -#app { - .main-container { - height: 100%; - transition: margin-left 0.28s; - margin-left: calc(#{$base-sidebar-width} + 12px); - position: relative; - background: transparent; - } - - .sidebarHide { - margin-left: 0 !important; - } - - .sidebar-container { - -webkit-transition: width 0.28s; - transition: width 0.28s; - width: $base-sidebar-width !important; - background: transparent; - height: calc(100vh - 24px); - position: fixed; - font-size: 0; - top: 12px; - left: 12px; - z-index: 1001; - overflow: hidden; - box-sizing: border-box; - padding: 0; - border-right: none; - -webkit-box-shadow: none; - box-shadow: none; - - // reset element-ui css - .horizontal-collapse-transition { - transition: - 0s width ease-in-out, - 0s padding-left ease-in-out, - 0s padding-right ease-in-out; - } - - .scrollbar-wrapper { - overflow-x: hidden !important; - } - - .el-scrollbar__bar.is-vertical { - right: 0; - } - - .el-scrollbar { - height: 100%; - } - - .el-scrollbar.theme-light { - --side-menu-text: #1f2937; - --side-menu-hover-bg: rgba(64, 158, 255, 0.08); - --side-menu-hover-text: #111827; - --side-menu-active-bg: rgba(64, 158, 255, 0.12); - --side-menu-active-text: #409eff; - --side-menu-active-border: rgba(64, 158, 255, 0.16); - --side-menu-active-line: #409eff; - } - - .el-scrollbar.theme-dark { - --side-menu-text: #e5edf8; - --side-menu-hover-bg: rgba(255, 255, 255, 0.08); - --side-menu-hover-text: #ffffff; - --side-menu-active-bg: rgba(64, 158, 255, 0.22); - --side-menu-active-text: #ffffff; - --side-menu-active-border: rgba(96, 165, 250, 0.24); - --side-menu-active-line: #60a5fa; - } - - .is-horizontal { - display: none; - } - - a { - display: inline-block; - width: 100%; - overflow: hidden; - } - - .svg-icon { - margin-right: 10px; - } - - .el-menu { - border: none; - height: 100%; - width: 100% !important; - background: transparent !important; - } - - .el-menu--inline { - background: transparent !important; - } - - .el-menu-item, - .menu-title { - overflow: hidden !important; - text-overflow: ellipsis !important; - white-space: nowrap !important; - } - - .el-menu-item, - .el-sub-menu__title, - .el-menu-item .svg-icon, - .el-sub-menu__title .svg-icon, - .el-sub-menu__icon-arrow { - color: var(--side-menu-text) !important; - fill: currentColor; - } - - .el-menu-item, - .el-sub-menu__title { - position: relative; - font-weight: 500; - } - - .el-menu-item .el-menu-tooltip__trigger { - display: inline-block !important; - } - - // menu hover - .theme-dark .submenu-title-noDropdown, - .theme-dark .el-sub-menu__title { - border-radius: var(--app-radius-md); - margin: 3px 8px; - &:hover { - background-color: var(--side-menu-hover-bg) !important; - color: var(--side-menu-hover-text) !important; - } - } - .submenu-title-noDropdown, - .el-sub-menu__title { - border-radius: var(--app-radius-md); - margin: 3px 8px; - color: var(--side-menu-text) !important; - &:hover { - background-color: var(--side-menu-hover-bg) !important; - color: var(--side-menu-hover-text) !important; - } - } - - & .theme-dark .is-active > .el-sub-menu__title { - color: var(--side-menu-active-text) !important; - } - - & .nest-menu .el-sub-menu > .el-sub-menu__title, - & .el-sub-menu .el-menu-item { - min-width: calc($base-sidebar-width - 16px) !important; - border-radius: var(--app-radius-md); - height: 40px; - margin: 3px 8px; - background: transparent !important; - &:not(.is-active):hover { - background-color: var(--side-menu-hover-bg) !important; - color: var(--side-menu-hover-text) !important; - } - } - - & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title, - & .theme-dark .el-sub-menu .el-menu-item { - border-radius: var(--app-radius-md); - height: 40px; - margin: 3px 8px; - background: transparent !important; - - &.is-active { - background: var(--side-menu-active-bg) !important; - color: var(--side-menu-active-text) !important; - box-shadow: - inset 3px 0 0 var(--side-menu-active-line), - inset 0 0 0 1px var(--side-menu-active-border); - } - &:not(.is-active):hover { - // you can use $sub-menuHover - background-color: var(--side-menu-hover-bg) !important; - color: var(--side-menu-hover-text) !important; - } - } - - & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title, - & .theme-dark .el-menu-item { - border-radius: var(--app-radius-md); - height: 40px; - margin: 3px 8px; - background: transparent !important; - - &.is-active { - background: var(--side-menu-active-bg) !important; - color: var(--side-menu-active-text) !important; - box-shadow: - inset 3px 0 0 var(--side-menu-active-line), - inset 0 0 0 1px var(--side-menu-active-border); - } - &:not(.is-active):hover { - // you can use $sub-menuHover - background-color: var(--side-menu-hover-bg) !important; - color: var(--side-menu-hover-text) !important; - } - } - - & .nest-menu .el-sub-menu > .el-sub-menu__title, - & .el-menu-item { - border-radius: var(--app-radius-md); - height: 40px; - margin: 3px 8px; - background: transparent !important; - - &.is-active { - background: var(--side-menu-active-bg) !important; - color: var(--side-menu-active-text) !important; - box-shadow: - inset 3px 0 0 var(--side-menu-active-line), - inset 0 0 0 1px var(--side-menu-active-border); - } - &:not(.is-active):hover { - // you can use $sub-menuHover - background-color: var(--side-menu-hover-bg) !important; - color: var(--side-menu-hover-text) !important; - } - } - } - - // 收起菜单后的样式 - .hideSidebar { - .sidebar-container { - width: 58px !important; - } - - .main-container { - margin-left: 70px; - } - - .sidebar-shell { - padding-left: 4px; - padding-right: 4px; - } - - .submenu-title-noDropdown { - padding: 0 !important; - position: relative; - height: 40px; - width: 40px !important; - min-width: 40px !important; - margin: 3px auto !important; - display: flex; - align-items: center; - justify-content: center !important; - box-sizing: border-box; - // 选中状态的菜单 - &.is-active { - background-color: var(--side-menu-active-bg) !important; - color: var(--side-menu-active-text) !important; - box-shadow: inset 3px 0 0 var(--side-menu-active-line); - } - - .el-tooltip { - padding: 0 !important; - } - - .el-menu-tooltip__trigger { - width: 100%; - height: 100%; - display: inline-flex !important; - align-items: center; - justify-content: center; - line-height: 1; - } - - .svg-icon { - margin-right: 0 !important; - } - } - - - & .el-sub-menu { - overflow: hidden; - border-radius: var(--app-radius-md); - .el-sub-menu__title, - .el-sub-menu__title.el-tooltip__trigger { - border-radius: var(--app-radius-md); - height: 40px; - padding: 0 !important; - display: flex; - align-items: center; - justify-content: center !important; - line-height: 1; - } - - // 选中状态的菜单 - &.is-active .el-sub-menu__title, - &.is-active .el-sub-menu__title.el-tooltip__trigger { - background-color: var(--side-menu-active-bg) !important; - box-shadow: inset 3px 0 0 var(--side-menu-active-line); - } - - & > .el-sub-menu__title { - padding: 0 !important; - } - } - - .el-menu--collapse { - > div > .el-sub-menu { - width: 40px !important; - min-width: 40px !important; - margin: 3px auto !important; - } - - > div > .el-sub-menu > .el-sub-menu__title, - > div > .el-sub-menu > .el-sub-menu__title.el-tooltip__trigger { - width: 100% !important; - min-width: 100% !important; - margin: 0 !important; - box-sizing: border-box; - transform: none; - position: relative; - } - - .is-active .svg-icon { - fill: currentColor; - } - - > div > .el-sub-menu > .el-sub-menu__title .svg-icon { - position: absolute; - left: 50%; - top: 50%; - width: 16px; - height: 16px; - transform: translate(-50%, -50%); - display: block; - margin: 0 !important; - margin-right: 0 !important; - } - - > div > .el-sub-menu > .el-sub-menu__title { - justify-content: center !important; - - .el-sub-menu__icon-arrow { - display: none !important; - width: 0 !important; - margin: 0 !important; - overflow: hidden !important; - } - - & > span { - height: 0; - width: 0; - overflow: hidden; - visibility: hidden; - display: inline-block; - } - & > i { - height: 0; - width: 0; - overflow: hidden; - visibility: hidden; - display: inline-block; - } - } - } - } - - .el-menu--collapse .el-menu .el-sub-menu { - min-width: $base-sidebar-width !important; - } - - // mobile responsive - .mobile { - .main-container { - margin-left: 0px; - } - - .sidebar-container { - transition: transform 0.28s; - width: $base-sidebar-width !important; - } - - &.hideSidebar { - .sidebar-container { - pointer-events: none; - transition-duration: 0.3s; - transform: translate3d(calc(-#{$base-sidebar-width} - 12px), 0, 0); - } - } - } - - .withoutAnimation { - .main-container, - .sidebar-container { - transition: none; - } - } -} - -// when menu collapsed -.el-menu--vertical { - & > .el-menu { - .svg-icon { - margin-right: 16px; - } - } -} -// 收起菜单后悬浮的菜单样式 -.el-popper.is-pure{ - border-radius: var(--app-radius-md); - box-shadow: var(--app-shadow-md); - .el-menu--popup{ - border-radius: var(--app-radius-md); - } - .el-menu-item{ - border-radius: var(--app-radius-sm); - } -} diff --git a/src/assets/styles/tokens/_exports.scss b/src/assets/styles/tokens/_exports.scss new file mode 100644 index 0000000..98bfce9 --- /dev/null +++ b/src/assets/styles/tokens/_exports.scss @@ -0,0 +1,21 @@ +/* CSS module exports preserved for JS/Vue consumers. */ + +@use './sass-vars' as *; + +:export { + menuColor: $base-menu-color; + menuLightColor: $base-menu-light-color; + menuColorActive: $base-menu-color-active; + menuBackground: $base-menu-background; + menuLightBackground: $base-menu-light-background; + subMenuBackground: $base-sub-menu-background; + subMenuHover: $base-sub-menu-hover; + sideBarWidth: $base-sidebar-width; + logoTitleColor: $base-logo-title-color; + logoLightTitleColor: $base-logo-light-title-color; + primaryColor: $color-primary; + successColor: $color-success; + dangerColor: $color-danger; + infoColor: $color-info; + warningColor: $color-warning; +} diff --git a/src/assets/styles/tokens/_sass-vars.scss b/src/assets/styles/tokens/_sass-vars.scss new file mode 100644 index 0000000..da76574 --- /dev/null +++ b/src/assets/styles/tokens/_sass-vars.scss @@ -0,0 +1,42 @@ +/* Sass variables consumed by legacy modules and CSS module exports. */ + +$blue: #324157; +$light-blue: #3a71a8; +$red: #c03639; +$pink: #e65d6e; +$green: #30b08f; +$tiffany: #4ab7bd; +$yellow: #fec171; +$panGreen: #30b08f; + +$base-menu-color: var(--menuColor); +$base-menu-hover: var(--menuHover); +$base-menu-color-active: var(--menuActiveText); +$base-menu-background: var(--menuBg); +$base-logo-title-color: #ffffff; + +$base-menu-light-color: rgba(0, 0, 0, 0.7); +$base-menu-light-background: #ffffff; +$base-logo-light-title-color: #001529; + +$base-sub-menu-background: var(--subMenuBg); +$base-sub-menu-hover: var(--subMenuHover); +$base-sub-menu-title-hover: var(--subMenuTitleHover); + +$fixed-header-bg: var(--fixedHeaderBg); +$table-header-bg: var(--tableHeaderBg); +$table-header-text-color: var(--tableHeaderTextColor); + +$color-primary: #409eff; +$color-success: #67c23a; +$color-warning: #e6a23c; +$color-danger: #f56c6c; +$color-info: #909399; + +$--color-primary: $color-primary; +$--color-success: $color-success; +$--color-warning: $color-warning; +$--color-danger: $color-danger; +$--color-info: $color-info; + +$base-sidebar-width: 200px; diff --git a/src/assets/styles/tokens/_theme-dark.scss b/src/assets/styles/tokens/_theme-dark.scss new file mode 100644 index 0000000..dd30bc8 --- /dev/null +++ b/src/assets/styles/tokens/_theme-dark.scss @@ -0,0 +1,194 @@ +/* Dark theme CSS variables and component token overrides. */ + +html.dark { + --menuBg: #111827; + --menuColor: #e5edf8; + --menuActiveText: #f8fbff; + --menuHover: rgba(85, 129, 255, 0.2); + + --subMenuBg: #111827; + --subMenuActiveText: #f8fbff; + --subMenuHover: rgba(85, 129, 255, 0.18); + --subMenuTitleHover: rgba(148, 163, 184, 0.12); + + --fixedHeaderBg: #0f172a; + --tableHeaderBg: var(--el-bg-color); + --tableHeaderTextColor: var(--el-text-color); + + .el-tree-node__content { + --el-color-primary-light-9: #262727; + } + + .el-button--primary { + --el-button-bg-color: #2b6bd3; + --el-button-border-color: #3a7be8; + --el-button-text-color: #eef4ff; + --el-button-hover-bg-color: #3a7be8; + --el-button-hover-border-color: #3a7be8; + --el-button-active-bg-color: #255fb8; + --el-button-active-border-color: #255fb8; + } + + .el-button--primary.is-plain { + --el-button-bg-color: rgba(43, 107, 211, 0.12); + --el-button-border-color: rgba(58, 123, 232, 0.5); + --el-button-text-color: #dbe8ff; + --el-button-hover-bg-color: rgba(58, 123, 232, 0.2); + --el-button-hover-border-color: rgba(58, 123, 232, 0.7); + --el-button-active-bg-color: rgba(43, 107, 211, 0.28); + --el-button-active-border-color: rgba(43, 107, 211, 0.8); + } + + .el-button--success { + --el-button-bg-color: #1f8a5a; + --el-button-border-color: #29a46d; + --el-button-text-color: #eefaf4; + --el-button-hover-bg-color: #29a46d; + --el-button-hover-border-color: #29a46d; + --el-button-active-bg-color: #1b784f; + --el-button-active-border-color: #1b784f; + } + + .el-button--success.is-plain { + --el-button-bg-color: rgba(31, 138, 90, 0.12); + --el-button-border-color: rgba(41, 164, 109, 0.5); + --el-button-text-color: #dbf6e8; + --el-button-hover-bg-color: rgba(41, 164, 109, 0.2); + --el-button-hover-border-color: rgba(41, 164, 109, 0.7); + --el-button-active-bg-color: rgba(31, 138, 90, 0.28); + --el-button-active-border-color: rgba(31, 138, 90, 0.8); + } + + .el-button--warning { + --el-button-bg-color: #b87922; + --el-button-border-color: #d6953b; + --el-button-text-color: #fff7e6; + --el-button-hover-bg-color: #d6953b; + --el-button-hover-border-color: #d6953b; + --el-button-active-bg-color: #a56c1d; + --el-button-active-border-color: #a56c1d; + } + + .el-button--warning.is-plain { + --el-button-bg-color: rgba(184, 121, 34, 0.12); + --el-button-border-color: rgba(214, 149, 59, 0.5); + --el-button-text-color: #ffecc8; + --el-button-hover-bg-color: rgba(214, 149, 59, 0.2); + --el-button-hover-border-color: rgba(214, 149, 59, 0.7); + --el-button-active-bg-color: rgba(184, 121, 34, 0.28); + --el-button-active-border-color: rgba(184, 121, 34, 0.8); + } + + .el-button--danger { + --el-button-bg-color: #b24a4a; + --el-button-border-color: #d16060; + --el-button-text-color: #ffecec; + --el-button-hover-bg-color: #d16060; + --el-button-hover-border-color: #d16060; + --el-button-active-bg-color: #9c3f3f; + --el-button-active-border-color: #9c3f3f; + } + + .el-button--danger.is-plain { + --el-button-bg-color: rgba(178, 74, 74, 0.12); + --el-button-border-color: rgba(209, 96, 96, 0.5); + --el-button-text-color: #ffd6d6; + --el-button-hover-bg-color: rgba(209, 96, 96, 0.2); + --el-button-hover-border-color: rgba(209, 96, 96, 0.7); + --el-button-active-bg-color: rgba(178, 74, 74, 0.28); + --el-button-active-border-color: rgba(178, 74, 74, 0.8); + } + + .el-button--info { + --el-button-bg-color: #4b5563; + --el-button-border-color: #667085; + --el-button-text-color: #f3f4f6; + --el-button-hover-bg-color: #667085; + --el-button-hover-border-color: #667085; + --el-button-active-bg-color: #3f4753; + --el-button-active-border-color: #3f4753; + } + + .el-button--info.is-plain { + --el-button-bg-color: rgba(75, 85, 99, 0.16); + --el-button-border-color: rgba(102, 112, 133, 0.55); + --el-button-text-color: #e5e7eb; + --el-button-hover-bg-color: rgba(102, 112, 133, 0.22); + --el-button-hover-border-color: rgba(102, 112, 133, 0.75); + --el-button-active-bg-color: rgba(75, 85, 99, 0.3); + --el-button-active-border-color: rgba(75, 85, 99, 0.85); + } + + .el-switch { + --el-switch-on-color: var(--el-color-primary-dark-6); + --el-switch-border-color: var(--el-color-primary-light-2); + } + + .el-tag--primary { + --el-tag-bg-color: var(--el-color-primary-dark-6); + --el-tag-border-color: var(--el-color-primary-light-2); + } + + .el-tag--success { + --el-tag-bg-color: rgba(31, 138, 90, 0.18); + --el-tag-border-color: rgba(41, 164, 109, 0.6); + --el-tag-text-color: #c7f2df; + } + + .el-tag--warning { + --el-tag-bg-color: rgba(184, 121, 34, 0.18); + --el-tag-border-color: rgba(214, 149, 59, 0.6); + --el-tag-text-color: #ffe6bb; + } + + .el-tag--danger { + --el-tag-bg-color: rgba(178, 74, 74, 0.18); + --el-tag-border-color: rgba(209, 96, 96, 0.6); + --el-tag-text-color: #ffd0d0; + } + + .el-tag--info { + --el-tag-bg-color: rgba(75, 85, 99, 0.18); + --el-tag-border-color: rgba(102, 112, 133, 0.6); + --el-tag-text-color: #e5e7eb; + } + + --tags-view-active-bg: var(--el-color-primary-dark-6); + --tags-view-active-border-color: var(--el-color-primary-light-2); + + --app-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28); + --app-shadow-md: 0 12px 28px rgba(0, 0, 0, 0.28); + --app-shadow-lg: 0 20px 44px rgba(0, 0, 0, 0.32); + --app-surface-bg: #111827; + --app-surface-border: rgba(71, 85, 105, 0.5); + --app-shell-bg: #060b16; + --app-shell-spot-1: rgba(69, 120, 255, 0.18); + --app-shell-spot-2: rgba(45, 212, 191, 0.14); + --app-sidebar-border: rgba(148, 163, 184, 0.1); + --app-navbar-bg: #111827; + --app-navbar-border: rgba(71, 85, 105, 0.48); + --app-navbar-shadow: 0 1px 2px rgba(0, 0, 0, 0.22); + --app-accent-soft: rgba(64, 158, 255, 0.14); + --app-accent-strong: #60a5fa; + --app-text-title: #f3f7ff; + --app-text-muted: #8ea0bd; + --app-overlay-mask: rgba(2, 6, 23, 0.58); + --app-elevated-soft-bg: rgba(148, 163, 184, 0.08); + --app-elevated-close-bg: rgba(148, 163, 184, 0.18); + --app-elevated-close-hover-bg: rgba(96, 165, 250, 0.18); + --el-bg-color-page: var(--app-shell-bg); + + --vxe-font-color: #98989e; + --vxe-primary-color: #2c7ecf; + --vxe-icon-background-color: #98989e; + --vxe-table-font-color: #98989e; + --vxe-table-resizable-color: #95969a; + --vxe-table-header-background-color: #28282a; + --vxe-table-body-background-color: #151518; + --vxe-table-background-color: #4a5663; + --vxe-table-border-width: 1px; + --vxe-table-border-color: #37373a; + --vxe-toolbar-background-color: #37373a; + + --brder-color: #37373a; +} diff --git a/src/assets/styles/tokens/_theme.scss b/src/assets/styles/tokens/_theme.scss new file mode 100644 index 0000000..8326286 --- /dev/null +++ b/src/assets/styles/tokens/_theme.scss @@ -0,0 +1,57 @@ +/* Light theme CSS variables and shared design tokens. */ + +:root { + --menuBg: #ffffff; + --menuColor: #1f2937; + --menuActiveText: #111827; + --menuHover: rgba(64, 158, 255, 0.12); + + --subMenuBg: #ffffff; + --subMenuActiveText: #111827; + --subMenuHover: rgba(64, 158, 255, 0.12); + --subMenuTitleHover: rgba(64, 158, 255, 0.08); + + --el-menu-base-level-padding: 12px; + --el-menu-level-padding: 8px; + --el-menu-item-height: 50px; + + --fixedHeaderBg: #ffffff; + --tableHeaderBg: #f8fafc; + --tableHeaderTextColor: #475569; + + --brder-color: #e8e8e8; + + --tags-view-active-bg: var(--el-color-primary); + --tags-view-active-border-color: var(--el-color-primary); + + --app-radius-sm: 6px; + --app-radius-md: 12px; + --app-radius-lg: 18px; + --app-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05); + --app-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.06); + --app-shadow-lg: 0 14px 36px rgba(15, 23, 42, 0.1); + --app-surface-bg: #ffffff; + --app-surface-border: #e5e7eb; + --app-shell-bg: #f5f7fa; + --app-shell-spot-1: rgba(64, 158, 255, 0.08); + --app-shell-spot-2: rgba(64, 158, 255, 0.04); + --app-sidebar-border: #e5e7eb; + --app-navbar-bg: #ffffff; + --app-navbar-border: #e5e7eb; + --app-navbar-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); + --app-accent-soft: rgba(64, 158, 255, 0.08); + --app-accent-strong: #409eff; + --app-text-title: #1f2937; + --app-text-muted: #6b7280; + --app-overlay-mask: rgba(15, 23, 42, 0.22); + --app-elevated-soft-bg: #f8fafc; + --app-elevated-close-bg: rgba(148, 163, 184, 0.14); + --app-elevated-close-hover-bg: rgba(64, 158, 255, 0.14); + + --el-border-radius-base: var(--app-radius-md); + --el-border-radius-small: var(--app-radius-sm); + --el-border-radius-round: 999px; + --el-box-shadow-light: var(--app-shadow-sm); + --el-box-shadow: var(--app-shadow-md); + --el-bg-color-page: var(--app-shell-bg); +} diff --git a/src/assets/styles/variables.module.scss b/src/assets/styles/variables.module.scss index 8c7b4e3..d9af614 100644 --- a/src/assets/styles/variables.module.scss +++ b/src/assets/styles/variables.module.scss @@ -1,315 +1,5 @@ -// 全局SCSS变量 -:root { - --menuBg: #ffffff; - --menuColor: #1f2937; - --menuActiveText: #111827; - --menuHover: rgba(64, 158, 255, 0.12); +@forward './tokens/sass-vars'; - --subMenuBg: #ffffff; - --subMenuActiveText: #111827; - --subMenuHover: rgba(64, 158, 255, 0.12); - --subMenuTitleHover: rgba(64, 158, 255, 0.08); - - // 菜单栏缩进 - --el-menu-base-level-padding: 12px; - --el-menu-level-padding: 8px; - --el-menu-item-height: 50px; - - --fixedHeaderBg: #ffffff; - --tableHeaderBg: #f8fafc; - --tableHeaderTextColor: #475569; - - // ele - --brder-color: #e8e8e8; - - // 添加 tag 相关变量 - --tags-view-active-bg: var(--el-color-primary); - --tags-view-active-border-color: var(--el-color-primary); - - // Modern rounded style + soft shadows - --app-radius-sm: 6px; - --app-radius-md: 12px; - --app-radius-lg: 18px; - --app-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05); - --app-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.06); - --app-shadow-lg: 0 14px 36px rgba(15, 23, 42, 0.1); - --app-surface-bg: #ffffff; - --app-surface-border: #e5e7eb; - --app-shell-bg: #f5f7fa; - --app-shell-spot-1: rgba(64, 158, 255, 0.08); - --app-shell-spot-2: rgba(64, 158, 255, 0.04); - --app-sidebar-border: #e5e7eb; - --app-navbar-bg: #ffffff; - --app-navbar-border: #e5e7eb; - --app-navbar-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); - --app-accent-soft: rgba(64, 158, 255, 0.08); - --app-accent-strong: #409eff; - --app-text-title: #1f2937; - --app-text-muted: #6b7280; - --app-overlay-mask: rgba(15, 23, 42, 0.22); - --app-elevated-soft-bg: #f8fafc; - --app-elevated-close-bg: rgba(148, 163, 184, 0.14); - --app-elevated-close-hover-bg: rgba(64, 158, 255, 0.14); - - // Element Plus tokens - --el-border-radius-base: var(--app-radius-md); - --el-border-radius-small: var(--app-radius-sm); - --el-border-radius-round: 999px; - --el-box-shadow-light: var(--app-shadow-sm); - --el-box-shadow: var(--app-shadow-md); - --el-bg-color-page: var(--app-shell-bg); -} - -html.dark { - --menuBg: #111827; - --menuColor: #e5edf8; - --menuActiveText: #f8fbff; - --menuHover: rgba(85, 129, 255, 0.2); - - --subMenuBg: #111827; - --subMenuActiveText: #f8fbff; - --subMenuHover: rgba(85, 129, 255, 0.18); - --subMenuTitleHover: rgba(148, 163, 184, 0.12); - - --fixedHeaderBg: #0f172a; - --tableHeaderBg: var(--el-bg-color); - --tableHeaderTextColor: var(--el-text-color); - - // 覆盖ele 高亮当前行的标准暗色 - .el-tree-node__content { - --el-color-primary-light-9: #262727; - } - - .el-button--primary { - --el-button-bg-color: #2b6bd3; - --el-button-border-color: #3a7be8; - --el-button-text-color: #eef4ff; - --el-button-hover-bg-color: #3a7be8; - --el-button-hover-border-color: #3a7be8; - --el-button-active-bg-color: #255fb8; - --el-button-active-border-color: #255fb8; - } - - .el-button--primary.is-plain { - --el-button-bg-color: rgba(43, 107, 211, 0.12); - --el-button-border-color: rgba(58, 123, 232, 0.5); - --el-button-text-color: #dbe8ff; - --el-button-hover-bg-color: rgba(58, 123, 232, 0.2); - --el-button-hover-border-color: rgba(58, 123, 232, 0.7); - --el-button-active-bg-color: rgba(43, 107, 211, 0.28); - --el-button-active-border-color: rgba(43, 107, 211, 0.8); - } - - .el-button--success { - --el-button-bg-color: #1f8a5a; - --el-button-border-color: #29a46d; - --el-button-text-color: #eefaf4; - --el-button-hover-bg-color: #29a46d; - --el-button-hover-border-color: #29a46d; - --el-button-active-bg-color: #1b784f; - --el-button-active-border-color: #1b784f; - } - - .el-button--success.is-plain { - --el-button-bg-color: rgba(31, 138, 90, 0.12); - --el-button-border-color: rgba(41, 164, 109, 0.5); - --el-button-text-color: #dbf6e8; - --el-button-hover-bg-color: rgba(41, 164, 109, 0.2); - --el-button-hover-border-color: rgba(41, 164, 109, 0.7); - --el-button-active-bg-color: rgba(31, 138, 90, 0.28); - --el-button-active-border-color: rgba(31, 138, 90, 0.8); - } - - .el-button--warning { - --el-button-bg-color: #b87922; - --el-button-border-color: #d6953b; - --el-button-text-color: #fff7e6; - --el-button-hover-bg-color: #d6953b; - --el-button-hover-border-color: #d6953b; - --el-button-active-bg-color: #a56c1d; - --el-button-active-border-color: #a56c1d; - } - - .el-button--warning.is-plain { - --el-button-bg-color: rgba(184, 121, 34, 0.12); - --el-button-border-color: rgba(214, 149, 59, 0.5); - --el-button-text-color: #ffecc8; - --el-button-hover-bg-color: rgba(214, 149, 59, 0.2); - --el-button-hover-border-color: rgba(214, 149, 59, 0.7); - --el-button-active-bg-color: rgba(184, 121, 34, 0.28); - --el-button-active-border-color: rgba(184, 121, 34, 0.8); - } - - .el-button--danger { - --el-button-bg-color: #b24a4a; - --el-button-border-color: #d16060; - --el-button-text-color: #ffecec; - --el-button-hover-bg-color: #d16060; - --el-button-hover-border-color: #d16060; - --el-button-active-bg-color: #9c3f3f; - --el-button-active-border-color: #9c3f3f; - } - - .el-button--danger.is-plain { - --el-button-bg-color: rgba(178, 74, 74, 0.12); - --el-button-border-color: rgba(209, 96, 96, 0.5); - --el-button-text-color: #ffd6d6; - --el-button-hover-bg-color: rgba(209, 96, 96, 0.2); - --el-button-hover-border-color: rgba(209, 96, 96, 0.7); - --el-button-active-bg-color: rgba(178, 74, 74, 0.28); - --el-button-active-border-color: rgba(178, 74, 74, 0.8); - } - - .el-button--info { - --el-button-bg-color: #4b5563; - --el-button-border-color: #667085; - --el-button-text-color: #f3f4f6; - --el-button-hover-bg-color: #667085; - --el-button-hover-border-color: #667085; - --el-button-active-bg-color: #3f4753; - --el-button-active-border-color: #3f4753; - } - - .el-button--info.is-plain { - --el-button-bg-color: rgba(75, 85, 99, 0.16); - --el-button-border-color: rgba(102, 112, 133, 0.55); - --el-button-text-color: #e5e7eb; - --el-button-hover-bg-color: rgba(102, 112, 133, 0.22); - --el-button-hover-border-color: rgba(102, 112, 133, 0.75); - --el-button-active-bg-color: rgba(75, 85, 99, 0.3); - --el-button-active-border-color: rgba(75, 85, 99, 0.85); - } - - .el-switch { - --el-switch-on-color: var(--el-color-primary-dark-6); - --el-switch-border-color: var(--el-color-primary-light-2); - } - - .el-tag--primary { - --el-tag-bg-color: var(--el-color-primary-dark-6); - --el-tag-border-color: var(--el-color-primary-light-2); - } - - .el-tag--success { - --el-tag-bg-color: rgba(31, 138, 90, 0.18); - --el-tag-border-color: rgba(41, 164, 109, 0.6); - --el-tag-text-color: #c7f2df; - } - - .el-tag--warning { - --el-tag-bg-color: rgba(184, 121, 34, 0.18); - --el-tag-border-color: rgba(214, 149, 59, 0.6); - --el-tag-text-color: #ffe6bb; - } - - .el-tag--danger { - --el-tag-bg-color: rgba(178, 74, 74, 0.18); - --el-tag-border-color: rgba(209, 96, 96, 0.6); - --el-tag-text-color: #ffd0d0; - } - - .el-tag--info { - --el-tag-bg-color: rgba(75, 85, 99, 0.18); - --el-tag-border-color: rgba(102, 112, 133, 0.6); - --el-tag-text-color: #e5e7eb; - } - - // 在深色模式下使用更深的颜色 - --tags-view-active-bg: var(--el-color-primary-dark-6); - --tags-view-active-border-color: var(--el-color-primary-light-2); - - // Modern rounded style + soft shadows (dark) - --app-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28); - --app-shadow-md: 0 12px 28px rgba(0, 0, 0, 0.28); - --app-shadow-lg: 0 20px 44px rgba(0, 0, 0, 0.32); - --app-surface-bg: #111827; - --app-surface-border: rgba(71, 85, 105, 0.5); - --app-shell-bg: #060b16; - --app-shell-spot-1: rgba(69, 120, 255, 0.18); - --app-shell-spot-2: rgba(45, 212, 191, 0.14); - --app-sidebar-border: rgba(148, 163, 184, 0.1); - --app-navbar-bg: #111827; - --app-navbar-border: rgba(71, 85, 105, 0.48); - --app-navbar-shadow: 0 1px 2px rgba(0, 0, 0, 0.22); - --app-accent-soft: rgba(64, 158, 255, 0.14); - --app-accent-strong: #60a5fa; - --app-text-title: #f3f7ff; - --app-text-muted: #8ea0bd; - --app-overlay-mask: rgba(2, 6, 23, 0.58); - --app-elevated-soft-bg: rgba(148, 163, 184, 0.08); - --app-elevated-close-bg: rgba(148, 163, 184, 0.18); - --app-elevated-close-hover-bg: rgba(96, 165, 250, 0.18); - --el-bg-color-page: var(--app-shell-bg); - // vxe-table 主题 - --vxe-font-color: #98989e; - --vxe-primary-color: #2c7ecf; - --vxe-icon-background-color: #98989e; - --vxe-table-font-color: #98989e; - --vxe-table-resizable-color: #95969a; - --vxe-table-header-background-color: #28282a; - --vxe-table-body-background-color: #151518; - --vxe-table-background-color: #4a5663; - --vxe-table-border-width: 1px; - --vxe-table-border-color: #37373a; - --vxe-toolbar-background-color: #37373a; - - // ele - --brder-color: #37373a; -} - -// base color -$blue: #324157; -$light-blue: #3a71a8; -$red: #c03639; -$pink: #e65d6e; -$green: #30b08f; -$tiffany: #4ab7bd; -$yellow: #fec171; -$panGreen: #30b08f; - -// 默认菜单主题风格 -$base-menu-color: var(--menuColor); -$base-menu-hover: var(--menuHover); -$base-menu-color-active: var(--menuActiveText); -$base-menu-background: var(--menuBg); -$base-logo-title-color: #ffffff; - -$base-menu-light-color: rgba(0, 0, 0, 0.7); -$base-menu-light-background: #ffffff; -$base-logo-light-title-color: #001529; - -$base-sub-menu-background: var(--subMenuBg); -$base-sub-menu-hover: var(--subMenuHover); -$base-sub-menu-title-hover: var(--subMenuTitleHover); -// 表单头背景色和标题颜色 -$fixed-header-bg: var(--fixedHeaderBg); -$table-header-bg: var(--tableHeaderBg); -$table-header-text-color: var(--tableHeaderTextColor); - -$--color-primary: #409eff; -$--color-success: #67c23a; -$--color-warning: #e6a23c; -$--color-danger: #f56c6c; -$--color-info: #909399; - -$base-sidebar-width: 200px; - -// the :export directive is the magic sauce for webpack -// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass -:export { - menuColor: $base-menu-color; - menuLightColor: $base-menu-light-color; - menuColorActive: $base-menu-color-active; - menuBackground: $base-menu-background; - menuLightBackground: $base-menu-light-background; - subMenuBackground: $base-sub-menu-background; - subMenuHover: $base-sub-menu-hover; - sideBarWidth: $base-sidebar-width; - logoTitleColor: $base-logo-title-color; - logoLightTitleColor: $base-logo-light-title-color; - primaryColor: $--color-primary; - successColor: $--color-success; - dangerColor: $--color-danger; - infoColor: $--color-info; - warningColor: $--color-warning; -} +@use './tokens/theme'; +@use './tokens/theme-dark'; +@use './tokens/exports'; diff --git a/src/assets/styles/vendors/element-plus/_base.scss b/src/assets/styles/vendors/element-plus/_base.scss new file mode 100644 index 0000000..033f93d --- /dev/null +++ b/src/assets/styles/vendors/element-plus/_base.scss @@ -0,0 +1,65 @@ +/* Baseline Element Plus tweaks reused by the rest of the overrides. */ + +.el-collapse { + .collapse__title { + font-weight: 600; + padding: 0 8px; + font-size: 1.2em; + line-height: 1.1em; + } + + .el-collapse-item__content { + padding: 0 8px; + } +} + +.el-divider--horizontal { + margin-bottom: 10px; + margin-top: 10px; +} + +.el-breadcrumb__inner, +.el-breadcrumb__inner a { + font-weight: 400 !important; +} + +.el-upload { + input[type='file'] { + display: none !important; + } +} + +.el-upload__input { + display: none; +} + +.cell { + .el-tag { + margin-right: 0px; + } +} + +.small-padding { + .cell { + padding-left: 5px; + padding-right: 5px; + } +} + +.fixed-width { + .el-button--mini { + padding: 7px 10px; + width: 60px; + } +} + +.status-col { + .cell { + padding: 0 10px; + text-align: center; + + .el-tag { + margin-right: 0px; + } + } +} diff --git a/src/assets/styles/vendors/element-plus/_dialog.scss b/src/assets/styles/vendors/element-plus/_dialog.scss new file mode 100644 index 0000000..a19fb6d --- /dev/null +++ b/src/assets/styles/vendors/element-plus/_dialog.scss @@ -0,0 +1,111 @@ +/* Dialog and upload-related overlays. */ + +.el-overlay { + overflow: hidden; + background: var(--app-overlay-mask); + backdrop-filter: blur(10px); + + .el-overlay-dialog { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + padding: 20px; + + .el-dialog { + margin: 0 auto !important; + border-radius: var(--app-radius-lg); + box-shadow: var(--app-shadow-md); + overflow: hidden; + border: 1px solid var(--app-surface-border); + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)) padding-box, + var(--app-surface-bg); + + .el-dialog__header { + padding: 18px 20px 14px; + box-sizing: border-box; + border-bottom: 1px solid rgba(148, 163, 184, 0.14); + margin-right: 0; + background: var(--app-elevated-soft-bg); + } + + .el-dialog__title { + font-size: 16px; + font-weight: 600; + line-height: 1.3; + color: var(--app-text-title); + letter-spacing: 0; + } + + .el-dialog__headerbtn { + top: 15px; + right: 16px; + width: 32px; + height: 32px; + border-radius: 10px; + background: var(--app-elevated-close-bg); + transition: + background-color 0.2s ease, + transform 0.2s ease, + color 0.2s ease; + + .el-dialog__close { + color: var(--app-text-muted); + font-size: 16px; + } + + &:hover { + background: var(--app-elevated-close-hover-bg); + transform: translateY(-1px); + + .el-dialog__close { + color: var(--app-accent-strong); + } + } + } + + .el-dialog__body { + padding: 18px 20px 12px !important; + } + + .el-dialog__footer { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 8px; + padding: 14px 20px 20px; + border-top: 1px solid rgba(148, 163, 184, 0.14); + } + } + } +} + +.el-dialog__body { + max-height: calc(90vh - 111px) !important; + overflow-y: auto; + overflow-x: hidden; +} + +.el-dialog__footer .el-button { + margin-left: 0 !important; +} + +.el-dialog__footer .dialog-footer { + display: flex; + width: 100%; + justify-content: flex-end; + gap: 12px; +} + +.upload-container { + .el-upload { + width: 100%; + + .el-upload-dragger { + width: 100%; + height: 200px; + } + } +} diff --git a/src/assets/styles/vendors/element-plus/_dropdown.scss b/src/assets/styles/vendors/element-plus/_dropdown.scss new file mode 100644 index 0000000..ee55b43 --- /dev/null +++ b/src/assets/styles/vendors/element-plus/_dropdown.scss @@ -0,0 +1,63 @@ +/* Dropdown and inline menu helpers. */ + +.el-dropdown-menu { + padding: 8px; + border-radius: 14px; + border: 1px solid var(--app-surface-border); + background: var(--app-surface-bg); + box-shadow: var(--app-shadow-md); + + .el-dropdown-menu__item { + min-height: 36px; + margin: 2px 0; + border-radius: 10px; + color: var(--app-text-title); + transition: + background-color 0.2s ease, + color 0.2s ease; + + &:hover, + &:focus { + background: var(--app-accent-soft); + color: var(--app-accent-strong); + } + } + + .el-dropdown-menu__item.is-disabled { + opacity: 0.5; + } + + .el-dropdown-menu__item--divided { + margin-top: 8px; + position: relative; + border-top: none; + + &::before { + left: 2px; + right: 2px; + top: -6px; + width: auto; + background: rgba(148, 163, 184, 0.14); + } + } + + a { + display: block; + } +} + +.el-range-editor.el-input__inner { + display: inline-flex !important; +} + +.el-range-separator { + box-sizing: content-box; +} + +.el-menu--collapse > div > .el-sub-menu > .el-sub-menu__title .el-sub-menu__icon-arrow { + display: none; +} + +.el-dropdown .el-dropdown-link { + color: var(--el-color-primary) !important; +} diff --git a/src/assets/styles/vendors/element-plus/_feedback.scss b/src/assets/styles/vendors/element-plus/_feedback.scss new file mode 100644 index 0000000..49ee89c --- /dev/null +++ b/src/assets/styles/vendors/element-plus/_feedback.scss @@ -0,0 +1,225 @@ +/* Toast, alert, and message-box feedback components. */ + +.el-message-box .el-message-box__message { + word-break: break-word; +} + +.el-message-box { + width: min(440px, calc(100vw - 32px)); + padding: 0; + overflow: hidden; + border: 1px solid var(--app-surface-border); + background: var(--app-surface-bg); + border-radius: 20px; + box-shadow: var(--app-shadow-md); + + .el-message-box__header { + padding: 18px 20px 0; + } + + .el-message-box__title { + font-size: 17px; + font-weight: 600; + color: var(--app-text-title); + } + + .el-message-box__headerbtn { + top: 14px; + right: 16px; + width: 32px; + height: 32px; + border-radius: 10px; + background: var(--app-elevated-close-bg); + transition: + background-color 0.2s ease, + transform 0.2s ease; + + .el-message-box__close { + color: var(--app-text-muted); + font-size: 16px; + } + + &:hover { + background: var(--app-elevated-close-hover-bg); + transform: translateY(-1px); + + .el-message-box__close { + color: var(--app-accent-strong); + } + } + } + + .el-message-box__content { + padding: 16px 20px 18px; + } + + .el-message-box__container { + align-items: flex-start; + gap: 12px; + } + + .el-message-box__status { + position: static; + margin-top: 1px; + width: 30px; + height: 30px; + border-radius: 10px; + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 18px !important; + background: var(--app-elevated-soft-bg); + } + + .el-message-box__message { + color: var(--app-text-title); + font-size: 14px; + line-height: 1.7; + } + + .el-message-box__btns { + display: flex; + justify-content: flex-end; + gap: 8px; + padding: 16px 20px 20px; + border-top: 1px solid rgba(148, 163, 184, 0.14); + } + + .el-message-box__btns .el-button { + margin-left: 0; + min-width: 88px; + } + + .el-message-box__input { + padding-top: 2px; + } +} + +.el-message, +.el-notification, +.el-alert { + border-radius: var(--app-radius-md); + box-shadow: var(--app-shadow-sm); +} + +.el-message { + min-width: 320px; + padding: 12px 14px; + border: 1px solid var(--app-surface-border); + background: var(--app-surface-bg); + gap: 10px; + align-items: center; + + .el-message__icon { + font-size: 18px; + } + + .el-message__content { + font-size: 14px; + font-weight: 500; + line-height: 1.5; + color: var(--app-text-title); + } + + .el-message__closeBtn { + color: var(--app-text-muted); + transition: color 0.2s ease; + + &:hover { + color: var(--app-accent-strong); + } + } +} + +.el-message--success { + border-color: var(--el-color-success-light-7); + background: var(--el-color-success-light-9); +} + +.el-message--warning { + border-color: var(--el-color-warning-light-7); + background: var(--el-color-warning-light-9); +} + +.el-message--error { + border-color: var(--el-color-danger-light-7); + background: var(--el-color-danger-light-9); +} + +.el-message--info { + border-color: var(--el-color-primary-light-7); + background: var(--el-color-primary-light-9); +} + +.el-notification { + width: 340px; + padding: 16px 18px 16px 16px; + border: 1px solid var(--app-surface-border); + background: var(--app-surface-bg); + + .el-notification__group { + margin-left: 8px; + } + + .el-notification__title { + font-size: 15px; + font-weight: 600; + color: var(--app-text-title); + } + + .el-notification__content { + margin-top: 6px; + font-size: 13px; + line-height: 1.65; + color: var(--app-text-muted); + } + + .el-notification__closeBtn { + top: 18px; + color: var(--app-text-muted); + transition: color 0.2s ease; + + &:hover { + color: var(--app-accent-strong); + } + } +} + +.el-notification.right, +.el-notification.left { + margin-top: 12px; +} + +.el-notification--success { + border-color: var(--el-color-success-light-7); +} + +.el-notification--warning { + border-color: var(--el-color-warning-light-7); +} + +.el-notification--error { + border-color: var(--el-color-danger-light-7); +} + +.el-notification--info { + border-color: var(--el-color-primary-light-7); +} + +html.dark { + .el-message--success { + background: rgba(31, 138, 90, 0.18); + } + + .el-message--warning { + background: rgba(184, 121, 34, 0.18); + } + + .el-message--error { + background: rgba(178, 74, 74, 0.18); + } + + .el-message--info { + background: rgba(43, 107, 211, 0.18); + } +} diff --git a/src/assets/styles/vendors/element-plus/_form.scss b/src/assets/styles/vendors/element-plus/_form.scss new file mode 100644 index 0000000..7dff8d9 --- /dev/null +++ b/src/assets/styles/vendors/element-plus/_form.scss @@ -0,0 +1,63 @@ +/* Form controls and generic rounded inputs. */ + +.el-form--inline .el-form-item__label { + width: 68px; +} + +.el-form--inline .el-select { + width: 240px; +} + +.el-form--inline .el-input { + width: 240px; +} + +.el-form--inline .el-date-editor { + width: 308px; +} + +.el-input__wrapper, +.el-textarea__inner, +.el-select__wrapper, +.el-date-editor, +.el-range-editor, +.el-input-number, +.el-input-number__decrease, +.el-input-number__increase { + border-radius: var(--app-radius-md); + transition: box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; +} + +.el-input__wrapper.is-focus, +.el-textarea__inner:focus, +.el-select__wrapper.is-focus, +.el-date-editor.is-focus, +.el-range-editor.is-focus { + box-shadow: 0 0 0 2px var(--el-color-primary-light-8); +} + +.el-button { + border-radius: var(--app-radius-md); + transition: box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; +} + +.el-button:not(.is-text):not(.is-link):hover { + box-shadow: var(--app-shadow-sm); +} + +.el-tag { + border-radius: var(--app-radius-md); +} + +.el-radio-button__inner, +.el-checkbox-button__inner { + border-radius: 10px !important; + box-shadow: none !important; +} + +.el-radio-button:first-child .el-radio-button__inner, +.el-checkbox-button:first-child .el-checkbox-button__inner, +.el-radio-button:last-child .el-radio-button__inner, +.el-checkbox-button:last-child .el-checkbox-button__inner { + border-radius: 10px !important; +} diff --git a/src/assets/styles/vendors/element-plus/_navigation.scss b/src/assets/styles/vendors/element-plus/_navigation.scss new file mode 100644 index 0000000..9915522 --- /dev/null +++ b/src/assets/styles/vendors/element-plus/_navigation.scss @@ -0,0 +1,68 @@ +/* Navigation and collection views: tables, tabs, pagination, breadcrumb. */ + +.el-table { + border-radius: 10px; + overflow: hidden; + border: 1px solid var(--app-surface-border); +} + +.el-table__header-wrapper, +.el-table__body-wrapper { + background: transparent; +} + +.el-table__row:hover td.el-table__cell { + background-color: rgba(53, 109, 255, 0.05) !important; +} + +.el-tabs__header { + margin: 0 0 12px 0; +} + +.el-tabs__item { + border-radius: var(--app-radius-md); + margin: 0 2px; +} + +.el-tabs__nav-wrap::after { + background-color: var(--el-border-color-lighter); +} + +.el-pagination .btn-prev, +.el-pagination .btn-next, +.el-pagination .el-pager li { + border-radius: var(--app-radius-sm); + transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; +} + +.el-pagination { + gap: 6px; + flex-wrap: wrap; + color: var(--app-text-muted); +} + +.el-pagination .el-pagination__total, +.el-pagination .el-pagination__jump { + color: var(--app-text-muted); +} + +.el-pagination .btn-prev, +.el-pagination .btn-next, +.el-pagination .el-pager li, +.el-pagination .el-pagination__sizes .el-input__wrapper { + min-width: 32px; + height: 32px; + border: 1px solid rgba(148, 163, 184, 0.14); + background: var(--app-surface-bg); +} + +.el-pagination .el-pager li.is-active { + box-shadow: var(--app-shadow-sm); +} + +.el-breadcrumb { + padding: 0; + background: transparent; + border: none; + border-radius: 0; +} diff --git a/src/assets/styles/vendors/element-plus/_popper.scss b/src/assets/styles/vendors/element-plus/_popper.scss new file mode 100644 index 0000000..3fad878 --- /dev/null +++ b/src/assets/styles/vendors/element-plus/_popper.scss @@ -0,0 +1,247 @@ +/* Popper-backed widgets: dropdowns, date pickers, popovers, autocomplete. */ + +.el-select__popper.el-popper, +.el-picker__popper.el-popper, +.el-autocomplete__popper.el-popper, +.el-cascader__dropdown, +.el-dropdown__popper.el-popper, +.el-popover.el-popper { + border: 1px solid var(--app-surface-border); + background: var(--app-surface-bg); + box-shadow: var(--app-shadow-md); +} + +.el-select__popper.el-popper, +.el-autocomplete__popper.el-popper, +.el-cascader__dropdown, +.el-dropdown__popper.el-popper, +.el-popover.el-popper { + padding: 8px; +} + +.el-select-dropdown__list, +.el-autocomplete-suggestion__list, +.el-cascader-menu { + padding: 0; +} + +.el-select-dropdown__item, +.el-autocomplete-suggestion li, +.el-cascader-node { + min-height: 38px; + margin: 2px 0; + border-radius: 10px; + color: var(--app-text-title); + line-height: 38px; + transition: + background-color 0.2s ease, + color 0.2s ease; +} + +.el-select-dropdown__item.hover, +.el-select-dropdown__item:hover, +.el-autocomplete-suggestion li:hover, +.el-cascader-node:not(.is-disabled):hover, +.el-cascader-node.in-active-path { + background: var(--app-accent-soft); + color: var(--app-accent-strong); +} + +.el-select-dropdown__item.is-selected, +.el-autocomplete-suggestion li.highlighted { + background: rgba(64, 158, 255, 0.12); + color: var(--app-accent-strong); + font-weight: 600; +} + +.el-select-dropdown__item.is-disabled, +.el-cascader-node.is-disabled { + opacity: 0.5; +} + +.el-tree-select__popper .el-tree-node__content { + display: flex; + align-items: center; +} + +.el-tree-select__popper .el-select-dropdown__item { + display: flex; + align-items: center; + flex: 1; + min-height: 20px; + height: 20px; + line-height: 20px; + margin: 0; + padding-left: 0; + background: transparent !important; +} + +.el-tree-select__popper .el-tree-node__expand-icon { + display: inline-flex; + align-items: center; + justify-content: center; + align-self: center; +} + +.el-autocomplete-suggestion li { + display: flex; + align-items: center; + padding: 0 12px; +} + +.el-autocomplete-suggestion li div { + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.el-cascader-menu { + min-width: 180px; + border-right-color: rgba(148, 163, 184, 0.12); +} + +.el-cascader-node__prefix, +.el-cascader-node__postfix { + color: var(--app-text-muted); +} + +.el-popper.is-dark { + border-color: rgba(15, 23, 42, 0.72); + background: rgba(15, 23, 42, 0.92); + color: #f8fafc; +} + +.el-popper.is-dark .el-popper__arrow::before { + background: rgba(15, 23, 42, 0.92); + border-color: rgba(15, 23, 42, 0.72); +} + +.el-popper.is-light { + border-color: var(--app-surface-border); + background: var(--app-surface-bg); +} + +.el-popper.is-light .el-popper__arrow::before { + background: var(--app-surface-bg); + border-color: var(--app-surface-border); +} + +.el-picker__popper.el-popper { + padding: 12px; +} + +.el-date-picker, +.el-date-range-picker, +.el-time-panel, +.el-time-range-picker, +.el-picker-panel { + background: transparent; + color: var(--app-text-title); +} + +.el-picker-panel__body-wrapper, +.el-date-range-picker__content { + background: transparent; +} + +.el-picker-panel__icon-btn, +.el-date-picker__header-label, +.el-date-range-picker__header-label { + color: var(--app-text-title); +} + +.el-date-table td, +.el-month-table td .cell, +.el-year-table td .cell { + border-radius: 10px; +} + +.el-date-table td.today .el-date-table-cell__text, +.el-month-table td.today .cell, +.el-year-table td.today .cell { + color: var(--app-accent-strong); + font-weight: 700; +} + +.el-date-table td.available:hover, +.el-month-table td .cell:hover, +.el-year-table td .cell:hover { + color: var(--app-accent-strong); + background: var(--app-accent-soft); +} + +.el-date-table td.current:not(.disabled) .el-date-table-cell__text, +.el-month-table td.current:not(.disabled) .cell, +.el-year-table td.current:not(.disabled) .cell { + background: var(--app-accent-strong); + color: #fff; +} + +.el-date-editor .el-range-separator { + color: var(--app-text-muted); +} + +.el-time-panel__content::before, +.el-time-panel__content::after { + border-color: rgba(148, 163, 184, 0.14); +} + +.el-scrollbar__thumb { + background: rgba(148, 163, 184, 0.42); +} + +.el-scrollbar__thumb:hover { + background: rgba(100, 116, 139, 0.56); +} + +.el-popover, +.el-tooltip__popper, +.el-popper { + border-radius: var(--app-radius-md); + box-shadow: var(--app-shadow-sm); +} + +.el-popover { + padding: 10px 12px; +} + +.el-tooltip__popper { + max-width: 320px; + padding: 8px 10px; + font-size: 12px; + line-height: 1.5; +} + +.el-popconfirm { + max-width: 320px; +} + +.el-popconfirm__main { + gap: 10px; + line-height: 1.6; + color: var(--app-text-title); +} + +.el-popconfirm__action { + display: flex; + justify-content: flex-end; + gap: 8px; + margin-top: 14px; +} + +.el-popconfirm__action .el-button { + margin-left: 0 !important; +} + +html.dark { + .el-popper.is-dark { + border-color: rgba(30, 41, 59, 0.92); + background: rgba(15, 23, 42, 0.96); + } + + .el-popper.is-dark .el-popper__arrow::before { + background: rgba(15, 23, 42, 0.96); + border-color: rgba(30, 41, 59, 0.92); + } +} diff --git a/src/assets/styles/vendors/element-plus/_primitives.scss b/src/assets/styles/vendors/element-plus/_primitives.scss new file mode 100644 index 0000000..7884ff6 --- /dev/null +++ b/src/assets/styles/vendors/element-plus/_primitives.scss @@ -0,0 +1,45 @@ +/* Shared Element Plus primitives used across multiple component overrides. */ + +.el-card, +.el-dialog, +.el-drawer, +.el-popover.el-popper, +.el-dropdown__popper .el-dropdown-menu, +.el-picker__popper, +.el-select__popper.el-popper { + border-radius: var(--app-radius-lg); + border-color: var(--app-surface-border); + box-shadow: var(--app-shadow-md); +} + +.el-card, +.el-dialog, +.el-drawer { + background: var(--app-surface-bg); +} + +.el-button { + font-weight: 500; +} + +.el-button--primary { + --el-button-bg-color: var(--app-accent-strong); + --el-button-border-color: var(--app-accent-strong); + --el-button-hover-bg-color: #4a7cff; + --el-button-hover-border-color: #4a7cff; + --el-button-active-bg-color: #2e5ce0; + --el-button-active-border-color: #2e5ce0; +} + +.el-table { + --el-table-border-color: var(--app-surface-border); + --el-table-header-bg-color: var(--tableHeaderBg); + --el-table-tr-bg-color: transparent; + background: transparent; +} + +.el-input__wrapper, +.el-textarea__inner, +.el-select__wrapper { + box-shadow: 0 0 0 1px var(--el-border-color) inset; +} diff --git a/src/assets/styles/vendors/element-plus/_shell.scss b/src/assets/styles/vendors/element-plus/_shell.scss new file mode 100644 index 0000000..e1601c4 --- /dev/null +++ b/src/assets/styles/vendors/element-plus/_shell.scss @@ -0,0 +1,110 @@ +/* Drawers, loading masks, descriptions, trees, and empty states. */ + +.el-drawer { + border-radius: var(--app-radius-lg); + box-shadow: var(--app-shadow-md); + border: 1px solid var(--app-surface-border); +} + +.el-drawer__header { + margin-bottom: 0; + padding: 18px 20px 16px; + border-bottom: 1px solid rgba(148, 163, 184, 0.14); + background: var(--app-elevated-soft-bg); + color: var(--app-text-title); +} + +.el-drawer__title { + font-size: 16px; + font-weight: 600; + color: var(--app-text-title); +} + +.el-drawer__body { + padding: 18px 20px 20px; +} + +.el-drawer__close-btn { + width: 32px; + height: 32px; + border-radius: 10px; + background: var(--app-elevated-close-bg); + color: var(--app-text-muted); + transition: + background-color 0.2s ease, + color 0.2s ease, + transform 0.2s ease; + + &:hover { + background: var(--app-elevated-close-hover-bg); + color: var(--app-accent-strong); + transform: translateY(-1px); + } +} + +.el-loading-mask { + background: rgba(248, 250, 252, 0.76); + backdrop-filter: blur(4px); +} + +.el-loading-spinner .path { + stroke: var(--app-accent-strong); +} + +.el-descriptions { + --el-descriptions-table-border: rgba(148, 163, 184, 0.14); +} + +.el-descriptions__body .el-descriptions__table { + border-radius: 12px; + overflow: hidden; +} + +.el-descriptions__label.el-descriptions__cell { + background: var(--app-elevated-soft-bg) !important; + color: var(--app-text-title); + font-weight: 600; +} + +.el-descriptions__content.el-descriptions__cell { + color: var(--app-text-title); +} + +.el-tree { + color: var(--app-text-title); + background: transparent; +} + +.el-tree-node__content { + min-height: 34px; + margin: 2px 0; + border-radius: 10px; + transition: + background-color 0.2s ease, + color 0.2s ease; +} + +.el-tree-node__content:hover, +.el-tree-node.is-current > .el-tree-node__content { + background: var(--app-accent-soft); +} + +.el-empty__image { + opacity: 0.9; +} + +.el-empty__description p { + color: var(--app-text-muted); +} + +.el-color-dropdown { + border-radius: 16px; + border: 1px solid var(--app-surface-border); + box-shadow: var(--app-shadow-md); +} + +html.dark { + .el-loading-mask { + background: rgba(6, 11, 22, 0.7); + } +} diff --git a/src/components/RoleSelect/index.vue b/src/components/RoleSelect/index.vue index 49b9498..30fa7b6 100644 --- a/src/components/RoleSelect/index.vue +++ b/src/components/RoleSelect/index.vue @@ -259,64 +259,11 @@ defineExpose({ diff --git a/src/components/UserSelect/index.vue b/src/components/UserSelect/index.vue index b96faa1..06e7843 100644 --- a/src/components/UserSelect/index.vue +++ b/src/components/UserSelect/index.vue @@ -328,19 +328,18 @@ defineExpose({ diff --git a/src/views/demo/demo/index.vue b/src/views/demo/demo/index.vue index 5653e76..1da45ab 100644 --- a/src/views/demo/demo/index.vue +++ b/src/views/demo/demo/index.vue @@ -1,26 +1,26 @@