GoogleAIBuilder/JBD_BMS_Tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor UI to light theme, move controls to header, and add collapsible sidebar

Browse Source
This commit is contained in:
tindevil
2025-12-21 21:44:16 +09:00
parent 78343d2b9a
commit c3ae845ac9
4 changed files with 353 additions and 363 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
components/Settings.tsx
View File

@@ -163,9 +163,9 @@ const Settings: React.FC = () => {
// 그룹 컴포넌트
const Group: React.FC<{ title: string, children: React.ReactNode }> = ({ title, children }) => (
<div className="bg-gray-900 rounded-xl border border-gray-800 shadow-xl overflow-hidden mb-6">
<div className="bg-gray-800/50 px-5 py-3 border-b border-gray-700">
<h3 className="text-lg font-bold text-gray-200 flex items-center gap-2">
<div className="bg-white rounded-xl border border-gray-200 shadow-xl overflow-hidden mb-6">
<div className="bg-gray-50 px-5 py-3 border-b border-gray-200">
<h3 className="text-lg font-bold text-gray-800 flex items-center gap-2">
{title}
</h3>
</div>
@@ -226,10 +226,10 @@ const Settings: React.FC = () => {
};
return (
<div className="flex items-center justify-between p-3 bg-gray-950/50 border-b border-gray-800 last:border-0 hover:bg-gray-900 transition-colors">
<div className="flex items-center justify-between p-3 bg-white border-b border-gray-200 last:border-0 hover:bg-gray-50 transition-colors">
<div className="flex-1 pr-4">
<div className="text-sm text-gray-300 font-medium">{label}</div>
<div className="text-xs text-gray-600 font-mono">ADDR: 0x{reg.toString(16).toUpperCase().padStart(2, '0')}</div>
<div className="text-sm text-gray-700 font-medium">{label}</div>
<div className="text-xs text-gray-400 font-mono">ADDR: 0x{reg.toString(16).toUpperCase().padStart(2, '0')}</div>
</div>
<div className="flex items-center gap-2">
@@ -240,16 +240,16 @@ const Settings: React.FC = () => {
onChange={handleChange}
placeholder={val === undefined ? "?" : ""}
disabled={isBusy || globalLoading}
className={`bg-gray-900 border ${isDirty ? 'border-yellow-600' : 'border-gray-700'} text-gray-100 text-right px-3 py-1.5 rounded focus:outline-none focus:border-blue-500 font-mono h-9 ${type === 'string' ? 'w-40' : 'w-28'}`}
className={`bg-white border ${isDirty ? 'border-yellow-600' : 'border-gray-300'} text-gray-900 text-right px-3 py-1.5 rounded focus:outline-none focus:border-blue-500 font-mono h-9 ${type === 'string' ? 'w-40' : 'w-28'}`}
/>
{unit && <span className="absolute right-2 top-2 text-gray-500 text-xs pointer-events-none opacity-50">{type !== 'date' ? unit : ''}</span>}
{unit && <span className="absolute right-2 top-2 text-gray-400 text-xs pointer-events-none opacity-50">{type !== 'date' ? unit : ''}</span>}
</div>
<button
onClick={onRead}
disabled={isBusy || globalLoading}
title="개별 읽기"
className="p-2 bg-gray-800 text-gray-400 hover:text-blue-400 hover:bg-gray-700 rounded-lg transition-all disabled:opacity-50"
className="p-2 bg-gray-100 text-gray-500 hover:text-blue-600 hover:bg-gray-200 rounded-lg transition-all disabled:opacity-50"
>
<RotateCw size={16} className={isBusy ? 'animate-spin text-blue-500' : ''} />
</button>
@@ -258,7 +258,7 @@ const Settings: React.FC = () => {
onClick={onSave}
disabled={isBusy || globalLoading}
title="개별 저장"
className={`p-2 rounded-lg transition-all disabled:opacity-50 ${isDirty ? 'bg-blue-600 text-white hover:bg-blue-500' : 'bg-gray-800 text-gray-500 hover:text-gray-300'}`}
className={`p-2 rounded-lg transition-all disabled:opacity-50 ${isDirty ? 'bg-blue-600 text-white hover:bg-blue-500' : 'bg-gray-100 text-gray-500 hover:text-gray-700'}`}
>
<Save size={16} />
</button>
@@ -270,10 +270,10 @@ const Settings: React.FC = () => {
return (
<div className="p-6 pb-24 overflow-y-auto h-full max-w-6xl mx-auto">
{/* 상단 툴바 */}
<div className="flex flex-col md:flex-row justify-between items-center mb-6 gap-4 sticky top-0 bg-gray-950/90 backdrop-blur z-20 py-4 border-b border-gray-800">
<div className="flex flex-col md:flex-row justify-between items-center mb-6 gap-4 sticky top-0 bg-white/90 backdrop-blur z-20 py-4 border-b border-gray-200">
<div>
<h2 className="text-2xl font-bold text-gray-200">EEPROM 설정</h2>
<p className="text-gray-400 text-sm">BMS 내부 파라미터를 개별적으로 읽거나 수정할 수 있습니다.</p>
<h2 className="text-2xl font-bold text-gray-800">EEPROM 설정</h2>
<p className="text-gray-500 text-sm">BMS 내부 파라미터를 개별적으로 읽거나 수정할 수 있습니다.</p>
</div>
<div className="flex gap-2">
<button