feat: 视频库

This commit is contained in:
mozzie 2023-03-06 17:57:41 +08:00
parent b6f239a38e
commit 1b4175c8d0
5 changed files with 136 additions and 7 deletions

View File

@ -2,14 +2,19 @@ import { Navigate, Route, Routes } from "react-router-dom";
import "./assets/less/common.less"; import "./assets/less/common.less";
import Layout from "./layout"; import Layout from "./layout";
import Login from "./view/Login"; import Login from "./view/Login";
import { ConfigProvider as AntDesignConfigProvider } from "antd";
import zhCN from 'antd/locale/zh_CN';
function App() { function App() {
return ( return (
<AntDesignConfigProvider locale={zhCN}>
<Routes> <Routes>
<Route key={"login"} path={"/login"} element={<Login />} /> <Route key={"login"} path={"/login"} element={<Login />} />
<Route key={"dash"} path={"/*"} element={<Layout />} /> <Route key={"dash"} path={"/*"} element={<Layout />} />
<Route path="*" element={<span>404</span>} /> <Route path="*" element={<span>404</span>} />
</Routes> </Routes>
</AntDesignConfigProvider>
); );
} }

View File

@ -18,6 +18,10 @@ const sideMenus: MenuProps["items"] = [
key: "create", key: "create",
label: "创建", label: "创建",
}, },
{
key: "library",
label: "视频库",
},
], ],
}, },
{ {

View File

@ -26,7 +26,12 @@ export const sideMenuRoutes: IRoute[] = [
{ {
path: "/course/create", path: "/course/create",
element: lazy(() => import("../view/Course/Create")), element: lazy(() => import("../view/Course/Create")),
name: "课程创建", name: "创建课程",
},
{
path: "/course/library",
element: lazy(() => import("../view/Course/Library")),
name: "视频库",
}, },
{ {
path: "/user", path: "/user",

View File

@ -1,5 +1,25 @@
import { Button, Form, Input, InputNumber, Row, Space } from "antd";
const CourseCreate = () => { const CourseCreate = () => {
return <div></div>; return (
<div>
<Form>
<Form.Item
wrapperCol={{ span: 24 }}
name="title"
rules={[{ required: true, message: "Please input your username!" }]}
>
<Input placeholder="标题" />
</Form.Item>
<Form.Item>
<InputNumber placeholder="售价" />
</Form.Item>
<Form.Item>
<Button type="primary"></Button>
</Form.Item>
</Form>
</div>
);
}; };
export default CourseCreate; export default CourseCreate;

View File

@ -0,0 +1,95 @@
import { CloudSyncOutlined } from "@ant-design/icons";
import {
Button,
Card,
Col,
Row,
Space,
Table,
Input,
Segmented,
Tooltip,
Image,
} from "antd";
const { Search } = Input;
const Library = () => {
const dataSource = [
{
key: "1",
name: "K线篇1--特殊K线的量化描述.mp4",
duration: 845,
cover: (
<Image
height={60}
src="https://1500018521.vod2.myqcloud.com/a28b6648vodtranssh1500018521/8a1352da243791580308966554/coverBySnapshot_10_0.jpg"
/>
),
},
{
key: "2",
name: "Vite + React + TS - Google Chrome 2023-02-15 09-55-08.mp4",
duration: 16,
cover: (
<Image
height={60}
src="https://1500018521.vod2.myqcloud.com/a28b6648vodtranssh1500018521/29226db4243791580097740418/coverBySnapshot/coverBySnapshot_10_0.jpg"
/>
),
},
];
const columns = [
{
title: "媒体文件名称",
dataIndex: "name",
key: "name",
},
{
title: "时长",
dataIndex: "duration",
key: "duration",
},
{
title: "封面图片地址",
dataIndex: "cover",
key: "cover",
},
];
const onSearch = (value: string) => console.log(value);
return (
<div>
<Row>
<Col span={20}>
<Space>
<Segmented options={["生", "熟"]} />
<Search
placeholder="根据名称搜索视频"
onSearch={onSearch}
style={{ width: 200 }}
/>
</Space>
</Col>
<Col span={4} style={{ textAlign: "right" }}>
<Tooltip title="从腾讯云VOD同步全部视频" placement="left">
<Button type="primary" icon={<CloudSyncOutlined />}>
</Button>
</Tooltip>
</Col>
</Row>
<Row style={{ marginTop: "16px" }}>
<Col span={24}>
<Card>
<Table dataSource={dataSource} columns={columns} />
</Card>
</Col>
</Row>
</div>
);
};
export default Library;