yunzerwebsite/yunzer_go
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成租户登录

Browse Source
This commit is contained in:
hero920103
2025-10-29 23:07:53 +08:00
parent b9938b4c0d
commit ddf90424ba
43 changed files with 7761 additions and 474 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pc/src/assets/less/style.less
+743 -9
View File
@@ -54,6 +54,16 @@
--card-bg-color: #ffffff;
--card-border-color: #ebeef5;
// container-box 亮色主题
--container-box-bg: #fff;
--container-box-border: #ebeef5;
--container-box-shadow: 0 2px 8px 0 rgba(0,0,0,0.04);
// 滚动条颜色
--scrollbar-track-color: #f1f1f1;
--scrollbar-thumb-color: #c1c1c1;
--scrollbar-thumb-hover-color: #a8a8a8;
// Element Plus 组件主题适配
--el-bg-color: var(--bg-color);
--el-bg-color-page: var(--bg-color-page);
@@ -125,6 +135,16 @@
// 卡片背景
--card-bg-color: #252526;
--card-border-color: #3c3c3d;
// container-box 暗色主题
--container-box-bg: #232325;
--container-box-border: #363637;
--container-box-shadow: 0 2px 8px 0 rgba(0,0,0,0.09);
// 滚动条颜色
--scrollbar-track-color: #2d2d2d;
--scrollbar-thumb-color: #555555;
--scrollbar-thumb-hover-color: #666666;
// Element Plus 组件主题适配
--el-bg-color: var(--bg-color);
@@ -150,6 +170,12 @@ body {
transition: background-color 0.3s ease, color 0.3s ease;
}
.header-bar {
display: flex;
align-items: center;
justify-content: space-between;
}
// 卡片样式
.el-card {
background-color: var(--card-bg-color);
@@ -157,6 +183,19 @@ body {
color: var(--text-color-primary);
}
// container-box样式
.container-box {
background-color: var(--container-box-bg);
border: 1px solid var(--container-box-border);
box-shadow: var(--container-box-shadow);
border-radius: 8px;
padding: 24px;
transition:
background-color 0.3s,
border-color 0.3s,
box-shadow 0.3s;
}
// 输入框样式
.el-input__inner {
background-color: var(--fill-color-blank);
@@ -168,24 +207,427 @@ body {
}
}
// 按钮样式过渡
// 按钮样式（全局主题适配）
.el-button {
transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
// 默认按钮
&.el-button--default {
background-color: var(--fill-color-blank) !important;
border-color: var(--border-color) !important;
color: var(--text-color-primary) !important;
&:hover:not(:disabled) {
background-color: var(--fill-color-light) !important;
border-color: var(--primary-color) !important;
color: var(--primary-color) !important;
}
&:disabled {
background-color: var(--fill-color) !important;
border-color: var(--border-color-lighter) !important;
color: var(--text-color-disabled) !important;
}
}
// 文本按钮
&.el-button--text {
color: var(--text-color-primary) !important;
&:hover:not(:disabled) {
background-color: var(--fill-color-light) !important;
color: var(--primary-color) !important;
}
&:disabled {
color: var(--text-color-disabled) !important;
}
}
}
// 表格样式
// 表格样式（全局主题适配）
.el-table {
background-color: var(--bg-color);
color: var(--text-color-primary);
background-color: var(--bg-color) !important;
color: var(--text-color-primary) !important;
border-color: var(--border-color-lighter) !important;
th {
background-color: var(--fill-color-light);
color: var(--text-color-primary);
// 表头
th.el-table__cell {
background-color: var(--fill-color-light) !important;
color: var(--text-color-primary) !important;
border-bottom-color: var(--border-color) !important;
}
td {
border-color: var(--border-color-lighter);
// 表格行
tr {
background-color: var(--bg-color) !important;
// 鼠标悬停
&:hover > td {
background-color: var(--fill-color-lighter) !important;
}
}
// 表格单元格
td.el-table__cell {
border-bottom-color: var(--border-color-lighter) !important;
color: var(--text-color-primary) !important;
}
// 斑马纹表格
&.el-table--striped {
.el-table__body tr.el-table__row--striped td {
background-color: var(--fill-color-extra-light) !important;
}
.el-table__body tr.el-table__row--striped:hover td {
background-color: var(--fill-color-lighter) !important;
}
}
// 边框表格
&.el-table--border {
border-color: var(--border-color-lighter) !important;
&::after,
&::before {
background-color: var(--border-color-lighter) !important;
}
th.el-table__cell,
td.el-table__cell {
border-right-color: var(--border-color-lighter) !important;
}
}
// 空状态
.el-table__empty-block {
background-color: var(--bg-color) !important;
color: var(--text-color-secondary) !important;
}
// 空状态文字
.el-table__empty-text {
color: var(--text-color-secondary) !important;
}
}
// 标签样式（全局主题适配）
.el-tag {
background-color: var(--fill-color-light) !important;
border-color: var(--border-color-lighter) !important;
color: var(--text-color-primary) !important;
}
// 对话框样式（全局主题适配）
.el-dialog {
background-color: var(--bg-color) !important;
border-color: var(--border-color) !important;
.el-dialog__header {
border-bottom-color: var(--border-color-lighter) !important;
color: var(--text-color-primary) !important;
}
.el-dialog__title {
color: var(--text-color-primary) !important;
}
.el-dialog__body {
background-color: var(--bg-color) !important;
color: var(--text-color-primary) !important;
}
.el-dialog__footer {
border-top-color: var(--border-color-lighter) !important;
}
}
// MessageBox 确认框样式（全局主题适配）
.el-overlay.is-message-box {
background-color: rgba(0, 0, 0, 0.5) !important;
&[data-theme="dark"] {
background-color: rgba(0, 0, 0, 0.7) !important;
}
}
.el-message-box {
background-color: var(--bg-color) !important;
.el-message-box__header {
.el-message-box__title {
color: var(--text-color-primary) !important;
}
}
.el-message-box__content {
color: var(--text-color-primary) !important;
.el-message-box__message {
color: var(--text-color-primary) !important;
p {
color: var(--text-color-primary) !important;
}
}
}
}
// 描述列表样式（全局主题适配）
.el-descriptions {
.el-descriptions__header {
.el-descriptions__title {
color: var(--text-color-primary) !important;
}
}
.el-descriptions__table {
.el-descriptions__label {
background-color: var(--fill-color-light) !important;
color: var(--text-color-primary) !important;
border-color: var(--border-color-lighter) !important;
}
.el-descriptions__content {
background-color: var(--bg-color) !important;
color: var(--text-color-primary) !important;
border-color: var(--border-color-lighter) !important;
}
td.el-descriptions__label,
td.el-descriptions__content {
border-color: var(--border-color-lighter) !important;
}
}
}
// 表单样式（全局主题适配）
.el-form {
.el-form-item__label {
color: var(--text-color-primary) !important;
}
.el-form-item__error {
color: var(--danger-color) !important;
}
}
// 选择器样式（全局主题适配）
.el-select {
// Element Plus 2.x 使用 el-select__wrapper
.el-select__wrapper {
background-color: var(--fill-color-blank) !important;
border-color: var(--border-color) !important;
border: 1px solid var(--border-color) !important;
box-shadow: none !important;
&:hover {
box-shadow: 0 0 0 1px var(--border-color) inset !important;
}
&.is-focus {
box-shadow: 0 0 0 1px var(--primary-color) inset !important;
}
}
// 如果选择器内部使用了 el-input__wrapper（兼容性处理）
.el-input__wrapper {
background-color: var(--fill-color-blank) !important;
border-color: var(--border-color) !important;
border: 1px solid var(--border-color) !important;
box-shadow: none !important;
&:hover {
box-shadow: 0 0 0 1px var(--border-color) inset !important;
}
&.is-focus {
box-shadow: 0 0 0 1px var(--primary-color) inset !important;
}
}
.el-input__inner {
background-color: transparent !important;
color: var(--text-color-primary) !important;
}
.el-input__suffix {
.el-input__suffix-inner {
.el-select__caret {
color: var(--text-color-secondary) !important;
}
}
}
}
// 选择器下拉菜单样式（全局主题适配）
.el-select-dropdown,
.el-select-dropdown__wrap {
background-color: var(--bg-color-overlay) !important;
border-color: var(--border-color) !important;
.el-select-dropdown__item {
color: var(--text-color-primary) !important;
&:hover {
background-color: var(--fill-color-light) !important;
color: var(--text-color-primary) !important;
}
&.selected {
color: var(--primary-color) !important;
font-weight: 700;
}
&.is-disabled {
color: var(--text-color-disabled) !important;
&:hover {
background-color: transparent !important;
}
}
}
.el-select-dropdown__empty {
color: var(--text-color-secondary) !important;
}
}
// Element Plus Popper 组件样式（全局主题适配，用于所有通过 Popper 渲染的下拉组件）
.el-popper,
.el-popper__arrow::before {
background-color: var(--bg-color-overlay) !important;
border-color: var(--border-color) !important;
}
.el-popper.is-dark {
background-color: var(--bg-color-overlay) !important;
color: var(--text-color-primary) !important;
}
// 输入框组件样式（全局主题适配，兼容 Element Plus 2.x）
.el-input {
.el-input__wrapper {
background-color: var(--fill-color-blank) !important;
border-color: var(--border-color) !important;
border: 1px solid var(--border-color) !important;
box-shadow: none !important;
&:hover {
box-shadow: 0 0 0 1px var(--border-color) inset !important;
}
&.is-focus {
box-shadow: 0 0 0 1px var(--primary-color) inset !important;
}
}
.el-input__inner {
background-color: transparent !important;
color: var(--text-color-primary) !important;
&::placeholder {
color: var(--text-color-placeholder) !important;
}
}
}
// 文本域样式（全局主题适配）
.el-textarea {
.el-textarea__inner {
background-color: var(--fill-color-blank) !important;
border-color: var(--border-color) !important;
color: var(--text-color-primary) !important;
&::placeholder {
color: var(--text-color-placeholder) !important;
}
&:focus {
border-color: var(--primary-color) !important;
}
}
}
// 单选按钮组样式（全局主题适配）
.el-radio-group {
.el-radio {
color: var(--text-color-primary) !important;
.el-radio__label {
color: var(--text-color-primary) !important;
}
&.is-checked {
.el-radio__label {
color: var(--primary-color) !important;
}
}
}
}
// 数字输入框样式（全局主题适配）
.el-input-number {
.el-input__wrapper {
background-color: var(--fill-color-blank) !important;
border-color: var(--border-color) !important;
.el-input__inner {
background-color: transparent !important;
color: var(--text-color-primary) !important;
}
}
.el-input-number__decrease,
.el-input-number__increase {
background-color: var(--fill-color-light) !important;
border-color: var(--border-color) !important;
color: var(--text-color-primary) !important;
&:hover:not(.is-disabled) {
background-color: var(--fill-color) !important;
color: var(--primary-color) !important;
}
&.is-disabled {
background-color: var(--fill-color) !important;
color: var(--text-color-disabled) !important;
}
}
}
// 开关组件样式（全局主题适配）
.el-switch {
--el-switch-on-color: var(--primary-color);
--el-switch-off-color: var(--fill-color-dark);
.el-switch__core {
background-color: var(--fill-color-dark) !important;
border-color: var(--border-color) !important;
}
&.is-checked {
.el-switch__core {
background-color: var(--primary-color) !important;
border-color: var(--primary-color) !important;
}
}
&.is-disabled {
.el-switch__core {
background-color: var(--fill-color) !important;
border-color: var(--border-color-lighter) !important;
opacity: 0.6;
}
}
}
// 警告提示样式（全局主题适配）
.el-alert {
background-color: var(--fill-color-light) !important;
border-color: var(--border-color-lighter) !important;
color: var(--text-color-primary) !important;
}
// 菜单样式
@@ -377,3 +819,295 @@ body {
}
}
// 滚动条样式（全局）
// WebKit 浏览器（Chrome, Safari, Edge）
* {
// Firefox 滚动条样式
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
// WebKit 滚动条样式
&::-webkit-scrollbar {
width: 8px;
height: 8px;
}
&::-webkit-scrollbar-track {
background: var(--scrollbar-track-color);
border-radius: 4px;
}
&::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb-color);
border-radius: 4px;
transition: background-color 0.3s ease;
&:hover {
background: var(--scrollbar-thumb-hover-color);
}
}
&::-webkit-scrollbar-corner {
background: var(--scrollbar-track-color);
}
}
// 更细的滚动条样式（可选）
.thin-scrollbar {
scrollbar-width: thin;
&::-webkit-scrollbar {
width: 6px;
height: 6px;
}
}
.pagination-bar {
display: flex;
justify-content: flex-end;
margin: 14px 0 0 0;
}
/* 标准文章样式 支持黑白主题 */
.markdown-body {
color: var(--text-color, #222);
font-size: 16px;
line-height: 1.8;
word-break: break-word;
background: var(--content-bg);
transition: color 0.3s, background 0.3s;
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--title-color, var(--text-color, #222));
margin-top: 1.6em;
margin-bottom: 0.8em;
font-family: inherit;
font-weight: 700;
line-height: 1.3;
transition: color 0.3s;
}
h1 {
font-size: 2.2em;
border-bottom: 1px solid var(--border-color-light, #eaecef);
padding-bottom: 0.4em;
}
h2 {
font-size: 1.8em;
border-bottom: 1px solid var(--border-color-light, #eaecef);
padding-bottom: 0.3em;
}
h3 {
font-size: 1.4em;
}
h4 {
font-size: 1.2em;
}
h5 {
font-size: 1.06em;
}
h6 {
font-size: 1em;
color: var(--text-color-secondary, #969696);
}
p {
margin: 0.9em 0;
color: inherit;
}
ul,
ol {
padding-left: 2em;
margin: 0.9em 0;
}
ul {
list-style-type: disc;
}
ol {
list-style-type: decimal;
}
li {
margin: 0.7em 0 0.7em 0.7em;
color: inherit;
}
a {
color: var(--primary-color, #2d8cf0);
text-decoration: underline;
transition: color 0.2s;
&:hover {
color: var(--primary-hover, #1a73e8);
}
}
img {
max-width: 100%;
height: auto;
display: block;
margin: 1em auto;
border-radius: 4px;
background: var(--img-bg, #f7f7fa);
}
blockquote {
border-left: 4px solid var(--blockquote-border, #d0dde9);
background: var(--blockquote-bg, #f7f9fa);
padding: 0.6em 1.2em;
margin: 1.1em 0;
color: var(--blockquote-color, #6580a0);
font-style: italic;
transition: background 0.3s, border-color 0.3s, color 0.3s;
}
code {
font-family: var(
--code-font,
"Fira Mono",
"Menlo",
"Consolas",
"monospace"
);
background: var(--code-bg, #f4f4f4);
border-radius: 3px;
padding: 0.15em 0.4em;
color: var(--code-color, #c7254e);
font-size: 0.97em;
margin: 0 0.1em;
transition: background 0.3s, color 0.3s;
}
pre {
background: var(--pre-bg, #f6f8fa);
border-radius: 4px;
padding: 1em 1.2em;
font-family: var(
--code-font,
"Fira Mono",
"Menlo",
"Consolas",
"monospace"
);
font-size: 0.98em;
overflow-x: auto;
color: var(--pre-color, #212529);
margin: 1.2em 0;
transition: background 0.3s, color 0.3s;
code {
background: none;
color: inherit;
font-size: inherit;
padding: 0;
}
}
table {
width: 100%;
border-collapse: collapse;
margin: 1.2em 0;
color: inherit;
font-size: 1em;
background: var(--table-bg, #fff);
transition: background 0.3s;
}
th,
td {
border: 1px solid var(--table-border, #dee2e6);
padding: 0.5em 1em;
color: inherit;
}
th {
background: var(--table-head-bg, #f4f8fb);
font-weight: 600;
}
tr:nth-child(even) {
background: var(--table-row-even-bg, #f9fbfc);
}
hr {
border: none;
border-top: 1px solid var(--border-color-light, #eaecef);
margin: 2em 0;
}
br {
display: block;
margin: 0.2em 0;
content: "";
}
// 兼容 Element 表单
.el-form-item__label,
.el-form-item__content,
.el-form-item__error,
.el-form-item__error-tip {
color: var(--text-color, #222);
}
}
/* 深色主题支持 */
.dark .markdown-body {
color: #fff;
background: #181b21;
h1,
h2,
h3,
h4,
h5,
h6 {
color: #fff;
}
h6 {
color: #ccc;
}
a {
color: #fff;
&:hover {
color: #e6e6e6;
}
}
img {
background: #23272b;
}
blockquote {
border-left-color: #5d7896;
background: #232a33;
color: #cce3fa;
}
code {
background: #31343b;
color: #fff;
}
pre {
background: #23272d;
color: #fff;
}
table {
background: #23272b;
}
th,
td {
border-color: #333b47;
color: #fff;
}
th {
background: #273041;
}
tr:nth-child(even) {
background: #20232a;
}
hr {
border-top-color: #333b47;
}
// Element兼容
.el-form-item__label,
.el-form-item__content,
.el-form-item__error,
.el-form-item__error-tip {
color: #fff;
}
}