chore: rename ground-left as ground-llm

src/pages/_components/terminal-tabs/index.tsx

@@ -3,7 +3,6 @@ import TerminalTabs from './tabs';
 
 export interface TerminalModalProps {
   terminals: { url: string; name: string }[];
-  height: number;
   open: boolean;
   onClose: () => void;
   currentActive?: string;
@@ -11,20 +10,16 @@ export interface TerminalModalProps {
 
 const TerminalModal: React.FC<TerminalModalProps> = ({
   terminals,
-  height,
   open,
   onClose,
   currentActive
 }) => {
   return (
-    <div>
-      <TerminalTabs
-        terminals={terminals}
-        height={height}
-        currentActive={currentActive}
-        onClose={onClose}
-      />
-    </div>
+    <TerminalTabs
+      terminals={terminals}
+      currentActive={currentActive}
+      onClose={onClose}
+    />
   );
 };
 

src/pages/_components/terminal-tabs/resize-container.tsx

@@ -0,0 +1,98 @@
+import { HolderOutlined } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import { Button } from 'antd';
+import { Resizable, ResizableProps } from 're-resizable';
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import styled from 'styled-components';
+
+const StyledButton = styled(Button)`
+  position: absolute;
+  padding: 0;
+  top: -12px;
+  font-size: var(--font-size-middle);
+  left: calc(50% + 10px);
+  transform: translateX(-50%);
+  background: none !important;
+  cursor: ns-resize;
+  &::hover {
+    background: none !important;
+  }
+`;
+
+const ResizeContainer: React.FC<
+  React.PropsWithChildren<
+    ResizableProps & {
+      ref?: any;
+      defaultHeight?: number;
+      defaultWidth?: number;
+      minHeight?: number;
+      maxHeight?: number;
+      onReSize?: (
+        e: MouseEvent | TouchEvent,
+        dir: any,
+        refToElement: HTMLElement
+      ) => void;
+      onReSizeStop?: (
+        e: MouseEvent | TouchEvent,
+        dir: any,
+        refToElement: HTMLElement,
+        delta: { width: number; height: number }
+      ) => void;
+    }
+  >
+> = forwardRef((props, ref) => {
+  const {
+    defaultWidth,
+    defaultHeight = 180,
+    minHeight = 180,
+    maxHeight = 400,
+    children,
+    onReSize,
+    onReSizeStop,
+    ...restProps
+  } = props;
+  const intl = useIntl();
+  const resizeRef = useRef<Resizable>(null);
+
+  useImperativeHandle(ref, () => ({
+    container: resizeRef.current
+  }));
+
+  const dragHanle = (
+    <StyledButton
+      size="small"
+      type="text"
+      icon={
+        <HolderOutlined
+          rotate={90}
+          style={{ fontSize: 'var(--font-size-14)' }}
+        />
+      }
+    ></StyledButton>
+  );
+
+  return (
+    <Resizable
+      ref={resizeRef}
+      enable={{
+        top: true
+      }}
+      defaultSize={{
+        height: defaultHeight,
+        width: defaultWidth
+      }}
+      handleComponent={{
+        top: undefined
+      }}
+      maxHeight={maxHeight}
+      minHeight={minHeight}
+      onResize={onReSize}
+      onResizeStop={onReSizeStop}
+      {...restProps}
+    >
+      {children}
+    </Resizable>
+  );
+});
+
+export default ResizeContainer;

src/pages/_components/terminal-tabs/tabs.tsx

@@ -3,6 +3,7 @@ import { CloseOutlined } from '@ant-design/icons';
 import { Button, Tabs } from 'antd';
 import React, { useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
+import ResizeContainer from './resize-container';
 import { TerminalProps } from './types';
 
 const TabsContainer = styled.div`
@@ -30,7 +31,22 @@ const TabsContainer = styled.div`
         display: none;
       }
 
+      &::before {
+        display: none;
+        content: '';
+        left: 5px;
+        top: 5px;
+        bottom: 5px;
+        right: 5px;
+        position: absolute;
+        border-radius: 4px;
+        background-color: var(--ant-color-fill-tertiary);
+      }
+
       &:hover {
+        &::before {
+          display: block;
+        }
         .ant-tabs-tab-remove {
           display: inline-block;
         }
@@ -50,20 +66,19 @@ const TabsContainer = styled.div`
 
 export interface TerminalTabsProps {
   terminals: TerminalProps[];
-  height: number;
   currentActive?: string;
   onClose: () => void;
 }
 
 const TerminalTabs: React.FC<TerminalTabsProps> = ({
   terminals,
-  height,
   currentActive,
   onClose
 }) => {
   const [activeKey, setActiveKey] = useState(
     currentActive || terminals[0]?.url || ''
   );
+  const [height, setHeight] = useState(300);
 
   const items = useMemo(() => {
     return terminals.map((terminal) => {
@@ -82,26 +97,29 @@ const TerminalTabs: React.FC<TerminalTabsProps> = ({
   }, [currentActive]);
 
   return (
-    <TabsContainer>
-      <Tabs
-        type="editable-card"
-        hideAdd
-        activeKey={activeKey}
-        onChange={setActiveKey}
-        tabBarStyle={{ marginBottom: 0 }}
-        items={items}
-        tabBarExtraContent={{
-          right: (
-            <Button
-              icon={<CloseOutlined />}
-              type="text"
-              size="small"
-              onClick={onClose}
-            ></Button>
-          )
-        }}
-      ></Tabs>
-    </TabsContainer>
+    <ResizeContainer>
+      <TabsContainer>
+        <Tabs
+          type="editable-card"
+          hideAdd
+          activeKey={activeKey}
+          onChange={setActiveKey}
+          tabBarStyle={{ marginBottom: 0 }}
+          items={items}
+          tabBarExtraContent={{
+            right: (
+              <Button
+                icon={<CloseOutlined />}
+                type="text"
+                size="small"
+                style={{ marginRight: 8 }}
+                onClick={onClose}
+              ></Button>
+            )
+          }}
+        ></Tabs>
+      </TabsContainer>
+    </ResizeContainer>
   );
 };