From b93fe9847ca8207965bd63b929493ddef9dfd9b6 Mon Sep 17 00:00:00 2001
From: Sakurasan <26715255+Sakurasan@users.noreply.github.com>
Date: Mon, 28 Sep 2026 23:05:08 +0800
Subject: [PATCH] =?UTF-8?q?=E9=95=BF=E6=96=87=E5=9B=BE=E7=89=87=E7=BC=A9?=
 =?UTF-8?q?=E6=94=BE=EF=BC=9A=E7=BC=96=E8=BE=91=E5=99=A8=E6=8B=96=E6=8B=BD?=
 =?UTF-8?q?=E6=8A=8A=E6=89=8B=E7=9A=84=E6=AF=94=E4=BE=8B=E5=9C=A8=E6=96=87?=
 =?UTF-8?q?=E7=AB=A0=E9=A1=B5=E7=94=9F=E6=95=88=EF=BC=88alt=20=E6=95=B0?=
 =?UTF-8?q?=E5=AD=97=E8=BF=98=E5=8E=9F=E4=B8=BA=E5=AE=BD=E5=BA=A6=E5=B9=B6?=
 =?UTF-8?q?=E5=B1=85=E4=B8=AD=EF=BC=89+=20=E6=8A=8A=E6=89=8B=E9=BB=98?=
 =?UTF-8?q?=E8=AE=A4=E5=8D=8A=E9=80=8F=E6=98=8E=E6=8F=90=E9=AB=98=E5=8F=AF?=
 =?UTF-8?q?=E5=8F=91=E7=8E=B0=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/styles.css                  |  6 +++++-
 frontend/src/ui/yohaku/YohakuArticle.vue |  4 ++--
 frontend/src/utils.js                    | 16 ++++++++++++++++
 frontend/src/views/PostView.vue          |  4 ++--
 4 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 08cd653..60bac9b 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -1383,4 +1383,8 @@ a.cm-name-a:hover {color: var(--accent);}
   .cm-link {padding: 8px 2px;}
   .cm-more-r {padding: 10px 0;}
   .cm-input {font-size: 16px;}
-}
\ No newline at end of file
+}
+/* 编辑器图片缩放把手：Milkdown 图片块 hover 底部出现拖拽条（上下拖调高度，
+   比例存进 markdown 的 alt）。默认半透明让访客知道它在那儿。 */
+.admin-shell .image-resize-handle {opacity: 0.45;}
+.admin-shell .image-wrapper:hover .image-resize-handle {opacity: 1;}
diff --git a/frontend/src/ui/yohaku/YohakuArticle.vue b/frontend/src/ui/yohaku/YohakuArticle.vue
index 6dca2ba..8d14cc6 100644
--- a/frontend/src/ui/yohaku/YohakuArticle.vue
+++ b/frontend/src/ui/yohaku/YohakuArticle.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
-import { sanitizeHtml } from '../../utils'
+import { applyImageRatio, sanitizeHtml } from '../../utils'
 import { openLightbox } from '../../lightbox'
 import CommentSection from '../../components/comments/CommentSection.vue'
 import LinkCard from '../../components/LinkCard.vue'
@@ -168,7 +168,7 @@ function onTocClick(e) {
         <!-- 短文不渲染标题：正文第一句就是全部，再给个截断标题是重复 -->
         <h1 v-if="isShort" class="sr-only">{{ title }}</h1>
 
-        <div class="prose" :class="{ 'prose-note': isShort }" v-html="sanitizeHtml(props.contentHtml)" />
+        <div class="prose" :class="{ 'prose-note': isShort }" v-html="applyImageRatio(sanitizeHtml(props.contentHtml))" />
 
         <!-- 短文配图：Twitter 式网格（快发盒上传）；点图开预览 -->
         <div
diff --git a/frontend/src/utils.js b/frontend/src/utils.js
index 73bb4cd..f2539ec 100644
--- a/frontend/src/utils.js
+++ b/frontend/src/utils.js
@@ -28,6 +28,22 @@ export function thumbURL(u, w = 480) {
   return '/uploads/thumb/' + key + '?w=' + w
 }
 
+// 编辑器拖拽缩放的比例展示：Milkdown 图片块把高度比例写进 markdown 的 alt
+// （![0.6](url)），渲染出的 <img alt="0.6"> 在这里还原成对应的宽度并居中。
+// 纯数字 alt 才生效（>=1 的当 100% 处理），正常图片的描述性 alt 不受影响。
+export function applyImageRatio(html) {
+  if (!html) return html
+  return html.replace(/<img\b[^>]*>/gi, (tag) => {
+    const m = tag.match(/\balt="(\d*\.?\d+)"/i)
+    if (!m) return tag
+    const ratio = Number.parseFloat(m[1])
+    if (!Number.isFinite(ratio) || ratio <= 0 || ratio >= 1) return tag
+    const style = `display:block;width:${(ratio * 100).toFixed(1)}%;max-width:100%;height:auto;margin-inline:auto;`
+    if (/\bstyle="/i.test(tag)) return tag.replace(/\bstyle="/i, 'style="' + style)
+    return tag.replace(/^<img/i, '<img style="' + style + '"')
+  })
+}
+
 // 时间线正文 HTML（短文全文 / 长文 600 字符截断）里的 <img> 换缩略图 + 补懒加载。
 // 只在展示层重写，库里存的正文不动。截断的 HTML 可能带半截标签，
 // 正则只匹配完整的 <img ...src="..."> ，坏尾巴交给 sanitize/浏览器容错。
diff --git a/frontend/src/views/PostView.vue b/frontend/src/views/PostView.vue
index 3d47ff0..4f0e919 100644
--- a/frontend/src/views/PostView.vue
+++ b/frontend/src/views/PostView.vue
@@ -9,7 +9,7 @@ import LinkCard from '../components/LinkCard.vue'
 import { openLightbox } from '../lightbox'
 import { publicApi } from '../api'
 import { site, applyDocTitle } from '../site'
-import { formatDate, minutesLabel, sanitizeHtml } from '../utils'
+import { applyImageRatio, formatDate, minutesLabel, sanitizeHtml } from '../utils'
 
 const route = useRoute()
 const post = ref(null)
@@ -42,7 +42,7 @@ async function load() {
   try {
     post.value = await publicApi.post(route.params.slug)
     const prepared = withHeadingIds(post.value.content_html)
-    contentHtml.value = prepared.html
+    contentHtml.value = applyImageRatio(prepared.html)
     headings.value = prepared.headings
     applyDocTitle(post.value.kind === 'short' ? '短文' : post.value.title)
   } catch (e) {