:feat 新增模型配置页面和相关功能

- 新增模型配置页面组件和路由
- 实现模型配置表单和相关逻辑- 添加全局配置入口和功能- 优化首页布局和样式- 新增 404 页面组件
- 更新部分组件样式和结构

BillNote_frontend/src/pages/SettingPage/Menu.tsx

@@ -0,0 +1,48 @@
+import { BotMessageSquare, Captions, HardDriveDownload, Wrench } from 'lucide-react'
+import MenuBar, { IMenuProps } from '@/pages/SettingPage/components/menuBar.tsx'
+
+const Menu = () => {
+  const menuList: IMenuProps[] = [
+    {
+      id: 'model',
+      name: 'AI 模型设置',
+      icon: <BotMessageSquare />,
+      path: '/settings/model',
+    },
+    {
+      id: ' transcriber',
+      name: '音频转译配置',
+      icon: <Captions />,
+      path: '/settings/transcriber',
+    },
+    //下载配置
+    {
+      id: 'download',
+      name: '下载配置',
+      icon: <HardDriveDownload />,
+      path: '/settings/download',
+    },
+    //其他配置
+    {
+      id: 'other',
+      name: '其他配置',
+      icon: <Wrench />,
+      path: '/settings/other',
+    },
+  ]
+  return (
+    <div className="flex h-full flex-col">
+      <div className={'flex w-full flex-col gap-2'}>
+        <div className="text-2xl font-medium">设置</div>
+        <div className="text-sm font-light text-gray-800">全局配置与模型设置</div>
+      </div>
+      <div className="mt-6 flex-1">
+        {menuList &&
+          menuList.map(item => {
+            return <MenuBar key={item.id} menuItem={item} />
+          })}
+      </div>
+    </div>
+  )
+}
+export default Menu

BillNote_frontend/src/pages/SettingPage/Model.tsx

@@ -0,0 +1,16 @@
+import Provider from '@/components/Form/modelForm/Provider.tsx'
+import { Outlet } from 'react-router-dom'
+
+const Model = () => {
+  return (
+    <div className={'flex h-full bg-white'}>
+      <div className={'flex-1/5 border-r border-neutral-200 p-2'}>
+        <Provider></Provider>
+      </div>
+      <div className={'flex-4/5'}>
+        <Outlet />
+      </div>
+    </div>
+  )
+}
+export default Model

BillNote_frontend/src/pages/SettingPage/components/index.module.css

@@ -0,0 +1,7 @@
+.menuBar {
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+}
+.menuBar:hover {
+  background-color: #f7f7f7;
+}

BillNote_frontend/src/pages/SettingPage/components/menuBar.tsx

@@ -0,0 +1,37 @@
+import styles from './index.module.css'
+import { FC, JSX } from 'react'
+import { Link, useLocation } from 'react-router-dom'
+
+export interface IMenuProps {
+  id: string
+  name: string
+  icon: JSX.Element
+  path: string
+}
+
+interface IMenuItem {
+  menuItem: IMenuProps
+}
+
+const MenuBar: FC<IMenuItem> = ({ menuItem }) => {
+  const location = useLocation()
+  const isActive = location.pathname.startsWith(menuItem.path + '/')
+      || location.pathname === menuItem.path
+
+  return (
+    <Link to={menuItem.path} className="w-full">
+      <div
+        className={
+          styles.menuBar +
+          ' flex h-12 w-full items-center gap-1 rounded px-2' +
+          (isActive ? ' bg-[#F0F0F0] font-semibold text-blue-600' : '')
+        }
+      >
+        <div className="h-6 w-6">{menuItem.icon}</div>
+        <div className="text-[16px]">{menuItem.name}</div>
+      </div>
+    </Link>
+  )
+}
+
+export default MenuBar

BillNote_frontend/src/pages/SettingPage/index.tsx

@@ -0,0 +1,17 @@
+import SettingLayout from '@/layouts/SettingLayout.tsx'
+import Menu from '@/pages/SettingPage/Menu'
+import { useProviderStore } from '@/store/providerStore'
+import { useEffect } from 'react'
+
+const SettingPage = () => {
+  const fetchProviderList = useProviderStore(state => state.fetchProviderList)
+  useEffect(() => {
+    fetchProviderList()
+  }, [])
+  return (
+    <div className="h-full w-full">
+      <SettingLayout Menu={<Menu />} />
+    </div>
+  )
+}
+export default SettingPage