// ==UserScript== // @name 珠宝AI 移动端适配 // @namespace https://zbai.art/ // @version 0.7.2 // @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', header: '.picture-editor-header', headerInner: '#picture-editor-header', headerCenter: '.picture-editor-header .center', headerLeft: '.picture-editor-header .left', headerRight: '.picture-editor-header .right', content: '.picture-editor-content', leftDrawer: '.picture-editor-content-left-drawer', contentBox: '.picture-editor-content-box', render: '.picture-editor-content-render', control: '.picture-editor-content-control', controlInner: '.PictureEditorControl_PictureEditorControl__T6FHN', controlConfig: '.control-config', controlBottom: '.ControlBottom_controlBottom__gooOU', inputWrap: '#multifunctional-input', textArea: 'textarea.textarea-buttons, textarea.ant-input', modelWrap: '.ChooseModelWithDetails_ChooseModelWithDetails__m_Cbs', modelBox: '.ChooseModelWithDetails_selectBox__HoIuc', ratioWrap: '.ChooseSizeBase_chooseSizeBase__KgHNI', numberWrap: '.ChooseNumber_ChooseNumber__J1uo_', generateWrap: '.generate-button-container', loginModal: '.LoginModal_LoginModal__O59AS', modalShell: '.fixed.top-0.left-0.w-screen.h-screen', }; window.__ZBAI_MOBILE_ADAPTER_VERSION__ = '0.7.2'; 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"] [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; left: auto !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, 0.88) !important; box-shadow: 0 4px 14px rgba(20, 24, 38, 0.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(58px + env(safe-area-inset-top, 0px)) !important; bottom: auto !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, 0.88) !important; color: #fff !important; box-shadow: 0 8px 22px rgba(20, 24, 38, 0.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, html[data-zbai-mobile="1"] #zbai-mobile-history-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(260px + env(safe-area-inset-bottom, 0px)) !important; background: radial-gradient(circle at 18% 0%, rgba(219, 196, 139, 0.18), transparent 30%), linear-gradient(180deg, #f7f8fb 0%, #eef1f7 100%) !important; color: #151821 !important; overflow-x: hidden !important; overflow-y: auto !important; scroll-padding-bottom: calc(260px + env(safe-area-inset-bottom, 0px)) !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, 0.86) !important; color: #151821 !important; box-shadow: 0 8px 22px rgba(21, 24, 33, 0.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; letter-spacing: 0 !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, 0.78) !important; box-shadow: 0 8px 24px rgba(21, 24, 33, 0.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; height: auto !important; min-height: 30px !important; max-height: none !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; letter-spacing: 0 !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, 0.72) !important; border-radius: 18px !important; background: rgba(255, 255, 255, 0.84) !important; color: #141722 !important; box-shadow: 0 12px 30px rgba(38, 45, 65, 0.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-tool-card::after { content: "" !important; position: absolute !important; right: -22px !important; bottom: -26px !important; width: 96px !important; height: 96px !important; border-radius: 50% !important; background: rgba(219, 196, 139, 0.22) !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-card { min-height: 104px !important; padding: 14px !important; } html[data-zbai-mobile="1"] .zbai-mobile-template-card .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, 0.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"] .zbai-mobile-history-list { display: grid !important; gap: 10px !important; margin-top: 12px !important; } html[data-zbai-mobile="1"] .zbai-mobile-history-empty { min-height: 220px !important; display: grid !important; place-items: center !important; padding: 22px !important; border-radius: 20px !important; background: rgba(255, 255, 255, 0.78) !important; color: #6b7280 !important; text-align: center !important; font: 700 14px/22px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !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"] #zbai-history-button { right: 12px !important; top: calc(60px + env(safe-area-inset-top, 0px)) !important; bottom: auto !important; } html[data-zbai-mobile="1"] [class*="desktop" i], html[data-zbai-mobile="1"] [class*="Desktop" i], html[data-zbai-mobile="1"] [class*="pc" i], html[data-zbai-mobile="1"] [class*="Pc" i] { max-width: 100vw !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"][data-zbai-page="home"] #root, html[data-zbai-mobile="1"][data-zbai-page="home"] .PageContainer_haimetaApp__qfjGd, html[data-zbai-mobile="1"][data-zbai-page="home"] .PageContainer_indexContent__5aBHJ, html[data-zbai-mobile="1"][data-zbai-page="home"] main, html[data-zbai-mobile="1"][data-zbai-page="home"] section { width: 100vw !important; min-width: 0 !important; max-width: 100vw !important; min-height: 100dvh !important; height: auto !important; overflow-x: hidden !important; overflow-y: auto !important; transform: none !important; margin: 0 !important; left: 0 !important; right: auto !important; } html[data-zbai-mobile="1"][data-zbai-page="home"] #picture-editor-header.PictureEditorHeader_homepageHeader__j_gnO, html[data-zbai-mobile="1"][data-zbai-page="home"] .picture-editor-header, html[data-zbai-mobile="1"][data-zbai-page="home"] #picture-editor-header, html[data-zbai-mobile="1"][data-zbai-page="home"] header { width: 100vw !important; min-width: 0 !important; height: calc(52px + env(safe-area-inset-top, 0px)) !important; min-height: calc(52px + env(safe-area-inset-top, 0px)) !important; padding: env(safe-area-inset-top, 0px) 10px 0 !important; position: sticky !important; top: 0 !important; z-index: 80 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; background: var(--Background-1-Normal, #f4f5fb) !important; } html[data-zbai-mobile="1"][data-zbai-page="home"] .SidebarNavigation_sidebarNavigation__KTG_b { display: none !important; } html[data-zbai-mobile="1"][data-zbai-page="home"] [class*="sidebar" i], html[data-zbai-mobile="1"][data-zbai-page="home"] [class*="navigation" i] { max-width: 100vw !important; } html[data-zbai-mobile="1"][data-zbai-page="home"] main.index-main, html[data-zbai-mobile="1"][data-zbai-page="home"] .index-main-content, html[data-zbai-mobile="1"][data-zbai-page="home"] #index-main-content--right { width: 100vw !important; min-width: 0 !important; max-width: 100vw !important; height: auto !important; min-height: calc(100dvh - 52px) !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; transform: none !important; left: 0 !important; right: auto !important; overflow-x: hidden !important; overflow-y: visible !important; } html[data-zbai-mobile="1"][data-zbai-page="home"] #index-main-content--right { padding: 0 10px 24px !important; } html[data-zbai-mobile="1"][data-zbai-page="home"] [class*="waterfall"], html[data-zbai-mobile="1"][data-zbai-page="home"] [class*="Waterfall"], html[data-zbai-mobile="1"][data-zbai-page="home"] [class*="card-list"], html[data-zbai-mobile="1"][data-zbai-page="home"] [class*="CardList"], html[data-zbai-mobile="1"][data-zbai-page="home"] [class*="template-list"], html[data-zbai-mobile="1"][data-zbai-page="home"] [class*="TemplateList"] { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } html[data-zbai-mobile="1"][data-zbai-page="home"] .styles_card-wrapper__H86tW, html[data-zbai-mobile="1"][data-zbai-page="home"] .styles_card-wrapper--waterfall__KJ_E0, html[data-zbai-mobile="1"][data-zbai-page="home"] .AgentPromptCard_agentPromptCard____KEc, html[data-zbai-mobile="1"][data-zbai-page="home"] .HomePopularTools_basic-item__fg43t { width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; position: relative !important; left: auto !important; right: auto !important; top: auto !important; transform: none !important; } html[data-zbai-mobile="1"][data-zbai-page="home"] a, html[data-zbai-mobile="1"][data-zbai-page="home"] button, html[data-zbai-mobile="1"][data-zbai-page="home"] [role="button"] { touch-action: manipulation !important; } html[data-zbai-mobile="1"][data-zbai-page="home"] [data-zbai-home-tool-card="1"] { width: calc(50vw - 16px) !important; min-width: 0 !important; max-width: calc(50vw - 16px) !important; min-height: 88px !important; height: 88px !important; display: inline-flex !important; vertical-align: top !important; overflow: hidden !important; border-radius: 10px !important; touch-action: manipulation !important; } html[data-zbai-mobile="1"][data-zbai-page="home"] #zbai-tool-actions { width: 100% !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; margin: 14px 0 14px !important; } html[data-zbai-mobile="1"][data-zbai-page="home"] #zbai-tool-actions button { min-height: 82px !important; border: 0 !important; border-radius: 12px !important; background: #fff !important; color: #141722 !important; box-shadow: 0 6px 18px rgba(20, 24, 38, 0.06) !important; font: 700 16px/22px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } html[data-zbai-mobile="1"][data-zbai-page="home"] #zbai-tool-actions button::before { display: block !important; margin-bottom: 4px !important; font-size: 13px !important; font-weight: 600 !important; color: rgba(20, 23, 34, 0.54) !important; } html[data-zbai-mobile="1"][data-zbai-page="home"] #zbai-tool-actions button[data-href*="/image"]::before { content: "Image" !important; } html[data-zbai-mobile="1"][data-zbai-page="home"] #zbai-tool-actions button[data-href*="/video"]::before { content: "Video" !important; } html[data-zbai-mobile="1"][data-zbai-page="home"] #zbai-template-actions { width: 100% !important; margin: 16px 0 28px !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } html[data-zbai-mobile="1"][data-zbai-page="home"] #zbai-template-actions .zbai-template-title { grid-column: 1 / -1 !important; min-height: 28px !important; display: flex !important; align-items: center !important; color: #141722 !important; font: 800 20px/28px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } html[data-zbai-mobile="1"][data-zbai-page="home"] #zbai-template-actions button { min-height: 44px !important; border: 0 !important; border-radius: 10px !important; background: #eef0f7 !important; color: #202333 !important; font: 600 14px/20px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !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"] .expand-button { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 64px !important; min-height: 30px !important; padding: 0 10px !important; border-radius: 999px !important; background: #eef0f7 !important; color: #202333 !important; transform: none !important; translate: none !important; white-space: nowrap !important; touch-action: manipulation !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"] #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, 0.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, 0.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, 0.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"][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"][data-zbai-style-expanded="1"] .choose-style-content { max-height: min(62dvh, 620px) !important; overflow-y: auto !important; overflow-x: hidden !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"][data-zbai-style-expanded="1"] .template-list .template-item-wrap { display: block !important; } html[data-zbai-mobile="1"][data-zbai-page="editor"] [data-zbai-inline-style-chooser="1"] .list-content { display: flex !important; flex-wrap: nowrap !important; gap: 8px !important; overflow-x: auto !important; overflow-y: hidden !important; max-width: 100% !important; -webkit-overflow-scrolling: touch !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"] #choose-style-box[data-zbai-style-picker-root="1"], html[data-zbai-mobile="1"] [data-zbai-style-picker-root="1"] { position: fixed !important; left: 8px !important; right: 8px !important; top: auto !important; bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: var(--zbai-style-height, min(72dvh, 560px)) !important; max-height: var(--zbai-style-max-height, calc(100dvh - 108px - env(safe-area-inset-bottom, 0px))) !important; overflow-x: hidden !important; overflow-y: hidden !important; transform: none !important; translate: none !important; margin: 0 !important; border-radius: 18px !important; z-index: 10060 !important; box-sizing: border-box !important; background: #fff !important; box-shadow: 0 18px 52px rgba(17, 20, 32, 0.22) !important; -webkit-overflow-scrolling: touch !important; } html[data-zbai-mobile="1"] #choose-style-box[data-zbai-style-picker-root="1"] .choose-style-box-content, html[data-zbai-mobile="1"] #choose-style-box[data-zbai-style-picker-root="1"] .choose-style-container, html[data-zbai-mobile="1"] [data-zbai-style-picker-root="1"] .choose-style-box-content, html[data-zbai-mobile="1"] [data-zbai-style-picker-root="1"] .choose-style-container, html[data-zbai-mobile="1"] [data-zbai-style-picker-panel="1"] { width: 100% !important; min-width: 0 !important; max-width: 100% !important; max-height: var(--zbai-style-max-height, calc(100dvh - 80px)) !important; height: 100% !important; overflow: hidden !important; transform: none !important; translate: none !important; margin: 0 !important; border-radius: 18px !important; box-sizing: border-box !important; } html[data-zbai-mobile="1"] #choose-style-box[data-zbai-style-picker-root="1"] .choose-style-content, html[data-zbai-mobile="1"] [data-zbai-style-picker-root="1"] .choose-style-content { width: 100% !important; max-width: 100% !important; max-height: var(--zbai-style-content-max-height, calc(72dvh - 62px)) !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; padding: 0 12px 16px !important; box-sizing: border-box !important; overscroll-behavior: contain !important; touch-action: pan-y !important; } html[data-zbai-mobile="1"] #choose-style-box[data-zbai-style-picker-root="1"] .choose-style-title, html[data-zbai-mobile="1"] [data-zbai-style-picker-root="1"] .choose-style-title { position: sticky !important; top: 0 !important; z-index: 6 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; width: 100% !important; min-height: 50px !important; background: #fff !important; border-bottom: 1px solid rgba(22, 26, 38, 0.06) !important; padding: 12px 50px 10px 14px !important; font: 900 18px/24px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html[data-zbai-mobile="1"] #choose-style-box[data-zbai-style-picker-root="1"] .close-button, html[data-zbai-mobile="1"] #choose-style-box[data-zbai-style-picker-root="1"] [aria-label="关闭"], html[data-zbai-mobile="1"] #choose-style-box[data-zbai-style-picker-root="1"] [class*="close" i], html[data-zbai-mobile="1"] #choose-style-box[data-zbai-style-picker-root="1"] [data-zbai-style-close="1"], html[data-zbai-mobile="1"] [data-zbai-style-picker-root="1"] .close-button, html[data-zbai-mobile="1"] [data-zbai-style-picker-root="1"] [aria-label="关闭"], html[data-zbai-mobile="1"] [data-zbai-style-picker-root="1"] [class*="close" i], html[data-zbai-mobile="1"] [data-zbai-style-picker-root="1"] [data-zbai-style-close="1"] { position: absolute !important; right: 10px !important; top: 8px !important; z-index: 8 !important; width: 36px !important; height: 36px !important; min-width: 36px !important; border-radius: 18px !important; display: grid !important; place-items: center !important; background: #f2f4f8 !important; color: #171a24 !important; font-size: 22px !important; line-height: 36px !important; touch-action: manipulation !important; } html[data-zbai-mobile="1"] [data-zbai-style-picker-root="1"] * { max-width: 100% !important; min-width: 0 !important; transform: none !important; translate: none !important; } html[data-zbai-mobile="1"] #choose-style-box *, html[data-zbai-mobile="1"] #choose-style-box *::before, html[data-zbai-mobile="1"] #choose-style-box *::after { box-sizing: border-box !important; max-width: 100% !important; min-width: 0 !important; } html[data-zbai-mobile="1"] #choose-style-box[data-zbai-style-picker-root="1"] img, html[data-zbai-mobile="1"] [data-zbai-style-picker-root="1"] img { max-width: 100% !important; object-fit: cover !important; } html[data-zbai-mobile="1"] #choose-style-box[data-zbai-style-picker-root="1"] .list-content, html[data-zbai-mobile="1"] [data-zbai-style-picker-root="1"] .list-content { position: sticky !important; top: 50px !important; z-index: 5 !important; width: 100% !important; max-width: 100% !important; display: flex !important; flex-wrap: nowrap !important; gap: 8px !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; padding: 8px 2px 10px !important; margin: 0 0 10px !important; background: #fff !important; border-bottom: 1px solid rgba(22, 26, 38, 0.06) !important; scrollbar-width: none !important; } html[data-zbai-mobile="1"] #choose-style-box[data-zbai-style-picker-root="1"] .list-content::-webkit-scrollbar, html[data-zbai-mobile="1"] [data-zbai-style-picker-root="1"] .list-content::-webkit-scrollbar { display: none !important; } html[data-zbai-mobile="1"] #choose-style-box[data-zbai-style-picker-root="1"] .list-content-item, html[data-zbai-mobile="1"] [data-zbai-style-picker-root="1"] .list-content-item { flex: 0 0 auto !important; white-space: nowrap !important; min-width: auto !important; height: 30px !important; padding: 0 13px !important; border-radius: 999px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: #f1f3f7 !important; color: #4a5060 !important; font: 800 13px/30px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; touch-action: manipulation !important; } html[data-zbai-mobile="1"] #choose-style-box[data-zbai-style-picker-root="1"] .list-content-item[class*="active" i], html[data-zbai-mobile="1"] #choose-style-box[data-zbai-style-picker-root="1"] .list-content-item[class*="selected" i], html[data-zbai-mobile="1"] [data-zbai-style-picker-root="1"] .list-content-item[class*="active" i], html[data-zbai-mobile="1"] [data-zbai-style-picker-root="1"] .list-content-item[class*="selected" i] { background: #15170f !important; color: #fff !important; } html[data-zbai-mobile="1"] #choose-style-box[data-zbai-style-picker-root="1"] .template-list, html[data-zbai-mobile="1"] [data-zbai-style-picker-root="1"] .template-list { width: 100% !important; max-width: 100% !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; overflow: visible !important; } html[data-zbai-mobile="1"] #choose-style-box[data-zbai-style-picker-root="1"] .template-item-wrap, html[data-zbai-mobile="1"] #choose-style-box[data-zbai-style-picker-root="1"] .item, html[data-zbai-mobile="1"] [data-zbai-style-picker-root="1"] .template-item-wrap, html[data-zbai-mobile="1"] [data-zbai-style-picker-root="1"] .item { width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; overflow: hidden !important; border-radius: 10px !important; } html[data-zbai-mobile="1"] #choose-style-box[data-zbai-style-picker-root="1"] .item-img, html[data-zbai-mobile="1"] [data-zbai-style-picker-root="1"] .item-img { width: 100% !important; aspect-ratio: 1 / 1 !important; height: auto !important; overflow: hidden !important; } html[data-zbai-mobile="1"] #choose-style-box[data-zbai-style-picker-root="1"] .item-text, html[data-zbai-mobile="1"] #choose-style-box[data-zbai-style-picker-root="1"] .item-text-name, html[data-zbai-mobile="1"] [data-zbai-style-picker-root="1"] .item-text, html[data-zbai-mobile="1"] [data-zbai-style-picker-root="1"] .item-text-name { width: 100% !important; min-height: 28px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; line-height: 28px !important; } html[data-zbai-mobile="1"] [data-zbai-style-picker-root="1"] [class*="list" i]:not(.list-content):not(.list-content-item), html[data-zbai-mobile="1"] [data-zbai-style-picker-root="1"] [class*="grid" i], html[data-zbai-mobile="1"] [data-zbai-style-picker-root="1"] [class*="content" i]:not(.list-content) { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; } html[data-zbai-mobile="1"][data-zbai-page="editor"] [data-zbai-inline-style-chooser="1"][data-zbai-style-picker], html[data-zbai-mobile="1"][data-zbai-page="editor"] [data-zbai-inline-style-chooser="1"] { 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 { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 0 0 8px !important; } html[data-zbai-mobile="1"][data-zbai-page="editor"] [data-zbai-inline-style-chooser="1"].expand-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 64px !important; min-height: 30px !important; padding: 0 10px !important; border-radius: 999px !important; background: #eef0f7 !important; color: #202333 !important; white-space: nowrap !important; touch-action: manipulation !important; } html[data-zbai-mobile="1"][data-zbai-page="home"] .card-wrapper-content, html[data-zbai-mobile="1"][data-zbai-page="home"] .styles_card-media__sZXbE, html[data-zbai-mobile="1"][data-zbai-page="home"] .styles_card-media__sZXbE img, html[data-zbai-mobile="1"][data-zbai-page="home"] .styles_card-media__sZXbE video { width: 100% !important; max-width: 100% !important; } html[data-zbai-mobile="1"][data-zbai-page="home"] .styles_card-overlay__S7Kx2 { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; } html[data-zbai-mobile="1"][data-zbai-page="home"] .styles_card-overlay-title__cwSMT, html[data-zbai-mobile="1"][data-zbai-page="home"] .styles_card-overlay-button__7dxuk { max-width: calc(100vw - 44px) !important; } html[data-zbai-mobile="1"][data-zbai-page="home"] .styles_card-overlay-button__7dxuk { min-height: 34px !important; display: inline-flex !important; align-items: center !important; justify-content: center !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-header .right .login-btn { white-space: nowrap !important; } html[data-zbai-mobile="1"] .picture-editor-header .right button { min-width: 0 !important; height: 32px !important; padding: 0 10px !important; white-space: nowrap !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: 1 1 auto !important; height: auto !important; min-height: 34dvh !important; max-height: 52dvh !important; padding: 8px !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 > * { 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: 0 0 auto !important; height: auto !important; max-height: calc(58dvh - env(safe-area-inset-bottom, 0px)) !important; margin: 0 !important; left: 0 !important; right: auto !important; transform: none !important; padding: 0 10px calc(10px + 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, 0.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; margin: 0 0 8px !important; } html[data-zbai-mobile="1"] .PictureEditorRadioContainer_pictureEditorRadioContainer__rt0hw, html[data-zbai-mobile="1"] .picture-editor-radio-content, html[data-zbai-mobile="1"] .picture-editor-radio-group { width: 100% !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"] .ChooseModelWithDetails_selectItem__7NA37 { cursor: pointer !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 { width: 100% !important; height: auto !important; margin-top: 12px !important; position: relative !important; bottom: auto !important; z-index: 2 !important; background: var(--Background-2-Normal, #f1f2f8) !important; padding-bottom: env(safe-area-inset-bottom, 0px) !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"] .generate-button-container, html[data-zbai-mobile="1"] .control-buttons { width: 100% !important; height: 50px !important; } html[data-zbai-mobile="1"] .generate-button-container button { min-height: 50px !important; border-radius: 12px !important; font-size: 15px !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"] .LoginModal_LoginModal__O59AS .login-sign-box, html[data-zbai-mobile="1"] .LoginModal_LoginModal__O59AS .content-area, html[data-zbai-mobile="1"] .LoginModal_LoginModal__O59AS .animate-box, html[data-zbai-mobile="1"] .LoginModal_LoginModal__O59AS #first-page { width: 100% !important; min-width: 0 !important; } html[data-zbai-mobile="1"] [class*="vip" i], html[data-zbai-mobile="1"] [class*="member" i], html[data-zbai-mobile="1"] [class*="membership" i], html[data-zbai-mobile="1"] [class*="pricing" i], html[data-zbai-mobile="1"] [class*="upgrade" i] { max-width: 100vw !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, 0.42) !important; } html[data-zbai-mobile="1"] #zbai-mobile-bottom-sheet[hidden] { display: none !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, 0.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; } html[data-zbai-mobile="1"] .zbai-work-preview-topbar { flex: 0 0 auto !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; min-height: 42px !important; margin-bottom: 10px !important; } html[data-zbai-mobile="1"] .zbai-work-preview-topbar strong { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font: 900 18px/24px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } html[data-zbai-mobile="1"] .zbai-work-preview-actions { display: inline-flex !important; align-items: center !important; gap: 8px !important; } html[data-zbai-mobile="1"] .zbai-work-preview-button { height: 34px !important; min-width: 42px !important; border: 0 !important; border-radius: 17px !important; padding: 0 12px !important; background: #11120d !important; color: #fff !important; font: 800 13px/34px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; box-shadow: 0 8px 20px rgba(20, 24, 38, 0.12) !important; touch-action: manipulation !important; } html[data-zbai-mobile="1"] .zbai-work-preview-button[data-tone="soft"] { background: rgba(255, 255, 255, 0.86) !important; color: #202333 !important; } html[data-zbai-mobile="1"] .zbai-work-preview-stage { flex: 1 1 auto !important; min-height: 0 !important; display: grid !important; place-items: center !important; overflow: auto !important; -webkit-overflow-scrolling: touch !important; border-radius: 22px !important; background: rgba(255, 255, 255, 0.86) !important; box-shadow: 0 18px 46px rgba(38, 45, 65, 0.12) !important; } html[data-zbai-mobile="1"] .zbai-work-preview-stage img, html[data-zbai-mobile="1"] .zbai-work-preview-stage video { display: block !important; max-width: 100% !important; max-height: 100% !important; width: auto !important; height: auto !important; object-fit: contain !important; border-radius: 16px !important; } html[data-zbai-mobile="1"] .zbai-work-preview-info { flex: 0 0 auto !important; max-height: 34dvh !important; margin-top: 10px !important; padding: 14px !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; border-radius: 18px !important; background: rgba(255, 255, 255, 0.9) !important; box-shadow: 0 12px 28px rgba(38, 45, 65, 0.08) !important; } html[data-zbai-mobile="1"] .zbai-work-preview-info h3 { margin: 0 0 10px !important; font: 900 16px/22px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } html[data-zbai-mobile="1"] .zbai-work-preview-info dl { display: grid !important; grid-template-columns: 72px minmax(0, 1fr) !important; gap: 8px 10px !important; margin: 0 !important; } html[data-zbai-mobile="1"] .zbai-work-preview-info dt, html[data-zbai-mobile="1"] .zbai-work-preview-info dd { margin: 0 !important; font: 600 13px/20px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } html[data-zbai-mobile="1"] .zbai-work-preview-info dt { color: #8b91a0 !important; } html[data-zbai-mobile="1"] .zbai-work-preview-info dd { color: #252938 !important; word-break: break-word !important; } html[data-zbai-mobile="1"] .zbai-work-preview-ref-list { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; } html[data-zbai-mobile="1"] .zbai-work-preview-ref-list img { width: 54px !important; height: 54px !important; border-radius: 8px !important; object-fit: cover !important; } html[data-zbai-mobile="1"][data-zbai-page="work-detail"] #root { 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: var(--Background-Static-Dialog, #fff) !important; color: var(--TextIcon-2-Normal, #2e3241) !important; box-shadow: 0 -14px 38px rgba(20, 24, 38, 0.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, 0.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, 0.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: 0.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, 0.08) !important; background: rgba(255, 255, 255, 0.88) !important; color: #222637 !important; box-shadow: 0 4px 16px rgba(20, 24, 38, 0.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"][data-zbai-page="editor"] .picture-editor-content-render { flex: 0 0 auto !important; min-height: 104px !important; max-height: 28dvh !important; height: 18dvh !important; padding: 6px 10px !important; } html[data-zbai-mobile="1"][data-zbai-page="editor"] .picture-editor-content-render:has(img:not([src*="loading"])), html[data-zbai-mobile="1"][data-zbai-page="editor"] .picture-editor-content-render:has(canvas), html[data-zbai-mobile="1"][data-zbai-page="editor"] .picture-editor-content-render:has(video) { height: 34dvh !important; max-height: 42dvh !important; } html[data-zbai-mobile="1"][data-zbai-page="editor"] .picture-editor-content-control { flex: 1 1 auto !important; max-height: none !important; min-height: 0 !important; padding: 12px 12px calc(180px + env(safe-area-inset-bottom, 0px)) !important; border-radius: 18px 18px 0 0 !important; } html[data-zbai-mobile="1"][data-zbai-page="editor"] .ControlBottom_controlBottom__gooOU, html[data-zbai-mobile="1"][data-zbai-page="editor"] .generate-button-container { position: relative !important; bottom: auto !important; z-index: 2 !important; margin-top: 10px !important; transform: none !important; box-shadow: none !important; } html[data-zbai-mobile="1"][data-zbai-page="editor"] .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, 0.18) !important; } html[data-zbai-mobile="1"][data-zbai-page="editor"] .generate-button-container button *, html[data-zbai-mobile="1"][data-zbai-page="editor"] .ControlBottom_controlBottom__gooOU button *, html[data-zbai-mobile="1"][data-zbai-page="editor"] .generate-button-container [class*="score" i], html[data-zbai-mobile="1"][data-zbai-page="editor"] .generate-button-container [class*="cost" i], html[data-zbai-mobile="1"][data-zbai-page="editor"] .generate-button-container i { display: inline-flex !important; opacity: 1 !important; visibility: visible !important; color: inherit !important; } html[data-zbai-mobile="1"][data-zbai-style-picker-open="1"] .ControlBottom_controlBottom__gooOU, html[data-zbai-mobile="1"][data-zbai-style-picker-open="1"] .generate-button-container, html[data-zbai-mobile="1"][data-zbai-style-picker-open="1"] .control-buttons { display: block !important; visibility: visible !important; pointer-events: auto !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 getElementText(node) { return getText(node).replace(/\s+/g, ''); } function normalizeActionText(text) { return String(text || '').replace(/\s+/g, ''); } function findOriginalActionByLabel(label) { const targetText = normalizeActionText(label); if (!targetText) return null; const candidates = [...document.querySelectorAll('a, button, [role="button"], [onclick], div')]; return candidates.find((node) => { if (!(node instanceof HTMLElement) || isMobileShellNode(node)) return false; const text = normalizeActionText(node.innerText || node.textContent || node.getAttribute('aria-label') || node.getAttribute('title') || ''); if (!text || text.length > 120) return false; return text === targetText || text.includes(targetText); }) || null; } function clickOriginalActionByLabel(label) { const original = findOriginalActionByLabel(label); if (!original) return false; clickOriginal(original); return true; } function openHomeTool(key) { const action = HOME_TOOL_ACTIONS.find((item) => item.key === key); if (!action) return; if (action.href) { navigateTo(action.href); return; } if (clickOriginalActionByLabel(action.nativeLabel || action.label)) return; navigateTo(action.fallbackHref); } function openHomeMenu() { openSheet('快捷入口', [ { title: '图片创作', desc: '进入图片创作工作区', onSelect: () => openHomeTool('image') }, { title: '视频创作', desc: '进入视频创作工作区', onSelect: () => openHomeTool('video') }, { title: '历史记录', desc: '查看已生成内容', onSelect: () => goHistoryRecord() }, { title: '登录 / 账号', desc: '打开原网页登录入口', onSelect: () => clickLoginButton() }, ]); } 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 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 text = getElementText(current); const rect = current.getBoundingClientRect(); 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 compactHomePage() { if (!isMobile() || document.documentElement.dataset.zbaiPage !== 'home' || !document.body) return; ensureMobileHomeShell(); hideHomeHero(); ensureAccountBar(); ensureToolActions(); hideOriginalBasicTools(); ensureTemplateActions(); 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 cleanupLegacyMobileArtifacts() { if (!isMobile() || !document.body) return; document.getElementById('zbai-style-panel')?.remove(); 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 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; const handleShellAction = (event) => { const actionButton = event.target.closest('[data-action]'); const now = Date.now(); if (now - lastHandledAt < 280) { event.preventDefault(); event.stopPropagation(); return; } if (actionButton) { event.preventDefault(); event.stopPropagation(); lastHandledAt = now; const action = actionButton.getAttribute('data-action'); runMobileAction(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')); }; shell.addEventListener('click', handleShellAction); document.body.appendChild(shell); } updateMobileBrand(shell); updateMobileHomeAuth(shell); renderMobileHomeActions(shell); repairMobileShellVisibility(); } function repairMobileShellVisibility() { document .querySelectorAll(`#zbai-mobile-home-shell [${HIDDEN_ATTR}], #zbai-mobile-history-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'); node.style.setProperty('max-width', node.id === 'zbai-mobile-home-shell' ? '100vw' : '100%', 'important'); if (node.matches('.zbai-mobile-tool-grid, .zbai-mobile-template-grid')) { node.style.setProperty('display', 'grid', 'important'); node.style.setProperty('grid-template-columns', 'repeat(2, minmax(0, 1fr))', 'important'); node.style.setProperty('height', 'auto', 'important'); node.style.setProperty('min-height', '0', 'important'); node.style.setProperty('max-height', 'none', 'important'); } if (node.id === 'zbai-mobile-home-shell') { node.style.setProperty('position', 'fixed', 'important'); node.style.setProperty('inset', '0', 'important'); node.style.setProperty('z-index', '10025', 'important'); node.style.setProperty('width', '100vw', 'important'); node.style.setProperty('height', '100dvh', 'important'); node.style.setProperty('overflow-y', 'auto', 'important'); node.style.setProperty('overflow-x', 'hidden', 'important'); node.style.setProperty('padding-bottom', 'calc(190px + env(safe-area-inset-bottom, 0px))', 'important'); node.style.setProperty('scroll-padding-bottom', 'calc(190px + env(safe-area-inset-bottom, 0px))', 'important'); } if (node.matches('.zbai-mobile-tool-card, .zbai-mobile-template-card')) { node.style.setProperty('display', 'block', 'important'); node.style.setProperty('height', 'auto', 'important'); node.style.setProperty('max-height', 'none', 'important'); } if (node.matches('.zbai-mobile-section-title')) { node.style.setProperty('display', 'flex', 'important'); node.style.setProperty('height', 'auto', 'important'); node.style.setProperty('min-height', '30px', 'important'); node.style.setProperty('max-height', 'none', 'important'); node.style.setProperty('margin', '20px 0 12px', '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'; } 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 adaptBasicTools() { const allowed = [ { pattern: /图片创作/, key: 'image', href: '/create' }, { pattern: /视频创作/, key: 'video', href: '/create/module/video' }, ]; const blocked = /自由画布|3D创作|背景消除|局部重绘|图片编辑|扩图|图片拼接|图片放大|智能擦除|3D/; [...document.body.querySelectorAll('a, button, [role="button"], div')].forEach((node) => { if (!(node instanceof HTMLElement) || !isVisibleElement(node)) return; const text = getElementText(node); if (!text || text.length > 90) return; const card = closestHomeBlock(node) || node; const matched = allowed.find((item) => item.pattern.test(text)); if (matched) { card.removeAttribute(HIDDEN_ATTR); card.setAttribute('data-zbai-home-tool-card', '1'); card.setAttribute('data-zbai-home-tool-key', matched.key); card.setAttribute('data-zbai-home-href', matched.href); if (!card.dataset.zbaiHomeClickBound) { card.dataset.zbaiHomeClickBound = '1'; card.addEventListener('click', (event) => { event.preventDefault(); event.stopPropagation(); openHomeTool(card.getAttribute('data-zbai-home-tool-key')); }); } return; } if (blocked.test(text)) { hideNode(card); } }); } function ensureToolActions() { let actions = document.getElementById('zbai-tool-actions'); if (actions) return; actions = document.createElement('div'); actions.id = 'zbai-tool-actions'; actions.innerHTML = ` `; actions.addEventListener('click', (event) => { const button = event.target.closest('button[data-tool-key]'); if (!button) return; event.preventDefault(); event.stopPropagation(); openHomeTool(button.getAttribute('data-tool-key')); }); const target = document.querySelector('#index-main-content--right') || document.querySelector('main.index-main') || document.body; const basicTitle = [...target.querySelectorAll('h1, h2, h3, div, span')].find((node) => getElementText(node) === '基础工具'); if (basicTitle && basicTitle.parentElement) { basicTitle.parentElement.insertBefore(actions, basicTitle.nextSibling); return; } target.insertBefore(actions, document.getElementById('zbai-template-actions') || target.firstElementChild); } function hideOriginalBasicTools() { const toolPattern = /图片创作|视频创作|自由画布|3D创作|背景消除|局部重绘|图片编辑|扩图|图片拼接|图片放大|智能擦除|3D/; [...document.body.querySelectorAll('a, button, [role="button"], div')].forEach((node) => { if ( !(node instanceof HTMLElement) || node.id === 'zbai-tool-actions' || node.closest('#zbai-tool-actions') || node.querySelector('#zbai-tool-actions') ) return; if (!isVisibleElement(node)) return; const text = getElementText(node); if (!text || text.length > 120) return; if (toolPattern.test(text)) { const card = closestHomeBlock(node) || node; if (!card.closest('#zbai-tool-actions')) hideNode(card); } }); } function navigateTo(path) { if (!path) return; const url = new URL(path, window.location.origin); window.location.assign(url.href); } function getWorkDetailPayload(rawUrl) { let url; try { url = new URL(rawUrl || window.location.href, window.location.origin); } catch (error) { return null; } if (url.pathname !== '/mobile/work-detail') return null; const imageUrl = url.searchParams.get('url') || ''; const videoUrl = url.searchParams.get('videoUrl') || ''; const objectId = url.searchParams.get('objectId') || ''; const cleanVideoUrl = videoUrl && videoUrl !== 'null' ? videoUrl : ''; if (!imageUrl && !cleanVideoUrl) return null; return { objectId, imageUrl, videoUrl: cleanVideoUrl, title: objectId ? `作品 ${objectId}` : '作品预览', }; } function findWorkDetailHref(target) { let node = target instanceof Element ? target : null; while (node && node !== document.documentElement) { const href = node.getAttribute?.('href') || node.getAttribute?.('data-href') || ''; if (href && /\/mobile\/work-detail/.test(href)) return href; node = node.parentElement; } return ''; } function buildWorkPreviewMarkup(payload, mode) { const mediaMarkup = payload.videoUrl ? `` : `作品预览`; const primaryUrl = payload.videoUrl || payload.imageUrl; const meta = payload.meta || {}; const refs = (meta.references || []).filter(Boolean).slice(0, 6); const refMarkup = refs.length ? `
${refs.map((src) => `参考图`).join('')}
` : '当前历史卡片未暴露参考图'; const prompt = meta.prompt || '当前历史卡片未暴露完整提示词'; const model = meta.model || '当前历史卡片未暴露模型信息'; const ratio = meta.ratio || '当前历史卡片未暴露比例信息'; const createdAt = meta.createdAt || '当前历史卡片未暴露创建时间'; const fileSize = meta.fileSize || '当前历史卡片未暴露文件大小'; return `
${mode === 'page' ? '作品预览' : '历史作品'}
${mediaMarkup}

制作信息

提示词
${escapeHtml(prompt)}
参考图
${refMarkup}
模型
${escapeHtml(model)}
比例
${escapeHtml(ratio)}
文件大小
${escapeHtml(fileSize)}
创建
${escapeHtml(createdAt)}
`; } function handleWorkPreviewAction(event) { const button = event.target.closest('button[data-action]'); if (!button) return; event.preventDefault(); event.stopPropagation(); const action = button.getAttribute('data-action'); if (action === 'close') { document.getElementById(WORK_PREVIEW_ID)?.remove(); return; } if (action === 'history') { goHistoryRecord(); return; } if (action === 'open') { const url = button.getAttribute('data-url'); if (url) window.open(url, '_blank'); return; } if (action === 'download') { const url = button.getAttribute('data-url'); if (!url) return; const originalDownload = document.querySelector('#down-load-work .download-button, #down-load-work, .GenerateItemDetail_rightBtn__cM1kG.download-button, .download-button.GenerateItemDetail_rightBtn__cM1kG'); if (originalDownload instanceof HTMLElement && isVisibleElement(originalDownload)) { clickOriginal(originalDownload); return; } downloadMedia(url, button.getAttribute('data-object-id')); return; } if (action === 'back') { if (window.history.length > 1) window.history.back(); else goHistoryRecord(); } } function openWorkPreview(payload) { if (!payload) return false; let overlay = document.getElementById(WORK_PREVIEW_ID); if (!overlay) { overlay = document.createElement('section'); overlay.id = WORK_PREVIEW_ID; overlay.addEventListener('click', handleWorkPreviewAction); document.documentElement.appendChild(overlay); } overlay.innerHTML = buildWorkPreviewMarkup(payload, 'overlay'); overlay.hidden = false; return true; } function downloadMedia(url, objectId) { const name = `zbai-work-${objectId || Date.now()}.${inferFileExtension(url)}`; fetch(url, { mode: 'cors', credentials: 'omit' }) .then((response) => { if (!response.ok) throw new Error(`下载失败 ${response.status}`); return response.blob(); }) .then((blob) => { const blobUrl = URL.createObjectURL(blob); const anchor = document.createElement('a'); anchor.href = blobUrl; anchor.download = name; document.body.appendChild(anchor); anchor.click(); anchor.remove(); window.setTimeout(() => URL.revokeObjectURL(blobUrl), 1200); }) .catch(() => { const anchor = document.createElement('a'); anchor.href = url; anchor.download = name; anchor.target = '_blank'; anchor.rel = 'noopener'; document.body.appendChild(anchor); anchor.click(); anchor.remove(); }); } function inferFileExtension(url) { try { const pathname = new URL(url, location.href).pathname; const ext = pathname.split('.').pop(); if (/^(png|jpe?g|webp|gif|mp4|mov)$/i.test(ext)) return ext.toLowerCase(); } catch (error) { // fall through } return 'png'; } function collectWorkDetailDomMeta() { const root = document.querySelector('.introduction-area, [class*="introduction-area"], [class*="introductionArea"]'); if (!(root instanceof HTMLElement)) return null; const prompt = normalizeSpaceText(root.querySelector('.ai-editor-info-text.prompt, .prompt')?.textContent || ''); const refs = [...root.querySelectorAll('.image-urls-row img')].map((img) => img.currentSrc || img.src || '').filter(Boolean); const params = [...root.querySelectorAll('.other-params-title')].map((node) => normalizeSpaceText(node.textContent)).filter(Boolean); const rows = [...root.querySelectorAll('.ai-editor-info-row')]; const findRowValue = (label) => { const row = rows.find((item) => normalizeSpaceText(item.textContent).includes(label)); if (!row) return ''; const parts = [...row.querySelectorAll('.ai-editor-info-text')].map((node) => normalizeSpaceText(node.textContent)).filter(Boolean); return parts[0] || normalizeSpaceText(row.textContent).replace(label, '').trim(); }; return { prompt, references: refs, model: params.join(' / '), ratio: params.find((item) => /\d+:\d+/.test(item)) || '', fileSize: findRowValue('文件大小'), createdAt: findRowValue('创建'), }; } function getWorkDetailDomPayload() { const root = document.querySelector('.introduction-area, [class*="introduction-area"], [class*="introductionArea"]'); if (!(root instanceof HTMLElement)) return null; const mainImg = [...document.querySelectorAll('img')] .map((img) => img.currentSrc || img.src || '') .find((src) => src && !/default_profile_picture|common\//.test(src)); if (!mainImg) return null; return { objectId: document.querySelector('.more-button[id]')?.id || '', imageUrl: mainImg, videoUrl: '', title: '作品预览', meta: collectWorkDetailDomMeta() || {}, }; } function collectHistoryWorkMeta(target, payload) { const node = target instanceof Element ? target : null; const card = node && (node.closest('a, [role="button"], [onclick], div') || node); const root = card instanceof HTMLElement ? card : node; const text = normalizeSpaceText(root && (root.innerText || root.textContent)); const images = root ? [...root.querySelectorAll('img')].map((img) => img.currentSrc || img.src || '').filter(Boolean) : []; const mainUrl = payload && payload.imageUrl; const references = images.filter((src) => src && src !== mainUrl); const promptMatch = text.match(/提示词\s*[:：]?\s*(.+?)(?:参考图|模型|比例|文件大小|创建|$)/); const modelMatch = text.match(/(基础生图模型|高阶生图模型|海报模型|视频模型|[^\s]{2,12}模型)/); const ratioMatch = text.match(/\b(?:1:1|4:3|3:4|16:9|9:16)(?:\s*\([^)]*\))?/); const sizeMatch = text.match(/\b\d+(?:\.\d+)?\s*(?:K|M|KB|MB)\b/i); const dateMatch = text.match(/\b\d{2}-\d{2}-\d{4}\b|\b\d{4}-\d{2}-\d{2}\b/); return { prompt: promptMatch ? normalizeSpaceText(promptMatch[1]) : '', model: modelMatch ? modelMatch[1] : '', ratio: ratioMatch ? ratioMatch[0] : '', fileSize: sizeMatch ? sizeMatch[0] : '', createdAt: dateMatch ? dateMatch[0] : '', references, }; } function ensureWorkDetailFallback() { if (!isMobile()) { document.getElementById(WORK_FALLBACK_ID)?.remove(); return; } if (document.documentElement.dataset.zbaiPage !== 'work-detail') { document.getElementById(WORK_FALLBACK_ID)?.remove(); return; } const payload = getWorkDetailPayload(window.location.href) || getWorkDetailDomPayload(); if (!payload) return; payload.meta = collectWorkDetailDomMeta() || payload.meta || {}; let shell = document.getElementById(WORK_FALLBACK_ID); if (!shell) { shell = document.createElement('section'); shell.id = WORK_FALLBACK_ID; shell.addEventListener('click', handleWorkPreviewAction); document.documentElement.appendChild(shell); } shell.innerHTML = buildWorkPreviewMarkup(payload, 'page'); } function handleHistoryWorkTap(event) { if (!isMobile() || document.documentElement.dataset.zbaiPage !== 'history') return; const href = findWorkDetailHref(event.target); if (!href) return; const payload = getWorkDetailPayload(href); if (!payload) return; payload.meta = collectHistoryWorkMeta(event.target, payload); event.preventDefault(); event.stopPropagation(); openWorkPreview(payload); } function ensureAccountBar() { if (!isMobile()) { const existing = document.getElementById('zbai-account-bar'); if (existing) existing.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 normalizeAccountText(value) { return (value || '').replace(/\s+/g, '').trim(); } function normalizeSpaceText(value) { return (value || '').replace(/\s+/g, ' ').trim(); } 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 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 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 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 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 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') { const existing = document.getElementById('zbai-history-button'); if (existing) existing.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 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.querySelector('#zbai-template-actions') || node.querySelector('#zbai-tool-actions')) 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 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 setImportantStyle(node, styles) { if (!(node instanceof HTMLElement)) return; Object.entries(styles).forEach(([prop, value]) => { node.style.setProperty(prop, value, 'important'); }); } 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 wrappers = [ container.closest('[class*="ChooseStyle_" i]'), container.closest('.control-config'), container.closest('.picture-editor-content-control'), ]; wrappers.forEach((wrapper) => { if (!(wrapper instanceof HTMLElement)) return; wrapper.removeAttribute('data-zbai-style-picker'); setImportantStyle(wrapper, { position: 'relative', left: 'auto', right: 'auto', top: 'auto', bottom: 'auto', width: '100%', 'max-width': '100%', transform: 'none', translate: 'none', 'overflow-x': 'hidden', 'box-sizing': 'border-box', }); }); 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); } }); [...document.querySelectorAll('[data-zbai-style-picker="1"]')].forEach((node) => { if (!(node instanceof HTMLElement)) return; if (node.closest('#choose-style-box, .choose-style-box-content') && isOriginalStyleOverlay(node)) return; const rect = node.getBoundingClientRect(); const hasClose = !!node.querySelector('.close-button, [aria-label="关闭"]'); if (!hasClose && rect.height < 190) { clearStylePickerState(node); node.setAttribute('data-zbai-inline-style-chooser', '1'); } }); } 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 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 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'); list.scrollTop = Math.min(list.scrollTop, Math.max(0, list.scrollHeight - list.clientHeight)); } 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; container.setAttribute('data-zbai-inline-style-chooser', '1'); const syntheticLauncher = launcher.classList?.contains('zbai-mobile-style-launcher'); if (syntheticLauncher) { const nativeExpand = container.querySelector('.expand-button:not(.zbai-mobile-style-launcher)'); if (nativeExpand instanceof HTMLElement) { event.preventDefault(); event.stopPropagation(); clickOriginal(nativeExpand); } } [40, 120, 280, 640].forEach((delay) => window.setTimeout(adaptExpandedStylePicker, delay)); } function adaptExpandedStylePicker() { if (!isMobile() || document.documentElement.dataset.zbaiPage !== 'editor' || !document.body) return; repairInlineStyleChooser(); adaptOriginalStylePopup(); delete document.documentElement.dataset.zbaiStylePickerOpen; } function getOriginalStylePopupRoots() { const roots = new Set(); document.querySelectorAll('#choose-style-box, .choose-style-box-content').forEach((node) => { if (!(node instanceof HTMLElement) || !isVisibleElement(node)) return; const root = node.id === 'choose-style-box' ? node : node.closest('#choose-style-box') || node; if (root instanceof HTMLElement && isOriginalStyleOverlay(root)) roots.add(root); }); return [...roots]; } function adaptOriginalStylePopup() { if (!isMobile() || document.documentElement.dataset.zbaiPage !== 'editor') return; const viewportHeight = Math.min(window.visualViewport?.height || window.innerHeight || 760, window.innerHeight || 760); const height = Math.max(320, Math.min(560, viewportHeight * 0.72, viewportHeight - 112)); getOriginalStylePopupRoots().forEach((root) => fitOriginalStylePopup(root, height)); } function fitOriginalStylePopup(root, height) { if (!(root instanceof HTMLElement)) return; root.setAttribute('data-zbai-style-picker-root', '1'); root.style.setProperty('--zbai-style-height', `${Math.round(height)}px`); root.style.setProperty('--zbai-style-max-height', `${Math.round(height)}px`); root.style.setProperty('--zbai-style-content-max-height', `${Math.max(230, Math.round(height - 60))}px`); setImportantStyle(root, { display: 'block', visibility: 'visible', position: 'fixed', left: '8px', right: '8px', top: 'auto', bottom: 'calc(70px + env(safe-area-inset-bottom, 0px))', width: 'auto', 'min-width': '0', 'max-width': 'none', height: `${Math.round(height)}px`, 'max-height': `${Math.round(height)}px`, overflow: 'hidden', transform: 'none', translate: 'none', margin: '0', 'box-sizing': 'border-box', 'z-index': '10090', 'pointer-events': 'auto', }); const panel = root.querySelector('.choose-style-box-content, .choose-style-container') || root; if (panel instanceof HTMLElement) { panel.setAttribute('data-zbai-style-picker-panel', '1'); setImportantStyle(panel, { width: '100%', height: '100%', 'min-width': '0', 'max-width': '100%', 'max-height': `${Math.round(height)}px`, overflow: 'hidden', transform: 'none', translate: 'none', margin: '0', 'box-sizing': 'border-box', }); } const content = root.querySelector('.choose-style-content'); if (content instanceof HTMLElement) { setImportantStyle(content, { width: '100%', 'max-width': '100%', 'max-height': `${Math.max(230, Math.round(height - 60))}px`, 'overflow-y': 'auto', 'overflow-x': 'hidden', '-webkit-overflow-scrolling': 'touch', 'overscroll-behavior': 'contain', 'touch-action': 'pan-y', 'box-sizing': 'border-box', }); } const closeButton = findStylePopupCloseButton(root); if (closeButton) closeButton.setAttribute('data-zbai-style-close', '1'); root.querySelectorAll('.template-list').forEach((list) => { if (!(list instanceof HTMLElement)) return; setImportantStyle(list, { display: 'grid', 'grid-template-columns': 'repeat(2, minmax(0, 1fr))', gap: '10px', width: '100%', 'max-width': '100%', overflow: 'visible', }); }); root.querySelectorAll('.list-content').forEach((list) => { if (!(list instanceof HTMLElement)) return; setImportantStyle(list, { display: 'flex', 'flex-wrap': 'nowrap', gap: '8px', width: '100%', 'max-width': '100%', 'overflow-x': 'auto', 'overflow-y': 'hidden', '-webkit-overflow-scrolling': 'touch', }); }); } function findStylePopupCloseButton(root) { if (!(root instanceof HTMLElement)) return null; const direct = root.querySelector('.close-button, [aria-label="关闭"], [class*="close" i]'); if (direct instanceof HTMLElement) return direct; const rootRect = root.getBoundingClientRect(); return [...root.querySelectorAll('button, [role="button"], div, span')] .filter((node) => node instanceof HTMLElement) .find((node) => { const text = normalizeSpaceText(node.textContent); if (!/^(×|x|X|✕|✖|)$/.test(text)) return false; const rect = node.getBoundingClientRect(); return rect.width <= 52 && rect.height <= 52 && rect.top <= rootRect.top + 72 && rect.left >= rootRect.right - 84; }) || null; } function suppressOriginalStyleModal() { document.querySelectorAll('#choose-style-box, .choose-style-box-content').forEach((node) => { if (!(node instanceof HTMLElement)) return; const root = node.id === 'choose-style-box' ? node : node.closest('#choose-style-box') || node; const rect = root.getBoundingClientRect(); const style = window.getComputedStyle(root); const isOverlay = style.position === 'fixed' || !!root.querySelector('.close-button, [aria-label="关闭"]') || rect.height > window.innerHeight * 0.55; if (!isOverlay) return; setImportantStyle(root, { display: 'none', visibility: 'hidden', 'pointer-events': 'none', }); }); } function findStylePickerRoots() { const roots = []; const addRoot = (node) => { if (!(node instanceof HTMLElement) || !isVisibleElement(node)) return; const root = node.id === 'choose-style-box' ? node : node.closest('#choose-style-box') || (node.classList.contains('choose-style-box-content') ? node : node.closest('.choose-style-box-content')) || node; if (root instanceof HTMLElement && !roots.includes(root) && isVisibleElement(root)) { const text = getElementText(root); const imageCount = root.querySelectorAll('img').length; if (/选择模板|选个风格/.test(text) || imageCount >= 4 || root.querySelector('.template-list, .template-item-wrap, .item-img')) { roots.push(root); } } }; document.querySelectorAll('#choose-style-box, .choose-style-box-content').forEach(addRoot); [...document.querySelectorAll('.close-button, [aria-label="关闭"]')].forEach((close) => { let current = close.parentElement; let depth = 0; while (current && current !== document.body && current !== document.documentElement && depth < 8) { const className = String(current.className || ''); const imageCount = current.querySelectorAll('img').length; const isAppShell = current.id === 'root' || current.id === 'pictureEditor' || /picture-editor-content|PictureEditorControl|control-config/i.test(className); if (!isAppShell && imageCount >= 4) { addRoot(current); break; } current = current.parentElement; depth += 1; } }); return roots; } function scheduleStylePickerLayout(root) { forceStylePickerLayout(root); requestAnimationFrame(() => forceStylePickerLayout(root)); [80, 220, 520, 900].forEach((delay) => window.setTimeout(() => forceStylePickerLayout(root), delay)); } function forceStylePickerLayout(picker) { if (!(picker instanceof HTMLElement)) return; document.documentElement.dataset.zbaiStylePickerOpen = '1'; const root = picker.id === 'choose-style-box' ? picker : picker.closest('#choose-style-box') || (picker.classList.contains('choose-style-box-content') ? picker : picker.closest('.choose-style-box-content')) || picker; if (!(root instanceof HTMLElement)) return; root.querySelectorAll('[data-zbai-style-picker], [data-zbai-style-picker-root], [data-zbai-style-picker-panel]').forEach((node) => { if (!(node instanceof HTMLElement)) return; node.removeAttribute('data-zbai-style-picker'); node.removeAttribute('data-zbai-style-picker-root'); node.removeAttribute('data-zbai-style-picker-panel'); }); root.setAttribute('data-zbai-style-picker', '1'); root.setAttribute('data-zbai-style-picker-root', '1'); const viewport = getVisualViewportBox(); const modalWidth = Math.max(280, Math.min(430, viewport.width - 24)); const modalMaxHeight = Math.max(320, viewport.height - 80); const contentMaxHeight = Math.max(220, viewport.height - 128); const centerX = viewport.left + viewport.width / 2; const centerY = viewport.top + viewport.height / 2; document.documentElement.style.setProperty('--zbai-style-left', `${centerX}px`); document.documentElement.style.setProperty('--zbai-style-top', `${centerY}px`); document.documentElement.style.setProperty('--zbai-style-width', `${modalWidth}px`); document.documentElement.style.setProperty('--zbai-style-max-height', `${modalMaxHeight}px`); document.documentElement.style.setProperty('--zbai-style-content-max-height', `${contentMaxHeight}px`); const panels = [ root.querySelector('.choose-style-box-content'), root.classList.contains('choose-style-box-content') ? root : null, root.querySelector('.choose-style-container'), ].filter((node, index, list) => node instanceof HTMLElement && list.indexOf(node) === index); Object.assign(root.style, { position: 'fixed', left: `${centerX}px`, right: 'auto', top: `${centerY}px`, bottom: 'auto', width: `${modalWidth}px`, minWidth: '0', maxWidth: '430px', height: 'auto', maxHeight: `${modalMaxHeight}px`, overflow: 'hidden', transform: 'translate(-50%, -50%)', translate: 'none', margin: '0', boxSizing: 'border-box', zIndex: '10060', }); root.style.setProperty('position', 'fixed', 'important'); root.style.setProperty('left', `${centerX}px`, 'important'); root.style.setProperty('right', 'auto', 'important'); root.style.setProperty('top', `${centerY}px`, 'important'); root.style.setProperty('bottom', 'auto', 'important'); root.style.setProperty('width', `${modalWidth}px`, 'important'); root.style.setProperty('max-width', '430px', 'important'); root.style.setProperty('min-width', '0', 'important'); root.style.setProperty('transform', 'translate(-50%, -50%)', 'important'); root.style.setProperty('translate', 'none', 'important'); root.style.setProperty('max-height', `${modalMaxHeight}px`, 'important'); root.style.setProperty('overflow-x', 'hidden', 'important'); root.style.setProperty('overflow-y', 'hidden', 'important'); root.style.setProperty('box-sizing', 'border-box', 'important'); panels.forEach((shell) => { shell.setAttribute('data-zbai-style-picker-panel', '1'); Object.assign(shell.style, { position: 'relative', left: 'auto', right: 'auto', top: 'auto', bottom: 'auto', width: '100%', minWidth: '0', maxWidth: '100%', height: 'auto', maxHeight: `${modalMaxHeight}px`, overflow: 'hidden', transform: 'none', translate: 'none', margin: '0', boxSizing: 'border-box', }); shell.style.setProperty('position', 'relative', 'important'); shell.style.setProperty('width', '100%', 'important'); shell.style.setProperty('max-width', '100%', 'important'); shell.style.setProperty('min-width', '0', 'important'); shell.style.setProperty('transform', 'none', 'important'); shell.style.setProperty('translate', 'none', 'important'); shell.style.setProperty('left', 'auto', 'important'); shell.style.setProperty('right', 'auto', 'important'); shell.style.setProperty('top', 'auto', 'important'); shell.style.setProperty('bottom', 'auto', 'important'); shell.style.setProperty('max-height', `${modalMaxHeight}px`, 'important'); shell.style.setProperty('overflow-x', 'hidden', 'important'); shell.style.setProperty('overflow-y', 'auto', 'important'); shell.style.setProperty('box-sizing', 'border-box', 'important'); }); const content = root.matches('.choose-style-content') ? root : root.querySelector('.choose-style-content') || root.closest('.choose-style-content'); if (content instanceof HTMLElement) { Object.assign(content.style, { maxHeight: `${contentMaxHeight}px`, overflowY: 'auto', overflowX: 'hidden', WebkitOverflowScrolling: 'touch', }); content.style.setProperty('max-height', `${contentMaxHeight}px`, 'important'); content.style.setProperty('overflow-y', 'auto', 'important'); content.style.setProperty('overflow-x', 'hidden', 'important'); } const list = root.matches('.list-content') ? root : root.querySelector('.list-content') || root.closest('.list-content'); if (list instanceof HTMLElement) { Object.assign(list.style, { display: 'flex', flexWrap: 'nowrap', overflowX: 'auto', overflowY: 'hidden', }); list.style.setProperty('display', 'flex', 'important'); list.style.setProperty('flex-wrap', 'nowrap', 'important'); list.style.setProperty('overflow-x', 'auto', 'important'); list.style.setProperty('overflow-y', 'hidden', 'important'); } const templateList = root.matches('.template-list') ? root : root.querySelector('.template-list') || root.closest('.template-list'); if (templateList instanceof HTMLElement) { Object.assign(templateList.style, { display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: '10px', width: '100%', }); templateList.style.setProperty('display', 'grid', 'important'); templateList.style.setProperty('grid-template-columns', 'repeat(2, minmax(0, 1fr))', 'important'); templateList.style.setProperty('gap', '10px', 'important'); templateList.style.setProperty('width', '100%', 'important'); templateList.style.setProperty('max-width', '100%', 'important'); } } function getVisualViewportBox() { const vv = window.visualViewport; const fallbackWidth = Math.min(window.innerWidth || document.documentElement.clientWidth || 430, 430); const fallbackHeight = window.innerHeight || document.documentElement.clientHeight || 760; return { left: vv ? vv.offsetLeft : 0, top: vv ? vv.offsetTop : 0, width: Math.max(320, Math.min(vv ? vv.width : fallbackWidth, window.innerWidth || fallbackWidth)), height: Math.max(420, vv ? vv.height : fallbackHeight), }; } function ensureTemplateActions() { let actions = document.getElementById('zbai-template-actions'); if (actions) return; const templates = [ ['珠宝海报', '/create/ai-effects/jewelry-poster'], ['道具展示', '/create/ai-effects/jewelry-display'], ['社交媒体图', '/create/ai-effects/social-media'], ['大片模特', '/create/ai-effects/jewelry-models-display'], ['珠宝纯净图', '/create/ai-effects/jewelry-background'], ['精致摄影', '/create/ai-effects/finephotograph'], ['布料与珠宝', '/create/ai-effects/jewelry-cloth'], ['珠宝多视角', '/create/ai-effects/jewelry-multiview'], ['珠宝详情页', '/create/ai-effects/product-details-page'], ['珠宝视频', '/create/ai-effects/jewelry-360-display'], ['运镜展示', '/create/ai-effects/jewvideo2'], ]; actions = document.createElement('div'); actions.id = 'zbai-template-actions'; actions.innerHTML = '
模板功能
' + templates.map(([label, href]) => ( `` )).join(''); actions.addEventListener('click', (event) => { const button = event.target.closest('button[data-href]'); if (!button) return; event.preventDefault(); event.stopPropagation(); navigateTo(button.getAttribute('data-href')); }); const target = document.querySelector('#index-main-content--right') || document.querySelector('main.index-main') || document.body; const categoryBar = [...target.querySelectorAll('div, nav, section')].find((node) => /珠宝海报道具展示社交媒体图/.test(getElementText(node))); if (categoryBar && categoryBar.parentElement) { categoryBar.parentElement.insertBefore(actions, categoryBar); hideNode(categoryBar); return; } target.insertBefore(actions, target.firstElementChild ? target.firstElementChild.nextSibling : null); } function getText(node) { return (node && node.textContent ? node.textContent : '').replace(/\s+/g, ' ').trim(); } function getFirst(selector, root = document) { return root.querySelector(selector); } 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; } 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 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 escapeHtml(value) { return String(value).replace(/[&<>"']/g, (char) => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''', }[char])); } function markReady() { const root = getFirst(selectors.root); if (root) root.classList.add(CLASS_READY); } 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 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 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')) 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 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) ) ); } 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 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', }); } current = current.parentElement; depth += 1; } }); } 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', handleHistoryWorkTap, true); document.addEventListener('touchend', handleHistoryWorkTap, { capture: true, passive: false }); document.addEventListener('click', handleModelTap, true); document.addEventListener('touchend', handleModelTap, true); document.addEventListener('keydown', (event) => { if (event.key === 'Escape') closeSheet(); }); } function adapt() { injectStyles(); enableMobileFlag(); ensureViewport(); updatePageType(); cleanupMobileShells(); cleanupLegacyMobileArtifacts(); dismissMobileBlockers(); ensureAccountBar(); ensureHistoryButton(); runPendingAuthAction(); compactHomePage(); ensureWorkDetailFallback(); repairEditorBottomOverlay(); repairInlineStyleChooser(); [30, 120, 360, 900].forEach((delay) => window.setTimeout(repairEditorBottomOverlay, delay)); [30, 120, 360, 900].forEach((delay) => window.setTimeout(repairInlineStyleChooser, delay)); adaptExpandedStylePicker(); markReady(); ensureRunBadge(); ensureBackButton(); installEventBridge(); } function cleanupMobileShells() { if (!isMobile()) { document.getElementById('zbai-mobile-home-shell')?.remove(); document.getElementById('zbai-mobile-history-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 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(); media.addEventListener ? media.addEventListener('change', enableMobileFlag) : media.addListener(enableMobileFlag); window.addEventListener('resize', enableMobileFlag, { passive: true }); if (window.visualViewport) { window.visualViewport.addEventListener('resize', adaptExpandedStylePicker, { passive: true }); window.visualViewport.addEventListener('scroll', adaptExpandedStylePicker, { passive: true }); window.visualViewport.addEventListener('resize', adaptOriginalStylePopup, { passive: true }); window.visualViewport.addEventListener('scroll', adaptOriginalStylePopup, { passive: true }); } } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', boot, { once: true }); injectStyles(); enableMobileFlag(); } else { boot(); } })();