feat: 首页素材画廊增加分类筛选标签

- 后端 SQL 增加 json_extract 提取素材 metaType (frame/spritesheet/preview)
- 前端 AssetGallery 新增分类标签栏：全部/精灵表/帧/场景瓦片/背景/UI
- 按 metaType + assetType 组合过滤展示

backend/internal/handler/generate.go

@@ -313,13 +313,14 @@ type RecentAssetItem struct {
 	Format    string `json:"format"`
 	Prompt    string `json:"prompt"`
 	AssetType string `json:"assetType"`
+	MetaType  string `json:"metaType"` // frame / spritesheet / preview
 	TaskID    string `json:"taskId"`
 	CreatedAt string `json:"createdAt"`
 }
 
 // GetRecentAssets 获取最近生成的素材列表（已完成任务的全部素材）。
 func GetRecentAssets(c *gin.Context) {
-	limit := 20
+	limit := 60
 
 	var dbRows []struct {
 		Key       string
@@ -327,6 +328,7 @@ func GetRecentAssets(c *gin.Context) {
 		Format    string
 		Prompt    string
 		AssetType string
+		MetaType  string
 		TaskID    string
 		ProjectID uint
 		CreatedAt string
@@ -334,6 +336,7 @@ func GetRecentAssets(c *gin.Context) {
 
 	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.created_at as created_at
 			FROM assets a
 			INNER JOIN tasks t ON a.task_id = t.id
@@ -350,6 +353,7 @@ func GetRecentAssets(c *gin.Context) {
 			Format:    r.Format,
 			Prompt:    r.Prompt,
 			AssetType: r.AssetType,
+			MetaType:  r.MetaType,
 			TaskID:    r.TaskID,
 			CreatedAt: r.CreatedAt,
 		}

frontend/src/api/types.ts

@@ -105,6 +105,7 @@ export interface RecentAssetItem {
   format: string
   prompt: string
   assetType: string
+  metaType: string
   taskId: string
   createdAt: string
 }

frontend/src/components/AssetGallery.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useMemo } from 'react'
 import { getRecentAssets } from '../api/generate'
 import type { RecentAssetItem } from '../api/types'
 
@@ -9,9 +9,38 @@ const ASSET_TYPE_LABELS: Record<string, string> = {
   animation: '动画',
 }
 
+const CATEGORIES = [
+  { key: 'all', label: '全部' },
+  { key: 'spritesheet', label: '精灵表' },
+  { key: 'frame', label: '帧' },
+  { key: 'tileset', label: '场景瓦片' },
+  { key: 'background', label: '背景' },
+  { key: 'ui', label: 'UI' },
+]
+
+function matchCategory(item: RecentAssetItem, cat: string): boolean {
+  switch (cat) {
+    case 'all':
+      return true
+    case 'spritesheet':
+      return item.metaType === 'spritesheet'
+    case 'frame':
+      return item.metaType === 'frame' || item.metaType === 'preview' || item.format === 'gif'
+    case 'tileset':
+      return item.assetType === 'sprite' && item.metaType === 'spritesheet'
+    case 'background':
+      return item.assetType === 'background'
+    case 'ui':
+      return item.assetType === 'ui'
+    default:
+      return true
+  }
+}
+
 export default function AssetGallery() {
   const [assets, setAssets] = useState<RecentAssetItem[]>([])
   const [loading, setLoading] = useState(true)
+  const [activeCat, setActiveCat] = useState('all')
 
   useEffect(() => {
     getRecentAssets()
@@ -20,81 +49,110 @@ export default function AssetGallery() {
       .finally(() => setLoading(false))
   }, [])
 
-  if (loading) return null
+  const filtered = useMemo(
+    () => assets.filter(item => matchCategory(item, activeCat)),
+    [assets, activeCat]
+  )
 
+  if (loading) return null
   if (assets.length === 0) return null
 
   return (
     <section style={{ marginBottom: 32 }}>
-      <h2 style={{ fontSize: 18, marginBottom: 16 }}>最近生成</h2>
+      <h2 style={{ fontSize: 18, marginBottom: 12 }}>最近生成</h2>
-      <div
+
-        style={{
+      {/* 分类标签 */}
-          display: 'grid',
+      <div style={{ display: 'flex', gap: 8, marginBottom: 16, flexWrap: 'wrap' }}>
-          gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))',
+        {CATEGORIES.map(cat => (
-          gap: 12,
+          <button
-        }}
+            key={cat.key}
-      >
+            type="button"
-        {assets.map((item, i) => (
+            onClick={() => setActiveCat(cat.key)}
-          <div
+            style={{
-            key={`${item.taskId}-${i}`}
+              fontSize: 13,
-            className="card"
+              padding: '4px 14px',
-            style={{ padding: 8, cursor: 'pointer' }}
+              borderRadius: 999,
-            onClick={() => {
+              border: `1px solid ${activeCat === cat.key ? 'var(--accent)' : 'var(--border)'}`,
-              // navigate to result page — need projectId for URL
+              background: activeCat === cat.key ? 'var(--accent-dim)' : 'transparent',
-              // For now just open the image
+              color: activeCat === cat.key ? 'var(--accent)' : 'var(--text-secondary)',
+              cursor: 'pointer',
+              fontWeight: activeCat === cat.key ? 600 : 400,
             }}
           >
-            <div
+            {cat.label}
-              style={{
+          </button>
-                width: '100%',
-                aspectRatio: '1',
-                overflow: 'hidden',
-                borderRadius: 'var(--radius)',
-                background: 'var(--bg-input)',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-              }}
-            >
-              <img
-                src={item.url}
-                alt={item.prompt}
-                loading="lazy"
-                style={{
-                  maxWidth: '100%',
-                  maxHeight: '100%',
-                  objectFit: 'contain',
-                }}
-              />
-            </div>
-            <div style={{ marginTop: 6 }}>
-              <span
-                style={{
-                  fontSize: 11,
-                  padding: '1px 6px',
-                  borderRadius: 999,
-                  background: 'var(--accent-dim)',
-                  color: 'var(--accent)',
-                }}
-              >
-                {ASSET_TYPE_LABELS[item.assetType] || item.assetType}
-              </span>
-            </div>
-            <p
-              style={{
-                fontSize: 12,
-                color: 'var(--text-secondary)',
-                marginTop: 4,
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                whiteSpace: 'nowrap',
-              }}
-            >
-              {item.prompt}
-            </p>
-          </div>
         ))}
       </div>
+
+      {/* 素材网格 */}
+      {filtered.length === 0 ? (
+        <p style={{ fontSize: 13, color: 'var(--text-muted)' }}>暂无此类素材</p>
+      ) : (
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))',
+            gap: 12,
+          }}
+        >
+          {filtered.map((item, i) => (
+            <div
+              key={`${item.taskId}-${i}`}
+              className="card"
+              style={{ padding: 8 }}
+            >
+              <div
+                style={{
+                  width: '100%',
+                  aspectRatio: '1',
+                  overflow: 'hidden',
+                  borderRadius: 'var(--radius)',
+                  background: 'var(--bg-input)',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                <img
+                  src={item.url}
+                  alt={item.prompt}
+                  loading="lazy"
+                  style={{
+                    maxWidth: '100%',
+                    maxHeight: '100%',
+                    objectFit: 'contain',
+                  }}
+                />
+              </div>
+              <div style={{ marginTop: 6 }}>
+                <span
+                  style={{
+                    fontSize: 11,
+                    padding: '1px 6px',
+                    borderRadius: 999,
+                    background: 'var(--accent-dim)',
+                    color: 'var(--accent)',
+                  }}
+                >
+                  {ASSET_TYPE_LABELS[item.assetType] || item.assetType}
+                </span>
+              </div>
+              <p
+                style={{
+                  fontSize: 12,
+                  color: 'var(--text-secondary)',
+                  marginTop: 4,
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                {item.prompt}
+              </p>
+            </div>
+          ))}
+        </div>
+      )}
     </section>
   )
 }