優化應用 APP 新增、編輯邏輯
This commit is contained in:
227
APP_EDIT_FIX_REPORT.md
Normal file
227
APP_EDIT_FIX_REPORT.md
Normal file
@@ -0,0 +1,227 @@
|
||||
# 應用編輯功能修正報告
|
||||
|
||||
## 問題描述
|
||||
|
||||
### 1. 所屬部門無法帶入編輯介面
|
||||
- **問題**: 編輯應用時，所屬部門欄位無法正確顯示現有值
|
||||
- **原因**: `handleEditApp` 函數中資料來源路徑錯誤
|
||||
|
||||
### 2. 應用圖示沒有儲存到資料庫
|
||||
- **問題**: 選擇的圖示無法保存，總是顯示預設圖示
|
||||
- **原因**: 資料庫 `apps` 表缺少 `icon` 和 `icon_color` 欄位
|
||||
|
||||
## 修正方案
|
||||
|
||||
### 1. 修正所屬部門資料來源
|
||||
|
||||
**修改檔案**: `components/admin/app-management.tsx`
|
||||
|
||||
**修正內容**:
|
||||
```typescript
|
||||
const handleEditApp = (app: any) => {
|
||||
setSelectedApp(app)
|
||||
setNewApp({
|
||||
name: app.name,
|
||||
type: app.type,
|
||||
department: app.creator?.department || app.department || "HQBU", // 修正：優先從 creator.department 獲取
|
||||
creator: app.creator?.name || app.creator || "", // 修正：優先從 creator.name 獲取
|
||||
description: app.description,
|
||||
appUrl: app.appUrl || app.demoUrl || "", // 修正：同時檢查 appUrl 和 demoUrl
|
||||
icon: app.icon || "Bot",
|
||||
iconColor: app.iconColor || "from-blue-500 to-purple-500",
|
||||
})
|
||||
setShowEditApp(true)
|
||||
}
|
||||
```
|
||||
|
||||
### 2. 新增資料庫圖示欄位
|
||||
|
||||
**修改檔案**: `database_setup.sql`
|
||||
|
||||
**新增欄位**:
|
||||
```sql
|
||||
-- 6. 應用表 (apps)
|
||||
CREATE TABLE apps (
|
||||
id VARCHAR(36) PRIMARY KEY,
|
||||
name VARCHAR(200) NOT NULL,
|
||||
description TEXT,
|
||||
creator_id VARCHAR(36) NOT NULL,
|
||||
team_id VARCHAR(36),
|
||||
likes_count INT DEFAULT 0,
|
||||
views_count INT DEFAULT 0,
|
||||
rating DECIMAL(3,2) DEFAULT 0,
|
||||
icon VARCHAR(50) DEFAULT 'Bot', -- 新增：圖示欄位
|
||||
icon_color VARCHAR(100) DEFAULT 'from-blue-500 to-purple-500', -- 新增：圖示顏色欄位
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
|
||||
FOREIGN KEY (creator_id) REFERENCES users(id) ON DELETE CASCADE,
|
||||
FOREIGN KEY (team_id) REFERENCES teams(id) ON DELETE SET NULL,
|
||||
INDEX idx_creator (creator_id),
|
||||
INDEX idx_team (team_id),
|
||||
INDEX idx_rating (rating),
|
||||
INDEX idx_likes (likes_count)
|
||||
);
|
||||
```
|
||||
|
||||
### 3. 更新 TypeScript 類型定義
|
||||
|
||||
**修改檔案**: `types/app.ts`
|
||||
|
||||
**新增欄位**:
|
||||
```typescript
|
||||
export interface App {
|
||||
// ... 其他欄位
|
||||
icon?: string;
|
||||
iconColor?: string;
|
||||
// ... 其他欄位
|
||||
}
|
||||
|
||||
export interface AppUpdateRequest {
|
||||
// ... 其他欄位
|
||||
icon?: string;
|
||||
iconColor?: string;
|
||||
// ... 其他欄位
|
||||
}
|
||||
```
|
||||
|
||||
### 4. 更新 API 路由
|
||||
|
||||
**修改檔案**: `app/api/apps/[id]/route.ts`
|
||||
|
||||
**新增處理**:
|
||||
```typescript
|
||||
const {
|
||||
// ... 其他欄位
|
||||
icon,
|
||||
iconColor
|
||||
}: AppUpdateRequest = body;
|
||||
|
||||
// 在更新資料驗證部分
|
||||
if (icon !== undefined) {
|
||||
updateData.icon = icon;
|
||||
}
|
||||
|
||||
if (iconColor !== undefined) {
|
||||
updateData.icon_color = iconColor;
|
||||
}
|
||||
```
|
||||
|
||||
**修改檔案**: `app/api/apps/route.ts`
|
||||
|
||||
**新增回應欄位**:
|
||||
```typescript
|
||||
const formattedApps = apps.map((app: any) => ({
|
||||
// ... 其他欄位
|
||||
icon: app.icon,
|
||||
iconColor: app.icon_color,
|
||||
// ... 其他欄位
|
||||
}));
|
||||
```
|
||||
|
||||
### 5. 更新前端資料處理
|
||||
|
||||
**修改檔案**: `components/admin/app-management.tsx`
|
||||
|
||||
**修正 loadApps 函數**:
|
||||
```typescript
|
||||
const formattedApps = (data.apps || []).map((app: any) => ({
|
||||
// ... 其他欄位
|
||||
icon: app.icon || 'Bot',
|
||||
iconColor: app.iconColor || 'from-blue-500 to-purple-500',
|
||||
// ... 其他欄位
|
||||
}))
|
||||
```
|
||||
|
||||
**修正 handleUpdateApp 函數**:
|
||||
```typescript
|
||||
const updateData = {
|
||||
name: newApp.name,
|
||||
description: newApp.description,
|
||||
type: mapTypeToApiType(newApp.type),
|
||||
demoUrl: newApp.appUrl || undefined,
|
||||
icon: newApp.icon, // 新增：更新圖示
|
||||
iconColor: newApp.iconColor, // 新增：更新圖示顏色
|
||||
department: newApp.department, // 新增：更新部門
|
||||
}
|
||||
```
|
||||
|
||||
## 測試腳本
|
||||
|
||||
**新增檔案**: `scripts/test-app-edit.js`
|
||||
|
||||
**功能**:
|
||||
- 檢查資料庫結構是否包含圖示欄位
|
||||
- 檢查現有應用程式的圖示設定
|
||||
- 測試圖示更新功能
|
||||
|
||||
**執行方式**:
|
||||
```bash
|
||||
npm run test:app-edit
|
||||
```
|
||||
|
||||
## 資料庫更新腳本
|
||||
|
||||
**修改檔案**: `scripts/fix-apps-table.js`
|
||||
|
||||
**新增欄位**:
|
||||
```sql
|
||||
-- 添加圖示欄位
|
||||
ALTER TABLE apps ADD COLUMN icon VARCHAR(50) DEFAULT 'Bot',
|
||||
|
||||
-- 添加圖示顏色欄位
|
||||
ALTER TABLE apps ADD COLUMN icon_color VARCHAR(100) DEFAULT 'from-blue-500 to-purple-500',
|
||||
```
|
||||
|
||||
**執行方式**:
|
||||
```bash
|
||||
npm run db:update-structure
|
||||
```
|
||||
|
||||
## 修正結果
|
||||
|
||||
### ✅ 所屬部門問題已解決
|
||||
- 編輯應用時，所屬部門欄位會正確顯示現有值
|
||||
- 資料來源優先從 `app.creator?.department` 獲取
|
||||
- 支援多種資料結構格式
|
||||
|
||||
### ✅ 應用圖示問題已解決
|
||||
- 資料庫新增 `icon` 和 `icon_color` 欄位
|
||||
- 前端可以正確保存和顯示選擇的圖示
|
||||
- API 支援圖示的更新和查詢
|
||||
|
||||
### ✅ 完整的功能支援
|
||||
- 編輯對話框包含圖示選擇器
|
||||
- 所屬部門下拉選單
|
||||
- 資料正確保存到資料庫
|
||||
- 前端正確顯示保存的資料
|
||||
|
||||
## 使用說明
|
||||
|
||||
### 1. 更新資料庫結構
|
||||
```bash
|
||||
npm run db:update-structure
|
||||
```
|
||||
|
||||
### 2. 測試功能
|
||||
```bash
|
||||
npm run test:app-edit
|
||||
```
|
||||
|
||||
### 3. 在管理後台使用
|
||||
1. 進入應用管理頁面
|
||||
2. 點擊應用程式的「編輯應用」按鈕
|
||||
3. 修改所屬部門和選擇應用圖示
|
||||
4. 點擊「更新應用」保存變更
|
||||
|
||||
## 注意事項
|
||||
|
||||
1. **資料庫更新**: 需要先執行 `npm run db:update-structure` 來新增圖示欄位
|
||||
2. **向後相容**: 現有的應用程式會使用預設圖示，直到手動更新
|
||||
3. **圖示選擇**: 提供 20 種不同的圖示供選擇
|
||||
4. **部門管理**: 支援 HQBU、ITBU、MBU1、SBU 四個部門
|
||||
|
||||
---
|
||||
|
||||
**修正完成時間**: 2025-01-XX
|
||||
**修正人員**: AI Assistant
|
||||
**測試狀態**: ✅ 已測試
|
||||
Reference in New Issue
Block a user