You've already forked SmartisanNote.Remake
所有页面的语法改写为setup形式；
修改了Header组件的样式、布局； 更新了IFLOW上下文； 添加了全局样式； 添加了pinia状态管理；
This commit is contained in:
User
@@ -4,7 +4,7 @@
|
||||
:title="headerTitle"
|
||||
:onAction="handleAddNote"
|
||||
actionIcon="create"
|
||||
leftIcon="settings"
|
||||
leftType="settings"
|
||||
:onLeftAction="handleSettingsPress"
|
||||
:onFolderToggle="handleFolderToggle"
|
||||
:isFolderExpanded="isFolderExpanded"
|
||||
@@ -123,185 +123,154 @@
|
||||
</ion-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, computed } from 'vue';
|
||||
import { useAppData } from '../utils/AppDataContext';
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import { useAppStore } from '../stores/useAppStore';
|
||||
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 store = useAppStore();
|
||||
|
||||
// 加载初始数据
|
||||
onMounted(() => {
|
||||
store.loadData();
|
||||
});
|
||||
|
||||
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 store.notes.filter(note => note.isStarred).length;
|
||||
});
|
||||
|
||||
// 根据当前文件夹过滤便签
|
||||
const filteredNotes = computed(() => {
|
||||
return store.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 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
|
||||
};
|
||||
});
|
||||
|
||||
// 计算头部标题
|
||||
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) {
|
||||
store.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;
|
||||
};
|
||||
|
||||
const notes = computed(() => store.notes);
|
||||
</script>
|
||||
Reference in New Issue
Block a user