fix(editing-planner): 片段添加对齐V21原型 — 轨道末尾虚线+卡片
CI/CD Pipeline / Frontend Lint (push) Failing after 68h8m3s
CI/CD Pipeline / Validate Code Quality And Tests (push) Failing after 68h8m49s
CI/CD Pipeline / Production Browser E2E (push) Failing after 1726h43m34s
CI/CD Pipeline / Build Production Runtime Images (push) Failing after 1726h43m38s
CI/CD Pipeline / Deploy Production (push) Failing after 1726h43m35s
CI/CD Pipeline / Deploy Staging (push) Failing after 1726h43m38s
CI/CD Pipeline / Staging E2E Tests (push) Failing after 1727h15m3s
CI/CD Pipeline / Frontend Lint (push) Failing after 68h8m3s
CI/CD Pipeline / Validate Code Quality And Tests (push) Failing after 68h8m49s
CI/CD Pipeline / Production Browser E2E (push) Failing after 1726h43m34s
CI/CD Pipeline / Build Production Runtime Images (push) Failing after 1726h43m38s
CI/CD Pipeline / Deploy Production (push) Failing after 1726h43m35s
CI/CD Pipeline / Deploy Staging (push) Failing after 1726h43m38s
CI/CD Pipeline / Staging E2E Tests (push) Failing after 1727h15m3s
- 移除时间线头部「+ 添加片段」按钮
- 在片段轨道末尾添加虚线边框「+」卡片(60×96px),点击展开素材选择面板
- 一镜到底模式下显示🔒锁定状态,不可点击
- 空轨道提示文案改为「点击右侧 + 添加片段,或拖入素材」
- 修复 voiceover 类型比较导致的 TS 错误
- 完全对齐 UI 原型 epAddSegment 虚线卡设计
This commit is contained in:
@@ -1011,6 +1011,50 @@
|
||||
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
|
||||
}
|
||||
|
||||
/* 轨道末尾 "+" 添加卡片 — 对齐 V21 原型虚线 "+" 卡 */
|
||||
.ep-track-add-card-wrapper {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ep-track-add-card {
|
||||
min-width: 60px;
|
||||
height: 96px;
|
||||
border: 2px dashed var(--line, #e2e8f0);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
font-size: 24px;
|
||||
color: #94a3b8;
|
||||
transition: all 0.2s ease;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.ep-track-add-card:hover {
|
||||
border-color: var(--primary, #6366f1);
|
||||
color: var(--primary, #6366f1);
|
||||
background: var(--primary-soft, #eef2ff);
|
||||
}
|
||||
|
||||
.ep-track-add-card.locked {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.ep-track-add-card.locked:hover {
|
||||
border-color: var(--line, #e2e8f0);
|
||||
color: #94a3b8;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.ep-track-add-card-wrapper > .ep-add-clip-picker {
|
||||
top: calc(100% + 6px);
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/* 添加片段按钮 + 选择器 */
|
||||
.ep-add-clip-wrapper {
|
||||
position: relative;
|
||||
|
||||
@@ -35,7 +35,6 @@ const ASSET_TYPE_ICONS: Record<string, string> = {
|
||||
video: "🎬",
|
||||
image: "🖼️",
|
||||
audio: "🎵",
|
||||
voiceover: "🎙️",
|
||||
};
|
||||
|
||||
const MATERIAL_ICONS: Record<string, string> = {
|
||||
@@ -168,46 +167,6 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({
|
||||
</span>
|
||||
</div>
|
||||
<div className="ep-timeline-actions">
|
||||
{/* 添加片段按钮 */}
|
||||
<div className="ep-add-clip-wrapper" ref={pickerRef}>
|
||||
<button
|
||||
className="ep-add-clip-btn"
|
||||
onClick={() => setShowAddPicker(!showAddPicker)}
|
||||
title="添加片段"
|
||||
>
|
||||
+ 添加片段
|
||||
</button>
|
||||
{showAddPicker && (
|
||||
<div className="ep-add-clip-picker">
|
||||
<div className="ep-add-clip-picker-title">选择素材添加为片段</div>
|
||||
{mediaAssets.length === 0 ? (
|
||||
<div className="ep-add-clip-picker-empty">
|
||||
暂无可用素材,请先在左侧素材面板上传
|
||||
</div>
|
||||
) : (
|
||||
<div className="ep-add-clip-picker-list">
|
||||
{mediaAssets.map((asset) => (
|
||||
<button
|
||||
key={asset.id}
|
||||
className="ep-add-clip-picker-item"
|
||||
onClick={() => handlePickAsset(asset)}
|
||||
>
|
||||
<span className="ep-add-clip-picker-icon">
|
||||
{ASSET_TYPE_ICONS[asset.type] || "📁"}
|
||||
</span>
|
||||
<span className="ep-add-clip-picker-name">
|
||||
{asset.name}
|
||||
</span>
|
||||
<span className="ep-add-clip-picker-type">
|
||||
{asset.type}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
className="ep-timeline-action-btn"
|
||||
onClick={() => {
|
||||
@@ -265,15 +224,7 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({
|
||||
{clips.length === 0 ? (
|
||||
<div className="ep-track-empty">
|
||||
<div className="ep-track-empty-icon">🎬</div>
|
||||
<div className="ep-track-empty-text">
|
||||
点击下方按钮添加片段,或拖入素材
|
||||
</div>
|
||||
<button
|
||||
className="ep-track-empty-add-btn"
|
||||
onClick={() => setShowAddPicker(!showAddPicker)}
|
||||
>
|
||||
+ 添加片段
|
||||
</button>
|
||||
<div className="ep-track-empty-text">点击右侧 + 添加片段,或拖入素材</div>
|
||||
</div>
|
||||
) : (
|
||||
clips.map((clip, idx) => (
|
||||
@@ -311,6 +262,53 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
|
||||
{/* ── 轨道末尾 "+" 添加卡片(对齐 V21 原型 epAddSegment) ── */}
|
||||
<div className="ep-track-add-card-wrapper" ref={pickerRef}>
|
||||
<div
|
||||
className={`ep-track-add-card${currentMode === "one_take" ? " locked" : ""}`}
|
||||
onClick={() => {
|
||||
if (currentMode !== "one_take") setShowAddPicker((v) => !v);
|
||||
}}
|
||||
title={currentMode === "one_take" ? "一镜到底模式下不可添加" : "添加片段"}
|
||||
>
|
||||
{currentMode === "one_take" ? "🔒" : "+"}
|
||||
</div>
|
||||
|
||||
{/* 素材选择面板 */}
|
||||
{showAddPicker && (
|
||||
<div className="ep-add-clip-picker">
|
||||
<div className="ep-add-clip-picker-title">选择素材添加为片段</div>
|
||||
{mediaAssets.length === 0 ? (
|
||||
<div className="ep-add-clip-picker-empty">
|
||||
暂无可用素材,请先在左侧素材库导入
|
||||
</div>
|
||||
) : (
|
||||
<div className="ep-add-clip-picker-list">
|
||||
{mediaAssets.map((asset) => (
|
||||
<button
|
||||
key={asset.id}
|
||||
className="ep-add-clip-picker-item"
|
||||
onClick={() => handlePickAsset(asset)}
|
||||
>
|
||||
<span className="ep-add-clip-picker-icon">
|
||||
{ASSET_TYPE_ICONS[asset.type] || "📁"}
|
||||
</span>
|
||||
<span className="ep-add-clip-picker-name">{asset.name}</span>
|
||||
<span className="ep-add-clip-picker-type">
|
||||
{asset.type === "image"
|
||||
? "图片"
|
||||
: asset.type === "audio"
|
||||
? "音频"
|
||||
: "视频"}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user