@baishuyun/ai-design 1.0.2 → 1.0.3

package/src/components/field-value-checker.tsx

@@ -0,0 +1,118 @@
+import { memo, useEffect } from 'react';
+import { FieldType, ValueOf } from '@baishuyun/types';
+import { FieldTypeNameMap } from '../const/ui';
+import { ToolUIPart } from 'ai';
+import { FieldsTools } from '@baishuyun/agents';
+import { isSubformFieldEqual, toHumanReadable } from '../lib/utils';
+import { SubformFieldsValueChecker } from './subform-fields-value-checker';
+import LineChecker from './line-checker';
+
+type Field = ValueOf<Pick<ToolUIPart<FieldsTools>, 'output'>>;
+
+export interface FieldValueCheckerProps {
+  field: ValueOf<Pick<ToolUIPart<FieldsTools>, 'output'>>;
+  isSubField?: boolean;
+  disabled?: boolean;
+  readonly?: boolean;
+  onChange?: (checked: boolean, field: Field, parentFieldName?: string, index?: number) => void;
+  onLoaded?: (field: Field) => void;
+  streaming?: boolean;
+}
+
+export const FieldValueChecker = memo(
+  ({
+    field,
+    disabled,
+    isSubField,
+    readonly,
+    streaming,
+    onChange,
+    onLoaded,
+  }: FieldValueCheckerProps) => {
+    const { widget, label } = field;
+    if (!widget) {
+      return null;
+    }
+
+    const { type, value: v } = widget;
+
+    const t = type as FieldType;
+
+    const value = toHumanReadable(v, t);
+
+    if (!FieldTypeNameMap.hasOwnProperty(type)) {
+      return null;
+    }
+
+    const isSubForm = type === 'subform';
+
+    useEffect(() => {
+      onLoaded?.(field);
+    }, []);
+
+    const handleCheck = (checked: boolean) => {
+      onChange?.(checked, field);
+    };
+
+    const extraPadding = isSubField ? 'pl-6' : '';
+
+    return (
+      <>
+        <LineChecker
+          streaming={streaming}
+          title={label}
+          disabled={disabled}
+          defaultChecked={true}
+          onCheckedChange={handleCheck}
+          className={extraPadding}
+          readonly={readonly}
+          shortDesc={isSubForm ? '' : (value as string)}
+        />
+        {isSubForm && (
+          <SubformFieldsValueChecker
+            readonly={readonly}
+            subformField={field}
+            onChange={(detail) => {
+              onChange?.(detail.checked, detail.field, detail.parentFieldName, detail.row);
+            }}
+            streaming={streaming}
+          />
+        )}
+      </>
+    );
+  },
+  (p1, p2) => {
+    // 标签一致
+    const isLabelEqual = p1.field?.label === p2.field?.label;
+    if (!isLabelEqual) {
+      return false;
+    }
+
+    // id 一致
+    const isFieldNameEqual = p1.field?.widget?.widgetName === p2.field?.widget?.widgetName;
+    if (!isFieldNameEqual) {
+      return false;
+    }
+
+    // 禁用状态一致
+    const isDisabledEqual = p1.disabled === p2.disabled;
+    if (!isDisabledEqual) {
+      return false;
+    }
+
+    // 只读状态一致
+    const isReadonlyEqual = p1.readonly === p2.readonly;
+    if (!isReadonlyEqual) {
+      return false;
+    }
+
+    // 流式状态一致
+    const isStreamingEqual = p1.streaming === p2.streaming;
+    if (!isStreamingEqual) {
+      return false;
+    }
+
+    // 进一步比较子表单下的字段
+    return isSubformFieldEqual(p1?.field, p2?.field);
+  }
+);

package/src/components/office-container.tsx

@@ -1,80 +1,163 @@
-import { FC } from 'react';
+import { FC, useCallback, useRef } from 'react';
 import { useResizableWidth } from '../hooks/use-resizable-width';
+import { useColumnAppear } from '../hooks/use-column-appear';
 import classNames from 'classnames';
 
+export type FullScreenPart = 'leftCol' | 'rightCol' | 'none';
+
 export interface IOfficeContainerProps {
     headerHeight?: number;
 
     hideLeftCol?: boolean;
 
     leftColWidthRange?: [number, number];
+    rightColWidthRange?: [number, number];
+
+    leftColCls?: string;
+    rightColCls?: string;
+
     leftColHeaderElement?: React.ReactNode;
     leftColContentElement?: React.ReactNode;
     rightColHeaderElement?: React.ReactNode;
     rightColContentElement?: React.ReactNode;
+
+    fullscreenPart?: FullScreenPart;
 }
 
+
 export const OfficeContainer: FC<IOfficeContainerProps> = ({
     headerHeight = 64,
     hideLeftCol = false,
     leftColWidthRange = [360, 500],
+    rightColWidthRange,
+    leftColCls,
+    rightColCls,
     leftColHeaderElement,
     leftColContentElement,
     rightColHeaderElement,
     rightColContentElement,
+    fullscreenPart = 'none',
 }) => {
-    const { width: leftColWidth, handleMouseDown, isDragging } = useResizableWidth({
-        range: leftColWidthRange,
-        initialWidth: leftColWidthRange[0]
+    const isRightResizable = !!rightColWidthRange;
+    const activeRange = rightColWidthRange ?? leftColWidthRange;
+
+    const { width, handleMouseDown, isDragging } = useResizableWidth({
+        range: activeRange,
+        initialWidth: activeRange[0],
+        invertDrag: isRightResizable,
     });
 
-    const borderColorCls = /* isAtEdge ? 'border-[#ff8888]' : */ 'border-[#0265fc]';
+    const isLeftFullscreen = fullscreenPart === 'leftCol';
+    const isRightFullscreen = fullscreenPart === 'rightCol';
+    const isFullscreen = isLeftFullscreen || isRightFullscreen;
+
+    const leftHidden = hideLeftCol || isRightFullscreen;
+    const rightHidden = isLeftFullscreen;
+
+    // ---- column appear/hide animation ----
+
+    const {
+        colRef: leftColRef,
+        getTransitionStyle: leftTransitionStyle,
+    } = useColumnAppear({ hidden: leftHidden });
+
+    const {
+        colRef: rightColRef,
+        getTransitionStyle: rightTransitionStyle,
+    } = useColumnAppear({ hidden: rightHidden });
+
+    // ---- 列宽计算：始终返回明确像素值，避免 flex 计算宽与 transition 冲突 ----
+
+    const leftColInnerRef = useRef<HTMLDivElement>(null);
+    const rightColInnerRef = useRef<HTMLDivElement>(null);
+
+    const getColWidth = useCallback((col: 'left' | 'right'): number | string => {
+        if (col === 'left') {
+            if (hideLeftCol || isRightFullscreen) return 0;
+            if (isLeftFullscreen) return '100%';
+            if (isRightResizable) {
+                if (leftColInnerRef.current) return leftColInnerRef.current.offsetWidth;
+                return `calc(100% - ${width}px)`;
+            }
+            return width;
+        }
+        // right col
+        if (isLeftFullscreen) return 0;
+        if (isRightFullscreen) return '100%';
+        if (isRightResizable) return width;
+        if (rightColInnerRef.current) return rightColInnerRef.current.offsetWidth;
+        return `calc(100% - ${width}px)`;
+    }, [hideLeftCol, isLeftFullscreen, isRightFullscreen, isRightResizable, width]);
+
+    const borderColorCls = 'border-[#0265fc]';
+
+    // 全屏时补全 shrink-0，确保 width: 100% 或 width: 0 不会被 flex 容器挤压
+    const leftFlexCls = isFullscreen
+        ? 'shrink-0'
+        : isRightResizable
+            ? 'flex-1'
+            : 'shrink-0';
+    const rightFlexCls = isFullscreen
+        ? 'shrink-0'
+        : isRightResizable
+            ? 'shrink-0'
+            : 'flex-1';
+
+    // 滚动条使用 scrollbar-gutter: stable 预留空间，避免 overflow 切换时布局抖动
+    const contentCls = 'flex-1 min-h-0 overflow-auto w-full';
+    const contentStyle: React.CSSProperties = { /*scrollbarGutter: 'stable' */};
 
     return (
         <div className="relative h-full w-full flex overflow-hidden bg-white">
             {/* left col */}
             <div
-                className={classNames("shrink-0 h-full flex flex-col relative bg-[#F5F7FA]", {
-                    "pointer-events-none": hideLeftCol,
-                    "opacity-0": hideLeftCol,
+                ref={leftColRef}
+                className={classNames("h-full flex flex-col relative", leftColCls, leftFlexCls, {
+                    "pointer-events-none": hideLeftCol || isRightFullscreen,
+                    "opacity-0": hideLeftCol || isRightFullscreen,
+                    "overflow-hidden": /* isRightFullscreen */ true,
                 })}
-                style={{ width: hideLeftCol ? 0 : leftColWidth }}
+                style={{ ...leftTransitionStyle, width: getColWidth('left'), ...(isDragging ? { transition: 'none' } : {}) }}
             >
-                    <div
-                        className="shrink-0 w-full"
+                <div
+                    ref={leftColInnerRef}
+                    className="shrink-0 w-full overflow-hidden"
                     style={{ height: headerHeight }}
                 >
                     {leftColHeaderElement}
                 </div>
-                <div className="flex-1 min-h-0 overflow-auto">
+                <div className={contentCls} style={contentStyle}>
                     {leftColContentElement}
                 </div>
                 {/* resizer */}
-                <div
-                    className={classNames(`h-full w-5 cursor-col-resize z-10 flex justify-center group absolute top-0 right-0 hover:border-r hover:${borderColorCls}`, {
-                        [`border-r ${borderColorCls}`]: isDragging,
-                    })}
-                    onMouseDown={handleMouseDown}
-                >
-
-                </div>
+                {!isFullscreen && (
+                    <div
+                        className={classNames(`h-full w-5 cursor-col-resize z-10 flex justify-center group absolute top-0 right-0 hover:border-r hover:${borderColorCls}`, {
+                            [`border-r ${borderColorCls}`]: isDragging,
+                        })}
+                        onMouseDown={handleMouseDown}
+                    />
+                )}
             </div>
 
-
             {/* right col */}
-            <div className={
-                classNames("flex-1 h-full flex flex-col min-w-0", {
-                    // "shadow-[0_0_16px_rgba(0,0,0,0.10)]": !isDragging,
-                    // "shadow-[0_0_20px_rgba(0,0,0,0.10)]": isDragging,
-                })
-            }>
+            <div
+                ref={rightColRef}
+                className={classNames("h-full flex flex-col min-w-0", rightColCls, rightFlexCls, {
+                    "pointer-events-none": isLeftFullscreen,
+                    "opacity-0": isLeftFullscreen,
+                    "overflow-hidden": isLeftFullscreen,
+                })}
+                style={{ ...rightTransitionStyle, width: getColWidth('right'), ...(isDragging ? { transition: 'none' } : {}) }}
+            >
                 <div
+                    ref={rightColInnerRef}
                     className="shrink-0 w-full"
                     style={{ height: headerHeight }}
                 >
                     {rightColHeaderElement}
                 </div>
-                <div className="flex-1 min-h-0 overflow-auto">
+                <div className={contentCls} style={contentStyle}>
                     {rightColContentElement}
                 </div>
             </div>

package/src/components/subform-fields-value-checker.tsx

@@ -0,0 +1,185 @@
+import { memo, useCallback, useEffect, useState } from 'react';
+import { FieldType, ValueOf } from '@baishuyun/types';
+import { FieldTypeNameMap } from '../const/ui';
+import { ToolUIPart } from 'ai';
+import { FieldsTools } from '@baishuyun/agents';
+import { toHumanReadable } from '../lib/utils';
+import { Collapsible, CollapsibleContent } from './collapsible';
+import LineChecker from './line-checker';
+
+const Checker = ({
+  disabled,
+  onCheckedChange,
+
+  label,
+  val,
+  streaming,
+  readonly,
+}: {
+  label: string;
+  val: string;
+  onCheckedChange: (v: boolean) => void;
+  disabled?: boolean;
+  desc: string;
+  readonly?: boolean;
+  streaming?: boolean;
+}) => {
+  return (
+    <LineChecker
+      streaming={streaming}
+      readonly={readonly}
+      title={label}
+      disabled={disabled}
+      defaultChecked={true}
+      onCheckedChange={onCheckedChange}
+      className="pl-9"
+      shortDesc={val}
+    />
+  );
+};
+
+const SubFieldChecker = memo(
+  ({
+    field,
+    readonly,
+    onCheckedChange,
+    streaming,
+  }: {
+    onCheckedChange: (
+      checked: boolean,
+      field: ValueOf<Pick<ToolUIPart<FieldsTools>, 'output'>>
+    ) => void;
+    readonly?: boolean;
+    streaming?: boolean;
+    field: ValueOf<Pick<ToolUIPart<FieldsTools>, 'output'>>;
+  }) => {
+    const { widget, label } = field;
+    if (!widget) {
+      return null;
+    }
+
+    const { type, value: v } = widget;
+    const t = type as FieldType;
+    if (!FieldTypeNameMap.hasOwnProperty(t)) {
+      return null;
+    }
+
+    const value = toHumanReadable(v, t);
+
+    const typeDesc = FieldTypeNameMap[t] || FieldTypeNameMap.unknown;
+
+    const handleCheckChange = useCallback(
+      (v: boolean) => {
+        onCheckedChange(v, field);
+      },
+      [field]
+    );
+
+    useEffect(() => {
+      // 默认勾选上
+      handleCheckChange(true);
+    }, []);
+
+    return (
+      <Checker
+        streaming={streaming}
+        readonly={readonly}
+        desc={typeDesc}
+        label={label}
+        val={value as string}
+        onCheckedChange={handleCheckChange}
+      />
+    );
+  },
+  (p1, p2) => {
+    const isNameEqual =
+      p1.field.widget?.widgetName === p2.field.widget?.widgetName &&
+      p1.readonly === p2.readonly &&
+      p1.streaming === p2.streaming;
+    return isNameEqual;
+  }
+);
+
+type F = ValueOf<Pick<ToolUIPart<FieldsTools>, 'output'>>;
+
+interface generatedField {
+  label: string;
+  fieldName: string;
+  fieldType: string;
+  value: any;
+}
+
+type onSubformFieldChangeParam = {
+  checked: boolean;
+  field: F;
+  parentFieldName: string;
+  row?: number;
+  col?: number;
+};
+
+/**
+ * 专门渲染子表单下的字段勾选
+ */
+export const SubformFieldsValueChecker = ({
+  subformField,
+  onChange,
+  streaming,
+  readonly,
+}: {
+  onChange: (p: onSubformFieldChangeParam) => void;
+  subformField: ValueOf<Pick<ToolUIPart<FieldsTools>, 'output'>>;
+  streaming?: boolean;
+  readonly?: boolean;
+}) => {
+  if (!subformField.widget.value || !subformField.widget.value.length) {
+    return null;
+  }
+
+  const subformRecords = subformField.widget.value;
+
+  // 默认展开
+  const [openAll, setOpenAll] = useState(true);
+
+  return (
+    <Collapsible open={openAll} onOpenChange={setOpenAll}>
+      <CollapsibleContent>
+        {subformRecords.map((rowData: generatedField[], row: number) => {
+          if (!rowData || !rowData.length) {
+            return null;
+          }
+          return (
+            <Collapsible defaultOpen={true} key={row}>
+              <CollapsibleContent>
+                {rowData.map((fData: generatedField, col: number) => {
+                  return (
+                    <SubFieldChecker
+                      readonly={readonly}
+                      streaming={streaming}
+                      field={{
+                        label: fData.label,
+                        widget: {
+                          widgetName: fData.fieldName,
+                          type: fData.fieldType,
+                          value: fData.value,
+                        },
+                      }}
+                      onCheckedChange={(checked: boolean, field: F) => {
+                        onChange({
+                          checked,
+                          field,
+                          row,
+                          col,
+                          parentFieldName: subformField.widget.widgetName,
+                        });
+                      }}
+                    />
+                  );
+                })}
+              </CollapsibleContent>
+            </Collapsible>
+          );
+        })}
+      </CollapsibleContent>
+    </Collapsible>
+  );
+};

package/src/const/ui.ts

@@ -1,4 +1,5 @@
 import { FormIconOption } from "../types";
+import { FieldType } from "@baishuyun/types";
 
 export const BotImgUrl = `
   url(data:image/png;base64,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)
@@ -50,3 +51,69 @@ export const FORM_ICON_OPTIONS: FormIconOption[] = [
   { id: 'biaodan35', code: '', label: '表单35', value: 59 },
   { id: 'biaodan36', code: '', label: '表单36', value: 60 },
 ];
+
+export const FieldTypeNameMap: Record<FieldType, string> = {
+  text: '输入框',
+  password: '密码输入框',
+  location: '定位',
+  datetime: '日期时间选择器',
+  radiogroup: '单选框',
+  radio: '单选框',
+  combo: '下拉框',
+  address: '地址',
+  button: '按钮',
+  textarea: '多行输入框',
+  combocheck: '多选下拉框',
+  checkboxgroup: '多选框组',
+  separator: '分割线',
+  upload: '附件上传',
+  number: '数字输入框',
+  dataload: '数据加载',
+  image: '图片上传',
+  signature: '签名',
+  dept: '部门选择',
+  user: '成员选择',
+  usergroup: '成员多选',
+  deptgroup: '部门多选',
+  unknown: '未知类型',
+  sn: '流水号',
+  formula: '公式字段',
+  linkdata: '关联数据',
+  linkquery: '关联查询',
+  subform: '子表单',
+  flowState: '流程状态',
+  flowstate: '流程状态',
+};
+
+export const FIELD_ICON_CODE_MAP: Record<FieldType, string> = {
+  address: '&#xe881;',
+  subform: '&#xe847;',
+  password: '&#xe854;',
+  button: '&#xe8e8;',
+  textarea: '&#xe84f;',
+  datetime: '&#xe849;',
+  text: '&#xe854;',
+  location: '&#xe87f;',
+  radiogroup: '&#xe853;',
+  radio: '&#xe861;',
+  combo: '&#xe84a;',
+  formula: '',
+  flowState: '',
+  flowstate: '',
+  combocheck: '&#xe84b;',
+  separator: '&#xe850;',
+  checkboxgroup: '&#xe84c;',
+  upload: '&#xe621;',
+  number: '&#xe846;',
+  image: '&#xe880;',
+  signature: '&#xe87e;',
+  user: '&#xe856;',
+  dataload: '&#xe848;',
+  linkdata: '&#xe857;',
+  linkquery: '&#xe857;',
+  usergroup: '&#xe851;',
+  dept: '&#xe84d;',
+  sn: '&#xe882;',
+  deptgroup: '&#xe852;',
+  unknown: '&#xe848;',
+};

package/src/hooks/use-column-appear.ts

@@ -0,0 +1,78 @@
+import { useLayoutEffect, useRef, useState } from 'react';
+
+export const TRANSITION = {
+  appearing: 'width 300ms cubic-bezier(0.4,0,0.2,1), opacity 250ms cubic-bezier(0.4,0,0.2,1) 100ms',
+  hiding: 'width 350ms cubic-bezier(0.4,0,0.2,1) 60ms, opacity 200ms ease-out',
+  neutral: 'width 350ms cubic-bezier(0.4,0,0.2,1), opacity 200ms ease-out',
+} as const;
+
+/** hiding 场景最长的 transition 耗时 (width 350ms + delay 60ms)，加少量余量用于 transitionend 兜底 */
+export const TRANSITION_FALLBACK_MS = 500;
+
+interface UseColumnAppearOptions {
+  /** 当前列是否处于隐藏状态 */
+  hidden: boolean;
+}
+
+interface UseColumnAppearResult {
+  /** 列是否正在执行 appear (hidden→visible) 动画 */
+  appearing: boolean;
+  /** 附加到列最外层 DOM 元素的 ref，用于监听 transitionend */
+  colRef: React.RefObject<HTMLDivElement>;
+  /** 当前适用的 transition CSS 属性，直接展开到 style={} */
+  getTransitionStyle: React.CSSProperties;
+}
+
+export const useColumnAppear = ({ hidden }: UseColumnAppearOptions): UseColumnAppearResult => {
+  const [appearing, setAppearing] = useState(false);
+  const prevHiddenRef = useRef<boolean | null>(null);
+  const colRef = useRef<HTMLDivElement>(null);
+
+  // 检测 hidden → visible 转换，触发 appearing
+  useLayoutEffect(() => {
+    if (prevHiddenRef.current === null) {
+      prevHiddenRef.current = hidden;
+      return;
+    }
+    if (prevHiddenRef.current && !hidden) {
+      setAppearing(true);
+    }
+    prevHiddenRef.current = hidden;
+  }, [hidden]);
+
+  // transitionend 监听 + 兜底 timeout 清除 appearing
+  useLayoutEffect(() => {
+    if (!appearing) return;
+    const el = colRef.current;
+    if (!el) return;
+
+    const onTransitionEnd = (e: TransitionEvent) => {
+      if (e.propertyName === 'width') {
+        setAppearing(false);
+      }
+
+      window.dispatchEvent(new Event('resize'));
+    };
+    el.addEventListener('transitionend', onTransitionEnd);
+
+    const fallback = setTimeout(() => setAppearing(false), TRANSITION_FALLBACK_MS);
+
+    return () => {
+      el.removeEventListener('transitionend', onTransitionEnd);
+      clearTimeout(fallback);
+    };
+  }, [appearing]);
+
+  // 计算当前适用的 transition 样式
+  const willChange = hidden || appearing ? ({ willChange: 'width, opacity' } as const) : {};
+  let transitionStyle: React.CSSProperties;
+  if (appearing) {
+    transitionStyle = { transition: TRANSITION.appearing, ...willChange };
+  } else if (hidden) {
+    transitionStyle = { transition: TRANSITION.hiding, ...willChange };
+  } else {
+    transitionStyle = { transition: TRANSITION.neutral };
+  }
+
+  return { appearing, colRef, getTransitionStyle: transitionStyle };
+};