From cb2a5a84b20e76011ffcb63f2ceb5d9aebea8e7d Mon Sep 17 00:00:00 2001 From: Misaka Date: Sun, 1 Mar 2026 15:50:13 +0800 Subject: [PATCH] feat: implement CleanerPage UI with MaterialCodeInput component - Add MaterialCodeInput component for entering material codes - Create CleanerPage with dry-run mode support - Add Cleaner page navigation in App.tsx - Update CleanerAPI type to return response wrapper --- src/main/types/ipc-api.types.ts | 4 +- src/renderer/src/App.tsx | 14 + .../src/components/MaterialCodeInput.tsx | 92 ++++ src/renderer/src/pages/CleanerPage.tsx | 442 ++++++++++++++++++ tsconfig.web.tsbuildinfo | 2 +- 5 files changed, 552 insertions(+), 2 deletions(-) create mode 100644 src/renderer/src/components/MaterialCodeInput.tsx create mode 100644 src/renderer/src/pages/CleanerPage.tsx diff --git a/src/main/types/ipc-api.types.ts b/src/main/types/ipc-api.types.ts index 4af8f5d..737ca46 100644 --- a/src/main/types/ipc-api.types.ts +++ b/src/main/types/ipc-api.types.ts @@ -101,7 +101,9 @@ export interface CleanerAPI { * Run ERP cleaner service * @param input - Cleaner input parameters */ - runCleaner: (input: CleanerInput) => Promise + runCleaner: ( + input: CleanerInput + ) => Promise<{ success: boolean; data?: CleanerResult; error?: string }> } /** diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx index 6ae441b..4ddd417 100644 --- a/src/renderer/src/App.tsx +++ b/src/renderer/src/App.tsx @@ -1,6 +1,7 @@ import { useState } from 'react' import Versions from './components/Versions' import { ExtractorPage } from './pages/ExtractorPage' +import { CleanerPage } from './pages/CleanerPage' import electronLogo from './assets/electron.svg' type Page = 'home' | 'extractor' | 'cleaner' @@ -12,6 +13,8 @@ function App(): React.JSX.Element { switch (currentPage) { case 'extractor': return + case 'cleaner': + return default: return ( <> @@ -36,6 +39,17 @@ function App(): React.JSX.Element { 数据提取 +
+ { + e.preventDefault() + setCurrentPage('cleaner') + }} + > + 物料清理 + +
Documentation diff --git a/src/renderer/src/components/MaterialCodeInput.tsx b/src/renderer/src/components/MaterialCodeInput.tsx new file mode 100644 index 0000000..1b9a23c --- /dev/null +++ b/src/renderer/src/components/MaterialCodeInput.tsx @@ -0,0 +1,92 @@ +import React, { useState, useEffect } from 'react' + +interface MaterialCodeInputProps { + value: string + onChange: (value: string) => void + placeholder?: string + label?: string +} + +/** + * MaterialCodeInput - A textarea component for entering line-separated material codes + * Displays a count of valid material codes entered + */ +export const MaterialCodeInput: React.FC = ({ + value, + onChange, + placeholder = '请输入物料代码，每行一个', + label = '物料代码列表' +}) => { + const [count, setCount] = useState(0) + + useEffect(() => { + // Count non-empty lines + const lines = value.split('\n').filter((line) => line.trim().length > 0) + setCount(lines.length) + }, [value]) + + const handleChange = (e: React.ChangeEvent) => { + onChange(e.target.value) + } + + return ( +
+
+ + {count} 个物料代码 +
+