提交

web-admin/src/components/business/system-view-dialog/index.vue

@@ -27,8 +27,15 @@
 
       <!-- sections -->
       <div v-for="section in sections" :key="section.title" class="view-section">
-        <h3>{{ section.title }}</h3>
-        <dl class="view-kv-grid" :class="`view-kv-grid--cols-${gridColumns}`">
+        <h3 v-if="section.title && section.titleStyle !== 'field'">{{ section.title }}</h3>
+        <div v-else-if="section.title && section.titleStyle === 'field'" class="view-field-label">
+          {{ section.title }}
+        </div>
+        <dl
+          v-if="section.fields.length"
+          class="view-kv-grid"
+          :class="`view-kv-grid--cols-${gridColumns}`"
+        >
           <div
             v-for="field in section.fields"
             :key="field.label"
@@ -38,11 +45,23 @@
             <dt>{{ field.label }}</dt>
             <dd>
               <el-tag v-if="field.tagType" :type="field.tagType" size="small">{{ field.value ?? '—' }}</el-tag>
+              <ul v-else-if="field.items?.length" class="view-plain-list">
+                <li v-for="(item, idx) in field.items" :key="idx">{{ item }}</li>
+              </ul>
               <template v-else>{{ field.value ?? '—' }}</template>
             </dd>
           </div>
         </dl>
-        <slot v-if="section.slot" :name="section.slot" />
+        <div
+          v-if="section.slotTitle && section.slotTitleStyle === 'field'"
+          class="view-field-label"
+        >
+          {{ section.slotTitle }}
+        </div>
+        <h3 v-else-if="section.slotTitle">{{ section.slotTitle }}</h3>
+        <div v-if="section.slot" class="view-section-slot">
+          <slot :name="section.slot" />
+        </div>
       </div>
       <slot name="append" />
     </div>
@@ -63,7 +82,9 @@
 
   export interface ViewField {
     label: string
-    value: string | number | boolean | null | undefined
+    value?: string | number | boolean | null | undefined
+    /** 无编号列表（ul），与 value / tagType 二选一 */
+    items?: string[]
     span?: boolean
     /** 传入后以 el-tag 渲染，值为 el-tag 的 type 属性 */
     tagType?: TagType
@@ -72,6 +93,11 @@
   export interface ViewSection {
     title: string
     fields: ViewField[]
+    /** section=区块绿条标题；field=与 KV 字段 label（dt）一致 */
+    titleStyle?: 'section' | 'field'
+    /** 插槽上方标题（可与 fields 同区块，避免额外分割线） */
+    slotTitle?: string
+    slotTitleStyle?: 'section' | 'field'
     /** 区块内追加内容（如附件列表），对应具名插槽名 */
     slot?: string
   }
@@ -219,6 +245,41 @@
     grid-column: 1 / -1;
   }
 
+  .view-plain-list {
+    margin: 0;
+    padding-left: 1.15em;
+    list-style: disc;
+
+    li + li {
+      margin-top: 4px;
+    }
+  }
+
+  .view-field-label {
+    margin: 0 0 8px;
+    font-size: 13px;
+    font-weight: 500;
+    color: #64748b;
+    line-height: 1.5;
+  }
+
+  .view-section-slot {
+    margin-top: 4px;
+
+    &:not(:first-child) {
+      margin-top: 12px;
+    }
+  }
+
+  .view-field-label + .view-section-slot,
+  .view-kv-grid + .view-field-label {
+    margin-top: 0;
+  }
+
+  .view-kv-grid + .view-field-label {
+    margin-top: 12px;
+  }
+
   @media (max-width: 900px) {
     .view-kv-grid--cols-3 {
       grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -283,6 +344,11 @@
       font-size: 12px;
       grid-template-columns: 84px 1fr;
     }
+
+    .view-field-label {
+      margin-bottom: 6px;
+      font-size: 12px;
+    }
   }
 </style>