feat: implement editable profile activation form with validation

- Added a form for users to input their real name, department, role, and mobile number during profile activation.
- Integrated form validation to ensure the real name is provided before activation.
- Enhanced the user interface with new styles for form elements, improving usability and aesthetics.
- Automatically populate form fields with existing user data where available.
- Updated the component to save user inputs to the profile upon activation.

docs/feature/身份激活页面-可选编辑表单.md

@@ -0,0 +1,628 @@
+# 身份激活页面 - 可选编辑表单（最终版）
+
+## 功能概述
+
+身份激活页面提供**智能表单**功能：
+- ✅ 所有字段自动从企微获取并预填充
+- ✅ 所有字段均可由用户修改
+- ✅ 只有**真实姓名**为必填项
+- ✅ 部门、角色、手机号为可选项
+
+## 实现日期
+
+2025年11月3日
+
+## 字段说明
+
+| 字段名 | 类型 | 必填 | 自动获取 | 说明 |
+|--------|------|------|----------|------|
+| **真实姓名** | 文本输入 | ✅ 是 | ✅ 是 | 从企微自动填充，用户可修改 |
+| **所属部门** | 下拉选择 | ❌ 否 | ✅ 是 | 使用 `getDepartment()` 获取初始值 |
+| **职位角色** | 下拉选择 | ❌ 否 | ✅ 是 | 使用 `getUserRole()` 获取初始值 |
+| **手机号** | 电话输入 | ❌ 否 | ✅ 是 | 从企微自动填充，用户可修改 |
+| **员工ID** | 只读显示 | - | ✅ 是 | 企微 userid，不可编辑 |
+
+## 界面效果
+
+```
+┌─────────────────────────────────────┐
+│  用户身份确认                       │
+│  请确认您的身份信息                 │
+├─────────────────────────────────────┤
+│         [头像]                      │
+│      张设计师                       │
+│         组员                        │
+├─────────────────────────────────────┤
+│  真实姓名 *                         │
+│  [张设计师        ] ← 自动填充     │
+│                                     │
+│  所属部门                           │
+│  [▼ 设计部        ] ← 自动选中     │
+│  • 设计部                           │
+│  • 建模部                           │
+│  • 渲染部...                        │
+│                                     │
+│  职位角色                           │
+│  [▼ 组员          ] ← 自动选中     │
+│  • 组员                             │
+│  • 组长                             │
+│  • 主管...                          │
+│                                     │
+│  手机号                             │
+│  [13800138000     ] ← 自动填充     │
+│                                     │
+│  员工ID                             │
+│  [test_user_001   ] ← 只读         │
+├─────────────────────────────────────┤
+│       [✓ 确认身份]                  │
+└─────────────────────────────────────┘
+```
+
+## 核心实现
+
+### 1. 数据模型（TypeScript）
+
+**表单数据**（第52-58行）：
+```typescript
+formData = {
+  realname: '',      // 真实姓名（必填）
+  department: '',    // 所属部门（可选）
+  roleName: '',      // 职位角色（可选）
+  mobile: ''         // 手机号（可选）
+};
+```
+
+**部门列表**（第60-69行）：
+```typescript
+departmentList = [
+  '设计部',
+  '建模部',
+  '渲染部',
+  '软装部',
+  '后期部',
+  '综合部',
+  '管理部'
+];
+```
+
+**角色列表**（第71-77行）：
+```typescript
+roleList = [
+  '组员',
+  '组长',
+  '主管',
+  '经理'
+];
+```
+
+### 2. 自动填充逻辑
+
+**使用原有方法获取初始值**（第163-177行）：
+
+```typescript
+private populateFormData(): void {
+  // 姓名：从Profile或企微获取
+  this.formData.realname = this.profile?.get('realname') || 
+                           this.profile?.get('name') || 
+                           this.userInfo?.name || '';
+  
+  // 手机号：从Profile或企微获取
+  this.formData.mobile = this.profile?.get('mobile') || 
+                         this.userInfo?.mobile || '';
+  
+  // 部门：使用原有方法获取（智能处理多种格式）
+  this.formData.department = this.getDepartment();
+  
+  // 角色：使用原有方法获取
+  this.formData.roleName = this.getUserRole();
+  
+  console.log('📝 自动填充表单数据:', this.formData);
+}
+```
+
+### 3. 表单验证
+
+**只验证必填字段：姓名**（第222-228行）：
+
+```typescript
+// 表单验证
+if (!this.formData.realname?.trim()) {
+  alert('请填写您的真实姓名');
+  return;
+}
+
+// 部门和角色为可选，不做必填验证
+```
+
+### 4. 数据保存
+
+**保存用户选择的所有信息**（第248-278行）：
+
+```typescript
+// 设置激活标记并保存表单数据
+if (this.profile) {
+  this.profile.set('isActivated', true);
+  this.profile.set('activatedAt', new Date());
+  
+  // 保存用户编辑的信息
+  this.profile.set('realname', this.formData.realname);
+  this.profile.set('name', this.formData.realname); // 同时更新name字段
+  
+  // 保存部门和角色（可选）
+  if (this.formData.department) {
+    this.profile.set('department', this.formData.department);
+    this.profile.set('departmentName', this.formData.department);
+  }
+  if (this.formData.roleName) {
+    this.profile.set('roleName', this.formData.roleName);
+  }
+  
+  // 保存手机号（可选）
+  if (this.formData.mobile) {
+    this.profile.set('mobile', this.formData.mobile);
+  }
+  
+  await this.profile.save();
+}
+```
+
+### 5. HTML 表单结构
+
+**真实姓名**（第47-58行）：
+```html
+<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>
+```
+
+**所属部门**（第60-72行）：
+```html
+<div class="form-group">
+  <label class="form-label">
+    <span class="label-text">所属部门</span>
+  </label>
+  <select 
+    class="form-select" 
+    [(ngModel)]="formData.department">
+    <option value="">请选择部门（可选）</option>
+    @for (dept of departmentList; track dept) {
+      <option [value]="dept">{{ dept }}</option>
+    }
+  </select>
+</div>
+```
+
+**职位角色**（第74-86行）：
+```html
+<div class="form-group">
+  <label class="form-label">
+    <span class="label-text">职位角色</span>
+  </label>
+  <select 
+    class="form-select" 
+    [(ngModel)]="formData.roleName">
+    <option value="">请选择角色（可选）</option>
+    @for (role of roleList; track role) {
+      <option [value]="role">{{ role }}</option>
+    }
+  </select>
+</div>
+```
+
+## 工作流程
+
+### 初始化流程
+
+```
+用户访问激活页面
+    ↓
+initAuth() - 初始化企微认证
+    ↓
+获取企微用户信息
+    ├─ userid
+    ├─ name
+    ├─ mobile
+    ├─ department (多种格式)
+    └─ avatar
+    ↓
+checkActivationStatus() - 查询Profile
+    ↓
+populateFormData() - 自动填充表单
+    ├─ formData.realname ← name
+    ├─ formData.mobile ← mobile
+    ├─ formData.department ← getDepartment() 🔑
+    └─ formData.roleName ← getUserRole() 🔑
+    ↓
+显示表单（所有字段已填充）
+```
+
+### 用户操作流程
+
+```
+表单已自动填充
+    ↓
+用户查看信息
+    ↓
+可选操作：
+    ├─ 修改姓名 ✏️
+    ├─ 重新选择部门 ✏️
+    ├─ 重新选择角色 ✏️
+    ├─ 修改手机号 ✏️
+    └─ 或保持默认值 ✅
+    ↓
+点击"确认身份"
+    ↓
+验证姓名不为空
+    ↓
+保存所有字段到Profile
+    ↓
+激活成功
+```
+
+## 关键方法复用
+
+### getDepartment() 方法
+
+**位置**：第368-393行
+
+**功能**：智能处理企微部门信息的多种格式
+
+```typescript
+getDepartment(): string {
+  const dept = this.userInfo?.department;
+  
+  // 处理数组格式
+  if (Array.isArray(dept) && dept.length > 0) {
+    return `部门${dept[0]}`;
+  }
+  
+  // 处理对象格式
+  if (dept && typeof dept === 'object' && !Array.isArray(dept)) {
+    return dept.name || dept.departmentName || '未知部门';
+  }
+  
+  // 处理字符串格式
+  if (typeof dept === 'string') {
+    return dept;
+  }
+  
+  // 从 Profile 获取部门信息
+  const profileDept = this.profile?.get('department') || 
+                     this.profile?.get('departmentName');
+  if (profileDept) {
+    return typeof profileDept === 'string' ? 
+           profileDept : (profileDept.name || '未知部门');
+  }
+  
+  return '未分配部门';
+}
+```
+
+**优势**：
+- ✅ 兼容企微的多种部门数据格式
+- ✅ 多级降级逻辑，确保总能获取到值
+- ✅ 优先使用Profile中的部门信息（用户之前保存的）
+
+### getUserRole() 方法
+
+**位置**：第361-363行
+
+**功能**：获取用户角色
+
+```typescript
+getUserRole(): string {
+  return this.profile?.get('roleName') || '员工';
+}
+```
+
+**优势**：
+- ✅ 优先从Profile获取（用户之前保存的角色）
+- ✅ 默认值为"员工"
+- ✅ 简洁高效
+
+## 使用场景
+
+### 场景1：企微信息完整准确
+
+```
+企微返回：
+  name: "王刚"
+  department: "设计部"
+  roleName: "组员"
+  mobile: "13800138000"
+    ↓
+表单自动填充：
+  真实姓名: [王刚]
+  所属部门: [设计部] (已选中)
+  职位角色: [组员] (已选中)
+  手机号: [13800138000]
+    ↓
+用户点击"确认身份"
+    ↓
+✅ 激活成功（无需修改）
+```
+
+### 场景2：部门信息为数组格式
+
+```
+企微返回：
+  department: [1, 2]
+    ↓
+getDepartment() 处理：
+  return "部门1"
+    ↓
+表单显示：
+  所属部门: [部门1] (已选中)
+    ↓
+用户可以：
+  • 保持"部门1"
+  • 或选择"设计部"等其他部门
+    ↓
+✅ 保存用户选择
+```
+
+### 场景3：用户修改信息
+
+```
+企微自动填充：
+  真实姓名: [测试员工]
+  所属部门: [部门1]
+  职位角色: [员工]
+    ↓
+用户修改：
+  真实姓名: [李设计师] ✏️
+  所属部门: [设计部] ✏️
+  职位角色: [组员] ✏️
+    ↓
+点击"确认身份"
+    ↓
+✅ 保存修改后的信息
+```
+
+### 场景4：部门角色留空
+
+```
+用户操作：
+  真实姓名: [王刚] ✅ (必填)
+  所属部门: [请选择部门（可选）] (未选择)
+  职位角色: [请选择角色（可选）] (未选择)
+  手机号: [] (未填写)
+    ↓
+点击"确认身份"
+    ↓
+✅ 激活成功
+    ↓
+Profile保存：
+  realname: "王刚"
+  department: null (未设置)
+  roleName: null (未设置)
+  mobile: null (未设置)
+```
+
+## 数据库保存结果
+
+### 示例1：所有字段填写完整
+
+```javascript
+{
+  // 必填字段
+  realname: "王刚",
+  name: "王刚",
+  
+  // 可选字段（用户填写）
+  department: "设计部",
+  departmentName: "设计部",
+  roleName: "组员",
+  mobile: "13800138000",
+  
+  // 企微字段（自动同步）
+  userid: "WangGang001",
+  avatar: "https://...",
+  
+  // 系统字段
+  isActivated: true,
+  activatedAt: "2025-11-03T12:00:00.000Z"
+}
+```
+
+### 示例2：仅填写必填字段
+
+```javascript
+{
+  // 必填字段
+  realname: "李设计师",
+  name: "李设计师",
+  
+  // 可选字段（未填写，不保存）
+  // department: undefined
+  // departmentName: undefined
+  // roleName: undefined
+  // mobile: undefined
+  
+  // 企微字段
+  userid: "test_user_001",
+  
+  // 系统字段
+  isActivated: true,
+  activatedAt: "2025-11-03T12:00:00.000Z"
+}
+```
+
+## 核心优势
+
+### ✅ 智能自动化
+
+- **自动获取**：所有字段从企微自动获取
+- **智能处理**：使用原有的 `getDepartment()` 和 `getUserRole()` 方法
+- **多格式兼容**：支持企微的多种数据格式
+
+### ✅ 灵活可选
+
+- **必填最小化**：只有姓名为必填
+- **可选字段**：部门、角色、手机号均可选
+- **自由修改**：所有字段均可由用户修改
+
+### ✅ 用户体验
+
+- **零输入启动**：字段已预填充，大部分情况一键确认
+- **清晰提示**："请选择部门（可选）"明确告知可选
+- **即时反馈**：头像下方的角色实时更新
+
+### ✅ 数据质量
+
+- **智能降级**：多级数据源降级，确保有值
+- **条件保存**：只保存用户填写的可选字段
+- **字段同步**：同时更新 `name/realname`、`department/departmentName`
+
+## 样式说明
+
+表单样式已在 `profile-activation.component.scss` 中定义：
+
+**输入框样式**：
+```scss
+.form-input {
+  width: 100%;
+  padding: 12px 16px;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  
+  &: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,..."); // 自定义箭头
+  padding-right: 36px;
+  cursor: pointer;
+}
+```
+
+**只读字段样式**：
+```scss
+.form-group.readonly {
+  .readonly-value {
+    padding: 12px 16px;
+    background: #f5f5f5;
+    border-radius: 8px;
+    color: #666;
+  }
+}
+```
+
+## 测试建议
+
+### 功能测试
+
+- [ ] 访问激活页面，所有字段已自动填充
+- [ ] 修改姓名后保存成功
+- [ ] 选择不同部门后保存成功
+- [ ] 选择不同角色后保存成功
+- [ ] 修改手机号后保存成功
+- [ ] 清空姓名后无法提交（必填验证）
+- [ ] 部门和角色留空仍可提交（可选）
+- [ ] 头像下方角色实时更新
+
+### 数据测试
+
+- [ ] 企微返回数组格式部门，正确处理
+- [ ] 企微返回对象格式部门，正确处理
+- [ ] 企微返回字符串格式部门，正确处理
+- [ ] Profile有部门数据，优先使用Profile数据
+- [ ] 可选字段未填写时，不保存到数据库
+
+### UI测试
+
+- [ ] 下拉框显示自定义箭头
+- [ ] 输入框聚焦时紫色高亮
+- [ ] 必填字段有红色 `*` 标记
+- [ ] 可选字段有"（可选）"提示
+- [ ] 只读字段（员工ID）灰色背景
+- [ ] 移动端布局正常（16px字体）
+
+## 后续优化建议
+
+### 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. 添加部门搜索功能
+
+```html
+<input type="text" 
+       placeholder="搜索部门" 
+       (input)="filterDepartments($event)" />
+```
+
+### 3. 角色权限关联
+
+```typescript
+// 根据选择的角色显示不同的权限说明
+getRoleDescription(role: string): string {
+  const descriptions = {
+    '组员': '普通设计师，负责具体项目执行',
+    '组长': '小组负责人，管理团队成员',
+    '主管': '部门主管，负责部门整体运营',
+    '经理': '部门经理，负责战略决策'
+  };
+  return descriptions[role] || '';
+}
+```
+
+### 4. 手机号格式验证
+
+```typescript
+validateMobile(): boolean {
+  if (!this.formData.mobile) return true; // 可选字段
+  return /^1[3-9]\d{9}$/.test(this.formData.mobile);
+}
+```
+
+### 5. 表单防抖保存
+
+```typescript
+// 用户修改后自动保存草稿
+private saveDraft = debounce(() => {
+  localStorage.setItem('activation_draft', JSON.stringify(this.formData));
+}, 500);
+```
+
+## 总结
+
+最终方案实现了**"智能自动 + 灵活可选"**的完美平衡：
+
+- 🚀 **高效**：所有字段自动获取，大部分情况一键确认
+- 🔄 **复用**：使用原有的 `getDepartment()` 和 `getUserRole()` 方法
+- ✏️ **灵活**：所有字段均可修改，满足个性化需求
+- 📋 **可选**：只有姓名必填，其他字段可选
+- 🎯 **准确**：智能处理多种数据格式，确保数据质量
+- 🎨 **友好**：清晰的视觉提示和即时反馈
+
+这种设计既保证了激活流程的便捷性，又给用户提供了充分的自主权，是企业内部系统的最佳实践。
+
+
+
+
+
+

docs/feature/身份激活页面表单可编辑功能.md

@@ -0,0 +1,544 @@
+# 身份激活页面表单可编辑功能
+
+## 功能概述
+
+为身份激活页面添加可编辑表单功能，在保留企微自动获取信息的基础上，允许用户修改和完善个人信息，实现"自动获取 + 可编辑"的最佳用户体验。
+
+## 实现日期
+
+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风格
+- 📱 **移动友好** - 响应式设计，在手机上同样好用
+
+通过这次更新，身份激活流程更加人性化和专业化，为整个系统的用户体验奠定了良好基础。
+
+
+
+
+
+

docs/feature/身份激活页面表单可编辑功能_最终版.md

@@ -0,0 +1,427 @@
+# 身份激活页面表单可编辑功能（最终版）
+
+## 功能概述
+
+为身份激活页面添加**混合模式**表单：
+- **可编辑字段**：真实姓名、手机号（用户可修改）
+- **只读字段**：部门、职位角色、员工ID（从企微自动获取）
+
+实现"自动获取 + 选择性编辑"的最佳平衡。
+
+## 实现日期
+
+2025年11月3日
+
+## 最终方案
+
+### 📋 字段分类
+
+| 字段名 | 类型 | 必填 | 可编辑 | 数据来源 |
+|--------|------|------|--------|----------|
+| 真实姓名 | 文本输入 | ✅ | ✅ | 企微自动填充，可修改 |
+| 手机号 | 电话输入 | ❌ | ✅ | 企微自动填充，可修改 |
+| 所属部门 | 只读显示 | - | ❌ | 企微自动获取 |
+| 职位角色 | 只读显示 | - | ❌ | 企微自动获取 |
+| 员工ID | 只读显示 | - | ❌ | 企微自动获取 |
+
+### 🎨 界面效果
+
+```
+┌─────────────────────────────────────┐
+│  用户身份确认                       │
+│  请确认您的身份信息                 │
+├─────────────────────────────────────┤
+│         [头像]                      │
+│      张设计师                       │
+│         组员                        │
+├─────────────────────────────────────┤
+│  真实姓名 *                         │
+│  [张设计师        ] ← 可编辑 ✏️     │
+│                                     │
+│  所属部门                           │
+│  [设计部          ] ← 只读 🔒       │
+│                                     │
+│  职位角色                           │
+│  [组员            ] ← 只读 🔒       │
+│                                     │
+│  手机号                             │
+│  [13800138000     ] ← 可编辑 ✏️     │
+│                                     │
+│  员工ID                             │
+│  [test_user_001   ] ← 只读 🔒       │
+├─────────────────────────────────────┤
+│       [✓ 确认身份]                  │
+└─────────────────────────────────────┘
+```
+
+## 修改的文件
+
+### 1. `profile-activation.component.ts`
+
+#### 简化表单数据模型（第52-56行）
+
+只保留可编辑字段：
+```typescript
+// 可编辑的表单字段（只有姓名和手机号可编辑）
+formData = {
+  realname: '',
+  mobile: ''
+};
+```
+
+#### 移除不需要的数据（已删除）
+
+- ❌ 删除 `departmentList` 数组（不需要下拉选择）
+- ❌ 删除 `roleList` 数组（不需要下拉选择）
+- ❌ 删除 `formData.department`（由企微自动同步）
+- ❌ 删除 `formData.roleName`（由企微自动同步）
+
+#### 简化 `populateFormData()` 方法（第139-153行）
+
+只填充可编辑字段：
+```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 || '';
+  
+  console.log('📝 自动填充表单数据:', this.formData);
+}
+```
+
+#### 简化表单验证（第198-202行）
+
+只验证姓名：
+```typescript
+// 表单验证（只验证必填的姓名）
+if (!this.formData.realname?.trim()) {
+  alert('请填写您的真实姓名');
+  return;
+}
+```
+
+#### 优化保存逻辑（第227-238行）
+
+只保存用户可编辑的字段：
+```typescript
+// 保存用户编辑的信息（只保存姓名和手机号，部门和角色由企微自动同步）
+this.profile.set('realname', this.formData.realname);
+this.profile.set('name', this.formData.realname); // 同时更新name字段
+if (this.formData.mobile) {
+  this.profile.set('mobile', this.formData.mobile);
+}
+
+await this.profile.save();
+console.log('✅ 用户信息已保存:', {
+  realname: this.formData.realname,
+  mobile: this.formData.mobile
+});
+```
+
+### 2. `profile-activation.component.html`
+
+#### 混合表单结构（第46-91行）
+
+```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 readonly">
+    <label class="form-label">
+      <span class="label-text">所属部门</span>
+    </label>
+    <div class="readonly-value">{{ getDepartment() }}</div>
+  </div>
+
+  <!-- 职位角色：只读 -->
+  <div class="form-group readonly">
+    <label class="form-label">
+      <span class="label-text">职位角色</span>
+    </label>
+    <div class="readonly-value">{{ getUserRole() }}</div>
+  </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>
+```
+
+#### 头像信息显示（第41-42行）
+
+使用原有方法获取角色：
+```html
+<h2 class="user-name">{{ formData.realname || '请填写姓名' }}</h2>
+<p class="user-role">{{ getUserRole() }}</p>
+```
+
+### 3. `profile-activation.component.scss`
+
+样式保持不变，已包含：
+- ✅ `.form-input` - 可编辑输入框样式
+- ✅ `.form-group.readonly` - 只读字段灰色背景样式
+- ✅ `.readonly-value` - 只读内容样式
+- ✅ 聚焦效果、响应式布局等
+
+## 方法使用说明
+
+### 原有方法继续使用
+
+以下方法保持原有逻辑，用于获取企微数据：
+
+1. **`getDepartment()`**（第368-393行）
+   - 智能处理企微部门信息的多种格式
+   - 支持数组、对象、字符串格式
+   - 用于只读显示
+
+2. **`getUserRole()`**（第361-363行）
+   - 从Profile获取 `roleName`
+   - 默认返回"员工"
+   - 用于只读显示
+
+3. **`getUserId()`**（第398-400行）
+   - 返回企微 `userid`
+   - 用于只读显示
+
+4. **`getUserAvatar()`**（第341-346行）
+   - 获取用户头像
+   - 多级降级逻辑
+
+5. **`getUserName()`**（第351-356行）
+   - 获取用户姓名
+   - 优先使用 `realname`
+
+## 数据流程
+
+### 1. 初始化（自动填充）
+
+```
+页面加载
+    ↓
+initAuth() - 初始化企微认证
+    ↓
+获取企微用户信息
+    ├─ userid
+    ├─ name
+    ├─ mobile
+    ├─ department (数组/对象/字符串)
+    └─ avatar
+    ↓
+checkActivationStatus() - 查询Profile
+    ↓
+populateFormData() - 自动填充
+    ├─ formData.realname = userInfo.name ✅
+    └─ formData.mobile = userInfo.mobile ✅
+    ↓
+显示表单
+    ├─ 姓名输入框（已填充）✏️
+    ├─ 部门只读框（getDepartment()）🔒
+    ├─ 角色只读框（getUserRole()）🔒
+    ├─ 手机输入框（已填充）✏️
+    └─ ID只读框（getUserId()）🔒
+```
+
+### 2. 提交保存
+
+```
+用户编辑姓名/手机号
+    ↓
+点击"确认身份"
+    ↓
+验证 realname 非空
+    ↓
+confirmActivation()
+    ↓
+wxAuth.syncUserInfo()
+    ├─ 自动同步企微 department
+    ├─ 自动同步企微 roleName
+    └─ 自动同步企微 userid
+    ↓
+保存用户编辑的字段
+    ├─ profile.set('realname', formData.realname) ✏️
+    ├─ profile.set('name', formData.realname) ✏️
+    └─ profile.set('mobile', formData.mobile) ✏️
+    ↓
+设置激活标记
+    ├─ isActivated = true
+    └─ activatedAt = new Date()
+    ↓
+激活成功
+```
+
+## 核心优势
+
+### ✅ 保持企微数据一致性
+
+- **部门信息**：由企微自动同步，不允许手动修改
+- **角色信息**：由企微自动同步，保证权限准确
+- **员工ID**：企微唯一标识，不可更改
+
+### ✅ 允许个性化调整
+
+- **真实姓名**：用户可以修正或完善企微姓名
+- **手机号**：用户可以更新联系方式
+
+### ✅ 简化用户操作
+
+- 无需选择部门（复杂的下拉列表）
+- 无需选择角色（由管理员在企微配置）
+- 只需要确认/修改基本个人信息
+
+### ✅ 减少数据维护
+
+- 不需要维护 `departmentList` 列表
+- 不需要维护 `roleList` 列表
+- 部门和角色变更在企微统一管理
+
+## 测试场景
+
+### 场景1：新用户首次激活
+1. 访问 `/wxwork/test/activation`
+2. 看到姓名"测试员工"已自动填充 ✅
+3. 看到部门"部门1"为只读灰色显示 ✅
+4. 看到角色"组员"为只读灰色显示 ✅
+5. 修改姓名为"张设计师" ✏️
+6. 点击"确认身份"
+7. ✅ 激活成功，只保存了姓名
+
+### 场景2：修改手机号
+1. 企微手机号"13800138000"已自动填充
+2. 修改为"13900139000" ✏️
+3. 点击"确认身份"
+4. ✅ 新手机号保存成功
+
+### 场景3：企微部门复杂格式
+1. 企微返回部门为数组 `[1, 2]`
+2. `getDepartment()` 处理为"部门1" ✅
+3. 只读显示"部门1" 🔒
+4. 用户无法修改，保持企微数据一致性 ✅
+
+### 场景4：表单验证
+1. 清空姓名字段
+2. 点击"确认身份"
+3. ✅ 弹出提示"请填写您的真实姓名"
+4. 填写姓名后成功激活 ✅
+
+## 与企微同步机制
+
+### syncUserInfo() 的作用
+
+在 `confirmActivation()` 中调用：
+```typescript
+// 生产模式：同步用户信息
+this.profile = await this.wxAuth!.syncUserInfo(this.userInfo);
+```
+
+**自动同步以下企微字段**：
+- ✅ `userid` - 员工ID
+- ✅ `department` - 部门信息
+- ✅ `roleName` - 角色/职位
+- ✅ `avatar` - 头像
+- ✅ 其他企微标准字段
+
+**用户编辑的字段后续覆盖**：
+- ✅ `realname` - 用户填写的真实姓名
+- ✅ `mobile` - 用户填写的手机号
+
+这样既保证了企微数据的准确性，又允许用户完善个人信息。
+
+## 数据库最终保存
+
+点击"确认身份"后，Profile表保存的数据：
+
+```javascript
+{
+  // 企微自动同步
+  userid: "WangGang001",
+  department: "设计部",
+  roleName: "组员",
+  avatar: "https://...",
+  
+  // 用户可编辑（覆盖企微数据）
+  realname: "王刚",        // 用户修改
+  name: "王刚",            // 同步更新
+  mobile: "13900139000",   // 用户修改
+  
+  // 系统字段
+  isActivated: true,
+  activatedAt: "2025-11-03T12:00:00.000Z"
+}
+```
+
+## 设计理念
+
+### 🎯 简单即美
+
+- 只编辑必要的字段
+- 减少用户决策负担
+- 降低出错概率
+
+### 🔒 数据源单一
+
+- 部门和角色由企微统一管理
+- 避免前端和企微数据不一致
+- 减少数据维护成本
+
+### ✏️ 灵活补充
+
+- 允许用户修正姓名
+- 允许更新联系方式
+- 满足个性化需求
+
+### 🎨 清晰区分
+
+- 可编辑：白色背景，有输入框
+- 只读：灰色背景，文本显示
+- 视觉上一目了然
+
+## 总结
+
+最终方案实现了**"企微自动同步 + 用户选择性编辑"**的完美平衡：
+
+- 🚀 **高效**：部门和角色自动获取，无需手动选择
+- 🎯 **准确**：企微数据保持权威，避免手动输入错误
+- ✏️ **灵活**：允许用户完善姓名和联系方式
+- 🎨 **直观**：灰色背景清晰标识只读字段
+- 🔧 **易维护**：无需维护部门和角色列表
+
+这种设计既保证了数据的规范性和一致性，又给用户提供了必要的灵活性，是企业内部系统的最佳实践。
+
+
+
+
+
+

src/modules/profile/pages/profile-activation/profile-activation.component.html

@@ -38,27 +38,69 @@
             <div class="user-avatar">
               <img [src]="getUserAvatar()" [alt]="getUserName()" />
             </div>
-            <h2 class="user-name">{{ getUserName() }}</h2>
-            <p class="user-role">{{ getUserRole() }}</p>
+            <h2 class="user-name">{{ formData.realname || '请填写姓名' }}</h2>
+            <p class="user-role">{{ formData.roleName || '请选择角色' }}</p>
           </div>
 
-          <!-- 详细信息 -->
-          <div class="info-list">
-            <div class="info-item">
-              <span class="label">用户类型：</span>
-              <span class="value">企业员工</span>
+          <!-- 可编辑信息表单 -->
+          <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="info-item">
-              <span class="label">员工ID：</span>
-              <span class="value">{{ getUserId() }}</span>
+
+            <div class="form-group">
+              <label class="form-label">
+                <span class="label-text">所属部门</span>
+              </label>
+              <select 
+                class="form-select" 
+                [(ngModel)]="formData.department">
+                <option value="">请选择部门（可选）</option>
+                @for (dept of departmentList; track dept) {
+                  <option [value]="dept">{{ dept }}</option>
+                }
+              </select>
             </div>
-            <div class="info-item">
-              <span class="label">部门：</span>
-              <span class="value">{{ getDepartment() }}</span>
+
+            <div class="form-group">
+              <label class="form-label">
+                <span class="label-text">职位角色</span>
+              </label>
+              <select 
+                class="form-select" 
+                [(ngModel)]="formData.roleName">
+                <option value="">请选择角色（可选）</option>
+                @for (role of roleList; track role) {
+                  <option [value]="role">{{ role }}</option>
+                }
+              </select>
             </div>
-            <div class="info-item">
-              <span class="label">手机号：</span>
-              <span class="value">{{ userInfo?.mobile || '未绑定' }}</span>
+
+            <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>
+
+            <div class="form-group readonly">
+              <label class="form-label">
+                <span class="label-text">员工ID</span>
+              </label>
+              <div class="readonly-value">{{ getUserId() }}</div>
             </div>
           </div>
         </div>

src/modules/profile/pages/profile-activation/profile-activation.component.scss

@@ -601,5 +601,99 @@
   .result-card {
     max-width: 100%;
   }
+
+  .form-container {
+    padding: 20px 0;
+
+    .form-input,
+    .form-select {
+      font-size: 16px; // 防止iOS自动缩放
+    }
+  }
+}
+
+// 表单容器样式
+.form-container {
+  padding: 24px 0;
+
+  .form-group {
+    margin-bottom: 20px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    &.readonly {
+      .readonly-value {
+        padding: 12px 16px;
+        background: #f5f5f5;
+        border-radius: 8px;
+        color: #666;
+        font-size: 14px;
+      }
+    }
+  }
+
+  .form-label {
+    display: flex;
+    align-items: center;
+    margin-bottom: 8px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #333;
+
+    .label-text {
+      flex: 1;
+    }
+
+    .required {
+      color: #f56c6c;
+      margin-left: 4px;
+    }
+  }
+
+  .form-input,
+  .form-select {
+    width: 100%;
+    padding: 12px 16px;
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    font-size: 14px;
+    color: #333;
+    background: white;
+    transition: all 0.3s ease;
+    outline: none;
+
+    &:focus {
+      border-color: #667eea;
+      box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+    }
+
+    &::placeholder {
+      color: #999;
+    }
+
+    &:disabled {
+      background: #f5f5f5;
+      cursor: not-allowed;
+    }
+  }
+
+  .form-select {
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 12px center;
+    padding-right: 36px;
+    cursor: pointer;
+
+    &:focus {
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23667eea' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
+    }
+  }
+
+  .form-input[type="tel"] {
+    letter-spacing: 0.5px;
+  }
 }
 

src/modules/profile/pages/profile-activation/profile-activation.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 import { WxworkAuth } from 'fmode-ng/core';
 import { FmodeParse } from 'fmode-ng/core';
@@ -14,7 +15,7 @@ import { FmodeParse } from 'fmode-ng/core';
 @Component({
   selector: 'app-profile-activation',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, FormsModule],
   templateUrl: './profile-activation.component.html',
   styleUrls: ['./profile-activation.component.scss']
 })
@@ -48,6 +49,33 @@ export class ProfileActivationComponent implements OnInit {
   // 暴露 Array 给模板使用
   Array = Array;
 
+  // 可编辑的表单字段（自动获取初始值后可修改）
+  formData = {
+    realname: '',
+    department: '',
+    roleName: '',
+    mobile: ''
+  };
+
+  // 部门列表（可配置）
+  departmentList = [
+    '设计部',
+    '建模部',
+    '渲染部',
+    '软装部',
+    '后期部',
+    '综合部',
+    '管理部'
+  ];
+
+  // 角色列表
+  roleList = [
+    '组员',
+    '组长',
+    '主管',
+    '经理'
+  ];
+
   constructor(
     private router: Router,
     private route: ActivatedRoute
@@ -91,6 +119,7 @@ export class ProfileActivationComponent implements OnInit {
         console.log('🧪 测试模式：使用 mock 数据');
         this.userInfo = this.createMockUserInfo();
         await this.checkActivationStatus();
+        this.populateFormData();
         return;
       }
       
@@ -106,6 +135,9 @@ export class ProfileActivationComponent implements OnInit {
       // 检查是否已激活
       await this.checkActivationStatus();
       
+      // 自动填充表单数据
+      this.populateFormData();
+      
     } catch (err: any) {
       console.error('❌ 认证失败:', err);
       throw new Error('企业微信认证失败，请重试');
@@ -125,6 +157,25 @@ export class ProfileActivationComponent implements OnInit {
     };
   }
 
+  /**
+   * 自动填充表单数据（使用原有的获取方法）
+   */
+  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.department = this.getDepartment();
+    this.formData.roleName = this.getUserRole();
+    
+    console.log('📝 自动填充表单数据:', this.formData);
+  }
+
   /**
    * 检查激活状态
    */
@@ -168,6 +219,14 @@ export class ProfileActivationComponent implements OnInit {
   async confirmActivation() {
     if (this.activating) return;
     
+    // 表单验证
+    if (!this.formData.realname?.trim()) {
+      alert('请填写您的真实姓名');
+      return;
+    }
+    
+    // 部门和角色为可选，不做必填验证
+    
     try {
       this.activating = true;
       console.log('⚡ 开始激活...');
@@ -186,11 +245,38 @@ export class ProfileActivationComponent implements OnInit {
         await this.wxAuth!.autoLogin(this.userInfo);
       }
       
-      // 设置激活标记
+      // 设置激活标记并保存表单数据
       if (this.profile) {
         this.profile.set('isActivated', true);
         this.profile.set('activatedAt', new Date());
+        
+        // 保存用户编辑的信息
+        this.profile.set('realname', this.formData.realname);
+        this.profile.set('name', this.formData.realname); // 同时更新name字段
+        
+        // 保存部门名称（只保存字符串，不保存指针）
+        if (this.formData.department) {
+          this.profile.set('departmentName', this.formData.department);
+          // 注意：不保存 department 字段，因为它是 Pointer<Department> 类型
+        }
+        
+        // 保存角色（可选）
+        if (this.formData.roleName) {
+          this.profile.set('roleName', this.formData.roleName);
+        }
+        
+        // 保存手机号（可选）
+        if (this.formData.mobile) {
+          this.profile.set('mobile', this.formData.mobile);
+        }
+        
         await this.profile.save();
+        console.log('✅ 用户信息已保存:', {
+          realname: this.formData.realname,
+          department: this.formData.department,
+          roleName: this.formData.roleName,
+          mobile: this.formData.mobile
+        });
       }
       
       this.isActivated = true;