refactor(ui): clean code

This commit is contained in:
Fu Diwei 2025-01-02 10:28:18 +08:00
parent 7f36621882
commit 1588179bc9
12 changed files with 40 additions and 24 deletions

View File

@ -20,6 +20,7 @@ module.exports = {
parser: "@typescript-eslint/parser", parser: "@typescript-eslint/parser",
plugins: ["react-refresh"], plugins: ["react-refresh"],
rules: { rules: {
"@typescript-eslint/consistent-type-imports": "error",
"@typescript-eslint/no-explicit-any": [ "@typescript-eslint/no-explicit-any": [
"warn", "warn",
{ {

View File

@ -1,5 +1,3 @@
import React from "react";
export type ShowProps = { export type ShowProps = {
when: boolean; when: boolean;
children: React.ReactNode; children: React.ReactNode;

View File

@ -4,7 +4,7 @@ import { Button, Drawer, Form, Space, type DrawerProps, type FormProps, type Mod
import { useAntdForm, useTriggerElement } from "@/hooks"; import { useAntdForm, useTriggerElement } from "@/hooks";
export interface DrawerFormProps<T extends NonNullable<unknown> = any> extends Omit<FormProps<T>, "title" | "onFinish"> { export interface DrawerFormProps<T extends NonNullable<unknown> = NonNullable<unknown>> extends Omit<FormProps<T>, "title" | "onFinish"> {
className?: string; className?: string;
style?: React.CSSProperties; style?: React.CSSProperties;
children?: React.ReactNode; children?: React.ReactNode;
@ -22,7 +22,7 @@ export interface DrawerFormProps<T extends NonNullable<unknown> = any> extends O
onFinish?: (values: T) => void | Promise<unknown>; onFinish?: (values: T) => void | Promise<unknown>;
} }
const DrawerForm = <T extends NonNullable<unknown> = any>({ const DrawerForm = <T extends NonNullable<unknown> = NonNullable<unknown>>({
className, className,
style, style,
children, children,

View File

@ -3,7 +3,7 @@ import { Form, Modal, type FormProps, type ModalProps } from "antd";
import { useAntdForm, useTriggerElement } from "@/hooks"; import { useAntdForm, useTriggerElement } from "@/hooks";
export interface ModalFormProps<T extends NonNullable<unknown> = any> extends Omit<FormProps<T>, "title" | "onFinish"> { export interface ModalFormProps<T extends NonNullable<unknown> = NonNullable<unknown>> extends Omit<FormProps<T>, "title" | "onFinish"> {
className?: string; className?: string;
style?: React.CSSProperties; style?: React.CSSProperties;
children?: React.ReactNode; children?: React.ReactNode;
@ -35,7 +35,7 @@ export interface ModalFormProps<T extends NonNullable<unknown> = any> extends Om
onFinish?: (values: T) => void | Promise<unknown>; onFinish?: (values: T) => void | Promise<unknown>;
} }
const ModalForm = <T extends NonNullable<unknown> = any>({ const ModalForm = <T extends NonNullable<unknown> = NonNullable<unknown>>({
className, className,
style, style,
children, children,

View File

@ -1,7 +1,7 @@
import { PlusOutlined as PlusOutlinedIcon } from "@ant-design/icons"; import { PlusOutlined as PlusOutlinedIcon } from "@ant-design/icons";
import { Dropdown } from "antd"; import { Dropdown } from "antd";
import { newWorkflowNode, workflowNodeDropdownList, WorkflowNodeType } from "@/domain/workflow"; import { newWorkflowNode, workflowNodeDropdownList, type WorkflowNodeType } from "@/domain/workflow";
import { useZustandShallowSelector } from "@/hooks"; import { useZustandShallowSelector } from "@/hooks";
import { useWorkflowStore } from "@/stores/workflow"; import { useWorkflowStore } from "@/stores/workflow";

View File

@ -1,12 +1,12 @@
import { memo } from "react"; import { memo } from "react";
import { WorkflowBranchNode, WorkflowNode, WorkflowNodeType } from "@/domain/workflow"; import { type WorkflowBranchNode, type WorkflowNode, WorkflowNodeType } from "@/domain/workflow";
import BranchNode from "./BranchNode"; import BranchNode from "./BranchNode";
import ConditionNode from "./ConditionNode"; import ConditionNode from "./ConditionNode";
import End from "./End"; import End from "./End";
import Node from "./Node"; import Node from "./Node";
import { NodeProps } from "./types"; import { type NodeProps } from "./types";
const NodeRender = memo(({ data, branchId, branchIndex }: NodeProps) => { const NodeRender = memo(({ data, branchId, branchIndex }: NodeProps) => {
const render = () => { const render = () => {

View File

@ -1,4 +1,4 @@
import { WorkflowNode, WorkflowNodeType } from "@/domain/workflow"; import { type WorkflowNode, WorkflowNodeType } from "@/domain/workflow";
import DeployPanelBody from "./DeployPanelBody"; import DeployPanelBody from "./DeployPanelBody";
import ApplyNodeForm from "./node/ApplyNodeForm"; import ApplyNodeForm from "./node/ApplyNodeForm";

View File

@ -2,17 +2,17 @@
import { useDeepCompareEffect } from "ahooks"; import { useDeepCompareEffect } from "ahooks";
import { Form, type FormInstance, type FormProps } from "antd"; import { Form, type FormInstance, type FormProps } from "antd";
export interface UseAntdFormOptions<T extends NonNullable<unknown> = any> { export interface UseAntdFormOptions<T extends NonNullable<unknown> = NonNullable<unknown>> {
form?: FormInstance<T>; form?: FormInstance<T>;
initialValues?: Partial<T> | (() => Partial<T> | Promise<Partial<T>>); initialValues?: Partial<T> | (() => Partial<T> | Promise<Partial<T>>);
onSubmit?: (values: T) => any; onSubmit?: (values: T) => unknown;
} }
export interface UseAntdFormReturns<T extends NonNullable<unknown> = any> { export interface UseAntdFormReturns<T extends NonNullable<unknown> = NonNullable<unknown>> {
form: FormInstance<T>; form: FormInstance<T>;
formProps: Omit<FormProps<T>, "children">; formProps: Omit<FormProps<T>, "children">;
formPending: boolean; formPending: boolean;
submit: (values?: T) => Promise<any>; submit: (values?: T) => Promise<unknown>;
} }
/** /**
@ -20,7 +20,11 @@ export interface UseAntdFormReturns<T extends NonNullable<unknown> = any> {
* @param {UseAntdFormOptions} options * @param {UseAntdFormOptions} options
* @returns {UseAntdFormReturns} * @returns {UseAntdFormReturns}
*/ */
const useAntdForm = <T extends NonNullable<unknown> = any>({ initialValues, form, onSubmit }: UseAntdFormOptions<T>): UseAntdFormReturns<T> => { const useAntdForm = <T extends NonNullable<unknown> = NonNullable<unknown>>({
initialValues,
form,
onSubmit,
}: UseAntdFormOptions<T>): UseAntdFormReturns<T> => {
const formInst = form ?? Form["useForm"]()[0]; const formInst = form ?? Form["useForm"]()[0];
const [formInitialValues, setFormInitialValues] = useState<Partial<T>>(); const [formInitialValues, setFormInitialValues] = useState<Partial<T>>();
const [formPending, setFormPending] = useState(false); const [formPending, setFormPending] = useState(false);

View File

@ -1,4 +1,4 @@
import { Resource } from "i18next"; import { type Resource } from "i18next";
import en from "./en"; import en from "./en";
import zh from "./zh"; import zh from "./zh";

View File

@ -9,7 +9,7 @@ import dayjs from "dayjs";
import { ClientResponseError } from "pocketbase"; import { ClientResponseError } from "pocketbase";
import CertificateDetailDrawer from "@/components/certificate/CertificateDetailDrawer"; import CertificateDetailDrawer from "@/components/certificate/CertificateDetailDrawer";
import { CertificateModel } from "@/domain/certificate"; import { type CertificateModel } from "@/domain/certificate";
import { list as listCertificate, type ListCertificateRequest } from "@/repository/certificate"; import { list as listCertificate, type ListCertificateRequest } from "@/repository/certificate";
import { getErrMsg } from "@/utils/error"; import { getErrMsg } from "@/utils/error";

View File

@ -2,9 +2,11 @@ import { useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useNavigate, useParams } from "react-router-dom"; import { useNavigate, useParams } from "react-router-dom";
import { import {
ApartmentOutlined as ApartmentOutlinedIcon,
CaretRightOutlined as CaretRightOutlinedIcon, CaretRightOutlined as CaretRightOutlinedIcon,
DeleteOutlined as DeleteOutlinedIcon, DeleteOutlined as DeleteOutlinedIcon,
EllipsisOutlined as EllipsisOutlinedIcon, EllipsisOutlined as EllipsisOutlinedIcon,
HistoryOutlined as HistoryOutlinedIcon,
UndoOutlined as UndoOutlinedIcon, UndoOutlined as UndoOutlinedIcon,
} from "@ant-design/icons"; } from "@ant-design/icons";
import { PageHeader } from "@ant-design/pro-components"; import { PageHeader } from "@ant-design/pro-components";
@ -121,9 +123,20 @@ const WorkflowDetail = () => {
return; return;
} }
save(); modalApi.confirm({
title: t("workflow.action.release"),
content: t("workflow.action.release.confirm"),
onOk: async () => {
try {
await save();
messageApi.success(t("common.text.operation_succeeded")); messageApi.success(t("common.text.operation_succeeded"));
} catch (err) {
console.error(err);
notificationApi.error({ message: t("common.text.request_error"), description: getErrMsg(err) });
}
},
});
}; };
const handleRunClick = () => { const handleRunClick = () => {
@ -207,8 +220,8 @@ const WorkflowDetail = () => {
activeKey={tabValue} activeKey={tabValue}
defaultActiveKey="orchestration" defaultActiveKey="orchestration"
items={[ items={[
{ key: "orchestration", label: t("workflow.detail.orchestration.tab") }, { key: "orchestration", label: t("workflow.detail.orchestration.tab"), icon: <ApartmentOutlinedIcon /> },
{ key: "runs", label: t("workflow.detail.runs.tab") }, { key: "runs", label: t("workflow.detail.runs.tab"), icon: <HistoryOutlinedIcon /> },
]} ]}
renderTabBar={(props, DefaultTabBar) => <DefaultTabBar {...props} style={{ margin: 0 }} />} renderTabBar={(props, DefaultTabBar) => <DefaultTabBar {...props} style={{ margin: 0 }} />}
tabBarStyle={{ border: "none" }} tabBarStyle={{ border: "none" }}

View File

@ -9,9 +9,9 @@ import {
removeBranch, removeBranch,
removeNode, removeNode,
updateNode, updateNode,
WorkflowBranchNode, type WorkflowBranchNode,
WorkflowModel, type WorkflowModel,
WorkflowNode, type WorkflowNode,
WorkflowNodeType, WorkflowNodeType,
} from "@/domain/workflow"; } from "@/domain/workflow";
import { get as getWorkflow, save as saveWorkflow } from "@/repository/workflow"; import { get as getWorkflow, save as saveWorkflow } from "@/repository/workflow";