You've already forked SmartisanNote.Remake
新增 便签删除功能;
优化便签列表页布局;
This commit is contained in:
@@ -1,67 +1,54 @@
|
||||
<template>
|
||||
<ion-app>
|
||||
<ion-page>
|
||||
<div class="container">
|
||||
<Header
|
||||
:title="headerTitle"
|
||||
:onAction="handleHeaderAction"
|
||||
actionIcon="create"
|
||||
leftType="settings"
|
||||
:onLeftAction="handleSettingsPress"
|
||||
:onFolderToggle="handleFolderToggle"
|
||||
:isFolderExpanded="isFolderExpanded"
|
||||
:onTitlePress="handleFolderToggle" />
|
||||
<ion-content class="content">
|
||||
<Header
|
||||
:title="headerTitle"
|
||||
:onAction="handleHeaderAction"
|
||||
actionIcon="create"
|
||||
leftType="settings"
|
||||
:onLeftAction="handleSettingsPress"
|
||||
:onFolderToggle="handleFolderToggle"
|
||||
:isFolderExpanded="isFolderExpanded"
|
||||
:onTitlePress="handleFolderToggle"
|
||||
slot="fixed" />
|
||||
|
||||
<!-- 悬浮文件夹列表 - 使用绝对定位实现 -->
|
||||
<div v-if="isFolderExpanded" class="folder-list">
|
||||
<FolderManage
|
||||
:allCount="allNotesCount"
|
||||
:starredCount="starredNotesCount"
|
||||
:trashCount="trashNotesCount"
|
||||
:archiveCount="0"
|
||||
:selectedFolder="currentFolder"
|
||||
:onAllClick="handleAllNotesClick"
|
||||
:onStarredClick="handleStarredNotesClick"
|
||||
:onTrashClick="handleTrashNotesClick" />
|
||||
</div>
|
||||
<!-- 点击外部区域收起文件夹列表的覆盖层 -->
|
||||
<div v-if="isFolderExpanded" @click="() => setIsFolderExpanded(false)" class="folder-overlay"></div>
|
||||
|
||||
<div class="search-container">
|
||||
<SearchBar v-model="searchQuery" @search="handleSearch" @clear="handleClearSearch" @focus="handleSearchFocus" @blur="handleSearchBlur" />
|
||||
</div>
|
||||
|
||||
<div class="notes-container">
|
||||
<div v-for="note in filteredAndSortedNotes" :key="note.id" class="note-item">
|
||||
<NoteItem
|
||||
:title="note.title"
|
||||
:content="note.content"
|
||||
:date="formatDate(note.updatedAt)"
|
||||
:isStarred="note.isStarred"
|
||||
:isTop="note.isTop || false"
|
||||
:hasImage="note.hasImage || false"
|
||||
:onPress="() => handleNotePress(note.id)"
|
||||
:onStarToggle="() => handleStarToggle(note.id)"
|
||||
:onTopToggle="() => handleTopToggle(note.id)"
|
||||
:onDelete="() => handleDeleteNote(note.id)" />
|
||||
<!-- 悬浮文件夹列表 - 使用绝对定位实现 -->
|
||||
<div v-if="isFolderExpanded" class="folder-list">
|
||||
<FolderManage
|
||||
:allCount="allNotesCount"
|
||||
:starredCount="starredNotesCount"
|
||||
:trashCount="trashNotesCount"
|
||||
:archiveCount="0"
|
||||
:selectedFolder="currentFolder"
|
||||
:onAllClick="handleAllNotesClick"
|
||||
:onStarredClick="handleStarredNotesClick"
|
||||
:onTrashClick="handleTrashNotesClick" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 点击外部区域收起文件夹列表的覆盖层 -->
|
||||
<div v-if="isFolderExpanded" @click="() => setIsFolderExpanded(false)" class="folder-overlay"></div>
|
||||
<div class="search-container">
|
||||
<SearchBar v-model="searchQuery" @search="handleSearch" @clear="handleClearSearch" @focus="handleSearchFocus" @blur="handleSearchBlur" />
|
||||
</div>
|
||||
|
||||
<div class="notes-container">
|
||||
<div v-for="note in filteredAndSortedNotes" :key="note.id" class="note-item">
|
||||
<NoteItem
|
||||
:title="note.title"
|
||||
:content="note.content"
|
||||
:date="formatDate(note.updatedAt)"
|
||||
:isStarred="note.isStarred"
|
||||
:isTop="note.isTop || false"
|
||||
:hasImage="note.hasImage || false"
|
||||
:onPress="() => handleNotePress(note.id)"
|
||||
:onStarToggle="() => handleStarToggle(note.id)"
|
||||
:onTopToggle="() => handleTopToggle(note.id)"
|
||||
:onDelete="() => confirmDeleteNote(note.id)" />
|
||||
</div>
|
||||
</div>
|
||||
</ion-content>
|
||||
</div>
|
||||
<ion-alert
|
||||
:is-open="showAlert"
|
||||
@didDismiss="() => setShowAlert(false)"
|
||||
header="删除便签"
|
||||
message="确定要删除这个便签吗?"
|
||||
:buttons="[
|
||||
{
|
||||
text: '取消',
|
||||
role: 'cancel',
|
||||
},
|
||||
{
|
||||
text: '删除',
|
||||
handler: confirmDeleteNote,
|
||||
},
|
||||
]"></ion-alert>
|
||||
</ion-app>
|
||||
</ion-page>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -73,6 +60,7 @@ import Header from '../components/Header.vue'
|
||||
import FolderManage from '../components/FolderManage.vue'
|
||||
import SearchBar from '../components/SearchBar.vue'
|
||||
import { formatNoteListDate } from '../utils/dateUtils'
|
||||
import { IonContent, IonPage } from '@ionic/vue'
|
||||
|
||||
const store = useAppStore()
|
||||
const router = useRouter()
|
||||
@@ -94,7 +82,6 @@ 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)
|
||||
|
||||
// 计算加星便签数量(未删除的)
|
||||
@@ -197,11 +184,6 @@ const handleHeaderAction = actionType => {
|
||||
}
|
||||
}
|
||||
|
||||
const handleDeleteNote = noteId => {
|
||||
noteToDelete.value = noteId
|
||||
showAlert.value = true
|
||||
}
|
||||
|
||||
const handleStarToggle = async noteId => {
|
||||
const note = store.notes.find(n => n.id === noteId)
|
||||
if (note) {
|
||||
@@ -226,7 +208,8 @@ const handleTopToggle = async noteId => {
|
||||
}
|
||||
}
|
||||
|
||||
const confirmDeleteNote = async () => {
|
||||
const confirmDeleteNote = async noteId => {
|
||||
noteToDelete.value = noteId
|
||||
if (noteToDelete.value) {
|
||||
try {
|
||||
// 检查当前是否在回收站中
|
||||
@@ -244,7 +227,6 @@ const confirmDeleteNote = async () => {
|
||||
console.error('Failed to delete note:', error)
|
||||
}
|
||||
}
|
||||
showAlert.value = false
|
||||
}
|
||||
|
||||
// 处理排序方式切换
|
||||
@@ -347,10 +329,6 @@ const setSearchQuery = query => {
|
||||
searchQuery.value = query
|
||||
}
|
||||
|
||||
const setShowAlert = show => {
|
||||
showAlert.value = show
|
||||
}
|
||||
|
||||
const notes = computed(() => store.notes)
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@@ -383,6 +361,11 @@ const notes = computed(() => store.notes)
|
||||
background-color: transparent;
|
||||
z-index: 99;
|
||||
}
|
||||
.content {
|
||||
--background: transparent;
|
||||
--padding-top: 4.5rem;
|
||||
--padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
padding: 0.8rem 0.5rem;
|
||||
|
||||
Reference in New Issue
Block a user