41 lines
1.1 KiB
Vue
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>
|