@blocklet/pages-kit-block-studio 0.5.41 → 0.5.42

package/lib/cjs/plugins/_theme.js

@@ -42,9 +42,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // NOTICE: This file is very important, please do not change it!
 // import BlockStudio from '@blocklet/pages-kit-block-studio/frontend';
 // export default BlockStudio;
+// add tailwindcss css to the head
 const Session_1 = require("@arcblock/did-connect/lib/Session");
 const Config_1 = require("@arcblock/ux/lib/Config");
-const Empty_1 = __importDefault(require("@arcblock/ux/lib/Empty"));
 const context_1 = require("@arcblock/ux/lib/Locale/context");
 const Theme_1 = require("@arcblock/ux/lib/Theme");
 const Toast_1 = __importStar(require("@arcblock/ux/lib/Toast"));
@@ -60,16 +60,21 @@ const property_1 = require("@blocklet/pages-kit/utils/property");
 const studio_ui_1 = require("@blocklet/studio-ui");
 const ui_react_1 = require("@blocklet/ui-react");
 const Add_1 = __importDefault(require("@mui/icons-material/Add"));
+const Delete_1 = __importDefault(require("@mui/icons-material/Delete"));
+const DragIndicator_1 = __importDefault(require("@mui/icons-material/DragIndicator"));
 const LaptopMac_1 = __importDefault(require("@mui/icons-material/LaptopMac"));
 const PhoneAndroid_1 = __importDefault(require("@mui/icons-material/PhoneAndroid"));
+const Settings_1 = __importDefault(require("@mui/icons-material/Settings"));
+const SortByAlpha_1 = __importDefault(require("@mui/icons-material/SortByAlpha"));
 const material_1 = require("@mui/material");
 const ahooks_1 = require("ahooks");
 const ahooks_2 = require("ahooks");
 const cloneDeep_1 = __importDefault(require("lodash/cloneDeep"));
 const get_1 = __importDefault(require("lodash/get"));
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const react_dnd_1 = require("react-dnd");
+const react_dnd_2 = require("react-dnd");
 const react_dnd_html5_backend_1 = require("react-dnd-html5-backend");
 const react_router_dom_1 = require("react-router-dom");
 const split_pane_react_1 = __importStar(require("split-pane-react"));
@@ -93,6 +98,136 @@ function useSessionContext() {
 const LEFT_DRAWER_WIDTH = 300;
 const RIGHT_DRAWER_WIDTH = 300;
 const defaultLocale = 'en';
+// Drag and drop types
+const ItemTypes = {
+    ROUTE_ITEM: 'route-item',
+};
+const DraggableRouteItem = ({ route, staticDataInRoute, currentPageId, onNavigate, onDelete, index, moveItem, showDragHandle, routes, }) => {
+    const ref = react_1.default.useRef(null);
+    const [isHovered, setIsHovered] = react_1.default.useState(false);
+    const [{ handlerId }, drop] = (0, react_dnd_2.useDrop)({
+        accept: ItemTypes.ROUTE_ITEM,
+        collect(monitor) {
+            return {
+                handlerId: monitor.getHandlerId(),
+            };
+        },
+        hover(item, monitor) {
+            if (!ref.current || !showDragHandle) {
+                return;
+            }
+            // Get the real dragIndex from routes array using route as identifier
+            // This prevents issues when dragging too fast and item.index becomes stale
+            const dragIndex = routes.findIndex((r) => r === item.route);
+            const hoverIndex = index;
+            // Don't replace items with themselves
+            if (dragIndex === hoverIndex || dragIndex === -1) {
+                return;
+            }
+            // Determine rectangle on screen
+            const hoverBoundingRect = ref.current?.getBoundingClientRect();
+            // Get vertical middle
+            const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+            // Determine mouse position
+            const clientOffset = monitor.getClientOffset();
+            // Get pixels to the top
+            const hoverClientY = (clientOffset?.y ?? 0) - hoverBoundingRect.top;
+            // Only perform the move when the mouse has crossed half of the items height
+            // When dragging downwards, only move when the cursor is below 50%
+            // When dragging upwards, only move when the cursor is above 50%
+            // Dragging downwards
+            if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
+                return;
+            }
+            // Dragging upwards
+            if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
+                return;
+            }
+            // Time to actually perform the action
+            moveItem(dragIndex, hoverIndex);
+            // Note: we're mutating the monitor item here!
+            // Generally it's better to avoid mutations,
+            // but it's good here for the sake of performance
+            // to avoid expensive index searches.
+            item.index = hoverIndex;
+        },
+    });
+    const [{ isDragging }, drag, preview] = (0, react_dnd_2.useDrag)({
+        type: ItemTypes.ROUTE_ITEM,
+        item: () => {
+            return { route, index };
+        },
+        collect: (monitor) => ({
+            isDragging: monitor.isDragging(),
+        }),
+        canDrag: showDragHandle,
+    });
+    const opacity = isDragging ? 0.5 : 1;
+    // Separate drag handle from the clickable area
+    const dragHandleRef = react_1.default.useRef(null);
+    // Only attach drag to the handle when in custom sort mode
+    react_1.default.useEffect(() => {
+        if (showDragHandle && dragHandleRef.current) {
+            drag(dragHandleRef.current);
+        }
+    }, [drag, showDragHandle]);
+    drop(ref);
+    return ((0, jsx_runtime_1.jsx)(material_1.ListItem, { ref: ref, disablePadding: true, className: isDragging ? 'drag-shaking' : '', sx: {
+            opacity,
+            transition: isDragging ? 'opacity 0.2s ease' : 'opacity 0.2s ease, transform 0.2s ease',
+            zIndex: isDragging ? 1000 : 'auto',
+        }, "data-handler-id": handlerId, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: (0, jsx_runtime_1.jsxs)(material_1.ListItemButton, { selected: currentPageId === route, onClick: () => onNavigate(route), sx: {
+                borderRadius: 1,
+                width: '100%',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+                overflowX: 'hidden',
+                transition: 'all 0.3s ease',
+                '&.Mui-selected': {
+                    backgroundColor: 'primary.main',
+                    color: 'white',
+                    '&:hover': {
+                        backgroundColor: 'primary.main',
+                    },
+                },
+                fontSize: '14px',
+                display: 'flex',
+                alignItems: 'center',
+                gap: 1,
+                border: (theme) => (isDragging ? `1px solid ${theme.palette.primary.main}` : '1px solid transparent'),
+                backgroundColor: isDragging ? 'grey.100' : 'inherit',
+                pl: 1,
+                pr: 1,
+            }, children: [showDragHandle && ((0, jsx_runtime_1.jsx)(material_1.Box, { ref: dragHandleRef, sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        cursor: 'grab',
+                        borderRadius: 1,
+                        '&:active': {
+                            cursor: 'grabbing',
+                        },
+                    }, children: (0, jsx_runtime_1.jsx)(DragIndicator_1.default, { sx: {
+                            fontSize: '14px',
+                        } }) })), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: staticDataInRoute.blockName || route, children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                            flex: 1,
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                        }, children: staticDataInRoute.blockName || route }) }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: (e) => {
+                        e.stopPropagation();
+                        onDelete(route, staticDataInRoute.blockName || route);
+                    }, sx: {
+                        ml: 1,
+                        opacity: isHovered ? 0.7 : 0,
+                        visibility: isHovered ? 'visible' : 'hidden',
+                        transition: 'opacity 0.2s ease',
+                        '&:hover': {
+                            bgcolor: 'error.main',
+                            color: 'error.contrastText',
+                        },
+                    }, children: (0, jsx_runtime_1.jsx)(Delete_1.default, { sx: { fontSize: '16px' } }) })] }) }));
+};
 const ComparisonPreviewDialog = ({ open, title, leftTitle, leftContent, rightTitle, rightContent, description, loading, onConfirm, onClose, }) => {
     const { t } = (0, context_1.useLocaleContext)();
     const handleConfirm = async () => {
@@ -146,6 +281,12 @@ function Layout({ loadState, loadedData }) {
             loading: false,
             onConfirm: async () => { },
         },
+        deleteConfirmDialog: {
+            open: false,
+            blockName: '',
+            route: '',
+            loading: false,
+        },
         init: false,
         allComponents: [],
         propertiesValue: {},
@@ -159,6 +300,10 @@ function Layout({ loadState, loadedData }) {
     const [hSizes, setHSizes] = (0, ahooks_1.useLocalStorageState)('BlockStudioHorizontalSizes', {
         defaultValue: [LEFT_DRAWER_WIDTH, 'auto', RIGHT_DRAWER_WIDTH],
     });
+    // Custom sorting order storage
+    const [customSortOrder, setCustomSortOrder] = (0, ahooks_1.useLocalStorageState)('BlockStudioCustomSortOrder', {
+        defaultValue: [],
+    });
     const { t, locale } = (0, context_1.useLocaleContext)();
     const { session } = useSessionContext();
     const location = (0, react_router_dom_1.useLocation)();
@@ -182,18 +327,37 @@ function Layout({ loadState, loadedData }) {
             iframe.contentWindow.postMessage(safeData, '*');
         }
     }, [mode]);
-    const { routes, currentPage } = (0, react_1.useMemo)(() => {
-        const routes = Object.keys(staticData)
-            .sort((a, b) => a.localeCompare(b))
-            .filter((route) => staticData[route]?.main?.isDeleted !== true);
+    const { routes, currentPage, hasCustomSort } = (0, react_1.useMemo)(() => {
+        const allRoutes = Object.keys(staticData).filter((route) => staticData[route]?.main?.isDeleted !== true);
+        let sortedRoutes;
+        let hasCustomSort = false;
+        if (customSortOrder && customSortOrder.length > 0) {
+            // Use custom sort order if available
+            hasCustomSort = true;
+            const sortOrderMap = new Map(customSortOrder.map((route, index) => [route, index]));
+            sortedRoutes = allRoutes.sort((a, b) => {
+                const indexA = sortOrderMap.get(a) ?? Number.MAX_SAFE_INTEGER;
+                const indexB = sortOrderMap.get(b) ?? Number.MAX_SAFE_INTEGER;
+                if (indexA === indexB) {
+                    return a.localeCompare(b); // Fallback to alphabetical for new items
+                }
+                return indexA - indexB;
+            });
+        }
+        else {
+            // Use alphabetical sort as default
+            hasCustomSort = false;
+            sortedRoutes = allRoutes.sort((a, b) => a.localeCompare(b));
+        }
         return {
-            routes,
+            routes: sortedRoutes,
+            hasCustomSort,
             currentPage: {
                 ...staticData[location.pathname]?.main,
                 pageId: location.pathname,
             },
         };
-    }, [staticData, location.pathname]);
+    }, [staticData, location.pathname, customSortOrder]);
     const notSelectedBlock = (0, react_1.useMemo)(() => {
         return !currentPage?.blockName || !currentPage?.code;
     }, [currentPage]);
@@ -262,6 +426,9 @@ function Layout({ loadState, loadedData }) {
             }
             catch (error) {
                 console.error('Failed to write metadata:', error);
+                Toast_1.default.error(t('themeTranslations.saveMetadataFailed', {
+                    error: error.message,
+                }));
             }
         }
     }, { wait: 500 });
@@ -352,6 +519,16 @@ function Layout({ loadState, loadedData }) {
     const DraggingSplitPlaceholder = (0, react_1.useMemo)(() => {
         return ((0, jsx_runtime_1.jsx)(material_1.Box, { p: 1.5, width: "100%", height: "100%", children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", height: "100%", sx: { borderRadius: 1 } }) }));
     }, []);
+    // Move item function for drag and drop
+    const moveItem = (0, react_1.useCallback)((dragIndex, hoverIndex) => {
+        if (dragIndex === hoverIndex)
+            return;
+        const newRoutes = [...routes];
+        const [draggedItem] = newRoutes.splice(dragIndex, 1);
+        newRoutes.splice(hoverIndex, 0, draggedItem);
+        // Save the new order to localStorage (automatically enables custom sort)
+        setCustomSortOrder(newRoutes);
+    }, [routes, setCustomSortOrder]);
     // 修改 iframe URL 构建逻辑，添加初始状态参数
     const iframeUrl = (0, react_1.useMemo)(() => {
         const url = new URL(window.location.href);
@@ -386,16 +563,67 @@ function Layout({ loadState, loadedData }) {
         window.addEventListener('message', handleMessage);
         return () => window.removeEventListener('message', handleMessage);
     }, [changeMode, mode]);
+    // Add delete block function
+    const handleDeleteBlock = async (route, blockName) => {
+        state.deleteConfirmDialog = {
+            open: true,
+            blockName,
+            route,
+            loading: false,
+        };
+    };
+    const confirmDeleteBlock = async () => {
+        state.deleteConfirmDialog.loading = true;
+        try {
+            // Call delete API
+            const response = await api.delete(`/api/blocks/delete`, {
+                data: { route: state.deleteConfirmDialog.route },
+            });
+            if (response.data.success) {
+                Toast_1.default.success(t('themeTranslations.deleteSuccess'));
+                // Navigate away if currently viewing the deleted component
+                if (currentPage.pageId === state.deleteConfirmDialog.route) {
+                    const remainingComponents = routes.filter((r) => r !== state.deleteConfirmDialog.route);
+                    navigate('/');
+                }
+            }
+            else {
+                throw new Error(response.data.error || t('themeTranslations.deleteFailed'));
+            }
+        }
+        catch (error) {
+            console.error('Failed to delete block:', error);
+            Toast_1.default.error(t('themeTranslations.deleteFailed'));
+        }
+        finally {
+            state.deleteConfirmDialog.loading = false;
+            state.deleteConfirmDialog.open = false;
+        }
+    };
     const leftPanelContent = (0, react_1.useMemo)(() => {
         if (state.draggingSplitPane) {
             return DraggingSplitPlaceholder;
         }
-        return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { height: "100%", children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: 1, direction: "row", alignItems: "center", sx: { py: 2, pr: 1, pl: 0.5, flex: 1 }, children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { placeholder: t('themeTranslations.search'), sx: { minWidth: 60, flex: 1 }, onChange: (e) => {
+        return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { height: "100%", children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: 1, direction: "row", alignItems: "center", sx: { pt: 2, pr: 1, pl: 0.5, pb: 1 }, children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { placeholder: t('themeTranslations.search'), sx: { minWidth: 60, flex: 1 }, onChange: (e) => {
                                 state.searchValue = e.target.value;
-                            } }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", sx: { minWidth: 40 }, onClick: () => {
+                            } }), hasCustomSort && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t('themeTranslations.resetToAlphabeticalSort'), children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: () => {
+                                    setCustomSortOrder([]);
+                                }, sx: {
+                                    transition: 'all 0.2s ease',
+                                    '&:hover': {
+                                        backgroundColor: 'action.hover',
+                                        transform: 'scale(1.1)',
+                                    },
+                                }, children: (0, jsx_runtime_1.jsx)(SortByAlpha_1.default, { fontSize: "small" }) }) })), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", sx: { minWidth: 40 }, onClick: () => {
                                 state.createBlockOpen = true;
-                            }, children: (0, jsx_runtime_1.jsx)(Add_1.default, { fontSize: "small" }) })] }), routes?.length > 0 ? ((0, jsx_runtime_1.jsx)(material_1.List, { sx: { pr: 1, overflowY: 'auto', height: 'calc(100% - 60px)' }, children: routes
-                        .map((route) => {
+                            }, children: (0, jsx_runtime_1.jsx)(Add_1.default, { fontSize: "small" }) })] }), routes?.length > 0 ? ((0, jsx_runtime_1.jsx)(material_1.List, { sx: {
+                        pr: 1,
+                        overflowY: 'auto',
+                        height: hasCustomSort ? 'calc(100% - 80px)' : 'calc(100% - 60px)',
+                        // Prevent text selection during drag
+                        userSelect: 'none',
+                    }, children: routes
+                        .map((route, index) => {
                         const routeName = route;
                         const staticDataInRoute = staticData[route]?.main;
                         if (state.searchValue && !routeName?.toLowerCase().includes(state.searchValue?.toLowerCase())) {
@@ -404,35 +632,35 @@ function Layout({ loadState, loadedData }) {
                         if (!state.allComponents?.find(({ blockName }) => `/${blockName}` === routeName)) {
                             return null;
                         }
-                        return ((0, jsx_runtime_1.jsx)(material_1.ListItem, { disablePadding: true, children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, { selected: currentPage.pageId === route, onClick: () => {
-                                    if (route !== currentPage.pageId) {
-                                        navigate(route);
-                                        state.iframeLoaded = false;
-                                    }
-                                }, sx: {
-                                    borderRadius: 1,
-                                    mb: 1,
-                                    width: '100%',
-                                    textOverflow: 'ellipsis',
-                                    whiteSpace: 'nowrap',
-                                    overflowX: 'hidden',
-                                    transition: 'all 0.3s ease',
-                                    '&.Mui-selected': {
-                                        backgroundColor: 'primary.main',
-                                        color: 'white',
-                                        '&:hover': {
-                                            backgroundColor: 'primary.main',
-                                        },
-                                    },
-                                    fontSize: '14px',
-                                }, children: (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: staticDataInRoute.blockName || routeName, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                                            width: '100%',
-                                            overflow: 'hidden',
-                                            textOverflow: 'ellipsis',
-                                        }, children: staticDataInRoute.blockName || routeName }) }) }) }, route));
+                        return ((0, jsx_runtime_1.jsx)(DraggableRouteItem, { route: route, staticDataInRoute: staticDataInRoute, currentPageId: currentPage.pageId, onNavigate: (route) => {
+                                if (route !== currentPage.pageId) {
+                                    navigate(route);
+                                    state.iframeLoaded = false;
+                                }
+                            }, onDelete: handleDeleteBlock, index: index, moveItem: moveItem, showDragHandle: true, routes: routes }, route));
                     })
-                        .filter(Boolean) })) : ((0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", justifyContent: "center", alignItems: "center", height: "100%", children: (0, jsx_runtime_1.jsx)(Empty_1.default, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", children: t('themeTranslations.noRoutesFound') }) }) }))] }));
-    }, [routes, staticData, state.allComponents, state.searchValue, state.draggingSplitPane, locale, mode]);
+                        .filter(Boolean) })) : ((0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", justifyContent: "center", alignItems: "center", height: "100%", sx: { p: 3 }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { alignItems: "center", spacing: 3, sx: { textAlign: 'center' }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { component: "img", src: "https://api.iconify.design/material-symbols:folder-open-outline.svg", sx: {
+                                    width: 48,
+                                    height: 48,
+                                    opacity: 0.5,
+                                    filter: 'grayscale(100%)',
+                                }, alt: "No components" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", color: "text.primary", sx: { fontWeight: 600 }, children: t('themeTranslations.noComponentsFound') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", sx: { maxWidth: 200 }, children: t('themeTranslations.createFirstComponent') }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", startIcon: (0, jsx_runtime_1.jsx)(Add_1.default, {}), onClick: () => {
+                                    state.createBlockOpen = true;
+                                }, sx: { mt: 2 }, children: t('themeTranslations.createComponent') })] }) }))] }));
+    }, [
+        routes,
+        staticData,
+        state.allComponents,
+        state.searchValue,
+        state.draggingSplitPane,
+        hasCustomSort,
+        moveItem,
+        currentPage.pageId,
+        navigate,
+        locale,
+        mode,
+        handleDeleteBlock,
+    ]);
     // 修改 middlePanelContent - iframe 内部监听消息
     const middlePanelContent = (0, react_1.useMemo)(() => {
         // 如果在iframe内部，添加消息接收逻辑
@@ -447,11 +675,11 @@ function Layout({ loadState, loadedData }) {
             const url = new URL(window.location.href);
             const initialComponentId = url.searchParams.get('componentId') || state.metadata.id;
             const initialLocale = url.searchParams.get('locale') || locale || 'en';
-            return ((0, jsx_runtime_1.jsx)(material_1.Box, { className: "custom-component-root", sx: { height: '100vh', width: '100vw', overflow: 'auto' }, children: (0, jsx_runtime_1.jsx)(Theme_1.ThemeProvider, { theme: theme, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, {}), children: (0, jsx_runtime_1.jsx)(components_2.CustomComponentRenderer, { locale: initialLocale, componentId: initialComponentId || state.metadata.id, dev: {
-                                mode: 'draft',
-                                components: mergedAllBlocks,
-                                defaultLocale,
-                            }, properties: mergedPropertiesValues }, `custom-${renderComponentTrigger}`) }) }) }));
+            return ((0, jsx_runtime_1.jsx)(material_1.Box, { className: "custom-component-root", sx: { height: '100vh', width: '100vw', overflow: 'auto' }, children: (0, jsx_runtime_1.jsx)(Theme_1.ThemeProvider, { theme: theme, children: (0, jsx_runtime_1.jsx)(components_2.CustomComponentRenderer, { locale: initialLocale, componentId: initialComponentId || state.metadata.id, dev: {
+                            mode: 'draft',
+                            components: mergedAllBlocks,
+                            defaultLocale,
+                        }, properties: mergedPropertiesValues }, `custom-${renderComponentTrigger}`) }) }));
         }
         // 没有匹配到路由，使用欢迎页面
         if (notSelectedBlock) {
@@ -618,6 +846,7 @@ function Layout({ loadState, loadedData }) {
         JSON.stringify(state.metadata || {}),
         JSON.stringify(mergedAllBlocks || []),
         JSON.stringify(mergedPropertiesValues || {}),
+        handleDeleteBlock,
     ]);
     const rightPanelContent = (0, react_1.useMemo)(() => {
         if (state.draggingSplitPane) {
@@ -632,7 +861,7 @@ function Layout({ loadState, loadedData }) {
                 // add disabled backdrop if not selected block
                 '& .MuiListItem-root': {
                     pointerEvents: notSelectedBlock ? 'none' : 'auto',
-                    opacity: notSelectedBlock ? 0.5 : 1,
+                    opacity: notSelectedBlock ? 0.4 : 1,
                     userSelect: notSelectedBlock ? 'none' : 'auto',
                     filter: notSelectedBlock ? 'blur(5px)' : 'none',
                 },
@@ -645,7 +874,13 @@ function Layout({ loadState, loadedData }) {
                         display: 'flex',
                         justifyContent: 'center',
                         alignItems: 'center',
-                    }, children: (0, jsx_runtime_1.jsx)(Empty_1.default, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", children: t('themeTranslations.selectBlockAndContinue') }) }) })), (0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { width: '100%' }, children: (0, jsx_runtime_1.jsx)(components_1.BasicInfo, { config: state.metadata }) }) }), (0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(components_1.PropertiesConfig, { config: state.metadata, currentLocale: locale, defaultLocale: defaultLocale, allComponents: mergedAllBlocks, onUpdateConfig: (updater) => {
+                        p: 3,
+                    }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { alignItems: "center", spacing: 2, sx: {
+                            textAlign: 'center',
+                            bgcolor: 'background.default',
+                            borderRadius: 2,
+                            p: 3,
+                        }, children: [(0, jsx_runtime_1.jsx)(Settings_1.default, { sx: { fontSize: 48, color: 'primary.main' } }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { spacing: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", color: "primary.main", sx: { fontWeight: 600 }, children: t('themeTranslations.componentPropertiesTitle') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", children: t('themeTranslations.selectComponentToConfigureProperties') })] })] }) })), (0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { width: '100%' }, children: (0, jsx_runtime_1.jsx)(components_1.BasicInfo, { config: state.metadata }) }) }), (0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(components_1.PropertiesConfig, { config: state.metadata, currentLocale: locale, defaultLocale: defaultLocale, allComponents: mergedAllBlocks, onUpdateConfig: (updater) => {
                                     updater(state.metadata);
                                 }, useI18nEditor: false }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "column", spacing: 1, sx: { mt: 1 }, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", size: "small", color: "primary", onClick: async () => {
                                             try {
@@ -779,6 +1014,7 @@ function Layout({ loadState, loadedData }) {
         getStaticData,
         state.draggingSplitPane,
         mode,
+        handleDeleteBlock,
     ]);
     if (isInsideIframe) {
         return middlePanelContent;
@@ -844,7 +1080,11 @@ function Layout({ loadState, loadedData }) {
                                             }
                                         }, children: t('themeTranslations.create') })] }) })] }), (0, jsx_runtime_1.jsx)(ComparisonPreviewDialog, { open: state.previewDialog.open, title: state.previewDialog.title, leftTitle: state.previewDialog.leftTitle, leftContent: state.previewDialog.leftContent, rightTitle: state.previewDialog.rightTitle, rightContent: state.previewDialog.rightContent, description: state.previewDialog.description, loading: state.previewDialog.loading, onConfirm: state.previewDialog.onConfirm, onClose: () => {
                         state.previewDialog.open = false;
-                    } })] }) }));
+                    } }), (0, jsx_runtime_1.jsxs)(material_1.Dialog, { open: state.deleteConfirmDialog.open, onClose: () => (state.deleteConfirmDialog.open = false), maxWidth: "sm", fullWidth: true, children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: t('themeTranslations.deleteComponent') }), (0, jsx_runtime_1.jsxs)(material_1.DialogContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Alert, { severity: "warning", sx: { mb: 2 }, children: t('themeTranslations.deleteWarning') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('themeTranslations.deleteConfirmMessage', {
+                                        componentName: state.deleteConfirmDialog.blockName,
+                                    }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', justifyContent: 'flex-end', p: 2, gap: 1 }, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", onClick: () => (state.deleteConfirmDialog.open = false), disabled: state.deleteConfirmDialog.loading, children: t('themeTranslations.cancel') }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "error", onClick: confirmDeleteBlock, disabled: state.deleteConfirmDialog.loading, startIcon: state.deleteConfirmDialog.loading ? (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 20 }) : (0, jsx_runtime_1.jsx)(Delete_1.default, {}), children: state.deleteConfirmDialog.loading
+                                        ? t('themeTranslations.deleting')
+                                        : t('themeTranslations.deleteConfirm') })] })] })] }) }));
 }
 // Add SplitPane styling
 const StyledSplitPane = (0, material_1.styled)(split_pane_react_1.default) `
@@ -864,6 +1104,29 @@ const DragHandle = (0, material_1.styled)('div') `
   }
 `;
 const StyledDashboard = (0, material_1.styled)(studio_ui_1.Dashboard) `
+  @keyframes dragShake {
+    0%,
+    100% {
+      transform: translateY(0px) rotate(0deg);
+    }
+    25% {
+      transform: translateY(-2px) rotate(-2deg);
+    }
+    50% {
+      transform: translateY(2px) rotate(0deg);
+    }
+    75% {
+      transform: translateY(-2px) rotate(2deg);
+    }
+    100% {
+      transform: translateY(0px) rotate(0deg);
+    }
+  }
+
+  .drag-shaking {
+    animation: dragShake 0.3s ease-in-out infinite;
+  }
+
   .dashboard-content {
     display: flex;
     flex-direction: row;
@@ -909,12 +1172,12 @@ function CreateResource({ open, onClose }) {
         return null;
     }
     const tenantScope = 'pages-kit-block-studio';
-    return ((0, jsx_runtime_1.jsx)(react_1.Suspense, { children: (0, jsx_runtime_1.jsx)(ui_react_1.BlockletStudio, { mode: "dialog", tenantScope: tenantScope, title: "Pages Kit Blocks", description: "", note: "", introduction: "", logo: "", componentDid: PAGES_KIT_BLOCK_STUDIO_BLOCKLET_DID, 
-            // 透传到 get blocklet resource 的参数
-            resourcesParams: {}, dependentComponentsMode: "readonly", open: true, setOpen: () => onClose(), onConnected: () => { }, onUploaded: () => { }, onReleased: () => { }, 
-            // onOpened={() => onOpened?.()}
-            // 默认选中的资源
-            resources: {} }) }));
+    return ((0, jsx_runtime_1.jsx)(ui_react_1.BlockletStudio, { mode: "dialog", tenantScope: tenantScope, title: "Pages Kit Blocks", description: "", note: "", introduction: "", logo: "", componentDid: PAGES_KIT_BLOCK_STUDIO_BLOCKLET_DID, 
+        // 透传到 get blocklet resource 的参数
+        resourcesParams: {}, dependentComponentsMode: "readonly", open: true, setOpen: () => onClose(), onConnected: () => { }, onUploaded: () => { }, onReleased: () => { }, 
+        // onOpened={() => onOpened?.()}
+        // 默认选中的资源
+        resources: {} }));
 }
 // 添加 themeTranslations 到 translations 对象
 // 这里我们在运行时扩展 translations 对象，而不是修改源文件
@@ -965,6 +1228,21 @@ if (!locales_1.translations.en.themeTranslations) {
         step1: 'Browse and select components from the left menu, or create your own',
         step2: 'Preview your component in the center area with responsive design views',
         step3: 'Customize properties and configurations in the right panel to bring your ideas to life',
+        // New translations for sorting and improved empty states
+        resetToAlphabeticalSort: 'Reset to Alphabetical Sort',
+        noComponentsFound: 'No Components Found',
+        createFirstComponent: 'Create your first component to get started',
+        createComponent: 'Create Component',
+        componentPropertiesTitle: 'Configure Component',
+        selectComponentToConfigureProperties: 'Select a component from the left panel to configure its properties',
+        saveMetadataFailed: 'Failed to write @metadata.json: {error}',
+        deleteComponent: 'Delete Component',
+        deleteWarning: 'This action cannot be undone. All files in the component directory will be permanently deleted.',
+        deleteConfirmMessage: "Are you sure you want to delete the component '{componentName}'?",
+        deleteConfirm: 'Delete',
+        deleting: 'Deleting...',
+        deleteSuccess: 'Component deleted successfully',
+        deleteFailed: 'Failed to delete component',
     };
 }
 if (!locales_1.translations.zh.themeTranslations) {
@@ -1014,5 +1292,20 @@ if (!locales_1.translations.zh.themeTranslations) {
         step1: '从左侧菜单浏览并选择组件，或创建您自己的组件',
         step2: '在中央区域预览您的组件，支持响应式设计视图',
         step3: '在右侧面板自定义属性和配置，让您的创意变为现实',
+        // New translations for sorting and improved empty states
+        resetToAlphabeticalSort: '重置为字母排序',
+        noComponentsFound: '未找到组件',
+        createFirstComponent: '创建您的第一个组件来开始',
+        createComponent: '创建组件',
+        componentPropertiesTitle: '配置组件',
+        selectComponentToConfigureProperties: '从左侧面板选择一个组件来配置其属性',
+        saveMetadataFailed: '修改 @metadata.json 失败: {error}',
+        deleteComponent: '删除组件',
+        deleteWarning: '此操作无法撤销。组件目录中的所有文件将被永久删除。',
+        deleteConfirmMessage: "确定要删除组件 '{componentName}' 吗？",
+        deleteConfirm: '删除',
+        deleting: '删除中...',
+        deleteSuccess: '组件删除成功',
+        deleteFailed: '删除组件失败',
     };
 }