mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-14 09:38:13 +08:00
💄 调整UI
This commit is contained in:
@@ -1,24 +1,22 @@
|
||||
<!-- todo 优化,增加筛选功能 -->
|
||||
<template>
|
||||
<div class="ua-gt-box">
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="props.modelValue"
|
||||
height="500px"
|
||||
fixed-header
|
||||
fixed-footer
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
<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> };
|
||||
@@ -52,8 +50,7 @@ function getPool(type: string) {
|
||||
</script>
|
||||
<style lang="css" scoped>
|
||||
.ua-gt-box {
|
||||
height: 100%;
|
||||
max-height: calc(100vh - 120px);
|
||||
height: calc(100vh - 200px);
|
||||
padding-right: 5px;
|
||||
border-radius: 5px;
|
||||
overflow-y: auto;
|
||||
|
||||
@@ -20,7 +20,9 @@
|
||||
<div class="ab-draw-grid">
|
||||
<div v-for="item in selectedItem" :key="item.op_id" class="ab-draw">
|
||||
<div class="ab-draw-cover" @click="showImg(item)">
|
||||
<TMiImg :src="item.unread_picture[Number(isAether)]" :alt="item.word_text" />
|
||||
<div class="ab-draw-img">
|
||||
<TMiImg :src="item.unread_picture[Number(isAether)]" :alt="item.word_text" />
|
||||
</div>
|
||||
<div class="ab-draw-hide" />
|
||||
<v-icon class="ab-draw-icon">mdi-magnify</v-icon>
|
||||
</div>
|
||||
@@ -158,6 +160,15 @@ function getItemProps(item: TGApp.Archive.Birth.RoleItem) {
|
||||
aspect-ratio: 125 / 54;
|
||||
}
|
||||
|
||||
.ab-draw-img {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ab-draw-hide {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
@@ -305,6 +305,7 @@ async function uploadAbyss(): Promise<void> {
|
||||
}
|
||||
showSnackbar.success(res.message ?? "上传深渊数据成功");
|
||||
await TGLogger.Info("[UserAbyss][uploadAbyss] 上传深渊数据成功");
|
||||
await TGLogger.Info(`[${res.retcode}] ${res.message}`);
|
||||
} catch (e) {
|
||||
if (e instanceof Error) {
|
||||
showSnackbar.error(e.message);
|
||||
|
||||
@@ -95,11 +95,11 @@ watch(
|
||||
);
|
||||
|
||||
onMounted(async () => {
|
||||
await showLoading.start("正在获取深渊数据", "正在获取深渊概览");
|
||||
overview.value = {
|
||||
cur: await Hutao.Abyss.overview(),
|
||||
last: await Hutao.Abyss.overview(true),
|
||||
};
|
||||
await showLoading.start("正在获取深渊数据", "正在获取上期深渊概览");
|
||||
const lastData = await Hutao.Abyss.overview(true);
|
||||
await showLoading.update("正在获取本期深渊概览");
|
||||
const curData = await Hutao.Abyss.overview();
|
||||
overview.value = { scur: curData, last: lastData };
|
||||
await showLoading.update("正在获取角色使用率数据");
|
||||
abyssData.use = <AbyssDataItem<TGApp.Plugins.Hutao.Abyss.AvatarUse[]>>await getData("use");
|
||||
await showLoading.end();
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
<div class="wc-box">
|
||||
<div class="wc-left">
|
||||
<div class="wc-select">
|
||||
<v-btn @click="showSelect = true">筛选角色</v-btn>
|
||||
<v-btn @click="resetSelect = true">重置筛选</v-btn>
|
||||
<v-btn @click="showSelect = true" class="wc-btn">筛选角色</v-btn>
|
||||
<v-btn @click="resetSelect = true" class="wc-btn">重置筛选</v-btn>
|
||||
</div>
|
||||
<div class="wc-list">
|
||||
<TwcListItem
|
||||
@@ -129,6 +129,16 @@ async function toOuter(item?: TGApp.App.Character.WikiBriefInfo): Promise<void>
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.wc-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
background: var(--tgc-btn-1);
|
||||
color: var(--btn-text);
|
||||
}
|
||||
|
||||
.wc-list {
|
||||
position: relative;
|
||||
display: grid;
|
||||
|
||||
@@ -228,7 +228,7 @@ function searchMaterial(): void {
|
||||
.twm-item-right {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
max-width: calc(100% - 50px);
|
||||
color: var(--box-text-2);
|
||||
font-size: 14px;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
@@ -2,10 +2,8 @@
|
||||
<div class="ww-box">
|
||||
<div class="ww-left">
|
||||
<div class="ww-select">
|
||||
<v-btn @click="showSelect = true">
|
||||
<span>筛选武器</span>
|
||||
</v-btn>
|
||||
<v-btn @click="resetSelect = true">重置筛选</v-btn>
|
||||
<v-btn @click="showSelect = true" class="ww-btn">筛选武器</v-btn>
|
||||
<v-btn @click="resetSelect = true" class="ww-btn">重置筛选</v-btn>
|
||||
</div>
|
||||
<div class="ww-list">
|
||||
<TwcListItem
|
||||
@@ -116,6 +114,16 @@ async function toOuter(item?: TGApp.App.Weapon.WikiBriefInfo): Promise<void> {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.ww-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
background: var(--tgc-btn-1);
|
||||
color: var(--btn-text);
|
||||
}
|
||||
|
||||
.ww-list {
|
||||
position: relative;
|
||||
display: grid;
|
||||
|
||||
@@ -13,9 +13,27 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-list">
|
||||
<v-btn @click="test()" class="test-btn">测试</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup></script>
|
||||
<script lang="ts" setup>
|
||||
import showSnackbar from "@comp/func/snackbar.js";
|
||||
|
||||
import takumiReq from "@/web/request/takumiReq.js";
|
||||
|
||||
const gameToken = "LCLQ2pYLnEDh7p03ogJVxL9dZqbeLtUE";
|
||||
const uid = "249066520";
|
||||
|
||||
async function test(): Promise<void> {
|
||||
const resp = await takumiReq.game.stoken({ uid: uid, token: gameToken });
|
||||
if (resp.retcode !== 0) {
|
||||
showSnackbar.error(`[${resp.retcode}] ${resp.message}`);
|
||||
return;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="css" scoped>
|
||||
.test-box {
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user