diff --git a/src/components/hutaoAbyss/hta-overlay-overview.vue b/src/components/hutaoAbyss/hta-overlay-overview.vue
index 923fec91..9d2183b6 100644
--- a/src/components/hutaoAbyss/hta-overlay-overview.vue
+++ b/src/components/hutaoAbyss/hta-overlay-overview.vue
@@ -1,8 +1,30 @@
 <template>
   <TOverlay v-model="visible" hide :to-click="onCancel" blur-val="0px">
     <div class="hta-oo-box">
-      <TSubLine>数据收集统计</TSubLine>
-      <TSubLine>深渊数据统计</TSubLine>
+      <div class="hta-oob-title">数据收集统计</div>
+      <div class="hta-oob-item">
+        <span>当期深渊ID</span>
+        <span>{{ props.data.scheduleId }}</span>
+        <span>上传记录总数</span>
+        <span>{{ props.data.recordTotal }}</span>
+      </div>
+      <div class="hta-oob-title">深渊数据统计</div>
+      <div class="hta-oob-item">
+        <span>总计深渊记录</span>
+        <span>{{ props.data.spiralAbyssTotal }}</span>
+        <span>通关深渊记录</span>
+        <span>{{ props.data.spiralAbyssPassed }}</span>
+        <span>满星深渊记录</span>
+        <span>{{ props.data.spiralAbyssFullStar }}</span>
+        <span>平均获取渊星</span>
+        <span>{{
+          (props.data.spiralAbyssStarTotal / props.data.spiralAbyssTotal).toFixed(2)
+        }}</span>
+        <span>平均战斗次数</span>
+        <span>{{
+          (props.data.spiralAbyssBattleTotal / props.data.spiralAbyssTotal).toFixed(2)
+        }}</span>
+      </div>
     </div>
   </TOverlay>
 </template>
@@ -10,15 +32,15 @@
 // vue
 import { computed } from "vue";
 import TOverlay from "../main/t-overlay.vue";
-import TSubLine from "../main/t-subline.vue";
 
 interface HtaOverlayOverviewProps {
   modelValue: boolean;
-  data?: TGApp.Plugins.Hutao.AbyssOverview;
+  data: TGApp.Plugins.Hutao.Abyss.OverviewData;
 }
 
 interface HtaOverlayOverviewEmits {
-  (e: "update:modelValue", value: TGApp.Plugins.Hutao.AbyssOverview): void;
+  (e: "update:modelValue", value: boolean): void;
+  (e: "cancel"): void;
 }
 
 const props = defineProps<HtaOverlayOverviewProps>();
@@ -31,6 +53,7 @@ const visible = computed({
 
 function onCancel() {
   visible.value = false;
+  emits("cancel");
 }
 </script>
 <style lang="css" scoped>
@@ -38,6 +61,39 @@ function onCancel() {
   width: 300px;
   padding: 10px;
   border-radius: 5px;
-  background: rgb(255 255 255/30%);
+  background: rgb(255 255 255/50%);
+}
+
+.hta-oo-box:nth-child(3) {
+  margin-top: 10px;
+}
+
+.hta-oob-title {
+  font-family: var(--font-title);
+  font-size: 20px;
+  color: #393b40;
+  border-bottom: 1px solid #393b40;
+}
+
+.hta-oob-item {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 5px;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.hta-oob-item :nth-child(2n-1) {
+  text-align: left;
+  font-family: var(--font-title);
+  color: var(--common-color-blue);
+  font-size: 16px;
+}
+
+.hta-oob-item :nth-child(2n) {
+  text-align: right;
+  color: var(--common-color-white);
+  text-shadow: 0 0 10px rgb(0 0 0/50%);
+  font-size: 14px;
 }
 </style>
diff --git a/src/pages/WIKI/Abyss.vue b/src/pages/WIKI/Abyss.vue
index 55ff5478..2ca6f87d 100644
--- a/src/pages/WIKI/Abyss.vue
+++ b/src/pages/WIKI/Abyss.vue
@@ -1,24 +1,53 @@
 <template>
-  <div class="hta-title">
-    <span>胡桃数据库</span>
-    <span @click="showDialog = true">更新于 {{ getUpdated() }}</span>
+  <ToLoading v-model="loading" :title="loadingTitle" />
+  <div class="hta-box">
+    <div class="hta-top">
+      <v-tabs v-model="tab" align-tabs="start" class="hta-tab">
+        <v-tab value="use">角色使用</v-tab>
+        <v-tab value="up">角色出场</v-tab>
+        <v-tab value="team">队伍出场</v-tab>
+        <v-tab value="hold">角色持有</v-tab>
+      </v-tabs>
+      <div class="hta-title">
+        <span>胡桃数据库</span>
+        <span @click="showDialog = true">更新于 {{ getUpdated() }}</span>
+      </div>
+    </div>
+    <v-window v-model="tab">
+      <v-window-item value="use"> 角色使用 </v-window-item>
+      <v-window-item value="up"> 角色出场 </v-window-item>
+      <v-window-item value="team"> 队伍出场 </v-window-item>
+      <v-window-item value="hold"> 角色持有 </v-window-item>
+    </v-window>
   </div>
   <HtaOverlayOverview v-model="showDialog" :data="overview" />
 </template>
 <script lang="ts" setup>
 // vue
 import { onMounted, ref } from "vue";
+import ToLoading from "../../components/overlay/to-loading.vue";
 // utils
 import Hutao from "../../plugins/Hutao";
 import HtaOverlayOverview from "../../components/hutaoAbyss/hta-overlay-overview.vue";
 
-const showDialog = ref(false);
+// loading
+const loading = ref<boolean>(false);
+const loadingTitle = ref<string>("");
+
+// overview overlay
+const showDialog = ref<boolean>(false);
 
 // data
-const overview = ref({} as TGApp.Plugins.Hutao.AbyssOverview);
+const overview = ref<TGApp.Plugins.Hutao.Abyss.OverviewData>(
+  {} as TGApp.Plugins.Hutao.Abyss.OverviewData,
+);
+const tab = ref<string>("use");
 
 onMounted(async () => {
+  loadingTitle.value = "正在获取深渊数据";
+  loading.value = true;
   overview.value = await Hutao.Abyss.getOverview();
+  loading.value = false;
 });
 
 function getUpdated() {
@@ -28,18 +57,38 @@ function getUpdated() {
 }
 </script>
 <style lang="css" scoped>
+.hta-box {
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+  overflow: auto;
+  border-radius: 5px;
+  box-shadow: 0 0 10px var(--common-shadow-4);
+}
+
+.hta-top {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  color: var(--common-text-title);
+  font-family: var(--font-title);
+}
+
+.hta-tab {
+  margin-bottom: 10px;
+}
+
 .hta-title {
   display: flex;
-  align-items: end;
-  justify-content: start;
-  font-family: var(--font-title);
+  align-items: center;
+  justify-content: space-between;
   font-size: 20px;
+  column-gap: 10px;
 }
 
 .hta-title :nth-child(2) {
-  margin-left: 10px;
-  color: #5e7987; /* 淡蓝灰 */
-  font-size: 12px;
+  font-family: var(--font-text);
 }
 
 .hta-title :nth-child(2):hover {