@zjlab-fe/data-hub-ui 0.32.0 → 0.32.2

package/es/components/corpus-card/index.js

@@ -1,13 +1,15 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Flex, Tag, Popover } from 'antd';
 import { useRef, useState, useMemo, useEffect } from 'react';
-import { "new-task-card-item" as new_task_card_item, "card-actived" as card_actived, "new-task-card-header" as new_task_card_header, "new-task-card-title" as new_task_card_title, "new-task-card-update-time" as new_task_card_update_time, "new-task-card-update-time-icon" as new_task_card_update_time_icon, "new-task-card-update-time-text" as new_task_card_update_time_text, "new-task-card-tags" as new_task_card_tags, "new-task-card-tags-measure" as new_task_card_tags_measure, "new-task-card-tag-measure-item" as new_task_card_tag_measure_item, "new-task-card-tags-visible" as new_task_card_tags_visible, "new-task-card-tags-ellipsis" as new_task_card_tags_ellipsis, "new-task-card-tags-popover-content" as new_task_card_tags_popover_content, "new-task-card-description" as new_task_card_description } from './index.module.scss.js';
+import { "new-task-card-item" as new_task_card_item, "card-actived" as card_actived, "new-task-card-header" as new_task_card_header, "new-task-card-title" as new_task_card_title, "new-task-card-update-time" as new_task_card_update_time, "new-task-card-update-time-icon" as new_task_card_update_time_icon, "new-task-card-update-time-text" as new_task_card_update_time_text, "new-task-card-tags" as new_task_card_tags, "new-task-card-tags-measure" as new_task_card_tags_measure, "new-task-card-tag-measure-item" as new_task_card_tag_measure_item, "new-task-card-tags-visible" as new_task_card_tags_visible, "new-task-card-tags-ellipsis" as new_task_card_tags_ellipsis, "new-task-card-tags-popover-content" as new_task_card_tags_popover_content, "new-task-card-description" as new_task_card_description, "new-task-card-description-popover-content" as new_task_card_description_popover_content } from './index.module.scss.js';
 import sourceIcon from '../../assets/source.png.js';
 
 function CorpusCard({ card, isActive, width, onClick, onCardClick }) {
     const tagContainerRef = useRef(null);
+    const descriptionRef = useRef(null);
     const tagMeasureRefs = useRef([]);
     const [visibleTagCount, setVisibleTagCount] = useState(card.labels.length);
+    const [isDescriptionOverflow, setIsDescriptionOverflow] = useState(false);
     const labelTypeColorMap = useMemo(() => {
         var _a;
         return (_a = card.labelTypeColorMap) !== null && _a !== void 0 ? _a : [];
@@ -77,12 +79,32 @@ function CorpusCard({ card, isActive, width, onClick, onCardClick }) {
             resizeObserver.disconnect();
         };
     }, [card.labels, width]);
+    useEffect(() => {
+        const checkDescriptionOverflow = () => {
+            const element = descriptionRef.current;
+            if (!element) {
+                setIsDescriptionOverflow(false);
+                return;
+            }
+            setIsDescriptionOverflow(element.scrollHeight > element.clientHeight);
+        };
+        checkDescriptionOverflow();
+        const resizeObserver = new ResizeObserver(() => {
+            checkDescriptionOverflow();
+        });
+        if (descriptionRef.current) {
+            resizeObserver.observe(descriptionRef.current);
+        }
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [card.description, width]);
     const needCollapseTags = visibleTagCount < card.labels.length;
     const visibleTags = needCollapseTags ? card.labels.slice(0, visibleTagCount) : card.labels;
     const hiddenTags = needCollapseTags ? card.labels.slice(visibleTagCount) : [];
     return (jsx("div", { className: `${new_task_card_item} ${isActive ? card_actived : ''}`, style: { width: width || 375 }, onClick: () => handleCardClick(card.id), children: jsxs(Flex, { vertical: true, gap: 16, children: [jsxs("div", { className: new_task_card_header, children: [jsx("div", { className: new_task_card_title, children: card.name }), jsxs("span", { className: new_task_card_update_time, children: [jsx("img", { src: sourceIcon, alt: "update-time-icon", className: new_task_card_update_time_icon }), jsx("span", { className: new_task_card_update_time_text, children: formattedUpdateTime })] })] }), jsxs("div", { className: new_task_card_tags, children: [jsx("div", { className: new_task_card_tags_measure, children: card.labels.map((label, index) => (jsx("span", { ref: (element) => {
                                     tagMeasureRefs.current[index] = element;
-                                }, className: new_task_card_tag_measure_item, children: jsx(Tag, { style: getLabelColor(label.type, labelTypeColorMap), bordered: true, children: label.name }) }, `measure-${card.id}-${label.type}-${label.name}`))) }), jsxs("div", { ref: tagContainerRef, className: new_task_card_tags_visible, children: [visibleTags.map((label) => (jsx(Tag, { style: getLabelColor(label.type, labelTypeColorMap), bordered: true, children: label.name }, `${card.id}-${label.type}-${label.name}`))), needCollapseTags ? (jsx(Popover, { trigger: "hover", content: jsx("div", { className: new_task_card_tags_popover_content, children: hiddenTags.map((label) => (jsx(Tag, { style: getLabelColor(label.type, labelTypeColorMap), bordered: true, children: label.name }, `hidden-${card.id}-${label.type}-${label.name}`))) }), children: jsx(Tag, { className: new_task_card_tags_ellipsis, children: "..." }) })) : null] })] }), jsx("div", { className: new_task_card_description, children: card.description })] }) }, card.id));
+                                }, className: new_task_card_tag_measure_item, children: jsx(Tag, { style: getLabelColor(label.type, labelTypeColorMap), bordered: true, children: label.name }) }, `measure-${card.id}-${label.type}-${label.name}`))) }), jsxs("div", { ref: tagContainerRef, className: new_task_card_tags_visible, children: [visibleTags.map((label) => (jsx(Tag, { style: getLabelColor(label.type, labelTypeColorMap), bordered: true, children: label.name }, `${card.id}-${label.type}-${label.name}`))), needCollapseTags ? (jsx(Popover, { trigger: "hover", content: jsx("div", { className: new_task_card_tags_popover_content, children: hiddenTags.map((label) => (jsx(Tag, { style: getLabelColor(label.type, labelTypeColorMap), bordered: true, children: label.name }, `hidden-${card.id}-${label.type}-${label.name}`))) }), children: jsx(Tag, { className: new_task_card_tags_ellipsis, children: "..." }) })) : null] })] }), jsx(Popover, { trigger: isDescriptionOverflow ? 'hover' : [], content: jsx("div", { className: new_task_card_description_popover_content, children: card.description }), children: jsx("div", { ref: descriptionRef, className: new_task_card_description, children: card.description }) })] }) }, card.id));
 }
 
 export { CorpusCard as default };

package/es/components/corpus-card/index.module.scss.js

@@ -130,6 +130,16 @@ style.textContent = `@charset "UTF-8";
   gap: 4px;
   max-width: 260px;
 }
+.index-module__new-task-card-description-popover-content___Qw4N7 {
+  max-width: 320px;
+  font-family: "AlibabaPuHuiTi-3-55-Regular";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+  color: #545b64;
+  word-break: break-word;
+}
 .index-module__new-task-card-tags-ellipsis___GVtdA {
   display: flex;
   flex-direction: row;
@@ -167,7 +177,7 @@ style.textContent = `@charset "UTF-8";
 }`;
 document.head.appendChild(style);
 
-var new_task_cards_container = "index-module__new-task-cards-container___ydHyH";var new_task_card_item = "index-module__new-task-card-item___4Ij8K";var card_actived = "index-module__card-actived___Ds-rJ";var new_task_card_header = "index-module__new-task-card-header___YNZyQ";var new_task_card_title = "index-module__new-task-card-title___ij3JL";var new_task_card_update_time = "index-module__new-task-card-update-time___-v0WT";var new_task_card_update_time_icon = "index-module__new-task-card-update-time-icon___1BRTB";var new_task_card_update_time_text = "index-module__new-task-card-update-time-text___JDOy0";var new_task_card_description = "index-module__new-task-card-description___a-I9s";var new_task_card_tags = "index-module__new-task-card-tags___kIHzm";var new_task_card_tags_visible = "index-module__new-task-card-tags-visible___r4txK";var new_task_card_tags_measure = "index-module__new-task-card-tags-measure___B-jpV";var new_task_card_tag_measure_item = "index-module__new-task-card-tag-measure-item___yWIae";var new_task_card_tags_popover_content = "index-module__new-task-card-tags-popover-content___rrMoB";var new_task_card_tags_ellipsis = "index-module__new-task-card-tags-ellipsis___GVtdA";var new_task_card_empty_title = "index-module__new-task-card-empty-title___di6z-";var card_detail_btn = "index-module__card-detail-btn___QHpSP";
-var styles = {"new-task-cards-container":"index-module__new-task-cards-container___ydHyH","new-task-card-item":"index-module__new-task-card-item___4Ij8K","card-actived":"index-module__card-actived___Ds-rJ","new-task-card-header":"index-module__new-task-card-header___YNZyQ","new-task-card-title":"index-module__new-task-card-title___ij3JL","new-task-card-update-time":"index-module__new-task-card-update-time___-v0WT","new-task-card-update-time-icon":"index-module__new-task-card-update-time-icon___1BRTB","new-task-card-update-time-text":"index-module__new-task-card-update-time-text___JDOy0","new-task-card-description":"index-module__new-task-card-description___a-I9s","new-task-card-tags":"index-module__new-task-card-tags___kIHzm","new-task-card-tags-visible":"index-module__new-task-card-tags-visible___r4txK","new-task-card-tags-measure":"index-module__new-task-card-tags-measure___B-jpV","new-task-card-tag-measure-item":"index-module__new-task-card-tag-measure-item___yWIae","new-task-card-tags-popover-content":"index-module__new-task-card-tags-popover-content___rrMoB","new-task-card-tags-ellipsis":"index-module__new-task-card-tags-ellipsis___GVtdA","new-task-card-empty-title":"index-module__new-task-card-empty-title___di6z-","card-detail-btn":"index-module__card-detail-btn___QHpSP"};
+var new_task_cards_container = "index-module__new-task-cards-container___ydHyH";var new_task_card_item = "index-module__new-task-card-item___4Ij8K";var card_actived = "index-module__card-actived___Ds-rJ";var new_task_card_header = "index-module__new-task-card-header___YNZyQ";var new_task_card_title = "index-module__new-task-card-title___ij3JL";var new_task_card_update_time = "index-module__new-task-card-update-time___-v0WT";var new_task_card_update_time_icon = "index-module__new-task-card-update-time-icon___1BRTB";var new_task_card_update_time_text = "index-module__new-task-card-update-time-text___JDOy0";var new_task_card_description = "index-module__new-task-card-description___a-I9s";var new_task_card_tags = "index-module__new-task-card-tags___kIHzm";var new_task_card_tags_visible = "index-module__new-task-card-tags-visible___r4txK";var new_task_card_tags_measure = "index-module__new-task-card-tags-measure___B-jpV";var new_task_card_tag_measure_item = "index-module__new-task-card-tag-measure-item___yWIae";var new_task_card_tags_popover_content = "index-module__new-task-card-tags-popover-content___rrMoB";var new_task_card_description_popover_content = "index-module__new-task-card-description-popover-content___Qw4N7";var new_task_card_tags_ellipsis = "index-module__new-task-card-tags-ellipsis___GVtdA";var new_task_card_empty_title = "index-module__new-task-card-empty-title___di6z-";var card_detail_btn = "index-module__card-detail-btn___QHpSP";
+var styles = {"new-task-cards-container":"index-module__new-task-cards-container___ydHyH","new-task-card-item":"index-module__new-task-card-item___4Ij8K","card-actived":"index-module__card-actived___Ds-rJ","new-task-card-header":"index-module__new-task-card-header___YNZyQ","new-task-card-title":"index-module__new-task-card-title___ij3JL","new-task-card-update-time":"index-module__new-task-card-update-time___-v0WT","new-task-card-update-time-icon":"index-module__new-task-card-update-time-icon___1BRTB","new-task-card-update-time-text":"index-module__new-task-card-update-time-text___JDOy0","new-task-card-description":"index-module__new-task-card-description___a-I9s","new-task-card-tags":"index-module__new-task-card-tags___kIHzm","new-task-card-tags-visible":"index-module__new-task-card-tags-visible___r4txK","new-task-card-tags-measure":"index-module__new-task-card-tags-measure___B-jpV","new-task-card-tag-measure-item":"index-module__new-task-card-tag-measure-item___yWIae","new-task-card-tags-popover-content":"index-module__new-task-card-tags-popover-content___rrMoB","new-task-card-description-popover-content":"index-module__new-task-card-description-popover-content___Qw4N7","new-task-card-tags-ellipsis":"index-module__new-task-card-tags-ellipsis___GVtdA","new-task-card-empty-title":"index-module__new-task-card-empty-title___di6z-","card-detail-btn":"index-module__card-detail-btn___QHpSP"};
 
-export { card_actived as "card-actived", card_detail_btn as "card-detail-btn", styles as default, new_task_card_description as "new-task-card-description", new_task_card_empty_title as "new-task-card-empty-title", new_task_card_header as "new-task-card-header", new_task_card_item as "new-task-card-item", new_task_card_tag_measure_item as "new-task-card-tag-measure-item", new_task_card_tags as "new-task-card-tags", new_task_card_tags_ellipsis as "new-task-card-tags-ellipsis", new_task_card_tags_measure as "new-task-card-tags-measure", new_task_card_tags_popover_content as "new-task-card-tags-popover-content", new_task_card_tags_visible as "new-task-card-tags-visible", new_task_card_title as "new-task-card-title", new_task_card_update_time as "new-task-card-update-time", new_task_card_update_time_icon as "new-task-card-update-time-icon", new_task_card_update_time_text as "new-task-card-update-time-text", new_task_cards_container as "new-task-cards-container" };
+export { card_actived as "card-actived", card_detail_btn as "card-detail-btn", styles as default, new_task_card_description as "new-task-card-description", new_task_card_description_popover_content as "new-task-card-description-popover-content", new_task_card_empty_title as "new-task-card-empty-title", new_task_card_header as "new-task-card-header", new_task_card_item as "new-task-card-item", new_task_card_tag_measure_item as "new-task-card-tag-measure-item", new_task_card_tags as "new-task-card-tags", new_task_card_tags_ellipsis as "new-task-card-tags-ellipsis", new_task_card_tags_measure as "new-task-card-tags-measure", new_task_card_tags_popover_content as "new-task-card-tags-popover-content", new_task_card_tags_visible as "new-task-card-tags-visible", new_task_card_title as "new-task-card-title", new_task_card_update_time as "new-task-card-update-time", new_task_card_update_time_icon as "new-task-card-update-time-icon", new_task_card_update_time_text as "new-task-card-update-time-text", new_task_cards_container as "new-task-cards-container" };

package/es/components/notion-editor/index.js

@@ -112,6 +112,7 @@ const parseCopyPasteBlocks = (plainText, docId) => {
 const NotionEditor = forwardRef(({ initContent, editable = false, className = '', docId, onChange, onImageUpload, onFileUpload, onImageUploadByUrl, }, ref) => {
     const placeholder = '输入 "/" 快速插入内容';
     const docIdRef = useRef(docId);
+    const containerRef = useRef(null);
     const [tocCollapsed, setTocCollapsed] = useState(false);
     const [tocItems, setTocItems] = useState([]);
     docIdRef.current = docId;
@@ -239,7 +240,8 @@ const NotionEditor = forwardRef(({ initContent, editable = false, className = ''
     const showToc = tocItems.length > 0;
     const tocTitle = useMemo(() => (tocCollapsed ? '展开目录' : '收起目录'), [tocCollapsed]);
     const handleTocItemClick = useCallback((blockId) => {
-        const target = document.querySelector(`.data-hub-ui-blocknote-editor [data-id="${CSS.escape(blockId)}"]`);
+        var _a;
+        const target = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.data-hub-ui-blocknote-editor [data-id="${CSS.escape(blockId)}"]`);
         target === null || target === void 0 ? void 0 : target.scrollIntoView({ behavior: 'smooth', block: 'start' });
     }, []);
     useImperativeHandle(ref, () => ({
@@ -254,7 +256,7 @@ const NotionEditor = forwardRef(({ initContent, editable = false, className = ''
         focus: () => editor === null || editor === void 0 ? void 0 : editor.focus(),
         isEmpty: () => { var _a; return (_a = editor === null || editor === void 0 ? void 0 : editor.isEmpty) !== null && _a !== void 0 ? _a : true; },
     }));
-    return (jsxs("div", { className: `data-hub-ui-blocknote-editor-wrapper ${tocCollapsed ? 'is-toc-collapsed' : ''} ${className}`, children: [jsx(BlockNoteView, { editor: editor, formattingToolbar: false, onChange: handleChange, theme: "light", className: "data-hub-ui-blocknote-editor", children: jsx(FormattingToolbarController, { formattingToolbar: () => (jsxs(FormattingToolbar, { children: [getFormattingToolbarItems(), jsx(BasicTextStyleButton, { basicTextStyle: "code" })] })) }) }), showToc && (jsxs("aside", { className: `data-hub-ui-blocknote-toc ${tocCollapsed ? 'is-collapsed' : ''}`, children: [jsxs("button", { type: "button", className: "data-hub-ui-blocknote-toc__toggle", "aria-label": tocTitle, "aria-expanded": !tocCollapsed, onClick: () => setTocCollapsed((value) => !value), children: [jsx("span", { children: "\u76EE\u5F55" }), jsx("span", { className: "data-hub-ui-blocknote-toc__toggle-icon", children: tocCollapsed ? '‹' : '›' })] }), !tocCollapsed && (jsx("nav", { className: "data-hub-ui-blocknote-toc__list", "aria-label": "\u6587\u6863\u76EE\u5F55", children: tocItems.map((item) => (jsx("button", { type: "button", className: "data-hub-ui-blocknote-toc__item", style: { '--toc-level': item.level }, title: item.title, onClick: () => handleTocItemClick(item.id), children: item.title }, item.id))) }))] }))] }));
+    return (jsxs("div", { ref: containerRef, className: `data-hub-ui-blocknote-editor-wrapper ${tocCollapsed ? 'is-toc-collapsed' : ''} ${className}`, children: [jsx(BlockNoteView, { editor: editor, formattingToolbar: false, onChange: handleChange, theme: "light", className: "data-hub-ui-blocknote-editor", children: jsx(FormattingToolbarController, { formattingToolbar: () => (jsxs(FormattingToolbar, { children: [getFormattingToolbarItems(), jsx(BasicTextStyleButton, { basicTextStyle: "code" })] })) }) }), showToc && (jsxs("aside", { className: `data-hub-ui-blocknote-toc ${tocCollapsed ? 'is-collapsed' : ''}`, children: [jsxs("button", { type: "button", className: "data-hub-ui-blocknote-toc__toggle", "aria-label": tocTitle, "aria-expanded": !tocCollapsed, onClick: () => setTocCollapsed((value) => !value), children: [jsx("span", { children: "\u76EE\u5F55" }), jsx("span", { className: "data-hub-ui-blocknote-toc__toggle-icon", children: tocCollapsed ? '‹' : '›' })] }), !tocCollapsed && (jsx("nav", { className: "data-hub-ui-blocknote-toc__list", "aria-label": "\u6587\u6863\u76EE\u5F55", children: tocItems.map((item) => (jsx("button", { type: "button", className: "data-hub-ui-blocknote-toc__item", style: { '--toc-level': item.level }, title: item.title, onClick: () => handleTocItemClick(item.id), children: item.title }, item.id))) }))] }))] }));
 });
 NotionEditor.displayName = 'NotionEditor';
 

package/es/components/notion-editor/index.scss.js

@@ -24,11 +24,10 @@ function useStyle() {
 }
 .data-hub-ui-blocknote-toc {
   position: sticky;
-  top: 10px;
+  top: 30px;
   display: flex;
   flex-direction: column;
   width: 240px;
-  max-height: 560px;
   overflow: hidden;
   color: #334155;
   font-size: 13px;
@@ -76,7 +75,7 @@ function useStyle() {
   flex: 1;
   gap: 2px;
   min-height: 0;
-  max-height: 516px;
+  max-height: 500px;
   margin-top: 8px;
   padding: 4px 0 4px 8px;
   overflow-y: auto;
@@ -105,25 +104,9 @@ function useStyle() {
   color: #2563eb;
   background: #eff6ff;
 }
-@media (max-width: 960px) {
-  .data-hub-ui-blocknote-editor-wrapper {
-    display: block;
-    padding: 16px 24px;
-  }
-  .data-hub-ui-blocknote-toc {
-    position: sticky;
-    top: 0;
-    right: auto;
-    width: 100%;
-    max-height: none;
-    margin-bottom: 12px;
-    background: #ffffff;
-  }
-  .data-hub-ui-blocknote-toc.is-collapsed {
-    width: 42px;
-  }
+@media (max-height: 640px) {
   .data-hub-ui-blocknote-toc__list {
-    max-height: 220px;
+    max-height: 400px;
   }
 }
 .data-hub-ui-blocknote-editor .bn-editor {