fix: Support more hotkey and fix bugs in audiotool

packages/lb-components/src/components/attributeList/index.tsx

@@ -1,13 +1,17 @@
+import lockSvg from '@/assets/attributeIcon/icon_eyeLock_a.svg';
+import unlockSvg from '@/assets/attributeIcon/icon_eyeLock_h.svg';
 import { COLORS_ARRAY, NULL_COLOR } from '@/data/Style';
 import { ColorTag } from '@/components/colorTag';
 import { Radio } from 'antd/es';
-import React, { useState } from 'react';
-import { Popover } from 'antd';
+import React, { useState, useEffect } from 'react';
+import { Popover, message } from 'antd';
 import ColorPalette from '../colorPalette';
 import { CloseOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 import { ILimit, IDefaultSize } from '@labelbee/lb-utils';
 import LimitPopover from './components/limitPopover';
+import _ from 'lodash';
+import { CommonToolUtils, MathUtils } from '@labelbee/lb-annotation';
 
 export const ATTRIBUTE_COLORS = [NULL_COLOR].concat(COLORS_ARRAY);
 
@@ -39,6 +43,7 @@ const AttributeList = React.forwardRef((props: IProps, ref) => {
 
   const [paletteVisible, setPaletteVisible] = useState<boolean>(false);
   const [editConfigIndex, setEditConfigIndex] = useState<number | undefined>(undefined);
+  const [attributeLockList, setAttributeLockList] = useState<any[]>([]);
 
   let NEW_ATTRIBUTE_COLORS = [...ATTRIBUTE_COLORS];
 
@@ -52,19 +57,84 @@ const AttributeList = React.forwardRef((props: IProps, ref) => {
     className = 'sensebee-radio-group-no-limit-height';
   }
 
+  const keyDown = (e: any) => {
+    if (!CommonToolUtils.hotkeyFilter(e) || props?.forbidColor) {
+      // 如果为输入框则进行过滤
+      return;
+    }
+    let keyCode = e.keyCode;
+    // 文件夹标签工具没有无属性
+    if (props.forbidDefault === true) {
+      keyCode = keyCode - 1;
+    }
+    let attributeInfo;
+
+    if (MathUtils.isInRange(e.keyCode, [48, 57])) {
+      attributeInfo = props.list[keyCode - 48];
+    }
+
+    if (MathUtils.isInRange(e.keyCode, [96, 105])) {
+      attributeInfo = props.list[keyCode - 96];
+    }
+    if (e.shiftKey && attributeInfo) {
+      if (!props?.attributeLockChange) {
+        // 过滤属性查看事件
+        return;
+      }
+      checkLock(e, attributeInfo);
+      e.preventDefault();
+      return;
+    }
+
+    if (MathUtils.isInRange(e.keyCode, [48, 57]) || MathUtils.isInRange(e.keyCode, [96, 105])) {
+      props?.attributeChanged?.(attributeInfo?.value ?? '');
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('keydown', keyDown);
+    return () => window.removeEventListener('keydown', keyDown);
+  });
+
   const changeColor = (value: string, color: string) => {
     if (props.updateColorConfig) {
       props.updateColorConfig(value, color);
     }
   };
 
+  const attributeClick = (e: any, attributeInfo: any) => {
+    if (e.shiftKey && props?.attributeLockChange) {
+      checkLock(e, attributeInfo);
+      return;
+    }
+    props.attributeChanged(e.target.value);
+  };
+
+  const checkLock = (e: any, attributeInfo: any) => {
+    if (props?.forbidColor) {
+      return;
+    }
+    const hadLock = attributeLockList.includes(attributeInfo.value);
+    let newAttributeLockList = _.cloneDeep(attributeLockList);
+    if (hadLock) {
+      newAttributeLockList = newAttributeLockList.filter((i) => i !== attributeInfo.value);
+    } else {
+      newAttributeLockList.push(attributeInfo.value);
+    }
+    setAttributeLockList(newAttributeLockList);
+    props?.attributeLockChange?.(newAttributeLockList);
+    if (!hadLock) {
+      message.success(`查看属性：${attributeInfo.label}，只显示所选属性的标注内容`);
+    }
+    e.preventDefault();
+  };
+
   return (
     <div className={className} style={props.style}>
       <Radio.Group
         name='radiogroup'
         defaultValue={props?.selectedAttribute}
         value={props?.selectedAttribute}
-        onChange={(e) => props.attributeChanged(e.target.value)}
         ref={ref as any}
       >
         {list.map((i: any, index: number) => {
@@ -97,7 +167,7 @@ const AttributeList = React.forwardRef((props: IProps, ref) => {
           const showLimitPopover = isChosen && hasLimit && props.forbidShowLimitPopover !== true;
 
           return (
-            <Radio value={i.value} ref={radioRef} key={i.label + index}>
+            <Radio value={i.value} ref={radioRef} key={i.label + index} onClick={(e) => attributeClick(e, i)}>
               <span className='sensebee-radio-label' title={i.label}>
                 {!props?.forbidColor && (
                   <Popover
@@ -142,6 +212,16 @@ const AttributeList = React.forwardRef((props: IProps, ref) => {
                 {i.label}
               </span>
 
+              {!props?.forbidColor && props?.attributeLockChange && (
+                <img
+                  onClick={(e) => checkLock(e, i)}
+                  src={attributeLockList.includes(i.value) ? lockSvg : unlockSvg}
+                  style={{
+                    display: attributeLockList.includes(i.value) ? 'inline-block' : '',
+                  }}
+                  className='sensebee-radio-icon'
+                />
+              )}
               {showLimitPopover && <LimitPopover limit={i.limit} updateSize={props?.updateSize} />}
               <span className='sensebee-radio-num'>{hotKey}</span>
             </Radio>

packages/lb-components/src/components/audioAnnotate/index.tsx

@@ -330,16 +330,45 @@ const AudioAnnotate: React.FC<AppProps & IProps> = (props) => {
     }
   }, [loading])
 
+  useEffect(() => {
+    toolInstanceRef.current.emit = (event: string) => {
+      const listener = toolInstanceRef.current.fns.get(event);
+      if (listener) {
+        listener.forEach((fn: any) => {
+          if (fn) {
+            fn?.();
+          }
+        });
+      }
+    };
+
+    toolInstanceRef.current.fns = new Map()
+    toolInstanceRef.current.singleOn = (event: string, func: () => void) => {
+      toolInstanceRef.current.fns.set(event, [func]);
+    };
+
+    toolInstanceRef.current.on = (event: string, func: () => void) => {
+      toolInstanceRef.current.singleOn(event, func);
+    };
+
+    toolInstanceRef.current.unbindAll = (eventName: string) => {
+      toolInstanceRef.current.fns.delete(eventName);
+    };
+  }, [])
+
   useEffect(() => {
     toolInstanceRef.current.exportData = () => {
       return [[result], { duration, valid }];
     };
 
     toolInstanceRef.current.setResult = updateResult
     toolInstanceRef.current.clearResult = clearResult
-
+    toolInstanceRef.current.currentPageResult = result?.regions
+    toolInstanceRef.current.emit('updatePageNumber')
   }, [result]);
 
+
+
   const currentResult = useMemo(() => {
     const stepResult = basicInfo[`step_${stepInfo?.step}`]
     return stepResult?.result || []

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

@@ -437,14 +437,12 @@ export const AudioPlayer = ({
       playImmediately: true,
     });
 
-    const regionParam: IAudioTimeSlice = {
+    const regionParam = {
       id,
       start: decimalReserved(start, 3),
       end: decimalReserved(end, 3),
-      attribute: '',
-      text: '',
     }
-    updateRegion?.(regionParam);
+    updateRegion?.(regionParam as IAudioTimeSlice);
     update();
   };
 

packages/lb-components/src/hooks/annotation.ts

@@ -12,9 +12,9 @@ export interface ICustomToolInstance {
   valid: boolean;
   exportData: () => [any, {}];
   exportCustomData: () => {};
-  singleOn: () => void;
+  singleOn: (eventName: string, callback: (...args: any[]) => void) => void;
   clearResult: () => void;
-  on: () => void;
+  on: (eventName: string, callback: (...args: any[]) => void) => void;
   unbind: () => void;
   setResult: (result: any) => void;
   setValid: (valid: boolean) => void;

packages/lb-components/src/index.scss

@@ -349,6 +349,9 @@ $prefix: bee;
 
       &:hover {
         background: #f3f4ff;
+        .sensebee-radio-icon{
+          display: inline-block;
+        }
       }
 
       > span:nth-child(2) {
@@ -374,6 +377,10 @@ $prefix: bee;
         overflow: hidden;
         text-overflow: ellipsis;
       }
+      .sensebee-radio-icon{
+        margin-right: 10px;
+        display: none;
+      }
     }
   }
 

packages/lb-components/src/views/MainView/toolFooter/FooterTips/ToolHotKey/audioText/index.tsx

@@ -25,6 +25,7 @@ import {
 } from '../line'
 import IconPolygonMerge from '@/assets/annotation/toolHotKeyIcon/icon_polygonMerge_kj.svg';
 import IconPolygonCut from '@/assets/annotation/toolHotKeyIcon/icon_polygonCut_kj.svg';
+import DrawRectSvg from '@/assets/annotation/toolHotKeyIcon/icon_frame_kj.svg';
 
 const audioForward = _.cloneDeep(forward);
 const audioBackward = _.cloneDeep(backward);
@@ -53,6 +54,21 @@ export const splitAudio = {
   shortCut: ['Alt', 'X'],
 };
 
+audioForward.name = '下一个';
+audioBackward.name = '上一个';
+audioBackTrack.name = '后退0.1s';
+audioForwardTrack.name = '前进0.1s';
+audioToggleClipMode.name = '切换截取模式';
+audioClipped.name = '截取';
+audioTag.name = '打标签/属性';
+audioPrev.name = '上一区间';
+audioNext.name = '下一区间';
+
+audioClipped.icon = DrawRectSvg;
+
+audioToggleClipMode.noticeInfo = '';
+
+console.log(audioClipped)
 const audioTextToolShortCurTable = [
   saveResult,
   audioToggleTagMode,