diff --git a/src/components/hutaoAbyss/hta-overlay-overview.vue b/src/components/hutaoAbyss/hta-overlay-overview.vue
index a87c1ed5..6dd91d6a 100644
--- a/src/components/hutaoAbyss/hta-overlay-overview.vue
+++ b/src/components/hutaoAbyss/hta-overlay-overview.vue
@@ -48,10 +48,12 @@ const emits = defineEmits<HtaOverlayOverviewEmits>();
 
 const visible = computed({
   get: () => props.modelValue,
-  set: (value) => emits("update:modelValue", value),
+  set: (value) => {
+    emits("update:modelValue", value);
+  },
 });
 
-function onCancel() {
+function onCancel(): void {
   visible.value = false;
   emits("cancel");
 }
@@ -69,31 +71,31 @@ function onCancel() {
 }
 
 .hta-oob-title {
+  border-bottom: 1px solid #393b40;
+  color: #393b40;
   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;
+  justify-content: space-between;
+  grid-gap: 5px;
+  grid-template-columns: repeat(2, 1fr);
 }
 
 .hta-oob-item :nth-child(2n-1) {
-  text-align: left;
-  font-family: var(--font-title);
   color: var(--common-color-blue);
+  font-family: var(--font-title);
   font-size: 16px;
+  text-align: left;
 }
 
 .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;
+  text-align: right;
+  text-shadow: 0 0 10px rgb(0 0 0/50%);
 }
 </style>
diff --git a/src/components/hutaoAbyss/hta-tab-hold.vue b/src/components/hutaoAbyss/hta-tab-hold.vue
index 8e344d53..181c45cf 100644
--- a/src/components/hutaoAbyss/hta-tab-hold.vue
+++ b/src/components/hutaoAbyss/hta-tab-hold.vue
@@ -40,11 +40,11 @@ const props = defineProps<HtaTabHoldProps>();
 .hta-th-box {
   width: calc(100% - 10px);
   height: 100%;
+  max-height: calc(100vh - 120px);
+  padding: 10px;
   border: 1px inset var(--common-bg-1);
   border-radius: 5px;
-  max-height: calc(100vh - 120px);
   overflow-y: auto;
-  padding: 10px;
 }
 
 .hta-th-table {
@@ -59,11 +59,11 @@ const props = defineProps<HtaTabHoldProps>();
 }
 
 .hta-th-td {
+  display: flex;
   width: 100%;
   height: 100%;
-  padding: 10px;
-  display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
+  padding: 10px;
 }
 </style>
diff --git a/src/components/hutaoAbyss/hta-tab-team.vue b/src/components/hutaoAbyss/hta-tab-team.vue
index 944193cb..24056368 100644
--- a/src/components/hutaoAbyss/hta-tab-team.vue
+++ b/src/components/hutaoAbyss/hta-tab-team.vue
@@ -72,11 +72,11 @@ watch(tab, () => {
 </script>
 <style lang="css" scoped>
 .hta-tt-box {
-  margin: 5px;
   width: calc(100% - 10px);
   height: 100%;
   border: 1px inset var(--common-bg-1);
   border-radius: 5px;
+  margin: 5px;
 }
 
 .hta-tt-tab {
@@ -87,67 +87,67 @@ watch(tab, () => {
 }
 
 .hta-tt-window {
-  margin-left: 100px;
+  overflow: auto;
   width: calc(100% - 100px);
   height: 100%;
   max-height: calc(100vh - 130px);
-  overflow: auto;
+  margin-left: 100px;
 }
 
 .hta-tt-flex {
   position: relative;
-  overflow: auto;
   display: flex;
+  overflow: auto;
   align-items: flex-start;
   justify-content: center;
-  column-gap: 10px;
   padding: 10px;
+  column-gap: 10px;
 }
 
 .hta-tuf-box {
+  display: flex;
   width: 100%;
   max-height: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
-  display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  row-gap: 10px;
   border-radius: 5px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  row-gap: 10px;
 }
 
 .hta-tuf-title {
+  width: 100%;
   font-family: var(--font-title);
   font-size: 18px;
   text-align: left;
-  width: 100%;
 }
 
 .hta-tuf-item {
-  width: 100%;
   display: flex;
+  width: 100%;
   height: 100px;
-  padding: 5px;
-  justify-content: flex-start;
-  background: var(--common-bg-1);
-  border-radius: 5px;
-  column-gap: 10px;
   align-items: center;
+  justify-content: flex-start;
+  padding: 5px;
+  border-radius: 5px;
+  background: var(--common-bg-1);
+  column-gap: 10px;
 }
 
 .hta-tuf-item-icons {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
   column-gap: 10px;
+  grid-template-columns: repeat(4, 1fr);
 }
 
 .hta-tuf-item-rate {
-  width: calc(100% - 360px);
   display: flex;
+  width: calc(100% - 360px);
+  height: 100%;
   align-items: center;
   justify-content: center;
-  height: 100%;
   font-family: var(--font-title);
 }
 </style>
diff --git a/src/components/hutaoAbyss/hta-tab-up.vue b/src/components/hutaoAbyss/hta-tab-up.vue
index 198a05eb..cfe494f3 100644
--- a/src/components/hutaoAbyss/hta-tab-up.vue
+++ b/src/components/hutaoAbyss/hta-tab-up.vue
@@ -46,11 +46,11 @@ watch(tab, () => {
 </script>
 <style lang="css" scoped>
 .hta-tu-box {
-  margin: 5px;
   width: calc(100% - 10px);
   height: 100%;
   border: 1px inset var(--common-bg-1);
   border-radius: 5px;
+  margin: 5px;
 }
 
 .hta-tu-tab {
@@ -61,20 +61,20 @@ watch(tab, () => {
 }
 
 .hta-tu-window {
-  margin-left: 100px;
   width: calc(100% - 100px);
   height: 100%;
+  margin-left: 100px;
 }
 
 .hta-tu-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
-  grid-gap: 5px;
-  padding: 5px;
-  justify-content: center;
-  align-items: center;
+  overflow: auto;
   width: 100%;
   height: 100%;
-  overflow: auto;
+  align-items: center;
+  justify-content: center;
+  padding: 5px;
+  grid-gap: 5px;
+  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
 }
 </style>
diff --git a/src/components/hutaoAbyss/hta-tab-use.vue b/src/components/hutaoAbyss/hta-tab-use.vue
index 198a05eb..cfe494f3 100644
--- a/src/components/hutaoAbyss/hta-tab-use.vue
+++ b/src/components/hutaoAbyss/hta-tab-use.vue
@@ -46,11 +46,11 @@ watch(tab, () => {
 </script>
 <style lang="css" scoped>
 .hta-tu-box {
-  margin: 5px;
   width: calc(100% - 10px);
   height: 100%;
   border: 1px inset var(--common-bg-1);
   border-radius: 5px;
+  margin: 5px;
 }
 
 .hta-tu-tab {
@@ -61,20 +61,20 @@ watch(tab, () => {
 }
 
 .hta-tu-window {
-  margin-left: 100px;
   width: calc(100% - 100px);
   height: 100%;
+  margin-left: 100px;
 }
 
 .hta-tu-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
-  grid-gap: 5px;
-  padding: 5px;
-  justify-content: center;
-  align-items: center;
+  overflow: auto;
   width: 100%;
   height: 100%;
-  overflow: auto;
+  align-items: center;
+  justify-content: center;
+  padding: 5px;
+  grid-gap: 5px;
+  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
 }
 </style>
diff --git a/src/components/userCharacter/tuc-role-box.vue b/src/components/userCharacter/tuc-role-box.vue
index 82d9ad9b..b1d878be 100644
--- a/src/components/userCharacter/tuc-role-box.vue
+++ b/src/components/userCharacter/tuc-role-box.vue
@@ -107,7 +107,7 @@ onMounted(async () => {
   }
 });
 
-function getAvatarName() {
+function getAvatarName(): string {
   return props.modelValue.cid === 10000005
     ? "旅行者-空"
     : props.modelValue.cid === 10000007
@@ -117,8 +117,8 @@ function getAvatarName() {
 
 // 销毁
 onUnmounted(() => {
-  talents.value.map((talent) => {
-    return URL.revokeObjectURL(talent.icon);
+  talents.value.forEach((talent) => {
+    URL.revokeObjectURL(talent.icon);
   });
 });
 </script>
@@ -153,8 +153,8 @@ onUnmounted(() => {
   align-items: center;
   justify-content: space-between;
   padding: 5px;
-  border-radius: 5px;
   border: 1px inset var(--common-bg-1);
+  border-radius: 5px;
   font-family: var(--font-title);
   font-size: 12px;
 }
@@ -237,8 +237,8 @@ onUnmounted(() => {
   justify-content: center;
   padding: 5px;
   border-radius: 50%;
-  background: rgb(0 0 0 /0.4);
-  box-shadow: 0 0 10px rgb(255 255 255/0.4);
+  background: rgb(0 0 0 /40%);
+  box-shadow: 0 0 10px rgb(255 255 255/40%);
 }
 
 .tuc-rbb-talent :nth-child(2) {
diff --git a/src/pages/WIKI/Abyss.vue b/src/pages/WIKI/Abyss.vue
index 9c4e7413..8d77244d 100644
--- a/src/pages/WIKI/Abyss.vue
+++ b/src/pages/WIKI/Abyss.vue
@@ -60,10 +60,10 @@ const overview = ref<TGApp.Plugins.Hutao.Abyss.OverviewData>(
   <TGApp.Plugins.Hutao.Abyss.OverviewData>{},
 );
 const tab = ref<string>("use");
-const avatarUse = ref<Array<TGApp.Plugins.Hutao.Abyss.AvatarUse>>([]);
-const avatarUp = ref<Array<TGApp.Plugins.Hutao.Abyss.AvatarUp>>([]);
-const teamCombination = ref<Array<TGApp.Plugins.Hutao.Abyss.TeamCombination>>([]);
-const avatarHold = ref<Array<TGApp.Plugins.Hutao.Abyss.AvatarHold>>([]);
+const avatarUse = ref<TGApp.Plugins.Hutao.Abyss.AvatarUse[]>([]);
+const avatarUp = ref<TGApp.Plugins.Hutao.Abyss.AvatarUp[]>([]);
+const teamCombination = ref<TGApp.Plugins.Hutao.Abyss.TeamCombination[]>([]);
+const avatarHold = ref<TGApp.Plugins.Hutao.Abyss.AvatarHold[]>([]);
 
 onMounted(async () => {
   loadingTitle.value = "正在获取深渊数据";
@@ -81,13 +81,13 @@ onMounted(async () => {
   loading.value = false;
 });
 
-function getUpdated() {
+function getUpdated(): string {
   return new Date(overview.value.timestamp)
     .toLocaleString("zh-CN", { hour12: false })
     .replace(/\//g, "-");
 }
 
-function getShareTitle() {
+function getShareTitle(): string {
   switch (tab.value) {
     case "use":
       return `【胡桃】${overview.value.scheduleId}-角色使用`;
@@ -101,7 +101,7 @@ function getShareTitle() {
   return `【胡桃】${overview.value.scheduleId}-深渊数据`;
 }
 
-async function shareWiki() {
+async function shareWiki(): Promise<void> {
   const div = <HTMLDivElement>document.querySelector(".hta-tab-item");
   const title = getShareTitle();
   loadingTitle.value = "正在生成分享图";
@@ -114,11 +114,11 @@ async function shareWiki() {
 </script>
 <style lang="css" scoped>
 .hta-box {
+  overflow: auto;
   width: 100%;
   max-height: calc(100vh - 30px);
-  padding: 10px;
-  overflow: auto;
   box-sizing: border-box;
+  padding: 10px;
   border-radius: 5px;
   box-shadow: 0 0 10px var(--common-shadow-4);
 }
@@ -126,24 +126,24 @@ async function shareWiki() {
 .hta-top {
   display: flex;
   width: 100%;
-  justify-content: flex-start;
   align-items: center;
-  column-gap: 10px;
+  justify-content: flex-start;
   color: var(--common-text-title);
+  column-gap: 10px;
   font-family: var(--font-title);
 }
 
 .hta-tab {
-  margin-bottom: 10px;
   height: 50px;
+  margin-bottom: 10px;
 }
 
 .hta-title {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  font-size: 20px;
   column-gap: 10px;
+  font-size: 20px;
 }
 
 .hta-title :nth-child(2) {