🌱 幽境危战页面

#157
2026-04-24 22:19:41 +08:00 · 2025-06-25 21:01:31 +08:00
parent d3ab4fb6dc
commit 4022df08ce
12 changed files with 481 additions and 19 deletions
--- a/src/pages/User/Abyss.vue
+++ b/src/pages/User/Abyss.vue
@@ -13,15 +13,15 @@
          label="游戏UID"
        />
        <v-btn :rounded="true" class="ua-btn" @click="toCombat()">
-          <template #prepend>
-            <img src="/source/UI/userCombat.webp" alt="combat" />
-          </template>
-          <span>幻想真境剧诗</span>
+          <img src="/source/UI/userCombat.webp" alt="combat" />
+          <span>真境剧诗</span>
+        </v-btn>
+        <v-btn :rounded="true" class="ua-btn" @click="toChallenge()">
+          <img src="/source/UI/userChallenge.webp" alt="challenge" />
+          <span>幽境危战</span>
        </v-btn>
        <v-btn :rounded="true" class="ua-btn" @click="toWiki()">
-          <template #prepend>
-            <img src="/source/UI/wikiAbyss.webp" alt="wiki" />
-          </template>
+          <img src="/source/UI/wikiAbyss.webp" alt="wiki" />
          <span>深渊数据库</span>
        </v-btn>
      </div>
@@ -148,7 +148,9 @@ watch(() => uidCur.value, loadAbyss);
 async function toCombat(): Promise<void> {
  await router.push({ name: "真境剧诗" });
 }
-
+async function toChallenge(): Promise<void> {
+  await router.push({ name: "幽境危战" });
+}
 async function toWiki(): Promise<void> {
  await router.push({ name: "深渊数据库" });
 }
@@ -387,6 +389,13 @@ async function deleteAbyss(): Promise<void> {
  background: var(--tgc-btn-1);
  color: var(--btn-text);
  font-family: var(--font-text);
+
+  img {
+    width: 24px;
+    height: 24px;
+    margin-right: 4px;
+    object-fit: contain;
+  }
 }

 .dark .ua-btn {
--- a/src/pages/User/Challenge.vue
+++ b/src/pages/User/Challenge.vue
@@ -0,0 +1,259 @@
+<!-- 幽境危战 -->
+<template>
+  <v-app-bar>
+    <template #prepend>
+      <div class="ucp-top-prepend">
+        <img alt="icon" src="/source/UI/userChallenge.webp" />
+        <span>幽境危战</span>
+        <v-select
+          density="compact"
+          variant="outlined"
+          v-model="uidCur"
+          :items="uidList"
+          :hide-details="true"
+          label="游戏UID"
+        />
+        <v-btn :rounded="true" class="ucp-btn" @click="toAbyss()">
+          <img src="/source/UI/userAbyss.webp" alt="abyss" />
+          <span>深境螺旋</span>
+        </v-btn>
+        <v-btn :rounded="true" class="ucp-btn" @click="toCombat()">
+          <img src="/source/UI/userCombat.webp" alt="abyss" />
+          <span>真境剧诗</span>
+        </v-btn>
+        <v-btn :rounded="true" class="ucp-btn" @click="loadWiki()">
+          <img src="/source/UI/wikiAbyss.webp" alt="abyss" />
+          <span>统计数据</span>
+        </v-btn>
+      </div>
+    </template>
+    <template #append>
+      <div class="ucp-top-append">
+        <v-select
+          :items="serverList"
+          v-model="server"
+          item-title="text"
+          item-value="value"
+          label="服务器"
+          width="200px"
+          density="compact"
+          :disabled="isReq"
+        />
+      </div>
+    </template>
+    <template #extension>
+      <div class="ucp-top-extension">
+        <div class="act-list">
+          <v-btn
+            class="ucp-btn"
+            @click="shareChallenge()"
+            :disabled="localChallenge.length === 0"
+            prepend-icon="mdi-share"
+          >
+            分享
+          </v-btn>
+          <v-btn class="ucp-btn" @click="refreshChallenge()" prepend-icon="mdi-refresh">刷新</v-btn>
+          <v-btn class="ucp-btn" @click="uploadChallenge()" prepend-icon="mdi-cloud-upload">
+            上传
+          </v-btn>
+          <v-btn class="ucp-btn" @click="deleteChallenge()" prepend-icon="mdi-delete">删除</v-btn>
+        </div>
+        <div class="pop-list">
+          <TucPopItem v-for="avatar in popList" :key="avatar.avatar_id" :avatar />
+          <v-btn
+            :loading="reqPop"
+            size="36"
+            class="pop-btn"
+            @click="refreshPopList"
+            icon="mdi-refresh"
+            :disabled="reqPop"
+          />
+        </div>
+      </div>
+    </template>
+  </v-app-bar>
+</template>
+<script lang="ts" setup>
+import showLoading from "@comp/func/loading.js";
+import showSnackbar from "@comp/func/snackbar.js";
+import TucPopItem from "@comp/userChallenge/tuc-pop-item.vue";
+import { GameServerEnum, getGameServerDesc } from "@enum/game.js";
+import recordReq from "@req/recordReq.js";
+import TGLogger from "@utils/TGLogger.js";
+import { onMounted, ref, shallowRef, watch } from "vue";
+import { useRouter } from "vue-router";
+
+type SelectItem<T = string> = { text: string; value: T };
+const serverList: ReadonlyArray<SelectItem<TGApp.Game.Base.ServerTypeEnum>> = [
+  GameServerEnum.CN_GF01,
+  GameServerEnum.CN_QD01,
+  // TODO: 目前不支持国际服务器
+  // GameServerEnum.OS_ASIA,
+  // GameServerEnum.OS_EURO,
+  // GameServerEnum.OS_USA,
+  // GameServerEnum.OS_CHT,
+].map((i) => ({ text: getGameServerDesc(i), value: i }));
+
+const router = useRouter();
+
+const isReq = ref<boolean>(false);
+const uidCur = ref<string>();
+const uidList = shallowRef<Array<string>>();
+const localChallenge = shallowRef<unknown[]>([]);
+
+const server = ref<TGApp.Game.Base.ServerTypeEnum>(GameServerEnum.CN_GF01);
+const reqPop = ref<boolean>(false);
+const popList = shallowRef<Array<TGApp.Game.Challenge.PopularityItem>>([]);
+
+onMounted(async () => {
+  await refreshPopList();
+  // TODO: 获取数据库数据
+});
+
+watch(
+  () => server.value,
+  async () => {
+    const name = getGameServerDesc(server.value);
+    await TGLogger.Info(`[UserChallenge][watch][server] 切换服务器: ${name}`);
+    await refreshPopList();
+  },
+);
+
+async function toAbyss(): Promise<void> {
+  await router.push({ name: "深境螺旋" });
+}
+
+async function toCombat(): Promise<void> {
+  await router.push({ name: "真境剧诗" });
+}
+
+async function loadWiki(): Promise<void> {
+  showSnackbar.warn("暂未接入胡桃数据库");
+}
+
+async function shareChallenge(): Promise<void> {
+  // TODO: 实现分享功能
+}
+
+async function refreshChallenge(): Promise<void> {
+  // TODO: 实现刷新挑战记录功能
+}
+
+async function uploadChallenge(): Promise<void> {
+  showSnackbar.warn("暂未接入胡桃数据库");
+}
+
+async function deleteChallenge(): Promise<void> {
+  if (localChallenge.value.length === 0) {
+    showSnackbar.warn("没有可删除的挑战记录");
+    return;
+  }
+  // TODO: 实现删除挑战记录功能
+}
+
+async function refreshPopList(): Promise<void> {
+  if (reqPop.value) return;
+  reqPop.value = true;
+  await showLoading.start("正在加载赋光之人列表", `服务器： ${getGameServerDesc(server.value)}`);
+  const resp = await recordReq.challenge.pop(server.value);
+  if (resp.retcode !== 0) {
+    reqPop.value = false;
+    showSnackbar.error(`[${resp.retcode}] ${resp.message}`);
+    await TGLogger.Error(
+      `[UserChallenge][RefreshPopList] Error: ${resp.retcode} - ${resp.message}`,
+    );
+    await showLoading.end();
+    return;
+  }
+  popList.value = resp.data.avatar_list;
+  await showLoading.end();
+  reqPop.value = false;
+  showSnackbar.success(`加载完成，共 ${popList.value.length} 位赋光之人`);
+}
+</script>
+<style lang="scss" scoped>
+.ucp-top-prepend {
+  position: relative;
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  padding: 8px;
+  column-gap: 8px;
+
+  img {
+    width: 32px;
+    height: 32px;
+  }
+
+  span {
+    font-family: var(--font-title);
+    font-size: 20px;
+  }
+
+  span :first-child {
+    color: var(--common-text-title);
+  }
+}
+
+.ucp-btn {
+  background: var(--tgc-btn-1);
+  color: var(--btn-text);
+  font-family: var(--font-text);
+
+  img {
+    width: 24px;
+    height: 24px;
+    margin-right: 4px;
+    object-fit: contain;
+  }
+}
+
+.dark .ucp-btn {
+  border: 1px solid var(--common-shadow-2);
+}
+
+.ucp-top-append {
+  position: relative;
+  width: fit-content;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 8px;
+}
+
+.ucp-top-extension {
+  position: relative;
+  display: flex;
+  width: 100%;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 8px;
+}
+
+.act-list {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.pop-list {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  column-gap: 4px;
+}
+
+.pop-btn {
+  background: var(--tgc-btn-1);
+  color: var(--btn-text);
+  font-family: var(--font-title);
+}
+
+.dark .pop-btn {
+  border: 1px solid var(--common-shadow-2);
+}
+</style>
--- a/src/pages/User/Combat.vue
+++ b/src/pages/User/Combat.vue
@@ -13,11 +13,15 @@
          label="游戏UID"
        />
        <v-btn :rounded="true" class="uc-btn" @click="toAbyss()">
-          <template #prepend><img src="/source/UI/userAbyss.webp" alt="abyss" /></template>
+          <img src="/source/UI/userAbyss.webp" alt="abyss" />
          <span>深境螺旋</span>
        </v-btn>
+        <v-btn :rounded="true" class="uc-btn" @click="toChallenge()">
+          <img src="/source/UI/userChallenge.webp" alt="challenge" />
+          <span>幽境危战</span>
+        </v-btn>
        <v-btn :rounded="true" class="uc-btn" @click="loadWiki()">
-          <template #prepend><img src="/source/UI/wikiAbyss.webp" alt="abyss" /></template>
+          <img src="/source/UI/wikiAbyss.webp" alt="abyss" />
          <span>统计数据</span>
        </v-btn>
      </div>
@@ -144,7 +148,10 @@ onMounted(async () => {
 watch(() => uidCur.value, loadCombat);

 async function toAbyss(): Promise<void> {
-  await router.push({ name: "深渊记录" });
+  await router.push({ name: "深境螺旋" });
+}
+async function toChallenge(): Promise<void> {
+  await router.push({ name: "幽境危战" });
 }

 async function loadCombat(): Promise<void> {
@@ -330,6 +337,13 @@ async function deleteCombat(): Promise<void> {
  background: var(--tgc-btn-1);
  color: var(--btn-text);
  font-family: var(--font-text);
+
+  img {
+    width: 24px;
+    height: 24px;
+    margin-right: 4px;
+    object-fit: contain;
+  }
 }

 .dark .uc-btn {