mirror of
https://github.com/ZeroCatDev/ClassworksKVAdmin.git
synced 2025-12-07 18:13:09 +00:00
feat: add EditNamespaceDialog component for editing device namespace
feat: implement FeatureNavigation component for quick access to features feat: create auto-auth-management page with device management and configuration features feat: develop auto-auth-test page for testing API functionalities including token retrieval and KV operations
This commit is contained in:
SunWuyuan
parent
473ffc2f50
commit
971f8c121e
188
AUTOAUTH_README.md
Normal file
188
AUTOAUTH_README.md
Normal file
@ -0,0 +1,188 @@
|
||||
# AutoAuth 自动授权管理系统
|
||||
|
||||
## 🎯 功能概述
|
||||
|
||||
本系统为 ClassworksKV 提供了完整的自动授权管理功能，包括：
|
||||
|
||||
1. **自动授权配置管理** - 为设备创建和管理多个授权配置
|
||||
2. **API 测试工具** - 测试自动授权、学生名称和 KV 操作
|
||||
3. **功能导航** - 快速访问所有功能模块
|
||||
|
||||
## 📁 文件结构
|
||||
|
||||
```
|
||||
src/
|
||||
├── pages/
|
||||
│ ├── auto-auth-management.vue # 自动授权配置管理页面
|
||||
│ ├── auto-auth-test.vue # API 测试工具页面
|
||||
│ └── index.vue # 主页（添加了导航入口）
|
||||
├── components/
|
||||
│ ├── AutoAuthConfigDialog.vue # 配置编辑对话框
|
||||
│ └── FeatureNavigation.vue # 功能导航组件
|
||||
└── lib/
|
||||
└── api.js # API 客户端（扩展了 AutoAuth 接口）
|
||||
```
|
||||
|
||||
## 🚀 主要功能
|
||||
|
||||
### 1. 自动授权配置管理 (`/auto-auth-management`)
|
||||
|
||||
**功能特点：**
|
||||
- ✅ 查看所有自动授权配置
|
||||
- ✅ 创建新的授权配置
|
||||
- ✅ 编辑现有配置
|
||||
- ✅ 删除配置
|
||||
- ✅ 支持多种设备类型（教师、学生、班级一体机、家长）
|
||||
- ✅ 设置只读/读写权限
|
||||
- ✅ 可选密码保护
|
||||
|
||||
**使用流程：**
|
||||
1. 使用设备 UUID 和密码登录
|
||||
2. 查看现有配置列表
|
||||
3. 点击"添加配置"创建新配置
|
||||
- 设置授权密码（可选）
|
||||
- 选择设备类型
|
||||
- 设置只读权限
|
||||
4. 保存后即可使用该配置
|
||||
|
||||
### 2. API 测试工具 (`/auto-auth-test`)
|
||||
|
||||
**功能特点：**
|
||||
- 🔑 **Tab 1: 获取 Token** - 通过 namespace 和密码获取授权 token
|
||||
- 👤 **Tab 2: 学生名称** - 为学生类型 token 设置名称
|
||||
- 💾 **Tab 3: KV 操作** - 测试 LIST、GET、SET、DELETE 操作
|
||||
|
||||
**测试流程：**
|
||||
1. 在自动授权配置页面创建配置
|
||||
2. 使用 namespace 和密码获取 token
|
||||
3. 如果是学生类型，设置学生名称
|
||||
4. 测试 KV 操作验证权限
|
||||
|
||||
### 3. 功能导航组件
|
||||
|
||||
在主页底部新增了美观的功能导航区域，包括：
|
||||
- 🛡️ 自动授权配置
|
||||
- 🧪 API 测试工具
|
||||
- 💾 KV 管理器
|
||||
- 📱 设备管理
|
||||
- ⚙️ 高级设置
|
||||
|
||||
## 🎨 UI 设计特点
|
||||
|
||||
### 使用 shadcn/vue 原生组件：
|
||||
- ✅ `Card` - 卡片布局
|
||||
- ✅ `Badge` - 状态标签
|
||||
- ✅ `Dialog` - 对话框
|
||||
- ✅ `Input` - 输入框
|
||||
- ✅ `Select` - 下拉选择
|
||||
- ✅ `Checkbox` - 复选框
|
||||
- ✅ `Button` - 按钮
|
||||
- ✅ `Tabs` - 标签页
|
||||
- ✅ `AlertDialog` - 确认对话框
|
||||
|
||||
### 设计亮点：
|
||||
- 🎨 渐变背景和悬停效果
|
||||
- 🌈 设备类型图标和颜色区分
|
||||
- 📱 响应式布局（移动端友好）
|
||||
- 🔔 Toast 提示反馈
|
||||
- ⚡ 加载状态和动画
|
||||
- 🎯 清晰的视觉层次
|
||||
|
||||
## 🔌 API 接口集成
|
||||
|
||||
### 新增 API 方法（`api.js`）：
|
||||
|
||||
```javascript
|
||||
// 获取自动授权配置列表
|
||||
apiClient.getAutoAuthConfigs(deviceUuid, password)
|
||||
|
||||
// 创建自动授权配置
|
||||
apiClient.createAutoAuthConfig(deviceUuid, password, config)
|
||||
|
||||
// 更新自动授权配置
|
||||
apiClient.updateAutoAuthConfig(deviceUuid, password, configId, updates)
|
||||
|
||||
// 删除自动授权配置
|
||||
apiClient.deleteAutoAuthConfig(deviceUuid, password, configId)
|
||||
|
||||
// 通过 namespace 获取 token
|
||||
apiClient.getTokenByNamespace(namespace, password, appId)
|
||||
|
||||
// 设置学生名称
|
||||
apiClient.setStudentName(token, name)
|
||||
```
|
||||
|
||||
## 📝 设备类型说明
|
||||
|
||||
| 类型 | 值 | 说明 | 图标 | 典型权限 |
|
||||
|------|-----|------|------|----------|
|
||||
| 教师 | `teacher` | 教师端 | 🎓 | 读写 |
|
||||
| 学生 | `student` | 学生端 | 👤 | 读写 |
|
||||
| 班级一体机 | `classroom` | 班级大屏 | 🖥️ | 只读 |
|
||||
| 家长 | `parent` | 家长端 | 👨👩👧 | 只读 |
|
||||
| 未指定 | `null` | 无限制 | 🛡️ | 自定义 |
|
||||
|
||||
## 🔒 安全性
|
||||
|
||||
1. **密码哈希** - 所有密码使用 bcrypt 哈希存储
|
||||
2. **认证要求** - 管理接口需要 UUID + 密码认证
|
||||
3. **权限隔离** - 设备只能管理自己的配置
|
||||
4. **只读保护** - 只读 token 无法执行写操作
|
||||
|
||||
## 💡 使用场景
|
||||
|
||||
### 场景 1：班级管理
|
||||
```
|
||||
1. 教师创建三个配置：
|
||||
- 教师密码：完整读写权限
|
||||
- 学生密码：读写权限
|
||||
- 家长密码：只读权限
|
||||
|
||||
2. 学生使用班级 namespace + 学生密码登录
|
||||
3. 学生设置自己的名称
|
||||
4. 家长使用家长密码查看数据
|
||||
```
|
||||
|
||||
### 场景 2：公开展示
|
||||
```
|
||||
1. 创建无密码的只读配置
|
||||
2. 任何人都可以通过 namespace 访问
|
||||
3. 适用于班级大屏、展板等场景
|
||||
```
|
||||
|
||||
## 🎯 后续优化建议
|
||||
|
||||
1. ✨ 添加配置模板功能
|
||||
2. 📊 统计每个配置的使用情况
|
||||
3. ⏰ 支持配置过期时间
|
||||
4. 🔔 配置变更通知
|
||||
5. 📝 配置使用日志
|
||||
|
||||
## 🐛 故障排查
|
||||
|
||||
### 问题 1：无法创建配置
|
||||
- 检查设备密码是否正确
|
||||
- 确认密码不与其他配置冲突
|
||||
|
||||
### 问题 2：获取 token 失败
|
||||
- 验证 namespace 是否正确
|
||||
- 检查密码是否匹配配置
|
||||
- 确认配置未被删除
|
||||
|
||||
### 问题 3：KV 操作失败
|
||||
- 确认 token 是否有效
|
||||
- 检查是否为只读 token
|
||||
- 验证 token 类型是否正确
|
||||
|
||||
## 📞 联系支持
|
||||
|
||||
如有问题，请查看：
|
||||
- API 文档：`API_AUTOAUTH.md`
|
||||
- 后端仓库：ClassworksServer
|
||||
- 前端仓库：ClassworksKV Admin
|
||||
|
||||
---
|
||||
|
||||
**版本：** 1.0.0
|
||||
**更新时间：** 2025-10-25
|
||||
**作者：** GitHub Copilot
|
||||
316
AUTOAUTH_UPDATE_v2.md
Normal file
316
AUTOAUTH_UPDATE_v2.md
Normal file
@ -0,0 +1,316 @@
|
||||
# ✅ AutoAuth API 认证方式变更 - 前端适配完成
|
||||
|
||||
## 🔄 变更概述
|
||||
|
||||
后端已将 **AutoAuth 管理接口**的认证方式从 **UUID + 密码认证**改为 **JWT Token 认证**，前端已完成所有适配工作。
|
||||
|
||||
---
|
||||
|
||||
## 📝 前端修改清单
|
||||
|
||||
### 1. ✅ API 客户端更新 (`src/lib/api.js`)
|
||||
|
||||
**变更内容：**
|
||||
- 所有 AutoAuth API 方法的第二个参数从 `password` 改为 `token`
|
||||
- 使用 `authenticatedFetch()` 方法自动添加 `Authorization: Bearer {token}` header
|
||||
|
||||
**修改的方法：**
|
||||
```javascript
|
||||
// 旧方式
|
||||
async getAutoAuthConfigs(deviceUuid, password)
|
||||
async createAutoAuthConfig(deviceUuid, password, config)
|
||||
async updateAutoAuthConfig(deviceUuid, password, configId, updates)
|
||||
async deleteAutoAuthConfig(deviceUuid, password, configId)
|
||||
|
||||
// 新方式
|
||||
async getAutoAuthConfigs(deviceUuid, token)
|
||||
async createAutoAuthConfig(deviceUuid, token, config)
|
||||
async updateAutoAuthConfig(deviceUuid, token, configId, updates)
|
||||
async deleteAutoAuthConfig(deviceUuid, token, configId)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 2. ✅ 自动授权管理页面重构 (`src/pages/auto-auth-management.vue`)
|
||||
|
||||
**主要变更：**
|
||||
|
||||
#### A. 认证方式改变
|
||||
- ❌ 旧：使用 `DeviceAuthDialog` 进行设备 UUID + 密码认证
|
||||
- ✅ 新：使用 `LoginDialog` 进行 OAuth 账户登录
|
||||
|
||||
#### B. 新增功能
|
||||
- ✅ 检查用户是否已登录
|
||||
- ✅ 验证设备是否绑定到当前账户
|
||||
- ✅ 未登录状态显示友好提示
|
||||
- ✅ 使用 `accountStore` 管理账户状态
|
||||
|
||||
#### C. 状态管理更新
|
||||
```javascript
|
||||
// 移除
|
||||
const devicePassword = ref('')
|
||||
const isAuthenticated = ref(false)
|
||||
|
||||
// 新增
|
||||
const accountStore = useAccountStore()
|
||||
const isAuthenticated = computed(() => accountStore.isAuthenticated)
|
||||
```
|
||||
|
||||
#### D. 方法更新
|
||||
```javascript
|
||||
// 旧：设备认证成功
|
||||
const handleLoginSuccess = async (uuid, password, device) => {
|
||||
deviceUuid.value = uuid
|
||||
devicePassword.value = password
|
||||
// ...
|
||||
}
|
||||
|
||||
// 新：账户登录成功
|
||||
const handleLoginSuccess = async (token) => {
|
||||
await accountStore.login(token)
|
||||
await checkDeviceAndLoad()
|
||||
}
|
||||
|
||||
// 新增：检查设备绑定状态
|
||||
const checkDeviceAndLoad = async () => {
|
||||
// 验证设备是否绑定到当前账户
|
||||
if (deviceInfo.value.accountId !== accountStore.userId) {
|
||||
toast.error('该设备未绑定到您的账户')
|
||||
return
|
||||
}
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
#### E. 模板更新
|
||||
- ✅ 添加未登录状态卡片
|
||||
- ✅ 显示账户绑定信息
|
||||
- ✅ 移除设备密码相关 UI
|
||||
|
||||
---
|
||||
|
||||
### 3. ✅ 配置对话框更新 (`src/components/AutoAuthConfigDialog.vue`)
|
||||
|
||||
**Props 变更：**
|
||||
```javascript
|
||||
// 旧
|
||||
props: {
|
||||
deviceUuid: String,
|
||||
devicePassword: String, // 移除
|
||||
config: Object,
|
||||
}
|
||||
|
||||
// 新
|
||||
props: {
|
||||
deviceUuid: String,
|
||||
accountToken: String, // 新增
|
||||
config: Object,
|
||||
}
|
||||
```
|
||||
|
||||
**API 调用更新：**
|
||||
```javascript
|
||||
// 所有 API 调用都使用 props.accountToken 而不是 props.devicePassword
|
||||
await apiClient.createAutoAuthConfig(
|
||||
props.deviceUuid,
|
||||
props.accountToken, // 改为 token
|
||||
config
|
||||
)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 4. ✅ Account Store 扩展 (`src/stores/account.js`)
|
||||
|
||||
**新增计算属性：**
|
||||
```javascript
|
||||
const userId = computed(() => profile.value?.id || null)
|
||||
```
|
||||
|
||||
用于验证设备是否属于当前登录用户。
|
||||
|
||||
---
|
||||
|
||||
### 5. ✅ 文档更新
|
||||
|
||||
**快速使用指南 (`QUICKSTART.md`) 更新：**
|
||||
- 添加"重要前提"章节
|
||||
- 强调必须先登录并绑定设备
|
||||
- 更新使用流程
|
||||
|
||||
---
|
||||
|
||||
## 🎯 用户使用流程变化
|
||||
|
||||
### 旧流程（已废弃）
|
||||
```
|
||||
1. 访问自动授权配置页面
|
||||
2. 输入设备 UUID 和密码
|
||||
3. 管理配置
|
||||
```
|
||||
|
||||
### 新流程（当前）
|
||||
```
|
||||
1. 主页登录账户（OAuth）
|
||||
2. 绑定设备到账户
|
||||
3. 访问自动授权配置页面（自动验证）
|
||||
4. 管理配置
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔒 安全性提升
|
||||
|
||||
| 特性 | 旧方式 | 新方式 |
|
||||
|------|--------|--------|
|
||||
| **认证级别** | 设备密码 | 账户 Token (JWT) |
|
||||
| **权限控制** | 知道密码即可 | 必须是设备所有者 |
|
||||
| **安全性** | 中等 | 高 |
|
||||
| **可追溯性** | 低 | 高（关联账户） |
|
||||
| **适用范围** | 任何设置密码的设备 | 只有绑定账户的设备 |
|
||||
|
||||
---
|
||||
|
||||
## 📱 UI/UX 改进
|
||||
|
||||
### 新增功能
|
||||
1. **未登录提示卡片**
|
||||
- 显示登录按钮
|
||||
- 说明需要账户登录的原因
|
||||
|
||||
2. **设备绑定状态显示**
|
||||
- 在设备信息卡片显示绑定的账户名称
|
||||
- 清晰的视觉反馈
|
||||
|
||||
3. **权限验证**
|
||||
- 自动检查设备是否绑定到当前账户
|
||||
- 友好的错误提示
|
||||
|
||||
---
|
||||
|
||||
## ⚠️ 破坏性变更
|
||||
|
||||
### 影响范围
|
||||
- ❌ 旧的设备密码认证方式不再有效
|
||||
- ❌ 未绑定账户的设备无法管理 AutoAuth 配置
|
||||
|
||||
### 迁移建议
|
||||
1. 提示用户登录账户
|
||||
2. 引导用户绑定设备
|
||||
3. 更新使用文档和帮助信息
|
||||
|
||||
---
|
||||
|
||||
## ✅ 测试检查清单
|
||||
|
||||
- [ ] 未登录时访问配置页面 → 显示登录提示
|
||||
- [ ] 登录但未绑定设备 → 提示绑定设备
|
||||
- [ ] 登录且设备已绑定 → 正常显示配置列表
|
||||
- [ ] 创建配置功能正常
|
||||
- [ ] 编辑配置功能正常
|
||||
- [ ] 删除配置功能正常
|
||||
- [ ] 401 错误处理（Token 过期）
|
||||
- [ ] 403 错误处理（设备未绑定）
|
||||
|
||||
---
|
||||
|
||||
## 🐛 已知问题
|
||||
|
||||
无
|
||||
|
||||
---
|
||||
|
||||
## 🔄 最新更新 (2025-10-25)
|
||||
|
||||
### ✅ Bug 修复：isReadOnly 显示和密码信息展示
|
||||
|
||||
#### 1. **修复 isReadOnly 始终为否的问题**
|
||||
|
||||
- 添加空值合并运算符 `??` 确保 `isReadOnly` 有默认值
|
||||
- 更新代码：`isReadOnly: props.config.isReadOnly ?? false`
|
||||
|
||||
#### 2. **适配后端密码明文返回**
|
||||
|
||||
后端现在会返回：
|
||||
|
||||
- `password`: 明文密码或 `null`（如果是哈希）
|
||||
- `isLegacyHash`: 布尔值标记是否为旧哈希格式
|
||||
|
||||
**前端更新：**
|
||||
|
||||
- ✅ 卡片中显示密码信息（如果是明文）
|
||||
- ✅ 显示"旧格式"徽章（如果是哈希密码）
|
||||
- ✅ 添加复制密码按钮
|
||||
- ✅ 提示哈希密码需要首次登录后自动转换
|
||||
|
||||
**新增 UI 元素：**
|
||||
|
||||
```vue
|
||||
<!-- 密码信息显示区域 -->
|
||||
<div v-if="config.password || config.isLegacyHash" class="rounded-lg border bg-muted/50 p-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs font-medium">授权密码</span>
|
||||
<Badge v-if="config.isLegacyHash" variant="secondary">旧格式</Badge>
|
||||
</div>
|
||||
|
||||
<!-- 明文密码 -->
|
||||
<div v-if="config.password">
|
||||
<code class="text-sm">{{ config.password }}</code>
|
||||
<Button @click="copyPassword(config.password)">
|
||||
<Copy class="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<!-- 哈希密码提示 -->
|
||||
<p v-else class="text-xs text-muted-foreground">
|
||||
⚠️ 哈希格式密码，需要用户首次登录后自动转换为明文
|
||||
</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
**新增功能：**
|
||||
|
||||
- `copyPassword()` 方法：复制密码到剪贴板
|
||||
- 导入 `Copy` 图标
|
||||
|
||||
#### 3. **密码状态检测优化**
|
||||
|
||||
更新密码检测逻辑：
|
||||
|
||||
```javascript
|
||||
// 旧：只检测 hasPassword
|
||||
config.hasPassword ? Lock : LockOpen
|
||||
|
||||
// 新：检测明文密码或旧哈希
|
||||
config.password || config.isLegacyHash ? Lock : LockOpen
|
||||
```
|
||||
|
||||
**显示文本更新：**
|
||||
|
||||
- `config.password` → "需要密码"
|
||||
- `config.isLegacyHash` → "需要密码（旧格式）"
|
||||
- 无密码 → "无密码"
|
||||
|
||||
---
|
||||
|
||||
## 📚 相关文档
|
||||
|
||||
- **后端 API 文档**: `ClassworksServer/API_AUTOAUTH.md`
|
||||
- **前端快速指南**: `QUICKSTART.md`
|
||||
- **实现总结**: `IMPLEMENTATION_SUMMARY.md`
|
||||
|
||||
---
|
||||
|
||||
## 🎉 总结
|
||||
|
||||
✅ **所有前端适配已完成**
|
||||
✅ **安全性显著提升**
|
||||
✅ **用户体验更加流畅**
|
||||
✅ **代码质量和可维护性提高**
|
||||
|
||||
**状态：** 🟢 **可以投入使用**
|
||||
|
||||
---
|
||||
|
||||
**更新时间：** 2025-10-25
|
||||
**版本：** 2.0.0 (Breaking Change)
|
||||
244
IMPLEMENTATION_SUMMARY.md
Normal file
244
IMPLEMENTATION_SUMMARY.md
Normal file
@ -0,0 +1,244 @@
|
||||
# ✅ AutoAuth 自动授权系统 - 完成总结
|
||||
|
||||
## 🎉 已完成的功能
|
||||
|
||||
### 1. 核心页面
|
||||
|
||||
#### ✅ 自动授权配置管理页面 (`/auto-auth-management`)
|
||||
- **位置**: `src/pages/auto-auth-management.vue`
|
||||
- **功能**:
|
||||
- 设备 UUID 和密码认证
|
||||
- 查看所有自动授权配置
|
||||
- 创建/编辑/删除配置
|
||||
- 设备类型可视化（图标 + 颜色）
|
||||
- 权限标签（只读/读写）
|
||||
- 美观的卡片布局
|
||||
|
||||
#### ✅ API 测试工具页面 (`/auto-auth-test`)
|
||||
- **位置**: `src/pages/auto-auth-test.vue`
|
||||
- **功能**:
|
||||
- **Tab 1**: 通过 namespace 获取 token
|
||||
- **Tab 2**: 设置学生名称
|
||||
- **Tab 3**: KV 操作测试（LIST/GET/SET/DELETE）
|
||||
- 实时结果显示
|
||||
- 自动填充 token
|
||||
|
||||
### 2. UI 组件
|
||||
|
||||
#### ✅ AutoAuthConfigDialog
|
||||
- **位置**: `src/components/AutoAuthConfigDialog.vue`
|
||||
- **功能**:
|
||||
- 创建/编辑配置对话框
|
||||
- 密码输入（可见性切换）
|
||||
- 设备类型选择
|
||||
- 只读权限复选框
|
||||
- 表单验证和错误处理
|
||||
|
||||
#### ✅ FeatureNavigation
|
||||
- **位置**: `src/components/FeatureNavigation.vue`
|
||||
- **功能**:
|
||||
- 功能卡片导航
|
||||
- 渐变图标背景
|
||||
- 悬停动画效果
|
||||
- 响应式布局
|
||||
|
||||
### 3. API 扩展
|
||||
|
||||
#### ✅ 新增 API 方法 (`src/lib/api.js`)
|
||||
```javascript
|
||||
// AutoAuth 管理
|
||||
- getAutoAuthConfigs()
|
||||
- createAutoAuthConfig()
|
||||
- updateAutoAuthConfig()
|
||||
- deleteAutoAuthConfig()
|
||||
|
||||
// Apps API
|
||||
- getTokenByNamespace()
|
||||
- setStudentName()
|
||||
```
|
||||
|
||||
### 4. 导航集成
|
||||
|
||||
#### ✅ 主页导航
|
||||
- 用户菜单新增入口
|
||||
- 设备信息卡片快捷按钮
|
||||
- 底部功能导航区域
|
||||
|
||||
## 🎨 设计特点
|
||||
|
||||
### UI/UX 亮点
|
||||
|
||||
1. **shadcn/vue 原生组件**
|
||||
- ✅ 所有组件使用 shadcn/vue
|
||||
- ✅ 统一的设计语言
|
||||
- ✅ 优秀的可访问性
|
||||
|
||||
2. **视觉设计**
|
||||
- 🎨 渐变背景
|
||||
- 🌈 设备类型颜色编码
|
||||
- 💫 平滑动画过渡
|
||||
- 📱 响应式布局
|
||||
- 🔔 Toast 反馈提示
|
||||
|
||||
3. **用户体验**
|
||||
- ⚡ 实时加载状态
|
||||
- 🎯 清晰的视觉层次
|
||||
- 💡 友好的提示信息
|
||||
- 🔒 安全的密码处理
|
||||
|
||||
## 📂 文件清单
|
||||
|
||||
### 新增文件
|
||||
```
|
||||
src/
|
||||
├── pages/
|
||||
│ ├── auto-auth-management.vue ✅ 配置管理页面
|
||||
│ └── auto-auth-test.vue ✅ API 测试页面
|
||||
│
|
||||
├── components/
|
||||
│ ├── AutoAuthConfigDialog.vue ✅ 配置对话框
|
||||
│ └── FeatureNavigation.vue ✅ 功能导航
|
||||
│
|
||||
└── lib/
|
||||
└── api.js ✅ API 扩展
|
||||
|
||||
根目录/
|
||||
├── AUTOAUTH_README.md ✅ 完整文档
|
||||
└── QUICKSTART.md ✅ 快速指南
|
||||
```
|
||||
|
||||
### 修改文件
|
||||
```
|
||||
src/
|
||||
├── pages/
|
||||
│ └── index.vue ✅ 添加导航入口
|
||||
│
|
||||
└── lib/
|
||||
└── api.js ✅ 扩展 API 方法
|
||||
```
|
||||
|
||||
## 🚀 使用流程
|
||||
|
||||
### 快速开始
|
||||
|
||||
1. **访问配置页面**
|
||||
- 主页 → 用户菜单 → "自动授权配置"
|
||||
- 或点击设备卡片的"自动授权"按钮
|
||||
|
||||
2. **创建配置**
|
||||
- 使用设备 UUID + 密码登录
|
||||
- 点击"添加配置"
|
||||
- 设置密码、类型、权限
|
||||
|
||||
3. **测试功能**
|
||||
- 访问"API 测试工具"
|
||||
- 使用 namespace + 密码获取 token
|
||||
- 测试各项功能
|
||||
|
||||
## 🔍 测试建议
|
||||
|
||||
### 功能测试清单
|
||||
|
||||
- [ ] 配置管理
|
||||
- [ ] 创建配置（有密码）
|
||||
- [ ] 创建配置（无密码）
|
||||
- [ ] 编辑配置
|
||||
- [ ] 删除配置
|
||||
- [ ] 密码冲突检测
|
||||
|
||||
- [ ] API 测试
|
||||
- [ ] 获取 token（有密码）
|
||||
- [ ] 获取 token（无密码）
|
||||
- [ ] 设置学生名称
|
||||
- [ ] KV LIST 操作
|
||||
- [ ] KV GET 操作
|
||||
- [ ] KV SET 操作（读写 token）
|
||||
- [ ] KV SET 操作（只读 token - 应失败）
|
||||
- [ ] KV DELETE 操作
|
||||
|
||||
- [ ] UI/UX
|
||||
- [ ] 移动端响应式
|
||||
- [ ] 加载状态
|
||||
- [ ] 错误提示
|
||||
- [ ] Toast 通知
|
||||
- [ ] 导航跳转
|
||||
|
||||
## 💡 后续优化建议
|
||||
|
||||
### 功能增强
|
||||
|
||||
1. **配置模板**
|
||||
- 预设常用配置组合
|
||||
- 一键创建班级配置
|
||||
|
||||
2. **使用统计**
|
||||
- 每个配置的使用次数
|
||||
- Token 创建历史
|
||||
- 活跃度分析
|
||||
|
||||
3. **高级功能**
|
||||
- 配置过期时间
|
||||
- IP 白名单
|
||||
- 使用频率限制
|
||||
- 配置变更日志
|
||||
|
||||
4. **批量操作**
|
||||
- 批量创建配置
|
||||
- 导入/导出配置
|
||||
- 配置复制到其他设备
|
||||
|
||||
### UI 优化
|
||||
|
||||
1. **可视化**
|
||||
- 配置使用情况图表
|
||||
- Token 活跃度热力图
|
||||
- 权限矩阵视图
|
||||
|
||||
2. **交互增强**
|
||||
- 拖拽排序
|
||||
- 配置搜索/过滤
|
||||
- 快捷键支持
|
||||
|
||||
## 🐛 已知限制
|
||||
|
||||
1. **密码管理**
|
||||
- 编辑配置时不显示原密码
|
||||
- 需要重新输入新密码
|
||||
|
||||
2. **学生名称**
|
||||
- 需要预先在 KV 中设置学生列表
|
||||
- 列表格式：`classworks-list-main`
|
||||
|
||||
3. **权限验证**
|
||||
- 只读权限在前端测试
|
||||
- 实际权限由后端控制
|
||||
|
||||
## 📞 技术支持
|
||||
|
||||
### 文档
|
||||
- **完整文档**: [AUTOAUTH_README.md](./AUTOAUTH_README.md)
|
||||
- **快速指南**: [QUICKSTART.md](./QUICKSTART.md)
|
||||
- **API 文档**: ClassworksServer/API_AUTOAUTH.md
|
||||
|
||||
### 联系方式
|
||||
- GitHub Issues
|
||||
- 项目文档
|
||||
- 开发团队
|
||||
|
||||
---
|
||||
|
||||
## ✨ 总结
|
||||
|
||||
✅ **核心功能**: 100% 完成
|
||||
✅ **UI 设计**: shadcn/vue 原生组件
|
||||
✅ **用户体验**: 直观友好
|
||||
✅ **文档完善**: 详细的使用指南
|
||||
✅ **代码质量**: 清晰的结构和注释
|
||||
|
||||
**项目状态**: 🎉 **可以投入使用！**
|
||||
|
||||
---
|
||||
|
||||
**版本**: 1.0.0
|
||||
**完成时间**: 2025-10-25
|
||||
**开发者**: GitHub Copilot
|
||||
110
QUICKSTART.md
Normal file
110
QUICKSTART.md
Normal file
@ -0,0 +1,110 @@
|
||||
# 🚀 AutoAuth 快速使用指南
|
||||
|
||||
## ⚠️ 重要前提
|
||||
|
||||
**管理自动授权配置需要：**
|
||||
1. ✅ 先登录账户（OAuth 登录）
|
||||
2. ✅ 设备必须绑定到您的账户
|
||||
3. ✅ 只有设备所有者可以管理配置
|
||||
|
||||
---
|
||||
|
||||
## 第一步：登录并绑定设备
|
||||
|
||||
1. **登录账户**
|
||||
- 在主页点击"登录"按钮
|
||||
- 选择 OAuth 提供者（GitHub、ZeroCat 等）
|
||||
- 完成 OAuth 授权
|
||||
|
||||
2. **绑定设备**
|
||||
- 登录成功后，在设备信息卡片上点击"绑定到账户"
|
||||
- 确认绑定操作
|
||||
|
||||
## 第二步：配置自动授权
|
||||
|
||||
1. **访问自动授权配置页面**
|
||||
- 在主页点击用户菜单 → "自动授权配置"
|
||||
- 或点击设备信息卡片上的"自动授权"按钮
|
||||
- 或在功能导航区域点击"自动授权配置"
|
||||
|
||||
2. **创建配置**
|
||||
- 点击"添加配置"按钮
|
||||
- 设置授权密码（可选）
|
||||
- 选择设备类型（教师/学生/班级一体机/家长）
|
||||
- 勾选"只读权限"（如需要）
|
||||
- 点击"创建"
|
||||
|
||||
## 第三步：测试授权
|
||||
|
||||
1. **访问 API 测试工具**
|
||||
- 在主页点击用户菜单 → "API 测试工具"
|
||||
- 或在功能导航区域点击"API 测试工具"
|
||||
|
||||
2. **获取 Token**
|
||||
- 切换到"获取 Token"标签
|
||||
- 输入设备的 namespace（通常是 UUID）
|
||||
- 输入刚才设置的授权密码
|
||||
- 输入应用 ID（默认自动生成）
|
||||
- 点击"执行测试"
|
||||
|
||||
3. **设置学生名称**（仅学生类型）
|
||||
- 切换到"学生名称"标签
|
||||
- Token 会自动从上一步填充
|
||||
- 输入学生姓名
|
||||
- 点击"执行测试"
|
||||
|
||||
4. **测试 KV 操作**
|
||||
- 切换到"KV 操作"标签
|
||||
- Token 会自动填充
|
||||
- 选择操作类型（LIST/GET/SET/DELETE）
|
||||
- 执行测试验证权限
|
||||
|
||||
## 常见场景
|
||||
|
||||
### 场景 1：班级使用
|
||||
|
||||
```plaintext
|
||||
教师端：
|
||||
1. 创建"教师"配置，密码：teacher2024，读写权限
|
||||
2. 教师使用 namespace + teacher2024 登录
|
||||
|
||||
学生端：
|
||||
1. 创建"学生"配置，密码：student2024，读写权限
|
||||
2. 学生使用 namespace + student2024 登录
|
||||
3. 学生设置自己的名称
|
||||
|
||||
家长端：
|
||||
1. 创建"家长"配置，密码：parent2024，只读权限
|
||||
2. 家长使用 namespace + parent2024 查看数据
|
||||
```
|
||||
|
||||
### 场景 2：公开展示
|
||||
|
||||
```plaintext
|
||||
1. 创建"班级一体机"配置，不设密码，只读权限
|
||||
2. 大屏直接使用 namespace（无需密码）访问数据
|
||||
```
|
||||
|
||||
## 注意事项
|
||||
|
||||
- ⚠️ 必须先登录账户并绑定设备
|
||||
- ⚠️ 未绑定设备无法管理自动授权配置
|
||||
- ⚠️ 同一设备的授权密码必须唯一
|
||||
- 🔒 只读 token 无法执行 SET 和 DELETE 操作
|
||||
- 👤 学生类型 token 需要先设置名称才能使用
|
||||
- 🔑 无密码配置允许任何人访问（谨慎使用）
|
||||
|
||||
## 故障排查
|
||||
|
||||
**问题：无法创建配置**
|
||||
- 解决：检查是否已存在相同密码的配置
|
||||
|
||||
**问题：获取 token 失败**
|
||||
- 解决：确认 namespace 和密码是否正确
|
||||
|
||||
**问题：KV 操作失败**
|
||||
- 解决：检查 token 是否为只读权限
|
||||
|
||||
---
|
||||
|
||||
**需要帮助？** 查看完整文档：[AUTOAUTH_README.md](./AUTOAUTH_README.md)
|
||||
240
src/components/AutoAuthConfigDialog.vue
Normal file
240
src/components/AutoAuthConfigDialog.vue
Normal file
@ -0,0 +1,240 @@
|
||||
<script setup>
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { apiClient } from '@/lib/api'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
import { Checkbox } from '@/components/ui/checkbox'
|
||||
import { Loader2 } from 'lucide-vue-next'
|
||||
import { toast } from 'vue-sonner'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: Boolean,
|
||||
deviceUuid: String,
|
||||
accountToken: String, // 改为使用 accountToken
|
||||
config: Object, // 如果是编辑模式，传入现有配置
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'success'])
|
||||
|
||||
const isLoading = ref(false)
|
||||
|
||||
// 表单数据
|
||||
const formData = ref({
|
||||
password: '',
|
||||
deviceType: null,
|
||||
isReadOnly: false,
|
||||
})
|
||||
|
||||
// 是否为编辑模式
|
||||
const isEditMode = computed(() => !!props.config)
|
||||
|
||||
// 对话框标题
|
||||
const dialogTitle = computed(() => {
|
||||
return isEditMode.value ? '编辑自动授权配置' : '创建自动授权配置'
|
||||
})
|
||||
|
||||
// 设备类型选项
|
||||
const deviceTypeOptions = [
|
||||
{ value: 'teacher', label: '教师' },
|
||||
{ value: 'student', label: '学生' },
|
||||
{ value: 'classroom', label: '班级一体机' },
|
||||
{ value: 'parent', label: '家长' },
|
||||
{ value: null, label: '未指定' },
|
||||
]
|
||||
|
||||
// 监听对话框打开状态，重置表单
|
||||
watch(() => props.modelValue, (isOpen) => {
|
||||
if (isOpen) {
|
||||
if (isEditMode.value) {
|
||||
// 编辑模式：加载现有配置，显示原密码
|
||||
formData.value = {
|
||||
password: props.config.password || '', // 显示原密码（明文），如果是哈希则为空
|
||||
deviceType: props.config.deviceType,
|
||||
isReadOnly: props.config.isReadOnly ?? false, // 确保有默认值
|
||||
}
|
||||
} else {
|
||||
// 创建模式：重置表单
|
||||
formData.value = {
|
||||
password: '',
|
||||
deviceType: null,
|
||||
isReadOnly: false,
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 关闭对话框
|
||||
const closeDialog = () => {
|
||||
emit('update:modelValue', false)
|
||||
}
|
||||
|
||||
// 保存配置
|
||||
const saveConfig = async () => {
|
||||
// 基本验证
|
||||
if (formData.value.deviceType === undefined) {
|
||||
toast.error('请选择设备类型')
|
||||
return
|
||||
}
|
||||
|
||||
isLoading.value = true
|
||||
try {
|
||||
if (isEditMode.value) {
|
||||
// 更新配置
|
||||
const updates = {
|
||||
deviceType: formData.value.deviceType,
|
||||
isReadOnly: formData.value.isReadOnly,
|
||||
// 编辑模式：总是更新密码字段（留空表示设为无密码）
|
||||
password: formData.value.password || null,
|
||||
}
|
||||
|
||||
await apiClient.updateAutoAuthConfig(
|
||||
props.deviceUuid,
|
||||
props.accountToken,
|
||||
props.config.id,
|
||||
updates
|
||||
)
|
||||
toast.success('配置更新成功')
|
||||
} else {
|
||||
// 创建配置
|
||||
const config = {
|
||||
deviceType: formData.value.deviceType,
|
||||
isReadOnly: formData.value.isReadOnly,
|
||||
}
|
||||
// 如果填写了密码，则添加密码字段
|
||||
if (formData.value.password) {
|
||||
config.password = formData.value.password
|
||||
}
|
||||
|
||||
await apiClient.createAutoAuthConfig(
|
||||
props.deviceUuid,
|
||||
props.accountToken,
|
||||
config
|
||||
)
|
||||
toast.success('配置创建成功')
|
||||
}
|
||||
|
||||
emit('success')
|
||||
closeDialog()
|
||||
} catch (error) {
|
||||
toast.error(isEditMode.value ? '更新失败：' + error.message : '创建失败：' + error.message)
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog :open="modelValue" @update:open="(val) => emit('update:modelValue', val)">
|
||||
<DialogContent class="sm:max-w-[500px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{{ dialogTitle }}</DialogTitle>
|
||||
<DialogDescription>
|
||||
{{ isEditMode ? '修改自动授权配置的设置' : '创建新的自动授权配置' }}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div class="space-y-4 py-4">
|
||||
<!-- 密码输入 -->
|
||||
<div class="space-y-2">
|
||||
<Label for="password">
|
||||
授权密码
|
||||
<span class="text-xs text-muted-foreground ml-2">
|
||||
(可选)
|
||||
</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="password"
|
||||
type="text"
|
||||
v-model="formData.password"
|
||||
:placeholder="isEditMode ? '留空表示无密码授权' : '留空表示无密码授权'"
|
||||
autocomplete="new-password"
|
||||
/>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
{{ isEditMode ? '留空表示设为无密码' : '设备使用此密码可以自动获取访问授权' }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 设备类型选择 -->
|
||||
<div class="space-y-2">
|
||||
<Label for="deviceType">设备类型</Label>
|
||||
<Select v-model="formData.deviceType">
|
||||
<SelectTrigger id="deviceType">
|
||||
<SelectValue placeholder="选择设备类型" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem
|
||||
v-for="option in deviceTypeOptions"
|
||||
:key="option.value"
|
||||
:value="option.value"
|
||||
>
|
||||
{{ option.label }}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
标识使用此配置授权的设备类型
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 只读权限 -->
|
||||
<div class="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="isReadOnly"
|
||||
v-model="formData.isReadOnly"
|
||||
/>
|
||||
<Label
|
||||
for="isReadOnly"
|
||||
class="text-sm font-normal cursor-pointer"
|
||||
>
|
||||
只读权限（仅允许读取数据，不能修改）
|
||||
</Label>
|
||||
</div>
|
||||
|
||||
<!-- 提示信息 -->
|
||||
<div class="rounded-lg border bg-muted p-3 text-xs text-muted-foreground">
|
||||
<p class="font-medium mb-1">💡 提示：</p>
|
||||
<ul class="space-y-1 list-disc list-inside">
|
||||
<li>同一设备的授权密码必须唯一</li>
|
||||
<li>无密码配置允许任何人通过 namespace 访问</li>
|
||||
<li>只读权限适用于家长、访客等场景</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
@click="closeDialog"
|
||||
:disabled="isLoading"
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
@click="saveConfig"
|
||||
:disabled="isLoading"
|
||||
>
|
||||
<Loader2 v-if="isLoading" class="mr-2 h-4 w-4 animate-spin" />
|
||||
{{ isEditMode ? '保存' : '创建' }}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
160
src/components/DeviceAuthDialog.vue
Normal file
160
src/components/DeviceAuthDialog.vue
Normal file
@ -0,0 +1,160 @@
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue'
|
||||
import { apiClient } from '@/lib/api'
|
||||
import { deviceStore } from '@/lib/deviceStore'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Loader2, Eye, EyeOff } from 'lucide-vue-next'
|
||||
import { toast } from 'vue-sonner'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: Boolean,
|
||||
title: {
|
||||
type: String,
|
||||
default: '设备认证'
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
default: '请输入设备 UUID 和密码'
|
||||
},
|
||||
closable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'success'])
|
||||
|
||||
const isLoading = ref(false)
|
||||
const showPassword = ref(false)
|
||||
const deviceUuid = ref('')
|
||||
const devicePassword = ref('')
|
||||
|
||||
// 监听对话框打开，自动填充 UUID
|
||||
watch(() => props.modelValue, (isOpen) => {
|
||||
if (isOpen) {
|
||||
const uuid = deviceStore.getDeviceUuid()
|
||||
if (uuid) {
|
||||
deviceUuid.value = uuid
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 关闭对话框
|
||||
const closeDialog = () => {
|
||||
if (props.closable) {
|
||||
emit('update:modelValue', false)
|
||||
}
|
||||
}
|
||||
|
||||
// 验证并登录
|
||||
const handleAuth = async () => {
|
||||
if (!deviceUuid.value) {
|
||||
toast.error('请输入设备 UUID')
|
||||
return
|
||||
}
|
||||
if (!devicePassword.value) {
|
||||
toast.error('请输入设备密码')
|
||||
return
|
||||
}
|
||||
|
||||
isLoading.value = true
|
||||
try {
|
||||
// 尝试通过 UUID 和密码验证设备
|
||||
const deviceInfo = await apiClient.verifyDevicePassword(deviceUuid.value, devicePassword.value)
|
||||
|
||||
// 验证成功，保存到 deviceStore
|
||||
deviceStore.setDeviceUuid(deviceUuid.value)
|
||||
|
||||
toast.success('认证成功')
|
||||
emit('success', deviceUuid.value, devicePassword.value, deviceInfo)
|
||||
} catch (error) {
|
||||
toast.error('认证失败：' + error.message)
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 切换密码可见性
|
||||
const togglePasswordVisibility = () => {
|
||||
showPassword.value = !showPassword.value
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog :open="modelValue" @update:open="(val) => closable && emit('update:modelValue', val)">
|
||||
<DialogContent class="sm:max-w-[500px]" :closable="closable">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{{ title }}</DialogTitle>
|
||||
<DialogDescription>{{ description }}</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div class="space-y-4 py-4">
|
||||
<!-- UUID 输入 -->
|
||||
<div class="space-y-2">
|
||||
<Label for="device-uuid">设备 UUID *</Label>
|
||||
<Input
|
||||
id="device-uuid"
|
||||
v-model="deviceUuid"
|
||||
placeholder="输入设备 UUID"
|
||||
@keyup.enter="handleAuth"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 密码输入 -->
|
||||
<div class="space-y-2">
|
||||
<Label for="device-password">设备密码 *</Label>
|
||||
<div class="relative">
|
||||
<Input
|
||||
id="device-password"
|
||||
:type="showPassword ? 'text' : 'password'"
|
||||
v-model="devicePassword"
|
||||
placeholder="输入设备密码"
|
||||
@keyup.enter="handleAuth"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="absolute right-0 top-0 h-full px-3 hover:bg-transparent"
|
||||
@click="togglePasswordVisibility"
|
||||
tabindex="-1"
|
||||
>
|
||||
<Eye v-if="!showPassword" class="h-4 w-4 text-muted-foreground" />
|
||||
<EyeOff v-else class="h-4 w-4 text-muted-foreground" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
v-if="closable"
|
||||
type="button"
|
||||
variant="outline"
|
||||
@click="closeDialog"
|
||||
:disabled="isLoading"
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
@click="handleAuth"
|
||||
:disabled="isLoading"
|
||||
>
|
||||
<Loader2 v-if="isLoading" class="mr-2 h-4 w-4 animate-spin" />
|
||||
确认
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
141
src/components/EditNamespaceDialog.vue
Normal file
141
src/components/EditNamespaceDialog.vue
Normal file
@ -0,0 +1,141 @@
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue'
|
||||
import { apiClient } from '@/lib/api'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Loader2 } from 'lucide-vue-next'
|
||||
import { toast } from 'vue-sonner'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: Boolean,
|
||||
deviceUuid: String,
|
||||
currentNamespace: String,
|
||||
accountToken: String,
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'success'])
|
||||
|
||||
const isLoading = ref(false)
|
||||
const namespace = ref('')
|
||||
|
||||
// 监听对话框打开状态
|
||||
watch(() => props.modelValue, (isOpen) => {
|
||||
if (isOpen) {
|
||||
namespace.value = props.currentNamespace || ''
|
||||
}
|
||||
})
|
||||
|
||||
// 关闭对话框
|
||||
const closeDialog = () => {
|
||||
emit('update:modelValue', false)
|
||||
}
|
||||
|
||||
// 保存 namespace
|
||||
const saveNamespace = async () => {
|
||||
// 验证
|
||||
const trimmedNamespace = namespace.value.trim()
|
||||
if (!trimmedNamespace) {
|
||||
toast.error('命名空间不能为空')
|
||||
return
|
||||
}
|
||||
|
||||
// 如果与当前值相同，不需要更新
|
||||
if (trimmedNamespace === props.currentNamespace) {
|
||||
toast.info('命名空间未修改')
|
||||
closeDialog()
|
||||
return
|
||||
}
|
||||
|
||||
isLoading.value = true
|
||||
try {
|
||||
await apiClient.updateDeviceNamespace(
|
||||
props.deviceUuid,
|
||||
props.accountToken,
|
||||
trimmedNamespace
|
||||
)
|
||||
toast.success('命名空间更新成功')
|
||||
emit('success', trimmedNamespace)
|
||||
closeDialog()
|
||||
} catch (error) {
|
||||
if (error.message.includes('409') || error.message.includes('已被使用')) {
|
||||
toast.error('该命名空间已被其他设备使用，请使用其他名称')
|
||||
} else {
|
||||
toast.error('更新失败：' + error.message)
|
||||
}
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog :open="modelValue" @update:open="(val) => emit('update:modelValue', val)">
|
||||
<DialogContent class="sm:max-w-[500px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>编辑命名空间</DialogTitle>
|
||||
<DialogDescription>
|
||||
修改设备的命名空间，用于自动授权登录时识别设备
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div class="space-y-4 py-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="namespace">
|
||||
命名空间
|
||||
<span class="text-xs text-muted-foreground ml-2">
|
||||
(必填)
|
||||
</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="namespace"
|
||||
type="text"
|
||||
v-model="namespace"
|
||||
placeholder="例如: class-2024-grade1"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
命名空间用于自动授权接口，必须全局唯一
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 提示信息 -->
|
||||
<div class="rounded-lg border bg-muted p-3 text-xs text-muted-foreground">
|
||||
<p class="font-medium mb-1">💡 提示：</p>
|
||||
<ul class="space-y-1 list-disc list-inside">
|
||||
<li>命名空间在所有设备中必须唯一</li>
|
||||
<li>建议使用有意义的名称，如班级、房间号等</li>
|
||||
<li>修改后，使用旧命名空间的自动登录将失效</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
@click="closeDialog"
|
||||
:disabled="isLoading"
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
@click="saveNamespace"
|
||||
:disabled="isLoading"
|
||||
>
|
||||
<Loader2 v-if="isLoading" class="mr-2 h-4 w-4 animate-spin" />
|
||||
保存
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
107
src/components/FeatureNavigation.vue
Normal file
107
src/components/FeatureNavigation.vue
Normal file
@ -0,0 +1,107 @@
|
||||
<script setup>
|
||||
import { useRouter } from 'vue-router'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
Shield,
|
||||
TestTube2,
|
||||
Settings,
|
||||
Layers,
|
||||
Database,
|
||||
Key,
|
||||
ArrowRight,
|
||||
} from 'lucide-vue-next'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const features = [
|
||||
{
|
||||
title: '自动授权配置',
|
||||
description: '管理设备的自动授权规则，支持多种设备类型和权限设置',
|
||||
icon: Shield,
|
||||
path: '/auto-auth-management',
|
||||
color: 'from-blue-500 to-cyan-500',
|
||||
iconBg: 'bg-blue-500/10',
|
||||
iconColor: 'text-blue-600 dark:text-blue-400',
|
||||
},
|
||||
{
|
||||
title: 'API 测试工具',
|
||||
description: '测试自动授权 API、学生名称设置和 KV 操作权限',
|
||||
icon: TestTube2,
|
||||
path: '/auto-auth-test',
|
||||
color: 'from-purple-500 to-pink-500',
|
||||
iconBg: 'bg-purple-500/10',
|
||||
iconColor: 'text-purple-600 dark:text-purple-400',
|
||||
},
|
||||
{
|
||||
title: 'KV 管理器',
|
||||
description: '浏览和管理键值存储数据，支持批量操作',
|
||||
icon: Database,
|
||||
path: '/kv-manager',
|
||||
color: 'from-green-500 to-emerald-500',
|
||||
iconBg: 'bg-green-500/10',
|
||||
iconColor: 'text-green-600 dark:text-green-400',
|
||||
},
|
||||
{
|
||||
title: '设备管理',
|
||||
description: '管理您账户下的所有设备，修改名称和密码',
|
||||
icon: Layers,
|
||||
path: '/device-management',
|
||||
color: 'from-orange-500 to-red-500',
|
||||
iconBg: 'bg-orange-500/10',
|
||||
iconColor: 'text-orange-600 dark:text-orange-400',
|
||||
},
|
||||
{
|
||||
title: '高级设置',
|
||||
description: '密码管理、安全设置和其他高级功能',
|
||||
icon: Settings,
|
||||
path: '/password-manager',
|
||||
color: 'from-gray-500 to-slate-500',
|
||||
iconBg: 'bg-gray-500/10',
|
||||
iconColor: 'text-gray-600 dark:text-gray-400',
|
||||
},
|
||||
]
|
||||
|
||||
const navigateTo = (path) => {
|
||||
router.push(path)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 class="text-2xl font-bold">功能导航</h2>
|
||||
<p class="text-sm text-muted-foreground mt-1">快速访问各项功能</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
<Card
|
||||
v-for="feature in features"
|
||||
:key="feature.path"
|
||||
class="group cursor-pointer hover:shadow-lg transition-all duration-300 hover:-translate-y-1"
|
||||
@click="navigateTo(feature.path)"
|
||||
>
|
||||
<CardHeader class="pb-3">
|
||||
<div class="flex items-start justify-between mb-3">
|
||||
<div :class="[feature.iconBg, 'p-3 rounded-lg']">
|
||||
<component :is="feature.icon" :class="[feature.iconColor, 'h-6 w-6']" />
|
||||
</div>
|
||||
<ArrowRight class="h-5 w-5 text-muted-foreground group-hover:text-primary group-hover:translate-x-1 transition-all" />
|
||||
</div>
|
||||
<CardTitle class="text-lg">{{ feature.title }}</CardTitle>
|
||||
<CardDescription class="text-xs line-clamp-2">
|
||||
{{ feature.description }}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button variant="ghost" size="sm" class="w-full group-hover:bg-primary/10">
|
||||
前往
|
||||
<ArrowRight class="ml-2 h-3 w-3" />
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -526,6 +526,64 @@ class ApiClient {
|
||||
headers,
|
||||
});
|
||||
}
|
||||
|
||||
// ============ AutoAuth 管理 API ============
|
||||
// 注意：所有 AutoAuth 管理接口现在需要 JWT Token 认证
|
||||
// 只有已绑定账户的设备才能使用这些接口
|
||||
|
||||
// 获取设备的自动授权配置列表
|
||||
async getAutoAuthConfigs(deviceUuid, token) {
|
||||
return this.authenticatedFetch(`/auto-auth/devices/${deviceUuid}/auth-configs`, {
|
||||
method: 'GET',
|
||||
}, token);
|
||||
}
|
||||
|
||||
// 创建自动授权配置
|
||||
async createAutoAuthConfig(deviceUuid, token, config) {
|
||||
return this.authenticatedFetch(`/auto-auth/devices/${deviceUuid}/auth-configs`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(config),
|
||||
}, token);
|
||||
}
|
||||
|
||||
// 更新自动授权配置
|
||||
async updateAutoAuthConfig(deviceUuid, token, configId, updates) {
|
||||
return this.authenticatedFetch(`/auto-auth/devices/${deviceUuid}/auth-configs/${configId}`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify(updates),
|
||||
}, token);
|
||||
}
|
||||
|
||||
// 删除自动授权配置
|
||||
async deleteAutoAuthConfig(deviceUuid, token, configId) {
|
||||
return this.authenticatedFetch(`/auto-auth/devices/${deviceUuid}/auth-configs/${configId}`, {
|
||||
method: 'DELETE',
|
||||
}, token);
|
||||
}
|
||||
|
||||
// 修改设备的 namespace
|
||||
async updateDeviceNamespace(deviceUuid, token, namespace) {
|
||||
return this.authenticatedFetch(`/auto-auth/devices/${deviceUuid}/namespace`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify({ namespace }),
|
||||
}, token);
|
||||
}
|
||||
|
||||
// 通过 namespace 和密码获取 token (Apps API)
|
||||
async getTokenByNamespace(namespace, password, appId) {
|
||||
return this.fetch('/apps/auth/token', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ namespace, password, appId }),
|
||||
});
|
||||
}
|
||||
|
||||
// 设置学生名称 (Apps API)
|
||||
async setStudentName(token, name) {
|
||||
return this.fetch(`/apps/tokens/${token}/set-student-name`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ name }),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export const apiClient = new ApiClient(API_BASE_URL, SITE_KEY)
|
||||
|
||||
505
src/pages/auto-auth-management.vue
Normal file
505
src/pages/auto-auth-management.vue
Normal file
@ -0,0 +1,505 @@
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useAccountStore } from '@/stores/account'
|
||||
import { deviceStore } from '@/lib/deviceStore'
|
||||
import { apiClient } from '@/lib/api'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from '@/components/ui/alert-dialog'
|
||||
import {
|
||||
Shield,
|
||||
RefreshCw,
|
||||
Trash2,
|
||||
Edit,
|
||||
Plus,
|
||||
ArrowLeft,
|
||||
Lock,
|
||||
LockOpen,
|
||||
GraduationCap,
|
||||
User,
|
||||
Users,
|
||||
Monitor,
|
||||
AlertCircle,
|
||||
Copy,
|
||||
} from 'lucide-vue-next'
|
||||
import { toast } from 'vue-sonner'
|
||||
import AutoAuthConfigDialog from '@/components/AutoAuthConfigDialog.vue'
|
||||
import EditNamespaceDialog from '@/components/EditNamespaceDialog.vue'
|
||||
import LoginDialog from '@/components/LoginDialog.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const accountStore = useAccountStore()
|
||||
|
||||
const deviceUuid = ref('')
|
||||
const deviceInfo = ref(null)
|
||||
const configs = ref([])
|
||||
const isLoading = ref(false)
|
||||
const showLoginDialog = ref(false)
|
||||
const showConfigDialog = ref(false)
|
||||
const showDeleteDialog = ref(false)
|
||||
const showNamespaceDialog = ref(false)
|
||||
const currentConfig = ref(null)
|
||||
const editingConfig = ref(null)
|
||||
|
||||
// 设备类型图标映射
|
||||
const deviceTypeIcons = {
|
||||
teacher: GraduationCap,
|
||||
student: User,
|
||||
classroom: Monitor,
|
||||
parent: Users,
|
||||
}
|
||||
|
||||
// 设备类型标签映射
|
||||
const deviceTypeLabels = {
|
||||
teacher: '教师',
|
||||
student: '学生',
|
||||
classroom: '班级一体机',
|
||||
parent: '家长',
|
||||
}
|
||||
|
||||
// 获取设备类型图标
|
||||
const getDeviceTypeIcon = (type) => {
|
||||
return deviceTypeIcons[type] || Shield
|
||||
}
|
||||
|
||||
// 获取设备类型标签
|
||||
const getDeviceTypeLabel = (type) => {
|
||||
return deviceTypeLabels[type] || '未指定'
|
||||
}
|
||||
|
||||
// 检查是否已登录
|
||||
const isAuthenticated = computed(() => accountStore.isAuthenticated)
|
||||
|
||||
// 登录成功处理
|
||||
const handleLoginSuccess = async (token) => {
|
||||
showLoginDialog.value = false
|
||||
await accountStore.login(token)
|
||||
await checkDeviceAndLoad()
|
||||
}
|
||||
|
||||
// 检查设备并加载配置
|
||||
const checkDeviceAndLoad = async () => {
|
||||
if (!accountStore.isAuthenticated) {
|
||||
return
|
||||
}
|
||||
|
||||
// 获取当前设备 UUID
|
||||
const uuid = deviceStore.getDeviceUuid()
|
||||
if (!uuid) {
|
||||
toast.error('请先选择或注册一个设备')
|
||||
router.push('/')
|
||||
return
|
||||
}
|
||||
|
||||
deviceUuid.value = uuid
|
||||
|
||||
// 加载设备信息
|
||||
try {
|
||||
deviceInfo.value = await apiClient.getDeviceInfo(uuid)
|
||||
console.log(deviceInfo.value)
|
||||
console.log(accountStore)
|
||||
// 检查设备是否绑定到当前账户
|
||||
if (!deviceInfo.value.account.id || deviceInfo.value.account.id !== accountStore.profile.id) {
|
||||
toast.error('该设备未绑定到您的账户', {
|
||||
description: '请先在主页绑定设备到您的账户'
|
||||
})
|
||||
router.push('/')
|
||||
return
|
||||
}
|
||||
|
||||
// 加载配置
|
||||
await loadConfigs()
|
||||
} catch (error) {
|
||||
toast.error('加载设备信息失败：' + error.message)
|
||||
router.push('/')
|
||||
}
|
||||
}
|
||||
|
||||
// 加载自动授权配置列表
|
||||
const loadConfigs = async () => {
|
||||
if (!deviceUuid.value || !accountStore.token) {
|
||||
return
|
||||
}
|
||||
|
||||
isLoading.value = true
|
||||
try {
|
||||
const response = await apiClient.getAutoAuthConfigs(deviceUuid.value, accountStore.token)
|
||||
configs.value = response.configs || []
|
||||
} catch (error) {
|
||||
toast.error('加载配置失败：' + error.message)
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 创建新配置
|
||||
const createConfig = () => {
|
||||
editingConfig.value = null
|
||||
showConfigDialog.value = true
|
||||
}
|
||||
|
||||
// 编辑配置
|
||||
const editConfig = (config) => {
|
||||
editingConfig.value = config
|
||||
showConfigDialog.value = true
|
||||
}
|
||||
|
||||
// 确认删除配置
|
||||
const confirmDelete = (config) => {
|
||||
currentConfig.value = config
|
||||
showDeleteDialog.value = true
|
||||
}
|
||||
|
||||
// 删除配置
|
||||
const deleteConfig = async () => {
|
||||
if (!currentConfig.value) return
|
||||
|
||||
try {
|
||||
await apiClient.deleteAutoAuthConfig(
|
||||
deviceUuid.value,
|
||||
accountStore.token,
|
||||
currentConfig.value.id
|
||||
)
|
||||
toast.success('配置已删除')
|
||||
showDeleteDialog.value = false
|
||||
currentConfig.value = null
|
||||
await loadConfigs()
|
||||
} catch (error) {
|
||||
toast.error('删除失败：' + error.message)
|
||||
}
|
||||
}
|
||||
|
||||
// 配置保存成功
|
||||
const handleConfigSaved = async () => {
|
||||
await loadConfigs()
|
||||
}
|
||||
|
||||
// 格式化日期
|
||||
const formatDate = (dateString) => {
|
||||
return new Date(dateString).toLocaleString('zh-CN')
|
||||
}
|
||||
|
||||
// 复制密码
|
||||
const copyPassword = async (password) => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(password)
|
||||
toast.success('密码已复制到剪贴板')
|
||||
} catch (error) {
|
||||
toast.error('复制失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 编辑 namespace
|
||||
const editNamespace = () => {
|
||||
showNamespaceDialog.value = true
|
||||
}
|
||||
|
||||
// namespace 更新成功
|
||||
const handleNamespaceUpdated = async (newNamespace) => {
|
||||
// 更新本地设备信息
|
||||
if (deviceInfo.value) {
|
||||
deviceInfo.value.namespace = newNamespace
|
||||
}
|
||||
toast.success('命名空间已更新')
|
||||
}
|
||||
|
||||
// 返回上一页
|
||||
const goBack = () => {
|
||||
router.push('/')
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
// 检查是否已登录
|
||||
if (!accountStore.isAuthenticated) {
|
||||
toast.error('请先登录账户', {
|
||||
description: '管理自动授权配置需要账户登录'
|
||||
})
|
||||
showLoginDialog.value = true
|
||||
return
|
||||
}
|
||||
|
||||
// 检查设备并加载配置
|
||||
await checkDeviceAndLoad()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen bg-gradient-to-br from-background via-background to-primary/5">
|
||||
<!-- Header -->
|
||||
<div class="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 sticky top-0 z-10">
|
||||
<div class="container mx-auto px-6 py-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
@click="goBack"
|
||||
>
|
||||
<ArrowLeft class="h-5 w-5" />
|
||||
</Button>
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold flex items-center gap-2">
|
||||
<Shield class="h-6 w-6" />
|
||||
自动授权配置
|
||||
</h1>
|
||||
<p class="text-sm text-muted-foreground">管理设备的自动授权规则</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<Button
|
||||
v-if="isAuthenticated"
|
||||
variant="outline"
|
||||
size="icon"
|
||||
@click="loadConfigs"
|
||||
:disabled="isLoading"
|
||||
>
|
||||
<RefreshCw :class="{ 'animate-spin': isLoading }" class="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="container mx-auto px-6 py-8 max-w-7xl">
|
||||
<!-- 未登录状态提示 -->
|
||||
<Card v-if="!isAuthenticated" class="border-yellow-200 dark:border-yellow-800">
|
||||
<CardContent class="flex flex-col items-center justify-center py-12">
|
||||
<AlertCircle class="h-16 w-16 text-yellow-600 dark:text-yellow-400 mb-4" />
|
||||
<p class="text-lg font-medium mb-2">需要账户登录</p>
|
||||
<p class="text-sm text-muted-foreground mb-4 text-center max-w-md">
|
||||
管理自动授权配置需要登录账户，并且设备必须绑定到您的账户
|
||||
</p>
|
||||
<div class="flex gap-2">
|
||||
<Button @click="showLoginDialog = true">
|
||||
<User class="h-4 w-4 mr-2" />
|
||||
登录账户
|
||||
</Button>
|
||||
<Button variant="outline" @click="goBack">
|
||||
返回主页
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- 设备信息卡片 -->
|
||||
<Card v-if="isAuthenticated && deviceInfo" class="mb-6 border-primary/20">
|
||||
<CardHeader>
|
||||
<CardTitle class="text-lg">当前设备</CardTitle>
|
||||
<CardDescription class="flex items-center gap-2 mt-2">
|
||||
<User class="h-3 w-3" />
|
||||
已绑定到账户：{{ accountStore.userName }}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm text-muted-foreground">设备名称</span>
|
||||
<span class="font-medium">{{ deviceInfo.name || '未命名设备' }}</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm text-muted-foreground">命名空间</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<code class="text-xs bg-muted px-2 py-1 rounded">{{ deviceInfo.namespace }}</code>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="h-6 w-6"
|
||||
@click="editNamespace"
|
||||
title="编辑命名空间"
|
||||
>
|
||||
<Edit class="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm text-muted-foreground">UUID</span>
|
||||
<code class="text-xs bg-muted px-2 py-1 rounded">{{ deviceInfo.uuid }}</code>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- 已认证状态下显示配置列表 -->
|
||||
<div v-if="isAuthenticated">
|
||||
<!-- 操作栏 -->
|
||||
<div class="mb-6 flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
共 {{ configs.length }} 个自动授权配置
|
||||
</p>
|
||||
</div>
|
||||
<Button @click="createConfig">
|
||||
<Plus class="h-4 w-4 mr-2" />
|
||||
添加配置
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<div v-if="isLoading" class="text-center py-12">
|
||||
<RefreshCw class="h-8 w-8 animate-spin mx-auto text-muted-foreground" />
|
||||
<p class="mt-4 text-muted-foreground">加载中...</p>
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<Card v-else-if="configs.length === 0" class="border-dashed">
|
||||
<CardContent class="flex flex-col items-center justify-center py-12">
|
||||
<Shield class="h-16 w-16 text-muted-foreground/50 mb-4" />
|
||||
<p class="text-lg font-medium text-muted-foreground mb-2">暂无自动授权配置</p>
|
||||
<p class="text-sm text-muted-foreground mb-4">创建配置以允许设备自动授权访问</p>
|
||||
<Button @click="createConfig" variant="outline">
|
||||
<Plus class="h-4 w-4 mr-2" />
|
||||
创建第一个配置
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- 配置列表 -->
|
||||
<div v-else class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
<Card
|
||||
v-for="config in configs"
|
||||
:key="config.id"
|
||||
class="hover:shadow-lg transition-shadow"
|
||||
>
|
||||
<CardHeader class="pb-3">
|
||||
<div class="flex items-start justify-between mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<component
|
||||
:is="getDeviceTypeIcon(config.deviceType)"
|
||||
class="h-5 w-5 text-primary"
|
||||
/>
|
||||
<CardTitle class="text-lg">
|
||||
{{ getDeviceTypeLabel(config.deviceType) }}
|
||||
</CardTitle>
|
||||
</div>
|
||||
<Badge :variant="config.isReadOnly ? 'outline' : 'default'">
|
||||
{{ config.isReadOnly ? '只读' : '读写' }}
|
||||
</Badge>
|
||||
</div>
|
||||
<CardDescription>
|
||||
<div class="flex items-center gap-2 text-xs">
|
||||
<component
|
||||
:is="config.password || config.isLegacyHash ? Lock : LockOpen"
|
||||
class="h-3 w-3"
|
||||
/>
|
||||
{{ config.password ? '需要密码' : config.isLegacyHash ? '需要密码（旧格式）' : '无密码' }}
|
||||
</div>
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-3">
|
||||
<!-- 密码信息显示 -->
|
||||
<div v-if="config.password || config.isLegacyHash" class="rounded-lg border bg-muted/50 p-3 space-y-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs font-medium text-muted-foreground">授权密码</span>
|
||||
<Badge v-if="config.isLegacyHash" variant="secondary" class="text-xs">
|
||||
旧格式
|
||||
</Badge>
|
||||
</div>
|
||||
<div v-if="config.password" class="flex items-center gap-2">
|
||||
<code class="text-sm bg-background px-2 py-1 rounded border flex-1">
|
||||
{{ config.password }}
|
||||
</code>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="h-7 w-7"
|
||||
@click="copyPassword(config.password)"
|
||||
>
|
||||
<Copy class="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
<p v-else class="text-xs text-muted-foreground">
|
||||
⚠️ 哈希格式密码，需要用户首次登录后自动转换为明文
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="text-xs text-muted-foreground space-y-1">
|
||||
<div>创建: {{ formatDate(config.createdAt) }}</div>
|
||||
<div v-if="config.updatedAt !== config.createdAt">
|
||||
更新: {{ formatDate(config.updatedAt) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
@click="editConfig(config)"
|
||||
class="flex-1"
|
||||
>
|
||||
<Edit class="h-3 w-3 mr-1" />
|
||||
编辑
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
@click="confirmDelete(config)"
|
||||
class="flex-1"
|
||||
>
|
||||
<Trash2 class="h-3 w-3 mr-1" />
|
||||
删除
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 登录对话框 -->
|
||||
<LoginDialog
|
||||
v-model="showLoginDialog"
|
||||
:on-success="handleLoginSuccess"
|
||||
/>
|
||||
|
||||
<!-- 配置编辑对话框 -->
|
||||
<AutoAuthConfigDialog
|
||||
v-if="isAuthenticated"
|
||||
v-model="showConfigDialog"
|
||||
:device-uuid="deviceUuid"
|
||||
:account-token="accountStore.token"
|
||||
:config="editingConfig"
|
||||
@success="handleConfigSaved"
|
||||
/>
|
||||
|
||||
<!-- 编辑命名空间对话框 -->
|
||||
<EditNamespaceDialog
|
||||
v-if="isAuthenticated && deviceInfo"
|
||||
v-model="showNamespaceDialog"
|
||||
:device-uuid="deviceUuid"
|
||||
:current-namespace="deviceInfo.namespace"
|
||||
:account-token="accountStore.token"
|
||||
@success="handleNamespaceUpdated"
|
||||
/>
|
||||
|
||||
<!-- 删除确认对话框 -->
|
||||
<AlertDialog v-model:open="showDeleteDialog">
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>确认删除配置</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
确定要删除 "{{ currentConfig ? getDeviceTypeLabel(currentConfig.deviceType) : '' }}" 配置吗？
|
||||
此操作无法撤销。
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>取消</AlertDialogCancel>
|
||||
<AlertDialogAction @click="deleteConfig" class="bg-destructive text-destructive-foreground hover:bg-destructive/90">
|
||||
确认删除
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
</template>
|
||||
501
src/pages/auto-auth-test.vue
Normal file
501
src/pages/auto-auth-test.vue
Normal file
@ -0,0 +1,501 @@
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { apiClient } from '@/lib/api'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||||
import {
|
||||
TestTube2,
|
||||
ArrowLeft,
|
||||
Play,
|
||||
Loader2,
|
||||
CheckCircle2,
|
||||
XCircle,
|
||||
Key,
|
||||
User,
|
||||
Database,
|
||||
Eye,
|
||||
EyeOff,
|
||||
} from 'lucide-vue-next'
|
||||
import { toast } from 'vue-sonner'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
// Tab 1: 通过 namespace 获取 token
|
||||
const tab1Form = ref({
|
||||
namespace: '',
|
||||
password: '',
|
||||
appId: 'test-app-id-' + Date.now(),
|
||||
})
|
||||
const tab1Loading = ref(false)
|
||||
const tab1Result = ref(null)
|
||||
const tab1ShowPassword = ref(false)
|
||||
|
||||
// Tab 2: 设置学生名称
|
||||
const tab2Form = ref({
|
||||
token: '',
|
||||
name: '',
|
||||
})
|
||||
const tab2Loading = ref(false)
|
||||
const tab2Result = ref(null)
|
||||
|
||||
// Tab 3: KV 操作测试
|
||||
const tab3Form = ref({
|
||||
token: '',
|
||||
key: '',
|
||||
value: '',
|
||||
operation: 'list', // list, get, set, delete
|
||||
})
|
||||
const tab3Loading = ref(false)
|
||||
const tab3Result = ref(null)
|
||||
|
||||
// 测试 1: 获取 token
|
||||
const testGetToken = async () => {
|
||||
if (!tab1Form.value.namespace) {
|
||||
toast.error('请输入 namespace')
|
||||
return
|
||||
}
|
||||
|
||||
tab1Loading.value = true
|
||||
tab1Result.value = null
|
||||
|
||||
try {
|
||||
const response = await apiClient.getTokenByNamespace(
|
||||
tab1Form.value.namespace,
|
||||
tab1Form.value.password || undefined,
|
||||
tab1Form.value.appId
|
||||
)
|
||||
|
||||
tab1Result.value = {
|
||||
success: true,
|
||||
data: response,
|
||||
}
|
||||
toast.success('获取 token 成功')
|
||||
|
||||
// 自动填充到其他 tab
|
||||
if (response.token) {
|
||||
tab2Form.value.token = response.token
|
||||
tab3Form.value.token = response.token
|
||||
}
|
||||
} catch (error) {
|
||||
tab1Result.value = {
|
||||
success: false,
|
||||
error: error.message,
|
||||
}
|
||||
toast.error('获取 token 失败：' + error.message)
|
||||
} finally {
|
||||
tab1Loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 测试 2: 设置学生名称
|
||||
const testSetStudentName = async () => {
|
||||
if (!tab2Form.value.token) {
|
||||
toast.error('请输入 token')
|
||||
return
|
||||
}
|
||||
if (!tab2Form.value.name) {
|
||||
toast.error('请输入学生姓名')
|
||||
return
|
||||
}
|
||||
|
||||
tab2Loading.value = true
|
||||
tab2Result.value = null
|
||||
|
||||
try {
|
||||
const response = await apiClient.setStudentName(
|
||||
tab2Form.value.token,
|
||||
tab2Form.value.name
|
||||
)
|
||||
|
||||
tab2Result.value = {
|
||||
success: true,
|
||||
data: response,
|
||||
}
|
||||
toast.success('设置学生名称成功')
|
||||
} catch (error) {
|
||||
tab2Result.value = {
|
||||
success: false,
|
||||
error: error.message,
|
||||
}
|
||||
toast.error('设置学生名称失败：' + error.message)
|
||||
} finally {
|
||||
tab2Loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 测试 3: KV 操作
|
||||
const testKVOperation = async () => {
|
||||
if (!tab3Form.value.token) {
|
||||
toast.error('请输入 token')
|
||||
return
|
||||
}
|
||||
|
||||
const { operation, key, value } = tab3Form.value
|
||||
|
||||
if (operation !== 'list' && !key) {
|
||||
toast.error('请输入 key')
|
||||
return
|
||||
}
|
||||
|
||||
if (operation === 'set' && !value) {
|
||||
toast.error('请输入 value')
|
||||
return
|
||||
}
|
||||
|
||||
tab3Loading.value = true
|
||||
tab3Result.value = null
|
||||
|
||||
try {
|
||||
let response
|
||||
|
||||
switch (operation) {
|
||||
case 'list':
|
||||
response = await apiClient.listKVItems(tab3Form.value.token)
|
||||
break
|
||||
case 'get':
|
||||
response = await apiClient.getKVItem(tab3Form.value.token, key)
|
||||
break
|
||||
case 'set':
|
||||
let parsedValue
|
||||
try {
|
||||
parsedValue = JSON.parse(value)
|
||||
} catch {
|
||||
parsedValue = value
|
||||
}
|
||||
response = await apiClient.setKVItem(tab3Form.value.token, key, parsedValue)
|
||||
break
|
||||
case 'delete':
|
||||
response = await apiClient.deleteKVItem(tab3Form.value.token, key)
|
||||
break
|
||||
}
|
||||
|
||||
tab3Result.value = {
|
||||
success: true,
|
||||
data: response,
|
||||
}
|
||||
toast.success('操作成功')
|
||||
} catch (error) {
|
||||
tab3Result.value = {
|
||||
success: false,
|
||||
error: error.message,
|
||||
}
|
||||
toast.error('操作失败：' + error.message)
|
||||
} finally {
|
||||
tab3Loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 格式化 JSON
|
||||
const formatJson = (data) => {
|
||||
try {
|
||||
return JSON.stringify(data, null, 2)
|
||||
} catch {
|
||||
return String(data)
|
||||
}
|
||||
}
|
||||
|
||||
// 返回上一页
|
||||
const goBack = () => {
|
||||
router.push('/')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen bg-gradient-to-br from-background via-background to-primary/5">
|
||||
<!-- Header -->
|
||||
<div class="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 sticky top-0 z-10">
|
||||
<div class="container mx-auto px-6 py-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
@click="goBack"
|
||||
>
|
||||
<ArrowLeft class="h-5 w-5" />
|
||||
</Button>
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold flex items-center gap-2">
|
||||
<TestTube2 class="h-6 w-6" />
|
||||
AutoAuth API 测试
|
||||
</h1>
|
||||
<p class="text-sm text-muted-foreground">测试自动授权和相关 API 功能</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="container mx-auto px-6 py-8 max-w-7xl">
|
||||
<Tabs default-value="token" class="w-full">
|
||||
<TabsList class="grid w-full grid-cols-3">
|
||||
<TabsTrigger value="token">
|
||||
<Key class="h-4 w-4 mr-2" />
|
||||
获取 Token
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="student">
|
||||
<User class="h-4 w-4 mr-2" />
|
||||
学生名称
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="kv">
|
||||
<Database class="h-4 w-4 mr-2" />
|
||||
KV 操作
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<!-- Tab 1: 获取 Token -->
|
||||
<TabsContent value="token" class="space-y-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>通过 Namespace 获取 Token</CardTitle>
|
||||
<CardDescription>
|
||||
测试 <code class="text-xs">POST /apps/auth/token</code> 接口
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="namespace">Namespace *</Label>
|
||||
<Input
|
||||
id="namespace"
|
||||
v-model="tab1Form.namespace"
|
||||
placeholder="例如: class-2024-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="password">Password</Label>
|
||||
<div class="relative">
|
||||
<Input
|
||||
id="password"
|
||||
:type="tab1ShowPassword ? 'text' : 'password'"
|
||||
v-model="tab1Form.password"
|
||||
placeholder="留空表示无密码授权"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="absolute right-0 top-0 h-full px-3 hover:bg-transparent"
|
||||
@click="tab1ShowPassword = !tab1ShowPassword"
|
||||
tabindex="-1"
|
||||
>
|
||||
<Eye v-if="!tab1ShowPassword" class="h-4 w-4 text-muted-foreground" />
|
||||
<EyeOff v-else class="h-4 w-4 text-muted-foreground" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="appId">App ID</Label>
|
||||
<Input
|
||||
id="appId"
|
||||
v-model="tab1Form.appId"
|
||||
placeholder="应用标识符"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
@click="testGetToken"
|
||||
:disabled="tab1Loading"
|
||||
class="w-full"
|
||||
>
|
||||
<Loader2 v-if="tab1Loading" class="mr-2 h-4 w-4 animate-spin" />
|
||||
<Play v-else class="mr-2 h-4 w-4" />
|
||||
执行测试
|
||||
</Button>
|
||||
|
||||
<!-- 结果显示 -->
|
||||
<div v-if="tab1Result" class="mt-4">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<Badge :variant="tab1Result.success ? 'default' : 'destructive'">
|
||||
<component
|
||||
:is="tab1Result.success ? CheckCircle2 : XCircle"
|
||||
class="h-3 w-3 mr-1"
|
||||
/>
|
||||
{{ tab1Result.success ? '成功' : '失败' }}
|
||||
</Badge>
|
||||
</div>
|
||||
<div class="rounded-lg bg-muted p-4">
|
||||
<pre class="text-xs overflow-auto">{{ formatJson(tab1Result.success ? tab1Result.data : tab1Result.error) }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<!-- Tab 2: 设置学生名称 -->
|
||||
<TabsContent value="student" class="space-y-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>设置学生名称</CardTitle>
|
||||
<CardDescription>
|
||||
测试 <code class="text-xs">POST /apps/tokens/:token/set-student-name</code> 接口
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="token2">Token *</Label>
|
||||
<Input
|
||||
id="token2"
|
||||
v-model="tab2Form.token"
|
||||
placeholder="从上一步获取的 token"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="studentName">学生姓名 *</Label>
|
||||
<Input
|
||||
id="studentName"
|
||||
v-model="tab2Form.name"
|
||||
placeholder="例如: 张三"
|
||||
/>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
名称必须在设备的学生列表中（存储在 classworks-list-main 键中）
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
@click="testSetStudentName"
|
||||
:disabled="tab2Loading"
|
||||
class="w-full"
|
||||
>
|
||||
<Loader2 v-if="tab2Loading" class="mr-2 h-4 w-4 animate-spin" />
|
||||
<Play v-else class="mr-2 h-4 w-4" />
|
||||
执行测试
|
||||
</Button>
|
||||
|
||||
<!-- 结果显示 -->
|
||||
<div v-if="tab2Result" class="mt-4">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<Badge :variant="tab2Result.success ? 'default' : 'destructive'">
|
||||
<component
|
||||
:is="tab2Result.success ? CheckCircle2 : XCircle"
|
||||
class="h-3 w-3 mr-1"
|
||||
/>
|
||||
{{ tab2Result.success ? '成功' : '失败' }}
|
||||
</Badge>
|
||||
</div>
|
||||
<div class="rounded-lg bg-muted p-4">
|
||||
<pre class="text-xs overflow-auto">{{ formatJson(tab2Result.success ? tab2Result.data : tab2Result.error) }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<!-- Tab 3: KV 操作 -->
|
||||
<TabsContent value="kv" class="space-y-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>KV 存储操作测试</CardTitle>
|
||||
<CardDescription>
|
||||
测试 KV API 的读写权限控制
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="token3">Token *</Label>
|
||||
<Input
|
||||
id="token3"
|
||||
v-model="tab3Form.token"
|
||||
placeholder="从第一步获取的 token"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="operation">操作类型</Label>
|
||||
<select
|
||||
id="operation"
|
||||
v-model="tab3Form.operation"
|
||||
class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
||||
>
|
||||
<option value="list">列出所有键值 (LIST)</option>
|
||||
<option value="get">读取值 (GET)</option>
|
||||
<option value="set">设置值 (SET)</option>
|
||||
<option value="delete">删除值 (DELETE)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div v-if="tab3Form.operation !== 'list'" class="space-y-2">
|
||||
<Label for="key">Key *</Label>
|
||||
<Input
|
||||
id="key"
|
||||
v-model="tab3Form.key"
|
||||
placeholder="例如: test-key"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="tab3Form.operation === 'set'" class="space-y-2">
|
||||
<Label for="value">Value (JSON) *</Label>
|
||||
<textarea
|
||||
id="value"
|
||||
v-model="tab3Form.value"
|
||||
placeholder='例如: {"message": "Hello World"}'
|
||||
class="flex min-h-[100px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
@click="testKVOperation"
|
||||
:disabled="tab3Loading"
|
||||
class="w-full"
|
||||
>
|
||||
<Loader2 v-if="tab3Loading" class="mr-2 h-4 w-4 animate-spin" />
|
||||
<Play v-else class="mr-2 h-4 w-4" />
|
||||
执行测试
|
||||
</Button>
|
||||
|
||||
<!-- 结果显示 -->
|
||||
<div v-if="tab3Result" class="mt-4">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<Badge :variant="tab3Result.success ? 'default' : 'destructive'">
|
||||
<component
|
||||
:is="tab3Result.success ? CheckCircle2 : XCircle"
|
||||
class="h-3 w-3 mr-1"
|
||||
/>
|
||||
{{ tab3Result.success ? '成功' : '失败' }}
|
||||
</Badge>
|
||||
</div>
|
||||
<div class="rounded-lg bg-muted p-4">
|
||||
<pre class="text-xs overflow-auto">{{ formatJson(tab3Result.success ? tab3Result.data : tab3Result.error) }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
<!-- 使用说明 -->
|
||||
<Card class="mt-6 border-primary/20">
|
||||
<CardHeader>
|
||||
<CardTitle>使用说明</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent class="text-sm text-muted-foreground space-y-3">
|
||||
<div>
|
||||
<p class="font-medium text-foreground mb-1">📝 测试流程：</p>
|
||||
<ol class="list-decimal list-inside space-y-1 ml-2">
|
||||
<li>在「自动授权配置」页面创建授权配置</li>
|
||||
<li>使用配置的 namespace 和 password 获取 token</li>
|
||||
<li>如果是学生类型，可以设置学生名称</li>
|
||||
<li>使用获取的 token 测试 KV 操作权限</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-medium text-foreground mb-1">🔑 权限说明：</p>
|
||||
<ul class="list-disc list-inside space-y-1 ml-2">
|
||||
<li>只读 token 只能执行 LIST 和 GET 操作</li>
|
||||
<li>读写 token 可以执行所有操作</li>
|
||||
<li>学生类型 token 需要设置名称后才能正常使用</li>
|
||||
</ul>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -10,7 +10,7 @@ import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
|
||||
import { Plus, Trash2, Key, Shield, RefreshCw, Copy, CheckCircle2, Settings, Package, Clock, AlertCircle, Lock, Info, User, LogOut, Layers, ChevronDown } from 'lucide-vue-next'
|
||||
import { Plus, Trash2, Key, Shield, RefreshCw, Copy, CheckCircle2, Settings, Package, Clock, AlertCircle, Lock, Info, User, LogOut, Layers, ChevronDown, TestTube2 } from 'lucide-vue-next'
|
||||
import DropdownMenu from '@/components/ui/dropdown-menu/DropdownMenu.vue'
|
||||
import DropdownItem from '@/components/ui/dropdown-menu/DropdownItem.vue'
|
||||
import AppCard from '@/components/AppCard.vue'
|
||||
@ -19,6 +19,8 @@ import PasswordInput from '@/components/PasswordInput.vue'
|
||||
import LoginDialog from '@/components/LoginDialog.vue'
|
||||
import DeviceRegisterDialog from '@/components/DeviceRegisterDialog.vue'
|
||||
import EditDeviceNameDialog from '@/components/EditDeviceNameDialog.vue'
|
||||
import EditNamespaceDialog from '@/components/EditNamespaceDialog.vue'
|
||||
import FeatureNavigation from '@/components/FeatureNavigation.vue'
|
||||
import { toast } from 'vue-sonner'
|
||||
|
||||
const deviceUuid = ref('')
|
||||
@ -37,6 +39,7 @@ const showRegisterDialog = ref(false)
|
||||
const showPasswordDialog = ref(false)
|
||||
const showLoginDialog = ref(false)
|
||||
const showEditNameDialog = ref(false)
|
||||
const showEditNamespaceDialog = ref(false)
|
||||
const showUserMenu = ref(false)
|
||||
const deviceRequired = ref(false) // 标记是否必须注册设备
|
||||
const selectedToken = ref(null)
|
||||
@ -58,6 +61,11 @@ const { handleOAuthCallback } = useOAuthCallback()
|
||||
// 使用计算属性来获取是否有密码
|
||||
const hasPassword = computed(() => deviceInfo.value?.hasPassword || false)
|
||||
|
||||
// 检查 namespace 是否等于 UUID（需要提示用户修改）
|
||||
const namespaceEqualsUuid = computed(() => {
|
||||
return deviceInfo.value && deviceInfo.value.namespace === deviceInfo.value.uuid
|
||||
})
|
||||
|
||||
// 为 TokenList 扁平化数据并附带 appName
|
||||
const flatTokenList = computed(() => {
|
||||
return tokens.value.map(t => ({
|
||||
@ -364,6 +372,14 @@ const handleDeviceNameUpdated = async (newName) => {
|
||||
await loadDeviceInfo()
|
||||
}
|
||||
|
||||
// 更新 namespace 成功回调
|
||||
const handleNamespaceUpdated = async (newNamespace) => {
|
||||
if (deviceInfo.value) {
|
||||
deviceInfo.value.namespace = newNamespace
|
||||
}
|
||||
toast.success('命名空间已更新')
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
// 检查是否存在设备UUID
|
||||
const existingUuid = deviceStore.getDeviceUuid()
|
||||
@ -466,6 +482,14 @@ onMounted(async () => {
|
||||
<Settings class="h-4 w-4" />
|
||||
高级设置
|
||||
</DropdownItem>
|
||||
<DropdownItem @click="$router.push('/auto-auth-management')">
|
||||
<Shield class="h-4 w-4" />
|
||||
自动授权配置
|
||||
</DropdownItem>
|
||||
<DropdownItem @click="$router.push('/auto-auth-test')">
|
||||
<TestTube2 class="h-4 w-4" />
|
||||
API 测试工具
|
||||
</DropdownItem>
|
||||
<DropdownItem @click="handleLogout" class="text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-300">
|
||||
<LogOut class="h-4 w-4" />
|
||||
退出登录
|
||||
@ -500,33 +524,50 @@ onMounted(async () => {
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="container mx-auto px-6 py-8 max-w-7xl">
|
||||
<!-- Namespace 提示卡片 - 如果 namespace 等于 UUID -->
|
||||
<Card v-if="namespaceEqualsUuid" class="mb-6 border-yellow-200 dark:border-yellow-800 bg-yellow-50 dark:bg-yellow-950/20">
|
||||
<CardContent class="py-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<AlertCircle class="h-5 w-5 text-yellow-600 dark:text-yellow-400 mt-0.5 flex-shrink-0" />
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-medium text-yellow-900 dark:text-yellow-100 mb-1">
|
||||
建议自定义命名空间
|
||||
</p>
|
||||
<p class="text-sm text-yellow-700 dark:text-yellow-300 mb-3">
|
||||
您的命名空间当前使用设备 UUID，建议修改为更有意义的名称（如班级名、房间号等），方便自动授权时识别。
|
||||
</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
@click="showEditNamespaceDialog = true"
|
||||
class="bg-yellow-100 dark:bg-yellow-900/30 border-yellow-300 dark:border-yellow-700 hover:bg-yellow-200 dark:hover:bg-yellow-900/50"
|
||||
>
|
||||
<Settings class="h-3 w-3 mr-2" />
|
||||
立即修改
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Device Info Card -->
|
||||
<Card class="mb-8 border-2 shadow-xl bg-gradient-to-br from-card to-card/95">
|
||||
<CardHeader class="pb-4">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="rounded-lg bg-primary/10 p-2">
|
||||
<Key class="h-5 w-5 text-primary" />
|
||||
<Layers class="h-5 w-5 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<CardTitle class="text-lg">
|
||||
{{ deviceInfo?.name || '设备标识' }}
|
||||
{{ deviceInfo?.name || '设备' }}
|
||||
</CardTitle>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="h-6 w-6"
|
||||
@click="showEditNameDialog = true"
|
||||
title="编辑设备名称"
|
||||
>
|
||||
<Settings class="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
<CardDescription>您的唯一设备标识符</CardDescription>
|
||||
<CardDescription>设备命名空间标识符</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="flex items-center gap-2 flex-wrap">
|
||||
<Badge
|
||||
variant="outline"
|
||||
class="px-3 py-1"
|
||||
@ -534,7 +575,7 @@ onMounted(async () => {
|
||||
>
|
||||
<Lock v-if="hasPassword" class="h-3 w-3 mr-1.5" />
|
||||
<AlertCircle v-else class="h-3 w-3 mr-1.5" />
|
||||
{{ hasPassword ? '已设密码保护' : '未设密码' }}
|
||||
{{ hasPassword ? '已设密码' : '未设密码' }}
|
||||
</Badge>
|
||||
|
||||
<!-- 设备账户绑定状态 -->
|
||||
@ -550,33 +591,56 @@ onMounted(async () => {
|
||||
>
|
||||
<User class="h-4 w-4 mr-2" />
|
||||
绑定到账户
|
||||
</Button><Button
|
||||
</Button>
|
||||
<Button
|
||||
@click="$router.push('/password-manager')"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
><Settings class="h-4 w-4" />
|
||||
高级设置</Button>
|
||||
>
|
||||
<Settings class="h-4 w-4 mr-1" />
|
||||
高级设置
|
||||
</Button>
|
||||
<Button
|
||||
@click="$router.push('/auto-auth-management')"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
>
|
||||
<Shield class="h-4 w-4 mr-1" />
|
||||
自动授权
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div class="space-y-4">
|
||||
<!-- UUID Display -->
|
||||
<!-- Namespace Display (主要显示) -->
|
||||
<div class="relative group">
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-primary/20 to-primary/10 rounded-lg blur-xl group-hover:blur-2xl transition-all duration-300 opacity-50" />
|
||||
<div class="relative flex items-center gap-2 p-4 bg-gradient-to-r from-muted/80 to-muted/60 rounded-lg border">
|
||||
<div class="relative">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<Label class="text-sm font-medium">命名空间</Label>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
@click="showEditNamespaceDialog = true"
|
||||
class="h-7"
|
||||
>
|
||||
<Settings class="h-3 w-3 mr-1" />
|
||||
编辑
|
||||
</Button>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 p-4 bg-gradient-to-r from-muted/80 to-muted/60 rounded-lg border">
|
||||
<code class="flex-1 text-sm font-mono tracking-wider select-all">
|
||||
{{ deviceUuid }}
|
||||
{{ deviceInfo?.namespace || deviceUuid }}
|
||||
</code>
|
||||
<div class="flex gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="h-8 w-8"
|
||||
@click="copyToClipboard(deviceUuid, 'uuid')"
|
||||
title="复制设备标识"
|
||||
@click="copyToClipboard(deviceInfo?.namespace || deviceUuid, 'namespace')"
|
||||
title="复制命名空间"
|
||||
>
|
||||
<CheckCircle2 v-if="copied === 'uuid'" class="h-4 w-4 text-green-500 animate-in zoom-in-50" />
|
||||
<CheckCircle2 v-if="copied === 'namespace'" class="h-4 w-4 text-green-500 animate-in zoom-in-50" />
|
||||
<Copy v-else class="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
@ -672,6 +736,11 @@ onMounted(async () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 功能导航 -->
|
||||
<div class="mt-12">
|
||||
<FeatureNavigation />
|
||||
</div>
|
||||
|
||||
|
||||
<Dialog v-model:open="showAuthorizeDialog">
|
||||
<DialogContent>
|
||||
@ -908,5 +977,15 @@ onMounted(async () => {
|
||||
:has-password="hasPassword"
|
||||
@success="handleDeviceNameUpdated"
|
||||
/>
|
||||
|
||||
<!-- 命名空间编辑弹框 -->
|
||||
<EditNamespaceDialog
|
||||
v-if="accountStore.isAuthenticated && deviceInfo"
|
||||
v-model="showEditNamespaceDialog"
|
||||
:device-uuid="deviceUuid"
|
||||
:current-namespace="deviceInfo.namespace"
|
||||
:account-token="accountStore.token"
|
||||
@success="handleNamespaceUpdated"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@ -10,6 +10,7 @@ import { Label } from '@/components/ui/label'
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import PasswordInput from '@/components/PasswordInput.vue'
|
||||
import EditDeviceNameDialog from '@/components/EditDeviceNameDialog.vue'
|
||||
import {
|
||||
Shield,
|
||||
Key,
|
||||
@ -25,7 +26,8 @@ import {
|
||||
EyeOff,
|
||||
HelpCircle,
|
||||
RefreshCw,
|
||||
Smartphone
|
||||
Smartphone,
|
||||
Copy
|
||||
} from 'lucide-vue-next'
|
||||
import DeviceRegisterDialog from '@/components/DeviceRegisterDialog.vue'
|
||||
|
||||
@ -43,6 +45,7 @@ const showDeletePasswordDialog = ref(false)
|
||||
const showHintDialog = ref(false)
|
||||
const showResetDeviceDialog = ref(false)
|
||||
const showRegisterDialog = ref(false)
|
||||
const showEditNameDialog = ref(false)
|
||||
const deviceRequired = ref(false)
|
||||
|
||||
// Form data
|
||||
@ -57,6 +60,20 @@ const hintPassword = ref('')
|
||||
const isLoading = ref(false)
|
||||
const successMessage = ref('')
|
||||
const errorMessage = ref('')
|
||||
const copied = ref(null)
|
||||
|
||||
// 复制到剪贴板
|
||||
const copyToClipboard = async (text, type) => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text)
|
||||
copied.value = type
|
||||
setTimeout(() => {
|
||||
copied.value = null
|
||||
}, 2000)
|
||||
} catch (error) {
|
||||
console.error('Failed to copy:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 加载设备信息
|
||||
const loadDeviceInfo = async () => {
|
||||
@ -246,6 +263,15 @@ const updateUuid = () => {
|
||||
loadDeviceInfo()
|
||||
}
|
||||
|
||||
// 更新设备名称成功回调
|
||||
const handleDeviceNameUpdated = async () => {
|
||||
await loadDeviceInfo()
|
||||
successMessage.value = '设备名称已更新！'
|
||||
setTimeout(() => {
|
||||
successMessage.value = ''
|
||||
}, 3000)
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
// 检查是否存在设备UUID
|
||||
const existingUuid = deviceStore.getDeviceUuid()
|
||||
@ -303,6 +329,83 @@ onMounted(async () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Device Info Card -->
|
||||
<Card class="mb-6 border-2">
|
||||
<CardHeader>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="rounded-lg bg-primary/10 p-2">
|
||||
<Smartphone class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle>设备信息</CardTitle>
|
||||
<CardDescription>设备标识和基本信息</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div class="space-y-4">
|
||||
<!-- Device Name -->
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<Label class="text-sm font-medium">设备名称</Label>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
@click="showEditNameDialog = true"
|
||||
class="h-7"
|
||||
>
|
||||
<Edit class="h-3 w-3 mr-1" />
|
||||
编辑
|
||||
</Button>
|
||||
</div>
|
||||
<div class="p-3 rounded-lg bg-muted/50">
|
||||
<p class="text-sm">{{ deviceInfo?.name || '未命名设备' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Device UUID -->
|
||||
<div>
|
||||
<Label class="text-sm font-medium mb-2 block">设备 UUID</Label>
|
||||
<div class="flex items-center gap-2 p-3 rounded-lg bg-muted/50">
|
||||
<code class="flex-1 text-sm font-mono break-all">{{ deviceUuid }}</code>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="h-8 w-8 flex-shrink-0"
|
||||
@click="copyToClipboard(deviceUuid, 'uuid')"
|
||||
title="复制 UUID"
|
||||
>
|
||||
<CheckCircle2 v-if="copied === 'uuid'" class="h-4 w-4 text-green-500" />
|
||||
<Copy v-else class="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<p class="text-xs text-muted-foreground mt-1">设备的唯一标识符，用于系统识别</p>
|
||||
</div>
|
||||
|
||||
<!-- Namespace -->
|
||||
<div>
|
||||
<Label class="text-sm font-medium mb-2 block">命名空间</Label>
|
||||
<div class="flex items-center gap-2 p-3 rounded-lg bg-muted/50">
|
||||
<code class="flex-1 text-sm font-mono break-all">{{ deviceInfo?.namespace || deviceUuid }}</code>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="h-8 w-8 flex-shrink-0"
|
||||
@click="copyToClipboard(deviceInfo?.namespace || deviceUuid, 'namespace')"
|
||||
title="复制命名空间"
|
||||
>
|
||||
<CheckCircle2 v-if="copied === 'namespace'" class="h-4 w-4 text-green-500" />
|
||||
<Copy v-else class="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<p class="text-xs text-muted-foreground mt-1">用于自动授权登录的设备标识</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Password Status Card -->
|
||||
<Card class="mb-6 border-2">
|
||||
<CardHeader>
|
||||
@ -325,12 +428,6 @@ onMounted(async () => {
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div class="space-y-4">
|
||||
<!-- Device UUID -->
|
||||
<div class="p-4 rounded-lg bg-muted/50">
|
||||
<Label class="text-xs text-muted-foreground">设备 UUID</Label>
|
||||
<code class="block mt-1 text-sm font-mono break-all">{{ deviceUuid }}</code>
|
||||
</div>
|
||||
|
||||
<!-- Password Hint -->
|
||||
<div v-if="hasPassword && passwordHint" class="p-4 rounded-lg bg-blue-50 dark:bg-blue-950/20 border border-blue-200 dark:border-blue-900">
|
||||
<div class="flex items-start gap-2">
|
||||
@ -600,5 +697,14 @@ onMounted(async () => {
|
||||
@confirm="updateUuid"
|
||||
:required="deviceRequired"
|
||||
/>
|
||||
|
||||
<!-- 设备名称编辑弹框 -->
|
||||
<EditDeviceNameDialog
|
||||
v-model="showEditNameDialog"
|
||||
:device-uuid="deviceUuid"
|
||||
:current-name="deviceInfo?.deviceName || ''"
|
||||
:has-password="hasPassword"
|
||||
@success="handleDeviceNameUpdated"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@ -15,6 +15,7 @@ export const useAccountStore = defineStore('account', () => {
|
||||
const isAuthenticated = computed(() => !!token.value)
|
||||
const userName = computed(() => profile.value?.name || '')
|
||||
const userAvatar = computed(() => profile.value?.avatarUrl || '')
|
||||
const userId = computed(() => profile.value?.id || null)
|
||||
const userProviderDisplay = computed(() => profile.value?.providerInfo?.displayName || profile.value?.providerInfo?.name || providerName.value || profile.value?.provider || '')
|
||||
const userProviderColor = computed(() => profile.value?.providerInfo?.color || providerColor.value || '')
|
||||
|
||||
@ -124,6 +125,7 @@ export const useAccountStore = defineStore('account', () => {
|
||||
isAuthenticated,
|
||||
userName,
|
||||
userAvatar,
|
||||
userId,
|
||||
userProviderDisplay,
|
||||
userProviderColor,
|
||||
// 方法
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user