Skip to content

Commit 66056f0

Browse files
lcompletelcomplete
committed
feat(ui): 更新AI相关图标为渐变风格并统一命名
将SmartToyOutlinedIcon替换为AutoAwesomeIcon，并添加渐变效果 在多个组件中添加隐藏的SVG渐变定义 简化AI快捷操作按钮的样式和文本 更新设置中的API相关标签为更通用的表述
1 parent d2078dd commit 66056f0

5 files changed

Lines changed: 46 additions & 38 deletions

File tree

‎app/client/src/components/PageDetailArea.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import TextHighlighter from './highlights/TextHighlighter';
2828
import TableOfContents from './TableOfContents';
2929
import ListIcon from '@mui/icons-material/List';
3030
import TextSnippetOutlinedIcon from '@mui/icons-material/TextSnippetOutlined';
31+
import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
3132

3233
// 引入 TurndownService
3334
import TurndownService from 'turndown';
@@ -511,14 +512,21 @@ const PageDetailArea = ({
511512

512513
{shortcuts && shortcuts.length > 0 ? (
513514
<>
515+
<svg width={0} height={0}>
516+
<linearGradient id="geminiGradient" x1="0%" y1="0%" x2="100%" y2="100%">
517+
<stop offset="0%" stopColor="#4facfe" />
518+
<stop offset="50%" stopColor="#a18cd1" />
519+
<stop offset="100%" stopColor="#fbc2eb" />
520+
</linearGradient>
521+
</svg>
514522
<Tooltip title={'AI operations'} placement={"bottom"}>
515523
<IconButton
516524
onClick={handleAIMenuClick}
517525
aria-controls={openMenu ? 'ai-menu' : undefined}
518526
aria-haspopup="true"
519527
aria-expanded={openMenu ? 'true' : undefined}
520528
>
521-
<SmartToyOutlinedIcon fontSize={"small"} sx={{ color: "#6366F1" }} />
529+
<AutoAwesomeIcon fontSize={"small"} sx={{ fill: "url(#geminiGradient)" }} />
522530
<KeyboardArrowDownIcon fontSize={"small"} />
523531
</IconButton>
524532
</Tooltip>

‎app/client/src/components/SettingModal/GeneralSetting.tsx‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ export default function GeneralSetting() {
6464
return <div>
6565
<form onSubmit={formikGeneral.handleSubmit} className={''}>
6666
<Typography variant={'h6'} className={''}>
67-
OpenApi
67+
AI Service Provider
6868
</Typography>
6969
<Divider/>
7070

@@ -75,7 +75,7 @@ export default function GeneralSetting() {
7575
fullWidth={true}
7676
className={''}
7777
id="openApiKey"
78-
label="OpenApi secret key"
78+
label="API Key"
7979
value={formikGeneral.values.openApiKey || ""}
8080
onChange={formikGeneral.handleChange}
8181
error={formikGeneral.touched.openApiKey && Boolean(formikGeneral.errors.openApiKey)}
@@ -98,7 +98,7 @@ export default function GeneralSetting() {
9898
size={"small"}
9999
className={'w-[400px]'}
100100
id="openApiBaseUrl"
101-
label="OpenApi Base URL"
101+
label="API URL"
102102
value={formikGeneral.values.openApiBaseUrl || ""}
103103
onChange={formikGeneral.handleChange}
104104
error={formikGeneral.touched.openApiBaseUrl && Boolean(formikGeneral.errors.openApiBaseUrl)}
@@ -111,7 +111,7 @@ export default function GeneralSetting() {
111111
size={"small"}
112112
className={'w-[200px] ml-2'}
113113
id="openApiModel"
114-
label="OpenApi Model"
114+
label="API Model"
115115
value={formikGeneral.values.openApiModel || ""}
116116
onChange={formikGeneral.handleChange}
117117
error={formikGeneral.touched.openApiModel && Boolean(formikGeneral.errors.openApiModel)}
@@ -126,11 +126,6 @@ export default function GeneralSetting() {
126126
</Tooltip>
127127
</div>
128128

129-
<Alert severity="info" className="mt-2">
130-
Article prompts have been moved to the <strong>Article AI Shortcuts</strong> section, where you can
131-
manage multiple operation shortcuts like summaries, translations, and more.
132-
</Alert>
133-
134129
<Typography variant={'h6'} className={'mt-4'}>
135130
Http Proxy
136131
</Typography>

‎app/client/src/components/SettingModal/index.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import AccountBoxIcon from '@mui/icons-material/AccountBox';
1717
import AccountSetting from "./AccountSetting";
1818
import SettingsApplicationsIcon from '@mui/icons-material/SettingsApplications';
1919
import GeneralSetting from "./GeneralSetting";
20-
import ShortTextIcon from '@mui/icons-material/ShortText';
20+
import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
2121
import ArticleShortcutSetting from "./ArticleShortcutSetting";
2222

2323
type SettingModalProps = {
@@ -47,6 +47,13 @@ export default function SettingModal(props: SettingModalProps) {
4747
return (
4848
<Modal open={props.open} onClose={props.onClose} className={'flex justify-center items-center'}>
4949
<Box className={'flex scrollbar'} sx={style}>
50+
<svg width={0} height={0} style={{ position: 'absolute', visibility: 'hidden' }}>
51+
<linearGradient id="geminiGradientSettings" x1="0%" y1="0%" x2="100%" y2="100%">
52+
<stop offset="0%" stopColor="#4facfe" />
53+
<stop offset="50%" stopColor="#a18cd1" />
54+
<stop offset="100%" stopColor="#fbc2eb" />
55+
</linearGradient>
56+
</svg>
5057
<div className={'w-[220px] h-full bg-[rgb(251,251,250)] sticky self-start top-0 left-0 shrink-0'}>
5158
<List component="nav" aria-label="setting items" className={''}>
5259
<ListItemButton
@@ -63,7 +70,7 @@ export default function SettingModal(props: SettingModalProps) {
6370
onClick={(event) => handleListItemClick(event, 1)}
6471
>
6572
<ListItemIcon>
66-
<ShortTextIcon/>
73+
<AutoAwesomeIcon sx={{ fill: "url(#geminiGradientSettings)" }} />
6774
</ListItemIcon>
6875
<ListItemText primary="AI Shortcuts"/>
6976
</ListItemButton>

‎app/extension/src/article.tsx‎

Lines changed: 15 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import {
1515
} from "@mui/material";
1616
import ReactMarkdown from "react-markdown";
1717
import remarkGfm from "remark-gfm";
18-
import SmartToyOutlinedIcon from "@mui/icons-material/SmartToyOutlined";
18+
import AutoAwesomeIcon from "@mui/icons-material/AutoAwesome";
1919
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
2020
import ShortTextIcon from "@mui/icons-material/ShortText";
2121
import CloseIcon from "@mui/icons-material/Close";
@@ -305,6 +305,13 @@ export default function Article({
305305
overflow: "visible",
306306
}}
307307
>
308+
<svg width={0} height={0} style={{ position: 'absolute', visibility: 'hidden' }}>
309+
<linearGradient id="geminiGradient" x1="0%" y1="0%" x2="100%" y2="100%">
310+
<stop offset="0%" stopColor="#4facfe" />
311+
<stop offset="50%" stopColor="#a18cd1" />
312+
<stop offset="100%" stopColor="#fbc2eb" />
313+
</linearGradient>
314+
</svg>
308315
{/* 左侧区域：快捷指令菜单按钮 */}
309316
<Box
310317
sx={{
@@ -323,7 +330,7 @@ export default function Article({
323330
id="shortcut-menu-button"
324331
variant="outlined"
325332
size="small"
326-
startIcon={<SmartToyOutlinedIcon />}
333+
startIcon={<AutoAwesomeIcon sx={{ fill: "url(#geminiGradient)" }} />}
327334
onClick={handleShortcutMenuOpen}
328335
aria-controls={shortcutMenuOpen ? "shortcut-menu" : undefined}
329336
aria-haspopup="true"
@@ -334,32 +341,16 @@ export default function Article({
334341
fontSize: "12px",
335342
height: "32px",
336343
textTransform: "none",
337-
background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
338-
color: "white",
339-
boxShadow: "0 4px 12px rgba(102, 126, 234, 0.3)",
340-
border: "1px solid rgba(255, 255, 255, 0.2)",
341-
transition: "all 0.2s ease-in-out",
344+
color: "#1976d2",
345+
borderColor: "rgba(25, 118, 210, 0.5)",
346+
background: "transparent",
342347
"&:hover": {
343-
background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
344-
boxShadow: "0 4px 12px rgba(102, 126, 234, 0.3)",
345-
transform: "none",
346-
filter: "none",
347-
opacity: 1,
348-
"@media (hover: hover)": {
349-
backgroundColor: "transparent",
350-
background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
351-
},
352-
},
353-
"&:focus": {
354-
background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
355-
boxShadow: "0 4px 12px rgba(102, 126, 234, 0.3)",
356-
},
357-
"& .MuiButton-startIcon": {
358-
color: "white",
348+
background: "rgba(25, 118, 210, 0.04)",
349+
borderColor: "#1976d2",
359350
},
360351
}}
361352
>
362-
{isSnippetMode ? "Snippet AI Shortcuts" : "Article AI Shortcuts"}
353+
AI Shortcuts
363354
</Button>
364355

365356
<Menu

‎app/extension/src/popup.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
3030
import StarIcon from '@mui/icons-material/Star';
3131
import ArchiveIcon from '@mui/icons-material/Archive';
3232
import ArchiveOutlinedIcon from '@mui/icons-material/ArchiveOutlined';
33-
import SmartToyOutlinedIcon from '@mui/icons-material/SmartToyOutlined';
33+
import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
3434
import ContentCutIcon from '@mui/icons-material/ContentCut';
3535
import {log} from "./logger";
3636
import {
@@ -414,6 +414,13 @@ const Popup = () => {
414414

415415
return (
416416
<div style={{minWidth: "600px", minHeight: '200px'}} className={'mb-4'}>
417+
<svg width={0} height={0} style={{ position: 'absolute', visibility: 'hidden' }}>
418+
<linearGradient id="geminiGradient" x1="0%" y1="0%" x2="100%" y2="100%">
419+
<stop offset="0%" stopColor="#4facfe" />
420+
<stop offset="50%" stopColor="#a18cd1" />
421+
<stop offset="100%" stopColor="#fbc2eb" />
422+
</linearGradient>
423+
</svg>
417424
<div className={'commonPadding header'}>
418425
<div className="flex items-center text-sky-600 font-bold">
419426
<EnergySavingsLeafIcon className="h-4 w-4 mr-1"/>
@@ -658,7 +665,7 @@ const Popup = () => {
658665
variant={"text"}
659666
color={"primary"}
660667
size={"small"}
661-
startIcon={<SmartToyOutlinedIcon />}
668+
startIcon={<AutoAwesomeIcon sx={{ fill: "url(#geminiGradient)" }} />}
662669
endIcon={processingShortcut ? <CircularProgress size={14} /> : null}
663670
onClick={handleShortcutMenuOpen}
664671
disabled={processingShortcut}

0 commit comments

Comments
 (0)