feat: 课程界面: featoc ui

apps/web/src/view/CourseDetail/index.less

@@ -8,31 +8,47 @@
     overflow-y: auto;
     border-right: 1px solid var(--color-border-2);
 
-    > h2 {
-      margin-bottom: 10px;
+    > h3 {
+      margin: 0 0 10px 0;
     }
 
     .toc {
       padding-top: 20px;
       .level-1 {
-        color: var(--color-text-4);
+        color: var(--color-text-3);
         line-height: 1.5;
-        padding-top: 10px;
+        padding-top: 24px;
+        font-size: 13px;
+        &:first-of-type {
+          padding-top: 0;
+        }
       }
       .level-2 {
-        padding: 5px 0;
+        margin: 6px 0;
+        padding: 6px 12px 6px 6px;
+        line-height: 1.5;
         display: flex;
         align-items: center;
         justify-content: space-between;
+        font-size: 14px;
         color: var(--color-text-2);
         cursor: pointer;
         &:hover {
           color: var(--color-text-1);
+          background: var(--color-fill-1);
+          border-radius: 6px;
         }
         &.active {
+          background: var(--color-fill-2);
+          border-radius: 6px;
+          color: var(--color-primary-1);
+          .xicon,
+          .time {
             color: var(--color-primary-1);
           }
+        }
         .xicon {
+          color: var(--color-text-4);
           margin-right: 6px;
         }
         .time {

apps/web/src/view/CourseDetail/index.tsx

@@ -8,6 +8,7 @@ import { getCourseDetailById } from "../../api";
 import { ms2Time } from "./util";
 import Result from "../../components/Result";
 import PlayCircle20Regular from "@ricons/fluent/PlayCircle20Regular";
+import DocumentChevronDouble20Regular from "@ricons/fluent/DocumentChevronDouble20Regular";
 import { Icon } from "@ricons/utils";
 import dayjs from "dayjs";
 
@@ -52,6 +53,11 @@ function CourseDetail() {
               level: 2,
               time: "",
               active: true,
+              icon: (
+                <Icon size={20}>
+                  <DocumentChevronDouble20Regular />
+                </Icon>
+              ),
               view: <Guide mdText={data?.guide.guide_html} />,
             },
             ...processToc,
@@ -83,12 +89,10 @@ function CourseDetail() {
       {toc.length > 0 ? (
         <>
           <aside className="table-of-content">
-            <h2>{course.course_title}</h2>
-            <div>
-              <div style={{ color: "var(--color-text-3)" }}>
+            <h3>{course.course_title}</h3>
+            <div style={{ color: "var(--color-text-3)", fontSize: 13 }}>
               <span>{course.course_createtime}</span>
             </div>
-            </div>
             <div className="toc">
               {toc.map((i: any) => {
                 if (i.level === 1) {
@@ -104,9 +108,11 @@ function CourseDetail() {
                       key={i.title}
                       onClick={() => onclickItem(i)}
                     >
-                      <div className="bs ellipsis fc">
+                      <div className="bs fc">
                         {i.icon}
-                        <span>{i.title}</span>
+                        <span style={{ padding: "0 12px 0 6px" }}>
+                          {i.title}
+                        </span>
                       </div>
                       <span className="time">{i.time}</span>
                     </div>