From 2969a05f1001720f8fd4f6821afeeffa2a7d366c Mon Sep 17 00:00:00 2001 From: kangfenmao Date: Fri, 2 Aug 2024 10:39:13 +0800 Subject: [PATCH] feat: enhance markdown style --- src/renderer/src/assets/styles/markdown.scss | 95 ++++++++++++++++++- src/renderer/src/assets/styles/scrollbar.scss | 1 + .../src/pages/home/components/Assistants.tsx | 2 +- .../src/pages/home/components/Message.tsx | 30 +++--- .../pages/home/components/input/Inputbar.tsx | 9 +- .../home/components/markdown/Markdown.tsx | 4 +- .../home/components/sidebar/RightSidebar.tsx | 1 + .../home/components/sidebar/TopicsTab.tsx | 2 +- src/renderer/src/providers/AntdProvider.tsx | 2 +- 9 files changed, 116 insertions(+), 30 deletions(-) diff --git a/src/renderer/src/assets/styles/markdown.scss b/src/renderer/src/assets/styles/markdown.scss index c9e59368..61efd1b5 100644 --- a/src/renderer/src/assets/styles/markdown.scss +++ b/src/renderer/src/assets/styles/markdown.scss @@ -33,10 +33,14 @@ h1 { font-size: 2em; + border-bottom: 0.5px solid var(--color-border); + padding-bottom: 0.3em; } h2 { font-size: 1.5em; + border-bottom: 0.5px solid var(--color-border); + padding-bottom: 0.3em; } h3 { @@ -69,11 +73,16 @@ margin-bottom: 0.5em; } + li > ul, + li > ol { + margin: 0.5em 0; + } + hr { border: none; - border-top: 1px solid #555; + border-top: 0.5px solid var(--color-border); margin: 20px 0; - background-color: #555; + background-color: var(--color-border); } span { @@ -82,6 +91,7 @@ code { white-space: pre-wrap; + font-family: 'Courier New', Courier, monospace; } p code { @@ -90,7 +100,84 @@ border-radius: 5px; } - pre pre { - margin: 0 !important; + pre { + white-space: pre-wrap; + padding: 1em; + border-radius: 5px; + overflow-x: auto; + pre { + margin: 0 !important; + } + code { + background: none; + padding: 0; + border-radius: 0; + } + } + + blockquote { + margin: 1em 0; + padding-left: 1em; + color: var(--color-text-light); + border-left: 4px solid var(--color-border); + } + + table { + border-collapse: collapse; + margin: 1em 0; + width: 100%; + } + + th, + td { + border: 0.5px solid var(--color-border); + padding: 0.5em; + } + + th { + background-color: var(--color-background-mute); + font-weight: bold; + } + + img { + max-width: 100%; + height: auto; + } + + a { + color: var(--color-primary); + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } + + strong { + font-weight: bold; + } + + em { + font-style: italic; + } + + del { + text-decoration: line-through; + } + + sup, + sub { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + + sup { + top: -0.5em; + } + + sub { + bottom: -0.25em; } } diff --git a/src/renderer/src/assets/styles/scrollbar.scss b/src/renderer/src/assets/styles/scrollbar.scss index 10865ced..190fe369 100644 --- a/src/renderer/src/assets/styles/scrollbar.scss +++ b/src/renderer/src/assets/styles/scrollbar.scss @@ -1,6 +1,7 @@ /* 全局初始化滚动条样式 */ ::-webkit-scrollbar { width: 3px; + height: 3px; } ::-webkit-scrollbar-track { diff --git a/src/renderer/src/pages/home/components/Assistants.tsx b/src/renderer/src/pages/home/components/Assistants.tsx index ec9c5fa9..26dd031e 100644 --- a/src/renderer/src/pages/home/components/Assistants.tsx +++ b/src/renderer/src/pages/home/components/Assistants.tsx @@ -146,7 +146,7 @@ const AssistantItem = styled.div` flex-direction: column; padding: 7px 10px; position: relative; - border-radius: 3px; + border-radius: 8px; cursor: pointer; font-family: Poppins; .anticon { diff --git a/src/renderer/src/pages/home/components/Message.tsx b/src/renderer/src/pages/home/components/Message.tsx index 66b811cb..0bf0c77a 100644 --- a/src/renderer/src/pages/home/components/Message.tsx +++ b/src/renderer/src/pages/home/components/Message.tsx @@ -4,6 +4,7 @@ import { DeleteOutlined, EditOutlined, MenuOutlined, + QuestionCircleOutlined, SaveOutlined, SyncOutlined } from '@ant-design/icons' @@ -15,7 +16,7 @@ import { useRuntime } from '@renderer/hooks/useStore' import { EVENT_NAMES, EventEmitter } from '@renderer/services/event' import { Message } from '@renderer/types' import { firstLetter, removeLeadingEmoji } from '@renderer/utils' -import { Avatar, Dropdown, Tooltip } from 'antd' +import { Avatar, Dropdown, Popconfirm, Tooltip } from 'antd' import dayjs from 'dayjs' import { upperFirst } from 'lodash' import { FC, memo, useCallback, useMemo, useState } from 'react' @@ -52,17 +53,6 @@ const MessageItem: FC = ({ message, index, showMenu, onDeleteMessage }) = setTimeout(() => setCopied(false), 2000) }, [message.content, t]) - const onDelete = useCallback(async () => { - const confirmed = await window.modal.confirm({ - icon: null, - title: t('message.message.delete.title'), - content: t('message.message.delete.content'), - okText: t('common.delete'), - okType: 'danger' - }) - confirmed && onDeleteMessage?.(message) - }, [message, onDeleteMessage, t]) - const onEdit = useCallback(() => EventEmitter.emit(EVENT_NAMES.EDIT_MESSAGE, message), [message]) const onRegenerate = useCallback(() => { @@ -142,11 +132,17 @@ const MessageItem: FC = ({ message, index, showMenu, onDeleteMessage }) = {copied && } - - - - - + } + onConfirm={() => onDeleteMessage?.(message)}> + + + + + + {canRegenerate && ( diff --git a/src/renderer/src/pages/home/components/input/Inputbar.tsx b/src/renderer/src/pages/home/components/input/Inputbar.tsx index 55e11a69..cbfb53f0 100644 --- a/src/renderer/src/pages/home/components/input/Inputbar.tsx +++ b/src/renderer/src/pages/home/components/input/Inputbar.tsx @@ -5,7 +5,8 @@ import { FullscreenOutlined, HistoryOutlined, PauseCircleOutlined, - PlusCircleOutlined + PlusCircleOutlined, + QuestionCircleOutlined } from '@ant-design/icons' import { DEFAULT_CONEXTCOUNT } from '@renderer/config/constant' import { useAssistant } from '@renderer/hooks/useAssistant' @@ -149,11 +150,11 @@ const Inputbar: FC = ({ assistant, setActiveTopic }) => { } okText={t('assistant.input.clear')}> diff --git a/src/renderer/src/pages/home/components/markdown/Markdown.tsx b/src/renderer/src/pages/home/components/markdown/Markdown.tsx index ad8fb52a..d5400f14 100644 --- a/src/renderer/src/pages/home/components/markdown/Markdown.tsx +++ b/src/renderer/src/pages/home/components/markdown/Markdown.tsx @@ -33,13 +33,13 @@ const Markdown: FC = ({ message }) => { {getMessageContent(message)} ) - }, [getMessageContent, message, t]) + }, [getMessageContent, message]) } export default Markdown diff --git a/src/renderer/src/pages/home/components/sidebar/RightSidebar.tsx b/src/renderer/src/pages/home/components/sidebar/RightSidebar.tsx index 50ace29f..48bddf5a 100644 --- a/src/renderer/src/pages/home/components/sidebar/RightSidebar.tsx +++ b/src/renderer/src/pages/home/components/sidebar/RightSidebar.tsx @@ -108,6 +108,7 @@ const Tab = styled.div` const TabContent = styled.div` display: flex; flex: 1; + flex-direction: column; overflow-y: auto; ` diff --git a/src/renderer/src/pages/home/components/sidebar/TopicsTab.tsx b/src/renderer/src/pages/home/components/sidebar/TopicsTab.tsx index aa1d9805..44355857 100644 --- a/src/renderer/src/pages/home/components/sidebar/TopicsTab.tsx +++ b/src/renderer/src/pages/home/components/sidebar/TopicsTab.tsx @@ -142,7 +142,7 @@ const Container = styled.div` const TopicListItem = styled.div` padding: 8px 10px; cursor: pointer; - border-radius: 3px; + border-radius: 8px; font-size: 14px; white-space: nowrap; overflow: hidden; diff --git a/src/renderer/src/providers/AntdProvider.tsx b/src/renderer/src/providers/AntdProvider.tsx index b68699dd..8ebca1ac 100644 --- a/src/renderer/src/providers/AntdProvider.tsx +++ b/src/renderer/src/providers/AntdProvider.tsx @@ -16,7 +16,7 @@ const AntdProvider: FC = ({ children }) => { algorithm: [_theme === 'dark' ? theme.darkAlgorithm : theme.defaultAlgorithm], token: { colorPrimary: '#00b96b', - borderRadius: 3 + borderRadius: 8 } }}> {children}