From ea487bdc7be34e255a74f8b32cabc1d001f94f30 Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Mon, 12 Oct 2026 18:16:36 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E9=A2=98=E9=9D=A2):=20=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E7=82=B9=E4=B8=8D=E5=BC=80=E5=A4=A7=E5=9B=BE=EF=BC=8C=E8=80=8C?=
 =?UTF-8?q?=E4=B8=94=E5=8D=8A=E6=A0=8F=E6=94=BE=E4=B8=8D=E4=B8=8B=E7=9A=84?=
 =?UTF-8?q?=E5=9B=BE=E4=BC=9A=E8=A2=AB=E5=8E=8B=E6=89=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

换掉 md-editor 时把它自带的点图放大一起丢了；富文本存的图片带行内
style="width; height"，宽被 max-width 压窄时高还是原值，height: auto 盖不住行内样式。

- 正文图片点一下全屏看大图，点任意处或按 Esc 关闭；包在链接里的图照旧走链接
- 图片高度用 !important 跟着宽度走，比例不再变形

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/shared/components/Markdown.vue | 48 ++++++++++++++++++++-
 1 file changed, 46 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/shared/components/Markdown.vue b/apps/web/src/shared/components/Markdown.vue
index 84141c4..7d9e315 100644
--- a/apps/web/src/shared/components/Markdown.vue
+++ b/apps/web/src/shared/components/Markdown.vue
@@ -15,10 +15,28 @@ const { content, html = false } = defineProps<{
 
 const theme = useThemeVars()
 const rendered = computed(() => renderMarkdown(content ?? "", html))
+
+// 点图片看大图（原来 MdPreview 自带）。包在链接里的图片照旧走链接
+const zoomed = ref("")
+
+function onClick(e: MouseEvent) {
+  const target = e.target
+  if (!(target instanceof HTMLImageElement) || target.closest("a")) return
+  zoomed.value = target.currentSrc || target.src
+}
+
+onKeyStroke("Escape", () => {
+  zoomed.value = ""
+})
 </script>
 
 <template>
-  <div class="oj-markdown" v-html="rendered" />
+  <div class="oj-markdown" v-html="rendered" @click="onClick" />
+  <Teleport to="body">
+    <div v-if="zoomed" class="oj-markdown-zoom" @click="zoomed = ''">
+      <img :src="zoomed" alt="" />
+    </div>
+  </Teleport>
 </template>
 
 <!-- 不加 scoped：v-html 进来的节点不带 scoped 的属性，靠 .oj-markdown 前缀收住范围 -->
@@ -95,10 +113,36 @@ const rendered = computed(() => renderMarkdown(content ?? "", html))
   text-decoration: underline;
 }
 
+/* 富文本存的图片带行内 style="width; height"，宽被 max-width 压窄时高还是原值，
+   图片就被压扁 —— 行内样式只有 !important 盖得住 */
 .oj-markdown img {
   max-width: 100%;
-  height: auto;
+  height: auto !important;
   vertical-align: middle;
+  cursor: zoom-in;
+}
+
+.oj-markdown a img {
+  cursor: pointer;
+}
+
+.oj-markdown-zoom {
+  position: fixed;
+  inset: 0;
+  z-index: 3000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  background-color: rgba(0, 0, 0, 0.8);
+  cursor: zoom-out;
+}
+
+.oj-markdown-zoom img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  background-color: #fff;
 }
 
 .oj-markdown hr {