79 lines
1.7 KiB
Vue
Executable File
79 lines
1.7 KiB
Vue
Executable File
<template>
|
|
<span class="mentions-container">
|
|
<template v-for="(part, index) in parsedContent" :key="index">
|
|
<router-link
|
|
v-if="part.type === 'mention'"
|
|
:to="`/profile/${part.userId}`"
|
|
class="mention-link"
|
|
>
|
|
@{{ part.username }}
|
|
</router-link>
|
|
<span v-else>{{ part.text }}</span>
|
|
</template>
|
|
</span>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps({
|
|
content: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
mentions: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
})
|
|
|
|
const parsedContent = computed(() => {
|
|
if (!props.content) return []
|
|
|
|
const parts = []
|
|
let currentIndex = 0
|
|
|
|
// Parcourir le contenu pour trouver les mentions
|
|
props.content.split(/(@\w+)/).forEach((part, index) => {
|
|
if (part.startsWith('@')) {
|
|
const username = part.substring(1)
|
|
const mention = props.mentions.find(m => m.username === username)
|
|
|
|
if (mention) {
|
|
parts.push({
|
|
type: 'mention',
|
|
username: mention.username,
|
|
userId: mention.id,
|
|
text: part
|
|
})
|
|
} else {
|
|
// Mention non trouvée, traiter comme du texte normal
|
|
parts.push({ type: 'text', text: part })
|
|
}
|
|
} else if (part.trim()) {
|
|
parts.push({ type: 'text', text: part })
|
|
}
|
|
})
|
|
|
|
return parts
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.mentions-container {
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.mention-link {
|
|
@apply font-medium transition-colors cursor-pointer;
|
|
text-decoration: none;
|
|
color: #8b5cf6;
|
|
filter: drop-shadow(0 0 2px rgba(139, 92, 246, 0.3));
|
|
}
|
|
|
|
.mention-link:hover {
|
|
color: #7c3aed;
|
|
filter: drop-shadow(0 0 4px rgba(139, 92, 246, 0.5));
|
|
}
|
|
</style> |