From 912f667e6d5d32e0838b481d2066b6f4daadef6c Mon Sep 17 00:00:00 2001
From: mozzie <himozzie@foxmail.com>
Date: Thu, 23 Mar 2023 15:45:32 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=AF=BE=E7=A8=8B=E7=95=8C=E9=9D=A2:?=
 =?UTF-8?q?=20featoc=20ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/view/CourseDetail/index.less | 26 ++++++++++++++++++-----
 apps/web/src/view/CourseDetail/index.tsx  | 20 +++++++++++------
 2 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/apps/web/src/view/CourseDetail/index.less b/apps/web/src/view/CourseDetail/index.less
index 43991ad..a42125e 100644
--- a/apps/web/src/view/CourseDetail/index.less
+++ b/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 {
diff --git a/apps/web/src/view/CourseDetail/index.tsx b/apps/web/src/view/CourseDetail/index.tsx
index cd3a7bc..0793e8f 100644
--- a/apps/web/src/view/CourseDetail/index.tsx
+++ b/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,11 +89,9 @@ function CourseDetail() {
       {toc.length > 0 ? (
         <>
           <aside className="table-of-content">
-            <h2>{course.course_title}</h2>
-            <div>
-              <div style={{ color: "var(--color-text-3)" }}>
-                <span>{course.course_createtime}</span>
-              </div>
+            <h3>{course.course_title}</h3>
+            <div style={{ color: "var(--color-text-3)", fontSize: 13 }}>
+              <span>{course.course_createtime}</span>
             </div>
             <div className="toc">
               {toc.map((i: any) => {
@@ -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>