From 019234162fb309cc04bd00110da6963a0e5de7a4 Mon Sep 17 00:00:00 2001
From: Leo <98382335+gaoziman@users.noreply.github.com>
Date: Wed, 15 Oct 2025 21:00:11 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=EF=BC=9A=E4=B8=BA=E5=89=8D?=
 =?UTF-8?q?=E5=8F=B0=E7=94=A8=E6=88=B7=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=A9=BA=E7=8A=B6=E6=80=81=E5=A4=84=E7=90=86?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加智能空状态提示信息
- 新增getEmptyTitle、getEmptyDescription等辅助函数
- 升级CoiEmpty组件配置，支持重置搜索和新增操作
- 搜索无结果时显示重置搜索按钮
- 完全无数据时显示新增用户按钮
- 提升用户体验和操作引导
---
 src/views/heritage/users/index.vue | 1240 ++++++++++++++++++++++++++++
 1 file changed, 1240 insertions(+)
 create mode 100644 src/views/heritage/users/index.vue

diff --git a/src/views/heritage/users/index.vue b/src/views/heritage/users/index.vue
new file mode 100644
index 0000000..d9bcf53
--- /dev/null
+++ b/src/views/heritage/users/index.vue
@@ -0,0 +1,1240 @@
+<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="8" :x-gap="8" :y-gap="4">
+            <n-grid-item>
+              <n-form-item label="用户名" path="username">
+                <n-input
+                  v-model:value="searchForm.username"
+                  placeholder="请输入用户名"
+                  clearable
+                  @keyup.enter="handleSearch"
+                />
+              </n-form-item>
+            </n-grid-item>
+
+            <n-grid-item>
+              <n-form-item label="昵称" path="nickname">
+                <n-input
+                  v-model:value="searchForm.nickname"
+                  placeholder="请输入昵称"
+                  clearable
+                  @keyup.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
+                  @keyup.enter="handleSearch"
+                />
+              </n-form-item>
+            </n-grid-item>
+
+            <n-grid-item>
+              <n-form-item label="性别" path="gender">
+                <n-select
+                  v-model:value="searchForm.gender"
+                  placeholder="请选择性别"
+                  clearable
+                  :options="genderOptions"
+                />
+              </n-form-item>
+            </n-grid-item>
+
+            <n-grid-item>
+              <n-form-item label="状态" path="status">
+                <n-select
+                  v-model:value="searchForm.status"
+                  placeholder="请选择状态"
+                  clearable
+                  :options="statusOptions"
+                />
+              </n-form-item>
+            </n-grid-item>
+
+            <n-grid-item>
+              <n-form-item label="省份" path="province">
+                <n-input
+                  v-model:value="searchForm.province"
+                  placeholder="请输入省份"
+                  clearable
+                  @keyup.enter="handleSearch"
+                />
+              </n-form-item>
+            </n-grid-item>
+
+            <n-grid-item>
+              <n-form-item label="城市" path="city">
+                <n-input
+                  v-model:value="searchForm.city"
+                  placeholder="请输入城市"
+                  clearable
+                  @keyup.enter="handleSearch"
+                />
+              </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" @click="handleAdd">
+            <template #icon>
+              <NIcon><icon-park-outline:plus /></NIcon>
+            </template>
+            新增
+          </NButton>
+          <NButton
+            type="error"
+            :disabled="selectedRowKeys.length === 0"
+            @click="handleBatchDelete"
+          >
+            <template #icon>
+              <NIcon><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="loadTableData">
+            <template #icon>
+              <NIcon><IconParkOutlineRefresh /></NIcon>
+            </template>
+          </NButton>
+        </div>
+      </div>
+
+      <!-- 表格包裹器 -->
+      <div class="table-wrapper flex-1 overflow-auto pt-4">
+        <n-data-table
+          v-if="tableData.length > 0 || loading"
+          :columns="columns"
+          :data="tableData"
+          :loading="loading"
+          :row-key="(row: UserAdminVo) => row.id"
+          :checked-row-keys="selectedRowKeys"
+          :bordered="false"
+          :single-line="false"
+          class="custom-table"
+          @update:checked-row-keys="handleRowSelectionChange"
+        />
+        <CoiEmpty
+          v-else
+          :type="getEmptyType()"
+          :title="getEmptyTitle()"
+          :description="getEmptyDescription()"
+          :show-action="true"
+          :action-text="getEmptyActionText()"
+          size="medium"
+          @action="handleEmptyAction"
+        >
+          <template #action>
+            <NButton
+              type="primary"
+              size="medium"
+              round
+              @click="handleEmptyAction"
+            >
+              <template #icon>
+                <NIcon>
+                  <IconParkOutlineRefresh v-if="hasSearchConditions()" />
+                  <icon-park-outline:plus v-else />
+                </NIcon>
+              </template>
+              {{ getEmptyActionText() }}
+            </NButton>
+          </template>
+        </CoiEmpty>
+      </div>
+
+      <!-- 分页区域 -->
+      <div v-if="tableData.length > 0" class="border-t border-gray-100">
+        <CoiPagination
+          v-model:page="pagination.page"
+          v-model:page-size="pagination.pageSize"
+          :item-count="pagination.itemCount"
+          @update:page="handlePageChange"
+          @update:page-size="handlePageSizeChange"
+        />
+      </div>
+    </div>
+
+    <!-- 表单弹框 -->
+    <CoiDialog
+      ref="formDialogRef"
+      :title="modalTitle"
+      :width="800"
+      height="auto"
+      confirm-text="确定"
+      cancel-text="取消"
+      @coi-confirm="handleSubmit"
+      @coi-cancel="handleCancel"
+    >
+      <template #content>
+        <div class="dialog-form-container px-3 py-2">
+          <n-form
+            ref="formRef"
+            :model="formData"
+            :rules="rules"
+            label-placement="left"
+            label-width="90px"
+            require-mark-placement="right-hanging"
+            class="compact-form"
+          >
+            <!-- 基本信息 -->
+            <n-divider title-placement="left">
+              基本信息
+            </n-divider>
+            <n-grid :cols="2" :x-gap="10">
+              <n-grid-item>
+                <n-form-item label="用户名" path="username" class="mb-2">
+                  <n-input
+                    v-model:value="formData.username"
+                    placeholder="请输入用户名"
+                    :disabled="isEdit"
+                  />
+                </n-form-item>
+              </n-grid-item>
+
+              <n-grid-item v-if="!isEdit">
+                <n-form-item label="密码" path="password" class="mb-2">
+                  <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="nickname" class="mb-2">
+                  <n-input
+                    v-model:value="formData.nickname"
+                    placeholder="请输入昵称"
+                  />
+                </n-form-item>
+              </n-grid-item>
+
+              <n-grid-item>
+                <n-form-item label="手机号" path="phone" class="mb-2">
+                  <n-input
+                    v-model:value="formData.phone"
+                    placeholder="请输入手机号"
+                  />
+                </n-form-item>
+              </n-grid-item>
+
+              <n-grid-item>
+                <n-form-item label="邮箱" path="email" class="mb-2">
+                  <n-input
+                    v-model:value="formData.email"
+                    placeholder="请输入邮箱"
+                  />
+                </n-form-item>
+              </n-grid-item>
+
+              <n-grid-item>
+                <n-form-item label="性别" path="gender" class="mb-2">
+                  <n-select
+                    v-model:value="formData.gender"
+                    placeholder="请选择性别"
+                    :options="genderOptions"
+                  />
+                </n-form-item>
+              </n-grid-item>
+
+              <n-grid-item>
+                <n-form-item label="生日" path="birthday" class="mb-2">
+                  <n-date-picker
+                    v-model:value="birthdayValue"
+                    type="date"
+                    placeholder="请选择生日"
+                    class="w-full"
+                    format="yyyy-MM-dd"
+                    value-format="yyyy-MM-dd"
+                  />
+                </n-form-item>
+              </n-grid-item>
+
+              <n-grid-item>
+                <n-form-item label="省份" path="province" class="mb-2">
+                  <n-input
+                    v-model:value="formData.province"
+                    placeholder="请输入省份"
+                  />
+                </n-form-item>
+              </n-grid-item>
+
+              <n-grid-item>
+                <n-form-item label="城市" path="city" class="mb-2">
+                  <n-input
+                    v-model:value="formData.city"
+                    placeholder="请输入城市"
+                  />
+                </n-form-item>
+              </n-grid-item>
+
+              <n-grid-item>
+                <n-form-item label="状态" path="status" class="mb-2">
+                  <n-select
+                    v-model:value="formData.status"
+                    placeholder="请选择状态"
+                    :options="statusOptions"
+                  />
+                </n-form-item>
+              </n-grid-item>
+            </n-grid>
+
+            <n-form-item label="备注" path="remark" class="mb-2">
+              <n-input
+                v-model:value="formData.remark"
+                type="textarea"
+                placeholder="请输入备注"
+                :rows="3"
+              />
+            </n-form-item>
+          </n-form>
+        </div>
+      </template>
+    </CoiDialog>
+
+    <!-- 重置密码弹框 -->
+    <CoiDialog
+      ref="resetPasswordDialogRef"
+      title="重置密码"
+      :width="500"
+      height="auto"
+      confirm-text="确定"
+      cancel-text="取消"
+      @coi-confirm="handleResetPasswordSubmit"
+      @coi-cancel="handleResetPasswordCancel"
+    >
+      <template #content>
+        <div class="px-3 py-2">
+          <n-form
+            ref="resetPasswordFormRef"
+            :model="resetPasswordForm"
+            :rules="resetPasswordRules"
+            label-placement="left"
+            label-width="90px"
+            require-mark-placement="right-hanging"
+            class="compact-form"
+          >
+            <n-form-item label="用户名" class="mb-2">
+              <n-input :value="resetPasswordForm.username" disabled />
+            </n-form-item>
+            <n-form-item label="新密码" path="newPassword" class="mb-2">
+              <n-input
+                v-model:value="resetPasswordForm.newPassword"
+                type="password"
+                placeholder="请输入新密码"
+                show-password-on="click"
+              />
+            </n-form-item>
+            <n-form-item label="确认密码" path="confirmPassword" class="mb-2">
+              <n-input
+                v-model:value="resetPasswordForm.confirmPassword"
+                type="password"
+                placeholder="请再次输入新密码"
+                show-password-on="click"
+              />
+            </n-form-item>
+          </n-form>
+        </div>
+      </template>
+    </CoiDialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { h, nextTick, onMounted, ref, watch } from 'vue'
+import type { DataTableColumns, FormInst, FormRules } from 'naive-ui'
+import { NButton, NIcon, NPopconfirm, NSpace, NSwitch, NTag } from 'naive-ui'
+import { coiMsgBox, coiMsgError, coiMsgSuccess, coiMsgWarning } from '@/utils/coi'
+import CoiDialog from '@/components/common/CoiDialog.vue'
+import CoiPagination from '@/components/common/CoiPagination.vue'
+import CoiEmpty from '@/components/common/CoiEmpty.vue'
+import type {
+  UserAdminBo,
+  UserAdminSearchForm,
+  UserAdminVo,
+} from '@/service/api/heritage/users'
+import {
+  addUserAdmin,
+  batchDeleteUserAdmin,
+  changeUserStatus,
+  deleteUserAdmin,
+  getUserAdminList,
+  resetUserPassword,
+  updateUserAdmin,
+} from '@/service/api/heritage/users'
+import IconParkOutlineDelete from '~icons/icon-park-outline/delete'
+import IconParkOutlineEdit from '~icons/icon-park-outline/edit'
+import IconParkOutlineRefresh from '~icons/icon-park-outline/refresh'
+import IconParkOutlineKey from '~icons/icon-park-outline/key'
+
+// 引用
+const searchFormRef = ref<FormInst>()
+const formRef = ref<FormInst>()
+const formDialogRef = ref()
+const resetPasswordFormRef = ref<FormInst>()
+const resetPasswordDialogRef = ref()
+
+// 数据状态
+const loading = ref(false)
+const tableData = ref<UserAdminVo[]>([])
+const selectedRowKeys = ref<string[]>([])
+
+// 搜索表单
+const searchForm = ref<UserAdminSearchForm>({
+  username: '',
+  nickname: '',
+  phone: '',
+  gender: null,
+  status: null,
+  province: '',
+  city: '',
+})
+
+// 分页配置
+const pagination = ref({
+  page: 1,
+  pageSize: 10,
+  itemCount: 0,
+})
+
+// 表单相关
+const modalTitle = ref('新增用户')
+const isEdit = ref(false)
+const formData = ref<UserAdminBo>({
+  username: '',
+  password: '',
+  nickname: '',
+  phone: '',
+  email: '',
+  gender: undefined,
+  birthday: '',
+  province: '',
+  city: '',
+  status: 1,
+  remark: '',
+})
+
+// 生日（时间戳格式，用于日期选择器）
+const birthdayValue = ref<number | null>(null)
+
+// 监听生日变化，同步到表单数据
+watch(birthdayValue, (newValue) => {
+  if (newValue) {
+    const date = new Date(newValue)
+    formData.value.birthday = date.toISOString().slice(0, 10)
+  }
+  else {
+    formData.value.birthday = ''
+  }
+})
+
+// 重置密码表单
+const resetPasswordForm = ref({
+  id: '',
+  username: '',
+  newPassword: '',
+  confirmPassword: '',
+})
+
+// 下拉选项
+const genderOptions = [
+  { label: '未知', value: 0 },
+  { label: '男', value: 1 },
+  { label: '女', value: 2 },
+]
+
+const statusOptions = [
+  { label: '禁用', value: 0 },
+  { label: '正常', value: 1 },
+]
+
+// 表单验证规则
+const rules: FormRules = {
+  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
+  password: [
+    {
+      required: true,
+      validator: (_rule, value) => {
+        if (!isEdit.value && !value) {
+          return new Error('请输入密码')
+        }
+        return true
+      },
+      trigger: 'blur',
+    },
+  ],
+  phone: [
+    {
+      pattern: /^1[3-9]\d{9}$/,
+      message: '手机号格式不正确',
+      trigger: 'blur',
+    },
+  ],
+  email: [
+    {
+      type: 'email',
+      message: '邮箱格式不正确',
+      trigger: 'blur',
+    },
+  ],
+}
+
+// 重置密码验证规则
+const resetPasswordRules: FormRules = {
+  newPassword: [
+    { required: true, message: '请输入新密码', trigger: 'blur' },
+    { min: 6, message: '密码长度不能少于6位', trigger: 'blur' },
+  ],
+  confirmPassword: [
+    { required: true, message: '请再次输入新密码', trigger: 'blur' },
+    {
+      validator: (_rule, value) => {
+        if (value !== resetPasswordForm.value.newPassword) {
+          return new Error('两次输入的密码不一致')
+        }
+        return true
+      },
+      trigger: 'blur',
+    },
+  ],
+}
+
+// 表格列配置
+const columns: DataTableColumns<UserAdminVo> = [
+  { type: 'selection' },
+  {
+    title: '序号',
+    key: 'index',
+    width: 60,
+    align: 'center',
+    render: (_row, index) => {
+      return (pagination.value.page - 1) * pagination.value.pageSize + index + 1
+    },
+  },
+  {
+    title: '用户名',
+    key: 'username',
+    width: 120,
+    ellipsis: { tooltip: true },
+  },
+  {
+    title: '昵称',
+    key: 'nickname',
+    width: 120,
+    ellipsis: { tooltip: true },
+  },
+  {
+    title: '手机号',
+    key: 'phone',
+    width: 120,
+  },
+  {
+    title: '邮箱',
+    key: 'email',
+    width: 180,
+    ellipsis: { tooltip: true },
+  },
+  {
+    title: '性别',
+    key: 'gender',
+    width: 80,
+    align: 'center',
+    render: (row) => {
+      const genderMap = {
+        0: { type: 'default' as const, text: '未知' },
+        1: { type: 'info' as const, text: '男' },
+        2: { type: 'success' as const, text: '女' },
+      }
+      const config = genderMap[row.gender as keyof typeof genderMap] || { type: 'default' as const, text: '未知' }
+      return h(NTag, {
+        type: config.type,
+        size: 'small',
+      }, { default: () => config.text })
+    },
+  },
+  {
+    title: '省份',
+    key: 'province',
+    width: 100,
+    ellipsis: { tooltip: true },
+  },
+  {
+    title: '城市',
+    key: 'city',
+    width: 100,
+    ellipsis: { tooltip: true },
+  },
+  {
+    title: '用户状态',
+    key: 'status',
+    width: 120,
+    align: 'center',
+    render: (row) => {
+      return h('div', { class: 'flex items-center justify-center' }, [
+        h(NPopconfirm, {
+          onPositiveClick: () => handleToggleStatus(row),
+          negativeText: '取消',
+          positiveText: '确定',
+        }, {
+          default: () => `确定要${row.status === 1 ? '禁用' : '启用'}此用户吗？`,
+          trigger: () => h(NSwitch, {
+            value: row.status === 1,
+            size: 'small',
+            checkedChildren: '正常',
+            uncheckedChildren: '禁用',
+          }),
+        }),
+      ])
+    },
+  },
+  {
+    title: '最后登录时间',
+    key: 'loginTime',
+    width: 180,
+  },
+  {
+    title: '创建时间',
+    key: 'createTime',
+    width: 180,
+  },
+  {
+    title: '操作',
+    key: 'actions',
+    width: 280,
+    align: 'center',
+    fixed: 'right',
+    render: (row) => {
+      const buttons = []
+
+      // 编辑按钮
+      buttons.push(h(NButton, {
+        type: 'primary',
+        size: 'small',
+        class: 'action-btn-primary',
+        onClick: () => handleEdit(row),
+      }, {
+        icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, {
+          default: () => h(IconParkOutlineEdit),
+        }),
+        default: () => '编辑',
+      }))
+
+      // 重置密码按钮
+      buttons.push(h(NButton, {
+        type: 'warning',
+        secondary: true,
+        size: 'small',
+        class: 'action-btn-secondary action-btn-warning',
+        onClick: () => handleResetPassword(row),
+      }, {
+        icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, {
+          default: () => h(IconParkOutlineKey),
+        }),
+        default: () => '重置密码',
+      }))
+
+      // 删除按钮
+      buttons.push(h(NPopconfirm, {
+        onPositiveClick: () => handleDelete(row.id),
+      }, {
+        trigger: () => h(NButton, {
+          type: 'error',
+          secondary: true,
+          size: 'small',
+          class: 'action-btn-secondary action-btn-danger',
+        }, {
+          icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, {
+            default: () => h(IconParkOutlineDelete),
+          }),
+          default: () => '删除',
+        }),
+        default: () => '确定删除此记录吗？',
+      }))
+
+      return h('div', { class: 'flex items-center justify-center gap-2' }, buttons)
+    },
+  },
+]
+
+// 加载表格数据
+async function loadTableData() {
+  try {
+    loading.value = true
+
+    // 过滤掉空值参数
+    const filteredParams = Object.entries(searchForm.value).reduce((acc, [key, value]) => {
+      if (value !== null && value !== undefined && value !== '') {
+        acc[key] = value
+      }
+      return acc
+    }, {} as Record<string, any>)
+
+    const params = {
+      pageNum: pagination.value.page,
+      pageSize: pagination.value.pageSize,
+      ...filteredParams,
+    }
+
+    const { data, isSuccess } = await getUserAdminList(params)
+
+    if (isSuccess && data) {
+      tableData.value = data.records || []
+      pagination.value.itemCount = data.total || 0
+    }
+    else {
+      coiMsgError('加载数据失败')
+    }
+  }
+  catch {
+    coiMsgError('加载数据失败，请检查网络连接')
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+// 搜索
+function handleSearch() {
+  pagination.value.page = 1
+  loadTableData()
+}
+
+// 重置
+async function handleReset() {
+  searchForm.value = {
+    username: '',
+    nickname: '',
+    phone: '',
+    gender: null,
+    status: null,
+    province: '',
+    city: '',
+  }
+  await nextTick()
+  searchFormRef.value?.restoreValidation()
+  pagination.value.page = 1
+  loadTableData()
+}
+
+// 新增
+function handleAdd() {
+  modalTitle.value = '新增用户'
+  isEdit.value = false
+  formData.value = {
+    username: '',
+    password: '',
+    nickname: '',
+    phone: '',
+    email: '',
+    gender: undefined,
+    birthday: '',
+    province: '',
+    city: '',
+    status: 1,
+    remark: '',
+  }
+  birthdayValue.value = null
+  formDialogRef.value?.coiOpen()
+}
+
+// 编辑
+function handleEdit(row: UserAdminVo) {
+  modalTitle.value = '编辑用户'
+  isEdit.value = true
+  formData.value = {
+    id: row.id,
+    username: row.username,
+    password: '',
+    nickname: row.nickname || '',
+    phone: row.phone || '',
+    email: row.email || '',
+    gender: row.gender,
+    birthday: row.birthday || '',
+    province: row.province || '',
+    city: row.city || '',
+    status: row.status,
+    remark: row.remark || '',
+  }
+
+  // 初始化生日
+  if (row.birthday) {
+    birthdayValue.value = new Date(row.birthday).getTime()
+  }
+  else {
+    birthdayValue.value = null
+  }
+
+  formDialogRef.value?.coiOpen()
+}
+
+// 删除
+async function handleDelete(id: string) {
+  try {
+    const { isSuccess } = await deleteUserAdmin(id)
+
+    if (isSuccess) {
+      coiMsgSuccess('删除成功')
+      await loadTableData()
+    }
+    else {
+      coiMsgError('删除失败，请稍后重试')
+    }
+  }
+  catch {
+    coiMsgError('删除失败，请检查网络连接')
+  }
+}
+
+// 批量删除
+async function handleBatchDelete() {
+  if (selectedRowKeys.value.length === 0) {
+    coiMsgWarning('请选择要删除的记录')
+    return
+  }
+
+  try {
+    await coiMsgBox(`确定要删除选中的 ${selectedRowKeys.value.length} 条记录吗？`, '批量删除确认')
+
+    const { isSuccess } = await batchDeleteUserAdmin(selectedRowKeys.value)
+
+    if (isSuccess) {
+      coiMsgSuccess('批量删除成功')
+      selectedRowKeys.value = []
+      await loadTableData()
+    }
+    else {
+      coiMsgError('批量删除失败，请稍后重试')
+    }
+  }
+  catch {
+    // 用户取消操作
+  }
+}
+
+// 切换用户状态
+async function handleToggleStatus(row: UserAdminVo) {
+  const newStatus = row.status === 1 ? 0 : 1
+  const statusText = newStatus === 1 ? '启用' : '禁用'
+
+  try {
+    const { isSuccess } = await changeUserStatus(row.id, newStatus)
+
+    if (isSuccess) {
+      coiMsgSuccess(`${statusText}成功`)
+      await loadTableData()
+    }
+    else {
+      coiMsgError(`${statusText}失败，请稍后重试`)
+    }
+  }
+  catch {
+    coiMsgError(`${statusText}失败，请检查网络连接`)
+  }
+}
+
+// 重置密码
+function handleResetPassword(row: UserAdminVo) {
+  resetPasswordForm.value = {
+    id: row.id,
+    username: row.username,
+    newPassword: '',
+    confirmPassword: '',
+  }
+  resetPasswordDialogRef.value?.coiOpen()
+}
+
+// 提交重置密码
+async function handleResetPasswordSubmit() {
+  if (!resetPasswordFormRef.value)
+    return
+
+  try {
+    await resetPasswordFormRef.value.validate()
+  }
+  catch {
+    coiMsgWarning('验证失败，请检查填写内容')
+    return
+  }
+
+  try {
+    const { isSuccess } = await resetUserPassword(
+      resetPasswordForm.value.id,
+      resetPasswordForm.value.newPassword,
+    )
+
+    if (isSuccess) {
+      coiMsgSuccess('密码重置成功')
+      resetPasswordDialogRef.value?.coiClose()
+    }
+    else {
+      coiMsgError('密码重置失败，请稍后重试')
+    }
+  }
+  catch {
+    coiMsgError('密码重置失败，请检查网络连接')
+  }
+}
+
+// 取消重置密码
+function handleResetPasswordCancel() {
+  resetPasswordDialogRef.value?.coiClose()
+  resetPasswordForm.value = {
+    id: '',
+    username: '',
+    newPassword: '',
+    confirmPassword: '',
+  }
+}
+
+// 行选择变化
+function handleRowSelectionChange(rowKeys: string[]) {
+  selectedRowKeys.value = rowKeys
+}
+
+// 提交表单
+async function handleSubmit() {
+  if (!formRef.value)
+    return
+
+  try {
+    await formRef.value.validate()
+  }
+  catch {
+    coiMsgWarning('验证失败，请检查填写内容')
+    return
+  }
+
+  try {
+    const submitData = { ...formData.value }
+
+    const { isSuccess } = isEdit.value
+      ? await updateUserAdmin(submitData)
+      : await addUserAdmin(submitData)
+
+    if (isSuccess) {
+      coiMsgSuccess(isEdit.value ? '修改成功' : '新增成功')
+      formDialogRef.value?.coiClose()
+      await loadTableData()
+    }
+    else {
+      coiMsgError(isEdit.value ? '修改失败，请稍后重试' : '新增失败，请稍后重试')
+    }
+  }
+  catch (error) {
+    if (error instanceof Error) {
+      coiMsgError(error.message || (isEdit.value ? '修改失败，请检查网络连接' : '新增失败，请检查网络连接'))
+    }
+    else {
+      coiMsgError(isEdit.value ? '修改失败，请检查网络连接' : '新增失败，请检查网络连接')
+    }
+  }
+}
+
+// 取消表单
+function handleCancel() {
+  formDialogRef.value?.coiClose()
+  birthdayValue.value = null
+}
+
+// 分页处理函数
+function handlePageChange(page: number) {
+  pagination.value.page = page
+  loadTableData()
+}
+
+function handlePageSizeChange(pageSize: number) {
+  pagination.value.pageSize = pageSize
+  pagination.value.page = 1
+  loadTableData()
+}
+
+// 判断空状态类型
+function getEmptyType() {
+  if (hasSearchConditions()) {
+    return 'search'
+  }
+  return 'default'
+}
+
+// 判断是否有搜索条件
+function hasSearchConditions() {
+  return !!(
+    searchForm.value.username
+    || searchForm.value.nickname
+    || searchForm.value.phone
+    || searchForm.value.gender !== undefined
+    || searchForm.value.status !== undefined
+    || searchForm.value.province
+    || searchForm.value.city
+  )
+}
+
+// 获取空状态标题
+function getEmptyTitle() {
+  if (hasSearchConditions()) {
+    return '未找到相关用户'
+  }
+  return '暂无用户数据'
+}
+
+// 获取空状态描述
+function getEmptyDescription() {
+  if (hasSearchConditions()) {
+    return '没有找到符合条件的用户，请尝试调整搜索条件'
+  }
+  return '当前还没有用户数据，点击下方按钮新增用户'
+}
+
+// 获取空状态操作按钮文字
+function getEmptyActionText() {
+  if (hasSearchConditions()) {
+    return '重置搜索'
+  }
+  return '新增用户'
+}
+
+// 处理空状态操作
+function handleEmptyAction() {
+  if (hasSearchConditions()) {
+    handleReset()
+  }
+  else {
+    handleAdd()
+  }
+}
+
+// 页面加载时获取数据
+onMounted(() => {
+  loadTableData()
+})
+</script>
+
+<style scoped>
+/* 页面容器样式 */
+.user-management {
+  height: 100vh;
+  overflow: hidden;
+}
+
+/* 弹框表单容器样式 */
+.dialog-form-container {
+  max-height: 70vh;
+  overflow-y: auto;
+}
+
+/* 弹框表单容器滚动条样式 */
+.dialog-form-container::-webkit-scrollbar {
+  width: 6px;
+}
+
+.dialog-form-container::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
+}
+
+.dialog-form-container::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+.dialog-form-container::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+/* 搜索表单样式 */
+.search-form :deep(.n-form-item) {
+  margin-bottom: 4px !important;
+}
+
+.search-form :deep(.n-form-item-label) {
+  padding-right: 8px !important;
+}
+
+/* 表格包裹器样式 */
+.table-wrapper {
+  padding: 0 16px 16px 16px;
+}
+
+.table-wrapper :deep(.n-data-table) {
+  overflow-x: auto;
+}
+
+.table-wrapper :deep(.n-data-table-wrapper) {
+  overflow: visible;
+}
+
+/* 自定义滚动条样式 */
+.table-wrapper {
+  min-height: 0;
+}
+
+.table-wrapper::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.table-wrapper::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+.table-wrapper::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+.table-wrapper::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+.table-wrapper::-webkit-scrollbar-corner {
+  background: #f1f1f1;
+}
+
+/* 表格滚动条样式 */
+.custom-table :deep(.n-data-table-base-table) {
+  overflow: auto;
+}
+
+.custom-table :deep(.n-data-table-base-table)::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.custom-table :deep(.n-data-table-base-table)::-webkit-scrollbar-track {
+  background: #f8f9fa;
+  border-radius: 3px;
+}
+
+.custom-table :deep(.n-data-table-base-table)::-webkit-scrollbar-thumb {
+  background: #dee2e6;
+  border-radius: 3px;
+}
+
+.custom-table :deep(.n-data-table-base-table)::-webkit-scrollbar-thumb:hover {
+  background: #adb5bd;
+}
+
+/* 表格操作按钮样式 */
+.action-btn-primary {
+  transition: all 0.3s ease;
+}
+
+.action-btn-secondary {
+  transition: all 0.3s ease;
+}
+
+.action-btn-danger {
+  transition: all 0.3s ease;
+}
+
+.action-btn-warning {
+  transition: all 0.3s ease;
+}
+
+/* 紧凑表单样式 */
+.compact-form :deep(.n-form-item) {
+  margin-bottom: 8px !important;
+}
+
+.compact-form :deep(.n-form-item .n-form-item-feedback-wrapper) {
+  min-height: 0 !important;
+  padding-top: 2px !important;
+}
+
+.compact-form :deep(.n-form-item .n-form-item-label) {
+  padding-bottom: 2px !important;
+}
+
+.compact-form :deep(.n-input),
+.compact-form :deep(.n-input-number),
+.compact-form :deep(.n-select),
+.compact-form :deep(.n-cascader),
+.compact-form :deep(.n-radio-group) {
+  font-size: 14px !important;
+}
+
+.compact-form :deep(.n-input .n-input__input-el),
+.compact-form :deep(.n-input-number .n-input__input-el) {
+  padding: 2px 1px !important;
+  min-height: 32px !important;
+}
+
+.compact-form :deep(.n-select .n-base-selection) {
+  min-height: 32px !important;
+  padding: 2px 1px !important;
+}
+
+.compact-form :deep(.n-select .n-base-selection .n-base-selection-label) {
+  padding: 0 6px !important;
+  min-height: 30px !important;
+  line-height: 30px !important;
+}
+
+.compact-form :deep(.n-cascader .n-cascader-trigger) {
+  min-height: 32px !important;
+  padding: 2px 1px !important;
+}
+
+/* 自定义表格样式 */
+.custom-table :deep(.n-data-table-td) {
+  padding: 7px 12px;
+  font-size: 14px;
+}
+
+.custom-table :deep(.n-data-table-th) {
+  padding: 9px 12px;
+  background-color: #fafafa;
+  font-weight: normal;
+  font-size: 14px;
+  color: #262626;
+}
+
+.custom-table :deep(.n-data-table-tr:hover .n-data-table-td) {
+  background-color: #f8faff;
+}
+</style>