@lobehub/lobehub 2.0.0-next.187 → 2.0.0-next.189

package/src/features/ResourceManager/components/Explorer/ListView/ListItem/index.tsx

@@ -1,4 +1,4 @@
-import { Button, Center, Checkbox, Flexbox, Icon } from '@lobehub/ui';
+import { Button, Center, Checkbox, ContextMenuTrigger, Flexbox, Icon } from '@lobehub/ui';
 import { App, Input } from 'antd';
 import { createStaticStyles, cssVar, cx } from 'antd-style';
 import dayjs from 'dayjs';
@@ -23,6 +23,7 @@ import { formatSize } from '@/utils/format';
 import { isChunkingUnsupported } from '@/utils/isChunkingUnsupported';
 
 import DropdownMenu from '../../ItemDropdown/DropdownMenu';
+import { useFileItemDropdown } from '../../ItemDropdown/useFileItemDropdown';
 import ChunksBadge from './ChunkTag';
 
 dayjs.extend(relativeTime);
@@ -37,10 +38,6 @@ const styles = createStaticStyles(({ css }) => {
 
       &:hover {
         background: ${cssVar.colorFillTertiary};
-
-        .file-list-item-hover {
-          opacity: 1;
-        }
       }
     `,
 
@@ -58,12 +55,14 @@ const styles = createStaticStyles(({ css }) => {
       opacity: 0.5;
     `,
 
-    hover: cx(
-      'file-list-item-hover',
-      css`
-        opacity: 0;
-      `,
-    ),
+    hover: css`
+      opacity: 0;
+
+      &[data-popup-open],
+      .file-list-item-group:hover & {
+        opacity: 1;
+      }
+    `,
     item: css`
       padding-block: 0;
       padding-inline: 0 24px;
@@ -324,169 +323,172 @@ const FileListItem = memo<FileListItemProps>(
       }
     }, [pendingRenameItemId, id, isFolder, resourceManagerState]);
 
+    const { menuItems } = useFileItemDropdown({
+      fileType,
+      filename: name,
+      id,
+      knowledgeBaseId: resourceManagerState.libraryId,
+      onRenameStart: isFolder ? handleRenameStart : undefined,
+      sourceType,
+      url,
+    });
+
     return (
-      <Flexbox
-        align={'center'}
-        className={cx(
-          styles.container,
-          selected && styles.selected,
-          isDragging && styles.dragging,
-          isOver && styles.dragOver,
-        )}
-        data-drop-target-id={id}
-        data-is-folder={String(isFolder)}
-        draggable={!!resourceManagerState.libraryId}
-        height={48}
-        horizontal
-        onDragEnd={handleDragEnd}
-        onDragLeave={handleDragLeave}
-        onDragOver={handleDragOver}
-        onDragStart={handleDragStart}
-        onDrop={handleDrop}
-        paddingInline={8}
-        style={{
-          borderBlockEnd: `1px solid ${cssVar.colorBorderSecondary}`,
-        }}
-      >
+      <ContextMenuTrigger items={menuItems}>
         <Flexbox
           align={'center'}
-          className={styles.item}
-          distribution={'space-between'}
-          flex={1}
+          className={cx(
+            styles.container,
+            'file-list-item-group',
+            selected && styles.selected,
+            isDragging && styles.dragging,
+            isOver && styles.dragOver,
+          )}
+          data-drop-target-id={id}
+          data-is-folder={String(isFolder)}
+          draggable={!!resourceManagerState.libraryId}
+          height={48}
           horizontal
-          onClick={handleItemClick}
+          onDragEnd={handleDragEnd}
+          onDragLeave={handleDragLeave}
+          onDragOver={handleDragOver}
+          onDragStart={handleDragStart}
+          onDrop={handleDrop}
+          paddingInline={8}
+          style={{
+            borderBlockEnd: `1px solid ${cssVar.colorBorderSecondary}`,
+          }}
         >
-          <Flexbox align={'center'} className={styles.nameContainer} horizontal>
-            <Center
-              height={48}
+          <Flexbox
+            align={'center'}
+            className={styles.item}
+            distribution={'space-between'}
+            flex={1}
+            horizontal
+            onClick={handleItemClick}
+          >
+            <Flexbox align={'center'} className={styles.nameContainer} horizontal>
+              <Center
+                height={48}
+                onClick={(e) => {
+                  e.stopPropagation();
+
+                  onSelectedChange(id, !selected, e.shiftKey, index);
+                }}
+                onPointerDown={(e) => e.stopPropagation()}
+                style={{ paddingInline: 4 }}
+              >
+                <Checkbox checked={selected} />
+              </Center>
+              <Flexbox
+                align={'center'}
+                justify={'center'}
+                style={{ fontSize: 24, marginInline: 8, width: 24 }}
+              >
+                {isFolder ? (
+                  <Icon icon={FolderIcon} size={24} />
+                ) : isPage ? (
+                  emoji ? (
+                    <span style={{ fontSize: 24 }}>{emoji}</span>
+                  ) : (
+                    <Center height={24} width={24}>
+                      <Icon icon={FileText} size={24} />
+                    </Center>
+                  )
+                ) : (
+                  <FileIcon fileName={name} fileType={fileType} size={24} />
+                )}
+              </Flexbox>
+              {isRenaming && isFolder ? (
+                <Input
+                  onBlur={handleRenameConfirm}
+                  onChange={(e) => setRenamingValue(e.target.value)}
+                  onClick={(e) => e.stopPropagation()}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') {
+                      e.preventDefault();
+                      handleRenameConfirm();
+                    } else if (e.key === 'Escape') {
+                      e.preventDefault();
+                      handleRenameCancel();
+                    }
+                  }}
+                  onPointerDown={(e) => e.stopPropagation()}
+                  ref={inputRef}
+                  size="small"
+                  style={{ flex: 1, maxWidth: 400 }}
+                  value={renamingValue}
+                />
+              ) : (
+                <span className={styles.name}>{name || t('file:pageList.untitled')}</span>
+              )}
+            </Flexbox>
+            <Flexbox
+              align={'center'}
+              gap={8}
+              horizontal
               onClick={(e) => {
                 e.stopPropagation();
-
-                onSelectedChange(id, !selected, e.shiftKey, index);
               }}
               onPointerDown={(e) => e.stopPropagation()}
-              style={{ paddingInline: 4 }}
             >
-              <Checkbox checked={selected} />
-            </Center>
-            <Flexbox
-              align={'center'}
-              justify={'center'}
-              style={{ fontSize: 24, marginInline: 8, width: 24 }}
-            >
-              {isFolder ? (
-                <Icon icon={FolderIcon} size={24} />
-              ) : isPage ? (
-                emoji ? (
-                  <span style={{ fontSize: 24 }}>{emoji}</span>
+              {!isFolder &&
+                (fileStoreState.isCreatingFileParseTask ||
+                isNull(chunkingStatus) ||
+                !chunkingStatus ? (
+                  <div
+                    className={fileStoreState.isCreatingFileParseTask ? undefined : styles.hover}
+                    title={t(
+                      isSupportedForChunking
+                        ? 'FileManager.actions.chunkingTooltip'
+                        : 'FileManager.actions.chunkingUnsupported',
+                    )}
+                  >
+                    <Button
+                      disabled={!isSupportedForChunking}
+                      icon={FileBoxIcon}
+                      loading={fileStoreState.isCreatingFileParseTask}
+                      onClick={() => {
+                        fileStoreState.parseFiles([id]);
+                      }}
+                      size={'small'}
+                      type={'text'}
+                    >
+                      {t(
+                        fileStoreState.isCreatingFileParseTask
+                          ? 'FileManager.actions.createChunkingTask'
+                          : 'FileManager.actions.chunking',
+                      )}
+                    </Button>
+                  </div>
                 ) : (
-                  <Center height={24} width={24}>
-                    <Icon icon={FileText} size={24} />
-                  </Center>
-                )
-              ) : (
-                <FileIcon fileName={name} fileType={fileType} size={24} />
-              )}
+                  <div style={{ cursor: 'default' }}>
+                    <ChunksBadge
+                      chunkCount={chunkCount}
+                      chunkingError={chunkingError}
+                      chunkingStatus={chunkingStatus}
+                      embeddingError={embeddingError}
+                      embeddingStatus={embeddingStatus}
+                      finishEmbedding={finishEmbedding}
+                      id={id}
+                    />
+                  </div>
+                ))}
+              <DropdownMenu className={styles.hover} items={menuItems} />
             </Flexbox>
-            {isRenaming && isFolder ? (
-              <Input
-                onBlur={handleRenameConfirm}
-                onChange={(e) => setRenamingValue(e.target.value)}
-                onClick={(e) => e.stopPropagation()}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter') {
-                    e.preventDefault();
-                    handleRenameConfirm();
-                  } else if (e.key === 'Escape') {
-                    e.preventDefault();
-                    handleRenameCancel();
-                  }
-                }}
-                onPointerDown={(e) => e.stopPropagation()}
-                ref={inputRef}
-                size="small"
-                style={{ flex: 1, maxWidth: 400 }}
-                value={renamingValue}
-              />
-            ) : (
-              <span className={styles.name}>{name || t('file:pageList.untitled')}</span>
-            )}
-          </Flexbox>
-          <Flexbox
-            align={'center'}
-            gap={8}
-            horizontal
-            onClick={(e) => {
-              e.stopPropagation();
-            }}
-            onPointerDown={(e) => e.stopPropagation()}
-          >
-            {!isFolder &&
-              (fileStoreState.isCreatingFileParseTask ||
-              isNull(chunkingStatus) ||
-              !chunkingStatus ? (
-                <div
-                  className={fileStoreState.isCreatingFileParseTask ? undefined : styles.hover}
-                  title={t(
-                    isSupportedForChunking
-                      ? 'FileManager.actions.chunkingTooltip'
-                      : 'FileManager.actions.chunkingUnsupported',
-                  )}
-                >
-                  <Button
-                    disabled={!isSupportedForChunking}
-                    icon={FileBoxIcon}
-                    loading={fileStoreState.isCreatingFileParseTask}
-                    onClick={() => {
-                      fileStoreState.parseFiles([id]);
-                    }}
-                    size={'small'}
-                    type={'text'}
-                  >
-                    {t(
-                      fileStoreState.isCreatingFileParseTask
-                        ? 'FileManager.actions.createChunkingTask'
-                        : 'FileManager.actions.chunking',
-                    )}
-                  </Button>
-                </div>
-              ) : (
-                <div style={{ cursor: 'default' }}>
-                  <ChunksBadge
-                    chunkCount={chunkCount}
-                    chunkingError={chunkingError}
-                    chunkingStatus={chunkingStatus}
-                    embeddingError={embeddingError}
-                    embeddingStatus={embeddingStatus}
-                    finishEmbedding={finishEmbedding}
-                    id={id}
-                  />
-                </div>
-              ))}
-            <div className={styles.hover}>
-              <DropdownMenu
-                fileType={fileType}
-                filename={name}
-                id={id}
-                knowledgeBaseId={resourceManagerState.libraryId}
-                onRenameStart={isFolder ? handleRenameStart : undefined}
-                sourceType={sourceType}
-                url={url}
-              />
-            </div>
           </Flexbox>
+          {!isDragging && (
+            <>
+              <Flexbox className={styles.item} width={FILE_DATE_WIDTH}>
+                {displayTime}
+              </Flexbox>
+              <Flexbox className={styles.item} width={FILE_SIZE_WIDTH}>
+                {isFolder || isPage ? '-' : formatSize(size)}
+              </Flexbox>
+            </>
+          )}
         </Flexbox>
-        {!isDragging && (
-          <>
-            <Flexbox className={styles.item} width={FILE_DATE_WIDTH}>
-              {displayTime}
-            </Flexbox>
-            <Flexbox className={styles.item} width={FILE_SIZE_WIDTH}>
-              {isFolder || isPage ? '-' : formatSize(size)}
-            </Flexbox>
-          </>
-        )}
-      </Flexbox>
+      </ContextMenuTrigger>
     );
   },
 );

package/src/features/ResourceManager/components/Explorer/MasonryView/MasonryFileItem/index.tsx

@@ -1,4 +1,4 @@
-import { Checkbox } from '@lobehub/ui';
+import { Checkbox, showContextMenu } from '@lobehub/ui';
 import { createStaticStyles, cssVar, cx } from 'antd-style';
 import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
@@ -13,6 +13,7 @@ import { documentService } from '@/services/document';
 import { type FileListItem } from '@/types/files';
 
 import DropdownMenu from '../../ItemDropdown/DropdownMenu';
+import { useFileItemDropdown } from '../../ItemDropdown/useFileItemDropdown';
 import DefaultFileItem from './DefaultFileItem';
 import ImageFileItem from './ImageFileItem';
 import MarkdownFileItem from './MarkdownFileItem';
@@ -346,6 +347,15 @@ const MasonryFileItem = memo<MasonryFileItemProps>(
       }
     }, [isMarkdown, isPage, url, isInView, markdownContent, id]);
 
+    const { menuItems } = useFileItemDropdown({
+      fileType,
+      filename: name,
+      id,
+      knowledgeBaseId,
+      sourceType,
+      url,
+    });
+
     return (
       <div
         className={cx(
@@ -357,6 +367,10 @@ const MasonryFileItem = memo<MasonryFileItemProps>(
         data-drop-target-id={id}
         data-is-folder={isFolder}
         draggable={!!knowledgeBaseId}
+        onContextMenu={(e) => {
+          e.preventDefault();
+          showContextMenu(menuItems());
+        }}
         onDragEnd={handleDragEnd}
         onDragLeave={handleDragLeave}
         onDragOver={handleDragOver}
@@ -379,13 +393,7 @@ const MasonryFileItem = memo<MasonryFileItemProps>(
           onClick={(e) => e.stopPropagation()}
           onPointerDown={(e) => e.stopPropagation()}
         >
-          <DropdownMenu
-            fileType={fileType}
-            filename={name}
-            id={id}
-            knowledgeBaseId={knowledgeBaseId}
-            url={url}
-          />
+          <DropdownMenu items={menuItems} />
         </div>
 
         <div

package/src/features/ResourceManager/components/Explorer/ToolBar/ActionIconWithChevron.tsx

@@ -10,14 +10,15 @@ interface ActionIconWithChevronProps extends ComponentProps<typeof Button> {
 }
 
 const ActionIconWithChevron = memo<ActionIconWithChevronProps>(
-  ({ icon, title, style, disabled, type = 'text', ...rest }) => {
+  ({ icon, title, style, disabled, className, ...rest }) => {
     return (
       <Button
+        {...rest}
+        className={className}
         disabled={disabled}
         style={{ paddingInline: 4, ...style }}
         title={title}
-        type={type}
-        {...rest}
+        type={'text'}
       >
         <Flexbox align={'center'} gap={4} horizontal>
           <Icon color={cssVar.colorIcon} icon={icon} size={18} />

package/src/features/ResourceManager/components/Explorer/ToolBar/BatchActionsDropdown.tsx

@@ -1,6 +1,5 @@
-import { Icon } from '@lobehub/ui';
-import { App, Dropdown } from 'antd';
-import type { MenuProps } from 'antd';
+import { type DropdownItem, DropdownMenu, Icon } from '@lobehub/ui';
+import { App } from 'antd';
 import {
   BookMinusIcon,
   BookPlusIcon,
@@ -36,8 +35,8 @@ const BatchActionsDropdown = memo<BatchActionsDropdownProps>(
 
     const libraryId = useResourceManagerStore((s) => s.libraryId);
 
-    const menuItems = useMemo<MenuProps['items']>(() => {
-      const items: MenuProps['items'] = [];
+    const menuItems = useMemo<DropdownItem[]>(() => {
+      const items: DropdownItem[] = [];
 
       // Show delete library option only when in a knowledge base and no files selected
       if (libraryId && selectCount === 0) {
@@ -138,18 +137,13 @@ const BatchActionsDropdown = memo<BatchActionsDropdownProps>(
     }, [libraryId, selectCount, onActionClick, t, modal, message]);
 
     return (
-      <Dropdown
-        disabled={disabled}
-        menu={{ items: menuItems }}
-        placement="bottomLeft"
-        trigger={['click']}
-      >
+      <DropdownMenu items={menuItems} placement="bottomLeft" triggerProps={{ disabled }}>
         <ActionIconWithChevron
           disabled={disabled}
           icon={CircleEllipsisIcon}
           title={t('FileManager.actions.batchActions', 'Batch actions')}
         />
-      </Dropdown>
+      </DropdownMenu>
     );
   },
 );

package/src/features/ResourceManager/components/Explorer/ToolBar/SortDropdown.tsx

@@ -1,5 +1,4 @@
-import { Dropdown } from 'antd';
-import type { MenuProps } from 'antd';
+import { type DropdownItem, DropdownMenu } from '@lobehub/ui';
 import { ArrowDownAZ } from 'lucide-react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -22,22 +21,23 @@ const SortDropdown = memo(() => {
     [t],
   );
 
-  const menuItems: MenuProps['items'] = sortOptions.map((option) => ({
+  const menuItems: DropdownItem[] = sortOptions.map((option) => ({
     key: option.key,
     label: option.label,
     onClick: () => setSorter(option.key as 'name' | 'createdAt' | 'size'),
+    style:
+      option.key === (sorter || 'createdAt')
+        ? { backgroundColor: 'var(--ant-control-item-bg-active)' }
+        : {},
   }));
 
   const currentSortLabel =
     sortOptions.find((option) => option.key === sorter)?.label || t('FileManager.sort.dateAdded');
 
   return (
-    <Dropdown
-      menu={{ items: menuItems, selectedKeys: [sorter || 'createdAt'] }}
-      trigger={['click']}
-    >
+    <DropdownMenu items={menuItems}>
       <ActionIconWithChevron icon={ArrowDownAZ} title={currentSortLabel} />
-    </Dropdown>
+    </DropdownMenu>
   );
 });
 

package/src/features/ResourceManager/components/Explorer/ToolBar/ViewSwitcher.tsx

@@ -1,6 +1,4 @@
-import { Icon } from '@lobehub/ui';
-import { Dropdown } from 'antd';
-import type { MenuProps } from 'antd';
+import { type DropdownItem, DropdownMenu, Icon } from '@lobehub/ui';
 import { Grid3x3Icon, ListIcon } from 'lucide-react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -20,31 +18,30 @@ const ViewSwitcher = memo(() => {
   const currentViewLabel =
     viewMode === 'list' ? t('FileManager.view.list') : t('FileManager.view.masonry');
 
-  const menuItems = useMemo<MenuProps['items']>(() => {
+  const menuItems = useMemo<DropdownItem[]>(() => {
     return [
       {
         icon: <Icon icon={ListIcon} />,
         key: 'list',
         label: t('FileManager.view.list'),
         onClick: () => setViewMode('list'),
+        style: viewMode === 'list' ? { backgroundColor: 'var(--ant-control-item-bg-active)' } : {},
       },
       {
         icon: <Icon icon={Grid3x3Icon} />,
         key: 'masonry',
         label: t('FileManager.view.masonry'),
         onClick: () => setViewMode('masonry'),
+        style:
+          viewMode === 'masonry' ? { backgroundColor: 'var(--ant-control-item-bg-active)' } : {},
       },
     ];
-  }, [setViewMode, t]);
+  }, [setViewMode, t, viewMode]);
 
   return (
-    <Dropdown
-      menu={{ items: menuItems, selectedKeys: [viewMode] }}
-      placement="bottomRight"
-      trigger={['click']}
-    >
+    <DropdownMenu items={menuItems} placement="bottomRight">
       <ActionIconWithChevron icon={currentViewIcon} title={currentViewLabel} />
-    </Dropdown>
+    </DropdownMenu>
   );
 });