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

功能概述

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

实现日期

2025年11月3日

功能特点

✨ 核心特性

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

📋 可编辑字段

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

修改的文件

1. `profile-activation.component.ts`

新增导入

import { FormsModule } from '@angular/forms';

新增属性

表单数据模型（第52-58行）：

formData = {
  realname: '',
  department: '',
  roleName: '组员',
  mobile: ''
};

部门列表（第60-69行）：

departmentList = [
  '设计部',
  '建模部',
  '渲染部',
  '软装部',
  '后期部',
  '综合部',
  '管理部'
];

角色列表（第71-77行）：

roleList = [
  '组员',
  '组长',
  '主管',
  '经理'
];

新增方法

populateFormData()（第160-189行）：

功能：自动填充表单数据
数据来源优先级：
1. Profile记录（已激活用户）
2. 企微userInfo（新用户）

智能处理部门信息的多种格式（数组、对象、字符串）

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 字段

// 保存用户编辑的信息
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行）

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

<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行）：

<h2 class="user-name">{{ formData.realname || '请填写姓名' }}</h2>

角色显示（第42行）：

<p class="user-role">{{ formData.roleName }}</p>

3. `profile-activation.component.scss`

新增样式（第615-698行）

表单容器：

.form-container {
  padding: 24px 0;

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

表单标签：

.form-label {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #333;

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

输入框和下拉框：

.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);
  }
}

下拉框箭头图标：

.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;
}

只读字段：

&.readonly {
  .readonly-value {
    padding: 12px 16px;
    background: #f5f5f5;
    border-radius: 8px;
    color: #666;
  }
}

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

@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
    ↓
跳转到激活成功页面

部门列表配置

当前支持的部门：

设计部 - 主要设计工作
建模部 - 3D建模
渲染部 - 渲染工作
软装部 - 软装设计
后期部 - 后期处理
综合部 - 综合工作
管理部 - 管理岗位

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

角色列表配置

当前支持的角色：

组员 - 普通设计师
组长 - 小组负责人
主管 - 部门主管
经理 - 部门经理

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

表单验证规则

必填字段

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

可选字段

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

验证提示

验证失败时弹出 alert 提示用户：

"请填写您的真实姓名"
"请选择您的所属部门"
"请选择您的职位角色"

用户体验优化

1. 自动填充

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

2. 智能处理

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

3. 视觉反馈

必填字段红色 * 标记
输入框聚焦时紫色高亮
下拉框自定义样式箭头
只读字段灰色背景区分

4. 移动端优化

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

测试场景

场景1：新用户首次激活

访问激活页面（测试URL：/wxwork/test/activation）
看到表单已自动填充企微信息
修改姓名为"李设计师"
选择部门"设计部"
选择角色"组员"
点击"确认身份"
✅ 激活成功，信息已保存

场景2：已激活用户重新访问

用户之前已激活
表单显示之前保存的信息
用户可以修改信息
✅ 显示"激活成功"页面

场景3：表单验证

清空姓名字段
点击"确认身份"
✅ 弹出提示"请填写您的真实姓名"
不选择部门
✅ 弹出提示"请选择您的所属部门"

场景4：部门选择

点击部门下拉框
✅ 看到7个部门选项
选择"渲染部"
✅ 下拉框显示"渲染部"

场景5：手机号修改

企微自动填充手机号"13800138000"
修改为"13900139000"
点击"确认身份"
✅ 新手机号保存到Profile

数据库字段映射

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

后续优化建议

1. 从数据库动态加载部门列表

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. 添加手机号格式验证

validateMobile(mobile: string): boolean {
  return /^1[3-9]\d{9}$/.test(mobile);
}

3. 添加头像上传功能

<div class="form-group">
  <label>头像</label>
  <input type="file" accept="image/*" (change)="onAvatarChange($event)" />
</div>

4. 使用 Reactive Forms 替代模板驱动表单

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. 添加"取消"或"重置"按钮

<button class="btn-reset" (click)="resetForm()">
  重置为企微信息
</button>

技术亮点

1. 双向数据绑定

使用 [(ngModel)] 实现表单和数据的双向同步：

<input [(ngModel)]="formData.realname" />

2. 智能数据填充

处理企微部门信息的多种数据格式：

// 支持数组、对象、字符串三种格式
if (Array.isArray(userDept)) { ... }
else if (typeof userDept === 'object') { ... }
else if (typeof userDept === 'string') { ... }

3. CSS自定义下拉框

使用 SVG data URI 实现自定义下拉箭头：

background-image: url("data:image/svg+xml,...");

4. 焦点状态管理

CSS实现输入框聚焦时的视觉反馈：

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

总结

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

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

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

身份激活页面表单可编辑功能.md 13 KB 文件歷史 原始文件