feat(admin): 实现管理员模式切换和扫码登录功能

- 新增管理员模式切换方案，统一管理所有管理员功能
- 实现扫码登录功能，支持用户通过小程序扫描网页端二维码快速登录
- 添加管理员面板组件，集中展示所有管理员功能
- 开发扫码登录按钮和扫描器组件，方便集成到不同页面
- 优化用户界面设计，提高管理员用户的使用体验

docs/ADMIN_MODE_SOLUTION.md

@@ -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. **用户友好** - 直观的界面和流畅的交互
+
+现在管理员用户可以享受更加统一和专业的管理体验！🚀

docs/QR_LOGIN_INTEGRATION.md

@@ -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. 考虑网络异常和超时情况

src/api/qr-login/index.ts

@@ -0,0 +1,248 @@
+import request from '@/utils/request';
+import type { ApiResult } from '@/api';
+import Taro from '@tarojs/taro';
+
+/**
+ * 扫码登录相关接口
+ */
+
+// 生成扫码token请求参数
+export interface GenerateQRTokenParam {
+  // 客户端类型：web, app, wechat
+  clientType?: string;
+  // 设备信息
+  deviceInfo?: string;
+  // 过期时间（分钟）
+  expireMinutes?: number;
+}
+
+// 生成扫码token响应
+export interface GenerateQRTokenResult {
+  // 扫码token
+  token: string;
+  // 二维码内容（通常是包含token的URL或JSON）
+  qrContent: string;
+  // 过期时间戳
+  expireTime: number;
+  // 二维码图片URL（可选）
+  qrImageUrl?: string;
+}
+
+// 扫码状态枚举
+export enum QRLoginStatus {
+  PENDING = 'pending',      // 等待扫码
+  SCANNED = 'scanned',      // 已扫码，等待确认
+  CONFIRMED = 'confirmed',  // 已确认登录
+  EXPIRED = 'expired',      // 已过期
+  CANCELLED = 'cancelled'   // 已取消
+}
+
+// 检查扫码状态响应
+export interface QRLoginStatusResult {
+  // 当前状态
+  status: QRLoginStatus;
+  // 状态描述
+  message?: string;
+  // 如果已确认登录，返回JWT token
+  accessToken?: string;
+  // 用户信息
+  userInfo?: {
+    userId: number;
+    nickname?: string;
+    avatar?: string;
+    phone?: string;
+  };
+  // 剩余有效时间（秒）
+  remainingTime?: number;
+}
+
+// 确认登录请求参数
+export interface ConfirmLoginParam {
+  // 扫码token
+  token: string;
+  // 用户ID
+  userId: number;
+  // 登录平台：web, app, wechat
+  platform?: string;
+  // 微信用户信息（当platform为wechat时）
+  wechatInfo?: {
+    openid?: string;
+    unionid?: string;
+    nickname?: string;
+    avatar?: string;
+    gender?: number;
+  };
+  // 设备信息
+  deviceInfo?: string;
+}
+
+// 确认登录响应
+export interface ConfirmLoginResult {
+  // 是否成功
+  success: boolean;
+  // 消息
+  message: string;
+  // 登录用户信息
+  userInfo?: {
+    userId: number;
+    nickname?: string;
+    avatar?: string;
+    phone?: string;
+  };
+}
+
+/**
+ * 生成扫码登录token
+ */
+export async function generateQRToken(data?: GenerateQRTokenParam) {
+  const res = await request.post<ApiResult<GenerateQRTokenResult>>(
+    'http://127.0.0.1:9200/api/qr-login/generate',
+    {
+      clientType: 'wechat',
+      expireMinutes: 5,
+      ...data
+    }
+  );
+  if (res.code === 0 && res.data) {
+    return res.data;
+  }
+  return Promise.reject(new Error(res.message));
+}
+
+/**
+ * 检查扫码登录状态
+ */
+export async function checkQRLoginStatus(token: string) {
+  const res = await request.get<ApiResult<QRLoginStatusResult>>(
+    `http://127.0.0.1:9200/api/qr-login/status/${token}`
+  );
+  if (res.code === 0 && res.data) {
+    return res.data;
+  }
+  return Promise.reject(new Error(res.message));
+}
+
+/**
+ * 确认扫码登录（通用接口）
+ */
+export async function confirmQRLogin(data: ConfirmLoginParam) {
+  const res = await request.post<ApiResult<ConfirmLoginResult>>(
+    'http://127.0.0.1:9200/api/qr-login/confirm',
+    data
+  );
+  if (res.code === 0 && res.data) {
+    return res.data;
+  }
+  return Promise.reject(new Error(res.message));
+}
+
+/**
+ * 微信小程序扫码登录确认（便捷接口）
+ */
+export async function confirmWechatQRLogin(token: string, userId: number) {
+  try {
+    // 获取微信用户信息
+    const userInfo = await getUserProfile();
+
+    const data: ConfirmLoginParam = {
+      token,
+      userId,
+      platform: 'wechat',
+      wechatInfo: {
+        nickname: userInfo?.nickName,
+        avatar: userInfo?.avatarUrl,
+        gender: userInfo?.gender
+      },
+      deviceInfo: await getDeviceInfo()
+    };
+
+    const res = await request.post<ApiResult<ConfirmLoginResult>>(
+      'http://127.0.0.1:9200/api/qr-login/wechat-confirm',
+      data
+    );
+
+    if (res.code === 0 && res.data) {
+      return res.data;
+    }
+    return Promise.reject(new Error(res.message));
+  } catch (error: any) {
+    return Promise.reject(new Error(error.message || '确认登录失败'));
+  }
+}
+
+/**
+ * 获取微信用户信息
+ */
+async function getUserProfile() {
+  return new Promise<any>((resolve, reject) => {
+    Taro.getUserProfile({
+      desc: '用于扫码登录身份确认',
+      success: (res) => {
+        resolve(res.userInfo);
+      },
+      fail: (err) => {
+        // 如果获取失败，尝试使用已存储的用户信息
+        const storedUser = Taro.getStorageSync('User');
+        if (storedUser) {
+          resolve({
+            nickName: storedUser.nickname,
+            avatarUrl: storedUser.avatar,
+            gender: storedUser.gender
+          });
+        } else {
+          reject(err);
+        }
+      }
+    });
+  });
+}
+
+/**
+ * 获取设备信息
+ */
+async function getDeviceInfo() {
+  return new Promise<string>((resolve) => {
+    Taro.getSystemInfo({
+      success: (res) => {
+        const deviceInfo = {
+          platform: res.platform,
+          system: res.system,
+          version: res.version,
+          model: res.model,
+          brand: res.brand,
+          screenWidth: res.screenWidth,
+          screenHeight: res.screenHeight
+        };
+        resolve(JSON.stringify(deviceInfo));
+      },
+      fail: () => {
+        resolve('unknown');
+      }
+    });
+  });
+}
+
+/**
+ * 解析二维码内容，提取token
+ */
+export function parseQRContent(qrContent: string): string | null {
+  try {
+    // 尝试解析JSON格式
+    if (qrContent.startsWith('{')) {
+      const parsed = JSON.parse(qrContent);
+      return parsed.token || null;
+    }
+
+    // 尝试解析URL格式
+    if (qrContent.includes('token=')) {
+      const url = new URL(qrContent);
+      return url.searchParams.get('token');
+    }
+
+    // 直接返回内容作为token
+    return qrContent;
+  } catch (error) {
+    console.error('解析二维码内容失败:', error);
+    return null;
+  }
+}

src/app.config.ts

@@ -1,9 +1,10 @@
-export default defineAppConfig({
+export default {
   pages: [
     'pages/index/index',
     'pages/cart/cart',
     'pages/find/find',
-    'pages/user/user'
+    'pages/user/user',
+    'pages/qr-login/index'
   ],
   "subpackages": [
     {
@@ -136,4 +137,4 @@ export default defineAppConfig({
       "desc": "你的位置信息将用于小程序位置接口的效果展示"
     }
   }
-})
+}

src/app.scss

@@ -10,14 +10,14 @@ page{
   background-position: bottom;
 }
 
-// 在全局样式文件中添加
+/* 在全局样式文件中添加 */
 button {
   &::after {
     border: none !important;
   }
 }
 
-// 去掉 Grid 组件的边框
+/* 去掉 Grid 组件的边框 */
 .no-border-grid {
   .nut-grid-item {
     border: none !important;
@@ -38,7 +38,7 @@ button {
   }
 }
 
-// 微信授权按钮的特殊样式
+/* 微信授权按钮的特殊样式 */
 button[open-type="getPhoneNumber"] {
   background: none !important;
   padding: 0 !important;

src/components/AdminPanel.scss

@@ -0,0 +1,89 @@
+.admin-panel {
+  /* 面板动画 */
+  .admin-panel-content {
+    animation: slideUp 0.3s ease-out;
+  }
+
+  /* 网格布局优化 */
+  .admin-feature-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 12px;
+    
+    @media (max-width: 375px) {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  /* 功能卡片样式 */
+  .admin-feature-card {
+    transition: all 0.2s ease;
+    cursor: pointer;
+    
+    &:active {
+      transform: scale(0.95);
+    }
+    
+    &:hover {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+  }
+
+  /* 图标容器 */
+  .admin-feature-icon {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px;
+    margin-right: 8px;
+  }
+
+  /* 模式切换按钮动画 */
+  .mode-toggle-btn {
+    transition: all 0.3s ease;
+    cursor: pointer;
+    
+    &:active {
+      transform: scale(0.95);
+    }
+  }
+
+  /* 管理面板按钮 */
+  .admin-panel-btn {
+    transition: all 0.2s ease;
+    cursor: pointer;
+    
+    &:active {
+      transform: scale(0.95);
+      background-color: rgba(59, 130, 246, 0.1);
+    }
+  }
+}
+
+/* 滑入动画 */
+@keyframes slideUp {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+/* 遮罩层动画 */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.admin-panel-overlay {
+  animation: fadeIn 0.3s ease-out;
+}

src/components/AdminPanel.tsx

@@ -0,0 +1,151 @@
+import React from 'react';
+import { View, Text } from '@tarojs/components';
+import { Button } from '@nutui/nutui-react-taro';
+import { Scan, Setting, User, Shop } from '@nutui/icons-react-taro';
+import navTo from '@/utils/common';
+import './AdminPanel.scss';
+
+export interface AdminPanelProps {
+  /** 是否显示面板 */
+  visible: boolean;
+  /** 关闭面板回调 */
+  onClose?: () => void;
+  /** 自定义样式类名 */
+  className?: string;
+}
+
+/**
+ * 管理员功能面板组件
+ */
+const AdminPanel: React.FC<AdminPanelProps> = ({
+  visible,
+  onClose,
+  className = ''
+}) => {
+  if (!visible) return null;
+
+  // 管理员功能列表
+  const adminFeatures = [
+    {
+      id: 'store-verification',
+      title: '门店核销',
+      description: '扫码核销用户优惠券',
+      icon: <Scan className="text-blue-500" size="24" />,
+      color: 'bg-blue-50 border-blue-200',
+      onClick: () => {
+        navTo('/user/store/verification', true);
+        onClose?.();
+      }
+    },
+    {
+      id: 'qr-login',
+      title: '扫码登录',
+      description: '扫码快速登录网页端',
+      icon: <Scan className="text-green-500" size="24" />,
+      color: 'bg-green-50 border-green-200',
+      onClick: () => {
+        navTo('/pages/qr-login/index', true);
+        onClose?.();
+      }
+    },
+    {
+      id: 'user-management',
+      title: '用户管理',
+      description: '管理系统用户信息',
+      icon: <User className="text-purple-500" size="24" />,
+      color: 'bg-purple-50 border-purple-200',
+      onClick: () => {
+        // TODO: 跳转到用户管理页面
+        console.log('跳转到用户管理');
+        onClose?.();
+      }
+    },
+    {
+      id: 'store-management',
+      title: '门店管理',
+      description: '管理门店信息和设置',
+      icon: <Shop className="text-orange-500" size="24" />,
+      color: 'bg-orange-50 border-orange-200',
+      onClick: () => {
+        // TODO: 跳转到门店管理页面
+        console.log('跳转到门店管理');
+        onClose?.();
+      }
+    },
+    {
+      id: 'system-settings',
+      title: '系统设置',
+      description: '系统配置和参数管理',
+      icon: <Setting className="text-gray-500" size="24" />,
+      color: 'bg-gray-50 border-gray-200',
+      onClick: () => {
+        // TODO: 跳转到系统设置页面
+        console.log('跳转到系统设置');
+        onClose?.();
+      }
+    }
+  ];
+
+  return (
+    <View className={`admin-panel ${className}`}>
+      {/* 遮罩层 */}
+      <View
+        className="fixed inset-0 bg-black bg-opacity-50 z-40"
+        onClick={onClose}
+      />
+
+      {/* 面板内容 */}
+      <View className="fixed bottom-0 left-0 right-0 bg-white rounded-t-3xl z-50 max-h-[70vh] overflow-hidden">
+        {/* 面板头部 */}
+        <View className="flex items-center justify-between p-4 border-b border-gray-100">
+          <View className="flex items-center">
+            <Setting className="text-blue-500 mr-2" size="20" />
+            <Text className="text-lg font-bold text-gray-800">管理员面板</Text>
+          </View>
+          <Button
+            size="small"
+            type="default"
+            onClick={onClose}
+            className="text-gray-500"
+          >
+            关闭
+          </Button>
+        </View>
+
+        {/* 功能网格 */}
+        <View className="p-4 pb-8">
+          <View className="grid grid-cols-2 gap-3">
+            {adminFeatures.map((feature) => (
+              <View
+                key={feature.id}
+                className={`${feature.color} border rounded-xl p-4 active:scale-95 transition-transform`}
+                onClick={feature.onClick}
+              >
+                <View className="flex items-center mb-2">
+                  {feature.icon}
+                  <Text className="ml-2 font-medium text-gray-800">
+                    {feature.title}
+                  </Text>
+                </View>
+                <Text className="text-xs text-gray-600 leading-relaxed">
+                  {feature.description}
+                </Text>
+              </View>
+            ))}
+          </View>
+        </View>
+
+        {/* 底部提示 */}
+        <View className="px-4 pb-4">
+          <View className="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
+            <Text className="text-xs text-yellow-700 text-center">
+              💡 管理员功能仅对具有管理权限的用户开放
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default AdminPanel;

src/components/CouponCard.scss

@@ -9,25 +9,25 @@
   border: 2px solid #f0f0f0;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 
-  // 更精美的阴影效果
+  /* 更精美的阴影效果 */
-  //box-shadow:
+  /*box-shadow:
-  //  0 4px 20px rgba(0, 0, 0, 0.08),
+    0 4px 20px rgba(0, 0, 0, 0.08),
-  //  0 1px 3px rgba(0, 0, 0, 0.1);
+    0 1px 3px rgba(0, 0, 0, 0.1);*/
 
-  // 边框光晕效果
+  /* 边框光晕效果 */
-  //&::before {
+  /*&::before {
-  //  content: '';
+    content: '';
-  //  position: absolute;
+    position: absolute;
-  //  top: 0;
+    top: 0;
-  //  left: 0;
+    left: 0;
-  //  right: 0;
+    right: 0;
-  //  bottom: 0;
+    bottom: 0;
-  //  border-radius: 16px;
+    border-radius: 16px;
-  //  padding: 1px;
+    padding: 1px;
-  //  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
-  //  mask-composite: exclude;
+    mask-composite: exclude;
-  //  pointer-events: none;
+    pointer-events: none;
-  //}
+  }*/
 
   &:active {
     transform: scale(0.98) translateY(1px);
@@ -52,7 +52,7 @@
     position: relative;
     overflow: hidden;
 
-    // 添加光泽效果
+    /* 添加光泽效果 */
     &::after {
       content: '';
       position: absolute;
@@ -199,7 +199,7 @@
         line-height: 1.3;
         letter-spacing: -0.5px;
 
-        // 添加文字渐变效果
+        /* 添加文字渐变效果 */
         background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
@@ -212,7 +212,7 @@
         line-height: 1.2;
         font-weight: 500;
 
-        // 添加图标前缀
+        /* 添加图标前缀 */
         &::before {
           content: '⏰';
           margin-right: 6px;
@@ -239,7 +239,7 @@
         position: relative;
         overflow: hidden;
 
-        // 添加按钮光泽效果
+        /* 添加按钮光泽效果 */
         &::before {
           content: '';
           position: absolute;
@@ -324,7 +324,7 @@
   }
 }
 
-// 动画效果
+/* 动画效果 */
 @keyframes shimmer {
   0% {
     transform: translateX(-100%) translateY(-100%) rotate(45deg);
@@ -334,7 +334,7 @@
   }
 }
 
-// 响应式优化
+/* 响应式优化 */
 @media (max-width: 768px) {
   .coupon-card {
     height: 150px;

src/components/QRLoginButton.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { View, Text } from '@tarojs/components';
+import { Button } from '@nutui/nutui-react-taro';
+import { Scan } from '@nutui/icons-react-taro';
+import Taro from '@tarojs/taro';
+import { useQRLogin } from '@/hooks/useQRLogin';
+
+export interface QRLoginButtonProps {
+  /** 按钮类型 */
+  type?: 'primary' | 'success' | 'warning' | 'danger' | 'default';
+  /** 按钮大小 */
+  size?: 'large' | 'normal' | 'small';
+  /** 按钮文本 */
+  text?: string;
+  /** 是否显示图标 */
+  showIcon?: boolean;
+  /** 自定义样式类名 */
+  className?: string;
+  /** 点击成功回调 */
+  onSuccess?: (result: any) => void;
+  /** 点击失败回调 */
+  onError?: (error: string) => void;
+  /** 是否使用页面模式（跳转到专门页面） */
+  usePageMode?: boolean;
+}
+
+/**
+ * 扫码登录按钮组件
+ */
+const QRLoginButton: React.FC<QRLoginButtonProps> = ({
+  type = 'primary',
+  size = 'normal',
+  text = '扫码登录',
+  showIcon = true,
+  className = '',
+  onSuccess,
+  onError,
+  usePageMode = false
+}) => {
+  const { startScan, isLoading, canScan } = useQRLogin();
+
+  // 处理点击事件
+  const handleClick = async () => {
+    if (usePageMode) {
+      // 跳转到专门的扫码登录页面
+      if (canScan()) {
+        Taro.navigateTo({
+          url: '/pages/qr-login/index'
+        });
+      } else {
+        Taro.showToast({
+          title: '请先登录小程序',
+          icon: 'error'
+        });
+      }
+      return;
+    }
+
+    // 直接执行扫码登录
+    try {
+      await startScan();
+      // 成功回调会在Hook内部处理
+    } catch (error: any) {
+      onError?.(error.message || '扫码登录失败');
+    }
+  };
+
+  const disabled = !canScan() || isLoading;
+
+  return (
+    <Button
+      type={type}
+      size={size}
+      loading={isLoading}
+      disabled={disabled}
+      onClick={handleClick}
+      className={className}
+    >
+      {showIcon && !isLoading && (
+        <Scan className="mr-1" />
+      )}
+      {isLoading ? '扫码中...' : (disabled && !canScan() ? '请先登录' : text)}
+    </Button>
+  );
+};
+
+export default QRLoginButton;

src/components/QRLoginScanner.tsx

@@ -0,0 +1,182 @@
+import React from 'react';
+import { View, Text } from '@tarojs/components';
+import { Button, Loading } from '@nutui/nutui-react-taro';
+import { Scan, Success, Failure } from '@nutui/icons-react-taro';
+import { useQRLogin, ScanLoginState } from '@/hooks/useQRLogin';
+
+export interface QRLoginScannerProps {
+  /** 扫码成功回调 */
+  onSuccess?: (result: any) => void;
+  /** 扫码失败回调 */
+  onError?: (error: string) => void;
+  /** 自定义样式类名 */
+  className?: string;
+  /** 按钮文本 */
+  buttonText?: string;
+  /** 是否显示状态信息 */
+  showStatus?: boolean;
+}
+
+/**
+ * 扫码登录组件
+ */
+const QRLoginScanner: React.FC<QRLoginScannerProps> = ({
+  onSuccess,
+  onError,
+  className = '',
+  buttonText = '扫码登录',
+  showStatus = true
+}) => {
+  const {
+    state,
+    error,
+    result,
+    isLoading,
+    startScan,
+    cancel,
+    reset,
+    canScan
+  } = useQRLogin();
+
+  // 处理扫码成功
+  React.useEffect(() => {
+    if (state === ScanLoginState.SUCCESS && result) {
+      onSuccess?.(result);
+    }
+  }, [state, result, onSuccess]);
+
+  // 处理扫码失败
+  React.useEffect(() => {
+    if (state === ScanLoginState.ERROR && error) {
+      onError?.(error);
+    }
+  }, [state, error, onError]);
+
+  // 获取状态显示内容
+  const getStatusContent = () => {
+    switch (state) {
+      case ScanLoginState.SCANNING:
+        return (
+          <View className="flex items-center justify-center text-blue-500">
+            <Loading className="mr-2" />
+            <Text>请扫描登录二维码...</Text>
+          </View>
+        );
+      
+      case ScanLoginState.CONFIRMING:
+        return (
+          <View className="flex items-center justify-center text-orange-500">
+            <Loading className="mr-2" />
+            <Text>正在确认登录...</Text>
+          </View>
+        );
+      
+      case ScanLoginState.SUCCESS:
+        return (
+          <View className="flex items-center justify-center text-green-500">
+            <Success className="mr-2" />
+            <Text>登录确认成功！</Text>
+          </View>
+        );
+      
+      case ScanLoginState.ERROR:
+        return (
+          <View className="flex items-center justify-center text-red-500">
+            <Failure className="mr-2" />
+            <Text>{error || '扫码登录失败'}</Text>
+          </View>
+        );
+      
+      default:
+        return null;
+    }
+  };
+
+  // 获取按钮状态
+  const getButtonProps = () => {
+    const disabled = !canScan() || isLoading;
+    
+    switch (state) {
+      case ScanLoginState.SCANNING:
+      case ScanLoginState.CONFIRMING:
+        return {
+          loading: true,
+          disabled: true,
+          text: state === ScanLoginState.SCANNING ? '扫码中...' : '确认中...',
+          onClick: cancel
+        };
+      
+      case ScanLoginState.SUCCESS:
+        return {
+          loading: false,
+          disabled: false,
+          text: '重新扫码',
+          onClick: reset
+        };
+      
+      case ScanLoginState.ERROR:
+        return {
+          loading: false,
+          disabled: false,
+          text: '重试',
+          onClick: startScan
+        };
+      
+      default:
+        return {
+          loading: false,
+          disabled,
+          text: disabled ? '请先登录' : buttonText,
+          onClick: startScan
+        };
+    }
+  };
+
+  const buttonProps = getButtonProps();
+
+  return (
+    <View className={`qr-login-scanner ${className}`}>
+      {/* 扫码按钮 */}
+      <Button
+        type="primary"
+        size="large"
+        loading={buttonProps.loading}
+        disabled={buttonProps.disabled}
+        onClick={buttonProps.onClick}
+        className="w-full"
+      >
+        {!buttonProps.loading && (
+          <Scan className="mr-2" />
+        )}
+        {buttonProps.text}
+      </Button>
+
+      {/* 状态显示 */}
+      {showStatus && (
+        <View className="mt-4 text-center">
+          {getStatusContent()}
+        </View>
+      )}
+
+      {/* 成功结果显示 */}
+      {state === ScanLoginState.SUCCESS && result && (
+        <View className="mt-4 p-4 bg-green-50 rounded-lg">
+          <Text className="text-sm text-green-700">
+            已为用户 {result.userInfo?.nickname || result.userInfo?.userId} 确认登录
+          </Text>
+        </View>
+      )}
+
+      {/* 使用说明 */}
+      {state === ScanLoginState.IDLE && (
+        <View className="mt-4 text-center">
+          <Text className="text-xs text-gray-500">
+            扫描网页端显示的登录二维码即可快速登录
+          </Text>
+        </View>
+      )}
+    </View>
+  );
+};
+
+export default QRLoginScanner;

src/hooks/useAdminMode.ts

@@ -0,0 +1,66 @@
+import { useState, useCallback, useEffect } from 'react';
+import Taro from '@tarojs/taro';
+
+/**
+ * 管理员模式Hook
+ * 用于管理管理员用户的模式切换（普通用户模式 vs 管理员模式）
+ */
+export function useAdminMode() {
+  const [isAdminMode, setIsAdminMode] = useState<boolean>(false);
+
+  // 从本地存储加载管理员模式状态
+  useEffect(() => {
+    try {
+      const savedMode = Taro.getStorageSync('admin_mode');
+      if (savedMode !== undefined) {
+        setIsAdminMode(savedMode === 'true' || savedMode === true);
+      }
+    } catch (error) {
+      console.warn('Failed to load admin mode from storage:', error);
+    }
+  }, []);
+
+  // 切换管理员模式
+  const toggleAdminMode = useCallback(() => {
+    const newMode = !isAdminMode;
+    setIsAdminMode(newMode);
+    
+    try {
+      // 保存到本地存储
+      Taro.setStorageSync('admin_mode', newMode);
+      
+      // 显示切换提示
+      Taro.showToast({
+        title: newMode ? '已切换到管理员模式' : '已切换到普通用户模式',
+        icon: 'success',
+        duration: 1500
+      });
+    } catch (error) {
+      console.error('Failed to save admin mode to storage:', error);
+    }
+  }, [isAdminMode]);
+
+  // 设置管理员模式
+  const setAdminMode = useCallback((mode: boolean) => {
+    if (mode !== isAdminMode) {
+      setIsAdminMode(mode);
+      try {
+        Taro.setStorageSync('admin_mode', mode);
+      } catch (error) {
+        console.error('Failed to save admin mode to storage:', error);
+      }
+    }
+  }, [isAdminMode]);
+
+  // 重置为普通用户模式
+  const resetToUserMode = useCallback(() => {
+    setAdminMode(false);
+  }, [setAdminMode]);
+
+  return {
+    isAdminMode,
+    toggleAdminMode,
+    setAdminMode,
+    resetToUserMode
+  };
+}

src/hooks/useQRLogin.ts

@@ -0,0 +1,227 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+import Taro from '@tarojs/taro';
+import { 
+  confirmWechatQRLogin, 
+  parseQRContent,
+  type ConfirmLoginResult 
+} from '@/api/qr-login';
+
+/**
+ * 扫码登录状态
+ */
+export enum ScanLoginState {
+  IDLE = 'idle',           // 空闲状态
+  SCANNING = 'scanning',   // 正在扫码
+  CONFIRMING = 'confirming', // 正在确认登录
+  SUCCESS = 'success',     // 登录成功
+  ERROR = 'error'          // 登录失败
+}
+
+/**
+ * 扫码登录Hook
+ */
+export function useQRLogin() {
+  const [state, setState] = useState<ScanLoginState>(ScanLoginState.IDLE);
+  const [error, setError] = useState<string>('');
+  const [result, setResult] = useState<ConfirmLoginResult | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  
+  // 用于取消操作的引用
+  const cancelRef = useRef<boolean>(false);
+
+  /**
+   * 重置状态
+   */
+  const reset = useCallback(() => {
+    setState(ScanLoginState.IDLE);
+    setError('');
+    setResult(null);
+    setIsLoading(false);
+    cancelRef.current = false;
+  }, []);
+
+  /**
+   * 开始扫码登录
+   */
+  const startScan = useCallback(async () => {
+    try {
+      reset();
+      setState(ScanLoginState.SCANNING);
+      
+      // 检查用户是否已登录
+      const userId = Taro.getStorageSync('UserId');
+      if (!userId) {
+        throw new Error('请先登录小程序');
+      }
+
+      // 调用扫码API
+      const scanResult = await new Promise<string>((resolve, reject) => {
+        Taro.scanCode({
+          onlyFromCamera: true,
+          scanType: ['qrCode'],
+          success: (res) => {
+            if (res.result) {
+              resolve(res.result);
+            } else {
+              reject(new Error('扫码结果为空'));
+            }
+          },
+          fail: (err) => {
+            reject(new Error(err.errMsg || '扫码失败'));
+          }
+        });
+      });
+
+      // 检查是否被取消
+      if (cancelRef.current) {
+        return;
+      }
+
+      // 解析二维码内容
+      const token = parseQRContent(scanResult);
+      if (!token) {
+        throw new Error('无效的登录二维码');
+      }
+
+      // 确认登录
+      setState(ScanLoginState.CONFIRMING);
+      setIsLoading(true);
+
+      const confirmResult = await confirmWechatQRLogin(token, parseInt(userId));
+      
+      if (cancelRef.current) {
+        return;
+      }
+
+      if (confirmResult.success) {
+        setState(ScanLoginState.SUCCESS);
+        setResult(confirmResult);
+        
+        // 显示成功提示
+        Taro.showToast({
+          title: '登录确认成功',
+          icon: 'success',
+          duration: 2000
+        });
+      } else {
+        throw new Error(confirmResult.message || '登录确认失败');
+      }
+
+    } catch (err: any) {
+      if (!cancelRef.current) {
+        setState(ScanLoginState.ERROR);
+        const errorMessage = err.message || '扫码登录失败';
+        setError(errorMessage);
+        
+        // 显示错误提示
+        Taro.showToast({
+          title: errorMessage,
+          icon: 'error',
+          duration: 3000
+        });
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  }, [reset]);
+
+  /**
+   * 取消扫码登录
+   */
+  const cancel = useCallback(() => {
+    cancelRef.current = true;
+    reset();
+  }, [reset]);
+
+  /**
+   * 处理扫码结果（用于已有扫码结果的情况）
+   */
+  const handleScanResult = useCallback(async (qrContent: string) => {
+    try {
+      reset();
+      setState(ScanLoginState.CONFIRMING);
+      setIsLoading(true);
+
+      // 检查用户是否已登录
+      const userId = Taro.getStorageSync('UserId');
+      if (!userId) {
+        throw new Error('请先登录小程序');
+      }
+
+      // 解析二维码内容
+      const token = parseQRContent(qrContent);
+      if (!token) {
+        throw new Error('无效的登录二维码');
+      }
+
+      // 确认登录
+      const confirmResult = await confirmWechatQRLogin(token, parseInt(userId));
+      
+      if (confirmResult.success) {
+        setState(ScanLoginState.SUCCESS);
+        setResult(confirmResult);
+        
+        // 显示成功提示
+        Taro.showToast({
+          title: '登录确认成功',
+          icon: 'success',
+          duration: 2000
+        });
+      } else {
+        throw new Error(confirmResult.message || '登录确认失败');
+      }
+
+    } catch (err: any) {
+      setState(ScanLoginState.ERROR);
+      const errorMessage = err.message || '登录确认失败';
+      setError(errorMessage);
+      
+      // 显示错误提示
+      Taro.showToast({
+        title: errorMessage,
+        icon: 'error',
+        duration: 3000
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  }, [reset]);
+
+  /**
+   * 检查是否可以进行扫码登录
+   */
+  const canScan = useCallback(() => {
+    const userId = Taro.getStorageSync('UserId');
+    const accessToken = Taro.getStorageSync('access_token');
+    return !!(userId && accessToken);
+  }, []);
+
+  // 组件卸载时取消操作
+  useEffect(() => {
+    return () => {
+      cancelRef.current = true;
+    };
+  }, []);
+
+  return {
+    // 状态
+    state,
+    error,
+    result,
+    isLoading,
+    
+    // 方法
+    startScan,
+    cancel,
+    reset,
+    handleScanResult,
+    canScan,
+    
+    // 便捷状态判断
+    isIdle: state === ScanLoginState.IDLE,
+    isScanning: state === ScanLoginState.SCANNING,
+    isConfirming: state === ScanLoginState.CONFIRMING,
+    isSuccess: state === ScanLoginState.SUCCESS,
+    isError: state === ScanLoginState.ERROR
+  };
+}

src/pages/qr-login/index.config.ts

@@ -0,0 +1,5 @@
+export default {
+  navigationBarTitleText: '扫码登录',
+  navigationBarTextStyle: 'black',
+  navigationBarBackgroundColor: '#ffffff'
+}

src/pages/qr-login/index.tsx

@@ -0,0 +1,193 @@
+import React, { useState } from 'react';
+import { View, Text } from '@tarojs/components';
+import { NavBar, Card, Divider, Button } from '@nutui/nutui-react-taro';
+import { ArrowLeft, Scan, Success, Failure, Tips } from '@nutui/icons-react-taro';
+import Taro from '@tarojs/taro';
+import QRLoginScanner from '@/components/QRLoginScanner';
+import { useUser } from '@/hooks/useUser';
+
+/**
+ * 扫码登录页面
+ */
+const QRLoginPage: React.FC = () => {
+  const [loginHistory, setLoginHistory] = useState<any[]>([]);
+  const { getDisplayName } = useUser();
+
+  // 处理扫码成功
+  const handleScanSuccess = (result: any) => {
+    console.log('扫码登录成功:', result);
+
+    // 添加到登录历史
+    const newRecord = {
+      id: Date.now(),
+      time: new Date().toLocaleString(),
+      userInfo: result.userInfo,
+      success: true
+    };
+    setLoginHistory(prev => [newRecord, ...prev.slice(0, 4)]); // 只保留最近5条记录
+
+    // 显示成功提示
+    Taro.showToast({
+      title: '登录确认成功',
+      icon: 'success',
+      duration: 2000
+    });
+  };
+
+  // 处理扫码失败
+  const handleScanError = (error: string) => {
+    console.error('扫码登录失败:', error);
+
+    // 添加到登录历史
+    const newRecord = {
+      id: Date.now(),
+      time: new Date().toLocaleString(),
+      error,
+      success: false
+    };
+    setLoginHistory(prev => [newRecord, ...prev.slice(0, 4)]);
+  };
+
+  // 返回上一页
+  const handleBack = () => {
+    Taro.navigateBack();
+  };
+
+  // 清除历史记录
+  const clearHistory = () => {
+    setLoginHistory([]);
+    Taro.showToast({
+      title: '已清除历史记录',
+      icon: 'success'
+    });
+  };
+
+  return (
+    <View className="qr-login-page min-h-screen bg-gray-50">
+      {/* 导航栏 */}
+      <NavBar
+        title="扫码登录"
+        leftShow
+        onBackClick={handleBack}
+        leftText={<ArrowLeft />}
+        className="bg-white"
+      />
+
+      {/* 主要内容 */}
+      <View className="p-4 space-y-4">
+        {/* 用户信息卡片 */}
+        <Card className="bg-white rounded-lg shadow-sm">
+          <View className="p-4">
+            <View className="flex items-center mb-4">
+              <View className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-3">
+                <Scan className="text-blue-500" size="24" />
+              </View>
+              <View>
+                <Text className="text-lg font-bold text-gray-800">
+                  {getDisplayName()}
+                </Text>
+                <Text className="text-sm text-gray-500">
+                  使用小程序扫码快速登录网页端
+                </Text>
+              </View>
+            </View>
+
+            {/* 扫码登录组件 */}
+            <QRLoginScanner
+              onSuccess={handleScanSuccess}
+              onError={handleScanError}
+              buttonText="开始扫码登录"
+              showStatus={true}
+            />
+          </View>
+        </Card>
+
+        {/* 使用说明 */}
+        <Card className="bg-white rounded-lg shadow-sm">
+          <View className="p-4">
+            <View className="flex items-center mb-3">
+              <Tips className="text-orange-500 mr-2" />
+              <Text className="font-medium text-gray-800">使用说明</Text>
+            </View>
+            <View className="space-y-2 text-sm text-gray-600">
+              <Text className="block">1. 在电脑或其他设备上打开网页端登录页面</Text>
+              <Text className="block">2. 点击"扫码登录"按钮，显示登录二维码</Text>
+              <Text className="block">3. 使用此功能扫描二维码即可快速登录</Text>
+              <Text className="block">4. 扫码成功后，网页端将自动完成登录</Text>
+            </View>
+          </View>
+        </Card>
+
+        {/* 登录历史 */}
+        {loginHistory.length > 0 && (
+          <Card className="bg-white rounded-lg shadow-sm">
+            <View className="p-4">
+              <View className="flex items-center justify-between mb-3">
+                <Text className="font-medium text-gray-800">最近登录记录</Text>
+                <Button
+                  size="small"
+                  type="default"
+                  onClick={clearHistory}
+                  className="text-xs"
+                >
+                  清除
+                </Button>
+              </View>
+
+              <View className="space-y-3">
+                {loginHistory.map((record, index) => (
+                  <View key={record.id}>
+                    <View className="flex items-center justify-between">
+                      <View className="flex items-center">
+                        {record.success ? (
+                          <Success className="text-green-500 mr-2" size="16" />
+                        ) : (
+                          <Failure className="text-red-500 mr-2" size="16" />
+                        )}
+                        <View>
+                          <Text className="text-sm text-gray-800">
+                            {record.success ? '登录成功' : '登录失败'}
+                          </Text>
+                          {record.error && (
+                            <Text className="text-xs text-red-500">
+                              {record.error}
+                            </Text>
+                          )}
+                        </View>
+                      </View>
+                      <Text className="text-xs text-gray-500">
+                        {record.time}
+                      </Text>
+                    </View>
+                    {index < loginHistory.length - 1 && (
+                      <Divider className="my-2" />
+                    )}
+                  </View>
+                ))}
+              </View>
+            </View>
+          </Card>
+        )}
+
+        {/* 安全提示 */}
+        <Card className="bg-yellow-50 border border-yellow-200 rounded-lg">
+          <View className="p-4">
+            <View className="flex items-start">
+              <Tips className="text-yellow-600 mr-2 mt-1" size="16" />
+              <View>
+                <Text className="text-sm font-medium text-yellow-800 mb-1">
+                  安全提示
+                </Text>
+                <Text className="text-xs text-yellow-700">
+                  请确保只扫描来自官方网站的登录二维码，避免扫描来源不明的二维码，保护账户安全。
+                </Text>
+              </View>
+            </View>
+          </View>
+        </Card>
+      </View>
+    </View>
+  );
+};
+
+export default QRLoginPage;

src/pages/user/components/UserCard.tsx

@@ -11,6 +11,9 @@ import {TenantId} from "@/config/app";
 import {useUser} from "@/hooks/useUser";
 import {useUserData} from "@/hooks/useUserData";
 import {getStoredInviteParams} from "@/utils/invite";
+import {useQRLogin} from "@/hooks/useQRLogin";
+import {useAdminMode} from "@/hooks/useAdminMode";
+import AdminPanel from "@/components/AdminPanel";
 
 const UserCard = forwardRef<any, any>((_, ref) => {
   const {
@@ -21,6 +24,15 @@ const UserCard = forwardRef<any, any>((_, ref) => {
   const [IsLogin, setIsLogin] = useState<boolean>(false)
   const [userInfo, setUserInfo] = useState<User>()
 
+  // 扫码登录Hook
+  const { startScan, isLoading: isScanLoading } = useQRLogin();
+
+  // 管理员模式Hook
+  const { isAdminMode, toggleAdminMode } = useAdminMode();
+
+  // 管理员面板显示状态
+  const [showAdminPanel, setShowAdminPanel] = useState(false);
+
   // 下拉刷新
   const handleRefresh = async () => {
     await refresh()
@@ -168,6 +180,25 @@ const UserCard = forwardRef<any, any>((_, ref) => {
     })
   }
 
+  // 处理扫码登录
+  const handleQRLogin = async () => {
+    try {
+      await startScan();
+    } catch (error) {
+      console.error('扫码登录失败:', error);
+    }
+  };
+
+  // 打开管理员面板
+  const handleOpenAdminPanel = () => {
+    setShowAdminPanel(true);
+  };
+
+  // 关闭管理员面板
+  const handleCloseAdminPanel = () => {
+    setShowAdminPanel(false);
+  };
+
   return (
     <View className={'header-bg pt-20'}>
       <View className={'p-4'}>
@@ -205,7 +236,31 @@ const UserCard = forwardRef<any, any>((_, ref) => {
                 ) : ''}
               </View>
             </View>
-            {isAdmin() && <Scan onClick={() => navTo('/user/store/verification', true)} />}
+            {isAdmin() && (
+              <View className="flex items-center space-x-2">
+                {/* 管理员模式切换按钮 */}
+                <View
+                  className={`px-3 py-1 rounded-full text-xs font-medium transition-all ${
+                    isAdminMode
+                      ? 'bg-blue-500 text-white'
+                      : 'bg-gray-100 text-gray-600 border border-gray-300'
+                  }`}
+                  onClick={toggleAdminMode}
+                >
+                  {isAdminMode ? '管理员' : '普通用户'}
+                </View>
+
+                {/* 管理员功能入口 */}
+                {isAdminMode && (
+                  <View
+                    className="px-3 py-1 bg-blue-50 border border-blue-200 rounded-full text-xs text-blue-600 font-medium"
+                    onClick={handleOpenAdminPanel}
+                  >
+                    管理面板
+                  </View>
+                )}
+              </View>
+            )}
             <View className={'mr-4 text-sm px-3 py-1 text-black border-gray-400 border-solid border-2 rounded-3xl'}
                  onClick={() => navTo('/user/profile/profile', true)}>
               {'个人资料'}
@@ -234,6 +289,14 @@ const UserCard = forwardRef<any, any>((_, ref) => {
           </View>
         </View>
       </View>
+
+      {/* 管理员面板 */}
+      {isAdmin() && (
+        <AdminPanel
+          visible={showAdminPanel}
+          onClose={handleCloseAdminPanel}
+        />
+      )}
     </View>
 
   )

src/user/store/verification.config.ts

@@ -1,4 +1,4 @@
-export default definePageConfig({
+export default {
   navigationBarTitleText: '门店核销',
   navigationBarTextStyle: 'black'
-})
+}