mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-13 09:28:14 +08:00
95 lines
2.4 KiB
Vue
95 lines
2.4 KiB
Vue
<template>
|
|
<div
|
|
:style="getLineStyle()"
|
|
class="tp-texts"
|
|
:class="{
|
|
'tp-texts-header1': props.data.attributes && props.data.attributes.header === 1,
|
|
'tp-texts-header2': props.data.attributes && props.data.attributes.header === 2,
|
|
'tp-texts-header3': props.data.attributes && props.data.attributes.header === 3,
|
|
'tp-texts-header4': props.data.attributes && props.data.attributes.header === 4,
|
|
'tp-texts-header5': props.data.attributes && props.data.attributes.header === 5,
|
|
'tp-texts-header6': props.data.attributes && props.data.attributes.header === 6,
|
|
}"
|
|
:title="getTitle()"
|
|
>
|
|
<component
|
|
:is="getComp(text)"
|
|
v-for="(text, index) in props.data.children"
|
|
:data="text"
|
|
:key="index"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import type { Component, StyleValue } from "vue";
|
|
|
|
import TpImage from "./tp-image.vue";
|
|
import TpMention, { type TpMention as TpMentionType } from "./tp-mention.vue";
|
|
import TpText, { type TpText as TpTextType } from "./tp-text.vue";
|
|
|
|
type TpTexts = { children: Array<TpTextType | TpMentionType> } & TpTextType;
|
|
type TpTextsProps = { data: TpTexts };
|
|
|
|
const props = defineProps<TpTextsProps>();
|
|
|
|
function getComp(text: TpTextType | TpMentionType): Component {
|
|
if (typeof text.insert === "string") return TpText;
|
|
if ("image" in text.insert) return TpImage;
|
|
return TpMention;
|
|
}
|
|
|
|
function getTitle(): string {
|
|
if (!props.data.attributes) return "";
|
|
if (props.data.attributes.link) return props.data.attributes.link;
|
|
if (props.data.attributes.header) return `H${props.data.attributes.header}`;
|
|
return "";
|
|
}
|
|
|
|
function getLineStyle(): StyleValue {
|
|
const ruleInline: StyleValue = "display: inline";
|
|
if (props.data.attributes === undefined) return ruleInline;
|
|
if (props.data.attributes.align === undefined) return ruleInline;
|
|
return `text-align: ${props.data.attributes.align};`;
|
|
}
|
|
</script>
|
|
<style lang="css" scoped>
|
|
.tp-texts {
|
|
line-break: anywhere;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.tp-texts-header1,
|
|
.tp-texts-header2,
|
|
.tp-texts-header3,
|
|
.tp-texts-header4,
|
|
.tp-texts-header5,
|
|
.tp-texts-header6 {
|
|
font-family: var(--font-title);
|
|
}
|
|
|
|
.tp-texts-header1 {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.tp-texts-header2 {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.tp-texts-header3 {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.tp-texts-header4 {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.tp-texts-header5 {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.tp-texts-header6 {
|
|
font-size: 12px;
|
|
}
|
|
</style>
|