thzxx
4a5ddab80a
背景改用 alpha(success.main, 0.12) 主题感知透明色，文字和按钮保持不透明；左侧加绿色状态条 + 圆点指示；取消自动按钮改为 contained error（危险动作更醒目）；统一按钮字号 11、minWidth 72
813 lines
41 KiB
TypeScript
813 lines
41 KiB
TypeScript
/**
|
||
* SettingsModal — 设置弹窗
|
||
*/
|
||
|
||
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 { alpha } from '@mui/material/styles';
|
||
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 { useAgentStore } from '@renderer/stores/agent-store';
|
||
import { PROVIDER_LABELS } from '@renderer/lib/constants';
|
||
|
||
type SettingsTab = 'workspace' | 'llm' | 'agent' | 'tools' | 'mcp' | 'searxng' | 'appearance' | 'logs';
|
||
const TABS: { id: SettingsTab; label: string; icon: typeof Settings }[] = [
|
||
{ id: 'workspace', label: '工作空间', icon: FolderOpen },
|
||
{ id: 'llm', label: 'LLM 配置', icon: Bot }, { id: 'agent', label: 'Agent 配置', icon: Settings },
|
||
{ id: 'tools', label: '工具管理', icon: Wrench }, { id: 'mcp', label: 'MCP 服务', icon: Server },
|
||
{ id: 'searxng', label: 'SearXNG', icon: Globe },
|
||
{ id: 'appearance', label: '外观', icon: Palette }, { id: 'logs', label: '日志与数据', icon: FileText },
|
||
];
|
||
|
||
export function SettingsModal(): React.JSX.Element | null {
|
||
const settingsOpen = useUIStore((s) => s.settingsOpen);
|
||
const closeSettings = useUIStore((s) => s.closeSettings);
|
||
const theme = useUIStore((s) => s.theme);
|
||
const setTheme = useUIStore((s) => s.setTheme);
|
||
const [tab, setTab] = useState<SettingsTab>('llm');
|
||
if (!settingsOpen) return null;
|
||
|
||
return (
|
||
<Dialog open onClose={closeSettings} maxWidth="md" fullWidth slotProps={{ paper: { sx: { maxWidth: 640, height: '80vh', borderRadius: 3, display: 'flex', flexDirection: 'column' } } }}>
|
||
<Stack direction="row" sx={{ px: 2.5, py: 1.5, borderBottom: 1, borderColor: 'divider', justifyContent: 'space-between', alignItems: 'center' }}>
|
||
<Typography variant="h6">设置</Typography>
|
||
<IconButton size="small" onClick={closeSettings}><X size={14} /></IconButton>
|
||
</Stack>
|
||
<Box sx={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
|
||
<Tabs orientation="vertical" value={tab} onChange={(_, v) => setTab(v)}
|
||
sx={{
|
||
borderRight: 1, borderColor: 'divider', minWidth: 130,
|
||
'& .MuiTab-root': {
|
||
alignItems: 'center', fontSize: 12,
|
||
textTransform: 'none', gap: '2px', px: 2, justifyContent: 'flex-start',
|
||
minHeight: 40,
|
||
},
|
||
'& .MuiTab-iconWrapper': { display: 'flex', alignItems: 'center', marginRight: 0 },
|
||
}}
|
||
>
|
||
{TABS.map((t) => <Tab key={t.id} value={t.id} label={t.label} icon={<t.icon size={14} />} iconPosition="start" />)}
|
||
</Tabs>
|
||
<Box sx={{ flex: 1, overflowY: 'auto', p: 2.5 }}>
|
||
{tab === 'workspace' && <WorkspaceSettings />}
|
||
{tab === 'llm' && <LLMSettings />}
|
||
{tab === 'agent' && <AgentSettings />}
|
||
{tab === 'tools' && <ToolsSettings />}
|
||
{tab === 'mcp' && <MCPSettings />}
|
||
{tab === 'searxng' && <SearXNGSettings />}
|
||
{tab === 'appearance' && <AppearanceSettings theme={theme} setTheme={setTheme} />}
|
||
{tab === 'logs' && <LogsSettings />}
|
||
</Box>
|
||
</Box>
|
||
</Dialog>
|
||
);
|
||
}
|
||
|
||
function useConfig<T>(key: string, defaultValue: T): [T, (v: T) => void] {
|
||
const [value, setValue] = useState<T>(defaultValue);
|
||
useEffect(() => { if (window.metona?.config?.get) window.metona.config.get(key).then((v) => { if (v != null) setValue(v as T); }).catch((err) => { console.error('[SettingsModal]', err); }); }, [key]);
|
||
const set = useCallback((v: T) => { setValue(v); window.metona?.config?.set(key, v).catch((err) => { console.error('[SettingsModal]', err); }); }, [key]);
|
||
return [value, set];
|
||
}
|
||
|
||
const PROVIDER_URLS: Record<string, string> = { deepseek: 'https://api.deepseek.com', agnes: 'https://apihub.agnes-ai.com/v1', ollama: 'http://localhost:11434' };
|
||
|
||
function WorkspaceSettings() {
|
||
const [workspacePath, setWorkspacePath] = useConfig('workspace.path', '');
|
||
// 切换工作空间的中间状态
|
||
const [pendingPath, setPendingPath] = useState<string | null>(null);
|
||
const [checkResult, setCheckResult] = useState<MetonaWorkspaceCheckResult | null>(null);
|
||
const [checking, setChecking] = useState(false);
|
||
const [inheritSoul, setInheritSoul] = useState(true);
|
||
const [inheritAgents, setInheritAgents] = useState(true);
|
||
const [inheritUsers, setInheritUsers] = useState(true);
|
||
const [applying, setApplying] = useState(false);
|
||
const [showRestartDialog, setShowRestartDialog] = useState(false);
|
||
|
||
const currentPath = workspacePath;
|
||
|
||
const handleSelect = async () => {
|
||
if (!window.metona?.app?.selectFolder) return;
|
||
const r = await window.metona.app.selectFolder(currentPath || undefined);
|
||
if (!r.canceled && r.path) {
|
||
// 立即校验新路径
|
||
setPendingPath(r.path);
|
||
setChecking(true);
|
||
setCheckResult(null);
|
||
try {
|
||
const result = await window.metona.workspace.check(r.path);
|
||
setCheckResult(result);
|
||
} catch (err) {
|
||
console.error('[SettingsModal]', err);
|
||
setCheckResult({ valid: false, reason: (err as Error).message });
|
||
} finally {
|
||
setChecking(false);
|
||
}
|
||
}
|
||
};
|
||
|
||
const handleApply = async () => {
|
||
if (!pendingPath || !checkResult?.valid) return;
|
||
setApplying(true);
|
||
try {
|
||
// 如果勾选了继承文件，从旧工作空间复制到新工作空间
|
||
const filesToInherit: string[] = [];
|
||
if (inheritSoul) filesToInherit.push('SOUL.md');
|
||
if (inheritAgents) filesToInherit.push('AGENTS.md');
|
||
if (inheritUsers) filesToInherit.push('USERS.md');
|
||
|
||
if (filesToInherit.length > 0 && currentPath) {
|
||
try {
|
||
await window.metona.workspace.inheritFiles({
|
||
targetPath: pendingPath,
|
||
sourcePath: currentPath,
|
||
files: filesToInherit,
|
||
});
|
||
} catch (err) {
|
||
console.error('[SettingsModal] Inherit failed:', err);
|
||
}
|
||
}
|
||
|
||
// 保存新路径到配置
|
||
setWorkspacePath(pendingPath);
|
||
// 弹出重启确认对话框
|
||
setShowRestartDialog(true);
|
||
// 清理中间状态
|
||
setPendingPath(null);
|
||
setCheckResult(null);
|
||
} catch (err) {
|
||
console.error('[SettingsModal]', err);
|
||
} finally {
|
||
setApplying(false);
|
||
}
|
||
};
|
||
|
||
const handleCancel = () => {
|
||
setPendingPath(null);
|
||
setCheckResult(null);
|
||
};
|
||
|
||
const handleOpen = () => { if (workspacePath) window.metona?.app?.showItemInFolder(workspacePath); };
|
||
|
||
return (
|
||
<Stack spacing={2}>
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600 }}>工作空间</Typography>
|
||
<Typography variant="body2" sx={{ color: 'text.secondary' }}>工作空间是 Metona 的组织核心，包含 SOUL.md、AGENTS.md、MEMORY.md、USERS.md 四个必需文件。</Typography>
|
||
<Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
|
||
<TextField size="small" value={workspacePath} onChange={(e) => setWorkspacePath(e.target.value)} placeholder="~/MetonaWorkspaces/default/" sx={{ flex: 1 }} />
|
||
<Button variant="outlined" size="small" onClick={handleSelect}>选择文件夹</Button>
|
||
</Stack>
|
||
{workspacePath && (
|
||
<Button variant="text" size="small" onClick={handleOpen} sx={{ alignSelf: 'flex-start', fontSize: 11, color: 'text.secondary' }}>
|
||
📂 在文件管理器中打开
|
||
</Button>
|
||
)}
|
||
|
||
{/* 校验中状态 */}
|
||
{checking && (
|
||
<Stack direction="row" spacing={1} sx={{ alignItems: 'center', py: 1 }}>
|
||
<CircularProgress size={14} />
|
||
<Typography variant="caption" sx={{ color: 'text.secondary' }}>正在校验工作空间...</Typography>
|
||
</Stack>
|
||
)}
|
||
|
||
{/* 校验失败 */}
|
||
{pendingPath && checkResult && !checkResult.valid && (
|
||
<Alert severity="error" sx={{ py: 0.5 }}>
|
||
<Typography variant="caption">路径无效：{checkResult.reason}</Typography>
|
||
<Stack direction="row" spacing={1} sx={{ mt: 1 }}>
|
||
<Button size="small" onClick={handleCancel}>取消</Button>
|
||
</Stack>
|
||
</Alert>
|
||
)}
|
||
|
||
{/* 校验成功 — 显示工作空间状态 + 继承选项 */}
|
||
{pendingPath && checkResult?.valid && (
|
||
<Stack spacing={1.5} sx={{ p: 1.5, borderRadius: 1.5, bgcolor: 'background.default', border: '1px solid', borderColor: 'divider' }}>
|
||
<Typography variant="caption" sx={{ fontWeight: 600, color: 'text.primary' }}>
|
||
目标工作空间：{checkResult.path}
|
||
</Typography>
|
||
|
||
{checkResult.isNewWorkspace ? (
|
||
<Alert severity="info" sx={{ py: 0.5, '& .MuiAlert-message': { fontSize: 12 } }}>
|
||
新工作空间 — 切换后将自动创建 4 个必需文件（SOUL.md、AGENTS.md、MEMORY.md、USERS.md）
|
||
</Alert>
|
||
) : checkResult.missingFiles && checkResult.missingFiles.length > 0 ? (
|
||
<Alert severity="warning" sx={{ py: 0.5, '& .MuiAlert-message': { fontSize: 12 } }}>
|
||
已有目录但缺少 {checkResult.missingFiles.length} 个文件：{checkResult.missingFiles.join(', ')}。缺失文件将自动创建。
|
||
</Alert>
|
||
) : (
|
||
<Alert severity="success" sx={{ py: 0.5, '& .MuiAlert-message': { fontSize: 12 } }}>
|
||
已有工作空间 — 4 个必需文件均已就绪，将直接加载现有配置。
|
||
</Alert>
|
||
)}
|
||
|
||
{/* 继承选项（仅当当前有工作空间且新工作空间需要创建文件时显示） */}
|
||
{currentPath && currentPath !== pendingPath && (checkResult.isNewWorkspace || (checkResult.missingFiles && checkResult.missingFiles.length > 0)) && (
|
||
<Stack spacing={0.5} sx={{ mt: 0.5 }}>
|
||
<Typography variant="caption" sx={{ fontWeight: 600, color: 'text.secondary' }}>
|
||
从当前工作空间继承基础设置：
|
||
</Typography>
|
||
<FormControlLabel
|
||
control={<Checkbox size="small" checked={inheritSoul} onChange={(e) => setInheritSoul(e.target.checked)} />}
|
||
label={<Typography variant="caption">SOUL.md（身份与角色定义）</Typography>}
|
||
/>
|
||
<FormControlLabel
|
||
control={<Checkbox size="small" checked={inheritAgents} onChange={(e) => setInheritAgents(e.target.checked)} />}
|
||
label={<Typography variant="caption">AGENTS.md（行为规则）</Typography>}
|
||
/>
|
||
<FormControlLabel
|
||
control={<Checkbox size="small" checked={inheritUsers} onChange={(e) => setInheritUsers(e.target.checked)} />}
|
||
label={<Typography variant="caption">USERS.md（用户画像）</Typography>}
|
||
/>
|
||
<Typography variant="caption" sx={{ color: 'text.disabled', fontSize: 10, pl: 3 }}>
|
||
MEMORY.md 不继承（记忆与工作空间项目上下文绑定）
|
||
</Typography>
|
||
</Stack>
|
||
)}
|
||
|
||
<Stack direction="row" spacing={1} sx={{ mt: 1 }}>
|
||
<Button
|
||
variant="contained"
|
||
size="small"
|
||
onClick={handleApply}
|
||
disabled={applying}
|
||
startIcon={applying ? <CircularProgress size={12} /> : undefined}
|
||
>
|
||
{applying ? '应用中...' : '确认切换'}
|
||
</Button>
|
||
<Button variant="outlined" size="small" onClick={handleCancel} disabled={applying}>
|
||
取消
|
||
</Button>
|
||
</Stack>
|
||
</Stack>
|
||
)}
|
||
|
||
<Typography variant="caption" sx={{ color: 'text.disabled' }}>修改工作空间路径后需重启应用生效。</Typography>
|
||
|
||
{/* 重启确认对话框 */}
|
||
<Dialog open={showRestartDialog} onClose={() => setShowRestartDialog(false)} maxWidth="xs" fullWidth>
|
||
<DialogTitle sx={{ fontSize: 14 }}>工作空间已切换</DialogTitle>
|
||
<DialogContent>
|
||
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
|
||
工作空间已更新为：
|
||
</Typography>
|
||
<Typography variant="body2" sx={{ fontFamily: 'monospace', fontSize: 12, mt: 0.5, p: 1, borderRadius: 1, bgcolor: 'background.default' }}>
|
||
{workspacePath}
|
||
</Typography>
|
||
<Typography variant="body2" sx={{ mt: 1.5, color: 'text.secondary' }}>
|
||
需要重启应用以加载新工作空间的配置和文件。是否立即重启？
|
||
</Typography>
|
||
</DialogContent>
|
||
<DialogActions>
|
||
<Button size="small" onClick={() => setShowRestartDialog(false)}>稍后手动重启</Button>
|
||
<Button size="small" variant="contained" color="primary" onClick={() => window.metona?.app?.restart()}>立即重启</Button>
|
||
</DialogActions>
|
||
</Dialog>
|
||
</Stack>
|
||
);
|
||
}
|
||
|
||
function LLMSettings() {
|
||
const [provider, setProvider] = useConfig('llm.provider', '');
|
||
const [model, setModel] = useConfig('llm.model', '');
|
||
const [apiKey, setApiKey] = useConfig('llm.apiKey', '');
|
||
const [baseURL, setBaseURL] = useConfig('llm.baseURL', '');
|
||
const [numCtx, setNumCtx] = useConfig('ollama.numCtx', null as number | null);
|
||
const [showKey, setShowKey] = useState(false);
|
||
|
||
// 同步 Provider/Model 到 Agent Store（含 contextWindow）
|
||
useEffect(() => {
|
||
useAgentStore.getState().setProvider(provider, model);
|
||
}, [provider, model]);
|
||
|
||
// Ollama numCtx 变化时同步 contextWindow
|
||
useEffect(() => {
|
||
if (provider === 'ollama' && numCtx != null && numCtx > 0) {
|
||
useAgentStore.setState({ contextWindow: numCtx });
|
||
}
|
||
}, [provider, numCtx]);
|
||
|
||
// 切换 Provider 时自动填充默认 URL + 清空 apiKey（不同 Provider 的 key 不通用）
|
||
const handleProviderChange = (newProvider: string) => {
|
||
const oldProvider = provider;
|
||
setProvider(newProvider);
|
||
// 切换 Provider 时清空 apiKey（不同 Provider 的 key 格式不同，避免用旧 key 调用新 API 导致 401）
|
||
// Ollama 不需要 apiKey，也一并清空
|
||
if (oldProvider !== newProvider && apiKey) {
|
||
setApiKey('');
|
||
}
|
||
// 自动填充默认 URL（仅在 URL 为空或与旧 provider 默认 URL 匹配时）
|
||
const currentUrl = baseURL.trim();
|
||
const isDefaultUrl = Object.values(PROVIDER_URLS).includes(currentUrl);
|
||
if (isDefaultUrl || !currentUrl) {
|
||
setBaseURL(PROVIDER_URLS[newProvider] ?? '');
|
||
}
|
||
};
|
||
|
||
return (
|
||
<Stack spacing={2}>
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600 }}>LLM 配置</Typography>
|
||
<FormControl size="small"><InputLabel>Provider</InputLabel>
|
||
<Select value={provider} label="Provider" onChange={(e) => handleProviderChange(e.target.value)}>
|
||
<MenuItem value="deepseek">DeepSeek</MenuItem>
|
||
<MenuItem value="agnes">Agnes AI</MenuItem>
|
||
<MenuItem value="ollama">Ollama (本地)</MenuItem>
|
||
</Select>
|
||
</FormControl>
|
||
<TextField size="small" label="API Base URL" value={baseURL} onChange={(e) => setBaseURL(e.target.value)} placeholder="如 https://api.deepseek.com" />
|
||
<TextField size="small" label="模型名称" value={model} onChange={(e) => setModel(e.target.value)} placeholder="如 deepseek-v4-pro、qwen3:latest" />
|
||
{provider !== 'ollama' && (
|
||
<>
|
||
<TextField size="small" label="API Key" type={showKey ? 'text' : 'password'} value={apiKey} onChange={(e) => setApiKey(e.target.value)} placeholder="sk-..."
|
||
slotProps={{ input: { endAdornment: <IconButton size="small" onClick={() => setShowKey(!showKey)}>{showKey ? <EyeOff size={14} /> : <Eye size={14} />}</IconButton> } }}
|
||
/>
|
||
{!apiKey && (
|
||
<Typography variant="caption" sx={{ color: 'warning.main', fontSize: 11 }}>
|
||
⚠ 请输入 {PROVIDER_LABELS[provider] ?? provider} 的 API Key，否则发送消息会报错
|
||
</Typography>
|
||
)}
|
||
</>
|
||
)}
|
||
{provider === 'ollama' && (
|
||
<TextField
|
||
size="small"
|
||
label="上下文长度 (num_ctx)"
|
||
type="number"
|
||
value={numCtx ?? ''}
|
||
onChange={(e) => {
|
||
const v = e.target.value;
|
||
setNumCtx(v === '' ? null : Number(v));
|
||
}}
|
||
placeholder="默认由模型决定（如 2048、4096、128000）"
|
||
slotProps={{ htmlInput: { min: 512, step: 512 } }}
|
||
/>
|
||
)}
|
||
</Stack>
|
||
);
|
||
}
|
||
|
||
function AgentSettings() {
|
||
const [maxIter, setMaxIter] = useConfig('agent.maxIterations', 20);
|
||
const [timeout, setTimeout_] = useConfig('agent.totalTimeoutMs', 600000);
|
||
const [thinking, setThinking] = useConfig('agent.enableThinking', true);
|
||
const [thinkingEffort, setThinkingEffort] = useConfig('agent.thinkingEffort', 'high');
|
||
const [confirmTimeout, setConfirmTimeout] = useConfig('agent.confirmationTimeoutMs', 120000);
|
||
|
||
const MAX_ITER_OPTIONS = [10, 20, 50, 85, 128, 256, 512];
|
||
|
||
return (
|
||
<Stack spacing={2}>
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600 }}>Agent 配置</Typography>
|
||
<FormControl size="small">
|
||
<InputLabel>最大迭代次数</InputLabel>
|
||
<Select value={maxIter} label="最大迭代次数" onChange={(e) => setMaxIter(e.target.value as number)}>
|
||
{MAX_ITER_OPTIONS.map((n) => (
|
||
<MenuItem key={n} value={n}>{n}</MenuItem>
|
||
))}
|
||
</Select>
|
||
</FormControl>
|
||
<TextField
|
||
size="small"
|
||
label="总超时（秒）"
|
||
type="number"
|
||
value={timeout / 1000}
|
||
onChange={(e) => {
|
||
const v = Number(e.target.value);
|
||
if (v >= 120 && v <= 3600) setTimeout_(v * 1000);
|
||
}}
|
||
slotProps={{ htmlInput: { min: 120, max: 3600, step: 30 } }}
|
||
/>
|
||
<TextField
|
||
size="small"
|
||
label="工具确认超时（秒）"
|
||
type="number"
|
||
value={confirmTimeout / 1000}
|
||
onChange={(e) => {
|
||
const v = Number(e.target.value);
|
||
if (v >= 30 && v <= 600) setConfirmTimeout(v * 1000);
|
||
}}
|
||
slotProps={{ htmlInput: { min: 30, max: 600, step: 10 } }}
|
||
helperText="用户未响应工具确认时，超时自动视为拒绝（30~600 秒）"
|
||
/>
|
||
<FormControlLabel control={<Checkbox checked={thinking} onChange={(e) => setThinking(e.target.checked)} size="small" />} label={<Typography variant="body2">启用思考模式</Typography>} />
|
||
{thinking && (
|
||
<FormControl size="small"><InputLabel>思考强度</InputLabel>
|
||
<Select value={thinkingEffort} label="思考强度" onChange={(e) => setThinkingEffort(e.target.value)}>
|
||
<MenuItem value="low">Low</MenuItem><MenuItem value="medium">Medium</MenuItem><MenuItem value="high">High</MenuItem><MenuItem value="max">Max</MenuItem>
|
||
</Select>
|
||
</FormControl>
|
||
)}
|
||
</Stack>
|
||
);
|
||
}
|
||
|
||
function ToolsSettings() {
|
||
const [tools, setTools] = useState<Array<{ name: string; description: string; riskLevel: string; requiresPermission: boolean; enabled: boolean }>>([]);
|
||
const [autoExecList, setAutoExecList] = useState<string[]>([]);
|
||
|
||
const loadTools = () => {
|
||
if (window.metona?.tools?.list) {
|
||
window.metona.tools.list().then((l) => setTools((l as MetonaToolInfo[]).map((t) => ({
|
||
name: t.name, description: t.description, riskLevel: t.riskLevel,
|
||
requiresPermission: t.requiresPermission, enabled: t.enabled,
|
||
})))).catch((err) => { console.error('[SettingsModal]', err); });
|
||
}
|
||
};
|
||
const loadAutoExec = () => {
|
||
if (window.metona?.tool?.getAutoExecuteList) {
|
||
window.metona.tool.getAutoExecuteList().then((r) => {
|
||
if (r.success) setAutoExecList(r.data);
|
||
}).catch((err) => { console.error('[SettingsModal]', err); });
|
||
}
|
||
};
|
||
useEffect(() => { loadTools(); loadAutoExec(); }, []);
|
||
|
||
const handleToggle = (name: string, enabled: boolean) => {
|
||
setTools((p) => p.map((t) => t.name === name ? { ...t, enabled } : t));
|
||
window.metona?.tools?.toggle(name, enabled).catch((err) => { console.error('[SettingsModal]', err); });
|
||
};
|
||
|
||
// 设置/取消自动执行
|
||
const handleSetAutoExec = async (name: string, enabled: boolean) => {
|
||
if (!window.metona?.tool?.setAutoExecute) return;
|
||
const r = await window.metona.tool.setAutoExecute(name, enabled);
|
||
if (r.success) {
|
||
setAutoExecList((p) => enabled ? [...p, name] : p.filter((n) => n !== name));
|
||
}
|
||
};
|
||
|
||
const riskColors: Record<string, 'success' | 'info' | 'warning' | 'error'> = { safe: 'success', low: 'info', medium: 'warning', high: 'error' };
|
||
|
||
// 需要确认的工具（high/critical 或 requiresPermission）
|
||
const needsConfirmTools = tools.filter((t) =>
|
||
t.riskLevel === 'high' || t.riskLevel === 'critical' || t.requiresPermission,
|
||
);
|
||
// 需要确认但未设为自动执行的工具
|
||
const pendingConfirmTools = needsConfirmTools.filter((t) => !autoExecList.includes(t.name));
|
||
// 已设为自动执行的工具详情
|
||
const autoExecToolDetails = autoExecList
|
||
.map((name) => tools.find((t) => t.name === name))
|
||
.filter((t): t is NonNullable<typeof t> => t !== undefined);
|
||
|
||
return (
|
||
<Stack spacing={2}>
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600 }}>工具管理</Typography>
|
||
{tools.length === 0 ? <Typography variant="caption" sx={{ textAlign: 'center', py: 4, color: 'text.secondary' }}>加载中...</Typography> : tools.map((t) => (
|
||
<Stack key={t.name} direction="row" sx={{ py: 1, px: 1.5, borderRadius: 1.5, bgcolor: 'secondary.main', justifyContent: 'space-between', alignItems: 'center' }}>
|
||
<Stack direction="row" spacing={1} sx={{ minWidth: 0, flex: 1, alignItems: 'center' }}>
|
||
<Typography variant="body2" sx={{ fontFamily: 'monospace', fontSize: 12 }}>{t.name}</Typography>
|
||
<Typography variant="caption" sx={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{t.description.slice(0, 40)}</Typography>
|
||
</Stack>
|
||
<Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
|
||
<Chip label={t.riskLevel.toUpperCase()} size="small" color={riskColors[t.riskLevel]} variant="outlined" sx={{ height: 18, fontSize: 9 }} />
|
||
<Checkbox checked={t.enabled} onChange={(e) => handleToggle(t.name, e.target.checked)} size="small" />
|
||
</Stack>
|
||
</Stack>
|
||
))}
|
||
|
||
<Divider sx={{ my: 1 }} />
|
||
|
||
{/* ===== 自动执行工具管理 ===== */}
|
||
<Stack direction="row" sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600 }}>自动执行工具</Typography>
|
||
<Chip label={`${autoExecList.length} 个`} size="small" color={autoExecList.length > 0 ? 'success' : 'default'} variant="outlined" sx={{ height: 18, fontSize: 10 }} />
|
||
</Stack>
|
||
<Typography variant="caption" sx={{ color: 'text.secondary', lineHeight: 1.5 }}>
|
||
已设为自动执行的工具将跳过用户确认步骤，直接执行。此设置跨会话持久化。
|
||
</Typography>
|
||
|
||
{/* 已自动执行的工具列表 */}
|
||
{autoExecToolDetails.length === 0 ? (
|
||
<Typography variant="caption" sx={{ textAlign: 'center', py: 2, color: 'text.disabled', fontStyle: 'italic' }}>
|
||
暂无自动执行工具
|
||
</Typography>
|
||
) : (
|
||
autoExecToolDetails.map((t) => (
|
||
<Stack
|
||
key={t.name}
|
||
direction="row"
|
||
sx={(theme) => ({
|
||
py: 1, px: 1.5, borderRadius: 1.5,
|
||
// 用主题 success 色的 12% 透明度做底，文字和按钮保持不透明
|
||
bgcolor: alpha(theme.palette.success.main, 0.12),
|
||
// 左侧绿色状态条，强化"已自动执行"视觉
|
||
boxShadow: `inset 3px 0 0 ${theme.palette.success.main}`,
|
||
justifyContent: 'space-between', alignItems: 'center',
|
||
})}
|
||
>
|
||
<Stack direction="row" spacing={1} sx={{ alignItems: 'center', minWidth: 0, flex: 1 }}>
|
||
<Box
|
||
component="span"
|
||
sx={{
|
||
width: 6, height: 6, borderRadius: '50%',
|
||
bgcolor: 'success.main', flexShrink: 0,
|
||
}}
|
||
/>
|
||
<Typography variant="body2" sx={{ fontFamily: 'monospace', fontSize: 12, color: 'text.primary', fontWeight: 600 }}>
|
||
{t.name}
|
||
</Typography>
|
||
<Chip label="自动" size="small" color="success" sx={{ height: 16, fontSize: 9 }} />
|
||
</Stack>
|
||
<Button
|
||
size="small"
|
||
color="error"
|
||
variant="contained"
|
||
sx={{ fontSize: 11, minWidth: 72, fontWeight: 600 }}
|
||
onClick={() => handleSetAutoExec(t.name, false)}
|
||
>
|
||
取消自动
|
||
</Button>
|
||
</Stack>
|
||
))
|
||
)}
|
||
|
||
{/* 可设为自动执行的工具（需要确认但未设置） */}
|
||
{pendingConfirmTools.length > 0 && (
|
||
<>
|
||
<Typography variant="caption" sx={{ fontWeight: 600, color: 'text.secondary', mt: 1 }}>
|
||
可设为自动执行（当前需要确认）
|
||
</Typography>
|
||
{pendingConfirmTools.map((t) => (
|
||
<Stack key={t.name} direction="row" sx={{ py: 1, px: 1.5, borderRadius: 1.5, bgcolor: 'secondary.main', border: '1px dashed', borderColor: 'divider', justifyContent: 'space-between', alignItems: 'center' }}>
|
||
<Stack direction="row" spacing={1} sx={{ alignItems: 'center', minWidth: 0, flex: 1 }}>
|
||
<Typography variant="body2" sx={{ fontFamily: 'monospace', fontSize: 12, color: 'text.primary' }}>{t.name}</Typography>
|
||
<Chip label={t.riskLevel.toUpperCase()} size="small" color={riskColors[t.riskLevel]} variant="outlined" sx={{ height: 16, fontSize: 9 }} />
|
||
</Stack>
|
||
<Button size="small" color="success" variant="contained" sx={{ fontSize: 11, minWidth: 72, fontWeight: 600 }} onClick={() => handleSetAutoExec(t.name, true)}>
|
||
设为自动
|
||
</Button>
|
||
</Stack>
|
||
))}
|
||
</>
|
||
)}
|
||
</Stack>
|
||
);
|
||
}
|
||
|
||
function MCPSettings() {
|
||
const [servers, setServers] = useState<Array<{ name: string; status: string; toolCount: number; error?: string }>>([]);
|
||
const [showAdd, setShowAdd] = useState(false);
|
||
const [newName, setNewName] = useState('');
|
||
const [newCommand, setNewCommand] = useState('');
|
||
const [newArgs, setNewArgs] = useState('');
|
||
const loadServers = () => { if (window.metona?.mcp?.listServers) window.metona.mcp.listServers().then((l) => setServers(l as MetonaMCPServerStatus[])).catch((err) => { console.error('[SettingsModal]', err); }); };
|
||
useEffect(() => { loadServers(); }, []);
|
||
const handleAdd = async () => { if (!newName.trim() || !newCommand.trim()) return; await window.metona?.mcp?.addServer({ name: newName.trim(), transport: 'stdio', command: newCommand.trim(), args: newArgs.trim() ? newArgs.trim().split(/\s+/) : [], enabled: true }); setNewName(''); setNewCommand(''); setNewArgs(''); setShowAdd(false); loadServers(); };
|
||
const statusColors: Record<string, string> = { connected: 'success.main', connecting: 'warning.main', disconnected: 'text.secondary', error: 'error.main' };
|
||
|
||
return (
|
||
<Stack spacing={2}>
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600 }}>MCP 服务</Typography>
|
||
{servers.length === 0 ? <Typography variant="caption" sx={{ textAlign: 'center', py: 4, color: 'text.secondary' }}>暂无 MCP 服务</Typography> : servers.map((s) => (
|
||
<Stack key={s.name} direction="row" sx={{ py: 1, px: 1.5, borderRadius: 1.5, bgcolor: 'secondary.main', justifyContent: 'space-between', alignItems: 'center' }}>
|
||
<Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
|
||
<Box sx={{ width: 8, height: 8, borderRadius: '50', bgcolor: statusColors[s.status] }} />
|
||
<Typography variant="body2" sx={{ fontWeight: 500 }}>{s.name}</Typography>
|
||
<Typography variant="caption" sx={{ color: statusColors[s.status] }}>{s.status}</Typography>
|
||
{s.toolCount > 0 && <Typography variant="caption" sx={{ color: 'text.secondary' }}>{s.toolCount} 工具</Typography>}
|
||
</Stack>
|
||
<Stack direction="row" spacing={0.5}>
|
||
<Button size="small" sx={{ fontSize: 10, minWidth: 40 }} onClick={async () => { await window.metona?.mcp?.toggleServer(s.name, s.status !== 'connected'); loadServers(); }}>{s.status === 'connected' ? '断开' : '连接'}</Button>
|
||
<Button size="small" color="error" sx={{ fontSize: 10, minWidth: 40 }} onClick={async () => { if (confirm(`确定移除 "${s.name}"？`)) { await window.metona?.mcp?.removeServer(s.name); loadServers(); } }}>移除</Button>
|
||
</Stack>
|
||
</Stack>
|
||
))}
|
||
{showAdd ? (
|
||
<Stack spacing={1} sx={{ p: 1.5, borderRadius: 1.5, bgcolor: 'secondary.main', border: '1px solid', borderColor: 'divider' }}>
|
||
<TextField size="small" value={newName} onChange={(e) => setNewName(e.target.value)} placeholder="服务名称" />
|
||
<TextField size="small" value={newCommand} onChange={(e) => setNewCommand(e.target.value)} placeholder="命令路径" />
|
||
<TextField size="small" value={newArgs} onChange={(e) => setNewArgs(e.target.value)} placeholder="参数 (空格分隔)" />
|
||
<Stack direction="row" spacing={1}>
|
||
<Button variant="contained" size="small" onClick={handleAdd} disabled={!newName.trim() || !newCommand.trim()} sx={{ flex: 1 }}>添加</Button>
|
||
<Button variant="outlined" size="small" onClick={() => setShowAdd(false)} sx={{ flex: 1 }}>取消</Button>
|
||
</Stack>
|
||
</Stack>
|
||
) : <Button variant="outlined" fullWidth size="small" onClick={() => setShowAdd(true)}>+ 添加 MCP 服务</Button>}
|
||
</Stack>
|
||
);
|
||
}
|
||
|
||
function SearXNGSettings() {
|
||
// ===== 12 项配置（useConfig 实时持久化） =====
|
||
const [enabled, setEnabled] = useConfig('searxng.enabled', false);
|
||
const [url, setUrl] = useConfig('searxng.url', '');
|
||
const [engines, setEngines] = useConfig('searxng.engines', '');
|
||
const [language, setLanguage] = useConfig('searxng.language', 'zh-CN');
|
||
const [safesearch, setSafesearch] = useConfig('searxng.safesearch', 1);
|
||
const [timeRange, setTimeRange] = useConfig('searxng.time_range', '');
|
||
const [maxResults, setMaxResults] = useConfig('searxng.max_results', 0);
|
||
const [authKey, setAuthKey] = useConfig('searxng.auth_key', '');
|
||
const [authType, setAuthType] = useConfig('searxng.auth_type', 'bearer');
|
||
const [format, setFormat] = useConfig('searxng.format', 'json');
|
||
const [fetchCount, setFetchCount] = useConfig('searxng.fetch_count', 0);
|
||
const [fetchMode, setFetchMode] = useConfig('searxng.fetch_mode', 'sequential');
|
||
|
||
const [showKey, setShowKey] = useState(false);
|
||
const [testing, setTesting] = useState(false);
|
||
const [testResult, setTestResult] = useState<{ success: boolean; message: string } | null>(null);
|
||
|
||
const urlError = !!url && !/^https?:\/\//.test(url);
|
||
|
||
const handleTest = async () => {
|
||
if (!url.trim() || urlError) return;
|
||
setTesting(true);
|
||
setTestResult(null);
|
||
try {
|
||
const result = await window.metona?.searxng?.testConnection(url.trim(), authKey, authType);
|
||
if (result?.success) {
|
||
setTestResult({ success: true, message: `连接成功（${result.latencyMs}ms）` });
|
||
} else {
|
||
setTestResult({ success: false, message: result?.error || `连接失败（HTTP ${result?.statusCode}）` });
|
||
}
|
||
} catch (e) {
|
||
setTestResult({ success: false, message: (e as Error).message });
|
||
}
|
||
setTesting(false);
|
||
};
|
||
|
||
return (
|
||
<Stack spacing={2}>
|
||
{/* 标题 + 状态徽章 */}
|
||
<Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600 }}>SearXNG 元搜索</Typography>
|
||
<Chip label={enabled ? '已启用' : '未启用'} size="small" color={enabled ? 'success' : 'default'} variant={enabled ? 'filled' : 'outlined'} />
|
||
</Stack>
|
||
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
|
||
SearXNG 是开源元搜索引擎，支持 70+ 搜索引擎聚合。启用后替代内置四引擎搜索通道，未启用时回退到 Bing + 百度 + 搜狗 + 360 搜索。
|
||
</Typography>
|
||
|
||
{/* 启用开关 */}
|
||
<FormControlLabel control={<Switch checked={enabled} onChange={(e) => setEnabled(e.target.checked)} size="small" />} label={<Typography variant="body2">启用 SearXNG</Typography>} />
|
||
|
||
<Divider />
|
||
|
||
{/* API 地址 + 连接测试 */}
|
||
<Stack direction="row" spacing={1} sx={{ alignItems: 'flex-start' }}>
|
||
<TextField
|
||
size="small"
|
||
label="API 地址"
|
||
value={url}
|
||
onChange={(e) => setUrl(e.target.value)}
|
||
placeholder="如 https://searxng.example.com"
|
||
error={urlError}
|
||
helperText={urlError ? '需以 http:// 或 https:// 开头' : '实例根地址（不含 /search 路径）'}
|
||
sx={{ flex: 1 }}
|
||
/>
|
||
<Button variant="outlined" size="small" onClick={handleTest} disabled={!url.trim() || urlError || testing} sx={{ mt: 0.5, minWidth: 90, height: 40 }}>
|
||
{testing ? <CircularProgress size={14} /> : '测试连接'}
|
||
</Button>
|
||
</Stack>
|
||
|
||
{/* 测试结果 */}
|
||
{testResult && (
|
||
<Alert severity={testResult.success ? 'success' : 'error'} sx={{ py: 0.5, '& .MuiAlert-message': { fontSize: 12 } }}>
|
||
{testResult.message}
|
||
</Alert>
|
||
)}
|
||
|
||
{/* 搜索引擎 */}
|
||
<TextField
|
||
size="small"
|
||
label="搜索引擎（逗号分隔）"
|
||
value={engines}
|
||
onChange={(e) => setEngines(e.target.value)}
|
||
placeholder="如 google,bing,duckduckgo（留空使用实例默认）"
|
||
/>
|
||
|
||
{/* 语言 + 安全搜索 */}
|
||
<Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 2 }}>
|
||
<FormControl size="small"><InputLabel>语言</InputLabel>
|
||
<Select value={language} label="语言" onChange={(e) => setLanguage(e.target.value)}>
|
||
<MenuItem value="zh-CN">简体中文</MenuItem>
|
||
<MenuItem value="zh-TW">繁體中文</MenuItem>
|
||
<MenuItem value="en">English</MenuItem>
|
||
<MenuItem value="ja">日本語</MenuItem>
|
||
<MenuItem value="ko">한국어</MenuItem>
|
||
<MenuItem value="auto">自动检测</MenuItem>
|
||
</Select>
|
||
</FormControl>
|
||
<FormControl size="small"><InputLabel>安全搜索</InputLabel>
|
||
<Select value={safesearch} label="安全搜索" onChange={(e) => setSafesearch(e.target.value as number)}>
|
||
<MenuItem value={0}>关闭</MenuItem>
|
||
<MenuItem value={1}>中等</MenuItem>
|
||
<MenuItem value={2}>严格</MenuItem>
|
||
</Select>
|
||
</FormControl>
|
||
</Box>
|
||
|
||
{/* 时间范围 + 返回格式 */}
|
||
<Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 2 }}>
|
||
<FormControl size="small"><InputLabel>时间范围</InputLabel>
|
||
<Select value={timeRange} label="时间范围" onChange={(e) => setTimeRange(e.target.value)}>
|
||
<MenuItem value="">不限</MenuItem>
|
||
<MenuItem value="day">一天</MenuItem>
|
||
<MenuItem value="week">一周</MenuItem>
|
||
<MenuItem value="month">一月</MenuItem>
|
||
<MenuItem value="year">一年</MenuItem>
|
||
</Select>
|
||
</FormControl>
|
||
<FormControl size="small"><InputLabel>返回格式</InputLabel>
|
||
<Select value={format} label="返回格式" onChange={(e) => setFormat(e.target.value)}>
|
||
<MenuItem value="json">JSON（结构化解析）</MenuItem>
|
||
<MenuItem value="html">HTML（原始网页）</MenuItem>
|
||
</Select>
|
||
</FormControl>
|
||
</Box>
|
||
|
||
{/* 最大结果数 + 自动抓取条数 */}
|
||
<Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 2 }}>
|
||
<TextField
|
||
size="small"
|
||
label="最大结果数"
|
||
type="number"
|
||
value={maxResults}
|
||
onChange={(e) => setMaxResults(Number(e.target.value))}
|
||
placeholder="0 表示使用默认"
|
||
slotProps={{ htmlInput: { min: 0, max: 50 } }}
|
||
/>
|
||
<TextField
|
||
size="small"
|
||
label="自动抓取条数"
|
||
type="number"
|
||
value={fetchCount}
|
||
onChange={(e) => setFetchCount(Number(e.target.value))}
|
||
placeholder="0 表示由 AI 决定"
|
||
slotProps={{ htmlInput: { min: 0, max: 8 } }}
|
||
/>
|
||
</Box>
|
||
|
||
{/* 抓取类型 */}
|
||
<FormControl size="small"><InputLabel>抓取类型</InputLabel>
|
||
<Select value={fetchMode} label="抓取类型" onChange={(e) => setFetchMode(e.target.value)}>
|
||
<MenuItem value="sequential">顺序抓取</MenuItem>
|
||
<MenuItem value="random">随机抓取</MenuItem>
|
||
</Select>
|
||
</FormControl>
|
||
|
||
<Divider />
|
||
|
||
{/* 认证设置 */}
|
||
<Typography variant="caption" sx={{ fontWeight: 600, color: 'text.secondary' }}>认证设置</Typography>
|
||
<Box sx={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 2 }}>
|
||
<FormControl size="small"><InputLabel>认证类型</InputLabel>
|
||
<Select value={authType} label="认证类型" onChange={(e) => setAuthType(e.target.value)}>
|
||
<MenuItem value="bearer">Bearer Token</MenuItem>
|
||
<MenuItem value="basic">Basic Auth</MenuItem>
|
||
</Select>
|
||
</FormControl>
|
||
<TextField
|
||
size="small"
|
||
label={authType === 'bearer' ? 'Token' : '用户名:密码'}
|
||
type={showKey ? 'text' : 'password'}
|
||
value={authKey}
|
||
onChange={(e) => setAuthKey(e.target.value)}
|
||
placeholder={authType === 'bearer' ? '访问令牌原值' : 'username:password'}
|
||
slotProps={{ input: { endAdornment: <IconButton size="small" onClick={() => setShowKey(!showKey)}>{showKey ? <EyeOff size={14} /> : <Eye size={14} />}</IconButton> } }}
|
||
/>
|
||
</Box>
|
||
<Typography variant="caption" sx={{ color: 'text.disabled' }}>
|
||
{authType === 'bearer'
|
||
? 'Bearer: 直接填写令牌原值，原样透传到 Authorization 头。建议配合 HTTPS 使用。'
|
||
: 'Basic: 填写 username:password 明文串，系统自动 Base64 编码。必须配合 HTTPS 使用。'}
|
||
</Typography>
|
||
</Stack>
|
||
);
|
||
}
|
||
|
||
function AppearanceSettings({ theme, setTheme }: { theme: ThemeMode; setTheme: (t: ThemeMode) => void }) {
|
||
return (
|
||
<Stack spacing={2}>
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600 }}>外观</Typography>
|
||
<Box><Typography variant="caption" sx={{ color: 'text.secondary', mb: 1, display: 'block' }}>主题</Typography>
|
||
<Stack direction="row" spacing={1}>
|
||
{(['dark', 'light', 'auto'] as ThemeMode[]).map((t) => <Button key={t} variant={theme === t ? 'contained' : 'outlined'} size="small" onClick={() => setTheme(t)}>{t === 'dark' ? '深色' : t === 'light' ? '浅色' : '跟随系统'}</Button>)}
|
||
</Stack>
|
||
</Box>
|
||
</Stack>
|
||
);
|
||
}
|
||
|
||
function LogsSettings() {
|
||
const [logLevel, setLogLevel] = useConfig('logging.level', 'info');
|
||
const [clearing, setClearing] = useState<string | null>(null);
|
||
const handleExport = async () => { if (!window.metona?.data?.exportData) return; const r = await window.metona.data.exportData(); if (r.success && r.data) { const b = new Blob([JSON.stringify(r.data, null, 2)], { type: 'application/json' }); const a = document.createElement('a'); a.href = URL.createObjectURL(b); a.download = `metona-export-${Date.now()}.json`; a.click(); } };
|
||
const handleClear = async (type: 'sessions' | 'memories' | 'auditLogs') => { const labels: Record<string, string> = { sessions: '所有会话', memories: '所有记忆', auditLogs: '审计日志' }; if (!confirm(`确定清理${labels[type]}？`)) return; setClearing(type); try { let r; if (type === 'sessions') r = await window.metona?.data?.clearSessions(); else if (type === 'memories') r = await window.metona?.data?.clearMemories(); else r = await window.metona?.data?.clearAuditLogs(); if (r?.success) alert(`${labels[type]}已清理`); else alert(`失败: ${r?.error}`); } catch (e) { alert(`失败: ${(e as Error).message}`); } setClearing(null); };
|
||
|
||
return (
|
||
<Stack spacing={2}>
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600 }}>日志与数据</Typography>
|
||
<FormControl size="small"><InputLabel>日志级别</InputLabel>
|
||
<Select value={logLevel} label="日志级别" onChange={(e) => setLogLevel(e.target.value)}>
|
||
<MenuItem value="debug">DEBUG</MenuItem><MenuItem value="info">INFO</MenuItem><MenuItem value="warn">WARN</MenuItem><MenuItem value="error">ERROR</MenuItem>
|
||
</Select>
|
||
</FormControl>
|
||
<Divider />
|
||
<Typography variant="caption" sx={{ fontWeight: 600, color: 'text.secondary' }}>数据管理</Typography>
|
||
<Button variant="outlined" fullWidth size="small" onClick={handleExport}>📦 导出全部数据（JSON）</Button>
|
||
<Button variant="outlined" fullWidth size="small" color="error" onClick={() => handleClear('sessions')} disabled={clearing !== null}>{clearing === 'sessions' ? '清理中...' : '🗑️ 清理所有会话'}</Button>
|
||
<Button variant="outlined" fullWidth size="small" color="error" onClick={() => handleClear('memories')} disabled={clearing !== null}>{clearing === 'memories' ? '清理中...' : '🗑️ 清理所有记忆'}</Button>
|
||
<Button variant="outlined" fullWidth size="small" color="error" onClick={() => handleClear('auditLogs')} disabled={clearing !== null}>{clearing === 'auditLogs' ? '清理中...' : '🗑️ 清理审计日志'}</Button>
|
||
</Stack>
|
||
);
|
||
}
|