feat: update sidebar menu with interactive tooltips and painting terminology
This commit is contained in:
kangfenmao
parent
8a8deda002
commit
61ceca2363
@ -5,6 +5,7 @@ import { useTheme } from '@renderer/context/ThemeProvider'
|
||||
import useAvatar from '@renderer/hooks/useAvatar'
|
||||
import { useRuntime } from '@renderer/hooks/useRuntime'
|
||||
import { useSettings } from '@renderer/hooks/useSettings'
|
||||
import { Tooltip } from 'antd'
|
||||
import { Avatar } from 'antd'
|
||||
import { FC } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
@ -50,44 +51,59 @@ const Sidebar: FC = () => {
|
||||
<AvatarImg src={avatar || UserAvatar} draggable={false} className="nodrag" onClick={onEditUser} />
|
||||
<MainMenus>
|
||||
<Menus onClick={MinApp.onClose}>
|
||||
<Tooltip title={t('assistants.title')} mouseEnterDelay={0.5} placement="right">
|
||||
<StyledLink onClick={() => to('/')}>
|
||||
<Icon className={isRoute('/')}>
|
||||
<i className="iconfont icon-chat" />
|
||||
</Icon>
|
||||
</StyledLink>
|
||||
</Tooltip>
|
||||
<Tooltip title={t('agents.title')} mouseEnterDelay={0.5} placement="right">
|
||||
<StyledLink onClick={() => to('/agents')}>
|
||||
<Icon className={isRoutes('/agents')}>
|
||||
<i className="iconfont icon-business-smart-assistant" />
|
||||
</Icon>
|
||||
</StyledLink>
|
||||
</Tooltip>
|
||||
<Tooltip title={t('paintings.title')} mouseEnterDelay={0.5} placement="right">
|
||||
<StyledLink onClick={() => to('/paintings')}>
|
||||
<Icon className={isRoute('/paintings')}>
|
||||
<PictureOutlined style={{ fontSize: 16 }} />
|
||||
</Icon>
|
||||
</StyledLink>
|
||||
</Tooltip>
|
||||
<Tooltip title={t('translate.title')} mouseEnterDelay={0.5} placement="right">
|
||||
<StyledLink onClick={() => to('/translate')}>
|
||||
<Icon className={isRoute('/translate')}>
|
||||
<TranslationOutlined />
|
||||
</Icon>
|
||||
</StyledLink>
|
||||
</Tooltip>
|
||||
<Tooltip title={t('minapp.title')} mouseEnterDelay={0.5} placement="right">
|
||||
<StyledLink onClick={() => to('/apps')}>
|
||||
<Icon className={isRoute('/apps')}>
|
||||
<i className="iconfont icon-appstore" />
|
||||
</Icon>
|
||||
</StyledLink>
|
||||
</Tooltip>
|
||||
<Tooltip title={t('files.title')} mouseEnterDelay={0.5} placement="right">
|
||||
<StyledLink onClick={() => to('/files')}>
|
||||
<Icon className={isRoute('/files')}>
|
||||
<FolderOutlined />
|
||||
</Icon>
|
||||
</StyledLink>
|
||||
</Tooltip>
|
||||
<Tooltip title={t('history.title')} mouseEnterDelay={0.5} placement="right">
|
||||
<StyledLink onClick={() => to('/messages')}>
|
||||
<Icon className={isRoutes('/messages')}>
|
||||
<FileSearchOutlined />
|
||||
</Icon>
|
||||
</StyledLink>
|
||||
</Tooltip>
|
||||
</Menus>
|
||||
</MainMenus>
|
||||
<Menus onClick={MinApp.onClose}>
|
||||
<Tooltip title={t('settings.theme.title')} mouseEnterDelay={0.5} placement="right">
|
||||
<Icon onClick={() => toggleTheme()}>
|
||||
{theme === 'dark' ? (
|
||||
<i className="iconfont icon-theme icon-dark1" />
|
||||
@ -95,12 +111,14 @@ const Sidebar: FC = () => {
|
||||
<i className="iconfont icon-theme icon-theme-light" />
|
||||
)}
|
||||
</Icon>
|
||||
|
||||
</Tooltip>
|
||||
<Tooltip title={t('settings.title')} mouseEnterDelay={0.5} placement="right">
|
||||
<StyledLink onClick={() => to(isLocalAi ? '/settings/assistant' : '/settings/provider')}>
|
||||
<Icon className={pathname.startsWith('/settings') ? 'active' : ''}>
|
||||
<i className="iconfont icon-setting" />
|
||||
</Icon>
|
||||
</StyledLink>
|
||||
</Tooltip>
|
||||
</Menus>
|
||||
</Container>
|
||||
)
|
||||
|
||||
@ -145,7 +145,7 @@
|
||||
"stream_output": "流式输出",
|
||||
"search": "搜索模型..."
|
||||
},
|
||||
"images": {
|
||||
"paintings": {
|
||||
"title": "图片",
|
||||
"image.size": "图片尺寸",
|
||||
"button.new.image": "新建图片",
|
||||
|
||||
@ -45,7 +45,7 @@ const PaintingsList: FC<PaintingsListProps> = ({
|
||||
</Canvas>
|
||||
<DeleteButton>
|
||||
<Popconfirm
|
||||
title={t('images.button.delete.image.confirm')}
|
||||
title={t('paintings.button.delete.image.confirm')}
|
||||
onConfirm={() => onDeletePainting(item)}
|
||||
okButtonProps={{ danger: true }}
|
||||
placement="left">
|
||||
|
||||
@ -107,7 +107,7 @@ const PaintingsPage: FC = () => {
|
||||
const onGenerate = async () => {
|
||||
if (painting.files.length > 0) {
|
||||
const confirmed = await window.modal.confirm({
|
||||
content: t('images.regenerate.confirm'),
|
||||
content: t('paintings.regenerate.confirm'),
|
||||
centered: true
|
||||
})
|
||||
|
||||
@ -252,11 +252,11 @@ const PaintingsPage: FC = () => {
|
||||
return (
|
||||
<Container>
|
||||
<Navbar>
|
||||
<NavbarCenter style={{ borderRight: 'none' }}>{t('images.title')}</NavbarCenter>
|
||||
<NavbarCenter style={{ borderRight: 'none' }}>{t('paintings.title')}</NavbarCenter>
|
||||
{isMac && (
|
||||
<NavbarRight style={{ justifyContent: 'flex-end' }}>
|
||||
<Button size="small" className="nodrag" icon={<PlusOutlined />} onClick={() => setPainting(addPainting())}>
|
||||
{t('images.button.new.image')}
|
||||
{t('paintings.button.new.image')}
|
||||
</Button>
|
||||
</NavbarRight>
|
||||
)}
|
||||
@ -271,7 +271,7 @@ const PaintingsPage: FC = () => {
|
||||
/>
|
||||
<SettingTitle style={{ marginBottom: 5, marginTop: 15 }}>{t('common.model')}</SettingTitle>
|
||||
<Select value={painting.model} options={modelOptions} onChange={onSelectModel} />
|
||||
<SettingTitle style={{ marginBottom: 5, marginTop: 15 }}>{t('images.image.size')}</SettingTitle>
|
||||
<SettingTitle style={{ marginBottom: 5, marginTop: 15 }}>{t('paintings.image.size')}</SettingTitle>
|
||||
<Radio.Group
|
||||
value={painting.imageSize}
|
||||
onChange={(e) => onSelectImageSize(e.target.value)}
|
||||
@ -287,8 +287,8 @@ const PaintingsPage: FC = () => {
|
||||
</Radio.Group>
|
||||
|
||||
<SettingTitle style={{ marginBottom: 5, marginTop: 15 }}>
|
||||
{t('images.number_images')}
|
||||
<Tooltip title={t('images.number_images_tip')}>
|
||||
{t('paintings.number_images')}
|
||||
<Tooltip title={t('paintings.number_images_tip')}>
|
||||
<InfoIcon />
|
||||
</Tooltip>
|
||||
</SettingTitle>
|
||||
@ -300,8 +300,8 @@ const PaintingsPage: FC = () => {
|
||||
/>
|
||||
|
||||
<SettingTitle style={{ marginBottom: 5, marginTop: 15 }}>
|
||||
{t('images.seed')}
|
||||
<Tooltip title={t('images.seed_tip')}>
|
||||
{t('paintings.seed')}
|
||||
<Tooltip title={t('paintings.seed_tip')}>
|
||||
<InfoIcon />
|
||||
</Tooltip>
|
||||
</SettingTitle>
|
||||
@ -312,8 +312,8 @@ const PaintingsPage: FC = () => {
|
||||
/>
|
||||
|
||||
<SettingTitle style={{ marginBottom: 5, marginTop: 15 }}>
|
||||
{t('images.inference_steps')}
|
||||
<Tooltip title={t('images.inference_steps_tip')}>
|
||||
{t('paintings.inference_steps')}
|
||||
<Tooltip title={t('paintings.inference_steps_tip')}>
|
||||
<InfoIcon />
|
||||
</Tooltip>
|
||||
</SettingTitle>
|
||||
@ -326,8 +326,8 @@ const PaintingsPage: FC = () => {
|
||||
/>
|
||||
|
||||
<SettingTitle style={{ marginBottom: 5, marginTop: 15 }}>
|
||||
{t('images.guidance_scale')}
|
||||
<Tooltip title={t('images.guidance_scale_tip')}>
|
||||
{t('paintings.guidance_scale')}
|
||||
<Tooltip title={t('paintings.guidance_scale_tip')}>
|
||||
<InfoIcon />
|
||||
</Tooltip>
|
||||
</SettingTitle>
|
||||
@ -347,8 +347,8 @@ const PaintingsPage: FC = () => {
|
||||
/>
|
||||
|
||||
<SettingTitle style={{ marginBottom: 5, marginTop: 15 }}>
|
||||
{t('images.negative_prompt')}
|
||||
<Tooltip title={t('images.negative_prompt_tip')}>
|
||||
{t('paintings.negative_prompt')}
|
||||
<Tooltip title={t('paintings.negative_prompt_tip')}>
|
||||
<InfoIcon />
|
||||
</Tooltip>
|
||||
</SettingTitle>
|
||||
@ -374,7 +374,7 @@ const PaintingsPage: FC = () => {
|
||||
disabled={isLoading}
|
||||
value={painting.prompt}
|
||||
onChange={(e) => updatePaintingState({ prompt: e.target.value })}
|
||||
placeholder={t('images.prompt_placeholder')}
|
||||
placeholder={t('paintings.prompt_placeholder')}
|
||||
/>
|
||||
<Toolbar>
|
||||
<ToolbarMenu>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user