From 3c4db1d6c884b850c8fd3c5ae833e62868a0aa73 Mon Sep 17 00:00:00 2001 From: zhouwenxuan Date: Fri, 17 Jan 2025 15:59:54 +0800 Subject: [PATCH] optimize --- frontend/package-lock.json | 51 ++++++++----------- frontend/package.json | 2 +- .../components/dialog/image-dialog/index.css | 25 +++++---- .../components/dialog/image-dialog/index.js | 15 +++++- .../dirent-details/file-details/index.js | 2 +- .../embedded-file-details/file-details.js | 7 ++- .../embedded-file-details/index.js | 9 ++-- .../metadata-details/location/index.js | 2 +- 8 files changed, 60 insertions(+), 53 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index cea188dcf10..4e74f4e0432 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -19,7 +19,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", @@ -3233,20 +3233,18 @@ }, "node_modules/@formatjs/intl-unified-numberformat": { "version": "3.3.7", - "resolved": "https://registry.npmmirror.com/@formatjs/intl-unified-numberformat/-/intl-unified-numberformat-3.3.7.tgz", + "resolved": "https://registry.npmjs.org/@formatjs/intl-unified-numberformat/-/intl-unified-numberformat-3.3.7.tgz", "integrity": "sha512-KnWgLRHzCAgT9eyt3OS34RHoyD7dPDYhRcuKn+/6Kv2knDF8Im43J6vlSW6Hm1w63fNq3ZIT1cFk7RuVO3Psag==", "deprecated": "We have renamed the package to @formatjs/intl-numberformat", - "license": "MIT", "dependencies": { "@formatjs/intl-utils": "^2.3.0" } }, "node_modules/@formatjs/intl-utils": { "version": "2.3.0", - "resolved": "https://registry.npmmirror.com/@formatjs/intl-utils/-/intl-utils-2.3.0.tgz", + "resolved": "https://registry.npmjs.org/@formatjs/intl-utils/-/intl-utils-2.3.0.tgz", "integrity": "sha512-KWk80UPIzPmUg+P0rKh6TqspRw0G6eux1PuJr+zz47ftMaZ9QDwbGzHZbtzWkl5hgayM/qrKRutllRC7D/vVXQ==", - "deprecated": "the package is rather renamed to @formatjs/ecma-abstract with some changes in functionality (primarily selectUnit is removed and we don't plan to make any further changes to this package", - "license": "MIT" + "deprecated": "the package is rather renamed to @formatjs/ecma-abstract with some changes in functionality (primarily selectUnit is removed and we don't plan to make any further changes to this package" }, "node_modules/@gatsbyjs/reach-router": { "version": "1.3.9", @@ -5423,9 +5421,9 @@ } }, "node_modules/@seafile/sf-metadata-ui-component": { - "version": "0.0.64", - "resolved": "https://registry.npmjs.org/@seafile/sf-metadata-ui-component/-/sf-metadata-ui-component-0.0.64.tgz", - "integrity": "sha512-C4kLqsZCg+KutvOzsv65j58x7PQ6t8wPRJwXIBmEBSqB0/suZZnEV6uNhU5W83zN2CzHmGeRvg4+v+/Pj4pEiA==", + "version": "0.0.65-beta.1", + "resolved": "https://registry.npmjs.org/@seafile/sf-metadata-ui-component/-/sf-metadata-ui-component-0.0.65-beta.1.tgz", + "integrity": "sha512-oS0WLNDiXDXQXw0EVWK+fv8mNKOQfnchlrbSqb6IRjfQNIlmOhLt1w7iqcd7wabvyoLG5me3+k2RQynw0iTtUw==", "dependencies": { "@seafile/seafile-calendar": "0.0.28", "@seafile/seafile-editor": "^1.0.133", @@ -5451,9 +5449,8 @@ }, "node_modules/@seafile/sf-metadata-ui-component/node_modules/classnames": { "version": "2.3.2", - "resolved": "https://registry.npmmirror.com/classnames/-/classnames-2.3.2.tgz", - "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==", - "license": "MIT" + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", + "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" }, "node_modules/@seafile/slate": { "version": "0.91.8", @@ -8645,9 +8642,8 @@ }, "node_modules/bowser": { "version": "1.9.4", - "resolved": "https://registry.npmmirror.com/bowser/-/bowser-1.9.4.tgz", - "integrity": "sha512-9IdMmj2KjigRq6oWhmwv1W36pDuA4STQZ8q6YO9um+x07xgYNCD3Oou+WP/3L1HNz7iqythGet3/p4wvc8AAwQ==", - "license": "MIT" + "resolved": "https://registry.npmjs.org/bowser/-/bowser-1.9.4.tgz", + "integrity": "sha512-9IdMmj2KjigRq6oWhmwv1W36pDuA4STQZ8q6YO9um+x07xgYNCD3Oou+WP/3L1HNz7iqythGet3/p4wvc8AAwQ==" }, "node_modules/brace-expansion": { "version": "1.1.11", @@ -10022,9 +10018,8 @@ }, "node_modules/css-in-js-utils": { "version": "2.0.1", - "resolved": "https://registry.npmmirror.com/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz", + "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz", "integrity": "sha512-PJF0SpJT+WdbVVt0AOYp9C8GnuruRlL/UFW7932nLWmFLQTaWEzTBQEx7/hn4BuV+WON75iAViSUJLiU3PKbpA==", - "license": "MIT", "dependencies": { "hyphenate-style-name": "^1.0.2", "isobject": "^3.0.1" @@ -13375,9 +13370,8 @@ }, "node_modules/glamor": { "version": "2.20.40", - "resolved": "https://registry.npmmirror.com/glamor/-/glamor-2.20.40.tgz", + "resolved": "https://registry.npmjs.org/glamor/-/glamor-2.20.40.tgz", "integrity": "sha512-DNXCd+c14N9QF8aAKrfl4xakPk5FdcFwmH7sD0qnC0Pr7xoZ5W9yovhUrY/dJc3psfGGXC58vqQyRtuskyUJxA==", - "license": "MIT", "dependencies": { "fbjs": "^0.8.12", "inline-style-prefixer": "^3.0.6", @@ -14964,9 +14958,8 @@ }, "node_modules/inline-style-prefixer": { "version": "3.0.8", - "resolved": "https://registry.npmmirror.com/inline-style-prefixer/-/inline-style-prefixer-3.0.8.tgz", + "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-3.0.8.tgz", "integrity": "sha512-ne8XIyyqkRaNJ1JfL1NYzNdCNxq+MCBQhC8NgOQlzNm2vv3XxlP0VSLQUbSRCF6KPEoveCVEpayHoHzcMyZsMQ==", - "license": "MIT", "dependencies": { "bowser": "^1.7.3", "css-in-js-utils": "^2.0.0" @@ -14988,15 +14981,13 @@ }, "node_modules/intl-format-cache": { "version": "4.3.1", - "resolved": "https://registry.npmmirror.com/intl-format-cache/-/intl-format-cache-4.3.1.tgz", - "integrity": "sha512-OEUYNA7D06agqPOYhbTkl0T8HA3QKSuwWh1HiClEnpd9vw7N+3XsQt5iZ0GUEchp5CW1fQk/tary+NsbF3yQ1Q==", - "license": "BSD-3-Clause" + "resolved": "https://registry.npmjs.org/intl-format-cache/-/intl-format-cache-4.3.1.tgz", + "integrity": "sha512-OEUYNA7D06agqPOYhbTkl0T8HA3QKSuwWh1HiClEnpd9vw7N+3XsQt5iZ0GUEchp5CW1fQk/tary+NsbF3yQ1Q==" }, "node_modules/intl-messageformat": { "version": "7.8.4", - "resolved": "https://registry.npmmirror.com/intl-messageformat/-/intl-messageformat-7.8.4.tgz", + "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-7.8.4.tgz", "integrity": "sha512-yS0cLESCKCYjseCOGXuV4pxJm/buTfyCJ1nzQjryHmSehlptbZbn9fnlk1I9peLopZGGbjj46yHHiTAEZ1qOTA==", - "license": "BSD-3-Clause", "dependencies": { "intl-format-cache": "^4.2.21", "intl-messageformat-parser": "^3.6.4" @@ -15004,10 +14995,9 @@ }, "node_modules/intl-messageformat-parser": { "version": "3.6.4", - "resolved": "https://registry.npmmirror.com/intl-messageformat-parser/-/intl-messageformat-parser-3.6.4.tgz", + "resolved": "https://registry.npmjs.org/intl-messageformat-parser/-/intl-messageformat-parser-3.6.4.tgz", "integrity": "sha512-RgPGwue0mJtoX2Ax8EmMzJzttxjnva7gx0Q7mKJ4oALrTZvtmCeAw5Msz2PcjW4dtCh/h7vN/8GJCxZO1uv+OA==", "deprecated": "We've written a new parser that's 6x faster and is backwards compatible. Please use @formatjs/icu-messageformat-parser", - "license": "BSD-3-Clause", "dependencies": { "@formatjs/intl-unified-numberformat": "^3.2.0" } @@ -27480,9 +27470,8 @@ }, "node_modules/through": { "version": "2.3.8", - "resolved": "https://registry.npmmirror.com/through/-/through-2.3.8.tgz", - "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==", - "license": "MIT" + "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", + "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==" }, "node_modules/thunky": { "version": "1.1.0", diff --git a/frontend/package.json b/frontend/package.json index fc8d50f5f5f..802fda7c6a8 100644 --- 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 index efed6787d49..d81bb2397ed 100644 --- 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 index b217f56c3a7..f0da0069e22 100644 --- 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} /> )} 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 index c835af295b3..8c9998256ff 100644 --- 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 })} )} - {enableMetadataManagement && enableMetadata && enableFaceRecognition && Utils.imageCheck(dirent.name) && ( + {Utils.imageCheck(dirent.name) && enableMetadataManagement && enableMetadata && enableFaceRecognition && ( )} 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 index 0d346cbd57a..80bef599d38 100644 --- 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 && ( )} - {enableMetadataManagement && enableMetadata && enableFaceRecognition && Utils.imageCheck(dirent.name) && ( + {Utils.imageCheck(dirent.name) && enableMetadataManagement && enableMetadata && enableFaceRecognition && ( )} diff --git a/frontend/src/components/dirent-detail/embedded-file-details/index.js b/frontend/src/components/dirent-detail/embedded-file-details/index.js index acca221f91d..e7cec14728d 100644 --- 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 = {dirent && direntDetail && (
- +
)} @@ -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 index 621da811e3a..13f4a6ba80f 100644 --- 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 { {isLoading ? () : this.mapType && (
-
this.ref = ref}>
+
this.ref = ref} id="sf-geolocation-map-container">
)}