🌱 祈愿数据表格

src/components/gachaRecord/gro-table.vue

@@ -1 +1,67 @@
-<!-- todo 祈愿列表 -->
+<template>
+  <!-- todo 优化，增加筛选功能 -->
+  <div class="ua-gt-box">
+    <v-data-table
+      :headers="headers"
+      :items="props.modelValue"
+      height="500px"
+      fixed-header
+      fixed-footer
+    >
+      <template v-slot:item="{ item }">
+        <tr class="ua-gt-tr">
+          <td>{{ item.time }}</td>
+          <td>{{ getPool(item.gachaType) }}</td>
+          <td>{{ item.type }}</td>
+          <td>{{ item.name }}</td>
+          <td>{{ item.rank }}</td>
+        </tr>
+      </template>
+    </v-data-table>
+  </div>
+</template>
+<script lang="ts" setup>
+interface GroTableProps {
+  modelValue: TGApp.Sqlite.GachaRecords.SingleTable[];
+}
+
+const props = defineProps<GroTableProps>();
+
+const headers = [
+  { title: "时间", align: "center", key: "time" },
+  { title: "卡池", align: "center", key: "uigfType" },
+  { title: "类型", align: "center", key: "type" },
+  { title: "名称", align: "center", key: "name" },
+  { title: "星级", align: "center", key: "rank" },
+];
+
+function getPool(type: string) {
+  switch (type) {
+    case "100":
+      return "新手祈愿";
+    case "200":
+      return "常驻祈愿";
+    case "301":
+      return "角色活动祈愿";
+    case "302":
+      return "武器活动祈愿";
+    case "400":
+      return "集录祈愿";
+    default:
+      return "未知";
+  }
+}
+</script>
+<style lang="css" scoped>
+.ua-gt-box {
+  height: 100%;
+  max-height: calc(100vh - 120px);
+  padding-right: 5px;
+  border-radius: 5px;
+  overflow-y: auto;
+}
+
+.ua-gt-tr {
+  text-align: center;
+}
+</style>

src/pages/User/Gacha.vue

@@ -27,6 +27,7 @@
     <v-tabs v-model="tab" align-tabs="start" class="gacha-tab">
       <v-tab value="echarts">图表概览</v-tab>
       <v-tab value="overview">数据概览</v-tab>
+      <v-tab value="table">数据表格</v-tab>
       <v-tab value="history">过往祈愿</v-tab>
     </v-tabs>
     <v-window v-model="tab" class="gacha-window">
@@ -36,6 +37,9 @@
       <v-window-item value="overview" class="gacha-window-item">
         <gro-overview v-model="gachaListCur" />
       </v-window-item>
+      <v-window-item value="table" class="gacha-window-item">
+        <gro-table v-model="gachaListCur" />
+      </v-window-item>
       <v-window-item value="history" class="gacha-window-item">
         <gro-history />
       </v-window-item>
@@ -53,6 +57,7 @@ import showSnackbar from "../../components/func/snackbar.js";
 import GroEcharts from "../../components/gachaRecord/gro-echarts.vue";
 import GroHistory from "../../components/gachaRecord/gro-history.vue";
 import GroOverview from "../../components/gachaRecord/gro-overview.vue";
+import GroTable from "../../components/gachaRecord/gro-table.vue";
 import ToLoading from "../../components/overlay/to-loading.vue";
 import { AppCharacterData, AppWeaponData } from "../../data/index.js";
 import TSUserGacha from "../../plugins/Sqlite/modules/userGacha.js";