mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-14 09:38:13 +08:00
63 lines
1.4 KiB
Vue
63 lines
1.4 KiB
Vue
<!-- todo 优化，增加筛选功能 -->
|
||
<template>
|
||
<v-data-table
|
||
:headers="headers"
|
||
:items="props.modelValue"
|
||
fixed-header
|
||
fixed-footer
|
||
class="ua-gt-box"
|
||
>
|
||
<template v-slot:item="{ item }">
|
||
<tr class="ua-gt-tr">
|
||
<td>{{ item.time }}</td>
|
||
<td>{{ getPool(item.uigfType) }}</td>
|
||
<td>{{ item.type }}</td>
|
||
<td>{{ item.name }}</td>
|
||
<td>{{ item.rank }}</td>
|
||
</tr>
|
||
</template>
|
||
</v-data-table>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
type GroTableProps = { modelValue: Array<TGApp.Sqlite.GachaRecords.SingleTable> };
|
||
|
||
const props = defineProps<GroTableProps>();
|
||
|
||
const headers = <const>[
|
||
{ 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 "500":
|
||
return "集录祈愿";
|
||
default:
|
||
return "未知";
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="css" scoped>
|
||
.ua-gt-box {
|
||
height: calc(100vh - 200px);
|
||
padding-right: 5px;
|
||
border-radius: 5px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.ua-gt-tr {
|
||
text-align: center;
|
||
}
|
||
</style>
|