Feat(Menu): Add tool menu via drag and drop

Drag and drop a tool card to add tool menu

src/components/common/Sidebar/Item.tsx

@@ -3,10 +3,11 @@ import Icon from '@ant-design/icons'
 import Submenu from '@/components/common/Sidebar/Submenu'
 
 type ItemProps = {
-    icon?: IconComponent
+    icon?: IconComponent | string
     text?: string
     path: string
     children?: ReactNode
+    extend?: ReactNode
     end?: boolean
 }
 
@@ -42,9 +43,19 @@ const Item = (props: ItemProps) => {
                     }
                 >
                     <div className={'icon-box'}>
-                        {props.icon && <Icon className={'icon'} component={props.icon} />}
+                        {props.icon &&
+                            (typeof props.icon === 'string' ? (
+                                <img
+                                    className={'icon'}
+                                    src={`data:image/svg+xml;base64,${props.icon}`}
+                                    alt={'icon'}
+                                />
+                            ) : (
+                                <Icon className={'icon'} component={props.icon} />
+                            ))}
                     </div>
                     <span className={'text'}>{props.text}</span>
+                    <div className={'extend'}>{props.extend}</div>
                 </NavLink>
             </div>
             {props.children && (

src/components/common/Sidebar/Separate.tsx

@@ -4,7 +4,7 @@ const Separate = ({
     className,
     ...props
 }: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => {
-    return <div className={`separate ${className ? ` ${className}` : ''}`} {...props} />
+    return <div className={`separate${className ? ` ${className}` : ''}`} {...props} />
 }
 
 export default Separate

src/components/dnd/DragHandle.tsx

@@ -0,0 +1,27 @@
+import { HandleContextInst } from '@/components/dnd/HandleContext'
+import Icon from '@ant-design/icons'
+import '@/assets/css/components/dnd/drag-handle.scss'
+
+interface DragHandleProps {
+    padding?: string | number
+}
+
+const DragHandle = ({ padding }: DragHandleProps) => {
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    const { attributes, listeners, ref } = useContext(HandleContextInst)
+
+    return (
+        <button
+            data-component={'component-drag-handle'}
+            style={{ padding }}
+            ref={ref}
+            className={'drag-handle'}
+            {...attributes}
+            {...listeners}
+        >
+            <Icon component={IconOxygenHandle} />
+        </button>
+    )
+}
+
+export default DragHandle

src/components/dnd/Draggable.tsx

@@ -0,0 +1,47 @@
+import { CSSProperties, PropsWithChildren } from 'react'
+import { useDraggable } from '@dnd-kit/core'
+import { HandleContext, HandleContextInst } from '@/components/dnd/HandleContext'
+
+interface DraggableProps extends PropsWithChildren {
+    id: string
+    data: ToolMenuItem
+}
+
+const Draggable = ({ id, data, children }: DraggableProps) => {
+    const {
+        attributes,
+        isDragging,
+        listeners,
+        setNodeRef: draggableRef,
+        setActivatorNodeRef,
+        transform
+    } = useDraggable({
+        id,
+        data
+    })
+    const context = useMemo<HandleContext>(
+        () => ({
+            attributes,
+            listeners,
+            ref: setActivatorNodeRef
+        }),
+        [attributes, listeners, setActivatorNodeRef]
+    )
+    const style: CSSProperties | undefined = transform
+        ? {
+              opacity: isDragging ? 0 : undefined,
+              transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+              zIndex: 10000
+          }
+        : undefined
+
+    return (
+        <HandleContextInst.Provider value={context}>
+            <div ref={draggableRef} style={style}>
+                {children}
+            </div>
+        </HandleContextInst.Provider>
+    )
+}
+
+export default Draggable

src/components/dnd/DraggableOverlay.tsx

@@ -0,0 +1,22 @@
+import { PropsWithChildren } from 'react'
+import { defaultDropAnimationSideEffects, DragOverlay, DropAnimation } from '@dnd-kit/core'
+
+interface DraggableOverlayProps extends PropsWithChildren {
+    isDelete?: boolean
+}
+
+const dropAnimationConfig: DropAnimation = {
+    sideEffects: defaultDropAnimationSideEffects({
+        styles: {
+            active: {
+                opacity: '0.4'
+            }
+        }
+    })
+}
+
+const DraggableOverlay = ({ children }: DraggableOverlayProps) => {
+    return <DragOverlay dropAnimation={dropAnimationConfig}>{children}</DragOverlay>
+}
+
+export default DraggableOverlay

src/components/dnd/Droppable.tsx

@@ -0,0 +1,16 @@
+import { DetailedHTMLProps, HTMLAttributes } from 'react'
+import { useDroppable } from '@dnd-kit/core'
+
+interface DroppableProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    id: string
+}
+
+const Droppable = ({ id, ...props }: DroppableProps) => {
+    const { setNodeRef: droppableRef } = useDroppable({
+        id
+    })
+
+    return <div {...props} ref={droppableRef} />
+}
+
+export default Droppable

src/components/dnd/HandleContext.ts

@@ -0,0 +1,13 @@
+import { DraggableSyntheticListeners } from '@dnd-kit/core'
+
+export interface HandleContext {
+    attributes: Record<string, any>
+    listeners: DraggableSyntheticListeners
+    ref(node: HTMLElement | null): void
+}
+
+export const HandleContextInst = createContext<HandleContext>({
+    attributes: {},
+    listeners: undefined,
+    ref() {}
+})

src/components/dnd/Sortable.tsx

@@ -0,0 +1,54 @@
+import { CSSProperties, PropsWithChildren } from 'react'
+import { useSortable } from '@dnd-kit/sortable'
+import { HandleContext, HandleContextInst } from '@/components/dnd/HandleContext'
+
+interface SortableProps extends PropsWithChildren {
+    id: string
+    data: ToolMenuItem
+    isDelete?: boolean
+}
+
+const Sortable = ({ id, data, isDelete, children }: SortableProps) => {
+    const {
+        attributes,
+        isDragging,
+        listeners,
+        setNodeRef: draggableRef,
+        setActivatorNodeRef,
+        transform,
+        transition
+    } = useSortable({
+        id,
+        data
+    })
+    const context = useMemo<HandleContext>(
+        () => ({
+            attributes,
+            listeners,
+            ref: setActivatorNodeRef
+        }),
+        [attributes, listeners, setActivatorNodeRef]
+    )
+    const style: CSSProperties | undefined = transform
+        ? {
+              opacity: isDragging ? 0.4 : undefined,
+              transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+              zIndex: 10000,
+              transition
+          }
+        : undefined
+
+    return (
+        <HandleContextInst.Provider value={context}>
+            <div
+                ref={draggableRef}
+                style={style}
+                className={isDragging && isDelete ? 'delete' : undefined}
+            >
+                {children}
+            </div>
+        </HandleContextInst.Provider>
+    )
+}
+
+export default Sortable

src/components/tools/RepositoryCard.tsx

@@ -1,14 +1,17 @@
-import { DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react'
+import { DetailedHTMLProps, HTMLAttributes } from 'react'
 import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
 import '@/assets/css/components/tools/repository-card.scss'
 import Card from '@/components/common/Card'
 import FlexBox from '@/components/common/FlexBox'
+import Draggable from '@/components/dnd/Draggable'
+import DragHandle from '@/components/dnd/DragHandle.tsx'
 
 interface RepositoryCardProps
     extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-    icon: ReactNode
+    icon: string
     toolName: string
     toolId: string
+    ver: string
     options?: TiltOptions
     onOpen?: () => void
     onEdit?: () => void
@@ -25,6 +28,7 @@ const RepositoryCard = ({
     icon,
     toolName,
     toolId,
+    ver,
     options = {
         reverse: true,
         max: 8,
@@ -48,51 +52,58 @@ const RepositoryCard = ({
     }, [options])
 
     return (
-        <Card
-            data-component={'component-repository-card'}
-            style={{ overflow: 'visible', ...style }}
-            ref={cardRef}
-            {...props}
-        >
-            <FlexBox className={'repository-card'}>
-                <div className={'icon'}>{icon}</div>
-                <div className={'info'}>
-                    {toolName && <div className={'tool-name'}>{toolName}</div>}
-                    {toolId && <div className={'tool-id'}>{`ID: ${toolId}`}</div>}
-                </div>
-                <div className={'operation'}>
-                    {onOpen && (
-                        <AntdButton onClick={onOpen} size={'small'} type={'primary'}>
-                            打开
-                        </AntdButton>
-                    )}
-                    {onEdit && onPublish && (
-                        <div className={'edit'}>
-                            <AntdButton.Group size={'small'}>
-                                <AntdButton onClick={onEdit}>编辑</AntdButton>
-                                <AntdButton onClick={onPublish}>发布</AntdButton>
-                            </AntdButton.Group>
-                        </div>
-                    )}
-                    {onSource && (
-                        <AntdButton size={'small'} onClick={onSource}>
-                            源码
-                        </AntdButton>
-                    )}
-                    {onCancelReview && (
-                        <AntdButton size={'small'} onClick={onCancelReview}>
-                            取消审核
-                        </AntdButton>
-                    )}
-                    {onDelete && (
-                        <AntdButton size={'small'} danger onClick={onDelete}>
-                            删除
-                        </AntdButton>
-                    )}
-                </div>
-                {children}
-            </FlexBox>
-        </Card>
+        <Draggable id={toolId} data={{ icon, toolName, toolId, authorUsername: '!', ver }}>
+            <Card
+                data-component={'component-repository-card'}
+                style={{ overflow: 'visible', ...style }}
+                ref={cardRef}
+                {...props}
+            >
+                <FlexBox className={'repository-card'}>
+                    <div className={'header'}>
+                        {children}
+                        <DragHandle />
+                    </div>
+                    <div className={'icon'}>
+                        <img src={`data:image/svg+xml;base64,${icon}`} alt={'Icon'} />
+                    </div>
+                    <div className={'info'}>
+                        <div className={'tool-name'}>{toolName}</div>
+                        <div className={'tool-id'}>{`ID: ${toolId}`}</div>
+                    </div>
+                    <div className={'operation'}>
+                        {onOpen && (
+                            <AntdButton onClick={onOpen} size={'small'} type={'primary'}>
+                                打开
+                            </AntdButton>
+                        )}
+                        {onEdit && onPublish && (
+                            <div className={'edit'}>
+                                <AntdButton.Group size={'small'}>
+                                    <AntdButton onClick={onEdit}>编辑</AntdButton>
+                                    <AntdButton onClick={onPublish}>发布</AntdButton>
+                                </AntdButton.Group>
+                            </div>
+                        )}
+                        {onSource && (
+                            <AntdButton size={'small'} onClick={onSource}>
+                                源码
+                            </AntdButton>
+                        )}
+                        {onCancelReview && (
+                            <AntdButton size={'small'} onClick={onCancelReview}>
+                                取消审核
+                            </AntdButton>
+                        )}
+                        {onDelete && (
+                            <AntdButton size={'small'} danger onClick={onDelete}>
+                                删除
+                            </AntdButton>
+                        )}
+                    </div>
+                </FlexBox>
+            </Card>
+        </Draggable>
     )
 }
 

src/components/tools/StoreCard.tsx

@@ -1,4 +1,4 @@
-import { DetailedHTMLProps, HTMLAttributes, MouseEvent, ReactNode } from 'react'
+import { DetailedHTMLProps, HTMLAttributes, MouseEvent } from 'react'
 import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
 import protocolCheck from 'custom-protocol-check'
 import Icon from '@ant-design/icons'
@@ -10,9 +10,11 @@ import { r_tool_add_favorite, r_tool_remove_favorite } from '@/services/tool'
 import Card from '@/components/common/Card'
 import FlexBox from '@/components/common/FlexBox'
 import { getUserId } from '@/util/auth.tsx'
+import DragHandle from '@/components/dnd/DragHandle.tsx'
+import Draggable from '@/components/dnd/Draggable.tsx'
 
 interface StoreCardProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-    icon: ReactNode
+    icon: string
     toolName: string
     toolId: string
     toolDesc: string
@@ -176,81 +178,101 @@ const StoreCard = ({
 
     return (
         <>
-            <Card
-                data-component={'component-store-card'}
-                style={{ overflow: 'visible', ...style }}
-                ref={cardRef}
-                {...props}
-                onClick={handleCardOnClick}
+            <Draggable
+                id={`${author.username}:${toolId}:${ver}`}
+                data={{ icon, toolName, toolId, authorUsername: author.username, ver: 'latest' }}
             >
-                <FlexBox className={'store-card'}>
-                    <div className={'icon'}>{icon}</div>
-                    <div className={'version'}>
-                        <AntdTag>
-                            {platform.slice(0, 1)}-{ver}
-                        </AntdTag>
-                    </div>
-                    <div className={'info'}>
-                        <div className={'tool-name'}>{toolName}</div>
-                        <div className={'tool-id'}>{`ID: ${toolId}`}</div>
-                        {toolDesc && <div className={'tool-desc'}>{`简介：${toolDesc}`}</div>}
-                    </div>
-                    {showAuthor && (
-                        <div className={'author'} onClick={handleOnClickAuthor}>
-                            <div className={'avatar'}>
-                                <AntdAvatar
-                                    src={
-                                        <AntdImage
-                                            preview={false}
-                                            src={`data:image/png;base64,${author.userInfo.avatar}`}
-                                            alt={'Avatar'}
-                                        />
-                                    }
-                                    style={{ background: COLOR_BACKGROUND }}
-                                />
+                <Card
+                    data-component={'component-store-card'}
+                    style={{ overflow: 'visible', ...style }}
+                    ref={cardRef}
+                    {...props}
+                    onClick={handleCardOnClick}
+                >
+                    <FlexBox className={'store-card'}>
+                        <div className={'header'}>
+                            <div className={'version'}>
+                                <AntdTag>
+                                    {platform.slice(0, 1)}-{ver}
+                                </AntdTag>
+                            </div>
+                            <div className={'operation'}>
+                                {platform !== 'ANDROID' && supportPlatform.includes('ANDROID') && (
+                                    <AntdTooltip title={'Android 端'}>
+                                        <Icon
+                                            component={IconOxygenMobile}
+                                            onClick={handleOnAndroidBtnClick}
+                                        />
+                                    </AntdTooltip>
+                                )}
+                                {platform === 'DESKTOP' && supportPlatform.includes('WEB') && (
+                                    <AntdTooltip title={'Web 端'}>
+                                        <Icon
+                                            component={IconOxygenBrowser}
+                                            onClick={handleOnWebBtnClick}
+                                        />
+                                    </AntdTooltip>
+                                )}
+                                {platform === 'WEB' && supportPlatform.includes('DESKTOP') && (
+                                    <AntdTooltip title={'桌面端'}>
+                                        <Icon
+                                            component={IconOxygenDesktop}
+                                            onClick={handleOnDesktopBtnClick}
+                                        />
+                                    </AntdTooltip>
+                                )}
+                                <AntdTooltip title={'源码'}>
+                                    <Icon
+                                        component={IconOxygenCode}
+                                        onClick={handleOnSourceBtnClick}
+                                    />
+                                </AntdTooltip>
+                                {author.id !== userId && (
+                                    <AntdTooltip title={favorite_ ? '取消收藏' : '收藏'}>
+                                        <Icon
+                                            component={
+                                                favorite_ ? IconOxygenStarFilled : IconOxygenStar
+                                            }
+                                            style={{
+                                                color: favorite_ ? COLOR_PRODUCTION : undefined
+                                            }}
+                                            onClick={handleOnStarBtnClick}
+                                        />
+                                    </AntdTooltip>
+                                )}
+                                <DragHandle />
                             </div>
-                            <AntdTooltip title={author.username}>
-                                <div className={'author-name'}>{author.userInfo.nickname}</div>
-                            </AntdTooltip>
                         </div>
-                    )}
-                    <div className={'operation'}>
-                        {platform !== 'ANDROID' && supportPlatform.includes('ANDROID') && (
-                            <AntdTooltip title={'Android 端'}>
-                                <Icon
-                                    component={IconOxygenMobile}
-                                    onClick={handleOnAndroidBtnClick}
-                                />
-                            </AntdTooltip>
+                        <div className={'icon'}>
+                            <img src={`data:image/svg+xml;base64,${icon}`} alt={'Icon'} />
+                        </div>
+                        <div className={'info'}>
+                            <div className={'tool-name'}>{toolName}</div>
+                            <div className={'tool-id'}>{`ID: ${toolId}`}</div>
+                            {toolDesc && <div className={'tool-desc'}>{`简介：${toolDesc}`}</div>}
+                        </div>
+                        {showAuthor && (
+                            <div className={'author'} onClick={handleOnClickAuthor}>
+                                <div className={'avatar'}>
+                                    <AntdAvatar
+                                        src={
+                                            <AntdImage
+                                                preview={false}
+                                                src={`data:image/png;base64,${author.userInfo.avatar}`}
+                                                alt={'Avatar'}
+                                            />
+                                        }
+                                        style={{ background: COLOR_BACKGROUND }}
+                                    />
+                                </div>
+                                <AntdTooltip title={author.username}>
+                                    <div className={'author-name'}>{author.userInfo.nickname}</div>
+                                </AntdTooltip>
+                            </div>
                         )}
-                        {platform === 'DESKTOP' && supportPlatform.includes('WEB') && (
-                            <AntdTooltip title={'Web 端'}>
-                                <Icon component={IconOxygenBrowser} onClick={handleOnWebBtnClick} />
-                            </AntdTooltip>
-                        )}
-                        {platform === 'WEB' && supportPlatform.includes('DESKTOP') && (
-                            <AntdTooltip title={'桌面端'}>
-                                <Icon
-                                    component={IconOxygenDesktop}
-                                    onClick={handleOnDesktopBtnClick}
-                                />
-                            </AntdTooltip>
-                        )}
-                        <AntdTooltip title={'源码'}>
-                            <Icon component={IconOxygenCode} onClick={handleOnSourceBtnClick} />
-                        </AntdTooltip>
-                        {author.id !== userId && (
-                            <AntdTooltip title={favorite_ ? '取消收藏' : '收藏'}>
-                                <Icon
-                                    component={favorite_ ? IconOxygenStarFilled : IconOxygenStar}
-                                    style={{ color: favorite_ ? COLOR_PRODUCTION : undefined }}
-                                    onClick={handleOnStarBtnClick}
-                                />
-                            </AntdTooltip>
-                        )}
-                    </div>
-                </FlexBox>
-            </Card>
+                    </FlexBox>
+                </Card>
+            </Draggable>
             {contextHolder}
         </>
     )