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 { 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, 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 { 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';
|
||||||
@@ -482,12 +483,38 @@ function ToolsSettings() {
|
|||||||
</Typography>
|
</Typography>
|
||||||
) : (
|
) : (
|
||||||
autoExecToolDetails.map((t) => (
|
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 }}>
|
<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 }} />
|
<Chip label="自动" size="small" color="success" sx={{ height: 16, fontSize: 9 }} />
|
||||||
</Stack>
|
</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>
|
</Button>
|
||||||
</Stack>
|
</Stack>
|
||||||
@@ -503,10 +530,10 @@ function ToolsSettings() {
|
|||||||
{pendingConfirmTools.map((t) => (
|
{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 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 }}>
|
<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 }} />
|
<Chip label={t.riskLevel.toUpperCase()} size="small" color={riskColors[t.riskLevel]} variant="outlined" sx={{ height: 16, fontSize: 9 }} />
|
||||||
</Stack>
|
</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>
|
</Button>
|
||||||
</Stack>
|
</Stack>
|
||||||
|
|||||||
Reference in New Issue
Block a user