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

- 移除未使用的 `.white` 样式类和注释掉的代码 - 更新默认用户头像链接 - 调整搜索框和按钮的样式 - 移除未使用的依赖项 `dompurify` 和 `@testing-library/jest-dom` - 调整头部布局和导航栏顺序 - 优化聊天容器的样式和排版 - 更新翻译文件，添加文档撰写相关文案
2025-03-31 23:49:02 +08:00 · 2025-03-31 23:49:02 +08:00 · 699c4c7f0b
parent 4624f89cc1
commit 699c4c7f0b
11 changed files with 145 additions and 42 deletions
--- 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",
--- 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 {
--- 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',
      }}
    >
-      <a href={window.location.origin}>
+      <a>
        <Space
          size={12}
          onClick={handleLogoClick}
--- a/web/src/layouts/components/right-toolbar/index.tsx
+++ b/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} />
--- 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'
      }
    />
  );
--- 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: '在此更新您的照片和个人详细信息。',
--- 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;
+    }
  }
 }
--- 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;
    }
--- 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 = () => {
                <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
--- a/web/src/pages/login/right-panel.tsx
+++ b/web/src/pages/login/right-panel.tsx
@ -1,26 +1,21 @@
-import { ReactComponent as Avatars } from '@/assets/svg/login-avatars.svg';
-import SvgIcon from '@/components/svg-icon';
-import { Flex, Rate, Space, Typography } from 'antd';
+import { Flex, 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
-          level={1}
-          className={classNames(styles.white, styles.loginTitle)}
-        >
+        <Title level={1} className={classNames(styles.pink, 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>
  );
--- 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;