mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2026-05-08 00:24:06 +08:00
✨ 新增励行修远小组件
This commit is contained in:
BTMuli
BIN
public/UI/daily/week_act.webp
Normal file
BIN
public/UI/daily/week_act.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1006 B |
@@ -267,6 +267,7 @@ async function handleRefreshDailyNote(acc: TGApp.Sqlite.Account.Game): Promise<v
|
||||
let dataResp: TGApp.Game.DailyNote.DnResp | undefined;
|
||||
try {
|
||||
dataResp = await recordReq.daily(cookie.value!, acc);
|
||||
console.debug(dataResp);
|
||||
if (dataResp.retcode !== 0) {
|
||||
await TGLogger.Warn(`[Game Status Card] [${dataResp.retcode}] ${dataResp.message}`);
|
||||
showSnackbar.error(`刷新失败：[${dataResp.retcode}] ${dataResp.message}`);
|
||||
|
||||
@@ -20,22 +20,25 @@
|
||||
</div>
|
||||
<div v-if="props.data" class="dni-content">
|
||||
<div class="dni-grid">
|
||||
<div class="dni-row">
|
||||
<!-- 日常 -->
|
||||
<div class="dni-row col-4">
|
||||
<PhDailyNoteResin
|
||||
:current-resin="props.data.current_resin"
|
||||
:max-resin="props.data.max_resin"
|
||||
:recovery-time="props.data.resin_recovery_time"
|
||||
/>
|
||||
<PhDailyNoteTask :task="props.data.daily_task" />
|
||||
<PhDailyNoteCoin
|
||||
:current-coin="props.data.current_home_coin"
|
||||
:max-coin="props.data.max_home_coin"
|
||||
:recovery-time="props.data.home_coin_recovery_time"
|
||||
/>
|
||||
<PhDailyNoteTransformer :trans="props.data.transformer" />
|
||||
<PhDailyNoteWeekAct :wap="props.data.week_active_progress" />
|
||||
</div>
|
||||
<!-- 周常 -->
|
||||
<div class="dni-row">
|
||||
<PhDailyNoteQuest :quest="props.data.archon_quest_progress" />
|
||||
<PhDailyNoteTask :task="props.data.daily_task" />
|
||||
<PhDailyNoteTransformer :trans="props.data.transformer" />
|
||||
<PhDailyNoteBoss
|
||||
:remain-resin-discount-num="props.data.remain_resin_discount_num"
|
||||
:resin-discount-num-limit="props.data.resin_discount_num_limit"
|
||||
@@ -56,6 +59,7 @@ import PhDailyNoteTransformer from "./ph-daily-note-transformer.vue";
|
||||
import PhDailyNoteTask from "./ph-daily-note-task.vue";
|
||||
import PhDailyNoteQuest from "./ph-daily-note-quest.vue";
|
||||
import PhDailyNoteBoss from "./ph-daily-note-boss.vue";
|
||||
import PhDailyNoteWeekAct from "./ph-daily-note-week-act.vue";
|
||||
import { computed } from "vue";
|
||||
import dnEnum from "@enum/dailyNote.js";
|
||||
|
||||
@@ -154,6 +158,10 @@ function handleRefresh(): void {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
|
||||
&.col-4 {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.dni-item {
|
||||
|
||||
128
src/components/pageHome/ph-daily-note-week-act.vue
Normal file
128
src/components/pageHome/ph-daily-note-week-act.vue
Normal file
@@ -0,0 +1,128 @@
|
||||
<!-- 励行修远进度组件 -->
|
||||
<template>
|
||||
<div class="pdnwa-box">
|
||||
<div class="pdnwa-icon">
|
||||
<img alt="励行修远" src="/UI/daily/week_act.webp" />
|
||||
</div>
|
||||
<div class="pdnwa-info">
|
||||
<div class="pdnwa-title-row">
|
||||
<span>励行修远</span>
|
||||
<span>{{ periodProgress }}</span>
|
||||
</div>
|
||||
<div class="pdnwa-content">
|
||||
<span class="pdnwa-dots">
|
||||
<v-icon v-for="idx in 7" :key="idx" :color="getDayColor(idx)" :size="14">
|
||||
{{ getDayIcon(idx) }}
|
||||
</v-icon>
|
||||
</span>
|
||||
<span class="pdnwa-progress-text">{{ weekProgress }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { computed } from "vue";
|
||||
|
||||
type PhDailyNoteWeekActProps = {
|
||||
wap?: TGApp.Game.DailyNote.WeekActiveProgress;
|
||||
};
|
||||
|
||||
const props = withDefaults(defineProps<PhDailyNoteWeekActProps>(), {
|
||||
wap: undefined,
|
||||
});
|
||||
|
||||
const weekProgress = computed<string>(() => {
|
||||
if (!props.wap) return "0/5";
|
||||
const { progress_current, progress_total } = props.wap;
|
||||
return `${progress_current}/${progress_total}`;
|
||||
});
|
||||
const periodProgress = computed<string>(() => {
|
||||
if (!props.wap) return "0/8";
|
||||
const { period_progress_current, period_progress_total } = props.wap;
|
||||
return `${period_progress_current}/${period_progress_total}`;
|
||||
});
|
||||
const weekDays = computed<Array<number>>(() => {
|
||||
if (!props.wap) return [];
|
||||
return props.wap.progress_current_arr;
|
||||
});
|
||||
|
||||
function getDayColor(day: number): string {
|
||||
console.log(day);
|
||||
if (weekDays.value.includes(day)) return "var(--tgc-od-green)";
|
||||
if (props.wap?.current_weekday ?? 1 < day) return "var(--tgc-od-white)";
|
||||
return "var(--tgc-od-red)";
|
||||
}
|
||||
|
||||
function getDayIcon(day: number): string {
|
||||
if (weekDays.value.includes(day)) return "mdi-check-circle";
|
||||
if (props.wap?.current_weekday ?? 1 < day) return "mdi-circle-outline";
|
||||
return "mdi-information";
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.pdnwa-box {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
background: var(--box-bg-2);
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.pdnwa-icon {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 4px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.pdnwa-info {
|
||||
position: relative;
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.pdnwa-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-family: var(--font-title);
|
||||
font-size: 13px;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.pdnwa-content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.pdnwa-progress-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--box-text-2);
|
||||
font-size: 10px;
|
||||
gap: 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.pdnwa-dots {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
37
src/types/Game/DailyNote.d.ts
vendored
37
src/types/Game/DailyNote.d.ts
vendored
@@ -1,6 +1,6 @@
|
||||
/**
|
||||
* 实时便笺数据
|
||||
* @since Beta v0.10.0
|
||||
* @since Beta v0.10.2
|
||||
*/
|
||||
|
||||
declare namespace TGApp.Game.DailyNote {
|
||||
@@ -12,7 +12,7 @@ declare namespace TGApp.Game.DailyNote {
|
||||
|
||||
/**
|
||||
* 实时便笺返回
|
||||
* @since Beta v0.10.0
|
||||
* @since Beta v0.10.2
|
||||
*/
|
||||
type DnRes = {
|
||||
/** 当前体力 */
|
||||
@@ -51,6 +51,8 @@ declare namespace TGApp.Game.DailyNote {
|
||||
daily_task: DailyTask;
|
||||
/** 任务进度 */
|
||||
archon_quest_progress: ArchonQuestProgress;
|
||||
/** 砺行修远 */
|
||||
week_active_progress: WeekActiveProgress;
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -163,7 +165,10 @@ declare namespace TGApp.Game.DailyNote {
|
||||
wiki_url: string;
|
||||
};
|
||||
|
||||
/** 任务 */
|
||||
/**
|
||||
* 任务
|
||||
* @since Beta v0.10.1
|
||||
*/
|
||||
type ArchonQuest = {
|
||||
/**
|
||||
* 章节数
|
||||
@@ -256,4 +261,30 @@ declare namespace TGApp.Game.DailyNote {
|
||||
*/
|
||||
type AttendanceRewardStatusEnum =
|
||||
(typeof AttendanceRewardStatus)[keyof typeof AttendanceRewardStatus];
|
||||
|
||||
/**
|
||||
* 励行修远进度
|
||||
* @since Beta v0.10.2
|
||||
*/
|
||||
type WeekActiveProgress = {
|
||||
/** 本周已完成进度 */
|
||||
progress_current: number;
|
||||
/** 本周总进度 */
|
||||
progress_total: number;
|
||||
/** 周数完成进度 */
|
||||
period_progress_current: number;
|
||||
/** 周数总进度 */
|
||||
period_progress_total: number;
|
||||
/** 是否解锁 */
|
||||
unlock: boolean;
|
||||
/**
|
||||
* 进度数组
|
||||
* @remarks 1,2,3 周一，周二，周三
|
||||
*/
|
||||
progress_current_arr: Array<number>;
|
||||
/** 是否激活当前进度 */
|
||||
is_active_period: boolean;
|
||||
/** 当前周序数 */
|
||||
current_weekday: number;
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user