Situation-Awareness-Platform-Frontend/src/components/Setting/GModal/index.vue

<template>
  <d-modal v-model="vModels" :title="title" class="repo-settings-modal" :showClose="showCloseIcon" :escapable="escapable" :close-on-click-overlay="closeByOverlay">
    <template #header>
      <gc-modal-header>
        <Icon v-if="showWarnIcon" name="gt-warn" color="#F2050D" class="mr-[8px]"></Icon>
        <span class="text-G900 text-base font-bold leading-[24px]">{{ title }}</span>
      </gc-modal-header>
      <div class="line bg-G200"></div>
    </template>
    <div v-if="warnText" class="px-24 py-[12px] bg-[#F2050D0C] text-[var(--color-R500)] text-sm font-normal leading-[20px]">
      {{ warnText }}
    </div>
    <div class="pt-20 px-24 pb-24">
      <slot></slot>
    </div>
    <template #footer v-if="showFooter">
      <slot name="footerGroup"></slot>
      <div class="flex justify-end px-[24px] pb-24" v-if="!customFooter">
        <d-button @click="closeModal()" class="mr-[8px]">取消</d-button>
        <d-button :loading="confirmLoading" :variant="confirmColor === 'primary' ? 'solid' : 'outline'" :color="confirmColor" @click="confirm" :disabled="disabledButton">
          {{ confirmText }}
        </d-button>
      </div>
    </template>
  </d-modal>
</template>

<script setup lang="ts">
import { useModel } from '@/utils/hooks/useModel';

defineSlots<{
  default?:() => any,
  footerGroup?: () => any
}>();

const props = withDefaults(defineProps<{
  modelValue?: any
  'onUpdate:modelValue'?: Function
  title?: string
  warnText?: string
  autoClose?: boolean
  confirmText?: string
  cancelText?: string
  confirmColor?: 'primary' | 'danger'
  showWarnIcon?: boolean
  showFooter?: boolean
  disabledButton?: boolean
  customFooter?: boolean
  showCloseIcon?: boolean
  escapable?: boolean
  closeByOverlay?: boolean,
  confirmLoading?: boolean
}>(), {
  title: '删除操作',
  autoClose: true,
  confirmText: '确定',
  confirmColor: 'primary',
  showFooter: true,
  disabledButton: false,
  customFooter: false,
  showCloseIcon: true,
  escapable: true,
  closeByOverlay: true,
  confirmLoading: false
});

const emits = defineEmits(['closeModal', 'confirm', 'update:modelValue']);

const { vModels } = useModel(props, emits);

const closeModal = () => {
  emits('closeModal');
  vModels.value = false;
};

const openModal = () => {
  vModels.value = true;
};
const confirm = () => {
  emits('confirm');
  if (props.autoClose) {
    vModels.value = false;
  }
};

defineExpose({
  openModal
});

</script>

<style lang="scss">
.repo-settings-modal {
  width: 410px;
  box-sizing: border-box;
  padding: 0 0;

  .devui-modal__body {
    padding: 0;
  }

  .tip-desc {
    // @apply text-G900 px-[22px] my-[18px] leading-[28px] break-all;
  }
  .devui-modal__header {
    padding: 14px 24px;
    height: auto!important;
  }
  .btn-close {
    right: 24px;
    top: 16px;
  }
  .line {
    width: 100%;
    height: 1px;
  }
}
</style>