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

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

@@ -1,179 +1,179 @@
-import { cn } from '../../../lib/utils';
-import { TriggerTypeIcon } from '../trigger-select';
-import { AgentTag } from '../agent-tag';
-import { IconBtn } from '../../icon-btn';
-import { Switch } from '../../ui/switch';
-import { EditIcon, CopyIcon, TrashIcon } from '../../bs-icons';
-import type { IAgentHelper, IAgentInfo, IBsFormService, IEntry } from '@baishuyun/types';
-import { useEffect, useMemo, useState } from 'react';
-
-const FORM_ACTION_LABELS: Record<string, string> = {
-  submit: '提交数据',
-  edit: '编辑数据',
-  delete: '删除数据',
-  init: '表单初始化',
-  edit_init: '表单编辑初始化',
-};
-
-const FLOW_NODE_ACTION_LABELS: Record<string, string> = {
-  flow_end: '流程结束',
-  flow_node: '流程节点',
-};
-
-function useTriggerDescription(helper: IAgentHelper, formService?: IBsFormService): string {
-  const [entryInfo, setEntryInfo] = useState<IEntry | undefined>(undefined);
-
-  const fetchEntryInfo = async (appId: string, entryId: string) => {
-    const entryInfo = await formService?.getEntry({ appId, entryId });
-    setEntryInfo(entryInfo);
-  }
-
-  useEffect(() => {
-    if (!helper.appId || !helper.formId) {
-      return;
-    }
-
-    fetchEntryInfo(helper.appId, helper.formId);
-  }, [helper.appId, helper.formId])
-
-  const formName = entryInfo ? entryInfo.name : helper.formId;
-  const fieldDict = useMemo(() => {
-    const ret: Record<string, string> = {};
-    for (const i of (entryInfo?.content?.items ?? [])) {
-      const key = i.widget?.widgetName ?? "";
-      if (!key) {
-        continue;
-      }
-
-      ret[key] = i.label;
-    }
-    return ret;
-  }, [entryInfo?.content?.items])
-
-  const widgetName = fieldDict[helper.triggerFieldWidgetName ?? ""] ?? helper.triggerFieldWidgetName;
-
-  switch (helper.triggerType) {
-    case 'form_action': {
-      const actions =
-        helper.formActionTriggerType
-          ?.map((a) => FORM_ACTION_LABELS[a] || a)
-          .join('/') || '';
-      return actions ? `${formName}\n${actions}` : formName;
-    }
-    case 'form_flow_node': {
-      const nodes =
-        helper.flowNodeTriggerType
-          ?.map((n) => FLOW_NODE_ACTION_LABELS[n] || n)
-          .join('/') || '';
-      return nodes ? `${formName}\n${nodes}` : formName
-    }
-    case 'form_field': {
-      return helper.triggerFieldWidgetName
-        ? `${formName} / ${widgetName}`
-        : formName;
-    }
-    case 'universal':
-      return '开箱即用，无需触发';
-    case 'scheduler':
-      return '按计划时间触发';
-    default:
-      return '';
-  }
-}
-
-export interface AgentHelperCardProps {
-  helper: IAgentHelper;
-  agentName?: string;
-  agentIcon?: string;
-  getAgent: (agentId: string) => IAgentInfo | undefined;
-  className?: string;
-  onEnabledChange?: (enabled: boolean) => void;
-  onViewLogs?: () => void;
-  onEdit?: () => void;
-  onCopy?: () => void;
-  onDelete?: () => void;
-
-  formService?: IBsFormService;
-}
-
-export const AgentHelperCard = ({
-  helper,
-  className,
-  onEnabledChange,
-  onViewLogs,
-  onEdit,
-  getAgent,
-  onCopy,
-  onDelete,
-  formService,
-}: AgentHelperCardProps) => {
-  const description = useTriggerDescription(helper, formService);
-  const agent = getAgent(helper.agentId);
-
-  return (
-    <div
-      className={cn(
-        'bg-white border border-[#e0e0e0] border-solid content-stretch flex flex-col items-start rounded-[10px] w-full group min-w-[335px]',
-        className,
-      )}
-    >
-      {/* Header */}
-      <div className="grid-rows-[max-content] inline-grid leading-[0] place-items-start shrink-0 w-full">
-        <div className="col-1 content-stretch flex h-[42px] items-center justify-between ml-0 mt-0 px-[12px] row-1 w-full">
-          <div className="content-stretch flex gap-[6px] items-center shrink-0 min-w-0">
-            <TriggerTypeIcon triggerType={helper.triggerType} size={18} />
-            <p className="leading-[normal] shrink-0 text-[#030303] text-[14px] truncate">
-              {helper.helperName}
-            </p>
-          </div>
-          <div className="content-stretch flex gap-[10px] items-center opacity-0 group-hover:opacity-100 transition-opacity shrink-0">
-            {onEdit && (
-              <IconBtn icon={<EditIcon />} rounded onClick={onEdit} />
-            )}
-            {onCopy && (
-              <IconBtn icon={<CopyIcon />} rounded onClick={onCopy} />
-            )}
-            {onDelete && (
-              <IconBtn icon={<TrashIcon />} rounded onClick={onDelete} />
-            )}
-          </div>
-        </div>
-        <div className="col-1 h-0 ml-0 mt-[42px] row-1 w-full border-b border-[#e0e0e0]" />
-      </div>
-
-      {/* Content */}
-      <div className="content-stretch flex flex-col h-[172px] items-start justify-between p-[12px] shrink-0 w-full">
-        <div className="content-stretch flex flex-col gap-[6px] items-start shrink-0 text-[14px] w-full">
-          <p className="min-w-full shrink-0 text-[#666] w-[min-content]">
-            触发：
-          </p>
-          {description.split('\n').map((line, i) => (
-            <p
-              key={i}
-              className="shrink-0 text-[#030303] whitespace-nowrap overflow-hidden text-ellipsis max-w-full"
-            >
-              {line}
-            </p>
-          ))}
-        </div>
-        {agent && <AgentTag agent={agent} />}
-      </div>
-
-      {/* Footer */}
-      <div className="grid-rows-[max-content] inline-grid leading-[0] place-items-start shrink-0 w-full">
-        <div className="col-1 h-0 ml-0 mt-0 row-1 w-full border-t border-[#e0e0e0]" />
-        <div className="col-1 content-stretch flex h-[42px] items-center justify-between ml-0 mt-0 px-[12px] row-1 w-full">
-          <Switch checked={helper.enabled} onCheckedChange={onEnabledChange} />
-          {onViewLogs && (
-            <button
-              className="leading-[normal] shrink-0 text-[#0265ff] text-[12px] whitespace-nowrap hover:underline"
-              onClick={onViewLogs}
-            >
-              查看执行日志
-            </button>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
+import { cn } from '../../../lib/utils';
+import { TriggerTypeIcon } from '../trigger-select';
+import { AgentTag } from '../agent-tag';
+import { IconBtn } from '../../icon-btn';
+import { Switch } from '../../ui/switch';
+import { EditIcon, CopyIcon, TrashIcon } from '../../bs-icons';
+import type { IAgentHelper, IAgentInfo, IBsFormService, IEntry } from '@baishuyun/types';
+import { useEffect, useMemo, useState } from 'react';
+
+const FORM_ACTION_LABELS: Record<string, string> = {
+  submit: '提交数据',
+  edit: '编辑数据',
+  delete: '删除数据',
+  init: '表单初始化',
+  edit_init: '表单编辑初始化',
+};
+
+const FLOW_NODE_ACTION_LABELS: Record<string, string> = {
+  flow_end: '流程结束',
+  flow_node: '流程节点',
+};
+
+function useTriggerDescription(helper: IAgentHelper, formService?: IBsFormService): string {
+  const [entryInfo, setEntryInfo] = useState<IEntry | undefined>(undefined);
+
+  const fetchEntryInfo = async (appId: string, entryId: string) => {
+    const entryInfo = await formService?.getEntry({ appId, entryId });
+    setEntryInfo(entryInfo);
+  }
+
+  useEffect(() => {
+    if (!helper.appId || !helper.formId) {
+      return;
+    }
+
+    fetchEntryInfo(helper.appId, helper.formId);
+  }, [helper.appId, helper.formId])
+
+  const formName = entryInfo ? entryInfo.name : helper.formId;
+  const fieldDict = useMemo(() => {
+    const ret: Record<string, string> = {};
+    for (const i of (entryInfo?.content?.items ?? [])) {
+      const key = i.widget?.widgetName ?? "";
+      if (!key) {
+        continue;
+      }
+
+      ret[key] = i.label;
+    }
+    return ret;
+  }, [entryInfo?.content?.items])
+
+  const widgetName = fieldDict[helper.triggerFieldWidgetName ?? ""] ?? helper.triggerFieldWidgetName;
+
+  switch (helper.triggerType) {
+    case 'form_action': {
+      const actions =
+        helper.formActionTriggerType
+          ?.map((a) => FORM_ACTION_LABELS[a] || a)
+          .join('/') || '';
+      return actions ? `${formName}\n${actions}` : formName;
+    }
+    case 'form_flow_node': {
+      const nodes =
+        helper.flowNodeTriggerType
+          ?.map((n) => FLOW_NODE_ACTION_LABELS[n] || n)
+          .join('/') || '';
+      return nodes ? `${formName}\n${nodes}` : formName
+    }
+    case 'form_field': {
+      return helper.triggerFieldWidgetName
+        ? `${formName} / ${widgetName}`
+        : formName;
+    }
+    case 'universal':
+      return '开箱即用，无需触发';
+    case 'scheduler':
+      return '按计划时间触发';
+    default:
+      return '';
+  }
+}
+
+export interface AgentHelperCardProps {
+  helper: IAgentHelper;
+  agentName?: string;
+  agentIcon?: string;
+  getAgent: (agentId: string) => IAgentInfo | undefined;
+  className?: string;
+  onEnabledChange?: (enabled: boolean) => void;
+  onViewLogs?: () => void;
+  onEdit?: () => void;
+  onCopy?: () => void;
+  onDelete?: () => void;
+
+  formService?: IBsFormService;
+}
+
+export const AgentHelperCard = ({
+  helper,
+  className,
+  onEnabledChange,
+  onViewLogs,
+  onEdit,
+  getAgent,
+  onCopy,
+  onDelete,
+  formService,
+}: AgentHelperCardProps) => {
+  const description = useTriggerDescription(helper, formService);
+  const agent = getAgent(helper.agentId);
+
+  return (
+    <div
+      className={cn(
+        'bg-white border border-[#e0e0e0] border-solid content-stretch flex flex-col items-start rounded-[10px] w-full group min-w-[335px]',
+        className,
+      )}
+    >
+      {/* Header */}
+      <div className="grid-rows-[max-content] inline-grid leading-[0] place-items-start shrink-0 w-full">
+        <div className="col-1 content-stretch flex h-[42px] items-center justify-between ml-0 mt-0 px-[12px] row-1 w-full">
+          <div className="content-stretch flex gap-[6px] items-center shrink-0 min-w-0">
+            <TriggerTypeIcon triggerType={helper.triggerType} size={18} />
+            <p className="leading-[normal] shrink-0 text-[#030303] text-[14px] truncate">
+              {helper.helperName}
+            </p>
+          </div>
+          <div className="content-stretch flex gap-[10px] items-center opacity-0 group-hover:opacity-100 transition-opacity shrink-0">
+            {onEdit && (
+              <IconBtn icon={<EditIcon />} rounded onClick={onEdit} />
+            )}
+            {onCopy && (
+              <IconBtn icon={<CopyIcon />} rounded onClick={onCopy} />
+            )}
+            {onDelete && (
+              <IconBtn icon={<TrashIcon />} rounded onClick={onDelete} />
+            )}
+          </div>
+        </div>
+        <div className="col-1 h-0 ml-0 mt-[42px] row-1 w-full border-b border-[#e0e0e0]" />
+      </div>
+
+      {/* Content */}
+      <div className="content-stretch flex flex-col h-[172px] items-start justify-between p-[12px] shrink-0 w-full">
+        <div className="content-stretch flex flex-col gap-[6px] items-start shrink-0 text-[14px] w-full">
+          <p className="min-w-full shrink-0 text-[#666] w-[min-content]">
+            触发：
+          </p>
+          {description.split('\n').map((line, i) => (
+            <p
+              key={i}
+              className="shrink-0 text-[#030303] whitespace-nowrap overflow-hidden text-ellipsis max-w-full"
+            >
+              {line}
+            </p>
+          ))}
+        </div>
+        {agent && <AgentTag agent={agent} />}
+      </div>
+
+      {/* Footer */}
+      <div className="grid-rows-[max-content] inline-grid leading-[0] place-items-start shrink-0 w-full">
+        <div className="col-1 h-0 ml-0 mt-0 row-1 w-full border-t border-[#e0e0e0]" />
+        <div className="col-1 content-stretch flex h-[42px] items-center justify-between ml-0 mt-0 px-[12px] row-1 w-full">
+          <Switch checked={helper.enabled} onCheckedChange={onEnabledChange} />
+          {onViewLogs && (
+            <button
+              className="leading-[normal] shrink-0 text-[#0265ff] text-[12px] whitespace-nowrap hover:underline"
+              onClick={onViewLogs}
+            >
+              查看执行日志
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/agent-helper/agent-helper-card-list/index.tsx

@@ -1,59 +1,59 @@
-import { cn } from '../../../lib/utils';
-import { AgentHelperCard } from '../agent-helper-card';
-import type { IAgentHelper, IAgentInfo, IBsFormService } from '@baishuyun/types';
-
-export interface AgentHelperCardListProps {
-  items: Array<IAgentHelper>;
-  className?: string;
-  getAgentName?: (agentId: string) => string | undefined;
-  getAgentIcon?: (agentId: string) => string | undefined;
-  getAgent: (agentId: string) => (IAgentInfo | undefined);
-  onEnabledChange?: (helperId: string, enabled: boolean) => void;
-  onViewLogs?: (helperId: string) => void;
-  onEdit?: (helperId: string) => void;
-  onCopy?: (helperId: string) => void;
-  onDelete?: (helperId: string) => void;
-  formService?: IBsFormService;
-}
-
-export const AgentHelperCardList = ({
-  items,
-  className,
-  getAgent,
-  onEnabledChange,
-  onViewLogs,
-  onEdit,
-  onCopy,
-  onDelete,
-  formService,
-}: AgentHelperCardListProps) => {
-  return (
-    <div
-      className={cn(
-        'content-start flex flex-wrap gap-[20px] items-start',
-        className,
-      )}
-    >
-      {items.map((helper) => (
-        <AgentHelperCard
-          formService={formService}
-          key={helper.id}
-          helper={helper}
-          getAgent={getAgent}
-          className="w-[335px] shrink-0"
-          onEnabledChange={
-            onEnabledChange
-              ? (enabled) => onEnabledChange(helper.id, enabled)
-              : undefined
-          }
-          onViewLogs={
-            onViewLogs ? () => onViewLogs(helper.id) : undefined
-          }
-          onEdit={onEdit ? () => onEdit(helper.id) : undefined}
-          onCopy={onCopy ? () => onCopy(helper.id) : undefined}
-          onDelete={onDelete ? () => onDelete(helper.id) : undefined}
-        />
-      ))}
-    </div>
-  );
-};
+import { cn } from '../../../lib/utils';
+import { AgentHelperCard } from '../agent-helper-card';
+import type { IAgentHelper, IAgentInfo, IBsFormService } from '@baishuyun/types';
+
+export interface AgentHelperCardListProps {
+  items: Array<IAgentHelper>;
+  className?: string;
+  getAgentName?: (agentId: string) => string | undefined;
+  getAgentIcon?: (agentId: string) => string | undefined;
+  getAgent: (agentId: string) => (IAgentInfo | undefined);
+  onEnabledChange?: (helperId: string, enabled: boolean) => void;
+  onViewLogs?: (helperId: string) => void;
+  onEdit?: (helperId: string) => void;
+  onCopy?: (helperId: string) => void;
+  onDelete?: (helperId: string) => void;
+  formService?: IBsFormService;
+}
+
+export const AgentHelperCardList = ({
+  items,
+  className,
+  getAgent,
+  onEnabledChange,
+  onViewLogs,
+  onEdit,
+  onCopy,
+  onDelete,
+  formService,
+}: AgentHelperCardListProps) => {
+  return (
+    <div
+      className={cn(
+        'content-start flex flex-wrap gap-[20px] items-start',
+        className,
+      )}
+    >
+      {items.map((helper) => (
+        <AgentHelperCard
+          formService={formService}
+          key={helper.id}
+          helper={helper}
+          getAgent={getAgent}
+          className="w-[335px] shrink-0"
+          onEnabledChange={
+            onEnabledChange
+              ? (enabled) => onEnabledChange(helper.id, enabled)
+              : undefined
+          }
+          onViewLogs={
+            onViewLogs ? () => onViewLogs(helper.id) : undefined
+          }
+          onEdit={onEdit ? () => onEdit(helper.id) : undefined}
+          onCopy={onCopy ? () => onCopy(helper.id) : undefined}
+          onDelete={onDelete ? () => onDelete(helper.id) : undefined}
+        />
+      ))}
+    </div>
+  );
+};

package/src/components/agent-helper/agent-helper-main-layout/index.tsx

@@ -1,60 +1,60 @@
-import React from 'react';
-import { cn } from '../../../lib/utils';
-
-export interface IAgentHelperMainLayoutProps {
-  className?: string;
-  children?: React.ReactNode;
-}
-
-export const AgentHelperMainLayout = ({ className, children }: IAgentHelperMainLayoutProps) => {
-  return (
-    <div className={cn('flex flex-col h-full w-full', className)}>
-      {children}
-    </div>
-  );
-};
-
-interface ISlotProps {
-  className?: string;
-  children?: React.ReactNode;
-}
-
-const TopBar = ({ className, children }: ISlotProps) => {
-  return (
-    <div className={cn('h-[52px] shrink-0 bg-white border-b border-[#E0E0E0] flex items-center', className)}>
-      {children}
-    </div>
-  );
-};
-TopBar.displayName = 'AgentHelperMainLayout.TopBar';
-AgentHelperMainLayout.TopBar = TopBar;
-
-const Main = ({ className, children }: ISlotProps) => {
-  return (
-    <div className={cn('flex flex-1 min-h-0', className)}>
-      {children}
-    </div>
-  );
-};
-Main.displayName = 'AgentHelperMainLayout.Main';
-AgentHelperMainLayout.Main = Main;
-
-const SideBar = ({ className, children }: ISlotProps) => {
-  return (
-    <div className={cn('w-[280px] shrink-0 bg-white border-r border-[#E0E0E0] flex flex-col', className)}>
-      {children}
-    </div>
-  );
-};
-SideBar.displayName = 'AgentHelperMainLayout.SideBar';
-AgentHelperMainLayout.SideBar = SideBar;
-
-const Content = ({ className, children }: ISlotProps) => {
-  return (
-    <div className={cn('flex-1 min-w-0 bg-[#F5F7FA] overflow-auto', className)}>
-      {children}
-    </div>
-  );
-};
-Content.displayName = 'AgentHelperMainLayout.Content';
-AgentHelperMainLayout.Content = Content;
+import React from 'react';
+import { cn } from '../../../lib/utils';
+
+export interface IAgentHelperMainLayoutProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const AgentHelperMainLayout = ({ className, children }: IAgentHelperMainLayoutProps) => {
+  return (
+    <div className={cn('flex flex-col h-full w-full', className)}>
+      {children}
+    </div>
+  );
+};
+
+interface ISlotProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+const TopBar = ({ className, children }: ISlotProps) => {
+  return (
+    <div className={cn('h-[52px] shrink-0 bg-white border-b border-[#E0E0E0] flex items-center', className)}>
+      {children}
+    </div>
+  );
+};
+TopBar.displayName = 'AgentHelperMainLayout.TopBar';
+AgentHelperMainLayout.TopBar = TopBar;
+
+const Main = ({ className, children }: ISlotProps) => {
+  return (
+    <div className={cn('flex flex-1 min-h-0', className)}>
+      {children}
+    </div>
+  );
+};
+Main.displayName = 'AgentHelperMainLayout.Main';
+AgentHelperMainLayout.Main = Main;
+
+const SideBar = ({ className, children }: ISlotProps) => {
+  return (
+    <div className={cn('w-[280px] shrink-0 bg-white border-r border-[#E0E0E0] flex flex-col', className)}>
+      {children}
+    </div>
+  );
+};
+SideBar.displayName = 'AgentHelperMainLayout.SideBar';
+AgentHelperMainLayout.SideBar = SideBar;
+
+const Content = ({ className, children }: ISlotProps) => {
+  return (
+    <div className={cn('flex-1 min-w-0 bg-[#F5F7FA] overflow-auto', className)}>
+      {children}
+    </div>
+  );
+};
+Content.displayName = 'AgentHelperMainLayout.Content';
+AgentHelperMainLayout.Content = Content;