feat: add chinese vue workbench shell

web/src/views/DraftsView.vue

@@ -0,0 +1,48 @@
+<script setup>
+import StatusBadge from '../components/StatusBadge.vue'
+import WritebackSteps from '../components/WritebackSteps.vue'
+import { drafts } from '../data'
+</script>
+
+<template>
+  <section class="drafts-layout">
+    <div class="panel">
+      <div class="panel-heading horizontal">
+        <div>
+          <p class="eyebrow">草稿</p>
+          <h2>未写回变更</h2>
+        </div>
+        <span class="read-only-chip">写回未启用</span>
+      </div>
+
+      <div class="draft-list">
+        <article v-for="draft in drafts" :key="draft.file" class="draft-card">
+          <div class="draft-header">
+            <div>
+              <strong>{{ draft.file }}</strong>
+              <p>变更字段：{{ draft.changedFields.length ? draft.changedFields.join('、') : '无' }}</p>
+            </div>
+            <StatusBadge :label="draft.validation" status="unknown" :source="draft.source" :confidence="draft.confidence" />
+          </div>
+          <WritebackSteps :active-steps="draft.steps" />
+          <dl class="detail-grid">
+            <span>TOML 校验</span><strong>{{ draft.validation }}</strong>
+            <span>最近备份</span><strong>{{ draft.backup }}</strong>
+            <span>来源</span><strong>{{ draft.source }} / {{ draft.confidence }}</strong>
+          </dl>
+        </article>
+      </div>
+    </div>
+
+    <aside class="panel draft-side">
+      <div class="panel-heading">
+        <p class="eyebrow">空状态</p>
+        <h2>等待 Phase 6 写回流程</h2>
+      </div>
+      <div class="empty-state">
+        <strong>没有真实草稿队列</strong>
+        <p>Phase 4 只展示步骤结构：草稿、已校验、已备份、已写回。当前不会创建、放弃或写回任何文件。</p>
+      </div>
+    </aside>
+  </section>
+</template>