feat: 添加书籍章节和内容面板的UI布局

实现书籍阅读界面的基本布局，包含左侧章节列表和右侧内容显示区域

src/App.vue

@@ -1,20 +1,79 @@
 <template>
-  <div id="app">
-    <!-- 保留基础容器用于后续开发 -->
+  <div class="container">
+    <el-card class="chapter-panel" shadow="never">
+      <template #header>
+        <div class="panel-header">
+          <span>书籍章节列表</span>
+        </div>
+      </template>
+      <div class="placeholder-text">章节加载中...</div>
+    </el-card>
+
+    <el-card class="content-panel" shadow="never">
+      <template #header>
+        <div class="panel-header">
+          <span>当前章节内容</span>
+        </div>
+      </template>
+      <div class="placeholder-text">请从左侧选择章节</div>
+    </el-card>
   </div>
 </template>
 
-<script setup>
-// 清空测试用变量
-</script>
+<style scoped>
+*{
+  margin: 0;
+  padding: 0;
+}
+.container {
+  height: 98vh;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+
+.placeholder-text {
+  height: calc(100% - 80px);
+  flex: 0 0 300px;
+  overflow-y: auto;
+}
+
+.chapter-panel {
+  flex: 0 0 20vw;
+  overflow: hidden;
+}
+
+.content-panel {
+  flex: 1;
+  overflow: hidden;
+}
+
+.chapter-panel {
+  flex: 0 0 20vw;
+}
+
+.content-panel {
+  flex: 0 0 78vw;
+  margin-left: 1vw;
+}
+
+.el-card__body {
+  width: calc(100% - 1px);
+  height: calc(100% - 57px);
+  overflow: auto;
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 500;
+}
 
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+.placeholder-text {
+  color: #909399;
   text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+  padding: 40px 0;
 }
-</style>
+</style>