listpage-next 0.0.246 → 0.0.247

package/dist/ui/FileManager/components/FolderTree.js

@@ -0,0 +1,137 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronRight, FolderIcon, FolderOpen, HardDrive, Plus } from "lucide-react";
+import { useControllableValue } from "ahooks";
+const FolderTree = ({ parentId, depth = 0, folders, expandedFolders: controlledExpandedFolders, currentFolderId, onNavigate, onToggleExpand: controlledOnToggleExpand, onAddFolder, showRoot = false })=>{
+    const [expandedFolders, onToggleExpand] = useControllableValue({
+        value: controlledExpandedFolders,
+        onChange: controlledOnToggleExpand
+    });
+    if (showRoot) {
+        const isRootExpanded = expandedFolders?.has('root');
+        const isActive = null === currentFolderId;
+        return /*#__PURE__*/ jsx("div", {
+            className: "flex flex-col",
+            children: /*#__PURE__*/ jsxs("div", {
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: `
+                flex items-center gap-2 px-3 py-1.5 rounded-md cursor-pointer text-sm select-none transition-colors
+                ${isActive ? 'bg-indigo-500/20 text-indigo-300' : 'text-slate-400 hover:text-white hover:bg-slate-800/50'}
+              `,
+                        style: {
+                            paddingLeft: `${12 * depth + 12}px`
+                        },
+                        onClick: ()=>onNavigate(null),
+                        children: [
+                            /*#__PURE__*/ jsx("div", {
+                                className: "p-0.5 rounded hover:bg-slate-700/50 visible",
+                                onClick: (e)=>{
+                                    e.stopPropagation();
+                                    onToggleExpand('root');
+                                },
+                                children: isRootExpanded ? /*#__PURE__*/ jsx(ChevronDown, {
+                                    className: "w-3 h-3"
+                                }) : /*#__PURE__*/ jsx(ChevronRight, {
+                                    className: "w-3 h-3"
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(HardDrive, {
+                                className: "w-4 h-4"
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                className: "truncate flex-1",
+                                children: '根目录'
+                            }),
+                            onAddFolder && /*#__PURE__*/ jsx("div", {
+                                className: "p-1 hover:bg-slate-700 rounded text-slate-400 hover:text-white",
+                                onClick: (e)=>{
+                                    e.stopPropagation();
+                                    onAddFolder(null);
+                                },
+                                children: /*#__PURE__*/ jsx(Plus, {
+                                    className: "w-4 h-4"
+                                })
+                            })
+                        ]
+                    }),
+                    isRootExpanded && /*#__PURE__*/ jsx(FolderTree, {
+                        parentId: null,
+                        depth: depth + 1,
+                        folders: folders,
+                        expandedFolders: expandedFolders,
+                        currentFolderId: currentFolderId,
+                        onNavigate: onNavigate,
+                        onToggleExpand: onToggleExpand,
+                        onAddFolder: onAddFolder,
+                        showRoot: false
+                    })
+                ]
+            })
+        });
+    }
+    const childFolders = folders.filter((f)=>f.parentId === parentId);
+    if (0 === childFolders.length) return null;
+    return /*#__PURE__*/ jsx("div", {
+        className: "flex flex-col",
+        children: childFolders.map((folder)=>{
+            const isExpanded = expandedFolders?.has(folder.id);
+            const isActive = currentFolderId === folder.id;
+            const hasChildren = folders.some((f)=>f.parentId === folder.id);
+            return /*#__PURE__*/ jsxs("div", {
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: `
+                  flex items-center gap-2 px-3 py-1.5 rounded-md cursor-pointer text-sm select-none transition-colors
+                  ${isActive ? 'bg-indigo-500/20 text-indigo-300' : 'text-slate-400 hover:text-white hover:bg-slate-800/50'}
+                `,
+                        style: {
+                            paddingLeft: `${12 * depth + 12}px`
+                        },
+                        onClick: ()=>onNavigate(folder.id),
+                        children: [
+                            /*#__PURE__*/ jsx("div", {
+                                className: `p-0.5 rounded hover:bg-slate-700/50 ${hasChildren ? 'visible' : 'invisible'}`,
+                                onClick: (e)=>onToggleExpand(folder.id),
+                                children: isExpanded ? /*#__PURE__*/ jsx(ChevronDown, {
+                                    className: "w-3 h-3"
+                                }) : /*#__PURE__*/ jsx(ChevronRight, {
+                                    className: "w-3 h-3"
+                                })
+                            }),
+                            isActive || isExpanded ? /*#__PURE__*/ jsx(FolderOpen, {
+                                className: `w-4 h-4 ${isActive ? 'text-indigo-400' : 'text-slate-400'}`
+                            }) : /*#__PURE__*/ jsx(FolderIcon, {
+                                className: "w-4 h-4"
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                className: "truncate flex-1",
+                                children: folder.name
+                            }),
+                            onAddFolder && /*#__PURE__*/ jsx("div", {
+                                className: "p-1 hover:bg-slate-700 rounded text-slate-400 hover:text-white",
+                                onClick: (e)=>{
+                                    e.stopPropagation();
+                                    onAddFolder(folder);
+                                },
+                                children: /*#__PURE__*/ jsx(Plus, {
+                                    className: "w-4 h-4"
+                                })
+                            })
+                        ]
+                    }),
+                    isExpanded && /*#__PURE__*/ jsx(FolderTree, {
+                        parentId: folder.id,
+                        depth: depth + 1,
+                        folders: folders,
+                        expandedFolders: expandedFolders,
+                        currentFolderId: currentFolderId,
+                        onNavigate: onNavigate,
+                        onToggleExpand: onToggleExpand,
+                        onAddFolder: onAddFolder
+                    })
+                ]
+            }, folder.id);
+        })
+    });
+};
+export { FolderTree };

package/dist/ui/FileManager/components/HeaderBar.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ViewMode } from '../types';
+import { BreadcrumbItem } from './Breadcrumbs';
+export interface HeaderBarProps {
+    breadcrumbs: BreadcrumbItem[];
+    search: string;
+    onSearchChange: (v: string) => void;
+    onNavigate: (folderId: string | null) => void;
+    onCreateFolder: () => void;
+    viewMode: ViewMode;
+    onChangeViewMode: (mode: ViewMode) => void;
+}
+export declare const HeaderBar: React.FC<HeaderBarProps>;

package/dist/ui/FileManager/components/HeaderBar.js

@@ -0,0 +1,37 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Breadcrumbs } from "./Breadcrumbs.js";
+import { SearchInput } from "./SearchInput.js";
+import { ViewModeToggle } from "./ViewModeToggle.js";
+const HeaderBar = ({ breadcrumbs, search, onSearchChange, onNavigate, onCreateFolder, viewMode, onChangeViewMode })=>/*#__PURE__*/ jsxs("header", {
+        className: "h-16 border-b border-slate-800 bg-slate-900/50 backdrop-blur flex items-center justify-between px-6 shrink-0 z-10",
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex items-center gap-4 flex-1",
+                children: [
+                    search ? /*#__PURE__*/ jsx("div", {
+                        className: "text-lg font-medium text-slate-200",
+                        children: "搜索结果"
+                    }) : /*#__PURE__*/ jsx(Breadcrumbs, {
+                        items: breadcrumbs,
+                        onNavigate: onNavigate
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: "h-6 w-px bg-slate-800 mx-2"
+                    }),
+                    /*#__PURE__*/ jsx(SearchInput, {
+                        value: search,
+                        onChange: onSearchChange
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "flex items-center gap-3 ml-4",
+                children: /*#__PURE__*/ jsx(ViewModeToggle, {
+                    viewMode: viewMode,
+                    onChange: onChangeViewMode
+                })
+            })
+        ]
+    });
+export { HeaderBar };

package/dist/ui/FileManager/components/InspectorPanel.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { FileSystemItem, Folder } from '../types';
+interface InspectorPanelProps {
+    item: FileSystemItem;
+    folders: Folder[];
+    onDelete: (id: string, type: 'asset', name: string) => void;
+}
+export declare const InspectorPanel: React.FC<InspectorPanelProps>;
+export {};

package/dist/ui/FileManager/components/InspectorPanel.js

@@ -0,0 +1,119 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import dayjs from "dayjs";
+import FileTypePreview from "./FileTypePreview.js";
+const InspectorPanel = ({ item, folders, onDelete })=>{
+    if (!item || 'folder' === item.type) return null;
+    const asset = item;
+    return /*#__PURE__*/ jsx("aside", {
+        className: "w-80 bg-slate-900 border-l border-slate-800 overflow-y-auto shrink-0",
+        children: /*#__PURE__*/ jsxs("div", {
+            className: "p-6 space-y-6",
+            children: [
+                /*#__PURE__*/ jsx("div", {
+                    className: "h-64 bg-slate-950 rounded-lg overflow-hidden border border-slate-800 shadow-lg relative flex items-center justify-center",
+                    children: /*#__PURE__*/ jsx(FileTypePreview, {
+                        asset: asset
+                    })
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    children: [
+                        /*#__PURE__*/ jsx("h2", {
+                            className: "text-lg font-bold text-white wrap-break-word",
+                            children: asset.name
+                        }),
+                        /*#__PURE__*/ jsxs("p", {
+                            className: "text-sm text-slate-500 mt-1",
+                            children: [
+                                "添加于 ",
+                                dayjs(asset.createdAt).format('YYYY-MM-DD')
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    className: "space-y-4",
+                    children: [
+                        /*#__PURE__*/ jsxs("div", {
+                            children: [
+                                /*#__PURE__*/ jsx("h3", {
+                                    className: "text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2",
+                                    children: "属性"
+                                }),
+                                /*#__PURE__*/ jsxs("div", {
+                                    className: "grid grid-cols-2 gap-2 text-sm",
+                                    children: [
+                                        asset.width ? /*#__PURE__*/ jsxs("div", {
+                                            className: "bg-slate-800/50 p-2 rounded",
+                                            children: [
+                                                /*#__PURE__*/ jsx("span", {
+                                                    className: "text-slate-500 block text-xs",
+                                                    children: "尺寸"
+                                                }),
+                                                /*#__PURE__*/ jsxs("span", {
+                                                    className: "text-slate-200",
+                                                    children: [
+                                                        asset.width,
+                                                        " x ",
+                                                        asset.height
+                                                    ]
+                                                })
+                                            ]
+                                        }) : null,
+                                        /*#__PURE__*/ jsxs("div", {
+                                            className: "bg-slate-800/50 p-2 rounded",
+                                            children: [
+                                                /*#__PURE__*/ jsx("span", {
+                                                    className: "text-slate-500 block text-xs",
+                                                    children: "大小"
+                                                }),
+                                                /*#__PURE__*/ jsx("span", {
+                                                    className: "text-slate-200",
+                                                    children: asset.size
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ jsxs("div", {
+                                            className: "bg-slate-800/50 p-2 rounded",
+                                            children: [
+                                                /*#__PURE__*/ jsx("span", {
+                                                    className: "text-slate-500 block text-xs",
+                                                    children: "类型"
+                                                }),
+                                                /*#__PURE__*/ jsx("span", {
+                                                    className: "text-slate-200 capitalize",
+                                                    children: asset.type
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ jsxs("div", {
+                                            className: "bg-slate-800/50 p-2 rounded",
+                                            children: [
+                                                /*#__PURE__*/ jsx("span", {
+                                                    className: "text-slate-500 block text-xs",
+                                                    children: "位置"
+                                                }),
+                                                /*#__PURE__*/ jsx("span", {
+                                                    className: "text-slate-200 truncate",
+                                                    children: folders.find((f)=>f.id === asset.parentId)?.name || '根目录'
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx("div", {
+                            children: /*#__PURE__*/ jsx("button", {
+                                onClick: ()=>onDelete(asset.id, 'asset', asset.name),
+                                className: "w-full py-2 px-4 border border-red-900/50 text-red-400 hover:bg-red-900/20 rounded-lg text-sm transition-colors",
+                                children: "删除文件"
+                            })
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+export { InspectorPanel };

package/dist/ui/FileManager/components/SearchInput.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface SearchInputProps {
+    value: string;
+    onChange: (value: string) => void;
+}
+export declare const SearchInput: React.FC<SearchInputProps>;
+export {};

package/dist/ui/FileManager/components/SearchInput.js

@@ -0,0 +1,19 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Search } from "lucide-react";
+const SearchInput = ({ value, onChange })=>/*#__PURE__*/ jsxs("div", {
+        className: "relative w-64",
+        children: [
+            /*#__PURE__*/ jsx(Search, {
+                className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500"
+            }),
+            /*#__PURE__*/ jsx("input", {
+                type: "text",
+                placeholder: "搜索文件...",
+                value: value,
+                onChange: (e)=>onChange(e.target.value),
+                className: "w-full bg-slate-900 border-none rounded-lg pl-10 pr-4 py-1.5 text-sm text-slate-200 placeholder-slate-600 focus:ring-2 focus:ring-indigo-500/50 outline-none transition-all"
+            })
+        ]
+    });
+export { SearchInput };

package/dist/ui/FileManager/components/Sidebar.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactNode } from 'react';
+import { Folder } from '../types';
+export interface SidebarProps {
+    title?: ReactNode;
+    folders: Folder[];
+    currentFolderId: string | null;
+    onNavigate: (folderId: string | null) => void;
+    onOpenAddModal: () => void;
+    onOpenCreateEmptyFolderModal?: (folder: Folder | null) => void;
+}
+declare const Sidebar: React.FC<SidebarProps>;
+export default Sidebar;

package/dist/ui/FileManager/components/Sidebar.js

@@ -0,0 +1,79 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Cloud, Plus } from "lucide-react";
+import { FolderTree } from "./FolderTree.js";
+const Sidebar_Sidebar = ({ title, folders, currentFolderId, onNavigate, onOpenAddModal, onOpenCreateEmptyFolderModal })=>{
+    const [expandedFolders, setExpandedFolders] = useState(new Set([
+        'root'
+    ]));
+    const toggleExpand = (folderId)=>{
+        setExpandedFolders((prev)=>{
+            const next = new Set(prev);
+            if (next.has(folderId)) next.delete(folderId);
+            else next.add(folderId);
+            return next;
+        });
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: "w-64 bg-slate-900 border-r border-slate-800 h-full flex flex-col shrink-0",
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "p-4 border-b border-slate-800 flex items-center gap-2",
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: "w-8 h-8 bg-indigo-600 rounded-lg flex items-center justify-center shadow-lg shadow-indigo-500/20",
+                        children: /*#__PURE__*/ jsx(Cloud, {
+                            className: "text-white w-5 h-5"
+                        })
+                    }),
+                    /*#__PURE__*/ jsx("h1", {
+                        className: "text-xl font-bold tracking-tight text-white",
+                        children: title
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "p-4",
+                children: /*#__PURE__*/ jsxs("button", {
+                    onClick: onOpenAddModal,
+                    className: "w-full bg-indigo-600 hover:bg-indigo-500 text-white py-2 px-4 rounded-lg flex items-center justify-center gap-2 font-medium transition-colors shadow-lg shadow-indigo-900/20",
+                    children: [
+                        /*#__PURE__*/ jsx(Plus, {
+                            className: "w-4 h-4"
+                        }),
+                        "上传文件"
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "flex-1 overflow-y-auto px-3 py-2 space-y-6 scrollbar-thin",
+                children: /*#__PURE__*/ jsxs("div", {
+                    children: [
+                        /*#__PURE__*/ jsx("div", {
+                            className: "flex items-center justify-between mb-2 px-3",
+                            children: /*#__PURE__*/ jsx("h3", {
+                                className: "text-xs font-semibold text-slate-500 uppercase tracking-wider",
+                                children: "位置"
+                            })
+                        }),
+                        /*#__PURE__*/ jsx("div", {
+                            className: "space-y-0.5",
+                            children: /*#__PURE__*/ jsx(FolderTree, {
+                                parentId: null,
+                                folders: folders,
+                                expandedFolders: expandedFolders,
+                                currentFolderId: currentFolderId,
+                                onNavigate: onNavigate,
+                                onToggleExpand: toggleExpand,
+                                onAddFolder: onOpenCreateEmptyFolderModal,
+                                showRoot: true
+                            })
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+const Sidebar = Sidebar_Sidebar;
+export { Sidebar as default };

package/dist/ui/FileManager/components/ViewModeToggle.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ViewMode } from '../types';
+interface ViewModeToggleProps {
+    viewMode: ViewMode;
+    onChange: (mode: ViewMode) => void;
+}
+export declare const ViewModeToggle: React.FC<ViewModeToggleProps>;
+export {};

package/dist/ui/FileManager/components/ViewModeToggle.js

@@ -0,0 +1,23 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Grid, List } from "lucide-react";
+const ViewModeToggle = ({ viewMode, onChange })=>/*#__PURE__*/ jsxs("div", {
+        className: "flex bg-slate-800 rounded-lg p-1 border border-slate-700",
+        children: [
+            /*#__PURE__*/ jsx("button", {
+                onClick: ()=>onChange('grid'),
+                className: `p-1.5 rounded-md transition-all ${'grid' === viewMode ? 'bg-indigo-600 text-white shadow-sm' : 'text-slate-400 hover:text-white'}`,
+                children: /*#__PURE__*/ jsx(Grid, {
+                    className: "w-4 h-4"
+                })
+            }),
+            /*#__PURE__*/ jsx("button", {
+                onClick: ()=>onChange('list'),
+                className: `p-1.5 rounded-md transition-all ${'list' === viewMode ? 'bg-indigo-600 text-white shadow-sm' : 'text-slate-400 hover:text-white'}`,
+                children: /*#__PURE__*/ jsx(List, {
+                    className: "w-4 h-4"
+                })
+            })
+        ]
+    });
+export { ViewModeToggle };

package/dist/ui/FileManager/index.d.ts

@@ -0,0 +1,3 @@
+export { FileManager, type FileManagerProps } from './FileManager';
+export { AssetSelectorModal, type AssetSelectorModalProps, } from './components/AssetSelectorModal';
+export type { StorageAdapter } from './types';

package/dist/ui/FileManager/index.js

@@ -0,0 +1,3 @@
+import { FileManager } from "./FileManager.js";
+import { AssetSelectorModal } from "./components/AssetSelectorModal.js";
+export { AssetSelectorModal, FileManager };

package/dist/ui/FileManager/services/config.d.ts

@@ -0,0 +1,8 @@
+export interface StorageConfig {
+    endpoint: string;
+    accessKeyId: string;
+    secretAccessKey: string;
+    bucketName: string;
+    region?: string;
+}
+export declare const getStorageConfig: () => StorageConfig;

package/dist/ui/FileManager/services/config.js

@@ -0,0 +1,18 @@
+let storageConfig = null;
+const getStorageConfig = ()=>{
+    if (storageConfig) return storageConfig;
+    const endpoint = 'https://xxx.xxx.xxx.xxx';
+    const accessKeyId = '';
+    const secretAccessKey = '';
+    const bucketName = '';
+    const region = 'us-east-1';
+    if (!endpoint || !accessKeyId || !secretAccessKey || !bucketName) throw new Error('Storage configuration is missing');
+    return {
+        endpoint,
+        accessKeyId,
+        secretAccessKey,
+        bucketName,
+        region
+    };
+};
+export { getStorageConfig };

package/dist/ui/FileManager/services/storageService.d.ts

@@ -0,0 +1,14 @@
+import { Asset, Folder, StorageAdapter } from '../types';
+/**
+ * Parses S3 keys into Assets and Folders hierarchy.
+ * In S3, folders are just keys ending in '/' or prefixes of other keys.
+ */
+export declare const listAssets: () => Promise<{
+    assets: Asset[];
+    folders: Folder[];
+}>;
+export declare const createFolder: (folderName: string, parentPath: string | null) => Promise<Folder>;
+export declare const deleteFolder: (folderPath: string) => Promise<void>;
+export declare const uploadObject: (file: File, folderId: string | null) => Promise<Partial<Asset>>;
+export declare const deleteObject: (assetId: string) => Promise<void>;
+export declare const adapter: StorageAdapter;