Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-15 09:48:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

♻️ 替换 t-mini-avatar 与 t-mini-weapon 组件

Browse Source
This commit is contained in:
BTMuli
2023-06-01 20:40:37 +08:00
parent 7ddbe149c1
commit 05b4e5a497
8 changed files with 49 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/itembox/tib-wiki-avatar.vue Normal file
View File

@@ -0,0 +1,13 @@
<template>
<TItemBox :data="props.modelValue as Record<string,string|number>" :size="props.size" model-value="wiki-avatar" display="inner" />
</template>
<script lang="ts" setup>
import TItemBox from "../main/t-itembox.vue";
interface TibCalendarAvatarProps {
size: string,
modelValue: TGApp.App.Character.WikiBriefInfo
}
const props = defineProps<TibCalendarAvatarProps>();
</script>

13
src/components/itembox/tib-wiki-weapon.vue Normal file
View File

@@ -0,0 +1,13 @@
<template>
<TItemBox :data="props.modelValue as Record<string,string|number>" :size="props.size" model-value="wiki-weapon" display="inner" />
</template>
<script lang="ts" setup>
import TItemBox from "../main/t-itembox.vue";
interface TibCalendarWeaponProps {
size: string,
modelValue: TGApp.App.Weapon.WikiBriefInfo
}
const props = defineProps<TibCalendarWeaponProps>();
</script>

15
src/components/main/t-itembox.vue
View File

@@ -90,6 +90,21 @@ const card: ComputedRef<TItemBoxCard> = computed(() => {
} as TItemBoxCard; } as TItemBoxCard;
case "wiki-avatar": case "wiki-avatar":
cardData = props.data as TGApp.App.Character.WikiBriefInfo; cardData = props.data as TGApp.App.Character.WikiBriefInfo;
return {
bg: `/icon/bg/${cardData.star}-Star.webp`,
icon: `/WIKI/character/icon/${cardData.id}.webp`,
lt: `/icon/element/${cardData.element}元素.webp`,
innerIcon: `/icon/weapon/${cardData.weapon}.webp`,
innerText: cardData.name,
} as TItemBoxCard;
case "wiki-weapon":
cardData = props.data as TGApp.App.Weapon.WikiBriefInfo;
return {
bg: cardData.bg,
icon: cardData.icon,
lt: cardData.weaponIcon,
innerText: cardData.name,
} as TItemBoxCard;
} }
}); });

127
src/components/mini/t-mini-avatar.vue
View File

@@ -1,127 +0,0 @@
<template>
<div class="card-box">
<!-- 底层背景图 -->
<div class="card-bg">
<img :src="props.modelValue.bg" alt="bg">
</div>
<!-- 中层角色图 -->
<div class="card-icon">
<img :src="props.modelValue.icon" alt="icon">
</div>
<!-- 上层图标&内容 -->
<div class="card-cover">
<div class="card-element">
<img :src="props.modelValue.elementIcon" alt="element">
</div>
<div class="card-name">
<img :src="props.modelValue.weaponIcon" alt="weapon">
<span>{{ props.modelValue.name }}</span>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { computed } from "vue";
interface TMiniWeaponProps {
size: string;
modelValue: TGApp.App.Character.WikiBriefInfo | TGApp.App.Calendar.Item;
}
const props = defineProps<TMiniWeaponProps>();
const getSize = computed(() => {
return props.size === "100px" ? "30px" : "40px";
});
</script>
<style lang="css" scoped>
.card-box {
position: relative;
width: v-bind(size);
height: v-bind(size);
cursor: pointer;
}
.card-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 5px;
overflow: hidden;
}
.card-bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.card-icon {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 5px;
}
.card-icon img {
width: 100%;
height: 100%;
object-fit: cover;
}
.card-cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.card-element {
position: absolute;
top: 0;
left: 0;
width: v-bind(getSize);
height: v-bind(getSize);
display: flex;
justify-content: center;
align-items: center;
}
.card-element img {
width: calc(v-bind(getSize) - 10px);
height: calc(v-bind(getSize) - 10px);
object-fit: cover;
}
.card-name img {
width: calc(v-bind(getSize) / 1.5);
height: calc(v-bind(getSize) / 1.5);
margin-right: 5px;
}
.card-name {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: v-bind(getSize);
display: flex;
justify-content: center;
align-items: center;
background: rgb(20 20 20 / 50%);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
color: #fff;
font-size: calc(v-bind(getSize) / 3);
text-shadow: 0 0 5px #000;
font-family: Genshin, serif;
}
</style>

119
src/components/mini/t-mini-weapon.vue
View File

@@ -1,119 +0,0 @@
<template>
<div class="card-box">
<!-- 底层背景图 -->
<div class="card-bg">
<img :src="props.modelValue.bg" alt="bg">
</div>
<!-- 中层武器图 -->
<div class="card-icon">
<img :src="props.modelValue.icon" alt="icon">
</div>
<!-- 上层图标&内容 -->
<div class="card-cover">
<div class="card-weapon">
<img :src="props.modelValue.weaponIcon" alt="type">
</div>
<div class="card-name">
<span>{{ props.modelValue.name }}</span>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { computed } from "vue";
interface TMiniWeaponProps {
size: string;
modelValue: TGApp.App.Weapon.WikiBriefInfo | TGApp.App.Calendar.Item
}
const props = defineProps<TMiniWeaponProps>();
const getSize = computed(() => {
return props.size === "100px" ? "30px" : "40px";
});
</script>
<style lang="css" scoped>
.card-box {
position: relative;
width: v-bind(size);
height: v-bind(size);
cursor: pointer;
}
.card-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 5px;
overflow: hidden;
}
.card-bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.card-icon {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 5px;
}
.card-icon img {
width: 100%;
height: 100%;
object-fit: cover;
}
.card-cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.card-weapon {
position: absolute;
top: 0;
left: 0;
width: v-bind(getSize);
height: v-bind(getSize);
display: flex;
justify-content: center;
align-items: center;
}
.card-weapon img {
width: calc(v-bind(getSize) - 10px);
height: calc(v-bind(getSize) - 10px);
object-fit: cover;
}
.card-name {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
background: rgb(20 20 20 / 50%);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
color: #fff;
font-size: calc(v-bind(getSize) / 3);
text-shadow: 0 0 5px #000;
font-family: Genshin, serif;
}
</style>

8
src/components/overlay/to-calendar.vue
View File

@@ -4,8 +4,8 @@
<div class="box-div"> <div class="box-div">
<div class="toc-top"> <div class="toc-top">
<div class="toc-icon"> <div class="toc-icon">
<TMiniAvatar v-if="itemType=== 'character'" v-model="itemVal" size="100px" /> <TibCalendarAvatar v-if="itemType=== 'character'" v-model="itemVal" size="100px" />
<TMiniWeapon v-if="itemType=== 'weapon'" v-model="itemVal" size="100px" /> <TibCalendarWeapon v-if="itemType=== 'weapon'" v-model="itemVal" size="100px" />
</div> </div>
<div class="toc-material-grid"> <div class="toc-material-grid">
<TCalendarMaterial v-for="item in itemVal.materials" :item="item" /> <TCalendarMaterial v-for="item in itemVal.materials" :item="item" />
@@ -46,8 +46,8 @@
import { computed, ref } from "vue"; import { computed, ref } from "vue";
import TOverlay from "../main/t-overlay.vue"; import TOverlay from "../main/t-overlay.vue";
import TCalendarMaterial from "../mini/t-calendar-material.vue"; import TCalendarMaterial from "../mini/t-calendar-material.vue";
import TMiniAvatar from "../mini/t-mini-avatar.vue"; import TibCalendarWeapon from "../itembox/tib-calendar-weapon.vue";
import TMiniWeapon from "../mini/t-mini-weapon.vue"; import TibCalendarAvatar from "../itembox/tib-calendar-avatar.vue";
// utils // utils
import { OBC_CONTENT_API } from "../../plugins/Mys/interface/utils"; import { OBC_CONTENT_API } from "../../plugins/Mys/interface/utils";
import { createTGWindow } from "../../utils/TGWindow"; import { createTGWindow } from "../../utils/TGWindow";

4
src/pages/WIKI/Character.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="cards-grid"> <div class="cards-grid">
<div v-for="item in cardsInfo" :key="item.id" class="card-box" @click="toOuter(item)"> <div v-for="item in cardsInfo" :key="item.id" class="card-box" @click="toOuter(item)">
<TMiniAvatar size="128px" :model-value="item" /> <TibWikiAvatar size="128px" :model-value="item" />
</div> </div>
<v-snackbar v-model="snackbar" timeout="1500" color="error"> <v-snackbar v-model="snackbar" timeout="1500" color="error">
该角色暂无详情 该角色暂无详情
@@ -12,7 +12,7 @@
<script lang="ts" setup> <script lang="ts" setup>
// vue // vue
import { ref, computed } from "vue"; import { ref, computed } from "vue";
import TMiniAvatar from "../../components/mini/t-mini-avatar.vue"; import TibWikiAvatar from "../../components/itembox/tib-wiki-avatar.vue";
// utils // utils
import { createTGWindow } from "../../utils/TGWindow"; import { createTGWindow } from "../../utils/TGWindow";
import { AppCharacterData } from "../../data"; import { AppCharacterData } from "../../data";

4
src/pages/WIKI/Weapon.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="cards-grid"> <div class="cards-grid">
<div v-for="item in cardsInfo" :key="item.id" class="card-box" @click="toOuter(item)"> <div v-for="item in cardsInfo" :key="item.id" class="card-box" @click="toOuter(item)">
<TMiniWeapon size="128px" :model-value="item" /> <TibWikiWeapon size="128px" :model-value="item" />
</div> </div>
<v-snackbar v-model="snackbar" timeout="1500" color="error"> <v-snackbar v-model="snackbar" timeout="1500" color="error">
该武器暂无详情 该武器暂无详情
@@ -12,7 +12,7 @@
<script lang="ts" setup> <script lang="ts" setup>
// vue // vue
import { ref, computed } from "vue"; import { ref, computed } from "vue";
import TMiniWeapon from "../../components/mini/t-mini-weapon.vue"; import TibWikiWeapon from "../../components/itembox/tib-wiki-weapon.vue";
// utils // utils
import { createTGWindow } from "../../utils/TGWindow"; import { createTGWindow } from "../../utils/TGWindow";
import { AppWeaponData } from "../../data"; import { AppWeaponData } from "../../data";