From 6561eaf93328edae6370df2673d2fba3b453744f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= Date: Thu, 18 Sep 2025 16:22:49 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=E8=B0=83=E6=95=B4=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E6=9B=B4=E7=B4=A7=E5=87=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- gear-ui3/src/assets/styles/element-ui.scss | 847 ++++++++++++++++-- gear-ui3/src/assets/styles/ruoyi.scss | 32 +- gear-ui3/src/components/AllApplications.vue | 219 +++-- gear-ui3/src/components/Crontab/index.vue | 6 +- .../src/components/ImagePreview/index.vue | 4 +- .../ProductSelect/BomPanel/BomItem.vue | 5 +- .../src/components/ProductSelect/index.vue | 6 +- .../src/components/RightToolbar/index.vue | 8 +- .../src/components/WarehouseSelect/index.vue | 2 +- gear-ui3/src/views/components/Statistic.vue | 215 +++-- .../src/views/info/construction/index.vue | 2 +- gear-ui3/src/views/info/express/index.vue | 10 +- gear-ui3/src/views/info/feedback/index.vue | 155 ++-- gear-ui3/src/views/login.vue | 7 +- gear-ui3/src/views/oms/otherIncome/index.vue | 12 +- .../src/views/oms/returnExchange/index.vue | 8 +- .../attendance/components/attendancePage.vue | 2 +- .../views/peoples/attendance/dashboard.vue | 2 +- gear-ui3/src/views/peoples/salary/index.vue | 2 +- .../src/views/peoples/workDeduction/index.vue | 2 +- .../src/views/purchase/category/index.vue | 8 +- gear-ui3/src/views/purchase/month/index.vue | 8 +- gear-ui3/src/views/purchase/shop/index.vue | 6 +- .../src/views/purchase/supplier/index.vue | 9 +- gear-ui3/src/views/system/dept/index.vue | 2 +- gear-ui3/src/views/system/post/index.vue | 2 +- gear-ui3/src/views/system/role/index.vue | 2 +- 27 files changed, 1205 insertions(+), 378 deletions(-) diff --git a/gear-ui3/src/assets/styles/element-ui.scss b/gear-ui3/src/assets/styles/element-ui.scss index e6478e3..fff07d7 100644 --- a/gear-ui3/src/assets/styles/element-ui.scss +++ b/gear-ui3/src/assets/styles/element-ui.scss @@ -1,100 +1,831 @@ -// cover some element-ui styles +// ====================== 1. 基础尺寸变量（Sass直接处理）====================== +// 间距/尺寸变量 +$--spacing-sm: 4px; +$--spacing-base: 8px; +$--spacing-md: $--spacing-base; +$--spacing-lg: $--spacing-base * 2; +$--form-item-margin: $--spacing-base; +$--btn-height: 24px; -.el-breadcrumb__inner, -.el-breadcrumb__inner a { - font-weight: 400 !important; + +// ====================== 2. CSS尺寸变量（与Sass变量同步）====================== +:root { + /* 间距/尺寸体系 */ + --spacing-sm: #{$--spacing-sm}; + --spacing-base: #{$--spacing-base}; + --spacing-md: #{$--spacing-md}; + --spacing-lg: #{$--spacing-lg}; + --form-item-margin: #{$--form-item-margin}; + --btn-height: #{$--btn-height}; } -.el-upload { - input[type="file"] { - display: none !important; + +// ====================== 3. Element UI适配 - 尺寸变量 ======================= +// 尺寸变量 +$--spacing-sm: $--spacing-sm !default; +$--spacing-base: $--spacing-base !default; +$--spacing-md: $--spacing-md !default; +$--spacing-lg: $--spacing-lg !default; +$--form-item-margin: $--form-item-margin !default; +$--btn-height: $--btn-height !default; + + +// ====================== 4. 全局尺寸样式 ====================== +body { + font-size: 14px; + line-height: 1.5; + margin: 0; + padding: 0; +} + +// 标签页内容溢出修复（尺寸相关） +.el-tabs__content { + overflow: visible !important; +} + + +// ====================== 5. 组件尺寸样式（按优先级合并）====================== +// ---------------------- 5.1 按钮（紧凑尺寸）---------------------- +@mixin button-variant() { + border-radius: 6px; + transition: all .25s ease; + height: $--btn-height; + padding: 0 var(--spacing-lg); + font-size: 13px; + + &:hover, + &:focus { + transform: translateY(-1px); + } + + &:active { + transform: translateY(1px); + } + + &.is-disabled, + &[disabled] { + cursor: not-allowed; } } -.el-upload__input { - display: none; +// 主按钮（尺寸相关） +.el-button--primary { + @include button-variant(); } -.cell { - .el-tag { - margin-right: 0px; +// 功能按钮（尺寸相关） +.el-button--success, +.el-button--warning, +.el-button--danger, +.el-button--info { + @include button-variant(); +} + +// 文本按钮（尺寸相关） +.el-button--text { + height: auto; + padding: 4px 8px; +} + +// 图标按钮（圆形紧凑尺寸） +.el-button.is-circle { + width: 26px; + height: 26px; + padding: 0; + border-radius: 50%; + + &:only-child { + padding: 0; } } -.small-padding { - .cell { - padding-left: 5px; - padding-right: 5px; - } -} +// 按钮组（无缝衔接尺寸） +.el-button-group { + .el-button { + border-radius: 0; + margin: 0; -.fixed-width { - .el-button--mini { - padding: 7px 10px; - width: 60px; - } -} + &:first-child { + border-radius: 6px 0 0 6px; + } -.status-col { - .cell { - padding: 0 10px; - text-align: center; + &:last-child { + border-radius: 0 6px 6px 0; + } - .el-tag { - margin-right: 0px; + &:not(:last-child) { + border-right: none; } } } -// to fixed https://github.com/ElemeFE/element/issues/2461 +// 中号按钮（尺寸） +.el-button--medium { + padding: 4px 8px !important; + font-size: 12px; + height: $--btn-height - 4px; +} + +// 迷你/小号按钮（超紧凑尺寸） +.el-button--mini, +.el-button--small, +.el-button { + padding: 4px 8px !important; + font-size: 12px; + height: $--btn-height - 4px; + + &.is-circle { + padding: 4px !important; + } +} + + +// ---------------------- 5.2 表格（紧凑尺寸）---------------------- +.el-table { + border-radius: 8px; + overflow: hidden; + margin-top: $--form-item-margin * 2; // 与表单间距 + + // 表头（紧凑padding） + .el-table__header-wrapper { + th.el-table__cell { + padding: 4px !important; + height: auto; + font-size: 13px; + } + } + + .el-button + .el-button { + margin-left: 2px; + } + + .el-button.el-button--text { + padding: 0 2px !important; + } + + // 表体（紧凑padding） + .el-table__body-wrapper { + .el-table__cell { + padding: 2px 4px !important; // 超紧凑 + font-size: 13px; + } + } + + // 表尾（紧凑padding） + .el-table__footer-wrapper { + td { + padding: 4px !important; + } + } + + // 适配尺寸类（统一紧凑） + &.el-table--medium .el-table__cell, + &.el-table--mini .el-table__cell { + padding: 0 !important; + } +} + +.el-table__fixed-right { + // 表头（紧凑padding） + .el-table__fixed-header-wrapper { + th.el-table__cell { + padding: 4px !important; + font-size: 13px; + } + } +} + +// 自定义表格工具类（补充紧凑） +.small-padding .cell { + padding-left: calc($--spacing-base / 2); + padding-right: calc($--spacing-base / 2); +} + +.status-col .cell { + padding: 0 10px !important; + text-align: center; +} + + +// ---------------------- 5.3 日期范围选择器（尺寸适配）---------------------- +.el-date-editor { + height: $--btn-height; + + // 基础尺寸 + &.el-range-editor { + padding: 0 8px; + height: $--btn-height; + + // 图标尺寸 + .el-input__icon { + width: 18px; + height: 18px; + line-height: 18px; + } + + // 输入框尺寸 + .el-range-input { + padding: 0 4px; + height: 100%; + font-size: 13px; + width: 80px; + } + + // 分隔符尺寸 + .el-range-separator { + padding: 0 4px; + font-size: 13px; + } + + // 清除图标间距 + .el-range__close-icon { + margin-left: 4px; + } + } + + &--medium.el-input__inner { + height: auto; + } +} + +.el-range-editor--medium.el-input__inner { + height: $--btn-height !important; + width: auto !important; + + .el-range-separator { + padding: 0; + line-height: 16px; + font-size: 13px; + } +} + +// 日期选择面板尺寸 +.el-picker-panel { + border-radius: 6px; + + // 头部导航尺寸 + .el-picker-panel__header { + padding: 6px 10px; + + .el-picker-panel__icon-btn { + width: 24px; + height: 24px; + line-height: 24px; + border-radius: 4px; + } + } + + // 日期表格尺寸 + .el-date-table { + border-collapse: separate; + border-spacing: 2px; + + th { + padding: 4px 0; + font-size: 12px; + } + + td { + padding: 0; + + .el-date-table__cell { + width: 28px; + height: 28px; + line-height: 28px; + border-radius: 4px; + margin: 1px; + font-size: 13px; + } + } + } + + // 范围选择器底部按钮尺寸 + .el-range-picker__footer { + padding: 6px 10px; + + button { + height: 24px; + line-height: 22px; + padding: 0 12px; + font-size: 12px; + border-radius: 4px; + } + } +} + + +// ---------------------- 5.4 表单/输入（统一尺寸）---------------------- +// 表单项布局尺寸 +.el-form-item { + margin-bottom: $--form-item-margin !important; + font-size: 13px; + + // 标签间距 + .el-form-item__label { + padding-right: $--spacing-base; + font-size: 13px; + } + + // 搜索表单 inline 布局 + &.search-form-item { + display: inline-block; + margin-right: $--spacing-base; + vertical-align: middle; + } +} + +// 输入框（统一高度） +.el-input { + height: $--btn-height; + + .el-input__inner { + border-radius: 0; + height: $--btn-height; + line-height: $--btn-height; + font-size: 13px; + } + + // 输入框图标尺寸 + .el-input__icon { + height: $--btn-height; + line-height: $--btn-height; + } + + // 尺寸适配（统一高度） + &.el-input--small .el-input__inner, + &.el-input--medium .el-input__inner, + &.el-input--large .el-input__inner { + height: $--btn-height; + line-height: $--btn-height; + } + + // 输入组尺寸 + .el-input-group__append, + .el-input-group__prepend { + border-radius: 0; + font-size: 13px; + } +} + +// 文本域尺寸 +.el-textarea .el-textarea__inner { + border-radius: 0; + padding: $--spacing-base; + font-size: 13px; +} + +// 数字输入框尺寸 +.el-input-number { + .el-input__inner { + border-radius: 0; + } + + // 增减按钮尺寸 + .el-input-number__increase, + .el-input-number__decrease { + transition: all .2s ease; + height: $--btn-height; + line-height: $--btn-height; + } + + .el-input-number__increase, + .el-input-number__decrease { + border-radius: 0; + } + + // 迷你尺寸 + &.el-input-number--small { + .el-input-number__increase, + .el-input-number__decrease { + width: 24px; + height: 24px; + } + } + + // 无控制按钮尺寸 + &.is-without-controls .el-input__inner { + border-radius: 0; + } +} + +// 选择器/下拉框尺寸 +.el-select { + .el-input__inner { + border-radius: 0; + } + + // 下拉面板尺寸 + .el-select-dropdown { + border-radius: 6px; + + .el-select-dropdown__item { + padding: 6px 16px; + font-size: 13px; + } + } +} + + +// ---------------------- 5.5 卡片/对话框（尺寸层级）---------------------- +// 卡片尺寸 +.el-card { + border-radius: 8px; + overflow: hidden; + + // 卡片头部尺寸 + .el-card__header { + padding: $--spacing-md $--spacing-lg; + } + + // 卡片主体尺寸 + .el-card__body { + padding: $--spacing-lg; + } +} + +// 对话框尺寸 .el-dialog { transform: none; left: 0; position: relative; - margin: 0 auto; + margin: 10vh auto 0; + border-radius: 8px; + width: 60% !important; // 自适应宽度 + + // 对话框头部尺寸 + .el-dialog__header { + padding: $--spacing-lg; + } + + // 对话框主体尺寸 + .el-dialog__body { + padding: $--spacing-lg; + max-height: 60vh; + overflow-y: auto; + } + + // 对话框底部尺寸 + .el-dialog__footer { + padding: $--spacing-md $--spacing-lg; + text-align: right; + } } -// refine element ui upload -.upload-container { - .el-upload { +// 抽屉尺寸 +.el-drawer { + border-radius: 8px; +} + +// Popover尺寸 +.el-popover { + border-radius: 8px; + padding: $--spacing-lg; + + // Popover 标题尺寸 + .el-popover__title { + padding-bottom: $--spacing-md; + margin-bottom: $--spacing-md; + } + + // Popover 底部尺寸 + .el-popover__footer { + padding-top: $--spacing-md; + margin-top: $--spacing-md; + text-align: right; + } +} + +.el-button-group+.el-popover { + margin-left: 5px; +} + + +// ---------------------- 5.6 标签页组件（el-tabs）尺寸 ----------------====== +.el-tabs { + // 标签栏尺寸 + .el-tabs__header { + margin: 0; + padding: 0; + + // 标签导航容器尺寸 + .el-tabs__nav { + height: 40px; + line-height: 40px; + padding: 0 var(--spacing-base); + } + + // 标签项尺寸 + .el-tabs__item { + height: 40px; + line-height: 40px; + font-size: 13px; + transition: all 0.2s ease; + } + + // 标签滚动按钮尺寸 + .el-tabs__nav-prev, + .el-tabs__nav-next { + width: 32px; + height: 32px; + line-height: 32px; + margin: 4px 0; + border-radius: 4px; + transition: all 0.2s ease; + } + } + + // 标签内容区尺寸 + .el-tabs__content { + padding: var(--spacing-lg); + border-radius: 0 0 6px 6px; + min-height: 100px; // 确保有基本高度 + } + + // 卡片类型标签页尺寸 + &.el-tabs--card { + .el-tabs__header { + .el-tabs__nav { + border-radius: 6px; + overflow: hidden; + } + + .el-tabs__item { + margin: 0 2px; + border-radius: 6px 6px 0 0; + } + } + + .el-tabs__content { + border-radius: 0 6px 6px 6px; + margin-top: -1px; + } + } + + // 左侧/右侧标签页尺寸 + &.el-tabs--left, + &.el-tabs--right { + .el-tabs__header { + margin: 0 var(--spacing-lg) 0 0; + + .el-tabs__nav { + flex-direction: column; + height: auto; + } + + .el-tabs__item { + width: 100%; + } + } + + &.el-tabs--right { + .el-tabs__header { + margin: 0 0 0 var(--spacing-lg); + } + } + + .el-tabs__content { + border-radius: 6px; + } + } + + // 标签页关闭按钮间距 + .el-icon-close { + margin-left: var(--spacing-sm); + transition: all 0.2s ease; + } + + // 可编辑标签添加按钮间距 + .el-tabs__new-tab { + margin: 0 var(--spacing-sm); + transition: all 0.2s ease; + } +} + + +// ---------------------- 5.7 日期选择器（尺寸优化）---------------------- +.el-date-picker { + .el-picker-panel { + border-radius: 8px; + + // 头部尺寸 + .el-date-picker__header { + padding: $--spacing-md; + } + + // 日期表格尺寸 + .el-date-table { + th { + padding: $--spacing-sm; + } + + td { + padding: $--spacing-sm; + border-radius: 4px; + transition: all .2s; + } + } + + // 快捷选项尺寸 + .el-picker-panel__shortcut { + padding: $--spacing-md; + + .el-picker-panel__shortcut-btn { + padding: 4px 10px; + border-radius: 4px; + transition: all .2s; + } + } + } + + // 范围选择器分隔符尺寸 + .el-range-separator { + padding: 0 $--spacing-md; + box-sizing: content-box; + } + + // 范围输入框布局 + .el-range-editor.el-input__inner { + display: inline-flex !important; + } +} + + +// ---------------------- 5.8 描述列表组件（el-descriptions）- 尺寸适配 ====================== +.el-descriptions { + width: 100%; + overflow: hidden; + + // 描述列表头部尺寸 + &__header { + padding: $--spacing-base $--spacing-lg; + font-size: 14px; + } + + // 描述列表主体容器尺寸 + &__body { + width: 100%; + } + + // 描述列表行布局 + &__row { + display: flex; width: 100%; - .el-upload-dragger { + // 最后一行布局 + &:last-child { + border-bottom: none; + } + } + + // 描述列表标签项尺寸 + .el-descriptions-item__label { + padding: $--spacing-lg; + box-sizing: border-box; + white-space: nowrap; + font-size: 13px; + } + + // 描述列表内容项尺寸 + &-item__content { + padding: $--spacing-lg; + flex: 1; + box-sizing: border-box; + font-size: 13px; + word-break: break-word; + } + + // 带边框模式尺寸 + &--border { + border-radius: 8px; + overflow: hidden; + } + + // 尺寸适配 + &--small { + .el-descriptions__label, + .el-descriptions__content { + padding: calc($--spacing-base / 2) $--spacing-base; + font-size: 12px; + } + + .el-descriptions__header { + padding: calc($--spacing-base / 2) $--spacing-base; + font-size: 13px; + } + } + + &--large { + .el-descriptions__label, + .el-descriptions__content { + padding: $--spacing-lg $--spacing-lg * 1.5; + font-size: 14px; + } + + .el-descriptions__header { + padding: $--spacing-base $--spacing-lg * 1.5; + font-size: 15px; + } + } + + // 响应式适配 + @media (max-width: 768px) { + .el-descriptions__row { + flex-direction: column; + } + + .el-descriptions__label { width: 100%; - height: 200px; } } } -// dropdown -.el-dropdown-menu { - a { - display: block +// 菜单尺寸 +.el-menu { + .el-menu-item, + .el-submenu__title { + height: 40px !important; + line-height: 40px !important; + } + + // 折叠菜单布局 + &.el-menu--collapse>div>.el-submenu>.el-submenu__title .el-submenu__icon-arrow { + display: none; } } -// fix date-picker ui bug in filter-item -.el-range-editor.el-input__inner { - display: inline-flex !important; + +// ---------------------- 5.10 其他组件（标签/分页/上传）尺寸 ---------------------- +// 标签尺寸 +.el-tag { + padding: 2px 8px; + border-radius: 2px; + font-size: 12px; + height: auto; + margin-right: 0; + + // 表格内标签尺寸 + .cell & { + margin-right: 0; + padding: 1px !important; + border-radius: 0 !important; + } } -// to fix el-date-picker css style -.el-range-separator { - box-sizing: content-box; +// 分页尺寸 +.el-pagination { + margin-top: 16px; + padding: 8px 0; + text-align: right; + + .el-pager li { + margin: 0 2px; + min-width: 30px; + height: 30px; + line-height: 30px; + border-radius: 4px; + } + + // 输入框后缀布局 + .el-input__suffix { + position: absolute; + line-height: 0; + } } -.el-menu--collapse - > div - > .el-submenu - > .el-submenu__title - .el-submenu__icon-arrow { - display: none; +// 分页容器尺寸 +div.pagination-container { + padding: 0 !important; + margin-top: 0 !important; + margin-bottom: 0 !important; + + .el-pagination { + padding: 0 !important; + } } -.el-dropdown .el-dropdown-link{ - color: var(--el-color-primary) !important; +// 上传组件尺寸 +.el-upload { + input[type="file"] { + display: none !important; + } + + .el-upload__input { + display: none; + } + + // 拖拽上传容器尺寸 + .el-upload-dragger { + width: 100%; + height: 200px; + border-radius: 6px; + } } - -.el-select-dropdown { - z-index: 9999 !important; /* 需大于全屏容器的z-index */ + +// 树形组件布局 +.el-tree { + .el-tree-node { + &.is-current>.el-tree-node__content { + width: 100%; + } + } } \ No newline at end of file diff --git a/gear-ui3/src/assets/styles/ruoyi.scss b/gear-ui3/src/assets/styles/ruoyi.scss index b3240c3..f0218c8 100644 --- a/gear-ui3/src/assets/styles/ruoyi.scss +++ b/gear-ui3/src/assets/styles/ruoyi.scss @@ -5,52 +5,52 @@ /** 基础通用 **/ .pt5 { - padding-top: 5px; + padding-top: 2px; } .pr5 { - padding-right: 5px; + padding-right: 2px; } .pb5 { - padding-bottom: 5px; + padding-bottom: 2px; } .mt5 { - margin-top: 5px; + margin-top: 2px; } .mr5 { - margin-right: 5px; + margin-right: 2px; } .mb5 { - margin-bottom: 5px; + margin-bottom: 2px; } .mb8 { - margin-bottom: 8px; + margin-bottom: 4px; } .ml5 { - margin-left: 5px; + margin-left: 2px; } .mt10 { - margin-top: 10px; + margin-top: 5px; } .mr10 { - margin-right: 10px; + margin-right: 5px; } .mb10 { - margin-bottom: 10px; + margin-bottom: 5px; } .ml10 { - margin-left: 10px; + margin-left: 5px; } .mt20 { - margin-top: 20px; + margin-top: 10px; } .mr20 { - margin-right: 20px; + margin-right: 10px; } .mb20 { - margin-bottom: 20px; + margin-bottom: 10px; } .ml20 { - margin-left: 20px; + margin-left: 10px; } .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { diff --git a/gear-ui3/src/components/AllApplications.vue b/gear-ui3/src/components/AllApplications.vue index 5b92dc8..4b58927 100644 --- a/gear-ui3/src/components/AllApplications.vue +++ b/gear-ui3/src/components/AllApplications.vue @@ -96,18 +96,21 @@
\ No newline at end of file diff --git a/gear-ui3/src/components/Crontab/index.vue b/gear-ui3/src/components/Crontab/index.vue index cbb41ab..74bc01a 100644 --- a/gear-ui3/src/components/Crontab/index.vue +++ b/gear-ui3/src/components/Crontab/index.vue @@ -116,9 +116,9 @@
- 确定 - 重置 - 取消 + 确定 + 重置 + 取消
diff --git a/gear-ui3/src/components/ImagePreview/index.vue b/gear-ui3/src/components/ImagePreview/index.vue index becc11f..d2534d7 100644 --- a/gear-ui3/src/components/ImagePreview/index.vue +++ b/gear-ui3/src/components/ImagePreview/index.vue @@ -24,11 +24,11 @@ const props = defineProps({ }, width: { type: [Number, String], - default: "50px" + default: "30px" }, height: { type: [Number, String], - default: "50px" + default: "30px" } }) diff --git a/gear-ui3/src/components/ProductSelect/BomPanel/BomItem.vue b/gear-ui3/src/components/ProductSelect/BomPanel/BomItem.vue index d271397..316e493 100644 --- a/gear-ui3/src/components/ProductSelect/BomPanel/BomItem.vue +++ b/gear-ui3/src/components/ProductSelect/BomPanel/BomItem.vue @@ -3,19 +3,20 @@ 新增 修改 diff --git a/gear-ui3/src/components/ProductSelect/index.vue b/gear-ui3/src/components/ProductSelect/index.vue index fba600c..0674a66 100644 --- a/gear-ui3/src/components/ProductSelect/index.vue +++ b/gear-ui3/src/components/ProductSelect/index.vue @@ -10,7 +10,7 @@ value-key="productId" > diff --git a/gear-ui3/src/components/RightToolbar/index.vue b/gear-ui3/src/components/RightToolbar/index.vue index 349363c..0535a06 100644 --- a/gear-ui3/src/components/RightToolbar/index.vue +++ b/gear-ui3/src/components/RightToolbar/index.vue @@ -2,15 +2,15 @@
- + - + - + - +