@baishuyun/ai-design 1.0.2 → 1.0.3

package/src/hooks/use-resizable-width.ts

@@ -5,6 +5,8 @@ interface UseResizableWidthOptions {
   range: [number, number];
   /** 初始宽度，未指定时取 range 上限 */
   initialWidth?: number;
+  /** 反转拖拽方向：拖拽鼠标向右时宽度减小而非增大 */
+  invertDrag?: boolean;
 }
 
 interface UseResizableWidthResult {
@@ -26,6 +28,7 @@ interface UseResizableWidthResult {
 export const useResizableWidth = ({
   range,
   initialWidth,
+  invertDrag,
 }: UseResizableWidthOptions): UseResizableWidthResult => {
   const [minWidth, maxWidth] = range;
   const [width, setWidth] = useState<number>(initialWidth ?? maxWidth);
@@ -39,11 +42,15 @@ export const useResizableWidth = ({
   const handleMouseMove = useCallback(
     (e: MouseEvent) => {
       const delta = e.clientX - stateRef.current.startX;
-      const newWidth = Math.min(Math.max(stateRef.current.startWidth + delta, minWidth), maxWidth);
+      const adjustedDelta = invertDrag ? -delta : delta;
+      const newWidth = Math.min(
+        Math.max(stateRef.current.startWidth + adjustedDelta, minWidth),
+        maxWidth
+      );
 
       setWidth(newWidth);
     },
-    [minWidth, maxWidth]
+    [minWidth, maxWidth, invertDrag]
   );
 
   const handleMouseUp = useCallback(() => {
@@ -52,6 +59,7 @@ export const useResizableWidth = ({
     document.removeEventListener('mousemove', handleMouseMove);
     document.removeEventListener('mouseup', handleMouseUp);
 
+    window.dispatchEvent(new Event('resize'));
     document.body.style.cursor = ''; // 恢复默认光标
   }, [handleMouseMove]);
 

package/src/index.ts

@@ -1,11 +1,11 @@
 // Utils
-export { cn, copyTextToClipboard } from './lib/utils';
+export { cn, copyTextToClipboard, toHumanReadable, isSubformFieldEqual } from './lib/utils';
 
 // Hooks
 export { useShadow } from './hooks/use-shadow';
 
 // Constants
-export { transCls, BotImgUrl, WarningImgUrl, ChatHeaderBgImgUrl, FORM_ICON_OPTIONS } from './const/ui';
+export { transCls, BotImgUrl, WarningImgUrl, ChatHeaderBgImgUrl, FORM_ICON_OPTIONS, FieldTypeNameMap, FIELD_ICON_CODE_MAP } from './const/ui';
 
 // Types
 export type { FormIconOption, LegacySlotRenderer } from './types';
@@ -74,3 +74,12 @@ export { UserTextMsgBubble } from './components/user-txt-msg-bubble';
 export { OfficeContainer } from './components/office-container';
 export type { IOfficeContainerProps } from './components/office-container';
 export { WarningMessage } from './components/warning-msg';
+export { Collapsible, CollapsibleTrigger, CollapsibleContent } from './components/collapsible';
+export { FieldIcon } from './components/field-icon';
+export { FieldChecker } from './components/field-checker';
+export type { FieldCheckerProps } from './components/field-checker';
+export { FieldValueChecker } from './components/field-value-checker';
+export type { FieldValueCheckerProps } from './components/field-value-checker';
+export { SubformFieldsValueChecker } from './components/subform-fields-value-checker';
+export { FieldCheckerListMsg, FieldValueCheckerListMsg } from './components/field-checker-list-msg';
+export type { FieldCheckerListMsgRef } from './components/field-checker-list-msg';

package/src/lib/utils.ts

@@ -1,5 +1,6 @@
 import { clsx, type ClassValue } from 'clsx';
 import { twMerge } from 'tailwind-merge';
+import { FieldType, IAddress, ILocation, IField } from '@baishuyun/types';
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
@@ -50,3 +51,69 @@ export async function copyTextToClipboard(text: string): Promise<boolean> {
     return false;
   }
 }
+
+function isOptionArray(value: unknown): value is Array<{ label: string; value: string }> {
+  if (!Array.isArray(value)) {
+    return false;
+  }
+
+  return value.every(
+    (item) =>
+      typeof item === 'object' &&
+      item !== null &&
+      'label' in item &&
+      'value' in item &&
+      typeof (item as any).label === 'string' &&
+      typeof (item as any).value === 'string'
+  );
+}
+
+export const toHumanReadable = (value: unknown, type: FieldType): string | unknown => {
+  if (type === 'address' && typeof value === 'object') {
+    const v = value as IAddress;
+    return `${v.province} ${v.city} ${v.district} ${v.detail}`;
+  }
+
+  if (type === 'location' && typeof value === 'object') {
+    const v = value as ILocation;
+    const lnglatXY = v.lnglatXY || ['', ''];
+    return `经度: ${lnglatXY[0] || ''}, 纬度: ${lnglatXY[1] || ''}`;
+  }
+
+  if (Array.isArray(value)) {
+    return value.join(', ');
+  }
+
+  if (isOptionArray(value)) {
+    const values = value.map((item) => item.value);
+    return values.join(', ');
+  }
+
+  return value;
+};
+
+export const isSubformFieldEqual = (f1: IField, f2: IField, widgetArrKey: string = 'value') => {
+  // 不是子表单字段，不进行比较，视为相等
+  if (f1?.widget?.type !== 'subform' || f2?.widget?.type !== 'subform') {
+    return true;
+  }
+
+  const subFields1 = (f1?.widget as any)[widgetArrKey] || [];
+  const subFields2 = (f2?.widget as any)[widgetArrKey] || [];
+
+  // 子表单字段长度不等，视为不同
+  if (subFields1.length !== subFields2.length) {
+    return false;
+  }
+
+  for (let i = 0; i < subFields1.length; i++) {
+    const subField1 = subFields1[i];
+    const subField2 = subFields2[i];
+
+    if (subField1.length !== subField2.length) {
+      return false;
+    }
+  }
+
+  return true;
+};

package/src/stories/BsEntrySelect.stories.tsx

@@ -149,7 +149,7 @@ const meta: Meta<typeof BsEntrySelect> = {
   },
   decorators: [
     (Story) => (
-      <div style={{ padding: 60, minHeight: 400 }}>
+      <div style={{ padding: 60, minHeight: 400, maxWidth: 500 }}>
         <Story />
       </div>
     ),
@@ -184,7 +184,7 @@ export const Open: Story = {
   },
   play: async ({ canvasElement }) => {
     const trigger = canvasElement.querySelector(
-      '[class*="rounded-[4px]"][class*="cursor-pointer"]',
+      '[class*="select-none"]',
     ) as HTMLElement;
     if (trigger) trigger.click();
   },
@@ -259,3 +259,46 @@ export const Interactive: Story = {
     placeholder: '请选择表单',
   },
 };
+
+export const WithoutSlider: Story = {
+  args: {
+    appDetails: mockAppDetails,
+    currentAppId: 'app1',
+    placeholder: '请选择表单',
+    showSlider: false,
+  },
+};
+
+export const ScrollOverflow: Story = {
+  render: (args) => (
+    <div style={{ maxWidth: 300 }}>
+      <BsEntrySelect {...args} />
+    </div>
+  ),
+  args: {
+    appDetails: mockAppDetails,
+    currentAppId: 'app1',
+    placeholder: '请选择表单',
+  },
+};
+
+export const NoOverflow: Story = {
+  args: {
+    appDetails: {
+      app1: mockAppDetails.app1,
+    },
+    currentAppId: 'app1',
+    placeholder: '请选择表单',
+  },
+};
+
+export const OnlyCurrentApp: Story = {
+  args: {
+    appDetails: {
+      app1: mockAppDetails.app1,
+    },
+    currentAppId: 'app1',
+    placeholder: '请选择表单',
+    defaultValue: 'entry1',
+  },
+};

package/src/stories/OfficeContainer.stories.tsx

@@ -1,6 +1,7 @@
+import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 
-import { OfficeContainer } from "../components/office-container";
+import { OfficeContainer, type FullScreenPart } from "../components/office-container";
 
 const meta: Meta<typeof OfficeContainer> = {
   title: "AI Office/OfficeContainer",
@@ -80,3 +81,151 @@ export const CustomHeaderHeight: Story = {
     ),
   },
 };
+
+export const RightColResizable: Story = {
+  args: {
+    rightColWidthRange: [400, 700],
+    leftColHeaderElement: (
+      <PlaceholderHeader>Left Header (flexible)</PlaceholderHeader>
+    ),
+    leftColContentElement: (
+      <PlaceholderContent>
+        Left Content — this column now flex-fills remaining space
+      </PlaceholderContent>
+    ),
+    rightColHeaderElement: (
+      <PlaceholderHeader bg="bg-emerald-500">
+        Right Header (resizable)
+      </PlaceholderHeader>
+    ),
+    rightColContentElement: (
+      <PlaceholderContent bg="bg-emerald-50">
+        Right Content — drag the resizer to resize this column (400–700px)
+      </PlaceholderContent>
+    ),
+  },
+};
+
+export const CustomColumnStyles: Story = {
+  args: {
+    leftColCls: "bg-amber-50",
+    rightColCls: "bg-sky-50",
+    leftColHeaderElement: <PlaceholderHeader>Left (amber-50 bg)</PlaceholderHeader>,
+    leftColContentElement: (
+      <PlaceholderContent bg="bg-amber-100">
+        Custom left column background via leftColCls
+      </PlaceholderContent>
+    ),
+    rightColHeaderElement: (
+      <PlaceholderHeader bg="bg-sky-500">Right (sky-50 bg)</PlaceholderHeader>
+    ),
+    rightColContentElement: (
+      <PlaceholderContent bg="bg-sky-100">
+        Custom right column background via rightColCls
+      </PlaceholderContent>
+    ),
+  },
+};
+
+export const FullscreenLeftCol: Story = {
+  args: {
+    fullscreenPart: "leftCol",
+    leftColHeaderElement: <PlaceholderHeader>Left Header (Fullscreen)</PlaceholderHeader>,
+    leftColContentElement: (
+      <PlaceholderContent>Left Content — now filling the entire viewport</PlaceholderContent>
+    ),
+    rightColHeaderElement: (
+      <PlaceholderHeader bg="bg-emerald-500">Right Header (hidden)</PlaceholderHeader>
+    ),
+    rightColContentElement: (
+      <PlaceholderContent bg="bg-emerald-50">
+        Right Content — hidden when left is fullscreen
+      </PlaceholderContent>
+    ),
+  },
+};
+
+export const FullscreenRightCol: Story = {
+  args: {
+    fullscreenPart: "rightCol",
+    leftColHeaderElement: <PlaceholderHeader>Left Header (hidden)</PlaceholderHeader>,
+    leftColContentElement: (
+      <PlaceholderContent>
+        Left Content — hidden when right is fullscreen
+      </PlaceholderContent>
+    ),
+    rightColHeaderElement: (
+      <PlaceholderHeader bg="bg-emerald-500">Right Header (Fullscreen)</PlaceholderHeader>
+    ),
+    rightColContentElement: (
+      <PlaceholderContent bg="bg-emerald-50">
+        Right Content — now filling the entire viewport
+      </PlaceholderContent>
+    ),
+  },
+};
+
+export const ToggleFullscreen: Story = {
+  render: () => {
+    const [part, setPart] = useState<FullScreenPart>("none");
+
+    const labels: Record<FullScreenPart, string> = {
+      none: "Normal",
+      leftCol: "Left Fullscreen",
+      rightCol: "Right Fullscreen",
+    };
+
+    return (
+      <div style={{ height: "100vh", width: "100vw", display: "flex", flexDirection: "column" }}>
+        <div
+          style={{
+            position: "absolute",
+            top: 12,
+            left: "50%",
+            transform: "translateX(-50%)",
+            zIndex: 20,
+            display: "flex",
+            gap: 8,
+          }}
+        >
+          {(["none", "leftCol", "rightCol"] as FullScreenPart[]).map((p) => (
+            <button
+              key={p}
+              onClick={() => setPart(p)}
+              style={{
+                padding: "6px 16px",
+                borderRadius: 6,
+                border: part === p ? "2px solid #0265fc" : "1px solid #d0d0d0",
+                background: part === p ? "#e8f0fe" : "#fff",
+                cursor: "pointer",
+                fontSize: 13,
+                fontWeight: part === p ? 600 : 400,
+              }}
+            >
+              {labels[p]}
+            </button>
+          ))}
+        </div>
+        <div style={{ flex: 1 }}>
+          <OfficeContainer
+            fullscreenPart={part}
+            leftColHeaderElement={<PlaceholderHeader>Left Header</PlaceholderHeader>}
+            leftColContentElement={
+              <PlaceholderContent>
+                Left Content — watch the smooth transition when toggling fullscreen
+              </PlaceholderContent>
+            }
+            rightColHeaderElement={
+              <PlaceholderHeader bg="bg-emerald-500">Right Header</PlaceholderHeader>
+            }
+            rightColContentElement={
+              <PlaceholderContent bg="bg-emerald-50">
+                Right Content — watch the smooth transition when toggling fullscreen
+              </PlaceholderContent>
+            }
+          />
+        </div>
+      </div>
+    );
+  },
+};

package/src/stories/collapsible.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "../components/collapsible";
+
+const meta: Meta<typeof Collapsible> = {
+  title: "Example/Chat/Collapsible",
+  component: Collapsible,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Collapsible>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        <CollapsibleTrigger className="px-4 py-2 bg-[#EFF0F6] rounded cursor-pointer">
+          点击展开/收起
+        </CollapsibleTrigger>
+        <CollapsibleContent className="px-4 py-2">
+          <p>这是可折叠的内容区域。</p>
+          <p>可以放置任意内容。</p>
+        </CollapsibleContent>
+      </>
+    ),
+  },
+};
+
+export const DefaultOpen: Story = {
+  args: {
+    defaultOpen: true,
+    children: (
+      <>
+        <CollapsibleTrigger className="px-4 py-2 bg-[#EFF0F6] rounded cursor-pointer">
+          默认展开状态
+        </CollapsibleTrigger>
+        <CollapsibleContent className="px-4 py-2">
+          <p>默认展开的内容。</p>
+        </CollapsibleContent>
+      </>
+    ),
+  },
+};

package/src/stories/field-checker-list-msg.stories.tsx

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { FieldCheckerListMsg, FieldValueCheckerListMsg } from "../components/field-checker-list-msg";
+import { FieldIcon } from "../components/field-icon";
+import type { FieldCheckerProps } from "../components/field-checker";
+import type { FieldValueCheckerProps } from "../components/field-value-checker";
+
+const makeField = (label: string, type = "text"): FieldCheckerProps["field"] => ({
+  label,
+  widget: { widgetName: label, type },
+});
+
+const makeCheckerFields = (): FieldCheckerProps[] => [
+  { field: makeField("供应商名称", "text"), icon: <FieldIcon type="text" />, onChange: (c, f) => console.log("change", c, f.label) },
+  { field: makeField("联系方式", "text"), icon: <FieldIcon type="text" />, onChange: (c, f) => console.log("change", c, f.label) },
+  { field: makeField("地址", "location"), icon: <FieldIcon type="location" />, onChange: (c, f) => console.log("change", c, f.label) },
+  { field: makeField("供应商等级", "radiogroup"), icon: <FieldIcon type="radiogroup" />, onChange: (c, f) => console.log("change", c, f.label) },
+];
+
+const makeFilledFields = (): FieldValueCheckerProps[] => [
+  { field: { label: "供应商名称", widget: { widgetName: "name", type: "text", value: "腾讯科技" } }, onChange: () => {} },
+  { field: { label: "联系电话", widget: { widgetName: "phone", type: "text", value: "0755-86013388" } }, onChange: () => {} },
+  { field: { label: "员工数量", widget: { widgetName: "count", type: "number", value: 50000 } }, onChange: () => {} },
+];
+
+const meta: Meta<typeof FieldCheckerListMsg> = {
+  title: "Example/Chat/FieldCheckerListMsg",
+  component: FieldCheckerListMsg,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 500 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof FieldCheckerListMsg>;
+
+export const Default: Story = {
+  args: {
+    fields: makeCheckerFields(),
+    streaming: false,
+  },
+};
+
+export const StreamingState: Story = {
+  args: {
+    fields: makeCheckerFields(),
+    streaming: true,
+  },
+};
+
+export const ConfirmedState: Story = {
+  args: {
+    fields: makeCheckerFields(),
+    streaming: false,
+    confirmed: true,
+  },
+};
+
+export const FieldValueCheckerListMsgDefault: Story = {
+  args: {
+    fields: [],
+    streaming: false,
+  },
+  render: () => (
+    <div style={{ width: 500 }}>
+      <FieldValueCheckerListMsg
+        props={makeFilledFields()}
+        streaming={false}
+      />
+    </div>
+  ),
+};
+
+export const FieldValueCheckerListMsgStreaming: Story = {
+  args: {
+    fields: [],
+    streaming: false,
+  },
+  render: () => (
+    <div style={{ width: 500 }}>
+      <FieldValueCheckerListMsg
+        props={makeFilledFields()}
+        streaming={true}
+      />
+    </div>
+  ),
+};

package/src/stories/field-checker.stories.tsx

@@ -0,0 +1,117 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { FieldChecker } from "../components/field-checker";
+import { FieldIcon } from "../components/field-icon";
+import type { FieldCheckerProps } from "../components/field-checker";
+
+const makeField = (overrides: Partial<FieldCheckerProps["field"]> = {}): FieldCheckerProps["field"] => ({
+  label: "供应商名称",
+  widget: {
+    widgetName: "supplier_name",
+    type: "text",
+    ...overrides.widget,
+  },
+  ...overrides,
+});
+
+const meta: Meta<typeof FieldChecker> = {
+  title: "Example/Chat/FieldChecker",
+  component: FieldChecker,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 400 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof FieldChecker>;
+
+export const Default: Story = {
+  args: {
+    field: makeField(),
+    icon: <FieldIcon type="text" />,
+  },
+};
+
+export const WithOptions: Story = {
+  args: {
+    field: {
+      label: "供应商等级",
+      widget: {
+        widgetName: "supplier_level",
+        type: "radiogroup",
+        items: [
+          { value: "A", text: "A级", color: "#52c41a" },
+          { value: "B", text: "B级", color: "#1677ff" },
+          { value: "C", text: "C级", color: "#fa8c16" },
+        ],
+      },
+    },
+    icon: <FieldIcon type="radiogroup" />,
+  },
+};
+
+export const WithValue: Story = {
+  args: {
+    field: makeField({ widget: { widgetName: "supplier_name", type: "text" } }),
+    value: "深圳市腾讯计算机系统有限公司",
+    icon: <FieldIcon type="text" />,
+  },
+};
+
+export const Subform: Story = {
+  args: {
+    field: {
+      label: "联系方式",
+      widget: {
+        widgetName: "contact_info",
+        type: "subform",
+        items: [
+          {
+            label: "联系人",
+            widget: { widgetName: "contact_name", type: "text" },
+          },
+          {
+            label: "电话",
+            widget: { widgetName: "contact_phone", type: "text" },
+          },
+        ],
+      },
+    },
+    icon: <FieldIcon type="subform" />,
+    onChange: (checked, field, parentFieldName, index) => {
+      console.log("FieldChecker onChange:", { checked, field: field.label, parentFieldName, index });
+    },
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    field: makeField(),
+    disabled: true,
+    icon: <FieldIcon type="text" />,
+  },
+};
+
+export const Confirmed: Story = {
+  args: {
+    field: makeField(),
+    confirmed: true,
+    icon: <FieldIcon type="text" />,
+  },
+};
+
+export const Streaming: Story = {
+  args: {
+    field: makeField(),
+    streaming: true,
+    icon: <FieldIcon type="text" />,
+  },
+};

package/src/stories/field-icon.stories.tsx

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { FieldIcon } from "../components/field-icon";
+
+const meta: Meta<typeof FieldIcon> = {
+  title: "Example/Chat/FieldIcon",
+  component: FieldIcon,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof FieldIcon>;
+
+export const Text: Story = {
+  args: { type: "text" },
+};
+
+export const Number: Story = {
+  args: { type: "number" },
+};
+
+export const Datetime: Story = {
+  args: { type: "datetime" },
+};
+
+export const Subform: Story = {
+  args: { type: "subform" },
+};
+
+export const Formula: Story = {
+  args: { type: "formula" },
+};
+
+export const Location: Story = {
+  args: { type: "location" },
+};
+
+export const Upload: Story = {
+  args: { type: "upload" },
+};
+
+export const Unknown: Story = {
+  args: { type: "unknown" },
+};
+
+export const AllIcons: Story = {
+  args: { type: "text" },
+  render: () => {
+    const types = [
+      "text", "number", "datetime", "location", "address", "subform",
+      "password", "textarea", "radiogroup", "radio", "combo", "combocheck",
+      "checkboxgroup", "separator", "upload", "image", "signature", "button",
+      "user", "usergroup", "dept", "deptgroup", "dataload", "linkdata",
+      "linkquery", "sn", "formula", "flowState", "unknown",
+    ] as const;
+    return (
+      <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 12 }}>
+        {types.map((type) => (
+          <div key={type} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 4 }}>
+            <FieldIcon type={type} />
+            <span style={{ fontSize: 11 }}>{type}</span>
+          </div>
+        ))}
+      </div>
+    );
+  },
+};