You've already forked SmartisanNote.Remake
所有页面的语法改写为setup形式；
修改了Header组件的样式、布局； 更新了IFLOW上下文； 添加了全局样式； 添加了pinia状态管理；
This commit is contained in:
User
@@ -38,95 +38,79 @@
|
||||
</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 { search, closeCircle } from 'ionicons/icons';
|
||||
import FolderItem from '../components/FolderItem.vue';
|
||||
import Header from '../components/Header.vue';
|
||||
|
||||
export default {
|
||||
name: 'FolderPage',
|
||||
components: {
|
||||
FolderItem,
|
||||
Header
|
||||
},
|
||||
setup() {
|
||||
const { state } = useAppData();
|
||||
const searchQuery = ref('');
|
||||
const selectedFolder = ref('all');
|
||||
|
||||
// Calculate note count for each folder
|
||||
const foldersWithCount = computed(() => {
|
||||
return state.folders.map(folder => {
|
||||
const noteCount = state.notes.filter(note => note.folderId === folder.id).length;
|
||||
return {
|
||||
...folder,
|
||||
noteCount,
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
// Add default folders at the beginning
|
||||
const allNotesCount = computed(() => state.notes.length);
|
||||
const starredNotesCount = computed(() => state.notes.filter(note => note.isStarred).length);
|
||||
// Assuming we have a way to track deleted notes in the future
|
||||
const trashNotesCount = 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;
|
||||
// 在实际应用中，这里会将选中的文件夹传递回NoteListScreen
|
||||
// 通过导航参数传递选中的文件夹ID
|
||||
window.location.hash = `#/notes?folder=${folderId}`;
|
||||
};
|
||||
|
||||
const handleAddFolder = () => {
|
||||
// In a full implementation, this would open a folder creation dialog
|
||||
console.log('Add folder pressed');
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
// In a full implementation, this would filter folders based on searchQuery
|
||||
console.log('Search for:', searchQuery.value);
|
||||
};
|
||||
|
||||
const handleBackPress = () => {
|
||||
window.history.back();
|
||||
};
|
||||
|
||||
// Filter folders based on search query
|
||||
const filteredFolders = computed(() => {
|
||||
return foldersWithAllNotes.value.filter(folder =>
|
||||
folder.name.toLowerCase().includes(searchQuery.value.toLowerCase())
|
||||
);
|
||||
});
|
||||
|
||||
const setSearchQuery = (value) => {
|
||||
searchQuery.value = value;
|
||||
};
|
||||
|
||||
const store = useAppStore();
|
||||
|
||||
// 加载初始数据
|
||||
onMounted(() => {
|
||||
store.loadData();
|
||||
});
|
||||
|
||||
const searchQuery = ref('');
|
||||
const selectedFolder = ref('all');
|
||||
|
||||
// Calculate note count for each folder
|
||||
const foldersWithCount = computed(() => {
|
||||
return store.folders.map(folder => {
|
||||
const noteCount = store.notes.filter(note => note.folderId === folder.id).length;
|
||||
return {
|
||||
searchQuery,
|
||||
selectedFolder,
|
||||
filteredFolders,
|
||||
handleFolderPress,
|
||||
handleAddFolder,
|
||||
handleSearch,
|
||||
handleBackPress,
|
||||
setSearchQuery,
|
||||
search,
|
||||
closeCircle
|
||||
...folder,
|
||||
noteCount,
|
||||
};
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Add default folders at the beginning
|
||||
const allNotesCount = computed(() => store.notes.length);
|
||||
const starredNotesCount = computed(() => store.notes.filter(note => note.isStarred).length);
|
||||
// Assuming we have a way to track deleted notes in the future
|
||||
const trashNotesCount = 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;
|
||||
// 在实际应用中，这里会将选中的文件夹传递回NoteListScreen
|
||||
// 通过导航参数传递选中的文件夹ID
|
||||
window.location.hash = `#/notes?folder=${folderId}`;
|
||||
};
|
||||
|
||||
const handleAddFolder = () => {
|
||||
// In a full implementation, this would open a folder creation dialog
|
||||
console.log('Add folder pressed');
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
// In a full implementation, this would filter folders based on searchQuery
|
||||
console.log('Search for:', searchQuery.value);
|
||||
};
|
||||
|
||||
const handleBackPress = () => {
|
||||
window.history.back();
|
||||
};
|
||||
|
||||
// Filter folders based on search query
|
||||
const filteredFolders = computed(() => {
|
||||
return foldersWithAllNotes.value.filter(folder =>
|
||||
folder.name.toLowerCase().includes(searchQuery.value.toLowerCase())
|
||||
);
|
||||
});
|
||||
|
||||
const setSearchQuery = (value) => {
|
||||
searchQuery.value = value;
|
||||
};
|
||||
</script>
|
||||
@@ -59,81 +59,62 @@
|
||||
</ion-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { computed } from 'vue';
|
||||
import { useAppData } from '../utils/AppDataContext';
|
||||
<script setup>
|
||||
import { computed, onMounted } from 'vue';
|
||||
import { useAppStore } from '../stores/useAppStore';
|
||||
import { star, starOutline, share, folder, alarm, trash } from 'ionicons/icons';
|
||||
import Header from '../components/Header.vue';
|
||||
|
||||
export default {
|
||||
name: 'NoteDetailPage',
|
||||
components: {
|
||||
Header
|
||||
},
|
||||
props: {
|
||||
noteId: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const { state, updateNote } = useAppData();
|
||||
|
||||
// Find the note by ID
|
||||
const note = computed(() => state.notes.find(n => n.id === props.noteId));
|
||||
|
||||
const handleEdit = () => {
|
||||
// 导航到编辑页面的逻辑将在路由中处理
|
||||
window.location.hash = `#/editor/${props.noteId}`;
|
||||
};
|
||||
|
||||
const handleShare = () => {
|
||||
// In a full implementation, this would share the note
|
||||
console.log('Share note');
|
||||
};
|
||||
|
||||
const handleMoveToFolder = () => {
|
||||
// In a full implementation, this would move the note to a folder
|
||||
console.log('Move to folder');
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
// In a full implementation, this would delete the note
|
||||
console.log('Delete note');
|
||||
};
|
||||
|
||||
const handleStar = async () => {
|
||||
// Toggle star status
|
||||
if (note.value) {
|
||||
await updateNote(props.noteId, { isStarred: !note.value.isStarred });
|
||||
}
|
||||
};
|
||||
|
||||
const handleReminder = () => {
|
||||
// In a full implementation, this would set a reminder
|
||||
console.log('Set reminder');
|
||||
};
|
||||
|
||||
const formatDate = (dateString) => {
|
||||
return new Date(dateString).toLocaleDateString();
|
||||
};
|
||||
|
||||
return {
|
||||
note: note.value,
|
||||
handleEdit,
|
||||
handleShare,
|
||||
handleMoveToFolder,
|
||||
handleDelete,
|
||||
handleStar,
|
||||
handleReminder,
|
||||
formatDate,
|
||||
star,
|
||||
starOutline,
|
||||
share,
|
||||
folder,
|
||||
alarm,
|
||||
trash
|
||||
};
|
||||
const props = defineProps({
|
||||
noteId: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
const store = useAppStore();
|
||||
|
||||
// 加载初始数据
|
||||
onMounted(() => {
|
||||
store.loadData();
|
||||
});
|
||||
|
||||
// Find the note by ID
|
||||
const note = computed(() => store.notes.find(n => n.id === props.noteId));
|
||||
|
||||
const handleEdit = () => {
|
||||
// 导航到编辑页面的逻辑将在路由中处理
|
||||
window.location.hash = `#/editor/${props.noteId}`;
|
||||
};
|
||||
|
||||
const handleShare = () => {
|
||||
// In a full implementation, this would share the note
|
||||
console.log('Share note');
|
||||
};
|
||||
|
||||
const handleMoveToFolder = () => {
|
||||
// In a full implementation, this would move the note to a folder
|
||||
console.log('Move to folder');
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
// In a full implementation, this would delete the note
|
||||
console.log('Delete note');
|
||||
};
|
||||
|
||||
const handleStar = async () => {
|
||||
// Toggle star status
|
||||
if (note.value) {
|
||||
await store.updateNote(props.noteId, { isStarred: !note.value.isStarred });
|
||||
}
|
||||
};
|
||||
|
||||
const handleReminder = () => {
|
||||
// In a full implementation, this would set a reminder
|
||||
console.log('Set reminder');
|
||||
};
|
||||
|
||||
const formatDate = (dateString) => {
|
||||
return new Date(dateString).toLocaleDateString();
|
||||
};
|
||||
</script>
|
||||
@@ -62,136 +62,113 @@
|
||||
</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 { save, text, list } from 'ionicons/icons';
|
||||
import Header from '../components/Header.vue';
|
||||
|
||||
export default {
|
||||
name: 'NoteEditorPage',
|
||||
components: {
|
||||
Header
|
||||
},
|
||||
props: {
|
||||
noteId: {
|
||||
type: String,
|
||||
default: null
|
||||
const props = defineProps({
|
||||
noteId: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
});
|
||||
|
||||
const store = useAppStore();
|
||||
|
||||
// 加载初始数据
|
||||
onMounted(() => {
|
||||
store.loadData();
|
||||
});
|
||||
|
||||
// Check if we're editing an existing note
|
||||
const isEditing = !!props.noteId;
|
||||
const existingNote = isEditing ? store.notes.find(n => n.id === props.noteId) : null;
|
||||
|
||||
// Initialize state with existing note data or empty strings
|
||||
const title = ref(existingNote?.title || '');
|
||||
const content = ref(existingNote?.content || '');
|
||||
const showAlert = ref(false);
|
||||
|
||||
const handleSave = async () => {
|
||||
// Validate input
|
||||
if (!title.value.trim()) {
|
||||
// In a full implementation, show an alert or toast
|
||||
console.log('Validation error: Please enter a note title.');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
if (isEditing && existingNote) {
|
||||
// Update existing note
|
||||
await store.updateNote(props.noteId, { title: title.value, content: content.value });
|
||||
} else {
|
||||
// Create new note
|
||||
await store.addNote({ title: title.value, content: content.value, isStarred: false });
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const { state, addNote, updateNote } = useAppData();
|
||||
|
||||
// Check if we're editing an existing note
|
||||
const isEditing = !!props.noteId;
|
||||
const existingNote = isEditing ? state.notes.find(n => n.id === props.noteId) : null;
|
||||
|
||||
// Initialize state with existing note data or empty strings
|
||||
const title = ref(existingNote?.title || '');
|
||||
const content = ref(existingNote?.content || '');
|
||||
const showAlert = ref(false);
|
||||
|
||||
const handleSave = async () => {
|
||||
// Validate input
|
||||
if (!title.value.trim()) {
|
||||
// In a full implementation, show an alert or toast
|
||||
console.log('Validation error: Please enter a note title.');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
if (isEditing && existingNote) {
|
||||
// Update existing note
|
||||
await updateNote(props.noteId, { title: title.value, content: content.value });
|
||||
} else {
|
||||
// Create new note
|
||||
await addNote({ title: title.value, content: content.value, isStarred: false });
|
||||
}
|
||||
|
||||
// Navigate back to the previous screen
|
||||
window.history.back();
|
||||
} catch (error) {
|
||||
// In a full implementation, show an alert or toast
|
||||
console.log('Save error: Failed to save note. Please try again.');
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
// Check if there are unsaved changes
|
||||
const hasUnsavedChanges =
|
||||
title.value !== (existingNote?.title || '') ||
|
||||
content.value !== (existingNote?.content || '');
|
||||
|
||||
if (hasUnsavedChanges) {
|
||||
showAlert.value = true;
|
||||
} else {
|
||||
window.history.back();
|
||||
}
|
||||
};
|
||||
|
||||
// Toolbar actions
|
||||
const handleBold = () => {
|
||||
// In a full implementation, this would apply bold formatting
|
||||
console.log('Bold pressed');
|
||||
};
|
||||
|
||||
const handleItalic = () => {
|
||||
// In a full implementation, this would apply italic formatting
|
||||
console.log('Italic pressed');
|
||||
};
|
||||
|
||||
const handleUnderline = () => {
|
||||
// In a full implementation, this would apply underline formatting
|
||||
console.log('Underline pressed');
|
||||
};
|
||||
|
||||
const handleList = () => {
|
||||
// In a full implementation, this would insert a list
|
||||
console.log('List pressed');
|
||||
};
|
||||
|
||||
const handleHeader = () => {
|
||||
// In a full implementation, this would apply header formatting
|
||||
console.log('Header pressed');
|
||||
};
|
||||
|
||||
const handleQuote = () => {
|
||||
// In a full implementation, this would apply quote formatting
|
||||
console.log('Quote pressed');
|
||||
};
|
||||
|
||||
const setTitle = (value) => {
|
||||
title.value = value;
|
||||
};
|
||||
|
||||
const setContent = (value) => {
|
||||
content.value = value;
|
||||
};
|
||||
|
||||
const setShowAlert = (value) => {
|
||||
showAlert.value = value;
|
||||
};
|
||||
|
||||
return {
|
||||
isEditing,
|
||||
title,
|
||||
content,
|
||||
showAlert,
|
||||
handleSave,
|
||||
handleCancel,
|
||||
handleBold,
|
||||
handleItalic,
|
||||
handleUnderline,
|
||||
handleList,
|
||||
handleHeader,
|
||||
handleQuote,
|
||||
setTitle,
|
||||
setContent,
|
||||
setShowAlert,
|
||||
save,
|
||||
text,
|
||||
list
|
||||
};
|
||||
// Navigate back to the previous screen
|
||||
window.history.back();
|
||||
} catch (error) {
|
||||
// In a full implementation, show an alert or toast
|
||||
console.log('Save error: Failed to save note. Please try again.');
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
// Check if there are unsaved changes
|
||||
const hasUnsavedChanges =
|
||||
title.value !== (existingNote?.title || '') ||
|
||||
content.value !== (existingNote?.content || '');
|
||||
|
||||
if (hasUnsavedChanges) {
|
||||
showAlert.value = true;
|
||||
} else {
|
||||
window.history.back();
|
||||
}
|
||||
};
|
||||
|
||||
// Toolbar actions
|
||||
const handleBold = () => {
|
||||
// In a full implementation, this would apply bold formatting
|
||||
console.log('Bold pressed');
|
||||
};
|
||||
|
||||
const handleItalic = () => {
|
||||
// In a full implementation, this would apply italic formatting
|
||||
console.log('Italic pressed');
|
||||
};
|
||||
|
||||
const handleUnderline = () => {
|
||||
// In a full implementation, this would apply underline formatting
|
||||
console.log('Underline pressed');
|
||||
};
|
||||
|
||||
const handleList = () => {
|
||||
// In a full implementation, this would insert a list
|
||||
console.log('List pressed');
|
||||
};
|
||||
|
||||
const handleHeader = () => {
|
||||
// In a full implementation, this would apply header formatting
|
||||
console.log('Header pressed');
|
||||
};
|
||||
|
||||
const handleQuote = () => {
|
||||
// In a full implementation, this would apply quote formatting
|
||||
console.log('Quote pressed');
|
||||
};
|
||||
|
||||
const setTitle = (value) => {
|
||||
title.value = value;
|
||||
};
|
||||
|
||||
const setContent = (value) => {
|
||||
content.value = value;
|
||||
};
|
||||
|
||||
const setShowAlert = (value) => {
|
||||
showAlert.value = value;
|
||||
};
|
||||
</script>
|
||||
@@ -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>
|
||||
@@ -79,78 +79,64 @@
|
||||
</ion-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useAppData } from '../utils/AppDataContext';
|
||||
<script setup>
|
||||
import { computed, onMounted } from 'vue';
|
||||
import { useAppStore } from '../stores/useAppStore';
|
||||
import Header from '../components/Header.vue';
|
||||
|
||||
export default {
|
||||
name: 'SettingsPage',
|
||||
components: {
|
||||
Header
|
||||
},
|
||||
setup() {
|
||||
const { state, updateSettings } = useAppData();
|
||||
|
||||
const toggleCloudSync = () => {
|
||||
updateSettings({ cloudSync: !state.settings.cloudSync });
|
||||
};
|
||||
|
||||
const toggleDarkMode = () => {
|
||||
updateSettings({ darkMode: !state.settings.darkMode });
|
||||
};
|
||||
|
||||
const handleLogin = () => {
|
||||
// In a full implementation, this would open a login screen
|
||||
console.log('Login to cloud');
|
||||
};
|
||||
|
||||
const handlePrivacyPolicy = () => {
|
||||
// In a full implementation, this would show the privacy policy
|
||||
console.log('Privacy policy');
|
||||
};
|
||||
|
||||
const handleTermsOfService = () => {
|
||||
// In a full implementation, this would show the terms of service
|
||||
console.log('Terms of service');
|
||||
};
|
||||
|
||||
const handleBackup = () => {
|
||||
// In a full implementation, this would backup notes
|
||||
console.log('Backup notes');
|
||||
};
|
||||
|
||||
const handleRestore = () => {
|
||||
// In a full implementation, this would restore notes
|
||||
console.log('Restore notes');
|
||||
};
|
||||
|
||||
const handleExport = () => {
|
||||
// In a full implementation, this would export notes
|
||||
console.log('Export notes');
|
||||
};
|
||||
|
||||
const handleImport = () => {
|
||||
// In a full implementation, this would import notes
|
||||
console.log('Import notes');
|
||||
};
|
||||
|
||||
const handleBackPress = () => {
|
||||
window.history.back();
|
||||
};
|
||||
|
||||
return {
|
||||
settings: state.settings,
|
||||
toggleCloudSync,
|
||||
toggleDarkMode,
|
||||
handleLogin,
|
||||
handlePrivacyPolicy,
|
||||
handleTermsOfService,
|
||||
handleBackup,
|
||||
handleRestore,
|
||||
handleExport,
|
||||
handleImport,
|
||||
handleBackPress
|
||||
};
|
||||
}
|
||||
const store = useAppStore();
|
||||
|
||||
// 加载初始数据
|
||||
onMounted(() => {
|
||||
store.loadData();
|
||||
});
|
||||
|
||||
const toggleCloudSync = () => {
|
||||
store.toggleCloudSync();
|
||||
};
|
||||
|
||||
const toggleDarkMode = () => {
|
||||
store.toggleDarkMode();
|
||||
};
|
||||
|
||||
const handleLogin = () => {
|
||||
// In a full implementation, this would open a login screen
|
||||
console.log('Login to cloud');
|
||||
};
|
||||
|
||||
const handlePrivacyPolicy = () => {
|
||||
// In a full implementation, this would show the privacy policy
|
||||
console.log('Privacy policy');
|
||||
};
|
||||
|
||||
const handleTermsOfService = () => {
|
||||
// In a full implementation, this would show the terms of service
|
||||
console.log('Terms of service');
|
||||
};
|
||||
|
||||
const handleBackup = () => {
|
||||
// In a full implementation, this would backup notes
|
||||
console.log('Backup notes');
|
||||
};
|
||||
|
||||
const handleRestore = () => {
|
||||
// In a full implementation, this would restore notes
|
||||
console.log('Restore notes');
|
||||
};
|
||||
|
||||
const handleExport = () => {
|
||||
// In a full implementation, this would export notes
|
||||
console.log('Export notes');
|
||||
};
|
||||
|
||||
const handleImport = () => {
|
||||
// In a full implementation, this would import notes
|
||||
console.log('Import notes');
|
||||
};
|
||||
|
||||
const handleBackPress = () => {
|
||||
window.history.back();
|
||||
};
|
||||
|
||||
const settings = computed(() => store.settings);
|
||||
</script>
|
||||
Reference in New Issue
Block a user