diff --git a/backend/app/api/v1/module_system/user/schema.py b/backend/app/api/v1/module_system/user/schema.py
index fa3d4249..8eee6179 100644
--- a/backend/app/api/v1/module_system/user/schema.py
+++ b/backend/app/api/v1/module_system/user/schema.py
@@ -83,7 +83,7 @@ class UserUpdateSchema(UserCreateSchema):
     last_login: Optional[DateTimeStr] = Field(default=None, description="最后登录时间")
 
 
-class UserOutSchema(UserCreateSchema, BaseSchema):
+class UserOutSchema(UserUpdateSchema, BaseSchema):
     """响应"""
     model_config = ConfigDict(arbitrary_types_allowed=True, from_attributes=True)
     
diff --git a/backend/app/config/setting.py b/backend/app/config/setting.py
index b64feb3e..fd88737e 100755
--- a/backend/app/config/setting.py
+++ b/backend/app/config/setting.py
@@ -72,6 +72,7 @@ class Settings(BaseSettings):
     ALLOW_METHODS: List[str] = ["*"]   # 允许的HTTP方法
     ALLOW_HEADERS: List[str] = ["*"]   # 允许的请求头
     ALLOW_CREDENTIALS: bool = True     # 是否允许携带cookie
+    CORS_EXPOSE_HEADERS: list[str] = ['X-Request-ID']
 
     # ================================================= #
     # ******************* 登录认证配置 ****************** #
diff --git a/backend/app/core/middlewares.py b/backend/app/core/middlewares.py
index 84702642..da4d5355 100644
--- a/backend/app/core/middlewares.py
+++ b/backend/app/core/middlewares.py
@@ -24,7 +24,8 @@ def __init__(self, app: ASGIApp) -> None:
             "allow_origins": settings.ALLOW_ORIGINS,
             "allow_methods": settings.ALLOW_METHODS,
             "allow_headers": settings.ALLOW_HEADERS,
-            "allow_credentials": settings.ALLOW_CREDENTIALS
+            "allow_credentials": settings.ALLOW_CREDENTIALS,
+            "expose_headers": settings.CORS_EXPOSE_HEADERS,
         }
         super().__init__(app, **CORSMiddlewareConfig)
 
diff --git a/fastdocs/src/public/group.jpg b/fastdocs/src/public/group.jpg
index 38d9e1ad..1d8124ab 100644
Binary files a/fastdocs/src/public/group.jpg and b/fastdocs/src/public/group.jpg differ
diff --git a/frontend/src/api/generator/demo.ts b/frontend/src/api/generator/demo.ts
index f63a2cde..ba5a6792 100644
--- a/frontend/src/api/generator/demo.ts
+++ b/frontend/src/api/generator/demo.ts
@@ -67,7 +67,7 @@ const ExampleAPI = {
     });
   },
 
-  importExample(body: any) {
+  importExample(body: FormData) {
     return request<ApiResponse>({
       url: `${API_PATH}/import`,
       method: "post",
diff --git a/frontend/src/api/system/dict.ts b/frontend/src/api/system/dict.ts
index 9a2f44ef..75744441 100644
--- a/frontend/src/api/system/dict.ts
+++ b/frontend/src/api/system/dict.ts
@@ -143,6 +143,8 @@ export interface DictPageQuery extends PageQuery {
   start_time?: string;
   /** 结束时间 */
   end_time?: string;
+  // 创建人ID
+  creator?: number;
 }
 
 export interface DictDataPageQuery extends PageQuery {
@@ -151,6 +153,8 @@ export interface DictDataPageQuery extends PageQuery {
   status?: boolean;
   start_time?: string;
   end_time?: string;
+  // 创建人ID
+  creator?: number;
 }
 
 export interface DictTable {
diff --git a/frontend/src/api/system/log.ts b/frontend/src/api/system/log.ts
index 5e3137b2..e265357f 100644
--- a/frontend/src/api/system/log.ts
+++ b/frontend/src/api/system/log.ts
@@ -46,6 +46,8 @@ export interface LogPageQuery extends PageQuery {
   start_time?: string;
   /** 结束时间 */
   end_time?: string;
+  // 创建人ID
+  creator?: number;
 }
 
 export interface LogTable {
diff --git a/frontend/src/api/system/notice.ts b/frontend/src/api/system/notice.ts
index 29d7af56..c94d60da 100644
--- a/frontend/src/api/system/notice.ts
+++ b/frontend/src/api/system/notice.ts
@@ -80,6 +80,8 @@ export interface NoticePageQuery extends PageQuery {
   start_time?: string;
   /** 结束时间 */
   end_time?: string;
+  // 创建人ID
+  creator?: number;
 }
 
 export interface NoticeTable {
diff --git a/frontend/src/api/system/params.ts b/frontend/src/api/system/params.ts
index 88cab420..72d27ea6 100644
--- a/frontend/src/api/system/params.ts
+++ b/frontend/src/api/system/params.ts
@@ -81,6 +81,8 @@ export interface ConfigPageQuery extends PageQuery {
   start_time?: string;
   /** 结束时间 */
   end_time?: string;
+  // 创建人ID
+  creator?: number;
 }
 
 export interface ConfigTable {
diff --git a/frontend/src/api/system/position.ts b/frontend/src/api/system/position.ts
index 60d24b79..2ef35d9d 100644
--- a/frontend/src/api/system/position.ts
+++ b/frontend/src/api/system/position.ts
@@ -69,6 +69,8 @@ export interface PositionPageQuery extends PageQuery {
   start_time?: string;
   /** 结束时间 */
   end_time?: string;
+  // 创建人ID
+  creator?: number;
 }
 
 export interface PositionTable {
diff --git a/frontend/src/api/system/role.ts b/frontend/src/api/system/role.ts
index 6784121e..8cf609ca 100644
--- a/frontend/src/api/system/role.ts
+++ b/frontend/src/api/system/role.ts
@@ -77,6 +77,8 @@ export interface TablePageQuery extends PageQuery {
   start_time?: string;
   /** 结束时间 */
   end_time?: string;
+  // 创建人ID
+  creator?: number;
 }
 
 export interface RoleTable {
diff --git a/frontend/src/api/system/user.ts b/frontend/src/api/system/user.ts
index caae4fd6..b3f753d0 100644
--- a/frontend/src/api/system/user.ts
+++ b/frontend/src/api/system/user.ts
@@ -159,6 +159,8 @@ export interface UserPageQuery extends PageQuery {
   start_time?: string;
   /** 结束时间 */
   end_time?: string;
+  // 创建人ID
+  creator?: number;
 }
 
 export interface searchSelectDataType {
@@ -181,10 +183,10 @@ export interface UserInfo {
   dept_id?: deptTreeType["id"];
   dept_name?: deptTreeType["name"];
   roles?: roleSelectorType[];
-  roleNames?: roleSelectorType["name"][];
+  role_names?: roleSelectorType["name"][];
   role_ids?: roleSelectorType["id"][];
   positions?: positionSelectorType[];
-  positionNames?: positionSelectorType["name"][];
+  position_names?: positionSelectorType["name"][];
   position_ids?: positionSelectorType["id"][];
   is_superuser?: boolean;
   status?: boolean;
@@ -251,9 +253,9 @@ export interface UserForm {
   dept_id?:  number;
   dept_name?: string;
   role_ids?: number[];
-  roleNames?: string[];
+  role_names?: string[];
   position_ids?: number[];
-  positionNames?: string[];
+  position_names?: string[];
   password?: string;
   gender?: number;
   email?: string;
diff --git a/frontend/src/components/CURD/ExportModal.vue b/frontend/src/components/CURD/ExportModal.vue
new file mode 100644
index 00000000..c9e01dba
--- /dev/null
+++ b/frontend/src/components/CURD/ExportModal.vue
@@ -0,0 +1,271 @@
+<template>
+  <div>
+    <!-- 导出弹窗 -->
+    <el-dialog
+      v-model="exportsModalVisible"
+      :align-center="true"
+      title="导出数据"
+      width="600px"
+      style="padding-right: 0"
+      @close="handleCloseExportsModal"
+    >
+      <!-- 滚动 -->
+      <el-scrollbar max-height="60vh">
+        <!-- 表单 -->
+        <el-form
+          ref="exportsFormRef"
+          style="padding-right: var(--el-dialog-padding-primary)"
+          :model="exportsFormData"
+          :rules="exportsFormRules"
+        >
+          <el-form-item label="文件名" prop="filename">
+            <el-input v-model="exportsFormData.filename" placeholder="请输入文件名" clearable />
+          </el-form-item>
+          <el-form-item label="工作表名" prop="sheetname">
+            <el-input v-model="exportsFormData.sheetname" placeholder="请输入工作表名" clearable />
+          </el-form-item>
+          <el-form-item label="数据源" prop="origin">
+            <el-select v-model="exportsFormData.origin">
+              <el-option label="当前数据 (当前页的数据)" :value="ExportsOriginEnum.CURRENT" :disabled="!pageData?.length" />
+              <el-option
+                label="选中数据 (所有选中的数据)"
+                :value="ExportsOriginEnum.SELECTED"
+                :disabled="!selectionData?.length"
+              />
+              <el-option
+                label="全量数据 (所有分页的数据)"
+                :value="ExportsOriginEnum.REMOTE"
+                :disabled="!props.contentConfig.exportsAction"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="字段" prop="fields">
+            <el-checkbox-group v-model="exportsFormData.fields">
+              <template v-for="col in cols" :key="col.prop">
+                <el-checkbox v-if="col.prop" :value="col.prop" :label="col.label" />
+              </template>
+            </el-checkbox-group>
+          </el-form-item>
+        </el-form>
+      </el-scrollbar>
+      <!-- 弹窗底部操作按钮 -->
+      <template #footer>
+        <div style="padding-right: var(--el-dialog-padding-primary)">
+          <el-button type="primary" @click="handleExportsSubmit">确 定</el-button>
+          <el-button @click="handleCloseExportsModal">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import ExcelJS from "exceljs";
+import type { IContentConfig, IObject } from "./types";
+import { useThrottleFn } from "@vueuse/core";
+import { type FormInstance, type FormRules, ElMessage } from "element-plus";
+import { nextTick, ref, reactive, computed } from "vue";
+
+/**
+ * 导出模态框组件属性定义
+ */
+interface ExportModalProps {
+  /** 内容配置 */
+  contentConfig: Pick<IContentConfig, "permPrefix" | "cols" | "exportsAction">;
+  /** 查询参数 */
+  queryParams?: IObject;
+  /** 页面数据 */
+  pageData?: IObject[];
+  /** 选中数据 */
+  selectionData?: IObject[];
+}
+
+// 定义接收的属性
+const props = defineProps<ExportModalProps>();
+
+// 定义模型值（控制弹窗显示/隐藏）
+const exportsModalVisible = defineModel<boolean>("modelValue", {
+  required: true,
+  default: false,
+});
+
+/**
+ * 导出数据源枚举
+ */
+enum ExportsOriginEnum {
+  /** 当前数据 */
+  CURRENT = "current",
+  /** 选中数据 */
+  SELECTED = "selected",
+  /** 远程数据 */
+  REMOTE = "remote",
+}
+
+const exportsFormRef = ref<FormInstance>();
+const exportsFormData = reactive({
+  filename: "",
+  sheetname: "",
+  fields: [] as string[],
+  origin: ExportsOriginEnum.CURRENT,
+});
+const exportsFormRules: FormRules = {
+  fields: [{ required: true, message: "请选择字段" }],
+  origin: [{ required: true, message: "请选择数据源" }],
+};
+
+
+// 表格列
+const cols = computed(() => 
+  props.contentConfig.cols.map((col) => {
+    if (col.initFn) {
+      col.initFn(col);
+    }
+    if (col.show === undefined) {
+      col.show = true;
+    }
+    if (col.prop !== undefined && col.columnKey === undefined && col["column-key"] === undefined) {
+      col.columnKey = col.prop;
+    }
+    if (
+      col.type === "selection" &&
+      col.reserveSelection === undefined &&
+      col["reserve-selection"] === undefined
+    ) {
+      // 配合表格row-key实现跨页多选
+      col.reserveSelection = true;
+    }
+    return col;
+  })
+);
+
+// 初始化字段
+const initFields = () => {
+  const fields: string[] = [];
+  cols.value.forEach((item) => {
+    if (item.prop !== undefined) {
+      fields.push(item.prop);
+    }
+  });
+  exportsFormData.fields = fields;
+};
+
+// 初始化
+initFields();
+
+// 关闭导出弹窗
+function handleCloseExportsModal() {
+  exportsModalVisible.value = false;
+  exportsFormRef.value?.resetFields();
+  nextTick(() => {
+    exportsFormRef.value?.clearValidate();
+  });
+}
+
+// 导出
+function handleExports() {
+  try {
+    const filename = exportsFormData.filename
+      ? exportsFormData.filename
+      : props.contentConfig.permPrefix || "export";
+    const sheetname = exportsFormData.sheetname ? exportsFormData.sheetname : "sheet";
+    const workbook = new ExcelJS.Workbook();
+    const worksheet = workbook.addWorksheet(sheetname);
+    const columns: Partial<ExcelJS.Column>[] = [];
+    cols.value.forEach((col) => {
+      if (col.label && col.prop && exportsFormData.fields.includes(col.prop)) {
+        columns.push({ header: col.label, key: col.prop });
+      }
+    });
+    worksheet.columns = columns;
+    
+    if (exportsFormData.origin === ExportsOriginEnum.REMOTE) {
+      if (props.contentConfig.exportsAction) {
+        const lastFormData = props.queryParams ?? {};
+        props.contentConfig.exportsAction(lastFormData).then((res) => {
+          worksheet.addRows(res);
+          workbook.xlsx
+            .writeBuffer()
+            .then((buffer) => {
+              saveXlsx(buffer, filename as string);
+            })
+            .catch((error) => {
+              console.error("导出远程数据失败:", error);
+              ElMessage.error("导出远程数据失败");
+            });
+        }).catch((error) => {
+          console.error("获取远程数据失败:", error);
+          ElMessage.error("获取远程数据失败");
+        });
+      } else {
+        ElMessage.error("未配置exportsAction");
+      }
+    } else if (exportsFormData.origin === ExportsOriginEnum.SELECTED) {
+      const rows = props.selectionData ?? [];
+      worksheet.addRows(rows);
+      workbook.xlsx
+        .writeBuffer()
+        .then((buffer) => {
+          saveXlsx(buffer, filename as string);
+        })
+        .catch((error) => {
+          console.error("导出选中数据失败:", error);
+          ElMessage.error("导出选中数据失败");
+        });
+    } else {
+      const rows = props.pageData ?? [];
+      worksheet.addRows(rows);
+      workbook.xlsx
+        .writeBuffer()
+        .then((buffer) => {
+          saveXlsx(buffer, filename as string);
+        })
+        .catch((error) => {
+          console.error("导出当前数据失败:", error);
+          ElMessage.error("导出当前数据失败");
+        });
+    }
+  } catch (error) {
+    console.error("导出失败:", error);
+    ElMessage.error("导出失败");
+  }
+}
+
+// 导出确认
+const handleExportsSubmit = useThrottleFn(() => {
+  exportsFormRef.value?.validate((valid: boolean) => {
+    if (valid) {
+      handleExports();
+      handleCloseExportsModal();
+    }
+  });
+}, 3000);
+
+// 浏览器保存文件
+function saveXlsx(fileData: any, fileName: string) {
+  try {
+    const fileType =
+      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
+
+    const blob = new Blob([fileData], { type: fileType });
+    const downloadUrl = window.URL.createObjectURL(blob);
+
+    const downloadLink = document.createElement("a");
+    downloadLink.href = downloadUrl;
+    downloadLink.download = fileName;
+
+    document.body.appendChild(downloadLink);
+    downloadLink.click();
+
+    document.body.removeChild(downloadLink);
+    window.URL.revokeObjectURL(downloadUrl);
+  } catch (error) {
+    console.error("保存文件失败:", error);
+    ElMessage.error("保存文件失败");
+  }
+}
+
+// 提供给父组件的方法
+defineExpose({
+  handleCloseExportsModal,
+});
+</script>
diff --git a/frontend/src/components/Upload/ImportModal.vue b/frontend/src/components/CURD/ImportModal.vue
similarity index 57%
rename from frontend/src/components/Upload/ImportModal.vue
rename to frontend/src/components/CURD/ImportModal.vue
index f58b5e63..6cc1a270 100644
--- a/frontend/src/components/Upload/ImportModal.vue
+++ b/frontend/src/components/CURD/ImportModal.vue
@@ -1,12 +1,22 @@
 <template>
   <div>
     <!-- 导入弹窗 -->
-    <el-dialog v-model="importModalVisible" :align-center="true" :title="props.title" :width="props.width" @close="handleClose">
+    <el-dialog 
+      v-model="importModalVisible" 
+      :align-center="true" 
+      :title="props.title" 
+      :width="props.width" 
+      style="padding-right: 0"
+      @close="handleClose">
       <!-- 滚动 -->
       <el-scrollbar :max-height="props.maxHeight">
         <!-- 表单 -->
-        <el-form ref="importFormRef" style="padding-right: var(--el-dialog-padding-primary)" :model="importFormData" :rules="importFormRules">
-          <el-form-item label="文件名" prop="files">
+        <el-form 
+          ref="importFormRef" 
+          style="padding-right: var(--el-dialog-padding-primary)" 
+          :model="importFormData" 
+          :rules="importFormRules">
+          <el-form-item prop="files">
             <el-upload 
               ref="uploadRef" 
               v-model:file-list="importFormData.files" 
@@ -55,139 +65,126 @@
 <script lang="ts" setup>
 import { ElMessage, type UploadUserFile } from "element-plus";
 import { ref, reactive } from "vue";
+import type { IContentConfig, IObject } from "./types";
 
-// 定义props
-const props = defineProps({
+/**
+ * 导入模态框组件属性定义
+ */
+interface ImportModalProps {
   /**
    * 弹窗标题
    */
-  title: {
-    type: String,
-    default: "导入数据"
-  },
+  title?: string;
 
   /**
    * 弹窗宽度
    */
-  width: {
-    type: String,
-    default: "600px"
-  },
+  width?: string;
 
   /**
    * 最大高度
    */
-  maxHeight: {
-    type: String,
-    default: "60vh"
-  },
+  maxHeight?: string;
 
   /**
    * 接受的文件类型
    */
-  accept: {
-    type: String,
-    default: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
-  },
+  accept?: string;
 
   /**
    * 文件数量限制
    */
-  limit: {
-    type: Number,
-    default: 1
-  },
+  limit?: number;
 
   /**
    * 是否显示下载模板按钮
    */
-  showTemplateDownload: {
-    type: Boolean,
-    default: true
-  },
+  showTemplateDownload?: boolean;
 
   /**
    * 拖放提示文本
    */
-  dropText: {
-    type: String,
-    default: undefined
-  },
+  dropText?: string;
 
   /**
    * 浏览按钮文本
    */
-  browseText: {
-    type: String,
-    default: undefined
-  },
+  browseText?: string;
 
   /**
    * 模板下载按钮文本
    */
-  templateDownloadText: {
-    type: String,
-    default: undefined
-  },
+  templateDownloadText?: string;
 
   /**
    * 取消按钮文本
    */
-  cancelButtonText: {
-    type: String,
-    default: undefined
-  },
+  cancelButtonText?: string;
 
   /**
    * 确认按钮文本
    */
-  confirmButtonText: {
-    type: String,
-    default: undefined
-  },
+  confirmButtonText?: string;
 
   /**
    * 注意事项文本
    */
-  note: {
-    type: String,
-    default: "注意事项："
-  },
+  note?: string;
 
   /**
    * 文件类型警告文本
    */
-  fileTypeWarning: {
-    type: String,
-    default: "格式为*.xlsx / *.xls，文件不超过 5MB"
-  },
+  fileTypeWarning?: string;
 
   /**
    * 上传文件的参数名
    */
-  uploadFileName: {
-    type: String,
-    default: "file"
-  },
+  uploadFileName?: string;
 
   /**
    * 上传请求的额外参数
    */
-  uploadData: {
-    type: Object,
-    default: () => ({})
-  }
+  uploadData?: IObject;
+
+  /**
+   * 导入配置
+   */
+  contentConfig: IContentConfig;
+}
+
+// 定义props
+const props = withDefaults(defineProps<ImportModalProps>(), {
+  title: "导入数据",
+  width: "600px",
+  maxHeight: "60vh",
+  accept: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel",
+  limit: 1,
+  showTemplateDownload: true,
+  note: "注意事项：",
+  fileTypeWarning: "格式为*.xlsx / *.xls，文件不超过 5MB",
+  uploadFileName: "file",
+  uploadData: () => ({}),
 });
 
 // 定义模型值（控制弹窗显示/隐藏）
-const importModalVisible = defineModel("modelValue", {
-  type: Boolean,
+const importModalVisible = defineModel<boolean>("modelValue", {
   required: true,
   default: false
 });
 
 // 定义事件
-const emit = defineEmits(["import-success", "import-fail", "close", "download-template", "upload"]);
+const emit = defineEmits<{
+  /** 导入成功事件 */
+  "import-success": [data: any];
+  /** 导入失败事件 */
+  "import-fail": [error: any];
+  /** 关闭事件 */
+  close: [];
+  /** 下载模板事件 */
+  "download-template": [];
+  /** 上传事件 */
+  upload: [formData: FormData, file: File];
+}>();
 
 // 引用
 const importFormRef = ref(null);
@@ -211,10 +208,47 @@ const handleFileExceed = () => {
   ElMessage.warning(`只能上传${props.limit}个文件`);
 };
 
-// 下载导入模板 - 由父组件实现具体逻辑
-const handleDownloadTemplate = () => {
-  emit("download-template");
-};
+// 浏览器保存文件
+function saveXlsx(fileData: any, fileName: string) {
+  const fileType =
+    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
+
+  const blob = new Blob([fileData], { type: fileType });
+  const downloadUrl = window.URL.createObjectURL(blob);
+
+  const downloadLink = document.createElement("a");
+  downloadLink.href = downloadUrl;
+  downloadLink.download = fileName;
+
+  document.body.appendChild(downloadLink);
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+  window.URL.revokeObjectURL(downloadUrl);
+}
+
+// 下载导入模板
+function handleDownloadTemplate() {
+  try {
+    const importTemplate = props.contentConfig.importTemplate;
+    if (typeof importTemplate === "string") {
+      window.open(importTemplate);
+    } else if (typeof importTemplate === "function") {
+      importTemplate().then((response) => {
+        const fileData = response.data;
+        const fileName = decodeURI(
+          response.headers["content-disposition"].split(";")[1].split("=")[1]
+        );
+        saveXlsx(fileData, fileName);
+      });
+    } else {
+      ElMessage.error("未配置importTemplate");
+    }
+  } catch (error) {
+    console.error("下载模板失败:", error);
+    ElMessage.error("下载模板失败");
+  }
+}
 
 // 上传文件 - 由父组件实现具体逻辑
 const handleUpload = async () => {
@@ -237,8 +271,8 @@ const handleUpload = async () => {
     // 触发上传事件，由父组件处理具体上传逻辑
     emit("upload", formData, file);
   } catch (error: any) {
-    console.error(error);
-    ElMessage.error("上传失败：" + error);
+    console.error("上传失败:", error);
+    ElMessage.error("上传失败：" + error.message || error);
     emit("import-fail", error);
   } finally {
     loading.value = false;
@@ -256,4 +290,4 @@ const handleClose = () => {
 defineExpose({
   handleClose
 });
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/components/CURD/PageContent.vue b/frontend/src/components/CURD/PageContent.vue
index fd547856..862fc199 100644
--- a/frontend/src/components/CURD/PageContent.vue
+++ b/frontend/src/components/CURD/PageContent.vue
@@ -471,8 +471,8 @@ const pagination = reactive(
 );
 // 分页相关的请求参数
 const request = props.contentConfig.request ?? {
-  pageName: "pageNum",
-  limitName: "pageSize",
+  page_no: 1,
+  page_size: 10,
 };
 
 const tableRef = ref<TableInstance>();
@@ -861,8 +861,8 @@ function fetchPageData(formData: IObject = {}, isRestart = false) {
     .indexAction(
       showPagination
         ? {
-            [request.pageName]: pagination.currentPage,
-            [request.limitName]: pagination.pageSize,
+            [request.page_no]: pagination.currentPage,
+            [request.page_size]: pagination.pageSize,
             ...formData,
           }
         : formData
diff --git a/frontend/src/components/CURD/helpers.ts b/frontend/src/components/CURD/helpers.ts
new file mode 100644
index 00000000..e7779398
--- /dev/null
+++ b/frontend/src/components/CURD/helpers.ts
@@ -0,0 +1,90 @@
+import type { IObject, IComponentType, ISearchComponent } from "./types";
+import { markRaw } from "vue";
+import InputTag from "@/components/InputTag/index.vue";
+import IconSelect from "@/components/IconSelect/index.vue";
+import DatePicker from "@/components/DatePicker/index.vue";
+
+/**
+ * 获取提示属性
+ * @param tips 提示内容
+ * @returns 提示属性对象
+ */
+export const getTooltipProps = (tips: string | IObject) => {
+  return typeof tips === "string" ? { content: tips } : tips;
+};
+
+/**
+ * 模态框组件映射表
+ */
+export const modalComponentMap = new Map<IComponentType, any>([
+  // @ts-ignore
+  ["input", markRaw(ElInput)],
+  // @ts-ignore
+  ["select", markRaw(ElSelect)],
+  // @ts-ignore
+  ["switch", markRaw(ElSwitch)],
+  // @ts-ignore
+  ["cascader", markRaw(ElCascader)],
+  // @ts-ignore
+  ["input-number", markRaw(ElInputNumber)],
+  // @ts-ignore
+  ["input-tag", markRaw(InputTag)],
+  // @ts-ignore
+  ["time-picker", markRaw(ElTimePicker)],
+  // @ts-ignore
+  ["time-select", markRaw(ElTimeSelect)],
+  // @ts-ignore
+  ["date-picker", markRaw(ElDatePicker)],
+  // @ts-ignore
+  ["tree-select", markRaw(ElTreeSelect)],
+  // @ts-ignore
+  ["custom-tag", markRaw(InputTag)],
+  // @ts-ignore
+  ["text", markRaw(ElText)],
+  // @ts-ignore
+  ["radio", markRaw(ElRadioGroup)],
+  // @ts-ignore
+  ["checkbox", markRaw(ElCheckboxGroup)],
+  // @ts-ignore
+  ["icon-select", markRaw(IconSelect)],
+  // @ts-ignore
+  ["custom", ""],
+]);
+
+/**
+ * 搜索组件映射表
+ */
+export const searchComponentMap = new Map<ISearchComponent, any>([
+  // @ts-ignore
+  ["input", markRaw(ElInput)],
+  // @ts-ignore
+  ["select", markRaw(ElSelect)],
+  // @ts-ignore
+  ["cascader", markRaw(ElCascader)],
+  // @ts-ignore
+  ["input-number", markRaw(ElInputNumber)],
+  // @ts-ignore
+  ["date-picker", markRaw(DatePicker)],
+  // @ts-ignore
+  ["time-picker", markRaw(ElTimePicker)],
+  // @ts-ignore
+  ["time-select", markRaw(ElTimeSelect)],
+  // @ts-ignore
+  ["tree-select", markRaw(ElTreeSelect)],
+  // @ts-ignore
+  ["input-tag", markRaw(ElInputTag)],
+  // @ts-ignore
+  ["custom-tag", markRaw(InputTag)],
+]);
+
+/**
+ * 子组件映射表
+ */
+export const childrenMap = new Map<IComponentType, any>([
+  // @ts-ignore
+  ["select", markRaw(ElOption)],
+  // @ts-ignore
+  ["radio", markRaw(ElRadio)],
+  // @ts-ignore
+  ["checkbox", markRaw(ElCheckbox)],
+]);
diff --git a/frontend/src/components/CURD/types.ts b/frontend/src/components/CURD/types.ts
index 73f4067c..fd9d87ef 100644
--- a/frontend/src/components/CURD/types.ts
+++ b/frontend/src/components/CURD/types.ts
@@ -9,217 +9,292 @@ export type PageSearchInstance = InstanceType<typeof PageSearch>;
 export type PageContentInstance = InstanceType<typeof PageContent>;
 export type PageModalInstance = InstanceType<typeof PageModal>;
 
+/**
+ * 通用对象类型
+ */
 export type IObject = Record<string, any>;
 
+/**
+ * 组件类型定义
+ */
 type DateComponent = "date-picker" | "time-picker" | "time-select" | "custom-tag" | "input-tag";
 type InputComponent = "input" | "select" | "input-number" | "cascader" | "tree-select";
 type OtherComponent = "text" | "radio" | "checkbox" | "switch" | "icon-select" | "custom";
 export type ISearchComponent = DateComponent | InputComponent;
 export type IComponentType = DateComponent | InputComponent | OtherComponent;
 
+/**
+ * 工具按钮类型定义
+ */
 type ToolbarLeft = "add" | "delete" | "import" | "export";
 type ToolbarRight = "refresh" | "filter" | "imports" | "exports" | "search";
 type ToolbarTable = "edit" | "view" | "delete";
+
+/**
+ * 工具按钮接口
+ */
 export type IToolsButton = {
-  name: string; // 按钮名称
-  text?: string; // 按钮文本
-  perm?: Array<string> | string; // 权限标识(可以是完整权限字符串如'sys:user:add'或操作权限如'add')
-  attrs?: Partial<ButtonProps> & { style?: CSSProperties }; // 按钮属性
-  render?: (row: IObject) => boolean; // 条件渲染
+  /** 按钮名称 */
+  name: string;
+  /** 按钮文本 */
+  text?: string;
+  /** 权限标识(可以是完整权限字符串如'sys:user:add'或操作权限如'add') */
+  perm?: Array<string> | string;
+  /** 按钮属性 */
+  attrs?: Partial<ButtonProps> & { style?: CSSProperties };
+  /** 条件渲染 */
+  render?: (row: IObject) => boolean;
+  /** 按钮提示（支持字符串或Tooltip属性对象） */
+  tooltip?: string | IObject;
 };
+
+/**
+ * 工具按钮默认类型
+ */
 export type IToolsDefault = ToolbarLeft | ToolbarRight | ToolbarTable | IToolsButton;
 
+/**
+ * 操作数据接口
+ */
 export interface IOperateData {
+  /** 操作名称 */
   name: string;
+  /** 行数据 */
   row: IObject;
+  /** 列数据 */
   column: IObject;
+  /** 行索引 */
   $index: number;
 }
 
+/**
+ * 搜索配置接口
+ */
 export interface ISearchConfig {
-  // 权限前缀(如sys:user，用于组成权限标识)，不提供则不进行权限校验
+  /** 权限前缀(如sys:user，用于组成权限标识)，不提供则不进行权限校验 */
   permPrefix?: string;
-  // 标签冒号(默认：false)
+  /** 标签冒号(默认：false) */
   colon?: boolean;
-  // 表单项(默认：[])
+  /** 表单项(默认：[]) */
   formItems?: IFormItems<ISearchComponent>;
-  // 是否开启展开和收缩(默认：true)
+  /** 是否开启展开和收缩(默认：true) */
   isExpandable?: boolean;
-  // 默认展示的表单项数量(默认：3)
+  /** 默认展示的表单项数量(默认：3) */
   showNumber?: number;
-  // 卡片属性
+  /** 卡片属性 */
   cardAttrs?: Partial<CardProps> & { style?: CSSProperties };
-  // form组件属性
+  /** form组件属性 */
   form?: IForm;
-  // 自适应网格布局(使用时表单不要添加 style: { width: "200px" })
+  /** 自适应网格布局(使用时表单不要添加 style: { width: "200px" }) */
   grid?: boolean | "left" | "right";
 }
 
+/**
+ * 内容配置接口
+ */
 export interface IContentConfig<T = any> {
-  // 权限前缀(如sys:user，用于组成权限标识)，不提供则不进行权限校验
+  /** 权限前缀(如sys:user，用于组成权限标识)，不提供则不进行权限校验 */
   permPrefix?: string;
-  // table组件属性
+  /** table组件属性 */
   table?: Omit<TableProps<any>, "data">;
-  // 分页组件位置(默认：left)
+  /** 页面标题与提示（用于卡片头部显示） */
+  title?: string;
+  /** 提示信息 */
+  tooltip?: string | IObject;
+  /** 分页组件位置(默认：left) */
   pagePosition?: "left" | "right";
-  // pagination组件属性
+  /** pagination组件属性 */
   pagination?:
-    | boolean
-    | Partial<
-        Omit<
-          PaginationProps,
-          "v-model:page-size" | "v-model:current-page" | "total" | "currentPage"
-        >
-      >;
-  // 列表的网络请求函数(需返回promise)
+  | boolean
+  | Partial<
+    Omit<
+      PaginationProps,
+      "v-model:page-size" | "v-model:current-page" | "total" | "currentPage"
+    >
+  >;
+  /** 列表的网络请求函数(需返回promise) */
   indexAction: (queryParams: T) => Promise<any>;
-  // 默认的分页相关的请求参数
+  /** 默认的分页相关的请求参数 */
   request?: {
-    pageName: string;
-    limitName: string;
+    page_no: string;
+    page_size: string;
   };
-  // 数据格式解析的回调函数
+  /** 数据格式解析的回调函数 */
   parseData?: (res: any) => {
     total: number;
     list: IObject[];
     [key: string]: any;
   };
-  // 修改属性的网络请求函数(需返回promise)
+  /** 修改属性的网络请求函数(需返回promise) */
   modifyAction?: (data: {
     [key: string]: any;
     field: string;
     value: boolean | string | number;
   }) => Promise<any>;
-  // 删除的网络请求函数(需返回promise)
+  /** 删除的网络请求函数(需返回promise) */
   deleteAction?: (ids: string) => Promise<any>;
-  // 后端导出的网络请求函数(需返回promise)
+  /** 后端导出的网络请求函数(需返回promise) */
   exportAction?: (queryParams: T) => Promise<any>;
-  // 前端全量导出的网络请求函数(需返回promise)
+  /** 前端全量导出的网络请求函数(需返回promise) */
   exportsAction?: (queryParams: T) => Promise<IObject[]>;
-  // 导入模板
+  /** 导入模板 */
   importTemplate?: string | (() => Promise<any>);
-  // 后端导入的网络请求函数(需返回promise)
+  /** 后端导入的网络请求函数(需返回promise) */
   importAction?: (file: File) => Promise<any>;
-  // 前端导入的网络请求函数(需返回promise)
+  /** 前端导入的网络请求函数(需返回promise) */
   importsAction?: (data: IObject[]) => Promise<any>;
-  // 主键名(默认为id)
+  /** 主键名(默认为id) */
   pk?: string;
-  // 表格工具栏(默认:add,delete,export,也可自定义)
+  /** 表格工具栏(默认:add,delete,export,也可自定义) */
   toolbar?: Array<ToolbarLeft | IToolsButton>;
-  // 表格工具栏右侧图标(默认:refresh,filter,imports,exports,search)
+  /** 表格工具栏右侧图标(默认:refresh,filter,imports,exports,search) */
   defaultToolbar?: Array<ToolbarRight | IToolsButton>;
-  // table组件列属性(额外的属性templet,operat,slotName)
+  /** 更多操作按钮配置 */
+  moreButtons?: Array<IToolsButton>;
+  /** table组件列属性(额外的属性templet,operat,slotName) */
   cols: Array<{
+    /** 列类型 */
     type?: "default" | "selection" | "index" | "expand";
+    /** 列标签 */
     label?: string;
+    /** 列属性 */
     prop?: string;
+    /** 列宽度 */
     width?: string | number;
+    /** 最小列宽度 */
+    minWidth?: string | number;
+    /** 对齐方式 */
     align?: "left" | "center" | "right";
+    /** 列键名 */
     columnKey?: string;
+    /** 是否保留选择 */
     reserveSelection?: boolean;
-    // 列是否显示
+    /** 列是否显示 */
     show?: boolean;
-    // 模板
+    /** 模板类型 */
     templet?:
-      | "image"
-      | "list"
-      | "url"
-      | "switch"
-      | "input"
-      | "price"
-      | "percent"
-      | "icon"
-      | "date"
-      | "tool"
-      | "custom";
-    // image模板相关参数
+    | "image"
+    | "list"
+    | "url"
+    | "switch"
+    | "input"
+    | "price"
+    | "percent"
+    | "icon"
+    | "date"
+    | "tool"
+    | "custom";
+    /** image模板相关参数 */
     imageWidth?: number;
+    /** image模板相关参数 */
     imageHeight?: number;
-    // list模板相关参数
+    /** list模板相关参数 */
     selectList?: IObject;
-    // switch模板相关参数
+    /** switch模板相关参数 */
     activeValue?: boolean | string | number;
+    /** switch模板相关参数 */
     inactiveValue?: boolean | string | number;
+    /** switch模板相关参数 */
     activeText?: string;
+    /** switch模板相关参数 */
     inactiveText?: string;
-    // input模板相关参数
+    /** input模板相关参数 */
     inputType?: string;
-    // price模板相关参数
+    /** price模板相关参数 */
     priceFormat?: string;
-    // date模板相关参数
+    /** date模板相关参数 */
     dateFormat?: string;
-    // tool模板相关参数
+    /** tool模板相关参数 */
     operat?: Array<ToolbarTable | IToolsButton>;
-    // filter值拼接符
+    /** filter值拼接符 */
     filterJoin?: string;
-    [key: string]: any;
-    // 初始化数据函数
+    /** 初始化数据函数 */
     initFn?: (item: IObject) => void;
-    // 是否禁用
+    /** 是否禁用 */
     disabled?: boolean;
+    /** 固定列 */
+    fixed?: boolean | "left" | "right";
+    /** 权限 */
+    perm?: string;
+    [key: string]: any;
   }>;
 }
 
+/**
+ * 模态框配置接口
+ */
 export interface IModalConfig<T = any> {
-  // 权限前缀(如sys:user，用于组成权限标识)，不提供则不进行权限校验
+  /** 权限前缀(如sys:user，用于组成权限标识)，不提供则不进行权限校验 */
   permPrefix?: string;
-  // 标签冒号(默认：false)
+  /** 标签冒号(默认：false) */
   colon?: boolean;
-  // 主键名(主要用于编辑数据,默认为id)
+  /** 主键名(主要用于编辑数据,默认为id) */
   pk?: string;
-  // 组件类型(默认：dialog)
+  /** 组件类型(默认：dialog) */
   component?: "dialog" | "drawer";
-  // dialog组件属性
+  /** dialog组件属性 */
   dialog?: Partial<Omit<DialogProps, "modelValue">>;
-  // drawer组件属性
+  /** drawer组件属性 */
   drawer?: Partial<Omit<DrawerProps, "modelValue">>;
-  // form组件属性
+  /** 查看模式渲染方式(默认：form；可选：descriptions) */
+  viewMode?: "form" | "descriptions";
+  /** descriptions组件属性（当 viewMode 为 descriptions 时生效） */
+  descriptions?: IObject;
+  /** form组件属性 */
   form?: IForm;
-  // 表单项
+  /** 表单项 */
   formItems: IFormItems<IComponentType>;
-  // 提交之前处理
+  /** 提交之前处理 */
   beforeSubmit?: (data: T) => void;
-  // 提交的网络请求函数(需返回promise)
+  /** 提交的网络请求函数(需返回promise) */
   formAction?: (data: T) => Promise<any>;
 }
 
+/**
+ * 表单属性类型
+ */
 export type IForm = Partial<Omit<FormProps, "model" | "rules">>;
 
-// 表单项
+/**
+ * 表单项类型
+ */
 export type IFormItems<T = IComponentType> = Array<{
-  // 组件类型(如input,select,radio,custom等)
+  /** 组件类型(如input,select,radio,custom等) */
   type: T;
-  // 标签提示
+  /** 标签提示 */
   tips?: string | IObject;
-  // 标签文本
+  /** 标签 */
   label: string;
-  // 键名
+  /** 属性名 */
   prop: string;
-  // 组件属性
+  /** 属性 */
   attrs?: IObject;
-  // 组件可选项(只适用于select,radio,checkbox组件)
-  options?: Array<{ label: string; value: any; [key: string]: any }> | Ref<any[]>;
-  // 验证规则
+  /** 选项 */
+  options?: Array<{ label: string; value: any;[key: string]: any }> | Ref<any[]>;
+  /** 规则 */
   rules?: FormItemRule[];
-  // 初始值
+  /** 初始值 */
   initialValue?: any;
-  // 插槽名(适用于自定义组件，设置类型为custom)
+  /** 插槽名称 */
   slotName?: string;
-  // 是否隐藏
+  /** 是否隐藏 */
   hidden?: boolean;
-  // layout组件Col属性
+  /** 列属性 */
   col?: Partial<ColProps>;
-  // 组件事件
+  /** 事件 */
   events?: Record<string, (...args: any) => void>;
-  // 初始化数据函数扩展
+  /** 初始化函数 */
   initFn?: (item: IObject) => void;
 }>;
 
+/**
+ * 页面表单接口
+ */
 export interface IPageForm {
-  // 主键名(主要用于编辑数据,默认为id)
+  /** 主键 */
   pk?: string;
-  // form组件属性
+  /** 表单属性 */
   form?: IForm;
-  // 表单项
+  /** 表单项 */
   formItems: IFormItems<IComponentType>;
 }
diff --git a/frontend/src/components/CURD/usePage.ts b/frontend/src/components/CURD/usePage.ts
index 18261f2e..bf836331 100644
--- a/frontend/src/components/CURD/usePage.ts
+++ b/frontend/src/components/CURD/usePage.ts
@@ -1,88 +1,197 @@
-import { ref } from "vue";
+import { ref, Ref } from "vue";
 import type { IObject, PageContentInstance, PageModalInstance, PageSearchInstance } from "./types";
 
+/**
+ * CURD页面组合式函数
+ * @returns 包含各种引用和处理函数的对象
+ */
 function usePage() {
   const searchRef = ref<PageSearchInstance>();
   const contentRef = ref<PageContentInstance>();
   const addModalRef = ref<PageModalInstance>();
   const editModalRef = ref<PageModalInstance>();
+  const viewModalRef = ref<PageModalInstance>();
 
-  // 搜索
+  /**
+   * 处理查询点击事件
+   * @param queryParams 查询参数
+   */
   function handleQueryClick(queryParams: IObject) {
-    const filterParams = contentRef.value?.getFilterParams();
-    contentRef.value?.fetchPageData({ ...queryParams, ...filterParams }, true);
+    try {
+      const filterParams = contentRef.value?.getFilterParams() || {};
+      contentRef.value?.fetchPageData({ ...queryParams, ...filterParams }, true);
+    } catch (error) {
+      console.error("查询数据失败:", error);
+      ElMessage.error("查询数据失败: " + (error instanceof Error ? error.message : String(error)));
+    }
   }
-  // 重置
+
+  /**
+   * 处理重置点击事件
+   * @param queryParams 查询参数
+   */
   function handleResetClick(queryParams: IObject) {
-    const filterParams = contentRef.value?.getFilterParams();
-    contentRef.value?.fetchPageData({ ...queryParams, ...filterParams }, true);
+    try {
+      const filterParams = contentRef.value?.getFilterParams() || {};
+      contentRef.value?.fetchPageData({ ...queryParams, ...filterParams }, true);
+    } catch (error) {
+      console.error("重置数据失败:", error);
+      ElMessage.error("重置数据失败: " + (error instanceof Error ? error.message : String(error)));
+    }
   }
-  // 新增
+
+  /**
+   * 处理新增点击事件
+   * @param RefImpl 可选的模态框引用
+   */
   function handleAddClick(RefImpl?: Ref<PageModalInstance>) {
-    if (RefImpl) {
-      RefImpl?.value.setModalVisible();
-      RefImpl?.value.handleDisabled(false);
-    } else {
-      addModalRef.value?.setModalVisible();
-      addModalRef.value?.handleDisabled(false);
+    try {
+      if (RefImpl) {
+        RefImpl.value?.setModalVisible();
+        RefImpl.value?.handleDisabled(false);
+      } else {
+        addModalRef.value?.setModalVisible();
+        addModalRef.value?.handleDisabled(false);
+      }
+    } catch (error) {
+      console.error("打开新增模态框失败:", error);
+      ElMessage.error("打开新增模态框失败: " + (error instanceof Error ? error.message : String(error)));
     }
   }
-  // 编辑
+
+  /**
+   * 处理编辑点击事件
+   * @param row 行数据
+   * @param callback 回调函数
+   * @param RefImpl 可选的模态框引用
+   */
   async function handleEditClick(
     row: IObject,
-    callback?: (result?: IObject) => IObject,
+    callback?: (result?: IObject) => IObject | Promise<IObject>,
     RefImpl?: Ref<PageModalInstance>
   ) {
-    if (RefImpl) {
-      RefImpl.value?.setModalVisible();
-      RefImpl.value?.handleDisabled(false);
-      const from = await (callback?.(row) ?? Promise.resolve(row));
-      RefImpl.value?.setFormData(from ? from : row);
-    } else {
-      editModalRef.value?.setModalVisible();
-      editModalRef.value?.handleDisabled(false);
-      const from = await (callback?.(row) ?? Promise.resolve(row));
-      editModalRef.value?.setFormData(from ? from : row);
+    try {
+      if (RefImpl) {
+        RefImpl.value?.setModalVisible();
+        RefImpl.value?.handleDisabled(false);
+        const from = await (callback?.(row) ?? Promise.resolve(row));
+        RefImpl.value?.setFormData(from ? from : row);
+      } else {
+        editModalRef.value?.setModalVisible();
+        editModalRef.value?.handleDisabled(false);
+        const from = await (callback?.(row) ?? Promise.resolve(row));
+        editModalRef.value?.setFormData(from ? from : row);
+      }
+    } catch (error) {
+      console.error("打开编辑模态框失败:", error);
+      ElMessage.error("打开编辑模态框失败: " + (error instanceof Error ? error.message : String(error)));
     }
   }
-  // 查看
+
+  /**
+   * 处理查看点击事件
+   * @param row 行数据
+   * @param callback 回调函数
+   * @param RefImpl 可选的模态框引用
+   */
   async function handleViewClick(
     row: IObject,
-    callback?: (result?: IObject) => IObject,
+    callback?: (result?: IObject) => IObject | Promise<IObject>,
     RefImpl?: Ref<PageModalInstance>
   ) {
-    if (RefImpl) {
-      RefImpl.value?.setModalVisible();
-      RefImpl.value?.handleDisabled(true);
-      const from = await (callback?.(row) ?? Promise.resolve(row));
-      RefImpl.value?.setFormData(from ? from : row);
-    } else {
-      editModalRef.value?.setModalVisible();
-      editModalRef.value?.handleDisabled(true);
-      const from = await (callback?.(row) ?? Promise.resolve(row));
-      editModalRef.value?.setFormData(from ? from : row);
+    try {
+      if (RefImpl) {
+        RefImpl.value?.setModalVisible();
+        RefImpl.value?.handleDisabled(true);
+        const from = await (callback?.(row) ?? Promise.resolve(row));
+        RefImpl.value?.setFormData(from ? from : row);
+      } else {
+        viewModalRef.value?.setModalVisible();
+        viewModalRef.value?.handleDisabled(true);
+        const from = await (callback?.(row) ?? Promise.resolve(row));
+        viewModalRef.value?.setFormData(from ? from : row);
+      }
+    } catch (error) {
+      console.error("打开查看模态框失败:", error);
+      ElMessage.error("打开查看模态框失败: " + (error instanceof Error ? error.message : String(error)));
     }
   }
-  // 表单提交
+
+  /**
+   * 处理表单提交点击事件
+   */
   function handleSubmitClick() {
-    //根据检索条件刷新列表数据
-    const queryParams = searchRef.value?.getQueryParams();
-    contentRef.value?.fetchPageData(queryParams, true);
+    try {
+      //根据检索条件刷新列表数据
+      const queryParams = searchRef.value?.getQueryParams() || {};
+      contentRef.value?.fetchPageData(queryParams, true);
+    } catch (error) {
+      console.error("提交表单失败:", error);
+      ElMessage.error("提交表单失败: " + (error instanceof Error ? error.message : String(error)));
+    }
   }
-  // 导出
+
+  /**
+   * 处理导出点击事件
+   */
   function handleExportClick() {
-    // 根据检索条件导出数据
-    const queryParams = searchRef.value?.getQueryParams();
-    contentRef.value?.exportPageData(queryParams);
+    try {
+      // 根据检索条件导出数据
+      const queryParams = searchRef.value?.getQueryParams() || {};
+      contentRef.value?.exportPageData(queryParams);
+    } catch (error) {
+      console.error("导出数据失败:", error);
+      ElMessage.error("导出数据失败: " + (error instanceof Error ? error.message : String(error)));
+    }
   }
-  // 搜索显隐
+
+  /**
+   * 处理搜索点击事件
+   */
   function handleSearchClick() {
-    searchRef.value?.toggleVisible();
+    try {
+      searchRef.value?.toggleVisible();
+    } catch (error) {
+      console.error("切换搜索栏失败:", error);
+      ElMessage.error("切换搜索栏失败: " + (error instanceof Error ? error.message : String(error)));
+    }
   }
-  // 涮选数据
+
+  /**
+   * 处理筛选改变事件
+   * @param filterParams 筛选参数
+   */
   function handleFilterChange(filterParams: IObject) {
-    const queryParams = searchRef.value?.getQueryParams();
-    contentRef.value?.fetchPageData({ ...queryParams, ...filterParams }, true);
+    try {
+      const queryParams = searchRef.value?.getQueryParams() || {};
+      contentRef.value?.fetchPageData({ ...queryParams, ...filterParams }, true);
+    } catch (error) {
+      console.error("筛选数据失败:", error);
+      ElMessage.error("筛选数据失败: " + (error instanceof Error ? error.message : String(error)));
+    }
+  }
+
+  /**
+   * 处理更多操作事件
+   * @param name 操作名称
+   * @param selectedRows 选中的行数据
+   * @param callback 回调函数
+   */
+  async function handleMoreOperation(
+    name: string,
+    selectedRows: IObject[],
+    callback?: (name: string, selectedRows: IObject[]) => Promise<void>
+  ) {
+    try {
+      if (callback) {
+        await callback(name, selectedRows);
+      }
+      // 默认刷新数据
+      handleSubmitClick();
+    } catch (error) {
+      console.error("处理更多操作失败:", error);
+      ElMessage.error("处理更多操作失败: " + (error instanceof Error ? error.message : String(error)));
+    }
   }
 
   return {
@@ -90,6 +199,7 @@ function usePage() {
     contentRef,
     addModalRef,
     editModalRef,
+    viewModalRef,
     handleQueryClick,
     handleResetClick,
     handleAddClick,
@@ -99,6 +209,7 @@ function usePage() {
     handleExportClick,
     handleSearchClick,
     handleFilterChange,
+    handleMoreOperation,
   };
 }
 
diff --git a/frontend/src/components/Frame/index.vue b/frontend/src/components/Frame/index.vue
index ad216d0a..b312d230 100644
--- a/frontend/src/components/Frame/index.vue
+++ b/frontend/src/components/Frame/index.vue
@@ -3,8 +3,9 @@
   <div v-loading="loading" :style="'height:' + height">
     <iframe 
       :src="url" 
-      frameborder="no" 
-      style="width: 100%; height: 100%" 
+      frameborder="0" 
+      width="100%"
+      height="100%"
       scrolling="auto" />
   </div>
 </template>
@@ -27,8 +28,21 @@ onMounted(() => {
   setTimeout(() => {
     loading.value = false;
   }, 300);
-  window.onresize = function temp() {
-    height.value = document.documentElement.clientHeight - 94.5 + "px;";
-  };
 })
 </script>
+
+<style lang="scss" scoped>
+/** 关闭tag标签  */
+.app-container {
+  /* 50px = navbar = 50px */
+  height: calc(100vh - 50px);
+}
+
+/** 开启tag标签  */
+.hasTagsView {
+  .app-container {
+    /* 84px = navbar + tags-view = 50px + 34px */
+    height: calc(100vh - 84px);
+  }
+}
+</style>
diff --git a/frontend/src/components/OperationColumn/index.vue b/frontend/src/components/OperationColumn/index.vue
index db532221..7e51dfaa 100644
--- a/frontend/src/components/OperationColumn/index.vue
+++ b/frontend/src/components/OperationColumn/index.vue
@@ -1,3 +1,4 @@
+<!-- 操作列自适应宽度 -->
 <template>
   <el-table-column
     :label="label"
@@ -6,9 +7,9 @@
     :show-overflow-tooltip="showOverflowTooltip"
     :width="finalWidth"
   >
-    <template #default="{ row }">
+    <template #default="{ row, column, $index }">
       <div v-auto-width class="operation-buttons">
-        <slot :row="row"></slot>
+        <slot v-bind="{ row, column, $index }"></slot>
       </div>
     </template>
   </el-table-column>
@@ -19,11 +20,11 @@ interface Props {
   listDataLength: number;
   prop?: string;
   label?: string;
-  fixed?: string;
+  fixed?: string | boolean;
   align?: string;
-  width?: number;
+  width?: number | string;
   showOverflowTooltip?: boolean;
-  minWidth?: number;
+  minWidth?: number | string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -34,7 +35,7 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const count = ref(0);
-const operationWidth = ref(props.minWidth || 80);
+const operationWidth = ref(Number(props.minWidth) || 80);
 
 // 计算操作列宽度
 const calculateWidth = () => {
@@ -42,13 +43,15 @@ const calculateWidth = () => {
 
   if (count.value !== props.listDataLength) return;
   const maxWidth = getOperationMaxWidth();
-  operationWidth.value = Math.max(maxWidth, props.minWidth);
+  operationWidth.value = Math.max(maxWidth, Number(props.minWidth));
   count.value = 0;
 };
 
 // 计算最终宽度
 const finalWidth = computed(() => {
-  return props.width || operationWidth.value || props.minWidth;
+  const widthNum = typeof props.width === 'number' ? props.width : Number(props.width);
+  const minWidthNum = typeof props.minWidth === 'number' ? props.minWidth : Number(props.minWidth);
+  return widthNum || operationWidth.value || minWidthNum;
 });
 
 // 自适应宽度指令
diff --git a/frontend/src/components/TableSelect/index.vue b/frontend/src/components/TableSelect/index.vue
index 0290f0c6..fc992d1d 100644
--- a/frontend/src/components/TableSelect/index.vue
+++ b/frontend/src/components/TableSelect/index.vue
@@ -2,7 +2,7 @@
   <div ref="tableSelectRef" :style="'width:' + width">
     <el-popover
       :visible="popoverVisible"
-      :width="popoverWidth"
+      :width="selectConfig.popover?.width ?? popoverWidth"
       placement="bottom-end"
       v-bind="selectConfig.popover"
       @show="handleShow"
@@ -15,6 +15,8 @@
               :model-value="text"
               :readonly="true"
               :placeholder="placeholder"
+              :clearable="true"
+              @clear="handleClear"
             >
               <template #suffix>
                 <el-icon
@@ -123,10 +125,9 @@
         </el-table>
         <!-- 分页 -->
         <pagination
-          v-if="total > 0"
           v-model:total="total"
-          v-model:page="queryParams.pageNum"
-          v-model:limit="queryParams.pageSize"
+          v-model:page="queryParams.page_no"
+          v-model:limit="queryParams.page_size"
           @pagination="handlePagination"
         />
         <div class="feedback">
@@ -155,7 +156,7 @@ export interface ISelectConfig<T = any> {
   // 占位符
   placeholder?: string;
   // popover组件属性
-  popover?: Partial<Omit<PopoverProps, "visible" | "v-model:visible">>;
+  popover?: Partial<Omit<PopoverProps, "visible" | "v-model:visible">> & { width?: number | string };
   // 列表的网络请求函数(需返回promise)
   indexAction: (_queryParams: T) => Promise<any>;
   // 主键名(跨页选择必填,默认为id)
@@ -199,6 +200,7 @@ const props = withDefaults(
 // 自定义事件
 const emit = defineEmits<{
   confirmClick: [selection: any[]];
+  clearClick: [];
 }>();
 
 // 主键
@@ -218,15 +220,15 @@ const total = ref(0);
 // 列表数据
 const pageData = ref<IObject[]>([]);
 // 每页条数
-const pageSize = 10;
+const page_size = 10;
 // 搜索参数
 const queryParams = reactive<{
-  pageNum: number;
-  pageSize: number;
+  page_no: number;
+  page_size: number;
   [key: string]: any;
 }>({
-  pageNum: 1,
-  pageSize,
+  page_no: 1,
+  page_size,
 });
 
 // 计算popover的宽度
@@ -256,8 +258,8 @@ function handleQuery() {
 function fetchPageData(isRestart = false) {
   loading.value = true;
   if (isRestart) {
-    queryParams.pageNum = 1;
-    queryParams.pageSize = pageSize;
+    queryParams.page_no = 1;
+    queryParams.page_size = page_size;
   }
   props.selectConfig
     .indexAction(queryParams)
@@ -328,6 +330,7 @@ function handleConfirm() {
 function handleClear() {
   tableRef.value?.clearSelection();
   selectedItems.value = [];
+  emit("clearClick");
 }
 // 关闭
 function handleClose() {
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index 65e25f9c..e1754f8a 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -6,6 +6,11 @@
 
 .app-container {
   padding: 12px;
+  border-radius: 4px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
 }
 
 // 进度条颜色
@@ -93,7 +98,7 @@ html.sidebar-color-blue .layout-mix .layout__sidebar--left .el-menu {
 
 // 表格区域样式
 .data-table {
-  // margin-bottom: 16px;
+  margin-bottom: 4px;
 
   // 表格工具栏区域
   &__toolbar {
@@ -101,8 +106,8 @@ html.sidebar-color-blue .layout-mix .layout__sidebar--left .el-menu {
     justify-content: space-between;
     margin-bottom: 16px;
 
-    &--actions,
-    &--tools {
+    &--left,
+    &--right {
       display: flex;
       gap: 8px;
     }
diff --git a/frontend/src/views/application/job/components/JobLogDrawer.vue b/frontend/src/views/application/job/components/JobLogDrawer.vue
index 64283fe8..23e986a2 100644
--- a/frontend/src/views/application/job/components/JobLogDrawer.vue
+++ b/frontend/src/views/application/job/components/JobLogDrawer.vue
@@ -40,7 +40,7 @@
     </div>
 
     <!-- 内容区域 -->
-    <el-card shadow="hover" class="data-table">
+    <el-card class="data-table">
       <template #header>
         <div class="card-header">
           <span>
@@ -54,7 +54,7 @@
 
       <!-- 功能区域 -->
       <div class="data-table__toolbar">
-        <div class="data-table__toolbar--actions">
+        <div class="data-table__toolbar--left">
           <el-row :gutter="10">
             <el-col :span="1.5">
               <el-button type="danger" icon="delete" :disabled="selectIds.length === 0" @click="handleDelete(selectIds)">批量删除</el-button>
@@ -64,11 +64,12 @@
             </el-col>
           </el-row>
         </div>
-        <div class="data-table__toolbar--tools">
+        <div class="data-table__toolbar--right">
           <el-row :gutter="10">
             <el-col :span="1.5">
               <el-tooltip content="导出">
-                <el-button type="warning" icon="download" circle @click="handleExport" />
+                <!-- 将直接导出改为打开导出弹窗 -->
+                <el-button type="warning" icon="download" circle @click="handleOpenExportsModal" />
               </el-tooltip>
             </el-col>
             <el-col :span="1.5">
@@ -146,6 +147,15 @@
         </el-descriptions>
       </template>
     </el-dialog>
+
+    <!-- 导出弹窗 -->
+    <ExportModal
+      v-model="exportsDialogVisible"
+      :content-config="curdContentConfig"
+      :query-params="queryFormData"
+      :page-data="pageTableData"
+      :selection-data="selectionRows"
+    />
   </el-drawer>
 </template>
 
@@ -165,6 +175,8 @@ const props = defineProps({
 import JobAPI, { JobLogPageQuery, JobLogTable } from "@/api/application/job";
 import { useAppStore } from "@/store/modules/app.store";
 import { DeviceEnum } from "@/enums/settings/device.enum";
+import ExportModal from "@/components/CURD/ExportModal.vue";
+import type { IContentConfig } from "@/components/CURD/types";
 
 const appStore = useAppStore();
 const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "80%" : "60%"));
@@ -182,6 +194,10 @@ const drawerVisible = ref<boolean>(false);
 // 分页表单
 const pageTableData = ref<JobLogTable[]>([]);
 
+// 导出弹窗显示状态 & 选中行
+const exportsDialogVisible = ref(false);
+const selectionRows = ref<JobLogTable[]>([]);
+
 // 详情表单
 const detailFormData = ref<JobLogTable>({} as JobLogTable);
 
@@ -258,6 +274,8 @@ async function handleResetQuery() {
 // 行复选框选中项变化
 async function handleSelectionChange(selection: any) {
   selectIds.value = selection.map((item: any) => item.id);
+  // 记录选中行数据供导出弹窗使用
+  selectionRows.value = selection;
 }
 
 // 关闭弹窗
@@ -318,45 +336,46 @@ async function handleClearLog() {
   });
 }
 
-// 导出
-async function handleExport() {
-  ElMessageBox.confirm('是否确认导出当前任务日志?', '警告', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  }).then(async () => {
-    let downloadUrl = '';
-    try {
-      loading.value = true;      
-
-      const response = await JobAPI.exportJobLog(queryFormData);
-      const fileData = response.data;
-      const fileName = decodeURI(response.headers["content-disposition"].split(";")[1].split("=")[1]);
-      const fileType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
-
-      const blob = new Blob([fileData], { type: fileType });
-      downloadUrl = window.URL.createObjectURL(blob);
-
-      const downloadLink = document.createElement("a");
-      downloadLink.href = downloadUrl;
-      downloadLink.download = fileName;
+// 打开导出弹窗
+function handleOpenExportsModal() {
+  exportsDialogVisible.value = true;
+}
 
-      document.body.appendChild(downloadLink);
-      downloadLink.click();
-      
-      document.body.removeChild(downloadLink);
-    } catch (error: any) {
-      console.error('导出失败:', error);
-    } finally {
-      if (downloadUrl) {
-        window.URL.revokeObjectURL(downloadUrl);
-      }
-      loading.value = false;
+// 导出字段
+const exportColumns = [
+  { prop: 'job_name', label: '任务名称' },
+  { prop: 'job_group', label: '任务组名' },
+  { prop: 'status', label: '执行状态' },
+  { prop: 'job_message', label: '执行信息' },
+  { prop: 'exception_info', label: '异常信息' },
+  { prop: 'job_executor', label: '执行器' },
+  { prop: 'invoke_target', label: '调用目标' },
+  { prop: 'job_args', label: '位置参数' },
+  { prop: 'job_kwargs', label: '关键字参数' },
+  { prop: 'job_trigger', label: '触发器' },
+  { prop: 'create_time', label: '创建时间' },
+];
+
+// 导出配置（用于导出弹窗）
+const curdContentConfig = {
+  permPrefix: 'application:job_log',
+  cols: exportColumns as any,
+  exportsAction: async (params: any) => {
+    const query: any = { ...params };
+    query.page_no = 1;
+    query.page_size = 1000;
+    const all: any[] = [];
+    while (true) {
+      const res = await JobAPI.getJobLogList(query);
+      const items = res.data?.data?.items || [];
+      const total = res.data?.data?.total || 0;
+      all.push(...items);
+      if (all.length >= total || items.length === 0) break;
+      query.page_no += 1;
     }
-  }).catch(() => {
-    ElMessageBox.close();
-  });
-}
+    return all;
+  },
+} as unknown as IContentConfig;
 
 // 打开抽屉
 function openDrawer() {
diff --git a/frontend/src/views/application/job/index.vue b/frontend/src/views/application/job/index.vue
index 42fd217b..3f0b4f90 100644
--- a/frontend/src/views/application/job/index.vue
+++ b/frontend/src/views/application/job/index.vue
@@ -62,7 +62,7 @@
     </div>
 
     <!-- 内容区域 -->
-    <el-card shadow="hover" class="data-table">
+    <el-card class="data-table">
       <template #header>
         <div class="card-header">
           <span>
@@ -76,7 +76,7 @@
 
       <!-- 功能区域 -->
       <div class="data-table__toolbar">
-        <div class="data-table__toolbar--actions">
+        <div class="data-table__toolbar--left">
           <el-row :gutter="10">
             <el-col :span="1.5">
               <el-button
@@ -97,7 +97,7 @@
             </el-col>
           </el-row>
         </div>
-        <div class="data-table__toolbar--tools">
+        <div class="data-table__toolbar--right">
           <el-row :gutter="10">
             <el-col :span="1.5">
               <el-tooltip content="导出">
@@ -106,7 +106,7 @@
                   type="warning"
                   icon="download"
                   circle
-                  @click="handleExport"
+                  @click="handleOpenExportsModal"
                 />
               </el-tooltip>
             </el-col>
@@ -200,7 +200,7 @@
           sortable
         />
 
-        <el-table-column fixed="right" label="操作" min-width="300">
+        <OperationColumn :list-data-length="pageTableData.length">
           <template #default="scope">
             <div class="flex">
               <el-button
@@ -262,7 +262,7 @@
               </el-dropdown>
             </div>
           </template>
-        </el-table-column>
+        </OperationColumn>
       </el-table>
 
       <!-- 分页区域 -->
@@ -576,6 +576,13 @@
       </template>
     </el-dialog>
     <JobLogDrawer v-if="drawerVisible" v-model="drawerVisible" :job-id="currentJobId" :job-name="currentJobName" />
+    <ExportModal
+      v-model="exportsDialogVisible"
+      :content-config="curdContentConfig"
+      :query-params="queryFormData"
+      :page-data="pageTableData"
+      :selection-data="selectionRows"
+    />
   </div>
 
 
@@ -594,6 +601,9 @@ import { useDictStore } from "@/store/index";
 import { vue3CronPlus } from "vue3-cron-plus";
 import "vue3-cron-plus/dist/index.css"; // 引入样式
 import  JobLogDrawer from "@/views/application/job/components/JobLogDrawer.vue"
+import OperationColumn from "@/components/OperationColumn/index.vue";
+import ExportModal from "@/components/CURD/ExportModal.vue";
+import type { IContentConfig } from "@/components/CURD/types";
 
 const dictStore = useDictStore();
 
@@ -614,6 +624,10 @@ const intervalTabRef = ref();
 // 分页表单
 const pageTableData = ref<JobTable[]>([]);
 
+// 导出弹窗显示状态 & 选中行
+const exportsDialogVisible = ref(false);
+const selectionRows = ref<JobTable[]>([]);
+
 // 详情表单
 const detailFormData = ref<JobTable>({} as JobTable);
 
@@ -746,6 +760,7 @@ async function resetForm() {
 // 行复选框选中项变化
 async function handleSelectionChange(selection: any) {
   selectIds.value = selection.map((item: any) => item.id);
+  selectionRows.value = selection;
 }
 
 // 关闭弹窗
@@ -836,49 +851,9 @@ async function handleDelete(ids: number[]) {
     });
 }
 
-// 导出
-async function handleExport() {
-  ElMessageBox.confirm("是否确认导出当前任务配置?", "警告", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    type: "warning",
-  })
-    .then(async () => {
-      let downloadUrl = "";
-      try {
-        loading.value = true;
-
-        ElMessage.warning("正在导出数据，请稍候...");
-
-        const response = await JobAPI.exportJob(queryFormData);
-        const fileData = response.data;
-        const fileName = decodeURI(response.headers["content-disposition"].split(";")[1].split("=")[1]);
-        const fileType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
-
-        const blob = new Blob([fileData], { type: fileType });
-        downloadUrl = window.URL.createObjectURL(blob);
-
-        const downloadLink = document.createElement("a");
-        downloadLink.href = downloadUrl;
-        downloadLink.download = fileName;
-
-        document.body.appendChild(downloadLink);
-        downloadLink.click();
-        
-        document.body.removeChild(downloadLink);
-      } catch (error: any) {
-        // 错误信息已经在响应拦截器中处理并显示
-        console.error('导出失败:', error);
-      } finally {
-        if (downloadUrl) {
-          window.URL.revokeObjectURL(downloadUrl);
-        }
-        loading.value = false;
-      }
-    })
-    .catch(() => {
-      ElMessageBox.close();
-    });
+// 打开导出弹窗
+async function handleOpenExportsModal() {
+  exportsDialogVisible.value = true;
 }
 
 function handleIntervalConfirm(interval: string) {
@@ -932,6 +907,42 @@ function handleOpenLogDrawer(jobId: number, jobName: string) {
   drawerVisible.value = true;
 }
 
+// 导出字段
+const exportColumns = [
+  { prop: 'name', label: '任务名称' },
+  { prop: 'func', label: '执行函数' },
+  { prop: 'trigger', label: '触发器' },
+  { prop: 'jobstore', label: '存储器' },
+  { prop: 'executor', label: '执行器' },
+  { prop: 'coalesce', label: '并发执行' },
+  { prop: 'status', label: '状态' },
+  { prop: 'description', label: '描述' },
+  { prop: 'created_at', label: '创建时间' },
+  { prop: 'updated_at', label: '更新时间' },
+];
+
+// 导出配置（用于导出弹窗）
+const curdContentConfig = {
+  permPrefix: 'app:job',
+  cols: exportColumns as any,
+  exportsAction: async (params: any) => {
+    const query: any = { ...params };
+    if (typeof query.status === 'string') query.status = query.status === 'true';
+    query.page_no = 1;
+    query.page_size = 1000;
+    const all: any[] = [];
+    while (true) {
+      const res = await JobAPI.getJobList(query);
+      const items = res.data?.data?.items || [];
+      const total = res.data?.data?.total || 0;
+      all.push(...items);
+      if (all.length >= total || items.length === 0) break;
+      query.page_no += 1;
+    }
+    return all;
+  },
+} as unknown as IContentConfig;
+
 onMounted(async () => {
   // 加载字典数据
   await dictStore.getDict(['sys_job_function','sys_job_executor','sys_job_store', 'sys_job_trigger']);
diff --git a/frontend/src/views/application/workflow/index.vue b/frontend/src/views/application/workflow/index.vue
index 1e0cc0ac..60e972e0 100644
--- a/frontend/src/views/application/workflow/index.vue
+++ b/frontend/src/views/application/workflow/index.vue
@@ -47,7 +47,7 @@
         </div>
 
         <!-- 内容区域 -->
-        <el-card shadow="hover" class="data-table">
+        <el-card class="data-table">
             <template #header>
                 <div class="card-header">
                     <span>
@@ -61,7 +61,7 @@
 
             <!-- 功能区域 -->
             <div class="data-table__toolbar">
-                <div class="data-table__toolbar--actions">
+                <div class="data-table__toolbar--left">
                     <el-button v-hasPerm="['workflow:operator:create']" type="success" icon="plus" @click="handleOpenDialog('create')">新增</el-button>
                     <el-button v-hasPerm="['workflow:operator:delete']" type="danger" icon="delete" :disabled="selectIds.length === 0" @click="handleDelete(selectIds)">批量删除</el-button>
                     <el-dropdown v-hasPerm="['application:myapp:update']" trigger="click">
@@ -74,24 +74,20 @@
                         </template>
                     </el-dropdown>
                 </div>
-                <div class="data-table__toolbar--tools">
+                <div class="data-table__toolbar--right">
                     <el-tooltip content="刷新">
                         <el-button v-hasPerm="['workflow:operator:refresh']" type="warning" icon="refresh" circle @click="handleRefresh"/>
                     </el-tooltip>
-                    <el-tooltip content="列表筛选">
-                        <el-dropdown trigger="click">
-                            <el-button v-hasPerm="['workflow:operator:filter']" type="default" icon="operation" circle/>
-                            <template #dropdown>
-                                <el-dropdown-menu>
-                                    <el-dropdown-item v-for="column in tableColumns" :key="column.prop" :command="column">
-                                        <el-checkbox v-model="column.show">
-                                            {{ column.label }}
-                                        </el-checkbox>
-                                    </el-dropdown-item>
-                                </el-dropdown-menu>
+                    <el-popover placement="bottom" trigger="click">
+                        <template #reference>
+                            <el-button type="danger" icon="operation" circle></el-button>
+                        </template>
+                        <el-scrollbar max-height="350px">
+                            <template v-for="column in tableColumns" :key="column.prop">
+                            <el-checkbox v-if="column.prop" v-model="column.show" :label="column.label" />
                             </template>
-                        </el-dropdown>
-                    </el-tooltip>
+                        </el-scrollbar>
+                    </el-popover>
                 </div>
             </div>
 
diff --git a/frontend/src/views/common/docs/index.vue b/frontend/src/views/common/docs/index.vue
index 6486eead..d365f68c 100644
--- a/frontend/src/views/common/docs/index.vue
+++ b/frontend/src/views/common/docs/index.vue
@@ -20,17 +20,4 @@ onBeforeUnmount(() => {
 
 
 <style lang="scss" scoped>
-/** 关闭tag标签  */
-.app-container {
-  /* 50px = navbar = 50px */
-  height: calc(100vh - 50px);
-}
-
-/** 开启tag标签  */
-.hasTagsView {
-  .app-container {
-    /* 84px = navbar + tags-view = 50px + 34px */
-    height: calc(100vh - 84px);
-  }
-}
 </style>
diff --git a/frontend/src/views/common/redoc/index.vue b/frontend/src/views/common/redoc/index.vue
index e41488e8..70c72f74 100644
--- a/frontend/src/views/common/redoc/index.vue
+++ b/frontend/src/views/common/redoc/index.vue
@@ -19,17 +19,4 @@ onBeforeUnmount(() => {
 </script>
 
 <style lang="scss" scoped>
-/** 关闭tag标签  */
-.app-container {
-  /* 50px = navbar = 50px */
-  height: calc(100vh - 50px);
-}
-
-/** 开启tag标签  */
-.hasTagsView {
-  .app-container {
-    /* 84px = navbar + tags-view = 50px + 34px */
-    height: calc(100vh - 84px);
-  }
-}
 </style>
diff --git a/frontend/src/views/gencode/backcode/index.vue b/frontend/src/views/gencode/backcode/index.vue
index 538b3f2e..796b602f 100644
--- a/frontend/src/views/gencode/backcode/index.vue
+++ b/frontend/src/views/gencode/backcode/index.vue
@@ -20,7 +20,7 @@
     </div>
 
     <!-- 内容区域 -->
-    <el-card shadow="hover" class="data-table">
+    <el-card class="data-table">
       <template #header>
         <div class="card-header">
           <span>
@@ -34,7 +34,7 @@
 
       <!-- 功能区域 -->
       <div class="data-table__toolbar">
-        <div class="data-table__toolbar--actions">
+        <div class="data-table__toolbar--left">
           <el-row :gutter="10">
             <el-col :span="1.5">
               <el-button v-hasPerm="['generator:gencode:create']" type="primary" plain icon="Plus" @click="createTableVisible = true;">创建</el-button>
@@ -50,7 +50,7 @@
             </el-col>
           </el-row>
         </div>
-        <div class="data-table__toolbar--tools">
+        <div class="data-table__toolbar--right">
           <el-row :gutter="10">
             <el-col :span="1.5">
               <el-tooltip content="刷新">
@@ -58,20 +58,16 @@
               </el-tooltip>
             </el-col>
             <el-col :span="1.5">
-              <el-tooltip content="列表筛选">
-                <el-dropdown v-hasPerm="['generator:gencode:filter']" trigger="click">
-                  <el-button type="default" icon="operation" circle/>
-                  <template #dropdown>
-                    <el-dropdown-menu>
-                      <el-dropdown-item v-for="column in tableColumns" :key="column.prop" :command="column">
-                        <el-checkbox v-model="column.show">
-                          {{ column.label }}
-                        </el-checkbox>
-                      </el-dropdown-item>
-                    </el-dropdown-menu>
+              <el-popover placement="bottom" trigger="click">
+                <template #reference>
+                  <el-button type="danger" icon="operation" circle></el-button>
+                </template>
+                <el-scrollbar max-height="350px">
+                  <template v-for="column in tableColumns" :key="column.prop">
+                    <el-checkbox v-if="column.prop" v-model="column.show" :label="column.label" />
                   </template>
-                </el-dropdown>
-              </el-tooltip>
+                </el-scrollbar>
+              </el-popover>
             </el-col>
           </el-row>
         </div>
diff --git a/frontend/src/views/gencode/demo/index.vue b/frontend/src/views/gencode/demo/index.vue
index cd55b44a..af559db4 100644
--- a/frontend/src/views/gencode/demo/index.vue
+++ b/frontend/src/views/gencode/demo/index.vue
@@ -1,257 +1,274 @@
 <!-- 演示示例 -->
 <template>
     <div class="app-container">
-        <!-- 搜索区域 -->
-        <div class="search-container">
-            <el-form ref="queryFormRef" :model="queryFormData" :inline="true" label-suffix=":">
-                <el-form-item prop="name" label="名称">
-                    <el-input v-model="queryFormData.name" placeholder="请输入名称" clearable />
-                </el-form-item>
-                <el-form-item prop="status" label="状态">
-                    <el-select v-model="queryFormData.status" placeholder="请选择状态" style="width: 167.5px" clearable>
-                        <el-option value="true" label="启用" />
-                        <el-option value="false" label="停用" />
-                    </el-select>
-                </el-form-item>
-                <!-- 时间范围，收起状态下隐藏 -->
-                <el-form-item v-if="isExpand" prop="start_time" label="创建时间">
-                    <DatePicker
-                        v-model="dateRange"
-                        @update:model-value="handleDateRangeChange"
-                    />
-                </el-form-item>
-                <!-- 查询、重置、展开/收起按钮 -->
-                <el-form-item class="search-buttons">
-                    <el-button v-hasPerm="['generator:demo:query']" type="primary" icon="search" @click="handleQuery">查询</el-button>
-                    <el-button v-hasPerm="['generator:demo:query']" icon="refresh" @click="handleResetQuery">重置</el-button>
-                    <!-- 展开/收起 -->
-                    <template v-if="isExpandable">
-                        <el-link class="ml-3" type="primary" underline="never" @click="isExpand = !isExpand">
-                            {{ isExpand ? "收起" : "展开" }}
-                            <el-icon>
-                                <template v-if="isExpand">
-                                    <ArrowUp />
-                                </template>
-                                <template v-else>
-                                    <ArrowDown />
-                                </template>
-                            </el-icon>
-                        </el-link>
-                    </template>
-                </el-form-item>
-            </el-form>
-        </div>
-
-        <!-- 内容区域 -->
-        <el-card shadow="hover" class="data-table">
-            <template #header>
-                <div class="card-header">
-                    <span>
-                        <el-tooltip content="演示示例列表">
-                            <QuestionFilled class="w-4 h-4 mx-1" />
-                        </el-tooltip>
-                        演示示例列表
-                    </span>
-                </div>
-            </template>
-
-            <!-- 功能区域 -->
-            <div class="data-table__toolbar">
-                <div class="data-table__toolbar--actions">
-                    <el-row :gutter="10">
-                        <el-col :span="1.5">
-                            <el-button v-hasPerm="['generator:demo:create']" type="success" icon="plus" @click="handleOpenDialog('create')">新增</el-button>
-                        </el-col>
-                        <el-col :span="1.5">
-                            <el-button v-hasPerm="['generator:demo:delete']" type="danger" icon="delete" :disabled="selectIds.length === 0" @click="handleDelete(selectIds)">批量删除</el-button>
-                        </el-col>
-                        <el-col :span="1.5">
-                            <el-dropdown v-hasPerm="['generator:demo:batch']" trigger="click">
-                                <el-button type="default" :disabled="selectIds.length === 0" icon="ArrowDown">更多</el-button>
-                                <template #dropdown>
-                                    <el-dropdown-menu>
-                                        <el-dropdown-item icon="Check" @click="handleMoreClick(true)">批量启用</el-dropdown-item>
-                                        <el-dropdown-item icon="CircleClose" @click="handleMoreClick(false)">批量停用</el-dropdown-item>
-                                    </el-dropdown-menu>
-                                </template>
-                            </el-dropdown>
-                        </el-col>
-                    </el-row>
-                </div>
-                <div class="data-table__toolbar--tools">
-                    <el-row :gutter="10">
-                        <el-col :span="1.5">
-                            <el-tooltip content="导入">
-                                <el-button v-hasPerm="['generator:demo:import']" type="info" icon="upload" circle @click="handleOpenImportDialog"/>
-                            </el-tooltip>
-                        </el-col>
-                        <el-col :span="1.5">
-                            <el-tooltip content="导出">
-                                <el-button v-hasPerm="['generator:demo:export']" type="warning" icon="download" circle @click="handleExport"/>
-                            </el-tooltip>
-                        </el-col>
-                        <el-col :span="1.5">
-                            <el-tooltip content="刷新">
-                                <el-button v-hasPerm="['generator:demo:refresh']" type="primary" icon="refresh" circle @click="handleRefresh"/>
-                            </el-tooltip>
-                        </el-col>
-                        <el-col :span="1.5">
-                            <el-tooltip content="列表筛选">
-                                <el-dropdown v-hasPerm="['generator:demo:filter']" trigger="click">
-                                    <el-button type="default" icon="operation" circle/>
-                                    <template #dropdown>
-                                        <el-dropdown-menu>
-                                            <el-dropdown-item v-for="column in tableColumns" :key="column.prop" :command="column">
-                                                <el-checkbox v-model="column.show">
-                                                    {{ column.label }}
-                                                </el-checkbox>
-                                            </el-dropdown-item>
-                                        </el-dropdown-menu>
-                                    </template>
-                                </el-dropdown>
-                            </el-tooltip>
-                        </el-col>
-                    </el-row>
-                </div>
-            </div>
-
-            <!-- 表格区域：系统配置列表 -->
-            <el-table
-                ref="dataTableRef"
-                v-loading="loading"
-                :data="pageTableData"
-                highlight-current-row
-                class="data-table__content"
-                height="450"
-                border
-                stripe
-                @selection-change="handleSelectionChange"
+      <!-- 搜索区域 -->
+      <div v-show="visible" class="search-container">
+        <el-form
+          ref="queryFormRef"
+          :model="queryFormData"
+          label-suffix=":"
+          :inline="true"
+        >
+          <el-form-item prop="name" label="名称">
+            <el-input v-model="queryFormData.name" placeholder="请输入名称" clearable />
+          </el-form-item>
+          <el-form-item prop="status" label="状态" >
+            <el-select v-model="queryFormData.status" placeholder="请选择状态" style="width: 170px;" clearable>
+              <el-option value="true" label="启用" />
+              <el-option value="false" label="停用" />
+            </el-select>
+          </el-form-item>
+          <!-- 时间范围，收起状态下隐藏 -->
+          <el-form-item v-if="isExpand" prop="start_time" label="创建时间">
+            <DatePicker v-model="dateRange" @update:model-value="handleDateRangeChange" />
+          </el-form-item>
+          <!-- 查询、重置、展开/收起按钮 -->
+          <el-form-item >
+            <el-button
+              v-hasPerm="['generator:demo:query']"
+              type="primary"
+              icon="search"
+              @click="handleQuery"
             >
-                <template #empty>
-                    <el-empty :image-size="80" description="暂无数据" />
-                </template>
-                <el-table-column v-if="tableColumns.find(col => col.prop === 'selection')?.show" type="selection" min-width="55" align="center" />
-                <el-table-column v-if="tableColumns.find(col => col.prop === 'index')?.show" fixed label="序号" min-width="60">
-                    <template #default="scope">
-                        {{ (queryFormData.page_no - 1) * queryFormData.page_size + scope.$index + 1 }}
-                    </template>
-                </el-table-column>
-                <el-table-column v-if="tableColumns.find(col => col.prop === 'name')?.show" label="名称" prop="name" min-width="140" />
-                <el-table-column v-if="tableColumns.find(col => col.prop === 'status')?.show" label="状态" prop="status" min-width="80">
-                    <template #default="scope">
-                        <el-tag :type="scope.row.status === true ? 'success' : 'danger'">
-                            {{ scope.row.status === true ? "启用" : "停用" }}
-                        </el-tag>
-                    </template>
-                </el-table-column>
-                <el-table-column v-if="tableColumns.find(col => col.prop === 'description')?.show" label="描述" prop="description" min-width="140" />
-                <el-table-column v-if="tableColumns.find(col => col.prop === 'created_at')?.show" label="创建时间" prop="created_at" min-width="180" sortable />
-                <el-table-column v-if="tableColumns.find(col => col.prop === 'updated_at')?.show" label="更新时间" prop="updated_at" min-width="180" sortable />
-                <el-table-column v-if="tableColumns.find(col => col.prop === 'creator')?.show" key="creator" label="创建人" min-width="100">
-                    <template #default="scope">
-                        {{ scope.row.creator?.name }}
-                    </template>
-                </el-table-column>
-
-                <el-table-column v-if="tableColumns.find(col => col.prop === 'operation')?.show" fixed="right" label="操作" align="center" min-width="200">
-                    <template #default="scope">
-                        <el-button v-hasPerm="['generator:demo:detail']" type="info" size="small" link icon="document" @click="handleOpenDialog('detail', scope.row.id)">详情</el-button>
-                        <el-button v-hasPerm="['generator:demo:update']" type="primary" size="small" link icon="edit" @click="handleOpenDialog('update', scope.row.id)">编辑</el-button>
-                        <el-button v-hasPerm="['generator:demo:delete']" type="danger" size="small" link icon="delete" @click="handleDelete([scope.row.id])">删除</el-button>
+              查询
+            </el-button>
+            <el-button
+              v-hasPerm="['generator:demo:query']"
+              icon="refresh"
+              @click="handleResetQuery"
+            >
+              重置
+            </el-button>
+            <!-- 展开/收起 -->
+            <template v-if="isExpandable">
+              <el-link class="ml-3" type="primary" underline="never" @click="isExpand = !isExpand">
+                {{ isExpand ? "收起" : "展开" }}
+                <el-icon>
+                  <template v-if="isExpand">
+                    <ArrowUp />
+                  </template>
+                  <template v-else>
+                    <ArrowDown />
+                  </template>
+                </el-icon>
+              </el-link>
+            </template>
+          </el-form-item>
+        </el-form>
+      </div>
+      
+      <!-- 内容区域 -->
+      <el-card class="data-table">
+        <template #header>
+          <div class="card-header">
+            <span>
+              演示示例列表
+              <el-tooltip content="演示示例列表">
+                <QuestionFilled class="w-4 h-4 mx-1" />
+              </el-tooltip>
+            </span>
+          </div>
+        </template>
+
+        <!-- 功能区域 -->
+        <div class="data-table__toolbar">
+          <div class="data-table__toolbar--left">
+            <el-row :gutter="10">
+              <el-col :span="1.5">
+                <el-button v-hasPerm="['generator:demo:create']" type="success" icon="plus" @click="handleOpenDialog('create')">新增</el-button>
+              </el-col>
+              <el-col :span="1.5">
+                <el-button v-hasPerm="['generator:demo:delete']" type="danger" icon="delete" :disabled="selectIds.length === 0" @click="handleDelete(selectIds)">批量删除</el-button>
+              </el-col>
+              <el-col :span="1.5">
+                <el-dropdown v-hasPerm="['generator:demo:batch']" trigger="click">
+                  <el-button type="default" :disabled="selectIds.length === 0" icon="ArrowDown">更多</el-button>
+                  <template #dropdown>
+                    <el-dropdown-menu>
+                      <el-dropdown-item icon="Check" @click="handleMoreClick(true)">批量启用</el-dropdown-item>
+                      <el-dropdown-item icon="CircleClose" @click="handleMoreClick(false)">批量停用</el-dropdown-item>
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
+              </el-col>
+            </el-row>
+          </div>
+          <div class="data-table__toolbar--right">
+            <el-row :gutter="10">
+              <el-col :span="1.5">
+                <el-tooltip content="导入">
+                  <el-button v-hasPerm="['generator:demo:import']" type="success" icon="upload" circle @click="handleOpenImportDialog" />
+                </el-tooltip>
+              </el-col>
+              <el-col :span="1.5">
+                <el-tooltip content="导出">
+                  <el-button v-hasPerm="['generator:demo:export']" type="warning" icon="download" circle @click="handleOpenExportsModal" />
+                </el-tooltip>
+              </el-col>
+              <el-col :span="1.5">
+                <el-tooltip content="搜索显示/隐藏">
+                  <el-button v-hasPerm="['*:*:*']" type="info" icon="search" circle @click="visible = !visible" />
+                </el-tooltip>
+              </el-col>
+              <el-col :span="1.5">
+                <el-tooltip content="刷新">
+                  <el-button v-hasPerm="['generator:demo:refresh']" type="primary" icon="refresh" circle @click="handleRefresh" />
+                </el-tooltip>
+              </el-col>
+              <el-col :span="1.5">
+                <el-popover placement="bottom" trigger="click">
+                  <template #reference>
+                    <el-button type="danger" icon="operation" circle></el-button>
+                  </template>
+                  <el-scrollbar max-height="350px">
+                    <template v-for="column in tableColumns" :key="column.prop">
+                      <el-checkbox v-if="column.prop" v-model="column.show" :label="column.label" />
                     </template>
-                </el-table-column>
-            </el-table>
+                  </el-scrollbar>
+                </el-popover>
+              </el-col>
+            </el-row>
+          </div>
+        </div>
 
-            <!-- 分页区域 -->
-            <template #footer>
-                <pagination v-model:total="total" v-model:page="queryFormData.page_no" v-model:limit="queryFormData.page_size" @pagination="loadingData" />
+        <!-- 表格区域：系统配置列表 -->
+        <el-table ref="tableRef" v-loading="loading" :data="pageTableData" highlight-current-row class="data-table__content" height="450" border stripe @selection-change="handleSelectionChange">
+          <template #empty>
+            <el-empty :image-size="80" description="暂无数据" />
+          </template>
+          <el-table-column v-if="tableColumns.find((col) => col.prop === 'selection')?.show" type="selection" min-width="55" align="center"/>
+          <el-table-column v-if="tableColumns.find((col) => col.prop === 'index')?.show" fixed label="序号" min-width="60">
+            <template #default="scope">
+              {{ (queryFormData.page_no - 1) * queryFormData.page_size + scope.$index + 1 }}
             </template>
-        </el-card>
-
-        <!-- 弹窗区域 -->
-        <el-dialog v-model="dialogVisible.visible" :title="dialogVisible.title" @close="handleCloseDialog">
-            <!-- 详情 -->
-            <template v-if="dialogVisible.type === 'detail'">
-                <el-descriptions :column="4" border>
-                    <el-descriptions-item label="名称" :span="2">
-                        {{ detailFormData.name }}
-                    </el-descriptions-item>
-                    <el-descriptions-item label="状态" :span="2">
-                        <el-tag :type="detailFormData.status ? 'success' : 'danger'">
-                            {{ detailFormData.status ? '启用' : '停用' }}
-                        </el-tag>
-                    </el-descriptions-item>
-                    <el-descriptions-item label="描述" :span="2">
-                        {{ detailFormData.description }}
-                    </el-descriptions-item>
-                    <el-descriptions-item label="创建人" :span="2">
-                        {{ detailFormData.creator?.name }}
-                    </el-descriptions-item>
-                    <el-descriptions-item label="创建时间" :span="2">
-                        {{ detailFormData.created_at }}
-                    </el-descriptions-item>
-                    <el-descriptions-item label="更新时间" :span="2">
-                        {{ detailFormData.updated_at }}
-                    </el-descriptions-item>
-                </el-descriptions>
+          </el-table-column>
+          <el-table-column v-if="tableColumns.find((col) => col.prop === 'name')?.show" label="名称" prop="name" min-width="140" />
+          <el-table-column v-if="tableColumns.find((col) => col.prop === 'status')?.show" label="状态" prop="status" min-width="120">
+            <template #default="scope">
+              <el-tag :type="scope.row.status ? 'success' : 'info'">
+                {{ scope.row.status ? '启用' : '停用' }}
+              </el-tag>
             </template>
-            <!-- 新增、编辑表单 -->
-            <template v-else>
-                <el-form ref="dataFormRef" :model="formData" :rules="rules" label-suffix=":" label-width="auto" label-position="right">
-                    <el-form-item label="名称" prop="name">
-                        <el-input v-model="formData.name" placeholder="请输入名称" :maxlength="50" />
-                    </el-form-item>
-                    <el-form-item label="状态" prop="status">
-                        <el-radio-group v-model="formData.status">
-                            <el-radio :value="true">
-                                启用
-                            </el-radio>
-                            <el-radio :value="false">
-                                停用
-                            </el-radio>
-                        </el-radio-group>
-                    </el-form-item>
-                    <el-form-item label="描述" prop="description">
-                        <el-input v-model="formData.description" :rows="4" :maxlength="100" show-word-limit type="textarea" placeholder="请输入描述" />
-                    </el-form-item>
-                </el-form>
+          </el-table-column>
+          <el-table-column v-if="tableColumns.find((col) => col.prop === 'description')?.show" label="描述" prop="description" min-width="140" />
+          <el-table-column v-if="tableColumns.find((col) => col.prop === 'created_at')?.show" label="创建时间" prop="created_at" min-width="180" />
+          <el-table-column v-if="tableColumns.find((col) => col.prop === 'updated_at')?.show" label="更新时间" prop="updated_at" min-width="180" />
+          <el-table-column v-if="tableColumns.find((col) => col.prop === 'creator')?.show" label="创建人" prop="creator" min-width="120">
+            <template #default="scope">
+              <el-tag>{{ scope.row.creator?.name }}</el-tag>
             </template>
-
-            <template #footer>
-                <div class="dialog-footer">
-                    <!-- 详情弹窗不需要确定按钮的提交逻辑 -->
-                    <el-button @click="handleCloseDialog">取消</el-button>
-                    <el-button v-if="dialogVisible.type !== 'detail'" v-hasPerm="['generator:demo:create']" type="primary" @click="handleSubmit">确定</el-button>
-                    <el-button v-else type="primary" @click="handleCloseDialog">确定</el-button>
-                </div>
+          </el-table-column>
+          <el-table-column v-if="tableColumns.find(col => col.prop === 'operation')?.show" fixed="right" label="操作" align="center" min-width="180">
+            <template #default="scope">
+              <el-button v-hasPerm="['generator:demo:detail']" type="info" size="small" link icon="document" @click="handleOpenDialog('detail', scope.row.id)">详情</el-button>
+              <el-button v-hasPerm="['generator:demo:update']" type="primary" size="small" link icon="edit" @click="handleOpenDialog('update', scope.row.id)">编辑</el-button>
+              <el-button v-hasPerm="['generator:demo:delete']" type="danger" size="small" link icon="delete" @click="handleDelete([scope.row.id])">删除</el-button>
             </template>
-        </el-dialog>
-
-        <!-- 用户导入 -->
-        <ImportModal v-model="importDialogVisible" title="导入数据" @import-success="handleQuery()" @download-template="handleDownloadTemplate" @upload="handleUpload" />
-
+          </el-table-column>
+        </el-table>
+
+        <!-- 分页区域 -->
+        <template #footer>
+          <pagination v-model:total="total" v-model:page="queryFormData.page_no" v-model:limit="queryFormData.page_size" @pagination="loadingData" />
+        </template>
+      </el-card>
+
+      <!-- 弹窗区域 -->
+      <el-dialog v-model="dialogVisible.visible" :title="dialogVisible.title" @close="handleCloseDialog">
+        <!-- 详情 -->
+        <template v-if="dialogVisible.type === 'detail'">
+          <el-descriptions :column="4" border>
+            <el-descriptions-item label="名称" :span="2">
+              {{ detailFormData.name }}
+            </el-descriptions-item>
+            <el-descriptions-item label="状态" :span="2">
+              <el-tag :type="detailFormData.status ? 'success' : 'danger'">
+                {{ detailFormData.status ? '启用' : '停用' }}
+              </el-tag>
+            </el-descriptions-item>
+            <el-descriptions-item label="描述" :span="2">
+              {{ detailFormData.description }}
+            </el-descriptions-item>
+            <el-descriptions-item label="创建人" :span="2">
+              {{ detailFormData.creator?.name }}
+            </el-descriptions-item>
+            <el-descriptions-item label="创建时间" :span="2">
+              {{ detailFormData.created_at }}
+            </el-descriptions-item>
+            <el-descriptions-item label="更新时间" :span="2">
+              {{ detailFormData.updated_at }}
+            </el-descriptions-item>
+          </el-descriptions>
+        </template>
+        <!-- 新增、编辑表单 -->
+        <template v-else>
+          <el-form ref="dataFormRef" :model="formData" :rules="rules" label-suffix=":" label-width="auto" label-position="right">
+            <el-form-item label="名称" prop="name">
+              <el-input v-model="formData.name" placeholder="请输入名称" :maxlength="50" />
+            </el-form-item>
+            <el-form-item label="状态" prop="status">
+              <el-radio-group v-model="formData.status">
+                <el-radio :value="true">启用</el-radio>
+                <el-radio :value="false">停用</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="描述" prop="description">
+              <el-input v-model="formData.description" :rows="4" :maxlength="100" show-word-limit type="textarea" placeholder="请输入描述" />
+            </el-form-item>
+          </el-form>
+        </template>
+
+        <template #footer>
+          <div class="dialog-footer">
+            <!-- 详情弹窗不需要确定按钮的提交逻辑 -->
+            <el-button @click="handleCloseDialog">取消</el-button>
+            <el-button v-if="dialogVisible.type !== 'detail'" v-hasPerm="['generator:demo:submit']" type="primary" @click="handleSubmit">确定</el-button>
+            <el-button v-else v-hasPerm="['sgenerator:demo:detail']" type="primary" @click="handleCloseDialog">确定</el-button>
+          </div>
+        </template>
+      </el-dialog>
+
+      <!-- 导入弹窗 -->
+      <ImportModal 
+        v-model="importDialogVisible" 
+        :content-config="curdContentConfig"
+        @upload="handleUpload" 
+      />
+
+      <!-- 导出弹窗 -->
+      <ExportModal 
+        v-model="exportsDialogVisible"
+        :content-config="curdContentConfig"
+        :query-params="queryFormData"
+        :page-data="pageTableData"
+        :selection-data="selectionRows"
+      />
     </div>
 </template>
 
 <script setup lang="ts">
 defineOptions({
-    name: "Example",
-    inheritAttrs: false,
+  name: "Example",
+  inheritAttrs: false,
 });
 
 import { ref, reactive, onMounted } from "vue";
-import { ElMessage } from "element-plus";
+import { ElMessage, ElMessageBox } from "element-plus";
 import { ResultEnum } from "@/enums/api/result.enum";
 import ExampleAPI, { ExampleTable, ExampleForm, ExamplePageQuery } from "@/api/generator/demo";
-import ImportModal from "@/components/Upload/ImportModal.vue";
+import ImportModal from "@/components/CURD/ImportModal.vue";
+import ExportModal from "@/components/CURD/ExportModal.vue";
 import DatePicker from "@/components/DatePicker/index.vue";
+import type { IContentConfig } from "@/components/CURD/types";
+import { QuestionFilled, ArrowUp, ArrowDown } from "@element-plus/icons-vue";
 
-const emit = defineEmits(['import-success']);
 
+const visible = ref(true);
 const queryFormRef = ref();
 const dataFormRef = ref();
 const total = ref(0);
 const selectIds = ref<number[]>([]);
+const selectionRows = ref<ExampleTable[]>([]);
 const loading = ref(false);
 const isExpand = ref(false);
 const isExpandable = ref(true);
@@ -261,319 +278,280 @@ const pageTableData = ref<ExampleTable[]>([]);
 
 // 表格列配置
 const tableColumns = ref([
-    { prop: 'selection', label: '选择框', show: true },
-    { prop: 'index', label: '序号', show: true },
-    { prop: 'name', label: '名称', show: true },
-    { prop: 'status', label: '状态', show: true },
-    { prop: 'description', label: '描述', show: true },
-    { prop: 'created_at', label: '创建时间', show: true },
-    { prop: 'updated_at', label: '更新时间', show: true },
-    { prop: 'creator', label: '创建人', show: true },
-    { prop: 'operation', label: '操作', show: true }
+  { prop: 'selection', label: '选择框', show: true },
+  { prop: 'index', label: '序号', show: true },
+  { prop: 'name', label: '名称', show: true },
+  { prop: 'status', label: '状态', show: true },
+  { prop: 'description', label: '描述', show: true },
+  { prop: 'created_at', label: '创建时间', show: true },
+  { prop: 'updated_at', label: '更新时间', show: true },
+  { prop: 'creator', label: '创建人', show: true },
+  { prop: 'operation', label: '操作', show: true }
 ])
 
+// 仅用于导出字段的列（排除非数据列及嵌套对象列）
+const exportColumns = [
+  { prop: 'name', label: '名称' },
+  { prop: 'status', label: '状态' },
+  { prop: 'description', label: '描述' },
+  { prop: 'created_at', label: '创建时间' },
+  { prop: 'updated_at', label: '更新时间' },
+];
+
+// 导入/导出配置
+const curdContentConfig = {
+  permPrefix: 'generator:demo',
+  cols: exportColumns as any,
+  importTemplate: () => ExampleAPI.downloadTemplate(),
+} as unknown as IContentConfig;
 // 详情表单
 const detailFormData = ref<ExampleTable>({});
-
 // 日期范围临时变量
 const dateRange = ref<[Date, Date] | []>([]);
 
-// 处理日期范围变化
+ // 处理日期范围变化
 function handleDateRangeChange(range: [Date, Date]) {
-    dateRange.value = range;
-    if (range && range.length === 2) {
-        queryFormData.start_time = range[0].toISOString();
-        queryFormData.end_time = range[1].toISOString();
-    } else {
-        queryFormData.start_time = undefined;
-        queryFormData.end_time = undefined;
-    }
+  dateRange.value = range;
+  if (range && range.length === 2) {
+    queryFormData.start_time = range[0].toISOString();
+    queryFormData.end_time = range[1].toISOString();
+  } else {
+    queryFormData.start_time = undefined;
+    queryFormData.end_time = undefined;
+  }
 }
 
 // 分页查询参数
 const queryFormData = reactive<ExamplePageQuery>({
-    page_no: 1,
-    page_size: 10,
-    name: undefined,
-    status: undefined,
-    start_time: undefined,
-    end_time: undefined,
+  page_no: 1,
+  page_size: 10,
+  name: undefined,
+  status: undefined,
+  start_time: undefined,
+  end_time: undefined,
 });
 
 // 编辑表单
 const formData = reactive<ExampleForm>({
-    id: undefined,
-    name: '',
-    status: true,
-    description: undefined,
+  id: undefined,
+  name: '',
+  status: true,
+  description: undefined,
 })
 
 // 弹窗状态
 const dialogVisible = reactive({
-    title: "",
-    visible: false,
-    type: 'create' as 'create' | 'update' | 'detail',
+  title: "",
+  visible: false,
+  type: 'create' as 'create' | 'update' | 'detail',
 });
 
 // 表单验证规则
 const rules = reactive({
-    name: [{ required: true, message: "请输入名称", trigger: "blur" }],
-    status: [{ required: true, message: "请选择状态", trigger: "blur" }],
+  name: [{ required: true, message: "请输入名称", trigger: "blur" }],
+  status: [{ required: true, message: "请选择状态", trigger: "blur" }],
 });
 
 // 导入弹窗显示状态
 const importDialogVisible = ref(false);
 
+// 导出弹窗显示状态
+const exportsDialogVisible = ref(false);
+
+// 打开导入弹窗
+function handleOpenImportDialog() {
+  importDialogVisible.value = true;
+}
+
+// 打开导出弹窗
+function handleOpenExportsModal() {
+  exportsDialogVisible.value = true;
+}
+
 // 列表刷新
 async function handleRefresh() {
-    await loadingData();
+  await loadingData();
 };
 
 // 加载表格数据
 async function loadingData() {
-    loading.value = true;
-    try {
-        const response = await ExampleAPI.getExampleList(queryFormData);
-        pageTableData.value = response.data.data.items;
-        total.value = response.data.data.total;
-    }
-    catch (error: any) {
-        console.error(error);
-    }
-    finally {
-        loading.value = false;
-    }
+  loading.value = true;
+  try {
+    const response = await ExampleAPI.getExampleList(queryFormData);
+    pageTableData.value = response.data.data.items;
+    total.value = response.data.data.total;
+  }
+  catch (error: any) {
+    console.error(error);
+  }
+  finally {
+    loading.value = false;
+  }
 }
 
 // 查询（重置页码后获取数据）
 async function handleQuery() {
-    queryFormData.page_no = 1;
-    loadingData();
+  queryFormData.page_no = 1;
+  loadingData();
 }
 
 // 重置查询
 async function handleResetQuery() {
-    queryFormRef.value.resetFields();
-    queryFormData.page_no = 1;
-    // 重置日期范围选择器
-    dateRange.value = [];
-    queryFormData.start_time = undefined;
-    queryFormData.end_time = undefined;
-    loadingData();
+  queryFormRef.value.resetFields();
+  queryFormData.page_no = 1;
+  // 重置日期范围选择器
+  dateRange.value = [];
+  queryFormData.start_time = undefined;
+  queryFormData.end_time = undefined;
+  loadingData();
 }
 
 // 定义初始表单数据常量
 const initialFormData: ExampleForm = {
-    id: undefined,
-    name: '',
-    status: true,
-    description: '',
+  id: undefined,
+  name: '',
+  status: true,
+  description: '',
 }
 
 // 重置表单
 async function resetForm() {
-    if (dataFormRef.value) {
-        dataFormRef.value.resetFields();
-        dataFormRef.value.clearValidate();
-    }
-    // 完全重置 formData 为初始状态
-    Object.assign(formData, initialFormData);
+  if (dataFormRef.value) {
+    dataFormRef.value.resetFields();
+    dataFormRef.value.clearValidate();
+  }
+  // 完全重置 formData 为初始状态
+  Object.assign(formData, initialFormData);
 }
 
 // 行复选框选中项变化
 async function handleSelectionChange(selection: any) {
-    selectIds.value = selection.map((item: any) => item.id);
+  selectIds.value = selection.map((item: any) => item.id);
+  selectionRows.value = selection;
 }
 
 // 关闭弹窗
 async function handleCloseDialog() {
-    dialogVisible.visible = false;
-    resetForm();
+  dialogVisible.visible = false;
+  resetForm();
 }
 
 // 打开弹窗
 async function handleOpenDialog(type: 'create' | 'update' | 'detail', id?: number) {
-    dialogVisible.type = type;
-    if (id) {
-        const response = await ExampleAPI.getExampleDetail(id);
-        if (type === 'detail') {
-            dialogVisible.title = "详情";
-            Object.assign(detailFormData.value, response.data.data);
-        } else if (type === 'update') {
-            dialogVisible.title = "修改";
-            Object.assign(formData, response.data.data);
-        }
-    } else {
-        dialogVisible.title = "新增示例";
-        formData.id = undefined;
+  dialogVisible.type = type;
+  if (id) {
+    const response = await ExampleAPI.getExampleDetail(id);
+    if (type === 'detail') {
+      dialogVisible.title = "详情";
+      Object.assign(detailFormData.value, response.data.data);
+    } else if (type === 'update') {
+      dialogVisible.title = "修改";
+      Object.assign(formData, response.data.data);
     }
-    dialogVisible.visible = true;
+  } else {
+    dialogVisible.title = "新增示例";
+    formData.id = undefined;
+  }
+  dialogVisible.visible = true;
 }
 
 // 提交表单（防抖）
 async function handleSubmit() {
-    // 表单校验
-    dataFormRef.value.validate(async (valid: any) => {
-        if (valid) {
-            loading.value = true;
-            // 根据弹窗传入的参数(deatil\create\update)判断走什么逻辑
-            const id = formData.id;
-            if (id) {
-                try {
-                    await ExampleAPI.updateExample(id, { id, ...formData })
-                    dialogVisible.visible = false;
-                    resetForm();
-                    handleCloseDialog();
-                    handleResetQuery();
-                } catch (error: any) {
-                    console.error(error);
-                } finally {
-                    loading.value = false;
-                }
-            } else {
-                try {
-                    await ExampleAPI.createExample(formData)
-                    dialogVisible.visible = false;
-                    resetForm();
-                    handleCloseDialog();
-                    handleResetQuery();
-                } catch (error: any) {
-                    console.error(error);
-                } finally {
-                    loading.value = false;
-                }
-            }
+  // 表单校验
+  dataFormRef.value.validate(async (valid: any) => {
+    if (valid) {
+        loading.value = true;
+        // 根据弹窗传入的参数(deatil\create\update)判断走什么逻辑
+        const id = formData.id;
+        if (id) {
+          try {
+            await ExampleAPI.updateExample(id, { id, ...formData })
+            dialogVisible.visible = false;
+            resetForm();
+            handleCloseDialog();
+            handleResetQuery();
+          } catch (error: any) {
+              console.error(error);
+          } finally {
+            loading.value = false;
+          }
+        } else {
+          try {
+            await ExampleAPI.createExample(formData)
+            dialogVisible.visible = false;
+            resetForm();
+            handleCloseDialog();
+            handleResetQuery();
+          } catch (error: any) {
+            console.error(error);
+          } finally {
+            loading.value = false;
+          }
         }
-    });
+      }
+  });
 }
 
 // 删除、批量删除
 async function handleDelete(ids: number[]) {
-    ElMessageBox.confirm("确认删除该项数据?", "警告", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-    }).then(async () => {
-        try {
-            loading.value = true;
-            await ExampleAPI.deleteExample(ids);
-            handleResetQuery();
-        } catch (error: any) {
-            console.error(error);
-        } finally {
-            loading.value = false;
-        }
-    }).catch(() => {
-        ElMessageBox.close();
-    });
+  ElMessageBox.confirm("确认删除该项数据?", "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(async () => {
+    try {
+      loading.value = true;
+      await ExampleAPI.deleteExample(ids);
+      handleResetQuery();
+    } catch (error: any) {
+      console.error(error);
+    } finally {
+      loading.value = false;
+    }
+  }).catch(() => {
+    ElMessageBox.close();
+  });
 }
 
-// 导出
-async function handleExport() {
-    ElMessageBox.confirm('是否确认导出当前系统配置?', '警告', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
+// 批量启用/停用
+async function handleMoreClick(status: boolean) {
+  if (selectIds.value.length) {
+    ElMessageBox.confirm(`确认${status ? '启用' : '停用'}该项数据?`, "警告", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
     }).then(async () => {
-        let downloadUrl = '';
-        try {
-            loading.value = true;
-
-            const response = await ExampleAPI.exportExample(queryFormData);
-            const fileData = response.data;
-            const fileName = decodeURI(response.headers["content-disposition"].split(";")[1].split("=")[1]);
-            const fileType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
-
-            const blob = new Blob([fileData], { type: fileType });
-            downloadUrl = window.URL.createObjectURL(blob);
-
-            const downloadLink = document.createElement("a");
-            downloadLink.href = downloadUrl;
-            downloadLink.download = fileName;
-
-            document.body.appendChild(downloadLink);
-            downloadLink.click();
-
-            document.body.removeChild(downloadLink);
-        } catch (error: any) {
-            // 错误信息已经在响应拦截器中处理并显示
-            console.error('导出失败:', error);
-        } finally {
-            if (downloadUrl) {
-                window.URL.revokeObjectURL(downloadUrl);
-            }
-            loading.value = false;
-        }
+      try {
+        loading.value = true;
+        await ExampleAPI.batchAvailableExample({ ids: selectIds.value, status });
+        handleResetQuery();
+      } catch (error: any) {
+        console.error(error);
+      } finally {
+        loading.value = false;
+      }
     }).catch(() => {
-        ElMessageBox.close();
+      ElMessageBox.close();
     });
+  }
 }
 
 // 处理上传
-const handleUpload = async (formData: FormData, file: File) => {
-    try {
-        const response = await ExampleAPI.importExample(formData);
-        if (response.data.code === ResultEnum.SUCCESS) {
-        ElMessage.success(`${response.data.msg}，${response.data.data}`);
-        emit('import-success');
-        }
-    } catch (error: any) {
-        console.error(error);
+const handleUpload = async (formData: FormData) => {
+  try {
+    const response = await ExampleAPI.importExample(formData);
+    if (response.data.code === ResultEnum.SUCCESS) {
+      ElMessage.success(`${response.data.msg}，${response.data.data}`);
+      importDialogVisible.value = false;
+      await handleQuery();
     }
+  } catch (error: any) {
+      console.error(error);
+  }
 };
 
-// 下载导入模板
-const handleDownloadTemplate = () => {
-    ExampleAPI.downloadTemplate().then((response: any) => {
-        const fileData = response.data;
-        const fileName = decodeURI(response.headers['content-disposition'].split('; ')[1].split('=')[1]);
-        const fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8';
-
-        const blob = new Blob([fileData], { type: fileType });
-        const downloadUrl = window.URL.createObjectURL(blob);
-
-        const downloadLink = document.createElement('a');
-        downloadLink.href = downloadUrl;
-        downloadLink.download = fileName;
-
-        document.body.appendChild(downloadLink);
-        downloadLink.click();
-
-        document.body.removeChild(downloadLink);
-        window.URL.revokeObjectURL(downloadUrl);
-    });
-};
-
-// 打开导入弹窗
-function handleOpenImportDialog() {
-    importDialogVisible.value = true;
-}
-
-// 批量启用/停用
-async function handleMoreClick(status: boolean) {
-    if (selectIds.value.length) {
-        ElMessageBox.confirm(`确认${status ? '启用' : '停用'}该项数据?`, "警告", {
-            confirmButtonText: "确定",
-            cancelButtonText: "取消",
-            type: "warning",
-        }).then(async () => {
-            try {
-                loading.value = true;
-                await ExampleAPI.batchAvailableExample({ ids: selectIds.value, status });
-                handleResetQuery();
-            } catch (error: any) {
-                console.error(error);
-            } finally {
-                loading.value = false;
-            }
-        }).catch(() => {
-            ElMessageBox.close();
-        });
-    }
-}
-
 onMounted(() => {
-    loadingData();
+  loadingData();
 });
 </script>
 
diff --git a/frontend/src/views/monitor/online/index.vue b/frontend/src/views/monitor/online/index.vue
index 8c91d0b8..ccd5c9ba 100644
--- a/frontend/src/views/monitor/online/index.vue
+++ b/frontend/src/views/monitor/online/index.vue
@@ -22,7 +22,7 @@
     </div>
 
     <!-- 内容区域 -->
-    <el-card shadow="hover" class="data-table">
+    <el-card class="data-table">
       <template #header>
         <div class="card-header">
           <span>
@@ -36,14 +36,14 @@
 
       <!-- 功能区域 -->
       <div class="data-table__toolbar">
-        <div class="data-table__toolbar--actions">
+        <div class="data-table__toolbar--left">
           <el-row :gutter="10">
             <el-col :span="1.5">
               <el-button v-hasPerm="['monitor:online:force_logout']" type="danger" icon="delete" @click="handleClear">强退所有</el-button>
             </el-col>
           </el-row>
         </div>
-        <div class="data-table__toolbar--tools">
+        <div class="data-table__toolbar--right">
           <el-row :gutter="10">
             <el-col :span="1.5">
               <el-tooltip content="刷新">
@@ -51,18 +51,16 @@
               </el-tooltip>
             </el-col>
             <el-col :span="1.5">
-              <el-tooltip content="列表筛选">
-                <el-dropdown v-hasPerm="['monitor:online:filter']" trigger="click">
-                  <el-button type="default" icon="operation" circle />
-                  <template #dropdown>
-                    <el-dropdown-menu>
-                      <el-dropdown-item v-for="column in tableColumns" :key="column.prop" :command="column">
-                        <el-checkbox v-model="column.show">{{ column.label }}</el-checkbox>
-                      </el-dropdown-item>
-                    </el-dropdown-menu>
+              <el-popover placement="bottom" trigger="click">
+                <template #reference>
+                  <el-button type="danger" icon="operation" circle></el-button>
+                </template>
+                <el-scrollbar max-height="350px">
+                  <template v-for="column in tableColumns" :key="column.prop">
+                    <el-checkbox v-if="column.prop" v-model="column.show" :label="column.label" />
                   </template>
-                </el-dropdown>
-              </el-tooltip>
+                </el-scrollbar>
+              </el-popover>
             </el-col>
           </el-row>
         </div>
diff --git a/frontend/src/views/monitor/resource/index.vue b/frontend/src/views/monitor/resource/index.vue
index 488cf83d..9dce8e9a 100644
--- a/frontend/src/views/monitor/resource/index.vue
+++ b/frontend/src/views/monitor/resource/index.vue
@@ -14,7 +14,7 @@
     </div>
 
     <!-- 内容区域 -->
-    <el-card shadow="hover" class="data-table">
+    <el-card class="data-table">
       <template #header>
         <div class="card-header">
           <span>
@@ -43,7 +43,7 @@
 
       <!-- 功能区域 -->
       <div class="data-table__toolbar">
-        <div class="data-table__toolbar--actions">
+        <div class="data-table__toolbar--left">
           <el-row :gutter="10">
             <el-col :span="1.5">
               <el-button v-hasPerm="['monitor:resource:upload']" type="success" icon="plus" @click="handleUpload">上传文件</el-button>
@@ -56,7 +56,7 @@
             </el-col>
           </el-row>
         </div>
-        <div class="data-table__toolbar--tools">
+        <div class="data-table__toolbar--right">
           <el-row :gutter="10">
             <el-col :span="1.5">
               <el-checkbox v-model="showHiddenFiles" v-hasPerm="['monitor:resource:show_hidden']"  @change="handleShowHiddenChange">
diff --git a/frontend/src/views/system/dept/index.vue b/frontend/src/views/system/dept/index.vue
index a1354727..b67b965b 100644
--- a/frontend/src/views/system/dept/index.vue
+++ b/frontend/src/views/system/dept/index.vue
@@ -43,7 +43,7 @@
     </div>
 
     <!-- 内容区域 -->
-    <el-card shadow="hover" class="data-table">
+    <el-card class="data-table">
       <template #header>
         <div class="card-header">
           <span>
@@ -57,7 +57,7 @@
 
       <!-- 功能区域 -->
       <div class="data-table__toolbar">
-        <div class="data-table__toolbar--actions">
+        <div class="data-table__toolbar--left">
           <el-row :gutter="10">
             <el-col :span="1.5">
               <el-button v-hasPerm="['system:dept:create']" type="success" icon="plus" @click="handleOpenDialog('create')">新增</el-button>
@@ -78,26 +78,24 @@
             </el-col>
           </el-row>
         </div>
-        <div class="data-table__toolbar--tools">
+        <div class="data-table__toolbar--right">
           <el-row :gutter="10">
             <el-col :span="1.5">
               <el-tooltip content="刷新">
-                <el-button v-hasPerm="['system:dept:refresh']" type="primary" icon="refresh" circle @click="handleRefresh"/>
+                <el-button type="primary" icon="refresh" circle @click="handleRefresh"/>
               </el-tooltip>
             </el-col>
             <el-col :span="1.5">
-              <el-tooltip content="列表筛选">
-                <el-dropdown v-hasPerm="['system:dept:filter']" trigger="click">
-                  <el-button type="default" icon="operation" circle />
-                  <template #dropdown>
-                    <el-dropdown-menu>
-                      <el-dropdown-item v-for="column in tableColumns" :key="column.prop" :command="column">
-                        <el-checkbox v-model="column.show">{{ column.label }}</el-checkbox>
-                      </el-dropdown-item>
-                    </el-dropdown-menu>
+              <el-popover placement="bottom" trigger="click">
+                <template #reference>
+                  <el-button type="danger" icon="operation" circle />
+                </template>
+                <el-scrollbar max-height="350px">
+                  <template v-for="column in tableColumns" :key="column.prop">
+                    <el-checkbox v-if="column.prop" v-model="column.show" :label="column.label" />
                   </template>
-                </el-dropdown>
-              </el-tooltip>
+                </el-scrollbar>
+              </el-popover>
             </el-col>
           </el-row>
         </div>
diff --git a/frontend/src/views/system/dict/components/DataDrawer.vue b/frontend/src/views/system/dict/components/DataDrawer.vue
index 9ca85596..b57bf297 100644
--- a/frontend/src/views/system/dict/components/DataDrawer.vue
+++ b/frontend/src/views/system/dict/components/DataDrawer.vue
@@ -21,6 +21,13 @@
             @update:model-value="handleDateRangeChange"
           />
         </el-form-item>
+        <el-form-item v-if="isExpand" prop="creator" label="创建人">
+          <UserTableSelect
+              v-model="queryFormData.creator"
+              @confirm-click="handleConfirm"
+              @clear-click="handleQuery"
+          />
+        </el-form-item>
         <!-- 查询、重置、展开/收起按钮 -->
         <el-form-item class="search-buttons">
           <el-button type="primary" icon="search" @click="handleQuery">查询</el-button>
@@ -44,7 +51,7 @@
     </div>
 
     <!-- 内容区域 -->
-    <el-card shadow="hover" class="data-table">
+    <el-card class="data-table">
       <template #header>
         <div class="card-header">
           <span>
@@ -58,7 +65,7 @@
 
       <!-- 功能区域 -->
       <div class="data-table__toolbar">
-        <div class="data-table__toolbar--actions">
+        <div class="data-table__toolbar--left">
           <el-row :gutter="10">
             <el-col :span="1.5">
               <el-button v-hasPerm="['system:dict_data:create']" type="success" icon="plus" @click="handleOpenDialog('create')">新增</el-button>
@@ -79,11 +86,11 @@
             </el-col>
           </el-row>
         </div>
-        <div class="data-table__toolbar--tools">
+        <div class="data-table__toolbar--right">
           <el-row :gutter="10">
             <el-col :span="1.5">
               <el-tooltip content="导出">
-                <el-button v-hasPerm="['system:dict_data:export']" type="warning" icon="download" circle @click="handleExport"/>
+                <el-button v-hasPerm="['system:dict_data:export']" type="warning" icon="download" circle @click="handleOpenExportsModal"/>
               </el-tooltip>
             </el-col>
             <el-col :span="1.5">
@@ -232,6 +239,13 @@
     </el-dialog>
 
   </el-drawer>
+  <ExportModal
+    v-model="exportsDialogVisible"
+    :content-config="curdContentConfig"
+    :query-params="queryFormData"
+    :page-data="pageTableData"
+    :selection-data="selectionRows"
+  />
 </template>
 
 <script setup lang="ts">
@@ -247,9 +261,13 @@ const props = defineProps({
   }
 })
 
+const drawerVisible = defineModel<boolean>()
 import DictAPI, { DictDataTable, DictDataForm, DictDataPageQuery } from "@/api/system/dict";
 import { useAppStore } from "@/store/modules/app.store";
 import { DeviceEnum } from "@/enums/settings/device.enum";
+import UserTableSelect from "@/views/system/user/components/UserTableSelect.vue";
+import ExportModal from "@/components/CURD/ExportModal.vue";
+import type { IContentConfig } from "@/components/CURD/types";
 
 const appStore = useAppStore();
 const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "80%" : "60%"));
@@ -262,11 +280,14 @@ const loading = ref(false);
 
 const isExpand = ref(false);
 const isExpandable = ref(true);
-const drawerVisible = ref<boolean>(false);
 
 // 分页表单
 const pageTableData = ref<DictDataTable[]>([]);
 
+// 导出弹窗显示状态 & 选中行
+const exportsDialogVisible = ref(false);
+const selectionRows = ref<DictDataTable[]>([]);
+
 // 详情表单
 const detailFormData = ref<DictDataTable>({});
 
@@ -279,6 +300,8 @@ const queryFormData = reactive<DictDataPageQuery>({
   status: undefined,
   start_time: undefined,
   end_time: undefined,
+  // 创建人
+  creator: undefined,
 });
 
 // 编辑表单
@@ -357,6 +380,11 @@ async function handleQuery() {
   loadingData();
 }
 
+// 选择创建人后触发查询
+function handleConfirm() {
+  handleQuery();
+}
+
 // 重置查询
 async function handleResetQuery() {
   queryFormRef.value.resetFields();
@@ -391,6 +419,7 @@ async function resetForm() {
 // 行复选框选中项变化
 async function handleSelectionChange(selection: any) {
   selectIds.value = selection.map((item: any) => item.id);
+  selectionRows.value = selection;
 }
 
 // 关闭弹窗
@@ -475,45 +504,9 @@ async function handleDelete(ids: number[]) {
   });
 }
 
-// 导出
-async function handleExport() {
-  ElMessageBox.confirm('是否确认导出当前系统配置?', '警告', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  }).then(async () => {
-    let downloadUrl = '';
-    try {
-      loading.value = true;      
-
-      const response = await DictAPI.exportDictData(queryFormData);
-      const fileData = response.data;
-      const fileName = decodeURI(response.headers["content-disposition"].split(";")[1].split("=")[1]);
-      const fileType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
-
-      const blob = new Blob([fileData], { type: fileType });
-      downloadUrl = window.URL.createObjectURL(blob);
-
-      const downloadLink = document.createElement("a");
-      downloadLink.href = downloadUrl;
-      downloadLink.download = fileName;
-
-      document.body.appendChild(downloadLink);
-      downloadLink.click();
-      
-      document.body.removeChild(downloadLink);
-    } catch (error: any) {
-      // 错误信息已经在响应拦截器中处理并显示
-      console.error('导出失败:', error);
-    } finally {
-      if (downloadUrl) {
-        window.URL.revokeObjectURL(downloadUrl);
-      }
-      loading.value = false;
-    }
-  }).catch(() => {
-    ElMessageBox.close();
-  });
+// 打开导出弹窗
+function handleOpenExportsModal() {
+  exportsDialogVisible.value = true;
 }
 
 // 批量启用/停用
@@ -539,6 +532,44 @@ async function handleMoreClick(status: boolean) {
   }
 }
 
+// 导出字段
+const exportColumns = [
+  { prop: 'dict_label', label: '数据标签' },
+  { prop: 'dict_type', label: '数据类型' },
+  { prop: 'dict_value', label: '数据值' },
+  { prop: 'css_class', label: '样式属性' },
+  { prop: 'list_class', label: '列表类样式' },
+  { prop: 'dict_sort', label: '排序' },
+  { prop: 'is_default', label: '是否默认' },
+  { prop: 'status', label: '状态' },
+  { prop: 'description', label: '描述' },
+  { prop: 'created_at', label: '创建时间' },
+  { prop: 'updated_at', label: '更新时间' },
+];
+
+// 导出配置（用于导出弹窗）
+const curdContentConfig = {
+  permPrefix: 'system:dict_data',
+  cols: exportColumns as any,
+  exportsAction: async (params: any) => {
+    const query: any = { ...params };
+    if (typeof query.status === 'string') query.status = query.status === 'true';
+    // dict_type 已在查询表单中设置为 props.dictType
+    query.page_no = 1;
+    query.page_size = 1000;
+    const all: any[] = [];
+    while (true) {
+      const res = await DictAPI.getDictDataList(query);
+      const items = res.data?.data?.items || [];
+      const total = res.data?.data?.total || 0;
+      all.push(...items);
+      if (all.length >= total || items.length === 0) break;
+      query.page_no += 1;
+    }
+    return all;
+  },
+} as unknown as IContentConfig;
+
 onMounted(() => {
   loadingData();
 });
diff --git a/frontend/src/views/system/dict/index.vue b/frontend/src/views/system/dict/index.vue
index 24474b3d..9bdf8f71 100644
--- a/frontend/src/views/system/dict/index.vue
+++ b/frontend/src/views/system/dict/index.vue
@@ -23,6 +23,13 @@
             @update:model-value="handleDateRangeChange"
           />
         </el-form-item>
+        <el-form-item v-if="isExpand" prop="creator" label="创建人">
+          <UserTableSelect
+              v-model="queryFormData.creator"
+              @confirm-click="handleConfirm"
+              @clear-click="handleQuery"
+          />
+        </el-form-item>
         <!-- 查询、重置、展开/收起按钮 -->
         <el-form-item class="search-buttons">
           <el-button v-hasPerm="['system:dict_type:query']" type="primary" icon="search" @click="handleQuery">查询</el-button>
@@ -46,7 +53,7 @@
     </div>
 
     <!-- 内容区域 -->
-    <el-card shadow="hover" class="data-table">
+    <el-card class="data-table">
       <template #header>
         <div class="card-header">
           <span>
@@ -60,7 +67,7 @@
 
       <!-- 功能区域 -->
       <div class="data-table__toolbar">
-        <div class="data-table__toolbar--actions">
+        <div class="data-table__toolbar--left">
           <el-row :gutter="10">
             <el-col :span="1.5">
               <el-button v-hasPerm="['system:dict_type:create']" type="success" icon="plus" @click="handleOpenDialog('create')">新增</el-button>
@@ -83,11 +90,11 @@
             </el-col>
           </el-row>
         </div>
-        <div class="data-table__toolbar--tools">
+        <div class="data-table__toolbar--right">
           <el-row :gutter="10">
             <el-col :span="1.5">
               <el-tooltip content="导出">
-                <el-button v-hasPerm="['system:dict_type:export']" type="warning" icon="download" circle @click="handleExport"/>
+                <el-button v-hasPerm="['system:dict_type:export']" type="warning" icon="download" circle @click="handleOpenExportsModal"/>
               </el-tooltip>
             </el-col>
             <el-col :span="1.5">
@@ -96,18 +103,16 @@
               </el-tooltip>
             </el-col>
             <el-col :span="1.5">
-              <el-tooltip content="列表筛选">
-                <el-dropdown v-hasPerm="['system:dict_type:filter']" trigger="click">
-                  <el-button type="default" icon="operation" circle />
-                  <template #dropdown>
-                    <el-dropdown-menu>
-                      <el-dropdown-item v-for="column in tableColumns" :key="column.prop" :command="column">
-                        <el-checkbox v-model="column.show">{{ column.label }}</el-checkbox>
-                      </el-dropdown-item>
-                    </el-dropdown-menu>
+              <el-popover placement="bottom" trigger="click">
+                <template #reference>
+                  <el-button type="danger" icon="operation" circle></el-button>
+                </template>
+                <el-scrollbar max-height="350px">
+                  <template v-for="column in tableColumns" :key="column.prop">
+                    <el-checkbox v-if="column.prop" v-model="column.show" :label="column.label" />
                   </template>
-                </el-dropdown>
-              </el-tooltip>
+                </el-scrollbar>
+              </el-popover>
             </el-col>
           </el-row>
         </div>
@@ -212,6 +217,13 @@
     </el-dialog>
 
     <DataDrawer v-if="drawerVisible" v-model="drawerVisible" :dict-type="currentDictType" :dict-label="currentDictLabel" />
+    <ExportModal
+      v-model="exportsDialogVisible"
+      :content-config="curdContentConfig"
+      :query-params="queryFormData"
+      :page-data="pageTableData"
+      :selection-data="selectionRows"
+    />
 
   </div>
 </template>
@@ -224,6 +236,9 @@ defineOptions({
 
 import DictAPI, { DictTable, DictForm, DictPageQuery } from "@/api/system/dict";
 import DataDrawer from "@/views/system/dict/components/DataDrawer.vue"
+import UserTableSelect from "@/views/system/user/components/UserTableSelect.vue";
+import ExportModal from "@/components/CURD/ExportModal.vue";
+import type { IContentConfig } from "@/components/CURD/types";
 
 const queryFormRef = ref();
 const dataFormRef = ref();
@@ -237,6 +252,10 @@ const isExpandable = ref(true);
 // 分页表单
 const pageTableData = ref<DictTable[]>([]);
 
+// 导出弹窗显示状态 & 选中行
+const exportsDialogVisible = ref(false);
+const selectionRows = ref<DictTable[]>([]);
+
 
 // 表格列配置
 const tableColumns = ref([
@@ -264,6 +283,8 @@ const queryFormData = reactive<DictPageQuery>({
   status: undefined,
   start_time: undefined,
   end_time: undefined,
+  // 创建人
+  creator: undefined,
 });
 
 // 编辑表单
@@ -341,6 +362,11 @@ async function handleQuery() {
   loadingData();
 }
 
+// 选择创建人后触发查询
+function handleConfirm() {
+  handleQuery();
+}
+
 // 重置查询
 async function handleResetQuery() {
   queryFormRef.value.resetFields();
@@ -370,6 +396,7 @@ async function resetForm() {
 // 行复选框选中项变化
 async function handleSelectionChange(selection: any) {
   selectIds.value = selection.map((item: any) => item.id);
+  selectionRows.value = selection;
 }
 
 // 关闭弹窗
@@ -453,45 +480,9 @@ async function handleDelete(ids: number[]) {
   });
 }
 
-// 导出
-async function handleExport() {
-  ElMessageBox.confirm('是否确认导出当前系统配置?', '警告', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  }).then(async () => {
-    let downloadUrl = '';
-    try {
-      loading.value = true;
-
-      const response = await DictAPI.exportDictType(queryFormData);
-      const fileData = response.data;
-      const fileName = decodeURI(response.headers["content-disposition"].split(";")[1].split("=")[1]);
-      const fileType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
-
-      const blob = new Blob([fileData], { type: fileType });
-      downloadUrl = window.URL.createObjectURL(blob);
-
-      const downloadLink = document.createElement("a");
-      downloadLink.href = downloadUrl;
-      downloadLink.download = fileName;
-
-      document.body.appendChild(downloadLink);
-      downloadLink.click();
-      
-      document.body.removeChild(downloadLink);
-    } catch (error: any) {
-      // 错误信息已经在响应拦截器中处理并显示
-      console.error('导出失败:', error);
-    } finally {
-      if (downloadUrl) {
-        window.URL.revokeObjectURL(downloadUrl);
-      }
-      loading.value = false;
-    }
-  }).catch(() => {
-    ElMessageBox.close();
-  });
+// 打开导出弹窗
+function handleOpenExportsModal() {
+  exportsDialogVisible.value = true;
 }
 
 // 批量启用/停用
@@ -523,6 +514,38 @@ function handleDictDataDrawer(dictType: string, dictLabel: string) {
   drawerVisible.value = true;
 }
 
+// 导出字段
+const exportColumns = [
+  { prop: 'dict_name', label: '字典名称' },
+  { prop: 'dict_type', label: '字典类型' },
+  { prop: 'status', label: '状态' },
+  { prop: 'description', label: '描述' },
+  { prop: 'created_at', label: '创建时间' },
+  { prop: 'updated_at', label: '更新时间' },
+];
+
+// 导出配置（用于导出弹窗）
+const curdContentConfig = {
+  permPrefix: 'system:dict_type',
+  cols: exportColumns as any,
+  exportsAction: async (params: any) => {
+    const query: any = { ...params };
+    if (typeof query.status === 'string') query.status = query.status === 'true';
+    query.page_no = 1;
+    query.page_size = 1000;
+    const all: any[] = [];
+    while (true) {
+      const res = await DictAPI.getDictTypeList(query);
+      const items = res.data?.data?.items || [];
+      const total = res.data?.data?.total || 0;
+      all.push(...items);
+      if (all.length >= total || items.length === 0) break;
+      query.page_no += 1;
+    }
+    return all;
+  },
+} as unknown as IContentConfig;
+
 onMounted(() => {
   loadingData();
 });
diff --git a/frontend/src/views/system/log/index.vue b/frontend/src/views/system/log/index.vue
index c7e03ff6..5ff40742 100644
--- a/frontend/src/views/system/log/index.vue
+++ b/frontend/src/views/system/log/index.vue
@@ -16,6 +16,13 @@
             <el-option label="操作日志" value=2 />
           </el-select>
         </el-form-item>
+        <el-form-item v-if="isExpand" prop="creator" label="创建人">
+          <UserTableSelect
+              v-model="queryFormData.creator"
+              @confirm-click="handleConfirm"
+              @clear-click="handleQuery"
+          />
+        </el-form-item>
         <!-- 时间范围，收起状态下隐藏 -->
         <el-form-item v-if="isExpand" prop="start_time" label="创建时间">
           <DatePicker
@@ -46,7 +53,7 @@
     </div>
 
     <!-- 内容区域 -->
-    <el-card shadow="hover" class="data-table">
+    <el-card class="data-table">
       <template #header>
         <div class="card-header">
           <span>
@@ -60,18 +67,18 @@
 
       <!-- 功能区域 -->
       <div class="data-table__toolbar">
-        <div class="data-table__toolbar--actions">
+        <div class="data-table__toolbar--left">
           <el-row :gutter="10">
             <el-col :span="1.5">
               <el-button v-hasPerm="['system:log:delete']" type="danger" icon="delete" :disabled="selectIds.length === 0" @click="handleDelete(selectIds)">批量删除</el-button>
             </el-col>
           </el-row>
         </div>
-        <div class="data-table__toolbar--tools">
+        <div class="data-table__toolbar--right">
           <el-row :gutter="10">
             <el-col :span="1.5">
               <el-tooltip content="导出">
-                <el-button v-hasPerm="['system:log:export']" type="warning" icon="download" circle @click="handleExport"/>
+                <el-button v-hasPerm="['system:log:export']" type="warning" icon="download" circle @click="handleOpenExportsModal"/>
               </el-tooltip>
             </el-col>
             <el-col :span="1.5">
@@ -194,6 +201,15 @@
       </template>
     </el-dialog>
 
+    <!-- 导出弹窗 -->
+    <ExportModal
+      v-model="exportsDialogVisible"
+      :content-config="curdContentConfig"
+      :query-params="queryFormData"
+      :page-data="pageTableData"
+      :selection-data="selectionRows"
+    />
+
   </div>
 </template>
 
@@ -204,6 +220,9 @@ defineOptions({
 });
 
 import LogAPI, { LogTable, LogPageQuery } from "@/api/system/log";
+import UserTableSelect from "@/views/system/user/components/UserTableSelect.vue";
+import ExportModal from "@/components/CURD/ExportModal.vue";
+import type { IContentConfig } from "@/components/CURD/types";
 
 const queryFormRef = ref();
 const dataFormRef = ref();
@@ -216,6 +235,10 @@ const isExpandable = ref(true);
 // 分页表单
 const pageTableData = ref<LogTable[]>([]);
 
+// 导出弹窗状态和选中行数据
+const exportsDialogVisible = ref(false);
+const selectionRows = ref<LogTable[]>([]);
+
 // 详情表单
 const formData = ref<LogTable>({});
 
@@ -228,6 +251,8 @@ const queryFormData = reactive<LogPageQuery>({
   creator_name: undefined,
   start_time: undefined,
   end_time: undefined,
+  // 创建人
+  creator: undefined,
 });
 
 // 弹窗状态
@@ -311,6 +336,11 @@ async function handleQuery() {
   loadingData();
 }
 
+// 选择创建人后触发查询
+function handleConfirm() {
+  handleQuery();
+}
+
 // 重置查询
 async function handleResetQuery() {
   queryFormRef.value.resetFields();
@@ -330,6 +360,7 @@ async function resetForm() {
 // 行复选框选中项变化
 async function handleSelectionChange(selection: any) {
   selectIds.value = selection.map((item: any) => item.id);
+  selectionRows.value = selection;
 }
 
 // 关闭弹窗
@@ -373,46 +404,47 @@ async function handleDelete(ids: number[]) {
 }
 
 
-// 导出
-async function handleExport() {
-  ElMessageBox.confirm('是否确认导出当前系统配置?', '警告', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  }).then(async () => {
-    let downloadUrl = '';
-    try {
-      loading.value = true;      
-
-      const response = await LogAPI.exportLog(queryFormData);
-      const fileData = response.data;
-      const fileName = decodeURI(response.headers["content-disposition"].split(";")[1].split("=")[1]);
-      const fileType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
-
-      const blob = new Blob([fileData], { type: fileType });
-      downloadUrl = window.URL.createObjectURL(blob);
-
-      const downloadLink = document.createElement("a");
-      downloadLink.href = downloadUrl;
-      downloadLink.download = fileName;
+// 打开导出弹窗
+function handleOpenExportsModal() {
+  exportsDialogVisible.value = true;
+}
 
-      document.body.appendChild(downloadLink);
-      downloadLink.click();
-      
-      document.body.removeChild(downloadLink);
-    } catch (error: any) {
-      // 错误信息已经在响应拦截器中处理并显示
-      console.error('导出失败:', error);
-    } finally {
-      if (downloadUrl) {
-        window.URL.revokeObjectURL(downloadUrl);
-      }
-      loading.value = false;
+// 导出字段
+const exportColumns = [
+  { prop: 'type', label: '日志类型' },
+  { prop: 'request_path', label: '请求路径' },
+  { prop: 'request_method', label: '请求方法' },
+  { prop: 'response_code', label: '状态码' },
+  { prop: 'request_ip', label: '请求IP' },
+  { prop: 'login_location', label: '登录地点' },
+  { prop: 'process_time', label: '处理时间' },
+  { prop: 'request_browser', label: '浏览器' },
+  { prop: 'request_os', label: '系统' },
+  { prop: 'description', label: '描述' },
+  { prop: 'created_at', label: '创建时间' },
+  { prop: 'updated_at', label: '更新时间' },
+];
+
+// 导入/导出配置（用于导出弹窗）
+const curdContentConfig = {
+  permPrefix: 'system:log',
+  cols: exportColumns as any,
+  exportsAction: async (params: any) => {
+    const query: any = { ...params };
+    query.page_no = 1;
+    query.page_size = 1000;
+    const all: any[] = [];
+    while (true) {
+      const res = await LogAPI.getLogList(query);
+      const items = res.data?.data?.items || [];
+      const total = res.data?.data?.total || 0;
+      all.push(...items);
+      if (all.length >= total || items.length === 0) break;
+      query.page_no += 1;
     }
-  }).catch(() => {
-    ElMessageBox.close();
-  });
-}
+    return all;
+  },
+} as unknown as IContentConfig;
 
 onMounted(() => {
   loadingData();
diff --git a/frontend/src/views/system/menu/index.vue b/frontend/src/views/system/menu/index.vue
index ec1e0e36..249e7700 100644
--- a/frontend/src/views/system/menu/index.vue
+++ b/frontend/src/views/system/menu/index.vue
@@ -43,7 +43,7 @@
     </div>
 
     <!-- 内容区域 -->
-    <el-card shadow="hover" class="data-table">
+    <el-card class="data-table">
       <template #header>
         <div class="card-header">
           <span>
@@ -57,7 +57,7 @@
 
       <!-- 功能区域 -->
       <div class="data-table__toolbar">
-        <div class="data-table__toolbar--actions">
+        <div class="data-table__toolbar--left">
           <el-row :gutter="10">
             <el-col :span="1.5">
               <el-button v-hasPerm="['system:menu:create']" type="success" icon="plus" @click="handleOpenDialog('create')">新增</el-button>
@@ -78,7 +78,7 @@
             </el-col>
           </el-row>
         </div>
-        <div class="data-table__toolbar--tools">
+        <div class="data-table__toolbar--right">
           <el-row :gutter="10">
             <el-col :span="1.5">
               <el-tooltip content="刷新">
diff --git a/frontend/src/views/system/notice/index.vue b/frontend/src/views/system/notice/index.vue
index dc5c0002..a5503d54 100644
--- a/frontend/src/views/system/notice/index.vue
+++ b/frontend/src/views/system/notice/index.vue
@@ -30,6 +30,13 @@
             @update:model-value="handleDateRangeChange"
           />
         </el-form-item>
+        <el-form-item v-if="isExpand" prop="creator" label="创建人">
+          <UserTableSelect
+              v-model="queryFormData.creator"
+              @confirm-click="handleConfirm"
+              @clear-click="handleQuery"
+          />
+        </el-form-item>
         <!-- 查询、重置、展开/收起按钮 -->
         <el-form-item class="search-buttons">
           <el-button v-hasPerm="['system:notice:query']" type="primary" icon="search" @click="handleQuery">
@@ -57,7 +64,7 @@
     </div>
 
     <!-- 内容区域 -->
-    <el-card shadow="hover" class="data-table">
+    <el-card class="data-table">
       <template #header>
         <div class="card-header">
           <span>
@@ -71,7 +78,7 @@
 
       <!-- 功能区域 -->
       <div class="data-table__toolbar">
-        <div class="data-table__toolbar--actions">
+        <div class="data-table__toolbar--left">
           <el-row :gutter="10">
             <el-col :span="1.5">
               <el-button v-hasPerm="['system:notice:create']" type="success" icon="plus" @click="handleOpenDialog('create')">新增</el-button>
@@ -92,11 +99,11 @@
             </el-col>
           </el-row>
         </div>
-        <div class="data-table__toolbar--tools">
+        <div class="data-table__toolbar--right">
           <el-row :gutter="10">
             <el-col :span="1.5">
               <el-tooltip content="导出">
-                <el-button v-hasPerm="['system:notice:export']" type="warning" icon="download" circle @click="handleExport" />
+                <el-button v-hasPerm="['system:notice:export']" type="warning" icon="download" circle @click="handleOpenExportsModal" />
               </el-tooltip>
             </el-col>
             <el-col :span="1.5">
@@ -105,20 +112,16 @@
               </el-tooltip>
             </el-col>
             <el-col :span="1.5">
-              <el-tooltip content="列表筛选">
-                <el-dropdown v-hasPerm="['system:notice:filter']" trigger="click">
-                  <el-button type="default" icon="operation" circle />
-                  <template #dropdown>
-                    <el-dropdown-menu>
-                      <el-dropdown-item v-for="column in tableColumns" :key="column.prop" :command="column">
-                        <el-checkbox v-model="column.show">
-                          {{ column.label }}
-                        </el-checkbox>
-                      </el-dropdown-item>
-                    </el-dropdown-menu>
+              <el-popover placement="bottom" trigger="click">
+                <template #reference>
+                  <el-button type="danger" icon="operation" circle></el-button>
+                </template>
+                <el-scrollbar max-height="350px">
+                  <template v-for="column in tableColumns" :key="column.prop">
+                    <el-checkbox v-if="column.prop" v-model="column.show" :label="column.label" />
                   </template>
-                </el-dropdown>
-              </el-tooltip>
+                </el-scrollbar>
+              </el-popover>
             </el-col>
           </el-row>
         </div>
@@ -257,11 +260,16 @@
       </template>
     </el-dialog>
 
+    <ExportModal v-model="exportsDialogVisible" :content-config="curdContentConfig" :selection-data="selectionRows" />
+
   </div>
 </template>
 
 <script setup lang="ts">
 import { useDictStore } from "@/store/index";
+import UserTableSelect from "@/views/system/user/components/UserTableSelect.vue";
+import ExportModal from "@/components/CURD/ExportModal.vue";
+import type { IContentConfig } from "@/components/CURD/types";
 
 const dictStore = useDictStore();
 defineOptions({
@@ -282,6 +290,10 @@ const isExpandable = ref(true);
 // 分页表单
 const pageTableData = ref<NoticeTable[]>([]);
 
+// 导出弹窗显示状态 & 选中行
+const exportsDialogVisible = ref(false);
+const selectionRows = ref<NoticeTable[]>([]);
+
 // 表格列配置
 const tableColumns = ref([
   { prop: 'selection', label: '选择框', show: true },
@@ -309,6 +321,8 @@ const queryFormData = reactive<NoticePageQuery>({
   status: undefined,
   start_time: undefined,
   end_time: undefined,
+  // 创建人
+  creator: undefined,
 });
 
 // 编辑表单
@@ -378,6 +392,11 @@ async function handleQuery() {
   loadingData();
 }
 
+// 选择创建人后触发查询
+function handleConfirm() {
+  handleQuery();
+}
+
 // 重置查询
 async function handleResetQuery() {
   queryFormRef.value.resetFields();
@@ -408,6 +427,7 @@ async function resetForm() {
 // 行复选框选中项变化
 async function handleSelectionChange(selection: any) {
   selectIds.value = selection.map((item: any) => item.id);
+  selectionRows.value = selection;
 }
 
 // 关闭弹窗
@@ -493,45 +513,9 @@ async function handleDelete(ids: number[]) {
   });
 }
 
-// 导出
-async function handleExport() {
-  ElMessageBox.confirm('是否确认导出当前系统配置?', '警告', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  }).then(async () => {
-    let downloadUrl = '';
-    try {
-      loading.value = true;      
-
-      const response = await NoticeAPI.exportNotice(queryFormData);
-      const fileData = response.data;
-      const fileName = decodeURI(response.headers["content-disposition"].split(";")[1].split("=")[1]);
-      const fileType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
-
-      const blob = new Blob([fileData], { type: fileType });
-      downloadUrl = window.URL.createObjectURL(blob);
-
-      const downloadLink = document.createElement("a");
-      downloadLink.href = downloadUrl;
-      downloadLink.download = fileName;
-
-      document.body.appendChild(downloadLink);
-      downloadLink.click();
-      
-      document.body.removeChild(downloadLink);
-    } catch (error: any) {
-      // 错误信息已经在响应拦截器中处理并显示
-      console.error('导出失败:', error);
-    } finally {
-      if (downloadUrl) {
-        window.URL.revokeObjectURL(downloadUrl);
-      }
-      loading.value = false;
-    }
-  }).catch(() => {
-    ElMessageBox.close();
-  });
+// 导出弹窗
+async function handleOpenExportsModal() {
+  exportsDialogVisible.value = true;
 }
 
 // 批量启用/停用
@@ -558,6 +542,40 @@ async function handleMoreClick(status: boolean) {
 }
 
 
+// 导出字段
+const exportColumns = [
+  { prop: 'notice_title', label: '标题' },
+  { prop: 'status', label: '状态' },
+  { prop: 'notice_type', label: '类型' },
+  { prop: 'notice_content', label: '内容' },
+  { prop: 'description', label: '描述' },
+  { prop: 'created_at', label: '创建时间' },
+  { prop: 'updated_at', label: '更新时间' },
+];
+
+// 导入/导出配置（用于导出弹窗）
+const curdContentConfig = {
+  permPrefix: 'system:notice',
+  cols: exportColumns as any,
+  exportsAction: async (params: any) => {
+    const query: any = { ...params };
+    if (typeof query.status === 'string') query.status = query.status === 'true';
+    // notice_type 为字符串，无需转换；如果后端需要数字，可在此转换
+    query.page_no = 1;
+    query.page_size = 1000;
+    const all: any[] = [];
+    while (true) {
+      const res = await NoticeAPI.getNoticeList(query);
+      const items = res.data?.data?.items || [];
+      const total = res.data?.data?.total || 0;
+      all.push(...items);
+      if (all.length >= total || items.length === 0) break;
+      query.page_no += 1;
+    }
+    return all;
+  },
+} as unknown as IContentConfig;
+
 onMounted(async () => {
   // 加载字典数据
   await dictStore.getDict(['sys_notice_type']);
diff --git a/frontend/src/views/system/param/index.vue b/frontend/src/views/system/param/index.vue
index e761323e..3c9ca0ab 100644
--- a/frontend/src/views/system/param/index.vue
+++ b/frontend/src/views/system/param/index.vue
@@ -23,6 +23,13 @@
             @update:model-value="handleDateRangeChange"
           />
         </el-form-item>
+        <el-form-item v-if="isExpand" prop="creator" label="创建人">
+          <UserTableSelect
+              v-model="queryFormData.creator"
+              @confirm-click="handleConfirm"
+              @clear-click="handleQuery"
+          />
+        </el-form-item>
         <el-form-item class="search-buttons">
           <el-button v-hasPerm="['system:config:query']" type="primary" icon="search" @click="handleQuery">查询</el-button>
           <el-button v-hasPerm="['system:config:query']" icon="refresh" @click="handleResetQuery">重置</el-button>
@@ -45,7 +52,7 @@
     </div>
 
     <!-- 内容区域 -->
-    <el-card shadow="hover" class="data-table">
+    <el-card class="data-table">
       <template #header>
         <div class="card-header">
           <span>
@@ -59,7 +66,7 @@
 
       <!-- 功能区域 -->
       <div class="data-table__toolbar">
-        <div class="data-table__toolbar--actions">
+        <div class="data-table__toolbar--left">
           <el-row :gutter="10">
             <el-col :span="1.5">
               <el-button v-hasPerm="['system:config:create']" type="success" icon="plus" @click="handleOpenDialog('create')">新增</el-button>
@@ -69,11 +76,11 @@
             </el-col>
           </el-row>
         </div>
-        <div class="data-table__toolbar--tools">
+        <div class="data-table__toolbar--right">
           <el-row :gutter="10">
             <el-col :span="1.5">
               <el-tooltip content="导出">
-                <el-button v-hasPerm="['system:config:export']" type="warning" icon="download" circle @click="handleExport"/>
+                <el-button v-hasPerm="['system:config:export']" type="warning" icon="download" circle @click="handleOpenExportsModal"/>
               </el-tooltip>
             </el-col>
             <el-col :span="1.5">
@@ -82,18 +89,16 @@
               </el-tooltip>
             </el-col>
             <el-col :span="1.5">
-              <el-tooltip content="列表筛选">
-                <el-dropdown v-hasPerm="['system:config:filter']" trigger="click">
-                  <el-button type="default" icon="operation" circle />
-                  <template #dropdown>
-                    <el-dropdown-menu>
-                      <el-dropdown-item v-for="column in tableColumns" :key="column.prop" :command="column">
-                        <el-checkbox v-model="column.show">{{ column.label }}</el-checkbox>
-                      </el-dropdown-item>
-                    </el-dropdown-menu>
-                  </template>
-                </el-dropdown>
-              </el-tooltip>
+              <el-dropdown v-hasPerm="['system:config:filter']" trigger="click">
+                <el-button type="default" icon="operation" circle />
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item v-for="column in tableColumns" :key="column.prop" :command="column">
+                      <el-checkbox v-model="column.show">{{ column.label }}</el-checkbox>
+                    </el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
             </el-col>
           </el-row>
         </div>
@@ -194,6 +199,7 @@
       </template>
     </el-dialog>
 
+    <ExportModal v-model="exportsDialogVisible" :content-config="curdContentConfig" :selection-data="selectionRows" />
 
   </div>
 </template>
@@ -205,6 +211,9 @@ defineOptions({
 });
 
 import ParamsAPI, { ConfigTable, ConfigForm, ConfigPageQuery } from "@/api/system/params";
+import UserTableSelect from "@/views/system/user/components/UserTableSelect.vue";
+import ExportModal from "@/components/CURD/ExportModal.vue";
+import type { IContentConfig } from "@/components/CURD/types";
 
 const queryFormRef = ref();
 const dataFormRef = ref();
@@ -218,6 +227,10 @@ const isExpandable = ref(true);
 // 分页表单
 const pageTableData = ref<ConfigTable[]>([]);
 
+// 导出弹窗显示状态 & 选中行
+const exportsDialogVisible = ref(false);
+const selectionRows = ref<ConfigTable[]>([]);
+
 
 // 表格列配置
 const tableColumns = ref([
@@ -246,6 +259,8 @@ const queryFormData = reactive<ConfigPageQuery>({
   config_type: undefined,
   start_time: undefined,
   end_time: undefined,
+  // 创建人
+  creator: undefined,
 });
 
 // 编辑表单
@@ -315,6 +330,11 @@ async function handleQuery() {
   loadingData();
 }
 
+// 选择创建人后触发查询
+function handleConfirm() {
+  handleQuery();
+}
+
 // 重置查询
 async function handleResetQuery() {
   queryFormRef.value.resetFields();
@@ -345,6 +365,7 @@ async function resetForm() {
 // 行复选框选中项变化
 async function handleSelectionChange(selection: any) {
   selectIds.value = selection.map((item: any) => item.id);
+  selectionRows.value = selection;
 }
 
 // 关闭弹窗
@@ -428,47 +449,45 @@ async function handleDelete(ids: number[]) {
   });
 }
 
+// 导出弹窗
+async function handleOpenExportsModal() {
+  exportsDialogVisible.value = true;
+}
 
-// 导出
-async function handleExport() {
-  ElMessageBox.confirm('是否确认导出当前系统配置?', '警告', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  }).then(async () => {
-    let downloadUrl = '';
-    try {
-      loading.value = true;
-
-      const response = await ParamsAPI.exportConfig(queryFormData);
-      const fileData = response.data;
-      const fileName = decodeURI(response.headers["content-disposition"].split(";")[1].split("=")[1]);
-      const fileType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
-
-      const blob = new Blob([fileData], { type: fileType });
-      downloadUrl = window.URL.createObjectURL(blob);
-
-      const downloadLink = document.createElement("a");
-      downloadLink.href = downloadUrl;
-      downloadLink.download = fileName;
-
-      document.body.appendChild(downloadLink);
-      downloadLink.click();
-      
-      document.body.removeChild(downloadLink);
-    } catch (error: any) {
-      // 错误信息已经在响应拦截器中处理并显示
-      console.error('导出失败:', error);
-    } finally {
-      if (downloadUrl) {
-        window.URL.revokeObjectURL(downloadUrl);
-      }
-      loading.value = false;
+// 导出字段
+const exportColumns = [
+  { prop: 'config_name', label: '配置名称' },
+  { prop: 'config_key', label: '配置键' },
+  { prop: 'config_value', label: '配置值' },
+  { prop: 'config_type', label: '系统内置' },
+  { prop: 'description', label: '描述' },
+  { prop: 'created_at', label: '创建时间' },
+  { prop: 'updated_at', label: '更新时间' },
+];
+
+// 导入/导出配置（用于导出弹窗）
+const curdContentConfig = {
+  permPrefix: 'system:config',
+  cols: exportColumns as any,
+  exportsAction: async (params: any) => {
+    const query: any = { ...params };
+    if (typeof query.config_type === 'string') {
+      query.config_type = query.config_type === 'true';
     }
-  }).catch(() => {
-    ElMessageBox.close();
-  });
-}
+    query.page_no = 1;
+    query.page_size = 1000;
+    const all: any[] = [];
+    while (true) {
+      const res = await ParamsAPI.getConfigList(query);
+      const items = res.data?.data?.items || [];
+      const total = res.data?.data?.total || 0;
+      all.push(...items);
+      if (all.length >= total || items.length === 0) break;
+      query.page_no += 1;
+    }
+    return all;
+  },
+} as unknown as IContentConfig;
 
 onMounted(() => {
   loadingData();
diff --git a/frontend/src/views/system/position/index.vue b/frontend/src/views/system/position/index.vue
index 8b17e5d6..5f5437d4 100644
--- a/frontend/src/views/system/position/index.vue
+++ b/frontend/src/views/system/position/index.vue
@@ -20,6 +20,13 @@
             @update:model-value="handleDateRangeChange"
           />
         </el-form-item>
+        <el-form-item v-if="isExpand" prop="creator" label="创建人">
+          <UserTableSelect
+              v-model="queryFormData.creator"
+              @confirm-click="handleConfirm"
+              @clear-click="handleQuery"
+          />
+        </el-form-item>
         <!-- 查询、重置、展开/收起按钮 -->
         <el-form-item class="search-buttons">
           <el-button v-hasPerm="['system:position:query']" type="primary" icon="search" @click="handleQuery">查询</el-button>
@@ -43,7 +50,7 @@
     </div>
 
     <!-- 内容区域 -->
-    <el-card shadow="hover" class="data-table">
+    <el-card class="data-table">
       <template #header>
         <div class="card-header">
           <span>
@@ -57,7 +64,7 @@
 
       <!-- 功能区域 -->
       <div class="data-table__toolbar">
-        <div class="data-table__toolbar--actions">
+        <div class="data-table__toolbar--left">
           <el-row :gutter="10">
             <el-col :span="1.5">
               <el-button v-hasPerm="['system:position:create']" type="success" icon="plus" @click="handleOpenDialog('create')">新增</el-button>
@@ -78,11 +85,11 @@
             </el-col>
           </el-row>
         </div>
-        <div class="data-table__toolbar--tools">
+        <div class="data-table__toolbar--right">
           <el-row :gutter="10">
             <el-col :span="1.5">
               <el-tooltip content="导出">
-                <el-button v-hasPerm="['system:position:export']" type="warning" icon="download" circle @click="handleExport" />
+                <el-button v-hasPerm="['system:position:export']" type="warning" icon="download" circle @click="handleOpenExportsModal" />
               </el-tooltip>
             </el-col>
             <el-col :span="1.5">
@@ -91,18 +98,16 @@
               </el-tooltip>
             </el-col>
             <el-col :span="1.5">
-              <el-tooltip content="列表筛选">
-                <el-dropdown trigger="click">
-                  <el-button type="default" icon="operation" circle />
-                  <template #dropdown>
-                    <el-dropdown-menu>
-                      <el-dropdown-item v-for="column in tableColumns" :key="column.prop" :command="column">
-                        <el-checkbox v-model="column.show">{{ column.label }}</el-checkbox>
-                      </el-dropdown-item>
-                    </el-dropdown-menu>
+              <el-popover placement="bottom" trigger="click">
+                <template #reference>
+                  <el-button type="danger" icon="operation" circle></el-button>
+                </template>
+                <el-scrollbar max-height="350px">
+                  <template v-for="column in tableColumns" :key="column.prop">
+                    <el-checkbox v-if="column.prop" v-model="column.show" :label="column.label" />
                   </template>
-                </el-dropdown>
-              </el-tooltip>
+                </el-scrollbar>
+              </el-popover>
             </el-col>
           </el-row>
         </div>
@@ -202,6 +207,8 @@
       </template>
     </el-dialog>
 
+    <ExportModal v-model="exportsDialogVisible" :content-config="curdContentConfig" :selection-data="selectionRows" />
+
   </div>
 </template>
 
@@ -213,6 +220,9 @@ defineOptions({
 
 import PositionAPI, { PositionTable, PositionForm, PositionPageQuery } from "@/api/system/position";
 import { useUserStore } from "@/store";
+import UserTableSelect from "@/views/system/user/components/UserTableSelect.vue";
+import ExportModal from "@/components/CURD/ExportModal.vue";
+import type { IContentConfig } from "@/components/CURD/types";
 
 const queryFormRef = ref();
 const dataFormRef = ref();
@@ -226,6 +236,10 @@ const isExpandable = ref(true);
 // 分页表单
 const pageTableData = ref<PositionTable[]>([]);
 
+// 导出弹窗显示状态 & 选中行
+const exportsDialogVisible = ref(false);
+const selectionRows = ref<PositionTable[]>([]);
+
 
 // 表格列配置
 const tableColumns = ref([
@@ -252,6 +266,8 @@ const queryFormData = reactive<PositionPageQuery>({
   status: undefined,
   start_time: undefined,
   end_time: undefined,
+  // 创建人
+  creator: undefined,
 });
 
 // 编辑表单
@@ -320,6 +336,11 @@ async function handleQuery() {
   loadingData();
 }
 
+// 选择创建人后触发查询
+function handleConfirm() {
+  handleQuery();
+}
+
 // 重置查询
 async function handleResetQuery() {
   queryFormRef.value.resetFields();
@@ -349,6 +370,7 @@ async function resetForm() {
 // 行复选框选中项变化
 async function handleSelectionChange(selection: any) {
   selectIds.value = selection.map((item: any) => item.id);
+  selectionRows.value = selection;
 }
 
 // 关闭弹窗
@@ -427,46 +449,9 @@ async function handleDelete(ids: number[]) {
 }
 
 // 导出
-async function handleExport() {
-  ElMessageBox.confirm('是否确认导出当前系统配置?', '警告', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  }).then(async () => {
-    let downloadUrl = '';
-    try {
-      loading.value = true;
-
-      const response = await PositionAPI.exportPosition(queryFormData);
-      const fileData = response.data;
-      const fileName = decodeURI(response.headers["content-disposition"].split(";")[1].split("=")[1]);
-      const fileType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
-
-      const blob = new Blob([fileData], { type: fileType });
-      downloadUrl = window.URL.createObjectURL(blob);
-
-      const downloadLink = document.createElement("a");
-      downloadLink.href = downloadUrl;
-      downloadLink.download = fileName;
-
-      document.body.appendChild(downloadLink);
-      downloadLink.click();
-      
-      document.body.removeChild(downloadLink);
-    } catch (error: any) {
-      // 错误信息已经在响应拦截器中处理并显示
-      console.error('导出失败:', error);
-    } finally {
-      if (downloadUrl) {
-        window.URL.revokeObjectURL(downloadUrl);
-      }
-      loading.value = false;
-    }
-  }).catch(() => {
-    ElMessageBox.close();
-  });
+async function handleOpenExportsModal() {
+  exportsDialogVisible.value = true;
 }
-
 // 批量启用/停用
 async function handleMoreClick(status: boolean) {
   if (selectIds.value.length) {
@@ -490,9 +475,77 @@ async function handleMoreClick(status: boolean) {
   }
 }
 
+// 导出字段
+const exportColumns = [
+  { prop: 'name', label: '岗位名称' },
+  { prop: 'order', label: '岗位排序' },
+  { prop: 'status', label: '状态' },
+  { prop: 'description', label: '描述' },
+  { prop: 'created_at', label: '创建时间' },
+  { prop: 'updated_at', label: '更新时间' },
+];
+
+// 导入/导出配置（用于导出）
+const curdContentConfig = {
+  permPrefix: 'system:position',
+  cols: exportColumns as any,
+  exportsAction: async (params: any) => {
+    const query: any = { ...params };
+    if (typeof query.status === 'string') {
+      query.status = query.status === 'true';
+    }
+    query.page_no = 1;
+    query.page_size = 1000;
+    const all: any[] = [];
+    while (true) {
+      const res = await PositionAPI.getPositionList(query);
+      const items = res.data?.data?.items || [];
+      const total = res.data?.data?.total || 0;
+      all.push(...items);
+      if (all.length >= total || items.length === 0) break;
+      query.page_no += 1;
+    }
+    return all;
+  },
+} as unknown as IContentConfig;
+
 onMounted(() => {
   loadingData();
 });
 </script>
 
 <style lang="scss" scoped></style>
+
+// 导出字段
+const exportColumns = [
+  { prop: 'name', label: '岗位名称' },
+  { prop: 'order', label: '岗位排序' },
+  { prop: 'status', label: '状态' },
+  { prop: 'description', label: '描述' },
+  { prop: 'created_at', label: '创建时间' },
+  { prop: 'updated_at', label: '更新时间' },
+];
+
+// 导入/导出配置（仅用于导出）
+const curdContentConfig = {
+  permPrefix: 'system:position',
+  cols: exportColumns as any,
+  exportsAction: async (params: any) => {
+    const query: any = { ...params };
+    if (typeof query.status === 'string') {
+      query.status = query.status === 'true';
+    }
+    query.page_no = 1;
+    query.page_size = 1000;
+    const all: any[] = [];
+    while (true) {
+      const res = await PositionAPI.getPositionList(query);
+      const items = res.data?.data?.items || [];
+      const total = res.data?.data?.total || 0;
+      all.push(...items);
+      if (all.length >= total || items.length === 0) break;
+      query.page_no += 1;
+    }
+    return all;
+  },
+} as unknown as IContentConfig;
diff --git a/frontend/src/views/system/role/index.vue b/frontend/src/views/system/role/index.vue
index cb5e3f4e..74b45a22 100644
--- a/frontend/src/views/system/role/index.vue
+++ b/frontend/src/views/system/role/index.vue
@@ -20,6 +20,13 @@
             @update:model-value="handleDateRangeChange"
           />
         </el-form-item>
+        <el-form-item v-if="isExpand" prop="creator" label="创建人">
+          <UserTableSelect
+              v-model="queryFormData.creator"
+              @confirm-click="handleConfirm"
+              @clear-click="handleQuery"
+          />
+        </el-form-item>
         <!-- 查询、重置、展开/收起按钮 -->
         <el-form-item class="search-buttons">
           <el-button v-hasPerm="['system:role:query']" type="primary" icon="search" @click="handleQuery">查询</el-button>
@@ -43,7 +50,7 @@
     </div>
 
     <!-- 内容区域 -->
-    <el-card shadow="hover" class="data-table">
+    <el-card class="data-table">
       <template #header>
         <div class="card-header">
           <span>
@@ -57,37 +64,34 @@
 
       <!-- 功能区域 -->
       <div class="data-table__toolbar">
-        <div class="data-table__toolbar--actions">
+        <div class="data-table__toolbar--left">
           <el-row :gutter="10">
             <el-col :span="1.5">
-
+              <el-button v-hasPerm="['system:role:create']" type="success" icon="plus" @click="handleOpenDialog('create')">新增</el-button>
             </el-col>
             <el-col :span="1.5">
-              
+              <el-button v-hasPerm="['system:role:delete']" type="danger" icon="delete" :disabled="selectIds.length === 0" @click="handleDelete(selectIds)">批量删除</el-button>
             </el-col>
             <el-col :span="1.5">
-              
+              <el-dropdown v-hasPerm="['system:role:patch']" trigger="click">
+                <el-button type="default" :disabled="selectIds.length === 0" icon="ArrowDown">
+                  更多
+                </el-button>
+                <template #dropdown>
+                  <el-dropdown-menu v-hasPerm="['system:role:filter']">
+                    <el-dropdown-item icon="Check" @click="handleMoreClick(true)">批量启用</el-dropdown-item>
+                    <el-dropdown-item icon="CircleClose" @click="handleMoreClick(false)">批量停用</el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
             </el-col>
           </el-row>
-          <el-button v-hasPerm="['system:role:create']" type="success" icon="plus" @click="handleOpenDialog('create')">新增</el-button>
-          <el-button v-hasPerm="['system:role:delete']" type="danger" icon="delete" :disabled="selectIds.length === 0" @click="handleDelete(selectIds)">批量删除</el-button>
-          <el-dropdown v-hasPerm="['system:role:patch']" trigger="click">
-            <el-button type="default" :disabled="selectIds.length === 0" icon="ArrowDown">
-              更多
-            </el-button>
-            <template #dropdown>
-              <el-dropdown-menu v-hasPerm="['system:role:filter']">
-                <el-dropdown-item icon="Check" @click="handleMoreClick(true)">批量启用</el-dropdown-item>
-                <el-dropdown-item icon="CircleClose" @click="handleMoreClick(false)">批量停用</el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
         </div>
-        <div class="data-table__toolbar--tools">
+        <div class="data-table__toolbar--right">
           <el-row :gutter="10">
             <el-col :span="1.5">
               <el-tooltip content="导出">
-                <el-button v-hasPerm="['system:role:export']" type="warning" icon="download" circle @click="handleExport" />
+                <el-button v-hasPerm="['system:role:export']" type="warning" icon="download" circle @click="handleOpenExportsModal" />
               </el-tooltip>
             </el-col>
             <el-col :span="1.5">
@@ -96,18 +100,16 @@
               </el-tooltip>
             </el-col>
             <el-col :span="1.5">
-              <el-tooltip content="列表筛选">
-                <el-dropdown v-hasPerm="['system:role:filter']" trigger="click">
-                  <el-button type="default" icon="operation" circle />
-                  <template #dropdown>
-                    <el-dropdown-menu>
-                      <el-dropdown-item v-for="column in tableColumns" :key="column.prop" :command="column">
-                        <el-checkbox v-model="column.show">{{ column.label }}</el-checkbox>
-                      </el-dropdown-item>
-                    </el-dropdown-menu>
+              <el-popover placement="bottom" trigger="click">
+                <template #reference>
+                  <el-button type="danger" icon="operation" circle></el-button>
+                </template>
+                <el-scrollbar max-height="350px">
+                  <template v-for="column in tableColumns" :key="column.prop">
+                    <el-checkbox v-if="column.prop" v-model="column.show" :label="column.label" />
                   </template>
-                </el-dropdown>
-              </el-tooltip>
+                </el-scrollbar>
+              </el-popover>
             </el-col>
           </el-row>
         </div>
@@ -265,6 +267,14 @@
 
     <PermissonDrawer v-if="drawerVisible" v-model="drawerVisible" :role-name="checkedRole.name" :role-id="checkedRole.id" />
 
+    <!-- 导出弹窗 -->
+    <ExportModal 
+      v-model="exportsDialogVisible"
+      :content-config="curdContentConfig"
+      :query-params="queryFormData"
+      :page-data="pageTableData"
+      :selection-data="selectionRows"
+    />
   </div>
 </template>
 
@@ -277,6 +287,10 @@ defineOptions({
 import { ElMessage, ElMessageBox } from "element-plus";
 import RoleAPI, { RoleTable, RoleForm, TablePageQuery } from "@/api/system/role";
 import { useUserStore } from "@/store";
+import UserTableSelect from "@/views/system/user/components/UserTableSelect.vue";
+import ExportModal from "@/components/CURD/ExportModal.vue";
+import type { IContentConfig } from "@/components/CURD/types";
+import { QuestionFilled, ArrowUp, ArrowDown } from "@element-plus/icons-vue";
 
 const queryFormRef = ref();
 const dataFormRef = ref();
@@ -321,6 +335,8 @@ const queryFormData = reactive<TablePageQuery>({
   status: undefined,
   start_time: undefined,
   end_time: undefined,
+  // 创建人
+  creator: undefined,
 });
 
 // 新增、编辑表单
@@ -375,9 +391,15 @@ async function handleQuery() {
   loadingData();
 }
 
+// 选择创建人后触发查询
+function handleConfirm() {
+  handleQuery();
+}
+
 // 行复选框选中项变化
 async function handleSelectionChange(selection: any) {
   selectIds.value = selection.map((item: any) => item.id);
+  selectionRows.value = selection;
 }
 
 // 重置查询
@@ -497,45 +519,9 @@ async function handleDelete(ids: number[]) {
   });
 }
 
-// 导出
-async function handleExport() {
-  ElMessageBox.confirm('是否确认导出当前系统配置?', '警告', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  }).then(async () => {
-    let downloadUrl = '';
-    try {
-      loading.value = true;      
-
-      const response = await RoleAPI.exportRole(queryFormData);
-      const fileData = response.data;
-      const fileName = decodeURI(response.headers["content-disposition"].split(";")[1].split("=")[1]);
-      const fileType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
-
-      const blob = new Blob([fileData], { type: fileType });
-      downloadUrl = window.URL.createObjectURL(blob);
-
-      const downloadLink = document.createElement("a");
-      downloadLink.href = downloadUrl;
-      downloadLink.download = fileName;
-
-      document.body.appendChild(downloadLink);
-      downloadLink.click();
-      
-      document.body.removeChild(downloadLink);
-    } catch (error: any) {
-      // 错误信息已经在响应拦截器中处理并显示
-      console.error('导出失败:', error);
-    } finally {
-      if (downloadUrl) {
-        window.URL.revokeObjectURL(downloadUrl);
-      }
-      loading.value = false;
-    }
-  }).catch(() => {
-    ElMessageBox.close();
-  });
+// 导出已改为通过导出弹窗 ExportModal 统一处理
+function handleOpenExportsModal() {
+  exportsDialogVisible.value = true;
 }
 
 // 批量启用/停用
@@ -570,6 +556,45 @@ async function handleOpenAssignPermDialog(roleId: number, roleName: string) {
   }
 }
 
+// 导出弹窗显示状态
+const exportsDialogVisible = ref(false);
+const selectionRows = ref<RoleTable[]>([]);
+// 导出字段
+const exportColumns = [
+  { prop: 'name', label: '角色名称' },
+  { prop: 'code', label: '角色编码' },
+  { prop: 'data_scope', label: '数据权限' },
+  { prop: 'order', label: '排序' },
+  { prop: 'status', label: '状态' },
+  { prop: 'description', label: '描述' },
+  { prop: 'created_at', label: '创建时间' },
+  { prop: 'updated_at', label: '更新时间' },
+];
+
+// 导入/导出配置
+const curdContentConfig = {
+  permPrefix: 'system:role',
+  cols: exportColumns as any,
+  exportsAction: async (params: any) => {
+    const query: any = { ...params };
+    if (typeof query.status === 'string') {
+      query.status = query.status === 'true';
+    }
+    query.page_no = 1;
+    query.page_size = 1000;
+    const all: any[] = [];
+    while (true) {
+      const res = await RoleAPI.getRoleList(query);
+      const items = res.data?.data?.items || [];
+      const total = res.data?.data?.total || 0;
+      all.push(...items);
+      if (all.length >= total || items.length === 0) break;
+      query.page_no += 1;
+    }
+    return all;
+  },
+} as unknown as IContentConfig;
+
 onMounted(() => {
   loadingData();
 });
diff --git a/frontend/src/views/system/user/components/UserTableSelect.vue b/frontend/src/views/system/user/components/UserTableSelect.vue
new file mode 100644
index 00000000..7ec968c3
--- /dev/null
+++ b/frontend/src/views/system/user/components/UserTableSelect.vue
@@ -0,0 +1,127 @@
+<!-- 列表选择器 -->
+<template>
+  <table-select :text="text" :select-config="selectConfig" @confirm-click="handleConfirm" @clear-click="handleClearSelection">
+    <template #status="scope">
+      <el-tag :type="scope.row[scope.prop] === true ? 'success' : 'danger'">
+        {{ scope.row[scope.prop] === true ? "启用" : "停用" }}
+      </el-tag>
+    </template>
+  </table-select>
+</template>
+
+<script setup lang="ts">
+import type { ISelectConfig } from "@/components/TableSelect/index.vue";
+import UserAPI from "@/api/system/user";
+
+// 父组件双向绑定的值（选中用户ID）
+const props = defineProps<{ modelValue?: number }>();
+
+// 事件向上派发，支持父组件监听和 v-model（仅回传选中用户ID）
+const emit = defineEmits<{
+  confirmClick: [data: IUser[]];
+  "update:modelValue": [val: number | undefined];
+}>();
+
+const selectConfig: ISelectConfig = {
+  pk: "id",
+  width: "167.5px", // 与搜索表单其他输入宽度一致
+  placeholder: "请选择用户",
+  popover: {
+    width: 720, // 弹出层宽度，提升可用性（约 720px）
+  },
+  formItems: [
+    {
+      type: "select",
+      label: "状态",
+      prop: "status",
+      initialValue: true,
+      attrs: {
+        placeholder: "全部",
+        clearable: true,
+        style: {
+          width: "140px",
+        },
+      },
+      options: [
+        { label: "启用", value: true },
+        { label: "停用", value: false },
+      ],
+    },
+  ],
+  indexAction(params) {
+    // 映射查询参数到后端接口
+    const query: any = { ...params };
+    // 清理空字符串/空值，避免后端 422
+    Object.keys(query).forEach((k) => {
+      const v = query[k];
+      if (v === "" || v === null || v === undefined) {
+        delete query[k];
+      }
+    });
+    // 规范化状态为布尔值
+    if (typeof query.status === "string") {
+      if (query.status === "true") query.status = true;
+      else if (query.status === "false") query.status = false;
+    }
+    // 请求用户分页列表并适配 TableSelect 需要的结构
+    return UserAPI.getUserList(query).then((res: any) => {
+      return {
+        total: res.data.data.total,
+        list: res.data.data.items,
+      };
+    });
+  },
+  tableColumns: [
+    { type: "selection", width: 50, align: "center" },
+    { label: "编号", align: "center", prop: "id", width: 100 },
+    { label: "账号", align: "center", prop: "username" },
+    { label: "用户名", align: "center", prop: "name", width: 120 },
+    {
+      label: "状态",
+      align: "center",
+      prop: "status",
+      templet: "custom",
+      slotName: "status",
+    },
+  ],
+};
+
+interface IUser {
+  id: number;
+  username: string;
+  name: string;
+  mobile?: string;
+  gender?: string;
+  avatar?: string;
+  email?: string | null;
+  status?: boolean;
+  dept_name?: string;
+  role_names?: string[];
+  created_at?: string;
+}
+const selectedUser = ref<IUser>();
+function handleConfirm(data: IUser[]) {
+  selectedUser.value = data[0];
+  const id = selectedUser.value?.id;
+  emit("update:modelValue", id);
+  emit("confirmClick", data);
+}
+function handleClearSelection() {
+  selectedUser.value = undefined;
+  emit("update:modelValue", undefined);
+}
+
+// 当父组件重置 v-model（modelValue）为 undefined 时，清空本地显示
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (val === undefined || val === null) {
+      selectedUser.value = undefined;
+    }
+  }
+);
+
+const text = computed(() => {
+  return selectedUser.value ? `${selectedUser.value.username} - ${selectedUser.value.name}` : "";
+});
+</script>
diff --git a/frontend/src/views/system/user/index.vue b/frontend/src/views/system/user/index.vue
index 82c0e80f..43d76b61 100644
--- a/frontend/src/views/system/user/index.vue
+++ b/frontend/src/views/system/user/index.vue
@@ -31,6 +31,13 @@
                   @update:model-value="handleDateRangeChange"
               />
             </el-form-item>
+            <el-form-item v-if="isExpand" prop="creator" label="创建人">
+              <UserTableSelect
+                  v-model="queryFormData.creator"
+                  @confirm-click="handleConfirm"
+                  @clear-click="handleQuery"
+              />
+            </el-form-item>
             <!-- 查询、重置、展开/收起按钮 -->
             <el-form-item class="search-buttons">
               <el-button v-hasPerm="['system:user:query']" type="primary" icon="search" @click="handleQuery">查询</el-button>
@@ -53,7 +60,7 @@
           </el-form>
         </div>
 
-        <el-card shadow="hover" class="data-table">
+        <el-card class="data-table">
           <template #header>
             <div class="card-header">
               <span>
@@ -67,7 +74,7 @@
 
           <!-- 功能区域 -->
           <div class="data-table__toolbar">
-            <div class="data-table__toolbar--actions">
+            <div class="data-table__toolbar--left">
               <el-row :gutter="10">
                 <el-col :span="1.5">
                   <el-button v-hasPerm="['system:user:create']" type="success" icon="plus"  @click="handleOpenDialog('create')">新增</el-button>
@@ -91,7 +98,7 @@
               </el-row>
             </div>
 
-            <div class="data-table__toolbar--tools">
+            <div class="data-table__toolbar--right">
               <el-row :gutter="10">
                 <el-col :span="1.5">
                   <el-tooltip content="导入">
@@ -100,7 +107,7 @@
                 </el-col>
                 <el-col :span="1.5">
                   <el-tooltip content="导出">
-                    <el-button v-hasPerm="['system:user:export']" type="warning" icon="download" circle @click="handleExport" />
+                    <el-button v-hasPerm="['system:user:export']" type="warning" icon="download" circle @click="handleOpenExportsModal" />
                   </el-tooltip>
                 </el-col>
                 <el-col :span="1.5">
@@ -236,7 +243,7 @@
             <el-tag v-else-if="detailFormData.gender ==='1'" type="warning">女</el-tag>
             <el-tag v-else type="info">未知</el-tag>
           </el-descriptions-item>
-          <el-descriptions-item label="部门" :span="2">{{ detailFormData.dept_name }}</el-descriptions-item>
+          <el-descriptions-item label="部门" :span="2">{{ detailFormData.dept ? detailFormData.dept.name : '' }}</el-descriptions-item>
           <el-descriptions-item label="角色" :span="2">{{ detailFormData.roles ? detailFormData.roles.map(item => item.name).join('、') : '' }}</el-descriptions-item>
           <el-descriptions-item label="岗位" :span="2">{{ detailFormData.positions ? detailFormData.positions.map(item => item.name).join('、') : '' }}</el-descriptions-item>  
           <el-descriptions-item label="邮箱" :span="2">{{ detailFormData.email }}</el-descriptions-item>
@@ -339,9 +346,22 @@
       </template>
     </el-drawer>
 
-    <!-- 用户导入 -->
-    <ImportModal v-model="importDialogVisible" title="导入用户" @import-success="handleQuery()" @download-template="handleDownloadTemplate" @upload="handleUpload" />
-
+    <!-- 导入弹窗 -->
+      <ImportModal 
+        v-model="importDialogVisible" 
+        :content-config="curdContentConfig"
+        @upload="handleUpload" 
+      />
+
+      <!-- 导出弹窗 -->
+      <ExportModal 
+        v-model="exportsDialogVisible"
+        :content-config="curdContentConfig"
+        :query-params="queryFormData"
+        :page-data="pageTableData"
+        :selection-data="selectionRows"
+      />
+    
   </div>
 </template>
 
@@ -362,7 +382,12 @@ import DeptAPI from "@/api/system/dept";
 import RoleAPI from "@/api/system/role";
 
 import DeptTree from "./components/DeptTree.vue";
+import UserTableSelect from "./components/UserTableSelect.vue";
 import { useUserStore } from "@/store";
+import ImportModal from "@/components/CURD/ImportModal.vue";
+import ExportModal from "@/components/CURD/ExportModal.vue";
+import type { IContentConfig } from "@/components/CURD/types";
+import { QuestionFilled, ArrowUp, ArrowDown } from "@element-plus/icons-vue";
 
 const appStore = useAppStore();
 
@@ -373,6 +398,7 @@ const loading = ref(false);
 const isExpand = ref(false);
 const isExpandable = ref(true);
 const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "450px" : "90%"));
+const selectionRows = ref<UserInfo[]>([]);
 // 选中的用户ID
 const selectIds = ref<number[]>([]);
 // 部门下拉数据源
@@ -383,6 +409,8 @@ const roleOptions = ref<OptionType[]>();
 const positionOptions = ref<OptionType[]>();
 // 导入弹窗显示状态
 const importDialogVisible = ref(false);
+// 导出弹窗显示状态
+const exportsDialogVisible = ref(false);
 // 分页表单
 const pageTableData = ref<UserInfo[]>([]);
 // 详情表单
@@ -398,6 +426,8 @@ const queryFormData = reactive<UserPageQuery>({
   dept_id: undefined,
   start_time: undefined,
   end_time: undefined,
+  // 创建人
+  creator: undefined,
 });
 
 // 表单
@@ -408,9 +438,9 @@ const formData = reactive<UserForm>({
   dept_id: undefined,
   dept_name: undefined,
   role_ids: undefined,
-  roleNames: undefined,
+  role_names: undefined,
   position_ids: undefined,
-  positionNames: undefined,
+  position_names: undefined,
   password: undefined,
   gender: undefined,
   email: undefined,
@@ -456,6 +486,51 @@ const rules = reactive({
 // 日期范围临时变量
 const dateRange = ref<[Date, Date] | []>([]);
 
+// 仅用于导出字段的列（排除非数据列及嵌套对象列）
+const exportColumns = [
+  { prop: 'username', label: '账号' },
+  { prop: 'name', label: '名称' },
+  { prop: 'status', label: '状态' },
+  { prop: 'gender', label: '性别' },
+  { prop: 'email', label: '邮箱' },
+  { prop: 'mobile', label: '手机号' },
+  { prop: 'is_superuser', label: '是否超管' },
+  { prop: 'description', label: '描述' },
+  { prop: 'created_at', label: '创建时间' },
+  { prop: 'updated_at', label: '更新时间' },
+];
+
+// 导入/导出配置
+const curdContentConfig = {
+  permPrefix: 'system:user',
+  cols: exportColumns as any,
+  importTemplate: () => UserAPI.downloadTemplate(),
+  exportsAction: async (params: any) => {
+    const query: any = { ...params };
+    if (typeof query.status === 'string') {
+      query.status = query.status === 'true';
+    }
+    query.page_no = 1;
+    query.page_size = 1000;
+    const all: any[] = [];
+    while (true) {
+      const res = await UserAPI.getUserList(query);
+      const items = res.data?.data?.items || [];
+      const total = res.data?.data?.total || 0;
+      all.push(...items);
+      if (all.length >= total || items.length === 0) break;
+      query.page_no += 1;
+    }
+    return all;
+  },
+} as unknown as IContentConfig;
+
+
+// 选择创建人后触发查询
+function handleConfirm() {
+  handleQuery();
+}
+
 // 处理日期范围变化
 function handleDateRangeChange(range: [Date, Date]) {
   dateRange.value = range;
@@ -497,9 +572,18 @@ async function handleQuery() {
 
 // 重置查询
 async function handleResetQuery() {
+  // 重置表单字段
   queryFormRef.value.resetFields();
+  // 额外清空不在 model 内的扩展查询项（如日期范围）
+  dateRange.value = [];
+  queryFormData.start_time = undefined;
+  queryFormData.end_time = undefined;
+  // 清空部门并重置页码
   queryFormData.dept_id = undefined;
+  // 清空创建人
+  queryFormData.creator = undefined;
   queryFormData.page_no = 1;
+  // 重新加载数据
   loadingData();
 }
 
@@ -511,9 +595,9 @@ const initialFormData: UserForm = {
   dept_id: undefined,
   dept_name: undefined,
   role_ids: undefined,
-  roleNames: undefined,
+  role_names: undefined,
   position_ids: undefined,
-  positionNames: undefined,
+  position_names: undefined,
   password: undefined,
   gender: undefined,
   email: undefined,
@@ -536,6 +620,7 @@ async function resetForm() {
 // 选中项发生变化
 async function handleSelectionChange(selection: any) {
   selectIds.value = selection.map((item: any) => item.id);
+  selectionRows.value = selection;
 }
 
 // 重置密码
@@ -641,47 +726,7 @@ async function handleSubmit() {
   });
 }
 
-// 导出
-async function handleExport() {
-  ElMessageBox.confirm('是否确认导出当前查询结果用户数据?', '警告', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  }).then(async () => {
-    let downloadUrl = '';
-    try {
-      loading.value = true;
-
-      const response = await UserAPI.exportUser(queryFormData);
-      const fileData = response.data;
-      const fileName = decodeURI(response.headers["content-disposition"].split("; ")[1].split("=")[1]);
-      const fileType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
-
-      const blob = new Blob([fileData], { type: fileType });
-      downloadUrl = window.URL.createObjectURL(blob);
-
-      const downloadLink = document.createElement("a");
-      downloadLink.href = downloadUrl;
-      downloadLink.download = fileName;
-
-      document.body.appendChild(downloadLink);
-      downloadLink.click();
-      
-      document.body.removeChild(downloadLink);
-    } catch (error: any) {
-      // 错误信息已经在响应拦截器中处理并显示
-      console.error('导出失败:', error);
-    } finally {
-      if (downloadUrl) {
-        window.URL.revokeObjectURL(downloadUrl);
-      }
-      loading.value = false;
-    }
-
-  }).catch(() => {
-    ElMessageBox.close();
-  });
-}
+// 导出已改为通过导出弹窗 ExportModal 统一处理
 
 // 删除、批量删除
 async function handleDelete(ids: number[]) {
@@ -732,6 +777,11 @@ function handleOpenImportDialog() {
   importDialogVisible.value = true;
 }
 
+// 打开导出弹窗
+function handleOpenExportsModal() {
+  exportsDialogVisible.value = true;
+}
+
 const emit = defineEmits(['import-success']);
 
 // 上传文件
@@ -740,6 +790,8 @@ const handleUpload = async (formData: FormData) => {
     const response = await UserAPI.importUser(formData);
     if (response.data.code === ResultEnum.SUCCESS) {
       ElMessage.success(`${response.data.msg}，${response.data.data}`);
+      importDialogVisible.value = false;
+      await handleQuery();
       emit('import-success');
     }
   } catch (error: any) {
@@ -749,29 +801,6 @@ const handleUpload = async (formData: FormData) => {
 };
 
 
-// 下载导入模板
-const handleDownloadTemplate = () => {
-  UserAPI.downloadTemplate().then((response: any) => {
-    const fileData = response.data;
-    const fileName = decodeURI(response.headers["content-disposition"].split(";")[1].split("=")[1]);
-    const fileType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
-
-    const blob = new Blob([fileData], { type: fileType });
-    const downloadUrl = window.URL.createObjectURL(blob);
-
-    const downloadLink = document.createElement("a");
-    downloadLink.href = downloadUrl;
-    downloadLink.download = fileName;
-
-    document.body.appendChild(downloadLink);
-    downloadLink.click();
-
-    document.body.removeChild(downloadLink);
-    window.URL.revokeObjectURL(downloadUrl);
-  });
-};
-
-
 onMounted(() => {
   handleQuery();
 });