GithubBackup/MyGoNavi
1
0
Fork 0
mirror of https://github.com/Syngnat/GoNavi.git synced 2026-06-05 05:59:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
杨国锋
2026-02-05 20:07:25 +08:00
parent 1fc182817e
commit f75e04f091
14 changed files with 173 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/components/DataGrid.tsx
View File

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

3
frontend/src/components/LogPanel.tsx
View File

@@ -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 = [
{

3
frontend/src/components/QueryEditor.tsx
View File

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

8
frontend/src/components/Sidebar.tsx
View File

@@ -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[])}