feat: ScribbleTool add sidebar

packages/lb-components/src/index.scss

@@ -521,6 +521,31 @@ $prefix: bee;
       );
     }
   }
+  .#{$prefix}-scribble {
+    padding: 20px;
+    width: 100%;
+    &__select {
+      display: flex;
+      justify-content: center;
+      cursor: pointer;
+      img {
+        width: 12px;
+        margin: 0px 10px;
+      }
+    }
+    &__silder {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    &__circle {
+      display: block;
+      width: 5px;
+      height: 5px;
+      background: #d9d9d9;
+      border-radius: 50%;
+    }
+  }
 }
 
 .#{$prefix}-tips {

packages/lb-components/src/views/MainView/sidebar/ScribbleSidebar/index.tsx

@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+
+import { Slider } from 'antd';
+import penActivate from '@/assets/attributeIcon/pen_a.svg';
+import pen from '@/assets/attributeIcon/pen.svg';
+import eraserActivate from '@/assets/attributeIcon/eraser_a.svg';
+import eraser from '@/assets/attributeIcon/eraser.svg';
+import { getClassName } from '@/utils/dom';
+
+interface IProps {
+  // toolInstance?: GraphToolInstance;
+  // stepInfo?: IStepInfo;
+  onChange: (tool: number, values: number) => void;
+}
+
+enum ESwitchTool {
+  Pen = 1, // 笔
+  Ereser = 2, // 橡皮刷
+}
+
+const ScribbleSidebar: React.FC<IProps> = (props) => {
+  const { onChange } = props;
+  // 查看时候默认值
+  // const initValue = toolInstance?.weight || 20;
+  // const initTool = toolInstance?.brushTool || ESwitchTool.Pen;
+  const [silderValue, setSilderValue] = useState(20);
+  const [selectTool, setSelectTool] = useState(ESwitchTool.Pen);
+
+  const changeValue = () => {
+    onChange(selectTool, silderValue);
+  };
+
+  return (
+    <div className={getClassName('scribble')}>
+      <div className={getClassName('scribble', 'select')}>
+        <img
+          src={selectTool === ESwitchTool.Pen ? penActivate : pen}
+          onClick={() => {
+            setSilderValue(20);
+            setSelectTool(ESwitchTool.Pen);
+            changeValue();
+          }}
+        />
+        <img
+          src={selectTool === ESwitchTool.Ereser ? eraserActivate : eraser}
+          onClick={() => {
+            setSilderValue(20);
+            setSelectTool(ESwitchTool.Ereser);
+            changeValue();
+          }}
+        />
+      </div>
+      <div className={getClassName('scribble', 'silder')}>
+        <span className={getClassName('scribble', 'circle')} />
+        <Slider
+          onChange={(v) => {
+            setSilderValue(v);
+            changeValue();
+          }}
+          min={1}
+          max={50}
+          style={{ width: '60%' }}
+          value={silderValue}
+        />
+        <span
+          className={getClassName('scribble', 'circle')}
+          style={{ width: '10px', height: '10px' }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ScribbleSidebar;

packages/lb-components/src/views/MainView/sidebar/index.tsx

@@ -20,6 +20,7 @@ import TagSidebar, { expandIconFuc } from './TagSidebar';
 import TextToolSidebar from './TextToolSidebar';
 import ToolStyle from './ToolStyle';
 import { cTool } from '@labelbee/lb-annotation';
+import ScribbleSidebar from './ScribbleSidebar';
 
 const { EVideoToolName } = cTool;
 
@@ -140,8 +141,15 @@ const Sidebar: React.FC<IProps> = ({ sider }) => {
 
   const textToolSideBar = <TextToolSidebar />;
 
-  const horizontal = <div className={`${sidebarCls}__horizontal`} />;
+  const scribbleSidebar = (
+    <ScribbleSidebar
+      onChange={(t, i) => {
+        // 接收
+      }}
+    />
+  );
 
+  const horizontal = <div className={`${sidebarCls}__horizontal`} />;
   if (sider) {
     if (typeof sider === 'function') {
       return (
@@ -178,6 +186,7 @@ const Sidebar: React.FC<IProps> = ({ sider }) => {
     return (
       <div className={`${sidebarCls}`}>
         {toolIcon}
+        {scribbleSidebar}
         {horizontal}
         {attributeList}
         {annotationText}