@baishuyun/ai-design 1.0.3 → 1.0.4

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

@@ -0,0 +1,155 @@
+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 } from '@baishuyun/types';
+
+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 buildTriggerDescription(helper: IAgentHelper): string {
+  switch (helper.triggerType) {
+    case 'form_action': {
+      const actions =
+        helper.formActionTriggerType
+          ?.map((a) => FORM_ACTION_LABELS[a] || a)
+          .join('/') || '';
+      return actions ? `${helper.formId}\n${actions}` : helper.formId;
+    }
+    case 'form_flow_node': {
+      const nodes =
+        helper.flowNodeTriggerType
+          ?.map((n) => FLOW_NODE_ACTION_LABELS[n] || n)
+          .join('/') || '';
+      return nodes ? `${helper.formId}\n${nodes}` : helper.formId;
+    }
+    case 'form_field': {
+      return helper.triggerFieldWidgetName
+        ? `${helper.formId} / ${helper.triggerFieldWidgetName}`
+        : helper.formId;
+    }
+    case 'universal':
+      return '开箱即用，无需触发';
+    case 'scheduler':
+      return '按计划时间触发';
+    default:
+      return '';
+  }
+}
+
+function buildAgentInfo(agentName?: string, agentIcon?: string): IAgentInfo | undefined {
+  if (!agentName && !agentIcon) {
+    return undefined;
+  }
+  return {
+    id: '',
+    name: agentName || '',
+    icon: agentIcon || '',
+  };
+}
+
+export interface AgentHelperCardProps {
+  helper: IAgentHelper;
+  agentName?: string;
+  agentIcon?: string;
+  className?: string;
+  onEnabledChange?: (enabled: boolean) => void;
+  onViewLogs?: () => void;
+  onEdit?: () => void;
+  onCopy?: () => void;
+  onDelete?: () => void;
+}
+
+export const AgentHelperCard = ({
+  helper,
+  agentName,
+  agentIcon,
+  className,
+  onEnabledChange,
+  onViewLogs,
+  onEdit,
+  onCopy,
+  onDelete,
+}: AgentHelperCardProps) => {
+  const description = buildTriggerDescription(helper);
+  const agent = buildAgentInfo(agentName, agentIcon);
+
+  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

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

@@ -0,0 +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;

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

@@ -0,0 +1,29 @@
+import { cn } from '../../../lib/utils';
+import { IAgentInfo } from '@baishuyun/types';
+
+export interface AgentTagProps {
+  agent: IAgentInfo;
+  className?: string;
+}
+
+export const AgentTag = ({ agent, className }: AgentTagProps) => {
+  return (
+    <div
+      className={cn(
+        'bg-[#e5e6eb] content-stretch flex gap-[4px] items-center px-[6px] rounded-[100px] w-fit h-[26px]',
+        className,
+      )}
+    >
+      <div className="relative rounded-[3.5px] shrink-0 size-[14px]">
+        <img
+          alt=""
+          className="absolute inset-0 max-w-none object-cover pointer-events-none rounded-[3.5px] size-full"
+          src={agent.icon}
+        />
+      </div>
+      <p className="leading-[normal] shrink-0 text-[#030303] text-[12px] whitespace-nowrap">
+        {agent.name}
+      </p>
+    </div>
+  );
+};