初始化提交

2025-10-10 08:13:38 +08:00
commit 0d4c7353f4
1361 changed files with 13945 additions and 0 deletions
--- a/src/pages/NoteDetailPage.vue
+++ b/src/pages/NoteDetailPage.vue
@@ -0,0 +1,139 @@
+<template>
+  <ion-page>
+    <Header 
+      :title="note ? note.title : '未找到便签'"
+      :onBack="() => window.history.back()"
+      :onAction="note ? handleEdit : null"
+      actionIcon="settings"
+    />
+    <ion-content v-if="!note">
+      <div style="display: flex; justify-content: center; align-items: center; height: 100%; background-color: var(--background)">
+        <ion-text>未找到该便签</ion-text>
+      </div>
+    </ion-content>
+    <ion-content v-else>
+      <div style="padding: 16px; background-color: var(--background-card)">
+        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border)">
+          <ion-text style="color: var(--note-date); font-size: 14px">
+            最后更新: {{ formatDate(note.updatedAt) }}
+          </ion-text>
+          <ion-button fill="clear" @click="handleStar">
+            <ion-icon 
+              :icon="note.isStarred ? star : starOutline" 
+              :style="{ fontSize: '24px', color: note.isStarred ? 'var(--note-star)' : 'var(--text-tertiary)' }"
+            ></ion-icon>
+          </ion-button>
+        </div>
+        <div style="white-space: pre-wrap; line-height: 1.6; font-size: 16px; color: var(--note-content)">
+          {{ note.content }}
+        </div>
+      </div>
+      
+      <div style="position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-around; padding: 10px; background-color: var(--background); border-top: 1px solid var(--border)">
+        <div style="display: flex; flex-direction: column; align-items: center">
+          <ion-button fill="clear" @click="handleShare">
+            <ion-icon :icon="share" style="font-size: 24px; color: var(--text-primary)"></ion-icon>
+          </ion-button>
+          <ion-text style="font-size: 12px; color: var(--text-primary)">分享</ion-text>
+        </div>
+        <div style="display: flex; flex-direction: column; align-items: center">
+          <ion-button fill="clear" @click="handleMoveToFolder">
+            <ion-icon :icon="folder" style="font-size: 24px; color: var(--text-primary)"></ion-icon>
+          </ion-button>
+          <ion-text style="font-size: 12px; color: var(--text-primary)">文件夹</ion-text>
+        </div>
+        <div style="display: flex; flex-direction: column; align-items: center">
+          <ion-button fill="clear" @click="handleReminder">
+            <ion-icon :icon="alarm" style="font-size: 24px; color: var(--text-primary)"></ion-icon>
+          </ion-button>
+          <ion-text style="font-size: 12px; color: var(--text-primary)">提醒</ion-text>
+        </div>
+        <div style="display: flex; flex-direction: column; align-items: center">
+          <ion-button fill="clear" @click="handleDelete">
+            <ion-icon :icon="trash" style="font-size: 24px; color: var(--text-primary)"></ion-icon>
+          </ion-button>
+          <ion-text style="font-size: 12px; color: var(--text-primary)">删除</ion-text>
+        </div>
+      </div>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script>
+import { computed } from 'vue';
+import { useAppData } from '../utils/AppDataContext';
+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
+    };
+  }
+};
+</script>