生成主机秘钥卡片视图.

orion-ops-ui/src/views/asset/host-key/index.vue

@@ -1,14 +1,19 @@
 <template>
   <div class="layout-container">
-    <!-- 表格 -->
-    <host-key-table ref="table"
-                    @openView="(e) => drawer.openView(e)"
+    <!-- 列表-表格 -->
+    <host-key-table v-if="renderTable"
+                    ref="table"
                     @openAdd="() => drawer.openAdd()"
                     @openUpdate="(e) => drawer.openUpdate(e)" />
+    <!-- 列表-卡片 -->
+    <host-key-card-list v-else
+                        ref="card"
+                        @openAdd="() => drawer.openAdd()"
+                        @openUpdate="(e) => drawer.openUpdate(e)" />
     <!-- 添加修改模态框 -->
     <host-key-form-drawer ref="drawer"
-                          @added="() => table.addedCallback()"
-                          @updated="() => table.updatedCallback()" />
+                          @added="modalAddCallback"
+                          @updated="modalUpdateCallback" />
   </div>
 </template>
 
@@ -19,12 +24,36 @@
 </script>
 
 <script lang="ts" setup>
+  import { computed, ref } from 'vue';
+  import { useAppStore } from '@/store';
+  import HostKeyCardList from './components/host-key-card-list.vue';
   import HostKeyTable from './components/host-key-table.vue';
   import HostKeyFormDrawer from './components/host-key-form-drawer.vue';
-  import { ref } from 'vue';
 
   const table = ref();
+  const card = ref();
   const drawer = ref();
+  const appStore = useAppStore();
+
+  const renderTable = computed(() => appStore.hostKeyView === 'table');
+
+  // 添加回调
+  const modalAddCallback = () => {
+    if (renderTable.value) {
+      table.value.addedCallback();
+    } else {
+      card.value.addedCallback();
+    }
+  };
+
+  // 修改回调
+  const modalUpdateCallback = () => {
+    if (renderTable.value) {
+      table.value.updatedCallback();
+    } else {
+      card.value.updatedCallback();
+    }
+  };
 
 </script>