feat: 视频库

apps/admin/src/App.tsx

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

apps/admin/src/layout/index.tsx

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

apps/admin/src/router/index.tsx

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

apps/admin/src/view/Course/Create/index.tsx

@@ -1,5 +1,25 @@
+import { Button, Form, Input, InputNumber, Row, Space } from "antd";
+
 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;

apps/admin/src/view/Course/Library/index.tsx

@@ -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;