diff --git a/versions.json b/versions.json index 24211c8..8772513 100644 --- a/versions.json +++ b/versions.json @@ -1,3 +1,3 @@ { - "1.3.0": "1.4.5" + "1.3.6": "1.4.5" } diff --git a/x b/x new file mode 100644 index 0000000..359667f --- /dev/null +++ b/x @@ -0,0 +1,729 @@ +/* styles.css — 全局样式表,用于渲染及导出样式。 */ + +/* =========================================================== */ +/* UI 样式 */ +/* 共用样式与去重 */ +/* =========================================================== */ + +/* 主题变量统一常用色值/阴影/渐变 */ +:root { + --c-bg: #ffffff; + --c-border: #dadce0; + --c-text-muted: #5f6368; + --c-primary: #1e88e5; + --c-primary-dark: #1565c0; + --c-purple: #667eea; + --c-purple-dark: #764ba2; + --c-blue-2: #42a5f5; + + --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); + --shadow-overlay: 0 2px 4px rgba(0,0,0,0.04); + --shadow-primary-2: 0 2px 6px rgba(30, 136, 229, 0.3); + --shadow-primary-4: 0 4px 8px rgba(30, 136, 229, 0.4); + --shadow-purple-2: 0 2px 6px rgba(102, 126, 234, 0.3); + --shadow-purple-4: 0 4px 8px rgba(102, 126, 234, 0.4); + + --grad-primary: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%); + --grad-purple: linear-gradient(135deg, var(--c-purple) 0%, var(--c-purple-dark) 100%); + --grad-blue: linear-gradient(135deg, var(--c-blue-2) 0%, var(--c-primary) 100%); + --grad-toolbar: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); + --grad-toolbar-bottom: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); + --grad-xhs-bg: linear-gradient(135deg, #f5f7fa 0%, #e8eaf6 100%); +} + +/* 通用按钮外观(不含背景与尺寸) */ +.copy-button, +.refresh-button, +.toolbar-button, +.msg-ok-btn, +.xhs-slice-btn { + border: none; + border-radius: 6px; + cursor: pointer; + font-weight: 500; + transition: all 0.2s ease; +} + +/* 通用按钮 hover 的位移效果(各自保留独立阴影) */ +.copy-button:hover, +.refresh-button:hover, +.toolbar-button:hover, +.msg-ok-btn:hover { + transform: translateY(-1px); +} + +/* 下拉选择的通用外观(各自保留尺寸差异) */ +.platform-select, +.wechat-select, +.style-select { + border: 1px solid var(--c-border); + border-radius: 6px; + background: white; + font-size: 13px; + cursor: pointer; + transition: all 0.2s ease; + box-shadow: var(--shadow-sm); +} + +/* 平台与公众号选择的相同 hover/focus 效果(style-select 单独增强) */ +.platform-select:hover, +.wechat-select:hover { border-color: var(--c-primary); } +.platform-select:focus, +.wechat-select:focus { outline: none; border-color: var(--c-primary); } +.note-preview { + grid-template-rows: auto 1fr; + grid-template-columns: 1fr; + display: grid; + min-height: 100%; + width: 100%; + height: 100%; + background-color: var(--c-bg); +} + +/* 预览内部平台容器需要可伸缩: */ +.wechat-preview-container:not([style*="display: none"]), +.xiaohongshu-preview-container:not([style*="display: none"]) { + flex: 1; + display: grid !important; + grid-template-rows: auto 1fr; + min-height: 0; /* 允许内部滚动区域正确计算高度 */ +} + +.render-div { + overflow-y: auto; + padding: 10px; + -webkit-user-select: text; + user-select: text; + min-height: 0; +} + +/* 文章包裹:模拟公众号编辑器阅读宽度 */ +.wechat-article-wrapper { + max-width: 720px; + margin: 0 auto; + padding: 12px 18px 80px 18px; /* 底部留白方便滚动到底部操作 */ + box-sizing: border-box; +} + +/* 若内部 section.note-to-mp 主题没有撑开,确保文本可见基色 */ +.wechat-article-wrapper .note-to-mp { + background: transparent; +} + +.preview-toolbar { + display: grid; + position: relative; + grid-template-columns: repeat(auto-fit, minmax(160px, max-content)); + gap: 12px; + padding: 8px 12px; + align-items: center; + min-height: auto; + border-bottom: 1px solid #e8eaed; + background: var(--grad-toolbar); + box-shadow: var(--shadow-overlay); +} + +.copy-button { + margin-right: 10px; + padding: 6px 14px; + background: var(--grad-primary); + color: white; + font-size: 13px; + box-shadow: var(--shadow-primary-2); +} + +.copy-button:hover { box-shadow: var(--shadow-primary-4); } + +.refresh-button { + margin-right: 10px; + padding: 6px 14px; + background: var(--grad-purple); + color: white; + font-size: 13px; + box-shadow: var(--shadow-purple-2); +} + +.refresh-button:hover { box-shadow: var(--shadow-purple-4); } + +.upload-input { + margin-left: 10px; + padding: 6px 10px; + border: 1px solid var(--c-border); + border-radius: 6px; + font-size: 13px; + transition: all 0.2s ease; +} + +.upload-input[type="file"] { + cursor: pointer; +} + +.upload-input:focus, +.style-select:focus { + outline: none; + border-color: var(--c-primary); + box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.1); +} + +/* 单选按钮样式 */ +.input-style[type="radio"] { + width: 16px; + height: 16px; + margin: 0 6px 0 0; + cursor: pointer; + accent-color: var(--c-primary); +} + +/* Label 标签样式 */ +label { + font-size: 13px; + color: var(--c-text-muted); + cursor: pointer; + user-select: none; + transition: color 0.2s ease; +} + +label:hover { color: var(--c-primary); } + +.style-label { + margin-right: 10px; + font-size: 13px; + color: var(--c-text-muted); + font-weight: 500; + white-space: nowrap; +} + +.style-select { + margin-right: 10px; + width: 120px; + padding: 6px 10px; +} + +.style-select:hover { + border-color: var(--c-primary); + box-shadow: 0 2px 6px rgba(30, 136, 229, 0.2); +} + +/* focus 规则见与 .upload-input:focus 的组合声明 */ + +.msg-view { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: var(--background-primary); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + font-size: 18px; + z-index: 9999; + display: none; +} + +.msg-title { + margin-bottom: 20px; + max-width: 90%; +} + +.msg-ok-btn { + padding: 10px 24px; + margin: 0 8px; + background: var(--grad-primary); + color: white; + font-size: 14px; + box-shadow: var(--shadow-primary-2); + min-width: 80px; +} + +.msg-ok-btn:hover { box-shadow: var(--shadow-primary-4); } + +.msg-ok-btn:active { + transform: translateY(0); +} + +.note-mpcard-wrapper { + margin: 20px 20px; + background-color: rgb(250, 250, 250); + padding: 10px 20px; + border-radius: 10px; +} +.note-mpcard-content { + display: grid; + grid-auto-flow: column; + align-items: center; +} +.note-mpcard-headimg { + border: none !important; + border-radius: 27px !important; + box-shadow: none !important; + width: 54px !important; + height: 54px !important; + margin: 0 !important; +} +.note-mpcard-info { + margin-left: 10px; +} +.note-mpcard-nickname { + font-size: 17px; + font-weight: 500; + color: rgba(0, 0, 0, 0.9); +} + +.note-mpcard-signature { + font-size: 14px; + color: rgba(0, 0, 0, 0.55); +} +.note-mpcard-foot { + margin-top: 20px; + padding-top: 10px; + border-top: 1px solid #ececec; + font-size: 14px; + color: rgba(0, 0, 0, 0.3); +} + +.loading-wrapper { + display: grid; + width: 100%; + height: 100%; + place-items: center; +} + +.loading-spinner { + width: 50px; /* 可调整大小 */ + height: 50px; + border: 4px solid #fcd6ff; /* 底色,浅灰 */ + border-top: 4px solid #bb0cdf; /* 主色,蓝色顶部产生旋转感 */ + border-radius: 50%; /* 圆形 */ + animation: spin 1s linear infinite; /* 旋转动画 */ +} + +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +/* =========================================================== */ +/* Toolbar 行样式 */ +/* =========================================================== */ + +.toolbar-line { + display: grid; + grid-auto-flow: column; + align-items: center; + gap: 12px; + padding: 8px 12px; + background: white; + border-radius: 6px; + margin: 8px 10px; + box-shadow: var(--shadow-sm); +} + +.toolbar-line.flex-wrap { + grid-auto-flow: row; + grid-template-columns: repeat(auto-fit, minmax(160px, max-content)); +} + +.platform-selector-line { + background: linear-gradient(135deg, #fff3e0 0%, #ffffff 100%) !important; + border-left: 4px solid var(--c-primary); +} + +/* 平台选择容器:单层 Grid 排列 */ +.platform-chooser-container.platform-chooser-grid { + display: grid; + grid-auto-flow: column; + align-items: center; + gap: 12px; + padding: 8px 12px; + background: white; /* 被 .platform-selector-line 的背景覆写 */ + border-radius: 6px; + margin: 8px 10px; + box-shadow: var(--shadow-sm); +} + +/* =========================================================== */ +/* 平台选择器样式 */ +/* =========================================================== */ + +.platform-select { + padding: 6px 12px; + min-width: 150px; + font-weight: 500; +} + +/* =========================================================== */ +/* 微信公众号选择器样式 */ +/* =========================================================== */ + +.wechat-select { + padding: 6px 12px; + min-width: 200px; +} + +/* =========================================================== */ +/* 按钮样式 */ +/* =========================================================== */ + +.toolbar-button { + padding: 6px 14px; + background: var(--grad-primary); + color: white; + font-size: 13px; + box-shadow: var(--shadow-primary-2); +} + +.toolbar-button:hover { box-shadow: var(--shadow-primary-4); } + +.toolbar-button.purple-gradient { + background: var(--grad-purple); + box-shadow: var(--shadow-purple-2); +} + +.toolbar-button.purple-gradient:hover { box-shadow: var(--shadow-purple-4); } + +/* =========================================================== */ +/* 分隔线样式 */ +/* =========================================================== */ + +.toolbar-separator { + width: 1px; + height: 24px; + background: var(--c-border); + margin: 0 4px; +} + +/* =========================================================== */ +/* Doc Modal 样式 */ +/* =========================================================== */ + +.doc-modal { + width: 640px; + height: 720px; +} + +.doc-modal-content { + display: grid; + grid-template-rows: auto auto 1fr; + row-gap: 8px; + min-height: 0; +} + +.doc-modal-title { + margin-top: 0.5em; +} + +.doc-modal-desc { + margin-bottom: 1em; + -webkit-user-select: text; + user-select: text; +} + +.doc-modal-iframe { + min-height: 0; +} + +/* =========================================================== */ +/* Setting Tab 帮助文档样式 */ +/* =========================================================== */ + +.setting-help-section { + display: grid; + grid-auto-flow: column; + align-items: center; + column-gap: 10px; +} + +.setting-help-title { + margin-right: 10px; +} + +/* =========================================================== */ +/* Xiaohongshu WebView 样式 */ +/* =========================================================== */ + +.xhs-webview { + display: none; + width: 1200px; + height: 800px; +} + +/* =========================================================== */ +/* Xiaohongshu Preview View 样式 */ +/* =========================================================== */ + +.xiaohongshu-preview-container { + width: 100%; + height: 100%; +} + +.xhs-preview-container:not([style*="display: none"]) { + display: grid !important; + grid-template-rows: auto 1fr auto; + height: 100%; + background: var(--grad-xhs-bg); + min-height: 0; +} + +.xhs-page-container { + overflow-y: auto; + overflow-x: hidden; + display: grid; + align-content: start; + justify-content: center; + padding: 0px; + background: radial-gradient(ellipse at top, rgba(255,255,255,0.1) 0%, transparent 70%); + min-height: 0; /* 允许子项正确收缩和滚动 */ +} + +/* 小红书单页包裹器:为缩放后的页面预留正确的布局空间 */ +.xhs-page-wrapper { + /* 显示尺寸(缩放后):540 × 720 */ + width: 540px; + height: 720px; + margin: 0px auto; + position: relative; + overflow: visible; +} + +/* 小红书单页样式:实际尺寸 1080×1440,通过 scale 缩放到 540×720 */ +.xhs-page { + /* 实际尺寸由 renderPage 设置(1080×1440) */ + transform-origin: top left; + transform: scale(0.5); /* 540/1080 = 0.5 */ + background: white; + box-shadow: 0 4px 12px rgba(0,0,0,0.1); + border-radius: 8px; +} + +.xhs-page img { + max-width: 100%; + height: auto; +} + +.xhs-top-toolbar { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(140px, max-content)); + align-items: center; + gap: 12px; + padding: 8px 12px; + background: var(--grad-toolbar); + border-bottom: 1px solid #e8eaed; + box-shadow: var(--shadow-overlay); +} + +.toolbar-label { + font-size: 11px; + color: var(--c-text-muted); + font-weight: 500; + white-space: nowrap; +} + +.xhs-select { + padding: 4px 8px; + border: 1px solid var(--c-border); + border-radius: 4px; + background: white; + font-size: 11px; + cursor: pointer; + transition: border-color 0.2s ease; +} + +.xhs-select:hover { + border-color: var(--c-primary); +} + +.xhs-select:focus { + outline: none; + border-color: var(--c-primary); +} + +.font-size-group { + display: grid; + grid-auto-flow: column; + align-items: center; + gap: 6px; + background: white; + border: 1px solid var(--c-border); + border-radius: 4px; + padding: 2px; +} + +.font-size-btn { + width: 24px; + height: 24px; + border: none; + background: transparent; + border-radius: 3px; + cursor: pointer; + font-size: 16px; + color: #5f6368; + transition: background 0.2s ease; +} + +.font-size-btn:hover { + background: #f1f3f4; +} + +.font-size-display { + min-width: 24px; + text-align: center; + font-size: 12px; + color: #202124; + font-weight: 500; +} + +.xhs-page-navigation { + display: grid; + grid-auto-flow: column; + justify-content: center; + align-items: center; + gap: 16px; + padding: 12px; + background: white; + border-bottom: 1px solid #e8eaed; +} + +.xhs-nav-btn { + width: 36px; + height: 36px; + border: 1px solid var(--c-border); + border-radius: 50%; + cursor: pointer; + font-size: 20px; + background: white; + color: #5f6368; + transition: all 0.2s ease; + box-shadow: var(--shadow-sm); +} + +.xhs-nav-btn:hover { + background: var(--grad-primary); + color: white; + border-color: var(--c-primary); +} + +.xhs-page-number { + font-size: 14px; + min-width: 50px; + text-align: center; + color: #202124; + font-weight: 500; +} + +.xhs-bottom-toolbar { + display: grid; + grid-auto-flow: column; + justify-content: center; + gap: 12px; + padding: 12px 16px; + background: var(--grad-toolbar-bottom); + border-top: 1px solid #e8eaed; + box-shadow: 0 -2px 4px rgba(0,0,0,0.04); +} + +.xhs-slice-btn { + padding: 8px 20px; + background: var(--grad-primary); + color: white; + font-size: 13px; + box-shadow: var(--shadow-primary-2); +} + +.xhs-slice-btn:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(30, 136, 229, 0.4); +} + +.xhs-slice-btn.secondary { + background: var(--grad-blue); + box-shadow: 0 2px 6px rgba(66, 165, 245, 0.3); +} + +.xhs-slice-btn.secondary:hover { + box-shadow: 0 4px 12px rgba(66, 165, 245, 0.4); +} + +/* =========================================================== */ +/* Xiaohongshu Login Modal 样式 */ +/* =========================================================== */ + +.xiaohongshu-login-modal { + width: 400px; + padding: 20px; +} + +.xhs-login-title { + text-align: center; + margin-bottom: 20px; + color: #ff4757; +} + +.xhs-login-desc { + text-align: center; + color: #666; + margin-bottom: 30px; +} + +.xhs-code-container { + display: grid; + grid-template-columns: auto 1fr auto; + align-items: center; + gap: 10px; + margin-bottom: 20px; +} + +.xhs-code-label { + min-width: 80px; +} + +.xhs-code-input-wrapper { + flex: 1; +} + +.xhs-input-full { + width: 100%; + font-size: 16px; +} + +.xhs-send-code-btn { + min-width: 120px; + margin-left: 10px; +} + +.xhs-status-message { + min-height: 30px; + margin-bottom: 20px; + text-align: center; + font-size: 14px; +} + +.xhs-status-message.success { + color: #27ae60; +} + +.xhs-status-message.error { + color: #e74c3c; +} + +.xhs-status-message.info { + color: #3498db; +} + +.xhs-button-container { + display: grid; + grid-auto-flow: column; + justify-content: center; + gap: 15px; + margin-top: 20px; +} + +.xhs-login-btn { + min-width: 100px; +} +