From 132501ea4edfe3803d33f702042eb852e438087b Mon Sep 17 00:00:00 2001
From: Mickeywaugh <mickeywaugh@163.com>
Date: Fri, 5 Jun 2026 15:10:01 +0800
Subject: [PATCH] =?UTF-8?q?refactor(system):=20=E9=87=8D=E6=9E=84=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E6=95=B0=E6=8D=AE=E7=BB=93=E6=9E=84=EF=BC=8C=E7=BB=9F?=
 =?UTF-8?q?=E4=B8=80=E5=88=86=E9=A1=B5=E6=9F=A5=E8=AF=A2=E5=8F=82=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/system/dict/index.ts        |    2 +-
 src/types/api/index.ts              |    3 +-
 src/views/system/config/index.vue   |  405 ++++----
 src/views/system/dict/dict-item.vue |  420 ++++----
 src/views/system/dict/index.vue     |  439 ++++----
 src/views/system/log/index.vue      |  155 ++-
 src/views/system/notice/index.vue   |  658 ++++++------
 src/views/system/role/index.vue     |  669 ++++++-------
 src/views/system/tenant/index.vue   | 1434 ++++++++++++---------------
 src/views/system/tenant/plan.vue    |  604 +++++------
 src/views/system/user/index.vue     |  649 ++++++------
 11 files changed, 2421 insertions(+), 3017 deletions(-)

diff --git a/src/api/system/dict/index.ts b/src/api/system/dict/index.ts
index 481fce53..c6fc8e0f 100644
--- a/src/api/system/dict/index.ts
+++ b/src/api/system/dict/index.ts
@@ -8,7 +8,7 @@ import type {
   DictItemForm,
   DictItemOption,
 } from "./types";
-import type { OptionItem } from "@/api/common";
+
 
 const DICT_BASE_URL = "/api/v1/dicts";
 
diff --git a/src/types/api/index.ts b/src/types/api/index.ts
index edaf523e..e55859e2 100644
--- a/src/types/api/index.ts
+++ b/src/types/api/index.ts
@@ -28,10 +28,11 @@ export interface ExcelResult {
 export interface PageResult<T> {
   total: number;
   list: T[];
+  params: PageQueryParams;
 }
 
 export interface ApiResponse<T = any> {
-  code: number;
+  code: number | string;
   msg: string;
   data: T;
 }
diff --git a/src/views/system/config/index.vue b/src/views/system/config/index.vue
index e9141a95..e7b8f5fd 100644
--- a/src/views/system/config/index.vue
+++ b/src/views/system/config/index.vue
@@ -1,14 +1,9 @@
 <template>
   <div class="page-container">
     <el-card class="page-search" shadow="never">
-      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+      <el-form ref="queryFormRef" :model="tableData.params" :inline="true">
         <el-form-item label="关键字" prop="keywords">
-          <el-input
-            v-model="queryParams.keywords"
-            placeholder="请输入配置键\配置名称"
-            clearable
-            @keyup.enter="handleQuery"
-          />
+          <el-input v-model="tableData.params.keywords" placeholder="请输入配置键\配置名称" clearable @keyup.enter="handleQuery" />
         </el-form-item>
 
         <el-form-item>
@@ -21,33 +16,17 @@
     <el-card class="page-content" shadow="never">
       <div class="page-toolbar">
         <div class="page-toolbar__left">
-          <el-button
-            v-hasPerm="['sys:config:create']"
-            type="success"
-            icon="plus"
-            @click="openDialog()"
-          >
+          <el-button v-hasPerm="['sys:config:create']" type="success" icon="plus" @click="openDialog()">
             新增
           </el-button>
-          <el-button
-            v-hasPerm="['sys:config:refresh']"
-            color="#626aef"
-            icon="RefreshLeft"
-            @click="refreshCache"
-          >
+          <el-button v-hasPerm="['sys:config:refresh']" color="#626aef" icon="RefreshLeft" @click="refreshCache">
             刷新缓存
           </el-button>
         </div>
       </div>
 
-      <el-table
-        ref="dataTableRef"
-        v-loading="loading"
-        :data="pageData"
-        highlight-current-row
-        border
-        @selection-change="handleSelectionChange"
-      >
+      <el-table ref="dataTableRef" v-loading="loading" :data="tableData.list" highlight-current-row border
+        @selection-change="handleSelectionChange">
         <el-table-column type="index" label="序号" width="60" />
         <el-table-column key="configName" label="配置名称" prop="configName" min-width="100" />
         <el-table-column key="configKey" label="配置项" prop="configKey" min-width="100" />
@@ -55,52 +34,22 @@
         <el-table-column key="remark" label="描述" prop="remark" min-width="100" />
         <el-table-column fixed="right" label="操作" width="220">
           <template #default="scope">
-            <el-button
-              v-hasPerm="['sys:config:update']"
-              type="primary"
-              size="small"
-              link
-              icon="edit"
-              @click="openDialog(scope.row.id)"
-            >
+            <el-button v-hasPerm="['sys:config:update']" type="primary" size="small" link icon="edit" @click="openDialog(scope.row.id)">
               编辑
             </el-button>
-            <el-button
-              v-hasPerm="['sys:config:delete']"
-              type="danger"
-              size="small"
-              link
-              icon="delete"
-              @click="handleDelete(scope.row.id)"
-            >
+            <el-button v-hasPerm="['sys:config:delete']" type="danger" size="small" link icon="delete" @click="handleDelete(scope.row.id)">
               删除
             </el-button>
           </template>
         </el-table-column>
       </el-table>
 
-      <pagination
-        v-if="total > 0"
-        v-model:total="total"
-        v-model:page="queryParams.pageNum"
-        v-model:limit="queryParams.pageSize"
-        @pagination="fetchData"
-      />
+      <pagination v-if="tableData.total > 0" v-model:total="tableData.total" v-model:page="tableData.params.pageNum"
+        v-model:limit="tableData.params.pageSize" @pagination="fetchData" />
     </el-card>
 
-    <el-dialog
-      v-model="dialogState.visible"
-      :title="dialogState.title"
-      width="500px"
-      @close="closeDialog"
-    >
-      <el-form
-        ref="dataFormRef"
-        :model="formData"
-        :rules="rules"
-        label-suffix=":"
-        label-width="100px"
-      >
+    <el-dialog v-model="dialogState.visible" :title="dialogState.title" width="500px" @close="closeDialog">
+      <el-form ref="dataFormRef" :model="formData" :rules="rules" label-suffix=":" label-width="100px">
         <el-form-item label="配置名称" prop="configName">
           <el-input v-model="formData.configName" placeholder="请输入配置名称" :maxlength="50" />
         </el-form-item>
@@ -111,14 +60,7 @@
           <el-input v-model="formData.configValue" placeholder="请输入配置项" :maxlength="100" />
         </el-form-item>
         <el-form-item label="描述" prop="remark">
-          <el-input
-            v-model="formData.remark"
-            :rows="4"
-            :maxlength="100"
-            show-word-limit
-            type="textarea"
-            placeholder="请输入描述"
-          />
+          <el-input v-model="formData.remark" :rows="4" :maxlength="100" show-word-limit type="textarea" placeholder="请输入描述" />
         </el-form-item>
       </el-form>
       <template #footer>
@@ -132,180 +74,181 @@
 </template>
 
 <script setup lang="ts">
-defineOptions({
-  name: "Config",
-  inheritAttrs: false,
-});
+  defineOptions({
+    name: "Config",
+    inheritAttrs: false,
+  });
 
-import ConfigAPI from "@/api/system/config";
-import type { ConfigItem, ConfigForm, ConfigQueryParams } from "@/api/system/config";
-import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from "element-plus";
-import { useDebounceFn } from "@vueuse/core";
+  import ConfigAPI from "@/api/system/config";
+  import type { ConfigItem, ConfigForm } from "@/api/system/config";
+  import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from "element-plus";
+  import { useDebounceFn } from "@vueuse/core";
 
-// 表单引用
-const queryFormRef = ref<FormInstance>();
-const dataFormRef = ref<FormInstance>();
+  // 表单引用
+  const queryFormRef = ref<FormInstance>();
+  const dataFormRef = ref<FormInstance>();
 
-// 查询参数
-const queryParams = reactive<ConfigQueryParams>({
-  pageNum: 1,
-  pageSize: 10,
-  keywords: "",
-});
+  // 列表数据
+  const loading = ref(false);
+  const selectIds = ref<string[]>([]);
 
-// 列表数据
-const pageData = ref<ConfigItem[]>([]);
-const total = ref(0);
-const loading = ref(false);
-const selectIds = ref<string[]>([]);
+  const tableData = reactive<PageResult<ConfigItem>>({
+    list: [],
+    total: 0,
+    params: { //查询参数
+      pageNum: 1,
+      pageSize: 10,
+      keywords: "",
+    },
+  });
 
-// 弹窗状态
-const dialogState = reactive({
-  title: "",
-  visible: false,
-});
+  // 弹窗状态
+  const dialogState = reactive({
+    title: "",
+    visible: false,
+  });
 
-// 表单数据
-const formData = reactive<ConfigForm>({
-  id: undefined,
-  configName: "",
-  configKey: "",
-  configValue: "",
-  remark: "",
-});
+  // 表单数据
+  const formData = reactive<ConfigForm>({
+    id: undefined,
+    configName: "",
+    configKey: "",
+    configValue: "",
+    remark: "",
+  });
 
-// 验证规则
-const rules: FormRules = {
-  configName: [{ required: true, message: "请输入系统配置名称", trigger: "blur" }],
-  configKey: [{ required: true, message: "请输入系统配置编码", trigger: "blur" }],
-  configValue: [{ required: true, message: "请输入系统配置值", trigger: "blur" }],
-};
+  // 验证规则
+  const rules: FormRules = {
+    configName: [{ required: true, message: "请输入系统配置名称", trigger: "blur" }],
+    configKey: [{ required: true, message: "请输入系统配置编码", trigger: "blur" }],
+    configValue: [{ required: true, message: "请输入系统配置值", trigger: "blur" }],
+  };
 
-/**
- * 加载配置列表数据
- */
-function fetchData(): void {
-  loading.value = true;
-  ConfigAPI.getPage(queryParams)
-    .then((data) => {
-      pageData.value = data.list;
-      total.value = data.total ?? 0;
-    })
-    .finally(() => {
-      loading.value = false;
+  /**
+   * 加载配置列表数据
+   */
+  function fetchData(): void {
+    loading.value = true;
+    ConfigAPI.getPage(tableData.params)
+      .then((data) => {
+        tableData.list = data.list ?? [];
+        tableData.total = data.total ?? 0;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  }
+
+  /**
+   * 查询按钮点击事件
+   */
+  function handleQuery(): void {
+    tableData.params.pageNum = 1;
+    fetchData();
+  }
+
+  /**
+   * 重置查询
+   */
+  function handleResetQuery(): void {
+    queryFormRef.value?.resetFields();
+    tableData.params.pageNum = 1;
+    fetchData();
+  }
+
+  /**
+   * 表格选择变化事件
+   */
+  function handleSelectionChange(selection: ConfigItem[]): void {
+    selectIds.value = selection.map((item) => item.id).filter(Boolean) as string[];
+  }
+
+  /**
+   * 打开弹窗
+   * @param id 配置ID（编辑时传入）
+   */
+  function openDialog(id?: string): void {
+    dialogState.visible = true;
+    if (id) {
+      dialogState.title = "修改系统配置";
+      ConfigAPI.getFormData(id).then((data) => {
+        Object.assign(formData, data);
+      });
+    } else {
+      dialogState.title = "新增系统配置";
+      formData.id = undefined;
+    }
+  }
+
+  /**
+   * 刷新缓存
+   */
+  const refreshCache = useDebounceFn(() => {
+    ConfigAPI.refreshCache().then(() => {
+      ElMessage.success("刷新成功");
     });
-}
+  }, 1000);
 
-/**
- * 查询按钮点击事件
- */
-function handleQuery(): void {
-  queryParams.pageNum = 1;
-  fetchData();
-}
-
-/**
- * 重置查询
- */
-function handleResetQuery(): void {
-  queryFormRef.value?.resetFields();
-  queryParams.pageNum = 1;
-  fetchData();
-}
-
-/**
- * 表格选择变化事件
- */
-function handleSelectionChange(selection: ConfigItem[]): void {
-  selectIds.value = selection.map((item) => item.id).filter(Boolean) as string[];
-}
-
-/**
- * 打开弹窗
- * @param id 配置ID（编辑时传入）
- */
-function openDialog(id?: string): void {
-  dialogState.visible = true;
-  if (id) {
-    dialogState.title = "修改系统配置";
-    ConfigAPI.getFormData(id).then((data) => {
-      Object.assign(formData, data);
+  /**
+   * 提交表单
+   */
+  function handleSubmit(): void {
+    dataFormRef.value?.validate((valid) => {
+      if (valid) {
+        loading.value = true;
+        const id = formData.id;
+        if (id) {
+          ConfigAPI.update(id, formData)
+            .then(() => {
+              ElMessage.success("修改成功");
+              closeDialog();
+              handleResetQuery();
+            })
+            .finally(() => (loading.value = false));
+        } else {
+          ConfigAPI.create(formData)
+            .then(() => {
+              ElMessage.success("新增成功");
+              closeDialog();
+              handleResetQuery();
+            })
+            .finally(() => (loading.value = false));
+        }
+      }
     });
-  } else {
-    dialogState.title = "新增系统配置";
+  }
+
+  /**
+   * 关闭弹窗
+   */
+  function closeDialog(): void {
+    dialogState.visible = false;
+    dataFormRef.value?.resetFields();
+    dataFormRef.value?.clearValidate();
     formData.id = undefined;
   }
-}
 
-/**
- * 刷新缓存
- */
-const refreshCache = useDebounceFn(() => {
-  ConfigAPI.refreshCache().then(() => {
-    ElMessage.success("刷新成功");
-  });
-}, 1000);
-
-/**
- * 提交表单
- */
-function handleSubmit(): void {
-  dataFormRef.value?.validate((valid) => {
-    if (valid) {
+  /**
+   * 删除配置
+   * @param id 配置ID
+   */
+  function handleDelete(id: string): void {
+    ElMessageBox.confirm("确认删除该项配置?", "警告", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    }).then(() => {
       loading.value = true;
-      const id = formData.id;
-      if (id) {
-        ConfigAPI.update(id, formData)
-          .then(() => {
-            ElMessage.success("修改成功");
-            closeDialog();
-            handleResetQuery();
-          })
-          .finally(() => (loading.value = false));
-      } else {
-        ConfigAPI.create(formData)
-          .then(() => {
-            ElMessage.success("新增成功");
-            closeDialog();
-            handleResetQuery();
-          })
-          .finally(() => (loading.value = false));
-      }
-    }
+      ConfigAPI.deleteById(id)
+        .then(() => {
+          ElMessage.success("删除成功");
+          handleResetQuery();
+        })
+        .finally(() => (loading.value = false));
+    });
+  }
+
+  onMounted(() => {
+    handleQuery();
   });
-}
-
-/**
- * 关闭弹窗
- */
-function closeDialog(): void {
-  dialogState.visible = false;
-  dataFormRef.value?.resetFields();
-  dataFormRef.value?.clearValidate();
-  formData.id = undefined;
-}
-
-/**
- * 删除配置
- * @param id 配置ID
- */
-function handleDelete(id: string): void {
-  ElMessageBox.confirm("确认删除该项配置?", "警告", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    type: "warning",
-  }).then(() => {
-    loading.value = true;
-    ConfigAPI.deleteById(id)
-      .then(() => {
-        ElMessage.success("删除成功");
-        handleResetQuery();
-      })
-      .finally(() => (loading.value = false));
-  });
-}
-
-onMounted(() => {
-  handleQuery();
-});
 </script>
diff --git a/src/views/system/dict/dict-item.vue b/src/views/system/dict/dict-item.vue
index 2a4d063b..3894dd6b 100644
--- a/src/views/system/dict/dict-item.vue
+++ b/src/views/system/dict/dict-item.vue
@@ -1,14 +1,9 @@
 <template>
   <div class="page-container">
     <el-card class="page-search" shadow="never">
-      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+      <el-form ref="queryFormRef" :model="tableData.params" :inline="true">
         <el-form-item label="关键字" prop="keywords">
-          <el-input
-            v-model="queryParams.keywords"
-            placeholder="字典标签/字典值"
-            clearable
-            @keyup.enter="handleQuery"
-          />
+          <el-input v-model="tableData.params.keywords" placeholder="字典标签/字典值" clearable @keyup.enter="handleQuery" />
         </el-form-item>
 
         <el-form-item>
@@ -22,24 +17,13 @@
       <div class="page-toolbar">
         <div class="page-toolbar__left">
           <el-button type="success" icon="plus" @click="openDialog()">新增</el-button>
-          <el-button
-            type="danger"
-            :disabled="ids.length === 0"
-            icon="delete"
-            @click="handleDelete()"
-          >
+          <el-button type="danger" :disabled="ids.length === 0" icon="delete" @click="handleDelete()">
             删除
           </el-button>
         </div>
       </div>
 
-      <el-table
-        v-loading="loading"
-        highlight-current-row
-        :data="tableData"
-        border
-        @selection-change="handleSelectionChange"
-      >
+      <el-table v-loading="loading" highlight-current-row :data="tableData.list" border @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="字典项标签" prop="label" />
         <el-table-column label="字典项值" prop="value" />
@@ -54,43 +38,21 @@
 
         <el-table-column fixed="right" label="操作" align="center" width="220">
           <template #default="scope">
-            <el-button
-              type="primary"
-              link
-              size="small"
-              icon="edit"
-              @click.stop="openDialog(scope.row)"
-            >
+            <el-button type="primary" link size="small" icon="edit" @click.stop="openDialog(scope.row)">
               编辑
             </el-button>
-            <el-button
-              type="danger"
-              link
-              size="small"
-              icon="delete"
-              @click.stop="handleDelete(scope.row.id)"
-            >
+            <el-button type="danger" link size="small" icon="delete" @click.stop="handleDelete(scope.row.id)">
               删除
             </el-button>
           </template>
         </el-table-column>
       </el-table>
 
-      <pagination
-        v-if="total > 0"
-        v-model:total="total"
-        v-model:page="queryParams.pageNum"
-        v-model:limit="queryParams.pageSize"
-        @pagination="fetchData"
-      />
+      <pagination v-if="tableData.total > 0" v-model:total="tableData.total" v-model:page="tableData.params.pageNum"
+        v-model:limit="tableData.params.pageSize" @pagination="fetchData" />
     </el-card>
 
-    <el-dialog
-      v-model="dialogState.visible"
-      :title="dialogState.title"
-      width="600px"
-      @close="closeDialog"
-    >
+    <el-dialog v-model="dialogState.visible" :title="dialogState.title" width="600px" @close="closeDialog">
       <el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="100px">
         <el-form-item label="字典项标签" prop="label">
           <el-input v-model="formData.label" placeholder="请输入字典标签" />
@@ -119,12 +81,7 @@
               </el-tooltip>
             </div>
           </template>
-          <el-select
-            v-model="formData.tagType"
-            placeholder="请选择标签类型"
-            clearable
-            @clear="formData.tagType = ''"
-          >
+          <el-select v-model="formData.tagType" placeholder="请选择标签类型" clearable @clear="formData.tagType = ''">
             <template #label="{ value }">
               <el-tag v-if="value" :type="value">
                 {{ formData.label ? formData.label : "字典标签" }}
@@ -152,188 +109,191 @@
 </template>
 
 <script setup lang="ts">
-import DictAPI from "@/api/system/dict";
-import type { DictItemQueryParams, DictItem, DictItemForm } from "@/api/system/dict";
-import type { FormInstance, FormRules } from "element-plus";
+  import DictAPI from "@/api/system/dict";
+  import type { DictItem, DictItemForm } from "@/api/system/dict";
+  import type { FormInstance, FormRules } from "element-plus";
 
-const route = useRoute();
+  const route = useRoute();
 
-// 字典编码
-const dictCode = ref(route.query.dictCode as string);
+  // 字典编码
+  const dictCode = ref(route.query.dictCode as string);
 
-// 表单引用
-const queryFormRef = ref<FormInstance>();
-const dataFormRef = ref<FormInstance>();
+  // 表单引用
+  const queryFormRef = ref<FormInstance>();
+  const dataFormRef = ref<FormInstance>();
 
-// 查询参数
-const queryParams = reactive<DictItemQueryParams>({
-  pageNum: 1,
-  pageSize: 10,
-});
+  // 列表数据
+  const loading = ref(false);
+  const ids = ref<string[]>([]);
 
-// 列表数据
-const tableData = ref<DictItem[]>();
-const total = ref(0);
-const loading = ref(false);
-const ids = ref<string[]>([]);
-
-// 弹窗状态
-const dialogState = reactive({
-  title: "",
-  visible: false,
-});
-
-// 表单数据
-const formData = reactive<DictItemForm>({
-  sort: 1,
-  status: 1,
-  tagType: "",
-});
-
-// 标签类型选项
-const tagType = ["primary", "success", "info", "warning", "danger"] as const;
-
-// 验证规则
-const rules: FormRules = {
-  value: [{ required: true, message: "请输入字典值", trigger: "blur" }],
-  label: [{ required: true, message: "请输入字典标签", trigger: "blur" }],
-};
-
-/**
- * 加载字典项列表数据
- */
-function fetchData(): void {
-  loading.value = true;
-  DictAPI.getDictItemPage(dictCode.value, queryParams)
-    .then((data) => {
-      tableData.value = data.list;
-      total.value = data.total ?? 0;
-    })
-    .finally(() => {
-      loading.value = false;
-    });
-}
-
-/**
- * 查询按钮点击事件
- */
-function handleQuery(): void {
-  queryParams.pageNum = 1;
-  fetchData();
-}
-
-/**
- * 重置查询
- */
-function handleResetQuery(): void {
-  queryFormRef.value?.resetFields();
-  queryParams.pageNum = 1;
-  fetchData();
-}
-
-/**
- * 表格选择变化事件
- */
-function handleSelectionChange(selection: DictItem[]): void {
-  ids.value = selection.map((item) => item.id);
-}
-
-/**
- * 打开弹窗
- * @param row 字典项数据（编辑时传入）
- */
-function openDialog(row?: DictItem): void {
-  resetForm();
-  dialogState.visible = true;
-  dialogState.title = row ? "编辑字典值" : "新增字典项";
-
-  if (row?.id) {
-    DictAPI.getDictItemFormData(dictCode.value, row.id).then((data) => {
-      Object.assign(formData, data);
-    });
-  }
-}
-
-function resetForm(): void {
-  dataFormRef.value?.clearValidate();
-  formData.id = undefined;
-  formData.dictCode = dictCode.value;
-  formData.label = undefined;
-  formData.value = undefined;
-  formData.sort = 1;
-  formData.status = 1;
-  formData.tagType = "";
-}
-
-/**
- * 提交表单
- */
-function handleSubmit(): void {
-  dataFormRef.value?.validate((isValid) => {
-    if (isValid) {
-      loading.value = true;
-      const id = formData.id;
-
-      formData.dictCode = dictCode.value;
-      if (id) {
-        DictAPI.updateDictItem(dictCode.value, id, formData)
-          .then(() => {
-            ElMessage.success("修改成功");
-            closeDialog();
-            handleQuery();
-          })
-          .finally(() => (loading.value = false));
-      } else {
-        DictAPI.createDictItem(dictCode.value, formData)
-          .then(() => {
-            ElMessage.success("新增成功");
-            closeDialog();
-            handleQuery();
-          })
-          .finally(() => (loading.value = false));
-      }
-    }
-  });
-}
-
-/**
- * 关闭弹窗
- */
-function closeDialog(): void {
-  dialogState.visible = false;
-  dataFormRef.value?.resetFields();
-  resetForm();
-}
-
-/**
- * 删除字典项
- * @param id 字典项ID
- */
-function handleDelete(id?: number): void {
-  const itemIds = [id || ids.value].join(",");
-
-  if (!itemIds) {
-    ElMessage.warning("请勾选删除项");
-    return;
-  }
-  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    type: "warning",
-  }).then(
-    () => {
-      DictAPI.deleteDictItems(dictCode.value, itemIds).then(() => {
-        ElMessage.success("删除成功");
-        handleResetQuery();
-      });
+  const tableData = reactive<PageResult<DictItem>>({
+    list: [],
+    total: 0,
+    params: { //查询参数
+      pageNum: 1,
+      pageSize: 10,
+      dictCode: undefined,
+      keywords: undefined,
     },
-    () => {
-      ElMessage.info("已取消删除");
-    }
-  );
-}
+  });
 
-onMounted(() => {
-  handleQuery();
-});
+  // 弹窗状态
+  const dialogState = reactive({
+    title: "",
+    visible: false,
+  });
+
+  // 表单数据
+  const formData = reactive<DictItemForm>({
+    sort: 1,
+    status: 1,
+    tagType: "",
+  });
+
+  // 标签类型选项
+  const tagType = ["primary", "success", "info", "warning", "danger"] as const;
+
+  // 验证规则
+  const rules: FormRules = {
+    value: [{ required: true, message: "请输入字典值", trigger: "blur" }],
+    label: [{ required: true, message: "请输入字典标签", trigger: "blur" }],
+  };
+
+  /**
+   * 加载字典项列表数据
+   */
+  function fetchData(): void {
+    loading.value = true;
+    DictAPI.getDictItemPage(dictCode.value, tableData.params)
+      .then((data: any) => {
+        tableData.list = data.list;
+        tableData.total = data.total ?? 0;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  }
+
+  /**
+   * 查询按钮点击事件
+   */
+  function handleQuery(): void {
+    tableData.params.pageNum = 1;
+    fetchData();
+  }
+
+  /**
+   * 重置查询
+   */
+  function handleResetQuery(): void {
+    queryFormRef.value?.resetFields();
+    tableData.params.pageNum = 1;
+    fetchData();
+  }
+
+  /**
+   * 表格选择变化事件
+   */
+  function handleSelectionChange(selection: DictItem[]): void {
+    ids.value = selection.map((item) => item.id);
+  }
+
+  /**
+   * 打开弹窗
+   * @param row 字典项数据（编辑时传入）
+   */
+  function openDialog(row?: DictItem): void {
+    resetForm();
+    dialogState.visible = true;
+    dialogState.title = row ? "编辑字典值" : "新增字典项";
+
+    if (row?.id) {
+      DictAPI.getDictItemFormData(dictCode.value, row.id).then((data) => {
+        Object.assign(formData, data);
+      });
+    }
+  }
+
+  function resetForm(): void {
+    dataFormRef.value?.clearValidate();
+    formData.id = undefined;
+    formData.dictCode = dictCode.value;
+    formData.label = undefined;
+    formData.value = undefined;
+    formData.sort = 1;
+    formData.status = 1;
+    formData.tagType = "";
+  }
+
+  /**
+   * 提交表单
+   */
+  function handleSubmit(): void {
+    dataFormRef.value?.validate((isValid) => {
+      if (isValid) {
+        loading.value = true;
+        const id = formData.id;
+
+        formData.dictCode = dictCode.value;
+        if (id) {
+          DictAPI.updateDictItem(dictCode.value, id, formData)
+            .then(() => {
+              ElMessage.success("修改成功");
+              closeDialog();
+              handleQuery();
+            })
+            .finally(() => (loading.value = false));
+        } else {
+          DictAPI.createDictItem(dictCode.value, formData)
+            .then(() => {
+              ElMessage.success("新增成功");
+              closeDialog();
+              handleQuery();
+            })
+            .finally(() => (loading.value = false));
+        }
+      }
+    });
+  }
+
+  /**
+   * 关闭弹窗
+   */
+  function closeDialog(): void {
+    dialogState.visible = false;
+    dataFormRef.value?.resetFields();
+    resetForm();
+  }
+
+  /**
+   * 删除字典项
+   * @param id 字典项ID
+   */
+  function handleDelete(id?: number): void {
+    const itemIds = [id || ids.value].join(",");
+
+    if (!itemIds) {
+      ElMessage.warning("请勾选删除项");
+      return;
+    }
+    ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    }).then(
+      () => {
+        DictAPI.deleteDictItems(dictCode.value, itemIds).then(() => {
+          ElMessage.success("删除成功");
+          handleResetQuery();
+        });
+      },
+      () => {
+        ElMessage.info("已取消删除");
+      }
+    );
+  }
+
+  onMounted(() => {
+    handleQuery();
+  });
 </script>
diff --git a/src/views/system/dict/index.vue b/src/views/system/dict/index.vue
index a551d537..2d640c81 100644
--- a/src/views/system/dict/index.vue
+++ b/src/views/system/dict/index.vue
@@ -1,14 +1,9 @@
 <template>
   <div class="page-container">
     <el-card class="page-search" shadow="never">
-      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+      <el-form ref="queryFormRef" :model="tableData.params" :inline="true">
         <el-form-item label="关键字" prop="keywords">
-          <el-input
-            v-model="queryParams.keywords"
-            placeholder="字典名称/编码"
-            clearable
-            @keyup.enter="handleQuery"
-          />
+          <el-input v-model="tableData.params.keywords" placeholder="字典名称/编码" clearable @keyup.enter="handleQuery" />
         </el-form-item>
 
         <el-form-item>
@@ -22,24 +17,13 @@
       <div class="page-toolbar">
         <div class="page-toolbar__left">
           <el-button type="success" icon="plus" @click="handleCreateClick()">新增</el-button>
-          <el-button
-            type="danger"
-            :disabled="ids.length === 0"
-            icon="delete"
-            @click="handleDelete()"
-          >
+          <el-button type="danger" :disabled="ids.length === 0" icon="delete" @click="handleDelete()">
             删除
           </el-button>
         </div>
       </div>
 
-      <el-table
-        v-loading="loading"
-        highlight-current-row
-        :data="tableData"
-        border
-        @selection-change="handleSelectionChange"
-      >
+      <el-table v-loading="loading" highlight-current-row :data="tableData.list" border @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="字典名称" prop="name" />
         <el-table-column label="字典编码" prop="dictCode" />
@@ -59,43 +43,22 @@
               字典数据
             </el-button>
 
-            <el-button
-              type="primary"
-              link
-              size="small"
-              icon="edit"
-              @click.stop="handleEditClick(scope.row.id)"
-            >
+            <el-button type="primary" link size="small" icon="edit" @click.stop="handleEditClick(scope.row.id)">
               编辑
             </el-button>
-            <el-button
-              type="danger"
-              link
-              size="small"
-              icon="delete"
-              @click.stop="handleDelete(scope.row.id)"
-            >
+            <el-button type="danger" link size="small" icon="delete" @click.stop="handleDelete(scope.row.id)">
               删除
             </el-button>
           </template>
         </el-table-column>
       </el-table>
 
-      <pagination
-        v-if="total > 0"
-        v-model:total="total"
-        v-model:page="queryParams.pageNum"
-        v-model:limit="queryParams.pageSize"
-        @pagination="fetchData"
-      />
+      <pagination v-if="tableData.total > 0" v-model:total="tableData.total" v-model:page="tableData.params.pageNum"
+        v-model:limit="tableData.params.pageSize"
+        @pagination="fetchData" />
     </el-card>
 
-    <el-dialog
-      v-model="dialogState.visible"
-      :title="dialogState.title"
-      width="500px"
-      @close="closeDialog"
-    >
+    <el-dialog v-model="dialogState.visible" :title="dialogState.title" width="500px" @close="closeDialog">
       <el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="80px">
         <el-form-item label="字典名称" prop="name">
           <el-input v-model="formData.name" placeholder="请输入字典名称" />
@@ -128,206 +91,206 @@
 </template>
 
 <script setup lang="ts">
-defineOptions({
-  name: "Dict",
-  inheritAttrs: false,
-});
-
-import DictAPI from "@/api/system/dict";
-import type { DictTypeQueryParams, DictTypeItem, DictTypeForm } from "@/api/system/dict";
-import type { FormInstance, FormRules } from "element-plus";
-import router from "@/router";
-
-// 表单引用
-const queryFormRef = ref<FormInstance>();
-const dataFormRef = ref<FormInstance>();
-
-// 查询参数
-const queryParams = reactive<DictTypeQueryParams>({
-  pageNum: 1,
-  pageSize: 10,
-});
-
-// 列表数据
-const tableData = ref<DictTypeItem[]>();
-const total = ref(0);
-const loading = ref(false);
-const ids = ref<string[]>([]);
-
-// 弹窗状态
-const dialogState = reactive({
-  title: "",
-  visible: false,
-});
-
-// 表单数据
-const formData = reactive<DictTypeForm>({
-  status: 1,
-});
-
-// 验证规则
-const rules: FormRules = {
-  name: [{ required: true, message: "请输入字典名称", trigger: "blur" }],
-  dictCode: [{ required: true, message: "请输入字典编码", trigger: "blur" }],
-};
-
-/**
- * 加载字典列表数据
- */
-function fetchData(): void {
-  loading.value = true;
-  DictAPI.getPage(queryParams)
-    .then((data) => {
-      tableData.value = data.list;
-      total.value = data.total ?? 0;
-    })
-    .finally(() => {
-      loading.value = false;
-    });
-}
-
-/**
- * 查询按钮点击事件
- */
-function handleQuery(): void {
-  queryParams.pageNum = 1;
-  fetchData();
-}
-
-/**
- * 重置查询
- */
-function handleResetQuery(): void {
-  queryFormRef.value?.resetFields();
-  queryParams.pageNum = 1;
-  fetchData();
-}
-
-/**
- * 表格选择变化事件
- */
-function handleSelectionChange(selection: DictTypeItem[]): void {
-  ids.value = selection.map((item) => item.id);
-}
-
-/**
- * 新增按钮点击事件
- */
-function handleCreateClick(): void {
-  resetForm();
-  dialogState.visible = true;
-  dialogState.title = "新增字典";
-}
-
-/**
- * 编辑按钮点击事件
- * @param id 字典ID
- */
-function handleEditClick(id: string): void {
-  resetForm();
-  dialogState.visible = true;
-  dialogState.title = "修改字典";
-  DictAPI.getFormData(id).then((data) => {
-    Object.assign(formData, data);
+  defineOptions({
+    name: "Dict",
+    inheritAttrs: false,
   });
-}
 
-function resetForm(): void {
-  dataFormRef.value?.clearValidate();
-  formData.id = undefined;
-  formData.name = undefined;
-  formData.dictCode = undefined;
-  formData.status = 1;
-  formData.remark = undefined;
-}
+  import DictAPI from "@/api/system/dict";
+  import type { DictTypeItem, DictTypeForm } from "@/api/system/dict";
+  import type { FormInstance, FormRules } from "element-plus";
+  import router from "@/router";
 
-/**
- * 提交表单
- */
-function handleSubmit(): void {
-  dataFormRef.value?.validate((isValid) => {
-    if (isValid) {
-      loading.value = true;
-      const id = formData.id;
-      if (id) {
-        DictAPI.update(id, formData)
-          .then(() => {
-            ElMessage.success("修改成功");
-            closeDialog();
-            handleQuery();
-          })
-          .finally(() => (loading.value = false));
-      } else {
-        DictAPI.create(formData)
-          .then(() => {
-            ElMessage.success("新增成功");
-            closeDialog();
-            handleQuery();
-          })
-          .finally(() => (loading.value = false));
-      }
-    }
-  });
-}
+  // 表单引用
+  const queryFormRef = ref<FormInstance>();
+  const dataFormRef = ref<FormInstance>();
 
-/**
- * 关闭弹窗
- */
-function closeDialog(): void {
-  dialogState.visible = false;
-  dataFormRef.value?.resetFields();
-  resetForm();
-}
-
-/**
- * 删除字典
- * @param id 字典ID
- */
-function handleDelete(id?: number): void {
-  const attrGroupIds = [id || ids.value].join(",");
-  if (!attrGroupIds) {
-    ElMessage.warning("请勾选删除项");
-    return;
-  }
-  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    type: "warning",
-  }).then(
-    () => {
-      DictAPI.deleteByIds(attrGroupIds).then(() => {
-        ElMessage.success("删除成功");
-        handleResetQuery();
-      });
+  // 列表数据
+  const loading = ref(false);
+  const ids = ref<string[]>([]);
+  const tableData = reactive<PageResult<DictTypeItem>>({
+    list: [],
+    total: 0,
+    params: { //查询参数
+      pageNum: 1,
+      pageSize: 10,
     },
-    () => {
-      ElMessage.info("已取消删除");
-    }
-  );
-}
+  });
 
-/**
- * 打开字典数据页面
- * @param row 字典数据
- */
-function openDictData(row: DictTypeItem): void {
-  try {
-    const route = router.resolve({
-      name: "DictItem",
-      query: { dictCode: row.dictCode, title: `【${row.name}】字典数据` },
+  // 弹窗状态
+  const dialogState = reactive({
+    title: "",
+    visible: false,
+  });
+
+  // 表单数据
+  const formData = reactive<DictTypeForm>({
+    status: 1,
+  });
+
+  // 验证规则
+  const rules: FormRules = {
+    name: [{ required: true, message: "请输入字典名称", trigger: "blur" }],
+    dictCode: [{ required: true, message: "请输入字典编码", trigger: "blur" }],
+  };
+
+  /**
+   * 加载字典列表数据
+   */
+  function fetchData(): void {
+    loading.value = true;
+    DictAPI.getPage(tableData.params)
+      .then((data) => {
+        tableData.list = data.list ?? []
+        tableData.total = data.total ?? 0;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  }
+
+  /**
+   * 查询按钮点击事件
+   */
+  function handleQuery(): void {
+    tableData.params.pageNum = 1;
+    fetchData();
+  }
+
+  /**
+   * 重置查询
+   */
+  function handleResetQuery(): void {
+    queryFormRef.value?.resetFields();
+    tableData.params.pageNum = 1;
+    fetchData();
+  }
+
+  /**
+   * 表格选择变化事件
+   */
+  function handleSelectionChange(selection: DictTypeItem[]): void {
+    ids.value = selection.map((item) => item.id);
+  }
+
+  /**
+   * 新增按钮点击事件
+   */
+  function handleCreateClick(): void {
+    resetForm();
+    dialogState.visible = true;
+    dialogState.title = "新增字典";
+  }
+
+  /**
+   * 编辑按钮点击事件
+   * @param id 字典ID
+   */
+  function handleEditClick(id: string): void {
+    resetForm();
+    dialogState.visible = true;
+    dialogState.title = "修改字典";
+    DictAPI.getFormData(id).then((data) => {
+      Object.assign(formData, data);
     });
-    if (route.matched.length === 0) {
-      ElMessage.error("路由未注册，请刷新页面后重试");
+  }
+
+  function resetForm(): void {
+    dataFormRef.value?.clearValidate();
+    formData.id = undefined;
+    formData.name = undefined;
+    formData.dictCode = undefined;
+    formData.status = 1;
+    formData.remark = undefined;
+  }
+
+  /**
+   * 提交表单
+   */
+  function handleSubmit(): void {
+    dataFormRef.value?.validate((isValid) => {
+      if (isValid) {
+        loading.value = true;
+        const id = formData.id;
+        if (id) {
+          DictAPI.update(id, formData)
+            .then(() => {
+              ElMessage.success("修改成功");
+              closeDialog();
+              handleQuery();
+            })
+            .finally(() => (loading.value = false));
+        } else {
+          DictAPI.create(formData)
+            .then(() => {
+              ElMessage.success("新增成功");
+              closeDialog();
+              handleQuery();
+            })
+            .finally(() => (loading.value = false));
+        }
+      }
+    });
+  }
+
+  /**
+   * 关闭弹窗
+   */
+  function closeDialog(): void {
+    dialogState.visible = false;
+    dataFormRef.value?.resetFields();
+    resetForm();
+  }
+
+  /**
+   * 删除字典
+   * @param id 字典ID
+   */
+  function handleDelete(id?: number): void {
+    const attrGroupIds = [id || ids.value].join(",");
+    if (!attrGroupIds) {
+      ElMessage.warning("请勾选删除项");
       return;
     }
-    router.push(route);
-  } catch (error) {
-    console.error("路由跳转失败:", error);
-    ElMessage.error("页面跳转失败，请刷新页面后重试");
+    ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    }).then(
+      () => {
+        DictAPI.deleteByIds(attrGroupIds).then(() => {
+          ElMessage.success("删除成功");
+          handleResetQuery();
+        });
+      },
+      () => {
+        ElMessage.info("已取消删除");
+      }
+    );
   }
-}
 
-onMounted(() => {
-  handleQuery();
-});
+  /**
+   * 打开字典数据页面
+   * @param row 字典数据
+   */
+  function openDictData(row: DictTypeItem): void {
+    try {
+      const route = router.resolve({
+        name: "DictItem",
+        query: { dictCode: row.dictCode, title: `【${row.name}】字典数据` },
+      });
+      if (route.matched.length === 0) {
+        ElMessage.error("路由未注册，请刷新页面后重试");
+        return;
+      }
+      router.push(route);
+    } catch (error) {
+      console.error("路由跳转失败:", error);
+      ElMessage.error("页面跳转失败，请刷新页面后重试");
+    }
+  }
+
+  onMounted(() => {
+    handleQuery();
+  });
 </script>
diff --git a/src/views/system/log/index.vue b/src/views/system/log/index.vue
index 38042336..7bcaf5c0 100644
--- a/src/views/system/log/index.vue
+++ b/src/views/system/log/index.vue
@@ -1,27 +1,14 @@
 <template>
   <div class="page-container">
     <el-card class="page-search" shadow="never">
-      <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="auto">
+      <el-form ref="queryFormRef" :model="tableData.params" :inline="true" label-width="auto">
         <el-form-item prop="keywords" label="关键字">
-          <el-input
-            v-model="queryParams.keywords"
-            placeholder="IP/操作人"
-            clearable
-            @keyup.enter="handleQuery"
-          />
+          <el-input v-model="tableData.params.keywords" placeholder="IP/操作人" clearable @keyup.enter="handleQuery" />
         </el-form-item>
 
         <el-form-item prop="createTime" label="操作时间">
-          <el-date-picker
-            v-model="queryParams.createTime"
-            :editable="false"
-            type="daterange"
-            range-separator="~"
-            start-placeholder="开始时间"
-            end-placeholder="截止时间"
-            value-format="YYYY-MM-DD"
-            style="width: 260px"
-          />
+          <el-date-picker v-model="tableData.params.createTime" :editable="false" type="daterange" range-separator="~" start-placeholder="开始时间"
+            end-placeholder="截止时间" value-format="YYYY-MM-DD" style="width: 260px" />
         </el-form-item>
 
         <el-form-item>
@@ -32,7 +19,7 @@
     </el-card>
 
     <el-card class="page-content" shadow="never">
-      <el-table v-loading="loading" :data="pageData" highlight-current-row border>
+      <el-table v-loading="loading" :data="tableData.list" highlight-current-row border>
         <el-table-column label="操作标题" prop="title" min-width="180" show-overflow-tooltip />
         <el-table-column label="状态" prop="status" width="80" align="center">
           <template #default="{ row }">
@@ -60,13 +47,8 @@
         </el-table-column>
       </el-table>
 
-      <pagination
-        v-if="total > 0"
-        v-model:total="total"
-        v-model:page="queryParams.pageNum"
-        v-model:limit="queryParams.pageSize"
-        @pagination="fetchData"
-      />
+      <pagination v-if="tableData.total > 0" v-model:total="tableData.total" v-model:page="tableData.params.pageNum"
+        v-model:limit="tableData.params.pageSize" @pagination="fetchData" />
     </el-card>
 
     <!-- 详情弹窗 -->
@@ -105,76 +87,75 @@
 </template>
 
 <script setup lang="ts">
-defineOptions({
-  name: "Log",
-  inheritAttrs: false,
-});
+  defineOptions({
+    name: "Log",
+    inheritAttrs: false,
+  });
 
-import LogAPI from "@/api/system/log";
-import type { LogItem, LogQueryParams } from "@/api/system/log";
-import type { FormInstance, TagProps } from "element-plus";
+  import LogAPI from "@/api/system/log";
+  import type { LogItem } from "@/api/system/log";
+  import type { FormInstance, TagProps } from "element-plus";
 
-function getMethodTagType(method: string): TagProps["type"] {
-  const map: Record<string, TagProps["type"]> = {
-    GET: undefined,
-    POST: "success",
-    PUT: "warning",
-    DELETE: "danger",
-    PATCH: "info",
-  };
-  return map[method?.toUpperCase()] ?? "info";
-}
+  function getMethodTagType(method: string): TagProps["type"] {
+    const map: Record<string, TagProps["type"]> = {
+      GET: undefined,
+      POST: "success",
+      PUT: "warning",
+      DELETE: "danger",
+      PATCH: "info",
+    };
+    return map[method?.toUpperCase()] ?? "info";
+  }
 
-// 表单引用
-const queryFormRef = ref<FormInstance>();
+  // 表单引用
+  const queryFormRef = ref<FormInstance>();
 
-// 查询参数
-const queryParams = reactive<LogQueryParams>({
-  pageNum: 1,
-  pageSize: 10,
-  keywords: "",
-  createTime: undefined as [string, string] | undefined,
-});
+  const loading = ref(false);
 
-// 列表数据
-const pageData = ref<LogItem[]>();
-const total = ref(0);
-const loading = ref(false);
+  const tableData = reactive<PageResult<LogItem>>({
+    list: [],
+    total: 0,
+    params: { //查询参数
+      pageNum: 1,
+      pageSize: 10,
+      keywords: "",
+      createTime: undefined as [string, string] | undefined,
+    },
+  });
+  // 详情弹窗
+  const detailVisible = ref(false);
+  const detailData = ref<Partial<LogItem>>({});
 
-// 详情弹窗
-const detailVisible = ref(false);
-const detailData = ref<Partial<LogItem>>({});
+  function fetchData(): void {
+    loading.value = true;
+    LogAPI.getPage(tableData.params)
+      .then((data) => {
+        tableData.list = data.list ?? [];
+        tableData.total = data.total ?? 0;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  }
 
-function fetchData(): void {
-  loading.value = true;
-  LogAPI.getPage(queryParams)
-    .then((data) => {
-      pageData.value = data.list;
-      total.value = data.total ?? 0;
-    })
-    .finally(() => {
-      loading.value = false;
-    });
-}
+  function handleQuery(): void {
+    tableData.params.pageNum = 1;
+    fetchData();
+  }
 
-function handleQuery(): void {
-  queryParams.pageNum = 1;
-  fetchData();
-}
+  function handleResetQuery(): void {
+    queryFormRef.value?.resetFields();
+    tableData.params.pageNum = 1;
+    tableData.params.createTime = undefined;
+    fetchData();
+  }
 
-function handleResetQuery(): void {
-  queryFormRef.value?.resetFields();
-  queryParams.pageNum = 1;
-  queryParams.createTime = undefined;
-  fetchData();
-}
+  function handleDetail(row: LogItem): void {
+    detailData.value = row;
+    detailVisible.value = true;
+  }
 
-function handleDetail(row: LogItem): void {
-  detailData.value = row;
-  detailVisible.value = true;
-}
-
-onMounted(() => {
-  handleQuery();
-});
+  onMounted(() => {
+    handleQuery();
+  });
 </script>
diff --git a/src/views/system/notice/index.vue b/src/views/system/notice/index.vue
index 0e6ba898..413c9145 100644
--- a/src/views/system/notice/index.vue
+++ b/src/views/system/notice/index.vue
@@ -1,23 +1,13 @@
 <template>
   <div class="page-container">
     <el-card class="page-search" shadow="never">
-      <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-suffix=":">
+      <el-form ref="queryFormRef" :model="tableData.params" :inline="true" label-suffix=":">
         <el-form-item label="标题" prop="title">
-          <el-input
-            v-model="queryParams.title"
-            placeholder="标题"
-            clearable
-            @keyup.enter="handleQuery()"
-          />
+          <el-input v-model="tableData.params.title" placeholder="标题" clearable @keyup.enter="handleQuery()" />
         </el-form-item>
 
         <el-form-item label="发布状态" prop="publishStatus">
-          <el-select
-            v-model="queryParams.publishStatus"
-            clearable
-            placeholder="全部"
-            style="width: 100px"
-          >
+          <el-select v-model="tableData.params.publishStatus" clearable placeholder="全部" style="width: 100px">
             <el-option :value="0" label="未发布" />
             <el-option :value="1" label="已发布" />
             <el-option :value="-1" label="已撤回" />
@@ -34,33 +24,16 @@
     <el-card class="page-content" shadow="never">
       <div class="page-toolbar">
         <div class="page-toolbar__left">
-          <el-button
-            v-hasPerm="['sys:notice:create']"
-            type="success"
-            icon="plus"
-            @click="openDialog()"
-          >
+          <el-button v-hasPerm="['sys:notice:create']" type="success" icon="plus" @click="openDialog()">
             新增通知
           </el-button>
-          <el-button
-            v-hasPerm="['sys:notice:delete']"
-            type="danger"
-            :disabled="selectIds.length === 0"
-            icon="delete"
-            @click="handleDelete()"
-          >
+          <el-button v-hasPerm="['sys:notice:delete']" type="danger" :disabled="selectIds.length === 0" icon="delete" @click="handleDelete()">
             删除
           </el-button>
         </div>
       </div>
 
-      <el-table
-        ref="dataTableRef"
-        v-loading="loading"
-        :data="pageData"
-        highlight-current-row
-        @selection-change="handleSelectionChange"
-      >
+      <el-table ref="dataTableRef" v-loading="loading" :data="tableData.list" highlight-current-row @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column type="index" label="序号" width="60" />
         <el-table-column label="通知标题" prop="title" min-width="200" />
@@ -110,68 +83,32 @@
             <el-button type="primary" size="small" link @click="openDetailDialog(scope.row.id)">
               查看
             </el-button>
-            <el-button
-              v-if="scope.row.publishStatus !== 1"
-              v-hasPerm="['sys:notice:publish']"
-              type="primary"
-              size="small"
-              link
-              @click="handlePublish(scope.row.id)"
-            >
+            <el-button v-if="scope.row.publishStatus !== 1" v-hasPerm="['sys:notice:publish']" type="primary" size="small" link
+              @click="handlePublish(scope.row.id)">
               发布
             </el-button>
-            <el-button
-              v-if="scope.row.publishStatus === 1"
-              v-hasPerm="['sys:notice:revoke']"
-              type="primary"
-              size="small"
-              link
-              @click="handleRevoke(scope.row.id)"
-            >
+            <el-button v-if="scope.row.publishStatus === 1" v-hasPerm="['sys:notice:revoke']" type="primary" size="small" link
+              @click="handleRevoke(scope.row.id)">
               撤回
             </el-button>
-            <el-button
-              v-if="scope.row.publishStatus !== 1"
-              v-hasPerm="['sys:notice:update']"
-              type="primary"
-              size="small"
-              link
-              @click="openDialog(scope.row.id)"
-            >
+            <el-button v-if="scope.row.publishStatus !== 1" v-hasPerm="['sys:notice:update']" type="primary" size="small" link
+              @click="openDialog(scope.row.id)">
               编辑
             </el-button>
-            <el-button
-              v-if="scope.row.publishStatus !== 1"
-              v-hasPerm="['sys:notice:delete']"
-              type="danger"
-              size="small"
-              link
-              @click="handleDelete(scope.row.id)"
-            >
+            <el-button v-if="scope.row.publishStatus !== 1" v-hasPerm="['sys:notice:delete']" type="danger" size="small" link
+              @click="handleDelete(scope.row.id)">
               删除
             </el-button>
           </template>
         </el-table-column>
       </el-table>
 
-      <pagination
-        v-if="total > 0"
-        v-model:total="total"
-        v-model:page="queryParams.pageNum"
-        v-model:limit="queryParams.pageSize"
-        @pagination="fetchData()"
-      />
+      <pagination v-if="tableData.total > 0" v-model:total="tableData.total" v-model:page="tableData.params.pageNum"
+        v-model:limit="tableData.params.pageSize" @pagination="fetchData()" />
     </el-card>
 
-    <el-dialog
-      v-model="dialogState.visible"
-      :show-close="false"
-      :fullscreen="dialogState.fullscreen"
-      top="6vh"
-      width="70%"
-      custom-class="notice-dialog"
-      @close="closeDialog"
-    >
+    <el-dialog v-model="dialogState.visible" :show-close="false" :fullscreen="dialogState.fullscreen" top="6vh" width="70%"
+      custom-class="notice-dialog" @close="closeDialog">
       <template #header>
         <div class="flex-x-between">
           <span>{{ dialogState.title }}</span>
@@ -209,12 +146,7 @@
         </el-form-item>
         <el-form-item v-if="formData.targetType === 2" label="指定用户" prop="targetUsers">
           <el-select v-model="formData.targetUsers" multiple search placeholder="请选择指定用户">
-            <el-option
-              v-for="item in userOptions"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
+            <el-option v-for="item in userOptions" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
         </el-form-item>
         <el-form-item label="通知内容" prop="content">
@@ -228,13 +160,7 @@
         </div>
       </template>
     </el-dialog>
-    <el-dialog
-      v-model="detailDialog.visible"
-      :show-close="false"
-      width="50%"
-      append-to-body
-      @close="closeDetailDialog"
-    >
+    <el-dialog v-model="detailDialog.visible" :show-close="false" width="50%" append-to-body @close="closeDetailDialog">
       <template #header>
         <div class="flex-x-between">
           <span>通知公告详情</span>
@@ -271,297 +197,301 @@
 </template>
 
 <script setup lang="ts">
-defineOptions({
-  name: "Notice",
-  inheritAttrs: false,
-});
+  defineOptions({
+    name: "Notice",
+    inheritAttrs: false,
+  });
 
-import NoticeAPI from "@/api/system/notice";
-import type { NoticeItem, NoticeForm, NoticeQueryParams, NoticeDetail } from "@/api/system/notice";
-import UserAPI from "@/api/system/user";
-import type { FormInstance, FormRules } from "element-plus";
+  import NoticeAPI from "@/api/system/notice";
+  import type { NoticeItem, NoticeForm, NoticeDetail } from "@/api/system/notice";
+  import UserAPI from "@/api/system/user";
+  import type { FormInstance, FormRules } from "element-plus";
 
-// 表单引用
-const queryFormRef = ref<FormInstance>();
-const dataFormRef = ref<FormInstance>();
+  // 表单引用
+  const queryFormRef = ref<FormInstance>();
+  const dataFormRef = ref<FormInstance>();
 
-// 查询参数
-const queryParams = reactive<NoticeQueryParams>({
-  pageNum: 1,
-  pageSize: 10,
-});
 
-// 列表数据
-const pageData = ref<NoticeItem[]>([]);
-const userOptions = ref<OptionItem[]>([]);
-const total = ref(0);
-const loading = ref(false);
-const selectIds = ref<number[]>([]);
+  // 列表数据
+  const userOptions = ref<OptionItem[]>([]);
+  const loading = ref(false);
+  const selectIds = ref<number[]>([]);
 
-// 弹窗状态
-const dialogState = reactive({
-  title: "",
-  visible: false,
-  fullscreen: false,
-});
-
-// 表单数据
-const formData = reactive<NoticeForm>({
-  level: "L",
-  targetType: 1,
-});
-
-// 验证规则
-const rules: FormRules = {
-  title: [{ required: true, message: "请输入通知标题", trigger: "blur" }],
-  content: [
-    {
-      required: true,
-      message: "请输入通知内容",
-      trigger: "blur",
-      validator: (rule, value: string, callback) => {
-        if (!value.replace(/<[^>]+>/g, "").trim()) {
-          callback(new Error("请输入通知内容"));
-        } else {
-          callback();
-        }
-      },
+  const tableData = reactive<PageResult<NoticeItem>>({
+    list: [],
+    total: 0,
+    params: { //查询参数
+      pageNum: 1,
+      pageSize: 10,
+      title: "",
+      publishStatus: undefined,
     },
-  ],
-  type: [{ required: true, message: "请选择通知类型", trigger: "change" }],
-};
-
-// 详情弹窗状态
-const detailDialog = reactive({
-  visible: false,
-});
-const currentNotice = ref<NoticeDetail>({});
-
-/**
- * 查询按钮点击事件
- */
-function handleQuery(): void {
-  queryParams.pageNum = 1;
-  fetchData();
-}
-
-/**
- * 加载通知公告列表数据
- */
-function fetchData(): void {
-  loading.value = true;
-  NoticeAPI.getPage(queryParams)
-    .then((data) => {
-      pageData.value = data.list;
-      total.value = data.total ?? 0;
-    })
-    .finally(() => {
-      loading.value = false;
-    });
-}
-
-/**
- * 重置查询
- */
-function handleResetQuery(): void {
-  queryFormRef.value?.resetFields();
-  queryParams.pageNum = 1;
-  fetchData();
-}
-
-/**
- * 表格选择变化事件
- */
-function handleSelectionChange(selection: NoticeItem[]): void {
-  selectIds.value = selection.map((item) => Number(item.id)).filter((id) => Number.isFinite(id));
-}
-
-/**
- * 打开弹窗
- * @param id 通知ID（编辑时传入）
- */
-function openDialog(id?: string): void {
-  dialogState.fullscreen = false;
-  UserAPI.getOptions().then((data) => {
-    userOptions.value = data;
   });
 
-  dialogState.visible = true;
-  if (id) {
-    dialogState.title = "修改公告";
-    NoticeAPI.getFormData(id).then((data) => {
-      Object.assign(formData, {
-        ...data,
-        targetUsers: normalizeTargetUsers(
-          (data as NoticeForm & { targetUserIds?: unknown }).targetUserIds
-        ),
-      });
-    });
-  } else {
-    Object.assign(formData, { level: "L", targetType: 1, targetUsers: [] });
-    dialogState.title = "新增公告";
+  // 弹窗状态
+  const dialogState = reactive({
+    title: "",
+    visible: false,
+    fullscreen: false,
+  });
+
+  // 表单数据
+  const formData = reactive<NoticeForm>({
+    level: "L",
+    targetType: 1,
+  });
+
+  // 验证规则
+  const rules: FormRules = {
+    title: [{ required: true, message: "请输入通知标题", trigger: "blur" }],
+    content: [
+      {
+        required: true,
+        message: "请输入通知内容",
+        trigger: "blur",
+        validator: (rule, value: string, callback) => {
+          if (!value.replace(/<[^>]+>/g, "").trim()) {
+            callback(new Error("请输入通知内容"));
+          } else {
+            callback();
+          }
+        },
+      },
+    ],
+    type: [{ required: true, message: "请选择通知类型", trigger: "change" }],
+  };
+
+  // 详情弹窗状态
+  const detailDialog = reactive({
+    visible: false,
+  });
+  const currentNotice = ref<NoticeDetail>({});
+
+  /**
+   * 查询按钮点击事件
+   */
+  function handleQuery(): void {
+    tableData.params.pageNum = 1;
+    fetchData();
   }
-}
 
-/**
- * 发布通知公告
- * @param id 通知ID
- */
-function handlePublish(id: string): void {
-  NoticeAPI.publish(id).then(() => {
-    ElMessage.success("发布成功");
+  /**
+   * 加载通知公告列表数据
+   */
+  function fetchData(): void {
+    loading.value = true;
+    NoticeAPI.getPage(tableData.params)
+      .then((data) => {
+        tableData.list = data.list ?? [];
+        tableData.total = data.total ?? 0;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  }
+
+  /**
+   * 重置查询
+   */
+  function handleResetQuery(): void {
+    queryFormRef.value?.resetFields();
+    tableData.params.pageNum = 1;
     fetchData();
-  });
-}
+  }
 
-/**
- * 撤回通知公告
- * @param id 通知ID
- */
-function handleRevoke(id: string): void {
-  NoticeAPI.revoke(id).then(() => {
-    ElMessage.success("撤回成功");
-    fetchData();
-  });
-}
+  /**
+   * 表格选择变化事件
+   */
+  function handleSelectionChange(selection: NoticeItem[]): void {
+    selectIds.value = selection.map((item) => Number(item.id)).filter((id) => Number.isFinite(id));
+  }
 
-/**
- * 提交表单
- */
-function handleSubmit(): void {
-  dataFormRef.value?.validate((valid) => {
-    if (valid) {
-      loading.value = true;
-      const payload = {
-        ...formData,
-        targetUserIds: formData.targetType === 2 ? (formData.targetUsers ?? []) : [],
-      } as NoticeForm & { targetUserIds: number[] };
-      delete (payload as NoticeForm).targetUsers;
-      const id = formData.id;
-      if (id) {
-        NoticeAPI.update(id, payload)
-          .then(() => {
-            ElMessage.success("修改成功");
-            closeDialog();
-            handleResetQuery();
-          })
-          .finally(() => (loading.value = false));
-      } else {
-        NoticeAPI.create(payload)
-          .then(() => {
-            ElMessage.success("新增成功");
-            closeDialog();
-            handleResetQuery();
-          })
-          .finally(() => (loading.value = false));
+  /**
+   * 打开弹窗
+   * @param id 通知ID（编辑时传入）
+   */
+  function openDialog(id?: string): void {
+    dialogState.fullscreen = false;
+    UserAPI.getOptions().then((data) => {
+      userOptions.value = data;
+    });
+
+    dialogState.visible = true;
+    if (id) {
+      dialogState.title = "修改公告";
+      NoticeAPI.getFormData(id).then((data) => {
+        Object.assign(formData, {
+          ...data,
+          targetUsers: normalizeTargetUsers(
+            (data as NoticeForm & { targetUserIds?: unknown }).targetUserIds
+          ),
+        });
+      });
+    } else {
+      Object.assign(formData, { level: "L", targetType: 1, targetUsers: [] });
+      dialogState.title = "新增公告";
+    }
+  }
+
+  /**
+   * 发布通知公告
+   * @param id 通知ID
+   */
+  function handlePublish(id: string): void {
+    NoticeAPI.publish(id).then(() => {
+      ElMessage.success("发布成功");
+      fetchData();
+    });
+  }
+
+  /**
+   * 撤回通知公告
+   * @param id 通知ID
+   */
+  function handleRevoke(id: string): void {
+    NoticeAPI.revoke(id).then(() => {
+      ElMessage.success("撤回成功");
+      fetchData();
+    });
+  }
+
+  /**
+   * 提交表单
+   */
+  function handleSubmit(): void {
+    dataFormRef.value?.validate((valid) => {
+      if (valid) {
+        loading.value = true;
+        const payload = {
+          ...formData,
+          targetUserIds: formData.targetType === 2 ? (formData.targetUsers ?? []) : [],
+        } as NoticeForm & { targetUserIds: number[] };
+        delete (payload as NoticeForm).targetUsers;
+        const id = formData.id;
+        if (id) {
+          NoticeAPI.update(id, payload)
+            .then(() => {
+              ElMessage.success("修改成功");
+              closeDialog();
+              handleResetQuery();
+            })
+            .finally(() => (loading.value = false));
+        } else {
+          NoticeAPI.create(payload)
+            .then(() => {
+              ElMessage.success("新增成功");
+              closeDialog();
+              handleResetQuery();
+            })
+            .finally(() => (loading.value = false));
+        }
+      }
+    });
+  }
+
+  /**
+   * 关闭弹窗
+   */
+  function closeDialog(): void {
+    dialogState.visible = false;
+    dialogState.fullscreen = false;
+    dataFormRef.value?.resetFields();
+    dataFormRef.value?.clearValidate();
+    formData.id = undefined;
+    formData.targetType = 1;
+    formData.targetUsers = [];
+    formData.content = "";
+  }
+
+  /**
+   * 标准化目标用户数据
+   */
+  function normalizeTargetUsers(value?: unknown): number[] {
+    if (!value) {
+      return [];
+    }
+    const toNumberArray = (arr: unknown[]): number[] =>
+      arr.map((v) => Number(v)).filter((v) => Number.isFinite(v));
+    if (Array.isArray(value)) {
+      return toNumberArray(value);
+    }
+    if (typeof value === "string") {
+      try {
+        const parsed = JSON.parse(value);
+        if (Array.isArray(parsed)) {
+          return toNumberArray(parsed);
+        }
+        return value
+          .split(",")
+          .filter(Boolean)
+          .map((v) => Number(v))
+          .filter((v) => Number.isFinite(v));
+      } catch {
+        return value
+          .split(",")
+          .filter(Boolean)
+          .map((v) => Number(v))
+          .filter((v) => Number.isFinite(v));
       }
     }
-  });
-}
-
-/**
- * 关闭弹窗
- */
-function closeDialog(): void {
-  dialogState.visible = false;
-  dialogState.fullscreen = false;
-  dataFormRef.value?.resetFields();
-  dataFormRef.value?.clearValidate();
-  formData.id = undefined;
-  formData.targetType = 1;
-  formData.targetUsers = [];
-  formData.content = "";
-}
-
-/**
- * 标准化目标用户数据
- */
-function normalizeTargetUsers(value?: unknown): number[] {
-  if (!value) {
     return [];
   }
-  const toNumberArray = (arr: unknown[]): number[] =>
-    arr.map((v) => Number(v)).filter((v) => Number.isFinite(v));
-  if (Array.isArray(value)) {
-    return toNumberArray(value);
+
+  /**
+   * 弹窗全屏切换
+   */
+  function toggleDialogFullscreen(): void {
+    dialogState.fullscreen = !dialogState.fullscreen;
   }
-  if (typeof value === "string") {
-    try {
-      const parsed = JSON.parse(value);
-      if (Array.isArray(parsed)) {
-        return toNumberArray(parsed);
+
+  /**
+   * 删除通知公告
+   * @param id 通知ID
+   */
+  function handleDelete(id?: number): void {
+    const deleteIds = [id || selectIds.value].join(",");
+    if (!deleteIds) {
+      ElMessage.warning("请勾选删除项");
+      return;
+    }
+
+    ElMessageBox.confirm("确认删除已选中的数据项吗？", "警告", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    }).then(
+      () => {
+        loading.value = true;
+        NoticeAPI.deleteByIds(deleteIds)
+          .then(() => {
+            ElMessage.success("删除成功");
+            handleResetQuery();
+          })
+          .finally(() => (loading.value = false));
+      },
+      () => {
+        ElMessage.info("已取消删除");
       }
-      return value
-        .split(",")
-        .filter(Boolean)
-        .map((v) => Number(v))
-        .filter((v) => Number.isFinite(v));
-    } catch {
-      return value
-        .split(",")
-        .filter(Boolean)
-        .map((v) => Number(v))
-        .filter((v) => Number.isFinite(v));
-    }
-  }
-  return [];
-}
-
-/**
- * 弹窗全屏切换
- */
-function toggleDialogFullscreen(): void {
-  dialogState.fullscreen = !dialogState.fullscreen;
-}
-
-/**
- * 删除通知公告
- * @param id 通知ID
- */
-function handleDelete(id?: number): void {
-  const deleteIds = [id || selectIds.value].join(",");
-  if (!deleteIds) {
-    ElMessage.warning("请勾选删除项");
-    return;
+    );
   }
 
-  ElMessageBox.confirm("确认删除已选中的数据项吗？", "警告", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    type: "warning",
-  }).then(
-    () => {
-      loading.value = true;
-      NoticeAPI.deleteByIds(deleteIds)
-        .then(() => {
-          ElMessage.success("删除成功");
-          handleResetQuery();
-        })
-        .finally(() => (loading.value = false));
-    },
-    () => {
-      ElMessage.info("已取消删除");
-    }
-  );
-}
+  /**
+   * 打开详情弹窗
+   */
+  async function openDetailDialog(id: string): Promise<void> {
+    const noticeDetail = await NoticeAPI.getDetail(id);
+    currentNotice.value = noticeDetail;
+    detailDialog.visible = true;
+  }
 
-/**
- * 打开详情弹窗
- */
-async function openDetailDialog(id: string): Promise<void> {
-  const noticeDetail = await NoticeAPI.getDetail(id);
-  currentNotice.value = noticeDetail;
-  detailDialog.visible = true;
-}
+  /**
+   * 关闭详情弹窗
+   */
+  function closeDetailDialog(): void {
+    detailDialog.visible = false;
+  }
 
-/**
- * 关闭详情弹窗
- */
-function closeDetailDialog(): void {
-  detailDialog.visible = false;
-}
-
-onMounted(() => {
-  handleQuery();
-});
+  onMounted(() => {
+    handleQuery();
+  });
 </script>
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index b32e096b..4ecf2be1 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -2,14 +2,9 @@
   <div class="page-container">
     <!-- 搜索区域 -->
     <el-card class="page-search" shadow="never">
-      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+      <el-form ref="queryFormRef" :model="tableData.params" :inline="true">
         <el-form-item prop="keywords" label="关键字">
-          <el-input
-            v-model="queryParams.keywords"
-            placeholder="角色名称"
-            clearable
-            @keyup.enter="handleQuery"
-          />
+          <el-input v-model="tableData.params.keywords" placeholder="角色名称" clearable @keyup.enter="handleQuery" />
         </el-form-item>
 
         <el-form-item>
@@ -23,25 +18,14 @@
       <div class="page-toolbar">
         <div class="page-toolbar__left">
           <el-button type="success" icon="plus" @click="handleCreateClick()">新增</el-button>
-          <el-button
-            type="danger"
-            :disabled="ids.length === 0"
-            icon="delete"
-            @click="handleBatchDelete()"
-          >
+          <el-button type="danger" :disabled="ids.length === 0" icon="delete" @click="handleBatchDelete()">
             删除
           </el-button>
         </div>
       </div>
 
-      <el-table
-        ref="dataTableRef"
-        v-loading="loading"
-        :data="roleList"
-        highlight-current-row
-        border
-        @selection-change="handleSelectionChange"
-      >
+      <el-table ref="dataTableRef" v-loading="loading" :data="tableData.list" highlight-current-row border
+        @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="角色名称" prop="name" min-width="100" />
         <el-table-column label="角色编码" prop="code" width="150" />
@@ -59,54 +43,25 @@
 
         <el-table-column fixed="right" label="操作" width="220">
           <template #default="scope">
-            <el-button
-              v-hasPerm="'sys:role:assign'"
-              type="primary"
-              size="small"
-              link
-              icon="position"
-              @click="handleAssignPermClick(scope.row)"
-            >
+            <el-button v-hasPerm="'sys:role:assign'" type="primary" size="small" link icon="position" @click="handleAssignPermClick(scope.row)">
               分配权限
             </el-button>
-            <el-button
-              type="primary"
-              size="small"
-              link
-              icon="edit"
-              @click="handleEditClick(scope.row.id)"
-            >
+            <el-button type="primary" size="small" link icon="edit" @click="handleEditClick(scope.row.id)">
               编辑
             </el-button>
-            <el-button
-              type="danger"
-              size="small"
-              link
-              icon="delete"
-              @click="handleDelete(scope.row.id)"
-            >
+            <el-button type="danger" size="small" link icon="delete" @click="handleDelete(scope.row.id)">
               删除
             </el-button>
           </template>
         </el-table-column>
       </el-table>
 
-      <pagination
-        v-if="total > 0"
-        v-model:total="total"
-        v-model:page="queryParams.pageNum"
-        v-model:limit="queryParams.pageSize"
-        @pagination="fetchList"
-      />
+      <pagination v-if="tableData.total > 0" v-model:total="tableData.total" v-model:page="tableData.params.pageNum"
+        v-model:limit="tableData.params.pageSize" @pagination="fetchList" />
     </el-card>
 
     <!-- 角色表单弹窗 -->
-    <el-dialog
-      v-model="dialogState.visible"
-      :title="dialogState.title"
-      width="600px"
-      @close="closeDialog"
-    >
+    <el-dialog v-model="dialogState.visible" :title="dialogState.title" width="600px" @close="closeDialog">
       <el-form ref="roleFormRef" :model="formData" :rules="rules" label-width="100px">
         <el-form-item label="角色名称" prop="name">
           <el-input v-model="formData.name" placeholder="请输入角色名称" />
@@ -128,15 +83,8 @@
 
         <!-- 自定义部门选择 -->
         <el-form-item v-if="formData.dataScope === 5" label="选择部门" prop="deptIds">
-          <el-tree-select
-            v-model="formData.deptIds"
-            :data="deptOptions"
-            multiple
-            :render-after-expand="false"
-            check-strictly
-            placeholder="请选择部门"
-            style="width: 100%"
-          />
+          <el-tree-select v-model="formData.deptIds" :data="deptOptions" multiple :render-after-expand="false" check-strictly
+            placeholder="请选择部门" style="width: 100%" />
         </el-form-item>
 
         <el-form-item label="状态" prop="status">
@@ -147,12 +95,7 @@
         </el-form-item>
 
         <el-form-item label="排序" prop="sort">
-          <el-input-number
-            v-model="formData.sort"
-            controls-position="right"
-            :min="0"
-            style="width: 100px"
-          />
+          <el-input-number v-model="formData.sort" controls-position="right" :min="0" style="width: 100px" />
         </el-form-item>
       </el-form>
       <template #footer>
@@ -164,11 +107,7 @@
     </el-dialog>
 
     <!-- 分配权限弹窗 -->
-    <el-drawer
-      v-model="assignPermDialogVisible"
-      :title="'【' + checkedRole.name + '】权限分配'"
-      :size="drawerSize"
-    >
+    <el-drawer v-model="assignPermDialogVisible" :title="'【' + checkedRole.name + '】权限分配'" :size="drawerSize">
       <div class="flex-x-between">
         <el-input v-model="permKeywords" clearable class="w-[150px]" placeholder="菜单权限名称">
           <template #prefix>
@@ -183,11 +122,7 @@
             </template>
             {{ isExpanded ? "收缩" : "展开" }}
           </el-button>
-          <el-checkbox
-            v-model="parentChildLinked"
-            class="ml-5"
-            @change="handleParentChildLinkedChange"
-          >
+          <el-checkbox v-model="parentChildLinked" class="ml-5" @change="handleParentChildLinkedChange">
             父子联动
           </el-checkbox>
 
@@ -202,16 +137,8 @@
         </div>
       </div>
 
-      <el-tree
-        ref="permTreeRef"
-        node-key="value"
-        show-checkbox
-        :data="menuPermOptions"
-        :filter-node-method="handlePermFilter"
-        :default-expand-all="true"
-        :check-strictly="!parentChildLinked"
-        class="mt-5"
-      >
+      <el-tree ref="permTreeRef" node-key="value" show-checkbox :data="menuPermOptions" :filter-node-method="handlePermFilter"
+        :default-expand-all="true" :check-strictly="!parentChildLinked" class="mt-5">
         <template #default="{ data }">
           {{ data.label }}
         </template>
@@ -229,316 +156,318 @@
 </template>
 
 <script setup lang="ts">
-import { useAppStore } from "@/stores/app";
-import { DeviceEnum } from "@/enums/settings";
+  import { useAppStore } from "@/stores/app";
+  import { DeviceEnum } from "@/enums/settings";
 
-import RoleAPI from "@/api/system/role";
-import type { RoleItem, RoleForm, RoleQueryParams } from "@/api/system/role";
-import MenuAPI from "@/api/system/menu";
-import DeptAPI from "@/api/system/dept";
+  import RoleAPI from "@/api/system/role";
+  import type { RoleItem, RoleForm } from "@/api/system/role";
+  import MenuAPI from "@/api/system/menu";
+  import DeptAPI from "@/api/system/dept";
 
-defineOptions({
-  name: "Role",
-  inheritAttrs: false,
-});
+  defineOptions({
+    name: "Role",
+    inheritAttrs: false,
+  });
 
-const appStore = useAppStore();
+  const appStore = useAppStore();
 
-const queryFormRef = ref();
-const roleFormRef = ref();
-const permTreeRef = ref();
+  const queryFormRef = ref();
+  const roleFormRef = ref();
+  const permTreeRef = ref();
 
-const loading = ref(false);
-const ids = ref<number[]>([]);
-const total = ref(0);
+  const loading = ref(false);
+  const ids = ref<number[]>([]);
 
-const queryParams = reactive<RoleQueryParams>({
-  pageNum: 1,
-  pageSize: 10,
-});
+  const tableData = reactive<PageResult<RoleItem>>({
+    list: [],
+    total: 0,
+    params: {
+      pageNum: 1,
+      pageSize: 10,
+      keywords: ""
+    },
+  });
 
-// 角色表格数据
-const roleList = ref<RoleItem[]>();
-// 菜单权限下拉
-const menuPermOptions = ref<OptionItem[]>([]);
-// 部门下拉选项
-const deptOptions = ref<OptionItem[]>([]);
+  // 菜单权限下拉
+  const menuPermOptions = ref<OptionItem[]>([]);
+  // 部门下拉选项
+  const deptOptions = ref<OptionItem[]>([]);
 
-// 弹窗
-const dialogState = reactive({
-  title: "",
-  visible: false,
-});
+  // 弹窗
+  const dialogState = reactive({
+    title: "",
+    visible: false,
+  });
 
-const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "600px" : "90%"));
+  const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "600px" : "90%"));
 
-// 角色表单
-const formData = reactive<RoleForm>({
-  sort: 1,
-  status: 1,
-});
+  // 角色表单
+  const formData = reactive<RoleForm>({
+    sort: 1,
+    status: 1,
+  });
 
-const rules = reactive({
-  name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
-  code: [{ required: true, message: "请输入角色编码", trigger: "blur" }],
-  dataScope: [{ required: true, message: "请选择数据权限", trigger: "blur" }],
-  deptIds: [{ required: true, message: "请选择部门", trigger: "blur" }],
-  status: [{ required: true, message: "请选择状态", trigger: "blur" }],
-});
+  const rules = reactive({
+    name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
+    code: [{ required: true, message: "请输入角色编码", trigger: "blur" }],
+    dataScope: [{ required: true, message: "请选择数据权限", trigger: "blur" }],
+    deptIds: [{ required: true, message: "请选择部门", trigger: "blur" }],
+    status: [{ required: true, message: "请选择状态", trigger: "blur" }],
+  });
 
-// 选中的角色
-interface CheckedRole {
-  id?: string;
-  name?: string;
-}
-const checkedRole = ref<CheckedRole>({});
-const assignPermDialogVisible = ref(false);
-
-const permKeywords = ref("");
-const isExpanded = ref(true);
-
-const parentChildLinked = ref(true);
-
-/**
- * 加载角色列表数据
- */
-async function fetchList(): Promise<void> {
-  loading.value = true;
-  try {
-    const data = await RoleAPI.getPage(queryParams);
-    roleList.value = data.list;
-    total.value = data.total ?? 0;
-  } finally {
-    loading.value = false;
+  // 选中的角色
+  interface CheckedRole {
+    id?: string;
+    name?: string;
   }
-}
+  const checkedRole = ref<CheckedRole>({});
+  const assignPermDialogVisible = ref(false);
 
-// 查询（重置页码后获取数据）
-function handleQuery(): void {
-  queryParams.pageNum = 1;
-  fetchList();
-}
+  const permKeywords = ref("");
+  const isExpanded = ref(true);
 
-/**
- * 重置查询条件
- */
-function resetQuery(): void {
-  queryFormRef.value?.resetFields();
-}
+  const parentChildLinked = ref(true);
 
-/**
- * 重置查询条件并重新查询
- */
-function handleResetQuery(): void {
-  resetQuery();
-  handleQuery();
-}
-
-// 行复选框选中
-function handleSelectionChange(selection: any): void {
-  ids.value = selection.map((item: any) => item.id);
-}
-
-/**
- * 打开表单弹窗
- */
-function openDialog(): void {
-  dialogState.visible = true;
-}
-
-/**
- * 关闭表单弹窗
- */
-function closeDialog(): void {
-  dialogState.visible = false;
-  resetForm();
-}
-
-/**
- * 重置表单数据和验证状态
- */
-function resetForm(): void {
-  roleFormRef.value?.resetFields();
-  roleFormRef.value?.clearValidate();
-
-  formData.id = undefined;
-  formData.sort = 1;
-  formData.status = 1;
-  formData.dataScope = undefined;
-  formData.deptIds = undefined;
-}
-
-/**
- * 新增按钮点击事件
- */
-async function handleCreateClick(): Promise<void> {
-  dialogState.title = "新增角色";
-  if (deptOptions.value.length === 0) {
-    deptOptions.value = await DeptAPI.getOptions();
-  }
-  openDialog();
-}
-
-/**
- * 编辑按钮点击事件
- * @param roleId 角色ID
- */
-async function handleEditClick(roleId: string): Promise<void> {
-  dialogState.title = "修改角色";
-  if (deptOptions.value.length === 0) {
-    deptOptions.value = await DeptAPI.getOptions();
-  }
-  const data = await RoleAPI.getFormData(roleId);
-  Object.assign(formData, data);
-  openDialog();
-}
-
-// 提交角色表单
-async function handleSubmit(): Promise<void> {
-  const valid = await roleFormRef.value?.validate().then(
-    () => true,
-    () => false
-  );
-  if (!valid) return;
-
-  const submitData = { ...formData };
-  if (submitData.dataScope !== 5) {
-    submitData.deptIds = undefined;
-  }
-
-  loading.value = true;
-  try {
-    const roleId = formData.id;
-    if (roleId) {
-      await RoleAPI.update(roleId, submitData);
-      ElMessage.success("修改成功");
-    } else {
-      await RoleAPI.create(submitData);
-      ElMessage.success("新增成功");
+  /**
+   * 加载角色列表数据
+   */
+  async function fetchList(): Promise<void> {
+    loading.value = true;
+    try {
+      const data = await RoleAPI.getPage(tableData.params);
+      tableData.list = data.list ?? [];
+      tableData.total = data.total ?? 0;
+    } finally {
+      loading.value = false;
     }
-    closeDialog();
-    handleResetQuery();
-  } finally {
-    loading.value = false;
-  }
-}
-
-// 删除角色
-function handleDelete(roleId?: number): void {
-  const roleIds = roleId ? String(roleId) : ids.value.join(",");
-  if (!roleIds) {
-    ElMessage.warning("请勾选删除项");
-    return;
   }
 
-  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    type: "warning",
-  }).then(
-    () => {
+  // 查询（重置页码后获取数据）
+  function handleQuery(): void {
+    tableData.params.pageNum = 1;
+    fetchList();
+  }
+
+  /**
+   * 重置查询条件
+   */
+  function resetQuery(): void {
+    queryFormRef.value?.resetFields();
+  }
+
+  /**
+   * 重置查询条件并重新查询
+   */
+  function handleResetQuery(): void {
+    resetQuery();
+    handleQuery();
+  }
+
+  // 行复选框选中
+  function handleSelectionChange(selection: any): void {
+    ids.value = selection.map((item: any) => item.id);
+  }
+
+  /**
+   * 打开表单弹窗
+   */
+  function openDialog(): void {
+    dialogState.visible = true;
+  }
+
+  /**
+   * 关闭表单弹窗
+   */
+  function closeDialog(): void {
+    dialogState.visible = false;
+    resetForm();
+  }
+
+  /**
+   * 重置表单数据和验证状态
+   */
+  function resetForm(): void {
+    roleFormRef.value?.resetFields();
+    roleFormRef.value?.clearValidate();
+
+    formData.id = undefined;
+    formData.sort = 1;
+    formData.status = 1;
+    formData.dataScope = undefined;
+    formData.deptIds = undefined;
+  }
+
+  /**
+   * 新增按钮点击事件
+   */
+  async function handleCreateClick(): Promise<void> {
+    dialogState.title = "新增角色";
+    if (deptOptions.value.length === 0) {
+      deptOptions.value = await DeptAPI.getOptions();
+    }
+    openDialog();
+  }
+
+  /**
+   * 编辑按钮点击事件
+   * @param roleId 角色ID
+   */
+  async function handleEditClick(roleId: string): Promise<void> {
+    dialogState.title = "修改角色";
+    if (deptOptions.value.length === 0) {
+      deptOptions.value = await DeptAPI.getOptions();
+    }
+    const data = await RoleAPI.getFormData(roleId);
+    Object.assign(formData, data);
+    openDialog();
+  }
+
+  // 提交角色表单
+  async function handleSubmit(): Promise<void> {
+    const valid = await roleFormRef.value?.validate().then(
+      () => true,
+      () => false
+    );
+    if (!valid) return;
+
+    const submitData = { ...formData };
+    if (submitData.dataScope !== 5) {
+      submitData.deptIds = undefined;
+    }
+
+    loading.value = true;
+    try {
+      const roleId = formData.id;
+      if (roleId) {
+        await RoleAPI.update(roleId, submitData);
+        ElMessage.success("修改成功");
+      } else {
+        await RoleAPI.create(submitData);
+        ElMessage.success("新增成功");
+      }
+      closeDialog();
+      handleResetQuery();
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  // 删除角色
+  function handleDelete(roleId?: number): void {
+    const roleIds = roleId ? String(roleId) : ids.value.join(",");
+    if (!roleIds) {
+      ElMessage.warning("请勾选删除项");
+      return;
+    }
+
+    ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    }).then(
+      () => {
+        loading.value = true;
+        RoleAPI.deleteByIds(roleIds)
+          .then(() => {
+            ElMessage.success("删除成功");
+            handleResetQuery();
+          })
+          .finally(() => (loading.value = false));
+      },
+      () => {
+        ElMessage.info("已取消删除");
+      }
+    );
+  }
+
+  /**
+   * 批量删除按钮点击事件
+   */
+  function handleBatchDelete(): void {
+    handleDelete();
+  }
+
+  // 打开分配菜单权限弹窗
+  async function handleAssignPermClick(row: RoleItem): Promise<void> {
+    const roleId = row.id;
+    if (roleId) {
+      assignPermDialogVisible.value = true;
       loading.value = true;
-      RoleAPI.deleteByIds(roleIds)
+
+      checkedRole.value.id = roleId;
+      checkedRole.value.name = row.name;
+
+      // 获取所有的菜单
+      menuPermOptions.value = await MenuAPI.getOptions();
+
+      // 回显角色已拥有的菜单
+      RoleAPI.getRoleMenuIds(roleId)
+        .then((data) => {
+          const checkedMenuIds = data;
+          checkedMenuIds.forEach((menuId) => permTreeRef.value!.setChecked(menuId, true, false));
+        })
+        .finally(() => {
+          loading.value = false;
+        });
+    }
+  }
+
+  // 分配菜单权限提交
+  function handleAssignPermSubmit() {
+    const roleId = checkedRole.value.id;
+    if (roleId) {
+      const checkedMenuIds: number[] = permTreeRef
+        .value!.getCheckedNodes(false, true)
+        .map((node: any) => node.value);
+
+      loading.value = true;
+      RoleAPI.updateRoleMenus(roleId, checkedMenuIds)
         .then(() => {
-          ElMessage.success("删除成功");
+          ElMessage.success("分配权限成功");
+          assignPermDialogVisible.value = false;
           handleResetQuery();
         })
-        .finally(() => (loading.value = false));
-    },
-    () => {
-      ElMessage.info("已取消删除");
+        .finally(() => {
+          loading.value = false;
+        });
     }
-  );
-}
+  }
 
-/**
- * 批量删除按钮点击事件
- */
-function handleBatchDelete(): void {
-  handleDelete();
-}
-
-// 打开分配菜单权限弹窗
-async function handleAssignPermClick(row: RoleItem): Promise<void> {
-  const roleId = row.id;
-  if (roleId) {
-    assignPermDialogVisible.value = true;
-    loading.value = true;
-
-    checkedRole.value.id = roleId;
-    checkedRole.value.name = row.name;
-
-    // 获取所有的菜单
-    menuPermOptions.value = await MenuAPI.getOptions();
-
-    // 回显角色已拥有的菜单
-    RoleAPI.getRoleMenuIds(roleId)
-      .then((data) => {
-        const checkedMenuIds = data;
-        checkedMenuIds.forEach((menuId) => permTreeRef.value!.setChecked(menuId, true, false));
-      })
-      .finally(() => {
-        loading.value = false;
+  // 展开/收缩 菜单权限树
+  function togglePermTree(): void {
+    isExpanded.value = !isExpanded.value;
+    if (permTreeRef.value) {
+      Object.values(permTreeRef.value.store.nodesMap).forEach((node: any) => {
+        if (isExpanded.value) {
+          node.expand();
+        } else {
+          node.collapse();
+        }
       });
+    }
   }
-}
 
-// 分配菜单权限提交
-function handleAssignPermSubmit() {
-  const roleId = checkedRole.value.id;
-  if (roleId) {
-    const checkedMenuIds: number[] = permTreeRef
-      .value!.getCheckedNodes(false, true)
-      .map((node: any) => node.value);
+  // 权限筛选
+  watch(permKeywords, (val) => {
+    permTreeRef.value!.filter(val);
+  });
 
-    loading.value = true;
-    RoleAPI.updateRoleMenus(roleId, checkedMenuIds)
-      .then(() => {
-        ElMessage.success("分配权限成功");
-        assignPermDialogVisible.value = false;
-        handleResetQuery();
-      })
-      .finally(() => {
-        loading.value = false;
-      });
+  function handlePermFilter(
+    value: string,
+    data: {
+      [key: string]: any;
+    }
+  ) {
+    if (!value) return true;
+    return data.label.includes(value);
   }
-}
 
-// 展开/收缩 菜单权限树
-function togglePermTree(): void {
-  isExpanded.value = !isExpanded.value;
-  if (permTreeRef.value) {
-    Object.values(permTreeRef.value.store.nodesMap).forEach((node: any) => {
-      if (isExpanded.value) {
-        node.expand();
-      } else {
-        node.collapse();
-      }
-    });
+  // 父子菜单节点是否联动
+  function handleParentChildLinkedChange(val: any): void {
+    parentChildLinked.value = val;
   }
-}
 
-// 权限筛选
-watch(permKeywords, (val) => {
-  permTreeRef.value!.filter(val);
-});
-
-function handlePermFilter(
-  value: string,
-  data: {
-    [key: string]: any;
-  }
-) {
-  if (!value) return true;
-  return data.label.includes(value);
-}
-
-// 父子菜单节点是否联动
-function handleParentChildLinkedChange(val: any): void {
-  parentChildLinked.value = val;
-}
-
-onMounted(() => {
-  handleQuery();
-});
+  onMounted(() => {
+    handleQuery();
+  });
 </script>
diff --git a/src/views/system/tenant/index.vue b/src/views/system/tenant/index.vue
index 956600f2..c079d4e0 100644
--- a/src/views/system/tenant/index.vue
+++ b/src/views/system/tenant/index.vue
@@ -1,18 +1,13 @@
 <template>
   <div class="page-container">
     <el-card class="page-search" shadow="never">
-      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+      <el-form ref="queryFormRef" :model="tableData.params" :inline="true">
         <el-form-item prop="keywords" label="关键字">
-          <el-input
-            v-model="queryParams.keywords"
-            placeholder="租户名称/租户编码/域名"
-            clearable
-            @keyup.enter="handleQuery"
-          />
+          <el-input v-model="tableData.params.keywords" placeholder="租户名称/租户编码/域名" clearable @keyup.enter="handleQuery" />
         </el-form-item>
 
         <el-form-item prop="status" label="状态">
-          <el-select v-model="queryParams.status" placeholder="全部" clearable style="width: 120px">
+          <el-select v-model="tableData.params.status" placeholder="全部" clearable style="width: 120px">
             <el-option label="正常" :value="1" />
             <el-option label="禁用" :value="0" />
           </el-select>
@@ -28,39 +23,17 @@
     <el-card class="page-content" shadow="never">
       <div class="page-toolbar">
         <div class="page-toolbar__left">
-          <el-button
-            v-hasPerm="['sys:tenant:create']"
-            type="success"
-            icon="plus"
-            @click="openDialog()"
-          >
+          <el-button v-hasPerm="['sys:tenant:create']" type="success" icon="plus" @click="openDialog()">
             新增
           </el-button>
-          <el-button
-            v-hasPerm="['sys:tenant:delete']"
-            type="danger"
-            icon="delete"
-            :disabled="ids.length === 0"
-            @click="handleDelete()"
-          >
+          <el-button v-hasPerm="['sys:tenant:delete']" type="danger" icon="delete" :disabled="ids.length === 0" @click="handleDelete()">
             删除
           </el-button>
         </div>
       </div>
 
-      <el-table
-        v-loading="loading"
-        :data="pageData"
-        highlight-current-row
-        border
-        @selection-change="handleSelectionChange"
-      >
-        <el-table-column
-          type="selection"
-          width="55"
-          align="center"
-          :selectable="isTenantSelectable"
-        />
+      <el-table v-loading="loading" :data="tableData.list" highlight-current-row border @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" :selectable="isTenantSelectable" />
         <el-table-column label="租户名称" prop="name" min-width="140" />
         <el-table-column label="租户编码" prop="code" width="120" />
         <el-table-column label="租户套餐" min-width="120">
@@ -82,110 +55,50 @@
         <el-table-column label="创建时间" prop="createTime" width="160" />
         <el-table-column fixed="right" label="操作" width="320">
           <template #default="scope">
-            <el-tooltip
-              v-if="!isPlatformTenantId(scope.row.id)"
-              content="更换租户套餐（将影响可用功能）"
-              placement="top"
-            >
-              <el-button
-                v-hasPerm="['sys:tenant:plan-assign']"
-                type="primary"
-                size="small"
-                link
-                icon="menu"
-                title="更换租户套餐（将影响可用功能）"
-                @click="openTenantPlanDialog(scope.row)"
-              >
+            <el-tooltip v-if="!isPlatformTenantId(scope.row.id)" content="更换租户套餐（将影响可用功能）" placement="top">
+              <el-button v-hasPerm="['sys:tenant:plan-assign']" type="primary" size="small" link icon="menu" title="更换租户套餐（将影响可用功能）"
+                @click="openTenantPlanDialog(scope.row)">
                 更换套餐
               </el-button>
             </el-tooltip>
-            <el-tooltip
-              v-if="!isPlatformTenantId(scope.row.id)"
-              content="在当前套餐范围内配置租户可用功能"
-              placement="top"
-            >
-              <el-button
-                v-hasPerm="['sys:tenant:plan-assign']"
-                type="primary"
-                size="small"
-                link
-                icon="setting"
-                :disabled="!scope.row.planId"
-                title="在当前套餐范围内配置租户可用功能"
-                @click="openTenantCustomizeDialog(scope.row)"
-              >
+            <el-tooltip v-if="!isPlatformTenantId(scope.row.id)" content="在当前套餐范围内配置租户可用功能" placement="top">
+              <el-button v-hasPerm="['sys:tenant:plan-assign']" type="primary" size="small" link icon="setting" :disabled="!scope.row.planId"
+                title="在当前套餐范围内配置租户可用功能" @click="openTenantCustomizeDialog(scope.row)">
                 套餐功能配置
               </el-button>
             </el-tooltip>
-            <el-button
-              v-hasPerm="['sys:tenant:update']"
-              type="primary"
-              size="small"
-              link
-              icon="edit"
-              @click="openDialog(scope.row.id)"
-            >
+            <el-button v-hasPerm="['sys:tenant:update']" type="primary" size="small" link icon="edit" @click="openDialog(scope.row.id)">
               编辑
             </el-button>
-            <el-button
-              v-if="!isPlatformTenantId(scope.row.id)"
-              v-hasPerm="['sys:tenant:delete']"
-              type="danger"
-              size="small"
-              link
-              icon="delete"
-              @click="handleDelete(scope.row.id)"
-            >
+            <el-button v-if="!isPlatformTenantId(scope.row.id)" v-hasPerm="['sys:tenant:delete']" type="danger" size="small" link icon="delete"
+              @click="handleDelete(scope.row.id)">
               删除
             </el-button>
           </template>
         </el-table-column>
       </el-table>
 
-      <pagination
-        v-if="total > 0"
-        v-model:total="total"
-        v-model:page="queryParams.pageNum"
-        v-model:limit="queryParams.pageSize"
-        @pagination="fetchData"
-      />
+      <pagination v-if="tableData.total > 0" v-model:total="tableData.total" v-model:page="tableData.params.pageNum"
+        v-model:limit="tableData.params.pageSize" @pagination="fetchData" />
     </el-card>
 
-    <el-dialog
-      v-model="dialogState.visible"
-      :title="dialogState.title"
-      width="600px"
-      @close="closeDialog"
-    >
+    <el-dialog v-model="dialogState.visible" :title="dialogState.title" width="600px" @close="closeDialog">
       <el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="100px">
         <el-form-item label="租户名称" prop="name">
           <el-input v-model="formData.name" placeholder="请输入租户名称" />
         </el-form-item>
 
         <el-form-item label="租户编码" prop="code">
-          <el-input
-            v-model="formData.code"
-            placeholder="请输入租户编码"
-            :disabled="formData.id != null && String(formData.id) !== ''"
-          />
+          <el-input v-model="formData.code" placeholder="请输入租户编码" :disabled="formData.id != null && String(formData.id) !== ''" />
         </el-form-item>
 
         <el-form-item label="域名" prop="domain">
           <el-input v-model="formData.domain" placeholder="demo.youlai.tech（可选）" />
         </el-form-item>
 
-        <el-form-item
-          v-if="!isPlatformTenant && (formData.id == null || String(formData.id) === '')"
-          label="租户套餐"
-          prop="planId"
-        >
+        <el-form-item v-if="!isPlatformTenant && (formData.id == null || String(formData.id) === '')" label="租户套餐" prop="planId">
           <el-select v-model="formData.planId" placeholder="请选择租户套餐" style="width: 100%">
-            <el-option
-              v-for="item in planOptions"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
+            <el-option v-for="item in planOptions" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
         </el-form-item>
 
@@ -202,28 +115,15 @@
         </el-form-item>
 
         <el-form-item label="过期时间" prop="expireTime">
-          <el-date-picker
-            v-model="formData.expireTime"
-            type="datetime"
-            placeholder="不填表示永不过期"
-            value-format="YYYY-MM-DD HH:mm:ss"
-            style="width: 100%"
-          />
+          <el-date-picker v-model="formData.expireTime" type="datetime" placeholder="不填表示永不过期" value-format="YYYY-MM-DD HH:mm:ss"
+            style="width: 100%" />
         </el-form-item>
 
-        <el-form-item
-          v-if="formData.id == null || String(formData.id) === ''"
-          label="管理员账号"
-          prop="adminUsername"
-        >
+        <el-form-item v-if="formData.id == null || String(formData.id) === ''" label="管理员账号" prop="adminUsername">
           <el-input v-model="formData.adminUsername" placeholder="为空则系统生成" />
         </el-form-item>
 
-        <el-form-item
-          v-if="formData.id != null && String(formData.id) !== ''"
-          label="状态"
-          prop="status"
-        >
+        <el-form-item v-if="formData.id != null && String(formData.id) !== ''" label="状态" prop="status">
           <el-radio-group v-model="formData.status">
             <el-radio :value="1">正常</el-radio>
             <el-radio :value="0">禁用</el-radio>
@@ -243,30 +143,15 @@
       </template>
     </el-dialog>
 
-    <el-dialog
-      v-model="tenantPlanSelectVisible"
-      title="更换租户套餐"
-      width="520px"
-      @close="closeTenantPlanSelectDialog()"
-    >
+    <el-dialog v-model="tenantPlanSelectVisible" title="更换租户套餐" width="520px" @close="closeTenantPlanSelectDialog()">
       <el-form label-width="90px" class="mb-3">
         <el-form-item label="当前套餐">
           <el-input :model-value="resolvePlanLabel(checkedTenant.planId)" disabled />
         </el-form-item>
 
         <el-form-item label="目标套餐">
-          <el-select
-            v-model="tenantPlanId"
-            placeholder="请选择租户套餐"
-            style="width: 100%"
-            @change="handlePlanChange"
-          >
-            <el-option
-              v-for="item in planOptions"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
+          <el-select v-model="tenantPlanId" placeholder="请选择租户套餐" style="width: 100%" @change="handlePlanChange">
+            <el-option v-for="item in planOptions" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
         </el-form-item>
       </el-form>
@@ -275,22 +160,13 @@
         <div class="mb-2 font-medium">升级场景</div>
         <div class="mb-3">升级套餐后，将解锁更多功能菜单，需在套餐功能配置中手动启用。</div>
         <div class="mb-2 font-medium">降级场景（红色 / warning）</div>
-        <el-alert
-          type="warning"
-          :closable="false"
-          show-icon
-          title="⚠ 降级套餐将导致超出套餐范围的功能被移除，相关功能将立即不可用。"
-        />
+        <el-alert type="warning" :closable="false" show-icon title="⚠ 降级套餐将导致超出套餐范围的功能被移除，相关功能将立即不可用。" />
       </div>
 
       <template #footer>
         <div class="dialog-footer">
-          <el-button
-            v-hasPerm="['sys:tenant:plan-assign']"
-            type="primary"
-            :disabled="!tenantPlanId || isPlanMenuEmpty"
-            @click="handleTenantPlanSelectSubmit"
-          >
+          <el-button v-hasPerm="['sys:tenant:plan-assign']" type="primary" :disabled="!tenantPlanId || isPlanMenuEmpty"
+            @click="handleTenantPlanSelectSubmit">
             确认更换
           </el-button>
           <el-button @click="tenantPlanSelectVisible = false">取消</el-button>
@@ -298,33 +174,14 @@
       </template>
     </el-dialog>
 
-    <el-drawer
-      v-model="tenantPlanDialogVisible"
-      title="套餐功能配置"
-      size="640px"
-      @close="closeTenantPlanDialog()"
-    >
-      <el-alert
-        type="info"
-        :closable="false"
-        show-icon
-        class="mb-3"
-        :title="`当前功能基于「${resolvePlanLabel(tenantPlanId)}」，你可以关闭不需要的功能。如需增加功能，请升级套餐。`"
-      />
+    <el-drawer v-model="tenantPlanDialogVisible" title="套餐功能配置" size="640px" @close="closeTenantPlanDialog()">
+      <el-alert type="info" :closable="false" show-icon class="mb-3"
+        :title="`当前功能基于「${resolvePlanLabel(tenantPlanId)}」，你可以关闭不需要的功能。如需增加功能，请升级套餐。`" />
       <div class="text-xs text-gray-500 mb-2">仅展示当前套餐包含的功能</div>
 
       <el-scrollbar class="h-[60vh]">
-        <el-tree
-          ref="menuTreeRef"
-          node-key="value"
-          show-checkbox
-          :props="menuTreeProps"
-          :data="menuPermOptions"
-          :default-expanded-keys="menuExpandedKeys"
-          :default-expand-all="false"
-          class="mt-5"
-          @check="handleMenuCheckedChange"
-        >
+        <el-tree ref="menuTreeRef" node-key="value" show-checkbox :props="menuTreeProps" :data="menuPermOptions"
+          :default-expanded-keys="menuExpandedKeys" :default-expand-all="false" class="mt-5" @check="handleMenuCheckedChange">
           <template #default="{ data }">
             {{ data.label }}
           </template>
@@ -333,12 +190,7 @@
 
       <template #footer>
         <div class="dialog-footer">
-          <el-button
-            v-hasPerm="['sys:tenant:plan-assign']"
-            type="primary"
-            :disabled="isPlanMenuEmpty"
-            @click="handleTenantPlanSubmit"
-          >
+          <el-button v-hasPerm="['sys:tenant:plan-assign']" type="primary" :disabled="isPlanMenuEmpty" @click="handleTenantPlanSubmit">
             保存配置
           </el-button>
           <el-button @click="tenantPlanDialogVisible = false">取消</el-button>
@@ -349,516 +201,540 @@
 </template>
 
 <script setup lang="ts">
-defineOptions({
-  name: "Tenant",
-  inheritAttrs: false,
-});
+  defineOptions({
+    name: "Tenant",
+    inheritAttrs: false,
+  });
 
-import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from "element-plus";
-import { useDebounceFn } from "@vueuse/core";
-import { hasPerm } from "@/utils/auth";
-import TenantAPI from "@/api/system/tenant";
-import TenantPlanAPI from "@/api/system/tenant-plan";
-import MenuAPI from "@/api/system/menu";
-import type {
-  TenantCreateForm,
-  TenantForm,
-  TenantQueryParams,
-  TenantItem,
-} from "@/api/system/tenant";
-import type { OptionItem } from "@/api/common";
-import { MenuScopeEnum } from "@/enums/business";
-import { isPlatformTenantId } from "@/utils/tenant";
+  import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from "element-plus";
+  import { useDebounceFn } from "@vueuse/core";
+  import { hasPerm } from "@/utils/auth";
+  import TenantAPI from "@/api/system/tenant";
+  import TenantPlanAPI from "@/api/system/tenant-plan";
+  import MenuAPI from "@/api/system/menu";
+  import type {
+    TenantCreateForm,
+    TenantForm,
+    TenantItem,
+  } from "@/api/system/tenant";
+  import type { OptionItem } from "@/api/common";
+  import { MenuScopeEnum } from "@/enums/business";
+  import { isPlatformTenantId } from "@/utils/tenant";
 
-// 表单引用
-const queryFormRef = ref<FormInstance>();
-const dataFormRef = ref<FormInstance>();
-const menuTreeRef = ref();
-const planPreviewTreeRef = ref();
+  // 表单引用
+  const queryFormRef = ref<FormInstance>();
+  const dataFormRef = ref<FormInstance>();
+  const menuTreeRef = ref();
+  const planPreviewTreeRef = ref();
 
-// 查询参数
-const queryParams = reactive<TenantQueryParams>({
-  pageNum: 1,
-  pageSize: 10,
-  keywords: "",
-});
+  // 列表数据
+  const menuPermOptions = ref<OptionItem[]>([]);
+  const planOptions = ref<OptionItem[]>([]);
+  const loading = ref(false);
+  const ids = ref<number[]>([]);
 
-// 列表数据
-const pageData = ref<TenantItem[]>([]);
-const menuPermOptions = ref<OptionItem[]>([]);
-const planOptions = ref<OptionItem[]>([]);
-const total = ref(0);
-const loading = ref(false);
-const ids = ref<number[]>([]);
-
-// 弹窗状态
-const dialogState = reactive({
-  title: "",
-  visible: false,
-});
-
-// 套餐选择弹窗状态
-const tenantPlanSelectVisible = ref(false);
-const tenantPlanDialogVisible = ref(false);
-const checkedTenant = ref<{ id?: number; name?: string; planId?: number }>({});
-const checkedTenantForm = ref<TenantForm | null>(null);
-const tenantPlanId = ref<number | undefined>();
-const planMenuIds = ref<number[]>([]);
-const tenantMenuIds = ref<number[]>([]);
-const menuSourceOptions = ref<OptionItem[]>([]);
-const planPreviewOptions = ref<OptionItem[]>([]);
-const menuCheckedCount = ref(0);
-const menuKeywords = ref("");
-const planPreviewKeywords = ref("");
-const menuExpanded = ref(false);
-const planPreviewExpanded = ref(false);
-const menuParentChildLinked = ref(true);
-const originalEnabledMenuIds = ref<number[]>([]);
-
-// 计算当前可见菜单的默认展开节点
-const menuExpandedKeys = computed(() => menuPermOptions.value.map((item) => item.value));
-
-const menuTreeProps = {
-  children: "children",
-  label: "label",
-  disabled: "disabled",
-};
-
-// 目标套餐未配置菜单时提示禁止提交
-const isPlanMenuEmpty = computed(
-  () => tenantPlanId.value != null && planMenuIds.value.length === 0
-);
-
-// 表单数据
-const formData = reactive<TenantForm & TenantCreateForm>({
-  id: undefined,
-  name: "",
-  code: "",
-  domain: "",
-  contactName: "",
-  contactPhone: "",
-  contactEmail: "",
-  planId: undefined,
-  remark: "",
-  expireTime: undefined,
-  status: 1,
-  adminUsername: "",
-});
-
-// 当前表单是否为平台租户
-const isPlatformTenant = computed(() => isPlatformTenantId(formData.id));
-
-// 平台租户不允许批量删除
-const isTenantSelectable = (row: TenantItem) => !isPlatformTenantId(row.id);
-
-// 验证规则
-const rules: FormRules = {
-  name: [{ required: true, message: "请输入租户名称", trigger: "blur" }],
-  code: [{ required: true, message: "请输入租户编码", trigger: "blur" }],
-  planId: [
-    {
-      validator: (_: unknown, value: number | undefined, callback: (error?: Error) => void) => {
-        if (isPlatformTenant.value) return callback();
-        if (formData.id != null && String(formData.id) !== "") return callback();
-        if (value == null) return callback(new Error("请选择租户套餐"));
-        return callback();
-      },
-      trigger: "change",
+  const tableData = reactive<PageResult<TenantItem>>({
+    list: [],
+    total: 0,
+    params: { //查询参数
+      pageNum: 1,
+      pageSize: 10,
+      keywords: "",
     },
-  ],
-};
+  });
 
-const hasPermTenantMenu = computed(() => hasPerm("sys:tenant:plan-assign"));
+  // 弹窗状态
+  const dialogState = reactive({
+    title: "",
+    visible: false,
+  });
 
-/**
- * 根据套餐ID解析显示名称
- */
-function resolvePlanLabel(planId?: number): string {
-  if (planId == null) return "-";
-  const matched = planOptions.value.find((item) => Number(item.value) === planId);
-  return matched?.label || String(planId);
-}
+  // 套餐选择弹窗状态
+  const tenantPlanSelectVisible = ref(false);
+  const tenantPlanDialogVisible = ref(false);
+  const checkedTenant = ref<{ id?: number; name?: string; planId?: number }>({});
+  const checkedTenantForm = ref<TenantForm | null>(null);
+  const tenantPlanId = ref<number | undefined>();
+  const planMenuIds = ref<number[]>([]);
+  const tenantMenuIds = ref<number[]>([]);
+  const menuSourceOptions = ref<OptionItem[]>([]);
+  const planPreviewOptions = ref<OptionItem[]>([]);
+  const menuCheckedCount = ref(0);
+  const menuKeywords = ref("");
+  const planPreviewKeywords = ref("");
+  const menuExpanded = ref(false);
+  const planPreviewExpanded = ref(false);
+  const menuParentChildLinked = ref(true);
+  const originalEnabledMenuIds = ref<number[]>([]);
 
-/**
- * 加载租户列表数据
- */
-function fetchData(): void {
-  loading.value = true;
-  TenantAPI.getPage(queryParams)
-    .then((data) => {
-      pageData.value = data.list.map((item: TenantItem) => ({
-        ...item,
-        planId: item.planId != null ? Number(item.planId) : undefined,
-      }));
-      total.value = data.total ?? 0;
-    })
-    .finally(() => {
+  // 计算当前可见菜单的默认展开节点
+  const menuExpandedKeys = computed(() => menuPermOptions.value.map((item) => item.value));
+
+  const menuTreeProps = {
+    children: "children",
+    label: "label",
+    disabled: "disabled",
+  };
+
+  // 目标套餐未配置菜单时提示禁止提交
+  const isPlanMenuEmpty = computed(
+    () => tenantPlanId.value != null && planMenuIds.value.length === 0
+  );
+
+  // 表单数据
+  const formData = reactive<TenantForm & TenantCreateForm>({
+    id: undefined,
+    name: "",
+    code: "",
+    domain: "",
+    contactName: "",
+    contactPhone: "",
+    contactEmail: "",
+    planId: undefined,
+    remark: "",
+    expireTime: undefined,
+    status: 1,
+    adminUsername: "",
+  });
+
+  // 当前表单是否为平台租户
+  const isPlatformTenant = computed(() => isPlatformTenantId(formData.id));
+
+  // 平台租户不允许批量删除
+  const isTenantSelectable = (row: TenantItem) => !isPlatformTenantId(row.id);
+
+  // 验证规则
+  const rules: FormRules = {
+    name: [{ required: true, message: "请输入租户名称", trigger: "blur" }],
+    code: [{ required: true, message: "请输入租户编码", trigger: "blur" }],
+    planId: [
+      {
+        validator: (_: unknown, value: number | undefined, callback: (error?: Error) => void) => {
+          if (isPlatformTenant.value) return callback();
+          if (formData.id != null && String(formData.id) !== "") return callback();
+          if (value == null) return callback(new Error("请选择租户套餐"));
+          return callback();
+        },
+        trigger: "change",
+      },
+    ],
+  };
+
+  const hasPermTenantMenu = computed(() => hasPerm("sys:tenant:plan-assign"));
+
+  /**
+   * 根据套餐ID解析显示名称
+   */
+  function resolvePlanLabel(planId?: number): string {
+    if (planId == null) return "-";
+    const matched = planOptions.value.find((item) => Number(item.value) === planId);
+    return matched?.label || String(planId);
+  }
+
+  /**
+   * 加载租户列表数据
+   */
+  function fetchData(): void {
+    loading.value = true;
+    TenantAPI.getPage(tableData.params)
+      .then((data) => {
+        tableData.list = data.list.map((item: TenantItem) => ({
+          ...item,
+          planId: item.planId != null ? Number(item.planId) : undefined,
+        }));
+        tableData.total = data.total ?? 0;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  }
+
+  /**
+   * 打开更换套餐弹窗
+   */
+  async function openTenantPlanDialog(row: TenantItem): Promise<void> {
+    const tenantId = row.id;
+    if (tenantId == null || tenantId === "") return;
+    if (isPlatformTenantId(tenantId)) return;
+
+    tenantPlanSelectVisible.value = true;
+    loading.value = true;
+    planPreviewKeywords.value = "";
+    planPreviewExpanded.value = false;
+    menuKeywords.value = "";
+    menuExpanded.value = false;
+    menuParentChildLinked.value = true;
+
+    checkedTenant.value = {
+      id: Number(tenantId),
+      name: row.name || String(tenantId),
+      planId: row.planId != null ? Number(row.planId) : undefined,
+    };
+
+    try {
+      const [tenantForm, menuOptions, menuIds] = await Promise.all([
+        TenantAPI.getFormData(String(tenantId)),
+        MenuAPI.getOptions(false, MenuScopeEnum.TENANT),
+        hasPermTenantMenu.value ? TenantAPI.getTenantMenuIds(Number(tenantId)) : Promise.resolve([]),
+      ]);
+      checkedTenantForm.value = tenantForm;
+      tenantPlanId.value = tenantForm.planId != null ? Number(tenantForm.planId) : undefined;
+      menuSourceOptions.value = menuOptions;
+      tenantMenuIds.value = normalizeMenuIds(menuIds);
+      await handlePlanChange(tenantPlanId.value);
+      originalEnabledMenuIds.value =
+        tenantMenuIds.value.length > 0 ? [...tenantMenuIds.value] : [...planMenuIds.value];
+      updateCheckedMenus();
+    } finally {
       loading.value = false;
-    });
-}
-
-/**
- * 打开更换套餐弹窗
- */
-async function openTenantPlanDialog(row: TenantItem): Promise<void> {
-  const tenantId = row.id;
-  if (tenantId == null || tenantId === "") return;
-  if (isPlatformTenantId(tenantId)) return;
-
-  tenantPlanSelectVisible.value = true;
-  loading.value = true;
-  planPreviewKeywords.value = "";
-  planPreviewExpanded.value = false;
-  menuKeywords.value = "";
-  menuExpanded.value = false;
-  menuParentChildLinked.value = true;
-
-  checkedTenant.value = {
-    id: Number(tenantId),
-    name: row.name || String(tenantId),
-    planId: row.planId != null ? Number(row.planId) : undefined,
-  };
-
-  try {
-    const [tenantForm, menuOptions, menuIds] = await Promise.all([
-      TenantAPI.getFormData(String(tenantId)),
-      MenuAPI.getOptions(false, MenuScopeEnum.TENANT),
-      hasPermTenantMenu.value ? TenantAPI.getTenantMenuIds(Number(tenantId)) : Promise.resolve([]),
-    ]);
-    checkedTenantForm.value = tenantForm;
-    tenantPlanId.value = tenantForm.planId != null ? Number(tenantForm.planId) : undefined;
-    menuSourceOptions.value = menuOptions;
-    tenantMenuIds.value = normalizeMenuIds(menuIds);
-    await handlePlanChange(tenantPlanId.value);
-    originalEnabledMenuIds.value =
-      tenantMenuIds.value.length > 0 ? [...tenantMenuIds.value] : [...planMenuIds.value];
-    updateCheckedMenus();
-  } finally {
-    loading.value = false;
+    }
   }
-}
 
-/**
- * 关闭套餐选择弹窗
- */
-function closeTenantPlanSelectDialog(): void {
-  resetTenantPlanState();
-}
+  /**
+   * 关闭套餐选择弹窗
+   */
+  function closeTenantPlanSelectDialog(): void {
+    resetTenantPlanState();
+  }
 
-/**
- * 关闭套餐功能配置抽屉
- */
-function closeTenantPlanDialog(): void {
-  resetTenantPlanState();
-}
+  /**
+   * 关闭套餐功能配置抽屉
+   */
+  function closeTenantPlanDialog(): void {
+    resetTenantPlanState();
+  }
 
-/**
- * 重置套餐相关的所有状态
- */
-function resetTenantPlanState(): void {
-  tenantPlanDialogVisible.value = false;
-  tenantPlanSelectVisible.value = false;
-  planPreviewKeywords.value = "";
-  planPreviewExpanded.value = false;
-  menuKeywords.value = "";
-  menuExpanded.value = false;
-  menuParentChildLinked.value = true;
-  originalEnabledMenuIds.value = [];
-  tenantPlanId.value = undefined;
-  planMenuIds.value = [];
-  tenantMenuIds.value = [];
-  planPreviewOptions.value = [];
-  menuPermOptions.value = [];
-  menuSourceOptions.value = [];
-  menuCheckedCount.value = 0;
-  checkedTenant.value = {};
-  checkedTenantForm.value = null;
-  menuTreeRef.value?.setCheckedKeys([], false);
-}
-
-/**
- * 切换目标套餐时更新可用菜单
- */
-async function handlePlanChange(planId?: number): Promise<void> {
-  if (!planId) {
+  /**
+   * 重置套餐相关的所有状态
+   */
+  function resetTenantPlanState(): void {
+    tenantPlanDialogVisible.value = false;
+    tenantPlanSelectVisible.value = false;
+    planPreviewKeywords.value = "";
+    planPreviewExpanded.value = false;
+    menuKeywords.value = "";
+    menuExpanded.value = false;
+    menuParentChildLinked.value = true;
+    originalEnabledMenuIds.value = [];
+    tenantPlanId.value = undefined;
     planMenuIds.value = [];
+    tenantMenuIds.value = [];
     planPreviewOptions.value = [];
-    menuPermOptions.value = applyMenuOptionsDisabled([], false);
-    await nextTick();
-    menuTreeRef.value?.setCheckedKeys([], false);
+    menuPermOptions.value = [];
+    menuSourceOptions.value = [];
     menuCheckedCount.value = 0;
-    return;
+    checkedTenant.value = {};
+    checkedTenantForm.value = null;
+    menuTreeRef.value?.setCheckedKeys([], false);
   }
-  loading.value = true;
-  try {
-    const menuIds = await TenantPlanAPI.getPlanMenuIds(planId);
-    planMenuIds.value = normalizeMenuIds(menuIds);
-    const allowedMenuIdSet = new Set(planMenuIds.value);
-    const filteredOptions = allowedMenuIdSet.size
-      ? filterMenuOptionsByIds(menuSourceOptions.value, allowedMenuIdSet)
-      : [];
-    planPreviewOptions.value = filteredOptions;
-    menuPermOptions.value = applyMenuOptionsDisabled(filteredOptions, false);
-    await nextTick();
-    updateCheckedMenus();
-  } finally {
-    loading.value = false;
-  }
-}
 
-// 根据套餐范围同步勾选菜单
-function updateCheckedMenus() {
-  const allowedMenuIdSet = new Set(planMenuIds.value);
-  const checkedMenuIds =
-    tenantMenuIds.value.length > 0
-      ? tenantMenuIds.value.filter((menuId) => allowedMenuIdSet.has(menuId))
-      : planMenuIds.value;
-  menuTreeRef.value?.setCheckedKeys([], false);
-  checkedMenuIds.forEach((menuId) => menuTreeRef.value?.setChecked(menuId, true, false));
-  menuCheckedCount.value = checkedMenuIds.length;
-}
-
-/**
- * 更新已勾选菜单数量
- */
-function handleMenuCheckedChange(): void {
-  const checkedKeys = menuTreeRef.value?.getCheckedKeys(false) || [];
-  menuCheckedCount.value = checkedKeys.length;
-}
-
-/**
- * 打开套餐功能配置抽屉
- */
-async function openTenantCustomizeDialog(row?: TenantItem): Promise<void> {
-  const tenantId = row?.id ?? checkedTenant.value.id;
-  if (!tenantId) return;
-  if (isPlatformTenantId(tenantId)) return;
-
-  loading.value = true;
-  planPreviewKeywords.value = "";
-  planPreviewExpanded.value = false;
-  menuKeywords.value = "";
-  menuExpanded.value = false;
-  menuParentChildLinked.value = true;
-
-  checkedTenant.value = {
-    id: Number(tenantId),
-    name: row?.name || checkedTenant.value.name || String(tenantId),
-    planId: row?.planId != null ? Number(row.planId) : checkedTenant.value.planId,
-  };
-
-  try {
-    const [tenantForm, menuOptions, menuIds] = await Promise.all([
-      TenantAPI.getFormData(String(tenantId)),
-      MenuAPI.getOptions(false, MenuScopeEnum.TENANT),
-      hasPermTenantMenu.value ? TenantAPI.getTenantMenuIds(Number(tenantId)) : Promise.resolve([]),
-    ]);
-    checkedTenantForm.value = tenantForm;
-    tenantPlanId.value = tenantForm.planId != null ? Number(tenantForm.planId) : undefined;
-    if (!tenantPlanId.value) {
-      ElMessage.warning("请先选择套餐");
+  /**
+   * 切换目标套餐时更新可用菜单
+   */
+  async function handlePlanChange(planId?: number): Promise<void> {
+    if (!planId) {
+      planMenuIds.value = [];
+      planPreviewOptions.value = [];
+      menuPermOptions.value = applyMenuOptionsDisabled([], false);
+      await nextTick();
+      menuTreeRef.value?.setCheckedKeys([], false);
+      menuCheckedCount.value = 0;
       return;
     }
-    menuSourceOptions.value = menuOptions;
-    tenantMenuIds.value = normalizeMenuIds(menuIds);
-    await handlePlanChange(tenantPlanId.value);
-    menuPermOptions.value = applyMenuOptionsDisabled(planPreviewOptions.value, false);
-    tenantPlanDialogVisible.value = true;
-    tenantPlanSelectVisible.value = false;
-    await nextTick();
-    updateCheckedMenus();
-  } finally {
-    loading.value = false;
-  }
-}
-
-/**
- * 提交更换套餐操作
- */
-async function handleTenantPlanSelectSubmit(): Promise<void> {
-  const tenantId = checkedTenant.value.id;
-  if (!tenantId) return;
-  if (!tenantPlanId.value) {
-    ElMessage.warning("请选择租户套餐");
-    return;
-  }
-  if (isPlanMenuEmpty.value) {
-    ElMessage.warning("该套餐未配置菜单");
-    return;
-  }
-
-  const currentPlanLabel = resolvePlanLabel(checkedTenant.value.planId);
-  const targetPlanLabel = resolvePlanLabel(tenantPlanId.value);
-  const tenantName = checkedTenant.value.name || "";
-
-  try {
-    await ElMessageBox.confirm(
-      `确认将租户「${tenantName}」\n从「${currentPlanLabel}」更换为「${targetPlanLabel}」？\n\n该操作将立即生效，并影响租户可用功能。`,
-      "确认更换套餐",
-      {
-        type: "warning",
-        confirmButtonText: "确认更换",
-        cancelButtonText: "取消",
-      }
-    );
-  } catch {
-    return;
-  }
-
-  const tenantForm = checkedTenantForm.value;
-  if (!tenantForm) return;
-
-  loading.value = true;
-  try {
-    const payload: TenantForm = {
-      ...tenantForm,
-      planId: tenantPlanId.value,
-    };
-    await TenantAPI.update(String(tenantId), payload);
-    if (hasPermTenantMenu.value) {
-      const targetPlanMenuIdSet = new Set(planMenuIds.value);
-      const keepMenuIds = originalEnabledMenuIds.value.filter((menuId) =>
-        targetPlanMenuIdSet.has(menuId)
-      );
-      await TenantAPI.updateTenantMenus(tenantId, keepMenuIds);
-    }
-    ElMessage.success("套餐已更换，请确认租户功能配置");
-    checkedTenant.value.planId = tenantPlanId.value;
-    tenantPlanSelectVisible.value = false;
-    fetchData();
-  } catch {
-    ElMessage.error("套餐选择失败");
-  } finally {
-    loading.value = false;
-  }
-}
-
-/**
- * 过滤菜单树，仅保留套餐允许的节点
- */
-function filterMenuOptionsByIds(
-  options: OptionItem[],
-  allowedMenuIdSet: Set<number>
-): OptionItem[] {
-  return options.reduce<OptionItem[]>((acc, option) => {
-    const children = option.children
-      ? filterMenuOptionsByIds(option.children, allowedMenuIdSet)
-      : [];
-    const allowed = allowedMenuIdSet.has(Number(option.value));
-    if (allowed || children.length > 0) {
-      acc.push({
-        ...option,
-        children: children.length > 0 ? children : undefined,
-      });
-    }
-    return acc;
-  }, []);
-}
-
-/**
- * 提交套餐功能配置更新
- */
-async function handleTenantPlanSubmit(): Promise<void> {
-  const tenantId = checkedTenant.value.id;
-  if (!tenantId) return;
-  if (!tenantPlanId.value) {
-    ElMessage.warning("请选择租户套餐");
-    return;
-  }
-
-  const tenantForm = checkedTenantForm.value;
-  if (!tenantForm) return;
-
-  loading.value = true;
-  try {
-    const payload: TenantForm = {
-      ...tenantForm,
-      planId: tenantPlanId.value,
-    };
-    await TenantAPI.update(String(tenantId), payload);
-
-    if (hasPermTenantMenu.value) {
+    loading.value = true;
+    try {
+      const menuIds = await TenantPlanAPI.getPlanMenuIds(planId);
+      planMenuIds.value = normalizeMenuIds(menuIds);
       const allowedMenuIdSet = new Set(planMenuIds.value);
-      const menuIds: number[] = menuTreeRef.value
-        ? (menuTreeRef
+      const filteredOptions = allowedMenuIdSet.size
+        ? filterMenuOptionsByIds(menuSourceOptions.value, allowedMenuIdSet)
+        : [];
+      planPreviewOptions.value = filteredOptions;
+      menuPermOptions.value = applyMenuOptionsDisabled(filteredOptions, false);
+      await nextTick();
+      updateCheckedMenus();
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  // 根据套餐范围同步勾选菜单
+  function updateCheckedMenus() {
+    const allowedMenuIdSet = new Set(planMenuIds.value);
+    const checkedMenuIds =
+      tenantMenuIds.value.length > 0
+        ? tenantMenuIds.value.filter((menuId) => allowedMenuIdSet.has(menuId))
+        : planMenuIds.value;
+    menuTreeRef.value?.setCheckedKeys([], false);
+    checkedMenuIds.forEach((menuId) => menuTreeRef.value?.setChecked(menuId, true, false));
+    menuCheckedCount.value = checkedMenuIds.length;
+  }
+
+  /**
+   * 更新已勾选菜单数量
+   */
+  function handleMenuCheckedChange(): void {
+    const checkedKeys = menuTreeRef.value?.getCheckedKeys(false) || [];
+    menuCheckedCount.value = checkedKeys.length;
+  }
+
+  /**
+   * 打开套餐功能配置抽屉
+   */
+  async function openTenantCustomizeDialog(row?: TenantItem): Promise<void> {
+    const tenantId = row?.id ?? checkedTenant.value.id;
+    if (!tenantId) return;
+    if (isPlatformTenantId(tenantId)) return;
+
+    loading.value = true;
+    planPreviewKeywords.value = "";
+    planPreviewExpanded.value = false;
+    menuKeywords.value = "";
+    menuExpanded.value = false;
+    menuParentChildLinked.value = true;
+
+    checkedTenant.value = {
+      id: Number(tenantId),
+      name: row?.name || checkedTenant.value.name || String(tenantId),
+      planId: row?.planId != null ? Number(row.planId) : checkedTenant.value.planId,
+    };
+
+    try {
+      const [tenantForm, menuOptions, menuIds] = await Promise.all([
+        TenantAPI.getFormData(String(tenantId)),
+        MenuAPI.getOptions(false, MenuScopeEnum.TENANT),
+        hasPermTenantMenu.value ? TenantAPI.getTenantMenuIds(Number(tenantId)) : Promise.resolve([]),
+      ]);
+      checkedTenantForm.value = tenantForm;
+      tenantPlanId.value = tenantForm.planId != null ? Number(tenantForm.planId) : undefined;
+      if (!tenantPlanId.value) {
+        ElMessage.warning("请先选择套餐");
+        return;
+      }
+      menuSourceOptions.value = menuOptions;
+      tenantMenuIds.value = normalizeMenuIds(menuIds);
+      await handlePlanChange(tenantPlanId.value);
+      menuPermOptions.value = applyMenuOptionsDisabled(planPreviewOptions.value, false);
+      tenantPlanDialogVisible.value = true;
+      tenantPlanSelectVisible.value = false;
+      await nextTick();
+      updateCheckedMenus();
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  /**
+   * 提交更换套餐操作
+   */
+  async function handleTenantPlanSelectSubmit(): Promise<void> {
+    const tenantId = checkedTenant.value.id;
+    if (!tenantId) return;
+    if (!tenantPlanId.value) {
+      ElMessage.warning("请选择租户套餐");
+      return;
+    }
+    if (isPlanMenuEmpty.value) {
+      ElMessage.warning("该套餐未配置菜单");
+      return;
+    }
+
+    const currentPlanLabel = resolvePlanLabel(checkedTenant.value.planId);
+    const targetPlanLabel = resolvePlanLabel(tenantPlanId.value);
+    const tenantName = checkedTenant.value.name || "";
+
+    try {
+      await ElMessageBox.confirm(
+        `确认将租户「${tenantName}」\n从「${currentPlanLabel}」更换为「${targetPlanLabel}」？\n\n该操作将立即生效，并影响租户可用功能。`,
+        "确认更换套餐",
+        {
+          type: "warning",
+          confirmButtonText: "确认更换",
+          cancelButtonText: "取消",
+        }
+      );
+    } catch {
+      return;
+    }
+
+    const tenantForm = checkedTenantForm.value;
+    if (!tenantForm) return;
+
+    loading.value = true;
+    try {
+      const payload: TenantForm = {
+        ...tenantForm,
+        planId: tenantPlanId.value,
+      };
+      await TenantAPI.update(String(tenantId), payload);
+      if (hasPermTenantMenu.value) {
+        const targetPlanMenuIdSet = new Set(planMenuIds.value);
+        const keepMenuIds = originalEnabledMenuIds.value.filter((menuId) =>
+          targetPlanMenuIdSet.has(menuId)
+        );
+        await TenantAPI.updateTenantMenus(tenantId, keepMenuIds);
+      }
+      ElMessage.success("套餐已更换，请确认租户功能配置");
+      checkedTenant.value.planId = tenantPlanId.value;
+      tenantPlanSelectVisible.value = false;
+      fetchData();
+    } catch {
+      ElMessage.error("套餐选择失败");
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  /**
+   * 过滤菜单树，仅保留套餐允许的节点
+   */
+  function filterMenuOptionsByIds(
+    options: OptionItem[],
+    allowedMenuIdSet: Set<number>
+  ): OptionItem[] {
+    return options.reduce<OptionItem[]>((acc, option) => {
+      const children = option.children
+        ? filterMenuOptionsByIds(option.children, allowedMenuIdSet)
+        : [];
+      const allowed = allowedMenuIdSet.has(Number(option.value));
+      if (allowed || children.length > 0) {
+        acc.push({
+          ...option,
+          children: children.length > 0 ? children : undefined,
+        });
+      }
+      return acc;
+    }, []);
+  }
+
+  /**
+   * 提交套餐功能配置更新
+   */
+  async function handleTenantPlanSubmit(): Promise<void> {
+    const tenantId = checkedTenant.value.id;
+    if (!tenantId) return;
+    if (!tenantPlanId.value) {
+      ElMessage.warning("请选择租户套餐");
+      return;
+    }
+
+    const tenantForm = checkedTenantForm.value;
+    if (!tenantForm) return;
+
+    loading.value = true;
+    try {
+      const payload: TenantForm = {
+        ...tenantForm,
+        planId: tenantPlanId.value,
+      };
+      await TenantAPI.update(String(tenantId), payload);
+
+      if (hasPermTenantMenu.value) {
+        const allowedMenuIdSet = new Set(planMenuIds.value);
+        const menuIds: number[] = menuTreeRef.value
+          ? (menuTreeRef
             .value!.getCheckedNodes(false, true)
             .map((node: any) => Number(node.value)) as number[]) || []
-        : planMenuIds.value;
-      const filteredMenuIds: number[] = allowedMenuIdSet.size
-        ? menuIds.filter((menuId: number) => allowedMenuIdSet.has(menuId))
-        : menuIds;
-      await TenantAPI.updateTenantMenus(tenantId, filteredMenuIds);
-    }
+          : planMenuIds.value;
+        const filteredMenuIds: number[] = allowedMenuIdSet.size
+          ? menuIds.filter((menuId: number) => allowedMenuIdSet.has(menuId))
+          : menuIds;
+        await TenantAPI.updateTenantMenus(tenantId, filteredMenuIds);
+      }
 
-    ElMessage.success("租户功能配置已更新");
-    tenantPlanDialogVisible.value = false;
-    fetchData();
-  } catch {
-    ElMessage.error("菜单微调失败");
-  } finally {
-    loading.value = false;
+      ElMessage.success("租户功能配置已更新");
+      tenantPlanDialogVisible.value = false;
+      fetchData();
+    } catch {
+      ElMessage.error("菜单微调失败");
+    } finally {
+      loading.value = false;
+    }
   }
-}
 
-/**
- * 统一菜单ID为number并过滤无效值
- */
-function normalizeMenuIds(menuIds: Array<number | string>): number[] {
-  return menuIds.map((menuId) => Number(menuId)).filter((menuId) => !Number.isNaN(menuId));
-}
+  /**
+   * 统一菜单ID为number并过滤无效值
+   */
+  function normalizeMenuIds(menuIds: Array<number | string>): number[] {
+    return menuIds.map((menuId) => Number(menuId)).filter((menuId) => !Number.isNaN(menuId));
+  }
 
-/**
- * 递归设置菜单节点禁用状态
- */
-function applyMenuOptionsDisabled(options: OptionItem[], disabled: boolean): OptionItem[] {
-  return options.map((option) => ({
-    ...option,
-    disabled,
-    children: option.children ? applyMenuOptionsDisabled(option.children, disabled) : undefined,
-  }));
-}
+  /**
+   * 递归设置菜单节点禁用状态
+   */
+  function applyMenuOptionsDisabled(options: OptionItem[], disabled: boolean): OptionItem[] {
+    return options.map((option) => ({
+      ...option,
+      disabled,
+      children: option.children ? applyMenuOptionsDisabled(option.children, disabled) : undefined,
+    }));
+  }
 
-/**
- * 查询按钮点击事件
- */
-function handleQuery(): void {
-  queryParams.pageNum = 1;
-  fetchData();
-}
+  /**
+   * 查询按钮点击事件
+   */
+  function handleQuery(): void {
+    tableData.params.pageNum = 1;
+    fetchData();
+  }
 
-/**
- * 重置查询
- */
-function handleResetQuery(): void {
-  queryFormRef.value?.resetFields();
-  queryParams.pageNum = 1;
-  fetchData();
-}
+  /**
+   * 重置查询
+   */
+  function handleResetQuery(): void {
+    queryFormRef.value?.resetFields();
+    tableData.params.pageNum = 1;
+    fetchData();
+  }
 
-/**
- * 表格选择变化事件
- */
-function handleSelectionChange(selection: TenantItem[]): void {
-  ids.value = selection.map((item) => Number(item.id));
-}
+  /**
+   * 表格选择变化事件
+   */
+  function handleSelectionChange(selection: TenantItem[]): void {
+    ids.value = selection.map((item) => Number(item.id));
+  }
 
-/**
- * 打开弹窗
- * @param tenantId 租户ID（编辑时传入）
- */
-async function openDialog(tenantId?: string): Promise<void> {
-  dialogState.visible = true;
-  if (tenantId != null && tenantId !== "") {
-    dialogState.title = "修改租户";
-    const data = await TenantAPI.getFormData(tenantId);
-    Object.assign(formData, data);
-    formData.adminUsername = "";
-    formData.planId = formData.planId != null ? Number(formData.planId) : undefined;
-    if (isPlatformTenant.value) {
-      formData.planId = undefined;
+  /**
+   * 打开弹窗
+   * @param tenantId 租户ID（编辑时传入）
+   */
+  async function openDialog(tenantId?: string): Promise<void> {
+    dialogState.visible = true;
+    if (tenantId != null && tenantId !== "") {
+      dialogState.title = "修改租户";
+      const data = await TenantAPI.getFormData(tenantId);
+      Object.assign(formData, data);
+      formData.adminUsername = "";
+      formData.planId = formData.planId != null ? Number(formData.planId) : undefined;
+      if (isPlatformTenant.value) {
+        formData.planId = undefined;
+      }
+    } else {
+      dialogState.title = "新增租户";
+      Object.assign(formData, {
+        id: undefined,
+        name: "",
+        code: "",
+        domain: "",
+        contactName: "",
+        contactPhone: "",
+        contactEmail: "",
+        planId: undefined,
+        remark: "",
+        expireTime: undefined,
+        status: 1,
+        adminUsername: "",
+      });
     }
-  } else {
-    dialogState.title = "新增租户";
+  }
+
+  /**
+   * 关闭弹窗
+   */
+  function closeDialog(): void {
+    dialogState.visible = false;
+    dataFormRef.value?.resetFields();
+    dataFormRef.value?.clearValidate();
     Object.assign(formData, {
       id: undefined,
       name: "",
@@ -874,139 +750,115 @@ async function openDialog(tenantId?: string): Promise<void> {
       adminUsername: "",
     });
   }
-}
 
-/**
- * 关闭弹窗
- */
-function closeDialog(): void {
-  dialogState.visible = false;
-  dataFormRef.value?.resetFields();
-  dataFormRef.value?.clearValidate();
-  Object.assign(formData, {
-    id: undefined,
-    name: "",
-    code: "",
-    domain: "",
-    contactName: "",
-    contactPhone: "",
-    contactEmail: "",
-    planId: undefined,
-    remark: "",
-    expireTime: undefined,
-    status: 1,
-    adminUsername: "",
-  });
-}
+  /**
+   * 提交表单
+   */
+  const handleSubmit = useDebounceFn(async (): Promise<void> => {
+    const valid = await dataFormRef.value?.validate().then(
+      () => true,
+      () => false
+    );
+    if (!valid) return;
 
-/**
- * 提交表单
- */
-const handleSubmit = useDebounceFn(async (): Promise<void> => {
-  const valid = await dataFormRef.value?.validate().then(
-    () => true,
-    () => false
-  );
-  if (!valid) return;
-
-  loading.value = true;
-  try {
-    const tenantId = formData.id;
-    if (tenantId != null && String(tenantId) !== "") {
-      const payload: TenantForm = {
-        id: formData.id,
-        name: formData.name,
-        code: formData.code,
-        domain: formData.domain,
-        contactName: formData.contactName,
-        contactPhone: formData.contactPhone,
-        contactEmail: formData.contactEmail,
-        planId: formData.planId,
-        remark: formData.remark,
-        expireTime: formData.expireTime,
-        status: formData.status,
-      };
-      await TenantAPI.update(String(tenantId), payload);
-      ElMessage.success("修改成功");
-    } else {
-      const payload: TenantCreateForm = {
-        name: formData.name,
-        code: formData.code,
-        domain: formData.domain,
-        contactName: formData.contactName,
-        contactPhone: formData.contactPhone,
-        contactEmail: formData.contactEmail,
-        planId: formData.planId,
-        remark: formData.remark,
-        expireTime: formData.expireTime,
-        adminUsername: formData.adminUsername,
-      };
-      const result = await TenantAPI.create(payload);
-      ElMessage.success(`新增成功：管理员账号 ${result?.adminUsername || ""}`);
-    }
-
-    closeDialog();
-    handleResetQuery();
-  } finally {
-    loading.value = false;
-  }
-}, 300);
-
-/**
- * 删除租户
- * @param tenantId 租户ID
- */
-function handleDelete(tenantId?: string): void {
-  const tenantIds = tenantId != null && tenantId !== "" ? tenantId : ids.value.join(",");
-  if (!tenantIds) {
-    ElMessage.warning("请勾选删除项");
-    return;
-  }
-
-  ElMessageBox.confirm("确认删除选中的租户吗？", "警告", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    type: "warning",
-  }).then(
-    async () => {
-      loading.value = true;
-      try {
-        await TenantAPI.deleteByIds(tenantIds);
-        ElMessage.success("删除成功");
-        handleResetQuery();
-      } finally {
-        loading.value = false;
+    loading.value = true;
+    try {
+      const tenantId = formData.id;
+      if (tenantId != null && String(tenantId) !== "") {
+        const payload: TenantForm = {
+          id: formData.id,
+          name: formData.name,
+          code: formData.code,
+          domain: formData.domain,
+          contactName: formData.contactName,
+          contactPhone: formData.contactPhone,
+          contactEmail: formData.contactEmail,
+          planId: formData.planId,
+          remark: formData.remark,
+          expireTime: formData.expireTime,
+          status: formData.status,
+        };
+        await TenantAPI.update(String(tenantId), payload);
+        ElMessage.success("修改成功");
+      } else {
+        const payload: TenantCreateForm = {
+          name: formData.name,
+          code: formData.code,
+          domain: formData.domain,
+          contactName: formData.contactName,
+          contactPhone: formData.contactPhone,
+          contactEmail: formData.contactEmail,
+          planId: formData.planId,
+          remark: formData.remark,
+          expireTime: formData.expireTime,
+          adminUsername: formData.adminUsername,
+        };
+        const result = await TenantAPI.create(payload);
+        ElMessage.success(`新增成功：管理员账号 ${result?.adminUsername || ""}`);
       }
-    },
-    () => {
-      // 用户取消
+
+      closeDialog();
+      handleResetQuery();
+    } finally {
+      loading.value = false;
     }
-  );
-}
+  }, 300);
 
-/**
- * 加载租户套餐选项
- */
-async function fetchPlanOptions(): Promise<void> {
-  const options = await TenantPlanAPI.getOptions();
-  planOptions.value = options.map((item) => ({
-    ...item,
-    value: item.value != null ? Number(item.value) : item.value,
-  }));
-}
+  /**
+   * 删除租户
+   * @param tenantId 租户ID
+   */
+  function handleDelete(tenantId?: string): void {
+    const tenantIds = tenantId != null && tenantId !== "" ? tenantId : ids.value.join(",");
+    if (!tenantIds) {
+      ElMessage.warning("请勾选删除项");
+      return;
+    }
 
-// 菜单搜索关键字联动过滤树
-watch(menuKeywords, (val) => {
-  menuTreeRef.value?.filter(val);
-});
+    ElMessageBox.confirm("确认删除选中的租户吗？", "警告", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    }).then(
+      async () => {
+        loading.value = true;
+        try {
+          await TenantAPI.deleteByIds(tenantIds);
+          ElMessage.success("删除成功");
+          handleResetQuery();
+        } finally {
+          loading.value = false;
+        }
+      },
+      () => {
+        // 用户取消
+      }
+    );
+  }
 
-// 套餐预览搜索关键字联动过滤树
-watch(planPreviewKeywords, (val) => {
-  planPreviewTreeRef.value?.filter(val);
-});
+  /**
+   * 加载租户套餐选项
+   */
+  async function fetchPlanOptions(): Promise<void> {
+    const options = await TenantPlanAPI.getOptions();
+    planOptions.value = options.map((item) => ({
+      ...item,
+      value: item.value != null ? Number(item.value) : item.value,
+    }));
+  }
 
-onMounted(() => {
-  fetchData();
-  fetchPlanOptions();
-});
+  // 菜单搜索关键字联动过滤树
+  watch(menuKeywords, (val) => {
+    menuTreeRef.value?.filter(val);
+  });
+
+  // 套餐预览搜索关键字联动过滤树
+  watch(planPreviewKeywords, (val) => {
+    planPreviewTreeRef.value?.filter(val);
+  });
+
+  onMounted(() => {
+    fetchData();
+    fetchPlanOptions();
+  });
 </script>
diff --git a/src/views/system/tenant/plan.vue b/src/views/system/tenant/plan.vue
index 33e27292..291d0e8a 100644
--- a/src/views/system/tenant/plan.vue
+++ b/src/views/system/tenant/plan.vue
@@ -1,18 +1,13 @@
 <template>
   <div class="page-container">
     <el-card class="page-search" shadow="never">
-      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+      <el-form ref="queryFormRef" :model="tableData.params" :inline="true">
         <el-form-item label="关键字" prop="keywords">
-          <el-input
-            v-model="queryParams.keywords"
-            placeholder="套餐名称/套餐编码"
-            clearable
-            @keyup.enter="handleQuery"
-          />
+          <el-input v-model="tableData.params.keywords" placeholder="套餐名称/套餐编码" clearable @keyup.enter="handleQuery" />
         </el-form-item>
 
         <el-form-item label="状态" prop="status">
-          <el-select v-model="queryParams.status" placeholder="全部" clearable style="width: 120px">
+          <el-select v-model="tableData.params.status" placeholder="全部" clearable style="width: 120px">
             <el-option label="启用" :value="1" />
             <el-option label="停用" :value="0" />
           </el-select>
@@ -28,24 +23,13 @@
     <el-card class="page-content" shadow="never">
       <div class="page-toolbar">
         <div class="page-toolbar__left">
-          <el-button
-            v-hasPerm="['sys:tenant-plan:create']"
-            type="success"
-            icon="plus"
-            @click="openDialog()"
-          >
+          <el-button v-hasPerm="['sys:tenant-plan:create']" type="success" icon="plus" @click="openDialog()">
             新增
           </el-button>
         </div>
       </div>
 
-      <el-table
-        ref="dataTableRef"
-        v-loading="loading"
-        :data="pageData"
-        highlight-current-row
-        border
-      >
+      <el-table ref="dataTableRef" v-loading="loading" :data="tableData.list" highlight-current-row border>
         <el-table-column type="index" label="序号" width="60" />
         <el-table-column label="套餐名称" prop="name" min-width="120" />
         <el-table-column label="套餐编码" prop="code" width="160" />
@@ -60,55 +44,25 @@
         <el-table-column label="创建时间" prop="createTime" width="180" />
         <el-table-column fixed="right" label="操作" width="240">
           <template #default="scope">
-            <el-button
-              v-hasPerm="['sys:tenant-plan:assign']"
-              type="primary"
-              size="small"
-              link
-              icon="menu"
-              @click="openPlanMenuDialog(scope.row)"
-            >
+            <el-button v-hasPerm="['sys:tenant-plan:assign']" type="primary" size="small" link icon="menu"
+              @click="openPlanMenuDialog(scope.row)">
               菜单配置
             </el-button>
-            <el-button
-              v-hasPerm="['sys:tenant-plan:update']"
-              type="primary"
-              size="small"
-              link
-              icon="edit"
-              @click="openDialog(scope.row.id)"
-            >
+            <el-button v-hasPerm="['sys:tenant-plan:update']" type="primary" size="small" link icon="edit" @click="openDialog(scope.row.id)">
               编辑
             </el-button>
-            <el-button
-              v-hasPerm="['sys:tenant-plan:delete']"
-              type="danger"
-              size="small"
-              link
-              icon="delete"
-              @click="handleDelete(scope.row.id)"
-            >
+            <el-button v-hasPerm="['sys:tenant-plan:delete']" type="danger" size="small" link icon="delete" @click="handleDelete(scope.row.id)">
               删除
             </el-button>
           </template>
         </el-table-column>
       </el-table>
 
-      <pagination
-        v-if="total > 0"
-        v-model:total="total"
-        v-model:page="queryParams.pageNum"
-        v-model:limit="queryParams.pageSize"
-        @pagination="fetchData"
-      />
+      <pagination v-if="tableData.total > 0" v-model:total="tableData.total" v-model:page="tableData.params.pageNum"
+        v-model:limit="tableData.params.pageSize" @pagination="fetchData" />
     </el-card>
 
-    <el-dialog
-      v-model="dialogState.visible"
-      :title="dialogState.title"
-      width="520px"
-      @close="closeDialog"
-    >
+    <el-dialog v-model="dialogState.visible" :title="dialogState.title" width="520px" @close="closeDialog">
       <el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="100px">
         <el-form-item label="套餐名称" prop="name">
           <el-input v-model="formData.name" placeholder="请输入套餐名称" />
@@ -123,12 +77,7 @@
           </el-radio-group>
         </el-form-item>
         <el-form-item label="排序" prop="sort">
-          <el-input-number
-            v-model="formData.sort"
-            controls-position="right"
-            :min="0"
-            style="width: 120px"
-          />
+          <el-input-number v-model="formData.sort" controls-position="right" :min="0" style="width: 120px" />
         </el-form-item>
         <el-form-item label="备注" prop="remark">
           <el-input v-model="formData.remark" type="textarea" :rows="3" placeholder="可选" />
@@ -142,12 +91,7 @@
       </template>
     </el-dialog>
 
-    <el-drawer
-      v-model="planMenuDialogVisible"
-      :title="'【' + checkedPlan.name + '】菜单配置'"
-      size="600px"
-      @close="closePlanMenuDialog"
-    >
+    <el-drawer v-model="planMenuDialogVisible" :title="'【' + checkedPlan.name + '】菜单配置'" size="600px" @close="closePlanMenuDialog">
       <div class="flex-x-between">
         <el-input v-model="menuKeywords" clearable class="w-[150px]" placeholder="菜单名称">
           <template #prefix>
@@ -177,16 +121,8 @@
         </div>
       </div>
 
-      <el-tree
-        ref="menuTreeRef"
-        node-key="value"
-        show-checkbox
-        :data="menuPermOptions"
-        :filter-node-method="handleMenuFilter"
-        :default-expand-all="true"
-        :check-strictly="!menuParentChildLinked"
-        class="mt-5"
-      >
+      <el-tree ref="menuTreeRef" node-key="value" show-checkbox :data="menuPermOptions" :filter-node-method="handleMenuFilter"
+        :default-expand-all="true" :check-strictly="!menuParentChildLinked" class="mt-5">
         <template #default="{ data }">
           {{ data.label }}
         </template>
@@ -194,11 +130,7 @@
 
       <template #footer>
         <div class="dialog-footer">
-          <el-button
-            v-hasPerm="['sys:tenant-plan:assign']"
-            type="primary"
-            @click="handlePlanMenuSubmit"
-          >
+          <el-button v-hasPerm="['sys:tenant-plan:assign']" type="primary" @click="handlePlanMenuSubmit">
             确定
           </el-button>
           <el-button @click="planMenuDialogVisible = false">取消</el-button>
@@ -209,122 +141,140 @@
 </template>
 
 <script setup lang="ts">
-defineOptions({
-  name: "TenantPlan",
-  inheritAttrs: false,
-});
+  defineOptions({
+    name: "TenantPlan",
+    inheritAttrs: false,
+  });
 
-import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from "element-plus";
-import { useDebounceFn } from "@vueuse/core";
-import MenuAPI from "@/api/system/menu";
-import TenantPlanAPI from "@/api/system/tenant-plan";
-import type {
-  TenantPlanForm,
-  TenantPlanItem,
-  TenantPlanQueryParams,
-} from "@/api/system/tenant-plan";
-import type { OptionItem } from "@/api/common";
-import { MenuScopeEnum } from "@/enums/business";
+  import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from "element-plus";
+  import { useDebounceFn } from "@vueuse/core";
+  import MenuAPI from "@/api/system/menu";
+  import TenantPlanAPI from "@/api/system/tenant-plan";
+  import type {
+    TenantPlanForm,
+    TenantPlanItem,
+  } from "@/api/system/tenant-plan";
+  import type { OptionItem } from "@/api/common";
+  import { MenuScopeEnum } from "@/enums/business";
 
-// 表单引用
-const queryFormRef = ref<FormInstance>();
-const dataFormRef = ref<FormInstance>();
-const dataTableRef = ref();
-const menuTreeRef = ref();
+  // 表单引用
+  const queryFormRef = ref<FormInstance>();
+  const dataFormRef = ref<FormInstance>();
+  const dataTableRef = ref();
+  const menuTreeRef = ref();
 
-// 查询参数
-const queryParams = reactive<TenantPlanQueryParams>({
-  pageNum: 1,
-  pageSize: 10,
-  keywords: "",
-});
+  // 列表数据
+  const menuPermOptions = ref<OptionItem[]>([]);
+  const loading = ref(false);
 
-// 列表数据
-const pageData = ref<TenantPlanItem[]>([]);
-const menuPermOptions = ref<OptionItem[]>([]);
-const total = ref(0);
-const loading = ref(false);
+  const tableData = reactive<PageResult<TenantPlanItem>>({
+    list: [],
+    total: 0,
+    params: { //查询参数
+      pageNum: 1,
+      pageSize: 10,
+      keywords: "",
+    },
+  });
 
-// 弹窗状态
-const dialogState = reactive({
-  title: "",
-  visible: false,
-});
+  // 弹窗状态
+  const dialogState = reactive({
+    title: "",
+    visible: false,
+  });
 
-// 表单数据
-const formData = reactive<TenantPlanForm>({
-  id: undefined,
-  name: "",
-  code: "",
-  status: 1,
-  sort: 1,
-  remark: "",
-});
+  // 表单数据
+  const formData = reactive<TenantPlanForm>({
+    id: undefined,
+    name: "",
+    code: "",
+    status: 1,
+    sort: 1,
+    remark: "",
+  });
 
-// 验证规则
-const rules: FormRules = {
-  name: [{ required: true, message: "请输入套餐名称", trigger: "blur" }],
-  code: [{ required: true, message: "请输入套餐编码", trigger: "blur" }],
-  status: [{ required: true, message: "请选择状态", trigger: "change" }],
-};
+  // 验证规则
+  const rules: FormRules = {
+    name: [{ required: true, message: "请输入套餐名称", trigger: "blur" }],
+    code: [{ required: true, message: "请输入套餐编码", trigger: "blur" }],
+    status: [{ required: true, message: "请选择状态", trigger: "change" }],
+  };
 
-// 菜单配置弹窗状态
-const planMenuDialogVisible = ref(false);
-const checkedPlan = ref<{ id?: number; name?: string }>({});
-const menuKeywords = ref("");
-const menuExpanded = ref(true);
-const menuParentChildLinked = ref(true);
+  // 菜单配置弹窗状态
+  const planMenuDialogVisible = ref(false);
+  const checkedPlan = ref<{ id?: number; name?: string }>({});
+  const menuKeywords = ref("");
+  const menuExpanded = ref(true);
+  const menuParentChildLinked = ref(true);
 
-/**
- * 加载租户套餐分页数据
- */
-function fetchData(): void {
-  loading.value = true;
-  TenantPlanAPI.getPage(queryParams)
-    .then((data) => {
-      pageData.value = data.list;
-      total.value = data.total ?? 0;
-    })
-    .finally(() => {
-      loading.value = false;
-    });
-}
+  /**
+   * 加载租户套餐分页数据
+   */
+  function fetchData(): void {
+    loading.value = true;
+    TenantPlanAPI.getPage(tableData.params)
+      .then((data) => {
+        tableData.list = data.list ?? [];
+        tableData.total = data.total ?? 0;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  }
 
-/**
- * 查询按钮点击事件
- */
-function handleQuery(): void {
-  queryParams.pageNum = 1;
-  fetchData();
-}
+  /**
+   * 查询按钮点击事件
+   */
+  function handleQuery(): void {
+    tableData.params.pageNum = 1;
+    fetchData();
+  }
 
-/**
- * 重置查询
- */
-function handleResetQuery(): void {
-  queryFormRef.value?.resetFields();
-  queryParams.pageNum = 1;
-  fetchData();
-}
+  /**
+   * 重置查询
+   */
+  function handleResetQuery(): void {
+    queryFormRef.value?.resetFields();
+    tableData.params.pageNum = 1;
+    fetchData();
+  }
 
-/**
- * 打开弹窗
- * @param planId 套餐ID（编辑时传入）
- */
-async function openDialog(planId?: number): Promise<void> {
-  dialogState.visible = true;
-  if (planId) {
-    dialogState.title = "修改套餐";
-    const data = await TenantPlanAPI.getFormData(String(planId));
-    Object.assign(formData, data);
-    if (formData.status == null) {
-      formData.status = 1;
+  /**
+   * 打开弹窗
+   * @param planId 套餐ID（编辑时传入）
+   */
+  async function openDialog(planId?: number): Promise<void> {
+    dialogState.visible = true;
+    if (planId) {
+      dialogState.title = "修改套餐";
+      const data = await TenantPlanAPI.getFormData(String(planId));
+      Object.assign(formData, data);
+      if (formData.status == null) {
+        formData.status = 1;
+      }
+      if (formData.sort == null) {
+        formData.sort = 1;
+      }
+    } else {
+      dialogState.title = "新增套餐";
+      Object.assign(formData, {
+        id: undefined,
+        name: "",
+        code: "",
+        status: 1,
+        sort: 1,
+        remark: "",
+      });
     }
-    if (formData.sort == null) {
-      formData.sort = 1;
-    }
-  } else {
-    dialogState.title = "新增套餐";
+  }
+
+  /**
+   * 关闭弹窗
+   */
+  function closeDialog(): void {
+    dialogState.visible = false;
+    dataFormRef.value?.resetFields();
+    dataFormRef.value?.clearValidate();
     Object.assign(formData, {
       id: undefined,
       name: "",
@@ -334,164 +284,146 @@ async function openDialog(planId?: number): Promise<void> {
       remark: "",
     });
   }
-}
 
-/**
- * 关闭弹窗
- */
-function closeDialog(): void {
-  dialogState.visible = false;
-  dataFormRef.value?.resetFields();
-  dataFormRef.value?.clearValidate();
-  Object.assign(formData, {
-    id: undefined,
-    name: "",
-    code: "",
-    status: 1,
-    sort: 1,
-    remark: "",
-  });
-}
+  /**
+   * 提交表单
+   */
+  const handleSubmit = useDebounceFn(async (): Promise<void> => {
+    const valid = await dataFormRef.value?.validate().then(
+      () => true,
+      () => false
+    );
+    if (!valid) return;
 
-/**
- * 提交表单
- */
-const handleSubmit = useDebounceFn(async (): Promise<void> => {
-  const valid = await dataFormRef.value?.validate().then(
-    () => true,
-    () => false
-  );
-  if (!valid) return;
-
-  loading.value = true;
-  try {
-    if (formData.id) {
-      await TenantPlanAPI.update(String(formData.id), formData);
-      ElMessage.success("修改成功");
-    } else {
-      await TenantPlanAPI.create(formData);
-      ElMessage.success("新增成功");
-    }
-    closeDialog();
-    handleResetQuery();
-  } finally {
-    loading.value = false;
-  }
-}, 300);
-
-/**
- * 删除套餐
- * @param planId 套餐ID
- */
-function handleDelete(planId?: number): void {
-  if (!planId) return;
-  ElMessageBox.confirm("确认删除该租户套餐吗？", "警告", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    type: "warning",
-  }).then(() => {
     loading.value = true;
-    TenantPlanAPI.deleteByIds(String(planId))
-      .then(() => {
-        ElMessage.success("删除成功");
-        handleResetQuery();
-      })
-      .finally(() => {
-        loading.value = false;
-      });
-  });
-}
-
-/**
- * 打开菜单配置弹窗
- */
-async function openPlanMenuDialog(row: TenantPlanItem): Promise<void> {
-  if (!row.id) return;
-  planMenuDialogVisible.value = true;
-  loading.value = true;
-  checkedPlan.value = { id: row.id, name: row.name };
-
-  try {
-    const menuOptions = await MenuAPI.getOptions(false, MenuScopeEnum.TENANT);
-    menuPermOptions.value = menuOptions;
-    const menuIds = await TenantPlanAPI.getPlanMenuIds(row.id);
-    await nextTick();
-    menuTreeRef.value?.setCheckedKeys([], false);
-    menuIds.forEach((menuId) => menuTreeRef.value?.setChecked(menuId, true, false));
-  } finally {
-    loading.value = false;
-  }
-}
-
-/**
- * 关闭菜单配置弹窗
- */
-function closePlanMenuDialog(): void {
-  planMenuDialogVisible.value = false;
-  menuKeywords.value = "";
-  menuExpanded.value = true;
-  menuParentChildLinked.value = true;
-  menuTreeRef.value?.setCheckedKeys([], false);
-}
-
-/**
- * 展开/收缩菜单树
- */
-function toggleMenuTree(): void {
-  menuExpanded.value = !menuExpanded.value;
-  if (menuTreeRef.value) {
-    Object.values(menuTreeRef.value.store.nodesMap).forEach((node: any) => {
-      if (menuExpanded.value) {
-        node.expand();
+    try {
+      if (formData.id) {
+        await TenantPlanAPI.update(String(formData.id), formData);
+        ElMessage.success("修改成功");
       } else {
-        node.collapse();
+        await TenantPlanAPI.create(formData);
+        ElMessage.success("新增成功");
       }
+      closeDialog();
+      handleResetQuery();
+    } finally {
+      loading.value = false;
+    }
+  }, 300);
+
+  /**
+   * 删除套餐
+   * @param planId 套餐ID
+   */
+  function handleDelete(planId?: number): void {
+    if (!planId) return;
+    ElMessageBox.confirm("确认删除该租户套餐吗？", "警告", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    }).then(() => {
+      loading.value = true;
+      TenantPlanAPI.deleteByIds(String(planId))
+        .then(() => {
+          ElMessage.success("删除成功");
+          handleResetQuery();
+        })
+        .finally(() => {
+          loading.value = false;
+        });
     });
   }
-}
 
-/**
- * 切换父子联动
- */
-function handleMenuLinkChange(val: string | number | boolean): void {
-  menuParentChildLinked.value = Boolean(val);
-}
+  /**
+   * 打开菜单配置弹窗
+   */
+  async function openPlanMenuDialog(row: TenantPlanItem): Promise<void> {
+    if (!row.id) return;
+    planMenuDialogVisible.value = true;
+    loading.value = true;
+    checkedPlan.value = { id: row.id, name: row.name };
 
-/**
- * 菜单树过滤逻辑
- */
-function handleMenuFilter(value: string, data: { [key: string]: any }): boolean {
-  if (!value) return true;
-  return data.label.includes(value);
-}
-
-/**
- * 提交菜单配置
- */
-async function handlePlanMenuSubmit(): Promise<void> {
-  const planId = checkedPlan.value.id;
-  if (!planId) return;
-
-  const checkedMenuIds: number[] = menuTreeRef
-    .value!.getCheckedNodes(false, true)
-    .map((node: any) => node.value);
-
-  loading.value = true;
-  try {
-    await TenantPlanAPI.updatePlanMenus(planId, checkedMenuIds);
-    ElMessage.success("菜单配置成功");
-    planMenuDialogVisible.value = false;
-  } finally {
-    loading.value = false;
+    try {
+      const menuOptions = await MenuAPI.getOptions(false, MenuScopeEnum.TENANT);
+      menuPermOptions.value = menuOptions;
+      const menuIds = await TenantPlanAPI.getPlanMenuIds(row.id);
+      await nextTick();
+      menuTreeRef.value?.setCheckedKeys([], false);
+      menuIds.forEach((menuId) => menuTreeRef.value?.setChecked(menuId, true, false));
+    } finally {
+      loading.value = false;
+    }
   }
-}
 
-// 菜单树关键字过滤
-watch(menuKeywords, (val) => {
-  menuTreeRef.value?.filter(val);
-});
+  /**
+   * 关闭菜单配置弹窗
+   */
+  function closePlanMenuDialog(): void {
+    planMenuDialogVisible.value = false;
+    menuKeywords.value = "";
+    menuExpanded.value = true;
+    menuParentChildLinked.value = true;
+    menuTreeRef.value?.setCheckedKeys([], false);
+  }
 
-onMounted(() => {
-  fetchData();
-});
+  /**
+   * 展开/收缩菜单树
+   */
+  function toggleMenuTree(): void {
+    menuExpanded.value = !menuExpanded.value;
+    if (menuTreeRef.value) {
+      Object.values(menuTreeRef.value.store.nodesMap).forEach((node: any) => {
+        if (menuExpanded.value) {
+          node.expand();
+        } else {
+          node.collapse();
+        }
+      });
+    }
+  }
+
+  /**
+   * 切换父子联动
+   */
+  function handleMenuLinkChange(val: string | number | boolean): void {
+    menuParentChildLinked.value = Boolean(val);
+  }
+
+  /**
+   * 菜单树过滤逻辑
+   */
+  function handleMenuFilter(value: string, data: { [key: string]: any }): boolean {
+    if (!value) return true;
+    return data.label.includes(value);
+  }
+
+  /**
+   * 提交菜单配置
+   */
+  async function handlePlanMenuSubmit(): Promise<void> {
+    const planId = checkedPlan.value.id;
+    if (!planId) return;
+
+    const checkedMenuIds: number[] = menuTreeRef
+      .value!.getCheckedNodes(false, true)
+      .map((node: any) => node.value);
+
+    loading.value = true;
+    try {
+      await TenantPlanAPI.updatePlanMenus(planId, checkedMenuIds);
+      ElMessage.success("菜单配置成功");
+      planMenuDialogVisible.value = false;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  // 菜单树关键字过滤
+  watch(menuKeywords, (val) => {
+    menuTreeRef.value?.filter(val);
+  });
+
+  onMounted(() => {
+    fetchData();
+  });
 </script>
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 458e41dc..879b68c8 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -4,45 +4,28 @@
     <el-row :gutter="20">
       <!-- 部门树 -->
       <el-col :lg="4" :xs="24" class="page-aside">
-        <UserDeptTree v-model="queryParams.deptId" @node-click="handleQuery" />
+        <UserDeptTree v-model="tableData.params.deptId" @node-click="handleQuery" />
       </el-col>
 
       <!-- 用户列表 -->
       <el-col :lg="20" :xs="24" class="page-main">
         <!-- 搜索区域 -->
         <el-card shadow="never" class="page-search">
-          <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="auto">
+          <el-form ref="queryFormRef" :model="tableData.params" :inline="true" label-width="auto">
             <el-form-item label="关键字" prop="keywords">
-              <el-input
-                v-model="queryParams.keywords"
-                placeholder="用户名/昵称/手机号"
-                clearable
-                @keyup.enter="handleQuery"
-              />
+              <el-input v-model="tableData.params.keywords" placeholder="用户名/昵称/手机号" clearable @keyup.enter="handleQuery" />
             </el-form-item>
 
             <el-form-item label="状态" prop="status">
-              <el-select
-                v-model="queryParams.status"
-                placeholder="全部"
-                clearable
-                style="width: 100px"
-              >
+              <el-select v-model="tableData.params.status" placeholder="全部" clearable style="width: 100px">
                 <el-option label="正常" :value="1" />
                 <el-option label="禁用" :value="0" />
               </el-select>
             </el-form-item>
 
             <el-form-item label="创建时间">
-              <el-date-picker
-                v-model="queryParams.createTime"
-                :editable="false"
-                type="daterange"
-                range-separator="~"
-                start-placeholder="开始时间"
-                end-placeholder="截止时间"
-                value-format="YYYY-MM-DD"
-              />
+              <el-date-picker v-model="tableData.params.createTime" :editable="false" type="daterange" range-separator="~"
+                start-placeholder="开始时间" end-placeholder="截止时间" value-format="YYYY-MM-DD" />
             </el-form-item>
 
             <el-form-item>
@@ -55,21 +38,10 @@
         <el-card shadow="never" class="page-content">
           <div class="page-toolbar">
             <div class="page-toolbar__left">
-              <el-button
-                v-hasPerm="['sys:user:create']"
-                type="success"
-                icon="plus"
-                @click="handleCreateClick"
-              >
+              <el-button v-hasPerm="['sys:user:create']" type="success" icon="plus" @click="handleCreateClick">
                 新增
               </el-button>
-              <el-button
-                v-hasPerm="'sys:user:delete'"
-                type="danger"
-                icon="delete"
-                :disabled="!hasSelection"
-                @click="handleDelete()"
-              >
+              <el-button v-hasPerm="'sys:user:delete'" type="danger" icon="delete" :disabled="!hasSelection" @click="handleDelete()">
                 删除
               </el-button>
             </div>
@@ -84,15 +56,8 @@
             </div>
           </div>
 
-          <el-table
-            v-loading="loading"
-            :data="userList"
-            border
-            stripe
-            highlight-current-row
-            row-key="id"
-            @selection-change="handleSelectionChange"
-          >
+          <el-table v-loading="loading" :data="tableData.list" border stripe highlight-current-row row-key="id"
+            @selection-change="handleSelectionChange">
             <el-table-column type="selection" width="50" align="center" />
             <el-table-column label="用户名" prop="username" min-width="120" show-overflow-tooltip />
             <el-table-column label="昵称" width="200" align="center" prop="nickname" />
@@ -115,66 +80,31 @@
             <el-table-column label="创建时间" align="center" prop="createTime" width="180" />
             <el-table-column label="操作" fixed="right" width="220">
               <template #default="scope">
-                <el-button
-                  v-hasPerm="'sys:user:reset-password'"
-                  type="primary"
-                  icon="RefreshLeft"
-                  size="small"
-                  link
-                  @click="handleResetPassword(scope.row)"
-                >
+                <el-button v-hasPerm="'sys:user:reset-password'" type="primary" icon="RefreshLeft" size="small" link
+                  @click="handleResetPassword(scope.row)">
                   重置密码
                 </el-button>
-                <el-button
-                  v-hasPerm="'sys:user:update'"
-                  type="primary"
-                  icon="edit"
-                  link
-                  size="small"
-                  @click="handleEditClick(scope.row.id)"
-                >
+                <el-button v-hasPerm="'sys:user:update'" type="primary" icon="edit" link size="small" @click="handleEditClick(scope.row.id)">
                   编辑
                 </el-button>
-                <el-button
-                  v-hasPerm="'sys:user:delete'"
-                  type="danger"
-                  icon="delete"
-                  link
-                  size="small"
-                  @click="handleDelete(scope.row.id)"
-                >
+                <el-button v-hasPerm="'sys:user:delete'" type="danger" icon="delete" link size="small" @click="handleDelete(scope.row.id)">
                   删除
                 </el-button>
               </template>
             </el-table-column>
           </el-table>
 
-          <pagination
-            v-if="total > 0"
-            v-model:total="total"
-            v-model:page="queryParams.pageNum"
-            v-model:limit="queryParams.pageSize"
-            @pagination="fetchList"
-          />
+          <pagination v-if="tableData.total > 0" v-model:total="tableData.total" v-model:page="tableData.params.pageNum"
+            v-model:limit="tableData.params.pageSize" @pagination="fetchList" />
         </el-card>
       </el-col>
     </el-row>
 
     <!-- 用户表单 -->
-    <el-drawer
-      v-model="dialogState.visible"
-      :title="dialogState.title"
-      append-to-body
-      :size="drawerSize"
-      @close="closeDialog"
-    >
+    <el-drawer v-model="dialogState.visible" :title="dialogState.title" append-to-body :size="drawerSize" @close="closeDialog">
       <el-form ref="userFormRef" :model="formData" :rules="rules" label-width="80px">
         <el-form-item label="用户名" prop="username">
-          <el-input
-            v-model="formData.username"
-            :readonly="!!formData.id"
-            placeholder="请输入用户名"
-          />
+          <el-input v-model="formData.username" :readonly="!!formData.id" placeholder="请输入用户名" />
         </el-form-item>
 
         <el-form-item label="用户昵称" prop="nickname">
@@ -182,14 +112,8 @@
         </el-form-item>
 
         <el-form-item label="所属部门" prop="deptId">
-          <el-tree-select
-            v-model="formData.deptId"
-            placeholder="请选择所属部门"
-            :data="deptOptions"
-            filterable
-            check-strictly
-            :render-after-expand="false"
-          />
+          <el-tree-select v-model="formData.deptId" placeholder="请选择所属部门" :data="deptOptions" filterable check-strictly
+            :render-after-expand="false" />
         </el-form-item>
 
         <el-form-item label="性别" prop="gender">
@@ -198,12 +122,7 @@
 
         <el-form-item label="角色" prop="roleIds">
           <el-select v-model="formData.roleIds" multiple placeholder="请选择">
-            <el-option
-              v-for="item in roleOptions"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
+            <el-option v-for="item in roleOptions" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
         </el-form-item>
 
@@ -216,14 +135,8 @@
         </el-form-item>
 
         <el-form-item label="状态" prop="status">
-          <el-switch
-            v-model="formData.status"
-            inline-prompt
-            active-text="正常"
-            inactive-text="禁用"
-            :active-value="CommonStatus.ENABLED"
-            :inactive-value="CommonStatus.DISABLED"
-          />
+          <el-switch v-model="formData.status" inline-prompt active-text="正常" inactive-text="禁用" :active-value="CommonStatus.ENABLED"
+            :inactive-value="CommonStatus.DISABLED" />
         </el-form-item>
       </el-form>
 
@@ -241,290 +154,290 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref } from "vue";
-import { useDebounceFn } from "@vueuse/core";
-import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from "element-plus";
-import type { UserForm, UserQueryParams, UserItem } from "@/api/system/user";
-import { downloadFile } from "@/utils";
-import UserAPI from "@/api/system/user";
-import DeptAPI from "@/api/system/dept";
-import RoleAPI from "@/api/system/role";
-import { useUserStore, useAppStore } from "@/stores";
-import { DeviceEnum, DialogMode, CommonStatus } from "@/enums";
-import { useTableSelection } from "@/composables";
-import UserDeptTree from "./components/UserDeptTree.vue";
-import UserImportDialog from "./components/UserImportDialog.vue";
+  import { computed, onMounted, reactive, ref } from "vue";
+  import { useDebounceFn } from "@vueuse/core";
+  import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from "element-plus";
+  import type { UserForm, UserItem } from "@/api/system/user";
+  import { downloadFile } from "@/utils";
+  import UserAPI from "@/api/system/user";
+  import DeptAPI from "@/api/system/dept";
+  import RoleAPI from "@/api/system/role";
+  import { useUserStore, useAppStore } from "@/stores";
+  import { DeviceEnum, DialogMode, CommonStatus } from "@/enums";
+  import { useTableSelection } from "@/composables";
+  import UserDeptTree from "./components/UserDeptTree.vue";
+  import UserImportDialog from "./components/UserImportDialog.vue";
 
-defineOptions({
-  name: "User",
-  inheritAttrs: false,
-});
+  defineOptions({
+    name: "User",
+    inheritAttrs: false,
+  });
 
-const appStore = useAppStore();
-const userStore = useUserStore();
+  const appStore = useAppStore();
+  const userStore = useUserStore();
 
-// 表单引用
-const queryFormRef = ref<FormInstance>();
-const userFormRef = ref<FormInstance>();
+  // 表单引用
+  const queryFormRef = ref<FormInstance>();
+  const userFormRef = ref<FormInstance>();
 
-// 查询参数
-const queryParams = reactive<UserQueryParams>({
-  pageNum: 1,
-  pageSize: 10,
-});
+  const loading = ref(false);
 
-// 列表数据
-const userList = ref<UserItem[]>([]);
-const total = ref(0);
-const loading = ref(false);
+  const tableData = reactive<PageResult<UserItem>>({
+    list: [],
+    total: 0,
+    params: { //查询参数
+      pageNum: 1,
+      pageSize: 10,
+    },
+  });
 
-// 弹窗状态
-const dialogState = reactive({
-  visible: false,
-  title: "新增用户",
-  mode: DialogMode.CREATE,
-});
+  // 弹窗状态
+  const dialogState = reactive({
+    visible: false,
+    title: "新增用户",
+    mode: DialogMode.CREATE,
+  });
 
-// 导入弹窗状态
-const importDialogVisible = ref(false);
+  // 导入弹窗状态
+  const importDialogVisible = ref(false);
 
-// 表单初始数据
-const initialFormData: UserForm = {
-  status: CommonStatus.ENABLED,
-};
+  // 表单初始数据
+  const initialFormData: UserForm = {
+    status: CommonStatus.ENABLED,
+  };
 
-// 表单数据
-const formData = reactive<UserForm>({ ...initialFormData });
+  // 表单数据
+  const formData = reactive<UserForm>({ ...initialFormData });
 
-// 下拉选项
-const deptOptions = ref<OptionItem[]>();
-const roleOptions = ref<OptionItem[]>();
+  // 下拉选项
+  const deptOptions = ref<OptionItem[]>();
+  const roleOptions = ref<OptionItem[]>();
 
-const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "600px" : "90%"));
+  const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "600px" : "90%"));
 
-const rules: FormRules = {
-  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
-  nickname: [{ required: true, message: "请输入用户昵称", trigger: "blur" }],
-  deptId: [{ required: true, message: "请选择所属部门", trigger: "change" }],
-  roleIds: [{ required: true, message: "请选择用户角色", trigger: "change" }],
-  email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: "blur" }],
-  mobile: [{ pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号码", trigger: "blur" }],
-};
+  const rules: FormRules = {
+    username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
+    nickname: [{ required: true, message: "请输入用户昵称", trigger: "blur" }],
+    deptId: [{ required: true, message: "请选择所属部门", trigger: "change" }],
+    roleIds: [{ required: true, message: "请选择用户角色", trigger: "change" }],
+    email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: "blur" }],
+    mobile: [{ pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号码", trigger: "blur" }],
+  };
 
-/**
- * 加载用户列表数据
- */
-async function fetchList(): Promise<void> {
-  loading.value = true;
-  try {
-    const data = await UserAPI.getPage(queryParams);
-    userList.value = data.list;
-    total.value = data.total ?? 0;
-  } finally {
-    loading.value = false;
+  /**
+   * 加载用户列表数据
+   */
+  async function fetchList(): Promise<void> {
+    loading.value = true;
+    try {
+      const data = await UserAPI.getPage(tableData.params);
+      tableData.list = data.list ?? [];
+      tableData.total = data.total ?? 0;
+    } finally {
+      loading.value = false;
+    }
   }
-}
 
-/**
- * 加载表单下拉选项数据
- */
-async function loadFormOptions(): Promise<void> {
-  [roleOptions.value, deptOptions.value] = await Promise.all([
-    RoleAPI.getOptions(),
-    DeptAPI.getOptions(),
-  ]);
-}
+  /**
+   * 加载表单下拉选项数据
+   */
+  async function loadFormOptions(): Promise<void> {
+    [roleOptions.value, deptOptions.value] = await Promise.all([
+      RoleAPI.getOptions(),
+      DeptAPI.getOptions(),
+    ]);
+  }
 
-const { selectedIds, hasSelection, handleSelectionChange } = useTableSelection<UserItem>();
+  const { selectedIds, hasSelection, handleSelectionChange } = useTableSelection<UserItem>();
 
-/**
- * 执行查询（重置页码）
- */
-function handleQuery(): void {
-  queryParams.pageNum = 1;
-  fetchList();
-}
+  /**
+   * 执行查询（重置页码）
+   */
+  function handleQuery(): void {
+    tableData.params.pageNum = 1;
+    fetchList();
+  }
 
-/**
- * 重置查询条件
- */
-function resetQuery(): void {
-  queryFormRef.value?.resetFields();
-  queryParams.deptId = undefined;
-  queryParams.createTime = undefined;
-}
+  /**
+   * 重置查询条件
+   */
+  function resetQuery(): void {
+    queryFormRef.value?.resetFields();
+    tableData.params.deptId = undefined;
+    tableData.params.createTime = undefined;
+  }
 
-/**
- * 重置查询条件并重新查询
- */
-function handleResetQuery(): void {
-  resetQuery();
-  handleQuery();
-}
-
-/**
- * 重置用户密码
- * @param userId 用户ID
- * @param password 新密码
- */
-async function resetPassword(userId: string, password: string): Promise<void> {
-  await UserAPI.resetPassword(userId, password);
-  ElMessage.success("密码重置成功");
-}
-
-/**
- * 删除用户
- * @param userIds 用户ID列表，多个ID用逗号分隔
- */
-async function deleteUsers(userIds: string): Promise<void> {
-  await UserAPI.deleteByIds(userIds);
-  ElMessage.success("删除成功");
-  handleQuery();
-}
-
-/**
- * 打开表单弹窗
- */
-function openDialog(): void {
-  dialogState.visible = true;
-}
-
-/**
- * 关闭表单弹窗
- */
-function closeDialog(): void {
-  dialogState.visible = false;
-  resetForm();
-}
-
-/**
- * 重置表单数据和验证状态
- */
-function resetForm(): void {
-  userFormRef.value?.resetFields();
-  userFormRef.value?.clearValidate();
-  Object.assign(formData, initialFormData);
-}
-
-/**
- * 重置密码按钮点击事件
- * @param row 用户数据
- */
-function handleResetPassword(row: UserItem): void {
-  ElMessageBox.prompt(`请输入用户【${row.username}】的新密码`, "重置密码", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    inputPattern: /.{6,}/,
-    inputErrorMessage: "密码至少需要6位字符",
-  }).then(
-    (result: any) => resetPassword(row.id, result.value),
-    () => {
-      /* 用户取消 */
-    }
-  );
-}
-
-/**
- * 新增按钮点击事件
- */
-async function handleCreateClick(): Promise<void> {
-  dialogState.title = "新增用户";
-  dialogState.mode = DialogMode.CREATE;
-  await loadFormOptions();
-  openDialog();
-}
-
-/**
- * 编辑按钮点击事件
- * @param id 用户ID
- */
-async function handleEditClick(id: string): Promise<void> {
-  dialogState.title = "修改用户";
-  dialogState.mode = DialogMode.EDIT;
-  await loadFormOptions();
-  const data = await UserAPI.getFormData(id);
-  Object.assign(formData, data);
-  openDialog();
-}
-
-/**
- * 提交表单（防抖处理）
- */
-const handleSubmit = useDebounceFn(async () => {
-  const valid = await userFormRef.value?.validate().then(
-    () => true,
-    () => false
-  );
-  if (!valid) return;
-
-  loading.value = true;
-  try {
-    if (formData.id) {
-      await UserAPI.update(formData.id, formData);
-      ElMessage.success("修改用户成功");
-    } else {
-      await UserAPI.create(formData);
-      ElMessage.success("新增用户成功");
-    }
-    closeDialog();
+  /**
+   * 重置查询条件并重新查询
+   */
+  function handleResetQuery(): void {
+    resetQuery();
     handleQuery();
-  } finally {
-    loading.value = false;
-  }
-}, 300);
-
-/**
- * 删除按钮点击事件
- * @param id 用户ID，不传则删除选中的用户
- */
-function handleDelete(id?: string): void {
-  const userIds = id ?? selectedIds.value.join(",");
-  if (!userIds) {
-    ElMessage.warning("请勾选删除项");
-    return;
   }
 
-  // 安全检查：防止删除当前登录用户
-  const currentUserId = userStore.userInfo?.userId;
-  if (currentUserId) {
-    const isCurrentUserInList = id
-      ? id === currentUserId
-      : selectedIds.value.some((selectedId) => String(selectedId) === currentUserId);
-    if (isCurrentUserInList) {
-      ElMessage.error("不能删除当前登录用户");
+  /**
+   * 重置用户密码
+   * @param userId 用户ID
+   * @param password 新密码
+   */
+  async function resetPassword(userId: string, password: string): Promise<void> {
+    await UserAPI.resetPassword(userId, password);
+    ElMessage.success("密码重置成功");
+  }
+
+  /**
+   * 删除用户
+   * @param userIds 用户ID列表，多个ID用逗号分隔
+   */
+  async function deleteUsers(userIds: string): Promise<void> {
+    await UserAPI.deleteByIds(userIds);
+    ElMessage.success("删除成功");
+    handleQuery();
+  }
+
+  /**
+   * 打开表单弹窗
+   */
+  function openDialog(): void {
+    dialogState.visible = true;
+  }
+
+  /**
+   * 关闭表单弹窗
+   */
+  function closeDialog(): void {
+    dialogState.visible = false;
+    resetForm();
+  }
+
+  /**
+   * 重置表单数据和验证状态
+   */
+  function resetForm(): void {
+    userFormRef.value?.resetFields();
+    userFormRef.value?.clearValidate();
+    Object.assign(formData, initialFormData);
+  }
+
+  /**
+   * 重置密码按钮点击事件
+   * @param row 用户数据
+   */
+  function handleResetPassword(row: UserItem): void {
+    ElMessageBox.prompt(`请输入用户【${row.username}】的新密码`, "重置密码", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      inputPattern: /.{6,}/,
+      inputErrorMessage: "密码至少需要6位字符",
+    }).then(
+      (result: any) => resetPassword(row.id, result.value),
+      () => {
+        /* 用户取消 */
+      }
+    );
+  }
+
+  /**
+   * 新增按钮点击事件
+   */
+  async function handleCreateClick(): Promise<void> {
+    dialogState.title = "新增用户";
+    dialogState.mode = DialogMode.CREATE;
+    await loadFormOptions();
+    openDialog();
+  }
+
+  /**
+   * 编辑按钮点击事件
+   * @param id 用户ID
+   */
+  async function handleEditClick(id: string): Promise<void> {
+    dialogState.title = "修改用户";
+    dialogState.mode = DialogMode.EDIT;
+    await loadFormOptions();
+    const data = await UserAPI.getFormData(id);
+    Object.assign(formData, data);
+    openDialog();
+  }
+
+  /**
+   * 提交表单（防抖处理）
+   */
+  const handleSubmit = useDebounceFn(async () => {
+    const valid = await userFormRef.value?.validate().then(
+      () => true,
+      () => false
+    );
+    if (!valid) return;
+
+    loading.value = true;
+    try {
+      if (formData.id) {
+        await UserAPI.update(formData.id, formData);
+        ElMessage.success("修改用户成功");
+      } else {
+        await UserAPI.create(formData);
+        ElMessage.success("新增用户成功");
+      }
+      closeDialog();
+      handleQuery();
+    } finally {
+      loading.value = false;
+    }
+  }, 300);
+
+  /**
+   * 删除按钮点击事件
+   * @param id 用户ID，不传则删除选中的用户
+   */
+  function handleDelete(id?: string): void {
+    const userIds = id ?? selectedIds.value.join(",");
+    if (!userIds) {
+      ElMessage.warning("请勾选删除项");
       return;
     }
+
+    // 安全检查：防止删除当前登录用户
+    const currentUserId = userStore.userInfo?.userId;
+    if (currentUserId) {
+      const isCurrentUserInList = id
+        ? id === currentUserId
+        : selectedIds.value.some((selectedId) => String(selectedId) === currentUserId);
+      if (isCurrentUserInList) {
+        ElMessage.error("不能删除当前登录用户");
+        return;
+      }
+    }
+
+    ElMessageBox.confirm("确认删除选中的用户吗？", "警告", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    }).then(
+      () => deleteUsers(userIds),
+      () => {
+        /* 用户取消 */
+      }
+    );
   }
 
-  ElMessageBox.confirm("确认删除选中的用户吗？", "警告", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    type: "warning",
-  }).then(
-    () => deleteUsers(userIds),
-    () => {
-      /* 用户取消 */
-    }
-  );
-}
+  /**
+   * 导出用户列表
+   */
+  async function exportUsers(): Promise<void> {
+    const response = await UserAPI.export(tableData.params);
+    downloadFile(response);
+    ElMessage.success("导出成功");
+  }
 
-/**
- * 导出用户列表
- */
-async function exportUsers(): Promise<void> {
-  const response = await UserAPI.export(queryParams);
-  downloadFile(response);
-  ElMessage.success("导出成功");
-}
+  /**
+   * 打开导入弹窗
+   */
+  function openImportDialog(): void {
+    importDialogVisible.value = true;
+  }
 
-/**
- * 打开导入弹窗
- */
-function openImportDialog(): void {
-  importDialogVisible.value = true;
-}
-
-onMounted(() => {
-  handleQuery();
-});
+  onMounted(() => {
+    handleQuery();
+  });
 </script>