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

package/src/components/agent-helper/exec-log-filter/index.tsx

@@ -1,232 +1,232 @@
-import { useState, useCallback } from 'react';
-import type { triggerType } from '@baishuyun/types';
-import { cn } from '../../../lib/utils';
-import { DateInput } from '../date-picker';
-import {
-  Select,
-  SelectTrigger,
-  SelectValue,
-  SelectContent,
-  SelectItem,
-} from '../../ui/select';
-
-import { usePortalContainer } from '../../../hooks/use-portal-container';
-
-const TRIGGER_TYPE_OPTIONS: Array<{ value: triggerType; label: string }> = [
-  { value: 'universal', label: '通用型' },
-  { value: 'form_field', label: '表单字段触发' },
-  { value: 'form_action', label: '表单动作触发' },
-  { value: 'form_flow_node', label: '表单流程节点触发' },
-  { value: 'scheduler', label: '计划任务触发' },
-];
-
-export interface ExecLogFilterValue {
-  startDate?: Date;
-  endDate?: Date;
-  execUserId?: string;
-  triggerType?: triggerType;
-  execResult?: string;
-}
-
-export interface ExecLogFilterProps {
-  value?: ExecLogFilterValue;
-  onChange?: (value: ExecLogFilterValue) => void;
-  onFilter?: (value: ExecLogFilterValue) => void;
-  execUserOptions?: Array<{ value: string; label: string }>;
-  execResultOptions?: Array<{ value: string; label: string }>;
-  className?: string;
-}
-
-export function ExecLogFilter({
-  value,
-  onChange,
-  onFilter,
-  execUserOptions = [],
-  execResultOptions = [],
-  className,
-}: ExecLogFilterProps) {
-  const [startDate, setStartDate] = useState<Date | undefined>(
-    value?.startDate
-  );
-  const [endDate, setEndDate] = useState<Date | undefined>(
-    value?.endDate
-  );
-  const [execUserId, setExecUserId] = useState<string>(
-    value?.execUserId ?? 'all'
-  );
-  const [triggerType, setTriggerType] = useState<triggerType | 'all'>(
-    value?.triggerType ?? 'all'
-  );
-  const [execResult, setExecResult] = useState<string>(
-    value?.execResult ?? 'all'
-  );
-
-  const handleStartDateChange = useCallback(
-    (date: Date | null) => {
-      const d = date ?? undefined;
-      setStartDate(d);
-      onChange?.({ startDate: d, endDate, execUserId, triggerType: triggerType === 'all' ? undefined : triggerType, execResult: execResult === 'all' ? undefined : execResult });
-    },
-    [onChange, execUserId, triggerType, execResult, endDate]
-  );
-
-  const handleEndDateChange = useCallback(
-    (date: Date | null) => {
-      const d = date ?? undefined;
-      setEndDate(d);
-      onChange?.({ startDate, endDate: d, execUserId, triggerType: triggerType === 'all' ? undefined : triggerType, execResult: execResult === 'all' ? undefined : execResult });
-    },
-    [onChange, execUserId, triggerType, execResult, startDate]
-  );
-
-  const handleExecUserIdChange = useCallback(
-    (v: string) => {
-      setExecUserId(v);
-      onChange?.({ startDate, endDate, execUserId: v, triggerType: triggerType === 'all' ? undefined : triggerType, execResult: execResult === 'all' ? undefined : execResult });
-    },
-    [onChange, startDate, endDate, triggerType, execResult]
-  );
-
-  const handleTriggerTypeChange = useCallback(
-    (v: triggerType | 'all') => {
-      setTriggerType(v);
-      onChange?.({ startDate, endDate, execUserId, triggerType: v === 'all' ? undefined : v, execResult: execResult === 'all' ? undefined : execResult });
-    },
-    [onChange, startDate, endDate, execUserId, execResult]
-  );
-
-  const handleExecResultChange = useCallback(
-    (v: string) => {
-      setExecResult(v);
-      onChange?.({ startDate, endDate, execUserId, triggerType: triggerType === 'all' ? undefined : triggerType, execResult: v === 'all' ? undefined : v });
-    },
-    [onChange, startDate, endDate, execUserId, triggerType]
-  );
-
-  const handleFilter = useCallback(() => {
-    onFilter?.({
-      startDate,
-      endDate,
-      execUserId: execUserId === 'all' ? undefined : execUserId,
-      triggerType: triggerType === 'all' ? undefined : triggerType,
-      execResult: execResult === 'all' ? undefined : execResult,
-    });
-  }, [onFilter, startDate, endDate, execUserId, triggerType, execResult]);
-
-  const allExecUserOptions = [
-    { value: 'all', label: '全部' },
-    ...execUserOptions,
-  ];
-
-  const allExecResultOptions = [
-    { value: 'all', label: '全部' },
-    ...execResultOptions,
-  ];
-
-  const allTriggerTypeOptions = [
-    { value: 'all' as const, label: '全部' },
-    ...TRIGGER_TYPE_OPTIONS,
-  ];
-
-
-  const { portalContainer, setTriggerRef } = usePortalContainer('data-bs-exec-user-select-portal');
-  const { portalContainer: triggerTypePortalContainer, setTriggerRef: setTriggerTypeTriggerRef } = usePortalContainer('data-bs-trigger-type-select-portal');
-  const { portalContainer: execResultPortalContainer, setTriggerRef: setExecResultTriggerRef } = usePortalContainer('data-bs-exec-result-select-portal');
-
-  return (
-    <div
-      className={cn(
-        'flex items-start gap-[22px]',
-        className
-      )}
-    >
-      {/* 执行时间 */}
-      <div className="shrink-0 flex items-center gap-[10px] w-[426px]">
-        <span className="shrink-0 text-[14px] text-[#030303] leading-[normal] whitespace-nowrap">
-          执行时间
-        </span>
-        <DateInput
-          value={startDate}
-          onChange={handleStartDateChange}
-          placeholder="开始日期"
-          className="flex-1 min-w-0"
-          format='yyyy-MM-dd HH:mm:ss'
-        />
-        <span className="shrink-0 text-[14px] text-[#030303] leading-[normal]">~</span>
-        <DateInput
-          value={endDate}
-          onChange={handleEndDateChange}
-          placeholder="结束日期"
-          className="flex-1 min-w-0"
-          format='yyyy-MM-dd HH:mm:ss'
-        />
-      </div>
-
-      {/* 执行人 */}
-      <div className="flex-1 min-w-[120px] flex items-center gap-[10px]">
-        <span className="shrink-0 text-[14px] text-[#030303] leading-[normal] whitespace-nowrap">
-          执行人
-        </span>
-        <Select value={execUserId} onValueChange={handleExecUserIdChange}>
-          <SelectTrigger className="flex-1 min-w-0">
-            <SelectValue placeholder="请输入" ref={setTriggerRef} />
-          </SelectTrigger>
-          <SelectContent container={portalContainer}>
-            {allExecUserOptions.map((opt) => (
-              <SelectItem key={opt.value} value={opt.value}>
-                {opt.label}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </div>
-
-      {/* 触发类型 */}
-      <div className="flex-1 min-w-[120px] flex items-center gap-[10px]">
-        <span className="shrink-0 text-[14px] text-[#030303] leading-[normal] whitespace-nowrap">
-          触发类型
-        </span>
-        <Select value={triggerType} onValueChange={handleTriggerTypeChange}>
-          <SelectTrigger className="flex-1 min-w-0">
-            <SelectValue placeholder="全部" ref={setTriggerTypeTriggerRef} />
-          </SelectTrigger>
-          <SelectContent container={triggerTypePortalContainer}>
-            {allTriggerTypeOptions.map((opt) => (
-              <SelectItem key={opt.value} value={opt.value}>
-                {opt.label}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </div>
-
-      {/* 执行结果 */}
-      <div className="shrink-0 flex items-center gap-[10px] w-[280px]">
-        <span className="shrink-0 text-[14px] text-[#030303] leading-[normal] whitespace-nowrap">
-          执行结果
-        </span>
-        <Select value={execResult} onValueChange={handleExecResultChange}>
-          <SelectTrigger className="flex-1 min-w-0">
-            <SelectValue placeholder="请输入" ref={setExecResultTriggerRef} />
-          </SelectTrigger>
-          <SelectContent container={execResultPortalContainer}>
-            {allExecResultOptions.map((opt) => (
-              <SelectItem key={opt.value} value={opt.value}>
-                {opt.label}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </div>
-
-      {/* 筛选按钮 */}
-      <button
-        type="button"
-        className="shrink-0 flex items-center justify-center h-[34px] px-[20px] py-[7px] rounded-[4px] bg-[#0265FF] text-[14px] text-white leading-[normal] whitespace-nowrap hover:bg-[#0252CC] cursor-pointer transition-colors duration-200"
-        onClick={handleFilter}
-      >
-        筛选
-      </button>
-    </div>
-  );
-}
+import { useState, useCallback } from 'react';
+import type { triggerType } from '@baishuyun/types';
+import { cn } from '../../../lib/utils';
+import { DateInput } from '../date-picker';
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+} from '../../ui/select';
+
+import { usePortalContainer } from '../../../hooks/use-portal-container';
+
+const TRIGGER_TYPE_OPTIONS: Array<{ value: triggerType; label: string }> = [
+  { value: 'universal', label: '通用型' },
+  { value: 'form_field', label: '表单字段触发' },
+  { value: 'form_action', label: '表单动作触发' },
+  { value: 'form_flow_node', label: '表单流程节点触发' },
+  { value: 'scheduler', label: '计划任务触发' },
+];
+
+export interface ExecLogFilterValue {
+  startDate?: Date;
+  endDate?: Date;
+  execUserId?: string;
+  triggerType?: triggerType;
+  execResult?: string;
+}
+
+export interface ExecLogFilterProps {
+  value?: ExecLogFilterValue;
+  onChange?: (value: ExecLogFilterValue) => void;
+  onFilter?: (value: ExecLogFilterValue) => void;
+  execUserOptions?: Array<{ value: string; label: string }>;
+  execResultOptions?: Array<{ value: string; label: string }>;
+  className?: string;
+}
+
+export function ExecLogFilter({
+  value,
+  onChange,
+  onFilter,
+  execUserOptions = [],
+  execResultOptions = [],
+  className,
+}: ExecLogFilterProps) {
+  const [startDate, setStartDate] = useState<Date | undefined>(
+    value?.startDate
+  );
+  const [endDate, setEndDate] = useState<Date | undefined>(
+    value?.endDate
+  );
+  const [execUserId, setExecUserId] = useState<string>(
+    value?.execUserId ?? 'all'
+  );
+  const [triggerType, setTriggerType] = useState<triggerType | 'all'>(
+    value?.triggerType ?? 'all'
+  );
+  const [execResult, setExecResult] = useState<string>(
+    value?.execResult ?? 'all'
+  );
+
+  const handleStartDateChange = useCallback(
+    (date: Date | null) => {
+      const d = date ?? undefined;
+      setStartDate(d);
+      onChange?.({ startDate: d, endDate, execUserId, triggerType: triggerType === 'all' ? undefined : triggerType, execResult: execResult === 'all' ? undefined : execResult });
+    },
+    [onChange, execUserId, triggerType, execResult, endDate]
+  );
+
+  const handleEndDateChange = useCallback(
+    (date: Date | null) => {
+      const d = date ?? undefined;
+      setEndDate(d);
+      onChange?.({ startDate, endDate: d, execUserId, triggerType: triggerType === 'all' ? undefined : triggerType, execResult: execResult === 'all' ? undefined : execResult });
+    },
+    [onChange, execUserId, triggerType, execResult, startDate]
+  );
+
+  const handleExecUserIdChange = useCallback(
+    (v: string) => {
+      setExecUserId(v);
+      onChange?.({ startDate, endDate, execUserId: v, triggerType: triggerType === 'all' ? undefined : triggerType, execResult: execResult === 'all' ? undefined : execResult });
+    },
+    [onChange, startDate, endDate, triggerType, execResult]
+  );
+
+  const handleTriggerTypeChange = useCallback(
+    (v: triggerType | 'all') => {
+      setTriggerType(v);
+      onChange?.({ startDate, endDate, execUserId, triggerType: v === 'all' ? undefined : v, execResult: execResult === 'all' ? undefined : execResult });
+    },
+    [onChange, startDate, endDate, execUserId, execResult]
+  );
+
+  const handleExecResultChange = useCallback(
+    (v: string) => {
+      setExecResult(v);
+      onChange?.({ startDate, endDate, execUserId, triggerType: triggerType === 'all' ? undefined : triggerType, execResult: v === 'all' ? undefined : v });
+    },
+    [onChange, startDate, endDate, execUserId, triggerType]
+  );
+
+  const handleFilter = useCallback(() => {
+    onFilter?.({
+      startDate,
+      endDate,
+      execUserId: execUserId === 'all' ? undefined : execUserId,
+      triggerType: triggerType === 'all' ? undefined : triggerType,
+      execResult: execResult === 'all' ? undefined : execResult,
+    });
+  }, [onFilter, startDate, endDate, execUserId, triggerType, execResult]);
+
+  const allExecUserOptions = [
+    { value: 'all', label: '全部' },
+    ...execUserOptions,
+  ];
+
+  const allExecResultOptions = [
+    { value: 'all', label: '全部' },
+    ...execResultOptions,
+  ];
+
+  const allTriggerTypeOptions = [
+    { value: 'all' as const, label: '全部' },
+    ...TRIGGER_TYPE_OPTIONS,
+  ];
+
+
+  const { portalContainer, setTriggerRef } = usePortalContainer('data-bs-exec-user-select-portal');
+  const { portalContainer: triggerTypePortalContainer, setTriggerRef: setTriggerTypeTriggerRef } = usePortalContainer('data-bs-trigger-type-select-portal');
+  const { portalContainer: execResultPortalContainer, setTriggerRef: setExecResultTriggerRef } = usePortalContainer('data-bs-exec-result-select-portal');
+
+  return (
+    <div
+      className={cn(
+        'flex items-start gap-[22px]',
+        className
+      )}
+    >
+      {/* 执行时间 */}
+      <div className="shrink-0 flex items-center gap-[10px] w-[426px]">
+        <span className="shrink-0 text-[14px] text-[#030303] leading-[normal] whitespace-nowrap">
+          执行时间
+        </span>
+        <DateInput
+          value={startDate}
+          onChange={handleStartDateChange}
+          placeholder="开始日期"
+          className="flex-1 min-w-0"
+          format='yyyy-MM-dd HH:mm:ss'
+        />
+        <span className="shrink-0 text-[14px] text-[#030303] leading-[normal]">~</span>
+        <DateInput
+          value={endDate}
+          onChange={handleEndDateChange}
+          placeholder="结束日期"
+          className="flex-1 min-w-0"
+          format='yyyy-MM-dd HH:mm:ss'
+        />
+      </div>
+
+      {/* 执行人 */}
+      <div className="flex-1 min-w-[120px] flex items-center gap-[10px]">
+        <span className="shrink-0 text-[14px] text-[#030303] leading-[normal] whitespace-nowrap">
+          执行人
+        </span>
+        <Select value={execUserId} onValueChange={handleExecUserIdChange}>
+          <SelectTrigger className="flex-1 min-w-0">
+            <SelectValue placeholder="请输入" ref={setTriggerRef} />
+          </SelectTrigger>
+          <SelectContent container={portalContainer}>
+            {allExecUserOptions.map((opt) => (
+              <SelectItem key={opt.value} value={opt.value}>
+                {opt.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* 触发类型 */}
+      <div className="flex-1 min-w-[120px] flex items-center gap-[10px]">
+        <span className="shrink-0 text-[14px] text-[#030303] leading-[normal] whitespace-nowrap">
+          触发类型
+        </span>
+        <Select value={triggerType} onValueChange={handleTriggerTypeChange}>
+          <SelectTrigger className="flex-1 min-w-0">
+            <SelectValue placeholder="全部" ref={setTriggerTypeTriggerRef} />
+          </SelectTrigger>
+          <SelectContent container={triggerTypePortalContainer}>
+            {allTriggerTypeOptions.map((opt) => (
+              <SelectItem key={opt.value} value={opt.value}>
+                {opt.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* 执行结果 */}
+      <div className="shrink-0 flex items-center gap-[10px] w-[280px]">
+        <span className="shrink-0 text-[14px] text-[#030303] leading-[normal] whitespace-nowrap">
+          执行结果
+        </span>
+        <Select value={execResult} onValueChange={handleExecResultChange}>
+          <SelectTrigger className="flex-1 min-w-0">
+            <SelectValue placeholder="请输入" ref={setExecResultTriggerRef} />
+          </SelectTrigger>
+          <SelectContent container={execResultPortalContainer}>
+            {allExecResultOptions.map((opt) => (
+              <SelectItem key={opt.value} value={opt.value}>
+                {opt.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* 筛选按钮 */}
+      <button
+        type="button"
+        className="shrink-0 flex items-center justify-center h-[34px] px-[20px] py-[7px] rounded-[4px] bg-[#0265FF] text-[14px] text-white leading-[normal] whitespace-nowrap hover:bg-[#0252CC] cursor-pointer transition-colors duration-200"
+        onClick={handleFilter}
+      >
+        筛选
+      </button>
+    </div>
+  );
+}