You've already forked SmartisanNote.Remake
编辑页基本布局
This commit is contained in:
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
@@ -1,174 +1,317 @@
|
|||||||
<template>
|
<template>
|
||||||
<ion-page>
|
<ion-page>
|
||||||
<Header
|
<div class="container code-fun-relative">
|
||||||
:title="isEditing ? '编辑便签' : '新建便签'"
|
<Header title="" :onBack="handleCancel" :onAction="handleSave" />
|
||||||
:onBack="handleCancel"
|
<div class="code-fun-flex-col code-fun-justify-start code-fun-relative page">
|
||||||
:onAction="handleSave"
|
<div class="code-fun-flex-col section_4 pos_3">
|
||||||
actionText="保存"
|
<div class="code-fun-flex-row code-fun-justify-between code-fun-items-center section_5">
|
||||||
/>
|
<div class="code-fun-flex-row code-fun-items-center">
|
||||||
<div style="display: flex; border-bottom: 1px solid var(--border); padding: 8px 16px; background-color: var(--background-card)">
|
<!-- 便签文件夹切换 -->
|
||||||
<ion-button fill="clear" @click="handleBold" style="padding: 8px; margin-right: 8px">
|
<div class="code-fun-flex-col code-fun-justify-start code-fun-shrink-0 section_6">
|
||||||
<img src="/assets/icons/drawable-xxhdpi/rtf_bold_normal.9.png" style="width: 24px; height: 24px" />
|
<div class="code-fun-flex-row code-fun-items-center section_7">
|
||||||
</ion-button>
|
<img class="code-fun-shrink-0 image_7" src="/assets/icons/drawable-xxhdpi/note_empty.png" />
|
||||||
<ion-button fill="clear" @click="handleItalic" style="padding: 8px; margin-right: 8px">
|
<span class="text_3">全部便签</span>
|
||||||
<img src="/assets/icons/drawable-xxhdpi/rtf_gtasks_normal.9.png" style="width: 24px; height: 24px" />
|
<img class="code-fun-shrink-0 image_9" src="/assets/icons/drawable-xxhdpi/icon_detail_mode_arrow_normal.png" />
|
||||||
</ion-button>
|
</div>
|
||||||
<ion-button fill="clear" @click="handleUnderline" style="padding: 8px; margin-right: 8px">
|
</div>
|
||||||
<img src="/assets/icons/drawable-xxhdpi/rtf_list_normal.9.png" style="width: 24px; height: 24px" />
|
<!-- 编辑时间 -->
|
||||||
</ion-button>
|
<span class="text_2">今天下午6:30</span>
|
||||||
<ion-button fill="clear" @click="handleList" style="padding: 8px; margin-right: 8px">
|
<i>|</i>
|
||||||
<img src="/assets/icons/drawable-xxhdpi/rtf_header_normal.9.png" style="width: 24px; height: 24px" />
|
<!-- 字数统计 -->
|
||||||
</ion-button>
|
<span class="text_4">21</span>
|
||||||
<ion-button fill="clear" @click="handleHeader" style="padding: 8px; margin-right: 8px">
|
</div>
|
||||||
<img src="/assets/icons/drawable-xxhdpi/rtf_quot_normal.9.png" style="width: 24px; height: 24px" />
|
<div class="code-fun-flex-row code-fun-items-center">
|
||||||
</ion-button>
|
<!-- 是否收藏状态&收藏按钮 -->
|
||||||
<ion-button fill="clear" @click="handleQuote" style="padding: 8px">
|
<img class="image_6" src="/assets/icons/drawable-xxhdpi/icon_detail_star_unchecked.png" />
|
||||||
<img src="/assets/icons/drawable-xxhdpi/rtf_center_normal.9.png" style="width: 24px; height: 24px" />
|
<!-- 编辑模式切换：RTF、MARKDOWN -->
|
||||||
</ion-button>
|
<div class="code-fun-flex-col code-fun-justify-start code-fun-items-center section_8 code-fun-ml-20">
|
||||||
|
<div class="code-fun-flex-col code-fun-justify-start code-fun-items-center text-wrapper">
|
||||||
|
<span class="text_5">RTF</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<img class="image_10 code-fun-ml-20" src="/assets/icons/drawable-xxhdpi/icon_detail_mode_arrow_normal.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="code-fun-flex-col group">
|
||||||
|
<!-- 普通文本 -->
|
||||||
|
<span class="code-fun-self-start font text_6">手机设计</span>
|
||||||
|
<!-- 待办事项文本 -->
|
||||||
|
<div class="code-fun-flex-col code-fun-justify-start code-fun-self-stretch code-fun-relative group_2 code-fun-mt-8">
|
||||||
|
<!-- 已完成状态 -->
|
||||||
|
<div class="code-fun-flex-col code-fun-justify-start code-fun-items-start section_10">
|
||||||
|
<div class="code-fun-flex-row section_11">
|
||||||
|
<img class="image_11" src="/assets/icons/drawable-xxhdpi/preview_rtf_icon_gtasks_light.png" />
|
||||||
|
<span class="font text_8 code-fun-ml-12">啥事实</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 未完成状态 -->
|
||||||
|
<div class="code-fun-flex-row section_9 pos_4">
|
||||||
|
<img class="image_11" src="/assets/icons/drawable-xxhdpi/preview_rtf_icon_gtasks.png" />
|
||||||
|
<span class="font text_7 code-fun-ml-12">去问问</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="code-fun-flex-col code-fun-justify-start code-fun-self-stretch code-fun-relative section_14 code-fun-mt-8">
|
||||||
|
<div class="code-fun-flex-col code-fun-justify-start code-fun-items-start section_15">
|
||||||
|
<div class="code-fun-flex-col code-fun-justify-start code-fun-relative section_17">
|
||||||
|
<div class="code-fun-flex-col code-fun-justify-start section_16 pos_7">
|
||||||
|
<!-- 列表文本 -->
|
||||||
|
<div class="code-fun-flex-row code-fun-items-center section_18">
|
||||||
|
<img class="image_13" src="/assets/icons/drawable-xxhdpi/indicator.png" />
|
||||||
|
<span class="font text_11 code-fun-ml-20">大电锯</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="code-fun-flex-col code-fun-justify-start section_12 pos_5">
|
||||||
|
<!-- 引用文本 -->
|
||||||
|
<div class="code-fun-flex-col code-fun-items-start section_13">
|
||||||
|
<img class="code-fun-shrink-0 image_12" src="/assets/icons/drawable-xxhdpi/note_quote_editing_sign.9.png" />
|
||||||
|
<span class="text_9">设计师</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<ion-content>
|
|
||||||
<div style="padding: 16px; background-color: var(--background-card)">
|
|
||||||
<textarea
|
|
||||||
placeholder="标题"
|
|
||||||
:value="title"
|
|
||||||
@input="e => setTitle(e.target.value)"
|
|
||||||
style="font-size: 22px; font-weight: 600; color: var(--note-title); margin-bottom: 16px; padding: 8px 0; border-bottom: 1px solid var(--border); width: 100%; background-color: transparent; border: none; outline: none; resize: none; font-family: inherit"
|
|
||||||
></textarea>
|
|
||||||
<textarea
|
|
||||||
placeholder="开始写作..."
|
|
||||||
:value="content"
|
|
||||||
@input="e => setContent(e.target.value)"
|
|
||||||
style="font-size: 16px; color: var(--note-content); line-height: 24px; width: 100%; height: calc(100vh - 200px); background-color: transparent; border: none; outline: none; resize: none; font-family: inherit"
|
|
||||||
></textarea>
|
|
||||||
</div>
|
</div>
|
||||||
</ion-content>
|
|
||||||
|
|
||||||
<ion-alert
|
|
||||||
:is-open="showAlert"
|
|
||||||
@didDismiss="() => setShowAlert(false)"
|
|
||||||
header="未保存的更改"
|
|
||||||
message="您有未保存的更改，确定要丢弃吗？"
|
|
||||||
:buttons="[
|
|
||||||
{
|
|
||||||
text: '取消',
|
|
||||||
role: 'cancel'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: '丢弃',
|
|
||||||
handler: () => window.history.back()
|
|
||||||
}
|
|
||||||
]"
|
|
||||||
></ion-alert>
|
|
||||||
</ion-page>
|
</ion-page>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup></script>
|
||||||
import { ref, computed, onMounted } from 'vue';
|
|
||||||
import { useAppStore } from '../stores/useAppStore';
|
|
||||||
import { save, text, list } from 'ionicons/icons';
|
|
||||||
import Header from '../components/Header.vue';
|
|
||||||
|
|
||||||
const props = defineProps({
|
<style lang="less" scoped>
|
||||||
noteId: {
|
.page {
|
||||||
type: String,
|
background-image: url('/assets/icons/drawable-xxhdpi/mixed_view_item_bg.9.png');
|
||||||
default: null
|
background-size: 100% 10px;
|
||||||
|
background-repeat: repeat-y;
|
||||||
|
width: calc(100% + 6rem);
|
||||||
|
margin-left: -5rem;
|
||||||
|
padding-left: 3rem;
|
||||||
|
height: auto;
|
||||||
|
min-height: 100vh;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.section_4 {
|
||||||
|
.section_5 {
|
||||||
|
padding: 0.75rem 1.75rem 1rem 2.25rem;
|
||||||
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
.section_6 {
|
||||||
|
padding-top: 0.25rem;
|
||||||
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
width: 7rem;
|
||||||
|
height: 2rem;
|
||||||
|
.section_7 {
|
||||||
|
margin-left: 0.25rem;
|
||||||
|
padding: 0.5rem;
|
||||||
|
background-color: rgb(226, 221, 213);
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
border: solid 0.063rem rgb(182, 174, 164);
|
||||||
|
.image_7 {
|
||||||
|
width: 0.78rem;
|
||||||
|
height: 0.81rem;
|
||||||
}
|
}
|
||||||
});
|
.text_3 {
|
||||||
|
margin-left: 0.5rem;
|
||||||
const store = useAppStore();
|
color: rgb(176, 166, 156);
|
||||||
|
font-size: 0.79rem;
|
||||||
// 加载初始数据
|
line-height: 0.79rem;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
.image_9 {
|
||||||
try {
|
margin-left: 0.75rem;
|
||||||
if (isEditing && existingNote) {
|
width: 0.44rem;
|
||||||
// Update existing note
|
height: 0.22rem;
|
||||||
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 });
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 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();
|
|
||||||
}
|
}
|
||||||
};
|
.text_2 {
|
||||||
|
margin-left: 0.5rem;
|
||||||
// Toolbar actions
|
color: rgb(178, 170, 160);
|
||||||
const handleBold = () => {
|
font-size: 0.98rem;
|
||||||
// In a full implementation, this would apply bold formatting
|
line-height: 0.98rem;
|
||||||
console.log('Bold pressed');
|
}
|
||||||
};
|
.image_8 {
|
||||||
|
margin-left: 1.75rem;
|
||||||
const handleItalic = () => {
|
width: 0.094rem;
|
||||||
// In a full implementation, this would apply italic formatting
|
height: 0.75rem;
|
||||||
console.log('Italic pressed');
|
}
|
||||||
};
|
.text_4 {
|
||||||
|
margin-left: 0.5rem;
|
||||||
const handleUnderline = () => {
|
color: rgb(168, 161, 150);
|
||||||
// In a full implementation, this would apply underline formatting
|
font-size: 1.1rem;
|
||||||
console.log('Underline pressed');
|
line-height: 1.1rem;
|
||||||
};
|
}
|
||||||
|
.image_6 {
|
||||||
const handleList = () => {
|
width: 1.53rem;
|
||||||
// In a full implementation, this would insert a list
|
height: 1.44rem;
|
||||||
console.log('List pressed');
|
}
|
||||||
};
|
.section_8 {
|
||||||
|
padding: 0.25rem 0;
|
||||||
const handleHeader = () => {
|
background-color: rgba(0, 0, 0, 0);
|
||||||
// In a full implementation, this would apply header formatting
|
width: 2.94rem;
|
||||||
console.log('Header pressed');
|
height: 1.72rem;
|
||||||
};
|
.text-wrapper {
|
||||||
|
padding: 0.25rem 0;
|
||||||
const handleQuote = () => {
|
background-color: rgb(232, 216, 186);
|
||||||
// In a full implementation, this would apply quote formatting
|
border-radius: 0.25rem;
|
||||||
console.log('Quote pressed');
|
width: 2.63rem;
|
||||||
};
|
border: solid 0.063rem rgb(205, 159, 89);
|
||||||
|
.text_5 {
|
||||||
const setTitle = (value) => {
|
color: rgb(152, 103, 51);
|
||||||
title.value = value;
|
font-size: 0.81rem;
|
||||||
};
|
font-weight: 700;
|
||||||
|
line-height: 0.81rem;
|
||||||
const setContent = (value) => {
|
}
|
||||||
content.value = value;
|
}
|
||||||
};
|
}
|
||||||
|
.image_10 {
|
||||||
const setShowAlert = (value) => {
|
width: 0.75rem;
|
||||||
showAlert.value = value;
|
height: 0.47rem;
|
||||||
};
|
}
|
||||||
</script>
|
}
|
||||||
|
.group {
|
||||||
|
padding: 0.75rem 0;
|
||||||
|
.font {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
line-height: 1.5rem;
|
||||||
|
}
|
||||||
|
.text_6 {
|
||||||
|
margin-left: 2.75rem;
|
||||||
|
color: rgb(124, 108, 87);
|
||||||
|
font-size: 1.5rem;
|
||||||
|
line-height: 1.5rem;
|
||||||
|
}
|
||||||
|
.group_2 {
|
||||||
|
padding-top: 0.75rem;
|
||||||
|
.section_10 {
|
||||||
|
margin-left: 1.25rem;
|
||||||
|
padding-top: 3.13rem;
|
||||||
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
height: 6.84rem;
|
||||||
|
.section_11 {
|
||||||
|
margin-left: -0.5rem;
|
||||||
|
padding: 1.25rem 2.5rem 1rem;
|
||||||
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
width: 36rem;
|
||||||
|
.text_8 {
|
||||||
|
color: rgb(212, 207, 198);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.section_9 {
|
||||||
|
padding: 1.75rem 1.5rem 1rem;
|
||||||
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
.text_7 {
|
||||||
|
color: rgb(122, 107, 87);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.pos_4 {
|
||||||
|
position: absolute;
|
||||||
|
left: 1.69rem;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
.image_11 {
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
width: 1.5rem;
|
||||||
|
height: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.section_14 {
|
||||||
|
padding: 4.75rem 0 2.25rem;
|
||||||
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
.section_15 {
|
||||||
|
margin-right: 1.5rem;
|
||||||
|
padding: 0.75rem 0 3.75rem;
|
||||||
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
.section_17 {
|
||||||
|
padding-top: 2.75rem;
|
||||||
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
width: 36.84rem;
|
||||||
|
height: 8.16rem;
|
||||||
|
.section_19 {
|
||||||
|
margin-right: 1.75rem;
|
||||||
|
padding-top: 1.5rem;
|
||||||
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
width: 35.13rem;
|
||||||
|
.image-wrapper {
|
||||||
|
padding: 0.75rem 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
width: 36.84rem;
|
||||||
|
.image_14 {
|
||||||
|
margin-left: 2.5rem;
|
||||||
|
width: 0.19rem;
|
||||||
|
height: 2.72rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.section_16 {
|
||||||
|
padding-top: 1.75rem;
|
||||||
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
width: 36.84rem;
|
||||||
|
height: 5.41rem;
|
||||||
|
.section_18 {
|
||||||
|
padding: 0.75rem 3.75rem 1.25rem;
|
||||||
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
width: 36.84rem;
|
||||||
|
.image_13 {
|
||||||
|
width: 0.38rem;
|
||||||
|
height: 0.38rem;
|
||||||
|
}
|
||||||
|
.text_11 {
|
||||||
|
color: rgb(122, 106, 84);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.pos_7 {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: -0.53rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.text-wrapper_2 {
|
||||||
|
padding: 1.25rem 0 9.5rem;
|
||||||
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
.text_10 {
|
||||||
|
margin-left: 2.75rem;
|
||||||
|
color: rgb(116, 94, 68);
|
||||||
|
font-size: 1.5rem;
|
||||||
|
line-height: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.pos_6 {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 2.84rem;
|
||||||
|
}
|
||||||
|
.section_12 {
|
||||||
|
padding-bottom: 10.25rem;
|
||||||
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
.section_13 {
|
||||||
|
margin-left: 0.75rem;
|
||||||
|
padding: 1.25rem 2.75rem;
|
||||||
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
.image_12 {
|
||||||
|
width: 1.06rem;
|
||||||
|
height: 0.88rem;
|
||||||
|
}
|
||||||
|
.text_9 {
|
||||||
|
margin-left: 2rem;
|
||||||
|
color: rgb(161, 151, 139);
|
||||||
|
font-size: 1.31rem;
|
||||||
|
line-height: 1.31rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.pos_5 {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: -1.09rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
174
src/pages/NoteEditorPage_old.vue
Normal file
174
src/pages/NoteEditorPage_old.vue
Normal file
@@ -0,0 +1,174 @@
|
|||||||
|
<template>
|
||||||
|
<ion-page>
|
||||||
|
<Header
|
||||||
|
:title="isEditing ? '编辑便签' : '新建便签'"
|
||||||
|
:onBack="handleCancel"
|
||||||
|
:onAction="handleSave"
|
||||||
|
actionText="保存"
|
||||||
|
/>
|
||||||
|
<div style="display: flex; border-bottom: 1px solid var(--border); padding: 8px 16px; background-color: var(--background-card)">
|
||||||
|
<ion-button fill="clear" @click="handleBold" style="padding: 8px; margin-right: 8px">
|
||||||
|
<img src="/assets/icons/drawable-xxhdpi/rtf_bold_normal.9.png" style="width: 24px; height: 24px" />
|
||||||
|
</ion-button>
|
||||||
|
<ion-button fill="clear" @click="handleItalic" style="padding: 8px; margin-right: 8px">
|
||||||
|
<img src="/assets/icons/drawable-xxhdpi/rtf_gtasks_normal.9.png" style="width: 24px; height: 24px" />
|
||||||
|
</ion-button>
|
||||||
|
<ion-button fill="clear" @click="handleUnderline" style="padding: 8px; margin-right: 8px">
|
||||||
|
<img src="/assets/icons/drawable-xxhdpi/rtf_list_normal.9.png" style="width: 24px; height: 24px" />
|
||||||
|
</ion-button>
|
||||||
|
<ion-button fill="clear" @click="handleList" style="padding: 8px; margin-right: 8px">
|
||||||
|
<img src="/assets/icons/drawable-xxhdpi/rtf_header_normal.9.png" style="width: 24px; height: 24px" />
|
||||||
|
</ion-button>
|
||||||
|
<ion-button fill="clear" @click="handleHeader" style="padding: 8px; margin-right: 8px">
|
||||||
|
<img src="/assets/icons/drawable-xxhdpi/rtf_quot_normal.9.png" style="width: 24px; height: 24px" />
|
||||||
|
</ion-button>
|
||||||
|
<ion-button fill="clear" @click="handleQuote" style="padding: 8px">
|
||||||
|
<img src="/assets/icons/drawable-xxhdpi/rtf_center_normal.9.png" style="width: 24px; height: 24px" />
|
||||||
|
</ion-button>
|
||||||
|
</div>
|
||||||
|
<ion-content>
|
||||||
|
<div style="padding: 16px; background-color: var(--background-card)">
|
||||||
|
<textarea
|
||||||
|
placeholder="标题"
|
||||||
|
:value="title"
|
||||||
|
@input="e => setTitle(e.target.value)"
|
||||||
|
style="font-size: 22px; font-weight: 600; color: var(--note-title); margin-bottom: 16px; padding: 8px 0; border-bottom: 1px solid var(--border); width: 100%; background-color: transparent; border: none; outline: none; resize: none; font-family: inherit"
|
||||||
|
></textarea>
|
||||||
|
<textarea
|
||||||
|
placeholder="开始写作..."
|
||||||
|
:value="content"
|
||||||
|
@input="e => setContent(e.target.value)"
|
||||||
|
style="font-size: 16px; color: var(--note-content); line-height: 24px; width: 100%; height: calc(100vh - 200px); background-color: transparent; border: none; outline: none; resize: none; font-family: inherit"
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
</ion-content>
|
||||||
|
|
||||||
|
<ion-alert
|
||||||
|
:is-open="showAlert"
|
||||||
|
@didDismiss="() => setShowAlert(false)"
|
||||||
|
header="未保存的更改"
|
||||||
|
message="您有未保存的更改，确定要丢弃吗？"
|
||||||
|
:buttons="[
|
||||||
|
{
|
||||||
|
text: '取消',
|
||||||
|
role: 'cancel'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '丢弃',
|
||||||
|
handler: () => window.history.back()
|
||||||
|
}
|
||||||
|
]"
|
||||||
|
></ion-alert>
|
||||||
|
</ion-page>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<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';
|
||||||
|
|
||||||
|
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 });
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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>
|
||||||
Reference in New Issue
Block a user