You've already forked SmartisanNote.Remake
搜索栏组件更名;
优化 便签列表页布局调整;
This commit is contained in:
@@ -12,28 +12,8 @@
|
|||||||
|
|
||||||
<!-- 富文本编辑器 -->
|
<!-- 富文本编辑器 -->
|
||||||
<div class="editor-container">
|
<div class="editor-container">
|
||||||
<RichTextEditor
|
<RichTextEditor ref="editorRef" :modelValue="content" @update:modelValue="handleContentChange" class="rich-text-editor" />
|
||||||
ref="editorRef"
|
|
||||||
:modelValue="content"
|
|
||||||
@update:modelValue="handleContentChange"
|
|
||||||
class="rich-text-editor" />
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ion-alert
|
|
||||||
:is-open="showAlert"
|
|
||||||
@didDismiss="() => setShowAlert(false)"
|
|
||||||
header="未保存的更改"
|
|
||||||
message="您有未保存的更改,确定要丢弃吗?"
|
|
||||||
:buttons="[
|
|
||||||
{
|
|
||||||
text: '取消',
|
|
||||||
role: 'cancel',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: '丢弃',
|
|
||||||
handler: () => window.history.back(),
|
|
||||||
},
|
|
||||||
]"></ion-alert>
|
|
||||||
</div>
|
</div>
|
||||||
</ion-page>
|
</ion-page>
|
||||||
</template>
|
</template>
|
||||||
@@ -63,7 +43,7 @@ const editorRef = ref(null)
|
|||||||
|
|
||||||
// 设置便签内容的函数
|
// 设置便签内容的函数
|
||||||
// 用于在编辑器中加载指定便签的内容
|
// 用于在编辑器中加载指定便签的内容
|
||||||
const setNoteContent = async (noteId) => {
|
const setNoteContent = async noteId => {
|
||||||
// 确保store数据已加载,如果便签列表为空则先加载数据
|
// 确保store数据已加载,如果便签列表为空则先加载数据
|
||||||
if (store.notes.length === 0) {
|
if (store.notes.length === 0) {
|
||||||
await store.loadData()
|
await store.loadData()
|
||||||
@@ -104,19 +84,27 @@ onMounted(async () => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
// 监听noteId变化,确保在编辑器准备好后设置内容
|
// 监听noteId变化,确保在编辑器准备好后设置内容
|
||||||
watch(noteId, async (newNoteId) => {
|
watch(
|
||||||
|
noteId,
|
||||||
|
async newNoteId => {
|
||||||
console.log('Note ID changed:', newNoteId)
|
console.log('Note ID changed:', newNoteId)
|
||||||
if (newNoteId) {
|
if (newNoteId) {
|
||||||
await setNoteContent(newNoteId)
|
await setNoteContent(newNoteId)
|
||||||
}
|
}
|
||||||
}, { immediate: true })
|
},
|
||||||
|
{ immediate: true }
|
||||||
|
)
|
||||||
|
|
||||||
// 监听store变化,确保在store加载后设置内容
|
// 监听store变化,确保在store加载后设置内容
|
||||||
watch(() => store.notes, async (newNotes) => {
|
watch(
|
||||||
|
() => store.notes,
|
||||||
|
async newNotes => {
|
||||||
if (noteId.value && newNotes.length > 0) {
|
if (noteId.value && newNotes.length > 0) {
|
||||||
await setNoteContent(noteId.value)
|
await setNoteContent(noteId.value)
|
||||||
}
|
}
|
||||||
}, { immediate: true })
|
},
|
||||||
|
{ immediate: true }
|
||||||
|
)
|
||||||
|
|
||||||
// 检查是否正在编辑现有便签
|
// 检查是否正在编辑现有便签
|
||||||
// 如果noteId存在则表示是编辑模式,否则是新建模式
|
// 如果noteId存在则表示是编辑模式,否则是新建模式
|
||||||
@@ -135,11 +123,15 @@ onMounted(() => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
// 监听store变化,确保在store加载后设置内容
|
// 监听store变化,确保在store加载后设置内容
|
||||||
watch(() => store.notes, async (newNotes) => {
|
watch(
|
||||||
|
() => store.notes,
|
||||||
|
async newNotes => {
|
||||||
if (noteId.value && newNotes.length > 0) {
|
if (noteId.value && newNotes.length > 0) {
|
||||||
await setNoteContent(noteId.value)
|
await setNoteContent(noteId.value)
|
||||||
}
|
}
|
||||||
}, { immediate: true })
|
},
|
||||||
|
{ immediate: true }
|
||||||
|
)
|
||||||
const showAlert = ref(false)
|
const showAlert = ref(false)
|
||||||
|
|
||||||
// 防抖函数
|
// 防抖函数
|
||||||
@@ -154,14 +146,14 @@ const debounce = (func, delay) => {
|
|||||||
|
|
||||||
// 防抖处理内容变化
|
// 防抖处理内容变化
|
||||||
// 延迟300ms更新内容,避免用户输入时频繁触发更新
|
// 延迟300ms更新内容,避免用户输入时频繁触发更新
|
||||||
const debouncedHandleContentChange = debounce((newContent) => {
|
const debouncedHandleContentChange = debounce(newContent => {
|
||||||
content.value = newContent
|
content.value = newContent
|
||||||
console.log('Content updated:', newContent)
|
console.log('Content updated:', newContent)
|
||||||
}, 300)
|
}, 300)
|
||||||
|
|
||||||
// 监听编辑器内容变化
|
// 监听编辑器内容变化
|
||||||
// 当编辑器内容发生变化时调用此函数
|
// 当编辑器内容发生变化时调用此函数
|
||||||
const handleContentChange = (newContent) => {
|
const handleContentChange = newContent => {
|
||||||
console.log('Editor content changed:', newContent)
|
console.log('Editor content changed:', newContent)
|
||||||
debouncedHandleContentChange(newContent)
|
debouncedHandleContentChange(newContent)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -14,7 +14,7 @@
|
|||||||
slot="fixed" />
|
slot="fixed" />
|
||||||
|
|
||||||
<!-- 悬浮文件夹列表 - 使用绝对定位实现 -->
|
<!-- 悬浮文件夹列表 - 使用绝对定位实现 -->
|
||||||
<div v-if="isFolderExpanded" class="folder-list">
|
<div v-if="isFolderExpanded" class="folder-list" slot="fixed">
|
||||||
<FolderManage
|
<FolderManage
|
||||||
:allCount="allNotesCount"
|
:allCount="allNotesCount"
|
||||||
:starredCount="starredNotesCount"
|
:starredCount="starredNotesCount"
|
||||||
@@ -26,7 +26,7 @@
|
|||||||
:onTrashClick="handleTrashNotesClick" />
|
:onTrashClick="handleTrashNotesClick" />
|
||||||
</div>
|
</div>
|
||||||
<!-- 点击外部区域收起文件夹列表的覆盖层 -->
|
<!-- 点击外部区域收起文件夹列表的覆盖层 -->
|
||||||
<div v-if="isFolderExpanded" @click="() => setIsFolderExpanded(false)" class="folder-overlay"></div>
|
<div v-if="isFolderExpanded" @click="() => setIsFolderExpanded(false)" class="folder-overlay" slot="fixed"></div>
|
||||||
<div class="search-container">
|
<div class="search-container">
|
||||||
<SearchBar v-model="searchQuery" @search="handleSearch" @clear="handleClearSearch" @focus="handleSearchFocus" @blur="handleSearchBlur" />
|
<SearchBar v-model="searchQuery" @search="handleSearch" @clear="handleClearSearch" @focus="handleSearchFocus" @blur="handleSearchBlur" />
|
||||||
</div>
|
</div>
|
||||||
@@ -58,7 +58,7 @@ import { useAppStore } from '../stores/useAppStore'
|
|||||||
import NoteItem from '../components/NoteItem.vue'
|
import NoteItem from '../components/NoteItem.vue'
|
||||||
import Header from '../components/Header.vue'
|
import Header from '../components/Header.vue'
|
||||||
import FolderManage from '../components/FolderManage.vue'
|
import FolderManage from '../components/FolderManage.vue'
|
||||||
import SearchBar from '../components/SearchBar.vue'
|
import SearchBar from '../components/Search.vue'
|
||||||
import { formatNoteListDate } from '../utils/dateUtils'
|
import { formatNoteListDate } from '../utils/dateUtils'
|
||||||
import { IonContent, IonPage } from '@ionic/vue'
|
import { IonContent, IonPage } from '@ionic/vue'
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user