From b8dd0584aabc5ddf4e713bcd37d5d3b2fdcf166e Mon Sep 17 00:00:00 2001
From: chenghuan <chenghuanv587@qq.com>
Date: Thu, 11 Dec 2025 16:13:40 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=EF=BC=9A1.=E8=AF=BE=E7=A8=8B?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E5=A2=9E=E5=8A=A0=E9=AA=A8=E6=9E=B6=E5=B1=8F?=
 =?UTF-8?q?=EF=BC=9B2.=E5=9B=BE=E4=B9=A6=E9=A6=96=E9=A1=B5=E5=92=8C?=
 =?UTF-8?q?=E5=9B=BE=E4=B9=A6=E8=AF=A6=E6=83=85=E5=A2=9E=E5=8A=A0=E9=AA=A8?=
 =?UTF-8?q?=E6=9E=B6=E5=B1=8F=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/clients/index.ts                          |   9 +
 api/clients/main.ts                           |   2 +-
 api/clients/skeleton.ts                       |   8 +
 api/modules/book.ts                           |  37 +-
 api/modules/book_home.ts                      |  21 +-
 api/modules/course.ts                         |  43 +-
 api/modules/video.ts                          |   9 +-
 api/types.d.ts                                |   1 +
 components/Skeleton/Skeleton.vue              | 103 ++++
 components/Skeleton/templates/BookCard.vue    |  15 +
 components/Skeleton/templates/BookInfo.vue    |  31 ++
 components/Skeleton/templates/ImageCard.vue   |  16 +
 components/Skeleton/templates/ImageText.vue   |  17 +
 components/Skeleton/templates/LineList.vue    |  15 +
 .../video-player/composables/useVideoAPI.ts   |   2 +-
 pages/book/detail.vue                         | 248 +++------
 pages/book/index.vue                          | 494 +++++++++---------
 pages/book/search.vue                         |   6 +-
 pages/course/details/chapter.vue              |  11 +-
 .../details/components/CatalogueList.vue      | 287 +++++-----
 pages/course/details/components/Protocol.vue  |   2 -
 pages/course/details/course.vue               |  38 +-
 pages/user/index.vue                          |   8 +-
 style/tailwind.css                            |  98 ++++
 types/book.d.ts                               |   1 -
 types/course.d.ts                             |  13 +-
 types/video.d.ts                              |  11 +-
 27 files changed, 897 insertions(+), 649 deletions(-)
 create mode 100644 api/clients/index.ts
 create mode 100644 api/clients/skeleton.ts
 create mode 100644 components/Skeleton/Skeleton.vue
 create mode 100644 components/Skeleton/templates/BookCard.vue
 create mode 100644 components/Skeleton/templates/BookInfo.vue
 create mode 100644 components/Skeleton/templates/ImageCard.vue
 create mode 100644 components/Skeleton/templates/ImageText.vue
 create mode 100644 components/Skeleton/templates/LineList.vue

diff --git a/api/clients/index.ts b/api/clients/index.ts
new file mode 100644
index 0000000..0a08d13
--- /dev/null
+++ b/api/clients/index.ts
@@ -0,0 +1,9 @@
+import { skeletonClient } from './skeleton'
+import { mainClient } from './main'
+import { paymentClient } from './payment'
+
+export {
+  skeletonClient,
+  mainClient,
+  paymentClient
+}
diff --git a/api/clients/main.ts b/api/clients/main.ts
index 3c849f3..705bab7 100644
--- a/api/clients/main.ts
+++ b/api/clients/main.ts
@@ -3,5 +3,5 @@ import { createRequestClient } from '../request';
 import { SERVICE_MAP } from '../config';
 
 export const mainClient = createRequestClient({
-  baseURL: SERVICE_MAP.MAIN,
+  baseURL: SERVICE_MAP.MAIN
 });
diff --git a/api/clients/skeleton.ts b/api/clients/skeleton.ts
new file mode 100644
index 0000000..a5bd0c5
--- /dev/null
+++ b/api/clients/skeleton.ts
@@ -0,0 +1,8 @@
+// api/clients/main.ts
+import { createRequestClient } from '../request';
+import { SERVICE_MAP } from '../config';
+
+export const skeletonClient = createRequestClient({
+  baseURL: SERVICE_MAP.MAIN,
+  loading: false
+})
\ No newline at end of file
diff --git a/api/modules/book.ts b/api/modules/book.ts
index 8d29166..67ba409 100644
--- a/api/modules/book.ts
+++ b/api/modules/book.ts
@@ -1,6 +1,5 @@
 // api/modules/book.ts
-import { createRequestClient } from '../request'
-import { SERVICE_MAP } from '../config'
+import { mainClient, skeletonClient } from '@/api/clients'
 import type { IApiResponse } from '../types'
 import type {
   IBook,
@@ -13,8 +12,6 @@ import type {
 } from '@/types/book'
 import type { IGoods } from '@/types/order'
 
-const client = createRequestClient({ baseURL: SERVICE_MAP.MAIN })
-
 /**
  * 书籍相关API
  */
@@ -25,7 +22,7 @@ export const bookApi = {
    * @param limit 每页数量
    */
   getMyBooks(current: number, limit: number) {
-    return client.request<IApiResponse<{ page: IPageData<IBook> }>>({
+    return mainClient.request<IApiResponse<{ page: IPageData<IBook> }>>({
       url: 'bookAbroad/home/getMyBooks',
       method: 'POST',
       data: { current, limit }
@@ -37,7 +34,7 @@ export const bookApi = {
    * @param bookId 书籍ID
    */
   getBookInfo(bookId: number) {
-    return client.request<IApiResponse<{ bookInfo: IBookDetail }>>({
+    return skeletonClient.request<IApiResponse<{ bookInfo: IBookDetail }>>({
       url: 'bookAbroad/home/getBookInfo',
       method: 'POST',
       data: { bookId }
@@ -49,7 +46,7 @@ export const bookApi = {
    * @param bookId 书籍ID
    */
   getBookReadCount(bookId: number) {
-    return client.request<IApiResponse<{
+    return skeletonClient.request<IApiResponse<{
       readCount: number
       listenCount: number
       buyCount: number
@@ -65,7 +62,7 @@ export const bookApi = {
    * @param bookId 书籍ID
    */
   getRecommendBook(bookId: number) {
-    return client.request<IApiResponse<{ bookList: IBook[] }>>({
+    return skeletonClient.request<IApiResponse<{ bookList: IBook[] }>>({
       url: 'bookAbroad/home/getRecommendBook',
       method: 'POST',
       data: { bookId }
@@ -79,7 +76,7 @@ export const bookApi = {
    * @param limit 每页数量
    */
   getBookComments(bookId: number, current: number, limit: number) {
-    return client.request<IApiResponse<{
+    return mainClient.request<IApiResponse<{
       commentsTree: IComment[]
       commentsCount: number
     }>>({
@@ -96,7 +93,7 @@ export const bookApi = {
    * @param pid 父评论ID，默认为0表示顶级评论
    */
   insertComment(bookId: number, content: string, pid: number = 0) {
-    return client.request<IApiResponse>({
+    return mainClient.request<IApiResponse>({
       url: 'bookAbroad/insertBookAbroadComment',
       method: 'POST',
       data: { bookId, content, pid }
@@ -108,7 +105,7 @@ export const bookApi = {
    * @param commentId 评论ID
    */
   likeComment(commentId: number) {
-    return client.request<IApiResponse>({
+    return mainClient.request<IApiResponse>({
       url: 'bookAbroad/insertBookAbroadCommentLike',
       method: 'POST',
       data: { commentId }
@@ -120,7 +117,7 @@ export const bookApi = {
    * @param commentId 评论ID
    */
   unlikeComment(commentId: number) {
-    return client.request<IApiResponse>({
+    return mainClient.request<IApiResponse>({
       url: 'bookAbroad/delBookAbroadCommentLike',
       method: 'POST',
       data: { commentId }
@@ -132,7 +129,7 @@ export const bookApi = {
    * @param commentId 评论ID
    */
   deleteComment(commentId: number) {
-    return client.request<IApiResponse>({
+    return mainClient.request<IApiResponse>({
       url: 'bookAbroad/delBookAbroadComment',
       method: 'POST',
       data: { commentId }
@@ -144,7 +141,7 @@ export const bookApi = {
    * @param bookId 书籍ID
    */
   getBookChapter(data: { bookId: number; language: string }) {
-    return client.request<IApiResponse<{ chapterList: IChapter[] }>>({
+    return mainClient.request<IApiResponse<{ chapterList: IChapter[] }>>({
       url: 'bookAbroad/home/getBookChapter',
       method: 'POST',
       data
@@ -156,7 +153,7 @@ export const bookApi = {
    * @param chapterId 章节ID
    */
   getChapterContent(chapterId: number) {
-    return client.request<IApiResponse<{ contentPage: IChapterContent[] }>>({
+    return mainClient.request<IApiResponse<{ contentPage: IChapterContent[] }>>({
       url: 'bookAbroad/home/getBookChapterContent',
       method: 'POST',
       data: { chapterId }
@@ -168,7 +165,7 @@ export const bookApi = {
    * @param bookId 书籍ID
    */
   getReadProgress(bookId: number) {
-    return client.request<IApiResponse<{ bookReadRate: IReadProgress | null }>>({
+    return mainClient.request<IApiResponse<{ bookReadRate: IReadProgress | null }>>({
       url: 'bookAbroad/home/getBookReadRate',
       method: 'POST',
       data: { bookId }
@@ -182,7 +179,7 @@ export const bookApi = {
    * @param contentId 内容ID
    */
   saveReadProgress(bookId: number, chapterId: number, contentId: number) {
-    return client.request<IApiResponse>({
+    return mainClient.request<IApiResponse>({
       url: 'bookAbroad/home/insertBookReadRate',
       method: 'POST',
       data: { bookId, chapterId, contentId }
@@ -196,7 +193,7 @@ export const bookApi = {
    * @param contentId 内容ID
    */
   getBookLanguages(bookId: number) {
-    return client.request<IApiResponse>({
+    return mainClient.request<IApiResponse>({
       url: 'bookAbroad/home/getBookLanguage',
       method: 'POST',
       data: { bookId }
@@ -208,7 +205,7 @@ export const bookApi = {
    * @param chapterId 章节ID
    */
   getChapterContentListen(chapterId: number) {
-    return client.request<IApiResponse<{ bookChapterContents: any[] }>>({
+    return mainClient.request<IApiResponse<{ bookChapterContents: any[] }>>({
       url: 'bookAbroad/home/getBookChapterContentListen',
       method: 'POST',
       data: { chapterId }
@@ -220,7 +217,7 @@ export const bookApi = {
    * @param bookId 书籍ID
    */
   getBookGoods(bookId: number) {
-    return client.request<IApiResponse<{ goodsList: IGoods[] }>>({
+    return mainClient.request<IApiResponse<{ goodsList: IGoods[] }>>({
       url: 'bookAbroad/home/getProductListForBook',
       method: 'POST',
       data: { bookId }
diff --git a/api/modules/book_home.ts b/api/modules/book_home.ts
index 3aeaa9b..e622dc4 100644
--- a/api/modules/book_home.ts
+++ b/api/modules/book_home.ts
@@ -1,6 +1,5 @@
 // api/modules/home.ts
-import { createRequestClient } from '../request'
-import { SERVICE_MAP } from '../config'
+import { mainClient, skeletonClient } from '@/api/clients'
 import type {
   IMyBooksResponse,
   IRecommendBooksResponse,
@@ -10,17 +9,15 @@ import type {
   ISearchResponse
 } from '@/types/book'
 
-const client = createRequestClient({ baseURL: SERVICE_MAP.MAIN })
-
 /**
  * 首页相关API
  */
-export const homeApi = {
+export const bookHomeApi = {
   /**
    * 获取VIP信息
    */
   getVipInfo() {
-    return client.request<IVipInfoResponse>({
+    return mainClient.request<IVipInfoResponse>({
       url: 'bookAbroad/home/getVipInfo',
       method: 'POST',
       data: {}
@@ -33,7 +30,7 @@ export const homeApi = {
    * @param limit 每页数量
    */
   getMyBooks(current: number, limit: number) {
-    return client.request<IMyBooksResponse>({
+    return skeletonClient.request<IMyBooksResponse>({
       url: 'bookAbroad/home/getMyBooks',
       method: 'POST',
       data: { current, limit }
@@ -44,7 +41,7 @@ export const homeApi = {
    * 获取推荐图书
    */
   getRecommendBooks() {
-    return client.request<IRecommendBooksResponse>({
+    return skeletonClient.request<IRecommendBooksResponse>({
       url: 'bookAbroad/home/getRecommendBooks',
       method: 'POST',
       data: {}
@@ -56,7 +53,7 @@ export const homeApi = {
    * @param type 0: 分类标签, 1: 活动标签
    */
   getBookLabelList(type: number) {
-    return client.request<ILabelListResponse>({
+    return skeletonClient.request<ILabelListResponse>({
       url: 'bookAbroad/home/getBookAbroadLableList',
       method: 'POST',
       data: { type }
@@ -68,7 +65,7 @@ export const homeApi = {
    * @param pid 父级标签ID
    */
   getSubLabelList(pid: number) {
-    return client.request<ILabelListResponse>({
+    return skeletonClient.request<ILabelListResponse>({
       url: 'bookAbroad/home/getBookAbroadLableListByPid',
       method: 'POST',
       data: { pid }
@@ -80,7 +77,7 @@ export const homeApi = {
    * @param lableId 标签ID（注意：原接口参数名为 lableId）
    */
   getBooksByLabel(lableId: number) {
-    return client.request<IBookListResponse>({
+    return skeletonClient.request<IBookListResponse>({
       url: 'bookAbroad/home/getAbroadBookListByLable',
       method: 'POST',
       data: { lableId }
@@ -96,7 +93,7 @@ export const homeApi = {
     page: number,
     limit: number,
   }) {
-    return client.request<ISearchResponse>({
+    return mainClient.request<ISearchResponse>({
       url: 'bookAbroad/home/searchBook',
       method: 'POST',
       data
diff --git a/api/modules/course.ts b/api/modules/course.ts
index e906c2d..5269bff 100644
--- a/api/modules/course.ts
+++ b/api/modules/course.ts
@@ -1,9 +1,8 @@
 // api/modules/course.ts
-import { createRequestClient } from '../request'
-import { SERVICE_MAP } from '../config'
+import { skeletonClient, mainClient } from '@/api/clients/index'
 import type { IApiResponse } from '../types'
 import type {
-  ICourseMedicalTreeResponse,
+  ICourseCategoryResponse,
   IUserLateCourseListResponse,
   IMarketCourseListResponse,
   ICourseDetailResponse,
@@ -16,10 +15,6 @@ import type { ISearchRequest, ISearchResponse } from '@/types/search'
 import type { ICommentListResponse, IAddCommentResponse, IComment } from '@/types/comment'
 import { useUserStore } from '@/stores/user'
 
-
-
-const client = createRequestClient({ baseURL: SERVICE_MAP.MAIN })
-
 /**
  * 课程相关API
  */
@@ -29,7 +24,7 @@ export const courseApi = {
    * @returns 分类数据
    */
   getCourseMedicalTree() {
-    return client.request<ICourseMedicalTreeResponse>({
+    return mainClient.request<ICourseCategoryResponse>({
       url: 'medical/home/getCourseMedicalTree',
       method: 'POST',
       data: {}
@@ -41,7 +36,7 @@ export const courseApi = {
    * @returns 观看记录列表
    */
   getUserLateCourseList() {
-    return client.request<IUserLateCourseListResponse>({
+    return mainClient.request<IUserLateCourseListResponse>({
       url: 'medical/home/getUserLateCourseList',
       method: 'POST',
       data: {}
@@ -61,7 +56,7 @@ export const courseApi = {
     limit: number
   }) {
 		const userStore = useUserStore()
-    return client.request<IMarketCourseListResponse>({
+    return mainClient.request<IMarketCourseListResponse>({
       url: userStore.token ? 'medical/home/getMarketCourseList' : 'visitor/getMarketCourseList',
       method: 'POST',
       data
@@ -74,7 +69,7 @@ export const courseApi = {
    * @returns 搜索结果
    */
   searchData(data: ISearchRequest) {
-    return client.request<ISearchResponse>({
+    return mainClient.request<ISearchResponse>({
       url: 'bookAbroad/home/searchCourse',
       method: 'POST',
       data
@@ -86,7 +81,7 @@ export const courseApi = {
    * @param id 课程ID
    */
   getCourseDetail(id: number) {
-    return client.request<ICourseDetailResponse>({
+    return skeletonClient.request<ICourseDetailResponse>({
       url: 'sociology/course/getCourseDetail',
       method: 'POST',
       data: { id }
@@ -98,7 +93,7 @@ export const courseApi = {
    * @param id 目录ID
    */
   getCatalogueChapterList(id: number) {
-    return client.request<IChapterListResponse>({
+    return skeletonClient.request<IChapterListResponse>({
       url: 'sociology/course/getCourseCatalogueChapterList',
       method: 'POST',
       data: { id }
@@ -110,7 +105,7 @@ export const courseApi = {
    * @param id 章节ID
    */
   getChapterDetail(id: number) {
-    return client.request<IChapterDetailResponse>({
+    return skeletonClient.request<IChapterDetailResponse>({
       url: 'sociology/course/getCourseCatalogueChapterDetail',
       method: 'POST',
       data: { id, load: false }
@@ -122,7 +117,7 @@ export const courseApi = {
    * @param catalogueId 目录ID
    */
   startStudyForMF(catalogueId: number) {
-    return client.request<IApiResponse>({
+    return mainClient.request<IApiResponse>({
       url: 'sociology/course/startStudyForMF',
       method: 'POST',
       data: { catalogueId }
@@ -134,7 +129,7 @@ export const courseApi = {
    * @param id 目录ID
    */
   getProductListForCourse(id: number) {
-    return client.request<IProductListResponse>({
+    return mainClient.request<IProductListResponse>({
       url: 'sociology/product/getProductListForCourse',
       method: 'POST',
       data: { id }
@@ -146,7 +141,7 @@ export const courseApi = {
    * @param courseCatalogueId 目录ID
    */
   checkRenewPayment(courseCatalogueId: number) {
-    return client.request<IApiResponse<{ canRelearn: boolean }>>({
+    return skeletonClient.request<IApiResponse<{ canRelearn: boolean }>>({
       url: 'common/courseRelearn/courseCatalogueCanRelearn',
       method: 'POST',
       data: { courseCatalogueId }
@@ -158,7 +153,7 @@ export const courseApi = {
    * @param catalogueId 目录ID
    */
   getRenewProductList(catalogueId: number) {
-    return client.request<IProductListResponse>({
+    return mainClient.request<IProductListResponse>({
       url: 'common/courseRelearn/relearnShopProductList',
       method: 'POST',
       data: { catalogueId }
@@ -173,7 +168,7 @@ export const courseApi = {
    * @param userId 用户ID
    */
   getCourseComments(courseId: number, page: number, limit: number, userId: number) {
-    return client.request<ICommentListResponse>({
+    return mainClient.request<ICommentListResponse>({
       url: 'common/courseGuestbook/getCourseGuestbookList',
       method: 'POST',
       data: { courseId, page, limit, userId, chapterId: '' }
@@ -194,7 +189,7 @@ export const courseApi = {
     content: string
     images: string
   }) {
-    return client.request<IAddCommentResponse>({
+    return mainClient.request<IAddCommentResponse>({
       url: 'common/courseGuestbook/addCourseGuestbook',
       method: 'POST',
       data
@@ -207,7 +202,7 @@ export const courseApi = {
    * @param guestbookId 留言ID
    */
   likeComment(userId: number, guestbookId: number) {
-    return client.request<IApiResponse>({
+    return mainClient.request<IApiResponse>({
       url: 'common/courseGuestbook/addCourseGuestbookSupport',
       method: 'POST',
       data: { userId, guestbookId }
@@ -220,7 +215,7 @@ export const courseApi = {
    * @param guestbookId 留言ID
    */
   unlikeComment(userId: number, guestbookId: number) {
-    return client.request<IApiResponse>({
+    return mainClient.request<IApiResponse>({
       url: 'common/courseGuestbook/cancelCourseGuestbookSupport',
       method: 'POST',
       data: { userId, guestbookId }
@@ -232,7 +227,7 @@ export const courseApi = {
    * @param courseId 课程ID
    */
   checkCourseVip(courseId: number) {
-    return client.request<IApiResponse<{ userVip: IVipInfo | null }>>({
+    return skeletonClient.request<IApiResponse<{ userVip: IVipInfo | null }>>({
       url: 'common/userVip/ownCourseCatalogueByVip',
       method: 'POST',
       data: { courseId }
@@ -244,7 +239,7 @@ export const courseApi = {
    * @param courseId 课程ID
    */
   getCourseVipModule(courseId: number) {
-    return client.request<IApiResponse<{ list: string[] }>>({
+    return skeletonClient.request<IApiResponse<{ list: string[] }>>({
       url: 'common/userVip/getCourseVipModule',
       method: 'POST',
       data: { courseId }
diff --git a/api/modules/video.ts b/api/modules/video.ts
index 134d2a1..3925238 100644
--- a/api/modules/video.ts
+++ b/api/modules/video.ts
@@ -3,8 +3,7 @@ import { createRequestClient } from '../request'
 import { SERVICE_MAP } from '../config'
 import type { IApiResponse } from '../types'
 import type { IVideoCheckResponse } from '@/types/video'
-
-const client = createRequestClient({ baseURL: SERVICE_MAP.MAIN })
+import { skeletonClient } from '@/api/clients'
 
 /**
  * 视频相关API
@@ -18,7 +17,7 @@ export const videoApi = {
   checkVideo(data: {
     id: number
   }) {
-    return client.request<IVideoCheckResponse>({
+    return skeletonClient.request<IVideoCheckResponse>({
       url: 'sociology/course/checkVideo',
       method: 'POST',
       data
@@ -34,7 +33,7 @@ export const videoApi = {
     videoId: number
     position: number
   }) {
-    return client.request<IApiResponse>({
+    return skeletonClient.request<IApiResponse>({
       url: 'sociology/course/saveCoursePosition',
       method: 'POST',
       data
@@ -51,7 +50,7 @@ export const videoApi = {
     videoId: number
     sort: number
   }) {
-    return client.request<IApiResponse>({
+    return skeletonClient.request<IApiResponse>({
       url: 'medical/course/addErrorCourse',
       method: 'POST',
       data
diff --git a/api/types.d.ts b/api/types.d.ts
index 7165b8f..67c47e1 100644
--- a/api/types.d.ts
+++ b/api/types.d.ts
@@ -15,6 +15,7 @@ export interface IApiResponse<T = any> {
  */
 export interface IRequestOptions extends UniApp.RequestOptions {
   // 允许扩展额外字段（例如 FILE 上传专用等）
+  headers?: Record<string, string>;
   maxSize?: number;
   files?: Array<{ name: string; uri: string; fileType?: string }>;
 }
diff --git a/components/Skeleton/Skeleton.vue b/components/Skeleton/Skeleton.vue
new file mode 100644
index 0000000..f841ca2
--- /dev/null
+++ b/components/Skeleton/Skeleton.vue
@@ -0,0 +1,103 @@
+<template>
+  <view>
+    <template v-if="loading">
+      <slot name="loading-top" />
+      <component v-if="theme" :is="components[theme]" :size="size" :count="count" />
+      <slot name="loading-bottom" />
+    </template>
+    <template v-else>
+      <slot v-if="data" name="content" :data="data"  />
+      <slot v-else name="error" />
+    </template>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, computed } from 'vue'
+import ImageText from './templates/ImageText.vue'
+import LineList from './templates/LineList.vue'
+import BookCard from './templates/BookCard.vue'
+import ImageCard from './templates/ImageCard.vue'
+import BookInfo from './templates/BookInfo.vue'
+
+// 注册组件
+const components = {
+  'none': () => null,
+  'image-text': ImageText,
+  'line-list': LineList,
+  'image-card': ImageCard,
+  'book-card': BookCard,
+  'book-info': BookInfo,
+}
+
+type RequestFn = () => Promise<any>
+type ThemeType = keyof typeof components
+
+const props = withDefaults(defineProps<{
+  theme?: ThemeType
+  request: RequestFn | RequestFn[]
+  auto?: boolean,
+  size?: 'small' | 'medium' | 'large' | any[]
+  count?: number
+}>(), {
+  theme: 'none',
+  auto: true,
+  count: 1
+})
+
+const emit = defineEmits(['success', 'error', 'complete'])
+
+const requestFnType = ref('single')
+const requestList = computed<RequestFn[]>(() => {
+  if (Array.isArray(props.request)) {
+    requestFnType.value = 'multi'
+    return props.request
+  }
+  requestFnType.value = 'single'
+  return [props.request]
+})
+
+const loading = ref(true)
+const data = ref<any>(null)
+
+const run = async (methods?: RequestFn[]) => {
+  loading.value = true
+  const reqMethods = methods || requestList.value
+  try {
+    // await new Promise(resolve => setTimeout(resolve, 3000))
+    const results = await Promise.all(
+      reqMethods.map(fn => fn())
+    )
+    // 将每个请求的结果处理成 key-value 格式
+    const resolvedData: Record<string, any> = {}
+    reqMethods.forEach((fn, index) => {
+      const key = fn.name || `request_${index}`
+      resolvedData[key] = results[index]
+    })
+    data.value = requestFnType.value === 'single' ? results[0] : resolvedData
+    emit('success', data.value)
+  } catch (err) {
+    emit('error', err)
+  } finally {
+    loading.value = false
+  }
+}
+
+const reload = (methods?: RequestFn[]) => {
+  run(methods)
+}
+
+onMounted(() => {
+  if (props.auto) {
+    run()
+  }
+})
+
+defineExpose({
+  reload,
+  loading
+})
+</script>
+
+<style lang="scss" scoped>
+</style>
\ No newline at end of file
diff --git a/components/Skeleton/templates/BookCard.vue b/components/Skeleton/templates/BookCard.vue
new file mode 100644
index 0000000..0f83df6
--- /dev/null
+++ b/components/Skeleton/templates/BookCard.vue
@@ -0,0 +1,15 @@
+<template>
+  <view>
+     <wd-skeleton :row-col="info" animation="gradient" />
+  </view>
+</template>
+
+<script lang="ts" setup>
+const count = 10
+const info = Array.from({ length: count }, (_, index) => ({ height: '20px' }))
+</script>
+
+<style lang="scss" scoped>
+
+
+</style>
\ No newline at end of file
diff --git a/components/Skeleton/templates/BookInfo.vue b/components/Skeleton/templates/BookInfo.vue
new file mode 100644
index 0000000..8559c58
--- /dev/null
+++ b/components/Skeleton/templates/BookInfo.vue
@@ -0,0 +1,31 @@
+<template>
+  <view>
+     <wd-skeleton :row-col="info" animation="gradient" />
+  </view>
+</template>
+
+<script lang="ts" setup>
+const info = [
+  { width: '300rpx', height: '400rpx' },
+  { width: '600rpx', height: '60rpx' },
+  { width: '180rpx', height: '40rpx' }, 
+  [{ width: '180rpx', height: '120rpx' }, { width: '180rpx', height: '120rpx' }, { width: '180rpx', height: '120rpx' }],
+  { width: '700rpx', height: '40rpx' },
+  { width: '700rpx', height: '40rpx' },
+  { width: '700rpx', height: '40rpx' },
+  { width: '700rpx', height: '40rpx' }
+]
+</script>
+
+<style lang="scss" scoped>
+:deep(.wd-skeleton__content) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  .wd-skeleton__row {
+    gap: 20rpx;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/components/Skeleton/templates/ImageCard.vue b/components/Skeleton/templates/ImageCard.vue
new file mode 100644
index 0000000..317cb13
--- /dev/null
+++ b/components/Skeleton/templates/ImageCard.vue
@@ -0,0 +1,16 @@
+<template>
+  <view>
+     <wd-skeleton theme="image" :row-col="list" animation="gradient" />
+  </view>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+  size?: any[],
+  count: number
+}>()
+const list = Array.from({ length: props.count }, (_, index) => (props.size || []))
+</script>
+
+<style lang="scss" scoped>
+</style>
\ No newline at end of file
diff --git a/components/Skeleton/templates/ImageText.vue b/components/Skeleton/templates/ImageText.vue
new file mode 100644
index 0000000..01f7a87
--- /dev/null
+++ b/components/Skeleton/templates/ImageText.vue
@@ -0,0 +1,17 @@
+<template>
+  <view>
+     <wd-skeleton :row-col="info" animation="gradient" />
+  </view>
+</template>
+
+<script lang="ts" setup>
+const info = [
+  { height: '220px' }, 1, 1, 
+  [{ width: '93px' }]
+]
+</script>
+
+<style lang="scss" scoped>
+
+
+</style>
\ No newline at end of file
diff --git a/components/Skeleton/templates/LineList.vue b/components/Skeleton/templates/LineList.vue
new file mode 100644
index 0000000..0f83df6
--- /dev/null
+++ b/components/Skeleton/templates/LineList.vue
@@ -0,0 +1,15 @@
+<template>
+  <view>
+     <wd-skeleton :row-col="info" animation="gradient" />
+  </view>
+</template>
+
+<script lang="ts" setup>
+const count = 10
+const info = Array.from({ length: count }, (_, index) => ({ height: '20px' }))
+</script>
+
+<style lang="scss" scoped>
+
+
+</style>
\ No newline at end of file
diff --git a/components/video-player/composables/useVideoAPI.ts b/components/video-player/composables/useVideoAPI.ts
index 28feff7..dce309e 100644
--- a/components/video-player/composables/useVideoAPI.ts
+++ b/components/video-player/composables/useVideoAPI.ts
@@ -31,7 +31,7 @@ export function useVideoAPI() {
     } catch (err: any) {
       console.error('Failed to fetch video info:', err)
       error.value = {
-        type: 'API_ERROR',
+        type: 'API_ERROR' as VideoErrorType,
         message: err.message || '获取视频信息失败，请稍后重试'
       }
       return null
diff --git a/pages/book/detail.vue b/pages/book/detail.vue
index 9ef2c8d..a2f75e5 100644
--- a/pages/book/detail.vue
+++ b/pages/book/detail.vue
@@ -3,82 +3,76 @@
     <!-- 导航栏 -->
     <nav-bar :title="$t('bookDetails.title')"></nav-bar>
     
-    <scroll-view 
-      scroll-y 
-      class="detail-scroll"
-      :style="{ height: scrollHeight + 'px' }"
+    <Skeleton
+      ref="bookInfoSkeleton"
+      theme="book-info"
+      class="p-3"
+      :request="[getBookInfo, getBookReadCount]"
+      @success="getBookInfoSuccess"
     >
-      <!-- 书籍信息 -->
-      <view class="book-info">
-        <image :src="bookInfo.images" class="cover" mode="aspectFill" />
-        <text class="title">{{ bookInfo.name }}</text>
-        <text class="author">{{ $t('bookDetails.authorName') }}{{ bookInfo.author?.authorName }}</text>
-        
-        <!-- 统计信息 -->
-        <view class="stats">
-          <view class="stat-item">
-            <image src="@/static/icon/icon_look_c.png" mode="aspectFit" />
-            <text>{{ readCount }}{{ $t('bookHome.readingCount') }}</text>
-          </view>
-          <view class="divider" />
-          <view class="stat-item">
-            <image src="@/static/icon/icon_listen_c.png" mode="aspectFit" />
-            <text>{{ listenCount }}{{ $t('bookHome.listenCount') }}</text>
-          </view>
-          <view class="divider" />
-          <view class="stat-item">
-            <image src="@/static/icon/icon_bug_c.png" mode="aspectFit" />
-            <text>{{ buyCount }}{{ $t('bookHome.purchased') }}</text>
-          </view>
-        </view>
-      </view>
-      
-      <!-- 简介 -->
-      <view class="introduction">
-        <text class="section-title">{{ $t('bookDetails.introduction') }}</text>
-        <text class="content">{{ bookInfo.author?.introduction }}</text>
-      </view>
-      
-      <!-- 书评列表 (非iOS) -->
-      <!-- <view v-if="!isIOS" class="comments-section">
-        <view class="section-header">
-          <text class="section-title">{{ $t('bookDetails.message') }}</text>
-          <view v-if="commentList.length > 0" class="more-link" @click="goToReview">
-            <text>{{ $t('bookDetails.more') }}</text>
-            <wd-icon name="arrow-right" size="14px" />
-          </view>
-        </view>
-        <view class="comment-wrapper">
-          <CommentList 
-            v-if="commentList.length > 0"
-            :comments="commentList.slice(0, 2)" 
-          />
-          <text v-else class="empty-text">{{ nullText }}</text>
-        </view>
-      </view> -->
-      
-      <!-- 相关推荐 -->
-      <view class="related-books">
-        <text class="section-title">{{ $t('bookDetails.relatedBooks') }}</text>
-        <scroll-view v-if="relatedBooks.length > 0" scroll-x class="book-scroll">
-          <view class="book-list">
-            <view 
-              class="book-item" 
-              v-for="item in relatedBooks" 
-              :key="item.id"
-              @click="goToDetail(item.id)"
-            >
-              <image :src="item.images" mode="aspectFill" />
-              <text>{{ item.name }}</text>
+      <template #content="{ data }">
+        <!-- 书籍信息 -->
+        <view class="book-info">
+          <image :src="data.getBookInfo.bookInfo.images" class="cover" mode="aspectFill" />
+          <text class="title">{{ data.getBookInfo.bookInfo.name }}</text>
+          <text class="author">{{ $t('bookDetails.authorName') }}{{ data.getBookInfo.bookInfo.author?.authorName }}</text>
+          
+          <!-- 统计信息 -->
+          <view class="stats">
+            <view class="stat-item">
+              <image src="@/static/icon/icon_look_c.png" mode="aspectFit" />
+              <text>{{ data.getBookReadCount.readCount }}{{ $t('bookHome.readingCount') }}</text>
+            </view>
+            <view class="divider" />
+            <view class="stat-item">
+              <image src="@/static/icon/icon_listen_c.png" mode="aspectFit" />
+              <text>{{ data.getBookReadCount.listenCount }}{{ $t('bookHome.listenCount') }}</text>
+            </view>
+            <view class="divider" />
+            <view class="stat-item">
+              <image src="@/static/icon/icon_bug_c.png" mode="aspectFit" />
+              <text>{{ data.getBookReadCount.buyCount }}{{ $t('bookHome.purchased') }}</text>
             </view>
           </view>
-        </scroll-view>
-        <text v-else class="empty-text">{{ nullBookText }}</text>
-      </view>
-    </scroll-view>
-    
+        </view>
+        
+        <!-- 简介 -->
+        <view class="introduction">
+          <text class="section-title">{{ $t('bookDetails.introduction') }}</text>
+          <text class="content">{{ data.getBookInfo.bookInfo.author?.introduction }}</text>
+        </view>
+      </template>
+    </Skeleton>
+      
+    <!-- 相关推荐 -->
+    <view class="related-books">
+      <text class="section-title">{{ $t('bookDetails.relatedBooks') }}</text>
+      <Skeleton
+        theme="image-card"
+        :size="Array(4).fill({ height: '100px', width: '23%' })"
+        :request="getRecommendBook"
+      >
+        <template #content="{ data }">
+          <scroll-view v-if="data.bookList.length > 0" scroll-x class="book-scroll">
+            <view class="book-list">
+              <view 
+                class="book-item" 
+                v-for="item in data.bookList" 
+                :key="item.id"
+                @click="goToDetail(item.id)"
+              >
+                <image :src="item.images" mode="aspectFill" />
+                <text>{{ item.name }}</text>
+              </view>
+            </view>
+          </scroll-view>
+          <text v-else class="empty-text">{{ $t('common.data_null') }}</text>
+        </template>
+      </Skeleton>
+    </view>
+      
     <!-- 底部操作栏 -->
-    <view class="action-bar">
+    <view v-if="bookInfoLoading" class="action-bar">
       <template v-if="bookInfo.isBuy || hasVip">
         <view class="action-btn read" @click="goToReader">
           <text>{{ $t('bookDetails.startReading') }}</text>
@@ -120,13 +114,12 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
 import { onLoad, onShow } from '@dcloudio/uni-app'
-import { t } from '@/utils/i18n'
 import { bookApi } from '@/api/modules/book'
 import { useUserStore } from '@/stores/user'
-import type { IBookDetail, IBook, IComment } from '@/types/book'
+import type { IBookDetail } from '@/types/book'
 import type { IGoods } from '@/types/order'
 import GoodsSelector from '@/components/order/GoodsSelector.vue'
-import CommentList from '@/components/book/CommentList.vue'
+import Skeleton from '@/components/Skeleton/Skeleton.vue'
 
 const userStore = useUserStore()
 
@@ -138,6 +131,8 @@ const pageFrom = ref('')
 const hasVip = computed(() => userStore.userInfo?.userEbookVip?.length > 0 || false)
 
 // 数据状态
+const bookInfoSkeleton = ref()
+const bookInfoLoading = ref(false)
 const bookInfo = ref<IBookDetail>({
   id: 0,
   name: '',
@@ -147,23 +142,7 @@ const bookInfo = ref<IBookDetail>({
   freeChapterCount: 0
 })
 const goodsList = ref<IGoods[]>([])
-const readCount = ref(0)
-const listenCount = ref(0)
-const buyCount = ref(0)
-const commentList = ref<IComment[]>([])
-const relatedBooks = ref<IBook[]>([])
-const nullText = ref('')
-const nullBookText = ref('')
 const purchaseVisible = ref(false)
-const scrollHeight = ref(0)
-
-// 计算属性
-const isIOS = computed(() => {
-  // #ifdef APP-PLUS
-  return uni.getSystemInfoSync().platform === 'ios'
-  // #endif
-  return false
-})
 
 // 生命周期
 onLoad((options: any) => {
@@ -173,45 +152,23 @@ onLoad((options: any) => {
   if (options.page) {
     pageFrom.value = options.page
   }
-  
-  initScrollHeight()
-  loadBookCount()
-  loadRecommendBooks()
 })
 
 onShow(() => {
-  loadBookInfo()
-  loadGoodsInfo()
-  if (!isIOS.value) {
-    loadComments()
-  }
+  bookInfoSkeleton.value?.reload()
 })
 
-onMounted(() => {
-  initScrollHeight()
-})
-
-// 初始化滚动区域高度
-function initScrollHeight() {
-  const systemInfo = uni.getSystemInfoSync()
-  const statusBarHeight = systemInfo.statusBarHeight || 0
-  let navBarHeight = 44
-  if (systemInfo.model.includes('iPhone')) {
-    const modelNumber = parseInt(systemInfo.model.match(/\d+/)?.[0] || '0')
-    if (modelNumber >= 11) {
-      navBarHeight = 48
-    }
-  }
-  const totalNavHeight = statusBarHeight + navBarHeight
-  const actionBarHeight = 110 // rpx转px约55
-  scrollHeight.value = systemInfo.windowHeight - totalNavHeight - actionBarHeight / 2
-}
 
 // 加载书籍详情
-async function loadBookInfo() {
-  const res = await bookApi.getBookInfo(bookId.value)
-  bookInfo.value = res.bookInfo
+const getBookInfo = () => bookApi.getBookInfo(bookId.value)
+const getBookInfoSuccess = (res: any) => {
+  bookInfoLoading.value = true
+  bookInfo.value = res.getBookInfo.bookInfo || {}
 }
+// 加载统计数据
+const getBookReadCount = () => bookApi.getBookReadCount(bookId.value)
+// 加载推荐书籍
+const getRecommendBook = () => bookApi.getRecommendBook(bookId.value)
 
 // 加载购买商品信息
 async function loadGoodsInfo() {
@@ -219,38 +176,9 @@ async function loadGoodsInfo() {
   goodsList.value = res.productList || []
 }
 
-// 加载统计数据
-async function loadBookCount() {
-  const res = await bookApi.getBookReadCount(bookId.value)
-  if (res.code === 0) {
-    readCount.value = res.readCount || 0
-    listenCount.value = res.listenCount || 0
-    buyCount.value = res.buyCount || 0
-  }
-}
-
-// 加载评论
-async function loadComments() {
-  const res = await bookApi.getBookComments(bookId.value, 1, 10)
-  if (res.commentsTree && res.commentsTree.length > 0) {
-    commentList.value = res.commentsTree
-  } else {
-    nullText.value = t('common.data_null')
-  }
-}
-
-// 加载推荐书籍
-async function loadRecommendBooks() {
-  const res = await bookApi.getRecommendBook(bookId.value)
-  if (res.bookList && res.bookList.length > 0) {
-    relatedBooks.value = res.bookList
-  } else {
-    nullBookText.value = t('common.data_null')
-  }
-}
-
 // 显示购买弹窗
-function showPurchasePopup() {
+async function showPurchasePopup() {
+  await loadGoodsInfo()
   purchaseVisible.value = true
 }
 
@@ -281,12 +209,6 @@ function goToListen() {
   })
 }
 
-function goToReview() {
-  uni.navigateTo({
-    url: `/pages/book/review?bookId=${bookId.value}&page=0`
-  })
-}
-
 function goToDetail(id: number) {
   uni.navigateTo({
     url: `/pages/book/detail?id=${id}`
@@ -301,7 +223,7 @@ function goToDetail(id: number) {
   
   .book-info {
     text-align: center;
-    padding: 40rpx 30rpx;
+    padding-bottom: 40rpx;
     
     .cover {
       width: 300rpx;
@@ -359,9 +281,7 @@ function goToDetail(id: number) {
     }
   }
   
-  .introduction {
-    padding: 40rpx 30rpx 0;
-    
+  .introduction {    
     .section-title {
       display: block;
       font-size: 34rpx;
@@ -410,7 +330,7 @@ function goToDetail(id: number) {
   }
   
   .related-books {
-    padding: 40rpx 30rpx 40rpx;
+    padding: 0rpx 30rpx calc(40rpx + 110rpx);
     
     .section-title {
       display: block;
diff --git a/pages/book/index.vue b/pages/book/index.vue
index 03c262e..79d781a 100644
--- a/pages/book/index.vue
+++ b/pages/book/index.vue
@@ -24,189 +24,257 @@
       <!-- 我的书单 & 推荐图书模块 -->
       <view class="mine-block">
         <!-- 我的书单 -->
-        <view class="mine-1">
-          <text class="mine-title">{{ $t('bookHome.block1') }}</text>
-          <view
-            v-if="myBooksList.length > 0"
-            class="mine-more"
-            @click="handleMoreClick"
-          >
-            {{ $t('bookHome.more') }}
-            <image src="@/static/icon/icon_right.png" />
-          </view>
-          <view v-if="myBooksList.length > 0" class="mine-1-list">
-            <view
-              v-for="(item, index) in myBooksList"
-              :key="index"
-              class="mine-item"
-              @click="handleMyBookClick(item.id)"
-            >
-              <image :src="item.images" />
-              <text>{{ item.name }}</text>
+        <Skeleton
+          ref="myBookSkeleton"
+          theme="image-card"
+          :request="getMyBooks"
+          :size="[{ height:'140px' }]"
+          class="flex-1 w-[50%]"
+        >
+          <template #content="{ data }" >
+            <view class="mine-1">
+              <text class="mine-title">{{ $t('bookHome.block1') }}</text>
+              <view
+                v-if="data.page.records.length > 0"
+                class="mine-more"
+                @click="handleMoreClick"
+              >
+                {{ $t('bookHome.more') }}
+                <image src="@/static/icon/icon_right.png" />
+              </view>
+              <view v-if="data.page.records.length > 0" class="mine-1-list">
+                <view
+                  v-for="(item, index) in data.page.records"
+                  :key="index"
+                  class="mine-item"
+                  @click="handleMyBookClick(item.id)"
+                >
+                  <image :src="item.images" />
+                  <text>{{ item.name }}</text>
+                </view>
+              </view>
+              <text v-else class="zanwu">{{ $t('common.data_null') }}</text>
             </view>
-          </view>
-          <text v-else class="zanwu">{{ $t('common.data_null') }}</text>
-        </view>
-
+          </template>
+        </Skeleton>
+        
         <!-- 推荐图书 -->
-        <view class="mine-2">
-          <text class="mine-title">{{ $t('bookHome.block2') }}</text>
-          <swiper
-            v-if="recommendBooksList.length > 0"
-            autoplay
-            :interval="3000"
-            :duration="500"
-            class="recommend-list"
-          >
-            <swiper-item
-              v-for="(item, index) in recommendBooksList"
-              :key="index"
-              class="recommend-item"
-              @click="handleBookClick(item.id)"
-            >
-              <image :src="item.images" width="100%" height="100%" />
-              <text>{{ item.name }}</text>
-            </swiper-item>
-          </swiper>
-        </view>
+        <Skeleton
+          ref="recommendBooksSkeleton"
+          theme="image-card"
+          :request="getRecommendBooks"
+          :size="[{ height:'140px' }]"
+          class="flex-1 w-[50%]"
+        >
+          <template #content="{ data }" >
+            <view class="mine-2">
+              <text class="mine-title">{{ $t('bookHome.block2') }}</text>
+              <swiper
+                v-if="data.books.length > 0"
+                autoplay
+                :interval="3000"
+                :duration="500"
+                class="recommend-list"
+              >
+                <swiper-item
+                  v-for="(item, index) in data.books"
+                  :key="index"
+                  class="recommend-item"
+                  @click="handleBookClick(item.id)"
+                >
+                  <image :src="item.images" width="100%" height="100%" />
+                  <text>{{ item.name }}</text>
+                </swiper-item>
+              </swiper>
+            </view>
+          </template>
+        </Skeleton>
       </view>
 
       <!-- 活动图书模块 -->
-      <view v-if="showActivity" class="activity-block">
-        <text class="activity-title">{{ $t('bookHome.activityTitle') }}</text>
-        <scroll-view class="scroll-view" scroll-x :show-scrollbar="false">
-          <view class="activity-label-list">
-            <view
-              v-for="(item, index) in activityLabelList"
-              :key="index"
-              :class="[
-                'activity-label-item',
-                currentActivityIndex === index ? 'active-label' : ''
-              ]"
-              @click="handleActivityLabelClick(item.id, index)"
-            >
-              <text>{{ item.title }}</text>
-            </view>
-          </view>
-        </scroll-view>
-        <scroll-view
-          v-if="activityList.length > 0"
-          class="scroll-view"
-          scroll-x
-          :show-scrollbar="false"
+      <view class="activity-block">
+        <Skeleton
+          theme="image-card"
+          :size="Array(5).fill({ height:'28px', width: '18%' })"
+          :request="getActivityLabels"
+          @success="getActivityLabelsSuccess"
         >
-          <view class="activity-list">
-            <view
-              v-for="(item, index) in activityList"
-              :key="index"
-              class="activity-item"
-              @click="handleBookClick(item.bookId)"
+          <template #loading-top>
+            <wd-skeleton :row-col="[{ width: '45%', height: '35px' }]" animation="gradient" class="mb-2.5!" />
+          </template>
+          <template #content>
+            <text class="activity-title">{{ $t('bookHome.activityTitle') }}</text>
+            <scroll-view class="scroll-view" scroll-x :show-scrollbar="false">
+              <view class="activity-label-list">
+                <view
+                  v-for="(item, index) in activityLabelList"
+                  :key="index"
+                  :class="[
+                    'activity-label-item',
+                    currentActivityIndex === index ? 'active-label' : ''
+                  ]"
+                  @click="handleActivityLabelClick(item.id, index)"
+                >
+                  <text>{{ item.title }}</text>
+                </view>
+              </view>
+            </scroll-view>
+          </template>
+        </Skeleton>
+        <Skeleton
+          ref="activityBooksSkeleton"
+          theme="image-card"
+          :auto="false"
+          :size="Array(4).fill({ height:'100px', width: '23%' })"
+          class="mt-[20rpx]!"
+          :request="getActivityBooks"
+        >
+          <template #content="{ data }">
+            <scroll-view
+              v-if="data.bookList.length > 0"
+              class="scroll-view"
+              scroll-x
+              :show-scrollbar="false"
             >
-              <image :src="item.images" />
-              <text class="activity-text">{{ item.name }}</text>
-            </view>
-          </view>
-        </scroll-view>
-        <text v-else class="zanwu" style="padding: 80rpx 0">{{ $t('global.dataNull') }}</text>
+              <view class="activity-list">
+                <view
+                  v-for="(item, index) in data.bookList"
+                  :key="index"
+                  class="activity-item"
+                  @click="handleBookClick(item.bookId)"
+                >
+                  <image :src="item.images" />
+                  <text class="activity-text">{{ item.name }}</text>
+                </view>
+              </view>
+            </scroll-view>
+            <text v-else class="zanwu" style="padding: 80rpx 0">{{ $t('global.dataNull') }}</text>
+          </template>
+        </Skeleton>
       </view>
 
       <!-- 分类图书模块 -->
-      <view v-if="showCategory" class="book-block">
-        <!-- 一级分类标签 -->
-        <scroll-view class="scroll-view" scroll-x :show-scrollbar="false">
-          <view class="book-tab-one">
-            <view
-              v-for="(item, index) in categoryLevel1List"
-              :key="index"
-              :class="[
-                'tab-one-item',
-                currentLevel1Index === index ? 'tab-one-active' : ''
-              ]"
-              @click="handleCategoryLevel1Click(item.id, index)"
-            >
-              <text>{{ item.title }}</text>
-            </view>
-          </view>
-        </scroll-view>
-
-        <!-- 二级分类标签 -->
-        <scroll-view
-          v-if="categoryLevel2List.length > 0"
-          class="scroll-view"
-          scroll-x
-          :show-scrollbar="false"
-          style="background: #fff; margin-top: 15rpx"
+      <view class="book-block">
+        <Skeleton
+          ref="categoryLevel1LabelSkeleton"
+          theme="image-card"
+          :size="Array(3).fill({ height:'75px', width: '32%' })"
+          :request="getCategoryLabels"
+          @success="getCategoryLabelsSuccess"
         >
-          <view class="book-tab-two">
-            <view
-              v-for="(item, index) in categoryLevel2List"
-              :key="index"
-              :class="[
-                'tab-two-item',
-                currentLevel2Index === index ? 'tab-two-active' : ''
-              ]"
-              @click="handleCategoryLevel2Click(item.id, index)"
+          <template #content>
+            <!-- 一级分类标签 -->
+            <scroll-view class="scroll-view" scroll-x :show-scrollbar="false">
+              <view class="book-tab-one">
+                <view
+                  v-for="(item, index) in categoryLevel1List"
+                  :key="index"
+                  :class="[
+                    'tab-one-item',
+                    currentLevel1Index === index ? 'tab-one-active' : ''
+                  ]"
+                  @click="handleCategoryLevel1Click(item.id, index)"
+                >
+                  <text>{{ item.title }}</text>
+                </view>
+              </view>
+            </scroll-view>
+          </template>
+        </Skeleton>
+        <Skeleton
+          ref="categoryLevel2LabelSkeleton"
+          theme="image-card"
+          :auto="false"
+          :size="Array(4).fill({ height:'30px', width: '24%' })"
+          class="mt-[20rpx]!"
+          :request="getSubLabels"
+          @success="getSubLabelsSuccess"
+        >
+          <template #content>
+            <!-- 二级分类标签 -->
+            <scroll-view
+              v-if="categoryLevel2List.length > 0"
+              class="scroll-view"
+              scroll-x
+              :show-scrollbar="false"
+              style="background: #fff; margin-top: 15rpx"
             >
-              <text>{{ item.title }}</text>
-            </view>
-          </view>
-        </scroll-view>
+              <view class="book-tab-two">
+                <view
+                  v-for="(item, index) in categoryLevel2List"
+                  :key="index"
+                  :class="[
+                    'tab-two-item',
+                    currentLevel2Index === index ? 'tab-two-active' : ''
+                  ]"
+                  @click="handleCategoryLevel2Click(item.id, index)"
+                >
+                  <text>{{ item.title }}</text>
+                </view>
+              </view>
+            </scroll-view>
+          </template>
+        </Skeleton>
 
         <!-- 分类图书列表 -->
-        <view v-if="categoryBookList.length > 0" class="book-list">
-          <view
-            v-for="(item, index) in categoryBookList"
-            :key="index"
-            class="book-item"
-            @click="handleBookClick(item.bookId)"
-          >
-            <image :src="item.images" />
-            <text class="book-text">{{ item.name }}</text>
-            <BookPrice :data="item" class="book-price-container" />
-          </view>
-        </view>
-        <text v-else class="zanwu" style="padding: 100rpx 0">{{ $t('global.dataNull') }}</text>
+        <Skeleton
+          ref="categoryBooksSkeleton"
+          theme="image-card"
+          :auto="false"
+          :size="Array(2).fill({ height:'240px', width: '49%' })"
+          :count="3"
+          class="mt-[20rpx]!"
+          :request="getBooksByLabel"
+        >
+          <template #content="{ data }">
+            <view v-if="data.bookList.length > 0" class="book-list">
+              <view
+                v-for="(item, index) in data.bookList"
+                :key="index"
+                class="book-item"
+                @click="handleBookClick(item.bookId)"
+              >
+                <image :src="item.images" />
+                <text class="book-text">{{ item.name }}</text>
+                <BookPrice :data="item" class="book-price-container" />
+              </view>
+            </view>
+            <text v-else class="zanwu" style="padding: 100rpx 0">{{ $t('global.dataNull') }}</text>
+          </template>
+        </Skeleton>
       </view>
     </view>
   </view>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue'
+import { ref, computed } from 'vue'
 import { onShow } from '@dcloudio/uni-app'
-import { homeApi } from '@/api/modules/book_home'
+import { bookHomeApi } from '@/api/modules/book_home'
 import { getNotchHeight } from '@/utils/system'
 import { useUserStore } from '@/stores/user'
 import BookPrice from '@/components/book/BookPrice.vue'
-import type {
-  IBook,
-  IBookWithStats,
-  ILabel,
-  IVipInfo
-} from '@/types/book'
+import type { ILabel } from '@/types/book'
 
 const userStore = useUserStore()
 
-// 状态定义
-const showMyBooks = ref(false)
-const showActivity = ref(false)
-const showCategory = ref(false)
-
 // 我的书单
-const myBooksList = ref<IBook[]>([])
+const myBookSkeleton = ref()
 
 // 推荐图书
-const recommendBooksList = ref<IBook[]>([])
+const recommendBooksSkeleton = ref()
 
 // 活动图书
+const activityBooksSkeleton = ref()
 const activityLabelList = ref<ILabel[]>([])
-const activityList = ref<IBookWithStats[]>([])
 const currentActivityIndex = ref(0)
 
 // 分类图书
+const categoryLevel1LabelSkeleton = ref()
+const categoryLevel2LabelSkeleton = ref()
+const categoryBooksSkeleton = ref()
 const categoryLevel1List = ref<ILabel[]>([])
 const categoryLevel2List = ref<ILabel[]>([])
-const categoryBookList = ref<IBookWithStats[]>([])
 const currentLevel1Index = ref(0)
 const currentLevel2Index = ref(0)
 
@@ -216,96 +284,62 @@ const vipInfo = computed(() => userStore.userInfo?.userEbookVip?.[0] || null)
 /**
  * 获取我的书单
  */
-const getMyBooks = async () => {
-  const res = await homeApi.getMyBooks(1, 10)
-  if (res && res.code === 0) {
-    showMyBooks.value = true
-    if (res.page.records && res.page.records.length > 0) {
-      myBooksList.value = res.page.records
-    }
-  } else {
-    // 未登录，跳转到登录页
-    uni.navigateTo({
-      url: '/pages/login/login'
-    })
-  }
-}
+const getMyBooks = () => bookHomeApi.getMyBooks(1, 10)
 
 /**
  * 获取推荐图书
  */
-const getRecommendBooks = async () => {
-  const res = await homeApi.getRecommendBooks()
-  if (res.books && res.books.length > 0) {
-    recommendBooksList.value = res.books
-  }
-}
+const getRecommendBooks = () => bookHomeApi.getRecommendBooks()
 
 /**
- * 获取活动标签列表
+ * 获取活动图书
  */
-const getActivityLabels = async () => {
-  const res = await homeApi.getBookLabelList(1)
-  showActivity.value = true
-  if (res.lableList && res.lableList.length > 0) {
-    activityLabelList.value = res.lableList
-    // 默认加载第一个标签的图书列表
-    await getBooksByLabel(res.lableList[0].id, 'activity')
-  }
+// 获取活动图书标签列表
+const getActivityLabels = () => bookHomeApi.getBookLabelList(1)
+const getActivityLabelsSuccess = (res: any) => {
+  activityLabelList.value = res.lableList || []
+  activityBooksSkeleton.value.reload()
+}
+// 获取活动图书列表
+const getActivityBooks = () => {
+  // 获取活动标签列表
+  const index = currentActivityIndex.value || 0
+  return bookHomeApi.getBooksByLabel(activityLabelList.value[index].id)
 }
 
 /**
  * 获取分类标签列表
  */
-const getCategoryLabels = async () => {
-  const res = await homeApi.getBookLabelList(0)
-  showCategory.value = true
-  if (res.lableList && res.lableList.length > 0) {
-    categoryLevel1List.value = res.lableList
-    // 默认加载第一个标签的二级标签
-    await getSubLabels(res.lableList[0].id, 0)
-  }
+const getCategoryLabels = () => bookHomeApi.getBookLabelList(0)
+const getCategoryLabelsSuccess = (res: any) => {
+  categoryLevel1List.value = res.lableList || []
+  currentLevel2Index.value = 0
+  categoryLevel2LabelSkeleton.value.reload()
 }
-
 /**
  * 获取二级标签列表
  */
-const getSubLabels = async (pid: number, index: number) => {
-  const res = await homeApi.getSubLabelList(pid)
-  currentLevel1Index.value = index
-  if (res.lableList && res.lableList.length > 0) {
-    categoryLevel2List.value = res.lableList
-    currentLevel2Index.value = 0
-    // 加载第一个二级标签的图书列表
-    await getBooksByLabel(res.lableList[0].id, 'category')
-  } else {
-    // 没有二级标签，直接加载一级标签的图书列表
-    categoryLevel2List.value = []
-    await getBooksByLabel(pid, 'category')
-  }
+const getSubLabels = async () => {
+  await getCategoryLabels()
+  const pid = categoryLevel1List.value[currentLevel1Index.value]?.id || 0
+  return bookHomeApi.getSubLabelList(pid)
+}
+const getSubLabelsSuccess = (res: any) => {
+  categoryLevel2List.value = res.lableList || []
+  categoryBooksSkeleton.value.reload()
 }
-
 /**
- * 根据标签获取图书列表
+ * 获取分类标签图书列表
  */
-const getBooksByLabel = async (
-  labelId: number,
-  type: 'activity' | 'category'
-) => {
-  const res = await homeApi.getBooksByLabel(labelId)
-  if (type === 'activity') {
-    if (res.bookList && res.bookList.length > 0) {
-      activityList.value = res.bookList
-    } else {
-      activityList.value = []
-    }
-  } else {
-    if (res.bookList && res.bookList.length > 0) {
-      categoryBookList.value = res.bookList
-    } else {
-      categoryBookList.value = []
-    }
-  }
+const getBooksByLabel = () => {
+  // 获取当前需要加载的标签id
+  // 判断是否有一级标签当前选中值
+  const level1Id = categoryLevel1List.value[currentLevel1Index.value]?.id
+  // 判断是否有二级标签当前选中值
+  const level2Id = categoryLevel2List.value[currentLevel2Index.value]?.id
+
+  const labelId = level2Id || level1Id || 0
+  return bookHomeApi.getBooksByLabel(labelId)
 }
 
 /**
@@ -349,14 +383,17 @@ const handleMoreClick = () => {
  */
 const handleActivityLabelClick = async (labelId: number, index: number) => {
   currentActivityIndex.value = index
-  await getBooksByLabel(labelId, 'activity')
+  activityBooksSkeleton.value.reload()
 }
 
 /**
  * 处理一级分类标签点击
  */
 const handleCategoryLevel1Click = async (labelId: number, index: number) => {
-  await getSubLabels(labelId, index)
+  currentLevel1Index.value = index
+  currentLevel2Index.value = 0
+  categoryBooksSkeleton.value.loading = true
+  categoryLevel2LabelSkeleton.value.reload()
 }
 
 /**
@@ -364,27 +401,15 @@ const handleCategoryLevel1Click = async (labelId: number, index: number) => {
  */
 const handleCategoryLevel2Click = async (labelId: number, index: number) => {
   currentLevel2Index.value = index
-  await getBooksByLabel(labelId, 'category')
+  categoryBooksSkeleton.value.reload()
 }
 
-/**
- * 页面加载
- */
-onMounted(() => {
-  // 重置活动标签选中状态
-  currentActivityIndex.value = 0
-  showActivity.value = false
-})
-
 /**
  * 页面显示
  */
 onShow(() => {
   // 刷新数据
-  getMyBooks()
-  getRecommendBooks()
-  getActivityLabels()
-  getCategoryLabels()
+  myBookSkeleton.value?.reload()
 })
 </script>
 
@@ -426,12 +451,12 @@ onShow(() => {
 .mine-block {
   padding: 20rpx;
   display: flex;
+  gap: 20rpx;
   align-items: center;
   justify-content: space-between;
 
   .mine-1,
   .mine-2 {
-    width: 49%;
     height: 290rpx;
     border-radius: 15rpx;
     padding: 30rpx;
@@ -584,7 +609,6 @@ onShow(() => {
 
   .activity-list {
     width: 100%;
-    margin-top: 20rpx;
     padding-left: 10rpx;
     display: flex;
     align-items: center;
@@ -617,7 +641,6 @@ onShow(() => {
 
 .book-block {
   padding: 20rpx 20rpx 0;
-
   .book-tab-one {
     display: flex;
     align-items: center;
@@ -700,7 +723,6 @@ onShow(() => {
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
-    margin-top: 20rpx;
 
     .book-item {
       width: 49%;
diff --git a/pages/book/search.vue b/pages/book/search.vue
index 497f7dd..3c3e92a 100644
--- a/pages/book/search.vue
+++ b/pages/book/search.vue
@@ -41,7 +41,7 @@
 import { ref, onMounted } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 import { useI18n } from 'vue-i18n'
-import { homeApi } from '@/api/modules/book_home'
+import { bookHomeApi } from '@/api/modules/book_home'
 import BookPrice from '@/components/book/BookPrice.vue'
 import type { IBookWithStats, IVipInfo } from '@/types/home'
 
@@ -66,7 +66,7 @@ onLoad((options: any) => {
  * 获取VIP信息
  */
 const getVipInfo = async () => {
-  const res = await homeApi.getVipInfo()
+  const res = await bookHomeApi.getVipInfo()
   vipInfo.value = res.vipInfo
 }
 
@@ -81,7 +81,7 @@ const handleSearch = async () => {
   loading.value = true
   isEmpty.value = false
 
-  const res = await homeApi.searchBooks({
+  const res = await bookHomeApi.searchBooks({
     title: keyword.value.trim(),
     page: 1,
     limit: 10,
diff --git a/pages/course/details/chapter.vue b/pages/course/details/chapter.vue
index f0e873f..be552fd 100644
--- a/pages/course/details/chapter.vue
+++ b/pages/course/details/chapter.vue
@@ -6,8 +6,9 @@
     <!-- 页面内容 -->
     <view class="page-content">
       <!-- 视频播放器 -->
-      <view v-if="videoList.length > 0" class="video-section">
+      <view class="video-section">
         <VideoPlayer
+          v-if="videoList.length > 0"
           ref="videoPlayerRef"
           v-model:current-index="currentVideoIndex"
           :video-list="videoList"
@@ -32,7 +33,7 @@
         <view class="section-title">{{ $t('courseDetails.videoTeaching') }}</view>
         <wd-radio-group v-model="currentVideoIndex" shape="button" >
           <wd-radio v-for="(video, index) in videoList" :key="video.id" :value="index" class="mb-2!">
-            【{{ video.type == "2" ? $t('courseDetails.audio') : $t('courseDetails.video') }}】{{ index + 1 }}
+            【{{ video.type == 2 ? $t('courseDetails.audio') : $t('courseDetails.video') }}】{{ index + 1 }}
           </wd-radio>
         </wd-radio-group>
       </view>
@@ -74,7 +75,8 @@ import { ref } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 import { courseApi } from '@/api/modules/course'
 import VideoPlayer from '@/components/video-player/index.vue'
-import type { IChapterDetail, IVideo } from '@/types/course'
+import type { IChapterDetail } from '@/types/course'
+import type { IVideoInfo } from '@/types/video'
 
 // 页面参数
 const chapterId = ref<number>(0)
@@ -83,7 +85,7 @@ const chapterTitle = ref('')
 
 // 页面数据
 const chapterDetail = ref<IChapterDetail | null>(null)
-const videoList = ref<IVideo[]>([])
+const videoList = ref<IVideoInfo[]>([])
 const currentVideoIndex = ref(0)
 const activeVideoIndex = ref(0)
 const currentTab = ref('chapterIntro')
@@ -141,6 +143,7 @@ const previewImage = (url: string) => {
 
 .video-section {
   background-color: #000;
+  height: 400rpx;
 }
 
 .info-section {
diff --git a/pages/course/details/components/CatalogueList.vue b/pages/course/details/components/CatalogueList.vue
index a9161a5..f904f2f 100644
--- a/pages/course/details/components/CatalogueList.vue
+++ b/pages/course/details/components/CatalogueList.vue
@@ -1,135 +1,147 @@
 <template>
-  <view class="course-content-wrapper">
-    <view 
-      v-if="catalogues.length > 1" 
-      :class="['catalogue-list', userVip ? 'vip-style' : '']"
-    >
-      <view
-        v-for="(catalogue, index) in catalogues"
-        :key="catalogue.id"
-        :class="['catalogue-item', currentCatalogueIndex === index ? 'active' : '']"
-        @click="handleSelect(index)"
-      >
-        <text class="catalogue-title">{{ catalogue.title }}</text>
-      </view>
-    </view>
-
-    <view class="chapter-list">
-      <!-- 目录状态信息 -->
-      <view class="catalogue-status">
-        <view v-if="currentCatalogue?.isBuy === 1 || userVip" class="purchased-info">
-          <view class="info-row">
-            <text v-if="userVip">
-              VIP畅学权益有效期截止到：{{ userVip.endTime }}
-            </text>
-            <template v-else>
-              <text v-if="!currentCatalogue.startTime">
-                当前目录还未开始学习
-              </text>
-              <text v-else>
-                课程有效期截止到：{{ currentCatalogue.endTime }}
-              </text>
-              <!-- <wd-button 
-                v-if="currentCatalogue.startTime"
-                size="small"
-                @click="handleRenew"
-              >
-                续费
-              </wd-button> -->
-            </template>
+  <view>
+    <Skeleton ref="skeleton" theme="line-list" :request="[getChapters, checkRenewPayment]" :auto="false" @success="getDataSuccess">
+      <template #loading-top>
+        <wd-skeleton :row-col="[
+          [{ width: '45%', height: '35px' }, { width: '45%', height: '35px' }],
+          [{ width: '100%', height: '90px' }]
+        ]" animation="gradient" class="mb-2.5! mt-5!" />
+      </template>
+      <template #content>
+        <view class="course-content-wrapper">
+          <view 
+            v-if="catalogues.length > 1" 
+            :class="['catalogue-list', userVip ? 'vip-style' : '']"
+          >
+            <view
+              v-for="(catalogue, index) in catalogues"
+              :key="catalogue.id"
+              :class="['catalogue-item', currentCatalogueIndex === index ? 'active' : '']"
+              @click="handleSelect(index)"
+            >
+              <text class="catalogue-title">{{ catalogue.title }}</text>
+            </view>
           </view>
-        </view>
-        
-        <!-- 未购买状态 -->
-        <view v-else-if="currentCatalogue?.type === 0" class="free-course">
-          <wd-button type="success" @click="handleGetFreeCourse">
-            {{ $t('courseDetails.free') }}
-          </wd-button>
-        </view>
-        
-        <view v-else class="unpurchased-info">
-          <text class="tip-text">
-            {{ $t('courseDetails.unpurchasedTip') }}
-          </text>
-          <view class="action-btns">
-            <wd-button size="small" type="warning" @click="handlePurchase">
-              {{ $t('courseDetails.purchase') }}
-            </wd-button>
-            <!-- 如果是复读显示复读按钮 -->
-            <wd-button v-if="canRenlearn" size="small" type="success" @click="handleRenlearn">
-              {{ $t('courseDetails.relearn') }}
-            </wd-button>
-            <wd-button size="small" type="primary" @click="goToVip">
-              {{ $t('courseDetails.openVip') }}
-            </wd-button>
-          </view>
-        </view>
-      </view>
 
-      <view v-if="chapterList.length > 0" class="chapter-content">
-        <!-- VIP标识 -->
-        <view v-if="userVip" class="vip-badge">
-          <text>VIP畅学权益生效中</text>
-        </view>
-        
-        <!-- 章节列表 -->
-        <view
-          v-for="(chapter, index) in chapterList"
-          :key="chapter.id"
-          class="chapter-item"
-          @click="handleChapterClick(chapter)"
-        >
-          <view class="chapter-content-wrapper">
-            <view :class="['chapter-info', !canAccess(chapter) ? 'locked' : '']">
-              <text class="chapter-title">{{ chapter.title }}</text>
+          <view class="chapter-list">
+            <!-- 目录状态信息 -->
+            <view class="catalogue-status">
+              <view v-if="currentCatalogue?.isBuy === 1 || userVip" class="purchased-info">
+                <view class="info-row">
+                  <text v-if="userVip">
+                    VIP畅学权益有效期截止到：{{ userVip.endTime }}
+                  </text>
+                  <template v-else>
+                    <text v-if="!currentCatalogue.startTime">
+                      当前目录还未开始学习
+                    </text>
+                    <text v-else>
+                      课程有效期截止到：{{ currentCatalogue.endTime }}
+                    </text>
+                    <!-- <wd-button 
+                      v-if="currentCatalogue.startTime"
+                      size="small"
+                      @click="handleRenew"
+                    >
+                      续费
+                    </wd-button> -->
+                  </template>
+                </view>
+              </view>
               
-              <!-- 试听标签 -->
-              <wd-tag
-                v-if="chapter.isAudition === 1 && !isPurchased && !userVip"
-                type="success"
-                plain
-                size="small"
-                custom-class="chapter-tag"
+              <!-- 未购买状态 -->
+              <view v-else-if="currentCatalogue?.type === 0" class="free-course">
+                <wd-button type="success" @click="handleGetFreeCourse">
+                  {{ $t('courseDetails.free') }}
+                </wd-button>
+              </view>
+              
+              <view v-else class="unpurchased-info">
+                <text class="tip-text">
+                  {{ $t('courseDetails.unpurchasedTip') }}
+                </text>
+                <view class="action-btns">
+                  <wd-button size="small" type="warning" @click="handlePurchase">
+                    {{ $t('courseDetails.purchase') }}
+                  </wd-button>
+                  <!-- 如果是复读显示复读按钮 -->
+                  <wd-button v-if="canRenlearn" size="small" type="success" @click="handleRenlearn">
+                    {{ $t('courseDetails.relearn') }}
+                  </wd-button>
+                  <wd-button size="small" type="primary" @click="goToVip">
+                    {{ $t('courseDetails.openVip') }}
+                  </wd-button>
+                </view>
+              </view>
+            </view>
+
+            <view v-if="chapterList.length > 0" class="chapter-content">
+              <!-- VIP标识 -->
+              <view v-if="userVip" class="vip-badge">
+                <text>VIP畅学权益生效中</text>
+              </view>
+              
+              <!-- 章节列表 -->
+              <view
+                v-for="(chapter, index) in chapterList"
+                :key="chapter.id"
+                class="chapter-item"
+                @click="handleChapterClick(chapter)"
               >
-                试听
-              </wd-tag>
-              
-              <!-- 学习状态标签 -->
-              <template v-if="isPurchased || userVip">
-                <wd-tag
-                  v-if="chapter.isLearned === 0"
-                  type="primary"
-                  plain
-                  size="small"
-                  custom-class="chapter-tag"
-                >
-                  未学
-                </wd-tag>
-                <wd-tag
-                  v-else
-                  type="success"
-                  plain
-                  size="small"
-                  custom-class="chapter-tag"
-                >
-                  已学
-                </wd-tag>
-              </template>
+                <view class="chapter-content-wrapper">
+                  <view :class="['chapter-info', !canAccess(chapter) ? 'locked' : '']">
+                    <text class="chapter-title">{{ chapter.title }}</text>
+                    
+                    <!-- 试听标签 -->
+                    <wd-tag
+                      v-if="chapter.isAudition === 1 && !isPurchased && !userVip"
+                      type="success"
+                      plain
+                      size="small"
+                      custom-class="chapter-tag"
+                    >
+                      试听
+                    </wd-tag>
+                    
+                    <!-- 学习状态标签 -->
+                    <template v-if="isPurchased || userVip">
+                      <wd-tag
+                        v-if="chapter.isLearned === 0"
+                        type="primary"
+                        plain
+                        size="small"
+                        custom-class="chapter-tag"
+                      >
+                        未学
+                      </wd-tag>
+                      <wd-tag
+                        v-else
+                        type="success"
+                        plain
+                        size="small"
+                        custom-class="chapter-tag"
+                      >
+                        已学
+                      </wd-tag>
+                    </template>
+                  </view>
+                  
+                  <!-- 锁定图标 -->
+                  <view v-if="!canAccess(chapter) && currentCatalogue.type != 0" class="lock-icon">
+                    <wd-icon name="lock-on" size="24px" color="#258feb" />
+                  </view>
+                </view>
+              </view>
             </view>
             
-            <!-- 锁定图标 -->
-            <view v-if="!canAccess(chapter) && currentCatalogue.type != 0" class="lock-icon">
-              <wd-icon name="lock-on" size="24px" color="#258feb" />
+            <!-- 暂无章节 -->
+            <view v-else class="no-chapters">
+              <text>暂无章节内容</text>
             </view>
           </view>
         </view>
-      </view>
-      
-      <!-- 暂无章节 -->
-      <view v-else class="no-chapters">
-        <text>暂无章节内容</text>
-      </view>
-    </view>
+      </template>
+    </Skeleton>
 
     <!-- 商品选择器 -->
     <GoodsSelector
@@ -147,12 +159,15 @@
 
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
+import { onShow } from '@dcloudio/uni-app'
 import { courseApi } from '@/api/modules/course'
 import GoodsSelector from '@/components/order/GoodsSelector.vue'
 import Protocol from './Protocol.vue'
 import type { IChapter, ICatalogue, IVipInfo } from '@/types/course'
 import type { IGoods } from '@/types/order'
 
+const skeleton = ref()
+
 interface Props {
   catalogues: ICatalogue[]
   userVip: IVipInfo | null
@@ -207,33 +222,43 @@ const handleSelect = (index: number) => {
 /**
  * 获取当前目录的章节
  */
-const getChapters = async () => {
-  const res = await courseApi.getCatalogueChapterList(currentCatalogue.value.id)
-  chapterList.value = res.chapterList || []
-}
+const getChapters = () => courseApi.getCatalogueChapterList(currentCatalogue.value.id)
 
 /**
  * 检查目录是否支持复读
  */
 const checkRenewPayment = async () => {
   if (currentCatalogue.value.isBuy === 0 && !props.userVip) {
-    const renewRes = await courseApi.checkRenewPayment(currentCatalogue.value.id)
-    canRenlearn.value = renewRes.canRelearn || false
+    return courseApi.checkRenewPayment(currentCatalogue.value.id)
   } else {
-    canRenlearn.value = false
+    return null
   }
 }
 
+/**
+ * 获取数据完成后处理
+ */
+const getDataSuccess = (res: any) => {
+  const { getChapters, checkRenewPayment } = res
+  chapterList.value = getChapters.chapterList || []
+  canRenlearn.value = checkRenewPayment.canRelearn || false
+}
+
 /**
  * 监听目录变化
  */
 watch(() => props.catalogues, (newVal: ICatalogue[]) => {
   if (newVal.length > 0) {
     currentCatalogueIndex.value = 0
-    getChapters()
-    checkRenewPayment()
+    skeleton.value.reload()
   }
 }, { immediate: true, deep: true })
+/**
+ * 刷新章节数据
+ */
+onShow(async () => {
+  skeleton.value && skeleton.value.reload()
+})
 
 // 购买
 const handlePurchase = async () => {
diff --git a/pages/course/details/components/Protocol.vue b/pages/course/details/components/Protocol.vue
index 1ae0fa9..94faac9 100644
--- a/pages/course/details/components/Protocol.vue
+++ b/pages/course/details/components/Protocol.vue
@@ -37,8 +37,6 @@ const props = defineProps<{
   visible: boolean
 }>()
 
-console.log(props.visible)
-
 const showProtocol = computed({
   get: () => props.visible,
   set: (val) => emit('update:visible', val)
diff --git a/pages/course/details/course.vue b/pages/course/details/course.vue
index 4ec91c9..6031604 100644
--- a/pages/course/details/course.vue
+++ b/pages/course/details/course.vue
@@ -13,11 +13,14 @@
     </view>
 
     <!-- 课程信息 -->
-    <CourseInfo v-if="courseDetail" :course="courseDetail" :class="{'pt-10': !!vipTip}" />
+    <Skeleton theme="image-text" :request="getCourseDetail" @success="getCourseDetailSuccess">
+      <template #content>
+        <CourseInfo v-if="courseDetail" :course="courseDetail" :class="{'pt-10': !!vipTip}" />
+      </template>
+    </Skeleton>
 
     <!-- 课程内容包装器 -->
     <CatalogueList
-      v-if="catalogueList.length > 0"
       :catalogues="catalogueList"
       :userVip="userVip"
       @toVip="goToVip"
@@ -177,38 +180,29 @@ const vipTip = computed(() => {
  */
 onLoad(async (options: any) => {
   courseId.value = parseInt(options.id)
-})
-
-/**
- * 页面显示
- */
-onShow(async () => {
-  await loadPageData()
+  loadPageData()
 })
 
 /**
  * 加载页面数据
  */
-const loadPageData = async () => {
-  // 获取课程详情
-  const res = await courseApi.getCourseDetail(courseId.value)
+const getCourseDetail = () => courseApi.getCourseDetail(courseId.value)
+const getCourseDetailSuccess = async (res: any) => {
   if (res.code === 0 && res.data) {
     courseDetail.value = res.data.course
     catalogueList.value = res.data.catalogues || []
     relatedBooks.value = res.data.shopProductList || []
-    
+
     // 计算学习进度
     if (catalogueList.value.length > 0) {
       const totalProgress = catalogueList.value.reduce((sum, cat) => sum + cat.completion, 0)
       learningProgress.value = Number((totalProgress / catalogueList.value.length).toFixed(2))
     }
   }
-  
+}
+const loadPageData = async () => {
   // 检查VIP权益
   await checkVipStatus()
-  
-  // 加载评论
-  await loadComments()
 }
 
 /**
@@ -448,11 +442,11 @@ onPullDownRefresh(async () => {
 /**
  * 触底加载
  */
-onReachBottom(() => {
-  if (hasMoreComments.value && !commentsLoading.value) {
-    loadComments()
-  }
-})
+// onReachBottom(() => {
+//   if (hasMoreComments.value && !commentsLoading.value) {
+//     loadComments()
+//   }
+// })
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/user/index.vue b/pages/user/index.vue
index da89343..a33c807 100644
--- a/pages/user/index.vue
+++ b/pages/user/index.vue
@@ -72,7 +72,7 @@
 			<wd-cell-group border class="menu-list">
 				<wd-cell v-for="item in menuItems" :key="item.id" :title="item.name" :label="item.desc" is-link
 					@click="handleMenuClick(item)">
-					<text v-if="item.hufenState" class="menu-list-hufen">{{hufenData.total ?? 0}}<text
+					<text v-if="item.hufenState" class="menu-list-hufen">{{hufenData?.total ?? 0}}<text
 							style="margin-left: 6rpx;">湖分</text></text>
 				</wd-cell>
 			</wd-cell-group>
@@ -85,8 +85,7 @@
 	import { ref, computed, onMounted } from 'vue'
 	import { useUserStore } from '@/stores/user'
 	import { useSysStore } from '@/stores/sys'
-	import { getUserInfo, getVipInfo, getUserContributionData } from '@/api/modules/user'
-	import type { IVipInfo } from '@/types/user'
+	import { getUserInfo, getUserContributionData } from '@/api/modules/user'
 	import { getNotchHeight } from '@/utils/system'
 	import { parseTime } from '@/utils/index'
 	import { t } from '@/utils/i18n'
@@ -166,7 +165,7 @@
 		},
 	])
 	// 湖分
-	const hufenData = ref('')
+	const hufenData = ref()
 
 	/**
 	 * 获取平台信息
@@ -192,6 +191,7 @@
 	 */
 	const getHufen = async () => {
 		hufenData.value = await getUserContributionData()
+		hufenData.value = await getUserContributionData()
 	}
 
 	/**
diff --git a/style/tailwind.css b/style/tailwind.css
index d939348..e26e97b 100644
--- a/style/tailwind.css
+++ b/style/tailwind.css
@@ -8,6 +8,8 @@
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
     --color-red-500: oklch(63.7% 0.237 25.331);
+    --color-gray-300: oklch(87.2% 0.01 258.338);
+    --color-gray-500: oklch(55.1% 0.027 264.364);
     --color-white: #fff;
     --spacing: 0.25rem;
     --text-xs: 0.75rem;
@@ -212,18 +214,81 @@
       max-width: 96rem;
     }
   }
+  .mt-2 {
+    margin-top: calc(var(--spacing) * 2);
+  }
+  .mt-2\! {
+    margin-top: calc(var(--spacing) * 2) !important;
+  }
+  .mt-2\.5\! {
+    margin-top: calc(var(--spacing) * 2.5) !important;
+  }
+  .mt-3 {
+    margin-top: calc(var(--spacing) * 3);
+  }
+  .mt-3\! {
+    margin-top: calc(var(--spacing) * 3) !important;
+  }
+  .mt-5 {
+    margin-top: calc(var(--spacing) * 5);
+  }
+  .mt-5\! {
+    margin-top: calc(var(--spacing) * 5) !important;
+  }
+  .mt-20 {
+    margin-top: calc(var(--spacing) * 20);
+  }
+  .mt-20\! {
+    margin-top: calc(var(--spacing) * 20) !important;
+  }
+  .mt-\[20rpx\]\! {
+    margin-top: 20rpx !important;
+  }
+  .mr-\[20rpx\] {
+    margin-right: 20rpx;
+  }
+  .mr-\[20rpx\]\! {
+    margin-right: 20rpx !important;
+  }
+  .mb-1 {
+    margin-bottom: calc(var(--spacing) * 1);
+  }
+  .mb-1\! {
+    margin-bottom: calc(var(--spacing) * 1) !important;
+  }
+  .mb-1\.5\! {
+    margin-bottom: calc(var(--spacing) * 1.5) !important;
+  }
+  .mb-2 {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
   .mb-2\! {
     margin-bottom: calc(var(--spacing) * 2) !important;
   }
+  .mb-2\.5\! {
+    margin-bottom: calc(var(--spacing) * 2.5) !important;
+  }
   .mb-\[20rpx\]\! {
     margin-bottom: 20rpx !important;
   }
+  .ml-1 {
+    margin-left: calc(var(--spacing) * 1);
+  }
   .ml-1\! {
     margin-left: calc(var(--spacing) * 1) !important;
   }
+  .ml-2 {
+    margin-left: calc(var(--spacing) * 2);
+  }
   .ml-2\.5\! {
     margin-left: calc(var(--spacing) * 2.5) !important;
   }
+  .ml-\[20rpx\] {
+    margin-left: 20rpx;
+  }
+  .ml-\[20rpx\]\! {
+    margin-left: 20rpx !important;
+  }
   .block {
     display: block;
   }
@@ -248,6 +313,9 @@
   .table {
     display: table;
   }
+  .w-\[50\%\] {
+    width: 50%;
+  }
   .w-\[100px\] {
     width: 100px;
   }
@@ -257,6 +325,9 @@
   .flex-shrink {
     flex-shrink: 1;
   }
+  .border-collapse {
+    border-collapse: collapse;
+  }
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
@@ -273,18 +344,39 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .bg-gray-300 {
+    background-color: var(--color-gray-300);
+  }
+  .bg-gray-500 {
+    background-color: var(--color-gray-500);
+  }
   .bg-white {
     background-color: var(--color-white);
   }
+  .p-0 {
+    padding: calc(var(--spacing) * 0);
+  }
   .p-0\! {
     padding: calc(var(--spacing) * 0) !important;
   }
+  .p-2 {
+    padding: calc(var(--spacing) * 2);
+  }
+  .p-2\.5 {
+    padding: calc(var(--spacing) * 2.5);
+  }
+  .p-3 {
+    padding: calc(var(--spacing) * 3);
+  }
   .p-\[10rpx\] {
     padding: 10rpx;
   }
   .p-\[20rpx\] {
     padding: 20rpx;
   }
+  .p-\[20rpx\]\! {
+    padding: 20rpx !important;
+  }
   .p-\[30rpx\] {
     padding: 30rpx;
   }
@@ -297,6 +389,9 @@
   .pt-\[10rpx\] {
     padding-top: 10rpx;
   }
+  .pb-0 {
+    padding-bottom: calc(var(--spacing) * 0);
+  }
   .pb-0\! {
     padding-bottom: calc(var(--spacing) * 0) !important;
   }
@@ -347,6 +442,9 @@
     --tw-ordinal: ordinal;
     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
   }
+  .underline {
+    text-decoration-line: underline;
+  }
   .shadow-\[0_4rpx_12rpx_rgba\(0\,0\,0\,0\.05\)\] {
     --tw-shadow: 0 4rpx 12rpx var(--tw-shadow-color, rgba(0,0,0,0.05));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
diff --git a/types/book.d.ts b/types/book.d.ts
index d68076a..5afb45a 100644
--- a/types/book.d.ts
+++ b/types/book.d.ts
@@ -129,7 +129,6 @@ export interface IPageData<T> {
 export interface IApiResponse<T = any> {
   code: number
   msg?: string
-  info?: string
   [key: string]: any
 }
 
diff --git a/types/course.d.ts b/types/course.d.ts
index 1d20d47..e614cec 100644
--- a/types/course.d.ts
+++ b/types/course.d.ts
@@ -3,7 +3,8 @@
  * 课程相关类型定义
  */
 
-import type { IApiResponse } from './book'
+import type { IApiResponse } from '@/api/types'
+import type { IVideoInfo } from './video'
 import type { IGoods } from './order'
 
 /** 医学标签（课程分类） */
@@ -93,14 +94,6 @@ export interface IChapterDetail {
   questions: string                // 思考题内容
 }
 
-/** 视频信息 */
-export interface IVideo {
-  id: number
-  title: string
-  url: string
-  duration?: number
-}
-
 /** VIP信息 */
 export interface IVipInfo {
   type: number                     // VIP类型 4-中医学 5-针灸学 6-肿瘤学 7-国学 8-心理学 9-中西汇通学
@@ -140,7 +133,7 @@ export interface IChapterListResponse extends IApiResponse {
 export interface IChapterDetailResponse extends IApiResponse {
   data: {
     detail: IChapterDetail
-    videos: IVideo[]
+    videos: IVideoInfo[]
     current?: number               // 当前播放视频ID
   }
 }
diff --git a/types/video.d.ts b/types/video.d.ts
index e544531..28dac20 100644
--- a/types/video.d.ts
+++ b/types/video.d.ts
@@ -6,7 +6,7 @@
 export interface IVideoInfo {
   id: number
   chapterId: number
-  type: 0 | 1 // 0: MP4, 1: M3U8
+  type: 0 | 1 | 2 // 0: MP4, 1: M3U8, 2: 音频
   video: string // 视频ID
   sort: number
   duration: number // 视频时长（秒）
@@ -46,14 +46,7 @@ export interface IVideoCheckResponse {
  * 视频播放器组件 Props
  */
 export interface IVideoPlayerProps {
-  videoList: Array<{
-    id: number
-    chapterId: number
-    video: string
-    sort: number
-    type?: 0 | 1
-    duration?: number
-  }>
+  videoList: Array<IVideoInfo>
   currentIndex: number
   countdownSeconds?: number
   showWatermark?: boolean