optimize

haiwen · Jan 19, 2025 · 3c4db1d · 3c4db1d
1 parent 93f5501
commit 3c4db1d
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 53 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -14,7 +14,7 @@
     "@seafile/sdoc-editor": "1.0.206",
     "@seafile/seafile-calendar": "0.0.28",
     "@seafile/seafile-editor": "1.0.133",
-    "@seafile/sf-metadata-ui-component": "^0.0.64",
+    "@seafile/sf-metadata-ui-component": "^0.0.65-beta.1",
     "@seafile/stldraw-editor": "0.1.5",
     "@uiw/codemirror-extensions-langs": "^4.19.4",
     "@uiw/codemirror-themes": "^4.23.5",

diff --git a/frontend/src/components/dialog/image-dialog/index.css b/frontend/src/components/dialog/image-dialog/index.css
@@ -15,8 +15,8 @@
 }
 
 .lightbox-side-panel .cur-view-detail {
-  background-color: #333;
-  border-left: 1px solid #666;
+  background-color: inherit;
+  border: none;
 }
 
 .lightbox-side-panel .side-panel-controller {
@@ -60,32 +60,35 @@
 
 .lightbox-side-panel .detail-header .detail-title .name,
 .lightbox-side-panel .file-details-collapse .file-details-collapse-header .file-details-collapse-header-title,
-.lightbox-side-panel .dirent-detail-item .dirent-detail-item-name {
+.lightbox-side-panel .dirent-detail-item .dirent-detail-item-name,
+.lightbox-side-panel .sf-metadata-number-property-detail-editor {
   color: #fff;
 }
 
 .lightbox-side-panel .detail-body {
-  overflow-y: auto;
   scrollbar-color: #666 #333;
-  padding: 0;
-}
-
-.lightbox-side-panel .detail-content {
-  margin: 0 16px;
+  padding: 0 16px 8px;
 }
 
 .lightbox-side-panel .file-details-collapse {
   margin-bottom: 20px;
 }
 
-.lightbox-side-panel .sf-metadata-ui.collaborator-item {
+.lightbox-side-panel .sf-metadata-ui.collaborator-item,
+.lightbox-side-panel .sf-metadata-text-property-detail-editor:not(.formatter),
+.lightbox-side-panel .sf-metadata-number-property-detail-editor:focus {
   color: #212529;
 }
 
+.lightbox-side-panel .sf-metadata-text-property-detail-editor:not(.formatter) {
+  cursor: text;
+}
+
 .lightbox-side-panel .dirent-detail-item .dirent-detail-item-value:not(.editable) .sf-metadata-record-cell-empty:empty::before,
 .lightbox-side-panel .sf-metadata-property-detail-editor:empty::before,
 .lightbox-side-panel .sf-metadata-property-detail-capture-information-item .dirent-detail-item-value:empty::before,
-.lightbox-side-panel .file-details-collapse .file-details-collapse-header .sf3-font-down {
+.lightbox-side-panel .file-details-collapse .file-details-collapse-header .sf3-font-down,
+.lightbox-side-panel .sf-metadata-number-property-detail-editor::placeholder {
   color: #999;
 }
 

diff --git a/frontend/src/components/dialog/image-dialog/index.js b/frontend/src/components/dialog/image-dialog/index.js
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { gettext } from '../../../utils/constants';
 import Lightbox from '@seafile/react-image-lightbox';
@@ -7,6 +7,8 @@ import { SYSTEM_FOLDERS } from '../../../constants';
 import EmbeddedFileDetails from '../../dirent-detail/embedded-file-details';
 import { Utils } from '../../../utils/utils';
 import Icon from '../../icon';
+import { metadataAPI } from '../../../metadata';
+import toaster from '../../toast';
 
 import '@seafile/react-image-lightbox/style.css';
 import './index.css';
@@ -16,6 +18,7 @@ const SIDE_PANEL_EXPANDED_WIDTH = 300;
 
 const ImageDialog = ({ repoID, repoInfo, enableRotate: oldEnableRotate, imageItems, imageIndex, closeImagePopup, moveToPrevImage, moveToNextImage, onDeleteImage, onRotateImage, isCustomPermission }) => {
   const [expanded, setExpanded] = useState(false);
+  const [enableFaceRecognition, setEnableFaceRecognition] = useState(false);
 
   const { enableOCR, enableMetadata, canModify, onOCR: onOCRAPI, OCRSuccessCallBack } = useMetadataAIOperations();
 
@@ -31,6 +34,15 @@ const ImageDialog = ({ repoID, repoInfo, enableRotate: oldEnableRotate, imageIte
     setExpanded(!expanded);
   }, [expanded]);
 
+  useEffect(() => {
+    metadataAPI.getFaceRecognitionStatus(repoID).then(res => {
+      setEnableFaceRecognition(res.data.enabled);
+    }).catch(error => {
+      const errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }, [repoID]);
+
   const imageItemsLength = imageItems.length;
   if (imageItemsLength === 0) return null;
   const id = imageItems[imageIndex].id;
@@ -77,6 +89,7 @@ const ImageDialog = ({ repoID, repoInfo, enableRotate: oldEnableRotate, imageIte
                 isShowControl: false,
               }
             }}
+            enableFaceRecognition={enableFaceRecognition}
           />
         )}
       </div>

diff --git a/frontend/src/components/dirent-detail/dirent-details/file-details/index.js b/frontend/src/components/dirent-detail/dirent-details/file-details/index.js
@@ -142,7 +142,7 @@ const FileDetails = React.memo(({ repoID, dirent, path, direntDetail, onFileTagC
             })}
           </Collapse>
         )}
-        {enableMetadataManagement && enableMetadata && enableFaceRecognition && Utils.imageCheck(dirent.name) && (
+        {Utils.imageCheck(dirent.name) && enableMetadataManagement && enableMetadata && enableFaceRecognition && (
           <People repoID={repoID} record={record} />
         )}
       </>

diff --git a/frontend/src/components/dirent-detail/embedded-file-details/file-details.js b/frontend/src/components/dirent-detail/embedded-file-details/file-details.js
@@ -5,13 +5,12 @@ import DetailItem from '../detail-item';
 import { CellType } from '../../../metadata/constants';
 import { gettext } from '../../../utils/constants';
 import { Utils } from '../../../utils/utils';
-import { MetadataDetails, useMetadata, useMetadataDetails } from '../../../metadata';
+import { MetadataDetails, useMetadataDetails } from '../../../metadata';
 import { useMetadataStatus } from '../../../hooks';
 import People from '../people';
 
-const FileDetails = ({ repoID, dirent, direntDetail }) => {
+const FileDetails = ({ repoID, dirent, direntDetail, enableFaceRecognition }) => {
   const { enableMetadataManagement, enableMetadata } = useMetadataStatus();
-  const { enableFaceRecognition } = useMetadata();
   const { record } = useMetadataDetails();
 
   const sizeField = useMemo(() => ({ type: 'size', name: gettext('Size') }), []);
@@ -41,7 +40,7 @@ const FileDetails = ({ repoID, dirent, direntDetail }) => {
       {enableMetadata && (
         <MetadataDetails />
       )}
-      {enableMetadataManagement && enableMetadata && enableFaceRecognition && Utils.imageCheck(dirent.name) && (
+      {Utils.imageCheck(dirent.name) && enableMetadataManagement && enableMetadata && enableFaceRecognition && (
         <People repoID={repoID} record={record} />
       )}
     </>

diff --git a/frontend/src/components/dirent-detail/embedded-file-details/index.js b/frontend/src/components/dirent-detail/embedded-file-details/index.js
@@ -12,7 +12,7 @@ import { AI, Settings } from '../../../metadata/components/metadata-details';
 
 import './index.css';
 
-const EmbeddedFileDetails = ({ repoID, repoInfo, dirent, path, onClose, width = 300, className, component = {} }) => {
+const EmbeddedFileDetails = ({ repoID, repoInfo, dirent, path, onClose, width = 300, className, component = {}, enableFaceRecognition = false }) => {
   const { headerComponent } = component;
   const [direntDetail, setDirentDetail] = useState('');
 
@@ -38,14 +38,16 @@ const EmbeddedFileDetails = ({ repoID, repoInfo, dirent, path, onClose, width =
   useEffect(() => {
     if (isView || isTag) return;
 
+    let isNewContext = false;
     if (!window.sfMetadataContext) {
       const context = new MetadataContext();
       window.sfMetadataContext = context;
       window.sfMetadataContext.init({ repoID, repoInfo });
+      isNewContext = true;
     }
 
     return () => {
-      if (window.sfMetadataContext) {
+      if (window.sfMetadataContext && isNewContext) {
         window.sfMetadataContext.destroy();
         delete window['sfMetadataContext'];
       }
@@ -76,7 +78,7 @@ const EmbeddedFileDetails = ({ repoID, repoInfo, dirent, path, onClose, width =
         <Body>
           {dirent && direntDetail && (
             <div className="detail-content">
-              <FileDetails repoID={repoID} dirent={dirent} direntDetail={direntDetail} />
+              <FileDetails repoID={repoID} dirent={dirent} direntDetail={direntDetail} enableFaceRecognition={enableFaceRecognition} />
             </div>
           )}
         </Body>
@@ -92,6 +94,7 @@ EmbeddedFileDetails.propTypes = {
   repoInfo: PropTypes.object.isRequired,
   component: PropTypes.object,
   onClose: PropTypes.func.isRequired,
+  enableFaceRecognition: PropTypes.bool,
 };
 
 export default EmbeddedFileDetails;
diff --git a/frontend/src/metadata/components/metadata-details/location/index.js b/frontend/src/metadata/components/metadata-details/location/index.js
@@ -176,7 +176,7 @@ class Location extends React.Component {
         </DetailItem>
         {isLoading ? (<Loading />) : this.mapType && (
           <div className={classnames('dirent-detail-item dirent-detail-item-value-map', { 'd-none': !isValid })}>
-            <div className="w-100 h-100" ref={ref => this.ref = ref}></div>
+            <div className="w-100 h-100" ref={ref => this.ref = ref} id="sf-geolocation-map-container"></div>
           </div>
         )}
       </>