ui: add DataTable for merged_list.json

Author: zjp-CN

ui/app/app.vue

@@ -1,5 +1,5 @@
 <template>
   <div>
-    <Test />
+    <Kani />
   </div>
 </template>

ui/app/components/Kani.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { ofetch } from "ofetch";
+import { URL_MERGE_DIFF, MergeKaniColumns, multiSort, type VecMergeHashKaniList } from "~/shared/utils/merged_list";
+
+const vec = ref<VecMergeHashKaniList>([]);
+// Download JSON
+ofetch<VecMergeHashKaniList>(
+  URL_MERGE_DIFF,
+  { parseResponse: JSON.parse }
+).then(val => vec.value = val);
+
+// Set title
+useHead({ title: "Verify Rust Std - Kani" });
+</script>
+
+<template>
+  <div>len = {{ vec.length }}</div>
+
+  <DataTable :value="vec" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50]" sortMode="multiple" removableSort
+    sortField="proof_kind" :sort-order="1" v-model:multi-sort-meta="multiSort" tableStyle="min-width: 50rem">
+    <Column v-for="col of MergeKaniColumns" :key="col.key" :field="col.col.field" :header="col.col.header"
+      :style="{ width: col.col.width }" :sortable="col.col.sortable"></Column>
+  </DataTable>
+</template>

ui/app/components/Test.vue

@@ -0,0 +1,53 @@
+import type { DataTableSortMeta } from "primevue";
+
+export const URL_MERGE_DIFF = "https://raw.githubusercontent.com/os-checker/verify-rust-std_data/refs/heads/main/merge_diff.json";
+
+export type VecMergeHashKaniList = MergeHashKaniList[];
+
+export interface MergeHashKaniList {
+  file: string;
+  func: string;
+  hash?: string;
+  proof_kind?: ProofKind;
+}
+
+export enum ProofKind {
+  Standard = "Standard",
+  Contract = "Contract"
+}
+
+export interface Column {
+  field: string,
+  header: string,
+  width: string,
+  sortable?: boolean,
+}
+
+export interface MergeKaniColumn {
+  key: string,
+  col: Column,
+}
+
+export const MergeKaniColumns: MergeKaniColumn[] = [
+  {
+    key: "file",
+    col: { field: "file", header: "File Path", width: "25%", sortable: true },
+  },
+  {
+    key: "func",
+    col: { field: "func", header: "Function", width: "25%", sortable: true },
+  },
+  {
+    key: "hash",
+    col: { field: "hash", header: "Hash", width: "25%" },
+  },
+  {
+    key: "proof_kind",
+    col: { field: "proof_kind", header: "Proof Kind", width: "10%", sortable: true },
+  },
+];
+
+export const multiSort: DataTableSortMeta[] = [
+  { field: "proof_kind", order: 1 },
+  { field: "func", order: 1 },
+];

ui/app/shared/utils/merged_list.ts

@@ -4,17 +4,14 @@ import Aura from '@primeuix/themes/aura';
 export default defineNuxtConfig({
   compatibilityDate: '2025-07-15',
   devtools: { enabled: true },
-  typescript: {
-    typeCheck: true
-  },
-  modules: [
-    '@primevue/nuxt-module'
-  ],
+  ssr: false, // Client-side Only Rendering (SPA)
+  typescript: { typeCheck: true },
+  modules: ['@primevue/nuxt-module'],
   primevue: {
     options: {
       theme: {
         preset: Aura
       }
     }
   }
-})
+})

ui/nuxt.config.ts

@@ -12,6 +12,7 @@
   "dependencies": {
     "@primeuix/themes": "^1.2.3",
     "nuxt": "^4.0.1",
+    "ofetch": "^1.4.1",
     "primevue": "^4.3.7",
     "vue": "^3.5.18",
     "vue-router": "^4.5.1"