fix: 修复工作空间设置白屏 — DialogActions 未导入 + 加 ErrorBoundary
根因:WorkspaceSettings 的重启确认 Dialog 内使用了 DialogActions,但未在 import 中声明,运行时为 undefined,React.createElement(undefined) 抛错导致整个应用白屏 修复:1) 补充 DialogActions 导入;2) 给每个设置 Tab 包 ErrorBoundary,避免单 tab 渲染失败导致整体白屏
This commit is contained in:
@@ -3,12 +3,13 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import { useState, useEffect, useCallback } from 'react';
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
import { Dialog, DialogContent, DialogTitle, Button, TextField, Select, MenuItem, Tabs, Tab, Checkbox, Box, Typography, Stack, Divider, FormControlLabel, InputLabel, FormControl, IconButton, Chip, Switch, Alert, CircularProgress } from '@mui/material';
|
import { Dialog, DialogContent, DialogTitle, DialogActions, Button, TextField, Select, MenuItem, Tabs, Tab, Checkbox, Box, Typography, Stack, Divider, FormControlLabel, InputLabel, FormControl, IconButton, Chip, Switch, Alert, CircularProgress } from '@mui/material';
|
||||||
import { alpha } from '@mui/material/styles';
|
import { alpha } from '@mui/material/styles';
|
||||||
import { X, Settings, Bot, Wrench, Server, Palette, FileText, Eye, EyeOff, FolderOpen, Globe } from 'lucide-react';
|
import { X, Settings, Bot, Wrench, Server, Palette, FileText, Eye, EyeOff, FolderOpen, Globe } from 'lucide-react';
|
||||||
import { useUIStore, type ThemeMode } from '@renderer/stores/ui-store';
|
import { useUIStore, type ThemeMode } from '@renderer/stores/ui-store';
|
||||||
import { useAgentStore } from '@renderer/stores/agent-store';
|
import { useAgentStore } from '@renderer/stores/agent-store';
|
||||||
import { PROVIDER_LABELS } from '@renderer/lib/constants';
|
import { PROVIDER_LABELS } from '@renderer/lib/constants';
|
||||||
|
import { ErrorBoundary } from '@renderer/components/common/ErrorBoundary';
|
||||||
|
|
||||||
type SettingsTab = 'workspace' | 'llm' | 'agent' | 'tools' | 'mcp' | 'searxng' | 'appearance' | 'logs';
|
type SettingsTab = 'workspace' | 'llm' | 'agent' | 'tools' | 'mcp' | 'searxng' | 'appearance' | 'logs';
|
||||||
const TABS: { id: SettingsTab; label: string; icon: typeof Settings }[] = [
|
const TABS: { id: SettingsTab; label: string; icon: typeof Settings }[] = [
|
||||||
@@ -48,14 +49,30 @@ export function SettingsModal(): React.JSX.Element | null {
|
|||||||
{TABS.map((t) => <Tab key={t.id} value={t.id} label={t.label} icon={<t.icon size={14} />} iconPosition="start" />)}
|
{TABS.map((t) => <Tab key={t.id} value={t.id} label={t.label} icon={<t.icon size={14} />} iconPosition="start" />)}
|
||||||
</Tabs>
|
</Tabs>
|
||||||
<Box sx={{ flex: 1, overflowY: 'auto', p: 2.5 }}>
|
<Box sx={{ flex: 1, overflowY: 'auto', p: 2.5 }}>
|
||||||
{tab === 'workspace' && <WorkspaceSettings />}
|
<ErrorBoundary fallbackTitle="工作空间设置渲染失败">
|
||||||
{tab === 'llm' && <LLMSettings />}
|
{tab === 'workspace' && <WorkspaceSettings />}
|
||||||
{tab === 'agent' && <AgentSettings />}
|
</ErrorBoundary>
|
||||||
{tab === 'tools' && <ToolsSettings />}
|
<ErrorBoundary fallbackTitle="LLM 配置渲染失败">
|
||||||
{tab === 'mcp' && <MCPSettings />}
|
{tab === 'llm' && <LLMSettings />}
|
||||||
{tab === 'searxng' && <SearXNGSettings />}
|
</ErrorBoundary>
|
||||||
{tab === 'appearance' && <AppearanceSettings theme={theme} setTheme={setTheme} />}
|
<ErrorBoundary fallbackTitle="Agent 配置渲染失败">
|
||||||
{tab === 'logs' && <LogsSettings />}
|
{tab === 'agent' && <AgentSettings />}
|
||||||
|
</ErrorBoundary>
|
||||||
|
<ErrorBoundary fallbackTitle="工具管理渲染失败">
|
||||||
|
{tab === 'tools' && <ToolsSettings />}
|
||||||
|
</ErrorBoundary>
|
||||||
|
<ErrorBoundary fallbackTitle="MCP 服务渲染失败">
|
||||||
|
{tab === 'mcp' && <MCPSettings />}
|
||||||
|
</ErrorBoundary>
|
||||||
|
<ErrorBoundary fallbackTitle="SearXNG 渲染失败">
|
||||||
|
{tab === 'searxng' && <SearXNGSettings />}
|
||||||
|
</ErrorBoundary>
|
||||||
|
<ErrorBoundary fallbackTitle="外观设置渲染失败">
|
||||||
|
{tab === 'appearance' && <AppearanceSettings theme={theme} setTheme={setTheme} />}
|
||||||
|
</ErrorBoundary>
|
||||||
|
<ErrorBoundary fallbackTitle="日志与数据渲染失败">
|
||||||
|
{tab === 'logs' && <LogsSettings />}
|
||||||
|
</ErrorBoundary>
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
|
|||||||
Reference in New Issue
Block a user