🌱 初步搞了下布局

src/pages/User/Abyss.vue

@@ -1,25 +1,53 @@
 <template>
-  <h1>深渊数据获取、显示、上传</h1>
-  <v-btn @click="getCurAbyss()">
-    获取当期深渊数据
-  </v-btn>
-  <v-btn @click="getLastAbyss()">
-    获取上期深渊数据
-  </v-btn>
+  <ToLoading v-model="loading" :title="loadingTitle" />
+  <v-tabs v-model="abyssTab" align-tabs="start" class="abyss-tab">
+    <v-tab value="record">
+      深渊统计
+    </v-tab>
+    <v-tab value="user">
+      深渊记录
+    </v-tab>
+  </v-tabs>
+  <v-window v-model="abyssTab">
+    <v-window-item value="record">
+      <h1>胡桃深渊数据统计</h1>
+    </v-window-item>
+    <v-window-item value="user" class="user-window">
+      <v-tabs v-model="userTab" direction="vertical" align-tabs="start" class="ua-tab">
+        <v-tab v-for="item in localAbyss" :key="item.id" :value="item.id" @click="toAbyss(item.id)">
+          第  {{ item.id }} 期
+        </v-tab>
+      </v-tabs>
+      <v-window v-model="userTab" class="ua-window">
+        <v-window-item v-for="item in localAbyss" :key="item.id" :value="item.id">
+          <h1>第 {{ item.id }} 期</h1>
+          {{ JSON.stringify(curAbyss) }}
+        </v-window-item>
+      </v-window>
+    </v-window-item>
+  </v-window>
 </template>
 <script lang="ts" setup>
 // vue
 import { onMounted, ref } from "vue";
+import ToLoading from "../../components/overlay/to-loading.vue";
 // store
 import { useUserStore } from "../../store/modules/user";
 // utils
 import TGRequest from "../../web/request/TGRequest";
-import TGSqlite from "../../utils/TGSqlite";
+import TGSqlite from "../../plugins/Sqlite";
 
 // store
 const userStore = useUserStore();
+// loading
+const loading = ref(true);
+const loadAbyss = ref(false);
+const loadingTitle = ref("");
 
 // data
+const abyssNow = ref(true);
+const abyssTab = ref("");
+const userTab = ref("");
 const abyssCookie = ref({
   cookie_token: "",
   account_id: "",
@@ -28,7 +56,12 @@ const abyssCookie = ref({
 });
 const user = ref({} as TGApp.Sqlite.Account.Game);
 
+const localAbyss = ref([] as TGApp.Sqlite.Abyss.SingleTable[]);
+const localAbyssID = ref([] as number[]);
+const curAbyss = ref({} as TGApp.Sqlite.Abyss.SingleTable);
+
 onMounted(async () => {
+  loadingTitle.value = "正在加载深渊数据";
   const curUser = await TGSqlite.getCurAccount();
   if (curUser) {
     user.value = curUser;
@@ -39,26 +72,53 @@ onMounted(async () => {
     ltoken: userStore.getCookieItem("ltoken"),
     ltuid: userStore.getCookieItem("ltuid"),
   };
+  localAbyss.value = await TGSqlite.getAbyss();
+  localAbyss.value.forEach((item) => {
+    localAbyssID.value.push(item.id);
+  });
+  curAbyss.value = localAbyss.value[0];
+  loading.value = false;
 });
 
-async function getAbyssData (schedule:string): Promise<void> {
+async function getAbyssData (): Promise<void> {
+  loadAbyss.value = true;
+  const schedule = abyssNow.value ? "1" : "2";
+  console.log(schedule);
   const res = await TGRequest.User.byCookie.getAbyss(abyssCookie.value, schedule, user.value);
-  if (res.hasOwnProperty("retcode")) {
-    const warn = res as TGApp.BBS.Response.Base;
-    console.warn(warn);
-  } else {
-    console.log(res);
-  }
+  console.log(res);
+  loadAbyss.value = false;
 }
 
-async function getCurAbyss (): Promise<void> {
-  await getAbyssData("1");
+function toAbyss (id: number): void {
+  curAbyss.value = localAbyss.value.find((item) => item.id === id)!;
 }
-
-async function getLastAbyss (): Promise<void> {
-  await getAbyssData("2");
-}
-
 </script>
 <style lang="css" scoped>
+.abyss-tab {
+  font-family: Genshin, serif;
+  margin-bottom: 20px;
+  color: var(--content-text-3);
+}
+
+.user-window {
+  background: rgb(0 0 0 / 10%);
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  height: calc(100vh - 100px);
+}
+
+.ua-window {
+  padding: 10px;
+  width: calc(100% - 100px);
+  height: 100%;
+  overflow-y: auto;
+}
+
+.ua-tab {
+  font-family: Genshin-Light, serif;
+  color: var(--content-text-3);
+  width: 100px;
+  height: 100%;
+}
 </style>

src/plugins/Sqlite/utils/transAbyssData.ts

@@ -21,7 +21,6 @@ export function transCharacterData (data: TGApp.Game.Abyss.CharacterData[]): str
       star: item.rarity,
     };
   }) as TGApp.Sqlite.Abyss.Character[];
-  console.log(JSON.stringify(res));
   return JSON.stringify(res);
 }
 

src/plugins/Sqlite/utils/transTime.ts

@@ -14,8 +14,8 @@
 export function timeToSecond (timestamp: string): string {
   const date = new Date(Number(timestamp) * 1000);
   const year = date.getFullYear();
-  const month = date.getMonth() + 1;
-  const day = date.getDate();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
   const hour = String(date.getHours()).padStart(2, "0");
   const minute = String(date.getMinutes()).padStart(2, "0");
   const second = String(date.getSeconds()).padStart(2, "0");

src/web/request/getAbyss.ts

@@ -16,7 +16,7 @@ import { getRequestHeader } from "../utils/getRequestHeader";
  * @description 获取深渊信息
  * @since Alpha v0.2.0
  * @param {Record<string, string>} cookie cookie
- * @param {string} schedule_type 0: 本期, 1: 上期
+ * @param {string} schedule_type 1: 本期, 2: 上期
  * @param {TGApp.Sqlite.Account.Game} account 游戏账号
  * @returns {Promise<TGApp.Game.Abyss.FullData|TGApp.App.Base.Response>}
  */