# 身份激活页面表单可编辑功能

## 功能概述

为身份激活页面添加可编辑表单功能，在保留企微自动获取信息的基础上，允许用户修改和完善个人信息，实现"自动获取 + 可编辑"的最佳用户体验。

## 实现日期

2025年11月3日

## 功能特点

### ✨ 核心特性

1. **自动填充** - 从企业微信自动获取用户信息并预填充到表单
2. **可编辑** - 用户可以修改任何预填充的信息
3. **表单验证** - 必填字段校验，确保数据完整性
4. **美观UI** - 现代化表单设计，符合整体视觉风格

### 📋 可编辑字段

| 字段名 | 类型 | 必填 | 说明 |
|--------|------|------|------|
| 真实姓名 | 文本输入 | ✅ | 从企微获取，可修改 |
| 所属部门 | 下拉选择 | ✅ | 7个预设部门可选 |
| 职位角色 | 下拉选择 | ✅ | 4个角色级别可选 |
| 手机号 | 电话输入 | ❌ | 从企微获取，可修改 |
| 员工ID | 只读显示 | - | 企微userid，不可编辑 |

## 修改的文件

### 1. `profile-activation.component.ts`

#### 新增导入
```typescript
import { FormsModule } from '@angular/forms';
```

#### 新增属性

**表单数据模型**（第52-58行）：
```typescript
formData = {
  realname: '',
  department: '',
  roleName: '组员',
  mobile: ''
};
```

**部门列表**（第60-69行）：
```typescript
departmentList = [
  '设计部',
  '建模部',
  '渲染部',
  '软装部',
  '后期部',
  '综合部',
  '管理部'
];
```

**角色列表**（第71-77行）：
```typescript
roleList = [
  '组员',
  '组长',
  '主管',
  '经理'
];
```

#### 新增方法

**`populateFormData()`**（第160-189行）：
- 功能：自动填充表单数据
- 数据来源优先级：
  1. Profile记录（已激活用户）
  2. 企微userInfo（新用户）
- 智能处理部门信息的多种格式（数组、对象、字符串）

```typescript
private populateFormData(): void {
  // 优先从Profile获取，其次从企微userInfo获取
  this.formData.realname = this.profile?.get('realname') || 
                           this.profile?.get('name') || 
                           this.userInfo?.name || '';
  
  this.formData.mobile = this.profile?.get('mobile') || 
                         this.userInfo?.mobile || '';
  
  this.formData.roleName = this.profile?.get('roleName') || '组员';
  
  // 处理部门信息（支持多种格式）
  // ... 详细逻辑见代码
}
```

#### 修改方法

**`initAuth()`**（第122、138行）：
- 在测试模式和生产模式下都调用 `populateFormData()`
- 确保表单自动填充

**`confirmActivation()`**（第234-248行）：
- 添加表单验证逻辑
- 验证真实姓名、部门、角色为必填

**`confirmActivation()`**（第257-271行）：
- 保存用户编辑后的表单数据到Profile
- 同时更新 `name` 和 `realname` 字段
- 同时更新 `department` 和 `departmentName` 字段

```typescript
// 保存用户编辑的信息
this.profile.set('realname', this.formData.realname);
this.profile.set('name', this.formData.realname);
this.profile.set('department', this.formData.department);
this.profile.set('departmentName', this.formData.department);
this.profile.set('roleName', this.formData.roleName);
this.profile.set('mobile', this.formData.mobile);
```

### 2. `profile-activation.component.html`

#### 表单结构（第45-108行）

替换原来的只读信息列表为可编辑表单：

```html
<div class="form-container">
  <!-- 真实姓名 -->
  <div class="form-group">
    <label class="form-label">
      <span class="label-text">真实姓名</span>
      <span class="required">*</span>
    </label>
    <input 
      type="text" 
      class="form-input" 
      [(ngModel)]="formData.realname"
      placeholder="请输入您的真实姓名"
      required />
  </div>

  <!-- 所属部门 -->
  <div class="form-group">
    <label class="form-label">
      <span class="label-text">所属部门</span>
      <span class="required">*</span>
    </label>
    <select 
      class="form-select" 
      [(ngModel)]="formData.department"
      required>
      <option value="">请选择部门</option>
      @for (dept of departmentList; track dept) {
        <option [value]="dept">{{ dept }}</option>
      }
    </select>
  </div>

  <!-- 职位角色 -->
  <div class="form-group">
    <label class="form-label">
      <span class="label-text">职位角色</span>
      <span class="required">*</span>
    </label>
    <select 
      class="form-select" 
      [(ngModel)]="formData.roleName"
      required>
      @for (role of roleList; track role) {
        <option [value]="role">{{ role }}</option>
      }
    </select>
  </div>

  <!-- 手机号 -->
  <div class="form-group">
    <label class="form-label">
      <span class="label-text">手机号</span>
    </label>
    <input 
      type="tel" 
      class="form-input" 
      [(ngModel)]="formData.mobile"
      placeholder="请输入手机号" />
  </div>

  <!-- 员工ID（只读） -->
  <div class="form-group readonly">
    <label class="form-label">
      <span class="label-text">员工ID</span>
    </label>
    <div class="readonly-value">{{ getUserId() }}</div>
  </div>
</div>
```

#### UI绑定更新

**用户名显示**（第41行）：
```html
<h2 class="user-name">{{ formData.realname || '请填写姓名' }}</h2>
```

**角色显示**（第42行）：
```html
<p class="user-role">{{ formData.roleName }}</p>
```

### 3. `profile-activation.component.scss`

#### 新增样式（第615-698行）

**表单容器**：
```scss
.form-container {
  padding: 24px 0;

  .form-group {
    margin-bottom: 20px;
  }
}
```

**表单标签**：
```scss
.form-label {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #333;

  .required {
    color: #f56c6c;  // 红色必填标记
    margin-left: 4px;
  }
}
```

**输入框和下拉框**：
```scss
.form-input,
.form-select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  transition: all 0.3s ease;

  &:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  }
}
```

**下拉框箭头图标**：
```scss
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,.."); // SVG箭头
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}
```

**只读字段**：
```scss
&.readonly {
  .readonly-value {
    padding: 12px 16px;
    background: #f5f5f5;
    border-radius: 8px;
    color: #666;
  }
}
```

#### 响应式优化（第605-612行）

```scss
@media (max-width: 640px) {
  .form-container {
    .form-input,
    .form-select {
      font-size: 16px; // 防止iOS自动缩放
    }
  }
}
```

## 数据流程

### 1. 初始化流程

```
用户访问页面
    ↓
initAuth() - 初始化企微认证
    ↓
获取企微用户信息 (userInfo)
    ↓
checkActivationStatus() - 检查Profile
    ↓
populateFormData() - 自动填充表单
    ↓
显示可编辑表单
```

### 2. 提交流程

```
用户编辑表单
    ↓
点击"确认身份"按钮
    ↓
表单验证（必填字段）
    ↓
confirmActivation()
    ↓
创建/更新 Profile 记录
    ↓
保存 formData 到 Profile
    ↓
设置 isActivated = true
    ↓
跳转到激活成功页面
```

## 部门列表配置

当前支持的部门：

1. **设计部** - 主要设计工作
2. **建模部** - 3D建模
3. **渲染部** - 渲染工作
4. **软装部** - 软装设计
5. **后期部** - 后期处理
6. **综合部** - 综合工作
7. **管理部** - 管理岗位

**如需修改部门列表**：编辑 `profile-activation.component.ts` 第60-69行的 `departmentList` 数组。

## 角色列表配置

当前支持的角色：

1. **组员** - 普通设计师
2. **组长** - 小组负责人
3. **主管** - 部门主管
4. **经理** - 部门经理

**如需修改角色列表**：编辑 `profile-activation.component.ts` 第71-77行的 `roleList` 数组。

## 表单验证规则

### 必填字段

- ✅ **真实姓名**：不能为空
- ✅ **所属部门**：必须选择
- ✅ **职位角色**：必须选择

### 可选字段

- ⭕ **手机号**：可以为空，如果填写则自动保存

### 验证提示

验证失败时弹出 `alert` 提示用户：
- "请填写您的真实姓名"
- "请选择您的所属部门"
- "请选择您的职位角色"

## 用户体验优化

### 1. 自动填充
- 从企微获取的信息自动填入表单
- 减少用户输入工作量
- 提高激活流程效率

### 2. 智能处理
- 支持部门信息的多种格式（数组、对象、字符串）
- 优先使用Profile中的数据（已激活用户）
- 降级使用企微数据（新用户）

### 3. 视觉反馈
- 必填字段红色 `*` 标记
- 输入框聚焦时紫色高亮
- 下拉框自定义样式箭头
- 只读字段灰色背景区分

### 4. 移动端优化
- 输入框字体大小16px（防止iOS自动缩放）
- 圆角8px，触控友好
- 合适的padding保证点击区域

## 测试场景

### 场景1：新用户首次激活
1. 访问激活页面（测试URL：`/wxwork/test/activation`）
2. 看到表单已自动填充企微信息
3. 修改姓名为"李设计师"
4. 选择部门"设计部"
5. 选择角色"组员"
6. 点击"确认身份"
7. ✅ 激活成功，信息已保存

### 场景2：已激活用户重新访问
1. 用户之前已激活
2. 表单显示之前保存的信息
3. 用户可以修改信息
4. ✅ 显示"激活成功"页面

### 场景3：表单验证
1. 清空姓名字段
2. 点击"确认身份"
3. ✅ 弹出提示"请填写您的真实姓名"
4. 不选择部门
5. ✅ 弹出提示"请选择您的所属部门"

### 场景4：部门选择
1. 点击部门下拉框
2. ✅ 看到7个部门选项
3. 选择"渲染部"
4. ✅ 下拉框显示"渲染部"

### 场景5：手机号修改
1. 企微自动填充手机号"13800138000"
2. 修改为"13900139000"
3. 点击"确认身份"
4. ✅ 新手机号保存到Profile

## 数据库字段映射

| 表单字段 | Profile字段1 | Profile字段2 | 说明 |
|---------|-------------|-------------|------|
| realname | `realname` | `name` | 真实姓名，同时更新两个字段 |
| department | `department` | `departmentName` | 部门，同时更新两个字段 |
| roleName | `roleName` | - | 角色/职位 |
| mobile | `mobile` | - | 手机号 |

## 后续优化建议

### 1. 从数据库动态加载部门列表
```typescript
async loadDepartments() {
  const Parse = FmodeParse.with('nova');
  const query = new Parse.Query('Department');
  const departments = await query.find();
  this.departmentList = departments.map(d => d.get('name'));
}
```

### 2. 添加手机号格式验证
```typescript
validateMobile(mobile: string): boolean {
  return /^1[3-9]\d{9}$/.test(mobile);
}
```

### 3. 添加头像上传功能
```html
<div class="form-group">
  <label>头像</label>
  <input type="file" accept="image/*" (change)="onAvatarChange($event)" />
</div>
```

### 4. 使用 Reactive Forms 替代模板驱动表单
```typescript
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

this.activationForm = this.fb.group({
  realname: ['', Validators.required],
  department: ['', Validators.required],
  roleName: ['组员', Validators.required],
  mobile: ['', Validators.pattern(/^1[3-9]\d{9}$/)]
});
```

### 5. 添加"取消"或"重置"按钮
```html
<button class="btn-reset" (click)="resetForm()">
  重置为企微信息
</button>
```

## 技术亮点

### 1. 双向数据绑定
使用 `[(ngModel)]` 实现表单和数据的双向同步：
```html
<input [(ngModel)]="formData.realname" />
```

### 2. 智能数据填充
处理企微部门信息的多种数据格式：
```typescript
// 支持数组、对象、字符串三种格式
if (Array.isArray(userDept)) { ... }
else if (typeof userDept === 'object') { ... }
else if (typeof userDept === 'string') { ... }
```

### 3. CSS自定义下拉框
使用 SVG data URI 实现自定义下拉箭头：
```scss
background-image: url("data:image/svg+xml,...");
```

### 4. 焦点状态管理
CSS实现输入框聚焦时的视觉反馈：
```scss
&:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
```

## 总结

此功能完美结合了**自动化**和**灵活性**：

- 🚀 **快速激活** - 企微信息自动填充，大部分情况一键确认
- ✏️ **灵活编辑** - 用户可以修改任何字段，满足特殊需求
- ✅ **数据规范** - 部门和角色下拉选择，确保数据统一
- 🎨 **美观易用** - 现代化表单设计，符合整体UI风格
- 📱 **移动友好** - 响应式设计，在手机上同样好用

通过这次更新，身份激活流程更加人性化和专业化，为整个系统的用户体验奠定了良好基础。