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

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"
-      :title="dialog.title"
+      v-model="dialogState.visible"
+      :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 @click="handleCloseDialog">取 消</el-button>
+          <el-button type="primary" @click="handleSubmit">确 定</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 loading = ref(false);
-const ids = ref<number[]>([]);
-const total = ref(0);
+// 表单引用
+const queryFormRef = ref<FormInstance>();
+const dataFormRef = ref<FormInstance>();
 
+// 查询参数
 const queryParams = reactive<DictTypeQueryParams>({
   pageNum: 1,
   pageSize: 10,
 });
 
+// 列表数据
 const tableData = ref<DictTypeItem[]>();
+const total = ref(0);
+const loading = ref(false);
+const ids = ref<string[]>([]);
 
-const dialog = reactive({
+// 弹窗状态
+const dialogState = reactive({
   title: "",
   visible: false,
 });
 
+// 表单数据
 const formData = reactive<DictTypeForm>({});
 
-const computedRules = computed(() => {
-  const rules: Partial<Record<string, any>> = {
-    name: [{ required: true, message: "请输入字典名称", trigger: "blur" }],
-    dictCode: [{ required: true, message: "请输入字典编码", trigger: "blur" }],
-  };
-  return rules;
-});
+// 验证规则
+const rules: FormRules = {
+  name: [{ required: true, message: "请输入字典名称", trigger: "blur" }],
+  dictCode: [{ required: true, message: "请输入字典编码", trigger: "blur" }],
+};
 
-// 获取数据
-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) {
-  dialog.visible = true;
-  dialog.title = "修改字典";
+function handleEditClick(id: string): void {
+  dialogState.visible = true;
+  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;
-
-  dataFormRef.value.resetFields();
-  dataFormRef.value.clearValidate();
-
+/**
+ * 关闭弹窗
+ */
+function closeDialog(): void {
+  dialogState.visible = false;
+  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",