O96u
737235acff
ci / ci (22, ubuntu-latest) (push) Canceled after 0s
GitHub Release / release (push) Canceled after 0s
Publish Docker image / build (linux/amd64, ubuntu-latest, amd64) (push) Canceled after 0s
Publish Docker image / build (linux/arm64, ubuntu-24.04-arm, arm64) (push) Canceled after 0s
Publish Docker image / merge (push) Canceled after 0s
- 每用户标签与彩色打标，图库 OR/AND 筛选与批量打标 - 操作日志记录登录、删除、设置与标签操作 - API 标签/打标接口；README 与文档站截图同步
62 lines
1.6 KiB
Vue
62 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import type { ImageTag } from '~/types/image'
|
|
import { defaultTagColor, resolveTagHexColor, tagPillStyle } from '~/utils/tag-colors'
|
|
|
|
const props = withDefaults(defineProps<{
|
|
tag: ImageTag
|
|
removable?: boolean
|
|
clickable?: boolean
|
|
size?: 'xs' | 'sm'
|
|
}>(), {
|
|
removable: false,
|
|
clickable: false,
|
|
size: 'xs'
|
|
})
|
|
|
|
const emit = defineEmits<{
|
|
remove: []
|
|
click: []
|
|
}>()
|
|
|
|
const displayColor = computed(() =>
|
|
resolveTagHexColor(props.tag.color, defaultTagColor(props.tag.id))
|
|
)
|
|
|
|
const pillStyle = computed(() => tagPillStyle(displayColor.value))
|
|
</script>
|
|
|
|
<template>
|
|
<span
|
|
class="inline-flex max-w-full items-center gap-1 rounded-md border px-2 py-0.5 font-medium"
|
|
:class="[
|
|
size === 'sm' ? 'text-sm' : 'text-xs',
|
|
clickable ? 'cursor-pointer hover:opacity-90' : ''
|
|
]"
|
|
:style="pillStyle"
|
|
:role="clickable ? 'button' : undefined"
|
|
:tabindex="clickable ? 0 : undefined"
|
|
@click="clickable ? emit('click') : undefined"
|
|
@keydown.enter.prevent="clickable ? emit('click') : undefined"
|
|
@keydown.space.prevent="clickable ? emit('click') : undefined"
|
|
>
|
|
<span
|
|
class="size-1.5 shrink-0 rounded-full"
|
|
:style="{ backgroundColor: displayColor }"
|
|
aria-hidden="true"
|
|
/>
|
|
<span class="truncate">{{ tag.name }}</span>
|
|
<button
|
|
v-if="removable"
|
|
type="button"
|
|
class="inline-flex shrink-0 rounded p-0.5 opacity-70 hover:opacity-100"
|
|
:aria-label="`Remove ${tag.name}`"
|
|
@click.stop="emit('remove')"
|
|
>
|
|
<UIcon
|
|
name="i-lucide-x"
|
|
class="size-3"
|
|
/>
|
|
</button>
|
|
</span>
|
|
</template>
|