@baishuyun/ai-design 1.0.9 → 1.1.0

package/src/components/agent-helper/field-select/index.tsx

@@ -2,7 +2,7 @@ import { useState, useCallback, useMemo, useRef } from 'react';
 import { cn } from '../../../lib/utils';
 import { transCls } from '../../../const/ui';
 import { Popover, PopoverTrigger, PopoverContent } from '../../ui/popover';
-import type { IField, FieldType } from '@baishuyun/types';
+import type { IField, FieldType, ISubformField } from '@baishuyun/types';
 import { SearchIcon } from '../../bs-icons';
 
 const ToggleIcon = ({ expanded }: { expanded: boolean }) => (
@@ -77,6 +77,7 @@ interface FieldTreeNode {
   depth: number;
   children: FieldTreeNode[];
   isExpandable?: boolean;
+  widgetName?: string;
 }
 
 // ── Tree Builder ──────────────────────────────────────────────────
@@ -85,8 +86,8 @@ function buildNodeKey(field: IField, index: number): string {
   return field.widget?.widgetName || String(index);
 }
 
-function buildItemNodeKey(parentKey: string, item: { widget?: { widgetName?: string } }, index: number): string {
-  return item.widget?.widgetName || `${parentKey}-${index}`;
+function buildItemNodeKey(parentKey: string, item: { widget?: { widgetName?: string }; value?: unknown; text?: string }, index: number): string {
+  return (item as { widget?: { widgetName?: string } }).widget?.widgetName || `${parentKey}-${index}`;
 }
 
 function buildFieldTree(fields: IField[], searchQuery: string): FieldTreeNode[] {
@@ -97,22 +98,31 @@ function buildFieldTree(fields: IField[], searchQuery: string): FieldTreeNode[]
   for (let i = 0; i < fields.length; i++) {
     const field = fields[i];
     const label = field.label;
+    const parentWidgetName = field.widget?.widgetName;
+
+    // Only items with a 'widget' property (ISubformField) are expandable sub-fields
     const items = field.widget?.items;
-    const hasItems = items && items.length > 0 && field.widget?.type === 'subform';
-    const rootKey = buildNodeKey(field, i);
+    const subformItems = items?.filter(
+      (item): item is ISubformField => 'widget' in item
+    );
+    const hasItems = subformItems && subformItems.length > 0;
+    const rootKey = parentWidgetName || buildNodeKey(field, i);
 
     const children: FieldTreeNode[] = [];
     if (hasItems) {
-      for (let j = 0; j < items!.length; j++) {
-        const item = items![j];
+      for (let j = 0; j < subformItems!.length; j++) {
+        const item = subformItems![j];
+        const childWidgetName = item.widget?.widgetName || `${rootKey}-item-${j}`;
+        const fullWidgetName = `${parentWidgetName}.${childWidgetName}`;
         children.push({
-          key: buildItemNodeKey(rootKey, item, j),
-          label: item.label,
+          key: fullWidgetName,
+          label: item.label || `选项 ${j + 1}`,
           field: field,
           fieldType: item.widget?.type,
           depth: 1,
           children: [],
           isExpandable: false,
+          widgetName: fullWidgetName,
         });
       }
     }
@@ -129,6 +139,7 @@ function buildFieldTree(fields: IField[], searchQuery: string): FieldTreeNode[]
         depth: 0,
         children,
         isExpandable: hasItems,
+        widgetName: parentWidgetName,
       });
     }
   }
@@ -184,6 +195,7 @@ export const FieldSelectPopover = ({
 
   const handleSelect = useCallback(
     (node: FieldTreeNode) => {
+      if (node.isExpandable) return;
       if (node.field) {
         onSelect(node.field, node.key);
       }
@@ -201,7 +213,11 @@ export const FieldSelectPopover = ({
         : undefined;
 
       const handleRowClick = () => {
-        handleSelect(node);
+        if (node.isExpandable) {
+          toggleExpanded(node.key);
+        } else {
+          handleSelect(node);
+        }
       };
 
       const handleToggleClick = (e: React.MouseEvent) => {
@@ -300,8 +316,15 @@ function buildKeyLabelMap(fields: IField[]): Map<string, string> {
     const items = field.widget?.items;
     if (items) {
       for (let j = 0; j < items.length; j++) {
-        const childKey = buildItemNodeKey(rootKey, items[j], j);
-        map.set(childKey, items[j].label);
+        const item = items[j];
+        // For ISubformField items, use dot-joined widgetName as key
+        if ('widget' in item) {
+          const fullKey = `${field.widget?.widgetName}.${item.widget?.widgetName}`;
+          map.set(fullKey, item.label || `选项 ${j + 1}`);
+        } else {
+          const childKey = buildItemNodeKey(rootKey, item, j);
+          map.set(childKey, item.text || `选项 ${j + 1}`);
+        }
       }
     }
   }

package/src/components/agent-helper/field-value-input/picker-inputs.tsx

@@ -285,7 +285,7 @@ export function AsyncPicker({ field, value, onChange, disabled, service, kind, m
         return;
       }
       if (service?.searchUsers && kind === 'user') {
-        service.searchUsers('').then((users) => {
+        service.searchUsers('', { field: fieldName }).then((users) => {
           const map: Record<string, string> = {};
           users.forEach((u) => {
             if (value.includes(u.id)) map[u.id] = u.name;
@@ -299,7 +299,7 @@ export function AsyncPicker({ field, value, onChange, disabled, service, kind, m
         return;
       }
       if (service?.searchUsers && kind === 'user') {
-        service.searchUsers('').then((users) => {
+        service.searchUsers('', { field: fieldName }).then((users) => {
           const found = users.find((u) => u.id === value);
           if (found) setSelectedLabel(found.name);
         });
@@ -307,12 +307,13 @@ export function AsyncPicker({ field, value, onChange, disabled, service, kind, m
     }
   }, [value, service, kind, multiple]);
 
+  const fieldName = field.widget?.widgetName || "";
   const doSearch = useCallback(
     async (kw: string) => {
       if (!searchFn) return;
       setLoading(true);
       try {
-        const results = await searchFn(kw);
+        const results = await searchFn(kw, { field: fieldName });
         setOptions(results);
       } finally {
         setLoading(false);

package/src/components/agent-helper/placeholder-card/index.tsx

@@ -45,17 +45,20 @@ export const PlaceholderCard = ({
 
       <div className="mt-[16px] text-center text-[#999] text-[14px] leading-[normal]">
         <p className="mb-0">{description}</p>
-        <p>
-          您暂时还没有添加智能体助手。
-          <a
-            href={detailAddress}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-[#0265ff] underline [text-decoration-skip-ink:none] decoration-solid"
-          >
-            了解详情
-          </a>
-        </p>
+        {
+          detailAddress ? (
+            <p>
+              <a
+                href={detailAddress}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-[#0265ff] underline [text-decoration-skip-ink:none] decoration-solid"
+              >
+                了解详情
+              </a>
+            </p>
+          ) : null
+        }
       </div>
 
       <button

package/src/components/agent-helper/prompt-input/index.tsx

@@ -3,7 +3,7 @@ import CodeMirror from 'codemirror';
 import { cn } from '../../../lib/utils';
 import { Popover, PopoverTrigger, PopoverContent } from '../../ui/popover';
 import { FieldSelectPopover } from '../field-select';
-import type { IField } from '@baishuyun/types';
+import type { IField, ISubformField } from '@baishuyun/types';
 
 // ── Create a DOM node for the field tag (used inside CodeMirror) ────
 
@@ -26,30 +26,45 @@ function createFieldTagDom(label: string): HTMLSpanElement {
 
 // ── CodeMirror Helpers ──────────────────────────────────────────────
 
-function FIELD_KEY(field: IField): string {
-  return field.widget?.widgetName || field.label;
-}
-
-function getFieldByKey(fields: IField[], key: string): IField | undefined {
-  return fields.find((f) => FIELD_KEY(f) === key);
+function resolveFieldWidgetInfo(
+  fields: IField[],
+  key: string,
+): { widgetName: string; label: string } | undefined {
+  const dotIndex = key.indexOf('.');
+  if (dotIndex > 0) {
+    const parentName = key.substring(0, dotIndex);
+    const childName = key.substring(dotIndex + 1);
+    const parent = fields.find((f) => f.widget?.widgetName === parentName);
+    if (parent?.widget?.items) {
+      const child = parent.widget.items.find(
+        (item): item is ISubformField =>
+          'widget' in item && item.widget?.widgetName === childName,
+      );
+      if (child) {
+        return { widgetName: key, label: child.label };
+      }
+    }
+  } else {
+    const field = fields.find((f) => f.widget?.widgetName === key);
+    if (field) {
+      return { widgetName: key, label: field.label };
+    }
+  }
+  return undefined;
 }
 
 function addFieldToCM(
   cm: CodeMirror.Editor,
-  field: IField,
+  widgetName: string,
+  displayLabel: string,
 ): void {
-  const key = FIELD_KEY(field);
-  const displayLabel = field.label;
   const from = cm.getCursor('from');
 
-  // Insert the template placeholder as the document text so that
-  // getTemplateFromCM always outputs ${key} regardless of whether
-  // markText has applied the replacedWith DOM decoration yet.
-  cm.replaceSelection('${' + key + '}');
+  cm.replaceSelection('${' + widgetName + '}');
   const to = cm.getCursor();
 
   const tagNode = createFieldTagDom(displayLabel);
-  tagNode.setAttribute('data-field-key', key);
+  tagNode.setAttribute('data-field-key', widgetName);
 
   cm.markText(from, to, {
     handleMouseEvents: true,
@@ -108,9 +123,9 @@ function setTemplateToCM(
   for (const part of parts) {
     const match = part.match(/^\$\{([^${}]*)\}$/);
     if (match) {
-      const field = getFieldByKey(fields, match[1]);
-      if (field) {
-        addFieldToCM(cm, field);
+      const info = resolveFieldWidgetInfo(fields, match[1]);
+      if (info) {
+        addFieldToCM(cm, info.widgetName, info.label);
       } else {
         cm.replaceSelection(part);
       }
@@ -216,11 +231,14 @@ export const PromptInput = ({
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   // Handle controlled value updates
+  const prevFieldsLenRef = useRef(0);
   useEffect(() => {
     const cm = cmRef.current;
     if (!cm || value === undefined) return;
     const currentTemplate = getTemplateFromCM(cm);
-    if (currentTemplate !== value) {
+    const fieldsBecameAvailable = prevFieldsLenRef.current === 0 && fields.length > 0;
+    prevFieldsLenRef.current = fields.length;
+    if (currentTemplate !== value || fieldsBecameAvailable) {
       isInternalUpdateRef.current = true;
       setTemplateToCM(cm, value, fields);
       isInternalUpdateRef.current = false;
@@ -239,12 +257,14 @@ export const PromptInput = ({
   }, [placeholder]);
 
   const handleFieldSelect = useCallback(
-    (field: IField) => {
+    (_field: IField, nodeKey: string) => {
       const cm = cmRef.current;
       if (!cm) return;
+      const info = resolveFieldWidgetInfo(fieldsRef.current, nodeKey);
+      if (!info) return;
       cm.focus();
       isInternalUpdateRef.current = true;
-      addFieldToCM(cm, field);
+      addFieldToCM(cm, info.widgetName, info.label);
       isInternalUpdateRef.current = false;
       const template = getTemplateFromCM(cm);
       onChangeRef.current?.(template);
@@ -585,7 +605,7 @@ export const PromptInput = ({
           background: #EFF0F6;
           border-radius: 4px;
           font-size: 14px;
-          margin: 3px 0;                                                                                                                                                                 
+          margin: 3px 3px;                                                                                                                                                                 
           line-height: normal;
           color: #000000;
           white-space: nowrap;
@@ -601,18 +621,9 @@ export const PromptInput = ({
           line-height: 1.4;          /* 设置一个符合你字体大小的行高，例如 20px */
         }
 
-        .CodeMirror-line > span { 
-          display: inline-flex;       /* 让行内元素使用 inline-flex 布局 */
-          align-items: center;       /* 垂直居中对齐行内元素 */
-          gap: 6px;                  /* 行内元素之间的间距 */
-          flex-wrap: wrap;            /* 允许行内元素换行 */
-        }
-
-        /* 保证光标元素自身不继承异常高度 */
         .CodeMirror-cursor {
-          height: auto !important;    /* 让光标高度由行高自动决定，而不是被某个固定值撑高 */
-          border-left: 1px solid black;  /* 确保光标可见，颜色可自定义 */
-          transform: translateY(0);
+          height: 1.4em;
+          border-left: 1px solid black;
         }
 
         .prompt-field-tag-icon {

package/src/components/agent-scroll-selector.tsx

@@ -170,7 +170,7 @@ const setTriggerRef = useCallback((node: HTMLButtonElement | null) => {
             </button>
           </PopoverTrigger>
           <PopoverContent
-            align="end"
+            align="start"
             sideOffset={4}
             portalContainer={portalContainer}
           >

package/src/components/bs-entry-select/bs-entry-select.tsx

@@ -13,7 +13,7 @@ import { ScrollSlider } from './scroll-slider';
 import { EntryPopover } from './entry-popover';
 import { buildEntryTreeFromAliasMap } from './build-tree';
 import type { BsEntrySelectProps, BsEntrySelectChangeResult } from './types';
-import { SolidArrowDownIcon as ChevronDownIcon, MenuLinesIcon } from '../bs-icons';
+import { MenuLinesIcon } from '../bs-icons';
 
 export type { BsEntrySelectProps, BsEntrySelectChangeResult };
 
@@ -29,6 +29,7 @@ export const BsEntrySelect = forwardRef<HTMLDivElement, BsEntrySelectProps>(
       disabled = false,
       className,
       showSlider = true,
+      showCurrentAppEntriesOnly = false,
     },
     ref,
   ) => {
@@ -171,7 +172,12 @@ export const BsEntrySelect = forwardRef<HTMLDivElement, BsEntrySelectProps>(
     const currentAppTree = useMemo(() => {
       if (!currentAppId || !appDetails[currentAppId]) return [];
       return buildEntryTreeFromAliasMap(appDetails[currentAppId], searchQuery);
-    }, [appDetails, currentAppId, searchQuery]);
+    }, [
+      appDetails,
+      currentAppId,
+      searchQuery,
+      currentAppId != null ? (appDetails[currentAppId]?.entryList?.length ?? 0) : 0,
+    ]);
 
     const hasSearch = searchQuery.trim().length > 0;
 
@@ -185,6 +191,7 @@ export const BsEntrySelect = forwardRef<HTMLDivElement, BsEntrySelectProps>(
             selectedEntryId={selectedEntryId}
             onSelect={handleSelect}
             onOverflowChange={handleOverflowChange}
+            showCurrentAppEntriesOnly={showCurrentAppEntriesOnly}
           />
         )}
 
@@ -230,7 +237,7 @@ export const BsEntrySelect = forwardRef<HTMLDivElement, BsEntrySelectProps>(
               </span>
             )} */}
           </span>
-          <span
+          {/* <span
             className={cn(
               'shrink-0 flex items-center justify-center w-[16px] h-[16px] text-[#666666]',
               transCls,
@@ -238,7 +245,7 @@ export const BsEntrySelect = forwardRef<HTMLDivElement, BsEntrySelectProps>(
             )}
           >
             <ChevronDownIcon size={16} />
-          </span>
+          </span> */}
         </div>
         )}
 
@@ -258,6 +265,7 @@ export const BsEntrySelect = forwardRef<HTMLDivElement, BsEntrySelectProps>(
                 hasOtherApps={hasOtherApps}
                 hasAnyContent={hasAnyContent}
                 hasSearch={hasSearch}
+                showCurrentAppEntriesOnly={showCurrentAppEntriesOnly}
                 onSelect={handleSelect}
               />
             </div>,

package/src/components/bs-entry-select/entry-popover.tsx

@@ -19,6 +19,7 @@ export function EntryPopover({
   hasOtherApps,
   hasAnyContent,
   hasSearch,
+  showCurrentAppEntriesOnly = false,
   onSelect,
 }: {
   searchQuery: string;
@@ -32,6 +33,7 @@ export function EntryPopover({
   hasOtherApps: boolean;
   hasAnyContent: boolean;
   hasSearch: boolean;
+  showCurrentAppEntriesOnly?: boolean;
   onSelect: (result: BsEntrySelectChangeResult) => void;
 }) {
   return (
@@ -70,7 +72,7 @@ export function EntryPopover({
           </AppGroupFolder>
         )}
 
-        {hasOtherApps && (
+        {hasOtherApps && !showCurrentAppEntriesOnly && (
           <AppGroupFolder label="其他应用表单" searchQuery={searchQuery}>
             {otherAppIds.map((appId) => (
               <OtherAppSection

package/src/components/bs-entry-select/other-app-section.tsx

@@ -37,7 +37,7 @@ export function OtherAppSection({
 
   const tree = useMemo(() => {
     return buildEntryTreeFromAliasMap(appDetail, searchQuery);
-  }, [appDetail, searchQuery]);
+  }, [appDetail, searchQuery, appDetail?.entryList?.length]);
 
   return (
     <div>

package/src/components/bs-entry-select/scroll-slider.tsx

@@ -36,12 +36,14 @@ export function ScrollSlider({
   selectedEntryId,
   onSelect,
   onOverflowChange,
+  showCurrentAppEntriesOnly = false,
 }: {
   appDetails: Record<string, IAppDetail>;
   currentAppId?: string;
   selectedEntryId?: string;
   onSelect: (result: BsEntrySelectChangeResult) => void;
   onOverflowChange?: (hasOverflow: boolean) => void;
+  showCurrentAppEntriesOnly?: boolean;
 }) {
   const scrollRef = useRef<HTMLDivElement>(null);
   const [canScrollLeft, setCanScrollLeft] = useState(false);
@@ -73,8 +75,16 @@ export function ScrollSlider({
       }
     }
 
-    return [...currentFirst, ...otherNodes];
-  }, [appDetails, currentAppId]);
+    const merged = [...currentFirst, ...otherNodes];
+    return showCurrentAppEntriesOnly ? currentFirst : merged;
+  }, [
+    appDetails,
+    currentAppId,
+    showCurrentAppEntriesOnly,
+    Object.keys(appDetails)
+      .map((id) => (appDetails[id]?.entryList?.length ?? 0))
+      .join(','),
+  ]);
 
   // Filtered tree for the active group popover
   const filteredGroupTree = useMemo(() => {

package/src/components/bs-entry-select/types.ts

@@ -16,6 +16,7 @@ export interface BsEntrySelectProps {
   disabled?: boolean;
   className?: string;
   showSlider?: boolean;
+  showCurrentAppEntriesOnly?: boolean;
 }
 
 export interface EntryTreeItem {

package/src/components/field-checker.tsx

@@ -1,16 +1,14 @@
 import { memo, useEffect, useRef, useState } from 'react';
-import { FieldType, ValueOf } from '@baishuyun/types';
+import { type FieldType, IField, type IFieldOption as Option } from '@baishuyun/types';
 import { FieldTypeNameMap } from '../const/ui';
-import { ToolUIPart } from 'ai';
-import { FieldsTools, Option } from '@baishuyun/agents';
 import LineChecker from './line-checker';
 import { OptionItem } from './option-item';
 import { FieldIcon } from './field-icon';
 
-type Field = ValueOf<Pick<ToolUIPart<FieldsTools>, 'output'>>;
+type Field = IField;
 
 export interface FieldCheckerProps {
-  field: ValueOf<Pick<ToolUIPart<FieldsTools>, 'output'>>;
+  field: IField;
   isSubField?: boolean;
   disabled?: boolean;
   icon?: React.ReactNode;
@@ -95,7 +93,7 @@ export const FieldChecker = memo(
 
         return next;
       });
-      onChange?.(subChecked, subField, field.widget.widgetName, index);
+      onChange?.(subChecked, subField, field.widget?.widgetName, index);
     };
     // --- end subform state management ---
 
@@ -160,7 +158,7 @@ export const FieldChecker = memo(
                 disabled={disabled}
                 checked={subCheckedMap[index]}
                 field={subField}
-                icon={<FieldIcon type={subField.widget?.type} />}
+                icon={<FieldIcon type={subField.widget?.type!} />}
                 onChange={(subChecked) => {
                   handleSubFieldChange(subChecked, subField, index);
                 }}

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

@@ -1,16 +1,14 @@
 import { memo, useEffect } from 'react';
-import { FieldType, ValueOf } from '@baishuyun/types';
+import { FieldType, IField } 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'>>;
+type Field = IField;
 
 export interface FieldValueCheckerProps {
-  field: ValueOf<Pick<ToolUIPart<FieldsTools>, 'output'>>;
+  field: IField;
   isSubField?: boolean;
   disabled?: boolean;
   readonly?: boolean;

package/src/components/office-container.tsx

@@ -1,4 +1,4 @@
-import { FC, useCallback, useRef } from 'react';
+import { FC, useCallback, useEffect, useRef } from 'react';
 import { useResizableWidth } from '../hooks/use-resizable-width';
 import { useColumnAppear } from '../hooks/use-column-appear';
 import classNames from 'classnames';
@@ -25,6 +25,9 @@ export interface IOfficeContainerProps {
 
     children?: React.ReactNode;
 
+    onResize?: (leftColWid: number, rightColWid: number) => void; 
+
+    className?: string;
 }
 
 
@@ -41,10 +44,15 @@ export const OfficeContainer: FC<IOfficeContainerProps> = ({
     rightColHeaderElement,
     rightColContentElement,
     fullscreenPart = 'none',
+    className,
+    onResize,
 }) => {
     const isRightResizable = !!rightColWidthRange;
     const activeRange = rightColWidthRange ?? leftColWidthRange;
 
+    const transitioningRef = useRef(false);
+    const mountRef = useRef(true);
+
     const { width, handleMouseDown, isDragging } = useResizableWidth({
         range: activeRange,
         initialWidth: activeRange[0],
@@ -93,6 +101,61 @@ export const OfficeContainer: FC<IOfficeContainerProps> = ({
         return `calc(100% - ${width}px)`;
     }, [hideLeftCol, isLeftFullscreen, isRightFullscreen, isRightResizable, width]);
 
+    useEffect(() => {
+        if (!onResize || transitioningRef.current) return;
+        const raf = requestAnimationFrame(() => {
+            const leftW = leftColRef.current?.offsetWidth ?? 0;
+            const rightW = rightColRef.current?.offsetWidth ?? 0;
+            onResize(leftW, rightW);
+        });
+        return () => cancelAnimationFrame(raf);
+    }, [width, fullscreenPart, hideLeftCol, isRightResizable, onResize]);
+
+    // Set guard when fullscreen/hide triggers CSS transitions. Skip mount.
+    useEffect(() => {
+        if (mountRef.current) {
+            mountRef.current = false;
+            return;
+        }
+        transitioningRef.current = true;
+    }, [fullscreenPart, hideLeftCol]);
+
+    // Fire onResize after CSS width transitions complete
+    useEffect(() => {
+        if (!onResize) return;
+
+        let resolved = false;
+        const onWidthTransitionEnd = (e: TransitionEvent) => {
+            if (e.propertyName !== 'width' || resolved) return;
+            resolved = true;
+            transitioningRef.current = false;
+            const leftW = leftColRef.current?.offsetWidth ?? 0;
+            const rightW = rightColRef.current?.offsetWidth ?? 0;
+            onResize(leftW, rightW);
+        };
+
+        const leftEl = leftColRef.current;
+        const rightEl = rightColRef.current;
+
+        leftEl?.addEventListener('transitionend', onWidthTransitionEnd);
+        rightEl?.addEventListener('transitionend', onWidthTransitionEnd);
+
+        const fallback = setTimeout(() => {
+            if (resolved) return;
+            resolved = true;
+            transitioningRef.current = false;
+            const leftW = leftColRef.current?.offsetWidth ?? 0;
+            const rightW = rightColRef.current?.offsetWidth ?? 0;
+            onResize(leftW, rightW);
+        }, 500);
+
+        return () => {
+            leftEl?.removeEventListener('transitionend', onWidthTransitionEnd);
+            rightEl?.removeEventListener('transitionend', onWidthTransitionEnd);
+            clearTimeout(fallback);
+        };
+    }, [fullscreenPart, hideLeftCol, onResize]);
+
     const borderColorCls = 'border-[#0265fc]';
 
     // 全屏时补全 shrink-0，确保 width: 100% 或 width: 0 不会被 flex 容器挤压
@@ -112,7 +175,7 @@ export const OfficeContainer: FC<IOfficeContainerProps> = ({
     const contentStyle: React.CSSProperties = { /*scrollbarGutter: 'stable' */};
 
     return (
-        <div className="relative h-full w-full flex overflow-hidden bg-white">
+        <div className={classNames("relative h-full w-full flex overflow-hidden", className)}>
             {/* fullscreen overlay */}
             {children && (
                 <div>
@@ -133,7 +196,7 @@ export const OfficeContainer: FC<IOfficeContainerProps> = ({
                 <div
                     ref={leftColInnerRef}
                     className="shrink-0 w-full overflow-hidden"
-                    style={{ height: headerHeight }}
+                    style={{ height: headerHeight, background: '#fff' }}
                 >
                     {leftColHeaderElement}
                 </div>
@@ -164,7 +227,7 @@ export const OfficeContainer: FC<IOfficeContainerProps> = ({
                 <div
                     ref={rightColInnerRef}
                     className="shrink-0 w-full"
-                    style={{ height: headerHeight }}
+                    style={{ height: headerHeight, background: "#fff" }}
                 >
                     {rightColHeaderElement}
                 </div>