style: 优化工具管理自动执行行的可读性
背景改用 alpha(success.main, 0.12) 主题感知透明色,文字和按钮保持不透明;左侧加绿色状态条 + 圆点指示;取消自动按钮改为 contained error(危险动作更醒目);统一按钮字号 11、minWidth 72
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user