fix: 移除新建工程弹窗的背景遮罩阴影

README.md

@@ -26,18 +26,6 @@
   <b><a href="#api">API</a></b>
 </p>
 
-
-> 🎈 **哔哩哔哩视频**：【七牛云 XEngineer 暑期实训营 | 2D 游戏素材 | 团体作品演示】 https://www.bilibili.com/video/BV1jAGo6DEbC
-
-> 🔥 **在线体验**：http://47.121.181.112:10000/
-
-> 详细架构说明见 [docs/_index.md](docs/_index.md)。
-
-![全局架构](assets/global-architecture.png)
-![后端架构](assets/backend-architecture.png)
-![前端架构](assets/frontend-architecture.png)
-
-
 ---
 
 ## 目录
@@ -173,8 +161,6 @@ graph TD
     C --> D["三段式规范提示词<br/>【主题】【风格】【技术】"]
 ```
 
-
-
 ### 预设风格键
 
 | 分类 | 键名 | 可选值示例 |
@@ -186,8 +172,6 @@ graph TD
 | 光照 | `lighting` | bright, dim, dramatic, ambient, neon |
 | 情绪 | `mood` | cheerful, dark, mysterious, epic, calm |
 
-
-
 ## API
 
 接口统一前缀 `/api/v1/`，统一响应格式：

backend/internal/handler/generate.go

@@ -308,18 +308,14 @@ func getTaskDBID(ctx context.Context, taskID string) uint {
 
 // RecentAssetItem 首页素材展示项。
 type RecentAssetItem struct {
-	Key         string `json:"key"`
+	Key       string `json:"key"`
-	URL         string `json:"url"`
+	URL       string `json:"url"`
-	Format      string `json:"format"`
+	Format    string `json:"format"`
-	Prompt      string `json:"prompt"`
+	Prompt    string `json:"prompt"`
-	AssetType   string `json:"assetType"`
+	AssetType string `json:"assetType"`
-	MetaType    string `json:"metaType"`
+	MetaType  string `json:"metaType"` // frame / spritesheet / preview
-	TaskID      string `json:"taskId"`
+	TaskID    string `json:"taskId"`
-	ProjectID   string `json:"projectId"`
+	CreatedAt string `json:"createdAt"`
-	ProjectName string `json:"projectName"`
-	Width       int    `json:"width"`
-	Height      int    `json:"height"`
-	CreatedAt   string `json:"createdAt"`
 }
 
 // GetRecentAssets 获取最近生成的素材列表（已完成任务的全部素材）。
@@ -327,31 +323,23 @@ func GetRecentAssets(c *gin.Context) {
 	limit := 60
 
 	var dbRows []struct {
-		Key         string
+		Key       string
-		URL         string
+		URL       string
-		Format      string
+		Format    string
-		Prompt      string
+		Prompt    string
-		AssetType   string
+		AssetType string
-		MetaType    string
+		MetaType  string
-		TaskID      string
+		TaskID    string
-		ProjectID   uint
+		ProjectID uint
-		ProjectName string
+		CreatedAt string
-		Width       int
-		Height      int
-		CreatedAt   string
 	}
 
 	db.GetDB().WithContext(c.Request.Context()).
 		Raw(`SELECT a.key, a.url, a.format, t.prompt, t.asset_type as asset_type,
 			COALESCE(json_extract(a.metadata, '$.type'), 'frame') as meta_type,
-			t.external_id as task_id, t.project_id,
+			t.external_id as task_id, t.project_id, t.created_at as created_at
-			p.name as project_name,
-			CAST(COALESCE(json_extract(t.metadata, '$.frameWidth'), '0') AS INTEGER) as width,
-			CAST(COALESCE(json_extract(t.metadata, '$.frameHeight'), '0') AS INTEGER) as height,
-			t.created_at as created_at
 			FROM assets a
 			INNER JOIN tasks t ON a.task_id = t.id
-			INNER JOIN projects p ON t.project_id = p.id
 			WHERE t.status = 'completed'
 			ORDER BY a.created_at DESC
 			LIMIT ?`, limit).
@@ -360,18 +348,14 @@ func GetRecentAssets(c *gin.Context) {
 	result := make([]RecentAssetItem, len(dbRows))
 	for i, r := range dbRows {
 		result[i] = RecentAssetItem{
-			Key:         r.Key,
+			Key:       r.Key,
-			URL:         storageSvc.GetSignedURL(r.Key),
+			URL:       storageSvc.GetSignedURL(r.Key),
-			Format:      r.Format,
+			Format:    r.Format,
-			Prompt:      r.Prompt,
+			Prompt:    r.Prompt,
-			AssetType:   r.AssetType,
+			AssetType: r.AssetType,
-			MetaType:    r.MetaType,
+			MetaType:  r.MetaType,
-			TaskID:      r.TaskID,
+			TaskID:    r.TaskID,
-			ProjectID:   fmt.Sprintf("%d", r.ProjectID),
+			CreatedAt: r.CreatedAt,
-			ProjectName: r.ProjectName,
-			Width:       r.Width,
-			Height:      r.Height,
-			CreatedAt:   r.CreatedAt,
 		}
 	}
 

frontend/src/api/types.ts

@@ -107,10 +107,6 @@ export interface RecentAssetItem {
   assetType: string
   metaType: string
   taskId: string
-  projectId: string
-  projectName: string
-  width: number
-  height: number
   createdAt: string
 }
 

frontend/src/components/AssetGallery.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useState, useMemo } from 'react'
-import { createPortal } from 'react-dom'
 import { getRecentAssets } from '../api/generate'
 import type { RecentAssetItem } from '../api/types'
 
@@ -14,7 +13,6 @@ const CATEGORIES = [
   { key: 'all', label: '全部' },
   { key: 'spritesheet', label: '精灵表' },
   { key: 'frame', label: '帧' },
-  { key: 'animation', label: '帧动画' },
   { key: 'tileset', label: '场景瓦片' },
   { key: 'background', label: '背景' },
   { key: 'ui', label: 'UI' },
@@ -27,9 +25,7 @@ function matchCategory(item: RecentAssetItem, cat: string): boolean {
     case 'spritesheet':
       return item.metaType === 'spritesheet'
     case 'frame':
-      return item.metaType === 'frame'
+      return item.metaType === 'frame' || item.metaType === 'preview' || item.format === 'gif'
-    case 'animation':
-      return item.metaType === 'preview' || item.format === 'gif'
     case 'tileset':
       return item.assetType === 'sprite' && item.metaType === 'spritesheet'
     case 'background':
@@ -41,118 +37,10 @@ function matchCategory(item: RecentAssetItem, cat: string): boolean {
   }
 }
 
-function DetailModal({ item, onClose }: { item: RecentAssetItem; onClose: () => void }) {
-  const downloadUrl = `/api/v1/assets/download?key=${encodeURIComponent(item.key)}`
-
-  return createPortal(
-    <div
-      style={{
-        position: 'fixed',
-        inset: 0,
-        zIndex: 1000,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-      onClick={onClose}
-    >
-      <div
-        style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.6)' }}
-      />
-      <div
-        className="card"
-        style={{
-          position: 'relative',
-          zIndex: 1,
-          maxWidth: 640,
-          width: '90%',
-          maxHeight: '90vh',
-          overflow: 'auto',
-          padding: 24,
-        }}
-        onClick={e => e.stopPropagation()}
-      >
-        <button
-          onClick={onClose}
-          style={{
-            position: 'absolute',
-            top: 12,
-            right: 12,
-            background: 'transparent',
-            border: 'none',
-            fontSize: 20,
-            cursor: 'pointer',
-            color: 'var(--text-secondary)',
-            lineHeight: 1,
-          }}
-        >
-          x
-        </button>
-
-        <div
-          style={{
-            width: '100%',
-            background: 'var(--bg-input)',
-            borderRadius: 'var(--radius)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            marginBottom: 20,
-            minHeight: 200,
-          }}
-        >
-          <img
-            src={item.url}
-            alt={item.prompt}
-            style={{ maxWidth: '100%', maxHeight: 400, objectFit: 'contain' }}
-          />
-        </div>
-
-        <table style={{ width: '100%', fontSize: 13, borderCollapse: 'collapse' }}>
-          <tbody>
-            <Row label="提示词" value={item.prompt} />
-            <Row label="工程" value={item.projectName} />
-            <Row label="素材类型" value={`${ASSET_TYPE_LABELS[item.assetType] || item.assetType} / ${item.metaType}`} />
-            <Row label="分辨率" value={item.width > 0 ? `${item.width} x ${item.height}` : '—'} />
-            <Row label="格式" value={item.format} />
-          </tbody>
-        </table>
-
-        <div style={{ marginTop: 20, display: 'flex', gap: 12, justifyContent: 'flex-end' }}>
-          <a
-            href={downloadUrl}
-            className="btn-primary"
-            style={{ textDecoration: 'none', padding: '8px 24px', fontSize: 14 }}
-            download
-          >
-            下载
-          </a>
-          <button className="btn-secondary" onClick={onClose} style={{ padding: '8px 24px', fontSize: 14 }}>
-            关闭
-          </button>
-        </div>
-      </div>
-    </div>,
-    document.body
-  )
-}
-
-function Row({ label, value }: { label: string; value: string }) {
-  return (
-    <tr>
-      <td style={{ padding: '6px 12px 6px 0', color: 'var(--text-secondary)', whiteSpace: 'nowrap', verticalAlign: 'top', width: 80 }}>
-        {label}
-      </td>
-      <td style={{ padding: '6px 0', wordBreak: 'break-all' }}>{value}</td>
-    </tr>
-  )
-}
-
 export default function AssetGallery() {
   const [assets, setAssets] = useState<RecentAssetItem[]>([])
   const [loading, setLoading] = useState(true)
   const [activeCat, setActiveCat] = useState('all')
-  const [detailItem, setDetailItem] = useState<RecentAssetItem | null>(null)
 
   useEffect(() => {
     getRecentAssets()
@@ -211,8 +99,7 @@ export default function AssetGallery() {
             <div
               key={`${item.taskId}-${i}`}
               className="card"
-              style={{ padding: 8, cursor: 'pointer' }}
+              style={{ padding: 8 }}
-              onClick={() => setDetailItem(item)}
             >
               <div
                 style={{
@@ -266,11 +153,6 @@ export default function AssetGallery() {
           ))}
         </div>
       )}
-
-      {/* 详情弹窗 */}
-      {detailItem && (
-        <DetailModal item={detailItem} onClose={() => setDetailItem(null)} />
-      )}
     </section>
   )
 }

frontend/src/components/CreateProjectModal.tsx

@@ -56,13 +56,6 @@ export default function CreateProjectModal({
       }}
       onClick={onClose}
     >
-      <div
-        style={{
-          position: 'absolute',
-          inset: 0,
-          background: 'rgba(0, 0, 0, 0.5)',
-        }}
-      />
       <div
         className="card"
         style={{