feat: manually mirror opencoze's code from bytedance

Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf

frontend/packages/workflow/test-run/src/components/resizable-panel/base-panel.module.less

@@ -0,0 +1,47 @@
+.base-panel {
+  display: flex;
+  flex-direction: column;
+
+  border: 1px solid var(--coz-stroke-primary);
+  border-radius: 8px;
+  background-color: var(--coz-bg-plus);
+  position: relative;
+}
+
+.dragging {
+  cursor: row-resize;
+  user-select: none;
+  pointer-events: none;
+}
+
+.panel-header {
+  height: 48px;
+  border-bottom: 1px solid var(--coz-stroke-primary);
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  padding: 0 12px;
+  flex-shrink: 0;
+  column-gap: 8px;
+}
+.panel-content {
+  height: 100%;
+  flex-shrink: 1;
+  overflow-y: auto;
+}
+.panel-footer {
+  border-top: 1px solid var(--coz-stroke-primary);;
+}
+
+.resize-bar {
+  width: 100%;
+  height: 5px;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  cursor: row-resize;
+}

frontend/packages/workflow/test-run/src/components/resizable-panel/base-panel.tsx

@@ -0,0 +1,103 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import React from 'react';
+
+import { isObject } from 'lodash-es';
+import cls from 'classnames';
+import { IconCozCross } from '@coze-arch/coze-design/icons';
+import { IconButton } from '@coze-arch/coze-design';
+
+import { useResize } from './use-resize';
+
+import styles from './base-panel.module.less';
+
+interface BasePanelProps {
+  className?: string;
+  /**
+   * 面板头，不传不渲染
+   */
+  header?: React.ReactNode;
+  /**
+   * 面板脚，不传不渲染
+   */
+  footer?: React.ReactNode;
+  /**
+   * 默认初始高度，不支持响应式
+   */
+  height?: number;
+  /**
+   * 是否可拖拽改变高度
+   */
+  resizable?:
+    | boolean
+    | {
+        min?: number;
+        max?: number;
+      };
+  /**
+   * 点击关闭事件，仅当渲染面板头时可能触发
+   */
+  onClose?: () => void;
+}
+
+export const BasePanel: React.FC<React.PropsWithChildren<BasePanelProps>> = ({
+  className,
+  header,
+  footer,
+  height,
+  resizable,
+  onClose,
+  children,
+}) => {
+  const {
+    height: innerHeight,
+    bind,
+    ref,
+    dragging,
+  } = useResize({
+    default: height,
+    ...(isObject(resizable) ? resizable : {}),
+  });
+
+  return (
+    <div
+      className={cls(
+        styles['base-panel'],
+        className,
+        dragging && styles.dragging,
+      )}
+      style={{ height: innerHeight }}
+      ref={ref}
+    >
+      {resizable ? (
+        <div className={styles['resize-bar']} onMouseDown={bind} />
+      ) : null}
+      {header ? (
+        <div className={styles['panel-header']}>
+          {header}
+          <IconButton
+            icon={<IconCozCross className={'text-[18px]'} />}
+            color="secondary"
+            onClick={onClose}
+          />
+        </div>
+      ) : null}
+      <div className={styles['panel-content']}>{children}</div>
+      {footer ? <div className={styles['panel-footer']}>{footer}</div> : null}
+    </div>
+  );
+};

frontend/packages/workflow/test-run/src/components/resizable-panel/index.tsx

@@ -0,0 +1,232 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import React, {
+  useState,
+  useRef,
+  useCallback,
+  useEffect,
+  forwardRef,
+  useImperativeHandle,
+  useMemo,
+  type MutableRefObject,
+} from 'react';
+
+import { isNumber } from 'lodash-es';
+import cls from 'classnames';
+import { IconCozCross } from '@coze-arch/coze-design/icons';
+import { IconButton } from '@coze-arch/coze-design';
+
+import styles from './resizable-panel.module.less';
+
+interface ResizablePanelProps {
+  className?: string;
+  header?: React.ReactNode;
+  headerExtra?: React.ReactNode;
+  footer?: React.ReactNode;
+  hideClose?: boolean;
+  onClose: () => void;
+  onCloseWithoutAnimation?: () => void;
+  animation?: 'slide' | 'translateY';
+  translateYHeight?: string;
+  innerScrollRef?: MutableRefObject<HTMLDivElement | null>;
+  draggable?: boolean;
+}
+
+export interface ResizablePanelRef {
+  minimize: () => void;
+  maximize: () => void;
+  close: () => void;
+  scrollTo: (options?: ScrollToOptions) => void;
+}
+
+const MIN_HEIGHT = 156;
+
+/**
+ * TODO: 这里的核心伸缩能力后面想换成 semi 的 Resizable，这里先临时写一些逻辑适配
+ */
+export const ResizablePanel = forwardRef<
+  ResizablePanelRef,
+  React.PropsWithChildren<ResizablePanelProps>
+>(
+  (
+    {
+      className,
+      hideClose,
+      header,
+      footer,
+      onClose,
+      onCloseWithoutAnimation,
+      children,
+      animation,
+      translateYHeight = 'calc(100% - 52px)',
+      innerScrollRef: innerScrollRefFromProps,
+      draggable = true,
+      headerExtra,
+    },
+    ref,
+  ) => {
+    const [height, setHeight] = useState<null | number>(0);
+    const [isOpen, setIsOpen] = useState<null | boolean>(null);
+
+    const innerRef = useRef<HTMLDivElement>(null);
+    const _scrollRef = useRef<HTMLDivElement>(null);
+    const scrollRef = innerScrollRefFromProps || _scrollRef;
+
+    const isResizing = useRef(false);
+    const startY = useRef(0);
+    const startHeight = useRef(0);
+
+    const [transition, setTransition] = useState(true);
+
+    const handleMouseMove = useCallback(
+      e => {
+        if (isResizing.current) {
+          const newHeight = startHeight.current - (e.clientY - startY.current); // 计算新的高度
+          setHeight(newHeight > MIN_HEIGHT ? newHeight : MIN_HEIGHT);
+        }
+      },
+      [setHeight],
+    );
+    const handleMouseUp = useCallback(() => {
+      isResizing.current = false;
+      document.removeEventListener('mousemove', handleMouseMove); // 取消监听
+      document.removeEventListener('mouseup', handleMouseUp); // 取消监听
+    }, [handleMouseMove]);
+
+    const handleMouseDown = useCallback(
+      e => {
+        isResizing.current = true;
+        startY.current = e.clientY; // 记录鼠标开始拖拽时的 Y 轴坐标
+        startHeight.current = innerRef.current?.offsetHeight || 0;
+        document.addEventListener('mousemove', handleMouseMove); // 监听鼠标移动事件
+        document.addEventListener('mouseup', handleMouseUp); // 监听鼠标抬起事件
+      },
+      [handleMouseMove, handleMouseUp],
+    );
+
+    const handleClose = () => {
+      setTransition(true);
+      onCloseWithoutAnimation?.();
+
+      if (animation) {
+        setIsOpen(false);
+      } else {
+        setHeight(0);
+      }
+
+      setTimeout(() => {
+        onClose();
+      }, 250);
+    };
+
+    useImperativeHandle(ref, () => ({
+      minimize: () => {
+        setTransition(true);
+        setHeight(MIN_HEIGHT);
+        setTimeout(() => setTransition(false), 250);
+      },
+      maximize: () => {
+        setTransition(true);
+        setHeight(null);
+        setTimeout(() => setTransition(false), 250);
+      },
+      close: () => {
+        handleClose();
+      },
+      scrollTo: (options?: ScrollToOptions) =>
+        scrollRef.current?.scrollTo(options),
+    }));
+
+    useEffect(() => {
+      setIsOpen(true);
+
+      setTimeout(() => {
+        setHeight(null);
+        setTimeout(() => {
+          setTransition(false);
+        }, 250);
+      }, 100);
+    }, []);
+
+    const styleMemo = useMemo(() => {
+      if (animation === 'slide') {
+        return {
+          height: '100%',
+        };
+      }
+
+      if (animation === 'translateY') {
+        return {
+          height: isNumber(height) ? `${height}px` : translateYHeight,
+          maxHeight: translateYHeight,
+        };
+      }
+
+      return {
+        height: isNumber(height) ? `${height}px` : '90%',
+      };
+    }, [height, animation, translateYHeight]);
+
+    return (
+      <div
+        ref={innerRef}
+        style={styleMemo}
+        className={cls(
+          styles.container,
+          {
+            [styles['resizable-panel']]: !animation,
+            [styles['need-transition']]: !animation && transition,
+
+            [styles['resizable-panel-translateY']]: animation === 'translateY',
+            [styles.show]: animation === 'translateY' && isOpen,
+            [styles.hide]: animation === 'translateY' && !isOpen,
+
+            [styles['resizable-panel-slide']]: animation === 'slide',
+            [styles['slide-in']]: animation === 'slide' && isOpen,
+            [styles['slide-out']]: animation === 'slide' && !isOpen,
+          },
+          className,
+        )}
+      >
+        {draggable ? (
+          <div
+            onMouseDown={handleMouseDown}
+            className={styles['panel-dragging']}
+          ></div>
+        ) : null}
+
+        {header ? (
+          <div className={styles['panel-header']}>
+            {header}
+            {hideClose ? null : (
+              <IconButton
+                icon={<IconCozCross className={'text-[18px]'} />}
+                color="secondary"
+                onClick={handleClose}
+              />
+            )}
+          </div>
+        ) : null}
+        {headerExtra ? headerExtra : null}
+        <div ref={scrollRef} className={styles['panel-content']}>
+          {children}
+        </div>
+        {footer ? <div className={styles['panel-footer']}>{footer}</div> : null}
+      </div>
+    );
+  },
+);

frontend/packages/workflow/test-run/src/components/resizable-panel/resizable-panel.module.less

@@ -0,0 +1,154 @@
+.container {
+  display: flex;
+  flex-direction: column;
+}
+
+.resizable-panel {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+
+  overflow: hidden;
+
+  width: 100%;
+  max-height: 90%;
+
+  background: rgb(var(--coze-fg-white));
+  border-radius: 8px 8px 0 0;
+  box-shadow: 0 -8px 24px 0 rgba(0, 0, 0, 16%), 0 -16px 48px 0 rgba(0, 0, 0, 8%);
+  z-index: 10;
+  &.need-transition {
+    transition: height 0.25s;
+  }
+}
+
+.resizable-panel-translateY {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+
+  overflow: hidden;
+
+  width: 100%;
+  max-height: calc(100% - 52px);
+
+  background: rgb(var(--coze-fg-white));
+  border-radius: 8px 8px 0 0;
+  box-shadow: 0px -4px 20px 0px rgba(0, 0, 0, 0.1);
+  z-index: 10;
+
+  &.show {
+    animation: showAnimation 0.25s cubic-bezier(0.14, 1, 0.34, 1);
+  }
+
+  &.hide {
+    animation: hideAnimation 0.25s cubic-bezier(0.34, 1, 0.14, 1);
+  }
+
+  @keyframes showAnimation {
+    0% {
+      transform: translateY(20%);
+      opacity: 0;
+    }
+    100% {
+      transform: translateY(0%);
+      opacity: 1;
+    }
+  }
+
+  @keyframes hideAnimation {
+    0% {
+      transform: translateY(0%);
+      opacity: 1;
+    }
+    100% {
+      transform: translateY(20%);
+      opacity: 0;
+    }
+  }
+}
+
+
+.resizable-panel-slide {
+  position: absolute;
+  bottom: 0;
+  right: -100%; /* 初始位置在容器的右外侧 */
+
+  overflow: hidden;
+
+  width: 100%;
+  height: 100%;
+
+  background: rgb(var(--coze-fg-white));
+  border-radius: 8px 8px 0 0;
+  box-shadow: 0 -8px 24px 0 rgba(0, 0, 0, 16%), 0 -16px 48px 0 rgba(0, 0, 0, 8%);
+  z-index: 10;
+  transition: transform 0.25s ease;
+
+  &.slide-in {
+    transform: translateX(-100%);
+  }
+
+  &.slide-out {
+    transform: translateX(100%);
+  }
+}
+
+
+
+.panel-dragging {
+  cursor: row-resize;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 10px;
+
+  &::before {
+    content: "";
+
+    position: absolute;
+    top: 4px;
+    left: calc((100% - 100px) / 2);
+
+    display: block;
+
+    width: 100px;
+    height: 4px;
+
+    background-color: var(--coz-stroke-primary);
+    border-radius: 4px;
+  }
+}
+
+.panel-header {
+  height: 48px;
+  min-height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 8px 0 12px;
+  border-bottom: 1px solid var(--coz-stroke-primary);
+}
+
+.panel-footer {
+  height: 56px;
+  min-height: 56px;
+  max-height: 56px;
+  border-top: 1px solid var(--coz-stroke-primary);
+  flex-grow: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 8px 0 12px;
+}
+
+.panel-content {
+  //height: calc(100% - 104px);
+  flex: 1;
+  //flex-shrink: 1;
+  //flex-grow: 1;
+  overflow-y: auto;
+}

frontend/packages/workflow/test-run/src/components/resizable-panel/use-resize.ts

@@ -0,0 +1,79 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { useState, useRef, useCallback } from 'react';
+
+import { useMemoizedFn } from 'ahooks';
+
+interface Config {
+  default?: number;
+  min?: number;
+  max?: number;
+}
+
+/**
+ * 目前仅支持高度可变
+ */
+export const useResize = (config: Config) => {
+  const [dragging, setDragging] = useState(false);
+  const [height, setHeight] = useState(config.default);
+  const ref = useRef<HTMLDivElement>(null);
+  /**
+   * 拖拽过程中
+   */
+  const resizing = useRef(false);
+  /**
+   * y 轴变化
+   */
+  const startY = useRef(0);
+  /** 开始位置 */
+  const start = useRef(0);
+
+  const handleMouseMove = useMemoizedFn(e => {
+    if (resizing.current) {
+      const newHeight = start.current - (e.clientY - startY.current); // 计算新的高度
+      if (config.max && newHeight > config.max) {
+        setHeight(config.max);
+      } else if (config.min && newHeight < config.min) {
+        setHeight(config.min);
+      } else {
+        setHeight(newHeight);
+      }
+    }
+  });
+  const handleMouseUp = useCallback(() => {
+    resizing.current = false;
+    setDragging(false);
+    document.removeEventListener('mousemove', handleMouseMove); // 取消监听
+    document.removeEventListener('mouseup', handleMouseUp); // 取消监听
+  }, [handleMouseMove]);
+
+  const handleMouseDown = useMemoizedFn(e => {
+    resizing.current = true;
+    setDragging(true);
+    startY.current = e.clientY; // 记录鼠标开始拖拽时的 Y 轴坐标
+    start.current = ref.current?.offsetHeight || 0;
+    document.addEventListener('mousemove', handleMouseMove); // 监听鼠标移动事件
+    document.addEventListener('mouseup', handleMouseUp); // 监听鼠标抬起事件
+  });
+
+  return {
+    height,
+    bind: handleMouseDown,
+    ref,
+    dragging,
+  };
+};