优化更新

2026-09-14 10:33:29 +08:00
parent e8b5d55603
commit 11c46addfa
61 changed files with 1025 additions and 896 deletions
@@ -1,7 +1,7 @@
 # Modal 弹窗

 :::tip 说明
-项目提供 `BasicModal` 组件（`src/components/Modal/src/BasicModal.vue`）和原生 `el-dialog` 两种弹窗用法。编辑弹窗通过 `defineAsyncComponent` 懒加载，减少首屏渲染负担。
+项目提供 `BasicModal` 组件（`src/components/Modal/src/BasicModal.vue`）和原生 `n-modal` 两种弹窗用法。编辑弹窗通过 `defineAsyncComponent` 懒加载，减少首屏渲染负担。
 :::

 ## 组件架构
@@ -9,7 +9,7 @@
 ```
 src/components/Modal/
 ├── src/
-│ ├── BasicModal.vue     # 主组件（基于 el-dialog）
+│ ├── BasicModal.vue     # 主组件（基于 n-modal）
 │ ├── props.ts           # 属性定义
 │ ├── type.ts            # 类型定义（ModalProps、ModalMethods）
 │ └── hooks/
@@ -19,7 +19,7 @@ src/components/Modal/

 ## BasicModal 组件

-`BasicModal` 基于 `el-dialog` 封装，提供全屏切换、自定义头部、提交按钮等能力：
+`BasicModal` 基于 `n-modal` 封装，提供全屏切换、自定义头部、提交按钮等能力：

 ```vue
 <BasicModal :title="'编辑'" :width="600" @register="registerModal" @ok="handleSubmit">
@@ -36,7 +36,7 @@ src/components/Modal/

 ## 实际用法（position 模块）

-以岗位管理为例，实际使用原生 `el-dialog` + `defineAsyncComponent` 懒加载：
+以岗位管理为例，实际使用原生 `n-modal` + `defineAsyncComponent` 懒加载：

 ### 父组件（index.vue）

@@ -81,36 +81,36 @@ const handleEdit = async (record: Recordable) => {
 ```vue
 <!-- src/views/system/position/edit.vue -->
 <template>
-    <el-dialog
-        v-model="props.visible"
+    <n-modal
+        v-model:show="props.visible"
        :title="props.positionId ? '编辑' : '新增'"
-        width="500"
+        :style="{ width: '500px' }"
        :close-on-click-modal="false"
-        :before-close="dialogClose"
+        @close="dialogClose"
    >
-        <el-form class="ls-form" ref="formRef" :model="formData" label-width="80px">
-            <el-form-item
+        <n-form class="ls-form" ref="formRef" :model="formData" label-width="80px">
+            <n-form-item
                label="岗位名称"
-                prop="name"
-                :rules="{ required: true, message: '请输入岗位名称', trigger: 'blur' }"
+                path="name"
+                :rule="{ required: true, message: '请输入岗位名称', trigger: 'blur' }"
            >
-                <el-input v-model="formData.name" placeholder="请输入岗位名称" clearable />
-            </el-form-item>
-            <el-form-item label="岗位状态" prop="status">
-                <el-radio-group v-model="formData.status">
-                    <el-radio :value="1">正常</el-radio>
-                    <el-radio :value="2">停用</el-radio>
-                </el-radio-group>
-            </el-form-item>
-            <el-form-item label="排序" prop="sort">
-                <el-input-number v-model="formData.sort" />
-            </el-form-item>
-        </el-form>
+                <n-input v-model:value="formData.name" placeholder="请输入岗位名称" clearable />
+            </n-form-item>
+            <n-form-item label="岗位状态" path="status">
+                <n-radio-group v-model:value="formData.status">
+                    <n-radio :value="1">正常</n-radio>
+                    <n-radio :value="2">停用</n-radio>
+                </n-radio-group>
+            </n-form-item>
+            <n-form-item label="排序" path="sort">
+                <n-input-number v-model:value="formData.sort" />
+            </n-form-item>
+        </n-form>
        <template #footer>
-            <el-button @click="dialogClose">取消</el-button>
-            <el-button :loading="subLoading" type="primary" @click="submit">确定</el-button>
+            <n-button @click="dialogClose">取消</n-button>
+            <n-button :loading="subLoading" type="primary" @click="submit">确定</n-button>
        </template>
-    </el-dialog>
+    </n-modal>
 </template>

 <script lang="ts" setup>
@@ -118,7 +118,7 @@ import { getPositionDetail, positionAdd, positionUpdate } from '@/api/system/pos
 import { useLockFn } from '@/utils/useLockFn';

 const emit = defineEmits(['success', 'update:visible']);
-const formRef = shallowRef<FormInstance>();
+const formRef = shallowRef();

 const formData = reactive({ id: '', name: '', status: 1, sort: 0 });

@@ -190,7 +190,7 @@ async function handleDelete(record: Recordable) {
 }
 ```

-`confirm` 内部调用 `ElMessageBox.confirm`，返回 Promise，用户取消时抛出异常中断后续逻辑。
+`confirm` 内部调用 `useDialog().warning`，返回 Promise，用户取消时抛出异常中断后续逻辑。

 ## v-model:visible 双向绑定

@@ -213,4 +213,4 @@ const dialogClose = () => { emit('update:visible', false); };

 ## 总结

-编辑弹窗使用 `el-dialog` + `defineAsyncComponent` 懒加载，通过 `v-model:visible` 双向绑定显隐状态，`useLockFn` 防重复提交。父组件通过 `positionId` prop 传递编辑行 ID，子组件在 `onMounted` 中判断并加载详情数据。操作成功后 `emit('success')` 通知父组件刷新表格。
+编辑弹窗使用 `n-modal` + `defineAsyncComponent` 懒加载，通过 `v-model:visible` 双向绑定显隐状态，`useLockFn` 防重复提交。父组件通过 `positionId` prop 传递编辑行 ID，子组件在 `onMounted` 中判断并加载详情数据。操作成功后 `emit('success')` 通知父组件刷新表格。