# 统一登录SDK Demo项目

这是一个展示统一登录SDK功能的演示项目，基于Vue 3 + TypeScript + Vite构建。

## 🚀 项目特色

- **完整认证流程演示**：展示OAuth2授权码模式的完整流程
- **权限管理展示**：角色和权限的检查与验证
- **Vue 3集成**：现代化的Composition API使用
- **响应式设计**：适配各种屏幕尺寸
- **实时数据可视化**：集成ECharts图表展示

## 📁 项目结构

```
src/
├── components/          # 组件目录
│   └── EChartsReport.vue # 图表组件
├── router/             # 路由配置
│   └── index.ts
├── views/              # 页面视图
│   ├── Dashboard.vue   # 仪表板页面
│   ├── Profile.vue     # 个人中心页面
│   └── Callback.vue    # 认证回调页面
├── App.vue             # 根组件
├── main.ts             # 入口文件
└── style.css           # 全局样式
```

## 🎯 核心功能演示

### 1. 认证流程
- 自动检测登录状态
- OAuth2授权码模式
- 认证回调处理
- Token自动管理

### 2. 权限控制
- 角色权限检查
- 细粒度权限验证
- 路由级别权限控制

### 3. 用户体验
- 现代化UI设计
- 加载状态提示
- 错误处理机制
- 响应式布局

## 🛠️ 技术栈

- **框架**：Vue 3 + TypeScript
- **构建工具**：Vite
- **路由**：Vue Router 4
- **图表**：ECharts 5
- **认证**：统一登录SDK

## 🚀 快速开始

```bash
# 安装依赖
pnpm install

# 开发模式
pnpm dev

# 构建生产版本
pnpm build

# 预览生产版本
pnpm preview
```

## 🔧 配置说明

项目配置位于 `src/main.ts`：

```typescript
const SDK_CONFIG = {
    clientId: 'b55c88c20db94790a60a5075',
    registrationId: 'demo',
    storageType: 'localStorage',
    basepath: '/demo-api',
    idpLogoutUrl: 'http://localhost/logout',
    homePage: 'http://localhost:9506/home'
};
```

## 📱 页面介绍

### 仪表板 (/dashboard)
- 用户信息展示
- 认证状态监控
- 数据可视化图表
- SDK功能演示

### 个人中心 (/profile)
- 详细用户信息
- 角色权限列表
- Token管理
- 权限检查工具

### 认证回调 (/oauth2/callback)
- OAuth2回调处理
- 认证状态更新
- 自动跳转逻辑

## 🔒 安全特性

- Token安全存储
- 自动过期处理
- 防重复提交
- XSS防护

## 🎨 设计亮点

- **渐变色彩**：现代化的渐变色设计
- **卡片布局**：清晰的信息层次结构
- **交互动效**：流畅的过渡动画
- **移动端适配**：响应式设计支持

## 📊 数据可视化

集成ECharts提供多种图表类型：
- 折线图：销售趋势分析
- 柱状图：产品销量对比
- 饼图：市场份额分布
- 雷达图：产品性能评估

## 🤝 开发指南

### 添加新页面
1. 在 `src/views/` 创建新组件
2. 在 `src/router/index.ts` 添加路由配置
3. 设置相应的权限控制

### 自定义样式
- 全局样式：`src/style.css`
- 组件样式：各组件内的 `<style scoped>` 标签
- 工具类：`src/App.vue` 中的全局工具类

### 扩展功能
- 权限检查：使用 `unifiedLoginSDK.hasPermission()`
- 角色验证：使用 `unifiedLoginSDK.hasRole()`
- 用户信息：使用 `unifiedLoginSDK.getUserInfo()`

## 🐛 常见问题

### 1. 认证失败
检查SDK配置是否正确，确保 `clientId` 和 `basepath` 配置无误。

### 2. 图表不显示
确认已安装 `echarts` 依赖，检查数据格式是否正确。

### 3. 路由跳转异常
检查路由守卫配置，确保认证逻辑正确。

## 📄 许可证

MIT License