@baishuyun/ai-design 2.0.47 → 2.0.49

package/src/components/shadow-portal.tsx

@@ -0,0 +1,23 @@
+import { useLayoutEffect, type ElementType, type ReactNode } from 'react';
+import { usePortalContainer } from '../hooks/use-portal-container';
+
+export const ShadowPortal = ({ component: Portal, container, ...props }: {
+  component: ElementType;
+  container?: Element | DocumentFragment | null;
+  children?: ReactNode;
+  forceMount?: true;
+  'data-slot'?: string;
+}) => {
+  const { portalContainer, setTriggerRef, portalReady } = usePortalContainer('data-bs-portal-container');
+  useLayoutEffect(() => {
+    if (container instanceof Element && container.parentNode instanceof ShadowRoot) {
+      container.setAttribute('data-bs-portal-container', '');
+    }
+  }, [container]);
+  return (
+    <>
+      <span ref={setTriggerRef} style={{ display: 'none' }} aria-hidden />
+      {portalReady && <Portal {...props} container={container === undefined ? portalContainer ?? undefined : container} />}
+    </>
+  );
+};

package/src/components/ui/dialog.tsx

@@ -2,12 +2,15 @@ import * as React from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 
 import { cn } from '../../lib/utils';
+import { ShadowPortal } from '../shadow-portal';
 
 const Dialog = DialogPrimitive.Root;
 
 const DialogTrigger = DialogPrimitive.Trigger;
 
-const DialogPortal = DialogPrimitive.Portal;
+const DialogPortal = (props: React.ComponentProps<typeof DialogPrimitive.Portal>) => (
+  <ShadowPortal component={DialogPrimitive.Portal} {...props} />
+);
 
 const DialogClose = DialogPrimitive.Close;
 

package/src/components/ui/drawer.tsx

@@ -4,6 +4,7 @@ import { Drawer as DrawerPrimitive } from "vaul"
 import { cn } from "../../lib/utils"
 import { IconBtn } from "../icon-btn"
 import { CloseIcon } from "../bs-icons"
+import { ShadowPortal } from '../shadow-portal';
 
 function Drawer({
   ...props
@@ -24,7 +25,8 @@ function DrawerPortal({
   container?: HTMLElement | null;
 }) {
   return (
-    <DrawerPrimitive.Portal
+    <ShadowPortal
+      component={DrawerPrimitive.Portal}
       data-slot="drawer-portal"
       container={container ?? undefined}
       {...props}

package/src/components/ui/popover.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 
 import { cn } from '../../lib/utils';
+import { ShadowPortal } from '../shadow-portal';
 
 const Popover = PopoverPrimitive.Root;
 
@@ -52,7 +53,7 @@ const PopoverContent = React.forwardRef<
     });
 
     return (
-      <PopoverPrimitive.Portal container={portalContainer ?? undefined}>
+      <ShadowPortal component={PopoverPrimitive.Portal} container={portalContainer ?? undefined}>
         <PopoverPrimitive.Content
           ref={ref}
           align={align}
@@ -76,7 +77,7 @@ const PopoverContent = React.forwardRef<
           }}
           {...props}
         />
-      </PopoverPrimitive.Portal>
+      </ShadowPortal>
     );
   }
 );

package/src/components/ui/select.tsx

@@ -3,6 +3,7 @@ import * as SelectPrimitive from '@radix-ui/react-select';
 import { ChevronDown, ChevronUp } from 'lucide-react';
 
 import { cn } from '../../lib/utils';
+import { ShadowPortal } from '../shadow-portal';
 
 const Select = SelectPrimitive.Root;
 
@@ -112,7 +113,7 @@ const SelectContent = React.forwardRef<
         {containerProp === undefined && (
           <span ref={setDetectorRef} style={{ display: 'none' }} aria-hidden />
         )}
-        <SelectPrimitive.Portal container={effectiveContainer ?? undefined}>
+        <ShadowPortal component={SelectPrimitive.Portal} container={effectiveContainer ?? undefined}>
           <SelectPrimitive.Content
             ref={ref}
             className={cn(
@@ -161,7 +162,7 @@ const SelectContent = React.forwardRef<
             </SelectPrimitive.Viewport>
             <SelectScrollDownButton />
           </SelectPrimitive.Content>
-        </SelectPrimitive.Portal>
+        </ShadowPortal>
       </>
     );
   }

package/src/components/ui/tooltip.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 
 import { cn } from '../../lib/utils';
+import { ShadowPortal } from '../shadow-portal';
 
 const TooltipZIndexContext = React.createContext<number | undefined>(undefined);
 
@@ -30,7 +31,7 @@ const TooltipContent = React.forwardRef<
   const zIndexFromProvider = React.useContext(TooltipZIndexContext);
 
   return (
-    <TooltipPrimitive.Portal container={portalContainer ?? undefined}>
+    <ShadowPortal component={TooltipPrimitive.Portal} container={portalContainer ?? undefined}>
       <TooltipPrimitive.Content
         ref={ref}
         sideOffset={sideOffset}
@@ -44,7 +45,7 @@ const TooltipContent = React.forwardRef<
         {props.children}
         <TooltipPrimitive.Arrow className="fill-[#525867] stroke-[#525867] stroke-[2px] stroke-linejoin-round [paint-order:stroke_fill]" />
       </TooltipPrimitive.Content>
-    </TooltipPrimitive.Portal>
+    </ShadowPortal>
   );
 });
 

package/src/const/shadow.ts

@@ -0,0 +1,12 @@
+export const scopeSdkStyles = (css: string) => css.replace(/:host(?![-(])/g, ':is(:host, :host > div, [data-bs-shadow-content], [data-bs-portal-container])');
+
+export const SDK_SHADOW_BASELINE = `
+:host, :host > div {
+  font: 14px/1.5 ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  color: #121111;
+  letter-spacing: normal;
+  text-align: start;
+  text-transform: none;
+  color-scheme: light;
+}
+`;

package/src/hooks/use-portal-container.ts

@@ -2,7 +2,9 @@ import { useCallback, useState } from 'react';
 
 export const usePortalContainer = (portalName: string) => {
   const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
+  const [portalReady, setPortalReady] = useState(false);
   const setTriggerRef = useCallback((node: HTMLElement | null) => {
+    setPortalReady(!!node);
     if (!node) {
       setPortalContainer(null);
       return;
@@ -14,14 +16,15 @@ export const usePortalContainer = (portalName: string) => {
         setPortalContainer(existing);
         return;
       }
-      const container = document.createElement('div');
+      const container = node.ownerDocument.createElement('div');
       container.setAttribute(portalName, 'true');
+      container.setAttribute('data-bs-portal-container', '');
       rootNode.appendChild(container);
       setPortalContainer(container);
     } else {
       setPortalContainer(null);
     }
-  }, []);
+  }, [portalName]);
 
-  return { portalContainer, setTriggerRef };
+  return { portalContainer, setTriggerRef, portalReady };
 };

package/src/hooks/use-shadow-boundary.ts

@@ -0,0 +1,64 @@
+import { useEffect, useLayoutEffect, useState, type RefObject } from 'react';
+import { syncHostStylesIntoShadow } from '@baishuyun/ai-feat-utils';
+import { SDK_SHADOW_BASELINE, scopeSdkStyles } from '../const/shadow';
+
+export type ShadowStyleMode = 'sdk' | 'host';
+export type ShadowStyle = string | (() => string);
+
+export const useShadowBoundary = (mode: ShadowStyleMode, styles?: ShadowStyle) => {
+  const [host, setHostRef] = useState<HTMLDivElement | null>(null);
+  const [boundary, setBoundary] = useState<{
+    root: ShadowRoot;
+    container: HTMLDivElement;
+    style: HTMLStyleElement;
+  } | null>(null);
+
+  useLayoutEffect(() => {
+    if (!host) return;
+    const root = host.shadowRoot || host.attachShadow({ mode: 'open' });
+    const style = host.ownerDocument.createElement('style');
+    const container = host.ownerDocument.createElement('div');
+    container.setAttribute('data-bs-shadow-content', '');
+    container.style.display = 'contents';
+    root.append(style, container);
+    setBoundary({ root, container, style });
+    return () => {
+      style.remove();
+      container.remove();
+      setBoundary(null);
+    };
+  }, [host]);
+
+  useLayoutEffect(() => {
+    if (!boundary || !host) return;
+    host.setAttribute('data-bs-style-mode', mode);
+    if (mode === 'sdk') boundary.container.className = '';
+    return mode === 'host' ? syncHostStylesIntoShadow(boundary.root, host) : undefined;
+  }, [boundary, host, mode]);
+
+  useLayoutEffect(() => {
+    if (!boundary) return;
+    boundary.style.toggleAttribute('data-bs-sdk-styles', mode === 'sdk');
+    boundary.style.toggleAttribute('data-bs-custom-styles', mode === 'host');
+    const css = typeof styles === 'function' ? styles() : styles || '';
+    boundary.style.textContent = mode === 'sdk' ? SDK_SHADOW_BASELINE + scopeSdkStyles(css) : css;
+  }, [boundary, mode, styles]);
+
+  return { setHostRef, container: boundary?.container ?? null };
+};
+
+export const useInjectedShadowStyle = (host: RefObject<HTMLElement | null>, css: string | undefined, attribute: string) => {
+  useEffect(() => {
+    const root = host.current?.shadowRoot;
+    if (!root) return;
+    let style = root.querySelector<HTMLStyleElement>(`style[${attribute}]`);
+    if (!css) { style?.remove(); return; }
+    if (!style) {
+      style = root.ownerDocument.createElement('style');
+      style.setAttribute(attribute, '');
+      root.appendChild(style);
+    }
+    style.textContent = css;
+    return () => style?.remove();
+  }, [host, css, attribute]);
+};

package/src/hooks/use-shadow.ts

@@ -1,4 +1,6 @@
 import { useState, useEffect, useRef } from 'react';
+import { SDK_SHADOW_BASELINE, scopeSdkStyles } from '../const/shadow';
+import sdkStyles from '../style.css?inline';
 
 interface UseShadowOptions {
   /** Shadow DOM挂载的根元素（默认挂到body） */
@@ -15,6 +17,7 @@ interface UseShadowOptions {
   extraHtml?: string;
 
   id: string;
+  enabled?: boolean;
 }
 
 /**
@@ -24,6 +27,7 @@ interface UseShadowOptions {
  */
 export const useShadow = ({
   id,
+  enabled = true,
   style = '',
   rootEl,
   containerClasses = [],
@@ -57,10 +61,13 @@ export const useShadow = ({
       wrapperRef.current = null;
     }
 
+    if (!enabled) return;
+
     try {
       // 1. 创建外层包裹元素（挂载Shadow Root的载体）
       const wrapperEl = document.createElement('div');
-      wrapperEl.classList.add(...wrapperClasses, 'wrapper');
+      wrapperEl.classList.add(...wrapperClasses, 'bs-sdk-shadow-wrapper');
+      wrapperEl.setAttribute('data-bs-style-mode', 'sdk');
       // wrapperEl.style.height = '100%';
       wrapperRef.current = wrapperEl;
 
@@ -81,15 +88,15 @@ export const useShadow = ({
       }
 
       // 3. 注入样式到Shadow DOM
-      if (style) {
-        const styleEl = document.createElement('style');
-        styleEl.textContent = style;
-        shadowRoot.appendChild(styleEl);
-      }
+      const styleEl = document.createElement('style');
+      styleEl.setAttribute('data-bs-sdk-styles', '');
+      styleEl.textContent = SDK_SHADOW_BASELINE + scopeSdkStyles(sdkStyles + style);
+      shadowRoot.appendChild(styleEl);
 
       // 4. 创建Shadow内部的容器（最终挂载React Portal的元素）
       const containerEl = document.createElement('div');
       containerEl.classList.add(...containerClasses, 'shadow-container');
+      containerEl.setAttribute('data-bs-shadow-content', '');
       shadowRoot.appendChild(containerEl);
 
       // 5. 将外层元素挂载到指定根节点
@@ -109,7 +116,17 @@ export const useShadow = ({
     //     wrapperRef.current = null;
     //   }
     // };
-  }, [rootEl]); // Recreate when rootEl changes
+    return () => {
+      wrapperRef.current?.remove();
+      wrapperRef.current = null;
+      setShadowContainer(null);
+    };
+  }, [rootEl, enabled]); // Recreate when rootEl changes
+
+  useEffect(() => {
+    const styleEl = wrapperRef.current?.shadowRoot?.querySelector('style[data-bs-sdk-styles]');
+    if (styleEl) styleEl.textContent = SDK_SHADOW_BASELINE + scopeSdkStyles(sdkStyles + style);
+  }, [style, shadowContainer]);
 
   if (shadowContainer) {
     shadowContainer.id = id;

package/src/index.ts

@@ -3,6 +3,8 @@ export { cn, copyTextToClipboard, toHumanReadable, isSubformFieldEqual } from '.
 
 // Hooks
 export { useShadow } from './hooks/use-shadow';
+export { ShadowContent } from './components/shadow-content';
+export type { ShadowContentProps } from './components/shadow-content';
 
 // Constants
 export {

package/src/stories/AppSelect.stories.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
 import { AppSelect, groupsToAppTreeNodes } from '../components/agent-helper/app-select';
 import type { AppTreeNode } from '../components/agent-helper/app-select';
 import type { IAppGroup } from '@baishuyun/types';
@@ -125,6 +126,49 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
 
+export const ConstrainedHeight: Story = {
+  args: { allowEmpty: true, showAll: true },
+  play: async ({ canvasElement }) => {
+    await userEvent.click(within(canvasElement).getByRole('button'));
+    const popover = await within(canvasElement.ownerDocument.body).findByRole('dialog');
+    await userEvent.clear(within(popover).getByRole('textbox'));
+    const content = popover.firstElementChild as HTMLElement;
+    const tree = content.lastElementChild as HTMLElement;
+    await waitFor(() => {
+      expect(popover.getBoundingClientRect().height).toBeLessThanOrEqual(parseFloat(getComputedStyle(popover).maxHeight));
+      expect(content.getBoundingClientRect().bottom).toBeLessThanOrEqual(popover.getBoundingClientRect().bottom);
+      expect(popover.scrollHeight).toBeLessThanOrEqual(popover.clientHeight);
+      expect(tree.scrollHeight).toBeGreaterThan(tree.clientHeight);
+      expect(content.firstElementChild!.getBoundingClientRect().height).toBe(30);
+      expect(within(popover).getByRole('button', { name: '无' }).getBoundingClientRect().height).toBe(34);
+      expect(within(popover).getByRole('button', { name: '全部应用' }).getBoundingClientRect().height).toBe(34);
+    });
+    tree.scrollTop = tree.scrollHeight;
+    expect(tree.scrollTop).toBeGreaterThan(0);
+    await userEvent.type(within(popover).getByRole('textbox'), 'API接口管理');
+    await userEvent.click(within(popover).getByRole('button', { name: 'API接口管理' }));
+    expect(within(canvasElement).getByRole('button')).toHaveTextContent('API接口管理');
+  },
+};
+
+export const EmbeddedConstrainedHeight: Story = {
+  args: { popoverContentOnly: true, disableMaxHeight: true, showAll: true, contentCls: 'h-full' },
+  render: (args) => <div style={{ height: 200 }}><AppSelect {...args} /></div>,
+  play: async ({ canvasElement }) => {
+    const content = within(canvasElement).getByRole('textbox').parentElement!.parentElement!;
+    const tree = content.lastElementChild as HTMLElement;
+    await waitFor(() => {
+      expect(content.getBoundingClientRect().height).toBe(200);
+      expect(tree.getBoundingClientRect().bottom).toBeLessThanOrEqual(content.getBoundingClientRect().bottom);
+      expect(tree.scrollHeight).toBeGreaterThan(tree.clientHeight);
+      expect(within(content).getByRole('button', { name: '全部应用' }).getBoundingClientRect().height).toBe(34);
+    });
+    expect(content.firstElementChild!.getBoundingClientRect().height).toBe(30);
+    tree.scrollTop = tree.scrollHeight;
+    expect(tree.scrollTop).toBeGreaterThan(0);
+  },
+};
+
 export const SingleSelected: Story = {
   args: { defaultValue: 'app2' },
 };

package/src/stories/FieldValueInput.stories.tsx

@@ -21,9 +21,12 @@ const mockService: IFieldValueService = {
   searchDepts: async (keyword) => {
     await new Promise((r) => setTimeout(r, 500));
     const depts = [
-      { id: 'dept1', name: '技术部' },
-      { id: 'dept2', name: '产品部' },
-      { id: 'dept3', name: '设计部' },
+      { id: 'dept-root', name: '百数科技' },
+      { id: 'dept1', name: '技术部', parentId: 'dept-root' },
+      { id: 'dept1-1', name: '前端组', parentId: 'dept1' },
+      { id: 'dept1-2', name: '后端组', parentId: 'dept1' },
+      { id: 'dept2', name: '产品部', parentId: 'dept-root' },
+      { id: 'dept3', name: '设计部', parentId: 'dept-root' },
     ];
     return keyword
       ? depts.filter((d) => d.name.includes(keyword))

package/src/stories/FormSelect.stories.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
 import { FormSelect } from '../components/agent-helper/form-select';
 import type { FormSelectItem, FormSelectChangeResult } from '../components/agent-helper/form-select';
 
@@ -91,6 +92,45 @@ export const ManyItems: Story = {
   },
 };
 
+export const ConstrainedHeight: Story = {
+  args: { items: manyFormItems, allowEmpty: true },
+  play: async ({ canvasElement, args }) => {
+    if (!args.popoverOnly) {
+      await userEvent.click(within(canvasElement).getByText(/^(无|测试表单 30)$/));
+    }
+    const search = await within(canvasElement.ownerDocument.body).findByRole('textbox');
+    await userEvent.clear(search);
+    const content = search.parentElement!.parentElement!;
+    const list = content.lastElementChild as HTMLElement;
+    await waitFor(() => {
+      expect(content.getBoundingClientRect().height).toBeLessThanOrEqual(300);
+      expect(content.scrollHeight).toBeLessThanOrEqual(content.clientHeight);
+      expect(search.parentElement!.getBoundingClientRect().height).toBe(30);
+      expect(within(content).getByText('无').parentElement!.getBoundingClientRect().height).toBe(34);
+      expect(list.scrollHeight).toBeGreaterThan(list.clientHeight);
+      if (!args.popoverOnly) {
+        const portal = content.parentElement!;
+        expect(parseFloat(getComputedStyle(portal).maxHeight)).toBeLessThanOrEqual(300);
+        expect(content.getBoundingClientRect().bottom).toBeLessThanOrEqual(portal.getBoundingClientRect().bottom);
+      }
+    });
+    const searchTop = search.getBoundingClientRect().top;
+    list.scrollTop = list.scrollHeight;
+    expect(list.scrollTop).toBeGreaterThan(0);
+    expect(search.getBoundingClientRect().top).toBe(searchTop);
+    await userEvent.type(search, '测试表单 30');
+    await userEvent.click(within(content).getByText('测试表单 30'));
+    if (!args.popoverOnly) {
+      expect(within(canvasElement).getByText('测试表单 30')).toBeVisible();
+    }
+  },
+};
+
+export const PopoverOnlyConstrainedHeight: Story = {
+  ...ConstrainedHeight,
+  args: { ...ConstrainedHeight.args, popoverOnly: true },
+};
+
 export const Empty: Story = {
   args: {
     items: [],

package/src/stories/RelationalOperatorSelect.stories.tsx

@@ -45,6 +45,33 @@ export const Disabled: Story = {
   },
 };
 
+export const DeptGroupLabels: Story = {
+  args: {
+    defaultValue: 'in',
+    operators: ['in', 'all', 'eq', 'empty', 'not_empty'],
+    fieldType: 'deptgroup',
+  },
+  name: '按字段类型显示描述（部门多选）',
+};
+
+export const AddressLabels: Story = {
+  args: {
+    defaultValue: 'in',
+    operators: ['in', 'nin', 'empty', 'not_empty'],
+    fieldType: 'address',
+  },
+  name: '按字段类型显示描述（地址）',
+};
+
+export const CustomOperatorLabels: Story = {
+  args: {
+    defaultValue: 'eq',
+    operators: ['eq', 'neq'],
+    operatorLabels: { eq: '是', neq: '不是' },
+  },
+  name: '自定义文案（operatorLabels）',
+};
+
 export const Controlled: Story = {
   render: () => {
     const [value, setValue] = useState<relationalOperator>('eq');

package/src/style.css

@@ -82,7 +82,34 @@
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
 
-  --radius: 0.625rem;
+  --spacing: 3.5px;
+  --radius: 8.75px;
+  --text-xs: 10.5px;
+  --text-xs--line-height: 14px;
+  --text-sm: 12.25px;
+  --text-sm--line-height: 17.5px;
+  --text-base: 14px;
+  --text-base--line-height: 21px;
+  --text-lg: 15.75px;
+  --text-lg--line-height: 24.5px;
+  --text-xl: 17.5px;
+  --text-xl--line-height: 24.5px;
+  --text-2xl: 21px;
+  --text-2xl--line-height: 28px;
+  --text-3xl: 26.25px;
+  --text-3xl--line-height: 31.5px;
+  --text-4xl: 31.5px;
+  --text-4xl--line-height: 35px;
+  --text-5xl: 42px;
+  --text-5xl--line-height: 1;
+  --text-6xl: 52.5px;
+  --text-6xl--line-height: 1;
+  --text-7xl: 63px;
+  --text-7xl--line-height: 1;
+  --text-8xl: 84px;
+  --text-8xl--line-height: 1;
+  --text-9xl: 112px;
+  --text-9xl--line-height: 1;
   --background: oklch(1 0 0);
   --foreground: oklch(0.129 0.042 264.695);
   --card: oklch(1 0 0);