cn-rdms-web/src/views/workbench/modules/workbench-activity-panel.vue

<script setup lang="ts">
import type { WorkbenchActivityItem } from '../homepage';

defineOptions({ name: 'WorkbenchActivityPanel' });

interface Props {
  items: WorkbenchActivityItem[];
}

defineProps<Props>();
</script>

<template>
  <ElCard class="workbench-activity card-wrapper" shadow="never">
    <template #header>
      <div>
        <h3 class="workbench-activity__title">最近动态</h3>
        <p class="workbench-activity__desc">关注与我相关的需求、任务、工单变化与 @ 提醒</p>
      </div>
    </template>

    <div v-if="items.length" class="workbench-activity__list">
      <article v-for="item in items" :key="item.id" class="workbench-activity__item">
        <div class="workbench-activity__rail">
          <span class="workbench-activity__dot" :class="`workbench-activity__dot--${item.tone}`" />
          <span class="workbench-activity__line" />
        </div>

        <div class="workbench-activity__body">
          <div class="workbench-activity__meta">
            <span class="workbench-activity__time" :title="item.timeLabel">{{ item.relativeLabel }}</span>
            <span v-if="item.mentioned" class="workbench-activity__mention">@ 提醒</span>
          </div>
          <p class="workbench-activity__sentence">
            <strong class="workbench-activity__actor">{{ item.actor }}</strong>
            <span>{{ item.action }}</span>
            <strong class="workbench-activity__target">{{ item.target }}</strong>
          </p>
        </div>
      </article>
    </div>
    <ElEmpty v-else description="暂无动态" :image-size="72" />
  </ElCard>
</template>

<style scoped>
.workbench-activity {
  overflow: hidden;
}

:deep(.el-card__header) {
  padding: 16px 18px;
  border-bottom: 1px solid rgb(226 232 240 / 80%);
}

.workbench-activity__title {
  margin: 0;
  color: rgb(15 23 42 / 98%);
  font-size: 16px;
  font-weight: 700;
}

.workbench-activity__desc {
  margin: 4px 0 0;
  color: rgb(100 116 139 / 92%);
  font-size: 13px;
  line-height: 1.6;
}

.workbench-activity__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.workbench-activity__item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
}

.workbench-activity__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.workbench-activity__dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  margin-top: 8px;
  box-shadow: 0 0 0 4px rgb(255 255 255 / 96%);
}

.workbench-activity__dot--sky {
  background-color: rgb(14 165 233 / 92%);
}

.workbench-activity__dot--emerald {
  background-color: rgb(5 150 105 / 92%);
}

.workbench-activity__dot--amber {
  background-color: rgb(217 119 6 / 92%);
}

.workbench-activity__dot--rose {
  background-color: rgb(225 29 72 / 92%);
}

.workbench-activity__dot--violet {
  background-color: rgb(124 58 237 / 92%);
}

.workbench-activity__line {
  flex: 1;
  width: 2px;
  min-height: 28px;
  margin-top: 4px;
  background: linear-gradient(180deg, rgb(203 213 225 / 96%), rgb(226 232 240 / 24%));
}

.workbench-activity__item:last-child .workbench-activity__line {
  opacity: 0;
}

.workbench-activity__body {
  padding: 6px 14px 14px;
  min-width: 0;
}

.workbench-activity__meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.workbench-activity__time {
  color: rgb(100 116 139 / 92%);
  font-size: 12px;
}

.workbench-activity__mention {
  padding: 1px 8px;
  border-radius: 999px;
  background-color: rgb(237 233 254 / 96%);
  color: rgb(109 40 217 / 96%);
  font-size: 11px;
  font-weight: 600;
}

.workbench-activity__sentence {
  margin: 6px 0 0;
  color: rgb(71 85 105 / 94%);
  font-size: 13px;
  line-height: 1.7;
}

.workbench-activity__actor {
  color: rgb(15 23 42 / 98%);
  font-weight: 600;
}

.workbench-activity__target {
  color: rgb(14 116 144 / 96%);
  font-weight: 600;
}
</style>