Skip to content

Commit 640be80

Browse files
zhpdzhpd
committed
chore: add icon
1 parent 0112125 commit 640be80

File tree

2 files changed

+38
-17
lines changed

2 files changed

+38
-17
lines changed

‎src/components/Icon/index.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react';
2+
import * as icons from '@ant-design/icons';
3+
import { IconProps } from '@ant-design/icons/lib/components/IconBase';
4+
5+
export interface BaseIconProps extends Omit<IconProps, 'icon'> {
6+
name: string;
7+
}
8+
const Icon = (props: BaseIconProps) => {
9+
const { name } = props;
10+
const antIcon: Record<string, any> = icons;
11+
return React.createElement(antIcon[name], props);
12+
};
13+
14+
export default Icon;

‎src/components/Layout/index.tsx‎

Lines changed: 24 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useRouter } from 'next/router'
22
import { ConfigProvider, Layout, App as AntdApp, theme as antdTheme, Avatar, Space, Button, Typography, Spin } from 'antd'
3-
import Icon, {
3+
import AntIcon, {
44
MenuFoldOutlined,
55
MenuUnfoldOutlined,
66
ApiOutlined,
@@ -13,6 +13,7 @@ import Icon, {
1313
ReadOutlined,
1414
RadiusSettingOutlined,
1515
} from '@ant-design/icons'
16+
import Icon from '@/components/Icon'
1617
const { Header, Sider, Content } = Layout
1718
import React, { useEffect, useState } from 'react'
1819
import { useSiteContext } from '@/contexts/site'
@@ -24,7 +25,7 @@ import IconLight from '@/assets/icons/light.svg'
2425
import IconDark from '@/assets/icons/dark.svg'
2526
import { tool } from '@/utils'
2627

27-
const {version: packageVersion, name: packageName} = require('@/../package.json')
28+
const { version: packageVersion, name: packageName } = require('@/../package.json')
2829

2930
// default colorPrimary
3031
export const colorPrimary = '#1677ff'
@@ -41,12 +42,12 @@ export default function LayoutBase(props: any) {
4142
const [side, setSide] = useState(true)
4243
const iconColor = '#CCC'
4344
const menuList = [
44-
{ name: 'c.message', path: '/chat', icon: <MessageOutlined />, iconColor: iconColor, iconColorActive: colorPrimary },
45-
{ name: 'c.prompt', path: '/prompt', icon: <BulbOutlined />, iconColor: iconColor, iconColorActive: colorPrimary },
46-
{ name: 'c.plugin', path: '/plugin', icon: <ApiOutlined />, iconColor: iconColor, iconColorActive: colorPrimary },
47-
// { name: 'c.store', path: '/store', icon: <ShoppingOutlined />, iconColor: iconColor, iconColorActive: colorPrimary },
48-
// { name: 'c.share', path: '/share', icon: <ShareAltOutlined />, iconColor: iconColor, iconColorActive: colorPrimary },
49-
{ name: 'c.readme', path: '/readme', icon: <ReadOutlined />, iconColor: iconColor, iconColorActive: colorPrimary },
45+
{ name: 'c.message', path: '/chat', iconName: 'MessageOutlined', icon: <MessageOutlined />, iconColor: iconColor, iconColorActive: colorPrimary },
46+
{ name: 'c.prompt', path: '/prompt', iconName: 'BulbOutlined', icon: <BulbOutlined />, iconColor: iconColor, iconColorActive: colorPrimary },
47+
{ name: 'c.plugin', path: '/plugin', iconName: 'ApiOutlined', icon: <ApiOutlined />, iconColor: iconColor, iconColorActive: colorPrimary },
48+
// { name: 'c.store', path: '/store',iconName: 'ShoppingOutlined', icon: <ShoppingOutlined />, iconColor: iconColor, iconColorActive: colorPrimary },
49+
// { name: 'c.share', path: '/share',iconName: 'ShareAltOutlined', icon: <ShareAltOutlined />, iconColor: iconColor, iconColorActive: colorPrimary },
50+
{ name: 'c.readme', path: '/readme', iconName: 'ReadOutlined', icon: <ReadOutlined />, iconColor: iconColor, iconColorActive: colorPrimary },
5051
]
5152
const [menu, setMenu] = useState<any>(menuList[0])
5253
const [headTitle, setHeadTitle] = useState<any>(t(menuList[0]?.['name']))
@@ -122,7 +123,7 @@ export default function LayoutBase(props: any) {
122123
algorithm: [theme === 'dark' ? antdTheme.darkAlgorithm : antdTheme.defaultAlgorithm, ...(surfaceConfig?.loose == 'loose' ? [antdTheme.compactAlgorithm] : [])],
123124
}}
124125
>
125-
<AntdApp style={{ height: '100vh', width: '100vw', overflow:'hidden', display:'flex' }}>
126+
<AntdApp style={{ height: '100vh', width: '100vw', overflow: 'hidden', display: 'flex' }}>
126127
<Head>
127128
<title>{title || 'ChatGPT-Plus'}</title>
128129
<meta property="og:title" content={title} key={title} />
@@ -162,12 +163,14 @@ export default function LayoutBase(props: any) {
162163
setHeadTitle(t(item.name))
163164
toUrl(item.path)
164165
}}
166+
type={getActive(item.path) ? 'primary' : 'text'}
165167
ghost={getActive(item.path) ? false : true}
166168
size={'large'}
167-
icon={item.icon}
169+
icon={<Icon name={item.iconName} style={{ color: getActive(item.path) ? '#fff' : theme === 'dark' ? '#fff' : '#555' }} />}
168170
// @ts-ignore
169171
title={t(item.name)}
170-
style={{ border: getActive(item.path) ? undefined : 'none', color: getActive(item.path) ? item.iconColorActive : theme === 'dark' ? item.iconColor : '#555' }}
172+
style={{ border: 'none' }}
173+
// style={{ border: getActive(item.path) ? undefined : 'none', color: getActive(item.path) ? item.iconColorActive : theme === 'dark' ? '#fff' : '#555' }}
171174
>
172175
{collapsed ? '' : t(item.name)}
173176
</Button>
@@ -184,7 +187,9 @@ export default function LayoutBase(props: any) {
184187
style={{ border: 'none', color: '#fff' }}
185188
size={'large'}
186189
// icon={theme === 'dark' ? <SkinFilled style={{ color: iconColor }} /> : <SkinOutlined style={{ color: '#555' }} />}
187-
icon={theme === 'dark' ? <Icon component={IconDark} style={{ color: iconColor, fontSize: '18px' }} /> : <Icon component={IconLight} style={{ color: '#333', fontSize: '20px' }} />}
190+
icon={
191+
theme === 'dark' ? <AntIcon component={IconDark} style={{ color: iconColor, fontSize: '20px' }} /> : <AntIcon component={IconLight} style={{ color: '#333', fontSize: '22px' }} />
192+
}
188193
></Button>
189194
<Button
190195
onClick={() => {
@@ -196,7 +201,7 @@ export default function LayoutBase(props: any) {
196201
size={'large'}
197202
icon={<SettingOutlined style={{ color: theme === 'dark' ? iconColor : '#555' }} />}
198203
></Button>
199-
{/* <Button
204+
<Button
200205
onClick={() => {
201206
setCollapsed(!collapsed)
202207
// setSide(!side)
@@ -208,7 +213,7 @@ export default function LayoutBase(props: any) {
208213
className: 'trigger',
209214
style: { color: theme === 'dark' ? iconColor : '#555' },
210215
})}
211-
></Button> */}
216+
></Button>
212217
<Button
213218
onClick={() => {
214219
setHeadTitle(t('c.github'))
@@ -219,9 +224,11 @@ export default function LayoutBase(props: any) {
219224
size={'large'}
220225
icon={<GithubOutlined style={{ color: theme === 'dark' ? iconColor : '#555' }} />}
221226
></Button>
222-
{packageVersion && <Typography.Paragraph type="secondary" style={{ color: theme === 'dark' ? '#555' : '#ccc', fontSize:'8px', marginBottom:0 }}>
223-
{'v'+packageVersion}
224-
</Typography.Paragraph>}
227+
{packageVersion && (
228+
<Typography.Paragraph type="secondary" style={{ color: theme === 'dark' ? '#555' : '#ccc', fontSize: '8px', marginBottom: 0 }}>
229+
{'v' + packageVersion}
230+
</Typography.Paragraph>
231+
)}
225232
</Space>
226233
</div>
227234
</Sider>

0 commit comments

Comments
 (0)