Files
Nexus/frontend/src/components/servers/ServerNameWithRemark.vue
T
2026-07-08 22:31:31 +08:00

41 lines
1.1 KiB
Vue

<template>
<div class="server-name-cell d-flex align-start ga-1" @click.stop="emit('toggle')">
<v-icon size="small" class="mt-1 shrink-0">
{{ expanded ? 'mdi-chevron-down' : 'mdi-chevron-right' }}
</v-icon>
<div class="server-name-cell__body min-width-0">
<div class="font-weight-medium text-primary text-truncate" :title="name">{{ name }}</div>
<div class="d-flex align-start ga-1 mt-1">
<span
v-if="remark"
class="server-name-cell__remark text-caption text-medium-emphasis"
:title="remark"
>{{ remark }}</span>
<span v-else class="text-caption text-disabled">无备注</span>
<v-btn
icon="mdi-pencil-outline"
size="x-small"
variant="text"
density="compact"
class="shrink-0 mt-n1"
title="编辑备注"
@click.stop="emit('edit-remark')"
/>
</div>
</div>
</div>
</template>
<script setup lang="ts">
defineProps<{
name: string
remark?: string | null
expanded?: boolean
}>()
const emit = defineEmits<{
toggle: []
'edit-remark': []
}>()
</script>