refactor(audit): reuse list shells and split models

web/src/components/shared/EnterpriseDetailPage.vue

@@ -1,17 +1,7 @@
 <template>
   <article class="enterprise-detail-page" :class="variant">
     <div class="detail-scroll">
-      <TableLoadingState
-        v-if="loading"
-        class="detail-loading-state panel"
-        variant="panel"
-        :title="loadingTitle"
-        :message="loadingMessage"
-        :icon="loadingIcon"
-        :show-skeleton="false"
-      />
-
-      <section v-else-if="error" class="detail-inline-state panel error">
+      <section v-if="error" class="detail-inline-state panel error">
         <slot name="error" :error="error">
           <i class="mdi mdi-alert-circle-outline"></i>
           <div>
@@ -21,6 +11,16 @@
         </slot>
       </section>
 
+      <TableLoadingState
+        v-else-if="loading"
+        class="detail-loading-state panel"
+        variant="panel"
+        :title="loadingTitle"
+        :message="loadingMessage"
+        :icon="loadingIcon"
+        :show-skeleton="false"
+      />
+
       <template v-else>
         <section v-if="$slots.hero" class="detail-hero panel">
           <slot name="hero"></slot>
@@ -40,7 +40,7 @@
       </template>
     </div>
 
-    <footer v-if="backLabel || $slots.actions" class="detail-actions">
+    <footer v-if="backLabel || $slots.actions" class="detail-actions" :class="actionsClass">
       <button v-if="backLabel" class="back-action" type="button" @click="emit('back')">
         <i class="mdi mdi-arrow-left"></i>
         <span>{{ backLabel }}</span>
@@ -57,6 +57,7 @@
 import TableLoadingState from './TableLoadingState.vue'
 
 defineProps({
+  actionsClass: { type: [String, Array, Object], default: '' },
   backLabel: { type: String, default: '' },
   error: { type: String, default: '' },
   errorTitle: { type: String, default: '详情加载失败' },
@@ -64,7 +65,7 @@ defineProps({
   loadingIcon: { type: String, default: 'mdi mdi-file-document-outline' },
   loadingMessage: { type: String, default: '' },
   loadingTitle: { type: String, default: '正在加载详情' },
-  variant: { type: String, default: '' }
+  variant: { type: [String, Array, Object], default: '' }
 })
 
 const emit = defineEmits(['back'])

web/src/components/shared/EnterpriseListPage.vue

@@ -1,5 +1,5 @@
 <template>
-  <article class="enterprise-list-page panel" :class="variant">
+  <article class="enterprise-list-page" :class="[variant, { panel }]">
     <slot name="before"></slot>
 
     <nav v-if="hasTabs" class="status-tabs" :aria-label="tabsLabel">
@@ -51,12 +51,15 @@
       </slot>
     </p>
 
+    <slot name="meta"></slot>
+
     <div class="table-wrap" :class="{ 'is-empty': empty, 'has-error': Boolean(error) }">
       <div v-if="loading" class="table-state">
         <TableLoadingState
           :title="loadingTitle"
           :message="loadingMessage"
           :icon="loadingIcon"
+          floating
         />
       </div>
 
@@ -135,6 +138,7 @@ const props = defineProps({
     type: Array,
     default: () => []
   },
+  panel: { type: Boolean, default: true },
   pages: {
     type: Array,
     default: () => []