diff --git a/src/components/SubtitlePanel.vue b/src/components/SubtitlePanel.vue index 13544ef..03447c5 100644 --- a/src/components/SubtitlePanel.vue +++ b/src/components/SubtitlePanel.vue @@ -135,39 +135,12 @@
{{ msg.content }}
- @@ -202,76 +175,14 @@ class="merged-bubble" >
-
+
{{ pair.user.content }}
-
-
+
{{ pair.ai.content }}
-
@@ -391,29 +302,6 @@ const scrollAIToBottom = () => { } }; -// ===== 长文本折叠/展开 ===== -const COLLAPSE_THRESHOLD = 120; // 超过120字符视为长文本 -const collapsedIds = ref>(new Set()); -const msgRefs = new Map(); - -const isLongText = (text: string): boolean => text.length > COLLAPSE_THRESHOLD; - -const isCollapsed = (id: string): boolean => collapsedIds.value.has(id); - -const toggleCollapse = (id: string) => { - if (collapsedIds.value.has(id)) { - collapsedIds.value.delete(id); - } else { - collapsedIds.value.add(id); - } - // 触发响应式更新 - collapsedIds.value = new Set(collapsedIds.value); -}; - -const setMsgRef = (id: string, el: any) => { - if (el) msgRefs.set(id, el as HTMLElement); -}; - // ===== 下拉框 ===== const modeOptions = [ { value: "ai-only" as SubtitleMode, label: "AI字幕", icon: "💬" }, @@ -532,21 +420,10 @@ watch( }, ); -// 消息变化时:自动滚动到底部 + 新消息默认折叠 +// 消息变化时:自动滚动到底部 watch( () => props.messages.length, - (newLen, oldLen) => { - // 新增的消息默认折叠 - if (newLen > (oldLen ?? 0)) { - for (let i = oldLen ?? 0; i < newLen; i++) { - const msg = props.messages[i]; - if (msg && isLongText(msg.content)) { - collapsedIds.value.add(msg.id); - } - } - collapsedIds.value = new Set(collapsedIds.value); - } - + () => { nextTick(() => { scrollToBottom(); }); @@ -861,45 +738,6 @@ const scrollToBottom = () => { color: #ffffff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } - - &.collapsed { - max-height: 4.8em; - position: relative; - - &::after { - content: ""; - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 2em; - background: linear-gradient(transparent, rgba(10, 14, 30, 0.5)); - pointer-events: none; - border-radius: 0 0 8px 8px; - } - } -} - -/* ===== 展开/收起按钮 ===== */ -.expand-btn { - display: inline-flex; - align-items: center; - gap: 4px; - margin-top: 6px; - padding: 3px 10px; - background: rgba(255, 255, 255, 0.06); - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 6px; - color: rgba(255, 255, 255, 0.55); - font-size: 11px; - cursor: pointer; - transition: all 0.2s; - - &:hover { - background: rgba(255, 255, 255, 0.1); - color: rgba(255, 255, 255, 0.8); - border-color: rgba(255, 255, 255, 0.2); - } } /* ===== 模式3:合并气泡 ===== */ @@ -946,22 +784,6 @@ const scrollToBottom = () => { color: #ffffff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } - - &.collapsed { - max-height: 4.8em; - position: relative; - - &::after { - content: ""; - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 2em; - background: linear-gradient(transparent, rgba(10, 14, 30, 0.5)); - pointer-events: none; - } - } } /* ===== 1440×2560 分辨率专用样式 ===== */ @@ -991,12 +813,6 @@ const scrollToBottom = () => { font-weight: 500; } - /* 三级辅助:展开按钮 */ - .expand-btn { - font-size: 17px; - padding: 6px 18px; - } - /* 字幕容器:背景与边框适配大字号 */ .ai-subtitle-bar { padding: 18px 24px; @@ -1076,16 +892,5 @@ const scrollToBottom = () => { .bubble-text { font-size: 28px !important; } - - /* 折叠高度适配(按新字号比例) */ - .bubble-text.collapsed, - .merged-text.collapsed { - max-height: 6em; - } - - .bubble-text.collapsed::after, - .merged-text.collapsed::after { - height: 3em; - } }