cn-rdms-web/src/views/workbench/modules/workbench-my-task.vue

<script setup lang="ts">
import { computed, ref } from 'vue';
import WorkbenchModuleCard from './workbench-module-card.vue';

defineOptions({ name: 'WorkbenchMyTask' });

interface Props {
  editing?: boolean;
  collapsed?: boolean;
}
withDefaults(defineProps<Props>(), { editing: false, collapsed: false });
defineEmits<{ (e: 'hide'): void; (e: 'toggle-collapse'): void }>();

interface FocusItem {
  id: string;
  title: string;
  done: boolean;
}

const items = ref<FocusItem[]>([
  { id: 'f1', title: '提交昨日工时', done: true },
  { id: 'f2', title: '登录页 SSO 改造 · 18:00 截止', done: false },
  { id: 'f3', title: '迭代 24.05 关闭 · 跟交付 / QA 确认遗留', done: false }
]);

const doneCount = computed(() => items.value.filter(i => i.done).length);
const totalCount = computed(() => items.value.length);

const todayHours = 3.5;
const targetHours = 8;
</script>

<template>
  <WorkbenchModuleCard
    title="我的今日"
    icon="mdi:calendar-check-outline"
    :editing="editing"
    :collapsed="collapsed"
    @hide="$emit('hide')"
    @toggle-collapse="$emit('toggle-collapse')"
  >
    <div class="today-head">
      <span class="today-progress">{{ doneCount }} / {{ totalCount }} 已完成</span>
    </div>
    <ul class="today-list">
      <li v-for="item in items" :key="item.id" class="today-row">
        <ElCheckbox v-model="item.done" />
        <span class="today-text" :class="{ 'today-done': item.done }">{{ item.title }}</span>
      </li>
    </ul>
    <div class="today-foot">
      当日累计工时：
      <b>{{ todayHours }}h</b>
      / {{ targetHours }}h
    </div>
  </WorkbenchModuleCard>
</template>

<style scoped>
.today-head {
  display: flex;
  justify-content: flex-end;
  font-size: 12px;
  color: var(--el-text-color-secondary);
  margin-bottom: 6px;
}
.today-progress {
  padding: 2px 8px;
  background: var(--el-fill-color-lighter);
  border-radius: 999px;
}
.today-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.today-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--el-border-color-lighter);
}
.today-row:last-child {
  border-bottom: none;
}
.today-text {
  font-size: 13px;
}
.today-done {
  text-decoration: line-through;
  color: var(--el-text-color-placeholder);
}
.today-foot {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--el-border-color-lighter);
  font-size: 12px;
  color: var(--el-text-color-secondary);
}
.today-foot b {
  color: var(--el-text-color-primary);
  font-weight: 700;
}
</style>