添加文档引用，图片上传测试，显示公告
YCC
2 years ago
parent
9ba37b94bc
commit
be9efb8e60
@ -1,117 +1,117 @@
|
||||
import { Outlet, Link, useHref, useLocation } from "react-router-dom";
|
||||
import { useEffect } from 'react';
|
||||
import { useEffect } from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import { Layout, Menu, ConfigProvider, theme, Dropdown, Space, Row, Col, App as AntApp } from 'antd';
|
||||
import {
|
||||
DownOutlined
|
||||
} from '@ant-design/icons';
|
||||
import 'antd/dist/reset.css';
|
||||
import AppLogo from '@/assets/logo-gh.png'
|
||||
import { useStore } from '@/stores/StoreContext.js';
|
||||
import { Layout, Menu, ConfigProvider, theme, Dropdown, Space, Row, Col, Alert, App as AntApp } from "antd";
|
||||
import { DownOutlined } from "@ant-design/icons";
|
||||
import "antd/dist/reset.css";
|
||||
import AppLogo from "@/assets/logo-gh.png";
|
||||
import { useStore } from "@/stores/StoreContext.js";
|
||||
|
||||
const { Header, Content, Footer } = Layout;
|
||||
const items = [
|
||||
{
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="#">
|
||||
Profile
|
||||
</a>
|
||||
),
|
||||
key: '0',
|
||||
},
|
||||
{
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="#">
|
||||
Privacy
|
||||
</a>
|
||||
),
|
||||
key: '1',
|
||||
},
|
||||
{
|
||||
type: 'divider',
|
||||
},
|
||||
{
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="#">
|
||||
Logout
|
||||
</a>
|
||||
),
|
||||
key: '3',
|
||||
},
|
||||
]
|
||||
{
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="#">
|
||||
Profile
|
||||
</a>
|
||||
),
|
||||
key: "0",
|
||||
},
|
||||
{
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="#">
|
||||
Privacy
|
||||
</a>
|
||||
),
|
||||
key: "1",
|
||||
},
|
||||
{
|
||||
type: "divider",
|
||||
},
|
||||
{
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="#">
|
||||
Logout
|
||||
</a>
|
||||
),
|
||||
key: "3",
|
||||
},
|
||||
];
|
||||
function App() {
|
||||
const { authStore } = useStore();
|
||||
|
||||
const { authStore } = useStore();
|
||||
const href = useHref();
|
||||
|
||||
const href = useHref();
|
||||
let location = useLocation();
|
||||
useEffect(() => {
|
||||
// Check location
|
||||
console.info("location.pathname: " + location.pathname);
|
||||
}, [location]);
|
||||
|
||||
let location = useLocation();
|
||||
useEffect(() => {
|
||||
// Check location
|
||||
console.info('location.pathname: ' + location.pathname)
|
||||
}, [location]);
|
||||
const {
|
||||
token: { colorBgContainer },
|
||||
} = theme.useToken();
|
||||
|
||||
const {
|
||||
token: { colorBgContainer },
|
||||
} = theme.useToken();
|
||||
return (
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
token: {
|
||||
colorPrimary: "#00b96b",
|
||||
},
|
||||
algorithm: theme.defaultAlgorithm,
|
||||
}}>
|
||||
<AntApp>
|
||||
<Layout
|
||||
style={{
|
||||
minHeight: "100vh",
|
||||
}}>
|
||||
<Header className="header" style={{ position: "sticky", top: 0, zIndex: 1, width: "100%" }}>
|
||||
<Row gutter={{ md: 24 }} justify="end">
|
||||
<Col span={20}>
|
||||
<img src={AppLogo} className="logo" alt="App logo" />
|
||||
<Menu
|
||||
theme="dark"
|
||||
mode="horizontal"
|
||||
defaultSelectedKeys={[href]}
|
||||
items={[
|
||||
{ key: "/reservation/newest", label: <Link to="/reservation/newest">Reservation</Link> },
|
||||
{ key: "/feedback", label: <Link to="/feedback">Feedback</Link> },
|
||||
{ key: "/invoice/list", label: <Link to="/invoice/list">Invoice</Link> },
|
||||
]}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Dropdown
|
||||
menu={{
|
||||
items,
|
||||
}}>
|
||||
<a onClick={e => e.preventDefault()}>
|
||||
<Space>
|
||||
{authStore.login.username}
|
||||
<DownOutlined />
|
||||
</Space>
|
||||
</a>
|
||||
</Dropdown>
|
||||
</Col>
|
||||
</Row>
|
||||
</Header>
|
||||
|
||||
return (
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
token: {
|
||||
colorPrimary: '#00b96b',
|
||||
},
|
||||
algorithm: theme.defaultAlgorithm,
|
||||
}}
|
||||
>
|
||||
<AntApp>
|
||||
<Layout
|
||||
style={{
|
||||
minHeight: "100vh",
|
||||
}}>
|
||||
<Header className="header" style={{ position: 'sticky', top: 0, zIndex: 1, width: '100%' }}>
|
||||
<Row gutter={{ md: 24 }} justify="end">
|
||||
<Col span={20}>
|
||||
<img src={AppLogo} className="logo" alt="App logo" />
|
||||
<Menu theme="dark" mode="horizontal" defaultSelectedKeys={[href]} items={
|
||||
[
|
||||
{ key: '/reservation/newest', label: <Link to="/reservation/newest">Reservation</Link> },
|
||||
{ key: '/feedback', label: <Link to="/feedback">Feedback</Link> },
|
||||
{ key: '/invoice/list', label: <Link to="/invoice/list">Invoice</Link> }
|
||||
]
|
||||
} />
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Dropdown
|
||||
menu={{
|
||||
items
|
||||
}}
|
||||
>
|
||||
<a onClick={(e) => e.preventDefault()}>
|
||||
<Space>
|
||||
{authStore.login.username}
|
||||
<DownOutlined />
|
||||
</Space>
|
||||
</a>
|
||||
</Dropdown>
|
||||
</Col>
|
||||
</Row>
|
||||
</Header>
|
||||
<Content
|
||||
style={{
|
||||
padding: 24,
|
||||
margin: 0,
|
||||
minHeight: 280,
|
||||
background: colorBgContainer,
|
||||
}}>
|
||||
<Outlet />
|
||||
</Content>
|
||||
<Footer>
|
||||
</Footer>
|
||||
</Layout>
|
||||
</AntApp>
|
||||
</ConfigProvider>
|
||||
);
|
||||
<Alert message="公告 查看后不再显示，或者一直显示，或者放到页面底部" description="" type="info" banner closable />
|
||||
|
||||
<Content
|
||||
style={{
|
||||
padding: 24,
|
||||
margin: 0,
|
||||
minHeight: 280,
|
||||
background: colorBgContainer,
|
||||
}}>
|
||||
<Outlet />
|
||||
</Content>
|
||||
<Footer></Footer>
|
||||
</Layout>
|
||||
</AntApp>
|
||||
</ConfigProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default observer(App);
|
||||
Loading…
Reference in New Issue