From bd3e592598165ba74bccc72e5140046000caf2d7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=90=91=E5=AE=81?= <1772105645@qq.com> Date: Sun, 25 Oct 2026 17:05:46 +0800 Subject: [PATCH] fix: hoist status badge components to module level Inline badge components captured the styles object on every render, tripping noComponentHookFactories; move them out and pass styles as a prop. Also autofix useMathMinMax and unused-variable findings. --- src/components/AvatarList/index.tsx | 2 +- src/pages/Button/index.tsx | 30 +++++---- src/pages/FormList/index.tsx | 52 ++++++++------- src/pages/Function/index.tsx | 48 +++++++------ src/pages/Knowledge/index.tsx | 2 +- src/pages/Workflow/index.tsx | 100 +++++++++++++++------------- src/pages/user/register/index.tsx | 2 +- 7 files changed, 127 insertions(+), 109 deletions(-) diff --git a/src/components/AvatarList/index.tsx b/src/components/AvatarList/index.tsx index 36f3b33..abbbe7c 100644 --- a/src/components/AvatarList/index.tsx +++ b/src/components/AvatarList/index.tsx @@ -73,7 +73,7 @@ const AvatarList: React.FC & { } = ({ children, size, maxLength = 5, excessItemsStyle, ...other }) => { const { styles } = useStyles(); const numOfChildren = React.Children.count(children); - const numToShow = maxLength >= numOfChildren ? numOfChildren : maxLength; + const numToShow = Math.min(maxLength, numOfChildren); const childrenArray = React.Children.toArray( children, ) as React.ReactElement[]; diff --git a/src/pages/Button/index.tsx b/src/pages/Button/index.tsx index 4bf880c..8ed0870 100644 --- a/src/pages/Button/index.tsx +++ b/src/pages/Button/index.tsx @@ -348,6 +348,22 @@ const STATUS_TEXT: Record = { draft: '草稿', }; +type PageStyles = ReturnType['styles']; +const StatusBadge: React.FC<{ status: number; styles: PageStyles }> = ({ + status, + styles, +}) => { + const s = STATUS_MAP[status] ?? 'draft'; + const cls = s === 'published' ? styles.badgeSuccess : styles.badgeWarning; + const dot = s === 'published' ? BF.green500 : BF.amber500; + return ( + + + {STATUS_TEXT[s]} + + ); +}; + const fmtTime = (ts?: number) => ts ? dayjs(ts).format('YYYY-MM-DD HH:mm') : '—'; @@ -393,18 +409,6 @@ const ButtonPage: React.FC = () => { }); }, [allButtons, activeTab, search]); - const StatusBadge: React.FC<{ status: number }> = ({ status }) => { - const s = STATUS_MAP[status] ?? 'draft'; - const cls = s === 'published' ? styles.badgeSuccess : styles.badgeWarning; - const dot = s === 'published' ? BF.green500 : BF.amber500; - return ( - - - {STATUS_TEXT[s]} - - ); - }; - const [createOpen, setCreateOpen] = useState(false); const openCreate = () => setCreateOpen(true); @@ -493,7 +497,7 @@ const ButtonPage: React.FC = () => { ) : null}
- +
{fmtTime(b.createdAt)} diff --git a/src/pages/FormList/index.tsx b/src/pages/FormList/index.tsx index f0d421d..bd569a9 100644 --- a/src/pages/FormList/index.tsx +++ b/src/pages/FormList/index.tsx @@ -461,6 +461,32 @@ const STATUS_TEXT: Record = { draft: '草稿', }; +type PageStyles = ReturnType['styles']; +const StatusBadge: React.FC<{ status: number; styles: PageStyles }> = ({ + status, + styles, +}) => { + const s = STATUS_MAP[status] ?? 'draft'; + const cls = + s === 'published' + ? styles.badgeSuccess + : s === 'disabled' + ? styles.badgeDanger + : styles.badgeWarning; + const dotColor = + s === 'published' + ? BF.green500 + : s === 'disabled' + ? BF.red500 + : BF.amber500; + return ( + + + {STATUS_TEXT[s]} + + ); +}; + const fmtTime = (ts?: number) => ts ? dayjs(ts).format('YYYY-MM-DD HH:mm') : '—'; @@ -519,28 +545,6 @@ const FormList: React.FC = () => { }); }, [allForms, activeTab, search]); - const StatusBadge: React.FC<{ status: number }> = ({ status }) => { - const s = STATUS_MAP[status] ?? 'draft'; - const cls = - s === 'published' - ? styles.badgeSuccess - : s === 'disabled' - ? styles.badgeDanger - : styles.badgeWarning; - const dotColor = - s === 'published' - ? BF.green500 - : s === 'disabled' - ? BF.red500 - : BF.amber500; - return ( - - - {STATUS_TEXT[s]} - - ); - }; - const toggleSelect = (key: string) => { setSelectedKeys((prev) => { const next = new Set(prev); @@ -689,7 +693,7 @@ const FormList: React.FC = () => { {f.version != null ? `v${f.version}` : '—'} - +
@@ -760,7 +764,7 @@ const FormList: React.FC = () => {
- +
{st !== 'published' && ( diff --git a/src/pages/Function/index.tsx b/src/pages/Function/index.tsx index 29227b1..efda9ba 100644 --- a/src/pages/Function/index.tsx +++ b/src/pages/Function/index.tsx @@ -408,6 +408,31 @@ const STATUS_TEXT: Record = { disabled: '已停用', }; +type PageStyles = ReturnType['styles']; +const StatusBadge: React.FC<{ status: FnStatus; styles: PageStyles }> = ({ + status, + styles, +}) => { + const cls = + status === 'enabled' + ? styles.badgeSuccess + : status === 'draft' + ? styles.badgeWarning + : styles.badgeDanger; + const dot = + status === 'enabled' + ? BF.green600 + : status === 'draft' + ? BF.amber500 + : BF.red500; + return ( + + + {STATUS_TEXT[status]} + + ); +}; + /** 从 Code 字符串提取一个简短的首行预览，避免整段代码塞进列表。 */ function codePreview(code: string): string { if (!code) return ''; @@ -482,27 +507,6 @@ const FunctionPage: React.FC = () => { }); }, [allItems, activeTab, search]); - const StatusBadge: React.FC<{ status: FnStatus }> = ({ status }) => { - const cls = - status === 'enabled' - ? styles.badgeSuccess - : status === 'draft' - ? styles.badgeWarning - : styles.badgeDanger; - const dot = - status === 'enabled' - ? BF.green600 - : status === 'draft' - ? BF.amber500 - : BF.red500; - return ( - - - {STATUS_TEXT[status]} - - ); - }; - /* ---- 新建函数弹窗 ---- */ const [createOpen, setCreateOpen] = useState(false); const [createForm] = Form.useForm<{ @@ -699,7 +703,7 @@ const FunctionPage: React.FC = () => { {r.returns}
- +
)); diff --git a/src/pages/Knowledge/index.tsx b/src/pages/Knowledge/index.tsx index 8526367..b5e8ebc 100644 --- a/src/pages/Knowledge/index.tsx +++ b/src/pages/Knowledge/index.tsx @@ -370,7 +370,7 @@ const Knowledge: React.FC = () => { }); }, [editing, editForm]); - const openEdit = (kb: KbDto) => setEditing(kb); + const _openEdit = (kb: KbDto) => setEditing(kb); const closeEdit = () => { if (editSaving) return; diff --git a/src/pages/Workflow/index.tsx b/src/pages/Workflow/index.tsx index be61af3..d3514a7 100644 --- a/src/pages/Workflow/index.tsx +++ b/src/pages/Workflow/index.tsx @@ -380,6 +380,57 @@ const INST_STATUS_TEXT: Record = { terminated: '已终止', }; +type PageStyles = ReturnType['styles']; +const DefStatusBadge: React.FC<{ status: number; styles: PageStyles }> = ({ + status, + styles, +}) => { + const s = DEF_STATUS_MAP[status] ?? 'draft'; + const cls = + s === 'published' + ? styles.badgeSuccess + : s === 'disabled' + ? styles.badgeDanger + : styles.badgeWarning; + const dot = + s === 'published' + ? BF.green500 + : s === 'disabled' + ? BF.red500 + : BF.amber500; + return ( + + + {DEF_STATUS_TEXT[s]} + + ); +}; + +const InstStatusBadge: React.FC<{ status: number; styles: PageStyles }> = ({ + status, + styles, +}) => { + const s = INST_STATUS_MAP[status] ?? 'pending'; + let cls = styles.badgeNeutral; + let dot: string = BF.gray400; + if (s === 'running' || s === 'completed') { + cls = styles.badgeSuccess; + dot = BF.green500; + } else if (s === 'waiting' || s === 'suspended') { + cls = styles.badgeWarning; + dot = BF.amber500; + } else if (s === 'failed') { + cls = styles.badgeDanger; + dot = BF.red500; + } + return ( + + + {INST_STATUS_TEXT[s]} + + ); +}; + const fmtTime = (ts?: number) => ts ? dayjs(ts).format('YYYY-MM-DD HH:mm') : '—'; @@ -499,51 +550,6 @@ const Workflow: React.FC = () => { }); }, [instList, activeTab, search]); - /* ---- badges ---- */ - const DefStatusBadge: React.FC<{ status: number }> = ({ status }) => { - const s = DEF_STATUS_MAP[status] ?? 'draft'; - const cls = - s === 'published' - ? styles.badgeSuccess - : s === 'disabled' - ? styles.badgeDanger - : styles.badgeWarning; - const dot = - s === 'published' - ? BF.green500 - : s === 'disabled' - ? BF.red500 - : BF.amber500; - return ( - - - {DEF_STATUS_TEXT[s]} - - ); - }; - - const InstStatusBadge: React.FC<{ status: number }> = ({ status }) => { - const s = INST_STATUS_MAP[status] ?? 'pending'; - let cls = styles.badgeNeutral; - let dot: string = BF.gray400; - if (s === 'running' || s === 'completed') { - cls = styles.badgeSuccess; - dot = BF.green500; - } else if (s === 'waiting' || s === 'suspended') { - cls = styles.badgeWarning; - dot = BF.amber500; - } else if (s === 'failed') { - cls = styles.badgeDanger; - dot = BF.red500; - } - return ( - - - {INST_STATUS_TEXT[s]} - - ); - }; - /* ---- actions ---- */ const navigate = useNavigate(); const [createOpen, setCreateOpen] = useState(false); @@ -727,7 +733,7 @@ const Workflow: React.FC = () => {
{i.definitionName || '—'}
- +
{i.currentTask || '—'} @@ -801,7 +807,7 @@ const Workflow: React.FC = () => { ) : null}
- +
{d.version != null ? `v${d.version}` : '—'} diff --git a/src/pages/user/register/index.tsx b/src/pages/user/register/index.tsx index de1fde9..e76a6dc 100644 --- a/src/pages/user/register/index.tsx +++ b/src/pages/user/register/index.tsx @@ -149,7 +149,7 @@ const Register: FC = () => { 100 ? 100 : value.length * 10} + percent={Math.min(value.length * 10, 100)} showInfo={false} />