@baishuyun/ai-design 2.1.0-alpha.4 → 2.1.0

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/IconfontPicker.stories.tsx

@@ -0,0 +1,106 @@
+import { useMemo, useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { FontIcon } from '../components/font-icon';
+import { copyTextToClipboard } from '../lib/utils';
+import { ICON_UNICODE_MAP, getIconUnicode } from '@baishuyun/ai-feat-utils';
+
+/**
+ * iconfont（sdk-icon 字体）图标浏览：
+ * 枚举 ICON_UNICODE_MAP 全部命名图标，支持搜索、点击复制图标名，
+ * 方便给 <FontIcon code={getIconUnicode(name)} /> 选图标。
+ */
+const IconfontPicker = () => {
+  const [keyword, setKeyword] = useState('');
+  const [copied, setCopied] = useState<string | null>(null);
+
+  const names = useMemo(() => {
+    const all = Object.keys(ICON_UNICODE_MAP);
+    const kw = keyword.trim().toLowerCase();
+    return kw ? all.filter((n) => n.toLowerCase().includes(kw)) : all;
+  }, [keyword]);
+
+  return (
+    <div style={{ padding: 16, maxWidth: 960 }}>
+      <input
+        value={keyword}
+        onChange={(e) => setKeyword(e.target.value)}
+        placeholder="搜索图标名（如 image / resourcelibrary / Scan）"
+        style={{
+          width: '100%',
+          height: 34,
+          padding: '0 10px',
+          marginBottom: 16,
+          border: '1px solid #E0E0E0',
+          borderRadius: 4,
+          fontSize: 14,
+          outline: 'none',
+          boxSizing: 'border-box',
+        }}
+      />
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fill, minmax(96px, 1fr))',
+          gap: 8,
+        }}
+      >
+        {names.map((name) => (
+          <button
+            key={name}
+            type="button"
+            title={`点击复制：${name}`}
+            onClick={async () => {
+              await copyTextToClipboard(name);
+              setCopied(name);
+              setTimeout(() => setCopied((c) => (c === name ? null : c)), 800);
+            }}
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: 6,
+              padding: '12px 4px',
+              background: copied === name ? '#F0F6FF' : '#fff',
+              border: `1px solid ${copied === name ? '#0265FF' : '#E0E0E0'}`,
+              borderRadius: 8,
+              cursor: 'pointer',
+            }}
+          >
+            <FontIcon
+              code={getIconUnicode(name)}
+              style={{ fontSize: 22, lineHeight: 1, color: '#121111' }}
+            />
+            <span
+              style={{
+                fontSize: 11,
+                color: '#666',
+                wordBreak: 'break-all',
+                textAlign: 'center',
+                lineHeight: 1.2,
+              }}
+            >
+              {name}
+            </span>
+          </button>
+        ))}
+      </div>
+      {names.length === 0 && (
+        <div style={{ textAlign: 'center', color: '#999', padding: 24 }}>
+          未找到匹配「{keyword}」的图标
+        </div>
+      )}
+    </div>
+  );
+};
+
+const meta = {
+  title: 'Example/Icons/Iconfont Picker',
+  component: IconfontPicker,
+  tags: ['autodocs'],
+  parameters: { layout: 'fullscreen' },
+} satisfies Meta<typeof IconfontPicker>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Base: Story = {};

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/stories/TeamWideFormSelect.stories.tsx

@@ -0,0 +1,362 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import {
+  TeamWideFormSelect,
+  TeamWideFormDrawer,
+} from '../components/agent-helper/team-wide-form-select';
+import type { TeamWideFormSelectChangeResult } from '../components/agent-helper/team-wide-form-select/types';
+import type { IAllAppsAndFormsData } from '@baishuyun/types';
+
+// ── Mock：按 /dashboard/app/form/list 真实返回结构构造 ────────────
+
+const CURRENT_APP_ID = 'app_current';
+
+const mockData: IAllAppsAndFormsData = {
+  dock_corps: [],
+  dock_items: [],
+  items: [
+    {
+      _id: 'default',
+      name: '默认分组',
+      appcount: 2,
+      apps: [
+        {
+          _id: CURRENT_APP_ID,
+          appname: '客户管理系统',
+          parent: 'default',
+          style: { color: 3, icon: 66 },
+          copyable: true,
+          deletable: true,
+          editable: true,
+          dock: false,
+          isFavorite: true,
+          appType: 1,
+          appStatus: 1,
+          disable_export: false,
+          formList: {
+            aggregate_table: null,
+            etl_table: null,
+            dash: [
+              {
+                appId: CURRENT_APP_ID,
+                entryId: 'dash_1',
+                hasCoop: false,
+                icon: 60,
+                name: '销售报表',
+                type: 'dash',
+              },
+            ],
+            form: [
+              {
+                appId: CURRENT_APP_ID,
+                entryId: 'form_1',
+                hasCoop: true,
+                icon: 51,
+                name: '采购订单表',
+                type: 'form',
+              },
+              {
+                appId: CURRENT_APP_ID,
+                entryId: 'group_1',
+                hasCoop: true,
+                icon: 25,
+                name: '客户资料',
+                type: 'group',
+                child: [
+                  {
+                    appId: CURRENT_APP_ID,
+                    entryId: 'form_2',
+                    hasCoop: true,
+                    icon: 53,
+                    name: '客户信息表',
+                    type: 'form',
+                  },
+                  {
+                    appId: CURRENT_APP_ID,
+                    entryId: 'group_1_1',
+                    hasCoop: true,
+                    icon: 25,
+                    name: '客户资料分组一',
+                    type: 'group',
+                    child: [
+                      {
+                        appId: CURRENT_APP_ID,
+                        entryId: 'form_3',
+                        hasCoop: true,
+                        icon: 56,
+                        name: '供应商管理表',
+                        type: 'form',
+                      },
+                      {
+                        appId: CURRENT_APP_ID,
+                        entryId: 'form_4',
+                        hasCoop: true,
+                        icon: 56,
+                        name: '客户表单',
+                        type: 'form',
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+            refApps: [],
+          },
+        },
+        {
+          _id: 'app_2',
+          appname: '应用二',
+          parent: 'default',
+          style: { color: 1, icon: 40 },
+          copyable: true,
+          deletable: true,
+          editable: true,
+          dock: false,
+          isFavorite: false,
+          appType: 1,
+          appStatus: 1,
+          disable_export: false,
+          formList: {
+            aggregate_table: null,
+            dash: null,
+            etl_table: null,
+            form: [
+              {
+                appId: 'app_2',
+                entryId: 'app2_form_1',
+                hasCoop: true,
+                icon: 0,
+                name: '未命名表单',
+                type: 'form',
+              },
+              {
+                appId: 'app_2',
+                entryId: 'app2_group_1',
+                hasCoop: true,
+                icon: 25,
+                name: '我的分组一',
+                type: 'group',
+                child: [
+                  {
+                    appId: 'app_2',
+                    entryId: 'app2_form_2',
+                    hasCoop: true,
+                    icon: 58,
+                    name: '供应商管理表',
+                    type: 'form',
+                  },
+                  {
+                    appId: 'app_2',
+                    entryId: 'app2_group_1_1',
+                    hasCoop: true,
+                    icon: 25,
+                    name: '我的分组一杠1',
+                    type: 'group',
+                    child: [
+                      {
+                        appId: 'app_2',
+                        entryId: 'app2_form_3',
+                        hasCoop: true,
+                        icon: 57,
+                        name: '客户信息',
+                        type: 'form',
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+            refApps: [],
+          },
+        },
+      ],
+    },
+    {
+      _id: 'group_b',
+      name: '解决方案模板',
+      appcount: 2,
+      apps: [
+        {
+          _id: 'app_3',
+          appname: '宠物管理',
+          parent: 'group_b',
+          style: { color: 3, icon: 67 },
+          copyable: true,
+          deletable: true,
+          editable: true,
+          dock: false,
+          isFavorite: false,
+          appType: 1,
+          appStatus: 1,
+          disable_export: false,
+          formList: {
+            aggregate_table: null,
+            dash: null,
+            etl_table: null,
+            form: [
+              {
+                appId: 'app_3',
+                entryId: 'app3_form_1',
+                hasCoop: true,
+                icon: 0,
+                name: '宠物信息',
+                type: 'form',
+              },
+            ],
+            refApps: [],
+          },
+        },
+        {
+          _id: 'app_4',
+          appname: '空白应用（无表单）',
+          parent: 'group_b',
+          style: { color: 2, icon: 44 },
+          copyable: true,
+          deletable: true,
+          editable: true,
+          dock: false,
+          isFavorite: false,
+          appType: 1,
+          appStatus: 1,
+          disable_export: false,
+        },
+      ],
+    },
+  ],
+};
+
+// ── Meta ──────────────────────────────────────────────────────────
+
+const meta: Meta<typeof TeamWideFormSelect> = {
+  title: 'Agent Helper/TeamWideFormSelect',
+  component: TeamWideFormSelect,
+  parameters: { layout: 'centered' },
+  args: {
+    data: mockData,
+    placeholder: '请选择表单',
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 320, padding: 20 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ── 下拉模式 ──────────────────────────────────────────────────────
+
+export const Dropdown: Story = {
+  name: '下拉 — 全量树',
+};
+
+export const DropdownWithCurrentApp: Story = {
+  name: '下拉 — 按当前应用分组',
+  args: { currentAppId: CURRENT_APP_ID },
+};
+
+export const DropdownSelected: Story = {
+  name: '下拉 — 已选中',
+  args: { currentAppId: CURRENT_APP_ID, defaultValue: 'form_3' },
+};
+
+export const DropdownDisabled: Story = {
+  name: '下拉 — 禁用',
+  args: { defaultValue: 'form_1', disabled: true },
+};
+
+export const DropdownEmpty: Story = {
+  name: '下拉 — 空数据',
+  args: { data: { dock_corps: [], dock_items: [], items: [] } },
+};
+
+// ── 抽屉模式 ──────────────────────────────────────────────────────
+
+export const DrawerMode: Story = {
+  name: '抽屉 — 左侧滑入',
+  render: (args) => {
+    const [open, setOpen] = useState(false);
+    const [selected, setSelected] =
+      useState<TeamWideFormSelectChangeResult | null>(null);
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+        <button
+          type="button"
+          onClick={() => setOpen(true)}
+          style={{
+            height: 34,
+            padding: '0 12px',
+            border: '1px solid #E0E0E0',
+            borderRadius: 4,
+            background: '#fff',
+            cursor: 'pointer',
+            fontSize: 14,
+          }}
+        >
+          {selected ? selected.form.name : '切换表单'}
+        </button>
+        <TeamWideFormDrawer
+          data={args.data}
+          currentAppId={args.currentAppId}
+          open={open}
+          onOpenChange={setOpen}
+          value={selected?.entryId}
+          onChange={setSelected}
+        />
+        {selected && (
+          <div style={{ fontSize: 12, color: '#666', wordBreak: 'break-all' }}>
+            已选择: {selected.form.name}（appId: {selected.appId}, entryId:{' '}
+            {selected.entryId}）
+          </div>
+        )}
+      </div>
+    );
+  },
+  args: { currentAppId: CURRENT_APP_ID },
+  decorators: [
+    (Story) => (
+      <div style={{ padding: 20 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+// ── 交互式（下拉） ────────────────────────────────────────────────
+
+export const Interactive: Story = {
+  render: (args) => {
+    const [selected, setSelected] =
+      useState<TeamWideFormSelectChangeResult | null>(null);
+    const [useCurrentApp, setUseCurrentApp] = useState(true);
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+        <label style={{ fontSize: 13, display: 'flex', alignItems: 'center', gap: 4 }}>
+          <input
+            type="checkbox"
+            checked={useCurrentApp}
+            onChange={(e) => setUseCurrentApp(e.target.checked)}
+          />
+          按当前应用分组展示
+        </label>
+        <TeamWideFormSelect
+          {...args}
+          currentAppId={useCurrentApp ? CURRENT_APP_ID : undefined}
+          value={selected?.entryId ?? ''}
+          onChange={setSelected}
+        />
+        <div style={{ fontSize: 12, color: '#666', wordBreak: 'break-all', maxWidth: 300 }}>
+          已选择:{' '}
+          {selected
+            ? `${selected.form.name}（appId: ${selected.appId}, entryId: ${selected.entryId}）`
+            : '无'}
+        </div>
+      </div>
+    );
+  },
+};

package/src/stories/UserTextMsgBubble.stories.ts

@@ -2,6 +2,8 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { UserTextMsgBubble } from "../components/user-txt-msg-bubble";
 
+const longText = "供应商信息管理表需要先填写基础资料再补充产品明细。".repeat(9);
+
 const meta = {
   title: "Example/Chat/UserTextMsgBubble",
   component: UserTextMsgBubble,
@@ -22,3 +24,29 @@ export const Base: Story = {
     text: "确认搭建：供应商信息管理表",
   },
 };
+
+export const Long: Story = {
+  args: {
+    text: longText,
+  },
+};
+
+export const CollapseDisabled: Story = {
+  args: {
+    text: longText,
+    collapsible: false,
+  },
+};
+
+export const NoIcon: Story = {
+  args: {
+    text: longText,
+    icon: null,
+  },
+};
+
+export const WithMarkdown: Story = {
+  args: {
+    text: "请按下面格式填写：\n名称：供应商\n\n```ts\nconst name = \"供应商\";\n```",
+  },
+};

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);