From 5bb3839b1bdd4efe144447381c51e3198108ccf3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=A2=81=E6=B6=9B?= <work@pandorastudio.cn>
Date: Fri, 10 Oct 2025 20:33:51 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BC=96=E8=BE=91=E9=A1=B5=E5=9F=BA=E6=9C=AC?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../icons/drawable-xxhdpi/vip_expired.png     | Bin 2235 -> 0 bytes
 src/pages/NoteEditorPage.vue                  | 473 ++++++++++++------
 src/pages/NoteEditorPage_old.vue              | 174 +++++++
 3 files changed, 482 insertions(+), 165 deletions(-)
 delete mode 100644 public/assets/icons/drawable-xxhdpi/vip_expired.png
 create mode 100644 src/pages/NoteEditorPage_old.vue

diff --git a/public/assets/icons/drawable-xxhdpi/vip_expired.png b/public/assets/icons/drawable-xxhdpi/vip_expired.png
deleted file mode 100644
index fed7125183023d0223f16e98eae79f35ceed6c69..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2235
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
JPDHLkV1i{;E4lyx

diff --git a/src/pages/NoteEditorPage.vue b/src/pages/NoteEditorPage.vue
index 3299c13..ac0192e 100644
--- a/src/pages/NoteEditorPage.vue
+++ b/src/pages/NoteEditorPage.vue
@@ -1,174 +1,317 @@
 <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 class="container code-fun-relative">
+      <Header title="" :onBack="handleCancel" :onAction="handleSave" />
+      <div class="code-fun-flex-col code-fun-justify-start code-fun-relative page">
+        <div class="code-fun-flex-col section_4 pos_3">
+          <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 class="code-fun-flex-col code-fun-justify-start code-fun-shrink-0 section_6">
+                <div class="code-fun-flex-row code-fun-items-center section_7">
+                  <img class="code-fun-shrink-0 image_7" src="/assets/icons/drawable-xxhdpi/note_empty.png" />
+                  <span class="text_3">全部便签</span>
+                  <img class="code-fun-shrink-0 image_9" src="/assets/icons/drawable-xxhdpi/icon_detail_mode_arrow_normal.png" />
+                </div>
+              </div>
+              <!-- 编辑时间 -->
+              <span class="text_2">今天下午6:30</span>
+              <i>|</i>
+              <!-- 字数统计 -->
+              <span class="text_4">21</span>
+            </div>
+            <div class="code-fun-flex-row code-fun-items-center">
+              <!-- 是否收藏状态&收藏按钮 -->
+              <img class="image_6" src="/assets/icons/drawable-xxhdpi/icon_detail_star_unchecked.png" />
+              <!-- 编辑模式切换：RTF、MARKDOWN -->
+              <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>
-    </ion-content>
-    
-    <ion-alert
-      :is-open="showAlert"
-      @didDismiss="() => setShowAlert(false)"
-      header="未保存的更改"
-      message="您有未保存的更改，确定要丢弃吗？"
-      :buttons="[
-        {
-          text: '取消',
-          role: 'cancel'
-        },
-        {
-          text: '丢弃',
-          handler: () => window.history.back()
-        }
-      ]"
-    ></ion-alert>
+    </div>
   </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';
+<script setup></script>
 
-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 });
+<style lang="less" scoped>
+.page {
+  background-image: url('/assets/icons/drawable-xxhdpi/mixed_view_item_bg.9.png');
+  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;
+            color: rgb(176, 166, 156);
+            font-size: 0.79rem;
+            line-height: 0.79rem;
+          }
+          .image_9 {
+            margin-left: 0.75rem;
+            width: 0.44rem;
+            height: 0.22rem;
+          }
+        }
+      }
+      .text_2 {
+        margin-left: 0.5rem;
+        color: rgb(178, 170, 160);
+        font-size: 0.98rem;
+        line-height: 0.98rem;
+      }
+      .image_8 {
+        margin-left: 1.75rem;
+        width: 0.094rem;
+        height: 0.75rem;
+      }
+      .text_4 {
+        margin-left: 0.5rem;
+        color: rgb(168, 161, 150);
+        font-size: 1.1rem;
+        line-height: 1.1rem;
+      }
+      .image_6 {
+        width: 1.53rem;
+        height: 1.44rem;
+      }
+      .section_8 {
+        padding: 0.25rem 0;
+        background-color: rgba(0, 0, 0, 0);
+        width: 2.94rem;
+        height: 1.72rem;
+        .text-wrapper {
+          padding: 0.25rem 0;
+          background-color: rgb(232, 216, 186);
+          border-radius: 0.25rem;
+          width: 2.63rem;
+          border: solid 0.063rem rgb(205, 159, 89);
+          .text_5 {
+            color: rgb(152, 103, 51);
+            font-size: 0.81rem;
+            font-weight: 700;
+            line-height: 0.81rem;
+          }
+        }
+      }
+      .image_10 {
+        width: 0.75rem;
+        height: 0.47rem;
+      }
+    }
+    .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;
+        }
+      }
     }
-    
-    // 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>
\ No newline at end of file
+}
+</style>
diff --git a/src/pages/NoteEditorPage_old.vue b/src/pages/NoteEditorPage_old.vue
new file mode 100644
index 0000000..3299c13
--- /dev/null
+++ b/src/pages/NoteEditorPage_old.vue
@@ -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>
\ No newline at end of file