From 64ec27949fef69d04747cb8313bc0aa4f380b259 Mon Sep 17 00:00:00 2001
From: caoxiaozhu <caoxiaozhu@users.noreply.github.com>
Date: Mon, 18 May 2026 09:39:41 +0000
Subject: [PATCH] =?UTF-8?q?feat(AuditView):=20=E5=88=A0=E9=99=A4=E5=B7=AE?=
 =?UTF-8?q?=E6=97=85=E8=B4=B9=E6=8A=A5=E9=94=80=E8=A7=84=E5=88=99=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E7=9A=84=E5=AE=A1=E6=A0=B8=E6=8C=89=E9=92=AE=E5=B9=B6?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 删除详情中间区域的提交审核、审核通过、驳回版本三个按钮
- 删除底部 footer 的提交审核、审核通过、驳回版本、正式上线四个按钮
- 将下载 Excel 按钮改为下载表格
- 简化电子表格编辑器的 meta 信息显示
---
 web/src/views/AuditView.vue | 660 ++++++++++++++++++------------------
 1 file changed, 337 insertions(+), 323 deletions(-)

diff --git a/web/src/views/AuditView.vue b/web/src/views/AuditView.vue
index 05eb3ce..62d48de 100644
--- a/web/src/views/AuditView.vue
+++ b/web/src/views/AuditView.vue
@@ -99,26 +99,8 @@
                 <span class="spreadsheet-mode-pill">
                   {{ selectedSpreadsheetVersionModeLabel }}
                 </span>
-                <button
-                  class="mini-btn"
-                  type="button"
-                  :disabled="selectedSkill.isPreviewMock"
-                  @click="openVersionCompare()"
-                >
-                  <i class="mdi mdi-compare-horizontal"></i>
-                  <span>版本对比</span>
-                </button>
-                <button
-                  class="mini-btn"
-                  type="button"
-                  :disabled="selectedSkill.isPreviewMock"
-                  @click="openVersionTimeline"
-                >
-                  <i class="mdi mdi-timeline-clock-outline"></i>
-                  <span>查看流转</span>
-                </button>
-              </div>
-            </header>
+              </div>
+            </header>
 
             <input
               ref="spreadsheetUploadInput"
@@ -130,22 +112,19 @@
 
             <div class="spreadsheet-editor-body">
               <section class="spreadsheet-main-stage">
-                <div class="spreadsheet-editor-meta">
-                  <span><strong>文件</strong>{{ selectedSpreadsheetFileName }}</span>
-                  <span><strong>线上版本</strong>{{ selectedSkill.publishedVersion }}</span>
-                  <span><strong>工作版本</strong>{{ selectedSkill.workingVersion }}</span>
-                  <span><strong>当前预览</strong>{{ selectedSkill.displayVersion }}</span>
-                  <span><strong>审核状态</strong>{{ selectedSkill.reviewStatusLabel }}</span>
-                  <span><strong>负责人</strong>{{ selectedSkill.owner }}</span>
-                  <span><strong>最近更新</strong>{{ selectedSkill.updatedAt }}</span>
-                </div>
+                <div class="spreadsheet-editor-meta">
+                  <span><strong>文件</strong>{{ selectedSpreadsheetFileName }}</span>
+                  <span><strong>负责人</strong>{{ selectedSkill.owner }}</span>
+                  <span><strong>最近更新</strong>{{ selectedSkill.updatedAt }}</span>
+                </div>
 
                 <div class="spreadsheet-workbench">
-                  <div
-                    :id="spreadsheetOnlyOfficeHostId"
-                    class="rule-spreadsheet-host"
-                    :class="{ hidden: !spreadsheetOnlyOfficeReady && !spreadsheetOnlyOfficeError }"
-                  ></div>
+                  <div
+                    :key="spreadsheetOnlyOfficeHostId"
+                    :id="spreadsheetOnlyOfficeHostId"
+                    class="rule-spreadsheet-host"
+                    :class="{ hidden: !spreadsheetOnlyOfficeReady && !spreadsheetOnlyOfficeError }"
+                  ></div>
                   <div v-if="spreadsheetOnlyOfficeLoading" class="rule-spreadsheet-state">
                     <i class="mdi mdi-loading mdi-spin"></i>
                     <span>正在加载 Excel 规则表...</span>
@@ -156,102 +135,62 @@
                   </div>
                 </div>
 
-                <footer class="spreadsheet-editor-foot">
-                  <span>
-                    {{
-                      canEditSpreadsheetInline
-                        ? '当前版本可直接编辑；关闭编辑器并保存后，会自动生成新的规则版本快照。'
-                        : '当前为历史版本预览或只读模式。'
-                    }}
-                  </span>
-                  <span>最近版本说明：{{ selectedSkill.displayVersionChangeNote }}</span>
-                </footer>
+                <footer class="spreadsheet-editor-foot">
+                  <span>
+                    {{
+                      canEditSpreadsheetInline
+                        ? '可直接在线编辑；保存后，右侧会自动记录本次修改内容。'
+                        : '当前为只读预览模式。'
+                    }}
+                  </span>
+                  <span>右侧仅展示最近 30 次修改操作。</span>
+                </footer>
               </section>
 
-              <aside class="spreadsheet-version-center">
-                <header class="version-center-head">
-                  <div>
-                    <h3>版本中心</h3>
-                    <p>一眼看清线上、工作与最近流转。</p>
-                  </div>
-                </header>
-
-                <div class="version-pair-grid">
-                  <article class="version-pair-card published">
-                    <span>线上版本</span>
-                    <strong>{{ selectedSkill.publishedVersion }}</strong>
-                    <b>正式生效</b>
-                  </article>
-                  <article class="version-pair-card working">
-                    <span>工作版本</span>
-                    <strong>{{ selectedSkill.workingVersion }}</strong>
-                    <b>{{ selectedSkill.reviewStatusLabel }}</b>
-                  </article>
-                </div>
-
-                <section class="version-center-section version-history-section">
-                  <header>
-                    <strong>最近版本</strong>
-                    <small>最近 5 个</small>
-                  </header>
-                  <div class="version-center-list">
-                    <article
-                      v-for="item in selectedSkill.history.slice(0, 5)"
-                      :key="`spreadsheet-version-${item.version}-${item.time}`"
-                      class="version-center-item"
-                      :class="{ active: item.version === selectedSkill.displayVersion }"
-                    >
-                      <button type="button" @click="openVersionSwitch(item)">
-                        <div>
-                          <strong>{{ item.version }}</strong>
-                          <b :class="['version-state', item.lifecycleMeta.tone]">
-                            {{ item.lifecycleMeta.label }}
-                          </b>
-                        </div>
-                        <span>{{ item.time }}</span>
-                        <p>{{ item.note }}</p>
-                      </button>
-                      <footer>
-                        <button type="button" @click="openVersionSwitch(item)">查看</button>
-                        <button
-                          v-if="selectedSkill.publishedVersion && item.version !== selectedSkill.publishedVersion"
-                          type="button"
-                          @click="openVersionCompare({ baseVersion: selectedSkill.publishedVersion, targetVersion: item.version })"
-                        >
-                          与线上比
-                        </button>
-                        <button
-                          v-if="canManageSelected && !item.isWorking"
-                          type="button"
-                          @click="restoreSelectedVersion(item.version)"
-                        >
-                          恢复
-                        </button>
-                      </footer>
-                    </article>
-                  </div>
-                </section>
-
-                <section class="version-center-section compact">
-                  <header>
-                    <strong>最近流转</strong>
-                    <button type="button" @click="openVersionTimeline">查看完整流转</button>
-                  </header>
-                  <div v-if="recentVersionTimelineItems.length" class="version-flow-preview">
-                    <article v-for="item in recentVersionTimelineItems" :key="`${item.event_type}-${item.version}-${item.event_time}`">
-                      <i :class="item.meta.icon"></i>
-                      <div>
-                        <strong>{{ item.meta.label }}</strong>
-                        <span>{{ item.version }} · {{ item.actor }}</span>
-                      </div>
-                      <small>{{ item.timeLabel }}</small>
-                    </article>
-                  </div>
-                  <p v-else class="version-flow-empty">暂无版本流转记录</p>
-                </section>
-              </aside>
-            </div>
-          </section>
+              <aside class="spreadsheet-version-center">
+                <header class="version-center-head">
+                  <div>
+                    <h3>最近修改</h3>
+                    <p>展示最近 30 次在线编辑保存后的具体改动。</p>
+                  </div>
+                </header>
+
+                <section class="version-center-section version-history-section">
+                  <div v-if="selectedSpreadsheetChangeRecords.length" class="version-center-list">
+                    <button
+                      v-for="item in selectedSpreadsheetChangeRecords"
+                      :key="`spreadsheet-change-${item.changed_at}-${item.actor}`"
+                      type="button"
+                      class="version-center-item change-record-item"
+                      @click="openSpreadsheetChangeDetail(item)"
+                    >
+                      <div class="change-record-head">
+                        <div>
+                          <strong>{{ item.actor }}</strong>
+                          <span>{{ item.time }}</span>
+                        </div>
+                        <b>{{ item.changed_cell_count }} 处改动</b>
+                      </div>
+                      <p>{{ item.summary }}</p>
+                      <div v-if="item.previewChanges.length" class="change-record-preview">
+                        <span
+                          v-for="change in item.previewChanges"
+                          :key="`${change.sheet_name}-${change.cell}`"
+                        >
+                          {{ change.sheet_name }}!{{ change.cell }}：
+                          {{ change.before_value ?? '-' }} → {{ change.after_value ?? '-' }}
+                        </span>
+                      </div>
+                      <small v-if="item.remainingChangeCount" class="change-record-more">
+                        另有 {{ item.remainingChangeCount }} 处改动
+                      </small>
+                    </button>
+                  </div>
+                  <p v-else class="version-flow-empty">暂无修改记录</p>
+                </section>
+              </aside>
+            </div>
+          </section>
 
           <div
             v-else
@@ -441,42 +380,8 @@
                     </div>
                   </div>
                 </div>
-
-                <div v-if="selectedSkillIsRule" class="review-action-strip">
-                  <button
-                    class="minor-action"
-                    type="button"
-                    :disabled="!canSubmitReview || detailBusy"
-                    @click="reviewSelectedRule('pending')"
-                  >
-                    <i class="mdi mdi-send-outline"></i>
-                    <span>{{ actionState === 'review-pending' ? '提交中...' : '提交审核' }}</span>
-                  </button>
-                  <button
-                    class="minor-action success-action"
-                    type="button"
-                    :disabled="!canReviewSelected || detailBusy"
-                    @click="reviewSelectedRule('approved')"
-                  >
-                    <i class="mdi mdi-check-decagram-outline"></i>
-                    <span>{{ actionState === 'review-approved' ? '处理中...' : '审核通过' }}</span>
-                  </button>
-                  <button
-                    class="minor-action danger-action"
-                    type="button"
-                    :disabled="!canReviewSelected || detailBusy"
-                    @click="reviewSelectedRule('rejected')"
-                  >
-                    <i class="mdi mdi-close-octagon-outline"></i>
-                    <span>{{ actionState === 'review-rejected' ? '处理中...' : '驳回版本' }}</span>
-                  </button>
-                </div>
-
-                <p v-if="selectedSkillIsRule && activateBlockedReason" class="action-help">
-                  {{ activateBlockedReason }}
-                </p>
               </article>
-            </section>
+            </section>
 
             <aside v-if="selectedSkill.type === 'rules'" class="detail-side skill-review-side">
               <article class="side-card panel review-card">
@@ -613,7 +518,7 @@
               @click="downloadSpreadsheetFile"
             >
               <i class="mdi mdi-file-download-outline"></i>
-              <span>{{ actionState === 'download-spreadsheet' ? '下载中...' : '下载 Excel' }}</span>
+              <span>{{ actionState === 'download-spreadsheet' ? '下载中...' : '下载表格' }}</span>
             </button>
             <button
               v-if="selectedSkill.usesSpreadsheetRule"
@@ -625,7 +530,7 @@
               <i class="mdi mdi-file-upload-outline"></i>
               <span>{{ actionState === 'upload-spreadsheet' ? '导入中...' : '上传表格' }}</span>
             </button>
-            <button
+<button
               v-else
               class="minor-action"
               type="button"
@@ -635,44 +540,7 @@
               <i class="mdi mdi-content-save-outline"></i>
               <span>{{ actionState === 'save-markdown' ? '保存中...' : '保存 Markdown' }}</span>
             </button>
-            <button
-              class="minor-action"
-              type="button"
-              :disabled="!canSubmitReview || detailBusy"
-              @click="reviewSelectedRule('pending')"
-            >
-              <i class="mdi mdi-send-outline"></i>
-              <span>{{ actionState === 'review-pending' ? '提交中...' : '提交审核' }}</span>
-            </button>
-            <button
-              class="minor-action success-action"
-              type="button"
-              :disabled="!canReviewSelected || detailBusy"
-              @click="reviewSelectedRule('approved')"
-            >
-              <i class="mdi mdi-check-decagram-outline"></i>
-              <span>{{ actionState === 'review-approved' ? '处理中...' : '审核通过' }}</span>
-            </button>
-            <button
-              class="minor-action danger-action"
-              type="button"
-              :disabled="!canReviewSelected || detailBusy"
-              @click="reviewSelectedRule('rejected')"
-            >
-              <i class="mdi mdi-close-octagon-outline"></i>
-              <span>{{ actionState === 'review-rejected' ? '处理中...' : '驳回版本' }}</span>
-            </button>
-            <button
-              class="major-action"
-              type="button"
-              :disabled="!canActivateSelected"
-              :title="activateBlockedReason"
-              @click="activateSelectedRule"
-            >
-              <i class="mdi mdi-rocket-launch-outline"></i>
-              <span>{{ actionState === 'activate' ? '上线中...' : selectedSkill.statusValue === 'active' ? '已上线' : '正式上线' }}</span>
-            </button>
-          </div>
+          </div>
 
           <div v-else class="detail-action-group detail-meta-actions">
             <span class="footer-note">{{ selectedSkill.publishMeta }}</span>
@@ -944,61 +812,207 @@
         <strong>{{ versionSwitchTarget.note }}</strong>
         <span>{{ versionSwitchTarget.time }}</span>
       </div>
-    </ConfirmDialog>
+    </ConfirmDialog>
+
+    <ConfirmDialog
+      :open="reviewSubmitOpen"
+      badge="提交审核"
+      badge-tone="info"
+      title="提交规则版本审核"
+      description="请先确认本次送审采用的版本号，并选择负责审核的高级管理员。若填写新的版本号，系统会将当前工作稿固化为该版本后再送审。"
+      cancel-text="取消"
+      confirm-text="确认提交"
+      busy-text="提交中..."
+      confirm-tone="primary"
+      confirm-icon="mdi mdi-send-outline"
+      :busy="actionState === 'review-pending'"
+      @close="closeSubmitReviewDialog"
+      @confirm="submitSelectedRuleForReview"
+    >
+      <div class="review-submit-form">
+        <label>
+          <span>送审版本号</span>
+          <input
+            v-model="reviewSubmitVersion"
+            type="text"
+            placeholder="例如：v1.1.0"
+            :disabled="actionState === 'review-pending'"
+          />
+        </label>
+        <label>
+          <span>审核人</span>
+          <select
+            v-model="reviewSubmitReviewer"
+            :disabled="reviewSubmitReviewerLoading || actionState === 'review-pending'"
+          >
+            <option value="" disabled>
+              {{ reviewSubmitReviewerLoading ? '加载审核人中...' : '请选择高级管理员' }}
+            </option>
+            <option
+              v-for="item in reviewSubmitReviewerOptions"
+              :key="item.value"
+              :value="item.value"
+            >
+              {{ item.label }}
+            </option>
+          </select>
+        </label>
+        <p v-if="!reviewSubmitReviewerLoading && !hasReviewSubmitReviewers" class="review-submit-hint">
+          当前没有可选的高级管理员，请先在员工管理中配置具备管理员角色的员工。
+        </p>
+      </div>
+    </ConfirmDialog>
 
     <Transition name="drawer-fade">
       <div v-if="versionTimelineOpen" class="rule-drawer-backdrop" @click.self="closeVersionTimeline">
-        <aside class="rule-drawer timeline-drawer">
-          <header class="rule-drawer-head">
-            <div>
-              <span>版本治理</span>
-              <h3>版本流转时间线</h3>
-            </div>
-            <button type="button" @click="closeVersionTimeline">
-              <i class="mdi mdi-close"></i>
-            </button>
-          </header>
-
-          <div v-if="versionTimelineLoading" class="rule-drawer-state">
-            <i class="mdi mdi-loading mdi-spin"></i>
-            <span>正在加载版本流转...</span>
-          </div>
-          <div v-else-if="versionTimelineError" class="rule-drawer-state error">
-            <i class="mdi mdi-alert-circle-outline"></i>
-            <span>{{ versionTimelineError }}</span>
+        <aside class="rule-drawer timeline-drawer">
+          <header class="rule-drawer-head">
+            <div>
+              <span>修改记录</span>
+              <h3>文档操作记录</h3>
+            </div>
+            <button type="button" @click="closeVersionTimeline">
+              <i class="mdi mdi-close"></i>
+            </button>
+          </header>
+
+          <div v-if="versionTimelineLoading" class="rule-drawer-state">
+            <i class="mdi mdi-loading mdi-spin"></i>
+            <span>正在加载操作记录...</span>
+          </div>
+          <div v-else-if="versionTimelineError" class="rule-drawer-state error">
+            <i class="mdi mdi-alert-circle-outline"></i>
+            <span>{{ versionTimelineError }}</span>
           </div>
           <div v-else-if="selectedVersionTimelineItems.length" class="rule-timeline-list">
             <article
               v-for="item in selectedVersionTimelineItems"
               :key="`${item.event_type}-${item.version}-${item.event_time}`"
               class="rule-timeline-item"
-            >
-              <i :class="[item.meta.icon, item.meta.tone]"></i>
-              <div>
-                <header>
-                  <strong>{{ item.meta.label }}</strong>
-                  <b>{{ item.version }}</b>
-                  <span>{{ item.timeLabel }}</span>
-                </header>
-                <p>{{ item.description || item.note || '暂无补充说明' }}</p>
-                <small>
-                  操作人：{{ item.actor }}
-                  <template v-if="item.source_version"> · 来源版本：{{ item.source_version }}</template>
-                </small>
-              </div>
-            </article>
-          </div>
-          <div v-else class="rule-drawer-state">
-            <i class="mdi mdi-history"></i>
-            <span>暂无版本流转记录</span>
-          </div>
-        </aside>
-      </div>
+            >
+              <i :class="[item.meta.icon, item.meta.tone]"></i>
+              <div>
+                <header>
+                  <strong>{{ item.meta.label }}</strong>
+                  <span>{{ item.timeLabel }}</span>
+                </header>
+                <p>{{ item.description || item.note || '暂无补充说明' }}</p>
+                <small>
+                  操作人：{{ item.actor }}
+                  <template v-if="item.version"> · 关联版本：{{ item.version }}</template>
+                  <template v-if="item.source_version"> · 来源版本：{{ item.source_version }}</template>
+                </small>
+              </div>
+            </article>
+          </div>
+          <div v-else class="rule-drawer-state">
+            <i class="mdi mdi-history"></i>
+            <span>暂无操作记录</span>
+          </div>
+        </aside>
+      </div>
     </Transition>
 
-    <Transition name="drawer-fade">
-      <div v-if="versionCompareOpen" class="rule-drawer-backdrop" @click.self="closeVersionCompare">
-        <aside class="rule-drawer compare-drawer">
+    <Transition name="drawer-fade">
+      <div
+        v-if="spreadsheetChangeDetailOpen"
+        class="rule-drawer-backdrop"
+        @click.self="closeSpreadsheetChangeDetail"
+      >
+        <aside class="rule-drawer compare-drawer change-detail-drawer">
+          <header class="rule-drawer-head">
+            <div>
+              <span>最近修改</span>
+              <h3>修改详情</h3>
+            </div>
+            <button type="button" @click="closeSpreadsheetChangeDetail">
+              <i class="mdi mdi-close"></i>
+            </button>
+          </header>
+
+          <div v-if="selectedSpreadsheetChangeRecord" class="compare-content change-detail-content">
+            <section class="change-detail-meta">
+              <article>
+                <span>修改人</span>
+                <strong>{{ selectedSpreadsheetChangeRecord.actor }}</strong>
+              </article>
+              <article>
+                <span>修改时间</span>
+                <strong>{{ selectedSpreadsheetChangeRecord.time }}</strong>
+              </article>
+              <article>
+                <span>修改工作表</span>
+                <strong>{{ selectedSpreadsheetChangeRecord.changed_sheet_count }}</strong>
+              </article>
+              <article>
+                <span>变更单元格</span>
+                <strong>{{ selectedSpreadsheetChangeRecord.changed_cell_count }}</strong>
+              </article>
+            </section>
+
+            <section class="compare-panel">
+              <header>
+                <strong>本次修改摘要</strong>
+              </header>
+              <p>{{ selectedSpreadsheetChangeRecord.summary }}</p>
+            </section>
+
+            <section class="compare-panel">
+              <header>
+                <strong>工作表变化</strong>
+              </header>
+              <div v-if="selectedSpreadsheetChangeSheetRows.length" class="compare-sheet-list">
+                <span
+                  v-for="item in selectedSpreadsheetChangeSheetRows"
+                  :key="`${item.sheet_name}-${item.change_type}`"
+                  :class="item.meta.tone"
+                >
+                  {{ item.sheet_name }} · {{ item.meta.label }}
+                </span>
+              </div>
+              <p v-else>本次没有新增或删除工作表。</p>
+            </section>
+
+            <section class="compare-panel compare-cell-panel">
+              <header>
+                <strong>单元格差异</strong>
+                <small>最多展示前 500 条</small>
+              </header>
+              <div v-if="selectedSpreadsheetChangeCellRows.length" class="compare-table-wrap">
+                <table>
+                  <thead>
+                    <tr>
+                      <th>工作表</th>
+                      <th>位置</th>
+                      <th>类型</th>
+                      <th>旧值</th>
+                      <th>新值</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr
+                      v-for="item in selectedSpreadsheetChangeCellRows"
+                      :key="`${item.sheet_name}-${item.cell}`"
+                    >
+                      <td>{{ item.sheet_name }}</td>
+                      <td>{{ item.cell }}</td>
+                      <td><b :class="item.meta.tone">{{ item.meta.label }}</b></td>
+                      <td>{{ item.before_value ?? '-' }}</td>
+                      <td>{{ item.after_value ?? '-' }}</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <p v-else>本次没有发现单元格级差异。</p>
+            </section>
+          </div>
+        </aside>
+      </div>
+    </Transition>
+
+    <Transition name="drawer-fade">
+      <div v-if="versionCompareOpen" class="rule-drawer-backdrop" @click.self="closeVersionCompare">
+        <aside class="rule-drawer compare-drawer">
           <header class="rule-drawer-head">
             <div>
               <span>版本治理</span>
@@ -1041,82 +1055,82 @@
             <i class="mdi mdi-loading mdi-spin"></i>
             <span>正在生成版本差异...</span>
           </div>
-          <div v-else-if="versionCompareError" class="rule-drawer-state error">
-            <i class="mdi mdi-alert-circle-outline"></i>
-            <span>{{ versionCompareError }}</span>
-          </div>
-          <template v-else-if="versionComparePayload">
-            <section class="compare-summary-grid">
-              <article>
-                <span>新增工作表</span>
-                <strong>{{ versionComparePayload.added_sheet_count }}</strong>
-              </article>
-              <article>
-                <span>删除工作表</span>
-                <strong>{{ versionComparePayload.removed_sheet_count }}</strong>
-              </article>
-              <article>
-                <span>修改工作表</span>
-                <strong>{{ versionComparePayload.changed_sheet_count }}</strong>
-              </article>
-              <article>
-                <span>变更单元格</span>
-                <strong>{{ versionComparePayload.changed_cell_count }}</strong>
-              </article>
-            </section>
-
-            <section class="compare-panel">
-              <header>
-                <strong>工作表变化</strong>
-              </header>
-              <div v-if="versionCompareSheetRows.length" class="compare-sheet-list">
-                <span
-                  v-for="item in versionCompareSheetRows"
-                  :key="`${item.sheet_name}-${item.change_type}`"
-                  :class="item.meta.tone"
-                >
-                  {{ item.sheet_name }} · {{ item.meta.label }}
-                </span>
-              </div>
-              <p v-else>没有新增或删除工作表。</p>
-            </section>
-
-            <section class="compare-panel">
-              <header>
-                <strong>单元格差异</strong>
-                <small>最多展示前 500 条</small>
-              </header>
-              <div v-if="versionCompareCellRows.length" class="compare-table-wrap">
-                <table>
-                  <thead>
-                    <tr>
-                      <th>工作表</th>
-                      <th>位置</th>
-                      <th>类型</th>
-                      <th>旧值</th>
-                      <th>新值</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr
-                      v-for="item in versionCompareCellRows"
-                      :key="`${item.sheet_name}-${item.cell}`"
-                    >
-                      <td>{{ item.sheet_name }}</td>
-                      <td>{{ item.cell }}</td>
-                      <td><b :class="item.meta.tone">{{ item.meta.label }}</b></td>
-                      <td>{{ item.before_value ?? '-' }}</td>
-                      <td>{{ item.after_value ?? '-' }}</td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-              <p v-else>两个版本内容一致，没有发现单元格级差异。</p>
-            </section>
-          </template>
-        </aside>
-      </div>
-    </Transition>
+          <div v-else-if="versionCompareError" class="rule-drawer-state error">
+            <i class="mdi mdi-alert-circle-outline"></i>
+            <span>{{ versionCompareError }}</span>
+          </div>
+          <div v-else-if="versionComparePayload" class="compare-content">
+            <section class="compare-summary-grid">
+              <article>
+                <span>新增工作表</span>
+                <strong>{{ versionComparePayload.added_sheet_count }}</strong>
+              </article>
+              <article>
+                <span>删除工作表</span>
+                <strong>{{ versionComparePayload.removed_sheet_count }}</strong>
+              </article>
+              <article>
+                <span>修改工作表</span>
+                <strong>{{ versionComparePayload.changed_sheet_count }}</strong>
+              </article>
+              <article>
+                <span>变更单元格</span>
+                <strong>{{ versionComparePayload.changed_cell_count }}</strong>
+              </article>
+            </section>
+
+            <section class="compare-panel">
+              <header>
+                <strong>工作表变化</strong>
+              </header>
+              <div v-if="versionCompareSheetRows.length" class="compare-sheet-list">
+                <span
+                  v-for="item in versionCompareSheetRows"
+                  :key="`${item.sheet_name}-${item.change_type}`"
+                  :class="item.meta.tone"
+                >
+                  {{ item.sheet_name }} · {{ item.meta.label }}
+                </span>
+              </div>
+              <p v-else>没有新增或删除工作表。</p>
+            </section>
+
+            <section class="compare-panel compare-cell-panel">
+              <header>
+                <strong>单元格差异</strong>
+                <small>最多展示前 500 条</small>
+              </header>
+              <div v-if="versionCompareCellRows.length" class="compare-table-wrap">
+                <table>
+                  <thead>
+                    <tr>
+                      <th>工作表</th>
+                      <th>位置</th>
+                      <th>类型</th>
+                      <th>旧值</th>
+                      <th>新值</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr
+                      v-for="item in versionCompareCellRows"
+                      :key="`${item.sheet_name}-${item.cell}`"
+                    >
+                      <td>{{ item.sheet_name }}</td>
+                      <td>{{ item.cell }}</td>
+                      <td><b :class="item.meta.tone">{{ item.meta.label }}</b></td>
+                      <td>{{ item.before_value ?? '-' }}</td>
+                      <td>{{ item.after_value ?? '-' }}</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <p v-else>两个版本内容一致，没有发现单元格级差异。</p>
+            </section>
+          </div>
+        </aside>
+      </div>
+    </Transition>
   </section>
 </template>