refactor(ui): 界面升级与代码规范优化

2026-06-18 18:38:12 +08:00
parent 288ea9b43d
commit 14035cfa4d
130 changed files with 7813 additions and 5893 deletions
--- a/src/styles/vendors.scss
+++ b/src/styles/vendors.scss
@@ -0,0 +1,118 @@
+/**
+ * 第三方组件样式适配
+ */
+
+// NProgress 进度条样式
+#nprogress .bar {
+  background-color: var(--el-color-primary);
+}
+
+// VxeTable 变量覆写
+:root {
+  --vxe-font-color: var(--el-text-color-regular);
+  --vxe-primary-color: var(--el-color-primary);
+  --vxe-success-color: var(--el-color-success);
+  --vxe-info-color: var(--el-color-info);
+  --vxe-warning-color: var(--el-color-warning);
+  --vxe-danger-color: var(--el-color-danger);
+  --vxe-font-lighten-color: var(--el-text-color-primary);
+  --vxe-primary-lighten-color: var(--el-color-primary-light-3);
+  --vxe-success-lighten-color: var(--el-color-success-light-3);
+  --vxe-info-lighten-color: var(--el-color-info-light-3);
+  --vxe-warning-lighten-color: var(--el-color-warning-light-3);
+  --vxe-danger-lighten-color: var(--el-color-danger-light-3);
+  --vxe-font-darken-color: var(--el-text-color-secondary);
+  --vxe-primary-darken-color: var(--el-color-primary-dark-2);
+  --vxe-success-darken-color: var(--el-color-success-dark-2);
+  --vxe-info-darken-color: var(--el-color-info-dark-2);
+  --vxe-warning-darken-color: var(--el-color-warning-dark-2);
+  --vxe-danger-darken-color: var(--el-color-danger-dark-2);
+  --vxe-font-disabled-color: var(--el-text-color-disabled);
+  --vxe-primary-disabled-color: var(--el-color-primary-light-5);
+  --vxe-success-disabled-color: var(--el-color-success-light-5);
+  --vxe-info-disabled-color: var(--el-color-info-light-5);
+  --vxe-warning-disabled-color: var(--el-color-warning-light-5);
+  --vxe-danger-disabled-color: var(--el-color-danger-light-5);
+  --vxe-input-border-color: var(--el-border-color);
+  --vxe-input-disabled-color: var(--el-text-color-disabled);
+  --vxe-input-disabled-background-color: var(--el-fill-color-light);
+  --vxe-input-placeholder-color: var(--el-text-color-placeholder);
+  --vxe-table-popup-border-color: var(--el-border-color);
+  --vxe-table-header-font-color: var(--el-text-color-regular);
+  --vxe-table-footer-font-color: var(--el-text-color-regular);
+  --vxe-table-border-color: var(--el-border-color-lighter);
+  --vxe-table-header-background-color: var(--el-bg-color);
+  --vxe-table-body-background-color: var(--el-bg-color);
+  --vxe-table-footer-background-color: var(--el-bg-color);
+  --vxe-table-row-hover-background-color: var(--el-fill-color-light);
+  --vxe-table-row-current-background-color: var(--el-fill-color-light);
+  --vxe-table-row-hover-current-background-color: var(--el-fill-color-light);
+  --vxe-table-checkbox-range-background-color: var(--el-fill-color-light);
+  --vxe-table-menu-background-color: var(--el-bg-color-overlay);
+  --vxe-loading-color: var(--el-color-primary);
+  --vxe-loading-background-color: var(--el-mask-color);
+  --vxe-table-validate-error-color: var(--el-color-danger);
+  --vxe-toolbar-background-color: var(--el-bg-color);
+  --vxe-toolbar-custom-active-background-color: var(--el-bg-color-overlay);
+  --vxe-toolbar-panel-background-color: var(--el-bg-color-overlay);
+  --vxe-pager-background-color: var(--el-bg-color);
+  --vxe-modal-header-background-color: var(--el-bg-color);
+  --vxe-modal-body-background-color: var(--el-bg-color);
+  --vxe-modal-border-color: var(--el-border-color);
+  --vxe-button-default-background-color: var(--el-bg-color-overlay);
+  --vxe-input-background-color: var(--el-fill-color-blank);
+  --vxe-input-panel-background-color: var(--el-fill-color-blank);
+  --vxe-form-background-color: var(--el-bg-color);
+  --vxe-form-validate-error-color: var(--el-color-danger);
+  --vxe-select-option-hover-background-color: var(--el-bg-color-overlay);
+  --vxe-select-panel-background-color: var(--el-bg-color);
+}
+
+// VxeTable 自定义样式
+.vxe-grid {
+  &--form-wrapper .vxe-form {
+    padding: 10px 20px;
+    margin-bottom: 20px;
+  }
+
+  &--toolbar-wrapper .vxe-toolbar {
+    padding: 20px;
+  }
+
+  &--pager-wrapper .vxe-pager {
+    height: 70px;
+    padding: 0 20px;
+
+    &--wrapper {
+      @media screen and (width <= 768px) {
+        .vxe-pager--total,
+        .vxe-pager--sizes,
+        .vxe-pager--jump,
+        .vxe-pager--jump-prev,
+        .vxe-pager--jump-next {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
+// WangEditor 暗黑模式
+html.dark {
+  --w-e-textarea-bg-color: var(--el-bg-color);
+  --w-e-textarea-color: var(--el-text-color-primary);
+  --w-e-textarea-border-color: var(--el-border-color);
+  --w-e-textarea-slight-border-color: var(--el-border-color-lighter);
+  --w-e-textarea-slight-color: var(--el-text-color-secondary);
+  --w-e-textarea-slight-bg-color: var(--el-bg-color-overlay);
+  --w-e-textarea-selected-border-color: var(--el-color-info-light-5);
+  --w-e-textarea-handler-bg-color: var(--el-color-primary);
+  --w-e-toolbar-color: var(--el-text-color-regular);
+  --w-e-toolbar-bg-color: var(--el-bg-color);
+  --w-e-toolbar-active-color: var(--el-text-color-primary);
+  --w-e-toolbar-active-bg-color: var(--el-fill-color-light);
+  --w-e-toolbar-disabled-color: var(--el-text-color-secondary);
+  --w-e-toolbar-border-color: var(--el-border-color);
+  --w-e-modal-button-bg-color: var(--el-bg-color-overlay);
+  --w-e-modal-button-border-color: var(--el-border-color-light);
+}