From 34ef99751454c4d31f16037201ec0f7bdacb3474 Mon Sep 17 00:00:00 2001
From: lijiahangmax <ljh1553488six@139.com>
Date: Sat, 7 Oct 2023 23:24:12 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=9F=E6=88=90=E4=B8=BB=E6=9C=BA=E7=A7=98?=
 =?UTF-8?q?=E9=92=A5=E5=8D=A1=E7=89=87=E8=A7=86=E5=9B=BE.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ops/launch/generator/CodeGenerator.java   |   8 +-
 .../engine/VelocityTemplateEngine.java        |  16 +--
 .../orion-server-module-service-impl.java.vm  |   2 +-
 .../resources/templates/orion-sql-menu.sql.vm |   3 +-
 ...rion-vue-views-components-card-list.vue.vm |  11 +-
 .../templates/orion-vue-views-index.vue.vm    |  17 +--
 .../orion-vue-views-types-card.fields.ts.vm   |  33 ++++-
 .../request/host/HostKeyQueryRequest.java     |   3 +
 .../service/impl/HostKeyServiceImpl.java      |   7 +-
 .../asset/service/impl/HostServiceImpl.java   |   4 +-
 orion-ops-ui/src/api/asset/host-key.ts        |   1 +
 orion-ops-ui/src/assets/style/layout.less     |   2 +-
 .../src/components/card/list/index.vue        |   4 +-
 .../components/host-key-card-list.vue         | 132 ++++++++++++++++++
 .../src/views/asset/host-key/index.vue        |  41 +++++-
 .../views/asset/host-key/types/card.fields.ts |  30 ++++
 .../asset/host/components/host-card-list.vue  |   5 +-
 .../src/views/asset/host/types/card.fields.ts |   2 +-
 18 files changed, 281 insertions(+), 40 deletions(-)
 create mode 100644 orion-ops-ui/src/views/asset/host-key/components/host-key-card-list.vue
 create mode 100644 orion-ops-ui/src/views/asset/host-key/types/card.fields.ts

diff --git a/orion-ops-launch/src/main/java/com/orion/ops/launch/generator/CodeGenerator.java b/orion-ops-launch/src/main/java/com/orion/ops/launch/generator/CodeGenerator.java
index d265f752..93fe73de 100644
--- a/orion-ops-launch/src/main/java/com/orion/ops/launch/generator/CodeGenerator.java
+++ b/orion-ops-launch/src/main/java/com/orion/ops/launch/generator/CodeGenerator.java
@@ -18,6 +18,7 @@ import com.orion.ops.framework.mybatis.core.domain.BaseDO;
 import com.orion.ops.framework.mybatis.core.mapper.IMapper;
 import com.orion.ops.launch.generator.engine.VelocityTemplateEngine;
 import com.orion.ops.launch.generator.template.Table;
+import com.orion.ops.launch.generator.template.Template;
 import org.apache.ibatis.annotations.Mapper;
 
 import java.io.File;
@@ -41,7 +42,7 @@ public class CodeGenerator {
         // 作者
         String author = Const.ORION_AUTHOR;
         // 模块
-        String module = "infra";
+        String module = "asset";
         // 生成的表
         Table[] tables = {
                 // Template.create("preference", "用户偏好", "preference")
@@ -55,6 +56,11 @@ public class CodeGenerator {
                 //         .values("value", 1, 2)
                 //         .color("blue", "green")
                 //         .build(),
+                Template.create("host_key", "主机秘钥", "host")
+                        .vue("asset", "host-key")
+                        .enableCardView()
+                        .enableDrawerForm()
+                        .build()
         };
         // jdbc 配置 - 使用配置文件
         File yamlFile = new File("orion-ops-launch/src/main/resources/application-dev.yaml");
diff --git a/orion-ops-launch/src/main/java/com/orion/ops/launch/generator/engine/VelocityTemplateEngine.java b/orion-ops-launch/src/main/java/com/orion/ops/launch/generator/engine/VelocityTemplateEngine.java
index f1158ba5..d156ea62 100644
--- a/orion-ops-launch/src/main/java/com/orion/ops/launch/generator/engine/VelocityTemplateEngine.java
+++ b/orion-ops-launch/src/main/java/com/orion/ops/launch/generator/engine/VelocityTemplateEngine.java
@@ -138,13 +138,13 @@ public class VelocityTemplateEngine extends AbstractTemplateEngine {
                                                      @NotNull TableInfo tableInfo) {
         // 生成文件副本
         List<CustomFile> files = originCustomerFile.stream().map(s ->
-                new CustomFile.Builder()
-                        .enableFileOverride()
-                        .templatePath(s.getTemplatePath())
-                        .filePath(s.getFilePath())
-                        .fileName(s.getFileName())
-                        .packageName(s.getPackageName())
-                        .build())
+                        new CustomFile.Builder()
+                                .enableFileOverride()
+                                .templatePath(s.getTemplatePath())
+                                .filePath(s.getFilePath())
+                                .fileName(s.getFileName())
+                                .packageName(s.getPackageName())
+                                .build())
                 .collect(Collectors.toList());
         // 获取 table
         Table table = tables.get(tableInfo.getName());
@@ -324,7 +324,7 @@ public class VelocityTemplateEngine extends AbstractTemplateEngine {
                 .collect(Collectors.toList());
         // 设置前端元数据
         Table table = tables.get(tableInfo.getName());
-        Map<String, Object> vueMeta = this.pickTableMeta(table, "enableDrawerForm", "enableRowSelection", "module", "feature");
+        Map<String, Object> vueMeta = this.pickTableMeta(table, "module", "feature", "enableDrawerForm", "enableRowSelection", "enableCardView");
         // 模块名称实体
         vueMeta.put("moduleEntity", VariableStyles.SPINE.toBigHump(table.getModule()));
         // 模块名称实体
diff --git a/orion-ops-launch/src/main/resources/templates/orion-server-module-service-impl.java.vm b/orion-ops-launch/src/main/resources/templates/orion-server-module-service-impl.java.vm
index f071d48d..b19412cc 100644
--- a/orion-ops-launch/src/main/resources/templates/orion-server-module-service-impl.java.vm
+++ b/orion-ops-launch/src/main/resources/templates/orion-server-module-service-impl.java.vm
@@ -270,7 +270,7 @@ public class ${table.serviceImplName} implements ${table.serviceName} {
                 #end
                 .and(Strings.isNotEmpty(searchValue), c -> c
                         #foreach($field in ${table.fields})
-                        .eq(${type}DO::get${field.capitalName}, searchValue)
+                        .eq(${type}DO::get${field.capitalName}, searchValue)#if($foreach.hasNext).or()#end
                         #end
                 );
     }
diff --git a/orion-ops-launch/src/main/resources/templates/orion-sql-menu.sql.vm b/orion-ops-launch/src/main/resources/templates/orion-sql-menu.sql.vm
index 05fb4fa6..cc2c6305 100644
--- a/orion-ops-launch/src/main/resources/templates/orion-sql-menu.sql.vm
+++ b/orion-ops-launch/src/main/resources/templates/orion-sql-menu.sql.vm
@@ -26,4 +26,5 @@ VALUES
   (@TMP_SUB_ID, '创建$table.comment', '${package.ModuleName}:${typeHyphen}:create', 3, 20),
   (@TMP_SUB_ID, '修改$table.comment', '${package.ModuleName}:${typeHyphen}:update', 3, 30),
   (@TMP_SUB_ID, '删除$table.comment', '${package.ModuleName}:${typeHyphen}:delete', 3, 40),
-  (@TMP_SUB_ID, '导出$table.comment', '${package.ModuleName}:${typeHyphen}:export', 3, 50);
+  (@TMP_SUB_ID, '导出$table.comment', '${package.ModuleName}:${typeHyphen}:export', 3, 50),
+  (@TMP_SUB_ID, '导入$table.comment', '${package.ModuleName}:${typeHyphen}:import', 3, 60);
diff --git a/orion-ops-launch/src/main/resources/templates/orion-vue-views-components-card-list.vue.vm b/orion-ops-launch/src/main/resources/templates/orion-vue-views-components-card-list.vue.vm
index e5ee33d7..5c2c0d13 100644
--- a/orion-ops-launch/src/main/resources/templates/orion-vue-views-components-card-list.vue.vm
+++ b/orion-ops-launch/src/main/resources/templates/orion-vue-views-components-card-list.vue.vm
@@ -1,5 +1,6 @@
 <template>
   <card-list v-model:searchValue="formModel.searchValue"
+             search-input-placeholder="输入xxx"
              create-card-position="head"
              :card-height="172"
              :loading="loading"
@@ -13,6 +14,10 @@
              @reset="reset"
              @search="fetchCardData"
              @page-change="fetchCardData">
+    <!-- 标题 -->
+    <template #title="{ record }">
+      {{ record.id }}
+    </template>
     <!-- 拓展操作 -->
     <template #extra="{ record }">
       <a-space>
@@ -44,7 +49,7 @@
               size="small"
               ref="formRef"
               label-align="right"
-              :style="{ width: '300px' }"
+              :style="{ width: '320px' }"
               :label-col-props="{ span: 6 }"
               :wrapper-col-props="{ span: 18 }">
         #foreach($field in ${table.fields})
@@ -88,7 +93,7 @@
   import { usePagination, useColLayout } from '@/types/card';
   import { computed, reactive, ref } from 'vue';
   import useLoading from '@/hooks/loading';
-  import { dataColor, objectTruthKeyCount, resetObject } from '@/utils';
+  import { objectTruthKeyCount, resetObject } from '@/utils';
   import fieldConfig from '../types/card.fields';
   import { delete${vue.featureEntity}, get${vue.featureEntity}Page, ${vue.featureEntity}QueryRequest, ${vue.featureEntity}QueryResponse } from '@/api/${vue.module}/${vue.feature}';
   import { Message } from '@arco-design/web-vue';
@@ -142,7 +147,7 @@
 
   // 重置条件
   const reset = () => {
-    resetObject(formModel']);
+    resetObject(formModel);
     fetchCardData();
   };
 
diff --git a/orion-ops-launch/src/main/resources/templates/orion-vue-views-index.vue.vm b/orion-ops-launch/src/main/resources/templates/orion-vue-views-index.vue.vm
index 06673433..292ad22f 100644
--- a/orion-ops-launch/src/main/resources/templates/orion-vue-views-index.vue.vm
+++ b/orion-ops-launch/src/main/resources/templates/orion-vue-views-index.vue.vm
@@ -12,7 +12,7 @@
                   @openAdd="() =>#if($vue.enableDrawerForm) drawer#else modal#end.openAdd()"
                   @openUpdate="(e) =>#if($vue.enableDrawerForm) drawer#else modal#end.openUpdate(e)" />
     #else
-    <!-- 表格-表格 -->
+    <!-- 列表-表格 -->
     <${vue.feature}-table ref="table"
                   @openAdd="() =>#if($vue.enableDrawerForm) drawer#else modal#end.openAdd()"
                   @openUpdate="(e) =>#if($vue.enableDrawerForm) drawer#else modal#end.openUpdate(e)" />
@@ -21,12 +21,12 @@
     <!-- 添加修改模态框 -->
     <${vue.feature}-form-drawer ref="drawer"
                    @added="modalAddCallback"
-                   @updated="modalAddCallback" />
+                   @updated="modalUpdateCallback" />
     #else
     <!-- 添加修改模态框 -->
     <${vue.feature}-form-modal ref="modal"
                    @added="modalAddCallback"
-                   @updated="modalAddCallback" />
+                   @updated="modalUpdateCallback" />
     #end
   </div>
 </template>
@@ -38,6 +38,12 @@
 </script>
 
 <script lang="ts" setup>
+  #if($vue.enableCardView)
+  import { computed, ref } from 'vue';
+  import { useAppStore } from '@/store';
+  #else
+  import { ref } from 'vue';
+  #end
   #if($vue.enableCardView)
   import ${vue.featureEntity}CardList from './components/${vue.feature}-card-list.vue';
   #end
@@ -47,11 +53,6 @@
   #else
   import ${vue.featureEntity}FormModal from './components/${vue.feature}-form-modal.vue';
   #end
-  #if($vue.enableCardView)
-  import { useAppStore } from '@/store';
-  #end
-
-  import { ref } from 'vue';
 
   const table = ref();
   #if($vue.enableCardView)
diff --git a/orion-ops-launch/src/main/resources/templates/orion-vue-views-types-card.fields.ts.vm b/orion-ops-launch/src/main/resources/templates/orion-vue-views-types-card.fields.ts.vm
index 7e3e714d..037b71bd 100644
--- a/orion-ops-launch/src/main/resources/templates/orion-vue-views-types-card.fields.ts.vm
+++ b/orion-ops-launch/src/main/resources/templates/orion-vue-views-types-card.fields.ts.vm
@@ -1,11 +1,15 @@
 import { CardField, CardFieldConfig } from '@/types/card';
 import { dateFormat } from '@/utils';
 
-export const fieldConfig = {
+const fieldConfig = {
   rowGap: '10px',
   labelSpan: 8,
   fields: [
-    #foreach($field in ${table.fields}){
+    {
+      label: 'id',
+      dataIndex: 'id',
+      slotName: 'id',
+    }, #foreach($field in ${table.fields})#if("$!field.propertyName" != "id"){
       label: '${field.comment}',
       dataIndex: '${field.propertyName}',
       slotName: '${field.propertyName}',
@@ -16,7 +20,30 @@ export const fieldConfig = {
         return record.${field.propertyName} && dateFormat(new Date(record.${field.propertyName}));
       },
       #end
-    }, #end
+    }, #end#end{
+     label: '创建时间',
+     dataIndex: 'createTime',
+     slotName: 'createTime',
+     render: ({ record }) => {
+       return dateFormat(new Date(record.createTime));
+     },
+   }, {
+     label: '修改时间',
+     dataIndex: 'updateTime',
+     slotName: 'updateTime',
+     render: ({ record }) => {
+       return dateFormat(new Date(record.updateTime));
+     },
+   }, {
+     label: '创建人',
+     dataIndex: 'creator',
+     slotName: 'creator',
+   }, {
+     label: '修改人',
+     dataIndex: 'updater',
+     slotName: 'updater',
+   }
   ] as CardField[]
 } as CardFieldConfig;
+
 export default fieldConfig;
diff --git a/orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/entity/request/host/HostKeyQueryRequest.java b/orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/entity/request/host/HostKeyQueryRequest.java
index dd7f244b..3d5b8815 100644
--- a/orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/entity/request/host/HostKeyQueryRequest.java
+++ b/orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/entity/request/host/HostKeyQueryRequest.java
@@ -21,6 +21,9 @@ import javax.validation.constraints.Size;
 @Schema(name = "HostKeyQueryRequest", description = "主机秘钥 查询请求对象")
 public class HostKeyQueryRequest extends PageRequest {
 
+    @Schema(description = "搜索")
+    private String searchValue;
+
     @Schema(description = "id")
     private Long id;
 
diff --git a/orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/service/impl/HostKeyServiceImpl.java b/orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/service/impl/HostKeyServiceImpl.java
index 708ab8a0..917631c9 100644
--- a/orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/service/impl/HostKeyServiceImpl.java
+++ b/orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/service/impl/HostKeyServiceImpl.java
@@ -202,9 +202,14 @@ public class HostKeyServiceImpl implements HostKeyService {
      * @return wrapper
      */
     private LambdaQueryWrapper<HostKeyDO> buildQueryWrapper(HostKeyQueryRequest request) {
+        String searchValue = request.getSearchValue();
         return hostKeyDAO.wrapper()
                 .eq(HostKeyDO::getId, request.getId())
-                .like(HostKeyDO::getName, request.getName());
+                .like(HostKeyDO::getName, request.getName())
+                .and(Strings.isNotEmpty(searchValue), c -> c
+                        .eq(HostKeyDO::getId, searchValue).or()
+                        .like(HostKeyDO::getName, searchValue)
+                );
     }
 
     /**
diff --git a/orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/service/impl/HostServiceImpl.java b/orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/service/impl/HostServiceImpl.java
index 0c0788b5..e103873c 100644
--- a/orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/service/impl/HostServiceImpl.java
+++ b/orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/service/impl/HostServiceImpl.java
@@ -257,8 +257,8 @@ public class HostServiceImpl implements HostService {
                 .like(HostDO::getCode, request.getCode())
                 .like(HostDO::getAddress, request.getAddress())
                 .and(Strings.isNotEmpty(searchValue), c -> c
-                        .like(HostDO::getName, searchValue)
-                        .like(HostDO::getCode, searchValue)
+                        .like(HostDO::getName, searchValue).or()
+                        .like(HostDO::getCode, searchValue).or()
                         .like(HostDO::getAddress, searchValue)
                 );
         if (setIdList) {
diff --git a/orion-ops-ui/src/api/asset/host-key.ts b/orion-ops-ui/src/api/asset/host-key.ts
index 6c69795e..fad91f03 100644
--- a/orion-ops-ui/src/api/asset/host-key.ts
+++ b/orion-ops-ui/src/api/asset/host-key.ts
@@ -24,6 +24,7 @@ export interface HostKeyUpdateRequest extends HostKeyCreateRequest {
  * 主机秘钥查询请求
  */
 export interface HostKeyQueryRequest extends Pagination {
+  searchValue?: string;
   id?: number;
   name?: string;
   publicKey?: string;
diff --git a/orion-ops-ui/src/assets/style/layout.less b/orion-ops-ui/src/assets/style/layout.less
index 22963d1f..96addd1d 100644
--- a/orion-ops-ui/src/assets/style/layout.less
+++ b/orion-ops-ui/src/assets/style/layout.less
@@ -1,6 +1,6 @@
 .layout-container {
   background-color: var(--color-fill-2);
-  padding: 16px 16px 0 16px;
+  padding: 16px;
   display: flex;
   flex-direction: column;
 }
diff --git a/orion-ops-ui/src/components/card/list/index.vue b/orion-ops-ui/src/components/card/list/index.vue
index 94f17d89..1bdcd768 100644
--- a/orion-ops-ui/src/components/card/list/index.vue
+++ b/orion-ops-ui/src/components/card/list/index.vue
@@ -46,8 +46,8 @@
                    class="header-input-wrapper"
                    :style="{width: searchInputWidth}">
                 <a-input v-model="searchValueRef"
+                         :placeholder="searchInputPlaceholder"
                          size="small"
-                         placeholder="输入名称/地址"
                          allow-clear
                          @input="e => emits('update:searchValue', e)"
                          @change="e => emits('update:searchValue', e)"
@@ -214,7 +214,6 @@
   import { useAppStore } from '@/store';
   import { PaginationProps, ResponsiveValue } from '@arco-design/web-vue';
   import { CardRecord, ColResponsiveValue, HandleVisible, CardFieldConfig, CardPosition } from '@/types/card';
-  import fieldConfig from '@/views/asset/host/types/card.fields';
   import { triggerMouseEvent } from '@/utils';
 
   const appStore = useAppStore();
@@ -265,6 +264,7 @@
       type: Number,
       default: () => 0
     },
+    searchInputPlaceholder: String,
     searchInputWidth: {
       type: String,
       default: () => '200px'
diff --git a/orion-ops-ui/src/views/asset/host-key/components/host-key-card-list.vue b/orion-ops-ui/src/views/asset/host-key/components/host-key-card-list.vue
new file mode 100644
index 00000000..1b49f0cc
--- /dev/null
+++ b/orion-ops-ui/src/views/asset/host-key/components/host-key-card-list.vue
@@ -0,0 +1,132 @@
+<template>
+  <card-list v-model:searchValue="formModel.searchValue"
+             search-input-placeholder="输入名称/id"
+             create-card-position="head"
+             :card-height="148"
+             :loading="loading"
+             :fieldConfig="fieldConfig"
+             :list="list"
+             :pagination="pagination"
+             :card-layout-cols="cardColLayout"
+             :handle-visible="{disableFilter: true}"
+             :add-permission="['asset:host-key:create']"
+             @add="emits('openAdd')"
+             @reset="reset"
+             @search="fetchCardData"
+             @page-change="fetchCardData">
+    <!-- 标题 -->
+    <template #title="{ record }">
+      {{ record.name }}
+    </template>
+    <!-- 拓展操作 -->
+    <template #extra="{ record }">
+      <a-space>
+        <!-- 更多操作 -->
+        <a-dropdown trigger="hover">
+          <icon-more class="card-extra-icon" />
+          <template #content>
+            <!-- 修改 -->
+            <a-doption v-permission="['asset:host-key:update']"
+                       @click="emits('openUpdate', record)">
+              <icon-edit />
+              修改
+            </a-doption>
+            <!-- 删除 -->
+            <a-doption v-permission="['asset:host-key:delete']"
+                       class="span-red"
+                       @click="deleteRow(record.id)">
+              <icon-delete />
+              删除
+            </a-doption>
+          </template>
+        </a-dropdown>
+      </a-space>
+    </template>
+  </card-list>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'asset-host-key-card-list'
+  };
+</script>
+
+<script setup lang="ts">
+  import { usePagination, useColLayout } from '@/types/card';
+  import { reactive, ref } from 'vue';
+  import useLoading from '@/hooks/loading';
+  import { resetObject } from '@/utils';
+  import fieldConfig from '../types/card.fields';
+  import { deleteHostKey, getHostKeyPage, HostKeyQueryRequest, HostKeyQueryResponse } from '@/api/asset/host-key';
+  import { Message } from '@arco-design/web-vue';
+
+  const { loading, setLoading } = useLoading();
+  const cardColLayout = useColLayout();
+  const pagination = usePagination();
+  const list = ref<HostKeyQueryResponse[]>([]);
+  const emits = defineEmits(['openAdd', 'openUpdate', 'openUpdateConfig']);
+
+  const formModel = reactive<HostKeyQueryRequest>({
+    searchValue: undefined,
+  });
+
+  // 删除当前行
+  const deleteRow = async (id: number) => {
+    try {
+      setLoading(true);
+      // 调用删除接口
+      await deleteHostKey(id);
+      Message.success('删除成功');
+      // 重新加载数据
+      await fetchCardData();
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 添加后回调
+  const addedCallback = () => {
+    fetchCardData();
+  };
+
+  // 更新后回调
+  const updatedCallback = () => {
+    fetchCardData();
+  };
+
+  defineExpose({
+    addedCallback, updatedCallback
+  });
+
+  // 重置条件
+  const reset = () => {
+    resetObject(formModel);
+    fetchCardData();
+  };
+
+  // 加载数据
+  const doFetchCardData = async (request: HostKeyQueryRequest) => {
+    try {
+      setLoading(true);
+      const { data } = await getHostKeyPage(request);
+      list.value = data.rows;
+      pagination.total = data.total;
+      pagination.current = request.page;
+      pagination.pageSize = request.limit;
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 切换页码
+  const fetchCardData = (page = 1, limit = pagination.pageSize, form = formModel) => {
+    doFetchCardData({ page, limit, ...form });
+  };
+  fetchCardData();
+
+</script>
+
+<style scoped lang="less">
+</style>
diff --git a/orion-ops-ui/src/views/asset/host-key/index.vue b/orion-ops-ui/src/views/asset/host-key/index.vue
index 0f566c0f..ca0581fb 100644
--- a/orion-ops-ui/src/views/asset/host-key/index.vue
+++ b/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>
 
diff --git a/orion-ops-ui/src/views/asset/host-key/types/card.fields.ts b/orion-ops-ui/src/views/asset/host-key/types/card.fields.ts
new file mode 100644
index 00000000..3506f74f
--- /dev/null
+++ b/orion-ops-ui/src/views/asset/host-key/types/card.fields.ts
@@ -0,0 +1,30 @@
+import { CardField, CardFieldConfig } from '@/types/card';
+import { dateFormat } from '@/utils';
+
+const fieldConfig = {
+  rowGap: '10px',
+  labelSpan: 8,
+  fields: [
+    {
+      label: 'id',
+      dataIndex: 'id',
+      slotName: 'id',
+    }, {
+      label: '创建时间',
+      dataIndex: 'createTime',
+      slotName: 'createTime',
+      render: ({ record }) => {
+        return dateFormat(new Date(record.createTime));
+      },
+    }, {
+      label: '修改时间',
+      dataIndex: 'updateTime',
+      slotName: 'updateTime',
+      render: ({ record }) => {
+        return dateFormat(new Date(record.updateTime));
+      },
+    }
+  ] as CardField[]
+} as CardFieldConfig;
+
+export default fieldConfig;
diff --git a/orion-ops-ui/src/views/asset/host/components/host-card-list.vue b/orion-ops-ui/src/views/asset/host/components/host-card-list.vue
index 9fc761f3..ff34a98b 100644
--- a/orion-ops-ui/src/views/asset/host/components/host-card-list.vue
+++ b/orion-ops-ui/src/views/asset/host/components/host-card-list.vue
@@ -1,7 +1,8 @@
 <template>
   <card-list v-model:searchValue="formModel.searchValue"
+             search-input-placeholder="输入名称/地址"
              create-card-position="head"
-             :card-height="176"
+             :card-height="174"
              :loading="loading"
              :fieldConfig="fieldConfig"
              :list="list"
@@ -76,7 +77,7 @@
               size="small"
               ref="formRef"
               label-align="right"
-              :style="{ width: '300px' }"
+              :style="{ width: '320px' }"
               :label-col-props="{ span: 6 }"
               :wrapper-col-props="{ span: 18 }">
         <!-- id -->
diff --git a/orion-ops-ui/src/views/asset/host/types/card.fields.ts b/orion-ops-ui/src/views/asset/host/types/card.fields.ts
index 3662dee5..7f9dd176 100644
--- a/orion-ops-ui/src/views/asset/host/types/card.fields.ts
+++ b/orion-ops-ui/src/views/asset/host/types/card.fields.ts
@@ -1,6 +1,6 @@
 import { CardField, CardFieldConfig } from '@/types/card';
 
-export const fieldConfig = {
+const fieldConfig = {
   rowGap: '10px',
   labelSpan: 8,
   fields: [