@airhang/vue-book-reader 1.0.0

package/src/components/BookCatalogueDrawer.vue

@@ -0,0 +1,839 @@
+<template>
+  <div class="catalogue-drawer-container">
+    <!-- 遮罩层 -->
+    <div v-if="visible" class="drawer-overlay" @click="closeDrawer"></div>
+    
+    <!-- 抽屉主体 -->
+    <div 
+      class="catalogue-drawer" 
+      :class="{ 'drawer-open': visible }"
+      :style="{ width: drawerWidth }"
+    >
+      <div class="drawer-header">
+        <h3 class="drawer-title">目录</h3>
+        <button class="close-button" @click="closeDrawer">
+          <span class="close-icon">×</span>
+        </button>
+      </div>
+
+      <!-- 页码跳转 -->
+      <div class="page-jump-section">
+        <input
+          type="text"
+          v-model="jumpPageInput"
+          @input="handlePageInput"
+          placeholder="请输入页码"
+          class="page-jump-input"
+          @focus="onInputFocus"
+          @blur="onInputBlur"
+        />
+        <button @click="handleJumpToPage" class="btn-jump">
+          跳转
+        </button>
+      </div>
+
+      <div class="drawer-content">
+        <!-- 加载状态 -->
+        <div v-if="loading" class="loading-container">
+          <div class="loading-spinner"></div>
+          <p>加载目录中...</p>
+        </div>
+        
+        <!-- 错误状态 -->
+        <div v-else-if="error" class="error-container">
+          <div class="error-icon">⚠️</div>
+          <p>目录加载失败</p>
+          <button class="retry-button" @click="fetchCatalogue">
+            重新加载
+          </button>
+        </div>
+        
+        <!-- 目录内容 -->
+        <div v-else-if="catalogueData && catalogueData.length > 0" class="catalogue-list">
+          <catalogue-item
+            v-for="(item, index) in catalogueData"
+            :key="`catalogue-${index}`"
+            :item="item || {}"
+            :level="0"
+            @item-click="onItemClick"
+          />
+        </div>
+        
+        <!-- 空状态 -->
+        <div v-else class="empty-container">
+          <p>暂无目录</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// 目录项组件
+const CatalogueItem = {
+  name: 'CatalogueItem',
+  props: {
+    item: {
+      type: Object,
+      required: true
+    },
+    level: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      expanded: false
+    }
+  },
+  computed: {
+    hasChildren() {
+      const children = this.item.childrenList || this.item.children || this.item.subItems || this.item.items
+      return children && children.length > 0
+    },
+    childrenData() {
+      return this.item.childrenList || this.item.children || this.item.subItems || this.item.items || []
+    },
+    itemStyle() {
+      // 移除缩进，所有层级都左对齐
+      return {
+        paddingLeft: '12px',
+        paddingRight: '12px'
+      }
+    },
+    levelClass() {
+      return `level-${this.level}`
+    }
+  },
+  methods: {
+    toggleExpand() {
+      if (this.hasChildren) {
+        this.expanded = !this.expanded
+      } else {
+        this.handleClick()
+      }
+    },
+    handleClick() {
+      this.$emit('item-click', this.item)
+    }
+  },
+  render(h) {
+    const item = this.item
+    const titleText = item.titleName || item.title || item.name || item.text || item.label || '未命名章节'
+    const pageNum = item.startPageNum || item.pageNumber || item.page || item.pageNum
+    
+    // 创建拖拽手柄
+    const dragHandle = h('span', {
+      class: 'drag-handle'
+    }, '')
+    
+    // 创建展开图标
+    const expandIcon = this.hasChildren ? h('span', {
+      class: 'expand-icon'
+    }, this.expanded ? '▼' : '▶') : null
+    
+    // 创建层级指示器
+    const levelIndicator = this.level > 0 ? h('span', {
+      class: `level-indicator level-${this.level}`
+    }, '•'.repeat(this.level)) : null
+    
+    // 创建标题
+    const titleSpan = h('span', {
+      class: 'item-title'
+    }, titleText)
+    
+    // 创建页码（放在标题后面）
+    // const pageSpan = pageNum ? h('span', {
+    //   class: 'page-number'
+    // }, `第${pageNum}页`) : null
+    const pageSpan =  null
+    // 创建子级目录
+    const childrenDiv = (this.hasChildren && this.expanded) ? h('div', {
+      class: 'children-container'
+    }, this.childrenData.map((child, index) => {
+      return h('catalogue-item', {
+        key: index,
+        props: {
+          item: child,
+          level: this.level + 1
+        },
+        on: {
+          'item-click': (item) => this.$emit('item-click', item)
+        }
+      })
+    })) : null
+    
+    return h('div', {
+      class: 'catalogue-item-wrapper'
+    }, [
+      h('div', {
+        class: [
+          'catalogue-item',
+          this.levelClass,
+          {
+            'has-children': this.hasChildren,
+            'expanded': this.expanded
+          }
+        ],
+        style: this.itemStyle,
+        on: {
+          click: this.toggleExpand
+        }
+      }, [
+        h('div', {
+          class: 'item-content'
+        }, [dragHandle, expandIcon, levelIndicator, titleSpan, pageSpan].filter(Boolean))
+      ]),
+      childrenDiv
+    ].filter(Boolean))
+  }
+}
+
+export default {
+  name: 'BookCatalogueDrawer',
+  components: {
+    CatalogueItem
+  },
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    bookId: {
+      type: String,
+      default: ''
+    },
+    catalogue: {
+      type: Array,
+      default: () => []
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      catalogueData: [],
+      error: null,
+      jumpPageInput: ''
+    }
+  },
+  computed: {
+    visible: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    drawerWidth() {
+      // 响应式宽度
+      return window.innerWidth <= 768 ? '80%' : '400px'
+    }
+  },
+  watch: {
+    visible(newVal) {
+      if (newVal && this.bookId && !this.catalogueData.length) {
+        this.$emit('fetch-catalogue', this.bookId)
+      }
+    },
+    bookId(newVal) {
+      if (newVal && this.visible) {
+        this.$emit('fetch-catalogue', newVal)
+      }
+    },
+    catalogue: {
+      handler(newVal) {
+        if (newVal && newVal.length > 0) {
+          this.catalogueData = this.processCatalogueData(newVal)
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    /**
+     * 获取目录数据 - 触发事件让父组件处理
+     */
+    fetchCatalogue() {
+      if (!this.bookId) {
+        console.warn('缺少 bookId，无法获取目录')
+        return
+      }
+      this.$emit('fetch-catalogue', this.bookId)
+    },
+
+    /**
+     * 处理目录数据，确保数据结构正确
+     * @param {Array} data - 原始目录数据
+     * @returns {Array} 处理后的目录数据
+     */
+    processCatalogueData(data) {
+      if (!Array.isArray(data)) {
+        return []
+      }
+      
+      return data.map(item => {
+        if (!item || typeof item !== 'object') {
+          return {
+            titleName: '未知章节',
+            startPageNum: null,
+            childrenList: []
+          }
+        }
+        
+        // 确保必要的字段存在
+        const processedItem = {
+          ...item,
+          titleName: item.titleName || item.title || item.name || '未命名章节',
+          startPageNum: item.startPageNum || item.pageNumber || item.page || item.pageNum || null,
+          childrenList: item.childrenList || item.children || item.subItems || item.items || []
+        }
+        
+        // 递归处理子级
+        if (processedItem.childrenList && processedItem.childrenList.length > 0) {
+          processedItem.childrenList = this.processCatalogueData(processedItem.childrenList)
+        }
+        
+        return processedItem
+      })
+    },
+
+    /**
+     * 目录项点击事件
+     * @param {Object} item - 点击的目录项
+     */
+    onItemClick(item) {
+      console.log('目录项被点击:', item)
+      
+      // 发送事件给父组件
+      this.$emit('catalogue-click', item)
+      
+      // 如果有页码信息，可以进行跳转
+      const pageNumber = item.startPageNum || item.pageNumber || item.page || item.pageNum
+      if (pageNumber) {
+        this.$emit('page-jump', pageNumber)
+      }
+    },
+
+    /**
+     * 关闭抽屉
+     */
+    closeDrawer() {
+      this.$emit('input', false)
+    },
+
+    /**
+     * 处理页码输入
+     */
+    handlePageInput(e) {
+      const value = e.target.value
+      const numValue = value.replace(/[^\d]/g, '')
+      this.jumpPageInput = numValue
+    },
+
+    /**
+     * 执行页码跳转
+     */
+    handleJumpToPage() {
+      const pageNum = parseInt(this.jumpPageInput)
+      if (pageNum && pageNum >= 1) {
+        this.$emit('page-jump', pageNum)
+        this.jumpPageInput = ''
+        this.closeDrawer()
+      }
+    },
+
+    /**
+     * 输入框获得焦点
+     */
+    onInputFocus() {
+      // 可以在这里添加焦点处理逻辑
+    },
+
+    /**
+     * 输入框失去焦点
+     */
+    onInputBlur() {
+      this.$emit('Focus')
+    },
+
+    /**
+     * 重置数据
+     */
+    resetData() {
+      this.catalogueData = []
+      this.error = null
+      this.loading = false
+    },
+
+    /**
+     * 处理窗口大小变化
+     */
+    handleResize() {
+      // 可以在这里添加响应式逻辑
+    }
+  },
+
+  mounted() {
+    // 监听窗口大小变化
+    window.addEventListener('resize', this.handleResize)
+  },
+
+  beforeDestroy() {
+    window.removeEventListener('resize', this.handleResize)
+  }
+}
+</script>
+
+<style scoped>
+/* 容器 */
+.catalogue-drawer-container {
+  position: relative;
+}
+
+/* 遮罩层 */
+.drawer-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 19998;
+  transition: opacity 0.3s ease;
+}
+
+/* 抽屉主体 */
+.catalogue-drawer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background: #ffffff;
+  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
+  transform: translateX(-100%);
+  transition: transform 0.3s ease;
+  z-index: 19999;
+  overflow: hidden;
+  /* 处理安全区域 */
+  padding-top: env(safe-area-inset-top);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.catalogue-drawer.drawer-open {
+  transform: translateX(0);
+}
+
+.drawer-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  border-bottom: 1px solid #e5e5e5;
+  background: #ffffff;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.drawer-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333333;
+  margin: 0;
+}
+
+.close-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 6px;
+  border-radius: 4px;
+  transition: background-color 0.2s ease;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.close-button:hover {
+  background: #f5f5f5;
+}
+
+.close-icon {
+  font-size: 18px;
+  color: #666;
+  line-height: 1;
+  display: block;
+}
+
+.close-button:hover .close-icon {
+  color: #333;
+}
+
+/* 页码跳转区域 */
+.page-jump-section {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  border-bottom: 1px solid #e5e5e5;
+  background: #f8f9fa;
+}
+
+.page-jump-input {
+  flex: 1;
+  min-width: 0;
+  padding: 10px 12px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  background: #fff;
+  color: #333;
+  font-size: 16px;
+  text-align: center;
+  outline: none;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.page-jump-input:focus {
+  border-color: #1989fa;
+  box-shadow: 0 0 0 2px rgba(25, 137, 250, 0.1);
+}
+
+.page-jump-input::placeholder {
+  color: #999;
+  font-size: 14px;
+}
+
+.btn-jump {
+  flex-shrink: 0;
+  padding: 10px 20px;
+  background: #1989fa;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.2s ease;
+  white-space: nowrap;
+}
+
+.btn-jump:hover {
+  background: #0066cc;
+}
+
+.btn-jump:active {
+  background: #004499;
+}
+
+.drawer-content {
+  height: calc(100% - 65px);
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.loading-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 200px;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.loading-spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid #f3f3f3;
+  border-top: 3px solid #1989fa;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.error-container,
+.empty-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 20px;
+  text-align: left;
+}
+
+.error-icon {
+  font-size: 48px;
+  margin-bottom: 16px;
+}
+
+.retry-button {
+  margin-top: 16px;
+  background: #1989fa;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.retry-button:hover {
+  background: #0066cc;
+}
+
+.catalogue-list {
+  padding: 0;
+}
+
+.catalogue-item-wrapper {
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.catalogue-item-wrapper:last-child {
+  border-bottom: none;
+}
+
+.catalogue-item {
+  padding: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  position: relative;
+  min-height: 44px;
+  border-left: 3px solid transparent;
+}
+
+.catalogue-item:hover {
+  background-color: #f8f9fa;
+}
+
+.catalogue-item:active {
+  background-color: #e9ecef;
+}
+
+.item-content {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  width: 100%;
+  justify-content: flex-start;
+  gap: 8px;
+}
+
+/* 拖拽手柄样式 */
+.drag-handle {
+  color: #ccc;
+  font-size: 14px;
+  cursor: grab;
+  transition: color 0.2s ease;
+  flex-shrink: 0;
+  width: 20px;
+  text-align: center;
+  line-height: 1;
+  user-select: none;
+}
+
+.drag-handle:hover {
+  color: #999;
+}
+
+.drag-handle:active {
+  cursor: grabbing;
+  color: #666;
+}
+
+/* 层级指示器样式 */
+.level-indicator {
+  font-size: 10px;
+  color: #999;
+  flex-shrink: 0;
+  line-height: 1;
+  margin-right: 4px;
+}
+
+.level-indicator.level-1 {
+  color: #007bff;
+}
+
+.level-indicator.level-2 {
+  color: #28a745;
+}
+
+.level-indicator.level-3 {
+  color: #ffc107;
+}
+
+.expand-icon {
+  font-size: 12px;
+  color: #999;
+  transition: color 0.2s ease;
+  flex-shrink: 0;
+  width: 16px;
+  text-align: center;
+}
+
+.catalogue-item:hover .expand-icon {
+  color: #666;
+}
+
+.item-title {
+  font-size: 14px;
+  color: #333;
+  line-height: 1.4;
+  font-weight: 400;
+}
+
+.page-number {
+  font-size: 12px;
+  color: #999;
+  margin-left: 6px;
+}
+
+/* 不同层级的样式 - 用颜色和字体大小区分层级 */
+.catalogue-item.level-0 {
+  background: linear-gradient(90deg, transparent, rgba(0, 123, 255, 0.05), transparent);
+}
+
+.catalogue-item.level-0 .item-title {
+  font-size: 15px;
+  color: #333;
+  font-weight: 600;
+}
+
+.catalogue-item.level-1 {
+  background: linear-gradient(90deg, transparent, rgba(40, 167, 69, 0.03), transparent);
+}
+
+.catalogue-item.level-1 .item-title {
+  font-size: 14px;
+  color: #555;
+  font-weight: 500;
+}
+
+.catalogue-item.level-2 {
+  background: linear-gradient(90deg, transparent, rgba(255, 193, 7, 0.03), transparent);
+}
+
+.catalogue-item.level-2 .item-title {
+  font-size: 13px;
+  color: #666;
+  font-weight: 400;
+}
+
+.catalogue-item.level-3 .item-title {
+  font-size: 12px;
+  color: #777;
+  font-weight: 400;
+}
+
+.children-container {
+  /* 移除背景色，保持一致性 */
+  background: transparent;
+}
+
+/* 移动端适配 */
+@media (max-width: 768px) {
+  .catalogue-drawer {
+    /* 移动端安全区域适配 */
+    padding-top: max(env(safe-area-inset-top), 20px);
+    padding-bottom: max(env(safe-area-inset-bottom), 20px);
+  }
+  
+  .drawer-header {
+    padding: 14px 16px;
+  }
+  
+  .drawer-title {
+    font-size: 16px;
+  }
+  
+  .catalogue-item {
+    padding: 10px 8px;
+    min-height: 44px; /* 增加触摸区域 */
+  }
+  
+  .drag-handle {
+    font-size: 16px; /* 移动端增大手柄 */
+    width: 24px;
+  }
+  
+  .item-title {
+    font-size: 13px;
+  }
+  
+  .catalogue-item.level-0 .item-title {
+    font-size: 14px;
+  }
+  
+  .page-number {
+    font-size: 11px;
+  }
+  
+  .level-indicator {
+    font-size: 12px; /* 移动端增大指示器 */
+  }
+}
+
+/* 滚动条样式 */
+.drawer-content::-webkit-scrollbar {
+  width: 4px;
+}
+
+.drawer-content::-webkit-scrollbar-track {
+  background: #f5f5f5;
+}
+
+.drawer-content::-webkit-scrollbar-thumb {
+  background: #ccc;
+  border-radius: 2px;
+}
+
+.drawer-content::-webkit-scrollbar-thumb:hover {
+  background: #999;
+}
+
+/* 拖拽状态样式 */
+.catalogue-item.dragging {
+  opacity: 0.5;
+  transform: scale(0.95);
+  background: #f0f8ff;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+/* 拖拽悬停目标样式 */
+.catalogue-item.drag-over {
+  border-top: 2px solid #007bff;
+  background: rgba(0, 123, 255, 0.1);
+}
+
+/* 增强视觉层次 */
+.catalogue-item {
+  border-left: 3px solid transparent;
+  transition: all 0.2s ease;
+}
+
+.catalogue-item.level-0 {
+  border-left-color: #007bff;
+}
+
+.catalogue-item.level-1 {
+  border-left-color: #28a745;
+}
+
+.catalogue-item.level-2 {
+  border-left-color: #ffc107;
+}
+
+.catalogue-item.level-3 {
+  border-left-color: #dc3545;
+}
+</style>