新增 App 建立、資料呈現

2025-08-05 16:13:09 +08:00
parent d0c4adf243
commit 5b407ff29c
51 changed files with 6039 additions and 78 deletions
--- a/CONSOLE_ERROR_FIX_REPORT.md
+++ b/CONSOLE_ERROR_FIX_REPORT.md
@@ -0,0 +1,197 @@
+# 控制台錯誤修復報告
+
+## 📋 錯誤分析
+
+**錯誤信息：**
+```
+Error: 創建應用程式失敗
+components\admin\app-management.tsx (214:15) @ handleAddApp
+```
+
+**錯誤位置：**
+```javascript
+throw new Error(errorData.error || '創建應用程式失敗')
+```
+
+## 🔍 根本原因
+
+經過分析，問題出在以下幾個方面：
+
+### 1. 權限問題
+API `/api/apps` 需要用戶具有 `developer` 或 `admin` 角色，但當前用戶可能是 `user` 角色。
+
+### 2. Token 認證問題
+可能沒有有效的 JWT token，或者 token 已過期。
+
+### 3. 用戶不存在
+資料庫中可能沒有合適的管理員用戶。
+
+## ✅ 修復方案
+
+### 1. 改進錯誤處理
+
+**修改文件：** `components/admin/app-management.tsx`
+
+**修復內容：**
+- 添加詳細的調試信息
+- 改進錯誤處理邏輯
+- 添加 token 檢查
+
+```javascript
+const handleAddApp = async () => {
+  try {
+    // 準備應用程式資料
+    const appData = {
+      name: newApp.name,
+      description: newApp.description,
+      type: mapTypeToApiType(newApp.type),
+      demoUrl: newApp.appUrl || undefined,
+      version: '1.0.0'
+    }
+
+    console.log('準備提交的應用資料:', appData)
+
+    // 調用 API 創建應用程式
+    const token = localStorage.getItem('token')
+    console.log('Token:', token ? '存在' : '不存在')
+
+    if (!token) {
+      throw new Error('未找到認證 token，請重新登入')
+    }
+
+    const response = await fetch('/api/apps', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${token}`
+      },
+      body: JSON.stringify(appData)
+    })
+
+    console.log('API 回應狀態:', response.status, response.statusText)
+
+    if (!response.ok) {
+      const errorData = await response.json()
+      console.error('API 錯誤詳情:', errorData)
+      throw new Error(errorData.error || `API 錯誤: ${response.status} ${response.statusText}`)
+    }
+
+    const result = await response.json()
+    console.log('應用程式創建成功:', result)
+
+    // ... 其餘代碼
+  } catch (error) {
+    console.error('創建應用程式失敗:', error)
+    const errorMessage = error instanceof Error ? error.message : '未知錯誤'
+    alert(`創建應用程式失敗: ${errorMessage}`)
+  }
+}
+```
+
+### 2. 創建管理員用戶
+
+**新文件：** `scripts/create-admin-user.js`
+
+**功能：**
+- 創建具有管理員權限的用戶
+- 提供登入憑證
+
+**登入資訊：**
+- 電子郵件：`admin@example.com`
+- 密碼：`Admin123!`
+- 角色：`admin`
+- 部門：`ITBU`
+
+### 3. 測試腳本
+
+**新文件：** `scripts/test-user-permissions.js`
+
+**功能：**
+- 檢查資料庫中的用戶
+- 檢查應用程式列表
+- 提供調試信息
+
+## 🧪 測試步驟
+
+### 步驟 1：創建管理員用戶
+```bash
+npm run create:admin
+```
+
+### 步驟 2：檢查用戶權限
+```bash
+npm run test:user-permissions
+```
+
+### 步驟 3：在瀏覽器中測試
+1. 打開管理後台
+2. 使用以下憑證登入：
+   - 電子郵件：`admin@example.com`
+   - 密碼：`Admin123!`
+3. 嘗試創建新的 AI 應用
+4. 檢查瀏覽器控制台的調試信息
+
+## 📊 修改的文件清單
+
+1. **`components/admin/app-management.tsx`**
+   - 改進 `handleAddApp` 函數的錯誤處理
+   - 添加詳細的調試信息
+   - 添加 token 檢查
+
+2. **`scripts/create-admin-user.js`** (新文件)
+   - 創建管理員用戶腳本
+   - 提供登入憑證
+
+3. **`scripts/test-user-permissions.js`** (新文件)
+   - 檢查用戶權限和資料庫狀態
+
+4. **`package.json`**
+   - 添加新的測試腳本
+
+## ✅ 預期結果
+
+修復後，您應該能夠：
+
+1. **✅ 成功登入管理後台**
+   - 使用提供的管理員憑證
+
+2. **✅ 成功創建應用程式**
+   - 應用程式正確保存到資料庫
+   - 沒有控制台錯誤
+
+3. **✅ 看到詳細的調試信息**
+   - 在瀏覽器控制台中看到 API 調用詳情
+   - 如果有錯誤，會顯示具體的錯誤信息
+
+## 🎯 故障排除
+
+如果仍然有問題，請檢查：
+
+1. **Token 問題**
+   - 確保已正確登入
+   - 檢查 localStorage 中是否有 token
+
+2. **權限問題**
+   - 確保用戶角色是 `admin` 或 `developer`
+   - 使用提供的管理員憑證登入
+
+3. **API 問題**
+   - 檢查瀏覽器控制台的詳細錯誤信息
+   - 確認 API 端點正常工作
+
+## 💡 使用建議
+
+1. **首次使用：**
+   ```bash
+   npm run create:admin
+   ```
+
+2. **登入管理後台：**
+   - 電子郵件：`admin@example.com`
+   - 密碼：`Admin123!`
+
+3. **測試應用創建：**
+   - 在管理後台嘗試創建新的 AI 應用
+   - 檢查瀏覽器控制台的調試信息
+
+現在您的管理後台應該可以正常工作，沒有控制台錯誤！