diff --git a/orion-ops-launch/src/main/java/com/orion/ops/launch/generator/template/Table.java b/orion-ops-launch/src/main/java/com/orion/ops/launch/generator/template/Table.java
index bee5e18d..0ac46631 100644
--- a/orion-ops-launch/src/main/java/com/orion/ops/launch/generator/template/Table.java
+++ b/orion-ops-launch/src/main/java/com/orion/ops/launch/generator/template/Table.java
@@ -100,6 +100,11 @@ public class Table {
      */
     protected boolean enableRowSelection;
 
+    /**
+     * 使用卡片视图
+     */
+    protected boolean enableCardView;
+
     /**
      * 生成的枚举文件
      */
diff --git a/orion-ops-launch/src/main/java/com/orion/ops/launch/generator/template/VueTemplate.java b/orion-ops-launch/src/main/java/com/orion/ops/launch/generator/template/VueTemplate.java
index f2a059b0..562a2488 100644
--- a/orion-ops-launch/src/main/java/com/orion/ops/launch/generator/template/VueTemplate.java
+++ b/orion-ops-launch/src/main/java/com/orion/ops/launch/generator/template/VueTemplate.java
@@ -63,6 +63,16 @@ public class VueTemplate extends Template {
         return this;
     }
 
+    /**
+     * 启用卡片列表
+     *
+     * @return this
+     */
+    public VueTemplate enableCardView() {
+        table.enableCardView = true;
+        return this;
+    }
+
     /**
      * 设置枚举
      *
diff --git a/orion-ops-launch/src/main/resources/templates/orion-server-module-entity-request-query.java.vm b/orion-ops-launch/src/main/resources/templates/orion-server-module-entity-request-query.java.vm
index 26ae9d80..f4a3cbd6 100644
--- a/orion-ops-launch/src/main/resources/templates/orion-server-module-entity-request-query.java.vm
+++ b/orion-ops-launch/src/main/resources/templates/orion-server-module-entity-request-query.java.vm
@@ -23,6 +23,9 @@ import java.math.*;
 @EqualsAndHashCode(callSuper = true)
 @Schema(name = "${type}QueryRequest", description = "$!{table.comment} 查询请求对象")
 public class ${type}QueryRequest extends PageRequest {
+
+    @Schema(description = "搜索")
+    private String searchValue;
     #foreach($field in ${table.fields})
 
     #if("$field.propertyType" == "String" && "$field.metaInfo.jdbcType" != "LONGVARCHAR")
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 c0862706..f071d48d 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
@@ -3,6 +3,7 @@ package ${package.ServiceImpl};
 import com.alibaba.fastjson.JSON;
 import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
 import com.orion.lang.define.wrapper.DataGrid;
+import com.orion.lang.utils.Strings;
 #if($cacheMeta.enableCache)
 import com.orion.ops.framework.common.constant.Const;
 #end
@@ -262,10 +263,16 @@ public class ${table.serviceImplName} implements ${table.serviceName} {
      * @return wrapper
      */
     private LambdaQueryWrapper<${type}DO> buildQueryWrapper(${type}QueryRequest request) {
+        String searchValue = request.getSearchValue();
         return ${typeLower}DAO.wrapper()
-        #foreach($field in ${table.fields})
-                .eq(${type}DO::get${field.capitalName}, request.get${field.capitalName}())#if(!$foreach.hasNext);#end
-        #end
+                #foreach($field in ${table.fields})
+                .eq(${type}DO::get${field.capitalName}, request.get${field.capitalName}())
+                #end
+                .and(Strings.isNotEmpty(searchValue), c -> c
+                        #foreach($field in ${table.fields})
+                        .eq(${type}DO::get${field.capitalName}, searchValue)
+                        #end
+                );
     }
 
 }
diff --git a/orion-ops-launch/src/main/resources/templates/orion-vue-api.ts.vm b/orion-ops-launch/src/main/resources/templates/orion-vue-api.ts.vm
index a385001a..8e4b4240 100644
--- a/orion-ops-launch/src/main/resources/templates/orion-vue-api.ts.vm
+++ b/orion-ops-launch/src/main/resources/templates/orion-vue-api.ts.vm
@@ -33,6 +33,7 @@ export interface ${vue.featureEntity}UpdateRequest extends ${vue.featureEntity}C
  * ${table.comment}查询请求
  */
 export interface ${vue.featureEntity}QueryRequest extends Pagination {
+  searchValue?: string;
   #foreach($field in ${table.fields})
   #if("$field.propertyType" == "String" || "$field.propertyType" == "Date")
   ${field.propertyName}?: string;
diff --git a/orion-ops-launch/src/main/resources/templates/orion-vue-views-components-host-card-list.vue.vm b/orion-ops-launch/src/main/resources/templates/orion-vue-views-components-host-card-list.vue.vm
new file mode 100644
index 00000000..b5fe97a5
--- /dev/null
+++ b/orion-ops-launch/src/main/resources/templates/orion-vue-views-components-host-card-list.vue.vm
@@ -0,0 +1,181 @@
+<template>
+  <card-list v-model:searchValue="formModel.searchValue"
+             create-card-position="head"
+             :card-height="172"
+             :loading="loading"
+             :fieldConfig="fieldConfig"
+             :list="list"
+             :pagination="pagination"
+             :card-layout-cols="cardColLayout"
+             :filter-count="filterCount"
+             :add-permission="['${package.ModuleName}:${typeHyphen}:create']"
+             @add="emits('openAdd')"
+             @reset="reset"
+             @search="fetchTableData"
+             @page-change="fetchTableData">
+    <!-- 拓展操作 -->
+    <template #extra="{ record }">
+      <a-space>
+        <!-- 更多操作 -->
+        <a-dropdown trigger="hover">
+          <icon-more class="card-extra-icon" />
+          <template #content>
+            <!-- 修改 -->
+            <a-doption v-permission="['${package.ModuleName}:${typeHyphen}:update']"
+                       @click="emits('openUpdate', record)">
+              <icon-edit />
+              修改
+            </a-doption>
+            <!-- 删除 -->
+            <a-doption v-permission="['${package.ModuleName}:${typeHyphen}:delete']"
+                       class="span-red"
+                       @click="deleteRow(record.id)">
+              <icon-delete />
+              删除
+            </a-doption>
+          </template>
+        </a-dropdown>
+      </a-space>
+    </template>
+    <!-- 过滤条件 -->
+    <template #filterContent>
+      <a-form :model="formModel"
+              class="modal-form"
+              size="small"
+              ref="formRef"
+              label-align="right"
+              :style="{ width: '300px' }"
+              :label-col-props="{ span: 6 }"
+              :wrapper-col-props="{ span: 18 }">
+        #foreach($field in ${table.fields})
+        <!-- $field.comment -->
+        <a-form-item field="${field.propertyName}" label="${field.comment}" label-col-flex="50px">
+        #if(${vue.enums.containsKey(${field.propertyName})})
+        <a-select v-model="formModel.${field.propertyName}"
+                  :options="toOptions(${vue.enums.get(${field.propertyName}).className})"
+                  placeholder="请选择${field.comment}"
+                  allow-clear />
+        #else
+        #if("$field.propertyType" == "Integer" || "$field.propertyType" == "Long")
+        <a-input-number v-model="formModel.${field.propertyName}"
+                        placeholder="请输入${field.comment}"
+                        allow-clear
+                        hide-button />
+        #elseif("$field.propertyType" == "Date")
+        <a-date-picker v-model="formModel.${field.propertyName}"
+                       style="width: 100%"
+                       placeholder="请选择${field.comment}"
+                       show-time
+                       allow-clear />
+        #else
+        <a-input v-model="formModel.${field.propertyName}" placeholder="请输入${field.comment}" allow-clear />
+        #end
+        #end
+      </a-form-item>
+      #end
+      </a-form>
+    </template>
+  </card-list>
+</template>
+
+<script lang="ts">
+  export default {
+    name: '${vue.module}-${vue.feature}-card-list'
+  };
+</script>
+
+<script setup lang="ts">
+  import { usePagination, useColLayout } from '@/types/card';
+  import { computed, reactive, ref } from 'vue';
+  import useLoading from '@/hooks/loading';
+  import { dataColor, objectTruthKeyCount, resetObject } from '@/utils';
+  import fieldConfig from '../types/card.fields';
+  import { deleteHost, getHostPage, HostQueryRequest, HostQueryResponse } from '@/api/asset/host';
+  import { Message } from '@arco-design/web-vue';
+  import { tagColor } from '@/views/asset/host/types/const';
+  import TagMultiSelector from '@/components/tag/tag-multi-selector.vue';
+  import useCopy from '@/hooks/copy';
+
+  const { copy } = useCopy();
+  const { loading, setLoading } = useLoading();
+  const cardColLayout = useColLayout();
+  const pagination = usePagination();
+  const list = ref<HostQueryResponse[]>([]);
+  const emits = defineEmits(['openAdd', 'openUpdate', 'openUpdateConfig']);
+
+  const formModel = reactive<HostQueryRequest>({
+    searchValue: undefined,
+    id: undefined,
+    name: undefined,
+    code: undefined,
+    address: undefined,
+    favorite: undefined,
+    tags: undefined,
+    extra: true
+  });
+
+  // 条件数量
+  const filterCount = computed(() => {
+    return objectTruthKeyCount(formModel, ['searchValue', 'extra']);
+  });
+
+  // 删除当前行
+  const deleteRow = async (id: number) => {
+    try {
+      setLoading(true);
+      // 调用删除接口
+      await deleteHost(id);
+      Message.success('删除成功');
+      // 重新加载数据
+      await fetchTableData();
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 添加后回调
+  const addedCallback = () => {
+    fetchTableData();
+  };
+
+  // 更新后回调
+  const updatedCallback = () => {
+    fetchTableData();
+  };
+
+  defineExpose({
+    addedCallback, updatedCallback
+  });
+
+  // 重置条件
+  const reset = () => {
+    resetObject(formModel, ['extra']);
+    fetchTableData();
+  };
+
+  // 加载数据
+  const doFetchTableData = async (request: HostQueryRequest) => {
+    try {
+      setLoading(true);
+      const { data } = await getHostPage(request);
+      list.value = data.rows;
+      pagination.total = data.total;
+      pagination.current = request.page;
+      pagination.pageSize = request.limit;
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 切换页码
+  const fetchTableData = (page = 1, limit = pagination.pageSize, form = formModel) => {
+    doFetchTableData({ page, limit, ...form });
+  };
+  fetchTableData();
+
+</script>
+
+<style scoped lang="less">
+</style>
diff --git a/orion-ops-launch/src/main/resources/templates/orion-vue-views-components-table.vue.vm b/orion-ops-launch/src/main/resources/templates/orion-vue-views-components-table.vue.vm
index 70d655b0..7039b3b0 100644
--- a/orion-ops-launch/src/main/resources/templates/orion-vue-views-components-table.vue.vm
+++ b/orion-ops-launch/src/main/resources/templates/orion-vue-views-components-table.vue.vm
@@ -133,13 +133,13 @@
 <script lang="ts" setup>
   import { reactive, ref } from 'vue';
   import { batchDelete${vue.featureEntity}, delete${vue.featureEntity}, get${vue.featureEntity}Page, ${vue.featureEntity}QueryRequest, ${vue.featureEntity}QueryResponse } from '@/api/${vue.module}/${vue.feature}';
-  import { Message, PaginationProps } from '@arco-design/web-vue';
+  import { Message } from '@arco-design/web-vue';
   import useLoading from '@/hooks/loading';
   import columns from '../types/table.columns';
   #if($vue.enableRowSelection)
-  import { defaultPagination, defaultRowSelection } from '@/types/table';
+  import { usePagination, useRowSelection } from '@/types/table';
   #else
-  import { defaultPagination } from '@/types/table';
+  import { usePagination } from '@/types/table';
   #end
   import {} from '../types/const';
   #if($vue.enums.isEmpty())
@@ -153,10 +153,10 @@
   const { loading, setLoading } = useLoading();
   const emits = defineEmits(['openAdd', 'openUpdate']);
 
-  const pagination = reactive(defaultPagination()) as PaginationProps;
+  const pagination = usePagination();
   #if($vue.enableRowSelection)
   const selectedKeys = ref<number[]>([]);
-  const rowSelection = reactive(defaultRowSelection());
+  const rowSelection = useRowSelection();
   #end
 
   const formModel = reactive<${vue.featureEntity}QueryRequest>({
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 61fb850b..946bf48e 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
@@ -1,19 +1,32 @@
 <template>
   <div class="layout-container">
-    <!-- 表格 -->
+    #if($vue.enableCardView)
+    <!-- 列表-表格 -->
+    <${vue.feature}-table v-if="renderTable"
+                  ref="table"
+                  @openAdd="() =>#if($vue.enableDrawerForm) drawer#else modal#end.openAdd()"
+                  @openUpdate="(e) =>#if($vue.enableDrawerForm) drawer#else modal#end.openUpdate(e)" />
+    <!-- 列表-卡片 -->
+    <${vue.feature}-card-list v-else
+                  ref="card"
+                  @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)" />
+    #end
     #if($vue.enableDrawerForm)
     <!-- 添加修改模态框 -->
     <${vue.feature}-form-drawer ref="drawer"
-                   @added="() => table.addedCallback()"
-                   @updated="() => table.updatedCallback()" />
+                   @added="modalAddCallback"
+                   @updated="modalAddCallback" />
     #else
     <!-- 添加修改模态框 -->
     <${vue.feature}-form-modal ref="modal"
-                   @added="() => table.addedCallback()"
-                   @updated="() => table.updatedCallback()" />
+                   @added="modalAddCallback"
+                   @updated="modalAddCallback" />
     #end
   </div>
 </template>
@@ -35,11 +48,45 @@
   import { ref } from 'vue';
 
   const table = ref();
+  #if($vue.enableCardView)
+  const card = ref();
+  #end
   #if($vue.enableDrawerForm)
   const drawer = ref();
   #else
   const modal = ref();
   #end
+  #if($vue.enableCardView)
+  const appStore = useAppStore();
+
+  const renderTable = computed(() => appStore.${vue.featureEntityFirstLower}View === 'table');
+  #end
+
+  // 添加回调
+  const modalAddCallback = () => {
+    #if($vue.enableCardView)
+    if (renderTable.value) {
+      table.value.addedCallback();
+    } else {
+      card.value.addedCallback();
+    }
+    #else
+    table.value.addedCallback();
+    #end
+  };
+
+  // 修改回调
+  const modalUpdateCallback = () => {
+    #if($vue.enableCardView)
+    if (renderTable.value) {
+      table.value.updatedCallback();
+    } else {
+      card.value.updatedCallback();
+    }
+    #else
+    table.value.updatedCallback();
+    #end
+  };
 
 </script>
 
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
new file mode 100644
index 00000000..7e3e714d
--- /dev/null
+++ b/orion-ops-launch/src/main/resources/templates/orion-vue-views-types-card.fields.ts.vm
@@ -0,0 +1,22 @@
+import { CardField, CardFieldConfig } from '@/types/card';
+import { dateFormat } from '@/utils';
+
+export const fieldConfig = {
+  rowGap: '10px',
+  labelSpan: 8,
+  fields: [
+    #foreach($field in ${table.fields}){
+      label: '${field.comment}',
+      dataIndex: '${field.propertyName}',
+      slotName: '${field.propertyName}',
+      #if(${field.propertyType} == 'String')
+      ellipsis: true,
+      #elseif(${field.propertyType} == 'Date')
+      render: ({ record }) => {
+        return record.${field.propertyName} && dateFormat(new Date(record.${field.propertyName}));
+      },
+      #end
+    }, #end
+  ] 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/HostQueryRequest.java b/orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/entity/request/host/HostQueryRequest.java
index 5426ab5e..0438698c 100644
--- a/orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/entity/request/host/HostQueryRequest.java
+++ b/orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/entity/request/host/HostQueryRequest.java
@@ -22,6 +22,9 @@ import java.util.List;
 @Schema(name = "HostQueryRequest", description = "主机 查询请求对象")
 public class HostQueryRequest 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/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 c55982e4..0c0788b5 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
@@ -4,6 +4,7 @@ import com.alibaba.fastjson.JSON;
 import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
 import com.orion.lang.define.wrapper.DataGrid;
 import com.orion.lang.utils.Booleans;
+import com.orion.lang.utils.Strings;
 import com.orion.lang.utils.collect.Lists;
 import com.orion.ops.framework.common.constant.ErrorMessage;
 import com.orion.ops.framework.common.utils.Valid;
@@ -249,11 +250,17 @@ public class HostServiceImpl implements HostService {
             }
         }
         // 基础条件
+        String searchValue = request.getSearchValue();
         LambdaQueryWrapper<HostDO> wrapper = hostDAO.wrapper()
                 .eq(HostDO::getId, request.getId())
                 .like(HostDO::getName, request.getName())
                 .like(HostDO::getCode, request.getCode())
-                .like(HostDO::getAddress, request.getAddress());
+                .like(HostDO::getAddress, request.getAddress())
+                .and(Strings.isNotEmpty(searchValue), c -> c
+                        .like(HostDO::getName, searchValue)
+                        .like(HostDO::getCode, searchValue)
+                        .like(HostDO::getAddress, searchValue)
+                );
         if (setIdList) {
             wrapper.in(HostDO::getId, idList);
         }
diff --git a/orion-ops-ui/src/components/card/list/index.vue b/orion-ops-ui/src/components/card/list/index.vue
index f00d6278..94f17d89 100644
--- a/orion-ops-ui/src/components/card/list/index.vue
+++ b/orion-ops-ui/src/components/card/list/index.vue
@@ -163,10 +163,12 @@
                            ]">
                       <slot :name="field.slotName" :record="item" :index="index" :key="item[key]">
                         <a-tooltip v-if="field.tooltip" :content="item[field.dataIndex]">
-                          <span>{{ item[field.dataIndex] }}</span>
+                          <span v-if="field.render" v-html="field.render({ record: item, index })" />
+                          <span v-else>{{ item[field.dataIndex] }}</span>
                         </a-tooltip>
                         <template v-else>
-                          <span>{{ item[field.dataIndex] }}</span>
+                          <span v-if="field.render" v-html="field.render({ record: item, index })" />
+                          <span v-else>{{ item[field.dataIndex] }}</span>
                         </template>
                       </slot>
                     </a-col>
diff --git a/orion-ops-ui/src/types/card.ts b/orion-ops-ui/src/types/card.ts
index ac307fd3..3dc8e5bc 100644
--- a/orion-ops-ui/src/types/card.ts
+++ b/orion-ops-ui/src/types/card.ts
@@ -1,5 +1,5 @@
 import { PaginationProps, ResponsiveValue } from '@arco-design/web-vue';
-import { reactive } from 'vue';
+import { reactive, VNodeChild } from 'vue';
 
 /**
  * 字段对齐方式
@@ -48,6 +48,10 @@ export interface CardField {
   valueClass?: string;
   ellipsis?: boolean;
   tooltip?: boolean;
+  render?: (data: {
+    record: CardRecord;
+    index: number;
+  }) => VNodeChild;
 }
 
 /**
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 0e4c4a05..02863e40 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
@@ -59,7 +59,9 @@
               配置
             </a-doption>
             <!-- 删除 -->
-            <a-doption class="span-red" @click="deleteRow(record.id)">
+            <a-doption v-permission="['asset:host:delete']"
+                       class="span-red"
+                       @click="deleteRow(record.id)">
               <icon-delete />
               删除
             </a-doption>
@@ -111,7 +113,7 @@
 
 <script lang="ts">
   export default {
-    name: 'host-card-list'
+    name: 'asset-host-card-list'
   };
 </script>
 
diff --git a/orion-ops-ui/src/views/asset/host/index.vue b/orion-ops-ui/src/views/asset/host/index.vue
index 61f2b8ce..3efef31c 100644
--- a/orion-ops-ui/src/views/asset/host/index.vue
+++ b/orion-ops-ui/src/views/asset/host/index.vue
@@ -44,8 +44,7 @@
   const appStore = useAppStore();
   const cacheStore = useCacheStore();
 
-  // FIXME 临时
-  const renderTable = computed(() => appStore.hostView === 'card');
+  const renderTable = computed(() => appStore.hostView === 'table');
 
   // 添加回调
   const modalAddCallback = () => {
@@ -58,7 +57,6 @@
 
   // 修改回调
   const modalUpdateCallback = () => {
-    console.log(renderTable.value);
     if (renderTable.value) {
       table.value.updatedCallback();
     } else {
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 076c81c2..3662dee5 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
@@ -18,7 +18,7 @@ export const fieldConfig = {
       label: '主机标签',
       dataIndex: 'tags',
       slotName: 'tags',
-      rowAlign: 'start'
+      rowAlign: 'start',
     },
   ] as CardField[]
 } as CardFieldConfig;