From b121c2d0ee03f366a7c47bb468ed692113c74f2e Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Fri, 9 Oct 2026 15:27:27 +0800
Subject: [PATCH] =?UTF-8?q?style(=E4=B8=80=E8=A8=80):=20=E7=9F=AD=E5=8F=A5?=
 =?UTF-8?q?=E4=B9=9F=E8=A6=81=E7=82=B9=E4=B8=80=E4=B8=8B=E5=BC=B9=E5=87=BA?=
 =?UTF-8?q?=E4=B8=80=E6=A8=A1=E4=B8=80=E6=A0=B7=E7=9A=84=E5=85=A8=E6=96=87?=
 =?UTF-8?q?=E2=80=94=E2=80=94=E5=8F=AA=E6=9C=89=E4=B8=A4=E8=A1=8C=E6=94=BE?=
 =?UTF-8?q?=E4=B8=8D=E4=B8=8B=E7=9A=84=E6=89=8D=E5=BC=B9=EF=BC=8C=E8=80=8C?=
 =?UTF-8?q?=E4=B8=94=E6=98=AF=E9=BC=A0=E6=A0=87=E7=A7=BB=E4=B8=8A=E5=8E=BB?=
 =?UTF-8?q?=E5=B0=B1=E5=BC=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/apps/web/src/shared/components/Hitokoto.vue b/apps/web/src/shared/components/Hitokoto.vue
index 79e5519..1598f2a 100644
--- a/apps/web/src/shared/components/Hitokoto.vue
+++ b/apps/web/src/shared/components/Hitokoto.vue
@@ -8,7 +8,7 @@ import { getHitokoto } from "../api"
  * 一言（设计稿「一言重设计」A 版）：大引号 + 最多两行的句子、出处跟在第二行末尾 + 一个看得见的「换一句」。
  * 分类（动画、诗词……）不显示；接口里的 type 只用来判断出处要不要加书名号。
  * 原来只能点句子换，没人知道；出处被截成「来自 Structure and Interpretatio…」。
- * 长句（数据集 p90 44 字、最长 255 字）两行放不下，点句子弹出全文。
+ * 长句（数据集 p90 44 字、最长 255 字）两行放不下时，鼠标移上去弹出全文；放得下的不弹。
  * 留着它是给学生一点「无聊的乐趣」，别去掉、别挪到看不见的地方。
  */
 const theme = useThemeVars()
@@ -29,6 +29,17 @@ async function receive() {
 
 onMounted(receive)
 
+// 两行放不下（被截了省略号）才给全文弹层，鼠标移上去就出来；放得下的句子什么都不弹。
+// 是否被截要等渲染完量：scrollHeight 比可见高度高就是截了。换句、窗口变宽变窄都重量一次
+const sentenceRef = ref<HTMLElement | null>(null)
+const clipped = ref(false)
+function measure() {
+  const el = sentenceRef.value
+  clipped.value = !!el && el.scrollHeight > el.clientHeight + 1
+}
+watch(quote, () => nextTick(measure))
+useResizeObserver(sentenceRef, measure)
+
 /** 数据集里拿来充数的出处：写出来没有信息量 */
 const FILLER = new Set(["佚名", "无", "原创", "网络", "其他", "互联网"])
 
@@ -53,11 +64,11 @@ const popVars = computed(() => ({
 <template>
   <div v-if="quote" class="hitokoto">
     <Icon icon="ph:quotes-fill" class="mark" :width="22" />
-    <n-popover trigger="click" placement="bottom-end" :width="420">
+    <n-popover trigger="hover" placement="bottom-end" :width="420" :disabled="!clipped">
       <template #trigger>
         <!-- 出处写在句子前面是为了浮动：它得先于文字出现，才能被 ::before 顶到第二行末尾 -->
-        <div class="body" title="点一下看全文">
-          <div class="sentence">
+        <div class="body">
+          <div ref="sentenceRef" class="sentence">
             <span v-if="source" class="source">—— {{ source }}</span
             >{{ quote.hitokoto }}
           </div>
@@ -107,7 +118,6 @@ const popVars = computed(() => ({
 .body {
   min-width: 0;
   display: flex;
-  cursor: pointer;
 }
 
 .sentence {