You've already forked SmartisanNote.Remake
修复 修复移动端滚动问题，调整触摸行为以允许垂直滚动
This commit is contained in:
yuantao
@@ -1,152 +1,153 @@
|
||||
<template>
|
||||
<ion-page>
|
||||
<Header title="文件夹" :onBack="() => window.history.back()" />
|
||||
<div class="folder-page-container">
|
||||
<div class="search-container">
|
||||
<ion-icon :icon="search" class="search-icon"></ion-icon>
|
||||
<ion-input placeholder="搜索文件夹..." :value="searchQuery" @ionChange="e => setSearchQuery(e.detail.value)" class="search-input"></ion-input>
|
||||
<ion-button v-if="searchQuery.length > 0" fill="clear" @click="() => setSearchQuery('')">
|
||||
<ion-icon :icon="closeCircle" class="clear-icon"></ion-icon>
|
||||
</ion-button>
|
||||
</div>
|
||||
</div>
|
||||
<ion-content>
|
||||
<ion-list class="folder-list">
|
||||
<FolderManage
|
||||
:allCount="allNotesCount"
|
||||
:starredCount="starredNotesCount"
|
||||
:trashCount="trashNotesCount"
|
||||
:archiveCount="archiveCount"
|
||||
:selectedFolder="selectedFolder"
|
||||
:onAllClick="() => handleFolderPress('all')"
|
||||
:onStarredClick="() => handleFolderPress('starred')"
|
||||
:onTrashClick="() => handleFolderPress('trash')"
|
||||
:onArchiveClick="() => handleFolderPress('archive')" />
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useAppStore } from '../stores/useAppStore'
|
||||
import { search, closeCircle } from 'ionicons/icons'
|
||||
import FolderManage from '../components/FolderManage.vue'
|
||||
import Header from '../components/Header.vue'
|
||||
|
||||
const store = useAppStore()
|
||||
const router = useRouter()
|
||||
|
||||
// 加载初始数据
|
||||
onMounted(() => {
|
||||
store.loadData()
|
||||
})
|
||||
|
||||
const searchQuery = ref('')
|
||||
const selectedFolder = ref('all')
|
||||
|
||||
// 计算每个文件夹中的便签数量
|
||||
// 遍历所有自定义文件夹，统计每个文件夹中的便签数量
|
||||
const foldersWithCount = computed(() => {
|
||||
return store.folders.map(folder => {
|
||||
const noteCount = store.notes.filter(note => note.folderId === folder.id).length
|
||||
return {
|
||||
...folder,
|
||||
noteCount,
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// 添加默认文件夹（全部便签、加星便签、回收站）到列表开头
|
||||
// 计算全部便签数量
|
||||
const allNotesCount = computed(() => store.notes.length)
|
||||
// 计算加星便签数量
|
||||
const starredNotesCount = computed(() => store.notes.filter(note => note.isStarred).length)
|
||||
// 回收站便签数量（暂未实现完整功能）
|
||||
const trashNotesCount = 0
|
||||
// 归档便签数量（暂未实现完整功能）
|
||||
const archiveCount = 0
|
||||
|
||||
// 合并默认文件夹和自定义文件夹
|
||||
const foldersWithAllNotes = computed(() => {
|
||||
return [
|
||||
{ id: 'all', name: '全部便签', noteCount: allNotesCount.value, createdAt: new Date() },
|
||||
{ id: 'starred', name: '加星便签', noteCount: starredNotesCount.value, createdAt: new Date() },
|
||||
{ id: 'trash', name: '回收站', noteCount: trashNotesCount, createdAt: new Date() },
|
||||
...foldersWithCount.value,
|
||||
]
|
||||
})
|
||||
|
||||
const handleFolderPress = folderId => {
|
||||
// 更新选中的文件夹状态
|
||||
selectedFolder.value = folderId
|
||||
// 使用vue-router导航回便签列表页面，并传递文件夹参数
|
||||
router.push(`/notes?folder=${folderId}`)
|
||||
}
|
||||
|
||||
// 处理添加文件夹按钮点击事件
|
||||
// 在完整实现中，这里会打开文件夹创建对话框
|
||||
const handleAddFolder = () => {
|
||||
console.log('Add folder pressed')
|
||||
}
|
||||
|
||||
// 处理搜索功能
|
||||
// 在完整实现中，这里会根据搜索关键词过滤文件夹
|
||||
const handleSearch = () => {
|
||||
console.log('Search for:', searchQuery.value)
|
||||
}
|
||||
|
||||
const handleBackPress = () => {
|
||||
router.back()
|
||||
}
|
||||
|
||||
// 根据搜索关键词过滤文件夹
|
||||
// 将文件夹名称转换为小写进行模糊匹配
|
||||
const filteredFolders = computed(() => {
|
||||
return foldersWithAllNotes.value.filter(folder => folder.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
|
||||
})
|
||||
|
||||
const setSearchQuery = value => {
|
||||
searchQuery.value = value
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.folder-page-container {
|
||||
padding: 0.625rem;
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
||||
.search-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: var(--search-bar-background);
|
||||
border-radius: 0.5rem;
|
||||
padding: 0 0.625rem;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.search-input {
|
||||
--padding-start: 0.625rem;
|
||||
--padding-end: 0.625rem;
|
||||
flex: 1;
|
||||
font-size: 1rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.clear-icon {
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.folder-list {
|
||||
background-color: var(--background);
|
||||
padding: 0 1rem;
|
||||
--ion-item-background: var(--background);
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<ion-page>
|
||||
<Header title="文件夹" :onBack="() => window.history.back()" />
|
||||
<div class="folder-page-container">
|
||||
<div class="search-container">
|
||||
<ion-icon :icon="search" class="search-icon"></ion-icon>
|
||||
<ion-input placeholder="搜索文件夹..." :value="searchQuery" @ionChange="e => setSearchQuery(e.detail.value)" class="search-input"></ion-input>
|
||||
<ion-button v-if="searchQuery.length > 0" fill="clear" @click="() => setSearchQuery('')">
|
||||
<ion-icon :icon="closeCircle" class="clear-icon"></ion-icon>
|
||||
</ion-button>
|
||||
</div>
|
||||
</div>
|
||||
<ion-content>
|
||||
<ion-list class="folder-list">
|
||||
<FolderManage
|
||||
:allCount="allNotesCount"
|
||||
:starredCount="starredNotesCount"
|
||||
:trashCount="trashNotesCount"
|
||||
:archiveCount="archiveCount"
|
||||
:selectedFolder="selectedFolder"
|
||||
:onAllClick="() => handleFolderPress('all')"
|
||||
:onStarredClick="() => handleFolderPress('starred')"
|
||||
:onTrashClick="() => handleFolderPress('trash')"
|
||||
:onArchiveClick="() => handleFolderPress('archive')" />
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useAppStore } from '../stores/useAppStore'
|
||||
import { search, closeCircle } from 'ionicons/icons'
|
||||
import FolderManage from '../components/FolderManage.vue'
|
||||
import Header from '../components/Header.vue'
|
||||
|
||||
const store = useAppStore()
|
||||
const router = useRouter()
|
||||
|
||||
// 加载初始数据
|
||||
onMounted(() => {
|
||||
store.loadData()
|
||||
})
|
||||
|
||||
const searchQuery = ref('')
|
||||
const selectedFolder = ref('all')
|
||||
|
||||
// 计算每个文件夹中的便签数量
|
||||
// 遍历所有自定义文件夹，统计每个文件夹中的便签数量
|
||||
const foldersWithCount = computed(() => {
|
||||
return store.folders.map(folder => {
|
||||
const noteCount = store.notes.filter(note => note.folderId === folder.id).length
|
||||
return {
|
||||
...folder,
|
||||
noteCount,
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// 添加默认文件夹（全部便签、加星便签、回收站）到列表开头
|
||||
// 计算全部便签数量
|
||||
const allNotesCount = computed(() => store.notes.length)
|
||||
// 计算加星便签数量
|
||||
const starredNotesCount = computed(() => store.notes.filter(note => note.isStarred).length)
|
||||
// 回收站便签数量（暂未实现完整功能）
|
||||
const trashNotesCount = 0
|
||||
// 归档便签数量（暂未实现完整功能）
|
||||
const archiveCount = 0
|
||||
|
||||
// 合并默认文件夹和自定义文件夹
|
||||
const foldersWithAllNotes = computed(() => {
|
||||
return [
|
||||
{ id: 'all', name: '全部便签', noteCount: allNotesCount.value, createdAt: new Date() },
|
||||
{ id: 'starred', name: '加星便签', noteCount: starredNotesCount.value, createdAt: new Date() },
|
||||
{ id: 'trash', name: '回收站', noteCount: trashNotesCount, createdAt: new Date() },
|
||||
...foldersWithCount.value,
|
||||
]
|
||||
})
|
||||
|
||||
const handleFolderPress = folderId => {
|
||||
// 更新选中的文件夹状态
|
||||
selectedFolder.value = folderId
|
||||
// 使用vue-router导航回便签列表页面，并传递文件夹参数
|
||||
router.push(`/notes?folder=${folderId}`)
|
||||
}
|
||||
|
||||
// 处理添加文件夹按钮点击事件
|
||||
// 在完整实现中，这里会打开文件夹创建对话框
|
||||
const handleAddFolder = () => {
|
||||
console.log('Add folder pressed')
|
||||
}
|
||||
|
||||
// 处理搜索功能
|
||||
// 在完整实现中，这里会根据搜索关键词过滤文件夹
|
||||
const handleSearch = () => {
|
||||
console.log('Search for:', searchQuery.value)
|
||||
}
|
||||
|
||||
const handleBackPress = () => {
|
||||
router.back()
|
||||
}
|
||||
|
||||
// 根据搜索关键词过滤文件夹
|
||||
// 将文件夹名称转换为小写进行模糊匹配
|
||||
const filteredFolders = computed(() => {
|
||||
return foldersWithAllNotes.value.filter(folder => folder.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
|
||||
})
|
||||
|
||||
const setSearchQuery = value => {
|
||||
searchQuery.value = value
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.folder-page-container {
|
||||
padding: 0.625rem;
|
||||
background-color: var(--background);
|
||||
touch-action: pan-y;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: var(--search-bar-background);
|
||||
border-radius: 0.5rem;
|
||||
padding: 0 0.625rem;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.search-input {
|
||||
--padding-start: 0.625rem;
|
||||
--padding-end: 0.625rem;
|
||||
flex: 1;
|
||||
font-size: 1rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.clear-icon {
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.folder-list {
|
||||
background-color: var(--background);
|
||||
padding: 0 1rem;
|
||||
--ion-item-background: var(--background);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user