From 29cb79abfd80c1b759be97bd238b682c76187afa Mon Sep 17 00:00:00 2001
From: Misaka_Company <pengqiangqiang0@gmail.com>
Date: Wed, 4 Mar 2026 16:06:00 +0800
Subject: [PATCH] style: improve UI layout and styling

- Increase default window width from 900 to 1200
- Beautify clear button in OrderNumberInput with icon and hover effects
- Simplify ExtractorPage layout by removing collapsible sidebar
- Center settings form controls horizontally in SettingsPage
---
 src/main/index.ts                             |  2 +-
 .../src/components/OrderNumberInput.tsx       |  4 +-
 src/renderer/src/pages/ExtractorPage.tsx      | 53 ++++++-------------
 src/renderer/src/pages/SettingsPage.tsx       | 12 ++---
 4 files changed, 27 insertions(+), 44 deletions(-)

diff --git a/src/main/index.ts b/src/main/index.ts
index 464db75..653dfd0 100644
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -15,7 +15,7 @@ dotenv.config({ path: resolve(__dirname, '../../.env') })
 function createWindow(): void {
   // Create the browser window.
   const mainWindow = new BrowserWindow({
-    width: 900,
+    width: 1200,
     height: 670,
     show: false,
     autoHideMenuBar: true,
diff --git a/src/renderer/src/components/OrderNumberInput.tsx b/src/renderer/src/components/OrderNumberInput.tsx
index ec243a9..74a90c8 100644
--- a/src/renderer/src/components/OrderNumberInput.tsx
+++ b/src/renderer/src/components/OrderNumberInput.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { X } from 'lucide-react'
 
 interface OrderNumberInputProps {
   value: string
@@ -114,8 +115,9 @@ const OrderNumberInput: React.FC<OrderNumberInputProps> = ({
           <button
             onClick={onReset}
             disabled={disabled}
-            className="text-xs text-slate-400 hover:text-slate-600 disabled:opacity-50 disabled:cursor-not-allowed"
+            className="flex items-center gap-1 px-3 py-1.5 text-xs text-slate-500 hover:text-red-600 hover:bg-red-50 rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
           >
+            <X size={14} />
             清空
           </button>
         </div>
diff --git a/src/renderer/src/pages/ExtractorPage.tsx b/src/renderer/src/pages/ExtractorPage.tsx
index 821c9b5..fdb840b 100644
--- a/src/renderer/src/pages/ExtractorPage.tsx
+++ b/src/renderer/src/pages/ExtractorPage.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react'
-import { Download, Play, Terminal, PanelLeftClose, PanelLeft } from 'lucide-react'
+import { Download, Play, Terminal } from 'lucide-react'
 import OrderNumberInput from '../components/OrderNumberInput'
 
 interface ExtractorProgress {
@@ -38,7 +38,6 @@ const ExtractorPage: React.FC = () => {
   const [progress, setProgress] = useState<ExtractorProgress | null>(null)
   const [error, setError] = useState<string | null>(null)
   const [logs, setLogs] = useState<LogEntry[]>([])
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
   const logsEndRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
@@ -124,40 +123,22 @@ const ExtractorPage: React.FC = () => {
 
   return (
     <div className="flex h-full gap-4 relative">
-      {!sidebarCollapsed && (
-        <aside className="w-80 flex-shrink-0 bg-white border border-slate-200 flex flex-col shadow-sm rounded-xl overflow-hidden h-full animate-in slide-in-from-left duration-300">
-          <div className="p-4 border-b border-slate-100">
-            <h3 className="text-sm font-semibold text-slate-800">订单号输入</h3>
-            <p className="text-xs text-slate-500 mt-1">
-              数据将在"数据提取"与"物料清理"模块间自动共享
-            </p>
-          </div>
-          <div className="flex-1 flex flex-col p-4 min-h-0">
-            <OrderNumberInput
-              value={orderNumbers}
-              onChange={setOrderNumbers}
-              label=""
-              enableFormatStats={true}
-              disabled={isRunning}
-              showReset={true}
-              onReset={handleReset}
-            />
-          </div>
-        </aside>
-      )}
-
-      <button
-        onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
-        className="absolute left-0 top-1/2 -translate-y-1/2 z-20 bg-white border border-slate-200 rounded-r-lg p-1.5 shadow-sm hover:bg-slate-50 transition-colors"
-        style={{ left: sidebarCollapsed ? 0 : '320px' }}
-        title={sidebarCollapsed ? '展开侧栏' : '收起侧栏'}
-      >
-        {sidebarCollapsed ? (
-          <PanelLeft size={18} className="text-slate-600" />
-        ) : (
-          <PanelLeftClose size={18} className="text-slate-600" />
-        )}
-      </button>
+      <aside className="w-80 flex-shrink-0 bg-white border border-slate-200 flex flex-col shadow-sm rounded-xl overflow-hidden h-full">
+        <div className="p-4 border-b border-slate-100">
+          <h3 className="text-sm font-semibold text-slate-800">订单号输入</h3>
+        </div>
+        <div className="flex-1 flex flex-col p-4 min-h-0">
+          <OrderNumberInput
+            value={orderNumbers}
+            onChange={setOrderNumbers}
+            label=""
+            enableFormatStats={true}
+            disabled={isRunning}
+            showReset={true}
+            onReset={handleReset}
+          />
+        </div>
+      </aside>
 
       <div className="flex-1 min-w-0 flex flex-col gap-4 animate-in fade-in slide-in-from-bottom-4 duration-500">
         <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-5 flex items-center justify-between">
diff --git a/src/renderer/src/pages/SettingsPage.tsx b/src/renderer/src/pages/SettingsPage.tsx
index d0b014f..77eb600 100644
--- a/src/renderer/src/pages/SettingsPage.tsx
+++ b/src/renderer/src/pages/SettingsPage.tsx
@@ -94,7 +94,7 @@ const SettingsPage: React.FC = () => {
   }
 
   return (
-    <div className="max-w-2xl mx-auto animate-in fade-in slide-in-from-bottom-4 duration-500 mt-6">
+    <div className="flex justify-center animate-in fade-in slide-in-from-bottom-4 duration-500 mt-6">
       {message && (
         <div
           className={`fixed top-5 left-1/2 -translate-x-1/2 px-6 py-3 rounded-lg shadow-lg z-[10000] text-sm font-medium transition-all ${message.type === 'success' ? 'bg-emerald-50 text-emerald-600 border border-emerald-200' : 'bg-red-50 text-red-600 border border-red-200'}`}
@@ -103,7 +103,7 @@ const SettingsPage: React.FC = () => {
         </div>
       )}
 
-      <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
+      <div className="w-full max-w-xl bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
         <div className="border-b border-slate-100 bg-slate-50 px-6 py-5">
           <h2 className="text-lg font-semibold flex items-center gap-2 text-slate-800">
             <SettingsIcon size={20} className="text-slate-600" />
@@ -114,8 +114,8 @@ const SettingsPage: React.FC = () => {
           </p>
         </div>
 
-        <div className="p-6 space-y-6 bg-white">
-          <div>
+        <div className="p-6 space-y-6 bg-white flex flex-col items-center">
+          <div className="w-full max-w-md">
             <label className="block text-sm font-medium text-slate-700 mb-1.5">
               ERP 基础访问地址 (URL)
             </label>
@@ -128,7 +128,7 @@ const SettingsPage: React.FC = () => {
             />
           </div>
 
-          <div className="grid grid-cols-2 gap-5">
+          <div className="w-full max-w-md grid grid-cols-2 gap-5">
             <div>
               <label className="block text-sm font-medium text-slate-700 mb-1.5">
                 登录账号 (Username)
@@ -155,7 +155,7 @@ const SettingsPage: React.FC = () => {
             </div>
           </div>
 
-          <div className="pt-6 mt-2 border-t border-slate-100 flex justify-end">
+          <div className="w-full max-w-md pt-6 mt-2 border-t border-slate-100 flex justify-center">
             <button
               className="bg-blue-600 hover:bg-blue-700 disabled:opacity-50 disabled:hover:bg-blue-600 text-white px-8 py-2.5 rounded-lg flex items-center gap-2 font-medium shadow-sm transition-colors"
               onClick={handleSaveSettings}