feat: add app version

src/renderer/src/pages/home/components/Message.tsx

@@ -11,7 +11,7 @@ const MessageItem: FC<{ message: Message }> = ({ message }) => {
       <AvatarWrapper>
         {message.role === 'assistant' ? <Avatar src={Logo} /> : <Avatar alt="Alice Swift">Y</Avatar>}
       </AvatarWrapper>
-      <div className="markdown" dangerouslySetInnerHTML={{ __html: marked(message.content) }}></div>
+      <div className="markdown" dangerouslySetInnerHTML={{ __html: marked(message.content) }} />
     </MessageContainer>
   )
 }

src/renderer/src/pages/settings/AboutSettings.tsx

@@ -1,12 +1,66 @@
-import { FC } from 'react'
+import { Avatar } 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 { marked } from 'marked'
+
+const changeLog = ``
 
 const AboutSettings: FC = () => {
-  return <Container>About</Container>
+  const [version, setVersion] = useState('')
+
+  useEffect(() => {
+    runAsyncFunction(async () => {
+      const appInfo = await window.api.getAppInfo()
+      setVersion(appInfo.version)
+    })
+  }, [])
+
+  return (
+    <Container>
+      <Avatar src={Logo} size={100} style={{ marginTop: 50 }} />
+      <Title>
+        Cherry Studio <Version>(v{version})</Version>
+      </Title>
+      <Description>A powerful AI assistant for producer.</Description>
+      <div
+        className="markdown"
+        style={{ width: '80%' }}
+        dangerouslySetInnerHTML={{
+          __html: marked(changeLog)
+        }}
+      />
+    </Container>
+  )
 }
 
 const Container = styled.div`
   padding: 20px;
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+`
+
+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;
+`
+
+const Description = styled.div`
+  font-size: 14px;
+  color: var(--color-text-2);
+  text-align: center;
 `
 
 export default AboutSettings