# 登录页

## 📋 业务与功能

### 1.1 核心目标
> 提供安全、便捷的登录入口，支持多种登录方式（账号密码、扫码验证），并处理多租户企业选择场景。
> 页面采用分屏布局，左侧展示科技创新企业形象，右侧为登录操作区。

### 1.2 功能清单
> 列出所有功能模块及其优先级

- **登录方式切换**：支持“扫码登录”与“账密登录”两种方式切换。
- **账密登录**：
    - 输入账号、密码。
    - **人机验证**：防止机器暴力破解（模拟图形验证码或滑块）。
    - **防爆破机制**：限制短时间内连续错误次数，错误提示模糊化（“账号或密码错误”）。
- **扫码登录**：
    - 展示二维码。
    - **动态验证码**：扫码后需输入动态验证码进行二次验证（根据需求描述）。
- **多租户选择**：
    - 登录成功后，若用户关联多个企业微信实体，弹出选择框让用户选择进入的企业。
- **背景展示**：左侧展示“科技创新企业操作思域运营系统”主题背景。

### 1.3 交互要点
> 关键的交互触发点、反馈机制、状态变化

- **切换Tab**：点击顶部 Tab 切换扫码/账密登录，面板内容平滑切换。
- **登录验证**：
    - 账密登录：点击登录 -> 校验验证码 -> 校验账号密码 -> 成功则进入租户选择或主页，失败则提示模糊错误。
    - 扫码登录：展示二维码 -> 模拟扫码成功状态 -> 输入动态码 -> 验证通过。
- **租户选择**：
    - 登录成功后 -> 检查租户列表 -> 若 > 1，显示模态框 -> 选择租户 -> 进入系统。
- **错误反馈**：
    - 密码错误次数过多 -> 锁定账号或增加验证难度。
    - 提示信息统一为“账号或密码错误”，不暴露具体字段。

---

## 📊 内容规划

### 2.1 信息架构
> 模块划分、信息层级、内容组织方式

```
登录页
├── 左侧：品牌/营销区
│   └── 科技感背景图/Slogan
└── 右侧：登录操作区
    ├── 顶部：Logo/标题
    ├── 中部：登录方式 Tab (扫码登录 | 账密登录)
    │   ├── 扫码面板：二维码 + 动态码输入
    │   └── 账密面板：账号 + 密码 + 验证码 + 登录按钮
    └── 底部：辅助链接 (忘记密码/注册等)
└── 模态框：租户选择 (登录成功后触发)
```

### 2.2 数据来源
> 数据源优先级：用户提供数据 > 项目数据表 > 生成示例数据

- **数据类型**：租户列表 (`tenants`)
- **数据源**：模拟数据
- **关键字段**：
  - `id`: 企业ID
  - `name`: 企业名称
  - `logo`: 企业Logo

### 2.3 内容示例
> （可选）重要的示例内容、文案语气、术语规范

- **错误提示**： "账号或密码错误，请重试。"
- **扫码提示**： "请使用企业微信扫码登录，并输入动态验证码。"

---

## 🎨 布局与结构

### 3.1 整体布局
> 布局模式（单栏/双栏/网格/自由）、模块尺寸、比例约束

- **布局模式**：双栏布局 (Split Screen)。
- **容器宽度**：全屏 (100vw, 100vh)。
- **关键尺寸**：
  - 左侧背景：flex: 1 (自适应剩余空间，通常占 50%-60%)。
  - 右侧登录框：固定宽度或 flex 占比 (如 400px - 500px)，居中或靠右显示。

### 3.2 响应式适配
> （如适用）断点、适配策略

- **桌面端（≥1200px）**：左右分栏，左侧大图，右侧登录框。
- **移动端（<768px）**：左侧背景隐藏或作为顶部 Banner，右侧登录框占满或居中显示。

---

## 🎨 视觉规范

### 4.1 设计规范来源
> 优先级：用户提供的设计规范 > 主题设计系统（DESIGN-SPEC.md）> 内置设计指导

**本设计基于**：
- [x] 主题设计系统：Ant Design Default
- [x] 用户需求：科技创新企业风格背景

### 4.2 自定义设计要点
> （可选）仅在有特殊的自定义设计要求时填写，如特殊色彩、特殊尺寸等

**自定义色彩**：
- 背景色：深蓝色/科技蓝渐变，体现“科技创新”、“运营系统”。

### 4.3 组件状态
> 交互元素的状态定义

- **默认态**：输入框为空，按钮置灰或可点击。
- **错误态**：输入框红框，下方显示红色错误提示。
- **加载态**：登录按钮显示 Loading spinner。

---

## ⚙️ Axure API 说明

### 5.1 事件列表（eventList）
> 组件对外暴露的事件

| 事件名称 | Payload 类型 | 触发时机 | 说明 |
|---------|-------------|---------|------|
| `onLoginSuccess` | `Object` | 登录成功并选择租户后 | 返回用户信息及选中的租户信息 |
| `onLoginFail` | `string` | 登录失败时 | 返回错误信息 |

### 5.2 动作列表（actionList）
> 组件可被调用的动作

| 动作名称 | Params 类型 | 参数说明 | 功能描述 |
|---------|------------|---------|---------|
| `resetForm` | `void` | 无 | 重置登录表单 |

### 5.3 变量列表（varList）
> 组件内部状态变量

| 变量名称 | 类型 | 默认值 | 说明 |
|---------|-----|-------|------|
| `currentUser` | `Object` | `null` | 当前登录用户信息 |
| `currentTenant` | `Object` | `null` | 当前选中的企业租户 |

### 5.4 配置项列表（configList）
> 组件配置项

| 配置项名称 | 类型 | 默认值 | 说明 |
|----------|-----|-------|------|
| `systemName` | `string` | `科技创新运营系统` | 系统名称 |
| `backgroundUrl` | `string` | `(默认科技图片)` | 左侧背景图 URL |

### 5.5 数据项列表（dataList）
> 组件数据结构定义

**数据结构**：
```typescript
{
  tenants: Array<{
    id: string;
    name: string;
    logo?: string;
  }>
}
```