// ==UserScript== // @name 珠宝AI 移动端适配 // @namespace https://zbai.art/ // @version 0.7.5-fixed // @description 将 zbai.art 首页、模板页与 PC 图片创作工作区适配为手机浏览器可用的纵向布局。修复立即创作点击问题。 // @author Codex // @match https://zbai.art/* // @match https://www.zbai.art/* // @match https://jew.haistudio.ai/* // @run-at document-start // @grant none // ==/UserScript== (function () { 'use strict'; const STYLE_ID = 'zbai-mobile-adapter-style'; const CLASS_READY = 'zbai-mobile-adapted'; const SHEET_ID = 'zbai-mobile-bottom-sheet'; const BADGE_ID = 'zbai-mobile-adapter-badge'; const WORK_PREVIEW_ID = 'zbai-work-preview-overlay'; const WORK_FALLBACK_ID = 'zbai-work-detail-fallback'; const STYLE_PANEL_ID = 'zbai-style-panel'; const HIDDEN_ATTR = 'data-zbai-mobile-hidden'; const MOBILE_QUERY = '(max-width: 768px), (pointer: coarse), (max-device-width: 820px)'; const HISTORY_URL = 'https://zbai.art/index/mine-homepage'; const HOME_TOOL_ACTIONS = [ { key: 'image', label: '图片创作', nativeLabel: '图片创作', eyebrow: 'Image', href: '/create/module/image', fallbackHref: '/create', desc: '生成首饰海报、商品图和创意画面' }, { key: 'video', label: '视频创作', nativeLabel: '视频创作', eyebrow: 'Video', href: '/create/module/video', fallbackHref: '/video_create_video', desc: '制作运镜展示、旋转视频和短片素材' }, ]; const TEMPLATE_ACTIONS = [ { label: '珠宝海报', href: '/create/ai-effects/jewelry-poster', tag: '海报', desc: '快速生成东方美学商品海报' }, { label: '道具展示', href: '/create/ai-effects/jewelry-display', tag: '展示', desc: '为首饰匹配托盘、布景与道具' }, { label: '社交媒体图', href: '/create/ai-effects/social-media', tag: '种草', desc: '小红书、朋友圈风格内容图' }, { label: '大片模特', href: '/create/ai-effects/jewelry-models-display', tag: '模特', desc: '真人佩戴与商业大片画面' }, { label: '珠宝纯净图', href: '/create/ai-effects/jewelry-background', tag: '底图', desc: '白底、黑底和纯净背景图' }, { label: '精致摄影', href: '/create/ai-effects/finephotograph', tag: '摄影', desc: '高级光影、倒影和质感摄影' }, { label: '布料与珠宝', href: '/create/ai-effects/jewelry-cloth', tag: '布料', desc: '丝绸、天鹅绒等材质布景' }, { label: '珠宝多视角', href: '/create/ai-effects/jewelry-multiview', tag: '视角', desc: '多角度展示结构与细节' }, { label: '珠宝详情页', href: '/create/ai-effects/product-details-page', tag: '详情', desc: '电商详情页视觉图' }, { label: '珠宝视频', href: '/create/ai-effects/jewelry-360-display', tag: '视频', desc: '旋转展示与火彩展示视频' }, { label: '运镜展示', href: '/create/ai-effects/jewvideo2', tag: '运镜', desc: '短视频场景与动态运镜' }, ]; const selectors = { root: '#pictureEditor', textArea: 'textarea.textarea-buttons, textarea.ant-input', modelWrap: '.ChooseModelWithDetails_ChooseModelWithDetails__m_Cbs', }; window.__ZBAI_MOBILE_ADAPTER_VERSION__ = '0.7.5-fixed'; const media = window.matchMedia(MOBILE_QUERY); function isMobile() { const physicalWidth = Math.min(window.screen.width || window.innerWidth, window.screen.height || window.innerHeight); const hasTouch = navigator.maxTouchPoints > 0 || 'ontouchstart' in window; return media.matches || window.innerWidth <= 768 || (hasTouch && physicalWidth <= 820); } function injectStyles() { let style = document.getElementById(STYLE_ID); const shouldAppend = !style; if (!style) style = document.createElement('style'); style.id = STYLE_ID; style.textContent = ` @media (max-width: 768px), (pointer: coarse), (max-device-width: 820px) { html[data-zbai-mobile="1"], html[data-zbai-mobile="1"] body#haimeta { width: 100vw !important; min-width: 0 !important; min-height: 100dvh !important; overflow-x: hidden !important; -webkit-text-size-adjust: 100% !important; } html[data-zbai-mobile="1"][data-zbai-page="editor"], html[data-zbai-mobile="1"][data-zbai-page="editor"] body#haimeta { height: 100dvh !important; overflow: hidden !important; overscroll-behavior: none !important; } html[data-zbai-mobile="1"] #haimeta *, html[data-zbai-mobile="1"] #haimeta *::before, html[data-zbai-mobile="1"] #haimeta *::after { box-sizing: border-box !important; } html[data-zbai-mobile="1"] img, html[data-zbai-mobile="1"] video, html[data-zbai-mobile="1"] canvas { opacity: 1 !important; filter: none !important; -webkit-filter: none !important; mix-blend-mode: normal !important; background-blend-mode: normal !important; image-rendering: auto !important; } html[data-zbai-mobile="1"] [data-zbai-mobile-hidden="1"] { display: none !important; visibility: hidden !important; pointer-events: none !important; } html[data-zbai-mobile="1"] #zbai-mobile-home-shell [data-zbai-mobile-hidden="1"], html[data-zbai-mobile="1"] #zbai-mobile-history-shell [data-zbai-mobile-hidden="1"] { display: revert !important; visibility: visible !important; pointer-events: auto !important; } html[data-zbai-mobile="1"], html[data-zbai-mobile="1"] body { overflow-x: hidden !important; } html[data-zbai-mobile="1"] #zbai-account-bar { position: fixed !important; right: 10px !important; top: calc(8px + env(safe-area-inset-top, 0px)) !important; z-index: 10038 !important; display: inline-grid !important; grid-template-columns: minmax(0, auto) auto auto !important; align-items: center !important; gap: 6px !important; width: auto !important; max-width: min(68vw, 290px) !important; min-height: 34px !important; padding: 5px 7px !important; border-radius: 17px !important; background: rgba(255,255,255,.88) !important; box-shadow: 0 4px 14px rgba(20,24,38,.08) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; color: #202333 !important; font: 600 12px/18px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } html[data-zbai-mobile="1"] #zbai-account-bar .zbai-account-info { min-width: 0 !important; max-width: 116px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html[data-zbai-mobile="1"] #zbai-account-bar button { min-width: 48px !important; height: 26px !important; border: 0 !important; border-radius: 13px !important; padding: 0 9px !important; background: #eef0f7 !important; color: #202333 !important; font: 700 12px/26px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } html[data-zbai-mobile="1"] #zbai-account-bar [data-action="history"] { display: none !important; } html[data-zbai-mobile="1"] #zbai-history-button { position: fixed !important; right: 12px !important; top: calc(60px + env(safe-area-inset-top, 0px)) !important; z-index: 10042 !important; min-width: 64px !important; height: 32px !important; border: 1px solid rgba(255,255,255,.56) !important; border-radius: 16px !important; padding: 0 10px !important; background: rgba(17,18,13,.88) !important; color: #fff !important; box-shadow: 0 8px 22px rgba(20,24,38,.16) !important; font: 800 12px/32px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; touch-action: manipulation !important; } html[data-zbai-mobile="1"][data-zbai-page="home"] #root { display: none !important; } html[data-zbai-mobile="1"][data-zbai-page="home"][data-zbai-login-open="1"] #root { display: block !important; } html[data-zbai-mobile="1"][data-zbai-page="home"][data-zbai-login-open="1"] #zbai-mobile-home-shell { display: none !important; } html[data-zbai-mobile="1"] #zbai-mobile-home-shell { display: block !important; position: fixed !important; inset: 0 !important; z-index: 10025 !important; width: 100vw !important; height: 100dvh !important; min-height: 100dvh !important; padding: calc(14px + env(safe-area-inset-top, 0px)) 14px calc(190px + env(safe-area-inset-bottom, 0px)) !important; background: radial-gradient(circle at 18% 0%, rgba(219,196,139,.18), transparent 30%), linear-gradient(180deg, #f7f8fb 0%, #eef1f7 100%) !important; color: #151821 !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior-y: contain !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } html[data-zbai-mobile="1"] .zbai-mobile-topbar { display: grid !important; grid-template-columns: auto minmax(0,1fr) auto !important; align-items: center !important; gap: 10px !important; min-height: 42px !important; margin-bottom: 16px !important; } html[data-zbai-mobile="1"] .zbai-mobile-menu-button { width: 38px !important; height: 38px !important; border: 0 !important; border-radius: 19px !important; display: grid !important; place-items: center !important; background: rgba(255,255,255,.86) !important; color: #151821 !important; box-shadow: 0 8px 22px rgba(21,24,33,.08) !important; font: 900 22px/38px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; touch-action: manipulation !important; } html[data-zbai-mobile="1"] .zbai-mobile-brand { display: flex !important; align-items: center !important; min-width: 0 !important; gap: 8px !important; font-weight: 800 !important; } html[data-zbai-mobile="1"] .zbai-mobile-brand img { width: auto !important; max-width: min(168px,48vw) !important; max-height: 34px !important; object-fit: contain !important; } html[data-zbai-mobile="1"] .zbai-mobile-auth { display: inline-flex !important; align-items: center !important; gap: 6px !important; max-width: 58vw !important; min-height: 34px !important; padding: 4px !important; border-radius: 18px !important; background: rgba(255,255,255,.78) !important; box-shadow: 0 8px 24px rgba(21,24,33,.08) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; } html[data-zbai-mobile="1"] .zbai-mobile-auth-info { display: none !important; max-width: 88px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; padding-left: 6px !important; color: #4d5363 !important; font: 700 11px/16px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } html[data-zbai-mobile="1"] .zbai-mobile-auth[data-logged-in="1"] .zbai-mobile-auth-info { display: block !important; } html[data-zbai-mobile="1"] .zbai-mobile-pill-button { height: 30px !important; border: 0 !important; border-radius: 15px !important; padding: 0 13px !important; background: #11120d !important; color: #fff !important; font: 800 13px/30px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; white-space: nowrap !important; touch-action: manipulation !important; } html[data-zbai-mobile="1"] .zbai-mobile-pill-button[data-action="history"] { background: #eef0f7 !important; color: #202333 !important; } html[data-zbai-mobile="1"] .zbai-mobile-section-title { margin: 20px 0 12px !important; display: flex !important; align-items: baseline !important; justify-content: space-between !important; gap: 8px !important; width: 100% !important; min-height: 30px !important; visibility: visible !important; } html[data-zbai-mobile="1"] .zbai-mobile-section-title strong { font: 900 24px/30px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } html[data-zbai-mobile="1"] .zbai-mobile-section-title small { color: #6f7584 !important; font: 700 12px/18px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } html[data-zbai-mobile="1"] .zbai-mobile-tool-grid, html[data-zbai-mobile="1"] .zbai-mobile-template-grid { display: grid !important; visibility: visible !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 12px !important; } html[data-zbai-mobile="1"] .zbai-mobile-tool-card, html[data-zbai-mobile="1"] .zbai-mobile-template-card { position: relative !important; display: block !important; visibility: visible !important; width: 100% !important; height: auto !important; border: 1px solid rgba(255,255,255,.72) !important; border-radius: 18px !important; background: rgba(255,255,255,.84) !important; color: #141722 !important; box-shadow: 0 12px 30px rgba(38,45,65,.08) !important; overflow: hidden !important; text-align: left !important; touch-action: manipulation !important; cursor: pointer !important; pointer-events: auto !important; -webkit-tap-highlight-color: transparent !important; } html[data-zbai-mobile="1"] .zbai-mobile-tool-card { min-height: 124px !important; padding: 18px !important; } html[data-zbai-mobile="1"] .zbai-mobile-template-card { min-height: 104px !important; padding: 14px !important; } html[data-zbai-mobile="1"] .zbai-mobile-tool-card small, html[data-zbai-mobile="1"] .zbai-mobile-template-card small { display: block !important; color: #757b89 !important; font: 800 12px/17px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } html[data-zbai-mobile="1"] .zbai-mobile-tool-card strong { display: block !important; margin-top: 8px !important; font: 900 22px/27px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } html[data-zbai-mobile="1"] .zbai-mobile-tool-card span { display: block !important; margin-top: 8px !important; color: #5b6070 !important; font: 600 12px/18px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } html[data-zbai-mobile="1"] .zbai-mobile-template-tag { display: inline-flex !important; align-items: center !important; height: 22px !important; padding: 0 8px !important; border-radius: 11px !important; background: rgba(17,18,13,.07) !important; color: #606676 !important; font: 800 11px/22px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } html[data-zbai-mobile="1"] .zbai-mobile-template-card strong { display: block !important; margin-top: 10px !important; color: #171a22 !important; font: 900 17px/22px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } html[data-zbai-mobile="1"] .zbai-mobile-template-card small { margin-top: 5px !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } html[data-zbai-mobile="1"][data-zbai-page="home"] #zbai-account-bar, html[data-zbai-mobile="1"][data-zbai-page="editor"] #zbai-account-bar, html[data-zbai-mobile="1"][data-zbai-page="history"] #zbai-account-bar, html[data-zbai-mobile="1"][data-zbai-page="home"] #zbai-history-button, html[data-zbai-mobile="1"][data-zbai-page="history"] #zbai-history-button { display: none !important; } html[data-zbai-mobile="1"][data-zbai-page="editor"] #root, html[data-zbai-mobile="1"][data-zbai-page="editor"] .PageContainer_haimetaApp__qfjGd, html[data-zbai-mobile="1"][data-zbai-page="editor"] .PageContainer_indexContent__5aBHJ, html[data-zbai-mobile="1"][data-zbai-page="editor"] #pictureEditor { width: 100vw !important; min-width: 0 !important; max-width: 100vw !important; height: 100dvh !important; min-height: 100dvh !important; overflow: hidden !important; } html[data-zbai-mobile="1"][data-zbai-page="editor"] #pictureEditor { display: flex !important; flex-direction: column !important; transform: none !important; margin: 0 !important; left: 0 !important; right: auto !important; } html[data-zbai-mobile="1"] .picture-editor-header { height: calc(52px + env(safe-area-inset-top,0px)) !important; min-height: calc(52px + env(safe-area-inset-top,0px)) !important; padding-top: env(safe-area-inset-top,0px) !important; position: sticky !important; top: 0 !important; z-index: 80 !important; background: var(--Background-1-Normal,#f4f5fb) !important; } html[data-zbai-mobile="1"] #picture-editor-header { height: 52px !important; min-height: 52px !important; padding: 0 10px !important; display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; align-items: center !important; gap: 8px !important; } html[data-zbai-mobile="1"] .picture-editor-header .center { display: none !important; } html[data-zbai-mobile="1"] .picture-editor-header .left { width: auto !important; min-width: 0 !important; max-width: 100% !important; position: static !important; transform: none !important; overflow: hidden !important; } html[data-zbai-mobile="1"] .picture-editor-header .left img { max-height: 30px !important; width: auto !important; } html[data-zbai-mobile="1"] .picture-editor-header .right { width: auto !important; min-width: 0 !important; max-width: 46vw !important; position: static !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 8px !important; overflow: hidden !important; } html[data-zbai-mobile="1"] .picture-editor-content { height: calc(100dvh - 52px - env(safe-area-inset-top,0px)) !important; width: 100vw !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; position: relative !important; transform: none !important; margin: 0 !important; padding: 0 !important; left: 0 !important; right: auto !important; } html[data-zbai-mobile="1"] .picture-editor-content-left-drawer, html[data-zbai-mobile="1"] .PictureEditorHistoryDrawer_container__fn3Ud, html[data-zbai-mobile="1"] .TaskSide_record__JuEDU { display: none !important; } html[data-zbai-mobile="1"] .picture-editor-content-box { width: 100vw !important; min-width: 0 !important; height: 100% !important; margin: 0 !important; left: auto !important; right: auto !important; transform: none !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; position: relative !important; } html[data-zbai-mobile="1"] .picture-editor-content-render { width: 100vw !important; min-width: 0 !important; flex: 0 0 auto !important; min-height: 104px !important; max-height: 28dvh !important; height: 18dvh !important; padding: 6px 10px !important; margin: 0 !important; left: 0 !important; right: auto !important; transform: none !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: auto !important; -webkit-overflow-scrolling: touch !important; } html[data-zbai-mobile="1"] .picture-editor-content-render:has(img:not([src*="loading"])), html[data-zbai-mobile="1"] .picture-editor-content-render:has(canvas), html[data-zbai-mobile="1"] .picture-editor-content-render:has(video) { height: 34dvh !important; max-height: 42dvh !important; } html[data-zbai-mobile="1"] .picture-editor-content-render > * { max-width: 100% !important; max-height: 100% !important; } html[data-zbai-mobile="1"] .picture-editor-content-control { width: 100vw !important; min-width: 0 !important; max-width: 100vw !important; flex: 1 1 auto !important; max-height: none !important; min-height: 0 !important; height: auto !important; margin: 0 !important; left: 0 !important; right: auto !important; transform: none !important; padding: 12px 12px calc(180px + env(safe-area-inset-bottom,0px)) !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; border-radius: 18px 18px 0 0 !important; background: var(--Background-2-Normal,#f1f2f8) !important; box-shadow: 0 -10px 30px rgba(20,24,38,.08) !important; } html[data-zbai-mobile="1"] .PictureEditorControl_PictureEditorControl__T6FHN { width: 100% !important; min-width: 0 !important; height: auto !important; padding: 12px 0 0 !important; } html[data-zbai-mobile="1"] .control-config { width: 100% !important; height: auto !important; display: flex !important; flex-direction: column !important; gap: 12px !important; } html[data-zbai-mobile="1"] .control-config > div, html[data-zbai-mobile="1"] .option-need-margin { width: 100% !important; margin: 0 !important; } html[data-zbai-mobile="1"] .control-config-title { width: 100% !important; height: auto !important; min-height: 24px !important; margin: 0 0 8px !important; line-height: 24px !important; position: relative !important; z-index: 1 !important; white-space: normal !important; word-break: keep-all !important; transform: none !important; translate: none !important; } html[data-zbai-mobile="1"] .control-config-input { width: 100% !important; min-width: 0 !important; margin-top: 6px !important; position: relative !important; z-index: 1 !important; transform: none !important; translate: none !important; } html[data-zbai-mobile="1"] #multifunctional-input { width: 100% !important; height: auto !important; } html[data-zbai-mobile="1"] .MultifunctionalInput_multifunctionalInput__NHcuq { width: 100% !important; min-height: 108px !important; height: auto !important; } html[data-zbai-mobile="1"] .MultifunctionalInput_multifunctionalInput__NHcuq .bg-1, html[data-zbai-mobile="1"] .MultifunctionalInput_multifunctionalInput__NHcuq .bg-2 { display: none !important; } html[data-zbai-mobile="1"] .Input_input__A9sVA, html[data-zbai-mobile="1"] .input-box, html[data-zbai-mobile="1"] textarea.textarea-buttons, html[data-zbai-mobile="1"] textarea.ant-input { width: 100% !important; } html[data-zbai-mobile="1"] textarea.textarea-buttons, html[data-zbai-mobile="1"] textarea.ant-input { min-height: 92px !important; max-height: 160px !important; font-size: 16px !important; line-height: 1.45 !important; } html[data-zbai-mobile="1"] .ChooseModelWithDetails_ChooseModelWithDetails__m_Cbs, html[data-zbai-mobile="1"] .ChooseModelWithDetails_selectBox__HoIuc, html[data-zbai-mobile="1"] .ChooseModelWithDetails_selectItem__7NA37 { width: 100% !important; min-height: 56px !important; height: auto !important; } html[data-zbai-mobile="1"] .ChooseSizeBase_chooseSizeBase__KgHNI, html[data-zbai-mobile="1"] .choose-size-base-shape { width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; display: flex !important; gap: 8px !important; -webkit-overflow-scrolling: touch !important; scroll-snap-type: x proximity !important; } html[data-zbai-mobile="1"] .choose-size-base-shape > div, html[data-zbai-mobile="1"] .shape-item, html[data-zbai-mobile="1"] .shape-item .item { flex: 0 0 64px !important; width: 64px !important; height: 60px !important; scroll-snap-align: start !important; } html[data-zbai-mobile="1"] .ControlBottom_controlBottom__gooOU, html[data-zbai-mobile="1"] .generate-button-container, html[data-zbai-mobile="1"] .control-buttons { width: 100% !important; height: auto !important; min-height: 50px !important; margin-top: 10px !important; position: relative !important; bottom: auto !important; z-index: 2 !important; background: var(--Background-2-Normal,#f1f2f8) !important; transform: none !important; box-shadow: none !important; pointer-events: auto !important; touch-action: manipulation !important; } html[data-zbai-mobile="1"] .generate-button-container button { width: 100% !important; min-height: 52px !important; border-radius: 16px !important; background: #11120d !important; color: #fff !important; box-shadow: 0 14px 34px rgba(17,18,13,.18) !important; pointer-events: auto !important; touch-action: manipulation !important; font-size: 15px !important; } html[data-zbai-mobile="1"] .generate-button-container button *, html[data-zbai-mobile="1"] .ControlBottom_controlBottom__gooOU button *, html[data-zbai-mobile="1"] .generate-button-container [class*="score" i], html[data-zbai-mobile="1"] .generate-button-container [class*="cost" i], html[data-zbai-mobile="1"] .generate-button-container i { display: inline-flex !important; opacity: 1 !important; visibility: visible !important; color: inherit !important; } html[data-zbai-mobile="1"] .ChooseNumber_ChooseNumber__J1uo_, html[data-zbai-mobile="1"] .choose-number-content { width: 100% !important; } html[data-zbai-mobile="1"] .choose-number-content { display: grid !important; grid-template-columns: auto minmax(120px,1fr) !important; align-items: center !important; gap: 12px !important; } html[data-zbai-mobile="1"] .choose-number-options { justify-self: end !important; width: min(160px,48vw) !important; } html[data-zbai-mobile="1"] .fixed.top-0.left-0.w-screen.h-screen { padding: env(safe-area-inset-top,0px) 12px env(safe-area-inset-bottom,0px) !important; align-items: center !important; } html[data-zbai-mobile="1"] .LoginModal_LoginModal__O59AS { width: calc(100vw - 24px) !important; max-width: 420px !important; min-width: 0 !important; max-height: calc(100dvh - 48px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) !important; overflow-y: auto !important; border-radius: 18px !important; } html[data-zbai-mobile="1"][data-zbai-login-open="1"] .fixed.top-0.left-0.w-screen.h-screen, html[data-zbai-mobile="1"][data-zbai-login-open="1"] .LoginModal_LoginModal__O59AS, html[data-zbai-mobile="1"][data-zbai-login-open="1"] [class*="LoginModal"] { display: flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } html[data-zbai-mobile="1"][data-zbai-login-open="1"] .LoginModal_LoginModal__O59AS, html[data-zbai-mobile="1"][data-zbai-login-open="1"] [class*="LoginModal"] { display: block !important; } html[data-zbai-mobile="1"] #zbai-mobile-bottom-sheet { position: fixed !important; inset: 0 !important; z-index: 10075 !important; display: flex !important; align-items: flex-end !important; justify-content: center !important; background: rgba(12,14,20,.42) !important; } html[data-zbai-mobile="1"] #zbai-mobile-bottom-sheet[hidden] { display: none !important; } html[data-zbai-mobile="1"] .zbai-mobile-sheet-panel { width: 100vw !important; max-height: min(72dvh,560px) !important; overflow-y: auto !important; padding: 12px 14px calc(18px + env(safe-area-inset-bottom,0px)) !important; border-radius: 18px 18px 0 0 !important; background: #fff !important; color: #2e3241 !important; box-shadow: 0 -14px 38px rgba(20,24,38,.18) !important; } html[data-zbai-mobile="1"] .zbai-mobile-sheet-title { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; min-height: 40px !important; font-size: 16px !important; font-weight: 700 !important; } html[data-zbai-mobile="1"] .zbai-mobile-sheet-close { width: 36px !important; height: 36px !important; border-radius: 18px !important; background: rgba(166,172,225,.18) !important; color: inherit !important; } html[data-zbai-mobile="1"] .zbai-mobile-sheet-list { display: grid !important; gap: 8px !important; margin-top: 8px !important; } html[data-zbai-mobile="1"] .zbai-mobile-sheet-option { width: 100% !important; min-height: 48px !important; padding: 10px 12px !important; text-align: left !important; border-radius: 12px !important; background: rgba(166,172,225,.12) !important; color: inherit !important; } html[data-zbai-mobile="1"] .zbai-mobile-sheet-option strong, html[data-zbai-mobile="1"] .zbai-mobile-sheet-option small { display: block !important; } html[data-zbai-mobile="1"] .zbai-mobile-sheet-option small { margin-top: 2px !important; opacity: .68 !important; } html[data-zbai-mobile="1"] .zbai-mobile-back-button { position: fixed !important; left: 10px !important; top: calc(9px + env(safe-area-inset-top,0px)) !important; z-index: 10040 !important; width: 34px !important; height: 34px !important; border-radius: 17px !important; border: 1px solid rgba(10,10,11,.08) !important; background: rgba(255,255,255,.88) !important; color: #222637 !important; box-shadow: 0 4px 16px rgba(20,24,38,.12) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; font: 28px/30px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; text-align: center !important; padding: 0 0 3px !important; } html[data-zbai-mobile="1"] #zbai-style-panel { position: fixed !important; inset: 0 !important; z-index: 10088 !important; display: flex !important; align-items: flex-end !important; justify-content: center !important; padding: 0 8px calc(72px + env(safe-area-inset-bottom,0px)) !important; background: rgba(18,20,28,.34) !important; box-sizing: border-box !important; } html[data-zbai-mobile="1"] #zbai-style-panel[hidden] { display: none !important; } html[data-zbai-mobile="1"] .zbai-style-panel-card { width: min(100%,430px) !important; height: min(68dvh,560px) !important; max-height: calc(100dvh - 116px - env(safe-area-inset-bottom,0px)) !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; border-radius: 22px !important; background: #fff !important; color: #151821 !important; box-shadow: 0 22px 54px rgba(18,20,28,.26) !important; } html[data-zbai-mobile="1"] .zbai-style-panel-head { flex: 0 0 auto !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; padding: 10px 12px 8px !important; border-bottom: 1px solid rgba(24,28,40,.07) !important; } html[data-zbai-mobile="1"] .zbai-style-panel-head strong { font: 900 16px/22px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } html[data-zbai-mobile="1"] .zbai-style-panel-close { width: 32px !important; height: 32px !important; border: 0 !important; border-radius: 17px !important; background: #eef0f7 !important; color: #151821 !important; font: 900 22px/32px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } html[data-zbai-mobile="1"] .zbai-style-panel-cats { flex: 0 0 auto !important; display: flex !important; gap: 8px !important; padding: 8px 12px !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; } html[data-zbai-mobile="1"] .zbai-style-panel-cat { flex: 0 0 auto !important; height: 28px !important; border: 0 !important; border-radius: 15px !important; padding: 0 12px !important; background: #eef0f7 !important; color: #2e3241 !important; font: 800 12px/28px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } html[data-zbai-mobile="1"] .zbai-style-panel-list { flex: 1 1 auto !important; min-height: 0 !important; display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px !important; padding: 0 12px 12px !important; overscroll-behavior: contain !important; touch-action: pan-y !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; } html[data-zbai-mobile="1"] .zbai-style-panel-item { min-width: 0 !important; border: 0 !important; border-radius: 14px !important; padding: 0 !important; background: #f3f5fa !important; overflow: hidden !important; text-align: left !important; color: #151821 !important; } html[data-zbai-mobile="1"] .zbai-style-panel-item img, html[data-zbai-mobile="1"] .zbai-style-panel-placeholder { display: block !important; width: 100% !important; aspect-ratio: 1 / 1 !important; object-fit: cover !important; background: #edf0f7 !important; } html[data-zbai-mobile="1"] .zbai-style-panel-placeholder { display: grid !important; place-items: center !important; color: #8a91a2 !important; font: 900 26px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } html[data-zbai-mobile="1"] .zbai-style-panel-item span { display: block !important; padding: 6px 8px 7px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font: 800 12px/17px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } html[data-zbai-mobile="1"] .zbai-mobile-style-launcher { height: 30px !important; border: 0 !important; border-radius: 15px !important; padding: 0 12px !important; background: #11120d !important; color: #fff !important; font: 800 13px/30px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; white-space: nowrap !important; } html[data-zbai-mobile="1"][data-zbai-page="editor"] [data-zbai-inline-style-chooser="1"], html[data-zbai-mobile="1"][data-zbai-page="editor"] [data-zbai-inline-style-chooser="1"] .choose-style-container { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; max-height: none !important; overflow: visible !important; transform: none !important; translate: none !important; margin: 0 !important; box-sizing: border-box !important; z-index: auto !important; box-shadow: none !important; } html[data-zbai-mobile="1"][data-zbai-page="editor"] [data-zbai-inline-style-chooser="1"] .choose-style-title { position: relative !important; left: auto !important; right: auto !important; top: auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 0 0 8px !important; transform: none !important; translate: none !important; box-sizing: border-box !important; } html[data-zbai-mobile="1"][data-zbai-page="editor"] [data-zbai-inline-style-chooser="1"] .choose-style-content { width: 100% !important; max-width: 100% !important; max-height: min(58dvh,560px) !important; overflow-y: auto !important; overflow-x: hidden !important; padding-right: 2px !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important; } html[data-zbai-mobile="1"][data-zbai-page="editor"] [data-zbai-inline-style-chooser="1"] .template-list { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 10px !important; width: 100% !important; max-width: 100% !important; overflow: visible !important; } html[data-zbai-mobile="1"][data-zbai-page="editor"] [data-zbai-inline-style-chooser="1"] .template-item-wrap, html[data-zbai-mobile="1"][data-zbai-page="editor"] [data-zbai-inline-style-chooser="1"] .item { width: 100% !important; min-width: 0 !important; max-width: 100% !important; display: block !important; } html[data-zbai-mobile="1"][data-zbai-page="editor"] [data-zbai-inline-style-chooser="1"] .item-img { width: 100% !important; aspect-ratio: 1 / 1 !important; overflow: hidden !important; border-radius: 10px !important; } html[data-zbai-mobile="1"][data-zbai-page="editor"] [data-zbai-inline-style-chooser="1"] .item-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; } html[data-zbai-mobile="1"] #zbai-work-preview-overlay, html[data-zbai-mobile="1"] #zbai-work-detail-fallback { position: fixed !important; inset: 0 !important; z-index: 10090 !important; display: flex !important; flex-direction: column !important; width: 100vw !important; height: 100dvh !important; padding: calc(12px + env(safe-area-inset-top,0px)) 12px calc(16px + env(safe-area-inset-bottom,0px)) !important; background: rgba(244,246,251,.98) !important; color: #151821 !important; overflow: hidden !important; box-sizing: border-box !important; } html[data-zbai-mobile="1"] #zbai-work-preview-overlay[hidden] { display: none !important; } } `; if (shouldAppend) { const target = document.head || document.documentElement; target.appendChild(style); } } function enableMobileFlag() { document.documentElement.dataset.zbaiMobile = isMobile() ? '1' : '0'; } function ensureViewport() { if (!isMobile()) return; let viewport = document.querySelector('meta[name="viewport"]'); if (!viewport) { viewport = document.createElement('meta'); viewport.name = 'viewport'; (document.head || document.documentElement).appendChild(viewport); } viewport.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover'); } function getPageType() { if (location.pathname === '/mobile/work-detail') return 'work-detail'; if (document.querySelector('.introduction-area, [class*="introductionArea"]')) return 'work-detail'; if (location.pathname === '/index/mine-homepage') return 'history'; if (document.querySelector(selectors.root)) return 'editor'; if (document.querySelector('main.index-main, #index-main-content--right')) return 'home'; return location.pathname.startsWith('/create/') || /\/create\//.test(location.pathname) ? 'editor' : 'home'; } function updatePageType() { document.documentElement.dataset.zbaiPage = getPageType(); } function isVisibleElement(node) { if (!(node instanceof HTMLElement)) return false; const rect = node.getBoundingClientRect(); return rect.width > 0 && rect.height > 0; } function getText(node) { return (node && node.textContent ? node.textContent : '').replace(/\s+/g, ' ').trim(); } function getElementText(node) { return getText(node).replace(/\s+/g, ''); } function normalizeSpaceText(value) { return (value || '').replace(/\s+/g, ' ').trim(); } function normalizeActionText(text) { return String(text || '').replace(/\s+/g, ''); } function escapeHtml(value) { return String(value).replace(/[&<>"']/g, (char) => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''', }[char])); } function getFirst(selector, root = document) { return root.querySelector(selector); } function isMobileShellNode(node) { return node instanceof HTMLElement && !!node.closest('#zbai-mobile-home-shell, #zbai-mobile-history-shell, #zbai-history-button, #zbai-account-bar, #zbai-mobile-adapter-badge'); } function hideNode(node) { if (node instanceof HTMLElement && !isMobileShellNode(node)) { node.setAttribute(HIDDEN_ATTR, '1'); } } function findDismissRoot(node) { let current = node instanceof HTMLElement ? node : null; let fallback = current; while (current && current !== document.body && current !== document.documentElement) { const style = window.getComputedStyle(current); const className = String(current.className || ''); if ( style.position === 'fixed' || style.position === 'sticky' || /modal|dialog|drawer|popup|popover|toast|vip|member|pricing|upgrade|pay/i.test(className) ) { fallback = current; } current = current.parentElement; } return fallback; } function dismissMobileBlockers() { if (!isMobile() || !document.body) return; const blockerPatterns = [ /Bestexperiencedondesktop/i, /Bestsupportedondesktop/i, /请使用电脑端/i, /电脑端体验更佳/i, ]; const upgradeDialogPatterns = [ /我要升级/, /连续包月.*连续包年/, /入门版.*个人版.*专业版/, /作者.*连续包/, /viewmore/i, ]; const upgradeButtonPatterns = [/^升级$/, /^我要升级$/]; const allowUpgradeDismiss = document.documentElement.dataset.zbaiPage !== 'history'; const nodes = [...document.body.querySelectorAll('body *')]; nodes.forEach((node) => { if (!(node instanceof HTMLElement) || node.hasAttribute(HIDDEN_ATTR) || !isVisibleElement(node)) return; const compactText = getElementText(node); if (!compactText) return; if (compactText.length < 160 && blockerPatterns.some((pattern) => pattern.test(compactText))) { hideNode(findDismissRoot(node)); return; } if (allowUpgradeDismiss && upgradeDialogPatterns.some((pattern) => pattern.test(compactText))) { const root = findDismissRoot(node); const rect = root.getBoundingClientRect(); const rootStyle = window.getComputedStyle(root); const rootClass = String(root.className || ''); const looksLikeOverlay = rootStyle.position === 'fixed' || rootStyle.position === 'sticky' || /modal|dialog|drawer|popup|popover|toast|vip|member|pricing|upgrade|pay/i.test(rootClass); if (looksLikeOverlay && (rect.width >= window.innerWidth * 0.45 || rect.height >= window.innerHeight * 0.28)) { hideNode(root); } return; } if (allowUpgradeDismiss && upgradeButtonPatterns.some((pattern) => pattern.test(compactText))) { const tag = node.tagName.toLowerCase(); const role = node.getAttribute('role'); if (tag === 'button' || tag === 'a' || role === 'button' || node.onclick) { hideNode(node); } } }); if (document.querySelector(`[${HIDDEN_ATTR}="1"]`)) { document.documentElement.style.removeProperty('overflow'); if (document.body) document.body.style.removeProperty('overflow'); } } function cleanupLegacyMobileArtifacts() { if (!isMobile() || !document.body) return; const legacyExactText = new Set([ '关闭移动面板', '手机脚本已启用', '珠宝AI手机快捷操作', ]); [...document.body.querySelectorAll('button, [role="button"], div, span')].forEach((node) => { if (!(node instanceof HTMLElement) || node.hasAttribute(HIDDEN_ATTR) || isMobileShellNode(node)) return; const text = normalizeSpaceText(node.innerText || node.textContent); if (!text) return; if (legacyExactText.has(text)) { hideNode(findDismissRoot(node)); return; } if ( text === '登录' && !node.closest('#picture-editor-header, .picture-editor-header, .LoginModal_LoginModal__O59AS, [class*="LoginModal"]') && window.getComputedStyle(node).position === 'fixed' ) { hideNode(findDismissRoot(node)); } }); } function navigateTo(path) { if (!path) return; const url = new URL(path, window.location.origin); window.location.assign(url.href); } function openHomeTool(key) { const action = HOME_TOOL_ACTIONS.find((item) => item.key === key); if (!action) return; if (action.href) { navigateTo(action.href); return; } navigateTo(action.fallbackHref); } function runMobileAction(action) { if (action === 'login') return clickLoginButton(); if (action === 'logout') return clickLogoutButton(); if (action === 'history') return goHistoryRecord(); if (action === 'menu') { openHomeMenu(); return true; } return false; } function openHomeMenu() { openSheet('快捷入口', [ { title: '图片创作', desc: '进入图片创作工作区', onSelect: () => openHomeTool('image') }, { title: '视频创作', desc: '进入视频创作工作区', onSelect: () => openHomeTool('video') }, { title: '历史记录', desc: '查看已生成内容', onSelect: () => goHistoryRecord() }, { title: '登录 / 账号', desc: '打开原网页登录入口', onSelect: () => clickLoginButton() }, ]); } function ensureMobileHomeShell() { let shell = document.getElementById('zbai-mobile-home-shell'); if (!shell) { shell = document.createElement('main'); shell.id = 'zbai-mobile-home-shell'; shell.innerHTML = `
开始创作 选择一个入口
模板功能 点击即用
`; let lastHandledAt = 0; shell.addEventListener('click', (event) => { const now = Date.now(); if (now - lastHandledAt < 280) { event.preventDefault(); event.stopPropagation(); return; } const actionButton = event.target.closest('[data-action]'); if (actionButton) { event.preventDefault(); event.stopPropagation(); lastHandledAt = now; runMobileAction(actionButton.getAttribute('data-action')); return; } const toolButton = event.target.closest('[data-tool-key]'); if (toolButton) { event.preventDefault(); event.stopPropagation(); lastHandledAt = now; openHomeTool(toolButton.getAttribute('data-tool-key')); return; } const navButton = event.target.closest('[data-href]'); if (!navButton) return; event.preventDefault(); event.stopPropagation(); lastHandledAt = now; navigateTo(navButton.getAttribute('data-href')); }); document.body.appendChild(shell); } updateMobileBrand(shell); updateMobileHomeAuth(shell); renderMobileHomeActions(shell); repairMobileShellVisibility(); } function repairMobileShellVisibility() { document .querySelectorAll(`#zbai-mobile-home-shell [${HIDDEN_ATTR}], #zbai-history-button[${HIDDEN_ATTR}], #zbai-account-bar [${HIDDEN_ATTR}]`) .forEach((node) => node.removeAttribute(HIDDEN_ATTR)); const visibleShellNodes = document.querySelectorAll([ '#zbai-mobile-home-shell', '#zbai-mobile-home-shell .zbai-mobile-section-title', '#zbai-mobile-home-shell .zbai-mobile-tool-grid', '#zbai-mobile-home-shell .zbai-mobile-template-grid', '#zbai-mobile-home-shell .zbai-mobile-menu-button', '#zbai-mobile-home-shell .zbai-mobile-tool-card', '#zbai-mobile-home-shell .zbai-mobile-template-card', '#zbai-history-button', ].join(',')); visibleShellNodes.forEach((node) => { if (!(node instanceof HTMLElement)) return; node.removeAttribute(HIDDEN_ATTR); node.style.setProperty('visibility', 'visible', 'important'); node.style.setProperty('pointer-events', 'auto', 'important'); node.style.setProperty('opacity', '1', 'important'); }); } function updateMobileBrand(shell) { const brand = shell.querySelector('.zbai-mobile-brand'); if (!brand || brand.dataset.ready === '1') return; const logos = [...document.querySelectorAll('#picture-editor-header img, .picture-editor-header img')].slice(0, 3); if (logos.length) { brand.innerHTML = logos.map((img) => ( `${escapeHtml(img.alt || '珠宝AI')}` )).join(''); brand.dataset.ready = '1'; } else { brand.textContent = '珠宝AI'; delete brand.dataset.ready; } } function updateMobileHomeAuth(shell) { const state = getZbaiAuthState(); const auth = shell.querySelector('.zbai-mobile-auth'); const info = shell.querySelector('.zbai-mobile-auth-info'); const loginButton = shell.querySelector('[data-action="login"]'); const logoutButton = shell.querySelector('[data-action="logout"]'); const isLoggedIn = !!state.loggedIn; auth.dataset.loggedIn = isLoggedIn ? '1' : '0'; info.textContent = `${state.vip || '已登录'} ${state.score || '--'}`; loginButton.hidden = isLoggedIn; logoutButton.hidden = !isLoggedIn; } function renderMobileHomeActions(shell) { const toolGrid = shell.querySelector('.zbai-mobile-tool-grid'); const templateGrid = shell.querySelector('.zbai-mobile-template-grid'); if (toolGrid && (toolGrid.dataset.ready !== '1' || toolGrid.querySelectorAll('[data-tool-key]').length !== HOME_TOOL_ACTIONS.length)) { toolGrid.innerHTML = HOME_TOOL_ACTIONS.map((item) => ` `).join(''); toolGrid.dataset.ready = '1'; } if (templateGrid && (templateGrid.dataset.ready !== '1' || templateGrid.querySelectorAll('[data-href]').length !== TEMPLATE_ACTIONS.length)) { templateGrid.innerHTML = TEMPLATE_ACTIONS.map((item) => ` `).join(''); templateGrid.dataset.ready = '1'; } } function compactHomePage() { if (!isMobile() || document.documentElement.dataset.zbaiPage !== 'home' || !document.body) return; ensureMobileHomeShell(); hideHomeHero(); ensureAccountBar(); hideOriginalBasicTools(); hideTemplateShowcaseSections(); [...document.body.querySelectorAll('a, button, [role="button"], div, span')].forEach((node) => { if (!(node instanceof HTMLElement) || node.hasAttribute(HIDDEN_ATTR) || !isVisibleElement(node)) return; const text = getElementText(node); if (/^查看所有/.test(text) || /^查看更多$/.test(text)) { hideNode(node); } }); repairMobileShellVisibility(); } function closestHomeBlock(node) { let current = node instanceof HTMLElement ? node : null; let fallback = current; let depth = 0; while (current && current !== document.body && current !== document.documentElement && depth < 8) { const id = current.id || ''; const className = String(current.className || ''); const rect = current.getBoundingClientRect(); if (id === 'root' || id === 'index-main-content--right') break; if ( current.matches('a, button, [role="button"]') || /card|item|wrapper|banner|swiper|slide|tool|basic/i.test(className) || (rect.width <= window.innerWidth * 0.92 && rect.height <= 180) ) { fallback = current; } current = current.parentElement; depth += 1; } return fallback; } function hideHomeHero() { [...document.body.querySelectorAll('h1, h2, div, a, button, [role="button"]')].forEach((node) => { if (!(node instanceof HTMLElement) || node.hasAttribute(HIDDEN_ATTR) || !isVisibleElement(node)) return; const text = getElementText(node); if (text === 'Create') { hideNode(closestHomeBlock(node) || node); return; } if (/一枚好物|一抹东方|轻奢东方/.test(text)) { hideNode(closestHomeBlock(node) || node); } }); } function hideOriginalBasicTools() { const toolPattern = /图片创作|视频创作|自由画布|3D创作|背景消除|局部重绘|图片编辑|扩图|图片拼接|图片放大|智能擦除|3D/; [...document.body.querySelectorAll('a, button, [role="button"], div')].forEach((node) => { if (!(node instanceof HTMLElement)) return; if (node.closest('#zbai-mobile-home-shell')) return; if (!isVisibleElement(node)) return; const text = getElementText(node); if (!text || text.length > 120) return; if (toolPattern.test(text)) { const card = closestHomeBlock(node) || node; hideNode(card); } }); } function hideTemplateShowcaseSections() { const labels = [ /查看所有珠宝海报/, /查看所有道具展示/, /查看所有社交媒体图/, /查看所有大片模特/, /查看所有珠宝纯净图/, /查看所有精致摄影/, /查看所有布料与珠宝/, /查看所有珠宝多视角/, /查看所有珠宝详情/, /查看所有珠宝视频/, /查看所有运镜展示/, ]; [...document.body.querySelectorAll('section, div')].forEach((node) => { if (!(node instanceof HTMLElement) || node.id === 'root' || node.id === 'index-main-content--right') return; if (node.closest('#zbai-mobile-home-shell')) return; const text = getElementText(node); if (!text || text.length > 600) return; const hasShowcaseButton = labels.some((pattern) => pattern.test(text)); const hasTemplateCard = !!node.querySelector('.styles_card-wrapper__H86tW, .styles_card-wrapper--waterfall__KJ_E0'); const rect = node.getBoundingClientRect(); if (hasShowcaseButton && (hasTemplateCard || rect.height > 120)) { hideNode(node); } }); } function ensureAccountBar() { if (!isMobile()) { document.getElementById('zbai-account-bar')?.remove(); return; } let bar = document.getElementById('zbai-account-bar'); const needsRebuild = !bar || !bar.querySelector('.zbai-account-info') || !bar.querySelector('[data-action="login"]') || !bar.querySelector('[data-action="history"]') || !bar.querySelector('[data-action="logout"]'); if (needsRebuild) { if (bar) bar.remove(); bar = document.createElement('div'); bar.id = 'zbai-account-bar'; bar.innerHTML = `
`; bar.addEventListener('click', (event) => { const button = event.target.closest('button[data-action]'); if (!button) return; const action = button.getAttribute('data-action'); if (action === 'login') clickLoginButton(); if (action === 'history') goHistoryRecord(); if (action === 'logout') clickLogoutButton(); }); } updateAccountBar(bar); if (!bar.parentElement) { document.documentElement.appendChild(bar); } } function updateAccountBar(bar) { const state = getZbaiAuthState(); const isLoggedIn = !!state.loggedIn; const info = isLoggedIn ? `${state.vip || '已登录'}｜积分 ${state.score || '--'}` : ''; bar.querySelector('.zbai-account-info').textContent = info; const loginButton = bar.querySelector('[data-action="login"]'); const historyButton = bar.querySelector('[data-action="history"]'); const logoutButton = bar.querySelector('[data-action="logout"]'); loginButton.hidden = isLoggedIn; historyButton.hidden = false; logoutButton.hidden = !isLoggedIn; } function parseVipAndScoreFromText(text) { const clean = normalizeSpaceText(text); const scoreMatch = clean.match(/\b\d{2,}\b/); const vipMatch = clean.match(/旗舰版|专业版|个人版|入门版|会员|VIP/i); return { score: scoreMatch ? scoreMatch[0] : null, vip: vipMatch ? vipMatch[0] : null, }; } function getVipAndScore() { const header = document.querySelector('#picture-editor-header'); const headerText = normalizeSpaceText(header && header.innerText); const score = normalizeSpaceText(header && header.querySelector('.integral .score')?.innerText) || normalizeSpaceText(document.querySelector('.integral .score')?.innerText) || null; const vip = normalizeSpaceText(header && header.querySelector('.vip-premium_text')?.innerText) || normalizeSpaceText(document.querySelector('.vip-premium_text')?.innerText) || null; const parsed = parseVipAndScoreFromText(headerText); return { score: score || parsed.score || null, vip: vip || parsed.vip || null, }; } function findMobileAuthButton() { return [...document.querySelectorAll( '#picture-editor-header [class*="LoginButton"], .MobileDrawer_MobileDrawer__yNjG4 [class*="LoginButton"], [class*="LoginButton"]' )].find((el) => { const text = normalizeSpaceText(el.innerText || el.textContent); return /^(Log In|Login|Sign In|登录|Log Out|Logout|退出登录|登出)$/i.test(text); }) || null; } function getMobileAuthState() { const button = findMobileAuthButton(); const text = normalizeSpaceText(button && (button.innerText || button.textContent)); return { button, text, loggedOut: /^(Log In|Login|Sign In|登录)$/i.test(text), loggedIn: /^(Log Out|Logout|退出登录|登出)$/i.test(text), }; } function getZbaiAuthState() { const header = document.querySelector('#picture-editor-header'); const headerText = normalizeSpaceText(header && header.innerText); const desktopLoginBtn = header ? header.querySelector('.login-btn') : null; const mobileAuth = getMobileAuthState(); const { vip, score } = getVipAndScore(); const hasLoginText = /(^|\s)(登录|Log In|Login|Sign In)(\s|$)/i.test(headerText); const hasLogoutText = /(^|\s)(退出登录|登出|Log Out|Logout)(\s|$)/i.test(headerText); const hasVipText = /旗舰版|专业版|个人版|入门版|会员|VIP/i.test(vip || headerText); return { loggedOut: !!desktopLoginBtn || mobileAuth.loggedOut || (!hasLogoutText && hasLoginText), loggedIn: mobileAuth.loggedIn || hasLogoutText || !!score || !!vip || hasVipText, vip, score, mobileAuthText: mobileAuth.text, headerText, }; } function refreshAccountBarSoon() { [80, 240, 600, 1200, 2200].forEach((delay) => { window.setTimeout(() => { const bar = document.getElementById('zbai-account-bar'); if (bar) updateAccountBar(bar); }, delay); }); } function hasVisibleLoginModal() { return [...document.querySelectorAll('.LoginModal_LoginModal__O59AS, [class*="LoginModal"], .fixed.top-0.left-0.w-screen.h-screen')] .some((node) => node instanceof HTMLElement && isVisibleElement(node)); } function scheduleLoginStateCleanup() { [900, 1600, 2600, 4200, 7000].forEach((delay) => { window.setTimeout(() => { if (!hasVisibleLoginModal()) delete document.documentElement.dataset.zbaiLoginOpen; }, delay); }); } function clickLoginButton() { document.documentElement.dataset.zbaiLoginOpen = '1'; scheduleLoginStateCleanup(); const clickCandidate = () => { const desktopLoginBtn = document.querySelector('#picture-editor-header .login-btn, .picture-editor-header .login-btn, .login-btn'); if (desktopLoginBtn) { clickOriginal(desktopLoginBtn); return true; } const mobileAuth = getMobileAuthState(); if (mobileAuth.loggedOut && mobileAuth.button) { clickOriginal(mobileAuth.button); return true; } const textButton = [...document.querySelectorAll('button, [role="button"], a, div')] .find((node) => { if (!(node instanceof HTMLElement) || isMobileShellNode(node)) return false; return /^(登录|Log In|Login|Sign In)$/i.test(normalizeSpaceText(node.innerText || node.textContent)); }); if (textButton) { clickOriginal(textButton); return true; } return false; }; if (clickCandidate()) return true; if (!document.querySelector('#picture-editor-header, .picture-editor-header')) { sessionStorage.setItem('zbai-mobile-pending-auth', 'login'); window.location.href = `${window.location.origin}/?zbai_mobile_auth=login`; return true; } [80, 220, 520, 1000, 1800].forEach((delay) => window.setTimeout(clickCandidate, delay)); window.setTimeout(() => { if (!hasVisibleLoginModal()) { console.warn('未找到登录按钮：原站未在当前页面暴露 #picture-editor-header .login-btn'); delete document.documentElement.dataset.zbaiLoginOpen; } }, 2300); return true; } function clickLogoutButton() { document.documentElement.dataset.zbaiLoginOpen = '1'; scheduleLoginStateCleanup(); const tryLogout = () => { const avatarBtn = document.querySelector('#picture-editor-header .right-vip-head img[style*="cursor: pointer"]') || document.querySelector('#picture-editor-header .right-vip-head img') || document.querySelector('.right-vip-head img'); if (!avatarBtn) return false; clickOriginal(avatarBtn); waitForElement('#user-info-popup', 1600).then((popup) => { if (!popup) return; const logoutBtn = [...popup.querySelectorAll('.operation-row, button, [role="button"], div')] .find((el) => /退出登录|Logout|Log out/i.test(el.innerText || el.textContent || '')); if (logoutBtn) { clickOriginal(logoutBtn); refreshAccountBarSoon(); } else { console.warn('用户弹窗已打开，但未找到退出登录按钮'); } }); return true; }; if (tryLogout()) return true; if (!document.querySelector('#picture-editor-header, .picture-editor-header')) { sessionStorage.setItem('zbai-mobile-pending-auth', 'logout'); window.location.href = `${window.location.origin}/?zbai_mobile_auth=logout`; return true; } [80, 220, 520, 1000, 1800].forEach((delay) => window.setTimeout(tryLogout, delay)); const mobileAuth = getMobileAuthState(); if (mobileAuth.loggedIn && mobileAuth.button) { clickOriginal(mobileAuth.button); return true; } window.setTimeout(() => { console.warn('未找到退出登录按钮：原站未在当前页面暴露头像入口'); delete document.documentElement.dataset.zbaiLoginOpen; }, 2300); return true; } function runPendingAuthAction() { if (!isMobile()) return; if (document.documentElement.dataset.zbaiPendingAuthStarted === '1') return; let action = sessionStorage.getItem('zbai-mobile-pending-auth') || ''; const queryAction = new URLSearchParams(location.search).get('zbai_mobile_auth') || ''; action = queryAction || action; if (!/^(login|logout)$/.test(action)) return; document.documentElement.dataset.zbaiPendingAuthStarted = '1'; sessionStorage.removeItem('zbai-mobile-pending-auth'); document.documentElement.dataset.zbaiLoginOpen = '1'; const runner = action === 'login' ? clickLoginButton : clickLogoutButton; [160, 420, 900, 1600].forEach((delay) => window.setTimeout(runner, delay)); } function waitForElement(selector, timeout = 1200) { const existing = document.querySelector(selector); if (existing) return Promise.resolve(existing); return new Promise((resolve, reject) => { const timer = window.setTimeout(() => { observer.disconnect(); reject(new Error(`等待元素超时: ${selector}`)); }, timeout); const observer = new MutationObserver(() => { const node = document.querySelector(selector); if (!node) return; window.clearTimeout(timer); observer.disconnect(); resolve(node); }); observer.observe(document.documentElement, { childList: true, subtree: true }); }).catch((error) => { console.warn(error.message); return null; }); } function ensureHistoryButton() { if (!isMobile() || document.documentElement.dataset.zbaiPage === 'home' || document.documentElement.dataset.zbaiPage === 'history') { document.getElementById('zbai-history-button')?.remove(); return; } let button = document.getElementById('zbai-history-button'); if (!button) { button = document.createElement('button'); button.id = 'zbai-history-button'; button.type = 'button'; button.textContent = '历史记录'; button.addEventListener('click', (event) => { event.preventDefault(); event.stopPropagation(); goHistoryRecord(); }); document.documentElement.appendChild(button); } } function goHistoryRecord() { window.location.href = HISTORY_URL; return true; } function findClickableAncestor(node) { let current = node; while (current && current !== document.body) { if ( current.matches && current.matches('button, [role="button"], a, .ChooseModelWithDetails_selectItem__7NA37, .ChooseModelWithDetails_selectBox__HoIuc') ) { return current; } current = current.parentElement; } return node instanceof HTMLElement ? node : null; } // 关键修复：这里退回 0.6.9 稳定点击逻辑，避免 0.7.5 复杂点击事件把“立即创作”拦截坏。 function clickOriginal(node) { if (!node) return; const target = findClickableAncestor(node); if (!target) return; const eventInit = { bubbles: true, cancelable: true, view: window, }; if (typeof PointerEvent === 'function') { target.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, cancelable: true, pointerType: 'touch', })); target.dispatchEvent(new PointerEvent('pointerup', { bubbles: true, cancelable: true, pointerType: 'touch', })); } target.dispatchEvent(new MouseEvent('mousedown', eventInit)); target.dispatchEvent(new MouseEvent('mouseup', eventInit)); target.click(); } function isGenerateBusy(node) { const target = node instanceof HTMLElement ? node : null; const text = getElementText(target); return !!( target && ( target.matches('[disabled], [aria-disabled="true"]') || target.querySelector('[disabled], [aria-disabled="true"]') || /创作中|生成中|排队|loading/i.test(text) ) ); } // 关键修复：立即创作点击逻辑使用 0.6.9 稳定版。 function handleGenerateTap(event) { if (!isMobile() || document.documentElement.dataset.zbaiPage !== 'editor') return; const target = event.target.closest('button, [role="button"], div'); if ( !(target instanceof HTMLElement) || target.closest('#zbai-mobile-home-shell, #zbai-mobile-bottom-sheet, #choose-style-box, #zbai-style-panel') ) { return; } const text = getElementText(target); if (!/立即创作/.test(text)) return; event.preventDefault(); event.stopPropagation(); const original = findClickableAncestor(target); if (original) clickOriginal(original); window.setTimeout(() => { if (!isGenerateBusy(original || target)) { triggerTextareaGenerateFallback(); } }, 220); } function triggerTextareaGenerateFallback() { const textarea = document.querySelector(selectors.textArea); if (!(textarea instanceof HTMLElement)) return; const dispatchEnter = () => { textarea.focus(); ['keydown', 'keypress', 'keyup'].forEach((type) => { textarea.dispatchEvent(new KeyboardEvent(type, { bubbles: true, cancelable: true, key: 'Enter', code: 'Enter', keyCode: 13, which: 13, })); }); }; dispatchEnter(); } function setImportantStyle(node, styles) { if (!(node instanceof HTMLElement)) return; Object.entries(styles).forEach(([prop, value]) => { node.style.setProperty(prop, value, 'important'); }); } function repairEditorBottomOverlay() { if (!isMobile() || document.documentElement.dataset.zbaiPage !== 'editor' || !document.body) return; const candidates = [ ...document.querySelectorAll('.ControlBottom_controlBottom__gooOU, .generate-button-container, .control-buttons'), ...[...document.body.querySelectorAll('button, div, section')].filter((node) => { if (!(node instanceof HTMLElement) || !isVisibleElement(node)) return false; const text = getElementText(node); return /^(数量|立即创作|立即创作\d*|立即创作.*\d+)$/.test(text) || /立即创作/.test(text); }), ]; candidates.forEach((node) => { if (!(node instanceof HTMLElement) || node.closest('#zbai-mobile-home-shell, #zbai-mobile-bottom-sheet')) return; let current = node; let depth = 0; while (current && current !== document.body && current !== document.documentElement && depth < 4) { const className = String(current.className || ''); const text = getElementText(current); const shouldRepair = current.matches('.ControlBottom_controlBottom__gooOU, .generate-button-container, .control-buttons') || /ControlBottom|generate-button|control-buttons|ChooseNumber/i.test(className) || /数量|立即创作/.test(text); if (shouldRepair) { setImportantStyle(current, { position: 'relative', left: 'auto', right: 'auto', top: 'auto', bottom: 'auto', width: '100%', 'max-width': '100%', transform: 'none', translate: 'none', 'z-index': '2', 'box-shadow': 'none', 'box-sizing': 'border-box', 'pointer-events': 'auto', 'touch-action': 'manipulation', }); } current = current.parentElement; depth += 1; } }); } function clearStylePickerState(node) { if (!(node instanceof HTMLElement)) return; node.removeAttribute('data-zbai-style-picker'); [ 'position', 'left', 'right', 'top', 'bottom', 'width', 'min-width', 'max-width', 'height', 'max-height', 'overflow', 'overflow-x', 'overflow-y', 'transform', 'translate', 'margin', 'box-sizing', 'z-index', 'box-shadow', ].forEach((prop) => node.style.removeProperty(prop)); } function isOriginalStyleOverlay(node) { if (!(node instanceof HTMLElement)) return false; const root = node.closest('#choose-style-box, .choose-style-box-content') || node; if (!(root instanceof HTMLElement) || !isVisibleElement(root)) return false; const rect = root.getBoundingClientRect(); const style = window.getComputedStyle(root); return ( style.position === 'fixed' || !!root.querySelector('.close-button, [aria-label="关闭"]') || rect.height > window.innerHeight * 0.55 ); } function repairInlineStyleChooser() { if (!isMobile() || document.documentElement.dataset.zbaiPage !== 'editor' || !document.body) return; [...document.querySelectorAll('.choose-style-container, .choose-style-title, .expand-button, [class*="ChooseStyle_" i]')] .forEach((node) => { if (!(node instanceof HTMLElement)) return; if (node.closest('#choose-style-box, .choose-style-box-content') && isOriginalStyleOverlay(node)) return; node.removeAttribute('data-zbai-style-picker'); }); const inlineContainers = [...document.querySelectorAll('.choose-style-container')] .filter((node) => { if (!(node instanceof HTMLElement)) return false; if (node.closest('#choose-style-box, .choose-style-box-content') && isOriginalStyleOverlay(node)) return false; if (node.querySelector('.close-button, [aria-label="关闭"]')) return false; const rect = node.getBoundingClientRect(); const text = getElementText(node); return rect.height < window.innerHeight * 0.9 && /选择模板|展开看|自定义风格|推荐|中式/.test(text); }); inlineContainers.forEach((container) => { container.setAttribute('data-zbai-inline-style-chooser', '1'); clearStylePickerState(container); setImportantStyle(container, { position: 'relative', left: 'auto', right: 'auto', top: 'auto', bottom: 'auto', width: '100%', 'min-width': '0', 'max-width': '100%', height: 'auto', 'max-height': 'none', overflow: 'visible', transform: 'none', translate: 'none', margin: '0', 'box-sizing': 'border-box', 'z-index': 'auto', 'box-shadow': 'none', }); const title = container.querySelector('.choose-style-title'); if (title instanceof HTMLElement) { title.setAttribute('data-zbai-inline-style-chooser', '1'); clearStylePickerState(title); setImportantStyle(title, { position: 'relative', left: 'auto', right: 'auto', top: 'auto', bottom: 'auto', width: '100%', 'max-width': '100%', 'min-width': '0', display: 'flex', 'align-items': 'center', 'justify-content': 'space-between', gap: '12px', padding: '0 0 8px', transform: 'none', translate: 'none', 'box-sizing': 'border-box', }); } const expand = container.querySelector('.expand-button'); if (expand instanceof HTMLElement) { expand.setAttribute('data-zbai-open-style-panel', '1'); expand.removeAttribute('data-zbai-style-toggle'); expand.setAttribute('data-zbai-inline-style-chooser', '1'); clearStylePickerState(expand); setImportantStyle(expand, { position: 'relative', left: 'auto', right: 'auto', top: 'auto', bottom: 'auto', display: 'inline-flex', 'align-items': 'center', 'justify-content': 'center', 'min-width': '64px', 'min-height': '30px', padding: '0 10px', 'border-radius': '999px', background: '#eef0f7', color: '#202333', transform: 'none', translate: 'none', 'white-space': 'nowrap', 'touch-action': 'manipulation', }); } if (!container.querySelector('.expand-button, .zbai-mobile-style-launcher')) { const button = document.createElement('button'); button.type = 'button'; button.className = 'zbai-mobile-style-launcher'; button.setAttribute('data-zbai-open-style-panel', '1'); button.textContent = '展开看'; (title || container).appendChild(button); } }); } function getStyleSourceContainer(target) { const node = target instanceof Element ? target : null; return node?.closest('.choose-style-container') || [...document.querySelectorAll('.choose-style-container')] .find((item) => item instanceof HTMLElement && !isOriginalStyleOverlay(item)); } function collectStylePanelItems(container) { if (!(container instanceof HTMLElement)) return { categories: [], items: [] }; const categories = [...container.querySelectorAll('.list-content-item, [class*="list-content-item"]')] .map((node) => ({ label: normalizeSpaceText(node.textContent), node })) .filter((item) => item.label); const rawNodes = [...container.querySelectorAll('.template-item-wrap, .item')]; const itemNodes = rawNodes.filter((node, index, list) => { if (!(node instanceof HTMLElement) || list.indexOf(node) !== index || node.closest(`#${STYLE_PANEL_ID}`)) return false; return !list.some((other) => other !== node && other instanceof HTMLElement && other.contains(node)); }); const items = itemNodes.map((node, index) => { const image = node.querySelector('img'); const label = normalizeSpaceText( node.querySelector('.item-text-name, .item-text')?.textContent || node.textContent || `模板 ${index + 1}` ) || `模板 ${index + 1}`; return { node, label, image: image ? (image.currentSrc || image.src || '') : '', }; }); return { categories, items }; } function ensureStylePanel() { let panel = document.getElementById(STYLE_PANEL_ID); if (panel) return panel; panel = document.createElement('section'); panel.id = STYLE_PANEL_ID; panel.hidden = true; panel.innerHTML = ` `; panel.addEventListener('click', handleStylePanelClick); document.documentElement.appendChild(panel); return panel; } function openStylePanel(container) { const source = container instanceof HTMLElement ? container : getStyleSourceContainer(document.body); const { categories, items } = collectStylePanelItems(source); const panel = ensureStylePanel(); panel.__zbaiStyleSource = source; const catList = panel.querySelector('.zbai-style-panel-cats'); const list = panel.querySelector('.zbai-style-panel-list'); catList.innerHTML = categories.map((item, index) => ( `` )).join(''); list.innerHTML = items.length ? items.map((item, index) => ( `` )).join('') : '
当前没有读取到模板，请稍后再试
'; panel.__zbaiStyleCategories = categories; panel.__zbaiStyleItems = items; panel.hidden = false; requestAnimationFrame(() => fitStylePanel(panel)); [80, 260, 600].forEach((delay) => window.setTimeout(() => fitStylePanel(panel), delay)); } function fitStylePanel(panel = document.getElementById(STYLE_PANEL_ID)) { if (!(panel instanceof HTMLElement) || panel.hidden) return; const card = panel.querySelector('.zbai-style-panel-card'); const list = panel.querySelector('.zbai-style-panel-list'); if (!(card instanceof HTMLElement) || !(list instanceof HTMLElement)) return; const viewportHeight = Math.min(window.visualViewport?.height || window.innerHeight || 760, window.innerHeight || 760); const safeBottom = 72; const maxHeight = Math.max(320, Math.min(560, viewportHeight - safeBottom - 32)); card.style.setProperty('height', `${maxHeight}px`, 'important'); card.style.setProperty('max-height', `${maxHeight}px`, 'important'); list.style.setProperty('max-height', `${Math.max(220, maxHeight - 92)}px`, 'important'); list.style.setProperty('overflow-y', 'auto', 'important'); } function closeStylePanel() { const panel = document.getElementById(STYLE_PANEL_ID); if (panel) panel.hidden = true; } function handleStylePanelClick(event) { const panel = document.getElementById(STYLE_PANEL_ID); if (!panel) return; if (event.target === panel || event.target.closest('[data-action="close"]')) { closeStylePanel(); return; } const catButton = event.target.closest('[data-cat-index]'); if (catButton) { const category = panel.__zbaiStyleCategories?.[Number(catButton.getAttribute('data-cat-index'))]; if (category?.node) { clickOriginal(category.node); window.setTimeout(() => openStylePanel(panel.__zbaiStyleSource), 260); } return; } const itemButton = event.target.closest('[data-item-index]'); if (itemButton) { const item = panel.__zbaiStyleItems?.[Number(itemButton.getAttribute('data-item-index'))]; if (item?.node) clickOriginal(item.node); closeStylePanel(); } } function handleStyleLauncherTap(event) { if (!isMobile() || document.documentElement.dataset.zbaiPage !== 'editor') return; const launcher = event.target.closest('[data-zbai-open-style-panel], .expand-button'); if (!launcher) return; const container = getStyleSourceContainer(launcher); if (!container) return; event.preventDefault(); event.stopPropagation(); openStylePanel(container); } function ensureSheet() { let sheet = document.getElementById(SHEET_ID); if (sheet) return sheet; sheet = document.createElement('div'); sheet.id = SHEET_ID; sheet.hidden = true; sheet.innerHTML = ` `; sheet.addEventListener('click', (event) => { if (event.target === sheet || event.target.closest('.zbai-mobile-sheet-close')) { closeSheet(); } }); document.documentElement.appendChild(sheet); return sheet; } function closeSheet() { const sheet = document.getElementById(SHEET_ID); if (sheet) sheet.hidden = true; } function openSheet(title, options) { const sheet = ensureSheet(); const titleNode = sheet.querySelector('.zbai-mobile-sheet-title span'); const list = sheet.querySelector('.zbai-mobile-sheet-list'); titleNode.textContent = title; list.innerHTML = ''; options.forEach((option) => { const button = document.createElement('button'); button.type = 'button'; button.className = 'zbai-mobile-sheet-option'; button.innerHTML = `${escapeHtml(option.title)}${option.desc ? `${escapeHtml(option.desc)}` : ''}`; button.addEventListener('click', () => { option.onSelect(); closeSheet(); }); list.appendChild(button); }); sheet.hidden = false; } function collectModelOptions() { const modelRoot = getFirst(selectors.modelWrap); if (!modelRoot) return []; const items = [...modelRoot.querySelectorAll('.ChooseModelWithDetails_selectItem__7NA37')]; const sourceItems = items.length ? items : [modelRoot]; return sourceItems.map((item) => { const title = getText(item.querySelector('.ChooseModelWithDetails_itemText__DoGeU')) || getText(item).split(' ')[0] || '当前模型'; const desc = getText(item.querySelector('.ChooseModelWithDetails_itemDesc__dEYMm')); return { title, desc, onSelect: () => clickOriginal(item), }; }); } function handleModelTap(event) { if (!isMobile()) return; const model = event.target.closest(selectors.modelWrap); if (!model || event.target.closest(`#${SHEET_ID}`)) return; const options = collectModelOptions(); if (options.length <= 1) return; event.preventDefault(); event.stopPropagation(); openSheet('选择模型', options); } function handleMobileActionTap(event) { if (!isMobile()) return; const toolButton = event.target.closest('#zbai-tool-actions button[data-tool-key]'); if (toolButton) { event.preventDefault(); event.stopPropagation(); openHomeTool(toolButton.getAttribute('data-tool-key')); return; } const button = event.target.closest('#zbai-template-actions button[data-href]'); if (!button) return; event.preventDefault(); event.stopPropagation(); navigateTo(button.getAttribute('data-href')); } function shouldShowBackButton() { const path = location.pathname; return isMobile() && path !== '/' && path !== '/zh' && path !== '/tw'; } function ensureBackButton() { const existing = document.querySelector('.zbai-mobile-back-button'); if (!shouldShowBackButton()) { if (existing) existing.remove(); return; } if (existing) return; const button = document.createElement('button'); button.type = 'button'; button.className = 'zbai-mobile-back-button'; button.setAttribute('aria-label', '返回上一级'); button.textContent = '‹'; button.addEventListener('click', () => { if (window.history.length > 1) { window.history.back(); } else { window.location.href = '/'; } }); document.documentElement.appendChild(button); } function ensureRunBadge() { if (!isMobile() || document.getElementById(BADGE_ID)) return; const badge = document.createElement('div'); badge.id = BADGE_ID; badge.textContent = '移动适配已启用'; badge.style.cssText = [ 'position:fixed', 'left:12px', 'bottom:calc(14px + env(safe-area-inset-bottom,0px))', 'z-index:10050', 'padding:4px 9px', 'border-radius:999px', 'background:rgba(20,24,38,.74)', 'color:#fff', 'font:12px/18px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif', 'pointer-events:none', 'opacity:1', ].join(';'); document.documentElement.appendChild(badge); } function markReady() { const root = getFirst(selectors.root); if (root) root.classList.add(CLASS_READY); } function cleanupMobileShells() { if (!isMobile()) { document.getElementById('zbai-mobile-home-shell')?.remove(); document.getElementById(WORK_FALLBACK_ID)?.remove(); return; } if (document.documentElement.dataset.zbaiPage !== 'home') { document.getElementById('zbai-mobile-home-shell')?.remove(); } if (document.documentElement.dataset.zbaiPage !== 'work-detail') { document.getElementById(WORK_FALLBACK_ID)?.remove(); } } function installEventBridge() { if (document.documentElement.dataset.zbaiMobileBridge === '1') return; document.documentElement.dataset.zbaiMobileBridge = '1'; document.addEventListener('click', handleMobileActionTap, true); document.addEventListener('touchend', handleMobileActionTap, true); document.addEventListener('click', handleGenerateTap, true); document.addEventListener('touchend', handleGenerateTap, { capture: true, passive: false }); document.addEventListener('click', handleStyleLauncherTap, true); document.addEventListener('touchend', handleStyleLauncherTap, { capture: true, passive: false }); document.addEventListener('click', handleModelTap, true); document.addEventListener('touchend', handleModelTap, true); document.addEventListener('keydown', (event) => { if (event.key === 'Escape') { closeSheet(); closeStylePanel(); } }); } function adapt() { injectStyles(); enableMobileFlag(); ensureViewport(); updatePageType(); cleanupMobileShells(); cleanupLegacyMobileArtifacts(); dismissMobileBlockers(); ensureAccountBar(); ensureHistoryButton(); runPendingAuthAction(); compactHomePage(); repairEditorBottomOverlay(); repairInlineStyleChooser(); [30, 120, 360, 900].forEach((delay) => window.setTimeout(repairEditorBottomOverlay, delay)); [30, 120, 360, 900].forEach((delay) => window.setTimeout(repairInlineStyleChooser, delay)); markReady(); ensureRunBadge(); ensureBackButton(); installEventBridge(); } function startObserver() { let scheduled = false; const observer = new MutationObserver(() => { if (scheduled) return; scheduled = true; requestAnimationFrame(() => { scheduled = false; adapt(); }); }); observer.observe(document.documentElement, { childList: true, subtree: true, }); } function boot() { adapt(); startObserver(); if (media.addEventListener) { media.addEventListener('change', enableMobileFlag); } else { media.addListener(enableMobileFlag); } window.addEventListener('resize', enableMobileFlag, { passive: true }); if (window.visualViewport) { window.visualViewport.addEventListener('resize', () => fitStylePanel(), { passive: true }); window.visualViewport.addEventListener('scroll', () => fitStylePanel(), { passive: true }); } } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', boot, { once: true }); injectStyles(); enableMobileFlag(); } else { boot(); } })();