feat(agent_assets): 添加规则版本送审时的命名副本创建逻辑

当提交的版本与当前工作版本不同时，自动创建命名副本： - 新增 _create_named_working_copy_for_review 方法处理送审时的版本复制 - 支持将工作版本快照复制为指定版本进行送审 - 新增 AgentAssetSpreadsheetChangeRecordRead schema - API 端点新增 /rules/{id}/spreadsheet-versions/{version}/change-records 接口
2026-05-18 09:42:23 +00:00
parent 64ec27949f
commit 5106d286a1
7 changed files with 1039 additions and 72 deletions
--- a/web/src/assets/styles/views/audit-view.css
+++ b/web/src/assets/styles/views/audit-view.css
@@ -947,7 +947,7 @@ tbody tr.spotlight {
  height: 100%;
  align-self: stretch;
  display: grid;
-  grid-template-rows: auto auto minmax(0, 1fr) auto;
+  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  padding: 14px;
  border: 1px solid #dbe4ee;
@@ -1101,6 +1101,10 @@ tbody tr.spotlight {
  cursor: pointer;
 }

+.version-center-item > button:disabled {
+  cursor: default;
+}
+
 .version-center-item > button div {
  display: flex;
  align-items: center;
@@ -1115,7 +1119,8 @@ tbody tr.spotlight {
 }

 .version-center-item > button span,
-.version-center-item > button p {
+.version-center-item > button p,
+.version-center-item > button small {
  color: #64748b;
  font-size: 11px;
 }
@@ -1125,70 +1130,129 @@ tbody tr.spotlight {
  line-height: 1.45;
 }

-.version-center-item footer {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.version-center-item footer button {
-  min-height: 24px;
-  padding: 0 9px;
-  border: 0;
-  border-radius: 999px;
-  background: #f1f5f9;
-  color: #475569;
+.change-record-summary-empty {
+  color: #64748b;
  font-size: 11px;
-  font-weight: 850;
+  line-height: 1.5;
+}
+
+.change-record-item {
+  gap: 10px;
+  width: 100%;
+  border: 1px solid #e2e8f0;
+  background: #fff;
+  color: inherit;
+  text-align: left;
  cursor: pointer;
+  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
 }

-.version-center-item footer button:nth-child(2) {
-  background: #eef2ff;
-  color: #4f46e5;
+.change-record-item:hover {
+  border-color: rgba(16, 185, 129, 0.35);
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
+  transform: translateY(-1px);
 }

-.version-center-item footer button:nth-child(3) {
-  background: #fff7ed;
-  color: #ea580c;
+.change-record-item:focus-visible {
+  outline: 3px solid rgba(16, 185, 129, 0.18);
+  outline-offset: 1px;
 }

-.version-flow-preview {
+.change-record-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.change-record-head > div {
  display: grid;
-  gap: 8px;
+  gap: 3px;
 }

-.version-flow-preview article {
-  display: grid;
-  grid-template-columns: 22px minmax(0, 1fr);
-  gap: 8px;
-  align-items: start;
-}
-
-.version-flow-preview i {
-  color: #2563eb;
-  font-size: 16px;
-}
-
-.version-flow-preview div {
-  display: grid;
-  gap: 2px;
-}
-
-.version-flow-preview strong {
+.change-record-head strong {
  color: #0f172a;
-  font-size: 12px;
+  font-size: 13px;
+  font-weight: 900;
 }

-.version-flow-preview span,
-.version-flow-preview small,
-.version-flow-empty {
+.change-record-head span,
+.change-record-item p,
+.change-record-more {
  color: #64748b;
  font-size: 11px;
 }

-.version-flow-preview small {
-  grid-column: 2;
+.change-record-head b {
+  min-height: 22px;
+  display: inline-flex;
+  align-items: center;
+  padding: 0 8px;
+  border-radius: 999px;
+  background: #eef2ff;
+  color: #4f46e5;
+  font-size: 11px;
+  font-weight: 850;
+}
+
+.change-record-item p {
+  margin: 0;
+  line-height: 1.5;
+}
+
+.change-record-preview {
+  display: grid;
+  gap: 6px;
+}
+
+.change-record-preview span {
+  display: block;
+  padding: 7px 8px;
+  border-radius: 10px;
+  background: #f8fafc;
+  color: #334155;
+  font-size: 11px;
+  line-height: 1.45;
+  overflow-wrap: anywhere;
+}
+
+.change-record-more {
+  font-weight: 800;
+}
+
+.change-detail-content {
+  gap: 14px;
+}
+
+.change-detail-meta {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.change-detail-meta article {
+  display: grid;
+  gap: 4px;
+  min-height: 0;
+  padding: 10px 12px;
+  border-radius: 14px;
+  background: #f8fafc;
+}
+
+.change-detail-meta span {
+  color: #64748b;
+  font-size: 12px;
+}
+
+.change-detail-meta strong {
+  color: #0f172a;
+  font-size: 15px;
+  font-weight: 900;
+}
+
+.version-flow-empty {
+  color: #64748b;
+  font-size: 11px;
 }

 .rule-drawer-backdrop {
@@ -1381,6 +1445,13 @@ tbody tr.spotlight {
  color: #94a3b8;
 }

+.compare-content {
+  min-height: 0;
+  display: grid;
+  grid-template-rows: auto auto minmax(0, 1fr);
+  gap: 18px;
+}
+
 .compare-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -1390,8 +1461,9 @@ tbody tr.spotlight {
 .compare-summary-grid article {
  display: grid;
  gap: 4px;
-  min-height: 76px;
-  padding: 12px;
+  align-content: center;
+  min-height: 0;
+  padding: 10px 12px;
  border-radius: 14px;
  background: #f8fafc;
 }
@@ -1403,8 +1475,9 @@ tbody tr.spotlight {

 .compare-summary-grid strong {
  color: #0f172a;
-  font-size: 24px;
+  font-size: 22px;
  font-weight: 950;
+  line-height: 1.1;
 }

 .compare-panel {
@@ -1412,6 +1485,11 @@ tbody tr.spotlight {
  gap: 10px;
 }

+.compare-cell-panel {
+  min-height: 0;
+  grid-template-rows: auto minmax(0, 1fr);
+}
+
 .compare-panel header {
  display: flex;
  align-items: center;
@@ -1475,6 +1553,7 @@ tbody tr.spotlight {
 }

 .compare-table-wrap {
+  min-height: 0;
  overflow: auto;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
@@ -1528,6 +1607,51 @@ tbody tr.spotlight {
  color: #dc2626;
 }

+.review-submit-form {
+  display: grid;
+  gap: 12px;
+}
+
+.review-submit-form label {
+  display: grid;
+  gap: 7px;
+}
+
+.review-submit-form label span {
+  color: #475569;
+  font-size: 12px;
+  font-weight: 850;
+}
+
+.review-submit-form input,
+.review-submit-form select {
+  width: 100%;
+  min-height: 42px;
+  padding: 0 12px;
+  border: 1px solid #cbd5e1;
+  border-radius: 12px;
+  background: #fff;
+  color: #0f172a;
+  font-size: 14px;
+}
+
+.review-submit-form input:focus,
+.review-submit-form select:focus {
+  outline: 0;
+  border-color: rgba(16, 185, 129, 0.5);
+  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
+}
+
+.review-submit-hint {
+  margin: 0;
+  padding: 10px 12px;
+  border-radius: 12px;
+  background: #fff7ed;
+  color: #c2410c;
+  font-size: 12px;
+  line-height: 1.6;
+}
+
@media (max-width: 1280px) {
  .spreadsheet-editor-body {
    grid-template-columns: 1fr;
@@ -1543,6 +1667,10 @@ tbody tr.spotlight {
  .compare-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
+
+  .change-detail-meta {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }

 .rule-spreadsheet-toolbar {
@@ -1924,8 +2052,8 @@ tbody tr.spotlight {
  padding: 0 9px;
  border: 0;
  border-radius: 999px;
-  background: #eef2ff;
-  color: #4f46e5;
+  background: #fff7ed;
+  color: #ea580c;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
--- a/web/src/services/agentAssets.js
+++ b/web/src/services/agentAssets.js
@@ -144,6 +144,12 @@ export function compareAgentAssetSpreadsheetVersions(assetId, baseVersion, targe
  return apiRequest(`/agent-assets/${assetId}/versions/compare?${query.toString()}`)
 }

+export function fetchAgentAssetSpreadsheetChangeRecords(assetId, limit = 30) {
+  return apiRequest(
+    `/agent-assets/${assetId}/spreadsheet/change-records${buildQuery({ limit })}`
+  )
+}
+
 export function updateAgentAsset(assetId, payload, options = {}) {
  return apiRequest(`/agent-assets/${assetId}`, {
    method: 'PATCH',
--- a/web/src/views/scripts/AuditView.js
+++ b/web/src/views/scripts/AuditView.js
@@ -1,6 +1,7 @@
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'

 import ConfirmDialog from '../../components/shared/ConfirmDialog.vue'
+import { fetchEmployees } from '../../services/employees.js'
 import TableEmptyState from '../../components/shared/TableEmptyState.vue'
 import { useSystemState } from '../../composables/useSystemState.js'
 import { useToast } from '../../composables/useToast.js'
@@ -12,6 +13,7 @@ import {
  fetchAgentAssetDetail,
  fetchAgentAssets,
  fetchAgentAssetSpreadsheetBlob,
+  fetchAgentAssetSpreadsheetChangeRecords,
  fetchAgentAssetSpreadsheetOnlyOfficeConfig,
  fetchAgentAssetVersionTimeline,
  fetchAgentRuns,
@@ -1381,6 +1383,11 @@ export default {
    const detailLoading = ref(false)
    const detailError = ref('')
    const actionState = ref('')
+    const reviewSubmitOpen = ref(false)
+    const reviewSubmitVersion = ref('')
+    const reviewSubmitReviewer = ref('')
+    const reviewSubmitReviewerLoading = ref(false)
+    const reviewSubmitReviewerOptions = ref([])
    const runLoading = ref(false)
    const runs = ref([])
    const spreadsheetUploadInput = ref(null)
@@ -1399,6 +1406,15 @@ export default {
    const versionComparePayload = ref(null)
    const compareBaseVersion = ref('')
    const compareTargetVersion = ref('')
+    const spreadsheetChangeRecordsByAsset = ref({})
+    const spreadsheetChangeDetailOpen = ref(false)
+    const selectedSpreadsheetChangeRecord = ref(null)
+    let spreadsheetOnlyOfficeMountSeq = 0
+    let spreadsheetOnlyOfficeLoadTimer = null
+    let spreadsheetOnlyOfficeHadLocalEdits = false
+    let spreadsheetOnlyOfficeSyncSeq = 0
+    let spreadsheetOnlyOfficeVersionPollTimer = null
+    let spreadsheetOnlyOfficeRefreshTimer = null
    const assetBuckets = ref({
      financialRules: [],
      riskRules: [],
@@ -1437,6 +1453,7 @@ export default {
    const canSubmitReview = computed(
      () => canEditSelected.value && selectedSkillIsRule.value && isDisplayingWorkingVersion.value
    )
+    const hasReviewSubmitReviewers = computed(() => reviewSubmitReviewerOptions.value.length > 0)
    const canReviewSelected = computed(
      () => canManageSelected.value && selectedSkillIsRule.value && isDisplayingWorkingVersion.value
    )
@@ -1471,11 +1488,11 @@ export default {
    )
    const selectedSpreadsheetVersionModeLabel = computed(() => {
      if (selectedSkill.value?.isPreviewMock) {
-        return canEditSpreadsheetInline.value ? 'ONLYOFFICE 可编辑预览' : 'ONLYOFFICE 历史预览'
+        return canEditSpreadsheetInline.value ? 'ONLYOFFICE 可编辑' : 'ONLYOFFICE 预览'
      }
      return selectedSkill.value?.displayVersion === selectedSkill.value?.workingVersion
-        ? '当前工作版本'
-        : '历史预览版本'
+        ? '在线可编辑'
+        : '只读预览'
    })
    const selectedVersionTimelineItems = computed(() =>
      versionTimelineItems.value.map((item) => ({
@@ -1484,8 +1501,34 @@ export default {
        timeLabel: formatDateTime(item.event_time)
      }))
    )
-    const recentVersionTimelineItems = computed(() =>
-      [...selectedVersionTimelineItems.value].slice(-3).reverse()
+    const selectedSpreadsheetChangeRecords = computed(() => {
+      if (!selectedSkillUsesSpreadsheet.value || !selectedSkill.value?.id) {
+        return []
+      }
+      return (spreadsheetChangeRecordsByAsset.value[selectedSkill.value.id] || [])
+        .filter((item) => item?.changed_at)
+        .map((item) => ({
+          ...item,
+          time: formatDateTime(item.changed_at),
+          previewChanges: Array.isArray(item.cell_changes) ? item.cell_changes.slice(0, 3) : [],
+          remainingChangeCount: Math.max((item.changed_cell_count || 0) - 3, 0)
+        }))
+    })
+    const selectedSpreadsheetChangeSheetRows = computed(() =>
+      Array.isArray(selectedSpreadsheetChangeRecord.value?.sheet_changes)
+        ? selectedSpreadsheetChangeRecord.value.sheet_changes.map((item) => ({
+            ...item,
+            meta: resolveDiffChangeMeta(item.change_type)
+          }))
+        : []
+    )
+    const selectedSpreadsheetChangeCellRows = computed(() =>
+      Array.isArray(selectedSpreadsheetChangeRecord.value?.cell_changes)
+        ? selectedSpreadsheetChangeRecord.value.cell_changes.map((item) => ({
+            ...item,
+            meta: resolveDiffChangeMeta(item.change_type)
+          }))
+        : []
    )
    const versionCompareCellRows = computed(() =>
      Array.isArray(versionComparePayload.value?.cell_changes)
@@ -1663,6 +1706,7 @@ export default {
    )

    watch(activeType, () => {
+      stopSpreadsheetOnlyOfficeDeferredRefresh()
      destroySpreadsheetOnlyOfficeEditor()
      selectedSkill.value = null
      versionSwitchTarget.value = null
@@ -1750,6 +1794,14 @@ export default {
    }

    function destroySpreadsheetOnlyOfficeEditor() {
+      if (spreadsheetOnlyOfficeLoadTimer) {
+        window.clearTimeout(spreadsheetOnlyOfficeLoadTimer)
+        spreadsheetOnlyOfficeLoadTimer = null
+      }
+      stopSpreadsheetOnlyOfficeVersionSync()
+      clearSpreadsheetPendingChangeRecord(selectedSkill.value?.id, selectedSkill.value?.displayVersion)
+      spreadsheetOnlyOfficeHadLocalEdits = false
+      spreadsheetOnlyOfficeSyncSeq += 1
      if (spreadsheetOnlyOfficeEditor.value?.destroyEditor) {
        spreadsheetOnlyOfficeEditor.value.destroyEditor()
      }
@@ -1757,43 +1809,281 @@ export default {
      spreadsheetOnlyOfficeReady.value = false
    }

-    async function mountSpreadsheetOnlyOfficeEditor() {
+    function appendSpreadsheetChangeRecord(record) {
+      const assetId = normalizeText(record?.assetId)
+      const version = normalizeText(record?.version)
+      if (!assetId || !version) {
+        return
+      }
+
+      const nextRecord = {
+        version,
+        operationLabel: normalizeText(record?.operationLabel) || '表格修改',
+        operationActor: normalizeText(record?.operationActor) || resolveActor(),
+        note: normalizeText(record?.note) || '用户修改了表格内容。',
+        time: record?.time || new Date().toISOString(),
+        isWorking: record?.isWorking !== false,
+        isPendingLocalEdit: Boolean(record?.isPendingLocalEdit),
+        disabledReason: normalizeText(record?.disabledReason)
+      }
+
+      const current = spreadsheetChangeRecordsByAsset.value[assetId] || []
+      const deduped = current.filter(
+        (item) =>
+          !(
+            item.version === nextRecord.version &&
+            item.operationLabel === nextRecord.operationLabel &&
+            item.note === nextRecord.note
+          )
+      )
+      spreadsheetChangeRecordsByAsset.value = {
+        ...spreadsheetChangeRecordsByAsset.value,
+        [assetId]: [nextRecord, ...deduped].slice(0, 5)
+      }
+    }
+
+    function clearSpreadsheetPendingChangeRecord(assetId, version) {
+      const normalizedAssetId = normalizeText(assetId)
+      const normalizedVersion = normalizeText(version)
+      if (!normalizedAssetId) {
+        return
+      }
+
+      const current = spreadsheetChangeRecordsByAsset.value[normalizedAssetId] || []
+      spreadsheetChangeRecordsByAsset.value = {
+        ...spreadsheetChangeRecordsByAsset.value,
+        [normalizedAssetId]: current.filter(
+          (item) => !(item.isPendingLocalEdit && (!normalizedVersion || item.version === normalizedVersion))
+        )
+      }
+    }
+
+    function markSpreadsheetPendingChange(assetId, version) {
+      const normalizedAssetId = normalizeText(assetId)
+      const normalizedVersion = normalizeText(version)
+      if (!normalizedAssetId || !normalizedVersion) {
+        return
+      }
+
+      clearSpreadsheetPendingChangeRecord(normalizedAssetId, normalizedVersion)
+      appendSpreadsheetChangeRecord({
+        assetId: normalizedAssetId,
+        version: normalizedVersion,
+        operationLabel: '编辑中',
+        operationActor: resolveActor(),
+        note: '检测到未保存的表格改动，保存后会生成新版本并可查看差异。',
+        time: new Date().toISOString(),
+        isWorking: true,
+        isPendingLocalEdit: true,
+        disabledReason: '当前是本地未保存修改，保存后才会生成可对比的版本。'
+      })
+    }
+
+    function stopSpreadsheetOnlyOfficeVersionSync() {
+      if (spreadsheetOnlyOfficeVersionPollTimer) {
+        window.clearTimeout(spreadsheetOnlyOfficeVersionPollTimer)
+        spreadsheetOnlyOfficeVersionPollTimer = null
+      }
+    }
+
+    function stopSpreadsheetOnlyOfficeDeferredRefresh() {
+      if (spreadsheetOnlyOfficeRefreshTimer) {
+        window.clearTimeout(spreadsheetOnlyOfficeRefreshTimer)
+        spreadsheetOnlyOfficeRefreshTimer = null
+      }
+    }
+
+    function getLatestSpreadsheetChangeKey(assetId) {
+      const records = spreadsheetChangeRecordsByAsset.value[assetId] || []
+      const latest = records.find((item) => item?.changed_at)
+      return latest ? `${latest.changed_at}-${latest.actor}-${latest.summary}` : ''
+    }
+
+    async function refreshSpreadsheetChangeRecordsAfterSave(assetId, previousLatestKey = '', attempt = 0) {
+      const normalizedAssetId = normalizeText(assetId)
+      if (!normalizedAssetId || selectedSkill.value?.id !== normalizedAssetId) {
+        return
+      }
+
+      await loadSpreadsheetChangeRecords(normalizedAssetId)
+      const nextLatestKey = getLatestSpreadsheetChangeKey(normalizedAssetId)
+      if (nextLatestKey && nextLatestKey !== previousLatestKey) {
+        return
+      }
+      if (attempt >= 9) {
+        return
+      }
+      await new Promise((resolve) => window.setTimeout(resolve, 800))
+      return refreshSpreadsheetChangeRecordsAfterSave(normalizedAssetId, previousLatestKey, attempt + 1)
+    }
+
+    function scheduleSpreadsheetEditorRefreshAfterSave(assetId, savedVersion) {
+      const normalizedAssetId = normalizeText(assetId)
+      const normalizedSavedVersion = normalizeText(savedVersion)
+      if (!normalizedAssetId || !normalizedSavedVersion) {
+        return
+      }
+
+      stopSpreadsheetOnlyOfficeDeferredRefresh()
+      spreadsheetOnlyOfficeRefreshTimer = window.setTimeout(async () => {
+        spreadsheetOnlyOfficeRefreshTimer = null
+        if (
+          selectedSkill.value?.id !== normalizedAssetId ||
+          selectedSkill.value?.displayVersion === normalizedSavedVersion
+        ) {
+          return
+        }
+
+        await loadSelectedAssetDetail(normalizedAssetId)
+      }, 3200)
+    }
+
+    function scheduleSpreadsheetOnlyOfficeVersionSync(assetId, version, attempt = 0) {
+      const normalizedAssetId = normalizeText(assetId)
+      const normalizedVersion = normalizeText(version)
+      if (!normalizedAssetId || !normalizedVersion) {
+        return
+      }
+
+      const syncSeq = ++spreadsheetOnlyOfficeSyncSeq
+      stopSpreadsheetOnlyOfficeVersionSync()
+      const previousLatestChangeKey = getLatestSpreadsheetChangeKey(normalizedAssetId)
+
+      const runSync = async () => {
+        if (syncSeq !== spreadsheetOnlyOfficeSyncSeq || selectedSkill.value?.id !== normalizedAssetId) {
+          return
+        }
+
+        try {
+          const detail = await fetchAgentAssetDetail(normalizedAssetId)
+          const nextWorkingVersion = normalizeText(detail?.working_version || detail?.current_version)
+          if (nextWorkingVersion && nextWorkingVersion !== normalizedVersion) {
+            clearSpreadsheetPendingChangeRecord(normalizedAssetId, normalizedVersion)
+            await refreshCurrentAssets()
+            await refreshSpreadsheetChangeRecordsAfterSave(normalizedAssetId, previousLatestChangeKey)
+            if (syncSeq !== spreadsheetOnlyOfficeSyncSeq || selectedSkill.value?.id !== normalizedAssetId) {
+              return
+            }
+            // ONLYOFFICE 的保存回调刚结束时立即销毁并重挂编辑器，偶发会让新文档会话
+            // 还没完全就绪就被再次打开，表现为“加载超时”。先刷新右侧修改记录，再留
+            // 一个很短的缓冲窗口后切换到新工作版本，用户无需退出重进。
+            scheduleSpreadsheetEditorRefreshAfterSave(normalizedAssetId, nextWorkingVersion)
+            stopSpreadsheetOnlyOfficeVersionSync()
+            return
+          }
+        } catch {
+          // Ignore transient polling failures and continue retrying within the window.
+        }
+
+        if (syncSeq !== spreadsheetOnlyOfficeSyncSeq || selectedSkill.value?.id !== normalizedAssetId) {
+          return
+        }
+        if (attempt >= 29) {
+          return
+        }
+        spreadsheetOnlyOfficeVersionPollTimer = window.setTimeout(() => {
+          scheduleSpreadsheetOnlyOfficeVersionSync(normalizedAssetId, normalizedVersion, attempt + 1)
+        }, 2000)
+      }
+
+      spreadsheetOnlyOfficeVersionPollTimer = window.setTimeout(() => {
+        runSync().catch(() => {})
+      }, attempt === 0 ? 800 : 2000)
+    }
+
+    function isSpreadsheetOnlyOfficeMountStale(mountSeq, assetId, version) {
+      return (
+        mountSeq !== spreadsheetOnlyOfficeMountSeq ||
+        !selectedSkillUsesSpreadsheet.value ||
+        selectedSkill.value?.id !== assetId ||
+        selectedSkill.value?.displayVersion !== version ||
+        selectedSkill.value?.loading
+      )
+    }
+
+    async function mountSpreadsheetOnlyOfficeEditor(retryAttempt = 0) {
      if (!selectedSkillUsesSpreadsheet.value || !selectedSkill.value?.id || selectedSkill.value?.loading) {
        destroySpreadsheetOnlyOfficeEditor()
        return
      }

+      const mountSeq = ++spreadsheetOnlyOfficeMountSeq
+      const assetId = selectedSkill.value.id
+      const version = selectedSkill.value.displayVersion
+      const editable = canEditSpreadsheetInline.value
+
      spreadsheetOnlyOfficeLoading.value = true
      spreadsheetOnlyOfficeError.value = ''
      spreadsheetOnlyOfficeReady.value = false
      destroySpreadsheetOnlyOfficeEditor()

      try {
-        const payload = await fetchAgentAssetSpreadsheetOnlyOfficeConfig(
-          selectedSkill.value.id,
-          selectedSkill.value.displayVersion
-        )
+        const payload = await fetchAgentAssetSpreadsheetOnlyOfficeConfig(assetId, version)
+        if (isSpreadsheetOnlyOfficeMountStale(mountSeq, assetId, version)) {
+          return
+        }
+
        await loadOnlyOfficeApi(payload.documentServerUrl)
+        if (isSpreadsheetOnlyOfficeMountStale(mountSeq, assetId, version)) {
+          return
+        }
        if (!window.DocsAPI?.DocEditor) {
          throw new Error('ONLYOFFICE 编辑器未正确加载。')
        }

-        spreadsheetOnlyOfficeHostId.value = `audit-rule-onlyoffice-${selectedSkill.value.id}-${selectedSkill.value.displayVersion}`
+        // Host id must be unique for every mount. ONLYOFFICE mutates its host DOM
+        // during lifecycle teardown; reusing the same element can leave the next
+        // DocEditor instance with a dead container even though config loading succeeds.
+        spreadsheetOnlyOfficeHostId.value = `audit-rule-onlyoffice-${assetId}-${version}-${mountSeq}`
        await nextTick()
+        if (isSpreadsheetOnlyOfficeMountStale(mountSeq, assetId, version)) {
+          return
+        }
+
        const config = buildOnlyOfficeEditorConfig(payload.config, {
          viewportHeight: window.innerHeight,
-          editable: canEditSpreadsheetInline.value,
+          editable,
          fillContainer: true
        })
        const upstreamEvents = config.events || {}
+        spreadsheetOnlyOfficeLoadTimer = window.setTimeout(() => {
+          if (isSpreadsheetOnlyOfficeMountStale(mountSeq, assetId, version)) {
+            return
+          }
+          if (retryAttempt < 1) {
+            destroySpreadsheetOnlyOfficeEditor()
+            spreadsheetOnlyOfficeLoading.value = true
+            window.setTimeout(() => {
+              mountSpreadsheetOnlyOfficeEditor(retryAttempt + 1).catch(() => {})
+            }, 600)
+            return
+          }
+          spreadsheetOnlyOfficeError.value = 'ONLYOFFICE 加载超时，请重新切换版本后重试。'
+          spreadsheetOnlyOfficeLoading.value = false
+          destroySpreadsheetOnlyOfficeEditor()
+        }, 15000)
        config.events = {
          ...upstreamEvents,
          onAppReady(event) {
+            if (isSpreadsheetOnlyOfficeMountStale(mountSeq, assetId, version)) {
+              return
+            }
+            if (spreadsheetOnlyOfficeLoadTimer) {
+              window.clearTimeout(spreadsheetOnlyOfficeLoadTimer)
+              spreadsheetOnlyOfficeLoadTimer = null
+            }
            spreadsheetOnlyOfficeReady.value = true
            spreadsheetOnlyOfficeLoading.value = false
            upstreamEvents.onAppReady?.(event)
          },
          onError(event) {
+            if (isSpreadsheetOnlyOfficeMountStale(mountSeq, assetId, version)) {
+              return
+            }
+            if (spreadsheetOnlyOfficeLoadTimer) {
+              window.clearTimeout(spreadsheetOnlyOfficeLoadTimer)
+              spreadsheetOnlyOfficeLoadTimer = null
+            }
            const errorCode = event?.data?.errorCode
            const errorDescription = event?.data?.errorDescription
            spreadsheetOnlyOfficeError.value = errorDescription
@@ -1801,13 +2091,37 @@ export default {
              : `ONLYOFFICE 加载失败${errorCode ? `（错误码 ${errorCode}）` : '。'}`
            spreadsheetOnlyOfficeLoading.value = false
            upstreamEvents.onError?.(event)
+          },
+          onDocumentStateChange(event) {
+            const hasChanges = Boolean(event?.data)
+            if (hasChanges) {
+              spreadsheetOnlyOfficeHadLocalEdits = true
+              markSpreadsheetPendingChange(assetId, version)
+              if (!spreadsheetOnlyOfficeVersionPollTimer) {
+                scheduleSpreadsheetOnlyOfficeVersionSync(assetId, version)
+              }
+            } else if (
+              spreadsheetOnlyOfficeHadLocalEdits &&
+              editable &&
+              !isSpreadsheetOnlyOfficeMountStale(mountSeq, assetId, version)
+            ) {
+              spreadsheetOnlyOfficeHadLocalEdits = false
+              scheduleSpreadsheetOnlyOfficeVersionSync(assetId, version)
+            }
+            upstreamEvents.onDocumentStateChange?.(event)
          }
        }
        spreadsheetOnlyOfficeEditor.value = new window.DocsAPI.DocEditor(
          spreadsheetOnlyOfficeHostId.value,
          config
        )
+        if (isSpreadsheetOnlyOfficeMountStale(mountSeq, assetId, version)) {
+          destroySpreadsheetOnlyOfficeEditor()
+        }
      } catch (error) {
+        if (isSpreadsheetOnlyOfficeMountStale(mountSeq, assetId, version)) {
+          return
+        }
        spreadsheetOnlyOfficeError.value = error?.message || '规则表加载失败，请稍后重试。'
        spreadsheetOnlyOfficeLoading.value = false
        toast(spreadsheetOnlyOfficeError.value)
@@ -1860,6 +2174,7 @@ export default {
        })
        await refreshCurrentAssets()
        await loadSelectedAssetDetail(selectedSkill.value.id)
+        await loadSpreadsheetChangeRecords(selectedSkill.value.id)
        toast(`已导入 ${file.name} 的表格内容，并生成新版本。`)
      } catch (error) {
        toast(error?.message || '规则表内容导入失败，请稍后重试。')
@@ -1959,6 +2274,9 @@ export default {
        selectedSkill.value = buildDetailViewModel(detail, runs.value)
        if (selectedSkill.value?.type === 'rules') {
          loadVersionTimeline(assetId, { silent: true }).catch(() => {})
+          if (selectedSkill.value.usesSpreadsheetRule) {
+            loadSpreadsheetChangeRecords(assetId).catch(() => {})
+          }
        }
      } catch (error) {
        detailError.value = error?.message || '资产详情加载失败，请稍后重试。'
@@ -1968,7 +2286,31 @@ export default {
      }
    }

+    async function loadSpreadsheetChangeRecords(assetId) {
+      if (!assetId) {
+        return
+      }
+      const payload = await fetchAgentAssetSpreadsheetChangeRecords(assetId, 30)
+      spreadsheetChangeRecordsByAsset.value = {
+        ...spreadsheetChangeRecordsByAsset.value,
+        [assetId]: Array.isArray(payload) ? payload : []
+      }
+    }
+
+    function openSpreadsheetChangeDetail(item) {
+      if (!item?.changed_at) {
+        return
+      }
+      selectedSpreadsheetChangeRecord.value = item
+      spreadsheetChangeDetailOpen.value = true
+    }
+
+    function closeSpreadsheetChangeDetail() {
+      spreadsheetChangeDetailOpen.value = false
+    }
+
    function openAssetDetail(asset) {
+      stopSpreadsheetOnlyOfficeDeferredRefresh()
      destroySpreadsheetOnlyOfficeEditor()
      spreadsheetOnlyOfficeError.value = ''
      spreadsheetOnlyOfficeLoading.value = false
@@ -2009,6 +2351,7 @@ export default {
    }

    function closeDetail() {
+      stopSpreadsheetOnlyOfficeDeferredRefresh()
      destroySpreadsheetOnlyOfficeEditor()
      spreadsheetOnlyOfficeError.value = ''
      spreadsheetOnlyOfficeLoading.value = false
@@ -2187,6 +2530,91 @@ export default {
      }
    }

+    async function loadReviewSubmitReviewers() {
+      reviewSubmitReviewerLoading.value = true
+      try {
+        const employees = await fetchEmployees()
+        reviewSubmitReviewerOptions.value = (Array.isArray(employees) ? employees : [])
+          .filter(
+            (item) =>
+              item.status === '在职' &&
+              Array.isArray(item.roleCodes) &&
+              item.roleCodes.includes('manager')
+          )
+          .map((item) => ({
+            value: item.name,
+            label: `${item.name} · ${item.position || '高级管理员'}`
+          }))
+      } catch (error) {
+        reviewSubmitReviewerOptions.value = []
+        toast(error?.message || '审核人列表加载失败，请稍后重试。')
+      } finally {
+        reviewSubmitReviewerLoading.value = false
+      }
+    }
+
+    async function openSubmitReviewDialog() {
+      if (!selectedSkill.value || !canSubmitReview.value || detailBusy.value) {
+        return
+      }
+      reviewSubmitVersion.value = selectedSkill.value.workingVersion || selectedSkill.value.displayVersion || ''
+      reviewSubmitReviewer.value = selectedSkill.value.reviewer || ''
+      reviewSubmitOpen.value = true
+      await loadReviewSubmitReviewers()
+      if (
+        !reviewSubmitReviewerOptions.value.some(
+          (item) => item.value === reviewSubmitReviewer.value
+        )
+      ) {
+        reviewSubmitReviewer.value = reviewSubmitReviewerOptions.value[0]?.value || ''
+      }
+    }
+
+    function closeSubmitReviewDialog() {
+      if (detailBusy.value) {
+        return
+      }
+      reviewSubmitOpen.value = false
+    }
+
+    async function submitSelectedRuleForReview() {
+      if (!selectedSkill.value || !canSubmitReview.value || detailBusy.value) {
+        return
+      }
+      const version = normalizeText(reviewSubmitVersion.value)
+      const reviewer = normalizeText(reviewSubmitReviewer.value)
+      if (!version) {
+        toast('请输入送审版本号。')
+        return
+      }
+      if (!reviewer) {
+        toast('请选择审核人。')
+        return
+      }
+
+      actionState.value = 'review-pending'
+      try {
+        await createAgentAssetReview(
+          selectedSkill.value.id,
+          {
+            version,
+            reviewer,
+            review_status: 'pending',
+            review_note: buildReviewNote('pending')
+          },
+          { actor: resolveActor() }
+        )
+        reviewSubmitOpen.value = false
+        await refreshCurrentAssets()
+        await loadSelectedAssetDetail(selectedSkill.value.id)
+        toast(`规则版本 ${version} 已提交给 ${reviewer} 审核。`)
+      } catch (error) {
+        toast(error?.message || '规则审核提交失败，请稍后重试。')
+      } finally {
+        actionState.value = ''
+      }
+    }
+
    async function activateSelectedRule() {
      if (!selectedSkill.value || !selectedSkillIsRule.value || !canManageSelected.value || detailBusy.value) {
        return
@@ -2241,7 +2669,7 @@ export default {
        const payload = await fetchAgentAssetVersionTimeline(assetId)
        versionTimelineItems.value = Array.isArray(payload) ? payload : []
      } catch (error) {
-        versionTimelineError.value = error?.message || '版本流转加载失败，请稍后重试。'
+        versionTimelineError.value = error?.message || '操作记录加载失败，请稍后重试。'
        if (!options.silent) {
          toast(versionTimelineError.value)
        }
@@ -2280,6 +2708,23 @@ export default {
      await loadVersionCompare()
    }

+    function openSpreadsheetChangeRecord(item) {
+      if (selectedSkill.value?.isPreviewMock) {
+        toast('预览数据暂不支持真实的线上差异对比。')
+        return
+      }
+      const publishedVersion = normalizeText(selectedSkill.value?.publishedVersion)
+      if (!selectedSkill.value?.id || !publishedVersion || publishedVersion === '-') {
+        toast('当前还没有线上版本，暂时无法查看与线上差异。')
+        return
+      }
+
+      openVersionCompare({
+        baseVersion: publishedVersion,
+        targetVersion: item.version
+      }).catch(() => {})
+    }
+
    function closeVersionCompare() {
      versionCompareOpen.value = false
    }
@@ -2312,6 +2757,7 @@ export default {
    })

    onBeforeUnmount(() => {
+      stopSpreadsheetOnlyOfficeDeferredRefresh()
      destroySpreadsheetOnlyOfficeEditor()
      document.removeEventListener('click', handleDocumentClick)
    })
@@ -2348,6 +2794,7 @@ export default {
      canManageSelected,
      canEditSelected,
      canSubmitReview,
+      hasReviewSubmitReviewers,
      canReviewSelected,
      canEditMarkdown,
      canUploadSpreadsheet,
@@ -2360,9 +2807,14 @@ export default {
      selectedSpreadsheetFileName,
      selectedSpreadsheetVersionModeLabel,
      selectedVersionTimelineItems,
-      recentVersionTimelineItems,
+      selectedSpreadsheetChangeRecords,
      detailBusy,
      actionState,
+      reviewSubmitOpen,
+      reviewSubmitVersion,
+      reviewSubmitReviewer,
+      reviewSubmitReviewerLoading,
+      reviewSubmitReviewerOptions,
      showReviewNote,
      spreadsheetUploadInput,
      spreadsheetOnlyOfficeLoading,
@@ -2378,6 +2830,10 @@ export default {
      versionComparePayload,
      versionCompareCellRows,
      versionCompareSheetRows,
+      spreadsheetChangeDetailOpen,
+      selectedSpreadsheetChangeRecord,
+      selectedSpreadsheetChangeSheetRows,
+      selectedSpreadsheetChangeCellRows,
      compareBaseVersion,
      compareTargetVersion,
      openAssetDetail,
@@ -2396,10 +2852,16 @@ export default {
      downloadSpreadsheetFile,
      handleSpreadsheetFileInput,
      reviewSelectedRule,
+      openSubmitReviewDialog,
+      closeSubmitReviewDialog,
+      submitSelectedRuleForReview,
      activateSelectedRule,
      restoreSelectedVersion,
      openVersionTimeline,
      closeVersionTimeline,
+      openSpreadsheetChangeRecord,
+      openSpreadsheetChangeDetail,
+      closeSpreadsheetChangeDetail,
      openVersionCompare,
      closeVersionCompare,
      loadVersionCompare,
--- a/web/src/views/scripts/spreadsheetChangeRecords.js
+++ b/web/src/views/scripts/spreadsheetChangeRecords.js
@@ -0,0 +1,124 @@
+function normalizeText(value) {
+  if (typeof value === 'string') {
+    return value.trim()
+  }
+  if (value === null || value === undefined) {
+    return ''
+  }
+  return String(value).trim()
+}
+
+function resolveOperationLabelFromSource(source) {
+  switch (normalizeText(source).toLowerCase()) {
+    case 'onlyoffice':
+      return '在线编辑保存'
+    case 'content-import':
+      return '导入表格'
+    case 'upload':
+      return '上传表格'
+    case 'restore':
+      return '恢复历史版本'
+    case 'review-submit':
+      return '提交审核固化'
+    case 'preview':
+      return '预览版本'
+    default:
+      return ''
+  }
+}
+
+export function resolveSpreadsheetOperationLabel(record) {
+  const explicitLabel = normalizeText(record?.operationLabel)
+  if (explicitLabel) {
+    return explicitLabel
+  }
+
+  const sourceLabel = resolveOperationLabelFromSource(record?.spreadsheetMeta?.source)
+  if (sourceLabel) {
+    return sourceLabel
+  }
+
+  const note = normalizeText(record?.note).toLowerCase()
+  if (note.includes('onlyoffice')) {
+    return '在线编辑保存'
+  }
+  if (note.includes('导入')) {
+    return '导入表格'
+  }
+  if (note.includes('恢复')) {
+    return '恢复历史版本'
+  }
+  if (note.includes('上传')) {
+    return '上传表格'
+  }
+
+  return '表格修改'
+}
+
+function normalizeChangeRecord(record) {
+  const version = normalizeText(record?.version)
+  if (!version) {
+    return null
+  }
+
+  return {
+    version,
+    operationLabel: resolveSpreadsheetOperationLabel(record),
+    operationActor:
+      normalizeText(record?.operationActor || record?.createdBy || record?.spreadsheetMeta?.updated_by) ||
+      '系统',
+    note: normalizeText(record?.note) || '用户修改了表格内容。',
+    time: normalizeText(record?.time || record?.createdAt || record?.spreadsheetMeta?.updated_at),
+    isWorking: record?.isWorking !== false,
+    isPendingLocalEdit: Boolean(record?.isPendingLocalEdit),
+    disabledReason: normalizeText(record?.disabledReason)
+  }
+}
+
+function toTimestamp(value) {
+  const normalized = normalizeText(value)
+  if (!normalized) {
+    return 0
+  }
+  const parsed = Date.parse(normalized)
+  return Number.isNaN(parsed) ? 0 : parsed
+}
+
+function dedupeChangeRecords(records) {
+  const seen = new Set()
+  return records.filter((item) => {
+    const key = [item.version, item.operationLabel, item.note].join('::')
+    if (seen.has(key)) {
+      return false
+    }
+    seen.add(key)
+    return true
+  })
+}
+
+export function buildSpreadsheetChangeRecords({
+  history = [],
+  localRecords = [],
+  publishedVersion = '',
+  limit = 5
+} = {}) {
+  const normalizedPublishedVersion = normalizeText(publishedVersion)
+  const normalizedHistoryRecords = Array.isArray(history)
+    ? history.map(normalizeChangeRecord).filter(Boolean)
+    : []
+  const normalizedLocalRecords = Array.isArray(localRecords)
+    ? localRecords.map(normalizeChangeRecord).filter(Boolean)
+    : []
+
+  const unpublishedHistoryRecords = normalizedHistoryRecords.filter(
+    (item) => item.version !== normalizedPublishedVersion
+  )
+  const preferredHistoryRecords =
+    unpublishedHistoryRecords.length || !normalizedPublishedVersion
+      ? unpublishedHistoryRecords
+      : normalizedHistoryRecords
+
+  return dedupeChangeRecords([...normalizedLocalRecords, ...preferredHistoryRecords])
+    .sort((left, right) => toTimestamp(right.time) - toTimestamp(left.time))
+    .slice(0, limit)
+}