cn-rdms-web/src/views/workbench/modules/workbench-project-grid.vue

<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { useRouterPush } from '@/hooks/common/router';
import { buildWorkbenchOwnedProjectItems, buildWorkbenchProjectItems } from '../homepage';
import { workbenchOwnedProjectMock, workbenchProjectMock } from '../mock';
import WorkbenchModuleCard from './workbench-module-card.vue';

defineOptions({ name: 'WorkbenchProjectGrid' });

interface Props {
  editing?: boolean;
  collapsed?: boolean;
}

withDefaults(defineProps<Props>(), { editing: false, collapsed: false });

defineEmits<{
  (e: 'hide'): void;
  (e: 'toggle-collapse'): void;
}>();

const { routerPushByKey } = useRouterPush();

type ProjectViewKey = 'participated' | 'owned';

const activeView = ref<ProjectViewKey>('participated');

const participatedItems = computed(() => buildWorkbenchProjectItems(workbenchProjectMock));
const ownedItems = computed(() => buildWorkbenchOwnedProjectItems(workbenchOwnedProjectMock));

const currentOwnedId = ref<string>(ownedItems.value[0]?.id ?? '');
watch(ownedItems, list => {
  if (!list.find(item => item.id === currentOwnedId.value)) {
    currentOwnedId.value = list[0]?.id ?? '';
  }
});
const currentOwned = computed(() => ownedItems.value.find(item => item.id === currentOwnedId.value) ?? null);

function handleEnterProjectList() {
  routerPushByKey('project_list');
}
</script>

<template>
  <WorkbenchModuleCard
    title="我的项目"
    icon="mdi:briefcase-outline"
    :editing="editing"
    :collapsed="collapsed"
    @hide="$emit('hide')"
    @toggle-collapse="$emit('toggle-collapse')"
  >
    <div class="workbench-project__tabs">
      <ElRadioGroup v-model="activeView" size="small">
        <ElRadioButton value="participated">我参与的</ElRadioButton>
        <ElRadioButton value="owned">我负责的</ElRadioButton>
      </ElRadioGroup>
      <ElButton type="primary" link @click="handleEnterProjectList">
        <span>进入项目列表</span>
        <SvgIcon icon="mdi:arrow-right-thin" class="workbench-project__more-icon" />
      </ElButton>
    </div>

    <!-- 我参与的：网格视图 -->
    <template v-if="activeView === 'participated'">
      <p class="workbench-project__desc">直接看每个项目的当前进度、我的角色与未完成任务</p>

      <div v-if="participatedItems.length" class="workbench-project__grid">
        <article v-for="item in participatedItems" :key="item.id" class="workbench-project__card">
          <div class="workbench-project__card-header">
            <div class="workbench-project__card-title-group">
              <h4 class="workbench-project__card-title">{{ item.name }}</h4>
              <span class="workbench-project__card-code">{{ item.code }}</span>
            </div>
            <span class="workbench-project__card-status" :class="`workbench-project__card-status--${item.statusTone}`">
              {{ item.statusLabel }}
            </span>
          </div>

          <div class="workbench-project__card-role">
            <span class="workbench-project__card-role-label">我的角色</span>
            <strong class="workbench-project__card-role-value">{{ item.myRole }}</strong>
          </div>

          <div class="workbench-project__progress">
            <div class="workbench-project__progress-header">
              <span class="workbench-project__progress-label">进度</span>
              <strong class="workbench-project__progress-value">{{ item.progress }}%</strong>
            </div>
            <div class="workbench-project__progress-bar">
              <div
                class="workbench-project__progress-bar-inner"
                :class="`workbench-project__progress-bar-inner--${item.statusTone}`"
                :style="{ width: `${item.progress}%` }"
              />
            </div>
          </div>

          <div class="workbench-project__footer">
            <div class="workbench-project__footer-block">
              <span class="workbench-project__footer-label">我负责的任务</span>
              <strong class="workbench-project__footer-value">
                {{ item.myTaskCount }}
                <span v-if="item.myPendingTaskCount > 0" class="workbench-project__footer-sub">
                  （待处理 {{ item.myPendingTaskCount }}）
                </span>
              </strong>
            </div>
            <div class="workbench-project__footer-block workbench-project__footer-block--right">
              <span class="workbench-project__footer-label">最近活动</span>
              <strong class="workbench-project__footer-value">{{ item.lastActiveLabel }}</strong>
            </div>
          </div>
        </article>
      </div>
      <ElEmpty v-else description="暂未参与任何项目" :image-size="72" />
    </template>

    <!-- 我负责的：单对象深度详情 -->
    <template v-else>
      <ElEmpty v-if="!currentOwned" description="您当前没有负责的项目" :image-size="72" />
      <template v-else>
        <div v-if="ownedItems.length > 1" class="ps-head">
          <span class="ps-pin-label">当前项目：</span>
          <ElSelect v-model="currentOwnedId" size="small" class="ps-pin">
            <ElOption v-for="p in ownedItems" :key="p.id" :label="p.name" :value="p.id" />
          </ElSelect>
        </div>
        <div v-else class="ps-head ps-head--single">
          <span class="ps-pin-label">当前项目：</span>
          <strong class="ps-single-name">{{ currentOwned.name }}</strong>
        </div>

        <div class="ps-overview">
          <div class="ps-ring" :style="{ '--p': currentOwned.progress } as any">
            <span>{{ currentOwned.progress }}%</span>
          </div>
          <div class="ps-kpis">
            <div class="ps-kpi">
              <b>{{ currentOwned.executionCount }}</b>
              <span>执行</span>
            </div>
            <div class="ps-kpi">
              <b>{{ currentOwned.taskCount }}</b>
              <span>任务</span>
            </div>
            <div class="ps-kpi">
              <b>{{ currentOwned.memberCount }}</b>
              <span>成员</span>
            </div>
            <div class="ps-kpi">
              <b :class="{ 'is-danger': currentOwned.overdueCount > 0 }">{{ currentOwned.overdueCount }}</b>
              <span>逾期</span>
            </div>
          </div>
        </div>
        <div class="ps-sub">剩 {{ currentOwned.remainingDays }} 天 · 我的角色：{{ currentOwned.myRole }}</div>

        <div class="ps-section-title">📌 本周关键节点</div>
        <ul class="ps-milestones">
          <li v-for="m in currentOwned.milestones" :key="m.id">
            <span>{{ m.title }}</span>
            <span :class="`ps-time tone-${m.tone}`">{{ m.timeLabel }}</span>
          </li>
        </ul>

        <div class="ps-section-title">👥 成员负载</div>
        <ul class="ps-members">
          <li v-for="m in currentOwned.members" :key="m.name">
            <span class="ps-member-name">{{ m.name }}</span>
            <div class="ps-bar">
              <div class="ps-bar-inner" :class="`is-${m.level}`" :style="{ width: `${m.load}%` }" />
            </div>
            <span class="ps-member-load">{{ Math.round(m.load / 10) }}</span>
          </li>
        </ul>
      </template>
    </template>
  </WorkbenchModuleCard>
</template>

<style scoped>
.workbench-project__tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

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

.workbench-project__more-icon {
  margin-left: 4px;
  font-size: 16px;
}

.workbench-project__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.workbench-project__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgb(226 232 240 / 92%);
  border-radius: 18px;
  background: linear-gradient(180deg, rgb(255 255 255 / 99%), rgb(248 250 252 / 96%));
  transition:
    border-color 160ms ease,
    transform 160ms ease;
}

.workbench-project__card:hover {
  border-color: rgb(14 116 144 / 60%);
}

.workbench-project__card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.workbench-project__card-title-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

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

.workbench-project__card-code {
  color: rgb(100 116 139 / 92%);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.workbench-project__card-status {
  flex-shrink: 0;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.workbench-project__card-status--emerald {
  background-color: rgb(220 252 231 / 96%);
  color: rgb(5 150 105 / 96%);
}

.workbench-project__card-status--sky {
  background-color: rgb(224 242 254 / 96%);
  color: rgb(14 116 144 / 96%);
}

.workbench-project__card-status--amber {
  background-color: rgb(254 243 199 / 96%);
  color: rgb(180 83 9 / 96%);
}

.workbench-project__card-role {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 12px;
  background-color: rgb(241 245 249 / 80%);
}

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

.workbench-project__card-role-value {
  color: rgb(15 23 42 / 98%);
  font-size: 13px;
  font-weight: 600;
}

.workbench-project__progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.workbench-project__progress-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

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

.workbench-project__progress-value {
  color: rgb(15 23 42 / 98%);
  font-size: 18px;
  line-height: 1;
  letter-spacing: -0.02em;
}

.workbench-project__progress-bar {
  height: 6px;
  border-radius: 999px;
  background-color: rgb(226 232 240 / 88%);
  overflow: hidden;
}

.workbench-project__progress-bar-inner {
  height: 100%;
  border-radius: 999px;
  transition: width 240ms ease;
}

.workbench-project__progress-bar-inner--emerald {
  background: linear-gradient(90deg, rgb(5 150 105 / 92%), rgb(16 185 129 / 86%));
}

.workbench-project__progress-bar-inner--sky {
  background: linear-gradient(90deg, rgb(14 116 144 / 92%), rgb(14 165 233 / 86%));
}

.workbench-project__progress-bar-inner--amber {
  background: linear-gradient(90deg, rgb(217 119 6 / 92%), rgb(245 158 11 / 86%));
}

.workbench-project__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

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

.workbench-project__footer-block--right {
  align-items: flex-end;
}

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

.workbench-project__footer-value {
  color: rgb(15 23 42 / 98%);
  font-size: 14px;
  font-weight: 600;
}

.workbench-project__footer-sub {
  color: rgb(190 18 60 / 94%);
  font-size: 12px;
  font-weight: 600;
}

@media (width <= 1280px) {
  .workbench-project__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width <= 600px) {
  .workbench-project__grid {
    grid-template-columns: 1fr;
  }
}

/* ===== 我负责的：单对象深度详情样式 ===== */
.ps-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.ps-pin-label {
  font-size: 12px;
  color: var(--el-text-color-secondary);
}
.ps-pin {
  width: 220px;
}
.ps-head--single .ps-single-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--el-text-color-primary);
}
.ps-overview {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--el-border-color-lighter);
}
.ps-ring {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: conic-gradient(
    var(--el-color-success) 0 calc(var(--p) * 1%),
    var(--el-fill-color) calc(var(--p) * 1%) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ps-ring span {
  background: #fff;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.ps-kpis {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  text-align: center;
}
.ps-kpi b {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--el-text-color-primary);
}
.ps-kpi b.is-danger {
  color: var(--el-color-danger);
}
.ps-kpi span {
  font-size: 11px;
  color: var(--el-text-color-secondary);
}
.ps-sub {
  margin-top: 6px;
  font-size: 12px;
  color: var(--el-text-color-secondary);
  text-align: center;
}
.ps-section-title {
  margin-top: 12px;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--el-text-color-secondary);
}
.ps-milestones,
.ps-members {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ps-milestones li {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--el-border-color-lighter);
  font-size: 13px;
}
.ps-milestones li:last-child {
  border-bottom: none;
}
.ps-time {
  font-size: 12px;
  font-weight: 600;
}
.ps-time.tone-amber {
  color: var(--el-color-warning);
}
.ps-time.tone-slate {
  color: var(--el-text-color-secondary);
}
.ps-members li {
  display: grid;
  grid-template-columns: 60px 1fr 30px;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
}
.ps-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--el-fill-color);
  overflow: hidden;
}
.ps-bar-inner {
  height: 100%;
}
.ps-bar-inner.is-ok {
  background: var(--el-color-success);
}
.ps-bar-inner.is-warn {
  background: var(--el-color-warning);
}
.ps-bar-inner.is-over {
  background: var(--el-color-danger);
}
.ps-member-load {
  text-align: right;
  color: var(--el-text-color-secondary);
  font-size: 11px;
}
</style>