@baishuyun/ai-design 2.0.38 → 2.1.0-alpha.0

package/src/components/agent-helper/table/index.tsx

@@ -1,114 +1,114 @@
-import { cn } from '../../../lib/utils';
-import {
-  useReactTable,
-  getCoreRowModel,
-  flexRender,
-  type ColumnDef,
-  type TableOptions,
- createColumnHelper,
-} from '@tanstack/react-table';
-import { EmptyTableIcon } from '../../icons/empty-table-icon';
-
-export {
-  createColumnHelper,
-}
-
-export interface DataTableProps<TData> {
-  columns: ColumnDef<TData, any>[];
-  data: TData[];
-  emptyText?: string;
-  emptyIcon?: React.ReactNode;
-  className?: string;
-  tableOptions?: Omit<
-    Partial<TableOptions<TData>>,
-    'columns' | 'data' | 'getCoreRowModel'
-  >;
-}
-
-export function DataTable<TData>({
-  columns,
-  data,
-  emptyText = '暂无数据',
-  emptyIcon,
-  className,
-  tableOptions,
-}: DataTableProps<TData>) {
-  const table = useReactTable({
-    columns,
-    data,
-    getCoreRowModel: getCoreRowModel(),
-    ...tableOptions,
-  });
-
-  const headerGroups = table.getHeaderGroups();
-  const rows = table.getRowModel().rows;
-  const isEmpty = data.length === 0;
-
-  return (
-    <div
-      className={cn(
-        'rounded-[10px] border border-[#e0e0e0] overflow-hidden bg-white',
-        className,
-      )}
-    >
-      <table className="w-full h-full border-collapse">
-        <thead>
-          {headerGroups.map((headerGroup) => (
-            <tr key={headerGroup.id}>
-              {headerGroup.headers.map((header, index) => (
-                <th
-                  key={header.id}
-                  className={cn(
-                    'bg-[#f5f7fa] h-[34px] px-[10px] text-left text-[14px] font-normal text-[#030303] border-b border-[#e0e0e0] align-middle whitespace-nowrap',
-                    index !== 0 && 'border-l border-[#e0e0e0]',
-                  )}
-                  style={{
-                    width:
-                      header.getSize() !== 150 ? header.getSize() : undefined,
-                  }}
-                >
-                  {flexRender(
-                    header.column.columnDef.header,
-                    header.getContext(),
-                  )}
-                </th>
-              ))}
-            </tr>
-          ))}
-        </thead>
-        <tbody>
-          {isEmpty ? (
-            <tr>
-              <td
-                colSpan={columns.length}
-                className="py-[60px] text-center align-middle"
-              >
-                <div className="flex flex-col items-center gap-[12px]">
-                  {emptyIcon || <EmptyTableIcon />}
-                  <span className="text-[14px] text-[#999]">{emptyText}</span>
-                </div>
-              </td>
-            </tr>
-          ) : (
-            rows.map((row) => (
-              <tr key={row.id}>
-                {row.getVisibleCells().map((cell, index) => (
-                  <td
-                    key={cell.id}
-                    className={cn(
-                      'p-[10px] text-[14px] text-[#030303]',
-                      index !== 0 && 'border-l border-[#e0e0e0]',
-                      'border-b border-[#e0e0e0]',
-                    )}
-                  >
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </td>
-                ))}
-              </tr>
-            ))
-          )}
-        </tbody>
-      </table>
-    </div>
-  );
-}
+import { cn } from '../../../lib/utils';
+import {
+  useReactTable,
+  getCoreRowModel,
+  flexRender,
+  type ColumnDef,
+  type TableOptions,
+ createColumnHelper,
+} from '@tanstack/react-table';
+import { EmptyTableIcon } from '../../icons/empty-table-icon';
+
+export {
+  createColumnHelper,
+}
+
+export interface DataTableProps<TData> {
+  columns: ColumnDef<TData, any>[];
+  data: TData[];
+  emptyText?: string;
+  emptyIcon?: React.ReactNode;
+  className?: string;
+  tableOptions?: Omit<
+    Partial<TableOptions<TData>>,
+    'columns' | 'data' | 'getCoreRowModel'
+  >;
+}
+
+export function DataTable<TData>({
+  columns,
+  data,
+  emptyText = '暂无数据',
+  emptyIcon,
+  className,
+  tableOptions,
+}: DataTableProps<TData>) {
+  const table = useReactTable({
+    columns,
+    data,
+    getCoreRowModel: getCoreRowModel(),
+    ...tableOptions,
+  });
+
+  const headerGroups = table.getHeaderGroups();
+  const rows = table.getRowModel().rows;
+  const isEmpty = data.length === 0;
+
+  return (
+    <div
+      className={cn(
+        'rounded-[10px] border border-[#e0e0e0] overflow-hidden bg-white',
+        className,
+      )}
+    >
+      <table className="w-full h-full border-collapse">
+        <thead>
+          {headerGroups.map((headerGroup) => (
+            <tr key={headerGroup.id}>
+              {headerGroup.headers.map((header, index) => (
+                <th
+                  key={header.id}
+                  className={cn(
+                    'bg-[#f5f7fa] h-[34px] px-[10px] text-left text-[14px] font-normal text-[#030303] border-b border-[#e0e0e0] align-middle whitespace-nowrap',
+                    index !== 0 && 'border-l border-[#e0e0e0]',
+                  )}
+                  style={{
+                    width:
+                      header.getSize() !== 150 ? header.getSize() : undefined,
+                  }}
+                >
+                  {flexRender(
+                    header.column.columnDef.header,
+                    header.getContext(),
+                  )}
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody>
+          {isEmpty ? (
+            <tr>
+              <td
+                colSpan={columns.length}
+                className="py-[60px] text-center align-middle"
+              >
+                <div className="flex flex-col items-center gap-[12px]">
+                  {emptyIcon || <EmptyTableIcon />}
+                  <span className="text-[14px] text-[#999]">{emptyText}</span>
+                </div>
+              </td>
+            </tr>
+          ) : (
+            rows.map((row) => (
+              <tr key={row.id}>
+                {row.getVisibleCells().map((cell, index) => (
+                  <td
+                    key={cell.id}
+                    className={cn(
+                      'p-[10px] text-[14px] text-[#030303]',
+                      index !== 0 && 'border-l border-[#e0e0e0]',
+                      'border-b border-[#e0e0e0]',
+                    )}
+                  >
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </td>
+                ))}
+              </tr>
+            ))
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+}

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

@@ -1,121 +1,121 @@
-import type { triggerType } from '@baishuyun/types';
-import { CommonTypeIcon, GoToFormIcon, FlowNodeTypeIcon, ScheduleTypeIcon, FormFieldIcon, FormTypeIcon } from '../../bs-icons';
-import { IconCard, type IconCardProps } from '../../icon-card';
-
-export type TriggerCardConfig = Pick<
-  IconCardProps,
-  'title' | 'description' | 'icon' | 'iconBgColor' | 'badge'
-> & {
-  triggerType: triggerType;
-  minIcon?: React.ReactNode;
-};
-
-export const TriggerConfigList: Array<TriggerCardConfig> = [
-  {
-    triggerType: 'universal',
-    title: '通用型',
-    description: '开箱即用，无需触发即可直接使用',
-    icon: <CommonTypeIcon fill="#4ACCC1" />,
-    minIcon: <CommonTypeIcon fill="#4ACCC1" size={12} />,
-    iconBgColor: 'rgba(74, 204, 193, 0.1)',
-    badge: '通用',
-  },
-  {
-    triggerType: 'form_field',
-    title: '表单字段触发',
-    description: '表单中数据发生变化时，触发自动化操作',
-    icon: <FormFieldIcon />,
-    minIcon: <FormFieldIcon size={12} />,
-    iconBgColor: 'rgba(77, 96, 159, 0.1)',
-  },
-  {
-    triggerType: 'form_action',
-    title: '表单动作触发',
-    description: '表单中数据发生变化时，触发自动化操作',
-    icon: (
-      <div className="text-[#0265FF]">
-        <GoToFormIcon />
-      </div>
-    ),
-    minIcon: <FormTypeIcon size={12} />,
-    iconBgColor: 'rgba(2, 101, 255, 0.1)',
-  },
-  {
-    triggerType: 'form_flow_node',
-    title: '表单流程节点触发',
-    description: '表单中数据发生变化时，触发自动化操作',
-    icon: (
-      <div className="text-[#FF9921]">
-        <FlowNodeTypeIcon />
-      </div>
-    ),
-    minIcon: <FlowNodeTypeIcon size={12} />,
-    iconBgColor: 'rgba(255, 153, 33, 0.1)',
-  },
-  // {
-  //   triggerType: 'scheduler',
-  //   title: '计划任务触发',
-  //   description: '表单中数据发生变化时，触发自动化操作',
-  //   icon: (
-  //     <div className="text-[#F06648]">
-  //       <ScheduleTypeIcon />
-  //     </div>
-  //   ),
-  //   minIcon: <ScheduleTypeIcon size={12} />,
-  //   iconBgColor: 'rgba(240, 102, 72, 0.1)',
-  // },
-];
-
-export interface ITriggerSelectProps {
-  value?: triggerType;
-  onChange?: (value: triggerType) => void;
-  configList?: TriggerCardConfig[];
-}
-
-export const TriggerTypeIcon = ({
-  triggerType,
-}: {
-  triggerType: triggerType;
-  size?: number;
-}) => {
-  const config = TriggerConfigList.find((c) => c.triggerType === triggerType);
-  if (!config) {
-    return null;
-  }
-
-  const {minIcon, iconBgColor } = config;
-
-  return (
-    <div
-      className={`shrink-0 rounded-full flex items-center justify-center p-[7px]`}
-      style={{ backgroundColor: iconBgColor, width: 18, height: 18 }}
-    >
-      <div className={`flex items-center justify-center`}>
-          {minIcon}
-      </div>
-    </div>
-  )
-}
-
-export const TriggerSelect = ({
-  value,
-  onChange,
-  configList = TriggerConfigList,
-}: ITriggerSelectProps) => {
-  return (
-    <div className="grid grid-cols-3 gap-5">
-      {configList.map((config) => (
-        <IconCard
-          key={config.triggerType}
-          icon={config.icon}
-          iconBgColor={config.iconBgColor}
-          title={config.title}
-          description={config.description}
-          badge={config.badge}
-          selected={value === config.triggerType}
-          onClick={() => onChange?.(config.triggerType)}
-        />
-      ))}
-    </div>
-  );
-};
+import type { triggerType } from '@baishuyun/types';
+import { CommonTypeIcon, GoToFormIcon, FlowNodeTypeIcon, ScheduleTypeIcon, FormFieldIcon, FormTypeIcon } from '../../bs-icons';
+import { IconCard, type IconCardProps } from '../../icon-card';
+
+export type TriggerCardConfig = Pick<
+  IconCardProps,
+  'title' | 'description' | 'icon' | 'iconBgColor' | 'badge'
+> & {
+  triggerType: triggerType;
+  minIcon?: React.ReactNode;
+};
+
+export const TriggerConfigList: Array<TriggerCardConfig> = [
+  {
+    triggerType: 'universal',
+    title: '通用型',
+    description: '开箱即用，无需触发即可直接使用',
+    icon: <CommonTypeIcon fill="#4ACCC1" />,
+    minIcon: <CommonTypeIcon fill="#4ACCC1" size={12} />,
+    iconBgColor: 'rgba(74, 204, 193, 0.1)',
+    badge: '通用',
+  },
+  {
+    triggerType: 'form_field',
+    title: '表单字段触发',
+    description: '表单中数据发生变化时，触发自动化操作',
+    icon: <FormFieldIcon />,
+    minIcon: <FormFieldIcon size={12} />,
+    iconBgColor: 'rgba(77, 96, 159, 0.1)',
+  },
+  {
+    triggerType: 'form_action',
+    title: '表单动作触发',
+    description: '表单中数据发生变化时，触发自动化操作',
+    icon: (
+      <div className="text-[#0265FF]">
+        <GoToFormIcon />
+      </div>
+    ),
+    minIcon: <FormTypeIcon size={12} />,
+    iconBgColor: 'rgba(2, 101, 255, 0.1)',
+  },
+  {
+    triggerType: 'form_flow_node',
+    title: '表单流程节点触发',
+    description: '表单中数据发生变化时，触发自动化操作',
+    icon: (
+      <div className="text-[#FF9921]">
+        <FlowNodeTypeIcon />
+      </div>
+    ),
+    minIcon: <FlowNodeTypeIcon size={12} />,
+    iconBgColor: 'rgba(255, 153, 33, 0.1)',
+  },
+  // {
+  //   triggerType: 'scheduler',
+  //   title: '计划任务触发',
+  //   description: '表单中数据发生变化时，触发自动化操作',
+  //   icon: (
+  //     <div className="text-[#F06648]">
+  //       <ScheduleTypeIcon />
+  //     </div>
+  //   ),
+  //   minIcon: <ScheduleTypeIcon size={12} />,
+  //   iconBgColor: 'rgba(240, 102, 72, 0.1)',
+  // },
+];
+
+export interface ITriggerSelectProps {
+  value?: triggerType;
+  onChange?: (value: triggerType) => void;
+  configList?: TriggerCardConfig[];
+}
+
+export const TriggerTypeIcon = ({
+  triggerType,
+}: {
+  triggerType: triggerType;
+  size?: number;
+}) => {
+  const config = TriggerConfigList.find((c) => c.triggerType === triggerType);
+  if (!config) {
+    return null;
+  }
+
+  const {minIcon, iconBgColor } = config;
+
+  return (
+    <div
+      className={`shrink-0 rounded-full flex items-center justify-center p-[7px]`}
+      style={{ backgroundColor: iconBgColor, width: 18, height: 18 }}
+    >
+      <div className={`flex items-center justify-center`}>
+          {minIcon}
+      </div>
+    </div>
+  )
+}
+
+export const TriggerSelect = ({
+  value,
+  onChange,
+  configList = TriggerConfigList,
+}: ITriggerSelectProps) => {
+  return (
+    <div className="grid grid-cols-3 gap-5">
+      {configList.map((config) => (
+        <IconCard
+          key={config.triggerType}
+          icon={config.icon}
+          iconBgColor={config.iconBgColor}
+          title={config.title}
+          description={config.description}
+          badge={config.badge}
+          selected={value === config.triggerType}
+          onClick={() => onChange?.(config.triggerType)}
+        />
+      ))}
+    </div>
+  );
+};