# 实现用户编辑和状态管理功能

## 1. 修改编辑弹窗功能

### 1.1 调整表单字段

* 保留用户昵称（nickname）字段，移除其他不必要的字段

* 确保表单回显用户当前昵称

### 1.2 更新验证规则

* 只保留昵称字段的验证规则

* 确保昵称字段必填

### 1.3 修改提交逻辑

* 调用 `updateUserName` 方法（index.js#L43）修改用户昵称

* 成功后刷新用户列表

* 添加错误处理

## 2. 实现封禁/解封功能

### 2.1 修改封禁/解封按钮逻辑

* 根据用户状态（active/disable）展示不同的按钮

* 封禁按钮：当用户状态为 active 时显示

* 解封按钮：当用户状态为 disable 时显示

### 2.2 更新按钮事件

* 调用 `updateUserStatus` 方法（index.js#L31）修改用户状态

* 封禁时：将状态从 active 改为 disable

* 解封时：将状态从 disable 改为 active

* 成功后刷新用户列表

* 添加错误处理

## 3. 代码修改点

### 3.1 修改表单模板

```vue
<!-- 只保留昵称字段 -->
el-form-item :label="t('admin.users.username')" prop="nickname">
  <el-input v-model="form.nickname" />
</el-form-item>
```

### 3.2 更新验证规则

```javascript
const rules = {
  nickname: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
}
```

### 3.3 修改 handleEdit 方法

```javascript
const handleEdit = (row) => {
  isEditing.value = true
  // 只复制需要的字段
  Object.assign(form, { id: row.id, nickname: row.nickname })
  dialogVisible.value = true
}
```

### 3.4 修改 handleSubmit 方法

```javascript
const handleSubmit = async () => {
  if (!formRef.value) return
  
  formRef.value.validate(async (valid) => {
    if (valid) {
      if (isEditing.value) {
        // 编辑用户 - 调用API
        try {
          await adminOrders.updateUserName({
            id: form.id,
            nickname: form.nickname
          })
          ElMessage.success('用户昵称更新成功')
          // 刷新列表
          refresh()
        } catch (error) {
          ElMessage.error('用户昵称更新失败')
          console.error('更新用户昵称失败:', error)
        }
      }
      dialogVisible.value = false
    }
  })
}
```

### 3.5 修改封禁/解封按钮逻辑

```vue
<el-button 
  v-if="row.status === 'active'" 
  size="small" 
  type="danger" 
  @click="handleBan(row)"
>
  {{ t('admin.users.ban') }}
</el-button>
<el-button 
  v-else-if="row.status === 'disable'" 
  size="small" 
  type="success" 
  @click="handleUnban(row)"
>
  {{ t('admin.users.unban') }}
</el-button>
<el-button 
  v-else 
  size="small" 
  type="success" 
  @click="handleUnban(row)"
>
  {{ t('admin.users.unban') }}
</el-button>
```

### 3.6 更新 handleBan 和 handleUnban 方法

```javascript
const handleBan = async (row) => {
  try {
    await ElMessageBox.confirm(
      `确定要封禁用户 "${row.nickname}" 吗？`,
      '封禁用户',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    // 调用API修改状态
    await adminOrders.updateUserStatus({
      id: row.id,
      status: 'disable'
    })
    
    ElMessage.success('用户封禁成功')
    // 刷新列表
    refresh()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('用户封禁失败')
      console.error('封禁用户失败:', error)
    }
  }
}

const handleUnban = async (row) => {
  try {
    await ElMessageBox.confirm(
      `确定要解封用户 "${row.nickname}" 吗？`,
      '解封用户',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success'
      }
    )
    
    // 调用API修改状态
    await adminOrders.updateUserStatus({
      id: row.id,
      status: 'active'
    })
    
    ElMessage.success('用户解封成功')
    // 刷新列表
    refresh()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('用户解封失败')
      console.error('解封用户失败:', error)
    }
  }
}
```

## 4. 测试要点

1. 编辑用户昵称：

   * 点击编辑按钮，弹窗显示当前昵称

   * 修改昵称，点击保存

   * 调用API成功后，列表刷新，显示新昵称

2. 封禁用户：

   * 对 active 状态的用户点击封禁

   * 调用API成功后，用户状态变为 disable

   * 按钮变为解封

3. 解封用户：

   * 对 disable 状态的用户点击解封

   * 调用API成功后，用户状态变为 active

   * 按钮变为封禁

4. 错误处理：

   * 测试API调用失败情况

   * 确保错误提示正确显示

   * 列表不会错误更新