feat(admin): 实现管理员模式切换和扫码登录功能
- 新增管理员模式切换方案，统一管理所有管理员功能 - 实现扫码登录功能，支持用户通过小程序扫描网页端二维码快速登录 - 添加管理员面板组件，集中展示所有管理员功能 - 开发扫码登录按钮和扫描器组件，方便集成到不同页面 - 优化用户界面设计，提高管理员用户的使用体验
This commit is contained in:
226
docs/ADMIN_MODE_SOLUTION.md
Normal file
226
docs/ADMIN_MODE_SOLUTION.md
Normal file
@@ -0,0 +1,226 @@
|
||||
# 🎯 管理员模式切换方案
|
||||
|
||||
## 📋 **问题分析**
|
||||
|
||||
### 原始问题
|
||||
- 用户卡片中有两个扫码入口（门店核销 + 扫码登录）
|
||||
- 用户体验不友好，容易混淆
|
||||
- 管理员功能分散，缺乏统一入口
|
||||
|
||||
### 解决思路
|
||||
设计一个管理员模式切换系统，通过模式切换来统一管理所有管理员功能。
|
||||
|
||||
## 🚀 **解决方案**
|
||||
|
||||
### 方案概述
|
||||
创建一个**管理员模式切换**系统，包含：
|
||||
1. **模式切换按钮** - 在普通用户模式和管理员模式之间切换
|
||||
2. **统一管理面板** - 集中展示所有管理员功能
|
||||
3. **状态持久化** - 记住用户的模式选择
|
||||
|
||||
### 核心组件
|
||||
|
||||
#### 1. **useAdminMode Hook**
|
||||
```typescript
|
||||
// src/hooks/useAdminMode.ts
|
||||
const { isAdminMode, toggleAdminMode, setAdminMode } = useAdminMode();
|
||||
```
|
||||
|
||||
**功能特性：**
|
||||
- ✅ 模式状态管理
|
||||
- ✅ 本地存储持久化
|
||||
- ✅ 切换提示反馈
|
||||
|
||||
#### 2. **AdminPanel 组件**
|
||||
```typescript
|
||||
// src/components/AdminPanel.tsx
|
||||
<AdminPanel visible={showAdminPanel} onClose={handleCloseAdminPanel} />
|
||||
```
|
||||
|
||||
**功能特性：**
|
||||
- ✅ 底部弹出面板设计
|
||||
- ✅ 网格布局展示功能
|
||||
- ✅ 图标 + 描述的直观界面
|
||||
- ✅ 点击遮罩关闭
|
||||
|
||||
#### 3. **UserCard 集成**
|
||||
更新用户卡片，集成模式切换功能：
|
||||
- 模式切换按钮
|
||||
- 管理面板入口
|
||||
- 状态指示器
|
||||
|
||||
## 🎨 **用户界面设计**
|
||||
|
||||
### 模式切换按钮
|
||||
```
|
||||
[普通用户] ←→ [管理员] [管理面板]
|
||||
```
|
||||
|
||||
- **普通用户模式**：灰色按钮，只显示基础功能
|
||||
- **管理员模式**：蓝色按钮，显示管理面板入口
|
||||
|
||||
### 管理员面板
|
||||
```
|
||||
┌─────────────────────────────────┐
|
||||
│ 🔧 管理员面板 [关闭] │
|
||||
├─────────────────────────────────┤
|
||||
│ [🔍 门店核销] [🔍 扫码登录] │
|
||||
│ [👤 用户管理] [🏪 门店管理] │
|
||||
│ [⚙️ 系统设置] │
|
||||
├─────────────────────────────────┤
|
||||
│ 💡 管理员功能仅对具有管理权限... │
|
||||
└─────────────────────────────────┘
|
||||
```
|
||||
|
||||
## 📱 **用户体验流程**
|
||||
|
||||
### 普通用户模式
|
||||
1. 用户看到简洁的用户卡片
|
||||
2. 只显示基础功能入口
|
||||
3. 管理员用户可以看到模式切换按钮
|
||||
|
||||
### 管理员模式
|
||||
1. 点击切换到管理员模式
|
||||
2. 显示"管理面板"入口按钮
|
||||
3. 点击进入统一的管理功能面板
|
||||
4. 选择具体的管理功能
|
||||
|
||||
### 功能访问路径
|
||||
```
|
||||
用户卡片 → 切换管理员模式 → 管理面板 → 具体功能
|
||||
```
|
||||
|
||||
## 🔧 **技术实现**
|
||||
|
||||
### 文件结构
|
||||
```
|
||||
src/
|
||||
├── hooks/
|
||||
│ └── useAdminMode.ts # 管理员模式Hook
|
||||
├── components/
|
||||
│ ├── AdminPanel.tsx # 管理员面板组件
|
||||
│ └── AdminPanel.scss # 面板样式
|
||||
└── pages/user/components/
|
||||
└── UserCard.tsx # 更新的用户卡片
|
||||
```
|
||||
|
||||
### 核心功能
|
||||
|
||||
#### 状态管理
|
||||
```typescript
|
||||
const [isAdminMode, setIsAdminMode] = useState(false);
|
||||
const [showAdminPanel, setShowAdminPanel] = useState(false);
|
||||
```
|
||||
|
||||
#### 本地存储
|
||||
```typescript
|
||||
// 保存模式状态
|
||||
Taro.setStorageSync('admin_mode', newMode);
|
||||
|
||||
// 加载模式状态
|
||||
const savedMode = Taro.getStorageSync('admin_mode');
|
||||
```
|
||||
|
||||
#### 权限控制
|
||||
```typescript
|
||||
{isAdmin() && (
|
||||
<AdminModeToggle />
|
||||
)}
|
||||
```
|
||||
|
||||
## 🎯 **功能特性**
|
||||
|
||||
### ✅ **已实现功能**
|
||||
1. **模式切换** - 普通用户 ↔ 管理员模式
|
||||
2. **状态持久化** - 记住用户选择
|
||||
3. **统一面板** - 集中管理功能入口
|
||||
4. **权限控制** - 只对管理员显示
|
||||
5. **用户反馈** - 切换提示和状态指示
|
||||
6. **响应式设计** - 适配不同屏幕尺寸
|
||||
|
||||
### 🔄 **管理员功能列表**
|
||||
1. **门店核销** - 扫码核销用户优惠券
|
||||
2. **扫码登录** - 扫码快速登录网页端
|
||||
3. **用户管理** - 管理系统用户信息（待开发）
|
||||
4. **门店管理** - 管理门店信息和设置（待开发）
|
||||
5. **系统设置** - 系统配置和参数管理（待开发）
|
||||
|
||||
## 📊 **对比效果**
|
||||
|
||||
### 修改前
|
||||
```
|
||||
❌ 两个扫码图标并排显示
|
||||
❌ 功能入口分散
|
||||
❌ 用户容易混淆
|
||||
❌ 界面显得杂乱
|
||||
```
|
||||
|
||||
### 修改后
|
||||
```
|
||||
✅ 统一的模式切换入口
|
||||
✅ 清晰的功能分类
|
||||
✅ 直观的管理面板
|
||||
✅ 更好的用户体验
|
||||
```
|
||||
|
||||
## 🚀 **使用方法**
|
||||
|
||||
### 1. 管理员用户操作
|
||||
1. 在个人中心看到模式切换按钮
|
||||
2. 点击切换到"管理员"模式
|
||||
3. 点击"管理面板"按钮
|
||||
4. 在弹出面板中选择需要的功能
|
||||
|
||||
### 2. 开发者扩展
|
||||
添加新的管理功能：
|
||||
```typescript
|
||||
// 在 AdminPanel.tsx 中添加新功能
|
||||
{
|
||||
id: 'new-feature',
|
||||
title: '新功能',
|
||||
description: '功能描述',
|
||||
icon: <NewIcon className="text-blue-500" size="24" />,
|
||||
color: 'bg-blue-50 border-blue-200',
|
||||
onClick: () => {
|
||||
navTo('/new-feature-page', true);
|
||||
onClose?.();
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 🎨 **样式定制**
|
||||
|
||||
### 主题色彩
|
||||
- **普通模式**：灰色系 (`bg-gray-100`, `text-gray-600`)
|
||||
- **管理员模式**：蓝色系 (`bg-blue-500`, `text-white`)
|
||||
- **功能卡片**：彩色分类（蓝、绿、紫、橙、灰）
|
||||
|
||||
### 动画效果
|
||||
- 模式切换：`transition-all 0.3s ease`
|
||||
- 面板弹出：`slideUp` 动画
|
||||
- 按钮点击：`scale(0.95)` 反馈
|
||||
|
||||
## 🔮 **未来扩展**
|
||||
|
||||
### 计划功能
|
||||
1. **角色权限** - 不同管理员角色显示不同功能
|
||||
2. **快捷操作** - 常用功能的快捷入口
|
||||
3. **统计面板** - 管理数据的可视化展示
|
||||
4. **通知中心** - 管理员消息和提醒
|
||||
|
||||
### 技术优化
|
||||
1. **懒加载** - 按需加载管理功能模块
|
||||
2. **缓存优化** - 管理面板状态缓存
|
||||
3. **性能监控** - 管理功能使用统计
|
||||
|
||||
## 🎉 **总结**
|
||||
|
||||
这个管理员模式切换方案成功解决了原有的用户体验问题：
|
||||
|
||||
1. **统一入口** - 所有管理功能通过统一面板访问
|
||||
2. **清晰分类** - 功能按类型分组，易于理解
|
||||
3. **状态记忆** - 用户选择会被记住
|
||||
4. **扩展性强** - 易于添加新的管理功能
|
||||
5. **用户友好** - 直观的界面和流畅的交互
|
||||
|
||||
现在管理员用户可以享受更加统一和专业的管理体验！🚀
|
||||
214
docs/QR_LOGIN_INTEGRATION.md
Normal file
214
docs/QR_LOGIN_INTEGRATION.md
Normal file
@@ -0,0 +1,214 @@
|
||||
# 微信小程序扫码登录集成文档
|
||||
|
||||
## 概述
|
||||
|
||||
本文档介绍如何在微信小程序中集成扫码登录功能，支持用户通过小程序扫描网页端二维码快速登录。
|
||||
|
||||
## 功能特性
|
||||
|
||||
- ✅ **多平台支持** - 支持网页端、移动APP、微信小程序
|
||||
- ✅ **安全可靠** - Token有效期控制，防重复使用
|
||||
- ✅ **用户体验好** - 5分钟有效期，实时状态反馈
|
||||
- ✅ **微信集成** - 自动获取微信用户信息
|
||||
- ✅ **组件化设计** - 提供多种使用方式
|
||||
|
||||
## 后端接口
|
||||
|
||||
### 1. 生成扫码token
|
||||
```
|
||||
POST /api/qr-login/generate
|
||||
```
|
||||
|
||||
### 2. 检查登录状态
|
||||
```
|
||||
GET /api/qr-login/status/{token}
|
||||
```
|
||||
|
||||
### 3. 确认登录（通用）
|
||||
```
|
||||
POST /api/qr-login/confirm
|
||||
```
|
||||
|
||||
### 4. 微信小程序专用确认接口
|
||||
```
|
||||
POST /api/qr-login/wechat-confirm
|
||||
```
|
||||
|
||||
## 前端集成
|
||||
|
||||
### 1. API接口层
|
||||
文件：`src/api/qr-login/index.ts`
|
||||
|
||||
提供了完整的扫码登录API接口封装：
|
||||
- `generateQRToken()` - 生成扫码token
|
||||
- `checkQRLoginStatus()` - 检查登录状态
|
||||
- `confirmQRLogin()` - 确认登录
|
||||
- `confirmWechatQRLogin()` - 微信小程序专用确认
|
||||
|
||||
### 2. Hook层
|
||||
文件：`src/hooks/useQRLogin.ts`
|
||||
|
||||
提供了扫码登录的状态管理和业务逻辑：
|
||||
```typescript
|
||||
const {
|
||||
state, // 当前状态
|
||||
error, // 错误信息
|
||||
result, // 登录结果
|
||||
isLoading, // 是否加载中
|
||||
startScan, // 开始扫码
|
||||
cancel, // 取消扫码
|
||||
reset, // 重置状态
|
||||
handleScanResult, // 处理扫码结果
|
||||
canScan // 是否可以扫码
|
||||
} = useQRLogin();
|
||||
```
|
||||
|
||||
### 3. 组件层
|
||||
|
||||
#### QRLoginScanner 完整扫码组件
|
||||
文件：`src/components/QRLoginScanner.tsx`
|
||||
|
||||
功能完整的扫码登录组件，包含状态显示和错误处理：
|
||||
```tsx
|
||||
<QRLoginScanner
|
||||
onSuccess={(result) => console.log('登录成功', result)}
|
||||
onError={(error) => console.log('登录失败', error)}
|
||||
buttonText="扫码登录"
|
||||
showStatus={true}
|
||||
/>
|
||||
```
|
||||
|
||||
#### QRLoginButton 简化按钮组件
|
||||
文件：`src/components/QRLoginButton.tsx`
|
||||
|
||||
简化的按钮组件，支持两种模式：
|
||||
```tsx
|
||||
{/* 直接扫码模式 */}
|
||||
<QRLoginButton
|
||||
text="扫码登录"
|
||||
onSuccess={handleSuccess}
|
||||
onError={handleError}
|
||||
/>
|
||||
|
||||
{/* 页面跳转模式 */}
|
||||
<QRLoginButton
|
||||
text="扫码登录"
|
||||
usePageMode={true}
|
||||
/>
|
||||
```
|
||||
|
||||
### 4. 页面层
|
||||
文件：`src/pages/qr-login/index.tsx`
|
||||
|
||||
专门的扫码登录页面，提供完整的用户体验：
|
||||
- 用户信息展示
|
||||
- 扫码功能
|
||||
- 使用说明
|
||||
- 登录历史
|
||||
- 安全提示
|
||||
|
||||
## 使用方式
|
||||
|
||||
### 方式一：在现有组件中集成
|
||||
|
||||
```tsx
|
||||
import { useQRLogin } from '@/hooks/useQRLogin';
|
||||
|
||||
const MyComponent = () => {
|
||||
const { startScan, isLoading } = useQRLogin();
|
||||
|
||||
const handleScan = async () => {
|
||||
try {
|
||||
await startScan();
|
||||
} catch (error) {
|
||||
console.error('扫码失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Button loading={isLoading} onClick={handleScan}>
|
||||
扫码登录
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### 方式二：使用预制组件
|
||||
|
||||
```tsx
|
||||
import QRLoginButton from '@/components/QRLoginButton';
|
||||
|
||||
const MyComponent = () => {
|
||||
return (
|
||||
<QRLoginButton
|
||||
text="扫码登录"
|
||||
usePageMode={true}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### 方式三：跳转到专门页面
|
||||
|
||||
```tsx
|
||||
import Taro from '@tarojs/taro';
|
||||
|
||||
const handleQRLogin = () => {
|
||||
Taro.navigateTo({
|
||||
url: '/pages/qr-login/index'
|
||||
});
|
||||
};
|
||||
```
|
||||
|
||||
## 工作流程
|
||||
|
||||
### 网页端流程
|
||||
1. 用户访问登录页面
|
||||
2. 点击"扫码登录"按钮
|
||||
3. 调用 `POST /api/qr-login/generate` 生成token
|
||||
4. 显示包含token的二维码
|
||||
5. 每2秒调用 `GET /api/qr-login/status/{token}` 检查状态
|
||||
6. 状态变为 `confirmed` 时获取JWT token
|
||||
7. 自动跳转到主页面
|
||||
|
||||
### 小程序端流程
|
||||
1. 用户在小程序中点击扫码登录
|
||||
2. 调用 `Taro.scanCode()` 扫描二维码
|
||||
3. 解析二维码获取token
|
||||
4. 调用 `POST /api/qr-login/wechat-confirm` 确认登录
|
||||
5. 传递用户ID和微信用户信息
|
||||
6. 显示登录确认成功提示
|
||||
|
||||
## 安全考虑
|
||||
|
||||
1. **Token有效期** - 默认5分钟有效期，防止长期暴露
|
||||
2. **一次性使用** - Token确认后立即失效，防止重复使用
|
||||
3. **用户确认** - 需要用户主动确认，防止误操作
|
||||
4. **来源验证** - 只扫描官方网站的二维码
|
||||
5. **权限检查** - 确保用户已登录小程序
|
||||
|
||||
## 错误处理
|
||||
|
||||
常见错误及处理方式：
|
||||
|
||||
1. **用户未登录** - 提示用户先登录小程序
|
||||
2. **扫码失败** - 提示重新扫码或检查二维码
|
||||
3. **Token无效** - 提示二维码已过期，请刷新
|
||||
4. **网络错误** - 提示检查网络连接
|
||||
5. **权限拒绝** - 引导用户开启相机权限
|
||||
|
||||
## 测试建议
|
||||
|
||||
1. **功能测试** - 测试完整的扫码登录流程
|
||||
2. **异常测试** - 测试各种异常情况的处理
|
||||
3. **性能测试** - 测试扫码响应速度和网络请求
|
||||
4. **兼容性测试** - 测试不同设备和微信版本
|
||||
5. **安全测试** - 测试Token安全性和权限控制
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 确保后端接口已正确实现
|
||||
2. 配置正确的API基础URL
|
||||
3. 处理好用户权限和登录状态
|
||||
4. 提供清晰的用户提示和错误信息
|
||||
5. 考虑网络异常和超时情况
|
||||
Reference in New Issue
Block a user