更新：1.课程详情增加骨架屏；2.图书首页和图书详情增加骨架屏；

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>

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>

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>

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>

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>

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>

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