refactor: 重构 card 组件.

2023-12-02 18:39:28 +08:00
parent 5aa6907820
commit 9f35fb855d
10 changed files with 276 additions and 535 deletions
--- a/orion-ops-ui/src/assets/style/layout.less
+++ b/orion-ops-ui/src/assets/style/layout.less
@@ -100,6 +100,12 @@
  box-shadow: 2px 2px 12px rgba(0, 0, 0, .15);
 }

+.card-list-item-disabled {
+  pointer-events: none;
+  opacity: .5;
+  background: var(--color-bg-1);
+}
+
 .card-extra-icon {
  font-size: 16px;
  cursor: pointer;
--- a/orion-ops-ui/src/components/view/card-list/components/card-header.vue
+++ b/orion-ops-ui/src/components/view/card-list/components/card-header.vue
@@ -14,8 +14,8 @@
                        v-model:page-size="(pagination as PaginationProps).pageSize"
                        v-bind="pagination"
                        :auto-adjust="false"
-                        @change="page => emits('pageChange', page, (pagination as PaginationProps).pageSize)"
-                        @page-size-change="limit => emits('pageChange', 1, limit)" />
+                        @change="page => emits('emitter', HeaderEmitter.PAGE_CHANGE, page, (pagination as PaginationProps).pageSize)"
+                        @page-size-change="limit => emits('emitter', HeaderEmitter.PAGE_CHANGE, 1, limit)" />
        </div>
      </div>
      <!-- 操作部分 -->
@@ -25,10 +25,10 @@
          <a-space>
            <!-- 创建 -->
            <div v-permission="addPermission"
-                 v-if="!handleVisible.disableAdd"
+                 v-if="!handleVisible?.disableAdd"
                 class="click-icon-wrapper card-header-icon-wrapper"
                 title="创建"
-                 @click="emits('add')">
+                 @click="emits('emitter', HeaderEmitter.ADD)">
              <icon-plus />
            </div>
            <!-- 左侧侧操作槽位 -->
@@ -41,24 +41,24 @@
            <!-- 右侧操作槽位 -->
            <slot name="rightHandle" />
            <!-- 搜索框 -->
-            <div v-if="!handleVisible.disableSearchInput"
+            <div v-if="!handleVisible?.disableSearchInput"
                 class="header-input-wrapper"
                 :style="{width: searchInputWidth}">
              <a-input v-model="searchValueRef"
-                       :placeholder="searchInputPlaceholder"
+                       :placeholder="searchInputPlaceholder as string"
                       size="small"
                       allow-clear
-                       @input="e => emits('update:searchValue', e)"
-                       @change="e => emits('update:searchValue', e)"
-                       @keyup.enter="emits('search')" />
+                       @input="e => emits('emitter', HeaderEmitter.UPDATE_SEARCH_VALUE, e)"
+                       @change="e => emits('emitter', HeaderEmitter.UPDATE_SEARCH_VALUE, e)"
+                       @keyup.enter="emits('emitter', HeaderEmitter.SEARCH)" />
            </div>
            <!-- 过滤条件 -->
            <a-popover position="br" trigger="click" content-class="card-filter-wrapper">
-              <div v-if="!handleVisible.disableFilter"
+              <div v-if="!handleVisible?.disableFilter"
                   ref="filterRef"
                   class="click-icon-wrapper card-header-icon-wrapper"
                   title="选择过滤条件">
-                <a-badge :count="filterCount" :dot-style="{zoom: '.75'}" :offset="[9, -6]">
+                <a-badge :count="filterCount as number" :dot-style="{zoom: '.75'}" :offset="[9, -6]">
                  <icon-filter />
                </a-badge>
              </div>
@@ -75,17 +75,17 @@
              </template>
            </a-popover>
            <!-- 搜索 -->
-            <div v-if="!handleVisible.disableSearch"
+            <div v-if="!handleVisible?.disableSearch"
                 class="click-icon-wrapper card-header-icon-wrapper"
                 title="搜索"
-                 @click="emits('search')">
+                 @click="emits('emitter', HeaderEmitter.SEARCH)">
              <icon-search />
            </div>
            <!-- 重置 -->
-            <div v-if="!handleVisible.disableReset"
+            <div v-if="!handleVisible?.disableReset"
                 class="click-icon-wrapper card-header-icon-wrapper"
                 title="重置"
-                 @click="emits('reset')">
+                 @click="emits('emitter', HeaderEmitter.RESET)">
              <icon-refresh />
            </div>
          </a-space>
@@ -104,13 +104,19 @@
 <script lang="ts" setup>
  import type { PaginationProps } from '@arco-design/web-vue';
  import type { CardProps } from '../types/props';
-  import { useAppStore } from '@/store';
  import { ref, computed } from 'vue';
+  import { useAppStore } from '@/store';
  import { triggerMouseEvent } from '@/utils';
+  import { HeaderEmitter } from '../types/emits';

  const props = defineProps<CardProps>();
+  const emits = defineEmits(['emitter']);

  const appStore = useAppStore();
+
+  const filterRef = ref();
+
+  // 头部长度 fixed 脱离了文档流 需要计算
  const headerWidth = computed(() => {
    const menuWidth = appStore.menu && !appStore.topMenu && !appStore.hideMenu
      ? appStore.menuCollapse ? 48 : appStore.menuWidth
@@ -118,50 +124,44 @@
    return `calc(100% - ${menuWidth}px)`;
  });

-  const filterRef = ref();
-
  const searchValueRef = computed<string>({
    get() {
      return props.searchValue as string;
    },
    set(e) {
      if (e) {
-        emits('update:searchValue', e);
+        emits('emitter', HeaderEmitter.UPDATE_SEARCH_VALUE, e);
      } else {
-        emits('update:searchValue', null);
+        emits('emitter', HeaderEmitter.UPDATE_SEARCH_VALUE, null);
      }
    }
  });

-  const emits = defineEmits(['add', 'update:searchValue', 'search',
-    'reset', 'pageChange', 'click', 'dblclick']);
-
  // 重置过滤
  const filterReset = () => {
-    emits('reset');
+    emits('emitter', HeaderEmitter.RESET);
  };

  // 搜索
  const filterSearch = () => {
-    emits('search');
+    emits('emitter', HeaderEmitter.SEARCH);
    triggerMouseEvent(filterRef);
  };

 </script>

-<style lang="less">
-  @header-info-height: 48px;
-  @header-handler-height: 48px;
-  @top-height: 16 + @header-info-height + @header-handler-height + 12px;
+<style lang="less" scoped>
+  body[arco-theme='dark'] .card-list-header {
+    background: #29292C;
+  }

  .card-list-header {
-    margin: -16px -16px 0 -16px;
+    margin: -17px -16px 0 -16px;
    padding: 16px 16px 12px 16px;
    position: fixed;
-    // FIXME 颜色不对   文件拆了
    background: var(--color-fill-2);
    z-index: 999;
-    height: @top-height;
+    height: var(--top-height);
    transition: none;

    &-wrapper {
@@ -170,7 +170,7 @@
      border-radius: 4px;

      .card-list-info {
-        height: @header-info-height;
+        height: var(--header-info-height);
        border-bottom: 1px solid var(--color-border-2);
        display: flex;
        justify-content: space-between;
@@ -179,25 +179,8 @@
    }
  }

-  &-body {
-    display: block;
-    margin-top: @top-height - 16px;
-    padding-top: 4px;
-  }
-
-  .disabled-col {
-    cursor: not-allowed;
-
-    .card-list-item-disabled {
-      pointer-events: none;
-      opacity: .5;
-      background: var(--color-bg-1);
-    }
-  }
-
-
  .card-list-handler {
-    height: @header-handler-height;
+    height: var(--header-handler-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
@@ -212,4 +195,5 @@
      align-items: center;
    }
  }
+
 </style>
--- a/orion-ops-ui/src/components/view/card-list/components/card-item.vue
+++ b/orion-ops-ui/src/components/view/card-list/components/card-item.vue
@@ -0,0 +1,126 @@
+<template>
+  <!-- 卡片 -->
+  <a-card :class="[
+            'card-list-item',
+            item.disabled === true ? 'card-list-item-disabled' : undefined,
+            !!cardClass ? cardClass : undefined
+          ]"
+          :style="{ height: cardHeight }"
+          :bordered="false"
+          :hoverable="true"
+          :body-style="cardBodyStyle as Record<string, any>"
+          @contextmenu.prevent="() => false"
+          @click="emits('emitter', CardEmitter.CLICK, item, index)"
+          @dblclick="emits('emitter', CardEmitter.DBL_CLICK, item, index)">
+    <!-- 标题 -->
+    <template #title>
+      <slot name="title" />
+    </template>
+    <!-- 拓展部分 -->
+    <template #extra>
+      <slot name="extra" />
+    </template>
+    <!-- 内容-字段 -->
+    <template v-if="fieldConfig && fieldConfig.fields">
+      <div :class="['fields-container', fieldConfig.bodyClass]">
+        <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 || '12px') : false,
+                   'height': fieldConfig.height || field.height || 'unset',
+                   'min-height': fieldConfig.minHeight || field.minHeight || 'unset'
+                 }">
+            <!-- label -->
+            <a-col :span="fieldConfig.labelSpan || 8" :offset="fieldConfig.labelOffset || 0"
+                   :style="{ 'text-align': fieldConfig.labelAlign || 'left' }"
+                   :class="[
+                     fieldConfig.labelClass,
+                     field.labelClass,
+                     'field-label'
+                   ]">
+              <span>{{ field.label + (fieldConfig.showColon ? ' :' : '') }}</span>
+            </a-col>
+            <!-- value -->
+            <a-col :span="24 - (fieldConfig.labelSpan || 8) + (fieldConfig.labelOffset || 0)"
+                   :style="{ 'text-align': fieldConfig.valueAlign || 'left' }"
+                   :class="[
+                     fieldConfig.valueClass,
+                     field.valueClass,
+                     'field-value',
+                     field.ellipsis ? 'field-value-ellipsis' : ''
+                   ]">
+              <slot :name="field.slotName" :record="item" :index="index" :key="item[key]">
+                <a-tooltip v-if="field.tooltip" :content="item[field.dataIndex]">
+                  <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 v-if="field.render" v-html="field.render({ record: item, index })" />
+                  <span v-else>{{ item[field.dataIndex] }}</span>
+                </template>
+              </slot>
+            </a-col>
+          </a-row>
+        </template>
+      </div>
+    </template>
+    <!-- 内容-自定义槽 -->
+    <template v-else>
+      <slot name="card" />
+    </template>
+    <!-- 卡片底部 -->
+    <slot name="cardFooter" />
+  </a-card>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'card-item'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { CardRecord } from '@/types/card';
+  import type { CardProps } from '../types/props';
+  import { CardEmitter } from '../types/emits';
+
+  const props = defineProps<CardProps & {
+    index: number,
+    item: CardRecord
+  }>();
+
+  const emits = defineEmits(['emitter']);
+
+</script>
+
+<style lang="less" scoped>
+  .fields-container {
+
+    .field-label {
+      color: var(--color-text-3);
+      word-break: break-all;
+      white-space: pre-wrap;
+      padding-right: 8px;
+      font-size: 12px;
+      font-weight: 500;
+      user-select: none;
+    }
+
+    .field-value {
+      color: var(--gray-8);
+      word-break: break-all;
+      white-space: pre-wrap;
+      padding-right: 8px;
+      font-size: 14px;
+      font-weight: 400;
+    }
+
+    .field-value-ellipsis {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      word-break: keep-all;
+    }
+  }
+
+</style>
--- a/orion-ops-ui/src/components/view/card-list/components/create-card.vue
+++ b/orion-ops-ui/src/components/view/card-list/components/create-card.vue
@@ -21,29 +21,25 @@
  import type { CardProps } from '../types/props';

  const props = defineProps<CardProps>();
-  console.log(props);
 </script>

-<style lang="less">
-  .create-card {
+<style lang="less" scoped>
+  .create-card-body {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    cursor: pointer;

-    &-body {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      align-items: center;
-      flex-direction: column;
-      justify-content: center;
-      cursor: pointer;
+    &-icon {
+      font-size: 18px;
+      margin-bottom: 4px;
+    }

-      &-icon {
-        font-size: 18px;
-        margin-bottom: 4px;
-      }
-
-      &-text {
-        user-select: none;
-      }
+    &-text {
+      user-select: none;
    }
  }
 </style>
--- a/orion-ops-ui/src/components/view/card-list/index.vue
+++ b/orion-ops-ui/src/components/view/card-list/index.vue
@@ -1,196 +1,50 @@
 <template>
  <div class="card-list-layout">
    <!-- 头部部分-固定 -->
-    <div class="card-list-layout-header" :style="{width: headerWidth}">
-      <div class="card-list-layout-header-wrapper">
-        <!-- 信息部分 -->
-        <div class="card-list-info">
-          <!-- 路由面包屑 -->
-          <breadcrumb />
-          <!-- 分页部分 -->
-          <div class="pagination-wrapper">
-            <a-pagination v-if="pagination"
-                          size="mini"
-                          v-model:current="(pagination as PaginationProps).current"
-                          v-model:page-size="(pagination as PaginationProps).pageSize"
-                          v-bind="pagination"
-                          :auto-adjust="false"
-                          @change="page => emits('pageChange', page, (pagination as PaginationProps).pageSize)"
-                          @page-size-change="limit => emits('pageChange', 1, limit)" />
-          </div>
-        </div>
-        <!-- 操作部分 -->
-        <div class="card-list-handler">
-          <!-- 左侧固定 -->
-          <div class="card-list-handler-left">
-            <a-space>
-              <!-- 创建 -->
-              <div v-permission="addPermission"
-                   v-if="!handleVisible.disableAdd"
-                   class="click-icon-wrapper card-header-icon-wrapper"
-                   title="创建"
-                   @click="emits('add')">
-                <icon-plus />
-              </div>
-              <!-- 左侧侧操作槽位 -->
-              <slot name="leftHandle" />
-            </a-space>
-          </div>
-          <!-- 右侧固定 -->
-          <div class="card-list-handler-right">
-            <a-space>
-              <!-- 右侧操作槽位 -->
-              <slot name="rightHandle" />
-              <!-- 搜索框 -->
-              <div v-if="!handleVisible.disableSearchInput"
-                   class="header-input-wrapper"
-                   :style="{width: searchInputWidth}">
-                <a-input v-model="searchValueRef"
-                         :placeholder="searchInputPlaceholder"
-                         size="small"
-                         allow-clear
-                         @input="e => emits('update:searchValue', e)"
-                         @change="e => emits('update:searchValue', e)"
-                         @keyup.enter="emits('search')" />
-              </div>
-              <!-- 过滤条件 -->
-              <a-popover position="br" trigger="click" content-class="card-filter-wrapper">
-                <div v-if="!handleVisible.disableFilter"
-                     ref="filterRef"
-                     class="click-icon-wrapper card-header-icon-wrapper"
-                     title="选择过滤条件">
-                  <a-badge :count="filterCount" :dot-style="{zoom: '.75'}" :offset="[9, -6]">
-                    <icon-filter />
-                  </a-badge>
-                </div>
-                <template #content>
-                  <!-- 过滤表单 -->
-                  <slot name="filterContent" />
-                  <!-- 操作按钮 -->
-                  <div class="filter-bottom-container">
-                    <a-space>
-                      <a-button size="mini" @click="filterReset">重置</a-button>
-                      <a-button size="mini" type="primary" @click="filterSearch">过滤</a-button>
-                    </a-space>
-                  </div>
-                </template>
-              </a-popover>
-              <!-- 搜索 -->
-              <div v-if="!handleVisible.disableSearch"
-                   class="click-icon-wrapper card-header-icon-wrapper"
-                   title="搜索"
-                   @click="emits('search')">
-                <icon-search />
-              </div>
-              <!-- 重置 -->
-              <div v-if="!handleVisible.disableReset"
-                   class="click-icon-wrapper card-header-icon-wrapper"
-                   title="重置"
-                   @click="emits('reset')">
-                <icon-refresh />
-              </div>
-            </a-space>
-          </div>
-        </div>
-      </div>
-    </div>
+    <card-header v-bind="props"
+                 @emitter="dispatchEmitter">
+      <!-- 左侧侧操作槽位 -->
+      <template #leftHandle>
+        <slot name="leftHandle" />
+      </template>
+      <!-- 右侧操作槽位 -->
+      <template #rightHandle>
+        <slot name="rightHandle" />
+      </template>
+      <!-- 过滤表单 -->
+      <template #filterContent>
+        <slot name="filterContent" />
+      </template>
+    </card-header>
    <!-- 身体部分 -->
-    <a-spin class="card-list-layout-body" :loading="loading">
+    <a-spin class="card-list-layout-body" :loading="loading as boolean">
      <!-- 卡片列表 -->
-      <a-row v-if="list.length !== 0"
-             :gutter="cardLayoutGutter"
+      <a-row v-if="list?.length !== 0"
+             :gutter="cardLayoutGutter as any"
             align="stretch">
        <!-- 添加卡片 -->
        <a-col v-permission="addPermission"
               v-if="createCardPosition === 'head'"
               v-bind="cardLayoutCols">
-          <create-card :card-height="cardHeight"
-                       :create-card-description="createCardDescription"
-                       @click="emits('add')" />
+          <create-card v-bind="props" @click="emits('add')" />
        </a-col>
        <!-- 数据卡片 -->
        <a-col v-for="(item, index) in list"
               :key="item[key]"
               v-bind="cardLayoutCols"
-               :class="{
-                 'disabled-col': item.disabled === true
-               }">
+               :class="{ 'disabled-col': item.disabled === true }">
          <!-- 右键菜单 -->
          <a-dropdown trigger="contextMenu" alignPoint>
            <!-- 卡片 -->
-            <a-card :class="[
-                      '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)">
-              <!-- 标题 -->
-              <template #title>
-                <slot name="title" :record="item" :index="index" :key="item[key]" />
+            <card-item v-bind="props"
+                       :index="index"
+                       :item="item"
+                       @emitter="dispatchEmitter">
+              <!-- 自定义插槽 -->
+              <template v-for="slot in Object.keys($slots)" :key="slot" #[slot]>
+                <slot :name="slot" :record="item" :index="index" :key="item[key]" />
              </template>
-              <!-- 拓展部分 -->
-              <template #extra>
-                <slot name="extra" :record="item" :index="index" :key="item[key]" />
-              </template>
-              <!-- 内容-字段 -->
-              <template v-if="fieldConfig && fieldConfig.fields">
-                <div :class="['fields-container', fieldConfig.bodyClass]">
-                  <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 || '12px') : false,
-                           'height': fieldConfig.height || field.height || 'unset',
-                           'min-height': fieldConfig.minHeight || field.minHeight || 'unset'
-                         }">
-                      <!-- label -->
-                      <a-col :span="fieldConfig.labelSpan || 8" :offset="fieldConfig.labelOffset || 0"
-                             :style="{
-                             'text-align': fieldConfig.labelAlign || 'left'
-                           }"
-                             :class="[fieldConfig.labelClass,
-                             field.labelClass,
-                             'field-label'
-                           ]">
-                        <span>{{ field.label + (fieldConfig.showColon ? ' :' : '') }}</span>
-                      </a-col>
-                      <!-- value -->
-                      <a-col :span="24 - (fieldConfig.labelSpan || 8) + (fieldConfig.labelOffset || 0)"
-                             :style="{
-                             'text-align': fieldConfig.valueAlign || 'left'
-                           }"
-                             :class="[fieldConfig.valueClass,
-                             field.valueClass,
-                             'field-value',
-                             field.ellipsis ? 'field-value-ellipsis' : ''
-                           ]">
-                        <slot :name="field.slotName" :record="item" :index="index" :key="item[key]">
-                          <a-tooltip v-if="field.tooltip" :content="item[field.dataIndex]">
-                            <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 v-if="field.render" v-html="field.render({ record: item, index })" />
-                            <span v-else>{{ item[field.dataIndex] }}</span>
-                          </template>
-                        </slot>
-                      </a-col>
-                    </a-row>
-                  </template>
-                </div>
-              </template>
-              <!-- 内容-自定义槽 -->
-              <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>
+            </card-item>
            <!-- 右键菜单 -->
            <template v-if="contextMenu" #content>
              <slot name="contextMenu" :record="item" :index="index" :key="item[key]" />
@@ -199,11 +53,9 @@
        </a-col>
        <!-- 添加卡片 -->
        <a-col v-permission="addPermission"
-               v-show="createCardPosition === 'tail'"
+               v-if="createCardPosition === 'tail'"
               v-bind="cardLayoutCols">
-          <create-card :card-height="cardHeight"
-                       :create-card-description="createCardDescription"
-                       @click="emits('add')" />
+          <create-card v-bind="props" @click="emits('add')" />
        </a-col>
      </a-row>
      <!-- 空列表 -->
@@ -223,281 +75,69 @@
 </script>

 <script lang="ts" setup>
-  import type { CSSProperties, PropType } from 'vue';
-  import type { PaginationProps, ResponsiveValue } from '@arco-design/web-vue';
-  import type { CardRecord, ColResponsiveValue, HandleVisible, CardFieldConfig, CardPosition } from '@/types/card';
-  import { compile, computed, h, ref } from 'vue';
-  import { useAppStore } from '@/store';
-  import { triggerMouseEvent } from '@/utils';
+  import CreateCard from './components/create-card.vue';
+  import CardHeader from './components/card-header.vue';
+  import CardItem from './components/card-item.vue';
+  import { Emitter } from './types/emits';
+  import { CardProps } from './types/props';

-  const appStore = useAppStore();
-  const headerWidth = computed(() => {
-    const menuWidth = appStore.menu && !appStore.topMenu && !appStore.hideMenu
-      ? appStore.menuCollapse ? 48 : appStore.menuWidth
-      : 0;
-    return `calc(100% - ${menuWidth}px)`;
-  });
+  const emits = defineEmits(Emitter);

-  const filterRef = ref();
-
-  const searchValueRef = computed<string>({
-    get() {
-      return props.searchValue as string;
-    },
-    set(e) {
-      if (e) {
-        emits('update:searchValue', e);
-      } else {
-        emits('update:searchValue', null);
-      }
-    }
-  });
-
-  const emits = defineEmits(['add', 'update:searchValue', 'search',
-    'reset', 'pageChange', 'click', 'dblclick']);
-
-  const props = defineProps({
-    key: {
-      type: String,
-      default: 'id'
-    },
-    pagination: {
-      type: [Object, Boolean] as PropType<PaginationProps | boolean>,
-      default: false
-    },
-    loading: {
-      type: Boolean as PropType<Boolean>,
-      default: false
-    },
-    fieldConfig: {
-      type: Object as PropType<CardFieldConfig>,
-      default: []
-    },
-    cardHeight: {
-      type: String,
-      default: '100%'
-    },
-    cardClass: String,
-    cardBodyStyle: Object as PropType<CSSProperties>,
-    contextMenu: {
-      type: Boolean,
-      default: true
-    },
-    filterCount: {
-      type: Number,
-      default: 0
-    },
-    searchInputPlaceholder: String,
-    searchInputWidth: {
-      type: String,
-      default: '200px'
-    },
-    searchValue: {
-      type: String,
-      default: ''
-    },
-    createCardDescription: {
-      type: String,
-      default: '点击此处进行创建'
-    },
-    createCardPosition: {
-      type: String as PropType<CardPosition>,
-      default: false
-    },
-    addPermission: {
-      type: Array as PropType<String[]>,
-      default: []
-    },
-    cardLayoutGutter: {
-      type: [Number, Object, Array] as PropType<Number | ResponsiveValue | Array<Number> | Array<ResponsiveValue>>,
-      default: [16, 16]
-    },
-    cardLayoutCols: {
-      type: Object as PropType<ColResponsiveValue>,
-      default: () => {
-        return {
-          span: 6
-        };
-      }
-    },
-    handleVisible: {
-      type: Object as PropType<HandleVisible>,
-      default: () => {
-        return {};
-      }
-    },
-    list: {
-      type: Array as PropType<Array<CardRecord>>,
-      default: []
-    },
-  });
-
-  // 创建卡片
-  const CreateCard = {
-    props: ['cardHeight', 'createCardDescription'],
-    setup(props: { cardHeight: any; createCardDescription: any; }) {
-      return () => {
-        return h(compile(`
-          <a-card class="card-list-item create-card"
-                  :style="{ height: '${props.cardHeight}' }"
-                  :body-style="{ height: '100%' }"
-                  :bordered="false"
-                  :hoverable="true">
-            <div class="create-card-body">
-              <icon-plus class="create-card-body-icon" />
-              <span class="create-card-body-text">${props.createCardDescription}</span>
-            </div>
-          </a-card>
-        `));
+  const props = withDefaults(defineProps<CardProps>(), {
+    key: 'id',
+    pagination: false,
+    loading: false,
+    cardHeight: '100%',
+    contextMenu: true,
+    filterCount: 0,
+    searchInputWidth: '200px',
+    searchValue: '',
+    createCardDescription: '点击此处进行创建',
+    createCardPosition: 'head',
+    addPermission: () => [],
+    cardLayoutGutter: () => [16, 16],
+    cardLayoutCols: () => {
+      return {
+        span: 6
      };
-    }
-  };
+    },
+    handleVisible: () => {
+      return {};
+    },
+    list: () => []
+  });

-  // 重置过滤
-  const filterReset = () => {
-    emits('reset');
-  };
-
-  // 搜索
-  const filterSearch = () => {
-    emits('search');
-    triggerMouseEvent(filterRef);
+  // 调度事件
+  const dispatchEmitter = (event: string, ...args: any) => {
+    emits(event, ...args);
  };

 </script>

-<style lang="less" scoped>
-  @header-info-height: 48px;
-  @header-handler-height: 48px;
-  @top-height: 16 + @header-info-height + @header-handler-height + 12px;
-
+<style lang="less">
  .card-list-layout {
-
-    &-header {
-      margin: -16px -16px 0 -16px;
-      padding: 16px 16px 12px 16px;
-      position: fixed;
-      // FIXME 颜色不对   文件拆了
-      background: var(--color-fill-2);
-      z-index: 999;
-      height: @top-height;
-      transition: none;
-
-      &-wrapper {
-        background: var(--color-bg-4);
-        padding: 0 12px;
-        border-radius: 4px;
-      }
-    }
+    --header-info-height: 48px;
+    --header-handler-height: 48px;
+    --top-height: calc(16px + var(--header-info-height) + var(--header-handler-height) + 12px);

    &-body {
      display: block;
-      margin-top: @top-height - 16px;
+      margin-top: calc(var(--top-height) - 16px);
      padding-top: 4px;
    }

    .disabled-col {
      cursor: not-allowed;
-
-      .card-list-item-disabled {
-        pointer-events: none;
-        opacity: .5;
-        background: var(--color-bg-1);
-      }
-    }
-
-    .card-list-info {
-      height: @header-info-height;
-      border-bottom: 1px solid var(--color-border-2);
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-
-    .card-list-handler {
-      height: @header-handler-height;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      &-left {
-        display: flex;
-        align-items: center;
-      }
-
-      &-right {
-        display: flex;
-        align-items: center;
-      }
    }
  }

-  .filter-bottom-container {
+  .empty-list-card-body {
+    height: calc(var(--top-height) + 258px);
    display: flex;
-    justify-content: flex-end;
-  }
-
-  :deep(.create-card) {
-
-    &-body {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      align-items: center;
-      flex-direction: column;
-      justify-content: center;
-      cursor: pointer;
-
-      &-icon {
-        font-size: 18px;
-        margin-bottom: 4px;
-      }
-
-      &-text {
-        user-select: none;
-      }
-
-    }
-  }
-
-  .empty-list-card {
-
-    &-body {
-      height: calc(100vh - @top-height - 140px);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-direction: column;
-      padding: 0;
-    }
-  }
-
-  .fields-container {
-
-    .field-label {
-      color: var(--color-text-3);
-      word-break: break-all;
-      white-space: pre-wrap;
-      padding-right: 8px;
-      font-size: 12px;
-      font-weight: 500;
-      user-select: none;
-    }
-
-    .field-value {
-      color: var(--gray-8);
-      word-break: break-all;
-      white-space: pre-wrap;
-      padding-right: 8px;
-      font-size: 14px;
-      font-weight: 400;
-    }
-
-    .field-value.field-value-ellipsis {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      word-break: keep-all;
-    }
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    padding: 0;
  }

 </style>
--- a/orion-ops-ui/src/components/view/card-list/types/emits.ts
+++ b/orion-ops-ui/src/components/view/card-list/types/emits.ts
@@ -0,0 +1,20 @@
+// 头部事件
+export const HeaderEmitter = {
+  ADD: 'add',
+  UPDATE_SEARCH_VALUE: 'update:searchValue',
+  SEARCH: 'search',
+  RESET: 'reset',
+  PAGE_CHANGE: 'pageChange'
+};
+
+// 卡片事件
+export const CardEmitter = {
+  CLICK: 'click',
+  DBL_CLICK: 'dblclick'
+};
+
+// 事件
+export const Emitter = [
+  ...Object.values(HeaderEmitter),
+  ...Object.values(CardEmitter),
+];
--- a/orion-ops-ui/src/components/view/card-list/types/props.ts
+++ b/orion-ops-ui/src/components/view/card-list/types/props.ts
@@ -8,7 +8,7 @@ export interface CardProps {
  pagination?: PaginationProps | boolean;
  loading?: boolean;
  fieldConfig?: CardFieldConfig;
-  cardHeight: string;
+  cardHeight?: string;
  cardClass?: string;
  cardBodyStyle?: CSSProperties;
  contextMenu?: boolean;
@@ -17,38 +17,10 @@ export interface CardProps {
  searchInputWidth?: string;
  searchValue?: string;
  createCardDescription?: string;
-  createCardPosition?: CardPosition | boolean;
+  createCardPosition?: CardPosition;
  addPermission?: Array<string>;
  cardLayoutGutter?: Number | ResponsiveValue | Array<Number> | Array<ResponsiveValue>;
  cardLayoutCols?: ColResponsiveValue;
  handleVisible?: HandleVisible;
  list?: Array<CardRecord>;
 }
-
-// 定义默认 props
-export const cardDefaultProps = () => {
-  return {
-    key: 'id',
-    pagination: false,
-    loading: false,
-    cardHeight: '100%',
-    contextMenu: true,
-    filterCount: 0,
-    searchInputWidth: '200px',
-    searchValue: '',
-    createCardDescription: '点击此处进行创建',
-    createCardPosition: false,
-    addPermission: () => [],
-    cardLayoutGutter: () => [16, 16],
-    cardLayoutCols: () => {
-      return {
-        span: 6
-      };
-    },
-    handleVisible: () => {
-      return {};
-    },
-    list: () => []
-  };
-};
-
--- a/orion-ops-ui/src/views/asset/host-identity/components/host-identity-card-list.vue
+++ b/orion-ops-ui/src/views/asset/host-identity/components/host-identity-card-list.vue
@@ -1,7 +1,6 @@
 <template>
  <card-list v-model:searchValue="formModel.searchValue"
             search-input-placeholder="输入 id / 名称 / 用户名"
-             create-card-position="head"
             :loading="loading"
             :fieldConfig="fieldConfig"
             :list="list"
--- 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
@@ -1,7 +1,6 @@
 <template>
  <card-list v-model:searchValue="formModel.searchValue"
             search-input-placeholder="输入 id / 名称"
-             create-card-position="head"
             :loading="loading"
             :fieldConfig="fieldConfig"
             :list="list"
--- a/orion-ops-ui/src/views/asset/host-list/components/host-card-list.vue
+++ b/orion-ops-ui/src/views/asset/host-list/components/host-card-list.vue
@@ -1,7 +1,6 @@
 <template>
  <card-list v-model:searchValue="formModel.searchValue"
             search-input-placeholder="输入 id / 名称 / 编码 / 地址"
-             create-card-position="head"
             :loading="loading"
             :fieldConfig="fieldConfig"
             :list="list"