表格调整完毕

ui/dv/AiDvTabs.vue

@@ -1,25 +1,27 @@
 <script>
+import AiDvPanel from "./layout/AiDvPanel/AiDvPanel.vue";
+
 export default {
   name: "AiDvTabs",
-  model: {
-    prop: "active",
-    event: "input"
-  },
+  components: {AiDvPanel},
   props: {
-    active: String,
     config: Object,
-    values: Object
+  },
+  data() {
+    return {activeTab: '0'}
   },
   computed: {
-    layers: {
-      set(settings) {
-        console.log(settings)
-      },
-      get() {
-        const v = this
-        const tab = v.config?.tabs[v.active]
-        const values = v.values[tab.label]?.data || {}
-        return tab.comps?.map(e => ({dataType: "staticData", ...e, staticData: Array.isArray(values) ? values : values[e.label]}))?.filter(e => e.type) || []
+    values: v => v.config?.[v.config?.dataType] || {},
+    tabs: v => Object.keys(v.values),
+    layers() {
+      return this.values[this.activeTab].map(e => ({dataType: "staticData", ...e, staticData: e.data})) || []
+    }
+  },
+  watch: {
+    tabs: {
+      immediate: true, deep: true,
+      handler(v) {
+        this.activeTab = v[0]
       }
     }
   }
@@ -28,7 +30,12 @@ export default {
 
 <template>
   <section class="AiDvTabs">
-    <ai-dv-render class="fill" v-for="(e,i) in layers" :key="i" :data="layers[i]" :index="i"/>
+    <ai-dv-panel :padding="config.padding" :title="config.title" :theme="$attrs.theme" :border="config.border || ''">
+      <div slot="right" class="flex">
+        <div class="tabItem" v-for="(tab,i) in tabs" :key="i" v-text="tab" @click="activeTab=tab" :class="{active:activeTab==tab}"/>
+      </div>
+      <ai-dv-render class="fill" v-for="(e,i) in layers" :key="i" :data="layers[i]" :index="i"/>
+    </ai-dv-panel>
   </section>
 </template>
 
@@ -38,5 +45,20 @@ export default {
   flex-direction: column;
   gap: 16px;
   height: 100%;
+
+  .tabItem {
+    color: #1FBECC;
+    background: #1f9ecc29;
+    padding: 0 10px;
+    line-height: 20px;
+    margin-left: 4px;
+    font-size: 12px;
+    user-select: none;
+
+    &.active {
+      border: 1px solid #20B4C5;
+      color: #02FEFF;
+    }
+  }
 }
 </style>