✨ feat: 默认分页改为20

2025-08-25 09:13:45 +08:00
parent c1f3c2d7d6
commit 421a856767
101 changed files with 333 additions and 143 deletions
--- a/klp-ui/src/assets/styles/element-ui.scss
+++ b/klp-ui/src/assets/styles/element-ui.scss
@@ -1,10 +1,155 @@
-// cover some element-ui styles
+/* 基础变量定义 - 工业风浅色配色 */
+:root {
+  --primary-color: #3c6382; /* 深蓝色作为主色调，体现工业感 */
+  --secondary-color: #78909c; /* 辅助色 */
+  --accent-color: #e67e22; /* 强调色，用于突出按钮和重要操作 */
+  --background-color: #f5f7fa; /* 浅色背景 */
+  --card-bg-color: #ffffff; /* 卡片背景 */
+  --border-color: #cfd8dc; /* 边框颜色 */
+  --text-primary: #263238; /* 主要文本色 */
+  --text-secondary: #546e7a; /* 次要文本色 */
+  --spacing-sm: 4px;
+  --spacing-md: 8px;
+  --spacing-lg: 16px;
+}
+
+/* 全局样式调整 */
+body {
+  background-color: var(--background-color);
+  color: var(--text-primary);
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+/* 面包屑导航优化 */
+.el-breadcrumb {
+  padding: var(--spacing-md) 0;
+}

 .el-breadcrumb__inner,
 .el-breadcrumb__inner a {
  font-weight: 400 !important;
+  color: var(--text-secondary) !important;
 }

+.el-breadcrumb__separator {
+  margin: 0 var(--spacing-sm);
+  color: var(--border-color);
+}
+
+/* 按钮样式优化 */
+.el-button {
+  padding: 6px 12px;
+  border-radius: 2px;
+  font-size: 13px;
+  transition: all 0.2s ease;
+}
+
+.el-button--primary {
+  background-color: var(--primary-color);
+  border-color: var(--primary-color);
+}
+
+.el-button--primary:hover {
+  background-color: #2c3e50;
+  border-color: #2c3e50;
+}
+
+.el-button--success {
+  background-color: #2ecc71;
+  border-color: #2ecc71;
+}
+
+.el-button--warning {
+  background-color: var(--accent-color);
+  border-color: var(--accent-color);
+}
+
+.el-button--mini {
+  padding: 3px 8px;
+  font-size: 12px;
+}
+
+/* 卡片组件优化 */
+.el-card {
+  border-radius: 2px;
+  border: 1px solid var(--border-color);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+}
+
+.el-card__header {
+  padding: var(--spacing-md) var(--spacing-lg);
+  border-bottom: 1px solid var(--border-color);
+  background-color: #f9fafb;
+}
+
+.el-card__body {
+  padding: var(--spacing-lg);
+}
+
+/* 表格样式优化 - 紧凑布局 */
+.el-table {
+  border: 1px solid var(--border-color);
+  border-radius: 2px;
+}
+
+.el-table th,
+.el-table td {
+  padding: 8px 10px;
+  font-size: 13px;
+}
+
+.el-table--border th,
+.el-table--border td {
+  border-right: 1px solid var(--border-color);
+}
+
+.el-table--border thead tr:last-child th {
+  border-bottom: 1px solid var(--border-color);
+}
+
+/* 输入框样式优化 */
+.el-input__inner,
+.el-textarea__inner {
+  padding: 7px 11px;
+  border-radius: 2px;
+  border: 1px solid var(--border-color);
+  font-size: 13px;
+  transition: border-color 0.2s ease;
+}
+
+.el-input__inner:focus,
+.el-textarea__inner:focus {
+  border-color: var(--primary-color);
+  box-shadow: none;
+}
+
+/* 下拉菜单优化 */
+.el-dropdown-menu {
+  border-radius: 2px;
+  border: 1px solid var(--border-color);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  padding: var(--spacing-sm) 0;
+}
+
+.el-dropdown-menu__item {
+  padding: 6px 16px;
+  font-size: 13px;
+}
+
+.el-dropdown-menu a {
+  display: block;
+}
+
+/* 标签样式优化 */
+.el-tag {
+  padding: 2px 8px;
+  border-radius: 2px;
+  font-size: 12px;
+}
+
+/* 上传组件优化 */
 .el-upload {
  input[type="file"] {
    display: none !important;
@@ -15,12 +160,69 @@
  display: none;
 }

-.cell {
-  .el-tag {
-    margin-right: 0px;
+.upload-container {
+  .el-upload {
+    width: 100%;
+
+    .el-upload-dragger {
+      width: 100%;
+      height: 200px;
+      border-radius: 2px;
+      border: 2px dashed var(--border-color);
+    }
  }
 }

+/* 对话框样式优化 */
+.el-dialog {
+  transform: none;
+  left: 0;
+  position: relative;
+  margin: 0 auto;
+  border-radius: 2px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.el-dialog__header {
+  padding: var(--spacing-lg);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.el-dialog__body {
+  padding: var(--spacing-lg);
+}
+
+.el-dialog__footer {
+  padding: var(--spacing-md) var(--spacing-lg);
+  border-top: 1px solid var(--border-color);
+}
+
+/* 日期选择器优化 */
+.el-range-editor.el-input__inner {
+  display: inline-flex !important;
+}
+
+.el-range-separator {
+  box-sizing: content-box;
+}
+
+/* 菜单样式优化 */
+.el-menu {
+  border-right: 1px solid var(--border-color);
+}
+
+.el-menu-item,
+.el-submenu__title {
+  padding: 0 16px !important;
+  height: 40px !important;
+  line-height: 40px !important;
+}
+
+.el-menu--collapse > div > .el-submenu > .el-submenu__title .el-submenu__icon-arrow {
+  display: none;
+}
+
+/* 自定义工具类 - 紧凑布局 */
 .small-padding {
  .cell {
    padding-left: 5px;
@@ -46,47 +248,35 @@
  }
 }

-// to fixed https://github.com/ElemeFE/element/issues/2461
-.el-dialog {
-  transform: none;
-  left: 0;
-  position: relative;
-  margin: 0 auto;
-}
-
-// refine element ui upload
-.upload-container {
-  .el-upload {
-    width: 100%;
-
-    .el-upload-dragger {
-      width: 100%;
-      height: 200px;
-    }
+.cell {
+  .el-tag {
+    margin-right: 0px;
  }
 }

-// dropdown
-.el-dropdown-menu {
-  a {
-    display: block
-  }
+/* 表单样式优化 */
+.el-form-item {
+  margin-bottom: 12px;
 }

-// fix date-picker ui bug in filter-item
-.el-range-editor.el-input__inner {
-  display: inline-flex !important;
+.el-form-item__label {
+  padding-right: 10px;
+  font-size: 13px;
 }

-// to fix el-date-picker css style
-.el-range-separator {
-  box-sizing: content-box;
+/* 分页组件优化 */
+.el-pagination {
+  margin-top: 16px;
+  padding: 8px 0;
 }

-.el-menu--collapse
-  > div
-  > .el-submenu
-  > .el-submenu__title
-  .el-submenu__icon-arrow {
-  display: none;
-}
+.el-pager li {
+  margin: 0 2px;
+  min-width: 30px;
+  height: 30px;
+  line-height: 30px;
+}
+
+.pagination-container {
+  background-color: transparent !important;
+}