diff --git a/src/components/main/t-calendar.vue b/src/components/main/t-calendar.vue
index eb5d21ec..efec37b4 100644
--- a/src/components/main/t-calendar.vue
+++ b/src/components/main/t-calendar.vue
@@ -56,62 +56,17 @@
         </div>
       </div>
     </div>
-    <v-snackbar v-model="snackbar" :timeout="1500" :color="snackbarColor">
-      {{ snackbarText }}
-    </v-snackbar>
-    <v-overlay v-model="showItem">
-      <div class="calendar-item-box">
-        <div class="calendar-item-top">
-          <div class="calendar-item-icon">
-            <TMiniAvatar v-if="selectedType=== 'character'" :model-value="selectedItem" size="100px" />
-            <TMiniWeapon v-if="selectedType=== 'weapon'" :model-value="selectedItem" size="100px" />
-          </div>
-          <div class="calendar-item-content">
-            <div v-for="item in selectedItem.materials" class="calendar-item-sub">
-              <TCalendarMaterial :item="item" />
-            </div>
-          </div>
-        </div>
-        <div class="calendar-item-line">
-          <img src="/source/UI/item-line.webp" alt="line">
-        </div>
-        <div class="calendar-item-bottom">
-          <div class="calendar-item-source">
-            <div class="calendar-source-text">
-              来源：
-            </div>
-            <img :src="`/icon/nation/${selectedItem.source.area}.webp`" alt="icon">
-            <div class="calendar-source-text">
-              {{ selectedItem.source.area }} - {{ selectedItem.source.name }}
-            </div>
-          </div>
-          <div class="detail-btn">
-            <v-btn @click="showDetail(selectedItem)">
-              <template #append>
-                <img src="../../assets/icons/arrow-right.svg" alt="right">
-              </template>
-              详情
-            </v-btn>
-          </div>
-        </div>
-      </div>
-      <div class="calendar-item-close" @click="showItem = false">
-        <v-icon>mdi-close</v-icon>
-      </div>
-    </v-overlay>
+    <ToCalendar v-model="showItem" :data-type="selectedType" :data-val="selectedItem" />
   </div>
 </template>
 <script lang="ts" setup>
 // vue
 import { computed, onMounted, ref } from "vue";
+import ToCalendar from "../overlay/to-calendar.vue";
 import TMiniAvatar from "../mini/t-mini-avatar.vue";
 import TMiniWeapon from "../mini/t-mini-weapon.vue";
-import TCalendarMaterial from "../mini/t-calendar-material.vue";
 // data
 import { AppCalendarData } from "../../data";
-// interface
-import { OBC_CONTENT_API } from "../../plugins/Mys/interface/utils";
-import { createTGWindow } from "../../utils/TGWindow";
 
 // loading
 const loading = ref(true as boolean);
@@ -132,11 +87,6 @@ const showItem = ref(false as boolean);
 const selectedItem = ref({} as TGApp.App.Calendar.Item);
 const selectedType = ref("character");
 
-// snackbar
-const snackbar = ref(false as boolean);
-const snackbarText = ref("" as string);
-const snackbarColor = ref("success" as string);
-
 const btnText = [
   {
     week: 7,
@@ -194,17 +144,6 @@ function selectContent (item: TGApp.App.Calendar.Item, type: string) {
   showItem.value = true;
 }
 
-function showDetail (item: TGApp.App.Calendar.Item) {
-  if (item.contentId === 0) {
-    snackbarText.value = "暂无详情";
-    snackbarColor.value = "error";
-    snackbar.value = true;
-    return;
-  }
-  const url = OBC_CONTENT_API.replace("{content_id}", item.contentId.toString());
-  createTGWindow(url, "素材详情", item.name, 1200, 800, true);
-}
-
 function getContents (day: number) {
   btnNow.value = day;
   calendarNow.value = getCalendar(day);
@@ -287,129 +226,4 @@ function getContents (day: number) {
     grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
     grid-gap: 8px;
 }
-
-/* overlay 盒子 */
-.calendar-item-box {
-    position: absolute;
-    width: 440px;
-    height: 200px;
-    color: #faf7e8;
-    top: calc(50vh - 100px);
-    left: calc(50vw - 220px);
-    background: var(--content-bg-2);
-    border-radius: 10px;
-    padding: 10px;
-    align-items: center;
-}
-
-.calendar-item-top {
-  height: 100px;
-  width: 100%;
-  display: flex;
-}
-
-.calendar-item-icon {
-    height: 100px;
-    width: 100px;
-}
-
-.calendar-item-content {
-    margin-left: 10px;
-    font-family: Genshin, serif;
-    color: var(--content-bg-1);
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    column-gap: 10px;
-		row-gap: 10px;
-}
-
-.calendar-item-sub {
-  width: 150px;
-  height: 45px;
-	border-radius: 10px;
-}
-
-.calendar-item-sub img {
-  width: 40px;
-  height: 40px;
-  object-fit: cover;
-  border-radius: 10px;
-}
-
-.calendar-item-line {
-    width: 420px;
-}
-
-.calendar-item-line img {
-    width: 100%;
-    height: auto;
-}
-
-.calendar-item-bottom {
-  background: rgb(0 0 0 / 30%);
-  padding: 3px 10px;
-  width: 420px;
-  height: 56px;
-  border-radius: 5px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.calendar-item-bottom img {
-  width: 50px;
-  height: 50px;
-}
-
-.calendar-item-source {
-  width: 300px;
-  height: 50px;
-  display: flex;
-  justify-content: left;
-  align-items: center;
-}
-
-.calendar-source-text {
-  height: 50px;
-  font-size: 20px;
-  font-family: Genshin-Light, serif;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.detail-btn {
-  font-family: Genshin, serif;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 10px;
-  border-radius: 5px;
-  transition: all 0.3s linear;
-}
-
-.detail-btn button {
-  background: var(--btn-bg-1);
-  color: #faf7e8;
-}
-
-.detail-btn button img {
-  width: 18px;
-  height: 18px;
-}
-
-.calendar-item-close {
-    position: absolute;
-    top: calc(50vh + 120px);
-    left: calc(50vw - 15px);
-    border-radius: 50%;
-    width: 30px;
-    height: 30px;
-    background: var(--content-bg-2);
-    color: #546D8B;
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
 </style>
diff --git a/src/components/overlay/to-calendar.vue b/src/components/overlay/to-calendar.vue
new file mode 100644
index 00000000..ebbf9315
--- /dev/null
+++ b/src/components/overlay/to-calendar.vue
@@ -0,0 +1,191 @@
+<template>
+  <TOverlay v-model="visible">
+    <div class="toc-box">
+      <div class="box-div">
+        <div class="toc-top">
+          <div class="toc-icon">
+            <TMiniAvatar v-if="itemType=== 'character'" v-model="itemVal" size="100px" />
+            <TMiniWeapon v-if="itemType=== 'weapon'" v-model="itemVal" size="100px" />
+          </div>
+          <div class="toc-material-grid">
+            <TCalendarMaterial v-for="item in itemVal.materials" :item="item" />
+          </div>
+        </div>
+        <img src="/source/UI/item-line.webp" alt="line" class="toc-line">
+        <div class="toc-bottom">
+          <div class="toc-src-box">
+            <div class="toc-src-text">
+              来源：
+            </div>
+            <img :src="`/icon/nation/${itemVal.source.area}.webp`" alt="icon">
+            <div class="toc-src-text">
+              {{ itemVal.source.area }} - {{ itemVal.source.name }}
+            </div>
+          </div>
+          <v-btn variant="outlined" @click="toDetail(itemVal)">
+            <template #append>
+              <img src="../../assets/icons/arrow-right.svg" alt="right" class="toc-btn-img">
+            </template>
+            详情
+          </v-btn>
+        </div>
+      </div>
+      <div class="close-div">
+        <div class="close-btn" @click="onCancel">
+          <v-icon>mdi-close</v-icon>
+        </div>
+      </div>
+    </div>
+  </TOverlay>
+  <v-snackbar v-model="snackbar" :timeout="1500" color="error">
+    该 {{ itemType === "weapon" ? "武器" : "角色" }} 暂无详情
+  </v-snackbar>
+</template>
+<script setup lang="ts">
+// vue
+import { computed, ref } from "vue";
+import TOverlay from "../main/t-overlay.vue";
+import TCalendarMaterial from "../mini/t-calendar-material.vue";
+import TMiniAvatar from "../mini/t-mini-avatar.vue";
+import TMiniWeapon from "../mini/t-mini-weapon.vue";
+// utils
+import { OBC_CONTENT_API } from "../../plugins/Mys/interface/utils";
+import { createTGWindow } from "../../utils/TGWindow";
+
+interface TOCalendarProps {
+  modelValue: boolean;
+  dataType: string;
+  dataVal: TGApp.App.Calendar.Item;
+}
+
+interface TOCalendarEmits {
+  (e: "update:modelValue", value: TGApp.App.Calendar.Item): void;
+  (e: "cancel"): void;
+}
+
+const emits = defineEmits<TOCalendarEmits>();
+const props = withDefaults(defineProps<TOCalendarProps>(), {
+  modelValue: false,
+  dataType: "",
+  dataVal: {} as TGApp.App.Calendar.Item,
+});
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (value) => emits("update:modelValue", value),
+});
+const itemType = computed(() => props.dataType);
+const itemVal = computed(() => props.dataVal);
+const snackbar = ref(false);
+
+const onCancel = () => {
+  visible.value = false;
+  emits("cancel");
+};
+
+function toDetail (item: TGApp.App.Calendar.Item) {
+  if (item.contentId === 0) {
+    snackbar.value = true;
+    return;
+  }
+  const url = OBC_CONTENT_API.replace("{content_id}", item.contentId.toString());
+  createTGWindow(url, "素材详情", item.name, 1200, 800, true);
+}
+</script>
+<style scoped>
+/* overlay 盒子 */
+.toc-box {
+  width: 440px;
+  height: 260px;
+}
+
+.box-div {
+  height: 200px;
+  background: rgb(255 255 255 / 30%);
+  padding: 10px;
+  border-radius: 5px;
+  color: #faf7e8;
+  align-items: center;
+}
+
+.toc-top {
+  height: 100px;
+  width: 100%;
+  display: flex;
+}
+
+.toc-icon {
+  height: 100px;
+  width: 100px;
+}
+
+.toc-material-grid {
+  margin-left: 10px;
+  font-family: Genshin, serif;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 10px;
+}
+
+.toc-line {
+  width: 100%;
+  height: auto;
+}
+
+.toc-bottom {
+  background: rgb(0 0 0 / 30%);
+  padding: 3px 10px;
+  width: 420px;
+  border-radius: 5px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.toc-bottom img {
+  width: 50px;
+  height: 50px;
+}
+
+.toc-src-box {
+  width: 300px;
+  height: 50px;
+  display: flex;
+  justify-content: left;
+  align-items: center;
+}
+
+.toc-src-text {
+  height: 50px;
+  font-size: 20px;
+  font-family: Genshin-Light, serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.toc-btn-img {
+  width: 18px !important;
+  height: 18px !important;
+}
+
+.close-div {
+  height: 60px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.close-btn {
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  background: rgb(255 255 255 / 30%);
+  color: #faf7e8;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>