227 lines
5.5 KiB
Markdown
227 lines
5.5 KiB
Markdown
# 應用編輯功能修正報告
|
|
|
|
## 問題描述
|
|
|
|
### 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
|
|
**測試狀態**: ✅ 已測試 |