feat: support markdown in memos

frontend/src/components/MemoEditor.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
-import { ArchiveRestore, Trash2, X } from 'lucide-vue-next'
+import { ArchiveRestore, Bold, Code, Heading2, Italic, Link, List, ListChecks, ListOrdered, Quote, Trash2, X } from 'lucide-vue-next'
+import { applyMarkdownFormat, renderMarkdown, type MarkdownFormat } from '../lib/task-utils'
 
 export type MemoRecord = { id: string; title: string; content: string; version: number; created_at: string; updated_at: string; deleted_at: string | null }
 export type MemoDraft = { id: null; title: string; content: string; version: null; created_at: null; updated_at: null; deleted_at: null }
@@ -19,11 +20,14 @@ const conflict = ref(false)
 const titleInput = ref<HTMLInputElement | null>(null)
 const root = ref<HTMLElement | null>(null)
 const initial = ref({ title: '', content: '' })
+const memoPreview = ref(false)
+const memoBodyEditor = ref<HTMLTextAreaElement | null>(null)
 const dirty = computed(() => title.value !== initial.value.title || content.value !== initial.value.content)
 
 function loadDraft(memo: MemoEditorValue) {
   title.value = memo.title; content.value = memo.content
   initial.value = { title: memo.title, content: memo.content }
+  memoPreview.value = Boolean(memo.deleted_at)
   saving.value = false; error.value = ''; conflict.value = false
 }
 watch(() => props.memo, loadDraft, { immediate: true })
@@ -143,6 +147,28 @@ async function purge() {
     if (isCurrentOperation()) lifecycleBusy.value = false
   }
 }
+function formatMemoBody(format: MarkdownFormat) {
+  if (props.memo.deleted_at) return
+  const editor = memoBodyEditor.value
+  const start = editor?.selectionStart ?? content.value.length
+  const end = editor?.selectionEnd ?? start
+  const formatted = applyMarkdownFormat(content.value, start, end, format)
+  content.value = formatted.value
+  memoPreview.value = false
+  void nextTick(() => {
+    const target = memoBodyEditor.value
+    if (!target) return
+    target.focus()
+    target.setSelectionRange(formatted.start, formatted.end)
+  })
+}
+function handleMemoBodyShortcut(event: KeyboardEvent) {
+  if (!(event.metaKey || event.ctrlKey)) return
+  const format = event.key.toLowerCase() === 'b' ? 'bold' : event.key.toLowerCase() === 'i' ? 'italic' : event.key.toLowerCase() === 'k' ? 'link' : null
+  if (!format) return
+  event.preventDefault()
+  formatMemoBody(format)
+}
 function keydown(event: KeyboardEvent) {
   if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 's') { event.preventDefault(); void save(); return }
   if (event.key === 'Escape') { event.preventDefault(); close(); return }
@@ -164,7 +190,25 @@ defineExpose({ dirty, requestClose: close })
     <header><span id="memo-editor-title">备忘录详情</span><button type="button" aria-label="关闭备忘录" @click="close"><X/></button></header>
     <div class="memo-editor__fields">
       <label>标题<input ref="titleInput" v-model="title" maxlength="200" aria-label="备忘录标题" :disabled="Boolean(memo.deleted_at)"></label>
-      <label>正文<textarea v-model="content" rows="16" aria-label="备忘录正文" placeholder="写点什么…" :disabled="Boolean(memo.deleted_at)"></textarea></label>
+      <div class="memo-field memo-markdown-field">
+        <div class="memo-field__label"><span>正文</span><span v-if="!memo.deleted_at" class="markdown-mode-switch"><button type="button" :aria-pressed="!memoPreview" :class="{active:!memoPreview}" @click="memoPreview=false">编辑</button><button type="button" :aria-pressed="memoPreview" :class="{active:memoPreview}" @click="memoPreview=true">预览</button></span></div>
+        <div v-if="!memoPreview && !memo.deleted_at" class="markdown-editor-shell memo-markdown-editor">
+          <div class="markdown-toolbar" role="toolbar" aria-label="备忘录 Markdown 格式">
+            <button type="button" aria-label="标题" title="标题" @click="formatMemoBody('heading')"><Heading2/></button>
+            <button type="button" aria-label="粗体" title="粗体" @click="formatMemoBody('bold')"><Bold/></button>
+            <button type="button" aria-label="斜体" title="斜体" @click="formatMemoBody('italic')"><Italic/></button>
+            <button type="button" aria-label="无序列表" title="无序列表" @click="formatMemoBody('bullet')"><List/></button>
+            <button type="button" aria-label="有序列表" title="有序列表" @click="formatMemoBody('ordered')"><ListOrdered/></button>
+            <button type="button" aria-label="待办" title="待办" @click="formatMemoBody('task')"><ListChecks/></button>
+            <button type="button" aria-label="链接" title="链接" @click="formatMemoBody('link')"><Link/></button>
+            <button type="button" aria-label="行内代码" title="行内代码" @click="formatMemoBody('code')"><Code/></button>
+            <button type="button" aria-label="代码块" title="代码块" class="markdown-codeblock" @click="formatMemoBody('codeblock')">{ }</button>
+            <button type="button" aria-label="引用" title="引用" @click="formatMemoBody('quote')"><Quote/></button>
+          </div>
+          <textarea ref="memoBodyEditor" v-model="content" rows="16" aria-label="备忘录正文" placeholder="写点什么…支持 Markdown" @keydown="handleMemoBodyShortcut"/>
+        </div>
+        <div v-else class="markdown-preview memo-markdown-preview" :class="{'markdown-preview-empty':!content.trim()}" role="region" aria-label="备忘录 Markdown 预览" v-html="content.trim() ? renderMarkdown(content) : '<p>暂无正文，切回编辑开始书写。</p>'"/>
+      </div>
       <p v-if="error" role="alert" class="memo-editor__error">{{ error }} <button v-if="conflict" class="memo-reload" type="button" @click="reload">重新载入</button></p>
     </div>
     <footer v-if="!memo.deleted_at"><button v-if="memo.id !== null" type="button" class="danger-text" :disabled="saving || lifecycleBusy" @click="remove"><Trash2/>移到回收站</button><button type="button" class="primary-small memo-save" :disabled="saving || lifecycleBusy || !dirty" @click="save">{{ saving ? '正在保存…' : '保存' }}</button></footer>