diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 1df3f49..0def5aa 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -2,6 +2,7 @@
 import { h, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
 import type { DataTableColumns, FormInst } from 'naive-ui'
 import { NButton, NCheckbox, NDropdown, NIcon, NPopconfirm, NProgress, NSpace, NSwitch, NTag, NUpload, NUploadDragger } from 'naive-ui'
+import NovaDialog from '@/components/common/NovaDialog.vue'
 import {
   addUser,
   batchDeleteUsers,
@@ -29,7 +30,6 @@ import { coiMsgBox, coiMsgError, coiMsgInfo, coiMsgSuccess, coiMsgWarning } from
 // 响应式数据
 const loading = ref(false)
 const tableData = ref<UserVo[]>([])
-const showModal = ref(false)
 const modalTitle = ref('新增用户')
 const formRef = ref<FormInst | null>(null)
 const searchFormRef = ref<FormInst | null>(null)
@@ -38,8 +38,14 @@ const currentUser = ref<UserVo | null>(null)
 const selectedRows = ref<UserVo[]>([])
 const roleOptions = ref<RoleVo[]>([])
 
+// 弹框引用
+const userDialogRef = ref()
+const roleDialogRef = ref()
+const resetPwdDialogRef = ref()
+const avatarDialogRef = ref()
+const importDialogRef = ref()
+
 // 角色分配相关
-const showRoleModal = ref(false)
 const roleModalTitle = ref('分配角色')
 const currentAssignUser = ref<UserVo | null>(null)
 const availableRoles = ref<{ label: string, value: number }[]>([])
@@ -47,7 +53,6 @@ const selectedRoleIds = ref<number[]>([])
 const roleLoading = ref(false)
 
 // 重置密码相关
-const showResetPwdModal = ref(false)
 const resetPwdFormRef = ref<FormInst | null>(null)
 const currentResetUser = ref<UserVo | null>(null)
 const resetPwdForm = ref({
@@ -56,12 +61,10 @@ const resetPwdForm = ref({
 })
 
 // 头像查看相关
-const showAvatarModal = ref(false)
 const currentAvatar = ref('')
 const currentAvatarUser = ref<UserVo | null>(null)
 
 // 导入相关
-const showImportModal = ref(false)
 const importLoading = ref(false)
 const selectedFile = ref<File | null>(null)
 const updateSupport = ref(false)
@@ -488,7 +491,7 @@ function handleAdd() {
     remark: '',
     roleIds: [],
   }
-  showModal.value = true
+  userDialogRef.value?.novaOpen()
 }
 
 // 编辑用户
@@ -509,7 +512,7 @@ function handleEdit(user: UserVo) {
     remark: user.remark || '',
     roleIds: user.roleIds || [],
   }
-  showModal.value = true
+  userDialogRef.value?.novaOpen()
 }
 
 // 删除用户
@@ -595,7 +598,7 @@ function handleResetPassword(user: UserVo) {
     newPassword: '',
     confirmPassword: '',
   }
-  showResetPwdModal.value = true
+  resetPwdDialogRef.value?.novaOpen()
 }
 
 // 执行重置密码
@@ -619,7 +622,7 @@ async function handleConfirmResetPassword() {
     const { isSuccess } = await resetUserPassword(currentResetUser.value.userId, resetPwdForm.value.newPassword)
     if (isSuccess) {
       coiMsgSuccess(`用户「${currentResetUser.value.userName}」密码重置成功`)
-      showResetPwdModal.value = false
+      resetPwdDialogRef.value?.novaClose()
     }
     else {
       coiMsgError('重置密码失败，请稍后重试')
@@ -633,7 +636,7 @@ async function handleConfirmResetPassword() {
 
 // 取消重置密码
 function handleCancelResetPassword() {
-  showResetPwdModal.value = false
+  resetPwdDialogRef.value?.novaClose()
   resetPwdForm.value = {
     newPassword: '',
     confirmPassword: '',
@@ -679,12 +682,12 @@ function handleViewAvatar(user: UserVo) {
     currentAvatar.value = blobUrl
     createdBlobUrls.value.push(blobUrl)
   }
-  showAvatarModal.value = true
+  avatarDialogRef.value?.novaOpen()
 }
 
 // 关闭头像查看
 function handleCloseAvatar() {
-  showAvatarModal.value = false
+  avatarDialogRef.value?.novaClose()
   // 如果是生成的默认头像，释放URL
   if (currentAvatar.value.startsWith('blob:')) {
     URL.revokeObjectURL(currentAvatar.value)
@@ -826,7 +829,7 @@ function handleImport() {
   selectedFile.value = null
   updateSupport.value = false
   uploadProgress.value = 0
-  showImportModal.value = true
+  importDialogRef.value?.novaOpen()
 }
 
 // 文件选择处理
@@ -891,7 +894,7 @@ async function handleConfirmImport() {
       )
 
       // 关闭模态框并刷新列表
-      showImportModal.value = false
+      importDialogRef.value?.novaClose()
       await getUserList()
     }
     else {
@@ -916,7 +919,7 @@ async function handleConfirmImport() {
 
 // 取消导入
 function handleCancelImport() {
-  showImportModal.value = false
+  importDialogRef.value?.novaClose()
   selectedFile.value = null
   updateSupport.value = false
   uploadProgress.value = 0
@@ -954,7 +957,7 @@ async function handleAssignRole(user: UserVo) {
 
         // 预选用户当前角色（使用后端返回的用户角色ID）
         selectedRoleIds.value = userRoleIds
-        showRoleModal.value = true
+        roleDialogRef.value?.novaOpen()
       }
       else {
         coiMsgInfo('当前系统没有可分配的角色')
@@ -992,7 +995,7 @@ async function handleConfirmAssignRole() {
 
     if (response.isSuccess) {
       coiMsgSuccess('角色分配成功')
-      showRoleModal.value = false
+      roleDialogRef.value?.novaClose()
 
       // 更新当前用户的角色信息
       if (currentAssignUser.value) {
@@ -1016,7 +1019,7 @@ async function handleConfirmAssignRole() {
 
 // 取消分配角色
 function handleCancelAssignRole() {
-  showRoleModal.value = false
+  roleDialogRef.value?.novaClose()
   currentAssignUser.value = null
   selectedRoleIds.value = []
   availableRoles.value = []
@@ -1059,7 +1062,7 @@ async function handleSubmit() {
 
     if (isSuccess) {
       coiMsgSuccess(isEdit.value ? '用户信息更新成功' : '用户创建成功')
-      showModal.value = false
+      userDialogRef.value?.novaClose()
       await getUserList()
     }
     else {
@@ -1074,7 +1077,7 @@ async function handleSubmit() {
 
 // 取消操作
 function handleCancel() {
-  showModal.value = false
+  userDialogRef.value?.novaClose()
 }
 
 // 组件挂载时获取数据
@@ -1339,317 +1342,290 @@ onBeforeUnmount(() => {
       </div>
     </div>
 
-    <!-- 用户表单模态框 -->
-    <n-modal
-      v-model:show="showModal"
+    <!-- 用户表单弹框 -->
+    <NovaDialog
+      ref="userDialogRef"
       :title="modalTitle"
-      preset="card"
-      :style="{ width: '800px' }"
-      :mask-closable="false"
-      class="user-modal"
+      :width="800"
+      height="auto"
+      confirm-text="确定"
+      cancel-text="取消"
+      @nova-confirm="handleSubmit"
+      @nova-cancel="handleCancel"
     >
-      <n-form
-        ref="formRef"
-        :model="formData"
-        :rules="rules"
-        label-placement="left"
-        label-width="100px"
-        require-mark-placement="right-hanging"
-      >
-        <n-grid :cols="2" :x-gap="24">
-          <n-grid-item>
-            <n-form-item label="登录账号" path="loginName">
+      <template #content>
+        <div class="px-3 py-2">
+          <n-form
+            ref="formRef"
+            :model="formData"
+            :rules="rules"
+            label-placement="left"
+            label-width="100px"
+            require-mark-placement="right-hanging"
+          >
+            <n-grid :cols="2" :x-gap="24">
+              <n-grid-item>
+                <n-form-item label="登录账号" path="loginName">
+                  <n-input
+                    v-model:value="formData.loginName"
+                    placeholder="请输入登录账号"
+                    :disabled="isEdit"
+                  />
+                </n-form-item>
+              </n-grid-item>
+
+              <n-grid-item>
+                <n-form-item label="用户姓名" path="userName">
+                  <n-input
+                    v-model:value="formData.userName"
+                    placeholder="请输入用户姓名"
+                  />
+                </n-form-item>
+              </n-grid-item>
+
+              <n-grid-item>
+                <n-form-item label="用户类型" path="userType">
+                  <n-select
+                    v-model:value="formData.userType"
+                    placeholder="请选择用户类型"
+                    :options="[
+                      { label: '系统用户', value: '1' },
+                      { label: '注册用户', value: '2' },
+                      { label: '微信用户', value: '3' },
+                    ]"
+                  />
+                </n-form-item>
+              </n-grid-item>
+
+              <n-grid-item>
+                <n-form-item label="性别" path="sex">
+                  <n-select
+                    v-model:value="formData.sex"
+                    placeholder="请选择性别"
+                    :options="[
+                      { label: '男', value: '1' },
+                      { label: '女', value: '2' },
+                      { label: '未知', value: '3' },
+                    ]"
+                  />
+                </n-form-item>
+              </n-grid-item>
+
+              <n-grid-item>
+                <n-form-item label="邮箱" path="email">
+                  <n-input
+                    v-model:value="formData.email"
+                    placeholder="请输入邮箱"
+                  />
+                </n-form-item>
+              </n-grid-item>
+
+              <n-grid-item>
+                <n-form-item label="手机号" path="phone">
+                  <n-input
+                    v-model:value="formData.phone"
+                    placeholder="请输入手机号"
+                  />
+                </n-form-item>
+              </n-grid-item>
+
+              <n-grid-item v-if="!isEdit">
+                <n-form-item label="密码" path="password">
+                  <n-input
+                    v-model:value="formData.password"
+                    type="password"
+                    placeholder="请输入密码"
+                    show-password-on="click"
+                  />
+                </n-form-item>
+              </n-grid-item>
+
+              <n-grid-item>
+                <n-form-item label="用户状态" path="userStatus">
+                  <n-radio-group v-model:value="formData.userStatus">
+                    <n-radio value="0">
+                      启用
+                    </n-radio>
+                    <n-radio value="1">
+                      停用
+                    </n-radio>
+                  </n-radio-group>
+                </n-form-item>
+              </n-grid-item>
+
+              <n-grid-item v-if="roleOptions.length > 0" :span="2">
+                <n-form-item label="角色分配" path="roleIds">
+                  <n-select
+                    v-model:value="formData.roleIds"
+                    multiple
+                    placeholder="请选择角色"
+                    :options="roleOptions.map(role => ({
+                      label: role.roleName,
+                      value: role.roleId,
+                    }))"
+                  />
+                </n-form-item>
+              </n-grid-item>
+            </n-grid>
+
+            <n-form-item label="备注" path="remark">
               <n-input
-                v-model:value="formData.loginName"
-                placeholder="请输入登录账号"
-                :disabled="isEdit"
+                v-model:value="formData.remark"
+                type="textarea"
+                placeholder="请输入备注信息"
+                :rows="3"
               />
             </n-form-item>
-          </n-grid-item>
+          </n-form>
+        </div>
+      </template>
+    </NovaDialog>
 
-          <n-grid-item>
-            <n-form-item label="用户姓名" path="userName">
+    <!-- 角色分配弹框 -->
+    <NovaDialog
+      ref="roleDialogRef"
+      :title="roleModalTitle"
+      :width="600"
+      height="auto"
+      confirm-text="确定"
+      cancel-text="取消"
+      @nova-confirm="handleConfirmAssignRole"
+      @nova-cancel="handleCancelAssignRole"
+    >
+      <template #content>
+        <div class="p-3 space-y-4">
+          <div class="bg-gray-50 p-4 rounded-lg">
+            <div class="flex items-center gap-3">
+              <div class="w-10 h-10 rounded-full bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center text-white text-sm font-bold">
+                {{ currentAssignUser?.loginName?.charAt(0).toUpperCase() }}
+              </div>
+              <div>
+                <div class="font-medium text-gray-900">
+                  {{ currentAssignUser?.userName }}
+                </div>
+                <div class="text-sm text-gray-500">
+                  {{ currentAssignUser?.loginName }}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-2">选择角色</label>
+            <div v-if="roleLoading" class="text-center text-gray-500 p-8">
+              <n-spin size="small" />
+              <p class="mt-2">
+                正在加载角色列表...
+              </p>
+            </div>
+            <n-transfer
+              v-else-if="availableRoles.length > 0"
+              v-model:value="selectedRoleIds"
+              :options="availableRoles"
+              source-title="可选角色"
+              target-title="已选角色"
+              :filterable="true"
+              :show-selected="true"
+              class="role-transfer"
+            />
+            <div v-else class="text-center text-gray-500 p-8">
+              <div class="text-2xl text-gray-400 mb-2">
+                ℹ️
+              </div>
+              <p class="mt-2">
+                暂无可分配的角色
+              </p>
+            </div>
+          </div>
+        </div>
+      </template>
+    </NovaDialog>
+
+    <!-- 重置密码弹框 -->
+    <NovaDialog
+      ref="resetPwdDialogRef"
+      title="重置用户密码"
+      :width="500"
+      height="auto"
+      confirm-text="确认重置"
+      cancel-text="取消"
+      @nova-confirm="handleConfirmResetPassword"
+      @nova-cancel="handleCancelResetPassword"
+    >
+      <template #content>
+        <div class="p-3 space-y-4">
+          <div class="bg-gray-50 p-4 rounded-lg">
+            <div class="flex items-center gap-3">
+              <div class="w-10 h-10 rounded-full bg-gradient-to-r from-orange-400 to-red-500 flex items-center justify-center text-white text-sm font-bold">
+                {{ currentResetUser?.loginName?.charAt(0).toUpperCase() }}
+              </div>
+              <div>
+                <div class="font-medium text-gray-900">
+                  {{ currentResetUser?.userName }}
+                </div>
+                <div class="text-sm text-gray-500">
+                  {{ currentResetUser?.loginName }}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <n-form
+            ref="resetPwdFormRef"
+            :model="resetPwdForm"
+            :rules="resetPwdRules"
+            label-placement="left"
+            label-width="80px"
+            require-mark-placement="right-hanging"
+          >
+            <n-form-item label="新密码" path="newPassword">
               <n-input
-                v-model:value="formData.userName"
-                placeholder="请输入用户姓名"
-              />
-            </n-form-item>
-          </n-grid-item>
-
-          <n-grid-item>
-            <n-form-item label="用户类型" path="userType">
-              <n-select
-                v-model:value="formData.userType"
-                placeholder="请选择用户类型"
-                :options="[
-                  { label: '系统用户', value: '1' },
-                  { label: '注册用户', value: '2' },
-                  { label: '微信用户', value: '3' },
-                ]"
-              />
-            </n-form-item>
-          </n-grid-item>
-
-          <n-grid-item>
-            <n-form-item label="性别" path="sex">
-              <n-select
-                v-model:value="formData.sex"
-                placeholder="请选择性别"
-                :options="[
-                  { label: '男', value: '1' },
-                  { label: '女', value: '2' },
-                  { label: '未知', value: '3' },
-                ]"
-              />
-            </n-form-item>
-          </n-grid-item>
-
-          <n-grid-item>
-            <n-form-item label="邮箱" path="email">
-              <n-input
-                v-model:value="formData.email"
-                placeholder="请输入邮箱"
-              />
-            </n-form-item>
-          </n-grid-item>
-
-          <n-grid-item>
-            <n-form-item label="手机号" path="phone">
-              <n-input
-                v-model:value="formData.phone"
-                placeholder="请输入手机号"
-              />
-            </n-form-item>
-          </n-grid-item>
-
-          <n-grid-item v-if="!isEdit">
-            <n-form-item label="密码" path="password">
-              <n-input
-                v-model:value="formData.password"
+                v-model:value="resetPwdForm.newPassword"
                 type="password"
-                placeholder="请输入密码"
+                placeholder="请输入新密码(最少6位)"
                 show-password-on="click"
               />
             </n-form-item>
-          </n-grid-item>
 
-          <n-grid-item>
-            <n-form-item label="用户状态" path="userStatus">
-              <n-radio-group v-model:value="formData.userStatus">
-                <n-radio value="0">
-                  启用
-                </n-radio>
-                <n-radio value="1">
-                  停用
-                </n-radio>
-              </n-radio-group>
-            </n-form-item>
-          </n-grid-item>
-
-          <n-grid-item v-if="roleOptions.length > 0" :span="2">
-            <n-form-item label="角色分配" path="roleIds">
-              <n-select
-                v-model:value="formData.roleIds"
-                multiple
-                placeholder="请选择角色"
-                :options="roleOptions.map(role => ({
-                  label: role.roleName,
-                  value: role.roleId,
-                }))"
+            <n-form-item label="确认密码" path="confirmPassword">
+              <n-input
+                v-model:value="resetPwdForm.confirmPassword"
+                type="password"
+                placeholder="请再次输入新密码"
+                show-password-on="click"
               />
             </n-form-item>
-          </n-grid-item>
-        </n-grid>
+          </n-form>
 
-        <n-form-item label="备注" path="remark">
-          <n-input
-            v-model:value="formData.remark"
-            type="textarea"
-            placeholder="请输入备注信息"
-            :rows="3"
-          />
-        </n-form-item>
-      </n-form>
-
-      <template #footer>
-        <div class="flex justify-end gap-3">
-          <NButton @click="handleCancel">
-            取消
-          </NButton>
-          <NButton type="primary" @click="handleSubmit">
-            确定
-          </NButton>
+          <div class="bg-blue-50 border border-blue-200 rounded-lg p-3">
+            <div class="flex items-start gap-2">
+              <div class="text-blue-500 text-sm mt-0.5">
+                ℹ️
+              </div>
+              <div class="text-blue-700 text-sm">
+                <p class="font-medium mb-1">
+                  温馨提示：
+                </p>
+                <ul class="list-disc list-inside space-y-1 text-xs">
+                  <li>密码长度至少6位字符</li>
+                  <li>重置后用户需要使用新密码登录</li>
+                  <li>建议提醒用户及时修改密码</li>
+                </ul>
+              </div>
+            </div>
+          </div>
         </div>
       </template>
-    </n-modal>
+    </NovaDialog>
 
-    <!-- 角色分配模态框 -->
-    <n-modal
-      v-model:show="showRoleModal"
-      :title="roleModalTitle"
-      preset="card"
-      :style="{ width: '600px' }"
-      :mask-closable="false"
-      class="role-assign-modal"
-    >
-      <div class="space-y-4">
-        <div class="bg-gray-50 p-4 rounded-lg">
-          <div class="flex items-center gap-3">
-            <div class="w-10 h-10 rounded-full bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center text-white text-sm font-bold">
-              {{ currentAssignUser?.loginName?.charAt(0).toUpperCase() }}
-            </div>
-            <div>
-              <div class="font-medium text-gray-900">
-                {{ currentAssignUser?.userName }}
-              </div>
-              <div class="text-sm text-gray-500">
-                {{ currentAssignUser?.loginName }}
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div>
-          <label class="block text-sm font-medium text-gray-700 mb-2">选择角色</label>
-          <div v-if="roleLoading" class="text-center text-gray-500 p-8">
-            <n-spin size="small" />
-            <p class="mt-2">
-              正在加载角色列表...
-            </p>
-          </div>
-          <n-transfer
-            v-else-if="availableRoles.length > 0"
-            v-model:value="selectedRoleIds"
-            :options="availableRoles"
-            source-title="可选角色"
-            target-title="已选角色"
-            :filterable="true"
-            :show-selected="true"
-            class="role-transfer"
-          />
-          <div v-else class="text-center text-gray-500 p-8">
-            <div class="text-2xl text-gray-400 mb-2">
-              ℹ️
-            </div>
-            <p class="mt-2">
-              暂无可分配的角色
-            </p>
-          </div>
-        </div>
-      </div>
-
-      <template #footer>
-        <div class="flex justify-end gap-3">
-          <NButton
-            :disabled="roleLoading"
-            @click="handleCancelAssignRole"
-          >
-            取消
-          </NButton>
-          <NButton
-            type="primary"
-            :loading="roleLoading"
-            :disabled="availableRoles.length === 0"
-            @click="handleConfirmAssignRole"
-          >
-            确定
-          </NButton>
-        </div>
-      </template>
-    </n-modal>
-
-    <!-- 重置密码模态框 -->
-    <n-modal
-      v-model:show="showResetPwdModal"
-      title="重置用户密码"
-      preset="card"
-      :style="{ width: '500px' }"
-      :mask-closable="false"
-      class="reset-pwd-modal"
-    >
-      <div class="space-y-4">
-        <div class="bg-gray-50 p-4 rounded-lg">
-          <div class="flex items-center gap-3">
-            <div class="w-10 h-10 rounded-full bg-gradient-to-r from-orange-400 to-red-500 flex items-center justify-center text-white text-sm font-bold">
-              {{ currentResetUser?.loginName?.charAt(0).toUpperCase() }}
-            </div>
-            <div>
-              <div class="font-medium text-gray-900">
-                {{ currentResetUser?.userName }}
-              </div>
-              <div class="text-sm text-gray-500">
-                {{ currentResetUser?.loginName }}
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <n-form
-          ref="resetPwdFormRef"
-          :model="resetPwdForm"
-          :rules="resetPwdRules"
-          label-placement="left"
-          label-width="80px"
-          require-mark-placement="right-hanging"
-        >
-          <n-form-item label="新密码" path="newPassword">
-            <n-input
-              v-model:value="resetPwdForm.newPassword"
-              type="password"
-              placeholder="请输入新密码(最少6位)"
-              show-password-on="click"
-            />
-          </n-form-item>
-
-          <n-form-item label="确认密码" path="confirmPassword">
-            <n-input
-              v-model:value="resetPwdForm.confirmPassword"
-              type="password"
-              placeholder="请再次输入新密码"
-              show-password-on="click"
-            />
-          </n-form-item>
-        </n-form>
-
-        <div class="bg-blue-50 border border-blue-200 rounded-lg p-3">
-          <div class="flex items-start gap-2">
-            <div class="text-blue-500 text-sm mt-0.5">
-              ℹ️
-            </div>
-            <div class="text-blue-700 text-sm">
-              <p class="font-medium mb-1">
-                温馨提示：
-              </p>
-              <ul class="list-disc list-inside space-y-1 text-xs">
-                <li>密码长度至少6位字符</li>
-                <li>重置后用户需要使用新密码登录</li>
-                <li>建议提醒用户及时修改密码</li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <template #footer>
-        <div class="flex justify-end gap-3">
-          <NButton @click="handleCancelResetPassword">
-            取消
-          </NButton>
-          <NButton type="primary" @click="handleConfirmResetPassword">
-            确认重置
-          </NButton>
-        </div>
-      </template>
-    </n-modal>
-
-    <!-- 头像查看模态框 -->
-    <n-modal
-      v-model:show="showAvatarModal"
-      preset="card"
-      :style="{ width: '600px' }"
-      :mask-closable="true"
-      class="avatar-modal"
-      @close="handleCloseAvatar"
+    <!-- 头像查看弹框 -->
+    <NovaDialog
+      ref="avatarDialogRef"
+      :width="600"
+      height="auto"
+      cancel-text="关闭"
+      :show-confirm="false"
+      @nova-cancel="handleCloseAvatar"
     >
       <template #header>
         <div class="flex items-center gap-3">
@@ -1663,155 +1639,138 @@ onBeforeUnmount(() => {
         </div>
       </template>
 
-      <div class="flex flex-col items-center space-y-4">
-        <div class="relative">
-          <img
-            :src="currentAvatar"
-            :alt="`${currentAvatarUser?.userName}的头像`"
-            class="w-80 h-80 object-cover rounded-lg shadow-lg border-4 border-gray-100"
-            @error="handleAvatarError"
-          >
-          <div class="absolute -bottom-2 -right-2 bg-white rounded-full p-2 shadow-lg">
-            <div class="w-3 h-3 bg-green-500 rounded-full" />
-          </div>
-        </div>
-
-        <div class="text-center space-y-2">
-          <p class="text-gray-600 text-sm">
-            {{ currentAvatarUser?.avatar ? '用户头像' : '默认头像' }}
-          </p>
-          <div class="flex items-center justify-center gap-4 text-xs text-gray-400">
-            <span>用户类型: {{
-              currentAvatarUser?.userType === '1' ? '系统用户'
-              : currentAvatarUser?.userType === '2' ? '注册用户' : '微信用户'
-            }}</span>
-            <span>状态: {{ currentAvatarUser?.userStatus === '0' ? '启用' : '停用' }}</span>
-          </div>
-        </div>
-      </div>
-
-      <template #footer>
-        <div class="flex justify-end">
-          <NButton @click="handleCloseAvatar">
-            关闭
-          </NButton>
-        </div>
-      </template>
-    </n-modal>
-
-    <!-- 导入用户模态框 -->
-    <n-modal
-      v-model:show="showImportModal"
-      title="导入用户数据"
-      preset="card"
-      :style="{ width: '600px' }"
-      :mask-closable="false"
-      class="import-modal"
-    >
-      <div class="space-y-6">
-        <!-- 文件上传区域 -->
-        <div>
-          <h4 class="text-sm font-medium text-gray-700 mb-3">
-            选择Excel文件
-          </h4>
-          <NUpload
-            :default-file-list="[]"
-            :max="1"
-            accept=".xlsx,.xls,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
-            :on-before-upload="handleFileSelect"
-            :show-file-list="true"
-            :disabled="importLoading"
-          >
-            <NUploadDragger>
-              <div class="text-center">
-                <NIcon size="48" :depth="3" class="mb-2">
-                  <icon-park-outline:file-excel />
-                </NIcon>
-                <div class="text-lg font-medium mb-1">
-                  点击或拖拽上传Excel文件
-                </div>
-                <div class="text-sm text-gray-500">
-                  支持 .xlsx 和 .xls 格式，文件大小不超过 10MB
-                </div>
-              </div>
-            </NUploadDragger>
-          </NUpload>
-        </div>
-
-        <!-- 导入选项 -->
-        <div>
-          <h4 class="text-sm font-medium text-gray-700 mb-3">
-            导入选项
-          </h4>
-          <NCheckbox
-            v-model:checked="updateSupport"
-            :disabled="importLoading"
-          >
-            覆盖已存在的用户数据
-          </NCheckbox>
-          <div class="text-xs text-gray-500 mt-1">
-            勾选后，如果导入的用户登录名已存在，将更新该用户的信息
-          </div>
-        </div>
-
-        <!-- 进度条 -->
-        <div v-if="importLoading">
-          <h4 class="text-sm font-medium text-gray-700 mb-3">
-            导入进度
-          </h4>
-          <NProgress
-            type="line"
-            :percentage="uploadProgress"
-            :show-indicator="true"
-            processing
-          />
-          <div class="text-sm text-gray-500 mt-2 text-center">
-            正在导入用户数据，请稍候...
-          </div>
-        </div>
-
-        <!-- 说明 -->
-        <div class="text-xs text-gray-500 bg-gray-50 p-3 rounded">
-          <div class="font-medium mb-2">
-            导入说明：
-          </div>
-          <ul class="space-y-1">
-            <li>• 请使用系统提供的模板格式进行导入</li>
-            <li>• 登录账号为必填字段，且不能重复</li>
-            <li>• 导入的用户默认密码为 "123456"</li>
-            <li>• 用户状态默认为"启用"</li>
-          </ul>
-        </div>
-      </div>
-
-      <template #footer>
-        <div class="flex justify-between">
-          <NButton
-            :disabled="importLoading"
-            @click="handleDownloadTemplate"
-          >
-            <template #icon>
-              <NIcon><icon-park-outline:download /></NIcon>
-            </template>
-            下载模板
-          </NButton>
-
-          <div class="flex gap-3">
-            <NButton :disabled="importLoading" @click="handleCancelImport">
-              取消
-            </NButton>
-            <NButton
-              type="primary"
-              :loading="importLoading"
-              :disabled="!selectedFile"
-              @click="handleConfirmImport"
+      <template #content>
+        <div class="flex flex-col items-center space-y-4 p-3">
+          <div class="relative">
+            <img
+              :src="currentAvatar"
+              :alt="`${currentAvatarUser?.userName}的头像`"
+              class="w-80 h-80 object-cover rounded-lg shadow-lg border-4 border-gray-100"
+              @error="handleAvatarError"
             >
-              开始导入
+            <div class="absolute -bottom-2 -right-2 bg-white rounded-full p-2 shadow-lg">
+              <div class="w-3 h-3 bg-green-500 rounded-full" />
+            </div>
+          </div>
+
+          <div class="text-center space-y-2">
+            <p class="text-gray-600 text-sm">
+              {{ currentAvatarUser?.avatar ? '用户头像' : '默认头像' }}
+            </p>
+            <div class="flex items-center justify-center gap-4 text-xs text-gray-400">
+              <span>用户类型: {{
+                currentAvatarUser?.userType === '1' ? '系统用户'
+                : currentAvatarUser?.userType === '2' ? '注册用户' : '微信用户'
+              }}</span>
+              <span>状态: {{ currentAvatarUser?.userStatus === '0' ? '启用' : '停用' }}</span>
+            </div>
+          </div>
+        </div>
+      </template>
+    </NovaDialog>
+
+    <!-- 导入用户弹框 -->
+    <NovaDialog
+      ref="importDialogRef"
+      title="导入用户数据"
+      :width="600"
+      height="auto"
+      confirm-text="开始导入"
+      cancel-text="取消"
+      @nova-confirm="handleConfirmImport"
+      @nova-cancel="handleCancelImport"
+    >
+      <template #content>
+        <div class="p-3 space-y-6">
+          <!-- 文件上传区域 -->
+          <div>
+            <h4 class="text-sm font-medium text-gray-700 mb-3">
+              选择Excel文件
+            </h4>
+            <NUpload
+              :default-file-list="[]"
+              :max="1"
+              accept=".xlsx,.xls,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
+              :on-before-upload="handleFileSelect"
+              :show-file-list="true"
+              :disabled="importLoading"
+            >
+              <NUploadDragger>
+                <div class="text-center">
+                  <NIcon size="48" :depth="3" class="mb-2">
+                    <icon-park-outline:file-excel />
+                  </NIcon>
+                  <div class="text-lg font-medium mb-1">
+                    点击或拖拽上传Excel文件
+                  </div>
+                  <div class="text-sm text-gray-500">
+                    支持 .xlsx 和 .xls 格式，文件大小不超过 10MB
+                  </div>
+                </div>
+              </NUploadDragger>
+            </NUpload>
+          </div>
+
+          <!-- 导入选项 -->
+          <div>
+            <h4 class="text-sm font-medium text-gray-700 mb-3">
+              导入选项
+            </h4>
+            <NCheckbox
+              v-model:checked="updateSupport"
+              :disabled="importLoading"
+            >
+              覆盖已存在的用户数据
+            </NCheckbox>
+            <div class="text-xs text-gray-500 mt-1">
+              勾选后，如果导入的用户登录名已存在，将更新该用户的信息
+            </div>
+          </div>
+
+          <!-- 进度条 -->
+          <div v-if="importLoading">
+            <h4 class="text-sm font-medium text-gray-700 mb-3">
+              导入进度
+            </h4>
+            <NProgress
+              type="line"
+              :percentage="uploadProgress"
+              :show-indicator="true"
+              processing
+            />
+            <div class="text-sm text-gray-500 mt-2 text-center">
+              正在导入用户数据，请稍候...
+            </div>
+          </div>
+
+          <!-- 说明 -->
+          <div class="text-xs text-gray-500 bg-gray-50 p-3 rounded">
+            <div class="font-medium mb-2">
+              导入说明：
+            </div>
+            <ul class="space-y-1">
+              <li>• 请使用系统提供的模板格式进行导入</li>
+              <li>• 登录账号为必填字段，且不能重复</li>
+              <li>• 导入的用户默认密码为 "123456"</li>
+              <li>• 用户状态默认为"启用"</li>
+            </ul>
+          </div>
+
+          <!-- 下载模板按钮 -->
+          <div class="flex justify-start">
+            <NButton
+              :disabled="importLoading"
+              @click="handleDownloadTemplate"
+            >
+              <template #icon>
+                <NIcon><icon-park-outline:download /></NIcon>
+              </template>
+              下载模板
             </NButton>
           </div>
         </div>
       </template>
-    </n-modal>
+    </NovaDialog>
   </div>
 </template>