feat(cargo-type): 优化顶部按钮区界面和样式

- 将“添加分类”按钮文字修改为“新增”以统一风格
- 为批量导入、下载模板、批量导出和批量删除按钮添加对应 Element Plus 图标
- 在组件中引入并注册 Search、Plus、Upload、Download、Delete 图标组件
- 新增样式规则,去除 basic-container 卡片内层 el-card 的 padding,符合设计规范4.4
- 隐藏表格工具栏中的搜索图标按钮,优化界面简洁度
This commit is contained in:
2026-07-29 11:48:07 +08:00
parent 6e71c38dad
commit a1c8e7c1ce
2 changed files with 24 additions and 7 deletions

View File

@@ -0,0 +1,12 @@
# 2026-07-29 工作日志
## cargo-type 顶部按钮区优化
- **文件**: `src/views/base/cargo-type.vue`
- **改动**:
1. 新增按钮文字 `添加分类``新增`(与截图一致)
2. 为 4 个按钮补齐 Element Plus 图标:批量导入(Upload)、下载模板(Download)、批量导出(Download)、批量删除(Delete),均带 `el-icon--left`
3. 图标导入注册:`import { Search, Plus, Upload, Download, Delete }`components 同步注册
4. 补充规范样式:`:deep(.basic-container__card) > .el-card__body { padding: 0 }`(去除内层卡片 padding符合 AGENTS.md 4.4
- **排查确认无需改动项**:
- 操作列菜单(查看/编辑/删除menuWidth:220 已符合规范
- `empty-pagination` 组件已靠右、`total` 在前、`sizes` 在 total 右侧符合分页规范avue-crud 默认分页 layout 同规范customer-type 同模块也未自定义)

View File

@@ -30,32 +30,32 @@
</div>
<div class="compact-search__actions">
<el-button type="primary" v-if="permission.cargo_type_add" @click="$refs.crud.rowAdd()">
<el-icon class="el-icon--left"><Plus /></el-icon>添加分类
<el-icon class="el-icon--left"><Plus /></el-icon>新增
</el-button>
<el-button
type="primary"
plain
v-if="permission.cargo_type_import"
@click="handleImport"
>批量导入</el-button>
><el-icon class="el-icon--left"><Upload /></el-icon>批量导入</el-button>
<el-button
type="primary"
plain
v-if="permission.cargo_type_template"
@click="handleTemplate"
>下载模板</el-button>
><el-icon class="el-icon--left"><Download /></el-icon>下载模板</el-button>
<el-button
type="primary"
plain
v-if="permission.cargo_type_export"
@click="handleExport"
>批量导出</el-button>
><el-icon class="el-icon--left"><Download /></el-icon>批量导出</el-button>
<el-button
type="danger"
plain
v-if="permission.cargo_type_delete"
@click="handleDelete"
>批量删除</el-button>
><el-icon class="el-icon--left"><Delete /></el-icon>批量删除</el-button>
</div>
</div>
@@ -176,7 +176,7 @@ import { openImportDialog } from '@/utils/import-excel';
import { getToken } from '@/utils/auth';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
import { Search, Plus } from '@element-plus/icons-vue';
import { Search, Plus, Upload, Download, Delete } from '@element-plus/icons-vue';
// 导入失败明细中,每个错误文本对应的「字段列」与「规则说明」
const CARGO_TYPE_FAIL_RULES = [
@@ -273,7 +273,7 @@ export const decorateCargoTypeFailDetail = async workbook => {
};
export default {
components: { Search, Plus },
components: { Search, Plus, Upload, Download, Delete },
data() {
return {
form: {},
@@ -652,6 +652,11 @@ export default {
box-shadow: none;
}
// 去除 basic-container 卡片内层 el-card 的 padding规范 4.4
:deep(.basic-container__card) > .el-card__body {
padding: 0;
}
// 隐藏表格工具栏中的搜索图标按钮
:deep(.avue-crud__search-btn) {
display: none !important;