122 lines
2.6 KiB
Vue
122 lines
2.6 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import WorkbenchModuleCard from './workbench-module-card.vue';
|
||
|
|
|
||
|
|
defineOptions({ name: 'WorkbenchMentions' });
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
editing?: boolean;
|
||
|
|
collapsed?: boolean;
|
||
|
|
}
|
||
|
|
withDefaults(defineProps<Props>(), { editing: false, collapsed: false });
|
||
|
|
defineEmits<{ (e: 'hide'): void; (e: 'toggle-collapse'): void }>();
|
||
|
|
|
||
|
|
interface MentionItem {
|
||
|
|
id: string;
|
||
|
|
fromName: string;
|
||
|
|
fromAvatar: string;
|
||
|
|
context: string;
|
||
|
|
timeLabel: string;
|
||
|
|
unread: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
const items: MentionItem[] = [
|
||
|
|
{
|
||
|
|
id: 'm1',
|
||
|
|
fromName: '李四',
|
||
|
|
fromAvatar: '李',
|
||
|
|
context: '在 任务「分片设计评审」中 @ 了你',
|
||
|
|
timeLabel: '2h 前 · 评审建议',
|
||
|
|
unread: true
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 'm2',
|
||
|
|
fromName: '张三',
|
||
|
|
fromAvatar: '张',
|
||
|
|
context: '在 执行「迭代 24.05」中 @ 了你',
|
||
|
|
timeLabel: '昨日 · 关闭确认',
|
||
|
|
unread: true
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 'm3',
|
||
|
|
fromName: '王五',
|
||
|
|
fromAvatar: '王',
|
||
|
|
context: '在 需求「多币种支持」中 @ 了你',
|
||
|
|
timeLabel: '3 天前',
|
||
|
|
unread: true
|
||
|
|
}
|
||
|
|
];
|
||
|
|
|
||
|
|
const unreadCount = items.filter(i => i.unread).length;
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<WorkbenchModuleCard
|
||
|
|
title="@我的提及"
|
||
|
|
icon="mdi:at"
|
||
|
|
:badge-count="unreadCount"
|
||
|
|
:editing="editing"
|
||
|
|
:collapsed="collapsed"
|
||
|
|
@hide="$emit('hide')"
|
||
|
|
@toggle-collapse="$emit('toggle-collapse')"
|
||
|
|
>
|
||
|
|
<ul class="mention-list">
|
||
|
|
<li v-for="item in items" :key="item.id" class="mention-item">
|
||
|
|
<span class="mention-avatar">{{ item.fromAvatar }}</span>
|
||
|
|
<div class="mention-body">
|
||
|
|
<div class="mention-text">
|
||
|
|
<strong>{{ item.fromName }}</strong>
|
||
|
|
{{ item.context }}
|
||
|
|
</div>
|
||
|
|
<div class="mention-meta">{{ item.timeLabel }}</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</WorkbenchModuleCard>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.mention-list {
|
||
|
|
list-style: none;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 8px;
|
||
|
|
}
|
||
|
|
.mention-item {
|
||
|
|
display: flex;
|
||
|
|
gap: 10px;
|
||
|
|
padding: 10px 12px;
|
||
|
|
border: 1px solid var(--el-border-color-lighter);
|
||
|
|
border-radius: 8px;
|
||
|
|
background: var(--el-fill-color-blank);
|
||
|
|
}
|
||
|
|
.mention-avatar {
|
||
|
|
flex-shrink: 0;
|
||
|
|
width: 32px;
|
||
|
|
height: 32px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: var(--el-color-primary-light-8);
|
||
|
|
color: var(--el-color-primary);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
font-weight: 600;
|
||
|
|
font-size: 13px;
|
||
|
|
}
|
||
|
|
.mention-body {
|
||
|
|
min-width: 0;
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
.mention-text {
|
||
|
|
font-size: 13px;
|
||
|
|
line-height: 1.5;
|
||
|
|
color: var(--el-text-color-primary);
|
||
|
|
}
|
||
|
|
.mention-meta {
|
||
|
|
font-size: 12px;
|
||
|
|
color: var(--el-text-color-secondary);
|
||
|
|
margin-top: 4px;
|
||
|
|
}
|
||
|
|
</style>
|