feat: 响应式

apps/web/src/assets/base.less

@@ -157,7 +157,7 @@ input {
         content: attr(data-tip);
         opacity: 0;
         top: 100%;
-        right: 50%;
+        right: 5%;
         margin-top: 6px;
         padding: 0.5em 0.75em;
         z-index: 1000000;
@@ -171,7 +171,14 @@ input {
         pointer-events: none;
       }
     }
+    &.ltr:hover {
+      &::after {
+        left: 5%;
+        right: auto;
+      }
+    }
   }
+
   &.badge {
     position: relative;
     &::before {

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

@@ -7,6 +7,8 @@
     padding: 20px;
     overflow-y: auto;
     border-right: 1px solid var(--color-border-2);
+    background: #fff;
+    z-index: 99;
 
     > h3 {
       margin: 0 0 10px 0;
@@ -67,3 +69,31 @@
     overflow-y: auto;
   }
 }
+
+.toggle {
+  cursor: pointer;
+  display: none;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 199;
+  width: 60px;
+  height: 60px;
+  background: #24292f;
+  color: #d7d7d7;
+  transition: all 0.25s ease-in-out;
+  &:hover {
+    color: var(--color-primary-2);
+  }
+  > svg {
+    height: 24px;
+  }
+}
+
+@media (max-width: 1120px) {
+  .toggle {
+    display: inline-flex;
+  }
+}

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

@@ -9,6 +9,7 @@ import { ms2Time } from "./util";
 import Result from "../../components/Result";
 import PlayCircle20Regular from "@ricons/fluent/PlayCircle20Regular";
 import DocumentChevronDouble20Regular from "@ricons/fluent/DocumentChevronDouble20Regular";
+import List20Regular from "@ricons/fluent/List20Regular";
 import { Icon } from "@ricons/utils";
 import dayjs from "dayjs";
 import { IChapter } from "../../api/dto";
@@ -33,6 +34,7 @@ const defaultState = {
 
 function CourseDetail() {
   const { id: course_id = "" } = useParams();
+  const [tocVisible, setTocVisible] = useState(true);
   const [state, setState] = useState<IState>(defaultState);
   const navigate = useNavigate();
 
@@ -112,7 +114,12 @@ function CourseDetail() {
 
   return (
     <div className="course-detail">
-      <aside className="table-of-content">
+      <aside
+        className="table-of-content"
+        style={{
+          display: tocVisible ? "block" : "none",
+        }}
+      >
         <h3>{state.course.course_title}</h3>
         <div style={{ color: "var(--color-text-3)", fontSize: 13 }}>
           <span>{state.course.course_createtime}</span>
@@ -143,9 +150,18 @@ function CourseDetail() {
           })}
         </div>
       </aside>
+      <span
+        className="toggle bs tip ltr"
+        data-tip="折叠/展开目录"
+        onClick={() => setTocVisible((p) => !p)}
+      >
+        <List20Regular />
+      </span>
       <div
         className="content"
-        style={{ left: state.toc.length > 0 ? 300 : "0" }}
+        style={{
+          left: state.toc.length > 0 && tocVisible ? 300 : 0,
+        }}
       >
         {state.view}
       </div>