You've already forked SmartisanNote.Remake
初始化提交
This commit is contained in:
307
src/pages/NoteListPage.vue
Normal file
307
src/pages/NoteListPage.vue
Normal file
@@ -0,0 +1,307 @@
|
||||
<template>
|
||||
<ion-page>
|
||||
<Header
|
||||
:title="headerTitle"
|
||||
:onAction="handleAddNote"
|
||||
actionIcon="create"
|
||||
leftIcon="settings"
|
||||
:onLeftAction="handleSettingsPress"
|
||||
:onFolderToggle="handleFolderToggle"
|
||||
:isFolderExpanded="isFolderExpanded"
|
||||
:onTitlePress="handleFolderToggle"
|
||||
/>
|
||||
|
||||
<!-- 悬浮文件夹列表 - 使用绝对定位实现 -->
|
||||
<div
|
||||
v-if="isFolderExpanded"
|
||||
style="position: absolute; top: 50px; left: 10%; right: 10%; z-index: 1000; background-color: var(--background-card); border-radius: 8px; box-shadow: 0 2px 4px var(--shadow); border: 1px solid var(--border); overflow: hidden"
|
||||
>
|
||||
<FolderItem
|
||||
id="all"
|
||||
name="全部便签"
|
||||
:noteCount="notes.length"
|
||||
:isSelected="currentFolder === 'all'"
|
||||
:onPress="() => {
|
||||
setCurrentFolder('all');
|
||||
setIsFolderExpanded(false);
|
||||
}"
|
||||
/>
|
||||
<FolderItem
|
||||
id="starred"
|
||||
name="加星便签"
|
||||
:noteCount="starredNotesCount"
|
||||
:isSelected="currentFolder === 'starred'"
|
||||
:onPress="() => {
|
||||
setCurrentFolder('starred');
|
||||
setIsFolderExpanded(false);
|
||||
}"
|
||||
/>
|
||||
<FolderItem
|
||||
id="trash"
|
||||
name="回收站"
|
||||
:noteCount="0"
|
||||
:isSelected="currentFolder === 'trash'"
|
||||
:onPress="() => {
|
||||
setCurrentFolder('trash');
|
||||
setIsFolderExpanded(false);
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style="flex-direction: row; align-items: center; padding: 8px 16px; background-color: var(--background-card); border-bottom: 1px solid var(--border)">
|
||||
<div style="flex: 1; flex-direction: row; align-items: center; background-color: var(--background-card); height: 36px; padding: 0 8px; padding-vertical: 0">
|
||||
<div style="flex: 1; flex-direction: row; align-items: center; background-color: #f0f0f0; border-radius: 4; height: 36px; padding: 0 8px; padding-vertical: 0">
|
||||
<img :src="'/assets/icons/drawable-xxhdpi/search_bar_left_icon.png'" style="width: 20px; height: 20px; tint-color: var(--text-tertiary)" />
|
||||
<input
|
||||
placeholder="搜索便签..."
|
||||
:value="searchQuery"
|
||||
@input="e => setSearchQuery(e.target.value)"
|
||||
@keydown.enter="handleSearch"
|
||||
style="flex: 1; font-size: 16px; color: var(--text-primary); margin-left: 8px; margin-right: 8px; padding: 0; border: none; background: transparent; outline: none"
|
||||
/>
|
||||
<ion-button
|
||||
v-if="searchQuery.length > 0"
|
||||
fill="clear"
|
||||
@click="() => setSearchQuery('')"
|
||||
style="--padding-start: 0; --padding-end: 0; width: 20px; height: 20px; margin: 0; padding: 0"
|
||||
>
|
||||
<img :src="'/assets/icons/drawable-xxhdpi/search_bar_clear_btn.png'" style="width: 20px; height: 20px; tint-color: var(--text-tertiary)" />
|
||||
</ion-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="filteredAndSortedNotes.length === 0" style="flex: 1; justify-content: center; align-items: center; padding: 16px; background-color: var(--background)">
|
||||
<ion-text style="font-size: 18px; font-weight: 600; color: var(--text-tertiary); margin-bottom: 8px">
|
||||
未找到便签
|
||||
</ion-text>
|
||||
<ion-text style="font-size: 14px; color: var(--text-tertiary); text-align: center; line-height: 20px">
|
||||
{{ searchQuery ? '尝试其他搜索词' : '点击 + 按钮创建您的第一条便签' }}
|
||||
</ion-text>
|
||||
</div>
|
||||
<div v-else style="flex: 1; background-color: var(--background)">
|
||||
<ion-text style="font-size: 13px; color: var(--text-tertiary); padding-horizontal: 16px; padding-vertical: 8px; display: block">
|
||||
{{ filteredAndSortedNotes.length }} 条便签
|
||||
</ion-text>
|
||||
<div style="border-radius: 6px; overflow: hidden; box-shadow: 0 1px 2px var(--shadow); background-color: var(--background-card); margin: 0 16px">
|
||||
<div v-for="note in filteredAndSortedNotes" :key="note.id">
|
||||
<NoteItem
|
||||
:title="note.title"
|
||||
:content="note.content"
|
||||
:date="formatDate(note.updatedAt)"
|
||||
:isStarred="note.isStarred"
|
||||
:onPress="() => handleNotePress(note.id)"
|
||||
:onDelete="() => handleDeleteNote(note.id)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 点击外部区域收起文件夹列表的覆盖层 -->
|
||||
<div
|
||||
v-if="isFolderExpanded"
|
||||
@click="() => setIsFolderExpanded(false)"
|
||||
style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: transparent; z-index: 99"
|
||||
></div>
|
||||
|
||||
<ion-alert
|
||||
:is-open="showAlert"
|
||||
@didDismiss="() => setShowAlert(false)"
|
||||
header="删除便签"
|
||||
message="确定要删除这个便签吗？"
|
||||
:buttons="[
|
||||
{
|
||||
text: '取消',
|
||||
role: 'cancel'
|
||||
},
|
||||
{
|
||||
text: '删除',
|
||||
handler: confirmDeleteNote
|
||||
}
|
||||
]"
|
||||
></ion-alert>
|
||||
</ion-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, computed } from 'vue';
|
||||
import { useAppData } from '../utils/AppDataContext';
|
||||
import { create, settings } from 'ionicons/icons';
|
||||
import NoteItem from '../components/NoteItem.vue';
|
||||
import Header from '../components/Header.vue';
|
||||
import FolderItem from '../components/FolderItem.vue';
|
||||
|
||||
export default {
|
||||
name: 'NoteListPage',
|
||||
components: {
|
||||
NoteItem,
|
||||
Header,
|
||||
FolderItem
|
||||
},
|
||||
setup() {
|
||||
const { state, deleteNote } = useAppData();
|
||||
const searchQuery = ref('');
|
||||
const sortBy = ref('date'); // 'date', 'title', 'starred'
|
||||
const isFolderExpanded = ref(false);
|
||||
const currentFolder = ref('all'); // 默认文件夹是"全部便签"
|
||||
const showAlert = ref(false);
|
||||
const noteToDelete = ref(null);
|
||||
|
||||
// 计算加星便签数量
|
||||
const starredNotesCount = computed(() => {
|
||||
return state.notes.filter(note => note.isStarred).length;
|
||||
});
|
||||
|
||||
// 根据当前文件夹过滤便签
|
||||
const filteredNotes = computed(() => {
|
||||
return state.notes.filter(note => {
|
||||
switch (currentFolder.value) {
|
||||
case 'all':
|
||||
return true;
|
||||
case 'starred':
|
||||
return note.isStarred;
|
||||
case 'trash':
|
||||
// 假设我们有一个isDeleted属性来标识已删除的便签
|
||||
return note.isDeleted || false;
|
||||
default:
|
||||
return note.folderId === currentFolder.value;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Filter and sort notes
|
||||
const filteredAndSortedNotes = computed(() => {
|
||||
return filteredNotes.value
|
||||
.filter(note =>
|
||||
note.title.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
|
||||
note.content.toLowerCase().includes(searchQuery.value.toLowerCase())
|
||||
)
|
||||
.sort((a, b) => {
|
||||
if (sortBy.value === 'title') {
|
||||
return a.title.localeCompare(b.title);
|
||||
} else if (sortBy.value === 'starred') {
|
||||
return (b.isStarred ? 1 : 0) - (a.isStarred ? 1 : 0);
|
||||
} else {
|
||||
return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 计算头部标题
|
||||
const headerTitle = computed(() => {
|
||||
switch (currentFolder.value) {
|
||||
case 'all':
|
||||
return '全部便签';
|
||||
case 'starred':
|
||||
return '加星便签';
|
||||
case 'trash':
|
||||
return '回收站';
|
||||
default:
|
||||
return '文件夹';
|
||||
}
|
||||
});
|
||||
|
||||
const handleNotePress = (noteId) => {
|
||||
// 导航到详情页面的逻辑将在路由中处理
|
||||
window.location.hash = `#/notes/${noteId}`;
|
||||
};
|
||||
|
||||
const handleAddNote = () => {
|
||||
// 导航到编辑页面的逻辑将在路由中处理
|
||||
window.location.hash = '#/editor';
|
||||
};
|
||||
|
||||
const handleDeleteNote = (noteId) => {
|
||||
noteToDelete.value = noteId;
|
||||
showAlert.value = true;
|
||||
};
|
||||
|
||||
const confirmDeleteNote = () => {
|
||||
if (noteToDelete.value) {
|
||||
deleteNote(noteToDelete.value);
|
||||
noteToDelete.value = null;
|
||||
}
|
||||
showAlert.value = false;
|
||||
};
|
||||
|
||||
const handleSort = () => {
|
||||
// In a full implementation, this would cycle through sort options
|
||||
const sortOptions = ['date', 'title', 'starred'];
|
||||
const currentIndex = sortOptions.indexOf(sortBy.value);
|
||||
const nextIndex = (currentIndex + 1) % sortOptions.length;
|
||||
sortBy.value = sortOptions[nextIndex];
|
||||
console.log('Sort by:', sortOptions[nextIndex]);
|
||||
};
|
||||
|
||||
const handleFolderPress = () => {
|
||||
// 导航到文件夹页面的逻辑将在路由中处理
|
||||
window.location.hash = '#/folders';
|
||||
};
|
||||
|
||||
const handleSettingsPress = () => {
|
||||
// 导航到设置页面的逻辑将在路由中处理
|
||||
window.location.hash = '#/settings';
|
||||
};
|
||||
|
||||
const handleFolderToggle = () => {
|
||||
// 在实际应用中，这里会触发文件夹列表的展开/收起
|
||||
isFolderExpanded.value = !isFolderExpanded.value;
|
||||
console.log('Folder expanded:', !isFolderExpanded.value);
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
// In a full implementation, this would filter notes based on searchQuery
|
||||
console.log('Search for:', searchQuery.value);
|
||||
};
|
||||
|
||||
const formatDate = (dateString) => {
|
||||
return new Date(dateString).toLocaleDateString();
|
||||
};
|
||||
|
||||
const setCurrentFolder = (folder) => {
|
||||
currentFolder.value = folder;
|
||||
};
|
||||
|
||||
const setIsFolderExpanded = (expanded) => {
|
||||
isFolderExpanded.value = expanded;
|
||||
};
|
||||
|
||||
const setSearchQuery = (query) => {
|
||||
searchQuery.value = query;
|
||||
};
|
||||
|
||||
const setShowAlert = (show) => {
|
||||
showAlert.value = show;
|
||||
};
|
||||
|
||||
return {
|
||||
notes: state.notes,
|
||||
searchQuery,
|
||||
sortBy,
|
||||
isFolderExpanded,
|
||||
currentFolder,
|
||||
showAlert,
|
||||
noteToDelete,
|
||||
starredNotesCount,
|
||||
filteredAndSortedNotes,
|
||||
headerTitle,
|
||||
handleNotePress,
|
||||
handleAddNote,
|
||||
handleDeleteNote,
|
||||
confirmDeleteNote,
|
||||
handleSearch,
|
||||
handleSort,
|
||||
handleFolderPress,
|
||||
handleSettingsPress,
|
||||
handleFolderToggle,
|
||||
formatDate,
|
||||
setCurrentFolder,
|
||||
setIsFolderExpanded,
|
||||
setSearchQuery,
|
||||
setShowAlert,
|
||||
create,
|
||||
settings
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user