add

2026-06-15 09:00:38 +08:00
parent fec66377d5
commit 4640c5e02b
191 changed files with 6046 additions and 0 deletions
@@ -0,0 +1,166 @@
+<template>
+  <aside class="sidebar" :class="{ collapsed }">
+    <div class="sidebar-header">
+      <h2 class="sidebar-title" @click="$router.push('/')">
+        <span class="logo">📚</span>
+        <span v-show="!collapsed">算法分析教学</span>
+      </h2>
+      <button class="toggle-btn" @click="$emit('toggle')">
+        {{ collapsed ? '☰' : '✕' }}
+      </button>
+    </div>
+    <nav class="sidebar-nav">
+      <router-link
+        v-for="ch in chapters"
+        :key="ch.id"
+        :to="`/chapter/${ch.id}`"
+        class="nav-item"
+        :class="{ active: currentId === ch.id }"
+      >
+        <span class="nav-icon">{{ ch.icon }}</span>
+        <span class="nav-text" v-show="!collapsed">
+          <span class="nav-title">{{ ch.title.split('—')[0].trim() }}</span>
+          <span class="nav-subtitle">{{ ch.subtitle }}</span>
+        </span>
+      </router-link>
+    </nav>
+    <div class="sidebar-footer" v-show="!collapsed">
+      <p>算法分析与设计</p>
+      <p class="footer-sub">教学辅助平台</p>
+    </div>
+  </aside>
+</template>
+
+<script setup>
+import { chapters } from '../data/chapters.js'
+
+defineProps({
+  collapsed: Boolean,
+  currentId: String
+})
+
+defineEmits(['toggle'])
+</script>
+
+<style scoped>
+.sidebar {
+  width: 280px;
+  min-width: 280px;
+  background: var(--sidebar-bg);
+  border-right: 1px solid var(--border-color);
+  display: flex;
+  flex-direction: column;
+  transition: all 0.3s ease;
+  overflow: hidden;
+}
+
+.sidebar.collapsed {
+  width: 60px;
+  min-width: 60px;
+}
+
+.sidebar-header {
+  padding: 16px;
+  border-bottom: 1px solid var(--border-color);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.sidebar-title {
+  font-size: 16px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--text-primary);
+  white-space: nowrap;
+}
+
+.logo {
+  font-size: 20px;
+}
+
+.toggle-btn {
+  background: none;
+  border: none;
+  font-size: 18px;
+  cursor: pointer;
+  color: var(--text-secondary);
+  padding: 4px 8px;
+  border-radius: 4px;
+}
+
+.toggle-btn:hover {
+  background: var(--hover-bg);
+}
+
+.sidebar-nav {
+  flex: 1;
+  padding: 12px 8px;
+  overflow-y: auto;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 12px;
+  margin-bottom: 4px;
+  border-radius: 8px;
+  color: var(--text-secondary);
+  text-decoration: none;
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+
+.nav-item:hover {
+  background: var(--hover-bg);
+  color: var(--text-primary);
+}
+
+.nav-item.active {
+  background: var(--active-bg);
+  color: var(--primary-color);
+  font-weight: 600;
+}
+
+.nav-icon {
+  font-size: 20px;
+  flex-shrink: 0;
+}
+
+.nav-text {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.nav-title {
+  font-size: 14px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.nav-subtitle {
+  font-size: 11px;
+  color: var(--text-tertiary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sidebar-footer {
+  padding: 16px;
+  border-top: 1px solid var(--border-color);
+  text-align: center;
+  font-size: 12px;
+  color: var(--text-tertiary);
+}
+
+.footer-sub {
+  font-size: 10px;
+  margin-top: 2px;
+}
+</style>