From feb1d76942587c100b006f34661ee7997f777788 Mon Sep 17 00:00:00 2001 From: CalciumIon <1808837298@qq.com> Date: Tue, 17 Sep 2024 19:55:18 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E7=95=8C=E9=9D=A2?= =?UTF-8?q?=E6=98=BE=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/src/App.js | 381 ++++++++++++++++---------------- web/src/components/Footer.js | 26 +-- web/src/components/HeaderBar.js | 65 +++++- web/src/components/SiderBar.js | 124 ++++++----- web/src/index.css | 11 +- web/src/index.js | 40 ++-- 6 files changed, 350 insertions(+), 297 deletions(-) diff --git a/web/src/App.js b/web/src/App.js index 0db9a2289..06d582023 100644 --- a/web/src/App.js +++ b/web/src/App.js @@ -24,6 +24,7 @@ import { Layout } from '@douyinfe/semi-ui'; import Midjourney from './pages/Midjourney'; import Pricing from './pages/Pricing/index.js'; import Task from "./pages/Task/index.js"; +import FooterBar from './components/Footer.js'; // import Detail from './pages/Detail'; const Home = lazy(() => import('./pages/Home')); @@ -58,207 +59,205 @@ function App() { }, []); return ( - - - - + + }> + + + } + /> + + + + } + /> + }> + + + } + /> + }> + + + } + /> + + + + } + /> + + + + } + /> + + + + } + /> + }> + + + } + /> + }> + + + } + /> + }> + + + } + /> + }> + + + } + /> + }> + + + } + /> + }> + + + } + /> + }> + + + } + /> + }> - + - } - /> - - - - } - /> - + } + /> + }> - + - } - /> - + } + /> + + + + } + /> + }> - + - } - /> - - - - } - /> - - - - } - /> - - - - } - /> - + } + /> + }> - + - } - /> - + } + /> + }> - + - } - /> - }> - - - } - /> - }> - - - } - /> - }> - - - } - /> - }> - - - } - /> - }> - - - } - /> - - }> - - - - } - /> - - }> - - - - } - /> - - - - } - /> - - }> - - - - } - /> - - }> - - - - } - /> - - }> - - - - } - /> - }> - - - } - /> - }> - - - } - /> - }> - - - } - /> - } /> - - - + + } + /> + }> + + + } + /> + }> + + + } + /> + }> + + + } + /> + } /> + + ); } diff --git a/web/src/components/Footer.js b/web/src/components/Footer.js index 7b80ac70f..891a1aa8a 100644 --- a/web/src/components/Footer.js +++ b/web/src/components/Footer.js @@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react'; import { getFooterHTML, getSystemName } from '../helpers'; import { Layout, Tooltip } from '@douyinfe/semi-ui'; -const Footer = () => { +const FooterBar = () => { const systemName = getSystemName(); const [footer, setFooter] = useState(getFooterHTML()); let remainCheckTimes = 5; @@ -56,19 +56,17 @@ const Footer = () => { }, []); return ( - - - {footer ? ( -
- ) : ( - defaultFooter - )} - - +
+ {footer ? ( +
+ ) : ( + defaultFooter + )} +
); }; -export default Footer; +export default FooterBar; diff --git a/web/src/components/HeaderBar.js b/web/src/components/HeaderBar.js index 5510d4251..b73bb0eea 100644 --- a/web/src/components/HeaderBar.js +++ b/web/src/components/HeaderBar.js @@ -3,14 +3,23 @@ import { Link, useNavigate } from 'react-router-dom'; import { UserContext } from '../context/User'; import { useSetTheme, useTheme } from '../context/Theme'; -import { API, getLogo, getSystemName, showSuccess } from '../helpers'; +import { API, getLogo, getSystemName, isMobile, showSuccess } from '../helpers'; import '../index.css'; import fireworks from 'react-fireworks'; -import { IconHelpCircle, IconKey, IconUser } from '@douyinfe/semi-icons'; +import { + IconHelpCircle, + IconHome, + IconHomeStroked, + IconKey, + IconNoteMoneyStroked, + IconPriceTag, + IconUser +} from '@douyinfe/semi-icons'; import { Avatar, Dropdown, Layout, Nav, Switch } from '@douyinfe/semi-ui'; import { stringToColor } from '../helpers/render'; +import Text from '@douyinfe/semi-ui/lib/es/typography/text'; // HeaderBar Buttons let headerButtons = [ @@ -22,6 +31,21 @@ let headerButtons = [ }, ]; +let buttons = [ + { + text: '首页', + itemKey: 'home', + to: '/', + icon: , + }, + // { + // text: '模型价格', + // itemKey: 'pricing', + // to: '/pricing', + // icon: , + // }, +]; + if (localStorage.getItem('chat_link')) { headerButtons.splice(1, 0, { name: '聊天', @@ -90,6 +114,7 @@ const HeaderBar = () => { about: '/about', login: '/login', register: '/register', + home: '/', }; return ( { selectedKeys={[]} // items={headerButtons} onSelect={(key) => {}} + header={isMobile()?{ + logo: ( + logo + ), + }:{ + logo: ( + logo + ), + text: systemName, + + }} + items={buttons} footer={ <> {isNewYear && ( @@ -121,15 +158,19 @@ const HeaderBar = () => { )} } /> - { - setTheme(checked); - }} - /> + <> + {!isMobile() && ( + { + setTheme(checked); + }} + /> + )} + {userState.user ? ( <> { } + // icon={} /> { const systemName = getSystemName(); const logo = getLogo(); const [isCollapsed, setIsCollapsed] = useState(defaultIsCollapsed); + const theme = useTheme(); + const setTheme = useSetTheme(); const routerMap = { home: '/', @@ -63,11 +67,17 @@ const SiderBar = () => { const headerButtons = useMemo( () => [ + // { + // text: '首页', + // itemKey: 'home', + // to: '/', + // icon: , + // }, { - text: '首页', - itemKey: 'home', - to: '/', - icon: , + text: '模型价格', + itemKey: 'pricing', + to: '/pricing', + icon: , }, { text: '渠道', @@ -104,12 +114,6 @@ const SiderBar = () => { to: '/topup', icon: , }, - { - text: '模型价格', - itemKey: 'pricing', - to: '/pricing', - icon: , - }, { text: '用户管理', itemKey: 'user', @@ -205,48 +209,58 @@ const SiderBar = () => { return ( <> - -
- -
- + ); }; diff --git a/web/src/index.css b/web/src/index.css index 9c77d1890..d373e98e0 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -9,11 +9,12 @@ body { scrollbar-width: none; color: var(--semi-color-text-0) !important; background-color: var(--semi-color-bg-0) !important; - height: 100%; + height: 100vh; } #root { - height: 100%; + height: 100vh; + flex-direction: column; } @media only screen and (max-width: 767px) { @@ -50,9 +51,9 @@ body { } } -.semi-layout { - height: 100%; -} +/*.semi-layout {*/ +/* height: 100%;*/ +/*}*/ .tableShow { display: revert; diff --git a/web/src/index.js b/web/src/index.js index 94b22862b..3def4a939 100644 --- a/web/src/index.js +++ b/web/src/index.js @@ -3,7 +3,6 @@ import ReactDOM from 'react-dom/client'; import { BrowserRouter } from 'react-router-dom'; import App from './App'; import HeaderBar from './components/HeaderBar'; -import Footer from './components/Footer'; import 'semantic-ui-offline/semantic.min.css'; import './index.css'; import { UserProvider } from './context/User'; @@ -13,35 +12,36 @@ import { StatusProvider } from './context/Status'; import { Layout } from '@douyinfe/semi-ui'; import SiderBar from './components/SiderBar'; import { ThemeProvider } from './context/Theme'; +import FooterBar from './components/Footer'; // initialization const root = ReactDOM.createRoot(document.getElementById('root')); -const { Sider, Content, Header } = Layout; +const { Sider, Content, Header, Footer } = Layout; root.render( - - - - - -
- -
- - - - -
- + +
+ +
+ + + + + + + + + + + +