@baishuyun/ai-design 1.0.7 → 1.0.9

package/src/stories/BsConditionInput.stories.tsx

@@ -0,0 +1,460 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState, useCallback } from 'react';
+import { BsConditionInput } from '../components/agent-helper/condition-input';
+import { conditionStringify2bsCondition } from '@baishuyun/ai-feat-utils';
+import type { IField, IFieldValueService, ICondition } from '@baishuyun/types';
+
+const mockService: IFieldValueService = {
+  searchUsers: async (keyword) => {
+    await new Promise((r) => setTimeout(r, 300));
+    const users = [
+      { id: 'user1', name: '张三' },
+      { id: 'user2', name: '李四' },
+      { id: 'user3', name: '王五' },
+    ];
+    return keyword ? users.filter((u) => u.name.includes(keyword)) : users;
+  },
+  searchDepts: async (keyword) => {
+    await new Promise((r) => setTimeout(r, 300));
+    const depts = [
+      { id: 'dept1', name: '技术部' },
+      { id: 'dept2', name: '产品部' },
+      { id: 'dept3', name: '设计部' },
+    ];
+    return keyword ? depts.filter((d) => d.name.includes(keyword)) : depts;
+  },
+  searchUserGroups: async (keyword) => {
+    await new Promise((r) => setTimeout(r, 300));
+    const groups = [
+      { id: 'ug1', name: '管理组' },
+      { id: 'ug2', name: '普通组' },
+    ];
+    return keyword ? groups.filter((g) => g.name.includes(keyword)) : groups;
+  },
+  searchDeptGroups: async (keyword) => {
+    await new Promise((r) => setTimeout(r, 300));
+    const groups = [
+      { id: 'dg1', name: '研发中心' },
+      { id: 'dg2', name: '销售中心' },
+    ];
+    return keyword ? groups.filter((g) => g.name.includes(keyword)) : groups;
+  },
+  searchAddress: async (keyword) => {
+    await new Promise((r) => setTimeout(r, 300));
+    const addresses = [
+      { province: '浙江省', city: '杭州市', district: '西湖区' },
+      { province: '北京市', city: '北京市', district: '朝阳区' },
+    ];
+    return keyword
+      ? addresses.filter(
+          (a) =>
+            a.province.includes(keyword) ||
+            a.city.includes(keyword) ||
+            a.district.includes(keyword),
+        )
+      : addresses;
+  },
+  searchLocation: async (keyword) => {
+    await new Promise((r) => setTimeout(r, 300));
+    return [
+      {
+        province: '浙江省',
+        city: '杭州市',
+        district: '西湖区',
+        detail: '文三路 123 号',
+        lnglatXY: [120.15, 30.28] as [number, number],
+      },
+      {
+        province: '北京市',
+        city: '北京市',
+        district: '朝阳区',
+        detail: '望京 SOHO',
+        lnglatXY: [116.48, 39.99] as [number, number],
+      },
+    ].filter((l) => !keyword || l.detail.includes(keyword));
+  },
+  searchDistinctValues: async (_field, keyword) => {
+    await new Promise((r) => setTimeout(r, 300));
+    const values = [
+      { label: '苹果', value: 'apple' },
+      { label: '香蕉', value: 'banana' },
+      { label: '橙子', value: 'orange' },
+      { label: '葡萄', value: 'grape' },
+    ];
+    return keyword ? values.filter((v) => v.label.includes(keyword)) : values;
+  },
+};
+
+const mockFields: IField[] = [
+  {
+    label: '姓名',
+    description: '请输入姓名',
+    widget: { type: 'text', widgetName: 'text', value: '' },
+  },
+  {
+    label: '年龄',
+    description: '请输入年龄',
+    widget: { type: 'number', widgetName: 'number', value: '' },
+  },
+  {
+    label: '出生日期',
+    description: '请选择出生日期',
+    widget: { type: 'datetime', widgetName: 'datetime', value: '' },
+  },
+  {
+    label: '备注',
+    description: '请输入备注',
+    widget: { type: 'textarea', widgetName: 'textarea', value: '' },
+  },
+  {
+    label: '性别',
+    widget: {
+      type: 'radiogroup',
+      widgetName: 'radiogroup',
+      value: '',
+      items: [
+        { label: '男', value: 'male' },
+        { label: '女', value: 'female' },
+      ],
+    },
+  },
+  {
+    label: '所在城市',
+    widget: {
+      type: 'combo',
+      widgetName: 'combo',
+      value: '',
+      items: [
+        { label: '北京', value: 'beijing' },
+        { label: '上海', value: 'shanghai' },
+        { label: '广州', value: 'guangzhou' },
+      ],
+    },
+  },
+  {
+    label: '兴趣爱好',
+    widget: {
+      type: 'checkboxgroup',
+      widgetName: 'checkboxgroup',
+      value: [],
+      items: [
+        { label: '阅读', value: 'reading' },
+        { label: '运动', value: 'sports' },
+        { label: '音乐', value: 'music' },
+      ],
+    },
+  },
+  {
+    label: '附件上传',
+    widget: { type: 'upload', widgetName: 'upload', value: '' },
+  },
+  {
+    label: '负责人',
+    widget: { type: 'user', widgetName: 'user', value: '' },
+  },
+  {
+    label: '所属部门',
+    widget: { type: 'dept', widgetName: 'dept', value: '' },
+  },
+  {
+    label: '密码',
+    widget: { type: 'password', widgetName: 'password', value: '' },
+  },
+  {
+    label: '性别(单选)',
+    widget: {
+      type: 'radio',
+      widgetName: 'radio',
+      value: '',
+      items: [
+        { label: '男', value: 'male' },
+        { label: '女', value: 'female' },
+      ],
+    },
+  },
+  {
+    label: '下拉多选',
+    widget: {
+      type: 'combocheck',
+      widgetName: 'combocheck',
+      value: [],
+      items: [
+        { label: '选项A', value: 'a' },
+        { label: '选项B', value: 'b' },
+        { label: '选项C', value: 'c' },
+      ],
+    },
+  },
+  {
+    label: '地址',
+    widget: { type: 'address', widgetName: 'address', value: {} },
+  },
+  {
+    label: '位置',
+    widget: { type: 'location', widgetName: 'location', value: {} },
+  },
+  {
+    label: '流水号',
+    widget: { type: 'sn', widgetName: 'sn', value: '' },
+  },
+  {
+    label: '用户组',
+    widget: { type: 'usergroup', widgetName: 'usergroup', value: '' },
+  },
+  {
+    label: '部门组',
+    widget: { type: 'deptgroup', widgetName: 'deptgroup', value: '' },
+  },
+  {
+    label: '图片',
+    widget: { type: 'image', widgetName: 'image', value: '' },
+  },
+  {
+    label: '联动数据',
+    widget: { type: 'linkdata', widgetName: 'linkdata', value: '' },
+  },
+  {
+    label: '流程状态',
+    widget: { type: 'flowState', widgetName: 'flowState', value: '' },
+  },
+  {
+    label: '签名',
+    widget: { type: 'signature', widgetName: 'signature', value: '' },
+  },
+];
+
+function makeBSString(cond: ICondition): string {
+  return conditionStringify2bsCondition(cond);
+}
+
+const meta: Meta<typeof BsConditionInput> = {
+  title: 'Agent Helper/BsConditionInput',
+  component: BsConditionInput,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    targetName: '流程结束 或 流程节点',
+    fields: mockFields,
+    disabled: false,
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: '960px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Empty: Story = {
+  args: {
+    targetName: '流程结束 或 流程节点',
+    fields: mockFields,
+  },
+};
+
+export const WithConditions: Story = {
+  args: {
+    targetName: '流程结束 或 流程节点',
+    fields: mockFields,
+    defaultValue: makeBSString({
+      targetName: '流程结束 或 流程节点',
+      quantifier: 'all',
+      items: [
+        {
+          id: 'item-1',
+          field: mockFields[0],
+          operator: 'contains',
+          value: '张三',
+        },
+        {
+          id: 'item-2',
+          field: mockFields[1],
+          operator: 'gte',
+          value: 18,
+        },
+      ],
+    }),
+  },
+};
+
+export const WithDeleteAll: Story = {
+  args: {
+    targetName: '流程结束 或 流程节点',
+    fields: mockFields,
+    defaultValue: makeBSString({
+      targetName: '流程结束 或 流程节点',
+      quantifier: 'any',
+      items: [
+        {
+          id: 'item-1',
+          field: mockFields[0],
+          operator: 'contains',
+          value: '张三',
+        },
+        {
+          id: 'item-2',
+          field: mockFields[1],
+          operator: 'gte',
+          value: 18,
+        },
+        {
+          id: 'item-3',
+          field: mockFields[5],
+          operator: 'in',
+          value: ['beijing', 'shanghai'],
+        },
+        {
+          id: 'item-4',
+          field: mockFields[2],
+          operator: 'range',
+          value: undefined,
+        },
+      ],
+    }),
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [bsString, setBsString] = useState<string>(
+      makeBSString({
+        targetName: '流程结束 或 流程节点',
+        quantifier: 'all',
+        items: [
+          {
+            id: 'item-1',
+            field: mockFields[0],
+            operator: 'contains',
+            value: '张三',
+          },
+          {
+            id: 'item-2',
+            field: mockFields[1],
+            operator: 'gte',
+            value: 18,
+          },
+        ],
+      }),
+    );
+
+    const handleChange = useCallback((newBS: string) => {
+      setBsString(newBS);
+    }, []);
+
+    return (
+      <div className="flex flex-col gap-[16px]">
+        <BsConditionInput
+          targetName="流程结束 或 流程节点"
+          fields={mockFields}
+          value={bsString}
+          onChange={handleChange}
+        />
+        <div className="text-[12px] text-[#666666] bg-[#F5F5F5] rounded-[4px] p-[8px] font-mono">
+          <pre>{bsString}</pre>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const RangeOperators: Story = {
+  args: {
+    targetName: '流程结束',
+    fields: mockFields,
+    service: mockService,
+    defaultValue: makeBSString({
+      targetName: '流程结束',
+      quantifier: 'all',
+      items: [
+        {
+          id: 'range-1',
+          field: mockFields[1],
+          operator: 'range',
+          value: { min: 18, max: 60 },
+        },
+        {
+          id: 'range-2',
+          field: mockFields[2],
+          operator: 'range',
+          value: { min: '2020-01-01T00:00', max: '2025-12-31T23:59' },
+        },
+      ],
+    }),
+  },
+};
+
+export const MixedOperators: Story = {
+  args: {
+    targetName: '表单数据',
+    fields: mockFields,
+    service: mockService,
+    defaultValue: makeBSString({
+      targetName: '表单数据',
+      quantifier: 'all',
+      items: [
+        {
+          id: 'mixed-1',
+          field: mockFields[0],
+          operator: 'contains',
+          value: '张',
+        },
+        {
+          id: 'mixed-2',
+          field: mockFields[1],
+          operator: 'range',
+          value: { min: 0, max: 100 },
+        },
+        {
+          id: 'mixed-3',
+          field: mockFields[2],
+          operator: 'range',
+          value: { min: '2025-01-01T00:00', max: '2025-06-30T23:59' },
+        },
+        {
+          id: 'mixed-4',
+          field: mockFields[0],
+          operator: 'in',
+          value: ['orange', 'grape'],
+        },
+      ],
+    }),
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    targetName: '流程结束 或 流程节点',
+    fields: mockFields,
+    disabled: true,
+    defaultValue: makeBSString({
+      targetName: '流程结束 或 流程节点',
+      quantifier: 'all',
+      items: [
+        {
+          id: 'item-1',
+          field: mockFields[0],
+          operator: 'contains',
+          value: '张三',
+        },
+        {
+          id: 'item-2',
+          field: mockFields[1],
+          operator: 'gte',
+          value: 18,
+        },
+        {
+          id: 'item-3',
+          field: mockFields[5],
+          operator: 'in',
+          value: ['beijing', 'shanghai'],
+        },
+      ],
+    }),
+  },
+};

package/src/stories/ExecLogFilter.stories.tsx

@@ -43,10 +43,8 @@ export const Default: Story = {};
 export const WithInitialValue: Story = {
   args: {
     value: {
-      dateRange: {
-        from: subDays(new Date(), 7),
-        to: new Date(),
-      },
+      startDate: subDays(new Date(), 7),
+      endDate: new Date(),
       triggerType: 'scheduler',
       execResult: 'success',
     },

package/style.css

@@ -1,7 +1,4 @@
 /*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
-@layer properties;
-@layer theme, base, components, utilities;
-@layer theme {
   :root, :host {
     --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
@@ -107,8 +104,6 @@
     --sidebar-border: oklch(0.929 0.013 255.508);
     --sidebar-ring: oklch(0.704 0.04 256.788);
   }
-}
-@layer base {
   *, ::after, ::before, ::backdrop, ::file-selector-button {
     box-sizing: border-box;
     margin: 0;
@@ -255,8 +250,6 @@
   [hidden]:where(:not([hidden="until-found"])) {
     display: none !important;
   }
-}
-@layer utilities {
   .pointer-events-none {
     pointer-events: none;
   }
@@ -3605,7 +3598,6 @@
       white-space: nowrap;
     }
   }
-}
 @property --tw-animation-delay {
   syntax: "*";
   inherits: false;
@@ -3723,7 +3715,6 @@
   --sidebar-border: oklch(1 0 0 / 10%);
   --sidebar-ring: oklch(0.551 0.027 264.364);
 }
-@layer base {
   * {
     border-color: var(--border);
     outline-color: color-mix(in srgb, oklch(0.704 0.04 256.788) 50%, transparent);
@@ -3738,8 +3729,6 @@
   html {
     font-size: 14px;
   }
-}
-@layer components {
   .gradient-border {
     position: relative;
   }
@@ -3756,7 +3745,6 @@
     -webkit-mask-composite: xor;
     mask-composite: exclude;
   }
-}
 .prose {
   --tw-prose-body: #121111;
 }
@@ -4066,7 +4054,6 @@
     transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
   }
 }
-@layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
       --tw-translate-x: 0;
@@ -4142,5 +4129,4 @@
       --tw-exit-translate-y: 0;
     }
   }
-}
 .rdp-root{--rdp-accent-color: blue;--rdp-accent-background-color: #f0f0ff;--rdp-day-height: 44px;--rdp-day-width: 44px;--rdp-day_button-border-radius: 100%;--rdp-day_button-border: 2px solid transparent;--rdp-day_button-height: 42px;--rdp-day_button-width: 42px;--rdp-selected-border: 2px solid var(--rdp-accent-color);--rdp-disabled-opacity: .5;--rdp-outside-opacity: .75;--rdp-today-color: var(--rdp-accent-color);--rdp-dropdown-gap: .5rem;--rdp-months-gap: 2rem;--rdp-nav_button-disabled-opacity: .5;--rdp-nav_button-height: 2.25rem;--rdp-nav_button-width: 2.25rem;--rdp-nav-height: 2.75rem;--rdp-range_middle-background-color: var(--rdp-accent-background-color);--rdp-range_middle-color: inherit;--rdp-range_start-color: white;--rdp-range_start-background: linear-gradient( var(--rdp-gradient-direction), transparent 50%, var(--rdp-range_middle-background-color) 50% );--rdp-range_start-date-background-color: var(--rdp-accent-color);--rdp-range_end-background: linear-gradient( var(--rdp-gradient-direction), var(--rdp-range_middle-background-color) 50%, transparent 50% );--rdp-range_end-color: white;--rdp-range_end-date-background-color: var(--rdp-accent-color);--rdp-week_number-border-radius: 100%;--rdp-week_number-border: 2px solid transparent;--rdp-week_number-height: var(--rdp-day-height);--rdp-week_number-opacity: .75;--rdp-week_number-width: var(--rdp-day-width);--rdp-weeknumber-text-align: center;--rdp-weekday-opacity: .75;--rdp-weekday-padding: .5rem 0rem;--rdp-weekday-text-align: center;--rdp-gradient-direction: 90deg;--rdp-animation_duration: .3s;--rdp-animation_timing: cubic-bezier(.4, 0, .2, 1)}.rdp-root[dir=rtl]{--rdp-gradient-direction: -90deg}.rdp-root[data-broadcast-calendar=true]{--rdp-outside-opacity: unset}.rdp-root{position:relative;box-sizing:border-box}.rdp-root *{box-sizing:border-box}.rdp-day{width:var(--rdp-day-width);height:var(--rdp-day-height);text-align:center}.rdp-day_button{background:none;padding:0;margin:0;cursor:pointer;font:inherit;color:inherit;justify-content:center;align-items:center;display:flex;width:var(--rdp-day_button-width);height:var(--rdp-day_button-height);border:var(--rdp-day_button-border);border-radius:var(--rdp-day_button-border-radius)}.rdp-day_button:disabled{cursor:revert}.rdp-caption_label{z-index:1;position:relative;display:inline-flex;align-items:center;white-space:nowrap;border:0}.rdp-dropdown:focus-visible~.rdp-caption_label{outline:5px auto Highlight;outline:5px auto -webkit-focus-ring-color}.rdp-button_next,.rdp-button_previous{border:none;background:none;padding:0;margin:0;cursor:pointer;font:inherit;color:inherit;-moz-appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;justify-content:center;position:relative;appearance:none;width:var(--rdp-nav_button-width);height:var(--rdp-nav_button-height)}.rdp-button_next:disabled,.rdp-button_next[aria-disabled=true],.rdp-button_previous:disabled,.rdp-button_previous[aria-disabled=true]{cursor:revert;opacity:var(--rdp-nav_button-disabled-opacity)}.rdp-chevron{display:inline-block;fill:var(--rdp-accent-color)}.rdp-root[dir=rtl] .rdp-nav .rdp-chevron{transform:rotate(180deg);transform-origin:50%}.rdp-dropdowns{position:relative;display:inline-flex;align-items:center;gap:var(--rdp-dropdown-gap)}.rdp-dropdown{z-index:2;opacity:0;appearance:none;position:absolute;inset-block-start:0;inset-block-end:0;inset-inline-start:0;width:100%;margin:0;padding:0;cursor:inherit;border:none;line-height:inherit}.rdp-dropdown_root{position:relative;display:inline-flex;align-items:center}.rdp-dropdown_root[data-disabled=true] .rdp-chevron{opacity:var(--rdp-disabled-opacity)}.rdp-month_caption{display:flex;align-content:center;height:var(--rdp-nav-height);font-weight:700;font-size:large}.rdp-root[data-nav-layout=around] .rdp-month,.rdp-root[data-nav-layout=after] .rdp-month{position:relative}.rdp-root[data-nav-layout=around] .rdp-month_caption{justify-content:center;margin-inline-start:var(--rdp-nav_button-width);margin-inline-end:var(--rdp-nav_button-width);position:relative}.rdp-root[data-nav-layout=around] .rdp-button_previous{position:absolute;inset-inline-start:0;top:0;height:var(--rdp-nav-height);display:inline-flex}.rdp-root[data-nav-layout=around] .rdp-button_next{position:absolute;inset-inline-end:0;top:0;height:var(--rdp-nav-height);display:inline-flex;justify-content:center}.rdp-months{position:relative;display:flex;flex-wrap:wrap;gap:var(--rdp-months-gap);max-width:fit-content}.rdp-month_grid{border-collapse:collapse}.rdp-nav{position:absolute;inset-block-start:0;inset-inline-end:0;display:flex;align-items:center;height:var(--rdp-nav-height)}.rdp-weekday{opacity:var(--rdp-weekday-opacity);padding:var(--rdp-weekday-padding);font-weight:500;font-size:smaller;text-align:var(--rdp-weekday-text-align);text-transform:var(--rdp-weekday-text-transform)}.rdp-week_number{opacity:var(--rdp-week_number-opacity);font-weight:400;font-size:small;height:var(--rdp-week_number-height);width:var(--rdp-week_number-width);border:var(--rdp-week_number-border);border-radius:var(--rdp-week_number-border-radius);text-align:var(--rdp-weeknumber-text-align)}.rdp-today:not(.rdp-outside){color:var(--rdp-today-color)}.rdp-selected{font-weight:700;font-size:large}.rdp-selected .rdp-day_button{border:var(--rdp-selected-border)}.rdp-outside{opacity:var(--rdp-outside-opacity)}.rdp-disabled:not(.rdp-selected){opacity:var(--rdp-disabled-opacity)}.rdp-hidden{visibility:hidden;color:var(--rdp-range_start-color)}.rdp-range_start{background:var(--rdp-range_start-background)}.rdp-range_start .rdp-day_button{background-color:var(--rdp-range_start-date-background-color);color:var(--rdp-range_start-color)}.rdp-range_middle{background-color:var(--rdp-range_middle-background-color)}.rdp-range_middle .rdp-day_button{border:unset;border-radius:unset;color:var(--rdp-range_middle-color)}.rdp-range_end{background:var(--rdp-range_end-background);color:var(--rdp-range_end-color)}.rdp-range_end .rdp-day_button{color:var(--rdp-range_start-color);background-color:var(--rdp-range_end-date-background-color)}.rdp-range_start.rdp-range_end{background:revert}.rdp-focusable{cursor:pointer}@keyframes rdp-slide_in_left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes rdp-slide_in_right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes rdp-slide_out_left{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes rdp-slide_out_right{0%{transform:translate(0)}to{transform:translate(100%)}}.rdp-weeks_before_enter{animation:rdp-slide_in_left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards}.rdp-weeks_before_exit{animation:rdp-slide_out_left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards}.rdp-weeks_after_enter{animation:rdp-slide_in_right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards}.rdp-weeks_after_exit{animation:rdp-slide_out_right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards}.rdp-root[dir=rtl] .rdp-weeks_after_enter{animation:rdp-slide_in_left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards}.rdp-root[dir=rtl] .rdp-weeks_before_exit{animation:rdp-slide_out_right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards}.rdp-root[dir=rtl] .rdp-weeks_before_enter{animation:rdp-slide_in_right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards}.rdp-root[dir=rtl] .rdp-weeks_after_exit{animation:rdp-slide_out_left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards}@keyframes rdp-fade_in{0%{opacity:0}to{opacity:1}}@keyframes rdp-fade_out{0%{opacity:1}to{opacity:0}}.rdp-caption_after_enter{animation:rdp-fade_in var(--rdp-animation_duration) var(--rdp-animation_timing) forwards}.rdp-caption_after_exit{animation:rdp-fade_out var(--rdp-animation_duration) var(--rdp-animation_timing) forwards}.rdp-caption_before_enter{animation:rdp-fade_in var(--rdp-animation_duration) var(--rdp-animation_timing) forwards}.rdp-caption_before_exit{animation:rdp-fade_out var(--rdp-animation_duration) var(--rdp-animation_timing) forwards}