mirror of
https://github.com/usual2970/certimate.git
synced 2025-06-09 05:59:50 +00:00
refactor(ui): clean code
This commit is contained in:
parent
7f36621882
commit
1588179bc9
@ -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",
|
||||||
{
|
{
|
||||||
|
@ -1,5 +1,3 @@
|
|||||||
import React from "react";
|
|
||||||
|
|
||||||
export type ShowProps = {
|
export type ShowProps = {
|
||||||
when: boolean;
|
when: boolean;
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
|
@ -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,
|
||||||
|
@ -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,
|
||||||
|
@ -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";
|
||||||
|
|
||||||
|
@ -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 = () => {
|
||||||
|
@ -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";
|
||||||
|
@ -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);
|
||||||
|
@ -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";
|
||||||
|
@ -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";
|
||||||
|
|
||||||
|
@ -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" }}
|
||||||
|
@ -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";
|
||||||
|
Loading…
x
Reference in New Issue
Block a user