style: 优化工具管理自动执行行的可读性

背景改用 alpha(success.main, 0.12) 主题感知透明色,文字和按钮保持不透明;左侧加绿色状态条 + 圆点指示;取消自动按钮改为 contained error(危险动作更醒目);统一按钮字号 11、minWidth 72
This commit is contained in:
thzxx
2026-07-12 14:32:17 +08:00
parent 1eabed9b70
commit 4a5ddab80a
+32 -5
View File
@@ -4,6 +4,7 @@
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';
@@ -482,12 +483,38 @@ function ToolsSettings() {
</Typography>
) : (
autoExecToolDetails.map((t) => (
<Stack key={t.name} direction="row" sx={{ py: 1, px: 1.5, borderRadius: 1.5, bgcolor: 'success.main', opacity: 0.15, justifyContent: 'space-between', alignItems: 'center' }}>
<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 }}>
<Typography variant="body2" sx={{ fontFamily: 'monospace', fontSize: 12, color: 'text.primary' }}>{t.name}</Typography>
<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="warning" variant="outlined" sx={{ fontSize: 10, minWidth: 70 }} onClick={() => handleSetAutoExec(t.name, false)}>
<Button
size="small"
color="error"
variant="contained"
sx={{ fontSize: 11, minWidth: 72, fontWeight: 600 }}
onClick={() => handleSetAutoExec(t.name, false)}
>
</Button>
</Stack>
@@ -503,10 +530,10 @@ function ToolsSettings() {
{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 }}>{t.name}</Typography>
<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: 10, minWidth: 70 }} onClick={() => handleSetAutoExec(t.name, true)}>
<Button size="small" color="success" variant="contained" sx={{ fontSize: 11, minWidth: 72, fontWeight: 600 }} onClick={() => handleSetAutoExec(t.name, true)}>
</Button>
</Stack>