更新环境配置，添加VUE_OPTIONS_BASE_API变量以支持API路径配置；重构axios配置，使用环境变量设置基础API路径；优化Main组件样式，调整内容区域的最小宽度；重构菜单组件，使用自定义插槽提升可读性；新增书库管理页面，添加搜索表单和数据展示区域，增强用户交互体验。

.env.development

@@ -4,4 +4,6 @@ VUE_OPTIONS_SOURCE_MAP = false
 
 VUE_OPTIONS_BASE_PATH = '/'
 
-VUE_OPTIONS_OUT_DIR = 'dist'
+VUE_OPTIONS_OUT_DIR = 'dist'
+
+VUE_OPTIONS_BASE_API = 'http://mpaudio.yqsd.cn/'

.env.production

@@ -4,4 +4,6 @@ VUE_OPTIONS_SOURCE_MAP = true
 
 VUE_OPTIONS_BASE_PATH = '/'
 
-VUE_OPTIONS_OUT_DIR = 'dist'
+VUE_OPTIONS_OUT_DIR = 'dist'
+
+VUE_OPTIONS_BASE_API = '/'

src/api/book/index.ts

@@ -0,0 +1,6 @@
+import request from '@/config/axios'
+
+export const getOceanengineAdv = async (params: any) => {
+    return await request.get({ url: '/book/list', params })
+  }
+  

src/config/axios/config.ts

@@ -4,7 +4,8 @@ interface RetryRequest {
   waitTime: number
 }
 
-
+// 声明全局变量类型
+declare const __VUE_OPTIONS_BASE_API__: string | undefined;
 
 const config: {
   base_url: string
@@ -16,7 +17,7 @@ const config: {
   /**
    * api请求基础路径
    */
-  base_url: import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL,
+  base_url: process.env.VUE_OPTIONS_BASE_API + 'api' || '',
   /**
    * 接口成功返回状态码
    */

src/layout/components/Main/index.vue

@@ -1,8 +1,8 @@
 <template>
   <main class="main-layout flex flex-col flex-1 overflow-hidden h-screen">
     <Header />
-    <div class="flex-1 overflow-y-auto bg-white">
-      <div class="p-4 md:p-6 ">
+    <div class="flex-1 overflow-y-auto bg-white min-w-[1000px]">
+      <div class="p-4 md:p-6">
         <router-view />
       </div>
     </div>

src/layout/components/menu/index.vue

@@ -12,17 +12,24 @@
                                 v-for="child in item.children" 
                                 :key="child.key" 
                                 :to="child.url"
-                                class="flex items-center px-4 py-2.5 text-[14px] font-medium transition-colors" 
-                                :class="[
-                                    $route.path.includes(child.url) 
-                                        ? 'bg-blue-50 text-blue-600 hover:bg-blue-50' 
-                                        : 'text-gray-700 hover:bg-gray-50 hover:text-gray-900'
-                                ]"
+                                custom
+                                v-slot="{ isActive, href, navigate }"
                             >
-                                <component :is="child.icon" class="!h-5 !w-5 mr-2 transition-colors" />
-                                <p class="text-[14px] leading-[18px] font-medium">
-                                    {{ child.title }}
-                                </p>
+                                <a 
+                                    :href="href"
+                                    @click="navigate"
+                                    class="flex items-center px-4 py-2.5 text-[14px] font-medium transition-colors" 
+                                    :class="[
+                                        isActive 
+                                            ? 'bg-blue-50 text-blue-600 hover:bg-blue-50' 
+                                            : 'text-gray-700 hover:bg-gray-50 hover:text-gray-900'
+                                    ]"
+                                >
+                                    <component :is="child.icon" class="!h-5 !w-5 mr-2 transition-colors" />
+                                    <p class="text-[14px] leading-[18px] font-medium" :class="{ 'text-blue-600': isActive }">
+                                        {{ child.title }}
+                                    </p>
+                                </a>
                             </router-link>
                         </div>
                     </div>

src/types/components.d.ts

@@ -13,15 +13,21 @@ declare module 'vue' {
     Dialog: typeof import('./../components/Dialog/index.vue')['default']
     EditorSrcEditor: typeof import('./../components/Editor/src/Editor.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCol: typeof import('element-plus/es')['ElCol']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
+    ElEmpty: typeof import('element-plus/es')['ElEmpty']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
+    ElOption: typeof import('element-plus/es')['ElOption']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSpace: typeof import('element-plus/es')['ElSpace']
     HelpMessageSrc: typeof import('./../components/helpMessage/src/index.vue')['default']
     Icon: typeof import('./../components/Icon/Index.vue')['default']

src/views/library/stack/index.vue

@@ -1,9 +1,97 @@
 <template>
-  <div class="library-stack-container">测试啊</div>
+  <div class="library-stack-container w-full bg-white p-6">
+    <div class="search-form mb-6">
+      <el-row :gutter="20" class="mb-4">
+        <el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="6">
+          <div class="flex items-center">
+            <span class="mr-2 text-gray-600 w-20 text-right">书籍id:</span>
+            <el-input v-model="formData.bookId" placeholder="请输入" class="flex-1"></el-input>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="6">
+          <div class="flex items-center">
+            <span class="mr-2 text-gray-600 w-20 text-right">书籍名称:</span>
+            <el-input v-model="formData.bookName" placeholder="请输入" class="flex-1"></el-input>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="6">
+          <div class="flex items-center">
+            <span class="mr-2 text-gray-600 w-20 text-right">连载状态:</span>
+            <el-select v-model="formData.status" placeholder="请选择" clearable class="flex-1">
+              <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
+            </el-select>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
+          <div class="flex justify-start mt-2 sm:mt-0 sm:justify-end">
+            <el-button type="primary" @click="handleSearch" class="mr-2">查 询</el-button>
+            <el-button @click="handleReset">重 置</el-button>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    
+    <div class="content-area">
+      <!-- 内容区域 -->
+      <el-empty v-if="!hasData" description="暂无数据"></el-empty>
+      <!-- 如果有数据，这里可以放置数据表格或其他内容 -->
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue';
+
+// 表单数据
+const formData = reactive({
+  bookId: '',
+  bookName: '',
+  status: ''
+});
+
+// 连载状态选项
+const statusOptions = ref([
+  { value: '1', label: '连载中' },
+  { value: '2', label: '已完结' },
+  { value: '3', label: '暂停' }
+]);
+
+// 是否有数据
+const hasData = ref(false);
+
+// 搜索方法
+const handleSearch = () => {
+  console.log('搜索条件:', formData);
+  // TODO: 实现搜索逻辑，更新 hasData 状态
+};
+
+// 重置方法
+const handleReset = () => {
+  formData.bookId = '';
+  formData.bookName = '';
+  formData.status = '';
+};
+
+onMounted(() => {
+  // 页面加载时可执行的初始化操作
+});
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped>
+/* 可以添加一些额外的自定义样式 */
+.library-stack-container {
+  min-height: calc(100vh - 80px); /* 适应屏幕高度，减去头部高度 */
+}
+
+/* 如果内容区域不够时的样式处理 */
+.content-area {
+  min-height: 400px; /* 设置最小高度确保页面不会太空 */
+}
+
+/* 确保表单在小屏幕上有适当的间距 */
+@media (max-width: 640px) {
+  .el-col {
+    margin-bottom: 12px;
+  }
+}
+</style>