refactor(ui): 基于v0.17.2，重新优化样式 (#8)

- 移除未使用的 `.white` 样式类和注释掉的代码
- 更新默认用户头像链接
- 调整搜索框和按钮的样式
- 移除未使用的依赖项 `dompurify` 和 `@testing-library/jest-dom`
- 调整头部布局和导航栏顺序
- 优化聊天容器的样式和排版
- 更新翻译文件，添加文档撰写相关文案

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",

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 {

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',
       }}
     >
-      <a href={window.location.origin}>
+      <a>
         <Space
           size={12}
           onClick={handleLogoClick}

web/src/layouts/components/right-toolbar/index.tsx

@@ -1,5 +1,5 @@
 import { useTranslate } from '@/hooks/common-hooks';
-import { DownOutlined, GithubOutlined } from '@ant-design/icons';
+import { DownOutlined } from '@ant-design/icons';
 import { Dropdown, MenuProps, Space } from 'antd';
 import camelCase from 'lodash/camelCase';
 import React from 'react';
@@ -9,7 +9,7 @@ import { useTheme } from '@/components/theme-provider';
 import { LanguageList, LanguageMap } from '@/constants/common';
 import { useChangeLanguage } from '@/hooks/logic-hooks';
 import { useFetchUserInfo } from '@/hooks/user-setting-hooks';
-import { CircleHelp, MoonIcon, SunIcon } from 'lucide-react';
+import { MoonIcon, SunIcon } from 'lucide-react';
 import styled from './index.less';
 
 const Circle = ({ children, ...restProps }: React.PropsWithChildren) => {
@@ -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 = () => {
             <DownOutlined />
           </Space>
         </Dropdown>
-        <Circle>
+        {/* <Circle>
           <GithubOutlined onClick={handleGithubCLick} />
         </Circle>
         <Circle>
           <CircleHelp className="size-4" onClick={handleDocHelpCLick} />
-        </Circle>
+        </Circle> */}
         <Circle>
           {theme === 'dark' ? (
             <MoonIcon onClick={onMoonClick} size={20} />

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'
       }
     />
   );

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: '在此更新您的照片和个人详细信息。',

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;
+    }
   }
 }

web/src/pages/login/index.less

@@ -40,8 +40,6 @@
       background-position: center;
       z-index: -1;
     }
-    .white {
-    }
     .pink {
       color: #e9d7fe;
     }

web/src/pages/login/index.tsx

@@ -17,9 +17,9 @@ const Login = () => {
   const { t } = useTranslation('translation', { keyPrefix: 'login' });
   const loading = signLoading || registerLoading;
 
-  const changeTitle = () => {
+  // const changeTitle = () => {
-    setTitle((title) => (title === 'login' ? 'register' : 'login'));
+  //   setTitle((title) => (title === 'login' ? 'register' : 'login'));
-  };
+  // };
   const [form] = Form.useForm();
 
   useEffect(() => {
@@ -118,7 +118,7 @@ const Login = () => {
                 <Checkbox> {t('rememberMe')}</Checkbox>
               </Form.Item>
             )}
-            <div>
+            {/* <div>
               {title === 'login' && (
                 <div>
                   {t('signInTip')}
@@ -135,7 +135,7 @@ const Login = () => {
                   </Button>
                 </div>
               )}
-            </div>
+            </div> */}
             <Button
               type="primary"
               block

web/src/pages/login/right-panel.tsx

@@ -1,26 +1,21 @@
-import { ReactComponent as Avatars } from '@/assets/svg/login-avatars.svg';
+import { Flex, Typography } from 'antd';
-import SvgIcon from '@/components/svg-icon';
-import { Flex, Rate, Space, Typography } from 'antd';
 import classNames from 'classnames';
 
 import { useTranslate } from '@/hooks/common-hooks';
 import styles from './index.less';
 
-const { Title, Text } = Typography;
+const { Title } = Typography;
 
 const LoginRightPanel = () => {
   const { t } = useTranslate('login');
   return (
     <section className={styles.rightPanel}>
-      <SvgIcon name="login-star" width={80}></SvgIcon>
+      {/* <SvgIcon name="login-star" width={80}></SvgIcon> */}
       <Flex vertical gap={40}>
-        <Title
+        <Title level={1} className={classNames(styles.pink, styles.loginTitle)}>
-          level={1}
-          className={classNames(styles.white, styles.loginTitle)}
-        >
           {t('title')}
         </Title>
-        <Text className={classNames(styles.pink, styles.loginDescription)}>
+        {/* <Text className={classNames(styles.pink, styles.loginDescription)}>
           {t('description')}
         </Text>
         <Flex align="center" gap={16}>
@@ -38,7 +33,7 @@ const LoginRightPanel = () => {
               {t('review')}
             </span>
           </Flex>
-        </Flex>
+        </Flex> */}
       </Flex>
     </section>
   );

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;