PPT/src/views/Editor/Thumbnails/ThumbnailChildPage.vue

<template>
  <div class="thumbnail-child-page" @click="handleClick" :class="{ 'active': slideIndexStore === props.slideIndex || 0 }">
    <div class="child-page-icon">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
        <line x1="9" y1="9" x2="15" y2="9"></line>
        <line x1="9" y1="15" x2="15" y2="15"></line>
      </svg>
    </div>
    <div class="child-page-label">{{ lang.ssChildPageLabel }}</div>
    <div class="child-page-label">{{ lang.ssPendingCount }}（{{ pendingCount }} / {{ props.toolsArray?.length || 0 }}）</div>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { lang } from '@/main'
import { useMainStore, useSlidesStore } from '@/store'
import { storeToRefs } from 'pinia'

const props = defineProps<{
  toolsArray?: any[]
  slideIndex?: number
}>()

const mainStore = useMainStore()
const { setChildPageState } = mainStore
const slidesStore = useSlidesStore()
const { currentSlide, slideIndex: slideIndexStore } = storeToRefs(slidesStore)

// 切换页面
const changeSlideIndex = (index: number) => {
  mainStore.setActiveElementIdList([])

  if (slideIndexStore.value === index) return
  slidesStore.updateSlideIndex(index)
}

const handleClick = () => {
  if (slideIndexStore.value === props.slideIndex) return
  console.log(props.slideIndex)
  changeSlideIndex(props.slideIndex || 0)
  setChildPageState(false, [], props.slideIndex || 0)
  setTimeout(() => {
    setChildPageState(true, props.toolsArray || [], props.slideIndex || 0)
  }, 500)
}

// 计算待处理任务数量
const pendingCount = computed(() => {
  return props.toolsArray?.filter(item => item.isSet === true).length || 0
})
</script>

<style lang="scss" scoped>
.thumbnail-child-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5px;
  width: 100px;
  height: 75px;
  background-color: #fffbeb;
  border: 2px dashed #f59e0b;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;

  &.active {
    border-style: solid;
  }

  &:hover {
    background-color: #fef3c7;
    border-style: solid;
  }

  .child-page-icon {
    width: 24px;
    height: 24px;
    color: #f59e0b;
    margin-bottom: 4px;
  }

  .child-page-label {
    font-size: 10px;
    color: #d97706;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
}
</style>