From db450a196f1797b31baacb5ceb0bf7e98460abd8 Mon Sep 17 00:00:00 2001
From: "lixinghua.vendor" <lixinghua.vendor@sensetime.com>
Date: Tue, 16 Jul 2024 17:06:44 +0800
Subject: [PATCH] fix: Audio tool sub-property display adjustments

---
 .../audioSide/clipSidebar/index.tsx           | 27 ++++++++++++++++---
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/packages/lb-components/src/components/audioAnnotate/audioSide/clipSidebar/index.tsx b/packages/lb-components/src/components/audioAnnotate/audioSide/clipSidebar/index.tsx
index e4c0ea411..a09232ee7 100644
--- a/packages/lb-components/src/components/audioAnnotate/audioSide/clipSidebar/index.tsx
+++ b/packages/lb-components/src/components/audioAnnotate/audioSide/clipSidebar/index.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import AttributeList from '@/components/attributeList';
 import { IAudioTimeSlice, ITextConfigItem } from '@labelbee/lb-utils';
-import { EventBus } from '@labelbee/lb-annotation';
+import { EventBus, TagUtils } from '@labelbee/lb-annotation';
 import ClipIcon from '@/assets/annotation/audio/clipSmall.svg';
 import ClipActiveIcon from '@/assets/annotation/audio/clipASmall.svg';
 import DeleteIcon from '@/assets/annotation/audio/delete.svg';
@@ -73,12 +73,31 @@ const ClipSidebar = (props: IClipSidebarProps) => {
     }),
   ];
 
+  // Display attribute and secondary attribute text
+  const getAttributeText = (
+    attribute: string,
+    subAttribute?: {
+      [key: string]: string;
+    },
+  ) => {
+    const text = getAttributeShowText(attribute, list);
+    const subAttributes = subAttribute
+      ? TagUtils.getTagNameList(subAttribute, subAttributeList)
+      : [];
+    let subAttributeText = '';
+    const segmentSymbol = '，\n';
+    subAttributes.forEach((i) => {
+      subAttributeText += `${i.keyName}：${i.value.join(`、`)}${segmentSymbol}`;
+    });
+    return `${text}${segmentSymbol}${subAttributeText}`;
+  };
+
   const showClipText = (region: IAudioTimeSlice) => {
     let clipShowText = '';
     if (clipTextConfigurable && clipTextList?.length > 0) {
       clipTextList.forEach((i: ITextConfigItem, index: number) => {
         const segmentSymbol = !clipAttributeConfigurable && index === 0 ? '' : '，';
-        clipShowText = clipShowText + `${segmentSymbol}${i.label}：${region[i.key]}`;
+        clipShowText = clipShowText + `${i.label}：${region[i.key]}${segmentSymbol}`;
       });
     }
     return clipShowText;
@@ -91,11 +110,11 @@ const ClipSidebar = (props: IClipSidebarProps) => {
         {regions.length > 0 ? (
           <div className={styles.regions}>
             {regions.map((item) => {
-              const { id, attribute, text, start, end } = item;
+              const { id, attribute, text, start, end, subAttribute } = item;
               const showLoop = id === selectedId && selectedRegion.loop;
 
               const showText = `${
-                clipAttributeConfigurable ? getAttributeShowText(attribute, list) : ''
+                clipAttributeConfigurable ? getAttributeText(attribute, subAttribute) : ''
               }${showClipText(item)}`;
               return (
                 <div