refactor: delete MediaPanel.tsx (#1899 #1900)

This commit is contained in:
2026-09-14 20:43:34 +08:00
parent 2c8038e5f4
commit 4442e46d1d
@@ -1,102 +0,0 @@
/**
* 左侧面板 — 模板列表
* 模板编辑器只负责定义模板规则(片段数量、时长范围),不承载素材管理。
*/
import React from "react"
import type { EditingTemplate } from "@/api/editing-planner"
import { MODE_LABELS } from "@/api/editing-planner"
interface MediaPanelProps {
templates: EditingTemplate[]
loading: boolean
searchQuery: string
currentFilter: string
filterCategories: string[]
loadedTemplateId: string | null
onLoadTemplate: (id: string) => void
onSearchChange: (q: string) => void
onFilterChange: (f: string) => void
}
const MediaPanel: React.FC<MediaPanelProps> = ({
templates,
loading,
searchQuery,
currentFilter,
filterCategories,
loadedTemplateId,
onLoadTemplate,
onSearchChange,
onFilterChange,
}) => {
return (
<div className="ep-left-panel">
{/* 搜索 */}
<div className="ep-search-wrap ep-media-panel-inner">
<span className="ep-search-icon">🔍</span>
<input
className="ep-search-input"
placeholder="搜索模板..."
value={searchQuery}
onChange={(e) => onSearchChange(e.target.value)}
/>
</div>
{/* Chip 分类筛选 */}
<div className="ep-filter-chips">
{filterCategories.map((cat) => (
<button
key={cat}
className={`ep-filter-chip ${currentFilter === cat ? "active" : ""}`}
onClick={() => onFilterChange(cat)}
>
{cat}
</button>
))}
</div>
{/* 模板列表 */}
<div className="ep-template-list">
{loading ? (
<div className="ep-loading">
<span>⏳</span>
<span>加载中...</span>
</div>
) : templates.length === 0 ? (
<div className="ep-empty">
<span>📭</span>
<span>暂无模板</span>
</div>
) : (
templates.map((tpl) => (
<div
key={tpl.id}
className={`ep-template-card ${loadedTemplateId === tpl.id ? "active" : ""}`}
onClick={() => onLoadTemplate(tpl.id)}
>
<div className="ep-template-card-header">
<span className="ep-template-card-name">{tpl.name}</span>
<span className="ep-template-card-mode">{MODE_LABELS[tpl.mode]}</span>
</div>
<div className="ep-template-card-meta">
<span>⏱️ {tpl.estimated_duration}s</span>
<span>📐 {tpl.segments.length}片段</span>
</div>
{tpl.tags.length > 0 && (
<div className="ep-template-card-tags">
{tpl.tags.map((tag) => (
<span key={tag} className="ep-template-tag">
{tag}
</span>
))}
</div>
)}
</div>
))
)}
</div>
</div>
)
}
export default MediaPanel