Дмитрий
66 lines
2.1 KiB
Vue
66 lines
2.1 KiB
Vue
<template>
|
|
<div v-if="isDev && index" class="dev-index-badge" :class="{ 'is-dialog': dialogMode }">
|
|
<span class="dev-index-num">{{ index }}</span>
|
|
<span class="dev-index-label">{{ label }}</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
/**
|
|
* Dev-only визуальный badge: показывает индекс и название текущего экрана/компонента
|
|
* для упрощения обратной связи на localhost («элемент 16: бага X»).
|
|
*
|
|
* Использование:
|
|
* - Layout-уровень: `<DevIndexBadge :index="route.meta.devIndex" :label="route.meta.devLabel" />`
|
|
* - Inline (диалоги/sub-компоненты): `<DevIndexBadge :index="18" label="NewProjectDialog" :dialog-mode="true" />`
|
|
*
|
|
* Не отображается если `index` falsy (null/undefined/0/'').
|
|
* `dialogMode` переключает position: fixed → absolute для встраивания внутрь карточек.
|
|
*/
|
|
defineProps<{
|
|
index: number | string | null | undefined;
|
|
label?: string;
|
|
dialogMode?: boolean;
|
|
}>();
|
|
|
|
// Гейт окружения: бейдж рисуется ТОЛЬКО в dev. В прод-сборке import.meta.env.DEV
|
|
// = false → бейдж не виден независимо от того, передан ли index хардкодом.
|
|
const isDev = import.meta.env.DEV;
|
|
</script>
|
|
|
|
<style scoped>
|
|
.dev-index-badge {
|
|
position: fixed;
|
|
top: 64px;
|
|
right: 8px;
|
|
z-index: 9000;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
background: #0f6e56;
|
|
color: #fff;
|
|
padding: 4px 10px;
|
|
border-radius: 4px;
|
|
font-family: 'JetBrains Mono', ui-monospace, monospace;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
pointer-events: none;
|
|
opacity: 0.92;
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
|
|
}
|
|
.dev-index-badge.is-dialog {
|
|
position: absolute;
|
|
z-index: 10000;
|
|
}
|
|
.dev-index-num {
|
|
background: rgba(255, 255, 255, 0.22);
|
|
padding: 1px 6px;
|
|
border-radius: 3px;
|
|
min-width: 22px;
|
|
text-align: center;
|
|
}
|
|
.dev-index-label {
|
|
letter-spacing: 0.02em;
|
|
}
|
|
</style>
|