From ee653b1032def60c4447317e159117dbf094e8b2 Mon Sep 17 00:00:00 2001 From: kangfenmao Date: Wed, 12 Mar 2025 09:42:19 +0800 Subject: [PATCH] feat(UI): Enhance ListItem and DataSettings with icons and styling improvements - Add titleStyle prop to ListItem for custom text styling - Reduce gap in ListItem and MenuList components - Integrate icons for DataSettings menu items - Add Notion icon to iconfont - Improve visual hierarchy and spacing in settings navigation --- .../src/assets/fonts/icon-fonts/iconfont.css | 14 +++---- .../assets/fonts/icon-fonts/iconfont.woff2 | Bin 4196 -> 4152 bytes .../src/components/ListItem/index.tsx | 7 ++-- .../pages/home/Messages/ChatNavigation.tsx | 12 +++--- .../settings/DataSettings/DataSettings.tsx | 35 ++++++++++++++---- 5 files changed, 42 insertions(+), 26 deletions(-) diff --git a/src/renderer/src/assets/fonts/icon-fonts/iconfont.css b/src/renderer/src/assets/fonts/icon-fonts/iconfont.css index 5a78fc57..4f058812 100644 --- a/src/renderer/src/assets/fonts/icon-fonts/iconfont.css +++ b/src/renderer/src/assets/fonts/icon-fonts/iconfont.css @@ -1,6 +1,6 @@ @font-face { font-family: 'iconfont'; /* Project id 4753420 */ - src: url('iconfont.woff2?t=1738750230250') format('woff2'); + src: url('iconfont.woff2?t=1741743579060') format('woff2'); } .iconfont { @@ -11,6 +11,10 @@ -moz-osx-font-smoothing: grayscale; } +.icon-notion:before { + content: '\e690'; +} + .icon-thinking:before { content: '\e65b'; } @@ -19,10 +23,6 @@ content: '\e623'; } -.icon-mcp:before { - content: '\e78e'; -} - .icon-icon-adaptive-width:before { content: '\e87a'; } @@ -31,10 +31,6 @@ content: '\e630'; } -.icon-a-darkmode:before { - content: '\e6cd'; -} - .icon-ai-model:before { content: '\e827'; } diff --git a/src/renderer/src/assets/fonts/icon-fonts/iconfont.woff2 b/src/renderer/src/assets/fonts/icon-fonts/iconfont.woff2 index a059cc70888d8b439f0f71681f2f91a9720028ba..6c0519fc61ebcdf142ef3b199ece44bc10201c76 100644 GIT binary patch literal 4152 zcmV-85XbL#Pew8T0RR9101!9;3jhEB03GlE01xW`0RR9100000000000000000000 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 diff --git a/src/renderer/src/components/ListItem/index.tsx b/src/renderer/src/components/ListItem/index.tsx index 23cda059..6e4b539e 100644 --- a/src/renderer/src/components/ListItem/index.tsx +++ b/src/renderer/src/components/ListItem/index.tsx @@ -6,16 +6,17 @@ interface ListItemProps { icon?: ReactNode title: string subtitle?: string + titleStyle?: React.CSSProperties onClick?: () => void } -const ListItem = ({ active, icon, title, subtitle, onClick }: ListItemProps) => { +const ListItem = ({ active, icon, title, subtitle, titleStyle, onClick }: ListItemProps) => { return ( {icon && {icon}} - {title} + {title} {subtitle && {subtitle}} @@ -48,7 +49,7 @@ const ListItemContainer = styled.div` const ListItemContent = styled.div` display: flex; align-items: center; - gap: 8px; + gap: 5px; overflow: hidden; font-size: 13px; ` diff --git a/src/renderer/src/pages/home/Messages/ChatNavigation.tsx b/src/renderer/src/pages/home/Messages/ChatNavigation.tsx index 05fca990..42355852 100644 --- a/src/renderer/src/pages/home/Messages/ChatNavigation.tsx +++ b/src/renderer/src/pages/home/Messages/ChatNavigation.tsx @@ -104,21 +104,21 @@ const ChatNavigation: FC = ({ containerId }) => { const assistantMessages = findAssistantMessages() if (userMessages.length === 0 && assistantMessages.length === 0) { - window.message.info({ content: t('chat.navigation.last'), key: 'navigation-info' }) + // window.message.info({ content: t('chat.navigation.last'), key: 'navigation-info' }) return scrollToBottom() } const visibleIndex = getCurrentVisibleIndex('down') if (visibleIndex === -1) { - window.message.info({ content: t('chat.navigation.last'), key: 'navigation-info' }) + // window.message.info({ content: t('chat.navigation.last'), key: 'navigation-info' }) return scrollToBottom() } const targetIndex = visibleIndex - 1 if (targetIndex < 0) { - window.message.info({ content: t('chat.navigation.last'), key: 'navigation-info' }) + // window.message.info({ content: t('chat.navigation.last'), key: 'navigation-info' }) return scrollToBottom() } @@ -130,21 +130,21 @@ const ChatNavigation: FC = ({ containerId }) => { const userMessages = findUserMessages() const assistantMessages = findAssistantMessages() if (userMessages.length === 0 && assistantMessages.length === 0) { - window.message.info({ content: t('chat.navigation.first'), key: 'navigation-info' }) + // window.message.info({ content: t('chat.navigation.first'), key: 'navigation-info' }) return scrollToTop() } const visibleIndex = getCurrentVisibleIndex('up') if (visibleIndex === -1) { - window.message.info({ content: t('chat.navigation.first'), key: 'navigation-info' }) + // window.message.info({ content: t('chat.navigation.first'), key: 'navigation-info' }) return scrollToTop() } const targetIndex = visibleIndex + 1 if (targetIndex >= userMessages.length) { - window.message.info({ content: t('chat.navigation.first'), key: 'navigation-info' }) + // window.message.info({ content: t('chat.navigation.first'), key: 'navigation-info' }) return scrollToTop() } diff --git a/src/renderer/src/pages/settings/DataSettings/DataSettings.tsx b/src/renderer/src/pages/settings/DataSettings/DataSettings.tsx index d03a6d54..2cbdd394 100644 --- a/src/renderer/src/pages/settings/DataSettings/DataSettings.tsx +++ b/src/renderer/src/pages/settings/DataSettings/DataSettings.tsx @@ -1,4 +1,12 @@ -import { FileSearchOutlined, FolderOpenOutlined, SaveOutlined } from '@ant-design/icons' +import { + CloudSyncOutlined, + DatabaseOutlined, + FileMarkdownOutlined, + FileSearchOutlined, + FolderOpenOutlined, + SaveOutlined, + YuqueOutlined +} from '@ant-design/icons' import { HStack } from '@renderer/components/Layout' import ListItem from '@renderer/components/ListItem' import BackupPopup from '@renderer/components/Popups/BackupPopup' @@ -27,11 +35,15 @@ const DataSettings: FC = () => { const [menu, setMenu] = useState('data') const menuItems = [ - { key: 'data', title: 'settings.data.data.title' }, - { key: 'webdav', title: 'settings.data.webdav.title' }, - { key: 'markdown_export', title: 'settings.data.markdown_export.title' }, - { key: 'notion', title: 'settings.data.notion.title' }, - { key: 'yuque', title: 'settings.data.yuque.title' } + { key: 'data', title: 'settings.data.data.title', icon: }, + { key: 'webdav', title: 'settings.data.webdav.title', icon: }, + { + key: 'markdown_export', + title: 'settings.data.markdown_export.title', + icon: + }, + { key: 'notion', title: 'settings.data.notion.title', icon: }, + { key: 'yuque', title: 'settings.data.yuque.title', icon: } ] useEffect(() => { @@ -88,7 +100,14 @@ const DataSettings: FC = () => { {menuItems.map((item) => ( - setMenu(item.key)} /> + setMenu(item.key)} + titleStyle={{ fontWeight: 500 }} + icon={item.icon} + /> ))} @@ -183,7 +202,7 @@ const StyledIcon = styled(FileSearchOutlined)` const MenuList = styled.div` display: flex; flex-direction: column; - gap: 10px; + gap: 5px; width: var(--settings-width); padding: 12px; border-right: 0.5px solid var(--color-border);