feat: 无限画布 UI 重构 + 预览键盘控制 + 拖拽体验优化 (0.0.27)
- CanvasPage: AntD Layout 双栏布局 (Sider+Content)，预览状态提升解耦 DOM - CanvasSidebar (新): 项目/集数选择器 + 镜头搜索 + 列表 + 固定刷新按钮 - CategoryTabs (新): 双模式分类标签 (Assets/审核) + 数量徽标 + 媒体细分 - CanvasViewport: Ctrl/Cmd 拖拽平移 (pointerEvents:none 防误抓缩略图) - CanvasViewport: previewActiveRef 双守卫阻止预览穿透缩放/拖拽 - MediaPreview: 键盘控制 Space 暂停/播放、<- -> 快退快进 ±0.5s - electron/main.ts: local-media:// 协议 handler 转发 Range 头修复 seek - StageTabs: 无限画布入口按钮 + 全局字号上调 Range seek 调试: 之前 net.fetch 未转发 Range 头 → 浏览器 seek 时 返回 200 全文件而非 206 Partial Content → currentTime 赋值无法定位 → 播放位置回退到 0。修复: 提取 Range 头单向转发到 file:// handler。 Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,19 +1,28 @@
|
||||
// ============================================================
|
||||
// CanvasPage — 无限画布页面
|
||||
// CanvasPage — 无限画布页面（AntD Layout 双栏布局）
|
||||
//
|
||||
// 两栏 flex 布局（Assets 阶段为单栏）：
|
||||
// 左侧：ShotList（镜头单选列表）
|
||||
// 右侧：CanvasViewport（主画布）
|
||||
// 顶部：CanvasToolbar
|
||||
// 底部：状态栏
|
||||
// ┌──────────────┬─────────────────────────────────────────┐
|
||||
// │ CanvasSidebar│ CanvasToolbar │
|
||||
// │ ├ 项目选择 │ ├ StageTabs + 无限画布 │
|
||||
// │ ├ 集数选择 │ ├ CategoryTabs + FilterBar │
|
||||
// │ ├ 镜头搜索 │ ├────────────────────────────────────┤
|
||||
// │ ├ 镜头列表 │ │ CanvasViewport（或 Placeholder） │
|
||||
// │ └ 刷新按钮 │ │ │
|
||||
// └──────────────┴─────────────────────────────────────────┘
|
||||
// └── 底部状态栏 ─────────────────────────┘
|
||||
// ============================================================
|
||||
|
||||
import { useState, useCallback } from 'react';
|
||||
import { Layout } from 'antd';
|
||||
import { useTheme } from '@/components/providers/ThemeProvider';
|
||||
import { useCanvasStore } from './store/useCanvasStore';
|
||||
import { useDirectoryScan } from './hooks/useDirectoryScan';
|
||||
import { CanvasToolbar } from './toolbar/CanvasToolbar';
|
||||
import { CanvasViewport } from './core/CanvasViewport';
|
||||
import { ShotList } from './navigation/ShotList';
|
||||
import { MediaPreview } from './core/MediaPreview';
|
||||
import { CanvasSidebar } from './navigation/CanvasSidebar';
|
||||
|
||||
const { Sider, Content } = Layout;
|
||||
|
||||
/** 中心区域占位提示 */
|
||||
function Placeholder({
|
||||
@@ -41,7 +50,7 @@ function Placeholder({
|
||||
<div style={{ fontSize: 14, color: isDark ? '#A5A3C0' : '#6B7280' }}>{title}</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: 12,
|
||||
fontSize: 13,
|
||||
marginTop: 8,
|
||||
color: isDark ? '#6E6B90' : '#9CA3AF',
|
||||
}}
|
||||
@@ -65,6 +74,17 @@ export function CanvasPage() {
|
||||
// 启动目录扫描监听
|
||||
useDirectoryScan();
|
||||
|
||||
// ── 全屏预览状态 ──
|
||||
const [previewItemId, setPreviewItemId] = useState<number | null>(null);
|
||||
|
||||
const handlePreviewOpen = useCallback((itemId: number) => {
|
||||
setPreviewItemId(itemId);
|
||||
}, []);
|
||||
|
||||
const handlePreviewClose = useCallback(() => {
|
||||
setPreviewItemId(null);
|
||||
}, []);
|
||||
|
||||
const isAssets = currentStage === 'Assets';
|
||||
|
||||
/** 根据当前选中状态决定主视图内容 */
|
||||
@@ -74,7 +94,7 @@ export function CanvasPage() {
|
||||
<Placeholder
|
||||
icon="📂"
|
||||
title="请先选择一个工作区目录"
|
||||
hint="目录结构需符合 AIGC 生产管线约定（项目/shots/集数/镜头/阶段）"
|
||||
hint="从左侧边栏打开或切换工作区"
|
||||
isDark={isDark}
|
||||
/>
|
||||
);
|
||||
@@ -85,7 +105,7 @@ export function CanvasPage() {
|
||||
<Placeholder
|
||||
icon="📁"
|
||||
title="请先选择一个项目"
|
||||
hint="从顶部工具栏的项目下拉列表中选择"
|
||||
hint="从左侧边栏的项目下拉列表中选择"
|
||||
isDark={isDark}
|
||||
/>
|
||||
);
|
||||
@@ -113,7 +133,7 @@ export function CanvasPage() {
|
||||
<Placeholder
|
||||
icon="🎬"
|
||||
title="请先选择集数"
|
||||
hint="从顶部工具栏的集数下拉列表中选择"
|
||||
hint="从左侧边栏的集数下拉列表中选择"
|
||||
isDark={isDark}
|
||||
/>
|
||||
);
|
||||
@@ -124,7 +144,7 @@ export function CanvasPage() {
|
||||
<Placeholder
|
||||
icon="🎞️"
|
||||
title="请先选择镜头"
|
||||
hint="从左侧镜头列表中点击选择"
|
||||
hint="从左侧边栏的镜头列表中点击选择"
|
||||
isDark={isDark}
|
||||
/>
|
||||
);
|
||||
@@ -141,85 +161,103 @@ export function CanvasPage() {
|
||||
);
|
||||
}
|
||||
|
||||
return <CanvasViewport />;
|
||||
return <CanvasViewport onPreviewOpen={handlePreviewOpen} previewActive={previewItemId !== null} />;
|
||||
};
|
||||
|
||||
const borderColor = isDark ? '#2E2A5A' : '#E5E7EB';
|
||||
|
||||
return (
|
||||
<div
|
||||
<Layout
|
||||
style={{
|
||||
width: '100vw',
|
||||
height: '100vh',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
background: isDark ? '#0F0D1E' : '#F5F3FF',
|
||||
color: isDark ? '#E8E6F0' : '#1E1B4B',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
hasSider
|
||||
>
|
||||
{/* 顶部工具栏 */}
|
||||
<CanvasToolbar />
|
||||
|
||||
{/* 中心区域：两栏布局 */}
|
||||
<div
|
||||
{/* ── 左侧导航边栏 ── */}
|
||||
<Sider
|
||||
width={220}
|
||||
style={{
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
background: isDark ? '#0F0D21' : '#F5F3FF',
|
||||
borderRight: `1px solid ${borderColor}`,
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
trigger={null}
|
||||
>
|
||||
{/* 左侧镜头列表（Assets 阶段隐藏） */}
|
||||
<ShotList />
|
||||
<CanvasSidebar />
|
||||
</Sider>
|
||||
|
||||
{/* 右侧主内容 */}
|
||||
<div
|
||||
{/* ── 右侧主内容区 ── */}
|
||||
<Layout
|
||||
style={{
|
||||
background: isDark ? '#0F0D1E' : '#F5F3FF',
|
||||
}}
|
||||
>
|
||||
<Content
|
||||
style={{
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
{renderMainContent()}
|
||||
</div>
|
||||
</div>
|
||||
{/* 顶部工具栏（两行：阶段标签 + 分类标签/筛选） */}
|
||||
<CanvasToolbar />
|
||||
|
||||
{/* 底部状态栏 */}
|
||||
<div
|
||||
style={{
|
||||
height: 28,
|
||||
flexShrink: 0,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: '0 12px',
|
||||
borderTop: `1px solid ${isDark ? '#2E2A5A' : '#E5E7EB'}`,
|
||||
background: isDark ? '#15132E' : '#EEF2FF',
|
||||
fontSize: 11,
|
||||
color: isDark ? '#6E6B90' : '#9CA3AF',
|
||||
}}
|
||||
>
|
||||
<span>离线模式 · 本地文件系统</span>
|
||||
<span style={{ margin: '0 8px' }}>|</span>
|
||||
<span>
|
||||
{isScanning
|
||||
? '扫描中…'
|
||||
: workspaceRoot
|
||||
? `项目：${selectedProject || '(未选)'} · 阶段：${currentStage} · ${items.length} 个文件`
|
||||
: '准备就绪'}
|
||||
</span>
|
||||
{selectedEpisode && (
|
||||
<>
|
||||
<span style={{ margin: '0 4px' }}>|</span>
|
||||
<span>集数：{selectedEpisode}</span>
|
||||
</>
|
||||
)}
|
||||
{selectedShot && (
|
||||
<>
|
||||
<span style={{ margin: '0 4px' }}>|</span>
|
||||
<span>镜头：{selectedShot}</span>
|
||||
</>
|
||||
)}
|
||||
<span style={{ flex: 1 }} />
|
||||
<span>Phase 1</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* 主画布区域 */}
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
{renderMainContent()}
|
||||
</div>
|
||||
|
||||
{/* 底部状态栏 */}
|
||||
<div
|
||||
style={{
|
||||
height: 28,
|
||||
flexShrink: 0,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: '0 12px',
|
||||
borderTop: `1px solid ${borderColor}`,
|
||||
background: isDark ? '#15132E' : '#EEF2FF',
|
||||
fontSize: 12,
|
||||
color: isDark ? '#6E6B90' : '#9CA3AF',
|
||||
}}
|
||||
>
|
||||
<span>离线模式 · 本地文件系统</span>
|
||||
<span style={{ margin: '0 8px' }}>|</span>
|
||||
<span>
|
||||
{isScanning
|
||||
? '扫描中…'
|
||||
: workspaceRoot
|
||||
? `项目：${selectedProject || '(未选)'} · 阶段：${currentStage} · ${items.length} 个文件`
|
||||
: '准备就绪'}
|
||||
</span>
|
||||
{selectedEpisode && (
|
||||
<>
|
||||
<span style={{ margin: '0 4px' }}>|</span>
|
||||
<span>集数：{selectedEpisode}</span>
|
||||
</>
|
||||
)}
|
||||
{selectedShot && (
|
||||
<>
|
||||
<span style={{ margin: '0 4px' }}>|</span>
|
||||
<span>镜头：{selectedShot}</span>
|
||||
</>
|
||||
)}
|
||||
<span style={{ flex: 1 }} />
|
||||
<span>Phase 1</span>
|
||||
</div>
|
||||
</Content>
|
||||
</Layout>
|
||||
|
||||
{/* 全屏预览（页面级别渲染，与画布 DOM 解耦） */}
|
||||
<MediaPreview itemId={previewItemId} onClose={handlePreviewClose} />
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
// - Grid 模式：固定列数，均匀网格布局
|
||||
// - Single 模式：按 groupKey 分组，每组一行横向排列
|
||||
// - 滚轮缩放：滚轮直接调整 zoom（无需修饰键），Ctrl/Cmd + 滚轮精细缩放
|
||||
// - 鼠标拖拽：mousedown + mousemove 平移（panOffset）
|
||||
// - Ctrl/Cmd + 鼠标拖拽：按住 Ctrl(Win) 或 Cmd(Mac) 后 mousedown + mousemove 平移
|
||||
// - 分页叠加层：PagerOverlay + ZoomOverlay
|
||||
// ============================================================
|
||||
|
||||
@@ -14,7 +14,6 @@ import { useTheme } from '@/components/providers/ThemeProvider';
|
||||
import { useCanvasStore } from '../store/useCanvasStore';
|
||||
import { MediaCard } from './MediaCard';
|
||||
import { MediaCardContextMenu } from './MediaCardContextMenu';
|
||||
import { MediaPreview } from './MediaPreview';
|
||||
import { PagerOverlay, ZoomOverlay, ModeSwitch } from './ViewportControls';
|
||||
import {
|
||||
gridPosition,
|
||||
@@ -29,7 +28,14 @@ import { ITEM_H, ITEM_SPACING, ROW_LABEL_WIDTH, MAX_ITEMS_PER_PAGE } from '../ut
|
||||
const ZOOM_MIN = 0.02;
|
||||
const ZOOM_MAX = 16.0;
|
||||
|
||||
export function CanvasViewport() {
|
||||
interface CanvasViewportProps {
|
||||
/** 双击卡片时回调 */
|
||||
onPreviewOpen: (itemId: number) => void;
|
||||
/** 预览是否打开（阻止画布缩放/拖拽） */
|
||||
previewActive: boolean;
|
||||
}
|
||||
|
||||
export function CanvasViewport({ onPreviewOpen, previewActive }: CanvasViewportProps) {
|
||||
const { isDark } = useTheme();
|
||||
const items = useCanvasStore((s) => s.items);
|
||||
const layoutMode = useCanvasStore((s) => s.layoutMode);
|
||||
@@ -40,14 +46,19 @@ export function CanvasViewport() {
|
||||
const zoom = useCanvasStore((s) => s.zoom);
|
||||
const panOffset = useCanvasStore((s) => s.panOffset);
|
||||
const interactionMode = useCanvasStore((s) => s.interactionMode);
|
||||
const favoriteOnly = useCanvasStore((s) => s.favoriteOnly);
|
||||
const setZoom = useCanvasStore((s) => s.setZoom);
|
||||
const setPanOffset = useCanvasStore((s) => s.setPanOffset);
|
||||
|
||||
// 拖拽状态
|
||||
// 拖拽状态（需按住 Ctrl/Cmd 修饰键）
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const dragStart = useRef({ x: 0, y: 0, panX: 0, panY: 0 });
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// 拖拽修饰键状态（Ctrl / Cmd）—— 双通道
|
||||
const [isPanModifier, setIsPanModifier] = useState(false);
|
||||
const panModifierRef = useRef(false);
|
||||
|
||||
// 预览打开时锁定视口事件（防止穿透缩放/拖拽画布）
|
||||
const previewActiveRef = useRef(false);
|
||||
|
||||
@@ -58,44 +69,41 @@ export function CanvasViewport() {
|
||||
useEffect(() => { setZoomRef.current = setZoom; }, [setZoom]);
|
||||
const currentZoomRef = useRef(zoom);
|
||||
useEffect(() => { currentZoomRef.current = zoom; }, [zoom]);
|
||||
|
||||
// 全屏预览状态
|
||||
const [previewItemId, setPreviewItemId] = useState<number | null>(null);
|
||||
|
||||
const handleDoubleClick = useCallback((itemId: number) => {
|
||||
setPreviewItemId(itemId);
|
||||
}, []);
|
||||
|
||||
const handleClosePreview = useCallback(() => {
|
||||
setPreviewItemId(null);
|
||||
}, []);
|
||||
|
||||
// 同步预览状态到 ref（供原生 wheel 监听器读取，避免闭包过期）
|
||||
useEffect(() => {
|
||||
previewActiveRef.current = previewItemId !== null;
|
||||
}, [previewItemId]);
|
||||
previewActiveRef.current = previewActive;
|
||||
}, [previewActive]);
|
||||
|
||||
|
||||
// ── 收藏过滤 ──
|
||||
// 客户端过滤：当 favoriteOnly 为 true 时仅展示 metadata.favorite === true 的条目
|
||||
|
||||
const displayItems = useMemo(() => {
|
||||
if (!favoriteOnly) return items;
|
||||
return items.filter((item) => item.metadata?.favorite === true);
|
||||
}, [items, favoriteOnly]);
|
||||
|
||||
// ── 分页计算 ──
|
||||
|
||||
const pageItems = useMemo(() => {
|
||||
if (items.length === 0) return [];
|
||||
if (displayItems.length === 0) return [];
|
||||
if (layoutMode === 'grid') {
|
||||
const { startIndex, endIndex } = gridPageInfo(
|
||||
items.length,
|
||||
displayItems.length,
|
||||
cols,
|
||||
rowsPerPage,
|
||||
currentPage,
|
||||
);
|
||||
return items.slice(startIndex, endIndex);
|
||||
return displayItems.slice(startIndex, endIndex);
|
||||
}
|
||||
// single mode
|
||||
const { startIndex, endIndex } = singlePageInfo(
|
||||
items,
|
||||
displayItems,
|
||||
singleRowsPerPage,
|
||||
currentPage,
|
||||
);
|
||||
return items.slice(startIndex, endIndex);
|
||||
}, [items, layoutMode, cols, rowsPerPage, singleRowsPerPage, currentPage]);
|
||||
return displayItems.slice(startIndex, endIndex);
|
||||
}, [displayItems, layoutMode, cols, rowsPerPage, singleRowsPerPage, currentPage]);
|
||||
|
||||
// ── 位置计算 ──
|
||||
|
||||
@@ -134,6 +142,44 @@ export function CanvasViewport() {
|
||||
};
|
||||
}, [layoutMode, pageItems, cols]);
|
||||
|
||||
// ── Ctrl/Cmd + 拖拽平移 ──
|
||||
// 按住 Ctrl（Windows）或 Cmd（Mac）后鼠标左键拖拽平移画布。
|
||||
// 修饰键松开时自动取消拖拽，防止画布粘滞。
|
||||
// 同时支持 Ctrl 和 Cmd 组合（keyup 后检查是否仍有一个修饰键被按住）。
|
||||
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key !== 'Control' && e.key !== 'Meta') return;
|
||||
if (e.repeat) return;
|
||||
e.preventDefault();
|
||||
setIsPanModifier(true);
|
||||
panModifierRef.current = true;
|
||||
};
|
||||
const handleKeyUp = (e: KeyboardEvent) => {
|
||||
if (e.key !== 'Control' && e.key !== 'Meta') return;
|
||||
// 检查是否所有拖拽修饰键均已松开
|
||||
if (!e.ctrlKey && !e.metaKey) {
|
||||
setIsPanModifier(false);
|
||||
panModifierRef.current = false;
|
||||
setIsDragging(false); // 松修饰键时取消拖拽
|
||||
}
|
||||
};
|
||||
// 窗口失焦时重置修饰键状态（防止切出应用导致状态卡住）
|
||||
const handleBlur = () => {
|
||||
setIsPanModifier(false);
|
||||
panModifierRef.current = false;
|
||||
setIsDragging(false);
|
||||
};
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
window.addEventListener('keyup', handleKeyUp);
|
||||
window.addEventListener('blur', handleBlur);
|
||||
return () => {
|
||||
window.removeEventListener('keydown', handleKeyDown);
|
||||
window.removeEventListener('keyup', handleKeyUp);
|
||||
window.removeEventListener('blur', handleBlur);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// ── 滚轮缩放 ──
|
||||
// 纯滚轮 → 快速缩放（10%/tick），Ctrl/Cmd + 滚轮 → 精细缩放（3%/tick）。
|
||||
// Mac 触控板捏合手势 → macOS 自动合成 Ctrl+wheel 事件 → 精细缩放。
|
||||
@@ -180,6 +226,8 @@ export function CanvasViewport() {
|
||||
if (e.button !== 0) return;
|
||||
const target = e.target as HTMLElement;
|
||||
if (target.closest('button')) return;
|
||||
// 必须按住 Ctrl/Cmd 才能拖拽平移画布
|
||||
if (!panModifierRef.current) return;
|
||||
setIsDragging(true);
|
||||
dragStart.current = {
|
||||
x: e.clientX,
|
||||
@@ -242,14 +290,20 @@ export function CanvasViewport() {
|
||||
position: 'relative',
|
||||
cursor: isDragging
|
||||
? 'grabbing'
|
||||
: interactionMode === 'SELECT'
|
||||
? 'default'
|
||||
: 'grab',
|
||||
: isPanModifier
|
||||
? 'grab'
|
||||
: 'default',
|
||||
background: isDark ? '#0F0D1E' : '#F9FAFB',
|
||||
// Ctrl/Cmd 拖拽时禁用文本选择，防止误抓媒体元素
|
||||
userSelect: isPanModifier ? 'none' : undefined,
|
||||
}}
|
||||
onMouseDown={handleMouseDown}
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseUp={handleMouseUp}
|
||||
onDragStart={(e) => {
|
||||
// Ctrl/Cmd 拖拽时阻止浏览器原生的图片/链接拖拽行为
|
||||
if (panModifierRef.current) e.preventDefault();
|
||||
}}
|
||||
>
|
||||
{/* 画布内容 */}
|
||||
<div
|
||||
@@ -261,6 +315,8 @@ export function CanvasViewport() {
|
||||
transformOrigin: '0 0',
|
||||
width: canvasWidth,
|
||||
height: canvasHeight,
|
||||
// 拖拽修饰键激活时禁用缩略图的鼠标事件，所有事件穿透到容器层
|
||||
pointerEvents: isPanModifier ? 'none' : undefined,
|
||||
}}
|
||||
>
|
||||
{/* Single 模式的行标签 */}
|
||||
@@ -277,7 +333,7 @@ export function CanvasViewport() {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: 11,
|
||||
fontSize: 12,
|
||||
fontWeight: 600,
|
||||
color: isDark ? '#C4B5FD' : '#6366F1',
|
||||
background: isDark
|
||||
@@ -306,7 +362,7 @@ export function CanvasViewport() {
|
||||
y={0}
|
||||
zoom={zoom}
|
||||
mode={interactionMode}
|
||||
onDoubleClick={handleDoubleClick}
|
||||
onDoubleClick={onPreviewOpen}
|
||||
/>
|
||||
</MediaCardContextMenu>
|
||||
);
|
||||
@@ -325,7 +381,7 @@ export function CanvasViewport() {
|
||||
background: 'rgba(255, 77, 79, 0.1)',
|
||||
border: '1px solid rgba(255, 77, 79, 0.3)',
|
||||
color: '#FF4D4F',
|
||||
fontSize: 12,
|
||||
fontSize: 13,
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
@@ -357,11 +413,6 @@ export function CanvasViewport() {
|
||||
<ZoomOverlay />
|
||||
<ModeSwitch />
|
||||
|
||||
{/* 全屏预览（双击打开） */}
|
||||
<MediaPreview
|
||||
itemId={previewItemId}
|
||||
onClose={handleClosePreview}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -55,6 +55,8 @@ export function MediaPreview({ itemId, onClose }: MediaPreviewProps) {
|
||||
const [previewPan, setPreviewPan] = useState({ x: 0, y: 0 });
|
||||
const [isPanning, setIsPanning] = useState(false);
|
||||
const imgContainerRef = useRef<HTMLDivElement>(null);
|
||||
const videoRef = useRef<HTMLVideoElement>(null);
|
||||
const audioRef = useRef<HTMLAudioElement>(null);
|
||||
const panStartRef = useRef({ x: 0, y: 0, panX: 0, panY: 0 });
|
||||
// ref 版 zoom（供稳定闭包的 native wheel listener 读取）
|
||||
const previewZoomRef = useRef(previewZoom);
|
||||
@@ -66,13 +68,13 @@ export function MediaPreview({ itemId, onClose }: MediaPreviewProps) {
|
||||
setPreviewPan({ x: 0, y: 0 });
|
||||
}, [currentId]);
|
||||
|
||||
// 预览内滚轮缩放（native listener + stopPropagation 隔离）
|
||||
// 预览内滚轮缩放（随 currentId 变化重新绑定，解决首次挂载时 ref 为 null 的问题）
|
||||
useEffect(() => {
|
||||
const el = imgContainerRef.current;
|
||||
if (!el) return;
|
||||
const handler = (e: WheelEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation(); // 阻止冒泡到 CanvasViewport
|
||||
e.stopPropagation();
|
||||
const delta = -e.deltaY * 0.002;
|
||||
const cur = previewZoomRef.current;
|
||||
const newZoom = Math.max(0.1, Math.min(8.0, cur + delta));
|
||||
@@ -80,7 +82,7 @@ export function MediaPreview({ itemId, onClose }: MediaPreviewProps) {
|
||||
};
|
||||
el.addEventListener('wheel', handler, { passive: false });
|
||||
return () => el.removeEventListener('wheel', handler);
|
||||
}, []);
|
||||
}, [currentId]);
|
||||
|
||||
// ── 拖拽平移（仅在预览内）──
|
||||
const handlePreviewMouseDown = useCallback((e: React.MouseEvent) => {
|
||||
@@ -120,6 +122,57 @@ export function MediaPreview({ itemId, onClose }: MediaPreviewProps) {
|
||||
return () => window.removeEventListener('mouseup', handler);
|
||||
}, []);
|
||||
|
||||
// ── 键盘媒体控制 ──
|
||||
// 所有按键在 capture 阶段拦截，优先于原生 <video controls>：
|
||||
// 空格 → 暂停/播放（stopPropagation 阻止原生二次触发）
|
||||
// ← / → → 快退/快进 0.5 秒（直接设 currentTime）
|
||||
// ↑ / ↓ → 透传到原生 controls 处理音量
|
||||
useEffect(() => {
|
||||
if (currentId == null) return;
|
||||
|
||||
const handler = (e: KeyboardEvent) => {
|
||||
const target = e.target as HTMLElement;
|
||||
if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') return;
|
||||
|
||||
const video = videoRef.current;
|
||||
const audio = audioRef.current;
|
||||
const media = video || audio;
|
||||
if (!media) return;
|
||||
|
||||
// 空格 → 暂停/播放
|
||||
if (e.key === ' ') {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (media.paused) void media.play();
|
||||
else media.pause();
|
||||
return;
|
||||
}
|
||||
|
||||
// ← / → → 快退/快进 0.5 秒
|
||||
if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const delta = e.key === 'ArrowLeft' ? -0.5 : 0.5;
|
||||
media.currentTime = Math.max(0, media.currentTime + delta);
|
||||
return;
|
||||
}
|
||||
|
||||
// ↑ / ↓ → 不拦截，透传给原生 controls（原生音量 ±10%）
|
||||
};
|
||||
// capture: true → 在原生 video controls 之前拦截
|
||||
window.addEventListener('keydown', handler, true);
|
||||
return () => window.removeEventListener('keydown', handler, true);
|
||||
}, [currentId]);
|
||||
|
||||
// 媒体元素挂载后自动聚焦（确保原生 controls 能接收 ↑/↓ 音量事件）
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
if (videoRef.current) videoRef.current.focus();
|
||||
else if (audioRef.current) audioRef.current.focus();
|
||||
}, 100);
|
||||
return () => clearTimeout(timer);
|
||||
}, [currentId]);
|
||||
|
||||
if (currentId == null) return null;
|
||||
|
||||
const currentItem = items.find((i) => i.id === currentId);
|
||||
@@ -221,17 +274,19 @@ export function MediaPreview({ itemId, onClose }: MediaPreviewProps) {
|
||||
)}
|
||||
{isVideo && (
|
||||
<video
|
||||
ref={videoRef}
|
||||
src={mediaUrl}
|
||||
controls
|
||||
autoPlay
|
||||
style={{ maxWidth: '90vw', maxHeight: '85vh', borderRadius: 4 }}
|
||||
tabIndex={0}
|
||||
style={{ maxWidth: '90vw', maxHeight: '85vh', borderRadius: 4, outline: 'none' }}
|
||||
/>
|
||||
)}
|
||||
{isAudio && (
|
||||
<div style={{ textAlign: 'center', color: '#fff' }}>
|
||||
<div style={{ fontSize: 48, marginBottom: 16 }}>🎵</div>
|
||||
<div style={{ fontSize: 16, marginBottom: 12 }}>{currentItem.fileName}</div>
|
||||
<audio src={mediaUrl} controls autoPlay />
|
||||
<audio ref={audioRef} src={mediaUrl} controls autoPlay />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -73,7 +73,7 @@ export function PagerOverlay() {
|
||||
/>
|
||||
<span
|
||||
style={{
|
||||
fontSize: 12,
|
||||
fontSize: 13,
|
||||
fontWeight: 500,
|
||||
color: isDark ? '#E8E6F0' : '#1E1B4B',
|
||||
minWidth: 80,
|
||||
@@ -91,7 +91,7 @@ export function PagerOverlay() {
|
||||
/>
|
||||
<span
|
||||
style={{
|
||||
fontSize: 10,
|
||||
fontSize: 11,
|
||||
color: isDark ? '#6E6B90' : '#9CA3AF',
|
||||
borderLeft: `1px solid ${isDark ? '#3E3A6A' : '#E5E7EB'}`,
|
||||
paddingLeft: 8,
|
||||
@@ -138,7 +138,7 @@ export function ZoomOverlay() {
|
||||
/>
|
||||
<span
|
||||
style={{
|
||||
fontSize: 12,
|
||||
fontSize: 13,
|
||||
fontWeight: 600,
|
||||
color: isDark ? '#E8E6F0' : '#1E1B4B',
|
||||
minWidth: 44,
|
||||
@@ -205,11 +205,11 @@ export function ModeSwitch() {
|
||||
onClick={() => switchMode(key)}
|
||||
title={`${label}模式 (${shortcut})`}
|
||||
style={{
|
||||
fontSize: 11,
|
||||
fontSize: 12,
|
||||
fontWeight: interactionMode === key ? 600 : 400,
|
||||
}}
|
||||
>
|
||||
<span style={{ marginLeft: 2, fontSize: 10 }}>{shortcut}</span>
|
||||
<span style={{ marginLeft: 2, fontSize: 11 }}>{shortcut}</span>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
340
src/pages/infinite-canvas/navigation/CanvasSidebar.tsx
Normal file
340
src/pages/infinite-canvas/navigation/CanvasSidebar.tsx
Normal file
@@ -0,0 +1,340 @@
|
||||
// ============================================================
|
||||
// CanvasSidebar — 左侧导航边栏
|
||||
//
|
||||
// 从上到下依次为：
|
||||
// 1. 项目下拉选择器（ProjectSelector）
|
||||
// 2. 集数下拉选择器（EpisodeSelector，Assets 阶段隐藏）
|
||||
// 3. 镜头号搜索输入框
|
||||
// 4. 镜头单选列表（ShotList，上下滚动）
|
||||
// 5. 刷新镜头列表按钮
|
||||
// ============================================================
|
||||
|
||||
import { useState, useCallback } from 'react';
|
||||
import { Input, Button, App } from 'antd';
|
||||
import { SearchOutlined, ReloadOutlined, FolderOpenOutlined } from '@ant-design/icons';
|
||||
import { useTheme } from '@/components/providers/ThemeProvider';
|
||||
import { useCanvasStore } from '../store/useCanvasStore';
|
||||
import { ProjectSelector } from './ProjectSelector';
|
||||
import { EpisodeSelector } from './EpisodeSelector';
|
||||
|
||||
export function CanvasSidebar() {
|
||||
const { isDark } = useTheme();
|
||||
const { message } = App.useApp();
|
||||
|
||||
// ── Store 订阅 ──
|
||||
const workspaceRoot = useCanvasStore((s) => s.workspaceRoot);
|
||||
const selectedProject = useCanvasStore((s) => s.selectedProject);
|
||||
const selectedEpisode = useCanvasStore((s) => s.selectedEpisode);
|
||||
const selectedShot = useCanvasStore((s) => s.selectedShot);
|
||||
const shots = useCanvasStore((s) => s.shots);
|
||||
const currentStage = useCanvasStore((s) => s.currentStage);
|
||||
const selectShot = useCanvasStore((s) => s.selectShot);
|
||||
const setShots = useCanvasStore((s) => s.setShots);
|
||||
const setWorkspace = useCanvasStore((s) => s.setWorkspace);
|
||||
const setProjects = useCanvasStore((s) => s.setProjects);
|
||||
const getDataSource = useCanvasStore((s) => s.getDataSource);
|
||||
|
||||
// ── 本地状态 ──
|
||||
const [shotSearchQuery, setShotSearchQuery] = useState('');
|
||||
const [isRefreshing, setIsRefreshing] = useState(false);
|
||||
|
||||
const isAssets = currentStage === 'Assets';
|
||||
|
||||
// ── 镜头搜索过滤 ──
|
||||
const filteredShots = shotSearchQuery.trim()
|
||||
? shots.filter((s) => s.toLowerCase().includes(shotSearchQuery.toLowerCase()))
|
||||
: shots;
|
||||
|
||||
// ── 选择镜头 ──
|
||||
const handleShotClick = useCallback(
|
||||
(shotName: string) => {
|
||||
selectShot(shotName);
|
||||
},
|
||||
[selectShot],
|
||||
);
|
||||
|
||||
// ── 刷新镜头列表 ──
|
||||
const handleRefreshShots = useCallback(async () => {
|
||||
if (!workspaceRoot || !selectedProject || !selectedEpisode) return;
|
||||
try {
|
||||
setIsRefreshing(true);
|
||||
const dataSource = getDataSource();
|
||||
const shotsPath = `${workspaceRoot}\\${selectedProject}\\shots\\${selectedEpisode}`;
|
||||
const updated = await dataSource.listSubdirs(shotsPath);
|
||||
setShots(updated);
|
||||
message.success(`镜头列表已刷新（${updated.length} 个镜头）`);
|
||||
} catch (err) {
|
||||
message.error(`刷新失败: ${(err as Error).message}`);
|
||||
} finally {
|
||||
setIsRefreshing(false);
|
||||
}
|
||||
}, [workspaceRoot, selectedProject, selectedEpisode, getDataSource, setShots, message]);
|
||||
|
||||
// ── 打开/切换工作区 ──
|
||||
const handleOpenWorkspace = async () => {
|
||||
try {
|
||||
const dataSource = getDataSource();
|
||||
const dir = await dataSource.openDirectoryDialog();
|
||||
if (dir) {
|
||||
setWorkspace(dir);
|
||||
try {
|
||||
const projects = await dataSource.listSubdirs(dir);
|
||||
setProjects(projects);
|
||||
} catch (err) {
|
||||
console.error('[CanvasSidebar] 加载项目列表失败:', err);
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
message.error((err as Error).message || '打开目录失败');
|
||||
}
|
||||
};
|
||||
|
||||
// ── 样式变量 ──
|
||||
const bg = isDark ? '#0F0D21' : '#F5F3FF';
|
||||
const borderColor = isDark ? '#2D2A4A' : '#E5E0F0';
|
||||
const sectionBg = isDark ? '#15132B' : '#EBE8F5';
|
||||
const textColor = isDark ? '#C8C4E0' : '#4A4570';
|
||||
const dimColor = isDark ? '#6E6B90' : '#9CA3AF';
|
||||
const activeBg = isDark ? '#2D2A5A' : '#E8E4FF';
|
||||
const activeColor = isDark ? '#C4B5FD' : '#6D28D9';
|
||||
const hoverBg = isDark ? '#1E1B3B' : '#EDEAFA';
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
height: '100%',
|
||||
background: bg,
|
||||
borderRight: `1px solid ${borderColor}`,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
{/* ── 工作区选择 ── */}
|
||||
<div
|
||||
style={{
|
||||
padding: '6px 8px',
|
||||
borderBottom: `1px solid ${borderColor}`,
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
type="dashed"
|
||||
size="small"
|
||||
block
|
||||
icon={<FolderOpenOutlined />}
|
||||
onClick={() => void handleOpenWorkspace()}
|
||||
style={{
|
||||
fontSize: 13,
|
||||
color: isDark ? '#C4B5FD' : '#4338CA',
|
||||
borderColor: isDark ? '#3E3A6A' : '#C7D2FE',
|
||||
}}
|
||||
>
|
||||
{workspaceRoot ? '切换工作区' : '打开工作区'}
|
||||
</Button>
|
||||
{workspaceRoot && (
|
||||
<div
|
||||
style={{
|
||||
marginTop: 4,
|
||||
fontSize: 11,
|
||||
color: dimColor,
|
||||
textAlign: 'center',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
title={workspaceRoot}
|
||||
>
|
||||
{workspaceRoot}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ── 导航选择器 ── */}
|
||||
{workspaceRoot && (
|
||||
<div
|
||||
style={{
|
||||
padding: '8px 8px 4px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 6,
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: 11, fontWeight: 600, color: dimColor, marginBottom: -2 }}>
|
||||
项目
|
||||
</div>
|
||||
<ProjectSelector />
|
||||
|
||||
{!isAssets && (
|
||||
<>
|
||||
<div style={{ fontSize: 11, fontWeight: 600, color: dimColor, marginBottom: -2, marginTop: 4 }}>
|
||||
集数
|
||||
</div>
|
||||
<EpisodeSelector />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── 镜头搜索 ── */}
|
||||
{workspaceRoot && selectedEpisode && !isAssets && (
|
||||
<div
|
||||
style={{
|
||||
padding: '8px 8px 4px',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<Input
|
||||
prefix={<SearchOutlined style={{ fontSize: 13, color: dimColor }} />}
|
||||
placeholder="搜索镜头号…"
|
||||
value={shotSearchQuery}
|
||||
onChange={(e) => setShotSearchQuery(e.target.value)}
|
||||
allowClear
|
||||
size="small"
|
||||
style={{
|
||||
background: sectionBg,
|
||||
borderColor: isDark ? '#3E3A6A' : '#D1D5DB',
|
||||
color: textColor,
|
||||
borderRadius: 4,
|
||||
fontSize: 13,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── 镜头列表 ── */}
|
||||
{/* minHeight: 0 是 flexbox 关键修复：防止列表内容撑开容器、导致底部按钮被推出视口 */}
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
overflowY: 'auto',
|
||||
overflowX: 'hidden',
|
||||
minHeight: 0,
|
||||
padding: '2px 0',
|
||||
// 自定义滚动条样式
|
||||
scrollbarWidth: 'thin' as const,
|
||||
scrollbarColor: isDark
|
||||
? '#3E3A6A transparent'
|
||||
: '#C7D2FE transparent',
|
||||
}}
|
||||
>
|
||||
{isAssets ? (
|
||||
<div
|
||||
style={{
|
||||
padding: '24px 12px',
|
||||
fontSize: 13,
|
||||
color: dimColor,
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
资产阶段无需选择镜头
|
||||
</div>
|
||||
) : !selectedEpisode ? (
|
||||
<div
|
||||
style={{
|
||||
padding: '24px 12px',
|
||||
fontSize: 13,
|
||||
color: dimColor,
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
请先选择集数
|
||||
</div>
|
||||
) : filteredShots.length === 0 ? (
|
||||
<div
|
||||
style={{
|
||||
padding: '16px 12px',
|
||||
fontSize: 13,
|
||||
color: dimColor,
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
{shotSearchQuery.trim() ? '无匹配镜头' : '该集数下无镜头'}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* 镜头计数 */}
|
||||
<div
|
||||
style={{
|
||||
padding: '4px 12px',
|
||||
fontSize: 11,
|
||||
fontWeight: 600,
|
||||
color: dimColor,
|
||||
}}
|
||||
>
|
||||
镜头列表
|
||||
<span style={{ fontWeight: 400, marginLeft: 4 }}>
|
||||
({filteredShots.length}{shotSearchQuery.trim() ? ` / ${shots.length}` : ''})
|
||||
</span>
|
||||
</div>
|
||||
{filteredShots.map((shot) => {
|
||||
const active = shot === selectedShot;
|
||||
return (
|
||||
<div
|
||||
key={shot}
|
||||
onClick={() => handleShotClick(shot)}
|
||||
style={{
|
||||
padding: '5px 12px',
|
||||
cursor: 'pointer',
|
||||
fontSize: 13,
|
||||
color: active ? activeColor : textColor,
|
||||
background: active ? activeBg : 'transparent',
|
||||
transition: 'background 0.15s',
|
||||
userSelect: 'none',
|
||||
borderLeft: active
|
||||
? `3px solid ${activeColor}`
|
||||
: '3px solid transparent',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
if (!active)
|
||||
(e.currentTarget as HTMLElement).style.background = hoverBg;
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
if (!active)
|
||||
(e.currentTarget as HTMLElement).style.background =
|
||||
'transparent';
|
||||
}}
|
||||
>
|
||||
{shot}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ── 刷新按钮（固定在底部） ── */}
|
||||
{workspaceRoot && selectedEpisode && !isAssets && (
|
||||
<div
|
||||
style={{
|
||||
padding: '8px',
|
||||
borderTop: `1px solid ${borderColor}`,
|
||||
flexShrink: 0,
|
||||
background: isDark ? '#0F0D1E' : '#EDE9F6',
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
size="small"
|
||||
block
|
||||
icon={<ReloadOutlined spin={isRefreshing} />}
|
||||
onClick={() => void handleRefreshShots()}
|
||||
loading={isRefreshing}
|
||||
style={{
|
||||
fontSize: 13,
|
||||
fontWeight: 500,
|
||||
borderRadius: 4,
|
||||
border: `1px solid ${isDark ? '#3E3A6A' : '#C7D2FE'}`,
|
||||
background: isDark
|
||||
? 'rgba(62, 58, 106, 0.4)'
|
||||
: 'rgba(199, 210, 254, 0.3)',
|
||||
color: isDark ? '#C4B5FD' : '#4338CA',
|
||||
}}
|
||||
>
|
||||
刷新镜头列表
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -83,7 +83,7 @@ export function EpisodeSelector() {
|
||||
onChange={handleSelect}
|
||||
placeholder="选择集数"
|
||||
size="small"
|
||||
style={{ width: 120 }}
|
||||
style={{ width: '100%' }}
|
||||
options={options}
|
||||
disabled={!selectedProject}
|
||||
showSearch
|
||||
|
||||
@@ -76,7 +76,7 @@ export function ProjectSelector() {
|
||||
onChange={handleSelect}
|
||||
placeholder="选择项目"
|
||||
size="small"
|
||||
style={{ width: 140 }}
|
||||
style={{ width: '100%' }}
|
||||
options={options}
|
||||
disabled={!workspaceRoot}
|
||||
showSearch
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
export { ProjectSelector } from './ProjectSelector';
|
||||
export { EpisodeSelector } from './EpisodeSelector';
|
||||
export { ShotList } from './ShotList';
|
||||
export { CanvasSidebar } from './CanvasSidebar';
|
||||
export { ContextMenu } from './ContextMenu';
|
||||
export type { ContextMenuItem } from './ContextMenu';
|
||||
export { DirectoryCreateModal } from './DirectoryCreateModal';
|
||||
|
||||
@@ -76,6 +76,8 @@ export interface CanvasState {
|
||||
tagQuery: string;
|
||||
auditFilter: AuditStatus | 'all';
|
||||
assetTypeFilter: AssetTypeFilter;
|
||||
/** 仅显示收藏条目（metadata.favorite === true） */
|
||||
favoriteOnly: boolean;
|
||||
|
||||
// ── Layout ──
|
||||
layoutMode: LayoutMode;
|
||||
@@ -114,7 +116,7 @@ export interface CanvasState {
|
||||
filters: Partial<
|
||||
Pick<
|
||||
CanvasState,
|
||||
'keywordQuery' | 'tagQuery' | 'auditFilter' | 'assetTypeFilter'
|
||||
'keywordQuery' | 'tagQuery' | 'auditFilter' | 'assetTypeFilter' | 'favoriteOnly'
|
||||
>
|
||||
>,
|
||||
) => void;
|
||||
@@ -159,6 +161,7 @@ function createCanvasStoreLogic(dataSource: ICanvasDataSource, initialWorkspace:
|
||||
tagQuery: '',
|
||||
auditFilter: 'all',
|
||||
assetTypeFilter: '全部',
|
||||
favoriteOnly: false,
|
||||
|
||||
layoutMode: 'grid',
|
||||
cols: 9,
|
||||
|
||||
@@ -1,41 +1,22 @@
|
||||
// ============================================================
|
||||
// CanvasFilterBar — 画布筛选栏
|
||||
// CanvasFilterBar — 关键词搜索栏（精简版）
|
||||
//
|
||||
// 提供：关键词搜索、标签筛选、审核状态筛选、镜头查询、资产类型筛选
|
||||
// 每个筛选条件变化后触发 useDirectoryScan（防抖 300ms）
|
||||
// 仅保留文件名/描述关键词搜索。
|
||||
// 资产类型筛选 → 已移至 CategoryTabs（Assets 阶段）。
|
||||
// 审核状态筛选 → 已移至 CategoryTabs（非 Assets 阶段）。
|
||||
// ============================================================
|
||||
|
||||
import { useCallback } from 'react';
|
||||
import { Input, Select } from 'antd';
|
||||
import { Input } from 'antd';
|
||||
import { SearchOutlined } from '@ant-design/icons';
|
||||
import { useTheme } from '@/components/providers/ThemeProvider';
|
||||
import { useCanvasStore, type AuditStatus, type AssetTypeFilter } from '../store/useCanvasStore';
|
||||
|
||||
const AUDIT_OPTIONS: Array<{ value: AuditStatus | 'all'; label: string }> = [
|
||||
{ value: 'all', label: '全部审核' },
|
||||
{ value: 'pending', label: '待审核' },
|
||||
{ value: 'approved', label: '已通过' },
|
||||
{ value: 'rework', label: '需返工' },
|
||||
{ value: 'deprecated', label: '已废弃' },
|
||||
];
|
||||
|
||||
const ASSET_TYPE_OPTIONS: Array<{ value: AssetTypeFilter; label: string }> = [
|
||||
{ value: '全部', label: '全部资产' },
|
||||
{ value: '角色', label: '角色' },
|
||||
{ value: '道具', label: '道具' },
|
||||
{ value: '场景', label: '场景' },
|
||||
];
|
||||
import { useCanvasStore } from '../store/useCanvasStore';
|
||||
|
||||
export function CanvasFilterBar() {
|
||||
const { isDark } = useTheme();
|
||||
const keywordQuery = useCanvasStore((s) => s.keywordQuery);
|
||||
const auditFilter = useCanvasStore((s) => s.auditFilter);
|
||||
const assetTypeFilter = useCanvasStore((s) => s.assetTypeFilter);
|
||||
const currentStage = useCanvasStore((s) => s.currentStage);
|
||||
const setFilters = useCanvasStore((s) => s.setFilters);
|
||||
|
||||
const isAssets = currentStage === 'Assets';
|
||||
|
||||
const handleKeywordChange = useCallback(
|
||||
(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setFilters({ keywordQuery: e.target.value });
|
||||
@@ -51,39 +32,14 @@ export function CanvasFilterBar() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', gap: 8, alignItems: 'center', flex: 1 }}>
|
||||
{/* 关键词搜索 */}
|
||||
<Input
|
||||
placeholder="搜索文件名/描述…"
|
||||
prefix={<SearchOutlined />}
|
||||
value={keywordQuery}
|
||||
onChange={handleKeywordChange}
|
||||
allowClear
|
||||
size="small"
|
||||
style={{ width: 180, ...inputStyle }}
|
||||
/>
|
||||
|
||||
{/* 审核状态筛选（仅可审核阶段） */}
|
||||
{!isAssets && (
|
||||
<Select
|
||||
value={auditFilter}
|
||||
onChange={(v) => setFilters({ auditFilter: v })}
|
||||
size="small"
|
||||
style={{ width: 110 }}
|
||||
options={AUDIT_OPTIONS}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 资产类型筛选（仅 Assets 阶段） */}
|
||||
{isAssets && (
|
||||
<Select
|
||||
value={assetTypeFilter}
|
||||
onChange={(v) => setFilters({ assetTypeFilter: v })}
|
||||
size="small"
|
||||
style={{ width: 110 }}
|
||||
options={ASSET_TYPE_OPTIONS}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<Input
|
||||
placeholder="搜索文件名/描述…"
|
||||
prefix={<SearchOutlined />}
|
||||
value={keywordQuery}
|
||||
onChange={handleKeywordChange}
|
||||
allowClear
|
||||
size="small"
|
||||
style={{ width: 180, ...inputStyle }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,46 +1,25 @@
|
||||
// ============================================================
|
||||
// CanvasToolbar — 顶部工具栏包装器
|
||||
// CanvasToolbar — 画布内容区顶部工具栏（简化版）
|
||||
//
|
||||
// 包含：工作区选择 + 项目选择 + 集数选择 + StageTabs + FilterBar
|
||||
// 包含两行：
|
||||
// 第一行：StageTabs（阶段标签 + 无限画布按钮）
|
||||
// 第二行：CategoryTabs（资产分类标签） + CanvasFilterBar（搜索 + 审核）
|
||||
//
|
||||
// 注：项目/集数选择器已移至 CanvasSidebar。
|
||||
// ============================================================
|
||||
|
||||
import { Button, message } from 'antd';
|
||||
import { FolderOpenOutlined } from '@ant-design/icons';
|
||||
import { useTheme } from '@/components/providers/ThemeProvider';
|
||||
import { useCanvasStore } from '../store/useCanvasStore';
|
||||
import { StageTabs } from './StageTabs';
|
||||
import { CategoryTabs } from './CategoryTabs';
|
||||
import { CanvasFilterBar } from './CanvasFilterBar';
|
||||
import { ProjectSelector } from '../navigation/ProjectSelector';
|
||||
import { EpisodeSelector } from '../navigation/EpisodeSelector';
|
||||
|
||||
export function CanvasToolbar() {
|
||||
const { isDark } = useTheme();
|
||||
const workspaceRoot = useCanvasStore((s) => s.workspaceRoot);
|
||||
const setWorkspace = useCanvasStore((s) => s.setWorkspace);
|
||||
const setProjects = useCanvasStore((s) => s.setProjects);
|
||||
const getDataSource = useCanvasStore((s) => s.getDataSource);
|
||||
const isScanning = useCanvasStore((s) => s.isScanning);
|
||||
const totalCount = useCanvasStore((s) => s.totalCount);
|
||||
|
||||
const handleOpenWorkspace = async () => {
|
||||
try {
|
||||
const dataSource = getDataSource();
|
||||
const dir = await dataSource.openDirectoryDialog();
|
||||
if (dir) {
|
||||
setWorkspace(dir);
|
||||
// 异步加载项目列表
|
||||
try {
|
||||
const projects = await dataSource.listSubdirs(dir);
|
||||
setProjects(projects);
|
||||
} catch (err) {
|
||||
console.error('[CanvasToolbar] 加载项目列表失败:', err);
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
void message.error((err as Error).message || '打开目录失败');
|
||||
}
|
||||
};
|
||||
|
||||
const barBg = isDark
|
||||
? 'linear-gradient(180deg, #1E1B4B 0%, #15132E 100%)'
|
||||
: 'linear-gradient(180deg, #FFFFFF 0%, #F5F3FF 100%)';
|
||||
@@ -55,41 +34,23 @@ export function CanvasToolbar() {
|
||||
background: barBg,
|
||||
}}
|
||||
>
|
||||
{/* 第一行：工作区 + 项目选择器 + 集数选择器 + 阶段标签 */}
|
||||
{/* 第一行：阶段标签 + 无限画布 + 扫描状态 */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: '6px 12px',
|
||||
gap: 8,
|
||||
height: 40,
|
||||
height: 36,
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
icon={<FolderOpenOutlined />}
|
||||
onClick={() => void handleOpenWorkspace()}
|
||||
style={{
|
||||
color: isDark ? '#C4B5FD' : '#4338CA',
|
||||
fontWeight: 500,
|
||||
fontSize: 12,
|
||||
}}
|
||||
>
|
||||
{workspaceRoot ? '切换' : '打开'}
|
||||
</Button>
|
||||
|
||||
{workspaceRoot && <ProjectSelector />}
|
||||
{workspaceRoot && <EpisodeSelector />}
|
||||
<StageTabs />
|
||||
|
||||
<div style={{ flex: 1 }} />
|
||||
|
||||
<StageTabs />
|
||||
|
||||
{isScanning && (
|
||||
<span
|
||||
style={{
|
||||
fontSize: 11,
|
||||
fontSize: 12,
|
||||
color: isDark ? '#C4B5FD' : '#6366F1',
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
@@ -101,9 +62,10 @@ export function CanvasToolbar() {
|
||||
{totalCount > 0 && (
|
||||
<span
|
||||
style={{
|
||||
fontSize: 11,
|
||||
fontSize: 12,
|
||||
color: isDark ? '#6E6B90' : '#9CA3AF',
|
||||
whiteSpace: 'nowrap',
|
||||
marginLeft: 8,
|
||||
}}
|
||||
>
|
||||
{totalCount} 个文件
|
||||
@@ -111,7 +73,7 @@ export function CanvasToolbar() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 第二行：筛选栏 */}
|
||||
{/* 第二行：分类标签 + 筛选栏 */}
|
||||
{workspaceRoot && (
|
||||
<div
|
||||
style={{
|
||||
@@ -119,8 +81,11 @@ export function CanvasToolbar() {
|
||||
alignItems: 'center',
|
||||
padding: '4px 12px 6px',
|
||||
borderTop: `1px solid ${borderColor}`,
|
||||
gap: 12,
|
||||
}}
|
||||
>
|
||||
<CategoryTabs />
|
||||
<div style={{ flex: 1 }} />
|
||||
<CanvasFilterBar />
|
||||
</div>
|
||||
)}
|
||||
|
||||
253
src/pages/infinite-canvas/toolbar/CategoryTabs.tsx
Normal file
253
src/pages/infinite-canvas/toolbar/CategoryTabs.tsx
Normal file
@@ -0,0 +1,253 @@
|
||||
// ============================================================
|
||||
// CategoryTabs — 内容分类标签栏（阶段感知 + 数量徽标）
|
||||
//
|
||||
// Assets 阶段 → 资产分类：
|
||||
// 全部 | 角色(chr) | 道具(prp) | 场景(set) | 收藏
|
||||
// → 映射到 store.assetTypeFilter + favoriteOnly
|
||||
//
|
||||
// 其他阶段 → 审核分类：
|
||||
// 所有[阶段名] | 收藏 | 待审核 | 通过 | 返修 | 已弃用
|
||||
// → 映射到 store.auditFilter + favoriteOnly
|
||||
//
|
||||
// 每个标签显示对应数据的数量徽标（基于当前已加载 items 计算）。
|
||||
// "收藏"标签额外显示媒体类型细分（视频/图片/音频）。
|
||||
// ============================================================
|
||||
|
||||
import { useMemo } from 'react';
|
||||
import { useTheme } from '@/components/providers/ThemeProvider';
|
||||
import { useCanvasStore, type AssetTypeFilter, type AuditStatus } from '../store/useCanvasStore';
|
||||
|
||||
interface CategoryTab {
|
||||
key: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
// ── 工具：根据扩展名判断媒体类型 ──
|
||||
|
||||
type MediaType = 'video' | 'image' | 'audio' | 'other';
|
||||
|
||||
const VIDEO_EXTS = new Set(['mp4', 'mov', 'avi', 'mkv', 'webm', 'm4v', 'wmv']);
|
||||
const AUDIO_EXTS = new Set(['mp3', 'wav', 'aac', 'flac', 'ogg', 'wma', 'm4a']);
|
||||
const IMAGE_EXTS = new Set([
|
||||
'png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp', 'tiff', 'tga', 'exr', 'psd',
|
||||
]);
|
||||
|
||||
function getMediaType(ext: string): MediaType {
|
||||
const lower = ext.toLowerCase();
|
||||
if (VIDEO_EXTS.has(lower)) return 'video';
|
||||
if (IMAGE_EXTS.has(lower)) return 'image';
|
||||
if (AUDIO_EXTS.has(lower)) return 'audio';
|
||||
return 'other';
|
||||
}
|
||||
|
||||
// ── 工具：根据目录路径推断资产类型 ──
|
||||
|
||||
function inferAssetType(path: string): AssetTypeFilter {
|
||||
const lower = path.toLowerCase();
|
||||
// 路径中包含 \chr\ → 角色，\prp\ → 道具，\set\ → 场景
|
||||
if (lower.includes('\\chr\\') || lower.includes('/chr/')) return '角色';
|
||||
if (lower.includes('\\prp\\') || lower.includes('/prp/')) return '道具';
|
||||
if (lower.includes('\\set\\') || lower.includes('/set/')) return '场景';
|
||||
return '全部';
|
||||
}
|
||||
|
||||
export function CategoryTabs() {
|
||||
const { isDark } = useTheme();
|
||||
const currentStage = useCanvasStore((s) => s.currentStage);
|
||||
const assetTypeFilter = useCanvasStore((s) => s.assetTypeFilter);
|
||||
const auditFilter = useCanvasStore((s) => s.auditFilter);
|
||||
const favoriteOnly = useCanvasStore((s) => s.favoriteOnly);
|
||||
const items = useCanvasStore((s) => s.items);
|
||||
const setFilters = useCanvasStore((s) => s.setFilters);
|
||||
|
||||
const isAssets = currentStage === 'Assets';
|
||||
|
||||
// 阶段中文名映射
|
||||
const stageLabel: Record<string, string> = {
|
||||
Assets: '资产',
|
||||
Storyboard: '分镜',
|
||||
Keyframe: '关键帧',
|
||||
Video: '视频',
|
||||
Audio: '音频',
|
||||
LipSync: '口型',
|
||||
};
|
||||
|
||||
// ── 分类数量统计 ──
|
||||
|
||||
const categoryCounts = useMemo(() => {
|
||||
const counts: Record<string, number> = {};
|
||||
let favoriteMediaCounts: Record<MediaType, number> = { video: 0, image: 0, audio: 0, other: 0 };
|
||||
|
||||
if (isAssets) {
|
||||
// Assets 阶段：按 assetType (chr/prp/set) 分类统计
|
||||
counts['全部'] = items.length;
|
||||
counts['角色'] = 0;
|
||||
counts['道具'] = 0;
|
||||
counts['场景'] = 0;
|
||||
counts['收藏'] = 0;
|
||||
for (const item of items) {
|
||||
const at = inferAssetType(item.path);
|
||||
if (at === '角色') counts['角色']++;
|
||||
else if (at === '道具') counts['道具']++;
|
||||
else if (at === '场景') counts['场景']++;
|
||||
if (item.metadata?.favorite) {
|
||||
counts['收藏']++;
|
||||
favoriteMediaCounts[getMediaType(item.ext)]++;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// 非 Assets 阶段：按审核状态 + 收藏统计
|
||||
counts['all'] = items.length;
|
||||
counts['pending'] = 0;
|
||||
counts['approved'] = 0;
|
||||
counts['rework'] = 0;
|
||||
counts['deprecated'] = 0;
|
||||
counts['收藏'] = 0;
|
||||
for (const item of items) {
|
||||
const status = item.metadata?.audit_status;
|
||||
if (status) counts[status] = (counts[status] || 0) + 1;
|
||||
if (item.metadata?.favorite) {
|
||||
counts['收藏']++;
|
||||
favoriteMediaCounts[getMediaType(item.ext)]++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return { counts, favoriteMediaCounts };
|
||||
}, [items, isAssets]);
|
||||
|
||||
// ── 根据阶段决定标签组 ──
|
||||
|
||||
const tabs: CategoryTab[] = useMemo(() => {
|
||||
if (isAssets) {
|
||||
return [
|
||||
{ key: '全部', label: '全部' },
|
||||
{ key: '角色', label: '角色' },
|
||||
{ key: '道具', label: '道具' },
|
||||
{ key: '场景', label: '场景' },
|
||||
{ key: '收藏', label: '⭐ 收藏' },
|
||||
];
|
||||
}
|
||||
const label = stageLabel[currentStage] || currentStage;
|
||||
return [
|
||||
{ key: 'all', label: `所有${label}` },
|
||||
{ key: '收藏', label: '⭐ 收藏' },
|
||||
{ key: 'pending', label: '待审核' },
|
||||
{ key: 'approved', label: '通过' },
|
||||
{ key: 'rework', label: '返修' },
|
||||
{ key: 'deprecated', label: '已弃用' },
|
||||
];
|
||||
}, [isAssets, currentStage]);
|
||||
|
||||
// ── 点击处理 ──
|
||||
|
||||
const handleTabClick = (key: string) => {
|
||||
if (isAssets) {
|
||||
if (key === '收藏') {
|
||||
setFilters({ favoriteOnly: !favoriteOnly, assetTypeFilter: '全部' });
|
||||
} else {
|
||||
setFilters({ assetTypeFilter: key as AssetTypeFilter, favoriteOnly: false });
|
||||
}
|
||||
} else {
|
||||
if (key === '收藏') {
|
||||
setFilters({ favoriteOnly: !favoriteOnly, auditFilter: 'all' });
|
||||
} else {
|
||||
setFilters({ auditFilter: key as AuditStatus | 'all', favoriteOnly: false });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// ── 判断标签是否激活 ──
|
||||
|
||||
const isTabActive = (tab: CategoryTab): boolean => {
|
||||
if (tab.key === '收藏') return favoriteOnly;
|
||||
if (isAssets) return !favoriteOnly && tab.key === assetTypeFilter;
|
||||
return !favoriteOnly && tab.key === auditFilter;
|
||||
};
|
||||
|
||||
// ── 收藏媒体细分提示 ──
|
||||
|
||||
const buildFavoriteTooltip = () => {
|
||||
const { favoriteMediaCounts } = categoryCounts;
|
||||
const parts: string[] = [];
|
||||
if (favoriteMediaCounts.video > 0) parts.push(`视频:${favoriteMediaCounts.video}`);
|
||||
if (favoriteMediaCounts.image > 0) parts.push(`图片:${favoriteMediaCounts.image}`);
|
||||
if (favoriteMediaCounts.audio > 0) parts.push(`音频:${favoriteMediaCounts.audio}`);
|
||||
if (favoriteMediaCounts.other > 0) parts.push(`其他:${favoriteMediaCounts.other}`);
|
||||
return parts.length > 0 ? ` ${parts.join(' / ')}` : '';
|
||||
};
|
||||
|
||||
const activeBg = isDark ? '#3E3A6A' : '#E0E7FF';
|
||||
const activeColor = isDark ? '#C4B5FD' : '#4338CA';
|
||||
const inactiveColor = isDark ? '#6E6B90' : '#9CA3AF';
|
||||
const badgeBg = isDark ? 'rgba(110, 107, 144, 0.5)' : 'rgba(156, 163, 175, 0.3)';
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 0,
|
||||
padding: '2px 4px',
|
||||
borderRadius: 6,
|
||||
background: isDark ? 'rgba(21, 19, 46, 0.8)' : 'rgba(245, 243, 255, 0.8)',
|
||||
border: `1px solid ${isDark ? '#2E2A5A' : '#E5E7EB'}`,
|
||||
overflowX: 'auto',
|
||||
scrollbarWidth: 'none' as const,
|
||||
}}
|
||||
>
|
||||
{tabs.map((tab) => {
|
||||
const isActive = isTabActive(tab);
|
||||
const count = categoryCounts.counts[tab.key] ?? 0;
|
||||
const tooltip = tab.key === '收藏' ? `${count} 个收藏${buildFavoriteTooltip()}` : undefined;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={tab.key}
|
||||
type="button"
|
||||
onClick={() => handleTabClick(tab.key)}
|
||||
title={tooltip ?? undefined}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 3,
|
||||
padding: '3px 10px',
|
||||
border: 'none',
|
||||
borderRadius: 4,
|
||||
cursor: 'pointer',
|
||||
fontSize: 13,
|
||||
fontWeight: isActive ? 600 : 400,
|
||||
background: isActive ? activeBg : 'transparent',
|
||||
color: isActive ? activeColor : inactiveColor,
|
||||
transition: 'all 0.15s',
|
||||
whiteSpace: 'nowrap',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
{tab.label}
|
||||
{count > 0 && (
|
||||
<span
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
minWidth: 18,
|
||||
height: 17,
|
||||
padding: '0 4px',
|
||||
borderRadius: 8,
|
||||
fontSize: 10,
|
||||
fontWeight: 600,
|
||||
background: badgeBg,
|
||||
color: isActive ? activeColor : inactiveColor,
|
||||
lineHeight: 1,
|
||||
}}
|
||||
>
|
||||
{count}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,10 +1,16 @@
|
||||
// ============================================================
|
||||
// StageTabs — 阶段切换标签栏
|
||||
// StageTabs — 阶段切换标签栏 + 无限画布按钮
|
||||
//
|
||||
// 六个阶段：Storyboard / Keyframe / Video / Audio / LipSync / Assets
|
||||
// 点击切换 store.currentStage，触发 useDirectoryScan 重新扫描
|
||||
// 六个阶段标签：Assets / Storyboard / Keyframe / Video / Audio / LipSync
|
||||
// 点击切换 store.currentStage，触发 useDirectoryScan 重新扫描。
|
||||
//
|
||||
// "无限画布"按钮：通过 IPC 打开独立的画布 BrowserWindow，
|
||||
// 关闭其他页面不影响该窗口。
|
||||
// ============================================================
|
||||
|
||||
import { useCallback } from 'react';
|
||||
import { Button } from 'antd';
|
||||
import { ExpandOutlined } from '@ant-design/icons';
|
||||
import { useTheme } from '@/components/providers/ThemeProvider';
|
||||
import { useCanvasStore, type StageType } from '../store/useCanvasStore';
|
||||
import { STAGE_CONFIGS } from '../utils/constants';
|
||||
@@ -13,6 +19,17 @@ export function StageTabs() {
|
||||
const { isDark } = useTheme();
|
||||
const currentStage = useCanvasStore((s) => s.currentStage);
|
||||
const setStage = useCanvasStore((s) => s.setStage);
|
||||
const getProjectPath = useCanvasStore((s) => s.getProjectPath);
|
||||
|
||||
/** 打开独立的无限画布窗口 */
|
||||
const handleOpenCanvasWindow = useCallback(() => {
|
||||
try {
|
||||
const projectPath = getProjectPath();
|
||||
window.canvas?.openWindow(projectPath ?? undefined);
|
||||
} catch (err) {
|
||||
console.error('[StageTabs] 打开无限画布窗口失败:', err);
|
||||
}
|
||||
}, [getProjectPath]);
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', gap: 2, alignItems: 'center' }}>
|
||||
@@ -29,7 +46,7 @@ export function StageTabs() {
|
||||
border: 'none',
|
||||
borderRadius: 4,
|
||||
cursor: 'pointer',
|
||||
fontSize: 12,
|
||||
fontSize: 13,
|
||||
fontWeight: isActive ? 600 : 400,
|
||||
background: isActive
|
||||
? isDark
|
||||
@@ -52,6 +69,38 @@ export function StageTabs() {
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* 分隔线 */}
|
||||
<div
|
||||
style={{
|
||||
width: 1,
|
||||
height: 18,
|
||||
background: isDark ? '#3E3A6A' : '#D1D5DB',
|
||||
margin: '0 4px',
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 无限画布按钮 */}
|
||||
<Button
|
||||
size="small"
|
||||
icon={<ExpandOutlined />}
|
||||
onClick={() => void handleOpenCanvasWindow()}
|
||||
title="在新窗口中打开无限画布（关闭其他页面不影响此窗口）"
|
||||
style={{
|
||||
fontSize: 12,
|
||||
fontWeight: 500,
|
||||
borderRadius: 4,
|
||||
border: `1px solid ${isDark ? '#3E3A6A' : '#C7D2FE'}`,
|
||||
background: isDark
|
||||
? 'rgba(62, 58, 106, 0.4)'
|
||||
: 'rgba(224, 231, 255, 0.6)',
|
||||
color: isDark ? '#C4B5FD' : '#4338CA',
|
||||
padding: '2px 10px',
|
||||
transition: 'all 0.15s',
|
||||
}}
|
||||
>
|
||||
无限画布
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,3 +5,4 @@
|
||||
export { CanvasToolbar } from './CanvasToolbar';
|
||||
export { CanvasFilterBar } from './CanvasFilterBar';
|
||||
export { StageTabs } from './StageTabs';
|
||||
export { CategoryTabs } from './CategoryTabs';
|
||||
|
||||
Reference in New Issue
Block a user