From ab420e3d2424d9e60c1f7c9d980e467bdfd18e19 Mon Sep 17 00:00:00 2001 From: Syngnat Date: Fri, 8 May 2026 20:28:41 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(driver-manager):=20=E7=BB=9F?= =?UTF-8?q?=E4=B8=80=E9=A9=B1=E5=8A=A8=E7=AE=A1=E7=90=86=E9=A1=B5=E6=98=8E?= =?UTF-8?q?=E6=9A=97=E4=B8=BB=E9=A2=98=E5=BA=95=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Refs #440 --- .../src/components/DriverManagerModal.tsx | 63 ++++++++++++++----- .../utils/driverManagerWorkbenchTheme.test.ts | 31 +++++++++ .../src/utils/driverManagerWorkbenchTheme.ts | 61 ++++++++++++++++++ 3 files changed, 140 insertions(+), 15 deletions(-) create mode 100644 frontend/src/utils/driverManagerWorkbenchTheme.test.ts create mode 100644 frontend/src/utils/driverManagerWorkbenchTheme.ts diff --git a/frontend/src/components/DriverManagerModal.tsx b/frontend/src/components/DriverManagerModal.tsx index d37e228..fd90798 100644 --- a/frontend/src/components/DriverManagerModal.tsx +++ b/frontend/src/components/DriverManagerModal.tsx @@ -4,6 +4,7 @@ import { DeleteOutlined, DownloadOutlined, FileSearchOutlined, FolderOpenOutline import { EventsOn } from '../../wailsjs/runtime/runtime'; import { useStore } from '../store'; import { normalizeOpacityForPlatform, resolveAppearanceValues } from '../utils/appearance'; +import { buildDriverManagerWorkbenchTheme } from '../utils/driverManagerWorkbenchTheme'; import { DRIVER_LOCAL_IMPORT_BUTTON_LABEL, DRIVER_LOCAL_IMPORT_DIRECTORY_HELP, @@ -178,6 +179,10 @@ const DriverManagerModal: React.FC<{ open: boolean; onClose: () => void; onOpenG const darkMode = theme === 'dark'; const resolvedAppearance = resolveAppearanceValues(appearance); const opacity = normalizeOpacityForPlatform(resolvedAppearance.opacity); + const driverManagerTheme = useMemo( + () => buildDriverManagerWorkbenchTheme(darkMode, opacity), + [darkMode, opacity], + ); const [loading, setLoading] = useState(false); const [downloadDir, setDownloadDir] = useState(''); const [networkChecking, setNetworkChecking] = useState(false); @@ -201,6 +206,33 @@ const DriverManagerModal: React.FC<{ open: boolean; onClose: () => void; onOpenG downloadDirRef.current = downloadDir; }, [downloadDir]); + const modalBodyStyle = useMemo(() => ({ + maxHeight: 'calc(100vh - 220px)', + overflowY: 'auto', + overflowX: 'hidden', + paddingRight: 18, + background: driverManagerTheme.pageBg, + color: driverManagerTheme.titleText, + }), [driverManagerTheme]); + + const managerSectionStyle = useMemo(() => ({ + border: driverManagerTheme.sectionBorder, + borderRadius: 8, + background: driverManagerTheme.sectionBg, + }), [driverManagerTheme]); + + const managerStatStyle = useMemo(() => ({ + border: driverManagerTheme.statBorder, + borderRadius: 8, + background: driverManagerTheme.statBg, + }), [driverManagerTheme]); + + const managerUpdateNoteStyle = useMemo(() => ({ + border: driverManagerTheme.updateNoteBorder, + borderRadius: 8, + background: driverManagerTheme.updateNoteBg, + }), [driverManagerTheme]); + const appendOperationLog = useCallback(( driverType: string, text: string, @@ -1029,6 +1061,12 @@ const DriverManagerModal: React.FC<{ open: boolean; onClose: () => void; onOpenG row.needsUpdate ? 'driver-manager-card-warning' : '', row.connectable ? 'driver-manager-card-ready' : '', ].filter(Boolean).join(' ')} + style={{ + border: row.needsUpdate + ? driverManagerTheme.cardWarningBorder + : (row.connectable ? driverManagerTheme.cardReadyBorder : driverManagerTheme.cardBorder), + background: driverManagerTheme.cardBg, + }} >
@@ -1043,7 +1081,7 @@ const DriverManagerModal: React.FC<{ open: boolean; onClose: () => void; onOpenG {affectedText ? {affectedText} : null}
{row.needsUpdate && issueText ? ( -
+
需要重装 void; onOpenG style={{ top: 24 }} className="driver-manager-modal" styles={{ - body: { - maxHeight: 'calc(100vh - 220px)', - overflowY: 'auto', - overflowX: 'hidden', - paddingRight: 18, - }, + body: modalBodyStyle, }} destroyOnHidden footer={( @@ -1137,26 +1170,26 @@ const DriverManagerModal: React.FC<{ open: boolean; onClose: () => void; onOpenG )} > -
-
+
+
除 MySQL / Redis / Oracle / PostgreSQL 外，其他数据源需先安装启用后再连接。 驱动代理独立运行，GoNavi 升级后如提示重装，请重新安装对应驱动以应用新的 agent 逻辑。
-
+
{statusSummary.total} 全部
-
+
{statusSummary.enabled} 已启用
-
- {statusSummary.needsUpdate} +
+ {statusSummary.needsUpdate} 需重装
-
+
{statusSummary.notEnabled} 未启用
@@ -1239,7 +1272,7 @@ const DriverManagerModal: React.FC<{ open: boolean; onClose: () => void; onOpenG /> )} -
+
{ + it('builds a dark driver manager theme with dark surfaces', () => { + const theme = buildDriverManagerWorkbenchTheme(true, 0.72); + + expect(theme.isDark).toBe(true); + expect(theme.pageBg).toBe('rgb(31, 31, 31)'); + expect(theme.sectionBg).toBe('rgb(31, 31, 31)'); + expect(theme.cardBg).toBe('rgb(31, 31, 31)'); + expect(theme.statBg).toBe('rgb(31, 31, 31)'); + expect(theme.updateNoteBg).toBe('rgb(31, 31, 31)'); + expect(theme.titleText).toBe('#f5f7ff'); + expect(theme.warningText).toBe('#f6c453'); + }); + + it('builds a light driver manager theme with light surfaces', () => { + const theme = buildDriverManagerWorkbenchTheme(false, 0.92); + + expect(theme.isDark).toBe(false); + expect(theme.pageBg).toBe('rgb(255, 255, 255)'); + expect(theme.sectionBg).toBe('rgb(255, 255, 255)'); + expect(theme.cardBg).toBe('rgb(255, 255, 255)'); + expect(theme.statBg).toBe('rgb(255, 255, 255)'); + expect(theme.updateNoteBg).toBe('rgb(255, 255, 255)'); + expect(theme.titleText).toBe('rgba(5, 5, 5, 0.92)'); + expect(theme.warningText).toBe('#d48806'); + }); +}); diff --git a/frontend/src/utils/driverManagerWorkbenchTheme.ts b/frontend/src/utils/driverManagerWorkbenchTheme.ts new file mode 100644 index 0000000..5407876 --- /dev/null +++ b/frontend/src/utils/driverManagerWorkbenchTheme.ts @@ -0,0 +1,61 @@ +export type DriverManagerWorkbenchTheme = { + isDark: boolean; + pageBg: string; + sectionBg: string; + sectionBorder: string; + cardBg: string; + cardBorder: string; + cardWarningBorder: string; + cardReadyBorder: string; + statBg: string; + statBorder: string; + updateNoteBg: string; + updateNoteBorder: string; + mutedText: string; + titleText: string; + warningText: string; +}; + +export const buildDriverManagerWorkbenchTheme = (darkMode: boolean, _opacity: number): DriverManagerWorkbenchTheme => { + if (darkMode) { + const darkSurface = 'rgb(31, 31, 31)'; + + return { + isDark: true, + pageBg: darkSurface, + sectionBg: darkSurface, + sectionBorder: '1px solid rgba(255, 255, 255, 0.08)', + cardBg: darkSurface, + cardBorder: '1px solid rgba(255, 255, 255, 0.08)', + cardWarningBorder: '1px solid rgba(250, 173, 20, 0.35)', + cardReadyBorder: '1px solid rgba(82, 196, 26, 0.22)', + statBg: darkSurface, + statBorder: '1px solid rgba(255, 255, 255, 0.08)', + updateNoteBg: darkSurface, + updateNoteBorder: '1px solid rgba(250, 173, 20, 0.24)', + mutedText: 'rgba(255, 255, 255, 0.62)', + titleText: '#f5f7ff', + warningText: '#f6c453', + }; + } + + const lightSurface = 'rgb(255, 255, 255)'; + + return { + isDark: false, + pageBg: lightSurface, + sectionBg: lightSurface, + sectionBorder: '1px solid rgba(5, 5, 5, 0.08)', + cardBg: lightSurface, + cardBorder: '1px solid rgba(5, 5, 5, 0.08)', + cardWarningBorder: '1px solid rgba(250, 173, 20, 0.35)', + cardReadyBorder: '1px solid rgba(82, 196, 26, 0.22)', + statBg: lightSurface, + statBorder: '1px solid rgba(5, 5, 5, 0.08)', + updateNoteBg: lightSurface, + updateNoteBorder: '1px solid rgba(250, 173, 20, 0.24)', + mutedText: 'rgba(5, 5, 5, 0.62)', + titleText: 'rgba(5, 5, 5, 0.92)', + warningText: '#d48806', + }; +};