feat:初始化工程

src/App.vue

@@ -0,0 +1,10 @@
+<template>
+  <router-view />
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style lang="scss">
+@use '@/styles/index.module.scss';
+</style>

src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

src/components/Library/LibraryFileDetailDialog.vue

@@ -0,0 +1,135 @@
+<template>
+  <el-dialog v-model="libraryStore.fileDetailDialogVisible"
+             :title="libraryStore.currentFile.name" center
+             width="90%" destroy-on-close class="file-dialog">
+    <el-splitter>
+      <el-splitter-panel size="50%">
+        <div class="raw-file">
+          <div v-if="libraryStore.currentFile.type === 'pdf'" class="preview">
+            <p>原文预览</p>
+          </div>
+          <div v-else class="preview-box">
+            <p>原文预览</p>
+          </div>
+        </div>
+      </el-splitter-panel>
+      <el-splitter-panel size="50%">
+        <div class="section">
+          <div class="section-title">
+            <el-icon><EditPen /></el-icon>
+            生成题目（{{ libraryStore.currentFile.questions?.length || 0 }} 道）
+          </div>
+          <div v-for="(q, i) in libraryStore.currentFile.questions" :key="i" class="question-card">
+            <div class="q-header">
+              <span class="q-num">Q{{ i + 1 }}</span>
+              <el-tag size="small" type="primary" effect="dark">{{ q.type }}</el-tag>
+            </div>
+            <div class="q-body">{{ q.stem }}</div>
+            <ul v-if="q.options" class="q-options">
+              <li v-for="opt in q.options" :key="opt">{{ opt }}</li>
+            </ul>
+            <div class="q-answer">
+              <span class="label">答案：</span>{{ q.answer }}
+            </div>
+          </div>
+        </div>
+      </el-splitter-panel>
+    </el-splitter>
+
+    <template #footer>
+      <el-button @click="libraryStore.fileDetailDialogVisible = false">关闭</el-button>
+      <el-button type="primary" @click="libraryStore.fileDetailDialogVisible = false">开始练习</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { EditPen } from '@element-plus/icons-vue'
+import { useLibraryStore } from '@/stores/library.ts'
+
+const libraryStore = useLibraryStore()
+</script>
+
+<style lang="scss">
+.file-dialog {
+  .raw-file {
+    height: 100%;
+    padding: 10px;
+
+    .preview {
+      height: 100%;
+      padding: 10px;
+      background: #f8fafc;
+      border: 2px dashed #e2e8f0;
+    }
+  }
+
+  /* 知识点 + 题目 */
+  .section {
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    .section-title {
+      align-self: center;
+
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 14px;
+      font-weight: 600;
+      color: #1e293b;
+    }
+
+    .question-card {
+      background: #f8fafc;
+      border-radius: 8px;
+      padding: 10px;
+
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+
+      .q-header {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+        .q-num {
+          font-weight: 700;
+          color: #14b8a6;
+        }
+      }
+
+      .q-body {
+        font-size: 14px;
+        color: #1e293b;
+      }
+
+      .q-options {
+        list-style: none;
+        padding: 0;
+        margin: 0 0 8px;
+
+        li {
+          padding: 3px 0;
+          font-size: 13px;
+          color: #475569;
+        }
+      }
+
+      .q-answer {
+        font-size: 13px;
+        color: #16a34a;
+        font-weight: 600;
+
+        .label {
+          color: #64748b;
+          font-weight: 400;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/Library/LibraryFileDialog.vue

@@ -0,0 +1,66 @@
+<template>
+  <el-dialog v-model="libraryStore.fileDialogVisible"
+             title="新增资料" center destroy-on-close>
+    <el-form ref="ruleFormRef" :model="libraryStore.currentFile"
+             :rules="rules" label-width="auto">
+      <el-form-item label="学科" prop="subject">
+        <el-select v-model="libraryStore.currentFile.subject"
+                   multiple filterable allow-create
+                   placeholder="请输入或选择学科名称" style="width: 240px">
+          <el-option v-for="(item, index) in subjectOptions"
+                     :key="index" :label="item" :value="item"/>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="模块" prop="module">
+        <el-select v-model="libraryStore.currentFile.module"
+                   multiple filterable allow-create
+                   placeholder="请输入或选择模块名称" style="width: 240px">
+          <el-option v-for="(item, index) in subjectOptions"
+                     :key="index" :label="item" :value="item"/>
+        </el-select>
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <el-button @click="libraryStore.fileDialogVisible = false">取消</el-button>
+      <el-button type="primary" @click="submitForm(ruleFormRef)">确认</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useLibraryStore } from '@/stores/library.ts'
+import type { FormInstance } from 'element-plus'
+
+const libraryStore = useLibraryStore()
+
+const ruleFormRef = ref<FormInstance>()
+
+const subjectOptions = ['中医学', '公务员']
+
+const rules = {
+  subject: [
+    { required: true, message: '请输入学科名称', trigger: 'blur' }
+  ],
+  module: [
+    { required: true, message: '请输入模块名称', trigger: 'blur' }
+  ]
+}
+
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      libraryStore.fileDialogVisible = false
+    } else {
+      console.log('请先输入信息')
+    }
+  })
+}
+</script>
+
+<style lang="scss">
+
+</style>

src/components/Library/LibraryFileList.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="file-list">
+    <div v-for="file in libraryStore.fileList" :key="file.id" class="file-card card-item">
+      <div class="file-info" @click="viewDetailClick(file)">
+
+        <div class="file-icon" :class="file.iconClass">
+          <el-icon v-if="file.type === 'image'" ><Picture /></el-icon>
+          <el-icon v-else><Document /></el-icon>
+        </div>
+        <div class="file-text">
+          <div class="file-name">{{ file.name }}</div>
+          <div class="file-meta">{{ file.size }} · {{ file.time }}</div>
+        </div>
+      </div>
+
+      <div class="card-actions">
+        <el-button type="primary" :icon="Edit">编辑</el-button>
+        <el-button type="danger" :icon="Delete">删除</el-button>
+      </div>
+    </div>
+
+    <el-empty v-if="!libraryStore.fileList.length" description="该模块暂无文件" :image-size="80" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Delete, Edit, Picture, Document } from '@element-plus/icons-vue'
+import { useLibraryStore } from '@/stores/library.ts'
+import type { ILibraryFile } from '@/types/library.ts'
+
+const libraryStore = useLibraryStore()
+
+const viewDetailClick = (file: ILibraryFile) => {
+  libraryStore.currentFile = file
+  libraryStore.fileDetailDialogVisible = true
+}
+</script>

src/components/Library/LibraryFilter.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="filter-bar card-item">
+    <div class="filter-row">
+      <span class="filter-label">学科</span>
+      <el-segmented v-model="libraryStore.selectedSubject" :options="subjectOptions"/>
+    </div>
+    <div class="filter-row">
+      <span class="filter-label">模块</span>
+      <el-segmented v-model="libraryStore.selectedModule" :options="moduleOptions"/>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useLibraryStore } from '@/stores/library.ts'
+
+const libraryStore = useLibraryStore()
+
+const subjectOptions = computed(() => {
+  return libraryStore.subjectTree.map((s) => ({ label: s.name, value: s.id }))
+})
+
+const moduleOptions = computed(() => {
+  const node = libraryStore.subjectTree.find((s) => s.id === libraryStore.selectedSubject)
+  return (node?.children || []).map((m) => ({
+    label: m.name,
+    value: m.id
+  }))
+})
+</script>

src/layout/index.vue

@@ -0,0 +1,175 @@
+<template>
+  <el-container class="layout-container">
+    <!-- 侧边栏 -->
+    <el-aside :width="isCollapse ? '64px' : '150px'" class="aside">
+      <!-- Logo -->
+      <div class="logo">
+        <span v-if="!isCollapse">🧠 智能学习助手</span>
+        <span v-else>🧠</span>
+      </div>
+
+      <!-- 菜单 -->
+      <el-menu
+          :default-active="route.path"
+          :collapse="isCollapse"
+          :collapse-transition="false"
+          router
+          class="side-menu"
+      >
+        <el-menu-item index="/library">
+          <el-icon><Reading /></el-icon>
+          <template #title>知识库</template>
+        </el-menu-item>
+        <el-menu-item index="/practice">
+          <el-icon><Aim /></el-icon>
+          <template #title>训练场</template>
+        </el-menu-item>
+        <el-menu-item index="/exam">
+          <el-icon><EditPen /></el-icon>
+          <template #title>考试中心</template>
+        </el-menu-item>
+        <el-menu-item index="/mistakes">
+          <el-icon><Notebook /></el-icon>
+          <template #title>错题本</template>
+        </el-menu-item>
+        <el-menu-item index="/stats">
+          <el-icon><DataLine /></el-icon>
+          <template #title>数据统计</template>
+        </el-menu-item>
+      </el-menu>
+    </el-aside>
+
+    <el-container>
+      <!-- 顶部栏 -->
+      <el-header class="header">
+        <div class="header-left">
+          <!-- 折叠按钮 -->
+          <el-icon class="collapse-btn" @click="isCollapse = !isCollapse">
+            <Fold v-if="!isCollapse" />
+            <Expand v-else />
+          </el-icon>
+          <!-- 面包屑 -->
+          <el-breadcrumb separator="/">
+            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+            <el-breadcrumb-item>{{ route.meta.title }}</el-breadcrumb-item>
+          </el-breadcrumb>
+        </div>
+
+        <div class="header-right">
+          <!-- 通知铃铛 -->
+          <el-badge :value="3">
+            <el-icon :size="18"><Bell /></el-icon>
+          </el-badge>
+
+          <!-- 用户信息 -->
+          <el-dropdown>
+            <el-avatar :size="32" class="avatar">李</el-avatar>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item>个人中心</el-dropdown-item>
+                <el-dropdown-item>设置</el-dropdown-item>
+                <el-dropdown-item divided @click="handleLogout">退出登录</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </div>
+      </el-header>
+
+      <!-- 主内容区 -->
+      <el-main class="main">
+        <router-view v-slot="{ Component }">
+          <transition name="fade" mode="out-in">
+            <component :is="Component" />
+          </transition>
+        </router-view>
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ElMessageBox } from 'element-plus'
+import { Reading, Aim, EditPen, Notebook, DataLine, Fold, Expand, Bell } from '@element-plus/icons-vue'
+
+const route = useRoute()
+const router = useRouter()
+const isCollapse = ref(false)
+
+// 退出登录
+const handleLogout = () => {
+  ElMessageBox.confirm('确定要退出登录吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    router.push('/login')
+  }).catch(() => {})
+}
+</script>
+
+<style lang="scss">
+.layout-container {
+  height: 100vh;
+
+  /* 侧边栏 */
+  .aside {
+    background: #ffffff;
+    border-right: 1px solid #e2e8f0;
+    transition: width 0.3s;
+    overflow: hidden;
+
+    .logo {
+      height: 56px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 16px;
+      font-weight: 600;
+      color: #14b8a6;
+      border-bottom: 1px solid #e2e8f0;
+    }
+
+    .side-menu {
+      border-right: none;
+    }
+  }
+
+  /* 顶部 */
+  .header {
+    background: #ffffff;
+    border-bottom: 1px solid #e2e8f0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 56px;
+    padding: 0 20px;
+    cursor: pointer;
+
+    .header-left {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+
+    .header-right {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+
+      .avatar {
+        background: #ccfbf1;
+        color: #14b8a6;
+        font-weight: 600;
+      }
+    }
+  }
+
+  /* 主内容 */
+  .main {
+    background: #f0fdfa;
+    padding: 20px;
+  }
+}
+</style>

src/main.ts

@@ -0,0 +1,24 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import App from './App.vue'
+
+// 引入路由
+import router from './router'
+
+// 引入element-ui组件
+import ElementPlus from 'element-plus'
+import 'element-plus/theme-chalk/src/index.scss'
+import 'element-plus/theme-chalk/dark/css-vars.css'
+import 'dayjs/locale/zh-cn'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+
+// 创建Vue3实例
+const app = createApp(App)
+// 使用路由
+app.use(router)
+// 使用Pinia 需要ts 4.5以上
+app.use(createPinia())
+// 使用Element UI Plus
+app.use(ElementPlus, { locale: zhCn })
+// 挂载到根组件上
+app.mount('#app')

src/router/index.ts

@@ -0,0 +1,49 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import Layout from '../layout/index.vue'
+
+const routes = [
+  {
+    path: '/',
+    component: Layout,
+    redirect: '/library',
+    children: [
+      {
+        path: 'library',
+        name: 'Library',
+        component: () => import('@/views/Library.vue'),
+        meta: { title: '知识库' }
+      },
+      {
+        path: 'practice',
+        name: 'Practice',
+        component: () => import('@/views/Practice.vue'),
+        meta: { title: '训练场' }
+      },
+      {
+        path: 'exam',
+        name: 'Exam',
+        component: () => import('@/views/Exam.vue'),
+        meta: { title: '考试' }
+      },
+      {
+        path: 'mistakes',
+        name: 'Mistakes',
+        component: () => import('@/views/Mistakes.vue'),
+        meta: { title: '错题本' }
+      },
+      {
+        path: 'stats',
+        name: 'Stats',
+        component: () => import('@/views/Stats.vue'),
+        meta: { title: '统计' }
+      }
+    ]
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+export default router

src/stores/library.ts

@@ -0,0 +1,96 @@
+import { defineStore } from 'pinia'
+import type { ILibraryFile, ITreeNode } from '@/types/library.ts'
+
+export const useLibraryStore = defineStore('library', {
+  state: () => ({
+    selectedSubject: 1,
+    selectedModule: 101,
+    subjectTree: [
+      {
+        id: 1,
+        name: '中医学',
+        children: [
+          { id: 101, name: '中医基础理论' },
+          { id: 102, name: '中医诊断学' },
+          { id: 103, name: '中药学' },
+          { id: 104, name: '方剂学' },
+          { id: 105, name: '中医内科学' },
+          { id: 106, name: '中医外科学' },
+          { id: 107, name: '中医妇科学' },
+          { id: 108, name: '中医儿科学' },
+          { id: 109, name: '针灸学' },
+          { id: 110, name: '推拿学' },
+          { id: 111, name: '中医骨伤科学' },
+          { id: 112, name: '黄帝内经' },
+          { id: 113, name: '伤寒论' },
+          { id: 114, name: '金匮要略' },
+          { id: 115, name: '温病学' },
+          { id: 116, name: '中医养生学' }
+        ]
+      },
+      {
+        id: 2,
+        name: '公务员',
+        children: [
+          { id: 201, name: '言语理解与表达' },
+          { id: 202, name: '数量关系' },
+          { id: 203, name: '判断推理' },
+          { id: 204, name: '资料分析' },
+          { id: 205, name: '常识判断' },
+          { id: 206, name: '申论写作' },
+          { id: 207, name: '公文写作' },
+          { id: 208, name: '公共基础知识' },
+          { id: 209, name: '面试技巧' },
+          { id: 210, name: '时政热点' },
+          { id: 211, name: '法律基础' }
+        ]
+      }
+    ] as ITreeNode[],
+    fileList: [] as ILibraryFile[],
+    currentFile: {} as ILibraryFile,
+    fileDetailDialogVisible: false,
+    fileDialogVisible: false
+  }),
+  actions: {
+    queryFileList() {
+      this.fileList = [
+        {
+          id: 1,
+          subject: '中医学',
+          module: '中医基础理疗',
+          name: '向量代数.pdf',
+          size: '2.4 MB',
+          time: '2分钟前',
+          type: 'pdf',
+          iconClass: 'icon-pdf',
+          questions: [
+            { type: '选择题', stem: '设 a=(1,2,3), b=(2,-1,1)，求 a·b = ?', options: ['A. 3', 'B. 5', 'C. 7', 'D. 9'], answer: 'A' },
+            { type: '计算题', stem: '求过点 P(1,0,2) 且法向量为 n=(2,1,-1) 的平面方程', answer: '2x + y - z = 0' }
+          ]
+        },
+        {
+          id: 2,
+          subject: '中医学',
+          module: '中医基础理疗',
+          name: '向量代数精讲.png',
+          size: '156 MB',
+          time: '3小时前',
+          type: 'image',
+          iconClass: 'icon-image'
+        }
+      ]
+    },
+    getEmptyFile(): ILibraryFile {
+      return {
+        iconClass: '',
+        id: 0,
+        module: '',
+        name: '',
+        size: '',
+        subject: '',
+        time: '',
+        type: ''
+      }
+    }
+  }
+})

src/styles/element/index.module.scss

@@ -0,0 +1,10 @@
+@use 'element-plus/theme-chalk/src/common/var.scss' with (
+  $colors: (
+    'primary': (
+      'base': #009FA8, // 设置你的主题色
+    ),
+  )
+);
+
+// 也可以在此引入其他 Element Plus 样式
+//@use 'element-plus/theme-chalk/src/index.scss' as *;

src/styles/index.module.scss

@@ -0,0 +1,90 @@
+body {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: CustomFont, sans-serif;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+a:focus,
+a:active {
+  outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+}
+
+html, body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+#app {
+  height: 100%;
+}
+
+html {
+  font-size: 16px;
+}
+
+span, input {
+  font-family: 'CustomFont', serif;
+}
+
+// 明亮主题变量
+:root {
+  // 基础颜色
+  --color-bg: #F5F5F5;
+  --color-card-bg: #FFFFFF;
+  --color-record-card-bg: #F5F5DC;
+  --color-border-bg: #FFFFFF;
+  --color-text: #000000;
+}
+
+// 暗黑主题变量
+.dark {
+  --color-bg: #000000;
+  --color-card-bg: #000000;
+  --color-record-card-bg: #4C4D4F;
+  --color-border-bg: #4C4D4F;
+  --color-text: #FFFFFF;
+}
+
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+}
+.dark::view-transition-old(root) {
+  z-index: 9999;
+}
+
+.card-item {
+  padding: 14px 18px;
+  background-color: #FFFFFF;
+  border: 1px solid #FFFFFF;
+  border-radius: 10px;
+}
+
+@media (max-width: 1280px) {
+  html {
+    font-size: 13px;
+  }
+}
+
+@font-face {
+  font-family: 'CustomFont';
+  src: url('@/assets/font/custom.woff2') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}

src/types/library.ts

@@ -0,0 +1,24 @@
+export interface ITreeNode {
+    id: number;
+    name: string;
+    children?: ITreeNode[];
+}
+
+export interface ILibraryFileQuestion {
+    type: string;
+    stem: string;
+    options?: string[];
+    answer: string;
+}
+
+export interface ILibraryFile {
+    id: number;
+    subject: string;
+    module: string;
+    name: string;
+    size: string;
+    time: string;
+    type: string;
+    iconClass: string;
+    questions?: ILibraryFileQuestion[];
+}

src/views/Exam.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <h2>考试中心</h2>
+    <p style="color:#94a3b8;margin-top:8px;">按学科进行综合检验，模拟真实考试环境</p>
+    <el-divider />
+    <el-empty description="考试页面 - 待开发" />
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>

src/views/Library.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="library-view">
+    <!-- 标题行 -->
+    <div class="page-header">
+      <div>
+        <h2 class="page-title">知识库</h2>
+        <p class="page-subtitle">管理学习资料，查看 AI 解析结果</p>
+      </div>
+      <el-button type="primary" :icon="Plus" @click="addFileClick">新增资料</el-button>
+    </div>
+
+    <library-filter />
+
+    <library-file-list />
+
+    <library-file-dialog />
+
+    <library-file-detail-dialog />
+  </div>
+</template>
+
+<script setup lang="ts">
+import LibraryFilter from '@/components/Library/LibraryFilter.vue'
+import LibraryFileList from '@/components/Library/LibraryFileList.vue'
+import LibraryFileDialog from '@/components/Library/LibraryFileDialog.vue'
+import LibraryFileDetailDialog from '@/components/Library/LibraryFileDetailDialog.vue'
+import { useLibraryStore } from '@/stores/library.ts'
+import { Plus } from '@element-plus/icons-vue'
+import { onMounted } from 'vue'
+
+const libraryStore = useLibraryStore()
+
+onMounted(() => {
+  libraryStore.queryFileList()
+})
+
+const addFileClick = () => {
+  libraryStore.currentFile = libraryStore.getEmptyFile()
+  libraryStore.fileDialogVisible = true
+}
+</script>
+
+<style lang="scss">
+.library-view {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  /* 标题行 */
+  .page-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .page-title {
+      font-size: 22px;
+      font-weight: 700;
+      color: #0f172a;
+    }
+
+    .page-subtitle {
+      font-size: 13px;
+      color: #94a3b8;
+    }
+  }
+
+  /* 筛选栏 */
+  .filter-bar {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+
+    .filter-row {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+  }
+
+  /* 文件列表 */
+  .file-list {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    .file-card {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .file-info {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        cursor: pointer;
+
+        .file-icon {
+          width: 42px;
+          height: 42px;
+          border-radius: 8px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 20px;
+          flex-shrink: 0;
+        }
+
+        .icon-pdf { background: #fee2e2; }
+        .icon-image { background: #dbeafe; }
+
+        .file-name {
+          font-size: 14px;
+          font-weight: 600;
+          color: #1e293b;
+        }
+
+        .file-meta {
+          font-size: 12px;
+          color: #94a3b8;
+          margin-top: 2px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/Mistakes.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <h2>错题本</h2>
+    <p style="color:#94a3b8;margin-top:8px;">回顾错题，查漏补缺</p>
+    <el-divider />
+    <el-empty description="错题本页面 - 待开发" />
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>

src/views/Practice.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <h2>训练场</h2>
+    <p style="color:#94a3b8;margin-top:8px;">专项练习，巩固知识点</p>
+    <el-divider />
+    <el-empty description="训练场页面 - 待开发" />
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>

src/views/Stats.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <h2>学习统计</h2>
+    <p style="color:#94a3b8;margin-top:8px;">追踪你的学习进度和效果</p>
+    <el-divider />
+    <el-empty description="统计页面 - 待开发" />
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>