Finish database, API, Compare/Detail/Compare Views

frontend/src/views/CompareView.vue

@@ -0,0 +1,73 @@
+<template>
+  <div style="padding:20px;">
+    <h2>MCU 对比</h2>
+    <table border="1" cellpadding="6">
+      <thead>
+        <tr>
+          <th>字段</th>
+          <th v-for="m in mcus" :key="m.id">{{ m.name }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="key in fieldKeys" :key="key">
+          <td><strong>{{ FIELD_LABELS[key] || key }}</strong></td>
+          <td v-for="m in mcus" :key="m.id">{{ m[key] }}</td>
+        </tr>
+      </tbody>
+    </table>
+    <button @click="$router.push('/')">返回</button>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+const mcus = ref([]);
+const fieldKeys = ref([]);
+
+const FIELD_LABELS = {
+  name: "Name",
+  core_num: "Number of Cores",
+  core_type: "Core Architecture",
+  instruction_set: "Instruction Set",
+  coremark: "CoreMark Score",
+  coremark_per_mhz: "CoreMark per MHz",
+  frequency: "Frequency (MHz)",
+  flash: "Flash (KB)",
+  rom: "ROM (KB)",
+  ram: "RAM (KB)",
+  sram: "SRAM (KB)",
+  sram_in_rtc: "RTC SRAM (KB)",
+  bus_width: "Bus Width (bit)",
+  cache_type: "Cache Type",
+  l1_cache_size: "L1 Cache (KB)",
+  l2_cache_size: "L2 Cache (KB)",
+  l3_cache_size: "L3 Cache (KB)",
+  pipeline_depth: "Pipeline Depth",
+  simd_support: "SIMD Support (1 = Yes, 0 = No)",
+  fpu: "FPU Support (Single/Double Precision)",
+  package: "Package",
+  gpios: "Number of GPIOs",
+  uarts: "Number of UARTs",
+  i2cs: "Number of I2C Interfaces",
+  i2ses: "Number of I2S Interfaces",
+  spis: "Number of SPI Interfaces",
+  spi_protocols: "Supported SPI Protocols",
+  systems: "Supported Systems",
+  manufacturer: "Manufacturer",
+  link: "Product Link"
+};
+
+onMounted(async () => {
+  const ids = route.query.ids.split(",");
+  for (let id of ids) {
+    const res = await fetch(`/api/mcus/${id}`);
+    mcus.value.push(await res.json());
+  }
+
+  // Don't compare the "link" field
+  fieldKeys.value = Object.keys(FIELD_LABELS).filter(k => k !== "link");
+});
+</script>