BLD-ERPAuto/BIPMaterialManager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: improve UI layout and styling

Browse Source 
- 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
This commit is contained in:
Misaka_Company
2026-03-04 16:06:00 +08:00
parent dc3d577f6f
commit 29cb79abfd
4 changed files with 27 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/main/index.ts
View File

@@ -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,

4
src/renderer/src/components/OrderNumberInput.tsx
View File

@@ -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>

53
src/renderer/src/pages/ExtractorPage.tsx
View File

@@ -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">

12
src/renderer/src/pages/SettingsPage.tsx
View File

@@ -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}