97 lines
2.0 KiB
Vue
97 lines
2.0 KiB
Vue
<script setup lang="ts">
|
||
defineProps<{
|
||
actionDisabled?: boolean;
|
||
actionLabel?: string;
|
||
message: string;
|
||
}>();
|
||
|
||
const emit = defineEmits<{
|
||
action: [];
|
||
}>();
|
||
</script>
|
||
|
||
<template>
|
||
<div class="chat-error-notice" role="alert">
|
||
<span class="chat-error-notice__icon" aria-hidden="true">!</span>
|
||
<span class="chat-error-notice__content">
|
||
<span>{{ message }}<template v-if="actionLabel">，</template></span>
|
||
<button
|
||
v-if="actionLabel"
|
||
type="button"
|
||
class="chat-error-notice__action"
|
||
:disabled="actionDisabled"
|
||
@click="emit('action')"
|
||
>
|
||
{{ actionLabel }}
|
||
</button>
|
||
</span>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.chat-error-notice {
|
||
display: flex;
|
||
gap: 8px;
|
||
align-items: flex-start;
|
||
max-width: min(78%, 680px);
|
||
padding: 10px 12px;
|
||
font-size: 13px;
|
||
line-height: 20px;
|
||
color: var(--el-color-danger);
|
||
background: var(--el-color-danger-light-9);
|
||
border: 1px solid var(--el-color-danger-light-7);
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.chat-error-notice__icon {
|
||
display: inline-flex;
|
||
flex: 0 0 auto;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-top: 2px;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
border: 1px solid currentColor;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.chat-error-notice__content {
|
||
min-width: 0;
|
||
}
|
||
|
||
.chat-error-notice__action {
|
||
padding: 0;
|
||
margin-left: var(--space-1);
|
||
font: inherit;
|
||
font-weight: 600;
|
||
line-height: inherit;
|
||
color: currentcolor;
|
||
text-decoration: underline;
|
||
text-underline-offset: 2px;
|
||
cursor: pointer;
|
||
background: transparent;
|
||
border: 0;
|
||
border-radius: var(--el-border-radius-small);
|
||
}
|
||
|
||
.chat-error-notice__action:hover:not(:disabled) {
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.chat-error-notice__action:active:not(:disabled) {
|
||
opacity: 0.65;
|
||
}
|
||
|
||
.chat-error-notice__action:focus-visible {
|
||
outline: 2px solid var(--el-color-primary-light-3);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
.chat-error-notice__action:disabled {
|
||
cursor: not-allowed;
|
||
opacity: 0.5;
|
||
}
|
||
</style>
|