Merge pull request #366 from MMMMoriaty/alpha-audio

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(t('AttributeLockNotify', { label: 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/audioSide/clipSidebar/index.tsx

@@ -11,6 +11,7 @@ import LongText from '@/components/longText';
 import { classnames } from '@/utils';
 
 import styles from './index.module.scss';
+import { useTranslation } from 'react-i18next';
 
 interface IClipSidebarProps {
   /** 截取片段数组 */
@@ -22,6 +23,7 @@ interface IClipSidebarProps {
 const ClipSidebar = (props: IClipSidebarProps) => {
   const { regions = [], updateRegion, useAudioClipStore } = props;
   const { audioClipState, setAudioClipState } = useAudioClipStore();
+  const { t } = useTranslation();
 
   const {
     selectedAttribute,
@@ -57,7 +59,7 @@ const ClipSidebar = (props: IClipSidebarProps) => {
   return (
     <div className={styles.clipSidebar}>
       <div className={styles.clipResults}>
-        <div className={styles.title}>已截取音频</div>
+        <div className={styles.title}>{t('ClippedAudio')}</div>
         {regions.length > 0 ? (
           <div className={styles.regions}>
             {regions.map((item) => {
@@ -67,7 +69,7 @@ const ClipSidebar = (props: IClipSidebarProps) => {
               const showText = `${
                 clipAttributeConfigurable ? getAttributeShowText(attribute, list) : ''
               }${clipAttributeConfigurable && clipTextConfigurable ? '，' : ''}${
-                clipTextConfigurable ? `文本：${text}` : ''
+                clipTextConfigurable ? `${t('textTool')}：${text}` : ''
               }`;
               return (
                 <div
@@ -103,7 +105,7 @@ const ClipSidebar = (props: IClipSidebarProps) => {
             })}
           </div>
         ) : (
-          <div className={styles.empty}>暂无截取内容</div>
+          <div className={styles.empty}>{t('NoClippedData')}</div>
         )}
       </div>
       {clipAttributeConfigurable && clipAttributeList?.length > 0 && (

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

@@ -2,6 +2,7 @@ import styles from './index.module.scss';
 import React from 'react';
 import { Input } from 'antd';
 import { SearchOutlined } from '@ant-design/icons';
+import { useTranslation } from 'react-i18next';
 
 const syntheticEventStopPagination = (e: React.KeyboardEvent<HTMLInputElement>) => {
   e.stopPropagation();
@@ -16,6 +17,8 @@ const LabelFilterInput = ({
   value: string;
   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }) => {
+  const { t } = useTranslation();
+
   return (
     <Input
       className={styles.filterInput}
@@ -31,7 +34,7 @@ const LabelFilterInput = ({
         syntheticEventStopPagination(e);
       }}
       allowClear={true}
-      placeholder='搜索标签'
+      placeholder={t('SearchTag')}
       value={value}
       onChange={onChange}
     />

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

@@ -12,6 +12,7 @@ import { TagUtils } from '@labelbee/lb-annotation';
 import clearSmall from '@/assets/annotation/common/icon_clearSmall.svg';
 import clearSmallA from '@/assets/annotation/common/icon_clearSmall_a.svg';
 import { IEntityDetail } from '@/types/tool'
+import { withTranslation } from 'react-i18next';
 
 const createHighlightLabel = (key: string, val: string) => {
   return highlightKeyword(key, val, '#666FFF');
@@ -69,11 +70,12 @@ interface IProps {
   entityMap?: Map<string, IEntityDetail>;
   dynamicTag?: boolean; // 是否开始动态标签
   withPanelTab?: boolean;
+  t: any;
 }
 
 const { Panel } = Collapse;
 
-export default class LabelSidebar extends Component<IProps, IState> {
+class LabelSidebar extends Component<IProps, IState> {
   private sideBar: React.RefObject<HTMLDivElement> = React.createRef();
 
   public constructor(props: IProps) {
@@ -165,6 +167,7 @@ export default class LabelSidebar extends Component<IProps, IState> {
       tagResult,
       clearResult,
       entityMap,
+      t,
     } = this.props;
     const { hoverDeleteIndex, expandKeyList, inputValue } = this.state;
 
@@ -206,7 +209,6 @@ export default class LabelSidebar extends Component<IProps, IState> {
       if (!labelInfoSet) {
         return;
       }
-
       return labelInfoSet.map((info: ILabelInfo | IFilteredLabelInfo, index: number) => {
         if (info.subSelected) {
           if (inputValue && !info.hasShow) {
@@ -216,6 +218,7 @@ export default class LabelSidebar extends Component<IProps, IState> {
 
           // 判断是否有数据
           const isResult = TagUtils.judgeResultIsInInputList(info.value, tagResult?.[info.value as keyof typeof tagResult], inputList);
+
           return (
             <Collapse
               bordered={false}
@@ -235,7 +238,7 @@ export default class LabelSidebar extends Component<IProps, IState> {
                   >
                     <span>
                       {info.key}
-                      <Tooltip placement='bottom' title='清空此选项'>
+                      <Tooltip placement='bottom' title={t('ClearThisOption')}>
                         <img
                           style={{ marginLeft: 5, cursor: 'pointer' }}
                           onClick={(e) => {
@@ -325,7 +328,7 @@ export default class LabelSidebar extends Component<IProps, IState> {
 
     return (
       labelInfoSet.length === 0 ? (
-        <div style={{ padding: 20, textAlign: 'center' }}>暂无信息配置</div>
+        <div style={{ padding: 20, textAlign: 'center' }}>{t('NoConfiguration')}</div>
       ) : (
         <div className={styles.filterContainer}>
           <div className={styles.filterInputContainer}>
@@ -341,7 +344,7 @@ export default class LabelSidebar extends Component<IProps, IState> {
                     color: '#999',
                   }}
                 >
-                  暂无数据
+                  {t('NoData')}
                 </div>
               )}
             </div>
@@ -351,3 +354,6 @@ export default class LabelSidebar extends Component<IProps, IState> {
     );
   }
 }
+
+const LabelSidebarWithTrans = withTranslation()(LabelSidebar)
+export default LabelSidebarWithTrans