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;
- }
}