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

Merge pull request !78 from 何朝晖/style/frontend
fix: 移除新建工程弹窗的背景遮罩阴影
2026-05-25 13:32:55 +00:00 · 2026-05-25 21:27:58 +08:00 · 2026-05-25 13:08:38 +00:00 · 2026-05-25 21:07:15 +08:00 · 2026-05-25 13:04:39 +00:00 · 2026-05-25 21:02:03 +08:00
10 changed files with 243 additions and 11 deletions
@@ -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>
@@ -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>
  )
 }
@@ -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={{
@@ -27,13 +27,16 @@ export default function Layout() {
        <Link
          to="/"
          style={{
-            fontSize: 20,
+            display: 'flex',
-            fontWeight: 700,
+            alignItems: 'center',
            color: 'var(--accent)',
            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)}>
Author	SHA1	Message	Date
Gmarker689	a7a071960b	!78 fix: 移除新建工程弹窗的背景遮罩阴影 Merge pull request !78 from 何朝晖/style/frontend	2026-05-25 13:32:55 +00:00
wonder	c2cc542c84	fix: 移除新建工程弹窗的背景遮罩阴影	2026-05-25 21:27:58 +08:00
Gmarker689	e650cea11c	!77 feat: 首页素材画廊增加分类筛选标签 Merge pull request !77 from 郭永昊/fix/tag-labels-and-click	2026-05-25 13:08:38 +00:00
Gmarker689	1a78744766	feat: 首页素材画廊增加分类筛选标签 - 后端 SQL 增加 json_extract 提取素材 metaType (frame/spritesheet/preview) - 前端 AssetGallery 新增分类标签栏：全部/精灵表/帧/场景瓦片/背景/UI - 按 metaType + assetType 组合过滤展示	2026-05-25 21:07:15 +08:00
wonder	d611a2c142	!76 docs: 添加全局/后端/前端架构图生成提示词 Merge pull request !76 from 何朝晖/docs/README	2026-05-25 13:04:39 +00:00
Gmarker689	b88f9aaf03	feat: 首页展示最近生成的素材画廊 - 后端新增 GET /api/v1/assets 接口，返回已完成任务的素材列表（按创建时间倒序） - 前端新增 AssetGallery 组件，网格展示素材缩略图、类型标签和提示词 - HomePage 中工程列表上方展示最近生成素材	2026-05-25 21:02:03 +08:00
Gmarker689	5be74e3ce1	feat: 左上角品牌图标更换为自定义 logo - 文本 "gen2d" 替换为 logo.png 图片 - 同时更新浏览器 favicon	2026-05-25 20:52:06 +08:00
Gmarker689	8e3b576954	feat: 更换网页图标为自定义 favicon	2026-05-25 20:49:47 +08:00
wonder	d30bee18a7	!75 !74 fix: 任务侧边栏点击详情后"任务不存在"问题 Merge pull request !75 from 何朝晖/develop	2026-05-25 12:30:29 +00:00
Gmarker689	47b31b5c13	!71 !70 fix: 自定义标签融入原生标签栏，点击切换而非消失 Merge pull request !71 from 郭永昊/develop	2026-05-25 12:06:51 +00:00
Gmarker689	7cc472052f	!68 !67 fix: 修复管线context取消、添加FIFO任务队列、移除重复提示词优化 Merge pull request !68 from 何朝晖/develop	2026-05-25 11:13:54 +00:00