add drawer effect

src/views/ChapterView.vue

@@ -70,23 +70,27 @@
       </div>
     </section>
 
-    <!-- 代码查看区域 -->
+    <!-- 代码查看 Drawer -->
-    <section v-if="currentFile" class="code-section">
+    <Teleport to="body">
-      <h2 class="section-label code-section-label">💻 代码查看</h2>
+      <Transition name="drawer">
-      <CodeViewer
+        <div v-if="currentFile" class="drawer-overlay" @click.self="closeDrawer">
-        :filePath="currentFile.path"
+          <div class="drawer-panel">
-        :fileName="currentFile.name"
+            <div class="drawer-header">
-        :fileLabel="currentFile.label"
+              <span class="drawer-title">💻 代码查看</span>
-        :description="currentFile.description"
+              <button class="drawer-close-btn" @click="closeDrawer">✕</button>
-      />
+            </div>
-    </section>
+            <div class="drawer-body">
-
+              <CodeViewer
-    <section v-else class="empty-section">
+                :filePath="currentFile.path"
-      <div class="empty-state">
+                :fileName="currentFile.name"
-        <span class="empty-icon">👆</span>
+                :fileLabel="currentFile.label"
-        <p>请从上方选择一个代码文件查看其源码</p>
+                :description="currentFile.description"
-      </div>
+              />
-    </section>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
   </div>
 
   <div v-else class="not-found">
@@ -121,6 +125,10 @@ function selectFile(file) {
   currentFile.value = file
 }
 
+function closeDrawer() {
+  currentFile.value = null
+}
+
 function getFolderDescription(folderName) {
   const descriptions = {
     mergesort: '归并排序是分治法的经典应用：将数组一分为二，分别排序后合并。时间复杂度 O(n log n)。',
@@ -353,31 +361,87 @@ function getFolderDescription(folderName) {
   margin-left: 20px;
 }
 
-.code-section {
+/* ========== Drawer ========== */
-  margin: 32px 0;
+.drawer-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background: rgba(0, 0, 0, 0.45);
+  display: flex;
+  justify-content: flex-end;
 }
 
-.code-section-label {
+.drawer-panel {
-  margin-bottom: 16px;
+  width: min(720px, 90vw);
+  height: 100%;
+  background: var(--bg);
+  display: flex;
+  flex-direction: column;
+  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
 }
 
-.empty-section {
+.drawer-header {
-  padding: 60px 0;
+  display: flex;
-  text-align: center;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border-color);
+  flex-shrink: 0;
 }
 
-.empty-state {
+.drawer-title {
-  color: var(--text-tertiary);
+  font-size: 17px;
+  font-weight: 700;
+  color: var(--text-primary);
 }
 
-.empty-icon {
+.drawer-close-btn {
-  font-size: 40px;
+  background: none;
-  display: block;
+  border: none;
-  margin-bottom: 12px;
+  font-size: 20px;
+  cursor: pointer;
+  color: var(--text-secondary);
+  padding: 4px 10px;
+  border-radius: 6px;
+  transition: all 0.15s;
 }
 
-.empty-state p {
+.drawer-close-btn:hover {
-  font-size: 15px;
+  background: var(--hover-bg);
+  color: var(--text-primary);
+}
+
+.drawer-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0;
+}
+
+.drawer-body .code-viewer {
+  border-radius: 0;
+  border: none;
+  min-height: 100%;
+}
+
+/* 抽屉过渡动画 */
+.drawer-enter-active,
+.drawer-leave-active {
+  transition: opacity 0.25s ease;
+}
+
+.drawer-enter-active .drawer-panel,
+.drawer-leave-active .drawer-panel {
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.drawer-enter-from,
+.drawer-leave-to {
+  opacity: 0;
+}
+
+.drawer-enter-from .drawer-panel,
+.drawer-leave-to .drawer-panel {
+  transform: translateX(100%);
 }
 
 .not-found {