init: Todo Monitor

2026-08-02 02:50:27 +08:00
parent 278a7e90b0
commit 81dd92cf22
43 changed files with 7483 additions and 0 deletions
@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import type { ParsedNote } from '@/types/card'
+import { computed } from 'vue'
+import StatusBadge from '@/components/shared/StatusBadge.vue'
+import PriorityBadge from '@/components/shared/PriorityBadge.vue'
+
+const props = defineProps<{
+  card: ParsedNote
+}>()
+
+const achievement = computed(() => {
+  if (props.card.metric === null || props.card.target === null || props.card.target === 0) return null
+  return Math.round((props.card.metric / props.card.target) * 100)
+})
+
+const achievementColor = computed(() => {
+  if (achievement.value === null) return 'var(--accent)'
+  if (achievement.value >= 100) return 'var(--status-done)'
+  if (achievement.value >= 75) return 'var(--accent)'
+  return 'var(--status-blocked)'
+})
+</script>
+
+<template>
+  <div class="metric-card">
+    <div class="metric-header">
+      <StatusBadge v-if="card.status" :status="card.status" />
+      <PriorityBadge v-if="card.priority" :priority="card.priority" />
+      <span class="metric-type-tag">指标</span>
+    </div>
+    <h3 class="metric-title" v-if="card.title">{{ card.title }}</h3>
+    <div class="metric-body">
+      <div class="metric-value" :style="{ color: achievementColor }">
+        {{ card.metric ?? '-' }}
+      </div>
+      <div class="metric-target-row">
+        <span class="metric-label" v-if="card.target !== null">目标 {{ card.target }}</span>
+        <span class="metric-rate" v-if="achievement !== null" :style="{ color: achievementColor }">
+          达成率 {{ achievement }}%
+        </span>
+      </div>
+      <div class="metric-bar" v-if="achievement !== null">
+        <div
+          class="metric-bar-fill"
+          :style="{ width: Math.min(achievement, 100) + '%', background: achievementColor }"
+        />
+      </div>
+    </div>
+    <p class="metric-desc" v-if="card.description">{{ card.description }}</p>
+  </div>
+</template>
+
+<style scoped>
+.metric-card {
+  background: var(--surface-dashboard);
+  border: 1px solid var(--border-dashboard);
+  border-radius: var(--radius-md);
+  padding: 18px 20px;
+}
+
+.metric-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 14px;
+  text-align: center;
+}
+
+.metric-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 14px;
+}
+
+.metric-type-tag {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 8px;
+  background: rgba(168, 85, 247, 0.12);
+  color: #a855f7;
+  text-transform: uppercase;
+}
+
+.metric-body {
+  text-align: center;
+  padding: 10px 0;
+}
+
+.metric-value {
+  font-size: 42px;
+  font-weight: 800;
+  letter-spacing: -1px;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+}
+
+.metric-target-row {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+  margin-top: 6px;
+}
+
+.metric-label {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.metric-rate {
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.metric-bar {
+  height: 4px;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 2px;
+  margin-top: 10px;
+  overflow: hidden;
+}
+
+.metric-bar-fill {
+  height: 100%;
+  border-radius: 2px;
+  transition: width 0.6s ease;
+}
+
+.metric-desc {
+  font-size: 13px;
+  color: var(--text-secondary);
+  margin-top: 12px;
+  text-align: center;
+}
+</style>