mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-18 10:18:14 +08:00
♻️ 角色 wiki 与武器 wiki 样式重构
This commit is contained in:
BTMuli
237
src/components/wiki/twc-character.vue
Normal file
237
src/components/wiki/twc-character.vue
Normal file
@@ -0,0 +1,237 @@
|
||||
<template>
|
||||
<div class="twc-box" v-if="data !== undefined">
|
||||
<div class="twc-brief">
|
||||
<TItembox :model-value="box" />
|
||||
<div class="twc-brief-info">
|
||||
<div class="twc-bi-top">
|
||||
<span>{{ data.name }} {{ data.title }}</span>
|
||||
<span>{{ data.description }}</span>
|
||||
</div>
|
||||
<div class="twc-bi-grid1">
|
||||
<div class="twc-big-item">
|
||||
<span>所属</span>
|
||||
<span>{{ data.brief.camp }}</span>
|
||||
</div>
|
||||
<div class="twc-big-item">
|
||||
<span>命之座</span>
|
||||
<span>{{ data.brief.constellation }}</span>
|
||||
</div>
|
||||
<div class="twc-big-item">
|
||||
<span>生日</span>
|
||||
<span>{{ data.brief.birth }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="twc-bi-grid2">
|
||||
<div class="twc-big-item">
|
||||
<span>汉语CV</span>
|
||||
<span>{{ data.brief.cv.cn }}</span>
|
||||
</div>
|
||||
<div class="twc-big-item">
|
||||
<span>日语CV</span>
|
||||
<span>{{ data.brief.cv.jp }}</span>
|
||||
</div>
|
||||
<div class="twc-big-item">
|
||||
<span>英语CV</span>
|
||||
<span>{{ data.brief.cv.en }}</span>
|
||||
</div>
|
||||
<div class="twc-big-item">
|
||||
<span>韩语CV</span>
|
||||
<span>{{ data.brief.cv.kr }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<TwcMaterials :data="data.materials" />
|
||||
<TwcSkills :data="data.skills" />
|
||||
<TwcConstellations :data="data.constellation" />
|
||||
<v-expansion-panels class="twc-text-item">
|
||||
<v-expansion-panel>
|
||||
<template #title><span class="twc-text-title">资料</span></template>
|
||||
<template #text>
|
||||
<v-expansion-panels variant="popout">
|
||||
<v-expansion-panel
|
||||
expand-icon="mdi-menu-down"
|
||||
v-for="(item, index) in data?.talks"
|
||||
:key="index"
|
||||
>
|
||||
<template #title
|
||||
><span class="twc-text-item-title">{{ item.Title }}</span></template
|
||||
>
|
||||
<template #text
|
||||
><span class="twc-text-item-content">{{ item.Context }}</span></template
|
||||
>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</template>
|
||||
</v-expansion-panel>
|
||||
<v-expansion-panel>
|
||||
<template #title><span class="twc-text-title">故事</span></template>
|
||||
<template #text>
|
||||
<v-expansion-panels variant="popout">
|
||||
<v-expansion-panel
|
||||
expand-icon="mdi-menu-down"
|
||||
v-for="(item, index) in data.stories"
|
||||
:key="index"
|
||||
>
|
||||
<template #title
|
||||
><span class="twc-text-item-title">{{ item.Title }}</span></template
|
||||
>
|
||||
<template #text
|
||||
><span class="twc-text-item-content">{{ item.Context }}</span></template
|
||||
>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</template>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref, watch } from "vue";
|
||||
|
||||
import TwcConstellations from "./twc-constellations.vue";
|
||||
import TwcMaterials from "./twc-materials.vue";
|
||||
import TwcSkills from "./twc-skills.vue";
|
||||
import { getWikiData } from "../../data";
|
||||
import showSnackbar from "../func/snackbar";
|
||||
import TItembox, { TItemBoxData } from "../main/t-itembox.vue";
|
||||
|
||||
interface TwcCharacterProps {
|
||||
item: TGApp.App.Character.WikiBriefInfo;
|
||||
}
|
||||
|
||||
interface TwcCharacterEmits {
|
||||
error: (err: Error) => void;
|
||||
}
|
||||
|
||||
const props = defineProps<TwcCharacterProps>();
|
||||
const emits = defineEmits<TwcCharacterEmits>();
|
||||
|
||||
const data = ref<TGApp.App.Character.WikiItem>();
|
||||
const box = computed(() => {
|
||||
return <TItemBoxData>{
|
||||
bg: `/icon/bg/${data.value?.star}-Star.webp`,
|
||||
icon: `/WIKI/character/${data.value?.id}.webp`,
|
||||
size: "128px",
|
||||
height: "128px",
|
||||
display: "inner",
|
||||
lt: `/icon/element/${data.value?.element}元素.webp`,
|
||||
ltSize: "40px",
|
||||
innerHeight: 30,
|
||||
innerIcon: `/icon/weapon/${data.value?.weapon}.webp`,
|
||||
innerText: data.value?.name,
|
||||
clickable: false,
|
||||
};
|
||||
});
|
||||
|
||||
async function loadData(): Promise<void> {
|
||||
try {
|
||||
const res = await getWikiData("Character", props.item.id);
|
||||
if (res === undefined) return;
|
||||
data.value = res.default;
|
||||
showSnackbar({
|
||||
text: `成功获取角色 ${props.item.name} 的 Wiki 数据`,
|
||||
color: "success",
|
||||
});
|
||||
} catch (error) {
|
||||
showSnackbar({
|
||||
text: `未获取到角色 ${props.item.name} 的 Wiki 数据`,
|
||||
color: "error",
|
||||
});
|
||||
console.error(error);
|
||||
emits("error", error);
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.item,
|
||||
async () => {
|
||||
await loadData();
|
||||
},
|
||||
);
|
||||
|
||||
onMounted(async () => {
|
||||
await loadData();
|
||||
});
|
||||
</script>
|
||||
<style lang="css" scoped>
|
||||
.twc-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 auto;
|
||||
row-gap: 10px;
|
||||
}
|
||||
|
||||
.twc-brief {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
column-gap: 10px;
|
||||
}
|
||||
|
||||
.twc-brief-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.twc-bi-top {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.twc-bi-top :nth-child(1) {
|
||||
color: var(--common-text-title);
|
||||
font-family: var(--font-title);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.twc-bi-top :nth-child(2) {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
font-size: 14px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.twc-bi-grid1 {
|
||||
display: grid;
|
||||
column-gap: 10px;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.twc-bi-grid2 {
|
||||
display: grid;
|
||||
column-gap: 10px;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.twc-big-item {
|
||||
display: flex;
|
||||
column-gap: 5px;
|
||||
}
|
||||
|
||||
.twc-big-item :nth-child(1) {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.twc-text-title {
|
||||
color: var(--common-text-title);
|
||||
font-family: var(--font-title);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.twc-text-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 5px;
|
||||
}
|
||||
|
||||
.twc-text-item-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.twc-text-item-content {
|
||||
font-size: 14px;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user