{!initialValues &&
}
{testResult ? (
@@ -2386,18 +2587,21 @@ const ConnectionModal: React.FC<{
};
const getTitle = () => {
- if (step === 1) return "选择数据源类型";
+ if (step === 1) {
+ return renderConnectionModalTitle(
, '选择数据源类型', '按数据库、中间件或文件类型快速进入对应的连接配置流程。');
+ }
const typeName = dbTypes.find(t => t.key === dbType)?.name || dbType;
- return initialValues ? "编辑连接" : `新建 ${typeName} 连接`;
+ return initialValues
+ ? renderConnectionModalTitle(
, '编辑连接', `调整 ${typeName} 连接的参数、认证方式与网络选项。`)
+ : renderConnectionModalTitle(
, `新建 ${typeName} 连接`, '填写连接参数、测试连通性，并保存到连接树中。');
};
- const modalBodyStyle = step === 1
- ? { padding: '16px 24px', overflow: 'hidden' as const, minHeight: STEP1_MODAL_MIN_BODY_HEIGHT }
- : {
- padding: '16px 24px',
- overflowY: 'auto' as const,
- overflowX: 'hidden' as const,
- };
+ const modalBodyStyle = {
+ padding: '12px 24px 18px',
+ height: CONNECTION_MODAL_BODY_HEIGHT,
+ overflowY: 'auto' as const,
+ overflowX: 'hidden' as const,
+ };
return (
<>
@@ -2408,22 +2612,33 @@ const ConnectionModal: React.FC<{
footer={getFooter()}
centered
wrapClassName="connection-modal-wrap"
- width={step === 1 ? STEP1_MODAL_WIDTH : STEP2_MODAL_WIDTH}
+ width={CONNECTION_MODAL_WIDTH}
zIndex={10001}
destroyOnHidden
maskClosable={false}
- styles={{ body: modalBodyStyle }}
+ styles={{
+ content: modalShellStyle,
+ header: { background: 'transparent', borderBottom: 'none', paddingBottom: 8 },
+ body: modalBodyStyle,
+ footer: { background: 'transparent', borderTop: 'none', paddingTop: 10 }
+ }}
>
{step === 1 ? renderStep1() : renderStep2()}
, '测试连接失败原因', '查看本次测试连接的完整错误上下文，便于快速定位配置问题。')}
open={testErrorLogOpen}
onCancel={() => setTestErrorLogOpen(false)}
centered
width={760}
zIndex={10002}
destroyOnHidden
+ styles={{
+ content: modalShellStyle,
+ header: { background: 'transparent', borderBottom: 'none', paddingBottom: 8 },
+ body: { paddingTop: 8 },
+ footer: { background: 'transparent', borderTop: 'none', paddingTop: 10 }
+ }}
footer={[
,
]}
diff --git a/frontend/src/components/DataGrid.tsx b/frontend/src/components/DataGrid.tsx
index 10c8b87..f23caa0 100644
--- a/frontend/src/components/DataGrid.tsx
+++ b/frontend/src/components/DataGrid.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef, useContext, useMemo, useCallback }
import { createPortal } from 'react-dom';
import { Table, message, Input, Button, Dropdown, MenuProps, Form, Pagination, Select, Modal, Checkbox, Segmented, Tooltip, Popover } from 'antd';
import type { SortOrder } from 'antd/es/table/interface';
-import { ReloadOutlined, ImportOutlined, ExportOutlined, DownOutlined, PlusOutlined, DeleteOutlined, SaveOutlined, UndoOutlined, FilterOutlined, CloseOutlined, ConsoleSqlOutlined, FileTextOutlined, CopyOutlined, ClearOutlined, EditOutlined, VerticalAlignBottomOutlined } from '@ant-design/icons';
+import { ReloadOutlined, ImportOutlined, ExportOutlined, DownOutlined, PlusOutlined, DeleteOutlined, SaveOutlined, UndoOutlined, FilterOutlined, CloseOutlined, ConsoleSqlOutlined, FileTextOutlined, CopyOutlined, ClearOutlined, EditOutlined, VerticalAlignBottomOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons';
import Editor from '@monaco-editor/react';
import { ImportData, ExportTable, ExportData, ExportQuery, ApplyChanges, DBGetColumns } from '../../wailsjs/go/app/App';
import ImportPreviewModal from './ImportPreviewModal';
@@ -11,7 +11,7 @@ import type { ColumnDefinition } from '../types';
import { v4 as uuidv4 } from 'uuid';
import 'react-resizable/css/styles.css';
import { buildOrderBySQL, buildWhereSQL, escapeLiteral, quoteIdentPart, quoteQualifiedIdent, withSortBufferTuningSQL, type FilterCondition } from '../utils/sql';
-import { isMacLikePlatform, normalizeOpacityForPlatform } from '../utils/appearance';
+import { isMacLikePlatform, normalizeOpacityForPlatform, resolveAppearanceValues } from '../utils/appearance';
import { getDataSourceCapabilities } from '../utils/dataSourceCapabilities';
// --- Error Boundary ---
@@ -639,7 +639,8 @@ const DataGrid: React.FC
= ({
const setQueryOptions = useStore(state => state.setQueryOptions);
const isMacLike = useMemo(() => isMacLikePlatform(), []);
const darkMode = theme === 'dark';
- const opacity = normalizeOpacityForPlatform(appearance.opacity);
+ const resolvedAppearance = resolveAppearanceValues(appearance);
+ const opacity = normalizeOpacityForPlatform(resolvedAppearance.opacity);
const canModifyData = !readOnly && !!tableName;
const showColumnComment = queryOptions?.showColumnComment !== false;
const showColumnType = queryOptions?.showColumnType !== false;
@@ -706,6 +707,33 @@ const DataGrid: React.FC = ({
const toolbarDividerColor = darkMode ? 'rgba(255, 255, 255, 0.12)' : 'rgba(0, 0, 0, 0.10)';
const columnMetaHintColor = darkMode ? darkHighlightTextColor : lightMetaHintColor;
const columnMetaTooltipColor = darkMode ? darkHighlightTextColor : lightMetaTooltipColor;
+ const paginationPageSizeOptions = ['100', '200', '500', '1000'];
+ const paginationGlassMode = opacity < 0.999 || resolvedAppearance.blur > 0;
+ const paginationShellBg = darkMode
+ ? `linear-gradient(135deg, rgba(17,22,34,${paginationGlassMode ? Math.max(0.22, opacity * 0.38) : 0.82}) 0%, rgba(10,14,24,${paginationGlassMode ? Math.max(0.28, opacity * 0.46) : 0.9}) 100%)`
+ : `linear-gradient(135deg, rgba(255,255,255,${paginationGlassMode ? Math.max(0.24, opacity * 0.36) : 0.96}) 0%, rgba(246,248,252,${paginationGlassMode ? Math.max(0.32, opacity * 0.44) : 0.99}) 100%)`;
+ const paginationShellBorderColor = darkMode
+ ? `rgba(255,255,255,${paginationGlassMode ? 0.10 : 0.08})`
+ : `rgba(16,24,40,${paginationGlassMode ? 0.08 : 0.08})`;
+ const paginationShellShadow = darkMode
+ ? `0 16px 34px rgba(0,0,0,${paginationGlassMode ? 0.10 : 0.22})`
+ : `0 14px 30px rgba(15,23,42,${paginationGlassMode ? 0.03 : 0.08})`;
+ const paginationChipBg = darkMode
+ ? `rgba(255,255,255,${paginationGlassMode ? Math.max(0.02, opacity * 0.035) : 0.04})`
+ : `rgba(255,255,255,${paginationGlassMode ? Math.max(0.18, opacity * 0.26) : 0.86})`;
+ const paginationChipBorderColor = darkMode
+ ? `rgba(255,255,255,${paginationGlassMode ? 0.10 : 0.08})`
+ : `rgba(16,24,40,${paginationGlassMode ? 0.10 : 0.08})`;
+ const paginationHoverBg = darkMode
+ ? `rgba(255,255,255,${paginationGlassMode ? Math.max(0.04, opacity * 0.06) : 0.07})`
+ : `rgba(255,255,255,${paginationGlassMode ? Math.max(0.24, opacity * 0.34) : 0.96})`;
+ const paginationPrimaryTextColor = darkMode ? '#f5f7ff' : '#162033';
+ const paginationSecondaryTextColor = darkMode ? 'rgba(255,255,255,0.54)' : 'rgba(16,24,40,0.56)';
+ const paginationAccentBg = darkMode ? 'rgba(255,214,102,0.14)' : 'rgba(24,144,255,0.10)';
+ const paginationAccentBorderColor = darkMode ? 'rgba(255,214,102,0.38)' : 'rgba(24,144,255,0.22)';
+ const paginationActiveItemBg = darkMode ? 'rgba(255,214,102,0.18)' : 'rgba(24,144,255,0.12)';
+ const paginationActiveItemBorderColor = darkMode ? 'rgba(255,214,102,0.46)' : 'rgba(24,144,255,0.28)';
+ const paginationActiveItemTextColor = darkMode ? '#fff7d6' : '#0958d9';
const [form] = Form.useForm();
const [modal, contextHolder] = Modal.useModal();
@@ -2970,6 +2998,49 @@ const DataGrid: React.FC = ({
};
}, [viewMode, tableScrollX, mergedDisplayData.length, syncExternalScrollFromTargets, pickHorizontalScrollTargets]);
+ const paginationSummaryText = useMemo(() => {
+ if (!pagination) return '';
+ const total = Number.isFinite(pagination.total) ? pagination.total : 0;
+ const rangeStart = Math.max(0, (pagination.current - 1) * pagination.pageSize + (total > 0 ? 1 : 0));
+ const hasValidRange = total > 0 && rangeStart > 0;
+ const rangeEnd = hasValidRange ? Math.min(total, rangeStart + pagination.pageSize - 1) : 0;
+ const currentCount = hasValidRange ? Math.max(0, rangeEnd - rangeStart + 1) : 0;
+
+ if (pagination.totalKnown === false) {
+ if (isDuckDBConnection) {
+ if (pagination.totalCountLoading) return `当前 ${currentCount} 条 / 正在统计精确总数…`;
+ if (pagination.totalApprox && Number.isFinite(total) && total > 0) return `当前 ${currentCount} 条 / 约 ${total} 条`;
+ if (pagination.totalCountCancelled) return `当前 ${currentCount} 条 / 已取消统计`;
+ return `当前 ${currentCount} 条 / 总数未统计`;
+ }
+ return `当前 ${currentCount} 条 / 正在统计总数…`;
+ }
+
+ if (isDuckDBConnection && (!Number.isFinite(total) || total <= 0)) {
+ return '当前 0 条 / 共 0 条';
+ }
+
+ return `当前 ${currentCount} 条 / 共 ${total} 条`;
+ }, [pagination, isDuckDBConnection]);
+
+ const paginationPageText = useMemo(() => {
+ if (!pagination) return '';
+ const total = Number.isFinite(pagination.total) ? pagination.total : 0;
+ const canShowTotalPages = pagination.totalKnown !== false || (isDuckDBConnection && pagination.totalApprox && total > 0);
+ if (!canShowTotalPages || total <= 0) return `第 ${pagination.current} 页`;
+ const totalPages = Math.max(1, Math.ceil(total / Math.max(1, pagination.pageSize)));
+ return `第 ${pagination.current} / ${totalPages} 页`;
+ }, [pagination, isDuckDBConnection]);
+
+ const handlePageSizeChange = useCallback((value: string) => {
+ if (!pagination || !onPageChange) return;
+ const nextSize = Number(value);
+ if (!Number.isFinite(nextSize) || nextSize <= 0) return;
+ const firstRowIndex = Math.max(0, (pagination.current - 1) * pagination.pageSize);
+ const nextPage = Math.floor(firstRowIndex / nextSize) + 1;
+ onPageChange(nextPage, nextSize);
+ }, [pagination, onPageChange]);
+
return (
{/* Toolbar + Filter Panel */}
@@ -3697,33 +3768,41 @@ const DataGrid: React.FC = ({
{pagination && (
-
-
{
- const hasValidRange = Array.isArray(range) && range[0] > 0 && range[1] >= range[0];
- const currentCount = hasValidRange ? Math.max(0, range[1] - range[0] + 1) : 0;
- if (pagination.totalKnown === false) {
- if (isDuckDBConnection) {
- if (pagination.totalCountLoading) return `当前 ${currentCount} 条 / 正在统计精确总数...`;
- if (pagination.totalApprox && Number.isFinite(total) && total > 0) return `当前 ${currentCount} 条 / 约 ${total} 条`;
- if (pagination.totalCountCancelled) return `当前 ${currentCount} 条 / 已取消统计`;
- return `当前 ${currentCount} 条 / 总数未统计`;
+
+
+
+ 结果集
+ {paginationSummaryText}
+
+
{paginationPageText}
+
{
+ if (type === 'prev') {
+ return ;
}
- return `当前 ${currentCount} 条 / 正在统计总数...`;
- }
- if (isDuckDBConnection && (!Number.isFinite(total) || total <= 0)) {
- return '当前 0 条 / 共 0 条';
- }
- return `当前 ${currentCount} 条 / 共 ${total} 条`;
- }}
- showSizeChanger
- pageSizeOptions={['100', '200', '500', '1000']}
- onChange={onPageChange}
- size="small"
- />
+ if (type === 'next') {
+ return ;
+ }
+ return originalElement;
+ }}
+ />
+
= ({ height, onClose, onResizeStart }) =
const theme = useStore(state => state.theme);
const appearance = useStore(state => state.appearance);
const darkMode = theme === 'dark';
- const opacity = normalizeOpacityForPlatform(appearance.opacity);
+ const resolvedAppearance = resolveAppearanceValues(appearance);
+ const opacity = normalizeOpacityForPlatform(resolvedAppearance.opacity);
// Background Helper
const getBg = (darkHex: string) => {
@@ -28,10 +29,25 @@ const LogPanel: React.FC
= ({ height, onClose, onResizeStart }) =
return `rgba(${r}, ${g}, ${b}, ${opacity})`;
};
const bgMain = getBg('#1d1d1d');
- const panelDividerColor = darkMode ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.08)';
+ const shellOpacity = darkMode ? Math.max(0.18, opacity * 0.82) : Math.max(0.28, opacity * 0.92);
+ const shellOpacityStrong = darkMode ? Math.max(0.22, opacity * 0.9) : Math.max(0.34, opacity * 0.96);
+ const panelDividerColor = darkMode
+ ? `rgba(255,255,255,${Math.max(0.04, opacity * 0.10)})`
+ : `rgba(0,0,0,${Math.max(0.04, opacity * 0.08)})`;
const panelMutedTextColor = darkMode ? 'rgba(255,255,255,0.62)' : 'rgba(0,0,0,0.58)';
- const logScrollbarThumb = darkMode ? 'rgba(255, 255, 255, 0.34)' : 'rgba(0, 0, 0, 0.26)';
- const logScrollbarThumbHover = darkMode ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.36)';
+ const panelShellBg = darkMode
+ ? `linear-gradient(180deg, rgba(15,20,30,${shellOpacity}) 0%, rgba(9,13,22,${shellOpacityStrong}) 100%)`
+ : `linear-gradient(180deg, rgba(255,255,255,${shellOpacityStrong}) 0%, rgba(246,248,252,${shellOpacity}) 100%)`;
+ const panelAccentColor = darkMode ? '#ffd666' : '#1677ff';
+ const panelShadow = darkMode
+ ? `0 12px 28px rgba(0,0,0,${Math.max(0.05, opacity * 0.18)})`
+ : `0 12px 24px rgba(15,23,42,${Math.max(0.02, opacity * 0.08)})`;
+ const logScrollbarThumb = darkMode
+ ? `rgba(255, 255, 255, ${Math.max(0.18, opacity * 0.34)})`
+ : `rgba(0, 0, 0, ${Math.max(0.12, opacity * 0.26)})`;
+ const logScrollbarThumbHover = darkMode
+ ? `rgba(255, 255, 255, ${Math.max(0.28, opacity * 0.48)})`
+ : `rgba(0, 0, 0, ${Math.max(0.18, opacity * 0.36)})`;
const columns = [
{
@@ -45,7 +61,7 @@ const LogPanel: React.FC = ({ height, onClose, onResizeStart }) =
dataIndex: 'status',
width: 70,
render: (status: string) => (
-
+
{status === 'success' ? 'OK' : 'ERR'}
)
@@ -60,7 +76,7 @@ const LogPanel: React.FC = ({ height, onClose, onResizeStart }) =
title: 'SQL / Message',
dataIndex: 'sql',
render: (text: string, record: any) => (
-
+
{text}
{record.message &&
{record.message}
}
{record.affectedRows !== undefined &&
Affected: {record.affectedRows}
}
@@ -72,12 +88,18 @@ const LogPanel: React.FC
= ({ height, onClose, onResizeStart }) =
return (
{/* Resize Handle */}
= ({ height, onClose, onResizeStart }) =
{/* Toolbar */}
-
-
SQL 执行日志
+
+
+
+
+
+
SQL 执行日志
+
记录执行状态、耗时与错误信息，便于快速回溯。
+
-
+
- } onClick={clearSqlLogs} />
+ } onClick={clearSqlLogs} style={{ color: panelMutedTextColor }} />
- } onClick={onClose} />
+ } onClick={onClose} style={{ color: panelMutedTextColor }} />
{/* List */}
-
-
+
+ {sqlLogs.length === 0 ? (
+
+ 暂无 SQL 执行日志}
+ />
+
+ ) : (
+
+ )}
);
diff --git a/frontend/src/components/RedisViewer.tsx b/frontend/src/components/RedisViewer.tsx
index 62eab17..d5ebc0f 100644
--- a/frontend/src/components/RedisViewer.tsx
+++ b/frontend/src/components/RedisViewer.tsx
@@ -5,7 +5,7 @@ import { useStore } from '../store';
import { RedisKeyInfo, RedisValue, StreamEntry } from '../types';
import Editor from '@monaco-editor/react';
import type { DataNode } from 'antd/es/tree';
-import { normalizeOpacityForPlatform } from '../utils/appearance';
+import { normalizeOpacityForPlatform, resolveAppearanceValues } from '../utils/appearance';
const { Search } = Input;
@@ -399,7 +399,8 @@ const RedisViewer: React.FC
= ({ connectionId, redisDB }) => {
const theme = useStore(state => state.theme);
const appearance = useStore(state => state.appearance);
const darkMode = theme === 'dark';
- const opacity = normalizeOpacityForPlatform(appearance.opacity);
+ const resolvedAppearance = resolveAppearanceValues(appearance);
+ const opacity = normalizeOpacityForPlatform(resolvedAppearance.opacity);
const connection = connections.find(c => c.id === connectionId);
const keyAccentColor = darkMode ? '#ffd666' : '#1677ff';
const jsonAccentColor = darkMode ? '#f6c453' : '#1890ff';
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index 2fa3fdd..3a31be4 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -27,12 +27,15 @@ import { Tree, message, Dropdown, MenuProps, Input, Button, Modal, Form, Badge,
DisconnectOutlined,
CloudOutlined,
CheckSquareOutlined,
- CodeOutlined
+ CodeOutlined,
+ TagOutlined,
+ CheckOutlined,
+ FilterOutlined
} from '@ant-design/icons';
import { useStore } from '../store';
import { SavedConnection } from '../types';
import { DBGetDatabases, DBGetTables, DBQuery, DBShowCreateTable, ExportTable, OpenSQLFile, CreateDatabase, RenameDatabase, DropDatabase, RenameTable, DropTable, DropView, DropFunction, RenameView } from '../../wailsjs/go/app/App';
- import { normalizeOpacityForPlatform } from '../utils/appearance';
+ import { normalizeOpacityForPlatform, resolveAppearanceValues } from '../utils/appearance';
const { Search } = Input;
@@ -73,6 +76,15 @@ const SEARCH_SCOPE_LABEL_MAP: Record = SEARCH_SCOPE_OPTIONS
return acc;
}, {} as Record);
+
+const SEARCH_SCOPE_ICON_MAP: Record = {
+ smart: ,
+ object: ,
+ database: ,
+ host: ,
+ tag: ,
+};
+
const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }> = ({ onEditConnection }) => {
const connections = useStore(state => state.connections);
const savedQueries = useStore(state => state.savedQueries);
@@ -95,7 +107,8 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
const recordTableAccess = useStore(state => state.recordTableAccess);
const setTableSortPreference = useStore(state => state.setTableSortPreference);
const darkMode = theme === 'dark';
- const opacity = normalizeOpacityForPlatform(appearance.opacity);
+ const resolvedAppearance = resolveAppearanceValues(appearance);
+ const opacity = normalizeOpacityForPlatform(resolvedAppearance.opacity);
const [treeData, setTreeData] = useState([]);
// Background Helper (Duplicate logic for now, ideally shared)
@@ -108,6 +121,44 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
return `rgba(${r}, ${g}, ${b}, ${opacity})`;
};
const bgMain = getBg('#141414');
+ const modalPanelStyle = useMemo(() => ({
+ background: darkMode
+ ? 'linear-gradient(180deg, rgba(20,26,38,0.96) 0%, rgba(13,17,26,0.98) 100%)'
+ : 'linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(246,248,252,0.98) 100%)',
+ border: darkMode ? '1px solid rgba(255,255,255,0.08)' : '1px solid rgba(16,24,40,0.08)',
+ boxShadow: darkMode ? '0 20px 48px rgba(0,0,0,0.38)' : '0 18px 42px rgba(15,23,42,0.12)',
+ backdropFilter: darkMode ? 'blur(18px)' : 'none',
+ }), [darkMode]);
+ const modalSectionStyle = useMemo(() => ({
+ padding: 14,
+ borderRadius: 14,
+ border: darkMode ? '1px solid rgba(255,255,255,0.08)' : '1px solid rgba(16,24,40,0.08)',
+ background: darkMode ? 'rgba(255,255,255,0.03)' : 'rgba(255,255,255,0.84)',
+ }), [darkMode]);
+ const modalScrollSectionStyle = useMemo(() => ({
+ maxHeight: 400,
+ overflow: 'auto' as const,
+ border: darkMode ? '1px solid rgba(255,255,255,0.08)' : '1px solid rgba(16,24,40,0.08)',
+ borderRadius: 14,
+ padding: 12,
+ background: darkMode ? 'rgba(255,255,255,0.03)' : 'rgba(255,255,255,0.8)',
+ }), [darkMode]);
+ const modalHintTextStyle = useMemo(() => ({
+ color: darkMode ? 'rgba(255,255,255,0.5)' : 'rgba(16,24,40,0.55)',
+ fontSize: 12,
+ lineHeight: 1.6,
+ }), [darkMode]);
+ const renderSidebarModalTitle = (icon: React.ReactNode, title: string, description: string) => (
+
+
+ {icon}
+
+
+
{title}
+
{description}
+
+
-
搜索范围
-
setSearchScopeChecked('smart', e.target.checked)}
- >
- 智能（推荐）
-
-
- {scopedOptions.map((option) => (
-
setSearchScopeChecked(option.value, e.target.checked)}
- >
- {option.label}
-
- ))}
+
+
+
+
搜索范围
+
“智能”自动匹配最可能的命中项；手动模式支持按维度组合筛选。
+
+
+
+
-
- 智能与其他项互斥；其他项支持多选。
+
+
+
+
+
+
+
+
+ {scopedOptions.map((option) => {
+ const checked = searchScopes.includes(option.value);
+ return (
+
+ );
+ })}
+
+
+
+ 智能与其他项互斥。若你明确知道要搜的是对象、库、Host 或标签，建议切到手动范围以减少噪音结果。
);
- }, [searchScopes]);
+ }, [darkMode, searchScopes]);
const parseHostOnlyToken = (value: unknown): string[] => {
const raw = String(value || '').trim();
@@ -3301,14 +3420,14 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
return (
-
-
+
+
void }>
placement="bottomRight"
open={isSearchScopePopoverOpen}
onOpenChange={setIsSearchScopePopoverOpen}
+ styles={{ body: { padding: 0, borderRadius: 18, overflow: 'hidden' } }}
>
- } style={{ width: 86 }}>
- 范围{searchScopes.includes('smart') ? '(智)' : `(${searchScopes.length})`}
+
-
+
+
}
@@ -3395,8 +3562,14 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
)}
,
+ renameViewTarget?.type === 'tag' ? "编辑标签" : "新建组",
+ renameViewTarget?.type === 'tag' ? "调整分组名称和包含的连接。" : "为连接树创建一个更清晰的分组视图。"
+ )}
open={isCreateTagModalOpen}
+ centered
+ styles={{ content: modalPanelStyle, header: { background: 'transparent', borderBottom: 'none', paddingBottom: 10 }, body: { paddingTop: 8 }, footer: { background: 'transparent', borderTop: 'none', paddingTop: 12 } }}
onOk={() => {
createTagForm.validateFields().then(values => {
if (renameViewTarget?.type === 'tag') {
@@ -3431,20 +3604,24 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
onCancel={() => setIsCreateTagModalOpen(false)}
>
@@ -3514,10 +3691,12 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
, "批量操作表", "按对象批量导出结构、数据或完整备份。")}
open={isBatchModalOpen}
onCancel={() => setIsBatchModalOpen(false)}
- width={680}
+ width={720}
+ centered
+ styles={{ content: modalPanelStyle, header: { background: 'transparent', borderBottom: 'none', paddingBottom: 10 }, body: { paddingTop: 8 }, footer: { background: 'transparent', borderTop: 'none', paddingTop: 12 } }}
footer={
}
>
-
+
+
先选择连接与数据库，再决定导出范围和目标对象。
{batchTables.length > 0 && (
-
+
void }>
{batchTables.length > 0 && (
<>
-
+
-
+
setCheckedTableKeys(values as string[])}
@@ -3704,10 +3884,12 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
, "批量操作库", "按数据库批量导出结构，或生成结构加数据的备份。")}
open={isBatchDbModalOpen}
onCancel={() => setIsBatchDbModalOpen(false)}
- width={600}
+ width={640}
+ centered
+ styles={{ content: modalPanelStyle, header: { background: 'transparent', borderBottom: 'none', paddingBottom: 10 }, body: { paddingTop: 8 }, footer: { background: 'transparent', borderTop: 'none', paddingTop: 12 } }}
footer={[
]}
>
-
-
+
+
+
连接选定后会加载当前连接下可批量导出的数据库列表。
{batchDatabases.length > 0 && (
<>
-
+
-
+
setCheckedDbKeys(values as string[])}
diff --git a/frontend/src/components/TableDesigner.tsx b/frontend/src/components/TableDesigner.tsx
index 9a3c9f9..4a36b31 100644
--- a/frontend/src/components/TableDesigner.tsx
+++ b/frontend/src/components/TableDesigner.tsx
@@ -2491,7 +2491,7 @@ END;`;
okText="应用"
cancelText="取消"
width={640}
- destroyOnClose
+ destroyOnHidden
>
void;
setTheme: (theme: 'light' | 'dark') => void;
- setAppearance: (appearance: Partial<{ opacity: number; blur: number }>) => void;
+ setAppearance: (appearance: Partial<{ enabled: boolean; opacity: number; blur: number }>) => void;
setUiScale: (scale: number) => void;
setFontSize: (size: number) => void;
setStartupFullscreen: (enabled: boolean) => void;
@@ -522,13 +522,14 @@ const sanitizeTableSortPreference = (value: unknown): Record | undefined,
+ appearance: Partial<{ enabled: boolean; opacity: number; blur: number }> | undefined,
version: number
-): { opacity: number; blur: number } => {
+): { enabled: boolean; opacity: number; blur: number } => {
if (!appearance || typeof appearance !== 'object') {
return { ...DEFAULT_APPEARANCE };
}
const nextAppearance = {
+ enabled: typeof appearance.enabled === 'boolean' ? appearance.enabled : DEFAULT_APPEARANCE.enabled,
opacity: typeof appearance.opacity === 'number' ? appearance.opacity : DEFAULT_APPEARANCE.opacity,
blur: typeof appearance.blur === 'number' ? appearance.blur : DEFAULT_APPEARANCE.blur,
};
diff --git a/frontend/src/utils/appearance.ts b/frontend/src/utils/appearance.ts
index 10d48b5..77c5aaa 100644
--- a/frontend/src/utils/appearance.ts
+++ b/frontend/src/utils/appearance.ts
@@ -10,6 +10,22 @@ const WINDOWS_BLUR_FACTOR = 1.00;
const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));
+export interface AppearanceSettingsLike {
+ enabled?: boolean;
+ opacity?: number;
+ blur?: number;
+}
+
+export const resolveAppearanceValues = (appearance: AppearanceSettingsLike | undefined): { opacity: number; blur: number } => {
+ if (!appearance || appearance.enabled !== false) {
+ return {
+ opacity: appearance?.opacity ?? DEFAULT_OPACITY,
+ blur: appearance?.blur ?? 0,
+ };
+ }
+ return { opacity: DEFAULT_OPACITY, blur: 0 };
+};
+
export const isMacLikePlatform = (): boolean => {
if (typeof navigator === 'undefined') {
return false;