SmartisanNote.Remake/src/pages/NoteDetailPage.vue

<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>