mirror of
https://github.com/Syngnat/GoNavi.git
synced 2026-07-13 00:13:33 +08:00
8047 lines
404 KiB
TypeScript
8047 lines
404 KiB
TypeScript
import Modal from './components/common/ResizableDraggableModal';
|
||
import React, { useState, useEffect, useMemo, useCallback, useRef } from 'react';
|
||
import { Layout, Button, ConfigProvider, theme, message, Spin, Slider, Progress, Switch, Input, InputNumber, Select, Segmented, Tooltip, Alert } from 'antd';
|
||
import { PlusOutlined, ConsoleSqlOutlined, UploadOutlined, DownloadOutlined, CloudDownloadOutlined, BugOutlined, ToolOutlined, GlobalOutlined, InfoCircleOutlined, GithubOutlined, SkinOutlined, CheckOutlined, MinusOutlined, BorderOutlined, CloseOutlined, SettingOutlined, LinkOutlined, BgColorsOutlined, AppstoreOutlined, RobotOutlined, FolderOpenOutlined, HddOutlined, SafetyCertificateOutlined, SwitcherOutlined, CodeOutlined, RightOutlined, TableOutlined, MenuOutlined, PoweroffOutlined, TagOutlined, UserOutlined, UpCircleOutlined, MessageOutlined, FileTextOutlined, SyncOutlined, SendOutlined } from '@ant-design/icons';
|
||
import { DndContext, PointerSensor, closestCenter, useSensor, useSensors, type DragEndEvent } from '@dnd-kit/core';
|
||
import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
|
||
import { CSS } from '@dnd-kit/utilities';
|
||
import { BrowserOpenURL, Environment, EventsOn, WindowFullscreen, WindowGetPosition, WindowGetSize, WindowIsFullscreen, WindowIsMaximised, WindowIsMinimised, WindowIsNormal, WindowMaximise, WindowMinimise, WindowSetDarkTheme, WindowSetLightTheme, WindowSetPosition, WindowSetSize, WindowSetSystemDefaultTheme, WindowUnfullscreen, WindowUnmaximise } from '../wailsjs/runtime';
|
||
import Sidebar from './components/Sidebar';
|
||
import TabManager from './components/TabManager';
|
||
import FloatingWorkbenchWindows from './components/FloatingWorkbenchWindows';
|
||
import FloatingAIChatWindow from './components/FloatingAIChatWindow';
|
||
import FloatingQueryResultWindows from './components/FloatingQueryResultWindows';
|
||
import ConnectionModal from './components/ConnectionModal';
|
||
import SnippetSettingsModal from './components/SnippetSettingsModal';
|
||
import ConnectionPackagePasswordModal from './components/ConnectionPackagePasswordModal';
|
||
import DataSyncModal from './components/DataSyncModal';
|
||
import { type DataSyncEntryMode } from './components/dataSyncEntryMode';
|
||
import DriverManagerModal from './components/DriverManagerModal';
|
||
import LinuxCJKFontBanner from './components/LinuxCJKFontBanner';
|
||
import LogPanel from './components/LogPanel';
|
||
import { AISettingsContent } from './components/AISettingsModal';
|
||
import AIChatPanel from './components/AIChatPanel';
|
||
import AIPanelErrorBoundary from './components/ai/AIPanelErrorBoundary';
|
||
import SecurityUpdateBanner from './components/SecurityUpdateBanner';
|
||
import SecurityUpdateIntroModal from './components/SecurityUpdateIntroModal';
|
||
import SecurityUpdateProgressModal from './components/SecurityUpdateProgressModal';
|
||
import SecurityUpdateSettingsModal from './components/SecurityUpdateSettingsModal';
|
||
import LanguageSettingsPanel from './components/LanguageSettingsPanel';
|
||
import WebAuthSettingsPanel from './components/WebAuthSettingsPanel';
|
||
import {
|
||
DEFAULT_APPEARANCE,
|
||
MAX_V2_SIDEBAR_RAIL_SCALE,
|
||
MIN_V2_SIDEBAR_RAIL_SCALE,
|
||
sanitizeV2SidebarRailScale,
|
||
useStore,
|
||
} from './store';
|
||
import { GlobalProxyConfig, SavedConnection, SecurityUpdateIssue, SecurityUpdateStatus } from './types';
|
||
import { blurToFilter, normalizeBlurForPlatform, normalizeOpacityForPlatform, isMacLikePlatform, isWindowsPlatform, resolveAppearanceValues } from './utils/appearance';
|
||
import { buildFontFamilyOptions, DEFAULT_MONO_FONT_FAMILY, DEFAULT_UI_FONT_FAMILY, getLinuxCJKFontInstallHint, matchFontFamilyOption, resolveMonoFontFamily, resolveUIFontFamily, sanitizeFontFamilyInput, type FontFamilyOption, type InstalledFontFamily } from './utils/fontFamilies';
|
||
import {
|
||
DENSITY_OPTIONS,
|
||
sanitizeDataTableDensity,
|
||
sanitizeDataTableFontSize,
|
||
sanitizeSidebarTreeFontSize,
|
||
} from './utils/dataGridDisplay';
|
||
import {
|
||
TAB_DISPLAY_SECONDARY_DEFAULT_KEYS,
|
||
TAB_DISPLAY_ELEMENT_META,
|
||
applyTabDisplaySettingsPatch,
|
||
resolveTabDisplayElementOrder,
|
||
sanitizeTabDisplaySettings,
|
||
switchTabDisplayLayout,
|
||
type TabDisplayElementKey,
|
||
type TabDisplayLayout,
|
||
type TabDisplaySettings,
|
||
} from './utils/tabDisplay';
|
||
import { getMacNativeTitlebarPaddingLeft, getMacNativeTitlebarPaddingRight, shouldHandleMacNativeFullscreenShortcut, shouldSuppressMacNativeEscapeExit } from './utils/macWindow';
|
||
import { shouldEnableMacWindowDiagnostics } from './utils/macWindowDiagnostics';
|
||
import { getConnectionWorkbenchState } from './utils/startupReadiness';
|
||
import { createGlobalProxyDraft, toSaveGlobalProxyInput } from './utils/globalProxyDraft';
|
||
import {
|
||
detectConnectionImportKind,
|
||
isConnectionPackagePasswordRequiredError,
|
||
resolveConnectionPackageExportResult,
|
||
normalizeConnectionPackagePassword,
|
||
} from './utils/connectionExport';
|
||
import {
|
||
bootstrapSecureConfig,
|
||
finalizeSecurityUpdateStatus,
|
||
mergeSecurityUpdateStatusWithLegacySource,
|
||
prepareSecureConfigForExternalMCP,
|
||
startSecurityUpdateFromBootstrap,
|
||
} from './utils/secureConfigBootstrap';
|
||
import { bootstrapSavedQueries } from './utils/savedQueryPersistence';
|
||
import {
|
||
LEGACY_PERSIST_KEY,
|
||
hasLegacyMigratableSensitiveItems,
|
||
stripLegacyPersistedConnectionById,
|
||
} from './utils/legacyConnectionStorage';
|
||
import { DEFAULT_QUERY_TEMPLATE } from './components/queryEditor/QueryEditorHelpers';
|
||
import {
|
||
DEFAULT_SIDEBAR_TABLE_METADATA_FIELDS,
|
||
SIDEBAR_TABLE_METADATA_FIELDS,
|
||
applySidebarTableMetadataFieldOrder,
|
||
resolveSidebarTableMetadataFieldOrder,
|
||
resolveSidebarTableMetadataFields,
|
||
setSidebarTableMetadataFieldSelected,
|
||
type SidebarTableMetadataField,
|
||
} from './utils/sidebarTableMetadata';
|
||
import {
|
||
getSecurityUpdateStatusMeta,
|
||
resolveSecurityUpdateEntryVisibility,
|
||
} from './utils/securityUpdatePresentation';
|
||
import {
|
||
hasSecurityUpdateRecentResult,
|
||
resolveSecurityUpdateRepairEntry,
|
||
resolveSecurityUpdateSettingsFocusTarget,
|
||
shouldRefreshSecurityUpdateDetailsFocus,
|
||
shouldReopenSecurityUpdateDetails,
|
||
shouldRetrySecurityUpdateAfterRepairSave,
|
||
type SecurityUpdateRepairSource,
|
||
type SecurityUpdateSettingsFocusTarget,
|
||
} from './utils/securityUpdateRepairFlow';
|
||
import { getWindowsScaleFixNudgedWidth, hasWindowsViewportScaleDrift } from './utils/windowsScaleFix';
|
||
import {
|
||
clearStartupWindowRestorePending,
|
||
isStartupWindowRestorePending,
|
||
markStartupWindowRestorePending,
|
||
resolveDefaultStartupWindowBounds,
|
||
} from './utils/windowStartupLayout';
|
||
import {
|
||
SHORTCUT_ACTION_META,
|
||
SHORTCUT_ACTION_ORDER,
|
||
ShortcutAction,
|
||
canRecordShortcutForAction,
|
||
eventToShortcut,
|
||
findReservedConflictsForAction,
|
||
getShortcutDisplay,
|
||
getShortcutDisplayLabel,
|
||
getShortcutPlatform,
|
||
installGlobalImeCompositionTracking,
|
||
isEditableElement,
|
||
isShortcutMatch,
|
||
normalizeShortcutCombo,
|
||
resolveShortcutBinding,
|
||
splitConflictsByContext,
|
||
type ConflictInfo,
|
||
} from './utils/shortcuts';
|
||
import { resolveTitleBarToggleIconKey, resolveWindowsScaleCheckDelayMs, shouldApplyWindowsScaleFix, shouldResetWebViewZoomForScaleFix, shouldToggleMaximisedWindowForScaleFix, type WindowScaleFixReason, type WindowsScaleCheckTrigger } from './utils/windowStateUi';
|
||
import { resolveVisibleStartupWindowBounds } from './utils/windowRestoreBounds';
|
||
import { resolveWailsWindowVisibleViewport } from './utils/wailsWindowViewport';
|
||
import {
|
||
SIDEBAR_UTILITY_ITEM_KEYS,
|
||
resolveAIEntryPlacement,
|
||
resolveLegacyAIEdgeHandleAttachment,
|
||
resolveLegacyAIEdgeHandleDockStyle,
|
||
resolveLegacyAIEdgeHandleStyle,
|
||
} from './utils/aiEntryLayout';
|
||
import { DEFAULT_AI_PANEL_WIDTH, resolveOverlayAIPanelWidth, shouldOverlayAIPanel } from './utils/aiPanelLayout';
|
||
import { safeWindowRuntimeCall } from './utils/wailsRuntime';
|
||
import {
|
||
buildApplicationQuitUnsavedSQLLabel,
|
||
collectApplicationQuitUnsavedSQLTargets,
|
||
saveApplicationQuitUnsavedSQLTargets,
|
||
} from './utils/sqlEditorApplicationQuit';
|
||
import { useAppUpdateManager } from './hooks/useAppUpdateManager';
|
||
import { useAppLogPanelResize } from './hooks/useAppLogPanelResize';
|
||
import { useAppSidebarResize } from './hooks/useAppSidebarResize';
|
||
import { useAppUtilityStyles } from './hooks/useAppUtilityStyles';
|
||
import { ApplyDataRootDirectory, CancelApplicationQuit, ForceQuitApplication, GetDataRootDirectoryInfo, GetSavedConnections, ListInstalledFontFamilies, OpenDataRootDirectory, SelectDataRootDirectory, SetMacNativeWindowControls, SetWindowTranslucency } from '../wailsjs/go/app/App';
|
||
import { getAntdLocale } from './i18n/frameworkLocale';
|
||
import { useI18n } from './i18n/provider';
|
||
import './App.css';
|
||
import './v2-theme.css';
|
||
import './styles/v2-theme-workbench.css';
|
||
|
||
const { Sider, Content } = Layout;
|
||
const MIN_UI_SCALE = 0.8;
|
||
const MAX_UI_SCALE = 1.25;
|
||
const MIN_FONT_SIZE = 12;
|
||
const MAX_FONT_SIZE = 20;
|
||
/** 设置页 Slider 底部预设刻度 */
|
||
const UI_SCALE_SLIDER_MARKS: Record<number, string> = {
|
||
0.8: '80%',
|
||
0.9: '90%',
|
||
1: '100%',
|
||
1.1: '110%',
|
||
1.25: '125%',
|
||
};
|
||
const FONT_SIZE_SLIDER_MARKS: Record<number, string> = {
|
||
12: '12',
|
||
14: '14',
|
||
16: '16',
|
||
18: '18',
|
||
20: '20',
|
||
};
|
||
const SIDEBAR_RAIL_SCALE_SLIDER_MARKS: Record<number, string> = {
|
||
1: '100%',
|
||
1.25: '125%',
|
||
1.5: '150%',
|
||
1.8: '180%',
|
||
};
|
||
const OPACITY_SLIDER_MARKS: Record<number, string> = {
|
||
0.1: '10%',
|
||
0.5: '50%',
|
||
1: '100%',
|
||
};
|
||
const BLUR_SLIDER_MARKS: Record<number, string> = {
|
||
0: '0',
|
||
6: '6',
|
||
12: '12',
|
||
20: '20',
|
||
};
|
||
const DATA_TABLE_FONT_SLIDER_MARKS: Record<number, string> = {
|
||
10: '10',
|
||
12: '12',
|
||
14: '14',
|
||
16: '16',
|
||
18: '18',
|
||
};
|
||
const DEFAULT_UI_SCALE = 1.0;
|
||
const DEFAULT_FONT_SIZE = 14;
|
||
const EMPTY_INSTALLED_FONT_FAMILIES: InstalledFontFamily[] = [];
|
||
|
||
type ThemeSettingsSliderUnit = 'percent' | 'px' | 'none';
|
||
|
||
type ThemeSettingsSliderProps = {
|
||
min: number;
|
||
max: number;
|
||
step?: number;
|
||
value: number;
|
||
onChange: (value: number) => void;
|
||
disabled?: boolean;
|
||
marks?: Record<number, string>;
|
||
/** percent：右侧按百分比输入（内部仍用 0~1 / 0.8~1.25 比例） */
|
||
unit?: ThemeSettingsSliderUnit;
|
||
};
|
||
|
||
const clampThemeSliderValue = (value: number, min: number, max: number, step?: number): number => {
|
||
let next = Math.min(max, Math.max(min, value));
|
||
if (step && step > 0) {
|
||
const steps = Math.round((next - min) / step);
|
||
next = min + steps * step;
|
||
// 消除浮点误差
|
||
const decimals = String(step).includes('.') ? (String(step).split('.')[1]?.length ?? 0) : 0;
|
||
if (decimals > 0) {
|
||
next = Number(next.toFixed(decimals));
|
||
}
|
||
next = Math.min(max, Math.max(min, next));
|
||
}
|
||
return next;
|
||
};
|
||
|
||
/** 主题设置页：滑条 + 底部预设 + 可编辑数值 */
|
||
const ThemeSettingsSlider: React.FC<ThemeSettingsSliderProps> = ({
|
||
min,
|
||
max,
|
||
step,
|
||
value,
|
||
onChange,
|
||
disabled,
|
||
marks,
|
||
unit = 'none',
|
||
}) => {
|
||
const isPercent = unit === 'percent';
|
||
const minN = Number(min);
|
||
const maxN = Number(max);
|
||
const span = maxN - minN || 1;
|
||
const stepN = step === undefined || step === null ? undefined : Number(step);
|
||
const current = Number(value);
|
||
const displayMin = isPercent ? minN * 100 : minN;
|
||
const displayMax = isPercent ? maxN * 100 : maxN;
|
||
const displayStep = isPercent
|
||
? (stepN !== undefined ? stepN * 100 : 1)
|
||
: (stepN !== undefined ? stepN : 1);
|
||
const displayValue = Number.isFinite(current)
|
||
? (isPercent ? Number((current * 100).toFixed(4)) : current)
|
||
: displayMin;
|
||
|
||
const commitDisplayValue = (raw: number | string | null) => {
|
||
if (raw === null || raw === undefined || raw === '') {
|
||
return;
|
||
}
|
||
const parsed = typeof raw === 'number' ? raw : Number(String(raw).trim().replace(/%/g, ''));
|
||
if (!Number.isFinite(parsed)) {
|
||
return;
|
||
}
|
||
const modelValue = isPercent ? parsed / 100 : parsed;
|
||
onChange(clampThemeSliderValue(modelValue, minN, maxN, stepN));
|
||
};
|
||
|
||
const markEntries = marks
|
||
? Object.entries(marks).map(([raw, label]) => ({
|
||
value: Number(raw),
|
||
label,
|
||
}))
|
||
: [];
|
||
|
||
return (
|
||
<div className={`gonavi-settings-slider-row${marks ? ' has-marks' : ''}`}>
|
||
<div className="gonavi-settings-slider-main">
|
||
<div className="gonavi-settings-slider-track-wrap">
|
||
<Slider
|
||
min={minN}
|
||
max={maxN}
|
||
step={stepN}
|
||
value={current}
|
||
onChange={(next) => {
|
||
const n = Array.isArray(next) ? next[0] : next;
|
||
if (typeof n === 'number' && Number.isFinite(n)) {
|
||
onChange(clampThemeSliderValue(n, minN, maxN, stepN));
|
||
}
|
||
}}
|
||
disabled={disabled}
|
||
tooltip={{ open: false }}
|
||
/>
|
||
</div>
|
||
{markEntries.length > 0 ? (
|
||
<div className="gonavi-settings-slider-presets" role="group">
|
||
{markEntries.map((mark) => {
|
||
const pct = ((mark.value - minN) / span) * 100;
|
||
const active = Number.isFinite(current)
|
||
? (stepN && stepN > 0
|
||
? Math.abs(current - mark.value) <= stepN / 2 + 1e-9
|
||
: Math.abs(current - mark.value) < 1e-6)
|
||
: false;
|
||
return (
|
||
<button
|
||
key={String(mark.value)}
|
||
type="button"
|
||
className={`gonavi-settings-slider-preset${active ? ' is-active' : ''}`}
|
||
style={{ left: `${pct}%` }}
|
||
disabled={Boolean(disabled)}
|
||
onClick={() => {
|
||
if (disabled) return;
|
||
onChange(clampThemeSliderValue(mark.value, minN, maxN, stepN));
|
||
}}
|
||
>
|
||
{mark.label}
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
<InputNumber
|
||
className="gonavi-settings-slider-value-input"
|
||
size="small"
|
||
min={displayMin}
|
||
max={displayMax}
|
||
step={displayStep}
|
||
value={displayValue}
|
||
disabled={disabled}
|
||
controls={false}
|
||
keyboard
|
||
stringMode={false}
|
||
style={{ width: unit === 'none' ? 48 : 62 }}
|
||
addonAfter={unit === 'percent' ? '%' : unit === 'px' ? 'px' : undefined}
|
||
onChange={(next) => {
|
||
if (typeof next === 'number') {
|
||
commitDisplayValue(next);
|
||
}
|
||
}}
|
||
onBlur={(event) => {
|
||
commitDisplayValue(event.target.value);
|
||
}}
|
||
onPressEnter={(event) => {
|
||
commitDisplayValue((event.target as HTMLInputElement).value);
|
||
(event.target as HTMLInputElement).blur();
|
||
}}
|
||
/>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const createEmptySecurityUpdateStatus = (): SecurityUpdateStatus => ({
|
||
overallStatus: 'not_detected',
|
||
summary: {
|
||
total: 0,
|
||
updated: 0,
|
||
pending: 0,
|
||
skipped: 0,
|
||
failed: 0,
|
||
},
|
||
issues: [],
|
||
});
|
||
|
||
const detectNavigatorPlatform = (): string => {
|
||
if (typeof navigator === 'undefined') {
|
||
return '';
|
||
}
|
||
const uaDataPlatform = (navigator as Navigator & {
|
||
userAgentData?: { platform?: string };
|
||
}).userAgentData?.platform;
|
||
if (uaDataPlatform) {
|
||
return uaDataPlatform;
|
||
}
|
||
return navigator.userAgent || '';
|
||
};
|
||
|
||
const readCurrentVisibleViewport = () => resolveWailsWindowVisibleViewport(
|
||
window.screen as Screen & { availLeft?: number; availTop?: number },
|
||
{ innerWidth: window.innerWidth, innerHeight: window.innerHeight },
|
||
{ useMonitorLocalOrigin: isMacLikePlatform() },
|
||
);
|
||
|
||
const getSystemThemeMode = (): 'light' | 'dark' => {
|
||
if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
|
||
return 'light';
|
||
}
|
||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||
};
|
||
|
||
|
||
const mergeSavedConnections = (current: SavedConnection[], imported: SavedConnection[]): SavedConnection[] => {
|
||
const merged = new Map<string, SavedConnection>();
|
||
current.forEach((conn) => merged.set(conn.id, conn));
|
||
imported.forEach((conn) => merged.set(conn.id, conn));
|
||
return Array.from(merged.values());
|
||
};
|
||
|
||
type ConnectionPackageDialogMode = 'import' | 'export';
|
||
type ToolCenterGroupKey = 'config' | 'workflow' | 'workspace';
|
||
type ToolCenterPaneKey =
|
||
| 'connection-package'
|
||
| 'data-root'
|
||
| 'security-update'
|
||
| 'schema-compare'
|
||
| 'data-compare'
|
||
| 'sync'
|
||
| 'drivers'
|
||
| 'snippet-settings'
|
||
| 'shortcut-settings';
|
||
|
||
type ToolCenterPaneState = {
|
||
key: ToolCenterPaneKey;
|
||
group: ToolCenterGroupKey;
|
||
};
|
||
|
||
type SettingsCenterGroupKey = 'preferences' | 'services' | 'about';
|
||
type SettingsCenterPaneKey = 'language' | 'theme' | 'sidebar-metadata' | 'proxy' | 'web-auth' | 'ai' | 'about-go-navi';
|
||
type SettingsCenterPaneState = {
|
||
key: SettingsCenterPaneKey;
|
||
group: SettingsCenterGroupKey;
|
||
};
|
||
|
||
const resolveSettingsCenterGroupInitialPane = (group: SettingsCenterGroupKey): SettingsCenterPaneState | null => (
|
||
group === 'about' ? { key: 'about-go-navi', group: 'about' } : null
|
||
);
|
||
|
||
const DEFAULT_GLOBAL_PROXY_TEST_URL = 'https://api.github.com/';
|
||
|
||
type GlobalProxyTestResultState = {
|
||
success: boolean;
|
||
message: string;
|
||
url?: string;
|
||
finalUrl?: string;
|
||
statusCode?: number;
|
||
durationMs?: number;
|
||
viaProxy?: boolean;
|
||
};
|
||
|
||
const getGlobalProxyDefaultPort = (type: GlobalProxyConfig['type']): number => (
|
||
type === 'http' ? 8080 : 1080
|
||
);
|
||
|
||
const createGlobalProxyComparableDraft = (
|
||
value: Partial<GlobalProxyConfig> = {},
|
||
): GlobalProxyConfig => ({
|
||
...createGlobalProxyDraft(value),
|
||
password: typeof value.password === 'string' ? value.password : '',
|
||
});
|
||
|
||
const areGlobalProxyDraftsEqual = (
|
||
left: Partial<GlobalProxyConfig>,
|
||
right: Partial<GlobalProxyConfig>,
|
||
): boolean => {
|
||
const normalizedLeft = createGlobalProxyComparableDraft(left);
|
||
const normalizedRight = createGlobalProxyComparableDraft(right);
|
||
return (
|
||
normalizedLeft.enabled === normalizedRight.enabled &&
|
||
normalizedLeft.type === normalizedRight.type &&
|
||
normalizedLeft.host === normalizedRight.host &&
|
||
normalizedLeft.port === normalizedRight.port &&
|
||
normalizedLeft.user === normalizedRight.user &&
|
||
normalizedLeft.password === normalizedRight.password &&
|
||
normalizedLeft.hasPassword === normalizedRight.hasPassword
|
||
);
|
||
};
|
||
|
||
const formatAboutCheckedAt = (value: Date): string => {
|
||
const pad = (input: number) => String(input).padStart(2, '0');
|
||
return `${value.getFullYear()}-${pad(value.getMonth() + 1)}-${pad(value.getDate())} ${pad(value.getHours())}:${pad(value.getMinutes())}`;
|
||
};
|
||
|
||
const formatAboutReleaseTime = (value: string | undefined): string => {
|
||
const text = String(value || '').trim();
|
||
if (!text) {
|
||
return '-';
|
||
}
|
||
const date = new Date(text);
|
||
if (Number.isNaN(date.getTime())) {
|
||
return '-';
|
||
}
|
||
return formatAboutCheckedAt(date);
|
||
};
|
||
|
||
type ConnectionPackageDialogState = {
|
||
open: boolean;
|
||
mode: ConnectionPackageDialogMode;
|
||
includeSecrets: boolean;
|
||
useFilePassword: boolean;
|
||
password: string;
|
||
error: string;
|
||
confirmLoading: boolean;
|
||
};
|
||
|
||
const createClosedConnectionPackageDialogState = (): ConnectionPackageDialogState => ({
|
||
open: false,
|
||
mode: 'export',
|
||
includeSecrets: true,
|
||
useFilePassword: false,
|
||
password: '',
|
||
error: '',
|
||
confirmLoading: false,
|
||
});
|
||
|
||
type SidebarMetadataSortableRowProps = {
|
||
field: SidebarTableMetadataField;
|
||
label: string;
|
||
checked: boolean;
|
||
dividerColor: string;
|
||
titleColor: string;
|
||
mutedColor: string;
|
||
onToggle: (selected: boolean) => void;
|
||
};
|
||
|
||
const SidebarMetadataSortableRow: React.FC<SidebarMetadataSortableRowProps> = ({
|
||
field,
|
||
label,
|
||
checked,
|
||
dividerColor,
|
||
titleColor,
|
||
mutedColor,
|
||
onToggle,
|
||
}) => {
|
||
const {
|
||
attributes,
|
||
listeners,
|
||
setNodeRef,
|
||
transform,
|
||
transition,
|
||
isDragging,
|
||
} = useSortable({ id: field });
|
||
|
||
return (
|
||
<div
|
||
ref={setNodeRef}
|
||
data-sidebar-metadata-field={field}
|
||
style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
gap: 12,
|
||
paddingBottom: 12,
|
||
borderBottom: `1px solid ${dividerColor}`,
|
||
transform: CSS.Transform.toString(transform),
|
||
transition,
|
||
opacity: isDragging ? 0.72 : 1,
|
||
position: 'relative',
|
||
zIndex: isDragging ? 2 : undefined,
|
||
}}
|
||
>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
|
||
<button
|
||
type="button"
|
||
aria-label={`Drag ${label}`}
|
||
{...attributes}
|
||
{...listeners}
|
||
style={{
|
||
width: 24,
|
||
height: 24,
|
||
border: 'none',
|
||
borderRadius: 8,
|
||
background: 'transparent',
|
||
color: mutedColor,
|
||
cursor: isDragging ? 'grabbing' : 'grab',
|
||
display: 'inline-flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
padding: 0,
|
||
touchAction: 'none',
|
||
}}
|
||
>
|
||
<MenuOutlined />
|
||
</button>
|
||
<span style={{ fontWeight: 500, color: titleColor, minWidth: 0 }}>{label}</span>
|
||
</div>
|
||
<Switch
|
||
checked={checked}
|
||
onChange={(selected) => onToggle(selected)}
|
||
/>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
function App() {
|
||
const { language, t } = useI18n();
|
||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||
const [isConnectionModalMounted, setIsConnectionModalMounted] = useState(false);
|
||
const [isSyncModalOpen, setIsSyncModalOpen] = useState(false);
|
||
const [syncModalEntryMode, setSyncModalEntryMode] = useState<DataSyncEntryMode>('sync');
|
||
const [isDriverModalOpen, setIsDriverModalOpen] = useState(false);
|
||
const [editingConnection, setEditingConnection] = useState<SavedConnection | null>(null);
|
||
const connectionModalWarmupDoneRef = useRef(false);
|
||
const windowState = useStore(state => state.windowState);
|
||
const themeMode = useStore(state => state.theme);
|
||
const themePreference = useStore(state => state.themePreference);
|
||
const setTheme = useStore(state => state.setTheme);
|
||
const setThemePreference = useStore(state => state.setThemePreference);
|
||
const appearance = useStore(state => state.appearance);
|
||
const setAppearance = useStore(state => state.setAppearance);
|
||
const uiScale = useStore(state => state.uiScale);
|
||
const setUiScale = useStore(state => state.setUiScale);
|
||
const fontSize = useStore(state => state.fontSize);
|
||
const setFontSize = useStore(state => state.setFontSize);
|
||
const startupFullscreen = useStore(state => state.startupFullscreen);
|
||
const setStartupFullscreen = useStore(state => state.setStartupFullscreen);
|
||
const globalProxy = useStore(state => state.globalProxy);
|
||
const replaceConnections = useStore(state => state.replaceConnections);
|
||
const replaceGlobalProxy = useStore(state => state.replaceGlobalProxy);
|
||
const replaceSavedQueries = useStore(state => state.replaceSavedQueries);
|
||
const queryOptions = useStore(state => state.queryOptions);
|
||
const setQueryOptions = useStore(state => state.setQueryOptions);
|
||
const shortcutOptions = useStore(state => state.shortcutOptions);
|
||
const updateShortcut = useStore(state => state.updateShortcut);
|
||
const resetShortcutOptions = useStore(state => state.resetShortcutOptions);
|
||
const [systemThemeMode, setSystemThemeMode] = useState<'light' | 'dark'>(() => getSystemThemeMode());
|
||
const darkMode = themeMode === 'dark';
|
||
const isV2Ui = appearance.uiVersion === 'v2';
|
||
const effectiveUiScale = Math.min(MAX_UI_SCALE, Math.max(MIN_UI_SCALE, Number(uiScale) || DEFAULT_UI_SCALE));
|
||
const effectiveFontSize = Math.min(MAX_FONT_SIZE, Math.max(MIN_FONT_SIZE, Math.round(Number(fontSize) || DEFAULT_FONT_SIZE)));
|
||
const tokenFontSize = Math.round(effectiveFontSize * effectiveUiScale);
|
||
const titleBarToggleIconKey = resolveTitleBarToggleIconKey(
|
||
windowState === 'fullscreen' ? 'fullscreen' : (windowState === 'maximized' ? 'maximized' : 'normal')
|
||
);
|
||
const tokenFontSizeSM = Math.max(10, Math.round(tokenFontSize * 0.86));
|
||
const tokenFontSizeLG = Math.max(tokenFontSize + 1, Math.round(tokenFontSize * 1.14));
|
||
const tokenControlHeight = Math.max(24, Math.round(32 * effectiveUiScale));
|
||
const tokenControlHeightSM = Math.max(20, Math.round(24 * effectiveUiScale));
|
||
const tokenControlHeightLG = Math.max(30, Math.round(40 * effectiveUiScale));
|
||
const dataTableFontSizeFollowsGlobal = appearance.dataTableFontSizeFollowGlobal !== false;
|
||
const sidebarTreeFontSizeFollowsGlobal = appearance.sidebarTreeFontSizeFollowGlobal !== false;
|
||
const effectiveDataTableFontSize = dataTableFontSizeFollowsGlobal
|
||
? effectiveFontSize
|
||
: (sanitizeDataTableFontSize(appearance.dataTableFontSize) ?? effectiveFontSize);
|
||
const effectiveSidebarTreeFontSize = sidebarTreeFontSizeFollowsGlobal
|
||
? effectiveFontSize
|
||
: (sanitizeSidebarTreeFontSize(appearance.sidebarTreeFontSize) ?? effectiveFontSize);
|
||
const effectiveSidebarRailScale = sanitizeV2SidebarRailScale(appearance.v2SidebarRailScale);
|
||
const tableDoubleClickAction = appearance.tableDoubleClickAction === 'open-design' ? 'open-design' : 'open-data';
|
||
const newQuerySqlTemplate = appearance.newQuerySqlTemplate ?? DEFAULT_QUERY_TEMPLATE;
|
||
const sidebarTableMetadataFieldOrder = useMemo(
|
||
() => resolveSidebarTableMetadataFieldOrder(queryOptions?.sidebarTableMetadataFieldOrder),
|
||
[queryOptions?.sidebarTableMetadataFieldOrder],
|
||
);
|
||
const sidebarTableMetadataFields = useMemo(
|
||
() => resolveSidebarTableMetadataFields(
|
||
queryOptions?.sidebarTableMetadataFields,
|
||
queryOptions?.showSidebarTableComment === true,
|
||
sidebarTableMetadataFieldOrder,
|
||
),
|
||
[queryOptions?.showSidebarTableComment, queryOptions?.sidebarTableMetadataFields, sidebarTableMetadataFieldOrder],
|
||
);
|
||
const sidebarMetadataDragSensors = useSensors(
|
||
useSensor(PointerSensor, {
|
||
activationConstraint: { distance: 4 },
|
||
}),
|
||
);
|
||
const tabDisplaySettings = useMemo(
|
||
() => sanitizeTabDisplaySettings(appearance.tabDisplay),
|
||
[appearance.tabDisplay],
|
||
);
|
||
const tabDisplayElementOrder = useMemo(
|
||
() => resolveTabDisplayElementOrder(tabDisplaySettings),
|
||
[tabDisplaySettings],
|
||
);
|
||
const visibleTabDisplayElementKeys = useMemo(
|
||
() => new Set<TabDisplayElementKey>([
|
||
...tabDisplaySettings.primaryElements,
|
||
...tabDisplaySettings.secondaryElements,
|
||
]),
|
||
[tabDisplaySettings],
|
||
);
|
||
const getTabDisplayElementLabel = useCallback(
|
||
(key: TabDisplayElementKey) => t(TAB_DISPLAY_ELEMENT_META[key].labelKey),
|
||
[t],
|
||
);
|
||
const getTabDisplayElementDescription = useCallback(
|
||
(key: TabDisplayElementKey) => t(TAB_DISPLAY_ELEMENT_META[key].descriptionKey),
|
||
[t],
|
||
);
|
||
useEffect(() => {
|
||
if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
|
||
return;
|
||
}
|
||
const mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');
|
||
const applySystemTheme = (matches: boolean) => {
|
||
setSystemThemeMode(matches ? 'dark' : 'light');
|
||
};
|
||
applySystemTheme(mediaQueryList.matches);
|
||
const handleChange = (event: MediaQueryListEvent) => {
|
||
applySystemTheme(event.matches);
|
||
};
|
||
if (typeof mediaQueryList.addEventListener === 'function') {
|
||
mediaQueryList.addEventListener('change', handleChange);
|
||
return () => {
|
||
mediaQueryList.removeEventListener('change', handleChange);
|
||
};
|
||
}
|
||
mediaQueryList.addListener(handleChange);
|
||
return () => {
|
||
mediaQueryList.removeListener(handleChange);
|
||
};
|
||
}, []);
|
||
useEffect(() => {
|
||
const resolvedTheme = themePreference === 'system' ? systemThemeMode : themePreference;
|
||
if (themeMode !== resolvedTheme) {
|
||
setTheme(resolvedTheme);
|
||
}
|
||
if (themePreference === 'system') {
|
||
void safeWindowRuntimeCall(() => WindowSetSystemDefaultTheme(), undefined);
|
||
return;
|
||
}
|
||
if (resolvedTheme === 'dark') {
|
||
void safeWindowRuntimeCall(() => WindowSetDarkTheme(), undefined);
|
||
return;
|
||
}
|
||
void safeWindowRuntimeCall(() => WindowSetLightTheme(), undefined);
|
||
}, [setTheme, systemThemeMode, themeMode, themePreference]);
|
||
const setTabDisplaySettings = useCallback((settings: Partial<TabDisplaySettings>) => {
|
||
setAppearance({
|
||
tabDisplay: applyTabDisplaySettingsPatch(tabDisplaySettings, settings),
|
||
});
|
||
}, [setAppearance, tabDisplaySettings]);
|
||
const setTabDisplayLayout = useCallback((layout: TabDisplayLayout) => {
|
||
if (layout === tabDisplaySettings.layout) return;
|
||
setAppearance({
|
||
tabDisplay: switchTabDisplayLayout(tabDisplaySettings, layout),
|
||
});
|
||
}, [setAppearance, tabDisplaySettings]);
|
||
const updateTabDisplayElementVisibility = useCallback((key: TabDisplayElementKey, checked: boolean) => {
|
||
setFocusedTabDisplayElementKey(key);
|
||
const removeKey = (keys: TabDisplayElementKey[]) => keys.filter((item) => item !== key);
|
||
if (!checked) {
|
||
setTabDisplaySettings({
|
||
layout: tabDisplaySettings.layout,
|
||
primaryElements: removeKey(tabDisplaySettings.primaryElements),
|
||
secondaryElements: removeKey(tabDisplaySettings.secondaryElements),
|
||
});
|
||
return;
|
||
}
|
||
|
||
const primaryElements = removeKey(tabDisplaySettings.primaryElements);
|
||
const secondaryElements = removeKey(tabDisplaySettings.secondaryElements);
|
||
if (tabDisplaySettings.layout === 'double' && TAB_DISPLAY_SECONDARY_DEFAULT_KEYS.includes(key)) {
|
||
secondaryElements.push(key);
|
||
} else {
|
||
primaryElements.push(key);
|
||
}
|
||
setTabDisplaySettings({
|
||
layout: tabDisplaySettings.layout,
|
||
primaryElements,
|
||
secondaryElements,
|
||
});
|
||
}, [setTabDisplaySettings, tabDisplaySettings]);
|
||
const moveTabDisplayElement = useCallback((key: TabDisplayElementKey, offset: -1 | 1) => {
|
||
setFocusedTabDisplayElementKey(key);
|
||
const moveWithin = (keys: TabDisplayElementKey[]) => {
|
||
const index = keys.indexOf(key);
|
||
if (index < 0) return keys;
|
||
const nextIndex = index + offset;
|
||
if (nextIndex < 0 || nextIndex >= keys.length) return keys;
|
||
const next = [...keys];
|
||
[next[index], next[nextIndex]] = [next[nextIndex], next[index]];
|
||
return next;
|
||
};
|
||
|
||
setTabDisplaySettings({
|
||
layout: tabDisplaySettings.layout,
|
||
primaryElements: moveWithin(tabDisplaySettings.primaryElements),
|
||
secondaryElements: moveWithin(tabDisplaySettings.secondaryElements),
|
||
});
|
||
}, [setTabDisplaySettings, tabDisplaySettings]);
|
||
const setTabDisplayElementRow = useCallback((key: TabDisplayElementKey, row: 'primary' | 'secondary') => {
|
||
setFocusedTabDisplayElementKey(key);
|
||
const primaryElements = tabDisplaySettings.primaryElements.filter((item) => item !== key);
|
||
const secondaryElements = tabDisplaySettings.secondaryElements.filter((item) => item !== key);
|
||
if (row === 'primary') {
|
||
primaryElements.push(key);
|
||
} else {
|
||
secondaryElements.push(key);
|
||
}
|
||
setTabDisplaySettings({
|
||
layout: tabDisplaySettings.layout,
|
||
primaryElements,
|
||
secondaryElements,
|
||
});
|
||
}, [setTabDisplaySettings, tabDisplaySettings]);
|
||
const resolvedUiFontFamily = resolveUIFontFamily(appearance.customUIFontFamily);
|
||
const resolvedMonoFontFamily = resolveMonoFontFamily(appearance.customMonoFontFamily);
|
||
const appComponentSize: 'small' | 'middle' | 'large' = effectiveUiScale <= 0.92 ? 'small' : (effectiveUiScale >= 1.12 ? 'large' : 'middle');
|
||
const titleBarHeight = Math.max(28, Math.round(32 * effectiveUiScale));
|
||
const titleBarButtonWidth = Math.max(40, Math.round(46 * effectiveUiScale));
|
||
const floatingLogButtonHeight = Math.max(30, Math.round(34 * effectiveUiScale));
|
||
const resolvedAppearance = resolveAppearanceValues(appearance);
|
||
const effectiveOpacity = normalizeOpacityForPlatform(resolvedAppearance.opacity);
|
||
const effectiveBlur = normalizeBlurForPlatform(resolvedAppearance.blur);
|
||
const blurFilter = blurToFilter(effectiveBlur);
|
||
const [runtimePlatform, setRuntimePlatform] = useState('');
|
||
const [runtimeBuildType, setRuntimeBuildType] = useState('');
|
||
const [isLinuxRuntime, setIsLinuxRuntime] = useState(false);
|
||
const isWebRuntime = runtimeBuildType === 'web';
|
||
const [installedFontFamilies, setInstalledFontFamilies] = useState<InstalledFontFamily[]>(EMPTY_INSTALLED_FONT_FAMILIES);
|
||
const [isFontFamiliesLoading, setIsFontFamiliesLoading] = useState(false);
|
||
const [fontFamiliesLoadError, setFontFamiliesLoadError] = useState<string | null>(null);
|
||
const hasLoadedInstalledFontsRef = useRef(false);
|
||
const uiFontOptions = useMemo(
|
||
() => buildFontFamilyOptions(runtimePlatform, 'ui', installedFontFamilies, t),
|
||
[installedFontFamilies, runtimePlatform, t],
|
||
);
|
||
const monoFontOptions = useMemo(
|
||
() => buildFontFamilyOptions(runtimePlatform, 'mono', installedFontFamilies, t),
|
||
[installedFontFamilies, runtimePlatform, t],
|
||
);
|
||
const linuxCJKFontInstallHint = getLinuxCJKFontInstallHint(runtimePlatform, installedFontFamilies);
|
||
const [isStoreHydrated, setIsStoreHydrated] = useState(() => useStore.persist.hasHydrated());
|
||
const [hasLoadedSecureConfig, setHasLoadedSecureConfig] = useState(false);
|
||
const [viewportWidth, setViewportWidth] = useState(() => (typeof window === 'undefined' ? 1280 : window.innerWidth || 1280));
|
||
const [securityUpdateStatus, setSecurityUpdateStatus] = useState<SecurityUpdateStatus>(() => createEmptySecurityUpdateStatus());
|
||
const [securityUpdateRawPayload, setSecurityUpdateRawPayload] = useState<string | null>(null);
|
||
const [securityUpdateHasLegacySensitiveItems, setSecurityUpdateHasLegacySensitiveItems] = useState(false);
|
||
const [isSecurityUpdateIntroOpen, setIsSecurityUpdateIntroOpen] = useState(false);
|
||
const [isSecurityUpdateBannerDismissed, setIsSecurityUpdateBannerDismissed] = useState(false);
|
||
const [isSecurityUpdateSettingsOpen, setIsSecurityUpdateSettingsOpen] = useState(false);
|
||
const [securityUpdateSettingsFocusTarget, setSecurityUpdateSettingsFocusTarget] = useState<SecurityUpdateSettingsFocusTarget | null>(null);
|
||
const [securityUpdateSettingsFocusRequest, setSecurityUpdateSettingsFocusRequest] = useState(0);
|
||
const [isSecurityUpdateProgressOpen, setIsSecurityUpdateProgressOpen] = useState(false);
|
||
const [securityUpdateProgressStage, setSecurityUpdateProgressStage] = useState(() => t('app.security_update.stage.checking_saved_config'));
|
||
const [securityUpdateRepairSource, setSecurityUpdateRepairSource] = useState<SecurityUpdateRepairSource | null>(null);
|
||
const [focusedTabDisplayElementKey, setFocusedTabDisplayElementKey] = useState<TabDisplayElementKey | null>(null);
|
||
const [focusedAIProviderId, setFocusedAIProviderId] = useState<string | undefined>(undefined);
|
||
const [connectionPackageDialog, setConnectionPackageDialog] = useState<ConnectionPackageDialogState>(() => createClosedConnectionPackageDialogState());
|
||
const [pendingConnectionImportPayload, setPendingConnectionImportPayload] = useState<string | null>(null);
|
||
const [aiPanelRenderNonce, setAiPanelRenderNonce] = useState(0);
|
||
const sidebarWidth = useStore(state => state.sidebarWidth);
|
||
const setSidebarWidth = useStore(state => state.setSidebarWidth);
|
||
const aiPanelVisible = useStore(state => state.aiPanelVisible);
|
||
const detachedAIChatWindow = useStore(state => state.detachedAIChatWindow);
|
||
const detachAIChatPanel = useStore(state => state.detachAIChatPanel);
|
||
const aiChatDetached = Boolean(detachedAIChatWindow);
|
||
const toggleAIPanel = useStore(state => state.toggleAIPanel);
|
||
const setAIPanelVisible = useStore(state => state.setAIPanelVisible);
|
||
const windowDiagSequenceRef = React.useRef(0);
|
||
const windowDiagLastSignatureRef = React.useRef('');
|
||
const windowDiagLastAtRef = React.useRef(0);
|
||
const connectionWorkbenchState = getConnectionWorkbenchState(isStoreHydrated, hasLoadedSecureConfig);
|
||
const securityUpdateStatusMeta = useMemo(
|
||
() => getSecurityUpdateStatusMeta(securityUpdateStatus, t),
|
||
[securityUpdateStatus, t],
|
||
);
|
||
const securityUpdateEntryVisibility = useMemo(
|
||
() => resolveSecurityUpdateEntryVisibility(securityUpdateStatus),
|
||
[securityUpdateStatus],
|
||
);
|
||
|
||
const windowCornerRadius = 14;
|
||
useEffect(() => {
|
||
if (typeof window === 'undefined') {
|
||
return;
|
||
}
|
||
const syncViewportWidth = () => {
|
||
setViewportWidth(window.innerWidth || document.documentElement?.clientWidth || 1280);
|
||
};
|
||
syncViewportWidth();
|
||
window.addEventListener('resize', syncViewportWidth);
|
||
return () => window.removeEventListener('resize', syncViewportWidth);
|
||
}, []);
|
||
|
||
useEffect(()=>{
|
||
if (typeof document === 'undefined' || !document.body) {
|
||
return;
|
||
}
|
||
switch(windowState){
|
||
case 'fullscreen':
|
||
case 'maximized':
|
||
document.body.style.setProperty('--gonavi-border-radius', '0px');
|
||
break;
|
||
default:
|
||
document.body.style.setProperty('--gonavi-border-radius', `${windowCornerRadius}px`);
|
||
break;
|
||
}
|
||
}, [windowState]);
|
||
|
||
// 同步 macOS 窗口透明度：opacity=1.0 且 blur=0 时关闭 NSVisualEffectView，
|
||
// 避免 GPU 持续计算窗口背后的模糊合成
|
||
useEffect(() => {
|
||
try {
|
||
void SetWindowTranslucency(resolvedAppearance.opacity, resolvedAppearance.blur).catch(() => undefined);
|
||
} catch(e) { /* ignore */ }
|
||
}, [resolvedAppearance.blur, resolvedAppearance.opacity]);
|
||
|
||
useEffect(() => {
|
||
let cancelled = false;
|
||
try {
|
||
Environment()
|
||
.then((env) => {
|
||
if (cancelled) return;
|
||
const platform = String(env?.platform || '').toLowerCase();
|
||
setRuntimePlatform(platform);
|
||
setRuntimeBuildType(String(env?.buildType || '').toLowerCase());
|
||
setIsLinuxRuntime(platform === 'linux');
|
||
})
|
||
.catch(() => {
|
||
if (cancelled) return;
|
||
const platform = detectNavigatorPlatform();
|
||
const normalized = /linux/i.test(platform)
|
||
? 'linux'
|
||
: (/mac/i.test(platform) ? 'darwin' : (/win/i.test(platform) ? 'windows' : ''));
|
||
setRuntimePlatform(normalized);
|
||
setIsLinuxRuntime(normalized === 'linux');
|
||
});
|
||
} catch(e) {
|
||
if (cancelled) return;
|
||
const platform = detectNavigatorPlatform();
|
||
const normalized = /linux/i.test(platform)
|
||
? 'linux'
|
||
: (/mac/i.test(platform) ? 'darwin' : (/win/i.test(platform) ? 'windows' : ''));
|
||
setRuntimePlatform(normalized);
|
||
setIsLinuxRuntime(normalized === 'linux');
|
||
}
|
||
return () => {
|
||
cancelled = true;
|
||
};
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (isStoreHydrated) {
|
||
return;
|
||
}
|
||
const unsubscribe = useStore.persist.onFinishHydration(() => {
|
||
setIsStoreHydrated(true);
|
||
});
|
||
return () => {
|
||
unsubscribe();
|
||
};
|
||
}, [isStoreHydrated]);
|
||
|
||
useEffect(() => {
|
||
if (!isStoreHydrated) {
|
||
return;
|
||
}
|
||
|
||
let cancelled = false;
|
||
const loadSavedQueries = async () => {
|
||
try {
|
||
await bootstrapSavedQueries({
|
||
backend: (window as any).go?.app?.App,
|
||
replaceSavedQueries: (queries) => {
|
||
if (!cancelled) {
|
||
replaceSavedQueries(queries);
|
||
}
|
||
},
|
||
});
|
||
} catch (err) {
|
||
console.warn('Failed to bootstrap saved queries', err);
|
||
}
|
||
};
|
||
|
||
void loadSavedQueries();
|
||
return () => {
|
||
cancelled = true;
|
||
};
|
||
}, [isStoreHydrated, replaceSavedQueries]);
|
||
|
||
const normalizeSecurityUpdateStatus = useCallback((status?: Partial<SecurityUpdateStatus> | null): SecurityUpdateStatus => {
|
||
const fallback = createEmptySecurityUpdateStatus();
|
||
return {
|
||
...fallback,
|
||
...(status ?? {}),
|
||
summary: {
|
||
...fallback.summary,
|
||
...(status?.summary ?? {}),
|
||
},
|
||
issues: Array.isArray(status?.issues) ? status.issues : [],
|
||
};
|
||
}, []);
|
||
|
||
const applySecurityUpdateStatus = useCallback((
|
||
status?: Partial<SecurityUpdateStatus> | null,
|
||
options?: {
|
||
openSettings?: boolean;
|
||
refreshFocus?: boolean;
|
||
resetBannerDismissed?: boolean;
|
||
},
|
||
) => {
|
||
const nextStatus = normalizeSecurityUpdateStatus(status);
|
||
const visibility = resolveSecurityUpdateEntryVisibility(nextStatus);
|
||
setSecurityUpdateStatus(nextStatus);
|
||
setIsSecurityUpdateIntroOpen(visibility.showIntro);
|
||
if (options?.resetBannerDismissed !== false) {
|
||
setIsSecurityUpdateBannerDismissed(false);
|
||
}
|
||
if (options?.openSettings) {
|
||
if (options.refreshFocus !== false) {
|
||
setSecurityUpdateSettingsFocusTarget(resolveSecurityUpdateSettingsFocusTarget(nextStatus));
|
||
setSecurityUpdateSettingsFocusRequest((current) => current + 1);
|
||
}
|
||
setIsSecurityUpdateSettingsOpen(true);
|
||
}
|
||
return nextStatus;
|
||
}, [normalizeSecurityUpdateStatus]);
|
||
|
||
useEffect(() => {
|
||
if (!isStoreHydrated) {
|
||
return;
|
||
}
|
||
|
||
let cancelled = false;
|
||
const loadSecureConfig = async () => {
|
||
try {
|
||
const result = await bootstrapSecureConfig({
|
||
backend: (window as any).go?.app?.App,
|
||
autoStartLegacySecurityUpdate: true,
|
||
replaceConnections,
|
||
replaceGlobalProxy,
|
||
t,
|
||
});
|
||
if (cancelled) {
|
||
return;
|
||
}
|
||
setSecurityUpdateRawPayload(result.rawPayload);
|
||
setSecurityUpdateHasLegacySensitiveItems(result.hasLegacySensitiveItems);
|
||
applySecurityUpdateStatus(result.status);
|
||
} catch (err) {
|
||
console.warn('Failed to bootstrap secure config', err);
|
||
} finally {
|
||
if (!cancelled) {
|
||
setHasLoadedSecureConfig(true);
|
||
}
|
||
}
|
||
};
|
||
|
||
void loadSecureConfig();
|
||
return () => {
|
||
cancelled = true;
|
||
};
|
||
}, [applySecurityUpdateStatus, isStoreHydrated, replaceConnections, replaceGlobalProxy, t]);
|
||
|
||
useEffect(() => {
|
||
let cancelled = false;
|
||
let startupWindowTimer: number | null = null;
|
||
let restoredOnce = false;
|
||
const maxApplyAttempts = 8;
|
||
const applyRetryDelayMs = 350;
|
||
const settleDelayMs = 180;
|
||
const useMaximiseForStartup = isWindowsPlatform();
|
||
|
||
const checkStartupPreferenceApplied = async (): Promise<boolean> => {
|
||
try {
|
||
if (await WindowIsFullscreen()) {
|
||
return true;
|
||
}
|
||
} catch (_) {
|
||
// ignore
|
||
}
|
||
try {
|
||
if (await WindowIsMaximised()) {
|
||
return true;
|
||
}
|
||
} catch (_) {
|
||
// ignore
|
||
}
|
||
return false;
|
||
};
|
||
|
||
const markAppliedMaximisedOrFullscreen = (mode: 'maximised' | 'fullscreen') => {
|
||
// 启动偏好成功后立刻固化 windowState，避免宽限期内被写成 normal 导致下次半窗
|
||
if (mode === 'maximised' || useMaximiseForStartup) {
|
||
useStore.getState().setWindowState('maximized');
|
||
} else {
|
||
useStore.getState().setWindowState('fullscreen');
|
||
}
|
||
clearStartupWindowRestorePending();
|
||
};
|
||
|
||
// mode:
|
||
// - maximised: 始终最大化（Windows 启动偏好 / 记忆的 maximized / Windows 上的 fullscreen 记忆）
|
||
// - fullscreen: 非 Windows 优先真全屏，失败再最大化
|
||
// 第 1 次立即执行（delay=0），避免 Windows 先闪 1024×768 半窗再最大化
|
||
const applyStartupWindowChrome = (attempt: number, mode: 'maximised' | 'fullscreen') => {
|
||
if (startupWindowTimer !== null) {
|
||
window.clearTimeout(startupWindowTimer);
|
||
}
|
||
const delayMs = attempt <= 1 ? 0 : applyRetryDelayMs;
|
||
startupWindowTimer = window.setTimeout(() => {
|
||
if (cancelled) {
|
||
return;
|
||
}
|
||
void Promise.resolve()
|
||
.then(async () => {
|
||
if (await checkStartupPreferenceApplied()) {
|
||
markAppliedMaximisedOrFullscreen(mode);
|
||
return;
|
||
}
|
||
try {
|
||
if (mode === 'maximised') {
|
||
await WindowMaximise();
|
||
await new Promise((resolve) => window.setTimeout(resolve, settleDelayMs));
|
||
} else {
|
||
await WindowFullscreen();
|
||
await new Promise((resolve) => window.setTimeout(resolve, settleDelayMs));
|
||
if (await checkStartupPreferenceApplied()) {
|
||
markAppliedMaximisedOrFullscreen(mode);
|
||
return;
|
||
}
|
||
await WindowMaximise();
|
||
await new Promise((resolve) => window.setTimeout(resolve, settleDelayMs));
|
||
}
|
||
} catch (e) {
|
||
console.warn("Wails Window APIs unavailable", e);
|
||
}
|
||
|
||
if (await checkStartupPreferenceApplied()) {
|
||
markAppliedMaximisedOrFullscreen(mode);
|
||
return;
|
||
}
|
||
if (attempt < maxApplyAttempts) {
|
||
applyStartupWindowChrome(attempt + 1, mode);
|
||
} else {
|
||
// 最终仍失败：结束宽限，避免长期阻断 bounds 记忆；下次启动会再试
|
||
clearStartupWindowRestorePending();
|
||
void emitWindowDiagnostic('warn:startup-maximise-failed', {
|
||
mode,
|
||
attempts: attempt,
|
||
});
|
||
}
|
||
});
|
||
}, delayMs);
|
||
};
|
||
|
||
const restoreWindowState = async () => {
|
||
if (cancelled) return;
|
||
// 仅在 hydration 完成后跑一次（或显式重入）；避免未水合默认态先写半窗 bounds
|
||
if (!useStore.persist.hasHydrated()) {
|
||
return;
|
||
}
|
||
if (restoredOnce) {
|
||
return;
|
||
}
|
||
restoredOnce = true;
|
||
|
||
const state = useStore.getState();
|
||
// 1) 「启动时最大化」开关优先（Windows 按 Maximize 处理）
|
||
if (state.startupFullscreen) {
|
||
markStartupWindowRestorePending(3200);
|
||
applyStartupWindowChrome(1, useMaximiseForStartup ? 'maximised' : 'fullscreen');
|
||
return;
|
||
}
|
||
// 2) 记忆用户上次窗口态：最大化/全屏
|
||
const savedState = state.windowState;
|
||
if (savedState === 'fullscreen') {
|
||
// Windows 上记忆的 fullscreen 也走最大化，避免真全屏后标题栏交互困难
|
||
markStartupWindowRestorePending(3200);
|
||
applyStartupWindowChrome(1, useMaximiseForStartup ? 'maximised' : 'fullscreen');
|
||
return;
|
||
}
|
||
if (savedState === 'maximized') {
|
||
// 必须重试：Windows 冷启动 HWND/WebView2 未就绪时单次 Maximise 经常失败，
|
||
// 会残留 main.go 默认 1024x768 贴左上角；任务栏恢复后才“突然正常”。
|
||
markStartupWindowRestorePending(3200);
|
||
applyStartupWindowChrome(1, 'maximised');
|
||
return;
|
||
}
|
||
// 3) 普通窗口：恢复用户调整过的尺寸和位置
|
||
const bounds = state.windowBounds;
|
||
if (!bounds || bounds.width < 400 || bounds.height < 300) {
|
||
// 无记忆尺寸时，Windows 默认左上角小窗看起来像“只开了一半”，改为居中可用尺寸
|
||
if (isWindowsPlatform()) {
|
||
try {
|
||
const nextBounds = resolveDefaultStartupWindowBounds(readCurrentVisibleViewport());
|
||
WindowSetSize(nextBounds.width, nextBounds.height);
|
||
WindowSetPosition(nextBounds.x, nextBounds.y);
|
||
state.setWindowBounds(nextBounds);
|
||
state.setWindowState('normal');
|
||
void emitWindowDiagnostic('adjust:startup-default-window-bounds', {
|
||
to: nextBounds,
|
||
});
|
||
} catch (e) {
|
||
console.warn('Failed to apply default Windows startup bounds', e);
|
||
}
|
||
}
|
||
return;
|
||
}
|
||
try {
|
||
const nextBounds = resolveVisibleStartupWindowBounds(bounds, readCurrentVisibleViewport());
|
||
if (
|
||
nextBounds.x !== bounds.x ||
|
||
nextBounds.y !== bounds.y ||
|
||
nextBounds.width !== bounds.width ||
|
||
nextBounds.height !== bounds.height
|
||
) {
|
||
void emitWindowDiagnostic('adjust:startup-window-bounds', {
|
||
from: bounds,
|
||
to: nextBounds,
|
||
});
|
||
state.setWindowBounds(nextBounds);
|
||
}
|
||
WindowSetSize(nextBounds.width, nextBounds.height);
|
||
WindowSetPosition(nextBounds.x, nextBounds.y);
|
||
state.setWindowState('normal');
|
||
} catch (e) {
|
||
console.warn('Failed to restore window bounds', e);
|
||
}
|
||
};
|
||
|
||
if (useStore.persist.hasHydrated()) {
|
||
void restoreWindowState();
|
||
}
|
||
const unsubscribeHydration = useStore.persist.onFinishHydration(() => {
|
||
if (cancelled) {
|
||
return;
|
||
}
|
||
// hydration 完成后再恢复，确保读到 startupFullscreen / windowState / windowBounds
|
||
restoredOnce = false;
|
||
void restoreWindowState();
|
||
});
|
||
|
||
return () => {
|
||
cancelled = true;
|
||
if (startupWindowTimer !== null) {
|
||
window.clearTimeout(startupWindowTimer);
|
||
}
|
||
unsubscribeHydration();
|
||
};
|
||
}, []);
|
||
|
||
// 定时保存窗口状态、尺寸与位置
|
||
useEffect(() => {
|
||
const SAVE_INTERVAL_MS = 2000;
|
||
let cancelled = false;
|
||
let hydrated = useStore.persist.hasHydrated();
|
||
let eventSaveTimer: number | null = null;
|
||
let boundsRepairTimer: number | null = null;
|
||
let lastSaved = '';
|
||
|
||
const saveWindowState = async () => {
|
||
if (cancelled || !hydrated) {
|
||
return;
|
||
}
|
||
try {
|
||
const [isFs, isMax] = await Promise.all([
|
||
safeWindowRuntimeCall(() => WindowIsFullscreen(), false),
|
||
safeWindowRuntimeCall(() => WindowIsMaximised(), false),
|
||
]);
|
||
|
||
// 启动最大化/全屏尚未 settle 时，禁止把状态写回 normal，
|
||
// 否则下次冷启动会落到默认 1024x768 左上角（Windows 首次打开“只显示一半”）。
|
||
if (isStartupWindowRestorePending()) {
|
||
if (!isFs && !isMax) {
|
||
return;
|
||
}
|
||
clearStartupWindowRestorePending();
|
||
}
|
||
|
||
// 保存窗口状态
|
||
const store = useStore.getState();
|
||
const newState = isFs ? 'fullscreen' : (isMax ? 'maximized' : 'normal');
|
||
if (store.windowState !== newState) {
|
||
void emitWindowDiagnostic('transition:windowState', {
|
||
from: store.windowState,
|
||
to: newState,
|
||
});
|
||
store.setWindowState(newState);
|
||
}
|
||
|
||
// 只在普通窗口模式下保存尺寸和位置
|
||
if (isFs || isMax) return;
|
||
|
||
const [size, pos] = await Promise.all([
|
||
safeWindowRuntimeCall(() => WindowGetSize(), null),
|
||
safeWindowRuntimeCall(() => WindowGetPosition(), null),
|
||
]);
|
||
if (!size || !pos) return;
|
||
const w = Math.trunc(Number(size.w || 0));
|
||
const h = Math.trunc(Number(size.h || 0));
|
||
const x = Math.trunc(Number(pos.x || 0));
|
||
const y = Math.trunc(Number(pos.y || 0));
|
||
if (w < 400 || h < 300) return;
|
||
|
||
const key = `${w},${h},${x},${y}`;
|
||
if (key === lastSaved) return;
|
||
lastSaved = key;
|
||
if (Math.abs(x) > 5000 || Math.abs(y) > 5000) {
|
||
void emitWindowDiagnostic('anomaly:windowBounds', { width: w, height: h, x, y });
|
||
}
|
||
store.setWindowBounds({ width: w, height: h, x, y });
|
||
} catch (e) {
|
||
// 静默忽略
|
||
}
|
||
};
|
||
|
||
const scheduleWindowStateSave = (delayMs = 120) => {
|
||
if (cancelled || !hydrated) {
|
||
return;
|
||
}
|
||
if (eventSaveTimer !== null) {
|
||
window.clearTimeout(eventSaveTimer);
|
||
}
|
||
eventSaveTimer = window.setTimeout(() => {
|
||
eventSaveTimer = null;
|
||
void saveWindowState();
|
||
}, delayMs);
|
||
};
|
||
|
||
const repairRuntimeWindowBounds = async () => {
|
||
if (cancelled || !hydrated) {
|
||
return;
|
||
}
|
||
// 启动最大化 settle 期间不要抢跑普通 bounds 校正
|
||
if (isStartupWindowRestorePending()) {
|
||
return;
|
||
}
|
||
try {
|
||
const [isFs, isMax] = await Promise.all([
|
||
safeWindowRuntimeCall(() => WindowIsFullscreen(), false),
|
||
safeWindowRuntimeCall(() => WindowIsMaximised(), false),
|
||
]);
|
||
if (isFs || isMax) {
|
||
return;
|
||
}
|
||
const [size, pos] = await Promise.all([
|
||
safeWindowRuntimeCall(() => WindowGetSize(), null),
|
||
safeWindowRuntimeCall(() => WindowGetPosition(), null),
|
||
]);
|
||
if (!size || !pos) {
|
||
return;
|
||
}
|
||
const currentBounds = {
|
||
width: Math.trunc(Number(size.w || 0)),
|
||
height: Math.trunc(Number(size.h || 0)),
|
||
x: Math.trunc(Number(pos.x || 0)),
|
||
y: Math.trunc(Number(pos.y || 0)),
|
||
};
|
||
if (currentBounds.width <= 0 || currentBounds.height <= 0) {
|
||
return;
|
||
}
|
||
const nextBounds = resolveVisibleStartupWindowBounds(currentBounds, readCurrentVisibleViewport());
|
||
if (
|
||
nextBounds.x === currentBounds.x &&
|
||
nextBounds.y === currentBounds.y &&
|
||
nextBounds.width === currentBounds.width &&
|
||
nextBounds.height === currentBounds.height
|
||
) {
|
||
return;
|
||
}
|
||
void emitWindowDiagnostic('adjust:runtime-window-bounds', {
|
||
from: currentBounds,
|
||
to: nextBounds,
|
||
});
|
||
WindowSetSize(nextBounds.width, nextBounds.height);
|
||
WindowSetPosition(nextBounds.x, nextBounds.y);
|
||
lastSaved = `${nextBounds.width},${nextBounds.height},${nextBounds.x},${nextBounds.y}`;
|
||
useStore.getState().setWindowBounds(nextBounds);
|
||
window.dispatchEvent(new Event('resize'));
|
||
} catch {
|
||
// Wails runtime window APIs are best-effort here.
|
||
}
|
||
};
|
||
|
||
const scheduleWindowBoundsRepair = (delayMs = 80) => {
|
||
if (cancelled || !hydrated) {
|
||
return;
|
||
}
|
||
if (boundsRepairTimer !== null) {
|
||
window.clearTimeout(boundsRepairTimer);
|
||
}
|
||
boundsRepairTimer = window.setTimeout(() => {
|
||
boundsRepairTimer = null;
|
||
void repairRuntimeWindowBounds();
|
||
}, delayMs);
|
||
};
|
||
|
||
const handleWindowRuntimeChange = () => {
|
||
scheduleWindowBoundsRepair();
|
||
scheduleWindowStateSave(260);
|
||
};
|
||
|
||
const handleVisibilityChange = () => {
|
||
if (document.visibilityState === 'visible') {
|
||
scheduleWindowBoundsRepair();
|
||
scheduleWindowStateSave(260);
|
||
}
|
||
};
|
||
|
||
const handleWindowLifecycleFlush = () => {
|
||
void saveWindowState();
|
||
};
|
||
|
||
if (hydrated) {
|
||
scheduleWindowBoundsRepair(360);
|
||
scheduleWindowStateSave(320);
|
||
}
|
||
const unsubscribeHydration = useStore.persist.onFinishHydration(() => {
|
||
if (cancelled || hydrated) {
|
||
return;
|
||
}
|
||
hydrated = true;
|
||
scheduleWindowBoundsRepair(360);
|
||
scheduleWindowStateSave(320);
|
||
});
|
||
|
||
const timer = window.setInterval(() => {
|
||
void saveWindowState();
|
||
}, SAVE_INTERVAL_MS);
|
||
window.addEventListener('resize', handleWindowRuntimeChange);
|
||
window.addEventListener('focus', handleWindowRuntimeChange);
|
||
window.addEventListener('pageshow', handleWindowRuntimeChange);
|
||
window.addEventListener('pagehide', handleWindowLifecycleFlush, { capture: true });
|
||
window.addEventListener('beforeunload', handleWindowLifecycleFlush, { capture: true });
|
||
document.addEventListener('visibilitychange', handleVisibilityChange);
|
||
return () => {
|
||
cancelled = true;
|
||
if (eventSaveTimer !== null) {
|
||
window.clearTimeout(eventSaveTimer);
|
||
}
|
||
if (boundsRepairTimer !== null) {
|
||
window.clearTimeout(boundsRepairTimer);
|
||
}
|
||
window.clearInterval(timer);
|
||
window.removeEventListener('resize', handleWindowRuntimeChange);
|
||
window.removeEventListener('focus', handleWindowRuntimeChange);
|
||
window.removeEventListener('pageshow', handleWindowRuntimeChange);
|
||
window.removeEventListener('pagehide', handleWindowLifecycleFlush, { capture: true });
|
||
window.removeEventListener('beforeunload', handleWindowLifecycleFlush, { capture: true });
|
||
document.removeEventListener('visibilitychange', handleVisibilityChange);
|
||
unsubscribeHydration();
|
||
};
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (!isWindowsPlatform()) {
|
||
return;
|
||
}
|
||
|
||
let cancelled = false;
|
||
let inFlight = false;
|
||
let lastRatio = Number(window.devicePixelRatio) || 1;
|
||
let lastFixAt = 0;
|
||
let activationTimer: number | null = null;
|
||
let resizeTimer: number | null = null;
|
||
let minimisedSeen = false;
|
||
let hiddenSeen = document.visibilityState === 'hidden';
|
||
|
||
const wait = (ms: number) => new Promise<void>((resolve) => window.setTimeout(resolve, ms));
|
||
|
||
const fixWindowScaleIfNeeded = async (reason: WindowScaleFixReason) => {
|
||
if (cancelled || inFlight) return;
|
||
const now = Date.now();
|
||
if (now - lastFixAt < 700) return;
|
||
inFlight = true;
|
||
try {
|
||
const [isFullscreen, isMaximised] = await Promise.all([
|
||
safeWindowRuntimeCall(() => WindowIsFullscreen(), false),
|
||
safeWindowRuntimeCall(() => WindowIsMaximised(), false),
|
||
]);
|
||
|
||
// 全屏状态下只广播 resize，避免破坏用户的全屏上下文。
|
||
if (isFullscreen) {
|
||
window.dispatchEvent(new Event('resize'));
|
||
lastFixAt = Date.now();
|
||
return;
|
||
}
|
||
|
||
const size = await safeWindowRuntimeCall(() => WindowGetSize(), null);
|
||
const width = Math.trunc(Number(size?.w || 0));
|
||
const height = Math.trunc(Number(size?.h || 0));
|
||
const hasViewportScaleDrift = hasWindowsViewportScaleDrift({
|
||
windowWidth: width,
|
||
innerWidth: window.innerWidth,
|
||
devicePixelRatio: Number(window.devicePixelRatio) || 1,
|
||
visualViewportScale: window.visualViewport?.scale,
|
||
});
|
||
const shouldResetWebViewZoom = shouldResetWebViewZoomForScaleFix(reason, hasViewportScaleDrift);
|
||
|
||
if (shouldResetWebViewZoom && !isMaximised) {
|
||
try {
|
||
const res = await (window as any).go?.app?.App?.ResetWebViewZoom?.();
|
||
if (!res?.success) {
|
||
console.warn('ResetWebViewZoom unavailable in fixWindowScaleIfNeeded:', res?.message);
|
||
}
|
||
} catch (e) {
|
||
console.warn('ResetWebViewZoom call failed in fixWindowScaleIfNeeded', e);
|
||
}
|
||
}
|
||
|
||
if (isMaximised) {
|
||
if (!shouldToggleMaximisedWindowForScaleFix(reason, hasViewportScaleDrift)) {
|
||
// restore（任务栏点击恢复后字体异常变大/变糊）的零感知修复路径：
|
||
// 调 backend App.ResetWebViewZoom 触发 WebView2 ICoreWebView2Controller::put_ZoomFactor(1.0)，
|
||
// 让 WebView2 重算 D2D/DirectWrite 字体度量。该异常不一定表现为 viewport ratio drift，
|
||
// 所以 restore 场景不能依赖 hasViewportScaleDrift。完全不动窗口、零动画。
|
||
// backend 失败（wails 升级破坏反射 / 非 Windows）时回退到 dispatch resize 兜底；
|
||
// 用户仍可按 Ctrl+Shift+0 手动 toggle 修复。
|
||
if (shouldResetWebViewZoom) {
|
||
try {
|
||
const res = await (window as any).go?.app?.App?.ResetWebViewZoom?.();
|
||
if (!res?.success) {
|
||
console.warn('ResetWebViewZoom unavailable in fixWindowScaleIfNeeded:', res?.message);
|
||
}
|
||
} catch (e) {
|
||
console.warn('ResetWebViewZoom call failed in fixWindowScaleIfNeeded', e);
|
||
}
|
||
}
|
||
window.dispatchEvent(new Event('resize'));
|
||
lastFixAt = Date.now();
|
||
return;
|
||
}
|
||
|
||
try {
|
||
WindowUnmaximise();
|
||
await wait(96);
|
||
WindowMaximise();
|
||
await wait(96);
|
||
} catch (e) {
|
||
console.warn("Wails Window maximise restore unavailable in fixWindowScaleIfNeeded", e);
|
||
}
|
||
window.dispatchEvent(new Event('resize'));
|
||
lastFixAt = Date.now();
|
||
return;
|
||
}
|
||
|
||
if (width <= 0 || height <= 0) {
|
||
window.dispatchEvent(new Event('resize'));
|
||
lastFixAt = Date.now();
|
||
return;
|
||
}
|
||
|
||
if (!shouldApplyWindowsScaleFix(reason, hasViewportScaleDrift)) {
|
||
window.dispatchEvent(new Event('resize'));
|
||
lastFixAt = Date.now();
|
||
return;
|
||
}
|
||
|
||
const nudgedWidth = getWindowsScaleFixNudgedWidth(width);
|
||
try {
|
||
WindowSetSize(nudgedWidth, height);
|
||
await wait(28);
|
||
WindowSetSize(width, height);
|
||
} catch(e) {}
|
||
window.dispatchEvent(new Event('resize'));
|
||
lastFixAt = Date.now();
|
||
} catch(e) {
|
||
console.warn("Wails Window APIs unavailable in fixWindowScaleIfNeeded", e);
|
||
} finally {
|
||
inFlight = false;
|
||
}
|
||
};
|
||
|
||
const rememberMinimisedState = async (): Promise<boolean> => {
|
||
if (cancelled) return false;
|
||
const isMinimised = await safeWindowRuntimeCall(() => WindowIsMinimised(), false);
|
||
if (isMinimised) {
|
||
minimisedSeen = true;
|
||
}
|
||
return isMinimised;
|
||
};
|
||
|
||
const rememberMinimisedStateSoon = () => {
|
||
window.setTimeout(() => {
|
||
if (cancelled) return;
|
||
void rememberMinimisedState();
|
||
}, 120);
|
||
};
|
||
|
||
const checkDevicePixelRatio = () => {
|
||
if (cancelled) return;
|
||
const currentRatio = Number(window.devicePixelRatio) || 1;
|
||
if (Math.abs(currentRatio - lastRatio) < 0.02) {
|
||
return;
|
||
}
|
||
lastRatio = currentRatio;
|
||
if (minimisedSeen || hiddenSeen) {
|
||
scheduleActivationFix();
|
||
return;
|
||
}
|
||
void fixWindowScaleIfNeeded('ratio-change');
|
||
};
|
||
|
||
const scheduleDevicePixelRatioCheck = (trigger: WindowsScaleCheckTrigger) => {
|
||
if (cancelled) return;
|
||
const delayMs = resolveWindowsScaleCheckDelayMs(trigger);
|
||
if (delayMs <= 0) {
|
||
checkDevicePixelRatio();
|
||
return;
|
||
}
|
||
|
||
if (resizeTimer !== null) {
|
||
window.clearTimeout(resizeTimer);
|
||
}
|
||
resizeTimer = window.setTimeout(() => {
|
||
resizeTimer = null;
|
||
if (cancelled) return;
|
||
checkDevicePixelRatio();
|
||
}, delayMs);
|
||
};
|
||
|
||
const scheduleActivationFix = () => {
|
||
if (cancelled) return;
|
||
if (activationTimer !== null) {
|
||
window.clearTimeout(activationTimer);
|
||
}
|
||
const delayMs = (minimisedSeen || hiddenSeen) ? 260 : 80;
|
||
activationTimer = window.setTimeout(async () => {
|
||
activationTimer = null;
|
||
if (cancelled) return;
|
||
if (await rememberMinimisedState()) {
|
||
return;
|
||
}
|
||
const reason: WindowScaleFixReason = (minimisedSeen || hiddenSeen) ? 'restore' : 'activation';
|
||
minimisedSeen = false;
|
||
hiddenSeen = false;
|
||
void fixWindowScaleIfNeeded(reason);
|
||
}, delayMs);
|
||
};
|
||
|
||
const handleWindowFocus = () => {
|
||
if (cancelled) return;
|
||
scheduleDevicePixelRatioCheck('focus');
|
||
scheduleActivationFix();
|
||
};
|
||
|
||
const handleWindowBlur = () => {
|
||
if (cancelled) return;
|
||
if (document.visibilityState === 'hidden') {
|
||
hiddenSeen = true;
|
||
}
|
||
rememberMinimisedStateSoon();
|
||
};
|
||
|
||
const handleVisibilityChange = () => {
|
||
if (cancelled) return;
|
||
if (document.visibilityState !== 'visible') {
|
||
hiddenSeen = true;
|
||
rememberMinimisedStateSoon();
|
||
return;
|
||
}
|
||
scheduleDevicePixelRatioCheck('visibilitychange');
|
||
scheduleActivationFix();
|
||
};
|
||
|
||
const handlePageShow = () => {
|
||
if (cancelled) return;
|
||
scheduleDevicePixelRatioCheck('pageshow');
|
||
scheduleActivationFix();
|
||
};
|
||
|
||
const handleWindowResize = () => {
|
||
rememberMinimisedStateSoon();
|
||
scheduleDevicePixelRatioCheck('resize');
|
||
};
|
||
|
||
const pollTimer = window.setInterval(() => {
|
||
void rememberMinimisedState();
|
||
checkDevicePixelRatio();
|
||
}, 900);
|
||
// Windows 冷启动：WebView2 首次布局常只铺满左上角一部分，任务栏恢复才会走 restore 修复。
|
||
// 这里在启动后主动按 startup 原因做几次轻量 settle，避免用户必须双击任务栏。
|
||
// 间隔需大于 fixWindowScaleIfNeeded 的 700ms 节流，确保多次都能真正执行。
|
||
const startupLayoutFixTimers = [220, 1000, 1900].map((delayMs) => (
|
||
window.setTimeout(() => {
|
||
if (cancelled) return;
|
||
void fixWindowScaleIfNeeded('startup');
|
||
}, delayMs)
|
||
));
|
||
window.addEventListener('resize', handleWindowResize);
|
||
window.addEventListener('focus', handleWindowFocus);
|
||
window.addEventListener('blur', handleWindowBlur);
|
||
window.addEventListener('pageshow', handlePageShow);
|
||
document.addEventListener('visibilitychange', handleVisibilityChange);
|
||
|
||
return () => {
|
||
cancelled = true;
|
||
if (activationTimer !== null) {
|
||
window.clearTimeout(activationTimer);
|
||
}
|
||
if (resizeTimer !== null) {
|
||
window.clearTimeout(resizeTimer);
|
||
}
|
||
for (const timer of startupLayoutFixTimers) {
|
||
window.clearTimeout(timer);
|
||
}
|
||
window.clearInterval(pollTimer);
|
||
window.removeEventListener('resize', handleWindowResize);
|
||
window.removeEventListener('focus', handleWindowFocus);
|
||
window.removeEventListener('blur', handleWindowBlur);
|
||
window.removeEventListener('pageshow', handlePageShow);
|
||
document.removeEventListener('visibilitychange', handleVisibilityChange);
|
||
};
|
||
}, []);
|
||
|
||
const {
|
||
bgContent, bgMain,
|
||
floatingLogButtonBgColor, floatingLogButtonBorderColor, floatingLogButtonShadow, floatingLogButtonTextColor,
|
||
isSidebarCompact, isSidebarNarrow, isSidebarUltraCompact,
|
||
overlayTheme, renderUtilityModalTitle,
|
||
sidebarCreateConnectionActionStyle, sidebarHorizontalPadding, sidebarQueryActionStyle,
|
||
toolCenterContentPanelStyle, toolCenterDetailBodyStyle, toolCenterDetailPanelStyle,
|
||
toolCenterModalContentStyle, toolCenterModalSplitStyle, toolCenterModalWorkspaceStyle,
|
||
toolCenterNavPanelStyle, toolCenterNavScrollStyle, toolCenterRowDescriptionStyle, toolCenterRowStyle,
|
||
toolCenterScrollableListStyle, utilityButtonStyle,
|
||
utilityModalShellStyle, utilityMutedTextStyle, utilityPanelStyle,
|
||
} = useAppUtilityStyles({
|
||
blurFilter,
|
||
darkMode,
|
||
effectiveOpacity,
|
||
effectiveUiScale,
|
||
isV2Ui,
|
||
resolvedAppearance,
|
||
sidebarWidth,
|
||
});
|
||
|
||
const addTab = useStore(state => state.addTab);
|
||
const activeContext = useStore(state => state.activeContext);
|
||
const connections = useStore(state => state.connections);
|
||
const tabs = useStore(state => state.tabs);
|
||
const activeTabId = useStore(state => state.activeTabId);
|
||
const setActiveTab = useStore(state => state.setActiveTab);
|
||
const savedQueries = useStore(state => state.savedQueries);
|
||
const saveQuery = useStore(state => state.saveQuery);
|
||
const applicationQuitConfirmRef = useRef<{ destroy: () => void } | null>(null);
|
||
const applicationQuitHandlingRef = useRef(false);
|
||
const openSecurityUpdateSettings = useCallback((focusTarget: SecurityUpdateSettingsFocusTarget | null = null) => {
|
||
setIsSecurityUpdateIntroOpen(false);
|
||
setSecurityUpdateSettingsFocusTarget(focusTarget);
|
||
setSecurityUpdateSettingsFocusRequest((current) => current + 1);
|
||
setIsSecurityUpdateSettingsOpen(true);
|
||
}, []);
|
||
const handleOpenSecurityUpdateSettings = useCallback((focusTarget: SecurityUpdateSettingsFocusTarget | null = null) => {
|
||
openSecurityUpdateSettings(focusTarget);
|
||
}, [openSecurityUpdateSettings]);
|
||
const runSecurityUpdateRound = useCallback(async (mode: 'start' | 'retry' | 'restart') => {
|
||
const backendApp = (window as any).go?.app?.App;
|
||
const stageText = mode === 'start'
|
||
? t('app.security_update.stage.checking_saved_config')
|
||
: (mode === 'retry'
|
||
? t('app.security_update.stage.verifying_result')
|
||
: t('app.security_update.stage.updating_secure_storage'));
|
||
const detailsWereOpen = isSecurityUpdateSettingsOpen;
|
||
setSecurityUpdateProgressStage(stageText);
|
||
setIsSecurityUpdateProgressOpen(true);
|
||
setIsSecurityUpdateIntroOpen(false);
|
||
setIsSecurityUpdateSettingsOpen(false);
|
||
|
||
let nextStatus: SecurityUpdateStatus | null = null;
|
||
let shouldOpenSettings = false;
|
||
let refreshSettingsFocus = false;
|
||
try {
|
||
if (mode === 'start') {
|
||
const result = await startSecurityUpdateFromBootstrap({
|
||
backend: backendApp,
|
||
replaceConnections,
|
||
replaceGlobalProxy,
|
||
t,
|
||
});
|
||
if (result.error) {
|
||
throw result.error;
|
||
}
|
||
nextStatus = normalizeSecurityUpdateStatus(result.status);
|
||
} else if (mode === 'retry') {
|
||
if (typeof backendApp?.RetrySecurityUpdateCurrentRound !== 'function') {
|
||
throw new Error(t('app.security_update.error.capability_unavailable'));
|
||
}
|
||
nextStatus = normalizeSecurityUpdateStatus(await backendApp.RetrySecurityUpdateCurrentRound({
|
||
migrationId: securityUpdateStatus.migrationId,
|
||
}));
|
||
} else {
|
||
if (typeof backendApp?.RestartSecurityUpdate !== 'function') {
|
||
throw new Error(t('app.security_update.error.capability_unavailable'));
|
||
}
|
||
nextStatus = normalizeSecurityUpdateStatus(await backendApp.RestartSecurityUpdate({
|
||
migrationId: securityUpdateStatus.migrationId,
|
||
sourceType: 'current_app_saved_config',
|
||
rawPayload: securityUpdateRawPayload ?? '',
|
||
options: {
|
||
allowPartial: true,
|
||
writeBackup: true,
|
||
},
|
||
}));
|
||
}
|
||
|
||
if (mode !== 'start') {
|
||
nextStatus = await finalizeSecurityUpdateStatus({
|
||
backend: backendApp,
|
||
replaceConnections,
|
||
replaceGlobalProxy,
|
||
t,
|
||
}, nextStatus);
|
||
}
|
||
|
||
shouldOpenSettings = nextStatus.overallStatus === 'needs_attention' || nextStatus.overallStatus === 'rolled_back';
|
||
refreshSettingsFocus = shouldRefreshSecurityUpdateDetailsFocus({
|
||
requestedOpen: shouldOpenSettings,
|
||
wasOpen: detailsWereOpen,
|
||
});
|
||
} catch (err: any) {
|
||
console.warn('Failed to execute security update round', err);
|
||
setIsSecurityUpdateProgressOpen(false);
|
||
if (detailsWereOpen) {
|
||
setIsSecurityUpdateSettingsOpen(true);
|
||
}
|
||
void message.error(err?.message || t('app.security_update.message.not_finished_retry_later'));
|
||
return;
|
||
}
|
||
|
||
if (!nextStatus) {
|
||
setIsSecurityUpdateProgressOpen(false);
|
||
return;
|
||
}
|
||
setIsSecurityUpdateProgressOpen(false);
|
||
applySecurityUpdateStatus(nextStatus, {
|
||
openSettings: shouldOpenSettings,
|
||
refreshFocus: refreshSettingsFocus,
|
||
});
|
||
|
||
if (nextStatus.overallStatus === 'completed') {
|
||
setSecurityUpdateHasLegacySensitiveItems(false);
|
||
setSecurityUpdateRawPayload(null);
|
||
setIsSecurityUpdateSettingsOpen(false);
|
||
void message.success(t('app.security_update.message.completed'));
|
||
} else if (nextStatus.overallStatus === 'needs_attention') {
|
||
void message.warning(t('app.security_update.message.needs_attention'));
|
||
} else if (nextStatus.overallStatus === 'rolled_back') {
|
||
void message.warning(t('app.security_update.message.rolled_back'));
|
||
}
|
||
}, [
|
||
applySecurityUpdateStatus,
|
||
isSecurityUpdateSettingsOpen,
|
||
normalizeSecurityUpdateStatus,
|
||
replaceConnections,
|
||
replaceGlobalProxy,
|
||
securityUpdateRawPayload,
|
||
securityUpdateStatus.migrationId,
|
||
t,
|
||
]);
|
||
const handleStartSecurityUpdate = useCallback(() => {
|
||
void runSecurityUpdateRound('start');
|
||
}, [runSecurityUpdateRound]);
|
||
const handlePrepareExternalMCPUse = useCallback(async () => {
|
||
const backendApp = (window as any).go?.app?.App;
|
||
const result = await prepareSecureConfigForExternalMCP({
|
||
backend: backendApp,
|
||
replaceConnections,
|
||
replaceGlobalProxy,
|
||
t,
|
||
});
|
||
if (result.error) {
|
||
throw result.error;
|
||
}
|
||
if (!result.status) {
|
||
return;
|
||
}
|
||
|
||
const nextStatus = normalizeSecurityUpdateStatus(result.status);
|
||
const shouldOpenSettings = nextStatus.overallStatus === 'needs_attention' || nextStatus.overallStatus === 'rolled_back';
|
||
applySecurityUpdateStatus(nextStatus, {
|
||
openSettings: shouldOpenSettings,
|
||
refreshFocus: shouldOpenSettings,
|
||
});
|
||
|
||
if (nextStatus.overallStatus === 'completed') {
|
||
setSecurityUpdateHasLegacySensitiveItems(false);
|
||
setSecurityUpdateRawPayload(null);
|
||
setIsSecurityUpdateSettingsOpen(false);
|
||
return;
|
||
}
|
||
|
||
const hasConnectionIssue = nextStatus.issues.some((issue) =>
|
||
issue.scope === 'connection' && issue.status !== 'updated',
|
||
);
|
||
if (nextStatus.overallStatus === 'rolled_back' || hasConnectionIssue) {
|
||
throw new Error(t('app.security_update.message.needs_attention'));
|
||
}
|
||
if (nextStatus.overallStatus === 'needs_attention') {
|
||
void message.warning(t('app.security_update.message.needs_attention'));
|
||
}
|
||
}, [
|
||
applySecurityUpdateStatus,
|
||
normalizeSecurityUpdateStatus,
|
||
replaceConnections,
|
||
replaceGlobalProxy,
|
||
t,
|
||
]);
|
||
const handleRetrySecurityUpdate = useCallback(() => {
|
||
void runSecurityUpdateRound('retry');
|
||
}, [runSecurityUpdateRound]);
|
||
const handleRestartSecurityUpdate = useCallback(() => {
|
||
void runSecurityUpdateRound('restart');
|
||
}, [runSecurityUpdateRound]);
|
||
const handlePostponeSecurityUpdate = useCallback(async () => {
|
||
const backendApp = (window as any).go?.app?.App;
|
||
setIsSecurityUpdateIntroOpen(false);
|
||
try {
|
||
if (typeof backendApp?.DismissSecurityUpdateReminder === 'function') {
|
||
const nextStatus = mergeSecurityUpdateStatusWithLegacySource(
|
||
await backendApp.DismissSecurityUpdateReminder(),
|
||
securityUpdateRawPayload,
|
||
{ t },
|
||
);
|
||
applySecurityUpdateStatus(nextStatus);
|
||
return;
|
||
}
|
||
applySecurityUpdateStatus({
|
||
overallStatus: 'postponed',
|
||
canStart: true,
|
||
canPostpone: true,
|
||
summary: securityUpdateStatus.summary,
|
||
issues: securityUpdateStatus.issues,
|
||
});
|
||
} catch (err: any) {
|
||
console.warn('Failed to dismiss security update reminder', err);
|
||
void message.error(err?.message || t('app.security_update.message.postpone_failed'));
|
||
}
|
||
}, [
|
||
applySecurityUpdateStatus,
|
||
securityUpdateRawPayload,
|
||
securityUpdateStatus.issues,
|
||
securityUpdateStatus.summary,
|
||
t,
|
||
]);
|
||
const handleSecurityUpdateIssueAction = useCallback((issue: SecurityUpdateIssue) => {
|
||
const repairEntry = resolveSecurityUpdateRepairEntry(issue, connections, securityUpdateStatus, t);
|
||
if (repairEntry.type === 'warning') {
|
||
void message.warning(repairEntry.message);
|
||
return;
|
||
}
|
||
if (repairEntry.type === 'connection') {
|
||
setIsSecurityUpdateSettingsOpen(false);
|
||
setSecurityUpdateRepairSource(repairEntry.repairSource);
|
||
setEditingConnection(repairEntry.connection);
|
||
setIsModalOpen(true);
|
||
return;
|
||
}
|
||
if (repairEntry.type === 'proxy') {
|
||
setIsSecurityUpdateSettingsOpen(false);
|
||
setSecurityUpdateRepairSource(repairEntry.repairSource);
|
||
setIsProxyModalOpen(true);
|
||
return;
|
||
}
|
||
if (repairEntry.type === 'ai') {
|
||
setIsSecurityUpdateSettingsOpen(false);
|
||
setSecurityUpdateRepairSource(repairEntry.repairSource);
|
||
setFocusedAIProviderId(repairEntry.providerId);
|
||
setActiveSettingsCenterGroupKey('services');
|
||
setActiveSettingsCenterPane({ key: 'ai', group: 'services' });
|
||
setIsSettingsModalOpen(true);
|
||
return;
|
||
}
|
||
if (repairEntry.type === 'retry') {
|
||
void runSecurityUpdateRound('retry');
|
||
return;
|
||
}
|
||
setSecurityUpdateRepairSource(null);
|
||
openSecurityUpdateSettings(repairEntry.focusTarget);
|
||
}, [connections, openSecurityUpdateSettings, runSecurityUpdateRound, securityUpdateStatus, t]);
|
||
const isMacRuntime = runtimePlatform === 'darwin'
|
||
|| (runtimePlatform === '' && /mac/i.test(detectNavigatorPlatform()));
|
||
const isWindowsRuntime = runtimePlatform === 'windows'
|
||
|| (runtimePlatform === '' && isWindowsPlatform());
|
||
const useNativeMacWindowControls = isMacRuntime && appearance.useNativeMacWindowControls === true;
|
||
const activeShortcutPlatform = getShortcutPlatform(isMacRuntime);
|
||
const macWindowDiagnosticsEnabled = shouldEnableMacWindowDiagnostics(
|
||
isMacRuntime,
|
||
import.meta.env.DEV,
|
||
import.meta.env.VITE_GONAVI_ENABLE_MAC_WINDOW_DIAGNOSTICS,
|
||
);
|
||
useEffect(() => {
|
||
return installGlobalImeCompositionTracking(window, document);
|
||
}, []);
|
||
// 启动发现更新时打开设置中心「关于」页（由 useAppUpdateManager 通过 bridge 调用）
|
||
const updateCenterBridgeRef = useRef<{
|
||
open: () => void;
|
||
close: () => void;
|
||
isOpen: () => boolean;
|
||
} | null>(null);
|
||
const {
|
||
aboutDisplayVersion,
|
||
aboutInfo,
|
||
aboutLoading,
|
||
aboutUpdateStatus,
|
||
canShowProgressEntry,
|
||
changeUpdateChannel,
|
||
checkForUpdates,
|
||
downloadUpdate,
|
||
formatBytes,
|
||
handleInstallFromProgress,
|
||
hideUpdateDownloadProgress,
|
||
isAboutOpen,
|
||
isBackgroundProgressForLatestUpdate,
|
||
isLatestUpdateDownloaded,
|
||
isUpdateChannelLoading,
|
||
isUpdateChannelSaving,
|
||
lastUpdateInfo,
|
||
markUpdateProgressDismissed,
|
||
muteLatestUpdate,
|
||
openDownloadedUpdateDirectory,
|
||
prepareAboutSurface,
|
||
setIsAboutOpen,
|
||
showUpdateDownloadProgress,
|
||
updateChannel,
|
||
updateDownloadProgress,
|
||
} = useAppUpdateManager({
|
||
runtimeBuildType,
|
||
t,
|
||
updateCenterBridgeRef,
|
||
});
|
||
const [aboutLastCheckedAt, setAboutLastCheckedAt] = useState('');
|
||
useEffect(() => {
|
||
if (!lastUpdateInfo) {
|
||
return;
|
||
}
|
||
setAboutLastCheckedAt(formatAboutCheckedAt(new Date()));
|
||
}, [
|
||
lastUpdateInfo?.channel,
|
||
lastUpdateInfo?.currentVersion,
|
||
lastUpdateInfo?.hasUpdate,
|
||
lastUpdateInfo?.latestVersion,
|
||
]);
|
||
|
||
const emitWindowDiagnostic = useCallback(async (stage: string, extra: Record<string, unknown> = {}) => {
|
||
if (!macWindowDiagnosticsEnabled) {
|
||
return;
|
||
}
|
||
const backendApp = (window as any).go?.app?.App;
|
||
if (typeof backendApp?.LogWindowDiagnostic !== 'function') {
|
||
return;
|
||
}
|
||
try {
|
||
const [isFullscreen, isMaximised, isMinimised, isNormal, size, position] = await Promise.all([
|
||
safeWindowRuntimeCall(() => WindowIsFullscreen(), false),
|
||
safeWindowRuntimeCall(() => WindowIsMaximised(), false),
|
||
safeWindowRuntimeCall(() => WindowIsMinimised(), false),
|
||
safeWindowRuntimeCall(() => WindowIsNormal(), false),
|
||
safeWindowRuntimeCall(() => WindowGetSize(), null),
|
||
safeWindowRuntimeCall(() => WindowGetPosition(), null),
|
||
]);
|
||
const payload = {
|
||
seq: ++windowDiagSequenceRef.current,
|
||
ts: new Date().toISOString(),
|
||
stage,
|
||
nativeControls: useNativeMacWindowControls,
|
||
documentVisible: document.visibilityState,
|
||
documentHasFocus: document.hasFocus(),
|
||
devicePixelRatio: Number(window.devicePixelRatio) || 1,
|
||
windowState: {
|
||
isFullscreen,
|
||
isMaximised,
|
||
isMinimised,
|
||
isNormal,
|
||
},
|
||
size: size ? { w: Math.trunc(Number(size.w || 0)), h: Math.trunc(Number(size.h || 0)) } : null,
|
||
position: position ? { x: Math.trunc(Number(position.x || 0)), y: Math.trunc(Number(position.y || 0)) } : null,
|
||
extra,
|
||
};
|
||
const signature = JSON.stringify({
|
||
stage,
|
||
nativeControls: payload.nativeControls,
|
||
visible: payload.documentVisible,
|
||
focus: payload.documentHasFocus,
|
||
state: payload.windowState,
|
||
size: payload.size,
|
||
position: payload.position,
|
||
extra,
|
||
});
|
||
const now = Date.now();
|
||
if (signature === windowDiagLastSignatureRef.current && now-windowDiagLastAtRef.current < 250) {
|
||
return;
|
||
}
|
||
windowDiagLastSignatureRef.current = signature;
|
||
windowDiagLastAtRef.current = now;
|
||
await backendApp.LogWindowDiagnostic(stage, JSON.stringify(payload));
|
||
} catch (error) {
|
||
console.warn('Failed to emit window diagnostic', error);
|
||
}
|
||
}, [macWindowDiagnosticsEnabled, useNativeMacWindowControls]);
|
||
|
||
useEffect(() => {
|
||
if (!isStoreHydrated || !isMacRuntime) {
|
||
return;
|
||
}
|
||
const backendApp = (window as any).go?.app?.App;
|
||
if (typeof backendApp?.SetMacNativeWindowControls !== 'function') {
|
||
return;
|
||
}
|
||
void safeWindowRuntimeCall(() => SetMacNativeWindowControls(useNativeMacWindowControls), undefined);
|
||
}, [isMacRuntime, isStoreHydrated, useNativeMacWindowControls]);
|
||
|
||
useEffect(() => {
|
||
if (!macWindowDiagnosticsEnabled) {
|
||
return;
|
||
}
|
||
|
||
let cancelled = false;
|
||
let pollTimer: number | null = null;
|
||
let burstTimer: number | null = null;
|
||
|
||
const stopBurst = () => {
|
||
if (pollTimer !== null) {
|
||
window.clearInterval(pollTimer);
|
||
pollTimer = null;
|
||
}
|
||
if (burstTimer !== null) {
|
||
window.clearTimeout(burstTimer);
|
||
burstTimer = null;
|
||
}
|
||
};
|
||
|
||
const startBurst = (reason: string, extra: Record<string, unknown> = {}) => {
|
||
if (cancelled) {
|
||
return;
|
||
}
|
||
void emitWindowDiagnostic(`burst:start:${reason}`, extra);
|
||
if (pollTimer === null) {
|
||
pollTimer = window.setInterval(() => {
|
||
void emitWindowDiagnostic(`burst:tick:${reason}`);
|
||
}, 250);
|
||
}
|
||
if (burstTimer !== null) {
|
||
window.clearTimeout(burstTimer);
|
||
}
|
||
burstTimer = window.setTimeout(() => {
|
||
stopBurst();
|
||
void emitWindowDiagnostic(`burst:stop:${reason}`);
|
||
}, 6000);
|
||
};
|
||
|
||
const handleFocus = () => {
|
||
void emitWindowDiagnostic('event:focus');
|
||
};
|
||
const handleBlur = () => {
|
||
void emitWindowDiagnostic('event:blur');
|
||
};
|
||
const handleResize = () => {
|
||
void emitWindowDiagnostic('event:resize');
|
||
};
|
||
const handleVisibilityChange = () => {
|
||
void emitWindowDiagnostic('event:visibilitychange', { visibility: document.visibilityState });
|
||
};
|
||
const handleEditableKeydown = (event: KeyboardEvent) => {
|
||
if (!isEditableElement(event.target)) {
|
||
return;
|
||
}
|
||
const key = String(event.key || '');
|
||
const maybeFullscreenKey = key === 'Escape' || key.toLowerCase() === 'f' || key === 'Process';
|
||
const hasModifier = event.ctrlKey || event.metaKey || event.altKey;
|
||
startBurst('editable-keydown', {
|
||
key,
|
||
code: String(event.code || ''),
|
||
ctrlKey: event.ctrlKey,
|
||
metaKey: event.metaKey,
|
||
altKey: event.altKey,
|
||
shiftKey: event.shiftKey,
|
||
maybeFullscreenKey,
|
||
hasModifier,
|
||
});
|
||
};
|
||
const handleCompositionStart = () => {
|
||
startBurst('compositionstart');
|
||
};
|
||
const handleCompositionEnd = () => {
|
||
startBurst('compositionend');
|
||
};
|
||
|
||
void emitWindowDiagnostic('session:start');
|
||
window.addEventListener('focus', handleFocus);
|
||
window.addEventListener('blur', handleBlur);
|
||
window.addEventListener('resize', handleResize);
|
||
window.addEventListener('keydown', handleEditableKeydown, true);
|
||
window.addEventListener('compositionstart', handleCompositionStart, true);
|
||
window.addEventListener('compositionend', handleCompositionEnd, true);
|
||
document.addEventListener('visibilitychange', handleVisibilityChange);
|
||
|
||
return () => {
|
||
cancelled = true;
|
||
stopBurst();
|
||
window.removeEventListener('focus', handleFocus);
|
||
window.removeEventListener('blur', handleBlur);
|
||
window.removeEventListener('resize', handleResize);
|
||
window.removeEventListener('keydown', handleEditableKeydown, true);
|
||
window.removeEventListener('compositionstart', handleCompositionStart, true);
|
||
window.removeEventListener('compositionend', handleCompositionEnd, true);
|
||
document.removeEventListener('visibilitychange', handleVisibilityChange);
|
||
};
|
||
}, [emitWindowDiagnostic, macWindowDiagnosticsEnabled]);
|
||
|
||
const handleNewQuery = useCallback(() => {
|
||
let connId = '';
|
||
let db = '';
|
||
|
||
// Priority: Active Tab Context (if connection still valid) > Sidebar Selection (activeContext)
|
||
if (activeTabId) {
|
||
const currentTab = tabs.find(t => t.id === activeTabId);
|
||
if (currentTab && currentTab.connectionId && connections.some(c => c.id === currentTab.connectionId)) {
|
||
connId = currentTab.connectionId;
|
||
db = currentTab.dbName || '';
|
||
}
|
||
}
|
||
|
||
// Fallback: Sidebar selection context (only if connection still valid)
|
||
if (!connId && activeContext?.connectionId && connections.some(c => c.id === activeContext.connectionId)) {
|
||
connId = activeContext.connectionId;
|
||
db = activeContext.dbName || '';
|
||
}
|
||
|
||
addTab({
|
||
id: `query-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
|
||
title: t('query.new'),
|
||
type: 'query',
|
||
connectionId: connId,
|
||
dbName: db,
|
||
query: ''
|
||
});
|
||
}, [activeTabId, tabs, connections, activeContext, addTab, t]);
|
||
|
||
const switchActiveTabByOffset = useCallback((offset: 1 | -1) => {
|
||
if (tabs.length < 2) return;
|
||
const activeIndex = tabs.findIndex(tab => tab.id === activeTabId);
|
||
const baseIndex = activeIndex >= 0 ? activeIndex : 0;
|
||
const nextIndex = (baseIndex + offset + tabs.length) % tabs.length;
|
||
setActiveTab(tabs[nextIndex].id);
|
||
}, [activeTabId, setActiveTab, tabs]);
|
||
|
||
const resetApplicationQuitRequest = useCallback(() => {
|
||
applicationQuitHandlingRef.current = false;
|
||
applicationQuitConfirmRef.current = null;
|
||
void CancelApplicationQuit();
|
||
}, []);
|
||
|
||
const forceQuitApplication = useCallback(async () => {
|
||
const res = await ForceQuitApplication();
|
||
if (res && res.success === false) {
|
||
throw new Error(res.message || t('common.unknown'));
|
||
}
|
||
}, [t]);
|
||
|
||
const handleApplicationQuitRequest = useCallback(async () => {
|
||
if (applicationQuitHandlingRef.current) {
|
||
return;
|
||
}
|
||
applicationQuitHandlingRef.current = true;
|
||
|
||
let targets;
|
||
try {
|
||
targets = await collectApplicationQuitUnsavedSQLTargets(tabs, savedQueries);
|
||
} catch (error) {
|
||
resetApplicationQuitRequest();
|
||
message.error(t('app.quit.unsaved_sql.inspect_failed', {
|
||
detail: error instanceof Error ? error.message : String(error),
|
||
}));
|
||
return;
|
||
}
|
||
|
||
if (targets.length === 0) {
|
||
try {
|
||
await forceQuitApplication();
|
||
} catch (error) {
|
||
resetApplicationQuitRequest();
|
||
message.error(t('app.quit.message.quit_failed', {
|
||
detail: error instanceof Error ? error.message : String(error),
|
||
}));
|
||
}
|
||
return;
|
||
}
|
||
|
||
const label = buildApplicationQuitUnsavedSQLLabel(targets);
|
||
let destroyConfirm: (() => void) | null = null;
|
||
const confirmRef = Modal.confirm({
|
||
title: t('app.quit.unsaved_sql.title'),
|
||
content: t(targets.length === 1
|
||
? 'app.quit.unsaved_sql.content_single'
|
||
: 'app.quit.unsaved_sql.content_multiple', { label }),
|
||
okText: t('app.quit.unsaved_sql.save_exit'),
|
||
cancelText: t('app.quit.unsaved_sql.cancel'),
|
||
closable: true,
|
||
maskClosable: false,
|
||
okButtonProps: { danger: true, type: 'primary' },
|
||
footer: (_, { OkBtn, CancelBtn }) => (
|
||
<>
|
||
<Button
|
||
onClick={() => {
|
||
destroyConfirm?.();
|
||
applicationQuitConfirmRef.current = null;
|
||
void forceQuitApplication().catch((error) => {
|
||
resetApplicationQuitRequest();
|
||
message.error(t('app.quit.message.quit_failed', {
|
||
detail: error instanceof Error ? error.message : String(error),
|
||
}));
|
||
});
|
||
}}
|
||
>
|
||
{t('app.quit.unsaved_sql.confirm_exit')}
|
||
</Button>
|
||
<CancelBtn />
|
||
<OkBtn />
|
||
</>
|
||
),
|
||
onCancel: () => {
|
||
resetApplicationQuitRequest();
|
||
},
|
||
onOk: async () => {
|
||
try {
|
||
await saveApplicationQuitUnsavedSQLTargets(targets, saveQuery);
|
||
message.success(t('app.quit.unsaved_sql.saved'));
|
||
await forceQuitApplication();
|
||
} catch (error) {
|
||
resetApplicationQuitRequest();
|
||
message.error(t('app.quit.unsaved_sql.save_failed_cancel_exit', {
|
||
detail: error instanceof Error ? error.message : String(error),
|
||
}));
|
||
throw error;
|
||
}
|
||
},
|
||
});
|
||
destroyConfirm = confirmRef.destroy;
|
||
applicationQuitConfirmRef.current = confirmRef;
|
||
}, [forceQuitApplication, resetApplicationQuitRequest, saveQuery, savedQueries, t, tabs]);
|
||
|
||
useEffect(() => {
|
||
const offBeforeClose = EventsOn('app:before-close-request', () => {
|
||
void handleApplicationQuitRequest();
|
||
});
|
||
return () => {
|
||
offBeforeClose();
|
||
};
|
||
}, [handleApplicationQuitRequest]);
|
||
|
||
const closeConnectionPackageDialog = useCallback(() => {
|
||
setConnectionPackageDialog(createClosedConnectionPackageDialogState());
|
||
setPendingConnectionImportPayload(null);
|
||
setToolCenterBackGroupKey(null);
|
||
setActiveToolCenterPane((current) => (current?.key === 'connection-package' ? null : current));
|
||
}, []);
|
||
|
||
const refreshConnectionsAfterImport = useCallback(async (importedViews: SavedConnection[]) => {
|
||
const backendApp = (window as any).go?.app?.App;
|
||
if (typeof backendApp?.GetSavedConnections === 'function') {
|
||
let latestConnections: unknown;
|
||
try {
|
||
latestConnections = await GetSavedConnections();
|
||
} catch (error) {
|
||
const detail = error instanceof Error ? error.message : String(error ?? '').trim();
|
||
throw new Error(
|
||
detail
|
||
? t('app.connection_package.message.import_failed_with_error', { error: detail })
|
||
: t('app.connection_package.message.import_failed'),
|
||
);
|
||
}
|
||
if (!Array.isArray(latestConnections)) {
|
||
throw new Error(t('app.connection_package.error.refresh_failed_no_connections'));
|
||
}
|
||
replaceConnections(latestConnections as SavedConnection[]);
|
||
return;
|
||
}
|
||
|
||
const latestConnections = useStore.getState().connections;
|
||
replaceConnections(mergeSavedConnections(latestConnections, importedViews));
|
||
}, [replaceConnections]);
|
||
|
||
const importConnectionsPayload = useCallback(async (raw: string, password: string) => {
|
||
const backendApp = (window as any).go?.app?.App;
|
||
if (typeof backendApp?.ImportConnectionsPayload !== 'function') {
|
||
throw new Error(t('app.connection_package.error.import_capability_unavailable'));
|
||
}
|
||
|
||
let importedViews: unknown;
|
||
try {
|
||
importedViews = await backendApp.ImportConnectionsPayload(raw, password);
|
||
} catch (error) {
|
||
if (isConnectionPackagePasswordRequiredError(error)) {
|
||
throw error;
|
||
}
|
||
const detail = error instanceof Error ? error.message : String(error ?? '').trim();
|
||
throw new Error(
|
||
detail
|
||
? t('app.connection_package.message.import_failed_with_error', { error: detail })
|
||
: t('app.connection_package.message.import_failed'),
|
||
);
|
||
}
|
||
if (!Array.isArray(importedViews)) {
|
||
throw new Error(t('app.connection_package.error.import_no_connections'));
|
||
}
|
||
await refreshConnectionsAfterImport(importedViews as SavedConnection[]);
|
||
return importedViews as SavedConnection[];
|
||
}, [refreshConnectionsAfterImport, t]);
|
||
|
||
const handleImportConnections = async (sourceGroup?: ToolCenterGroupKey) => {
|
||
setToolCenterBackGroupKey(sourceGroup ?? null);
|
||
const res = await (window as any).go.app.App.ImportConfigFile();
|
||
if (!res.success) {
|
||
if (res.message !== "已取消") {
|
||
void message.error(t('app.connection_package.message.import_failed_with_error', { error: res.message }));
|
||
}
|
||
return;
|
||
}
|
||
|
||
const raw = typeof res.data === 'string' ? res.data : String(res.data ?? '');
|
||
const importKind = detectConnectionImportKind(raw);
|
||
|
||
if (importKind === 'invalid') {
|
||
void message.error(t('app.connection_package.message.unsupported_file_format'));
|
||
return;
|
||
}
|
||
|
||
try {
|
||
setPendingConnectionImportPayload(null);
|
||
const importedViews = await importConnectionsPayload(raw, '');
|
||
if ((importKind === 'mysql-workbench-xml' || importKind === 'navicat-ncx') && importedViews.some(v => !v.hasPrimaryPassword)) {
|
||
void message.warning(t('app.connection_package.message.imported_with_missing_passwords', { count: importedViews.length }));
|
||
} else {
|
||
void message.success(t('app.connection_package.message.imported_connections', { count: importedViews.length }));
|
||
}
|
||
} catch (e: any) {
|
||
if (isConnectionPackagePasswordRequiredError(e)) {
|
||
if (sourceGroup) {
|
||
setToolCenterBackGroupKey(sourceGroup);
|
||
setActiveToolCenterPane({ key: 'connection-package', group: sourceGroup });
|
||
}
|
||
setPendingConnectionImportPayload(raw);
|
||
setConnectionPackageDialog({
|
||
open: true,
|
||
mode: 'import',
|
||
includeSecrets: true,
|
||
useFilePassword: false,
|
||
password: '',
|
||
error: '',
|
||
confirmLoading: false,
|
||
});
|
||
return;
|
||
}
|
||
void message.error(e?.message || t('app.connection_package.message.import_failed'));
|
||
}
|
||
};
|
||
|
||
const handleExportConnections = async (sourceGroup?: ToolCenterGroupKey) => {
|
||
if (connections.length === 0) {
|
||
void message.warning(t('app.connection_package.message.no_connections_to_export'));
|
||
return;
|
||
}
|
||
|
||
setToolCenterBackGroupKey(sourceGroup ?? null);
|
||
if (sourceGroup) {
|
||
setActiveToolCenterPane({ key: 'connection-package', group: sourceGroup });
|
||
}
|
||
setConnectionPackageDialog({
|
||
open: true,
|
||
mode: 'export',
|
||
includeSecrets: true,
|
||
useFilePassword: false,
|
||
password: '',
|
||
error: '',
|
||
confirmLoading: false,
|
||
});
|
||
};
|
||
|
||
const handleConfirmConnectionPackageDialog = async () => {
|
||
const backendApp = (window as any).go?.app?.App;
|
||
const password = normalizeConnectionPackagePassword(connectionPackageDialog.password);
|
||
|
||
if (connectionPackageDialog.mode === 'import' && !password) {
|
||
setConnectionPackageDialog((current) => ({
|
||
...current,
|
||
error: t('app.connection_package.error.restore_password_required'),
|
||
}));
|
||
return;
|
||
}
|
||
|
||
if (
|
||
connectionPackageDialog.mode === 'export'
|
||
&& connectionPackageDialog.includeSecrets
|
||
&& connectionPackageDialog.useFilePassword
|
||
&& !password
|
||
) {
|
||
setConnectionPackageDialog((current) => ({
|
||
...current,
|
||
error: t('app.connection_package.error.file_password_required'),
|
||
}));
|
||
return;
|
||
}
|
||
|
||
setConnectionPackageDialog((current) => ({
|
||
...current,
|
||
password: (
|
||
current.mode === 'export'
|
||
&& (!current.includeSecrets || !current.useFilePassword)
|
||
) ? '' : password,
|
||
error: '',
|
||
confirmLoading: true,
|
||
}));
|
||
|
||
try {
|
||
if (connectionPackageDialog.mode === 'export') {
|
||
if (typeof backendApp?.ExportConnectionsPackage !== 'function') {
|
||
throw new Error(t('app.connection_package.error.export_capability_unavailable'));
|
||
}
|
||
|
||
let res: unknown;
|
||
try {
|
||
res = await backendApp.ExportConnectionsPackage({
|
||
includeSecrets: connectionPackageDialog.includeSecrets,
|
||
filePassword: (
|
||
connectionPackageDialog.includeSecrets
|
||
&& connectionPackageDialog.useFilePassword
|
||
) ? password : '',
|
||
});
|
||
} catch (error) {
|
||
const detail = error instanceof Error ? error.message : String(error ?? '').trim();
|
||
throw new Error(
|
||
detail
|
||
? `${t('app.connection_package.message.export_failed')}: ${detail}`
|
||
: t('app.connection_package.message.export_failed'),
|
||
);
|
||
}
|
||
const exportResult = resolveConnectionPackageExportResult(connectionPackageDialog, res);
|
||
if (exportResult.kind === 'canceled') {
|
||
setConnectionPackageDialog(exportResult.nextDialog);
|
||
return;
|
||
}
|
||
if (exportResult.kind === 'failed') {
|
||
throw new Error(exportResult.error);
|
||
}
|
||
|
||
closeConnectionPackageDialog();
|
||
void message.success(t('app.connection_package.message.export_succeeded'));
|
||
return;
|
||
}
|
||
|
||
if (!pendingConnectionImportPayload) {
|
||
throw new Error(t('app.connection_package.error.missing_import_payload'));
|
||
}
|
||
|
||
const importedViews = await importConnectionsPayload(pendingConnectionImportPayload, password);
|
||
closeConnectionPackageDialog();
|
||
void message.success(t('app.connection_package.message.imported_connections', { count: importedViews.length }));
|
||
} catch (e: any) {
|
||
setConnectionPackageDialog((current) => ({
|
||
...current,
|
||
confirmLoading: false,
|
||
error: e?.message || t(
|
||
current.mode === 'export'
|
||
? 'app.connection_package.message.export_failed'
|
||
: 'app.connection_package.message.import_failed',
|
||
),
|
||
}));
|
||
}
|
||
};
|
||
|
||
const [isToolsModalOpen, setIsToolsModalOpen] = useState(false);
|
||
const [activeToolCenterGroupKey, setActiveToolCenterGroupKey] = useState<ToolCenterGroupKey>('config');
|
||
const [toolCenterBackGroupKey, setToolCenterBackGroupKey] = useState<ToolCenterGroupKey | null>(null);
|
||
const [activeToolCenterPane, setActiveToolCenterPane] = useState<ToolCenterPaneState | null>(null);
|
||
const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false);
|
||
const [activeSettingsCenterGroupKey, setActiveSettingsCenterGroupKey] = useState<SettingsCenterGroupKey>('preferences');
|
||
const [activeSettingsCenterPane, setActiveSettingsCenterPane] = useState<SettingsCenterPaneState | null>(null);
|
||
const [isThemeModalOpen, setIsThemeModalOpen] = useState(false);
|
||
type ThemeSettingsSection = 'theme' | 'appearance' | 'workspace';
|
||
const THEME_SETTINGS_SECTION_STORAGE_KEY = 'gonavi.themeSettingsSection';
|
||
const sanitizeThemeSettingsSection = useCallback((value: unknown): ThemeSettingsSection => {
|
||
const normalized = String(value || '').trim().toLowerCase();
|
||
if (normalized === 'appearance' || normalized === 'workspace') {
|
||
return normalized;
|
||
}
|
||
return 'theme';
|
||
}, []);
|
||
const [themeModalSection, setThemeModalSection] = useState<ThemeSettingsSection>(() => {
|
||
try {
|
||
return sanitizeThemeSettingsSection(window.localStorage.getItem(THEME_SETTINGS_SECTION_STORAGE_KEY));
|
||
} catch {
|
||
return 'theme';
|
||
}
|
||
});
|
||
useEffect(() => {
|
||
try {
|
||
window.localStorage.setItem(THEME_SETTINGS_SECTION_STORAGE_KEY, themeModalSection);
|
||
} catch {
|
||
// ignore persistence failures
|
||
}
|
||
}, [themeModalSection]);
|
||
const [isLinuxCJKFontBannerDismissed, setIsLinuxCJKFontBannerDismissed] = useState(false);
|
||
const [isAppearanceModalOpen, setIsAppearanceModalOpen] = useState(false);
|
||
const [isShortcutModalOpen, setIsShortcutModalOpen] = useState(false);
|
||
const [isSnippetModalOpen, setIsSnippetModalOpen] = useState(false);
|
||
const [capturingShortcutAction, setCapturingShortcutAction] = useState<ShortcutAction | null>(null);
|
||
const tabDisplaySettingsPanelRef = useRef<HTMLDivElement | null>(null);
|
||
const [tabDisplaySettingsFocusRequest, setTabDisplaySettingsFocusRequest] = useState(0);
|
||
const isThemeSettingsPaneOpen = activeSettingsCenterPane?.key === 'theme';
|
||
useEffect(() => {
|
||
const shouldLoadInstalledFonts =
|
||
runtimePlatform === 'linux' || ((isThemeModalOpen || isThemeSettingsPaneOpen) && themeModalSection === 'appearance');
|
||
if (!shouldLoadInstalledFonts) {
|
||
return;
|
||
}
|
||
if (hasLoadedInstalledFontsRef.current || isFontFamiliesLoading) {
|
||
return;
|
||
}
|
||
|
||
let cancelled = false;
|
||
hasLoadedInstalledFontsRef.current = true;
|
||
setIsFontFamiliesLoading(true);
|
||
setFontFamiliesLoadError(null);
|
||
|
||
ListInstalledFontFamilies()
|
||
.then((result) => {
|
||
if (cancelled) {
|
||
return;
|
||
}
|
||
if (!result?.success) {
|
||
throw new Error(String(result?.message || t('app.theme.font_family.load_failed')));
|
||
}
|
||
const nextFonts = Array.isArray(result?.data)
|
||
? result.data
|
||
.map((item) => ({
|
||
family: sanitizeFontFamilyInput((item as InstalledFontFamily | Record<string, unknown>)?.family) || '',
|
||
path: typeof (item as InstalledFontFamily | Record<string, unknown>)?.path === 'string'
|
||
? String((item as InstalledFontFamily | Record<string, unknown>).path)
|
||
: undefined,
|
||
}))
|
||
.filter((item) => item.family)
|
||
: EMPTY_INSTALLED_FONT_FAMILIES;
|
||
setInstalledFontFamilies(nextFonts);
|
||
})
|
||
.catch((error) => {
|
||
if (cancelled) {
|
||
return;
|
||
}
|
||
hasLoadedInstalledFontsRef.current = false;
|
||
setFontFamiliesLoadError(String(error instanceof Error ? error.message : error || t('app.theme.font_family.load_failed')));
|
||
})
|
||
.finally(() => {
|
||
if (!cancelled) {
|
||
setIsFontFamiliesLoading(false);
|
||
}
|
||
});
|
||
|
||
return () => {
|
||
cancelled = true;
|
||
};
|
||
}, [isThemeModalOpen, isThemeSettingsPaneOpen, runtimePlatform, t, themeModalSection]);
|
||
|
||
useEffect(() => {
|
||
if ((!isThemeModalOpen && !isThemeSettingsPaneOpen) || themeModalSection !== 'workspace' || tabDisplaySettingsFocusRequest === 0) {
|
||
return;
|
||
}
|
||
const timer = window.setTimeout(() => {
|
||
tabDisplaySettingsPanelRef.current?.scrollIntoView({ block: 'start', behavior: 'smooth' });
|
||
}, 80);
|
||
return () => window.clearTimeout(timer);
|
||
}, [isThemeModalOpen, isThemeSettingsPaneOpen, themeModalSection, tabDisplaySettingsFocusRequest]);
|
||
|
||
const shortcutConflictMap = useMemo(() => {
|
||
const map: Partial<Record<ShortcutAction, ConflictInfo[]>> = {};
|
||
for (const action of SHORTCUT_ACTION_ORDER) {
|
||
const binding = resolveShortcutBinding(shortcutOptions, action, activeShortcutPlatform);
|
||
if (!binding?.enabled || !binding.combo) continue;
|
||
const conflicts = findReservedConflictsForAction(
|
||
action,
|
||
normalizeShortcutCombo(binding.combo),
|
||
activeShortcutPlatform,
|
||
);
|
||
if (conflicts.length > 0) {
|
||
map[action] = conflicts;
|
||
}
|
||
}
|
||
return map;
|
||
}, [activeShortcutPlatform, language, shortcutOptions]);
|
||
const [isProxyModalOpen, setIsProxyModalOpen] = useState(false);
|
||
const [proxyDraft, setProxyDraft] = useState<GlobalProxyConfig>(() => createGlobalProxyComparableDraft(globalProxy));
|
||
const [proxyDraftClearPassword, setProxyDraftClearPassword] = useState(false);
|
||
const [proxyApplying, setProxyApplying] = useState(false);
|
||
const [proxyTestUrl, setProxyTestUrl] = useState(DEFAULT_GLOBAL_PROXY_TEST_URL);
|
||
const [proxyTesting, setProxyTesting] = useState(false);
|
||
const [proxyTestResult, setProxyTestResult] = useState<GlobalProxyTestResultState | null>(null);
|
||
const [isDataRootModalOpen, setIsDataRootModalOpen] = useState(false);
|
||
const [dataRootInfo, setDataRootInfo] = useState<any>(null);
|
||
const [selectedDataRootPath, setSelectedDataRootPath] = useState('');
|
||
const [dataRootLoading, setDataRootLoading] = useState(false);
|
||
const [dataRootApplying, setDataRootApplying] = useState(false);
|
||
|
||
const aiEntryPlacement = resolveAIEntryPlacement();
|
||
const legacyAiEdgeHandleAttachment = resolveLegacyAIEdgeHandleAttachment(aiPanelVisible);
|
||
const aiPanelOverlayActive = aiPanelVisible && shouldOverlayAIPanel({
|
||
isV2Ui,
|
||
viewportWidth,
|
||
sidebarWidth,
|
||
panelWidth: DEFAULT_AI_PANEL_WIDTH,
|
||
});
|
||
const aiPanelRenderWidth = aiPanelOverlayActive
|
||
? resolveOverlayAIPanelWidth({
|
||
viewportWidth,
|
||
sidebarWidth,
|
||
panelWidth: DEFAULT_AI_PANEL_WIDTH,
|
||
})
|
||
: DEFAULT_AI_PANEL_WIDTH;
|
||
const appliedGlobalProxyDraft = useMemo(() => (
|
||
createGlobalProxyComparableDraft(globalProxy)
|
||
), [
|
||
globalProxy.enabled,
|
||
globalProxy.type,
|
||
globalProxy.host,
|
||
globalProxy.port,
|
||
globalProxy.user,
|
||
globalProxy.password,
|
||
globalProxy.hasPassword,
|
||
]);
|
||
const proxyDraftHost = String(proxyDraft.host || '').trim();
|
||
const proxyDraftUser = String(proxyDraft.user || '').trim();
|
||
const proxyDraftPort = Number(proxyDraft.port);
|
||
const proxyDraftPortValid = Number.isFinite(proxyDraftPort) && proxyDraftPort > 0 && proxyDraftPort <= 65535;
|
||
const proxyDraftValid = !proxyDraft.enabled || (proxyDraftHost !== '' && proxyDraftPortValid);
|
||
const proxyDraftDirty = proxyDraftClearPassword || !areGlobalProxyDraftsEqual(proxyDraft, appliedGlobalProxyDraft);
|
||
const proxyPanelOpen = isProxyModalOpen || activeSettingsCenterPane?.key === 'proxy';
|
||
const proxyPanelWasOpenRef = useRef(false);
|
||
const proxyStatusTone = proxyDraft.enabled
|
||
? (proxyDraftValid ? 'success' : 'warning')
|
||
: 'info';
|
||
const proxyStatusTitle = proxyDraft.enabled
|
||
? (proxyDraftValid ? t('app.proxy.status.enabled') : t('app.proxy.status.incomplete'))
|
||
: t('app.proxy.status.disabled');
|
||
const proxyStatusDescription = proxyDraft.enabled && proxyDraftValid
|
||
? t('app.proxy.status.enabled_description', {
|
||
type: proxyDraft.type.toUpperCase(),
|
||
endpoint: `${proxyDraftHost}:${proxyDraftPort}`,
|
||
})
|
||
: (proxyDraft.enabled
|
||
? t('app.proxy.status.incomplete_description')
|
||
: t('app.proxy.status.disabled_description'));
|
||
const proxyPresetItems = useMemo(() => ([
|
||
{ key: 'clash-mixed', label: t('app.proxy.preset.clash_mixed'), type: 'socks5' as const, host: '127.0.0.1', port: 7890 },
|
||
{ key: 'socks5-local', label: t('app.proxy.preset.socks5_local'), type: 'socks5' as const, host: '127.0.0.1', port: 1080 },
|
||
{ key: 'http-local', label: t('app.proxy.preset.http_local'), type: 'http' as const, host: '127.0.0.1', port: 8080 },
|
||
]), [t]);
|
||
const proxyTestPresetItems = useMemo(() => ([
|
||
{ key: 'github-api', label: t('app.proxy.test.preset.github_api'), url: 'https://api.github.com/' },
|
||
{ key: 'github-release', label: t('app.proxy.test.preset.github_release'), url: 'https://github.com/Syngnat/GoNavi/releases/latest' },
|
||
{ key: 'go-module-proxy', label: t('app.proxy.test.preset.go_module_proxy'), url: 'https://proxy.golang.org/' },
|
||
{ key: 'baidu', label: t('app.proxy.test.preset.baidu'), url: 'https://www.baidu.com/' },
|
||
]), [t]);
|
||
const proxyTestUrlTrimmed = String(proxyTestUrl || '').trim();
|
||
const proxyCanTest = proxyDraft.enabled && proxyDraftValid && proxyTestUrlTrimmed !== '' && !proxyTesting;
|
||
useEffect(() => {
|
||
if (!proxyPanelOpen) {
|
||
proxyPanelWasOpenRef.current = false;
|
||
return;
|
||
}
|
||
if (proxyPanelWasOpenRef.current) {
|
||
return;
|
||
}
|
||
proxyPanelWasOpenRef.current = true;
|
||
setProxyDraft(appliedGlobalProxyDraft);
|
||
setProxyDraftClearPassword(false);
|
||
}, [appliedGlobalProxyDraft, proxyPanelOpen]);
|
||
useEffect(() => {
|
||
setProxyTestResult(null);
|
||
}, [
|
||
proxyDraft.enabled,
|
||
proxyDraft.type,
|
||
proxyDraft.host,
|
||
proxyDraft.port,
|
||
proxyDraft.user,
|
||
proxyDraft.password,
|
||
proxyDraftClearPassword,
|
||
proxyTestUrlTrimmed,
|
||
]);
|
||
const resetProxyDraftToCurrent = useCallback(() => {
|
||
setProxyDraft(appliedGlobalProxyDraft);
|
||
setProxyDraftClearPassword(false);
|
||
}, [appliedGlobalProxyDraft]);
|
||
const updateProxyDraftType = useCallback((type: GlobalProxyConfig['type']) => {
|
||
setProxyDraft((current) => {
|
||
const currentPort = Number(current.port);
|
||
const previousDefault = getGlobalProxyDefaultPort(current.type);
|
||
const shouldSwitchPort = !Number.isFinite(currentPort) || currentPort === previousDefault;
|
||
return {
|
||
...current,
|
||
type,
|
||
port: shouldSwitchPort ? getGlobalProxyDefaultPort(type) : current.port,
|
||
};
|
||
});
|
||
}, []);
|
||
const applyProxyPreset = useCallback((preset: { type: GlobalProxyConfig['type']; host: string; port: number }) => {
|
||
setProxyDraft((current) => ({
|
||
...current,
|
||
enabled: true,
|
||
type: preset.type,
|
||
host: preset.host,
|
||
port: preset.port,
|
||
}));
|
||
}, []);
|
||
const handleTestGlobalProxyDraft = useCallback(async () => {
|
||
if (!proxyDraft.enabled) {
|
||
void message.warning(t('app.proxy.test.message.enable_first'));
|
||
return;
|
||
}
|
||
if (!proxyDraftValid) {
|
||
void message.warning(t('app.proxy.message.invalid_enabled'));
|
||
return;
|
||
}
|
||
if (proxyTestUrlTrimmed === '') {
|
||
void message.warning(t('app.proxy.test.message.url_required'));
|
||
return;
|
||
}
|
||
const backendApp = (window as any).go?.app?.App;
|
||
if (typeof backendApp?.TestGlobalProxyConnection !== 'function') {
|
||
void message.error(t('app.proxy.test.message.unavailable'));
|
||
return;
|
||
}
|
||
setProxyTesting(true);
|
||
try {
|
||
const res = await backendApp.TestGlobalProxyConnection({
|
||
proxy: toSaveGlobalProxyInput({
|
||
...proxyDraft,
|
||
host: proxyDraftHost,
|
||
user: proxyDraftUser,
|
||
port: proxyDraftPortValid ? proxyDraftPort : getGlobalProxyDefaultPort(proxyDraft.type),
|
||
clearPassword: proxyDraftClearPassword,
|
||
}),
|
||
url: proxyTestUrlTrimmed,
|
||
timeoutSeconds: 8,
|
||
});
|
||
const data = (res?.data || {}) as Partial<GlobalProxyTestResultState>;
|
||
const statusCode = Number(data.statusCode);
|
||
setProxyTestResult({
|
||
success: res?.success === true,
|
||
message: res?.message || t('common.unknown'),
|
||
url: data.url || proxyTestUrlTrimmed,
|
||
finalUrl: data.finalUrl,
|
||
statusCode: Number.isFinite(statusCode) ? statusCode : undefined,
|
||
durationMs: typeof data.durationMs === 'number' ? data.durationMs : undefined,
|
||
viaProxy: data.viaProxy === true,
|
||
});
|
||
} catch (err) {
|
||
const errMsg = err instanceof Error ? err.message : String(err || t('common.unknown'));
|
||
setProxyTestResult({
|
||
success: false,
|
||
message: errMsg,
|
||
url: proxyTestUrlTrimmed,
|
||
});
|
||
} finally {
|
||
setProxyTesting(false);
|
||
}
|
||
}, [
|
||
proxyDraft,
|
||
proxyDraftClearPassword,
|
||
proxyDraftHost,
|
||
proxyDraftPort,
|
||
proxyDraftPortValid,
|
||
proxyDraftUser,
|
||
proxyDraftValid,
|
||
proxyTestUrlTrimmed,
|
||
t,
|
||
]);
|
||
const handleApplyGlobalProxyDraft = useCallback(async () => {
|
||
if (!proxyDraftValid) {
|
||
void message.warning({
|
||
content: t('app.proxy.message.invalid_enabled'),
|
||
key: 'global-proxy-invalid',
|
||
});
|
||
return;
|
||
}
|
||
void message.destroy('global-proxy-invalid');
|
||
const backendApp = (window as any).go?.app?.App;
|
||
if (typeof backendApp?.SaveGlobalProxy !== 'function') {
|
||
void message.error({
|
||
content: t('app.proxy.message.save_failed', { error: t('common.unknown') }),
|
||
key: 'global-proxy-sync-error',
|
||
});
|
||
return;
|
||
}
|
||
const saveInput = toSaveGlobalProxyInput({
|
||
...proxyDraft,
|
||
host: proxyDraftHost,
|
||
user: proxyDraftUser,
|
||
port: proxyDraftPortValid ? proxyDraftPort : getGlobalProxyDefaultPort(proxyDraft.type),
|
||
clearPassword: proxyDraftClearPassword,
|
||
});
|
||
setProxyApplying(true);
|
||
try {
|
||
const saved = await backendApp.SaveGlobalProxy(saveInput);
|
||
const nextDraft = createGlobalProxyComparableDraft(saved || saveInput);
|
||
replaceGlobalProxy(nextDraft);
|
||
setProxyDraft(nextDraft);
|
||
setProxyDraftClearPassword(false);
|
||
void message.success({
|
||
content: t('app.proxy.message.config_applied'),
|
||
key: 'global-proxy-applied',
|
||
});
|
||
} catch (err) {
|
||
const errMsg = err instanceof Error ? err.message : String(err || t('common.unknown'));
|
||
void message.error({
|
||
content: t('app.proxy.message.save_failed', { error: errMsg }),
|
||
key: 'global-proxy-sync-error',
|
||
});
|
||
} finally {
|
||
setProxyApplying(false);
|
||
}
|
||
}, [
|
||
proxyDraft,
|
||
proxyDraftClearPassword,
|
||
proxyDraftHost,
|
||
proxyDraftPort,
|
||
proxyDraftPortValid,
|
||
proxyDraftUser,
|
||
proxyDraftValid,
|
||
replaceGlobalProxy,
|
||
t,
|
||
]);
|
||
const legacyAiEdgeHandleDockStyle = useMemo(
|
||
() => resolveLegacyAIEdgeHandleDockStyle(legacyAiEdgeHandleAttachment),
|
||
[legacyAiEdgeHandleAttachment],
|
||
);
|
||
const legacyAiEdgeHandleStyle = useMemo(() => (
|
||
resolveLegacyAIEdgeHandleStyle({
|
||
darkMode,
|
||
aiPanelVisible,
|
||
effectiveUiScale,
|
||
})
|
||
), [aiPanelVisible, darkMode, effectiveUiScale]);
|
||
const handleOpenToolsModal = useCallback((group: ToolCenterGroupKey = 'config') => {
|
||
setToolCenterBackGroupKey(null);
|
||
setActiveToolCenterPane(null);
|
||
setActiveToolCenterGroupKey(group);
|
||
setIsToolsModalOpen(true);
|
||
}, []);
|
||
const handleOpenSettingsModal = useCallback((group: SettingsCenterGroupKey = 'preferences') => {
|
||
setActiveSettingsCenterGroupKey(group);
|
||
setActiveSettingsCenterPane(resolveSettingsCenterGroupInitialPane(group));
|
||
setIsSettingsModalOpen(true);
|
||
}, []);
|
||
const handleOpenSettingsCenterPane = useCallback((group: SettingsCenterGroupKey, key: SettingsCenterPaneKey) => {
|
||
setActiveSettingsCenterGroupKey(group);
|
||
setActiveSettingsCenterPane({ key, group });
|
||
setIsSettingsModalOpen(true);
|
||
}, []);
|
||
const finalizeSecurityRepairReturnFromAISettings = useCallback(() => {
|
||
const reopenSecurityUpdateDetails = shouldReopenSecurityUpdateDetails(securityUpdateRepairSource);
|
||
setFocusedAIProviderId(undefined);
|
||
setSecurityUpdateRepairSource(null);
|
||
if (reopenSecurityUpdateDetails) {
|
||
setIsSecurityUpdateSettingsOpen(true);
|
||
}
|
||
}, [securityUpdateRepairSource]);
|
||
const handleBackFromSettingsCenterPane = useCallback(() => {
|
||
const leavingAI = activeSettingsCenterPane?.key === 'ai';
|
||
const returnGroup = activeSettingsCenterPane?.group ?? activeSettingsCenterGroupKey;
|
||
setActiveSettingsCenterGroupKey(returnGroup);
|
||
setActiveSettingsCenterPane(null);
|
||
if (leavingAI) {
|
||
finalizeSecurityRepairReturnFromAISettings();
|
||
}
|
||
}, [
|
||
activeSettingsCenterGroupKey,
|
||
activeSettingsCenterPane?.group,
|
||
activeSettingsCenterPane?.key,
|
||
finalizeSecurityRepairReturnFromAISettings,
|
||
]);
|
||
const handleCancelSettingsCenterPane = useCallback(() => {
|
||
const leavingAI = activeSettingsCenterPane?.key === 'ai';
|
||
setActiveSettingsCenterPane(null);
|
||
setIsSettingsModalOpen(false);
|
||
if (leavingAI) {
|
||
finalizeSecurityRepairReturnFromAISettings();
|
||
}
|
||
}, [activeSettingsCenterPane?.key, finalizeSecurityRepairReturnFromAISettings]);
|
||
const isSettingsAboutPaneOpen = isSettingsModalOpen && activeSettingsCenterPane?.key === 'about-go-navi';
|
||
const isSettingsAboutPaneOpenRef = useRef(false);
|
||
useEffect(() => {
|
||
isSettingsAboutPaneOpenRef.current = isSettingsAboutPaneOpen;
|
||
}, [isSettingsAboutPaneOpen]);
|
||
useEffect(() => {
|
||
updateCenterBridgeRef.current = {
|
||
open: () => {
|
||
handleOpenSettingsCenterPane('about', 'about-go-navi');
|
||
},
|
||
close: () => {
|
||
setActiveSettingsCenterPane(null);
|
||
setIsSettingsModalOpen(false);
|
||
},
|
||
isOpen: () => isSettingsAboutPaneOpenRef.current,
|
||
};
|
||
return () => {
|
||
updateCenterBridgeRef.current = null;
|
||
};
|
||
}, [handleOpenSettingsCenterPane]);
|
||
useEffect(() => {
|
||
if (!isSettingsAboutPaneOpen) {
|
||
return;
|
||
}
|
||
prepareAboutSurface();
|
||
}, [isSettingsAboutPaneOpen, prepareAboutSurface]);
|
||
const handleOpenToolCenterPane = useCallback((group: ToolCenterGroupKey, key: ToolCenterPaneKey) => {
|
||
setToolCenterBackGroupKey(group);
|
||
setActiveToolCenterGroupKey(group);
|
||
setActiveToolCenterPane({ key, group });
|
||
setIsToolsModalOpen(true);
|
||
}, []);
|
||
const handleReturnToToolCenter = useCallback((closeChild?: () => void) => {
|
||
const returnGroup = toolCenterBackGroupKey ?? 'config';
|
||
closeChild?.();
|
||
setToolCenterBackGroupKey(null);
|
||
setActiveToolCenterGroupKey(returnGroup);
|
||
setActiveToolCenterPane(null);
|
||
setIsToolsModalOpen(true);
|
||
}, [toolCenterBackGroupKey]);
|
||
const sidebarUtilityItems = useMemo(() => {
|
||
const itemMap = {
|
||
tools: {
|
||
key: 'tools',
|
||
title: t('app.sidebar.tools'),
|
||
icon: <ToolOutlined />,
|
||
onClick: () => handleOpenToolsModal(),
|
||
},
|
||
settings: {
|
||
key: 'settings',
|
||
title: t('app.sidebar.settings'),
|
||
icon: <SettingOutlined />,
|
||
onClick: () => handleOpenSettingsModal(),
|
||
},
|
||
} as const;
|
||
|
||
return SIDEBAR_UTILITY_ITEM_KEYS.map((key) => itemMap[key]);
|
||
}, [handleOpenSettingsModal, handleOpenToolsModal, t]);
|
||
const handleFocusSidebarSearch = useCallback(() => {
|
||
window.dispatchEvent(new CustomEvent('gonavi:focus-sidebar-search'));
|
||
}, []);
|
||
const renderLegacyAIEdgeHandle = () => (
|
||
<Tooltip title={t('app.sidebar.ai_assistant')}>
|
||
<Button
|
||
type="text"
|
||
icon={<RobotOutlined />}
|
||
onClick={toggleAIPanel}
|
||
style={legacyAiEdgeHandleStyle}
|
||
data-gonavi-legacy-ai-edge-action="true"
|
||
>
|
||
AI
|
||
</Button>
|
||
</Tooltip>
|
||
);
|
||
|
||
const loadDataRootInfo = useCallback(async () => {
|
||
setDataRootLoading(true);
|
||
try {
|
||
const res = await GetDataRootDirectoryInfo();
|
||
if (!res?.success) {
|
||
throw new Error(res?.message || t('app.data_root.message.load_failed'));
|
||
}
|
||
const data = (res?.data || {}) as any;
|
||
setDataRootInfo(data);
|
||
setSelectedDataRootPath(String(data.path || ''));
|
||
} catch (error) {
|
||
const errMsg = error instanceof Error ? error.message : String(error || t('common.unknown'));
|
||
void message.error(t('app.data_root.message.load_failed_with_error', { error: errMsg }));
|
||
} finally {
|
||
setDataRootLoading(false);
|
||
}
|
||
}, [t]);
|
||
|
||
useEffect(() => {
|
||
if (!isDataRootModalOpen && activeToolCenterPane?.key !== 'data-root') {
|
||
return;
|
||
}
|
||
void loadDataRootInfo();
|
||
}, [activeToolCenterPane?.key, isDataRootModalOpen, loadDataRootInfo]);
|
||
|
||
const handleSelectDataRoot = useCallback(async () => {
|
||
try {
|
||
const res = await SelectDataRootDirectory(selectedDataRootPath || dataRootInfo?.path || '');
|
||
if (!res?.success) {
|
||
if (String(res?.message || '') !== '已取消') {
|
||
throw new Error(res?.message || t('app.data_root.message.select_failed'));
|
||
}
|
||
return;
|
||
}
|
||
const data = (res?.data || {}) as any;
|
||
setSelectedDataRootPath(String(data.path || ''));
|
||
} catch (error) {
|
||
const errMsg = error instanceof Error ? error.message : String(error || t('common.unknown'));
|
||
void message.error(t('app.data_root.message.select_failed_with_error', { error: errMsg }));
|
||
}
|
||
}, [dataRootInfo?.path, selectedDataRootPath, t]);
|
||
|
||
const handleApplyDataRoot = useCallback(async (migrate: boolean, useDefaultPath = false) => {
|
||
const nextPath = useDefaultPath ? String(dataRootInfo?.defaultPath || '') : String(selectedDataRootPath || '').trim();
|
||
if (!nextPath) {
|
||
void message.warning(t('app.data_root.message.select_valid_first'));
|
||
return;
|
||
}
|
||
setDataRootApplying(true);
|
||
try {
|
||
const res = await ApplyDataRootDirectory(nextPath, migrate);
|
||
if (!res?.success) {
|
||
throw new Error(res?.message || t('app.data_root.message.apply_failed'));
|
||
}
|
||
const data = (res?.data || {}) as any;
|
||
setDataRootInfo(data);
|
||
setSelectedDataRootPath(String(data.path || nextPath));
|
||
void message.success(res?.message || t('app.data_root.message.updated'));
|
||
} catch (error) {
|
||
const errMsg = error instanceof Error ? error.message : String(error || t('common.unknown'));
|
||
void message.error(t('app.data_root.message.apply_failed_with_error', { error: errMsg }));
|
||
} finally {
|
||
setDataRootApplying(false);
|
||
}
|
||
}, [dataRootInfo?.defaultPath, selectedDataRootPath, t]);
|
||
|
||
const handleOpenDataRoot = useCallback(async () => {
|
||
try {
|
||
const res = await OpenDataRootDirectory();
|
||
if (!res?.success) {
|
||
throw new Error(res?.message || t('app.data_root.message.open_failed'));
|
||
}
|
||
} catch (error) {
|
||
const errMsg = error instanceof Error ? error.message : String(error || t('common.unknown'));
|
||
void message.error(t('app.data_root.message.open_failed_with_error', { error: errMsg }));
|
||
}
|
||
}, [t]);
|
||
|
||
|
||
const {
|
||
handleCloseLogPanel: handleCloseAppLogPanel,
|
||
handleLogResizeStart,
|
||
handleToggleLogPanel: toggleAppLogPanel,
|
||
isLogPanelOpen,
|
||
logGhostRef,
|
||
logPanelHeight,
|
||
} = useAppLogPanelResize();
|
||
const handleToggleLogPanel = useCallback(() => {
|
||
if (isV2Ui) {
|
||
window.dispatchEvent(new CustomEvent('gonavi:show-sql-execution-log', { detail: { mode: 'open' } }));
|
||
return;
|
||
}
|
||
toggleAppLogPanel();
|
||
}, [isV2Ui, toggleAppLogPanel]);
|
||
const handleCloseLogPanel = useCallback(() => {
|
||
handleCloseAppLogPanel();
|
||
}, [handleCloseAppLogPanel]);
|
||
|
||
const handleCreateConnection = useCallback(() => {
|
||
setSecurityUpdateRepairSource(null);
|
||
setEditingConnection(null);
|
||
setIsConnectionModalMounted(true);
|
||
setIsModalOpen(true);
|
||
}, []);
|
||
|
||
const handleEditConnection = useCallback((conn: SavedConnection) => {
|
||
setSecurityUpdateRepairSource(null);
|
||
setIsConnectionModalMounted(true);
|
||
void (async () => {
|
||
const backendApp = (window as any).go?.app?.App;
|
||
let nextConnection = conn;
|
||
if (typeof backendApp?.GetEditableSavedConnection === 'function') {
|
||
try {
|
||
const editableConnection = await backendApp.GetEditableSavedConnection(conn.id);
|
||
if (editableConnection) {
|
||
nextConnection = editableConnection;
|
||
}
|
||
} catch (error: any) {
|
||
const errorMessage = error?.message;
|
||
const detail = (
|
||
typeof errorMessage === 'string'
|
||
? errorMessage
|
||
: (
|
||
typeof errorMessage === 'number'
|
||
|| typeof errorMessage === 'boolean'
|
||
? String(errorMessage)
|
||
: String(error ?? '')
|
||
)
|
||
).trim();
|
||
void message.warning(
|
||
detail
|
||
? t('app.connection.message.editable_load_failed_with_detail', { detail })
|
||
: t('app.connection.message.editable_load_failed')
|
||
);
|
||
}
|
||
}
|
||
setEditingConnection(nextConnection);
|
||
setIsModalOpen(true);
|
||
})();
|
||
}, [t]);
|
||
|
||
useEffect(() => {
|
||
if (connectionModalWarmupDoneRef.current) {
|
||
return;
|
||
}
|
||
connectionModalWarmupDoneRef.current = true;
|
||
const warmup = () => setIsConnectionModalMounted(true);
|
||
if (typeof window === 'undefined') {
|
||
warmup();
|
||
return;
|
||
}
|
||
if (typeof window.requestIdleCallback === 'function') {
|
||
const idleId = window.requestIdleCallback(() => warmup(), { timeout: 1200 });
|
||
return () => window.cancelIdleCallback?.(idleId);
|
||
}
|
||
const timerId = window.setTimeout(warmup, 300);
|
||
return () => window.clearTimeout(timerId);
|
||
}, []);
|
||
|
||
const handleConnectionSaved = useCallback(async (savedConnection: SavedConnection) => {
|
||
if (!shouldRetrySecurityUpdateAfterRepairSave(securityUpdateRepairSource)) {
|
||
return;
|
||
}
|
||
|
||
const backendApp = (window as any).go?.app?.App;
|
||
if (securityUpdateStatus.migrationId) {
|
||
if (typeof backendApp?.RetrySecurityUpdateCurrentRound !== 'function') {
|
||
return;
|
||
}
|
||
|
||
const rawStatus = await backendApp.RetrySecurityUpdateCurrentRound({
|
||
migrationId: securityUpdateStatus.migrationId,
|
||
});
|
||
const nextStatus = await finalizeSecurityUpdateStatus({
|
||
backend: backendApp,
|
||
replaceConnections,
|
||
replaceGlobalProxy,
|
||
t,
|
||
}, normalizeSecurityUpdateStatus(rawStatus));
|
||
|
||
applySecurityUpdateStatus(nextStatus, {
|
||
openSettings: false,
|
||
});
|
||
|
||
if (nextStatus.overallStatus === 'completed') {
|
||
setSecurityUpdateHasLegacySensitiveItems(false);
|
||
setSecurityUpdateRawPayload(null);
|
||
}
|
||
return;
|
||
}
|
||
|
||
if (!securityUpdateRawPayload || !savedConnection?.id) {
|
||
return;
|
||
}
|
||
|
||
const nextRawPayload = stripLegacyPersistedConnectionById(securityUpdateRawPayload, savedConnection.id);
|
||
if (!nextRawPayload || nextRawPayload === securityUpdateRawPayload) {
|
||
return;
|
||
}
|
||
|
||
window.localStorage.setItem(LEGACY_PERSIST_KEY, nextRawPayload);
|
||
|
||
const rawStatus = typeof backendApp?.GetSecurityUpdateStatus === 'function'
|
||
? await backendApp.GetSecurityUpdateStatus()
|
||
: securityUpdateStatus;
|
||
const nextStatus = mergeSecurityUpdateStatusWithLegacySource(rawStatus, nextRawPayload, {
|
||
previousStatus: securityUpdateStatus,
|
||
t,
|
||
});
|
||
const nextHasLegacySensitiveItems = hasLegacyMigratableSensitiveItems(nextRawPayload);
|
||
|
||
setSecurityUpdateRawPayload(nextRawPayload);
|
||
setSecurityUpdateHasLegacySensitiveItems(nextHasLegacySensitiveItems);
|
||
applySecurityUpdateStatus(nextStatus, {
|
||
openSettings: false,
|
||
});
|
||
}, [
|
||
applySecurityUpdateStatus,
|
||
normalizeSecurityUpdateStatus,
|
||
replaceConnections,
|
||
replaceGlobalProxy,
|
||
securityUpdateRawPayload,
|
||
securityUpdateRepairSource,
|
||
securityUpdateStatus,
|
||
securityUpdateStatus.migrationId,
|
||
t,
|
||
]);
|
||
|
||
const handleCloseModal = () => {
|
||
const reopenSecurityUpdateDetails = shouldReopenSecurityUpdateDetails(securityUpdateRepairSource);
|
||
setIsModalOpen(false);
|
||
setEditingConnection(null);
|
||
setSecurityUpdateRepairSource(null);
|
||
if (reopenSecurityUpdateDetails) {
|
||
setIsSecurityUpdateSettingsOpen(true);
|
||
}
|
||
};
|
||
|
||
const handleOpenDriverManagerFromConnection = () => {
|
||
setIsModalOpen(false);
|
||
setEditingConnection(null);
|
||
setToolCenterBackGroupKey(null);
|
||
setIsDriverModalOpen(true);
|
||
};
|
||
|
||
const handleCloseDriverManager = useCallback(() => {
|
||
const reopenSecurityUpdateDetails = shouldReopenSecurityUpdateDetails(securityUpdateRepairSource);
|
||
setIsDriverModalOpen(false);
|
||
setToolCenterBackGroupKey(null);
|
||
setSecurityUpdateRepairSource(null);
|
||
if (reopenSecurityUpdateDetails) {
|
||
setIsSecurityUpdateSettingsOpen(true);
|
||
}
|
||
}, [securityUpdateRepairSource]);
|
||
|
||
const handleOpenGlobalProxySettings = useCallback(() => {
|
||
setSecurityUpdateRepairSource(null);
|
||
setIsProxyModalOpen(true);
|
||
}, []);
|
||
|
||
const handleCloseGlobalProxySettings = useCallback(() => {
|
||
const reopenSecurityUpdateDetails = shouldReopenSecurityUpdateDetails(securityUpdateRepairSource);
|
||
setIsProxyModalOpen(false);
|
||
setSecurityUpdateRepairSource(null);
|
||
if (reopenSecurityUpdateDetails) {
|
||
setIsSecurityUpdateSettingsOpen(true);
|
||
}
|
||
}, [securityUpdateRepairSource]);
|
||
|
||
/** 从聊天面板等入口打开 AI 配置：走设置中心，不再弹独立 AISettingsModal */
|
||
const handleOpenAISettings = useCallback((providerId?: string) => {
|
||
setSecurityUpdateRepairSource(null);
|
||
setFocusedAIProviderId(providerId);
|
||
setActiveSettingsCenterGroupKey('services');
|
||
setActiveSettingsCenterPane({ key: 'ai', group: 'services' });
|
||
setIsSettingsModalOpen(true);
|
||
}, []);
|
||
|
||
const handleAIPanelRenderError = useCallback((error: Error, errorInfo: React.ErrorInfo) => {
|
||
try {
|
||
(window as any).__gonaviLastAIPanelRenderError = {
|
||
message: error?.message || '',
|
||
stack: error?.stack || '',
|
||
componentStack: errorInfo?.componentStack || '',
|
||
};
|
||
} catch {
|
||
// ignore debug capture failures
|
||
}
|
||
console.error('AIChatPanel render error:', error, errorInfo);
|
||
}, []);
|
||
|
||
const handleRetryAIPanelRender = useCallback(() => {
|
||
setAiPanelRenderNonce((current) => current + 1);
|
||
}, []);
|
||
|
||
const handleWebLogout = useCallback(async () => {
|
||
try {
|
||
await fetch('/__gonavi/auth/logout', {
|
||
method: 'POST',
|
||
credentials: 'same-origin',
|
||
});
|
||
} catch (_) {
|
||
// ignore
|
||
}
|
||
window.location.assign('/login');
|
||
}, []);
|
||
|
||
const handleTitleBarWindowToggle = async (options?: { allowMacNativeFullscreen?: boolean }) => {
|
||
const allowMacNativeFullscreen = options?.allowMacNativeFullscreen === true;
|
||
const syncWindowStateFromRuntime = async () => {
|
||
try {
|
||
const [isFullscreen, isMaximised] = await Promise.all([
|
||
safeWindowRuntimeCall(() => WindowIsFullscreen(), false),
|
||
safeWindowRuntimeCall(() => WindowIsMaximised(), false),
|
||
]);
|
||
useStore.getState().setWindowState(isFullscreen ? 'fullscreen' : (isMaximised ? 'maximized' : 'normal'));
|
||
} catch {
|
||
// ignore
|
||
}
|
||
};
|
||
|
||
try {
|
||
void emitWindowDiagnostic('action:titlebar-toggle:before');
|
||
if (await WindowIsFullscreen()) {
|
||
await WindowUnfullscreen();
|
||
await syncWindowStateFromRuntime();
|
||
void emitWindowDiagnostic('action:titlebar-toggle:after-unfullscreen');
|
||
return;
|
||
}
|
||
if (allowMacNativeFullscreen && useNativeMacWindowControls && isMacRuntime) {
|
||
await WindowFullscreen();
|
||
await syncWindowStateFromRuntime();
|
||
void emitWindowDiagnostic('action:titlebar-toggle:after-fullscreen');
|
||
return;
|
||
}
|
||
const isMaximised = await safeWindowRuntimeCall(() => WindowIsMaximised(), false);
|
||
if (isMaximised) {
|
||
WindowUnmaximise();
|
||
} else {
|
||
WindowMaximise();
|
||
}
|
||
await new Promise((resolve) => window.setTimeout(resolve, 96));
|
||
await syncWindowStateFromRuntime();
|
||
void emitWindowDiagnostic('action:titlebar-toggle:after-set-maximise-state');
|
||
} catch (_) {
|
||
// ignore
|
||
}
|
||
};
|
||
|
||
const handleTitleBarDoubleClick = (e: React.MouseEvent<HTMLDivElement>) => {
|
||
const target = e.target as HTMLElement | null;
|
||
if (target?.closest('[data-no-titlebar-toggle="true"]')) {
|
||
return;
|
||
}
|
||
void handleTitleBarWindowToggle({ allowMacNativeFullscreen: false });
|
||
};
|
||
|
||
// handleManualResetWindowZoom 由 resetWindowZoom 快捷键（默认 Ctrl+Shift+0）触发，
|
||
// 作为自动路径失败时的兜底入口。
|
||
//
|
||
// 优先调 backend App.ResetWebViewZoom 走 WebView2 zoom reset（零动画零感知）；
|
||
// 失败时回退到 Unmaximise→Maximise toggle —— 用户主动按了快捷键，预期看见动画。
|
||
const handleManualResetWindowZoom = React.useCallback(async () => {
|
||
if (!isWindowsPlatform()) {
|
||
message.info(t('app.window_zoom.message.windows_only'));
|
||
return;
|
||
}
|
||
try {
|
||
const res = await (window as any).go?.app?.App?.ResetWebViewZoom?.();
|
||
if (res?.success) {
|
||
window.dispatchEvent(new Event('resize'));
|
||
message.success(t('app.window_zoom.message.reset_success'));
|
||
return;
|
||
}
|
||
console.warn('ResetWebViewZoom backend reported failure, falling back to maximise toggle:', res?.message);
|
||
} catch (e) {
|
||
console.warn('ResetWebViewZoom backend unavailable, falling back to maximise toggle', e);
|
||
}
|
||
try {
|
||
const isFullscreen = await safeWindowRuntimeCall(() => WindowIsFullscreen(), false);
|
||
if (isFullscreen) {
|
||
message.info(t('app.window_zoom.message.fullscreen_exit_first'));
|
||
return;
|
||
}
|
||
const isMaximised = await safeWindowRuntimeCall(() => WindowIsMaximised(), false);
|
||
if (isMaximised) {
|
||
WindowUnmaximise();
|
||
await new Promise((resolve) => window.setTimeout(resolve, 96));
|
||
WindowMaximise();
|
||
await new Promise((resolve) => window.setTimeout(resolve, 96));
|
||
} else {
|
||
const size = await safeWindowRuntimeCall(() => WindowGetSize(), null);
|
||
const width = Math.trunc(Number(size?.w) || 0);
|
||
const height = Math.trunc(Number(size?.h) || 0);
|
||
if (width > 0 && height > 0) {
|
||
WindowSetSize(getWindowsScaleFixNudgedWidth(width), height);
|
||
await new Promise((resolve) => window.setTimeout(resolve, 28));
|
||
WindowSetSize(width, height);
|
||
}
|
||
}
|
||
window.dispatchEvent(new Event('resize'));
|
||
message.success(t('app.window_zoom.message.reset_success_fallback'));
|
||
} catch (e) {
|
||
console.warn('Failed to reset window zoom', e);
|
||
message.error(t('app.window_zoom.message.reset_failed'));
|
||
}
|
||
}, [t]);
|
||
|
||
const {
|
||
ghostRef,
|
||
handleSidebarMouseDown,
|
||
sidebarResizeHandleWidth,
|
||
siderRef,
|
||
} = useAppSidebarResize({
|
||
effectiveUiScale,
|
||
setSidebarWidth,
|
||
sidebarWidth,
|
||
});
|
||
|
||
useEffect(() => {
|
||
document.body.style.backgroundColor = 'transparent';
|
||
document.body.style.color = darkMode ? '#ffffff' : '#000000';
|
||
document.body.setAttribute('data-theme', darkMode ? 'dark' : 'light');
|
||
document.body.setAttribute('data-ui-version', appearance.uiVersion);
|
||
document.body.setAttribute('data-platform', runtimePlatform || '');
|
||
document.body.style.fontSize = `${effectiveFontSize}px`;
|
||
document.body.style.setProperty('--gn-font-sans', resolvedUiFontFamily);
|
||
document.body.style.setProperty('--gn-font-mono', resolvedMonoFontFamily);
|
||
document.documentElement.style.setProperty('--gonavi-font-size', `${effectiveFontSize}px`);
|
||
document.documentElement.style.setProperty('--gn-font-sans', resolvedUiFontFamily);
|
||
document.documentElement.style.setProperty('--gn-font-mono', resolvedMonoFontFamily);
|
||
document.documentElement.style.setProperty('--gn-ui-scale', `${effectiveUiScale}`);
|
||
document.documentElement.style.setProperty('--gn-font-size', `${effectiveFontSize}px`);
|
||
document.documentElement.style.setProperty('--gn-font-size-sm', `${Math.max(10, Math.round(effectiveFontSize * 0.86))}px`);
|
||
document.documentElement.style.setProperty('--gn-font-size-xs', `${Math.max(9, Math.round(effectiveFontSize * 0.76))}px`);
|
||
document.documentElement.style.setProperty('--gn-font-size-mono', `${Math.max(10, Math.round(effectiveDataTableFontSize * 0.92))}px`);
|
||
document.documentElement.style.setProperty('--gn-data-table-font-size', `${effectiveDataTableFontSize}px`);
|
||
document.documentElement.style.setProperty('--gn-sidebar-tree-font-size', `${effectiveSidebarTreeFontSize}px`);
|
||
document.documentElement.style.setProperty('--gn-sidebar-rail-scale', `${effectiveSidebarRailScale}`);
|
||
document.documentElement.style.setProperty('--gn-control-height', `${tokenControlHeight}px`);
|
||
document.documentElement.style.setProperty('--gn-control-height-sm', `${tokenControlHeightSM}px`);
|
||
}, [
|
||
appearance.uiVersion,
|
||
darkMode,
|
||
effectiveDataTableFontSize,
|
||
effectiveFontSize,
|
||
resolvedMonoFontFamily,
|
||
resolvedUiFontFamily,
|
||
runtimePlatform,
|
||
effectiveSidebarRailScale,
|
||
effectiveSidebarTreeFontSize,
|
||
effectiveUiScale,
|
||
tokenControlHeight,
|
||
tokenControlHeightSM,
|
||
]);
|
||
|
||
useEffect(() => {
|
||
const handleOpenShortcutSettingsEvent = () => {
|
||
setIsShortcutModalOpen(true);
|
||
};
|
||
window.addEventListener('gonavi:open-shortcut-settings', handleOpenShortcutSettingsEvent as EventListener);
|
||
return () => {
|
||
window.removeEventListener('gonavi:open-shortcut-settings', handleOpenShortcutSettingsEvent as EventListener);
|
||
};
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
const handleOpenSnippetSettingsEvent = () => {
|
||
setIsSnippetModalOpen(false);
|
||
handleOpenToolCenterPane('workspace', 'snippet-settings');
|
||
};
|
||
window.addEventListener('gonavi:open-snippet-settings', handleOpenSnippetSettingsEvent as EventListener);
|
||
return () => {
|
||
window.removeEventListener('gonavi:open-snippet-settings', handleOpenSnippetSettingsEvent as EventListener);
|
||
};
|
||
}, [handleOpenToolCenterPane]);
|
||
|
||
useEffect(() => {
|
||
const handleOpenTabDisplaySettingsEvent = () => {
|
||
setIsSettingsModalOpen(false);
|
||
setThemeModalSection('workspace');
|
||
setIsThemeModalOpen(true);
|
||
setTabDisplaySettingsFocusRequest((current) => current + 1);
|
||
};
|
||
window.addEventListener('gonavi:open-tab-display-settings', handleOpenTabDisplaySettingsEvent as EventListener);
|
||
return () => {
|
||
window.removeEventListener('gonavi:open-tab-display-settings', handleOpenTabDisplaySettingsEvent as EventListener);
|
||
};
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
const handleCreateQueryTabEvent = () => {
|
||
handleNewQuery();
|
||
};
|
||
window.addEventListener('gonavi:create-query-tab', handleCreateQueryTabEvent as EventListener);
|
||
return () => {
|
||
window.removeEventListener('gonavi:create-query-tab', handleCreateQueryTabEvent as EventListener);
|
||
};
|
||
}, [handleNewQuery]);
|
||
|
||
useEffect(() => {
|
||
if (!isMacRuntime || !useNativeMacWindowControls) {
|
||
return;
|
||
}
|
||
|
||
const handleMacNativeEscapeCapture = (event: KeyboardEvent) => {
|
||
if (!shouldSuppressMacNativeEscapeExit(
|
||
isMacRuntime,
|
||
useNativeMacWindowControls,
|
||
useStore.getState().windowState === 'fullscreen',
|
||
event,
|
||
{ isEditableTarget: isEditableElement(event.target) },
|
||
)) {
|
||
return;
|
||
}
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
};
|
||
|
||
window.addEventListener('keydown', handleMacNativeEscapeCapture, true);
|
||
return () => {
|
||
window.removeEventListener('keydown', handleMacNativeEscapeCapture, true);
|
||
};
|
||
}, [isMacRuntime, useNativeMacWindowControls]);
|
||
|
||
useEffect(() => {
|
||
const handleGlobalShortcut = (event: KeyboardEvent) => {
|
||
const matchedAction = SHORTCUT_ACTION_ORDER.find((action) => {
|
||
const meta = SHORTCUT_ACTION_META[action];
|
||
if (meta.scope && meta.scope !== 'global') {
|
||
return false;
|
||
}
|
||
const binding = resolveShortcutBinding(shortcutOptions, action, activeShortcutPlatform);
|
||
if (!binding?.enabled) {
|
||
return false;
|
||
}
|
||
if (isEditableElement(event.target) && !meta.allowInEditable) {
|
||
return false;
|
||
}
|
||
return isShortcutMatch(event, binding.combo);
|
||
});
|
||
|
||
if (!matchedAction) {
|
||
return;
|
||
}
|
||
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
|
||
switch (matchedAction) {
|
||
case 'runQuery':
|
||
window.dispatchEvent(new CustomEvent('gonavi:run-active-query'));
|
||
break;
|
||
case 'focusSidebarSearch':
|
||
window.dispatchEvent(new CustomEvent('gonavi:focus-sidebar-search'));
|
||
break;
|
||
case 'newQueryTab':
|
||
handleNewQuery();
|
||
break;
|
||
case 'switchToNextTab':
|
||
switchActiveTabByOffset(1);
|
||
break;
|
||
case 'switchToPreviousTab':
|
||
switchActiveTabByOffset(-1);
|
||
break;
|
||
case 'newConnection':
|
||
handleCreateConnection();
|
||
break;
|
||
case 'toggleAIPanel':
|
||
toggleAIPanel();
|
||
break;
|
||
case 'toggleLogPanel':
|
||
handleToggleLogPanel();
|
||
break;
|
||
case 'toggleTheme':
|
||
setThemePreference(themeMode === 'dark' ? 'light' : 'dark');
|
||
break;
|
||
case 'openShortcutManager':
|
||
setIsShortcutModalOpen(true);
|
||
break;
|
||
case 'toggleMacFullscreen':
|
||
if (isMacRuntime && useNativeMacWindowControls) {
|
||
void handleTitleBarWindowToggle({ allowMacNativeFullscreen: true });
|
||
}
|
||
break;
|
||
case 'resetWindowZoom':
|
||
void handleManualResetWindowZoom();
|
||
break;
|
||
}
|
||
};
|
||
|
||
window.addEventListener('keydown', handleGlobalShortcut, true);
|
||
return () => {
|
||
window.removeEventListener('keydown', handleGlobalShortcut, true);
|
||
};
|
||
}, [activeShortcutPlatform, handleCreateConnection, handleManualResetWindowZoom, handleNewQuery, handleTitleBarWindowToggle, handleToggleLogPanel, isMacRuntime, shortcutOptions, switchActiveTabByOffset, themeMode, setThemePreference, toggleAIPanel, useNativeMacWindowControls]);
|
||
|
||
useEffect(() => {
|
||
if (!capturingShortcutAction) {
|
||
return;
|
||
}
|
||
|
||
const handleShortcutCapture = (event: KeyboardEvent) => {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
|
||
if (event.key === 'Escape') {
|
||
setCapturingShortcutAction(null);
|
||
return;
|
||
}
|
||
|
||
const combo = eventToShortcut(event);
|
||
if (!combo) {
|
||
return;
|
||
}
|
||
|
||
const normalizedCombo = normalizeShortcutCombo(combo);
|
||
if (!canRecordShortcutForAction(capturingShortcutAction, normalizedCombo)) {
|
||
const meta = SHORTCUT_ACTION_META[capturingShortcutAction];
|
||
void message.warning(meta.scope === 'aiComposer'
|
||
? t('app.shortcuts.message.ai_send_limit')
|
||
: t('app.shortcuts.message.modifier_required'));
|
||
return;
|
||
}
|
||
const conflictAction = SHORTCUT_ACTION_ORDER.find((action) => {
|
||
if (action === capturingShortcutAction) {
|
||
return false;
|
||
}
|
||
const binding = resolveShortcutBinding(shortcutOptions, action, activeShortcutPlatform);
|
||
if (!binding?.enabled) {
|
||
return false;
|
||
}
|
||
return normalizeShortcutCombo(binding.combo) === normalizedCombo;
|
||
});
|
||
if (conflictAction) {
|
||
void message.warning(t('app.shortcuts.message.conflict', { action: SHORTCUT_ACTION_META[conflictAction].label }));
|
||
return;
|
||
}
|
||
|
||
const reservedConflicts = findReservedConflictsForAction(
|
||
capturingShortcutAction,
|
||
normalizedCombo,
|
||
activeShortcutPlatform,
|
||
);
|
||
if (reservedConflicts.length > 0) {
|
||
const { hasMonaco, hasOther, monacoLabels, otherLabels, otherContexts } = splitConflictsByContext(reservedConflicts);
|
||
if (hasMonaco) {
|
||
void message.info(t('app.shortcuts.message.reserved_conflict_info', { labels: monacoLabels }), 4);
|
||
}
|
||
if (hasOther) {
|
||
void message.warning(t('app.shortcuts.message.reserved_conflict_warning', { contexts: otherContexts, labels: otherLabels }), 4);
|
||
}
|
||
}
|
||
|
||
updateShortcut(capturingShortcutAction, { combo: normalizedCombo, enabled: true }, activeShortcutPlatform);
|
||
setCapturingShortcutAction(null);
|
||
};
|
||
|
||
window.addEventListener('keydown', handleShortcutCapture, true);
|
||
return () => {
|
||
window.removeEventListener('keydown', handleShortcutCapture, true);
|
||
};
|
||
}, [activeShortcutPlatform, capturingShortcutAction, shortcutOptions, t, updateShortcut]);
|
||
|
||
const linuxResizeHandleStyleBase = {
|
||
position: 'fixed',
|
||
zIndex: 12000,
|
||
background: 'transparent',
|
||
WebkitAppRegion: 'drag',
|
||
'--wails-draggable': 'drag',
|
||
userSelect: 'none'
|
||
} as any;
|
||
|
||
const showLinuxResizeHandles = isLinuxRuntime;
|
||
const resizeGuideColor = isV2Ui
|
||
? 'var(--gn-accent, #16a34a)'
|
||
: (darkMode ? 'rgba(246, 196, 83, 0.55)' : 'rgba(24, 144, 255, 0.5)');
|
||
const v2AntPrimaryColor = darkMode ? '#22c55e' : '#16a34a';
|
||
const v2AntPrimaryHoverColor = darkMode ? '#4ade80' : '#15803d';
|
||
const v2AntPrimaryActiveColor = darkMode ? '#16a34a' : '#166534';
|
||
const v2AntPrimaryBgColor = darkMode ? 'rgba(34, 197, 94, 0.20)' : '#dcfce7';
|
||
const v2AntPrimaryBgHoverColor = darkMode ? 'rgba(34, 197, 94, 0.28)' : '#bbf7d0';
|
||
const v2AntPrimaryBorderColor = darkMode ? 'rgba(34, 197, 94, 0.42)' : '#86efac';
|
||
const v2AntPrimaryBorderHoverColor = darkMode ? 'rgba(74, 222, 128, 0.58)' : '#4ade80';
|
||
const v2AntControlActiveBg = darkMode ? 'rgba(34, 197, 94, 0.16)' : 'rgba(34, 197, 94, 0.10)';
|
||
const v2AntControlActiveHoverBg = darkMode ? 'rgba(34, 197, 94, 0.24)' : 'rgba(34, 197, 94, 0.16)';
|
||
const v2AntControlOutline = darkMode ? 'rgba(34, 197, 94, 0.42)' : 'rgba(22, 163, 74, 0.22)';
|
||
const antdTheme = useMemo(() => ({
|
||
algorithm: darkMode ? theme.darkAlgorithm : theme.defaultAlgorithm,
|
||
token: {
|
||
fontSize: tokenFontSize,
|
||
fontSizeSM: tokenFontSizeSM,
|
||
fontSizeLG: tokenFontSizeLG,
|
||
fontFamily: resolvedUiFontFamily,
|
||
fontFamilyCode: resolvedMonoFontFamily,
|
||
controlHeight: tokenControlHeight,
|
||
controlHeightSM: tokenControlHeightSM,
|
||
controlHeightLG: tokenControlHeightLG,
|
||
colorBgLayout: 'transparent',
|
||
colorBgContainer: darkMode
|
||
? `rgba(29, 29, 29, ${effectiveOpacity})`
|
||
: `rgba(255, 255, 255, ${effectiveOpacity})`,
|
||
colorBgElevated: darkMode
|
||
? '#1f1f1f'
|
||
: '#ffffff',
|
||
colorFillAlter: darkMode
|
||
? `rgba(38, 38, 38, ${effectiveOpacity})`
|
||
: `rgba(250, 250, 250, ${effectiveOpacity})`,
|
||
colorPrimary: isV2Ui ? v2AntPrimaryColor : (darkMode ? '#f6c453' : '#1677ff'),
|
||
colorPrimaryHover: isV2Ui ? v2AntPrimaryHoverColor : (darkMode ? '#ffd666' : '#4096ff'),
|
||
colorPrimaryActive: isV2Ui ? v2AntPrimaryActiveColor : (darkMode ? '#d8a93b' : '#0958d9'),
|
||
colorInfo: isV2Ui ? v2AntPrimaryColor : (darkMode ? '#f6c453' : '#1677ff'),
|
||
colorLink: isV2Ui ? v2AntPrimaryColor : (darkMode ? '#ffd666' : '#1677ff'),
|
||
colorLinkHover: isV2Ui ? v2AntPrimaryHoverColor : (darkMode ? '#ffe58f' : '#4096ff'),
|
||
colorLinkActive: isV2Ui ? v2AntPrimaryActiveColor : (darkMode ? '#d8a93b' : '#0958d9'),
|
||
colorPrimaryBg: isV2Ui ? v2AntPrimaryBgColor : (darkMode ? 'rgba(246, 196, 83, 0.22)' : '#e6f4ff'),
|
||
colorPrimaryBgHover: isV2Ui ? v2AntPrimaryBgHoverColor : (darkMode ? 'rgba(246, 196, 83, 0.30)' : '#bae0ff'),
|
||
colorPrimaryBorder: isV2Ui ? v2AntPrimaryBorderColor : (darkMode ? 'rgba(246, 196, 83, 0.45)' : '#91caff'),
|
||
colorPrimaryBorderHover: isV2Ui ? v2AntPrimaryBorderHoverColor : (darkMode ? 'rgba(246, 196, 83, 0.60)' : '#69b1ff'),
|
||
controlItemBgActive: isV2Ui ? v2AntControlActiveBg : (darkMode ? 'rgba(246, 196, 83, 0.20)' : 'rgba(22, 119, 255, 0.12)'),
|
||
controlItemBgActiveHover: isV2Ui ? v2AntControlActiveHoverBg : (darkMode ? 'rgba(246, 196, 83, 0.28)' : 'rgba(22, 119, 255, 0.18)'),
|
||
controlOutline: isV2Ui ? v2AntControlOutline : (darkMode ? 'rgba(246, 196, 83, 0.50)' : 'rgba(5, 145, 255, 0.24)'),
|
||
},
|
||
components: {
|
||
Layout: {
|
||
bodyBg: 'transparent',
|
||
headerBg: 'transparent',
|
||
siderBg: 'transparent',
|
||
triggerBg: 'transparent'
|
||
},
|
||
Table: {
|
||
headerBg: 'transparent',
|
||
rowHoverBg: darkMode ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0.02)',
|
||
},
|
||
Tabs: {
|
||
cardBg: 'transparent',
|
||
itemActiveColor: isV2Ui ? v2AntPrimaryHoverColor : (darkMode ? '#ffd666' : '#1890ff'),
|
||
itemHoverColor: isV2Ui ? v2AntPrimaryHoverColor : (darkMode ? '#ffe58f' : '#40a9ff'),
|
||
itemSelectedColor: isV2Ui ? v2AntPrimaryColor : (darkMode ? '#ffd666' : '#1677ff'),
|
||
inkBarColor: isV2Ui ? v2AntPrimaryColor : (darkMode ? '#ffd666' : '#1677ff'),
|
||
}
|
||
}
|
||
}), [
|
||
darkMode,
|
||
effectiveOpacity,
|
||
isV2Ui,
|
||
v2AntControlActiveBg,
|
||
v2AntControlActiveHoverBg,
|
||
v2AntControlOutline,
|
||
v2AntPrimaryActiveColor,
|
||
v2AntPrimaryBgColor,
|
||
v2AntPrimaryBgHoverColor,
|
||
v2AntPrimaryBorderColor,
|
||
v2AntPrimaryBorderHoverColor,
|
||
v2AntPrimaryColor,
|
||
v2AntPrimaryHoverColor,
|
||
tokenControlHeight,
|
||
tokenControlHeightLG,
|
||
tokenControlHeightSM,
|
||
tokenFontSize,
|
||
tokenFontSizeLG,
|
||
tokenFontSizeSM,
|
||
resolvedMonoFontFamily,
|
||
resolvedUiFontFamily,
|
||
]);
|
||
const filterFontOption = useCallback((input: string, option?: { value?: string; label?: React.ReactNode }) => (
|
||
matchFontFamilyOption(input, {
|
||
value: String(option?.value || ''),
|
||
label: String(option?.label || ''),
|
||
})
|
||
), []);
|
||
const renderFontOptionLabel = useCallback((option: FontFamilyOption) => (
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 2, lineHeight: 1.35 }}>
|
||
<span>{option.label}</span>
|
||
<span style={{ fontSize: 11, color: darkMode ? 'rgba(255,255,255,0.45)' : 'rgba(16,24,40,0.45)' }}>
|
||
{option.value}
|
||
</span>
|
||
</div>
|
||
), [darkMode]);
|
||
const showLinuxCJKFontBanner = Boolean(
|
||
linuxCJKFontInstallHint &&
|
||
hasLoadedInstalledFontsRef.current &&
|
||
!isFontFamiliesLoading &&
|
||
!fontFamiliesLoadError &&
|
||
!isLinuxCJKFontBannerDismissed,
|
||
);
|
||
const sidebarMetadataFieldItems = useMemo(() => {
|
||
const labelByField: Record<SidebarTableMetadataField, string> = {
|
||
comment: t('sidebar.v2_table_group_menu.show_table_comments'),
|
||
rows: t('sidebar.v2_table_group_menu.display_table_rows'),
|
||
size: t('sidebar.v2_table_group_menu.display_table_size'),
|
||
createdAt: t('sidebar.v2_table_group_menu.display_create_time'),
|
||
updatedAt: t('sidebar.v2_table_group_menu.display_update_time'),
|
||
};
|
||
return sidebarTableMetadataFieldOrder.map((field) => ({
|
||
field,
|
||
label: labelByField[field],
|
||
}));
|
||
}, [sidebarTableMetadataFieldOrder, t]);
|
||
const toggleSidebarMetadataFieldFromSettings = useCallback((field: SidebarTableMetadataField, selected: boolean) => {
|
||
setQueryOptions({
|
||
sidebarTableMetadataFields: setSidebarTableMetadataFieldSelected(
|
||
sidebarTableMetadataFields,
|
||
field,
|
||
selected,
|
||
sidebarTableMetadataFieldOrder,
|
||
),
|
||
});
|
||
}, [setQueryOptions, sidebarTableMetadataFieldOrder, sidebarTableMetadataFields]);
|
||
const handleSidebarMetadataDragEnd = useCallback((event: DragEndEvent) => {
|
||
const activeField = String(event.active.id || '') as SidebarTableMetadataField;
|
||
const overField = String(event.over?.id || '') as SidebarTableMetadataField;
|
||
if (!overField || activeField === overField) {
|
||
return;
|
||
}
|
||
const currentOrder = sidebarMetadataFieldItems.map((item) => item.field);
|
||
const activeIndex = currentOrder.indexOf(activeField);
|
||
const overIndex = currentOrder.indexOf(overField);
|
||
if (activeIndex < 0 || overIndex < 0) {
|
||
return;
|
||
}
|
||
const nextOrder = arrayMove(currentOrder, activeIndex, overIndex);
|
||
setQueryOptions({
|
||
sidebarTableMetadataFieldOrder: nextOrder,
|
||
sidebarTableMetadataFields: applySidebarTableMetadataFieldOrder(
|
||
sidebarTableMetadataFields,
|
||
nextOrder,
|
||
),
|
||
});
|
||
}, [setQueryOptions, sidebarMetadataFieldItems, sidebarTableMetadataFields]);
|
||
const renderProxySettingsContent = useCallback(() => {
|
||
const fieldLabelStyle: React.CSSProperties = {
|
||
marginBottom: 6,
|
||
fontSize: 12,
|
||
color: darkMode ? 'rgba(255,255,255,0.55)' : 'rgba(16,24,40,0.58)',
|
||
};
|
||
const proxyGridColumns = viewportWidth < 760 ? '1fr' : '1fr 1fr';
|
||
const proxyCardAccent = proxyDraft.enabled
|
||
? (darkMode ? 'rgba(34,197,94,0.12)' : 'rgba(16,185,129,0.10)')
|
||
: (darkMode ? 'rgba(148,163,184,0.12)' : 'rgba(71,85,105,0.08)');
|
||
const proxyTestAlertType = proxyTestResult
|
||
? (!proxyTestResult.success ? 'error' : ((proxyTestResult.statusCode || 0) >= 400 ? 'warning' : 'success'))
|
||
: 'info';
|
||
|
||
return (
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 14, padding: '12px 0' }}>
|
||
<div style={{ ...utilityPanelStyle, background: `linear-gradient(135deg, ${proxyCardAccent}, transparent 58%)` }}>
|
||
<div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16 }}>
|
||
<div>
|
||
<div style={{ fontWeight: 700, fontSize: 15 }}>{t('app.proxy.section_title')}</div>
|
||
<div style={{ ...utilityMutedTextStyle, marginTop: 4 }}>{t('app.proxy.description')}</div>
|
||
</div>
|
||
<Switch
|
||
checked={proxyDraft.enabled}
|
||
checkedChildren={t('app.proxy.switch.enabled')}
|
||
unCheckedChildren={t('app.proxy.switch.disabled')}
|
||
onChange={(checked) => setProxyDraft((current) => ({ ...current, enabled: checked }))}
|
||
/>
|
||
</div>
|
||
<Alert
|
||
showIcon
|
||
type={proxyStatusTone}
|
||
message={proxyStatusTitle}
|
||
description={proxyStatusDescription}
|
||
style={{ marginTop: 14 }}
|
||
/>
|
||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 12 }}>
|
||
{proxyPresetItems.map((preset) => (
|
||
<Button key={preset.key} size="small" onClick={() => applyProxyPreset(preset)}>
|
||
{preset.label}
|
||
</Button>
|
||
))}
|
||
</div>
|
||
{proxyDraftDirty && (
|
||
<div style={{ ...utilityMutedTextStyle, marginTop: 10 }}>
|
||
{t('app.proxy.unsaved_hint')}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div style={utilityPanelStyle}>
|
||
<div style={{ fontWeight: 600, marginBottom: 12 }}>{t('app.proxy.connection_title')}</div>
|
||
<div style={{ display: 'grid', gridTemplateColumns: proxyGridColumns, gap: 12 }}>
|
||
<div>
|
||
<div style={fieldLabelStyle}>{t('app.proxy.type')}</div>
|
||
<Segmented
|
||
block
|
||
value={proxyDraft.type}
|
||
options={[
|
||
{ label: t('app.proxy.type_socks5'), value: 'socks5' },
|
||
{ label: t('app.proxy.type_http'), value: 'http' },
|
||
]}
|
||
onChange={(value) => updateProxyDraftType(value as GlobalProxyConfig['type'])}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<div style={fieldLabelStyle}>{t('app.proxy.port')}</div>
|
||
<InputNumber
|
||
min={1}
|
||
max={65535}
|
||
status={proxyDraft.enabled && !proxyDraftPortValid ? 'error' : undefined}
|
||
style={{ width: '100%' }}
|
||
value={proxyDraft.port}
|
||
onChange={(value) => setProxyDraft((current) => ({
|
||
...current,
|
||
port: typeof value === 'number' ? value : getGlobalProxyDefaultPort(current.type),
|
||
}))}
|
||
/>
|
||
</div>
|
||
<div style={{ gridColumn: viewportWidth < 760 ? 'auto' : '1 / span 2' }}>
|
||
<div style={fieldLabelStyle}>{t('app.proxy.host')}</div>
|
||
<Input
|
||
placeholder={t('app.proxy.host_placeholder')}
|
||
status={proxyDraft.enabled && proxyDraftHost === '' ? 'error' : undefined}
|
||
value={proxyDraft.host}
|
||
onChange={(e) => setProxyDraft((current) => ({ ...current, host: e.target.value }))}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div style={{ ...utilityMutedTextStyle, marginTop: 10 }}>
|
||
{proxyDraft.enabled ? t('app.proxy.enabled_edit_hint') : t('app.proxy.disabled_hint')}
|
||
</div>
|
||
</div>
|
||
|
||
<div style={utilityPanelStyle}>
|
||
<div style={{ fontWeight: 600, marginBottom: 12 }}>{t('app.proxy.auth_title')}</div>
|
||
<div style={{ display: 'grid', gridTemplateColumns: proxyGridColumns, gap: 12 }}>
|
||
<div>
|
||
<div style={fieldLabelStyle}>{t('app.proxy.username_optional')}</div>
|
||
<Input
|
||
placeholder="proxy-user"
|
||
value={proxyDraft.user}
|
||
onChange={(e) => setProxyDraft((current) => ({ ...current, user: e.target.value }))}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<div style={fieldLabelStyle}>{t('app.proxy.password_optional')}</div>
|
||
<Input.Password
|
||
placeholder="proxy-password"
|
||
value={proxyDraft.password}
|
||
onChange={(e) => {
|
||
const nextPassword = e.target.value;
|
||
setProxyDraft((current) => ({
|
||
...current,
|
||
password: nextPassword,
|
||
hasPassword: nextPassword !== '' ? true : current.hasPassword,
|
||
}));
|
||
setProxyDraftClearPassword(false);
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
{proxyDraftClearPassword ? (
|
||
<Alert
|
||
showIcon
|
||
type="warning"
|
||
message={t('app.proxy.clear_saved_password_pending')}
|
||
style={{ marginTop: 12 }}
|
||
/>
|
||
) : proxyDraft.hasPassword && proxyDraft.password === '' ? (
|
||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, marginTop: 12 }}>
|
||
<span style={utilityMutedTextStyle}>{t('app.proxy.password_saved_hint')}</span>
|
||
<Button
|
||
size="small"
|
||
onClick={() => {
|
||
setProxyDraft((current) => ({ ...current, password: '', hasPassword: false }));
|
||
setProxyDraftClearPassword(true);
|
||
}}
|
||
>
|
||
{t('app.proxy.clear_saved_password')}
|
||
</Button>
|
||
</div>
|
||
) : (
|
||
<div style={{ ...utilityMutedTextStyle, marginTop: 10 }}>{t('app.proxy.no_auth_hint')}</div>
|
||
)}
|
||
</div>
|
||
|
||
<div style={utilityPanelStyle}>
|
||
<div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 12, marginBottom: 12 }}>
|
||
<div>
|
||
<div style={{ fontWeight: 600 }}>{t('app.proxy.test.title')}</div>
|
||
<div style={{ ...utilityMutedTextStyle, marginTop: 4 }}>{t('app.proxy.test.description')}</div>
|
||
</div>
|
||
<Button
|
||
type="primary"
|
||
loading={proxyTesting}
|
||
disabled={!proxyCanTest}
|
||
onClick={handleTestGlobalProxyDraft}
|
||
>
|
||
{t('app.proxy.test.action')}
|
||
</Button>
|
||
</div>
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
|
||
<div>
|
||
<div style={fieldLabelStyle}>{t('app.proxy.test.target_label')}</div>
|
||
<Select
|
||
value={proxyTestUrlTrimmed}
|
||
style={{ width: '100%' }}
|
||
options={proxyTestPresetItems.map((item) => ({
|
||
value: item.url,
|
||
label: `${item.label} - ${item.url}`,
|
||
}))}
|
||
onChange={(value) => setProxyTestUrl(value)}
|
||
/>
|
||
</div>
|
||
<Input
|
||
value={proxyTestUrl}
|
||
placeholder={t('app.proxy.test.target_placeholder')}
|
||
onChange={(event) => setProxyTestUrl(event.target.value)}
|
||
onPressEnter={() => {
|
||
if (proxyCanTest) {
|
||
void handleTestGlobalProxyDraft();
|
||
}
|
||
}}
|
||
/>
|
||
{!proxyDraft.enabled && (
|
||
<div style={utilityMutedTextStyle}>{t('app.proxy.test.disabled_hint')}</div>
|
||
)}
|
||
{proxyTestResult && (
|
||
<Alert
|
||
showIcon
|
||
type={proxyTestAlertType}
|
||
message={proxyTestResult.message}
|
||
description={[
|
||
proxyTestResult.statusCode ? t('app.proxy.test.result.status', { status: proxyTestResult.statusCode }) : '',
|
||
typeof proxyTestResult.durationMs === 'number' ? t('app.proxy.test.result.duration', { duration: proxyTestResult.durationMs }) : '',
|
||
proxyTestResult.finalUrl && proxyTestResult.finalUrl !== proxyTestResult.url ? t('app.proxy.test.result.final_url', { url: proxyTestResult.finalUrl }) : '',
|
||
].filter(Boolean).join(' ')}
|
||
/>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
|
||
<div style={{ ...utilityMutedTextStyle, flex: '1 1 260px' }}>{t('app.proxy.scope_hint')}</div>
|
||
<div style={{ display: 'flex', gap: 8 }}>
|
||
<Button onClick={resetProxyDraftToCurrent} disabled={!proxyDraftDirty || proxyApplying}>
|
||
{t('app.proxy.reset')}
|
||
</Button>
|
||
<Button
|
||
type="primary"
|
||
loading={proxyApplying}
|
||
disabled={!proxyDraftDirty && !proxyApplying}
|
||
onClick={handleApplyGlobalProxyDraft}
|
||
>
|
||
{t('app.proxy.apply')}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}, [
|
||
applyProxyPreset,
|
||
darkMode,
|
||
handleApplyGlobalProxyDraft,
|
||
proxyApplying,
|
||
proxyCanTest,
|
||
proxyDraft.enabled,
|
||
proxyDraft.hasPassword,
|
||
proxyDraft.host,
|
||
proxyDraft.password,
|
||
proxyDraft.port,
|
||
proxyDraft.type,
|
||
proxyDraft.user,
|
||
proxyDraftClearPassword,
|
||
proxyDraftDirty,
|
||
proxyDraftHost,
|
||
proxyDraftPortValid,
|
||
proxyTestPresetItems,
|
||
proxyTestResult,
|
||
proxyTesting,
|
||
proxyTestUrl,
|
||
proxyTestUrlTrimmed,
|
||
proxyPresetItems,
|
||
proxyStatusDescription,
|
||
proxyStatusTitle,
|
||
proxyStatusTone,
|
||
resetProxyDraftToCurrent,
|
||
t,
|
||
handleTestGlobalProxyDraft,
|
||
updateProxyDraftType,
|
||
utilityMutedTextStyle,
|
||
utilityPanelStyle,
|
||
viewportWidth,
|
||
]);
|
||
const renderSidebarMetadataSettingsPane = useCallback(() => (
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 16, padding: '12px 0' }}>
|
||
<div style={utilityPanelStyle}>
|
||
<div style={{ marginBottom: 8, fontWeight: 600 }}>{t('app.settings.sidebar_metadata.title')}</div>
|
||
<div style={{ ...utilityMutedTextStyle, marginBottom: 14 }}>
|
||
{t('app.settings.sidebar_metadata.description')}
|
||
</div>
|
||
<DndContext
|
||
sensors={sidebarMetadataDragSensors}
|
||
collisionDetection={closestCenter}
|
||
onDragEnd={handleSidebarMetadataDragEnd}
|
||
>
|
||
<SortableContext
|
||
items={sidebarMetadataFieldItems.map((item) => item.field)}
|
||
strategy={verticalListSortingStrategy}
|
||
>
|
||
<div style={{ display: 'grid', gap: 14 }}>
|
||
{sidebarMetadataFieldItems.map((item) => {
|
||
const checked = sidebarTableMetadataFields.includes(item.field);
|
||
return (
|
||
<SidebarMetadataSortableRow
|
||
key={item.field}
|
||
field={item.field}
|
||
label={item.label}
|
||
checked={checked}
|
||
dividerColor={overlayTheme.divider}
|
||
titleColor={overlayTheme.titleText}
|
||
mutedColor={utilityMutedTextStyle.color as string}
|
||
onToggle={(selected) => toggleSidebarMetadataFieldFromSettings(item.field, selected)}
|
||
/>
|
||
);
|
||
})}
|
||
</div>
|
||
</SortableContext>
|
||
</DndContext>
|
||
</div>
|
||
<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
|
||
<Button
|
||
onClick={() => {
|
||
setQueryOptions({
|
||
sidebarTableMetadataFields: DEFAULT_SIDEBAR_TABLE_METADATA_FIELDS,
|
||
sidebarTableMetadataFieldOrder: [...SIDEBAR_TABLE_METADATA_FIELDS],
|
||
});
|
||
}}
|
||
>
|
||
{t('app.theme.action.restore_defaults')}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
), [
|
||
overlayTheme.divider,
|
||
overlayTheme.titleText,
|
||
setQueryOptions,
|
||
sidebarMetadataFieldItems,
|
||
sidebarMetadataDragSensors,
|
||
handleSidebarMetadataDragEnd,
|
||
sidebarTableMetadataFields,
|
||
t,
|
||
toggleSidebarMetadataFieldFromSettings,
|
||
utilityMutedTextStyle,
|
||
utilityPanelStyle,
|
||
]);
|
||
const renderAboutUpdateActions = (closeAction?: React.ReactNode) => [
|
||
isBackgroundProgressForLatestUpdate && !isLatestUpdateDownloaded ? (
|
||
<Button key="progress" icon={<DownloadOutlined />} onClick={showUpdateDownloadProgress}>{t('app.about.action.download_progress')}</Button>
|
||
) : null,
|
||
lastUpdateInfo?.hasUpdate && !isLatestUpdateDownloaded && !isBackgroundProgressForLatestUpdate ? (
|
||
<Button key="mute" onClick={muteLatestUpdate}>{t('app.about.action.mute_this_version')}</Button>
|
||
) : null,
|
||
<Button key="check" icon={<CloudDownloadOutlined />} onClick={() => checkForUpdates(false)}>{t('app.about.action.check_updates')}</Button>,
|
||
closeAction ?? null,
|
||
lastUpdateInfo?.hasUpdate && !isLatestUpdateDownloaded && !isBackgroundProgressForLatestUpdate ? (
|
||
<Button key="download" type="primary" icon={<DownloadOutlined />} onClick={() => downloadUpdate(lastUpdateInfo, false)}>{t('app.about.action.download_update')}</Button>
|
||
) : null,
|
||
isLatestUpdateDownloaded ? (
|
||
<Button key="open-install-directory" onClick={openDownloadedUpdateDirectory}>
|
||
{t('app.about.action.open_install_directory')}
|
||
</Button>
|
||
) : null,
|
||
isLatestUpdateDownloaded ? (
|
||
<Button key="restart-to-update" type="primary" icon={<DownloadOutlined />} onClick={handleInstallFromProgress}>
|
||
{t('app.about.action.restart_to_update')}
|
||
</Button>
|
||
) : null,
|
||
].filter(Boolean);
|
||
|
||
const renderAboutSettingsContent = () => (
|
||
aboutLoading ? (
|
||
<div style={{ padding: '16px 0', textAlign: 'center' }}>
|
||
<Spin />
|
||
</div>
|
||
) : (
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||
<div style={utilityPanelStyle}>
|
||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 12 }}>
|
||
<div>
|
||
<div style={{ marginBottom: 6, fontWeight: 600 }}>{t('app.about.field.version')}</div>
|
||
<div style={utilityMutedTextStyle}>{aboutDisplayVersion}</div>
|
||
</div>
|
||
<div>
|
||
<div style={{ marginBottom: 6, fontWeight: 600 }}>{t('app.about.field.author')}</div>
|
||
<div style={utilityMutedTextStyle}>{aboutInfo?.author || t('common.unknown')}</div>
|
||
</div>
|
||
<div style={{ gridColumn: '1 / -1' }}>
|
||
<div style={{ marginBottom: 6, fontWeight: 600 }}>{t('app.about.field.update_status')}</div>
|
||
<div style={utilityMutedTextStyle}>{aboutUpdateStatus || t('app.about.update_status.not_checked')}</div>
|
||
</div>
|
||
<div style={{ gridColumn: '1 / -1' }}>
|
||
<div style={{ marginBottom: 6, fontWeight: 600 }}>{t('app.about.field.update_channel')}</div>
|
||
<Select
|
||
value={updateChannel}
|
||
options={[
|
||
{ value: 'latest', label: t('app.about.update_channel.latest') },
|
||
{ value: 'dev', label: t('app.about.update_channel.dev') },
|
||
]}
|
||
onChange={(value) => {
|
||
void changeUpdateChannel(String(value));
|
||
}}
|
||
loading={isUpdateChannelLoading}
|
||
disabled={
|
||
isUpdateChannelLoading
|
||
|| isUpdateChannelSaving
|
||
|| updateDownloadProgress.status === 'start'
|
||
|| updateDownloadProgress.status === 'downloading'
|
||
}
|
||
style={{ width: 220, maxWidth: '100%' }}
|
||
/>
|
||
</div>
|
||
{aboutInfo?.communityUrl ? (
|
||
<div style={{ gridColumn: '1 / -1' }}>
|
||
<div style={{ marginBottom: 6, fontWeight: 600 }}>{t('app.about.field.community')}</div>
|
||
<a onClick={(e) => { e.preventDefault(); if (aboutInfo?.communityUrl) BrowserOpenURL(aboutInfo.communityUrl); }} href={aboutInfo.communityUrl}>{t('app.about.community.ai_book')}</a>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
<div style={utilityPanelStyle}>
|
||
<div style={{ marginBottom: 10, fontWeight: 600 }}>{t('app.about.project_links')}</div>
|
||
<div style={{ display: 'grid', gap: 10 }}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||
<GithubOutlined />
|
||
{aboutInfo?.repoUrl ? (
|
||
<a onClick={(e) => { e.preventDefault(); if (aboutInfo?.repoUrl) BrowserOpenURL(aboutInfo.repoUrl); }} href={aboutInfo.repoUrl}>{aboutInfo.repoUrl}</a>
|
||
) : t('common.unknown')}
|
||
</div>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||
<BugOutlined />
|
||
{aboutInfo?.issueUrl ? (
|
||
<a onClick={(e) => { e.preventDefault(); if (aboutInfo?.issueUrl) BrowserOpenURL(aboutInfo.issueUrl); }} href={aboutInfo.issueUrl}>{aboutInfo.issueUrl}</a>
|
||
) : t('common.unknown')}
|
||
</div>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||
<CloudDownloadOutlined />
|
||
{aboutInfo?.releaseUrl ? (
|
||
<a onClick={(e) => { e.preventDefault(); if (aboutInfo?.releaseUrl) BrowserOpenURL(aboutInfo.releaseUrl); }} href={aboutInfo.releaseUrl}>{aboutInfo.releaseUrl}</a>
|
||
) : t('common.unknown')}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
);
|
||
|
||
const renderSettingsCenterAboutProjectEntry = ({
|
||
icon,
|
||
title,
|
||
description,
|
||
url,
|
||
}: {
|
||
icon: React.ReactNode;
|
||
title: string;
|
||
description: string;
|
||
url?: string;
|
||
}) => (
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
if (url) {
|
||
BrowserOpenURL(url);
|
||
}
|
||
}}
|
||
disabled={!url}
|
||
style={{
|
||
width: '100%',
|
||
display: 'grid',
|
||
gridTemplateColumns: '44px minmax(0, 1fr) auto',
|
||
alignItems: 'center',
|
||
gap: 14,
|
||
padding: '18px 20px',
|
||
borderRadius: 12,
|
||
border: `1px solid ${darkMode ? 'rgba(255,255,255,0.10)' : 'rgba(16,24,40,0.10)'}`,
|
||
background: darkMode ? 'rgba(255,255,255,0.025)' : 'rgba(255,255,255,0.76)',
|
||
color: darkMode ? 'rgba(255,255,255,0.90)' : '#101828',
|
||
cursor: url ? 'pointer' : 'not-allowed',
|
||
opacity: url ? 1 : 0.58,
|
||
textAlign: 'left',
|
||
}}
|
||
>
|
||
<span style={{ fontSize: 26, display: 'grid', placeItems: 'center', color: darkMode ? '#f8fafc' : '#0f172a' }}>
|
||
{icon}
|
||
</span>
|
||
<span style={{ minWidth: 0 }}>
|
||
<span style={{ display: 'block', fontSize: 16, fontWeight: 700, lineHeight: 1.4 }}>{title}</span>
|
||
<span style={{ ...utilityMutedTextStyle, display: 'block', marginTop: 3, lineHeight: 1.45 }}>{description}</span>
|
||
</span>
|
||
<RightOutlined style={{ color: overlayTheme.mutedText, fontSize: 18 }} />
|
||
</button>
|
||
);
|
||
|
||
const renderSettingsCenterAboutPane = () => {
|
||
if (aboutLoading) {
|
||
return (
|
||
<div style={{ padding: '16px 0', textAlign: 'center' }}>
|
||
<Spin />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const hasUpdate = Boolean(lastUpdateInfo?.hasUpdate);
|
||
const latestVersionText = lastUpdateInfo?.latestVersion || t('common.unknown');
|
||
const updateStatusText = hasUpdate
|
||
? t('app.about.hero.update_available_version', { version: latestVersionText })
|
||
: (lastUpdateInfo ? t('app.about.hero.no_update') : t('app.about.update_status.not_checked'));
|
||
const currentVersionText = lastUpdateInfo?.currentVersion || aboutDisplayVersion;
|
||
const releaseNotesText = lastUpdateInfo?.releaseName || (hasUpdate ? t('app.about.release_notes.fallback') : '-');
|
||
const releaseTimeText = formatAboutReleaseTime(lastUpdateInfo?.releasePublishedAt);
|
||
const cardBorder = darkMode ? 'rgba(255,255,255,0.10)' : 'rgba(16,24,40,0.11)';
|
||
const cardBg = darkMode ? 'rgba(255,255,255,0.03)' : 'rgba(255,255,255,0.82)';
|
||
const mutedText = utilityMutedTextStyle.color;
|
||
const dividerColor = darkMode ? 'rgba(255,255,255,0.09)' : 'rgba(16,24,40,0.09)';
|
||
const versionRows = [
|
||
[t('app.about.version.current'), currentVersionText],
|
||
[t('app.about.version.latest'), latestVersionText],
|
||
[t('app.about.version.release_time'), releaseTimeText],
|
||
[t('app.about.version.release_notes'), releaseNotesText],
|
||
];
|
||
|
||
return (
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 18, padding: '10px 0 20px' }}>
|
||
<div
|
||
style={{
|
||
border: `1px solid ${cardBorder}`,
|
||
borderRadius: 14,
|
||
padding: '18px 22px',
|
||
background: cardBg,
|
||
display: 'grid',
|
||
gridTemplateColumns: 'minmax(0, 1fr) auto',
|
||
alignItems: 'center',
|
||
gap: 18,
|
||
}}
|
||
>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 18, minWidth: 0 }}>
|
||
<div
|
||
style={{
|
||
width: 64,
|
||
height: 64,
|
||
borderRadius: 14,
|
||
background: 'linear-gradient(135deg, #19b968 0%, #058d40 100%)',
|
||
display: 'grid',
|
||
placeItems: 'center',
|
||
color: '#fff',
|
||
fontSize: 36,
|
||
boxShadow: darkMode ? '0 12px 26px rgba(0,0,0,0.26)' : '0 10px 22px rgba(16,185,129,0.22)',
|
||
flexShrink: 0,
|
||
}}
|
||
>
|
||
<SendOutlined />
|
||
</div>
|
||
<div style={{ minWidth: 0 }}>
|
||
<div style={{ fontSize: 24, lineHeight: 1.1, fontWeight: 800, color: overlayTheme.titleText }}>GoNavi</div>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 12, flexWrap: 'wrap' }}>
|
||
<span
|
||
style={{
|
||
display: 'inline-flex',
|
||
alignItems: 'center',
|
||
gap: 7,
|
||
padding: '5px 10px',
|
||
borderRadius: 999,
|
||
background: darkMode ? 'rgba(255,255,255,0.06)' : 'rgba(16,24,40,0.04)',
|
||
color: mutedText,
|
||
fontWeight: 600,
|
||
}}
|
||
>
|
||
<TagOutlined />
|
||
{aboutDisplayVersion}
|
||
</span>
|
||
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, color: mutedText, fontWeight: 600 }}>
|
||
<UserOutlined />
|
||
{aboutInfo?.author || t('common.unknown')}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
style={{
|
||
minWidth: 260,
|
||
padding: '11px 18px',
|
||
borderRadius: 10,
|
||
border: `1px solid ${hasUpdate ? (darkMode ? 'rgba(74,222,128,0.46)' : 'rgba(22,163,74,0.30)') : cardBorder}`,
|
||
background: hasUpdate
|
||
? (darkMode ? 'rgba(34,197,94,0.10)' : 'rgba(22,163,74,0.055)')
|
||
: (darkMode ? 'rgba(255,255,255,0.03)' : 'rgba(16,24,40,0.025)'),
|
||
color: hasUpdate ? (darkMode ? '#86efac' : '#16a34a') : mutedText,
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
gap: 10,
|
||
fontSize: 15,
|
||
fontWeight: 700,
|
||
}}
|
||
>
|
||
<UpCircleOutlined style={{ fontSize: 21 }} />
|
||
{updateStatusText}
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', gap: 22 }}>
|
||
<div style={{ border: `1px solid ${cardBorder}`, borderRadius: 12, background: cardBg, overflow: 'hidden' }}>
|
||
<div style={{ padding: '22px 24px', fontSize: 18, fontWeight: 800, color: overlayTheme.titleText }}>
|
||
{t('app.about.version_update.title')}
|
||
</div>
|
||
<div style={{ borderTop: `1px solid ${dividerColor}`, padding: '18px 24px' }}>
|
||
<div style={{ display: 'grid', gap: 8 }}>
|
||
<div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(220px, 260px)', alignItems: 'center', gap: 16 }}>
|
||
<div style={{ fontSize: 15, fontWeight: 600, color: overlayTheme.titleText }}>{t('app.about.field.update_channel')}</div>
|
||
<Segmented
|
||
className="gonavi-about-update-channel"
|
||
value={updateChannel}
|
||
options={[
|
||
{ value: 'latest', label: t('app.about.update_channel.latest') },
|
||
{ value: 'dev', label: t('app.about.update_channel.dev') },
|
||
]}
|
||
onChange={(value) => {
|
||
void changeUpdateChannel(String(value));
|
||
}}
|
||
disabled={
|
||
isUpdateChannelLoading
|
||
|| isUpdateChannelSaving
|
||
|| updateDownloadProgress.status === 'start'
|
||
|| updateDownloadProgress.status === 'downloading'
|
||
}
|
||
block
|
||
style={{ width: '100%' }}
|
||
/>
|
||
</div>
|
||
<div style={{ ...utilityMutedTextStyle, lineHeight: 1.55, maxWidth: 360 }}>{t('app.about.version_update.channel_hint')}</div>
|
||
</div>
|
||
<div style={{ height: 1, background: dividerColor, margin: '18px 0' }} />
|
||
<div style={{ display: 'grid', gap: 13 }}>
|
||
{versionRows.map(([label, value]) => (
|
||
<div key={label} style={{ display: 'grid', gridTemplateColumns: '150px minmax(0, 1fr)', gap: 16, alignItems: 'start' }}>
|
||
<div style={{ fontWeight: 600, color: overlayTheme.titleText, lineHeight: 1.45 }}>{label}</div>
|
||
<div style={{ color: label === t('app.about.version.latest') && hasUpdate ? (darkMode ? '#86efac' : '#16a34a') : mutedText, fontWeight: label === t('app.about.version.latest') && hasUpdate ? 700 : 500, lineHeight: 1.45, minWidth: 0, overflowWrap: 'anywhere' }}>
|
||
{value}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<div style={{ borderTop: `1px solid ${dividerColor}`, padding: '16px 24px', display: 'flex', alignItems: 'center', gap: 10, color: hasUpdate ? (darkMode ? '#86efac' : '#16a34a') : mutedText, fontWeight: 700 }}>
|
||
<CheckOutlined />
|
||
{hasUpdate ? t('app.about.version_update.available') : t('app.about.version_update.up_to_date')}
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{ border: `1px solid ${cardBorder}`, borderRadius: 12, background: cardBg, padding: '22px 24px' }}>
|
||
<div style={{ fontSize: 18, fontWeight: 800, color: overlayTheme.titleText, marginBottom: 18 }}>
|
||
{t('app.about.project_links')}
|
||
</div>
|
||
<div style={{ display: 'grid', gap: 14 }}>
|
||
{renderSettingsCenterAboutProjectEntry({
|
||
icon: <GithubOutlined />,
|
||
title: t('app.about.project.github.title'),
|
||
description: t('app.about.project.github.description'),
|
||
url: aboutInfo?.repoUrl,
|
||
})}
|
||
{renderSettingsCenterAboutProjectEntry({
|
||
icon: <MessageOutlined />,
|
||
title: t('app.about.project.issues.title'),
|
||
description: t('app.about.project.issues.description'),
|
||
url: aboutInfo?.issueUrl,
|
||
})}
|
||
{renderSettingsCenterAboutProjectEntry({
|
||
icon: <FileTextOutlined />,
|
||
title: t('app.about.project.releases.title'),
|
||
description: t('app.about.project.releases.description'),
|
||
url: lastUpdateInfo?.releaseNotesUrl || aboutInfo?.releaseUrl,
|
||
})}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const renderSettingsCenterAboutFooter = () => (
|
||
<>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 12, minWidth: 0, color: overlayTheme.mutedText, fontWeight: 600 }}>
|
||
<SyncOutlined style={{ color: darkMode ? '#86efac' : '#16a34a', fontSize: 22 }} />
|
||
<span>
|
||
{aboutLastCheckedAt
|
||
? t('app.about.last_checked_at', { time: aboutLastCheckedAt })
|
||
: t('app.about.last_checked_never')}
|
||
</span>
|
||
</div>
|
||
<div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
|
||
{renderAboutUpdateActions()}
|
||
</div>
|
||
</>
|
||
);
|
||
|
||
const renderThemeSettingsSection = (title: React.ReactNode, children: React.ReactNode, hint?: React.ReactNode) => (
|
||
<section className="gonavi-settings-section">
|
||
<div className="gonavi-settings-section-title">{title}</div>
|
||
{hint ? <div className="gonavi-settings-section-hint">{hint}</div> : null}
|
||
<div>{children}</div>
|
||
</section>
|
||
);
|
||
|
||
const renderThemeSettingsRow = ({
|
||
label,
|
||
hint,
|
||
control,
|
||
stacked = false,
|
||
controlOnly = false,
|
||
}: {
|
||
label?: React.ReactNode;
|
||
hint?: React.ReactNode;
|
||
control: React.ReactNode;
|
||
stacked?: boolean;
|
||
/** 分区标题已说明用途时，只渲染控件，避免标题重复 */
|
||
controlOnly?: boolean;
|
||
}) => (
|
||
<div className={`gonavi-settings-row${stacked || controlOnly ? ' is-stacked' : ''}${controlOnly ? ' is-control-only' : ''}`}>
|
||
{!controlOnly ? (
|
||
<div>
|
||
<div className="gonavi-settings-label">{label}</div>
|
||
{hint ? <div className="gonavi-settings-label-hint">{hint}</div> : null}
|
||
</div>
|
||
) : null}
|
||
<div className="gonavi-settings-control">{control}</div>
|
||
</div>
|
||
);
|
||
|
||
const renderThemeModePreview = (preview: 'light' | 'dark' | 'system') => (
|
||
<div
|
||
aria-hidden
|
||
className={`gonavi-settings-mode-preview${preview === 'system' ? ' is-system' : ''}`}
|
||
>
|
||
{(preview === 'light' || preview === 'system') ? (
|
||
<div className="gonavi-settings-mode-preview-pane is-light">
|
||
<span className="gonavi-settings-mode-preview-line" />
|
||
<span className="gonavi-settings-mode-preview-line" />
|
||
<span className="gonavi-settings-mode-preview-line" />
|
||
</div>
|
||
) : null}
|
||
{(preview === 'dark' || preview === 'system') ? (
|
||
<div className="gonavi-settings-mode-preview-pane is-dark">
|
||
<span className="gonavi-settings-mode-preview-line" />
|
||
<span className="gonavi-settings-mode-preview-line" />
|
||
<span className="gonavi-settings-mode-preview-line" />
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
);
|
||
|
||
const renderUiVersionPreview = (version: 'legacy' | 'v2') => (
|
||
<div aria-hidden className={`gonavi-settings-ui-version-preview is-${version}`}>
|
||
<div className="uv-side">
|
||
<span className="uv-dot" />
|
||
<span className="uv-dot" />
|
||
<span className="uv-dot" />
|
||
{version === 'legacy' ? <span className="uv-dot" /> : null}
|
||
</div>
|
||
<div className="uv-main">
|
||
<div className="uv-bar is-accent" />
|
||
<div className="uv-cards">
|
||
<div className="uv-card" />
|
||
<div className="uv-card" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
const renderThemeSettingsContentV2 = () => (
|
||
<div className="gonavi-theme-settings" style={{
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
gap: 10,
|
||
padding: '4px 4px 0',
|
||
height: '100%',
|
||
minHeight: 0,
|
||
overflow: 'hidden',
|
||
boxSizing: 'border-box',
|
||
}}>
|
||
<div style={{ flexShrink: 0, display: 'grid', gap: 4 }}>
|
||
{/* 自绘 Tab：避开 antd Segmented CSS-in-JS 压掉选中态 */}
|
||
<div className="gonavi-settings-tabs" role="tablist" aria-label={t('app.settings.entry.theme.title')}>
|
||
{([
|
||
{ value: 'theme' as const, label: t('app.theme.nav.theme.title'), icon: <SkinOutlined /> },
|
||
{ value: 'appearance' as const, label: t('app.theme.nav.appearance.title'), icon: <BgColorsOutlined /> },
|
||
{ value: 'workspace' as const, label: t('app.theme.nav.workspace.title'), icon: <AppstoreOutlined /> },
|
||
]).map((item) => {
|
||
const active = themeModalSection === item.value;
|
||
return (
|
||
<button
|
||
key={item.value}
|
||
type="button"
|
||
role="tab"
|
||
aria-selected={active}
|
||
className={`gonavi-settings-tab${active ? ' is-active' : ''}`}
|
||
onClick={() => setThemeModalSection(item.value)}
|
||
>
|
||
<span className="gonavi-settings-tab-icon">{item.icon}</span>
|
||
<span>{item.label}</span>
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
<div className="gonavi-settings-inline-meta" style={{ marginTop: 2 }}>
|
||
{t('app.theme.instant_apply_hint')}
|
||
</div>
|
||
</div>
|
||
<div
|
||
key={themeModalSection}
|
||
style={{
|
||
minWidth: 0,
|
||
minHeight: 0,
|
||
flex: 1,
|
||
overflowY: 'auto',
|
||
/* visible：避免 Slider 两端手柄被横向裁切 */
|
||
overflowX: 'visible',
|
||
overscrollBehavior: 'contain',
|
||
paddingRight: 8,
|
||
paddingLeft: 2,
|
||
paddingBottom: 20,
|
||
}}
|
||
>
|
||
{themeModalSection === 'theme' ? (
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
|
||
{renderThemeSettingsSection(
|
||
t('app.theme.mode_title'),
|
||
<div className="gonavi-settings-mode-grid" role="radiogroup" aria-label={t('app.theme.mode_title')}>
|
||
{([
|
||
{ key: 'light' as const, label: t('app.theme.mode.light.label'), preview: 'light' as const },
|
||
{ key: 'dark' as const, label: t('app.theme.mode.dark.label'), preview: 'dark' as const },
|
||
{ key: 'system' as const, label: t('app.theme.mode.system.label'), preview: 'system' as const },
|
||
]).map((item) => {
|
||
const active = themePreference === item.key;
|
||
return (
|
||
<button
|
||
key={item.key}
|
||
type="button"
|
||
role="radio"
|
||
aria-checked={active}
|
||
className={`gonavi-settings-mode-tile${active ? ' is-active' : ''}`}
|
||
onClick={() => setThemePreference(item.key)}
|
||
>
|
||
{renderThemeModePreview(item.preview)}
|
||
<div className="gonavi-settings-mode-meta">
|
||
<span className="gonavi-settings-mode-label">{item.label}</span>
|
||
{active ? <CheckOutlined className="gonavi-settings-mode-check" /> : null}
|
||
</div>
|
||
</button>
|
||
);
|
||
})}
|
||
</div>,
|
||
)}
|
||
{renderThemeSettingsSection(
|
||
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
|
||
<span>{t('app.theme.ui_version.title')}</span>
|
||
<span style={{
|
||
fontSize: 10,
|
||
fontWeight: 700,
|
||
padding: '1px 6px',
|
||
background: darkMode ? 'rgba(56,189,248,0.18)' : 'rgba(2,132,199,0.10)',
|
||
color: darkMode ? '#7dd3fc' : '#0284c7',
|
||
borderRadius: 4,
|
||
}}>
|
||
{t('app.theme.ui_version.badge.new')}
|
||
</span>
|
||
{appearance.uiVersion === 'v2' ? (
|
||
<span className="gonavi-settings-beta-chip">{t('app.theme.ui_version.v2.badge')}</span>
|
||
) : null}
|
||
</span>,
|
||
<>
|
||
<div
|
||
className="gonavi-settings-ui-version-grid"
|
||
role="radiogroup"
|
||
aria-label={t('app.theme.ui_version.title')}
|
||
>
|
||
{([
|
||
{
|
||
key: 'legacy' as const,
|
||
label: t('app.theme.ui_version.legacy.label'),
|
||
badge: t('app.theme.ui_version.legacy.badge'),
|
||
badgeClass: '',
|
||
},
|
||
{
|
||
key: 'v2' as const,
|
||
label: t('app.theme.ui_version.v2.label'),
|
||
badge: t('app.theme.ui_version.v2.badge'),
|
||
badgeClass: ' is-new',
|
||
},
|
||
]).map((item) => {
|
||
const active = (appearance.uiVersion ?? 'legacy') === item.key;
|
||
return (
|
||
<button
|
||
key={item.key}
|
||
type="button"
|
||
role="radio"
|
||
aria-checked={active}
|
||
className={`gonavi-settings-ui-version-tile${active ? ' is-active' : ''}`}
|
||
onClick={() => setAppearance({ uiVersion: item.key })}
|
||
>
|
||
{renderUiVersionPreview(item.key)}
|
||
<div className="gonavi-settings-ui-version-meta">
|
||
<span className="gonavi-settings-ui-version-title">
|
||
<span>{item.label}</span>
|
||
<span className={`gonavi-settings-ui-version-badge${item.badgeClass}`}>{item.badge}</span>
|
||
</span>
|
||
{active ? <CheckOutlined className="gonavi-settings-mode-check" /> : null}
|
||
</div>
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
<div className="gonavi-settings-inline-meta" style={{ marginTop: 8 }}>
|
||
{t('app.theme.ui_version.platform_hint')}
|
||
</div>
|
||
{appearance.uiVersion === 'v2' ? (
|
||
<div className="gonavi-settings-inline-choice-row">
|
||
<Tooltip title={t('app.theme.ui_version.sidebar_search.hint')}>
|
||
<span className="gonavi-settings-label" style={{ cursor: 'help' }}>
|
||
{t('app.theme.ui_version.sidebar_search.title')}
|
||
</span>
|
||
</Tooltip>
|
||
<div className="gonavi-settings-pills" role="group" aria-label={t('app.theme.ui_version.sidebar_search.title')}>
|
||
{([
|
||
{ value: 'command' as const, label: t('app.theme.ui_version.sidebar_search.command') },
|
||
{ value: 'filter' as const, label: t('app.theme.ui_version.sidebar_search.filter') },
|
||
]).map((item) => {
|
||
const active = (appearance.v2SidebarSearchMode ?? 'command') === item.value;
|
||
return (
|
||
<button
|
||
key={item.value}
|
||
type="button"
|
||
className={`gonavi-settings-pill${active ? ' is-active' : ''}`}
|
||
aria-pressed={active}
|
||
onClick={() => setAppearance({ v2SidebarSearchMode: item.value })}
|
||
>
|
||
{item.label}
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
</>,
|
||
)}
|
||
</div>
|
||
) : themeModalSection === 'appearance' ? (
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
|
||
{renderThemeSettingsSection(
|
||
t('app.theme.nav.appearance.title'),
|
||
<>
|
||
{renderThemeSettingsRow({
|
||
label: t('app.theme.appearance.ui_scale_title'),
|
||
hint: t('app.theme.appearance.ui_scale_hint'),
|
||
stacked: true,
|
||
control: (
|
||
<ThemeSettingsSlider
|
||
min={MIN_UI_SCALE}
|
||
max={MAX_UI_SCALE}
|
||
step={0.05}
|
||
marks={UI_SCALE_SLIDER_MARKS}
|
||
value={effectiveUiScale}
|
||
unit="percent"
|
||
onChange={(v) => setUiScale(v)}
|
||
/>
|
||
),
|
||
})}
|
||
{renderThemeSettingsRow({
|
||
label: t('app.theme.appearance.font_size_title'),
|
||
stacked: true,
|
||
control: (
|
||
<ThemeSettingsSlider
|
||
min={MIN_FONT_SIZE}
|
||
max={MAX_FONT_SIZE}
|
||
step={1}
|
||
marks={FONT_SIZE_SLIDER_MARKS}
|
||
value={effectiveFontSize}
|
||
unit="px"
|
||
onChange={(v) => setFontSize(v)}
|
||
/>
|
||
),
|
||
})}
|
||
{appearance.uiVersion === 'v2' ? renderThemeSettingsRow({
|
||
label: t('app.theme.appearance.sidebar_rail_scale_title'),
|
||
hint: t('app.theme.appearance.sidebar_rail_scale_hint'),
|
||
stacked: true,
|
||
control: (
|
||
<ThemeSettingsSlider
|
||
min={MIN_V2_SIDEBAR_RAIL_SCALE}
|
||
max={MAX_V2_SIDEBAR_RAIL_SCALE}
|
||
step={0.05}
|
||
marks={SIDEBAR_RAIL_SCALE_SLIDER_MARKS}
|
||
value={effectiveSidebarRailScale}
|
||
unit="percent"
|
||
onChange={(value) => setAppearance({
|
||
v2SidebarRailScale: sanitizeV2SidebarRailScale(value),
|
||
})}
|
||
/>
|
||
),
|
||
}) : null}
|
||
</>,
|
||
)}
|
||
{renderThemeSettingsSection(
|
||
t('app.theme.font_family.title'),
|
||
<>
|
||
<div style={{ padding: '8px 0' }}>
|
||
<div className="gonavi-settings-label" style={{ marginBottom: 8 }}>{t('app.theme.font_family.ui_title')}</div>
|
||
<Select
|
||
allowClear
|
||
showSearch
|
||
optionFilterProp="label"
|
||
loading={isFontFamiliesLoading}
|
||
placeholder={DEFAULT_UI_FONT_FAMILY}
|
||
value={appearance.customUIFontFamily ?? undefined}
|
||
onChange={(value) => setAppearance({
|
||
customUIFontFamily: sanitizeFontFamilyInput(value),
|
||
})}
|
||
onClear={() => setAppearance({ customUIFontFamily: null })}
|
||
options={uiFontOptions.map((option) => ({
|
||
value: option.value,
|
||
label: option.label,
|
||
}))}
|
||
filterOption={filterFontOption}
|
||
popupMatchSelectWidth
|
||
style={{ width: '100%' }}
|
||
optionRender={(option) => renderFontOptionLabel({
|
||
value: String(option.data.value),
|
||
label: String(option.data.label),
|
||
})}
|
||
/>
|
||
<div className="gonavi-settings-inline-meta">
|
||
{fontFamiliesLoadError
|
||
? t('app.theme.font_family.load_failed_fallback', { error: fontFamiliesLoadError })
|
||
: (installedFontFamilies.length > 0
|
||
? t('app.theme.font_family.loaded_ui_hint', { count: installedFontFamilies.length })
|
||
: t('app.theme.font_family.loading_ui_hint'))}
|
||
</div>
|
||
{linuxCJKFontInstallHint && hasLoadedInstalledFontsRef.current && !isFontFamiliesLoading && !fontFamiliesLoadError ? (
|
||
<div className="gonavi-settings-alert" style={{ borderColor: darkMode ? 'rgba(250,204,21,0.28)' : 'rgba(217,119,6,0.22)', background: darkMode ? 'rgba(250,204,21,0.08)' : 'rgba(251,191,36,0.12)', color: darkMode ? 'rgba(254,249,195,0.92)' : '#92400e' }}>
|
||
{t('app.theme.font_family.linux_cjk_install_prefix')}
|
||
<span style={{ fontFamily: 'var(--gn-font-mono)', marginLeft: 6 }}>{linuxCJKFontInstallHint}</span>
|
||
{t('app.theme.font_family.linux_cjk_install_suffix')}
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
<div style={{ padding: '8px 0', borderTop: '1px solid var(--gn-settings-line)' }}>
|
||
<div className="gonavi-settings-label" style={{ marginBottom: 8 }}>{t('app.theme.font_family.mono_title')}</div>
|
||
<Select
|
||
allowClear
|
||
showSearch
|
||
optionFilterProp="label"
|
||
loading={isFontFamiliesLoading}
|
||
placeholder={DEFAULT_MONO_FONT_FAMILY}
|
||
value={appearance.customMonoFontFamily ?? undefined}
|
||
onChange={(value) => setAppearance({
|
||
customMonoFontFamily: sanitizeFontFamilyInput(value),
|
||
})}
|
||
onClear={() => setAppearance({ customMonoFontFamily: null })}
|
||
options={monoFontOptions.map((option) => ({
|
||
value: option.value,
|
||
label: option.label,
|
||
}))}
|
||
filterOption={filterFontOption}
|
||
popupMatchSelectWidth
|
||
style={{ width: '100%' }}
|
||
optionRender={(option) => renderFontOptionLabel({
|
||
value: String(option.data.value),
|
||
label: String(option.data.label),
|
||
})}
|
||
/>
|
||
<div className="gonavi-settings-inline-meta">
|
||
{fontFamiliesLoadError
|
||
? t('app.theme.font_family.mono_fallback_hint')
|
||
: t('app.theme.font_family.mono_hint')}
|
||
</div>
|
||
</div>
|
||
</>,
|
||
)}
|
||
{renderThemeSettingsSection(
|
||
t('app.theme.appearance.transparency_blur_title'),
|
||
<>
|
||
{renderThemeSettingsRow({
|
||
label: t('app.theme.appearance.enable_transparency_blur'),
|
||
hint: t('app.theme.appearance.enable_transparency_blur_hint'),
|
||
control: (
|
||
<Switch
|
||
checked={appearance.enabled !== false}
|
||
onChange={(checked) => setAppearance({ enabled: checked })}
|
||
/>
|
||
),
|
||
})}
|
||
<div style={{ opacity: appearance.enabled !== false ? 1 : 0.55 }}>
|
||
{renderThemeSettingsRow({
|
||
label: t('app.theme.appearance.opacity_title'),
|
||
stacked: true,
|
||
control: (
|
||
<ThemeSettingsSlider
|
||
min={0.1}
|
||
max={1.0}
|
||
step={0.05}
|
||
marks={OPACITY_SLIDER_MARKS}
|
||
disabled={appearance.enabled === false}
|
||
value={appearance.opacity ?? 1.0}
|
||
unit="percent"
|
||
onChange={(v) => setAppearance({ opacity: v })}
|
||
/>
|
||
),
|
||
})}
|
||
{isWindowsPlatform() ? (
|
||
<div className="gonavi-settings-inline-meta">{t('app.theme.appearance.windows_acrylic_hint')}</div>
|
||
) : (
|
||
renderThemeSettingsRow({
|
||
label: t('app.theme.appearance.blur_title'),
|
||
hint: t('app.theme.appearance.blur_hint'),
|
||
stacked: true,
|
||
control: (
|
||
<ThemeSettingsSlider
|
||
min={0}
|
||
max={20}
|
||
step={1}
|
||
marks={BLUR_SLIDER_MARKS}
|
||
disabled={appearance.enabled === false}
|
||
value={appearance.blur ?? 0}
|
||
unit="px"
|
||
onChange={(v) => setAppearance({ blur: v })}
|
||
/>
|
||
),
|
||
})
|
||
)}
|
||
</div>
|
||
</>,
|
||
)}
|
||
</div>
|
||
) : (
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
|
||
{renderThemeSettingsSection(
|
||
t('app.theme.query_template.title'),
|
||
<>
|
||
<div className="gonavi-settings-section-hint" style={{ marginTop: 0 }}>{t('app.theme.query_template.description')}</div>
|
||
<Input.TextArea
|
||
value={newQuerySqlTemplate}
|
||
autoSize={{ minRows: 3, maxRows: 8 }}
|
||
spellCheck={false}
|
||
onChange={(event) => setAppearance({ newQuerySqlTemplate: event.target.value })}
|
||
style={{ fontFamily: 'var(--gn-font-mono)' }}
|
||
/>
|
||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap', marginTop: 8 }}>
|
||
<div className="gonavi-settings-inline-meta" style={{ marginTop: 0 }}>{t('app.theme.query_template.hint')}</div>
|
||
<Button
|
||
size="small"
|
||
disabled={appearance.newQuerySqlTemplate === null}
|
||
onClick={() => setAppearance({ newQuerySqlTemplate: null })}
|
||
>
|
||
{t('app.theme.query_template.reset_default')}
|
||
</Button>
|
||
</div>
|
||
</>,
|
||
)}
|
||
<section className="gonavi-settings-section" ref={tabDisplaySettingsPanelRef}>
|
||
<div className="gonavi-settings-section-title">{t('app.theme.tab_display.title')}</div>
|
||
<div className="gonavi-settings-section-hint">{t('app.theme.tab_display.description')}</div>
|
||
{renderThemeSettingsRow({
|
||
label: t('app.theme.tab_display.title'),
|
||
stacked: true,
|
||
control: (
|
||
<Segmented
|
||
className="gonavi-settings-segmented-choice"
|
||
block
|
||
options={[
|
||
{ label: t('app.theme.tab_display.layout.single'), value: 'single' },
|
||
{ label: t('app.theme.tab_display.layout.double'), value: 'double' },
|
||
]}
|
||
value={tabDisplaySettings.layout}
|
||
onChange={(value) => setTabDisplayLayout(value as TabDisplayLayout)}
|
||
/>
|
||
),
|
||
})}
|
||
<div style={{ display: 'grid', gap: 8, marginTop: 8 }}>
|
||
{tabDisplayElementOrder.map((key) => {
|
||
const checked = visibleTabDisplayElementKeys.has(key);
|
||
const row = tabDisplaySettings.secondaryElements.includes(key) ? 'secondary' : 'primary';
|
||
const currentRowElements = row === 'secondary'
|
||
? tabDisplaySettings.secondaryElements
|
||
: tabDisplaySettings.primaryElements;
|
||
const indexInRow = currentRowElements.indexOf(key);
|
||
const canMoveUp = checked && indexInRow > 0;
|
||
const canMoveDown = checked && indexInRow >= 0 && indexInRow < currentRowElements.length - 1;
|
||
const isFocused = focusedTabDisplayElementKey === key;
|
||
return (
|
||
<div
|
||
key={key}
|
||
role="button"
|
||
tabIndex={0}
|
||
onClick={() => setFocusedTabDisplayElementKey(key)}
|
||
onKeyDown={(event) => {
|
||
if (event.key === 'Enter' || event.key === ' ') {
|
||
event.preventDefault();
|
||
setFocusedTabDisplayElementKey(key);
|
||
}
|
||
}}
|
||
style={{
|
||
display: 'grid',
|
||
gridTemplateColumns: 'minmax(0, 1fr) auto',
|
||
gap: 10,
|
||
alignItems: 'center',
|
||
padding: '9px 10px',
|
||
borderRadius: 10,
|
||
border: `1px solid ${isFocused
|
||
? (isV2Ui
|
||
? v2AntPrimaryBorderHoverColor
|
||
: (darkMode ? 'rgba(255,214,102,0.54)' : 'rgba(24,144,255,0.54)'))
|
||
: (darkMode ? 'rgba(255,255,255,0.08)' : 'rgba(16,24,40,0.08)')}`,
|
||
boxShadow: isFocused
|
||
? (isV2Ui
|
||
? `0 0 0 2px ${v2AntControlActiveBg}`
|
||
: (darkMode ? '0 0 0 2px rgba(255,214,102,0.14)' : '0 0 0 2px rgba(24,144,255,0.12)'))
|
||
: 'none',
|
||
background: isFocused
|
||
? (isV2Ui
|
||
? `linear-gradient(90deg, ${v2AntPrimaryBgHoverColor} 0%, rgba(255,255,255,0.045) 100%)`
|
||
: (darkMode ? 'linear-gradient(90deg, rgba(255,214,102,0.12) 0%, rgba(255,255,255,0.045) 100%)' : 'linear-gradient(90deg, rgba(24,144,255,0.10) 0%, rgba(255,255,255,0.78) 100%)'))
|
||
: checked
|
||
? (darkMode ? 'rgba(255,255,255,0.045)' : 'rgba(255,255,255,0.62)')
|
||
: (darkMode ? 'rgba(255,255,255,0.02)' : 'rgba(16,24,40,0.025)'),
|
||
cursor: 'pointer',
|
||
transition: 'border-color 140ms ease, box-shadow 140ms ease, background 140ms ease',
|
||
}}
|
||
>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
|
||
<span style={{
|
||
width: 22,
|
||
height: 22,
|
||
borderRadius: 999,
|
||
display: 'inline-flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
flexShrink: 0,
|
||
fontFamily: resolvedMonoFontFamily,
|
||
fontSize: 11,
|
||
fontWeight: 800,
|
||
background: isFocused
|
||
? (isV2Ui ? v2AntPrimaryBgHoverColor : (darkMode ? 'rgba(255,214,102,0.22)' : 'rgba(24,144,255,0.14)'))
|
||
: (darkMode ? 'rgba(255,255,255,0.06)' : 'rgba(16,24,40,0.05)'),
|
||
color: isFocused
|
||
? (isV2Ui ? v2AntPrimaryColor : (darkMode ? '#ffd666' : '#1677ff'))
|
||
: (darkMode ? 'rgba(255,255,255,0.56)' : 'rgba(16,24,40,0.5)'),
|
||
}}>
|
||
{checked && indexInRow >= 0 ? indexInRow + 1 : '-'}
|
||
</span>
|
||
<Switch
|
||
size="small"
|
||
checked={checked}
|
||
onClick={(_, event) => event.stopPropagation()}
|
||
onChange={(nextChecked) => updateTabDisplayElementVisibility(key, nextChecked)}
|
||
/>
|
||
<div style={{ minWidth: 0 }}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
|
||
<span style={{ fontWeight: 600 }}>{getTabDisplayElementLabel(key)}</span>
|
||
{isFocused ? (
|
||
<span style={{
|
||
fontSize: 10,
|
||
lineHeight: '16px',
|
||
padding: '0 6px',
|
||
borderRadius: 999,
|
||
background: isV2Ui ? v2AntPrimaryBgColor : (darkMode ? 'rgba(255,214,102,0.16)' : 'rgba(24,144,255,0.10)'),
|
||
color: isV2Ui ? v2AntPrimaryColor : (darkMode ? '#ffd666' : '#1677ff'),
|
||
}}>
|
||
{t('app.theme.tab_display.badge.current')}
|
||
</span>
|
||
) : null}
|
||
{checked && tabDisplaySettings.layout === 'double' ? (
|
||
<span style={{
|
||
fontSize: 10,
|
||
lineHeight: '16px',
|
||
padding: '0 6px',
|
||
borderRadius: 999,
|
||
background: row === 'secondary'
|
||
? (darkMode ? 'rgba(56,189,248,0.14)' : 'rgba(2,132,199,0.08)')
|
||
: (darkMode ? 'rgba(34,197,94,0.14)' : 'rgba(22,163,74,0.08)'),
|
||
color: row === 'secondary'
|
||
? (darkMode ? '#7dd3fc' : '#0369a1')
|
||
: (darkMode ? '#86efac' : '#15803d'),
|
||
}}>
|
||
{row === 'secondary'
|
||
? t('app.theme.tab_display.row.secondary')
|
||
: t('app.theme.tab_display.row.primary')}
|
||
</span>
|
||
) : null}
|
||
</div>
|
||
<div style={{ ...utilityMutedTextStyle, marginTop: 2 }}>{getTabDisplayElementDescription(key)}</div>
|
||
</div>
|
||
</div>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
||
{tabDisplaySettings.layout === 'double' && checked ? (
|
||
<Segmented
|
||
size="small"
|
||
options={[
|
||
{ label: t('app.theme.tab_display.row.primary'), value: 'primary' },
|
||
{ label: t('app.theme.tab_display.row.secondary'), value: 'secondary' },
|
||
]}
|
||
value={row}
|
||
onChange={(value) => setTabDisplayElementRow(key, value as 'primary' | 'secondary')}
|
||
onClick={(event) => event.stopPropagation()}
|
||
/>
|
||
) : null}
|
||
<Button
|
||
size="small"
|
||
disabled={!canMoveUp}
|
||
onClick={(event) => {
|
||
event.stopPropagation();
|
||
moveTabDisplayElement(key, -1);
|
||
}}
|
||
>
|
||
{t('app.theme.tab_display.action.move_up')}
|
||
</Button>
|
||
<Button
|
||
size="small"
|
||
disabled={!canMoveDown}
|
||
onClick={(event) => {
|
||
event.stopPropagation();
|
||
moveTabDisplayElement(key, 1);
|
||
}}
|
||
>
|
||
{t('app.theme.tab_display.action.move_down')}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
<div className="gonavi-settings-inline-meta">
|
||
{t('app.theme.tab_display.preview.prefix')}
|
||
{tabDisplaySettings.layout === 'double' ? `${t('app.theme.tab_display.row.primary')} ` : ''}
|
||
{tabDisplaySettings.primaryElements.map(getTabDisplayElementLabel).join(' / ') || t('app.theme.tab_display.preview.default_label')}
|
||
{tabDisplaySettings.layout === 'double' && tabDisplaySettings.secondaryElements.length > 0
|
||
? t('app.theme.tab_display.preview.secondary', {
|
||
labels: tabDisplaySettings.secondaryElements.map(getTabDisplayElementLabel).join(' / '),
|
||
})
|
||
: ''}
|
||
{focusedTabDisplayElementKey
|
||
? t('app.theme.tab_display.preview.focused', {
|
||
label: getTabDisplayElementLabel(focusedTabDisplayElementKey),
|
||
})
|
||
: ''}
|
||
</div>
|
||
</section>
|
||
{renderThemeSettingsSection(
|
||
t('app.theme.data_table.title'),
|
||
<>
|
||
{renderThemeSettingsRow({
|
||
label: t('app.theme.data_table.vertical_borders'),
|
||
hint: t('app.theme.data_table.vertical_borders_hint'),
|
||
control: (
|
||
<Switch
|
||
checked={appearance.showDataTableVerticalBorders === true}
|
||
onChange={(checked) => setAppearance({ showDataTableVerticalBorders: checked })}
|
||
/>
|
||
),
|
||
})}
|
||
{renderThemeSettingsRow({
|
||
label: t('app.theme.data_table.table_double_click_action'),
|
||
hint: t('app.theme.data_table.table_double_click_action_hint'),
|
||
stacked: true,
|
||
control: (
|
||
<Segmented
|
||
className="gonavi-settings-segmented-choice"
|
||
block
|
||
options={[
|
||
{ label: t('app.theme.data_table.table_double_click_action.open_data'), value: 'open-data' },
|
||
{ label: t('app.theme.data_table.table_double_click_action.open_design'), value: 'open-design' },
|
||
]}
|
||
value={tableDoubleClickAction}
|
||
onChange={(value) => setAppearance({ tableDoubleClickAction: value as 'open-data' | 'open-design' })}
|
||
/>
|
||
),
|
||
})}
|
||
{renderThemeSettingsRow({
|
||
label: t('app.theme.data_table.density'),
|
||
hint: t('app.theme.data_table.density_hint'),
|
||
stacked: true,
|
||
control: (
|
||
<Segmented
|
||
className="gonavi-settings-segmented-choice"
|
||
block
|
||
options={DENSITY_OPTIONS.map((option) => ({
|
||
...option,
|
||
label: t(`app.theme.data_table.density.${option.value}`),
|
||
}))}
|
||
value={appearance.dataTableDensity}
|
||
onChange={(value) => setAppearance({ dataTableDensity: sanitizeDataTableDensity(value) })}
|
||
/>
|
||
),
|
||
})}
|
||
{renderThemeSettingsRow({
|
||
label: (
|
||
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
|
||
<span>{t('app.theme.data_table.font_size')}</span>
|
||
<Button
|
||
size="small"
|
||
type={dataTableFontSizeFollowsGlobal ? 'primary' : 'default'}
|
||
onClick={() => setAppearance({
|
||
dataTableFontSizeFollowGlobal: !dataTableFontSizeFollowsGlobal,
|
||
dataTableFontSize: dataTableFontSizeFollowsGlobal
|
||
? sanitizeDataTableFontSize(appearance.dataTableFontSize)
|
||
: null,
|
||
})}
|
||
>
|
||
{t('app.theme.data_table.follow_global')}
|
||
</Button>
|
||
</span>
|
||
),
|
||
stacked: true,
|
||
control: (
|
||
<ThemeSettingsSlider
|
||
min={10}
|
||
max={18}
|
||
step={1}
|
||
marks={DATA_TABLE_FONT_SLIDER_MARKS}
|
||
disabled={dataTableFontSizeFollowsGlobal}
|
||
value={effectiveDataTableFontSize}
|
||
unit="px"
|
||
onChange={(value) => setAppearance({
|
||
dataTableFontSize: sanitizeDataTableFontSize(value),
|
||
dataTableFontSizeFollowGlobal: false,
|
||
})}
|
||
/>
|
||
),
|
||
})}
|
||
{renderThemeSettingsRow({
|
||
label: (
|
||
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
|
||
<span>{t('app.theme.data_table.sidebar_tree_font_size')}</span>
|
||
<Button
|
||
size="small"
|
||
type={sidebarTreeFontSizeFollowsGlobal ? 'primary' : 'default'}
|
||
onClick={() => setAppearance({
|
||
sidebarTreeFontSizeFollowGlobal: !sidebarTreeFontSizeFollowsGlobal,
|
||
sidebarTreeFontSize: sidebarTreeFontSizeFollowsGlobal
|
||
? sanitizeSidebarTreeFontSize(appearance.sidebarTreeFontSize)
|
||
: null,
|
||
})}
|
||
>
|
||
{t('app.theme.data_table.follow_global')}
|
||
</Button>
|
||
</span>
|
||
),
|
||
stacked: true,
|
||
control: (
|
||
<ThemeSettingsSlider
|
||
min={10}
|
||
max={18}
|
||
step={1}
|
||
marks={DATA_TABLE_FONT_SLIDER_MARKS}
|
||
disabled={sidebarTreeFontSizeFollowsGlobal}
|
||
value={effectiveSidebarTreeFontSize}
|
||
unit="px"
|
||
onChange={(value) => setAppearance({
|
||
sidebarTreeFontSize: sanitizeSidebarTreeFontSize(value),
|
||
sidebarTreeFontSizeFollowGlobal: false,
|
||
})}
|
||
/>
|
||
),
|
||
})}
|
||
</>,
|
||
)}
|
||
{isMacRuntime ? renderThemeSettingsSection(
|
||
t('app.theme.mac_window.title'),
|
||
renderThemeSettingsRow({
|
||
label: t('app.theme.mac_window.use_native_controls'),
|
||
hint: t('app.theme.mac_window.restart_hint'),
|
||
control: (
|
||
<Switch
|
||
checked={appearance.useNativeMacWindowControls === true}
|
||
onChange={(checked) => setAppearance({ useNativeMacWindowControls: checked })}
|
||
/>
|
||
),
|
||
}),
|
||
t('app.theme.mac_window.use_native_controls_hint'),
|
||
) : null}
|
||
{renderThemeSettingsSection(
|
||
t('app.theme.startup_window.title'),
|
||
renderThemeSettingsRow({
|
||
label: isWindowsRuntime
|
||
? t('app.theme.startup_window.fullscreen_windows')
|
||
: t('app.theme.startup_window.fullscreen'),
|
||
hint: isWindowsRuntime
|
||
? t('app.theme.startup_window.windows_hint')
|
||
: t('app.theme.startup_window.hint'),
|
||
control: (
|
||
<Switch checked={startupFullscreen} onChange={(checked) => setStartupFullscreen(checked)} />
|
||
),
|
||
}),
|
||
)}
|
||
<div style={{ display: 'flex', justifyContent: 'flex-end', paddingTop: 12 }}>
|
||
<Button
|
||
onClick={() => {
|
||
setUiScale(DEFAULT_UI_SCALE);
|
||
setFontSize(DEFAULT_FONT_SIZE);
|
||
setAppearance({ ...DEFAULT_APPEARANCE });
|
||
}}
|
||
>
|
||
{t('app.theme.action.restore_defaults')}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
|
||
const renderThemeSettingsContentLegacy = () => (
|
||
<div style={{ display: 'grid', gridTemplateColumns: '180px minmax(0, 1fr)', gap: 16, padding: '12px 0', height: '100%', minHeight: 0, overflow: 'hidden', alignItems: 'stretch', boxSizing: 'border-box' }}>
|
||
<div style={{ ...utilityPanelStyle, padding: 12, height: 'fit-content' }}>
|
||
<div style={{ marginBottom: 12, fontWeight: 600 }}>{t('app.theme.navigation_title')}</div>
|
||
<div style={{ display: 'grid', gap: 10 }}>
|
||
{[
|
||
{ key: 'theme', title: t('app.theme.nav.theme.title'), description: t('app.theme.nav.theme.description'), icon: <SkinOutlined /> },
|
||
{ key: 'appearance', title: t('app.theme.nav.appearance.title'), description: t('app.theme.nav.appearance.description'), icon: <BgColorsOutlined /> },
|
||
].map((item) => {
|
||
const active = themeModalSection === item.key;
|
||
return (
|
||
<button
|
||
key={item.key}
|
||
type="button"
|
||
onClick={() => setThemeModalSection(item.key as 'theme' | 'appearance')}
|
||
style={{
|
||
textAlign: 'left',
|
||
padding: '12px 12px',
|
||
borderRadius: 12,
|
||
border: `1px solid ${active
|
||
? (isV2Ui
|
||
? v2AntPrimaryBorderColor
|
||
: (darkMode ? 'rgba(255,214,102,0.3)' : 'rgba(24,144,255,0.24)'))
|
||
: (darkMode ? 'rgba(255,255,255,0.08)' : 'rgba(16,24,40,0.08)')}`,
|
||
background: active
|
||
? (isV2Ui
|
||
? `linear-gradient(180deg, ${v2AntPrimaryBgHoverColor} 0%, ${v2AntPrimaryBgColor} 100%)`
|
||
: (darkMode ? 'linear-gradient(180deg, rgba(255,214,102,0.12) 0%, rgba(255,214,102,0.06) 100%)' : 'linear-gradient(180deg, rgba(24,144,255,0.10) 0%, rgba(24,144,255,0.05) 100%)'))
|
||
: (darkMode ? 'rgba(255,255,255,0.02)' : 'rgba(255,255,255,0.72)'),
|
||
color: active ? (darkMode ? '#f5f7ff' : '#162033') : (darkMode ? 'rgba(255,255,255,0.82)' : '#3f4b5e'),
|
||
cursor: 'pointer',
|
||
}}
|
||
>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
||
<span>{item.icon}</span>
|
||
<span style={{ fontWeight: 700 }}>{item.title}</span>
|
||
</div>
|
||
<div style={{ marginTop: 6, fontSize: 12, lineHeight: 1.6, color: active ? (darkMode ? 'rgba(255,255,255,0.68)' : 'rgba(22,32,51,0.68)') : utilityMutedTextStyle.color }}>
|
||
{item.description}
|
||
</div>
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
<div style={{ minWidth: 0, minHeight: 0, height: '100%', overflowY: 'auto', overflowX: 'hidden', overscrollBehavior: 'contain', paddingRight: 8, paddingBottom: 28 }}>
|
||
{themeModalSection === 'theme' ? (
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||
<div style={utilityPanelStyle}>
|
||
<div style={{ marginBottom: 10, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 8 }}>
|
||
<span>{t('app.theme.ui_version.title')}</span>
|
||
<span style={{
|
||
fontSize: 10,
|
||
fontWeight: 700,
|
||
padding: '1px 6px',
|
||
background: darkMode ? 'rgba(56,189,248,0.18)' : 'rgba(2,132,199,0.10)',
|
||
color: darkMode ? '#7dd3fc' : '#0284c7',
|
||
borderRadius: 4,
|
||
}}>
|
||
{t('app.theme.ui_version.badge.new')}
|
||
</span>
|
||
</div>
|
||
<div style={{ ...utilityMutedTextStyle, marginBottom: 12 }}>
|
||
{t('app.theme.ui_version.description')}
|
||
</div>
|
||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 12 }}>
|
||
{[
|
||
{ key: 'legacy', label: t('app.theme.ui_version.legacy.label'), description: t('app.theme.ui_version.legacy.description'), badge: t('app.theme.ui_version.legacy.badge') },
|
||
{ key: 'v2', label: t('app.theme.ui_version.v2.label'), description: t('app.theme.ui_version.v2.description'), badge: t('app.theme.ui_version.v2.badge') },
|
||
].map((item) => {
|
||
const active = (appearance.uiVersion ?? 'legacy') === item.key;
|
||
return (
|
||
<button
|
||
key={item.key}
|
||
type="button"
|
||
onClick={() => setAppearance({ uiVersion: item.key as 'legacy' | 'v2' })}
|
||
style={{
|
||
textAlign: 'left',
|
||
padding: '14px 14px',
|
||
borderRadius: 14,
|
||
border: `1px solid ${active
|
||
? (darkMode ? 'rgba(34,197,94,0.36)' : 'rgba(22,163,74,0.32)')
|
||
: (darkMode ? 'rgba(255,255,255,0.08)' : 'rgba(16,24,40,0.08)')}`,
|
||
background: active
|
||
? (darkMode ? 'linear-gradient(180deg, rgba(34,197,94,0.14) 0%, rgba(34,197,94,0.06) 100%)' : 'linear-gradient(180deg, rgba(22,163,74,0.10) 0%, rgba(22,163,74,0.05) 100%)')
|
||
: (darkMode ? 'rgba(255,255,255,0.02)' : 'rgba(255,255,255,0.72)'),
|
||
color: active ? (darkMode ? '#f5f7ff' : '#162033') : (darkMode ? 'rgba(255,255,255,0.82)' : '#3f4b5e'),
|
||
cursor: 'pointer',
|
||
}}
|
||
>
|
||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
|
||
<span style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
|
||
<span style={{ fontSize: 14, fontWeight: 700 }}>{item.label}</span>
|
||
<span style={{
|
||
fontSize: 10,
|
||
fontWeight: 600,
|
||
padding: '1px 6px',
|
||
background: item.key === 'v2'
|
||
? (darkMode ? 'rgba(56,189,248,0.18)' : 'rgba(2,132,199,0.10)')
|
||
: (darkMode ? 'rgba(255,255,255,0.10)' : 'rgba(16,24,40,0.06)'),
|
||
color: item.key === 'v2'
|
||
? (darkMode ? '#7dd3fc' : '#0284c7')
|
||
: (darkMode ? 'rgba(255,255,255,0.7)' : 'rgba(16,24,40,0.6)'),
|
||
borderRadius: 4,
|
||
}}>
|
||
{item.badge}
|
||
</span>
|
||
</span>
|
||
{active ? <CheckOutlined style={{ color: darkMode ? '#4ade80' : '#16a34a' }} /> : null}
|
||
</div>
|
||
<div style={{
|
||
marginTop: 6,
|
||
fontSize: 12,
|
||
lineHeight: 1.6,
|
||
color: active ? (darkMode ? 'rgba(255,255,255,0.68)' : 'rgba(22,32,51,0.68)') : utilityMutedTextStyle.color,
|
||
}}>
|
||
{item.description}
|
||
</div>
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
<div style={{ ...utilityMutedTextStyle, marginTop: 10 }}>
|
||
{t('app.theme.ui_version.platform_hint')}
|
||
</div>
|
||
{appearance.uiVersion === 'v2' && (
|
||
<div style={{
|
||
marginTop: 10,
|
||
padding: '8px 10px',
|
||
background: darkMode ? 'rgba(245,158,11,0.10)' : 'rgba(245,158,11,0.08)',
|
||
border: `1px solid ${darkMode ? 'rgba(245,158,11,0.24)' : 'rgba(245,158,11,0.22)'}`,
|
||
borderRadius: 8,
|
||
fontSize: 11.5,
|
||
color: darkMode ? 'rgba(252,211,77,0.92)' : 'rgba(120,53,15,0.85)',
|
||
lineHeight: 1.55,
|
||
}}>
|
||
{t('app.theme.ui_version.beta_warning')}
|
||
</div>
|
||
)}
|
||
{appearance.uiVersion === 'v2' && (
|
||
<div style={{ marginTop: 14 }}>
|
||
<div style={{ marginBottom: 8, fontWeight: 500 }}>{t('app.theme.ui_version.sidebar_search.title')}</div>
|
||
<Segmented
|
||
block
|
||
options={[
|
||
{ label: t('app.theme.ui_version.sidebar_search.command'), value: 'command' },
|
||
{ label: t('app.theme.ui_version.sidebar_search.filter'), value: 'filter' },
|
||
]}
|
||
value={appearance.v2SidebarSearchMode ?? 'command'}
|
||
onChange={(value) => setAppearance({ v2SidebarSearchMode: value as 'command' | 'filter' })}
|
||
/>
|
||
<div style={{ ...utilityMutedTextStyle, marginTop: 8 }}>
|
||
{t('app.theme.ui_version.sidebar_search.hint')}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div style={utilityPanelStyle}>
|
||
<div style={{ marginBottom: 10, fontWeight: 600 }}>{t('app.theme.mode_title')}</div>
|
||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 12 }}>
|
||
{[
|
||
{ key: 'light', label: t('app.theme.mode.light.label'), description: t('app.theme.mode.light.description') },
|
||
{ key: 'dark', label: t('app.theme.mode.dark.label'), description: t('app.theme.mode.dark.description') },
|
||
{ key: 'system', label: t('app.theme.mode.system.label'), description: t('app.theme.mode.system.description') },
|
||
].map((item) => {
|
||
const active = themePreference === item.key;
|
||
return (
|
||
<button
|
||
key={item.key}
|
||
type="button"
|
||
onClick={() => setThemePreference(item.key as 'light' | 'dark' | 'system')}
|
||
style={{
|
||
textAlign: 'left',
|
||
padding: '14px 14px',
|
||
borderRadius: 14,
|
||
border: `1px solid ${active
|
||
? (isV2Ui
|
||
? v2AntPrimaryBorderColor
|
||
: (darkMode ? 'rgba(255,214,102,0.3)' : 'rgba(24,144,255,0.24)'))
|
||
: (darkMode ? 'rgba(255,255,255,0.08)' : 'rgba(16,24,40,0.08)')}`,
|
||
background: active
|
||
? (isV2Ui
|
||
? `linear-gradient(180deg, ${v2AntPrimaryBgHoverColor} 0%, ${v2AntPrimaryBgColor} 100%)`
|
||
: (darkMode ? 'linear-gradient(180deg, rgba(255,214,102,0.12) 0%, rgba(255,214,102,0.06) 100%)' : 'linear-gradient(180deg, rgba(24,144,255,0.10) 0%, rgba(24,144,255,0.05) 100%)'))
|
||
: (darkMode ? 'rgba(255,255,255,0.02)' : 'rgba(255,255,255,0.72)'),
|
||
color: active ? (darkMode ? '#f5f7ff' : '#162033') : (darkMode ? 'rgba(255,255,255,0.82)' : '#3f4b5e'),
|
||
cursor: 'pointer',
|
||
}}
|
||
>
|
||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
|
||
<span style={{ fontSize: 14, fontWeight: 700 }}>{item.label}</span>
|
||
{active ? <CheckOutlined style={{ color: isV2Ui ? v2AntPrimaryColor : (darkMode ? '#ffd666' : '#1677ff') }} /> : null}
|
||
</div>
|
||
<div style={{ marginTop: 6, fontSize: 12, lineHeight: 1.6, color: active ? (darkMode ? 'rgba(255,255,255,0.68)' : 'rgba(22,32,51,0.68)') : utilityMutedTextStyle.color }}>
|
||
{item.description}
|
||
</div>
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||
<div style={utilityPanelStyle}>
|
||
<div style={{ marginBottom: 8, fontWeight: 500 }}>{t('app.theme.appearance.ui_scale_title')}</div>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
|
||
<Slider
|
||
min={MIN_UI_SCALE}
|
||
max={MAX_UI_SCALE}
|
||
step={0.05}
|
||
value={effectiveUiScale}
|
||
onChange={(v) => setUiScale(Number(v))}
|
||
style={{ flex: 1 }}
|
||
/>
|
||
<span style={{ width: 56 }}>{Math.round(effectiveUiScale * 100)}%</span>
|
||
</div>
|
||
<div style={{ fontSize: 12, color: darkMode ? 'rgba(255,255,255,0.5)' : 'rgba(16,24,40,0.55)', marginTop: 4 }}>
|
||
{t('app.theme.appearance.ui_scale_hint')}
|
||
</div>
|
||
</div>
|
||
<div style={utilityPanelStyle}>
|
||
<div style={{ marginBottom: 8, fontWeight: 500 }}>{t('app.theme.appearance.font_size_title')}</div>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
|
||
<Slider
|
||
min={MIN_FONT_SIZE}
|
||
max={MAX_FONT_SIZE}
|
||
step={1}
|
||
value={effectiveFontSize}
|
||
onChange={(v) => setFontSize(Number(v))}
|
||
style={{ flex: 1 }}
|
||
/>
|
||
<span style={{ width: 56 }}>{effectiveFontSize}px</span>
|
||
</div>
|
||
</div>
|
||
{appearance.uiVersion === 'v2' && (
|
||
<div style={utilityPanelStyle}>
|
||
<div style={{ marginBottom: 8, fontWeight: 500 }}>{t('app.theme.appearance.sidebar_rail_scale_title')}</div>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
|
||
<Slider
|
||
min={MIN_V2_SIDEBAR_RAIL_SCALE}
|
||
max={MAX_V2_SIDEBAR_RAIL_SCALE}
|
||
step={0.05}
|
||
value={effectiveSidebarRailScale}
|
||
onChange={(value) => setAppearance({
|
||
v2SidebarRailScale: sanitizeV2SidebarRailScale(value),
|
||
})}
|
||
style={{ flex: 1 }}
|
||
/>
|
||
<span style={{ width: 56 }}>{Math.round(effectiveSidebarRailScale * 100)}%</span>
|
||
</div>
|
||
<div style={{ ...utilityMutedTextStyle, marginTop: 4 }}>
|
||
{t('app.theme.appearance.sidebar_rail_scale_hint')}
|
||
</div>
|
||
</div>
|
||
)}
|
||
<div style={utilityPanelStyle}>
|
||
<div style={{ marginBottom: 10, fontWeight: 500 }}>{t('app.theme.font_family.title')}</div>
|
||
<div style={{ display: 'grid', gap: 14 }}>
|
||
<div>
|
||
<div style={{ marginBottom: 8, fontWeight: 500 }}>{t('app.theme.font_family.ui_title')}</div>
|
||
<Select
|
||
allowClear
|
||
showSearch
|
||
optionFilterProp="label"
|
||
loading={isFontFamiliesLoading}
|
||
placeholder={DEFAULT_UI_FONT_FAMILY}
|
||
value={appearance.customUIFontFamily ?? undefined}
|
||
onChange={(value) => setAppearance({
|
||
customUIFontFamily: sanitizeFontFamilyInput(value),
|
||
})}
|
||
onClear={() => setAppearance({ customUIFontFamily: null })}
|
||
options={uiFontOptions.map((option) => ({
|
||
value: option.value,
|
||
label: option.label,
|
||
}))}
|
||
filterOption={filterFontOption}
|
||
popupMatchSelectWidth
|
||
style={{ width: '100%' }}
|
||
optionRender={(option) => renderFontOptionLabel({
|
||
value: String(option.data.value),
|
||
label: String(option.data.label),
|
||
})}
|
||
/>
|
||
<div style={{ ...utilityMutedTextStyle, marginTop: 6 }}>
|
||
{fontFamiliesLoadError
|
||
? t('app.theme.font_family.load_failed_fallback', { error: fontFamiliesLoadError })
|
||
: (installedFontFamilies.length > 0
|
||
? t('app.theme.font_family.loaded_ui_hint', { count: installedFontFamilies.length })
|
||
: t('app.theme.font_family.loading_ui_hint'))}
|
||
</div>
|
||
{linuxCJKFontInstallHint && hasLoadedInstalledFontsRef.current && !isFontFamiliesLoading && !fontFamiliesLoadError && (
|
||
<div
|
||
style={{
|
||
marginTop: 8,
|
||
padding: '9px 10px',
|
||
borderRadius: 8,
|
||
border: darkMode ? '1px solid rgba(250,204,21,0.28)' : '1px solid rgba(217,119,6,0.22)',
|
||
background: darkMode ? 'rgba(250,204,21,0.08)' : 'rgba(251,191,36,0.12)',
|
||
color: darkMode ? 'rgba(254,249,195,0.92)' : '#92400e',
|
||
fontSize: 12,
|
||
lineHeight: 1.7,
|
||
}}
|
||
>
|
||
{t('app.theme.font_family.linux_cjk_install_prefix')}
|
||
<span style={{ fontFamily: 'var(--gn-font-mono)', marginLeft: 6 }}>{linuxCJKFontInstallHint}</span>
|
||
{t('app.theme.font_family.linux_cjk_install_suffix')}
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div>
|
||
<div style={{ marginBottom: 8, fontWeight: 500 }}>{t('app.theme.font_family.mono_title')}</div>
|
||
<Select
|
||
allowClear
|
||
showSearch
|
||
optionFilterProp="label"
|
||
loading={isFontFamiliesLoading}
|
||
placeholder={DEFAULT_MONO_FONT_FAMILY}
|
||
value={appearance.customMonoFontFamily ?? undefined}
|
||
onChange={(value) => setAppearance({
|
||
customMonoFontFamily: sanitizeFontFamilyInput(value),
|
||
})}
|
||
onClear={() => setAppearance({ customMonoFontFamily: null })}
|
||
options={monoFontOptions.map((option) => ({
|
||
value: option.value,
|
||
label: option.label,
|
||
}))}
|
||
filterOption={filterFontOption}
|
||
popupMatchSelectWidth
|
||
style={{ width: '100%' }}
|
||
optionRender={(option) => renderFontOptionLabel({
|
||
value: String(option.data.value),
|
||
label: String(option.data.label),
|
||
})}
|
||
/>
|
||
<div style={{ ...utilityMutedTextStyle, marginTop: 6 }}>
|
||
{fontFamiliesLoadError
|
||
? t('app.theme.font_family.mono_fallback_hint')
|
||
: t('app.theme.font_family.mono_hint')}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style={utilityPanelStyle}>
|
||
<div style={{ marginBottom: 10, fontWeight: 500 }}>{t('app.theme.query_template.title')}</div>
|
||
<div style={{ display: 'grid', gap: 10 }}>
|
||
<div style={utilityMutedTextStyle}>
|
||
{t('app.theme.query_template.description')}
|
||
</div>
|
||
<Input.TextArea
|
||
value={newQuerySqlTemplate}
|
||
autoSize={{ minRows: 3, maxRows: 8 }}
|
||
spellCheck={false}
|
||
onChange={(event) => setAppearance({ newQuerySqlTemplate: event.target.value })}
|
||
style={{ fontFamily: 'var(--gn-font-mono)' }}
|
||
/>
|
||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
|
||
<div style={utilityMutedTextStyle}>
|
||
{t('app.theme.query_template.hint')}
|
||
</div>
|
||
<Button
|
||
size="small"
|
||
disabled={appearance.newQuerySqlTemplate === null}
|
||
onClick={() => setAppearance({ newQuerySqlTemplate: null })}
|
||
>
|
||
{t('app.theme.query_template.reset_default')}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div ref={tabDisplaySettingsPanelRef} style={utilityPanelStyle}>
|
||
<div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 12, marginBottom: 12 }}>
|
||
<div style={{ minWidth: 0 }}>
|
||
<div style={{ fontWeight: 500 }}>{t('app.theme.tab_display.title')}</div>
|
||
<div style={{ ...utilityMutedTextStyle, marginTop: 4 }}>
|
||
{t('app.theme.tab_display.description')}
|
||
</div>
|
||
</div>
|
||
<Segmented
|
||
size="small"
|
||
options={[
|
||
{ label: t('app.theme.tab_display.layout.single'), value: 'single' },
|
||
{ label: t('app.theme.tab_display.layout.double'), value: 'double' },
|
||
]}
|
||
value={tabDisplaySettings.layout}
|
||
onChange={(value) => setTabDisplayLayout(value as TabDisplayLayout)}
|
||
/>
|
||
</div>
|
||
<div style={{ display: 'grid', gap: 8 }}>
|
||
{tabDisplayElementOrder.map((key) => {
|
||
const checked = visibleTabDisplayElementKeys.has(key);
|
||
const row = tabDisplaySettings.secondaryElements.includes(key) ? 'secondary' : 'primary';
|
||
const currentRowElements = row === 'secondary'
|
||
? tabDisplaySettings.secondaryElements
|
||
: tabDisplaySettings.primaryElements;
|
||
const indexInRow = currentRowElements.indexOf(key);
|
||
const canMoveUp = checked && indexInRow > 0;
|
||
const canMoveDown = checked && indexInRow >= 0 && indexInRow < currentRowElements.length - 1;
|
||
const isFocused = focusedTabDisplayElementKey === key;
|
||
return (
|
||
<div
|
||
key={key}
|
||
role="button"
|
||
tabIndex={0}
|
||
onClick={() => setFocusedTabDisplayElementKey(key)}
|
||
onKeyDown={(event) => {
|
||
if (event.key === 'Enter' || event.key === ' ') {
|
||
event.preventDefault();
|
||
setFocusedTabDisplayElementKey(key);
|
||
}
|
||
}}
|
||
style={{
|
||
display: 'grid',
|
||
gridTemplateColumns: 'minmax(0, 1fr) auto',
|
||
gap: 10,
|
||
alignItems: 'center',
|
||
padding: '9px 10px',
|
||
borderRadius: 10,
|
||
border: `1px solid ${isFocused
|
||
? (isV2Ui
|
||
? v2AntPrimaryBorderHoverColor
|
||
: (darkMode ? 'rgba(255,214,102,0.54)' : 'rgba(24,144,255,0.54)'))
|
||
: (darkMode ? 'rgba(255,255,255,0.08)' : 'rgba(16,24,40,0.08)')}`,
|
||
boxShadow: isFocused
|
||
? (isV2Ui
|
||
? `0 0 0 2px ${v2AntControlActiveBg}`
|
||
: (darkMode ? '0 0 0 2px rgba(255,214,102,0.14)' : '0 0 0 2px rgba(24,144,255,0.12)'))
|
||
: 'none',
|
||
background: isFocused
|
||
? (isV2Ui
|
||
? `linear-gradient(90deg, ${v2AntPrimaryBgHoverColor} 0%, rgba(255,255,255,0.045) 100%)`
|
||
: (darkMode ? 'linear-gradient(90deg, rgba(255,214,102,0.12) 0%, rgba(255,255,255,0.045) 100%)' : 'linear-gradient(90deg, rgba(24,144,255,0.10) 0%, rgba(255,255,255,0.78) 100%)'))
|
||
: checked
|
||
? (darkMode ? 'rgba(255,255,255,0.045)' : 'rgba(255,255,255,0.62)')
|
||
: (darkMode ? 'rgba(255,255,255,0.02)' : 'rgba(16,24,40,0.025)'),
|
||
cursor: 'pointer',
|
||
transition: 'border-color 140ms ease, box-shadow 140ms ease, background 140ms ease',
|
||
}}
|
||
>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
|
||
<span style={{
|
||
width: 22,
|
||
height: 22,
|
||
borderRadius: 999,
|
||
display: 'inline-flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
flexShrink: 0,
|
||
fontFamily: resolvedMonoFontFamily,
|
||
fontSize: 11,
|
||
fontWeight: 800,
|
||
background: isFocused
|
||
? (isV2Ui ? v2AntPrimaryBgHoverColor : (darkMode ? 'rgba(255,214,102,0.22)' : 'rgba(24,144,255,0.14)'))
|
||
: (darkMode ? 'rgba(255,255,255,0.06)' : 'rgba(16,24,40,0.05)'),
|
||
color: isFocused
|
||
? (isV2Ui ? v2AntPrimaryColor : (darkMode ? '#ffd666' : '#1677ff'))
|
||
: (darkMode ? 'rgba(255,255,255,0.56)' : 'rgba(16,24,40,0.5)'),
|
||
}}>
|
||
{checked && indexInRow >= 0 ? indexInRow + 1 : '-'}
|
||
</span>
|
||
<Switch
|
||
size="small"
|
||
checked={checked}
|
||
onClick={(_, event) => event.stopPropagation()}
|
||
onChange={(nextChecked) => updateTabDisplayElementVisibility(key, nextChecked)}
|
||
/>
|
||
<div style={{ minWidth: 0 }}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
|
||
<span style={{ fontWeight: 600 }}>{getTabDisplayElementLabel(key)}</span>
|
||
{isFocused ? (
|
||
<span style={{
|
||
fontSize: 10,
|
||
lineHeight: '16px',
|
||
padding: '0 6px',
|
||
borderRadius: 999,
|
||
background: isV2Ui ? v2AntPrimaryBgColor : (darkMode ? 'rgba(255,214,102,0.16)' : 'rgba(24,144,255,0.10)'),
|
||
color: isV2Ui ? v2AntPrimaryColor : (darkMode ? '#ffd666' : '#1677ff'),
|
||
}}>
|
||
{t('app.theme.tab_display.badge.current')}
|
||
</span>
|
||
) : null}
|
||
{checked && tabDisplaySettings.layout === 'double' ? (
|
||
<span style={{
|
||
fontSize: 10,
|
||
lineHeight: '16px',
|
||
padding: '0 6px',
|
||
borderRadius: 999,
|
||
background: row === 'secondary'
|
||
? (darkMode ? 'rgba(56,189,248,0.14)' : 'rgba(2,132,199,0.08)')
|
||
: (darkMode ? 'rgba(34,197,94,0.14)' : 'rgba(22,163,74,0.08)'),
|
||
color: row === 'secondary'
|
||
? (darkMode ? '#7dd3fc' : '#0369a1')
|
||
: (darkMode ? '#86efac' : '#15803d'),
|
||
}}>
|
||
{row === 'secondary'
|
||
? t('app.theme.tab_display.row.secondary')
|
||
: t('app.theme.tab_display.row.primary')}
|
||
</span>
|
||
) : null}
|
||
</div>
|
||
<div style={{ ...utilityMutedTextStyle, marginTop: 2 }}>{getTabDisplayElementDescription(key)}</div>
|
||
</div>
|
||
</div>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
||
{tabDisplaySettings.layout === 'double' && checked ? (
|
||
<Segmented
|
||
size="small"
|
||
options={[
|
||
{ label: t('app.theme.tab_display.row.primary'), value: 'primary' },
|
||
{ label: t('app.theme.tab_display.row.secondary'), value: 'secondary' },
|
||
]}
|
||
value={row}
|
||
onChange={(value) => setTabDisplayElementRow(key, value as 'primary' | 'secondary')}
|
||
onClick={(event) => event.stopPropagation()}
|
||
/>
|
||
) : null}
|
||
<Button
|
||
size="small"
|
||
disabled={!canMoveUp}
|
||
onClick={(event) => {
|
||
event.stopPropagation();
|
||
moveTabDisplayElement(key, -1);
|
||
}}
|
||
>
|
||
{t('app.theme.tab_display.action.move_up')}
|
||
</Button>
|
||
<Button
|
||
size="small"
|
||
disabled={!canMoveDown}
|
||
onClick={(event) => {
|
||
event.stopPropagation();
|
||
moveTabDisplayElement(key, 1);
|
||
}}
|
||
>
|
||
{t('app.theme.tab_display.action.move_down')}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
<div style={{ ...utilityMutedTextStyle, marginTop: 10 }}>
|
||
{t('app.theme.tab_display.preview.prefix')}
|
||
{tabDisplaySettings.layout === 'double' ? `${t('app.theme.tab_display.row.primary')} ` : ''}
|
||
{tabDisplaySettings.primaryElements.map(getTabDisplayElementLabel).join(' / ') || t('app.theme.tab_display.preview.default_label')}
|
||
{tabDisplaySettings.layout === 'double' && tabDisplaySettings.secondaryElements.length > 0
|
||
? t('app.theme.tab_display.preview.secondary', {
|
||
labels: tabDisplaySettings.secondaryElements.map(getTabDisplayElementLabel).join(' / '),
|
||
})
|
||
: ''}
|
||
{focusedTabDisplayElementKey
|
||
? t('app.theme.tab_display.preview.focused', {
|
||
label: getTabDisplayElementLabel(focusedTabDisplayElementKey),
|
||
})
|
||
: ''}
|
||
</div>
|
||
</div>
|
||
<div style={utilityPanelStyle}>
|
||
<div style={{ marginBottom: 10, fontWeight: 500 }}>{t('app.theme.appearance.transparency_blur_title')}</div>
|
||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, marginBottom: 12 }}>
|
||
<div>
|
||
<div style={{ fontWeight: 500 }}>{t('app.theme.appearance.enable_transparency_blur')}</div>
|
||
<div style={{ ...utilityMutedTextStyle, marginTop: 4 }}>{t('app.theme.appearance.enable_transparency_blur_hint')}</div>
|
||
</div>
|
||
<Switch checked={appearance.enabled !== false} onChange={(checked) => setAppearance({ enabled: checked })} />
|
||
</div>
|
||
<div style={{ display: 'grid', gap: 14, opacity: appearance.enabled !== false ? 1 : 0.6 }}>
|
||
<div>
|
||
<div style={{ marginBottom: 8, fontWeight: 500 }}>{t('app.theme.appearance.opacity_title')}</div>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
|
||
<Slider
|
||
min={0.1}
|
||
max={1.0}
|
||
step={0.05}
|
||
disabled={appearance.enabled === false}
|
||
value={appearance.opacity ?? 1.0}
|
||
onChange={(v) => setAppearance({ opacity: v })}
|
||
style={{ flex: 1 }}
|
||
/>
|
||
<span style={{ width: 40 }}>{Math.round((appearance.opacity ?? 1.0) * 100)}%</span>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div style={{ marginBottom: 8, fontWeight: 500 }}>{t('app.theme.appearance.blur_title')}</div>
|
||
{isWindowsPlatform() ? (
|
||
<div style={{ fontSize: 12, color: darkMode ? 'rgba(255,255,255,0.5)' : 'rgba(16,24,40,0.55)' }}>
|
||
{t('app.theme.appearance.windows_acrylic_hint')}
|
||
</div>
|
||
) : (
|
||
<>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
|
||
<Slider
|
||
min={0}
|
||
max={20}
|
||
disabled={appearance.enabled === false}
|
||
value={appearance.blur ?? 0}
|
||
onChange={(v) => setAppearance({ blur: v })}
|
||
style={{ flex: 1 }}
|
||
/>
|
||
<span style={{ width: 40 }}>{appearance.blur}px</span>
|
||
</div>
|
||
<div style={{ fontSize: 12, color: darkMode ? 'rgba(255,255,255,0.5)' : 'rgba(16,24,40,0.55)', marginTop: 4 }}>
|
||
{t('app.theme.appearance.blur_hint')}
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style={utilityPanelStyle}>
|
||
<div style={{ marginBottom: 10, fontWeight: 500 }}>{t('app.theme.data_table.title')}</div>
|
||
<div style={{ display: 'grid', gap: 14 }}>
|
||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
|
||
<div>
|
||
<div style={{ fontWeight: 500 }}>{t('app.theme.data_table.vertical_borders')}</div>
|
||
<div style={{ ...utilityMutedTextStyle, marginTop: 4 }}>{t('app.theme.data_table.vertical_borders_hint')}</div>
|
||
</div>
|
||
<Switch
|
||
checked={appearance.showDataTableVerticalBorders === true}
|
||
onChange={(checked) => setAppearance({ showDataTableVerticalBorders: checked })}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<div style={{ marginBottom: 8, fontWeight: 500 }}>{t('app.theme.data_table.table_double_click_action')}</div>
|
||
<Segmented
|
||
block
|
||
options={[
|
||
{ label: t('app.theme.data_table.table_double_click_action.open_data'), value: 'open-data' },
|
||
{ label: t('app.theme.data_table.table_double_click_action.open_design'), value: 'open-design' },
|
||
]}
|
||
value={tableDoubleClickAction}
|
||
onChange={(value) => setAppearance({ tableDoubleClickAction: value as 'open-data' | 'open-design' })}
|
||
/>
|
||
<div style={{ ...utilityMutedTextStyle, marginTop: 8 }}>
|
||
{t('app.theme.data_table.table_double_click_action_hint')}
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div style={{ marginBottom: 8, fontWeight: 500 }}>{t('app.theme.data_table.density')}</div>
|
||
<Segmented
|
||
block
|
||
options={DENSITY_OPTIONS.map((option) => ({
|
||
...option,
|
||
label: t(`app.theme.data_table.density.${option.value}`),
|
||
}))}
|
||
value={appearance.dataTableDensity}
|
||
onChange={(value) => setAppearance({ dataTableDensity: sanitizeDataTableDensity(value) })}
|
||
/>
|
||
<div style={{ ...utilityMutedTextStyle, marginTop: 8 }}>
|
||
{t('app.theme.data_table.density_hint')}
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, marginBottom: 8 }}>
|
||
<div style={{ fontWeight: 500 }}>{t('app.theme.data_table.font_size')}</div>
|
||
<Button
|
||
size="small"
|
||
type={dataTableFontSizeFollowsGlobal ? 'primary' : 'default'}
|
||
onClick={() => setAppearance({
|
||
dataTableFontSizeFollowGlobal: !dataTableFontSizeFollowsGlobal,
|
||
dataTableFontSize: dataTableFontSizeFollowsGlobal
|
||
? sanitizeDataTableFontSize(appearance.dataTableFontSize)
|
||
: null,
|
||
})}
|
||
>
|
||
{t('app.theme.data_table.follow_global')}
|
||
</Button>
|
||
</div>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
|
||
<Slider
|
||
min={10}
|
||
max={18}
|
||
step={1}
|
||
disabled={dataTableFontSizeFollowsGlobal}
|
||
value={effectiveDataTableFontSize}
|
||
onChange={(value) => setAppearance({
|
||
dataTableFontSize: sanitizeDataTableFontSize(value),
|
||
dataTableFontSizeFollowGlobal: false,
|
||
})}
|
||
style={{ flex: 1 }}
|
||
/>
|
||
<span style={{ width: 56 }}>{effectiveDataTableFontSize}px</span>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, marginBottom: 8 }}>
|
||
<div style={{ fontWeight: 500 }}>{t('app.theme.data_table.sidebar_tree_font_size')}</div>
|
||
<Button
|
||
size="small"
|
||
type={sidebarTreeFontSizeFollowsGlobal ? 'primary' : 'default'}
|
||
onClick={() => setAppearance({
|
||
sidebarTreeFontSizeFollowGlobal: !sidebarTreeFontSizeFollowsGlobal,
|
||
sidebarTreeFontSize: sidebarTreeFontSizeFollowsGlobal
|
||
? sanitizeSidebarTreeFontSize(appearance.sidebarTreeFontSize)
|
||
: null,
|
||
})}
|
||
>
|
||
{t('app.theme.data_table.follow_global')}
|
||
</Button>
|
||
</div>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
|
||
<Slider
|
||
min={10}
|
||
max={18}
|
||
step={1}
|
||
disabled={sidebarTreeFontSizeFollowsGlobal}
|
||
value={effectiveSidebarTreeFontSize}
|
||
onChange={(value) => setAppearance({
|
||
sidebarTreeFontSize: sanitizeSidebarTreeFontSize(value),
|
||
sidebarTreeFontSizeFollowGlobal: false,
|
||
})}
|
||
style={{ flex: 1 }}
|
||
/>
|
||
<span style={{ width: 56 }}>{effectiveSidebarTreeFontSize}px</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{isMacRuntime ? (
|
||
<div style={utilityPanelStyle}>
|
||
<div style={{ marginBottom: 8, fontWeight: 500 }}>{t('app.theme.mac_window.title')}</div>
|
||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
|
||
<div>
|
||
<div style={{ fontWeight: 500 }}>{t('app.theme.mac_window.use_native_controls')}</div>
|
||
<div style={{ ...utilityMutedTextStyle, marginTop: 4 }}>{t('app.theme.mac_window.use_native_controls_hint')}</div>
|
||
</div>
|
||
<Switch
|
||
checked={appearance.useNativeMacWindowControls === true}
|
||
onChange={(checked) => setAppearance({ useNativeMacWindowControls: checked })}
|
||
/>
|
||
</div>
|
||
<div style={{ fontSize: 12, color: darkMode ? 'rgba(255,255,255,0.5)' : 'rgba(16,24,40,0.55)', marginTop: 8 }}>
|
||
{t('app.theme.mac_window.restart_hint')}
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
<div style={utilityPanelStyle}>
|
||
<div style={{ marginBottom: 8, fontWeight: 500 }}>{t('app.theme.startup_window.title')}</div>
|
||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
|
||
<span>{isWindowsRuntime ? t('app.theme.startup_window.fullscreen_windows') : t('app.theme.startup_window.fullscreen')}</span>
|
||
<Switch checked={startupFullscreen} onChange={(checked) => setStartupFullscreen(checked)} />
|
||
</div>
|
||
<div style={{ fontSize: 12, color: darkMode ? 'rgba(255,255,255,0.5)' : 'rgba(16,24,40,0.55)', marginTop: 4 }}>
|
||
{isWindowsRuntime ? t('app.theme.startup_window.windows_hint') : t('app.theme.startup_window.hint')}
|
||
</div>
|
||
</div>
|
||
<div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', gap: 12, paddingTop: 8, paddingBottom: 12 }}>
|
||
<Button
|
||
onClick={() => {
|
||
setUiScale(DEFAULT_UI_SCALE);
|
||
setFontSize(DEFAULT_FONT_SIZE);
|
||
setAppearance({ ...DEFAULT_APPEARANCE });
|
||
}}
|
||
>
|
||
{t('app.theme.action.restore_defaults')}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
|
||
|
||
const renderThemeSettingsContent = () => (
|
||
isV2Ui ? renderThemeSettingsContentV2() : renderThemeSettingsContentLegacy()
|
||
);
|
||
|
||
const settingsCenterGroups = [
|
||
{
|
||
key: 'preferences' as const,
|
||
icon: <SettingOutlined />,
|
||
title: t('app.settings.group.preferences.title'),
|
||
description: t('app.settings.group.preferences.description'),
|
||
items: [
|
||
{
|
||
key: 'language',
|
||
icon: <GlobalOutlined />,
|
||
title: t('settings.language.title'),
|
||
description: t('settings.language.description'),
|
||
onClick: () => handleOpenSettingsCenterPane('preferences', 'language'),
|
||
},
|
||
{
|
||
key: 'theme',
|
||
icon: <SkinOutlined />,
|
||
title: t('app.settings.entry.theme.title'),
|
||
description: t('app.settings.entry.theme.description'),
|
||
onClick: () => {
|
||
setThemeModalSection('theme');
|
||
handleOpenSettingsCenterPane('preferences', 'theme');
|
||
},
|
||
},
|
||
{
|
||
key: 'sidebar-metadata',
|
||
icon: <TableOutlined />,
|
||
title: t('app.settings.sidebar_metadata.title'),
|
||
description: t('app.settings.sidebar_metadata.description'),
|
||
onClick: () => handleOpenSettingsCenterPane('preferences', 'sidebar-metadata'),
|
||
},
|
||
],
|
||
},
|
||
{
|
||
key: 'services' as const,
|
||
icon: <GlobalOutlined />,
|
||
title: t('app.settings.group.services.title'),
|
||
description: t('app.settings.group.services.description'),
|
||
items: [
|
||
{
|
||
key: 'proxy',
|
||
icon: <GlobalOutlined />,
|
||
title: t('app.settings.entry.proxy.title'),
|
||
description: t('app.settings.entry.proxy.description'),
|
||
onClick: () => handleOpenSettingsCenterPane('services', 'proxy'),
|
||
},
|
||
...(isWebRuntime ? [{
|
||
key: 'web-auth' as const,
|
||
icon: <SafetyCertificateOutlined />,
|
||
title: t('app.settings.entry.web_auth.title'),
|
||
description: t('app.settings.entry.web_auth.description'),
|
||
onClick: () => handleOpenSettingsCenterPane('services', 'web-auth'),
|
||
}] : []),
|
||
{
|
||
key: 'ai',
|
||
icon: <RobotOutlined />,
|
||
title: t('app.settings.entry.ai.title'),
|
||
description: t('app.settings.entry.ai.description'),
|
||
onClick: () => {
|
||
setSecurityUpdateRepairSource(null);
|
||
setFocusedAIProviderId(undefined);
|
||
handleOpenSettingsCenterPane('services', 'ai');
|
||
},
|
||
},
|
||
],
|
||
},
|
||
{
|
||
key: 'about' as const,
|
||
icon: <InfoCircleOutlined />,
|
||
title: t('app.settings.group.about.title'),
|
||
description: t('app.settings.group.about.description'),
|
||
items: [
|
||
{
|
||
key: 'about-go-navi',
|
||
icon: <InfoCircleOutlined />,
|
||
title: t('app.settings.entry.about.title'),
|
||
description: t('app.settings.entry.about.description'),
|
||
onClick: () => handleOpenSettingsCenterPane('about', 'about-go-navi'),
|
||
},
|
||
],
|
||
},
|
||
];
|
||
const activeSettingsCenterGroup = settingsCenterGroups.find((group) => group.key === activeSettingsCenterGroupKey) ?? settingsCenterGroups[0];
|
||
const activeSettingsCenterPaneItem = activeSettingsCenterPane
|
||
? settingsCenterGroups
|
||
.find((group) => group.key === activeSettingsCenterPane.group)
|
||
?.items.find((item) => item.key === activeSettingsCenterPane.key)
|
||
: null;
|
||
const isSettingsCenterContainedScrollPane =
|
||
activeSettingsCenterPane?.key === 'theme' || activeSettingsCenterPane?.key === 'ai';
|
||
const isV2ThemeSettingsPane = isV2Ui && activeSettingsCenterPane?.key === 'theme';
|
||
const settingsCenterDetailBodyStyle: React.CSSProperties = isSettingsCenterContainedScrollPane
|
||
? {
|
||
...toolCenterDetailBodyStyle,
|
||
overflowY: 'hidden',
|
||
// v2 主题设置页含 Slider 手柄横向伸出，hidden 会裁切贴边圆点
|
||
overflowX: isV2ThemeSettingsPane ? 'visible' : 'hidden',
|
||
paddingRight: isV2ThemeSettingsPane ? 8 : 0,
|
||
paddingLeft: isV2ThemeSettingsPane ? 4 : undefined,
|
||
}
|
||
: toolCenterDetailBodyStyle;
|
||
const renderSettingsCenterPane = () => {
|
||
if (!activeSettingsCenterPane) {
|
||
return null;
|
||
}
|
||
if (activeSettingsCenterPane.key === 'language') {
|
||
return (
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 16, padding: '12px 0' }}>
|
||
<div style={utilityPanelStyle}>
|
||
<LanguageSettingsPanel />
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
if (activeSettingsCenterPane.key === 'theme') {
|
||
return (
|
||
<div style={{ height: '100%', minHeight: 0 }}>
|
||
{renderThemeSettingsContent()}
|
||
</div>
|
||
);
|
||
}
|
||
if (activeSettingsCenterPane.key === 'sidebar-metadata') {
|
||
return renderSidebarMetadataSettingsPane();
|
||
}
|
||
if (activeSettingsCenterPane.key === 'proxy') {
|
||
return renderProxySettingsContent();
|
||
}
|
||
if (activeSettingsCenterPane.key === 'web-auth') {
|
||
return (
|
||
<WebAuthSettingsPanel
|
||
darkMode={darkMode}
|
||
dividerColor={overlayTheme.divider}
|
||
mutedColor={String(utilityMutedTextStyle.color || overlayTheme.mutedText)}
|
||
titleColor={overlayTheme.titleText}
|
||
/>
|
||
);
|
||
}
|
||
if (activeSettingsCenterPane.key === 'ai') {
|
||
return (
|
||
<div style={{ height: '100%', minHeight: 0 }}>
|
||
<AISettingsContent
|
||
active={isSettingsModalOpen && activeSettingsCenterPane.key === 'ai'}
|
||
darkMode={darkMode}
|
||
overlayTheme={overlayTheme}
|
||
focusProviderId={focusedAIProviderId}
|
||
onBeforeExternalMCPUse={handlePrepareExternalMCPUse}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
if (activeSettingsCenterPane.key === 'about-go-navi') {
|
||
return (
|
||
renderSettingsCenterAboutPane()
|
||
);
|
||
}
|
||
return null;
|
||
};
|
||
|
||
return (
|
||
<ConfigProvider
|
||
locale={getAntdLocale(language)}
|
||
componentSize={appComponentSize}
|
||
theme={antdTheme}
|
||
>
|
||
<Layout style={{
|
||
height: '100vh',
|
||
overflow: 'hidden',
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
background: 'transparent',
|
||
borderRadius: showLinuxResizeHandles ? 0 : 'var(--gonavi-border-radius)',
|
||
clipPath: showLinuxResizeHandles ? 'none' : 'inset(0 round var(--gonavi-border-radius))',
|
||
backdropFilter: blurFilter,
|
||
WebkitBackdropFilter: blurFilter,
|
||
}}>
|
||
{/* Custom Title Bar */}
|
||
<div
|
||
onDoubleClick={handleTitleBarDoubleClick}
|
||
style={{
|
||
height: titleBarHeight,
|
||
flexShrink: 0,
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
background: bgMain,
|
||
borderBottom: 'none',
|
||
userSelect: 'none',
|
||
WebkitAppRegion: isWebRuntime ? 'no-drag' : 'drag',
|
||
'--wails-draggable': isWebRuntime ? 'no-drag' : 'drag',
|
||
paddingLeft: getMacNativeTitlebarPaddingLeft(effectiveUiScale, useNativeMacWindowControls),
|
||
paddingRight: getMacNativeTitlebarPaddingRight(effectiveUiScale, useNativeMacWindowControls),
|
||
fontSize: tokenFontSize
|
||
} as any}
|
||
>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: Math.max(6, Math.round(8 * effectiveUiScale)), fontWeight: 600, minWidth: 0 }}>
|
||
{/* Logo can be added here if available */}
|
||
GoNavi
|
||
</div>
|
||
{isWebRuntime ? (
|
||
<div
|
||
onDoubleClick={(e) => e.stopPropagation()}
|
||
style={{ display: 'flex', alignItems: 'center', gap: 8, WebkitAppRegion: 'no-drag', '--wails-draggable': 'no-drag' } as any}
|
||
>
|
||
<Tooltip title="退出当前 Web 会话">
|
||
<Button
|
||
type="text"
|
||
icon={<PoweroffOutlined />}
|
||
style={{ height: '100%', borderRadius: 8, width: titleBarButtonWidth }}
|
||
onClick={() => { void handleWebLogout(); }}
|
||
/>
|
||
</Tooltip>
|
||
</div>
|
||
) : useNativeMacWindowControls ? (
|
||
<div style={{ minWidth: Math.max(40, Math.round(48 * effectiveUiScale)) }} />
|
||
) : (
|
||
<div
|
||
data-no-titlebar-toggle="true"
|
||
onDoubleClick={(e) => e.stopPropagation()}
|
||
style={{ display: 'flex', height: '100%', WebkitAppRegion: 'no-drag', '--wails-draggable': 'no-drag' } as any}
|
||
>
|
||
<Button
|
||
type="text"
|
||
icon={<MinusOutlined />}
|
||
style={{ height: '100%', borderRadius: 0, width: titleBarButtonWidth }}
|
||
onClick={WindowMinimise}
|
||
/>
|
||
<Button
|
||
type="text"
|
||
icon={titleBarToggleIconKey === 'restore' ? <SwitcherOutlined /> : <BorderOutlined />}
|
||
style={{ height: '100%', borderRadius: 0, width: titleBarButtonWidth }}
|
||
onClick={() => { void handleTitleBarWindowToggle(); }}
|
||
/>
|
||
<Button
|
||
type="text"
|
||
icon={<CloseOutlined />}
|
||
danger
|
||
className="titlebar-close-btn"
|
||
style={{ height: '100%', borderRadius: 0, width: titleBarButtonWidth }}
|
||
onClick={() => { void handleApplicationQuitRequest(); }}
|
||
/>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{showLinuxCJKFontBanner && (
|
||
<LinuxCJKFontBanner
|
||
darkMode={darkMode}
|
||
installHint={linuxCJKFontInstallHint || ''}
|
||
onOpenFontSettings={() => {
|
||
setThemeModalSection('appearance');
|
||
setIsThemeModalOpen(true);
|
||
}}
|
||
onDismiss={() => setIsLinuxCJKFontBannerDismissed(true)}
|
||
/>
|
||
)}
|
||
|
||
<Layout style={{ flex: 1, minHeight: 0, minWidth: 0 }}>
|
||
<Sider
|
||
ref={siderRef}
|
||
width={sidebarWidth}
|
||
className={isV2Ui ? 'gn-v2-app-sider' : undefined}
|
||
style={{
|
||
borderRight: isV2Ui ? 'none' : '1px solid rgba(128,128,128,0.2)',
|
||
position: 'relative',
|
||
background: isV2Ui ? 'var(--gn-bg-panel-2)' : bgMain
|
||
}}
|
||
>
|
||
<div style={{ height: '100%', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
|
||
{!isV2Ui && (
|
||
<>
|
||
<div style={{ padding: `12px ${sidebarHorizontalPadding}px 8px`, borderBottom: 'none', display: 'flex', alignItems: 'center', flexShrink: 0 }}>
|
||
<div style={{ display: 'grid', gridTemplateColumns: `repeat(${sidebarUtilityItems.length}, minmax(0, 1fr))`, gap: 8, width: '100%' }}>
|
||
{sidebarUtilityItems.map((item) => (
|
||
<Tooltip key={item.key} title={item.title}>
|
||
<Button type="text" icon={item.icon} style={utilityButtonStyle} onClick={item.onClick} />
|
||
</Tooltip>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<div style={{ padding: `0 ${sidebarHorizontalPadding}px 10px`, borderBottom: 'none', display: 'flex', alignItems: 'center', flexShrink: 0 }}>
|
||
<div style={{ display: 'grid', gridTemplateColumns: isSidebarCompact ? 'minmax(0, 1fr)' : 'minmax(0, 1fr) minmax(0, 1fr)', gap: 8, width: '100%' }}>
|
||
<Button icon={<PlusOutlined />} onClick={handleCreateConnection} title={t('connection.new')} style={sidebarCreateConnectionActionStyle}>
|
||
{t('connection.new')}
|
||
</Button>
|
||
<Button icon={<ConsoleSqlOutlined />} onClick={handleNewQuery} title={t('query.new')} style={sidebarQueryActionStyle}>
|
||
{t('query.new')}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
<div style={{ flex: 1, overflow: 'hidden', paddingBottom: isV2Ui ? 0 : 58, paddingRight: sidebarResizeHandleWidth, position: 'relative' }}>
|
||
<div style={{ height: '100%', opacity: connectionWorkbenchState.ready ? 1 : 0.72, pointerEvents: connectionWorkbenchState.ready ? 'auto' : 'none' }}>
|
||
<Sidebar
|
||
onCreateConnection={handleCreateConnection}
|
||
onEditConnection={handleEditConnection}
|
||
onOpenTools={handleOpenToolsModal}
|
||
onOpenSettings={handleOpenSettingsModal}
|
||
onToggleAI={toggleAIPanel}
|
||
onToggleLogPanel={handleToggleLogPanel}
|
||
uiVersion={appearance.uiVersion}
|
||
onFocusCommandSearch={handleFocusSidebarSearch}
|
||
/>
|
||
</div>
|
||
{!connectionWorkbenchState.ready && (
|
||
<div
|
||
style={{
|
||
position: 'absolute',
|
||
inset: 0,
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
padding: 16,
|
||
background: darkMode ? 'rgba(7, 12, 20, 0.42)' : 'rgba(255, 255, 255, 0.58)',
|
||
backdropFilter: 'blur(4px)',
|
||
zIndex: 1,
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
display: 'inline-flex',
|
||
alignItems: 'center',
|
||
gap: 10,
|
||
padding: '10px 14px',
|
||
borderRadius: 999,
|
||
background: darkMode ? 'rgba(15, 23, 36, 0.86)' : 'rgba(255, 255, 255, 0.94)',
|
||
border: darkMode ? '1px solid rgba(255,255,255,0.08)' : '1px solid rgba(22,32,51,0.08)',
|
||
boxShadow: darkMode ? '0 12px 24px rgba(0,0,0,0.26)' : '0 12px 24px rgba(15,23,42,0.08)',
|
||
color: darkMode ? 'rgba(255,255,255,0.88)' : '#162033',
|
||
fontSize: 12,
|
||
fontWeight: 500,
|
||
}}
|
||
>
|
||
<Spin size="small" />
|
||
<span>{connectionWorkbenchState.message}</span>
|
||
</div>
|
||
</div>
|
||
)}
|
||
<div
|
||
onMouseDown={handleSidebarMouseDown}
|
||
onContextMenu={(event) => {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
}}
|
||
role="separator"
|
||
aria-orientation="vertical"
|
||
title={t('app.sidebar.resize_width')}
|
||
style={{
|
||
position: 'absolute',
|
||
right: 0,
|
||
top: 0,
|
||
bottom: 0,
|
||
width: sidebarResizeHandleWidth,
|
||
cursor: 'col-resize',
|
||
zIndex: 3,
|
||
touchAction: 'none',
|
||
userSelect: 'none',
|
||
WebkitUserSelect: 'none',
|
||
background: 'transparent',
|
||
}}
|
||
/>
|
||
</div>
|
||
|
||
{/* Floating SQL Log Toggle */}
|
||
{!isV2Ui && (
|
||
<div
|
||
style={{
|
||
position: 'absolute',
|
||
left: 10,
|
||
right: 14,
|
||
bottom: 10,
|
||
zIndex: 20,
|
||
pointerEvents: 'none'
|
||
}}
|
||
>
|
||
<Button
|
||
type={isLogPanelOpen ? "primary" : "text"}
|
||
icon={<BugOutlined />}
|
||
onClick={handleToggleLogPanel}
|
||
style={isLogPanelOpen ? {
|
||
width: '100%',
|
||
height: floatingLogButtonHeight,
|
||
borderRadius: 999,
|
||
boxShadow: floatingLogButtonShadow,
|
||
pointerEvents: 'auto'
|
||
} : {
|
||
width: '100%',
|
||
height: floatingLogButtonHeight,
|
||
borderRadius: 999,
|
||
border: `1px solid ${floatingLogButtonBorderColor}`,
|
||
color: floatingLogButtonTextColor,
|
||
background: floatingLogButtonBgColor,
|
||
boxShadow: floatingLogButtonShadow,
|
||
backdropFilter: blurFilter,
|
||
pointerEvents: 'auto'
|
||
}}
|
||
>
|
||
{t('app.sidebar.sql_execution_log')}
|
||
</Button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</Sider>
|
||
<Content style={{ background: bgContent, overflow: 'hidden', display: 'flex', flexDirection: 'column', minWidth: 0, flex: 1 }}>
|
||
{securityUpdateEntryVisibility.showBanner && !isSecurityUpdateBannerDismissed && (
|
||
<SecurityUpdateBanner
|
||
status={securityUpdateStatus}
|
||
darkMode={darkMode}
|
||
overlayTheme={overlayTheme}
|
||
surfaceOpacity={effectiveOpacity}
|
||
onStart={handleStartSecurityUpdate}
|
||
onRetry={handleRetrySecurityUpdate}
|
||
onRestart={handleRestartSecurityUpdate}
|
||
onOpenDetails={() => handleOpenSecurityUpdateSettings(
|
||
hasSecurityUpdateRecentResult(securityUpdateStatus) ? 'recent_result' : null,
|
||
)}
|
||
onDismiss={() => setIsSecurityUpdateBannerDismissed(true)}
|
||
/>
|
||
)}
|
||
<div style={{ flex: 1, minHeight: 0, minWidth: 0, overflow: 'hidden', display: 'flex', flexDirection: 'row', position: 'relative' }}>
|
||
<div style={{ flex: 1, minHeight: 0, minWidth: 0, overflow: 'hidden', display: 'flex', flexDirection: 'column', background: bgContent, marginBottom: isLogPanelOpen ? 8 : 0, borderRadius: isLogPanelOpen ? 'var(--gonavi-border-radius)' : 0, clipPath: isLogPanelOpen ? 'inset(0 round var(--gonavi-border-radius))' : 'none' }}>
|
||
<TabManager />
|
||
<FloatingWorkbenchWindows />
|
||
<FloatingQueryResultWindows />
|
||
</div>
|
||
{!isV2Ui && !aiPanelVisible && (
|
||
<>
|
||
{aiEntryPlacement === 'content-edge' && legacyAiEdgeHandleAttachment === 'content-shell' && (
|
||
<div style={legacyAiEdgeHandleDockStyle}>
|
||
{renderLegacyAIEdgeHandle()}
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
{aiPanelVisible && !aiChatDetached && (
|
||
<div
|
||
className={aiPanelOverlayActive ? 'gn-v2-ai-panel-overlay' : undefined}
|
||
style={aiPanelOverlayActive
|
||
? { position: 'absolute', inset: 0, display: 'flex', justifyContent: 'flex-end', pointerEvents: 'none', zIndex: 14 }
|
||
: { position: 'relative', display: 'flex', flexShrink: 0, overflow: 'visible' }}
|
||
>
|
||
{aiPanelOverlayActive && (
|
||
<button
|
||
type="button"
|
||
className="gn-v2-ai-panel-backdrop"
|
||
aria-label={t('app.ai_panel.aria.close')}
|
||
onClick={() => setAIPanelVisible(false)}
|
||
style={{
|
||
position: 'absolute',
|
||
inset: 0,
|
||
border: 0,
|
||
padding: 0,
|
||
background: darkMode ? 'rgba(3, 7, 18, 0.26)' : 'rgba(248, 250, 252, 0.38)',
|
||
backdropFilter: 'blur(2px)',
|
||
pointerEvents: 'auto',
|
||
}}
|
||
/>
|
||
)}
|
||
<div
|
||
className={`gn-v2-ai-panel-dock${aiPanelOverlayActive ? ' is-overlay' : ''}`}
|
||
style={aiPanelOverlayActive
|
||
? {
|
||
position: 'relative',
|
||
display: 'flex',
|
||
height: '100%',
|
||
pointerEvents: 'auto',
|
||
zIndex: 1,
|
||
boxShadow: '0 18px 48px rgba(15, 23, 42, 0.18)',
|
||
}
|
||
: undefined}
|
||
>
|
||
{!isV2Ui && (
|
||
<>
|
||
{aiEntryPlacement === 'content-edge' && legacyAiEdgeHandleAttachment === 'panel-shell' && (
|
||
<div style={legacyAiEdgeHandleDockStyle}>
|
||
{renderLegacyAIEdgeHandle()}
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
<AIPanelErrorBoundary
|
||
key={aiPanelRenderNonce}
|
||
onError={handleAIPanelRenderError}
|
||
fallback={(error) => (
|
||
<div
|
||
style={{
|
||
width: aiPanelRenderWidth,
|
||
minWidth: 0,
|
||
height: '100%',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
padding: 20,
|
||
background: bgContent,
|
||
color: darkMode ? 'rgba(255,255,255,0.88)' : '#162033',
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
width: '100%',
|
||
maxWidth: 360,
|
||
display: 'grid',
|
||
gap: 12,
|
||
padding: 18,
|
||
borderRadius: 16,
|
||
border: darkMode ? '1px solid rgba(255,255,255,0.12)' : '1px solid rgba(15,23,42,0.08)',
|
||
background: darkMode ? 'rgba(15,23,42,0.72)' : 'rgba(255,255,255,0.94)',
|
||
boxShadow: darkMode ? '0 16px 36px rgba(0,0,0,0.32)' : '0 16px 36px rgba(15,23,42,0.12)',
|
||
}}
|
||
>
|
||
<div style={{ fontSize: 15, fontWeight: 600 }}>{t('app.ai_panel.error.title')}</div>
|
||
<div style={{ fontSize: 12, lineHeight: 1.6, color: darkMode ? 'rgba(255,255,255,0.68)' : '#526075' }}>
|
||
{t('app.ai_panel.error.description')}
|
||
</div>
|
||
{error?.message && (
|
||
<div
|
||
style={{
|
||
fontSize: 12,
|
||
lineHeight: 1.5,
|
||
wordBreak: 'break-word',
|
||
padding: '10px 12px',
|
||
borderRadius: 10,
|
||
background: darkMode ? 'rgba(2,6,23,0.7)' : 'rgba(248,250,252,0.92)',
|
||
border: darkMode ? '1px solid rgba(148,163,184,0.18)' : '1px solid rgba(148,163,184,0.22)',
|
||
}}
|
||
>
|
||
{error.message}
|
||
</div>
|
||
)}
|
||
<div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end' }}>
|
||
<Button aria-label={t('app.ai_panel.aria.close')} onClick={() => setAIPanelVisible(false)}>{t('app.ai_panel.action.close')}</Button>
|
||
<Button type="primary" onClick={handleRetryAIPanelRender}>{t('app.ai_panel.action.reload')}</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
>
|
||
<AIChatPanel
|
||
width={aiPanelRenderWidth}
|
||
darkMode={darkMode}
|
||
bgColor={bgContent}
|
||
presentation="dock"
|
||
onClose={() => setAIPanelVisible(false)}
|
||
onDetach={() => detachAIChatPanel()}
|
||
onOpenSettings={() => {
|
||
handleOpenAISettings();
|
||
}}
|
||
overlayTheme={overlayTheme}
|
||
/>
|
||
</AIPanelErrorBoundary>
|
||
</div>
|
||
</div>
|
||
)}
|
||
{aiPanelVisible && aiChatDetached && (
|
||
<FloatingAIChatWindow
|
||
darkMode={darkMode}
|
||
bgColor={bgContent}
|
||
overlayTheme={overlayTheme}
|
||
renderNonce={aiPanelRenderNonce}
|
||
onOpenSettings={() => handleOpenAISettings()}
|
||
onRenderError={handleAIPanelRenderError}
|
||
onRetryRender={handleRetryAIPanelRender}
|
||
/>
|
||
)}
|
||
</div>
|
||
{!isV2Ui && isLogPanelOpen && (
|
||
<LogPanel
|
||
height={logPanelHeight}
|
||
onClose={handleCloseLogPanel}
|
||
onResizeStart={handleLogResizeStart}
|
||
/>
|
||
)}
|
||
</Content>
|
||
</Layout>
|
||
{isConnectionModalMounted && (
|
||
<ConnectionModal
|
||
open={isModalOpen}
|
||
onClose={handleCloseModal}
|
||
initialValues={editingConnection}
|
||
onOpenDriverManager={handleOpenDriverManagerFromConnection}
|
||
onSaved={handleConnectionSaved}
|
||
/>
|
||
)}
|
||
{isToolsModalOpen && (() => {
|
||
const toolCenterGroups = [
|
||
{
|
||
key: 'config',
|
||
icon: <SettingOutlined />,
|
||
title: t('app.tools.group.config.title'),
|
||
description: t('app.tools.group.config.description'),
|
||
items: [
|
||
{
|
||
key: 'import',
|
||
icon: <UploadOutlined />,
|
||
title: t('app.tools.entry.import.title'),
|
||
description: t('app.tools.entry.import.description'),
|
||
onClick: () => {
|
||
void handleImportConnections('config');
|
||
},
|
||
},
|
||
{
|
||
key: 'export',
|
||
icon: <DownloadOutlined />,
|
||
title: t('app.tools.entry.export.title'),
|
||
description: t('app.tools.entry.export.description'),
|
||
onClick: () => {
|
||
void handleExportConnections('config');
|
||
},
|
||
},
|
||
{
|
||
key: 'data-root',
|
||
icon: <HddOutlined />,
|
||
title: t('app.tools.entry.data_root.title'),
|
||
description: t('app.tools.entry.data_root.description'),
|
||
onClick: () => {
|
||
handleOpenToolCenterPane('config', 'data-root');
|
||
},
|
||
},
|
||
{
|
||
key: 'security-update',
|
||
icon: <SafetyCertificateOutlined />,
|
||
title: t('app.tools.entry.security_update.title'),
|
||
description: securityUpdateEntryVisibility.showDetailEntry || securityUpdateHasLegacySensitiveItems
|
||
? t('app.tools.entry.security_update.status_description', { status: securityUpdateStatusMeta.label })
|
||
: t('app.tools.entry.security_update.description'),
|
||
onClick: () => {
|
||
handleOpenToolCenterPane('config', 'security-update');
|
||
},
|
||
},
|
||
],
|
||
},
|
||
{
|
||
key: 'workflow',
|
||
icon: <SwitcherOutlined />,
|
||
title: t('app.tools.group.workflow.title'),
|
||
description: t('app.tools.group.workflow.description'),
|
||
items: [
|
||
{
|
||
key: 'schema-compare',
|
||
icon: <AppstoreOutlined />,
|
||
title: t('app.tools.entry.schema_compare.title'),
|
||
description: t('app.tools.entry.schema_compare.description'),
|
||
onClick: () => {
|
||
setSyncModalEntryMode('schemaCompare');
|
||
handleOpenToolCenterPane('workflow', 'schema-compare');
|
||
},
|
||
},
|
||
{
|
||
key: 'data-compare',
|
||
icon: <SwitcherOutlined />,
|
||
title: t('app.tools.entry.data_compare.title'),
|
||
description: t('app.tools.entry.data_compare.description'),
|
||
onClick: () => {
|
||
setSyncModalEntryMode('dataCompare');
|
||
handleOpenToolCenterPane('workflow', 'data-compare');
|
||
},
|
||
},
|
||
{
|
||
key: 'sync',
|
||
icon: <UploadOutlined rotate={90} />,
|
||
title: t('app.tools.entry.sync.title'),
|
||
description: t('app.tools.entry.sync.description'),
|
||
onClick: () => {
|
||
setSyncModalEntryMode('sync');
|
||
handleOpenToolCenterPane('workflow', 'sync');
|
||
},
|
||
},
|
||
],
|
||
},
|
||
{
|
||
key: 'workspace',
|
||
icon: <CodeOutlined />,
|
||
title: t('app.tools.group.workspace.title'),
|
||
description: t('app.tools.group.workspace.description'),
|
||
items: [
|
||
{
|
||
key: 'drivers',
|
||
icon: <SettingOutlined />,
|
||
title: t('app.tools.entry.drivers.title'),
|
||
description: t('app.tools.entry.drivers.description'),
|
||
onClick: () => {
|
||
handleOpenToolCenterPane('workspace', 'drivers');
|
||
},
|
||
},
|
||
{
|
||
key: 'snippet-settings',
|
||
icon: <CodeOutlined />,
|
||
title: t('app.tools.entry.snippets.title'),
|
||
description: t('app.tools.entry.snippets.description'),
|
||
onClick: () => {
|
||
handleOpenToolCenterPane('workspace', 'snippet-settings');
|
||
},
|
||
},
|
||
{
|
||
key: 'shortcut-settings',
|
||
icon: <LinkOutlined />,
|
||
title: t('app.tools.entry.shortcuts.title'),
|
||
description: t('app.tools.entry.shortcuts.description'),
|
||
onClick: () => {
|
||
handleOpenToolCenterPane('workspace', 'shortcut-settings');
|
||
},
|
||
},
|
||
],
|
||
},
|
||
] as const;
|
||
const filteredToolCenterGroups = toolCenterGroups.map((group) => ({
|
||
...group,
|
||
items: group.items.filter((item) => {
|
||
if (!isWebRuntime) {
|
||
return true;
|
||
}
|
||
return !['import', 'export', 'data-root'].includes(String(item.key || ''));
|
||
}),
|
||
})).filter((group) => group.items.length > 0);
|
||
const activeToolCenterGroup = filteredToolCenterGroups.find((group) => group.key === activeToolCenterGroupKey) ?? filteredToolCenterGroups[0];
|
||
const activeToolCenterPaneItem = activeToolCenterPane
|
||
? filteredToolCenterGroups
|
||
.find((group) => group.key === activeToolCenterPane.group)
|
||
?.items.find((item) => item.key === activeToolCenterPane.key)
|
||
: null;
|
||
if (!activeToolCenterGroup) {
|
||
return null;
|
||
}
|
||
const closeToolCenterPane = () => {
|
||
if (activeToolCenterPane?.key === 'connection-package') {
|
||
closeConnectionPackageDialog();
|
||
return;
|
||
}
|
||
setToolCenterBackGroupKey(null);
|
||
setActiveToolCenterPane(null);
|
||
};
|
||
const renderToolCenterPane = () => {
|
||
if (!activeToolCenterPane) {
|
||
return null;
|
||
}
|
||
|
||
if (activeToolCenterPane.key === 'connection-package') {
|
||
return (
|
||
<ConnectionPackagePasswordModal
|
||
embedded
|
||
open={connectionPackageDialog.open}
|
||
title={connectionPackageDialog.mode === 'export'
|
||
? t('app.connection_package.dialog.export_title')
|
||
: t('app.connection_package.dialog.import_password_title')}
|
||
mode={connectionPackageDialog.mode}
|
||
includeSecrets={connectionPackageDialog.includeSecrets}
|
||
useFilePassword={connectionPackageDialog.useFilePassword}
|
||
password={connectionPackageDialog.password}
|
||
error={connectionPackageDialog.error}
|
||
confirmLoading={connectionPackageDialog.confirmLoading}
|
||
confirmText={connectionPackageDialog.mode === 'export'
|
||
? t('app.connection_package.action.start_export')
|
||
: t('app.connection_package.action.start_import')}
|
||
cancelText={t('common.close')}
|
||
onBack={closeToolCenterPane}
|
||
onIncludeSecretsChange={(value) => {
|
||
setConnectionPackageDialog((current) => ({
|
||
...current,
|
||
includeSecrets: value,
|
||
useFilePassword: value ? current.useFilePassword : false,
|
||
password: value ? current.password : '',
|
||
error: '',
|
||
}));
|
||
}}
|
||
onUseFilePasswordChange={(value) => {
|
||
setConnectionPackageDialog((current) => ({
|
||
...current,
|
||
useFilePassword: value,
|
||
password: value ? current.password : '',
|
||
error: '',
|
||
}));
|
||
}}
|
||
onPasswordChange={(value) => {
|
||
setConnectionPackageDialog((current) => ({
|
||
...current,
|
||
password: value,
|
||
error: '',
|
||
}));
|
||
}}
|
||
onConfirm={() => {
|
||
void handleConfirmConnectionPackageDialog();
|
||
}}
|
||
onCancel={closeConnectionPackageDialog}
|
||
/>
|
||
);
|
||
}
|
||
|
||
if (activeToolCenterPane.key === 'data-root') {
|
||
return (
|
||
<Modal
|
||
embedded
|
||
open
|
||
title={null}
|
||
closable={false}
|
||
onCancel={closeToolCenterPane}
|
||
footer={[
|
||
<Button key="close" onClick={closeToolCenterPane}>
|
||
{t('common.close')}
|
||
</Button>,
|
||
<Button key="back" onClick={closeToolCenterPane}>
|
||
{t('common.back_to_previous')}
|
||
</Button>,
|
||
]}
|
||
styles={{
|
||
header: { background: 'transparent', borderBottom: 'none', paddingBottom: 8 },
|
||
body: { paddingTop: 8 },
|
||
footer: { background: 'transparent', borderTop: 'none', paddingTop: 10 },
|
||
}}
|
||
>
|
||
{dataRootLoading ? (
|
||
<div style={{ padding: '16px 0', textAlign: 'center' }}>
|
||
<Spin />
|
||
</div>
|
||
) : (
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 16, padding: '12px 0' }}>
|
||
<div style={utilityPanelStyle}>
|
||
<div style={{ marginBottom: 10, fontWeight: 600 }}>{t('app.data_root.current_directory')}</div>
|
||
<div style={{ display: 'grid', gap: 10 }}>
|
||
<Input readOnly value={dataRootInfo?.path || ''} />
|
||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
|
||
<div>
|
||
<div style={{ marginBottom: 6, fontWeight: 500 }}>{t('app.data_root.default_directory')}</div>
|
||
<div style={utilityMutedTextStyle}>{dataRootInfo?.defaultPath || '-'}</div>
|
||
</div>
|
||
<div>
|
||
<div style={{ marginBottom: 6, fontWeight: 500 }}>{t('app.data_root.driver_directory')}</div>
|
||
<div style={utilityMutedTextStyle}>{dataRootInfo?.driverPath || '-'}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style={utilityPanelStyle}>
|
||
<div style={{ marginBottom: 10, fontWeight: 600 }}>{t('app.data_root.switch_target')}</div>
|
||
<div style={{ display: 'grid', gap: 10 }}>
|
||
<Input
|
||
readOnly
|
||
value={selectedDataRootPath}
|
||
placeholder={t('app.data_root.placeholder.select_new_directory')}
|
||
/>
|
||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
|
||
<Button icon={<FolderOpenOutlined />} onClick={() => void handleSelectDataRoot()}>
|
||
{t('app.data_root.action.select')}
|
||
</Button>
|
||
<Button onClick={() => void handleOpenDataRoot()}>
|
||
{t('app.data_root.action.open_current')}
|
||
</Button>
|
||
<Button loading={dataRootApplying} onClick={() => void handleApplyDataRoot(false, true)}>
|
||
{t('app.data_root.action.restore_default_directory')}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style={utilityPanelStyle}>
|
||
<div style={{ marginBottom: 10, fontWeight: 600 }}>{t('app.data_root.apply_method')}</div>
|
||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
|
||
<Button loading={dataRootApplying} onClick={() => void handleApplyDataRoot(false)}>
|
||
{t('app.data_root.action.switch_only')}
|
||
</Button>
|
||
<Button type="primary" loading={dataRootApplying} onClick={() => void handleApplyDataRoot(true)}>
|
||
{t('app.data_root.action.migrate_and_switch')}
|
||
</Button>
|
||
</div>
|
||
<div style={{ ...utilityMutedTextStyle, marginTop: 10 }}>
|
||
{t('app.data_root.restart_hint')}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</Modal>
|
||
);
|
||
}
|
||
|
||
if (activeToolCenterPane.key === 'security-update') {
|
||
return (
|
||
<SecurityUpdateSettingsModal
|
||
embedded
|
||
open
|
||
darkMode={darkMode}
|
||
overlayTheme={overlayTheme}
|
||
surfaceOpacity={effectiveOpacity}
|
||
status={securityUpdateStatus}
|
||
focusTarget={securityUpdateSettingsFocusTarget}
|
||
focusRequest={securityUpdateSettingsFocusRequest}
|
||
onClose={closeToolCenterPane}
|
||
onBack={closeToolCenterPane}
|
||
onStart={handleStartSecurityUpdate}
|
||
onRetry={handleRetrySecurityUpdate}
|
||
onRestart={handleRestartSecurityUpdate}
|
||
onIssueAction={handleSecurityUpdateIssueAction}
|
||
/>
|
||
);
|
||
}
|
||
|
||
if (
|
||
activeToolCenterPane.key === 'schema-compare'
|
||
|| activeToolCenterPane.key === 'data-compare'
|
||
|| activeToolCenterPane.key === 'sync'
|
||
) {
|
||
return (
|
||
<DataSyncModal
|
||
embedded
|
||
open
|
||
onClose={closeToolCenterPane}
|
||
onBack={closeToolCenterPane}
|
||
entryMode={syncModalEntryMode}
|
||
/>
|
||
);
|
||
}
|
||
|
||
if (activeToolCenterPane.key === 'drivers') {
|
||
return (
|
||
<DriverManagerModal
|
||
embedded
|
||
open
|
||
onClose={closeToolCenterPane}
|
||
onBack={closeToolCenterPane}
|
||
onOpenGlobalProxySettings={handleOpenGlobalProxySettings}
|
||
/>
|
||
);
|
||
}
|
||
|
||
if (activeToolCenterPane.key === 'snippet-settings') {
|
||
return (
|
||
<SnippetSettingsModal
|
||
embedded
|
||
open
|
||
onClose={closeToolCenterPane}
|
||
onBack={closeToolCenterPane}
|
||
darkMode={darkMode}
|
||
overlayTheme={overlayTheme}
|
||
/>
|
||
);
|
||
}
|
||
|
||
if (activeToolCenterPane.key === 'shortcut-settings') {
|
||
return (
|
||
<Modal
|
||
embedded
|
||
open
|
||
title={null}
|
||
closable={false}
|
||
onCancel={() => {
|
||
setCapturingShortcutAction(null);
|
||
closeToolCenterPane();
|
||
}}
|
||
footer={[
|
||
<Button
|
||
key="reset"
|
||
onClick={() => {
|
||
resetShortcutOptions();
|
||
setCapturingShortcutAction(null);
|
||
void message.success(t('app.shortcuts.message.restored_defaults'));
|
||
}}
|
||
>
|
||
{t('app.shortcuts.action.restore_defaults')}
|
||
</Button>,
|
||
<Button
|
||
key="close"
|
||
type="primary"
|
||
onClick={() => {
|
||
setCapturingShortcutAction(null);
|
||
closeToolCenterPane();
|
||
}}
|
||
>
|
||
{t('common.close')}
|
||
</Button>,
|
||
<Button
|
||
key="back"
|
||
onClick={() => {
|
||
setCapturingShortcutAction(null);
|
||
closeToolCenterPane();
|
||
}}
|
||
>
|
||
{t('common.back_to_previous')}
|
||
</Button>,
|
||
]}
|
||
styles={{
|
||
header: { background: 'transparent', borderBottom: 'none', paddingBottom: 8 },
|
||
body: { paddingTop: 8, overflow: 'hidden', flex: 1, minHeight: 0 },
|
||
footer: { background: 'transparent', borderTop: 'none', paddingTop: 10 },
|
||
}}
|
||
>
|
||
<div data-gonavi-shortcut-modal-scroll="true" style={{ height: '100%', overflowY: 'auto', overflowX: 'hidden', display: 'flex', flexDirection: 'column', gap: 16, paddingTop: 8, paddingRight: 8 }}>
|
||
<div style={utilityPanelStyle}>
|
||
<div style={{ fontSize: 12, color: darkMode ? 'rgba(255,255,255,0.5)' : 'rgba(16,24,40,0.55)' }}>
|
||
{t('app.shortcuts.capture_hint')}
|
||
</div>
|
||
</div>
|
||
{SHORTCUT_ACTION_ORDER.map((action) => {
|
||
const meta = SHORTCUT_ACTION_META[action];
|
||
if (meta.platformOnly === 'mac' && !isMacRuntime) {
|
||
return null;
|
||
}
|
||
const binding = resolveShortcutBinding(shortcutOptions, action, activeShortcutPlatform);
|
||
const isCapturing = capturingShortcutAction === action;
|
||
const conflicts = shortcutConflictMap[action];
|
||
const conflictInfo = conflicts?.length ? splitConflictsByContext(conflicts) : null;
|
||
return (
|
||
<div
|
||
key={action}
|
||
style={{
|
||
...utilityPanelStyle,
|
||
display: 'grid',
|
||
gridTemplateColumns: '1fr auto',
|
||
gap: 12,
|
||
alignItems: 'center',
|
||
padding: '10px 12px',
|
||
}}
|
||
>
|
||
<div>
|
||
<div style={{ fontWeight: 500 }}>{meta.label}</div>
|
||
<div style={{ fontSize: 12, color: darkMode ? 'rgba(255,255,255,0.5)' : 'rgba(16,24,40,0.55)' }}>{meta.description}</div>
|
||
{conflictInfo && (
|
||
<div style={{ fontSize: 11, color: darkMode ? '#faad14' : '#d48806', marginTop: 2 }}>
|
||
{conflictInfo.hasMonaco && (
|
||
<>⚠ {t('app.shortcuts.message.reserved_conflict_info', { labels: conflictInfo.monacoLabels })}</>
|
||
)}
|
||
{conflictInfo.hasOther && (
|
||
<>⚠ {t('app.shortcuts.message.reserved_conflict_warning', { contexts: conflictInfo.otherContexts, labels: conflictInfo.otherLabels })}</>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||
<Input
|
||
readOnly
|
||
value={isCapturing ? t('app.shortcuts.capture_waiting') : getShortcutDisplayLabel(binding.combo, activeShortcutPlatform)}
|
||
style={{ width: 180, fontFamily: resolvedMonoFontFamily }}
|
||
/>
|
||
<Button
|
||
size="small"
|
||
onClick={() => setCapturingShortcutAction((prev) => (prev === action ? null : action))}
|
||
>
|
||
{isCapturing ? t('common.cancel') : t('app.shortcuts.action.record')}
|
||
</Button>
|
||
<Switch
|
||
checked={binding.enabled}
|
||
onChange={(checked) => updateShortcut(action, { enabled: checked }, activeShortcutPlatform)}
|
||
/>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</Modal>
|
||
);
|
||
}
|
||
|
||
return null;
|
||
};
|
||
|
||
return (
|
||
<Modal
|
||
title={renderUtilityModalTitle(<ToolOutlined />, t('app.tools.title'), t('app.tools.description'))}
|
||
open={isToolsModalOpen}
|
||
onCancel={() => {
|
||
if (activeToolCenterPane?.key === 'connection-package') {
|
||
closeConnectionPackageDialog();
|
||
}
|
||
setActiveToolCenterPane(null);
|
||
setToolCenterBackGroupKey(null);
|
||
setIsToolsModalOpen(false);
|
||
}}
|
||
footer={null}
|
||
centered
|
||
width={1080}
|
||
styles={{
|
||
content: toolCenterModalContentStyle,
|
||
header: { background: 'transparent', borderBottom: 'none', paddingBottom: 8 },
|
||
body: { paddingTop: 8, paddingBottom: 8, overflow: 'hidden', flex: 1, minHeight: 0 },
|
||
footer: { background: 'transparent', borderTop: 'none', paddingTop: 10 },
|
||
}}
|
||
>
|
||
<div style={toolCenterModalWorkspaceStyle}>
|
||
<div style={toolCenterModalSplitStyle}>
|
||
<div style={toolCenterNavPanelStyle}>
|
||
<div style={toolCenterNavScrollStyle} role="tablist" aria-orientation="vertical">
|
||
{toolCenterGroups.map((group) => {
|
||
const active = group.key === activeToolCenterGroup.key;
|
||
return (
|
||
<button
|
||
key={group.key}
|
||
type="button"
|
||
role="tab"
|
||
aria-selected={active}
|
||
title={`${group.title} - ${group.description}`}
|
||
onClick={() => {
|
||
setActiveToolCenterGroupKey(group.key);
|
||
setActiveToolCenterPane(null);
|
||
}}
|
||
style={{
|
||
position: 'relative',
|
||
textAlign: 'left',
|
||
width: '100%',
|
||
padding: '11px 10px 11px 14px',
|
||
borderRadius: 8,
|
||
border: 'none',
|
||
background: active
|
||
? overlayTheme.selectedBg
|
||
: 'transparent',
|
||
color: active ? (darkMode ? '#f5f7ff' : '#162033') : (darkMode ? 'rgba(255,255,255,0.82)' : '#3f4b5e'),
|
||
cursor: 'pointer',
|
||
}}
|
||
>
|
||
<span
|
||
aria-hidden="true"
|
||
style={{
|
||
position: 'absolute',
|
||
left: 0,
|
||
top: 10,
|
||
bottom: 10,
|
||
width: 3,
|
||
borderRadius: 999,
|
||
background: active
|
||
? overlayTheme.selectedText
|
||
: 'transparent',
|
||
}}
|
||
/>
|
||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, minWidth: 0 }}>
|
||
<span style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
|
||
<span
|
||
style={{
|
||
width: 28,
|
||
height: 28,
|
||
borderRadius: 8,
|
||
display: 'grid',
|
||
placeItems: 'center',
|
||
fontSize: 15,
|
||
flexShrink: 0,
|
||
background: active
|
||
? overlayTheme.iconBg
|
||
: (darkMode ? 'rgba(255,255,255,0.06)' : 'rgba(15,23,42,0.05)'),
|
||
color: active
|
||
? overlayTheme.iconColor
|
||
: overlayTheme.mutedText,
|
||
}}
|
||
>
|
||
{group.icon}
|
||
</span>
|
||
<span
|
||
style={{
|
||
fontSize: 13,
|
||
fontWeight: active ? 700 : 600,
|
||
minWidth: 0,
|
||
overflow: 'hidden',
|
||
textOverflow: 'ellipsis',
|
||
whiteSpace: 'nowrap',
|
||
}}
|
||
>
|
||
{group.title}
|
||
</span>
|
||
</span>
|
||
<span
|
||
style={{
|
||
minWidth: 20,
|
||
height: 20,
|
||
paddingInline: 6,
|
||
borderRadius: 999,
|
||
display: 'inline-flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
background: active
|
||
? overlayTheme.selectedBg
|
||
: (darkMode ? 'rgba(255,255,255,0.08)' : 'rgba(15,23,42,0.08)'),
|
||
color: active ? (darkMode ? '#f8fafc' : '#0f172a') : overlayTheme.mutedText,
|
||
fontSize: 10,
|
||
fontWeight: 700,
|
||
flexShrink: 0,
|
||
}}
|
||
>
|
||
{group.items.length}
|
||
</span>
|
||
</div>
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
<div style={toolCenterContentPanelStyle}>
|
||
{activeToolCenterPane ? (
|
||
<div style={toolCenterDetailPanelStyle}>
|
||
<div style={{ paddingBottom: 10, borderBottom: `1px solid ${overlayTheme.divider}` }}>
|
||
<div style={{ minWidth: 0 }}>
|
||
<div style={{ fontSize: 16, fontWeight: 700, color: overlayTheme.titleText }}>
|
||
{activeToolCenterPaneItem?.title ?? activeToolCenterGroup.title}
|
||
</div>
|
||
<div style={{ ...utilityMutedTextStyle, marginTop: 4 }}>
|
||
{activeToolCenterPaneItem?.description ?? activeToolCenterGroup.description}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style={toolCenterDetailBodyStyle}>
|
||
{renderToolCenterPane()}
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<>
|
||
<div style={{ display: 'grid', gap: 4 }}>
|
||
<div style={{ fontSize: 16, fontWeight: 700, color: overlayTheme.titleText }}>{activeToolCenterGroup.title}</div>
|
||
<div style={utilityMutedTextStyle}>{activeToolCenterGroup.description}</div>
|
||
</div>
|
||
<div style={toolCenterScrollableListStyle}>
|
||
{activeToolCenterGroup.items.map((item, index) => (
|
||
<Button
|
||
key={item.key}
|
||
type="text"
|
||
style={{
|
||
...toolCenterRowStyle,
|
||
borderTop: index === 0 ? `1px solid ${overlayTheme.divider}` : 'none',
|
||
borderBottom: `1px solid ${overlayTheme.divider}`,
|
||
}}
|
||
onClick={item.onClick}
|
||
>
|
||
<span style={{ display: 'flex', alignItems: 'center', gap: 12, minWidth: 0 }}>
|
||
<span style={{ width: 36, height: 36, borderRadius: 10, display: 'grid', placeItems: 'center', background: overlayTheme.iconBg, color: overlayTheme.iconColor, flexShrink: 0 }}>
|
||
{item.icon}
|
||
</span>
|
||
<span style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', minWidth: 0 }}>
|
||
<span>{item.title}</span>
|
||
<span style={toolCenterRowDescriptionStyle}>{item.description}</span>
|
||
</span>
|
||
</span>
|
||
<RightOutlined style={{ color: overlayTheme.mutedText, fontSize: 12, flexShrink: 0 }} />
|
||
</Button>
|
||
))}
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Modal>
|
||
);
|
||
})()}
|
||
{isSettingsModalOpen && (
|
||
<Modal
|
||
title={renderUtilityModalTitle(<SettingOutlined />, t('app.settings.title'), t('app.settings.description'))}
|
||
open={isSettingsModalOpen}
|
||
onCancel={handleCancelSettingsCenterPane}
|
||
footer={null}
|
||
centered
|
||
width={1080}
|
||
styles={{
|
||
content: toolCenterModalContentStyle,
|
||
header: { background: 'transparent', borderBottom: 'none', paddingBottom: 8 },
|
||
body: { paddingTop: 8, paddingBottom: 8, overflow: 'hidden', flex: 1, minHeight: 0 },
|
||
footer: { background: 'transparent', borderTop: 'none', paddingTop: 10 },
|
||
}}
|
||
>
|
||
<div style={toolCenterModalWorkspaceStyle}>
|
||
<div style={toolCenterModalSplitStyle}>
|
||
<div style={toolCenterNavPanelStyle}>
|
||
<div style={toolCenterNavScrollStyle} role="tablist" aria-orientation="vertical">
|
||
{settingsCenterGroups.map((group) => {
|
||
const active = group.key === activeSettingsCenterGroup.key;
|
||
return (
|
||
<button
|
||
key={group.key}
|
||
type="button"
|
||
role="tab"
|
||
aria-selected={active}
|
||
title={`${group.title} - ${group.description}`}
|
||
onClick={() => {
|
||
setActiveSettingsCenterGroupKey(group.key);
|
||
setActiveSettingsCenterPane(resolveSettingsCenterGroupInitialPane(group.key));
|
||
}}
|
||
style={{
|
||
position: 'relative',
|
||
textAlign: 'left',
|
||
width: '100%',
|
||
padding: '11px 10px 11px 14px',
|
||
borderRadius: 8,
|
||
border: 'none',
|
||
background: active ? overlayTheme.selectedBg : 'transparent',
|
||
color: active ? (darkMode ? '#f5f7ff' : '#162033') : (darkMode ? 'rgba(255,255,255,0.82)' : '#3f4b5e'),
|
||
cursor: 'pointer',
|
||
}}
|
||
>
|
||
<span
|
||
aria-hidden="true"
|
||
style={{
|
||
position: 'absolute',
|
||
left: 0,
|
||
top: 10,
|
||
bottom: 10,
|
||
width: 3,
|
||
borderRadius: 999,
|
||
background: active ? overlayTheme.selectedText : 'transparent',
|
||
}}
|
||
/>
|
||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, minWidth: 0 }}>
|
||
<span style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
|
||
<span
|
||
style={{
|
||
width: 28,
|
||
height: 28,
|
||
borderRadius: 8,
|
||
display: 'grid',
|
||
placeItems: 'center',
|
||
fontSize: 15,
|
||
flexShrink: 0,
|
||
background: active
|
||
? overlayTheme.iconBg
|
||
: (darkMode ? 'rgba(255,255,255,0.06)' : 'rgba(15,23,42,0.05)'),
|
||
color: active ? overlayTheme.iconColor : overlayTheme.mutedText,
|
||
}}
|
||
>
|
||
{group.icon}
|
||
</span>
|
||
<span
|
||
style={{
|
||
fontSize: 13,
|
||
fontWeight: active ? 700 : 600,
|
||
minWidth: 0,
|
||
overflow: 'hidden',
|
||
textOverflow: 'ellipsis',
|
||
whiteSpace: 'nowrap',
|
||
}}
|
||
>
|
||
{group.title}
|
||
</span>
|
||
</span>
|
||
<span
|
||
style={{
|
||
minWidth: 20,
|
||
height: 20,
|
||
paddingInline: 6,
|
||
borderRadius: 999,
|
||
display: 'inline-flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
background: active
|
||
? overlayTheme.selectedBg
|
||
: (darkMode ? 'rgba(255,255,255,0.08)' : 'rgba(15,23,42,0.08)'),
|
||
color: active ? (darkMode ? '#f8fafc' : '#0f172a') : overlayTheme.mutedText,
|
||
fontSize: 10,
|
||
fontWeight: 700,
|
||
flexShrink: 0,
|
||
}}
|
||
>
|
||
{group.items.length}
|
||
</span>
|
||
</div>
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
<div style={toolCenterContentPanelStyle}>
|
||
{activeSettingsCenterPane ? (
|
||
<div style={toolCenterDetailPanelStyle}>
|
||
<div style={{ paddingBottom: 10, borderBottom: `1px solid ${overlayTheme.divider}` }}>
|
||
<div style={{ minWidth: 0 }}>
|
||
<div style={{ fontSize: 16, fontWeight: 700, color: overlayTheme.titleText }}>
|
||
{activeSettingsCenterPaneItem?.title ?? activeSettingsCenterGroup.title}
|
||
</div>
|
||
<div style={{ ...utilityMutedTextStyle, marginTop: 4 }}>
|
||
{activeSettingsCenterPaneItem?.description ?? activeSettingsCenterGroup.description}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style={settingsCenterDetailBodyStyle}>
|
||
{renderSettingsCenterPane()}
|
||
</div>
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
justifyContent: activeSettingsCenterPane.key === 'about-go-navi' ? 'space-between' : 'flex-end',
|
||
alignItems: 'center',
|
||
gap: activeSettingsCenterPane.key === 'about-go-navi' ? 16 : 8,
|
||
paddingTop: 10,
|
||
marginTop: 10,
|
||
borderTop: `1px solid ${overlayTheme.divider}`,
|
||
flexShrink: 0,
|
||
}}
|
||
>
|
||
{activeSettingsCenterPane.key === 'about-go-navi' ? (
|
||
renderSettingsCenterAboutFooter()
|
||
) : isV2Ui && activeSettingsCenterPane.key === 'theme' ? (
|
||
<>
|
||
<Button onClick={handleBackFromSettingsCenterPane}>
|
||
{t('common.back_to_previous')}
|
||
</Button>
|
||
<Button type="primary" onClick={handleCancelSettingsCenterPane}>
|
||
{t('common.close')}
|
||
</Button>
|
||
</>
|
||
) : (
|
||
<>
|
||
<Button onClick={handleCancelSettingsCenterPane}>
|
||
{t('common.cancel')}
|
||
</Button>
|
||
<Button type="primary" onClick={handleBackFromSettingsCenterPane}>
|
||
{t('common.back_to_previous')}
|
||
</Button>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<>
|
||
<div style={{ display: 'grid', gap: 4 }}>
|
||
<div style={{ fontSize: 16, fontWeight: 700, color: overlayTheme.titleText }}>{activeSettingsCenterGroup.title}</div>
|
||
<div style={utilityMutedTextStyle}>{activeSettingsCenterGroup.description}</div>
|
||
</div>
|
||
<div style={toolCenterScrollableListStyle}>
|
||
{activeSettingsCenterGroup.items.map((item, index) => (
|
||
<Button
|
||
key={item.key}
|
||
type="text"
|
||
style={{
|
||
...toolCenterRowStyle,
|
||
borderTop: index === 0 ? `1px solid ${overlayTheme.divider}` : 'none',
|
||
borderBottom: `1px solid ${overlayTheme.divider}`,
|
||
}}
|
||
onClick={item.onClick}
|
||
>
|
||
<span style={{ display: 'flex', alignItems: 'center', gap: 12, minWidth: 0 }}>
|
||
<span style={{ width: 36, height: 36, borderRadius: 10, display: 'grid', placeItems: 'center', background: overlayTheme.iconBg, color: overlayTheme.iconColor, flexShrink: 0 }}>
|
||
{item.icon}
|
||
</span>
|
||
<span style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', minWidth: 0 }}>
|
||
<span>{item.title}</span>
|
||
<span style={toolCenterRowDescriptionStyle}>{item.description}</span>
|
||
</span>
|
||
</span>
|
||
<RightOutlined style={{ color: overlayTheme.mutedText, fontSize: 12, flexShrink: 0 }} />
|
||
</Button>
|
||
))}
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Modal>
|
||
)}
|
||
{isDataRootModalOpen && (
|
||
<Modal
|
||
title={renderUtilityModalTitle(
|
||
<HddOutlined />,
|
||
t('app.data_root.title'),
|
||
t('app.data_root.description'),
|
||
)}
|
||
open={isDataRootModalOpen}
|
||
onCancel={() => {
|
||
setIsDataRootModalOpen(false);
|
||
setToolCenterBackGroupKey(null);
|
||
}}
|
||
footer={[
|
||
<Button
|
||
key="close"
|
||
onClick={() => {
|
||
setIsDataRootModalOpen(false);
|
||
setToolCenterBackGroupKey(null);
|
||
}}
|
||
>
|
||
{t('common.close')}
|
||
</Button>,
|
||
toolCenterBackGroupKey === 'config' ? (
|
||
<Button
|
||
key="back"
|
||
onClick={() => handleReturnToToolCenter(() => setIsDataRootModalOpen(false))}
|
||
>
|
||
{t('common.back_to_previous')}
|
||
</Button>
|
||
) : null,
|
||
]}
|
||
width={720}
|
||
styles={{ content: utilityModalShellStyle, header: { background: 'transparent', borderBottom: 'none', paddingBottom: 8 }, body: { paddingTop: 8 }, footer: { background: 'transparent', borderTop: 'none', paddingTop: 10 } }}
|
||
>
|
||
{dataRootLoading ? (
|
||
<div style={{ padding: '16px 0', textAlign: 'center' }}>
|
||
<Spin />
|
||
</div>
|
||
) : (
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 16, padding: '12px 0' }}>
|
||
<div style={utilityPanelStyle}>
|
||
<div style={{ marginBottom: 10, fontWeight: 600 }}>{t('app.data_root.current_directory')}</div>
|
||
<div style={{ display: 'grid', gap: 10 }}>
|
||
<Input readOnly value={dataRootInfo?.path || ''} />
|
||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
|
||
<div>
|
||
<div style={{ marginBottom: 6, fontWeight: 500 }}>{t('app.data_root.default_directory')}</div>
|
||
<div style={utilityMutedTextStyle}>{dataRootInfo?.defaultPath || '-'}</div>
|
||
</div>
|
||
<div>
|
||
<div style={{ marginBottom: 6, fontWeight: 500 }}>{t('app.data_root.driver_directory')}</div>
|
||
<div style={utilityMutedTextStyle}>{dataRootInfo?.driverPath || '-'}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style={utilityPanelStyle}>
|
||
<div style={{ marginBottom: 10, fontWeight: 600 }}>{t('app.data_root.switch_target')}</div>
|
||
<div style={{ display: 'grid', gap: 10 }}>
|
||
<Input
|
||
readOnly
|
||
value={selectedDataRootPath}
|
||
placeholder={t('app.data_root.placeholder.select_new_directory')}
|
||
/>
|
||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
|
||
<Button icon={<FolderOpenOutlined />} onClick={() => void handleSelectDataRoot()}>
|
||
{t('app.data_root.action.select')}
|
||
</Button>
|
||
<Button onClick={() => void handleOpenDataRoot()}>
|
||
{t('app.data_root.action.open_current')}
|
||
</Button>
|
||
<Button loading={dataRootApplying} onClick={() => void handleApplyDataRoot(false, true)}>
|
||
{t('app.data_root.action.restore_default_directory')}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style={utilityPanelStyle}>
|
||
<div style={{ marginBottom: 10, fontWeight: 600 }}>{t('app.data_root.apply_method')}</div>
|
||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
|
||
<Button loading={dataRootApplying} onClick={() => void handleApplyDataRoot(false)}>
|
||
{t('app.data_root.action.switch_only')}
|
||
</Button>
|
||
<Button type="primary" loading={dataRootApplying} onClick={() => void handleApplyDataRoot(true)}>
|
||
{t('app.data_root.action.migrate_and_switch')}
|
||
</Button>
|
||
</div>
|
||
<div style={{ ...utilityMutedTextStyle, marginTop: 10 }}>
|
||
{t('app.data_root.restart_hint')}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</Modal>
|
||
)}
|
||
{isSyncModalOpen && (
|
||
<DataSyncModal
|
||
open={isSyncModalOpen}
|
||
onClose={() => {
|
||
setIsSyncModalOpen(false);
|
||
setToolCenterBackGroupKey(null);
|
||
}}
|
||
onBack={toolCenterBackGroupKey === 'workflow' ? () => handleReturnToToolCenter(() => setIsSyncModalOpen(false)) : undefined}
|
||
entryMode={syncModalEntryMode}
|
||
/>
|
||
)}
|
||
{isDriverModalOpen && (
|
||
<DriverManagerModal
|
||
open={isDriverModalOpen}
|
||
onClose={handleCloseDriverManager}
|
||
onBack={toolCenterBackGroupKey === 'workspace' ? () => handleReturnToToolCenter(() => setIsDriverModalOpen(false)) : undefined}
|
||
onOpenGlobalProxySettings={handleOpenGlobalProxySettings}
|
||
/>
|
||
)}
|
||
<SecurityUpdateIntroModal
|
||
open={isSecurityUpdateIntroOpen}
|
||
loading={isSecurityUpdateProgressOpen}
|
||
darkMode={darkMode}
|
||
overlayTheme={overlayTheme}
|
||
surfaceOpacity={effectiveOpacity}
|
||
onStart={handleStartSecurityUpdate}
|
||
onPostpone={handlePostponeSecurityUpdate}
|
||
onViewDetails={() => handleOpenSecurityUpdateSettings()}
|
||
/>
|
||
<SecurityUpdateSettingsModal
|
||
open={isSecurityUpdateSettingsOpen}
|
||
darkMode={darkMode}
|
||
overlayTheme={overlayTheme}
|
||
surfaceOpacity={effectiveOpacity}
|
||
status={securityUpdateStatus}
|
||
focusTarget={securityUpdateSettingsFocusTarget}
|
||
focusRequest={securityUpdateSettingsFocusRequest}
|
||
onClose={() => {
|
||
setIsSecurityUpdateSettingsOpen(false);
|
||
setToolCenterBackGroupKey(null);
|
||
}}
|
||
onBack={toolCenterBackGroupKey === 'config' ? () => handleReturnToToolCenter(() => setIsSecurityUpdateSettingsOpen(false)) : undefined}
|
||
onStart={handleStartSecurityUpdate}
|
||
onRetry={handleRetrySecurityUpdate}
|
||
onRestart={handleRestartSecurityUpdate}
|
||
onIssueAction={handleSecurityUpdateIssueAction}
|
||
/>
|
||
<SecurityUpdateProgressModal
|
||
open={isSecurityUpdateProgressOpen}
|
||
stageText={securityUpdateProgressStage}
|
||
overlayTheme={overlayTheme}
|
||
surfaceOpacity={effectiveOpacity}
|
||
/>
|
||
<ConnectionPackagePasswordModal
|
||
open={connectionPackageDialog.open && !(isToolsModalOpen && activeToolCenterPane?.key === 'connection-package')}
|
||
title={connectionPackageDialog.mode === 'export'
|
||
? t('app.connection_package.dialog.export_title')
|
||
: t('app.connection_package.dialog.import_password_title')}
|
||
mode={connectionPackageDialog.mode}
|
||
includeSecrets={connectionPackageDialog.includeSecrets}
|
||
useFilePassword={connectionPackageDialog.useFilePassword}
|
||
password={connectionPackageDialog.password}
|
||
error={connectionPackageDialog.error}
|
||
confirmLoading={connectionPackageDialog.confirmLoading}
|
||
confirmText={connectionPackageDialog.mode === 'export'
|
||
? t('app.connection_package.action.start_export')
|
||
: t('app.connection_package.action.start_import')}
|
||
onBack={toolCenterBackGroupKey === 'config' ? () => handleReturnToToolCenter(closeConnectionPackageDialog) : undefined}
|
||
onIncludeSecretsChange={(value) => {
|
||
setConnectionPackageDialog((current) => ({
|
||
...current,
|
||
includeSecrets: value,
|
||
useFilePassword: value ? current.useFilePassword : false,
|
||
password: value ? current.password : '',
|
||
error: '',
|
||
}));
|
||
}}
|
||
onUseFilePasswordChange={(value) => {
|
||
setConnectionPackageDialog((current) => ({
|
||
...current,
|
||
useFilePassword: value,
|
||
password: value ? current.password : '',
|
||
error: '',
|
||
}));
|
||
}}
|
||
onPasswordChange={(value) => {
|
||
setConnectionPackageDialog((current) => ({
|
||
...current,
|
||
password: value,
|
||
error: '',
|
||
}));
|
||
}}
|
||
onConfirm={() => {
|
||
void handleConfirmConnectionPackageDialog();
|
||
}}
|
||
onCancel={closeConnectionPackageDialog}
|
||
/>
|
||
<Modal
|
||
title={renderUtilityModalTitle(<InfoCircleOutlined />, t('app.about.title'), t('app.about.description'))}
|
||
open={isAboutOpen}
|
||
onCancel={() => setIsAboutOpen(false)}
|
||
styles={{ content: utilityModalShellStyle, header: { background: 'transparent', borderBottom: 'none', paddingBottom: 8 }, body: { paddingTop: 8 }, footer: { background: 'transparent', borderTop: 'none', paddingTop: 10, display: 'flex', flexWrap: 'wrap', gap: 10, justifyContent: 'flex-end' } }}
|
||
footer={renderAboutUpdateActions(
|
||
<Button key="close" onClick={() => setIsAboutOpen(false)}>{t('common.close')}</Button>,
|
||
)}
|
||
>
|
||
{renderAboutSettingsContent()}
|
||
</Modal>
|
||
|
||
{isThemeModalOpen && (
|
||
<Modal
|
||
title={renderUtilityModalTitle(
|
||
themeModalSection === 'theme'
|
||
? <SkinOutlined />
|
||
: themeModalSection === 'appearance'
|
||
? <BgColorsOutlined />
|
||
: <AppstoreOutlined />,
|
||
themeModalSection === 'theme'
|
||
? t('app.theme.theme_settings_title')
|
||
: themeModalSection === 'appearance'
|
||
? t('app.theme.appearance_settings_title')
|
||
: t('app.theme.workspace_settings_title'),
|
||
themeModalSection === 'theme'
|
||
? t('app.theme.theme_settings_description')
|
||
: themeModalSection === 'appearance'
|
||
? t('app.theme.appearance_settings_description')
|
||
: t('app.theme.workspace_settings_description')
|
||
)}
|
||
open={isThemeModalOpen}
|
||
onCancel={() => { setIsThemeModalOpen(false); }}
|
||
footer={null}
|
||
width={820}
|
||
styles={{ content: utilityModalShellStyle, header: { background: 'transparent', borderBottom: 'none', paddingBottom: 8 }, body: { paddingTop: 8, height: 620, overflow: 'hidden' }, footer: { background: 'transparent', borderTop: 'none', paddingTop: 10 } }}
|
||
>
|
||
{renderThemeSettingsContent()}
|
||
</Modal>
|
||
)}
|
||
|
||
{isShortcutModalOpen && (
|
||
<Modal
|
||
title={renderUtilityModalTitle(
|
||
<LinkOutlined />,
|
||
t('app.shortcuts.title'),
|
||
t('app.shortcuts.description'),
|
||
)}
|
||
open={isShortcutModalOpen}
|
||
onCancel={() => {
|
||
setIsShortcutModalOpen(false);
|
||
setCapturingShortcutAction(null);
|
||
setToolCenterBackGroupKey(null);
|
||
}}
|
||
width={760}
|
||
centered
|
||
style={{ top: 0, maxHeight: 'calc(100vh - 80px)' }}
|
||
styles={{
|
||
content: {
|
||
...utilityModalShellStyle,
|
||
height: 'min(760px, calc(100vh - 80px))',
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
},
|
||
header: { background: 'transparent', borderBottom: 'none', paddingBottom: 8 },
|
||
body: { paddingTop: 8, overflow: 'hidden', flex: 1, minHeight: 0 },
|
||
footer: { background: 'transparent', borderTop: 'none', paddingTop: 10 }
|
||
}}
|
||
footer={[
|
||
<Button
|
||
key="reset"
|
||
onClick={() => {
|
||
resetShortcutOptions();
|
||
setCapturingShortcutAction(null);
|
||
void message.success(t('app.shortcuts.message.restored_defaults'));
|
||
}}
|
||
>
|
||
{t('app.shortcuts.action.restore_defaults')}
|
||
</Button>,
|
||
<Button
|
||
key="close"
|
||
type="primary"
|
||
onClick={() => {
|
||
setIsShortcutModalOpen(false);
|
||
setCapturingShortcutAction(null);
|
||
}}
|
||
>
|
||
{t('common.close')}
|
||
</Button>,
|
||
toolCenterBackGroupKey === 'workspace' ? (
|
||
<Button
|
||
key="back"
|
||
onClick={() => handleReturnToToolCenter(() => {
|
||
setIsShortcutModalOpen(false);
|
||
setCapturingShortcutAction(null);
|
||
})}
|
||
>
|
||
{t('common.back_to_previous')}
|
||
</Button>
|
||
) : null,
|
||
]}
|
||
>
|
||
<div data-gonavi-shortcut-modal-scroll="true" style={{ height: '100%', overflowY: 'auto', overflowX: 'hidden', display: 'flex', flexDirection: 'column', gap: 16, paddingTop: 8, paddingRight: 8 }}>
|
||
<div style={utilityPanelStyle}>
|
||
<div style={{ fontSize: 12, color: darkMode ? 'rgba(255,255,255,0.5)' : 'rgba(16,24,40,0.55)' }}>
|
||
{t('app.shortcuts.capture_hint')}
|
||
</div>
|
||
</div>
|
||
{SHORTCUT_ACTION_ORDER.map((action) => {
|
||
const meta = SHORTCUT_ACTION_META[action];
|
||
if (meta.platformOnly === 'mac' && !isMacRuntime) {
|
||
return null;
|
||
}
|
||
const binding = resolveShortcutBinding(shortcutOptions, action, activeShortcutPlatform);
|
||
const isCapturing = capturingShortcutAction === action;
|
||
const conflicts = shortcutConflictMap[action];
|
||
const conflictInfo = conflicts?.length ? splitConflictsByContext(conflicts) : null;
|
||
return (
|
||
<div
|
||
key={action}
|
||
style={{
|
||
...utilityPanelStyle,
|
||
display: 'grid',
|
||
gridTemplateColumns: '1fr auto',
|
||
gap: 12,
|
||
alignItems: 'center',
|
||
padding: '10px 12px',
|
||
}}
|
||
>
|
||
<div>
|
||
<div style={{ fontWeight: 500 }}>{meta.label}</div>
|
||
<div style={{ fontSize: 12, color: darkMode ? 'rgba(255,255,255,0.5)' : 'rgba(16,24,40,0.55)' }}>{meta.description}</div>
|
||
{conflictInfo && (
|
||
<div style={{ fontSize: 11, color: darkMode ? '#faad14' : '#d48806', marginTop: 2 }}>
|
||
{conflictInfo.hasMonaco && (
|
||
<>⚠ {t('app.shortcuts.message.reserved_conflict_info', { labels: conflictInfo.monacoLabels })}</>
|
||
)}
|
||
{conflictInfo.hasOther && (
|
||
<>⚠ {t('app.shortcuts.message.reserved_conflict_warning', { contexts: conflictInfo.otherContexts, labels: conflictInfo.otherLabels })}</>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||
<Input
|
||
readOnly
|
||
value={isCapturing ? t('app.shortcuts.capture_waiting') : getShortcutDisplayLabel(binding.combo, activeShortcutPlatform)}
|
||
style={{ width: 180, fontFamily: resolvedMonoFontFamily }}
|
||
/>
|
||
<Button
|
||
size="small"
|
||
onClick={() => setCapturingShortcutAction((prev) => (prev === action ? null : action))}
|
||
>
|
||
{isCapturing ? t('common.cancel') : t('app.shortcuts.action.record')}
|
||
</Button>
|
||
<Switch
|
||
checked={binding.enabled}
|
||
onChange={(checked) => updateShortcut(action, { enabled: checked }, activeShortcutPlatform)}
|
||
/>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</Modal>
|
||
)}
|
||
{isSnippetModalOpen && (
|
||
<SnippetSettingsModal
|
||
open={isSnippetModalOpen}
|
||
onClose={() => {
|
||
setIsSnippetModalOpen(false);
|
||
setToolCenterBackGroupKey(null);
|
||
}}
|
||
onBack={toolCenterBackGroupKey === 'workspace' ? () => handleReturnToToolCenter(() => setIsSnippetModalOpen(false)) : undefined}
|
||
darkMode={darkMode}
|
||
overlayTheme={overlayTheme}
|
||
/>
|
||
)}
|
||
{isProxyModalOpen && (
|
||
<Modal
|
||
title={renderUtilityModalTitle(<GlobalOutlined />, t('app.proxy.title'), t('app.proxy.description'))}
|
||
open={isProxyModalOpen}
|
||
onCancel={handleCloseGlobalProxySettings}
|
||
footer={null}
|
||
width={680}
|
||
styles={{ content: utilityModalShellStyle, header: { background: 'transparent', borderBottom: 'none', paddingBottom: 8 }, body: { paddingTop: 8 }, footer: { background: 'transparent', borderTop: 'none', paddingTop: 10 } }}
|
||
>
|
||
{renderProxySettingsContent()}
|
||
</Modal>
|
||
)}
|
||
|
||
<Modal
|
||
title={updateDownloadProgress.version
|
||
? t('app.about.download_progress.title_with_version', { version: updateDownloadProgress.version })
|
||
: t('app.about.download_progress.title')}
|
||
open={updateDownloadProgress.open}
|
||
closable
|
||
maskClosable
|
||
keyboard
|
||
onCancel={hideUpdateDownloadProgress}
|
||
footer={updateDownloadProgress.status === 'start' || updateDownloadProgress.status === 'downloading' ? [
|
||
<Button
|
||
key="background"
|
||
onClick={() => {
|
||
markUpdateProgressDismissed();
|
||
hideUpdateDownloadProgress();
|
||
}}
|
||
>
|
||
{t('app.about.action.hide_to_background')}
|
||
</Button>
|
||
] : (updateDownloadProgress.status === 'done' ? [
|
||
<Button key="close" onClick={hideUpdateDownloadProgress}>{t('common.close')}</Button>,
|
||
<Button key="open-install-directory" onClick={openDownloadedUpdateDirectory}>
|
||
{t('app.about.action.open_install_directory')}
|
||
</Button>,
|
||
<Button key="restart" type="primary" onClick={handleInstallFromProgress}>
|
||
{t('app.about.action.restart_to_update')}
|
||
</Button>
|
||
] : (updateDownloadProgress.status === 'error' ? [
|
||
<Button key="close" onClick={hideUpdateDownloadProgress}>{t('common.close')}</Button>
|
||
] : null))}
|
||
>
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
|
||
<Progress
|
||
percent={Math.round(updateDownloadProgress.percent)}
|
||
status={updateDownloadProgress.status === 'error' ? 'exception' : (updateDownloadProgress.status === 'done' ? 'success' : 'active')}
|
||
/>
|
||
<div style={{ fontSize: 12, color: darkMode ? 'rgba(255,255,255,0.5)' : 'rgba(16,24,40,0.55)' }}>
|
||
{updateDownloadProgress.status === 'done'
|
||
? t('app.about.download_progress.complete_hint')
|
||
: `${formatBytes(updateDownloadProgress.downloaded)} / ${formatBytes(updateDownloadProgress.total)}`}
|
||
</div>
|
||
{updateDownloadProgress.message ? (
|
||
<div style={{
|
||
fontSize: 12,
|
||
color: updateDownloadProgress.status === 'error'
|
||
? '#ff4d4f'
|
||
: (darkMode ? 'rgba(255,255,255,0.65)' : 'rgba(16,24,40,0.65)'),
|
||
}}
|
||
>
|
||
{updateDownloadProgress.message}
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
</Modal>
|
||
|
||
{showLinuxResizeHandles && (
|
||
<>
|
||
{/* Linux Mint 下 frameless 仅局部可缩放：补四边四角命中层 */}
|
||
<div style={{ ...linuxResizeHandleStyleBase, top: 0, left: 14, right: 14, height: 6, cursor: 'ns-resize' }} />
|
||
<div style={{ ...linuxResizeHandleStyleBase, bottom: 0, left: 14, right: 14, height: 6, cursor: 'ns-resize' }} />
|
||
<div style={{ ...linuxResizeHandleStyleBase, top: 14, bottom: 14, left: 0, width: 6, cursor: 'ew-resize' }} />
|
||
<div style={{ ...linuxResizeHandleStyleBase, top: 14, bottom: 14, right: 0, width: 6, cursor: 'ew-resize' }} />
|
||
|
||
<div style={{ ...linuxResizeHandleStyleBase, top: 0, left: 0, width: 14, height: 14, cursor: 'nwse-resize' }} />
|
||
<div style={{ ...linuxResizeHandleStyleBase, top: 0, right: 0, width: 14, height: 14, cursor: 'nesw-resize' }} />
|
||
<div style={{ ...linuxResizeHandleStyleBase, bottom: 0, left: 0, width: 14, height: 14, cursor: 'nesw-resize' }} />
|
||
<div style={{ ...linuxResizeHandleStyleBase, bottom: 0, right: 0, width: 14, height: 14, cursor: 'nwse-resize' }} />
|
||
</>
|
||
)}
|
||
|
||
{/* Ghost Resize Line for Sidebar */}
|
||
<div
|
||
ref={ghostRef}
|
||
style={{
|
||
position: 'fixed',
|
||
top: 0,
|
||
bottom: 0,
|
||
left: 0,
|
||
width: '4px',
|
||
background: resizeGuideColor,
|
||
zIndex: 9999,
|
||
pointerEvents: 'none',
|
||
display: 'none'
|
||
}}
|
||
/>
|
||
|
||
{/* Ghost Resize Line for Log Panel */}
|
||
<div
|
||
ref={logGhostRef}
|
||
style={{
|
||
position: 'fixed',
|
||
left: sidebarWidth, // Start from sidebar edge
|
||
right: 0,
|
||
height: '4px',
|
||
background: resizeGuideColor,
|
||
zIndex: 9999,
|
||
pointerEvents: 'none',
|
||
display: 'none',
|
||
cursor: 'row-resize'
|
||
}}
|
||
/>
|
||
</Layout>
|
||
</ConfigProvider>
|
||
);
|
||
}
|
||
|
||
export default App;
|