From 83e69317d4e303127cc101a4c564c9f092d6e1f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E7=90=A6?= <liqiworkers@gmail.com>
Date: Mon, 17 Aug 2026 09:05:12 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=A5=E4=BD=9C=E5=8F=B0=E7=AC=94=E8=AE=B0?=
 =?UTF-8?q?=E4=B9=8B=E5=89=8D=E6=98=AF=E4=B8=AA=E7=BA=AF=20textarea?=
 =?UTF-8?q?=EF=BC=8C=E5=86=85=E5=AE=B9=E5=8E=9F=E6=A0=B7=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=EF=BC=8C=E6=89=80=E4=BB=A5=20Markdown=20=E4=B8=80=E7=9B=B4?=
 =?UTF-8?q?=E4=B8=8D=E8=A7=A3=E6=9E=90=E3=80=82=E7=8E=B0=E5=9C=A8=E5=9C=A8?=
 =?UTF-8?q?=E7=AC=94=E8=AE=B0=E9=9D=A2=E6=9D=BF=E5=8F=B3=E4=B8=8A=E8=A7=92?=
 =?UTF-8?q?=E5=8A=A0=E4=BA=86=E3=80=8C=E7=BC=96=E8=BE=91=20/=20=E9=A2=84?=
 =?UTF-8?q?=E8=A7=88=E3=80=8D=E5=88=87=E6=8D=A2=EF=BC=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

编辑：还是原来的 textarea，防抖自动保存不变，占位提示换成了 Markdown 语法提示（和待办/工单编辑器一致）。
预览：用项目里已有的 MarkdownView 渲染，支持标题、列表、任务勾选框、代码块、链接、图片（本地图和外链都会经后端转成 dataURL 显示），点链接走系统浏览器。
几个细节：切到预览前会先把防抖窗口内没落盘的改动存一次，避免丢内容；切换状态记在 localStorage，下次进工作台保持上次选的模式；空笔记在预览下显示「（暂无内容）」占位。按钮复用了 md 编辑器已有的 mdEdit/mdPreviewTab 文案，所以中英文都已经有了，不需要新增词条。
---
 frontend/src/views/Workbench.vue | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/Workbench.vue b/frontend/src/views/Workbench.vue
index 89a0254..5fb09fc 100644
--- a/frontend/src/views/Workbench.vue
+++ b/frontend/src/views/Workbench.vue
@@ -2,9 +2,10 @@
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
-import { Star, Folder, Code2, GitCommitHorizontal, ListTodo, TicketCheck, StickyNote, ArrowRight, Circle, CircleDot, CircleCheck, Play, Check, CalendarDays, Plus, Bell, Save } from 'lucide-vue-next'
+import { Star, Folder, Code2, GitCommitHorizontal, ListTodo, TicketCheck, StickyNote, ArrowRight, Circle, CircleDot, CircleCheck, Play, Check, CalendarDays, Plus, Bell, Save, Pencil, Eye } from 'lucide-vue-next'
 import StatCard from '../components/StatCard.vue'
 import AIDayPanel from '../components/AIDayPanel.vue'
+import MarkdownView from '../components/MarkdownView.vue'
 import { call } from '../api'
 import { useAppStore } from '../store'
 
@@ -19,6 +20,8 @@ const noteText = ref('')
 const noteSavedAt = ref('')
 const noteDirty = ref(false)
 const noteSaving = ref(false)
+// 编辑/预览切换（预览走 Markdown 渲染），选择记忆在本地
+const notePreview = ref(localStorage.getItem('cc-wb-note-preview') === '1')
 const messages = ref([])
 let noteTimer
 
@@ -76,6 +79,13 @@ function editNote() {
   clearTimeout(noteTimer)
   noteTimer = setTimeout(() => { saveNote(false) }, 800)
 }
+// 切到预览前先落盘，避免防抖窗口内的改动丢失
+async function setNotePreview(on) {
+  if (notePreview.value === on) return
+  if (on && noteDirty.value) await saveNote(false)
+  notePreview.value = on
+  localStorage.setItem('cc-wb-note-preview', on ? '1' : '0')
+}
 async function saveNote(manual = true) {
   if (noteSaving.value) return
   noteSaving.value = true
@@ -201,6 +211,10 @@ onUnmounted(() => clearTimeout(noteTimer))
           <div class="wb-note-acts">
             <small v-if="noteDirty" class="wb-note-dirty">{{ t('noteUnsaved') }}</small>
             <small v-else-if="noteSavedAt" class="wb-note-saved">{{ t('autoSaved') }} {{ noteSavedAt }}</small>
+            <div class="tabs compact wb-note-tabs">
+              <button type="button" :class="{ active: !notePreview }" @click="setNotePreview(false)"><Pencil />{{ t('mdEdit') }}</button>
+              <button type="button" :class="{ active: notePreview }" @click="setNotePreview(true)"><Eye />{{ t('mdPreviewTab') }}</button>
+            </div>
             <button type="button" class="btn secondary" :title="t('noteNew')" @click="newNote"><Plus /></button>
             <button type="button" class="btn primary" :disabled="noteSaving || !noteDirty" :title="t('save')" @click="saveNote(true)"><Save />{{ t('save') }}</button>
             <button type="button" class="btn secondary" @click="router.push('/notes')">{{ t('viewAll') }}<ArrowRight /></button>
@@ -221,7 +235,8 @@ onUnmounted(() => clearTimeout(noteTimer))
             </button>
             <div v-if="!notes.length" class="wb-note-list-empty">{{ t('noteEmpty') }}</div>
           </aside>
-          <textarea v-model="noteText" class="wb-note" :placeholder="t('notepadPlaceholder')" @input="editNote" />
+          <textarea v-show="!notePreview" v-model="noteText" class="wb-note" :placeholder="t('mdPlaceholder')" @input="editNote" />
+          <MarkdownView v-if="notePreview" class="wb-note-preview md-preview-box" :source="noteText || t('mdEmpty')" />
         </div>
       </section>