:sparkles: course

dashboard/src/Router.tsx

@@ -59,6 +59,11 @@ import StudioGroupList from "./pages/studio/group/list";
 import StudioGroupEdit from "./pages/studio/group/edit";
 import StudioGroupShow from "./pages/studio/group/show";
 
+import StudioCourse from "./pages/studio/course";
+import StudioCourseList from "./pages/studio/course/list";
+import StudioCourseEdit from "./pages/studio/course/edit";
+import StudioCourseShow from "./pages/studio/course/show";
+
 import StudioDict from "./pages/studio/dict";
 import StudioDictList from "./pages/studio/dict/list";
 
@@ -159,30 +164,44 @@ const Widget = () => {
         <Route path="home" element={<StudioHome />} />
         <Route path="palicanon" element={<StudioPalicanon />}></Route>
         <Route path="recent" element={<StudioRecent />}></Route>
+
         <Route path="channel" element={<StudioChannel />}>
           <Route path="list" element={<StudioChannelList />} />
           <Route path=":channelid/edit" element={<StudioChannelEdit />} />
         </Route>
+
         <Route path="group" element={<StudioGroup />}>
           <Route path="list" element={<StudioGroupList />} />
           <Route path=":groupid" element={<StudioGroupShow />} />
           <Route path=":groupid/edit" element={<StudioGroupEdit />} />
           <Route path=":groupid/show" element={<StudioGroupShow />} />
         </Route>
+
+        <Route path="course" element={<StudioCourse />}>
+          <Route path="list" element={<StudioCourseList />} />
+          <Route path=":courseId" element={<StudioCourseShow />} />
+          <Route path=":courseId/edit" element={<StudioCourseEdit />} />
+          <Route path=":courseId/show" element={<StudioCourseShow />} />
+        </Route>
+
         <Route path="dict" element={<StudioDict />}>
           <Route path="list" element={<StudioDictList />} />
         </Route>
+
         <Route path="term" element={<StudioTerm />}>
           <Route path="list" element={<StudioTermList />} />
         </Route>
+
         <Route path="article" element={<StudioArticle />}>
           <Route path="list" element={<StudioArticleList />} />
           <Route path=":articleid/edit" element={<StudioArticleEdit />} />
         </Route>
+
         <Route path="anthology" element={<StudioAnthology />}>
           <Route path="list" element={<StudioAnthologyList />}></Route>
           <Route path=":anthology_id/edit" element={<StudioAnthologyEdit />} />
         </Route>
+
         <Route path="analysis" element={<StudioAnalysis />}>
           <Route path="list" element={<StudioAnalysisList />} />
         </Route>

dashboard/src/components/studio/LeftSider.tsx

@@ -5,166 +5,173 @@ import type { MenuProps } from "antd";
 import { Affix, Layout } from "antd";
 import { Menu } from "antd";
 import {
-	AppstoreOutlined,
-	HomeOutlined,
-	TeamOutlined,
+  AppstoreOutlined,
+  HomeOutlined,
+  TeamOutlined,
 } from "@ant-design/icons";
 
 const { Sider } = Layout;
 
 const onClick: MenuProps["onClick"] = (e) => {
-	console.log("click ", e);
+  console.log("click ", e);
 };
 
 type IWidgetHeadBar = {
-	selectedKeys?: string;
+  selectedKeys?: string;
 };
 const Widget = ({ selectedKeys = "" }: IWidgetHeadBar) => {
-	//Library head bar
-	const intl = useIntl(); //i18n
-	const { studioname } = useParams();
-	const linkPalicanon = "/studio/" + studioname + "/palicanon";
-	const linkRecent = "/studio/" + studioname + "/recent";
-	const linkChannel = "/studio/" + studioname + "/channel/list";
-	const linkGroup = "/studio/" + studioname + "/group/list";
-	const linkUserdict = "/studio/" + studioname + "/dict/list";
-	const linkTerm = "/studio/" + studioname + "/term/list";
-	const linkArticle = "/studio/" + studioname + "/article/list";
-	const linkAnthology = "/studio/" + studioname + "/anthology/list";
-	const linkAnalysis = "/studio/" + studioname + "/analysis/list";
+  //Library head bar
+  const intl = useIntl(); //i18n
+  const { studioname } = useParams();
+  const linkPalicanon = "/studio/" + studioname + "/palicanon";
+  const linkRecent = "/studio/" + studioname + "/recent";
+  const linkChannel = "/studio/" + studioname + "/channel/list";
+  const linkGroup = "/studio/" + studioname + "/group/list";
+  const linkUserdict = "/studio/" + studioname + "/dict/list";
+  const linkTerm = "/studio/" + studioname + "/term/list";
+  const linkArticle = "/studio/" + studioname + "/article/list";
+  const linkAnthology = "/studio/" + studioname + "/anthology/list";
+  const linkAnalysis = "/studio/" + studioname + "/analysis/list";
+  const linkCourse = "/studio/" + studioname + "/course/list";
 
-	const items: MenuProps["items"] = [
-		{
-			label: "常用",
-			key: "basic",
-			icon: <HomeOutlined />,
-			children: [
-				{
-					label: (
-						<Link to={linkPalicanon}>
-							{intl.formatMessage({
-								id: "columns.studio.palicanon.title",
-							})}
-						</Link>
-					),
-					key: "palicanon",
-				},
-				{
-					label: (
-						<Link to={linkRecent}>
-							{intl.formatMessage({
-								id: "columns.studio.recent.title",
-							})}
-						</Link>
-					),
-					key: "recent",
-				},
-				{
-					label: (
-						<Link to={linkChannel}>
-							{intl.formatMessage({
-								id: "columns.studio.channel.title",
-							})}
-						</Link>
-					),
-					key: "channel",
-				},
-				{
-					label: (
-						<Link to={linkAnalysis}>
-							{intl.formatMessage({
-								id: "columns.studio.analysis.title",
-							})}
-						</Link>
-					),
-					key: "analysis",
-				},
-			],
-		},
-		{
-			label: "高级",
-			key: "advance",
-			icon: <AppstoreOutlined />,
-			children: [
-				{
-					label: (
-						<Link to={linkUserdict}>
-							{intl.formatMessage({
-								id: "columns.studio.userdict.title",
-							})}
-						</Link>
-					),
-					key: "userdict",
-				},
-				{
-					label: (
-						<Link to={linkTerm}>
-							{intl.formatMessage({
-								id: "columns.studio.term.title",
-							})}
-						</Link>
-					),
-					key: "term",
-				},
-				{
-					label: (
-						<Link to={linkArticle}>
-							{intl.formatMessage({
-								id: "columns.studio.article.title",
-							})}
-						</Link>
-					),
-					key: "article",
-				},
-				{
-					label: (
-						<Link to={linkAnthology}>
-							{intl.formatMessage({
-								id: "columns.studio.anthology.title",
-							})}
-						</Link>
-					),
-					key: "anthology",
-				},
-			],
-		},
-		{
-			label: "协作",
-			key: "collaboration",
-			icon: <TeamOutlined />,
-			children: [
-				{
-					label: (
-						<Link to={linkGroup}>
-							{intl.formatMessage({
-								id: "columns.studio.group.title",
-							})}
-						</Link>
-					),
-					key: "group",
-				},
-			],
-		},
-	];
+  const items: MenuProps["items"] = [
+    {
+      label: "常用",
+      key: "basic",
+      icon: <HomeOutlined />,
+      children: [
+        {
+          label: (
+            <Link to={linkPalicanon}>
+              {intl.formatMessage({
+                id: "columns.studio.palicanon.title",
+              })}
+            </Link>
+          ),
+          key: "palicanon",
+        },
+        {
+          label: (
+            <Link to={linkRecent}>
+              {intl.formatMessage({
+                id: "columns.studio.recent.title",
+              })}
+            </Link>
+          ),
+          key: "recent",
+        },
+        {
+          label: (
+            <Link to={linkChannel}>
+              {intl.formatMessage({
+                id: "columns.studio.channel.title",
+              })}
+            </Link>
+          ),
+          key: "channel",
+        },
+        {
+          label: (
+            <Link to={linkAnalysis}>
+              {intl.formatMessage({
+                id: "columns.studio.analysis.title",
+              })}
+            </Link>
+          ),
+          key: "analysis",
+        },
+      ],
+    },
+    {
+      label: "高级",
+      key: "advance",
+      icon: <AppstoreOutlined />,
+      children: [
+        {
+          label: (
+            <Link to={linkCourse}>
+              {intl.formatMessage({
+                id: "columns.library.course.title",
+              })}
+            </Link>
+          ),
+          key: "course",
+        },
+        {
+          label: (
+            <Link to={linkUserdict}>
+              {intl.formatMessage({
+                id: "columns.studio.userdict.title",
+              })}
+            </Link>
+          ),
+          key: "userdict",
+        },
+        {
+          label: (
+            <Link to={linkTerm}>
+              {intl.formatMessage({
+                id: "columns.studio.term.title",
+              })}
+            </Link>
+          ),
+          key: "term",
+        },
+        {
+          label: (
+            <Link to={linkArticle}>
+              {intl.formatMessage({
+                id: "columns.studio.article.title",
+              })}
+            </Link>
+          ),
+          key: "article",
+        },
+        {
+          label: (
+            <Link to={linkAnthology}>
+              {intl.formatMessage({
+                id: "columns.studio.anthology.title",
+              })}
+            </Link>
+          ),
+          key: "anthology",
+        },
+      ],
+    },
+    {
+      label: "协作",
+      key: "collaboration",
+      icon: <TeamOutlined />,
+      children: [
+        {
+          label: (
+            <Link to={linkGroup}>
+              {intl.formatMessage({
+                id: "columns.studio.group.title",
+              })}
+            </Link>
+          ),
+          key: "group",
+        },
+      ],
+    },
+  ];
 
-	return (
-		<Affix offsetTop={0}>
-			<Sider
-				width={200}
-				breakpoint="lg"
-				className="site-layout-background"
-			>
-				<Menu
-					theme="light"
-					onClick={onClick}
-					defaultSelectedKeys={[selectedKeys]}
-					defaultOpenKeys={["basic", "advance", "collaboration"]}
-					mode="inline"
-					items={items}
-				/>
-			</Sider>
-		</Affix>
-	);
+  return (
+    <Affix offsetTop={0}>
+      <Sider width={200} breakpoint="lg" className="site-layout-background">
+        <Menu
+          theme="light"
+          onClick={onClick}
+          defaultSelectedKeys={[selectedKeys]}
+          defaultOpenKeys={["basic", "advance", "collaboration"]}
+          mode="inline"
+          items={items}
+        />
+      </Sider>
+    </Affix>
+  );
 };
 
 export default Widget;

dashboard/src/pages/studio/course/edit.tsx

@@ -0,0 +1,19 @@
+import { Card } from "antd";
+import { useState } from "react";
+import { useIntl } from "react-intl";
+import { useParams } from "react-router-dom";
+import GoBack from "../../../components/studio/GoBack";
+
+const Widget = () => {
+  const intl = useIntl();
+  const { studioname, courseId } = useParams(); //url 参数
+  const [title, setTitle] = useState("Loading");
+
+  return (
+    <Card
+      title={<GoBack to={`/studio/${studioname}/course/list`} title={title} />}
+    ></Card>
+  );
+};
+
+export default Widget;

dashboard/src/pages/studio/course/index.tsx

@@ -0,0 +1,22 @@
+import { Outlet } from "react-router-dom";
+import { Layout } from "antd";
+
+import LeftSider from "../../../components/studio/LeftSider";
+import { styleStudioContent } from "../style";
+
+const { Content } = Layout;
+
+const Widget = () => {
+  return (
+    <Layout>
+      <Layout>
+        <LeftSider selectedKeys="course" />
+        <Content style={styleStudioContent}>
+          <Outlet />
+        </Content>
+      </Layout>
+    </Layout>
+  );
+};
+
+export default Widget;

dashboard/src/pages/studio/course/list.tsx

@@ -0,0 +1,10 @@
+import { useParams } from "react-router-dom";
+import { useIntl } from "react-intl";
+
+const Widget = () => {
+  const intl = useIntl(); //i18n
+  const { studioname } = useParams(); //url 参数
+  return <>{studioname}</>;
+};
+
+export default Widget;

dashboard/src/pages/studio/course/show.tsx

@@ -0,0 +1,27 @@
+import { useIntl } from "react-intl";
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import { Button, Card } from "antd";
+
+import GoBack from "../../../components/studio/GoBack";
+
+const Widget = () => {
+  const intl = useIntl();
+  const { studioname, courseId } = useParams(); //url 参数
+  const [title, setTitle] = useState("loading");
+  useEffect(() => {
+    setTitle("title");
+  }, [courseId]);
+  return (
+    <Card
+      title={<GoBack to={`/studio/${studioname}/course/list`} title={title} />}
+      extra={
+        <Button type="link" danger>
+          {intl.formatMessage({ id: "buttons.group.exit" })}
+        </Button>
+      }
+    ></Card>
+  );
+};
+
+export default Widget;