feat(ui): new WorkflowRuns using antd

ui/package-lock.json

@@ -16,7 +16,6 @@
         "@radix-ui/react-scroll-area": "^1.1.0",
         "@radix-ui/react-select": "^2.1.1",
         "@radix-ui/react-slot": "^1.1.0",
-        "@tanstack/react-table": "^8.20.5",
         "ahooks": "^3.8.4",
         "antd": "^5.22.5",
         "antd-zod": "^6.0.0",
@@ -3939,37 +3938,6 @@
         "win32"
       ]
     },
-    "node_modules/@tanstack/react-table": {
-      "version": "8.20.5",
-      "resolved": "https://registry.npmmirror.com/@tanstack/react-table/-/react-table-8.20.5.tgz",
-      "integrity": "sha512-WEHopKw3znbUZ61s9i0+i9g8drmDo6asTWbrQh8Us63DAk/M0FkmIqERew6P71HI75ksZ2Pxyuf4vvKh9rAkiA==",
-      "dependencies": {
-        "@tanstack/table-core": "8.20.5"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
-      },
-      "peerDependencies": {
-        "react": ">=16.8",
-        "react-dom": ">=16.8"
-      }
-    },
-    "node_modules/@tanstack/table-core": {
-      "version": "8.20.5",
-      "resolved": "https://registry.npmmirror.com/@tanstack/table-core/-/table-core-8.20.5.tgz",
-      "integrity": "sha512-P9dF7XbibHph2PFRz8gfBKEXEY/HJPOhym8CHmjF8y3q5mWpKx9xtZapXQUWCgkqvsK0R46Azuz+VaxD4Xl+Tg==",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
-      }
-    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmmirror.com/@types/babel__core/-/babel__core-7.20.5.tgz",

ui/package.json

@@ -18,7 +18,6 @@
     "@radix-ui/react-scroll-area": "^1.1.0",
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-slot": "^1.1.0",
-    "@tanstack/react-table": "^8.20.5",
     "ahooks": "^3.8.4",
     "antd": "^5.22.5",
     "antd-zod": "^6.0.0",

ui/src/App.tsx

@@ -55,6 +55,7 @@ const RootApp = () => {
         ...antdTheme,
         token: {
           colorPrimary: "hsl(24.6 95% 53.1%)",
+          colorLink: "hsl(24.6 95% 53.1%)",
         },
       }}
     >

ui/src/components/certificate/CertificateDetailDrawer.tsx

@@ -2,8 +2,9 @@ import { cloneElement, useMemo } from "react";
 import { useControllableValue } from "ahooks";
 import { Drawer } from "antd";
 
-import { type CertificateModel } from "@/domain/certificate";
+import Show from "@/components/Show";
 import CertificateDetail from "./CertificateDetail";
+import { type CertificateModel } from "@/domain/certificate";
 
 export type CertificateDetailDrawerProps = {
   data?: CertificateModel;
@@ -38,8 +39,10 @@ const CertificateDetailDrawer = ({ data, loading, trigger, ...props }: Certifica
     <>
       {triggerEl}
 
-      <Drawer closable destroyOnClose open={open} loading={loading} placement="right" width={480} onClose={() => setOpen(false)}>
+      <Drawer closable destroyOnClose open={open} loading={loading} placement="right" title={data?.id} width={640} onClose={() => setOpen(false)}>
-        {data ? <CertificateDetail data={data} /> : <></>}
+        <Show when={!!data}>
+          <CertificateDetail data={data!} />
+        </Show>
       </Drawer>
     </>
   );

ui/src/components/ui/table.tsx

@@ -1,47 +0,0 @@
-import * as React from "react";
-
-import { cn } from "./utils";
-
-const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(({ className, ...props }, ref) => (
-  <div className="relative w-full overflow-auto">
-    <table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
-  </div>
-));
-Table.displayName = "Table";
-
-const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
-));
-TableHeader.displayName = "TableHeader";
-
-const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(({ className, ...props }, ref) => (
-  <tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
-));
-TableBody.displayName = "TableBody";
-
-const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(({ className, ...props }, ref) => (
-  <tfoot ref={ref} className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)} {...props} />
-));
-TableFooter.displayName = "TableFooter";
-
-const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(({ className, ...props }, ref) => (
-  <tr ref={ref} className={cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className)} {...props} />
-));
-TableRow.displayName = "TableRow";
-
-const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(({ className, ...props }, ref) => (
-  <th ref={ref} className={cn("h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0", className)} {...props} />
-));
-TableHead.displayName = "TableHead";
-
-const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(({ className, ...props }, ref) => (
-  <td ref={ref} className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)} {...props} />
-));
-TableCell.displayName = "TableCell";
-
-const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(({ className, ...props }, ref) => (
-  <caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
-));
-TableCaption.displayName = "TableCaption";
-
-export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };

ui/src/components/workflow/DataTable.tsx

@@ -1,120 +0,0 @@
-import { ColumnDef, flexRender, getCoreRowModel, getPaginationRowModel, PaginationState, useReactTable } from "@tanstack/react-table";
-
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { Button } from "../ui/button";
-import { useEffect, useState } from "react";
-import Show from "../Show";
-import { useTranslation } from "react-i18next";
-
-interface DataTableProps<TData extends { id: string }, TValue> {
-  columns: ColumnDef<TData, TValue>[];
-  data: TData[];
-  pageCount: number;
-  onPageChange?: (pageIndex: number, pageSize?: number) => Promise<void>;
-  onRowClick?: (id: string) => void;
-  withPagination?: boolean;
-  fallback?: React.ReactNode;
-}
-
-export function DataTable<TData extends { id: string }, TValue>({
-  columns,
-  data,
-  onPageChange,
-  pageCount,
-  onRowClick,
-  withPagination,
-  fallback,
-}: DataTableProps<TData, TValue>) {
-  const [{ pageIndex, pageSize }, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: 10,
-  });
-
-  const { t } = useTranslation();
-
-  const pagination = {
-    pageIndex,
-    pageSize,
-  };
-
-  const table = useReactTable({
-    data,
-    columns,
-    pageCount: pageCount,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    state: {
-      pagination,
-    },
-    onPaginationChange: setPagination,
-    manualPagination: true,
-  });
-
-  useEffect(() => {
-    onPageChange?.(pageIndex, pageSize);
-  }, [pageIndex]);
-
-  const handleRowClick = (id: string) => {
-    onRowClick?.(id);
-  };
-
-  return (
-    <div>
-      <div className="rounded-md">
-        <Table>
-          <TableHeader>
-            {table.getHeaderGroups().map((headerGroup) => (
-              <TableRow key={headerGroup.id} className="dark:border-muted-foreground">
-                {headerGroup.headers.map((header) => {
-                  return <TableHead key={header.id}>{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}</TableHead>;
-                })}
-              </TableRow>
-            ))}
-          </TableHeader>
-          <TableBody className="dark:text-stone-200">
-            {table.getRowModel().rows?.length ? (
-              table.getRowModel().rows.map((row) => (
-                <TableRow
-                  key={row.id}
-                  data-state={row.getIsSelected() && "selected"}
-                  className="dark:border-muted-foreground"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    handleRowClick(row.original.id);
-                  }}
-                >
-                  {row.getVisibleCells().map((cell) => (
-                    <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
-                  ))}
-                </TableRow>
-              ))
-            ) : (
-              <TableRow>
-                <TableCell colSpan={columns.length} className="h-24 text-center">
-                  {fallback ? fallback : t("common.text.nodata")}
-                </TableCell>
-              </TableRow>
-            )}
-          </TableBody>
-        </Table>
-      </div>
-      <Show when={!!withPagination}>
-        <div className="flex items-center justify-end mt-5">
-          <div className="flex items-center space-x-2 dark:text-stone-200">
-            {table.getCanPreviousPage() && (
-              <Button variant="outline" size="sm" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
-                {t("common.pagination.prev")}
-              </Button>
-            )}
-
-            {table.getCanNextPage && (
-              <Button variant="outline" size="sm" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
-                {t("common.pagination.next")}
-              </Button>
-            )}
-          </div>
-        </div>
-      </Show>
-    </div>
-  );
-}

ui/src/components/workflow/WorkflowLog.tsx

@@ -1,93 +0,0 @@
-import { WorkflowRunLog } from "@/domain/workflow";
-import { list as logs } from "@/repository/workflowRunLog";
-import { ColumnDef } from "@tanstack/react-table";
-import { useState } from "react";
-import { DataTable } from "./DataTable";
-import { useParams } from "react-router-dom";
-import { Check, X } from "lucide-react";
-import WorkflowLogDetail from "./WorkflowLogDetail";
-import { useTranslation } from "react-i18next";
-
-const WorkflowLog = () => {
-  const [data, setData] = useState<WorkflowRunLog[]>([]);
-  const [pageCount, setPageCount] = useState<number>(0);
-
-  const { id } = useParams();
-
-  const { t } = useTranslation();
-
-  const [open, setOpen] = useState(false);
-  const [selectedLog, setSelectedLog] = useState<WorkflowRunLog>();
-
-  const fetchData = async (page: number, pageSize?: number) => {
-    const resp = await logs({ page: page, perPage: pageSize, id: id ?? "" });
-    setData(resp.items);
-    setPageCount(resp.totalPages);
-  };
-
-  const columns: ColumnDef<WorkflowRunLog>[] = [
-    {
-      accessorKey: "succeed",
-      header: t("workflow.history.props.state"),
-      cell: ({ row }) => {
-        const succeed: boolean = row.getValue("succeed");
-        if (succeed) {
-          return (
-            <div className="flex items-center space-x-2 min-w-[150px]">
-              <div className="text-white bg-green-500 w-8 h-8 rounded-full flex items-center justify-center">
-                <Check size={18} />
-              </div>
-              <div className="text-sone-700">{t("workflow.history.props.state.success")}</div>
-            </div>
-          );
-        } else {
-          return (
-            <div className="flex items-center space-x-2 min-w-[150px]">
-              <div className="text-white bg-red-500 w-8 h-8 rounded-full flex items-center justify-center">
-                <X size={18} />
-              </div>
-              <div className="text-stone-700">{t("workflow.history.props.state.failed")}</div>
-            </div>
-          );
-        }
-      },
-    },
-    {
-      accessorKey: "error",
-      header: t("workflow.history.props.reason"),
-      cell: ({ row }) => {
-        let error: string = row.getValue("error");
-        if (!error) {
-          error = "";
-        }
-        return <div className="max-w-[300px] truncate text-red-500">{error}</div>;
-      },
-    },
-    {
-      accessorKey: "created",
-      header: t("workflow.history.props.time"),
-      cell: ({ row }) => {
-        const date: string = row.getValue("created");
-        return new Date(date).toLocaleString();
-      },
-    },
-  ];
-
-  const handleRowClick = (id: string) => {
-    setOpen(true);
-    const log = data.find((item) => item.id === id);
-    setSelectedLog(log);
-  };
-  return (
-    <div className="w-full md:w-[960px]">
-      <div>
-        <div className="text-muted-foreground mb-5">{t("workflow.history.page.title")}</div>
-        <DataTable columns={columns} data={data} onPageChange={fetchData} pageCount={pageCount} onRowClick={handleRowClick} />
-      </div>
-
-      <WorkflowLogDetail open={open} onOpenChange={setOpen} log={selectedLog} />
-    </div>
-  );
-};
-
-export default WorkflowLog;

ui/src/components/workflow/WorkflowLogDetail.tsx

@@ -1,85 +0,0 @@
-import { WorkflowOutput, WorkflowRunLog, WorkflowRunLogItem } from "@/domain/workflow";
-import { Sheet, SheetContent, SheetHeader, SheetTitle } from "../ui/sheet";
-import { Check, X } from "lucide-react";
-import { ScrollArea } from "../ui/scroll-area";
-import { useTranslation } from "react-i18next";
-
-type WorkflowLogDetailProps = {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  log?: WorkflowRunLog;
-};
-const WorkflowLogDetail = ({ open, onOpenChange, log }: WorkflowLogDetailProps) => {
-  const { t } = useTranslation();
-  return (
-    <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent className="sm:max-w-5xl">
-        <SheetHeader>
-          <SheetTitle>{t("workflow.history.page.title")}</SheetTitle>
-        </SheetHeader>
-
-        <div className="flex flex-col">
-          {log?.succeed ? (
-            <div className="mt-5 flex justify-between bg-green-100 p-5 rounded-md items-center">
-              <div className="flex space-x-2 items-center min-w-[150px]">
-                <div className="w-8 h-8 bg-green-500 flex items-center justify-center rounded-full text-white">
-                  <Check size={18} />
-                </div>
-                <div className="text-stone-700">{t("workflow.history.props.state.success")}</div>
-              </div>
-
-              <div className="text-muted-foreground">{new Date(log.created).toLocaleString()}</div>
-            </div>
-          ) : (
-            <div className="mt-5 flex justify-between bg-red-100 p-5 rounded-md items-center">
-              <div className="flex space-x-2 items-center min-w-[150px]">
-                <div className="w-8 h-8 bg-red-500 flex items-center justify-center rounded-full text-white">
-                  <X size={18} />
-                </div>
-                <div className="text-stone-700">{t("workflow.history.props.state.failed")}</div>
-              </div>
-
-              <div className="text-red-500 max-w-[400px] truncate">{log?.error}</div>
-
-              <div className="text-muted-foreground">{log?.created && new Date(log.created).toLocaleString()}</div>
-            </div>
-          )}
-
-          <ScrollArea className="h-[80vh] mt-5 bg-black p-5 rounded-md">
-            <div className=" text-stone-200 flex flex-col space-y-3">
-              {log?.log.map((item: WorkflowRunLogItem, i) => {
-                return (
-                  <div key={i} className="flex flex-col space-y-2">
-                    <div className="">{item.nodeName}</div>
-                    <div className="flex flex-col space-y-1">
-                      {item.outputs.map((output: WorkflowOutput) => {
-                        return (
-                          <>
-                            <div className="flex text-sm space-x-2">
-                              <div>[{output.time}]</div>
-                              {output.error ? (
-                                <>
-                                  <div className="text-red-500 max-w-[70%]">{output.error}</div>
-                                </>
-                              ) : (
-                                <>
-                                  <div>{output.content}</div>
-                                </>
-                              )}
-                            </div>
-                          </>
-                        );
-                      })}
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          </ScrollArea>
-        </div>
-      </SheetContent>
-    </Sheet>
-  );
-};
-
-export default WorkflowLogDetail;

ui/src/components/workflow/run/WorkflowRunDetailDrawer.tsx

@@ -0,0 +1,80 @@
+import { cloneElement, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { useControllableValue } from "ahooks";
+import { Alert, Drawer } from "antd";
+
+import Show from "@/components/Show";
+import { type WorkflowRunModel } from "@/domain/workflowRun";
+
+export type WorkflowRunDetailDrawerProps = {
+  data?: WorkflowRunModel;
+  loading?: boolean;
+  trigger?: React.ReactElement;
+  onOpenChange?: (open: boolean) => void;
+};
+
+const WorkflowRunDetailDrawer = ({ data, loading, trigger, ...props }: WorkflowRunDetailDrawerProps) => {
+  const { t } = useTranslation();
+
+  const [open, setOpen] = useControllableValue<boolean>(props, {
+    valuePropName: "open",
+    defaultValuePropName: "defaultOpen",
+    trigger: "onOpenChange",
+  });
+
+  const triggerEl = useMemo(() => {
+    if (!trigger) {
+      return null;
+    }
+
+    return cloneElement(trigger, {
+      ...trigger.props,
+      onClick: () => {
+        setOpen(true);
+        trigger.props?.onClick?.();
+      },
+    });
+  }, [trigger, setOpen]);
+
+  return (
+    <>
+      {triggerEl}
+
+      <Drawer closable destroyOnClose open={open} loading={loading} placement="right" title={data?.id} width={640} onClose={() => setOpen(false)}>
+        <Show when={!!data}>
+          <Show when={data!.succeed}>
+            <Alert showIcon type="success" message={t("workflow_run.props.status.succeeded")} />
+          </Show>
+
+          <Show when={!data!.succeed}>
+            <Alert showIcon type="error" message={t("workflow_run.props.status.failed")} description={data!.error} />
+          </Show>
+
+          <div className="mt-4 p-4 bg-black text-stone-200 rounded-md">
+            <div className="flex flex-col space-y-3">
+              {data!.log.map((item, i) => {
+                return (
+                  <div key={i} className="flex flex-col space-y-2">
+                    <div>{item.nodeName}</div>
+                    <div className="flex flex-col space-y-1">
+                      {item.outputs.map((output, j) => {
+                        return (
+                          <div key={j} className="flex text-sm space-x-2">
+                            <div>[{output.time}]</div>
+                            {output.error ? <div className="text-red-500">{output.error}</div> : <div>{output.content}</div>}
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </Show>
+      </Drawer>
+    </>
+  );
+};
+
+export default WorkflowRunDetailDrawer;

ui/src/components/workflow/run/WorkflowRuns.tsx

@@ -0,0 +1,157 @@
+import { useState } from "react";
+import { useParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { useRequest } from "ahooks";
+import { Button, Empty, notification, Space, Table, theme, Tooltip, Typography, type TableProps } from "antd";
+import { CircleCheck as CircleCheckIcon, CircleX as CircleXIcon, Eye as EyeIcon } from "lucide-react";
+import dayjs from "dayjs";
+import { ClientResponseError } from "pocketbase";
+
+import WorkflowRunDetailDrawer from "./WorkflowRunDetailDrawer";
+import { type WorkflowRunModel } from "@/domain/workflowRun";
+import { list as listWorkflowRuns } from "@/repository/workflowRun";
+import { getErrMsg } from "@/utils/error";
+
+export type WorkflowRunsProps = {
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+const WorkflowRuns = ({ className, style }: WorkflowRunsProps) => {
+  const { t } = useTranslation();
+
+  const { token: themeToken } = theme.useToken();
+
+  const [notificationApi, NotificationContextHolder] = notification.useNotification();
+
+  const tableColumns: TableProps<WorkflowRunModel>["columns"] = [
+    {
+      key: "$index",
+      align: "center",
+      fixed: "left",
+      width: 50,
+      render: (_, __, index) => (page - 1) * pageSize + index + 1,
+    },
+    {
+      key: "id",
+      title: t("workflow_run.props.id"),
+      ellipsis: true,
+      render: (_, record) => record.id,
+    },
+    {
+      key: "status",
+      title: t("workflow_run.props.status"),
+      ellipsis: true,
+      render: (_, record) => {
+        if (record.succeed) {
+          return (
+            <Space>
+              <CircleCheckIcon color={themeToken.colorSuccess} size={16} />
+              <Typography.Text type="success">{t("workflow_run.props.status.succeeded")}</Typography.Text>
+            </Space>
+          );
+        } else {
+          <Tooltip title={record.error}>
+            <Space>
+              <CircleXIcon color={themeToken.colorError} size={16} />
+              <Typography.Text type="danger">{t("workflow_run.props.status.failed")}</Typography.Text>
+            </Space>
+          </Tooltip>;
+        }
+      },
+    },
+    {
+      key: "startedAt",
+      title: t("workflow_run.props.started_at"),
+      ellipsis: true,
+      render: (_, record) => {
+        return "TODO";
+      },
+    },
+    {
+      key: "completedAt",
+      title: t("workflow_run.props.completed_at"),
+      ellipsis: true,
+      render: (_, record) => {
+        return "TODO";
+      },
+    },
+    {
+      key: "$action",
+      align: "end",
+      fixed: "right",
+      width: 120,
+      render: (_, record) => (
+        <Button.Group>
+          <WorkflowRunDetailDrawer data={record} trigger={<Button color="primary" icon={<EyeIcon size={16} />} variant="text" />} />
+        </Button.Group>
+      ),
+    },
+  ];
+  const [tableData, setTableData] = useState<WorkflowRunModel[]>([]);
+  const [tableTotal, setTableTotal] = useState<number>(0);
+
+  const [page, setPage] = useState<number>(1);
+  const [pageSize, setPageSize] = useState<number>(10);
+
+  const { id: workflowId } = useParams(); // TODO: 外部传参
+  const { loading } = useRequest(
+    () => {
+      return listWorkflowRuns({
+        workflowId: workflowId!,
+        page: page,
+        perPage: pageSize,
+      });
+    },
+    {
+      refreshDeps: [workflowId, page, pageSize],
+      onSuccess: (data) => {
+        setTableData(data.items);
+        setTableTotal(data.totalItems);
+      },
+      onError: (err) => {
+        if (err instanceof ClientResponseError && err.isAbort) {
+          return;
+        }
+
+        console.error(err);
+        notificationApi.error({ message: t("common.text.request_error"), description: getErrMsg(err) });
+      },
+    }
+  );
+
+  return (
+    <>
+      {NotificationContextHolder}
+
+      <div className={className} style={style}>
+        <Table<WorkflowRunModel>
+          columns={tableColumns}
+          dataSource={tableData}
+          loading={loading}
+          locale={{
+            emptyText: <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />,
+          }}
+          pagination={{
+            current: page,
+            pageSize: pageSize,
+            total: tableTotal,
+            showSizeChanger: true,
+            onChange: (page: number, pageSize: number) => {
+              setPage(page);
+              setPageSize(pageSize);
+            },
+            onShowSizeChange: (page: number, pageSize: number) => {
+              setPage(page);
+              setPageSize(pageSize);
+            },
+          }}
+          rowKey={(record: WorkflowRunModel) => record.id}
+          scroll={{ x: "max(100%, 960px)" }}
+        />
+      </div>
+    </>
+  );
+};
+
+export default WorkflowRuns;

ui/src/domain/workflow.ts

@@ -4,6 +4,9 @@ import { nanoid } from "nanoid";
 import i18n from "@/i18n";
 import { deployTargets } from "./domain";
 
+/**
+ * @deprecated
+ */
 export type WorkflowRunLog = {
   id: string;
   workflow: string;
@@ -14,6 +17,9 @@ export type WorkflowRunLog = {
   updated: string;
 };
 
+/**
+ * @deprecated
+ */
 export type WorkflowRunLogItem = {
   nodeName: string;
   error: string;

ui/src/domain/workflowRun.ts

@@ -0,0 +1,14 @@
+import { type WorkflowOutput } from "./workflow";
+
+export interface WorkflowRunModel extends BaseModel {
+  workflow: string;
+  log: WorkflowRunLog[];
+  error: string;
+  succeed: boolean;
+}
+
+export type WorkflowRunLog = {
+  nodeName: string;
+  error: string;
+  outputs: WorkflowOutput[];
+};

ui/src/global.css

@@ -21,7 +21,6 @@
     --border: 20 5.9% 90%;
     --input: 20 5.9% 90%;
     --ring: 24.6 95% 53.1%;
-    --radius: 0.5rem;
   }
 
   .dark {

ui/src/i18n/locales/en/nls.workflow.json

@@ -20,27 +20,30 @@
   "workflow.props.created_at": "Created At",
   "workflow.props.updated_at": "Updated At",
 
+  "workflow.detail.orchestration.tab": "Orchestration",
+  "workflow.detail.runs.tab": "Workflow Runs",
+
   "workflow.baseinfo.modal.title": "Workflow Base Information",
   "workflow.baseinfo.form.name.label": "Name",
   "workflow.baseinfo.form.name.placeholder": "Please enter name",
   "workflow.baseinfo.form.description.label": "Description",
   "workflow.baseinfo.form.description.placeholder": "Please enter description",
 
+  "workflow_run.props.id": "ID",
+  "workflow_run.props.status": "Status",
+  "workflow_run.props.status.succeeded": "Succeeded",
+  "workflow_run.props.status.failed": "Failed",
+  "workflow_run.props.started_at": "Started At",
+  "workflow_run.props.completed_at": "Completed At",
+
   "workflow.detail.action.save": "Save updates",
   "workflow.detail.action.save.failed": "Save failed",
-  "workflow.detail.action.save.failed.uncompleted": "Please complete all node settings",
+  "workflow.detail.action.save.failed.uncompleted": "Please complete the orchestration and publish the changes first",
   "workflow.detail.action.run": "Run",
   "workflow.detail.action.run.failed": "Run failed",
   "workflow.detail.action.run.success": "Run success",
   "workflow.detail.action.running": "Running",
 
-  "workflow.history.page.title": "Logs",
-  "workflow.history.props.state": "State",
-  "workflow.history.props.state.success": "Success",
-  "workflow.history.props.state.failed": "Failed",
-  "workflow.history.props.reason": "Reason",
-  "workflow.history.props.time": "Time",
-
   "workflow.common.certificate.label": "Certificate",
   "workflow.common.certificate.placeholder": "Please select certificate source",
 

ui/src/i18n/locales/zh/nls.workflow.json

@@ -20,29 +20,30 @@
   "workflow.props.created_at": "创建时间",
   "workflow.props.updated_at": "更新时间",
 
+  "workflow.detail.orchestration.tab": "流程编排",
+  "workflow.detail.runs.tab": "执行历史",
+
   "workflow.baseinfo.modal.title": "编辑基本信息",
   "workflow.baseinfo.form.name.label": "名称",
   "workflow.baseinfo.form.name.placeholder": "请输入工作流名称",
   "workflow.baseinfo.form.description.label": "描述",
   "workflow.baseinfo.form.description.placeholder": "请输入工作流描述",
 
+  "workflow_run.props.id": "ID",
+  "workflow_run.props.status": "状态",
+  "workflow_run.props.status.succeeded": "成功",
+  "workflow_run.props.status.failed": "失败",
+  "workflow_run.props.started_at": "开始时间",
+  "workflow_run.props.completed_at": "完成时间",
+
   "workflow.detail.action.save": "保存变更",
   "workflow.detail.action.save.failed": "保存失败",
-  "workflow.detail.action.save.failed.uncompleted": "请完成所有节点设置",
+  "workflow.detail.action.save.failed.uncompleted": "请先完成流程编排并发布更改",
   "workflow.detail.action.run": "立即执行",
   "workflow.detail.action.run.failed": "执行失败",
   "workflow.detail.action.run.success": "执行成功",
   "workflow.detail.action.running": "正在执行",
 
-  "workflow.baseinfo.title": "基本信息",
-
-  "workflow.history.page.title": "日志",
-  "workflow.history.props.state": "状态",
-  "workflow.history.props.state.success": "通过",
-  "workflow.history.props.state.failed": "失败",
-  "workflow.history.props.reason": "原因",
-  "workflow.history.props.time": "时间",
-
   "workflow.common.certificate.label": "证书",
   "workflow.common.certificate.placeholder": "请选择证书来源",
 

ui/src/pages/accesses/AccessList.tsx

@@ -69,14 +69,13 @@ const AccessList = () => {
       fixed: "right",
       width: 120,
       render: (_, record) => (
-        <>
+        <Button.Group>
-          <Space size={0}>
           <AccessEditModal
             data={record}
             preset="edit"
             trigger={
               <Tooltip title={t("access.action.edit")}>
-                  <Button type="link" icon={<PencilIcon size={16} />} />
+                <Button color="primary" icon={<PencilIcon size={16} />} variant="text" />
               </Tooltip>
             }
           />
@@ -86,23 +85,22 @@ const AccessList = () => {
             preset="add"
             trigger={
               <Tooltip title={t("access.action.copy")}>
-                  <Button type="link" icon={<CopyIcon size={16} />} />
+                <Button color="primary" icon={<CopyIcon size={16} />} variant="text" />
               </Tooltip>
             }
           />
 
           <Tooltip title={t("access.action.delete")}>
             <Button
-                type="link"
+              color="danger"
-                danger={true}
               icon={<Trash2Icon size={16} />}
+              variant="text"
               onClick={() => {
                 handleDeleteClick(record);
               }}
             />
           </Tooltip>
-          </Space>
+        </Button.Group>
-        </>
       ),
     },
   ];

ui/src/pages/certificates/CertificateList.tsx

@@ -153,16 +153,16 @@ const CertificateList = () => {
       fixed: "right",
       width: 120,
       render: (_, record) => (
-        <Space size={0}>
+        <Button.Group>
           <CertificateDetailDrawer
             data={record}
             trigger={
               <Tooltip title={t("certificate.action.view")}>
-                <Button type="link" icon={<EyeIcon size={16} />} />
+                <Button color="primary" icon={<EyeIcon size={16} />} variant="text" />
               </Tooltip>
             }
           />
-        </Space>
+        </Button.Group>
       ),
     },
   ];

ui/src/pages/workflows/WorkflowDetail.tsx

@@ -10,7 +10,7 @@ import { z } from "zod";
 import Show from "@/components/Show";
 import End from "@/components/workflow/End";
 import NodeRender from "@/components/workflow/NodeRender";
-import WorkflowLog from "@/components/workflow/WorkflowLog";
+import WorkflowRuns from "@/components/workflow/run/WorkflowRuns";
 import WorkflowProvider from "@/components/workflow/WorkflowProvider";
 import { useZustandShallowSelector } from "@/hooks";
 import { allNodesValidated, type WorkflowModel, type WorkflowNode } from "@/domain/workflow";
@@ -32,7 +32,7 @@ const WorkflowDetail = () => {
     init(workflowId);
   }, [workflowId]);
 
-  const [tabValue, setTabValue] = useState<"orchestrate" | "runlog">("orchestrate");
+  const [tabValue, setTabValue] = useState<"orchestration" | "runs">("orchestration");
 
   // const [running, setRunning] = useState(false);
 
@@ -123,10 +123,10 @@ const WorkflowDetail = () => {
           <Typography.Paragraph type="secondary">{workflow.description}</Typography.Paragraph>
           <Tabs
             activeKey={tabValue}
-            defaultActiveKey="orchestrate"
+            defaultActiveKey="orchestration"
             items={[
-              { key: "orchestrate", label: "流程编排" },
+              { key: "orchestration", label: t("workflow.detail.orchestration.tab") },
-              { key: "runlog", label: "执行历史" },
+              { key: "runs", label: t("workflow.detail.runs.tab") },
             ]}
             renderTabBar={(props, DefaultTabBar) => <DefaultTabBar {...props} style={{ margin: 0 }} />}
             tabBarStyle={{ border: "none" }}
@@ -138,12 +138,12 @@ const WorkflowDetail = () => {
       <div className="p-4">
         <Card>
           <WorkflowProvider>
-            <Show when={tabValue === "orchestrate"}>
+            <Show when={tabValue === "orchestration"}>
               <div className="flex flex-col items-center">{elements}</div>
             </Show>
 
-            <Show when={tabValue === "runlog"}>
+            <Show when={tabValue === "runs"}>
-              <WorkflowLog />
+              <WorkflowRuns />
             </Show>
           </WorkflowProvider>
         </Card>

ui/src/pages/workflows/WorkflowList.tsx

@@ -176,27 +176,30 @@ const WorkflowList = () => {
       fixed: "right",
       width: 120,
       render: (_, record) => (
-        <Space size={0}>
+        <Button.Group>
           <Tooltip title={t("workflow.action.edit")}>
             <Button
-              type="link"
+              color="primary"
               icon={<PencilIcon size={16} />}
+              variant="text"
               onClick={() => {
                 navigate(`/workflows/${record.id}`);
               }}
             />
           </Tooltip>
+
           <Tooltip title={t("workflow.action.delete")}>
             <Button
-              type="link"
+              color="danger"
               danger={true}
               icon={<Trash2Icon size={16} />}
+              variant="text"
               onClick={() => {
                 handleDeleteClick(record);
               }}
             />
           </Tooltip>
-        </Space>
+        </Button.Group>
       ),
     },
   ];

ui/src/repository/workflowRun.ts

@@ -1,22 +1,22 @@
-import { type WorkflowRunLog } from "@/domain/workflow";
+import { type WorkflowRunModel } from "@/domain/workflowRun";
 import { getPocketBase } from "./pocketbase";
 
 const COLLECTION_NAME = "workflow_run_log";
 
-export type ListWorkflowLogsRequest = {
+export type ListWorkflowRunsRequest = {
-  id: string;
+  workflowId: string;
   page?: number;
   perPage?: number;
 };
 
-export const list = async (request: ListWorkflowLogsRequest) => {
+export const list = async (request: ListWorkflowRunsRequest) => {
   const page = request.page || 1;
   const perPage = request.perPage || 10;
 
   return await getPocketBase()
     .collection(COLLECTION_NAME)
-    .getList<WorkflowRunLog>(page, perPage, {
+    .getList<WorkflowRunModel>(page, perPage, {
-      filter: getPocketBase().filter("workflow={:workflowId}", { workflowId: request.id }),
+      filter: getPocketBase().filter("workflow={:workflowId}", { workflowId: request.workflowId }),
       sort: "-created",
       requestKey: null,
     });

ui/tailwind.config.js

@@ -44,11 +44,6 @@ module.exports = {
           foreground: "hsl(var(--popover-foreground))",
         },
       },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
     },
   },
   plugins: [require("tailwindcss-animate")],