feat: terminal split screen operation supports single deletion (#3043)

Author: wangxiaojuan

packages/terminal-next/src/browser/component/resize.module.less

@@ -16,10 +16,32 @@
   justify-content: flex-end;
 
   .resizeItem {
+    position: relative;
     width: 100%;
     height: 100%;
     overflow: hidden;
-    padding: 8px 2px 0 10px;
+    padding: 8px 20px 0 10px;
+    .closeBtn {
+      display: none;
+      position: absolute;
+      right: 12px;
+      top: 10px;
+      cursor: pointer;
+      border-radius: 4px;
+      font-size: 14px;
+      width: 16px;
+      height: 16px;
+      line-height: 16px;
+      &:hover {
+        background-color: var(--kt-icon-hoverBackground);
+        transform: scale(1.1);
+      }
+    }
+    &:hover {
+      .closeBtn {
+        display: block;
+      }
+    }
   }
 }
 

packages/terminal-next/src/browser/component/resize.view.tsx

@@ -1,6 +1,10 @@
+import clx from 'classnames';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
 
+import { useInjectable, getIcon } from '@opensumi/ide-core-browser';
+
+import { ITerminalGroupViewService } from '../../common/controller';
 import { IWidget, IWidgetGroup } from '../../common/resize';
 
 import ResizeDelegate from './resize.delegate';
@@ -23,6 +27,7 @@ export default observer((props: IResizeViewProps) => {
   const { group, shadow } = props;
   const [event, setEvent] = React.useState(false);
   const [wholeWidth, setWholeWidth] = React.useState(Infinity);
+  const view = useInjectable<ITerminalGroupViewService>(ITerminalGroupViewService);
   const whole = React.useRef<HTMLDivElement | null>(null);
 
   React.useEffect(() => {
@@ -31,6 +36,10 @@ export default observer((props: IResizeViewProps) => {
     }
   });
 
+  const handleRemoveWidget = React.useCallback((widgetId: string) => {
+    view.removeWidget(widgetId);
+  }, []);
+
   return (
     <div className={styles.resizeWrapper} ref={whole}>
       <div
@@ -77,6 +86,14 @@ export default observer((props: IResizeViewProps) => {
               className={styles.resizeItem}
             >
               {props.draw(widget)}
+              {group.widgets.length > 1 && (
+                <div
+                  className={clx(styles.closeBtn, getIcon('close'))}
+                  onClick={() => {
+                    handleRemoveWidget(widget.id);
+                  }}
+                />
+              )}
             </div>
           ))}
       </div>