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

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"
-      :title="dialog.title"
+      v-model="dialogState.visible"
+      :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 @click="handleCloseDialog">确 定</el-button>
+          <el-button type="primary" @click="handleSubmit">确 定</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 loading = ref(false);
-const ids = ref<number[]>([]);
-const total = ref(0);
+// 表单引用
+const queryFormRef = ref<FormInstance>();
+const dataFormRef = ref<FormInstance>();
 
+// 查询参数
 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>> = {
-    value: [{ required: true, message: "请输入字典值", trigger: "blur" }],
-    label: [{ required: true, message: "请输入字典标签", trigger: "blur" }],
-  };
+// 验证规则
+const rules: FormRules = {
+  value: [{ required: true, message: "请输入字典值", trigger: "blur" }],
+  label: [{ required: true, message: "请输入字典标签", trigger: "blur" }],
+};
 
-  return rules;
-});
-
-// 获取数据
-function fetchData() {
+/**
+ * 加载字典项列表数据
+ */
+function fetchData(): void {
   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;
-  dialog.title = row ? "编辑字典值" : "新增字典值";
+/**
+ * 打开弹窗
+ * @param 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("确认删除已选中的数据项?", "警告", {