init: Todo Monitor 初始提交

frontend/src/components/shared/PriorityBadge.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { PriorityType } from '@/types/card'
+
+const props = defineProps<{ priority: PriorityType }>()
+
+const HEX_MAP: Record<PriorityType, string> = {
+  '紧急': '#ef4444',
+  '高': '#f97316',
+  '中': '#38bdf8',
+  '低': '#64748b',
+}
+
+const hexColor = computed(() => HEX_MAP[props.priority] || '#64748b')
+
+const isUrgent = computed(() => props.priority === '紧急')
+
+const label = computed(() => {
+  const map: Record<PriorityType, string> = {
+    '紧急': '!!',
+    '高': '!',
+    '中': '\u00b7',
+    '低': '',
+  }
+  return map[props.priority]
+})
+</script>
+
+<template>
+  <span
+    class="priority-badge"
+    :class="{ urgent: isUrgent }"
+    :style="{ color: hexColor, background: hexColor + '2A', borderColor: hexColor + '40' }"
+  >
+    <span class="pri-symbol" v-if="label">{{ label }}</span>
+    {{ priority }}
+  </span>
+</template>
+
+<style scoped>
+.priority-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  font-size: 12px;
+  font-weight: 700;
+  padding: 3px 10px;
+  border-radius: 6px;
+  border: 1px solid;
+  white-space: nowrap;
+  transition: transform 0.12s;
+}
+
+.priority-badge.urgent {
+  font-size: 13px;
+  padding: 4px 12px;
+  animation: pulse 2s ease-in-out infinite;
+}
+
+.pri-symbol {
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.75; }
+}
+</style>