From 699c4c7f0b38bbebf739b86ff84fcec918575936 Mon Sep 17 00:00:00 2001 From: zstar <65890619+zstar1003@users.noreply.github.com> Date: Mon, 31 Mar 2025 23:49:02 +0800 Subject: [PATCH] =?UTF-8?q?refactor(ui):=20=E5=9F=BA=E4=BA=8Ev0.17.2?= =?UTF-8?q?=EF=BC=8C=E9=87=8D=E6=96=B0=E4=BC=98=E5=8C=96=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=20(#8)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 移除未使用的 `.white` 样式类和注释掉的代码 - 更新默认用户头像链接 - 调整搜索框和按钮的样式 - 移除未使用的依赖项 `dompurify` 和 `@testing-library/jest-dom` - 调整头部布局和导航栏顺序 - 优化聊天容器的样式和排版 - 更新翻译文件,添加文档撰写相关文案 --- web/package.json | 2 - web/src/layouts/components/header/index.less | 16 +++++ web/src/layouts/components/header/index.tsx | 9 +-- .../components/right-toolbar/index.tsx | 18 ++---- web/src/layouts/components/user/index.tsx | 2 +- web/src/locales/zh.ts | 41 +++++++++++- web/src/pages/chat/chat-container/index.less | 64 +++++++++++++++++++ web/src/pages/login/index.less | 2 - web/src/pages/login/index.tsx | 10 +-- web/src/pages/login/right-panel.tsx | 17 ++--- web/src/pages/search/index.less | 6 +- 11 files changed, 145 insertions(+), 42 deletions(-) diff --git a/web/package.json b/web/package.json index edc0f1b..919cd25 100644 --- a/web/package.json +++ b/web/package.json @@ -65,7 +65,6 @@ "cmdk": "^1.0.4", "dayjs": "^1.11.10", "docx": "^9.3.0", - "dompurify": "^3.1.6", "eventsource-parser": "^1.1.2", "file-saver": "^2.0.5", "human-id": "^4.1.1", @@ -113,7 +112,6 @@ "devDependencies": { "@react-dev-inspector/umi4-plugin": "^2.0.1", "@redux-devtools/extension": "^3.3.0", - "@testing-library/jest-dom": "^6.4.5", "@testing-library/react": "^15.0.7", "@types/file-saver": "^2.0.7", "@types/jest": "^29.5.12", diff --git a/web/src/layouts/components/header/index.less b/web/src/layouts/components/header/index.less index 76f1078..0640aa0 100644 --- a/web/src/layouts/components/header/index.less +++ b/web/src/layouts/components/header/index.less @@ -68,6 +68,14 @@ color: white; } } + :global { + .ant-radio-button-wrapper:nth-child(3) { + margin-right: 500px; + } + .ant-radio-button-wrapper:nth-child(1) { + margin-left: 500px; + } + } } .radioGroupDark { @@ -108,6 +116,14 @@ color: white; } } + :global { + .ant-radio-button-wrapper:nth-child(3) { + margin-right: 500px; + } + .ant-radio-button-wrapper:nth-child(1) { + margin-left: 500px; + } + } } .ant-radio-button-wrapper-checked { diff --git a/web/src/layouts/components/header/index.tsx b/web/src/layouts/components/header/index.tsx index 87a6d3b..784b2a2 100644 --- a/web/src/layouts/components/header/index.tsx +++ b/web/src/layouts/components/header/index.tsx @@ -1,6 +1,6 @@ import { ReactComponent as FileIcon } from '@/assets/svg/file-management.svg'; -import { ReactComponent as GraphIcon } from '@/assets/svg/graph.svg'; import { ReactComponent as KnowledgeBaseIcon } from '@/assets/svg/knowledge-base.svg'; +import { ReactComponent as WriteIcon } from '@/assets/svg/write.svg'; import { useTranslate } from '@/hooks/common-hooks'; import { useFetchAppConf } from '@/hooks/logic-hooks'; import { useNavigateWithFromState } from '@/hooks/route-hook'; @@ -26,10 +26,11 @@ const RagHeader = () => { const { theme: themeRag } = useTheme(); const tagsData = useMemo( () => [ - { path: '/knowledge', name: t('knowledgeBase'), icon: KnowledgeBaseIcon }, { path: '/chat', name: t('chat'), icon: MessageOutlined }, + { path: '/knowledge', name: t('knowledgeBase'), icon: KnowledgeBaseIcon }, + { path: '/write', name: t('write'), icon: WriteIcon }, { path: '/search', name: t('search'), icon: SearchOutlined }, - { path: '/flow', name: t('flow'), icon: GraphIcon }, + // { path: '/flow', name: t('flow'), icon: GraphIcon }, { path: '/file', name: t('fileManager'), icon: FileIcon }, ], [t], @@ -65,7 +66,7 @@ const RagHeader = () => { height: '72px', }} > - + { @@ -20,21 +20,13 @@ const Circle = ({ children, ...restProps }: React.PropsWithChildren) => { ); }; -const handleGithubCLick = () => { - window.open('https://github.com/infiniflow/ragflow', 'target'); -}; - -const handleDocHelpCLick = () => { - window.open('https://ragflow.io/docs/dev/category/guides', 'target'); -}; - const RightToolBar = () => { const { t } = useTranslate('common'); const changeLanguage = useChangeLanguage(); const { setTheme, theme } = useTheme(); const { - data: { language = 'English' }, + data: { language = '简体中文' }, } = useFetchUserInfo(); const handleItemClick: MenuProps['onClick'] = ({ key }) => { @@ -64,12 +56,12 @@ const RightToolBar = () => { - + {/* - + */} {theme === 'dark' ? ( diff --git a/web/src/layouts/components/user/index.tsx b/web/src/layouts/components/user/index.tsx index 833c32d..504e4e0 100644 --- a/web/src/layouts/components/user/index.tsx +++ b/web/src/layouts/components/user/index.tsx @@ -19,7 +19,7 @@ const App: React.FC = () => { className={styles.clickAvailable} src={ userInfo.avatar ?? - 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' + 'https://picx.zhimg.com/v2-aaf12b68b54b8812e6b449e7368d30cf_l.jpg' } /> ); diff --git a/web/src/locales/zh.ts b/web/src/locales/zh.ts index fba42a2..26fc935 100644 --- a/web/src/locales/zh.ts +++ b/web/src/locales/zh.ts @@ -54,7 +54,7 @@ export default { nicknamePlaceholder: '请输入名称', register: '创建账户', continue: '继续', - title: '开始构建您的智能助手', + title: 'Ragflow-Plus', description: '免费注册以探索顶级 RAG 技术。 创建知识库和人工智能来增强您的业务', review: '来自 500 多条评论', @@ -70,6 +70,7 @@ export default { fileManager: '文件管理', flow: 'Agent', search: '搜索', + write: "文档撰写", }, knowledgeList: { welcome: '欢迎回来', @@ -537,6 +538,44 @@ General:实体和关系提取提示来自 GitHub - microsoft/graphrag:基于 tavilyApiKeyMessage: '请输入你的 Tavily API Key', tavilyApiKeyHelp: '如何获取?', }, + write: { + writeDocument: '文档撰写', + writePlaceholder: '请输入文档内容...', + save: '导出为Word', + templateList: '模板列表', + defaultTemplate: '项目申报书', + technicalDoc: '学术论文', + meetingMinutes: '会议纪要', + select: '选择', + aiAssistant: 'AI 助手', + askAI: '输入您的问题与AI交流...', + edit: '编辑模式', + split: '分屏模式', + preview: '预览模式', + previewPlaceholder: '请输入文档内容...', + + // 模板标题和内容 + defaultTemplateTitle: '申报书文档标题', + introduction: '1. 引言', + mainContent: '2. 主要内容', + conclusion: '3. 结论', + technicalDocTitle: '学术论文', + overview: '1. 摘要', + requirements: '2. 研究背景', + architecture: '3. 研究方法', + implementation: '4. 实验结果', + testing: '5. 讨论分析', + deployment: '6. 结论', + maintenance: '7. 参考文献', + meetingMinutesTitle: '会议纪要', + date: '日期', + participants: '参会人员', + agenda: '议程', + discussions: '讨论内容', + decisions: '决定事项', + actionItems: '行动项', + nextMeeting: '下次会议', + }, setting: { profile: '概要', profileDescription: '在此更新您的照片和个人详细信息。', diff --git a/web/src/pages/chat/chat-container/index.less b/web/src/pages/chat/chat-container/index.less index 8430b1e..8bd4051 100644 --- a/web/src/pages/chat/chat-container/index.less +++ b/web/src/pages/chat/chat-container/index.less @@ -1,7 +1,71 @@ .chatContainer { padding: 0 0 24px 24px; + background: #fff; + border-radius: 12px; + color: #333; .messageContainer { overflow-y: auto; padding-right: 24px; + + h1, + h2, + h3, + h4, + h5, + h6 { + font-weight: bold; + line-height: 1.2; + border-bottom: 2px solid #eaeaea; + padding-bottom: 0.25em; + font-size: 24px; + margin: 0.25em 0.25em; + } + section { + margin-top: 1em; + margin-bottom: 1em; + font-size: 20px; + p { + margin-left: 0; + } + } + p { + margin-top: 1em; + margin-bottom: 1em; + margin-left: 1em; + font-size: 20px; + } + ul, + ol { + margin: 1em 0; + padding-left: 1.8em; + li { + margin-bottom: 0.25em; + font-size: 20px; + } + } + table { + width: 80%; + border-collapse: collapse; + margin-left: 1em; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + } + + thead { + background-color: #023b67; + color: #fff; + } + + th, + td { + border: none; + padding: 12px; + text-align: left; + font-size: 20px; + border-bottom: 1px solid #ddd; + } + + tr:hover { + background-color: #a6c5ff; + } } } diff --git a/web/src/pages/login/index.less b/web/src/pages/login/index.less index 61c5d54..f24203e 100644 --- a/web/src/pages/login/index.less +++ b/web/src/pages/login/index.less @@ -40,8 +40,6 @@ background-position: center; z-index: -1; } - .white { - } .pink { color: #e9d7fe; } diff --git a/web/src/pages/login/index.tsx b/web/src/pages/login/index.tsx index 0bc24cf..721a169 100644 --- a/web/src/pages/login/index.tsx +++ b/web/src/pages/login/index.tsx @@ -17,9 +17,9 @@ const Login = () => { const { t } = useTranslation('translation', { keyPrefix: 'login' }); const loading = signLoading || registerLoading; - const changeTitle = () => { - setTitle((title) => (title === 'login' ? 'register' : 'login')); - }; + // const changeTitle = () => { + // setTitle((title) => (title === 'login' ? 'register' : 'login')); + // }; const [form] = Form.useForm(); useEffect(() => { @@ -118,7 +118,7 @@ const Login = () => { {t('rememberMe')} )} - + {/* {title === 'login' && ( {t('signInTip')} @@ -135,7 +135,7 @@ const Login = () => { )} - + */} { const { t } = useTranslate('login'); return ( - + {/* */} - + {t('title')} - + {/* {t('description')} @@ -38,7 +33,7 @@ const LoginRightPanel = () => { {t('review')} - + */} ); diff --git a/web/src/pages/search/index.less b/web/src/pages/search/index.less index b39f982..967a837 100644 --- a/web/src/pages/search/index.less +++ b/web/src/pages/search/index.less @@ -105,7 +105,7 @@ .input() { :global(.ant-input-affix-wrapper) { - padding: 4px 12px; + padding: 0px 12px; border-start-start-radius: 30px !important; border-end-start-radius: 30px !important; } @@ -116,7 +116,7 @@ height: 40px; } button { - height: 50px !important; + height: 40px !important; border-start-end-radius: 30px !important; border-end-end-radius: 30px !important; } @@ -157,7 +157,7 @@ background-size: 200% auto; color: #fff; background-clip: text; - text-fill-color: transparent; + -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: textclip 1.5s linear infinite;