Add Vue frontend application

frontend/src/components/stats/MiniLineChart.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{
+  data: { date: string; value: number }[]
+  color?: string
+  height?: number
+  maxPoints?: number
+}>(), {
+  color: 'var(--accent-cyan)',
+  height: 60,
+  maxPoints: 30
+})
+
+const displayData = computed(() => {
+  if (props.data.length <= props.maxPoints) return props.data
+  // 采样：均匀抽取
+  const step = Math.ceil(props.data.length / props.maxPoints)
+  return props.data.filter((_, i) => i % step === 0)
+})
+
+const maxValue = computed(() => Math.max(...displayData.value.map(d => d.value), 1))
+
+const points = computed(() => {
+  return displayData.value.map((d, i) => {
+    const x = (i / (displayData.value.length - 1)) * 100
+    const y = 100 - (d.value / maxValue.value * 100)
+    return `${x},${y}`
+  }).join(' ')
+})
+</script>
+
+<template>
+  <div class="mini-line-chart" :style="{ '--chart-height': height + 'px', '--chart-color': color }">
+    <svg :viewBox="`0 0 100 100`" preserveAspectRatio="none" class="chart-svg">
+      <!-- 背景网格 -->
+      <line x1="0" y1="50" x2="100" y2="50" class="grid-line" />
+      <!-- 折线 -->
+      <polyline :points="points" class="line" />
+      <!-- 数据点 -->
+      <circle
+        v-for="(d, i) in displayData"
+        :key="i"
+        :cx="(i / (displayData.length - 1)) * 100"
+        :cy="100 - (d.value / maxValue * 100)"
+        r="2"
+        class="dot"
+      />
+    </svg>
+  </div>
+</template>
+
+<style scoped>
+.mini-line-chart {
+  width: 100%;
+  height: var(--chart-height);
+}
+
+.chart-svg {
+  width: 100%;
+  height: 100%;
+}
+
+.grid-line {
+  stroke: var(--border-dim);
+  stroke-width: 0.5;
+}
+
+.line {
+  fill: none;
+  stroke: var(--chart-color);
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  opacity: 0.8;
+}
+
+.dot {
+  fill: var(--chart-color);
+  opacity: 0;
+  transition: opacity var(--transition-fast);
+}
+
+.mini-line-chart:hover .dot {
+  opacity: 1;
+}
+</style>