mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2026-03-29 06:09:45 +08:00
108 lines
2.3 KiB
Vue
108 lines
2.3 KiB
Vue
<template>
|
|
<div
|
|
v-if="props.data.insert.lottery"
|
|
@click="toLottery()"
|
|
class="tp-backup-lottery"
|
|
:title="`ID: ${props.data.insert.lottery.id}`"
|
|
>
|
|
<v-icon size="small">mdi-gift</v-icon>
|
|
<span>{{ props.data.insert.lottery.toast }}</span>
|
|
</div>
|
|
<VpOverlayLottery
|
|
v-if="props.data.insert.lottery"
|
|
v-model="showLottery"
|
|
:lottery="props.data.insert.lottery.id"
|
|
/>
|
|
<details v-else-if="props.data.insert.fold" class="tp-backup-fold">
|
|
<summary class="tp-backup-summary">
|
|
<img alt="marker" src="/source/post/fold_marker.webp" class="tp-backup-marker" />
|
|
<TpParser :data="JSON.parse(props.data.insert.fold.title)" />
|
|
</summary>
|
|
<div class="tp-backup-details">
|
|
<TpParser :data="JSON.parse(props.data.insert.fold.content)" />
|
|
</div>
|
|
</details>
|
|
<TpUnknown v-else :data="<TGApp.Plugins.Mys.SctPost.Empty>props.data" />
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { ref, toRaw } from "vue";
|
|
|
|
import TpParser from "./tp-parser.vue";
|
|
import TpUnknown from "./tp-unknown.vue";
|
|
import VpOverlayLottery from "./vp-overlay-lottery.vue";
|
|
|
|
interface TpBackupText {
|
|
insert: {
|
|
backup_text: string;
|
|
fold?: {
|
|
title: string;
|
|
content: string;
|
|
};
|
|
lottery?: {
|
|
id: string;
|
|
toast: string;
|
|
};
|
|
};
|
|
}
|
|
|
|
interface TpBackupTextProps {
|
|
data: TpBackupText;
|
|
}
|
|
|
|
const props = defineProps<TpBackupTextProps>();
|
|
const showLottery = ref(false);
|
|
|
|
console.log("tpBackupText", props.data.insert.backup_text, toRaw(props.data));
|
|
|
|
async function toLottery() {
|
|
if (showLottery.value) {
|
|
showLottery.value = false;
|
|
}
|
|
showLottery.value = true;
|
|
}
|
|
</script>
|
|
<style lang="css" scoped>
|
|
.tp-backup-lottery {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #00c3ff;
|
|
column-gap: 5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.tp-backup-fold {
|
|
position: relative;
|
|
padding: 10px;
|
|
border: 1px solid var(--common-shadow-2);
|
|
border-radius: 10px;
|
|
margin: 10px auto;
|
|
}
|
|
|
|
.tp-backup-fold summary {
|
|
list-style: none;
|
|
}
|
|
|
|
.tp-backup-fold ::marker {
|
|
color: var(--common-shadow-4);
|
|
content: "";
|
|
}
|
|
|
|
.tp-backup-summary {
|
|
display: flex;
|
|
margin-left: 5px;
|
|
font-family: var(--font-title);
|
|
}
|
|
|
|
.tp-backup-marker {
|
|
position: relative;
|
|
display: inline;
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.tp-backup-details {
|
|
padding-left: 20px;
|
|
}
|
|
</style>
|