1934 lines
74 KiB
TypeScript
1934 lines
74 KiB
TypeScript
/**
|
||
* Content Browser - 内容浏览器
|
||
* 用于浏览和管理项目资产
|
||
*/
|
||
|
||
import { useState, useEffect, useRef, useCallback } from 'react';
|
||
import * as LucideIcons from 'lucide-react';
|
||
import {
|
||
Plus,
|
||
Download,
|
||
Save,
|
||
ChevronRight,
|
||
ChevronDown,
|
||
Search,
|
||
SlidersHorizontal,
|
||
LayoutGrid,
|
||
List,
|
||
FolderClosed,
|
||
FolderOpen,
|
||
Folder,
|
||
File,
|
||
FileCode,
|
||
FileJson,
|
||
FileImage,
|
||
FileText,
|
||
Copy,
|
||
Trash2,
|
||
Edit3,
|
||
ExternalLink,
|
||
PanelRightClose,
|
||
Tag,
|
||
Link,
|
||
FileSearch,
|
||
Globe,
|
||
Package,
|
||
Clipboard,
|
||
RefreshCw,
|
||
Settings,
|
||
Database,
|
||
AlertTriangle
|
||
} from 'lucide-react';
|
||
import { Core } from '@esengine/ecs-framework';
|
||
import { MessageHub, FileActionRegistry, AssetRegistryService, type FileCreationTemplate } from '@esengine/editor-core';
|
||
import { TauriAPI, DirectoryEntry } from '../api/tauri';
|
||
import { SettingsService } from '../services/SettingsService';
|
||
import { ContextMenu, ContextMenuItem } from './ContextMenu';
|
||
import { PromptDialog } from './PromptDialog';
|
||
import '../styles/ContentBrowser.css';
|
||
|
||
/**
|
||
* Directories managed by asset registry (GUID system)
|
||
* 被资产注册表（GUID 系统）管理的目录
|
||
*
|
||
* Note: This is duplicated from AssetRegistryService to avoid build dependency issues.
|
||
* Keep in sync with MANAGED_ASSET_DIRECTORIES in AssetRegistryService.ts
|
||
*/
|
||
const MANAGED_ASSET_DIRECTORIES = ['assets', 'scripts', 'scenes'] as const;
|
||
|
||
interface AssetItem {
|
||
name: string;
|
||
path: string;
|
||
type: 'file' | 'folder';
|
||
extension?: string;
|
||
size?: number;
|
||
modified?: number;
|
||
}
|
||
|
||
interface FolderNode {
|
||
name: string;
|
||
path: string;
|
||
children: FolderNode[];
|
||
isExpanded: boolean;
|
||
}
|
||
|
||
interface ContentBrowserProps {
|
||
projectPath: string | null;
|
||
locale?: string;
|
||
onOpenScene?: (scenePath: string) => void;
|
||
isDrawer?: boolean;
|
||
onDockInLayout?: () => void;
|
||
revealPath?: string | null;
|
||
}
|
||
|
||
/**
|
||
* 根据图标名获取 Lucide 图标组件
|
||
*/
|
||
function getIconComponent(iconName: string | undefined, size: number = 16): React.ReactNode {
|
||
if (!iconName) return <File size={size} />;
|
||
|
||
const icons = LucideIcons as unknown as Record<string, React.ComponentType<{ size?: number }>>;
|
||
const IconComponent = icons[iconName];
|
||
if (IconComponent) {
|
||
return <IconComponent size={size} />;
|
||
}
|
||
|
||
return <File size={size} />;
|
||
}
|
||
|
||
/**
|
||
* Check if path is within a managed asset directory
|
||
* 检查路径是否在被管理的资产目录中
|
||
*/
|
||
function isPathInManagedDirectory(path: string, projectPath: string | null): boolean {
|
||
if (!projectPath || !path) return false;
|
||
|
||
const normalizedPath = path.replace(/\\/g, '/');
|
||
const normalizedProject = projectPath.replace(/\\/g, '/');
|
||
|
||
for (const dir of MANAGED_ASSET_DIRECTORIES) {
|
||
const managedAbsPath = `${normalizedProject}/${dir}`;
|
||
if (normalizedPath.startsWith(`${managedAbsPath}/`) || normalizedPath === managedAbsPath) {
|
||
return true;
|
||
}
|
||
}
|
||
return false;
|
||
}
|
||
|
||
/**
|
||
* Check if folder is a root managed directory (assets, scripts, scenes)
|
||
* 检查文件夹是否是根级被管理目录
|
||
*/
|
||
function isRootManagedDirectory(folderPath: string, projectPath: string | null): boolean {
|
||
if (!projectPath || !folderPath) return false;
|
||
|
||
const normalizedPath = folderPath.replace(/\\/g, '/');
|
||
const normalizedProject = projectPath.replace(/\\/g, '/');
|
||
|
||
for (const dir of MANAGED_ASSET_DIRECTORIES) {
|
||
const managedAbsPath = `${normalizedProject}/${dir}`;
|
||
if (normalizedPath === managedAbsPath) {
|
||
return true;
|
||
}
|
||
}
|
||
return false;
|
||
}
|
||
|
||
// 获取资产类型显示名称
|
||
function getAssetTypeName(asset: AssetItem): string {
|
||
if (asset.type === 'folder') return 'Folder';
|
||
|
||
// Check for compound extensions first
|
||
const name = asset.name.toLowerCase();
|
||
if (name.endsWith('.tilemap.json') || name.endsWith('.tilemap')) return 'Tilemap';
|
||
if (name.endsWith('.tileset.json') || name.endsWith('.tileset')) return 'Tileset';
|
||
|
||
const ext = asset.extension?.toLowerCase();
|
||
switch (ext) {
|
||
case 'ecs': return 'Scene';
|
||
case 'btree': return 'Behavior Tree';
|
||
case 'png':
|
||
case 'jpg':
|
||
case 'jpeg':
|
||
case 'webp': return 'Texture';
|
||
case 'ts':
|
||
case 'tsx': return 'TypeScript';
|
||
case 'js':
|
||
case 'jsx': return 'JavaScript';
|
||
case 'json': return 'JSON';
|
||
case 'prefab': return 'Prefab';
|
||
case 'mat': return 'Material';
|
||
case 'anim': return 'Animation';
|
||
default: return ext?.toUpperCase() || 'File';
|
||
}
|
||
}
|
||
|
||
export function ContentBrowser({
|
||
projectPath,
|
||
locale = 'en',
|
||
onOpenScene,
|
||
isDrawer = false,
|
||
onDockInLayout,
|
||
revealPath
|
||
}: ContentBrowserProps) {
|
||
const messageHub = Core.services.resolve(MessageHub);
|
||
const fileActionRegistry = Core.services.resolve(FileActionRegistry);
|
||
|
||
// Refs
|
||
const containerRef = useRef<HTMLDivElement>(null);
|
||
|
||
// State
|
||
const [currentPath, setCurrentPath] = useState<string | null>(null);
|
||
const [selectedPaths, setSelectedPaths] = useState<Set<string>>(new Set());
|
||
const [lastSelectedPath, setLastSelectedPath] = useState<string | null>(null);
|
||
const [assets, setAssets] = useState<AssetItem[]>([]);
|
||
const [searchQuery, setSearchQuery] = useState('');
|
||
const [loading, setLoading] = useState(false);
|
||
const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
|
||
|
||
// Folder tree state
|
||
const [folderTree, setFolderTree] = useState<FolderNode | null>(null);
|
||
const [expandedFolders, setExpandedFolders] = useState<Set<string>>(new Set());
|
||
|
||
// Sections collapse state
|
||
const [favoritesExpanded, setFavoritesExpanded] = useState(true);
|
||
const [collectionsExpanded, setCollectionsExpanded] = useState(true);
|
||
|
||
// Favorites (stored paths)
|
||
const [favorites] = useState<string[]>([]);
|
||
|
||
// Dialog states
|
||
const [contextMenu, setContextMenu] = useState<{
|
||
position: { x: number; y: number };
|
||
asset: AssetItem | null;
|
||
isBackground?: boolean;
|
||
} | null>(null);
|
||
// Folder tree context menu (separate from asset context menu)
|
||
const [folderTreeContextMenu, setFolderTreeContextMenu] = useState<{
|
||
position: { x: number; y: number };
|
||
items: ContextMenuItem[];
|
||
} | null>(null);
|
||
const [renameDialog, setRenameDialog] = useState<{
|
||
asset: AssetItem;
|
||
newName: string;
|
||
} | null>(null);
|
||
const [deleteConfirmDialog, setDeleteConfirmDialog] = useState<AssetItem | null>(null);
|
||
const [createFileDialog, setCreateFileDialog] = useState<{
|
||
parentPath: string;
|
||
template: FileCreationTemplate;
|
||
} | null>(null);
|
||
|
||
// 文件创建模板列表（需要状态跟踪以便插件安装后刷新）
|
||
// File creation templates list (need state tracking to refresh after plugin installation)
|
||
const [fileCreationTemplates, setFileCreationTemplates] = useState<FileCreationTemplate[]>([]);
|
||
|
||
// Drag and drop state for file moving
|
||
const [dragOverFolder, setDragOverFolder] = useState<string | null>(null);
|
||
|
||
// 初始化和监听插件安装事件以更新模板列表
|
||
// Initialize and listen for plugin installation events to update template list
|
||
useEffect(() => {
|
||
const updateTemplates = () => {
|
||
if (fileActionRegistry) {
|
||
const templates = fileActionRegistry.getCreationTemplates();
|
||
setFileCreationTemplates([...templates]);
|
||
}
|
||
};
|
||
|
||
// 初始加载
|
||
updateTemplates();
|
||
|
||
// 监听插件安装/卸载事件
|
||
if (messageHub) {
|
||
const unsubInstall = messageHub.subscribe('plugin:installed', updateTemplates);
|
||
const unsubUninstall = messageHub.subscribe('plugin:uninstalled', updateTemplates);
|
||
return () => {
|
||
unsubInstall();
|
||
unsubUninstall();
|
||
};
|
||
}
|
||
}, [fileActionRegistry, messageHub]);
|
||
|
||
const t = {
|
||
en: {
|
||
favorites: 'Favorites',
|
||
collections: 'Collections',
|
||
add: 'Add',
|
||
import: 'Import',
|
||
saveAll: 'Save All',
|
||
search: 'Search',
|
||
items: 'items',
|
||
dockInLayout: 'Dock in Layout',
|
||
noProject: 'No project loaded',
|
||
empty: 'This folder is empty',
|
||
newFolder: 'New Folder',
|
||
newPrefix: 'New',
|
||
managedDirectoryTooltip: 'GUID-managed directory - Assets here get unique IDs for references',
|
||
unmanagedWarning: 'This folder is not managed by GUID system. Assets created here cannot be referenced by GUID.',
|
||
unmanagedWarningTitle: 'Unmanaged Directory',
|
||
rename: 'Rename',
|
||
delete: 'Delete',
|
||
openInExplorer: 'Show in Explorer',
|
||
copyPath: 'Copy Path',
|
||
newSubfolder: 'New Subfolder',
|
||
deleteConfirmTitle: 'Confirm Delete',
|
||
deleteConfirmMessage: 'Are you sure you want to delete',
|
||
cannotDeleteRoot: 'Cannot delete root directory'
|
||
},
|
||
zh: {
|
||
favorites: '收藏夹',
|
||
collections: '收藏集',
|
||
add: '添加',
|
||
import: '导入',
|
||
saveAll: '全部保存',
|
||
search: '搜索',
|
||
items: '项',
|
||
dockInLayout: '停靠到布局',
|
||
noProject: '未加载项目',
|
||
empty: '文件夹为空',
|
||
newFolder: '新建文件夹',
|
||
newPrefix: '新建',
|
||
managedDirectoryTooltip: 'GUID 管理的目录 - 此处的资产会获得唯一 ID 以便引用',
|
||
unmanagedWarning: '此文件夹不受 GUID 系统管理。在此创建的资产无法通过 GUID 引用。',
|
||
unmanagedWarningTitle: '非托管目录',
|
||
rename: '重命名',
|
||
delete: '删除',
|
||
openInExplorer: '在资源管理器中显示',
|
||
copyPath: '复制路径',
|
||
newSubfolder: '新建子文件夹',
|
||
deleteConfirmTitle: '确认删除',
|
||
deleteConfirmMessage: '确定要删除',
|
||
cannotDeleteRoot: '无法删除根目录'
|
||
}
|
||
}[locale] || {
|
||
favorites: 'Favorites',
|
||
collections: 'Collections',
|
||
add: 'Add',
|
||
import: 'Import',
|
||
saveAll: 'Save All',
|
||
search: 'Search',
|
||
items: 'items',
|
||
dockInLayout: 'Dock in Layout',
|
||
noProject: 'No project loaded',
|
||
empty: 'This folder is empty',
|
||
newFolder: 'New Folder',
|
||
newPrefix: 'New',
|
||
managedDirectoryTooltip: 'GUID-managed directory - Assets here get unique IDs for references',
|
||
unmanagedWarning: 'This folder is not managed by GUID system. Assets created here cannot be referenced by GUID.',
|
||
unmanagedWarningTitle: 'Unmanaged Directory',
|
||
rename: 'Rename',
|
||
delete: 'Delete',
|
||
openInExplorer: 'Show in Explorer',
|
||
copyPath: 'Copy Path',
|
||
newSubfolder: 'New Subfolder',
|
||
deleteConfirmTitle: 'Confirm Delete',
|
||
deleteConfirmMessage: 'Are you sure you want to delete',
|
||
cannotDeleteRoot: 'Cannot delete root directory'
|
||
};
|
||
|
||
// 文件创建模板的 label 本地化映射
|
||
const templateLabels: Record<string, { en: string; zh: string }> = {
|
||
'Material': { en: 'Material', zh: '材质' },
|
||
'Shader': { en: 'Shader', zh: '着色器' },
|
||
'Tilemap': { en: 'Tilemap', zh: '瓦片地图' },
|
||
'Tileset': { en: 'Tileset', zh: '瓦片集' },
|
||
'Component': { en: 'Component', zh: '组件' },
|
||
'System': { en: 'System', zh: '系统' },
|
||
'TypeScript': { en: 'TypeScript', zh: 'TypeScript' },
|
||
};
|
||
|
||
// 注册内置的 TypeScript 文件创建模板
|
||
// Register built-in TypeScript file creation templates
|
||
useEffect(() => {
|
||
if (!fileActionRegistry) return;
|
||
|
||
const builtinTemplates: FileCreationTemplate[] = [
|
||
{
|
||
id: 'ts-component',
|
||
label: 'Component',
|
||
extension: '.ts',
|
||
icon: 'FileCode',
|
||
category: 'Script',
|
||
getContent: (fileName: string) => {
|
||
const className = fileName.replace(/\.ts$/, '');
|
||
return `import { Component, ECSComponent, Property, Serialize, Serializable } from '@esengine/ecs-framework';
|
||
|
||
/**
|
||
* ${className}
|
||
*/
|
||
@ECSComponent('${className}')
|
||
@Serializable({ version: 1, typeId: '${className}' })
|
||
export class ${className} extends Component {
|
||
// 在这里添加组件属性
|
||
// Add component properties here
|
||
|
||
@Serialize()
|
||
@Property({ type: 'number', label: 'Example Property' })
|
||
public exampleProperty: number = 0;
|
||
|
||
/**
|
||
* 组件添加到实体时调用
|
||
* Called when component is added to entity
|
||
*/
|
||
onAddedToEntity(): void {
|
||
console.log('${className} added to entity');
|
||
}
|
||
|
||
/**
|
||
* 组件从实体移除时调用
|
||
* Called when component is removed from entity
|
||
*/
|
||
onRemovedFromEntity(): void {
|
||
console.log('${className} removed from entity');
|
||
}
|
||
}
|
||
`;
|
||
}
|
||
},
|
||
{
|
||
id: 'ts-system',
|
||
label: 'System',
|
||
extension: '.ts',
|
||
icon: 'FileCode',
|
||
category: 'Script',
|
||
getContent: (fileName: string) => {
|
||
const className = fileName.replace(/\.ts$/, '');
|
||
return `import { EntitySystem, Matcher, ECSSystem, type Entity } from '@esengine/ecs-framework';
|
||
|
||
/**
|
||
* ${className}
|
||
*/
|
||
@ECSSystem('${className}')
|
||
export class ${className} extends EntitySystem {
|
||
constructor() {
|
||
// 定义系统处理的组件类型 | Define component types this system processes
|
||
// super(Matcher.all(SomeComponent));
|
||
super(Matcher.empty());
|
||
}
|
||
|
||
protected updateEntity(entity: Entity, deltaTime: number): void {
|
||
// 处理每个实体 | Process each entity
|
||
}
|
||
}
|
||
`;
|
||
}
|
||
},
|
||
{
|
||
id: 'ts-script',
|
||
label: 'TypeScript',
|
||
extension: '.ts',
|
||
icon: 'FileCode',
|
||
category: 'Script',
|
||
getContent: (fileName: string) => {
|
||
const name = fileName.replace(/\.ts$/, '');
|
||
return `/**
|
||
* ${name}
|
||
*/
|
||
|
||
export function ${name.charAt(0).toLowerCase() + name.slice(1)}(): void {
|
||
// 在这里编写代码
|
||
// Write your code here
|
||
}
|
||
`;
|
||
}
|
||
},
|
||
{
|
||
id: 'ts-inspector',
|
||
label: 'Inspector',
|
||
extension: '.ts',
|
||
icon: 'FileCode',
|
||
category: 'Editor',
|
||
getContent: (fileName: string) => {
|
||
const className = fileName.replace(/\.ts$/, '');
|
||
return `import React from 'react';
|
||
import type { Component } from '@esengine/ecs-framework';
|
||
import type { IComponentInspector, ComponentInspectorContext } from '@esengine/editor-core';
|
||
|
||
/**
|
||
* ${className}
|
||
*
|
||
* 自定义组件检查器 | Custom component inspector
|
||
* 放置在 scripts/editor/ 目录下 | Place in scripts/editor/ directory
|
||
*/
|
||
export class ${className} implements IComponentInspector {
|
||
readonly id = '${className.toLowerCase()}';
|
||
readonly name = '${className}';
|
||
readonly priority = 10;
|
||
// 目标组件类型名称 | Target component type names
|
||
readonly targetComponents = ['YourComponent'];
|
||
|
||
canHandle(component: Component): boolean {
|
||
return this.targetComponents.includes(component.constructor.name);
|
||
}
|
||
|
||
render(context: ComponentInspectorContext): React.ReactElement {
|
||
const { component } = context;
|
||
|
||
return React.createElement('div', { className: 'custom-inspector' },
|
||
React.createElement('h4', null, '${className}'),
|
||
React.createElement('pre', null, JSON.stringify(component, null, 2))
|
||
);
|
||
}
|
||
}
|
||
`;
|
||
}
|
||
},
|
||
{
|
||
id: 'ts-gizmo',
|
||
label: 'Gizmo',
|
||
extension: '.ts',
|
||
icon: 'FileCode',
|
||
category: 'Editor',
|
||
getContent: (fileName: string) => {
|
||
const className = fileName.replace(/\.ts$/, '');
|
||
return `import type { Component, Entity } from '@esengine/ecs-framework';
|
||
import type { IGizmoRenderData } from '@esengine/editor-core';
|
||
|
||
/**
|
||
* ${className}
|
||
*
|
||
* 自定义 Gizmo 提供者 | Custom Gizmo provider
|
||
* 放置在 scripts/editor/ 目录下 | Place in scripts/editor/ directory
|
||
*/
|
||
export class ${className} {
|
||
// 目标组件类型 | Target component type
|
||
// 需要替换为实际的组件类 | Replace with actual component class
|
||
readonly targetComponent = null; // YourComponent
|
||
|
||
draw(component: Component, entity: Entity, isSelected: boolean): IGizmoRenderData[] {
|
||
// 返回要绘制的 Gizmo 数据 | Return gizmo data to draw
|
||
return [
|
||
{
|
||
type: 'circle',
|
||
x: 0,
|
||
y: 0,
|
||
radius: 10,
|
||
strokeColor: isSelected ? '#00ff00' : '#ffffff',
|
||
strokeWidth: 2
|
||
}
|
||
];
|
||
}
|
||
}
|
||
`;
|
||
}
|
||
}
|
||
];
|
||
|
||
// 注册模板
|
||
for (const template of builtinTemplates) {
|
||
fileActionRegistry.registerCreationTemplate(template);
|
||
}
|
||
|
||
// 清理函数
|
||
return () => {
|
||
for (const template of builtinTemplates) {
|
||
fileActionRegistry.unregisterCreationTemplate(template);
|
||
}
|
||
};
|
||
}, [fileActionRegistry]);
|
||
|
||
// 键盘快捷键处理 | Keyboard shortcuts handling
|
||
useEffect(() => {
|
||
const handleKeyDown = (e: KeyboardEvent) => {
|
||
// 如果正在输入或有对话框打开，不处理快捷键
|
||
// Skip shortcuts if typing or dialog is open
|
||
if (
|
||
e.target instanceof HTMLInputElement ||
|
||
e.target instanceof HTMLTextAreaElement ||
|
||
renameDialog ||
|
||
deleteConfirmDialog ||
|
||
createFileDialog
|
||
) {
|
||
return;
|
||
}
|
||
|
||
// 只在内容浏览器区域处理快捷键
|
||
// Only handle shortcuts when content browser has focus
|
||
if (!containerRef.current?.contains(document.activeElement) &&
|
||
document.activeElement !== containerRef.current) {
|
||
return;
|
||
}
|
||
|
||
// F2 - 重命名 | Rename
|
||
if (e.key === 'F2' && selectedPaths.size === 1) {
|
||
e.preventDefault();
|
||
const selectedPath = Array.from(selectedPaths)[0];
|
||
const asset = assets.find(a => a.path === selectedPath);
|
||
if (asset) {
|
||
setRenameDialog({ asset, newName: asset.name });
|
||
}
|
||
}
|
||
|
||
// Delete - 删除 | Delete
|
||
if (e.key === 'Delete' && selectedPaths.size === 1) {
|
||
e.preventDefault();
|
||
const selectedPath = Array.from(selectedPaths)[0];
|
||
const asset = assets.find(a => a.path === selectedPath);
|
||
if (asset) {
|
||
setDeleteConfirmDialog(asset);
|
||
}
|
||
}
|
||
};
|
||
|
||
document.addEventListener('keydown', handleKeyDown);
|
||
return () => document.removeEventListener('keydown', handleKeyDown);
|
||
}, [selectedPaths, assets, renameDialog, deleteConfirmDialog, createFileDialog]);
|
||
|
||
const getTemplateLabel = (label: string): string => {
|
||
const mapping = templateLabels[label];
|
||
if (mapping) {
|
||
return locale === 'zh' ? mapping.zh : mapping.en;
|
||
}
|
||
return label;
|
||
};
|
||
|
||
// Build folder tree - use ref to avoid dependency cycle
|
||
const expandedFoldersRef = useRef(expandedFolders);
|
||
expandedFoldersRef.current = expandedFolders;
|
||
|
||
const buildFolderTree = useCallback(async (rootPath: string): Promise<FolderNode> => {
|
||
const currentExpanded = expandedFoldersRef.current;
|
||
|
||
const buildNode = async (path: string, name: string): Promise<FolderNode> => {
|
||
const node: FolderNode = {
|
||
name,
|
||
path,
|
||
children: [],
|
||
isExpanded: currentExpanded.has(path)
|
||
};
|
||
|
||
try {
|
||
const entries = await TauriAPI.listDirectory(path);
|
||
const folders = entries
|
||
.filter((e: DirectoryEntry) => e.is_dir && !e.name.startsWith('.'))
|
||
.sort((a: DirectoryEntry, b: DirectoryEntry) => a.name.localeCompare(b.name));
|
||
|
||
for (const folder of folders) {
|
||
if (currentExpanded.has(path)) {
|
||
node.children.push(await buildNode(folder.path, folder.name));
|
||
} else {
|
||
node.children.push({
|
||
name: folder.name,
|
||
path: folder.path,
|
||
children: [],
|
||
isExpanded: false
|
||
});
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('Failed to build folder tree:', error);
|
||
}
|
||
|
||
return node;
|
||
};
|
||
|
||
return buildNode(rootPath, 'All');
|
||
}, []);
|
||
|
||
// Load assets
|
||
const loadAssets = useCallback(async (path: string) => {
|
||
setLoading(true);
|
||
try {
|
||
const entries = await TauriAPI.listDirectory(path);
|
||
const assetItems: AssetItem[] = entries.map((entry: DirectoryEntry) => ({
|
||
name: entry.name,
|
||
path: entry.path,
|
||
type: entry.is_dir ? 'folder' as const : 'file' as const,
|
||
extension: entry.is_dir ? undefined : entry.name.split('.').pop(),
|
||
size: entry.size,
|
||
modified: entry.modified
|
||
}));
|
||
|
||
setAssets(assetItems.sort((a, b) => {
|
||
if (a.type === b.type) return a.name.localeCompare(b.name);
|
||
return a.type === 'folder' ? -1 : 1;
|
||
}));
|
||
} catch (error) {
|
||
console.error('Failed to load assets:', error);
|
||
setAssets([]);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}, []);
|
||
|
||
/**
|
||
* Refresh both assets view and folder tree
|
||
* 同时刷新资产视图和文件夹树
|
||
*
|
||
* Call this after any file system modification (create, delete, rename, move)
|
||
* to keep both the right panel (assets) and left panel (folder tree) in sync.
|
||
*/
|
||
const refreshAll = useCallback(async () => {
|
||
if (currentPath) {
|
||
await loadAssets(currentPath);
|
||
}
|
||
if (projectPath) {
|
||
buildFolderTree(projectPath).then(setFolderTree);
|
||
}
|
||
}, [currentPath, projectPath, loadAssets, buildFolderTree]);
|
||
|
||
// Initialize on mount
|
||
useEffect(() => {
|
||
if (projectPath) {
|
||
setCurrentPath(projectPath);
|
||
setExpandedFolders(new Set([projectPath]));
|
||
loadAssets(projectPath);
|
||
buildFolderTree(projectPath).then(setFolderTree);
|
||
}
|
||
// Only run on mount, not on every projectPath change
|
||
}, []);
|
||
|
||
// Handle projectPath change after initial mount
|
||
const prevProjectPath = useRef(projectPath);
|
||
useEffect(() => {
|
||
if (projectPath && projectPath !== prevProjectPath.current) {
|
||
prevProjectPath.current = projectPath;
|
||
setCurrentPath(projectPath);
|
||
setExpandedFolders(new Set([projectPath]));
|
||
loadAssets(projectPath);
|
||
buildFolderTree(projectPath).then(setFolderTree);
|
||
}
|
||
}, [projectPath, loadAssets, buildFolderTree]);
|
||
|
||
// Rebuild tree when expanded folders change
|
||
const expandedFoldersVersion = useRef(0);
|
||
useEffect(() => {
|
||
// Skip first render (handled by initialization)
|
||
if (expandedFoldersVersion.current === 0) {
|
||
expandedFoldersVersion.current = 1;
|
||
return;
|
||
}
|
||
if (projectPath) {
|
||
buildFolderTree(projectPath).then(setFolderTree);
|
||
}
|
||
}, [expandedFolders, projectPath, buildFolderTree]);
|
||
|
||
// Handle reveal path - navigate to folder and select file
|
||
const prevRevealPath = useRef<string | null>(null);
|
||
useEffect(() => {
|
||
if (revealPath && revealPath !== prevRevealPath.current && projectPath) {
|
||
prevRevealPath.current = revealPath;
|
||
|
||
// Remove timestamp query if present
|
||
const cleanPath = revealPath.split('?')[0] || revealPath;
|
||
|
||
// Get full path
|
||
const fullPath = cleanPath.startsWith('/') || cleanPath.includes(':')
|
||
? cleanPath
|
||
: `${projectPath}/${cleanPath}`;
|
||
|
||
// Get parent directory
|
||
const pathParts = fullPath.replace(/\\/g, '/').split('/');
|
||
pathParts.pop(); // Remove filename
|
||
const parentDir = pathParts.join('/');
|
||
|
||
// Expand all parent folders
|
||
const foldersToExpand = new Set<string>();
|
||
let currentFolder = parentDir;
|
||
while (currentFolder && currentFolder.length >= (projectPath?.length || 0)) {
|
||
foldersToExpand.add(currentFolder);
|
||
const parts = currentFolder.split('/');
|
||
parts.pop();
|
||
currentFolder = parts.join('/');
|
||
}
|
||
|
||
// Update expanded folders and navigate
|
||
setExpandedFolders((prev) => {
|
||
const next = new Set(prev);
|
||
foldersToExpand.forEach((f) => next.add(f));
|
||
return next;
|
||
});
|
||
|
||
// Navigate to parent folder and select the file
|
||
setCurrentPath(parentDir);
|
||
loadAssets(parentDir).then(() => {
|
||
// Select the file after assets are loaded
|
||
setSelectedPaths(new Set([fullPath]));
|
||
setLastSelectedPath(fullPath);
|
||
});
|
||
}
|
||
}, [revealPath, projectPath, loadAssets]);
|
||
|
||
// Handle folder selection in tree
|
||
const handleFolderSelect = useCallback((path: string) => {
|
||
setCurrentPath(path);
|
||
loadAssets(path);
|
||
}, [loadAssets]);
|
||
|
||
// Toggle folder expansion
|
||
const toggleFolderExpand = useCallback((path: string, e: React.MouseEvent) => {
|
||
e.stopPropagation();
|
||
setExpandedFolders(prev => {
|
||
const next = new Set(prev);
|
||
if (next.has(path)) {
|
||
next.delete(path);
|
||
} else {
|
||
next.add(path);
|
||
}
|
||
return next;
|
||
});
|
||
}, []);
|
||
|
||
// Handle moving file/folder to a new location
|
||
const handleMoveAsset = useCallback(async (sourcePath: string, targetFolderPath: string) => {
|
||
if (!sourcePath || !targetFolderPath) return;
|
||
|
||
// Get file name from source path
|
||
const fileName = sourcePath.split(/[\\/]/).pop();
|
||
if (!fileName) return;
|
||
|
||
// Build destination path
|
||
const sep = targetFolderPath.includes('\\') ? '\\' : '/';
|
||
const destPath = `${targetFolderPath}${sep}${fileName}`;
|
||
|
||
// Don't move to same location - normalize paths for comparison
|
||
const normalizedSource = sourcePath.replace(/\\/g, '/');
|
||
const normalizedTarget = targetFolderPath.replace(/\\/g, '/');
|
||
const sourceFolder = normalizedSource.substring(0, normalizedSource.lastIndexOf('/'));
|
||
if (sourceFolder === normalizedTarget) return;
|
||
|
||
// Don't move folder into itself
|
||
if (normalizedTarget.startsWith(normalizedSource + '/')) {
|
||
console.warn('Cannot move folder into itself');
|
||
return;
|
||
}
|
||
|
||
// Check if source is a file by looking in the current assets list
|
||
// 通过查看当前资产列表来检查源是否是文件
|
||
const sourceAsset = assets.find(a => a.path === sourcePath);
|
||
const isFile = sourceAsset ? sourceAsset.type === 'file' : !fileName.includes('.') === false;
|
||
const assetRegistry = Core.services.tryResolve(AssetRegistryService) as AssetRegistryService | null;
|
||
|
||
try {
|
||
// Check if file has a .meta file
|
||
// 检查文件是否有 .meta 文件
|
||
const metaPath = `${sourcePath}.meta`;
|
||
const destMetaPath = `${destPath}.meta`;
|
||
let hasMetaFile = false;
|
||
try {
|
||
hasMetaFile = await TauriAPI.pathExists(metaPath);
|
||
} catch {
|
||
// Ignore
|
||
}
|
||
|
||
// Move the file/folder first
|
||
// 首先移动文件/文件夹
|
||
await TauriAPI.renameFileOrFolder(sourcePath, destPath);
|
||
|
||
// Move .meta file if exists
|
||
// 如果存在则移动 .meta 文件
|
||
if (hasMetaFile) {
|
||
try {
|
||
await TauriAPI.renameFileOrFolder(metaPath, destMetaPath);
|
||
} catch {
|
||
// Meta file might have been moved already or failed
|
||
}
|
||
}
|
||
|
||
// For files: Update asset registry
|
||
// 对于文件：更新资产注册表
|
||
if (isFile && assetRegistry) {
|
||
// Update metaManager's internal cache (path mapping)
|
||
// 更新 metaManager 的内部缓存（路径映射）
|
||
if (hasMetaFile) {
|
||
// The meta file was moved, now update the in-memory cache
|
||
// meta 文件已移动，现在更新内存缓存
|
||
try {
|
||
// Clear old path from cache and re-register at new path
|
||
// 从缓存中清除旧路径并在新路径重新注册
|
||
await assetRegistry.unregisterAsset(sourcePath);
|
||
await assetRegistry.registerAsset(destPath);
|
||
} catch (e) {
|
||
console.warn('Failed to update asset registry after move:', e);
|
||
}
|
||
} else {
|
||
// No meta file - check if destination is managed, generate .meta if so
|
||
// 没有 meta 文件 - 检查目标是否在被管理的目录中，如果是则生成 .meta
|
||
const isDestManaged = isPathInManagedDirectory(destPath, projectPath);
|
||
if (isDestManaged) {
|
||
// Register asset at new location - generates .meta if needed
|
||
// 在新位置注册资产 - 如果需要会生成 .meta
|
||
await assetRegistry.registerAsset(destPath);
|
||
}
|
||
}
|
||
}
|
||
|
||
// Refresh current view
|
||
if (currentPath) {
|
||
await loadAssets(currentPath);
|
||
}
|
||
|
||
// Refresh folder tree
|
||
if (projectPath) {
|
||
buildFolderTree(projectPath).then(setFolderTree);
|
||
}
|
||
|
||
console.log(`Moved ${sourcePath} to ${destPath}`);
|
||
} catch (error) {
|
||
console.error('Failed to move file:', error);
|
||
}
|
||
}, [currentPath, projectPath, loadAssets, buildFolderTree, assets]);
|
||
|
||
// Folder drag handlers
|
||
const handleFolderDragOver = useCallback((e: React.DragEvent, folderPath: string) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
setDragOverFolder(folderPath);
|
||
}, []);
|
||
|
||
const handleFolderDragLeave = useCallback((e: React.DragEvent) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
setDragOverFolder(null);
|
||
}, []);
|
||
|
||
const handleFolderDrop = useCallback(async (e: React.DragEvent, targetFolderPath: string) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
setDragOverFolder(null);
|
||
|
||
const sourcePath = e.dataTransfer.getData('asset-path');
|
||
if (sourcePath) {
|
||
await handleMoveAsset(sourcePath, targetFolderPath);
|
||
}
|
||
}, [handleMoveAsset]);
|
||
|
||
// Handle asset click
|
||
const handleAssetClick = useCallback((asset: AssetItem, e: React.MouseEvent) => {
|
||
// 聚焦容器以启用键盘快捷键 | Focus container to enable keyboard shortcuts
|
||
containerRef.current?.focus();
|
||
|
||
if (e.shiftKey && lastSelectedPath) {
|
||
const lastIndex = assets.findIndex(a => a.path === lastSelectedPath);
|
||
const currentIndex = assets.findIndex(a => a.path === asset.path);
|
||
if (lastIndex !== -1 && currentIndex !== -1) {
|
||
const start = Math.min(lastIndex, currentIndex);
|
||
const end = Math.max(lastIndex, currentIndex);
|
||
const rangePaths = assets.slice(start, end + 1).map(a => a.path);
|
||
setSelectedPaths(new Set(rangePaths));
|
||
}
|
||
} else if (e.ctrlKey || e.metaKey) {
|
||
const newSelected = new Set(selectedPaths);
|
||
if (newSelected.has(asset.path)) {
|
||
newSelected.delete(asset.path);
|
||
} else {
|
||
newSelected.add(asset.path);
|
||
}
|
||
setSelectedPaths(newSelected);
|
||
setLastSelectedPath(asset.path);
|
||
} else {
|
||
setSelectedPaths(new Set([asset.path]));
|
||
setLastSelectedPath(asset.path);
|
||
}
|
||
|
||
messageHub?.publish('asset-file:selected', {
|
||
fileInfo: {
|
||
name: asset.name,
|
||
path: asset.path,
|
||
extension: asset.extension,
|
||
isDirectory: asset.type === 'folder'
|
||
}
|
||
});
|
||
}, [assets, lastSelectedPath, selectedPaths, messageHub]);
|
||
|
||
// Handle asset double click
|
||
const handleAssetDoubleClick = useCallback(async (asset: AssetItem) => {
|
||
if (asset.type === 'folder') {
|
||
setCurrentPath(asset.path);
|
||
loadAssets(asset.path);
|
||
setExpandedFolders(prev => new Set([...prev, asset.path]));
|
||
} else {
|
||
const ext = asset.extension?.toLowerCase();
|
||
if (ext === 'ecs' && onOpenScene) {
|
||
onOpenScene(asset.path);
|
||
return;
|
||
}
|
||
|
||
// 脚本文件使用配置的编辑器打开
|
||
// Open script files with configured editor
|
||
if (ext === 'ts' || ext === 'tsx' || ext === 'js' || ext === 'jsx') {
|
||
const settings = SettingsService.getInstance();
|
||
const editorCommand = settings.getScriptEditorCommand();
|
||
|
||
if (editorCommand) {
|
||
// 使用项目路径，如果没有则使用文件所在目录
|
||
// Use project path, or file's parent directory if not available
|
||
const workingDir = projectPath || asset.path.substring(0, asset.path.lastIndexOf('\\')) || asset.path.substring(0, asset.path.lastIndexOf('/'));
|
||
try {
|
||
await TauriAPI.openWithEditor(workingDir, editorCommand, asset.path);
|
||
return;
|
||
} catch (error) {
|
||
console.error('Failed to open with editor:', error);
|
||
// 如果失败，回退到系统默认应用
|
||
// Fall back to system default app if failed
|
||
}
|
||
}
|
||
}
|
||
|
||
if (fileActionRegistry) {
|
||
const handled = await fileActionRegistry.handleDoubleClick(asset.path);
|
||
if (handled) return;
|
||
}
|
||
|
||
try {
|
||
await TauriAPI.openFileWithSystemApp(asset.path);
|
||
} catch (error) {
|
||
console.error('Failed to open file:', error);
|
||
}
|
||
}
|
||
}, [loadAssets, onOpenScene, fileActionRegistry, projectPath]);
|
||
|
||
// Handle context menu
|
||
const handleContextMenu = useCallback((e: React.MouseEvent, asset?: AssetItem) => {
|
||
e.preventDefault();
|
||
setContextMenu({
|
||
position: { x: e.clientX, y: e.clientY },
|
||
asset: asset || null,
|
||
isBackground: !asset
|
||
});
|
||
}, []);
|
||
|
||
// Handle rename
|
||
const handleRename = useCallback(async (asset: AssetItem, newName: string) => {
|
||
if (!newName.trim() || newName === asset.name) {
|
||
setRenameDialog(null);
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const lastSlash = Math.max(asset.path.lastIndexOf('/'), asset.path.lastIndexOf('\\'));
|
||
const parentPath = asset.path.substring(0, lastSlash);
|
||
const newPath = `${parentPath}/${newName}`;
|
||
|
||
// Update AssetMetaManager to preserve GUID | 更新 AssetMetaManager 以保持 GUID 不变
|
||
const assetRegistry = Core.services.tryResolve(AssetRegistryService) as AssetRegistryService | null;
|
||
if (assetRegistry && asset.type !== 'folder') {
|
||
await assetRegistry.metaManager.handleAssetRename(asset.path, newPath);
|
||
}
|
||
|
||
await TauriAPI.renameFileOrFolder(asset.path, newPath);
|
||
|
||
// Refresh asset registry | 刷新资产注册表
|
||
if (assetRegistry && asset.type !== 'folder') {
|
||
await assetRegistry.refreshAsset(newPath);
|
||
}
|
||
|
||
// Refresh both assets view and folder tree
|
||
await refreshAll();
|
||
|
||
setRenameDialog(null);
|
||
} catch (error) {
|
||
console.error('Failed to rename:', error);
|
||
}
|
||
}, [refreshAll]);
|
||
|
||
// Handle delete
|
||
const handleDelete = useCallback(async (asset: AssetItem) => {
|
||
try {
|
||
const deletedPath = asset.path;
|
||
|
||
if (asset.type === 'folder') {
|
||
await TauriAPI.deleteFolder(asset.path);
|
||
// Also delete folder meta file if exists | 同时删除文件夹的 meta 文件
|
||
try {
|
||
await TauriAPI.deleteFile(`${asset.path}.meta`);
|
||
} catch {
|
||
// Meta file may not exist, ignore | meta 文件可能不存在，忽略
|
||
}
|
||
} else {
|
||
await TauriAPI.deleteFile(asset.path);
|
||
// Also delete corresponding meta file if exists | 同时删除对应的 meta 文件
|
||
try {
|
||
await TauriAPI.deleteFile(`${asset.path}.meta`);
|
||
} catch {
|
||
// Meta file may not exist, ignore | meta 文件可能不存在，忽略
|
||
}
|
||
}
|
||
|
||
// Refresh both assets view and folder tree
|
||
await refreshAll();
|
||
|
||
// Notify that a file was deleted | 通知文件已删除
|
||
messageHub?.publish('file:deleted', { path: deletedPath });
|
||
|
||
setDeleteConfirmDialog(null);
|
||
} catch (error) {
|
||
console.error('Failed to delete:', error);
|
||
}
|
||
}, [refreshAll, messageHub]);
|
||
|
||
// Get breadcrumbs
|
||
const getBreadcrumbs = useCallback(() => {
|
||
if (!currentPath || !projectPath) return [];
|
||
|
||
const relative = currentPath.replace(projectPath, '');
|
||
const parts = relative.split(/[/\\]/).filter(p => p);
|
||
|
||
const crumbs = [{ name: 'All', path: projectPath }];
|
||
crumbs.push({ name: 'Content', path: projectPath });
|
||
|
||
let accPath = projectPath;
|
||
for (const part of parts) {
|
||
accPath = `${accPath}/${part}`;
|
||
crumbs.push({ name: part, path: accPath });
|
||
}
|
||
|
||
return crumbs;
|
||
}, [currentPath, projectPath]);
|
||
|
||
// Get file icon
|
||
const getFileIcon = useCallback((asset: AssetItem, size: number = 48) => {
|
||
if (asset.type === 'folder') {
|
||
return <Folder size={size} className="asset-thumbnail-icon folder" />;
|
||
}
|
||
|
||
const ext = asset.extension?.toLowerCase();
|
||
switch (ext) {
|
||
case 'ecs':
|
||
return <File size={size} className="asset-thumbnail-icon scene" />;
|
||
case 'btree':
|
||
return <FileText size={size} className="asset-thumbnail-icon btree" />;
|
||
case 'ts':
|
||
case 'tsx':
|
||
case 'js':
|
||
case 'jsx':
|
||
return <FileCode size={size} className="asset-thumbnail-icon code" />;
|
||
case 'json':
|
||
return <FileJson size={size} className="asset-thumbnail-icon json" />;
|
||
case 'png':
|
||
case 'jpg':
|
||
case 'jpeg':
|
||
case 'gif':
|
||
case 'webp':
|
||
return <FileImage size={size} className="asset-thumbnail-icon image" />;
|
||
default:
|
||
return <File size={size} className="asset-thumbnail-icon" />;
|
||
}
|
||
}, []);
|
||
|
||
// Get context menu items
|
||
const getContextMenuItems = useCallback((asset: AssetItem | null): ContextMenuItem[] => {
|
||
const items: ContextMenuItem[] = [];
|
||
const isCurrentPathManaged = isPathInManagedDirectory(currentPath || '', projectPath);
|
||
|
||
if (!asset) {
|
||
// Show warning header if current path is not managed
|
||
if (!isCurrentPathManaged && currentPath) {
|
||
items.push({
|
||
label: t.unmanagedWarningTitle,
|
||
icon: <AlertTriangle size={16} className="warning-icon" />,
|
||
disabled: true,
|
||
onClick: () => {}
|
||
});
|
||
items.push({ label: '', separator: true, onClick: () => {} });
|
||
}
|
||
|
||
items.push({
|
||
label: t.newFolder,
|
||
icon: <FolderClosed size={16} />,
|
||
onClick: async () => {
|
||
if (!currentPath) return;
|
||
const folderName = `New Folder`;
|
||
const folderPath = `${currentPath}/${folderName}`;
|
||
try {
|
||
await TauriAPI.createDirectory(folderPath);
|
||
// Refresh both assets view and folder tree
|
||
await refreshAll();
|
||
} catch (error) {
|
||
console.error('Failed to create folder:', error);
|
||
}
|
||
}
|
||
});
|
||
|
||
if (fileCreationTemplates.length > 0) {
|
||
items.push({ label: '', separator: true, onClick: () => {} });
|
||
|
||
for (const template of fileCreationTemplates) {
|
||
const localizedLabel = getTemplateLabel(template.label);
|
||
// Add warning indicator for unmanaged directories
|
||
const warningIcon = !isCurrentPathManaged ? (
|
||
<span className="menu-item-with-warning">
|
||
{getIconComponent(template.icon, 16)}
|
||
<AlertTriangle size={10} className="warning-badge" />
|
||
</span>
|
||
) : getIconComponent(template.icon, 16);
|
||
|
||
items.push({
|
||
label: localizedLabel,
|
||
icon: warningIcon,
|
||
onClick: () => {
|
||
setContextMenu(null);
|
||
if (currentPath) {
|
||
setCreateFileDialog({
|
||
parentPath: currentPath,
|
||
template
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
items.push({ label: '', separator: true, onClick: () => {} });
|
||
|
||
items.push({
|
||
label: locale === 'zh' ? '在资源管理器中显示' : 'Show in Explorer',
|
||
icon: <ExternalLink size={16} />,
|
||
onClick: async () => {
|
||
if (currentPath) {
|
||
try {
|
||
await TauriAPI.showInFolder(currentPath);
|
||
} catch (error) {
|
||
console.error('Failed to show in folder:', error);
|
||
}
|
||
}
|
||
setContextMenu(null);
|
||
}
|
||
});
|
||
|
||
items.push({
|
||
label: locale === 'zh' ? '刷新' : 'Refresh',
|
||
icon: <RefreshCw size={16} />,
|
||
onClick: async () => {
|
||
if (currentPath) {
|
||
await loadAssets(currentPath);
|
||
}
|
||
setContextMenu(null);
|
||
}
|
||
});
|
||
|
||
return items;
|
||
}
|
||
|
||
// Asset context menu
|
||
if (asset.type === 'file') {
|
||
items.push({
|
||
label: locale === 'zh' ? '打开' : 'Open',
|
||
icon: <File size={16} />,
|
||
onClick: () => handleAssetDoubleClick(asset)
|
||
});
|
||
|
||
items.push({ label: '', separator: true, onClick: () => {} });
|
||
|
||
// 保存
|
||
items.push({
|
||
label: locale === 'zh' ? '保存' : 'Save',
|
||
icon: <Save size={16} />,
|
||
shortcut: 'Ctrl+S',
|
||
onClick: () => {
|
||
console.log('Save file:', asset.path);
|
||
}
|
||
});
|
||
}
|
||
|
||
// 重命名
|
||
items.push({
|
||
label: locale === 'zh' ? '重命名' : 'Rename',
|
||
icon: <Edit3 size={16} />,
|
||
shortcut: 'F2',
|
||
onClick: () => {
|
||
setRenameDialog({ asset, newName: asset.name });
|
||
setContextMenu(null);
|
||
}
|
||
});
|
||
|
||
// 批量重命名
|
||
items.push({
|
||
label: locale === 'zh' ? '批量重命名' : 'Batch Rename',
|
||
icon: <Edit3 size={16} />,
|
||
shortcut: 'Shift+F2',
|
||
disabled: true,
|
||
onClick: () => {
|
||
console.log('Batch rename');
|
||
}
|
||
});
|
||
|
||
// 复制
|
||
items.push({
|
||
label: locale === 'zh' ? '复制' : 'Duplicate',
|
||
icon: <Clipboard size={16} />,
|
||
shortcut: 'Ctrl+D',
|
||
onClick: () => {
|
||
console.log('Duplicate:', asset.path);
|
||
}
|
||
});
|
||
|
||
// 删除
|
||
items.push({
|
||
label: locale === 'zh' ? '删除' : 'Delete',
|
||
icon: <Trash2 size={16} />,
|
||
shortcut: 'Delete',
|
||
onClick: () => {
|
||
setDeleteConfirmDialog(asset);
|
||
setContextMenu(null);
|
||
}
|
||
});
|
||
|
||
items.push({ label: '', separator: true, onClick: () => {} });
|
||
|
||
// 资产操作子菜单
|
||
items.push({
|
||
label: locale === 'zh' ? '资产操作' : 'Asset Actions',
|
||
icon: <Settings size={16} />,
|
||
onClick: () => {},
|
||
children: [
|
||
{
|
||
label: locale === 'zh' ? '重新导入' : 'Reimport',
|
||
icon: <RefreshCw size={16} />,
|
||
onClick: () => {
|
||
console.log('Reimport asset:', asset.path);
|
||
}
|
||
},
|
||
{
|
||
label: locale === 'zh' ? '导出...' : 'Export...',
|
||
icon: <Package size={16} />,
|
||
onClick: () => {
|
||
console.log('Export asset:', asset.path);
|
||
}
|
||
},
|
||
{ label: '', separator: true, onClick: () => {} },
|
||
{
|
||
label: locale === 'zh' ? '迁移资产' : 'Migrate Asset',
|
||
icon: <Folder size={16} />,
|
||
onClick: () => {
|
||
console.log('Migrate asset:', asset.path);
|
||
}
|
||
}
|
||
]
|
||
});
|
||
|
||
// 资产本地化子菜单
|
||
items.push({
|
||
label: locale === 'zh' ? '资产本地化' : 'Asset Localization',
|
||
icon: <Globe size={16} />,
|
||
onClick: () => {},
|
||
children: [
|
||
{
|
||
label: locale === 'zh' ? '创建本地化资产' : 'Create Localized Asset',
|
||
onClick: () => {
|
||
console.log('Create localized asset:', asset.path);
|
||
}
|
||
},
|
||
{
|
||
label: locale === 'zh' ? '导入翻译' : 'Import Translation',
|
||
onClick: () => {
|
||
console.log('Import translation:', asset.path);
|
||
}
|
||
},
|
||
{
|
||
label: locale === 'zh' ? '导出翻译' : 'Export Translation',
|
||
onClick: () => {
|
||
console.log('Export translation:', asset.path);
|
||
}
|
||
}
|
||
]
|
||
});
|
||
|
||
items.push({ label: '', separator: true, onClick: () => {} });
|
||
|
||
// 标签管理
|
||
items.push({
|
||
label: locale === 'zh' ? '管理标签' : 'Manage Tags',
|
||
icon: <Tag size={16} />,
|
||
shortcut: 'Ctrl+T',
|
||
onClick: () => {
|
||
console.log('Manage tags:', asset.path);
|
||
}
|
||
});
|
||
|
||
items.push({ label: '', separator: true, onClick: () => {} });
|
||
|
||
// 路径复制选项
|
||
items.push({
|
||
label: locale === 'zh' ? '复制引用' : 'Copy Reference',
|
||
icon: <Link size={16} />,
|
||
shortcut: 'Ctrl+C',
|
||
onClick: () => {
|
||
navigator.clipboard.writeText(asset.path);
|
||
}
|
||
});
|
||
|
||
items.push({
|
||
label: locale === 'zh' ? '拷贝Object路径' : 'Copy Object Path',
|
||
icon: <Copy size={16} />,
|
||
shortcut: 'Ctrl+Shift+C',
|
||
onClick: () => {
|
||
const objectPath = asset.path.replace(/\\/g, '/');
|
||
navigator.clipboard.writeText(objectPath);
|
||
}
|
||
});
|
||
|
||
items.push({
|
||
label: locale === 'zh' ? '拷贝包路径' : 'Copy Package Path',
|
||
icon: <Package size={16} />,
|
||
shortcut: 'Ctrl+Alt+C',
|
||
onClick: () => {
|
||
const packagePath = '/' + asset.path.replace(/\\/g, '/').split('/').slice(-2).join('/');
|
||
navigator.clipboard.writeText(packagePath);
|
||
}
|
||
});
|
||
|
||
items.push({ label: '', separator: true, onClick: () => {} });
|
||
|
||
// 引用查看器
|
||
items.push({
|
||
label: locale === 'zh' ? '引用查看器' : 'Reference Viewer',
|
||
icon: <FileSearch size={16} />,
|
||
shortcut: 'Alt+Shift+R',
|
||
onClick: () => {
|
||
console.log('Open reference viewer:', asset.path);
|
||
}
|
||
});
|
||
|
||
items.push({
|
||
label: locale === 'zh' ? '尺寸信息图' : 'Size Map',
|
||
icon: <FileSearch size={16} />,
|
||
shortcut: 'Alt+Shift+D',
|
||
onClick: () => {
|
||
console.log('Show size map:', asset.path);
|
||
}
|
||
});
|
||
|
||
items.push({ label: '', separator: true, onClick: () => {} });
|
||
|
||
// 在文件管理器中显示
|
||
items.push({
|
||
label: locale === 'zh' ? '在文件管理器中显示' : 'Show in Explorer',
|
||
icon: <ExternalLink size={16} />,
|
||
onClick: async () => {
|
||
try {
|
||
console.log('[ContentBrowser] showInFolder path:', asset.path);
|
||
await TauriAPI.showInFolder(asset.path);
|
||
} catch (error) {
|
||
console.error('Failed to show in folder:', error, 'Path:', asset.path);
|
||
}
|
||
}
|
||
});
|
||
|
||
return items;
|
||
}, [currentPath, fileCreationTemplates, handleAssetDoubleClick, loadAssets, locale, t.newFolder, t.newPrefix, t.unmanagedWarningTitle, setRenameDialog, setDeleteConfirmDialog, setContextMenu, setCreateFileDialog, projectPath]);
|
||
|
||
/**
|
||
* Handle folder tree context menu
|
||
* 处理文件夹树右键菜单
|
||
*/
|
||
const handleFolderTreeContextMenu = useCallback((e: React.MouseEvent, node: FolderNode) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
|
||
const isRoot = node.path === projectPath;
|
||
const folderName = node.name === 'All' ? (projectPath?.split(/[/\\]/).pop() || 'Project') : node.name;
|
||
|
||
const items: ContextMenuItem[] = [];
|
||
|
||
// New subfolder
|
||
items.push({
|
||
label: t.newSubfolder,
|
||
icon: <FolderClosed size={16} />,
|
||
onClick: async () => {
|
||
const folderPath = `${node.path}/New Folder`;
|
||
try {
|
||
await TauriAPI.createDirectory(folderPath);
|
||
// Expand the parent folder to show the new subfolder
|
||
setExpandedFolders(prev => new Set([...prev, node.path]));
|
||
await refreshAll();
|
||
} catch (error) {
|
||
console.error('Failed to create subfolder:', error);
|
||
}
|
||
}
|
||
});
|
||
|
||
items.push({ label: '', separator: true, onClick: () => {} });
|
||
|
||
// Rename (not for root)
|
||
if (!isRoot) {
|
||
items.push({
|
||
label: t.rename,
|
||
icon: <Edit3 size={16} />,
|
||
onClick: () => {
|
||
setRenameDialog({
|
||
asset: {
|
||
name: folderName,
|
||
path: node.path,
|
||
type: 'folder'
|
||
},
|
||
newName: folderName
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
// Delete (not for root)
|
||
if (!isRoot) {
|
||
items.push({
|
||
label: t.delete,
|
||
icon: <Trash2 size={16} />,
|
||
onClick: () => {
|
||
setDeleteConfirmDialog({
|
||
name: folderName,
|
||
path: node.path,
|
||
type: 'folder'
|
||
});
|
||
}
|
||
});
|
||
} else {
|
||
items.push({
|
||
label: t.cannotDeleteRoot,
|
||
icon: <Trash2 size={16} />,
|
||
disabled: true,
|
||
onClick: () => {}
|
||
});
|
||
}
|
||
|
||
items.push({ label: '', separator: true, onClick: () => {} });
|
||
|
||
// Copy path
|
||
items.push({
|
||
label: t.copyPath,
|
||
icon: <Clipboard size={16} />,
|
||
onClick: async () => {
|
||
try {
|
||
await navigator.clipboard.writeText(node.path);
|
||
} catch (error) {
|
||
console.error('Failed to copy path:', error);
|
||
}
|
||
}
|
||
});
|
||
|
||
// Show in explorer
|
||
items.push({
|
||
label: t.openInExplorer,
|
||
icon: <ExternalLink size={16} />,
|
||
onClick: async () => {
|
||
try {
|
||
await TauriAPI.showInFolder(node.path);
|
||
} catch (error) {
|
||
console.error('Failed to show in explorer:', error);
|
||
}
|
||
}
|
||
});
|
||
|
||
setFolderTreeContextMenu({
|
||
position: { x: e.clientX, y: e.clientY },
|
||
items
|
||
});
|
||
}, [projectPath, t, refreshAll, setRenameDialog, setDeleteConfirmDialog, setFolderTreeContextMenu, setExpandedFolders]);
|
||
|
||
// Render folder tree node
|
||
const renderFolderNode = useCallback((node: FolderNode, depth: number = 0) => {
|
||
const isSelected = currentPath === node.path;
|
||
const isExpanded = expandedFolders.has(node.path);
|
||
const hasChildren = node.children.length > 0;
|
||
const isRootManaged = isRootManagedDirectory(node.path, projectPath);
|
||
const isInManaged = isPathInManagedDirectory(node.path, projectPath);
|
||
const isDragOver = dragOverFolder === node.path;
|
||
|
||
return (
|
||
<div key={node.path}>
|
||
<div
|
||
className={`folder-tree-item ${isSelected ? 'selected' : ''} ${isRootManaged ? 'managed-root' : ''} ${isDragOver ? 'drag-over' : ''}`}
|
||
style={{ paddingLeft: `${depth * 16 + 8}px` }}
|
||
onClick={() => handleFolderSelect(node.path)}
|
||
onContextMenu={(e) => handleFolderTreeContextMenu(e, node)}
|
||
title={isRootManaged ? t.managedDirectoryTooltip : undefined}
|
||
onDragOver={(e) => handleFolderDragOver(e, node.path)}
|
||
onDragLeave={handleFolderDragLeave}
|
||
onDrop={(e) => handleFolderDrop(e, node.path)}
|
||
>
|
||
<span
|
||
className="folder-tree-expand"
|
||
onClick={(e) => toggleFolderExpand(node.path, e)}
|
||
>
|
||
{hasChildren ? (
|
||
isExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />
|
||
) : (
|
||
<span style={{ width: 14 }} />
|
||
)}
|
||
</span>
|
||
<span className="folder-tree-icon">
|
||
{isRootManaged ? (
|
||
<Database size={14} className="managed-icon" />
|
||
) : (
|
||
isExpanded ? <FolderOpen size={14} /> : <FolderClosed size={14} />
|
||
)}
|
||
</span>
|
||
<span className="folder-tree-name">{node.name}</span>
|
||
{isRootManaged && (
|
||
<span className="managed-badge" title={t.managedDirectoryTooltip}>GUID</span>
|
||
)}
|
||
</div>
|
||
{isExpanded && node.children.map(child => renderFolderNode(child, depth + 1))}
|
||
</div>
|
||
);
|
||
}, [currentPath, expandedFolders, handleFolderSelect, handleFolderTreeContextMenu, toggleFolderExpand, projectPath, t.managedDirectoryTooltip, dragOverFolder, handleFolderDragOver, handleFolderDragLeave, handleFolderDrop]);
|
||
|
||
// Filter assets by search
|
||
const filteredAssets = searchQuery.trim()
|
||
? assets.filter(a => a.name.toLowerCase().includes(searchQuery.toLowerCase()))
|
||
: assets;
|
||
|
||
const breadcrumbs = getBreadcrumbs();
|
||
|
||
if (!projectPath) {
|
||
return (
|
||
<div className="content-browser">
|
||
<div className="content-browser-empty">
|
||
<p>{t.noProject}</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div
|
||
ref={containerRef}
|
||
className={`content-browser ${isDrawer ? 'is-drawer' : ''}`}
|
||
tabIndex={-1}
|
||
>
|
||
{/* Left Panel - Folder Tree */}
|
||
<div className="content-browser-left">
|
||
{/* Favorites Section */}
|
||
<div className="cb-section">
|
||
<div
|
||
className="cb-section-header"
|
||
onClick={() => setFavoritesExpanded(!favoritesExpanded)}
|
||
>
|
||
{favoritesExpanded ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
|
||
<span>{t.favorites}</span>
|
||
<button className="cb-section-btn" onClick={(e) => e.stopPropagation()}>
|
||
<Search size={12} />
|
||
</button>
|
||
</div>
|
||
{favoritesExpanded && (
|
||
<div className="cb-section-content">
|
||
{favorites.length === 0 ? (
|
||
<div className="cb-section-empty">
|
||
{/* Empty favorites */}
|
||
</div>
|
||
) : (
|
||
favorites.map(fav => (
|
||
<div key={fav} className="folder-tree-item">
|
||
<FolderClosed size={14} />
|
||
<span>{fav.split('/').pop()}</span>
|
||
</div>
|
||
))
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Folder Tree */}
|
||
<div className="cb-folder-tree">
|
||
{folderTree && renderFolderNode(folderTree)}
|
||
</div>
|
||
|
||
{/* Collections Section */}
|
||
<div className="cb-section">
|
||
<div
|
||
className="cb-section-header"
|
||
onClick={() => setCollectionsExpanded(!collectionsExpanded)}
|
||
>
|
||
{collectionsExpanded ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
|
||
<span>{t.collections}</span>
|
||
<div className="cb-section-actions">
|
||
<button className="cb-section-btn" onClick={(e) => e.stopPropagation()}>
|
||
<Plus size={12} />
|
||
</button>
|
||
<button className="cb-section-btn" onClick={(e) => e.stopPropagation()}>
|
||
<Search size={12} />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
{collectionsExpanded && (
|
||
<div className="cb-section-content">
|
||
{/* Collections list */}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Right Panel - Content Area */}
|
||
<div className="content-browser-right">
|
||
{/* Top Toolbar */}
|
||
<div className="cb-toolbar">
|
||
<div className="cb-toolbar-left">
|
||
<button className="cb-toolbar-btn primary">
|
||
<Plus size={14} />
|
||
<span>{t.add}</span>
|
||
</button>
|
||
<button className="cb-toolbar-btn">
|
||
<Download size={14} />
|
||
<span>{t.import}</span>
|
||
</button>
|
||
<button className="cb-toolbar-btn">
|
||
<Save size={14} />
|
||
<span>{t.saveAll}</span>
|
||
</button>
|
||
</div>
|
||
|
||
{/* Breadcrumb Navigation */}
|
||
<div className="cb-breadcrumb">
|
||
{breadcrumbs.map((crumb, index) => (
|
||
<span key={crumb.path} className="cb-breadcrumb-item">
|
||
{index > 0 && <ChevronRight size={12} className="cb-breadcrumb-sep" />}
|
||
<span
|
||
className="cb-breadcrumb-link"
|
||
onClick={() => handleFolderSelect(crumb.path)}
|
||
>
|
||
{crumb.name}
|
||
</span>
|
||
</span>
|
||
))}
|
||
</div>
|
||
|
||
<div className="cb-toolbar-right">
|
||
{isDrawer && onDockInLayout && (
|
||
<button
|
||
className="cb-toolbar-btn dock-btn"
|
||
onClick={onDockInLayout}
|
||
title={t.dockInLayout}
|
||
>
|
||
<PanelRightClose size={14} />
|
||
<span>{t.dockInLayout}</span>
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Search Bar */}
|
||
<div className="cb-search-bar">
|
||
<button className="cb-filter-btn">
|
||
<SlidersHorizontal size={14} />
|
||
<ChevronDown size={10} />
|
||
</button>
|
||
<div className="cb-search-input-wrapper">
|
||
<Search size={14} className="cb-search-icon" />
|
||
<input
|
||
type="text"
|
||
className="cb-search-input"
|
||
placeholder={`${t.search} ${breadcrumbs[breadcrumbs.length - 1]?.name || ''}`}
|
||
value={searchQuery}
|
||
onChange={(e) => setSearchQuery(e.target.value)}
|
||
/>
|
||
</div>
|
||
<div className="cb-view-options">
|
||
<button
|
||
className={`cb-view-btn ${viewMode === 'grid' ? 'active' : ''}`}
|
||
onClick={() => setViewMode('grid')}
|
||
>
|
||
<LayoutGrid size={14} />
|
||
</button>
|
||
<button
|
||
className={`cb-view-btn ${viewMode === 'list' ? 'active' : ''}`}
|
||
onClick={() => setViewMode('list')}
|
||
>
|
||
<List size={14} />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Asset Grid */}
|
||
<div
|
||
className={`cb-asset-grid ${viewMode}`}
|
||
onContextMenu={(e) => handleContextMenu(e)}
|
||
>
|
||
{loading ? (
|
||
<div className="cb-loading">Loading...</div>
|
||
) : filteredAssets.length === 0 ? (
|
||
<div className="cb-empty">{t.empty}</div>
|
||
) : (
|
||
filteredAssets.map(asset => {
|
||
const isDragOverAsset = asset.type === 'folder' && dragOverFolder === asset.path;
|
||
return (
|
||
<div
|
||
key={asset.path}
|
||
className={`cb-asset-item ${selectedPaths.has(asset.path) ? 'selected' : ''} ${isDragOverAsset ? 'drag-over' : ''}`}
|
||
onClick={(e) => handleAssetClick(asset, e)}
|
||
onDoubleClick={() => handleAssetDoubleClick(asset)}
|
||
onContextMenu={(e) => {
|
||
e.stopPropagation();
|
||
handleContextMenu(e, asset);
|
||
}}
|
||
draggable
|
||
onDragStart={(e) => {
|
||
e.dataTransfer.setData('asset-path', asset.path);
|
||
e.dataTransfer.setData('text/plain', asset.path);
|
||
// Add GUID for files
|
||
if (asset.type === 'file') {
|
||
const assetRegistry = Core.services.tryResolve(AssetRegistryService) as AssetRegistryService | null;
|
||
if (assetRegistry) {
|
||
const relativePath = assetRegistry.absoluteToRelative(asset.path);
|
||
if (relativePath) {
|
||
const guid = assetRegistry.getGuidByPath(relativePath);
|
||
if (guid) {
|
||
e.dataTransfer.setData('asset-guid', guid);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}}
|
||
onDragOver={(e) => {
|
||
if (asset.type === 'folder') {
|
||
handleFolderDragOver(e, asset.path);
|
||
}
|
||
}}
|
||
onDragLeave={(e) => {
|
||
if (asset.type === 'folder') {
|
||
handleFolderDragLeave(e);
|
||
}
|
||
}}
|
||
onDrop={(e) => {
|
||
if (asset.type === 'folder') {
|
||
handleFolderDrop(e, asset.path);
|
||
}
|
||
}}
|
||
>
|
||
<div className="cb-asset-thumbnail">
|
||
{getFileIcon(asset)}
|
||
</div>
|
||
<div className="cb-asset-info">
|
||
<div className="cb-asset-name" title={asset.name}>
|
||
{asset.name}
|
||
</div>
|
||
<div className="cb-asset-type">
|
||
{getAssetTypeName(asset)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
})
|
||
)}
|
||
</div>
|
||
|
||
{/* Status Bar */}
|
||
<div className="cb-status-bar">
|
||
<span>{filteredAssets.length} {t.items}</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Context Menu */}
|
||
{contextMenu && (
|
||
<ContextMenu
|
||
items={getContextMenuItems(contextMenu.asset)}
|
||
position={contextMenu.position}
|
||
onClose={() => setContextMenu(null)}
|
||
/>
|
||
)}
|
||
|
||
{/* Folder Tree Context Menu */}
|
||
{folderTreeContextMenu && (
|
||
<ContextMenu
|
||
items={folderTreeContextMenu.items}
|
||
position={folderTreeContextMenu.position}
|
||
onClose={() => setFolderTreeContextMenu(null)}
|
||
/>
|
||
)}
|
||
|
||
{/* Rename Dialog */}
|
||
{renameDialog && (
|
||
<div className="cb-dialog-overlay" onClick={() => setRenameDialog(null)}>
|
||
<div className="cb-dialog" onClick={(e) => e.stopPropagation()}>
|
||
<div className="cb-dialog-header">
|
||
<h3>{locale === 'zh' ? '重命名' : 'Rename'}</h3>
|
||
</div>
|
||
<div className="cb-dialog-body">
|
||
<input
|
||
type="text"
|
||
value={renameDialog.newName}
|
||
onChange={(e) => setRenameDialog({ ...renameDialog, newName: e.target.value })}
|
||
onKeyDown={(e) => {
|
||
if (e.key === 'Enter') handleRename(renameDialog.asset, renameDialog.newName);
|
||
if (e.key === 'Escape') setRenameDialog(null);
|
||
}}
|
||
autoFocus
|
||
/>
|
||
</div>
|
||
<div className="cb-dialog-footer">
|
||
<button className="cb-btn" onClick={() => setRenameDialog(null)}>
|
||
{locale === 'zh' ? '取消' : 'Cancel'}
|
||
</button>
|
||
<button
|
||
className="cb-btn primary"
|
||
onClick={() => handleRename(renameDialog.asset, renameDialog.newName)}
|
||
>
|
||
{locale === 'zh' ? '确定' : 'OK'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Delete Confirm Dialog */}
|
||
{deleteConfirmDialog && (
|
||
<div className="cb-dialog-overlay" onClick={() => setDeleteConfirmDialog(null)}>
|
||
<div className="cb-dialog" onClick={(e) => e.stopPropagation()}>
|
||
<div className="cb-dialog-header">
|
||
<h3>{locale === 'zh' ? '确认删除' : 'Confirm Delete'}</h3>
|
||
</div>
|
||
<div className="cb-dialog-body">
|
||
<p>
|
||
{locale === 'zh'
|
||
? `确定要删除 "${deleteConfirmDialog.name}" 吗？`
|
||
: `Delete "${deleteConfirmDialog.name}"?`}
|
||
</p>
|
||
</div>
|
||
<div className="cb-dialog-footer">
|
||
<button className="cb-btn" onClick={() => setDeleteConfirmDialog(null)}>
|
||
{locale === 'zh' ? '取消' : 'Cancel'}
|
||
</button>
|
||
<button
|
||
className="cb-btn danger"
|
||
onClick={() => handleDelete(deleteConfirmDialog)}
|
||
>
|
||
{locale === 'zh' ? '删除' : 'Delete'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Create File Dialog */}
|
||
{createFileDialog && (() => {
|
||
// 规范化扩展名（确保有点号前缀）
|
||
// Normalize extension (ensure dot prefix)
|
||
const ext = createFileDialog.template.extension.startsWith('.')
|
||
? createFileDialog.template.extension
|
||
: `.${createFileDialog.template.extension}`;
|
||
return (
|
||
<PromptDialog
|
||
title={locale === 'zh' ? `新建 ${getTemplateLabel(createFileDialog.template.label)}` : `New ${createFileDialog.template.label}`}
|
||
message={locale === 'zh' ? `输入文件名（将添加 ${ext}）:` : `Enter file name (${ext} will be added):`}
|
||
placeholder="filename"
|
||
confirmText={locale === 'zh' ? '创建' : 'Create'}
|
||
cancelText={locale === 'zh' ? '取消' : 'Cancel'}
|
||
onConfirm={async (value) => {
|
||
const { parentPath, template } = createFileDialog;
|
||
setCreateFileDialog(null);
|
||
|
||
let fileName = value;
|
||
if (!fileName.endsWith(ext)) {
|
||
fileName = `${fileName}${ext}`;
|
||
}
|
||
const filePath = `${parentPath}/${fileName}`;
|
||
|
||
try {
|
||
const content = await template.getContent(fileName);
|
||
await TauriAPI.writeFileContent(filePath, content);
|
||
|
||
// Refresh both assets view and folder tree
|
||
await refreshAll();
|
||
|
||
// Notify that a file was created | 通知文件已创建
|
||
messageHub?.publish('file:created', { path: filePath });
|
||
} catch (error) {
|
||
console.error('Failed to create file:', error);
|
||
}
|
||
}}
|
||
onCancel={() => setCreateFileDialog(null)}
|
||
/>
|
||
);
|
||
})()}
|
||
</div>
|
||
);
|
||
}
|