From 16b3a9d1a77bd4528dec89724da07ee6cbf655a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=9B=AE=E6=A3=83?= <BT-Muli@outlook.com>
Date: Thu, 29 Feb 2024 20:43:23 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20=E4=BF=AE=E6=AD=A3?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91=EF=BC=8C=E4=BC=98=E5=8C=96=E7=AB=96=E5=9B=BE?=
 =?UTF-8?q?=E8=A1=A8=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/post/tpo-image.vue  | 35 ++++++++++++++++++++++++++++--
 src/components/wiki/two-source.vue |  3 ++-
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/src/components/post/tpo-image.vue b/src/components/post/tpo-image.vue
index b097bf84..9177fe43 100644
--- a/src/components/post/tpo-image.vue
+++ b/src/components/post/tpo-image.vue
@@ -1,7 +1,9 @@
 <template>
   <TOverlay v-model="visible" hide :to-click="onCancel" blur-val="10px">
     <div class="tpoi-box">
-      <img :src="props.image.insert.image" alt="图片" />
+      <div :class="isOriSize ? 'tpoi-top ori-size' : 'tpoi-top'">
+        <img :src="props.image.insert.image" alt="图片" @click="resizeImg" />
+      </div>
       <div class="tpoi-bottom">
         <div class="tpoi-info" v-if="props.image.attributes">
           <p v-if="props.image.attributes.size">
@@ -42,6 +44,7 @@ const props = defineProps<TpoImageProps>();
 const emits = defineEmits<TpoImageEmits>();
 const buffer = ref<Uint8Array | null>(null);
 const bgMode = ref(0); // 0: transparent, 1: black, 2: white
+const isOriSize = ref(false);
 
 const visible = computed({
   get: () => props.modelValue,
@@ -66,6 +69,10 @@ function onCancel() {
   visible.value = false;
 }
 
+function resizeImg() {
+  isOriSize.value = !isOriSize.value;
+}
+
 function setBlackBg() {
   bgMode.value = (bgMode.value + 1) % 3;
   const bgLabelList = ["透明", "黑色", "白色"];
@@ -118,12 +125,36 @@ onUnmounted(() => {
   align-items: center;
   justify-content: flex-start;
   row-gap: 20px;
+  transition: all 0.5s;
 }
 
-.tpoi-box img {
+.tpoi-top {
+  display: flex;
+  overflow: hidden;
+  width: 100%;
+  max-height: 70vh;
+  align-items: flex-start;
+  justify-content: center;
+  border-radius: 10px;
+  background-color: var(--common-shadow-2);
+}
+
+.tpoi-top.ori-size {
+  overflow-y: auto;
+}
+
+.tpoi-top img {
   max-width: 90vw;
   max-height: 70vh;
   background-color: v-bind(bg);
+  cursor: zoom-in;
+  object-fit: contain;
+}
+
+.tpoi-top.ori-size img {
+  max-width: 100%;
+  max-height: none;
+  cursor: zoom-out;
   object-fit: contain;
 }
 
diff --git a/src/components/wiki/two-source.vue b/src/components/wiki/two-source.vue
index 8526acfb..14d64bb8 100644
--- a/src/components/wiki/two-source.vue
+++ b/src/components/wiki/two-source.vue
@@ -15,8 +15,9 @@ const props = defineProps<TwoConvertProps>();
 
 const textColor = computed(() => {
   if (!props.data || !props.data.days) return "var(--tgc-blue-2)";
+  const days = props.data.days;
   const day = new Date().getDay();
-  if (props.data.days.includes(day.toString())) return "var(--tgc-pink-1)";
+  if (day === 0 || days.includes(day.toString())) return "var(--tgc-pink-1)";
   return "var(--tgc-blue-2)";
 });
 </script>