Make the app name configurable even after the project is built (#731)

### What problem does this PR solve?

Make the app name configurable even after the project is built #730 

### Type of change

- [x] New Feature (non-breaking change which adds functionality)

web/src/layouts/components/header/index.less

@@ -18,6 +18,7 @@
 
 .appIcon {
   vertical-align: middle;
+  max-width: 36px;
 }
 
 .appName {

web/src/layouts/components/header/index.tsx

@@ -1,7 +1,6 @@
 import { ReactComponent as StarIon } from '@/assets/svg/chat-star.svg';
 import { ReactComponent as FileIcon } from '@/assets/svg/file-management.svg';
 import { ReactComponent as KnowledgeBaseIcon } from '@/assets/svg/knowledge-base.svg';
-import { ReactComponent as Logo } from '@/assets/svg/logo.svg';
 import { useTranslate } from '@/hooks/commonHooks';
 import { useNavigateWithFromState } from '@/hooks/routeHook';
 import { Layout, Radio, Space, theme } from 'antd';
@@ -9,6 +8,7 @@ import { useCallback, useMemo } from 'react';
 import { useLocation } from 'umi';
 import Toolbar from '../right-toolbar';
 
+import { useFetchAppConf } from '@/hooks/logicHooks';
 import styles from './index.less';
 
 const { Header } = Layout;
@@ -20,6 +20,7 @@ const RagHeader = () => {
   const navigate = useNavigateWithFromState();
   const { pathname } = useLocation();
   const { t } = useTranslate('header');
+  const appConf = useFetchAppConf();
 
   const tagsData = useMemo(
     () => [
@@ -56,8 +57,8 @@ const RagHeader = () => {
       }}
     >
       <Space size={12} onClick={handleLogoClick} className={styles.logoWrapper}>
-        <Logo className={styles.appIcon}></Logo>
-        <span className={styles.appName}>RAGFlow</span>
+        <img src="/logo.svg" alt="" className={styles.appIcon} />
+        <span className={styles.appName}>{appConf.appName}</span>
       </Space>
       <Space size={[0, 8]} wrap>
         <Radio.Group