sl-sfy-safety/src/views/message/sysnotion-config/compontents/CardLayout.vue

<!--
 * @since: 2024-12-30
 * CardLayout.vue
-->
<template>
  <div class="layout">
    <section class="header" v-if="title">
      <header class="card-title">
        {{ title }}
        <span class="mandatory" v-if="mandatory">*</span>
      </header>
      <slot name="actions"></slot>
    </section>
    <slot></slot>

    <div class="flex items-center cursor-pointer new-action w-[70px]" v-if="!isViewMode && showAddNewButton" @click="$emit('handleAddNew')">
      <el-button type="primary" :icon="Plus" circle size="small" />
      <span style="margin-left: 10px; padding-top: 2px">新增</span>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { inject } from 'vue';
  import { Plus } from '@element-plus/icons-vue';

  interface LayoutSetting {
    title?: string;
    mandatory?: boolean;
    showAddNewButton?: boolean;
    isShowWraning?: boolean;
  }

  withDefaults(defineProps<LayoutSetting>(), {
    mandatory: false,
    showAddNewButton: false,
    isShowWraning: false,
  });

  const isViewMode = inject('isViewMode', false);

  defineEmits<{
    (event: 'handleAddNew'): void;
  }>();
</script>

<style scoped lang="scss">
  .layout {
    margin-bottom: 20px;
    border-bottom: 4px solid #d3eafe;
  }

  .layout:last-child {
    border: none;
  }

  .header {
    margin-bottom: 20px;
    padding-right: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .card-title {
      height: 20px;
      line-height: 20px;
      font-size: 16px;
      font-weight: bold;

      &::before {
        content: ' ';
        display: inline;
        padding: 2px;
        margin-right: 10px;
        background-color: #409eff;
        height: 80%;
      }
    }
  }

  .mandatory {
    color: var(--el-color-danger);
  }

  .new-action {
    margin-bottom: 20px;
  }

  .warningTip {
    margin-left: 10px;
  }
</style>