feat(组件): 添加章节面板组件并重构布局

将章节列表功能提取为独立的ChapterPanel组件，使用Element Plus的Tabs组件实现章节和书籍信息的切换展示
移除App.vue中的占位内容，优化样式结构

src/App.vue

@@ -1,17 +1,14 @@
 <script setup>
-import Editor from './components/Editor.vue'
+import Editor from './components/Editor.vue';
+import ChapterPanel from './components/ChapterPanel.vue';
+
+
 </script>
 
 <template>
   <div class="container">
     <el-card class="chapter-panel" shadow="never">
-      <template #header>
-        <div class="panel-title">
-          <el-icon><Notebook /></el-icon>
-          <span>书籍章节列表</span>
-        </div>
-      </template>
-      <div class="placeholder-text">章节加载中...</div>
+      <ChapterPanel />
     </el-card>
 
     <el-card class="content-panel" shadow="never">
@@ -60,4 +57,5 @@ import Editor from './components/Editor.vue'
   padding: 20px;
   text-align: center;
 }
+
 </style>

src/components/ChapterPanel.vue

@@ -0,0 +1,29 @@
+<template>
+  <el-tabs v-model="activeTab" class="chapter-tabs">
+    <el-tab-pane label="章节列表" name="chapters">
+      <div class="chapter-list">
+        章节列表
+      </div>
+    </el-tab-pane>
+    <el-tab-pane label="书籍信息" name="info">
+      <div class="book-info">
+        书籍信息
+      </div>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { ElTabs, ElTabPane } from 'element-plus';
+const activeTab = ref('chapters');
+</script>
+
+<style scoped>
+.chapter-tabs { height: 100%; }
+.chapter-list { padding: 10px; }
+.chapter-item { padding: 8px 12px; margin-bottom: 4px; cursor: pointer; border-radius: 4px; transition: background-color 0.2s; }
+.chapter-item:hover { background-color: #f5f5f5; }
+.book-info { padding: 15px; }
+.info-item { margin-bottom: 10px; }
+</style>

src/main.js

@@ -1,4 +1,5 @@
-import { createApp } from 'vue'
+import { createApp } from 'vue';
+import 'element-plus/dist/index.css';
 import App from './App.vue'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'