# 企业微信网页授权登录页

一个基于企业微信需求的网页授权登录页面，支持手机号管理员密码申请和历史记录查询。

## 功能特性

### 1. 用户信息展示
- 个人头像展示
- 用户名称和所属企业信息
- 专业的渐变色背景设计

### 2. 密码申请功能
- 手机号输入和验证
- 一键获取管理员密码
- 申请次数限制（单个手机号最多5次/周期）
- 密码有效期72小时
- 实时显示剩余申请次数

### 3. 历史记录管理
- 展示所有有效的密码记录
- 包含生成密码、申请时间、有效期、剩余时间等信息
- 快速复制功能
- 自动过期处理

### 4. 数据存储
- 使用 localStorage 本地存储历史记录
- 数据持久化，刷新页面不丢失
- 自动清理过期记录

## 技术栈

- **HTML5**: 页面结构
- **CSS3**: 样式设计（含动画和响应式）
- **JavaScript (Vanilla)**: 交互逻辑
- **LocalStorage**: 数据持久化

## 文件说明

```
qiyeWeComApp/
├── index.html      # 页面结构
├── styles.css      # 样式文件
├── script.js       # 交互逻辑
└── README.md       # 使用说明
```

## 使用说明

### 本地运行
1. 在浏览器中直接打开 `index.html` 文件
2. 或使用本地服务器运行（推荐）

```bash
# 使用 Python 3
python -m http.server 8000

# 使用 Python 2
python -m SimpleHTTPServer 8000

# 使用 Node.js http-server
http-server
```

然后访问 `http://localhost:8000`

### 手机号要求
- 必须输入有效的中国手机号
- 格式：1开头，11位数字

### 密码规则
- 6位随机数字
- 自动生成，无需手动设置
- 有效期：72小时
- 每个手机号最多申请5次

## 功能演示

1. **输入手机号** → 在输入框中输入有效的手机号码
2. **点击"获取管理员密码"** → 系统生成6位密码
3. **查看历史记录** → 所有申请的密码及其状态
4. **复制密码** → 点击操作栏的"复制"按钮，快速复制到剪贴板

## 浏览器兼容性

- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+
- 移动浏览器（iOS Safari、Android Chrome）

## 响应式设计

- 桌面端：优化布局，最大宽度 600px
- 平板端：自适应缩放
- 手机端：全屏展示，字体和按钮合理调整

## 数据持久化

所有数据保存在浏览器的 localStorage 中：
- 键名：`loginHistory`
- 存储结构：JSON 数组，包含所有密码申请记录

## 安全建议

1. **HTTPS 部署**：生产环境必须使用 HTTPS
2. **CSRF 防护**：如需连接服务器，实现 CSRF 防护
3. **输入验证**：服务器端需要额外验证所有输入
4. **数据加密**：敏感数据传输需加密

## 扩展建议

1. **后端接口集成**：连接企业微信 API 进行真实认证
2. **短信验证**：添加短信验证码确认身份
3. **二次验证**：重要操作需要二次确认
4. **操作日志**：记录所有操作日志用于审计
5. **权限管理**：不同角色的权限差异

## 常见问题

**Q: 密码保存在哪里？**
A: 保存在浏览器的 localStorage，仅在当前浏览器和设备上可见。

**Q: 刷新页面后历史记录还在吗？**
A: 是的，数据保存在本地，刷新不会丢失。

**Q: 可以手动删除历史记录吗？**
A: 当前版本不支持手动删除，但可以通过清空浏览器缓存实现。

**Q: 如何修改企业信息？**
A: 编辑 `index.html` 中的公司名称和公司信息文本。

## 联系方式

如有问题或建议，请联系技术团队。

---

更新时间：2025年12月8日