feat: 展示集成变量说明与流程详情

src/views/SettingsView.vue

@@ -1,11 +1,23 @@
 <script setup lang="ts">
 import { Refresh } from '@element-plus/icons-vue'
+import AuditJsonCell from '../components/AuditJsonCell.vue'
 import StatusPill from '../components/StatusPill.vue'
 import { usePlatformStore } from '../stores/platform'
-import type { AuditLogEntry } from '../types/devops'
-import type { IntegrationConfigState } from '../types/devops'
+import type {
+  AuditLogEntry,
+  IntegrationConfigItem,
+  IntegrationConfigState,
+} from '../types/devops'
 
 const platform = usePlatformStore()
+type VariableTagType = 'success' | 'warning' | 'danger' | 'info'
+type VariableGroup = {
+  key: string
+  label: string
+  names: string[]
+  emptyText: string
+  tagType?: VariableTagType
+}
 
 const configStatusMeta: Record<
   IntegrationConfigState,
@@ -56,14 +68,66 @@ function auditResource(record: AuditLogEntry): string {
     : record.resourceType
 }
 
-function auditDigest(record: AuditLogEntry): string {
-  const payload = record.after ?? record.parameterDigest ?? record.before
+function auditPayload(record: AuditLogEntry): unknown {
+  return record.after ?? record.parameterDigest ?? record.before ?? null
+}
 
-  if (!payload) {
-    return '-'
+function variableGroups(item: IntegrationConfigItem): VariableGroup[] {
+  return [
+    {
+      key: 'required',
+      label: '必需变量',
+      names: item.required,
+      emptyText: '暂无',
+    },
+    {
+      key: 'configured',
+      label: '已识别',
+      names: item.configured,
+      emptyText: '暂无',
+      tagType: 'success',
+    },
+    {
+      key: 'missing',
+      label: '缺失',
+      names: item.missing,
+      emptyText: '无',
+      tagType: 'danger',
+    },
+    {
+      key: 'optional',
+      label: '可选变量',
+      names: item.optional ?? [],
+      emptyText: '暂无',
+      tagType: 'info',
+    },
+  ]
+}
+
+function variableHelp(item: IntegrationConfigItem, name: string) {
+  return item.variableHelp?.[name]
+}
+
+function variableDescription(
+  item: IntegrationConfigItem,
+  name: string,
+  group: VariableGroup,
+): string {
+  const help = variableHelp(item, name)
+
+  if (help?.description) {
+    return help.description
   }
 
-  return JSON.stringify(payload)
+  if (item.note) {
+    return item.note
+  }
+
+  return `后端暂未返回 ${item.name} ${group.label} ${name} 的变量说明；请在 /settings/integration-config 响应中补充 variableHelp。`
+}
+
+function variableSourceLabel(item: IntegrationConfigItem, name: string): string {
+  return variableHelp(item, name)?.description ? '后端返回' : '等待后端说明'
 }
 </script>
 
@@ -72,7 +136,7 @@ function auditDigest(record: AuditLogEntry): string {
     <div class="page-header">
       <div>
         <h1>系统配置</h1>
-        <p>展示后端集成配置状态、API 契约来源、BPMN 映射、Agent 边界和通知维护状态。</p>
+        <p>展示后端集成配置状态、API 契约来源、流程映射、Agent 边界和通知维护状态。</p>
       </div>
     </div>
 
@@ -102,57 +166,45 @@ function auditDigest(record: AuditLogEntry): string {
             </div>
 
             <div class="variable-grid">
-              <div class="variable-group">
-                <strong>必需变量</strong>
+              <div
+                v-for="group in variableGroups(item)"
+                :key="group.key"
+                class="variable-group"
+              >
+                <strong>{{ group.label }}</strong>
                 <div class="variable-tags">
-                  <ElTag v-for="name in item.required" :key="name" class="mono" effect="plain">
-                    {{ name }}
-                  </ElTag>
-                </div>
-              </div>
-              <div class="variable-group">
-                <strong>已识别</strong>
-                <div class="variable-tags">
-                  <ElTag
-                    v-for="name in item.configured"
-                    :key="name"
-                    class="mono"
-                    type="success"
-                    effect="plain"
+                  <ElTooltip
+                    v-for="name in group.names"
+                    :key="`${group.key}-${name}`"
+                    effect="light"
+                    placement="top"
+                    :show-after="160"
                   >
-                    {{ name }}
-                  </ElTag>
-                  <span v-if="item.configured.length === 0" class="empty-value">暂无</span>
-                </div>
-              </div>
-              <div class="variable-group">
-                <strong>缺失</strong>
-                <div class="variable-tags">
-                  <ElTag
-                    v-for="name in item.missing"
-                    :key="name"
-                    class="mono"
-                    type="danger"
-                    effect="plain"
-                  >
-                    {{ name }}
-                  </ElTag>
-                  <span v-if="item.missing.length === 0" class="empty-value">无</span>
-                </div>
-              </div>
-              <div class="variable-group">
-                <strong>可选变量</strong>
-                <div class="variable-tags">
-                  <ElTag
-                    v-for="name in item.optional ?? []"
-                    :key="name"
-                    class="mono"
-                    type="info"
-                    effect="plain"
-                  >
-                    {{ name }}
-                  </ElTag>
-                  <span v-if="!item.optional?.length" class="empty-value">暂无</span>
+                    <template #content>
+                      <div class="variable-tooltip">
+                        <strong class="mono">{{ name }}</strong>
+                        <p>{{ variableDescription(item, name, group) }}</p>
+                        <small>{{ group.label }} · {{ variableSourceLabel(item, name) }}</small>
+                        <small v-if="variableHelp(item, name)?.example">
+                          示例：{{ variableHelp(item, name)?.example }}
+                        </small>
+                        <a
+                          v-if="variableHelp(item, name)?.docUrl"
+                          :href="variableHelp(item, name)?.docUrl"
+                          target="_blank"
+                          rel="noreferrer"
+                        >
+                          查看官方文档
+                        </a>
+                      </div>
+                    </template>
+                    <ElTag class="mono variable-tag" :type="group.tagType" effect="plain">
+                      {{ name }}
+                    </ElTag>
+                  </ElTooltip>
+                  <span v-if="group.names.length === 0" class="empty-value">
+                    {{ group.emptyText }}
+                  </span>
                 </div>
               </div>
             </div>
@@ -205,9 +257,9 @@ function auditDigest(record: AuditLogEntry): string {
               {{ auditActor(row) }}
             </template>
           </ElTableColumn>
-          <ElTableColumn label="脱敏摘要" min-width="280">
+          <ElTableColumn label="脱敏摘要" min-width="420">
             <template #default="{ row }">
-              <span class="audit-digest">{{ auditDigest(row) }}</span>
+              <AuditJsonCell :value="auditPayload(row)" />
             </template>
           </ElTableColumn>
         </ElTable>
@@ -334,23 +386,45 @@ function auditDigest(record: AuditLogEntry): string {
   min-height: 24px;
 }
 
+.variable-tag {
+  cursor: help;
+}
+
+.variable-tooltip {
+  max-width: 320px;
+}
+
+.variable-tooltip strong,
+.variable-tooltip small,
+.variable-tooltip a {
+  display: block;
+}
+
+.variable-tooltip p {
+  margin: 6px 0;
+  color: #4b5565;
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.variable-tooltip small {
+  margin-top: 4px;
+  color: #7b8798;
+  font-size: 12px;
+}
+
+.variable-tooltip a {
+  margin-top: 6px;
+  color: #1d5fd0;
+  font-size: 12px;
+}
+
 .empty-value {
   color: #9aa4b2;
   font-size: 12px;
   line-height: 24px;
 }
 
-.audit-digest {
-  display: block;
-  max-width: 100%;
-  overflow: hidden;
-  color: #4b5565;
-  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
-  font-size: 12px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 @media (max-width: 1080px) {
   .variable-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));