From 40d687104eaab3bb12889f5136b4677fef898459 Mon Sep 17 00:00:00 2001 From: kangfenmao Date: Mon, 22 Jul 2024 14:24:14 +0800 Subject: [PATCH] feat: new about page --- src/renderer/src/i18n/index.ts | 30 +++- .../src/pages/settings/AboutSettings.tsx | 139 ++++++++++++------ .../pages/settings/components/Changelog.tsx | 9 +- 3 files changed, 120 insertions(+), 58 deletions(-) diff --git a/src/renderer/src/i18n/index.ts b/src/renderer/src/i18n/index.ts index b63d2cb5..40fe5d05 100644 --- a/src/renderer/src/i18n/index.ts +++ b/src/renderer/src/i18n/index.ts @@ -97,11 +97,11 @@ const resources = { }, settings: { title: 'Settings', - general: 'General', + general: 'General Settings', provider: 'Model Provider', model: 'Model Settings', assistant: 'Default Assistant', - about: 'About', + about: 'About & Feedback', 'general.title': 'General Settings', 'provider.api_key': 'API Key', 'provider.check': 'Check', @@ -133,7 +133,16 @@ const resources = { 'provider.delete.title': 'Delete Provider', 'provider.delete.content': 'Are you sure you want to delete this provider?', 'provider.edit.name': 'Provider Name', - 'provider.edit.name.placeholder': 'Example: OpenAI' + 'provider.edit.name.placeholder': 'Example: OpenAI', + 'about.title': 'About', + 'about.releases.title': 'Release Notes', + 'about.releases.button': 'Releases', + 'about.website.title': 'Official Website', + 'about.website.button': 'Website', + 'about.feedback.title': 'Feedback', + 'about.feedback.button': 'Feedback', + 'about.contact.title': 'Contact', + 'about.contact.button': 'Email' } } }, @@ -236,7 +245,7 @@ const resources = { provider: '模型提供商', model: '模型设置', assistant: '默认助手', - about: '关于', + about: '关于我们', 'general.title': '常规设置', 'provider.api_key': 'API 密钥', 'provider.check': '检查', @@ -259,7 +268,7 @@ const resources = { 'models.empty': '没有模型', 'assistant.title': '默认助手', 'assistant.model_params': '模型参数', - 'about.description': '一个为创造者而生的 AI 助手', + 'about.description': '一款为创造者而生的 AI 助手', 'about.updateNotAvailable': '你的软件已是最新版本', 'about.checkingUpdate': '正在检查更新...', 'about.updateError': '更新出错', @@ -268,7 +277,16 @@ const resources = { 'provider.delete.title': '删除提供商', 'provider.delete.content': '确定要删除此模型提供商吗?', 'provider.edit.name': '模型提供商名称', - 'provider.edit.name.placeholder': '例如 OpenAI' + 'provider.edit.name.placeholder': '例如 OpenAI', + 'about.title': '关于我们', + 'about.releases.title': '📔 更新日志', + 'about.releases.button': '查看', + 'about.website.title': '🌐 官方网站', + 'about.website.button': '查看', + 'about.feedback.title': '📝 意见反馈', + 'about.feedback.button': '反馈', + 'about.contact.title': '📧 邮件联系', + 'about.contact.button': '邮件' } } } diff --git a/src/renderer/src/pages/settings/AboutSettings.tsx b/src/renderer/src/pages/settings/AboutSettings.tsx index 65de78d4..4a74810a 100644 --- a/src/renderer/src/pages/settings/AboutSettings.tsx +++ b/src/renderer/src/pages/settings/AboutSettings.tsx @@ -1,12 +1,12 @@ -import { Avatar, Button, Progress } from 'antd' +import { Avatar, Button, Progress, Row, Tag } from 'antd' import { FC, useEffect, useState } from 'react' import styled from 'styled-components' import Logo from '@renderer/assets/images/logo.png' import { runAsyncFunction } from '@renderer/utils' import { useTranslation } from 'react-i18next' -import Changelog from './components/Changelog' import { debounce } from 'lodash' import { ProgressInfo } from 'electron-updater' +import { SettingContainer, SettingDivider, SettingRow, SettingRowTitle, SettingTitle } from './components' const AboutSettings: FC = () => { const [version, setVersion] = useState('') @@ -26,8 +26,17 @@ const AboutSettings: FC = () => { { leading: true, trailing: false } ) - const onOpenWebsite = (suffix = '') => { - window.api.openWebsite('https://github.com/kangfenmao/cherry-studio' + suffix) + const onOpenWebsite = (url: string) => { + window.api.openWebsite(url) + } + + const mailto = async () => { + const email = 'kangfenmao@qq.com' + const subject = 'Cherry Studio Feedback' + const version = (await window.api.getAppInfo()).version + const platform = window.electron.process.platform + const url = `mailto:${email}?subject=${subject}&body=%0A%0AVersion: ${version} | Platform: ${platform}` + onOpenWebsite(url) } useEffect(() => { @@ -69,57 +78,92 @@ const AboutSettings: FC = () => { }, [t]) return ( - - onOpenWebsite()}> - {percent > 0 && ( - - )} - - - - Cherry Studio <Version onClick={() => onOpenWebsite('/releases')}>(v{version})</Version> - - {t('settings.about.description')} - - {downloading ? t('settings.about.downloading') : t('settings.about.checkUpdate')} - - - + + {t('settings.about.title')} + + + + onOpenWebsite('https://github.com/kangfenmao/cherry-studio')}> + {percent > 0 && ( + + )} + + + + Cherry Studio + {t('settings.about.description')} + onOpenWebsite('https://github.com/kangfenmao/cherry-studio/releases')} + color="cyan" + style={{ marginTop: 8, cursor: 'pointer' }}> + v{version} + + + + + {downloading ? t('settings.about.downloading') : t('settings.about.checkUpdate')} + + + + + {t('settings.about.releases.title')} + + + + + {t('settings.about.website.title')} + + + + + {t('settings.about.feedback.title')} + + + + + {t('settings.about.contact.title')} + + + + ) } -const Container = styled.div` +const AboutHeader = styled.div` display: flex; - flex: 1; - flex-direction: column; + flex-direction: row; align-items: center; - justify-content: flex-start; - height: calc(100vh - var(--navbar-height)); - overflow-y: scroll; - padding: 0; - padding-bottom: 50px; + justify-content: space-between; + width: 100%; + padding: 5px 0; +` + +const VersionWrapper = styled.div` + display: flex; + flex-direction: column; + min-height: 80px; + justify-content: center; + align-items: flex-start; ` const Title = styled.div` font-size: 20px; font-weight: bold; color: var(--color-text-1); - margin: 10px 0; -` - -const Version = styled.span` - font-size: 14px; - color: var(--color-text-2); - margin: 10px 0; - text-align: center; - cursor: pointer; + margin-bottom: 5px; ` const Description = styled.div` @@ -128,18 +172,17 @@ const Description = styled.div` text-align: center; ` -const CheckUpdateButton = styled(Button)` - margin-top: 10px; -` +const CheckUpdateButton = styled(Button)`` const AvatarWrapper = styled.div` position: relative; cursor: pointer; + margin-right: 15px; ` const ProgressCircle = styled(Progress)` position: absolute; - top: 48px; + top: -2px; left: -2px; ` diff --git a/src/renderer/src/pages/settings/components/Changelog.tsx b/src/renderer/src/pages/settings/components/Changelog.tsx index a842c9b9..f0949c6e 100644 --- a/src/renderer/src/pages/settings/components/Changelog.tsx +++ b/src/renderer/src/pages/settings/components/Changelog.tsx @@ -18,12 +18,13 @@ const Changelog: FC = () => { } const Container = styled.div` + display: flex; + flex: 1; font-size: 14px; - background-color: var(--color-background-soft); - margin-top: 40px; padding: 20px; - border-radius: 5px; - width: 650px; + width: 100%; + overflow-y: scroll; + border-left: 0.5px solid var(--color-border); ` export default Changelog