feat: Audio tool secondary attribute optimizatio

packages/lb-annotation/src/core/toolOperation/ViewOperation.ts

@@ -25,9 +25,9 @@ import { DEFAULT_FONT, ELineTypes, SEGMENT_NUMBER } from '@/constant/tool';
 import { DEFAULT_TEXT_SHADOW, DEFAULT_TEXT_OFFSET, TEXT_ATTRIBUTE_OFFSET } from '@/constant/annotation';
 import ImgUtils, { cropAndEnlarge } from '@/utils/ImgUtils';
 import CanvasUtils from '@/utils/tool/CanvasUtils';
+import TagUtils from '@/utils/tool/TagUtils';
 import { BasicToolOperation, IBasicToolOperationProps } from './basicToolOperation';
 import { pointCloudLidar2image } from '../pointCloud/matrix';
-import TagUtils from '@/utils/tool/TagUtils';
 
 const newScope = 3;
 const DEFAULT_RADIUS = 3;

packages/lb-components/src/components/audioPlayer/clipRegion/index.module.scss

@@ -6,6 +6,7 @@
   height: 100%;
   border: 1px solid transparent;
   font-size: 12px;
+  overflow-y: auto;
   .loop {
     position: absolute;
     width: 18px;

packages/lb-components/src/components/audioPlayer/clipRegion/index.tsx

@@ -11,10 +11,11 @@ import LoopIcon from '@/assets/annotation/audio/loop.svg';
 import { Typography } from 'antd';
 import { useClickAway } from 'ahooks';
 import { classnames } from '@/utils';
-import { IAudioTimeSlice, ITextConfigItem } from '@labelbee/lb-utils';
+import { IAudioTimeSlice, IInputList, ITextConfigItem } from '@labelbee/lb-utils';
 
 import styles from './index.module.scss';
 import { useTranslation } from 'react-i18next';
+import { TagUtils } from '@labelbee/lb-annotation';
 
 interface IProps {
   /** 挂载到目标元素 */
@@ -35,6 +36,38 @@ interface IProps {
 }
 
 const { Paragraph } = Typography;
+
+const SubAttributeShowText = ({
+  result,
+  subAttributeList,
+  textStyle,
+}: {
+  result: { [key: string]: string };
+  subAttributeList: IInputList[];
+  textStyle: {
+    color: string;
+    backgroundColor: string;
+  };
+}) => {
+  const list = TagUtils.getTagNameList(result, subAttributeList);
+  return (
+    <div>
+      {list.map((i, index) => {
+        return (
+          <Paragraph
+            ellipsis={{ rows: 2 }}
+            className={styles.text}
+            key={index}
+            style={{ ...textStyle, marginBottom: 0 }}
+          >
+            {`${i.keyName}：${i.value.join(`、`)}`}
+          </Paragraph>
+        );
+      })}
+    </div>
+  );
+};
+
 /** 展示在音频图上的截取片段 */
 const ClipRegion = (props: IProps) => {
   const { t } = useTranslation();
@@ -45,11 +78,13 @@ const ClipRegion = (props: IProps) => {
     clipTextConfigurable,
     selectedRegion,
     clipTextList,
+    secondaryAttributeConfigurable,
+    subAttributeList,
   } = audioClipState;
 
   const ref = useRef(null);
   const { el, region, edgeAdsorption, clipping, instance } = props;
-  const { attribute = '', text = '', id, start, end } = region;
+  const { attribute = '', text = '', id, start, end, subAttribute } = region;
 
   const { id: selectedId } = selectedRegion;
   const attributeColor = getAttributeColor(attribute, clipAttributeList);
@@ -116,6 +151,13 @@ const ClipRegion = (props: IProps) => {
           <div style={textStyle} className={styles.attribute}>
             {getAttributeShowText(attribute, [{ value: '', key: '无属性' }, ...clipAttributeList])}
           </div>
+          {secondaryAttributeConfigurable && subAttribute && subAttributeList && (
+            <SubAttributeShowText
+              result={subAttribute}
+              subAttributeList={subAttributeList}
+              textStyle={textStyle}
+            />
+          )}
         </div>
       )}