diff --git a/src/wechat_decrypt_tool/chat_export_service.py b/src/wechat_decrypt_tool/chat_export_service.py index 1d99d91..90256ae 100644 --- a/src/wechat_decrypt_tool/chat_export_service.py +++ b/src/wechat_decrypt_tool/chat_export_service.py @@ -342,9 +342,297 @@ def _iter_chat_history_media_refs(record_item: str) -> list[tuple[str, str]]: """.strip() +_MOBILE_EXPORT_CSS = """ +/* 离线导出页的移动端布局：桌面端保留三栏结构，窄屏切换为微信式聊天界面。 */ +.wce-mobile-back, +.wce-mobile-sessions-toggle, +.wce-mobile-session-heading, +.wce-mobile-tools-toggle, +.wce-mobile-tools-button { display: none; } +.wce-chat-heading { display: flex; align-items: center; min-width: 0; } + +@supports(height: 100dvh) { + .wce-root { height: 100dvh; } +} + +@media(max-width: 767px) { + html, body { width: 100%; height: 100%; overflow: hidden; } + body { background: #ededed; overscroll-behavior: none; } + .wce-root { + width: 100%; + height: 100vh; + height: 100dvh; + min-height: 0; + overflow: hidden; + } + .wce-rail { display: none !important; } + .wce-session-panel { display: none !important; } + .wce-mobile-sessions-toggle { + position: absolute; + top: env(safe-area-inset-top, 0px); + left: max(0px, env(safe-area-inset-left, 0px)); + z-index: 60; + display: block; + width: 48px; + height: 48px; + margin: 0; + opacity: 0; + cursor: pointer; + -webkit-appearance: none; + appearance: none; + } + .wce-mobile-sessions-toggle:checked ~ .wce-session-panel { + position: absolute; + inset: 0; + z-index: 50; + display: flex !important; + width: 100% !important; + max-width: none !important; + height: 100%; + border-right: 0; + } + .wce-mobile-session-heading { + position: relative; + box-sizing: content-box; + display: flex; + flex: 0 0 auto; + height: 48px; + align-items: center; + justify-content: center; + padding-top: env(safe-area-inset-top, 0px); + border-bottom: 1px solid rgba(0, 0, 0, 0.08); + background: #ededed; + } + .wce-mobile-session-close { + position: absolute; + bottom: 0; + left: max(0px, env(safe-area-inset-left, 0px)); + display: flex; + width: 48px; + height: 48px; + align-items: center; + justify-content: center; + color: #181818; + } + .wce-mobile-session-title { + margin: 0; + color: #191919; + font-size: 17px; + font-weight: 600; + line-height: 1.2; + } + .wce-mobile-sessions-toggle:active ~ .wce-session-panel .wce-mobile-session-close, + .wce-mobile-sessions-toggle:not(:checked):active ~ .wce-chat-area .wce-mobile-back { opacity: 0.45; } + .wce-mobile-sessions-toggle:focus-visible ~ .wce-session-panel .wce-mobile-session-close, + .wce-mobile-sessions-toggle:not(:checked):focus-visible ~ .wce-chat-area .wce-mobile-back { + border-radius: 6px; + outline: 2px solid rgba(7, 193, 96, 0.75); + outline-offset: -5px; + } + .wce-chat-area, + .wce-chat-main, + .wce-chat-col { width: 100%; min-width: 0; } + .wce-chat-header { + position: relative; + z-index: 30; + flex: 0 0 auto; + justify-content: center; + box-sizing: content-box; + height: 48px; + min-height: 48px; + padding: env(safe-area-inset-top, 0px) 52px 0; + border-bottom: 1px solid rgba(0, 0, 0, 0.08); + background: #ededed; + } + .wce-chat-heading { width: 100%; justify-content: center; } + .wce-chat-title { + max-width: 100%; + overflow: hidden; + color: #191919; + font-size: 17px; + font-weight: 600; + line-height: 1.2; + text-align: center; + text-overflow: ellipsis; + white-space: nowrap; + } + .wce-mobile-back, + .wce-mobile-tools-button { + position: absolute; + bottom: 0; + display: flex; + width: 48px; + height: 48px; + align-items: center; + justify-content: center; + color: #181818; + -webkit-tap-highlight-color: transparent; + } + .wce-mobile-back { left: max(0px, env(safe-area-inset-left, 0px)); } + .wce-mobile-tools-toggle { + position: absolute; + right: max(0px, env(safe-area-inset-right, 0px)); + bottom: 0; + z-index: 2; + display: block; + width: 48px; + height: 48px; + margin: 0; + opacity: 0; + cursor: pointer; + -webkit-appearance: none; + appearance: none; + } + .wce-mobile-tools-button { + right: max(0px, env(safe-area-inset-right, 0px)); + padding: 0; + border: 0; + background: transparent; + cursor: pointer; + } + .wce-mobile-tools-toggle:active + .wce-mobile-tools-button { opacity: 0.45; } + .wce-mobile-tools-toggle:focus-visible + .wce-mobile-tools-button { + border-radius: 6px; + outline: 2px solid rgba(7, 193, 96, 0.75); + outline-offset: -5px; + } + .wce-chat-tools { + position: absolute; + top: 100%; + margin-top: 6px; + right: max(8px, env(safe-area-inset-right, 0px)); + left: max(8px, env(safe-area-inset-left, 0px)); + z-index: 40; + display: none; + max-height: calc(100dvh - 72px - env(safe-area-inset-top, 0px)); + overflow-y: auto; + flex-direction: column; + align-items: stretch; + gap: 10px; + padding: 12px; + border: 1px solid rgba(0, 0, 0, 0.08); + border-radius: 8px; + background: rgba(255, 255, 255, 0.98); + box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18); + } + .wce-mobile-tools-toggle:checked ~ .wce-chat-tools { display: flex; } + .wce-tool-group { display: flex; width: 100%; gap: 6px; } + .wce-tool-input, + .wce-tool-btn, + .message-filter-select { min-height: 36px; font-size: 13px; } + .wce-tool-input { min-width: 0; flex: 1 1 auto; background: #f7f7f7; } + .wce-tool-search, + .wce-tool-date { width: auto; max-width: none; } + .wce-tool-status { max-width: 72px; flex: 0 1 auto; } + .message-filter-select { + width: 100%; + padding: 0 10px; + border: 1px solid #d1d5db; + background: #f7f7f7; + } + #messageContainer { + padding: 14px 10px max(34px, env(safe-area-inset-bottom, 0px)); + overflow-x: hidden; + overscroll-behavior-y: contain; + -webkit-overflow-scrolling: touch; + } + .wce-pager { padding: 2px 0 16px; } + .wce-msg-row { margin-bottom: 18px; } + .wce-msg { max-width: 100%; min-width: 0; } + .wce-avatar { width: 40px; height: 40px; border-radius: 5px; } + .wce-avatar-sent { margin-left: 8px; } + .wce-avatar-received { margin-right: 8px; } + .wce-msg-content { + min-width: 0; + max-width: calc(100vw - 68px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)); + } + .msg-bubble, + .wce-bubble { + max-width: min(72vw, 320px); + padding: 9px 12px; + font-size: 16px; + line-height: 1.45; + } + .wechat-special-card, + .wechat-voice-wrapper, + .wechat-voice-transcript, + .wce-file, + .wce-audio, + .wce-media-img, + .wce-video-wrap, + .wce-video-thumb { max-width: 100%; } + .wce-msg-content > .absolute { display: none; } + .wce-system { margin: 12px 0; } + .wce-brand-attribution { + right: max(6px, env(safe-area-inset-right, 0px)); + bottom: max(5px, env(safe-area-inset-bottom, 0px)); + max-width: calc(100vw - 12px); + padding: 4px 8px; + font-size: 9px; + } + + .wce-index { height: 100vh; height: 100dvh; overflow-y: auto; background: #f7f7f7; } + .wce-index-container { max-width: none; padding: 0 0 max(34px, env(safe-area-inset-bottom, 0px)); } + .wce-index-heading { + position: sticky; + top: 0; + z-index: 10; + display: flex; + box-sizing: content-box; + height: 48px; + align-items: center; + justify-content: center; + padding: env(safe-area-inset-top, 0px) 16px 0; + border-bottom: 1px solid rgba(0, 0, 0, 0.08); + background: #ededed; + } + .wce-index-title { + max-width: 100%; + margin: 0; + overflow: hidden; + font-size: 17px; + font-weight: 600; + line-height: 1.2; + text-align: center; + text-overflow: ellipsis; + white-space: nowrap; + } + .wce-index-heading .wce-index-sub { display: none; } + .wce-index-card { border: 0; border-radius: 0; background: #fff; } + .wce-index-item { + min-height: 68px; + gap: 12px; + padding: 9px 12px; + border-bottom-color: #ededed; + } + .wce-session-avatar { width: 48px; height: 48px; border-radius: 5px; } + .wce-session-name { font-size: 16px; font-weight: 500; } + .wce-session-sub { margin-top: 3px; font-size: 13px; color: #999; } + .wce-index-container > .wce-index-sub { margin: 14px 16px 0 !important; line-height: 1.55; } +} + +@media(max-width: 374px) { + .wce-tool-status { display: none; } + .msg-bubble, + .wce-bubble { max-width: 70vw; } + .wce-brand-attribution span:first-of-type, + .wce-brand-dot { display: none; } +} + +@media(prefers-reduced-motion: reduce) { + .wce-mobile-back, + .wce-mobile-tools-toggle + .wce-mobile-tools-button { transition: none; } +} +""".strip() + + def _load_ui_css_bundle(*, ui_public_dir: Optional[Path], report: dict[str, Any]) -> str: del ui_public_dir, report - return f'{_native_export_css("chat").rstrip()}\n{_VOICE_TRANSCRIPT_EXPORT_CSS}\n' + return ( + f'{_native_export_css("chat").rstrip()}\n' + f'{_VOICE_TRANSCRIPT_EXPORT_CSS}\n' + f'{_MOBILE_EXPORT_CSS}\n' + ) @functools.lru_cache(maxsize=1) @@ -659,6 +947,7 @@ def _native_json_list( def _html_export_runtime_js(native_integrity: Any) -> str: + # 原生运行时会参与导出页的自校验，必须逐字节保持原样。 return _native_text(native_integrity, "runtime_js") @@ -2123,7 +2412,7 @@ def esc_attr(v: Any) -> str: parts.append('\n') parts.append("\n") parts.append(' \n') - parts.append(' \n') + parts.append(' \n') parts.append(f" {esc_text(archive_title)}导出\n") html_assets = dict(job.options.get("_htmlAssets") or {}) css_asset_path = str(html_assets.get("cssPath") or _html_export_asset_paths(job.export_id)[0]) @@ -2146,10 +2435,12 @@ def esc_attr(v: Any) -> str: ) parts.append('
\n') parts.append('
\n') - parts.append(f'

{esc_text(archive_title)}导出（HTML）

\n') + parts.append('
\n') + parts.append(f'

{esc_text(archive_title)}导出（HTML）

\n') parts.append( - f'

账号: {esc_text("hidden" if privacy_mode else account_dir.name)} · 会话数: {len(html_index_items)} · 导出时间: {esc_text(_now_iso())}

\n' + f'

账号: {esc_text("hidden" if privacy_mode else account_dir.name)} · 会话数: {len(html_index_items)} · 导出时间: {esc_text(_now_iso())}

\n' ) + parts.append("
\n") parts.append('
\n') for item in html_index_items: @@ -4821,7 +5112,7 @@ def flush(self) -> None: tw.write('\n') tw.write("\n") tw.write(' \n') - tw.write(' \n') + tw.write(' \n') tw.write(f" {esc_text(page_title)}\n") tw.write(_html_export_gate_style()) # Do not use native `integrity=` for offline file:// exports; Chrome blocks @@ -4838,6 +5129,7 @@ def flush(self) -> None: # Root tw.write('
\n') + tw.write(' \n') # Left rail (avatar + chat icon) tw.write( @@ -4877,8 +5169,16 @@ def flush(self) -> None: # Middle session list (all exported conversations) tw.write( - '
\n' + '
\n' ) + tw.write('
\n') + tw.write(' \n") + tw.write('

聊天

\n') + tw.write("
\n") tw.write('
\n') tw.write( '
\n' @@ -4987,11 +5287,22 @@ def flush(self) -> None: tw.write('
\n') tw.write('
\n') - tw.write('
\n') - tw.write('
\n') - tw.write(f'

{esc_text(chat_title)}

\n') + tw.write('
\n') + tw.write(' \n") + tw.write('
\n') + tw.write(f'

{esc_text(chat_title)}

\n') tw.write("
\n") - tw.write('
\n') + tw.write(' \n') + tw.write(' \n") + tw.write('
\n') tw.write('
\n') tw.write(' \n') tw.write(' \n') @@ -5246,7 +5557,7 @@ def _mark_exported() -> None: tw.write(" " + build_avatar_html(src=avatar_src, fallback_text=fallback_char, extra_class=avatar_extra) + "\n") align_cls = "items-end" if is_sent else "items-start" - tw.write(f'
\n') + tw.write(f'
\n') if conv_is_group and (not is_sent) and display_name: tw.write(f'
{esc_text(display_name)}
\n') diff --git a/tests/test_chat_export_html_format.py b/tests/test_chat_export_html_format.py index 0bcdb46..1edb75c 100644 --- a/tests/test_chat_export_html_format.py +++ b/tests/test_chat_export_html_format.py @@ -33,6 +33,29 @@ def _reload_export_modules(self): importlib.reload(chat_export_service) return chat_export_service + def test_mobile_export_assets_define_responsive_contract(self): + svc = self._reload_export_modules() + css_text = svc._minify_css_for_export(svc._MOBILE_EXPORT_CSS) + + self.assertIn("@media(max-width:767px)", css_text) + self.assertIn(".wce-rail{display:none !important}", css_text) + self.assertIn(".wce-mobile-sessions-toggle:checked~.wce-session-panel", css_text) + self.assertIn("display:flex !important", css_text) + self.assertIn(".wce-mobile-tools-toggle:checked~.wce-chat-tools", css_text) + self.assertIn("height:48px", css_text) + self.assertIn("height:100dvh", css_text) + self.assertIn("env(safe-area-inset-bottom,0px)", css_text) + self.assertNotIn("calc(48px+env", css_text) + + def test_html_export_runtime_keeps_native_integrity_payload_unchanged(self): + svc = self._reload_export_modules() + native_integrity = svc._load_wce_integrity_native() + + self.assertEqual( + svc._html_export_runtime_js(native_integrity), + svc._native_text(native_integrity, "runtime_js"), + ) + def _seed_contact_db(self, path: Path, *, account: str, username: str) -> None: conn = sqlite3.connect(str(path)) try: @@ -349,7 +372,20 @@ def test_html_export_contains_index_and_conversation_page(self): html_path = next((n for n in names if n.endswith("/messages.html")), "") self.assertTrue(html_path) + index_text = zf.read("index.html").decode("utf-8") html_text = zf.read(html_path).decode("utf-8") + self.assertIn("viewport-fit=cover", index_text) + self.assertIn('class="wce-index-heading"', index_text) + self.assertIn("viewport-fit=cover", html_text) + self.assertIn('class="wce-mobile-back"', html_text) + self.assertIn('id="wceMobileSessionsToggle"', html_text) + self.assertIn('id="wceSessionPanel"', html_text) + self.assertIn('for="wceMobileSessionsToggle"', html_text) + self.assertNotIn('class="wce-mobile-back" href=', html_text) + self.assertIn('id="wceMobileToolsToggle"', html_text) + self.assertIn('for="wceMobileToolsToggle"', html_text) + self.assertIn('id="wceChatTools"', html_text) + self.assertIn("wce-msg-content", html_text) self.assertIn('data-wce-rail-avatar="1"', html_text) self.assertIn('data-wce-session-list="1"', html_text) self.assertIn('id="sessionSearchInput"', html_text) @@ -395,6 +431,11 @@ def test_html_export_contains_index_and_conversation_page(self): self.assertIn(".wechat-voip-icon--video", css_text) self.assertIn(".wechat-voip-icon--mirrored", css_text) self.assertNotIn("wechat-transfer-card[data-v-", css_text) + self.assertIn("@media(max-width:767px)", css_text) + self.assertIn('.wce-mobile-sessions-toggle:checked~.wce-session-panel', css_text) + self.assertIn('.wce-mobile-tools-toggle:checked~.wce-chat-tools', css_text) + self.assertIn("env(safe-area-inset-bottom,0px)", css_text) + self.assertIn("height:100dvh", css_text) self.assertIn("assets/images/wechat/wechat-audio-call.svg", names) self.assertIn("assets/images/wechat/wechat-video-call.svg", names) @@ -403,6 +444,7 @@ def test_html_export_contains_index_and_conversation_page(self): js_text = zf.read(js_asset).decode("utf-8", errors="ignore") self.assertIn("Function", js_text) self.assertIn("atob", js_text) + self.assertNotIn("wceMobileToolsToggle", js_text) self.assertNotIn("wechat-voice-bubble", js_text) self.assertNotIn("voice-playing", js_text) self.assertNotIn("data-wce-quote-voice-btn", js_text)