tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: unify system list layout with filter/table sections

Browse Source
This commit is contained in:
Ray.Hao
2025-11-27 14:38:35 +08:00
parent b2ef3d1b1f
commit 793dca66b1
13 changed files with 57 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
.cursor/mcp.json
View File

@@ -1,7 +0,0 @@
{
"mcpServers": {
"vue-mcp": {
"url": "http://localhost:3000/__mcp/sse"
}
}
}

2
src/components/AiAssistant/index.vue
View File

@@ -530,7 +530,7 @@ const executeAction = async (action: AiAction) => {
// 关闭对话框
handleClose();
}, 800);
}, 1000);
} else if (action.type === "execute") {
// 执行函数调用
ElMessage.info("功能开发中，请前往 AI 命令助手页面体验完整功能");

2
src/styles/element-plus.scss
View File

@@ -18,7 +18,7 @@ $border: 1px solid var(--el-border-color-light);
}
}
/** el-drawer */
/* el-drawer */
.el-drawer {
.el-drawer__header {
padding: 15px 20px;

20
src/styles/index.scss
View File

@@ -74,10 +74,10 @@ html.sidebar-color-blue .layout-mix .layout__sidebar--left .el-menu {
}
}
// 全局搜索区域样式
.search-container {
padding: 18px 16px 0;
margin-bottom: 16px;
// 全局筛选区域样式
.filter-section {
padding: 8px 12px 0;
margin-bottom: 8px;
background-color: var(--el-bg-color-overlay);
border: 1px solid var(--el-border-color-light);
border-radius: 4px;
@@ -87,24 +87,24 @@ html.sidebar-color-blue .layout-mix .layout__sidebar--left .el-menu {
}
.el-form-item {
margin-bottom: 18px;
margin-bottom: 8px;
}
}
// 表格区域样式
.data-table {
margin-bottom: 16px;
.table-section {
margin-bottom: 12px;
// 表格工具栏区域
&__toolbar {
display: flex;
justify-content: space-between;
margin-bottom: 16px;
margin-bottom: 4px;
&--actions,
&--tools {
display: flex;
gap: 8px;
gap: 4px;
}
}
@@ -116,6 +116,6 @@ html.sidebar-color-blue .layout-mix .layout__sidebar--left .el-menu {
// 分页区域
.el-pagination {
justify-content: flex-end;
margin-top: 16px;
margin-top: 12px;
}
}

10
src/views/system/config/index.vue
View File

@@ -2,7 +2,7 @@
<template>
<div class="app-container">
<!-- 搜索区域 -->
<div class="search-container">
<div class="filter-section">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="关键字" prop="keywords">
<el-input
@@ -20,9 +20,9 @@
</el-form>
</div>
<el-card shadow="hover" class="data-table">
<div class="data-table__toolbar">
<div class="data-table__toolbar--actions">
<el-card shadow="hover" class="table-section">
<div class="table-section__toolbar">
<div class="table-section__toolbar--actions">
<el-button
v-hasPerm="['sys:config:add']"
type="success"
@@ -47,7 +47,7 @@
v-loading="loading"
:data="pageData"
highlight-current-row
class="data-table__content"
class="table-section__content"
border
@selection-change="handleSelectionChange"
>

10
src/views/system/dept/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="app-container">
<!-- 搜索区域 -->
<div class="search-container">
<div class="filter-section">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="关键字" prop="keywords">
<el-input
@@ -27,9 +27,9 @@
</el-form>
</div>
<el-card shadow="hover" class="data-table">
<div class="data-table__toolbar">
<div class="data-table__toolbar--actions">
<el-card shadow="hover" class="table-section">
<div class="table-section__toolbar">
<div class="table-section__toolbar--actions">
<el-button
v-hasPerm="['sys:dept:add']"
type="success"
@@ -56,7 +56,7 @@
row-key="id"
default-expand-all
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
class="data-table__content"
class="table-section__content"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />

8
src/views/system/dict/dict-item.vue
View File

@@ -1,7 +1,7 @@
<!-- 字典项 -->
<template>
<div class="app-container">
<div class="search-container">
<div class="filter-section">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="关键字" prop="keywords">
<el-input
@@ -19,9 +19,9 @@
</el-form>
</div>
<el-card shadow="never" class="data-table">
<div class="data-table__toolbar">
<div class="data-table__toolbar--actions">
<el-card shadow="never" class="table-section">
<div class="table-section__toolbar">
<div class="table-section__toolbar--actions">
<el-button type="success" icon="plus" @click="handleOpenDialog()">新增</el-button>
<el-button
type="danger"

10
src/views/system/dict/index.vue
View File

@@ -2,7 +2,7 @@
<template>
<div class="app-container">
<!-- 搜索区域 -->
<div class="search-container">
<div class="filter-section">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="关键字" prop="keywords">
<el-input
@@ -20,9 +20,9 @@
</el-form>
</div>
<el-card shadow="hover" class="data-table">
<div class="data-table__toolbar">
<div class="data-table__toolbar--actions">
<el-card shadow="hover" class="table-section">
<div class="table-section__toolbar">
<div class="table-section__toolbar--actions">
<el-button type="success" icon="plus" @click="handleAddClick()">新增</el-button>
<el-button
type="danger"
@@ -40,7 +40,7 @@
highlight-current-row
:data="tableData"
border
class="data-table__content"
class="table-section__content"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />

10
src/views/system/menu/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="app-container">
<!-- 搜索区域 -->
<div class="search-container">
<div class="filter-section">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="关键字" prop="keywords">
<el-input
@@ -19,9 +19,9 @@
</el-form>
</div>
<el-card shadow="hover" class="data-table">
<div class="data-table__toolbar">
<div class="data-table__toolbar--actions">
<el-card shadow="hover" class="table-section">
<div class="table-section__toolbar">
<div class="table-section__toolbar--actions">
<el-button
v-hasPerm="['sys:menu:add']"
type="success"
@@ -42,7 +42,7 @@
children: 'children',
hasChildren: 'hasChildren',
}"
class="data-table__content"
class="table-section__content"
@row-click="handleRowClick"
>
<el-table-column label="菜单名称" min-width="200">

6
src/views/system/notice/components/MyNotice.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="app-container">
<!-- 搜索区域 -->
<div class="search-container">
<div class="filter-section">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="通知标题" prop="title">
<el-input
@@ -29,13 +29,13 @@
</el-form>
</div>
<el-card shadow="hover" class="data-table">
<el-card shadow="hover" class="table-section">
<el-table
ref="dataTableRef"
v-loading="loading"
:data="pageData"
highlight-current-row
class="data-table__content"
class="table-section__content"
>
<el-table-column type="index" label="序号" width="60" />
<el-table-column label="通知标题" prop="title" min-width="200" />

10
src/views/system/notice/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="app-container">
<!-- 搜索区域 -->
<div class="search-container">
<div class="filter-section">
<el-form ref="queryFormRef" :model="queryParams" :inline="true" label-suffix=":">
<el-form-item label="标题123" prop="title">
<el-input
@@ -32,9 +32,9 @@
</el-form>
</div>
<el-card shadow="hover" class="data-table">
<div class="data-table__toolbar">
<div class="data-table__toolbar--actions">
<el-card shadow="hover" class="table-section">
<div class="table-section__toolbar">
<div class="table-section__toolbar--actions">
<el-button
v-hasPerm="['sys:notice:add']"
type="success"
@@ -60,7 +60,7 @@
v-loading="loading"
:data="pageData"
highlight-current-row
class="data-table__content"
class="table-section__content"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />

10
src/views/system/role/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="app-container">
<!-- 搜索区域 -->
<div class="search-container">
<div class="filter-section">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item prop="keywords" label="关键字">
<el-input
@@ -19,9 +19,9 @@
</el-form>
</div>
<el-card shadow="hover" class="data-table">
<div class="data-table__toolbar">
<div class="data-table__toolbar--actions">
<el-card shadow="hover" class="table-section">
<div class="table-section__toolbar">
<div class="table-section__toolbar--actions">
<el-button type="success" icon="plus" @click="handleOpenDialog()">新增</el-button>
<el-button
type="danger"
@@ -40,7 +40,7 @@
:data="roleList"
highlight-current-row
border
class="data-table__content"
class="table-section__content"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />

14
src/views/system/user/index.vue
View File

@@ -10,7 +10,7 @@
<!-- 用户列表 -->
<el-col :lg="20" :xs="24">
<!-- 搜索区域 -->
<div class="search-container">
<div class="filter-section">
<el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="auto">
<el-form-item label="关键字" prop="keywords">
<el-input
@@ -52,9 +52,9 @@
</el-form>
</div>
<el-card shadow="hover" class="data-table">
<div class="data-table__toolbar">
<div class="data-table__toolbar--actions">
<el-card shadow="hover" class="table-section">
<div class="table-section__toolbar">
<div class="table-section__toolbar--actions">
<el-button
v-hasPerm="['sys:user:add']"
type="success"
@@ -73,7 +73,7 @@
删除
</el-button>
</div>
<div class="data-table__toolbar--tools">
<div class="table-section__toolbar--tools">
<el-button
v-hasPerm="'sys:user:import'"
icon="upload"
@@ -94,7 +94,7 @@
border
stripe
highlight-current-row
class="data-table__content"
class="table-section__content"
row-key="id"
@selection-change="handleSelectionChange"
>
@@ -615,3 +615,5 @@ onMounted(() => {
handleQuery();
});
</script>
<style scoped lang="scss"></style>