添加主机身份卡片视图.

orion-ops-launch/src/main/java/com/orion/ops/launch/generator/CodeGenerator.java

@@ -56,10 +56,9 @@ public class CodeGenerator {
                 //         .values("value", 1, 2)
                 //         .color("blue", "green")
                 //         .build(),
-                Template.create("host_key", "主机秘钥", "host")
+                Template.create("host_identity", "主机身份", "host")
-                        .vue("asset", "host-key")
+                        .vue("asset", "host-identity")
                         .enableCardView()
-                        .enableDrawerForm()
                         .build()
         };
         // jdbc 配置 - 使用配置文件

orion-ops-launch/src/main/resources/templates/orion-vue-views-components-card-list.vue.vm

@@ -71,28 +71,28 @@
         #foreach($field in ${table.fields})
         <!-- $field.comment -->
         <a-form-item field="${field.propertyName}" label="${field.comment}">
-        #if(${vue.enums.containsKey(${field.propertyName})})
+          #if(${vue.enums.containsKey(${field.propertyName})})
-        <a-select v-model="formModel.${field.propertyName}"
+          <a-select v-model="formModel.${field.propertyName}"
-                  :options="toOptions(${vue.enums.get(${field.propertyName}).className})"
+                    :options="toOptions(${vue.enums.get(${field.propertyName}).className})"
-                  placeholder="请选择${field.comment}"
+                    placeholder="请选择${field.comment}"
-                  allow-clear />
+                    allow-clear />
-        #else
+          #else
-        #if("$field.propertyType" == "Integer" || "$field.propertyType" == "Long")
+          #if("$field.propertyType" == "Integer" || "$field.propertyType" == "Long")
-        <a-input-number v-model="formModel.${field.propertyName}"
+          <a-input-number v-model="formModel.${field.propertyName}"
-                        placeholder="请输入${field.comment}"
+                          placeholder="请输入${field.comment}"
-                        allow-clear
+                          allow-clear
-                        hide-button />
+                          hide-button />
-        #elseif("$field.propertyType" == "Date")
+          #elseif("$field.propertyType" == "Date")
-        <a-date-picker v-model="formModel.${field.propertyName}"
+          <a-date-picker v-model="formModel.${field.propertyName}"
-                       style="width: 100%"
+                         style="width: 100%"
-                       placeholder="请选择${field.comment}"
+                         placeholder="请选择${field.comment}"
-                       show-time
+                         show-time
-                       allow-clear />
+                         allow-clear />
-        #else
+          #else
-        <a-input v-model="formModel.${field.propertyName}" placeholder="请输入${field.comment}" allow-clear />
+          <a-input v-model="formModel.${field.propertyName}" placeholder="请输入${field.comment}" allow-clear />
-        #end
+          #end
-        #end
+          #end
-      </a-form-item>
+        </a-form-item>
       #end
       </a-form>
     </template>
@@ -120,6 +120,7 @@
   const list = ref<${vue.featureEntity}QueryResponse[]>([]);
   const emits = defineEmits(['openAdd', 'openUpdate']);
 
+  const formRef = ref();
   const formModel = reactive<${vue.featureEntity}QueryRequest>({
     searchValue: undefined,
     #foreach($field in ${table.fields})
@@ -135,7 +136,7 @@
   // 删除当前行
   const deleteRow = (id: number) => {
     Modal.confirm({
-      title: '删除前确认?',
+      title: '删除前确认!',
       titleAlign: 'start',
       content: '确定要删除这条记录吗?',
       okText: '删除',

orion-ops-launch/src/main/resources/templates/orion-vue-views-index.vue.vm

@@ -38,12 +38,6 @@
 </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
@@ -54,6 +48,13 @@
   import ${vue.featureEntity}FormModal from './components/${vue.feature}-form-modal.vue';
   #end
 
+  #if($vue.enableCardView)
+  import { computed, ref } from 'vue';
+  import { useAppStore } from '@/store';
+  #else
+  import { ref } from 'vue';
+  #end
+
   const table = ref();
   #if($vue.enableCardView)
   const card = ref();

orion-ops-launch/src/main/resources/templates/orion-vue-views-types-card.fields.ts.vm

@@ -2,7 +2,7 @@ import { CardField, CardFieldConfig } from '@/types/card';
 import { dateFormat } from '@/utils';
 
 const fieldConfig = {
-  rowGap: '10px',
+  rowGap: '12px',
   labelSpan: 8,
   fields: [
     {
@@ -21,28 +21,28 @@ const fieldConfig = {
       },
       #end
     }, #end#end{
-     label: '创建时间',
+      label: '创建时间',
-     dataIndex: 'createTime',
+      dataIndex: 'createTime',
-     slotName: 'createTime',
+      slotName: 'createTime',
-     render: ({ record }) => {
+      render: ({ record }) => {
-       return dateFormat(new Date(record.createTime));
+        return dateFormat(new Date(record.createTime));
-     },
+      },
-   }, {
+    }, {
-     label: '修改时间',
+      label: '修改时间',
-     dataIndex: 'updateTime',
+      dataIndex: 'updateTime',
-     slotName: 'updateTime',
+      slotName: 'updateTime',
-     render: ({ record }) => {
+      render: ({ record }) => {
-       return dateFormat(new Date(record.updateTime));
+        return dateFormat(new Date(record.updateTime));
-     },
+      },
-   }, {
+    }, {
-     label: '创建人',
+      label: '创建人',
-     dataIndex: 'creator',
+      dataIndex: 'creator',
-     slotName: 'creator',
+      slotName: 'creator',
-   }, {
+    }, {
-     label: '修改人',
+      label: '修改人',
-     dataIndex: 'updater',
+      dataIndex: 'updater',
-     slotName: 'updater',
+      slotName: 'updater',
-   }
+    }
   ] as CardField[]
 } as CardFieldConfig;
 

orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/entity/request/host/HostIdentityQueryRequest.java

@@ -21,6 +21,9 @@ import javax.validation.constraints.Size;
 @Schema(name = "HostIdentityQueryRequest", description = "主机身份 查询请求对象")
 public class HostIdentityQueryRequest extends PageRequest {
 
+    @Schema(description = "搜索")
+    private String searchValue;
+
     @Schema(description = "id")
     private Long id;
 

orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/service/impl/HostIdentityServiceImpl.java

@@ -5,6 +5,7 @@ import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
 import com.baomidou.mybatisplus.core.conditions.update.LambdaUpdateWrapper;
 import com.baomidou.mybatisplus.core.toolkit.Wrappers;
 import com.orion.lang.define.wrapper.DataGrid;
+import com.orion.lang.utils.Strings;
 import com.orion.ops.framework.common.constant.Const;
 import com.orion.ops.framework.common.constant.ErrorMessage;
 import com.orion.ops.framework.common.security.PasswordModifier;
@@ -216,11 +217,17 @@ public class HostIdentityServiceImpl implements HostIdentityService {
      * @return wrapper
      */
     private LambdaQueryWrapper<HostIdentityDO> buildQueryWrapper(HostIdentityQueryRequest request) {
+        String searchValue = request.getSearchValue();
         return hostIdentityDAO.wrapper()
                 .eq(HostIdentityDO::getId, request.getId())
                 .like(HostIdentityDO::getName, request.getName())
                 .like(HostIdentityDO::getUsername, request.getUsername())
-                .eq(HostIdentityDO::getKeyId, request.getKeyId());
+                .eq(HostIdentityDO::getKeyId, request.getKeyId())
+                .and(Strings.isNotEmpty(searchValue), c -> c
+                        .eq(HostIdentityDO::getId, searchValue).or()
+                        .like(HostIdentityDO::getName, searchValue).or()
+                        .like(HostIdentityDO::getUsername, searchValue)
+                );
     }
 
 }

orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/service/impl/HostServiceImpl.java

@@ -257,6 +257,7 @@ public class HostServiceImpl implements HostService {
                 .like(HostDO::getCode, request.getCode())
                 .like(HostDO::getAddress, request.getAddress())
                 .and(Strings.isNotEmpty(searchValue), c -> c
+                        .eq(HostDO::getId, searchValue).or()
                         .like(HostDO::getName, searchValue).or()
                         .like(HostDO::getCode, searchValue).or()
                         .like(HostDO::getAddress, searchValue)

orion-ops-ui/src/api/asset/host-identity.ts

@@ -24,10 +24,10 @@ export interface HostIdentityUpdateRequest extends HostIdentityCreateRequest {
  * 主机身份查询请求
  */
 export interface HostIdentityQueryRequest extends Pagination {
+  searchValue?: string;
   id?: number;
   name?: string;
   username?: string;
-  password?: string;
   keyId?: number;
 }
 

orion-ops-ui/src/components/card/list/index.vue

@@ -144,8 +144,9 @@
                   <template v-for="(field, index) in fieldConfig.fields">
                     <a-row :align="fieldConfig.rowAlign || field.rowAlign || 'center'"
                            :style="{
-                           'margin-bottom': index !== fieldConfig.fields.length - 1 ? (fieldConfig.rowGap || '10px') : false,
+                           'margin-bottom': index !== fieldConfig.fields.length - 1 ? (fieldConfig.rowGap || '12px') : false,
-                           'height': fieldConfig.height || field.height || 'unset'
+                           'height': fieldConfig.height || field.height || 'unset',
+                           'min-height': fieldConfig.minHeight || field.minHeight || 'unset'
                          }">
                       <!-- label -->
                       <a-col :span="fieldConfig.labelSpan || 8" :offset="fieldConfig.labelOffset || 0"

orion-ops-ui/src/types/card.ts

@@ -29,6 +29,7 @@ export interface CardFieldConfig {
   valueAlign?: Align;
   rowAlign?: RowAlign;
   height?: string;
+  minHeight?: string;
   labelClass?: string;
   valueClass?: string;
 
@@ -44,6 +45,7 @@ export interface CardField {
   slotName?: string;
   rowAlign?: RowAlign;
   height?: string;
+  minHeight?: string;
   labelClass?: string;
   valueClass?: string;
   ellipsis?: boolean;

orion-ops-ui/src/views/asset/host-identity/components/host-identity-card-list.vue

@@ -0,0 +1,230 @@
+<template>
+  <card-list v-model:searchValue="formModel.searchValue"
+             search-input-placeholder="输入id/名称/用户名"
+             create-card-position="head"
+             :card-height="184"
+             :loading="loading"
+             :fieldConfig="fieldConfig"
+             :list="list"
+             :pagination="pagination"
+             :card-layout-cols="cardColLayout"
+             :filter-count="filterCount"
+             :add-permission="['asset:host-identity:create']"
+             @add="emits('openAdd')"
+             @reset="reset"
+             @search="fetchCardData"
+             @page-change="fetchCardData">
+    <!-- 标题 -->
+    <template #title="{ record }">
+      {{ record.name }}
+    </template>
+    <!-- 用户名 -->
+    <template #username="{ record }">
+      <a-tooltip content="点击复制">
+          <span class="pointer span-blue" @click="copy(record.username)">
+            <icon-copy class="mr4" />{{ record.username }}
+          </span>
+      </a-tooltip>
+    </template>
+    <!-- 秘钥名称 -->
+    <template #keyId="{ record }">
+      <template v-if="record.keyId">
+        <!-- 可查看详情 -->
+        <a-tooltip v-if="hasAnyPermission(['asset:host-key:detail', 'asset:host-key:update'])"
+                   content="点击查看详情">
+          <a-tag :checked="true"
+                 checkable
+                 @click="emits('openKeyView',{id: record.keyId})">
+            {{ record.keyName }}
+          </a-tag>
+        </a-tooltip>
+        <!-- 不可查看详情 -->
+        <a-tag v-else>
+          {{ record.keyName }}
+        </a-tag>
+      </template>
+    </template>
+    <!-- 拓展操作 -->
+    <template #extra="{ record }">
+      <a-space>
+        <!-- 更多操作 -->
+        <a-dropdown trigger="hover">
+          <icon-more class="card-extra-icon" />
+          <template #content>
+            <!-- 修改 -->
+            <a-doption v-permission="['asset:host-identity:update']"
+                       @click="emits('openUpdate', record)">
+              <icon-edit />
+              修改
+            </a-doption>
+            <!-- 删除 -->
+            <a-doption v-permission="['asset:host-identity:delete']"
+                       class="span-red"
+                       @click="deleteRow(record.id)">
+              <icon-delete />
+              删除
+            </a-doption>
+          </template>
+        </a-dropdown>
+      </a-space>
+    </template>
+    <!-- 右键菜单 -->
+    <template #contextMenu="{ record }">
+      <!-- 修改 -->
+      <a-doption v-permission="['asset:host-identity:update']"
+                 @click="emits('openUpdate', record)">
+        <icon-edit />
+        修改
+      </a-doption>
+      <!-- 删除 -->
+      <a-doption v-permission="['asset:host-identity:delete']"
+                 class="span-red"
+                 @click="deleteRow(record.id)">
+        <icon-delete />
+        删除
+      </a-doption>
+    </template>
+    <!-- 过滤条件 -->
+    <template #filterContent>
+      <a-form :model="formModel"
+              class="modal-form"
+              size="small"
+              ref="formRef"
+              label-align="right"
+              :style="{ width: '320px' }"
+              :label-col-props="{ span: 6 }"
+              :wrapper-col-props="{ span: 18 }">
+        <!-- id -->
+        <a-form-item field="id" label="id">
+          <a-input-number v-model="formModel.id"
+                          placeholder="请输入id"
+                          allow-clear
+                          hide-button />
+        </a-form-item>
+        <!-- 名称 -->
+        <a-form-item field="name" label="名称">
+          <a-input v-model="formModel.name" placeholder="请输入名称" allow-clear />
+        </a-form-item>
+        <!-- 用户名 -->
+        <a-form-item field="username" label="用户名">
+          <a-input v-model="formModel.username" placeholder="请输入用户名" allow-clear />
+        </a-form-item>
+        <!-- 主机秘钥 -->
+        <a-form-item field="keyId" label="主机秘钥">
+          <host-key-selector v-model="formModel.keyId" allow-clear />
+        </a-form-item>
+      </a-form>
+    </template>
+  </card-list>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'asset-host-identity-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 { objectTruthKeyCount, resetObject } from '@/utils';
+  import fieldConfig from '../types/card.fields';
+  import { deleteHostIdentity, getHostIdentityPage, HostIdentityQueryRequest, HostIdentityQueryResponse } from '@/api/asset/host-identity';
+  import { Message, Modal } from '@arco-design/web-vue';
+  import usePermission from '@/hooks/permission';
+  import useCopy from '@/hooks/copy';
+  import HostKeySelector from '@/components/asset/host-key/host-key-selector.vue';
+
+  const { copy } = useCopy();
+  const { hasAnyPermission } = usePermission();
+  const { loading, setLoading } = useLoading();
+
+  const cardColLayout = useColLayout();
+  const pagination = usePagination();
+  const list = ref<HostIdentityQueryResponse[]>([]);
+  const emits = defineEmits(['openAdd', 'openUpdate', 'openKeyView']);
+
+  const formRef = ref();
+  const formModel = reactive<HostIdentityQueryRequest>({
+    searchValue: undefined,
+    id: undefined,
+    name: undefined,
+    username: undefined,
+    keyId: undefined,
+  });
+
+  // 条件数量
+  const filterCount = computed(() => {
+    return objectTruthKeyCount(formModel, ['searchValue']);
+  });
+
+  // 删除当前行
+  const deleteRow = (id: number) => {
+    Modal.confirm({
+      title: '删除前确认!',
+      titleAlign: 'start',
+      content: '确定要删除这条记录吗?',
+      okText: '删除',
+      onOk: async () => {
+        try {
+          setLoading(true);
+          // 调用删除接口
+          await deleteHostIdentity(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: HostIdentityQueryRequest) => {
+    try {
+      setLoading(true);
+      const { data } = await getHostIdentityPage(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>

orion-ops-ui/src/views/asset/host-identity/components/host-identity-table.vue

@@ -127,8 +127,6 @@
   import useLoading from '@/hooks/loading';
   import columns from '../types/table.columns';
   import { usePagination } from '@/types/table';
-  import { getHostKeyList } from '@/api/asset/host-key';
-  import { useCacheStore } from '@/store';
   import HostKeySelector from '@/components/asset/host-key/host-key-selector.vue';
   import useCopy from '@/hooks/copy';
   import usePermission from '@/hooks/permission';
@@ -140,7 +138,6 @@
   const { loading, setLoading } = useLoading();
   const emits = defineEmits(['openAdd', 'openUpdate', 'openKeyView']);
 
-  const cacheStore = useCacheStore();
   const pagination = usePagination();
 
   const formModel = reactive<HostIdentityQueryRequest>({
@@ -202,16 +199,6 @@
   };
   fetchTableData();
 
-  // 获取主机秘钥列表
-  const fetchHostKeyList = async () => {
-    try {
-      const { data } = await getHostKeyList();
-      cacheStore.set('hostKeys', data);
-    } catch (e) {
-    }
-  };
-  fetchHostKeyList();
-
 </script>
 
 <style lang="less" scoped>

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

@@ -1,14 +1,21 @@
 <template>
   <div class="layout-container">
-    <!-- 表格 -->
+    <!-- 列表-表格 -->
-    <host-identity-table ref="table"
+    <host-identity-table v-if="renderTable"
+                         ref="table"
                          @openAdd="() => modal.openAdd()"
                          @openUpdate="(e) => modal.openUpdate(e)"
                          @openKeyView="(e) => keyDrawer.openView(e) " />
+    <!-- 列表-卡片 -->
+    <host-identity-card-list v-else
+                             ref="card"
+                             @openAdd="() => modal.openAdd()"
+                             @openUpdate="(e) => modal.openUpdate(e)"
+                             @openKeyView="(e) => keyDrawer.openView(e) " />
     <!-- 添加修改模态框 -->
     <host-identity-form-modal ref="modal"
-                              @added="() => table.addedCallback()"
+                              @added="modalAddCallback"
-                              @updated="() => table.updatedCallback()" />
+                              @updated="modalAddCallback" />
     <!-- 添加修改模态框 -->
     <host-key-form-drawer ref="keyDrawer" />
   </div>
@@ -21,16 +28,51 @@
 </script>
 
 <script lang="ts" setup>
+  import HostIdentityCardList from './components/host-identity-card-list.vue';
   import HostIdentityTable from './components/host-identity-table.vue';
   import HostIdentityFormModal from './components/host-identity-form-modal.vue';
   import HostKeyFormDrawer from '../host-key/components/host-key-form-drawer.vue';
+  import { getHostKeyList } from '@/api/asset/host-key';
 
-  import { onUnmounted, ref } from 'vue';
+  import { onUnmounted, ref, computed } from 'vue';
-  import { useCacheStore } from '@/store';
+  import { useAppStore, useCacheStore } from '@/store';
 
   const table = ref();
+  const card = ref();
   const modal = ref();
   const keyDrawer = ref();
+  const appStore = useAppStore();
+  const cacheStore = useCacheStore();
+
+  const renderTable = computed(() => appStore.hostIdentityView === '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();
+    }
+  };
+
+  // 获取主机秘钥列表
+  const fetchHostKeyList = async () => {
+    try {
+      const { data } = await getHostKeyList();
+      cacheStore.set('hostKeys', data);
+    } catch (e) {
+    }
+  };
+  fetchHostKeyList();
 
   // 卸载时清除 tags cache
   onUnmounted(() => {

orion-ops-ui/src/views/asset/host-identity/types/card.fields.ts

@@ -0,0 +1,33 @@
+import { CardField, CardFieldConfig } from '@/types/card';
+import { dateFormat } from '@/utils';
+
+const fieldConfig = {
+  rowGap: '12px',
+  labelSpan: 8,
+  fields: [
+    {
+      label: 'id',
+      dataIndex: 'id',
+      slotName: 'id',
+    }, {
+      label: '用户名',
+      dataIndex: 'username',
+      slotName: 'username',
+      ellipsis: true,
+    }, {
+      label: '主机秘钥',
+      dataIndex: 'keyId',
+      slotName: 'keyId',
+      height: '24px',
+    }, {
+      label: '修改时间',
+      dataIndex: 'updateTime',
+      slotName: 'updateTime',
+      render: ({ record }) => {
+        return dateFormat(new Date(record.updateTime));
+      },
+    }
+  ] as CardField[]
+} as CardFieldConfig;
+
+export default fieldConfig;

orion-ops-ui/src/views/asset/host-key/components/host-key-card-list.vue

@@ -1,6 +1,6 @@
 <template>
   <card-list v-model:searchValue="formModel.searchValue"
-             search-input-placeholder="输入名称/id"
+             search-input-placeholder="输入id/名称"
              create-card-position="head"
              :card-height="148"
              :loading="loading"
@@ -101,7 +101,7 @@
   // 删除当前行
   const deleteRow = (id: number) => {
     Modal.confirm({
-      title: '删除前确认?',
+      title: '删除前确认!',
       titleAlign: 'start',
       content: '确定要删除这条记录吗?',
       okText: '删除',

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

@@ -26,12 +26,13 @@
 </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 { computed, ref } from 'vue';
+  import { useAppStore } from '@/store';
+
   const table = ref();
   const card = ref();
   const drawer = ref();

orion-ops-ui/src/views/asset/host-key/types/card.fields.ts

@@ -2,7 +2,7 @@ import { CardField, CardFieldConfig } from '@/types/card';
 import { dateFormat } from '@/utils';
 
 const fieldConfig = {
-  rowGap: '10px',
+  rowGap: '12px',
   labelSpan: 8,
   fields: [
     {

orion-ops-ui/src/views/asset/host/components/host-card-list.vue

@@ -1,8 +1,8 @@
 <template>
   <card-list v-model:searchValue="formModel.searchValue"
-             search-input-placeholder="输入名称/地址"
+             search-input-placeholder="输入id/名称/标签/地址"
              create-card-position="head"
-             :card-height="174"
+             :card-height="214"
              :loading="loading"
              :fieldConfig="fieldConfig"
              :list="list"
@@ -160,6 +160,7 @@
   const list = ref<HostQueryResponse[]>([]);
   const emits = defineEmits(['openAdd', 'openUpdate', 'openUpdateConfig']);
 
+  const formRef = ref();
   const formModel = reactive<HostQueryRequest>({
     searchValue: undefined,
     id: undefined,
@@ -179,7 +180,7 @@
   // 删除当前行
   const deleteRow = (id: number) => {
     Modal.confirm({
-      title: '删除前确认?',
+      title: '删除前确认!',
       titleAlign: 'start',
       content: '确定要删除这条记录吗?',
       okText: '删除',

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

@@ -28,8 +28,6 @@
 </script>
 
 <script lang="ts" setup>
-  import { computed, onUnmounted, ref } from 'vue';
-  import { useAppStore, useCacheStore } from '@/store';
   import HostTable from './components/host-table.vue';
   import HostCardList from '@/views/asset/host/components/host-card-list.vue';
   import HostFormModal from './components/host-form-modal.vue';
@@ -37,6 +35,9 @@
   import { getTagList } from '@/api/meta/tag';
   import { Message } from '@arco-design/web-vue';
 
+  import { computed, onUnmounted, ref } from 'vue';
+  import { useAppStore, useCacheStore } from '@/store';
+
   const table = ref();
   const card = ref();
   const modal = ref();

orion-ops-ui/src/views/asset/host/types/card.fields.ts

@@ -1,10 +1,15 @@
 import { CardField, CardFieldConfig } from '@/types/card';
 
 const fieldConfig = {
-  rowGap: '10px',
+  rowGap: '12px',
   labelSpan: 8,
+  minHeight: '24px',
   fields: [
     {
+      label: 'id',
+      dataIndex: 'id',
+      slotName: 'id',
+    }, {
       label: '主机编码',
       dataIndex: 'code',
       slotName: 'code',
@@ -12,7 +17,6 @@ const fieldConfig = {
       label: '主机地址',
       dataIndex: 'address',
       slotName: 'address',
-      height: '24px',
       tooltip: true,
     }, {
       label: '主机标签',