ui/package-lock.json

@@ -16,6 +16,7 @@
         "@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",
@@ -3938,6 +3939,37 @@
         "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,6 +18,7 @@
     "@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,7 +55,6 @@ const RootApp = () => {
         ...antdTheme,
         token: {
           colorPrimary: "hsl(24.6 95% 53.1%)",
-          colorLink: "hsl(24.6 95% 53.1%)",
         },
       }}
     >

ui/src/components/Show.tsx

@@ -1,12 +1,6 @@
 import React from "react";
 
-export type ShowProps = {
-  when: boolean;
-  children: React.ReactNode;
-  fallback?: React.ReactNode;
-};
-
-const Show = ({ when, children, fallback }: ShowProps) => {
+const Show = ({ when, children, fallback }: { when: boolean; children: React.ReactNode; fallback?: React.ReactNode }) => {
   return when ? children : fallback;
 };
 

ui/src/components/access/AccessEditForm.tsx

@@ -27,14 +27,14 @@ import AccessEditFormVolcEngineConfig from "./AccessEditFormVolcEngineConfig";
 import AccessEditFormWebhookConfig from "./AccessEditFormWebhookConfig";
 
 type AccessEditFormModelType = Partial<MaybeModelRecord<AccessModel>>;
-type AccessEditFormPresets = "add" | "edit";
+type AccessEditFormModes = "add" | "edit";
 
 export type AccessEditFormProps = {
   className?: string;
   style?: React.CSSProperties;
   disabled?: boolean;
+  mode: AccessEditFormModes;
   model?: AccessEditFormModelType;
-  preset: AccessEditFormPresets;
   onModelChange?: (model: AccessEditFormModelType) => void;
 };
 
@@ -44,7 +44,7 @@ export type AccessEditFormInstance = {
   validateFields: () => Promise<AccessEditFormModelType>;
 };
 
-const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>(({ className, style, disabled, model, preset, onModelChange }, ref) => {
+const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>(({ className, style, disabled, mode, model, onModelChange }, ref) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -160,7 +160,7 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
             rules={[formRule]}
             tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.type.tooltip") }}></span>}
           >
-            <AccessTypeSelect disabled={preset !== "add"} placeholder={t("access.form.type.placeholder")} showSearch={!disabled} />
+            <AccessTypeSelect disabled={mode !== "add"} placeholder={t("access.form.type.placeholder")} showSearch={!disabled} />
           </Form.Item>
         </Form>
 

ui/src/components/access/AccessEditModal.tsx

@@ -11,13 +11,13 @@ import AccessEditForm, { type AccessEditFormInstance, type AccessEditFormProps }
 export type AccessEditModalProps = {
   data?: AccessEditFormProps["model"];
   loading?: boolean;
+  mode: AccessEditFormProps["mode"];
   open?: boolean;
-  preset: AccessEditFormProps["preset"];
   trigger?: React.ReactElement;
   onOpenChange?: (open: boolean) => void;
 };
 
-const AccessEditModal = ({ data, loading, trigger, preset, ...props }: AccessEditModalProps) => {
+const AccessEditModal = ({ data, loading, mode, trigger, ...props }: AccessEditModalProps) => {
   const { t } = useTranslation();
 
   const [notificationApi, NotificationContextHolder] = notification.useNotification();
@@ -57,13 +57,13 @@ const AccessEditModal = ({ data, loading, trigger, preset, ...props }: AccessEdi
     }
 
     try {
-      if (preset === "add") {
+      if (mode === "add") {
         if (data?.id) {
           throw "Invalid props: `data`";
         }
 
         await createAccess(formRef.current!.getFieldsValue() as AccessModel);
-      } else if (preset === "edit") {
+      } else if (mode === "edit") {
         if (!data?.id) {
           throw "Invalid props: `data`";
         }
@@ -100,15 +100,14 @@ const AccessEditModal = ({ data, loading, trigger, preset, ...props }: AccessEdi
         confirmLoading={formPending}
         destroyOnClose
         loading={loading}
-        okText={preset === "edit" ? t("common.button.save") : t("common.button.submit")}
+        okText={mode === "edit" ? t("common.button.save") : t("common.button.submit")}
         open={open}
-        title={t(`access.action.${preset}`)}
-        width={480}
+        title={t(`access.action.${mode}`)}
         onOk={handleClickOk}
         onCancel={handleClickCancel}
       >
         <div className="pt-4 pb-2">
-          <AccessEditForm ref={formRef} preset={preset === "add" ? "add" : "edit"} model={data} />
+          <AccessEditForm ref={formRef} mode={mode === "add" ? "add" : "edit"} model={data} />
         </div>
       </Modal>
     </>

ui/src/components/certificate/CertificateDetailDrawer.tsx

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

ui/src/components/notification/NotifyChannels.tsx

@@ -3,7 +3,6 @@ import { useTranslation } from "react-i18next";
 import { useDeepCompareMemo } from "@ant-design/pro-components";
 import { Button, Collapse, message, notification, Skeleton, Space, Switch, type CollapseProps } from "antd";
 
-import Show from "@/components/Show";
 import NotifyChannelEditForm, { type NotifyChannelEditFormInstance } from "./NotifyChannelEditForm";
 import NotifyTestButton from "./NotifyTestButton";
 import { notifyChannelsMap } from "@/domain/settings";
@@ -106,9 +105,11 @@ const NotifyChannels = ({ className, classNames, style, styles }: NotifyChannels
 
   return (
     <div className={className} style={style}>
-      <Show when={loadedAtOnce} fallback={<Skeleton active />}>
+      {!loadedAtOnce ? (
+        <Skeleton active />
+      ) : (
         <Collapse className={classNames?.collapse} style={styles?.collapse} accordion={true} bordered={false} items={channelCollapseItems} />
-      </Show>
+      )}
     </div>
   );
 };

ui/src/components/notification/NotifyTemplate.tsx

@@ -6,7 +6,6 @@ import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 import { ClientResponseError } from "pocketbase";
 
-import Show from "@/components/Show";
 import { defaultNotifyTemplate, SETTINGS_NAMES, type NotifyTemplatesSettingsContent } from "@/domain/settings";
 import { get as getSettings, save as saveSettings } from "@/repository/settings";
 import { getErrMsg } from "@/utils/error";
@@ -89,7 +88,9 @@ const NotifyTemplateForm = ({ className, style }: NotifyTemplateFormProps) => {
       {MessageContextHolder}
       {NotificationContextHolder}
 
-      <Show when={!loading} fallback={<Skeleton active />}>
+      {loading ? (
+        <Skeleton active />
+      ) : (
         <Form form={form} disabled={formPending} initialValues={initialValues} layout="vertical" onFinish={handleFormFinish}>
           <Form.Item
             name="subject"
@@ -119,7 +120,7 @@ const NotifyTemplateForm = ({ className, style }: NotifyTemplateFormProps) => {
             </Button>
           </Form.Item>
         </Form>
-      </Show>
+      )}
     </div>
   );
 };

ui/src/components/ui/table.tsx

@@ -0,0 +1,47 @@
+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/ApplyForm.tsx

@@ -161,7 +161,7 @@ const ApplyForm = ({ data }: ApplyFormProps) => {
                 <FormLabel className="flex justify-between w-full">
                   <div>{t("domain.application.form.access.label")}</div>
                   <AccessEditModal
-                    preset="add"
+                    mode="add"
                     trigger={
                       <div className="flex items-center font-normal cursor-pointer text-primary hover:underline">
                         <PlusIcon size={14} />

ui/src/components/workflow/DataTable.tsx

@@ -0,0 +1,120 @@
+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/DeployToAliyunALB.tsx

@@ -103,7 +103,7 @@ const DeployToAliyunALB = ({ data }: DeployFormProps) => {
 
                   <AccessEditModal
                     data={{ configType: "aliyun" }}
-                    preset="add"
+                    mode="add"
                     trigger={
                       <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
                         <Plus size={14} />

ui/src/components/workflow/DeployToAliyunCDN.tsx

@@ -84,7 +84,7 @@ const DeployToAliyunCDN = ({ data }: DeployFormProps) => {
 
                   <AccessEditModal
                     data={{ configType: "aliyun" }}
-                    preset="add"
+                    mode="add"
                     trigger={
                       <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
                         <Plus size={14} />

ui/src/components/workflow/DeployToAliyunCLB.tsx

@@ -103,7 +103,7 @@ const DeployToAliyunCLB = ({ data }: DeployFormProps) => {
 
                   <AccessEditModal
                     data={{ configType: "aliyun" }}
-                    preset="add"
+                    mode="add"
                     trigger={
                       <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
                         <Plus size={14} />

ui/src/components/workflow/DeployToAliyunOss.tsx

@@ -93,7 +93,7 @@ const DeployToAliyunOSS = ({ data }: DeployFormProps) => {
 
                   <AccessEditModal
                     data={{ configType: "aliyun" }}
-                    preset="add"
+                    mode="add"
                     trigger={
                       <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
                         <Plus size={14} />

ui/src/components/workflow/DeployToBaiduCloudCDN.tsx

@@ -83,7 +83,7 @@ const DeployToBaiduCloudCDN = ({ data }: DeployFormProps) => {
 
                   <AccessEditModal
                     data={{ configType: "baiducloud" }}
-                    preset="add"
+                    mode="add"
                     trigger={
                       <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
                         <Plus size={14} />

ui/src/components/workflow/DeployToByteplusCDN.tsx

@@ -83,7 +83,7 @@ const DeployToByteplusCDN = ({ data }: DeployFormProps) => {
 
                   <AccessEditModal
                     data={{ configType: "byteplus" }}
-                    preset="add"
+                    mode="add"
                     trigger={
                       <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
                         <Plus size={14} />

ui/src/components/workflow/DeployToDogeCloudCDN.tsx

@@ -85,7 +85,7 @@ const DeployToDogeCloudCDN = ({ data }: DeployFormProps) => {
 
                   <AccessEditModal
                     data={{ configType: "dogecloud" }}
-                    preset="add"
+                    mode="add"
                     trigger={
                       <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
                         <Plus size={14} />

ui/src/components/workflow/DeployToHuaweiCloudCDN.tsx

@@ -90,7 +90,7 @@ const DeployToHuaweiCloudCDN = ({ data }: DeployFormProps) => {
 
                   <AccessEditModal
                     data={{ configType: "huaweicloud" }}
-                    preset="add"
+                    mode="add"
                     trigger={
                       <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
                         <Plus size={14} />

ui/src/components/workflow/DeployToHuaweiCloudELB.tsx

@@ -112,7 +112,7 @@ const DeployToHuaweiCloudELB = ({ data }: DeployFormProps) => {
 
                   <AccessEditModal
                     data={{ configType: "huaweicloud" }}
-                    preset="add"
+                    mode="add"
                     trigger={
                       <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
                         <Plus size={14} />

ui/src/components/workflow/DeployToKubernetesSecret.tsx

@@ -99,7 +99,7 @@ const DeployToKubernetesSecret = ({ data }: DeployFormProps) => {
 
                   <AccessEditModal
                     data={{ configType: "k8s" }}
-                    preset="add"
+                    mode="add"
                     trigger={
                       <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
                         <Plus size={14} />

ui/src/components/workflow/DeployToLocal.tsx

@@ -32,11 +32,11 @@ const formSchema = z
     certPath: z
       .string()
       .min(1, t("domain.deployment.form.file_cert_path.placeholder"))
-      .max(256, t("common.errmsg.string_max", { max: 256 })),
+      .max(255, t("common.errmsg.string_max", { max: 255 })),
     keyPath: z
       .string()
       .min(0, t("domain.deployment.form.file_key_path.placeholder"))
-      .max(256, t("common.errmsg.string_max", { max: 256 }))
+      .max(255, t("common.errmsg.string_max", { max: 255 }))
       .nullish(),
     pfxPassword: z.string().nullish(),
     jksAlias: z.string().nullish(),
@@ -209,7 +209,7 @@ Remove-Item -Path "$pfxPath" -Force
 
                 <AccessEditModal
                   data={{ configType: "local" }}
-                  preset="add"
+                  mode="add"
                   trigger={
                     <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
                       <Plus size={14} />

ui/src/components/workflow/DeployToQiniuCDN.tsx

@@ -85,7 +85,7 @@ const DeployToQiniuCDN = ({ data }: DeployFormProps) => {
 
                   <AccessEditModal
                     data={{ configType: "qiniu" }}
-                    preset="add"
+                    mode="add"
                     trigger={
                       <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
                         <Plus size={14} />

ui/src/components/workflow/DeployToSSH.tsx

@@ -31,11 +31,11 @@ const formSchema = z
     certPath: z
       .string()
       .min(1, t("domain.deployment.form.file_cert_path.placeholder"))
-      .max(256, t("common.errmsg.string_max", { max: 256 })),
+      .max(255, t("common.errmsg.string_max", { max: 255 })),
     keyPath: z
       .string()
       .min(0, t("domain.deployment.form.file_key_path.placeholder"))
-      .max(256, t("common.errmsg.string_max", { max: 256 }))
+      .max(255, t("common.errmsg.string_max", { max: 255 }))
       .nullish(),
     pfxPassword: z.string().nullish(),
     jksAlias: z.string().nullish(),
@@ -127,7 +127,7 @@ const DeployToSSH = ({ data }: DeployFormProps) => {
 
                 <AccessEditModal
                   data={{ configType: "ssh" }}
-                  preset="add"
+                  mode="add"
                   trigger={
                     <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
                       <Plus size={14} />

ui/src/components/workflow/DeployToTencentCDN.tsx

@@ -83,7 +83,7 @@ const DeployToTencentCDN = ({ data }: DeployFormProps) => {
 
                   <AccessEditModal
                     data={{ configType: "tencentcloud" }}
-                    preset="add"
+                    mode="add"
                     trigger={
                       <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
                         <Plus size={14} />

ui/src/components/workflow/DeployToTencentCLB.tsx

@@ -123,7 +123,7 @@ const DeployToTencentCLB = ({ data }: DeployFormProps) => {
 
                   <AccessEditModal
                     data={{ configType: "tencentcloud" }}
-                    preset="add"
+                    mode="add"
                     trigger={
                       <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
                         <Plus size={14} />

ui/src/components/workflow/DeployToTencentCOS.tsx

@@ -89,7 +89,7 @@ const DeployToTencentCOS = ({ data }: DeployFormProps) => {
 
                   <AccessEditModal
                     data={{ configType: "tencentcloud" }}
-                    preset="add"
+                    mode="add"
                     trigger={
                       <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
                         <Plus size={14} />

ui/src/components/workflow/DeployToTencentTEO.tsx

@@ -86,7 +86,7 @@ const DeployToTencentTEO = ({ data }: DeployFormProps) => {
 
                   <AccessEditModal
                     data={{ configType: "tencentcloud" }}
-                    preset="add"
+                    mode="add"
                     trigger={
                       <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
                         <Plus size={14} />

ui/src/components/workflow/DeployToVolcengineCDN.tsx

@@ -83,7 +83,7 @@ const DeployToVolcengineCDN = ({ data }: DeployFormProps) => {
 
                   <AccessEditModal
                     data={{ configType: "volcengine" }}
-                    preset="add"
+                    mode="add"
                     trigger={
                       <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
                         <Plus size={14} />

ui/src/components/workflow/DeployToVolcengineLive.tsx

@@ -83,7 +83,7 @@ const DeployToVolcengineLive = ({ data }: DeployFormProps) => {
 
                   <AccessEditModal
                     data={{ configType: "volcengine" }}
-                    preset="add"
+                    mode="add"
                     trigger={
                       <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
                         <Plus size={14} />

ui/src/components/workflow/DeployToWebhook.tsx

@@ -86,7 +86,7 @@ const DeployToWebhook = ({ data }: DeployFormProps) => {
 
                   <AccessEditModal
                     data={{ configType: "webhook" }}
-                    preset="add"
+                    mode="add"
                     trigger={
                       <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
                         <Plus size={14} />

ui/src/components/workflow/WorkflowBaseInfoEditDialog.tsx

@@ -0,0 +1,125 @@
+import { z } from "zod";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "../ui/dialog";
+import { useWorkflowStore } from "@/stores/workflow";
+import { useZustandShallowSelector } from "@/hooks";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
+import { Input } from "../ui/input";
+import { Button } from "../ui/button";
+import { useTranslation } from "react-i18next";
+import { memo, useEffect, useMemo, useState } from "react";
+import { Textarea } from "../ui/textarea";
+
+type WorkflowNameEditDialogProps = {
+  trigger: React.ReactNode;
+};
+
+const formSchema = z.object({
+  name: z.string(),
+  description: z.string(),
+});
+
+const WorkflowNameBaseInfoDialog = ({ trigger }: WorkflowNameEditDialogProps) => {
+  const { setBaseInfo, workflow } = useWorkflowStore(useZustandShallowSelector(["setBaseInfo", "workflow"]));
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+  });
+
+  const memoWorkflow = useMemo(() => workflow, [workflow]);
+
+  useEffect(() => {
+    form.reset({ name: workflow.name, description: workflow.description });
+  }, [memoWorkflow]);
+
+  const { t } = useTranslation();
+
+  const [open, setOpen] = useState(false);
+
+  const onSubmit = async (config: z.infer<typeof formSchema>) => {
+    await setBaseInfo(config.name, config.description);
+    setOpen(false);
+  };
+
+  return (
+    <>
+      <Dialog
+        open={open}
+        onOpenChange={(val) => {
+          setOpen(val);
+        }}
+      >
+        <DialogTrigger>{trigger}</DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle className="dark:text-stone-200">{t("workflow.baseinfo.title")}</DialogTitle>
+          </DialogHeader>
+          <div>
+            <Form {...form}>
+              <form
+                onSubmit={(e) => {
+                  e.stopPropagation();
+                  form.handleSubmit(onSubmit)(e);
+                }}
+                className="space-y-8 dark:text-stone-200"
+              >
+                <FormField
+                  control={form.control}
+                  name="name"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t("workflow.props.name")}</FormLabel>
+                      <FormControl>
+                        <Input
+                          placeholder={t("workflow.props.name.placeholder")}
+                          {...field}
+                          value={field.value}
+                          defaultValue={workflow.name}
+                          onChange={(e) => {
+                            form.setValue("name", e.target.value);
+                          }}
+                        />
+                      </FormControl>
+
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="description"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t("workflow.props.description")}</FormLabel>
+                      <FormControl>
+                        <Textarea
+                          placeholder={t("workflow.props.description.placeholder")}
+                          {...field}
+                          value={field.value}
+                          defaultValue={workflow.description}
+                          onChange={(e) => {
+                            form.setValue("description", e.target.value);
+                          }}
+                        />
+                      </FormControl>
+
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <div className="flex justify-end">
+                  <Button type="submit">{t("common.button.save")}</Button>
+                </div>
+              </form>
+            </Form>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};
+
+export default memo(WorkflowNameBaseInfoDialog);

ui/src/components/workflow/WorkflowLog.tsx

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

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

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

@@ -1,157 +0,0 @@
-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,9 +4,6 @@ import { nanoid } from "nanoid";
 import i18n from "@/i18n";
 import { deployTargets } from "./domain";
 
-/**
- * @deprecated
- */
 export type WorkflowRunLog = {
   id: string;
   workflow: string;
@@ -17,9 +14,6 @@ export type WorkflowRunLog = {
   updated: string;
 };
 
-/**
- * @deprecated
- */
 export type WorkflowRunLogItem = {
   nodeName: string;
   error: string;

ui/src/domain/workflowRun.ts

@@ -1,14 +0,0 @@
-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,6 +21,7 @@
     --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.common.json

@@ -3,9 +3,6 @@
   "common.button.cancel": "Cancel",
   "common.button.copy": "Copy",
   "common.button.delete": "Delete",
-  "common.button.disable": "Disable",
-  "common.button.edit": "Edit",
-  "common.button.enable": "Enable",
   "common.button.ok": "Ok",
   "common.button.reset": "Reset",
   "common.button.save": "Save",

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

@@ -9,41 +9,38 @@
   "workflow.action.delete.confirm": "Are you sure to delete this workflow?",
 
   "workflow.props.name": "Name",
+  "workflow.props.name.placeholder": "Please enter name",
+  "workflow.props.name.default": "Unnamed",
   "workflow.props.description": "Description",
+  "workflow.props.description.placeholder": "Please enter description",
   "workflow.props.trigger": "Trigger",
   "workflow.props.trigger.auto": "Auto",
   "workflow.props.trigger.manual": "Manual",
-  "workflow.props.latest_execution_status": "Latest Execution Status",
   "workflow.props.state": "State",
   "workflow.props.state.filter.enabled": "Enabled",
   "workflow.props.state.filter.disabled": "Disabled",
   "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.title": "Workflow",
+  "workflow.detail.history": "History",
   "workflow.detail.action.save": "Save updates",
   "workflow.detail.action.save.failed": "Save failed",
-  "workflow.detail.action.save.failed.uncompleted": "Please complete the orchestration and publish the changes first",
+  "workflow.detail.action.save.failed.uncompleted": "Save failed, please complete all node settings",
   "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.baseinfo.title": "Basic Information",
+
+  "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.common.json

@@ -3,9 +3,6 @@
   "common.button.cancel": "取消",
   "common.button.copy": "复制",
   "common.button.delete": "刪除",
-  "common.button.disable": "禁用",
-  "common.button.edit": "编辑",
-  "common.button.enable": "启用",
   "common.button.ok": "确定",
   "common.button.reset": "重置",
   "common.button.save": "保存",

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

@@ -9,41 +9,38 @@
   "workflow.action.delete.confirm": "确定要删除此工作流吗？",
 
   "workflow.props.name": "名称",
+  "workflow.props.name.placeholder": "请输入名称",
+  "workflow.props.name.default": "未命名工作流",
   "workflow.props.description": "描述",
+  "workflow.props.description.placeholder": "请输入描述",
   "workflow.props.trigger": "触发方式",
   "workflow.props.trigger.auto": "自动",
   "workflow.props.trigger.manual": "手动",
-  "workflow.props.latest_execution_status": "最近执行状态",
   "workflow.props.state": "启用状态",
   "workflow.props.state.filter.enabled": "启用",
   "workflow.props.state.filter.disabled": "未启用",
   "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.title": "流程",
+  "workflow.detail.history": "历史",
   "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/AuthLayout.tsx

@@ -1,6 +1,6 @@
 import { Navigate, Outlet } from "react-router-dom";
 
-import Version from "@/components/ui/Version";
+import Version from "@/components/Version";
 import { getPocketBase } from "@/repository/pocketbase";
 
 const AuthLayout = () => {

ui/src/pages/ConsoleLayout.tsx

@@ -15,7 +15,7 @@ import {
   Workflow as WorkflowIcon,
 } from "lucide-react";
 
-import Version from "@/components/ui/Version";
+import Version from "@/components/Version";
 import { useBrowserTheme } from "@/hooks";
 import { getPocketBase } from "@/repository/pocketbase";
 

ui/src/pages/accesses/AccessList.tsx

@@ -69,38 +69,40 @@ const AccessList = () => {
       fixed: "right",
       width: 120,
       render: (_, record) => (
-        <Button.Group>
-          <AccessEditModal
-            data={record}
-            preset="edit"
-            trigger={
-              <Tooltip title={t("access.action.edit")}>
-                <Button color="primary" icon={<PencilIcon size={16} />} variant="text" />
-              </Tooltip>
-            }
-          />
-
-          <AccessEditModal
-            data={{ ...record, id: undefined, name: `${record.name}-copy` }}
-            preset="add"
-            trigger={
-              <Tooltip title={t("access.action.copy")}>
-                <Button color="primary" icon={<CopyIcon size={16} />} variant="text" />
-              </Tooltip>
-            }
-          />
-
-          <Tooltip title={t("access.action.delete")}>
-            <Button
-              color="danger"
-              icon={<Trash2Icon size={16} />}
-              variant="text"
-              onClick={() => {
-                handleDeleteClick(record);
-              }}
+        <>
+          <Space size={0}>
+            <AccessEditModal
+              data={record}
+              mode="edit"
+              trigger={
+                <Tooltip title={t("access.action.edit")}>
+                  <Button type="link" icon={<PencilIcon size={16} />} />
+                </Tooltip>
+              }
             />
-          </Tooltip>
-        </Button.Group>
+
+            <AccessEditModal
+              data={{ ...record, id: undefined, name: `${record.name}-copy` }}
+              mode="add"
+              trigger={
+                <Tooltip title={t("access.action.copy")}>
+                  <Button type="link" icon={<CopyIcon size={16} />} />
+                </Tooltip>
+              }
+            />
+
+            <Tooltip title={t("access.action.delete")}>
+              <Button
+                type="link"
+                danger={true}
+                icon={<Trash2Icon size={16} />}
+                onClick={() => {
+                  handleDeleteClick(record);
+                }}
+              />
+            </Tooltip>
+          </Space>
+        </>
       ),
     },
   ];
@@ -166,7 +168,7 @@ const AccessList = () => {
         extra={[
           <AccessEditModal
             key="create"
-            preset="add"
+            mode="add"
             trigger={
               <Button type="primary" icon={<PlusIcon size={16} />}>
                 {t("access.action.add")}

ui/src/pages/certificates/CertificateList.tsx

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

ui/src/pages/workflows/WorkflowDetail.tsx

@@ -1,40 +1,46 @@
-import { cloneElement, memo, useEffect, useMemo, useState } from "react";
-import { useParams } from "react-router-dom";
+import { useEffect, useMemo, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import { useDeepCompareEffect } from "ahooks";
-import { Button, Card, Form, Input, message, Modal, notification, Tabs, Typography, type FormInstance } from "antd";
-import { createSchemaFieldRule } from "antd-zod";
-import { PageHeader } from "@ant-design/pro-components";
-import { z } from "zod";
+import { Button, message, notification, Switch } from "antd";
+import { ArrowLeft as ArrowLeftIcon } from "lucide-react";
 
 import Show from "@/components/Show";
 import End from "@/components/workflow/End";
 import NodeRender from "@/components/workflow/NodeRender";
-import WorkflowRuns from "@/components/workflow/run/WorkflowRuns";
+import WorkflowBaseInfoEditDialog from "@/components/workflow/WorkflowBaseInfoEditDialog";
+import WorkflowLog from "@/components/workflow/WorkflowLog";
 import WorkflowProvider from "@/components/workflow/WorkflowProvider";
+import { cn } from "@/components/ui/utils";
 import { useZustandShallowSelector } from "@/hooks";
-import { allNodesValidated, type WorkflowModel, type WorkflowNode } from "@/domain/workflow";
+import { allNodesValidated, WorkflowNode } from "@/domain/workflow";
 import { useWorkflowStore } from "@/stores/workflow";
 import { run as runWorkflow } from "@/api/workflow";
-import { getErrMsg } from "@/utils/error";
 
 const WorkflowDetail = () => {
+  const navigate = useNavigate();
+  const { id } = useParams();
+
   const { t } = useTranslation();
 
   const [messageApi, MessageContextHolder] = message.useMessage();
-  const [notificationApi, NotificationContextHolder] = notification.useNotification();
+  const [_, NotificationContextHolder] = notification.useNotification();
+
+  // 3. 使用正确的选择器和 shallow 比较
+  const { workflow, init, switchEnable, save } = useWorkflowStore(useZustandShallowSelector(["workflow", "init", "switchEnable", "save"]));
+
+  // 从 url 中获取 workflowId
+  const [locId, setLocId] = useState<string>("");
+
+  const [tab, setTab] = useState("workflow");
+
+  const [running, setRunning] = useState(false);
 
-  const { id: workflowId } = useParams();
-  const { workflow, init, setBaseInfo, switchEnable, save } = useWorkflowStore(
-    useZustandShallowSelector(["workflow", "init", "setBaseInfo", "switchEnable", "save"])
-  );
   useEffect(() => {
-    init(workflowId);
-  }, [workflowId]);
-
-  const [tabValue, setTabValue] = useState<"orchestration" | "runs">("orchestration");
-
-  // const [running, setRunning] = useState(false);
+    init(id ?? "");
+    if (id) {
+      setLocId(id);
+    }
+  }, [id]);
 
   const elements = useMemo(() => {
     let current = workflow.draft as WorkflowNode;
@@ -52,213 +58,130 @@ const WorkflowDetail = () => {
     return elements;
   }, [workflow]);
 
-  const handleBaseInfoFormFinish = async (fields: Pick<WorkflowModel, "name" | "description">) => {
-    try {
-      await setBaseInfo(fields.name!, fields.description!);
-    } catch (err) {
-      console.error(err);
-      notificationApi.error({ message: t("common.text.request_error"), description: getErrMsg(err) });
-      return false;
-    }
+  const handleBackClick = () => {
+    // 返回上一步
+    navigate(-1);
   };
 
   const handleEnableChange = () => {
-    if (!workflow.enabled && !allNodesValidated(workflow.content!)) {
+    if (!workflow.enabled && !allNodesValidated(workflow.draft as WorkflowNode)) {
       messageApi.warning(t("workflow.detail.action.save.failed.uncompleted"));
       return;
     }
     switchEnable();
+    if (!locId) {
+      navigate(`/workflows/${workflow.id}`);
+    }
   };
 
-  // const handleWorkflowSaveClick = () => {
-  //   if (!allNodesValidated(workflow.draft as WorkflowNode)) {
-  //     messageApi.warning(t("workflow.detail.action.save.failed.uncompleted"));
-  //     return;
-  //   }
-  //   save();
-  // };
+  const handleWorkflowSaveClick = () => {
+    if (!allNodesValidated(workflow.draft as WorkflowNode)) {
+      messageApi.warning(t("workflow.detail.action.save.failed.uncompleted"));
+      return;
+    }
+    save();
+    if (!locId) {
+      navigate(`/workflows/${workflow.id}`);
+    }
+  };
 
-  // const handleRunClick = async () => {
-  //   if (running) return;
+  const getTabCls = (tabName: string) => {
+    if (tab === tabName) {
+      return "text-primary border-primary";
+    }
+    return "border-transparent hover:text-primary hover:border-b-primary";
+  };
 
-  //   setRunning(true);
-  //   try {
-  //     await runWorkflow(workflow.id as string);
-  //     messageApi.success(t("workflow.detail.action.run.success"));
-  //   } catch (err) {
-  //     console.error(err);
-  //     messageApi.warning(t("workflow.detail.action.run.failed"));
-  //   } finally {
-  //     setRunning(false);
-  //   }
-  // };
+  const handleRunClick = async () => {
+    if (running) {
+      return;
+    }
+    setRunning(true);
+    try {
+      await runWorkflow(workflow.id as string);
+      messageApi.success(t("workflow.detail.action.run.success"));
+    } catch (e) {
+      messageApi.warning(t("workflow.detail.action.run.failed"));
+    }
+    setRunning(false);
+  };
 
   return (
     <div>
       {MessageContextHolder}
       {NotificationContextHolder}
 
-      <Card styles={{ body: { padding: "0.5rem", paddingBottom: 0 } }}>
-        <PageHeader
-          style={{ paddingBottom: 0 }}
-          title={workflow.name}
-          extra={[
-            <Button.Group key="actions">
-              <WorkflowBaseInfoModalForm
-                model={workflow}
-                trigger={
-                  <Button ghost type="primary">
-                    {t("common.button.edit")}
+      <WorkflowProvider>
+        <div className="h-16 sticky  top-0 left-0 z-[1]` shadow-md bg-muted/40 flex justify-between items-center">
+          <div className="px-5 text-stone-700 dark:text-stone-200 flex items-center space-x-2">
+            <ArrowLeftIcon className="cursor-pointer" onClick={handleBackClick} />
+            <WorkflowBaseInfoEditDialog
+              trigger={
+                <div className="flex flex-col space-y-1 cursor-pointer items-start">
+                  <div className="truncate  max-w-[200px]">{workflow.name ? workflow.name : t("workflow.props.name.default")}</div>
+                  <div className="text-sm text-muted-foreground truncate  max-w-[200px]">
+                    {workflow.description ? workflow.description : t("workflow.props.description.placeholder")}
+                  </div>
+                </div>
+              }
+            />
+          </div>
+
+          <div className="flex justify-between space-x-5 text-muted-foreground text-lg h-full">
+            <div
+              className={cn("h-full flex items-center cursor-pointer border-b-2", getTabCls("workflow"))}
+              onClick={() => {
+                setTab("workflow");
+              }}
+            >
+              <div>{t("workflow.detail.title")}</div>
+            </div>
+            <div
+              className={cn("h-full flex items-center cursor-pointer border-b-2", getTabCls("history"))}
+              onClick={() => {
+                setTab("history");
+              }}
+            >
+              <div>{t("workflow.detail.history")}</div>
+            </div>
+          </div>
+
+          <div className="px-5 flex items-center space-x-3">
+            <Show when={!!workflow.enabled}>
+              <Show
+                when={!!workflow.hasDraft}
+                fallback={
+                  <Button type="text" onClick={handleRunClick}>
+                    {running ? t("workflow.detail.action.running") : t("workflow.detail.action.run")}
                   </Button>
                 }
-                onFinish={handleBaseInfoFormFinish}
-              />
-
-              <Button ghost type="primary" onClick={handleEnableChange}>
-                {workflow.enabled ? t("common.button.disable") : t("common.button.enable")}
-              </Button>
-            </Button.Group>,
-          ]}
-        >
-          <Typography.Paragraph type="secondary">{workflow.description}</Typography.Paragraph>
-          <Tabs
-            activeKey={tabValue}
-            defaultActiveKey="orchestration"
-            items={[
-              { key: "orchestration", label: t("workflow.detail.orchestration.tab") },
-              { key: "runs", label: t("workflow.detail.runs.tab") },
-            ]}
-            renderTabBar={(props, DefaultTabBar) => <DefaultTabBar {...props} style={{ margin: 0 }} />}
-            tabBarStyle={{ border: "none" }}
-            onChange={(key) => setTabValue(key as typeof tabValue)}
-          />
-        </PageHeader>
-      </Card>
-
-      <div className="p-4">
-        <Card>
-          <WorkflowProvider>
-            <Show when={tabValue === "orchestration"}>
-              <div className="flex flex-col items-center">{elements}</div>
+              >
+                <Button type="primary" onClick={handleWorkflowSaveClick}>
+                  {t("workflow.detail.action.save")}
+                </Button>
+              </Show>
             </Show>
 
-            <Show when={tabValue === "runs"}>
-              <WorkflowRuns />
-            </Show>
-          </WorkflowProvider>
-        </Card>
-      </div>
+            <Switch checked={workflow.enabled ?? false} onChange={handleEnableChange} />
+          </div>
+        </div>
+
+        <Show when={tab === "workflow"}>
+          <div className="p-4">
+            <div className="flex flex-col items-center p-4 bg-background">{elements}</div>
+          </div>
+        </Show>
+
+        <Show when={!!locId && tab === "history"}>
+          <div className="p-4">
+            <div className="flex flex-col items-center p-4 bg-background">
+              <WorkflowLog />
+            </div>
+          </div>
+        </Show>
+      </WorkflowProvider>
     </div>
   );
 };
 
-const WorkflowBaseInfoModalForm = memo(
-  ({
-    model,
-    trigger,
-    onFinish,
-  }: {
-    model: Pick<WorkflowModel, "name" | "description">;
-    trigger?: React.ReactElement;
-    onFinish?: (fields: Pick<WorkflowModel, "name" | "description">) => Promise<void | boolean>;
-  }) => {
-    const { t } = useTranslation();
-
-    const [open, setOpen] = useState(false);
-
-    const triggerEl = useMemo(() => {
-      if (!trigger) {
-        return null;
-      }
-
-      return cloneElement(trigger, {
-        ...trigger.props,
-        onClick: () => {
-          setOpen(true);
-          trigger.props?.onClick?.();
-        },
-      });
-    }, [trigger, setOpen]);
-
-    const formSchema = z.object({
-      name: z
-        .string({ message: t("workflow.baseinfo.form.name.placeholder") })
-        .trim()
-        .min(1, t("workflow.baseinfo.form.name.placeholder"))
-        .max(64, t("common.errmsg.string_max", { max: 64 })),
-      description: z
-        .string({ message: t("workflow.baseinfo.form.description.placeholder") })
-        .trim()
-        .min(0, t("workflow.baseinfo.form.description.placeholder"))
-        .max(256, t("common.errmsg.string_max", { max: 256 }))
-        .nullish(),
-    });
-    const formRule = createSchemaFieldRule(formSchema);
-    const [form] = Form.useForm<FormInstance<z.infer<typeof formSchema>>>();
-    const [formPending, setFormPending] = useState(false);
-
-    const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model as Partial<z.infer<typeof formSchema>>);
-    useDeepCompareEffect(() => {
-      setInitialValues(model as Partial<z.infer<typeof formSchema>>);
-    }, [model]);
-
-    const handleClickOk = async () => {
-      setFormPending(true);
-      try {
-        await form.validateFields();
-      } catch (err) {
-        setFormPending(false);
-        return Promise.reject();
-      }
-
-      try {
-        const ret = await onFinish?.(form.getFieldsValue(true));
-        if (ret != null && !ret) return;
-
-        setOpen(false);
-      } finally {
-        setFormPending(false);
-      }
-    };
-
-    const handleClickCancel = () => {
-      if (formPending) return Promise.reject();
-
-      setOpen(false);
-    };
-
-    return (
-      <>
-        {triggerEl}
-
-        <Modal
-          afterClose={() => setOpen(false)}
-          cancelButtonProps={{ disabled: formPending }}
-          closable
-          confirmLoading={formPending}
-          destroyOnClose
-          okText={t("common.button.save")}
-          open={open}
-          title={t(`workflow.baseinfo.modal.title`)}
-          width={480}
-          onOk={handleClickOk}
-          onCancel={handleClickCancel}
-        >
-          <div className="pt-4 pb-2">
-            <Form form={form} initialValues={initialValues} layout="vertical">
-              <Form.Item name="name" label={t("workflow.baseinfo.form.name.label")} rules={[formRule]}>
-                <Input placeholder={t("workflow.baseinfo.form.name.placeholder")} />
-              </Form.Item>
-
-              <Form.Item name="description" label={t("workflow.baseinfo.form.description.label")} rules={[formRule]}>
-                <Input placeholder={t("workflow.baseinfo.form.description.placeholder")} />
-              </Form.Item>
-            </Form>
-          </div>
-        </Modal>
-      </>
-    );
-  }
-);
-
 export default WorkflowDetail;

ui/src/pages/workflows/WorkflowList.tsx

@@ -7,7 +7,6 @@ import {
   Divider,
   Empty,
   Menu,
-  message,
   Modal,
   notification,
   Radio,
@@ -25,7 +24,7 @@ import { Filter as FilterIcon, Pencil as PencilIcon, Plus as PlusIcon, Trash2 as
 import dayjs from "dayjs";
 import { ClientResponseError } from "pocketbase";
 
-import { allNodesValidated, type WorkflowModel } from "@/domain/workflow";
+import { WorkflowModel } from "@/domain/workflow";
 import { list as listWorkflow, remove as removeWorkflow, save as saveWorkflow } from "@/repository/workflow";
 import { getErrMsg } from "@/utils/error";
 
@@ -37,7 +36,6 @@ const WorkflowList = () => {
 
   const { token: themeToken } = theme.useToken();
 
-  const [messageApi, MessageContextHolder] = message.useMessage();
   const [modalApi, ModelContextHolder] = Modal.useModal();
   const [notificationApi, NotificationContextHolder] = notification.useNotification();
 
@@ -148,7 +146,7 @@ const WorkflowList = () => {
     },
     {
       key: "lastExecutedAt",
-      title: t("workflow.props.latest_execution_status"),
+      title: "最近执行状态",
       render: () => {
         // TODO: 最近执行状态
         return <>TODO</>;
@@ -176,30 +174,27 @@ const WorkflowList = () => {
       fixed: "right",
       width: 120,
       render: (_, record) => (
-        <Button.Group>
+        <Space size={0}>
           <Tooltip title={t("workflow.action.edit")}>
             <Button
-              color="primary"
+              type="link"
               icon={<PencilIcon size={16} />}
-              variant="text"
               onClick={() => {
                 navigate(`/workflows/${record.id}`);
               }}
             />
           </Tooltip>
-
           <Tooltip title={t("workflow.action.delete")}>
             <Button
-              color="danger"
+              type="link"
               danger={true}
               icon={<Trash2Icon size={16} />}
-              variant="text"
               onClick={() => {
                 handleDeleteClick(record);
               }}
             />
           </Tooltip>
-        </Button.Group>
+        </Space>
       ),
     },
   ];
@@ -242,11 +237,6 @@ const WorkflowList = () => {
 
   const handleEnabledChange = async (workflow: WorkflowModel) => {
     try {
-      if (!workflow.enabled && !allNodesValidated(workflow.content!)) {
-        messageApi.warning(t("workflow.detail.action.save.failed.uncompleted"));
-        return;
-      }
-
       const resp = await saveWorkflow({
         id: workflow.id,
         enabled: !tableData.find((item) => item.id === workflow.id)?.enabled,
@@ -286,12 +276,11 @@ const WorkflowList = () => {
   };
 
   const handleCreateClick = () => {
-    alert("TODO");
+    navigate("/workflows/");
   };
 
   return (
     <div className="p-4">
-      {MessageContextHolder}
       {ModelContextHolder}
       {NotificationContextHolder}
 

ui/src/repository/workflowRunLog.ts

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

ui/src/stores/workflow/index.ts

@@ -59,8 +59,8 @@ export const useWorkflowStore = create<WorkflowState>((set, get) => ({
   setBaseInfo: async (name: string, description: string) => {
     const data: Record<string, string | boolean | WorkflowNode> = {
       id: (get().workflow.id as string) ?? "",
-      name: name || "",
-      description: description || "",
+      name: name,
+      description: description,
     };
     if (!data.id) {
       data.draft = get().workflow.draft as WorkflowNode;

ui/tailwind.config.js

@@ -44,6 +44,11 @@ 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")],