fix: image context path (#7262)

* fix: image context path

* feat: update code

* feat: optimize code style

---------

Co-authored-by: 杨国璇 <ygx@Hello-word.local>

frontend/src/metadata/components/context-menu/index.js

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types';
 
 import './index.css';
 
-const ContextMenu = ({ options, boundaryCoordinates, onOptionClick, ignoredTriggerElements }) => {
+const ContextMenu = ({
+  options,
+  boundaryCoordinates = { top: 0, right: window.innerWidth, bottom: window.innerHeight, left: 0 },
+  onOptionClick,
+  ignoredTriggerElements
+}) => {
   const menuRef = useRef(null);
   const [visible, setVisible] = useState(false);
   const [position, setPosition] = useState({ top: 0, left: 0 });

frontend/src/metadata/views/gallery/context-menu/index.js

@@ -19,7 +19,7 @@ const CONTEXT_MENU_KEY = {
   REMOVE: 'remove',
 };
 
-const GalleryContextMenu = ({ metadata, selectedImages, boundaryCoordinates, onDelete, onDuplicate, addFolder, onRemoveImage }) => {
+const GalleryContextMenu = ({ metadata, selectedImages, onDelete, onDuplicate, addFolder, onRemoveImage }) => {
   const [isZipDialogOpen, setIsZipDialogOpen] = useState(false);
   const [isCopyDialogOpen, setIsCopyDialogOpen] = useState(false);
 
@@ -68,7 +68,7 @@ const GalleryContextMenu = ({ metadata, selectedImages, boundaryCoordinates, onD
       return;
     }
     const dirents = selectedImages.map(image => {
-      const value = image.path === '/' ? image.name : `${image.path}/${image.name}`;
+      const value = image.parentDir === '/' ? image.name : `${image.parentDir}/${image.name}`;
       return value;
     });
     metadataAPI.zipDownload(repoID, '/', dirents).then((res) => {
@@ -100,13 +100,12 @@ const GalleryContextMenu = ({ metadata, selectedImages, boundaryCoordinates, onD
   }, [handleDownload, onDelete, selectedImages, toggleCopyDialog, onRemoveImage]);
 
   const dirent = new Dirent({ name: selectedImages[0]?.name });
-  const path = selectedImages[0]?.path;
+  const parentDir = selectedImages[0]?.parentDir;
 
   return (
     <>
       <ContextMenu
         options={options}
-        boundaryCoordinates={boundaryCoordinates}
         ignoredTriggerElements={['.metadata-gallery-image-item', '.metadata-gallery-grid-image']}
         onOptionClick={handleOptionClick}
       />
@@ -115,7 +114,7 @@ const GalleryContextMenu = ({ metadata, selectedImages, boundaryCoordinates, onD
           <ZipDownloadDialog
             repoID={repoID}
             path="/"
-            target={selectedImages.map(image => image.path === '/' ? image.name : `${image.path}/${image.name}`)}
+            target={selectedImages.map(image => image.parentDir === '/' ? image.name : `${image.parentDir}/${image.name}`)}
             toggleDialog={closeZipDialog}
           />
         </ModalPortal>
@@ -123,7 +122,7 @@ const GalleryContextMenu = ({ metadata, selectedImages, boundaryCoordinates, onD
       {isCopyDialogOpen && (
         <ModalPortal>
           <CopyDirent
-            path={path}
+            path={parentDir}
             repoID={repoID}
             dirent={dirent}
             isMultipleOperation={false}
@@ -141,7 +140,6 @@ const GalleryContextMenu = ({ metadata, selectedImages, boundaryCoordinates, onD
 GalleryContextMenu.propTypes = {
   metadata: PropTypes.object,
   selectedImages: PropTypes.array,
-  boundaryCoordinates: PropTypes.object,
   onDelete: PropTypes.func,
   onDuplicate: PropTypes.func,
   addFolder: PropTypes.func,

frontend/src/metadata/views/gallery/main.js

@@ -374,7 +374,6 @@ const Main = ({ isLoadingMore, metadata, onDelete, onLoadMore, duplicateRecord,
       <GalleryContextmenu
         metadata={metadata}
         selectedImages={selectedImages}
-        boundaryCoordinates={containerRef?.current?.getBoundingClientRect() || {}}
         onDelete={handleDeleteSelectedImages}
         onDuplicate={duplicateRecord}
         addFolder={onAddFolder}

frontend/src/metadata/views/kanban/boards/index.js

@@ -307,7 +307,6 @@ const Boards = ({ modifyRecord, deleteRecords, modifyColumnData, onCloseSettings
         </div>
       </div>
       <ContextMenu
-        boundaryCoordinates={{ top: 0, right: window.innerWidth, bottom: window.innerHeight, left: 0 }}
         selectedCard={selectedCard}
         onDelete={onDeleteRecords}
         onRename={onRename}

frontend/src/metadata/views/kanban/context-menu/index.js

@@ -23,7 +23,7 @@ const CONTEXT_MENU_KEY = {
   RENAME: 'rename',
 };
 
-const KanbanContextMenu = ({ boundaryCoordinates, selectedCard, onDelete, onRename }) => {
+const KanbanContextMenu = ({ selectedCard, onDelete, onRename }) => {
   const [isRenameDialogShow, setIsRenameDialogShow] = useState(false);
   const [isZipDialogOpen, setIsZipDialogOpen] = useState(false);
 
@@ -130,7 +130,6 @@ const KanbanContextMenu = ({ boundaryCoordinates, selectedCard, onDelete, onRena
     <>
       <ContextMenu
         options={options}
-        boundaryCoordinates={boundaryCoordinates}
         onOptionClick={handleOptionClick}
         ignoredTriggerElements={['.sf-metadata-kanban-card']}
       />
@@ -154,7 +153,6 @@ const KanbanContextMenu = ({ boundaryCoordinates, selectedCard, onDelete, onRena
 };
 
 KanbanContextMenu.propTypes = {
-  boundaryCoordinates: PropTypes.object,
   selectedCard: PropTypes.string,
   onDelete: PropTypes.func,
   onRename: PropTypes.func,

frontend/src/metadata/views/kanban/index.js

@@ -42,7 +42,7 @@ const Kanban = () => {
   }, [isShowSettings]);
 
   return (
-    <div className="sf-metadata-container sf-metadata-view-kanban-container">
+    <div className="sf-metadata-container">
       <div className="sf-metadata-view-kanban">
         <Boards
           modifyRecord={modifyRecord}

frontend/src/metadata/views/table/index.css

@@ -424,6 +424,9 @@
   height: 100%;
   width: 100%;
   overflow: hidden;
+}
+
+.sf-metadata-wrapper .sf-metadata-main .sf-metadata-container-transform {
   transform: translateZ(10px);
 }
 

frontend/src/metadata/views/table/index.js

@@ -151,7 +151,7 @@ const Table = () => {
   }, [containerRef]);
 
   return (
-    <div className="sf-metadata-container" ref={containerRef}>
+    <div className="sf-metadata-container sf-metadata-container-transform" ref={containerRef}>
       <TableMain
         isGroupView={isGroupView}
         isLoadingMore={isLoadingMore}