diff --git a/src/client/ui/_common_/header.vue b/src/client/ui/_common_/header.vue index af7f1c2b6a..87a5621902 100644 --- a/src/client/ui/_common_/header.vue +++ b/src/client/ui/_common_/header.vue @@ -9,6 +9,7 @@ <div class="title" v-for="tab in info.tabs" :key="tab.id" :class="{ _button: tab.onClick, selected: tab.selected }" @click.stop="tab.onClick" v-tooltip="tab.tooltip"> <Fa v-if="tab.icon" :icon="tab.icon" :key="tab.icon" class="icon"/> <span v-if="tab.title" class="text">{{ tab.title }}</span> + <Fa class="indicator" v-if="tab.indicate" :icon="faCircle"/> </div> </template> <template v-else> @@ -27,7 +28,7 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import { faChevronLeft } from '@fortawesome/free-solid-svg-icons'; +import { faChevronLeft, faCircle } from '@fortawesome/free-solid-svg-icons'; export default defineComponent({ props: { @@ -45,7 +46,7 @@ export default defineComponent({ return { canBack: false, height: 0, - faChevronLeft + faChevronLeft, faCircle }; }, @@ -131,6 +132,17 @@ export default defineComponent({ overflow: hidden; text-overflow: ellipsis; padding: 0 16px; + position: relative; + + > .indicator { + position: absolute; + top: initial; + right: 8px; + top: 8px; + color: var(--indicator); + font-size: 12px; + animation: blink 1s infinite; + } > .icon + .text { margin-left: 8px;