iFileProxyAdmin/src/views/UserManagement.vue

<template>
  <div class="user-management">
    <el-card class="user-card">
      <template #header>
        <div class="card-header">
          <div class="header-left">
            <span class="title">用户列表</span>
            <el-tag class="user-count" type="info" effect="plain">
              共 {{ total }} 条
            </el-tag>
          </div>
          <div class="header-right">
            <el-input
              v-model="searchQuery"
              placeholder="搜索用户..."
              class="search-input"
              clearable
              @clear="handleSearch">
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
            <el-button type="primary" @click="showAddUserDialog">
              <el-icon><Plus /></el-icon>添加用户
            </el-button>
          </div>
        </div>
      </template>
      
      <el-table 
        v-loading="loading"
        :data="filteredUsers" 
        style="width: 100%"
        :header-cell-style="{ background: '#f5f7fa' }"
        border>
        <el-table-column prop="username" label="用户名" width="150" />
        <el-table-column prop="nickname" label="昵称" width="150" />
        <el-table-column prop="lastLoginIP" label="最后登录IP" width="140" />
        <el-table-column prop="lastLoginTime" label="最后登录时间" width="180">
          <template #default="scope">
            {{ formatDateTime(scope.row.lastLoginTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180">
          <template #default="scope">
            {{ formatDateTime(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="mask" label="权限" width="120">
          <template #default="scope">
            <el-tag :type="getMaskType(scope.row.mask)">
              {{ getMaskLabel(scope.row.mask) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column 
          label="操作" 
          :width="isMobile ? '80' : '300'"
          fixed="right"
          class-name="operation-column">
          <template #default="scope">
            <el-button 
              link
              type="primary"
              @click="handleUpdateMask(scope.row)"
              :disabled="scope.row.mask === 2">
              <el-icon><Edit /></el-icon>修改权限
            </el-button>
            <el-button 
              link
              type="primary"
              @click="handleUpdateNickname(scope.row)"
              :disabled="scope.row.mask === 2">
              <el-icon><EditPen /></el-icon>修改昵称
            </el-button>
            <el-button 
              link
              type="warning"
              @click="handleResetPassword(scope.row)"
              :disabled="scope.row.mask === 2">
              <el-icon><Key /></el-icon>重置密码
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        />
      </div>
    </el-card>

    <!-- 修改权限对话框 -->
    <el-dialog
      v-model="maskDialogVisible"
      title="修改用户权限"
      width="400px">
      <el-form :model="maskForm" label-width="80px">
        <el-form-item label="权限级别">
          <el-select v-model="maskForm.newMask">
            <el-option :value="0" label="普通用户" />
            <el-option :value="1" label="管理员" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="maskDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitUpdateMask" :loading="updating">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 添加重置密码对话框 -->
    <el-dialog
      v-model="resetPasswordDialogVisible"
      title="重置用户密码"
      width="400px">
      <el-form 
        ref="resetPasswordFormRef"
        :model="resetPasswordForm"
        :rules="resetPasswordRules"
        label-width="80px">
        <el-form-item label="新密码" prop="newPassword">
          <el-input 
            v-model="resetPasswordForm.newPassword"
            type="password"
            show-password
            placeholder="请输入新密码" />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input 
            v-model="resetPasswordForm.confirmPassword"
            type="password"
            show-password
            placeholder="请再次输入新密码" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="resetPasswordDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitResetPassword" :loading="updating">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 添加修改昵称对话框 -->
    <el-dialog
      v-model="nicknameDialogVisible"
      title="修改用户昵称"
      width="400px">
      <el-form 
        ref="nicknameFormRef"
        :model="nicknameForm"
        :rules="nicknameRules"
        label-width="80px">
        <el-form-item label="新昵称" prop="newNickname">
          <el-input 
            v-model="nicknameForm.newNickname"
            placeholder="请输入新昵称" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="nicknameDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitUpdateNickname" :loading="updating">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 修改添加用户对话框 -->
    <el-dialog
      v-model="addUserDialogVisible"
      title="添加用户"
      width="500px"
      v-loading="configLoading">
      <el-form
        ref="addUserFormRef"
        :model="addUserForm"
        :rules="addUserRules"
        label-width="80px">
        <el-form-item label="用户名" prop="username">
          <el-input 
            v-model="addUserForm.username"
            placeholder="请输入用户名" />
          <div class="form-tip">{{ registerConfig.username?.description }}</div>
        </el-form-item>

        <el-form-item label="昵称" prop="nickname">
          <el-input 
            v-model="addUserForm.nickname"
            placeholder="请输入昵称" />
          <div class="form-tip">{{ registerConfig.nickname?.description }}</div>
        </el-form-item>

        <el-form-item label="邮箱" prop="email">
          <el-input 
            v-model="addUserForm.email"
            placeholder="请输入邮箱" />
          <div class="form-tip">{{ registerConfig.email?.description }}</div>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input 
            v-model="addUserForm.password"
            type="password"
            show-password
            placeholder="请输入密码" />
          <div class="form-tip">{{ registerConfig.password?.description }}</div>
        </el-form-item>

        <el-form-item label="权限" prop="mask">
          <el-select v-model="addUserForm.mask" placeholder="请选择权限">
            <el-option :value="0" label="普通用户" />
            <el-option :value="1" label="管理员" />
            <el-option 
              v-if="isSuperAdmin"
              :value="2" 
              label="超级管理员" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addUserDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleAddUser" :loading="adding">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Edit, EditPen, Key, Plus } from '@element-plus/icons-vue'
import { UserAPI } from '../api/user'

const loading = ref(false)
const updating = ref(false)
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)
const users = ref([])
const searchQuery = ref('')

// 权限对话框相关
const maskDialogVisible = ref(false)
const currentUser = ref(null)
const maskForm = ref({
  newMask: 0
})

// 重置密码相关
const resetPasswordDialogVisible = ref(false)
const resetPasswordFormRef = ref(null)
const resetPasswordForm = ref({
  newPassword: '',
  confirmPassword: ''
})

// 修改昵称相关
const nicknameDialogVisible = ref(false)
const nicknameFormRef = ref(null)
const nicknameForm = ref({
  newNickname: ''
})

const nicknameRules = {
  newNickname: [
    { required: true, message: '请输入新昵称', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ]
}

const validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入新密码'))
  } else {
    if (resetPasswordForm.value.confirmPassword !== '') {
      resetPasswordFormRef.value.validateField('confirmPassword')
    }
    callback()
  }
}

const validatePass2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入新密码'))
  } else if (value !== resetPasswordForm.value.newPassword) {
    callback(new Error('两次输入密码不一致!'))
  } else {
    callback()
  }
}

const resetPasswordRules = {
  newPassword: [
    { validator: validatePass, trigger: 'blur' },
    { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
  ],
  confirmPassword: [
    { validator: validatePass2, trigger: 'blur' }
  ]
}

// 过滤用户列表
const filteredUsers = computed(() => {
  if (!searchQuery.value) return users.value
  
  const query = searchQuery.value.toLowerCase()
  return users.value.filter(user => {
    return (
      user.username?.toLowerCase().includes(query) ||
      user.nickname?.toLowerCase().includes(query) ||
      user.lastLoginIP?.includes(query)
    )
  })
})

// 获取用户列表
const fetchUsers = async () => {
  loading.value = true
  try {
    const response = await UserAPI.getUserList({
      page: currentPage.value,
      pageSize: pageSize.value
    })
    
    if (response.data) {
      users.value = response.data.data || []
      total.value = response.data.total || 0
    }
  } catch (error) {
    console.error('获取用户列表失败:', error)
  } finally {
    loading.value = false
  }
}

// 处理搜索
const handleSearch = () => {
  console.log('Searching for:', searchQuery.value)
}

// 处理页码变化
const handlePageChange = (page) => {
  currentPage.value = page
  fetchUsers()
}

// 处理每页数量变化
const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
  fetchUsers()
}

// 格式化时间
const formatDateTime = (dateStr) => {
  if (!dateStr) return '-'
  return new Date(dateStr).toLocaleString()
}

// 获取权限标签类型
const getMaskType = (mask) => {
  switch (mask) {
    case 2:
      return 'danger'
    case 1:
      return 'warning'
    default:
      return 'info'
  }
}

// 获取权限标签文本
const getMaskLabel = (mask) => {
  switch (mask) {
    case 2:
      return '超级管理员'
    case 1:
      return '管理员'
    default:
      return '普通用户'
  }
}

// 处理修改权限
const handleUpdateMask = (user) => {
  currentUser.value = user
  maskForm.value.newMask = user.mask
  maskDialogVisible.value = true
}

// 提交权限修改
const submitUpdateMask = async () => {
  if (!currentUser.value) return
  
  updating.value = true
  try {
    const response = await UserAPI.updateUserMask(
      currentUser.value.userId,
      maskForm.value.newMask
    )
    
    if (response.retcode === 0) {
      ElMessage.success('权限修改成功')
      maskDialogVisible.value = false
      fetchUsers()
    }
  } catch (error) {
    console.error('修改权限失败:', error)
  } finally {
    updating.value = false
  }
}

// 处理重置密码
const handleResetPassword = (user) => {
  currentUser.value = user
  resetPasswordForm.value = {
    newPassword: '',
    confirmPassword: ''
  }
  resetPasswordDialogVisible.value = true
}

// 提交重置密码
const submitResetPassword = async () => {
  if (!resetPasswordFormRef.value || !currentUser.value) return
  
  await resetPasswordFormRef.value.validate(async (valid) => {
    if (valid) {
      ElMessageBox.confirm(
        `确定要重置用户 ${currentUser.value.nickname}(${currentUser.value.username}) 的密码吗？`,
        '警告',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(async () => {
        updating.value = true
        try {
          const response = await UserAPI.resetPassword(
            currentUser.value.userId,
            resetPasswordForm.value.newPassword
          )
          if (response.retcode === 0) {
            ElMessage.success('密码重置成功')
            resetPasswordDialogVisible.value = false
          }
        } catch (error) {
          console.error('重置密码失败:', error)
        } finally {
          updating.value = false
        }
      }).catch(() => {
        // 用户取消操作
      })
    }
  })
}

// 处理修改昵称
const handleUpdateNickname = (user) => {
  currentUser.value = user
  nicknameForm.value.newNickname = user.nickname
  nicknameDialogVisible.value = true
}

// 提交昵称修改
const submitUpdateNickname = async () => {
  if (!nicknameFormRef.value || !currentUser.value) return
  
  await nicknameFormRef.value.validate(async (valid) => {
    if (valid) {
      ElMessageBox.confirm(
        `确定要修改用户 ${currentUser.value.username} 的昵称吗？`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }
      ).then(async () => {
        updating.value = true
        try {
          const response = await UserAPI.updateUserNickname(
            currentUser.value.userId,
            nicknameForm.value.newNickname
          )
          if (response.retcode === 0) {
            ElMessage.success('昵称修改成功')
            nicknameDialogVisible.value = false
            fetchUsers()  // 刷新用户列表
          }
        } catch (error) {
          console.error('修改昵称失败:', error)
        } finally {
          updating.value = false
        }
      }).catch(() => {
        // 用户取消操作
      })
    }
  })
}

// 添加移动端检测
const isMobile = computed(() => {
  return window.innerWidth <= 768
})

// 监听窗口大小变化
onMounted(() => {
  fetchUsers()
  window.addEventListener('resize', () => {
    isMobile.value = window.innerWidth <= 768
  })
})

onUnmounted(() => {
  window.removeEventListener('resize', () => {
    isMobile.value = window.innerWidth <= 768
  })
})

// 添加用户相关的状态
const addUserDialogVisible = ref(false)
const addUserFormRef = ref(null)
const adding = ref(false)

const addUserForm = ref({
  username: '',
  nickname: '',
  email: '',
  password: '',
  mask: 0
})

// 邮箱验证规则
const validateEmail = (rule, value, callback) => {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  if (!value) {
    callback(new Error('请输入电子邮件'))
  } else if (!emailRegex.test(value)) {
    callback(new Error('请输入有效的电子邮件地址'))
  } else {
    callback()
  }
}

// 添加注册配置
const registerConfig = ref({})
const configLoading = ref(false)

// 获取注册配置
const fetchRegisterConfig = async () => {
  configLoading.value = true
  try {
    const response = await UserAPI.getRegisterConfig()
    if (response.retcode === 0) {
      registerConfig.value = response.data
    }
  } catch (error) {
    console.error('获取注册配置失败:', error)
  } finally {
    configLoading.value = false
  }
}

// 动态生成验证规则
const addUserRules = computed(() => {
  const config = registerConfig.value
  if (!config.username) return {}
  
  return {
    username: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
      { min: config.username.minLength, max: config.username.maxLength, 
        message: `长度在 ${config.username.minLength} 到 ${config.username.maxLength} 个字符`, 
        trigger: 'blur' },
      { pattern: new RegExp(config.username.pattern), 
        message: config.username.description, 
        trigger: 'blur' }
    ],
    nickname: [
      { required: true, message: '请输入昵称', trigger: 'blur' },
      { min: config.nickname.minLength, max: config.nickname.maxLength, 
        message: `长度在 ${config.nickname.minLength} 到 ${config.nickname.maxLength} 个字符`, 
        trigger: 'blur' }
    ],
    email: [
      { required: true, message: '请输入电子邮件', trigger: 'blur' },
      { pattern: new RegExp(config.email.pattern), 
        message: config.email.description, 
        trigger: 'blur' }
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' },
      { min: config.password.minLength, max: config.password.maxLength, 
        message: `密码长度在 ${config.password.minLength} 到 ${config.password.maxLength} 位之间`, 
        trigger: 'blur' },
      {
        validator: (rule, value, callback) => {
          if (!value) {
            callback()
            return
          }
          
          const errors = []
          if (config.password.requireNumber && !/\d/.test(value)) {
            errors.push('需要包含数字')
          }
          if (config.password.requireLowercase && !/[a-z]/.test(value)) {
            errors.push('需要包含小写字母')
          }
          if (config.password.requireUppercase && !/[A-Z]/.test(value)) {
            errors.push('需要包含大写字母')
          }
          if (config.password.requireSpecial && !/[!@#$%^&*]/.test(value)) {
            errors.push('需要包含特殊字符')
          }
          
          if (errors.length) {
            callback(new Error('密码' + errors.join('、')))
          } else {
            callback()
          }
        },
        trigger: 'blur'
      }
    ],
    mask: [
      { required: true, message: '请选择权限', trigger: 'change' }
    ]
  }
})

// 修改添加用户对话框
const showAddUserDialog = () => {
  addUserForm.value = {
    username: '',
    nickname: '',
    email: '',
    password: '',
    mask: 0
  }
  // 确保配置已加载
  if (!registerConfig.value.username) {
    fetchRegisterConfig()
  }
  addUserDialogVisible.value = true
}

// 在组件挂载时获取配置
onMounted(() => {
  fetchRegisterConfig()
})

// 处理添加用户
const handleAddUser = async () => {
  if (!addUserFormRef.value) return
  
  await addUserFormRef.value.validate(async (valid) => {
    if (valid) {
      adding.value = true
      try {
        const response = await UserAPI.addUser(addUserForm.value)
        if (response.retcode === 0) {
          ElMessage.success('添加用户成功')
          addUserDialogVisible.value = false
          fetchUsers()  // 刷新用户列表
        }
      } catch (error) {
        console.error('添加用户失败:', error)
      } finally {
        adding.value = false
      }
    }
  })
}

// 判断是否是超级管理员
const userInfo = computed(() => {
  try {
    return JSON.parse(localStorage.getItem('userInfo'))
  } catch {
    return null
  }
})

const isSuperAdmin = computed(() => userInfo.value?.mask === 2)
</script>

<style scoped>
.user-management {
  padding: 20px;
}

.user-card {
  background: #fff;
  border-radius: 4px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  display: flex;
  align-items: center;
}

.title {
  font-size: 16px;
  font-weight: 500;
  margin-right: 12px;
}

.user-count {
  font-size: 13px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.search-input {
  width: 240px;
}

:deep(.el-button) {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

:deep(.el-table) {
  margin-top: 20px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

:deep(.el-form-item__label) {
  font-weight: 500;
}

/* 添加响应式样式 */
@media screen and (max-width: 768px) {
  .user-management {
    padding: 10px;
  }

  .card-header {
    flex-direction: column;
    gap: 12px;
  }

  .header-right {
    width: 100%;
  }

  .search-input {
    width: 100%;
  }

  /* 调整表格在移动端的显示 */
  :deep(.el-table) {
    font-size: 12px;
  }

  :deep(.el-table .cell) {
    padding: 8px;
  }

  /* 调整操作按钮布局 */
  :deep(.operation-column) {
    .cell {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: 4px !important;
      
      .el-button {
        width: 100%;
        justify-content: center;
        padding: 4px 0;
        margin: 0;
      }
    }
  }

  /* 调整对话框宽度 */
  :deep(.el-dialog) {
    width: 90% !important;
    margin: 0 auto;
  }

  /* 调整分页器样式 */
  .pagination-container {
    .el-pagination {
      justify-content: center;
      flex-wrap: wrap;
      padding: 8px;
      
      .el-pagination__total,
      .el-pagination__sizes,
      .el-pagination__jump {
        display: none;
      }
    }
  }
}

/* 优化表格在不同屏幕尺寸下的显示 */
:deep(.el-table) {
  @media screen and (max-width: 768px) {
    /* 用户名列宽度调整 */
    .el-table-column--username {
      min-width: 100px;
      max-width: 120px;
    }
    
    /* 权限列固定宽度 */
    .el-table-column--mask {
      width: 80px !important;
    }
    
    /* 操作列自适应 */
    .el-table-column--operation {
      width: auto !important;
      min-width: 70px;
    }
  }
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .header-right {
    flex-direction: column;
    gap: 8px;
    width: 100%;
    
    .el-button {
      width: 100%;
      justify-content: center;
    }
  }
}

.form-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
  line-height: 1.4;
}
</style>