!77 feat: 首页素材画廊增加分类筛选标签
Merge pull request !77 from 郭永昊/fix/tag-labels-and-click
This commit is contained in:
Gitee
@@ -78,6 +78,7 @@ func main() {
|
||||
v1Auth.POST("/generate", handler.Generate) // 素材生成管线
|
||||
v1Auth.GET("/tasks/:taskId", handler.GetTask) // 查询任务
|
||||
v1Auth.GET("/tasks/:taskId/assets", handler.GetAssets) // 查询任务素材
|
||||
v1Auth.GET("/assets", handler.GetRecentAssets) // 首页最近素材
|
||||
// 图片编辑
|
||||
v1Auth.POST("/images/edit", handler.EditImage) // 图片编辑
|
||||
}
|
||||
|
||||
@@ -306,6 +306,62 @@ func getTaskDBID(ctx context.Context, taskID string) uint {
|
||||
return task.ID
|
||||
}
|
||||
|
||||
// RecentAssetItem 首页素材展示项。
|
||||
type RecentAssetItem struct {
|
||||
Key string `json:"key"`
|
||||
URL string `json:"url"`
|
||||
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 := 60
|
||||
|
||||
var dbRows []struct {
|
||||
Key string
|
||||
URL string
|
||||
Format string
|
||||
Prompt string
|
||||
AssetType string
|
||||
MetaType string
|
||||
TaskID string
|
||||
ProjectID uint
|
||||
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.created_at as created_at
|
||||
FROM assets a
|
||||
INNER JOIN tasks t ON a.task_id = t.id
|
||||
WHERE t.status = 'completed'
|
||||
ORDER BY a.created_at DESC
|
||||
LIMIT ?`, limit).
|
||||
Scan(&dbRows)
|
||||
|
||||
result := make([]RecentAssetItem, len(dbRows))
|
||||
for i, r := range dbRows {
|
||||
result[i] = RecentAssetItem{
|
||||
Key: r.Key,
|
||||
URL: storageSvc.GetSignedURL(r.Key),
|
||||
Format: r.Format,
|
||||
Prompt: r.Prompt,
|
||||
AssetType: r.AssetType,
|
||||
MetaType: r.MetaType,
|
||||
TaskID: r.TaskID,
|
||||
CreatedAt: r.CreatedAt,
|
||||
}
|
||||
}
|
||||
|
||||
c.JSON(http.StatusOK, model.OK(result))
|
||||
}
|
||||
|
||||
// toTaskResponse 转换任务响应格式。
|
||||
func toTaskResponse(task *model.Task) model.TaskResponse {
|
||||
return model.TaskResponse{
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="icon" type="image/png" href="/logo.png" />
|
||||
<title>gen2d</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
@@ -1,4 +1,9 @@
|
||||
import { post, get } from './client'
|
||||
import type { RecentAssetItem } from './types'
|
||||
|
||||
export async function getRecentAssets(): Promise<RecentAssetItem[]> {
|
||||
return get<RecentAssetItem[]>('/api/v1/assets')
|
||||
}
|
||||
import type {
|
||||
Asset,
|
||||
AssetsResponse,
|
||||
|
||||
@@ -98,6 +98,18 @@ export interface Asset {
|
||||
index: number
|
||||
}
|
||||
|
||||
// 首页最近素材
|
||||
export interface RecentAssetItem {
|
||||
key: string
|
||||
url: string
|
||||
format: string
|
||||
prompt: string
|
||||
assetType: string
|
||||
metaType: string
|
||||
taskId: string
|
||||
createdAt: string
|
||||
}
|
||||
|
||||
// 生成请求 — 对应 POST /api/v1/generate
|
||||
export interface GenerateRequest {
|
||||
projectId: string
|
||||
|
||||
@@ -0,0 +1,158 @@
|
||||
import { useEffect, useState, useMemo } from 'react'
|
||||
import { getRecentAssets } from '../api/generate'
|
||||
import type { RecentAssetItem } from '../api/types'
|
||||
|
||||
const ASSET_TYPE_LABELS: Record<string, string> = {
|
||||
sprite: '精灵',
|
||||
background: '背景',
|
||||
ui: 'UI',
|
||||
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()
|
||||
.then(setAssets)
|
||||
.catch(() => {})
|
||||
.finally(() => setLoading(false))
|
||||
}, [])
|
||||
|
||||
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: 12 }}>最近生成</h2>
|
||||
|
||||
{/* 分类标签 */}
|
||||
<div style={{ display: 'flex', gap: 8, marginBottom: 16, flexWrap: 'wrap' }}>
|
||||
{CATEGORIES.map(cat => (
|
||||
<button
|
||||
key={cat.key}
|
||||
type="button"
|
||||
onClick={() => setActiveCat(cat.key)}
|
||||
style={{
|
||||
fontSize: 13,
|
||||
padding: '4px 14px',
|
||||
borderRadius: 999,
|
||||
border: `1px solid ${activeCat === cat.key ? 'var(--accent)' : 'var(--border)'}`,
|
||||
background: activeCat === cat.key ? 'var(--accent-dim)' : 'transparent',
|
||||
color: activeCat === cat.key ? 'var(--accent)' : 'var(--text-secondary)',
|
||||
cursor: 'pointer',
|
||||
fontWeight: activeCat === cat.key ? 600 : 400,
|
||||
}}
|
||||
>
|
||||
{cat.label}
|
||||
</button>
|
||||
))}
|
||||
</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>
|
||||
)
|
||||
}
|
||||
@@ -27,13 +27,16 @@ export default function Layout() {
|
||||
<Link
|
||||
to="/"
|
||||
style={{
|
||||
fontSize: 20,
|
||||
fontWeight: 700,
|
||||
color: 'var(--accent)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
textDecoration: 'none',
|
||||
}}
|
||||
>
|
||||
gen2d
|
||||
<img
|
||||
src="/logo.png"
|
||||
alt="gen2d"
|
||||
style={{ height: 38, width: 64 }}
|
||||
/>
|
||||
</Link>
|
||||
|
||||
<div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
|
||||
|
||||
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'
|
||||
import { useProjectListStore } from '../stores/projectList'
|
||||
import { useToastStore } from '../stores/toast'
|
||||
import ProjectCard from '../components/ProjectCard'
|
||||
import AssetGallery from '../components/AssetGallery'
|
||||
import CreateProjectModal from '../components/CreateProjectModal'
|
||||
import EmptyState from '../components/EmptyState'
|
||||
import Skeleton from '../components/Skeleton'
|
||||
@@ -39,6 +40,8 @@ export default function HomePage() {
|
||||
|
||||
return (
|
||||
<div className="container page-enter" style={{ paddingTop: 32, paddingBottom: 32 }}>
|
||||
<AssetGallery />
|
||||
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
|
||||
<h1 style={{ fontSize: 22 }}>我的工程</h1>
|
||||
<button className="btn-primary" onClick={() => setModalOpen(true)}>
|
||||
|
||||
Reference in New Issue
Block a user