diff --git a/frontend/package.json b/frontend/package.json
index b15f1bba..c9192eec 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -131,6 +131,7 @@
     "postcss": "^8.5.6",
     "postcss-html": "^1.8.0",
     "postcss-scss": "^4.0.9",
+    "plop": "^4.0.1",
     "prettier": "^3.6.2",
     "sass": "^1.89.2",
     "stylelint": "^16.25.0",
diff --git a/frontend/plop-templates/curd-list-page.vue.hbs b/frontend/plop-templates/curd-list-page.vue.hbs
new file mode 100644
index 00000000..0f41654f
--- /dev/null
+++ b/frontend/plop-templates/curd-list-page.vue.hbs
@@ -0,0 +1,85 @@
+<!-- plop(curd-list) 生成：补全 API、searchConfig、contentConfig、表格列与弹窗 -->
+<template>
+  <div class="app-container">
+    <PageSearch
+      ref="searchRef"
+      :search-config="searchConfig"
+      @query-click="handleQueryClick"
+      @reset-click="handleResetClick"
+    />
+
+    <PageContent ref="contentRef" :content-config="contentConfig">
+      <template #toolbar="{ toolbarRight, onToolbar, removeIds, cols }">
+        <CrudToolbarLeft
+          :remove-ids="removeIds"
+          :perm-create="['{{permPrefix}}:create']"
+          :perm-delete="['{{permPrefix}}:delete']"
+          :perm-patch="['{{permPrefix}}:patch']"
+          @add="handleOpenDialog('create')"
+          @delete="onToolbar('delete')"
+          @more="handleMoreClick"
+        />
+        <div class="data-table__toolbar--right">
+          <CrudToolbarRight :buttons="toolbarRight" :cols="cols" :on-toolbar="onToolbar" />
+        </div>
+      </template>
+
+      <template #table="{ data, loading, tableRef, onSelectionChange, pagination }">
+        <div class="data-table__content">
+          <el-table
+            :ref="tableRef as any"
+            v-loading="loading"
+            row-key="id"
+            :data="data"
+            height="calc(100vh - 350px)"
+            max-height="calc(100vh - 350px)"
+            border
+            stripe
+            @selection-change="onSelectionChange"
+          >
+            <template #empty>
+              <el-empty :image-size="80" description="暂无数据" />
+            </template>
+            <!-- TODO: el-table-column -->
+          </el-table>
+        </div>
+      </template>
+    </PageContent>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: "{{componentName}}", inheritAttrs: false });
+
+import { reactive } from "vue";
+import CrudToolbarLeft from "@/components/CURD/CrudToolbarLeft.vue";
+import CrudToolbarRight from "@/components/CURD/CrudToolbarRight.vue";
+import PageSearch from "@/components/CURD/PageSearch.vue";
+import PageContent from "@/components/CURD/PageContent.vue";
+import { useCrudList } from "@/components/CURD/useCrudList";
+import type { IContentConfig, ISearchConfig } from "@/components/CURD/types";
+
+const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
+
+const searchConfig = reactive<ISearchConfig>({
+  permPrefix: "{{permPrefix}}",
+  formItems: [],
+});
+
+const contentConfig = reactive<IContentConfig>({
+  permPrefix: "{{permPrefix}}",
+  toolbar: [],
+  defaultToolbar: ["refresh", "filter"],
+  cols: [],
+  /** TODO: 接入列表 API，返回 { total, list } 供 PageContent 解析 */
+  indexAction: async () => ({ total: 0, list: [] }),
+});
+
+function handleOpenDialog(_type: "create" | "update" | "detail", _id?: string) {
+  // TODO
+}
+
+async function handleMoreClick(_status: string) {
+  // TODO 批量启用/停用
+}
+</script>
diff --git a/frontend/plopfile.mjs b/frontend/plopfile.mjs
new file mode 100644
index 00000000..ade16a07
--- /dev/null
+++ b/frontend/plopfile.mjs
@@ -0,0 +1,31 @@
+/** @param {import("plop").NodePlopAPI} plop */
+export default function (plop) {
+  plop.setGenerator("curd-list", {
+    description: "列表页骨架：PageSearch + PageContent + CrudToolbarLeft/Right + useCrudList",
+    prompts: [
+      {
+        type: "input",
+        name: "modulePath",
+        message: "views 下路径（如 module_example/demo）",
+      },
+      {
+        type: "input",
+        name: "componentName",
+        message: "组件 name（PascalCase，如 Demo）",
+      },
+      {
+        type: "input",
+        name: "permPrefix",
+        message: "权限前缀（如 module_example:demo）",
+      },
+    ],
+    actions: [
+      {
+        type: "add",
+        path: "src/views/{{modulePath}}/index.vue",
+        templateFile: "plop-templates/curd-list-page.vue.hbs",
+        skipIfExists: true,
+      },
+    ],
+  });
+}
diff --git a/frontend/src/components/CURD/CrudToolbarLeft.vue b/frontend/src/components/CURD/CrudToolbarLeft.vue
new file mode 100644
index 00000000..9d0707f3
--- /dev/null
+++ b/frontend/src/components/CURD/CrudToolbarLeft.vue
@@ -0,0 +1,92 @@
+<!-- 列表页左侧工具栏：1) configButtons 与 PageContent 配置驱动一致 2) perm 预设「新增/批删/更多」 3) 默认插槽完全自定义 -->
+<template>
+  <div class="data-table__toolbar--left">
+    <template v-if="configButtons && configButtons.length">
+      <template v-for="(btn, index) in configButtons" :key="index">
+        <el-button
+          v-hasPerm="btn.perm ?? '*:*:*'"
+          v-bind="btn.attrs"
+          :disabled="btn.name === 'delete' && removeIds.length === 0"
+          @click="$emit('toolbar', btn.name)"
+        >
+          {{ btn.text }}
+        </el-button>
+      </template>
+    </template>
+    <slot v-else>
+      <el-button
+        v-if="permCreate"
+        v-hasPerm="permCreate"
+        type="success"
+        icon="plus"
+        @click="$emit('add')"
+      >
+        新增
+      </el-button>
+      <el-button
+        v-if="permDelete"
+        v-hasPerm="permDelete"
+        type="danger"
+        icon="delete"
+        :loading="deleteLoading"
+        :disabled="removeIds.length === 0"
+        @click="$emit('delete')"
+      >
+        批量删除
+      </el-button>
+      <el-dropdown v-if="permPatch" v-hasPerm="permPatch" trigger="click">
+        <el-button
+          type="default"
+          :disabled="removeIds.length === 0 || moreDisabled"
+          icon="ArrowDown"
+        >
+          更多
+        </el-button>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item icon="Check" @click="$emit('more', '0')">批量启用</el-dropdown-item>
+            <el-dropdown-item icon="CircleClose" @click="$emit('more', '1')">
+              批量停用
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import type { CrudToolbarConfigButton } from "./types";
+
+const props = withDefaults(
+  defineProps<{
+    /** 与 PageContent `toolbarLeftBtn` 一致时走配置驱动（与 handleToolbar 对齐） */
+    configButtons?: CrudToolbarConfigButton[];
+    /** 勾选行主键，用于禁用批删 / 更多（插槽完全自定义时可不传） */
+    removeIds?: Array<string | number>;
+    /** 新增按钮权限，不传则不显示（configButtons 未传时） */
+    permCreate?: string | string[];
+    /** 批量删除权限，不传则不显示 */
+    permDelete?: string | string[];
+    /** 「更多」下拉权限，不传则不显示 */
+    permPatch?: string | string[];
+    /** 批量删除中（按钮 loading，并禁用「更多」） */
+    deleteLoading?: boolean;
+  }>(),
+  {
+    removeIds: () => [],
+    deleteLoading: false,
+  }
+);
+
+defineEmits<{
+  /** 配置模式：与 PageContent handleToolbar 一致 */
+  toolbar: [name: string];
+  add: [];
+  delete: [];
+  more: [value: string];
+}>();
+
+const moreDisabled = computed(() => props.removeIds.length === 0 || props.deleteLoading);
+</script>
diff --git a/frontend/src/components/CURD/CrudToolbarRight.vue b/frontend/src/components/CURD/CrudToolbarRight.vue
new file mode 100644
index 00000000..c6c59cf8
--- /dev/null
+++ b/frontend/src/components/CURD/CrudToolbarRight.vue
@@ -0,0 +1,57 @@
+<!-- PageContent 右侧圆形工具条：与业务页 #toolbar 中重复的 v-for 逻辑一致，含 Tooltip / 列筛选 -->
+<template>
+  <slot name="prepend" />
+  <template v-for="(btn, index) in buttons" :key="index">
+    <el-popover v-if="btn.name === 'filter'" placement="bottom" trigger="click">
+      <template #reference>
+        <el-button v-bind="btn.attrs" />
+      </template>
+      <el-scrollbar max-height="350px">
+        <template v-for="c in cols" :key="c.prop">
+          <el-checkbox v-if="c.prop" v-model="c.show" :label="c.label" />
+        </template>
+      </el-scrollbar>
+    </el-popover>
+    <el-tooltip v-else-if="tooltipContent(btn.name)" :content="tooltipContent(btn.name)!">
+      <el-button v-hasPerm="btn.perm ?? '*:*:*'" v-bind="btn.attrs" @click="onToolbar(btn.name)" />
+    </el-tooltip>
+    <el-button
+      v-else
+      v-hasPerm="btn.perm ?? '*:*:*'"
+      v-bind="btn.attrs"
+      @click="onToolbar(btn.name)"
+    />
+  </template>
+</template>
+
+<script setup lang="ts">
+import type { ButtonProps } from "element-plus";
+import type { CSSProperties } from "vue";
+
+/** 与 PageContent createToolbar 产出的右侧按钮结构一致 */
+export type CrudToolbarRightButton = {
+  name: string;
+  text?: string;
+  attrs?: Partial<ButtonProps> & { style?: CSSProperties };
+  perm?: string | string[] | null;
+};
+
+defineProps<{
+  buttons: CrudToolbarRightButton[];
+  cols: Array<{ prop?: string; label?: string; show?: boolean }>;
+  onToolbar: (name: string) => void;
+}>();
+
+const TOOLTIPS: Record<string, string> = {
+  import: "导入",
+  imports: "批量导入",
+  export: "导出",
+  exports: "导出",
+  search: "搜索显示/隐藏",
+  refresh: "刷新",
+};
+
+function tooltipContent(name: string): string | undefined {
+  return TOOLTIPS[name];
+}
+</script>
diff --git a/frontend/src/components/CURD/EnhancedDialog.vue b/frontend/src/components/CURD/EnhancedDialog.vue
new file mode 100644
index 00000000..1e27f50a
--- /dev/null
+++ b/frontend/src/components/CURD/EnhancedDialog.vue
@@ -0,0 +1,112 @@
+<template>
+  <el-dialog
+    v-model="visible"
+    :width="width"
+    :draggable="draggable"
+    :fullscreen="fullscreen"
+    :show-close="false"
+    :class="dialogClass"
+    :modal-class="modalClass"
+    align-center
+    destroy-on-close
+    v-bind="dialogAttrs"
+    @close="emit('close')"
+    @opened="emit('opened')"
+  >
+    <template #header="{ titleId, titleClass, close }">
+      <div class="curd-dialog-header">
+        <span :id="titleId" :class="titleClass">{{ title }}</span>
+        <div class="curd-dialog-header__actions">
+          <el-tooltip :content="fullscreen ? '还原' : '全屏'" placement="top">
+            <el-button text circle type="primary" @click="fullscreen = !fullscreen">
+              <el-icon>
+                <Fold v-if="fullscreen" />
+                <FullScreen v-else />
+              </el-icon>
+            </el-button>
+          </el-tooltip>
+          <el-tooltip content="关闭" placement="top">
+            <el-button text circle @click="close">
+              <el-icon><Close /></el-icon>
+            </el-button>
+          </el-tooltip>
+        </div>
+      </div>
+    </template>
+    <slot />
+    <template v-if="$slots.footer" #footer>
+      <slot name="footer" />
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { Close, Fold, FullScreen } from "@element-plus/icons-vue";
+import type { DialogProps } from "element-plus";
+import { computed, ref, useAttrs } from "vue";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean;
+    title?: string;
+    width?: string | number;
+    /** 默认可拖拽；全屏时 Element Plus 会限制拖拽 */
+    draggable?: boolean;
+    /** 透传到 el-dialog 的 class */
+    dialogClass?: string;
+    /** 遮罩层自定义 class */
+    modalClass?: string;
+  }>(),
+  {
+    draggable: true,
+  }
+);
+
+const emit = defineEmits<{
+  "update:modelValue": [v: boolean];
+  close: [];
+  opened: [];
+}>();
+
+const attrs = useAttrs();
+const fullscreen = ref(false);
+
+const dialogClass = computed(() => {
+  const a = attrs.class;
+  return [props.dialogClass, a].filter(Boolean);
+});
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (v: boolean) => emit("update:modelValue", v),
+});
+
+/** 透传除 modelValue 外的 el-dialog 属性（如 top、modal-class、append-to-body 等） */
+const dialogAttrs = computed(() => {
+  const a = { ...attrs } as Record<string, unknown>;
+  delete a.class;
+  return a as Partial<Omit<DialogProps, "modelValue">>;
+});
+</script>
+
+<style scoped lang="scss">
+.curd-dialog-header {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding-right: 4px;
+}
+
+.curd-dialog-header__actions {
+  display: inline-flex;
+  flex-shrink: 0;
+  gap: 2px;
+  align-items: center;
+  margin-left: auto;
+}
+</style>
diff --git a/frontend/src/components/CURD/EnhancedDrawer.vue b/frontend/src/components/CURD/EnhancedDrawer.vue
new file mode 100644
index 00000000..61ba3925
--- /dev/null
+++ b/frontend/src/components/CURD/EnhancedDrawer.vue
@@ -0,0 +1,102 @@
+<template>
+  <el-drawer
+    v-model="visible"
+    :size="size"
+    :direction="direction"
+    :show-close="false"
+    :class="drawerClassMerged"
+    destroy-on-close
+    v-bind="drawerAttrs"
+    @close="emit('close')"
+    @opened="emit('opened')"
+  >
+    <template #header>
+      <div class="curd-drawer-header">
+        <span class="curd-drawer-header__title">{{ title }}</span>
+        <div class="curd-drawer-header__actions">
+          <el-tooltip content="关闭" placement="top">
+            <el-button text circle @click="visible = false">
+              <el-icon><Close /></el-icon>
+            </el-button>
+          </el-tooltip>
+        </div>
+      </div>
+    </template>
+    <slot />
+    <template v-if="$slots.footer" #footer>
+      <slot name="footer" />
+    </template>
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+import { Close } from "@element-plus/icons-vue";
+import type { DrawerProps } from "element-plus";
+import { computed, useAttrs } from "vue";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean;
+    title?: string;
+    size?: string | number;
+    direction?: "rtl" | "ltr" | "ttb" | "btt";
+    /** 透传到 el-drawer 的 class */
+    drawerClass?: string;
+  }>(),
+  {
+    direction: "rtl",
+  }
+);
+
+const emit = defineEmits<{
+  "update:modelValue": [v: boolean];
+  close: [];
+  opened: [];
+}>();
+
+const attrs = useAttrs();
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (v: boolean) => emit("update:modelValue", v),
+});
+
+const drawerClassMerged = computed(() => {
+  const a = attrs.class;
+  return [props.drawerClass, a].filter(Boolean);
+});
+
+const drawerAttrs = computed(() => {
+  const a = { ...attrs } as Record<string, unknown>;
+  delete a.class;
+  return a as Partial<Omit<DrawerProps, "modelValue">>;
+});
+</script>
+
+<style scoped lang="scss">
+.curd-drawer-header {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding-right: 4px;
+}
+
+.curd-drawer-header__title {
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--el-text-color-primary);
+}
+
+.curd-drawer-header__actions {
+  display: inline-flex;
+  flex-shrink: 0;
+  gap: 2px;
+  align-items: center;
+  margin-left: auto;
+}
+</style>
diff --git a/frontend/src/components/CURD/ExportModal.vue b/frontend/src/components/CURD/ExportModal.vue
index 546fd5aa..628d6967 100644
--- a/frontend/src/components/CURD/ExportModal.vue
+++ b/frontend/src/components/CURD/ExportModal.vue
@@ -1,12 +1,11 @@
 <template>
-  <div>
+  <div class="curd-export-modal-host">
     <!-- 导出弹窗 -->
-    <el-dialog
+    <EnhancedDialog
       v-model="exportsModalVisible"
-      :align-center="true"
       title="导出数据"
       width="600px"
-      style="padding-right: 0"
+      dialog-class="curd-embed-dialog"
       @close="handleCloseExportsModal"
     >
       <!-- 滚动 -->
@@ -59,11 +58,12 @@
           <el-button @click="handleCloseExportsModal">取 消</el-button>
         </div>
       </template>
-    </el-dialog>
+    </EnhancedDialog>
   </div>
 </template>
 
 <script lang="ts" setup>
+import EnhancedDialog from "./EnhancedDialog.vue";
 import ExcelJS from "exceljs";
 import type { IContentConfig, IObject } from "./types";
 import { useThrottleFn } from "@vueuse/core";
diff --git a/frontend/src/components/CURD/ImportModal.vue b/frontend/src/components/CURD/ImportModal.vue
index 740b06ad..0ffc2ec1 100644
--- a/frontend/src/components/CURD/ImportModal.vue
+++ b/frontend/src/components/CURD/ImportModal.vue
@@ -1,12 +1,11 @@
 <template>
-  <div>
+  <div class="curd-import-modal-host">
     <!-- 导入弹窗 -->
-    <el-dialog
+    <EnhancedDialog
       v-model="importModalVisible"
-      :align-center="true"
       :title="props.title"
       :width="props.width"
-      style="padding-right: 0"
+      dialog-class="curd-embed-dialog"
       @close="handleClose"
     >
       <!-- 滚动 -->
@@ -69,11 +68,12 @@
           </el-button>
         </div>
       </template>
-    </el-dialog>
+    </EnhancedDialog>
   </div>
 </template>
 
 <script lang="ts" setup>
+import EnhancedDialog from "./EnhancedDialog.vue";
 import { ElMessage, type UploadUserFile } from "element-plus";
 import { ref, reactive } from "vue";
 import type { IContentConfig, IObject } from "./types";
diff --git a/frontend/src/components/CURD/PageContent.vue b/frontend/src/components/CURD/PageContent.vue
index 862fc199..5418764f 100644
--- a/frontend/src/components/CURD/PageContent.vue
+++ b/frontend/src/components/CURD/PageContent.vue
@@ -1,192 +1,201 @@
 <template>
-  <div
-    class="rounded bg-[var(--el-bg-color)] border border-[var(--el-border-color)] p-5 h-full md:flex flex-1 flex-col md:overflow-auto"
+  <el-card
+    class="data-table flex-1 min-h-0"
+    :shadow="config.cardShadow ?? 'never'"
+    :class="contentConfig.cardClass"
+    :body-style="cardBodyStyle"
   >
-    <!-- 表格工具栏 -->
-    <div class="flex flex-col md:flex-row justify-between gap-y-2.5 mb-2.5">
-      <!-- 左侧工具栏 -->
-      <div class="toolbar-left flex gap-y-2.5 gap-x-2 md:gap-x-3 flex-wrap">
-        <template v-for="(btn, index) in toolbarLeftBtn" :key="index">
-          <el-button
-            v-hasPerm="btn.perm ?? '*:*:*'"
-            v-bind="btn.attrs"
-            :disabled="btn.name === 'delete' && removeIds.length === 0"
-            @click="handleToolbar(btn.name)"
-          >
-            {{ btn.text }}
-          </el-button>
-        </template>
-      </div>
-      <!-- 右侧工具栏 -->
-      <div class="toolbar-right flex gap-y-2.5 gap-x-2 md:gap-x-3 flex-wrap">
-        <template v-for="(btn, index) in toolbarRightBtn" :key="index">
-          <el-popover v-if="btn.name === 'filter'" placement="bottom" trigger="click">
-            <template #reference>
-              <el-button v-bind="btn.attrs"></el-button>
-            </template>
-            <el-scrollbar max-height="350px">
-              <template v-for="col in cols" :key="col.prop">
-                <el-checkbox v-if="col.prop" v-model="col.show" :label="col.label" />
-              </template>
-            </el-scrollbar>
-          </el-popover>
-          <el-button
-            v-else
-            v-hasPerm="btn.perm ?? '*:*:*'"
-            v-bind="btn.attrs"
-            @click="handleToolbar(btn.name)"
-          ></el-button>
-        </template>
-      </div>
+    <template v-if="slots.header" #header>
+      <slot name="header" />
+    </template>
+    <!-- 表格工具栏：#toolbar 可完全自定义；默认左右分栏 -->
+    <div
+      v-if="
+        config.showToolbar !== false &&
+        (slots.toolbar || toolbarLeftBtn.length > 0 || toolbarRightBtn.length > 0)
+      "
+      class="data-table__toolbar"
+    >
+      <slot
+        name="toolbar"
+        :toolbar-left="toolbarLeftBtn"
+        :toolbar-right="toolbarRightBtn"
+        :on-toolbar="handleToolbar"
+        :remove-ids="removeIds"
+        :cols="cols"
+      >
+        <CrudToolbarLeft
+          v-if="toolbarLeftBtn.length > 0"
+          :remove-ids="removeIds"
+          :config-buttons="toolbarLeftBtn"
+          @toolbar="handleToolbar"
+        />
+        <div class="data-table__toolbar--right">
+          <CrudToolbarRight :buttons="toolbarRightBtn" :cols="cols" :on-toolbar="handleToolbar" />
+        </div>
+      </slot>
     </div>
 
-    <!-- 列表 -->
-    <el-table
-      ref="tableRef"
-      v-loading="loading"
-      v-bind="contentConfig.table"
-      :data="pageData"
-      :row-key="pk"
-      class="flex-1"
-      @selection-change="handleSelectionChange"
-      @filter-change="handleFilterChange"
-    >
-      <template v-for="col in cols" :key="col.prop">
-        <el-table-column v-if="col.show" v-bind="col">
-          <template #default="scope">
-            <!-- 显示图片 -->
-            <template v-if="col.templet === 'image'">
-              <template v-if="col.prop">
-                <template v-if="Array.isArray(scope.row[col.prop])">
-                  <template v-for="(item, index) in scope.row[col.prop]" :key="item">
-                    <el-image
-                      :src="item"
-                      :preview-src-list="scope.row[col.prop]"
-                      :initial-index="index"
-                      :preview-teleported="true"
-                      :style="`width: ${col.imageWidth ?? 40}px; height: ${col.imageHeight ?? 40}px`"
+    <!-- 列表：默认内置 el-table；传入 #table 插槽可完全自定义（普通表 / 树表等） -->
+    <div class="data-table__content">
+      <slot
+        name="table"
+        :data="pageData"
+        :loading="loading"
+        :table-ref="tableRef"
+        :on-selection-change="handleSelectionChange"
+        :pagination="pagination"
+      >
+        <el-table
+          ref="tableRef"
+          v-loading="loading"
+          v-bind="contentConfig.table"
+          :data="pageData"
+          :row-key="pk"
+          class="flex-1"
+          @selection-change="handleSelectionChange"
+          @filter-change="handleFilterChange"
+        >
+          <template v-for="col in cols" :key="col.prop">
+            <el-table-column v-if="col.show" v-bind="col">
+              <template #default="scope">
+                <!-- 显示图片 -->
+                <template v-if="col.templet === 'image'">
+                  <template v-if="col.prop">
+                    <template v-if="Array.isArray(scope.row[col.prop])">
+                      <template v-for="(item, index) in scope.row[col.prop]" :key="item">
+                        <el-image
+                          :src="item"
+                          :preview-src-list="scope.row[col.prop]"
+                          :initial-index="Number(index)"
+                          :preview-teleported="true"
+                          :style="`width: ${col.imageWidth ?? 40}px; height: ${col.imageHeight ?? 40}px`"
+                        />
+                      </template>
+                    </template>
+                    <template v-else>
+                      <el-image
+                        :src="scope.row[col.prop]"
+                        :preview-src-list="[scope.row[col.prop]]"
+                        :preview-teleported="true"
+                        :style="`width: ${col.imageWidth ?? 40}px; height: ${col.imageHeight ?? 40}px`"
+                      />
+                    </template>
+                  </template>
+                </template>
+                <!-- 根据行的selectList属性返回对应列表值 -->
+                <template v-else-if="col.templet === 'list'">
+                  <template v-if="col.prop">
+                    {{ (col.selectList ?? {})[scope.row[col.prop]] }}
+                  </template>
+                </template>
+                <!-- 格式化显示链接 -->
+                <template v-else-if="col.templet === 'url'">
+                  <template v-if="col.prop">
+                    <el-link type="primary" :href="scope.row[col.prop]" target="_blank">
+                      {{ scope.row[col.prop] }}
+                    </el-link>
+                  </template>
+                </template>
+                <!-- 生成开关组件 -->
+                <template v-else-if="col.templet === 'switch'">
+                  <template v-if="col.prop">
+                    <!-- pageData.length>0: 解决el-switch组件会在表格初始化的时候触发一次change事件 -->
+                    <el-switch
+                      v-model="scope.row[col.prop]"
+                      :active-value="col.activeValue ?? 1"
+                      :inactive-value="col.inactiveValue ?? 0"
+                      :inline-prompt="true"
+                      :active-text="col.activeText ?? ''"
+                      :inactive-text="col.inactiveText ?? ''"
+                      :validate-event="false"
+                      :disabled="col.disabled"
+                      @change="
+                        pageData.length > 0 &&
+                        handleModify(col.prop, scope.row[col.prop], scope.row)
+                      "
                     />
                   </template>
                 </template>
-                <template v-else>
-                  <el-image
-                    :src="scope.row[col.prop]"
-                    :preview-src-list="[scope.row[col.prop]]"
-                    :preview-teleported="true"
-                    :style="`width: ${col.imageWidth ?? 40}px; height: ${col.imageHeight ?? 40}px`"
-                  />
+                <!-- 生成输入框组件 -->
+                <template v-else-if="col.templet === 'input'">
+                  <template v-if="col.prop">
+                    <el-input
+                      v-model="scope.row[col.prop]"
+                      :type="col.inputType ?? 'text'"
+                      :disabled="col.disabled"
+                      @blur="handleModify(col.prop, scope.row[col.prop], scope.row)"
+                    />
+                  </template>
+                </template>
+                <!-- 格式化为价格 -->
+                <template v-else-if="col.templet === 'price'">
+                  <template v-if="col.prop">
+                    {{ `${col.priceFormat ?? "￥"}${scope.row[col.prop]}` }}
+                  </template>
+                </template>
+                <!-- 格式化为百分比 -->
+                <template v-else-if="col.templet === 'percent'">
+                  <template v-if="col.prop">{{ scope.row[col.prop] }}%</template>
+                </template>
+                <!-- 显示图标 -->
+                <template v-else-if="col.templet === 'icon'">
+                  <template v-if="col.prop">
+                    <template v-if="scope.row[col.prop].startsWith('el-icon-')">
+                      <el-icon>
+                        <component :is="scope.row[col.prop].replace('el-icon-', '')" />
+                      </el-icon>
+                    </template>
+                    <template v-else>
+                      <div class="i-svg:{{ scope.row[col.prop] }}" />
+                    </template>
+                  </template>
+                </template>
+                <!-- 格式化时间 -->
+                <template v-else-if="col.templet === 'date'">
+                  <template v-if="col.prop">
+                    {{
+                      scope.row[col.prop]
+                        ? useDateFormat(
+                            scope.row[col.prop],
+                            col.dateFormat ?? "YYYY-MM-DD HH:mm:ss"
+                          ).value
+                        : ""
+                    }}
+                  </template>
+                </template>
+                <!-- 列操作栏 -->
+                <template v-else-if="col.templet === 'tool'">
+                  <template v-for="(btn, index) in tableToolbarBtn" :key="index">
+                    <el-button
+                      v-if="btn.render === undefined || btn.render(scope.row)"
+                      v-hasPerm="btn.perm ?? '*:*:*'"
+                      v-bind="btn.attrs"
+                      @click="
+                        handleOperate({
+                          name: btn.name,
+                          row: scope.row,
+                          column: scope.column,
+                          $index: scope.$index,
+                        })
+                      "
+                    >
+                      {{ btn.text }}
+                    </el-button>
+                  </template>
+                </template>
+                <!-- 自定义 -->
+                <template v-else-if="col.templet === 'custom'">
+                  <slot :name="col.slotName ?? col.prop" :prop="col.prop" v-bind="scope" />
                 </template>
               </template>
-            </template>
-            <!-- 根据行的selectList属性返回对应列表值 -->
-            <template v-else-if="col.templet === 'list'">
-              <template v-if="col.prop">
-                {{ (col.selectList ?? {})[scope.row[col.prop]] }}
-              </template>
-            </template>
-            <!-- 格式化显示链接 -->
-            <template v-else-if="col.templet === 'url'">
-              <template v-if="col.prop">
-                <el-link type="primary" :href="scope.row[col.prop]" target="_blank">
-                  {{ scope.row[col.prop] }}
-                </el-link>
-              </template>
-            </template>
-            <!-- 生成开关组件 -->
-            <template v-else-if="col.templet === 'switch'">
-              <template v-if="col.prop">
-                <!-- pageData.length>0: 解决el-switch组件会在表格初始化的时候触发一次change事件 -->
-                <el-switch
-                  v-model="scope.row[col.prop]"
-                  :active-value="col.activeValue ?? 1"
-                  :inactive-value="col.inactiveValue ?? 0"
-                  :inline-prompt="true"
-                  :active-text="col.activeText ?? ''"
-                  :inactive-text="col.inactiveText ?? ''"
-                  :validate-event="false"
-                  :disabled="col.disabled"
-                  @change="
-                    pageData.length > 0 && handleModify(col.prop, scope.row[col.prop], scope.row)
-                  "
-                />
-              </template>
-            </template>
-            <!-- 生成输入框组件 -->
-            <template v-else-if="col.templet === 'input'">
-              <template v-if="col.prop">
-                <el-input
-                  v-model="scope.row[col.prop]"
-                  :type="col.inputType ?? 'text'"
-                  :disabled="col.disabled"
-                  @blur="handleModify(col.prop, scope.row[col.prop], scope.row)"
-                />
-              </template>
-            </template>
-            <!-- 格式化为价格 -->
-            <template v-else-if="col.templet === 'price'">
-              <template v-if="col.prop">
-                {{ `${col.priceFormat ?? "￥"}${scope.row[col.prop]}` }}
-              </template>
-            </template>
-            <!-- 格式化为百分比 -->
-            <template v-else-if="col.templet === 'percent'">
-              <template v-if="col.prop">{{ scope.row[col.prop] }}%</template>
-            </template>
-            <!-- 显示图标 -->
-            <template v-else-if="col.templet === 'icon'">
-              <template v-if="col.prop">
-                <template v-if="scope.row[col.prop].startsWith('el-icon-')">
-                  <el-icon>
-                    <component :is="scope.row[col.prop].replace('el-icon-', '')" />
-                  </el-icon>
-                </template>
-                <template v-else>
-                  <div class="i-svg:{{ scope.row[col.prop] }}" />
-                </template>
-              </template>
-            </template>
-            <!-- 格式化时间 -->
-            <template v-else-if="col.templet === 'date'">
-              <template v-if="col.prop">
-                {{
-                  scope.row[col.prop]
-                    ? useDateFormat(scope.row[col.prop], col.dateFormat ?? "YYYY-MM-DD HH:mm:ss")
-                        .value
-                    : ""
-                }}
-              </template>
-            </template>
-            <!-- 列操作栏 -->
-            <template v-else-if="col.templet === 'tool'">
-              <template v-for="(btn, index) in tableToolbarBtn" :key="index">
-                <el-button
-                  v-if="btn.render === undefined || btn.render(scope.row)"
-                  v-hasPerm="btn.perm ?? '*:*:*'"
-                  v-bind="btn.attrs"
-                  @click="
-                    handleOperate({
-                      name: btn.name,
-                      row: scope.row,
-                      column: scope.column,
-                      $index: scope.$index,
-                    })
-                  "
-                >
-                  {{ btn.text }}
-                </el-button>
-              </template>
-            </template>
-            <!-- 自定义 -->
-            <template v-else-if="col.templet === 'custom'">
-              <slot :name="col.slotName ?? col.prop" :prop="col.prop" v-bind="scope" />
-            </template>
+            </el-table-column>
           </template>
-        </el-table-column>
-      </template>
-    </el-table>
+        </el-table>
+      </slot>
+    </div>
 
-    <!-- 分页 -->
-    <div v-if="showPagination" class="mt-4">
+    <template v-if="showPagination" #footer>
       <el-scrollbar :class="['h-8!', { 'flex-x-end': contentConfig?.pagePosition === 'right' }]">
         <el-pagination
           v-bind="pagination"
@@ -194,15 +203,15 @@
           @current-change="handleCurrentChange"
         />
       </el-scrollbar>
-    </div>
+    </template>
 
     <!-- 导出弹窗 -->
-    <el-dialog
+    <EnhancedDialog
       v-model="exportsModalVisible"
-      :align-center="true"
       title="导出数据"
       width="600px"
-      style="padding-right: 0"
+      dialog-class="curd-embed-dialog"
+      modal-class="curd-embed-dialog"
       @close="handleCloseExportsModal"
     >
       <!-- 滚动 -->
@@ -251,14 +260,14 @@
           <el-button @click="handleCloseExportsModal">取 消</el-button>
         </div>
       </template>
-    </el-dialog>
+    </EnhancedDialog>
     <!-- 导入弹窗 -->
-    <el-dialog
+    <EnhancedDialog
       v-model="importModalVisible"
-      :align-center="true"
       title="导入数据"
       width="600px"
-      style="padding-right: 0"
+      dialog-class="curd-embed-dialog"
+      modal-class="curd-embed-dialog"
       @close="handleCloseImportModal"
     >
       <!-- 滚动 -->
@@ -317,13 +326,14 @@
           <el-button @click="handleCloseImportModal">取 消</el-button>
         </div>
       </template>
-    </el-dialog>
-  </div>
+    </EnhancedDialog>
+  </el-card>
 </template>
 
 <script setup lang="ts">
 import { useDateFormat, useThrottleFn } from "@vueuse/core";
 import {
+  ElMessage,
   genFileId,
   type FormInstance,
   type FormRules,
@@ -333,10 +343,24 @@ import {
   type TableInstance,
 } from "element-plus";
 import ExcelJS from "exceljs";
-import { reactive, ref, computed } from "vue";
+import { reactive, ref, computed, nextTick, useSlots } from "vue";
+import CrudToolbarLeft from "./CrudToolbarLeft.vue";
+import CrudToolbarRight from "./CrudToolbarRight.vue";
+import EnhancedDialog from "./EnhancedDialog.vue";
 import type { IContentConfig, IObject, IOperateData } from "./types";
 import type { IToolsButton } from "./types";
 
+const slots = useSlots();
+
+const cardBodyStyle = {
+  display: "flex",
+  flex: 1,
+  flexDirection: "column" as const,
+  minHeight: 0,
+  overflow: "hidden",
+  padding: "16px 20px",
+};
+
 // 定义接收的属性
 const props = defineProps<{ contentConfig: IContentConfig }>();
 // 定义自定义事件
@@ -355,13 +379,14 @@ const config = computed(() => props.contentConfig);
 const buttonConfig = reactive<Record<string, IObject>>({
   add: { text: "新增", attrs: { icon: "plus", type: "success" }, perm: "add" },
   delete: { text: "删除", attrs: { icon: "delete", type: "danger" }, perm: "delete" },
-  import: { text: "导入", attrs: { icon: "upload", type: "default" }, perm: "import" },
-  export: { text: "导出", attrs: { icon: "download", type: "default" }, perm: "export" },
-  refresh: { text: "刷新", attrs: { icon: "refresh", type: "default" }, perm: "*:*:*" },
-  filter: { text: "筛选列", attrs: { icon: "operation", type: "default" }, perm: "*:*:*" },
-  search: { text: "搜索", attrs: { icon: "search", type: "" }, perm: "search" },
-  imports: { text: "批量导入", attrs: { icon: "upload", type: "" }, perm: "imports" },
-  exports: { text: "批量导出", attrs: { icon: "download", type: "" }, perm: "exports" },
+  /** 右侧圆形工具条：与业务页手写工具栏（如 user、demo）语义色一致 */
+  import: { text: "导入", attrs: { icon: "upload", type: "info" }, perm: "import" },
+  export: { text: "导出", attrs: { icon: "download", type: "warning" }, perm: "export" },
+  refresh: { text: "刷新", attrs: { icon: "refresh", type: "success" }, perm: "*:*:*" },
+  filter: { text: "筛选列", attrs: { icon: "operation", type: "danger" }, perm: "*:*:*" },
+  search: { text: "搜索", attrs: { icon: "search", type: "info" }, perm: "search" },
+  imports: { text: "批量导入", attrs: { icon: "upload", type: "success" }, perm: "imports" },
+  exports: { text: "批量导出", attrs: { icon: "download", type: "warning" }, perm: "exports" },
   view: { text: "查看", attrs: { icon: "view", type: "primary" }, perm: "view" },
   edit: { text: "编辑", attrs: { icon: "edit", type: "primary" }, perm: "edit" },
 });
@@ -393,12 +418,15 @@ function getButtonPerm(action: string): string | null {
 function createToolbar(toolbar: Array<string | IToolsButton>, attr = {}) {
   return toolbar.map((item) => {
     const isString = typeof item === "string";
+    const name = isString ? item : item?.name || "";
+    const base = (isString ? buttonConfig[item] : buttonConfig[name]) as IObject | undefined;
     return {
-      name: isString ? item : item?.name || "",
-      text: isString ? buttonConfig[item].text : item?.text,
+      name,
+      text: isString ? buttonConfig[item].text : (item?.text ?? base?.text),
+      // 对象写法（如 { name: 'refresh', perm: 'refresh' }）需合并 buttonConfig 默认 attrs，否则无 icon/type
       attrs: {
         ...attr,
-        ...(isString ? buttonConfig[item].attrs : item?.attrs),
+        ...(isString ? buttonConfig[item].attrs : { ...base?.attrs, ...item?.attrs }),
       },
       render: isString ? undefined : (item?.render ?? undefined),
       perm: isString
@@ -416,15 +444,30 @@ const toolbarLeftBtn = computed(() => {
   return createToolbar(config.value.toolbar, {});
 });
 
+const hideColumnFilter = computed(() => {
+  if (config.value.hideColumnFilter === true) return true;
+  if (config.value.hideColumnFilter === false) return false;
+  return Boolean(slots.table);
+});
+
 // 右侧工具栏按钮
 const toolbarRightBtn = computed(() => {
   if (!config.value.defaultToolbar || config.value.defaultToolbar.length === 0) return [];
-  return createToolbar(config.value.defaultToolbar, { circle: true });
+  const raw = createToolbar(config.value.defaultToolbar, { circle: true });
+  if (hideColumnFilter.value) {
+    return raw.filter((b) => b.name !== "filter");
+  }
+  return raw;
 });
 
-// 表格操作工具栏
-const tableToolbar = config.value.cols[config.value.cols.length - 1].operat ?? ["edit", "delete"];
-const tableToolbarBtn = createToolbar(tableToolbar, { link: true, size: "small" });
+// 表格操作工具栏（优先使用 templet 为 tool 的列，避免仅数据列时取错最后一列）
+const toolColumn = computed(
+  () => config.value.cols.find((c) => c.templet === "tool") ?? config.value.cols.at(-1)
+);
+const tableToolbar = computed(() => toolColumn.value?.operat ?? ["edit", "delete"]);
+const tableToolbarBtn = computed(() =>
+  createToolbar(tableToolbar.value, { link: true, size: "small" })
+);
 
 // 表格列
 const cols = ref(
@@ -498,16 +541,22 @@ function handleRefresh(isRestart = false) {
 
 // 删除
 function handleDelete(id?: number | string) {
-  const ids = [id || removeIds.value].join(",");
+  let ids = "";
+  if (id !== undefined && id !== null && id !== "") {
+    ids = String(id);
+  } else if (removeIds.value.length) {
+    ids = removeIds.value.map(String).join(",");
+  }
   if (!ids) {
     ElMessage.warning("请勾选删除项");
     return;
   }
 
-  ElMessageBox.confirm("确认删除?", "警告", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    type: "warning",
+  const dc = props.contentConfig.deleteConfirm;
+  ElMessageBox.confirm(dc?.message ?? "确认删除?", dc?.title ?? "警告", {
+    confirmButtonText: dc?.confirmButtonText ?? "确定",
+    cancelButtonText: dc?.cancelButtonText ?? "取消",
+    type: dc?.type ?? "warning",
   })
     .then(function () {
       if (props.contentConfig.deleteAction) {
@@ -849,6 +898,16 @@ function getFilterParams() {
 
 // 获取分页数据
 let lastFormData = {};
+function getIndexActionErrorMessage(err: unknown): string {
+  if (err && typeof err === "object" && "response" in err) {
+    const d = (err as { response?: { data?: { msg?: string; message?: string } } }).response?.data;
+    if (d?.msg) return String(d.msg);
+    if (d?.message) return String(d.message);
+  }
+  if (err instanceof Error && err.message) return err.message;
+  return "数据加载失败";
+}
+
 function fetchPageData(formData: IObject = {}, isRestart = false) {
   loading.value = true;
   // 上一次搜索条件
@@ -878,11 +937,17 @@ function fetchPageData(formData: IObject = {}, isRestart = false) {
         pageData.value = data;
       }
     })
+    .catch((err: unknown) => {
+      console.error(err);
+      ElMessage.error(getIndexActionErrorMessage(err));
+    })
     .finally(() => {
       loading.value = false;
     });
 }
-fetchPageData();
+if (props.contentConfig.initialFetch !== false) {
+  fetchPageData();
+}
 
 // 导出Excel
 function exportPageData(formData: IObject = {}) {
@@ -919,15 +984,22 @@ function saveXlsx(fileData: any, fileName: string) {
 }
 
 // 暴露的属性和方法
-defineExpose({ fetchPageData, exportPageData, getFilterParams, getSelectionData, handleRefresh });
+defineExpose({
+  fetchPageData,
+  exportPageData,
+  getFilterParams,
+  getSelectionData,
+  handleRefresh,
+  handleToolbar,
+  handleDelete,
+  pageData,
+  pagination,
+  tableRef,
+});
 </script>
 
 <style lang="scss" scoped>
-.toolbar-left,
-.toolbar-right {
-  .el-button {
-    margin-right: 0 !important;
-    margin-left: 0 !important;
-  }
+:deep(.curd-embed-dialog) {
+  padding-right: 0;
 }
 </style>
diff --git a/frontend/src/components/CURD/PageModal.vue b/frontend/src/components/CURD/PageModal.vue
index 3b8195ae..45cc2991 100644
--- a/frontend/src/components/CURD/PageModal.vue
+++ b/frontend/src/components/CURD/PageModal.vue
@@ -66,9 +66,12 @@
     </template>
     <!-- dialog -->
     <template v-else>
-      <el-dialog
+      <EnhancedDialog
         v-model="modalVisible"
-        v-bind="{ destroyOnClose: true, alignCenter: true, ...modalConfig.dialog }"
+        :title="String(modalConfig.dialog?.title ?? '')"
+        :width="modalConfig.dialog?.width ?? '600px'"
+        :draggable="modalConfig.dialog?.draggable !== false"
+        v-bind="dialogRestAttrs"
         @close="handleClose"
       >
         <el-form ref="formRef" v-bind="modalConfig.form" :model="formData" :rules="formRules">
@@ -127,17 +130,19 @@
           <el-button v-if="!formDisable" type="primary" @click="handleSubmit">确 定</el-button>
           <el-button @click="handleClose">{{ !formDisable ? "取 消" : "关闭" }}</el-button>
         </template>
-      </el-dialog>
+      </EnhancedDialog>
     </template>
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed, markRaw, onMounted, reactive, ref } from "vue";
 import { useThrottleFn } from "@vueuse/core";
 import type { FormInstance, FormRules } from "element-plus";
 import type { IComponentType, IModalConfig, IObject } from "./types";
 import InputTag from "@/components/InputTag/index.vue";
 import IconSelect from "@/components/IconSelect/index.vue";
+import EnhancedDialog from "./EnhancedDialog.vue";
 
 defineSlots<{ [key: string]: (_args: any) => any }>();
 // 定义接收的属性
@@ -173,6 +178,12 @@ const childrenMap = new Map<IComponentType, any>([
 ]);
 
 const pk = props.modalConfig.pk ?? "id"; // 主键名，用于表单数据处理
+
+const dialogRestAttrs = computed(() => {
+  const d = props.modalConfig.dialog ?? {};
+  const { title: _t, width: _w, draggable: _d, ...rest } = d;
+  return { destroyOnClose: true, ...rest };
+});
 const modalVisible = ref(false); // 弹窗显示状态
 const formRef = ref<FormInstance>(); // 表单实例
 const formItems = reactive(props.modalConfig.formItems ?? []); // 表单配置项
diff --git a/frontend/src/components/CURD/PageSearch.vue b/frontend/src/components/CURD/PageSearch.vue
index 5414d3a9..72a3e7a4 100644
--- a/frontend/src/components/CURD/PageSearch.vue
+++ b/frontend/src/components/CURD/PageSearch.vue
@@ -3,12 +3,12 @@
     <el-card v-bind="cardAttrs">
       <!-- 搜索表单区域 -->
       <el-form
+        :key="'page-search-expand-' + isExpand"
         ref="queryFormRef"
         label-suffix=":"
         v-bind="formAttrs"
         :model="queryParams"
         :class="isGrid"
-        :inline="true"
         @submit.prevent="handleQuery"
       >
         <template v-for="(item, index) in formItems" :key="item.prop">
@@ -30,14 +30,14 @@
 
             <ElCascader
               v-if="item.type === 'cascader'"
-              v-model.trim="queryParams[item.prop]"
+              v-model="queryParams[item.prop]"
               v-bind="{ style: { width: '100%' }, ...item.attrs }"
               v-on="item.events || {}"
             />
             <component
               :is="getCustomComponent(item.type) || componentMap.get(item.type)"
               v-else
-              v-model.trim="queryParams[item.prop]"
+              v-model="queryParams[item.prop]"
               v-bind="{ style: { width: '100%' }, ...item.attrs }"
               v-on="item.events || {}"
             >
@@ -125,7 +125,7 @@ import type { IObject, IForm, ISearchConfig, ISearchComponent } from "./types";
 import { ArrowUp, ArrowDown, QuestionFilled } from "@element-plus/icons-vue";
 import type { FormInstance } from "element-plus";
 import InputTag from "@/components/InputTag/index.vue";
-import { getCurrentInstance } from "vue";
+import { getCurrentInstance, nextTick, watch } from "vue";
 import {
   ElInput,
   ElSelect,
@@ -199,19 +199,33 @@ const showNumber = computed(() =>
 );
 // 卡片组件自定义属性（阴影、自定义边距样式等）
 const cardAttrs = computed<IObject>(() => {
-  return { shadow: "never", style: { "margin-bottom": "12px" }, ...props.searchConfig?.cardAttrs };
+  return {
+    class: "search-container",
+    shadow: "never",
+    style: { marginBottom: "0" },
+    ...props.searchConfig?.cardAttrs,
+  };
 });
 // 表单组件自定义属性（label位置、宽度、对齐方式等）
 const formAttrs = computed<IForm>(() => {
-  return { inline: true, ...props.searchConfig?.form };
+  const custom = props.searchConfig?.form ?? {};
+  if (props.searchConfig?.grid) {
+    return { ...custom, inline: false };
+  }
+  return { inline: true, ...custom };
 });
-// 是否使用自适应网格布局
+/** 默认 flex（scoped）；grid 时见 .curd-page-search--grid */
 const isGrid = computed(() =>
-  props.searchConfig?.grid
-    ? "grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 3xl:grid-cols-5 4xl:grid-cols-6 gap-5"
-    : "flex flex-wrap gap-x-8 gap-y-4"
+  props.searchConfig?.grid ? "curd-page-search--grid" : "curd-page-search--flex"
 );
 
+/** 展开/收起后：表单已随 :key 重建，再触发 resize 让日期范围等组件量宽 */
+watch(isExpand, () => {
+  nextTick(() => {
+    window.dispatchEvent(new Event("resize"));
+  });
+});
+
 // 获取tooltip提示框属性
 const getTooltipProps = (tips: string | IObject) => {
   return typeof tips === "string" ? { content: tips } : tips;
@@ -222,8 +236,26 @@ const toggleVisible = () => {
   visible.value = !visible.value;
 };
 
+/** 查询前对 input 做 trim；去掉空条件，避免 GET 出现 name=&created_id= 等导致后端 Optional[int] 解析失败 */
+function buildQueryPayload() {
+  const q = { ...queryParams };
+  for (const item of formItems) {
+    if (item.type === "input" && typeof q[item.prop] === "string") {
+      q[item.prop] = q[item.prop].trim();
+    }
+  }
+  const out: IObject = {};
+  for (const key of Object.keys(q)) {
+    const v = q[key];
+    if (v === "" || v === null || v === undefined) continue;
+    if (Array.isArray(v) && v.length === 0) continue;
+    out[key] = v;
+  }
+  return out;
+}
+
 // 查询/重置操作
-const handleQuery = () => emit("queryClick", queryParams);
+const handleQuery = () => emit("queryClick", buildQueryPayload());
 const handleReset = () => {
   queryFormRef.value?.resetFields();
   // 重置所有时间范围组件
@@ -232,7 +264,7 @@ const handleReset = () => {
       ref.reset();
     }
   });
-  emit("resetClick", queryParams);
+  emit("resetClick", buildQueryPayload());
 };
 
 // 处理时间范围变化
@@ -266,8 +298,19 @@ onMounted(() => {
     if (item?.initFn) {
       item.initFn(item);
     }
-    if (["input-tag", "custom-tag", "cascader"].includes(item?.type ?? "")) {
+    if (getCustomComponent(item.type ?? "")) {
+      queryParams[item.prop] = item.initialValue ?? null;
+    } else if (["input-tag", "custom-tag", "cascader"].includes(item?.type ?? "")) {
       queryParams[item.prop] = Array.isArray(item.initialValue) ? item.initialValue : [];
+    } else if (
+      item.type === "date-picker" &&
+      String(item.attrs?.type ?? "")
+        .toLowerCase()
+        .includes("range")
+    ) {
+      queryParams[item.prop] = item.initialValue ?? [];
+    } else if (item.type === "select") {
+      queryParams[item.prop] = item.initialValue !== undefined ? item.initialValue : null;
     } else if (item.type === "input-number") {
       queryParams[item.prop] = item.initialValue ?? null;
     } else {
@@ -277,8 +320,8 @@ onMounted(() => {
 });
 // 暴露的属性和方法
 defineExpose({
-  // 获取分页数据
-  getQueryParams: () => queryParams,
+  // 获取分页数据（与「搜索」提交时一致，含 input trim）
+  getQueryParams: () => buildQueryPayload(),
   // 显示/隐藏 SearchForm
   toggleVisible: () => (visible.value = !visible.value),
 });
@@ -288,8 +331,34 @@ defineExpose({
 :deep(.el-input-number .el-input__inner) {
   text-align: left;
 }
+
 .el-form-item {
   margin-right: 0;
   margin-bottom: 0;
 }
+
+/* 卡片参与 flex 布局链时允许高度随内容收回，避免展开后再收起仍「撑住」 */
+.search-container :deep(.el-card__body) {
+  min-height: 0;
+}
+
+/* 默认行内搜索：明确左起排布，避免展开宽表单项后 flex 残留 justify/end 对齐 */
+.curd-page-search--flex {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  align-content: flex-start;
+  justify-content: flex-start;
+  gap: 1rem;
+  width: 100%;
+  min-height: 0;
+}
+
+.curd-page-search--grid {
+  display: grid !important;
+  width: 100%;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  align-items: center;
+}
 </style>
diff --git a/frontend/src/components/CURD/types.ts b/frontend/src/components/CURD/types.ts
index 909c1618..8d9c2de6 100644
--- a/frontend/src/components/CURD/types.ts
+++ b/frontend/src/components/CURD/types.ts
@@ -1,5 +1,5 @@
 import type { DialogProps, DrawerProps, FormItemRule, PaginationProps } from "element-plus";
-import type { FormProps, TableProps, ColProps, ButtonProps, CardProps } from "element-plus";
+import type { FormProps, ColProps, ButtonProps, CardProps } from "element-plus";
 import type PageContent from "./PageContent.vue";
 import type PageModal from "./PageModal.vue";
 import type PageSearch from "./PageSearch.vue";
@@ -35,14 +35,16 @@ export type ISearchComponent =
   | "checkbox"
   | "switch"
   | "rate"
-  | "slider";
+  | "slider"
+  /** 在 customComponents 中注册的自定义搜索控件类型 */
+  | "user-table-select";
 export type IComponentType = DateComponent | InputComponent | OtherComponent;
 
 /**
  * 工具按钮类型定义
  */
 type ToolbarLeft = "add" | "delete" | "import" | "export";
-type ToolbarRight = "refresh" | "filter" | "imports" | "exports" | "search";
+type ToolbarRight = "refresh" | "filter" | "import" | "imports" | "exports" | "search";
 type ToolbarTable = "edit" | "view" | "delete";
 
 /**
@@ -100,7 +102,7 @@ export interface ISearchConfig {
   cardAttrs?: Partial<CardProps> & { style?: CSSProperties };
   /** form组件属性 */
   form?: IForm;
-  /** 自适应网格布局(使用时表单不要添加 style: { width: "200px" }) */
+  /** 启用等宽网格布局；为 "right" 时操作按钮靠行末 */
   grid?: boolean | "left" | "right";
   /** 自定义组件映射 */
   customComponents?: Record<string, any>;
@@ -137,8 +139,8 @@ export interface ISearchConfig {
 export interface IContentConfig<T = any> {
   /** 权限前缀(如sys:user，用于组成权限标识)，不提供则不进行权限校验 */
   permPrefix?: string;
-  /** table组件属性 */
-  table?: Omit<TableProps<any>, "data">;
+  /** table组件属性（用 IObject 避免与 el-table TableProps.context 等内部类型不兼容） */
+  table?: IObject;
   /** 页面标题与提示（用于卡片头部显示） */
   title?: string;
   /** 提示信息 */
@@ -156,6 +158,11 @@ export interface IContentConfig<T = any> {
       >;
   /** 列表的网络请求函数(需返回promise) */
   indexAction: (queryParams: T) => Promise<any>;
+  /**
+   * 是否在挂载时立即请求列表（默认 true）。
+   * 若需在父组件合并 PageSearch 与额外条件后再请求，可设为 false，并在 onMounted 中自行调用 fetchPageData。
+   */
+  initialFetch?: boolean;
   /** 默认的分页相关的请求参数 */
   request?: {
     page_no: string;
@@ -175,6 +182,14 @@ export interface IContentConfig<T = any> {
   }) => Promise<any>;
   /** 删除的网络请求函数(需返回promise) */
   deleteAction?: (ids: string) => Promise<any>;
+  /** 删除确认弹窗（不传则标题「警告」、内容「确认删除?」） */
+  deleteConfirm?: {
+    title?: string;
+    message?: string;
+    confirmButtonText?: string;
+    cancelButtonText?: string;
+    type?: "warning" | "info" | "success" | "error";
+  };
   /** 后端导出的网络请求函数(需返回promise) */
   exportAction?: (queryParams: T) => Promise<any>;
   /** 前端全量导出的网络请求函数(需返回promise) */
@@ -191,6 +206,14 @@ export interface IContentConfig<T = any> {
   toolbar?: Array<ToolbarLeft | IToolsButton>;
   /** 表格工具栏右侧图标(默认:refresh,filter,imports,exports,search) */
   defaultToolbar?: Array<ToolbarRight | IToolsButton>;
+  /** 使用 #table 插槽自定义表格/树表时，为 true 则隐藏「列筛选」按钮（避免与自定义列不同步） */
+  hideColumnFilter?: boolean;
+  /** 内容区外层 el-card 额外 class */
+  cardClass?: string;
+  /** el-card 阴影（默认 never，与 Element Plus el-card shadow 一致） */
+  cardShadow?: "always" | "hover" | "never";
+  /** 是否显示表格上方工具条（默认 true；纯卡片/无按钮时可设为 false） */
+  showToolbar?: boolean;
   /** 更多操作按钮配置 */
   moreButtons?: Array<IToolsButton>;
   /** table组件列属性(额外的属性templet,operat,slotName) */
@@ -262,6 +285,16 @@ export interface IContentConfig<T = any> {
   }>;
 }
 
+/**
+ * PageContent 左侧 `createToolbar` 产物，供 CrudToolbarLeft 的 `configButtons` 使用。
+ */
+export type CrudToolbarConfigButton = {
+  name: string;
+  text?: string;
+  attrs?: Record<string, unknown>;
+  perm?: string | string[] | null;
+};
+
 /**
  * 模态框配置接口
  */
@@ -274,8 +307,8 @@ export interface IModalConfig<T = any> {
   pk?: string;
   /** 组件类型(默认：dialog) */
   component?: "dialog" | "drawer";
-  /** dialog组件属性 */
-  dialog?: Partial<Omit<DialogProps, "modelValue">>;
+  /** dialog组件属性（默认可拖拽；全屏由 EnhancedDialog 标题栏按钮切换） */
+  dialog?: Partial<Omit<DialogProps, "modelValue">> & { draggable?: boolean };
   /** drawer组件属性 */
   drawer?: Partial<Omit<DrawerProps, "modelValue">>;
   /** 查看模式渲染方式(默认：form；可选：descriptions) */
diff --git a/frontend/src/components/CURD/useCrudList.ts b/frontend/src/components/CURD/useCrudList.ts
new file mode 100644
index 00000000..0894f06c
--- /dev/null
+++ b/frontend/src/components/CURD/useCrudList.ts
@@ -0,0 +1,47 @@
+import { ElMessage } from "element-plus";
+import { ref } from "vue";
+import type { IObject, PageContentInstance, PageSearchInstance } from "./types";
+
+/**
+ * 仅列表查询区 + 表格区时复用：searchRef / contentRef 与查询、重置拉数逻辑。
+ * 合并 `PageSearch` 查询参数与 `PageContent.getFilterParams()`（表头筛选等），与 usePage 中同名逻辑一致。
+ * 业务页可替换手写 `handleQueryClick` / `handleResetClick` + 双 ref，参见 `module_example/demo`。
+ */
+export function useCrudList() {
+  const searchRef = ref<PageSearchInstance>();
+  const contentRef = ref<PageContentInstance>();
+
+  function handleQueryClick(queryParams: IObject) {
+    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)));
+    }
+  }
+
+  function handleResetClick(queryParams: IObject) {
+    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)));
+    }
+  }
+
+  /** 弹窗提交后等与「查询」同参刷新：合并搜索条件 + 表头筛选 */
+  function refreshList() {
+    try {
+      const q = searchRef.value?.getQueryParams() ?? {};
+      const f = contentRef.value?.getFilterParams() ?? {};
+      contentRef.value?.fetchPageData({ ...q, ...f }, true);
+    } catch (error) {
+      console.error("刷新列表失败:", error);
+      ElMessage.error("刷新列表失败: " + (error instanceof Error ? error.message : String(error)));
+    }
+  }
+
+  return { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList };
+}
diff --git a/frontend/src/components/CURD/usePage.ts b/frontend/src/components/CURD/usePage.ts
index 0005a30d..31400973 100644
--- a/frontend/src/components/CURD/usePage.ts
+++ b/frontend/src/components/CURD/usePage.ts
@@ -1,45 +1,17 @@
 import { ref, Ref } from "vue";
-import type { IObject, PageContentInstance, PageModalInstance, PageSearchInstance } from "./types";
+import type { IObject, PageContentInstance, PageModalInstance } from "./types";
+import { useCrudList } from "./useCrudList";
 
 /**
  * CURD页面组合式函数
  * @returns 包含各种引用和处理函数的对象
  */
 function usePage() {
-  const searchRef = ref<PageSearchInstance>();
-  const contentRef = ref<PageContentInstance>();
+  const { searchRef, contentRef, handleQueryClick, handleResetClick } = useCrudList();
   const addModalRef = ref<PageModalInstance>();
   const editModalRef = ref<PageModalInstance>();
   const viewModalRef = ref<PageModalInstance>();
 
-  /**
-   * 处理查询点击事件
-   * @param queryParams 查询参数
-   */
-  function handleQueryClick(queryParams: IObject) {
-    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) {
-    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 可选的模态框引用
@@ -224,3 +196,4 @@ function usePage() {
 }
 
 export default usePage;
+export { useCrudList } from "./useCrudList";
diff --git a/frontend/src/directives/permission/index.ts b/frontend/src/directives/permission/index.ts
index 245dcbe2..4cb1a3da 100644
--- a/frontend/src/directives/permission/index.ts
+++ b/frontend/src/directives/permission/index.ts
@@ -20,11 +20,12 @@ export const hasPerm: Directive = {
     const { roles } = useUserStore().basicInfo;
     const userPrems = useUserStore().prems;
 
-    // 超级管理员拥有所有权限，如果是"*:*:*"权限标识，则不需要进行权限校验
-    if (
-      (roles && roles.map((role) => role.code).includes(ROLE_ROOT)) ||
-      requiredPerms.includes("*:*:*")
-    ) {
+    const isWildcardBypass =
+      (Array.isArray(requiredPerms) && requiredPerms.some((p) => p === "*:*:*")) ||
+      requiredPerms === "*:*:*";
+
+    // 超级管理员；或指令显式传入 "*:*:*" 时跳过校验（勿用 includes 子串匹配，避免含 "*:*:*" 的权限被误放行）
+    if ((roles && roles.map((r) => r.code).includes(ROLE_ROOT)) || isWildcardBypass) {
       return;
     }
 
diff --git a/frontend/src/layouts/components/NavBar/components/LockPage.vue b/frontend/src/layouts/components/NavBar/components/LockPage.vue
index f9cb3ec7..49acddaa 100644
--- a/frontend/src/layouts/components/NavBar/components/LockPage.vue
+++ b/frontend/src/layouts/components/NavBar/components/LockPage.vue
@@ -88,14 +88,10 @@ import { useRouter } from "vue-router";
 import { useUserStore, useLockStore } from "@/store";
 import { ElInput } from "element-plus";
 import { useNow } from "@/utils/dateUtil";
-import { useTagsViewStore } from "@/store";
 
 const route = useRoute();
 const router = useRouter();
 const userStore = useUserStore();
-const tagsViewStore = useTagsViewStore();
-
-const { replace } = useRouter();
 
 const password = ref("");
 const loading = ref(false);
@@ -123,14 +119,12 @@ async function unLock() {
   }
 }
 
-// 返回登录
+// 返回登录（logout 成功会 resetAllState；失败时再清一次本地，避免仍带 token）
 async function goLogin() {
   await userStore.logout().catch(() => {});
-  userStore.resetAllState();
-  tagsViewStore.delAllViews();
-  router.push(`/login?redirect=${route.fullPath}`);
+  await userStore.resetAllState();
   lockStore.resetLockInfo();
-  replace("/login");
+  await router.replace(`/login?redirect=${encodeURIComponent(route.fullPath)}`);
 }
 
 const passwordInputRef = ref<InstanceType<typeof ElInput>>();
diff --git a/frontend/src/plugins/permission.ts b/frontend/src/plugins/permission.ts
index 64cf028f..7bf2aa9c 100644
--- a/frontend/src/plugins/permission.ts
+++ b/frontend/src/plugins/permission.ts
@@ -33,10 +33,10 @@ export function setupPermission() {
         }
       }
     } catch (error) {
-      // 错误处理：重置状态并跳转登录
+      // 错误处理：重置状态并跳转登录（保留 redirect 与未登录分支一致）
       console.error("Route guard error:", error);
       await useUserStore().resetAllState();
-      next("/login");
+      next(`/login?redirect=${encodeURIComponent(to.fullPath)}`);
       NProgress.done();
     }
   });
@@ -82,21 +82,20 @@ async function handleAuthenticatedUser(
       return;
     }
 
-    // 动态设置页面标题
-    const title = (to.params.title as string) || (to.query.title as string);
-    if (title) {
-      to.meta.title = title;
+    // 动态设置页面标题（仅做简单净化，避免 query 注入标签/过长字符串影响标签栏展示）
+    const rawTitle = (to.params.title as string) || (to.query.title as string);
+    if (rawTitle && typeof rawTitle === "string") {
+      const safe = rawTitle.replace(/[<>]/g, "").trim().slice(0, 64);
+      if (safe) {
+        to.meta.title = safe;
+      }
     }
 
     next();
   } catch (error) {
     console.error("❌ Route guard error:", error);
     await useUserStore().resetAllState();
-    // 强制跳转到登录页
-    next("/login");
+    next(`/login?redirect=${encodeURIComponent(to.fullPath)}`);
     NProgress.done();
   }
-  router.afterEach(() => {
-    NProgress.done();
-  });
 }
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 84af1266..8430ccce 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -40,12 +40,6 @@ export const constantRoutes: RouteRecordRaw[] = [
     meta: { hidden: true, title: "500" },
     component: () => import("@/views/error/500.vue"),
   },
-  {
-    path: "/:pathMatch(.*)*",
-    component: () => import("@/views/error/404.vue"),
-    meta: { hidden: true, title: "404" },
-  },
-  // 以下内容必须放在后面
   {
     path: "/",
     name: "/",
@@ -80,6 +74,12 @@ export const constantRoutes: RouteRecordRaw[] = [
       },
     ],
   },
+  // 通配 404 必须置于静态路由最后，否则会抢先匹配 /、/home 等
+  {
+    path: "/:pathMatch(.*)*",
+    component: () => import("@/views/error/404.vue"),
+    meta: { hidden: true, title: "404" },
+  },
 ];
 
 /**
diff --git a/frontend/src/styles/dark/css-vars.css b/frontend/src/styles/dark/css-vars.css
index b224bfc4..6c129c13 100644
--- a/frontend/src/styles/dark/css-vars.css
+++ b/frontend/src/styles/dark/css-vars.css
@@ -211,3 +211,30 @@ html.dark .el-table {
 html .el-table.el-table--striped {
   --el-fill-color-lighter: var(--el-table-striped-row-bg);
 }
+
+/*
+ * 缝隙/画布与浅分割线：与主题色同系、略淡（color-mix 随 --el-color-primary 与换肤联动）
+ * 卡片/浮层面仍用 --el-bg-color-overlay，仅大面积底与细线带极轻主色倾向
+ */
+:root,
+html :root {
+  --el-bg-color: color-mix(in srgb, var(--el-color-primary, #4080ff) 5%, #f8fafc 95%);
+  --el-bg-color-page: var(--el-bg-color);
+  --el-border-color: color-mix(in srgb, var(--el-color-primary, #4080ff) 9%, #cbd5e1 91%);
+  --el-border-color-light: color-mix(in srgb, var(--el-color-primary, #4080ff) 11%, #e2e8f0 89%);
+  --el-border-color-lighter: color-mix(in srgb, var(--el-color-primary, #4080ff) 12%, #eceff1 88%);
+  --el-border-color-extra-light: color-mix(in srgb, var(--el-color-primary, #4080ff) 10%, #f2f4f8 90%);
+  --el-fill-color-light: color-mix(in srgb, var(--el-color-primary, #4080ff) 7%, #f1f5f9 93%);
+  --el-menu-hover-bg-color: color-mix(in srgb, var(--el-color-primary, #4080ff) 8%, #f3f6fb 92%);
+}
+
+html.dark {
+  --el-bg-color: color-mix(in srgb, var(--el-color-primary, #4080ff) 5%, #0f172a 95%);
+  --el-bg-color-page: var(--el-bg-color);
+  --el-border-color: color-mix(in srgb, var(--el-color-primary, #4080ff) 12%, #334155 88%);
+  --el-border-color-light: color-mix(in srgb, var(--el-color-primary, #4080ff) 10%, #475569 90%);
+  --el-border-color-lighter: color-mix(in srgb, var(--el-color-primary, #4080ff) 12%, #3d4f69 88%);
+  --el-border-color-extra-light: color-mix(in srgb, var(--el-color-primary, #4080ff) 10%, #334155 90%);
+  --el-fill-color-light: color-mix(in srgb, var(--el-color-primary, #4080ff) 8%, #334155 92%);
+  --el-menu-hover-bg-color: color-mix(in srgb, var(--el-color-primary, #4080ff) 10%, #1b2a45 90%);
+}
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index ea314f04..cc72b857 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -13,12 +13,37 @@
 .app-container {
   display: flex;
   flex-direction: column;
+  /* 不用 gap：否则 ExportModal/抽屉 等块级兄弟会与 PageContent 之间多出一道 16px，表格用 100vh 时高度也不对 */
+  gap: 0;
   height: 100%;
   padding: 16px;
   overflow: auto;
   border-radius: 4px;
 }
 
+/* 与搜索区纵向间距（替代原 gap）；主表格占满剩余高度，便于 el-table height:100% */
+.app-container > .el-card.data-table {
+  flex: 1;
+  min-height: 0;
+  margin-top: 16px;
+}
+
+.app-container > .el-card.data-table:first-child {
+  margin-top: 0;
+}
+
+/* 用户管理等：首行是 el-row 时占满高度 */
+.app-container > .el-row {
+  flex: 1;
+  min-height: 0;
+}
+
+/* 块级弹窗宿主不参与纵向 flex 分配，避免挤压主表格 */
+.app-container > .curd-export-modal-host,
+.app-container > .curd-import-modal-host {
+  flex: 0 0 auto;
+}
+
 // ==================== 搜索区域样式 ====================
 .search-container {
   border: 1px solid var(--el-border-color-light);
@@ -29,18 +54,39 @@
   display: flex;
   flex-direction: column;
   height: 100%;
+  /* 嵌套在 el-row/el-col 等内部时，与上方搜索区留白 */
   margin-top: 16px;
 
-  // 表格工具栏区域
+  // 表格工具栏区域（与 PageSearch+PageContent 各业务页 #toolbar 插槽一致：flex 换行，避免 el-row 挤压右侧）
   &__toolbar {
     display: flex;
+    flex-wrap: wrap;
+    row-gap: 8px;
+    column-gap: 12px;
+    align-items: flex-start;
     justify-content: space-between;
     margin-bottom: 16px;
 
     &--left,
     &--right {
       display: flex;
+      flex-wrap: wrap;
       gap: 8px;
+      align-items: center;
+
+      @media (min-width: 768px) {
+        gap: 12px;
+      }
+
+      .el-button {
+        margin-right: 0 !important;
+        margin-left: 0 !important;
+      }
+    }
+
+    &--right {
+      flex-shrink: 0;
+      justify-content: flex-end;
     }
   }
 
@@ -63,6 +109,8 @@
   }
 }
 
+/* 主表格 margin-top 见上；此处保留嵌套在非直接子级时的默认 .data-table margin-top */
+
 // 进度条颜色
 #nprogress .bar {
   background-color: var(--el-color-primary);
diff --git a/frontend/src/types/env.d.ts b/frontend/src/types/env.d.ts
index ceef3eac..482ae4ae 100644
--- a/frontend/src/types/env.d.ts
+++ b/frontend/src/types/env.d.ts
@@ -1,5 +1,8 @@
 // https://cn.vitejs.dev/guide/env-and-mode
 
+/// <reference types="vite/client" />
+/// <reference types="element-plus/global" />
+
 // TypeScript 类型提示都为 string： https://github.com/vitejs/vite/issues/6930
 interface ImportMetaEnv {
   /** 环境 */
diff --git a/frontend/src/utils/authRedirect.ts b/frontend/src/utils/authRedirect.ts
new file mode 100644
index 00000000..c5908d2c
--- /dev/null
+++ b/frontend/src/utils/authRedirect.ts
@@ -0,0 +1,35 @@
+import router from "@/router";
+import { useUserStoreHook } from "@/store/modules/user.store";
+
+/** 登录页跳转进行中，合并并发调用，避免重复通知与重复路由 */
+let redirectToLoginInFlight: Promise<void> | null = null;
+
+/**
+ * 认证失效或需重新登录时跳转登录页：清空本地会话并带上 redirect。
+ * 与 HTTP 拦截器、改密后重登等场景共用；并发只执行一次。
+ */
+export async function redirectToLogin(message: string = "请重新登录"): Promise<void> {
+  if (redirectToLoginInFlight) {
+    return redirectToLoginInFlight;
+  }
+  redirectToLoginInFlight = (async () => {
+    try {
+      ElNotification({
+        title: "提示",
+        message,
+        type: "warning",
+        duration: 3000,
+      });
+
+      await useUserStoreHook().resetAllState();
+
+      const currentPath = router.currentRoute.value.fullPath;
+      await router.push(`/login?redirect=${encodeURIComponent(currentPath)}`);
+    } catch (error: any) {
+      ElMessage.error(error?.message ?? String(error));
+    } finally {
+      redirectToLoginInFlight = null;
+    }
+  })();
+  return redirectToLoginInFlight;
+}
diff --git a/frontend/src/utils/fetchAllPages.ts b/frontend/src/utils/fetchAllPages.ts
new file mode 100644
index 00000000..a3cfbb22
--- /dev/null
+++ b/frontend/src/utils/fetchAllPages.ts
@@ -0,0 +1,30 @@
+/**
+ * 按分页拉取全量列表（用于 ExportModal 等「全量数据」场景）
+ */
+export async function fetchAllPages<T>(options: {
+  /** 每页条数，默认 1000 */
+  pageSize?: number;
+  /** 初始查询条件（会拷贝后写入 page_no / page_size） */
+  initialQuery: Record<string, unknown>;
+  /** 页码字段名，默认 page_no */
+  pageNoKey?: string;
+  /** 每页条数字段名，默认 page_size */
+  pageSizeKey?: string;
+  /** 拉取一页，返回 total 与 list */
+  fetchPage: (query: Record<string, unknown>) => Promise<{ total: number; list: T[] }>;
+}): Promise<T[]> {
+  const pageSize = options.pageSize ?? 1000;
+  const pageNoKey = options.pageNoKey ?? "page_no";
+  const pageSizeKey = options.pageSizeKey ?? "page_size";
+  const query = { ...options.initialQuery };
+  query[pageNoKey] = 1;
+  query[pageSizeKey] = pageSize;
+  const all: T[] = [];
+  while (true) {
+    const { total, list } = await options.fetchPage(query);
+    all.push(...list);
+    if (all.length >= total || list.length === 0) break;
+    query[pageNoKey] = (query[pageNoKey] as number) + 1;
+  }
+  return all;
+}
diff --git a/frontend/src/utils/quickStartManager.ts b/frontend/src/utils/quickStartManager.ts
index 7e4ec03a..51242b98 100644
--- a/frontend/src/utils/quickStartManager.ts
+++ b/frontend/src/utils/quickStartManager.ts
@@ -1,7 +1,7 @@
 import { ElMessage } from "element-plus";
 
-/** 收藏数量上限（工作台固定两列展示，不再使用内部滚动区） */
-export const QUICK_LINK_MAX = 10;
+/** 收藏数量上限（工作台「我的收藏」为 3 列 × 最多 5 排，共 15 个） */
+export const QUICK_LINK_MAX = 15;
 
 // 快速链接数据类型
 export interface QuickLink {
diff --git a/frontend/src/utils/request.ts b/frontend/src/utils/request.ts
index f07800c9..173294b8 100644
--- a/frontend/src/utils/request.ts
+++ b/frontend/src/utils/request.ts
@@ -5,10 +5,9 @@ import axios, {
   type AxiosError,
 } from "axios";
 import qs from "qs";
-import { useUserStoreHook } from "@/store/modules/user.store";
 import { ResultEnum } from "@/enums/api/result.enum";
 import { Auth } from "@/utils/auth";
-import router from "@/router";
+import { redirectToLogin } from "@/utils/authRedirect";
 
 /**
  * 创建 HTTP 请求实例
@@ -26,18 +25,24 @@ const httpRequest: AxiosInstance = axios.create({
 httpRequest.interceptors.request.use(
   (config: InternalAxiosRequestConfig) => {
     const accessToken = Auth.getAccessToken();
+    const auth = config.headers.Authorization;
 
-    // 如果 Authorization 设置为 no-auth，则不携带 Token
-    if (!config.headers.Authorization && accessToken) {
-      config.headers.Authorization = `Bearer ${accessToken}`;
-    } else {
+    // 显式跳过鉴权（与单接口 headers 约定一致）
+    if (auth === "no-auth") {
       delete config.headers.Authorization;
+      return config;
+    }
+
+    // 未手动设置 Authorization 时自动附加 Bearer；已设置则保留（避免误删调用方传入的令牌）
+    if (!auth && accessToken) {
+      config.headers.Authorization = `Bearer ${accessToken}`;
     }
 
     return config;
   },
   (error) => {
-    ElMessage.error(error);
+    const msg = error instanceof Error ? error.message : String(error);
+    ElMessage.error(msg);
     return Promise.reject(error);
   }
 );
@@ -114,6 +119,22 @@ httpRequest.interceptors.response.use(
       }
     }
 
+    const status = error.response.status;
+
+    /** 是否为后端约定的 JSON 业务码结构 */
+    const hasApiCode =
+      data !== undefined &&
+      data !== null &&
+      typeof data === "object" &&
+      "code" in data &&
+      typeof (data as ApiResponse).code === "number";
+
+    // HTTP 401 且无约定 body（如网关仅返回状态码、HTML、空 body）：按登录失效处理
+    if (status === 401 && !hasApiCode) {
+      await redirectToLogin("登录已失效，请重新登录");
+      return Promise.reject(new Error("Unauthorized"));
+    }
+
     if (data?.code === ResultEnum.TOKEN_EXPIRED) {
       await redirectToLogin("登录已过期，请重新登录");
       return Promise.reject(new Error(data.msg));
@@ -133,26 +154,4 @@ httpRequest.interceptors.response.use(
   }
 );
 
-/**
- * 重定向到登录页面
- */
-async function redirectToLogin(message: string = "请重新登录"): Promise<void> {
-  try {
-    ElNotification({
-      title: "提示",
-      message,
-      type: "warning",
-      duration: 3000,
-    });
-
-    await useUserStoreHook().resetAllState();
-
-    // 跳转到登录页，保留当前路由用于登录后跳转
-    const currentPath = router.currentRoute.value.fullPath;
-    await router.push(`/login?redirect=${encodeURIComponent(currentPath)}`);
-  } catch (error: any) {
-    ElMessage.error(error.message);
-  }
-}
-
 export default httpRequest;
diff --git a/frontend/src/views/current/profile.vue b/frontend/src/views/current/profile.vue
index 8a248b81..14bdcd94 100644
--- a/frontend/src/views/current/profile.vue
+++ b/frontend/src/views/current/profile.vue
@@ -290,12 +290,11 @@ import type {
 } from "element-plus";
 import UserAPI, { type InfoFormState, type PasswordFormState } from "@/api/module_system/user";
 import { useUserStore, useDictStore } from "@/store";
-import { useUserStoreHook } from "@/store/modules/user.store";
 import { Camera } from "@element-plus/icons-vue";
 import { ElMessage } from "element-plus";
 import { useI18n } from "vue-i18n";
 import { nextTick } from "vue";
-import router from "@/router";
+import { redirectToLogin } from "@/utils/authRedirect";
 
 const { t } = useI18n();
 const userStore = useUserStore();
@@ -549,28 +548,6 @@ const handlePasswordChange = async () => {
   }
 };
 
-/**
- * 重定向到登录页面
- */
-async function redirectToLogin(message: string = "请重新登录"): Promise<void> {
-  try {
-    ElNotification({
-      title: "提示",
-      message,
-      type: "warning",
-      duration: 3000,
-    });
-
-    await useUserStoreHook().resetAllState();
-
-    // 跳转到登录页，保留当前路由用于登录后跳转
-    const currentPath = router.currentRoute.value.fullPath;
-    await router.push(`/login?redirect=${encodeURIComponent(currentPath)}`);
-  } catch (error: any) {
-    console.error(error);
-  }
-}
-
 onMounted(async () => {
   await getOptions();
   initInfoForm();
diff --git a/frontend/src/views/dashboard/workplace.vue b/frontend/src/views/dashboard/workplace.vue
index 5abb531d..be78d7c4 100644
--- a/frontend/src/views/dashboard/workplace.vue
+++ b/frontend/src/views/dashboard/workplace.vue
@@ -192,252 +192,266 @@
       </ElRow>
     </div>
 
-    <!-- 运行快照 + 运行中的任务（一行两列）；系统日志 + 最新消息（下一行两列） -->
-    <ElRow :gutter="16" class="mt-4 workplace-ops-row workplace-ops-row--pair">
-      <ElCol :xs="24" :md="12" class="workplace-ops-col">
-        <ElCard
-          v-loading="statsLoading"
-          shadow="hover"
-          class="workplace-snapshot-card workplace-surface workplace-ops-card"
-        >
-          <template #header>
-            <div class="workplace-snapshot-card__head">
-              <div>
-                <span class="workplace-panel-title">运行快照</span>
-                <p class="workplace-section-sub workplace-section-sub--inline">
-                  关键指标一览；可进菜单看全量
-                </p>
-              </div>
-            </div>
-          </template>
-          <div class="workplace-snapshot-grid">
-            <div class="workplace-stat-tile">
-              <div class="workplace-stat-tile__label">系统用户</div>
-              <div class="workplace-stat-tile__value">
-                {{ fmtMetric(overviewSnapshot.userTotal) }}
-              </div>
-              <div class="workplace-stat-tile__hint">账号总数</div>
-            </div>
-            <div class="workplace-stat-tile">
-              <div class="workplace-stat-tile__label">当前在线</div>
-              <div class="workplace-stat-tile__value">
-                {{ fmtMetric(overviewSnapshot.onlineTotal) }}
-              </div>
-              <div class="workplace-stat-tile__hint">会话在线</div>
-            </div>
-            <div class="workplace-stat-tile">
-              <div class="workplace-stat-tile__label">本机负载</div>
-              <div class="workplace-stat-tile__value workplace-stat-tile__value--sm">
-                CPU {{ fmtPercent(overviewSnapshot.cpuUsed) }} · 内存
-                {{ fmtPercent(overviewSnapshot.memUsage) }}
-              </div>
-              <div class="workplace-stat-tile__hint">监控服务所在机器</div>
-            </div>
-            <div class="workplace-stat-tile">
-              <div class="workplace-stat-tile__label">调度任务</div>
-              <div class="workplace-stat-tile__value">
-                {{ fmtMetric(overviewSnapshot.jobCount) }}
-              </div>
-              <div class="workplace-stat-tile__hint">
-                {{ overviewSnapshot.schedulerStatus || "—" }}
-                <template v-if="overviewSnapshot.schedulerRunning">· 引擎运行中</template>
-              </div>
-            </div>
-            <div class="workplace-stat-tile">
-              <div class="workplace-stat-tile__label">AI 与应用</div>
-              <div class="workplace-stat-tile__value workplace-stat-tile__value--sm">
-                会话 {{ fmtMetric(overviewSnapshot.chatSessions) }} · 应用
-                {{ fmtMetric(overviewSnapshot.appCount) }}
-              </div>
-              <div class="workplace-stat-tile__hint">对话列表与应用数量</div>
-            </div>
-          </div>
-          <div v-if="statsUpdatedAt" class="workplace-snapshot-card__foot">
-            <span class="workplace-snapshot-card__foot-dot" aria-hidden="true" />
-            更新于 {{ formatSnapshotTime(statsUpdatedAt) }}
-          </div>
-        </ElCard>
-      </ElCol>
-
-      <ElCol :xs="24" :md="12" class="workplace-ops-col">
-        <ElCard shadow="hover" class="workplace-section-card workplace-surface workplace-ops-card">
-          <template #header>
-            <div class="workplace-section-card__head">
-              <div>
-                <span class="workplace-panel-title">运行中的任务</span>
-                <p class="workplace-section-sub workplace-section-sub--inline">
-                  调度器 · 最多 10 条
-                </p>
-              </div>
-              <ElButton type="primary" link @click="goToJob()">任务管理</ElButton>
-            </div>
-          </template>
-          <div v-loading="jobsLoading" class="workplace-ops-card__body">
-            <el-empty
-              v-if="!jobsLoading && runningJobs.length === 0"
-              :image-size="64"
-              description="暂无运行中的任务"
-            />
-            <ul v-else class="workplace-running-list workplace-running-list--in-grid">
-              <li v-for="job in runningJobs" :key="job.id" class="workplace-running-list__item">
-                <div class="workplace-running-list__main">
-                  <span class="workplace-running-list__name">{{ job.name }}</span>
-                  <el-tag type="success" size="small">运行中</el-tag>
-                </div>
-                <div class="workplace-running-list__meta">
-                  <span v-if="job.next_run_time">下次：{{ job.next_run_time }}</span>
-                  <span v-if="job.trigger" class="workplace-running-list__trigger">
-                    {{ job.trigger }}
-                  </span>
-                </div>
-              </li>
-            </ul>
-          </div>
-        </ElCard>
-      </ElCol>
-    </ElRow>
-
-    <ElRow :gutter="16" class="mt-4 workplace-ops-row workplace-ops-row--pair">
-      <ElCol :xs="24" :md="12" class="workplace-ops-col">
-        <ElCard shadow="hover" class="workplace-section-card workplace-surface workplace-ops-card">
-          <template #header>
-            <div class="workplace-section-card__head">
-              <div>
-                <span class="workplace-panel-title">系统日志</span>
-                <p class="workplace-section-sub workplace-section-sub--inline">
-                  已加载 {{ systemLogs.length }} 条 · 默认 10 条
-                </p>
-              </div>
-              <div class="workplace-section-card__actions">
-                <ElButton
-                  v-if="systemLogs.length > 10"
-                  type="primary"
-                  link
-                  @click="logsExpanded = !logsExpanded"
-                >
-                  {{ logsExpanded ? "收起" : "展开全部" }}
-                </ElButton>
-                <ElButton type="primary" link @click="goToLog()">日志管理</ElButton>
-              </div>
-            </div>
-          </template>
-          <div
-            v-loading="logsLoading"
-            class="workplace-ops-card__body workplace-ops-card__body--logs"
+    <!-- 运行快照/任务 与 日志/消息：独立纵向堆叠，避免 el-row 负边距与 flex 链导致块级重叠 -->
+    <div class="mt-4 workplace-ops-stack">
+      <ElRow :gutter="16" class="workplace-ops-row workplace-ops-row--pair">
+        <ElCol :xs="24" :md="12" class="workplace-ops-col">
+          <ElCard
+            v-loading="statsLoading"
+            shadow="hover"
+            class="workplace-snapshot-card workplace-surface workplace-ops-card"
           >
-            <el-empty
-              v-if="!logsLoading && systemLogs.length === 0"
-              :image-size="72"
-              description="暂无日志"
-            />
-            <div v-else class="workplace-logs-scroll">
-              <el-table
-                :data="displayedLogs"
-                class="workplace-logs-table"
-                size="small"
-                stripe
-                :max-height="logsExpanded ? 360 : 220"
-              >
-                <el-table-column label="类型" width="72" align="center">
-                  <template #default="{ row }">
-                    <el-tag :type="row.type === 1 ? 'success' : 'primary'" size="small">
-                      {{ row.type === 1 ? "登录" : "操作" }}
-                    </el-tag>
-                  </template>
-                </el-table-column>
-                <el-table-column
-                  label="路径"
-                  prop="request_path"
-                  min-width="120"
-                  show-overflow-tooltip
-                />
-                <el-table-column label="方法" width="72" align="center">
-                  <template #default="{ row }">
-                    <el-tag :type="getMethodType(row.request_method)" size="small">
-                      {{ row.request_method || "—" }}
-                    </el-tag>
-                  </template>
-                </el-table-column>
-                <el-table-column label="状态" width="64" align="center">
-                  <template #default="{ row }">
-                    <el-tag :type="getStatusCodeType(row.response_code)" size="small">
-                      {{ row.response_code ?? "—" }}
-                    </el-tag>
-                  </template>
-                </el-table-column>
-                <el-table-column
-                  label="IP"
-                  prop="request_ip"
-                  min-width="100"
-                  show-overflow-tooltip
-                />
-                <el-table-column
-                  label="时间"
-                  prop="created_time"
-                  min-width="136"
-                  show-overflow-tooltip
-                />
-              </el-table>
-            </div>
-          </div>
-        </ElCard>
-      </ElCol>
-
-      <ElCol :xs="24" :md="12" class="workplace-ops-col">
-        <ElCard shadow="hover" class="workplace-section-card workplace-surface workplace-ops-card">
-          <template #header>
-            <div class="workplace-section-card__head">
-              <div>
-                <span class="workplace-panel-title">最新消息</span>
-                <p class="workplace-section-sub workplace-section-sub--inline">
-                  公告与通知 · 最近 5 条
-                </p>
-              </div>
-              <ElButton type="primary" link @click="goToNotice()">公告管理</ElButton>
-            </div>
-          </template>
-          <div class="workplace-ops-card__body workplace-ops-card__body--notices">
-            <el-empty v-if="noticeList.length === 0" :image-size="80" description="暂无数据" />
-            <ElTimeline v-else class="workplace-notice-timeline">
-              <ElTimelineItem
-                v-for="(item, index) in noticePreviewList"
-                :key="item.id"
-                :type="index === 0 ? 'primary' : 'info'"
-              >
-                <div class="workplace-notice-card">
-                  <div class="workplace-notice-card__head">
-                    <div class="workplace-notice-card__titles">
-                      <span class="workplace-notice-card__title">
-                        {{ item.notice_title }}
-                      </span>
-                      <el-tag size="small" :type="getNoticeTypeColor(item.notice_type)">
-                        {{ getNoticeTypeText(item.notice_type) }}
-                      </el-tag>
-                    </div>
-                    <span class="workplace-notice-card__time">
-                      {{ formatTime(item.created_time) }}
-                    </span>
-                  </div>
-                  <div class="workplace-notice-card__content">
-                    {{ item.notice_content }}
-                  </div>
-                  <div class="workplace-notice-card__foot">
-                    <span class="workplace-notice-card__author">
-                      {{ item.created_by?.name }} 发布
-                    </span>
-                    <el-tooltip placement="top" :content="item.description || item.notice_content">
-                      <ElButton target="_blank" type="primary" link @click="goToNotice()">
-                        详情↗
-                      </ElButton>
-                    </el-tooltip>
-                  </div>
+            <template #header>
+              <div class="workplace-snapshot-card__head">
+                <div>
+                  <span class="workplace-panel-title">运行快照</span>
+                  <p class="workplace-section-sub workplace-section-sub--inline">
+                    关键指标一览；可进菜单看全量
+                  </p>
                 </div>
-              </ElTimelineItem>
-            </ElTimeline>
-          </div>
-        </ElCard>
-      </ElCol>
-    </ElRow>
+              </div>
+            </template>
+            <div class="workplace-snapshot-grid">
+              <div class="workplace-stat-tile">
+                <div class="workplace-stat-tile__label">系统用户</div>
+                <div class="workplace-stat-tile__value">
+                  {{ fmtMetric(overviewSnapshot.userTotal) }}
+                </div>
+                <div class="workplace-stat-tile__hint">账号总数</div>
+              </div>
+              <div class="workplace-stat-tile">
+                <div class="workplace-stat-tile__label">当前在线</div>
+                <div class="workplace-stat-tile__value">
+                  {{ fmtMetric(overviewSnapshot.onlineTotal) }}
+                </div>
+                <div class="workplace-stat-tile__hint">会话在线</div>
+              </div>
+              <div class="workplace-stat-tile">
+                <div class="workplace-stat-tile__label">本机负载</div>
+                <div class="workplace-stat-tile__value workplace-stat-tile__value--sm">
+                  CPU {{ fmtPercent(overviewSnapshot.cpuUsed) }} · 内存
+                  {{ fmtPercent(overviewSnapshot.memUsage) }}
+                </div>
+                <div class="workplace-stat-tile__hint">监控服务所在机器</div>
+              </div>
+              <div class="workplace-stat-tile">
+                <div class="workplace-stat-tile__label">调度任务</div>
+                <div class="workplace-stat-tile__value">
+                  {{ fmtMetric(overviewSnapshot.jobCount) }}
+                </div>
+                <div class="workplace-stat-tile__hint">
+                  {{ overviewSnapshot.schedulerStatus || "—" }}
+                  <template v-if="overviewSnapshot.schedulerRunning">· 引擎运行中</template>
+                </div>
+              </div>
+              <div class="workplace-stat-tile">
+                <div class="workplace-stat-tile__label">AI 与应用</div>
+                <div class="workplace-stat-tile__value workplace-stat-tile__value--sm">
+                  会话 {{ fmtMetric(overviewSnapshot.chatSessions) }} · 应用
+                  {{ fmtMetric(overviewSnapshot.appCount) }}
+                </div>
+                <div class="workplace-stat-tile__hint">对话列表与应用数量</div>
+              </div>
+            </div>
+            <div v-if="statsUpdatedAt" class="workplace-snapshot-card__foot">
+              <span class="workplace-snapshot-card__foot-dot" aria-hidden="true" />
+              更新于 {{ formatSnapshotTime(statsUpdatedAt) }}
+            </div>
+          </ElCard>
+        </ElCol>
+
+        <ElCol :xs="24" :md="12" class="workplace-ops-col">
+          <ElCard
+            shadow="hover"
+            class="workplace-section-card workplace-surface workplace-ops-card"
+          >
+            <template #header>
+              <div class="workplace-section-card__head">
+                <div>
+                  <span class="workplace-panel-title">运行中的任务</span>
+                  <p class="workplace-section-sub workplace-section-sub--inline">
+                    调度器 · 最多 10 条
+                  </p>
+                </div>
+                <ElButton type="primary" link @click="goToJob()">任务管理</ElButton>
+              </div>
+            </template>
+            <div v-loading="jobsLoading" class="workplace-ops-card__body">
+              <el-empty
+                v-if="!jobsLoading && runningJobs.length === 0"
+                :image-size="64"
+                description="暂无运行中的任务"
+              />
+              <ul v-else class="workplace-running-list workplace-running-list--in-grid">
+                <li v-for="job in runningJobs" :key="job.id" class="workplace-running-list__item">
+                  <div class="workplace-running-list__main">
+                    <span class="workplace-running-list__name">{{ job.name }}</span>
+                    <el-tag type="success" size="small">运行中</el-tag>
+                  </div>
+                  <div class="workplace-running-list__meta">
+                    <span v-if="job.next_run_time">下次：{{ job.next_run_time }}</span>
+                    <span v-if="job.trigger" class="workplace-running-list__trigger">
+                      {{ job.trigger }}
+                    </span>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </ElCard>
+        </ElCol>
+      </ElRow>
+
+      <ElRow :gutter="16" class="workplace-ops-row workplace-ops-row--pair">
+        <ElCol :xs="24" :md="12" class="workplace-ops-col">
+          <ElCard
+            shadow="hover"
+            class="workplace-section-card workplace-surface workplace-ops-card"
+          >
+            <template #header>
+              <div class="workplace-section-card__head">
+                <div>
+                  <span class="workplace-panel-title">系统日志</span>
+                  <p class="workplace-section-sub workplace-section-sub--inline">
+                    已加载 {{ systemLogs.length }} 条 · 默认 10 条
+                  </p>
+                </div>
+                <div class="workplace-section-card__actions">
+                  <ElButton
+                    v-if="systemLogs.length > 10"
+                    type="primary"
+                    link
+                    @click="logsExpanded = !logsExpanded"
+                  >
+                    {{ logsExpanded ? "收起" : "展开全部" }}
+                  </ElButton>
+                  <ElButton type="primary" link @click="goToLog()">日志管理</ElButton>
+                </div>
+              </div>
+            </template>
+            <div
+              v-loading="logsLoading"
+              class="workplace-ops-card__body workplace-ops-card__body--logs"
+            >
+              <el-empty
+                v-if="!logsLoading && systemLogs.length === 0"
+                :image-size="72"
+                description="暂无日志"
+              />
+              <div v-else class="workplace-logs-scroll">
+                <el-table
+                  :data="displayedLogs"
+                  class="workplace-logs-table"
+                  size="small"
+                  stripe
+                  :max-height="logsExpanded ? 360 : 220"
+                >
+                  <el-table-column label="类型" width="72" align="center">
+                    <template #default="{ row }">
+                      <el-tag :type="row.type === 1 ? 'success' : 'primary'" size="small">
+                        {{ row.type === 1 ? "登录" : "操作" }}
+                      </el-tag>
+                    </template>
+                  </el-table-column>
+                  <el-table-column
+                    label="路径"
+                    prop="request_path"
+                    min-width="120"
+                    show-overflow-tooltip
+                  />
+                  <el-table-column label="方法" width="72" align="center">
+                    <template #default="{ row }">
+                      <el-tag :type="getMethodType(row.request_method)" size="small">
+                        {{ row.request_method || "—" }}
+                      </el-tag>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="状态" width="64" align="center">
+                    <template #default="{ row }">
+                      <el-tag :type="getStatusCodeType(row.response_code)" size="small">
+                        {{ row.response_code ?? "—" }}
+                      </el-tag>
+                    </template>
+                  </el-table-column>
+                  <el-table-column
+                    label="IP"
+                    prop="request_ip"
+                    min-width="100"
+                    show-overflow-tooltip
+                  />
+                  <el-table-column
+                    label="时间"
+                    prop="created_time"
+                    min-width="136"
+                    show-overflow-tooltip
+                  />
+                </el-table>
+              </div>
+            </div>
+          </ElCard>
+        </ElCol>
+
+        <ElCol :xs="24" :md="12" class="workplace-ops-col">
+          <ElCard
+            shadow="hover"
+            class="workplace-section-card workplace-surface workplace-ops-card"
+          >
+            <template #header>
+              <div class="workplace-section-card__head">
+                <div>
+                  <span class="workplace-panel-title">最新消息</span>
+                  <p class="workplace-section-sub workplace-section-sub--inline">
+                    公告与通知 · 最近 5 条
+                  </p>
+                </div>
+                <ElButton type="primary" link @click="goToNotice()">公告管理</ElButton>
+              </div>
+            </template>
+            <div class="workplace-ops-card__body workplace-ops-card__body--notices">
+              <el-empty v-if="noticeList.length === 0" :image-size="80" description="暂无数据" />
+              <ElTimeline v-else class="workplace-notice-timeline">
+                <ElTimelineItem
+                  v-for="(item, index) in noticePreviewList"
+                  :key="item.id"
+                  :type="index === 0 ? 'primary' : 'info'"
+                >
+                  <div class="workplace-notice-card">
+                    <div class="workplace-notice-card__head">
+                      <div class="workplace-notice-card__titles">
+                        <span class="workplace-notice-card__title">
+                          {{ item.notice_title }}
+                        </span>
+                        <el-tag size="small" :type="getNoticeTypeColor(item.notice_type)">
+                          {{ getNoticeTypeText(item.notice_type) }}
+                        </el-tag>
+                      </div>
+                      <span class="workplace-notice-card__time">
+                        {{ formatTime(item.created_time) }}
+                      </span>
+                    </div>
+                    <div class="workplace-notice-card__content">
+                      {{ item.notice_content }}
+                    </div>
+                    <div class="workplace-notice-card__foot">
+                      <span class="workplace-notice-card__author">
+                        {{ item.created_by?.name }} 发布
+                      </span>
+                      <el-tooltip
+                        placement="top"
+                        :content="item.description || item.notice_content"
+                      >
+                        <ElButton target="_blank" type="primary" link @click="goToNotice()">
+                          详情↗
+                        </ElButton>
+                      </el-tooltip>
+                    </div>
+                  </div>
+                </ElTimelineItem>
+              </ElTimeline>
+            </div>
+          </ElCard>
+        </ElCol>
+      </ElRow>
+    </div>
   </div>
 </template>
 
@@ -880,6 +894,18 @@ async function fetchWorkplaceStats() {
 .workplace-page {
   --workplace-radius: 12px;
   --workplace-radius-sm: 10px;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+/* 与上方模块区隔离，两行 ops 之间固定间距，避免与下方栅格视觉「叠在一起」 */
+.workplace-ops-stack {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  gap: 16px;
+  width: 100%;
 }
 
 .workplace-surface {
@@ -1043,11 +1069,32 @@ async function fetchWorkplaceStats() {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
 }
 
-/* ========== 模块入口 / 收藏：各为独立卡片 ========== */
-.workplace-modules-card {
-  height: 100%;
+/* ========== 模块入口 / 收藏：各为独立卡片（同行等高） ========== */
+.workplace-module-row {
+  align-items: stretch;
+}
 
+.workplace-module-row > .el-col {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.workplace-modules-card,
+.workplace-bookmarks-card {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  width: 100%;
+  min-height: 0;
+}
+
+.workplace-modules-card {
   :deep(.el-card__body) {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-height: 0;
     padding: 16px 18px 18px;
   }
 }
@@ -1059,12 +1106,11 @@ async function fetchWorkplaceStats() {
 }
 
 .workplace-bookmarks-card {
-  height: 100%;
-
   :deep(.el-card__body) {
     display: flex;
+    flex: 1;
     flex-direction: column;
-    min-height: 280px;
+    min-height: 0;
     padding: 12px 16px 16px;
   }
 }
@@ -1120,8 +1166,11 @@ async function fetchWorkplaceStats() {
 
 .workplace-module-grid {
   display: grid;
+  flex: 1;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 12px;
+  min-height: 0;
+  align-content: start;
 }
 
 @media (width >= 1400px) {
@@ -1161,9 +1210,9 @@ async function fetchWorkplaceStats() {
 
 /* 运行快照+任务、日志+消息：每行两列并排 */
 .workplace-ops-row {
-  /* 换行时与 gutter 协调的纵向间距 */
-  row-gap: 0;
+  row-gap: 16px;
   align-items: stretch;
+  width: 100%;
 }
 
 .workplace-ops-col {
@@ -1546,11 +1595,25 @@ async function fetchWorkplaceStats() {
   gap: 8px;
 }
 
+/* 3 列 × 最多 5 排固定高度（15 格）；窄屏 2 列时 15 个占 8 排 */
 .workplace-quick-list--hub {
+  --hub-row-h: 38px;
+  --hub-gap: 8px;
+
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 8px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-auto-rows: var(--hub-row-h);
+  gap: var(--hub-gap);
   align-content: start;
+  /* 正好 5 排所占高度：5 行 + 4 道行间距 */
+  min-height: calc(5 * var(--hub-row-h) + 4 * var(--hub-gap));
+}
+
+@media (width <= 520px) {
+  .workplace-quick-list--hub {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    min-height: calc(8 * var(--hub-row-h) + 7 * var(--hub-gap));
+  }
 }
 
 .workplace-quick-row--compact {
@@ -1679,4 +1742,27 @@ async function fetchWorkplaceStats() {
     min-height: 30px;
   }
 }
+
+/* 与 --hub-row-h 对齐，保证每排高度一致 */
+.workplace-quick-list--hub .workplace-quick-row--compact {
+  box-sizing: border-box;
+  height: 100%;
+  min-height: 0;
+  gap: 4px;
+  padding: 4px 4px 4px 2px;
+}
+
+.workplace-quick-list--hub .workplace-quick-row--chip .workplace-quick-row__icon {
+  width: 26px;
+  height: 26px;
+  font-size: 14px;
+}
+
+.workplace-quick-list--hub .workplace-quick-row--chip .workplace-quick-row__accent {
+  min-height: 24px;
+}
+
+.workplace-quick-list--hub .workplace-quick-row__title {
+  font-size: 12px;
+}
 </style>
diff --git a/frontend/src/views/module_ai/chat/components/Sidebar.vue b/frontend/src/views/module_ai/chat/components/Sidebar.vue
index 45f3ab1c..bfd44dba 100644
--- a/frontend/src/views/module_ai/chat/components/Sidebar.vue
+++ b/frontend/src/views/module_ai/chat/components/Sidebar.vue
@@ -282,8 +282,9 @@ const handleUserCommand = (command: string) => {
   } else if (command === "settings") {
     ElMessage.info("设置功能开发中");
   } else if (command === "logout") {
-    userStore.logout();
-    router.push("/login");
+    userStore.logout().then(() => {
+      router.push("/login");
+    });
   }
 };
 
diff --git a/frontend/src/views/module_ai/memory/index.vue b/frontend/src/views/module_ai/memory/index.vue
index 9810a507..03359cf0 100644
--- a/frontend/src/views/module_ai/memory/index.vue
+++ b/frontend/src/views/module_ai/memory/index.vue
@@ -1,286 +1,173 @@
 <!-- AI智能助手会话列表 -->
 <template>
   <div class="app-container">
-    <!-- 搜索区域 -->
-    <el-card v-show="visible" class="search-container">
-      <el-form
-        ref="queryFormRef"
-        :model="queryFormData"
-        label-suffix=":"
-        :inline="true"
-        @submit.prevent="handleQuery"
-      >
-        <el-form-item prop="title" label="标题">
-          <el-input v-model="queryFormData.title" placeholder="请输入标题" clearable />
-        </el-form-item>
-        <el-form-item v-if="isExpand" prop="created_time" label="创建时间">
-          <DatePicker
-            v-model="createdDateRange"
-            @update:model-value="handleCreatedDateRangeChange"
-          />
-        </el-form-item>
-        <el-form-item v-if="isExpand" prop="updated_time" label="更新时间">
-          <DatePicker
-            v-model="updatedDateRange"
-            @update:model-value="handleUpdatedDateRangeChange"
-          />
-        </el-form-item>
-        <!-- 查询、重置、展开/收起按钮 -->
-        <el-form-item>
-          <el-button
-            v-hasPerm="['module_example:demo:query']"
-            type="primary"
-            icon="search"
-            @click="handleQuery"
-          >
-            查询
-          </el-button>
-          <el-button
-            v-hasPerm="['module_example: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>
-    </el-card>
+    <PageSearch
+      ref="searchRef"
+      :search-config="searchConfig"
+      @query-click="handleQueryClick"
+      @reset-click="handleResetClick"
+    />
 
-    <!-- 内容区域 -->
-    <el-card class="data-table">
-      <!-- 功能区域 -->
-      <div class="data-table__toolbar">
-        <div class="data-table__toolbar--left">
-          <el-row :gutter="10">
-            <el-col :span="1.5">
-              <el-button
-                v-hasPerm="['module_ai:chat:create']"
-                type="success"
-                icon="plus"
-                @click="handleOpenDialog('create')"
-              >
-                新增
-              </el-button>
-            </el-col>
-            <el-col :span="1.5">
-              <el-button
-                v-hasPerm="['module_ai:chat:delete']"
-                type="danger"
-                icon="delete"
-                :disabled="selectIds.length === 0"
-                @click="handleDelete(selectIds)"
-              >
-                批量删除
-              </el-button>
-            </el-col>
-          </el-row>
-        </div>
-        <div class="data-table__toolbar--right">
-          <el-row :gutter="10">
-            <el-col :span="1.5">
-              <el-tooltip content="搜索显示/隐藏">
+    <PageContent
+      ref="contentRef"
+      :content-config="contentConfig"
+      @search-click="handleToggleSearch"
+      @add-click="handleOpenDialog('create')"
+    >
+      <template #table="{ data, loading, tableRef, onSelectionChange, pagination }">
+        <div class="data-table__content">
+          <el-table
+            :ref="tableRef as any"
+            v-loading="loading"
+            :data="data"
+            height="100%"
+            border
+            stripe
+            @selection-change="onSelectionChange"
+          >
+            <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">
+                {{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="tableColumns.find((col) => col.prop === 'session_id')?.show"
+              label="会话ID"
+              prop="session_id"
+              min-width="180"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="tableColumns.find((col) => col.prop === 'title')?.show"
+              label="标题"
+              prop="title"
+              min-width="200"
+            >
+              <template #default="scope">
+                <el-input
+                  v-if="editingRowId === scope.row.id"
+                  ref="titleInputRef"
+                  v-model="editingTitle"
+                  size="small"
+                  @blur="handleSaveTitle(scope.row)"
+                  @keyup.enter="handleSaveTitle(scope.row)"
+                />
+                <span
+                  v-else
+                  class="editable-cell"
+                  title="点击编辑"
+                  @click="handleEditTitle(scope.row)"
+                >
+                  {{ scope.row.title || "未命名会话" }}
+                  <el-icon class="edit-icon"><Edit /></el-icon>
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="tableColumns.find((col) => col.prop === 'user_id')?.show"
+              label="用户ID"
+              prop="user_id"
+              min-width="120"
+            />
+            <el-table-column
+              v-if="tableColumns.find((col) => col.prop === 'team_id')?.show"
+              label="团队ID"
+              prop="team_id"
+              min-width="120"
+            />
+            <el-table-column
+              v-if="tableColumns.find((col) => col.prop === 'team_name')?.show"
+              label="部门名称"
+              prop="team_name"
+              min-width="120"
+            />
+            <el-table-column
+              v-if="tableColumns.find((col) => col.prop === 'agent_id')?.show"
+              label="Agent ID"
+              prop="agent_id"
+              min-width="120"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="tableColumns.find((col) => col.prop === 'summary')?.show"
+              label="会话摘要"
+              prop="summary"
+              min-width="200"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="tableColumns.find((col) => col.prop === 'message_count')?.show"
+              label="消息数量"
+              prop="message_count"
+              min-width="100"
+              align="center"
+            />
+            <el-table-column
+              v-if="tableColumns.find((col) => col.prop === 'created_time')?.show"
+              label="创建时间"
+              prop="created_time"
+              min-width="180"
+            />
+            <el-table-column
+              v-if="tableColumns.find((col) => col.prop === 'updated_time')?.show"
+              label="更新时间"
+              prop="updated_time"
+              min-width="180"
+            />
+            <el-table-column
+              v-if="tableColumns.find((col) => col.prop === 'operation')?.show"
+              fixed="right"
+              label="操作"
+              align="center"
+              min-width="120"
+            >
+              <template #default="scope">
                 <el-button
-                  v-hasPerm="['*:*:*']"
+                  v-hasPerm="['module_ai:chat:detail']"
                   type="info"
-                  icon="search"
-                  circle
-                  @click="visible = !visible"
-                />
-              </el-tooltip>
-            </el-col>
-            <el-col :span="1.5">
-              <el-tooltip content="刷新">
+                  size="small"
+                  link
+                  icon="View"
+                  @click="handleOpenDialog('detail', scope.row.id)"
+                >
+                  详情
+                </el-button>
                 <el-button
-                  v-hasPerm="['module_ai:chat:query']"
-                  type="primary"
-                  icon="refresh"
-                  circle
-                  @click="handleRefresh"
-                />
-              </el-tooltip>
-            </el-col>
-          </el-row>
+                  v-hasPerm="['module_ai:chat:delete']"
+                  type="danger"
+                  size="small"
+                  link
+                  icon="delete"
+                  @click="handleRowDelete(scope.row.id)"
+                >
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
         </div>
-      </div>
-
-      <!-- 表格区域：系统配置列表 -->
-      <div class="data-table__content">
-        <el-table
-          ref="tableRef"
-          v-loading="loading"
-          :data="pageTableData"
-          height="calc(100vh - 350px)"
-          max-height="calc(100vh - 350px)"
-          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-table-column>
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'session_id')?.show"
-            label="会话ID"
-            prop="session_id"
-            min-width="180"
-            show-overflow-tooltip
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'title')?.show"
-            label="标题"
-            prop="title"
-            min-width="200"
-          >
-            <template #default="scope">
-              <el-input
-                v-if="editingRowId === scope.row.id"
-                ref="titleInputRef"
-                v-model="editingTitle"
-                size="small"
-                @blur="handleSaveTitle(scope.row)"
-                @keyup.enter="handleSaveTitle(scope.row)"
-              />
-              <span
-                v-else
-                class="editable-cell"
-                title="点击编辑"
-                @click="handleEditTitle(scope.row)"
-              >
-                {{ scope.row.title || "未命名会话" }}
-                <el-icon class="edit-icon"><Edit /></el-icon>
-              </span>
-            </template>
-          </el-table-column>
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'user_id')?.show"
-            label="用户ID"
-            prop="user_id"
-            min-width="120"
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'team_id')?.show"
-            label="团队ID"
-            prop="team_id"
-            min-width="120"
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'team_name')?.show"
-            label="部门名称"
-            prop="team_name"
-            min-width="120"
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'agent_id')?.show"
-            label="Agent ID"
-            prop="agent_id"
-            min-width="120"
-            show-overflow-tooltip
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'summary')?.show"
-            label="会话摘要"
-            prop="summary"
-            min-width="200"
-            show-overflow-tooltip
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'message_count')?.show"
-            label="消息数量"
-            prop="message_count"
-            min-width="100"
-            align="center"
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'created_time')?.show"
-            label="创建时间"
-            prop="created_time"
-            min-width="180"
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'updated_time')?.show"
-            label="更新时间"
-            prop="updated_time"
-            min-width="180"
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'operation')?.show"
-            fixed="right"
-            label="操作"
-            align="center"
-            min-width="120"
-          >
-            <template #default="scope">
-              <el-button
-                v-hasPerm="['module_ai:chat:detail']"
-                type="info"
-                size="small"
-                link
-                icon="document"
-                @click="handleOpenDialog('detail', scope.row.id)"
-              >
-                详情
-              </el-button>
-              <el-button
-                v-hasPerm="['module_ai:chat:delete']"
-                type="danger"
-                size="small"
-                link
-                icon="delete"
-                @click="handleDelete([scope.row.id])"
-              >
-                删除
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-
-      <!-- 分页区域 -->
-      <template #footer>
-        <pagination
-          v-model:total="total"
-          v-model:page="queryFormData.page_no"
-          v-model:limit="queryFormData.page_size"
-          @pagination="loadingData"
-        />
       </template>
-    </el-card>
+    </PageContent>
 
     <!-- 弹窗区域 -->
-    <el-dialog
+    <EnhancedDialog
       v-model="dialogVisible.visible"
       :title="dialogVisible.title"
-      class="session-detail-dialog"
+      dialog-class="session-detail-dialog"
       @close="handleCloseDialog"
     >
       <!-- 详情 -->
@@ -375,7 +262,7 @@
           <el-button v-else type="primary" @click="handleCloseDialog">确定</el-button>
         </div>
       </template>
-    </el-dialog>
+    </EnhancedDialog>
   </div>
 </template>
 
@@ -385,31 +272,25 @@ defineOptions({
   inheritAttrs: false,
 });
 
-import { ref, reactive, onMounted, nextTick } from "vue";
-import { ElMessage, ElMessageBox } from "element-plus";
+import { ref, reactive, nextTick } from "vue";
+import { ElMessage } from "element-plus";
 import AiChatAPI, { ChatSession } from "@/api/module_ai/chat";
-import DatePicker from "@/components/DatePicker/index.vue";
-import { ArrowUp, ArrowDown, Edit } from "@element-plus/icons-vue";
+import EnhancedDialog from "@/components/CURD/EnhancedDialog.vue";
+import PageSearch from "@/components/CURD/PageSearch.vue";
+import PageContent from "@/components/CURD/PageContent.vue";
+import { useCrudList } from "@/components/CURD/useCrudList";
+import type { ISearchConfig, IContentConfig } from "@/components/CURD/types";
+import { Edit } from "@element-plus/icons-vue";
 import { formatToDateTime } from "@/utils/dateUtil";
 
-const visible = ref(true);
-const queryFormRef = ref();
+const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
 const dataFormRef = ref();
 const titleInputRef = ref();
-const total = ref(0);
-const selectIds = ref<string[]>([]);
-const selectionRows = ref<ChatSession[]>([]);
-const loading = ref(false);
-const isExpand = ref(false);
-const isExpandable = ref(true);
 
 // 编辑标题相关
 const editingRowId = ref<string | null>(null);
 const editingTitle = ref("");
 
-// 分页表单
-const pageTableData = ref<ChatSession[]>([]);
-
 // 表格列配置
 const tableColumns = ref([
   { prop: "selection", label: "选择框", show: true },
@@ -451,38 +332,89 @@ const detailFormData = ref<ChatSession>({
   message_count: 0,
   messages: [],
 });
-// 日期范围临时变量
-const createdDateRange = ref<[Date, Date] | []>([]);
-// 更新时间范围临时变量
-const updatedDateRange = ref<[Date, Date] | []>([]);
+const searchConfig = reactive<ISearchConfig>({
+  permPrefix: "module_ai:chat",
+  colon: true,
+  isExpandable: true,
+  showNumber: 1,
+  showToggle: false,
+  form: { labelWidth: "auto" },
+  formItems: [
+    {
+      prop: "title",
+      label: "标题",
+      type: "input",
+      attrs: { placeholder: "请输入标题", clearable: true },
+    },
+    {
+      prop: "created_at",
+      label: "创建时间",
+      type: "date-picker",
+      attrs: {
+        type: "datetimerange",
+        rangeSeparator: "至",
+        startPlaceholder: "开始日期",
+        endPlaceholder: "结束日期",
+        format: "YYYY-MM-DD HH:mm:ss",
+        valueFormat: "YYYY-MM-DD HH:mm:ss",
+        style: { width: "340px" },
+      },
+    },
+    {
+      prop: "updated_at",
+      label: "更新时间",
+      type: "date-picker",
+      attrs: {
+        type: "datetimerange",
+        rangeSeparator: "至",
+        startPlaceholder: "开始日期",
+        endPlaceholder: "结束日期",
+        format: "YYYY-MM-DD HH:mm:ss",
+        valueFormat: "YYYY-MM-DD HH:mm:ss",
+        style: { width: "340px" },
+      },
+    },
+  ],
+});
 
-// 处理创建时间范围变化
-function handleCreatedDateRangeChange(range: [Date, Date]) {
-  createdDateRange.value = range;
-  if (range && range.length === 2) {
-    queryFormData.created_at = [formatToDateTime(range[0]), formatToDateTime(range[1])];
-  } else {
-    queryFormData.created_at = undefined;
-  }
-}
-
-// 处理更新时间范围变化
-function handleUpdatedDateRangeChange(range: [Date, Date]) {
-  updatedDateRange.value = range;
-  if (range && range.length === 2) {
-    queryFormData.updated_at = [formatToDateTime(range[0]), formatToDateTime(range[1])];
-  } else {
-    queryFormData.updated_at = undefined;
-  }
-}
-
-// 分页查询参数
-const queryFormData = reactive({
-  page_no: 1,
-  page_size: 10,
-  title: undefined,
-  created_at: undefined as string[] | undefined,
-  updated_at: undefined as string[] | undefined,
+const contentConfig = reactive<IContentConfig>({
+  permPrefix: "module_ai:chat",
+  cols: [],
+  hideColumnFilter: true,
+  toolbar: ["add", "delete"],
+  defaultToolbar: ["search", "refresh"],
+  pagination: {
+    pageSize: 10,
+    pageSizes: [10, 20, 30, 50],
+  },
+  request: { page_no: "page_no", page_size: "page_size" },
+  indexAction: async (params) => {
+    const res = await AiChatAPI.getSessionList(
+      params as {
+        page_no: number;
+        page_size: number;
+        title?: string;
+        created_at?: string[];
+        updated_at?: string[];
+      }
+    );
+    return {
+      total: res.data.data?.total ?? 0,
+      list: res.data.data?.items ?? [],
+    };
+  },
+  deleteAction: (ids) =>
+    AiChatAPI.deleteSession(
+      ids
+        .split(",")
+        .map((s) => s.trim())
+        .filter(Boolean)
+    ),
+  deleteConfirm: {
+    title: "警告",
+    message: "确认删除该项数据?",
+    type: "warning",
+  },
 });
 
 // 编辑表单
@@ -509,43 +441,12 @@ function formatTime(timestamp: number | null): string {
   return formatToDateTime(new Date(timestamp * 1000));
 }
 
-// 列表刷新
-async function handleRefresh() {
-  await loadingData();
+function handleToggleSearch() {
+  searchRef.value?.toggleVisible();
 }
 
-// 加载表格数据
-async function loadingData() {
-  loading.value = true;
-  try {
-    const response = await AiChatAPI.getSessionList(queryFormData);
-    const items = response.data.data?.items;
-    const validItems = Array.isArray(items) ? items : [];
-    pageTableData.value = validItems;
-    total.value = response.data.data?.total || 0;
-  } catch (error: any) {
-    console.error(error);
-  } finally {
-    loading.value = false;
-  }
-}
-
-// 查询（重置页码后获取数据）
-async function handleQuery() {
-  queryFormData.page_no = 1;
-  loadingData();
-}
-
-// 重置查询
-async function handleResetQuery() {
-  queryFormRef.value.resetFields();
-  queryFormData.page_no = 1;
-  // 重置日期范围选择器
-  createdDateRange.value = [];
-  updatedDateRange.value = [];
-  queryFormData.created_at = undefined;
-  queryFormData.updated_at = undefined;
-  loadingData();
+function handleRowDelete(id: string) {
+  contentRef.value?.handleDelete(id);
 }
 
 // 定义初始表单数据常量
@@ -564,12 +465,6 @@ async function resetForm() {
   Object.assign(formData, initialFormData);
 }
 
-// 行复选框选中项变化
-async function handleSelectionChange(selection: any) {
-  selectIds.value = selection.map((item: any) => item.id);
-  selectionRows.value = selection;
-}
-
 // 关闭弹窗
 async function handleCloseDialog() {
   dialogVisible.visible = false;
@@ -619,7 +514,6 @@ async function handleSaveTitle(row: ChatSession) {
   }
 
   try {
-    loading.value = true;
     await AiChatAPI.updateSession(row.id, { title: newTitle });
     ElMessage.success("更新成功");
     row.title = newTitle;
@@ -627,8 +521,6 @@ async function handleSaveTitle(row: ChatSession) {
   } catch (error: any) {
     console.error(error);
     ElMessage.error("更新失败");
-  } finally {
-    loading.value = false;
   }
 }
 
@@ -636,49 +528,18 @@ async function handleSaveTitle(row: ChatSession) {
 async function handleSubmit() {
   dataFormRef.value.validate(async (valid: any) => {
     if (valid) {
-      loading.value = true;
       const submitData = { ...formData };
       try {
         await AiChatAPI.createSession({ title: submitData.title });
         dialogVisible.visible = false;
         resetForm();
-        handleCloseDialog();
-        handleResetQuery();
+        refreshList();
       } catch (error: any) {
         console.error(error);
-      } finally {
-        loading.value = false;
       }
     }
   });
 }
-
-// 删除、批量删除
-async function handleDelete(ids: string[]) {
-  ElMessageBox.confirm("确认删除该项数据?", "警告", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    type: "warning",
-  })
-    .then(async () => {
-      try {
-        loading.value = true;
-        await AiChatAPI.deleteSession(ids);
-        handleResetQuery();
-      } catch (error: any) {
-        console.error(error);
-      } finally {
-        loading.value = false;
-      }
-    })
-    .catch(() => {
-      ElMessageBox.close();
-    });
-}
-
-onMounted(() => {
-  loadingData();
-});
 </script>
 
 <style lang="scss" scoped>
diff --git a/frontend/src/views/module_application/myapp/index.vue b/frontend/src/views/module_application/myapp/index.vue
index 65183ecd..91feafec 100644
--- a/frontend/src/views/module_application/myapp/index.vue
+++ b/frontend/src/views/module_application/myapp/index.vue
@@ -1,87 +1,17 @@
 <!-- 我的应用管理 -->
 <template>
   <div class="app-container">
-    <!-- 顶部搜索和操作区域 -->
-    <el-card class="search-container">
-      <el-form
-        ref="queryFormRef"
-        :model="queryFormData"
-        :inline="true"
-        label-suffix=":"
-        @submit.prevent="handleQuery"
-      >
-        <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="请选择状态"
-            clearable
-            style="width: 170px"
-          >
-            <el-option label="启用" :value="true" />
-            <el-option label="停用" :value="false" />
-          </el-select>
-        </el-form-item>
-        <el-form-item v-if="isExpand" prop="created_id" label="创建人">
-          <UserTableSelect
-            v-model="queryFormData.created_id"
-            @confirm-click="handleConfirm"
-            @clear-click="handleQuery"
-          />
-        </el-form-item>
-        <el-form-item v-if="isExpand" prop="updated_id" label="更新人">
-          <UserTableSelect
-            v-model="queryFormData.updated_id"
-            @confirm-click="handleConfirm"
-            @clear-click="handleQuery"
-          />
-        </el-form-item>
-        <el-form-item class="search-buttons">
-          <el-button
-            v-hasPerm="['module_module_application:myapp:query']"
-            type="primary"
-            icon="search"
-            native-type="submit"
-          >
-            查询
-          </el-button>
-          <el-button
-            v-hasPerm="['module_application:myapp: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>
-    </el-card>
+    <PageSearch
+      ref="searchRef"
+      :search-config="searchConfig"
+      @query-click="handleQueryClick"
+      @reset-click="handleResetClick"
+    />
 
-    <!-- 应用卡片展示区域 -->
-    <el-card shadow="hover" class="data-table">
+    <PageContent ref="contentRef" class="flex-1 min-h-0" :content-config="contentConfig">
       <template #header>
         <div class="card-header">
-          <span>
-            <el-tooltip content="点击卡片，打开应用">
-              <QuestionFilled class="w-4 h-4 mx-1" />
-            </el-tooltip>
-            应用市场
-          </span>
+          <span class="market-title">应用市场</span>
           <el-button
             v-hasPerm="['module_application:myapp:create']"
             type="primary"
@@ -93,101 +23,72 @@
         </div>
       </template>
 
-      <!-- 应用网格 - 优化布局 -->
-      <div v-loading="loading" class="app-grid-container">
-        <div class="grid-wrapper">
-          <div
-            v-for="app in applicationList"
-            :key="app.id"
-            @mouseenter="app.id && (hoveredCard = app.id)"
-            @mouseleave="hoveredCard = null"
-            @click="app.status && app.id && openAppInternal(app)"
-          >
-            <el-card shadow="hover" class="app-card" :class="{ 'card-disabled': !app.status }">
-              <!-- 卡片头部 -->
-              <template #header>
-                <div class="app-info-header">
-                  <el-avatar :size="42" :src="app.icon_url" class="app-avatar">
-                    <el-icon size="20"><Monitor /></el-icon>
-                  </el-avatar>
-                  <div class="app-title-wrap">
+      <template #table="{ data, loading }">
+        <div v-loading="loading" class="app-grid-container">
+          <div v-if="!loading && data.length === 0" class="app-grid-empty">
+            <el-empty :image-size="88" description="暂无应用" />
+          </div>
+          <div v-else class="grid-wrapper">
+            <div
+              v-for="app in data"
+              :key="app.id"
+              class="app-grid-item"
+              @click="app.status && app.id && openAppInternal(app)"
+            >
+              <el-card shadow="never" class="app-card" :class="{ 'card-disabled': !app.status }">
+                <template #header>
+                  <div class="app-info-header">
+                    <el-avatar :size="40" :src="app.icon_url">
+                      <el-icon size="20"><Monitor /></el-icon>
+                    </el-avatar>
                     <h3 class="app-name" :title="app.name">{{ app.name }}</h3>
                     <el-tag
                       :type="app.status ? 'success' : 'info'"
                       size="small"
                       effect="plain"
-                      class="status-tag"
+                      class="app-status"
                     >
                       {{ app.status ? "启用" : "停用" }}
                     </el-tag>
                   </div>
+                </template>
 
-                  <!-- 操作按钮 -->
-                  <div v-if="hoveredCard === app.id" class="card-actions" @click.stop>
-                    <el-button
-                      v-hasPerm="['module_application:myapp:update']"
-                      type="primary"
-                      link
-                      icon="Edit"
-                      @click="handleAppAction('edit', app)"
-                    ></el-button>
-                    <el-button
-                      v-hasPerm="['module_application:myapp:delete']"
-                      type="danger"
-                      link
-                      icon="Delete"
-                      @click="handleAppAction('delete', app)"
-                    ></el-button>
-                  </div>
-                </div>
-              </template>
+                <template #default>
+                  <p v-if="app.description" class="app-description">{{ app.description }}</p>
+                </template>
 
-              <!-- 卡片内容 -->
-              <template #default>
-                <div class="app-content">
-                  <p class="app-description" :title="app.description">
-                    {{ app.description || "暂无描述" }}
-                  </p>
-                </div>
-              </template>
-
-              <!-- 卡片底部 -->
-              <template #footer>
-                <div class="card-footer">
-                  <div class="footer-item">
-                    <el-icon size="14" class="footer-icon"><User /></el-icon>
-                    <span class="footer-text">{{ app.created_by?.name || "未知" }}</span>
+                <template #footer>
+                  <div class="card-footer-row">
+                    <div class="card-meta">
+                      {{ app.created_by?.name || "—" }} · {{ formatTime(app.created_time) }}
+                    </div>
+                    <div class="card-actions" @click.stop>
+                      <el-button
+                        v-hasPerm="['module_application:myapp:update']"
+                        type="primary"
+                        link
+                        icon="Edit"
+                        @click="handleAppAction('edit', app)"
+                      />
+                      <el-button
+                        v-hasPerm="['module_application:myapp:delete']"
+                        type="danger"
+                        link
+                        icon="Delete"
+                        @click="handleAppAction('delete', app)"
+                      />
+                    </div>
                   </div>
-                  <div class="footer-item">
-                    <el-icon size="14" class="footer-icon"><Clock /></el-icon>
-                    <span class="footer-text">{{ formatTime(app.created_time) }}</span>
-                  </div>
-                </div>
-              </template>
-            </el-card>
+                </template>
+              </el-card>
+            </div>
           </div>
         </div>
-      </div>
-      <!-- 空状态 -->
-      <div v-if="applicationList.length === 0 && !loading">
-        <el-empty :image-size="80" description="暂无数据" />
-      </div>
-
-      <!-- 分页区域 -->
-      <template #footer>
-        <!-- 使用卡片 footer 样式右对齐，无需额外容器 -->
-        <pagination
-          v-model:total="total"
-          v-model:page="queryFormData.page_no"
-          v-model:limit="queryFormData.page_size"
-          :page-sizes="[12, 24, 48]"
-          @pagination="loadApplicationList"
-        />
       </template>
-    </el-card>
+    </PageContent>
 
-    <!-- 应用创建/编辑弹窗 -->
-    <el-drawer
+    <!-- 应用创建/编辑抽屉 -->
+    <EnhancedDrawer
       v-model="dialogVisible"
       :title="dialogTitle"
       :size="drawerSize"
@@ -238,7 +139,7 @@
           <el-button type="primary" @click="handleSubmit">确定</el-button>
         </div>
       </template>
-    </el-drawer>
+    </EnhancedDrawer>
   </div>
 </template>
 
@@ -252,41 +153,106 @@ import { useAppStore } from "@/store/modules/app.store";
 import { useTagsViewStore } from "@/store";
 import { useRouter } from "vue-router";
 import { DeviceEnum } from "@/enums/settings/device.enum";
-import { Monitor, User, Clock } from "@element-plus/icons-vue";
+import { Monitor } from "@element-plus/icons-vue";
 import ApplicationAPI, {
   type ApplicationForm,
   type ApplicationInfo,
   type ApplicationPageQuery,
 } from "@/api/module_application/myapp";
 import { formatToDateTime } from "@/utils/dateUtil";
+import PageSearch from "@/components/CURD/PageSearch.vue";
+import PageContent from "@/components/CURD/PageContent.vue";
+import EnhancedDrawer from "@/components/CURD/EnhancedDrawer.vue";
+import UserTableSelect from "@/views/module_system/user/components/UserTableSelect.vue";
+import type { IContentConfig, ISearchConfig } from "@/components/CURD/types";
+import { useCrudList } from "@/components/CURD/useCrudList";
+import { computed, markRaw, nextTick, reactive, ref } from "vue";
 
 const appStore = useAppStore();
 const tagsViewStore = useTagsViewStore();
 const router = useRouter();
 
-// 响应式数据
-const queryFormRef = ref();
+const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
 const formRef = ref();
-const loading = ref(false);
-const total = ref(0);
 const dialogVisible = ref(false);
 const dialogType = ref<"create" | "edit">("create");
 const currentApp = ref<ApplicationInfo | null>(null);
-const isExpand = ref(false);
-const isExpandable = ref(true);
-const hoveredCard = ref<number | null>(null);
 
-// 分页查询参数
-const queryFormData = reactive<ApplicationPageQuery>({
-  page_no: 1,
-  page_size: 12,
-  name: undefined,
-  status: undefined,
-  created_id: undefined,
+function triggerUserSearch() {
+  nextTick(() => refreshList());
+}
+
+const searchConfig = reactive<ISearchConfig>({
+  permPrefix: "module_application:myapp",
+  colon: true,
+  isExpandable: true,
+  showNumber: 2,
+  showToggle: false,
+  form: { labelWidth: "auto" },
+  formItems: [
+    {
+      prop: "name",
+      label: "应用名称",
+      type: "input",
+      attrs: { placeholder: "请输入应用名称", clearable: true },
+    },
+    {
+      prop: "status",
+      label: "状态",
+      type: "select",
+      options: [
+        { label: "启用", value: true },
+        { label: "停用", value: false },
+      ],
+      attrs: { placeholder: "请选择状态", clearable: true, style: { width: "170px" } },
+    },
+    {
+      prop: "created_id",
+      label: "创建人",
+      type: "user-table-select",
+      initialValue: null,
+      events: {
+        "confirm-click": triggerUserSearch,
+        "clear-click": triggerUserSearch,
+      },
+    },
+    {
+      prop: "updated_id",
+      label: "更新人",
+      type: "user-table-select",
+      initialValue: null,
+      events: {
+        "confirm-click": triggerUserSearch,
+        "clear-click": triggerUserSearch,
+      },
+    },
+  ],
+  customComponents: {
+    "user-table-select": markRaw(UserTableSelect),
+  },
 });
 
-// 应用列表数据
-const applicationList = ref<ApplicationInfo[]>([]);
+const contentConfig = reactive<IContentConfig<ApplicationPageQuery>>({
+  permPrefix: "module_application:myapp",
+  cols: [],
+  hideColumnFilter: true,
+  showToolbar: false,
+  cardShadow: "hover",
+  toolbar: [],
+  defaultToolbar: [],
+  pagination: {
+    pageSize: 12,
+    pageSizes: [12, 24, 48],
+  },
+  request: { page_no: "page_no", page_size: "page_size" },
+  indexAction: async (params) => {
+    const res = await ApplicationAPI.listApp(params as ApplicationPageQuery);
+    return {
+      total: res.data.data.total,
+      list: res.data.data.items,
+    };
+  },
+});
 
 // 表单数据
 const formData = reactive<ApplicationForm>({
@@ -320,45 +286,12 @@ const dialogTitle = computed(() => (dialogType.value === "create" ? "创建应
 
 // 格式化时间
 const formatTime = (time: string | undefined) => {
-  if (!time) return "未知";
+  if (!time) return "—";
   return formatToDateTime(time, "YYYY-MM-DD HH:mm:ss");
 };
 
-// 加载应用列表
-async function loadApplicationList() {
-  loading.value = true;
-  try {
-    const response = await ApplicationAPI.listApp(queryFormData);
-    applicationList.value = response.data.data.items;
-    total.value = response.data.data.total;
-  } catch (error) {
-    console.error("加载应用列表失败:", error);
-  } finally {
-    loading.value = false;
-  }
-}
-
-// 查询
-async function handleQuery() {
-  queryFormData.page_no = 1;
-  await loadApplicationList();
-}
-
-// 选择创建人后触发查询
-function handleConfirm() {
-  handleQuery();
-}
-
-// 重置查询
-async function handleResetQuery() {
-  queryFormRef.value?.resetFields();
-  queryFormData.page_no = 1;
-  await loadApplicationList();
-}
-
 // 创建应用
 function handleCreateApp() {
-  console.log("handleCreateApp");
   dialogType.value = "create";
   resetForm();
   dialogVisible.value = true;
@@ -382,7 +315,7 @@ async function handleDeleteApp(app: ApplicationInfo) {
     });
 
     await ApplicationAPI.deleteApp([app.id!]);
-    await loadApplicationList();
+    await refreshList();
   } catch (error) {
     if (error !== "cancel") {
       console.error("删除应用失败:", error);
@@ -491,286 +424,167 @@ async function handleSubmit() {
 
     dialogVisible.value = false;
     resetForm();
-    await loadApplicationList();
+    await refreshList();
   } catch (error) {
     console.error("提交失败:", error);
   }
 }
-
-// 初始化
-onMounted(() => {
-  loadApplicationList();
-});
 </script>
 
 <style lang="scss" scoped>
-.data-table {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  height: calc(100vh - 100px);
-
-  :deep(.el-card__footer) {
-    display: flex;
-    justify-content: flex-end;
-    margin-top: auto;
-  }
-}
-
+/* 高度交给外层 flex：app-container + PageContent(flex-1 min-h-0)，勿再用 100vh 计算，否则会超出 app-main、底部 padding 不显 */
 .card-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
-// 网格容器
+.market-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+}
+
 .app-grid-container {
   flex: 1;
-  padding: 2px 0;
+  min-height: 200px;
+}
+
+.app-grid-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 220px;
 }
 
 .grid-wrapper {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   gap: 16px;
-  justify-items: stretch;
-  padding: 0 2px;
-
-  @media (max-width: 768px) {
-    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-    gap: 14px;
-  }
-
-  @media (max-width: 480px) {
-    grid-template-columns: 1fr;
-    gap: 12px;
-  }
 }
 
-// 卡片样式
+.app-grid-item {
+  min-width: 0;
+}
+
 .app-card {
   display: flex;
+  flex: 1;
   flex-direction: column;
   height: 100%;
-  // min-height: 180px;
-  overflow: hidden;
+  min-height: 120px;
   cursor: pointer;
-  background: linear-gradient(145deg, var(--el-bg-color) 0%, var(--el-bg-color-page) 100%);
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 12px;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: box-shadow 0.2s ease;
 
-  &:hover {
-    border-color: var(--el-color-primary);
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
-    transform: translateY(-2px);
-  }
-
-  &:active {
-    transform: translateY(0);
+  &:hover:not(.card-disabled) {
+    box-shadow: var(--el-box-shadow-light);
   }
 
   &.card-disabled {
     cursor: not-allowed;
-    opacity: 0.6;
-
-    &:hover {
-      border-color: var(--el-border-color-lighter);
-      box-shadow: none;
-      transform: none;
-    }
+    opacity: 0.55;
   }
 
+  /* 仅保留底栏一条横线，避免与表头下边框重复成「双线」 */
   :deep(.el-card__header) {
-    padding: 16px 18px 14px;
-    background: linear-gradient(
-      90deg,
-      rgba(var(--el-color-primary-rgb), 0.02) 0%,
-      transparent 100%
-    );
-    border-bottom: 1px solid var(--el-border-color-lighter);
+    padding: 14px 14px 12px;
+    border-bottom: none;
   }
 
   :deep(.el-card__body) {
     display: flex;
     flex: 1;
     flex-direction: column;
-    padding: 18px;
+    justify-content: center;
+    min-height: 0;
+    padding: 12px 14px;
   }
 
   :deep(.el-card__footer) {
-    padding: 12px 18px 16px;
-    background: rgba(var(--el-fill-color-light-rgb), 0.3);
-    border-top: 1px solid var(--el-border-color-lighter);
+    margin-top: auto;
+    padding: 10px 14px 14px;
   }
 }
 
-// 头部信息
 .app-info-header {
-  position: relative;
   display: flex;
   gap: 12px;
-  align-items: flex-start;
-  min-width: 0;
-}
-
-.app-avatar {
-  flex-shrink: 0;
-  background: var(--el-fill-color-light);
-  border: 2px solid var(--el-border-color-lighter);
-  transition: all 0.3s ease;
-
-  .app-card:hover & {
-    background: rgba(var(--el-color-primary-rgb), 0.1);
-    border-color: var(--el-color-primary);
-  }
-}
-
-.app-title-wrap {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  gap: 8px;
+  align-items: center;
   min-width: 0;
 }
 
 .app-name {
+  flex: 1;
   margin: 0;
   overflow: hidden;
   text-overflow: ellipsis;
-  font-size: 16px;
+  font-size: 15px;
   font-weight: 600;
-  line-height: 1.4;
-  color: var(--el-text-color-primary);
   white-space: nowrap;
+  min-width: 0;
 }
 
-.status-tag {
-  align-self: flex-start;
-  padding: 2px 10px;
-  font-size: 12px;
-  font-weight: 500;
-  border-radius: 12px;
+.app-status {
+  flex-shrink: 0;
 }
 
-// 悬停操作按钮
-.card-actions {
-  position: absolute;
-  top: 50%;
-  right: -10px;
-  z-index: 10;
-  padding: 8px;
-  background: var(--el-bg-color);
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  backdrop-filter: blur(8px);
-  transform: translateY(-50%);
-
-  .el-button {
-    padding: 4px 8px;
-    margin: 0 2px;
-
-    &:first-child {
-      margin-left: 0;
-    }
-
-    &:last-child {
-      margin-right: 0;
-    }
-  }
-}
-
-// 内容区域
-.app-content {
+.card-footer-row {
   display: flex;
-  flex: 1;
-  flex-direction: column;
-  justify-content: center;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 28px;
+}
+
+.card-actions {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 0;
 }
 
 .app-description {
   display: -webkit-box;
   margin: 0;
   overflow: hidden;
-  text-overflow: ellipsis;
   -webkit-line-clamp: 2;
   line-clamp: 2;
-  font-size: 14px;
-  line-height: 1.6;
-  color: var(--el-text-color-regular);
+  font-size: 13px;
+  line-height: 1.55;
+  color: var(--el-text-color-secondary);
   -webkit-box-orient: vertical;
 }
 
-// 底部信息
-.card-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: 0 4px;
-}
-
-.footer-item {
-  display: flex;
-  flex-shrink: 0;
-  gap: 6px;
-  align-items: center;
+.card-meta {
+  flex: 1;
   min-width: 0;
-}
-
-.footer-icon {
-  color: var(--el-text-color-secondary);
-}
-
-.footer-text {
   overflow: hidden;
   text-overflow: ellipsis;
-  font-size: 13px;
-  color: var(--el-text-color-secondary);
   white-space: nowrap;
-}
-
-// 响应式调整
-@media (max-width: 768px) {
-  .app-name {
-    font-size: 15px;
-  }
-
-  .app-description {
-    font-size: 13px;
-  }
-
-  .card-actions {
-    position: static;
-    align-self: flex-end;
-    margin-top: 8px;
-    transform: none;
-
-    .el-button {
-      padding: 3px 6px;
-      font-size: 12px;
-    }
-  }
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--el-text-color-placeholder);
 }
 
 @media (max-width: 480px) {
-  .app-card {
-    :deep(.el-card__header) {
-      padding: 14px 16px;
-    }
-
-    :deep(.el-card__body) {
-      padding: 16px;
-    }
-
-    :deep(.el-card__footer) {
-      padding: 10px 16px 12px;
-    }
+  .grid-wrapper {
+    grid-template-columns: 1fr;
   }
 
-  .app-name {
-    font-size: 14px;
+  .card-footer-row {
+    flex-wrap: wrap;
+    gap: 8px;
+    min-height: 0;
+  }
+
+  .card-meta {
+    flex: 1 1 100%;
+    white-space: normal;
+    word-break: break-all;
+  }
+
+  .card-actions {
+    margin-left: auto;
   }
 }
 </style>
diff --git a/frontend/src/views/module_example/demo/index.vue b/frontend/src/views/module_example/demo/index.vue
index 70e1283a..e9e15cee 100644
--- a/frontend/src/views/module_example/demo/index.vue
+++ b/frontend/src/views/module_example/demo/index.vue
@@ -1,423 +1,248 @@
-<!-- 演示示例 -->
+<!-- 演示示例：PageSearch + PageContent CRUD 封装 -->
 <template>
   <div class="app-container">
-    <!-- 搜索区域 -->
-    <el-card v-show="visible" class="search-container">
-      <el-form
-        ref="queryFormRef"
-        :model="queryFormData"
-        label-suffix=":"
-        :inline="true"
-        @submit.prevent="handleQuery"
-      >
-        <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="0" label="启用" />
-            <el-option value="1" label="停用" />
-          </el-select>
-        </el-form-item>
-        <el-form-item v-if="isExpand" prop="created_id" label="创建人">
-          <UserTableSelect
-            v-model="queryFormData.created_id"
-            @confirm-click="handleConfirm"
-            @clear-click="handleQuery"
-          />
-        </el-form-item>
-        <el-form-item v-if="isExpand" prop="updated_id" label="更新人">
-          <UserTableSelect
-            v-model="queryFormData.updated_id"
-            @confirm-click="handleConfirm"
-            @clear-click="handleQuery"
-          />
-        </el-form-item>
-        <!-- 时间范围，收起状态下隐藏 -->
-        <el-form-item v-if="isExpand" prop="created_time" label="创建时间">
-          <DatePicker
-            v-model="createdDateRange"
-            @update:model-value="handleCreatedDateRangeChange"
-          />
-        </el-form-item>
-        <el-form-item v-if="isExpand" prop="updated_time" label="更新时间">
-          <DatePicker
-            v-model="updatedDateRange"
-            @update:model-value="handleUpdatedDateRangeChange"
-          />
-        </el-form-item>
-        <!-- 查询、重置、展开/收起按钮 -->
-        <el-form-item>
-          <el-button
-            v-hasPerm="['module_example:demo:query']"
-            type="primary"
-            icon="search"
-            @click="handleQuery"
-          >
-            查询
-          </el-button>
-          <el-button
-            v-hasPerm="['module_example: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>
-    </el-card>
+    <PageSearch
+      ref="searchRef"
+      :search-config="searchConfig"
+      @query-click="handleQueryClick"
+      @reset-click="handleResetClick"
+    />
 
-    <!-- 内容区域 -->
-    <el-card class="data-table">
-      <!-- 功能区域 -->
-      <div class="data-table__toolbar">
-        <div class="data-table__toolbar--left">
-          <el-row :gutter="10">
-            <el-col :span="1.5">
-              <el-button
-                v-hasPerm="['module_example:demo:create']"
-                type="success"
-                icon="plus"
-                @click="handleOpenDialog('create')"
-              >
-                新增
-              </el-button>
-            </el-col>
-            <el-col :span="1.5">
-              <el-button
-                v-hasPerm="['module_example: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="['module_example:demo:patch']" 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('0')">
-                      批量启用
-                    </el-dropdown-item>
-                    <el-dropdown-item icon="CircleClose" @click="handleMoreClick('1')">
-                      批量停用
-                    </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="['module_example: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="['module_example: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="['module_example:demo:query']"
-                  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-scrollbar>
-              </el-popover>
-            </el-col>
-          </el-row>
-        </div>
-      </div>
-
-      <!-- 表格区域：系统配置列表 -->
-      <div class="data-table__content">
-        <el-table
-          ref="tableRef"
-          v-loading="loading"
-          :data="pageTableData"
-          height="calc(100vh - 350px)"
-          max-height="calc(100vh - 350px)"
-          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-table-column>
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'name')?.show"
-            label="名称"
-            prop="name"
-            min-width="140"
-            show-overflow-tooltip
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'uuid')?.show"
-            label="UUID"
-            prop="uuid"
-            min-width="180"
-            show-overflow-tooltip
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'status')?.show"
-            label="状态"
-            prop="status"
-            min-width="120"
-            show-overflow-tooltip
-          >
-            <template #default="scope">
-              <el-tag :type="scope.row.status ? 'success' : 'info'">
-                {{ scope.row.status ? "启用" : "停用" }}
-              </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'a')?.show"
-            label="整数"
-            prop="a"
-            min-width="100"
-            show-overflow-tooltip
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'b')?.show"
-            label="大整数"
-            prop="b"
-            min-width="120"
-            show-overflow-tooltip
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'c')?.show"
-            label="浮点数"
-            prop="c"
-            min-width="100"
-            show-overflow-tooltip
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'd')?.show"
-            label="布尔值"
-            prop="d"
-            min-width="100"
-            show-overflow-tooltip
-          >
-            <template #default="scope">
-              <el-tag :type="scope.row.d ? 'success' : 'danger'">
-                {{ scope.row.d ? "是" : "否" }}
-              </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'e')?.show"
-            label="日期"
-            prop="e"
-            min-width="120"
-            show-overflow-tooltip
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'f')?.show"
-            label="时间"
-            prop="f"
-            min-width="120"
-            show-overflow-tooltip
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'g')?.show"
-            label="日期时间"
-            prop="g"
-            min-width="180"
-            show-overflow-tooltip
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'h')?.show"
-            label="长文本"
-            prop="h"
-            min-width="140"
-            show-overflow-tooltip
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'description')?.show"
-            label="描述"
-            prop="description"
-            min-width="140"
-            show-overflow-tooltip
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'created_time')?.show"
-            label="创建时间"
-            prop="created_time"
-            min-width="180"
-            show-overflow-tooltip
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'updated_time')?.show"
-            label="更新时间"
-            prop="updated_time"
-            min-width="180"
-            show-overflow-tooltip
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'created_id')?.show"
-            label="创建人"
-            prop="created_id"
-            min-width="120"
-            show-overflow-tooltip
-          >
-            <template #default="scope">
-              <el-tag>{{ scope.row.created_by?.name }}</el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'updated_id')?.show"
-            label="更新人"
-            prop="updated_id"
-            min-width="120"
-            show-overflow-tooltip
-          >
-            <template #default="scope">
-              <el-tag>{{ scope.row.updated_by?.name }}</el-tag>
-            </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="['module_example:demo:detail']"
-                type="info"
-                size="small"
-                link
-                icon="document"
-                @click="handleOpenDialog('detail', scope.row.id)"
-              >
-                详情
-              </el-button>
-              <el-button
-                v-hasPerm="['module_example:demo:update']"
-                type="primary"
-                size="small"
-                link
-                icon="edit"
-                @click="handleOpenDialog('update', scope.row.id)"
-              >
-                编辑
-              </el-button>
-              <el-button
-                v-hasPerm="['module_example:demo:delete']"
-                type="danger"
-                size="small"
-                link
-                icon="delete"
-                @click="handleDelete([scope.row.id])"
-              >
-                删除
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-
-      <!-- 分页区域 -->
-      <template #footer>
-        <pagination
-          v-model:total="total"
-          v-model:page="queryFormData.page_no"
-          v-model:limit="queryFormData.page_size"
-          @pagination="loadingData"
+    <PageContent
+      ref="contentRef"
+      :content-config="contentConfig"
+      @search-click="handleToggleSearch"
+      @add-click="handleOpenDialog('create')"
+    >
+      <!-- 与 PageContent 默认结构一致：不再套一层 data-table__toolbar（外层已由组件提供） -->
+      <template #toolbar="{ toolbarRight, onToolbar, removeIds, cols }">
+        <CrudToolbarLeft
+          :remove-ids="removeIds"
+          :perm-create="['module_example:demo:create']"
+          :perm-delete="['module_example:demo:delete']"
+          :perm-patch="['module_example:demo:patch']"
+          @add="handleOpenDialog('create')"
+          @delete="onToolbar('delete')"
+          @more="handleMoreClick"
         />
+        <div class="data-table__toolbar--right">
+          <CrudToolbarRight :buttons="toolbarRight" :cols="cols" :on-toolbar="onToolbar" />
+        </div>
       </template>
-    </el-card>
 
-    <!-- 弹窗区域 -->
-    <el-dialog
+      <template #table="{ data, loading, tableRef, onSelectionChange, pagination }">
+        <div class="data-table__content">
+          <el-table
+            :ref="tableRef as any"
+            v-loading="loading"
+            :data="data"
+            height="100%"
+            border
+            stripe
+            @selection-change="onSelectionChange"
+          >
+            <template #empty>
+              <el-empty :image-size="80" description="暂无数据" />
+            </template>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'selection')?.show"
+              type="selection"
+              min-width="55"
+              align="center"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'index')?.show"
+              fixed
+              label="序号"
+              min-width="60"
+            >
+              <template #default="scope">
+                {{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'name')?.show"
+              label="名称"
+              prop="name"
+              min-width="140"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'uuid')?.show"
+              label="UUID"
+              prop="uuid"
+              min-width="180"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'status')?.show"
+              label="状态"
+              prop="status"
+              min-width="120"
+              show-overflow-tooltip
+            >
+              <template #default="scope">
+                <el-tag :type="scope.row.status ? 'success' : 'info'">
+                  {{ scope.row.status ? "启用" : "停用" }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'a')?.show"
+              label="整数"
+              prop="a"
+              min-width="100"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'b')?.show"
+              label="大整数"
+              prop="b"
+              min-width="120"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'c')?.show"
+              label="浮点数"
+              prop="c"
+              min-width="100"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'd')?.show"
+              label="布尔值"
+              prop="d"
+              min-width="100"
+              show-overflow-tooltip
+            >
+              <template #default="scope">
+                <el-tag :type="scope.row.d ? 'success' : 'danger'">
+                  {{ scope.row.d ? "是" : "否" }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'e')?.show"
+              label="日期"
+              prop="e"
+              min-width="120"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'f')?.show"
+              label="时间"
+              prop="f"
+              min-width="120"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'g')?.show"
+              label="日期时间"
+              prop="g"
+              min-width="180"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'h')?.show"
+              label="长文本"
+              prop="h"
+              min-width="140"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'description')?.show"
+              label="描述"
+              prop="description"
+              min-width="140"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'created_time')?.show"
+              label="创建时间"
+              prop="created_time"
+              min-width="180"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'updated_time')?.show"
+              label="更新时间"
+              prop="updated_time"
+              min-width="180"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'created_id')?.show"
+              label="创建人"
+              prop="created_id"
+              min-width="120"
+              show-overflow-tooltip
+            >
+              <template #default="scope">
+                <el-tag>{{ scope.row.created_by?.name }}</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'updated_id')?.show"
+              label="更新人"
+              prop="updated_id"
+              min-width="120"
+              show-overflow-tooltip
+            >
+              <template #default="scope">
+                <el-tag>{{ scope.row.updated_by?.name }}</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'operation')?.show"
+              fixed="right"
+              label="操作"
+              align="center"
+              min-width="200"
+            >
+              <template #default="scope">
+                <el-button
+                  v-hasPerm="['module_example:demo:detail']"
+                  type="info"
+                  size="small"
+                  link
+                  icon="View"
+                  @click="handleOpenDialog('detail', scope.row.id)"
+                >
+                  详情
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_example:demo:update']"
+                  type="primary"
+                  size="small"
+                  link
+                  icon="edit"
+                  @click="handleOpenDialog('update', scope.row.id)"
+                >
+                  编辑
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_example:demo:delete']"
+                  type="danger"
+                  size="small"
+                  link
+                  icon="delete"
+                  @click="handleRowDelete(scope.row.id)"
+                >
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </template>
+    </PageContent>
+
+    <EnhancedDialog
       v-model="dialogVisible.visible"
       :title="dialogVisible.title"
+      width="920px"
       @close="handleCloseDialog"
     >
-      <!-- 详情 -->
       <template v-if="dialogVisible.type === 'detail'">
         <el-descriptions :column="4" border>
           <el-descriptions-item label="名称" :span="2">
@@ -477,7 +302,6 @@
           </el-descriptions-item>
         </el-descriptions>
       </template>
-      <!-- 新增、编辑表单 -->
       <template v-else>
         <el-form
           ref="dataFormRef"
@@ -590,7 +414,6 @@
 
       <template #footer>
         <div class="dialog-footer">
-          <!-- 详情弹窗不需要确定按钮的提交逻辑 -->
           <el-button @click="handleCloseDialog">取消</el-button>
           <el-button v-if="dialogVisible.type !== 'detail'" type="primary" @click="handleSubmit">
             确定
@@ -598,24 +421,7 @@
           <el-button v-else type="primary" @click="handleCloseDialog">确定</el-button>
         </div>
       </template>
-    </el-dialog>
-
-    <!-- 导入弹窗 -->
-    <ImportModal
-      v-model="importDialogVisible"
-      :content-config="curdContentConfig"
-      :loading="uploadLoading"
-      @upload="handleUpload"
-    />
-
-    <!-- 导出弹窗 -->
-    <ExportModal
-      v-model="exportsDialogVisible"
-      :content-config="curdContentConfig"
-      :query-params="queryFormData"
-      :page-data="pageTableData"
-      :selection-data="selectionRows"
-    />
+    </EnhancedDialog>
   </div>
 </template>
 
@@ -625,33 +431,110 @@ defineOptions({
   inheritAttrs: false,
 });
 
-import { ref, reactive, onMounted } from "vue";
-import { ElMessage, ElMessageBox } from "element-plus";
+import { ref, reactive, onMounted, markRaw, nextTick } from "vue";
+import { fetchAllPages } from "@/utils/fetchAllPages";
+import { ElMessageBox } from "element-plus";
 import { ResultEnum } from "@/enums/api/result.enum";
 import DemoAPI, { DemoTable, DemoForm, DemoPageQuery } from "@/api/module_example/demo";
-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 { ArrowUp, ArrowDown } from "@element-plus/icons-vue";
-import { formatToDateTime } from "@/utils/dateUtil";
+import CrudToolbarLeft from "@/components/CURD/CrudToolbarLeft.vue";
+import CrudToolbarRight from "@/components/CURD/CrudToolbarRight.vue";
+import PageSearch from "@/components/CURD/PageSearch.vue";
+import PageContent from "@/components/CURD/PageContent.vue";
+import EnhancedDialog from "@/components/CURD/EnhancedDialog.vue";
+import { useCrudList } from "@/components/CURD/useCrudList";
+import UserTableSelect from "@/views/module_system/user/components/UserTableSelect.vue";
+import type { IContentConfig, ISearchConfig } from "@/components/CURD/types";
+import JsonPretty from "@/components/JsonPretty/index.vue";
 
-const visible = ref(true);
-const queryFormRef = ref();
-const dataFormRef = ref();
-const total = ref(0);
-const selectIds = ref<number[]>([]);
-const selectionRows = ref<DemoTable[]>([]);
-const loading = ref(false);
-const isExpand = ref(false);
-const isExpandable = ref(true);
-const metadataList = ref<{ key: string; value: string }[]>([]);
+const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
 
-// 分页表单
-const pageTableData = ref<DemoTable[]>([]);
+function triggerUserSearch() {
+  nextTick(() => refreshList());
+}
 
-// 表格列配置
-const tableColumns = ref([
+const searchConfig = reactive<ISearchConfig>({
+  permPrefix: "module_example:demo",
+  colon: true,
+  isExpandable: true,
+  showNumber: 2,
+  showToggle: false,
+  form: { labelWidth: "auto" },
+  formItems: [
+    {
+      prop: "name",
+      label: "名称",
+      type: "input",
+      attrs: { placeholder: "请输入名称", clearable: true },
+    },
+    {
+      prop: "status",
+      label: "状态",
+      type: "select",
+      options: [
+        { label: "启用", value: "0" },
+        { label: "停用", value: "1" },
+      ],
+      attrs: { placeholder: "请选择状态", clearable: true, style: { width: "170px" } },
+    },
+    {
+      prop: "created_id",
+      label: "创建人",
+      type: "user-table-select",
+      initialValue: null,
+      events: {
+        "confirm-click": triggerUserSearch,
+        "clear-click": triggerUserSearch,
+      },
+    },
+    {
+      prop: "updated_id",
+      label: "更新人",
+      type: "user-table-select",
+      initialValue: null,
+      events: {
+        "confirm-click": triggerUserSearch,
+        "clear-click": triggerUserSearch,
+      },
+    },
+    {
+      prop: "created_time",
+      label: "创建时间",
+      type: "date-picker",
+      initialValue: [],
+      attrs: {
+        type: "datetimerange",
+        valueFormat: "YYYY-MM-DD HH:mm:ss",
+        rangeSeparator: "至",
+        startPlaceholder: "开始",
+        endPlaceholder: "结束",
+      },
+    },
+    {
+      prop: "updated_time",
+      label: "更新时间",
+      type: "date-picker",
+      initialValue: [],
+      attrs: {
+        type: "datetimerange",
+        valueFormat: "YYYY-MM-DD HH:mm:ss",
+        rangeSeparator: "至",
+        startPlaceholder: "开始",
+        endPlaceholder: "结束",
+      },
+    },
+  ],
+  customComponents: {
+    "user-table-select": markRaw(UserTableSelect),
+  },
+});
+
+const contentCols = reactive<
+  Array<{
+    prop?: string;
+    label?: string;
+    show?: boolean;
+  }>
+>([
   { prop: "selection", label: "选择框", show: true },
   { prop: "index", label: "序号", show: true },
   { prop: "name", label: "名称", show: true },
@@ -674,89 +557,74 @@ const tableColumns = ref([
   { prop: "operation", label: "操作", show: true },
 ]);
 
-// 仅用于导出字段的列（排除非数据列及嵌套对象列）
-const exportColumns = [
-  { prop: "name", label: "名称" },
-  { prop: "uuid", label: "UUID" },
-  { prop: "status", label: "状态" },
-  { prop: "a", label: "整数" },
-  { prop: "b", label: "大整数" },
-  { prop: "c", label: "浮点数" },
-  { prop: "d", label: "布尔值" },
-  { prop: "e", label: "日期" },
-  { prop: "f", label: "时间" },
-  { prop: "g", label: "日期时间" },
-  { prop: "h", label: "长文本" },
-  { prop: "i", label: "元数据" },
-  { prop: "description", label: "描述" },
-  { prop: "created_time", label: "创建时间" },
-  { prop: "updated_time", label: "更新时间" },
-];
+function normalizeDemoQuery(params: Record<string, unknown>) {
+  const p = { ...params } as Record<string, unknown>;
+  if (Array.isArray(p.created_time) && p.created_time.length === 0) p.created_time = undefined;
+  if (Array.isArray(p.updated_time) && p.updated_time.length === 0) p.updated_time = undefined;
+  return p as unknown as DemoPageQuery;
+}
 
-// 导入/导出配置
-const curdContentConfig = {
+const contentConfig = reactive<IContentConfig<DemoPageQuery>>({
   permPrefix: "module_example:demo",
-  cols: exportColumns as any,
+  hideColumnFilter: false,
+  initialFetch: false,
+  cols: contentCols as IContentConfig["cols"],
+  toolbar: [],
+  defaultToolbar: ["import", "exports", "search", "refresh", "filter"],
+  pagination: {
+    pageSize: 10,
+    pageSizes: [10, 20, 30, 50],
+  },
+  request: { page_no: "page_no", page_size: "page_size" },
+  indexAction: async (params) => {
+    const res = await DemoAPI.getDemoList(
+      normalizeDemoQuery(params as unknown as Record<string, unknown>)
+    );
+    return {
+      total: res.data.data.total,
+      list: res.data.data.items,
+    };
+  },
+  deleteAction: (ids) =>
+    DemoAPI.deleteDemo(
+      ids
+        .split(",")
+        .map((s) => Number(s.trim()))
+        .filter((n) => !Number.isNaN(n) && n > 0)
+    ),
   importTemplate: () => DemoAPI.downloadTemplateDemo(),
-  exportsAction: async (params: any) => {
-    const query: any = { ...params };
+  importAction: (file: File) => {
+    const fd = new FormData();
+    fd.append("file", file);
+    return DemoAPI.importDemo(fd).then((res) => {
+      if (res.data.code !== ResultEnum.SUCCESS) {
+        return Promise.reject(new Error(res.data.msg));
+      }
+    });
+  },
+  exportsAction: async (params: DemoPageQuery) => {
+    const query: Record<string, unknown> = { ...params };
     if (typeof query.status === "string") {
       query.status = query.status === "true";
     }
-    query.page_no = 1;
-    query.page_size = 9999;
-    const all: any[] = [];
-    while (true) {
-      const res = await DemoAPI.getDemoList(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;
+    return fetchAllPages<DemoTable>({
+      pageSize: 9999,
+      initialQuery: query,
+      fetchPage: async (q) => {
+        const res = await DemoAPI.getDemoList(
+          normalizeDemoQuery(q as unknown as Record<string, unknown>)
+        );
+        return {
+          total: res.data?.data?.total ?? 0,
+          list: res.data?.data?.items ?? [],
+        };
+      },
+    });
   },
-} as unknown as IContentConfig;
-// 详情表单
-const detailFormData = ref<DemoTable>({});
-// 日期范围临时变量
-const createdDateRange = ref<[Date, Date] | []>([]);
-// 更新时间范围临时变量
-const updatedDateRange = ref<[Date, Date] | []>([]);
-
-// 处理创建时间范围变化
-function handleCreatedDateRangeChange(range: [Date, Date]) {
-  createdDateRange.value = range;
-  if (range && range.length === 2) {
-    queryFormData.created_time = [formatToDateTime(range[0]), formatToDateTime(range[1])];
-  } else {
-    queryFormData.created_time = undefined;
-  }
-}
-
-// 处理更新时间范围变化
-function handleUpdatedDateRangeChange(range: [Date, Date]) {
-  updatedDateRange.value = range;
-  if (range && range.length === 2) {
-    queryFormData.updated_time = [formatToDateTime(range[0]), formatToDateTime(range[1])];
-  } else {
-    queryFormData.updated_time = undefined;
-  }
-}
-
-// 分页查询参数
-const queryFormData = reactive<DemoPageQuery>({
-  page_no: 1,
-  page_size: 10,
-  name: undefined,
-  status: undefined,
-  created_time: undefined,
-  updated_time: undefined,
-  created_id: undefined,
-  updated_id: undefined,
 });
 
-// 编辑表单
+const detailFormData = ref<DemoTable>({});
+
 const formData = reactive<DemoForm>({
   id: undefined,
   name: "",
@@ -773,79 +641,29 @@ const formData = reactive<DemoForm>({
   i: undefined,
 });
 
-// 弹窗状态
 const dialogVisible = reactive({
   title: "",
   visible: false,
   type: "create" as "create" | "update" | "detail",
 });
 
-// 表单验证规则
 const rules = reactive({
   name: [{ required: true, message: "请输入名称", trigger: "blur" }],
   status: [{ required: true, message: "请选择状态", trigger: "blur" }],
 });
 
-// 导入弹窗显示状态
-const importDialogVisible = ref(false);
-const uploadLoading = ref(false);
+const dataFormRef = ref();
 
-// 导出弹窗显示状态
-const exportsDialogVisible = ref(false);
+const metadataList = ref<{ key: string; value: string }[]>([]);
 
-// 打开导入弹窗
-function handleOpenImportDialog() {
-  importDialogVisible.value = true;
+function handleToggleSearch() {
+  searchRef.value?.toggleVisible();
 }
 
-// 打开导出弹窗
-function handleOpenExportsModal() {
-  exportsDialogVisible.value = true;
+function handleRowDelete(id: number) {
+  contentRef.value?.handleDelete(id);
 }
 
-// 列表刷新
-async function handleRefresh() {
-  await loadingData();
-}
-
-// 加载表格数据
-async function loadingData() {
-  loading.value = true;
-  try {
-    const response = await DemoAPI.getDemoList(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();
-}
-
-// 选择创建人后触发查询
-function handleConfirm() {
-  handleQuery();
-}
-
-// 重置查询
-async function handleResetQuery() {
-  queryFormRef.value.resetFields();
-  queryFormData.page_no = 1;
-  // 重置日期范围选择器
-  createdDateRange.value = [];
-  updatedDateRange.value = [];
-  queryFormData.created_time = undefined;
-  queryFormData.updated_time = undefined;
-  loadingData();
-}
-
-// 定义初始表单数据常量
 const initialFormData: DemoForm = {
   id: undefined,
   name: "",
@@ -862,30 +680,20 @@ const initialFormData: DemoForm = {
   i: undefined,
 };
 
-// 重置表单
 async function resetForm() {
   if (dataFormRef.value) {
     dataFormRef.value.resetFields();
     dataFormRef.value.clearValidate();
   }
-  // 完全重置 formData 为初始状态
   Object.assign(formData, initialFormData);
   metadataList.value = [];
 }
 
-// 行复选框选中项变化
-async function handleSelectionChange(selection: any) {
-  selectIds.value = selection.map((item: any) => item.id);
-  selectionRows.value = selection;
-}
-
-// 关闭弹窗
 async function handleCloseDialog() {
   dialogVisible.visible = false;
   resetForm();
 }
 
-// 打开弹窗
 async function handleOpenDialog(type: "create" | "update" | "detail", id?: number) {
   dialogVisible.type = type;
   if (id) {
@@ -913,12 +721,9 @@ async function handleOpenDialog(type: "create" | "update" | "detail", id?: numbe
   dialogVisible.visible = true;
 }
 
-// 提交表单（防抖）
 async function handleSubmit() {
-  // 表单校验
-  dataFormRef.value.validate(async (valid: any) => {
+  dataFormRef.value.validate(async (valid: boolean) => {
     if (valid) {
-      loading.value = true;
       const submitData = { ...formData };
       if (metadataList.value.length > 0) {
         const metadataObj: Record<string, string> = {};
@@ -932,51 +737,37 @@ async function handleSubmit() {
         submitData.i = undefined;
       }
       const id = formData.id;
-      if (id) {
-        try {
+      try {
+        if (id) {
           await DemoAPI.updateDemo(id, { id, ...submitData });
-          dialogVisible.visible = false;
-          resetForm();
-          handleCloseDialog();
-          handleResetQuery();
-        } catch (error: any) {
-          console.error(error);
-        } finally {
-          loading.value = false;
-        }
-      } else {
-        try {
+        } else {
           await DemoAPI.createDemo(submitData);
-          dialogVisible.visible = false;
-          resetForm();
-          handleCloseDialog();
-          handleResetQuery();
-        } catch (error: any) {
-          console.error(error);
-        } finally {
-          loading.value = false;
         }
+        dialogVisible.visible = false;
+        await resetForm();
+        refreshList();
+      } catch (error: unknown) {
+        console.error(error);
       }
     }
   });
 }
 
-// 删除、批量删除
-async function handleDelete(ids: number[]) {
-  ElMessageBox.confirm("确认删除该项数据?", "警告", {
+async function handleMoreClick(status: string) {
+  const rows = contentRef.value?.getSelectionData() ?? [];
+  const ids = rows.map((r: { id?: number }) => r.id).filter(Boolean) as number[];
+  if (!ids.length) return;
+  ElMessageBox.confirm(`确认${status === "0" ? "启用" : "停用"}该项数据?`, "警告", {
     confirmButtonText: "确定",
     cancelButtonText: "取消",
     type: "warning",
   })
     .then(async () => {
       try {
-        loading.value = true;
-        await DemoAPI.deleteDemo(ids);
-        handleResetQuery();
-      } catch (error: any) {
+        await DemoAPI.batchDemo({ ids, status });
+        refreshList();
+      } catch (error: unknown) {
         console.error(error);
-      } finally {
-        loading.value = false;
       }
     })
     .catch(() => {
@@ -984,50 +775,8 @@ async function handleDelete(ids: number[]) {
     });
 }
 
-// 批量启用/停用
-async function handleMoreClick(status: string) {
-  if (selectIds.value.length) {
-    ElMessageBox.confirm(`确认${status === "0" ? "启用" : "停用"}该项数据?`, "警告", {
-      confirmButtonText: "确定",
-      cancelButtonText: "取消",
-      type: "warning",
-    })
-      .then(async () => {
-        try {
-          loading.value = true;
-          await DemoAPI.batchDemo({ ids: selectIds.value, status });
-          handleResetQuery();
-        } catch (error: any) {
-          console.error(error);
-        } finally {
-          loading.value = false;
-        }
-      })
-      .catch(() => {
-        ElMessageBox.close();
-      });
-  }
-}
-
-// 处理上传
-const handleUpload = async (formData: FormData) => {
-  try {
-    uploadLoading.value = true;
-    const response = await DemoAPI.importDemo(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);
-  } finally {
-    uploadLoading.value = false;
-  }
-};
-
 onMounted(() => {
-  loadingData();
+  refreshList();
 });
 </script>
 
diff --git a/frontend/src/views/module_generator/gencode/index.vue b/frontend/src/views/module_generator/gencode/index.vue
index 67a4e4b0..7b862a78 100644
--- a/frontend/src/views/module_generator/gencode/index.vue
+++ b/frontend/src/views/module_generator/gencode/index.vue
@@ -1,57 +1,15 @@
 <template>
   <div class="app-container">
-    <!-- 搜索区域 -->
-    <el-card class="search-container">
-      <el-form
-        ref="queryRef"
-        :model="queryFormData"
-        :inline="true"
-        label-suffix=":"
-        @submit.prevent="handleQuery"
-      >
-        <el-form-item label="表名称" prop="table_name">
-          <el-input
-            v-model="queryFormData.table_name"
-            placeholder="请输入表名称"
-            clearable
-            style="width: 200px"
-            @keyup.enter="handleQuery"
-          />
-        </el-form-item>
-        <el-form-item label="表描述" prop="table_comment">
-          <el-input
-            v-model="queryFormData.table_comment"
-            placeholder="请输入表描述"
-            clearable
-            style="width: 200px"
-            @keyup.enter="handleQuery"
-          />
-        </el-form-item>
-        <el-form-item class="search-buttons">
-          <el-button
-            v-hasPerm="['module_generator:gencode:query']"
-            type="primary"
-            icon="search"
-            native-type="submit"
-          >
-            查询
-          </el-button>
-          <el-button
-            v-hasPerm="['module_generator:gencode:query']"
-            icon="refresh"
-            @click="handleRefresh"
-          >
-            重置
-          </el-button>
-        </el-form-item>
-      </el-form>
-    </el-card>
+    <PageSearch
+      ref="searchRef"
+      :search-config="searchConfig"
+      @query-click="handleQueryClick"
+      @reset-click="handleResetClick"
+    />
 
-    <!-- 内容区域 -->
-    <el-card class="data-table">
-      <!-- 功能区域 -->
-      <div class="data-table__toolbar">
-        <div class="data-table__toolbar--left">
+    <PageContent ref="contentRef" :content-config="contentConfig">
+      <template #toolbar="{ toolbarRight, onToolbar, removeIds, cols }">
+        <CrudToolbarLeft :remove-ids="removeIds">
           <el-row :gutter="10">
             <el-col :span="1.5">
               <el-button
@@ -78,7 +36,7 @@
                 v-hasPerm="['module_generator:gencode:delete']"
                 type="danger"
                 icon="Delete"
-                :disabled="ids.length === 0"
+                :disabled="removeIds.length === 0"
                 @click="handleDelete()"
               >
                 批量删除
@@ -89,159 +47,136 @@
                 v-hasPerm="['module_generator:gencode:code']"
                 type="warning"
                 icon="Download"
-                :disabled="!canGenerate"
+                :disabled="removeIds.length === 0"
                 @click="handleGenTable('0')"
               >
                 批量生成
               </el-button>
             </el-col>
           </el-row>
-        </div>
+        </CrudToolbarLeft>
         <div class="data-table__toolbar--right">
-          <el-row :gutter="10">
-            <el-col :span="1.5">
-              <el-tooltip content="刷新">
-                <el-button
-                  v-hasPerm="['module_generator:gencode:query']"
-                  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-scrollbar>
-              </el-popover>
-            </el-col>
-          </el-row>
+          <CrudToolbarRight :buttons="toolbarRight" :cols="cols" :on-toolbar="onToolbar" />
         </div>
-      </div>
-
-      <div class="data-table__content">
-        <el-table
-          ref="dataTableRef"
-          v-loading="loading"
-          :data="tableList"
-          class="data-table__content"
-          height="calc(100vh - 350px)"
-          max-height="calc(100vh - 350px)"
-          border
-          stripe
-          @selection-change="handleTableSelectionChange"
-        >
-          <template #empty>
-            <el-empty :image-size="80" description="暂无数据" />
-          </template>
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'selection')?.show"
-            type="selection"
-            align="center"
-            width="55"
-          ></el-table-column>
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'index')?.show"
-            label="序号"
-            type="index"
-            min-width="30"
-            align="center"
-            fixed
-          >
-            <template #default="scope">
-              <span>
-                {{ (queryFormData.page_no - 1) * queryFormData.page_size + scope.$index + 1 }}
-              </span>
-            </template>
-          </el-table-column>
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'table_name')?.show"
-            label="表名称"
-            prop="table_name"
-            :show-overflow-tooltip="true"
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'table_comment')?.show"
-            label="表描述"
-            prop="table_comment"
-            :show-overflow-tooltip="true"
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'class_name')?.show"
-            label="实体"
-            prop="class_name"
-            :show-overflow-tooltip="true"
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'created_time')?.show"
-            label="创建时间"
-            prop="created_time"
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'updated_time')?.show"
-            label="更新时间"
-            prop="updated_time"
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'operation')?.show"
-            label="操作"
-            align="center"
-            min-width="120"
-            class-name="small-padding fixed-width"
-          >
-            <template #default="scope">
-              <el-button
-                v-hasPerm="['module_generator:gencode:update']"
-                link
-                type="primary"
-                :icon="MagicStick"
-                @click="handlePreviewTable(scope.row)"
-              >
-                代码生成
-              </el-button>
-              <el-button
-                v-hasPerm="['module_generator:gencode:delete']"
-                link
-                type="danger"
-                icon="Delete"
-                @click="handleDelete(scope.row)"
-              >
-                删除
-              </el-button>
-              <el-button
-                v-hasPerm="['module_generator:db:sync']"
-                link
-                type="success"
-                icon="Refresh"
-                @click="handleSynchDb(scope.row)"
-              >
-                同步
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-
-      <!-- 分页区域 -->
-      <template #footer>
-        <pagination
-          v-model:total="total"
-          v-model:page="queryFormData.page_no"
-          v-model:limit="queryFormData.page_size"
-          @pagination="loadingData"
-        />
       </template>
-    </el-card>
+
+      <template #table="{ data, loading: tableLoading, tableRef, onSelectionChange, pagination }">
+        <div class="data-table__content">
+          <el-table
+            :ref="tableRef as any"
+            v-loading="tableLoading"
+            row-key="id"
+            :data="data"
+            height="100%"
+            border
+            stripe
+            @selection-change="
+              (s) => {
+                handleTableSelectionChange(s as GenTableSchema[]);
+                onSelectionChange(s);
+              }
+            "
+          >
+            <template #empty>
+              <el-empty :image-size="80" description="暂无数据" />
+            </template>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'selection')?.show"
+              type="selection"
+              align="center"
+              width="55"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'index')?.show"
+              label="序号"
+              type="index"
+              min-width="30"
+              align="center"
+              fixed
+            >
+              <template #default="scope">
+                <span>
+                  {{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'table_name')?.show"
+              label="表名称"
+              prop="table_name"
+              :show-overflow-tooltip="true"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'table_comment')?.show"
+              label="表描述"
+              prop="table_comment"
+              :show-overflow-tooltip="true"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'class_name')?.show"
+              label="实体"
+              prop="class_name"
+              :show-overflow-tooltip="true"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'created_time')?.show"
+              label="创建时间"
+              prop="created_time"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'updated_time')?.show"
+              label="更新时间"
+              prop="updated_time"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'operation')?.show"
+              label="操作"
+              align="center"
+              min-width="120"
+              class-name="small-padding fixed-width"
+            >
+              <template #default="scope">
+                <el-button
+                  v-hasPerm="['module_generator:gencode:update']"
+                  link
+                  type="primary"
+                  :icon="MagicStick"
+                  @click="handlePreviewTable(scope.row)"
+                >
+                  代码生成
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_generator:gencode:delete']"
+                  link
+                  type="danger"
+                  icon="Delete"
+                  @click="handleDelete(scope.row)"
+                >
+                  删除
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_generator:db:sync']"
+                  link
+                  type="success"
+                  icon="Refresh"
+                  @click="handleSynchDb(scope.row)"
+                >
+                  同步
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </template>
+    </PageContent>
 
     <!-- 创建表 -->
-    <el-dialog v-model="createTableVisible" title="创建表" append-to-body>
+    <EnhancedDialog
+      v-model="createTableVisible"
+      title="创建表"
+      width="min(920px, 96vw)"
+      append-to-body
+    >
       <span>创建表语句(支持多个建表sql语句)：</span>
       <el-button type="warning" size="small" class="ml-1 mb-1" @click="loadExampleMysql">
         加载MySQL示例
@@ -276,11 +211,11 @@
           <el-button @click="handleCreateTableCancel()">取 消</el-button>
         </div>
       </template>
-    </el-dialog>
+    </EnhancedDialog>
 
     <!-- 导入表 -->
-    <el-dialog v-model="importVisible" title="导入表" append-to-body>
-      <el-form ref="queryRef" :model="importQueryFormData" :inline="true">
+    <EnhancedDialog v-model="importVisible" title="导入表" width="min(960px, 96vw)" append-to-body>
+      <el-form ref="importQueryRef" :model="importQueryFormData" :inline="true">
         <el-form-item label="表名称" prop="table_name">
           <el-input
             v-model="importQueryFormData.table_name"
@@ -373,13 +308,14 @@
           <el-button @click="importVisible = false">取 消</el-button>
         </div>
       </template>
-    </el-dialog>
+    </EnhancedDialog>
 
     <!-- 代码生成抽屉 -->
-    <el-drawer
+    <EnhancedDrawer
       v-model="editVisible"
       :title="'【代码生成】' + info.table_name"
       size="85%"
+      append-to-body
       @close="handleClose"
     >
       <el-steps :active="activeStep" finish-status="success" simple>
@@ -825,7 +761,7 @@
           写入本地
         </el-button>
       </template>
-    </el-drawer>
+    </EnhancedDrawer>
   </div>
 </template>
 
@@ -838,7 +774,7 @@ defineOptions({
 import "codemirror/mode/javascript/javascript.js";
 import "codemirror/mode/sql/sql.js";
 import "codemirror/theme/dracula.css";
-import { ref, reactive, computed, onActivated, onMounted, watch } from "vue";
+import { ref, reactive, computed, onActivated, watch, nextTick, unref } from "vue";
 import { useClipboard } from "@vueuse/core";
 import { useRoute } from "vue-router";
 import Codemirror from "codemirror-editor-vue3";
@@ -866,6 +802,14 @@ import { formatTree } from "@/utils/common";
 import { MenuTypeEnum } from "@/enums";
 import { useSettingsStore } from "@/store";
 import { ThemeMode } from "@/enums/settings/theme.enum";
+import CrudToolbarLeft from "@/components/CURD/CrudToolbarLeft.vue";
+import CrudToolbarRight from "@/components/CURD/CrudToolbarRight.vue";
+import PageSearch from "@/components/CURD/PageSearch.vue";
+import PageContent from "@/components/CURD/PageContent.vue";
+import EnhancedDialog from "@/components/CURD/EnhancedDialog.vue";
+import EnhancedDrawer from "@/components/CURD/EnhancedDrawer.vue";
+import { useCrudList } from "@/components/CURD/useCrudList";
+import type { IContentConfig, ISearchConfig } from "@/components/CURD/types";
 
 // 表格列配置接口
 interface TableColumn {
@@ -890,8 +834,10 @@ interface FileData {
   content: string;
 }
 
+const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
+
 // 组件引用
-const queryRef = ref<FormInstance>();
+const importQueryRef = ref<FormInstance>();
 const table = ref<TableInstance>();
 const cmRef = ref<CmComponentRef>();
 const sqlRef = ref<CmComponentRef>();
@@ -900,7 +846,6 @@ const basicInfo = ref<FormInstance>();
 // 状态管理
 const loading = ref(false);
 const nextStepLoading = ref(false);
-const total = ref<number>(0);
 const uniqueId = ref("");
 const editVisible = ref(false);
 const activeStep = ref(2);
@@ -911,8 +856,6 @@ const importVisible = ref(false);
 
 // 表单和列表数据
 const createContent = ref("");
-const dateRange = ref<[Date, Date] | []>([]);
-const tableList = ref<GenTableSchema[]>([]);
 const dbTableList = ref<DBTableSchema[]>([]);
 const ids = ref<number[]>([]);
 const tableNames = ref<string[]>([]);
@@ -958,16 +901,31 @@ const previewTypes = ref<string[]>([...previewTypeOptions]);
 const code = ref<string>("");
 const treeData = ref<TreeNode[]>([]);
 
-// 分页查询参数
-const queryFormData = reactive<GenTablePageQuery>({
-  page_no: 1,
-  page_size: 10,
-  table_name: undefined,
-  table_comment: undefined,
+const searchConfig = reactive<ISearchConfig>({
+  permPrefix: "module_generator:gencode",
+  colon: true,
+  isExpandable: false,
+  showNumber: 3,
+  form: { labelWidth: "auto" },
+  searchButtonPerm: "module_generator:gencode:query",
+  resetButtonPerm: "module_generator:gencode:query",
+  formItems: [
+    {
+      prop: "table_name",
+      label: "表名称",
+      type: "input",
+      attrs: { placeholder: "请输入表名称", clearable: true, style: { width: "200px" } },
+    },
+    {
+      prop: "table_comment",
+      label: "表描述",
+      type: "input",
+      attrs: { placeholder: "请输入表描述", clearable: true, style: { width: "200px" } },
+    },
+  ],
 });
 
-// 表格列配置
-const tableColumns = ref<TableColumn[]>([
+const contentCols = reactive<TableColumn[]>([
   { prop: "selection", label: "选择框", show: true },
   { prop: "index", label: "序号", show: true },
   { prop: "table_name", label: "表名称", show: true },
@@ -978,6 +936,26 @@ const tableColumns = ref<TableColumn[]>([
   { prop: "operation", label: "操作", show: true },
 ]);
 
+const contentConfig = reactive<IContentConfig<GenTablePageQuery>>({
+  permPrefix: "module_generator:gencode",
+  cols: contentCols as IContentConfig["cols"],
+  hideColumnFilter: false,
+  toolbar: [],
+  defaultToolbar: ["refresh", "filter"],
+  pagination: {
+    pageSize: 10,
+    pageSizes: [10, 20, 30, 50],
+  },
+  request: { page_no: "page_no", page_size: "page_size" },
+  indexAction: async (params) => {
+    const res = await GencodeAPI.listTable(params as GenTablePageQuery);
+    return {
+      total: res.data.data.total,
+      list: res.data.data.items,
+    };
+  },
+});
+
 const settingsStore = useSettingsStore();
 
 // 主题计算属性
@@ -1070,9 +1048,6 @@ const filteredTreeData = computed<TreeNode[]>(() => {
   return filtered;
 });
 
-// 按钮状态计算
-const canGenerate = computed(() => ids.value.length > 0);
-
 // ===== 功能函数 =====
 
 /** 一键复制代码 */
@@ -1194,22 +1169,6 @@ async function handlePreview(row: GenTableSchema): Promise<void> {
   }
 }
 
-/** 查询表集合 */
-async function loadingData(): Promise<void> {
-  loading.value = true;
-  try {
-    const response = await GencodeAPI.listTable(queryFormData);
-    if (response?.data?.data) {
-      tableList.value = response.data.data.items;
-      total.value = response.data.data.total;
-    }
-  } catch (error) {
-    console.error("获取表数据失败:", error);
-  } finally {
-    loading.value = false;
-  }
-}
-
 /** 表格行内生成代码操作 */
 async function handleGenTable(targetGenType: string, row?: GenTableSchema): Promise<void> {
   let tbNames: string | string[] = [];
@@ -1272,7 +1231,7 @@ async function handleSynchDb(row: GenTableSchema): Promise<void> {
 
     loading.value = true;
     await GencodeAPI.syncDb(tableName);
-    loadingData(); // 同步成功后刷新列表
+    refreshList();
   } catch (error) {
     if (error !== "cancel") {
       console.error("同步表结构失败:", error);
@@ -1282,17 +1241,6 @@ async function handleSynchDb(row: GenTableSchema): Promise<void> {
   }
 }
 
-/** 重置按钮操作 */
-async function handleRefresh() {
-  dateRange.value = [];
-  // 手动重置表单
-  queryFormData.page_no = 1;
-  queryFormData.page_size = 10;
-  queryFormData.table_name = undefined;
-  queryFormData.table_comment = undefined;
-  await loadingData();
-}
-
 /** 多选框选中数据 - 主表格 */
 function handleTableSelectionChange(selection: GenTableSchema[]): void {
   ids.value = selection.map((item) => item.id!);
@@ -1353,15 +1301,12 @@ async function handleDelete(row?: GenTableSchema): Promise<void> {
       type: "warning",
     });
 
-    loading.value = true;
     await GencodeAPI.deleteTable(tableIds);
-    loadingData();
+    refreshList();
   } catch (error) {
     if (error !== "cancel") {
       console.error("删除表数据失败:", error);
     }
-  } finally {
-    loading.value = false;
   }
 }
 
@@ -1432,7 +1377,7 @@ async function handleCreateTable(sql: string): Promise<void> {
     await GencodeAPI.createTable(sql);
     createTableVisible.value = false;
     createContent.value = "";
-    loadingData();
+    refreshList();
     // 创建成功后自动打开导入弹窗
     importVisible.value = true;
     await getDbList();
@@ -1462,14 +1407,12 @@ async function handleImportTable(): Promise<void> {
     const tableNames = tables.value.map((table) => table.table_name || "");
     await GencodeAPI.importTable(tableNames);
     importVisible.value = false;
-    loadingData(); // 导入成功后刷新已导入的表列表
+    refreshList();
     // 导入成功后自动打开代码生成抽屉
     if (tables.value.length === 1) {
-      // 只导入了一个表，刷新列表后自动打开该表的代码生成
-      await loadingData();
-      const importedTable = tableList.value.find(
-        (t) => t.table_name === tables.value[0].table_name
-      );
+      await nextTick();
+      const list = (unref(contentRef.value?.pageData) ?? []) as GenTableSchema[];
+      const importedTable = list.find((t) => t.table_name === tables.value[0].table_name);
       if (importedTable) {
         await handlePreviewTable(importedTable);
       }
@@ -1513,18 +1456,10 @@ async function handleImportQuery(): Promise<void> {
 
 /** 导入弹窗重置按钮操作 */
 async function handleImportReset(): Promise<void> {
-  if (queryRef.value) {
-    queryRef.value.resetFields();
-  }
+  importQueryRef.value?.resetFields();
   await handleImportQuery();
 }
 
-/** 搜索按钮操作 */
-async function handleQuery(): Promise<void> {
-  queryFormData.page_no = 1;
-  await loadingData();
-}
-
 // 路由和导航
 const route = useRoute();
 
@@ -1535,9 +1470,14 @@ onActivated(async () => {
   const time = route.query.t;
   if (time != null && String(time) !== uniqueId.value) {
     uniqueId.value = String(time);
-    queryFormData.page_no = Number(route.query.page_no || 1);
-    dateRange.value = [];
-    await loadingData();
+    const pageNo = Number(route.query.page_no || 1);
+    await nextTick();
+    if (contentRef.value) {
+      contentRef.value.pagination.currentPage = pageNo;
+      const q = searchRef.value?.getQueryParams() ?? {};
+      const f = contentRef.value.getFilterParams?.() ?? {};
+      contentRef.value.fetchPageData({ ...q, ...f }, false);
+    }
   }
 });
 
@@ -1708,14 +1648,6 @@ async function loadTableDetail(id: number | string) {
     loading.value = false;
   }
 }
-
-// ===== 生命周期函数
-
-/** 组件挂载时 */
-onMounted(() => {
-  // 初始化数据加载
-  loadingData();
-});
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/frontend/src/views/module_monitor/cache/index.vue b/frontend/src/views/module_monitor/cache/index.vue
index 726b1691..3769857a 100644
--- a/frontend/src/views/module_monitor/cache/index.vue
+++ b/frontend/src/views/module_monitor/cache/index.vue
@@ -1,315 +1,324 @@
 <template>
   <div class="app-container">
-    <el-tabs type="border-card">
+    <el-tabs type="border-card" class="cache-page-tabs">
       <!-- 监控信息 Tab -->
       <el-tab-pane class="monitor" label="监控信息">
-        <el-row :gutter="16">
-          <!-- 基本信息 -->
-          <el-col :span="24">
-            <el-card shadow="hover">
-              <template #header>
-                <div class="flex items-center gap-2">
-                  <el-icon>
-                    <Monitor />
-                  </el-icon>
-                  <span>Redis监控信息</span>
-                  <el-tooltip content="展示Redis监控信息详情">
+        <div class="monitor-tab">
+          <el-row :gutter="16">
+            <!-- 基本信息 -->
+            <el-col :span="24">
+              <el-card shadow="hover">
+                <template #header>
+                  <div class="flex items-center gap-2">
                     <el-icon>
-                      <QuestionFilled />
+                      <Monitor />
                     </el-icon>
-                  </el-tooltip>
-                </div>
-              </template>
-              <el-descriptions :column="12" border :direction="'vertical'">
-                <el-descriptions-item label="Redis版本">
-                  {{ cache.info?.redis_version || "-" }}
-                </el-descriptions-item>
-                <el-descriptions-item label="运行模式">
-                  {{ cache.info?.redis_mode === "standalone" ? "单机" : "集群" }}
-                </el-descriptions-item>
-                <el-descriptions-item label="端口">
-                  {{ cache.info?.tcp_port || "-" }}
-                </el-descriptions-item>
-                <el-descriptions-item label="客户端数">
-                  {{ cache.info?.connected_clients || 0 }}
-                </el-descriptions-item>
-                <el-descriptions-item label="运行时间(天)">
-                  {{ cache.info?.uptime_in_days || 0 }}
-                </el-descriptions-item>
-                <el-descriptions-item label="使用内存">
-                  {{ cache.info?.used_memory_human || "-" }}
-                </el-descriptions-item>
-                <el-descriptions-item label="使用CPU">
-                  {{
-                    cache.info?.used_cpu_user_children
-                      ? parseFloat(cache.info.used_cpu_user_children).toFixed(2)
-                      : "-"
-                  }}
-                </el-descriptions-item>
-                <el-descriptions-item label="内存配置">
-                  {{ cache.info?.maxmemory_human || "-" }}
-                </el-descriptions-item>
-                <el-descriptions-item label="AOF是否开启">
-                  {{ cache.info?.aof_enabled === "0" ? "否" : "是" }}
-                </el-descriptions-item>
-                <el-descriptions-item label="RDB是否成功">
-                  {{ cache.info?.rdb_last_bgsave_status || "-" }}
-                </el-descriptions-item>
-                <el-descriptions-item label="Key数量">
-                  {{ cache.db_size || 0 }}
-                </el-descriptions-item>
-                <el-descriptions-item label="网络入口/出口">
-                  {{
-                    `${cache.info?.instantaneous_input_kbps || 0}kps/${cache.info?.instantaneous_output_kbps || 0}kps`
-                  }}
-                </el-descriptions-item>
-              </el-descriptions>
-            </el-card>
-          </el-col>
+                    <span>Redis监控信息</span>
+                    <el-tooltip content="展示Redis监控信息详情">
+                      <el-icon>
+                        <QuestionFilled />
+                      </el-icon>
+                    </el-tooltip>
+                  </div>
+                </template>
+                <el-descriptions :column="12" border :direction="'vertical'">
+                  <el-descriptions-item label="Redis版本">
+                    {{ cache.info?.redis_version || "-" }}
+                  </el-descriptions-item>
+                  <el-descriptions-item label="运行模式">
+                    {{ cache.info?.redis_mode === "standalone" ? "单机" : "集群" }}
+                  </el-descriptions-item>
+                  <el-descriptions-item label="端口">
+                    {{ cache.info?.tcp_port || "-" }}
+                  </el-descriptions-item>
+                  <el-descriptions-item label="客户端数">
+                    {{ cache.info?.connected_clients || 0 }}
+                  </el-descriptions-item>
+                  <el-descriptions-item label="运行时间(天)">
+                    {{ cache.info?.uptime_in_days || 0 }}
+                  </el-descriptions-item>
+                  <el-descriptions-item label="使用内存">
+                    {{ cache.info?.used_memory_human || "-" }}
+                  </el-descriptions-item>
+                  <el-descriptions-item label="使用CPU">
+                    {{
+                      cache.info?.used_cpu_user_children
+                        ? parseFloat(cache.info.used_cpu_user_children).toFixed(2)
+                        : "-"
+                    }}
+                  </el-descriptions-item>
+                  <el-descriptions-item label="内存配置">
+                    {{ cache.info?.maxmemory_human || "-" }}
+                  </el-descriptions-item>
+                  <el-descriptions-item label="AOF是否开启">
+                    {{ cache.info?.aof_enabled === "0" ? "否" : "是" }}
+                  </el-descriptions-item>
+                  <el-descriptions-item label="RDB是否成功">
+                    {{ cache.info?.rdb_last_bgsave_status || "-" }}
+                  </el-descriptions-item>
+                  <el-descriptions-item label="Key数量">
+                    {{ cache.db_size || 0 }}
+                  </el-descriptions-item>
+                  <el-descriptions-item label="网络入口/出口">
+                    {{
+                      `${cache.info?.instantaneous_input_kbps || 0}kps/${cache.info?.instantaneous_output_kbps || 0}kps`
+                    }}
+                  </el-descriptions-item>
+                </el-descriptions>
+              </el-card>
+            </el-col>
+          </el-row>
 
-          <!-- 监控图表 -->
-          <el-col :span="12" class="mt-4">
-            <el-card shadow="hover">
-              <template #header>
-                <div class="flex items-center gap-2">
-                  <el-icon>
-                    <Stopwatch />
-                  </el-icon>
-                  <span class="title">命令统计</span>
-                  <el-tooltip content="展示命令统计详情">
+          <!-- 监控图表：单独一行并占满剩余高度 -->
+          <el-row :gutter="16" class="monitor-charts-row">
+            <el-col :span="12" class="cache-chart-col">
+              <el-card shadow="hover" class="cache-chart-card">
+                <template #header>
+                  <div class="flex items-center gap-2">
                     <el-icon>
-                      <QuestionFilled />
+                      <Stopwatch />
                     </el-icon>
-                  </el-tooltip>
-                </div>
-              </template>
-              <div ref="commandstats" class="chart-container" />
-            </el-card>
-          </el-col>
+                    <span class="title">命令统计</span>
+                    <el-tooltip content="展示命令统计详情">
+                      <el-icon>
+                        <QuestionFilled />
+                      </el-icon>
+                    </el-tooltip>
+                  </div>
+                </template>
+                <div ref="commandstats" class="chart-container" />
+              </el-card>
+            </el-col>
 
-          <el-col :span="12" class="mt-4">
-            <el-card shadow="hover">
-              <template #header>
-                <div class="flex items-center gap-2">
-                  <el-icon>
-                    <Stopwatch />
-                  </el-icon>
-                  <span>内存信息</span>
-                  <el-tooltip content="展示内存信息详情">
+            <el-col :span="12" class="cache-chart-col">
+              <el-card shadow="hover" class="cache-chart-card">
+                <template #header>
+                  <div class="flex items-center gap-2">
                     <el-icon>
-                      <QuestionFilled />
+                      <Stopwatch />
                     </el-icon>
-                  </el-tooltip>
-                </div>
-              </template>
-              <div ref="usedmemory" class="chart-container" />
-            </el-card>
-          </el-col>
-        </el-row>
+                    <span>内存信息</span>
+                    <el-tooltip content="展示内存信息详情">
+                      <el-icon>
+                        <QuestionFilled />
+                      </el-icon>
+                    </el-tooltip>
+                  </div>
+                </template>
+                <div ref="usedmemory" class="chart-container" />
+              </el-card>
+            </el-col>
+          </el-row>
+        </div>
       </el-tab-pane>
 
       <!-- 缓存管理 Tab -->
       <el-tab-pane class="cache" label="缓存管理">
-        <el-row :gutter="16">
-          <!-- 缓存列表 -->
-          <el-col :span="8">
-            <el-card :loading="loading" shadow="hover">
-              <template #header>
-                <div class="flex justify-between items-center">
-                  <div class="flex items-center gap-2">
-                    <el-icon>
-                      <Tickets />
-                    </el-icon>
-                    <span class="flex items-center gap-2">缓存列表</span>
-                    <el-tooltip content="展示缓存列表详情">
+        <div class="cache-mgmt-tab">
+          <el-row :gutter="16" class="cache-mgmt-row">
+            <!-- 缓存列表 -->
+            <el-col :span="8" class="cache-mgmt-col">
+              <el-card :loading="loading" shadow="hover" class="cache-mgmt-card">
+                <template #header>
+                  <div class="flex justify-between items-center">
+                    <div class="flex items-center gap-2">
                       <el-icon>
-                        <QuestionFilled />
+                        <Tickets />
                       </el-icon>
-                    </el-tooltip>
+                      <span class="flex items-center gap-2">缓存列表</span>
+                      <el-tooltip content="展示缓存列表详情">
+                        <el-icon>
+                          <QuestionFilled />
+                        </el-icon>
+                      </el-tooltip>
+                    </div>
+                    <div>
+                      <el-button
+                        v-hasPerm="['module_monitor:cache:query']"
+                        type="primary"
+                        link
+                        icon="RefreshRight"
+                        @click="refreshCacheNames"
+                      />
+                    </div>
                   </div>
-                  <div>
-                    <el-button
-                      v-hasPerm="['module_monitor:cache:query']"
-                      type="primary"
-                      link
-                      icon="RefreshRight"
-                      @click="refreshCacheNames"
-                    />
-                  </div>
-                </div>
-              </template>
-              <el-table
-                :loading="loading"
-                :data="cacheNames"
-                row-key="cache_name"
-                height="calc(100vh - 290px)"
-                max-height="calc(100vh - 290px)"
-                border
-                stripe
-              >
-                <template #empty>
-                  <el-empty :image-size="80" description="暂无数据" />
                 </template>
-                <el-table-column prop="cache_name" label="缓存名称" show-overflow-tooltip>
-                  <template #default="{ row }">
-                    <el-button
-                      v-hasPerm="['module_monitor:cache:query']"
-                      type="primary"
-                      link
-                      @click="getCacheKeyList(row)"
-                    >
-                      {{ row.cache_name }}
-                    </el-button>
+                <el-table
+                  :loading="loading"
+                  :data="cacheNames"
+                  row-key="cache_name"
+                  height="100%"
+                  border
+                  stripe
+                >
+                  <template #empty>
+                    <el-empty :image-size="80" description="暂无数据" />
                   </template>
-                </el-table-column>
-                <el-table-column prop="remark" label="备注" show-overflow-tooltip />
-                <el-table-column label="操作" width="60" align="center">
-                  <template #default="{ row }">
-                    <el-popconfirm
-                      class="box-item"
-                      :title="`确认删除缓存 ${row.cache_name} 吗？`"
-                      placement="top"
-                      @confirm="handleClearCacheName(row)"
-                    >
-                      <template #reference>
-                        <el-button
-                          v-hasPerm="['module_monitor:cache:delete']"
-                          type="danger"
-                          size="small"
-                          link
-                          icon="delete"
-                        />
-                      </template>
-                    </el-popconfirm>
-                  </template>
-                </el-table-column>
-              </el-table>
-            </el-card>
-          </el-col>
+                  <el-table-column prop="cache_name" label="缓存名称" show-overflow-tooltip>
+                    <template #default="{ row }">
+                      <el-button
+                        v-hasPerm="['module_monitor:cache:query']"
+                        type="primary"
+                        link
+                        @click="getCacheKeyList(row)"
+                      >
+                        {{ row.cache_name }}
+                      </el-button>
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="remark" label="备注" show-overflow-tooltip />
+                  <el-table-column label="操作" width="60" align="center">
+                    <template #default="{ row }">
+                      <el-popconfirm
+                        class="box-item"
+                        :title="`确认删除缓存 ${row.cache_name} 吗？`"
+                        placement="top"
+                        @confirm="handleClearCacheName(row)"
+                      >
+                        <template #reference>
+                          <el-button
+                            v-hasPerm="['module_monitor:cache:delete']"
+                            type="danger"
+                            size="small"
+                            link
+                            icon="delete"
+                          />
+                        </template>
+                      </el-popconfirm>
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </el-card>
+            </el-col>
 
-          <!-- 键名列表 -->
-          <el-col :span="8">
-            <el-card :loading="loading" shadow="hover">
-              <template #header>
-                <div class="flex justify-between items-center">
-                  <div class="flex items-center gap-2">
-                    <el-icon>
-                      <Key />
-                    </el-icon>
-                    <span class="flex items-center gap-2">键名列表</span>
-                    <el-tooltip content="展示键名列表详情">
+            <!-- 键名列表 -->
+            <el-col :span="8" class="cache-mgmt-col">
+              <el-card :loading="loading" shadow="hover" class="cache-mgmt-card">
+                <template #header>
+                  <div class="flex justify-between items-center">
+                    <div class="flex items-center gap-2">
                       <el-icon>
-                        <QuestionFilled />
+                        <Key />
                       </el-icon>
-                    </el-tooltip>
+                      <span class="flex items-center gap-2">键名列表</span>
+                      <el-tooltip content="展示键名列表详情">
+                        <el-icon>
+                          <QuestionFilled />
+                        </el-icon>
+                      </el-tooltip>
+                    </div>
+                    <div>
+                      <el-button
+                        v-hasPerm="['module_monitor:cache:query']"
+                        type="primary"
+                        link
+                        icon="RefreshRight"
+                        @click="refreshCacheKeys"
+                      />
+                    </div>
                   </div>
-                  <div>
-                    <el-button
-                      v-hasPerm="['module_monitor:cache:query']"
-                      type="primary"
-                      link
-                      icon="RefreshRight"
-                      @click="refreshCacheKeys"
-                    />
-                  </div>
-                </div>
-              </template>
-              <el-table
-                :loading="subLoading"
-                :data="cacheKeys.map((key) => ({ cacheKey: key }))"
-                height="calc(100vh - 290px)"
-                max-height="calc(100vh - 290px)"
-                row-key="cacheKey"
-                border
-              >
-                <template #empty>
-                  <el-empty :image-size="80" description="暂无数据" />
                 </template>
-                <el-table-column prop="cacheKey" label="缓存键名" show-overflow-tooltip>
-                  <template #default="{ row }">
-                    <el-button
-                      v-hasPerm="['module_monitor:cache:detail']"
-                      type="primary"
-                      link
-                      @click="handleCacheValue(row.cacheKey)"
-                    >
-                      {{ row.cacheKey }}
-                    </el-button>
+                <el-table
+                  :loading="subLoading"
+                  :data="cacheKeys.map((key) => ({ cacheKey: key }))"
+                  height="100%"
+                  row-key="cacheKey"
+                  border
+                >
+                  <template #empty>
+                    <el-empty :image-size="80" description="暂无数据" />
                   </template>
-                </el-table-column>
-                <el-table-column label="操作" width="60" align="center">
-                  <template #default="{ row }">
-                    <el-popconfirm
-                      class="box-item"
-                      :title="`确认删除键 ${row.cacheKey} 吗？`"
-                      placement="top"
-                      @confirm="handleClearCacheKey(row.cacheKey)"
-                    >
-                      <template #reference>
-                        <el-button
-                          v-hasPerm="['module_monitor:cache:delete']"
-                          type="danger"
-                          size="small"
-                          link
-                          icon="delete"
-                        />
-                      </template>
-                    </el-popconfirm>
-                  </template>
-                </el-table-column>
-              </el-table>
-            </el-card>
-          </el-col>
+                  <el-table-column prop="cacheKey" label="缓存键名" show-overflow-tooltip>
+                    <template #default="{ row }">
+                      <el-button
+                        v-hasPerm="['module_monitor:cache:detail']"
+                        type="primary"
+                        link
+                        @click="handleCacheValue(row.cacheKey)"
+                      >
+                        {{ row.cacheKey }}
+                      </el-button>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="操作" width="60" align="center">
+                    <template #default="{ row }">
+                      <el-popconfirm
+                        class="box-item"
+                        :title="`确认删除键 ${row.cacheKey} 吗？`"
+                        placement="top"
+                        @confirm="handleClearCacheKey(row.cacheKey)"
+                      >
+                        <template #reference>
+                          <el-button
+                            v-hasPerm="['module_monitor:cache:delete']"
+                            type="danger"
+                            size="small"
+                            link
+                            icon="delete"
+                          />
+                        </template>
+                      </el-popconfirm>
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </el-card>
+            </el-col>
 
-          <!-- 缓存内容 -->
-          <el-col :span="8">
-            <el-card :loading="loading" shadow="hover">
-              <template #header>
-                <div class="flex justify-between items-center">
-                  <div class="flex items-center gap-2">
-                    <el-icon>
-                      <Key />
-                    </el-icon>
-                    <span class="flex items-center gap-2">缓存内容</span>
-                    <el-tooltip content="展示缓存内容详情">
+            <!-- 缓存内容 -->
+            <el-col :span="8">
+              <el-card :loading="loading" shadow="hover">
+                <template #header>
+                  <div class="flex justify-between items-center">
+                    <div class="flex items-center gap-2">
                       <el-icon>
-                        <QuestionFilled />
+                        <Key />
                       </el-icon>
-                    </el-tooltip>
+                      <span class="flex items-center gap-2">缓存内容</span>
+                      <el-tooltip content="展示缓存内容详情">
+                        <el-icon>
+                          <QuestionFilled />
+                        </el-icon>
+                      </el-tooltip>
+                    </div>
+                    <div>
+                      <el-button
+                        v-hasPerm="['module_monitor:cache:delete']"
+                        type="danger"
+                        link
+                        icon="delete"
+                        @click="handleClearCacheAll"
+                      >
+                        清理全部
+                      </el-button>
+                    </div>
                   </div>
-                  <div>
-                    <el-button
-                      v-hasPerm="['module_monitor:cache:delete']"
-                      type="danger"
-                      link
-                      icon="delete"
-                      @click="handleClearCacheAll"
-                    >
-                      清理全部
-                    </el-button>
-                  </div>
-                </div>
-              </template>
-              <el-form :model="cacheForm" label-suffix=":" label-width="auto" label-position="top">
-                <el-form-item label="缓存名称">
-                  <el-input v-model="cacheForm.cache_name" readonly placeholder="缓存名称" />
-                </el-form-item>
-                <el-form-item label="缓存键名">
-                  <el-input v-model="cacheForm.cache_key" readonly placeholder="缓存键名" />
-                </el-form-item>
-                <el-form-item label="缓存内容">
-                  <el-input
-                    v-model="cacheForm.cache_value"
-                    type="textarea"
-                    :rows="20"
-                    readonly
-                    placeholder="缓存内容"
-                  />
-                </el-form-item>
-              </el-form>
-            </el-card>
-          </el-col>
-        </el-row>
+                </template>
+                <el-form
+                  :model="cacheForm"
+                  label-suffix=":"
+                  label-width="auto"
+                  label-position="top"
+                >
+                  <el-form-item label="缓存名称">
+                    <el-input v-model="cacheForm.cache_name" readonly placeholder="缓存名称" />
+                  </el-form-item>
+                  <el-form-item label="缓存键名">
+                    <el-input v-model="cacheForm.cache_key" readonly placeholder="缓存键名" />
+                  </el-form-item>
+                  <el-form-item label="缓存内容">
+                    <el-input
+                      v-model="cacheForm.cache_value"
+                      type="textarea"
+                      :rows="20"
+                      readonly
+                      placeholder="缓存内容"
+                    />
+                  </el-form-item>
+                </el-form>
+              </el-card>
+            </el-col>
+          </el-row>
+        </div>
       </el-tab-pane>
     </el-tabs>
   </div>
@@ -524,6 +533,11 @@ const initCharts = () => {
 
   commandstatsInstance.setOption(commandStatsOption);
   usedmemoryInstance.setOption(usedMemoryOption);
+
+  void nextTick(() => {
+    commandstatsInstance?.resize();
+    usedmemoryInstance?.resize();
+  });
 };
 
 // 生命周期钩子
@@ -539,7 +553,106 @@ onUnmounted(() => {
 </script>
 
 <style scoped lang="scss">
+/* 与 .app-container 纵向 flex 衔接：tabs 占满剩余高度 */
+.cache-page-tabs {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  width: 100%;
+
+  :deep(.el-tabs__header) {
+    flex-shrink: 0;
+  }
+
+  :deep(.el-tabs__content) {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  :deep(.el-tab-pane) {
+    box-sizing: border-box;
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+  }
+}
+
+.monitor-tab {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  box-sizing: border-box;
+  height: 100%;
+  min-height: 0;
+}
+
+.monitor-charts-row {
+  flex: 1;
+  align-items: stretch;
+  min-height: 0;
+}
+
+.cache-chart-col {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.cache-chart-card {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+
+  :deep(.el-card__body) {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-height: 0;
+  }
+}
+
 .chart-container {
-  height: calc(100vh - 490px);
+  flex: 1;
+  min-height: 200px;
+  height: 100%;
+}
+
+.cache-mgmt-tab {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  height: 100%;
+  min-height: 0;
+}
+
+.cache-mgmt-row {
+  flex: 1;
+  align-items: stretch;
+  min-height: 0;
+}
+
+.cache-mgmt-col {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.cache-mgmt-card {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+
+  :deep(.el-card__body) {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-height: 0;
+  }
 }
 </style>
diff --git a/frontend/src/views/module_monitor/online/index.vue b/frontend/src/views/module_monitor/online/index.vue
index 029d5499..43136001 100644
--- a/frontend/src/views/module_monitor/online/index.vue
+++ b/frontend/src/views/module_monitor/online/index.vue
@@ -1,312 +1,245 @@
 <!-- 在线用户 -->
 <template>
   <div class="app-container">
-    <!-- 搜索区域 -->
-    <el-card class="search-container">
-      <el-form
-        ref="queryFormRef"
-        :model="queryFormData"
-        :inline="true"
-        label-suffix=":"
-        @submit.prevent="handleQuery"
-      >
-        <el-form-item prop="ipaddr" label="IP地址">
-          <el-input v-model="queryFormData.ipaddr" placeholder="请输入IP地址" clearable />
-        </el-form-item>
-        <el-form-item prop="name" label="用户名">
-          <el-input v-model="queryFormData.name" placeholder="请输入用户名" clearable />
-        </el-form-item>
-        <el-form-item prop="login_location" label="登录位置">
-          <el-input v-model="queryFormData.login_location" placeholder="请输入登录位置" clearable />
-        </el-form-item>
-        <!-- 查询、重置、展开/收起按钮 -->
-        <el-form-item class="search-buttons">
-          <el-button
-            v-hasPerm="['module_monitor:online:query']"
-            type="primary"
-            icon="search"
-            native-type="submit"
-          >
-            查询
-          </el-button>
-          <el-button
-            v-hasPerm="['module_monitor:online:query']"
-            icon="refresh"
-            @click="handleResetQuery"
-          >
-            重置
-          </el-button>
-        </el-form-item>
-      </el-form>
-    </el-card>
+    <PageSearch
+      ref="searchRef"
+      :search-config="searchConfig"
+      @query-click="handleQueryClick"
+      @reset-click="handleResetClick"
+    />
 
-    <!-- 内容区域 -->
-    <el-card class="data-table">
-      <!-- 功能区域 -->
-      <div class="data-table__toolbar">
-        <div class="data-table__toolbar--left">
-          <el-row :gutter="10">
-            <el-col :span="1.5">
-              <el-button
-                v-hasPerm="['module_monitor:online:delete']"
-                type="danger"
-                icon="delete"
-                @click="handleClear"
-              >
-                强退所有
-              </el-button>
-            </el-col>
-          </el-row>
-        </div>
+    <PageContent ref="contentRef" :content-config="contentConfig">
+      <!-- eslint-disable-next-line vue/no-unused-vars -- 与 demo 同源解构，本页无批删逻辑 -->
+      <template #toolbar="{ toolbarRight, onToolbar, removeIds, cols }">
+        <CrudToolbarLeft>
+          <el-button
+            v-hasPerm="['module_monitor:online:delete']"
+            type="danger"
+            icon="delete"
+            @click="handleClear"
+          >
+            强退所有
+          </el-button>
+        </CrudToolbarLeft>
         <div class="data-table__toolbar--right">
-          <el-row :gutter="10">
-            <el-col :span="1.5">
-              <el-tooltip content="刷新">
+          <CrudToolbarRight :buttons="toolbarRight" :cols="cols" :on-toolbar="onToolbar" />
+        </div>
+      </template>
+
+      <template #table="{ data, loading, tableRef, onSelectionChange, pagination }">
+        <div class="data-table__content">
+          <el-table
+            :ref="tableRef as any"
+            v-loading="loading"
+            :data="data"
+            height="100%"
+            border
+            stripe
+            @selection-change="onSelectionChange"
+          >
+            <template #empty>
+              <el-empty :image-size="80" description="暂无数据" />
+            </template>
+
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'selection')?.show"
+              type="selection"
+              min-width="55"
+              align="center"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'index')?.show"
+              type="index"
+              fixed
+              label="序号"
+              min-width="60"
+            >
+              <template #default="scope">
+                {{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'session_id')?.show"
+              key="session_id"
+              label="会话编号"
+              prop="session_id"
+              min-width="250"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'login_type')?.show"
+              key="login_type"
+              label="登录类型"
+              prop="login_type"
+              min-width="100"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'ipaddr')?.show"
+              key="ipaddr"
+              label="IP地址"
+              prop="ipaddr"
+              min-width="150"
+              show-overflow-tooltip
+            >
+              <template #default="scope">
+                <el-text>{{ scope.row.ipaddr }}</el-text>
+                <CopyButton
+                  v-if="scope.row.ipaddr"
+                  :text="scope.row.ipaddr"
+                  :style="{ marginLeft: '2px' }"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'name')?.show"
+              key="name"
+              label="用户名"
+              prop="name"
+              min-width="80"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'user_name')?.show"
+              key="user_name"
+              label="账号"
+              prop="user_name"
+              min-width="80"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'login_location')?.show"
+              key="login_location"
+              label="登录位置"
+              prop="login_location"
+              min-width="280"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'os')?.show"
+              key="os"
+              label="操作系统"
+              prop="os"
+              min-width="120"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'login_time')?.show"
+              key="login_time"
+              label="登录时间"
+              prop="login_time"
+              min-width="180"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'operation')?.show"
+              key="operation"
+              fixed="right"
+              label="操作"
+              min-width="100"
+            >
+              <template #default="scope">
                 <el-button
                   v-hasPerm="['module_monitor:online:delete']"
-                  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-scrollbar>
-              </el-popover>
-            </el-col>
-          </el-row>
+                  type="danger"
+                  size="small"
+                  link
+                  icon="delete"
+                  @click="handleSubmit(scope.row.session_id)"
+                >
+                  强退
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
         </div>
-      </div>
-
-      <!-- 表格区域：系统配置列表 -->
-      <div class="data-table__content">
-        <el-table
-          ref="dataTableRef"
-          v-loading="loading"
-          :data="pageTableData"
-          height="calc(100vh - 350px)"
-          max-height="calc(100vh - 350px)"
-          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"
-            type="index"
-            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 === 'session_id')?.show"
-            key="session_id"
-            label="会话编号"
-            prop="session_id"
-            min-width="250"
-            show-overflow-tooltip
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'login_type')?.show"
-            key="login_type"
-            label="登录类型"
-            prop="login_type"
-            min-width="100"
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'ipaddr')?.show"
-            key="ipaddr"
-            label="IP地址"
-            prop="ipaddr"
-            min-width="150"
-            show-overflow-tooltip
-          >
-            <template #default="scope">
-              <el-text>{{ scope.row.ipaddr }}</el-text>
-              <CopyButton
-                v-if="scope.row.ipaddr"
-                :text="scope.row.ipaddr"
-                :style="{ marginLeft: '2px' }"
-              />
-            </template>
-          </el-table-column>
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'name')?.show"
-            key="name"
-            label="用户名"
-            prop="name"
-            min-width="80"
-            show-overflow-tooltip
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'user_name')?.show"
-            key="user_name"
-            label="账号"
-            prop="user_name"
-            min-width="80"
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'login_location')?.show"
-            key="login_location"
-            label="登录位置"
-            prop="login_location"
-            min-width="280"
-            show-overflow-tooltip
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'os')?.show"
-            key="os"
-            label="操作系统"
-            prop="os"
-            min-width="120"
-            show-overflow-tooltip
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'login_time')?.show"
-            key="login_time"
-            label="登录时间"
-            prop="login_time"
-            min-width="180"
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'operation')?.show"
-            key="operation"
-            fixed="right"
-            label="操作"
-            min-width="100"
-          >
-            <template #default="scope">
-              <el-button
-                v-hasPerm="['module_monitor:online:delete']"
-                type="danger"
-                size="small"
-                link
-                icon="delete"
-                @click="handleSubmit(scope.row.session_id)"
-              >
-                强退
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-
-      <!-- 分页区域 -->
-      <template #footer>
-        <pagination
-          v-model:total="total"
-          v-model:page="queryFormData.page_no"
-          v-model:limit="queryFormData.page_size"
-          @pagination="loadingData"
-        />
       </template>
-    </el-card>
+    </PageContent>
   </div>
 </template>
 
 <script lang="ts" setup>
 defineOptions({
-  name: "Notice",
+  name: "OnlineUser",
   inheritAttrs: false,
 });
 
-import OnlineAPI, {
-  type OnlineUserPageQuery,
-  type OnlineUserTable,
-} from "@/api/module_monitor/online";
+import OnlineAPI, { type OnlineUserPageQuery } from "@/api/module_monitor/online";
+import { reactive } from "vue";
+import CrudToolbarLeft from "@/components/CURD/CrudToolbarLeft.vue";
+import CrudToolbarRight from "@/components/CURD/CrudToolbarRight.vue";
+import PageSearch from "@/components/CURD/PageSearch.vue";
+import PageContent from "@/components/CURD/PageContent.vue";
+import { useCrudList } from "@/components/CURD/useCrudList";
+import type { ISearchConfig, IContentConfig } from "@/components/CURD/types";
 
-const queryFormRef = ref();
-const total = ref(0);
-const selectIds = ref<number[]>([]);
-const loading = ref(false);
+const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
 
-// 分页表单
-const pageTableData = ref<OnlineUserTable[]>([]);
-
-// 表格列配置
-const tableColumns = ref([
-  { label: "选择框", prop: "selection", show: true },
-  { label: "序号", prop: "index", show: true },
-  { label: "会话编号", prop: "session_id", show: true },
-  { label: "登录类型", prop: "login_type", show: true },
-  { label: "登录名称", prop: "name", show: true },
-  { label: "用户账号", prop: "user_name", show: true },
-  { label: "主机", prop: "ipaddr", show: true },
-  { label: "登录地点", prop: "login_location", show: true },
-  { label: "操作系统", prop: "os", show: true },
-  { label: "登录时间", prop: "login_time", show: true },
-  { label: "操作", prop: "operation", show: true },
-]);
-
-// 分页查询参数
-const queryFormData = reactive<OnlineUserPageQuery>({
-  page_no: 1,
-  page_size: 10,
-  name: undefined,
-  login_location: undefined,
-  ipaddr: undefined,
+const searchConfig = reactive<ISearchConfig>({
+  permPrefix: "module_monitor:online",
+  colon: true,
+  isExpandable: false,
+  showNumber: 3,
+  form: { labelWidth: "auto" },
+  formItems: [
+    {
+      prop: "ipaddr",
+      label: "IP地址",
+      type: "input",
+      attrs: { placeholder: "请输入IP地址", clearable: true },
+    },
+    {
+      prop: "name",
+      label: "用户名",
+      type: "input",
+      attrs: { placeholder: "请输入用户名", clearable: true },
+    },
+    {
+      prop: "login_location",
+      label: "登录位置",
+      type: "input",
+      attrs: { placeholder: "请输入登录位置", clearable: true },
+    },
+  ],
 });
 
-// 列表刷新
-async function handleRefresh() {
-  await loadingData();
-}
+const contentCols = reactive<
+  Array<{
+    prop?: string;
+    label?: string;
+    show?: boolean;
+  }>
+>([
+  { prop: "selection", label: "选择框", show: true },
+  { prop: "index", label: "序号", show: true },
+  { prop: "session_id", label: "会话编号", show: true },
+  { prop: "login_type", label: "登录类型", show: true },
+  { prop: "name", label: "登录名称", show: true },
+  { prop: "user_name", label: "用户账号", show: true },
+  { prop: "ipaddr", label: "主机", show: true },
+  { prop: "login_location", label: "登录地点", show: true },
+  { prop: "os", label: "操作系统", show: true },
+  { prop: "login_time", label: "登录时间", show: true },
+  { prop: "operation", label: "操作", show: true },
+]);
 
-// 加载表格数据
-async function loadingData() {
-  loading.value = true;
-  try {
-    const response = await OnlineAPI.listOnline(queryFormData);
-    pageTableData.value = response.data.data.items;
-    total.value = response.data.data.total;
-  } catch (error: any) {
-    console.error(error);
-  } finally {
-    loading.value = false;
-  }
-}
+const contentConfig = reactive<IContentConfig<OnlineUserPageQuery>>({
+  permPrefix: "module_monitor:online",
+  cols: contentCols as IContentConfig["cols"],
+  hideColumnFilter: false,
+  toolbar: [],
+  defaultToolbar: ["refresh", "filter"],
+  pagination: {
+    pageSize: 10,
+    pageSizes: [10, 20, 30, 50],
+  },
+  request: { page_no: "page_no", page_size: "page_size" },
+  indexAction: async (params) => {
+    const res = await OnlineAPI.listOnline(params as OnlineUserPageQuery);
+    return {
+      total: res.data.data.total,
+      list: res.data.data.items,
+    };
+  },
+});
 
-// 查询（重置页码后获取数据）
-async function handleQuery() {
-  queryFormData.page_no = 1;
-  loadingData();
-}
-
-// 重置查询
-async function handleResetQuery() {
-  queryFormRef.value.resetFields();
-  queryFormData.page_no = 1;
-  loadingData();
-}
-
-// 行复选框选中项变化
-async function handleSelectionChange(selection: any) {
-  selectIds.value = selection.map((item: any) => item.id);
-}
-
-// 强制退出
 async function handleSubmit(session_id: string) {
   ElMessageBox.confirm(`确认强制退出会话 ${session_id}?`, "警告", {
     confirmButtonText: "确定",
@@ -315,13 +248,10 @@ async function handleSubmit(session_id: string) {
   })
     .then(async () => {
       try {
-        loading.value = true;
         await OnlineAPI.deleteOnline(session_id);
-        handleResetQuery();
-      } catch (error: any) {
+        refreshList();
+      } catch (error: unknown) {
         console.error(error);
-      } finally {
-        loading.value = false;
       }
     })
     .catch(() => {
@@ -329,7 +259,6 @@ async function handleSubmit(session_id: string) {
     });
 }
 
-// 强退所有
 async function handleClear() {
   ElMessageBox.confirm("确认强制退出所有用户?", "警告", {
     confirmButtonText: "确定",
@@ -338,22 +267,16 @@ async function handleClear() {
   })
     .then(async () => {
       try {
-        loading.value = true;
         await OnlineAPI.clearOnline();
-        handleResetQuery();
-      } catch (error: any) {
+        refreshList();
+      } catch (error: unknown) {
         console.error(error);
-      } finally {
-        loading.value = false;
       }
     })
     .catch(() => {
       ElMessageBox.close();
     });
 }
-onMounted(() => {
-  loadingData();
-});
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/frontend/src/views/module_monitor/resource/index.vue b/frontend/src/views/module_monitor/resource/index.vue
index d7b6f998..3f23e840 100644
--- a/frontend/src/views/module_monitor/resource/index.vue
+++ b/frontend/src/views/module_monitor/resource/index.vue
@@ -1,45 +1,13 @@
 <template>
   <div class="app-container">
-    <!-- 搜索区域 -->
-    <el-card class="search-container">
-      <el-form
-        ref="queryFormRef"
-        :model="queryFormData"
-        :inline="true"
-        label-suffix=":"
-        @submit.prevent="handleQuery"
-      >
-        <el-form-item prop="name" label="关键词">
-          <el-input
-            v-model="queryFormData.name"
-            placeholder="请输入文件名或目录名"
-            clearable
-            style="width: 200px"
-            @keyup.enter="handleQuery"
-          />
-        </el-form-item>
-        <el-form-item class="search-buttons">
-          <el-button
-            v-hasPerm="['module_monitor:resource:query']"
-            type="primary"
-            icon="search"
-            native-type="submit"
-          >
-            查询
-          </el-button>
-          <el-button
-            v-hasPerm="['module_monitor:resource:query']"
-            icon="refresh"
-            @click="handleResetQuery"
-          >
-            重置
-          </el-button>
-        </el-form-item>
-      </el-form>
-    </el-card>
+    <PageSearch
+      ref="searchRef"
+      :search-config="searchConfig"
+      @query-click="handleQueryClick"
+      @reset-click="handleResetClick"
+    />
 
-    <!-- 内容区域 -->
-    <el-card class="data-table">
+    <PageContent ref="contentRef" :content-config="contentConfig">
       <template #header>
         <div class="card-header">
           <span>
@@ -48,7 +16,6 @@
             </el-tooltip>
             文件列表(当前路径)：
           </span>
-          <!-- 资源路径 -->
           <div class="breadcrumb-container">
             <span class="breadcrumb-label"></span>
             <el-breadcrumb separator="/">
@@ -65,9 +32,8 @@
         </div>
       </template>
 
-      <!-- 功能区域 -->
-      <div class="data-table__toolbar">
-        <div class="data-table__toolbar--left">
+      <template #toolbar="{ toolbarRight, onToolbar, removeIds, cols }">
+        <CrudToolbarLeft :remove-ids="removeIds">
           <el-row :gutter="10">
             <el-col :span="1.5">
               <el-button
@@ -94,183 +60,123 @@
                 v-hasPerm="['module_monitor:resource:delete']"
                 type="danger"
                 icon="delete"
-                :disabled="selectedItems.length === 0"
+                :disabled="removeIds.length === 0"
                 @click="handleBatchDelete"
               >
                 批量删除
               </el-button>
             </el-col>
           </el-row>
-        </div>
-        <div class="data-table__toolbar--right">
-          <el-row :gutter="10">
-            <el-col :span="1.5">
-              <el-checkbox
-                v-model="showHiddenFiles"
-                v-hasPerm="['module_monitor:resource:query']"
-                @change="handleShowHiddenChange"
-              >
-                显示隐藏文件
-              </el-checkbox>
-            </el-col>
-            <el-col :span="1.5">
-              <el-button-group>
-                <el-button
-                  v-hasPerm="['module_monitor:resource:query']"
-                  :type="viewMode === 'list' ? 'primary' : ''"
-                  @click="viewMode = 'list'"
-                >
-                  <el-icon><List /></el-icon>
-                </el-button>
-                <el-button
-                  v-hasPerm="['module_monitor:resource:query']"
-                  :type="viewMode === 'grid' ? 'primary' : ''"
-                  @click="viewMode = 'grid'"
-                >
-                  <el-icon><Grid /></el-icon>
-                </el-button>
-              </el-button-group>
-            </el-col>
-            <el-col :span="1.5">
-              <el-tooltip content="刷新">
-                <el-button
-                  v-hasPerm="['module_monitor:resource:query']"
-                  type="primary"
-                  icon="refresh"
-                  circle
-                  @click="handleRefresh"
-                />
-              </el-tooltip>
-            </el-col>
-          </el-row>
-        </div>
-      </div>
-
-      <!-- 表格区域 -->
-      <div v-if="viewMode === 'list'" class="data-table__content">
-        <el-table
-          ref="dataTableRef"
-          v-loading="loading"
-          :data="fileList"
-          row-key="file_url"
-          height="calc(100vh - 350px)"
-          max-height="calc(100vh - 350px)"
-          border
-          stripe
-          @selection-change="handleSelectionChange"
-        >
-          <template #empty>
-            <el-empty :image-size="80" description="暂无数据" />
-          </template>
-          <el-table-column type="selection" min-width="40" align="center" />
-          <el-table-column type="index" fixed label="序号" min-width="50">
-            <template #default="scope">
-              {{ (queryFormData.page_no - 1) * queryFormData.page_size + scope.$index + 1 }}
-            </template>
-          </el-table-column>
-          <el-table-column label="名称" prop="name" min-width="200">
-            <template #default="{ row }">
-              <div class="file-name">
-                <el-icon class="file-icon">
-                  <Folder v-if="row.is_dir" />
-                  <Document v-else />
-                </el-icon>
-                <span :class="{ 'file-name-clickable': true }" @click="handleFileNameClick(row)">
-                  {{ row.name }}
-                </span>
-              </div>
-            </template>
-          </el-table-column>
-          <el-table-column label="大小" prop="size" min-width="120" align="center">
-            <template #default="{ row }">
-              <span v-if="!row.is_dir">{{ formatFileSize(row.size) }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="修改时间" prop="modified_time" min-width="180" sortable />
-          <el-table-column
-            fixed="right"
-            label="操作"
-            align="center"
-            min-width="200"
-            class="search-buttons"
+        </CrudToolbarLeft>
+        <div class="data-table__toolbar--right flex flex-wrap items-center gap-3">
+          <el-checkbox
+            v-model="showHiddenFiles"
+            v-hasPerm="['module_monitor:resource:query']"
+            @change="onShowHiddenChange"
           >
-            <template #default="{ row }">
-              <el-button
-                v-if="!row.is_dir"
-                v-hasPerm="['module_monitor:resource:download']"
-                type="success"
-                size="small"
-                link
-                icon="download"
-                @click="handleDownload(row)"
-              >
-                下载
-              </el-button>
-              <el-button
-                v-hasPerm="['module_monitor:resource:rename']"
-                type="primary"
-                size="small"
-                link
-                icon="edit"
-                @click="handleRename(row)"
-              >
-                重命名
-              </el-button>
-              <el-button
-                v-hasPerm="['module_monitor:resource:delete']"
-                type="danger"
-                size="small"
-                link
-                icon="delete"
-                @click="handleDelete(row)"
-              >
-                删除
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-
-      <!-- 网格视图 -->
-      <div v-else class="grid-view">
-        <div
-          v-for="item in fileList"
-          :key="item.file_url"
-          class="grid-item"
-          @click="handleItemClick(item)"
-        >
-          <div class="item-icon">
-            <el-icon v-if="item.is_dir" size="48">
-              <Folder />
-            </el-icon>
-            <el-icon v-else size="48">
-              <Document />
-            </el-icon>
-          </div>
-          <div class="item-name">{{ item.name }}</div>
-          <div v-if="!item.is_dir" class="item-size">
-            {{ formatFileSize(item.size) }}
-          </div>
+            显示隐藏文件
+          </el-checkbox>
+          <CrudToolbarRight :buttons="toolbarRight" :cols="cols" :on-toolbar="onToolbar" />
         </div>
-      </div>
-
-      <!-- 分页区域 -->
-      <template #footer>
-        <Pagination
-          v-model:total="total"
-          v-model:page="pagination.page_no"
-          v-model:limit="pagination.page_size"
-          @pagination="handlePagination"
-        />
       </template>
-    </el-card>
+
+      <template #table="{ data, loading: tableLoading, tableRef, onSelectionChange, pagination }">
+        <div class="data-table__content">
+          <el-table
+            :ref="tableRef as any"
+            v-loading="tableLoading"
+            row-key="file_url"
+            :data="data"
+            height="100%"
+            border
+            stripe
+            @selection-change="
+              (s) => {
+                handleSelectionChange(s as ResourceItem[]);
+                onSelectionChange(s);
+              }
+            "
+          >
+            <template #empty>
+              <el-empty :image-size="80" description="暂无数据" />
+            </template>
+            <el-table-column type="selection" min-width="40" align="center" />
+            <el-table-column type="index" fixed label="序号" min-width="50">
+              <template #default="scope">
+                {{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}
+              </template>
+            </el-table-column>
+            <el-table-column label="名称" prop="name" min-width="200">
+              <template #default="{ row }">
+                <div class="file-name">
+                  <el-icon class="file-icon">
+                    <Folder v-if="row.is_dir" />
+                    <Document v-else />
+                  </el-icon>
+                  <span class="file-name-clickable" @click="handleFileNameClick(row)">
+                    {{ row.name }}
+                  </span>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="大小" prop="size" min-width="120" align="center">
+              <template #default="{ row }">
+                <span v-if="!row.is_dir">{{ formatFileSize(row.size) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="修改时间" prop="modified_time" min-width="180" sortable />
+            <el-table-column
+              fixed="right"
+              label="操作"
+              align="center"
+              min-width="200"
+              class-name="search-buttons"
+            >
+              <template #default="{ row }">
+                <el-button
+                  v-if="!row.is_dir"
+                  v-hasPerm="['module_monitor:resource:download']"
+                  type="success"
+                  size="small"
+                  link
+                  icon="download"
+                  @click="handleDownload(row)"
+                >
+                  下载
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_monitor:resource:rename']"
+                  type="primary"
+                  size="small"
+                  link
+                  icon="edit"
+                  @click="handleRename(row)"
+                >
+                  重命名
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_monitor:resource:delete']"
+                  type="danger"
+                  size="small"
+                  link
+                  icon="delete"
+                  @click="handleDelete(row)"
+                >
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </template>
+    </PageContent>
 
     <!-- 上传对话框 -->
-    <el-dialog
+    <EnhancedDialog
       v-model="uploadDialogVisible"
       title="上传文件"
       width="500px"
-      :before-close="handleUploadClose"
+      @close="handleUploadClose"
     >
       <el-upload
         ref="uploadRef"
@@ -302,10 +208,10 @@
           确定上传
         </el-button>
       </template>
-    </el-dialog>
+    </EnhancedDialog>
 
     <!-- 新建文件夹对话框 -->
-    <el-dialog v-model="createDirDialogVisible" title="新建文件夹" width="400px">
+    <EnhancedDialog v-model="createDirDialogVisible" title="新建文件夹" width="400px">
       <el-form :model="createDirForm" label-width="80px">
         <el-form-item label="文件夹名" required>
           <el-input
@@ -325,10 +231,10 @@
           确定
         </el-button>
       </template>
-    </el-dialog>
+    </EnhancedDialog>
 
     <!-- 重命名对话框 -->
-    <el-dialog v-model="renameDialogVisible" title="重命名" width="400px">
+    <EnhancedDialog v-model="renameDialogVisible" title="重命名" width="400px">
       <el-form :model="renameForm" label-width="80px">
         <el-form-item label="新名称" required>
           <el-input
@@ -348,7 +254,7 @@
           确定
         </el-button>
       </template>
-    </el-dialog>
+    </EnhancedDialog>
   </div>
 </template>
 
@@ -358,62 +264,84 @@ defineOptions({
   inheritAttrs: false,
 });
 
-import { ref, reactive, onMounted, computed } from "vue";
+import { ref, reactive } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
-import {
-  List,
-  Grid,
-  Folder,
-  Document,
-  UploadFilled,
-  QuestionFilled,
-} from "@element-plus/icons-vue";
+import { Folder, Document, UploadFilled, QuestionFilled } from "@element-plus/icons-vue";
 import {
   ResourceAPI,
   type ResourceItem,
   type ResourcePageQuery,
 } from "@/api/module_monitor/resource";
+import CrudToolbarLeft from "@/components/CURD/CrudToolbarLeft.vue";
+import CrudToolbarRight from "@/components/CURD/CrudToolbarRight.vue";
+import PageSearch from "@/components/CURD/PageSearch.vue";
+import PageContent from "@/components/CURD/PageContent.vue";
+import EnhancedDialog from "@/components/CURD/EnhancedDialog.vue";
+import { useCrudList } from "@/components/CURD/useCrudList";
+import type { IContentConfig, ISearchConfig } from "@/components/CURD/types";
 
-// 分页表单
-const fileList = ref<ResourceItem[]>([]);
+const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
 
-// 响应式数据
-const loading = ref(false);
 const selectedItems = ref<ResourceItem[]>([]);
 const breadcrumbList = ref([{ name: "资源根目录", path: "/" }]);
 const showHiddenFiles = ref(false);
-const viewMode = ref<"list" | "grid">("list");
-const total = ref(0);
-const isSearchMode = ref(false); // 用于标记是否处于搜索模式
-const queryFormRef = ref();
 
-// 路径相关数据
-const currentPath = ref("/"); // 当前路径的响应式变量
+const currentPath = ref("/");
 
-// 分页查询参数
-const pagination = reactive({
-  page_no: 1,
-  page_size: 10,
+const searchConfig = reactive<ISearchConfig>({
+  permPrefix: "module_monitor:resource",
+  colon: true,
+  isExpandable: false,
+  showNumber: 3,
+  form: { labelWidth: "auto" },
+  searchButtonPerm: "module_monitor:resource:query",
+  resetButtonPerm: "module_monitor:resource:query",
+  formItems: [
+    {
+      prop: "name",
+      label: "关键词",
+      type: "input",
+      attrs: { placeholder: "请输入文件名或目录名", clearable: true, style: { width: "200px" } },
+    },
+  ],
 });
 
-// 搜索表单数据
-const queryFormData = reactive<ResourcePageQuery>({
-  name: undefined,
-  page_no: 1,
-  page_size: 10,
+const contentConfig = reactive<IContentConfig<ResourcePageQuery>>({
+  permPrefix: "module_monitor:resource",
+  cols: [],
+  hideColumnFilter: true,
+  toolbar: [],
+  defaultToolbar: ["refresh"],
+  pk: "file_url",
+  pagination: {
+    pageSize: 10,
+    pageSizes: [10, 20, 30, 50],
+  },
+  request: { page_no: "page_no", page_size: "page_size" },
+  indexAction: async (params) => {
+    const merged: ResourcePageQuery = {
+      ...(params as ResourcePageQuery),
+      include_hidden: showHiddenFiles.value,
+    };
+    if (currentPath.value && currentPath.value !== "/") {
+      merged.path = currentPath.value;
+    }
+    const res = await ResourceAPI.listResource(merged);
+    return {
+      total: res.data.data.total,
+      list: res.data.data.items,
+    };
+  },
 });
 
-// 对话框状态
 const uploadDialogVisible = ref(false);
 const createDirDialogVisible = ref(false);
 const renameDialogVisible = ref(false);
 const uploading = ref(false);
 
-// 上传相关
 const uploadRef = ref();
 const uploadFileList = ref<any[]>([]);
 
-// 表单数据
 const createDirForm = reactive({
   dir_name: "",
 });
@@ -423,77 +351,18 @@ const renameForm = reactive({
   old_path: "",
 });
 
-// 计算属性
-const currentQuery = computed(() => {
-  // 构建查询参数
-  const query: any = {
-    include_hidden: showHiddenFiles.value,
-    page_no: pagination.page_no,
-    page_size: pagination.page_size,
-  };
-
-  // 如果当前路径不是根路径，则添加路径参数
-  if (currentPath.value && currentPath.value !== "/") {
-    // 对于文件夹导航，直接传递文件夹名称
-    query.path = currentPath.value;
-  }
-
-  // 添加搜索关键词
-  if (queryFormData.name) {
-    query.name = queryFormData.name;
-  }
-
-  return query;
-});
-
-// 加载文件列表
-async function loadFileList() {
-  loading.value = true;
-  try {
-    const response = await ResourceAPI.listResource(currentQuery.value);
-
-    // 正确处理后端返回的分页数据结构
-    const pageResult = response.data?.data;
-
-    if (pageResult && Array.isArray(pageResult.items)) {
-      fileList.value = pageResult.items;
-      total.value = pageResult.total;
-      if (pageResult.page_no !== undefined) {
-        pagination.page_no = pageResult.page_no;
-      }
-      if (pageResult.page_size !== undefined) {
-        pagination.page_size = pageResult.page_size;
-      }
-    } else {
-      fileList.value = [];
-      total.value = 0;
-    }
-  } catch (error) {
-    console.error("Load file list error:", error);
-    fileList.value = [];
-    total.value = 0;
-  } finally {
-    loading.value = false;
-  }
-}
-
-// 面包屑点击处理
-function handleBreadcrumbClick(item: any) {
-  // 更新当前路径为点击的面包屑项路径
+function handleBreadcrumbClick(item: { path: string }) {
   currentPath.value = item.path;
   updateBreadcrumb();
-  loadFileList();
+  refreshList();
 }
 
-// 更新面包屑路径
 function updateBreadcrumb() {
-  // 对于根路径，直接显示根目录
   if (currentPath.value === "/") {
     breadcrumbList.value = [{ name: "资源根目录", path: "/" }];
     return;
   }
 
-  // 对于嵌套路径，需要分解并构建面包屑
   const parts = currentPath.value.split("/").filter((part) => part !== "");
 
   breadcrumbList.value = [
@@ -505,73 +374,43 @@ function updateBreadcrumb() {
   ];
 }
 
-// 文件名点击处理
 function handleFileNameClick(row: ResourceItem) {
   if (row.is_dir) {
-    // 如果当前在根路径，则直接使用文件夹名称
-    // 如果当前已在某个文件夹中，则拼接路径
     if (currentPath.value === "/") {
       currentPath.value = row.name;
     } else {
       currentPath.value = currentPath.value + "/" + row.name;
     }
     updateBreadcrumb();
-    loadFileList();
+    refreshList();
   } else {
-    // 文件预览，使用后端返回的完整URL
     handleFilePreview(row);
   }
 }
 
-// 网格视图项目点击处理
-function handleItemClick(item: ResourceItem) {
-  if (item.is_dir) {
-    // 如果当前在根路径，则直接使用文件夹名称
-    // 如果当前已在某个文件夹中，则拼接路径
-    if (currentPath.value === "/") {
-      currentPath.value = item.name;
-    } else {
-      currentPath.value = currentPath.value + "/" + item.name;
-    }
-    updateBreadcrumb();
-    loadFileList();
-  } else {
-    // 文件预览，使用后端返回的完整URL
-    handleFilePreview(item);
-  }
-}
-
-// 文件预览
 function handleFilePreview(file: ResourceItem) {
-  // 直接使用file_url字段进行预览
   let previewUrl = file.file_url;
 
-  // 如果是相对路径，构建完整URL
   if (previewUrl && !previewUrl.startsWith("http")) {
     previewUrl = `${window.location.origin}${previewUrl}`;
   }
 
-  // 所有文件类型统一直接打开预览
   window.open(previewUrl, "_blank");
 }
 
-// 选择项变化处理
 function handleSelectionChange(selection: ResourceItem[]) {
   selectedItems.value = selection;
 }
 
-// 打开上传对话框
 function handleUpload() {
   uploadDialogVisible.value = true;
   uploadFileList.value = [];
 }
 
-// 上传文件变化处理
-function handleUploadChange(file: any, fileList: any[]) {
-  uploadFileList.value = fileList;
+function handleUploadChange(_file: unknown, fileList: unknown[]) {
+  uploadFileList.value = fileList as any[];
 }
 
-// 确认上传文件
 async function handleUploadConfirm() {
   if (uploadFileList.value.length === 0) {
     ElMessage.warning("请选择要上传的文件");
@@ -581,17 +420,17 @@ async function handleUploadConfirm() {
   try {
     uploading.value = true;
     const formData = new FormData();
-    uploadFileList.value.forEach((file: any) => {
-      formData.append("file", file.raw);
+    uploadFileList.value.forEach((file: { raw?: Blob }) => {
+      const raw = file.raw;
+      if (raw) formData.append("file", raw);
     });
 
-    // 在根目录时传递空字符串作为target_path，与后端relative_path格式保持一致
     const targetPath = currentPath.value === "/" ? "" : currentPath.value;
     formData.append("target_path", targetPath);
 
     await ResourceAPI.uploadFile(formData);
     uploadDialogVisible.value = false;
-    loadFileList();
+    refreshList();
   } catch (error) {
     console.error("Upload error:", error);
   } finally {
@@ -599,19 +438,16 @@ async function handleUploadConfirm() {
   }
 }
 
-// 关闭上传对话框
 function handleUploadClose() {
   uploadDialogVisible.value = false;
   uploadFileList.value = [];
 }
 
-// 打开新建目录对话框
 function handleCreateDir() {
   createDirForm.dir_name = "";
   createDirDialogVisible.value = true;
 }
 
-// 确认创建目录
 async function handleCreateDirConfirm() {
   if (!createDirForm.dir_name.trim()) {
     ElMessage.warning("请输入文件夹名称");
@@ -619,47 +455,24 @@ async function handleCreateDirConfirm() {
   }
 
   try {
-    // 在根目录时传递空字符串作为parent_path，与后端relative_path格式保持一致
     const parentPath = currentPath.value === "/" ? "" : currentPath.value;
     await ResourceAPI.createDirectory({
       parent_path: parentPath,
       dir_name: createDirForm.dir_name.trim(),
     });
     createDirDialogVisible.value = false;
-    loadFileList();
+    refreshList();
   } catch (error) {
     console.error("Create directory error:", error);
   }
 }
 
-// 列表刷新
-async function handleRefresh() {
-  await loadFileList();
+function onShowHiddenChange() {
+  refreshList();
 }
 
-// 查询（重置页码后获取数据）
-async function handleQuery() {
-  queryFormData.page_no = 1;
-  await loadFileList();
-}
-
-// 重置查询
-async function handleResetQuery() {
-  queryFormRef.value.resetFields();
-  queryFormData.page_no = 1;
-  isSearchMode.value = false; // 退出搜索模式
-  await loadFileList();
-}
-
-// 显示隐藏文件切换
-function handleShowHiddenChange() {
-  loadFileList();
-}
-
-// 文件下载
 async function handleDownload(item: ResourceItem) {
   try {
-    // 使用file_url字段
     const response = await ResourceAPI.downloadFile(item.file_url);
     const blob = response.data;
     const url = window.URL.createObjectURL(blob);
@@ -675,15 +488,12 @@ async function handleDownload(item: ResourceItem) {
   }
 }
 
-// 打开重命名对话框
 function handleRename(item: ResourceItem) {
-  // 使用file_url字段
   renameForm.old_path = item.file_url;
   renameForm.new_name = item.name;
   renameDialogVisible.value = true;
 }
 
-// 确认重命名
 async function handleRenameConfirm() {
   if (!renameForm.new_name.trim()) {
     ElMessage.warning("请输入新名称");
@@ -696,13 +506,12 @@ async function handleRenameConfirm() {
       new_name: renameForm.new_name.trim(),
     });
     renameDialogVisible.value = false;
-    loadFileList();
+    refreshList();
   } catch (error) {
     console.error("Rename error:", error);
   }
 }
 
-// 文件删除
 async function handleDelete(item: ResourceItem) {
   try {
     await ElMessageBox.confirm(`确定要删除 ${item.name} 吗？`, "确认删除", {
@@ -711,9 +520,8 @@ async function handleDelete(item: ResourceItem) {
       type: "warning",
     });
 
-    // 使用file_url字段
     await ResourceAPI.deleteResource([item.file_url]);
-    loadFileList();
+    refreshList();
   } catch (error) {
     if (error !== "cancel") {
       console.error("Delete error:", error);
@@ -721,14 +529,6 @@ async function handleDelete(item: ResourceItem) {
   }
 }
 
-// 分页处理
-function handlePagination(params: { page: number; limit: number }) {
-  pagination.page_no = params.page;
-  pagination.page_size = params.limit;
-  loadFileList();
-}
-
-// 批量删除
 async function handleBatchDelete() {
   if (selectedItems.value.length === 0) {
     ElMessage.warning("请选择要删除的文件");
@@ -746,11 +546,10 @@ async function handleBatchDelete() {
       }
     );
 
-    // 使用file_url字段
     const paths = selectedItems.value.map((item) => item.file_url);
 
     await ResourceAPI.deleteResource(paths);
-    loadFileList();
+    refreshList();
   } catch (error) {
     if (error !== "cancel") {
       console.error("Batch delete error:", error);
@@ -758,7 +557,6 @@ async function handleBatchDelete() {
   }
 }
 
-// 格式化文件大小
 function formatFileSize(size?: number | null) {
   if (!size || size === null) return "-";
   const units = ["B", "KB", "MB", "GB", "TB"];
@@ -772,11 +570,6 @@ function formatFileSize(size?: number | null) {
 
   return `${fileSize.toFixed(1)} ${units[unitIndex]}`;
 }
-
-// 生命周期
-onMounted(() => {
-  loadFileList();
-});
 </script>
 
 <style lang="scss" scoped>
@@ -803,30 +596,6 @@ onMounted(() => {
   }
 }
 
-.grid-view {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-  gap: 20px;
-  height: calc(100vh - 200px);
-
-  .grid-item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    cursor: pointer;
-    // 使用系统主题颜色
-    border-radius: 8px;
-    transition: all 0.3s;
-
-    .item-name {
-      margin-bottom: 5px;
-      font-size: 14px;
-      text-align: center;
-      word-break: break-all;
-    }
-  }
-}
-
 :deep(.el-breadcrumb__item) {
   &.is-link {
     color: var(--el-color-primary);
diff --git a/frontend/src/views/module_system/dept/index.vue b/frontend/src/views/module_system/dept/index.vue
index 9666248a..fea6e536 100644
--- a/frontend/src/views/module_system/dept/index.vue
+++ b/frontend/src/views/module_system/dept/index.vue
@@ -1,288 +1,176 @@
 <!-- 部门配置 -->
 <template>
   <div class="app-container">
-    <!-- 搜索区域 -->
-    <el-card class="search-container">
-      <el-form
-        ref="queryFormRef"
-        :model="queryFormData"
-        :inline="true"
-        label-suffix=":"
-        @submit.prevent="handleQuery"
-      >
-        <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="0" label="启用" />
-            <el-option value="1" 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="['module_system:dept:query']"
-            type="primary"
-            icon="search"
-            native-type="submit"
-          >
-            查询
-          </el-button>
-          <el-button
-            v-hasPerm="['module_system:dept: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>
-    </el-card>
+    <PageSearch
+      ref="searchRef"
+      :search-config="searchConfig"
+      @query-click="handleQueryClick"
+      @reset-click="handleResetClick"
+    />
 
-    <!-- 内容区域 -->
-    <el-card class="data-table">
-      <!-- 功能区域 -->
-      <div class="data-table__toolbar">
-        <div class="data-table__toolbar--left">
-          <el-row :gutter="10">
-            <el-col :span="1.5">
-              <el-button
-                v-hasPerm="['module_system:dept:create']"
-                type="success"
-                icon="plus"
-                @click="handleOpenDialog('create')"
-              >
-                新增
-              </el-button>
-            </el-col>
-            <el-col :span="1.5">
-              <el-button
-                v-hasPerm="['module_system:dept: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="['module_system:dept:patch']" 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('0')">
-                      批量启用
-                    </el-dropdown-item>
-                    <el-dropdown-item icon="CircleClose" @click="handleMoreClick('1')">
-                      批量停用
-                    </el-dropdown-item>
-                  </el-dropdown-menu>
-                </template>
-              </el-dropdown>
-            </el-col>
-          </el-row>
-        </div>
+    <PageContent ref="contentRef" :content-config="contentConfig">
+      <template #toolbar="{ toolbarRight, onToolbar, removeIds, cols }">
+        <CrudToolbarLeft
+          :remove-ids="removeIds"
+          :perm-create="['module_system:dept:create']"
+          :perm-delete="['module_system:dept:delete']"
+          :perm-patch="['module_system:dept:patch']"
+          @add="handleOpenDialog('create')"
+          @delete="onToolbar('delete')"
+          @more="handleMoreClick"
+        />
         <div class="data-table__toolbar--right">
-          <el-row :gutter="10">
-            <el-col :span="1.5">
-              <el-tooltip content="刷新">
-                <el-button 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 />
-                </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-scrollbar>
-              </el-popover>
-            </el-col>
-          </el-row>
+          <CrudToolbarRight :buttons="toolbarRight" :cols="cols" :on-toolbar="onToolbar" />
         </div>
-      </div>
+      </template>
 
-      <!-- 表格区域：系统配置列表 -->
-      <div class="data-table__content">
-        <el-table
-          ref="dataTableRef"
-          v-loading="loading"
-          row-key="id"
-          :data="pageTableData"
-          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
-          height="calc(100vh - 300px)"
-          max-height="calc(100vh - 300px)"
-          border
-          @selection-change="handleSelectionChange"
-          @row-click="handleRowClick"
-        >
-          <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"
-            type="index"
-            fixed
-            label="序号"
-            min-width="60"
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'name')?.show"
-            key="name"
-            label="部门名称"
-            prop="name"
-            min-width="120"
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'code')?.show"
-            key="code"
-            label="部门编码"
-            prop="code"
-            min-width="120"
-          />
-          ')
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'status')?.show"
-            key="status"
-            label="状态"
-            prop="status"
-            min-width="60"
+      <template #table="{ data, loading, tableRef, onSelectionChange }">
+        <div class="data-table__content">
+          <el-table
+            :ref="tableRef as any"
+            v-loading="loading"
+            row-key="id"
+            :data="data"
+            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+            height="100%"
+            border
+            @selection-change="onSelectionChange"
           >
-            <template #default="scope">
-              <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
-                {{ scope.row.status ? "启用" : "停用" }}
-              </el-tag>
+            <template #empty>
+              <el-empty :image-size="80" description="暂无数据" />
             </template>
-          </el-table-column>
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'order')?.show"
-            key="order"
-            label="排序"
-            prop="order"
-            min-width="60"
-            show-overflow-tooltip
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'description')?.show"
-            key="description"
-            label="描述"
-            prop="description"
-            min-width="100"
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'created_time')?.show"
-            key="created_time"
-            label="创建时间"
-            prop="created_time"
-            min-width="120"
-            sortable
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'updated_time')?.show"
-            key="updated_time"
-            label="更新时间"
-            prop="updated_time"
-            min-width="120"
-            sortable
-          />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'selection')?.show"
+              type="selection"
+              min-width="55"
+              align="center"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'index')?.show"
+              type="index"
+              fixed
+              label="序号"
+              min-width="60"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'name')?.show"
+              key="name"
+              label="部门名称"
+              prop="name"
+              min-width="120"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'code')?.show"
+              key="code"
+              label="部门编码"
+              prop="code"
+              min-width="120"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'status')?.show"
+              key="status"
+              label="状态"
+              prop="status"
+              min-width="60"
+            >
+              <template #default="scope">
+                <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
+                  {{ scope.row.status ? "启用" : "停用" }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'order')?.show"
+              key="order"
+              label="排序"
+              prop="order"
+              min-width="60"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'description')?.show"
+              key="description"
+              label="描述"
+              prop="description"
+              min-width="100"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'created_time')?.show"
+              key="created_time"
+              label="创建时间"
+              prop="created_time"
+              min-width="120"
+              sortable
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'updated_time')?.show"
+              key="updated_time"
+              label="更新时间"
+              prop="updated_time"
+              min-width="120"
+              sortable
+            />
 
-          <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="['module_system:dept:create']"
-                type="success"
-                size="small"
-                link
-                icon="plus"
-                @click="handleOpenDialog('create', undefined, scope.row.id)"
-              >
-                新增
-              </el-button>
-              <el-button
-                v-hasPerm="['module_system:dept:detail']"
-                type="info"
-                size="small"
-                link
-                icon="document"
-                @click="handleOpenDialog('detail', scope.row.id)"
-              >
-                详情
-              </el-button>
-              <el-button
-                v-hasPerm="['module_system:dept:update']"
-                type="primary"
-                size="small"
-                link
-                icon="edit"
-                @click="handleOpenDialog('update', scope.row.id)"
-              >
-                编辑
-              </el-button>
-              <el-button
-                v-hasPerm="['module_system:dept:delete']"
-                type="danger"
-                size="small"
-                link
-                icon="delete"
-                @click="handleDelete([scope.row.id])"
-              >
-                删除
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-    </el-card>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'operation')?.show"
+              fixed="right"
+              label="操作"
+              align="center"
+              min-width="200"
+            >
+              <template #default="scope">
+                <el-button
+                  v-hasPerm="['module_system:dept:create']"
+                  type="success"
+                  size="small"
+                  link
+                  icon="plus"
+                  @click="handleOpenDialog('create', undefined, scope.row.id)"
+                >
+                  新增
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_system:dept:detail']"
+                  type="info"
+                  size="small"
+                  link
+                  icon="View"
+                  @click="handleOpenDialog('detail', scope.row.id)"
+                >
+                  详情
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_system:dept:update']"
+                  type="primary"
+                  size="small"
+                  link
+                  icon="edit"
+                  @click="handleOpenDialog('update', scope.row.id)"
+                >
+                  编辑
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_system:dept:delete']"
+                  type="danger"
+                  size="small"
+                  link
+                  icon="delete"
+                  @click="handleRowDelete(scope.row.id)"
+                >
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </template>
+    </PageContent>
 
-    <!-- 弹窗区域 -->
-    <el-dialog
+    <EnhancedDialog
       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">
@@ -313,7 +201,6 @@
           </el-descriptions-item>
         </el-descriptions>
       </template>
-      <!-- 新增、编辑表单 -->
       <template v-else>
         <el-form
           ref="dataFormRef"
@@ -368,7 +255,6 @@
 
       <template #footer>
         <div class="dialog-footer">
-          <!-- 详情弹窗不需要确定按钮的提交逻辑 -->
           <el-button v-if="dialogVisible.type !== 'detail'" type="primary" @click="handleSubmit">
             确定
           </el-button>
@@ -376,7 +262,7 @@
           <el-button @click="handleCloseDialog">取消</el-button>
         </div>
       </template>
-    </el-dialog>
+    </EnhancedDialog>
   </div>
 </template>
 
@@ -387,26 +273,67 @@ defineOptions({
 });
 
 import DeptAPI, { DeptTable, DeptForm, DeptPageQuery } from "@/api/module_system/dept";
+import CrudToolbarLeft from "@/components/CURD/CrudToolbarLeft.vue";
+import CrudToolbarRight from "@/components/CURD/CrudToolbarRight.vue";
+import PageSearch from "@/components/CURD/PageSearch.vue";
+import PageContent from "@/components/CURD/PageContent.vue";
+import EnhancedDialog from "@/components/CURD/EnhancedDialog.vue";
+import type { ISearchConfig, IContentConfig } from "@/components/CURD/types";
+import { useCrudList } from "@/components/CURD/useCrudList";
 import { useUserStore } from "@/store";
 import { formatTree } from "@/utils/common";
-import { formatToDateTime } from "@/utils/dateUtil";
+import { ref, reactive } from "vue";
 
-const queryFormRef = ref();
+const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
 const dataFormRef = ref();
-const selectIds = ref<number[]>([]);
-const loading = ref(false);
 
-const isExpand = ref(false);
-const isExpandable = ref(true);
+const searchConfig = reactive<ISearchConfig>({
+  permPrefix: "module_system:dept",
+  colon: true,
+  isExpandable: true,
+  showNumber: 2,
+  form: { labelWidth: "auto" },
+  formItems: [
+    {
+      prop: "name",
+      label: "部门名称",
+      type: "input",
+      attrs: { placeholder: "请输入部门名称", clearable: true },
+    },
+    {
+      prop: "status",
+      label: "状态",
+      type: "select",
+      options: [
+        { label: "启用", value: "0" },
+        { label: "停用", value: "1" },
+      ],
+      attrs: { placeholder: "请选择状态", clearable: true, style: { width: "167.5px" } },
+    },
+    {
+      prop: "created_time",
+      label: "创建时间",
+      type: "date-picker",
+      attrs: {
+        type: "datetimerange",
+        rangeSeparator: "至",
+        startPlaceholder: "开始日期",
+        endPlaceholder: "结束日期",
+        format: "YYYY-MM-DD HH:mm:ss",
+        valueFormat: "YYYY-MM-DD HH:mm:ss",
+        style: { width: "340px" },
+      },
+    },
+  ],
+});
 
-// 分页表单
-const pageTableData = ref<DeptTable[]>([]);
-
-// 顶级菜单下拉选项
-const deptOptions = ref<OptionType[]>([]);
-
-// 表格列配置
-const tableColumns = ref([
+const contentCols = reactive<
+  Array<{
+    prop?: string;
+    label?: string;
+    show?: boolean;
+  }>
+>([
   { prop: "selection", label: "选择框", show: true },
   { prop: "index", label: "序号", show: true },
   { prop: "name", label: "部门名称", show: true },
@@ -419,17 +346,41 @@ const tableColumns = ref([
   { prop: "operation", label: "操作", show: true },
 ]);
 
-// 详情表单
-const detailFormData = ref<DeptTable>({});
-
-// 分页查询参数
-const queryFormData = reactive<DeptPageQuery>({
-  name: undefined,
-  status: undefined,
-  created_time: undefined,
+const contentConfig = reactive<IContentConfig<DeptPageQuery>>({
+  permPrefix: "module_system:dept",
+  pk: "id",
+  cols: contentCols as IContentConfig["cols"],
+  hideColumnFilter: false,
+  toolbar: [],
+  defaultToolbar: ["refresh", "filter"],
+  pagination: false,
+  indexAction: async (params) => {
+    const res = await DeptAPI.listDept(params as DeptPageQuery);
+    const tree = res.data.data || [];
+    deptOptions.value = formatTree(tree);
+    return tree;
+  },
+  deleteAction: async (ids) => {
+    await DeptAPI.deleteDept(
+      ids
+        .split(",")
+        .map((s) => Number(s.trim()))
+        .filter((n) => !Number.isNaN(n))
+    );
+    const userStore = useUserStore();
+    await userStore.getUserInfo();
+  },
+  deleteConfirm: {
+    title: "警告",
+    message: "确认删除该项数据?",
+    type: "warning",
+  },
 });
 
-// 编辑表单
+const deptOptions = ref<OptionType[]>([]);
+
+const detailFormData = ref<DeptTable>({});
+
 const formData = reactive<DeptForm>({
   id: undefined,
   name: undefined,
@@ -440,115 +391,45 @@ const formData = reactive<DeptForm>({
   description: undefined,
 });
 
-// 弹窗状态
 const dialogVisible = reactive({
   title: "",
   visible: false,
   type: "create" as "create" | "update" | "detail",
 });
 
-// 表单验证规则
 const rules = reactive({
   name: [{ required: true, message: "请输入部门名称", trigger: "blur" }],
   order: [{ required: true, message: "请输入排序", trigger: "blur" }],
   status: [{ required: true, message: "请选择状态", trigger: "blur" }],
 });
 
-// 列表刷新
-async function handleRefresh() {
-  loading.value = true;
-  try {
-    const response = await DeptAPI.listDept(queryFormData);
-    pageTableData.value = response.data.data;
-  } catch (error: any) {
-    console.error(error);
-  } finally {
-    loading.value = false;
-  }
-}
-
-// 加载表格数据
-async function loadingData() {
-  loading.value = true;
-  try {
-    const response = await DeptAPI.listDept(queryFormData);
-    pageTableData.value = response.data.data;
-    // 加载部门选项
-    deptOptions.value = formatTree(response.data.data);
-  } catch (error: any) {
-    console.error(error);
-  } finally {
-    loading.value = false;
-  }
-}
-
-// 查询（重置页码后获取数据）
-async function handleQuery() {
-  loadingData();
-}
-
-// 重置查询
-async function handleResetQuery() {
-  queryFormRef.value.resetFields();
-  // 额外清空日期范围与时间查询参数
-  dateRange.value = [];
-  queryFormData.created_time = undefined;
-  loadingData();
-}
-
-// 定义初始表单数据常量
 const initialFormData: DeptForm = {
   id: undefined,
   name: undefined,
+  code: undefined,
   order: 1,
   parent_id: undefined,
   status: "0",
   description: undefined,
 };
 
-// 日期范围临时变量
-const dateRange = ref<[Date, Date] | []>([]);
-
-// 处理日期范围变化
-function handleDateRangeChange(range: [Date, Date]) {
-  dateRange.value = range;
-  if (range && range.length === 2) {
-    queryFormData.created_time = [formatToDateTime(range[0]), formatToDateTime(range[1])];
-  } else {
-    queryFormData.created_time = undefined;
-  }
+function handleRowDelete(id: number) {
+  contentRef.value?.handleDelete(id);
 }
 
-// 重置表单
 async function resetForm() {
   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);
-}
-
-// 选择表格的行菜单ID
-const selectedDeptId = ref<number | undefined>();
-
-// 行点击事件
-async function handleRowClick(row: DeptTable) {
-  selectedDeptId.value = row.id;
-}
-
-// 关闭弹窗
 async function handleCloseDialog() {
   dialogVisible.visible = false;
-  resetForm();
+  await resetForm();
 }
 
-// 打开系统配置弹窗
 async function handleOpenDialog(
   type: "create" | "update" | "detail",
   id?: number,
@@ -567,7 +448,6 @@ async function handleOpenDialog(
   } else {
     dialogVisible.title = "新增部门";
     formData.id = undefined;
-    // 设置父级部门
     if (parentId) {
       formData.parent_id = parentId;
     }
@@ -575,13 +455,9 @@ async function handleOpenDialog(
   dialogVisible.visible = true;
 }
 
-// 新增、编辑弹窗处理
 async function handleSubmit() {
-  // 表单校验
-  dataFormRef.value.validate(async (valid: any) => {
+  dataFormRef.value.validate(async (valid: boolean) => {
     if (valid) {
-      loading.value = true;
-      // 根据弹窗传入的参数(deatil\create\update)判断走什么逻辑
       const id = formData.id;
       try {
         if (id) {
@@ -590,74 +466,41 @@ async function handleSubmit() {
           await DeptAPI.createDept(formData);
         }
         dialogVisible.visible = false;
-        resetForm();
-        handleResetQuery();
-        // 更新全局用户状态，刷新部门信息
+        await resetForm();
+        refreshList();
         const userStore = useUserStore();
         await userStore.getUserInfo();
-      } catch (error: any) {
+      } catch (error: unknown) {
         console.error(error);
-      } finally {
-        loading.value = false;
       }
     }
   });
 }
 
-// 删除、批量删除
-async function handleDelete(ids: number[]) {
-  ElMessageBox.confirm("确认删除该项数据?", "警告", {
+async function handleMoreClick(status: string) {
+  const rows = contentRef.value?.getSelectionData() as DeptTable[] | undefined;
+  const ids = (rows ?? []).map((r) => r.id).filter((id): id is number => id != null);
+  if (!ids.length) {
+    ElMessage.warning("请先选择要操作的数据");
+    return;
+  }
+  ElMessageBox.confirm(`确认${status === "0" ? "启用" : "停用"}该项数据?`, "警告", {
     confirmButtonText: "确定",
     cancelButtonText: "取消",
     type: "warning",
   })
     .then(async () => {
       try {
-        loading.value = true;
-        await DeptAPI.deleteDept(ids);
-        handleResetQuery();
-        // 更新全局用户状态，刷新部门信息
+        await DeptAPI.batchDept({ ids, status });
+        refreshList();
         const userStore = useUserStore();
         await userStore.getUserInfo();
-      } catch (error: any) {
+      } catch (error: unknown) {
         console.error(error);
-      } finally {
-        loading.value = false;
       }
     })
     .catch(() => {
       ElMessageBox.close();
     });
 }
-
-// 批量启用/停用
-async function handleMoreClick(status: string) {
-  if (selectIds.value.length) {
-    ElMessageBox.confirm(`确认${status === "0" ? "启用" : "停用"}该项数据?`, "警告", {
-      confirmButtonText: "确定",
-      cancelButtonText: "取消",
-      type: "warning",
-    })
-      .then(async () => {
-        try {
-          loading.value = true;
-          await DeptAPI.batchDept({ ids: selectIds.value, status });
-          handleResetQuery();
-        } catch (error: any) {
-          console.error(error);
-        } finally {
-          loading.value = false;
-        }
-      })
-      .catch(() => {
-        ElMessageBox.close();
-      });
-  }
-}
-
-onMounted(() => {
-  loadingData();
-});
 </script>
-
-<style lang="scss" scoped></style>
diff --git a/frontend/src/views/module_system/dict/components/DataDrawer.vue b/frontend/src/views/module_system/dict/components/DataDrawer.vue
index 58abb45d..7156c933 100644
--- a/frontend/src/views/module_system/dict/components/DataDrawer.vue
+++ b/frontend/src/views/module_system/dict/components/DataDrawer.vue
@@ -1,109 +1,33 @@
 <!-- 字典数据 -->
 <template>
-  <el-drawer
+  <EnhancedDrawer
     v-model="drawerVisible"
-    :title="'【' + props.dictLabel + '】字典数据'"
+    :title="'【' + dictLabel + '】字典数据'"
+    direction="rtl"
     :size="drawerSize"
   >
     <div class="drawer-content">
-      <!-- 搜索区域 -->
-      <el-card class="search-container">
-        <el-form
-          ref="queryFormRef"
-          :model="queryFormData"
-          :inline="true"
-          label-suffix=":"
-          @submit.prevent="handleQuery"
-        >
-          <el-form-item prop="dict_label" label="字典数据标签">
-            <el-input v-model="queryFormData.dict_label" 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="0" label="启用" />
-              <el-option value="1" 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 type="primary" icon="search" native-type="submit">查询</el-button>
-            <el-button 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>
-      </el-card>
+      <PageSearch
+        ref="searchRef"
+        :search-config="searchConfig"
+        @query-click="handleQueryClick"
+        @reset-click="handleResetClick"
+      />
 
-      <!-- 内容区域 -->
-      <el-card class="data-table">
-        <!-- 功能区域 -->
-        <div class="data-table__toolbar">
-          <div class="data-table__toolbar--left">
-            <el-row :gutter="10">
-              <el-col :span="1.5">
-                <el-button
-                  v-hasPerm="['module_system:dict_data:create']"
-                  type="success"
-                  icon="plus"
-                  @click="handleOpenDialog('create')"
-                >
-                  新增
-                </el-button>
-              </el-col>
-              <el-col :span="1.5">
-                <el-button
-                  v-hasPerm="['module_system:dict_data: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="['module_system:dict_data:patch']" 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('0')">
-                        批量启用
-                      </el-dropdown-item>
-                      <el-dropdown-item icon="CircleClose" @click="handleMoreClick('1')">
-                        批量停用
-                      </el-dropdown-item>
-                    </el-dropdown-menu>
-                  </template>
-                </el-dropdown>
-              </el-col>
-            </el-row>
-          </div>
+      <PageContent ref="contentRef" :content-config="contentConfig">
+        <template #toolbar="{ toolbarRight, onToolbar, removeIds, cols }">
+          <CrudToolbarLeft
+            :remove-ids="removeIds"
+            :perm-create="['module_system:dict_data:create']"
+            :perm-delete="['module_system:dict_data:delete']"
+            :perm-patch="['module_system:dict_data:patch']"
+            @add="handleOpenDialog('create')"
+            @delete="onToolbar('delete')"
+            @more="handleMoreClick"
+          />
           <div class="data-table__toolbar--right">
-            <el-row :gutter="10">
-              <el-col :span="1.5">
+            <CrudToolbarRight :buttons="toolbarRight" :cols="cols" :on-toolbar="onToolbar">
+              <template #prepend>
                 <el-tooltip content="导出">
                   <el-button
                     v-hasPerm="['module_system:dict_data:export']"
@@ -113,133 +37,182 @@
                     @click="handleOpenExportsModal"
                   />
                 </el-tooltip>
-              </el-col>
-              <el-col :span="1.5">
-                <el-tooltip content="刷新">
-                  <el-button type="default" icon="refresh" circle @click="handleRefresh" />
-                </el-tooltip>
-              </el-col>
-            </el-row>
+              </template>
+            </CrudToolbarRight>
           </div>
-        </div>
-
-        <!-- 表格区域：系统配置列表 -->
-        <div class="data-table__content">
-          <el-table
-            ref="dataTableRef"
-            v-loading="loading"
-            :data="pageTableData"
-            height="calc(100vh - 390px)"
-            max-height="calc(100vh - 390px)"
-            border
-            stripe
-            @selection-change="handleSelectionChange"
-          >
-            <template #empty>
-              <el-empty :image-size="80" description="暂无数据" />
-            </template>
-            <el-table-column type="selection" min-width="55" align="center" />
-            <el-table-column type="index" 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 label="标签" prop="dict_label" min-width="150" show-overflow-tooltip />
-            <el-table-column label="状态" prop="status" min-width="100" show-overflow-tooltip>
-              <template #default="scope">
-                <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
-                  {{ scope.row.status === "0" ? "启用" : "停用" }}
-                </el-tag>
-              </template>
-            </el-table-column>
-            <el-table-column label="类型" prop="dict_type" min-width="180" show-overflow-tooltip>
-              <template #default="scope">
-                <el-tag type="primary">{{ scope.row.dict_type }}</el-tag>
-              </template>
-            </el-table-column>
-            <el-table-column label="值" prop="dict_value" min-width="100" show-overflow-tooltip />
-            <el-table-column
-              label="样式属性"
-              prop="css_class"
-              min-width="100"
-              show-overflow-tooltip
-            />
-            <el-table-column
-              label="列表类样式"
-              prop="list_class"
-              min-width="100"
-              show-overflow-tooltip
-            />
-            <el-table-column label="排序" prop="dict_sort" min-width="60" />
-            <el-table-column label="是否默认" prop="is_default" min-width="100">
-              <template #default="scope">
-                <el-tag v-if="scope.row.is_default" type="success">是</el-tag>
-                <el-tag v-else type="danger">否</el-tag>
-              </template>
-            </el-table-column>
-            <el-table-column
-              label="描述"
-              prop="description"
-              min-width="100"
-              show-overflow-tooltip
-            />
-            <el-table-column label="创建时间" prop="created_time" min-width="200" sortable />
-            <el-table-column label="更新时间" prop="updated_time" min-width="200" sortable />
-            <el-table-column fixed="right" label="操作" align="center" min-width="200">
-              <template #default="scope">
-                <el-button
-                  v-hasPerm="['module_system:dict_data:detail']"
-                  type="info"
-                  size="small"
-                  link
-                  icon="document"
-                  @click="handleOpenDialog('detail', scope.row.id)"
-                >
-                  详情
-                </el-button>
-                <el-button
-                  v-hasPerm="['module_system:dict_data:update']"
-                  type="primary"
-                  size="small"
-                  link
-                  icon="edit"
-                  @click="handleOpenDialog('update', scope.row.id)"
-                >
-                  编辑
-                </el-button>
-                <el-button
-                  v-hasPerm="['module_system:dict_data:delete']"
-                  type="danger"
-                  size="small"
-                  link
-                  icon="delete"
-                  @click="handleDelete([scope.row.id])"
-                >
-                  删除
-                </el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-        </div>
-
-        <!-- 分页区域 -->
-        <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
+        <template #table="{ data, loading, tableRef, onSelectionChange, pagination }">
+          <div class="data-table__content">
+            <el-table
+              :ref="tableRef as any"
+              v-loading="loading"
+              row-key="id"
+              :data="data"
+              height="100%"
+              border
+              stripe
+              @selection-change="onSelectionChange"
+            >
+              <template #empty>
+                <el-empty :image-size="80" description="暂无数据" />
+              </template>
+              <el-table-column
+                v-if="contentCols.find((col) => col.prop === 'selection')?.show"
+                type="selection"
+                min-width="55"
+                align="center"
+              />
+              <el-table-column
+                v-if="contentCols.find((col) => col.prop === 'index')?.show"
+                fixed
+                label="序号"
+                min-width="60"
+              >
+                <template #default="scope">
+                  {{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                v-if="contentCols.find((col) => col.prop === 'dict_label')?.show"
+                label="标签"
+                prop="dict_label"
+                min-width="150"
+                show-overflow-tooltip
+              />
+              <el-table-column
+                v-if="contentCols.find((col) => col.prop === 'status')?.show"
+                label="状态"
+                prop="status"
+                min-width="100"
+                show-overflow-tooltip
+              >
+                <template #default="scope">
+                  <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
+                    {{ scope.row.status === "0" ? "启用" : "停用" }}
+                  </el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column
+                v-if="contentCols.find((col) => col.prop === 'dict_type')?.show"
+                label="类型"
+                prop="dict_type"
+                min-width="180"
+                show-overflow-tooltip
+              >
+                <template #default="scope">
+                  <el-tag type="primary">{{ scope.row.dict_type }}</el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column
+                v-if="contentCols.find((col) => col.prop === 'dict_value')?.show"
+                label="值"
+                prop="dict_value"
+                min-width="100"
+                show-overflow-tooltip
+              />
+              <el-table-column
+                v-if="contentCols.find((col) => col.prop === 'css_class')?.show"
+                label="样式属性"
+                prop="css_class"
+                min-width="100"
+                show-overflow-tooltip
+              />
+              <el-table-column
+                v-if="contentCols.find((col) => col.prop === 'list_class')?.show"
+                label="列表类样式"
+                prop="list_class"
+                min-width="100"
+                show-overflow-tooltip
+              />
+              <el-table-column
+                v-if="contentCols.find((col) => col.prop === 'dict_sort')?.show"
+                label="排序"
+                prop="dict_sort"
+                min-width="60"
+              />
+              <el-table-column
+                v-if="contentCols.find((col) => col.prop === 'is_default')?.show"
+                label="是否默认"
+                prop="is_default"
+                min-width="100"
+              >
+                <template #default="scope">
+                  <el-tag v-if="scope.row.is_default" type="success">是</el-tag>
+                  <el-tag v-else type="danger">否</el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column
+                v-if="contentCols.find((col) => col.prop === 'description')?.show"
+                label="描述"
+                prop="description"
+                min-width="100"
+                show-overflow-tooltip
+              />
+              <el-table-column
+                v-if="contentCols.find((col) => col.prop === 'created_time')?.show"
+                label="创建时间"
+                prop="created_time"
+                min-width="200"
+                sortable
+              />
+              <el-table-column
+                v-if="contentCols.find((col) => col.prop === 'updated_time')?.show"
+                label="更新时间"
+                prop="updated_time"
+                min-width="200"
+                sortable
+              />
+              <el-table-column
+                v-if="contentCols.find((col) => col.prop === 'operation')?.show"
+                fixed="right"
+                label="操作"
+                align="center"
+                min-width="200"
+              >
+                <template #default="scope">
+                  <el-button
+                    v-hasPerm="['module_system:dict_data:detail']"
+                    type="info"
+                    size="small"
+                    link
+                    icon="View"
+                    @click="handleOpenDialog('detail', scope.row.id)"
+                  >
+                    详情
+                  </el-button>
+                  <el-button
+                    v-hasPerm="['module_system:dict_data:update']"
+                    type="primary"
+                    size="small"
+                    link
+                    icon="edit"
+                    @click="handleOpenDialog('update', scope.row.id)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    v-hasPerm="['module_system:dict_data:delete']"
+                    type="danger"
+                    size="small"
+                    link
+                    icon="delete"
+                    @click="handleRowDelete(scope.row.id)"
+                  >
+                    删除
+                  </el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </template>
+      </PageContent>
+
+      <EnhancedDialog
         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">
@@ -279,7 +252,6 @@
             </el-descriptions-item>
           </el-descriptions>
         </template>
-        <!-- 新增、编辑表单 -->
         <template v-else>
           <el-form
             ref="dataFormRef"
@@ -366,7 +338,6 @@
 
         <template #footer>
           <div class="dialog-footer">
-            <!-- 详情弹窗不需要确定按钮的提交逻辑 -->
             <el-button @click="handleCloseDialog">取消</el-button>
             <el-button v-if="dialogVisible.type !== 'detail'" type="primary" @click="handleSubmit">
               确定
@@ -374,21 +345,36 @@
             <el-button v-else type="primary" @click="handleCloseDialog">确定</el-button>
           </div>
         </template>
-      </el-dialog>
+      </EnhancedDialog>
 
       <ExportModal
         v-model="exportsDialogVisible"
         :content-config="curdContentConfig"
-        :query-params="queryFormData"
-        :page-data="pageTableData"
-        :selection-data="selectionRows"
+        :query-params="exportQueryParams"
+        :page-data="exportPageData"
+        :selection-data="exportSelectionData"
       />
     </div>
-  </el-drawer>
+  </EnhancedDrawer>
 </template>
 
 <script setup lang="ts">
-// 添加 props 来接收 dictType
+import DictAPI, { DictDataTable, DictDataForm, DictDataPageQuery } from "@/api/module_system/dict";
+import { useDictStore } from "@/store";
+import { useAppStore } from "@/store/modules/app.store";
+import { DeviceEnum } from "@/enums/settings/device.enum";
+import ExportModal from "@/components/CURD/ExportModal.vue";
+import CrudToolbarLeft from "@/components/CURD/CrudToolbarLeft.vue";
+import CrudToolbarRight from "@/components/CURD/CrudToolbarRight.vue";
+import PageSearch from "@/components/CURD/PageSearch.vue";
+import PageContent from "@/components/CURD/PageContent.vue";
+import EnhancedDialog from "@/components/CURD/EnhancedDialog.vue";
+import EnhancedDrawer from "@/components/CURD/EnhancedDrawer.vue";
+import type { ISearchConfig, IContentConfig, IObject } from "@/components/CURD/types";
+import { useCrudList } from "@/components/CURD/useCrudList";
+import { computed, ref, reactive, unref } from "vue";
+import { fetchAllPages } from "@/utils/fetchAllPages";
+
 const props = defineProps({
   dictType: {
     type: String,
@@ -404,52 +390,127 @@ const props = defineProps({
   },
 });
 
-const drawerVisible = defineModel<boolean>();
-import DictAPI, { DictDataTable, DictDataForm, DictDataPageQuery } from "@/api/module_system/dict";
-import { useDictStore } from "@/store";
-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";
-import { formatToDateTime } from "@/utils/dateUtil";
+const drawerVisible = defineModel<boolean>({ required: true });
 
 const appStore = useAppStore();
 const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "80%" : "60%"));
 
-const queryFormRef = ref();
+const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
 const dataFormRef = ref();
-const total = ref(0);
-const selectIds = ref<number[]>([]);
-const loading = ref(false);
 
-const isExpand = ref(false);
-const isExpandable = ref(true);
-
-// 分页表单
-const pageTableData = ref<DictDataTable[]>([]);
-
-// 导出弹窗显示状态 & 选中行
-const exportsDialogVisible = ref(false);
-const selectionRows = ref<DictDataTable[]>([]);
-
-// 详情表单
-const detailFormData = ref<DictDataTable>({});
-
-// 分页查询参数
-const queryFormData = reactive<DictDataPageQuery>({
-  page_no: 1,
-  page_size: 10,
-  dict_label: undefined,
-  dict_type: props.dictType,
-  status: undefined,
-  created_time: undefined,
-  updated_time: undefined,
+const searchConfig = reactive<ISearchConfig>({
+  permPrefix: "module_system:dict_data",
+  colon: true,
+  isExpandable: true,
+  showNumber: 2,
+  form: { labelWidth: "auto" },
+  formItems: [
+    {
+      prop: "dict_label",
+      label: "字典数据标签",
+      type: "input",
+      attrs: { placeholder: "请输入字典标签", clearable: true },
+    },
+    {
+      prop: "status",
+      label: "状态",
+      type: "select",
+      options: [
+        { label: "启用", value: "0" },
+        { label: "停用", value: "1" },
+      ],
+      attrs: { placeholder: "请选择状态", clearable: true, style: { width: "167.5px" } },
+    },
+    {
+      prop: "created_time",
+      label: "创建时间",
+      type: "date-picker",
+      attrs: {
+        type: "datetimerange",
+        rangeSeparator: "至",
+        startPlaceholder: "开始日期",
+        endPlaceholder: "结束日期",
+        format: "YYYY-MM-DD HH:mm:ss",
+        valueFormat: "YYYY-MM-DD HH:mm:ss",
+        style: { width: "340px" },
+      },
+    },
+  ],
 });
 
-// 字典 store
+const contentCols = reactive<
+  Array<{
+    prop?: string;
+    label?: string;
+    show?: boolean;
+  }>
+>([
+  { prop: "selection", label: "选择框", show: true },
+  { prop: "index", label: "序号", show: true },
+  { prop: "dict_label", label: "标签", show: true },
+  { prop: "status", label: "状态", show: true },
+  { prop: "dict_type", label: "类型", show: true },
+  { prop: "dict_value", label: "值", show: true },
+  { prop: "css_class", label: "样式属性", show: true },
+  { prop: "list_class", label: "列表类样式", show: true },
+  { prop: "dict_sort", label: "排序", show: true },
+  { prop: "is_default", label: "是否默认", show: true },
+  { prop: "description", label: "描述", show: true },
+  { prop: "created_time", label: "创建时间", show: true },
+  { prop: "updated_time", label: "更新时间", show: true },
+  { prop: "operation", label: "操作", show: true },
+]);
+
 const dictStore = useDictStore();
 
-// 编辑表单
+function mergeDictQuery(params: IObject): DictDataPageQuery {
+  return {
+    ...params,
+    dict_type: props.dictType,
+    dict_type_id: props.dictTypeId,
+  } as DictDataPageQuery;
+}
+
+const contentConfig = reactive<IContentConfig<DictDataPageQuery>>({
+  permPrefix: "module_system:dict_data",
+  pk: "id",
+  cols: contentCols as IContentConfig["cols"],
+  hideColumnFilter: false,
+  toolbar: [],
+  defaultToolbar: ["refresh", "filter"],
+  pagination: {
+    pageSize: 10,
+    pageSizes: [10, 20, 30, 50],
+  },
+  request: { page_no: "page_no", page_size: "page_size" },
+  indexAction: async (params) => {
+    const res = await DictAPI.listDictData(mergeDictQuery(params as IObject));
+    return {
+      total: res.data.data.total,
+      list: res.data.data.items,
+    };
+  },
+  deleteAction: async (ids) => {
+    await DictAPI.deleteDictData(
+      ids
+        .split(",")
+        .map((s) => Number(s.trim()))
+        .filter((n) => !Number.isNaN(n))
+    );
+    dictStore.clearDictData();
+    if (props.dictType) {
+      await dictStore.getDict([props.dictType]);
+    }
+  },
+  deleteConfirm: {
+    title: "警告",
+    message: "确认删除该项数据?",
+    type: "warning",
+  },
+});
+
+const detailFormData = ref<DictDataTable>({});
+
 const formData = reactive<DictDataForm>({
   id: undefined,
   dict_sort: 1,
@@ -464,75 +525,21 @@ const formData = reactive<DictDataForm>({
   dict_type_id: undefined,
 });
 
-// 弹窗状态
 const dialogVisible = reactive({
   title: "",
   visible: false,
   type: "create" as "create" | "update" | "detail",
 });
 
-// 表单验证规则
 const rules = reactive({
   dict_label: [{ required: true, message: "请输入字典标签", trigger: "blur" }],
   dict_type: [{ required: true, message: "请输入字典类型", trigger: "blur" }],
   dict_value: [{ required: true, message: "请输入字典键值", trigger: "blur" }],
   status: [{ required: true, message: "请选择状态", trigger: "blur" }],
   dict_sort: [{ required: true, message: "请输入排序", trigger: "blur" }],
-  // css_class: [{ required: true, message: "请输入样式类名", trigger: "blur" }],
-  // list_class: [{ required: true, message: "请输入列表类名", trigger: "blur" }],
   is_default: [{ required: true, message: "请选择是否默认", trigger: "blur" }],
 });
 
-// 日期范围临时变量
-const dateRange = ref<[Date, Date] | []>([]);
-
-// 处理日期范围变化
-function handleDateRangeChange(range: [Date, Date]) {
-  dateRange.value = range;
-  if (range && range.length === 2) {
-    queryFormData.created_time = [formatToDateTime(range[0]), formatToDateTime(range[1])];
-  } else {
-    queryFormData.created_time = undefined;
-  }
-}
-
-// 列表刷新
-async function handleRefresh() {
-  await loadingData();
-}
-
-// 加载表格数据
-async function loadingData() {
-  loading.value = true;
-  try {
-    // 在查询参数中添加 dictType
-    const response = await DictAPI.listDictData(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();
-}
-
-// 重置查询
-async function handleResetQuery() {
-  queryFormRef.value.resetFields();
-  queryFormData.page_no = 1;
-  // 额外清空日期范围与时间查询参数
-  dateRange.value = [];
-  queryFormData.created_time = undefined;
-  loadingData();
-}
-
-// 定义初始表单数据常量
 const initialFormData: DictDataForm = {
   id: undefined,
   dict_sort: 1,
@@ -547,163 +554,19 @@ const initialFormData: DictDataForm = {
   dict_type_id: props.dictTypeId,
 };
 
-// 重置表单
-async function resetForm() {
-  if (dataFormRef.value) {
-    dataFormRef.value.resetFields();
-    dataFormRef.value.clearValidate();
-  }
-  // 完全重置 formData 为初始状态
-  Object.assign(formData, initialFormData);
-}
+const exportsDialogVisible = ref(false);
 
-// 行复选框选中项变化
-async function handleSelectionChange(selection: any) {
-  selectIds.value = selection.map((item: any) => item.id);
-  selectionRows.value = selection;
-}
+const exportQueryParams = computed(() => mergeDictQuery(searchRef.value?.getQueryParams() ?? {}));
 
-// 关闭弹窗
-async function handleCloseDialog() {
-  dialogVisible.visible = false;
-  resetForm();
-}
+const exportPageData = computed(() => {
+  const pd = contentRef.value?.pageData;
+  return (unref(pd) ?? []) as DictDataTable[];
+});
 
-// 打开系统配置弹窗
-async function handleOpenDialog(type: "create" | "update" | "detail", id?: number) {
-  dialogVisible.type = type;
-  if (id) {
-    const response = await DictAPI.detailDictData(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 = "新增字典数据";
-    // 重置为初始值并确保状态默认开启
-    Object.assign(formData, initialFormData);
-    formData.dict_type = props.dictType;
-    formData.status = "0";
-    formData.id = undefined;
-  }
-  dialogVisible.visible = true;
-}
+const exportSelectionData = computed(
+  () => (contentRef.value?.getSelectionData() ?? []) as DictDataTable[]
+);
 
-// 新增、编辑弹窗处理
-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 DictAPI.updateDictData(id, { id, ...formData });
-          dialogVisible.visible = false;
-          resetForm();
-          handleResetQuery();
-          // 重新加载字典以同步到浏览器内存
-          dictStore.clearDictData();
-          if (formData.dict_type) {
-            await dictStore.getDict([formData.dict_type]);
-          }
-        } catch (error: any) {
-          console.error(error);
-        } finally {
-          loading.value = false;
-        }
-      } else {
-        try {
-          await DictAPI.createDictData(formData);
-          dialogVisible.visible = false;
-          resetForm();
-          handleResetQuery();
-          // 重新加载字典以同步到浏览器内存
-          dictStore.clearDictData();
-          if (formData.dict_type) {
-            await dictStore.getDict([formData.dict_type]);
-          }
-        } 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 DictAPI.deleteDictData(ids);
-        handleResetQuery();
-        // 重新加载字典以同步到浏览器内存
-        dictStore.clearDictData();
-        const dictTypes = Object.keys(dictStore.dictData);
-        if (dictTypes.length > 0) {
-          await dictStore.getDict([props.dictType]);
-        } else {
-          await dictStore.getDict(dictTypes);
-        }
-      } catch (error: any) {
-        console.error(error);
-      } finally {
-        loading.value = false;
-      }
-    })
-    .catch(() => {
-      ElMessageBox.close();
-    });
-}
-
-// 打开导出弹窗
-function handleOpenExportsModal() {
-  exportsDialogVisible.value = true;
-}
-
-// 批量启用/停用
-async function handleMoreClick(status: string) {
-  if (selectIds.value.length) {
-    ElMessageBox.confirm(`确认${status === "0" ? "启用" : "停用"}该项数据?`, "警告", {
-      confirmButtonText: "确定",
-      cancelButtonText: "取消",
-      type: "warning",
-    })
-      .then(async () => {
-        try {
-          loading.value = true;
-          await DictAPI.batchDictData({ ids: selectIds.value, status });
-          handleResetQuery();
-          // 重新加载字典以同步到浏览器内存
-          dictStore.clearDictData();
-          if (props.dictType) {
-            await dictStore.getDict([props.dictType]);
-          }
-        } catch (error: any) {
-          console.error(error);
-        } finally {
-          loading.value = false;
-        }
-      })
-      .catch(() => {
-        ElMessageBox.close();
-      });
-  }
-}
-
-// 导出字段
 const exportColumns = [
   { prop: "dict_label", label: "数据标签" },
   { prop: "dict_type", label: "数据类型" },
@@ -718,30 +581,132 @@ const exportColumns = [
   { prop: "updated_time", label: "更新时间" },
 ];
 
-// 导出配置（用于导出弹窗）
 const curdContentConfig = {
   permPrefix: "module_system:dict_data",
   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 DictAPI.listDictData(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;
+    const query: Record<string, unknown> = { ...mergeDictQuery(params) };
+    return fetchAllPages({
+      initialQuery: query,
+      fetchPage: async (q) => {
+        const res = await DictAPI.listDictData(q as unknown as DictDataPageQuery);
+        return {
+          total: res.data?.data?.total ?? 0,
+          list: res.data?.data?.items ?? [],
+        };
+      },
+    });
   },
 } as unknown as IContentConfig;
 
-onMounted(() => {
-  loadingData();
-});
+function handleOpenExportsModal() {
+  exportsDialogVisible.value = true;
+}
+
+function handleRowDelete(id: number) {
+  contentRef.value?.handleDelete(id);
+}
+
+async function resetForm() {
+  if (dataFormRef.value) {
+    dataFormRef.value.resetFields();
+    dataFormRef.value.clearValidate();
+  }
+  Object.assign(formData, { ...initialFormData, dict_type_id: props.dictTypeId });
+}
+
+async function handleCloseDialog() {
+  dialogVisible.visible = false;
+  await resetForm();
+}
+
+async function handleOpenDialog(type: "create" | "update" | "detail", id?: number) {
+  dialogVisible.type = type;
+  if (id) {
+    const response = await DictAPI.detailDictData(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 = "新增字典数据";
+    Object.assign(formData, initialFormData);
+    formData.dict_type = props.dictType;
+    formData.status = "0";
+    formData.id = undefined;
+    formData.dict_type_id = props.dictTypeId;
+  }
+  dialogVisible.visible = true;
+}
+
+async function handleSubmit() {
+  dataFormRef.value.validate(async (valid: any) => {
+    if (valid) {
+      const id = formData.id;
+      try {
+        if (id) {
+          await DictAPI.updateDictData(id, { id, ...formData });
+        } else {
+          await DictAPI.createDictData(formData);
+        }
+        dialogVisible.visible = false;
+        await resetForm();
+        refreshList();
+        dictStore.clearDictData();
+        if (formData.dict_type) {
+          await dictStore.getDict([formData.dict_type]);
+        }
+      } catch (error: any) {
+        console.error(error);
+      }
+    }
+  });
+}
+
+async function handleMoreClick(status: string) {
+  const rows = contentRef.value?.getSelectionData() as DictDataTable[] | undefined;
+  const ids = (rows ?? []).map((r) => r.id).filter((id): id is number => id != null);
+  if (!ids.length) {
+    ElMessage.warning("请先选择要操作的数据");
+    return;
+  }
+  ElMessageBox.confirm(`确认${status === "0" ? "启用" : "停用"}该项数据?`, "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(async () => {
+      try {
+        await DictAPI.batchDictData({ ids, status });
+        refreshList();
+        dictStore.clearDictData();
+        if (props.dictType) {
+          await dictStore.getDict([props.dictType]);
+        }
+      } catch (error: any) {
+        console.error(error);
+      }
+    })
+    .catch(() => {
+      ElMessageBox.close();
+    });
+}
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.drawer-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.drawer-content :deep(.el-card.data-table) {
+  flex: 1;
+  min-height: 0;
+  margin-top: 16px;
+}
+</style>
diff --git a/frontend/src/views/module_system/dict/index.vue b/frontend/src/views/module_system/dict/index.vue
index c1c9cb55..1a9b6807 100644
--- a/frontend/src/views/module_system/dict/index.vue
+++ b/frontend/src/views/module_system/dict/index.vue
@@ -1,120 +1,33 @@
 <!-- 字典 -->
 <template>
   <div class="app-container">
-    <!-- 搜索区域 -->
-    <el-card class="search-container">
-      <el-form
-        ref="queryFormRef"
-        :model="queryFormData"
-        :inline="true"
-        label-suffix=":"
-        @submit.prevent="handleQuery"
-      >
-        <el-form-item prop="dict_name" label="字典名称">
-          <el-input v-model="queryFormData.dict_name" placeholder="请输入字典名称" clearable />
-        </el-form-item>
-        <el-form-item prop="dict_type" label="字典类型">
-          <el-input v-model="queryFormData.dict_type" 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="0" label="启用" />
-            <el-option value="1" 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="['module_system:dict_type:query']"
-            type="primary"
-            icon="search"
-            native-type="submit"
-          >
-            查询
-          </el-button>
-          <el-button
-            v-hasPerm="['module_system:dict_type: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>
-    </el-card>
+    <PageSearch
+      ref="searchRef"
+      :search-config="searchConfig"
+      @query-click="handleQueryClick"
+      @reset-click="handleResetClick"
+    />
 
-    <!-- 内容区域 -->
-    <el-card class="data-table">
-      <!-- 功能区域 -->
-      <div class="data-table__toolbar">
-        <div class="data-table__toolbar--left">
-          <el-row :gutter="10">
-            <el-col :span="1.5">
-              <el-button
-                v-hasPerm="['module_system:dict_type:create']"
-                type="success"
-                icon="plus"
-                @click="handleOpenDialog('create')"
-              >
-                新增
-              </el-button>
-            </el-col>
-            <el-col :span="1.5">
-              <el-button
-                v-hasPerm="['module_system:dict_type: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="['module_system:dict_type:patch']" 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('0')">
-                      批量启用
-                    </el-dropdown-item>
-                    <el-dropdown-item icon="CircleClose" @click="handleMoreClick('1')">
-                      批量停用
-                    </el-dropdown-item>
-                  </el-dropdown-menu>
-                </template>
-              </el-dropdown>
-            </el-col>
-          </el-row>
-        </div>
+    <PageContent
+      ref="contentRef"
+      :content-config="contentConfig"
+      @search-click="handleToggleSearch"
+      @add-click="handleOpenDialog('create')"
+    >
+      <!-- 与 PageContent 默认结构一致：不再套一层 data-table__toolbar（外层已由组件提供） -->
+      <template #toolbar="{ toolbarRight, onToolbar, removeIds, cols }">
+        <CrudToolbarLeft
+          :remove-ids="removeIds"
+          :perm-create="['module_system:dict_type:create']"
+          :perm-delete="['module_system:dict_type:delete']"
+          :perm-patch="['module_system:dict_type:patch']"
+          @add="handleOpenDialog('create')"
+          @delete="onToolbar('delete')"
+          @more="handleMoreClick"
+        />
         <div class="data-table__toolbar--right">
-          <el-row :gutter="10">
-            <el-col :span="1.5">
+          <CrudToolbarRight :buttons="toolbarRight" :cols="cols" :on-toolbar="onToolbar">
+            <template #prepend>
               <el-tooltip content="导出">
                 <el-button
                   v-hasPerm="['module_system:dict_type:export']"
@@ -124,193 +37,158 @@
                   @click="handleOpenExportsModal"
                 />
               </el-tooltip>
-            </el-col>
-            <el-col :span="1.5">
-              <el-tooltip content="刷新">
-                <el-button
-                  v-hasPerm="['module_system:dict_type:query']"
-                  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-scrollbar>
-              </el-popover>
-            </el-col>
-          </el-row>
+            </template>
+          </CrudToolbarRight>
         </div>
-      </div>
-
-      <!-- 表格区域：系统配置列表 -->
-      <div class="data-table__content">
-        <el-table
-          ref="dataTableRef"
-          v-loading="loading"
-          :data="pageTableData"
-          height="calc(100vh - 350px)"
-          max-height="calc(100vh - 350px)"
-          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"
-            type="index"
-            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 === 'dict_name')?.show"
-            key="dict_name"
-            label="字典名称"
-            prop="dict_name"
-            min-width="140"
-            show-overflow-tooltip
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'dict_type')?.show"
-            key="dict_type"
-            label="字典类型"
-            prop="dict_type"
-            min-width="180"
-          >
-            <template #default="scope">
-              <el-tag type="primary">{{ scope.row.dict_type }}</el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'status')?.show"
-            key="status"
-            label="状态"
-            prop="status"
-            min-width="80"
-          >
-            <template #default="scope">
-              <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
-                {{ scope.row.status ? "启用" : "停用" }}
-              </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'description')?.show"
-            key="description"
-            label="描述"
-            prop="description"
-            min-width="140"
-            show-overflow-tooltip
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'created_time')?.show"
-            key="created_time"
-            label="创建时间"
-            prop="created_time"
-            min-width="200"
-            sortable
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'updated_time')?.show"
-            key="updated_time"
-            label="更新时间"
-            prop="updated_time"
-            min-width="200"
-            sortable
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'operation')?.show"
-            fixed="right"
-            label="操作"
-            align="center"
-            min-width="260"
-          >
-            <template #default="scope">
-              <el-button
-                v-hasPerm="['module_system:dict_data:query']"
-                type="warning"
-                size="small"
-                link
-                icon="document"
-                @click="handleDictDataDrawer(scope.row)"
-              >
-                字典
-              </el-button>
-              <el-button
-                v-hasPerm="['module_system:dict_type:detail']"
-                type="info"
-                size="small"
-                link
-                icon="document"
-                @click="handleOpenDialog('detail', scope.row.id)"
-              >
-                详情
-              </el-button>
-              <el-button
-                v-hasPerm="['module_system:dict_type:update']"
-                type="primary"
-                size="small"
-                link
-                icon="edit"
-                @click="handleOpenDialog('update', scope.row.id)"
-              >
-                编辑
-              </el-button>
-              <el-button
-                v-hasPerm="['module_system:dict_type:delete']"
-                type="danger"
-                size="small"
-                link
-                icon="delete"
-                @click="handleDelete([scope.row.id])"
-              >
-                删除
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-
-      <!-- 分页区域 -->
-      <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
+      <template #table="{ data, loading, tableRef, onSelectionChange, pagination }">
+        <div class="data-table__content">
+          <el-table
+            :ref="tableRef as any"
+            v-loading="loading"
+            row-key="id"
+            :data="data"
+            height="100%"
+            border
+            stripe
+            @selection-change="onSelectionChange"
+          >
+            <template #empty>
+              <el-empty :image-size="80" description="暂无数据" />
+            </template>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'selection')?.show"
+              type="selection"
+              min-width="55"
+              align="center"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'index')?.show"
+              fixed
+              label="序号"
+              min-width="60"
+            >
+              <template #default="scope">
+                {{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'dict_name')?.show"
+              key="dict_name"
+              label="字典名称"
+              prop="dict_name"
+              min-width="140"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'dict_type')?.show"
+              key="dict_type"
+              label="字典类型"
+              prop="dict_type"
+              min-width="180"
+            >
+              <template #default="scope">
+                <el-tag type="primary">{{ scope.row.dict_type }}</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'status')?.show"
+              key="status"
+              label="状态"
+              prop="status"
+              min-width="80"
+            >
+              <template #default="scope">
+                <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
+                  {{ scope.row.status === "0" ? "启用" : "停用" }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'description')?.show"
+              key="description"
+              label="描述"
+              prop="description"
+              min-width="140"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'created_time')?.show"
+              key="created_time"
+              label="创建时间"
+              prop="created_time"
+              min-width="200"
+              sortable
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'updated_time')?.show"
+              key="updated_time"
+              label="更新时间"
+              prop="updated_time"
+              min-width="200"
+              sortable
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'operation')?.show"
+              fixed="right"
+              label="操作"
+              align="center"
+              min-width="260"
+            >
+              <template #default="scope">
+                <el-button
+                  v-hasPerm="['module_system:dict_data:query']"
+                  type="warning"
+                  size="small"
+                  link
+                  icon="View"
+                  @click="handleDictDataDrawer(scope.row)"
+                >
+                  字典
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_system:dict_type:detail']"
+                  type="info"
+                  size="small"
+                  link
+                  icon="View"
+                  @click="handleOpenDialog('detail', scope.row.id)"
+                >
+                  详情
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_system:dict_type:update']"
+                  type="primary"
+                  size="small"
+                  link
+                  icon="edit"
+                  @click="handleOpenDialog('update', scope.row.id)"
+                >
+                  编辑
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_system:dict_type:delete']"
+                  type="danger"
+                  size="small"
+                  link
+                  icon="delete"
+                  @click="handleRowDelete(scope.row.id)"
+                >
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </template>
+    </PageContent>
+
+    <EnhancedDialog
       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">
@@ -334,7 +212,6 @@
           </el-descriptions-item>
         </el-descriptions>
       </template>
-      <!-- 新增、编辑表单 -->
       <template v-else>
         <el-form
           ref="dataFormRef"
@@ -371,7 +248,6 @@
 
       <template #footer>
         <div class="dialog-footer">
-          <!-- 详情弹窗不需要确定按钮的提交逻辑 -->
           <el-button @click="handleCloseDialog">取消</el-button>
           <el-button v-if="dialogVisible.type !== 'detail'" type="primary" @click="handleSubmit">
             确定
@@ -379,8 +255,15 @@
           <el-button v-else type="primary" @click="handleCloseDialog">确定</el-button>
         </div>
       </template>
-    </el-dialog>
+    </EnhancedDialog>
 
+    <ExportModal
+      v-model="exportsDialogVisible"
+      :content-config="curdContentConfig"
+      :query-params="exportQueryParams"
+      :page-data="exportPageData"
+      :selection-data="exportSelectionData"
+    />
     <DataDrawer
       v-if="drawerVisible"
       v-model="drawerVisible"
@@ -388,13 +271,6 @@
       :dict-label="currentDictLabel"
       :dict-type-id="currentDictTypeId"
     />
-    <ExportModal
-      v-model="exportsDialogVisible"
-      :content-config="curdContentConfig"
-      :query-params="queryFormData"
-      :page-data="pageTableData"
-      :selection-data="selectionRows"
-    />
   </div>
 </template>
 
@@ -408,27 +284,72 @@ import DictAPI, { DictTable, DictForm, DictPageQuery } from "@/api/module_system
 import { useDictStore } from "@/store";
 import DataDrawer from "@/views/module_system/dict/components/DataDrawer.vue";
 import ExportModal from "@/components/CURD/ExportModal.vue";
-import type { IContentConfig } from "@/components/CURD/types";
-import { formatToDateTime } from "@/utils/dateUtil";
+import CrudToolbarLeft from "@/components/CURD/CrudToolbarLeft.vue";
+import CrudToolbarRight from "@/components/CURD/CrudToolbarRight.vue";
+import PageSearch from "@/components/CURD/PageSearch.vue";
+import PageContent from "@/components/CURD/PageContent.vue";
+import EnhancedDialog from "@/components/CURD/EnhancedDialog.vue";
+import type { ISearchConfig, IContentConfig } from "@/components/CURD/types";
+import { useCrudList } from "@/components/CURD/useCrudList";
+import { computed, ref, reactive, unref } from "vue";
+import { fetchAllPages } from "@/utils/fetchAllPages";
 
-const queryFormRef = ref();
+const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
 const dataFormRef = ref();
-const total = ref(0);
-const selectIds = ref<number[]>([]);
-const loading = ref(false);
 
-const isExpand = ref(false);
-const isExpandable = ref(true);
+const searchConfig = reactive<ISearchConfig>({
+  permPrefix: "module_system:dict_type",
+  colon: true,
+  isExpandable: true,
+  showNumber: 2,
+  form: { labelWidth: "auto" },
+  formItems: [
+    {
+      prop: "dict_name",
+      label: "字典名称",
+      type: "input",
+      attrs: { placeholder: "请输入字典名称", clearable: true },
+    },
+    {
+      prop: "dict_type",
+      label: "字典类型",
+      type: "input",
+      attrs: { placeholder: "请输入字典类型", clearable: true },
+    },
+    {
+      prop: "status",
+      label: "状态",
+      type: "select",
+      options: [
+        { label: "启用", value: "0" },
+        { label: "停用", value: "1" },
+      ],
+      attrs: { placeholder: "请选择状态", clearable: true, style: { width: "167.5px" } },
+    },
+    {
+      prop: "created_time",
+      label: "创建时间",
+      type: "date-picker",
+      attrs: {
+        type: "datetimerange",
+        rangeSeparator: "至",
+        startPlaceholder: "开始日期",
+        endPlaceholder: "结束日期",
+        format: "YYYY-MM-DD HH:mm:ss",
+        valueFormat: "YYYY-MM-DD HH:mm:ss",
+        style: { width: "340px" },
+      },
+    },
+  ],
+});
 
-// 分页表单
-const pageTableData = ref<DictTable[]>([]);
-
-// 导出弹窗显示状态 & 选中行
-const exportsDialogVisible = ref(false);
-const selectionRows = ref<DictTable[]>([]);
-
-// 表格列配置
-const tableColumns = ref([
+const contentCols = reactive<
+  Array<{
+    prop?: string;
+    label?: string;
+    show?: boolean;
+  }>
+>([
   { prop: "selection", label: "选择框", show: true },
   { prop: "index", label: "序号", show: true },
   { prop: "dict_name", label: "字典名称", show: true },
@@ -440,21 +361,49 @@ const tableColumns = ref([
   { prop: "operation", label: "操作", show: true },
 ]);
 
-// 详情表单
-const detailFormData = ref<DictTable>({});
+const dictStore = useDictStore();
 
-// 分页查询参数
-const queryFormData = reactive<DictPageQuery>({
-  page_no: 1,
-  page_size: 10,
-  dict_name: undefined,
-  dict_type: undefined,
-  status: undefined,
-  created_time: undefined,
-  updated_time: undefined,
+const contentConfig = reactive<IContentConfig<DictPageQuery>>({
+  permPrefix: "module_system:dict_type",
+  pk: "id",
+  cols: contentCols as IContentConfig["cols"],
+  hideColumnFilter: false,
+  toolbar: [],
+  defaultToolbar: ["refresh", "filter"],
+  pagination: {
+    pageSize: 10,
+    pageSizes: [10, 20, 30, 50],
+  },
+  request: { page_no: "page_no", page_size: "page_size" },
+  indexAction: async (params) => {
+    const res = await DictAPI.listDictType(params as DictPageQuery);
+    return {
+      total: res.data.data.total,
+      list: res.data.data.items,
+    };
+  },
+  deleteAction: async (ids) => {
+    await DictAPI.deleteDictType(
+      ids
+        .split(",")
+        .map((s) => Number(s.trim()))
+        .filter((n) => !Number.isNaN(n))
+    );
+    dictStore.clearDictData();
+    const dictTypes = Object.keys(dictStore.dictData);
+    if (dictTypes.length > 0) {
+      await dictStore.getDict(dictTypes);
+    }
+  },
+  deleteConfirm: {
+    title: "警告",
+    message: "确认删除该项数据?",
+    type: "warning",
+  },
 });
 
-// 编辑表单
+const detailFormData = ref<DictTable>({});
+
 const formData = reactive<DictForm>({
   id: undefined,
   dict_name: "",
@@ -463,84 +412,18 @@ const formData = reactive<DictForm>({
   description: undefined,
 });
 
-// 弹窗状态
 const dialogVisible = reactive({
   title: "",
   visible: false,
   type: "create" as "create" | "update" | "detail",
 });
 
-// 表单验证规则
 const rules = reactive({
   dict_name: [{ required: true, message: "请输入字典名称", trigger: "blur" }],
   dict_type: [{ required: true, message: "请选择字典类型", trigger: "blur" }],
   status: [{ required: true, message: "请选择字典状态", trigger: "blur" }],
 });
 
-// 日期范围临时变量
-const dateRange = ref<[Date, Date] | []>([]);
-
-// 字典 store
-const dictStore = useDictStore();
-
-// 处理日期范围变化
-function handleDateRangeChange(range: [Date, Date]) {
-  dateRange.value = range;
-  if (range && range.length === 2) {
-    queryFormData.created_time = [formatToDateTime(range[0]), formatToDateTime(range[1])];
-  } else {
-    queryFormData.created_time = undefined;
-  }
-}
-
-// 列表刷新
-async function handleRefresh() {
-  await loadingData();
-}
-
-// 抽屉显隐
-const drawerVisible = ref(false);
-
-// 添加字典类型变量
-const currentDictType = ref("");
-
-// 添加字典名称变量
-const currentDictLabel = ref("");
-
-// 添加字典类型ID变量
-const currentDictTypeId = ref(1);
-
-// 加载表格数据
-async function loadingData() {
-  loading.value = true;
-  try {
-    const response = await DictAPI.listDictType(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();
-}
-
-// 重置查询
-async function handleResetQuery() {
-  queryFormRef.value.resetFields();
-  queryFormData.page_no = 1;
-  // 额外清空日期范围与时间查询参数
-  dateRange.value = [];
-  queryFormData.created_time = undefined;
-  loadingData();
-}
-
-// 定义初始表单数据常量
 const initialFormData: DictForm = {
   id: undefined,
   dict_name: "",
@@ -549,29 +432,72 @@ const initialFormData: DictForm = {
   description: undefined,
 };
 
-// 重置表单
+const exportsDialogVisible = ref(false);
+
+const exportQueryParams = computed(() => searchRef.value?.getQueryParams() ?? {});
+
+const exportPageData = computed(() => {
+  const pd = contentRef.value?.pageData;
+  return (unref(pd) ?? []) as DictTable[];
+});
+
+const exportSelectionData = computed(
+  () => (contentRef.value?.getSelectionData() ?? []) as DictTable[]
+);
+
+const exportColumns = [
+  { prop: "dict_name", label: "字典名称" },
+  { prop: "dict_type", label: "字典类型" },
+  { prop: "status", label: "状态" },
+  { prop: "description", label: "描述" },
+  { prop: "created_time", label: "创建时间" },
+  { prop: "updated_time", label: "更新时间" },
+];
+
+const curdContentConfig = {
+  permPrefix: "module_system:dict_type",
+  cols: exportColumns as any,
+  exportsAction: async (params: any) => {
+    const query: Record<string, unknown> = { ...params };
+    if (typeof query.status === "string") query.status = query.status === "true";
+    return fetchAllPages({
+      initialQuery: query,
+      fetchPage: async (q) => {
+        const res = await DictAPI.listDictType(q as unknown as DictPageQuery);
+        return {
+          total: res.data?.data?.total ?? 0,
+          list: res.data?.data?.items ?? [],
+        };
+      },
+    });
+  },
+} as unknown as IContentConfig;
+
+function handleOpenExportsModal() {
+  exportsDialogVisible.value = true;
+}
+
+function handleRowDelete(id: number) {
+  contentRef.value?.handleDelete(id);
+}
+
+function handleToggleSearch() {
+  searchRef.value?.toggleVisible();
+}
+
 async function resetForm() {
   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);
-  selectionRows.value = selection;
-}
-
-// 关闭弹窗
 async function handleCloseDialog() {
   dialogVisible.visible = false;
-  resetForm();
+  await resetForm();
 }
 
-// 打开系统配置弹窗
 async function handleOpenDialog(type: "create" | "update" | "detail", id?: number) {
   dialogVisible.type = type;
   if (id) {
@@ -590,64 +516,46 @@ async function handleOpenDialog(type: "create" | "update" | "detail", id?: numbe
   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 {
+      try {
+        if (id) {
           await DictAPI.updateDictType(id, { id, ...formData });
-          dialogVisible.visible = false;
-          resetForm();
-          handleResetQuery();
-          // 重新加载字典以同步到浏览器内存
-          dictStore.clearDictData();
-          if (formData.dict_type) {
-            await dictStore.getDict([formData.dict_type]);
-          }
-        } catch (error: any) {
-          console.error(error);
-        } finally {
-          loading.value = false;
-        }
-      } else {
-        try {
+        } else {
           await DictAPI.createDictType(formData);
-          dialogVisible.visible = false;
-          resetForm();
-          handleResetQuery();
-          // 重新加载字典以同步到浏览器内存
-          dictStore.clearDictData();
-          if (formData.dict_type) {
-            await dictStore.getDict([formData.dict_type]);
-          }
-        } catch (error: any) {
-          console.error(error);
-        } finally {
-          loading.value = false;
         }
+        dialogVisible.visible = false;
+        await resetForm();
+        refreshList();
+        dictStore.clearDictData();
+        if (formData.dict_type) {
+          await dictStore.getDict([formData.dict_type]);
+        }
+      } catch (error: any) {
+        console.error(error);
       }
     }
   });
 }
 
-// 删除、批量删除
-async function handleDelete(ids: number[]) {
-  ElMessageBox.confirm("确认删除该项数据?", "警告", {
+async function handleMoreClick(status: string) {
+  const rows = contentRef.value?.getSelectionData() as DictTable[] | undefined;
+  const ids = (rows ?? []).map((r) => r.id).filter((id): id is number => id != null);
+  if (!ids.length) {
+    ElMessage.warning("请先选择要操作的数据");
+    return;
+  }
+  ElMessageBox.confirm(`确认${status === "0" ? "启用" : "停用"}该项数据?`, "警告", {
     confirmButtonText: "确定",
     cancelButtonText: "取消",
     type: "warning",
   })
     .then(async () => {
       try {
-        loading.value = true;
-        await DictAPI.deleteDictType(ids);
-        handleResetQuery();
-        // 重新加载字典以同步到浏览器内存
+        await DictAPI.batchDictType({ ids, status });
+        refreshList();
         dictStore.clearDictData();
         const dictTypes = Object.keys(dictStore.dictData);
         if (dictTypes.length > 0) {
@@ -655,8 +563,6 @@ async function handleDelete(ids: number[]) {
         }
       } catch (error: any) {
         console.error(error);
-      } finally {
-        loading.value = false;
       }
     })
     .catch(() => {
@@ -664,41 +570,10 @@ async function handleDelete(ids: number[]) {
     });
 }
 
-// 打开导出弹窗
-function handleOpenExportsModal() {
-  exportsDialogVisible.value = true;
-}
-
-// 批量启用/停用
-async function handleMoreClick(status: string) {
-  if (selectIds.value.length) {
-    ElMessageBox.confirm(`确认${status === "0" ? "启用" : "停用"}该项数据?`, "警告", {
-      confirmButtonText: "确定",
-      cancelButtonText: "取消",
-      type: "warning",
-    })
-      .then(async () => {
-        try {
-          loading.value = true;
-          await DictAPI.batchDictType({ ids: selectIds.value, status });
-          handleResetQuery();
-          // 重新加载字典以同步到浏览器内存
-          dictStore.clearDictData();
-          const dictTypes = Object.keys(dictStore.dictData);
-          if (dictTypes.length > 0) {
-            await dictStore.getDict(dictTypes);
-          }
-        } catch (error: any) {
-          console.error(error);
-        } finally {
-          loading.value = false;
-        }
-      })
-      .catch(() => {
-        ElMessageBox.close();
-      });
-  }
-}
+const drawerVisible = ref(false);
+const currentDictType = ref("");
+const currentDictLabel = ref("");
+const currentDictTypeId = ref(1);
 
 function handleDictDataDrawer(dictType: DictTable) {
   currentDictType.value = dictType.dict_type || "";
@@ -706,42 +581,4 @@ function handleDictDataDrawer(dictType: DictTable) {
   currentDictTypeId.value = dictType.id || 0;
   drawerVisible.value = true;
 }
-
-// 导出字段
-const exportColumns = [
-  { prop: "dict_name", label: "字典名称" },
-  { prop: "dict_type", label: "字典类型" },
-  { prop: "status", label: "状态" },
-  { prop: "description", label: "描述" },
-  { prop: "created_time", label: "创建时间" },
-  { prop: "updated_time", label: "更新时间" },
-];
-
-// 导出配置（用于导出弹窗）
-const curdContentConfig = {
-  permPrefix: "module_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.listDictType(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>
diff --git a/frontend/src/views/module_system/log/index.vue b/frontend/src/views/module_system/log/index.vue
index 16fc2057..492ababd 100644
--- a/frontend/src/views/module_system/log/index.vue
+++ b/frontend/src/views/module_system/log/index.vue
@@ -1,97 +1,23 @@
 <!-- 日志管理 -->
 <template>
   <div class="app-container">
-    <!-- 搜索区域 -->
-    <el-card class="search-container">
-      <el-form
-        ref="queryFormRef"
-        :model="queryFormData"
-        :inline="true"
-        label-suffix=":"
-        @submit.prevent="handleQuery"
-      >
-        <el-form-item prop="request_path" label="请求路径">
-          <el-input v-model="queryFormData.request_path" placeholder="请输入请求路径" clearable />
-        </el-form-item>
-        <el-form-item prop="type" label="日志类型">
-          <el-select
-            v-model="queryFormData.type"
-            placeholder="请选择日志类型"
-            style="width: 167.5px"
-            clearable
-          >
-            <el-option label="登录日志" value="1" />
-            <el-option label="操作日志" value="2" />
-          </el-select>
-        </el-form-item>
-        <el-form-item v-if="isExpand" prop="created_id" label="创建人">
-          <UserTableSelect
-            v-model="queryFormData.created_id"
-            @confirm-click="handleConfirm"
-            @clear-click="handleQuery"
-          />
-        </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="['module_system:log:query']"
-            type="primary"
-            icon="search"
-            native-type="submit"
-          >
-            查询
-          </el-button>
-          <el-button
-            v-hasPerm="['module_system:log: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>
-    </el-card>
+    <PageSearch
+      ref="searchRef"
+      :search-config="searchConfig"
+      @query-click="handleQueryClick"
+      @reset-click="handleResetClick"
+    />
 
-    <!-- 内容区域 -->
-    <el-card class="data-table">
-      <!-- 功能区域 -->
-      <div class="data-table__toolbar">
-        <div class="data-table__toolbar--left">
-          <el-row :gutter="10">
-            <el-col :span="1.5">
-              <el-button
-                v-hasPerm="['module_system:log:delete']"
-                type="danger"
-                icon="delete"
-                :disabled="selectIds.length === 0"
-                @click="handleDelete(selectIds)"
-              >
-                批量删除
-              </el-button>
-            </el-col>
-          </el-row>
-        </div>
+    <PageContent ref="contentRef" :content-config="contentConfig">
+      <template #toolbar="{ toolbarRight, onToolbar, removeIds, cols }">
+        <CrudToolbarLeft
+          :remove-ids="removeIds"
+          :perm-delete="['module_system:log:delete']"
+          @delete="onToolbar('delete')"
+        />
         <div class="data-table__toolbar--right">
-          <el-row :gutter="10">
-            <el-col :span="1.5">
+          <CrudToolbarRight :buttons="toolbarRight" :cols="cols" :on-toolbar="onToolbar">
+            <template #prepend>
               <el-tooltip content="导出">
                 <el-button
                   v-hasPerm="['module_system:log:export']"
@@ -101,145 +27,194 @@
                   @click="handleOpenExportsModal"
                 />
               </el-tooltip>
-            </el-col>
-            <el-col :span="1.5">
-              <el-tooltip content="刷新">
-                <el-button
-                  v-hasPerm="['module_system:log:query']"
-                  type="success"
-                  icon="refresh"
-                  circle
-                  @click="handleRefresh"
-                />
-              </el-tooltip>
-            </el-col>
-          </el-row>
+            </template>
+          </CrudToolbarRight>
         </div>
-      </div>
-
-      <!-- 表格区域：系统配置列表 -->
-      <div class="data-table__content">
-        <el-table
-          ref="dataTableRef"
-          v-loading="loading"
-          :data="pageTableData"
-          height="calc(100vh - 350px)"
-          max-height="calc(100vh - 350px)"
-          border
-          stripe
-          @selection-change="handleSelectionChange"
-        >
-          <template #empty>
-            <el-empty :image-size="80" description="暂无数据" />
-          </template>
-          <el-table-column prop="selection" type="selection" min-width="55" align="center" />
-          <el-table-column type="index" 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 label="日志类型" prop="type" min-width="100">
-            <template #default="scope">
-              <el-tag :type="scope.row.type === 1 ? 'success' : 'primary'">
-                {{ scope.row.type === 1 ? "登录日志" : "操作日志" }}
-              </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column
-            label="请求路径"
-            prop="request_path"
-            min-width="200"
-            show-overflow-tooltip
-          />
-          <el-table-column label="请求方法" prop="request_method" min-width="100">
-            <template #default="scope">
-              <el-tag :type="getMethodType(scope.row.request_method)">
-                {{ scope.row.request_method }}
-              </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column label="状态码" prop="response_code" min-width="100">
-            <template #default="scope">
-              <el-tag :type="getStatusCodeType(scope.row.response_code)">
-                {{ scope.row.response_code }}
-              </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column label="请求IP" prop="request_ip" min-width="180" show-overflow-tooltip>
-            <template #default="scope">
-              <el-text>{{ scope.row.request_ip }}</el-text>
-              <CopyButton
-                v-if="scope.row.request_ip"
-                :text="scope.row.request_ip"
-                :style="{ marginLeft: '2px' }"
-              />
-            </template>
-          </el-table-column>
-          <el-table-column label="处理时间" prop="process_time" min-width="120" />
-          <el-table-column
-            label="浏览器"
-            prop="request_browser"
-            min-width="220"
-            show-overflow-tooltip
-          />
-          <el-table-column label="系统" prop="request_os" min-width="100" />
-          <el-table-column label="描述" prop="description" min-width="120" show-overflow-tooltip />
-          <el-table-column label="创建时间" prop="created_time" min-width="200" sortable />
-          <el-table-column label="创建人" prop="created_id" min-width="120">
-            <template #default="scope">
-              {{ scope.row.created_by?.name }}
-            </template>
-          </el-table-column>
-          <el-table-column label="更新人" prop="updated_id" min-width="120">
-            <template #default="scope">
-              {{ scope.row.updated_by?.name }}
-            </template>
-          </el-table-column>
-          <el-table-column label="操作" fixed="right" align="center" min-width="150">
-            <template #default="scope">
-              <el-button
-                v-hasPerm="['module_system:log:detail']"
-                type="info"
-                size="small"
-                link
-                icon="document"
-                @click="handleOpenDialog('detail', scope.row.id)"
-              >
-                详情
-              </el-button>
-              <el-button
-                v-hasPerm="['module_system:log:delete']"
-                type="danger"
-                size="small"
-                link
-                icon="delete"
-                @click="handleDelete([scope.row.id])"
-              >
-                删除
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-
-      <!-- 分页区域 -->
-      <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
+      <template #table="{ data, loading, tableRef, onSelectionChange, pagination }">
+        <div class="data-table__content">
+          <el-table
+            :ref="tableRef as any"
+            v-loading="loading"
+            row-key="id"
+            :data="data"
+            height="100%"
+            border
+            stripe
+            @selection-change="onSelectionChange"
+          >
+            <template #empty>
+              <el-empty :image-size="80" description="暂无数据" />
+            </template>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'selection')?.show"
+              type="selection"
+              min-width="55"
+              align="center"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'index')?.show"
+              fixed
+              label="序号"
+              min-width="60"
+            >
+              <template #default="scope">
+                {{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'type')?.show"
+              label="日志类型"
+              prop="type"
+              min-width="100"
+            >
+              <template #default="scope">
+                <el-tag :type="scope.row.type === 1 ? 'success' : 'primary'">
+                  {{ scope.row.type === 1 ? "登录日志" : "操作日志" }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'request_path')?.show"
+              label="请求路径"
+              prop="request_path"
+              min-width="200"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'request_method')?.show"
+              label="请求方法"
+              prop="request_method"
+              min-width="100"
+            >
+              <template #default="scope">
+                <el-tag :type="getMethodType(scope.row.request_method)">
+                  {{ scope.row.request_method }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'response_code')?.show"
+              label="状态码"
+              prop="response_code"
+              min-width="100"
+            >
+              <template #default="scope">
+                <el-tag :type="getStatusCodeType(scope.row.response_code)">
+                  {{ scope.row.response_code }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'request_ip')?.show"
+              label="请求IP"
+              prop="request_ip"
+              min-width="180"
+              show-overflow-tooltip
+            >
+              <template #default="scope">
+                <el-text>{{ scope.row.request_ip }}</el-text>
+                <CopyButton
+                  v-if="scope.row.request_ip"
+                  :text="scope.row.request_ip"
+                  :style="{ marginLeft: '2px' }"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'process_time')?.show"
+              label="处理时间"
+              prop="process_time"
+              min-width="120"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'request_browser')?.show"
+              label="浏览器"
+              prop="request_browser"
+              min-width="220"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'request_os')?.show"
+              label="系统"
+              prop="request_os"
+              min-width="100"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'description')?.show"
+              label="描述"
+              prop="description"
+              min-width="120"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'created_time')?.show"
+              label="创建时间"
+              prop="created_time"
+              min-width="200"
+              sortable
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'created_id')?.show"
+              label="创建人"
+              prop="created_id"
+              min-width="120"
+            >
+              <template #default="scope">
+                {{ scope.row.created_by?.name }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'updated_id')?.show"
+              label="更新人"
+              prop="updated_id"
+              min-width="120"
+            >
+              <template #default="scope">
+                {{ scope.row.updated_by?.name }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'operation')?.show"
+              fixed="right"
+              label="操作"
+              align="center"
+              min-width="150"
+            >
+              <template #default="scope">
+                <el-button
+                  v-hasPerm="['module_system:log:detail']"
+                  type="info"
+                  size="small"
+                  link
+                  icon="View"
+                  @click="handleOpenDialog('detail', scope.row.id)"
+                >
+                  详情
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_system:log:delete']"
+                  type="danger"
+                  size="small"
+                  link
+                  icon="delete"
+                  @click="handleRowDelete(scope.row.id)"
+                >
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </template>
+    </PageContent>
+
+    <EnhancedDialog
       v-model="dialogVisible.visible"
       :title="dialogVisible.title"
       @close="handleCloseDialog"
     >
-      <!-- 详情 -->
       <template v-if="dialogVisible.type === 'detail'">
         <el-descriptions :column="8" border label-width="200px">
           <el-descriptions-item label="日志类型" :span="2">
@@ -301,7 +276,6 @@
 
       <template #footer>
         <div class="dialog-footer">
-          <!-- 详情弹窗不需要确定按钮的提交逻辑 -->
           <el-button @click="handleCloseDialog">取消</el-button>
           <el-button
             v-hasPerm="['module_system:log:detail']"
@@ -312,15 +286,14 @@
           </el-button>
         </div>
       </template>
-    </el-dialog>
+    </EnhancedDialog>
 
-    <!-- 导出弹窗 -->
     <ExportModal
       v-model="exportsDialogVisible"
       :content-config="curdContentConfig"
-      :query-params="queryFormData"
-      :page-data="pageTableData"
-      :selection-data="selectionRows"
+      :query-params="exportQueryParams"
+      :page-data="exportPageData"
+      :selection-data="exportSelectionData"
     />
   </div>
 </template>
@@ -331,68 +304,145 @@ defineOptions({
   inheritAttrs: false,
 });
 
+import { ref, reactive, computed, unref, markRaw, nextTick } from "vue";
+import { fetchAllPages } from "@/utils/fetchAllPages";
 import LogAPI, { LogTable, LogPageQuery } from "@/api/module_system/log";
 import UserTableSelect from "@/views/module_system/user/components/UserTableSelect.vue";
 import ExportModal from "@/components/CURD/ExportModal.vue";
+import CrudToolbarLeft from "@/components/CURD/CrudToolbarLeft.vue";
+import CrudToolbarRight from "@/components/CURD/CrudToolbarRight.vue";
+import PageSearch from "@/components/CURD/PageSearch.vue";
+import PageContent from "@/components/CURD/PageContent.vue";
+import EnhancedDialog from "@/components/CURD/EnhancedDialog.vue";
 import JsonPretty from "@/components/JsonPretty/index.vue";
-import type { IContentConfig } from "@/components/CURD/types";
-import { formatToDateTime } from "@/utils/dateUtil";
+import { useCrudList } from "@/components/CURD/useCrudList";
+import type { IContentConfig, ISearchConfig } from "@/components/CURD/types";
 
-const queryFormRef = ref();
-const dataFormRef = ref();
-const total = ref(0);
-const selectIds = ref<number[]>([]);
-const loading = ref(false);
-const isExpand = ref(false);
-const isExpandable = ref(true);
+const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
 
-// 分页表单
-const pageTableData = ref<LogTable[]>([]);
+function triggerUserSearch() {
+  nextTick(() => refreshList());
+}
 
-// 导出弹窗状态和选中行数据
-const exportsDialogVisible = ref(false);
-const selectionRows = ref<LogTable[]>([]);
-
-// 详情表单
-const formData = ref<LogTable>({});
-
-// 分页查询参数
-const queryFormData = reactive<LogPageQuery>({
-  page_no: 1,
-  page_size: 10,
-  type: undefined,
-  request_path: undefined,
-  creator_name: undefined,
-  created_time: undefined,
-  created_id: undefined,
-  updated_id: undefined,
+const searchConfig = reactive<ISearchConfig>({
+  permPrefix: "module_system:log",
+  colon: true,
+  isExpandable: true,
+  showNumber: 2,
+  form: { labelWidth: "auto" },
+  formItems: [
+    {
+      prop: "request_path",
+      label: "请求路径",
+      type: "input",
+      attrs: { placeholder: "请输入请求路径", clearable: true },
+    },
+    {
+      prop: "type",
+      label: "日志类型",
+      type: "select",
+      options: [
+        { label: "登录日志", value: 1 },
+        { label: "操作日志", value: 2 },
+      ],
+      attrs: { placeholder: "请选择日志类型", clearable: true, style: { width: "167.5px" } },
+    },
+    {
+      prop: "created_id",
+      label: "创建人",
+      type: "user-table-select",
+      initialValue: null,
+      events: {
+        "confirm-click": triggerUserSearch,
+        "clear-click": triggerUserSearch,
+      },
+    },
+    {
+      prop: "created_time",
+      label: "创建时间",
+      type: "date-picker",
+      initialValue: [],
+      attrs: {
+        type: "datetimerange",
+        valueFormat: "YYYY-MM-DD HH:mm:ss",
+        rangeSeparator: "至",
+        startPlaceholder: "开始日期",
+        endPlaceholder: "结束日期",
+        style: { width: "340px" },
+      },
+    },
+  ],
+  customComponents: {
+    "user-table-select": markRaw(UserTableSelect),
+  },
 });
 
-// 弹窗状态
+const contentCols = reactive<
+  Array<{
+    prop?: string;
+    label?: string;
+    show?: boolean;
+  }>
+>([
+  { prop: "selection", label: "选择框", show: true },
+  { prop: "index", label: "序号", show: true },
+  { prop: "type", label: "日志类型", show: true },
+  { prop: "request_path", label: "请求路径", show: true },
+  { prop: "request_method", label: "请求方法", show: true },
+  { prop: "response_code", label: "状态码", show: true },
+  { prop: "request_ip", label: "请求IP", show: true },
+  { prop: "process_time", label: "处理时间", show: true },
+  { prop: "request_browser", label: "浏览器", show: true },
+  { prop: "request_os", label: "系统", show: true },
+  { prop: "description", label: "描述", show: true },
+  { prop: "created_time", label: "创建时间", show: true },
+  { prop: "created_id", label: "创建人", show: true },
+  { prop: "updated_id", label: "更新人", show: true },
+  { prop: "operation", label: "操作", show: true },
+]);
+
+const contentConfig = reactive<IContentConfig<LogPageQuery>>({
+  permPrefix: "module_system:log",
+  pk: "id",
+  cols: contentCols as IContentConfig["cols"],
+  hideColumnFilter: false,
+  toolbar: [],
+  defaultToolbar: ["refresh", "filter"],
+  pagination: {
+    pageSize: 10,
+    pageSizes: [10, 20, 30, 50],
+  },
+  request: { page_no: "page_no", page_size: "page_size" },
+  indexAction: async (params) => {
+    const res = await LogAPI.listLog(params as LogPageQuery);
+    return {
+      total: res.data.data.total,
+      list: res.data.data.items,
+    };
+  },
+  deleteAction: async (ids) => {
+    await LogAPI.deleteLog(
+      ids
+        .split(",")
+        .map((s) => Number(s.trim()))
+        .filter((n) => !Number.isNaN(n))
+    );
+  },
+  deleteConfirm: {
+    title: "警告",
+    message: "确认删除该项数据?",
+    type: "warning",
+  },
+});
+
+const formData = ref<LogTable>({});
+
 const dialogVisible = reactive({
   title: "",
   visible: false,
   type: "create" as "create" | "update" | "detail",
 });
 
-// 日期范围临时变量
-const dateRange = ref<[Date, Date] | []>([]);
-
-// 处理日期范围变化
-function handleDateRangeChange(range: [Date, Date]) {
-  dateRange.value = range;
-  if (range && range.length === 2) {
-    queryFormData.created_time = [formatToDateTime(range[0]), formatToDateTime(range[1])];
-  } else {
-    queryFormData.created_time = undefined;
-  }
-}
-
-// 列表刷新
-async function handleRefresh() {
-  await loadingData();
-}
-
 const getStatusCodeType = (code?: number) => {
   if (code === undefined) {
     return "info";
@@ -425,63 +475,15 @@ const getMethodType = (method?: string) => {
   }
 };
 
-// 加载表格数据
-async function loadingData() {
-  loading.value = true;
-  try {
-    const response = await LogAPI.listLog(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();
-}
-
-// 选择创建人后触发查询
-function handleConfirm() {
-  handleQuery();
-}
-
-// 重置查询
-async function handleResetQuery() {
-  queryFormRef.value.resetFields();
-  queryFormData.page_no = 1;
-  // 额外清空日期范围与时间查询参数
-  dateRange.value = [];
-  queryFormData.created_time = undefined;
-  loadingData();
-}
-
-// 重置表单
 async function resetForm() {
-  if (dataFormRef.value) {
-    dataFormRef.value.resetFields();
-    dataFormRef.value.clearValidate();
-  }
   formData.value.id = undefined;
 }
 
-// 行复选框选中项变化
-async function handleSelectionChange(selection: any) {
-  selectIds.value = selection.map((item: any) => item.id);
-  selectionRows.value = selection;
-}
-
-// 关闭弹窗
 async function handleCloseDialog() {
   dialogVisible.visible = false;
-  resetForm();
+  await resetForm();
 }
 
-// 打开日志详情弹窗
 async function handleOpenDialog(type: "create" | "update" | "detail", id: number) {
   dialogVisible.type = type;
   if (id) {
@@ -494,35 +496,23 @@ async function handleOpenDialog(type: "create" | "update" | "detail", id: number
   dialogVisible.visible = true;
 }
 
-// 删除、批量删除
-async function handleDelete(ids: number[]) {
-  ElMessageBox.confirm("确认删除该项数据?", "警告", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    type: "warning",
-  })
-    .then(async () => {
-      try {
-        loading.value = true;
-        await LogAPI.deleteLog(ids);
-        handleResetQuery();
-      } catch (error: any) {
-        console.error(error);
-      } finally {
-        loading.value = false;
-      }
-    })
-    .catch(() => {
-      ElMessageBox.close();
-    });
+function handleRowDelete(id: number) {
+  contentRef.value?.handleDelete(id);
 }
 
-// 打开导出弹窗
-function handleOpenExportsModal() {
-  exportsDialogVisible.value = true;
-}
+const exportsDialogVisible = ref(false);
+
+const exportQueryParams = computed(() => searchRef.value?.getQueryParams() ?? {});
+
+const exportPageData = computed(() => {
+  const pd = contentRef.value?.pageData;
+  return (unref(pd) ?? []) as LogTable[];
+});
+
+const exportSelectionData = computed(
+  () => (contentRef.value?.getSelectionData() ?? []) as LogTable[]
+);
 
-// 导出字段
 const exportColumns = [
   { prop: "type", label: "日志类型" },
   { prop: "request_path", label: "请求路径" },
@@ -538,30 +528,27 @@ const exportColumns = [
   { prop: "updated_time", label: "更新时间" },
 ];
 
-// 导入/导出配置（用于导出弹窗）
 const curdContentConfig = {
   permPrefix: "module_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.listLog(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;
+    const query: Record<string, unknown> = { ...params };
+    return fetchAllPages({
+      initialQuery: query,
+      fetchPage: async (q) => {
+        const res = await LogAPI.listLog(q as unknown as LogPageQuery);
+        return {
+          total: res.data?.data?.total ?? 0,
+          list: res.data?.data?.items ?? [],
+        };
+      },
+    });
   },
 } as unknown as IContentConfig;
 
-onMounted(() => {
-  loadingData();
-});
+function handleOpenExportsModal() {
+  exportsDialogVisible.value = true;
+}
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/frontend/src/views/module_system/menu/index.vue b/frontend/src/views/module_system/menu/index.vue
index e90ee168..8f798462 100644
--- a/frontend/src/views/module_system/menu/index.vue
+++ b/frontend/src/views/module_system/menu/index.vue
@@ -1,278 +1,182 @@
 <!-- 菜单管理 -->
 <template>
   <div class="app-container">
-    <!-- 搜索区域 -->
-    <el-card class="search-container">
-      <el-form
-        ref="queryFormRef"
-        :model="queryFormData"
-        :inline="true"
-        label-suffix=":"
-        @submit.prevent="handleQuery"
-      >
-        <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="0" label="启用" />
-            <el-option value="1" 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="['module_system:menu:query']"
-            type="primary"
-            icon="search"
-            native-type="submit"
-          >
-            查询
-          </el-button>
-          <el-button
-            v-hasPerm="['module_system:menu: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>
-    </el-card>
+    <PageSearch
+      ref="searchRef"
+      :search-config="searchConfig"
+      @query-click="handleQueryClick"
+      @reset-click="handleResetClick"
+    />
 
-    <!-- 内容区域 -->
-    <el-card class="data-table">
-      <!-- 功能区域 -->
-      <div class="data-table__toolbar">
-        <div class="data-table__toolbar--left">
-          <el-row :gutter="10">
-            <el-col :span="1.5">
-              <el-button
-                v-hasPerm="['module_system:menu:create']"
-                type="success"
-                icon="plus"
-                @click="handleOpenDialog('create')"
-              >
-                新增
-              </el-button>
-            </el-col>
-            <el-col :span="1.5">
-              <el-button
-                v-hasPerm="['module_system:menu: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="['module_system:menu:patch']" 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('0')">
-                      批量启用
-                    </el-dropdown-item>
-                    <el-dropdown-item icon="CircleClose" @click="handleMoreClick('1')">
-                      批量停用
-                    </el-dropdown-item>
-                  </el-dropdown-menu>
-                </template>
-              </el-dropdown>
-            </el-col>
-          </el-row>
-        </div>
+    <PageContent ref="contentRef" :content-config="contentConfig">
+      <template #toolbar="{ toolbarRight, onToolbar, removeIds, cols }">
+        <CrudToolbarLeft
+          :remove-ids="removeIds"
+          :perm-create="['module_system:menu:create']"
+          :perm-delete="['module_system:menu:delete']"
+          :perm-patch="['module_system:menu:patch']"
+          @add="handleOpenDialog('create')"
+          @delete="onToolbar('delete')"
+          @more="handleMoreClick"
+        />
         <div class="data-table__toolbar--right">
-          <el-row :gutter="10">
-            <el-col :span="1.5">
-              <el-tooltip content="刷新">
-                <el-button
-                  v-hasPerm="['module_system:menu:query']"
-                  type="primary"
-                  icon="refresh"
-                  circle
-                  @click="handleRefresh"
-                />
-              </el-tooltip>
-            </el-col>
-          </el-row>
+          <CrudToolbarRight :buttons="toolbarRight" :cols="cols" :on-toolbar="onToolbar" />
         </div>
-      </div>
+      </template>
 
-      <!-- 表格区域 -->
-      <div class="data-table__content">
-        <el-table
-          ref="dataTableRef"
-          v-loading="loading"
-          row-key="id"
-          :data="pageTableData"
-          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
-          height="calc(100vh - 300px)"
-          max-height="calc(100vh - 300px)"
-          border
-          @selection-change="handleSelectionChange"
-          @row-click="handleRowClick"
-        >
-          <template #empty>
-            <el-empty :image-size="80" description="暂无数据" />
-          </template>
-          <el-table-column type="selection" min-width="55" align="center" />
-          <el-table-column type="index" fixed label="序号" min-width="60" />
-          <el-table-column label="菜单名称" prop="name" min-width="240" />
-          <el-table-column label="图标" prop="icon" min-width="80" align="center">
-            <template #default="scope">
-              <template v-if="scope.row.icon && scope.row.icon.startsWith('el-icon')">
-                <el-icon style="vertical-align: -0.15em">
-                  <component :is="scope.row.icon.replace('el-icon-', '')" />
-                </el-icon>
+      <template #table="{ data, loading, tableRef, onSelectionChange }">
+        <div class="data-table__content">
+          <el-table
+            :ref="tableRef as any"
+            v-loading="loading"
+            row-key="id"
+            :data="data"
+            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+            height="100%"
+            border
+            @selection-change="onSelectionChange"
+            @row-click="handleRowClick"
+          >
+            <template #empty>
+              <el-empty :image-size="80" description="暂无数据" />
+            </template>
+            <el-table-column type="selection" min-width="55" align="center" />
+            <el-table-column type="index" fixed label="序号" min-width="60" />
+            <el-table-column label="菜单名称" prop="name" min-width="240" />
+            <el-table-column label="图标" prop="icon" min-width="80" align="center">
+              <template #default="scope">
+                <template v-if="scope.row.icon && scope.row.icon.startsWith('el-icon')">
+                  <el-icon style="vertical-align: -0.15em">
+                    <component :is="scope.row.icon.replace('el-icon-', '')" />
+                  </el-icon>
+                </template>
+                <template v-else-if="scope.row.icon">
+                  <div :class="`i-svg:${scope.row.icon}`" />
+                </template>
               </template>
-              <template v-else-if="scope.row.icon">
-                <div :class="`i-svg:${scope.row.icon}`" />
+            </el-table-column>
+            <el-table-column label="状态" prop="status" min-width="80" align="center">
+              <template #default="scope">
+                <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
+                  {{ scope.row.status === "0" ? "启用" : "停用" }}
+                </el-tag>
               </template>
-            </template>
-          </el-table-column>
-          <el-table-column label="状态" prop="status" min-width="80" align="center">
-            <template #default="scope">
-              <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
-                {{ scope.row.status ? "启用" : "停用" }}
-              </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column label="类型" prop="type" min-width="80" align="center">
-            <template #default="scope">
-              <el-tag v-if="scope.row.type === MenuTypeEnum.CATALOG" type="warning">目录</el-tag>
-              <el-tag v-if="scope.row.type === MenuTypeEnum.MENU" type="success">菜单</el-tag>
-              <el-tag v-if="scope.row.type === MenuTypeEnum.BUTTON" type="danger">按钮</el-tag>
-              <el-tag v-if="scope.row.type === MenuTypeEnum.EXTLINK" type="info">外链</el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column label="排序" prop="order" min-width="80" />
-          <el-table-column label="重定向" prop="redirect" min-width="200" />
-          <el-table-column label="是否缓存" prop="keep_alive" min-width="100">
-            <template #default="scope">
-              <el-tag :type="scope.row.keep_alive ? 'success' : 'danger'">
-                {{ scope.row.keep_alive ? "是" : "否" }}
-              </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column label="是否隐藏" prop="hidden" min-width="100">
-            <template #default="scope">
-              <el-tag :type="scope.row.hidden ? 'success' : 'danger'">
-                {{ scope.row.hidden ? "是" : "否" }}
-              </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column label="显示根路由" prop="always_show" min-width="120">
-            <template #default="scope">
-              <el-tag :type="scope.row.always_show ? 'success' : 'danger'">
-                {{ scope.row.always_show ? "是" : "否" }}
-              </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column label="固定路由" prop="affix" min-width="100">
-            <template #default="scope">
-              <el-tag :type="scope.row.affix ? 'success' : 'danger'">
-                {{ scope.row.affix ? "是" : "否" }}
-              </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column label="菜单标题" prop="title" min-width="200" />
-          <el-table-column
-            label="权限标识"
-            prop="permission"
-            show-overflow-tooltip
-            min-width="220"
-          />
-          <el-table-column label="路由名称" prop="route_name" min-width="200" />
-          <el-table-column label="路由路径" prop="route_path" min-width="200" />
-          <el-table-column
-            label="组件路径"
-            prop="component_path"
-            show-overflow-tooltip
-            min-width="200"
-          />
-          <el-table-column label="路由参数" prop="params" min-width="100" />
-          <el-table-column label="描述" prop="description" show-overflow-tooltip min-width="200" />
-          <el-table-column label="创建时间" prop="created_time" min-width="200" sortable />
-          <el-table-column label="更新时间" prop="updated_time" min-width="200" sortable />
-          <el-table-column fixed="right" label="操作" align="center" min-width="260">
-            <template #default="scope">
-              <el-button
-                v-if="scope.row.type == MenuTypeEnum.CATALOG || scope.row.type == MenuTypeEnum.MENU"
-                v-hasPerm="['module_system:menu:create']"
-                type="success"
-                link
-                size="small"
-                icon="plus"
-                @click.stop="handleOpenDialog('create', undefined, scope.row.id)"
-              >
-                新增
-              </el-button>
-              <el-button
-                v-hasPerm="['module_system:menu:detail']"
-                type="info"
-                size="small"
-                link
-                icon="document"
-                @click="handleOpenDialog('detail', scope.row.id)"
-              >
-                详情
-              </el-button>
-              <el-button
-                v-hasPerm="['module_system:menu:update']"
-                type="primary"
-                size="small"
-                link
-                icon="edit"
-                @click="handleOpenDialog('update', scope.row.id)"
-              >
-                编辑
-              </el-button>
-              <el-button
-                v-hasPerm="['module_system:menu:delete']"
-                type="danger"
-                size="small"
-                link
-                icon="delete"
-                @click="handleDelete([scope.row.id])"
-              >
-                删除
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-    </el-card>
+            </el-table-column>
+            <el-table-column label="类型" prop="type" min-width="80" align="center">
+              <template #default="scope">
+                <el-tag v-if="scope.row.type === MenuTypeEnum.CATALOG" type="warning">目录</el-tag>
+                <el-tag v-if="scope.row.type === MenuTypeEnum.MENU" type="success">菜单</el-tag>
+                <el-tag v-if="scope.row.type === MenuTypeEnum.BUTTON" type="danger">按钮</el-tag>
+                <el-tag v-if="scope.row.type === MenuTypeEnum.EXTLINK" type="info">外链</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="排序" prop="order" min-width="80" />
+            <el-table-column label="重定向" prop="redirect" min-width="200" />
+            <el-table-column label="是否缓存" prop="keep_alive" min-width="100">
+              <template #default="scope">
+                <el-tag :type="scope.row.keep_alive ? 'success' : 'danger'">
+                  {{ scope.row.keep_alive ? "是" : "否" }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="是否隐藏" prop="hidden" min-width="100">
+              <template #default="scope">
+                <el-tag :type="scope.row.hidden ? 'success' : 'danger'">
+                  {{ scope.row.hidden ? "是" : "否" }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="显示根路由" prop="always_show" min-width="120">
+              <template #default="scope">
+                <el-tag :type="scope.row.always_show ? 'success' : 'danger'">
+                  {{ scope.row.always_show ? "是" : "否" }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="固定路由" prop="affix" min-width="100">
+              <template #default="scope">
+                <el-tag :type="scope.row.affix ? 'success' : 'danger'">
+                  {{ scope.row.affix ? "是" : "否" }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="菜单标题" prop="title" min-width="200" />
+            <el-table-column
+              label="权限标识"
+              prop="permission"
+              show-overflow-tooltip
+              min-width="220"
+            />
+            <el-table-column label="路由名称" prop="route_name" min-width="200" />
+            <el-table-column label="路由路径" prop="route_path" min-width="200" />
+            <el-table-column
+              label="组件路径"
+              prop="component_path"
+              show-overflow-tooltip
+              min-width="200"
+            />
+            <el-table-column label="路由参数" prop="params" min-width="100" />
+            <el-table-column
+              label="描述"
+              prop="description"
+              show-overflow-tooltip
+              min-width="200"
+            />
+            <el-table-column label="创建时间" prop="created_time" min-width="200" sortable />
+            <el-table-column label="更新时间" prop="updated_time" min-width="200" sortable />
+            <el-table-column fixed="right" label="操作" align="center" min-width="260">
+              <template #default="scope">
+                <el-button
+                  v-if="
+                    scope.row.type == MenuTypeEnum.CATALOG || scope.row.type == MenuTypeEnum.MENU
+                  "
+                  v-hasPerm="['module_system:menu:create']"
+                  type="success"
+                  link
+                  size="small"
+                  icon="plus"
+                  @click.stop="handleOpenDialog('create', undefined, scope.row.id)"
+                >
+                  新增
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_system:menu:detail']"
+                  type="info"
+                  size="small"
+                  link
+                  icon="View"
+                  @click="handleOpenDialog('detail', scope.row.id)"
+                >
+                  详情
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_system:menu:update']"
+                  type="primary"
+                  size="small"
+                  link
+                  icon="edit"
+                  @click="handleOpenDialog('update', scope.row.id)"
+                >
+                  编辑
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_system:menu:delete']"
+                  type="danger"
+                  size="small"
+                  link
+                  icon="delete"
+                  @click="handleRowDelete(scope.row.id)"
+                >
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </template>
+    </PageContent>
 
-    <!-- 弹窗区域 -->
-    <el-drawer
+    <EnhancedDrawer
       v-model="dialogVisible.visible"
       :title="dialogVisible.title"
       :size="drawerSize"
@@ -356,8 +260,8 @@
             </el-tag>
           </el-descriptions-item>
           <el-descriptions-item label="状态" :span="2">
-            <el-tag :type="detailFormData.status ? 'success' : 'danger'">
-              {{ detailFormData.status ? "启用" : "停用" }}
+            <el-tag :type="detailFormData.status === '0' ? 'success' : 'danger'">
+              {{ detailFormData.status === "0" ? "启用" : "停用" }}
             </el-tag>
           </el-descriptions-item>
           <el-descriptions-item label="排序" :span="2">
@@ -657,7 +561,7 @@
           <el-button @click="handleCloseDialog">取消</el-button>
         </div>
       </template>
-    </el-drawer>
+    </EnhancedDrawer>
   </div>
 </template>
 
@@ -667,6 +571,7 @@ defineOptions({
   inheritAttrs: false,
 });
 
+import { ref, reactive, computed } from "vue";
 import { useAppStore } from "@/store/modules/app.store";
 import { useUserStore } from "@/store/modules/user.store";
 import { DeviceEnum } from "@/enums/settings/device.enum";
@@ -674,32 +579,66 @@ import { DeviceEnum } from "@/enums/settings/device.enum";
 import MenuAPI, { MenuPageQuery, MenuForm, MenuTable } from "@/api/module_system/menu";
 import { MenuTypeEnum } from "@/enums/system/menu.enum";
 import { formatTree } from "@/utils/common";
-import { formatToDateTime } from "@/utils/dateUtil";
+import CrudToolbarLeft from "@/components/CURD/CrudToolbarLeft.vue";
+import CrudToolbarRight from "@/components/CURD/CrudToolbarRight.vue";
+import PageSearch from "@/components/CURD/PageSearch.vue";
+import PageContent from "@/components/CURD/PageContent.vue";
+import EnhancedDrawer from "@/components/CURD/EnhancedDrawer.vue";
+import { useCrudList } from "@/components/CURD/useCrudList";
+import type { ISearchConfig, IContentConfig } from "@/components/CURD/types";
 
 const appStore = useAppStore();
 const userStore = useUserStore();
 
-const queryFormRef = ref();
+const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
 const dataFormRef = ref();
-const selectIds = ref<number[]>([]);
-const loading = ref(false);
+const submitLoading = ref(false);
 
-const isExpand = ref(false);
-const isExpandable = ref(true);
+const searchConfig = reactive<ISearchConfig>({
+  permPrefix: "module_system:menu",
+  colon: true,
+  isExpandable: true,
+  showNumber: 2,
+  form: { labelWidth: "auto" },
+  formItems: [
+    {
+      prop: "name",
+      label: "菜单名称",
+      type: "input",
+      attrs: { placeholder: "请输入菜单名称", clearable: true },
+    },
+    {
+      prop: "status",
+      label: "状态",
+      type: "select",
+      options: [
+        { label: "启用", value: "0" },
+        { label: "停用", value: "1" },
+      ],
+      attrs: { placeholder: "请选择状态", clearable: true, style: { width: "167.5px" } },
+    },
+    {
+      prop: "created_time",
+      label: "创建时间",
+      type: "date-picker",
+      initialValue: [],
+      attrs: {
+        type: "datetimerange",
+        valueFormat: "YYYY-MM-DD HH:mm:ss",
+        rangeSeparator: "至",
+        startPlaceholder: "开始日期",
+        endPlaceholder: "结束日期",
+        style: { width: "340px" },
+      },
+    },
+  ],
+});
 
-// 分页表单
-const pageTableData = ref<MenuTable[]>([]);
+const contentCols = reactive([{ prop: "name", label: "菜单名称", show: true }]);
 
 // 详情表单
 const detailFormData = ref<MenuTable>({});
 
-// 分页查询参数
-const queryFormData = reactive<MenuPageQuery>({
-  name: undefined,
-  status: undefined,
-  created_time: undefined,
-});
-
 // 编辑表单
 const formData = reactive<MenuForm>({
   id: undefined,
@@ -735,6 +674,49 @@ const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "600
 // 顶级菜单下拉选项
 const menuOptions = ref<OptionType[]>([]);
 
+function filterMenuTypes(nodes: MenuTable[]) {
+  return nodes
+    .filter((node) => node.type === MenuTypeEnum.CATALOG || node.type === MenuTypeEnum.MENU)
+    .map((node: any): any => ({
+      ...node,
+      children: node.children ? filterMenuTypes(node.children) : [],
+    }));
+}
+
+const contentConfig = reactive<IContentConfig<MenuPageQuery>>({
+  permPrefix: "module_system:menu",
+  pk: "id",
+  cols: contentCols as IContentConfig["cols"],
+  hideColumnFilter: true,
+  toolbar: [],
+  defaultToolbar: ["refresh"],
+  pagination: false,
+  indexAction: async (params) => {
+    const res = await MenuAPI.listMenu(params as MenuPageQuery);
+    const tree = res.data.data || [];
+    menuOptions.value = formatTree(filterMenuTypes(tree));
+    return tree;
+  },
+  deleteAction: async (ids) => {
+    await MenuAPI.deleteMenu(
+      ids
+        .split(",")
+        .map((s) => Number(s.trim()))
+        .filter((n) => !Number.isNaN(n))
+    );
+    await userStore.getUserInfo();
+  },
+  deleteConfirm: {
+    title: "警告",
+    message: "确认删除该项数据?",
+    type: "warning",
+  },
+});
+
+function handleRowDelete(id: number) {
+  contentRef.value?.handleDelete(id);
+}
+
 // 表单验证规则
 const rules = reactive({
   name: [
@@ -773,71 +755,6 @@ const rules = reactive({
 // 选择表格的行菜单ID
 const selectedMenuId = ref<number | undefined>();
 
-// 日期范围临时变量
-const dateRange = ref<[Date, Date] | []>([]);
-
-// 处理日期范围变化
-function handleDateRangeChange(range: [Date, Date]) {
-  dateRange.value = range;
-  if (range && range.length === 2) {
-    queryFormData.created_time = [formatToDateTime(range[0]), formatToDateTime(range[1])];
-  } else {
-    queryFormData.created_time = undefined;
-  }
-}
-
-// 列表刷新
-async function handleRefresh() {
-  loading.value = true;
-  try {
-    const response = await MenuAPI.listMenu(queryFormData);
-    pageTableData.value = response.data.data;
-  } catch (error: any) {
-    console.error(error);
-  } finally {
-    loading.value = false;
-  }
-}
-
-// 修改菜单选项过滤逻辑，添加递归过滤函数
-const filterMenuTypes = (nodes: MenuTable[]) => {
-  return nodes
-    .filter((node) => node.type === MenuTypeEnum.CATALOG || node.type === MenuTypeEnum.MENU)
-    .map((node: any): any => ({
-      ...node,
-      children: node.children ? filterMenuTypes(node.children) : [],
-    }));
-};
-
-// 加载表格数据
-async function loadingData() {
-  loading.value = true;
-  try {
-    const response = await MenuAPI.listMenu(queryFormData);
-    pageTableData.value = response.data.data;
-    // 加载菜单选项，只显示目录、菜单
-    menuOptions.value = formatTree(filterMenuTypes(response.data.data));
-  } catch (error: any) {
-    console.error(error);
-  } finally {
-    loading.value = false;
-  }
-}
-
-// 查询（重置页码后获取数据）
-async function handleQuery() {
-  loadingData();
-}
-
-// 重置查询
-async function handleResetQuery() {
-  queryFormRef.value.resetFields();
-  // 额外清空日期范围与时间查询参数
-  dateRange.value = [];
-  queryFormData.created_time = undefined;
-  handleQuery();
-}
-
 // 定义初始表单数据常量
 const initialFormData: MenuForm = {
   id: undefined,
@@ -871,11 +788,6 @@ async function resetForm() {
   Object.assign(formData, initialFormData);
 }
 
-// 行复选框选中项变化
-async function handleSelectionChange(selection: any) {
-  selectIds.value = selection.map((item: any) => item.id);
-}
-
 // 行点击事件
 async function handleRowClick(row: MenuTable) {
   selectedMenuId.value = row.id;
@@ -928,11 +840,9 @@ function handleMenuTypeChange() {
 
 // 提交表单
 async function handleSubmit() {
-  // 表单校验
   dataFormRef.value.validate(async (valid: any) => {
     if (valid) {
-      loading.value = true;
-      // 根据弹窗传入的参数(deatil\create\update)判断走什么逻辑
+      submitLoading.value = true;
       const id = formData.id;
       try {
         if (id) {
@@ -942,43 +852,24 @@ async function handleSubmit() {
         }
         await userStore.getUserInfo();
         dialogVisible.visible = false;
-        resetForm();
-        handleResetQuery();
+        await resetForm();
+        refreshList();
       } catch (error: any) {
         console.error(error);
       } finally {
-        loading.value = false;
+        submitLoading.value = false;
       }
     }
   });
 }
 
-// 删除、批量删除
-async function handleDelete(ids: number[]) {
-  ElMessageBox.confirm("确认删除该项数据?", "警告", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    type: "warning",
-  })
-    .then(async () => {
-      try {
-        loading.value = true;
-        await MenuAPI.deleteMenu(ids);
-        await userStore.getUserInfo();
-        handleResetQuery();
-      } catch (error: any) {
-        console.error(error);
-      } finally {
-        loading.value = false;
-      }
-    })
-    .catch(() => {
-      ElMessageBox.close();
-    });
-}
-
-// 批量启用/停用
 async function handleMoreClick(status: string) {
+  const rows = contentRef.value?.getSelectionData() as MenuTable[] | undefined;
+  const ids = (rows ?? []).map((r) => r.id).filter((id): id is number => id != null);
+  if (!ids.length) {
+    ElMessage.warning("请先选择要操作的数据");
+    return;
+  }
   ElMessageBox.confirm(`确认${status === "0" ? "启用" : "停用"}该项数据?`, "警告", {
     confirmButtonText: "确定",
     cancelButtonText: "取消",
@@ -986,21 +877,14 @@ async function handleMoreClick(status: string) {
   })
     .then(async () => {
       try {
-        loading.value = true;
-        await MenuAPI.batchMenu({ ids: selectIds.value, status });
-        handleResetQuery();
+        await MenuAPI.batchMenu({ ids, status });
+        refreshList();
       } catch (error: any) {
         console.error(error);
-      } finally {
-        loading.value = false;
       }
     })
     .catch(() => {
       ElMessageBox.close();
     });
 }
-
-onMounted(() => {
-  handleQuery();
-});
 </script>
diff --git a/frontend/src/views/module_system/notice/index.vue b/frontend/src/views/module_system/notice/index.vue
index 9a33fd6c..2e24e389 100644
--- a/frontend/src/views/module_system/notice/index.vue
+++ b/frontend/src/views/module_system/notice/index.vue
@@ -1,139 +1,27 @@
 <!-- 公告通知配置 -->
 <template>
   <div class="app-container">
-    <!-- 搜索区域 -->
-    <el-card class="search-container">
-      <el-form
-        ref="queryFormRef"
-        :model="queryFormData"
-        :inline="true"
-        label-suffix=":"
-        @submit.prevent="handleQuery"
-      >
-        <el-form-item prop="notice_title" label="标题">
-          <el-input v-model="queryFormData.notice_title" placeholder="请输入标题" clearable />
-        </el-form-item>
-        <el-form-item prop="notice_type" label="类型">
-          <el-select
-            v-model="queryFormData.notice_type"
-            placeholder="请选择类型"
-            style="width: 167.5px"
-            clearable
-          >
-            <el-option
-              v-for="item in dictStore.getDictArray('sys_notice_type')"
-              :key="item.dict_value"
-              :value="item.dict_value"
-              :label="item.dict_label"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item prop="status" label="状态">
-          <el-select
-            v-model="queryFormData.status"
-            placeholder="请选择状态"
-            style="width: 167.5px"
-            clearable
-          >
-            <el-option value="0" label="启用" />
-            <el-option value="1" 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 v-if="isExpand" prop="created_id" label="创建人">
-          <UserTableSelect
-            v-model="queryFormData.created_id"
-            @confirm-click="handleConfirm"
-            @clear-click="handleQuery"
-          />
-        </el-form-item>
-        <!-- 查询、重置、展开/收起按钮 -->
-        <el-form-item class="search-buttons">
-          <el-button
-            v-hasPerm="['module_system:notice:query']"
-            type="primary"
-            icon="search"
-            native-type="submit"
-          >
-            查询
-          </el-button>
-          <el-button
-            v-hasPerm="['module_system:notice: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>
-    </el-card>
+    <PageSearch
+      ref="searchRef"
+      :search-config="searchConfig"
+      @query-click="handleQueryClick"
+      @reset-click="handleResetClick"
+    />
 
-    <!-- 内容区域 -->
-    <el-card class="data-table">
-      <!-- 功能区域 -->
-      <div class="data-table__toolbar">
-        <div class="data-table__toolbar--left">
-          <el-row :gutter="10">
-            <el-col :span="1.5">
-              <el-button
-                v-hasPerm="['module_system:notice:create']"
-                type="success"
-                icon="plus"
-                @click="handleOpenDialog('create')"
-              >
-                新增
-              </el-button>
-            </el-col>
-            <el-col :span="1.5">
-              <el-button
-                v-hasPerm="['module_system:notice: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="['module_system:notice:patch']" 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('0')">
-                      批量启用
-                    </el-dropdown-item>
-                    <el-dropdown-item icon="CircleClose" @click="handleMoreClick('1')">
-                      批量停用
-                    </el-dropdown-item>
-                  </el-dropdown-menu>
-                </template>
-              </el-dropdown>
-            </el-col>
-          </el-row>
-        </div>
+    <PageContent ref="contentRef" :content-config="contentConfig">
+      <template #toolbar="{ toolbarRight, onToolbar, removeIds, cols }">
+        <CrudToolbarLeft
+          :remove-ids="removeIds"
+          :perm-create="['module_system:notice:create']"
+          :perm-delete="['module_system:notice:delete']"
+          :perm-patch="['module_system:notice:patch']"
+          @add="handleOpenDialog('create')"
+          @delete="onToolbar('delete')"
+          @more="handleMoreClick"
+        />
         <div class="data-table__toolbar--right">
-          <el-row :gutter="10">
-            <el-col :span="1.5">
+          <CrudToolbarRight :buttons="toolbarRight" :cols="cols" :on-toolbar="onToolbar">
+            <template #prepend>
               <el-tooltip content="导出">
                 <el-button
                   v-hasPerm="['module_system:notice:export']"
@@ -143,211 +31,177 @@
                   @click="handleOpenExportsModal"
                 />
               </el-tooltip>
-            </el-col>
-            <el-col :span="1.5">
-              <el-tooltip content="刷新">
-                <el-button
-                  v-hasPerm="['module_system:notice:query']"
-                  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-scrollbar>
-              </el-popover>
-            </el-col>
-          </el-row>
+            </template>
+          </CrudToolbarRight>
         </div>
-      </div>
-
-      <!-- 表格区域：系统配置列表 -->
-      <div class="data-table__content">
-        <el-table
-          ref="dataTableRef"
-          v-loading="loading"
-          :data="pageTableData"
-          height="calc(100vh - 350px)"
-          max-height="calc(100vh - 350px)"
-          border
-          stripe
-          @selection-change="handleSelectionChange"
-        >
-          <template #empty>
-            <el-empty :image-size="70" 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 === 'notice_title')?.show"
-            label="通知标题"
-            prop="notice_title"
-            min-width="140"
-            show-overflow-tooltip
-          />
-          <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 === '0' ? 'success' : 'danger'">
-                {{ scope.row.status === "0" ? "启用" : "停用" }}
-              </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'notice_type')?.show"
-            label="类型"
-            prop="notice_type"
-            min-width="80"
-          >
-            <template #default="scope">
-              <el-tag :type="scope.row.notice_type === '1' ? 'primary' : 'warning'">
-                {{
-                  (scope.row.notice_type
-                    ? (dictStore.getDictLabel("sys_notice_type", scope.row.notice_type) as any)
-                    : undefined
-                  )?.dict_label || scope.row.notice_type
-                }}
-              </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'notice_content')?.show"
-            label="内容"
-            prop="notice_content"
-            min-width="200"
-            show-overflow-tooltip
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'description')?.show"
-            label="描述"
-            prop="description"
-            min-width="140"
-            show-overflow-tooltip
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'created_time')?.show"
-            label="创建时间"
-            prop="created_time"
-            min-width="180"
-            sortable
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'updated_time')?.show"
-            label="更新时间"
-            prop="updated_time"
-            min-width="180"
-            sortable
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'created_id')?.show"
-            key="created_id"
-            label="创建人"
-            min-width="100"
-          >
-            <template #default="scope">
-              {{ scope.row.created_by?.name }}
-            </template>
-          </el-table-column>
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'updated_id')?.show"
-            key="updated_id"
-            label="更新人"
-            min-width="100"
-          >
-            <template #default="scope">
-              {{ scope.row.updated_by?.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="['module_system:notice:detail']"
-                type="info"
-                size="small"
-                link
-                icon="document"
-                @click="handleOpenDialog('detail', scope.row.id)"
-              >
-                详情
-              </el-button>
-              <el-button
-                v-hasPerm="['module_system:notice:update']"
-                type="primary"
-                size="small"
-                link
-                icon="edit"
-                @click="handleOpenDialog('update', scope.row.id)"
-              >
-                编辑
-              </el-button>
-              <el-button
-                v-hasPerm="['module_system:notice:delete']"
-                type="danger"
-                size="small"
-                link
-                icon="delete"
-                @click="handleDelete([scope.row.id])"
-              >
-                删除
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-
-      <!-- 分页区域 -->
-      <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
+      <template #table="{ data, loading, tableRef, onSelectionChange, pagination }">
+        <div class="data-table__content">
+          <el-table
+            :ref="tableRef as any"
+            v-loading="loading"
+            row-key="id"
+            :data="data"
+            height="100%"
+            border
+            stripe
+            @selection-change="onSelectionChange"
+          >
+            <template #empty>
+              <el-empty :image-size="70" description="暂无数据" />
+            </template>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'selection')?.show"
+              type="selection"
+              min-width="55"
+              align="center"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'index')?.show"
+              fixed
+              label="序号"
+              min-width="60"
+            >
+              <template #default="scope">
+                {{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'notice_title')?.show"
+              label="通知标题"
+              prop="notice_title"
+              min-width="140"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'status')?.show"
+              label="状态"
+              prop="status"
+              min-width="80"
+            >
+              <template #default="scope">
+                <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
+                  {{ scope.row.status === "0" ? "启用" : "停用" }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'notice_type')?.show"
+              label="类型"
+              prop="notice_type"
+              min-width="80"
+            >
+              <template #default="scope">
+                <el-tag :type="scope.row.notice_type === '1' ? 'primary' : 'warning'">
+                  {{
+                    (scope.row.notice_type
+                      ? (dictStore.getDictLabel("sys_notice_type", scope.row.notice_type) as any)
+                      : undefined
+                    )?.dict_label || scope.row.notice_type
+                  }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'notice_content')?.show"
+              label="内容"
+              prop="notice_content"
+              min-width="200"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'description')?.show"
+              label="描述"
+              prop="description"
+              min-width="140"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'created_time')?.show"
+              label="创建时间"
+              prop="created_time"
+              min-width="180"
+              sortable
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'updated_time')?.show"
+              label="更新时间"
+              prop="updated_time"
+              min-width="180"
+              sortable
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'created_id')?.show"
+              key="created_id"
+              label="创建人"
+              min-width="100"
+            >
+              <template #default="scope">
+                {{ scope.row.created_by?.name }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'updated_id')?.show"
+              key="updated_id"
+              label="更新人"
+              min-width="100"
+            >
+              <template #default="scope">
+                {{ scope.row.updated_by?.name }}
+              </template>
+            </el-table-column>
+
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'operation')?.show"
+              fixed="right"
+              label="操作"
+              align="center"
+              min-width="200"
+            >
+              <template #default="scope">
+                <el-button
+                  v-hasPerm="['module_system:notice:detail']"
+                  type="info"
+                  size="small"
+                  link
+                  icon="View"
+                  @click="handleOpenDialog('detail', scope.row.id)"
+                >
+                  详情
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_system:notice:update']"
+                  type="primary"
+                  size="small"
+                  link
+                  icon="edit"
+                  @click="handleOpenDialog('update', scope.row.id)"
+                >
+                  编辑
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_system:notice:delete']"
+                  type="danger"
+                  size="small"
+                  link
+                  icon="delete"
+                  @click="handleRowDelete(scope.row.id)"
+                >
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </template>
+    </PageContent>
+
+    <EnhancedDialog
       v-model="dialogVisible.visible"
       :title="dialogVisible.title"
       @close="handleCloseDialog"
     >
-      <!-- 详情 -->
       <template v-if="dialogVisible.type === 'detail'">
         <el-descriptions :column="4" border label-width="120px">
           <el-descriptions-item label="标题" :span="2">
@@ -364,8 +218,8 @@
             </el-tag>
           </el-descriptions-item>
           <el-descriptions-item label="状态" :span="2">
-            <el-tag :type="detailFormData.status ? 'success' : 'danger'">
-              {{ detailFormData.status ? "启用" : "停用" }}
+            <el-tag :type="detailFormData.status === '0' ? 'success' : 'danger'">
+              {{ detailFormData.status === "0" ? "启用" : "停用" }}
             </el-tag>
           </el-descriptions-item>
           <el-descriptions-item label="描述" :span="2">
@@ -388,7 +242,6 @@
           </el-descriptions-item>
         </el-descriptions>
       </template>
-      <!-- 新增、编辑表单 -->
       <template v-else>
         <el-form
           ref="dataFormRef"
@@ -436,30 +289,44 @@
 
       <template #footer>
         <div class="dialog-footer">
-          <!-- 详情弹窗不需要确定按钮的提交逻辑 -->
           <el-button @click="handleCloseDialog">取消</el-button>
-          <el-button v-if="dialogVisible.type !== 'detail'" type="primary" @click="handleSubmit">
+          <el-button
+            v-if="dialogVisible.type !== 'detail'"
+            type="primary"
+            :loading="submitLoading"
+            @click="handleSubmit"
+          >
             确定
           </el-button>
           <el-button v-else type="primary" @click="handleCloseDialog">确定</el-button>
         </div>
       </template>
-    </el-dialog>
+    </EnhancedDialog>
 
     <ExportModal
       v-model="exportsDialogVisible"
       :content-config="curdContentConfig"
-      :selection-data="selectionRows"
+      :query-params="exportQueryParams"
+      :page-data="exportPageData"
+      :selection-data="exportSelectionData"
     />
   </div>
 </template>
 
 <script setup lang="ts">
+import { ref, reactive, computed, markRaw, nextTick, onMounted, unref } from "vue";
+import { fetchAllPages } from "@/utils/fetchAllPages";
 import { useDictStore, useNoticeStore } from "@/store/index";
 import UserTableSelect from "@/views/module_system/user/components/UserTableSelect.vue";
 import ExportModal from "@/components/CURD/ExportModal.vue";
-import type { IContentConfig } from "@/components/CURD/types";
-import { formatToDateTime } from "@/utils/dateUtil";
+import CrudToolbarLeft from "@/components/CURD/CrudToolbarLeft.vue";
+import CrudToolbarRight from "@/components/CURD/CrudToolbarRight.vue";
+import PageSearch from "@/components/CURD/PageSearch.vue";
+import PageContent from "@/components/CURD/PageContent.vue";
+import EnhancedDialog from "@/components/CURD/EnhancedDialog.vue";
+import type { IContentConfig, ISearchConfig } from "@/components/CURD/types";
+import { useCrudList } from "@/components/CURD/useCrudList";
+import NoticeAPI, { NoticeTable, NoticeForm, NoticePageQuery } from "@/api/module_system/notice";
 
 const dictStore = useDictStore();
 defineOptions({
@@ -467,25 +334,81 @@ defineOptions({
   inheritAttrs: false,
 });
 
-import NoticeAPI, { NoticeTable, NoticeForm, NoticePageQuery } from "@/api/module_system/notice";
-
-const queryFormRef = ref();
+const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
 const dataFormRef = ref();
-const total = ref(0);
-const selectIds = ref<number[]>([]);
-const loading = ref(false);
-const isExpand = ref(false);
-const isExpandable = ref(true);
+const submitLoading = ref(false);
 
-// 分页表单
-const pageTableData = ref<NoticeTable[]>([]);
+function triggerUserSearch() {
+  nextTick(() => refreshList());
+}
 
-// 导出弹窗显示状态 & 选中行
-const exportsDialogVisible = ref(false);
-const selectionRows = ref<NoticeTable[]>([]);
+const searchConfig = reactive<ISearchConfig>({
+  permPrefix: "module_system:notice",
+  colon: true,
+  isExpandable: true,
+  showNumber: 3,
+  form: { labelWidth: "auto" },
+  formItems: [
+    {
+      prop: "notice_title",
+      label: "标题",
+      type: "input",
+      attrs: { placeholder: "请输入标题", clearable: true },
+    },
+    {
+      prop: "notice_type",
+      label: "类型",
+      type: "select",
+      options: [] as { label: string; value: string }[],
+      attrs: { placeholder: "请选择类型", clearable: true, style: { width: "167.5px" } },
+    },
+    {
+      prop: "status",
+      label: "状态",
+      type: "select",
+      options: [
+        { label: "启用", value: "0" },
+        { label: "停用", value: "1" },
+      ],
+      attrs: { placeholder: "请选择状态", clearable: true, style: { width: "167.5px" } },
+    },
+    {
+      prop: "created_time",
+      label: "创建时间",
+      type: "date-picker",
+      initialValue: [],
+      attrs: {
+        type: "datetimerange",
+        valueFormat: "YYYY-MM-DD HH:mm:ss",
+        rangeSeparator: "至",
+        startPlaceholder: "开始日期",
+        endPlaceholder: "结束日期",
+        style: { width: "340px" },
+      },
+    },
+    {
+      prop: "created_id",
+      label: "创建人",
+      type: "user-table-select",
+      initialValue: null,
+      events: {
+        "confirm-click": triggerUserSearch,
+        "clear-click": triggerUserSearch,
+      },
+    },
+  ],
+  customComponents: {
+    "user-table-select": markRaw(UserTableSelect),
+  },
+});
 
-// 表格列配置
-const tableColumns = ref([
+const contentCols = reactive<
+  Array<{
+    prop?: string;
+    label?: string;
+    show?: boolean;
+  }>
+>([
   { prop: "selection", label: "选择框", show: true },
   { prop: "index", label: "序号", show: true },
   { prop: "notice_title", label: "标题", show: true },
@@ -500,21 +423,92 @@ const tableColumns = ref([
   { prop: "operation", label: "操作", show: true },
 ]);
 
-// 详情表单
-const detailFormData = ref<NoticeTable>({});
+const noticeStore = useNoticeStore();
 
-// 分页查询参数
-const queryFormData = reactive<NoticePageQuery>({
-  page_no: 1,
-  page_size: 10,
-  notice_title: undefined,
-  notice_type: undefined,
-  status: undefined,
-  created_time: undefined,
-  created_id: undefined,
+const contentConfig = reactive<IContentConfig<NoticePageQuery>>({
+  permPrefix: "module_system:notice",
+  pk: "id",
+  cols: contentCols as IContentConfig["cols"],
+  hideColumnFilter: false,
+  toolbar: [],
+  defaultToolbar: ["refresh", "filter"],
+  pagination: {
+    pageSize: 10,
+    pageSizes: [10, 20, 30, 50],
+  },
+  request: { page_no: "page_no", page_size: "page_size" },
+  indexAction: async (params) => {
+    const res = await NoticeAPI.listNotice(params as NoticePageQuery);
+    return {
+      total: res.data.data.total,
+      list: res.data.data.items,
+    };
+  },
+  deleteAction: async (ids) => {
+    await NoticeAPI.deleteNotice(
+      ids
+        .split(",")
+        .map((s) => Number(s.trim()))
+        .filter((n) => !Number.isNaN(n))
+    );
+    await noticeStore.getNotice();
+  },
+  deleteConfirm: {
+    title: "警告",
+    message: "确认删除该项数据?",
+    type: "warning",
+  },
 });
 
-// 编辑表单
+function handleRowDelete(id: number) {
+  contentRef.value?.handleDelete(id);
+}
+
+const exportsDialogVisible = ref(false);
+
+const exportQueryParams = computed(() => searchRef.value?.getQueryParams() ?? {});
+
+const exportPageData = computed(() => (unref(contentRef.value?.pageData) ?? []) as NoticeTable[]);
+
+const exportSelectionData = computed(
+  () => (contentRef.value?.getSelectionData() ?? []) as NoticeTable[]
+);
+
+const exportColumns = [
+  { prop: "notice_title", label: "标题" },
+  { prop: "status", label: "状态" },
+  { prop: "notice_type", label: "类型" },
+  { prop: "notice_content", label: "内容" },
+  { prop: "description", label: "描述" },
+  { prop: "created_time", label: "创建时间" },
+  { prop: "updated_time", label: "更新时间" },
+];
+
+const curdContentConfig = {
+  permPrefix: "module_system:notice",
+  cols: exportColumns as any,
+  exportsAction: async (params: any) => {
+    const query: Record<string, unknown> = { ...params };
+    if (typeof query.status === "string") query.status = query.status === "true";
+    return fetchAllPages({
+      initialQuery: query,
+      fetchPage: async (q) => {
+        const res = await NoticeAPI.listNotice(q as unknown as NoticePageQuery);
+        return {
+          total: res.data?.data?.total ?? 0,
+          list: res.data?.data?.items ?? [],
+        };
+      },
+    });
+  },
+} as unknown as IContentConfig;
+
+function handleOpenExportsModal() {
+  exportsDialogVisible.value = true;
+}
+
+const detailFormData = ref<NoticeTable>({});
+
 const formData = reactive<NoticeForm>({
   id: undefined,
   notice_title: "",
@@ -524,14 +518,12 @@ const formData = reactive<NoticeForm>({
   description: undefined,
 });
 
-// 弹窗状态
 const dialogVisible = reactive({
   title: "",
   visible: false,
   type: "create" as "create" | "update" | "detail",
 });
 
-// 表单验证规则
 const rules = reactive({
   notice_title: [{ required: true, message: "请输入公告通知标题", trigger: "blur" }],
   notice_type: [{ required: true, message: "请选择公告通知类型", trigger: "blur" }],
@@ -539,63 +531,6 @@ const rules = reactive({
   status: [{ required: true, message: "请选择公告通知状态", trigger: "blur" }],
 });
 
-// 日期范围临时变量
-const dateRange = ref<[Date, Date] | []>([]);
-
-// 通知 store
-const noticeStore = useNoticeStore();
-
-// 处理日期范围变化
-function handleDateRangeChange(range: [Date, Date]) {
-  dateRange.value = range;
-  if (range && range.length === 2) {
-    queryFormData.created_time = [formatToDateTime(range[0]), formatToDateTime(range[1])];
-  } else {
-    queryFormData.created_time = undefined;
-  }
-}
-
-// 列表刷新
-async function handleRefresh() {
-  await loadingData();
-}
-
-// 加载表格数据
-async function loadingData() {
-  loading.value = true;
-  try {
-    const response = await NoticeAPI.listNotice(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();
-}
-
-// 选择创建人后触发查询
-function handleConfirm() {
-  handleQuery();
-}
-
-// 重置查询
-async function handleResetQuery() {
-  queryFormRef.value.resetFields();
-  queryFormData.page_no = 1;
-  // 额外清空日期范围与时间查询参数
-  dateRange.value = [];
-  queryFormData.created_time = undefined;
-  loadingData();
-}
-
-// 定义初始表单数据常量
 const initialFormData: NoticeForm = {
   id: undefined,
   notice_title: "",
@@ -605,29 +540,19 @@ const initialFormData: NoticeForm = {
   description: undefined,
 };
 
-// 重置表单
 async function resetForm() {
   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);
-  selectionRows.value = selection;
-}
-
-// 关闭弹窗
 async function handleCloseDialog() {
   dialogVisible.visible = false;
-  resetForm();
+  await resetForm();
 }
 
-// 打开弹窗
 async function handleOpenDialog(type: "create" | "update" | "detail", id?: number) {
   dialogVisible.type = type;
   if (id) {
@@ -646,65 +571,48 @@ async function handleOpenDialog(type: "create" | "update" | "detail", id?: numbe
   dialogVisible.visible = true;
 }
 
-// 提交表单（防抖）
 async function handleSubmit() {
-  // 表单校验
   dataFormRef.value.validate(async (valid: any) => {
     if (valid) {
-      loading.value = true;
-      // 根据弹窗传入的参数(deatil\create\update)判断走什么逻辑
+      submitLoading.value = true;
       const id = formData.id;
-      if (id) {
-        try {
+      try {
+        if (id) {
           await NoticeAPI.updateNotice(id, { id, ...formData });
-          dialogVisible.visible = false;
-          resetForm();
-          handleCloseDialog();
-          handleResetQuery();
-          // 重新加载通知以同步到浏览器内存
-          await noticeStore.getNotice();
-        } catch (error: any) {
-          console.error(error);
-        } finally {
-          loading.value = false;
-        }
-      } else {
-        try {
+        } else {
           await NoticeAPI.createNotice(formData);
-          dialogVisible.visible = false;
-          resetForm();
-          handleCloseDialog();
-          handleResetQuery();
-          // 重新加载通知以同步到浏览器内存
-          await noticeStore.getNotice();
-        } catch (error: any) {
-          console.error(error);
-        } finally {
-          loading.value = false;
         }
+        dialogVisible.visible = false;
+        await resetForm();
+        refreshList();
+        await noticeStore.getNotice();
+      } catch (error: any) {
+        console.error(error);
+      } finally {
+        submitLoading.value = false;
       }
     }
   });
 }
 
-// 删除、批量删除
-async function handleDelete(ids: number[]) {
-  ElMessageBox.confirm("确认删除该项数据?", "警告", {
+async function handleMoreClick(status: string) {
+  const rows = contentRef.value?.getSelectionData() as NoticeTable[] | undefined;
+  const ids = (rows ?? []).map((r) => r.id).filter((id): id is number => id != null);
+  if (!ids.length) {
+    ElMessage.warning("请先选择要操作的数据");
+    return;
+  }
+  ElMessageBox.confirm(`确认${status === "0" ? "启用" : "停用"}该项数据?`, "警告", {
     confirmButtonText: "确定",
     cancelButtonText: "取消",
     type: "warning",
   })
     .then(async () => {
       try {
-        loading.value = true;
-        await NoticeAPI.deleteNotice(ids);
-        handleResetQuery();
-        // 重新加载通知以同步到浏览器内存
-        await noticeStore.getNotice();
+        await NoticeAPI.batchNotice({ ids, status });
+        refreshList();
       } catch (error: any) {
         console.error(error);
-      } finally {
-        loading.value = false;
       }
     })
     .catch(() => {
@@ -712,75 +620,15 @@ async function handleDelete(ids: number[]) {
     });
 }
 
-// 导出弹窗
-async function handleOpenExportsModal() {
-  exportsDialogVisible.value = true;
-}
-
-// 批量启用/停用
-async function handleMoreClick(status: string) {
-  if (selectIds.value.length) {
-    ElMessageBox.confirm(`确认${status === "0" ? "启用" : "停用"}该项数据?`, "警告", {
-      confirmButtonText: "确定",
-      cancelButtonText: "取消",
-      type: "warning",
-    })
-      .then(async () => {
-        try {
-          loading.value = true;
-          await NoticeAPI.batchNotice({ ids: selectIds.value, status });
-          handleResetQuery();
-        } catch (error: any) {
-          console.error(error);
-        } finally {
-          loading.value = false;
-        }
-      })
-      .catch(() => {
-        ElMessageBox.close();
-      });
-  }
-}
-
-// 导出字段
-const exportColumns = [
-  { prop: "notice_title", label: "标题" },
-  { prop: "status", label: "状态" },
-  { prop: "notice_type", label: "类型" },
-  { prop: "notice_content", label: "内容" },
-  { prop: "description", label: "描述" },
-  { prop: "created_time", label: "创建时间" },
-  { prop: "updated_time", label: "更新时间" },
-];
-
-// 导入/导出配置（用于导出弹窗）
-const curdContentConfig = {
-  permPrefix: "module_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.listNotice(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"]);
-  // 加载表格数据
-  loadingData();
+  const typeItem = searchConfig.formItems?.find((i) => i.prop === "notice_type");
+  if (typeItem && typeItem.type === "select") {
+    typeItem.options = dictStore.getDictArray("sys_notice_type").map((item) => ({
+      label: item.dict_label,
+      value: item.dict_value,
+    }));
+  }
 });
 </script>
 
diff --git a/frontend/src/views/module_system/param/components/ConfigInfoDrawer.vue b/frontend/src/views/module_system/param/components/ConfigInfoDrawer.vue
index 9c1edfbb..1813ac36 100644
--- a/frontend/src/views/module_system/param/components/ConfigInfoDrawer.vue
+++ b/frontend/src/views/module_system/param/components/ConfigInfoDrawer.vue
@@ -1,10 +1,10 @@
 <template>
-  <el-drawer
+  <EnhancedDrawer
     v-model="drawerVisible"
     title="配置中心"
     :size="drawerSize"
     destroy-on-close
-    @closed="onDrawerClosed"
+    @close="onDrawerClosed"
   >
     <el-tabs v-model="activeTabRef" type="border-card">
       <!-- 网站配置 -->
@@ -279,7 +279,7 @@
         保存
       </el-button>
     </template>
-  </el-drawer>
+  </EnhancedDrawer>
 </template>
 
 <script lang="ts" setup>
@@ -288,6 +288,7 @@ import ParamsAPI, { type ConfigTable } from "@/api/module_system/params";
 import { useConfigStore } from "@/store";
 import { useI18n } from "vue-i18n";
 import { ElMessage, ElMessageBox } from "element-plus";
+import EnhancedDrawer from "@/components/CURD/EnhancedDrawer.vue";
 import SingleImageUpload from "@/components/Upload/SingleImageUpload.vue";
 import { useAppStore } from "@/store/modules/app.store";
 import { DeviceEnum } from "@/enums/settings/device.enum";
@@ -651,11 +652,6 @@ const demoConfigs = computed(() => ({
   ip_white_list: configStore.configData.ip_white_list,
 }));
 
-// 在组件挂载时初始化列表
-onMounted(() => {
-  initializeLists();
-});
-
 // logo配置项
 const logoConfigs = computed(() => ({
   sys_web_logo: {
@@ -692,8 +688,8 @@ const handleUploadError = (error: any) => {
   ElMessage.error(`上传失败：${error.message || "请稍后重试"}`);
 };
 
-// 生命周期钩子
 onMounted(() => {
+  initializeLists();
   configStore.getConfig();
 });
 </script>
diff --git a/frontend/src/views/module_system/param/index.vue b/frontend/src/views/module_system/param/index.vue
index f277726e..78675da1 100644
--- a/frontend/src/views/module_system/param/index.vue
+++ b/frontend/src/views/module_system/param/index.vue
@@ -1,102 +1,26 @@
 <!-- 系统配置 -->
 <template>
   <div class="app-container">
-    <!-- 搜索区域 -->
-    <el-card class="search-container">
-      <el-form
-        ref="queryFormRef"
-        :model="queryFormData"
-        :inline="true"
-        label-suffix=":"
-        @submit.prevent="handleQuery"
-      >
-        <el-form-item prop="config_name" label="配置名称">
-          <el-input v-model="queryFormData.config_name" placeholder="请输入配置名称" clearable />
-        </el-form-item>
-        <el-form-item prop="config_key" label="配置键名">
-          <el-input v-model="queryFormData.config_key" placeholder="请输入配置键名" clearable />
-        </el-form-item>
-        <el-form-item prop="config_type" label="系统内置">
-          <el-select
-            v-model="queryFormData.config_type"
-            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="['module_system:param:query']"
-            type="primary"
-            icon="search"
-            native-type="submit"
-          >
-            查询
-          </el-button>
-          <el-button
-            v-hasPerm="['module_system:param: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>
-    </el-card>
+    <PageSearch
+      ref="searchRef"
+      :search-config="searchConfig"
+      @query-click="handleQueryClick"
+      @reset-click="handleResetClick"
+    />
 
-    <!-- 内容区域 -->
-    <el-card class="data-table">
-      <!-- 功能区域 -->
-      <div class="data-table__toolbar">
-        <div class="data-table__toolbar--left">
-          <el-row :gutter="10">
-            <el-col :span="1.5">
-              <el-button
-                v-hasPerm="['module_system:param:create']"
-                type="success"
-                icon="plus"
-                @click="handleOpenDialog('create')"
-              >
-                新增
-              </el-button>
-            </el-col>
-            <el-col :span="1.5">
-              <el-button
-                v-hasPerm="['module_system:param:delete']"
-                type="danger"
-                icon="delete"
-                :disabled="selectIds.length === 0"
-                @click="handleDelete(selectIds)"
-              >
-                批量删除
-              </el-button>
-            </el-col>
-          </el-row>
-        </div>
+    <PageContent ref="contentRef" :content-config="contentConfig">
+      <template #toolbar="{ toolbarRight, onToolbar, removeIds, cols }">
+        <!-- 与 PageContent 默认工具栏一致：flex 换行，避免 el-row/el-col 与外层 flex 挤压右侧按钮 -->
+        <CrudToolbarLeft
+          :remove-ids="removeIds"
+          :perm-create="['module_system:param:create']"
+          :perm-delete="['module_system:param:delete']"
+          @add="handleOpenDialog('create')"
+          @delete="onToolbar('delete')"
+        />
         <div class="data-table__toolbar--right">
-          <el-row :gutter="10">
-            <el-col :span="1.5">
+          <CrudToolbarRight :buttons="toolbarRight" :cols="cols" :on-toolbar="onToolbar">
+            <template #prepend>
               <el-tooltip content="导出">
                 <el-button
                   v-hasPerm="['module_system:param:export']"
@@ -106,188 +30,150 @@
                   @click="handleOpenExportsModal"
                 />
               </el-tooltip>
-            </el-col>
-            <el-col :span="1.5">
-              <el-tooltip content="刷新">
-                <el-button
-                  v-hasPerm="['module_system:param:refresh']"
-                  type="primary"
-                  icon="refresh"
-                  circle
-                  @click="handleRefresh"
-                />
-              </el-tooltip>
-            </el-col>
-            <el-col :span="1.5">
-              <el-dropdown v-hasPerm="['module_system:param:query']" trigger="click">
-                <el-button type="danger" 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>
+            </template>
+          </CrudToolbarRight>
         </div>
-      </div>
-
-      <!-- 表格区域：系统配置列表 -->
-      <div class="data-table__content">
-        <el-table
-          ref="dataTableRef"
-          v-loading="loading"
-          :data="pageTableData"
-          height="calc(100vh - 350px)"
-          max-height="calc(100vh - 350px)"
-          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"
-            type="index"
-            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 === 'config_name')?.show"
-            key="config_name"
-            label="配置名称"
-            prop="config_name"
-            min-width="100"
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'config_key')?.show"
-            key="config_key"
-            label="配置键"
-            prop="config_key"
-            min-width="200"
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'config_value')?.show"
-            key="config_value"
-            label="配置值"
-            prop="config_value"
-            min-width="200"
-            show-overflow-tooltip
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'config_type')?.show"
-            key="config_type"
-            label="系统内置"
-            prop="config_type"
-            min-width="100"
-          >
-            <template #default="scope">
-              <el-tag v-if="scope.row.config_type" type="success">是</el-tag>
-              <el-tag v-else type="danger">否</el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'description')?.show"
-            key="description"
-            label="描述"
-            prop="description"
-            min-width="120"
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'created_time')?.show"
-            key="created_time"
-            label="创建时间"
-            prop="created_time"
-            min-width="200"
-            sortable
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'updated_time')?.show"
-            key="updated_time"
-            label="更新时间"
-            prop="updated_time"
-            min-width="200"
-            sortable
-          />
-          <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="['module_system:param:detail']"
-                type="info"
-                size="small"
-                link
-                icon="document"
-                @click="handleOpenDialog('detail', scope.row.id)"
-              >
-                详情
-              </el-button>
-              <el-button
-                v-hasPerm="['module_system:param:update']"
-                type="primary"
-                size="small"
-                link
-                icon="edit"
-                @click="handleOpenDialog('update', scope.row.id)"
-              >
-                编辑
-              </el-button>
-              <el-button
-                v-hasPerm="['module_system:param:delete']"
-                type="danger"
-                size="small"
-                link
-                icon="delete"
-                @click="handleDelete([scope.row.id])"
-              >
-                删除
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-
-      <!-- 分页区域 -->
-      <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
+      <template #table="{ data, loading, tableRef, onSelectionChange, pagination }">
+        <div class="data-table__content">
+          <el-table
+            :ref="tableRef as any"
+            v-loading="loading"
+            row-key="id"
+            :data="data"
+            height="100%"
+            border
+            stripe
+            @selection-change="onSelectionChange"
+          >
+            <template #empty>
+              <el-empty :image-size="80" description="暂无数据" />
+            </template>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'selection')?.show"
+              type="selection"
+              min-width="55"
+              align="center"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'index')?.show"
+              fixed
+              label="序号"
+              min-width="60"
+            >
+              <template #default="scope">
+                {{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'config_name')?.show"
+              key="config_name"
+              label="配置名称"
+              prop="config_name"
+              min-width="120"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'config_key')?.show"
+              key="config_key"
+              label="配置键"
+              prop="config_key"
+              min-width="200"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'config_value')?.show"
+              key="config_value"
+              label="配置值"
+              prop="config_value"
+              min-width="200"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'config_type')?.show"
+              key="config_type"
+              label="系统内置"
+              prop="config_type"
+              min-width="100"
+            >
+              <template #default="scope">
+                <el-tag v-if="scope.row.config_type" type="success">是</el-tag>
+                <el-tag v-else type="danger">否</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'description')?.show"
+              key="description"
+              label="描述"
+              prop="description"
+              min-width="120"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'created_time')?.show"
+              key="created_time"
+              label="创建时间"
+              prop="created_time"
+              min-width="200"
+              sortable
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'updated_time')?.show"
+              key="updated_time"
+              label="更新时间"
+              prop="updated_time"
+              min-width="200"
+              sortable
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'operation')?.show"
+              fixed="right"
+              label="操作"
+              align="center"
+              min-width="200"
+            >
+              <template #default="scope">
+                <el-button
+                  v-hasPerm="['module_system:param:detail']"
+                  type="info"
+                  size="small"
+                  link
+                  icon="View"
+                  @click="handleOpenDialog('detail', scope.row.id)"
+                >
+                  详情
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_system:param:update']"
+                  type="primary"
+                  size="small"
+                  link
+                  icon="edit"
+                  @click="handleOpenDialog('update', scope.row.id)"
+                >
+                  编辑
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_system:param:delete']"
+                  type="danger"
+                  size="small"
+                  link
+                  icon="delete"
+                  @click="handleRowDelete(scope.row.id)"
+                >
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </template>
+    </PageContent>
+
+    <EnhancedDialog
       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">
@@ -314,7 +200,6 @@
           </el-descriptions-item>
         </el-descriptions>
       </template>
-      <!-- 新增、编辑表单 -->
       <template v-else>
         <el-form
           ref="dataFormRef"
@@ -354,12 +239,12 @@
 
       <template #footer>
         <div class="dialog-footer">
-          <!-- 详情弹窗不需要确定按钮的提交逻辑 -->
           <el-button @click="handleCloseDialog">取消</el-button>
           <el-button
             v-if="dialogVisible.type !== 'detail'"
             v-hasPerm="['module_system:param:create']"
             type="primary"
+            :loading="submitLoading"
             @click="handleSubmit"
           >
             确定
@@ -374,46 +259,94 @@
           </el-button>
         </div>
       </template>
-    </el-dialog>
+    </EnhancedDialog>
 
     <ExportModal
       v-model="exportsDialogVisible"
       :content-config="curdContentConfig"
-      :selection-data="selectionRows"
+      :query-params="exportQueryParams"
+      :page-data="exportPageData"
+      :selection-data="exportSelectionData"
     />
   </div>
 </template>
 
 <script setup lang="ts">
+import { ref, reactive, computed, unref } from "vue";
+import { fetchAllPages } from "@/utils/fetchAllPages";
+import ParamsAPI, { ConfigTable, ConfigForm, ConfigPageQuery } from "@/api/module_system/params";
+import { useConfigStore } from "@/store";
+import ExportModal from "@/components/CURD/ExportModal.vue";
+import CrudToolbarLeft from "@/components/CURD/CrudToolbarLeft.vue";
+import CrudToolbarRight from "@/components/CURD/CrudToolbarRight.vue";
+import PageSearch from "@/components/CURD/PageSearch.vue";
+import PageContent from "@/components/CURD/PageContent.vue";
+import EnhancedDialog from "@/components/CURD/EnhancedDialog.vue";
+import { useCrudList } from "@/components/CURD/useCrudList";
+import type { IContentConfig, ISearchConfig, IObject } from "@/components/CURD/types";
+
 defineOptions({
   name: "Params",
   inheritAttrs: false,
 });
 
-import ParamsAPI, { ConfigTable, ConfigForm, ConfigPageQuery } from "@/api/module_system/params";
-import { useConfigStore } from "@/store";
-import ExportModal from "@/components/CURD/ExportModal.vue";
-import type { IContentConfig } from "@/components/CURD/types";
-import { formatToDateTime } from "@/utils/dateUtil";
-
-const queryFormRef = ref();
+const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
 const dataFormRef = ref();
-const total = ref(0);
-const selectIds = ref<number[]>([]);
-const loading = ref(false);
+const submitLoading = ref(false);
 
-const isExpand = ref(false);
-const isExpandable = ref(true);
+const searchConfig = reactive<ISearchConfig>({
+  permPrefix: "module_system:param",
+  colon: true,
+  isExpandable: true,
+  showNumber: 2,
+  form: { labelWidth: "auto" },
+  formItems: [
+    {
+      prop: "config_name",
+      label: "配置名称",
+      type: "input",
+      attrs: { placeholder: "请输入配置名称", clearable: true },
+    },
+    {
+      prop: "config_key",
+      label: "配置键名",
+      type: "input",
+      attrs: { placeholder: "请输入配置键名", clearable: true },
+    },
+    {
+      prop: "config_type",
+      label: "系统内置",
+      type: "select",
+      options: [
+        { label: "是", value: "true" },
+        { label: "否", value: "false" },
+      ],
+      attrs: { placeholder: "请选择系统内置", clearable: true, style: { width: "167.5px" } },
+    },
+    {
+      prop: "created_time",
+      label: "创建时间",
+      type: "date-picker",
+      initialValue: [],
+      attrs: {
+        type: "datetimerange",
+        valueFormat: "YYYY-MM-DD HH:mm:ss",
+        rangeSeparator: "至",
+        startPlaceholder: "开始日期",
+        endPlaceholder: "结束日期",
+        style: { width: "340px" },
+      },
+    },
+  ],
+});
 
-// 分页表单
-const pageTableData = ref<ConfigTable[]>([]);
-
-// 导出弹窗显示状态 & 选中行
-const exportsDialogVisible = ref(false);
-const selectionRows = ref<ConfigTable[]>([]);
-
-// 表格列配置
-const tableColumns = ref([
+const contentCols = reactive<
+  Array<{
+    prop?: string;
+    label?: string;
+    show?: boolean;
+  }>
+>([
   { prop: "selection", label: "选择框", show: true },
   { prop: "index", label: "序号", show: true },
   { prop: "config_name", label: "配置名称", show: true },
@@ -426,20 +359,58 @@ const tableColumns = ref([
   { prop: "operation", label: "操作", show: true },
 ]);
 
-// 详情表单
-const detailFormData = ref<ConfigTable>({} as ConfigTable);
+const configStore = useConfigStore();
 
-// 分页查询参数
-const queryFormData = reactive<ConfigPageQuery>({
-  page_no: 1,
-  page_size: 10,
-  config_name: undefined,
-  config_key: undefined,
-  config_type: undefined,
-  created_time: undefined,
+function normalizeListQuery(params: IObject): ConfigPageQuery {
+  const q = { ...params } as IObject;
+  if (typeof q.config_type === "string") {
+    q.config_type = q.config_type === "true";
+  }
+  return q as unknown as ConfigPageQuery;
+}
+
+const contentConfig = reactive<IContentConfig<ConfigPageQuery>>({
+  permPrefix: "module_system:param",
+  pk: "id",
+  cols: contentCols as IContentConfig["cols"],
+  hideColumnFilter: false,
+  toolbar: [],
+  defaultToolbar: [{ name: "refresh", perm: "refresh" }, "filter"],
+  pagination: {
+    pageSize: 10,
+    pageSizes: [10, 20, 30, 50],
+  },
+  request: { page_no: "page_no", page_size: "page_size" },
+  indexAction: async (params) => {
+    const res = await ParamsAPI.listParams(normalizeListQuery(params as IObject));
+    return {
+      total: res.data.data.total,
+      list: res.data.data.items,
+    };
+  },
+  deleteAction: async (ids) => {
+    await ParamsAPI.deleteParams(
+      ids
+        .split(",")
+        .map((s) => Number(s.trim()))
+        .filter((n) => !Number.isNaN(n))
+    );
+    configStore.isConfigLoaded = false;
+    await configStore.getConfig();
+  },
+  deleteConfirm: {
+    title: "警告",
+    message: "确认删除该项数据?",
+    type: "warning",
+  },
 });
 
-// 编辑表单
+function handleRowDelete(id: number) {
+  contentRef.value?.handleDelete(id);
+}
+
+const detailFormData = ref<ConfigTable>({} as ConfigTable);
+
 const formData = reactive<ConfigForm>({
   id: undefined,
   config_name: "",
@@ -449,14 +420,12 @@ const formData = reactive<ConfigForm>({
   description: "",
 });
 
-// 弹窗状态
 const dialogVisible = reactive({
   title: "",
   visible: false,
   type: "create" as "create" | "update" | "detail",
 });
 
-// 表单验证规则
 const rules = reactive({
   config_name: [{ required: true, message: "请输入系统配置名称", trigger: "blur" }],
   config_key: [{ required: true, message: "请输入系统配置键", trigger: "blur" }],
@@ -464,58 +433,6 @@ const rules = reactive({
   config_type: [{ required: true, message: "请选择系统配置类型", trigger: "blur" }],
 });
 
-// 日期范围临时变量
-const dateRange = ref<[Date, Date] | []>([]);
-
-// 配置 store
-const configStore = useConfigStore();
-
-// 处理日期范围变化
-function handleDateRangeChange(range: [Date, Date]) {
-  dateRange.value = range;
-  if (range && range.length === 2) {
-    queryFormData.created_time = [formatToDateTime(range[0]), formatToDateTime(range[1])];
-  } else {
-    queryFormData.created_time = undefined;
-  }
-}
-
-// 列表刷新
-async function handleRefresh() {
-  await loadingData();
-}
-
-// 加载表格数据
-async function loadingData() {
-  loading.value = true;
-  try {
-    const response = await ParamsAPI.listParams(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();
-}
-
-// 重置查询
-async function handleResetQuery() {
-  queryFormRef.value.resetFields();
-  queryFormData.page_no = 1;
-  // 额外清空日期范围与时间查询参数
-  dateRange.value = [];
-  queryFormData.created_time = undefined;
-  loadingData();
-}
-
-// 定义初始表单数据常量
 const initialFormData: ConfigForm = {
   id: undefined,
   config_name: "",
@@ -525,29 +442,61 @@ const initialFormData: ConfigForm = {
   description: "",
 };
 
-// 重置表单
+const exportsDialogVisible = ref(false);
+
+const exportQueryParams = computed(() => searchRef.value?.getQueryParams() ?? {});
+
+const exportPageData = computed(() => (unref(contentRef.value?.pageData) ?? []) as ConfigTable[]);
+
+const exportSelectionData = computed(
+  () => (contentRef.value?.getSelectionData() ?? []) as ConfigTable[]
+);
+
+const exportColumns = [
+  { prop: "config_name", label: "配置名称" },
+  { prop: "config_key", label: "配置键" },
+  { prop: "config_value", label: "配置值" },
+  { prop: "config_type", label: "系统内置" },
+  { prop: "description", label: "描述" },
+  { prop: "created_time", label: "创建时间" },
+  { prop: "updated_time", label: "更新时间" },
+];
+
+const curdContentConfig = {
+  permPrefix: "module_system:param",
+  cols: exportColumns as any,
+  exportsAction: async (params: any) => {
+    const query = { ...normalizeListQuery(params) } as Record<string, unknown>;
+    return fetchAllPages({
+      initialQuery: query,
+      fetchPage: async (q) => {
+        const res = await ParamsAPI.listParams(q as unknown as ConfigPageQuery);
+        return {
+          total: res.data?.data?.total ?? 0,
+          list: res.data?.data?.items ?? [],
+        };
+      },
+    });
+  },
+} as unknown as IContentConfig;
+
+function handleOpenExportsModal() {
+  exportsDialogVisible.value = true;
+}
+
 async function resetForm() {
   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);
-  selectionRows.value = selection;
-}
-
-// 关闭弹窗
 async function handleCloseDialog() {
   dialogVisible.visible = false;
-  resetForm();
+  await resetForm();
 }
 
-// 打开系统配置弹窗
 async function handleOpenDialog(type: "create" | "update" | "detail", id?: number) {
   dialogVisible.type = type;
   if (id) {
@@ -566,116 +515,28 @@ async function handleOpenDialog(type: "create" | "update" | "detail", id?: numbe
   dialogVisible.visible = true;
 }
 
-// 新增、编辑弹窗处理
 async function handleSubmit() {
-  // 表单校验
   dataFormRef.value.validate(async (valid: any) => {
     if (valid) {
-      loading.value = true;
-      // 根据弹窗传入的参数(deatil\create\update)判断走什么逻辑
+      submitLoading.value = true;
       const id = formData.id;
-      if (id) {
-        try {
-          await ParamsAPI.updateParams(id, { id, ...formData });
-          dialogVisible.visible = false;
-          resetForm();
-          handleResetQuery();
-          // 重新加载配置以同步到浏览器内存
-          configStore.isConfigLoaded = false;
-          await configStore.getConfig();
-        } catch (error: any) {
-          console.error(error);
-        } finally {
-          loading.value = false;
-        }
-      } else {
-        try {
-          await ParamsAPI.createParams(formData);
-          dialogVisible.visible = false;
-          resetForm();
-          handleResetQuery();
-          // 重新加载配置以同步到浏览器内存
-          configStore.isConfigLoaded = false;
-          await configStore.getConfig();
-        } 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 ParamsAPI.deleteParams(ids);
-        handleResetQuery();
-        // 重新加载配置以同步到浏览器内存
+        if (id) {
+          await ParamsAPI.updateParams(id, { id, ...formData });
+        } else {
+          await ParamsAPI.createParams(formData);
+        }
+        dialogVisible.visible = false;
+        await resetForm();
+        refreshList();
         configStore.isConfigLoaded = false;
         await configStore.getConfig();
       } catch (error: any) {
         console.error(error);
       } finally {
-        loading.value = false;
+        submitLoading.value = false;
       }
-    })
-    .catch(() => {
-      ElMessageBox.close();
-    });
-}
-
-// 导出弹窗
-async function handleOpenExportsModal() {
-  exportsDialogVisible.value = true;
-}
-
-// 导出字段
-const exportColumns = [
-  { prop: "config_name", label: "配置名称" },
-  { prop: "config_key", label: "配置键" },
-  { prop: "config_value", label: "配置值" },
-  { prop: "config_type", label: "系统内置" },
-  { prop: "description", label: "描述" },
-  { prop: "created_time", label: "创建时间" },
-  { prop: "updated_time", label: "更新时间" },
-];
-
-// 导入/导出配置（用于导出弹窗）
-const curdContentConfig = {
-  permPrefix: "module_system:param",
-  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";
     }
-    query.page_no = 1;
-    query.page_size = 1000;
-    const all: any[] = [];
-    while (true) {
-      const res = await ParamsAPI.listParams(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>
diff --git a/frontend/src/views/module_system/position/index.vue b/frontend/src/views/module_system/position/index.vue
index 39d965cf..5a667d19 100644
--- a/frontend/src/views/module_system/position/index.vue
+++ b/frontend/src/views/module_system/position/index.vue
@@ -1,124 +1,27 @@
 <!-- 岗位管理 -->
 <template>
   <div class="app-container">
-    <!-- 搜索区域 -->
-    <el-card class="search-container">
-      <el-form
-        ref="queryFormRef"
-        :model="queryFormData"
-        :inline="true"
-        label-suffix=":"
-        @submit.prevent="handleQuery"
-      >
-        <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="0" label="启用" />
-            <el-option value="1" 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 v-if="isExpand" prop="created_id" label="创建人">
-          <UserTableSelect
-            v-model="queryFormData.created_id"
-            @confirm-click="handleConfirm"
-            @clear-click="handleQuery"
-          />
-        </el-form-item>
-        <!-- 查询、重置、展开/收起按钮 -->
-        <el-form-item class="search-buttons">
-          <el-button
-            v-hasPerm="['module_system:position:query']"
-            type="primary"
-            icon="search"
-            native-type="submit"
-          >
-            查询
-          </el-button>
-          <el-button
-            v-hasPerm="['module_system:position: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>
-    </el-card>
+    <PageSearch
+      ref="searchRef"
+      :search-config="searchConfig"
+      @query-click="handleQueryClick"
+      @reset-click="handleResetClick"
+    />
 
-    <!-- 内容区域 -->
-    <el-card class="data-table">
-      <!-- 功能区域 -->
-      <div class="data-table__toolbar">
-        <div class="data-table__toolbar--left">
-          <el-row :gutter="10">
-            <el-col :span="1.5">
-              <el-button
-                v-hasPerm="['module_system:position:create']"
-                type="success"
-                icon="plus"
-                @click="handleOpenDialog('create')"
-              >
-                新增
-              </el-button>
-            </el-col>
-            <el-col :span="1.5">
-              <el-button
-                v-hasPerm="['module_system:position: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="['module_system:position:patch']" trigger="click">
-                <el-button type="default" :disabled="selectIds.length === 0" icon="ArrowDown">
-                  更多
-                </el-button>
-                <template #dropdown>
-                  <el-dropdown-menu v-hasPerm="['module_system:position:filter']">
-                    <el-dropdown-item icon="Check" @click="handleMoreClick('0')">
-                      批量启用
-                    </el-dropdown-item>
-                    <el-dropdown-item icon="CircleClose" @click="handleMoreClick('1')">
-                      批量停用
-                    </el-dropdown-item>
-                  </el-dropdown-menu>
-                </template>
-              </el-dropdown>
-            </el-col>
-          </el-row>
-        </div>
+    <PageContent ref="contentRef" :content-config="contentConfig">
+      <template #toolbar="{ toolbarRight, onToolbar, removeIds, cols }">
+        <CrudToolbarLeft
+          :remove-ids="removeIds"
+          :perm-create="['module_system:position:create']"
+          :perm-delete="['module_system:position:delete']"
+          :perm-patch="['module_system:position:patch']"
+          @add="handleOpenDialog('create')"
+          @delete="onToolbar('delete')"
+          @more="handleMoreClick"
+        />
         <div class="data-table__toolbar--right">
-          <el-row :gutter="10">
-            <el-col :span="1.5">
+          <CrudToolbarRight :buttons="toolbarRight" :cols="cols" :on-toolbar="onToolbar">
+            <template #prepend>
               <el-tooltip content="导出">
                 <el-button
                   v-hasPerm="['module_system:position:export']"
@@ -128,198 +31,163 @@
                   @click="handleOpenExportsModal"
                 />
               </el-tooltip>
-            </el-col>
-            <el-col :span="1.5">
-              <el-tooltip content="刷新">
-                <el-button
-                  v-hasPerm="['module_system:position: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-scrollbar>
-              </el-popover>
-            </el-col>
-          </el-row>
+            </template>
+          </CrudToolbarRight>
         </div>
-      </div>
-
-      <!-- 表格区域：系统配置列表 -->
-      <div class="data-table__content">
-        <el-table
-          ref="dataTableRef"
-          v-loading="loading"
-          :data="pageTableData"
-          height="calc(100vh - 350px)"
-          max-height="calc(100vh - 350px)"
-          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"
-            type="index"
-            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"
-            key="name"
-            label="岗位名称"
-            prop="name"
-            min-width="100"
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'status')?.show"
-            key="status"
-            label="状态"
-            prop="status"
-            min-width="80"
-          >
-            <template #default="scope">
-              <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
-                {{ scope.row.status === "0" ? "启用" : "停用" }}
-              </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'order')?.show"
-            key="order"
-            label="岗位排序"
-            prop="order"
-            min-width="80"
-            show-overflow-tooltip
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'description')?.show"
-            key="description"
-            label="描述"
-            prop="description"
-            min-width="120"
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'created_time')?.show"
-            key="created_time"
-            label="创建时间"
-            prop="created_time"
-            min-width="200"
-            sortable
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'updated_time')?.show"
-            key="updated_time"
-            label="更新时间"
-            prop="updated_time"
-            min-width="200"
-            sortable
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'created_id')?.show"
-            key="created_id"
-            label="创建人"
-            min-width="100"
-          >
-            <template #default="scope">
-              {{ scope.row.created_by?.name }}
-            </template>
-          </el-table-column>
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'updated_id')?.show"
-            key="updated_id"
-            label="更新人"
-            min-width="100"
-          >
-            <template #default="scope">
-              {{ scope.row.updated_by?.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="['module_system:position:detail']"
-                type="info"
-                size="small"
-                link
-                icon="document"
-                @click="handleOpenDialog('detail', scope.row.id)"
-              >
-                详情
-              </el-button>
-              <el-button
-                v-hasPerm="['module_system:position:update']"
-                type="primary"
-                size="small"
-                link
-                icon="edit"
-                @click="handleOpenDialog('update', scope.row.id)"
-              >
-                编辑
-              </el-button>
-              <el-button
-                v-hasPerm="['module_system:position:delete']"
-                type="danger"
-                size="small"
-                link
-                icon="delete"
-                @click="handleDelete([scope.row.id])"
-              >
-                删除
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-
-      <!-- 分页区域 -->
-      <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
+      <template #table="{ data, loading, tableRef, onSelectionChange, pagination }">
+        <div class="data-table__content">
+          <el-table
+            :ref="tableRef as any"
+            v-loading="loading"
+            row-key="id"
+            :data="data"
+            height="100%"
+            border
+            stripe
+            @selection-change="onSelectionChange"
+          >
+            <template #empty>
+              <el-empty :image-size="80" description="暂无数据" />
+            </template>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'selection')?.show"
+              type="selection"
+              min-width="55"
+              align="center"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'index')?.show"
+              fixed
+              label="序号"
+              min-width="60"
+            >
+              <template #default="scope">
+                {{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'name')?.show"
+              key="name"
+              label="岗位名称"
+              prop="name"
+              min-width="100"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'status')?.show"
+              key="status"
+              label="状态"
+              prop="status"
+              min-width="80"
+            >
+              <template #default="scope">
+                <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
+                  {{ scope.row.status === "0" ? "启用" : "停用" }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'order')?.show"
+              key="order"
+              label="岗位排序"
+              prop="order"
+              min-width="80"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'description')?.show"
+              key="description"
+              label="描述"
+              prop="description"
+              min-width="120"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'created_time')?.show"
+              key="created_time"
+              label="创建时间"
+              prop="created_time"
+              min-width="200"
+              sortable
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'updated_time')?.show"
+              key="updated_time"
+              label="更新时间"
+              prop="updated_time"
+              min-width="200"
+              sortable
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'created_id')?.show"
+              key="created_id"
+              label="创建人"
+              min-width="100"
+            >
+              <template #default="scope">
+                {{ scope.row.created_by?.name }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'updated_id')?.show"
+              key="updated_id"
+              label="更新人"
+              min-width="100"
+            >
+              <template #default="scope">
+                {{ scope.row.updated_by?.name }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'operation')?.show"
+              fixed="right"
+              label="操作"
+              align="center"
+              min-width="200"
+            >
+              <template #default="scope">
+                <el-button
+                  v-hasPerm="['module_system:position:detail']"
+                  type="info"
+                  size="small"
+                  link
+                  icon="View"
+                  @click="handleOpenDialog('detail', scope.row.id)"
+                >
+                  详情
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_system:position:update']"
+                  type="primary"
+                  size="small"
+                  link
+                  icon="edit"
+                  @click="handleOpenDialog('update', scope.row.id)"
+                >
+                  编辑
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_system:position:delete']"
+                  type="danger"
+                  size="small"
+                  link
+                  icon="delete"
+                  @click="handleRowDelete(scope.row.id)"
+                >
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </template>
+    </PageContent>
+
+    <EnhancedDialog
       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">
@@ -349,7 +217,6 @@
           </el-descriptions-item>
         </el-descriptions>
       </template>
-      <!-- 新增、编辑表单 -->
       <template v-else>
         <el-form
           ref="dataFormRef"
@@ -386,20 +253,26 @@
 
       <template #footer>
         <div class="dialog-footer">
-          <!-- 详情弹窗不需要确定按钮的提交逻辑 -->
           <el-button @click="handleCloseDialog">取消</el-button>
-          <el-button v-if="dialogVisible.type !== 'detail'" type="primary" @click="handleSubmit">
+          <el-button
+            v-if="dialogVisible.type !== 'detail'"
+            type="primary"
+            :loading="submitLoading"
+            @click="handleSubmit"
+          >
             确定
           </el-button>
           <el-button v-else type="primary" @click="handleCloseDialog">确定</el-button>
         </div>
       </template>
-    </el-dialog>
+    </EnhancedDialog>
 
     <ExportModal
       v-model="exportsDialogVisible"
       :content-config="curdContentConfig"
-      :selection-data="selectionRows"
+      :query-params="exportQueryParams"
+      :page-data="exportPageData"
+      :selection-data="exportSelectionData"
     />
   </div>
 </template>
@@ -410,6 +283,8 @@ defineOptions({
   inheritAttrs: false,
 });
 
+import { ref, reactive, computed, markRaw, nextTick, unref } from "vue";
+import { fetchAllPages } from "@/utils/fetchAllPages";
 import PositionAPI, {
   PositionTable,
   PositionForm,
@@ -418,27 +293,82 @@ import PositionAPI, {
 import { useUserStore } from "@/store";
 import UserTableSelect from "@/views/module_system/user/components/UserTableSelect.vue";
 import ExportModal from "@/components/CURD/ExportModal.vue";
-import type { IContentConfig } from "@/components/CURD/types";
-import { formatToDateTime } from "@/utils/dateUtil";
+import CrudToolbarLeft from "@/components/CURD/CrudToolbarLeft.vue";
+import CrudToolbarRight from "@/components/CURD/CrudToolbarRight.vue";
+import PageSearch from "@/components/CURD/PageSearch.vue";
+import PageContent from "@/components/CURD/PageContent.vue";
+import EnhancedDialog from "@/components/CURD/EnhancedDialog.vue";
+import { useCrudList } from "@/components/CURD/useCrudList";
+import type { IContentConfig, ISearchConfig } from "@/components/CURD/types";
 
-const queryFormRef = ref();
+const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
 const dataFormRef = ref();
-const total = ref(0);
-const selectIds = ref<number[]>([]);
-const loading = ref(false);
+const submitLoading = ref(false);
 
-const isExpand = ref(false);
-const isExpandable = ref(true);
+function triggerUserSearch() {
+  nextTick(() => refreshList());
+}
 
-// 分页表单
-const pageTableData = ref<PositionTable[]>([]);
+const searchConfig = reactive<ISearchConfig>({
+  permPrefix: "module_system:position",
+  colon: true,
+  isExpandable: true,
+  showNumber: 2,
+  form: { labelWidth: "auto" },
+  formItems: [
+    {
+      prop: "name",
+      label: "岗位名称",
+      type: "input",
+      attrs: { placeholder: "请输入岗位名称", clearable: true },
+    },
+    {
+      prop: "status",
+      label: "状态",
+      type: "select",
+      options: [
+        { label: "启用", value: "0" },
+        { label: "停用", value: "1" },
+      ],
+      attrs: { placeholder: "请选择状态", clearable: true, style: { width: "167.5px" } },
+    },
+    {
+      prop: "created_time",
+      label: "创建时间",
+      type: "date-picker",
+      initialValue: [],
+      attrs: {
+        type: "datetimerange",
+        valueFormat: "YYYY-MM-DD HH:mm:ss",
+        rangeSeparator: "至",
+        startPlaceholder: "开始日期",
+        endPlaceholder: "结束日期",
+        style: { width: "340px" },
+      },
+    },
+    {
+      prop: "created_id",
+      label: "创建人",
+      type: "user-table-select",
+      initialValue: null,
+      events: {
+        "confirm-click": triggerUserSearch,
+        "clear-click": triggerUserSearch,
+      },
+    },
+  ],
+  customComponents: {
+    "user-table-select": markRaw(UserTableSelect),
+  },
+});
 
-// 导出弹窗显示状态 & 选中行
-const exportsDialogVisible = ref(false);
-const selectionRows = ref<PositionTable[]>([]);
-
-// 表格列配置
-const tableColumns = ref([
+const contentCols = reactive<
+  Array<{
+    prop?: string;
+    label?: string;
+    show?: boolean;
+  }>
+>([
   { prop: "selection", label: "选择框", show: true },
   { prop: "index", label: "序号", show: true },
   { prop: "name", label: "岗位名称", show: true },
@@ -452,20 +382,89 @@ const tableColumns = ref([
   { prop: "operation", label: "操作", show: true },
 ]);
 
-// 详情表单
-const detailFormData = ref<PositionTable>({});
-
-// 分页查询参数
-const queryFormData = reactive<PositionPageQuery>({
-  page_no: 1,
-  page_size: 10,
-  name: "",
-  status: undefined,
-  created_time: undefined,
-  created_id: undefined,
+const contentConfig = reactive<IContentConfig<PositionPageQuery>>({
+  permPrefix: "module_system:position",
+  pk: "id",
+  cols: contentCols as IContentConfig["cols"],
+  hideColumnFilter: false,
+  toolbar: [],
+  defaultToolbar: [{ name: "refresh", perm: "refresh" }, "filter"],
+  pagination: {
+    pageSize: 10,
+    pageSizes: [10, 20, 30, 50],
+  },
+  request: { page_no: "page_no", page_size: "page_size" },
+  indexAction: async (params) => {
+    const res = await PositionAPI.listPosition(params as PositionPageQuery);
+    return {
+      total: res.data.data.total,
+      list: res.data.data.items,
+    };
+  },
+  deleteAction: async (ids) => {
+    await PositionAPI.deletePosition(
+      ids
+        .split(",")
+        .map((s) => Number(s.trim()))
+        .filter((n) => !Number.isNaN(n))
+    );
+    const userStore = useUserStore();
+    await userStore.getUserInfo();
+  },
+  deleteConfirm: {
+    title: "警告",
+    message: "确认删除该项数据?",
+    type: "warning",
+  },
 });
 
-// 编辑表单
+function handleRowDelete(id: number) {
+  contentRef.value?.handleDelete(id);
+}
+
+const exportsDialogVisible = ref(false);
+
+const exportQueryParams = computed(() => searchRef.value?.getQueryParams() ?? {});
+
+const exportPageData = computed(() => (unref(contentRef.value?.pageData) ?? []) as PositionTable[]);
+
+const exportSelectionData = computed(
+  () => (contentRef.value?.getSelectionData() ?? []) as PositionTable[]
+);
+
+const exportColumns = [
+  { prop: "name", label: "岗位名称" },
+  { prop: "order", label: "岗位排序" },
+  { prop: "status", label: "状态" },
+  { prop: "description", label: "描述" },
+  { prop: "created_time", label: "创建时间" },
+  { prop: "updated_time", label: "更新时间" },
+];
+
+const curdContentConfig = {
+  permPrefix: "module_system:position",
+  cols: exportColumns as unknown as IContentConfig["cols"],
+  exportsAction: async (params: Record<string, unknown>) => {
+    const query = { ...params } as Record<string, unknown>;
+    return fetchAllPages<PositionTable>({
+      initialQuery: query,
+      fetchPage: async (q) => {
+        const res = await PositionAPI.listPosition(q as unknown as PositionPageQuery);
+        return {
+          total: res.data?.data?.total ?? 0,
+          list: res.data?.data?.items ?? [],
+        };
+      },
+    });
+  },
+} as unknown as IContentConfig;
+
+function handleOpenExportsModal() {
+  exportsDialogVisible.value = true;
+}
+
+const detailFormData = ref<PositionTable>({});
+
 const formData = reactive<PositionForm>({
   id: undefined,
   name: undefined,
@@ -474,74 +473,18 @@ const formData = reactive<PositionForm>({
   description: undefined,
 });
 
-// 弹窗状态
 const dialogVisible = reactive({
   title: "",
   visible: false,
   type: "create" as "create" | "update" | "detail",
 });
 
-// 表单验证规则
 const rules = reactive({
   name: [{ required: true, message: "请输入岗位名称", trigger: "blur" }],
   order: [{ required: true, message: "请输入岗位排序", trigger: "blur" }],
   status: [{ required: true, message: "请选择岗位状态", trigger: "blur" }],
 });
 
-// 日期范围临时变量
-const dateRange = ref<[Date, Date] | []>([]);
-
-// 处理日期范围变化
-function handleDateRangeChange(range: [Date, Date]) {
-  dateRange.value = range;
-  if (range && range.length === 2) {
-    queryFormData.created_time = [formatToDateTime(range[0]), formatToDateTime(range[1])];
-  } else {
-    queryFormData.created_time = undefined;
-  }
-}
-
-// 列表刷新
-async function handleRefresh() {
-  await loadingData();
-}
-
-// 加载表格数据
-async function loadingData() {
-  loading.value = true;
-  try {
-    const response = await PositionAPI.listPosition(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();
-}
-
-// 选择创建人后触发查询
-function handleConfirm() {
-  handleQuery();
-}
-
-// 重置查询
-async function handleResetQuery() {
-  queryFormRef.value.resetFields();
-  queryFormData.page_no = 1;
-  // 额外清空日期范围与时间查询参数
-  dateRange.value = [];
-  queryFormData.created_time = undefined;
-  loadingData();
-}
-
-// 定义初始表单数据常量
 const initialFormData: PositionForm = {
   id: undefined,
   name: undefined,
@@ -550,29 +493,19 @@ const initialFormData: PositionForm = {
   description: undefined,
 };
 
-// 重置表单
 async function resetForm() {
   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);
-  selectionRows.value = selection;
-}
-
-// 关闭弹窗
 async function handleCloseDialog() {
   dialogVisible.visible = false;
-  resetForm();
+  await resetForm();
 }
 
-// 打开系统配置弹窗
 async function handleOpenDialog(type: "create" | "update" | "detail", id?: number) {
   dialogVisible.type = type;
   if (id) {
@@ -591,13 +524,10 @@ async function handleOpenDialog(type: "create" | "update" | "detail", id?: numbe
   dialogVisible.visible = true;
 }
 
-// 新增、编辑弹窗处理
 async function handleSubmit() {
-  // 表单校验
-  dataFormRef.value.validate(async (valid: any) => {
+  dataFormRef.value.validate(async (valid: boolean) => {
     if (valid) {
-      loading.value = true;
-      // 根据弹窗传入的参数(deatil\create\update)判断走什么逻辑
+      submitLoading.value = true;
       const id = formData.id;
       try {
         if (id) {
@@ -606,117 +536,43 @@ async function handleSubmit() {
           await PositionAPI.createPosition(formData);
         }
         dialogVisible.visible = false;
-        resetForm();
-        handleResetQuery();
-        // 更新全局用户状态，刷新岗位信息
+        await resetForm();
+        refreshList();
         const userStore = useUserStore();
         await userStore.getUserInfo();
-      } catch (error: any) {
+      } catch (error: unknown) {
         console.error(error);
       } finally {
-        loading.value = false;
+        submitLoading.value = false;
       }
     }
   });
 }
 
-// 删除、批量删除
-async function handleDelete(ids: number[]) {
-  ElMessageBox.confirm("确认删除该项数据?", "警告", {
+async function handleMoreClick(status: string) {
+  const rows = contentRef.value?.getSelectionData() as PositionTable[] | undefined;
+  const ids = (rows ?? []).map((r) => r.id).filter((id): id is number => id != null);
+  if (!ids.length) {
+    ElMessage.warning("请先选择要操作的数据");
+    return;
+  }
+  ElMessageBox.confirm(`确认${status === "0" ? "启用" : "停用"}该项数据?`, "警告", {
     confirmButtonText: "确定",
     cancelButtonText: "取消",
     type: "warning",
   })
     .then(async () => {
       try {
-        loading.value = true;
-        await PositionAPI.deletePosition(ids);
-        handleResetQuery();
-      } catch (error: any) {
+        await PositionAPI.batchPosition({ ids, status });
+        refreshList();
+        const userStore = useUserStore();
+        await userStore.getUserInfo();
+      } catch (error: unknown) {
         console.error(error);
-      } finally {
-        loading.value = false;
       }
     })
     .catch(() => {
       ElMessageBox.close();
     });
 }
-
-// 导出
-async function handleOpenExportsModal() {
-  exportsDialogVisible.value = true;
-}
-// 批量启用/停用
-async function handleMoreClick(status: string) {
-  if (selectIds.value.length) {
-    ElMessageBox.confirm(`确认${status === "0" ? "启用" : "停用"}该项数据?`, "警告", {
-      confirmButtonText: "确定",
-      cancelButtonText: "取消",
-      type: "warning",
-    })
-      .then(async () => {
-        try {
-          loading.value = true;
-          await PositionAPI.batchPosition({ ids: selectIds.value, status });
-          handleResetQuery();
-        } catch (error: any) {
-          console.error(error);
-        } finally {
-          loading.value = false;
-        }
-      })
-      .catch(() => {
-        ElMessageBox.close();
-      });
-  }
-}
-
-// 导出字段
-const exportColumns = [
-  { prop: "name", label: "岗位名称" },
-  { prop: "order", label: "岗位排序" },
-  { prop: "status", label: "状态" },
-  { prop: "description", label: "描述" },
-  { prop: "created_time", label: "创建时间" },
-  { prop: "updated_time", label: "更新时间" },
-];
-
-// 导入/导出配置（用于导出）
-const curdContentConfig = {
-  permPrefix: "module_system:position",
-  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 PositionAPI.listPosition(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_time', label: '创建时间' }, { prop: 'updated_time', label: '更新时间' }, ]; //
-导入/导出配置（仅用于导出） const curdContentConfig = { permPrefix: 'module_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.listPosition(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/module_system/role/components/PermissonDrawer.vue b/frontend/src/views/module_system/role/components/PermissonDrawer.vue
index 01ea4c5c..48ebf047 100644
--- a/frontend/src/views/module_system/role/components/PermissonDrawer.vue
+++ b/frontend/src/views/module_system/role/components/PermissonDrawer.vue
@@ -1,165 +1,158 @@
 <!-- 角色授权 -->
 <template>
-  <!-- 分配权限弹窗 -->
-  <el-drawer
+  <EnhancedDrawer
     v-model="drawerVisible"
     :title="'【' + props.roleName + '】权限分配'"
     :size="drawerSize"
+    destroy-on-close
+    @close="handleCancel"
   >
-    <el-container>
-      <!-- 数据权限 -->
-      <el-aside>
-        <div
-          class="border-r-1 border-r-[var(--el-border-color-lighter)] b-r-solid h-[100%] p-[20px] box-border"
-        >
-          <div class="flex items-center">
-            <div style="display: flex; gap: 10px">
-              <div style="width: 10px; background-color: var(--el-color-primary)"></div>
-              <div>
-                <span style="font-size: 16px">数据授权</span>
-                <el-tooltip placement="right">
-                  <template #content>
-                    <span>授权用户可操作的数据范围</span>
+    <div class="drawer-perm-content flex flex-col min-h-0 flex-1 overflow-hidden">
+      <el-container class="h-full min-h-0 flex-1">
+        <!-- 数据权限 -->
+        <el-aside>
+          <div
+            class="border-r-1 border-r-[var(--el-border-color-lighter)] b-r-solid h-[100%] p-[20px] box-border"
+          >
+            <div class="flex items-center">
+              <div style="display: flex; gap: 10px">
+                <div style="width: 10px; background-color: var(--el-color-primary)"></div>
+                <div>
+                  <span style="font-size: 16px">数据授权</span>
+                  <el-tooltip placement="right">
+                    <template #content>
+                      <span>授权用户可操作的数据范围</span>
+                    </template>
+                    <el-icon class="ml-1 inline-block cursor-pointer">
+                      <QuestionFilled />
+                    </el-icon>
+                  </el-tooltip>
+                </div>
+              </div>
+            </div>
+            <div class="mt-3">
+              <el-form ref="dataFormRef" :model="permissionState">
+                <el-form-item prop="data_scope">
+                  <el-select v-model="permissionState.data_scope">
+                    <el-option :key="1" label="仅本人数据权限" :value="1" />
+                    <el-option :key="2" label="本部门数据权限" :value="2" />
+                    <el-option :key="3" label="本部门及以下数据权限" :value="3" />
+                    <el-option :key="4" label="全部数据权限" :value="4" />
+                    <el-option :key="5" label="自定义数据权限" :value="5" />
+                  </el-select>
+                </el-form-item>
+              </el-form>
+
+              <div
+                v-if="permissionState.data_scope === 5 && deptTreeData.length"
+                class="mt-5 max-h-[60vh] b-1 b-solid b-[var(--el-border-color-lighter)] p-10px overflow-auto box-border"
+              >
+                <el-input v-model="deptFilterText" placeholder="部门名称" />
+                <el-tree
+                  ref="deptTreeRef"
+                  node-key="value"
+                  show-checkbox
+                  :data="deptTreeData"
+                  :filter-node-method="handleFilter"
+                  default-expand-all
+                  :highlight-current="true"
+                  :check-strictly="!parentChildLinked"
+                  style="height: calc(100% - 60px); margin-top: 10px; overflow-y: auto"
+                  @check="deptTreeCheck"
+                >
+                  <template #empty>
+                    <el-empty :image-size="80" description="暂无数据" />
                   </template>
-                  <el-icon class="ml-1 inline-block cursor-pointer">
-                    <QuestionFilled />
-                  </el-icon>
-                </el-tooltip>
+                </el-tree>
               </div>
             </div>
           </div>
-          <div class="mt-3">
-            <el-form ref="dataFormRef" :model="permissionState">
-              <el-form-item prop="data_scope">
-                <el-select v-model="permissionState.data_scope">
-                  <el-option :key="1" label="仅本人数据权限" :value="1" />
-                  <el-option :key="2" label="本部门数据权限" :value="2" />
-                  <el-option :key="3" label="本部门及以下数据权限" :value="3" />
-                  <el-option :key="4" label="全部数据权限" :value="4" />
-                  <el-option :key="5" label="自定义数据权限" :value="5" />
-                </el-select>
-              </el-form-item>
-            </el-form>
+        </el-aside>
 
-            <div
-              v-if="permissionState.data_scope === 5 && deptTreeData.length"
-              class="mt-5 max-h-[60vh] b-1 b-solid b-[var(--el-border-color-lighter)] p-10px overflow-auto box-border"
-            >
-              <el-input v-model="deptFilterText" placeholder="部门名称" />
-              <el-tree
-                ref="deptTreeRef"
-                node-key="value"
-                show-checkbox
-                :data="deptTreeData"
-                :filter-node-method="handleFilter"
-                default-expand-all
-                :highlight-current="true"
-                :check-strictly="!parentChildLinked"
-                style="height: calc(100% - 60px); margin-top: 10px; overflow-y: auto"
-                @check="deptTreeCheck"
-              >
-                <template #empty>
-                  <el-empty :image-size="80" description="暂无数据" />
+        <!-- 菜单权限 -->
+        <el-main>
+          <div style="display: flex; gap: 10px">
+            <div style="width: 10px; background-color: var(--el-color-primary)"></div>
+            <div>
+              <span style="font-size: 16px">菜单授权</span>
+              <el-tooltip placement="right">
+                <template #content>
+                  <span>授权用户可操作的菜单权限</span>
                 </template>
-              </el-tree>
+                <el-icon class="ml-1 inline-block cursor-pointer">
+                  <QuestionFilled />
+                </el-icon>
+              </el-tooltip>
             </div>
           </div>
-        </div>
-      </el-aside>
+          <div class="mt-3 flex-x-between">
+            <el-input v-model="permFilterText" placeholder="菜单名称" />
+            <div class="flex-center ml-5">
+              <el-button type="primary" size="small" plain @click="togglePermTree">
+                <template #icon>
+                  <SwitchIcon />
+                </template>
+                {{ isExpanded ? "收缩" : "展开" }}
+              </el-button>
+              <el-checkbox
+                v-model="parentChildLinked"
+                class="ml-5"
+                @change="handleParentChildLinkedChange"
+              >
+                父子联动
+              </el-checkbox>
 
-      <!-- 菜单权限 -->
-      <el-main>
-        <div style="display: flex; gap: 10px">
-          <div style="width: 10px; background-color: var(--el-color-primary)"></div>
-          <div>
-            <span style="font-size: 16px">菜单授权</span>
-            <el-tooltip placement="right">
-              <template #content>
-                <span>授权用户可操作的菜单权限</span>
-              </template>
-              <el-icon class="ml-1 inline-block cursor-pointer">
-                <QuestionFilled />
-              </el-icon>
-            </el-tooltip>
+              <el-tooltip placement="bottom">
+                <template #content>
+                  如果只需勾选菜单权限，不需要勾选子菜单或者按钮权限，请关闭父子联动
+                </template>
+                <el-icon class="ml-1 color-[--el-color-primary] inline-block cursor-pointer">
+                  <QuestionFilled />
+                </el-icon>
+              </el-tooltip>
+            </div>
           </div>
-        </div>
-        <div class="mt-3 flex-x-between">
-          <el-input v-model="permFilterText" placeholder="菜单名称" />
-          <div class="flex-center ml-5">
-            <el-button type="primary" size="small" plain @click="togglePermTree">
-              <template #icon>
-                <Switch />
-              </template>
-              {{ isExpanded ? "收缩" : "展开" }}
-            </el-button>
-            <el-checkbox
-              v-model="parentChildLinked"
-              class="ml-5"
-              @change="handleParentChildLinkedChange"
-            >
-              父子联动
-            </el-checkbox>
 
-            <el-tooltip placement="bottom">
-              <template #content>
-                如果只需勾选菜单权限，不需要勾选子菜单或者按钮权限，请关闭父子联动
-              </template>
-              <el-icon class="ml-1 color-[--el-color-primary] inline-block cursor-pointer">
-                <QuestionFilled />
-              </el-icon>
-            </el-tooltip>
-          </div>
-        </div>
-
-        <div
-          class="mt-5 max-h-[69vh] b-1 b-solid b-[var(--el-border-color-lighter)] p-10px overflow-auto box-border"
-        >
-          <el-tree
-            ref="permTreeRef"
-            node-key="value"
-            show-checkbox
-            :data="menuTreeData"
-            :filter-node-method="handleFilter"
-            default-expand-all
-            :highlight-current="true"
-            :check-strictly="!parentChildLinked"
-            style="height: calc(100% - 60px); margin-top: 10px; overflow: auto"
-            @check="menuTreeCheck"
+          <div
+            class="mt-5 max-h-[69vh] b-1 b-solid b-[var(--el-border-color-lighter)] p-10px overflow-auto box-border"
           >
-            <template #empty>
-              <el-empty :image-size="80" description="暂无数据" />
-            </template>
-          </el-tree>
-        </div>
-      </el-main>
-    </el-container>
+            <el-tree
+              ref="permTreeRef"
+              node-key="value"
+              show-checkbox
+              :data="menuTreeData"
+              :filter-node-method="handleFilter"
+              default-expand-all
+              :highlight-current="true"
+              :check-strictly="!parentChildLinked"
+              style="height: calc(100% - 60px); margin-top: 10px; overflow: auto"
+              @check="menuTreeCheck"
+            >
+              <template #empty>
+                <el-empty :image-size="80" description="暂无数据" />
+              </template>
+            </el-tree>
+          </div>
+        </el-main>
+      </el-container>
+    </div>
 
     <template #footer>
       <div class="dialog-footer">
         <el-button @click="handleCancel">取 消</el-button>
-        <el-button type="primary" @click.stop="handleDrawerSave">确 定</el-button>
+        <el-button type="primary" :loading="loading" @click.stop="handleDrawerSave">
+          确 定
+        </el-button>
       </div>
     </template>
-  </el-drawer>
+  </EnhancedDrawer>
 </template>
 
 <script setup lang="ts">
-// 添加 props 来接收 dictType
-const props = defineProps({
-  roleName: {
-    type: String,
-    required: true,
-  },
-  roleId: {
-    type: Number,
-    required: true,
-  },
-  modelValue: {
-    type: Boolean,
-    required: true,
-  },
-});
-
+import { computed, ref, watch, onMounted } from "vue";
+import { QuestionFilled, Switch as SwitchIcon } from "@element-plus/icons-vue";
+import type { TreeInstance } from "element-plus";
+import EnhancedDrawer from "@/components/CURD/EnhancedDrawer.vue";
 import { listToTree, formatTree } from "@/utils/common";
 import RoleAPI, {
   permissionDataType,
@@ -168,31 +161,41 @@ import RoleAPI, {
 } from "@/api/module_system/role";
 import DeptAPI from "@/api/module_system/dept";
 import MenuAPI from "@/api/module_system/menu";
-import type { TreeInstance } from "element-plus";
 import { useAppStore } from "@/store/modules/app.store";
 import { DeviceEnum } from "@/enums/settings/device.enum";
 import { useUserStore } from "@/store";
 
+const props = defineProps<{
+  roleName: string;
+  roleId: number;
+  modelValue: boolean;
+}>();
+
+const emit = defineEmits<{
+  "update:modelValue": [v: boolean];
+  saved: [];
+}>();
+
 const appStore = useAppStore();
 const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "800px" : "90%"));
-const emit = defineEmits(["update:modelValue", "saved"]);
+
+const drawerVisible = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value: boolean) {
+    emit("update:modelValue", value);
+  },
+});
 
 const permTreeRef = ref<TreeInstance>();
 const deptTreeRef = ref<TreeInstance>();
 const deptFilterText = ref("");
 const permFilterText = ref("");
 const dataFormRef = ref();
-const drawerVisible = computed({
-  get() {
-    return props.modelValue;
-  },
-  set(value) {
-    emit("update:modelValue", value);
-  },
-});
 const isExpanded = ref(true);
 const parentChildLinked = ref(false);
-const loading = ref<boolean>(false);
+const loading = ref(false);
 const deptTreeData = ref<permissionDeptType[]>([]);
 const menuTreeData = ref<permissionMenuType[]>([]);
 const permissionState = ref<permissionDataType>({
@@ -202,23 +205,18 @@ const permissionState = ref<permissionDataType>({
   dept_ids: [],
 });
 
-// 初始化方法,用于打开抽屉并加载数据
 const init = async () => {
   loading.value = true;
 
   try {
-    // 获取全部部门树
     const deptResponse = await DeptAPI.listDept();
     deptTreeData.value = formatTree(listToTree(deptResponse.data.data));
 
-    // 获取全部菜单树
     const menuResponse = await MenuAPI.listMenu();
     menuTreeData.value = formatTree(listToTree(menuResponse.data.data));
 
-    // 获取角色详情
     const roleResponse = await RoleAPI.detailRole(props.roleId);
 
-    // 更新权限状态
     permissionState.value = {
       role_ids: [props.roleId],
       menu_ids: roleResponse.data.data.menus?.map((menu) => menu.id) || [],
@@ -226,36 +224,30 @@ const init = async () => {
       dept_ids: roleResponse.data.data.depts?.map((dept) => dept.id) || [],
     };
 
-    // 根据保存的权限数据判断是否应该开启父子联动
     parentChildLinked.value = checkParentChildLinked(
       permissionState.value.menu_ids,
       menuTreeData.value
     );
 
-    // 回显菜单树选中项
     if (permTreeRef.value) {
       await permTreeRef.value.setCheckedKeys(permissionState.value.menu_ids);
     }
 
-    // 修改：增加对 deptTreeRef.value 的存在性判断，并添加日志
     if (permissionState.value.data_scope === 5 && deptTreeRef.value) {
-      // await 一定不能丢，否则到导致初始化时候deptTreeRef.value 为 undefined
       await deptTreeRef.value.setCheckedKeys(permissionState.value.dept_ids);
     }
-  } catch (error: any) {
-    ElMessage.error("获取权限数据失败: " + error.message);
+  } catch (error: unknown) {
+    const msg = error instanceof Error ? error.message : String(error);
+    ElMessage.error("获取权限数据失败: " + msg);
   } finally {
     loading.value = false;
-    // handleCancel()
   }
 };
 
-// 取消按钮处理函数
 function handleCancel() {
   drawerVisible.value = false;
 }
 
-// 保存权限分配
 async function handleDrawerSave() {
   try {
     if (props.roleId === 1) {
@@ -264,7 +256,6 @@ async function handleDrawerSave() {
     }
     loading.value = true;
 
-    // 构造提交数据
     const submitData: permissionDataType = {
       role_ids: [props.roleId],
       menu_ids: (permTreeRef.value?.getCheckedKeys() || []).map((key) => Number(key)),
@@ -274,30 +265,26 @@ async function handleDrawerSave() {
 
     await RoleAPI.setPermission(submitData);
 
-    // 更新全局用户状态，刷新权限信息
     const userStore = useUserStore();
     await userStore.getUserInfo();
 
     drawerVisible.value = false;
     emit("saved");
-  } catch (error: any) {
+  } catch (error: unknown) {
     console.error(error);
   } finally {
     loading.value = false;
   }
 }
 
-// 部门树选择回调
 const deptTreeCheck = (checkedIds: number[]) => {
   permissionState.value.dept_ids = checkedIds;
 };
 
-// 菜单选择变更回调
 const menuTreeCheck = (checkedIds: number[]) => {
   permissionState.value.menu_ids = checkedIds;
 };
 
-// 展开/收缩 菜单权限树
 function togglePermTree() {
   isExpanded.value = !isExpanded.value;
   if (permTreeRef.value) {
@@ -311,27 +298,22 @@ function togglePermTree() {
   }
 }
 
-// 部门筛选
 watch(deptFilterText, (val) => {
   deptTreeRef.value!.filter(val);
 });
 
-// 菜单筛选
 watch(permFilterText, (val) => {
   permTreeRef.value!.filter(val);
 });
 
-// 树节点过滤
 function handleFilter(value: string, data: { [key: string]: any }) {
   if (!value) return true;
   return data.label.includes(value);
 }
 
-// 检查权限数据是否遵循父子联动模式
 function checkParentChildLinked(menuIds: number[], menuTreeData: permissionMenuType[]): boolean {
   if (!menuIds.length || !menuTreeData.length) return false;
 
-  // 创建一个映射来快速查找菜单项
   const menuMap = new Map<number, permissionMenuType>();
   const buildMenuMap = (menus: permissionMenuType[]) => {
     menus.forEach((menu) => {
@@ -345,33 +327,28 @@ function checkParentChildLinked(menuIds: number[], menuTreeData: permissionMenuT
 
   let hasParentChildConflict = false;
 
-  // 检查每个选中的菜单项
   for (const menuId of menuIds) {
     const menu = menuMap.get(menuId);
     if (!menu) continue;
 
-    // 如果选中了父菜单，检查是否有子菜单未被选中
     if (menu.children && menu.children.length > 0) {
       const hasUnselectedChildren = menu.children.some((child) => !menuIds.includes(child.id));
       if (hasUnselectedChildren) {
         hasParentChildConflict = true;
-        break; // 发现冲突，直接返回false
+        break;
       }
     }
 
-    // 如果选中了子菜单，检查父菜单是否也被选中
     const parentMenu = findParentMenu(menuId, menuTreeData);
     if (parentMenu && !menuIds.includes(parentMenu.id)) {
       hasParentChildConflict = true;
-      break; // 发现冲突，直接返回false
+      break;
     }
   }
 
-  // 如果没有发现父子冲突，说明是父子联动模式
   return !hasParentChildConflict;
 }
 
-// 查找父菜单
 function findParentMenu(
   menuId: number,
   menuTreeData: permissionMenuType[]
@@ -382,7 +359,6 @@ function findParentMenu(
         if (child.id === menuId) {
           return menu;
         }
-        // 递归查找更深层的父菜单
         const found = findParentMenu(menuId, [child]);
         if (found) return found;
       }
@@ -391,7 +367,6 @@ function findParentMenu(
   return null;
 }
 
-// 父子菜单节点是否联动
 function handleParentChildLinkedChange(val: any) {
   parentChildLinked.value = val;
 }
diff --git a/frontend/src/views/module_system/role/index.vue b/frontend/src/views/module_system/role/index.vue
index bf726f3b..653baf08 100644
--- a/frontend/src/views/module_system/role/index.vue
+++ b/frontend/src/views/module_system/role/index.vue
@@ -1,117 +1,27 @@
 <!-- 角色管理 -->
 <template>
   <div class="app-container">
-    <!-- 搜索区域 -->
-    <el-card class="search-container">
-      <el-form
-        ref="queryFormRef"
-        :model="queryFormData"
-        :inline="true"
-        label-suffix=":"
-        @submit.prevent="handleQuery"
-      >
-        <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="['module_system:role:query']"
-            type="primary"
-            icon="search"
-            native-type="submit"
-          >
-            查询
-          </el-button>
-          <el-button
-            v-hasPerm="['module_system:role: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>
-    </el-card>
+    <PageSearch
+      ref="searchRef"
+      :search-config="searchConfig"
+      @query-click="handleQueryClick"
+      @reset-click="handleResetClick"
+    />
 
-    <!-- 内容区域 -->
-    <el-card class="data-table">
-      <!-- 功能区域 -->
-      <div class="data-table__toolbar">
-        <div class="data-table__toolbar--left">
-          <el-row :gutter="10">
-            <el-col :span="1.5">
-              <el-button
-                v-hasPerm="['module_system:role:create']"
-                type="success"
-                icon="plus"
-                @click="handleOpenDialog('create')"
-              >
-                新增
-              </el-button>
-            </el-col>
-            <el-col :span="1.5">
-              <el-button
-                v-hasPerm="['module_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="['module_system:role:patch']" 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('0')">
-                      批量启用
-                    </el-dropdown-item>
-                    <el-dropdown-item icon="CircleClose" @click="handleMoreClick('1')">
-                      批量停用
-                    </el-dropdown-item>
-                  </el-dropdown-menu>
-                </template>
-              </el-dropdown>
-            </el-col>
-          </el-row>
-        </div>
+    <PageContent ref="contentRef" :content-config="contentConfig">
+      <template #toolbar="{ toolbarRight, onToolbar, removeIds, cols }">
+        <CrudToolbarLeft
+          :remove-ids="removeIds"
+          :perm-create="['module_system:role:create']"
+          :perm-delete="['module_system:role:delete']"
+          :perm-patch="['module_system:role:patch']"
+          @add="handleOpenDialog('create')"
+          @delete="onToolbar('delete')"
+          @more="handleMoreClick"
+        />
         <div class="data-table__toolbar--right">
-          <el-row :gutter="10">
-            <el-col :span="1.5">
+          <CrudToolbarRight :buttons="toolbarRight" :cols="cols" :on-toolbar="onToolbar">
+            <template #prepend>
               <el-tooltip content="导出">
                 <el-button
                   v-hasPerm="['module_system:role:export']"
@@ -121,250 +31,216 @@
                   @click="handleOpenExportsModal"
                 />
               </el-tooltip>
-            </el-col>
-            <el-col :span="1.5">
-              <el-tooltip content="刷新">
-                <el-button
-                  v-hasPerm="['module_system:role:query']"
-                  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-scrollbar>
-              </el-popover>
-            </el-col>
-          </el-row>
+            </template>
+          </CrudToolbarRight>
         </div>
-      </div>
+      </template>
 
-      <div class="data-table__content">
-        <el-table
-          ref="dataTableRef"
-          v-loading="loading"
-          :data="pageTableData"
-          height="calc(100vh - 350px)"
-          max-height="calc(100vh - 350px)"
-          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"
-            width="55"
-            align="center"
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'index')?.show"
-            type="index"
-            fixed
-            label="序号"
-            width="60"
+      <template #table="{ data, loading, tableRef, onSelectionChange, pagination }">
+        <div class="data-table__content">
+          <el-table
+            :ref="tableRef as any"
+            v-loading="loading"
+            row-key="id"
+            :data="data"
+            height="100%"
+            border
+            stripe
+            @selection-change="onSelectionChange"
           >
-            <template #default="scope">
-              {{ (queryFormData.page_no - 1) * queryFormData.page_size + scope.$index + 1 }}
+            <template #empty>
+              <el-empty :image-size="80" description="暂无数据" />
             </template>
-          </el-table-column>
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'name')?.show"
-            key="name"
-            label="角色名称"
-            prop="name"
-            min-width="100"
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'code')?.show"
-            key="code"
-            label="角色编码"
-            prop="code"
-            min-width="100"
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'data_scope')?.show"
-            key="data_scope"
-            label="数据权限"
-            prop="data_scope"
-            min-width="200"
-          >
-            <template #default="scope">
-              <el-tag v-if="scope.row.data_scope === 1" type="primary">仅本人数据权限</el-tag>
-              <el-tag v-else-if="scope.row.data_scope === 2" type="info">本部门数据权限</el-tag>
-              <el-tag v-else-if="scope.row.data_scope === 3" type="warning">
-                本部门及以下数据权限
-              </el-tag>
-              <el-tag v-else-if="scope.row.data_scope === 4" type="success">全部数据权限</el-tag>
-              <el-tag v-else type="danger">自定义数据权限</el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'depts')?.show"
-            key="depts"
-            label="所属部门"
-            prop="depts"
-            min-width="200"
-          >
-            <template #default="scope">
-              <template v-if="scope.row.depts && scope.row.depts.length > 0">
-                <el-tag
-                  v-for="dept in scope.row.depts.slice(0, 3)"
-                  :key="dept.id"
-                  type="info"
-                  style="margin-right: 4px; margin-bottom: 4px"
-                >
-                  {{ dept.name }}
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'selection')?.show"
+              type="selection"
+              width="55"
+              align="center"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'index')?.show"
+              fixed
+              label="序号"
+              width="60"
+            >
+              <template #default="scope">
+                {{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'name')?.show"
+              key="name"
+              label="角色名称"
+              prop="name"
+              min-width="100"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'code')?.show"
+              key="code"
+              label="角色编码"
+              prop="code"
+              min-width="100"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'data_scope')?.show"
+              key="data_scope"
+              label="数据权限"
+              prop="data_scope"
+              min-width="200"
+            >
+              <template #default="scope">
+                <el-tag v-if="scope.row.data_scope === 1" type="primary">仅本人数据权限</el-tag>
+                <el-tag v-else-if="scope.row.data_scope === 2" type="info">本部门数据权限</el-tag>
+                <el-tag v-else-if="scope.row.data_scope === 3" type="warning">
+                  本部门及以下数据权限
                 </el-tag>
-                <el-tag v-if="scope.row.depts.length > 3" type="info" style="margin-bottom: 4px">
-                  +{{ scope.row.depts.length - 3 }}
+                <el-tag v-else-if="scope.row.data_scope === 4" type="success">全部数据权限</el-tag>
+                <el-tag v-else type="danger">自定义数据权限</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'depts')?.show"
+              key="depts"
+              label="所属部门"
+              prop="depts"
+              min-width="200"
+            >
+              <template #default="scope">
+                <template v-if="scope.row.depts && scope.row.depts.length > 0">
+                  <el-tag
+                    v-for="dept in scope.row.depts.slice(0, 3)"
+                    :key="dept.id"
+                    type="info"
+                    style="margin-right: 4px; margin-bottom: 4px"
+                  >
+                    {{ dept.name }}
+                  </el-tag>
+                  <el-tag v-if="scope.row.depts.length > 3" type="info" style="margin-bottom: 4px">
+                    +{{ scope.row.depts.length - 3 }}
+                  </el-tag>
+                </template>
+                <span v-else style="color: var(--el-text-color-placeholder)">-</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'order')?.show"
+              key="order"
+              label="排序"
+              prop="order"
+              min-width="80"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'status')?.show"
+              key="status"
+              label="状态"
+              prop="status"
+              min-width="80"
+            >
+              <template #default="scope">
+                <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
+                  {{ scope.row.status === "0" ? "启用" : "停用" }}
                 </el-tag>
               </template>
-              <span v-else style="color: var(--el-text-color-placeholder)">-</span>
-            </template>
-          </el-table-column>
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'order')?.show"
-            key="order"
-            label="排序"
-            prop="order"
-            min-width="80"
-            show-overflow-tooltip
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'status')?.show"
-            key="status"
-            label="状态"
-            prop="status"
-            min-width="80"
-          >
-            <template #default="scope">
-              <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
-                {{ scope.row.status === "0" ? "启用" : "停用" }}
-              </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'description')?.show"
-            key="description"
-            label="描述"
-            prop="description"
-            min-width="100"
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'created_time')?.show"
-            key="created_time"
-            label="创建时间"
-            prop="created_time"
-            min-width="200"
-            sortable
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'updated_time')?.show"
-            key="updated_time"
-            label="更新时间"
-            prop="updated_time"
-            min-width="200"
-            sortable
-          />
-          <el-table-column
-            v-if="tableColumns.find((col) => col.prop === 'operation')?.show"
-            fixed="right"
-            label="操作"
-            align="center"
-            min-width="280"
-          >
-            <template #default="scope">
-              <el-button
-                v-hasPerm="['module_system:role:permission']"
-                type="warning"
-                size="small"
-                link
-                icon="position"
-                :disabled="scope.row.id === 1"
-                @click="
-                  scope.row.id === 1
-                    ? ElMessage.warning('系统默认角色，不可操作')
-                    : handleOpenAssignPermDialog(scope.row.id, scope.row.name)
-                "
-              >
-                分配权限
-              </el-button>
-              <el-button
-                v-hasPerm="['module_system:role:detail']"
-                type="info"
-                size="small"
-                link
-                icon="document"
-                @click="handleOpenDialog('detail', scope.row.id)"
-              >
-                详情
-              </el-button>
-              <el-button
-                v-hasPerm="['module_system:role:update']"
-                type="primary"
-                size="small"
-                link
-                icon="edit"
-                :disabled="scope.row.id === 1"
-                @click="
-                  scope.row.id === 1
-                    ? ElMessage.warning('系统默认角色，不可操作')
-                    : handleOpenDialog('update', scope.row.id)
-                "
-              >
-                编辑
-              </el-button>
-              <el-button
-                v-hasPerm="['module_system:role:delete']"
-                type="danger"
-                size="small"
-                link
-                icon="delete"
-                :disabled="scope.row.id === 1"
-                @click="
-                  scope.row.id === 1
-                    ? ElMessage.warning('系统默认角色，不可操作')
-                    : handleDelete([scope.row.id])
-                "
-              >
-                删除
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-
-      <!-- 分页区域 -->
-      <template #footer>
-        <pagination
-          v-model:total="total"
-          v-model:page="queryFormData.page_no"
-          v-model:limit="queryFormData.page_size"
-          @pagination="loadingData"
-        />
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'description')?.show"
+              key="description"
+              label="描述"
+              prop="description"
+              min-width="100"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'created_time')?.show"
+              key="created_time"
+              label="创建时间"
+              prop="created_time"
+              min-width="200"
+              sortable
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'updated_time')?.show"
+              key="updated_time"
+              label="更新时间"
+              prop="updated_time"
+              min-width="200"
+              sortable
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'operation')?.show"
+              fixed="right"
+              label="操作"
+              align="center"
+              min-width="280"
+            >
+              <template #default="scope">
+                <el-button
+                  v-hasPerm="['module_system:role:permission']"
+                  type="warning"
+                  size="small"
+                  link
+                  icon="position"
+                  :disabled="scope.row.id === 1"
+                  @click="
+                    scope.row.id === 1
+                      ? ElMessage.warning('系统默认角色，不可操作')
+                      : handleOpenAssignPermDialog(scope.row.id, scope.row.name)
+                  "
+                >
+                  分配权限
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_system:role:detail']"
+                  type="info"
+                  size="small"
+                  link
+                  icon="View"
+                  @click="handleOpenDialog('detail', scope.row.id)"
+                >
+                  详情
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_system:role:update']"
+                  type="primary"
+                  size="small"
+                  link
+                  icon="edit"
+                  :disabled="scope.row.id === 1"
+                  @click="
+                    scope.row.id === 1
+                      ? ElMessage.warning('系统默认角色，不可操作')
+                      : handleOpenDialog('update', scope.row.id)
+                  "
+                >
+                  编辑
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_system:role:delete']"
+                  type="danger"
+                  size="small"
+                  link
+                  icon="delete"
+                  :disabled="scope.row.id === 1"
+                  @click="
+                    scope.row.id === 1
+                      ? ElMessage.warning('系统默认角色，不可操作')
+                      : handleRowDelete(scope.row.id)
+                  "
+                >
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
       </template>
-    </el-card>
+    </PageContent>
 
-    <!-- 角色表单弹窗 -->
-    <el-dialog
+    <EnhancedDialog
       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">
@@ -399,8 +275,8 @@
             <span v-else style="color: var(--el-text-color-placeholder)">-</span>
           </el-descriptions-item>
           <el-descriptions-item label="状态" :span="2">
-            <el-tag :type="detailFormData.status ? 'success' : 'danger'">
-              {{ detailFormData.status ? "启用" : "停用" }}
+            <el-tag :type="detailFormData.status === '0' ? 'success' : 'danger'">
+              {{ detailFormData.status === "0" ? "启用" : "停用" }}
             </el-tag>
           </el-descriptions-item>
           <el-descriptions-item label="创建时间" :span="2">
@@ -414,7 +290,6 @@
           </el-descriptions-item>
         </el-descriptions>
       </template>
-      <!-- 新增、编辑表单 -->
       <template v-else>
         <el-form
           ref="dataFormRef"
@@ -463,27 +338,34 @@
 
       <template #footer>
         <div class="dialog-footer">
-          <el-button @click="handleCloseDialog">取 消</el-button>
-          <el-button type="primary" @click="handleSubmit">确 定</el-button>
+          <el-button @click="handleCloseDialog">取消</el-button>
+          <el-button
+            v-if="dialogVisible.type !== 'detail'"
+            type="primary"
+            :loading="submitLoading"
+            @click="handleSubmit"
+          >
+            确定
+          </el-button>
+          <el-button v-else type="primary" @click="handleCloseDialog">确定</el-button>
         </div>
       </template>
-    </el-dialog>
+    </EnhancedDialog>
 
     <PermissonDrawer
       v-if="drawerVisible"
       v-model="drawerVisible"
       :role-name="checkedRole.name"
       :role-id="checkedRole.id"
-      @saved="handleRefresh"
+      @saved="refreshList"
     />
 
-    <!-- 导出弹窗 -->
     <ExportModal
       v-model="exportsDialogVisible"
       :content-config="curdContentConfig"
-      :query-params="queryFormData"
-      :page-data="pageTableData"
-      :selection-data="selectionRows"
+      :query-params="exportQueryParams"
+      :page-data="exportPageData"
+      :selection-data="exportSelectionData"
     />
   </div>
 </template>
@@ -495,29 +377,71 @@ defineOptions({
 });
 
 import { ElMessage, ElMessageBox } from "element-plus";
+import { ref, reactive, computed, unref } from "vue";
+import { fetchAllPages } from "@/utils/fetchAllPages";
 import RoleAPI, { RoleTable, RoleForm, TablePageQuery } from "@/api/module_system/role";
 import { useUserStore } from "@/store";
 import ExportModal from "@/components/CURD/ExportModal.vue";
-import type { IContentConfig } from "@/components/CURD/types";
-import { ArrowUp, ArrowDown } from "@element-plus/icons-vue";
-import { formatToDateTime } from "@/utils/dateUtil";
+import CrudToolbarLeft from "@/components/CURD/CrudToolbarLeft.vue";
+import CrudToolbarRight from "@/components/CURD/CrudToolbarRight.vue";
+import PageSearch from "@/components/CURD/PageSearch.vue";
+import PageContent from "@/components/CURD/PageContent.vue";
+import EnhancedDialog from "@/components/CURD/EnhancedDialog.vue";
+import PermissonDrawer from "./components/PermissonDrawer.vue";
+import { useCrudList } from "@/components/CURD/useCrudList";
+import type { IContentConfig, ISearchConfig } from "@/components/CURD/types";
 
-const queryFormRef = ref();
+const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
 const dataFormRef = ref();
-const selectIds = ref<number[]>([]);
-const loading = ref(false);
-const total = ref(0);
-const isExpand = ref(false);
-const isExpandable = ref(true);
+const submitLoading = ref(false);
 
-// 分页表单
-const pageTableData = ref<RoleTable[]>([]);
+const searchConfig = reactive<ISearchConfig>({
+  permPrefix: "module_system:role",
+  colon: true,
+  isExpandable: true,
+  showNumber: 2,
+  form: { labelWidth: "auto" },
+  formItems: [
+    {
+      prop: "name",
+      label: "角色名称",
+      type: "input",
+      attrs: { placeholder: "请输入角色名称", clearable: true },
+    },
+    {
+      prop: "status",
+      label: "状态",
+      type: "select",
+      options: [
+        { label: "启用", value: "true" },
+        { label: "停用", value: "false" },
+      ],
+      attrs: { placeholder: "请选择状态", clearable: true, style: { width: "167.5px" } },
+    },
+    {
+      prop: "created_time",
+      label: "创建时间",
+      type: "date-picker",
+      initialValue: [],
+      attrs: {
+        type: "datetimerange",
+        valueFormat: "YYYY-MM-DD HH:mm:ss",
+        rangeSeparator: "至",
+        startPlaceholder: "开始日期",
+        endPlaceholder: "结束日期",
+        style: { width: "340px" },
+      },
+    },
+  ],
+});
 
-// 抽屉显隐
-const drawerVisible = ref(false);
-
-// 表格列配置
-const tableColumns = ref([
+const contentCols = reactive<
+  Array<{
+    prop?: string;
+    label?: string;
+    show?: boolean;
+  }>
+>([
   { prop: "selection", label: "选择框", show: true },
   { prop: "index", label: "序号", show: true },
   { prop: "name", label: "角色名称", show: true },
@@ -532,22 +456,98 @@ const tableColumns = ref([
   { prop: "operation", label: "操作", show: true },
 ]);
 
-// 详情表单
-const detailFormData = ref<RoleTable>({} as RoleTable);
-
-// 选中的角色
-const checkedRole = ref<RoleTable>({} as RoleTable);
-
-const queryFormData = reactive<TablePageQuery>({
-  page_no: 1,
-  page_size: 10,
-  name: "",
-  status: undefined,
-  created_time: undefined,
-  updated_time: undefined,
+const contentConfig = reactive<IContentConfig<TablePageQuery>>({
+  permPrefix: "module_system:role",
+  pk: "id",
+  cols: contentCols as IContentConfig["cols"],
+  hideColumnFilter: false,
+  toolbar: [],
+  defaultToolbar: [{ name: "refresh", perm: "query" }, "filter"],
+  pagination: {
+    pageSize: 10,
+    pageSizes: [10, 20, 30, 50],
+  },
+  request: { page_no: "page_no", page_size: "page_size" },
+  indexAction: async (params) => {
+    const res = await RoleAPI.listRole(params as TablePageQuery);
+    return {
+      total: res.data.data.total,
+      list: res.data.data.items,
+    };
+  },
+  deleteAction: async (ids) => {
+    await RoleAPI.deleteRole(
+      ids
+        .split(",")
+        .map((s) => Number(s.trim()))
+        .filter((n) => !Number.isNaN(n))
+    );
+    const userStore = useUserStore();
+    await userStore.getUserInfo();
+  },
+  deleteConfirm: {
+    title: "警告",
+    message: "确认删除该项数据?",
+    type: "warning",
+  },
 });
 
-// 新增、编辑表单
+function handleRowDelete(id: number) {
+  contentRef.value?.handleDelete(id);
+}
+
+const drawerVisible = ref(false);
+const checkedRole = ref({ id: 0, name: "" });
+
+const exportsDialogVisible = ref(false);
+
+const exportQueryParams = computed(() => searchRef.value?.getQueryParams() ?? {});
+
+const exportPageData = computed(() => (unref(contentRef.value?.pageData) ?? []) as RoleTable[]);
+
+const exportSelectionData = computed(
+  () => (contentRef.value?.getSelectionData() ?? []) as RoleTable[]
+);
+
+const exportColumns = [
+  { prop: "name", label: "角色名称" },
+  { prop: "code", label: "角色编码" },
+  { prop: "data_scope", label: "数据权限" },
+  { prop: "depts", label: "所属部门" },
+  { prop: "order", label: "排序" },
+  { prop: "status", label: "状态" },
+  { prop: "description", label: "描述" },
+  { prop: "created_time", label: "创建时间" },
+  { prop: "updated_time", label: "更新时间" },
+];
+
+const curdContentConfig = {
+  permPrefix: "module_system:role",
+  cols: exportColumns as unknown as IContentConfig["cols"],
+  exportsAction: async (params: Record<string, unknown>) => {
+    const query: Record<string, unknown> = { ...params };
+    if (typeof query.status === "string") {
+      query.status = query.status === "true";
+    }
+    return fetchAllPages<RoleTable>({
+      initialQuery: query,
+      fetchPage: async (q) => {
+        const res = await RoleAPI.listRole(q as unknown as TablePageQuery);
+        return {
+          total: res.data?.data?.total ?? 0,
+          list: res.data?.data?.items ?? [],
+        };
+      },
+    });
+  },
+} as unknown as IContentConfig;
+
+function handleOpenExportsModal() {
+  exportsDialogVisible.value = true;
+}
+
+const detailFormData = ref<RoleTable>({} as RoleTable);
+
 const formData = reactive<RoleForm>({
   id: undefined,
   name: undefined,
@@ -557,62 +557,18 @@ const formData = reactive<RoleForm>({
   description: undefined,
 });
 
-// 弹窗状态
 const dialogVisible = reactive({
   title: "",
   visible: false,
   type: "create" as "create" | "update" | "detail",
 });
 
-// 表单验证规则
 const rules = reactive({
   name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
   order: [{ required: true, message: "请输入角色排序", trigger: "blur" }],
   status: [{ required: true, message: "请选择状态", trigger: "blur" }],
 });
 
-// 加载表格数据
-async function loadingData() {
-  loading.value = true;
-  try {
-    const response = await RoleAPI.listRole(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 handleRefresh() {
-  await loadingData();
-}
-
-// 查询（重置页码后获取数据）
-async function handleQuery() {
-  queryFormData.page_no = 1;
-  loadingData();
-}
-
-// 行复选框选中项变化
-async function handleSelectionChange(selection: any) {
-  selectIds.value = selection.map((item: any) => item.id);
-  selectionRows.value = selection;
-}
-
-// 重置查询
-async function handleResetQuery() {
-  queryFormRef.value.resetFields();
-  queryFormData.page_no = 1;
-  // 额外清空日期范围与时间查询参数
-  dateRange.value = [];
-  queryFormData.created_time = undefined;
-  loadingData();
-}
-
-// 定义初始表单数据常量
 const initialFormData: RoleForm = {
   id: undefined,
   name: undefined,
@@ -622,36 +578,19 @@ const initialFormData: RoleForm = {
   description: undefined,
 };
 
-// 日期范围临时变量
-const dateRange = ref<[Date, Date] | []>([]);
-
-// 处理日期范围变化
-function handleDateRangeChange(range: [Date, Date]) {
-  dateRange.value = range;
-  if (range && range.length === 2) {
-    queryFormData.created_time = [formatToDateTime(range[0]), formatToDateTime(range[1])];
-  } else {
-    queryFormData.created_time = undefined;
-  }
-}
-
-// 重置表单
 async function resetForm() {
   if (dataFormRef.value) {
     dataFormRef.value.resetFields();
     dataFormRef.value.clearValidate();
   }
-  // 完全重置 formData 为初始状态
   Object.assign(formData, initialFormData);
 }
 
-// 关闭弹窗
 async function handleCloseDialog() {
   dialogVisible.visible = false;
-  resetForm();
+  await resetForm();
 }
 
-// 打开系统配置弹窗
 async function handleOpenDialog(type: "create" | "update" | "detail", id?: number) {
   dialogVisible.type = type;
   if (id) {
@@ -670,13 +609,10 @@ async function handleOpenDialog(type: "create" | "update" | "detail", id?: numbe
   dialogVisible.visible = true;
 }
 
-// 新增、编辑弹窗处理
 async function handleSubmit() {
-  // 表单校验
-  dataFormRef.value.validate(async (valid: any) => {
+  dataFormRef.value.validate(async (valid: boolean) => {
     if (valid) {
-      loading.value = true;
-      // 根据弹窗传入的参数(deatil\create\update)判断走什么逻辑
+      submitLoading.value = true;
       const id = formData.id;
       try {
         if (id) {
@@ -685,39 +621,39 @@ async function handleSubmit() {
           await RoleAPI.createRole(formData);
         }
         dialogVisible.visible = false;
-        resetForm();
-        handleResetQuery();
-        // 更新全局用户状态，刷新权限信息
+        await resetForm();
+        refreshList();
         const userStore = useUserStore();
         await userStore.getUserInfo();
-      } catch (error: any) {
+      } catch (error: unknown) {
         console.error(error);
       } finally {
-        loading.value = false;
+        submitLoading.value = false;
       }
     }
   });
 }
 
-// 删除、批量删除
-async function handleDelete(ids: number[]) {
-  ElMessageBox.confirm("确认删除该项数据?", "警告", {
+async function handleMoreClick(status: string) {
+  const rows = contentRef.value?.getSelectionData() as RoleTable[] | undefined;
+  const ids = (rows ?? []).map((r) => r.id).filter((id): id is number => id != null);
+  if (!ids.length) {
+    ElMessage.warning("请先选择要操作的数据");
+    return;
+  }
+  ElMessageBox.confirm(`确认${status === "0" ? "启用" : "停用"}该项数据?`, "警告", {
     confirmButtonText: "确定",
     cancelButtonText: "取消",
     type: "warning",
   })
     .then(async () => {
       try {
-        loading.value = true;
-        await RoleAPI.deleteRole(ids);
-        handleResetQuery();
-        // 更新全局用户状态，刷新权限信息
+        await RoleAPI.batchRole({ ids, status });
+        refreshList();
         const userStore = useUserStore();
         await userStore.getUserInfo();
-      } catch (error: any) {
+      } catch (error: unknown) {
         console.error(error);
-      } finally {
-        loading.value = false;
       }
     })
     .catch(() => {
@@ -725,88 +661,8 @@ async function handleDelete(ids: number[]) {
     });
 }
 
-// 导出已改为通过导出弹窗 ExportModal 统一处理
-function handleOpenExportsModal() {
-  exportsDialogVisible.value = true;
+function handleOpenAssignPermDialog(roleId: number, roleName: string) {
+  checkedRole.value = { id: roleId, name: roleName };
+  drawerVisible.value = true;
 }
-
-// 批量启用/停用
-async function handleMoreClick(status: string) {
-  if (selectIds.value.length) {
-    ElMessageBox.confirm(`确认${status === "0" ? "启用" : "停用"}该项数据?`, "警告", {
-      confirmButtonText: "确定",
-      cancelButtonText: "取消",
-      type: "warning",
-    })
-      .then(async () => {
-        try {
-          loading.value = true;
-          await RoleAPI.batchRole({ ids: selectIds.value, status });
-          handleResetQuery();
-        } catch (error: any) {
-          console.error(error);
-        } finally {
-          loading.value = false;
-        }
-      })
-      .catch(() => {
-        ElMessageBox.close();
-      });
-  }
-}
-
-// 打开分配菜单权限弹窗
-async function handleOpenAssignPermDialog(roleId: number, roleName: string) {
-  if (roleId) {
-    drawerVisible.value = true;
-    checkedRole.value.id = roleId;
-    checkedRole.value.name = roleName;
-  }
-}
-
-// 导出弹窗显示状态
-const exportsDialogVisible = ref(false);
-const selectionRows = ref<RoleTable[]>([]);
-// 导出字段
-const exportColumns = [
-  { prop: "name", label: "角色名称" },
-  { prop: "code", label: "角色编码" },
-  { prop: "data_scope", label: "数据权限" },
-  { prop: "depts", label: "所属部门" },
-  { prop: "order", label: "排序" },
-  { prop: "status", label: "状态" },
-  { prop: "description", label: "描述" },
-  { prop: "created_time", label: "创建时间" },
-  { prop: "updated_time", label: "更新时间" },
-];
-
-// 导入/导出配置
-const curdContentConfig = {
-  permPrefix: "module_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.listRole(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>
diff --git a/frontend/src/views/module_system/user/index.vue b/frontend/src/views/module_system/user/index.vue
index 75867363..10f515fd 100644
--- a/frontend/src/views/module_system/user/index.vue
+++ b/frontend/src/views/module_system/user/index.vue
@@ -2,141 +2,33 @@
 <template>
   <div class="app-container">
     <el-row class="page-row" :gutter="12" justify="start">
-      <!-- 部门树 -->
       <el-col :span="4" class="dept-col">
-        <DeptTree v-model="queryFormData.dept_id" class="w-full h-full" @node-click="handleQuery" />
+        <DeptTree v-model="deptFilterId" class="w-full h-full" @node-click="handleDeptNodeClick" />
       </el-col>
 
-      <!-- 用户列表 -->
       <el-col :span="20" class="right-col">
-        <!-- 搜索区域 -->
-        <el-card class="search-container">
-          <el-form
-            ref="queryFormRef"
-            :model="queryFormData"
-            :inline="true"
-            label-suffix=":"
-            @submit.prevent="handleQuery"
-          >
-            <el-form-item prop="username" label="账号">
-              <el-input v-model="queryFormData.username" placeholder="请输入账号" clearable />
-            </el-form-item>
-            <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="0" label="启用" />
-                <el-option value="1" label="停用" />
-              </el-select>
-            </el-form-item>
-            <el-form-item v-if="isExpand" prop="created_id" label="创建人">
-              <UserTableSelect
-                v-model="queryFormData.created_id"
-                @confirm-click="handleConfirm"
-                @clear-click="handleQuery"
-              />
-            </el-form-item>
-            <!-- 查询、重置、展开/收起按钮 -->
-            <el-form-item class="search-buttons">
-              <el-button
-                v-hasPerm="['module_system:user:query']"
-                type="primary"
-                icon="search"
-                native-type="submit"
-              >
-                查询
-              </el-button>
-              <el-button
-                v-hasPerm="['module_system:user: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>
-        </el-card>
-
-        <div></div>
-        <el-card class="data-table">
-          <!-- 功能区域 -->
-          <div class="data-table__toolbar">
-            <div class="data-table__toolbar--left">
-              <el-row :gutter="10">
-                <el-col :span="1.5">
-                  <el-button
-                    v-hasPerm="['module_system:user:create']"
-                    type="success"
-                    icon="plus"
-                    @click="handleOpenDialog('create')"
-                  >
-                    新增
-                  </el-button>
-                </el-col>
-                <el-col :span="1.5">
-                  <el-button
-                    v-hasPerm="['module_system:user:delete']"
-                    type="danger"
-                    icon="delete"
-                    :disabled="selectIds.length === 0"
-                    :loading="submitLoading"
-                    @click="handleDelete(selectIds)"
-                  >
-                    批量删除
-                  </el-button>
-                </el-col>
-                <el-col :span="1.5">
-                  <el-dropdown v-hasPerm="['module_system:user:patch']" trigger="click">
-                    <el-button
-                      type="default"
-                      :disabled="selectIds.length === 0 || submitLoading"
-                      icon="ArrowDown"
-                    >
-                      更多
-                    </el-button>
-                    <template #dropdown>
-                      <el-dropdown-menu>
-                        <el-dropdown-item icon="Check" @click="handleMoreClick('0')">
-                          批量启用
-                        </el-dropdown-item>
-                        <el-dropdown-item icon="CircleClose" @click="handleMoreClick('1')">
-                          批量停用
-                        </el-dropdown-item>
-                      </el-dropdown-menu>
-                    </template>
-                  </el-dropdown>
-                </el-col>
-              </el-row>
-            </div>
+        <PageSearch
+          ref="searchRef"
+          :search-config="searchConfig"
+          @query-click="handleQueryClick"
+          @reset-click="handleResetClick"
+        />
 
+        <PageContent ref="contentRef" class="flex-1 min-h-0" :content-config="contentConfig">
+          <template #toolbar="{ toolbarRight, onToolbar, removeIds, cols }">
+            <CrudToolbarLeft
+              :remove-ids="removeIds"
+              :perm-create="['module_system:user:create']"
+              :perm-delete="['module_system:user:delete']"
+              :perm-patch="['module_system:user:patch']"
+              :delete-loading="submitLoading"
+              @add="handleOpenDialog('create')"
+              @delete="onToolbar('delete')"
+              @more="handleMoreClick"
+            />
             <div class="data-table__toolbar--right">
-              <el-row :gutter="10">
-                <el-col :span="1.5">
+              <CrudToolbarRight :buttons="toolbarRight" :cols="cols" :on-toolbar="onToolbar">
+                <template #prepend>
                   <el-tooltip content="导入">
                     <el-button
                       v-hasPerm="['module_system:user:import']"
@@ -146,8 +38,6 @@
                       @click="handleOpenImportDialog"
                     />
                   </el-tooltip>
-                </el-col>
-                <el-col :span="1.5">
                   <el-tooltip content="导出">
                     <el-button
                       v-hasPerm="['module_system:user:export']"
@@ -157,148 +47,126 @@
                       @click="handleOpenExportsModal"
                     />
                   </el-tooltip>
-                </el-col>
-                <el-col :span="1.5">
-                  <el-tooltip content="刷新">
-                    <el-button
-                      v-hasPerm="['module_system:user:query']"
-                      type="success"
-                      icon="refresh"
-                      circle
-                      @click="handleRefresh"
-                    />
-                  </el-tooltip>
-                </el-col>
-              </el-row>
+                </template>
+              </CrudToolbarRight>
             </div>
-          </div>
-
-          <!-- 表格区域 -->
-          <div class="data-table__content">
-            <el-table
-              ref="dataTableRef"
-              v-loading="loading"
-              :data="pageTableData"
-              height="100%"
-              max-height="100%"
-              border
-              stripe
-              @selection-change="handleSelectionChange"
-            >
-              <template #empty>
-                <el-empty :image-size="80" description="暂无数据" />
-              </template>
-              <el-table-column type="selection" min-width="55" align="center" />
-              <el-table-column type="index" 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 label="头像" prop="avatar" min-width="80" align="center">
-                <template #default="scope">
-                  <template v-if="scope.row.avatar">
-                    <el-avatar size="small" :src="scope.row.avatar" />
-                  </template>
-                  <template v-else>
-                    <el-avatar size="small" icon="UserFilled" />
-                  </template>
-                </template>
-              </el-table-column>
-              <el-table-column label="账号" prop="username" min-width="100" />
-              <el-table-column label="用户名" prop="name" min-width="100" />
-              <el-table-column label="状态" prop="status" min-width="100">
-                <template #default="scope">
-                  <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
-                    {{ scope.row.status === "0" ? "启用" : "停用" }}
-                  </el-tag>
-                </template>
-              </el-table-column>
-              <el-table-column label="部门" prop="dept" min-width="100">
-                <template #default="scope">
-                  {{ scope.row.dept ? scope.row.dept.name : "" }}
-                </template>
-              </el-table-column>
-              <el-table-column label="性别" prop="gender" min-width="100">
-                <template #default="scope">
-                  <el-tag v-if="scope.row.gender === '0'" type="success">男</el-tag>
-                  <el-tag v-else-if="scope.row.gender === '1'" type="warning">女</el-tag>
-                  <el-tag v-else type="info">未知</el-tag>
-                </template>
-              </el-table-column>
-              <el-table-column label="创建时间" prop="created_time" min-width="160" />
-              <el-table-column label="更新时间" prop="updated_time" min-width="160" />
-              <el-table-column label="操作" fixed="right" align="center" min-width="280">
-                <template #default="scope">
-                  <el-button
-                    v-hasPerm="['module_system:user:update']"
-                    type="warning"
-                    icon="RefreshLeft"
-                    size="small"
-                    link
-                    :disabled="scope.row.is_superuser === true"
-                    @click="hancleResetPassword(scope.row)"
-                  >
-                    重置密码
-                  </el-button>
-                  <el-button
-                    v-hasPerm="['module_system:user:detail']"
-                    type="info"
-                    size="small"
-                    link
-                    icon="document"
-                    @click="handleOpenDialog('detail', scope.row.id)"
-                  >
-                    详情
-                  </el-button>
-                  <el-button
-                    v-hasPerm="['module_system:user:update']"
-                    type="primary"
-                    size="small"
-                    link
-                    icon="edit"
-                    :disabled="scope.row.is_superuser === true"
-                    @click="handleOpenDialog('update', scope.row.id)"
-                  >
-                    编辑
-                  </el-button>
-                  <el-button
-                    v-hasPerm="['module_system:user:delete']"
-                    type="danger"
-                    size="small"
-                    link
-                    icon="delete"
-                    :disabled="scope.row.is_superuser === true"
-                    @click="handleDelete([scope.row.id])"
-                  >
-                    删除
-                  </el-button>
-                </template>
-              </el-table-column>
-            </el-table>
-          </div>
-
-          <!-- 分页区域 -->
-          <template #footer>
-            <pagination
-              v-model:total="total"
-              v-model:page="queryFormData.page_no"
-              v-model:limit="queryFormData.page_size"
-              @pagination="loadingData"
-            />
           </template>
-        </el-card>
+
+          <template #table="{ data, loading, tableRef, onSelectionChange, pagination }">
+            <div class="data-table__content">
+              <el-table
+                :ref="tableRef as any"
+                v-loading="loading"
+                row-key="id"
+                :data="data"
+                height="100%"
+                border
+                stripe
+                @selection-change="onSelectionChange"
+              >
+                <template #empty>
+                  <el-empty :image-size="80" description="暂无数据" />
+                </template>
+                <el-table-column type="selection" min-width="55" align="center" />
+                <el-table-column fixed label="序号" min-width="60">
+                  <template #default="scope">
+                    {{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}
+                  </template>
+                </el-table-column>
+                <el-table-column label="头像" prop="avatar" min-width="80" align="center">
+                  <template #default="scope">
+                    <template v-if="scope.row.avatar">
+                      <el-avatar size="small" :src="scope.row.avatar" />
+                    </template>
+                    <template v-else>
+                      <el-avatar size="small" icon="UserFilled" />
+                    </template>
+                  </template>
+                </el-table-column>
+                <el-table-column label="账号" prop="username" min-width="100" />
+                <el-table-column label="用户名" prop="name" min-width="100" />
+                <el-table-column label="状态" prop="status" min-width="100">
+                  <template #default="scope">
+                    <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
+                      {{ scope.row.status === "0" ? "启用" : "停用" }}
+                    </el-tag>
+                  </template>
+                </el-table-column>
+                <el-table-column label="部门" prop="dept" min-width="100">
+                  <template #default="scope">
+                    {{ scope.row.dept ? scope.row.dept.name : "" }}
+                  </template>
+                </el-table-column>
+                <el-table-column label="性别" prop="gender" min-width="100">
+                  <template #default="scope">
+                    <el-tag v-if="scope.row.gender === '0'" type="success">男</el-tag>
+                    <el-tag v-else-if="scope.row.gender === '1'" type="warning">女</el-tag>
+                    <el-tag v-else type="info">未知</el-tag>
+                  </template>
+                </el-table-column>
+                <el-table-column label="创建时间" prop="created_time" min-width="160" />
+                <el-table-column label="更新时间" prop="updated_time" min-width="160" />
+                <el-table-column label="操作" fixed="right" align="center" min-width="280">
+                  <template #default="scope">
+                    <el-button
+                      v-hasPerm="['module_system:user:update']"
+                      type="warning"
+                      icon="RefreshLeft"
+                      size="small"
+                      link
+                      :disabled="scope.row.is_superuser === true"
+                      @click="hancleResetPassword(scope.row)"
+                    >
+                      重置密码
+                    </el-button>
+                    <el-button
+                      v-hasPerm="['module_system:user:detail']"
+                      type="info"
+                      size="small"
+                      link
+                      icon="View"
+                      @click="handleOpenDialog('detail', scope.row.id)"
+                    >
+                      详情
+                    </el-button>
+                    <el-button
+                      v-hasPerm="['module_system:user:update']"
+                      type="primary"
+                      size="small"
+                      link
+                      icon="edit"
+                      :disabled="scope.row.is_superuser === true"
+                      @click="handleOpenDialog('update', scope.row.id)"
+                    >
+                      编辑
+                    </el-button>
+                    <el-button
+                      v-hasPerm="['module_system:user:delete']"
+                      type="danger"
+                      size="small"
+                      link
+                      icon="delete"
+                      :disabled="scope.row.is_superuser === true"
+                      @click="handleRowDelete(scope.row.id)"
+                    >
+                      删除
+                    </el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+          </template>
+        </PageContent>
       </el-col>
     </el-row>
 
-    <!-- 弹窗区域 -->
-    <el-drawer
+    <EnhancedDrawer
       v-model="dialogVisible.visible"
       :title="dialogVisible.title"
       append-to-body
       :size="drawerSize"
       @close="handleCloseDialog"
     >
-      <!-- 详情 -->
       <template v-if="dialogVisible.type === 'detail'">
         <el-descriptions :column="2" border>
           <el-descriptions-item label="编号" :span="2">
@@ -350,8 +218,8 @@
             </el-tag>
           </el-descriptions-item>
           <el-descriptions-item label="状态" :span="2">
-            <el-tag :type="detailFormData.status ? 'success' : 'danger'">
-              {{ detailFormData.status ? "启用" : "停用" }}
+            <el-tag :type="detailFormData.status === '0' ? 'success' : 'danger'">
+              {{ detailFormData.status === "0" ? "启用" : "停用" }}
             </el-tag>
           </el-descriptions-item>
           <el-descriptions-item label="上次登录时间" :span="2">
@@ -374,7 +242,6 @@
           </el-descriptions-item>
         </el-descriptions>
       </template>
-      <!-- 新增、编辑表单 -->
       <template v-else>
         <el-form
           ref="dataFormRef"
@@ -484,6 +351,7 @@
 
       <template #footer>
         <div class="dialog-footer">
+          <el-button @click="handleCloseDialog">取消</el-button>
           <el-button
             v-if="dialogVisible.type === 'create' || dialogVisible.type === 'update'"
             type="primary"
@@ -493,12 +361,10 @@
             确定
           </el-button>
           <el-button v-else type="primary" @click="handleCloseDialog">确定</el-button>
-          <el-button @click="handleCloseDialog">取消</el-button>
         </div>
       </template>
-    </el-drawer>
+    </EnhancedDrawer>
 
-    <!-- 导入弹窗 -->
     <ImportModal
       v-model="importDialogVisible"
       :content-config="curdContentConfig"
@@ -506,13 +372,12 @@
       @upload="handleUpload"
     />
 
-    <!-- 导出弹窗 -->
     <ExportModal
       v-model="exportsDialogVisible"
       :content-config="curdContentConfig"
-      :query-params="queryFormData"
-      :page-data="pageTableData"
-      :selection-data="selectionRows"
+      :query-params="exportQueryParams"
+      :page-data="exportPageData"
+      :selection-data="exportSelectionData"
     />
   </div>
 </template>
@@ -542,52 +407,180 @@ 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 { ArrowUp, ArrowDown } from "@element-plus/icons-vue";
+import CrudToolbarLeft from "@/components/CURD/CrudToolbarLeft.vue";
+import CrudToolbarRight from "@/components/CURD/CrudToolbarRight.vue";
+import PageSearch from "@/components/CURD/PageSearch.vue";
+import PageContent from "@/components/CURD/PageContent.vue";
+import EnhancedDrawer from "@/components/CURD/EnhancedDrawer.vue";
+import type { IContentConfig, ISearchConfig } from "@/components/CURD/types";
+import { ref, reactive, computed, markRaw, nextTick, unref } from "vue";
+import { fetchAllPages } from "@/utils/fetchAllPages";
 
 const appStore = useAppStore();
 
-const queryFormRef = ref();
+const searchRef = ref<InstanceType<typeof PageSearch>>();
+const contentRef = ref<InstanceType<typeof PageContent>>();
 const dataFormRef = ref();
-const total = ref(0);
-const loading = ref(false);
 const submitLoading = ref(false);
 const uploadLoading = ref(false);
-const isExpand = ref(false);
-const isExpandable = ref(true);
+const deptFilterId = ref<number | undefined>(undefined);
+
 const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "450px" : "90%"));
-const selectionRows = ref<UserInfo[]>([]);
-// 选中的用户ID
-const selectIds = ref<number[]>([]);
-// 部门下拉数据源
 const deptOptions = ref<OptionType[]>();
-// 角色下拉数据源
 const roleOptions = ref<Array<{ value: number; label: string; disabled?: boolean }>>();
-// 岗位下拉数据源
 const positionOptions = ref<Array<{ value: number; label: string; disabled?: boolean }>>();
-// 导入弹窗显示状态
 const importDialogVisible = ref(false);
-// 导出弹窗显示状态
 const exportsDialogVisible = ref(false);
-// 分页表单
-const pageTableData = ref<UserInfo[]>([]);
-// 详情表单
 const detailFormData = ref<UserInfo>({});
 
-// 分页查询参数
-const queryFormData = reactive<UserPageQuery>({
-  page_no: 1,
-  page_size: 10,
-  username: undefined,
-  name: undefined,
-  status: undefined,
-  dept_id: undefined,
-  created_time: undefined,
-  created_id: undefined,
-  updated_id: undefined,
+function triggerUserSearch() {
+  nextTick(() => {
+    contentRef.value?.fetchPageData(getMergedListParams(), true);
+  });
+}
+
+const searchConfig = reactive<ISearchConfig>({
+  permPrefix: "module_system:user",
+  colon: true,
+  isExpandable: true,
+  showNumber: 3,
+  form: { labelWidth: "auto" },
+  formItems: [
+    {
+      prop: "username",
+      label: "账号",
+      type: "input",
+      attrs: { placeholder: "请输入账号", clearable: true },
+    },
+    {
+      prop: "name",
+      label: "用户名",
+      type: "input",
+      attrs: { placeholder: "请输入用户名", clearable: true },
+    },
+    {
+      prop: "status",
+      label: "状态",
+      type: "select",
+      options: [
+        { label: "启用", value: "0" },
+        { label: "停用", value: "1" },
+      ],
+      attrs: { placeholder: "请选择状态", clearable: true, style: { width: "167.5px" } },
+    },
+    {
+      prop: "created_id",
+      label: "创建人",
+      type: "user-table-select",
+      initialValue: null,
+      events: {
+        "confirm-click": triggerUserSearch,
+        "clear-click": triggerUserSearch,
+      },
+    },
+  ],
+  customComponents: {
+    "user-table-select": markRaw(UserTableSelect),
+  },
 });
 
-// 表单
+const contentCols = reactive<
+  Array<{
+    prop?: string;
+    label?: string;
+    show?: boolean;
+  }>
+>([
+  { prop: "selection", label: "选择框", show: true },
+  { prop: "index", label: "序号", show: true },
+  { prop: "avatar", label: "头像", show: true },
+  { prop: "username", label: "账号", show: true },
+  { prop: "name", label: "用户名", show: true },
+  { prop: "status", label: "状态", show: true },
+  { prop: "dept", label: "部门", show: true },
+  { prop: "gender", label: "性别", show: true },
+  { prop: "created_time", label: "创建时间", show: true },
+  { prop: "updated_time", label: "更新时间", show: true },
+  { prop: "operation", label: "操作", show: true },
+]);
+
+const contentConfig = reactive<IContentConfig<UserPageQuery>>({
+  permPrefix: "module_system:user",
+  pk: "id",
+  cols: contentCols as IContentConfig["cols"],
+  hideColumnFilter: true,
+  initialFetch: false,
+  toolbar: [],
+  defaultToolbar: [{ name: "refresh", perm: "query" }],
+  pagination: {
+    pageSize: 10,
+    pageSizes: [10, 20, 30, 50],
+  },
+  request: { page_no: "page_no", page_size: "page_size" },
+  indexAction: async (params) => {
+    const res = await UserAPI.listUser(params as UserPageQuery);
+    return {
+      total: res.data.data.total,
+      list: res.data.data.items,
+    };
+  },
+  deleteAction: async (ids) => {
+    await UserAPI.deleteUser(
+      ids
+        .split(",")
+        .map((s) => Number(s.trim()))
+        .filter((n) => !Number.isNaN(n))
+    );
+    const userStore = useUserStore();
+    const idSet = ids.split(",").map((s) => Number(s.trim()));
+    if (userStore.basicInfo.id && idSet.includes(userStore.basicInfo.id)) {
+      userStore.clearUserInfo();
+    }
+  },
+  deleteConfirm: {
+    title: "警告",
+    message: "确认删除该项数据?",
+    type: "warning",
+  },
+});
+
+function getMergedListParams(): UserPageQuery {
+  const base = searchRef.value?.getQueryParams() ?? {};
+  return {
+    ...base,
+    dept_id: deptFilterId.value,
+  } as UserPageQuery;
+}
+
+function handleQueryClick() {
+  contentRef.value?.fetchPageData(getMergedListParams(), true);
+}
+
+function handleResetClick() {
+  deptFilterId.value = undefined;
+  contentRef.value?.fetchPageData(getMergedListParams(), true);
+}
+
+function handleDeptNodeClick() {
+  contentRef.value?.fetchPageData(getMergedListParams(), true);
+}
+
+function refreshList() {
+  contentRef.value?.fetchPageData(getMergedListParams(), true);
+}
+
+function handleRowDelete(id: number) {
+  contentRef.value?.handleDelete(id);
+}
+
+const exportQueryParams = computed(() => getMergedListParams());
+
+const exportPageData = computed(() => (unref(contentRef.value?.pageData) ?? []) as UserInfo[]);
+
+const exportSelectionData = computed(
+  () => (contentRef.value?.getSelectionData() ?? []) as UserInfo[]
+);
+
 const formData = reactive<UserForm>({
   id: undefined,
   username: undefined,
@@ -602,19 +595,17 @@ const formData = reactive<UserForm>({
   gender: undefined,
   email: undefined,
   mobile: undefined,
-  is_superuser: false, //默认不是超管
+  is_superuser: false,
   status: "0",
   description: undefined,
 });
 
-// 弹窗状态
 const dialogVisible = reactive({
   title: "",
   visible: false,
   type: "create" as "create" | "update" | "detail",
 });
 
-// 表单验证规则
 const rules = reactive({
   username: [{ required: true, message: "请输入账号", trigger: "blur" }],
   name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
@@ -638,10 +629,6 @@ const rules = reactive({
   status: [{ required: true, message: "请选择状态", trigger: "blur" }],
 });
 
-// 日期范围临时变量
-const dateRange = ref<[Date, Date] | []>([]);
-
-// 仅用于导出字段的列（排除非数据列及嵌套对象列）
 const exportColumns = [
   { prop: "username", label: "账号" },
   { prop: "name", label: "名称" },
@@ -655,114 +642,29 @@ const exportColumns = [
   { prop: "updated_time", label: "更新时间" },
 ];
 
-// 导入/导出配置
 const curdContentConfig = {
   permPrefix: "module_system:user",
-  cols: exportColumns as any,
+  cols: exportColumns as unknown as IContentConfig["cols"],
   importTemplate: () => UserAPI.downloadTemplateUser(),
-  exportsAction: async (params: any) => {
-    const query: any = { ...params };
+  exportsAction: async (params: Record<string, unknown>) => {
+    const query: Record<string, unknown> = { ...params };
     if (typeof query.status === "string") {
       query.status = query.status === "true";
     }
-    query.page_no = 1;
-    query.page_size = 9999;
-    const all: any[] = [];
-    while (true) {
-      const res = await UserAPI.listUser(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;
+    return fetchAllPages<UserInfo>({
+      pageSize: 9999,
+      initialQuery: query,
+      fetchPage: async (q) => {
+        const res = await UserAPI.listUser(q as unknown as UserPageQuery);
+        return {
+          total: res.data?.data?.total ?? 0,
+          list: res.data?.data?.items ?? [],
+        };
+      },
+    });
   },
 } as unknown as IContentConfig;
 
-// 选择创建人后触发查询
-function handleConfirm() {
-  handleQuery();
-}
-
-// 列表刷新
-async function handleRefresh() {
-  await loadingData();
-}
-
-// 加载表格数据
-async function loadingData() {
-  loading.value = true;
-  try {
-    const response = await UserAPI.listUser(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();
-}
-
-// 重置查询
-async function handleResetQuery() {
-  // 重置表单字段
-  queryFormRef.value.resetFields();
-  // 额外清空不在 model 内的扩展查询项（如日期范围）
-  dateRange.value = [];
-  queryFormData.created_time = undefined;
-  // 清空部门并重置页码
-  queryFormData.dept_id = undefined;
-  // 清空创建人
-  queryFormData.created_id = undefined;
-  queryFormData.page_no = 1;
-  // 重新加载数据
-  loadingData();
-}
-
-// 定义初始表单数据常量
-const initialFormData: UserForm = {
-  id: undefined,
-  username: undefined,
-  name: undefined,
-  dept_id: undefined,
-  dept_name: undefined,
-  role_ids: undefined,
-  role_names: undefined,
-  position_ids: undefined,
-  position_names: undefined,
-  password: undefined,
-  gender: undefined,
-  email: undefined,
-  mobile: undefined,
-  is_superuser: false, //默认不是超管
-  status: "0",
-  description: undefined,
-};
-
-// 重置表单
-async function resetForm() {
-  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);
-  selectionRows.value = selection;
-}
-
-// 重置密码
 function hancleResetPassword(row: UserInfo) {
   ElMessageBox.prompt("请输入用户【" + row.username + "】的新密码", "重置密码", {
     confirmButtonText: "确定",
@@ -781,13 +683,38 @@ function hancleResetPassword(row: UserInfo) {
   );
 }
 
-// 关闭弹窗
-async function handleCloseDialog() {
-  dialogVisible.visible = false;
-  resetForm();
+async function resetForm() {
+  if (dataFormRef.value) {
+    dataFormRef.value.resetFields();
+    dataFormRef.value.clearValidate();
+  }
+  Object.assign(formData, initialFormData);
 }
 
-// 打开弹窗
+async function handleCloseDialog() {
+  dialogVisible.visible = false;
+  await resetForm();
+}
+
+const initialFormData: UserForm = {
+  id: undefined,
+  username: undefined,
+  name: undefined,
+  dept_id: undefined,
+  dept_name: undefined,
+  role_ids: undefined,
+  role_names: undefined,
+  position_ids: undefined,
+  position_names: undefined,
+  password: undefined,
+  gender: undefined,
+  email: undefined,
+  mobile: undefined,
+  is_superuser: false,
+  status: "0",
+  description: undefined,
+};
+
 async function handleOpenDialog(type: "create" | "update" | "detail", id?: number) {
   dialogVisible.type = type;
   if (id) {
@@ -798,7 +725,6 @@ async function handleOpenDialog(type: "create" | "update" | "detail", id?: numbe
     } else if (type === "update") {
       dialogVisible.title = "修改用户";
       Object.assign(formData, response.data.data);
-      // 确保角色和岗位ID正确设置
       formData.role_ids = (response.data.data.roles || []).map((item) => item.id as number);
       formData.position_ids = (response.data.data.positions || []).map((item) => item.id as number);
     }
@@ -812,12 +738,9 @@ async function handleOpenDialog(type: "create" | "update" | "detail", id?: numbe
     dataFormRef.value.clearValidate();
   }
 
-  // 获取部门树
-  const deptResponse = await DeptAPI.listDept(queryFormData);
-  const treeData = deptResponse.data.data;
-  deptOptions.value = formatTree(treeData);
+  const deptResponse = await DeptAPI.listDept({});
+  deptOptions.value = formatTree(deptResponse.data.data);
 
-  // 获取角色列表
   const roleResponse = await RoleAPI.listRole();
   roleOptions.value = roleResponse.data.data.items
     .filter((item) => item.id !== undefined && item.name !== undefined)
@@ -828,7 +751,6 @@ async function handleOpenDialog(type: "create" | "update" | "detail", id?: numbe
     }))
     .filter((opt) => !opt.disabled);
 
-  // 获取岗位列表
   const positionResponse = await PositionAPI.listPosition();
   positionOptions.value = positionResponse.data.data.items
     .filter((item) => item.id !== undefined && item.name !== undefined)
@@ -840,9 +762,8 @@ async function handleOpenDialog(type: "create" | "update" | "detail", id?: numbe
     .filter((opt) => !opt.disabled);
 }
 
-// 提交表单（防抖）
 async function handleSubmit() {
-  dataFormRef.value.validate(async (valid: any) => {
+  dataFormRef.value.validate(async (valid: boolean) => {
     if (valid) {
       submitLoading.value = true;
       const id = formData.id;
@@ -853,13 +774,13 @@ async function handleSubmit() {
           await UserAPI.createUser(formData);
         }
         dialogVisible.visible = false;
-        resetForm();
-        handleResetQuery();
+        await resetForm();
+        refreshList();
         const userStore = useUserStore();
         if (id === userStore.basicInfo.id) {
           await userStore.getUserInfo();
         }
-      } catch (error: any) {
+      } catch (error: unknown) {
         console.error(error);
       } finally {
         submitLoading.value = false;
@@ -868,11 +789,14 @@ async function handleSubmit() {
   });
 }
 
-// 导出已改为通过导出弹窗 ExportModal 统一处理
-
-// 删除、批量删除
-async function handleDelete(ids: number[]) {
-  ElMessageBox.confirm("确认删除该项数据?", "警告", {
+async function handleMoreClick(status: string) {
+  const rows = contentRef.value?.getSelectionData() as UserInfo[] | undefined;
+  const ids = (rows ?? []).map((r) => r.id).filter((id): id is number => id != null);
+  if (!ids.length) {
+    ElMessage.warning("请先选择要操作的数据");
+    return;
+  }
+  ElMessageBox.confirm("确认启用或停用该项数据?", "警告", {
     confirmButtonText: "确定",
     cancelButtonText: "取消",
     type: "warning",
@@ -880,14 +804,9 @@ async function handleDelete(ids: number[]) {
     .then(async () => {
       try {
         submitLoading.value = true;
-        await UserAPI.deleteUser(ids);
-        handleResetQuery();
-        // 如果删除的是当前用户，则清空用户信息
-        const userStore = useUserStore();
-        if (userStore.basicInfo.id && ids.includes(userStore.basicInfo.id)) {
-          userStore.clearUserInfo();
-        }
-      } catch (error: any) {
+        await UserAPI.batchUser({ ids, status });
+        refreshList();
+      } catch (error: unknown) {
         console.error(error);
       } finally {
         submitLoading.value = false;
@@ -898,55 +817,27 @@ async function handleDelete(ids: number[]) {
     });
 }
 
-// 批量启用/停用
-async function handleMoreClick(status: string) {
-  if (selectIds.value.length) {
-    ElMessageBox.confirm("确认启用或停用该项数据?", "警告", {
-      confirmButtonText: "确定",
-      cancelButtonText: "取消",
-      type: "warning",
-    })
-      .then(async () => {
-        try {
-          submitLoading.value = true;
-          await UserAPI.batchUser({ ids: selectIds.value, status });
-          handleResetQuery();
-        } catch (error: any) {
-          console.error(error);
-        } finally {
-          submitLoading.value = false;
-        }
-      })
-      .catch(() => {
-        ElMessageBox.close();
-      });
-  }
-}
-
-// 打开导入弹窗
 function handleOpenImportDialog() {
   importDialogVisible.value = true;
 }
 
-// 打开导出弹窗
 function handleOpenExportsModal() {
   exportsDialogVisible.value = true;
 }
 
 const emit = defineEmits(["import-success"]);
 
-// 上传文件
-const handleUpload = async (formData: FormData) => {
+const handleUpload = async (formDataUpload: FormData) => {
   try {
     uploadLoading.value = true;
-    const response = await UserAPI.importUser(formData);
+    const response = await UserAPI.importUser(formDataUpload);
     if (response.data.code === ResultEnum.SUCCESS) {
       ElMessage.success(`${response.data.msg}，${response.data.data}`);
       importDialogVisible.value = false;
-      await handleQuery();
+      await refreshList();
       emit("import-success");
     }
-  } catch (error: any) {
+  } catch (error: unknown) {
     console.error(error);
     ElMessage.error("上传失败：" + error);
   } finally {
@@ -955,7 +846,9 @@ const handleUpload = async (formData: FormData) => {
 };
 
 onMounted(() => {
-  handleQuery();
+  nextTick(() => {
+    contentRef.value?.fetchPageData(getMergedListParams(), true);
+  });
 });
 </script>
 
@@ -970,10 +863,6 @@ onMounted(() => {
   display: flex;
 }
 
-.dept-card {
-  flex: 1;
-}
-
 .right-col {
   display: flex;
   flex-direction: column;
@@ -1004,8 +893,4 @@ onMounted(() => {
 .w-full {
   width: 100%;
 }
-
-.mb-4 {
-  margin-bottom: 16px;
-}
 </style>
diff --git a/frontend/src/views/module_task/job/index.vue b/frontend/src/views/module_task/job/index.vue
index 0229a214..8edd0885 100644
--- a/frontend/src/views/module_task/job/index.vue
+++ b/frontend/src/views/module_task/job/index.vue
@@ -1,41 +1,13 @@
 <template>
-  <div class="app-container">
-    <el-card class="search-container">
-      <el-form
-        ref="queryFormRef"
-        :model="queryFormData"
-        :inline="true"
-        label-suffix=":"
-        @submit.prevent="handleQuery"
-      >
-        <el-form-item prop="name" label="任务名称">
-          <el-input
-            v-model="queryFormData.name"
-            placeholder="请输入任务名称"
-            clearable
-            style="width: 150px"
-          />
-        </el-form-item>
-        <el-form-item prop="status" label="任务状态">
-          <el-select
-            v-model="queryFormData.status"
-            placeholder="请选择状态"
-            clearable
-            style="width: 150px"
-          >
-            <el-option value="运行中" label="运行中" />
-            <el-option value="暂停" label="暂停" />
-            <el-option value="停止" label="停止" />
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" icon="search" native-type="submit">查询</el-button>
-          <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
-        </el-form-item>
-      </el-form>
-    </el-card>
+  <div class="app-container job-page">
+    <PageSearch
+      ref="searchRef"
+      :search-config="searchConfig"
+      @query-click="handleQueryClick"
+      @reset-click="handleResetClick"
+    />
 
-    <el-card class="data-table">
+    <PageContent ref="contentRef" :content-config="contentConfig">
       <template #header>
         <div class="card-header">
           <div class="status-content">
@@ -54,7 +26,7 @@
             </div>
             <div class="status-item">
               <span class="label">任务数量：</span>
-              <el-tag type="info" size="large">{{ schedulerStatus.job_count }}</el-tag>
+              <el-tag type="warning" size="large">{{ schedulerStatus.job_count }}</el-tag>
             </div>
             <div class="status-actions">
               <el-button
@@ -122,7 +94,7 @@
                 v-hasPerm="['module_task:job:update']"
                 type="warning"
                 icon="Refresh"
-                @click="handleRefresh"
+                @click="refreshMain"
               >
                 刷新
               </el-button>
@@ -131,135 +103,137 @@
         </div>
       </template>
 
-      <div v-loading="loading" class="job-cards-container">
-        <el-empty v-if="schedulerJobs.length === 0" :image-size="80" description="暂无数据" />
-        <el-row v-else :gutter="16">
-          <el-col
-            v-for="(job, index) in schedulerJobs"
-            :key="job.id"
-            :xs="24"
-            :sm="12"
-            :md="8"
-            :lg="6"
-            class="job-card-col"
-          >
-            <el-card class="job-card" shadow="hover">
-              <template #header>
-                <div class="job-card-header">
-                  <div class="job-card-title">
-                    <span class="job-index">{{ index + 1 }}</span>
-                    <span class="job-name" :title="job.name">{{ job.name }}</span>
+      <template #table="{ data, loading }">
+        <div v-loading="loading" class="job-cards-container">
+          <el-empty v-if="!data || data.length === 0" :image-size="80" description="暂无数据" />
+          <el-row v-else :gutter="16">
+            <el-col
+              v-for="(job, index) in data"
+              :key="job.id"
+              :xs="24"
+              :sm="12"
+              :md="8"
+              :lg="6"
+              class="job-card-col"
+            >
+              <el-card class="job-card" shadow="hover">
+                <template #header>
+                  <div class="job-card-header">
+                    <div class="job-card-title">
+                      <span class="job-index">{{ index + 1 }}</span>
+                      <span class="job-name" :title="job.name">{{ job.name }}</span>
+                    </div>
+                    <el-tag :type="getJobStatusType(job.status)" size="small">
+                      {{ getJobStatusLabel(job.status) }}
+                    </el-tag>
                   </div>
-                  <el-tag :type="getJobStatusType(job.status)" size="small">
-                    {{ getJobStatusLabel(job.status) }}
-                  </el-tag>
-                </div>
-              </template>
+                </template>
 
-              <div class="job-card-body">
-                <div class="job-info-item">
-                  <span class="job-info-label">任务ID:</span>
-                  <span class="job-info-value">{{ job.id }}</span>
+                <div class="job-card-body">
+                  <div class="job-info-item">
+                    <span class="job-info-label">任务ID:</span>
+                    <span class="job-info-value">{{ job.id }}</span>
+                  </div>
+                  <div class="job-info-item">
+                    <span class="job-info-label">触发器:</span>
+                    <el-tag
+                      v-if="String(job.trigger ?? '').includes('cron')"
+                      type="primary"
+                      size="small"
+                      class="job-trigger-tag"
+                    >
+                      <el-icon><Clock /></el-icon>
+                      {{ formatTrigger(job.trigger) }}
+                    </el-tag>
+                    <el-tag
+                      v-else-if="String(job.trigger ?? '').includes('interval')"
+                      type="success"
+                      size="small"
+                      class="job-trigger-tag"
+                    >
+                      <el-icon><Timer /></el-icon>
+                      {{ formatTrigger(job.trigger) }}
+                    </el-tag>
+                    <el-tag
+                      v-else-if="String(job.trigger ?? '').includes('date')"
+                      type="warning"
+                      size="small"
+                      class="job-trigger-tag"
+                    >
+                      <el-icon><Calendar /></el-icon>
+                      {{ formatTrigger(job.trigger) }}
+                    </el-tag>
+                    <el-tag v-else type="info" size="small" class="job-trigger-tag">
+                      {{ formatTrigger(job.trigger) }}
+                    </el-tag>
+                  </div>
+                  <div class="job-info-item">
+                    <span class="job-info-label">下次执行:</span>
+                    <span class="job-info-value">{{ job.next_run_time || "无" }}</span>
+                  </div>
                 </div>
-                <div class="job-info-item">
-                  <span class="job-info-label">触发器:</span>
-                  <el-tag
-                    v-if="job.trigger.includes('cron')"
-                    type="primary"
-                    size="small"
-                    class="job-trigger-tag"
-                  >
-                    <el-icon><Clock /></el-icon>
-                    {{ formatTrigger(job.trigger) }}
-                  </el-tag>
-                  <el-tag
-                    v-else-if="job.trigger.includes('interval')"
-                    type="success"
-                    size="small"
-                    class="job-trigger-tag"
-                  >
-                    <el-icon><Timer /></el-icon>
-                    {{ formatTrigger(job.trigger) }}
-                  </el-tag>
-                  <el-tag
-                    v-else-if="job.trigger.includes('date')"
-                    type="warning"
-                    size="small"
-                    class="job-trigger-tag"
-                  >
-                    <el-icon><Calendar /></el-icon>
-                    {{ formatTrigger(job.trigger) }}
-                  </el-tag>
-                  <el-tag v-else type="info" size="small" class="job-trigger-tag">
-                    {{ formatTrigger(job.trigger) }}
-                  </el-tag>
-                </div>
-                <div class="job-info-item">
-                  <span class="job-info-label">下次执行:</span>
-                  <span class="job-info-value">{{ job.next_run_time || "无" }}</span>
-                </div>
-              </div>
 
-              <template #footer>
-                <div class="job-card-footer">
-                  <el-button
-                    v-if="job.status === '暂停中'"
-                    v-hasPerm="['module_task:job:task']"
-                    type="primary"
-                    size="small"
-                    icon="VideoPlay"
-                    @click="handleResumeJob(job.id)"
-                  >
-                    恢复
-                  </el-button>
-                  <el-button
-                    v-if="job.status === '运行中'"
-                    v-hasPerm="['module_task:job:task']"
-                    type="warning"
-                    size="small"
-                    icon="VideoPause"
-                    @click="handlePauseJob(job.id)"
-                  >
-                    暂停
-                  </el-button>
-                  <el-button
-                    v-if="job.status !== '已停止' && job.status !== '未知'"
-                    v-hasPerm="['module_task:job:task']"
-                    type="success"
-                    size="small"
-                    icon="CaretRight"
-                    @click="handleRunJobNow(job.id)"
-                  >
-                    调试
-                  </el-button>
-                  <el-button
-                    v-if="job.status !== '未知'"
-                    v-hasPerm="['module_task:job:task']"
-                    type="danger"
-                    size="small"
-                    icon="Close"
-                    @click="handleRemoveJob(job.id)"
-                  >
-                    移除
-                  </el-button>
-                  <el-button
-                    v-hasPerm="['module_task:job:query']"
-                    type="info"
-                    size="small"
-                    icon="List"
-                    @click="handleOpenExecutionLogDrawer(job)"
-                  >
-                    记录
-                  </el-button>
-                </div>
-              </template>
-            </el-card>
-          </el-col>
-        </el-row>
-      </div>
-    </el-card>
+                <template #footer>
+                  <div class="job-card-footer">
+                    <el-button
+                      v-if="job.status === '暂停中'"
+                      v-hasPerm="['module_task:job:task']"
+                      type="primary"
+                      size="small"
+                      icon="VideoPlay"
+                      @click="handleResumeJob(job.id)"
+                    >
+                      恢复
+                    </el-button>
+                    <el-button
+                      v-if="job.status === '运行中'"
+                      v-hasPerm="['module_task:job:task']"
+                      type="warning"
+                      size="small"
+                      icon="VideoPause"
+                      @click="handlePauseJob(job.id)"
+                    >
+                      暂停
+                    </el-button>
+                    <el-button
+                      v-if="job.status !== '已停止' && job.status !== '未知'"
+                      v-hasPerm="['module_task:job:task']"
+                      type="success"
+                      size="small"
+                      icon="CaretRight"
+                      @click="handleRunJobNow(job.id)"
+                    >
+                      调试
+                    </el-button>
+                    <el-button
+                      v-if="job.status !== '未知'"
+                      v-hasPerm="['module_task:job:task']"
+                      type="danger"
+                      size="small"
+                      icon="Close"
+                      @click="handleRemoveJob(job.id)"
+                    >
+                      移除
+                    </el-button>
+                    <el-button
+                      v-hasPerm="['module_task:job:query']"
+                      type="info"
+                      size="small"
+                      icon="List"
+                      @click="handleOpenExecutionLogDrawer(job)"
+                    >
+                      记录
+                    </el-button>
+                  </div>
+                </template>
+              </el-card>
+            </el-col>
+          </el-row>
+        </div>
+      </template>
+    </PageContent>
 
-    <el-dialog v-model="consoleVisible" title="调度器控制台">
+    <EnhancedDialog v-model="consoleVisible" title="调度器控制台" width="900px">
       <div class="terminal-wrapper">
         <Terminal name="scheduler-console" :show-header="false" theme="dark" />
       </div>
@@ -268,153 +242,122 @@
         <el-button @click="handleClearConsole">清空</el-button>
         <el-button type="primary" @click="consoleVisible = false">关闭</el-button>
       </template>
-    </el-dialog>
+    </EnhancedDialog>
 
-    <el-drawer v-model="executionLogDrawerVisible" title="执行记录" direction="rtl" size="80%">
+    <EnhancedDrawer v-model="executionLogDrawerVisible" title="执行记录" direction="rtl" size="80%">
       <div class="execution-log-drawer">
-        <div class="search-container">
-          <el-form
-            ref="logQueryFormRef"
-            :model="logQueryFormData"
-            :inline="true"
-            label-suffix=":"
-            @submit.prevent="handleLogQuery"
-          >
-            <el-form-item prop="status" label="执行状态">
-              <el-select
-                v-model="logQueryFormData.status"
-                placeholder="请选择状态"
-                clearable
-                style="width: 120px"
-              >
-                <el-option value="pending" label="待执行" />
-                <el-option value="running" label="执行中" />
-                <el-option value="success" label="成功" />
-                <el-option value="failed" label="失败" />
-                <el-option value="timeout" label="超时" />
-                <el-option value="cancelled" label="已取消" />
-              </el-select>
-            </el-form-item>
-            <el-form-item prop="trigger_type" label="触发方式">
-              <el-select
-                v-model="logQueryFormData.trigger_type"
-                placeholder="请选择"
-                clearable
-                style="width: 120px"
-              >
-                <el-option value="cron" label="Cron表达式" />
-                <el-option value="interval" label="时间间隔" />
-                <el-option value="date" label="固定日期" />
-                <el-option value="manual" label="一次性任务" />
-              </el-select>
-            </el-form-item>
-            <el-form-item class="search-buttons">
-              <el-button type="primary" icon="search" native-type="submit">查询</el-button>
-              <el-button icon="refresh" @click="handleResetLogQuery">重置</el-button>
-              <el-button
-                v-hasPerm="['module_task:job:delete']"
-                type="danger"
-                icon="delete"
-                :disabled="logSelectIds.length === 0"
-                @click="handleBatchDeleteExecutionLog"
-              >
-                批量删除
-              </el-button>
-            </el-form-item>
-          </el-form>
-        </div>
-
-        <el-table
-          v-loading="logLoading"
-          :data="executionLogData"
-          class="data-table__content"
-          border
-          stripe
-          height="calc(100vh - 240px)"
-          max-height="calc(100vh - 240px)"
-          @selection-change="handleLogSelectionChange"
+        <PageSearch
+          ref="logSearchRef"
+          :search-config="logSearchConfig"
+          @query-click="handleLogQueryClick"
+          @reset-click="handleLogResetClick"
+        />
+        <PageContent
+          ref="logContentRef"
+          class="execution-log-drawer__content"
+          :content-config="logContentConfig"
         >
-          <template #empty>
-            <el-empty :image-size="80" description="暂无数据" />
+          <template #table="{ data, loading, tableRef, onSelectionChange, pagination }">
+            <div class="data-table__content">
+              <el-table
+                :ref="tableRef as any"
+                v-loading="loading"
+                :data="data"
+                border
+                stripe
+                height="100%"
+                @selection-change="onSelectionChange"
+              >
+                <template #empty>
+                  <el-empty :image-size="80" description="暂无数据" />
+                </template>
+                <el-table-column type="selection" align="center" min-width="55" />
+                <el-table-column type="index" fixed label="序号" min-width="60">
+                  <template #default="scope">
+                    {{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  label="任务ID"
+                  prop="job_id"
+                  min-width="80"
+                  show-overflow-tooltip
+                />
+                <el-table-column label="任务名称" prop="job_name" min-width="140" />
+                <el-table-column label="触发方式" prop="trigger_type" min-width="120">
+                  <template #default="scope">
+                    <el-tag size="small">{{ getTriggerTypeLabel(scope.row.trigger_type) }}</el-tag>
+                  </template>
+                </el-table-column>
+                <el-table-column label="状态" prop="status" min-width="80">
+                  <template #default="scope">
+                    <el-tag :type="getLogStatusType(scope.row.status)" size="small">
+                      {{ getLogStatusLabel(scope.row.status) }}
+                    </el-tag>
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  label="下次执行时间"
+                  prop="next_run_time"
+                  min-width="200"
+                  show-overflow-tooltip
+                />
+                <el-table-column
+                  label="执行结果"
+                  prop="result"
+                  min-width="100"
+                  show-overflow-tooltip
+                />
+                <el-table-column
+                  label="错误信息"
+                  prop="error"
+                  min-width="100"
+                  show-overflow-tooltip
+                />
+                <el-table-column label="执行元数据" min-width="100">
+                  <template #default="scope">
+                    <el-button
+                      v-if="scope.row.job_state"
+                      type="primary"
+                      size="small"
+                      link
+                      icon="View"
+                      @click="handleViewJobState(scope.row)"
+                    >
+                      查看
+                    </el-button>
+                    <span v-else>-</span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="创建时间" prop="created_time" min-width="160" />
+                <el-table-column label="更新时间" prop="updated_time" min-width="160" />
+                <el-table-column label="操作" min-width="80" fixed="right">
+                  <template #default="scope">
+                    <el-button
+                      v-hasPerm="['module_task:job:delete']"
+                      type="danger"
+                      size="small"
+                      link
+                      icon="delete"
+                      @click="handleLogRowDelete(scope.row.id)"
+                    >
+                      删除
+                    </el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
           </template>
-          <el-table-column type="selection" align="center" min-width="55" />
-          <el-table-column type="index" fixed label="序号" min-width="60">
-            <template #default="scope">
-              {{ (logQueryFormData.page_no - 1) * logQueryFormData.page_size + scope.$index + 1 }}
-            </template>
-          </el-table-column>
-          <el-table-column label="任务ID" prop="job_id" min-width="80" show-overflow-tooltip />
-          <el-table-column label="任务名称" prop="job_name" min-width="140" />
-          <el-table-column label="触发方式" prop="trigger_type" min-width="120">
-            <template #default="scope">
-              <el-tag size="small">{{ getTriggerTypeLabel(scope.row.trigger_type) }}</el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column label="状态" prop="status" min-width="80">
-            <template #default="scope">
-              <el-tag :type="getLogStatusType(scope.row.status)" size="small">
-                {{ getLogStatusLabel(scope.row.status) }}
-              </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column
-            label="下次执行时间"
-            prop="next_run_time"
-            min-width="200"
-            show-overflow-tooltip
-          />
-          <el-table-column label="执行结果" prop="result" min-width="100" show-overflow-tooltip />
-          <el-table-column label="错误信息" prop="error" min-width="100" show-overflow-tooltip />
-          <el-table-column label="执行元数据" min-width="100">
-            <template #default="scope">
-              <el-button
-                v-if="scope.row.job_state"
-                type="primary"
-                size="small"
-                link
-                icon="View"
-                @click="handleViewJobState(scope.row)"
-              >
-                查看
-              </el-button>
-              <span v-else>-</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="创建时间" prop="created_time" min-width="160" />
-          <el-table-column label="更新时间" prop="updated_time" min-width="160" />
-          <el-table-column label="操作" min-width="80" fixed="right">
-            <template #default="scope">
-              <el-button
-                v-hasPerm="['module_task:job:delete']"
-                type="danger"
-                size="small"
-                link
-                icon="delete"
-                @click="handleDeleteExecutionLog(scope.row.id)"
-              >
-                删除
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-
-        <div class="pagination-container">
-          <pagination
-            v-model:total="logTotal"
-            v-model:page="logQueryFormData.page_no"
-            v-model:limit="logQueryFormData.page_size"
-            @pagination="loadExecutionLogData"
-          />
-        </div>
+        </PageContent>
       </div>
-    </el-drawer>
+    </EnhancedDrawer>
 
-    <el-dialog v-model="jobStateVisible" title="执行元数据" width="800px">
+    <EnhancedDialog v-model="jobStateVisible" title="执行元数据" width="800px">
       <JsonPretty :value="jobStateData" height="400px" />
       <template #footer>
         <el-button type="primary" @click="jobStateVisible = false">关闭</el-button>
       </template>
-    </el-dialog>
+    </EnhancedDialog>
   </div>
 </template>
 
@@ -430,16 +373,18 @@ import JobAPI, {
   JobLogPageQuery,
   JobLogTable,
 } from "@/api/module_task/job";
-import { onMounted, reactive } from "vue";
+import PageSearch from "@/components/CURD/PageSearch.vue";
+import PageContent from "@/components/CURD/PageContent.vue";
+import EnhancedDialog from "@/components/CURD/EnhancedDialog.vue";
+import EnhancedDrawer from "@/components/CURD/EnhancedDrawer.vue";
+import type { ISearchConfig, IContentConfig, IObject } from "@/components/CURD/types";
+import { ref, reactive, nextTick } from "vue";
 import { Terminal, TerminalApi } from "vue-web-terminal";
 import JsonPretty from "@/components/JsonPretty/index.vue";
+import { useCrudList } from "@/components/CURD/useCrudList";
 
-const loading = ref(false);
-
-const queryFormData = ref({
-  name: "",
-  status: "",
-});
+const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
+const refreshMain = refreshList;
 
 const schedulerStatus = ref<SchedulerStatus>({
   status: "未知",
@@ -447,25 +392,146 @@ const schedulerStatus = ref<SchedulerStatus>({
   job_count: 0,
 });
 
+const searchConfig = reactive<ISearchConfig>({
+  permPrefix: "module_task:job",
+  colon: true,
+  isExpandable: false,
+  showNumber: 2,
+  form: { labelWidth: "auto" },
+  formItems: [
+    {
+      prop: "name",
+      label: "任务名称",
+      type: "input",
+      attrs: { placeholder: "请输入任务名称", clearable: true, style: { width: "150px" } },
+    },
+    {
+      prop: "status",
+      label: "任务状态",
+      type: "select",
+      options: [
+        { label: "运行中", value: "运行中" },
+        { label: "暂停", value: "暂停" },
+        { label: "停止", value: "停止" },
+      ],
+      attrs: { placeholder: "请选择状态", clearable: true, style: { width: "150px" } },
+    },
+  ],
+});
+
+const contentConfig = reactive<IContentConfig>({
+  permPrefix: "module_task:job",
+  cols: [],
+  hideColumnFilter: true,
+  showToolbar: false,
+  pagination: false,
+  indexAction: async (params) => {
+    try {
+      const statusRes = await JobAPI.getSchedulerStatus();
+      schedulerStatus.value = statusRes.data.data;
+    } catch (error: unknown) {
+      console.error(error);
+    }
+    const response = await JobAPI.getSchedulerJobs();
+    const raw = response.data?.data;
+    let jobs = Array.isArray(raw) ? raw : [];
+    const p = params as { name?: string; status?: string };
+    const name = typeof p.name === "string" ? p.name.trim() : "";
+    if (name) jobs = jobs.filter((job) => job.name.includes(name));
+    if (p.status) jobs = jobs.filter((job) => job.status === p.status);
+    // pagination 为 false 时 PageContent 将整段返回值赋给 pageData，必须为列表数组
+    return jobs;
+  },
+});
+
 const consoleVisible = ref(false);
 
-const schedulerJobs = ref<SchedulerJob[]>([]);
-
 const executionLogDrawerVisible = ref(false);
-const logLoading = ref(false);
-const logTotal = ref(0);
-const executionLogData = ref<JobLogTable[]>([]);
-const logSelectIds = ref<number[]>([]);
+const currentLogJobId = ref<string | undefined>(undefined);
+const logSearchRef = ref<InstanceType<typeof PageSearch>>();
+const logContentRef = ref<InstanceType<typeof PageContent>>();
 const jobStateVisible = ref(false);
 const jobStateData = ref<any>(null);
 
-const logQueryFormData = reactive<JobLogPageQuery>({
-  page_no: 1,
-  page_size: 10,
-  job_id: undefined,
-  job_name: undefined,
-  status: undefined,
-  trigger_type: undefined,
+const logSearchConfig = reactive<ISearchConfig>({
+  permPrefix: "module_task:job",
+  colon: true,
+  isExpandable: false,
+  showNumber: 2,
+  form: { labelWidth: "auto" },
+  formItems: [
+    {
+      prop: "status",
+      label: "执行状态",
+      type: "select",
+      options: [
+        { label: "待执行", value: "pending" },
+        { label: "执行中", value: "running" },
+        { label: "成功", value: "success" },
+        { label: "失败", value: "failed" },
+        { label: "超时", value: "timeout" },
+        { label: "已取消", value: "cancelled" },
+      ],
+      attrs: { placeholder: "请选择状态", clearable: true, style: { width: "120px" } },
+    },
+    {
+      prop: "trigger_type",
+      label: "触发方式",
+      type: "select",
+      options: [
+        { label: "Cron表达式", value: "cron" },
+        { label: "时间间隔", value: "interval" },
+        { label: "固定日期", value: "date" },
+        { label: "一次性任务", value: "manual" },
+      ],
+      attrs: { placeholder: "请选择", clearable: true, style: { width: "120px" } },
+    },
+  ],
+});
+
+const logContentConfig = reactive<IContentConfig>({
+  permPrefix: "module_task:job",
+  cols: [],
+  hideColumnFilter: true,
+  toolbar: ["delete"],
+  defaultToolbar: ["refresh"],
+  pagination: {
+    pageSize: 10,
+    pageSizes: [10, 20, 30, 50],
+  },
+  request: { page_no: "page_no", page_size: "page_size" },
+  indexAction: async (params) => {
+    const jobId = currentLogJobId.value;
+    if (!jobId) {
+      return { total: 0, list: [] };
+    }
+    const p = params as JobLogPageQuery;
+    const res = await JobAPI.getJobLogList({
+      page_no: p.page_no ?? 1,
+      page_size: p.page_size ?? 10,
+      job_id: jobId,
+      job_name: undefined,
+      status: p.status,
+      trigger_type: p.trigger_type,
+    });
+    const page = res.data.data;
+    return {
+      total: page?.total ?? 0,
+      list: page?.items ?? [],
+    };
+  },
+  deleteAction: (ids) =>
+    JobAPI.deleteJobLog(
+      ids
+        .split(",")
+        .map((s) => Number(s.trim()))
+        .filter((n) => !Number.isNaN(n))
+    ),
+  deleteConfirm: {
+    title: "警告",
+    message: "确认删除选中的执行记录？",
+    type: "warning",
+  },
 });
 
 function getSchedulerStatusType(status: string) {
@@ -558,64 +624,19 @@ function formatTrigger(trigger: string) {
   return trigger;
 }
 
-async function loadSchedulerStatus() {
-  try {
-    const response = await JobAPI.getSchedulerStatus();
-    schedulerStatus.value = response.data.data;
-  } catch (error: any) {
-    console.error(error);
-  }
-}
-
-async function loadSchedulerJobs() {
-  loading.value = true;
-  try {
-    const response = await JobAPI.getSchedulerJobs();
-    let jobs = response.data.data || [];
-
-    if (queryFormData.value.name) {
-      jobs = jobs.filter((job) => job.name.includes(queryFormData.value.name));
-    }
-
-    if (queryFormData.value.status) {
-      jobs = jobs.filter((job) => job.status === queryFormData.value.status);
-    }
-
-    schedulerJobs.value = jobs;
-  } catch (error: any) {
-    console.error(error);
-  } finally {
-    loading.value = false;
-  }
-}
-
-function handleQuery() {
-  loadSchedulerJobs();
-}
-
-function handleResetQuery() {
-  queryFormData.value.name = "";
-  queryFormData.value.status = "";
-  loadSchedulerJobs();
-}
-
 async function handleSyncJobs() {
   try {
     await JobAPI.syncJobsToDb();
-    await handleRefresh();
+    await refreshMain();
   } catch (error: any) {
     console.error(error);
   }
 }
 
-async function handleRefresh() {
-  await Promise.all([loadSchedulerStatus(), loadSchedulerJobs()]);
-}
-
 async function handleStartScheduler() {
   try {
     await JobAPI.startScheduler();
-    await handleRefresh();
+    await refreshMain();
   } catch (error: any) {
     console.error(error);
   }
@@ -624,7 +645,7 @@ async function handleStartScheduler() {
 async function handlePauseScheduler() {
   try {
     await JobAPI.pauseScheduler();
-    await handleRefresh();
+    await refreshMain();
   } catch (error: any) {
     console.error(error);
   }
@@ -633,7 +654,7 @@ async function handlePauseScheduler() {
 async function handleResumeScheduler() {
   try {
     await JobAPI.resumeScheduler();
-    await handleRefresh();
+    await refreshMain();
   } catch (error: any) {
     console.error(error);
   }
@@ -647,7 +668,7 @@ async function handleShutdownScheduler() {
       type: "warning",
     });
     await JobAPI.shutdownScheduler();
-    await handleRefresh();
+    await refreshMain();
   } catch (error: any) {
     if (error !== "cancel") {
       console.error(error);
@@ -670,7 +691,7 @@ async function handleClearAllJobs() {
       }
     );
     await JobAPI.clearAllJobs();
-    await handleRefresh();
+    await refreshMain();
   } catch (error: any) {
     if (error !== "cancel") {
       console.error(error);
@@ -708,7 +729,7 @@ function handleClearConsole() {
 async function handlePauseJob(jobId: string) {
   try {
     await JobAPI.pauseJob(jobId);
-    await handleRefresh();
+    await refreshMain();
   } catch (error: any) {
     console.error(error);
   }
@@ -717,7 +738,7 @@ async function handlePauseJob(jobId: string) {
 async function handleResumeJob(jobId: string) {
   try {
     await JobAPI.resumeJob(jobId);
-    await handleRefresh();
+    await refreshMain();
   } catch (error: any) {
     console.error(error);
   }
@@ -726,7 +747,7 @@ async function handleResumeJob(jobId: string) {
 async function handleRunJobNow(jobId: string) {
   try {
     await JobAPI.runJobNow(jobId);
-    await handleRefresh();
+    await refreshMain();
   } catch (error: any) {
     console.error(error);
   }
@@ -741,7 +762,7 @@ async function handleRemoveJob(jobId: string) {
     .then(async () => {
       try {
         await JobAPI.removeJob(jobId);
-        await handleRefresh();
+        await refreshMain();
       } catch (error: any) {
         console.error(error);
       }
@@ -751,43 +772,23 @@ async function handleRemoveJob(jobId: string) {
     });
 }
 
-async function handleOpenExecutionLogDrawer(job: SchedulerJob) {
-  logQueryFormData.job_id = job.id;
-  logQueryFormData.job_name = undefined;
-  logQueryFormData.page_no = 1;
+async function handleOpenExecutionLogDrawer(job: IObject) {
+  currentLogJobId.value = (job as SchedulerJob).id;
   executionLogDrawerVisible.value = true;
-  await loadExecutionLogData();
+  await nextTick();
+  logContentRef.value?.fetchPageData(logSearchRef.value?.getQueryParams() ?? {}, true);
 }
 
-async function loadExecutionLogData() {
-  logLoading.value = true;
-  try {
-    const response = await JobAPI.getJobLogList(logQueryFormData);
-    executionLogData.value = response.data.data.items;
-    logTotal.value = response.data.data.total;
-  } catch (error: any) {
-    console.error(error);
-  } finally {
-    logLoading.value = false;
-  }
+function handleLogQueryClick() {
+  logContentRef.value?.fetchPageData(logSearchRef.value!.getQueryParams(), true);
 }
 
-function handleLogQuery() {
-  logQueryFormData.page_no = 1;
-  loadExecutionLogData();
+function handleLogResetClick() {
+  logContentRef.value?.fetchPageData(logSearchRef.value!.getQueryParams(), true);
 }
 
-function handleResetLogQuery() {
-  logQueryFormData.status = undefined;
-  logQueryFormData.trigger_type = undefined;
-  logQueryFormData.page_no = 1;
-  loadExecutionLogData();
-}
-
-function handleLogSelectionChange(selection: JobLogTable[]) {
-  logSelectIds.value = selection
-    .map((item) => item.id)
-    .filter((id): id is number => id !== undefined);
+function handleLogRowDelete(id: number) {
+  logContentRef.value?.handleDelete(id);
 }
 
 function getTriggerTypeLabel(type: string | undefined) {
@@ -824,68 +825,22 @@ function getLogStatusLabel(status: string) {
   return map[status] || status;
 }
 
-function handleViewJobState(row: JobLogTable) {
-  if (row.job_state) {
+function handleViewJobState(row: JobLogTable | IObject) {
+  const jobState = (row as JobLogTable).job_state;
+  if (jobState) {
     try {
-      jobStateData.value = JSON.parse(row.job_state);
+      jobStateData.value = JSON.parse(jobState);
     } catch {
-      jobStateData.value = row.job_state;
+      jobStateData.value = jobState;
     }
     jobStateVisible.value = true;
   }
 }
-
-async function handleDeleteExecutionLog(id: number) {
-  ElMessageBox.confirm("确认删除该条执行记录?", "警告", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    type: "warning",
-  })
-    .then(async () => {
-      try {
-        await JobAPI.deleteJobLog([id]);
-        await loadExecutionLogData();
-      } catch (error: any) {
-        console.error(error);
-      }
-    })
-    .catch(() => {
-      ElMessageBox.close();
-    });
-}
-
-async function handleBatchDeleteExecutionLog() {
-  if (logSelectIds.value.length === 0) {
-    ElMessage.warning("请先选择要删除的执行记录");
-    return;
-  }
-  ElMessageBox.confirm(`确认删除选中的 ${logSelectIds.value.length} 条执行记录?`, "警告", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    type: "warning",
-  })
-    .then(async () => {
-      try {
-        await JobAPI.deleteJobLog(logSelectIds.value);
-        logSelectIds.value = [];
-        await loadExecutionLogData();
-      } catch (error: any) {
-        console.error(error);
-      }
-    })
-    .catch(() => {
-      ElMessageBox.close();
-    });
-}
-
-onMounted(async () => {
-  await handleRefresh();
-});
 </script>
 
 <style scoped>
-.data-table {
-  height: calc(100vh - 100px);
+.job-page :deep(.data-table) {
+  height: 100%;
 }
 
 .status-content {
@@ -902,7 +857,6 @@ onMounted(async () => {
 
 .status-item .label {
   font-weight: 500;
-  color: #606266;
 }
 
 .status-actions {
@@ -940,9 +894,12 @@ onMounted(async () => {
   font-size: 12px;
   font-weight: 600;
   color: #fff;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(
+    135deg,
+    var(--el-color-primary) 0%,
+    var(--el-color-primary-dark-2) 100%
+  );
   border-radius: 50%;
-  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.4);
 }
 
 .job-name {
@@ -967,14 +924,12 @@ onMounted(async () => {
 .job-info-label {
   flex-shrink: 0;
   width: 70px;
-  color: #909399;
 }
 
 .job-info-value {
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: #606266;
   white-space: nowrap;
 }
 
@@ -986,4 +941,16 @@ onMounted(async () => {
 .job-card-footer .el-button {
   flex: 1;
 }
+
+.execution-log-drawer {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  min-height: 0;
+}
+
+.execution-log-drawer :deep(.execution-log-drawer__content.data-table) {
+  flex: 1;
+  min-height: 0;
+}
 </style>
diff --git a/frontend/src/views/module_task/node/index.vue b/frontend/src/views/module_task/node/index.vue
index d8668a26..28f091e7 100644
--- a/frontend/src/views/module_task/node/index.vue
+++ b/frontend/src/views/module_task/node/index.vue
@@ -1,153 +1,86 @@
 <template>
   <div class="app-container">
-    <el-card class="search-container">
-      <el-form
-        ref="queryFormRef"
-        :model="queryFormData"
-        :inline="true"
-        label-suffix=":"
-        @submit.prevent="handleQuery"
-      >
-        <el-form-item prop="name" label="节点名称">
-          <el-input v-model="queryFormData.name" placeholder="请输入节点名称" clearable />
-        </el-form-item>
-        <el-form-item prop="code" label="节点编码">
-          <el-input v-model="queryFormData.code" placeholder="请输入节点编码" clearable />
-        </el-form-item>
-        <el-form-item class="search-buttons">
-          <el-button
-            v-hasPerm="['module_task:node:query']"
-            type="primary"
-            icon="search"
-            native-type="submit"
+    <PageSearch
+      ref="searchRef"
+      :search-config="searchConfig"
+      @query-click="handleQueryClick"
+      @reset-click="handleResetClick"
+    />
+
+    <PageContent
+      ref="contentRef"
+      :content-config="contentConfig"
+      @search-click="handleToggleSearch"
+      @add-click="handleOpenDialog('create')"
+    >
+      <template #table="{ data, loading, tableRef, onSelectionChange, pagination }">
+        <div class="data-table__content">
+          <el-table
+            :ref="tableRef as any"
+            v-loading="loading"
+            :data="data"
+            height="100%"
+            border
+            stripe
+            @selection-change="onSelectionChange"
           >
-            查询
-          </el-button>
-          <el-button
-            v-hasPerm="['module_task:node:query']"
-            icon="refresh"
-            @click="handleResetQuery"
-          >
-            重置
-          </el-button>
-        </el-form-item>
-      </el-form>
-    </el-card>
-
-    <el-card class="data-table">
-      <div class="data-table__toolbar">
-        <div class="data-table__toolbar--left">
-          <el-row :gutter="10">
-            <el-col :span="1.5">
-              <el-button
-                v-hasPerm="['module_task:node:create']"
-                type="success"
-                icon="plus"
-                @click="handleOpenDialog('create')"
-              >
-                新增
-              </el-button>
-            </el-col>
-            <el-col :span="1.5">
-              <el-button
-                v-hasPerm="['module_task:node:delete']"
-                type="danger"
-                icon="delete"
-                :disabled="selectIds.length === 0"
-                @click="handleDelete(selectIds)"
-              >
-                批量删除
-              </el-button>
-            </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 type="primary" icon="refresh" circle @click="handleRefresh" />
-              </el-tooltip>
-            </el-col>
-          </el-row>
-        </div>
-      </div>
-
-      <div class="data-table__content">
-        <el-table
-          ref="dataTableRef"
-          v-loading="loading"
-          :data="pageTableData"
-          height="calc(100vh - 350px)"
-          max-height="calc(100vh - 350px)"
-          border
-          stripe
-          @selection-change="handleSelectionChange"
-        >
-          <template #empty>
-            <el-empty :image-size="80" description="暂无数据" />
-          </template>
-          <el-table-column type="selection" align="center" min-width="55" />
-          <el-table-column type="index" fixed label="序号" min-width="60">
-            <template #default="scope">
-              {{ (queryFormData.page_no - 1) * queryFormData.page_size + scope.$index + 1 }}
+            <template #empty>
+              <el-empty :image-size="80" description="暂无数据" />
             </template>
-          </el-table-column>
-          <el-table-column label="节点名称" prop="name" min-width="140" />
-          <el-table-column label="节点编码" prop="code" min-width="120" />
-          <el-table-column label="存储器" prop="jobstore" min-width="80" />
-          <el-table-column label="执行器" prop="executor" min-width="80" />
-          <el-table-column label="创建时间" prop="created_time" min-width="180" sortable />
+            <el-table-column type="selection" align="center" min-width="55" />
+            <el-table-column type="index" fixed label="序号" min-width="60">
+              <template #default="scope">
+                {{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}
+              </template>
+            </el-table-column>
+            <el-table-column label="节点名称" prop="name" min-width="140" />
+            <el-table-column label="节点编码" prop="code" min-width="120" />
+            <el-table-column label="存储器" prop="jobstore" min-width="80" />
+            <el-table-column label="执行器" prop="executor" min-width="80" />
+            <el-table-column label="创建时间" prop="created_time" min-width="180" sortable />
 
-          <OperationColumn :list-data-length="pageTableData.length">
-            <template #default="scope">
-              <el-space class="flex">
-                <el-button
-                  v-hasPerm="['module_task:node:execute']"
-                  type="warning"
-                  size="small"
-                  link
-                  icon="VideoPlay"
-                  @click="handleOpenExecuteDialog(scope.row)"
-                >
-                  调试
-                </el-button>
-                <el-button
-                  v-hasPerm="['module_task:node:update']"
-                  type="primary"
-                  size="small"
-                  link
-                  icon="edit"
-                  @click="handleOpenDialog('update', scope.row.id)"
-                >
-                  编辑
-                </el-button>
-                <el-button
-                  v-hasPerm="['module_task:node:delete']"
-                  type="danger"
-                  size="small"
-                  link
-                  icon="delete"
-                  @click="handleDelete([scope.row.id])"
-                >
-                  删除
-                </el-button>
-              </el-space>
-            </template>
-          </OperationColumn>
-        </el-table>
-      </div>
-
-      <template #footer>
-        <pagination
-          v-model:total="total"
-          v-model:page="queryFormData.page_no"
-          v-model:limit="queryFormData.page_size"
-          @pagination="loadingData"
-        />
+            <OperationColumn :list-data-length="data.length">
+              <template #default="scope">
+                <el-space class="flex">
+                  <el-button
+                    v-hasPerm="['module_task:node:execute']"
+                    type="warning"
+                    size="small"
+                    link
+                    icon="VideoPlay"
+                    @click="handleOpenExecuteDialog(scope.row)"
+                  >
+                    调试
+                  </el-button>
+                  <el-button
+                    v-hasPerm="['module_task:node:update']"
+                    type="primary"
+                    size="small"
+                    link
+                    icon="edit"
+                    @click="handleOpenDialog('update', scope.row.id)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    v-hasPerm="['module_task:node:delete']"
+                    type="danger"
+                    size="small"
+                    link
+                    icon="delete"
+                    @click="handleRowDelete(scope.row.id)"
+                  >
+                    删除
+                  </el-button>
+                </el-space>
+              </template>
+            </OperationColumn>
+          </el-table>
+        </div>
       </template>
-    </el-card>
+    </PageContent>
 
-    <el-dialog
+    <EnhancedDialog
       v-model="dialogVisible.visible"
       :title="dialogVisible.title"
       width="1000px"
@@ -267,12 +200,12 @@
       <template #footer>
         <div class="dialog-footer">
           <el-button @click="handleCloseDialog">取消</el-button>
-          <el-button type="primary" @click="handleSubmit">确定</el-button>
+          <el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button>
         </div>
       </template>
-    </el-dialog>
+    </EnhancedDialog>
 
-    <el-dialog
+    <EnhancedDialog
       v-model="executeDialogVisible"
       title="调试节点"
       width="700px"
@@ -395,9 +328,11 @@
 
       <template #footer>
         <el-button @click="handleCloseExecuteDialog">取消</el-button>
-        <el-button type="primary" @click="handleExecuteNode">确认</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="handleExecuteNode">
+          确认
+        </el-button>
       </template>
-    </el-dialog>
+    </EnhancedDialog>
   </div>
 </template>
 
@@ -409,7 +344,13 @@ defineOptions({
 
 import NodeAPI, { NodeTable, NodeForm, NodePageQuery, TriggerType } from "@/api/module_task/node";
 import { useDictStore } from "@/store/index";
+import PageSearch from "@/components/CURD/PageSearch.vue";
+import PageContent from "@/components/CURD/PageContent.vue";
+import EnhancedDialog from "@/components/CURD/EnhancedDialog.vue";
+import type { IContentConfig, ISearchConfig } from "@/components/CURD/types";
+import { useCrudList } from "@/components/CURD/useCrudList";
 import { nextTick, onMounted, reactive, ref } from "vue";
+import { ElMessage } from "element-plus";
 import { vue3CronPlus } from "vue3-cron-plus";
 import "vue3-cron-plus/dist/index.css";
 import OperationColumn from "@/components/OperationColumn/index.vue";
@@ -432,23 +373,70 @@ const codeEditorOptions: EditorConfiguration = {
   autofocus: false,
 };
 
-const queryFormRef = ref();
+const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
 const dataFormRef = ref();
 const executeFormRef = ref();
-const total = ref(0);
-const selectIds = ref<number[]>([]);
-const loading = ref(false);
+const submitLoading = ref(false);
 const openCron = ref(false);
 const openInterval = ref(false);
 const codeEditorRef = ref<CmComponentRef>();
 
-const pageTableData = ref<NodeTable[]>([]);
+const searchConfig = reactive<ISearchConfig>({
+  permPrefix: "module_task:node",
+  colon: true,
+  isExpandable: false,
+  showNumber: 2,
+  showToggle: false,
+  form: { labelWidth: "auto" },
+  formItems: [
+    {
+      prop: "name",
+      label: "节点名称",
+      type: "input",
+      attrs: { placeholder: "请输入节点名称", clearable: true },
+    },
+    {
+      prop: "code",
+      label: "节点编码",
+      type: "input",
+      attrs: { placeholder: "请输入节点编码", clearable: true },
+    },
+  ],
+});
 
-const queryFormData = reactive<NodePageQuery>({
-  page_no: 1,
-  page_size: 10,
-  name: undefined,
-  code: undefined,
+const contentConfig = reactive<IContentConfig<NodePageQuery>>({
+  permPrefix: "module_task:node",
+  cols: [],
+  hideColumnFilter: true,
+  toolbar: ["add", "delete"],
+  defaultToolbar: ["refresh"],
+  pagination: {
+    pageSize: 10,
+    pageSizes: [10, 20, 30, 50],
+  },
+  request: { page_no: "page_no", page_size: "page_size" },
+  indexAction: async (params) => {
+    const res = await NodeAPI.listNode(params as NodePageQuery);
+    return {
+      total: res.data.data.total,
+      list: res.data.data.items,
+    };
+  },
+  deleteAction: (ids) =>
+    NodeAPI.deleteNode(
+      ids
+        .split(",")
+        .map((s) => Number(s.trim()))
+        .filter((n) => !Number.isNaN(n) && n > 0)
+    ),
+  deleteConfirm: {
+    title: "警告",
+    message:
+      "确认删除选中的节点吗？\n" +
+      "此操作将同时删除节点定义并移除调度器中的相关任务。\n" +
+      "正在运行的任务会被立即移除，待执行任务的日志将被标记为已取消。",
+    type: "warning",
+  },
 });
 
 const defaultCodeBlock = `def handler(*args, **kwargs):
@@ -549,32 +537,12 @@ const executeRules = reactive({
   trigger_args: [{ required: true, message: "请设置执行参数", trigger: "blur" }],
 });
 
-async function handleRefresh() {
-  await loadingData();
+function handleToggleSearch() {
+  searchRef.value?.toggleVisible();
 }
 
-async function loadingData() {
-  loading.value = true;
-  try {
-    const response = await NodeAPI.listNode(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();
-}
-
-async function handleResetQuery() {
-  queryFormRef.value.resetFields();
-  queryFormData.page_no = 1;
-  loadingData();
+function handleRowDelete(id: number) {
+  contentRef.value?.handleDelete(id);
 }
 
 const initialFormData: Partial<NodeForm> = {
@@ -602,10 +570,6 @@ async function resetForm() {
   kwargsList.value = [];
 }
 
-async function handleSelectionChange(selection: any) {
-  selectIds.value = selection.map((item: any) => item.id);
-}
-
 async function handleCloseDialog() {
   dialogVisible.visible = false;
   resetForm();
@@ -645,7 +609,7 @@ function handleDialogOpened() {
 async function handleSubmit() {
   dataFormRef.value.validate(async (valid: any) => {
     if (valid) {
-      loading.value = true;
+      submitLoading.value = true;
       const id = formData.id;
       try {
         const submitData = {
@@ -667,44 +631,16 @@ async function handleSubmit() {
         }
         dialogVisible.visible = false;
         resetForm();
-        handleResetQuery();
+        refreshList();
       } catch (error: any) {
         console.log(error);
       } finally {
-        loading.value = false;
+        submitLoading.value = false;
       }
     }
   });
 }
 
-async function handleDelete(ids: number[]) {
-  ElMessageBox.confirm(
-    "确认删除选中的节点吗？\n" +
-      "此操作将同时删除节点定义并移除调度器中的相关任务。\n" +
-      "正在运行的任务会被立即移除，待执行任务的日志将被标记为已取消。",
-    "警告",
-    {
-      confirmButtonText: "确定",
-      cancelButtonText: "取消",
-      type: "warning",
-    }
-  )
-    .then(async () => {
-      try {
-        loading.value = true;
-        await NodeAPI.deleteNode(ids);
-        handleResetQuery();
-      } catch (error: any) {
-        console.error(error);
-      } finally {
-        loading.value = false;
-      }
-    })
-    .catch(() => {
-      ElMessageBox.close();
-    });
-}
-
 const handlechangeCron = (cronStr: string) => {
   if (typeof cronStr == "string") {
     executeFormData.trigger_args = cronStr;
@@ -740,7 +676,7 @@ async function handleExecuteNode() {
   }
 
   try {
-    loading.value = true;
+    submitLoading.value = true;
     const params: any = {
       trigger: executeFormData.trigger,
     };
@@ -755,8 +691,7 @@ async function handleExecuteNode() {
 
     handleCloseExecuteDialog();
 
-    // 重新加载数据
-    await loadingData();
+    refreshList();
   } catch (error: any) {
     ElMessage.error({
       message: error.response?.data?.msg || "调试失败",
@@ -765,13 +700,13 @@ async function handleExecuteNode() {
     });
     console.error(error);
   } finally {
-    loading.value = false;
+    submitLoading.value = false;
   }
 }
 
 onMounted(async () => {
   await dictStore.getDict(["sys_job_store", "sys_job_executor"]);
-  loadingData();
+  refreshList();
 });
 </script>