787 lines
30 KiB
TypeScript
787 lines
30 KiB
TypeScript
/**
|
|
* Settings Page
|
|
* Makelore application configuration.
|
|
*/
|
|
import { useEffect, useMemo, useState, type FormEvent } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import {
|
|
ChevronDown,
|
|
ExternalLink,
|
|
FileText,
|
|
FolderPlus,
|
|
KeyRound,
|
|
RefreshCw,
|
|
RotateCw,
|
|
} from 'lucide-react';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Button } from '@/components/ui/button';
|
|
import { DisclosureContent } from '@/components/ui/disclosure';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from '@/components/ui/dialog';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Separator } from '@/components/ui/separator';
|
|
import { Switch } from '@/components/ui/switch';
|
|
import { UpdateSettings } from '@/components/settings/UpdateSettings';
|
|
import { SUPPORTED_LANGUAGES } from '@/i18n';
|
|
import { invokeIpc, toUserMessage } from '@/lib/api-client';
|
|
import {
|
|
clearUiTelemetry,
|
|
getUiTelemetrySnapshot,
|
|
subscribeUiTelemetry,
|
|
type UiTelemetryEntry,
|
|
} from '@/lib/telemetry';
|
|
import { hostApiFetch } from '@/lib/host-api';
|
|
import { cn } from '@/lib/utils';
|
|
import { useOpencodeStore } from '@/stores/opencode';
|
|
import { useProjectConfigStore } from '@/stores/project-config';
|
|
import { useSettingsStore } from '@/stores/settings';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { toast } from 'sonner';
|
|
|
|
export function Settings() {
|
|
const { t } = useTranslation('settings');
|
|
const navigate = useNavigate();
|
|
const {
|
|
setLanguage,
|
|
launchAtStartup,
|
|
setLaunchAtStartup,
|
|
proxyEnabled,
|
|
proxyServer,
|
|
proxyHttpServer,
|
|
proxyHttpsServer,
|
|
proxyAllServer,
|
|
proxyBypassRules,
|
|
setProxyEnabled,
|
|
setProxyServer,
|
|
setProxyHttpServer,
|
|
setProxyHttpsServer,
|
|
setProxyAllServer,
|
|
setProxyBypassRules,
|
|
devModeUnlocked,
|
|
unlockDevMode,
|
|
lockDevMode,
|
|
telemetryEnabled,
|
|
setTelemetryEnabled,
|
|
} = useSettingsStore();
|
|
|
|
const opencodeStatus = useOpencodeStore((state) => state.status);
|
|
const opencodeRuntimeConfigSummary = useOpencodeStore((state) => state.runtimeConfigSummary);
|
|
const opencodeProjects = useOpencodeStore((state) => state.projects);
|
|
const activeOpencodeProject = useOpencodeStore((state) => state.activeProject);
|
|
const opencodeLoading = useOpencodeStore((state) => state.loading);
|
|
const opencodeError = useOpencodeStore((state) => state.error);
|
|
const refreshOpencodeStatus = useOpencodeStore((state) => state.refreshStatus);
|
|
const restartOpencodeRuntime = useOpencodeStore((state) => state.restart);
|
|
const loadOpencodeRuntimeConfigSummary = useOpencodeStore(
|
|
(state) => state.loadRuntimeConfigSummary
|
|
);
|
|
const loadOpencodeProjects = useOpencodeStore((state) => state.loadProjects);
|
|
const pickAndOpenOpencodeProject = useOpencodeStore((state) => state.pickAndOpenProject);
|
|
const setActiveOpencodeProject = useOpencodeStore((state) => state.setActiveProject);
|
|
const loadProjectConfig = useProjectConfigStore((state) => state.load);
|
|
|
|
const [proxyServerDraft, setProxyServerDraft] = useState('');
|
|
const [proxyHttpServerDraft, setProxyHttpServerDraft] = useState('');
|
|
const [proxyHttpsServerDraft, setProxyHttpsServerDraft] = useState('');
|
|
const [proxyAllServerDraft, setProxyAllServerDraft] = useState('');
|
|
const [proxyBypassRulesDraft, setProxyBypassRulesDraft] = useState('');
|
|
const [proxyEnabledDraft, setProxyEnabledDraft] = useState(false);
|
|
const [savingProxy, setSavingProxy] = useState(false);
|
|
const [showLogs, setShowLogs] = useState(false);
|
|
const [logContent, setLogContent] = useState('');
|
|
const [showTelemetryViewer, setShowTelemetryViewer] = useState(false);
|
|
const [telemetryEntries, setTelemetryEntries] = useState<UiTelemetryEntry[]>([]);
|
|
const [showAdditionalSettings, setShowAdditionalSettings] = useState(false);
|
|
const [adminDialogOpen, setAdminDialogOpen] = useState(false);
|
|
const [adminPassword, setAdminPassword] = useState('');
|
|
const [adminPasswordError, setAdminPasswordError] = useState<string | null>(null);
|
|
const [adminUnlocking, setAdminUnlocking] = useState(false);
|
|
const [workspaceProjectError, setWorkspaceProjectError] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
setProxyEnabledDraft(proxyEnabled);
|
|
}, [proxyEnabled]);
|
|
|
|
useEffect(() => {
|
|
setProxyServerDraft(proxyServer);
|
|
}, [proxyServer]);
|
|
|
|
useEffect(() => {
|
|
setProxyHttpServerDraft(proxyHttpServer);
|
|
}, [proxyHttpServer]);
|
|
|
|
useEffect(() => {
|
|
setProxyHttpsServerDraft(proxyHttpsServer);
|
|
}, [proxyHttpsServer]);
|
|
|
|
useEffect(() => {
|
|
setProxyAllServerDraft(proxyAllServer);
|
|
}, [proxyAllServer]);
|
|
|
|
useEffect(() => {
|
|
setProxyBypassRulesDraft(proxyBypassRules);
|
|
}, [proxyBypassRules]);
|
|
|
|
useEffect(() => {
|
|
if (!devModeUnlocked) return;
|
|
setTelemetryEntries(getUiTelemetrySnapshot(200));
|
|
const unsubscribe = subscribeUiTelemetry((entry) => {
|
|
setTelemetryEntries((prev) => {
|
|
const next = [...prev, entry];
|
|
if (next.length > 200) {
|
|
next.splice(0, next.length - 200);
|
|
}
|
|
return next;
|
|
});
|
|
});
|
|
return unsubscribe;
|
|
}, [devModeUnlocked]);
|
|
|
|
useEffect(() => {
|
|
void Promise.allSettled([
|
|
refreshOpencodeStatus(),
|
|
]);
|
|
}, [refreshOpencodeStatus]);
|
|
|
|
useEffect(() => {
|
|
if (!devModeUnlocked) return;
|
|
void Promise.allSettled([
|
|
loadOpencodeRuntimeConfigSummary(),
|
|
loadOpencodeProjects(),
|
|
]);
|
|
}, [devModeUnlocked, loadOpencodeProjects, loadOpencodeRuntimeConfigSummary]);
|
|
|
|
const proxySettingsDirty = useMemo(() => {
|
|
return (
|
|
proxyEnabledDraft !== proxyEnabled ||
|
|
proxyServerDraft.trim() !== proxyServer ||
|
|
proxyHttpServerDraft.trim() !== proxyHttpServer ||
|
|
proxyHttpsServerDraft.trim() !== proxyHttpsServer ||
|
|
proxyAllServerDraft.trim() !== proxyAllServer ||
|
|
proxyBypassRulesDraft.trim() !== proxyBypassRules
|
|
);
|
|
}, [
|
|
proxyAllServer,
|
|
proxyAllServerDraft,
|
|
proxyBypassRules,
|
|
proxyBypassRulesDraft,
|
|
proxyEnabled,
|
|
proxyEnabledDraft,
|
|
proxyHttpServer,
|
|
proxyHttpServerDraft,
|
|
proxyHttpsServer,
|
|
proxyHttpsServerDraft,
|
|
proxyServer,
|
|
proxyServerDraft,
|
|
]);
|
|
|
|
const handleSaveProxySettings = async () => {
|
|
setSavingProxy(true);
|
|
try {
|
|
const normalizedProxyServer = proxyServerDraft.trim();
|
|
const normalizedHttpServer = proxyHttpServerDraft.trim();
|
|
const normalizedHttpsServer = proxyHttpsServerDraft.trim();
|
|
const normalizedAllServer = proxyAllServerDraft.trim();
|
|
const normalizedBypassRules = proxyBypassRulesDraft.trim();
|
|
await invokeIpc('settings:setMany', {
|
|
proxyEnabled: proxyEnabledDraft,
|
|
proxyServer: normalizedProxyServer,
|
|
proxyHttpServer: normalizedHttpServer,
|
|
proxyHttpsServer: normalizedHttpsServer,
|
|
proxyAllServer: normalizedAllServer,
|
|
proxyBypassRules: normalizedBypassRules,
|
|
});
|
|
setProxyEnabled(proxyEnabledDraft);
|
|
setProxyServer(normalizedProxyServer);
|
|
setProxyHttpServer(normalizedHttpServer);
|
|
setProxyHttpsServer(normalizedHttpsServer);
|
|
setProxyAllServer(normalizedAllServer);
|
|
setProxyBypassRules(normalizedBypassRules);
|
|
toast.success('Proxy settings saved');
|
|
} catch (error) {
|
|
toast.error(`Failed to save proxy settings: ${toUserMessage(error)}`);
|
|
} finally {
|
|
setSavingProxy(false);
|
|
}
|
|
};
|
|
|
|
const handleRefreshOpencodeSettings = () => {
|
|
void Promise.allSettled([
|
|
refreshOpencodeStatus(),
|
|
loadOpencodeRuntimeConfigSummary(),
|
|
loadOpencodeProjects(),
|
|
]);
|
|
};
|
|
|
|
const handleRevealAdditionalSettings = () => {
|
|
if (showAdditionalSettings) {
|
|
setShowAdditionalSettings(false);
|
|
return;
|
|
}
|
|
if (devModeUnlocked) {
|
|
setShowAdditionalSettings(true);
|
|
return;
|
|
}
|
|
setAdminPassword('');
|
|
setAdminPasswordError(null);
|
|
setAdminDialogOpen(true);
|
|
};
|
|
|
|
const handleUnlockDevMode = async (event: FormEvent<HTMLFormElement>) => {
|
|
event.preventDefault();
|
|
setAdminUnlocking(true);
|
|
setAdminPasswordError(null);
|
|
try {
|
|
const unlocked = await unlockDevMode(adminPassword);
|
|
if (!unlocked) {
|
|
setAdminPasswordError(t('admin.invalidPassword', 'The administrator password is incorrect.'));
|
|
return;
|
|
}
|
|
setAdminDialogOpen(false);
|
|
setAdminPassword('');
|
|
setShowAdditionalSettings(true);
|
|
} finally {
|
|
setAdminUnlocking(false);
|
|
}
|
|
};
|
|
|
|
const handleLockDevMode = async () => {
|
|
await lockDevMode();
|
|
setShowAdditionalSettings(false);
|
|
};
|
|
|
|
const handleAddOpencodeProject = async () => {
|
|
const project = await pickAndOpenOpencodeProject();
|
|
if (!project) return;
|
|
await activateVerifiedProject(project.id);
|
|
};
|
|
|
|
const activateVerifiedProject = async (projectId: string) => {
|
|
try {
|
|
setWorkspaceProjectError(null);
|
|
const result = await loadProjectConfig(projectId);
|
|
if (result.status === 'valid') {
|
|
await setActiveOpencodeProject(projectId);
|
|
return;
|
|
}
|
|
if (result.status === 'missing') {
|
|
setWorkspaceProjectError('Project configuration is missing. Create the project from the sidebar first.');
|
|
return;
|
|
}
|
|
setWorkspaceProjectError(result.error ?? 'Project configuration is invalid.');
|
|
} catch (error) {
|
|
setWorkspaceProjectError(error instanceof Error ? error.message : String(error));
|
|
}
|
|
};
|
|
|
|
const handleShowLogs = async () => {
|
|
try {
|
|
const logs = await hostApiFetch<{ content: string }>('/api/logs?tailLines=100');
|
|
setLogContent(logs.content);
|
|
setShowLogs(true);
|
|
} catch {
|
|
setLogContent('(Failed to load logs)');
|
|
setShowLogs(true);
|
|
}
|
|
};
|
|
|
|
const handleOpenLogDir = async () => {
|
|
try {
|
|
const { dir: logDir } = await hostApiFetch<{ dir: string | null }>('/api/logs/dir');
|
|
if (logDir) {
|
|
await invokeIpc('shell:showItemInFolder', logDir);
|
|
}
|
|
} catch {
|
|
// ignore
|
|
}
|
|
};
|
|
|
|
return (
|
|
<main data-testid="settings-page" className="min-h-full bg-background">
|
|
<div className="mx-auto flex max-w-4xl flex-col gap-8 px-8 py-8">
|
|
<div>
|
|
<h1 className="text-2xl font-semibold tracking-normal">{t('title')}</h1>
|
|
</div>
|
|
|
|
<section className="space-y-5" data-testid="settings-general-section">
|
|
<div>
|
|
<div className="flex items-center gap-2">
|
|
<h2 className="text-lg font-medium">{t('appearance.title')}</h2>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-8 w-8 bg-transparent text-muted-foreground/70 hover:bg-accent/60 hover:text-foreground"
|
|
aria-label={t('appearance.showMoreSettings')}
|
|
aria-expanded={showAdditionalSettings}
|
|
data-testid="settings-reveal-additional"
|
|
onClick={handleRevealAdditionalSettings}
|
|
>
|
|
<ChevronDown
|
|
className={cn(
|
|
'h-4 w-4 transition-transform duration-200 ease-out',
|
|
showAdditionalSettings && 'rotate-180'
|
|
)}
|
|
/>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid gap-3 rounded-lg border bg-card p-4">
|
|
<Label htmlFor="language">{t('appearance.language')}</Label>
|
|
<select
|
|
id="language"
|
|
value="zh"
|
|
onChange={(event) => setLanguage(event.target.value)}
|
|
className="h-10 rounded-md border bg-background px-3 text-sm"
|
|
>
|
|
{SUPPORTED_LANGUAGES.map((item) => (
|
|
<option key={item.code} value={item.code}>
|
|
{item.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between rounded-lg border bg-card p-4">
|
|
<div>
|
|
<Label className="text-sm font-medium">{t('appearance.launchAtStartup')}</Label>
|
|
<p className="text-sm text-muted-foreground">{t('appearance.launchAtStartupDesc')}</p>
|
|
</div>
|
|
<Switch checked={launchAtStartup} onCheckedChange={setLaunchAtStartup} />
|
|
</div>
|
|
</section>
|
|
|
|
<section className="space-y-5" data-testid="settings-runtime-summary">
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div>
|
|
<h2 className="text-lg font-medium">Runtime</h2>
|
|
</div>
|
|
<Badge variant={opencodeStatus.state === 'running' ? 'default' : 'secondary'}>
|
|
{opencodeStatus.state}
|
|
</Badge>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap items-center justify-between gap-4 rounded-lg border bg-card p-4">
|
|
<div className="flex min-w-0 flex-wrap items-center gap-x-6 gap-y-2 text-sm">
|
|
<div>
|
|
<div className="text-xs text-muted-foreground">Status</div>
|
|
<div className="font-medium">{opencodeStatus.state}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-xs text-muted-foreground">Port</div>
|
|
<div className="font-medium">{opencodeStatus.port}</div>
|
|
</div>
|
|
</div>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => void restartOpencodeRuntime()}
|
|
disabled={opencodeLoading}
|
|
aria-label="Restart runtime"
|
|
data-testid="settings-runtime-restart"
|
|
>
|
|
<RotateCw className={cn('mr-2 h-4 w-4', opencodeLoading && 'animate-spin')} />
|
|
Restart runtime
|
|
</Button>
|
|
</div>
|
|
|
|
{(opencodeStatus.error || opencodeError) && (
|
|
<div className="rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive">
|
|
{opencodeStatus.error ?? opencodeError}
|
|
</div>
|
|
)}
|
|
</section>
|
|
|
|
<Separator />
|
|
|
|
<section className="space-y-5" data-testid="settings-updates">
|
|
<div>
|
|
<h2 className="text-lg font-medium">{t('updates.title')}</h2>
|
|
</div>
|
|
<div className="rounded-lg border bg-card p-4">
|
|
<UpdateSettings />
|
|
</div>
|
|
</section>
|
|
|
|
<Dialog
|
|
open={adminDialogOpen}
|
|
onOpenChange={(open) => {
|
|
setAdminDialogOpen(open);
|
|
if (!open) {
|
|
setAdminPassword('');
|
|
setAdminPasswordError(null);
|
|
}
|
|
}}
|
|
>
|
|
<DialogContent data-testid="settings-admin-password-dialog" className="sm:max-w-md">
|
|
<DialogHeader>
|
|
<DialogTitle className="flex items-center gap-2">
|
|
<KeyRound className="h-5 w-5 text-brand" />
|
|
{t('admin.title', '管理员验证')}
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
{t('admin.description', '请输入管理员密码以管理开发者设置。')}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<form className="space-y-4" onSubmit={handleUnlockDevMode}>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="settings-admin-password">{t('admin.password', '管理员密码')}</Label>
|
|
<Input
|
|
id="settings-admin-password"
|
|
type="password"
|
|
value={adminPassword}
|
|
onChange={(event) => setAdminPassword(event.target.value)}
|
|
autoFocus
|
|
autoComplete="current-password"
|
|
data-testid="settings-admin-password-input"
|
|
aria-invalid={Boolean(adminPasswordError)}
|
|
/>
|
|
{adminPasswordError && (
|
|
<p className="text-sm text-destructive" role="alert">
|
|
{adminPasswordError}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<DialogFooter>
|
|
<Button type="button" variant="outline" onClick={() => setAdminDialogOpen(false)}>
|
|
{t('admin.cancel', '取消')}
|
|
</Button>
|
|
<Button
|
|
type="submit"
|
|
disabled={!adminPassword.trim() || adminUnlocking}
|
|
data-testid="settings-admin-unlock-button"
|
|
>
|
|
{adminUnlocking && <RefreshCw className="mr-2 h-4 w-4 animate-spin" />}
|
|
{t('admin.unlock', '解锁管理设置')}
|
|
</Button>
|
|
</DialogFooter>
|
|
</form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{showAdditionalSettings && devModeUnlocked && (
|
|
<DisclosureContent open innerClassName="space-y-8">
|
|
<Separator />
|
|
|
|
<section className="space-y-5" data-testid="settings-opencode-workspace">
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div>
|
|
<h2 className="text-lg font-medium">Workspace</h2>
|
|
<p className="text-sm text-muted-foreground">
|
|
Configure the local runtime and project workspace.
|
|
</p>
|
|
</div>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={handleRefreshOpencodeSettings}
|
|
disabled={opencodeLoading}
|
|
aria-label="Refresh runtime settings"
|
|
>
|
|
<RefreshCw className={cn('mr-2 h-4 w-4', opencodeLoading && 'animate-spin')} />
|
|
Refresh
|
|
</Button>
|
|
</div>
|
|
|
|
<div
|
|
className="space-y-4 rounded-lg border bg-card p-4"
|
|
data-testid="settings-opencode-models"
|
|
>
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div>
|
|
<Label className="text-sm font-medium">Models</Label>
|
|
<p className="text-sm text-muted-foreground">
|
|
Resolved from the runtime configuration.
|
|
</p>
|
|
</div>
|
|
<Button variant="outline" size="sm" onClick={() => navigate('/models')}>
|
|
Configure models
|
|
</Button>
|
|
</div>
|
|
<div className="space-y-3 text-sm">
|
|
<div>
|
|
<div className="text-xs text-muted-foreground">Default model</div>
|
|
<div className="break-all font-medium">
|
|
{opencodeRuntimeConfigSummary?.model ?? 'No configured model'}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-xs text-muted-foreground">Small model</div>
|
|
<div className="break-all font-medium">
|
|
{opencodeRuntimeConfigSummary?.smallModel ?? 'No configured small model'}
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center justify-between gap-3">
|
|
<span className="text-muted-foreground">Providers</span>
|
|
<span className="font-medium">
|
|
{`${opencodeRuntimeConfigSummary?.providerCount ?? 0} providers`}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4 rounded-lg border bg-card p-4">
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div>
|
|
<Label className="text-sm font-medium">Projects</Label>
|
|
<p className="text-sm text-muted-foreground">
|
|
Folders opened as project workspaces.
|
|
</p>
|
|
</div>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => void handleAddOpencodeProject()}
|
|
disabled={opencodeLoading}
|
|
aria-label="Add project"
|
|
>
|
|
<FolderPlus className="mr-2 h-4 w-4" />
|
|
Add project
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="rounded-md border bg-background/60 p-3">
|
|
<div className="text-xs text-muted-foreground">Active project</div>
|
|
<div className="mt-1 truncate text-sm font-medium">
|
|
{activeOpencodeProject?.name ?? 'No project selected'}
|
|
</div>
|
|
<div className="mt-1 truncate text-xs text-muted-foreground">
|
|
{activeOpencodeProject?.path ?? 'Add a project folder to start a session.'}
|
|
</div>
|
|
</div>
|
|
|
|
{workspaceProjectError && (
|
|
<div className="rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive">
|
|
{workspaceProjectError}
|
|
</div>
|
|
)}
|
|
|
|
{opencodeProjects.length > 0 && (
|
|
<div className="max-h-56 space-y-2 overflow-auto pr-1">
|
|
{opencodeProjects.map((project) => {
|
|
const active = activeOpencodeProject?.id === project.id;
|
|
return (
|
|
<div
|
|
key={project.id}
|
|
className="flex items-center justify-between gap-3 rounded-md border bg-background/50 px-3 py-2"
|
|
>
|
|
<div className="min-w-0">
|
|
<div className="truncate text-sm font-medium">{project.name}</div>
|
|
<div className="truncate text-xs text-muted-foreground">
|
|
{project.path}
|
|
</div>
|
|
</div>
|
|
<Button
|
|
variant={active ? 'secondary' : 'outline'}
|
|
size="sm"
|
|
disabled={active || opencodeLoading}
|
|
onClick={() => void activateVerifiedProject(project.id)}
|
|
aria-label={
|
|
active
|
|
? `Active project ${project.name}`
|
|
: `Use project ${project.name}`
|
|
}
|
|
>
|
|
{active ? 'Active' : 'Use'}
|
|
</Button>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
|
|
<Separator />
|
|
|
|
<section className="space-y-5" data-testid="settings-proxy-section">
|
|
<div>
|
|
<h2 className="text-lg font-medium">Network</h2>
|
|
<p className="text-sm text-muted-foreground">
|
|
Configure proxy settings used by Makelore runtime.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-4 rounded-lg border bg-card p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<Label className="text-sm font-medium">Proxy</Label>
|
|
<p className="text-sm text-muted-foreground">
|
|
Route local runtime traffic through a proxy.
|
|
</p>
|
|
</div>
|
|
<Switch
|
|
data-testid="settings-proxy-toggle"
|
|
checked={proxyEnabledDraft}
|
|
onCheckedChange={setProxyEnabledDraft}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="proxy-server">Proxy Server</Label>
|
|
<Input
|
|
id="proxy-server"
|
|
value={proxyServerDraft}
|
|
onChange={(event) => setProxyServerDraft(event.target.value)}
|
|
placeholder="http://127.0.0.1:7890"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="proxy-http-server">HTTP Proxy</Label>
|
|
<Input
|
|
id="proxy-http-server"
|
|
value={proxyHttpServerDraft}
|
|
onChange={(event) => setProxyHttpServerDraft(event.target.value)}
|
|
placeholder="http://127.0.0.1:7890"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="proxy-https-server">HTTPS Proxy</Label>
|
|
<Input
|
|
id="proxy-https-server"
|
|
value={proxyHttpsServerDraft}
|
|
onChange={(event) => setProxyHttpsServerDraft(event.target.value)}
|
|
placeholder="http://127.0.0.1:7890"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="proxy-all-server">ALL_PROXY / SOCKS</Label>
|
|
<Input
|
|
id="proxy-all-server"
|
|
value={proxyAllServerDraft}
|
|
onChange={(event) => setProxyAllServerDraft(event.target.value)}
|
|
placeholder="socks5://127.0.0.1:7890"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="proxy-bypass">Bypass Rules</Label>
|
|
<Input
|
|
id="proxy-bypass"
|
|
value={proxyBypassRulesDraft}
|
|
onChange={(event) => setProxyBypassRulesDraft(event.target.value)}
|
|
placeholder="localhost,127.0.0.1"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex justify-end">
|
|
<Button
|
|
data-testid="settings-proxy-save-button"
|
|
onClick={handleSaveProxySettings}
|
|
disabled={!proxySettingsDirty || savingProxy}
|
|
>
|
|
{savingProxy ? <RefreshCw className="mr-2 h-4 w-4 animate-spin" /> : null}
|
|
Save Proxy
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<Separator />
|
|
|
|
<section className="space-y-5" data-testid="settings-advanced-section">
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div>
|
|
<h2 className="text-lg font-medium">{t('advanced.title')}</h2>
|
|
<p className="text-sm text-muted-foreground">{t('advanced.description')}</p>
|
|
</div>
|
|
<Button variant="ghost" size="sm" onClick={() => void handleLockDevMode()}>
|
|
{t('admin.lock', '锁定')}
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between rounded-lg border bg-card p-4">
|
|
<div>
|
|
<Label className="text-sm font-medium">{t('advanced.devMode')}</Label>
|
|
<p className="text-sm text-muted-foreground">
|
|
{t('advanced.sessionUnlocked', '管理员权限已在本次应用运行期间解锁。')}
|
|
</p>
|
|
</div>
|
|
<Badge variant="secondary">{t('admin.unlocked', '已解锁')}</Badge>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between rounded-lg border bg-card p-4">
|
|
<div>
|
|
<Label className="text-sm font-medium">{t('advanced.telemetry')}</Label>
|
|
<p className="text-sm text-muted-foreground">{t('advanced.telemetryDesc')}</p>
|
|
</div>
|
|
<Switch checked={telemetryEnabled} onCheckedChange={setTelemetryEnabled} />
|
|
</div>
|
|
|
|
<div className="rounded-lg border bg-card p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<Label className="text-sm font-medium">Application Logs</Label>
|
|
<p className="text-sm text-muted-foreground">
|
|
Inspect recent local application logs.
|
|
</p>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button variant="outline" size="sm" onClick={handleShowLogs}>
|
|
<FileText className="mr-2 h-4 w-4" />
|
|
View Logs
|
|
</Button>
|
|
<Button variant="outline" size="sm" onClick={handleOpenLogDir}>
|
|
<ExternalLink className="mr-2 h-4 w-4" />
|
|
Open Folder
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<DisclosureContent open={showLogs} className="mt-4" innerClassName="max-h-80 overflow-auto whitespace-pre-wrap rounded-md bg-muted p-3 text-xs">
|
|
{logContent || '(No logs available yet)'}
|
|
</DisclosureContent>
|
|
</div>
|
|
|
|
<div className="rounded-lg border bg-card p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<Label className="text-sm font-medium">Telemetry Viewer</Label>
|
|
<p className="text-sm text-muted-foreground">
|
|
Local-only UI and performance events.
|
|
</p>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setShowTelemetryViewer((value) => !value)}
|
|
>
|
|
{showTelemetryViewer ? 'Hide' : 'Show'}
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => {
|
|
clearUiTelemetry();
|
|
setTelemetryEntries([]);
|
|
}}
|
|
>
|
|
Clear
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<DisclosureContent open={showTelemetryViewer} className="mt-4" innerClassName="max-h-80 overflow-auto whitespace-pre-wrap rounded-md bg-muted p-3 text-xs">
|
|
{telemetryEntries.length > 0
|
|
? JSON.stringify(telemetryEntries, null, 2)
|
|
: '(No telemetry entries)'}
|
|
</DisclosureContent>
|
|
</div>
|
|
</section>
|
|
</DisclosureContent>
|
|
)}
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
export default Settings;
|