product/SmartisanNote.Remake
1
0
Fork 0
Code Issues 4 Pull Requests Projects Releases Activity

新增 文件夹管理功能：实现文件夹选择模式、添加、编辑和删除功能

Browse Source
This commit is contained in:
yuantao
2025-10-23 18:35:23 +08:00
parent ff4adcd949
commit 2eb7eb8618
6 changed files with 1880 additions and 1024 deletions
Download Patch File Download Diff File Expand all files Collapse all files

245
src/components/FolderItem.vue
View File

@@ -1,77 +1,168 @@
<template>
<div @click="onPress" class="code-fun-flex-row code-fun-items-center code-fun-relative folder-item">
<img class="folder-icon" :src="iconSrc" />
<span class="folder-name">{{ name }}</span>
<span class="folder-count">{{ noteCount }}</span>
</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,
},
isSelected: {
type: Boolean,
default: false,
},
})
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'
}
})
</script>
<style 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;
}
</style>
<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>