feat: add system quality improvement plan and implementation
This commit is contained in:
张翔
@@ -0,0 +1,712 @@
|
||||
:root {
|
||||
--el-color-primary: #409eff;
|
||||
--el-color-primary-light-9: #53a8ff;
|
||||
--el-color-primary-light-3: #79bbff;
|
||||
--el-color-primary-dark-2: #337ecc;
|
||||
--el-color-success: #67c23a;
|
||||
--el-color-success-light-9: #85ce61;
|
||||
--el-color-success-light-3: #a0daee;
|
||||
--el-color-success-dark-2: #529b2e;
|
||||
--el-color-warning: #e6a23c;
|
||||
--el-color-warning-light-9: #ebb563;
|
||||
--el-color-warning-light-3: #f0c78a;
|
||||
--el-color-warning-dark-2: #b88230;
|
||||
--el-color-danger: #f56c6c;
|
||||
--el-color-danger-light-9: #f78989;
|
||||
--el-color-danger-light-3: #dd6161;
|
||||
--el-color-danger-dark-2: #c45656;
|
||||
--el-color-info: #909399;
|
||||
--el-color-info-light-9: #a6a9ad;
|
||||
--el-color-info-light-3: #c8c9cc;
|
||||
--el-color-info-dark-2: #73767a;
|
||||
|
||||
--border-radius-base: 8px;
|
||||
--border-radius-large: 12px;
|
||||
--border-radius-small: 4px;
|
||||
--border-radius-circle: 50%;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.el-card {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.el-card:hover {
|
||||
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.12);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.el-button {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.el-button--primary {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.el-button--primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.el-input__wrapper {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.el-input__wrapper:hover {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.el-select .el-input__wrapper {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-table {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.el-table th {
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.el-table tr {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.el-table tr:hover {
|
||||
background-color: #f0f9ff !important;
|
||||
}
|
||||
|
||||
.el-table .el-table__cell {
|
||||
border-radius: var(--border-radius-small);
|
||||
}
|
||||
|
||||
.el-pagination {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-pagination .el-pager li {
|
||||
border-radius: var(--border-radius-small) !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.el-pagination .el-pager li:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.el-dialog {
|
||||
border-radius: var(--border-radius-large) !important;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.el-dialog__header {
|
||||
border-radius: var(--border-radius-large) var(--border-radius-large) 0 0 !important;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.el-form-item__label {
|
||||
font-weight: 500;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.el-menu-item {
|
||||
border-radius: var(--border-radius-small) !important;
|
||||
margin: 4px 8px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.el-menu-item:hover {
|
||||
background: linear-gradient(135deg, #667eea20 0%, #764ba220 100%);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.el-menu-item.is-active {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-statistic {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.el-statistic:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.el-timeline-item__tail {
|
||||
border-radius: var(--border-radius-small);
|
||||
}
|
||||
|
||||
.el-timeline-item__node {
|
||||
border-radius: var(--border-radius-circle) !important;
|
||||
}
|
||||
|
||||
.el-tag {
|
||||
border-radius: var(--border-radius-small) !important;
|
||||
padding: 4px 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.el-tag--success {
|
||||
background: linear-gradient(135deg, #67c23a 0%, #5daf34 100%);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.el-tag--warning {
|
||||
background: linear-gradient(135deg, #e6a23c 0%, #d93026 100%);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.el-tag--info {
|
||||
background: linear-gradient(135deg, #909399 0%, #73767a 100%);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.el-descriptions {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-descriptions__label {
|
||||
font-weight: 600;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.el-message-box {
|
||||
border-radius: var(--border-radius-large) !important;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.el-notification {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.el-drawer {
|
||||
border-radius: var(--border-radius-large) var(--border-radius-large) 0 0 !important;
|
||||
}
|
||||
|
||||
.el-switch {
|
||||
border-radius: var(--border-radius-circle) !important;
|
||||
}
|
||||
|
||||
.el-checkbox {
|
||||
border-radius: var(--border-radius-small) !important;
|
||||
}
|
||||
|
||||
.el-radio {
|
||||
border-radius: var(--border-radius-small) !important;
|
||||
}
|
||||
|
||||
.el-upload {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-upload-dragger {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
border: 2px dashed #dcdfe6;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.el-upload-dragger:hover {
|
||||
border-color: #667eea;
|
||||
background: #f0f9ff;
|
||||
}
|
||||
|
||||
.el-progress-bar__inner {
|
||||
border-radius: var(--border-radius-small) !important;
|
||||
}
|
||||
|
||||
.el-progress-bar {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-rate__icon {
|
||||
border-radius: var(--border-radius-small) !important;
|
||||
}
|
||||
|
||||
.el-slider__runway {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-slider__button {
|
||||
border-radius: var(--border-radius-circle) !important;
|
||||
}
|
||||
|
||||
.el-avatar {
|
||||
border-radius: var(--border-radius-circle) !important;
|
||||
}
|
||||
|
||||
.el-badge__content {
|
||||
border-radius: var(--border-radius-circle) !important;
|
||||
}
|
||||
|
||||
.el-breadcrumb {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.el-breadcrumb__item {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.el-breadcrumb__item:hover {
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.el-divider {
|
||||
border-radius: var(--border-radius-small) !important;
|
||||
}
|
||||
|
||||
.el-empty {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-result {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-alert {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.el-alert--success {
|
||||
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
|
||||
}
|
||||
|
||||
.el-alert--warning {
|
||||
background: linear-gradient(135deg, #fdf6ec 0%, #fef0f0 100%);
|
||||
}
|
||||
|
||||
.el-alert--error {
|
||||
background: linear-gradient(135deg, #fef0f0 0%, #fde2e2 100%);
|
||||
}
|
||||
|
||||
.el-alert--info {
|
||||
background: linear-gradient(135deg, #f4f4f5 0%, #e9e9eb 100%);
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
border-radius: var(--border-radius-base) var(--border-radius-base) 0 0 !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.el-tabs__item:hover {
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.el-tabs__item.is-active {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-collapse {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-collapse-item__header {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.el-collapse-item__header:hover {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.el-popover {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.el-tooltip__popper {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-dropdown-menu {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.el-dropdown-menu__item {
|
||||
border-radius: var(--border-radius-small) !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.el-dropdown-menu__item:hover {
|
||||
background: linear-gradient(135deg, #667eea20 0%, #764ba220 100%);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.el-tree-node__content {
|
||||
border-radius: var(--border-radius-small) !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.el-tree-node__content:hover {
|
||||
background: #f0f9ff;
|
||||
}
|
||||
|
||||
.el-transfer-panel {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-cascader-panel {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-color-picker__panel {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-date-picker {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-picker-panel {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.el-calendar {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-image {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-skeleton {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-backtop {
|
||||
border-radius: var(--border-radius-circle) !important;
|
||||
}
|
||||
|
||||
.el-affix {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-space {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-tour {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-segmented {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-timeline {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-timeline-item {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-scrollbar {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-main {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-header {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-footer {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-aside {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-container {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-col {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-form {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-input-number {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-select-dropdown {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.el-option {
|
||||
border-radius: var(--border-radius-small) !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.el-option:hover {
|
||||
background: #f0f9ff;
|
||||
}
|
||||
|
||||
.el-option-group {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-option-group__title {
|
||||
border-radius: var(--border-radius-base) var(--border-radius-base) 0 0 !important;
|
||||
}
|
||||
|
||||
.el-checkbox-group {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-checkbox-button {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-radio-group {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-radio-button {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-check-tag {
|
||||
border-radius: var(--border-radius-small) !important;
|
||||
}
|
||||
|
||||
.el-select-v2 {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-select-dropdown-v2 {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-select-dropdown-v2__item {
|
||||
border-radius: var(--border-radius-small) !important;
|
||||
}
|
||||
|
||||
.el-select-dropdown-v2__item:hover {
|
||||
background: #f0f9ff;
|
||||
}
|
||||
|
||||
.el-table-v2 {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-table-column {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-table-v2__row {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.el-table-v2__row:hover {
|
||||
background: #f0f9ff !important;
|
||||
}
|
||||
|
||||
.el-page-header {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-overlay {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-notification__group {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-notification__icon {
|
||||
border-radius: var(--border-radius-circle) !important;
|
||||
}
|
||||
|
||||
.el-notification__content {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-notification__closeBtn {
|
||||
border-radius: var(--border-radius-circle) !important;
|
||||
}
|
||||
|
||||
.el-message {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.el-message__icon {
|
||||
border-radius: var(--border-radius-circle) !important;
|
||||
}
|
||||
|
||||
.el-message__content {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-message-box__btns {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-menu-item-group {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-menu-item-group__title {
|
||||
border-radius: var(--border-radius-base) var(--border-radius-base) 0 0 !important;
|
||||
}
|
||||
|
||||
.el-mention {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-loading-spinner {
|
||||
border-radius: var(--border-radius-circle) !important;
|
||||
}
|
||||
|
||||
.el-link {
|
||||
border-radius: var(--border-radius-small) !important;
|
||||
}
|
||||
|
||||
.el-input-tag {
|
||||
border-radius: var(--border-radius-small) !important;
|
||||
}
|
||||
|
||||
.el-infinite-scroll {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-image-viewer {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
border-radius: var(--border-radius-small) !important;
|
||||
}
|
||||
|
||||
.el-result__icon {
|
||||
border-radius: var(--border-radius-circle) !important;
|
||||
}
|
||||
|
||||
.el-result__title {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-result__subtitle {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-result__extra {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-result__content {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-descriptions-item {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-descriptions-item__label {
|
||||
border-radius: var(--border-radius-base) var(--border-radius-base) 0 0 !important;
|
||||
}
|
||||
|
||||
.el-descriptions-item__content {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-descriptions-item__cell {
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.el-date-picker__header {
|
||||
border-radius: var(--border-radius-base) var(--border-radius-base) 0 0 !important;
|
||||
}
|
||||
|
||||
.el-date-picker__header-label {
|
||||
border-radius: var(--border-radius-small) !important;
|
||||
}
|
||||
|
||||
.el-date-picker__time-header {
|
||||
border-radius: var(--border-radius-base) var(--border-radius-base) 0 0 !important;
|
||||
}
|
||||
|
||||
.el-date-picker__time-picker-option {
|
||||
border-radius: var(--border-radius-small) !important;
|
||||
}
|
||||
|
||||
.el-date-picker__time-picker-option:hover {
|
||||
background: #f0f9ff;
|
||||
}
|
||||
|
||||
.el-date-picker__time-picker-option.is-selected {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-date-picker__time-picker-option.is-disabled {
|
||||
background: #f5f7fa;
|
||||
color: #c0c4cc;
|
||||
}
|
||||
|
||||
.el-date-picker__time-picker-option.is-disabled:hover {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.el-date-picker__time-picker-option.is-disabled.is-selected {
|
||||
background: #f5f7fa;
|
||||
color: #c0c4cc;
|
||||
}
|
||||
|
||||
.el-date-picker__time-picker-option.is-disabled.is-selected:hover {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
Reference in New Issue
Block a user