更新：增加“我的书单”功能

components/book/BookCard.vue

@@ -0,0 +1,168 @@
+<template>
+  <view class="book-card" @click="handleClick">
+    <image :src="book.images" class="cover" mode="aspectFill" />
+    <view class="info">
+      <text class="title">{{ book.name }}</text>
+      <view class="actions">
+        <view 
+          class="action-btn read" 
+          :style="isIOS ? 'width: 100px' : ''"
+          @click.stop="handleRead"
+        >
+          <view class="btn-icon read-icon">
+            <image src="@/static/icon/icon_look.png" mode="aspectFit" />
+          </view>
+          <text>{{ $t('book.read') }}</text>
+        </view>
+        
+        <view 
+          class="action-btn listen" 
+          :style="isIOS ? 'width: 100px' : ''"
+          @click.stop="handleListen"
+        >
+          <view class="btn-icon listen-icon">
+            <image src="@/static/icon/icon_listen.png" mode="aspectFit" />
+          </view>
+          <text>{{ $t('book.listen') }}</text>
+        </view>
+        
+        <view 
+          v-if="!isIOS" 
+          class="action-btn review" 
+          @click.stop="handleReview"
+        >
+          <view class="btn-icon review-icon">
+            <image src="@/static/icon/icon_pl.png" mode="aspectFit" />
+          </view>
+          <text>{{ $t('book.comment') }}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { IBook } from '@/types/book'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+interface Props {
+  book: IBook
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  click: []
+  read: []
+  listen: []
+  review: []
+}>()
+
+const isIOS = computed(() => {
+  // #ifdef APP-PLUS
+  return uni.getSystemInfoSync().platform === 'ios'
+  // #endif
+  // #ifndef APP-PLUS
+  return false
+  // #endif
+})
+
+const handleClick = () => emit('click')
+const handleRead = () => emit('read')
+const handleListen = () => emit('listen')
+const handleReview = () => emit('review')
+</script>
+
+<style lang="scss" scoped>
+.book-card {
+  display: flex;
+  background: #fff;
+  border-radius: 15rpx;
+  padding: 30rpx 0 30rpx 30rpx;
+  margin-top: 20rpx;
+  
+  .cover {
+    width: 210rpx;
+    height: 270rpx;
+    border-radius: 10rpx;
+    flex-shrink: 0;
+  }
+  
+  .info {
+    flex: 1;
+    width: calc(100% - 210rpx);
+    padding-left: 40rpx;
+    display: flex;
+    flex-direction: column;
+    
+    .title {
+      padding-top: 40rpx;
+      display: block;
+      width: 95%;
+      font-size: 38rpx;
+      font-weight: bold;
+      color: #333;
+      line-height: 40rpx;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    
+    .actions {
+      margin-top: 50rpx;
+      margin-left: -15rpx;
+      display: flex;
+      
+      .action-btn {
+        width: 135rpx;
+        text-align: center;
+        
+        .btn-icon {
+          border-radius: 50%;
+          width: 85rpx;
+          height: 85rpx;
+          margin: 0 auto;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          
+          image {
+            width: 40rpx;
+            height: 40rpx;
+          }
+        }
+        
+        .read-icon {
+          background: #6bba6b;
+          box-shadow: 0 0 10px rgba(107, 186, 107, 0.5);
+        }
+        
+        .listen-icon {
+          background: #f7cb5e;
+          box-shadow: 0 0 10px rgba(247, 203, 94, 0.5);
+        }
+        
+        .review-icon {
+          background: #888888;
+          box-shadow: 0 0 10px rgba(136, 136, 136, 0.5);
+        }
+        
+        text {
+          display: block;
+          font-size: 26rpx;
+          text-align: center;
+          line-height: 44rpx;
+          padding-top: 10rpx;
+          color: #999;
+        }
+      }
+      
+      .action-btn:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+}
+</style>