SmartisanNote.Remake/src/components/FolderItem.vue

<template>
  <div @click="onPress" class="code-fun-flex-row code-fun-items-center code-fun-relative code-fun-justify-between folder-item">
    <div class="code-fun-flex-row code-fun-items-center">
      <!-- 文件夹图标或复选框 -->
      <div v-if="isSelectionMode && showDeleteButton" class="folder-checkbox" @click.stop="onCheckboxClick">
        <img :src="isChecked ? '/assets/icons/drawable-xxhdpi/check_box_on.png' : '/assets/icons/drawable-xxhdpi/check_box_off.png'" class="checkbox-icon" />
      </div>

      <img v-else class="folder-icon" :src="iconSrc" />
      <span class="folder-name">{{ name }}</span>
      <span class="folder-count">{{ noteCount }}</span>
    </div>

    <!-- 编辑按钮，仅在选择模式下对自定义文件夹显示 -->
    <div v-if="showDeleteButton && isSelectionMode" class="folder-actions">
      <img class="edit-icon" src="/assets/icons/drawable-xxhdpi/icon_folder_rename.png" @click.stop="onEdit" />
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  id: {
    type: String,
    required: true,
  },

  name: {
    type: String,
    required: true,
  },

  noteCount: {
    type: Number,
    required: true,
  },

  onPress: {
    type: Function,
    required: true,
  },

  onEdit: {
    type: Function,
    default: null,
  },

  onDelete: {
    type: Function,
    default: null,
  },

  isSelected: {
    type: Boolean,
    default: false,
  },

  isSelectionMode: {
    type: Boolean,

    default: false,
  },

  isChecked: {
    type: Boolean,

    default: false,
  },

  onCheckboxClick: {
    type: Function,

    default: null,
  },
})

const iconSrc = computed(() => {
  switch (props.id) {
    case 'all':
      return 'assets/icons/drawable-xxhdpi/icon_folder_all.png'

    case 'starred':
      return 'assets/icons/drawable-xxhdpi/icon_folder_favorite.png'

    case 'trash':
      return 'assets/icons/drawable-xxhdpi/icon_folder_trash.png'

    case 'archive':
      return 'assets/icons/drawable-xxhdpi/icon_folder_document.png'

    default:
      return 'assets/icons/drawable-xxhdpi/icon_folder_document.png'
  }
})

// 仅对自定义文件夹显示删除按钮

const showDeleteButton = computed(() => {
  return !['all', 'starred', 'trash', 'archive'].includes(props.id)
})
</script>

<style lang="less" scoped>
.folder-item {
  padding: 0.3rem 0;
  background-color: #00000000;
}

.folder-icon {
  width: 1.8rem;
  height: 1.8rem;
  flex-shrink: 0;
  margin-inline: 0.3rem;
}

.folder-name {
  font-size: 0.9rem;
  line-height: 1.52rem;
  color: #9b9b9b;
}

.folder-count {
  font-size: 0.8rem;
  line-height: 1.16rem;
  margin-left: 0.7rem;
  margin-top: 0.2rem;
  color: #b8b8b8;
}

.folder-actions {
  display: flex;
  margin-left: auto;
  margin-right: 0.5rem;
}

.edit-icon,
.delete-icon {
  width: 1.5rem;

  height: 1.5rem;

  margin: 0 0.2rem;

  opacity: 0.5;
}

.edit-icon:hover,
.delete-icon:hover {
  opacity: 1;
}

.folder-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  flex-shrink: 0;
  margin-inline: 0.3rem;
}

.checkbox-icon {
  width: 70%;
  height: 70%;
}
</style>