修改卡片列表样式.

orion-ops-ui/src/assets/style/layout.less

@@ -67,7 +67,26 @@
 }
 
 .card-list-item {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  border-radius: 4px;
+  border: 1px solid var(--color-neutral-3);
   transition-property: all;
+
+  & > .arco-card-header {
+    padding: 16px 16px 8px 16px;
+    border: none;
+
+    .arco-card-header-title {
+      font-size: 15px;
+    }
+  }
+
+  & > .arco-card-body {
+    padding: 0 16px 16px 16px;
+    flex-grow: 1;
+  }
 }
 
 .card-list-item:hover {

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

@@ -98,7 +98,8 @@
     <a-spin class="card-list-layout-body" :loading="loading">
       <!-- 卡片列表 -->
       <a-row v-if="list.length !== 0"
-             :gutter="cardLayoutGutter">
+             :gutter="cardLayoutGutter"
+             align="stretch">
         <!-- 添加卡片 -->
         <a-col v-permission="addPermission"
                v-if="createCardPosition === 'head'"
@@ -118,18 +119,17 @@
           <a-dropdown trigger="contextMenu" alignPoint>
             <!-- 卡片 -->
             <a-card :class="[
-                    'general-card',
-                    'card-list-item',
-                    item.disabled === true ? 'card-list-item-disabled' : undefined,
-                    !!cardClass ? cardClass : undefined
-                  ]"
-                    :style="{ height: `${cardHeight}px` }"
-                    :body-style="{ height: 'calc(100% - 58px)' }"
+                      'card-list-item',
+                      item.disabled === true ? 'card-list-item-disabled' : undefined,
+                      !!cardClass ? cardClass : undefined
+                    ]"
+                    :style="{ height: cardHeight }"
                     :bordered="false"
                     :hoverable="true"
+                    :body-style="cardBodyStyle"
                     @contextmenu.prevent="() => false"
-                    @click="emits('click',item, index)"
-                    @dblclick="emits('dblclick',item, index)">
+                    @click="emits('click', item, index)"
+                    @dblclick="emits('dblclick', item, index)">
               <!-- 标题 -->
               <template #title>
                 <slot name="title" :record="item" :index="index" :key="item[key]" />
@@ -188,6 +188,8 @@
               <template v-else>
                 <slot name="card" :record="item" :index="index" :key="item[key]" />
               </template>
+              <!-- 卡片底部 -->
+              <slot name="cardFooter" :record="item" :index="index" :key="item[key]" />
             </a-card>
             <!-- 右键菜单 -->
             <template v-if="contextMenu" #content>
@@ -206,9 +208,7 @@
       </a-row>
       <!-- 空列表 -->
       <template v-else>
-        <a-card class="general-card empty-list-card"
-                :style="{ height: `${cardHeight * 2 + 16}px` }"
-                :body-style="{ height: '100%' }">
+        <a-card class="general-card empty-list-card">
           <a-empty class="empty-list-card-body" description="暂无数据" />
         </a-card>
       </template>
@@ -272,8 +272,12 @@
       type: Object as PropType<CardFieldConfig>,
       default: () => []
     },
-    cardHeight: Number,
+    cardHeight: {
+      type: String,
+      default: () => '100%'
+    },
     cardClass: String,
+    cardBodyStyle: Object,
     contextMenu: {
       type: Boolean,
       default: () => true
@@ -297,7 +301,11 @@
     },
     createCardPosition: {
       type: String as PropType<CardPosition>,
-      default: () => '暂无数据 点击此处进行创建'
+      default: () => false
+    },
+    addPermission: {
+      type: Array as PropType<String[]>,
+      default: () => []
     },
     cardLayoutGutter: {
       type: [Number, Array] as PropType<Number> |
@@ -306,10 +314,6 @@
         PropType<Array<ResponsiveValue>>,
       default: () => [16, 16]
     },
-    addPermission: {
-      type: Array as PropType<String[]>,
-      default: () => []
-    },
     cardLayoutCols: {
       type: Object as PropType<ColResponsiveValue>,
       default: () => {
@@ -336,8 +340,8 @@
     setup(props: { cardHeight: any; createCardDescription: any; }) {
       return () => {
         return h(compile(`
-          <a-card class="general-card card-list-item create-card"
-                  :style="{ height: '${props.cardHeight}px' }"
+          <a-card class="card-list-item create-card"
+                  :style="{ height: '${props.cardHeight}' }"
                   :body-style="{ height: '100%' }"
                   :bordered="false"
                   :hoverable="true">
@@ -480,32 +484,29 @@
   .empty-list-card {
 
     &-body {
-      height: 100%;
+      height: calc(100vh - @top-height - 140px);
       display: flex;
       align-items: center;
       justify-content: center;
       flex-direction: column;
       padding: 0;
     }
-
   }
 
   .fields-container {
-    height: 100%;
-    overflow-y: auto;
 
     .field-label {
       color: var(--color-text-3);
       word-break: break-all;
       white-space: pre-wrap;
       padding-right: 8px;
-      font-size: 14px;
+      font-size: 12px;
       font-weight: 500;
       user-select: none;
     }
 
     .field-value {
-      color: var(--color-text-1);
+      color: var(--gray-8);
       word-break: break-all;
       white-space: pre-wrap;
       padding-right: 8px;

orion-ops-ui/src/components/global-setting/index.vue

@@ -6,9 +6,9 @@
       </template>
     </a-button>
   </div>
-  <a-drawer title="偏好设置"
+  <a-drawer v-model:visible="visible"
+            title="偏好设置"
             :width="300"
-            :visible="visible"
             :footer="false"
             :unmount-on-close="true"
             @cancel="() => setVisible(false)">

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

@@ -1,8 +1,7 @@
 <template>
   <card-list v-model:searchValue="formModel.searchValue"
-             search-input-placeholder="输入id/名称/用户名"
+             search-input-placeholder="输入 id / 名称 / 用户名"
              create-card-position="head"
-             :card-height="184"
              :loading="loading"
              :fieldConfig="fieldConfig"
              :list="list"

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

@@ -1,8 +1,7 @@
 <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"
              :fieldConfig="fieldConfig"
              :list="list"

orion-ops-ui/src/views/asset/host-key/components/host-key-form-drawer.vue

@@ -1,6 +1,6 @@
 <template>
-  <a-drawer class="drawer-body-padding-0"
-            :visible="visible"
+  <a-drawer v-model:visible="visible"
+            class="drawer-body-padding-0"
             :title="title"
             :width="470"
             :mask-closable="false"

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

@@ -1,8 +1,7 @@
 <template>
   <card-list v-model:searchValue="formModel.searchValue"
-             search-input-placeholder="输入id/名称/标签/地址"
+             search-input-placeholder="输入 id / 名称 / 编码 / 地址"
              create-card-position="head"
-             :card-height="214"
              :loading="loading"
              :fieldConfig="fieldConfig"
              :list="list"
@@ -32,7 +31,7 @@
     </template>
     <!-- 标签 -->
     <template #tags="{ record }">
-      <a-space v-if="record.tags" wrap>
+      <a-space v-if="record.tags" wrap style="margin-bottom: -8px;">
         <a-tag v-for="tag in record.tags"
                :key="tag.id"
                :color="dataColor(tag.name, tagColor)">

orion-ops-ui/src/views/asset/host/components/host-config-drawer.vue

@@ -1,7 +1,7 @@
 <template>
-  <a-drawer class="drawer-body-padding-0"
+  <a-drawer v-model:visible="visible"
+            class="drawer-body-padding-0"
             :width="420"
-            :visible="visible"
             :esc-to-close="false"
             :mask-closable="false"
             :unmount-on-close="true"

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

@@ -1,9 +1,9 @@
 import { CardField, CardFieldConfig } from '@/types/card';
 
 const fieldConfig = {
-  rowGap: '12px',
+  rowGap: '10px',
   labelSpan: 8,
-  minHeight: '24px',
+  minHeight: '22px',
   fields: [
     {
       label: 'id',