component-lib/projects/package/AIRobot/components/AiMessage.vue

<!-- ai全局提示 message -->
<template>
  <div
    v-if="visible"
    class="ai-message"
    :class="{
      success: option.type === 'success',
      warning: option.type === 'warning',
      error: option.type === 'error'
    }"
  >
    {{ option.text }}
  </div>
</template>

<script setup lang="ts">
import { watch, computed } from 'vue'
const props = defineProps({
  /*
      配置
      text: 提示文字
      type: 提示状态 success warning error
    */
  messageOption: {
    type: Object,
    default: () => {}
  },
  visible: {
    type: Boolean,
    default: false
  }
})
const option = computed(() => {
  return {
    text: '',
    type: '', // success warning error
    ...props.messageOption
  }
})

const emit = defineEmits(['update:visible'])

watch(
  () => props.visible,
  (value) => {
    if (value) {
      setTimeout(() => {
        emit('update:visible', false)
      }, 1500)
    }
  }
)
</script>

<style lang="less" scoped>
@import '../styles/variables.less';
.ai-message {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.1);
  max-width: 300px;
  border: 1px solid transparent;
  &.success {
    // border-color: $--color-success;
    color: @color-success;
    // box-shadow: 2px 2px 10px 2px rgba($--color-success, 0.1);
  }
  &.warning {
    // border-color: $--color-warning;
    color: @color-warning;
    // box-shadow: 2px 2px 10px 2px rgba($--color-warning, 0.1);
  }
  &.error {
    // border-color: $--color-danger;
    color: @color-danger;
    // box-shadow: 2px 2px 10px 2px rgba($--color-danger, 0.1);
  }
}
</style>