feat(frontend): 接通完整页面路由与桌面壳层

frontend/src/features/editor/EditorHeader.vue

@@ -4,12 +4,24 @@ import { useWorkspaceStore } from '@/stores/workspace'
 
 const editorStore = useEditorStore()
 const workspaceStore = useWorkspaceStore()
+
+const statusText: Record<string, string> = {
+  idle: '空闲', dirty: '未保存', saving: '保存中…', saved: '已保存', save_failed: '保存失败',
+  external_changed: '外部文件已变化', conflict: '存在编辑冲突',
+}
 </script>
 
 <template>
   <header class="editor-header">
-    <strong>{{ workspaceStore.activeFile?.name ?? '未命名笔记' }}</strong>
-    <span>{{ editorStore.saveStatus }}</span>
+    <div class="file-identity"><strong>{{ workspaceStore.activeFile?.name ?? '未命名笔记' }}</strong><small>{{ workspaceStore.activeFilePath }}</small></div>
+    <div class="editor-actions">
+      <span class="save-status" :class="editorStore.saveStatus">{{ statusText[editorStore.saveStatus] }}</span>
+      <div class="mode-switch" aria-label="编辑模式">
+        <button type="button" :class="{ active: editorStore.mode === 'wysiwyg' }" @click="editorStore.setMode('wysiwyg')">写作</button>
+        <button type="button" :class="{ active: editorStore.mode === 'source' }" @click="editorStore.setMode('source')">源码</button>
+      </div>
+      <button type="button" class="save-button" :disabled="editorStore.saveStatus === 'saving'" @click="editorStore.save">保存</button>
+    </div>
   </header>
 </template>
 
@@ -23,4 +35,17 @@ const workspaceStore = useWorkspaceStore()
   border-bottom: 1px solid var(--color-border-subtle);
   color: var(--color-text-secondary);
 }
+.file-identity { display: grid; min-width: 0; }
+.file-identity strong, .file-identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.file-identity small { color: var(--color-text-tertiary); font-size: var(--font-size-xs); }
+.editor-actions, .mode-switch { display: flex; align-items: center; gap: var(--space-sm); }
+.save-status { color: var(--color-text-tertiary); font-size: var(--font-size-xs); }
+.save-status.dirty, .save-status.external_changed { color: var(--color-warning); }
+.save-status.save_failed, .save-status.conflict { color: var(--color-error); }
+.save-status.saved { color: var(--color-success); }
+.mode-switch { gap: 2px; padding: 2px; border-radius: var(--radius-md); background: var(--color-background-secondary); }
+.mode-switch button, .save-button { padding: 5px 9px; border-radius: var(--radius-sm); }
+.mode-switch button.active { background: var(--color-surface-primary); color: var(--color-accent-primary); box-shadow: var(--shadow-sm); }
+.save-button { background: var(--color-accent-primary); color: var(--color-text-inverse); }
+.save-button:disabled { opacity: .55; }
 </style>

frontend/src/features/editor/EditorPane.vue

@@ -5,10 +5,12 @@ const editorStore = useEditorStore()
 </script>
 
 <template>
-  <textarea
+<textarea
     class="editor-pane"
+    :class="editorStore.mode"
     :value="editorStore.content"
-    spellcheck="false"
+    :spellcheck="editorStore.mode === 'wysiwyg'"
+    :aria-label="editorStore.mode === 'source' ? 'Markdown 源码编辑器' : 'Markdown 写作编辑器'"
     @input="editorStore.updateContent(($event.target as HTMLTextAreaElement).value); editorStore.scheduleAutoSave()"
   />
 </template>
@@ -26,5 +28,8 @@ const editorStore = useEditorStore()
   color: var(--color-text-primary);
   font: inherit;
   line-height: 1.7;
+  user-select: text;
 }
+.editor-pane.wysiwyg { max-width: 920px; margin: 0 auto; padding: var(--space-3xl) clamp(var(--space-xl), 8vw, 80px); font-family: var(--font-editor-sans); font-size: var(--font-editor-size); line-height: var(--font-editor-line-height); }
+.editor-pane.source { font-family: var(--font-editor-mono); font-size: var(--font-editor-size); line-height: var(--font-editor-line-height); }
 </style>