♻️ refactor(theme): 重构主题系统并统一全局暗色视觉

frontend/src/App.css

@@ -30,4 +30,35 @@ html, body, #root {
   text-overflow: ellipsis;
   white-space: nowrap;
   padding-right: 8px;
+}
+
+/* Scrollbar styling for dark mode */
+body[data-theme='dark'] ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+body[data-theme='dark'] ::-webkit-scrollbar-track {
+    background: #1f1f1f;
+}
+body[data-theme='dark'] ::-webkit-scrollbar-corner {
+    background: #1f1f1f;
+}
+body[data-theme='dark'] ::-webkit-scrollbar-thumb {
+    background: #424242;
+    border-radius: 4px;
+    border: 2px solid #1f1f1f;
+}
+body[data-theme='dark'] ::-webkit-scrollbar-thumb:hover {
+    background: #666;
+}
+
+/* Ensure body background matches theme to avoid white flashes */
+body {
+    transition: background-color 0.3s, color 0.3s;
+}
+
+/* Custom Title Bar Close Button Hover */
+.titlebar-close-btn:hover {
+    background-color: #ff4d4f !important;
+    color: #fff !important;
 }

frontend/src/App.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { Layout, Button, ConfigProvider, theme, Dropdown, MenuProps, message, Modal, Spin } from 'antd';
 import zhCN from 'antd/locale/zh_CN';
-import { PlusOutlined, BulbOutlined, BulbFilled, ConsoleSqlOutlined, UploadOutlined, DownloadOutlined, CloudDownloadOutlined, BugOutlined, ToolOutlined, InfoCircleOutlined, GithubOutlined } from '@ant-design/icons';
+import { PlusOutlined, BulbOutlined, BulbFilled, ConsoleSqlOutlined, UploadOutlined, DownloadOutlined, CloudDownloadOutlined, BugOutlined, ToolOutlined, InfoCircleOutlined, GithubOutlined, SkinOutlined, CheckOutlined, MinusOutlined, BorderOutlined, CloseOutlined } from '@ant-design/icons';
 import Sidebar from './components/Sidebar';
 import TabManager from './components/TabManager';
 import ConnectionModal from './components/ConnectionModal';
@@ -17,8 +17,9 @@ function App() {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isSyncModalOpen, setIsSyncModalOpen] = useState(false);
   const [editingConnection, setEditingConnection] = useState<SavedConnection | null>(null);
-  const darkMode = useStore(state => state.darkMode);
-  const toggleDarkMode = useStore(state => state.toggleDarkMode);
+  const themeMode = useStore(state => state.theme);
+  const setTheme = useStore(state => state.setTheme);
+  const darkMode = themeMode === 'dark';
   const addTab = useStore(state => state.addTab);
   const activeContext = useStore(state => state.activeContext);
   const connections = useStore(state => state.connections);
@@ -228,6 +229,21 @@ function App() {
       }
   ];
 
+  const themeMenu: MenuProps['items'] = [
+      {
+          key: 'light',
+          label: '亮色主题',
+          icon: themeMode === 'light' ? <CheckOutlined /> : undefined,
+          onClick: () => setTheme('light')
+      },
+      {
+          key: 'dark',
+          label: '暗色主题',
+          icon: themeMode === 'dark' ? <CheckOutlined /> : undefined,
+          onClick: () => setTheme('dark')
+      }
+  ];
+
 
   // Log Panel
   const [logPanelHeight, setLogPanelHeight] = useState(200);
@@ -386,6 +402,49 @@ function App() {
         }}
     >
         <Layout style={{ height: '100vh', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
+          {/* Custom Title Bar */}
+          <div
+            style={{
+                height: 32,
+                flexShrink: 0,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                background: darkMode ? '#141414' : '#fff',
+                borderBottom: darkMode ? '1px solid #303030' : '1px solid #f0f0f0',
+                userSelect: 'none',
+                WebkitAppRegion: 'drag', // Wails drag region
+                paddingLeft: 16
+            } as any}
+          >
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontWeight: 600 }}>
+                  {/* Logo can be added here if available */}
+                  GoNavi
+              </div>
+              <div style={{ display: 'flex', height: '100%', WebkitAppRegion: 'no-drag' } as any}>
+                  <Button 
+                    type="text" 
+                    icon={<MinusOutlined />} 
+                    style={{ height: '100%', borderRadius: 0, width: 46 }} 
+                    onClick={() => (window as any).runtime.WindowMinimise()} 
+                  />
+                  <Button 
+                    type="text" 
+                    icon={<BorderOutlined />} 
+                    style={{ height: '100%', borderRadius: 0, width: 46 }} 
+                    onClick={() => (window as any).runtime.WindowToggleMaximise()} 
+                  />
+                  <Button 
+                    type="text" 
+                    icon={<CloseOutlined />} 
+                    danger
+                    className="titlebar-close-btn"
+                    style={{ height: '100%', borderRadius: 0, width: 46 }} 
+                    onClick={() => (window as any).runtime.Quit()} 
+                  />
+              </div>
+          </div>
+
           <div
             style={{
                 height: 36,
@@ -402,35 +461,37 @@ function App() {
             <Dropdown menu={{ items: toolsMenu }} placement="bottomLeft">
                 <Button type="text" icon={<ToolOutlined />} title="工具">工具</Button>
             </Dropdown>
+            <Dropdown menu={{ items: themeMenu }} placement="bottomLeft">
+                <Button type="text" icon={<SkinOutlined />} title="主题">主题</Button>
+            </Dropdown>
             <Button type="text" icon={<InfoCircleOutlined />} title="关于" onClick={() => setIsAboutOpen(true)}>关于</Button>
           </div>
           <Layout style={{ flex: 1, minHeight: 0 }}>
           <Sider 
-            theme={darkMode ? "dark" : "light"} 
             width={sidebarWidth} 
             style={{ 
                 borderRight: darkMode ? '1px solid #303030' : '1px solid #f0f0f0', 
-                position: 'relative'
+                position: 'relative',
+                background: darkMode ? '#141414' : '#fff'
             }}
           >
             <div style={{ height: '100%', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
-                <div style={{ padding: '10px', borderBottom: darkMode ? '1px solid #303030' : '1px solid #f0f0f0', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexShrink: 0 }}>
-                <span style={{ fontWeight: 'bold', paddingLeft: 8 }}>GoNavi</span>
+                <div style={{ padding: '10px', borderBottom: darkMode ? '1px solid #303030' : '1px solid #f0f0f0', display: 'flex', justifyContent: 'flex-end', alignItems: 'center', flexShrink: 0, background: darkMode ? '#141414' : '#fff' }}>
+                
                 <div>
-                    <Button type="text" icon={darkMode ? <BulbFilled /> : <BulbOutlined />} onClick={toggleDarkMode} title="切换主题" />
                     <Button type="text" icon={<ConsoleSqlOutlined />} onClick={handleNewQuery} title="新建查询" />
                     <Button type="text" icon={<PlusOutlined />} onClick={() => setIsModalOpen(true)} title="新建连接" />
                 </div>
             </div>
                 
-                <div style={{ flex: 1, overflow: 'hidden' }}>
+                <div style={{ flex: 1, overflow: 'hidden', background: darkMode ? '#141414' : '#fff' }}>
                     <Sidebar onEditConnection={handleEditConnection} />
                 </div>
 
                 {/* Sidebar Footer for Log Toggle */}
-                <div style={{ padding: '8px', borderTop: darkMode ? '1px solid #303030' : '1px solid #f0f0f0', display: 'flex', justifyContent: 'center', flexShrink: 0 }}>
+                <div style={{ padding: '8px', borderTop: darkMode ? '1px solid #303030' : '1px solid #f0f0f0', display: 'flex', justifyContent: 'center', flexShrink: 0, background: darkMode ? '#141414' : '#fff' }}>
                     <Button 
-                        type={isLogPanelOpen ? "primary" : "text"} 
+                        type={isLogPanelOpen ? "primary" : "text"}  
                         icon={<BugOutlined />} 
                         onClick={() => setIsLogPanelOpen(!isLogPanelOpen)}
                         block
@@ -456,7 +517,7 @@ function App() {
                 title="拖动调整宽度"
             />
           </Sider>
-           <Content style={{ background: darkMode ? '#141414' : '#fff', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
+           <Content style={{ background: darkMode ? '#1d1d1d' : '#fff', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
              <div style={{ flex: 1, minHeight: 0, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
                  <TabManager />
              </div>

frontend/src/components/DataGrid.tsx

@@ -354,7 +354,8 @@ const DataGrid: React.FC<DataGridProps> = ({
 }) => {
   const connections = useStore(state => state.connections);
   const addSqlLog = useStore(state => state.addSqlLog);
-  const darkMode = useStore(state => state.darkMode);
+  const theme = useStore(state => state.theme);
+  const darkMode = theme === 'dark';
   const selectionColumnWidth = 46;
   const [form] = Form.useForm();
   const [modal, contextHolder] = Modal.useModal();
@@ -1287,7 +1288,7 @@ const DataGrid: React.FC<DataGridProps> = ({
   const enableVirtual = mergedDisplayData.length >= 200;
 
   return (
-    <div className={gridId} style={{ flex: '1 1 auto', height: '100%', overflow: 'hidden', padding: 0, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
+    <div className={gridId} style={{ flex: '1 1 auto', height: '100%', overflow: 'hidden', padding: 0, display: 'flex', flexDirection: 'column', minHeight: 0, background: darkMode ? '#1d1d1d' : '#fff' }}>
 	       {/* Toolbar */}
 	        <div style={{ padding: '8px', borderBottom: '1px solid #eee', display: 'flex', gap: 8, alignItems: 'center' }}>
 	            {onReload && <Button icon={<ReloadOutlined />} disabled={loading} onClick={() => {
@@ -1336,7 +1337,7 @@ const DataGrid: React.FC<DataGridProps> = ({
 
        {/* Filter Panel */}
        {showFilter && (
-           <div style={{ padding: '8px', background: '#f5f5f5', borderBottom: '1px solid #eee' }}>
+           <div style={{ padding: '8px', background: darkMode ? '#141414' : '#f5f5f5', borderBottom: darkMode ? '1px solid #303030' : '1px solid #eee' }}>
                {filterConditions.map(cond => (
                    <div key={cond.id} style={{ display: 'flex', gap: 8, marginBottom: 8, alignItems: 'flex-start' }}>
                        <Select
@@ -1427,7 +1428,7 @@ const DataGrid: React.FC<DataGridProps> = ({
                     <span>{rowEditorRowKey ? `rowKey: ${rowEditorRowKey}` : ''}</span>
                 </div>
                 <Form form={rowEditorForm} layout="vertical">
-                    <div style={{ maxHeight: '62vh', overflow: 'auto', paddingRight: 8 }}>
+                    <div className="custom-scrollbar" style={{ maxHeight: '62vh', overflow: 'auto', paddingRight: 8 }}>
                         {columnNames.map((col) => {
                             const sample = rowEditorDisplayRef.current?.[col] ?? '';
                             const placeholder = rowEditorNullColsRef.current?.has(col) ? '(NULL)' : undefined;
@@ -1535,11 +1536,12 @@ const DataGrid: React.FC<DataGridProps> = ({
                     left: cellContextMenu.x,
                     top: cellContextMenu.y,
                     zIndex: 10000,
-                    background: '#fff',
-                    border: '1px solid #d9d9d9',
+                    background: darkMode ? '#1f1f1f' : '#fff',
+                    border: darkMode ? '1px solid #303030' : '1px solid #d9d9d9',
                     borderRadius: 4,
                     boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
                     minWidth: 120,
+                    color: darkMode ? '#fff' : 'rgba(0, 0, 0, 0.88)'
                 }}
                 onClick={(e) => e.stopPropagation()}
             >
@@ -1549,7 +1551,7 @@ const DataGrid: React.FC<DataGridProps> = ({
                         cursor: 'pointer',
                         transition: 'background 0.2s',
                     }}
-                    onMouseEnter={(e) => e.currentTarget.style.background = '#f5f5f5'}
+                    onMouseEnter={(e) => e.currentTarget.style.background = darkMode ? '#303030' : '#f5f5f5'}
                     onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
                     onClick={handleCellSetNull}
                 >
@@ -1560,7 +1562,7 @@ const DataGrid: React.FC<DataGridProps> = ({
        </div>
        
        {pagination && (
-           <div style={{ padding: '8px', borderTop: '1px solid #eee', display: 'flex', justifyContent: 'flex-end', background: '#fff' }}>
+           <div style={{ padding: '8px', borderTop: darkMode ? '1px solid #303030' : '1px solid #eee', display: 'flex', justifyContent: 'flex-end', background: darkMode ? '#1d1d1d' : '#fff' }}>
                    <Pagination 
                    current={pagination.current}
                    pageSize={pagination.pageSize}
@@ -1579,8 +1581,10 @@ const DataGrid: React.FC<DataGridProps> = ({
        )}
 
 	        <style>{`
-	            .${gridId} .row-added td { background-color: #f6ffed !important; }
-	            .${gridId} .row-modified td { background-color: #e6f7ff !important; }
+	            .${gridId} .row-added td { background-color: ${darkMode ? '#162b16' : '#f6ffed'} !important; color: ${darkMode ? '#e6fffb' : 'inherit'}; }
+	            .${gridId} .row-modified td { background-color: ${darkMode ? '#162238' : '#e6f7ff'} !important; color: ${darkMode ? '#e6f7ff' : 'inherit'}; }
+                .${gridId} .ant-table-tbody > tr.row-added:hover > td { background-color: ${darkMode ? '#1f3d1f' : '#d9f7be'} !important; }
+                .${gridId} .ant-table-tbody > tr.row-modified:hover > td { background-color: ${darkMode ? '#1d355e' : '#bae7ff'} !important; }
 	        `}</style>
        
        {/* Ghost Resize Line for Columns */}

frontend/src/components/LogPanel.tsx

@@ -12,7 +12,8 @@ interface LogPanelProps {
 const LogPanel: React.FC<LogPanelProps> = ({ height, onClose, onResizeStart }) => {
     const sqlLogs = useStore(state => state.sqlLogs);
     const clearSqlLogs = useStore(state => state.clearSqlLogs);
-    const darkMode = useStore(state => state.darkMode);
+    const theme = useStore(state => state.theme);
+    const darkMode = theme === 'dark';
 
     const columns = [
         {

frontend/src/components/QueryEditor.tsx

@@ -52,7 +52,8 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
   const connectionsRef = useRef(connections);
   const columnsCacheRef = useRef<Record<string, ColumnDefinition[]>>({});
   const saveQuery = useStore(state => state.saveQuery);
-  const darkMode = useStore(state => state.darkMode);
+  const theme = useStore(state => state.theme);
+  const darkMode = theme === 'dark';
   const sqlFormatOptions = useStore(state => state.sqlFormatOptions);
   const setSqlFormatOptions = useStore(state => state.setSqlFormatOptions);
   const queryOptions = useStore(state => state.queryOptions);

frontend/src/components/Sidebar.tsx

@@ -48,6 +48,8 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
   const addTab = useStore(state => state.addTab);
   const setActiveContext = useStore(state => state.setActiveContext);
   const removeConnection = useStore(state => state.removeConnection);
+  const theme = useStore(state => state.theme);
+  const darkMode = theme === 'dark';
   const [treeData, setTreeData] = useState<TreeNode[]>([]);
   const [searchValue, setSearchValue] = useState('');
   const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
@@ -1215,7 +1217,7 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
         </div>
 
         {/* Toolbar for batch operations - always visible */}
-        <div style={{ padding: '4px 8px', borderBottom: '1px solid #f0f0f0', display: 'flex', gap: 4 }}>
+        <div style={{ padding: '4px 8px', borderBottom: darkMode ? '1px solid #303030' : '1px solid #f0f0f0', display: 'flex', gap: 4, background: darkMode ? '#141414' : '#fff' }}>
             <Button
                 size="small"
                 icon={<CheckSquareOutlined />}
@@ -1368,7 +1370,7 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
                             </span>
                         </Space>
                     </div>
-                    <div style={{ maxHeight: 400, overflow: 'auto', border: '1px solid #f0f0f0', borderRadius: 4, padding: 8 }}>
+                    <div style={{ maxHeight: 400, overflow: 'auto', border: darkMode ? '1px solid #303030' : '1px solid #f0f0f0', borderRadius: 4, padding: 8 }}>
                         <Checkbox.Group
                             value={checkedTableKeys}
                             onChange={(values) => setCheckedTableKeys(values as string[])}
@@ -1459,7 +1461,7 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
                             </span>
                         </Space>
                     </div>
-                    <div style={{ maxHeight: 400, overflow: 'auto', border: '1px solid #f0f0f0', borderRadius: 4, padding: 8 }}>
+                    <div style={{ maxHeight: 400, overflow: 'auto', border: darkMode ? '1px solid #303030' : '1px solid #f0f0f0', borderRadius: 4, padding: 8 }}>
                         <Checkbox.Group
                             value={checkedDbKeys}
                             onChange={(values) => setCheckedDbKeys(values as string[])}

frontend/src/global.d.ts

@@ -2,6 +2,13 @@ export {};
 
 declare global {
   interface Window {
+    go: any;
+    runtime: {
+        WindowMinimise: () => void;
+        WindowToggleMaximise: () => void;
+        Quit: () => void;
+        BrowserOpenURL: (url: string) => void;
+    };
     ipcRenderer: {
       send: (channel: string, ...args: any[]) => void;
       on: (channel: string, listener: (event: any, ...args: any[]) => void) => void;

frontend/src/store.ts

@@ -19,7 +19,7 @@ interface AppState {
   activeTabId: string | null;
   activeContext: { connectionId: string; dbName: string } | null;
   savedQueries: SavedQuery[];
-  darkMode: boolean;
+  theme: 'light' | 'dark';
   sqlFormatOptions: { keywordCase: 'upper' | 'lower' };
   queryOptions: { maxRows: number };
   sqlLogs: SqlLog[];
@@ -40,7 +40,7 @@ interface AppState {
   saveQuery: (query: SavedQuery) => void;
   deleteQuery: (id: string) => void;
 
-  toggleDarkMode: () => void;
+  setTheme: (theme: 'light' | 'dark') => void;
   setSqlFormatOptions: (options: { keywordCase: 'upper' | 'lower' }) => void;
   setQueryOptions: (options: Partial<{ maxRows: number }>) => void;
   
@@ -56,7 +56,7 @@ export const useStore = create<AppState>()(
       activeTabId: null,
       activeContext: null,
       savedQueries: [],
-      darkMode: false,
+      theme: 'light',
       sqlFormatOptions: { keywordCase: 'upper' },
       queryOptions: { maxRows: 5000 },
       sqlLogs: [],
@@ -125,7 +125,7 @@ export const useStore = create<AppState>()(
 
       deleteQuery: (id) => set((state) => ({ savedQueries: state.savedQueries.filter(q => q.id !== id) })),
 
-      toggleDarkMode: () => set((state) => ({ darkMode: !state.darkMode })),
+      setTheme: (theme) => set({ theme }),
       setSqlFormatOptions: (options) => set({ sqlFormatOptions: options }),
       setQueryOptions: (options) => set((state) => ({ queryOptions: { ...state.queryOptions, ...options } })),
       
@@ -134,7 +134,7 @@ export const useStore = create<AppState>()(
     }),
     {
       name: 'lite-db-storage', // name of the item in the storage (must be unique)
-      partialize: (state) => ({ connections: state.connections, savedQueries: state.savedQueries, darkMode: state.darkMode, sqlFormatOptions: state.sqlFormatOptions, queryOptions: state.queryOptions }), // Don't persist logs
+      partialize: (state) => ({ connections: state.connections, savedQueries: state.savedQueries, theme: state.theme, sqlFormatOptions: state.sqlFormatOptions, queryOptions: state.queryOptions }), // Don't persist logs
     }
   )
 );