refactor: 统一重命名 dialog 状态变量为 dialogState

src/views/codegen/index.vue

@@ -87,10 +87,10 @@
     </el-card>
 
     <el-drawer
-      v-model="dialog.visible"
+      v-model="dialogState.visible"
-      :title="dialog.title"
+      :title="dialogState.title"
       size="80%"
-      @close="dialog.visible = false"
+      @close="dialogState.visible = false"
     >
       <el-steps :active="active" align-center finish-status="success" simple>
         <el-step title="基础配置" />
@@ -603,7 +603,7 @@ const genConfigFormRules = {
   entityName: [{ required: true, message: "请输入实体名", trigger: "blur" }],
 };
 
-const dialog = reactive({
+const dialogState = reactive({
   visible: false,
   title: "",
 });
@@ -684,7 +684,7 @@ watch(active, (val) => {
 });
 
 watch(
-  () => dialog.visible,
+  () => dialogState.visible,
   (visible) => {
     if (!visible) {
       destroySort();
@@ -841,7 +841,7 @@ function handleResetQuery() {
 
 /** 打开弹窗 */
 async function handleOpenDialog(tableName: string) {
-  dialog.visible = true;
+  dialogState.visible = true;
   active.value = 0;
   currentTableName.value = tableName;
   loading.value = true;
@@ -854,7 +854,7 @@ async function handleOpenDialog(tableName: string) {
 
     menuOptions.value = menuList;
     dictOptions.value = dictList;
-    dialog.title = `${tableName} 代码生成`;
+    dialogState.title = `${tableName} 代码生成`;
     genConfigFormData.value = config;
 
     checkAllSelected("isShowInQuery", isCheckAllQuery);
@@ -867,7 +867,7 @@ async function handleOpenDialog(tableName: string) {
     }
   } catch {
     ElMessage.error("获取生成配置失败");
-    dialog.visible = false;
+    dialogState.visible = false;
   } finally {
     loading.value = false;
   }
@@ -912,7 +912,7 @@ async function handlePreview(tableName: string) {
       (genConfigFormData.value.pageType as any) || "classic",
       frontendType
     );
-    dialog.title = `代码生成 ${tableName}`;
+    dialogState.title = `代码生成 ${tableName}`;
     const previewList = data || [];
     const typeOptions = Array.from(
       new Set(

src/views/profile/index.vue

@@ -162,10 +162,10 @@
     </el-row>
 
     <!-- 弹窗 -->
-    <el-dialog v-model="dialog.visible" :title="dialog.title" :width="500">
+    <el-dialog v-model="dialogState.visible" :title="dialogState.title" :width="500">
       <!-- 账号资料 -->
       <el-form
-        v-if="dialog.type === DialogType.ACCOUNT"
+        v-if="dialogState.type === DialogType.ACCOUNT"
         ref="userProfileFormRef"
         :model="userProfileForm"
         :label-width="100"
@@ -180,7 +180,7 @@
 
       <!-- 修改密码 -->
       <el-form
-        v-if="dialog.type === DialogType.PASSWORD"
+        v-if="dialogState.type === DialogType.PASSWORD"
         ref="passwordChangeFormRef"
         :model="passwordChangeForm"
         :rules="passwordChangeRules"
@@ -199,7 +199,7 @@
 
       <!-- 绑定手机 -->
       <el-form
-        v-else-if="dialog.type === DialogType.MOBILE"
+        v-else-if="dialogState.type === DialogType.MOBILE"
         ref="mobileBindingFormRef"
         :model="mobileUpdateForm"
         :rules="mobileBindingRules"
@@ -229,7 +229,7 @@
 
       <!-- 绑定邮箱 -->
       <el-form
-        v-else-if="dialog.type === DialogType.EMAIL"
+        v-else-if="dialogState.type === DialogType.EMAIL"
         ref="emailBindingFormRef"
         :model="emailUpdateForm"
         :rules="emailBindingRules"
@@ -295,7 +295,7 @@ const enum DialogType {
   EMAIL = "email",
 }
 
-const dialog = reactive({
+const dialogState = reactive({
   visible: false,
   title: "",
   type: "" as DialogType, // 修改账号资料,修改密码、绑定手机、绑定邮箱"
@@ -391,27 +391,27 @@ const emailSecurityDesc = computed(() => {
  * @param type 弹窗类型 ACCOUNT: 账号资料 PASSWORD: 修改密码 MOBILE: 绑定手机 EMAIL: 绑定邮箱
  */
 const handleOpenDialog = (type: DialogType) => {
-  dialog.type = type;
+  dialogState.type = type;
-  dialog.visible = true;
+  dialogState.visible = true;
   switch (type) {
     case DialogType.ACCOUNT:
-      dialog.title = "账号资料";
+      dialogState.title = "账号资料";
       // 初始化表单数据
       userProfileForm.nickname = userProfile.value.nickname;
       userProfileForm.avatar = userProfile.value.avatar;
       userProfileForm.gender = userProfile.value.gender;
       break;
     case DialogType.PASSWORD:
-      dialog.title = "修改密码";
+      dialogState.title = "修改密码";
       break;
     case DialogType.MOBILE:
-      dialog.title = userProfile.value.mobile ? "更换手机号" : "绑定手机号";
+      dialogState.title = userProfile.value.mobile ? "更换手机号" : "绑定手机号";
       mobileUpdateForm.mobile = "";
       mobileUpdateForm.code = "";
       mobileUpdateForm.password = "";
       break;
     case DialogType.EMAIL:
-      dialog.title = userProfile.value.email ? "更换邮箱" : "绑定邮箱";
+      dialogState.title = userProfile.value.email ? "更换邮箱" : "绑定邮箱";
       emailUpdateForm.email = "";
       emailUpdateForm.code = "";
       emailUpdateForm.password = "";
@@ -524,36 +524,36 @@ function handleSendEmailCode() {
  */
 const handleSubmit = async () => {
   try {
-    if (dialog.type === DialogType.ACCOUNT) {
+    if (dialogState.type === DialogType.ACCOUNT) {
       const valid = await userProfileFormRef.value?.validate();
       if (!valid) return;
 
       await UserAPI.updateProfile(userProfileForm);
       ElMessage.success("账号资料修改成功");
-      dialog.visible = false;
+      dialogState.visible = false;
       await loadUserProfile();
-    } else if (dialog.type === DialogType.PASSWORD) {
+    } else if (dialogState.type === DialogType.PASSWORD) {
       const valid = await passwordChangeFormRef.value?.validate();
       if (!valid) return;
 
       await UserAPI.changePassword(passwordChangeForm);
-      dialog.visible = false;
+      dialogState.visible = false;
       await redirectToLogin("密码已修改，请重新登录");
-    } else if (dialog.type === DialogType.MOBILE) {
+    } else if (dialogState.type === DialogType.MOBILE) {
       const valid = await mobileBindingFormRef.value?.validate();
       if (!valid) return;
 
       await UserAPI.bindOrChangeMobile(mobileUpdateForm);
       ElMessage.success(userProfile.value.mobile ? "手机号更换成功" : "手机号绑定成功");
-      dialog.visible = false;
+      dialogState.visible = false;
       await loadUserProfile();
-    } else if (dialog.type === DialogType.EMAIL) {
+    } else if (dialogState.type === DialogType.EMAIL) {
       const valid = await emailBindingFormRef.value?.validate();
       if (!valid) return;
 
       await UserAPI.bindOrChangeEmail(emailUpdateForm);
       ElMessage.success(userProfile.value.email ? "邮箱更换成功" : "邮箱绑定成功");
-      dialog.visible = false;
+      dialogState.visible = false;
       await loadUserProfile();
     }
   } catch {
@@ -565,14 +565,14 @@ const handleSubmit = async () => {
  * 取消
  */
 const handleCancel = () => {
-  dialog.visible = false;
+  dialogState.visible = false;
-  if (dialog.type === DialogType.ACCOUNT) {
+  if (dialogState.type === DialogType.ACCOUNT) {
     userProfileFormRef.value?.resetFields();
-  } else if (dialog.type === DialogType.PASSWORD) {
+  } else if (dialogState.type === DialogType.PASSWORD) {
     passwordChangeFormRef.value?.resetFields();
-  } else if (dialog.type === DialogType.MOBILE) {
+  } else if (dialogState.type === DialogType.MOBILE) {
     mobileBindingFormRef.value?.resetFields();
-  } else if (dialog.type === DialogType.EMAIL) {
+  } else if (dialogState.type === DialogType.EMAIL) {
     emailBindingFormRef.value?.resetFields();
   }
 };

src/views/system/config/index.vue

@@ -1,7 +1,5 @@
-<!-- 系统配置 -->
 <template>
   <div class="app-container">
-    <!-- 搜索区域 -->
     <div class="filter-section">
       <el-form ref="queryFormRef" :model="queryParams" :inline="true">
         <el-form-item label="关键字" prop="keywords">
@@ -27,7 +25,7 @@
             v-hasPerm="['sys:config:create']"
             type="success"
             icon="plus"
-            @click="handleOpenDialog()"
+            @click="openDialog()"
           >
             新增
           </el-button>
@@ -35,7 +33,7 @@
             v-hasPerm="['sys:config:refresh']"
             color="#626aef"
             icon="RefreshLeft"
-            @click="handleRefreshCache"
+            @click="refreshCache"
           >
             刷新缓存
           </el-button>
@@ -64,7 +62,7 @@
               size="small"
               link
               icon="edit"
-              @click="handleOpenDialog(scope.row.id)"
+              @click="openDialog(scope.row.id)"
             >
               编辑
             </el-button>
@@ -91,12 +89,11 @@
       />
     </el-card>
 
-    <!-- 系统配置表单弹窗 -->
     <el-dialog
-      v-model="dialog.visible"
+      v-model="dialogState.visible"
-      :title="dialog.title"
+      :title="dialogState.title"
       width="500px"
-      @close="handleCloseDialog"
+      @close="closeDialog"
     >
       <el-form
         ref="dataFormRef"
@@ -128,7 +125,7 @@
       <template #footer>
         <div class="dialog-footer">
           <el-button type="primary" @click="handleSubmit">确定</el-button>
-          <el-button @click="handleCloseDialog">取消</el-button>
+          <el-button @click="closeDialog">取消</el-button>
         </div>
       </template>
     </el-dialog>
@@ -143,30 +140,33 @@ defineOptions({
 
 import ConfigAPI from "@/api/system/config";
 import type { ConfigItem, ConfigForm, ConfigQueryParams } from "@/types/api";
-import { ElMessage, ElMessageBox } from "element-plus";
+import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from "element-plus";
 import { useDebounceFn } from "@vueuse/core";
 
-const queryFormRef = ref();
+// 表单引用
-const dataFormRef = ref();
+const queryFormRef = ref<FormInstance>();
-
+const dataFormRef = ref<FormInstance>();
-const loading = ref(false);
-const selectIds = ref<number[]>([]);
-const total = ref(0);
 
+// 查询参数
 const queryParams = reactive<ConfigQueryParams>({
   pageNum: 1,
   pageSize: 10,
   keywords: "",
 });
 
-// 系统配置表格数据
+// 列表数据
 const pageData = ref<ConfigItem[]>([]);
+const total = ref(0);
+const loading = ref(false);
+const selectIds = ref<string[]>([]);
 
-const dialog = reactive({
+// 弹窗状态
+const dialogState = reactive({
   title: "",
   visible: false,
 });
 
+// 表单数据
 const formData = reactive<ConfigForm>({
   id: undefined,
   configName: "",
@@ -175,14 +175,17 @@ const formData = reactive<ConfigForm>({
   remark: "",
 });
 
-const rules = reactive({
+// 验证规则
+const rules: FormRules = {
   configName: [{ required: true, message: "请输入系统配置名称", trigger: "blur" }],
   configKey: [{ required: true, message: "请输入系统配置编码", trigger: "blur" }],
   configValue: [{ required: true, message: "请输入系统配置值", trigger: "blur" }],
-});
+};
 
-// 获取数据
+/**
-function fetchData() {
+ * 加载配置列表数据
+ */
+function fetchData(): void {
   loading.value = true;
   ConfigAPI.getPage(queryParams)
     .then((data) => {
@@ -194,48 +197,61 @@ function fetchData() {
     });
 }
 
-// 查询（重置页码后获取数据）
+/**
-function handleQuery() {
+ * 查询按钮点击事件
+ */
+function handleQuery(): void {
   queryParams.pageNum = 1;
   fetchData();
 }
 
-// 重置查询
+/**
-function handleResetQuery() {
+ * 重置查询
-  queryFormRef.value.resetFields();
+ */
+function handleResetQuery(): void {
+  queryFormRef.value?.resetFields();
   queryParams.pageNum = 1;
   fetchData();
 }
 
-// 行复选框选中项变化
+/**
-function handleSelectionChange(selection: any) {
+ * 表格选择变化事件
-  selectIds.value = selection.map((item: any) => item.id);
+ */
+function handleSelectionChange(selection: ConfigItem[]): void {
+  selectIds.value = selection.map((item) => item.id).filter(Boolean) as string[];
 }
 
-// 打开系统配置弹窗
+/**
-function handleOpenDialog(id?: string) {
+ * 打开弹窗
-  dialog.visible = true;
+ * @param id 配置ID（编辑时传入）
+ */
+function openDialog(id?: string): void {
+  dialogState.visible = true;
   if (id) {
-    dialog.title = "修改系统配置";
+    dialogState.title = "修改系统配置";
     ConfigAPI.getFormData(id).then((data) => {
       Object.assign(formData, data);
     });
   } else {
-    dialog.title = "新增系统配置";
+    dialogState.title = "新增系统配置";
     formData.id = undefined;
   }
 }
 
-// 刷新缓存(防抖)
+/**
-const handleRefreshCache = useDebounceFn(() => {
+ * 刷新缓存
+ */
+const refreshCache = useDebounceFn(() => {
   ConfigAPI.refreshCache().then(() => {
     ElMessage.success("刷新成功");
   });
 }, 1000);
 
-// 系统配置表单提交
+/**
-function handleSubmit() {
+ * 提交表单
-  dataFormRef.value.validate((valid: any) => {
+ */
+function handleSubmit(): void {
+  dataFormRef.value?.validate((valid) => {
     if (valid) {
       loading.value = true;
       const id = formData.id;
@@ -243,7 +259,7 @@ function handleSubmit() {
         ConfigAPI.update(id, formData)
           .then(() => {
             ElMessage.success("修改成功");
-            handleCloseDialog();
+            closeDialog();
             handleResetQuery();
           })
           .finally(() => (loading.value = false));
@@ -251,7 +267,7 @@ function handleSubmit() {
         ConfigAPI.create(formData)
           .then(() => {
             ElMessage.success("新增成功");
-            handleCloseDialog();
+            closeDialog();
             handleResetQuery();
           })
           .finally(() => (loading.value = false));
@@ -260,21 +276,21 @@ function handleSubmit() {
   });
 }
 
-// 重置表单
+/**
-function resetForm() {
+ * 关闭弹窗
-  dataFormRef.value.resetFields();
+ */
-  dataFormRef.value.clearValidate();
+function closeDialog(): void {
+  dialogState.visible = false;
+  dataFormRef.value?.resetFields();
+  dataFormRef.value?.clearValidate();
   formData.id = undefined;
 }
 
-// 关闭系统配置弹窗
+/**
-function handleCloseDialog() {
+ * 删除配置
-  dialog.visible = false;
+ * @param id 配置ID
-  resetForm();
+ */
-}
+function handleDelete(id: string): void {
-
-// 删除系统配置
-function handleDelete(id: string) {
   ElMessageBox.confirm("确认删除该项配置?", "警告", {
     confirmButtonText: "确定",
     cancelButtonText: "取消",

src/views/system/dept/index.vue

@@ -1,6 +1,5 @@
-<template>
+<template>
   <div class="app-container">
-    <!-- 搜索区域 -->
     <div class="filter-section">
       <el-form ref="queryFormRef" :model="queryParams" :inline="true">
         <el-form-item label="关键字" prop="keywords">
@@ -34,7 +33,7 @@
             v-hasPerm="['sys:dept:create']"
             type="success"
             icon="plus"
-            @click="handleOpenDialog()"
+            @click="openDialog()"
           >
             新增
           </el-button>
@@ -79,7 +78,7 @@
               link
               size="small"
               icon="plus"
-              @click.stop="handleOpenDialog(scope.row.id, undefined)"
+              @click.stop="openDialog(scope.row.id, undefined)"
             >
               新增
             </el-button>
@@ -89,7 +88,7 @@
               link
               size="small"
               icon="edit"
-              @click.stop="handleOpenDialog(scope.row.parentId, scope.row.id)"
+              @click.stop="openDialog(scope.row.parentId, scope.row.id)"
             >
               编辑
             </el-button>
@@ -109,10 +108,10 @@
     </el-card>
 
     <el-dialog
-      v-model="dialog.visible"
+      v-model="dialogState.visible"
-      :title="dialog.title"
+      :title="dialogState.title"
       width="600px"
-      @closed="handleCloseDialog"
+      @closed="closeDialog"
     >
       <el-form ref="deptFormRef" :model="formData" :rules="rules" label-width="80px">
         <el-form-item label="上级部门" prop="parentId">
@@ -150,7 +149,7 @@
       <template #footer>
         <div class="dialog-footer">
           <el-button type="primary" @click="handleSubmit">确定</el-button>
-          <el-button @click="handleCloseDialog">取消</el-button>
+          <el-button @click="closeDialog">取消</el-button>
         </div>
       </template>
     </el-dialog>
@@ -165,62 +164,84 @@ defineOptions({
 
 import DeptAPI from "@/api/system/dept";
 import type { DeptItem, DeptForm, DeptQueryParams } from "@/types/api";
+import type { FormInstance, FormRules } from "element-plus";
 
-const queryFormRef = ref();
+// 表单引用
-const deptFormRef = ref();
+const queryFormRef = ref<FormInstance>();
+const deptFormRef = ref<FormInstance>();
 
-const loading = ref(false);
+// 查询参数
-const selectIds = ref<number[]>([]);
 const queryParams = reactive<DeptQueryParams>({});
 
-const dialog = reactive({
+// 列表数据
+const deptList = ref<DeptItem[]>();
+const deptOptions = ref<OptionItem[]>();
+const loading = ref(false);
+const selectIds = ref<string[]>([]);
+
+// 弹窗状态
+const dialogState = reactive({
   title: "",
   visible: false,
 });
 
-const deptList = ref<DeptItem[]>();
+// 表单数据
-const deptOptions = ref<OptionItem[]>();
 const formData = reactive<DeptForm>({
   status: 1,
   parentId: "0",
   sort: 1,
 });
 
-const rules = reactive({
+// 验证规则
+const rules: FormRules = {
   parentId: [{ required: true, message: "上级部门不能为空", trigger: "change" }],
   name: [{ required: true, message: "部门名称不能为空", trigger: "blur" }],
   code: [{ required: true, message: "部门编号不能为空", trigger: "blur" }],
   sort: [{ required: true, message: "显示排序不能为空", trigger: "blur" }],
-});
+};
 
-// 查询部门
+/**
-function handleQuery() {
+ * 加载部门列表数据
+ */
+function fetchData(): void {
   loading.value = true;
-  DeptAPI.getList(queryParams).then((data) => {
+  DeptAPI.getList(queryParams)
-    deptList.value = data;
+    .then((data) => {
-    loading.value = false;
+      deptList.value = data;
-  });
+    })
-}
+    .finally(() => {
-
+      loading.value = false;
-// 重置查询
+    });
-function handleResetQuery() {
-  queryFormRef.value.resetFields();
-  handleQuery();
-}
-
-// 处理选中项变化
-function handleSelectionChange(selection: any) {
-  selectIds.value = selection.map((item: any) => item.id);
 }
 
 /**
- * 打开部门弹窗
+ * 查询按钮点击事件
- *
- * @param parentId 父部门ID
- * @param deptId 部门ID
  */
-async function handleOpenDialog(parentId?: string, deptId?: string) {
+function handleQuery(): void {
-  // 加载部门下拉数据
+  fetchData();
+}
+
+/**
+ * 重置查询
+ */
+function handleResetQuery(): void {
+  queryFormRef.value?.resetFields();
+  fetchData();
+}
+
+/**
+ * 表格选择变化事件
+ */
+function handleSelectionChange(selection: DeptItem[]): void {
+  selectIds.value = selection.map((item) => item.id).filter(Boolean) as string[];
+}
+
+/**
+ * 打开弹窗
+ * @param parentId 父部门ID
+ * @param deptId 部门ID（编辑时传入）
+ */
+async function openDialog(parentId?: string, deptId?: string): Promise<void> {
   const data = await DeptAPI.getOptions();
   deptOptions.value = [
     {
@@ -230,21 +251,23 @@ async function handleOpenDialog(parentId?: string, deptId?: string) {
     },
   ];
 
-  dialog.visible = true;
+  dialogState.visible = true;
   if (deptId) {
-    dialog.title = "修改部门";
+    dialogState.title = "修改部门";
     DeptAPI.getFormData(deptId).then((data) => {
       Object.assign(formData, data);
     });
   } else {
-    dialog.title = "新增部门";
+    dialogState.title = "新增部门";
     formData.parentId = parentId || "0";
   }
 }
 
-// 提交部门表单
+/**
-function handleSubmit() {
+ * 提交表单
-  deptFormRef.value.validate((valid: any) => {
+ */
+function handleSubmit(): void {
+  deptFormRef.value?.validate((valid) => {
     if (valid) {
       loading.value = true;
       const deptId = formData.id;
@@ -252,16 +275,16 @@ function handleSubmit() {
         DeptAPI.update(deptId, formData)
           .then(() => {
             ElMessage.success("修改成功");
-            handleCloseDialog();
+            closeDialog();
-            handleQuery();
+            fetchData();
           })
           .finally(() => (loading.value = false));
       } else {
         DeptAPI.create(formData)
           .then(() => {
             ElMessage.success("新增成功");
-            handleCloseDialog();
+            closeDialog();
-            handleQuery();
+            fetchData();
           })
           .finally(() => (loading.value = false));
       }
@@ -269,8 +292,11 @@ function handleSubmit() {
   });
 }
 
-// 删除部门
+/**
-function handleDelete(deptId?: number) {
+ * 删除部门
+ * @param deptId 部门ID
+ */
+function handleDelete(deptId?: number): void {
   const deptIds = [deptId || selectIds.value].join(",");
 
   if (!deptIds) {
@@ -298,24 +324,20 @@ function handleDelete(deptId?: number) {
   );
 }
 
-// 重置表单
+/**
-function resetForm() {
+ * 关闭弹窗
-  deptFormRef.value.resetFields();
+ */
-  deptFormRef.value.clearValidate();
+function closeDialog(): void {
-
+  dialogState.visible = false;
+  deptFormRef.value?.resetFields();
+  deptFormRef.value?.clearValidate();
   formData.id = undefined;
   formData.parentId = "0";
   formData.status = 1;
   formData.sort = 1;
 }
 
-// 关闭弹窗
-function handleCloseDialog() {
-  dialog.visible = false;
-  resetForm();
-}
-
 onMounted(() => {
-  handleQuery();
+  fetchData();
 });
 </script>

src/views/system/dict/dict-item.vue

@@ -1,4 +1,3 @@
-<!-- 字典值 -->
 <template>
   <div class="app-container">
     <div class="filter-section">
@@ -22,7 +21,7 @@
     <el-card shadow="never" class="table-section">
       <div class="table-section__toolbar">
         <div class="table-section__toolbar--actions">
-          <el-button type="success" icon="plus" @click="handleOpenDialog()">新增</el-button>
+          <el-button type="success" icon="plus" @click="openDialog()">新增</el-button>
           <el-button
             type="danger"
             :disabled="ids.length === 0"
@@ -60,7 +59,7 @@
               link
               size="small"
               icon="edit"
-              @click.stop="handleOpenDialog(scope.row)"
+              @click.stop="openDialog(scope.row)"
             >
               编辑
             </el-button>
@@ -86,14 +85,13 @@
       />
     </el-card>
 
-    <!-- 字典项弹窗 -->
     <el-dialog
-      v-model="dialog.visible"
+      v-model="dialogState.visible"
-      :title="dialog.title"
+      :title="dialogState.title"
       width="600px"
-      @close="handleCloseDialog"
+      @close="closeDialog"
     >
-      <el-form ref="dataFormRef" :model="formData" :rules="computedRules" label-width="100px">
+      <el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="100px">
         <el-form-item label="字典项标签" prop="label">
           <el-input v-model="formData.label" placeholder="请输入字典标签" />
         </el-form-item>
@@ -145,8 +143,8 @@
 
       <template #footer>
         <div class="dialog-footer">
-          <el-button type="primary" @click="handleSubmitClick">确 定</el-button>
+          <el-button type="primary" @click="handleSubmit">确 定</el-button>
-          <el-button @click="handleCloseDialog">确 定</el-button>
+          <el-button @click="closeDialog">取 消</el-button>
         </div>
       </template>
     </el-dialog>
@@ -156,46 +154,51 @@
 <script setup lang="ts">
 import DictAPI from "@/api/system/dict";
 import type { DictItemQueryParams, DictItem, DictItemForm } from "@/types/api";
+import type { FormInstance, FormRules } from "element-plus";
 
 const route = useRoute();
 
+// 字典编码
 const dictCode = ref(route.query.dictCode as string);
 
-const queryFormRef = ref();
+// 表单引用
-const dataFormRef = ref();
+const queryFormRef = ref<FormInstance>();
-
+const dataFormRef = ref<FormInstance>();
-const loading = ref(false);
-const ids = ref<number[]>([]);
-const total = ref(0);
 
+// 查询参数
 const queryParams = reactive<DictItemQueryParams>({
   pageNum: 1,
   pageSize: 10,
 });
 
+// 列表数据
 const tableData = ref<DictItem[]>();
+const total = ref(0);
+const loading = ref(false);
+const ids = ref<string[]>([]);
 
-const dialog = reactive({
+// 弹窗状态
+const dialogState = reactive({
   title: "",
   visible: false,
 });
 
+// 表单数据
 const formData = reactive<DictItemForm>({});
 
-// 标签类型
+// 标签类型选项
 const tagType = ["primary", "success", "info", "warning", "danger"] as const;
 
-const computedRules = computed(() => {
+// 验证规则
-  const rules: Partial<Record<string, any>> = {
+const rules: FormRules = {
-    value: [{ required: true, message: "请输入字典值", trigger: "blur" }],
+  value: [{ required: true, message: "请输入字典值", trigger: "blur" }],
-    label: [{ required: true, message: "请输入字典标签", trigger: "blur" }],
+  label: [{ required: true, message: "请输入字典标签", trigger: "blur" }],
-  };
+};
 
-  return rules;
+/**
-});
+ * 加载字典项列表数据
-
+ */
-// 获取数据
+function fetchData(): void {
-function fetchData() {
   loading.value = true;
   DictAPI.getDictItemPage(dictCode.value, queryParams)
     .then((data) => {
@@ -207,28 +210,37 @@ function fetchData() {
     });
 }
 
-// 查询（重置页码后获取数据）
+/**
-function handleQuery() {
+ * 查询按钮点击事件
+ */
+function handleQuery(): void {
   queryParams.pageNum = 1;
   fetchData();
 }
 
-// 重置查询
+/**
-function handleResetQuery() {
+ * 重置查询
-  queryFormRef.value.resetFields();
+ */
+function handleResetQuery(): void {
+  queryFormRef.value?.resetFields();
   queryParams.pageNum = 1;
   fetchData();
 }
 
-// 行选择
+/**
-function handleSelectionChange(selection: any) {
+ * 表格选择变化事件
-  ids.value = selection.map((item: any) => item.id);
+ */
+function handleSelectionChange(selection: DictItem[]): void {
+  ids.value = selection.map((item) => item.id);
 }
 
-// 打开弹窗
+/**
-function handleOpenDialog(row?: DictItem) {
+ * 打开弹窗
-  dialog.visible = true;
+ * @param row 字典项数据（编辑时传入）
-  dialog.title = row ? "编辑字典值" : "新增字典值";
+ */
+function openDialog(row?: DictItem): void {
+  dialogState.visible = true;
+  dialogState.title = row ? "编辑字典值" : "新增字典值";
 
   if (row?.id) {
     DictAPI.getDictItemFormData(dictCode.value, row.id).then((data) => {
@@ -237,9 +249,11 @@ function handleOpenDialog(row?: DictItem) {
   }
 }
 
-// 提交表单
+/**
-function handleSubmitClick() {
+ * 提交表单
-  dataFormRef.value.validate((isValid: boolean) => {
+ */
+function handleSubmit(): void {
+  dataFormRef.value?.validate((isValid) => {
     if (isValid) {
       loading.value = true;
       const id = formData.id;
@@ -249,7 +263,7 @@ function handleSubmitClick() {
         DictAPI.updateDictItem(dictCode.value, id, formData)
           .then(() => {
             ElMessage.success("修改成功");
-            handleCloseDialog();
+            closeDialog();
             handleQuery();
           })
           .finally(() => (loading.value = false));
@@ -257,7 +271,7 @@ function handleSubmitClick() {
         DictAPI.createDictItem(dictCode.value, formData)
           .then(() => {
             ElMessage.success("新增成功");
-            handleCloseDialog();
+            closeDialog();
             handleQuery();
           })
           .finally(() => (loading.value = false));
@@ -266,29 +280,28 @@ function handleSubmitClick() {
   });
 }
 
-// 关闭弹窗
+/**
-function handleCloseDialog() {
+ * 关闭弹窗
-  dataFormRef.value.resetFields();
+ */
-  dataFormRef.value.clearValidate();
+function closeDialog(): void {
-
+  dialogState.visible = false;
+  dataFormRef.value?.resetFields();
+  dataFormRef.value?.clearValidate();
   formData.id = undefined;
   formData.sort = 1;
   formData.status = 1;
   formData.tagType = "";
-
-  dialog.visible = false;
 }
+
 /**
- * 删除字典
+ * 删除字典项
- *
+ * @param id 字典项ID
- * @param id 字典ID
  */
-function handleDelete(id?: number) {
+function handleDelete(id?: number): void {
   const itemIds = [id || ids.value].join(",");
 
   if (!itemIds) {
     ElMessage.warning("请勾选删除项");
-
     return;
   }
   ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {

src/views/system/dict/index.vue

@@ -1,7 +1,5 @@
-<!-- 字典 -->
 <template>
   <div class="app-container">
-    <!-- 搜索区域 -->
     <div class="filter-section">
       <el-form ref="queryFormRef" :model="queryParams" :inline="true">
         <el-form-item label="关键字" prop="keywords">
@@ -23,7 +21,7 @@
     <el-card shadow="hover" class="table-section">
       <div class="table-section__toolbar">
         <div class="table-section__toolbar--actions">
-          <el-button type="success" icon="plus" @click="handleAddClick()">新增</el-button>
+          <el-button type="success" icon="plus" @click="handleCreateClick()">新增</el-button>
           <el-button
             type="danger"
             :disabled="ids.length === 0"
@@ -55,7 +53,7 @@
         </el-table-column>
         <el-table-column fixed="right" label="操作" align="center" width="220">
           <template #default="scope">
-            <el-button type="primary" link size="small" @click.stop="handleOpenDictData(scope.row)">
+            <el-button type="primary" link size="small" @click.stop="openDictData(scope.row)">
               <template #icon>
                 <Collection />
               </template>
@@ -93,14 +91,13 @@
       />
     </el-card>
 
-    <!--字典弹窗-->
     <el-dialog
-      v-model="dialog.visible"
+      v-model="dialogState.visible"
-      :title="dialog.title"
+      :title="dialogState.title"
       width="500px"
-      @close="handleCloseDialog"
+      @close="closeDialog"
     >
-      <el-form ref="dataFormRef" :model="formData" :rules="computedRules" label-width="80px">
+      <el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="80px">
         <el-form-item label="字典名称" prop="name">
           <el-input v-model="formData.name" placeholder="请输入字典名称" />
         </el-form-item>
@@ -123,8 +120,8 @@
 
       <template #footer>
         <div class="dialog-footer">
-          <el-button type="primary" @click="handleSubmitClick">确 定</el-button>
+          <el-button type="primary" @click="handleSubmit">确 定</el-button>
-          <el-button @click="handleCloseDialog">取 消</el-button>
+          <el-button @click="closeDialog">取 消</el-button>
         </div>
       </template>
     </el-dialog>
@@ -137,43 +134,46 @@ defineOptions({
   inheritAttrs: false,
 });
 
-import { ref, reactive } from "vue";
 import DictAPI from "@/api/system/dict";
 import type { DictTypeQueryParams, DictTypeItem, DictTypeForm } from "@/types/api";
-
+import type { FormInstance, FormRules } from "element-plus";
 import router from "@/router";
 
-const queryFormRef = ref();
+// 表单引用
-const dataFormRef = ref();
+const queryFormRef = ref<FormInstance>();
-
+const dataFormRef = ref<FormInstance>();
-const loading = ref(false);
-const ids = ref<number[]>([]);
-const total = ref(0);
 
+// 查询参数
 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 dialog = reactive({
+// 弹窗状态
+const dialogState = reactive({
   title: "",
   visible: false,
 });
 
+// 表单数据
 const formData = reactive<DictTypeForm>({});
 
-const computedRules = computed(() => {
+// 验证规则
-  const rules: Partial<Record<string, any>> = {
+const rules: FormRules = {
-    name: [{ required: true, message: "请输入字典名称", trigger: "blur" }],
+  name: [{ required: true, message: "请输入字典名称", trigger: "blur" }],
-    dictCode: [{ required: true, message: "请输入字典编码", trigger: "blur" }],
+  dictCode: [{ required: true, message: "请输入字典编码", trigger: "blur" }],
-  };
+};
-  return rules;
-});
 
-// 获取数据
+/**
-function fetchData() {
+ * 加载字典列表数据
+ */
+function fetchData(): void {
   loading.value = true;
   DictAPI.getPage(queryParams)
     .then((data) => {
@@ -185,46 +185,55 @@ function fetchData() {
     });
 }
 
-// 查询（重置页码后获取数据）
+/**
-function handleQuery() {
+ * 查询按钮点击事件
+ */
+function handleQuery(): void {
   queryParams.pageNum = 1;
   fetchData();
 }
 
-// 重置查询
-function handleResetQuery() {
-  queryFormRef.value.resetFields();
-  queryParams.pageNum = 1;
-  fetchData();
-}
-
-// 行选择
-function handleSelectionChange(selection: any) {
-  ids.value = selection.map((item: any) => item.id);
-}
-
-// 新增字典
-function handleAddClick() {
-  dialog.visible = true;
-  dialog.title = "新增字典";
-}
-
 /**
- * 编辑字典
+ * 重置查询
- *
+ */
+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 {
+  dialogState.visible = true;
+  dialogState.title = "新增字典";
+}
+
+/**
+ * 编辑按钮点击事件
  * @param id 字典ID
  */
-function handleEditClick(id: string) {
+function handleEditClick(id: string): void {
-  dialog.visible = true;
+  dialogState.visible = true;
-  dialog.title = "修改字典";
+  dialogState.title = "修改字典";
   DictAPI.getFormData(id).then((data) => {
     Object.assign(formData, data);
   });
 }
 
-// 提交字典表单
+/**
-function handleSubmitClick() {
+ * 提交表单
-  dataFormRef.value.validate((isValid: boolean) => {
+ */
+function handleSubmit(): void {
+  dataFormRef.value?.validate((isValid) => {
     if (isValid) {
       loading.value = true;
       const id = formData.id;
@@ -232,7 +241,7 @@ function handleSubmitClick() {
         DictAPI.update(id, formData)
           .then(() => {
             ElMessage.success("修改成功");
-            handleCloseDialog();
+            closeDialog();
             handleQuery();
           })
           .finally(() => (loading.value = false));
@@ -240,7 +249,7 @@ function handleSubmitClick() {
         DictAPI.create(formData)
           .then(() => {
             ElMessage.success("新增成功");
-            handleCloseDialog();
+            closeDialog();
             handleQuery();
           })
           .finally(() => (loading.value = false));
@@ -249,21 +258,21 @@ function handleSubmitClick() {
   });
 }
 
-// 关闭字典弹窗
+/**
-function handleCloseDialog() {
+ * 关闭弹窗
-  dialog.visible = false;
+ */
-
+function closeDialog(): void {
-  dataFormRef.value.resetFields();
+  dialogState.visible = false;
-  dataFormRef.value.clearValidate();
+  dataFormRef.value?.resetFields();
-
+  dataFormRef.value?.clearValidate();
   formData.id = undefined;
 }
+
 /**
  * 删除字典
- *
  * @param id 字典ID
  */
-function handleDelete(id?: number) {
+function handleDelete(id?: number): void {
   const attrGroupIds = [id || ids.value].join(",");
   if (!attrGroupIds) {
     ElMessage.warning("请勾选删除项");
@@ -286,8 +295,11 @@ function handleDelete(id?: number) {
   );
 }
 
-// 打开字典数据
+/**
-function handleOpenDictData(row: DictTypeItem) {
+ * 打开字典数据页面
+ * @param row 字典数据
+ */
+function openDictData(row: DictTypeItem): void {
   try {
     const route = router.resolve({
       name: "DictItem",

src/views/system/log/index.vue

@@ -1,6 +1,5 @@
-<template>
+<template>
   <div class="app-container">
-    <!-- 搜索区域 -->
     <div class="filter-section">
       <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="auto">
         <el-form-item prop="keywords" label="关键字">
@@ -70,12 +69,12 @@ defineOptions({
 
 import LogAPI from "@/api/system/log";
 import type { LogItem, LogQueryParams } from "@/types/api";
+import type { FormInstance } from "element-plus";
 
-const queryFormRef = ref();
+// 表单引用
-
+const queryFormRef = ref<FormInstance>();
-const loading = ref(false);
-const total = ref(0);
 
+// 查询参数
 const queryParams = reactive<LogQueryParams>({
   pageNum: 1,
   pageSize: 10,
@@ -83,11 +82,15 @@ const queryParams = reactive<LogQueryParams>({
   createTime: undefined as [string, string] | undefined,
 });
 
-// 日志表格数据
+// 列表数据
 const pageData = ref<LogItem[]>();
+const total = ref(0);
+const loading = ref(false);
 
-/** 获取数据 */
+/**
-function fetchData() {
+ * 加载日志列表数据
+ */
+function fetchData(): void {
   loading.value = true;
   LogAPI.getPage(queryParams)
     .then((data) => {
@@ -99,15 +102,19 @@ function fetchData() {
     });
 }
 
-/** 查询（重置页码后获取数据）*/
+/**
-function handleQuery() {
+ * 查询按钮点击事件
+ */
+function handleQuery(): void {
   queryParams.pageNum = 1;
   fetchData();
 }
 
-/** 重置查询 */
+/**
-function handleResetQuery() {
+ * 重置查询
-  queryFormRef.value.resetFields();
+ */
+function handleResetQuery(): void {
+  queryFormRef.value?.resetFields();
   queryParams.pageNum = 1;
   queryParams.createTime = undefined;
   fetchData();

src/views/system/menu/index.vue

@@ -1,6 +1,5 @@
-<template>
+<template>
   <div class="app-container">
-    <!-- 搜索区域 -->
     <div class="filter-section">
       <el-form ref="queryFormRef" :model="queryParams" :inline="true">
         <el-form-item label="关键字" prop="keywords">
@@ -26,7 +25,7 @@
             v-hasPerm="['sys:menu:create']"
             type="success"
             icon="plus"
-            @click="handleOpenDialog('0')"
+            @click="openDialog('0')"
           >
             新增
           </el-button>
@@ -97,7 +96,7 @@
               link
               size="small"
               icon="plus"
-              @click.stop="handleOpenDialog(scope.row.id)"
+              @click.stop="openDialog(scope.row.id)"
             >
               新增
             </el-button>
@@ -108,7 +107,7 @@
               link
               size="small"
               icon="edit"
-              @click.stop="handleOpenDialog(undefined, scope.row.id)"
+              @click.stop="openDialog(undefined, scope.row.id)"
             >
               编辑
             </el-button>
@@ -128,10 +127,10 @@
     </el-card>
 
     <el-drawer
-      v-model="dialog.visible"
+      v-model="dialogState.visible"
-      :title="dialog.title"
+      :title="dialogState.title"
       :size="drawerSize"
-      @close="handleCloseDialog"
+      @close="closeDialog"
     >
       <el-form ref="menuFormRef" :model="formData" :rules="rules" label-width="100px">
         <el-form-item label="父级菜单" prop="parentId">
@@ -351,7 +350,7 @@
       <template #footer>
         <div class="dialog-footer">
           <el-button type="primary" @click="handleSubmit">确定</el-button>
-          <el-button @click="handleCloseDialog">取消</el-button>
+          <el-button @click="closeDialog">取消</el-button>
         </div>
       </template>
     </el-drawer>
@@ -361,9 +360,9 @@
 <script setup lang="ts">
 import { useAppStore } from "@/store/modules/app";
 import { DeviceEnum } from "@/enums/settings";
-
 import MenuAPI from "@/api/system/menu";
 import type { MenuQueryParams, MenuForm, MenuItem } from "@/types/api";
+import type { FormInstance, FormRules } from "element-plus";
 import { MenuScopeEnum, MenuTypeEnum } from "@/enums/business";
 import { isTenantEnabled } from "@/utils/tenant";
 
@@ -374,44 +373,54 @@ defineOptions({
 
 const appStore = useAppStore();
 
-const queryFormRef = ref();
+// 表单引用
-const menuFormRef = ref();
+const queryFormRef = ref<FormInstance>();
+const menuFormRef = ref<FormInstance>();
 
+// 查询参数
+const queryParams = reactive<MenuQueryParams>({});
+
+// 列表数据
+const menuTableData = ref<MenuItem[]>([]);
+const menuOptions = ref<OptionItem[]>([]);
 const loading = ref(false);
-const dialog = reactive({
+
+// 弹窗状态
+const dialogState = reactive({
   title: "新增菜单",
   visible: false,
 });
 
-const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "600px" : "90%"));
+// 表单数据
-// 查询参数
-const queryParams = reactive<MenuQueryParams>({});
-// 多租户关闭时，隐藏菜单范围（避免单租户误配置）
-const showMenuScope = computed(() => isTenantEnabled());
-// 菜单表格数据
-const menuTableData = ref<MenuItem[]>([]);
-// 顶级菜单下拉选项
-const menuOptions = ref<OptionItem[]>([]);
-// 初始菜单表单数据
 const initialMenuFormData = ref<MenuForm>({
   id: undefined,
   parentId: "0",
   visible: 1,
   scope: MenuScopeEnum.TENANT,
   sort: 1,
-  type: MenuTypeEnum.MENU, // 默认菜单
+  type: MenuTypeEnum.MENU,
   alwaysShow: 0,
   keepAlive: 1,
   params: [],
 });
-// 菜单表单数据
 const formData = ref({ ...initialMenuFormData.value });
+const selectedMenuId = ref<string | undefined>();
+
+// 多租户关闭时，隐藏菜单范围
+const showMenuScope = computed(() => isTenantEnabled());
+
+// 抽屉宽度
+const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "600px" : "90%"));
+
+// 是否外链
 const isExternalLink = computed(
   () =>
     formData.value.type === MenuTypeEnum.MENU &&
     !!formData.value.routePath &&
     /^https?:\/\//.test(formData.value.routePath)
 );
+
+// 验证规则
 const validateRouteName = (_: unknown, value: string, callback: (error?: Error) => void) => {
   if (formData.value.type === MenuTypeEnum.MENU && !isExternalLink.value && !value) {
     callback(new Error("请输入路由名称"));
@@ -426,8 +435,7 @@ const validateComponent = (_: unknown, value: string, callback: (error?: Error)
   }
   callback();
 };
-// 表单验证规则
+const rules: FormRules = {
-const rules = reactive({
   parentId: [{ required: true, message: "请选择父级菜单", trigger: "blur" }],
   name: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
   type: [{ required: true, message: "请选择菜单类型", trigger: "blur" }],
@@ -435,13 +443,12 @@ const rules = reactive({
   routePath: [{ required: true, message: "请输入路由路径", trigger: "blur" }],
   component: [{ validator: validateComponent, trigger: "blur" }],
   visible: [{ required: true, message: "请选择显示状态", trigger: "change" }],
-});
+};
 
-// 选择表格的行菜单ID
+/**
-const selectedMenuId = ref<string | undefined>();
+ * 加载菜单列表数据
-
+ */
-// 查询菜单
+function fetchData(): void {
-function handleQuery() {
   loading.value = true;
   MenuAPI.getList(queryParams)
     .then((data) => {
@@ -452,53 +459,62 @@ function handleQuery() {
     });
 }
 
-// 重置查询
+/**
-function handleResetQuery() {
+ * 查询按钮点击事件
-  queryFormRef.value.resetFields();
+ */
-  handleQuery();
+function handleQuery(): void {
+  fetchData();
 }
 
-// 行点击事件
+/**
-function handleRowClick(row: MenuItem) {
+ * 重置查询
+ */
+function handleResetQuery(): void {
+  queryFormRef.value?.resetFields();
+  fetchData();
+}
+
+/**
+ * 行点击事件
+ */
+function handleRowClick(row: MenuItem): void {
   selectedMenuId.value = row.id;
 }
 
 /**
- * 打开表单弹窗
+ * 打开弹窗
- *
  * @param parentId 父菜单ID
- * @param menuId 菜单ID
+ * @param menuId 菜单ID（编辑时传入）
  */
-function handleOpenDialog(parentId?: string, menuId?: string) {
+function openDialog(parentId?: string, menuId?: string): void {
   MenuAPI.getOptions(true)
     .then((data) => {
       menuOptions.value = [{ value: "0", label: "顶级菜单", children: data }];
     })
     .then(() => {
-      dialog.visible = true;
+      dialogState.visible = true;
       if (menuId) {
-        dialog.title = "编辑菜单";
+        dialogState.title = "编辑菜单";
         MenuAPI.getFormData(menuId).then((data) => {
           initialMenuFormData.value = { ...data };
           formData.value = data;
         });
       } else {
-        dialog.title = "新增菜单";
+        dialogState.title = "新增菜单";
         formData.value.parentId = parentId?.toString();
       }
     });
 }
 
-// 菜单类型切换
+/**
-function handleMenuTypeChange() {
+ * 菜单类型切换事件
-  // 如果菜单类型改变
+ */
+function handleMenuTypeChange(): void {
   if (formData.value.type !== initialMenuFormData.value.type) {
     if (formData.value.type === MenuTypeEnum.MENU) {
-      // 目录切换到菜单时，清空组件路径"
       if (initialMenuFormData.value.type === MenuTypeEnum.CATALOG) {
         formData.value.component = "";
       } else {
-        // 其他情况，保留原有的组件路径
         formData.value.routePath = initialMenuFormData.value.routePath;
         formData.value.component = initialMenuFormData.value.component;
       }
@@ -509,37 +525,39 @@ function handleMenuTypeChange() {
 /**
  * 提交表单
  */
-function handleSubmit() {
+function handleSubmit(): void {
-  menuFormRef.value.validate((isValid: boolean) => {
+  menuFormRef.value?.validate((isValid) => {
     if (isValid) {
       const menuId = formData.value.id;
       if (menuId) {
-        //修改时父级菜单不能为当前菜单
         if (formData.value.parentId == menuId) {
           ElMessage.error("父级菜单不能为当前菜单");
           return;
         }
         MenuAPI.update(menuId, formData.value).then(() => {
           ElMessage.success("修改成功");
-          handleCloseDialog();
+          closeDialog();
-          handleQuery();
+          fetchData();
         });
       } else {
         MenuAPI.create(formData.value).then(() => {
           ElMessage.success("新增成功");
-          handleCloseDialog();
+          closeDialog();
-          handleQuery();
+          fetchData();
         });
       }
     }
   });
 }
 
-// 删除菜单
+/**
-function handleDelete(menuId: string) {
+ * 删除菜单
+ * @param menuId 菜单ID
+ */
+function handleDelete(menuId: string): void {
   if (!menuId) {
     ElMessage.warning("请勾选删除项");
-    return false;
+    return;
   }
 
   ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
@@ -552,7 +570,7 @@ function handleDelete(menuId: string) {
       MenuAPI.deleteById(menuId)
         .then(() => {
           ElMessage.success("删除成功");
-          handleQuery();
+          fetchData();
         })
         .finally(() => {
           loading.value = false;
@@ -564,30 +582,28 @@ function handleDelete(menuId: string) {
   );
 }
 
-function resetForm() {
+/**
-  menuFormRef.value.resetFields();
+ * 关闭弹窗
-  menuFormRef.value.clearValidate();
+ */
+function closeDialog(): void {
+  dialogState.visible = false;
+  menuFormRef.value?.resetFields();
+  menuFormRef.value?.clearValidate();
   formData.value = {
     id: undefined,
     parentId: "0",
     visible: 1,
     scope: MenuScopeEnum.TENANT,
     sort: 1,
-    type: MenuTypeEnum.MENU, // 默认菜单
+    type: MenuTypeEnum.MENU,
     alwaysShow: 0,
     keepAlive: 1,
     params: [],
   };
 }
 
-// 关闭弹窗
-function handleCloseDialog() {
-  dialog.visible = false;
-  resetForm();
-}
-
 onMounted(() => {
-  handleQuery();
+  fetchData();
 });
 </script>
 

src/views/system/notice/index.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="app-container">
-    <!-- 搜索区域 -->
     <div class="filter-section">
       <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-suffix=":">
         <el-form-item label="标题" prop="title">
@@ -39,7 +38,7 @@
             v-hasPerm="['sys:notice:create']"
             type="success"
             icon="plus"
-            @click="handleOpenDialog()"
+            @click="openDialog()"
           >
             新增通知
           </el-button>
@@ -138,7 +137,7 @@
               type="primary"
               size="small"
               link
-              @click="handleOpenDialog(scope.row.id)"
+              @click="openDialog(scope.row.id)"
             >
               编辑
             </el-button>
@@ -165,27 +164,26 @@
       />
     </el-card>
 
-    <!-- 通知公告表单弹窗 -->
     <el-dialog
-      v-model="dialog.visible"
+      v-model="dialogState.visible"
       :show-close="false"
-      :fullscreen="dialog.fullscreen"
+      :fullscreen="dialogState.fullscreen"
       top="6vh"
       width="70%"
       custom-class="notice-dialog"
-      @close="handleCloseDialog"
+      @close="closeDialog"
     >
       <template #header>
         <div class="flex-x-between">
-          <span>{{ dialog.title }}</span>
+          <span>{{ dialogState.title }}</span>
           <div class="dialog-toolbar">
             <el-button circle @click="toggleDialogFullscreen">
               <template #icon>
-                <FullScreen v-if="!dialog.fullscreen" />
+                <FullScreen v-if="!dialogState.fullscreen" />
                 <CopyDocument v-else />
               </template>
             </el-button>
-            <el-button circle @click="handleCloseDialog">
+            <el-button circle @click="closeDialog">
               <template #icon>
                 <Close />
               </template>
@@ -227,11 +225,10 @@
       <template #footer>
         <div class="dialog-footer">
           <el-button type="primary" @click="handleSubmit()">确定</el-button>
-          <el-button @click="handleCloseDialog()">取消</el-button>
+          <el-button @click="closeDialog()">取消</el-button>
         </div>
       </template>
     </el-dialog>
-    <!-- 通知公告详情 -->
     <el-dialog
       v-model="detailDialog.visible"
       :show-close="false"
@@ -280,49 +277,50 @@ defineOptions({
   inheritAttrs: false,
 });
 
-import { ref, reactive } from "vue";
 import NoticeAPI from "@/api/system/notice";
 import type { NoticeItem, NoticeForm, NoticeQueryParams, NoticeDetail } from "@/types/api";
 import UserAPI from "@/api/system/user";
+import type { FormInstance, FormRules } from "element-plus";
 
-const queryFormRef = ref();
+// 表单引用
-const dataFormRef = ref();
+const queryFormRef = ref<FormInstance>();
-
+const dataFormRef = ref<FormInstance>();
-const loading = ref(false);
-const selectIds = ref<number[]>([]);
-const total = ref(0);
 
+// 查询参数
 const queryParams = reactive<NoticeQueryParams>({
   pageNum: 1,
   pageSize: 10,
 });
 
-const userOptions = ref<OptionItem[]>([]);
+// 列表数据
-// 通知公告表格数据
 const pageData = ref<NoticeItem[]>([]);
+const userOptions = ref<OptionItem[]>([]);
+const total = ref(0);
+const loading = ref(false);
+const selectIds = ref<number[]>([]);
 
-// 弹窗
+// 弹窗状态
-const dialog = reactive({
+const dialogState = reactive({
   title: "",
   visible: false,
   fullscreen: false,
 });
 
-// 通知公告表单数据
+// 表单数据
 const formData = reactive<NoticeForm>({
-  level: "L", // 默认优先级为 L（低）
+  level: "L",
-  targetType: 1, // 默认目标类型为全部
+  targetType: 1,
 });
 
-// 通知公告表单校验规则
+// 验证规则
-const rules = reactive({
+const rules: FormRules = {
   title: [{ required: true, message: "请输入通知标题", trigger: "blur" }],
   content: [
     {
       required: true,
       message: "请输入通知内容",
       trigger: "blur",
-      validator: (rule: any, value: string, callback: any) => {
+      validator: (rule, value: string, callback) => {
         if (!value.replace(/<[^>]+>/g, "").trim()) {
           callback(new Error("请输入通知内容"));
         } else {
@@ -332,21 +330,26 @@ const rules = reactive({
     },
   ],
   type: [{ required: true, message: "请选择通知类型", trigger: "change" }],
-});
+};
 
+// 详情弹窗状态
 const detailDialog = reactive({
   visible: false,
 });
 const currentNotice = ref<NoticeDetail>({});
 
-// 查询通知公告
+/**
-function handleQuery() {
+ * 查询按钮点击事件
+ */
+function handleQuery(): void {
   queryParams.pageNum = 1;
   fetchData();
 }
 
-//发送请求接口
+/**
-function fetchData() {
+ * 加载通知公告列表数据
+ */
+function fetchData(): void {
   loading.value = true;
   NoticeAPI.getPage(queryParams)
     .then((data) => {
@@ -358,28 +361,35 @@ function fetchData() {
     });
 }
 
-// 重置查询
+/**
-function handleResetQuery() {
+ * 重置查询
-  queryFormRef.value!.resetFields();
+ */
+function handleResetQuery(): void {
+  queryFormRef.value?.resetFields();
   queryParams.pageNum = 1;
-  handleQuery();
+  fetchData();
 }
 
-// 行复选框选中项变化
+/**
-function handleSelectionChange(selection: any) {
+ * 表格选择变化事件
-  selectIds.value = selection.map((item: any) => item.id);
+ */
+function handleSelectionChange(selection: NoticeItem[]): void {
+  selectIds.value = selection.map((item) => item.id);
 }
 
-// 打开通知公告弹窗
+/**
-function handleOpenDialog(id?: string) {
+ * 打开弹窗
-  dialog.fullscreen = false;
+ * @param id 通知ID（编辑时传入）
+ */
+function openDialog(id?: string): void {
+  dialogState.fullscreen = false;
   UserAPI.getOptions().then((data) => {
     userOptions.value = data;
   });
 
-  dialog.visible = true;
+  dialogState.visible = true;
   if (id) {
-    dialog.title = "修改公告";
+    dialogState.title = "修改公告";
     NoticeAPI.getFormData(id).then((data) => {
       Object.assign(formData, {
         ...data,
@@ -390,29 +400,37 @@ function handleOpenDialog(id?: string) {
     });
   } else {
     Object.assign(formData, { level: "L", targetType: 1, targetUsers: [] });
-    dialog.title = "新增公告";
+    dialogState.title = "新增公告";
   }
 }
 
-// 发布通知公告
+/**
-function handlePublish(id: string) {
+ * 发布通知公告
+ * @param id 通知ID
+ */
+function handlePublish(id: string): void {
   NoticeAPI.publish(id).then(() => {
     ElMessage.success("发布成功");
-    handleQuery();
+    fetchData();
   });
 }
 
-// 撤回通知公告
+/**
-function handleRevoke(id: string) {
+ * 撤回通知公告
+ * @param id 通知ID
+ */
+function handleRevoke(id: string): void {
   NoticeAPI.revoke(id).then(() => {
     ElMessage.success("撤回成功");
-    handleQuery();
+    fetchData();
   });
 }
 
-// 通知公告表单提交
+/**
-function handleSubmit() {
+ * 提交表单
-  dataFormRef.value.validate((valid: any) => {
+ */
+function handleSubmit(): void {
+  dataFormRef.value?.validate((valid) => {
     if (valid) {
       loading.value = true;
       const payload = {
@@ -425,7 +443,7 @@ function handleSubmit() {
         NoticeAPI.update(id, payload)
           .then(() => {
             ElMessage.success("修改成功");
-            handleCloseDialog();
+            closeDialog();
             handleResetQuery();
           })
           .finally(() => (loading.value = false));
@@ -433,7 +451,7 @@ function handleSubmit() {
         NoticeAPI.create(payload)
           .then(() => {
             ElMessage.success("新增成功");
-            handleCloseDialog();
+            closeDialog();
             handleResetQuery();
           })
           .finally(() => (loading.value = false));
@@ -442,17 +460,24 @@ function handleSubmit() {
   });
 }
 
-// 重置表单
+/**
-function resetForm() {
+ * 关闭弹窗
-  dataFormRef.value.resetFields();
+ */
-  dataFormRef.value.clearValidate();
+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) {
+/**
+ * 标准化目标用户数据
+ */
+function normalizeTargetUsers(value?: unknown): number[] {
   if (!value) {
     return [];
   }
@@ -470,20 +495,18 @@ function normalizeTargetUsers(value?: unknown) {
   return [];
 }
 
-// 关闭通知公告弹窗
+/**
-function handleCloseDialog() {
+ * 弹窗全屏切换
-  dialog.visible = false;
+ */
-  dialog.fullscreen = false;
+function toggleDialogFullscreen(): void {
-  resetForm();
+  dialogState.fullscreen = !dialogState.fullscreen;
 }
 
-// 弹窗全屏切换
+/**
-function toggleDialogFullscreen() {
+ * 删除通知公告
-  dialog.fullscreen = !dialog.fullscreen;
+ * @param id 通知ID
-}
+ */
-
+function handleDelete(id?: number): void {
-// 删除通知公告
-function handleDelete(id?: number) {
   const deleteIds = [id || selectIds.value].join(",");
   if (!deleteIds) {
     ElMessage.warning("请勾选删除项");
@@ -510,17 +533,21 @@ function handleDelete(id?: number) {
   );
 }
 
-// 关闭通知详情弹窗
+/**
-const closeDetailDialog = () => {
+ * 打开详情弹窗
-  detailDialog.visible = false;
+ */
-};
+async function openDetailDialog(id: string): Promise<void> {
-
-// 打开通知详情弹窗
-const openDetailDialog = async (id: string) => {
   const noticeDetail = await NoticeAPI.getDetail(id);
   currentNotice.value = noticeDetail;
   detailDialog.visible = true;
-};
+}
+
+/**
+ * 关闭详情弹窗
+ */
+function closeDetailDialog(): void {
+  detailDialog.visible = false;
+}
 
 onMounted(() => {
   handleQuery();

src/views/system/role/index.vue

@@ -1,4 +1,4 @@
-<template>
+<template>
   <div class="app-container">
     <!-- 搜索区域 -->
     <div class="filter-section">
@@ -22,12 +22,12 @@
     <el-card shadow="hover" class="table-section">
       <div class="table-section__toolbar">
         <div class="table-section__toolbar--actions">
-          <el-button type="success" icon="plus" @click="handleOpenDialog()">新增</el-button>
+          <el-button type="success" icon="plus" @click="handleCreateClick()">新增</el-button>
           <el-button
             type="danger"
             :disabled="ids.length === 0"
             icon="delete"
-            @click="handleDelete()"
+            @click="handleBatchDelete()"
           >
             删除
           </el-button>
@@ -66,7 +66,7 @@
               size="small"
               link
               icon="position"
-              @click="openRolePermissionAssignment(scope.row)"
+              @click="handleAssignPermClick(scope.row)"
             >
               分配权限
             </el-button>
@@ -75,7 +75,7 @@
               size="small"
               link
               icon="edit"
-              @click="handleOpenDialog(scope.row.id)"
+              @click="handleEditClick(scope.row.id)"
             >
               编辑
             </el-button>
@@ -97,16 +97,16 @@
         v-model:total="total"
         v-model:page="queryParams.pageNum"
         v-model:limit="queryParams.pageSize"
-        @pagination="fetchData"
+        @pagination="fetchList"
       />
     </el-card>
 
     <!-- 角色表单弹窗 -->
     <el-dialog
-      v-model="dialog.visible"
+      v-model="dialogState.visible"
-      :title="dialog.title"
+      :title="dialogState.title"
       width="600px"
-      @close="handleCloseDialog"
+      @close="closeDialog"
     >
       <el-form ref="roleFormRef" :model="formData" :rules="rules" label-width="100px">
         <el-form-item label="角色名称" prop="name">
@@ -159,7 +159,7 @@
       <template #footer>
         <div class="dialog-footer">
           <el-button type="primary" @click="handleSubmit">确定</el-button>
-          <el-button @click="handleCloseDialog">取消</el-button>
+          <el-button @click="closeDialog">取消</el-button>
         </div>
       </template>
     </el-dialog>
@@ -187,7 +187,7 @@
           <el-checkbox
             v-model="parentChildLinked"
             class="ml-5"
-            @change="handleparentChildLinkedChange"
+            @change="handleParentChildLinkedChange"
           >
             父子联动
           </el-checkbox>
@@ -266,7 +266,7 @@ const menuPermOptions = ref<OptionItem[]>([]);
 const deptOptions = ref<OptionItem[]>([]);
 
 // 弹窗
-const dialog = reactive({
+const dialogState = reactive({
   title: "",
   visible: false,
 });
@@ -300,94 +300,67 @@ const isExpanded = ref(true);
 
 const parentChildLinked = ref(true);
 
-// 获取数据
+/**
-function fetchData() {
+ * 加载角色列表数据
+ */
+async function fetchList(): Promise<void> {
   loading.value = true;
-  RoleAPI.getPage(queryParams)
+  try {
-    .then((data) => {
+    const data = await RoleAPI.getPage(queryParams);
-      roleList.value = data.list;
+    roleList.value = data.list;
-      total.value = data.total ?? 0;
+    total.value = data.total ?? 0;
-    })
+  } finally {
-    .finally(() => {
+    loading.value = false;
-      loading.value = false;
+  }
-    });
 }
 
 // 查询（重置页码后获取数据）
-function handleQuery() {
+function handleQuery(): void {
   queryParams.pageNum = 1;
-  fetchData();
+  fetchList();
 }
 
-// 重置查询
+/**
-function handleResetQuery() {
+ * 重置查询条件
-  queryFormRef.value.resetFields();
+ */
-  queryParams.pageNum = 1;
+function resetQuery(): void {
-  fetchData();
+  queryFormRef.value?.resetFields();
+}
+
+/**
+ * 重置查询条件并重新查询
+ */
+function handleResetQuery(): void {
+  resetQuery();
+  handleQuery();
 }
 
 // 行复选框选中
-function handleSelectionChange(selection: any) {
+function handleSelectionChange(selection: any): void {
   ids.value = selection.map((item: any) => item.id);
 }
 
-// 打开角色弹窗
+/**
-async function handleOpenDialog(roleId?: string) {
+ * 打开表单弹窗
-  dialog.visible = true;
+ */
-  // 获取部门下拉选项
+function openDialog(): void {
-  if (deptOptions.value.length === 0) {
+  dialogState.visible = true;
-    deptOptions.value = await DeptAPI.getOptions();
-  }
-
-  if (roleId) {
-    dialog.title = "修改角色";
-    RoleAPI.getFormData(roleId).then((data) => {
-      Object.assign(formData, data);
-    });
-  } else {
-    dialog.title = "新增角色";
-  }
 }
 
-// 提交角色表单
+/**
-function handleSubmit() {
+ * 关闭表单弹窗
-  roleFormRef.value.validate((valid: any) => {
+ */
-    if (valid) {
+function closeDialog(): void {
-      // 如果不是自定义数据权限，清空部门ID列表
+  dialogState.visible = false;
-      const submitData = { ...formData };
+  resetForm();
-      if (submitData.dataScope !== 5) {
-        submitData.deptIds = undefined;
-      }
-
-      loading.value = true;
-      const roleId = formData.id;
-      if (roleId) {
-        RoleAPI.update(roleId, submitData)
-          .then(() => {
-            ElMessage.success("修改成功");
-            handleCloseDialog();
-            handleResetQuery();
-          })
-          .finally(() => (loading.value = false));
-      } else {
-        RoleAPI.create(submitData)
-          .then(() => {
-            ElMessage.success("新增成功");
-            handleCloseDialog();
-            handleResetQuery();
-          })
-          .finally(() => (loading.value = false));
-      }
-    }
-  });
 }
 
-// 关闭弹窗
+/**
-function handleCloseDialog() {
+ * 重置表单数据和验证状态
-  dialog.visible = false;
+ */
-
+function resetForm(): void {
-  roleFormRef.value.resetFields();
+  roleFormRef.value?.resetFields();
-  roleFormRef.value.clearValidate();
+  roleFormRef.value?.clearValidate();
 
   formData.id = undefined;
   formData.sort = 1;
@@ -396,9 +369,64 @@ function handleCloseDialog() {
   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) {
+function handleDelete(roleId?: number): void {
-  const roleIds = [roleId || ids.value].join(",");
+  const roleIds = roleId ? String(roleId) : ids.value.join(",");
   if (!roleIds) {
     ElMessage.warning("请勾选删除项");
     return;
@@ -424,8 +452,15 @@ function handleDelete(roleId?: number) {
   );
 }
 
+/**
+ * 批量删除按钮点击事件
+ */
+function handleBatchDelete(): void {
+  handleDelete();
+}
+
 // 打开分配菜单权限弹窗
-async function openRolePermissionAssignment(row: RoleItem) {
+async function handleAssignPermClick(row: RoleItem): Promise<void> {
   const roleId = row.id;
   if (roleId) {
     assignPermDialogVisible.value = true;
@@ -471,7 +506,7 @@ function handleAssignPermSubmit() {
 }
 
 // 展开/收缩 菜单权限树
-function togglePermTree() {
+function togglePermTree(): void {
   isExpanded.value = !isExpanded.value;
   if (permTreeRef.value) {
     Object.values(permTreeRef.value.store.nodesMap).forEach((node: any) => {
@@ -500,7 +535,7 @@ function handlePermFilter(
 }
 
 // 父子菜单节点是否联动
-function handleparentChildLinkedChange(val: any) {
+function handleParentChildLinkedChange(val: any): void {
   parentChildLinked.value = val;
 }
 

src/views/system/tenant/index.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="app-container">
-    <!-- 搜索区域 -->
     <div class="filter-section">
       <el-form ref="queryFormRef" :model="queryParams" :inline="true">
         <el-form-item prop="keywords" label="关键字">
@@ -33,7 +32,7 @@
             v-hasPerm="['sys:tenant:create']"
             type="success"
             icon="plus"
-            @click="handleOpenDialog()"
+            @click="openDialog()"
           >
             新增
           </el-button>
@@ -96,7 +95,7 @@
                 link
                 icon="menu"
                 title="更换租户套餐（将影响可用功能）"
-                @click="handleOpenTenantPlanDialog(scope.row)"
+                @click="openTenantPlanDialog(scope.row)"
               >
                 更换套餐
               </el-button>
@@ -114,7 +113,7 @@
                 icon="setting"
                 :disabled="!scope.row.planId"
                 title="在当前套餐范围内配置租户可用功能"
-                @click="handleOpenTenantCustomizeDialog(scope.row)"
+                @click="openTenantCustomizeDialog(scope.row)"
               >
                 套餐功能配置
               </el-button>
@@ -125,7 +124,7 @@
               size="small"
               link
               icon="edit"
-              @click="handleOpenDialog(scope.row.id)"
+              @click="openDialog(scope.row.id)"
             >
               编辑
             </el-button>
@@ -153,12 +152,11 @@
       />
     </el-card>
 
-    <!-- 租户表单弹窗 -->
     <el-dialog
-      v-model="dialog.visible"
+      v-model="dialogState.visible"
-      :title="dialog.title"
+      :title="dialogState.title"
       width="600px"
-      @close="handleCloseDialog"
+      @close="closeDialog"
     >
       <el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="100px">
         <el-form-item label="租户名称" prop="name">
@@ -241,17 +239,16 @@
       <template #footer>
         <div class="dialog-footer">
           <el-button type="primary" @click="handleSubmit">确定</el-button>
-          <el-button @click="handleCloseDialog">取消</el-button>
+          <el-button @click="closeDialog">取消</el-button>
         </div>
       </template>
     </el-dialog>
 
-    <!-- 选择套餐（弹窗） -->
     <el-dialog
       v-model="tenantPlanSelectVisible"
       title="更换租户套餐"
       width="520px"
-      @close="handleCloseTenantPlanSelectDialog"
+      @close="closeTenantPlanSelectDialog()"
     >
       <el-form label-width="90px" class="mb-3">
         <el-form-item label="当前套餐">
@@ -302,12 +299,11 @@
       </template>
     </el-dialog>
 
-    <!-- 套餐功能配置（抽屉） -->
     <el-drawer
       v-model="tenantPlanDialogVisible"
       title="套餐功能配置"
       size="640px"
-      @close="handleCloseTenantPlanDialog"
+      @close="closeTenantPlanDialog()"
     >
       <el-alert
         type="info"
@@ -359,10 +355,9 @@ defineOptions({
   inheritAttrs: false,
 });
 
-import { ElMessage, ElMessageBox } from "element-plus";
+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";
@@ -376,37 +371,39 @@ import type {
 import { MenuScopeEnum } from "@/enums/business";
 import { isPlatformTenantId } from "@/utils/tenant";
 
-const queryFormRef = ref();
+// 表单引用
-const dataFormRef = ref();
+const queryFormRef = ref<FormInstance>();
+const dataFormRef = ref<FormInstance>();
 const menuTreeRef = ref();
 const planPreviewTreeRef = ref();
 
-const loading = ref(false);
+// 查询参数
-const ids = ref<number[]>([]);
-const total = ref(0);
-
 const queryParams = reactive<TenantQueryParams>({
   pageNum: 1,
   pageSize: 10,
   keywords: "",
 });
 
+// 列表数据
 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 dialog = reactive({
+// 弹窗状态
+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[]>([]);
@@ -428,13 +425,12 @@ const menuTreeProps = {
   disabled: "disabled",
 };
 
-const planOptions = ref<OptionItem[]>([]);
-
 // 目标套餐未配置菜单时提示禁止提交
 const isPlanMenuEmpty = computed(
   () => tenantPlanId.value != null && planMenuIds.value.length === 0
 );
 
+// 表单数据
 const formData = reactive<TenantForm & TenantCreateForm>({
   id: undefined,
   name: "",
@@ -456,12 +452,12 @@ const isPlatformTenant = computed(() => isPlatformTenantId(formData.id));
 // 平台租户不允许批量删除
 const isTenantSelectable = (row: TenantItem) => !isPlatformTenantId(row.id);
 
-const rules = reactive({
+// 验证规则
+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();
@@ -471,24 +467,23 @@ const rules = reactive({
       trigger: "change",
     },
   ],
-});
+};
 
 const hasPermTenantMenu = computed(() => hasPerm("sys:tenant:plan-assign"));
 
-// 说明：
+/**
-// 1. 套餐决定功能上限
+ * 根据套餐ID解析显示名称
-// 2. 功能配置仅支持在套餐范围内关闭功能
+ */
-// 3. 不允许在功能配置页切换套餐
+function resolvePlanLabel(planId?: number): string {
-
-// 根据套餐 ID 解析显示名称
-function resolvePlanLabel(planId?: number) {
   if (planId == null) return "-";
   const matched = planOptions.value.find((item) => Number(item.value) === planId);
   return matched?.label || String(planId);
 }
 
-// 查询租户列表
+/**
-function fetchData() {
+ * 加载租户列表数据
+ */
+function fetchData(): void {
   loading.value = true;
   TenantAPI.getPage(queryParams)
     .then((data) => {
@@ -503,8 +498,10 @@ function fetchData() {
     });
 }
 
-// 打开更换套餐弹窗并初始化数据
+/**
-async function handleOpenTenantPlanDialog(row: TenantItem) {
+ * 打开更换套餐弹窗
+ */
+async function openTenantPlanDialog(row: TenantItem): Promise<void> {
   const tenantId = row.id;
   if (tenantId == null || tenantId === "") return;
   if (isPlatformTenantId(tenantId)) return;
@@ -542,18 +539,24 @@ async function handleOpenTenantPlanDialog(row: TenantItem) {
   }
 }
 
-// 关闭套餐选择弹窗
+/**
-function handleCloseTenantPlanSelectDialog() {
+ * 关闭套餐选择弹窗
+ */
+function closeTenantPlanSelectDialog(): void {
   resetTenantPlanState();
 }
 
-// 关闭套餐功能配置抽屉
+/**
-function handleCloseTenantPlanDialog() {
+ * 关闭套餐功能配置抽屉
+ */
+function closeTenantPlanDialog(): void {
   resetTenantPlanState();
 }
 
-// 重置套餐相关的所有状态
+/**
-function resetTenantPlanState() {
+ * 重置套餐相关的所有状态
+ */
+function resetTenantPlanState(): void {
   tenantPlanDialogVisible.value = false;
   tenantPlanSelectVisible.value = false;
   planPreviewKeywords.value = "";
@@ -574,8 +577,10 @@ function resetTenantPlanState() {
   menuTreeRef.value?.setCheckedKeys([], false);
 }
 
-// 切换目标套餐时更新可用菜单
+/**
-async function handlePlanChange(planId?: number) {
+ * 切换目标套餐时更新可用菜单
+ */
+async function handlePlanChange(planId?: number): Promise<void> {
   if (!planId) {
     planMenuIds.value = [];
     planPreviewOptions.value = [];
@@ -614,14 +619,18 @@ function updateCheckedMenus() {
   menuCheckedCount.value = checkedMenuIds.length;
 }
 
-// 更新已勾选菜单数量
+/**
-function handleMenuCheckedChange() {
+ * 更新已勾选菜单数量
+ */
+function handleMenuCheckedChange(): void {
   const checkedKeys = menuTreeRef.value?.getCheckedKeys(false) || [];
   menuCheckedCount.value = checkedKeys.length;
 }
 
-// 打开套餐功能配置抽屉并初始化数据
+/**
-async function handleOpenTenantCustomizeDialog(row?: TenantItem) {
+ * 打开套餐功能配置抽屉
+ */
+async function openTenantCustomizeDialog(row?: TenantItem): Promise<void> {
   const tenantId = row?.id ?? checkedTenant.value.id;
   if (!tenantId) return;
   if (isPlatformTenantId(tenantId)) return;
@@ -664,8 +673,10 @@ async function handleOpenTenantCustomizeDialog(row?: TenantItem) {
   }
 }
 
-// 提交更换套餐操作
+/**
-async function handleTenantPlanSelectSubmit() {
+ * 提交更换套餐操作
+ */
+async function handleTenantPlanSelectSubmit(): Promise<void> {
   const tenantId = checkedTenant.value.id;
   if (!tenantId) return;
   if (!tenantPlanId.value) {
@@ -723,16 +734,9 @@ async function handleTenantPlanSelectSubmit() {
   }
 }
 
-// 菜单搜索关键字联动过滤树
+/**
-watch(menuKeywords, (val) => {
+ * 过滤菜单树，仅保留套餐允许的节点
-  menuTreeRef.value?.filter(val);
+ */
-});
-
-// 套餐预览搜索关键字联动过滤树
-watch(planPreviewKeywords, (val) => {
-  planPreviewTreeRef.value?.filter(val);
-});
-// 过滤菜单树，仅保留套餐允许的节点
 function filterMenuOptionsByIds(
   options: OptionItem[],
   allowedMenuIdSet: Set<number>
@@ -752,8 +756,10 @@ function filterMenuOptionsByIds(
   }, []);
 }
 
-// 提交套餐功能配置更新
+/**
-async function handleTenantPlanSubmit() {
+ * 提交套餐功能配置更新
+ */
+async function handleTenantPlanSubmit(): Promise<void> {
   const tenantId = checkedTenant.value.id;
   if (!tenantId) return;
   if (!tenantPlanId.value) {
@@ -795,12 +801,16 @@ async function handleTenantPlanSubmit() {
   }
 }
 
-// 统一菜单 ID 为 number 并过滤无效值
+/**
-function normalizeMenuIds(menuIds: Array<number | string>) {
+ * 统一菜单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,
@@ -809,29 +819,38 @@ function applyMenuOptionsDisabled(options: OptionItem[], disabled: boolean): Opt
   }));
 }
 
-// 执行搜索
+/**
-function handleQuery() {
+ * 查询按钮点击事件
+ */
+function handleQuery(): void {
   queryParams.pageNum = 1;
   fetchData();
 }
 
-// 重置搜索条件
+/**
-function handleResetQuery() {
+ * 重置查询
+ */
+function handleResetQuery(): void {
   queryFormRef.value?.resetFields();
   queryParams.pageNum = 1;
   fetchData();
 }
 
-// 记录表格勾选项
+/**
-function handleSelectionChange(selection: any) {
+ * 表格选择变化事件
-  ids.value = selection.map((item: any) => Number(item.id));
+ */
+function handleSelectionChange(selection: TenantItem[]): void {
+  ids.value = selection.map((item) => Number(item.id));
 }
 
-// 打开新增/编辑租户弹窗
+/**
-async function handleOpenDialog(tenantId?: string) {
+ * 打开弹窗
-  dialog.visible = true;
+ * @param tenantId 租户ID（编辑时传入）
+ */
+async function openDialog(tenantId?: string): Promise<void> {
+  dialogState.visible = true;
   if (tenantId != null && tenantId !== "") {
-    dialog.title = "修改租户";
+    dialogState.title = "修改租户";
     const data = await TenantAPI.getFormData(tenantId);
     Object.assign(formData, data);
     formData.adminUsername = "";
@@ -840,7 +859,7 @@ async function handleOpenDialog(tenantId?: string) {
       formData.planId = undefined;
     }
   } else {
-    dialog.title = "新增租户";
+    dialogState.title = "新增租户";
     Object.assign(formData, {
       id: undefined,
       name: "",
@@ -858,9 +877,11 @@ async function handleOpenDialog(tenantId?: string) {
   }
 }
 
-// 关闭租户弹窗并重置表单
+/**
-function handleCloseDialog() {
+ * 关闭弹窗
-  dialog.visible = false;
+ */
+function closeDialog(): void {
+  dialogState.visible = false;
   dataFormRef.value?.resetFields();
   dataFormRef.value?.clearValidate();
   Object.assign(formData, {
@@ -879,8 +900,10 @@ function handleCloseDialog() {
   });
 }
 
-// 提交租户表单（新增/编辑）
+/**
-const handleSubmit = useDebounceFn(async () => {
+ * 提交表单
+ */
+const handleSubmit = useDebounceFn(async (): Promise<void> => {
   const valid = await dataFormRef.value?.validate().then(
     () => true,
     () => false
@@ -923,15 +946,18 @@ const handleSubmit = useDebounceFn(async () => {
       ElMessage.success(`新增成功：管理员账号 ${result?.adminUsername || ""}`);
     }
 
-    handleCloseDialog();
+    closeDialog();
     handleResetQuery();
   } finally {
     loading.value = false;
   }
 }, 300);
 
-// 删除单个或批量租户
+/**
-function handleDelete(tenantId?: string) {
+ * 删除租户
+ * @param tenantId 租户ID
+ */
+function handleDelete(tenantId?: string): void {
   const tenantIds = tenantId != null && tenantId !== "" ? tenantId : ids.value.join(",");
   if (!tenantIds) {
     ElMessage.warning("请勾选删除项");
@@ -959,20 +985,31 @@ function handleDelete(tenantId?: string) {
   );
 }
 
-// 页面初始化
+/**
-onMounted(() => {
+ * 加载租户套餐选项
-  fetchData();
+ */
-  fetchPlanOptions();
+async function fetchPlanOptions(): Promise<void> {
-});
-
-// 拉取租户套餐选项
-async function fetchPlanOptions() {
   const options = await TenantPlanAPI.getOptions();
   planOptions.value = options.map((item) => ({
     ...item,
     value: item.value != null ? Number(item.value) : item.value,
   }));
 }
+
+// 菜单搜索关键字联动过滤树
+watch(menuKeywords, (val) => {
+  menuTreeRef.value?.filter(val);
+});
+
+// 套餐预览搜索关键字联动过滤树
+watch(planPreviewKeywords, (val) => {
+  planPreviewTreeRef.value?.filter(val);
+});
+
+onMounted(() => {
+  fetchData();
+  fetchPlanOptions();
+});
 </script>
 
 <style scoped lang="scss"></style>

src/views/system/tenant/plan.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="app-container">
-    <!-- 搜索区域 -->
     <div class="filter-section">
       <el-form ref="queryFormRef" :model="queryParams" :inline="true">
         <el-form-item label="关键字" prop="keywords">
@@ -33,7 +32,7 @@
             v-hasPerm="['sys:tenant-plan:create']"
             type="success"
             icon="plus"
-            @click="handleOpenDialog()"
+            @click="openDialog()"
           >
             新增
           </el-button>
@@ -68,7 +67,7 @@
               size="small"
               link
               icon="menu"
-              @click="handleOpenPlanMenuDialog(scope.row)"
+              @click="openPlanMenuDialog(scope.row)"
             >
               菜单配置
             </el-button>
@@ -78,7 +77,7 @@
               size="small"
               link
               icon="edit"
-              @click="handleOpenDialog(scope.row.id)"
+              @click="openDialog(scope.row.id)"
             >
               编辑
             </el-button>
@@ -105,12 +104,11 @@
       />
     </el-card>
 
-    <!-- 租户套餐表单弹窗 -->
     <el-dialog
-      v-model="dialog.visible"
+      v-model="dialogState.visible"
-      :title="dialog.title"
+      :title="dialogState.title"
       width="520px"
-      @close="handleCloseDialog"
+      @close="closeDialog"
     >
       <el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="100px">
         <el-form-item label="套餐名称" prop="name">
@@ -140,17 +138,16 @@
       <template #footer>
         <div class="dialog-footer">
           <el-button type="primary" @click="handleSubmit">确定</el-button>
-          <el-button @click="handleCloseDialog">取消</el-button>
+          <el-button @click="closeDialog">取消</el-button>
         </div>
       </template>
     </el-dialog>
 
-    <!-- 方案菜单配置 -->
     <el-drawer
       v-model="planMenuDialogVisible"
       :title="'【' + checkedPlan.name + '】菜单配置'"
       size="600px"
-      @close="handleClosePlanMenuDialog"
+      @close="closePlanMenuDialog"
     >
       <div class="flex-x-between">
         <el-input v-model="menuKeywords" clearable class="w-[150px]" placeholder="菜单名称">
@@ -218,9 +215,8 @@ defineOptions({
   inheritAttrs: false,
 });
 
-import { ElMessage, ElMessageBox } from "element-plus";
+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 {
@@ -231,28 +227,32 @@ import type {
 } from "@/types/api";
 import { MenuScopeEnum } from "@/enums/business";
 
-const queryFormRef = ref();
+// 表单引用
-const dataFormRef = ref();
+const queryFormRef = ref<FormInstance>();
+const dataFormRef = ref<FormInstance>();
 const dataTableRef = ref();
 const menuTreeRef = ref();
 
-const loading = ref(false);
+// 查询参数
-const total = ref(0);
-
 const queryParams = reactive<TenantPlanQueryParams>({
   pageNum: 1,
   pageSize: 10,
   keywords: "",
 });
 
+// 列表数据
 const pageData = ref<TenantPlanItem[]>([]);
 const menuPermOptions = ref<OptionItem[]>([]);
+const total = ref(0);
+const loading = ref(false);
 
-const dialog = reactive({
+// 弹窗状态
+const dialogState = reactive({
   title: "",
   visible: false,
 });
 
+// 表单数据
 const formData = reactive<TenantPlanForm>({
   id: undefined,
   name: "",
@@ -262,20 +262,24 @@ const formData = reactive<TenantPlanForm>({
   remark: "",
 });
 
-const rules = reactive({
+// 验证规则
+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);
 
-// 获取租户套餐分页数据
+/**
-function fetchData() {
+ * 加载租户套餐分页数据
+ */
+function fetchData(): void {
   loading.value = true;
   TenantPlanAPI.getPage(queryParams)
     .then((data) => {
@@ -287,24 +291,31 @@ function fetchData() {
     });
 }
 
-// 查询
+/**
-function handleQuery() {
+ * 查询按钮点击事件
+ */
+function handleQuery(): void {
   queryParams.pageNum = 1;
   fetchData();
 }
 
-// 重置查询条件
+/**
-function handleResetQuery() {
+ * 重置查询
+ */
+function handleResetQuery(): void {
   queryFormRef.value?.resetFields();
   queryParams.pageNum = 1;
   fetchData();
 }
 
-// 打开新增/编辑弹窗
+/**
-async function handleOpenDialog(planId?: number) {
+ * 打开弹窗
-  dialog.visible = true;
+ * @param planId 套餐ID（编辑时传入）
+ */
+async function openDialog(planId?: number): Promise<void> {
+  dialogState.visible = true;
   if (planId) {
-    dialog.title = "修改套餐";
+    dialogState.title = "修改套餐";
     const data = await TenantPlanAPI.getFormData(String(planId));
     Object.assign(formData, data);
     if (formData.status == null) {
@@ -314,7 +325,7 @@ async function handleOpenDialog(planId?: number) {
       formData.sort = 1;
     }
   } else {
-    dialog.title = "新增套餐";
+    dialogState.title = "新增套餐";
     Object.assign(formData, {
       id: undefined,
       name: "",
@@ -326,9 +337,11 @@ async function handleOpenDialog(planId?: number) {
   }
 }
 
-// 关闭弹窗并重置表单
+/**
-function handleCloseDialog() {
+ * 关闭弹窗
-  dialog.visible = false;
+ */
+function closeDialog(): void {
+  dialogState.visible = false;
   dataFormRef.value?.resetFields();
   dataFormRef.value?.clearValidate();
   Object.assign(formData, {
@@ -341,8 +354,10 @@ function handleCloseDialog() {
   });
 }
 
-// 提交新增/编辑
+/**
-const handleSubmit = useDebounceFn(async () => {
+ * 提交表单
+ */
+const handleSubmit = useDebounceFn(async (): Promise<void> => {
   const valid = await dataFormRef.value?.validate().then(
     () => true,
     () => false
@@ -358,15 +373,18 @@ const handleSubmit = useDebounceFn(async () => {
       await TenantPlanAPI.create(formData);
       ElMessage.success("新增成功");
     }
-    handleCloseDialog();
+    closeDialog();
     handleResetQuery();
   } finally {
     loading.value = false;
   }
 }, 300);
 
-// 删除
+/**
-function handleDelete(planId?: number) {
+ * 删除套餐
+ * @param planId 套餐ID
+ */
+function handleDelete(planId?: number): void {
   if (!planId) return;
   ElMessageBox.confirm("确认删除该租户套餐吗？", "警告", {
     confirmButtonText: "确定",
@@ -385,15 +403,16 @@ function handleDelete(planId?: number) {
   });
 }
 
-// 打开方案菜单配置抽屉
+/**
-async function handleOpenPlanMenuDialog(row: TenantPlanItem) {
+ * 打开菜单配置弹窗
+ */
+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);
@@ -405,8 +424,10 @@ async function handleOpenPlanMenuDialog(row: TenantPlanItem) {
   }
 }
 
-// 关闭方案菜单配置抽屉并重置状态
+/**
-function handleClosePlanMenuDialog() {
+ * 关闭菜单配置弹窗
+ */
+function closePlanMenuDialog(): void {
   planMenuDialogVisible.value = false;
   menuKeywords.value = "";
   menuExpanded.value = true;
@@ -414,8 +435,10 @@ function handleClosePlanMenuDialog() {
   menuTreeRef.value?.setCheckedKeys([], false);
 }
 
-// 展开/收缩菜单树
+/**
-function toggleMenuTree() {
+ * 展开/收缩菜单树
+ */
+function toggleMenuTree(): void {
   menuExpanded.value = !menuExpanded.value;
   if (menuTreeRef.value) {
     Object.values(menuTreeRef.value.store.nodesMap).forEach((node: any) => {
@@ -428,24 +451,25 @@ function toggleMenuTree() {
   }
 }
 
-// 切换父子联动
+/**
-function handleMenuLinkChange(val: string | number | boolean) {
+ * 切换父子联动
+ */
+function handleMenuLinkChange(val: string | number | boolean): void {
   menuParentChildLinked.value = Boolean(val);
 }
 
-// 菜单树关键字过滤
+/**
-watch(menuKeywords, (val) => {
+ * 菜单树过滤逻辑
-  menuTreeRef.value?.filter(val);
+ */
-});
+function handleMenuFilter(value: string, data: { [key: string]: any }): boolean {
-
-// 菜单树过滤逻辑
-function handleMenuFilter(value: string, data: { [key: string]: any }) {
   if (!value) return true;
   return data.label.includes(value);
 }
 
-// 提交方案菜单配置
+/**
-async function handlePlanMenuSubmit() {
+ * 提交菜单配置
+ */
+async function handlePlanMenuSubmit(): Promise<void> {
   const planId = checkedPlan.value.id;
   if (!planId) return;
 
@@ -463,7 +487,11 @@ async function handlePlanMenuSubmit() {
   }
 }
 
-// 初始化
+// 菜单树关键字过滤
+watch(menuKeywords, (val) => {
+  menuTreeRef.value?.filter(val);
+});
+
 onMounted(() => {
   fetchData();
 });

src/views/system/user/components/UserDeptTree.vue

@@ -1,4 +1,4 @@
-<template>
+<template>
   <el-card shadow="never">
     <el-input v-model="deptName" placeholder="部门名称" clearable>
       <template #prefix>
@@ -21,6 +21,7 @@
 
 <script setup lang="ts">
 import DeptAPI from "@/api/system/dept";
+
 const props = defineProps({
   modelValue: {
     type: [String, Number],
@@ -28,9 +29,10 @@ const props = defineProps({
   },
 });
 
-const deptList = ref<OptionItem[]>(); // 部门列表
+// 部门树数据
-const deptTreeRef = ref(); // 部门树
+const deptList = ref<OptionItem[]>();
-const deptName = ref(); // 部门名称
+const deptTreeRef = ref();
+const deptName = ref();
 
 const emits = defineEmits(["node-click"]);
 
@@ -41,22 +43,24 @@ watchEffect(
     deptTreeRef.value.filter(deptName.value);
   },
   {
-    flush: "post", // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
+    flush: "post",
   }
 );
 
 /**
  * 部门筛选
  */
-function handleFilter(value: string, data: any) {
+function handleFilter(value: string, data: any): boolean {
   if (!value) {
     return true;
   }
   return data.label.indexOf(value) !== -1;
 }
 
-/** 部门树节点 Click */
+/**
-function handleNodeClick(data: { [key: string]: any }) {
+ * 部门树节点点击事件
+ */
+function handleNodeClick(data: { [key: string]: any }): void {
   deptId.value = data.value;
   emits("node-click");
 }

src/views/system/user/components/UserImportDialog.vue

@@ -1,11 +1,11 @@
-<template>
+<template>
   <div>
     <el-dialog
       v-model="visible"
       :align-center="true"
       title="导入数据"
       width="600px"
-      @close="handleClose"
+      @close="closeDialog"
     >
       <el-scrollbar max-height="60vh">
         <el-form
@@ -37,7 +37,7 @@
                     type="primary"
                     icon="download"
                     underline="never"
-                    @click="handleDownloadTemplate"
+                    @click="downloadTemplate"
                   >
                     下载模板
                   </el-link>
@@ -49,7 +49,7 @@
       </el-scrollbar>
       <template #footer>
         <div style="padding-right: var(--el-dialog-padding-primary)">
-          <el-button v-if="resultData.length > 0" type="primary" @click="handleShowResult">
+          <el-button v-if="resultData.length > 0" type="primary" @click="showResult">
             错误信息
           </el-button>
           <el-button
@@ -59,7 +59,7 @@
           >
             确定
           </el-button>
-          <el-button @click="handleClose">取消</el-button>
+          <el-button @click="closeDialog">取消</el-button>
         </div>
       </template>
     </el-dialog>
@@ -80,7 +80,7 @@
       </el-table>
       <template #footer>
         <div class="dialog-footer">
-          <el-button @click="handleCloseResult">关闭</el-button>
+          <el-button @click="closeResultDialog">关闭</el-button>
         </div>
       </template>
     </el-dialog>
@@ -94,26 +94,36 @@ import { ApiCodeEnum } from "@/enums/api";
 import { downloadFile } from "@/utils/download";
 
 const emit = defineEmits(["import-success"]);
+
+// 弹窗可见状态
 const visible = defineModel("modelValue", {
   type: Boolean,
   required: true,
   default: false,
 });
 
+// 结果弹窗状态
 const resultVisible = ref(false);
 const resultData = ref<string[]>([]);
 const invalidCount = ref(0);
 const validCount = ref(0);
 
+// 表单引用
 const importFormRef = ref(null);
 const uploadRef = ref(null);
 
+// 表单数据
 const importFormData = reactive<{
   files: UploadUserFile[];
 }>({
   files: [],
 });
 
+// 验证规则
+const importFormRules = {
+  files: [{ required: true, message: "文件不能为空", trigger: "blur" }],
+};
+
 watch(visible, (newValue) => {
   if (newValue) {
     resultData.value = [];
@@ -123,24 +133,26 @@ watch(visible, (newValue) => {
   }
 });
 
-const importFormRules = {
+/**
-  files: [{ required: true, message: "文件不能为空", trigger: "blur" }],
+ * 文件超出个数限制
-};
+ */
-
+function handleFileExceed(): void {
-// 文件超出个数限制
-const handleFileExceed = () => {
   ElMessage.warning("只能上传一个文件");
-};
+}
 
-// 下载导入模板
+/**
-const handleDownloadTemplate = () => {
+ * 下载导入模板
+ */
+function downloadTemplate(): void {
   UserAPI.downloadTemplate().then((response: any) => {
     downloadFile(response);
   });
-};
+}
 
-// 上传文件
+/**
-const handleUpload = async () => {
+ * 上传文件
+ */
+async function handleUpload(): Promise<void> {
   if (!importFormData.files.length) {
     ElMessage.warning("请选择文件");
     return;
@@ -150,7 +162,7 @@ const handleUpload = async () => {
   if (result.code === ApiCodeEnum.SUCCESS && result.invalidCount === 0) {
     ElMessage.success("导入成功，导入数据：" + result.validCount + "条");
     emit("import-success");
-    handleClose();
+    closeDialog();
   } else {
     ElMessage.error("上传失败");
     resultVisible.value = true;
@@ -158,21 +170,27 @@ const handleUpload = async () => {
     invalidCount.value = result.invalidCount;
     validCount.value = result.validCount;
   }
-};
+}
 
-// 显示错误信息
+/**
-const handleShowResult = () => {
+ * 显示错误信息
+ */
+function showResult(): void {
   resultVisible.value = true;
-};
+}
 
-// 关闭错误信息弹窗
+/**
-const handleCloseResult = () => {
+ * 关闭错误信息弹窗
+ */
+function closeResultDialog(): void {
   resultVisible.value = false;
-};
+}
 
-// 关闭弹窗
+/**
-const handleClose = () => {
+ * 关闭弹窗
+ */
+function closeDialog(): void {
   importFormData.files.length = 0;
   visible.value = false;
-};
+}
 </script>

src/views/system/user/index.vue

@@ -59,7 +59,7 @@
                 v-hasPerm="['sys:user:create']"
                 type="success"
                 icon="plus"
-                @click="handleOpenDialog()"
+                @click="handleCreateClick"
               >
                 新增
               </el-button>
@@ -74,15 +74,11 @@
               </el-button>
             </div>
             <div class="table-section__toolbar--tools">
-              <el-button
+              <el-button v-hasPerm="'sys:user:import'" icon="upload" @click="openImportDialog">
-                v-hasPerm="'sys:user:import'"
-                icon="upload"
-                @click="handleOpenImportDialog"
-              >
                 导入
               </el-button>
 
-              <el-button v-hasPerm="'sys:user:export'" icon="download" @click="handleExport">
+              <el-button v-hasPerm="'sys:user:export'" icon="download" @click="exportUsers">
                 导出
               </el-button>
             </div>
@@ -136,7 +132,7 @@
                   icon="edit"
                   link
                   size="small"
-                  @click="handleOpenDialog(scope.row.id)"
+                  @click="handleEditClick(scope.row.id)"
                 >
                   编辑
                 </el-button>
@@ -159,7 +155,7 @@
             v-model:total="total"
             v-model:page="queryParams.pageNum"
             v-model:limit="queryParams.pageSize"
-            @pagination="fetchUserList"
+            @pagination="fetchList"
           />
         </el-card>
       </el-col>
@@ -171,7 +167,7 @@
       :title="dialogState.title"
       append-to-body
       :size="drawerSize"
-      @close="handleCloseDialog"
+      @close="closeDialog"
     >
       <el-form ref="userFormRef" :model="formData" :rules="rules" label-width="80px">
         <el-form-item label="用户名" prop="username">
@@ -235,7 +231,7 @@
       <template #footer>
         <div class="dialog-footer">
           <el-button type="primary" @click="handleSubmit">确 定</el-button>
-          <el-button @click="handleCloseDialog">取 消</el-button>
+          <el-button @click="closeDialog">取 消</el-button>
         </div>
       </template>
     </el-drawer>
@@ -246,53 +242,33 @@
 </template>
 
 <script setup lang="ts">
-// ==================== 1. Vue 核心 API ====================
 import { computed, onMounted, reactive, ref } from "vue";
 import { useDebounceFn } from "@vueuse/core";
-
+import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from "element-plus";
-// ==================== 2. Element Plus ====================
-import { ElMessage, ElMessageBox, type FormInstance } from "element-plus";
-
-// ==================== 3. 类型定义 ====================
 import type { UserForm, UserQueryParams, UserItem } from "@/types/api";
-
+import { downloadFile } from "@/utils";
-// ==================== 3.5 工具函数 ====================
-import { downloadFile, VALIDATORS } from "@/utils";
-// ==================== 4. API 服务 ====================
 import UserAPI from "@/api/system/user";
 import DeptAPI from "@/api/system/dept";
 import RoleAPI from "@/api/system/role";
-
-// ==================== 5. Store ====================
 import { useUserStore, useAppStore } from "@/store";
-
-// ==================== 6. Enums ====================
 import { DeviceEnum, DialogMode, CommonStatus } from "@/enums";
-
-// ==================== 7. Composables ====================
 import { useTableSelection } from "@/composables";
-
-// ==================== 8. 组件 ====================
 import UserDeptTree from "./components/UserDeptTree.vue";
 import UserImportDialog from "./components/UserImportDialog.vue";
 
-// ==================== 组件配置 ====================
 defineOptions({
   name: "User",
   inheritAttrs: false,
 });
 
-// ==================== Store 实例 ====================
 const appStore = useAppStore();
 const userStore = useUserStore();
 
-// ==================== 响应式状态 ====================
+// 表单引用
-
-// DOM 引用
 const queryFormRef = ref<FormInstance>();
 const userFormRef = ref<FormInstance>();
 
-// 列表查询参数
+// 查询参数
 const queryParams = reactive<UserQueryParams>({
   pageNum: 1,
   pageSize: 10,
@@ -310,7 +286,10 @@ const dialogState = reactive({
   mode: DialogMode.CREATE,
 });
 
-// 初始表单数据
+// 导入弹窗状态
+const importDialogVisible = ref(false);
+
+// 表单初始数据
 const initialFormData: UserForm = {
   status: CommonStatus.ENABLED,
 };
@@ -318,37 +297,25 @@ const initialFormData: UserForm = {
 // 表单数据
 const formData = reactive<UserForm>({ ...initialFormData });
 
-// 下拉选项数据
+// 下拉选项
 const deptOptions = ref<OptionItem[]>();
 const roleOptions = ref<OptionItem[]>();
 
-// 导入弹窗
-const importDialogVisible = ref(false);
-
-// ==================== 计算属性 ====================
-
-/**
- * 抽屉尺寸（响应式）
- */
 const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "600px" : "90%"));
 
-// ==================== 表单验证规则 ====================
+const rules: FormRules = {
-
+  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
-const rules = reactive({
+  nickname: [{ required: true, message: "请输入用户昵称", trigger: "blur" }],
-  username: [VALIDATORS.required("用户名不能为空")],
+  deptId: [{ required: true, message: "请选择所属部门", trigger: "change" }],
-  nickname: [VALIDATORS.required("用户昵称不能为空")],
+  roleIds: [{ required: true, message: "请选择用户角色", trigger: "change" }],
-  deptId: [VALIDATORS.required("所属部门不能为空")],
+  email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: "blur" }],
-  roleIds: [VALIDATORS.required("用户角色不能为空")],
+  mobile: [{ pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号码", trigger: "blur" }],
-  email: [VALIDATORS.email],
+};
-  mobile: [VALIDATORS.mobile],
-});
-
-// ==================== 数据加载 ====================
 
 /**
- * 获取用户列表数据
+ * 加载用户列表数据
  */
-async function fetchUserList(): Promise<void> {
+async function fetchList(): Promise<void> {
   loading.value = true;
   try {
     const data = await UserAPI.getPage(queryParams);
@@ -359,32 +326,89 @@ async function fetchUserList(): Promise<void> {
   }
 }
 
-// ==================== 表格选择 ====================
+/**
+ * 加载表单下拉选项数据
+ */
+async function loadFormOptions(): Promise<void> {
+  [roleOptions.value, deptOptions.value] = await Promise.all([
+    RoleAPI.getOptions(),
+    DeptAPI.getOptions(),
+  ]);
+}
+
 const { selectedIds, hasSelection, handleSelectionChange } = useTableSelection<UserItem>();
 
-// ==================== 查询操作 ====================
-
 /**
- * 查询用户列表
+ * 执行查询（重置页码）
  */
-function handleQuery(): Promise<void> {
+function handleQuery(): void {
   queryParams.pageNum = 1;
-  return fetchUserList();
+  fetchList();
 }
 
 /**
  * 重置查询条件
  */
-function handleResetQuery(): void {
+function resetQuery(): void {
   queryFormRef.value?.resetFields();
   queryParams.deptId = undefined;
   queryParams.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 {
@@ -393,65 +417,39 @@ function handleResetPassword(row: UserItem): void {
     cancelButtonText: "取消",
     inputPattern: /.{6,}/,
     inputErrorMessage: "密码至少需要6位字符",
-  })
+  }).then(
-    .then((result: any) => {
+    (result: any) => resetPassword(row.id, result.value),
-      const value = result.value;
+    () => {
-      return UserAPI.resetPassword(row.id, value);
+      /* 用户取消 */
-    })
+    }
-    .then(
+  );
-      () => {
-        ElMessage.success("密码重置成功");
-      },
-      () => {
-        // 用户取消
-      }
-    );
 }
 
-// ==================== 弹窗操作 ====================
-
 /**
- * 打开用户表单弹窗
+ * 新增按钮点击事件
- * @param id 用户ID（编辑时传入）
  */
-async function handleOpenDialog(id?: string): Promise<void> {
+async function handleCreateClick(): Promise<void> {
-  dialogState.visible = true;
+  dialogState.title = "新增用户";
-
+  dialogState.mode = DialogMode.CREATE;
-  // 并行加载下拉选项数据
+  await loadFormOptions();
-  [roleOptions.value, deptOptions.value] = await Promise.all([
+  openDialog();
-    RoleAPI.getOptions(),
-    DeptAPI.getOptions(),
-  ]);
-
-  // 编辑：加载用户数据
-  if (id) {
-    dialogState.title = "修改用户";
-    dialogState.mode = DialogMode.EDIT;
-    const data = await UserAPI.getFormData(id);
-    Object.assign(formData, data);
-  } else {
-    // 新增：设置默认值
-    dialogState.title = "新增用户";
-    dialogState.mode = DialogMode.CREATE;
-  }
 }
 
 /**
- * 关闭用户表单弹窗
+ * 编辑按钮点击事件
+ * @param id 用户ID
  */
-function handleCloseDialog(): void {
+async function handleEditClick(id: string): Promise<void> {
-  dialogState.visible = false;
+  dialogState.title = "修改用户";
-
+  dialogState.mode = DialogMode.EDIT;
-  // 安全地重置表单
+  await loadFormOptions();
-  userFormRef.value?.resetFields();
+  const data = await UserAPI.getFormData(id);
-  userFormRef.value?.clearValidate();
+  Object.assign(formData, data);
-
+  openDialog();
-  // 完全重置表单数据
-  Object.assign(formData, initialFormData);
 }
 
 /**
- * 提交用户表单（防抖）
+ * 提交表单（防抖处理）
  */
 const handleSubmit = useDebounceFn(async () => {
   const valid = await userFormRef.value?.validate().then(
@@ -460,31 +458,28 @@ const handleSubmit = useDebounceFn(async () => {
   );
   if (!valid) return;
 
-  const userId = formData.id;
   loading.value = true;
-
   try {
-    if (userId) {
+    if (formData.id) {
-      await UserAPI.update(userId, formData);
+      await UserAPI.update(formData.id, formData);
       ElMessage.success("修改用户成功");
     } else {
       await UserAPI.create(formData);
       ElMessage.success("新增用户成功");
     }
-    handleCloseDialog();
+    closeDialog();
-    handleResetQuery();
+    handleQuery();
   } finally {
     loading.value = false;
   }
 }, 300);
 
 /**
- * 删除用户
+ * 删除按钮点击事件
- * @param id 用户ID（单个删除时传入）
+ * @param id 用户ID，不传则删除选中的用户
  */
 function handleDelete(id?: string): void {
   const userIds = id ?? selectedIds.value.join(",");
-
   if (!userIds) {
     ElMessage.warning("请勾选删除项");
     return;
@@ -496,7 +491,6 @@ function handleDelete(id?: string): void {
     const isCurrentUserInList = id
       ? id === currentUserId
       : selectedIds.value.some((selectedId) => String(selectedId) === currentUserId);
-
     if (isCurrentUserInList) {
       ElMessage.error("不能删除当前登录用户");
       return;
@@ -508,45 +502,29 @@ function handleDelete(id?: string): void {
     cancelButtonText: "取消",
     type: "warning",
   }).then(
-    async () => {
+    () => deleteUsers(userIds),
-      loading.value = true;
-      try {
-        await UserAPI.deleteByIds(userIds);
-        ElMessage.success("删除成功");
-        handleResetQuery();
-      } finally {
-        loading.value = false;
-      }
-    },
     () => {
-      // 用户取消操作，无需处理
+      /* 用户取消 */
     }
   );
 }
 
-// ==================== 导入导出 ====================
-
-/**
- * 打开导入弹窗
- */
-function handleOpenImportDialog(): void {
-  importDialogVisible.value = true;
-}
-
 /**
  * 导出用户列表
  */
-async function handleExport(): Promise<void> {
+async function exportUsers(): Promise<void> {
   const response = await UserAPI.export(queryParams);
   downloadFile(response);
   ElMessage.success("导出成功");
 }
 
-// ==================== 生命周期 ====================
-
 /**
- * 组件挂载时初始化数据
+ * 打开导入弹窗
  */
+function openImportDialog(): void {
+  importDialogVisible.value = true;
+}
+
 onMounted(() => {
   handleQuery();
 });