From 1a3fd5220c218556ef6f062a72ff143d74777f89 Mon Sep 17 00:00:00 2001
From: Leo <98382335+gaoziman@users.noreply.github.com>
Date: Mon, 7 Jul 2025 00:17:26 +0800
Subject: [PATCH] =?UTF-8?q?refactor(views):=20=E9=87=8D=E6=9E=84=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E7=BB=84=E4=BB=B6=E4=BB=A3=E7=A0=81=E5=9D=97=E9=A1=BA?=
 =?UTF-8?q?=E5=BA=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 调整所有页面组件为template→script→style顺序
- 包括登录页面、仪表盘、系统管理、错误页面等
- 重构demo编辑器页面和监控图表组件
- 统一页面组件结构，提升开发体验
- 注：用户管理页面保留原结构待后续处理
---
 .../dashboard/monitor/components/chart.vue    |    8 +-
 .../dashboard/monitor/components/chart2.vue   |    8 +-
 .../dashboard/monitor/components/chart3.vue   |    8 +-
 src/views/dashboard/monitor/index.vue         |   66 +-
 src/views/demo/editor/md/index.vue            |    8 +-
 src/views/demo/editor/rich/index.vue          |   24 +-
 src/views/error/403/index.vue                 |    6 +-
 src/views/error/404/index.vue                 |    6 +-
 src/views/error/500/index.vue                 |    6 +-
 src/views/login/components/Login/index.vue    |  198 +--
 src/views/login/components/Register/index.vue |   70 +-
 src/views/login/components/ResetPwd/index.vue |   54 +-
 src/views/login/index.vue                     |   40 +-
 src/views/system/role/index.vue               |  670 ++++-----
 src/views/system/user/index.vue               | 1334 ++++++++---------
 15 files changed, 1253 insertions(+), 1253 deletions(-)

diff --git a/src/views/dashboard/monitor/components/chart.vue b/src/views/dashboard/monitor/components/chart.vue
index 085d70e..85e4088 100644
--- a/src/views/dashboard/monitor/components/chart.vue
+++ b/src/views/dashboard/monitor/components/chart.vue
@@ -1,7 +1,3 @@
-<script setup lang="ts">
-// 简化的图表占位组件
-</script>
-
 <template>
   <div class="chart-placeholder h-200px w-full flex-center">
     <div class="text-center">
@@ -15,6 +11,10 @@
   </div>
 </template>
 
+<script setup lang="ts">
+// 简化的图表占位组件
+</script>
+
 <style scoped>
 .chart-placeholder {
   background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
diff --git a/src/views/dashboard/monitor/components/chart2.vue b/src/views/dashboard/monitor/components/chart2.vue
index 34c931c..9f3bce3 100644
--- a/src/views/dashboard/monitor/components/chart2.vue
+++ b/src/views/dashboard/monitor/components/chart2.vue
@@ -1,7 +1,3 @@
-<script setup lang="ts">
-// 简化的图表占位组件
-</script>
-
 <template>
   <div class="chart-placeholder h-200px w-full flex-center">
     <div class="text-center">
@@ -15,6 +11,10 @@
   </div>
 </template>
 
+<script setup lang="ts">
+// 简化的图表占位组件
+</script>
+
 <style scoped>
 .chart-placeholder {
   background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
diff --git a/src/views/dashboard/monitor/components/chart3.vue b/src/views/dashboard/monitor/components/chart3.vue
index db4d302..97c398a 100644
--- a/src/views/dashboard/monitor/components/chart3.vue
+++ b/src/views/dashboard/monitor/components/chart3.vue
@@ -1,7 +1,3 @@
-<script setup lang="ts">
-// 简化的图表占位组件
-</script>
-
 <template>
   <div class="chart-placeholder h-200px w-full flex-center">
     <div class="text-center">
@@ -15,6 +11,10 @@
   </div>
 </template>
 
+<script setup lang="ts">
+// 简化的图表占位组件
+</script>
+
 <style scoped>
 .chart-placeholder {
   background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
diff --git a/src/views/dashboard/monitor/index.vue b/src/views/dashboard/monitor/index.vue
index 4de8f33..3b16e00 100644
--- a/src/views/dashboard/monitor/index.vue
+++ b/src/views/dashboard/monitor/index.vue
@@ -1,36 +1,3 @@
-<script setup lang="ts">
-import Chart from './components/chart.vue'
-import Chart2 from './components/chart2.vue'
-import Chart3 from './components/chart3.vue'
-
-const tableData = [
-  {
-    id: 0,
-    name: '商品名称1',
-    start: '2022-02-02',
-    end: '2022-02-02',
-    prograss: '100',
-    status: '已完成',
-  },
-  {
-    id: 0,
-    name: '商品名称2',
-    start: '2022-02-02',
-    end: '2022-02-02',
-    prograss: '50',
-    status: '交易中',
-  },
-  {
-    id: 0,
-    name: '商品名称3',
-    start: '2022-02-02',
-    end: '2022-02-02',
-    prograss: '100',
-    status: '已完成',
-  },
-]
-</script>
-
 <template>
   <div>
     <n-grid
@@ -246,4 +213,37 @@ const tableData = [
   </div>
 </template>
 
+<script setup lang="ts">
+import Chart from './components/chart.vue'
+import Chart2 from './components/chart2.vue'
+import Chart3 from './components/chart3.vue'
+
+const tableData = [
+  {
+    id: 0,
+    name: '商品名称1',
+    start: '2022-02-02',
+    end: '2022-02-02',
+    prograss: '100',
+    status: '已完成',
+  },
+  {
+    id: 0,
+    name: '商品名称2',
+    start: '2022-02-02',
+    end: '2022-02-02',
+    prograss: '50',
+    status: '交易中',
+  },
+  {
+    id: 0,
+    name: '商品名称3',
+    start: '2022-02-02',
+    end: '2022-02-02',
+    prograss: '100',
+    status: '已完成',
+  },
+]
+</script>
+
 <style scoped></style>
diff --git a/src/views/demo/editor/md/index.vue b/src/views/demo/editor/md/index.vue
index dd98ea3..619f876 100644
--- a/src/views/demo/editor/md/index.vue
+++ b/src/views/demo/editor/md/index.vue
@@ -1,7 +1,3 @@
-<script setup lang="ts">
-const text = ref('# Hello Editor ![图片描述](https://via.placeholder.com/350x150)')
-</script>
-
 <template>
   <n-card title="MarkDown编辑器">
     <n-space vertical :size="12">
@@ -11,4 +7,8 @@ const text = ref('# Hello Editor ![图片描述](https://via.placeholder.com/350
   </n-card>
 </template>
 
+<script setup lang="ts">
+const text = ref('# Hello Editor ![图片描述](https://via.placeholder.com/350x150)')
+</script>
+
 <style scoped></style>
diff --git a/src/views/demo/editor/rich/index.vue b/src/views/demo/editor/rich/index.vue
index a813dec..a265e5d 100644
--- a/src/views/demo/editor/rich/index.vue
+++ b/src/views/demo/editor/rich/index.vue
@@ -1,15 +1,3 @@
-<script setup lang="ts">
-const text = ref('')
-// 模拟 ajax 异步获取内容
-onMounted(() => {
-  setTimeout(() => {
-    text.value = '<p>模拟 Ajax 异步设置内容</p>'
-  }, 1500)
-})
-
-const active = ref(false)
-</script>
-
 <template>
   <n-card title="富文本编辑器">
     <n-space vertical :size="12">
@@ -35,4 +23,16 @@ const active = ref(false)
   </n-card>
 </template>
 
+<script setup lang="ts">
+const text = ref('')
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    text.value = '<p>模拟 Ajax 异步设置内容</p>'
+  }, 1500)
+})
+
+const active = ref(false)
+</script>
+
 <style scoped></style>
diff --git a/src/views/error/403/index.vue b/src/views/error/403/index.vue
index 2c4ddf5..4435b84 100644
--- a/src/views/error/403/index.vue
+++ b/src/views/error/403/index.vue
@@ -1,8 +1,8 @@
-<script setup lang="ts">
-</script>
-
 <template>
   <ErrorTip type="403" />
 </template>
 
+<script setup lang="ts">
+</script>
+
 <style lang="scss" scoped></style>
diff --git a/src/views/error/404/index.vue b/src/views/error/404/index.vue
index 4c492bd..876d0d0 100644
--- a/src/views/error/404/index.vue
+++ b/src/views/error/404/index.vue
@@ -1,8 +1,8 @@
-<script setup lang="ts">
-</script>
-
 <template>
   <ErrorTip type="404" />
 </template>
 
+<script setup lang="ts">
+</script>
+
 <style lang="scss" scoped></style>
diff --git a/src/views/error/500/index.vue b/src/views/error/500/index.vue
index 4103fe9..820af9a 100644
--- a/src/views/error/500/index.vue
+++ b/src/views/error/500/index.vue
@@ -1,8 +1,8 @@
-<script setup lang="ts">
-</script>
-
 <template>
   <ErrorTip type="500" />
 </template>
 
+<script setup lang="ts">
+</script>
+
 <style lang="scss" scoped></style>
diff --git a/src/views/login/components/Login/index.vue b/src/views/login/components/Login/index.vue
index ac08b83..678ea02 100644
--- a/src/views/login/components/Login/index.vue
+++ b/src/views/login/components/Login/index.vue
@@ -1,102 +1,3 @@
-<script setup lang="ts">
-import type { FormInst } from 'naive-ui'
-import { useAppStore, useAuthStore } from '@/store'
-import { fetchCaptchaPng } from '@/service/api/auth'
-import { local } from '@/utils'
-
-const emit = defineEmits(['update:modelValue'])
-
-const authStore = useAuthStore()
-const appStore = useAppStore()
-
-// 获取主题色
-const primaryColor = computed(() => appStore.primaryColor)
-const primaryColorHover = computed(() => appStore.theme.common.primaryColorHover)
-const primaryColorPressed = computed(() => appStore.theme.common.primaryColorPressed)
-
-function toOtherForm(type: any) {
-  emit('update:modelValue', type)
-}
-
-const { t } = useI18n()
-const rules = computed(() => {
-  return {
-    account: {
-      required: true,
-      trigger: 'blur',
-      message: t('login.accountRuleTip'),
-    },
-    pwd: {
-      required: true,
-      trigger: 'blur',
-      message: t('login.passwordRuleTip'),
-    },
-    securityCode: {
-      required: true,
-      trigger: 'blur',
-      message: '请输入验证码',
-    },
-  }
-})
-const formValue = ref({
-  account: 'admin',
-  pwd: '123456',
-  securityCode: '',
-})
-const isRemember = ref(false)
-const isLoading = ref(false)
-
-// 验证码相关
-const captchaImage = ref('')
-const captchaKey = ref('')
-
-// 获取验证码
-async function getCaptcha() {
-  try {
-    const { isSuccess, data } = await fetchCaptchaPng()
-    if (isSuccess) {
-      captchaImage.value = data.captchaPicture
-      captchaKey.value = data.codeKey
-    }
-  }
-  catch (e) {
-    console.warn('[获取验证码失败]:', e)
-  }
-}
-
-const formRef = ref<FormInst | null>(null)
-function handleLogin() {
-  formRef.value?.validate(async (errors) => {
-    if (errors)
-      return
-
-    isLoading.value = true
-    const { account, pwd, securityCode } = formValue.value
-
-    if (isRemember.value)
-      local.set('loginAccount', { account, pwd })
-    else local.remove('loginAccount')
-
-    await authStore.login(account, pwd, captchaKey.value, securityCode, isRemember.value)
-    isLoading.value = false
-  })
-}
-
-onMounted(() => {
-  checkUserAccount()
-  getCaptcha()
-})
-
-function checkUserAccount() {
-  const loginAccount = local.get('loginAccount')
-  if (!loginAccount)
-    return
-
-  formValue.value = { ...formValue.value, ...loginAccount }
-  isRemember.value = true
-}
-</script>
-
 <template>
   <div class="space-y-6">
     <!-- 头部问候语 -->
@@ -200,6 +101,105 @@ function checkUserAccount() {
   </div>
 </template>
 
+<script setup lang="ts">
+import type { FormInst } from 'naive-ui'
+import { useAppStore, useAuthStore } from '@/store'
+import { fetchCaptchaPng } from '@/service/api/auth'
+import { local } from '@/utils'
+
+const emit = defineEmits(['update:modelValue'])
+
+const authStore = useAuthStore()
+const appStore = useAppStore()
+
+// 获取主题色
+const primaryColor = computed(() => appStore.primaryColor)
+const primaryColorHover = computed(() => appStore.theme.common.primaryColorHover)
+const primaryColorPressed = computed(() => appStore.theme.common.primaryColorPressed)
+
+function toOtherForm(type: any) {
+  emit('update:modelValue', type)
+}
+
+const { t } = useI18n()
+const rules = computed(() => {
+  return {
+    account: {
+      required: true,
+      trigger: 'blur',
+      message: t('login.accountRuleTip'),
+    },
+    pwd: {
+      required: true,
+      trigger: 'blur',
+      message: t('login.passwordRuleTip'),
+    },
+    securityCode: {
+      required: true,
+      trigger: 'blur',
+      message: '请输入验证码',
+    },
+  }
+})
+const formValue = ref({
+  account: 'admin',
+  pwd: '123456',
+  securityCode: '',
+})
+const isRemember = ref(false)
+const isLoading = ref(false)
+
+// 验证码相关
+const captchaImage = ref('')
+const captchaKey = ref('')
+
+// 获取验证码
+async function getCaptcha() {
+  try {
+    const { isSuccess, data } = await fetchCaptchaPng()
+    if (isSuccess) {
+      captchaImage.value = data.captchaPicture
+      captchaKey.value = data.codeKey
+    }
+  }
+  catch (e) {
+    console.warn('[获取验证码失败]:', e)
+  }
+}
+
+const formRef = ref<FormInst | null>(null)
+function handleLogin() {
+  formRef.value?.validate(async (errors) => {
+    if (errors)
+      return
+
+    isLoading.value = true
+    const { account, pwd, securityCode } = formValue.value
+
+    if (isRemember.value)
+      local.set('loginAccount', { account, pwd })
+    else local.remove('loginAccount')
+
+    await authStore.login(account, pwd, captchaKey.value, securityCode, isRemember.value)
+    isLoading.value = false
+  })
+}
+
+onMounted(() => {
+  checkUserAccount()
+  getCaptcha()
+})
+
+function checkUserAccount() {
+  const loginAccount = local.get('loginAccount')
+  if (!loginAccount)
+    return
+
+  formValue.value = { ...formValue.value, ...loginAccount }
+  isRemember.value = true
+}
+</script>
+
 <style scoped>
 .login-input {
   --n-border-radius: 8px;
diff --git a/src/views/login/components/Register/index.vue b/src/views/login/components/Register/index.vue
index 69f6e30..165b228 100644
--- a/src/views/login/components/Register/index.vue
+++ b/src/views/login/components/Register/index.vue
@@ -1,38 +1,3 @@
-<script setup lang="ts">
-const emit = defineEmits(['update:modelValue'])
-function toLogin() {
-  emit('update:modelValue', 'login')
-}
-const { t } = useI18n()
-
-const rules = {
-  account: {
-    required: true,
-    trigger: 'blur',
-    message: t('login.accountRuleTip'),
-  },
-  pwd: {
-    required: true,
-    trigger: 'blur',
-    message: t('login.passwordRuleTip'),
-  },
-  rePwd: {
-    required: true,
-    trigger: 'blur',
-    message: t('login.checkPasswordRuleTip'),
-  },
-}
-const formValue = ref({
-  account: 'admin',
-  pwd: '000000',
-  rePwd: '000000',
-})
-
-const isRead = ref(false)
-
-function handleRegister() {}
-</script>
-
 <template>
   <div>
     <n-h2 depth="3" class="text-center">
@@ -120,4 +85,39 @@ function handleRegister() {}
   </div>
 </template>
 
+<script setup lang="ts">
+const emit = defineEmits(['update:modelValue'])
+function toLogin() {
+  emit('update:modelValue', 'login')
+}
+const { t } = useI18n()
+
+const rules = {
+  account: {
+    required: true,
+    trigger: 'blur',
+    message: t('login.accountRuleTip'),
+  },
+  pwd: {
+    required: true,
+    trigger: 'blur',
+    message: t('login.passwordRuleTip'),
+  },
+  rePwd: {
+    required: true,
+    trigger: 'blur',
+    message: t('login.checkPasswordRuleTip'),
+  },
+}
+const formValue = ref({
+  account: 'admin',
+  pwd: '000000',
+  rePwd: '000000',
+})
+
+const isRead = ref(false)
+
+function handleRegister() {}
+</script>
+
 <style scoped></style>
diff --git a/src/views/login/components/ResetPwd/index.vue b/src/views/login/components/ResetPwd/index.vue
index 1a14181..93c9827 100644
--- a/src/views/login/components/ResetPwd/index.vue
+++ b/src/views/login/components/ResetPwd/index.vue
@@ -1,30 +1,3 @@
-<script setup lang="ts">
-import type { FormInst } from 'naive-ui'
-
-const emit = defineEmits(['update:modelValue'])
-function toLogin() {
-  emit('update:modelValue', 'login')
-}
-const { t } = useI18n()
-
-const rules = computed(() => {
-  return {
-    account: {
-      required: true,
-      trigger: 'blur',
-      message: t('login.resetPasswordRuleTip'),
-    },
-  }
-})
-const formValue = ref({
-  account: '',
-})
-const formRef = ref<FormInst | null>(null)
-function handleRegister() {
-  formRef.value?.validate()
-}
-</script>
-
 <template>
   <div>
     <n-h2 depth="3" class="text-center">
@@ -73,4 +46,31 @@ function handleRegister() {
   </div>
 </template>
 
+<script setup lang="ts">
+import type { FormInst } from 'naive-ui'
+
+const emit = defineEmits(['update:modelValue'])
+function toLogin() {
+  emit('update:modelValue', 'login')
+}
+const { t } = useI18n()
+
+const rules = computed(() => {
+  return {
+    account: {
+      required: true,
+      trigger: 'blur',
+      message: t('login.resetPasswordRuleTip'),
+    },
+  }
+})
+const formValue = ref({
+  account: '',
+})
+const formRef = ref<FormInst | null>(null)
+function handleRegister() {
+  formRef.value?.validate()
+}
+</script>
+
 <style scoped></style>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 8a4415d..98ece20 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,23 +1,3 @@
-<script setup lang="ts">
-import { Login, Register, ResetPwd } from './components'
-import { useAppStore } from '@/store'
-
-type IformType = 'login' | 'register' | 'resetPwd'
-const formType: Ref<IformType> = ref('login')
-const formComponets = {
-  login: Login,
-  register: Register,
-  resetPwd: ResetPwd,
-}
-
-const appStore = useAppStore()
-
-// 获取主题色
-const primaryColor = computed(() => appStore.primaryColor)
-const primaryColorHover = computed(() => appStore.theme.common.primaryColorHover)
-const primaryColorPressed = computed(() => appStore.theme.common.primaryColorPressed)
-</script>
-
 <template>
   <div class="h-screen w-screen overflow-hidden">
     <!-- 全局设置按钮 -->
@@ -165,6 +145,26 @@ const primaryColorPressed = computed(() => appStore.theme.common.primaryColorPre
   </div>
 </template>
 
+<script setup lang="ts">
+import { Login, Register, ResetPwd } from './components'
+import { useAppStore } from '@/store'
+
+type IformType = 'login' | 'register' | 'resetPwd'
+const formType: Ref<IformType> = ref('login')
+const formComponets = {
+  login: Login,
+  register: Register,
+  resetPwd: ResetPwd,
+}
+
+const appStore = useAppStore()
+
+// 获取主题色
+const primaryColor = computed(() => appStore.primaryColor)
+const primaryColorHover = computed(() => appStore.theme.common.primaryColorHover)
+const primaryColorPressed = computed(() => appStore.theme.common.primaryColorPressed)
+</script>
+
 <style scoped>
 .perspective-1000 {
   perspective: 1000px;
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index 98ac323..3e369a9 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -1,3 +1,338 @@
+<template>
+  <div class="role-management p-1 bg-gray-50 h-screen flex flex-col">
+    <!-- 搜索表单和角色表格 -->
+    <div class="bg-white rounded-lg shadow-sm border border-gray-100 flex-1 flex flex-col overflow-hidden">
+      <!-- 搜索表单 -->
+      <div class="px-4 py-2 border-b border-gray-100">
+        <n-form
+          ref="searchFormRef"
+          :model="searchForm"
+          label-placement="left"
+          label-width="auto"
+          class="search-form"
+        >
+          <n-grid :cols="6" :x-gap="8" :y-gap="4">
+            <n-grid-item>
+              <n-form-item label="角色名称" path="roleName">
+                <n-input
+                  v-model:value="searchForm.roleName"
+                  placeholder="请输入角色名称"
+                  clearable
+                  @keydown.enter="handleSearch"
+                />
+              </n-form-item>
+            </n-grid-item>
+
+            <n-grid-item>
+              <n-form-item label="角色编码" path="roleCode">
+                <n-input
+                  v-model:value="searchForm.roleCode"
+                  placeholder="请输入角色编码"
+                  clearable
+                  @keydown.enter="handleSearch"
+                />
+              </n-form-item>
+            </n-grid-item>
+
+            <n-grid-item>
+              <n-form-item label="创建时间" path="timeRange">
+                <n-date-picker
+                  v-model:value="searchForm.timeRange"
+                  type="datetimerange"
+                  clearable
+                  placeholder="选择时间范围"
+                  :shortcuts="{
+                    今天: () => [new Date().setHours(0, 0, 0, 0), new Date().setHours(23, 59, 59, 999)],
+                    昨天: () => {
+                      const yesterday = new Date();
+                      yesterday.setDate(yesterday.getDate() - 1);
+                      return [yesterday.setHours(0, 0, 0, 0), yesterday.setHours(23, 59, 59, 999)];
+                    },
+                    最近7天: () => [Date.now() - 7 * 24 * 60 * 60 * 1000, Date.now()],
+                    最近30天: () => [Date.now() - 30 * 24 * 60 * 60 * 1000, Date.now()],
+                  }"
+                />
+              </n-form-item>
+            </n-grid-item>
+
+            <n-grid-item>
+              <n-form-item label="角色状态" path="roleStatus">
+                <n-select
+                  v-model:value="searchForm.roleStatus"
+                  placeholder="请选择角色状态"
+                  clearable
+                  :options="[
+                    { label: '启用', value: '0' },
+                    { label: '停用', value: '1' },
+                  ]"
+                />
+              </n-form-item>
+            </n-grid-item>
+
+            <n-grid-item>
+              <n-form-item label="" path="">
+                <NSpace>
+                  <NButton type="primary" @click="handleSearch">
+                    <template #icon>
+                      <NIcon><icon-park-outline:search /></NIcon>
+                    </template>
+                    搜索
+                  </NButton>
+                  <NButton @click="handleReset">
+                    <template #icon>
+                      <NIcon><icon-park-outline:refresh /></NIcon>
+                    </template>
+                    重置
+                  </NButton>
+                </NSpace>
+              </n-form-item>
+            </n-grid-item>
+          </n-grid>
+        </n-form>
+      </div>
+
+      <!-- 表格头部操作栏 -->
+      <div class="flex items-center justify-between px-4 py-2 border-b border-gray-100">
+        <div class="flex items-center gap-4">
+          <NButton type="primary" class="px-6 flex items-center" @click="handleAdd">
+            <template #icon>
+              <NIcon class="mr-1" style="transform: translateY(-1px)">
+                <icon-park-outline:plus />
+              </NIcon>
+            </template>
+            新增
+          </NButton>
+
+          <NButton
+            type="error"
+            :disabled="selectedRows.length === 0"
+            class="px-6 flex items-center"
+            @click="handleBatchDelete"
+          >
+            <template #icon>
+              <NIcon class="mr-1" style="transform: translateY(-1px)">
+                <icon-park-outline:delete />
+              </NIcon>
+            </template>
+            删除
+          </NButton>
+        </div>
+
+        <div class="flex items-center gap-4 text-sm text-gray-500">
+          <span>共 {{ pagination.itemCount }} 条</span>
+          <NButton text @click="getRoleList">
+            <template #icon>
+              <NIcon><icon-park-outline:refresh /></NIcon>
+            </template>
+          </NButton>
+        </div>
+      </div>
+
+      <!-- 表格内容 -->
+      <div class="table-wrapper flex-1 overflow-auto pt-4">
+        <n-data-table
+          :columns="columns"
+          :data="tableData"
+          :loading="loading"
+          :row-key="(row: RoleVo) => row.roleId"
+          :bordered="false"
+          :single-line="false"
+          size="large"
+          class="custom-table"
+          @update:checked-row-keys="handleRowSelectionChange"
+        />
+      </div>
+
+      <!-- 分页器 -->
+      <div class="flex items-center px-4 py-2 border-t border-gray-100">
+        <div class="text-sm text-gray-500 mr-4">
+          共 {{ pagination.itemCount }} 条
+        </div>
+        <n-pagination
+          v-model:page="pagination.page"
+          v-model:page-size="pagination.pageSize"
+          :item-count="pagination.itemCount"
+          :show-size-picker="true"
+          :page-sizes="[10, 20, 50, 100]"
+          show-quick-jumper
+          @update:page="handlePageChange"
+          @update:page-size="handlePageSizeChange"
+        />
+      </div>
+    </div>
+
+    <!-- 角色表单弹框 -->
+    <NovaDialog
+      ref="roleDialogRef"
+      :title="modalTitle"
+      :width="700"
+      height="auto"
+      confirm-text="确定"
+      cancel-text="取消"
+      @nova-confirm="handleSubmit"
+      @nova-cancel="handleCancel"
+    >
+      <template #content>
+        <div class="px-3 py-2">
+          <n-form
+            ref="formRef"
+            :model="formData"
+            :rules="rules"
+            label-placement="left"
+            label-width="90px"
+            require-mark-placement="right-hanging"
+          >
+            <!-- 第一行：角色名称 和 角色编码 -->
+            <n-grid :cols="2" :x-gap="12">
+              <n-grid-item>
+                <n-form-item label="角色名称" path="roleName">
+                  <n-input
+                    v-model:value="formData.roleName"
+                    placeholder="请输入角色名称"
+                  />
+                </n-form-item>
+              </n-grid-item>
+              <n-grid-item>
+                <n-form-item label="角色编码" path="roleCode">
+                  <n-input
+                    v-model:value="formData.roleCode"
+                    placeholder="请输入角色编码"
+                    :disabled="isEdit"
+                  />
+                </n-form-item>
+              </n-grid-item>
+            </n-grid>
+
+            <!-- 第二行：角色状态 和 显示排序 -->
+            <n-grid :cols="2" :x-gap="12">
+              <n-grid-item>
+                <n-form-item label="角色状态" path="roleStatus">
+                  <n-select
+                    v-model:value="formData.roleStatus"
+                    placeholder="请选择角色状态"
+                    :options="[
+                      { label: '启用', value: '0' },
+                      { label: '停用', value: '1' },
+                    ]"
+                  />
+                </n-form-item>
+              </n-grid-item>
+              <n-grid-item>
+                <n-form-item label="显示排序" path="sorted">
+                  <n-input-number
+                    v-model:value="formData.sorted"
+                    placeholder="请输入排序号"
+                    :min="1"
+                    :max="999"
+                    style="width: 100%"
+                  />
+                </n-form-item>
+              </n-grid-item>
+            </n-grid>
+
+            <!-- 第三行：角色描述（占满整行） -->
+            <n-form-item label="角色描述" path="remark">
+              <n-input
+                v-model:value="formData.remark"
+                type="textarea"
+                placeholder="请输入角色描述"
+                :rows="3"
+              />
+            </n-form-item>
+          </n-form>
+        </div>
+      </template>
+    </NovaDialog>
+
+    <!-- 菜单权限分配弹框 -->
+    <NovaDialog
+      ref="menuDialogRef"
+      title="分配菜单权限"
+      :width="500"
+      height="auto"
+      confirm-text="确定"
+      cancel-text="取消"
+      @nova-confirm="handleConfirmAssignMenu"
+      @nova-cancel="handleCancelAssignMenu"
+    >
+      <template #content>
+        <div class="p-3">
+          <div v-if="menuLoading" class="flex items-center justify-center py-8">
+            <div class="text-center">
+              <n-spin size="medium" />
+              <p class="mt-2 text-sm text-gray-500">
+                正在加载菜单数据...
+              </p>
+            </div>
+          </div>
+
+          <div v-else-if="menuData.length > 0">
+            <!-- 功能按钮区域 -->
+            <div class="flex items-center gap-2 mb-3 pb-3 border-b border-gray-200">
+              <NButton
+                size="small"
+                :type="allExpanded ? 'default' : 'primary'"
+                @click="toggleExpandAll"
+              >
+                {{ allExpanded ? '折叠' : '展开' }}
+              </NButton>
+
+              <NButton
+                size="small"
+                :type="allSelected ? 'default' : 'primary'"
+                @click="toggleSelectAll"
+              >
+                {{ allSelected ? '全不选' : '全选' }}
+              </NButton>
+
+              <NButton
+                size="small"
+                :type="cascadeEnabled ? 'primary' : 'default'"
+                @click="toggleCascade"
+              >
+                父子联动
+              </NButton>
+
+              <NButton
+                size="small"
+                :type="showPermissionCode ? 'primary' : 'default'"
+                @click="togglePermissionCode"
+              >
+                权限标识
+              </NButton>
+            </div>
+
+            <NTree
+              v-model:checked-keys="checkedKeys"
+              v-model:expanded-keys="expandedKeys"
+              :data="menuData"
+              checkable
+              :cascade="cascadeEnabled"
+              check-strategy="all"
+              expand-on-click
+              :render-suffix="showPermissionCode ? renderPermissionCode : undefined"
+              class="clean-menu-tree"
+            />
+          </div>
+
+          <div v-else class="flex items-center justify-center py-8">
+            <div class="text-center">
+              <div class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-2">
+                <NIcon size="16" class="text-gray-400">
+                  <icon-park-outline:folder-close />
+                </NIcon>
+              </div>
+              <p class="text-sm text-gray-500">
+                暂无可分配的菜单
+              </p>
+            </div>
+          </div>
+        </div>
+      </template>
+    </NovaDialog>
+  </div>
+</template>
+
 <script setup lang="ts">
 import { h, nextTick, onMounted, ref, watch } from 'vue'
 import type { DataTableColumns, FormInst } from 'naive-ui'
@@ -771,341 +1106,6 @@ onMounted(() => {
 })
 </script>
 
-<template>
-  <div class="role-management p-1 bg-gray-50 h-screen flex flex-col">
-    <!-- 搜索表单和角色表格 -->
-    <div class="bg-white rounded-lg shadow-sm border border-gray-100 flex-1 flex flex-col overflow-hidden">
-      <!-- 搜索表单 -->
-      <div class="px-4 py-2 border-b border-gray-100">
-        <n-form
-          ref="searchFormRef"
-          :model="searchForm"
-          label-placement="left"
-          label-width="auto"
-          class="search-form"
-        >
-          <n-grid :cols="6" :x-gap="8" :y-gap="4">
-            <n-grid-item>
-              <n-form-item label="角色名称" path="roleName">
-                <n-input
-                  v-model:value="searchForm.roleName"
-                  placeholder="请输入角色名称"
-                  clearable
-                  @keydown.enter="handleSearch"
-                />
-              </n-form-item>
-            </n-grid-item>
-
-            <n-grid-item>
-              <n-form-item label="角色编码" path="roleCode">
-                <n-input
-                  v-model:value="searchForm.roleCode"
-                  placeholder="请输入角色编码"
-                  clearable
-                  @keydown.enter="handleSearch"
-                />
-              </n-form-item>
-            </n-grid-item>
-
-            <n-grid-item>
-              <n-form-item label="创建时间" path="timeRange">
-                <n-date-picker
-                  v-model:value="searchForm.timeRange"
-                  type="datetimerange"
-                  clearable
-                  placeholder="选择时间范围"
-                  :shortcuts="{
-                    今天: () => [new Date().setHours(0, 0, 0, 0), new Date().setHours(23, 59, 59, 999)],
-                    昨天: () => {
-                      const yesterday = new Date();
-                      yesterday.setDate(yesterday.getDate() - 1);
-                      return [yesterday.setHours(0, 0, 0, 0), yesterday.setHours(23, 59, 59, 999)];
-                    },
-                    最近7天: () => [Date.now() - 7 * 24 * 60 * 60 * 1000, Date.now()],
-                    最近30天: () => [Date.now() - 30 * 24 * 60 * 60 * 1000, Date.now()],
-                  }"
-                />
-              </n-form-item>
-            </n-grid-item>
-
-            <n-grid-item>
-              <n-form-item label="角色状态" path="roleStatus">
-                <n-select
-                  v-model:value="searchForm.roleStatus"
-                  placeholder="请选择角色状态"
-                  clearable
-                  :options="[
-                    { label: '启用', value: '0' },
-                    { label: '停用', value: '1' },
-                  ]"
-                />
-              </n-form-item>
-            </n-grid-item>
-
-            <n-grid-item>
-              <n-form-item label="" path="">
-                <NSpace>
-                  <NButton type="primary" @click="handleSearch">
-                    <template #icon>
-                      <NIcon><icon-park-outline:search /></NIcon>
-                    </template>
-                    搜索
-                  </NButton>
-                  <NButton @click="handleReset">
-                    <template #icon>
-                      <NIcon><icon-park-outline:refresh /></NIcon>
-                    </template>
-                    重置
-                  </NButton>
-                </NSpace>
-              </n-form-item>
-            </n-grid-item>
-          </n-grid>
-        </n-form>
-      </div>
-
-      <!-- 表格头部操作栏 -->
-      <div class="flex items-center justify-between px-4 py-2 border-b border-gray-100">
-        <div class="flex items-center gap-4">
-          <NButton type="primary" class="px-6 flex items-center" @click="handleAdd">
-            <template #icon>
-              <NIcon class="mr-1" style="transform: translateY(-1px)">
-                <icon-park-outline:plus />
-              </NIcon>
-            </template>
-            新增
-          </NButton>
-
-          <NButton
-            type="error"
-            :disabled="selectedRows.length === 0"
-            class="px-6 flex items-center"
-            @click="handleBatchDelete"
-          >
-            <template #icon>
-              <NIcon class="mr-1" style="transform: translateY(-1px)">
-                <icon-park-outline:delete />
-              </NIcon>
-            </template>
-            删除
-          </NButton>
-        </div>
-
-        <div class="flex items-center gap-4 text-sm text-gray-500">
-          <span>共 {{ pagination.itemCount }} 条</span>
-          <NButton text @click="getRoleList">
-            <template #icon>
-              <NIcon><icon-park-outline:refresh /></NIcon>
-            </template>
-          </NButton>
-        </div>
-      </div>
-
-      <!-- 表格内容 -->
-      <div class="table-wrapper flex-1 overflow-auto pt-4">
-        <n-data-table
-          :columns="columns"
-          :data="tableData"
-          :loading="loading"
-          :row-key="(row: RoleVo) => row.roleId"
-          :bordered="false"
-          :single-line="false"
-          size="large"
-          class="custom-table"
-          @update:checked-row-keys="handleRowSelectionChange"
-        />
-      </div>
-
-      <!-- 分页器 -->
-      <div class="flex items-center px-4 py-2 border-t border-gray-100">
-        <div class="text-sm text-gray-500 mr-4">
-          共 {{ pagination.itemCount }} 条
-        </div>
-        <n-pagination
-          v-model:page="pagination.page"
-          v-model:page-size="pagination.pageSize"
-          :item-count="pagination.itemCount"
-          :show-size-picker="true"
-          :page-sizes="[10, 20, 50, 100]"
-          show-quick-jumper
-          @update:page="handlePageChange"
-          @update:page-size="handlePageSizeChange"
-        />
-      </div>
-    </div>
-
-    <!-- 角色表单弹框 -->
-    <NovaDialog
-      ref="roleDialogRef"
-      :title="modalTitle"
-      :width="700"
-      height="auto"
-      confirm-text="确定"
-      cancel-text="取消"
-      @nova-confirm="handleSubmit"
-      @nova-cancel="handleCancel"
-    >
-      <template #content>
-        <div class="px-3 py-2">
-          <n-form
-            ref="formRef"
-            :model="formData"
-            :rules="rules"
-            label-placement="left"
-            label-width="90px"
-            require-mark-placement="right-hanging"
-          >
-            <!-- 第一行：角色名称 和 角色编码 -->
-            <n-grid :cols="2" :x-gap="12">
-              <n-grid-item>
-                <n-form-item label="角色名称" path="roleName">
-                  <n-input
-                    v-model:value="formData.roleName"
-                    placeholder="请输入角色名称"
-                  />
-                </n-form-item>
-              </n-grid-item>
-              <n-grid-item>
-                <n-form-item label="角色编码" path="roleCode">
-                  <n-input
-                    v-model:value="formData.roleCode"
-                    placeholder="请输入角色编码"
-                    :disabled="isEdit"
-                  />
-                </n-form-item>
-              </n-grid-item>
-            </n-grid>
-
-            <!-- 第二行：角色状态 和 显示排序 -->
-            <n-grid :cols="2" :x-gap="12">
-              <n-grid-item>
-                <n-form-item label="角色状态" path="roleStatus">
-                  <n-select
-                    v-model:value="formData.roleStatus"
-                    placeholder="请选择角色状态"
-                    :options="[
-                      { label: '启用', value: '0' },
-                      { label: '停用', value: '1' },
-                    ]"
-                  />
-                </n-form-item>
-              </n-grid-item>
-              <n-grid-item>
-                <n-form-item label="显示排序" path="sorted">
-                  <n-input-number
-                    v-model:value="formData.sorted"
-                    placeholder="请输入排序号"
-                    :min="1"
-                    :max="999"
-                    style="width: 100%"
-                  />
-                </n-form-item>
-              </n-grid-item>
-            </n-grid>
-
-            <!-- 第三行：角色描述（占满整行） -->
-            <n-form-item label="角色描述" path="remark">
-              <n-input
-                v-model:value="formData.remark"
-                type="textarea"
-                placeholder="请输入角色描述"
-                :rows="3"
-              />
-            </n-form-item>
-          </n-form>
-        </div>
-      </template>
-    </NovaDialog>
-
-    <!-- 菜单权限分配弹框 -->
-    <NovaDialog
-      ref="menuDialogRef"
-      title="分配菜单权限"
-      :width="500"
-      height="auto"
-      confirm-text="确定"
-      cancel-text="取消"
-      @nova-confirm="handleConfirmAssignMenu"
-      @nova-cancel="handleCancelAssignMenu"
-    >
-      <template #content>
-        <div class="p-3">
-          <div v-if="menuLoading" class="flex items-center justify-center py-8">
-            <div class="text-center">
-              <n-spin size="medium" />
-              <p class="mt-2 text-sm text-gray-500">
-                正在加载菜单数据...
-              </p>
-            </div>
-          </div>
-
-          <div v-else-if="menuData.length > 0">
-            <!-- 功能按钮区域 -->
-            <div class="flex items-center gap-2 mb-3 pb-3 border-b border-gray-200">
-              <NButton
-                size="small"
-                :type="allExpanded ? 'default' : 'primary'"
-                @click="toggleExpandAll"
-              >
-                {{ allExpanded ? '折叠' : '展开' }}
-              </NButton>
-
-              <NButton
-                size="small"
-                :type="allSelected ? 'default' : 'primary'"
-                @click="toggleSelectAll"
-              >
-                {{ allSelected ? '全不选' : '全选' }}
-              </NButton>
-
-              <NButton
-                size="small"
-                :type="cascadeEnabled ? 'primary' : 'default'"
-                @click="toggleCascade"
-              >
-                父子联动
-              </NButton>
-
-              <NButton
-                size="small"
-                :type="showPermissionCode ? 'primary' : 'default'"
-                @click="togglePermissionCode"
-              >
-                权限标识
-              </NButton>
-            </div>
-
-            <NTree
-              v-model:checked-keys="checkedKeys"
-              v-model:expanded-keys="expandedKeys"
-              :data="menuData"
-              checkable
-              :cascade="cascadeEnabled"
-              check-strategy="all"
-              expand-on-click
-              :render-suffix="showPermissionCode ? renderPermissionCode : undefined"
-              class="clean-menu-tree"
-            />
-          </div>
-
-          <div v-else class="flex items-center justify-center py-8">
-            <div class="text-center">
-              <div class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-2">
-                <NIcon size="16" class="text-gray-400">
-                  <icon-park-outline:folder-close />
-                </NIcon>
-              </div>
-              <p class="text-sm text-gray-500">
-                暂无可分配的菜单
-              </p>
-            </div>
-          </div>
-        </div>
-      </template>
-    </NovaDialog>
-  </div>
-</template>
-
 <style scoped>
 .role-management {
   height: 100vh;
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 0def5aa..142dd66 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -1,3 +1,670 @@
+<template>
+  <div class="user-management p-1 bg-gray-50 h-screen flex flex-col">
+    <!-- 搜索表单和用户表格 -->
+    <div class="bg-white rounded-lg shadow-sm border border-gray-100 flex-1 flex flex-col overflow-hidden">
+      <!-- 搜索表单 -->
+      <div class="px-4 py-2 border-b border-gray-100">
+        <n-form
+          ref="searchFormRef"
+          :model="searchForm"
+          label-placement="left"
+          label-width="auto"
+          class="search-form"
+        >
+          <n-grid :cols="7" :x-gap="8" :y-gap="4">
+            <n-grid-item>
+              <n-form-item label="登录账号" path="loginName">
+                <n-input
+                  v-model:value="searchForm.loginName"
+                  placeholder="请输入登录账号"
+                  clearable
+                  @keydown.enter="handleSearch"
+                />
+              </n-form-item>
+            </n-grid-item>
+
+            <n-grid-item>
+              <n-form-item label="用户姓名" path="userName">
+                <n-input
+                  v-model:value="searchForm.userName"
+                  placeholder="请输入用户姓名"
+                  clearable
+                  @keydown.enter="handleSearch"
+                />
+              </n-form-item>
+            </n-grid-item>
+
+            <n-grid-item>
+              <n-form-item label="手机号" path="phone">
+                <n-input
+                  v-model:value="searchForm.phone"
+                  placeholder="请输入手机号"
+                  clearable
+                  @keydown.enter="handleSearch"
+                />
+              </n-form-item>
+            </n-grid-item>
+
+            <n-grid-item>
+              <n-form-item label="创建时间" path="timeRange">
+                <n-date-picker
+                  v-model:value="searchForm.timeRange"
+                  type="datetimerange"
+                  clearable
+                  placeholder="选择时间范围"
+                  :shortcuts="{
+                    今天: () => [new Date().setHours(0, 0, 0, 0), new Date().setHours(23, 59, 59, 999)],
+                    昨天: () => {
+                      const yesterday = new Date();
+                      yesterday.setDate(yesterday.getDate() - 1);
+                      return [yesterday.setHours(0, 0, 0, 0), yesterday.setHours(23, 59, 59, 999)];
+                    },
+                    最近7天: () => [Date.now() - 7 * 24 * 60 * 60 * 1000, Date.now()],
+                    最近30天: () => [Date.now() - 30 * 24 * 60 * 60 * 1000, Date.now()],
+                  }"
+                />
+              </n-form-item>
+            </n-grid-item>
+
+            <n-grid-item>
+              <n-form-item label="用户状态" path="userStatus">
+                <n-select
+                  v-model:value="searchForm.userStatus"
+                  placeholder="请选择用户状态"
+                  clearable
+                  :options="[
+                    { label: '启用', value: '0' },
+                    { label: '停用', value: '1' },
+                  ]"
+                />
+              </n-form-item>
+            </n-grid-item>
+
+            <n-grid-item>
+              <n-form-item label="" path="">
+                <NSpace>
+                  <NButton type="primary" @click="handleSearch">
+                    <template #icon>
+                      <NIcon><icon-park-outline:search /></NIcon>
+                    </template>
+                    搜索
+                  </NButton>
+                  <NButton @click="handleReset">
+                    <template #icon>
+                      <NIcon><icon-park-outline:refresh /></NIcon>
+                    </template>
+                    重置
+                  </NButton>
+                </NSpace>
+              </n-form-item>
+            </n-grid-item>
+          </n-grid>
+        </n-form>
+      </div>
+      <!-- 表格头部操作栏 -->
+      <div class="flex items-center justify-between px-4 py-2 border-b border-gray-100">
+        <div class="flex items-center gap-4">
+          <NButton type="primary" class="px-6 flex items-center" @click="handleAdd">
+            <template #icon>
+              <NIcon class="mr-1" style="transform: translateY(-1px)">
+                <icon-park-outline:plus />
+              </NIcon>
+            </template>
+            新增
+          </NButton>
+
+          <NButton
+            type="error"
+            :disabled="selectedRows.length === 0"
+            class="px-6 flex items-center"
+            @click="handleBatchDelete"
+          >
+            <template #icon>
+              <NIcon class="mr-1" style="transform: translateY(-1px)">
+                <icon-park-outline:delete />
+              </NIcon>
+            </template>
+            删除
+          </NButton>
+
+          <NButton
+            type="info"
+            :disabled="selectedRows.length !== 1"
+            class="px-6 flex items-center"
+            @click="handleAssignRole(selectedRows[0])"
+          >
+            <template #icon>
+              <NIcon class="mr-1" style="transform: translateY(-1px)">
+                <icon-park-outline:setting />
+              </NIcon>
+            </template>
+            分配角色
+          </NButton>
+
+          <NDropdown
+            trigger="click"
+            :show="showExportDropdown"
+            :options="[
+              {
+                label: '导出当前查询数据',
+                key: 'current',
+                icon: () => h(NIcon, null, { default: () => h('icon-park-outline:download') }),
+              },
+              {
+                label: '导出全部数据',
+                key: 'all',
+                icon: () => h(NIcon, null, { default: () => h('icon-park-outline:download-one') }),
+              },
+              {
+                type: 'divider',
+              },
+              {
+                label: '下载导入模板',
+                key: 'template',
+                icon: () => h(NIcon, null, { default: () => h('icon-park-outline:file-code-one') }),
+              },
+            ]"
+            @update:show="(show: boolean) => showExportDropdown = show"
+            @select="handleExportMenuSelect"
+          >
+            <NButton class="px-6 flex items-center">
+              <template #icon>
+                <NIcon class="mr-1" style="transform: translateY(-1px)">
+                  <icon-park-outline:download />
+                </NIcon>
+              </template>
+              导出
+              <NIcon class="ml-1" style="transform: translateY(-1px)">
+                <icon-park-outline:down />
+              </NIcon>
+            </NButton>
+          </NDropdown>
+
+          <NButton class="px-6 flex items-center" @click="handleImport">
+            <template #icon>
+              <NIcon class="mr-1" style="transform: translateY(-1px)">
+                <icon-park-outline:upload />
+              </NIcon>
+            </template>
+            导入
+          </NButton>
+        </div>
+
+        <div class="flex items-center gap-4 text-sm text-gray-500">
+          <span>共 {{ pagination.itemCount }} 条</span>
+          <NButton text @click="getUserList">
+            <template #icon>
+              <NIcon><icon-park-outline:refresh /></NIcon>
+            </template>
+          </NButton>
+        </div>
+      </div>
+
+      <!-- 表格内容 -->
+      <div class="table-wrapper flex-1 overflow-auto pt-4">
+        <n-data-table
+          :columns="columns"
+          :data="tableData"
+          :loading="loading"
+          :row-key="(row: UserVo) => row.userId"
+          :bordered="false"
+          :single-line="false"
+          size="large"
+          class="custom-table"
+          @update:checked-row-keys="handleRowSelectionChange"
+        />
+      </div>
+
+      <!-- 分页器 -->
+      <div class="flex items-center px-4 py-2 border-t border-gray-100">
+        <div class="text-sm text-gray-500 mr-4">
+          共 {{ pagination.itemCount }} 条
+        </div>
+        <n-pagination
+          v-model:page="pagination.page"
+          v-model:page-size="pagination.pageSize"
+          :item-count="pagination.itemCount"
+          :show-size-picker="true"
+          :page-sizes="[10, 20, 50, 100]"
+          show-quick-jumper
+          @update:page="handlePageChange"
+          @update:page-size="handlePageSizeChange"
+        />
+      </div>
+    </div>
+
+    <!-- 用户表单弹框 -->
+    <NovaDialog
+      ref="userDialogRef"
+      :title="modalTitle"
+      :width="800"
+      height="auto"
+      confirm-text="确定"
+      cancel-text="取消"
+      @nova-confirm="handleSubmit"
+      @nova-cancel="handleCancel"
+    >
+      <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.remark"
+                type="textarea"
+                placeholder="请输入备注信息"
+                :rows="3"
+              />
+            </n-form-item>
+          </n-form>
+        </div>
+      </template>
+    </NovaDialog>
+
+    <!-- 角色分配弹框 -->
+    <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="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>
+    </NovaDialog>
+
+    <!-- 头像查看弹框 -->
+    <NovaDialog
+      ref="avatarDialogRef"
+      :width="600"
+      height="auto"
+      cancel-text="关闭"
+      :show-confirm="false"
+      @nova-cancel="handleCloseAvatar"
+    >
+      <template #header>
+        <div class="flex items-center gap-3">
+          <div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-400 to-pink-400 flex items-center justify-center text-white text-sm font-bold">
+            {{ currentAvatarUser?.loginName?.charAt(0).toUpperCase() }}
+          </div>
+          <div>
+            <span class="text-lg font-semibold">{{ currentAvatarUser?.userName }}</span>
+            <span class="text-sm text-gray-500 ml-2">({{ currentAvatarUser?.loginName }})</span>
+          </div>
+        </div>
+      </template>
+
+      <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>
+    </NovaDialog>
+  </div>
+</template>
+
 <script setup lang="ts">
 import { h, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
 import type { DataTableColumns, FormInst } from 'naive-ui'
@@ -1107,673 +1774,6 @@ onBeforeUnmount(() => {
 })
 </script>
 
-<template>
-  <div class="user-management p-1 bg-gray-50 h-screen flex flex-col">
-    <!-- 搜索表单和用户表格 -->
-    <div class="bg-white rounded-lg shadow-sm border border-gray-100 flex-1 flex flex-col overflow-hidden">
-      <!-- 搜索表单 -->
-      <div class="px-4 py-2 border-b border-gray-100">
-        <n-form
-          ref="searchFormRef"
-          :model="searchForm"
-          label-placement="left"
-          label-width="auto"
-          class="search-form"
-        >
-          <n-grid :cols="7" :x-gap="8" :y-gap="4">
-            <n-grid-item>
-              <n-form-item label="登录账号" path="loginName">
-                <n-input
-                  v-model:value="searchForm.loginName"
-                  placeholder="请输入登录账号"
-                  clearable
-                  @keydown.enter="handleSearch"
-                />
-              </n-form-item>
-            </n-grid-item>
-
-            <n-grid-item>
-              <n-form-item label="用户姓名" path="userName">
-                <n-input
-                  v-model:value="searchForm.userName"
-                  placeholder="请输入用户姓名"
-                  clearable
-                  @keydown.enter="handleSearch"
-                />
-              </n-form-item>
-            </n-grid-item>
-
-            <n-grid-item>
-              <n-form-item label="手机号" path="phone">
-                <n-input
-                  v-model:value="searchForm.phone"
-                  placeholder="请输入手机号"
-                  clearable
-                  @keydown.enter="handleSearch"
-                />
-              </n-form-item>
-            </n-grid-item>
-
-            <n-grid-item>
-              <n-form-item label="创建时间" path="timeRange">
-                <n-date-picker
-                  v-model:value="searchForm.timeRange"
-                  type="datetimerange"
-                  clearable
-                  placeholder="选择时间范围"
-                  :shortcuts="{
-                    今天: () => [new Date().setHours(0, 0, 0, 0), new Date().setHours(23, 59, 59, 999)],
-                    昨天: () => {
-                      const yesterday = new Date();
-                      yesterday.setDate(yesterday.getDate() - 1);
-                      return [yesterday.setHours(0, 0, 0, 0), yesterday.setHours(23, 59, 59, 999)];
-                    },
-                    最近7天: () => [Date.now() - 7 * 24 * 60 * 60 * 1000, Date.now()],
-                    最近30天: () => [Date.now() - 30 * 24 * 60 * 60 * 1000, Date.now()],
-                  }"
-                />
-              </n-form-item>
-            </n-grid-item>
-
-            <n-grid-item>
-              <n-form-item label="用户状态" path="userStatus">
-                <n-select
-                  v-model:value="searchForm.userStatus"
-                  placeholder="请选择用户状态"
-                  clearable
-                  :options="[
-                    { label: '启用', value: '0' },
-                    { label: '停用', value: '1' },
-                  ]"
-                />
-              </n-form-item>
-            </n-grid-item>
-
-            <n-grid-item>
-              <n-form-item label="" path="">
-                <NSpace>
-                  <NButton type="primary" @click="handleSearch">
-                    <template #icon>
-                      <NIcon><icon-park-outline:search /></NIcon>
-                    </template>
-                    搜索
-                  </NButton>
-                  <NButton @click="handleReset">
-                    <template #icon>
-                      <NIcon><icon-park-outline:refresh /></NIcon>
-                    </template>
-                    重置
-                  </NButton>
-                </NSpace>
-              </n-form-item>
-            </n-grid-item>
-          </n-grid>
-        </n-form>
-      </div>
-      <!-- 表格头部操作栏 -->
-      <div class="flex items-center justify-between px-4 py-2 border-b border-gray-100">
-        <div class="flex items-center gap-4">
-          <NButton type="primary" class="px-6 flex items-center" @click="handleAdd">
-            <template #icon>
-              <NIcon class="mr-1" style="transform: translateY(-1px)">
-                <icon-park-outline:plus />
-              </NIcon>
-            </template>
-            新增
-          </NButton>
-
-          <NButton
-            type="error"
-            :disabled="selectedRows.length === 0"
-            class="px-6 flex items-center"
-            @click="handleBatchDelete"
-          >
-            <template #icon>
-              <NIcon class="mr-1" style="transform: translateY(-1px)">
-                <icon-park-outline:delete />
-              </NIcon>
-            </template>
-            删除
-          </NButton>
-
-          <NButton
-            type="info"
-            :disabled="selectedRows.length !== 1"
-            class="px-6 flex items-center"
-            @click="handleAssignRole(selectedRows[0])"
-          >
-            <template #icon>
-              <NIcon class="mr-1" style="transform: translateY(-1px)">
-                <icon-park-outline:setting />
-              </NIcon>
-            </template>
-            分配角色
-          </NButton>
-
-          <NDropdown
-            trigger="click"
-            :show="showExportDropdown"
-            :options="[
-              {
-                label: '导出当前查询数据',
-                key: 'current',
-                icon: () => h(NIcon, null, { default: () => h('icon-park-outline:download') }),
-              },
-              {
-                label: '导出全部数据',
-                key: 'all',
-                icon: () => h(NIcon, null, { default: () => h('icon-park-outline:download-one') }),
-              },
-              {
-                type: 'divider',
-              },
-              {
-                label: '下载导入模板',
-                key: 'template',
-                icon: () => h(NIcon, null, { default: () => h('icon-park-outline:file-code-one') }),
-              },
-            ]"
-            @update:show="(show: boolean) => showExportDropdown = show"
-            @select="handleExportMenuSelect"
-          >
-            <NButton class="px-6 flex items-center">
-              <template #icon>
-                <NIcon class="mr-1" style="transform: translateY(-1px)">
-                  <icon-park-outline:download />
-                </NIcon>
-              </template>
-              导出
-              <NIcon class="ml-1" style="transform: translateY(-1px)">
-                <icon-park-outline:down />
-              </NIcon>
-            </NButton>
-          </NDropdown>
-
-          <NButton class="px-6 flex items-center" @click="handleImport">
-            <template #icon>
-              <NIcon class="mr-1" style="transform: translateY(-1px)">
-                <icon-park-outline:upload />
-              </NIcon>
-            </template>
-            导入
-          </NButton>
-        </div>
-
-        <div class="flex items-center gap-4 text-sm text-gray-500">
-          <span>共 {{ pagination.itemCount }} 条</span>
-          <NButton text @click="getUserList">
-            <template #icon>
-              <NIcon><icon-park-outline:refresh /></NIcon>
-            </template>
-          </NButton>
-        </div>
-      </div>
-
-      <!-- 表格内容 -->
-      <div class="table-wrapper flex-1 overflow-auto pt-4">
-        <n-data-table
-          :columns="columns"
-          :data="tableData"
-          :loading="loading"
-          :row-key="(row: UserVo) => row.userId"
-          :bordered="false"
-          :single-line="false"
-          size="large"
-          class="custom-table"
-          @update:checked-row-keys="handleRowSelectionChange"
-        />
-      </div>
-
-      <!-- 分页器 -->
-      <div class="flex items-center px-4 py-2 border-t border-gray-100">
-        <div class="text-sm text-gray-500 mr-4">
-          共 {{ pagination.itemCount }} 条
-        </div>
-        <n-pagination
-          v-model:page="pagination.page"
-          v-model:page-size="pagination.pageSize"
-          :item-count="pagination.itemCount"
-          :show-size-picker="true"
-          :page-sizes="[10, 20, 50, 100]"
-          show-quick-jumper
-          @update:page="handlePageChange"
-          @update:page-size="handlePageSizeChange"
-        />
-      </div>
-    </div>
-
-    <!-- 用户表单弹框 -->
-    <NovaDialog
-      ref="userDialogRef"
-      :title="modalTitle"
-      :width="800"
-      height="auto"
-      confirm-text="确定"
-      cancel-text="取消"
-      @nova-confirm="handleSubmit"
-      @nova-cancel="handleCancel"
-    >
-      <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.remark"
-                type="textarea"
-                placeholder="请输入备注信息"
-                :rows="3"
-              />
-            </n-form-item>
-          </n-form>
-        </div>
-      </template>
-    </NovaDialog>
-
-    <!-- 角色分配弹框 -->
-    <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="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>
-    </NovaDialog>
-
-    <!-- 头像查看弹框 -->
-    <NovaDialog
-      ref="avatarDialogRef"
-      :width="600"
-      height="auto"
-      cancel-text="关闭"
-      :show-confirm="false"
-      @nova-cancel="handleCloseAvatar"
-    >
-      <template #header>
-        <div class="flex items-center gap-3">
-          <div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-400 to-pink-400 flex items-center justify-center text-white text-sm font-bold">
-            {{ currentAvatarUser?.loginName?.charAt(0).toUpperCase() }}
-          </div>
-          <div>
-            <span class="text-lg font-semibold">{{ currentAvatarUser?.userName }}</span>
-            <span class="text-sm text-gray-500 ml-2">({{ currentAvatarUser?.loginName }})</span>
-          </div>
-        </div>
-      </template>
-
-      <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>
-    </NovaDialog>
-  </div>
-</template>
-
 <style scoped>
 .user-management {
   height: 100vh;