update at 2025-10-09 21:19:57
This commit is contained in:
douboer
@@ -9,7 +9,7 @@ import { UploadImageToWx } from './imagelib';
|
||||
import { NMPSettings } from './settings';
|
||||
import AssetsManager from './assets';
|
||||
import InlineCSS from './inline-css';
|
||||
import { wxGetToken, wxAddDraft, wxBatchGetMaterial, DraftArticle, DraftImageMediaId, DraftImages, wxAddDraftImages } from './weixin-api';
|
||||
import { wxGetToken, wxAddDraft, wxBatchGetMaterial, DraftArticle, DraftImageMediaId, DraftImages, wxAddDraftImages } from './wechat/weixin-api';
|
||||
import { MDRendererCallback } from './markdown/extension';
|
||||
import { MarkedParser } from './markdown/parser';
|
||||
import { LocalImageManager, LocalFile } from './markdown/local-file';
|
||||
@@ -855,4 +855,4 @@ export class ArticleRender implements MDRendererCallback {
|
||||
const key = category + ':' + id;
|
||||
this.cachedElements.set(key, data);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,10 +4,10 @@
|
||||
*/
|
||||
|
||||
import { getBlobArrayBuffer } from "obsidian";
|
||||
import { wxUploadImage } from "./weixin-api";
|
||||
import { wxUploadImage } from "./wechat/weixin-api";
|
||||
import { NMPSettings } from "./settings";
|
||||
import { IsWasmReady, LoadWasm } from "./wasm/wasm";
|
||||
import AssetsManager from "./assets";
|
||||
import AssetsManager from "./assets";
|
||||
|
||||
declare function GoWebpToJPG(data: Uint8Array): Uint8Array; // wasm 返回 Uint8Array
|
||||
declare function GoWebpToPNG(data: Uint8Array): Uint8Array;
|
||||
@@ -51,4 +51,4 @@ export async function UploadImageToWx(data: Blob, filename: string, token: strin
|
||||
data = new Blob([bufferPart], { type: data.type });
|
||||
}
|
||||
return await wxUploadImage(data, filename, token, type);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
import { Tokens, MarkedExtension} from "marked";
|
||||
import { Extension } from "./extension";
|
||||
import AssetsManager from "src/assets";
|
||||
import { wxWidget } from "src/weixin-api";
|
||||
import { wxWidget } from 'src/wechat/weixin-api';
|
||||
|
||||
const icon_note = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-pencil"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"></path><path d="m15 5 4 4"></path></svg>`
|
||||
const icon_abstract = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-clipboard-list"><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><path d="M12 11h4"></path><path d="M12 16h4"></path><path d="M8 11h.01"></path><path d="M8 16h.01"></path></svg>`
|
||||
|
||||
@@ -7,7 +7,7 @@ import { MathRendererQueue } from "./math";
|
||||
import { Extension } from "./extension";
|
||||
import { UploadImageToWx } from "../imagelib";
|
||||
import AssetsManager from "src/assets";
|
||||
import { wxWidget } from "src/weixin-api";
|
||||
import { wxWidget } from 'src/wechat/weixin-api';
|
||||
|
||||
export class CardDataManager {
|
||||
private cardData: Map<string, string>;
|
||||
|
||||
@@ -4,7 +4,7 @@ import { Tokens, MarkedExtension } from "marked";
|
||||
import { Extension } from "./extension";
|
||||
import AssetsManager from "src/assets";
|
||||
import { ExpertSettings } from "src/expert-settings";
|
||||
import { wxWidget } from "src/weixin-api";
|
||||
import { wxWidget } from 'src/wechat/weixin-api';
|
||||
|
||||
export class HeadingRenderer extends Extension {
|
||||
index = [0, 0, 0, 0];
|
||||
|
||||
@@ -4,7 +4,7 @@ import { Tokens, MarkedExtension } from "marked";
|
||||
import { Extension } from "./extension";
|
||||
import { NMPSettings } from "src/settings";
|
||||
import { uevent } from "src/utils";
|
||||
import { wxWidget } from "src/weixin-api";
|
||||
import { wxWidget } from 'src/wechat/weixin-api';
|
||||
|
||||
const widgetCache = new Map<string, string>();
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
|
||||
import { App, TextAreaComponent, PluginSettingTab, Setting, Notice, sanitizeHTMLToDom } from 'obsidian';
|
||||
import NoteToMpPlugin from './main';
|
||||
import { wxGetToken,wxEncrypt } from './weixin-api';
|
||||
import { wxGetToken, wxEncrypt } from './wechat/weixin-api';
|
||||
import { cleanMathCache } from './markdown/math';
|
||||
import { NMPSettings } from './settings';
|
||||
import { DocModal } from './doc-modal';
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
* - 批量发布预设 / 图片处理 / 样式控制等选项
|
||||
*/
|
||||
|
||||
import { wxKeyInfo } from './weixin-api';
|
||||
import { wxKeyInfo } from './wechat/weixin-api';
|
||||
|
||||
export class NMPSettings {
|
||||
defaultStyle: string;
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
*/
|
||||
|
||||
import { App, sanitizeHTMLToDom, requestUrl, Platform } from "obsidian";
|
||||
import * as postcss from "./postcss/postcss";
|
||||
import * as postcss from "./postcss/postcss"; // 内置 PostCSS runtime，解析主题 CSS 用于内联样式
|
||||
|
||||
let PluginVersion = "0.0.0";
|
||||
let PlugPlatform = "obsidian";
|
||||
|
||||
@@ -17,6 +17,8 @@ import { sliceCurrentPage, sliceAllPages } from './slice';
|
||||
|
||||
const XHS_PREVIEW_DEFAULT_WIDTH = 540;
|
||||
const XHS_PREVIEW_WIDTH_OPTIONS = [1080, 720, 540, 360];
|
||||
|
||||
// 字号控制常量：一处修改即可同步 UI 显示、输入校验和渲染逻辑
|
||||
const XHS_FONT_SIZE_MIN = 18;
|
||||
const XHS_FONT_SIZE_MAX = 45;
|
||||
const XHS_FONT_SIZE_DEFAULT = 36;
|
||||
@@ -32,14 +34,11 @@ export class XiaohongshuPreview {
|
||||
currentFile: TFile | null = null;
|
||||
|
||||
// UI 元素
|
||||
topToolbar!: HTMLDivElement;
|
||||
templateSelect!: HTMLSelectElement;
|
||||
fontSizeInput!: HTMLInputElement;
|
||||
previewWidthSelect!: HTMLSelectElement;
|
||||
|
||||
pageContainer!: HTMLDivElement;
|
||||
bottomToolbar!: HTMLDivElement;
|
||||
pageNavigation!: HTMLDivElement;
|
||||
pageNumberInput!: HTMLInputElement;
|
||||
pageTotalLabel!: HTMLSpanElement;
|
||||
styleEl: HTMLStyleElement | null = null; // 主题样式注入节点
|
||||
@@ -78,49 +77,28 @@ export class XiaohongshuPreview {
|
||||
this.container.appendChild(this.styleEl);
|
||||
}
|
||||
|
||||
// 顶部工具栏
|
||||
this.buildTopToolbar();
|
||||
|
||||
// 页面容器
|
||||
this.pageContainer = this.container.createDiv({ cls: 'xhs-page-container' });
|
||||
|
||||
// 分页导航
|
||||
this.buildPageNavigation();
|
||||
|
||||
// 底部操作栏
|
||||
this.buildBottomToolbar();
|
||||
}
|
||||
|
||||
/**
|
||||
* 构建顶部工具栏
|
||||
*/
|
||||
private buildTopToolbar(): void {
|
||||
this.topToolbar = this.container.createDiv({ cls: 'xhs-top-toolbar' });
|
||||
|
||||
// 刷新按钮
|
||||
const refreshBtn = this.topToolbar.createEl('button', { text: '🔄 刷新', cls: 'toolbar-button purple-gradient' });
|
||||
refreshBtn.onclick = () => this.onRefresh();
|
||||
|
||||
// 发布按钮
|
||||
const publishBtn = this.topToolbar.createEl('button', { text: '📤 发布', cls: 'toolbar-button' });
|
||||
publishBtn.onclick = () => this.onPublish();
|
||||
|
||||
// 分隔线
|
||||
const separator2 = this.topToolbar.createDiv({ cls: 'toolbar-separator' });
|
||||
|
||||
// 模板选择
|
||||
const templateLabel = this.topToolbar.createDiv({ cls: 'toolbar-label' });
|
||||
templateLabel.innerText = '模板';
|
||||
this.templateSelect = this.topToolbar.createEl('select', { cls: 'xhs-select' });
|
||||
const board = this.container.createDiv({ cls: 'xhs-board' });
|
||||
|
||||
const templateCard = this.createGridCard(board, 'xhs-area-template');
|
||||
const templateLabel = templateCard.createDiv({ cls: 'xhs-label', text: '模板' });
|
||||
this.templateSelect = templateCard.createEl('select', { cls: 'xhs-select' });
|
||||
['默认模板', '简约模板', '杂志模板'].forEach(name => {
|
||||
const option = this.templateSelect.createEl('option');
|
||||
option.value = name;
|
||||
option.text = name;
|
||||
});
|
||||
|
||||
const previewWidthLabel = this.topToolbar.createDiv({ cls: 'toolbar-label' });
|
||||
previewWidthLabel.innerText = '预览宽度';
|
||||
this.previewWidthSelect = this.topToolbar.createEl('select', { cls: 'xhs-select' });
|
||||
|
||||
const refreshCard = this.createGridCard(board, 'xhs-area-refresh');
|
||||
const refreshBtn = refreshCard.createEl('button', { text: '🔄 刷新', cls: 'toolbar-button purple-gradient' });
|
||||
refreshBtn.onclick = () => this.onRefresh();
|
||||
|
||||
const publishCard = this.createGridCard(board, 'xhs-area-publish');
|
||||
const publishBtn = publishCard.createEl('button', { text: '📤 发布', cls: 'toolbar-button' });
|
||||
publishBtn.onclick = () => this.onPublish();
|
||||
|
||||
const previewCard = this.createGridCard(board, 'xhs-area-preview');
|
||||
const previewLabel = previewCard.createDiv({ cls: 'xhs-label', text: '预览宽度' });
|
||||
this.previewWidthSelect = previewCard.createEl('select', { cls: 'xhs-select' });
|
||||
const currentPreviewWidth = this.settings.xhsPreviewWidth || XHS_PREVIEW_DEFAULT_WIDTH;
|
||||
XHS_PREVIEW_WIDTH_OPTIONS.forEach(value => {
|
||||
const option = this.previewWidthSelect.createEl('option');
|
||||
@@ -141,12 +119,11 @@ export class XiaohongshuPreview {
|
||||
this.previewWidthSelect.value = String(this.settings.xhsPreviewWidth || XHS_PREVIEW_DEFAULT_WIDTH);
|
||||
}
|
||||
};
|
||||
|
||||
// 字号控制（可直接编辑）
|
||||
const fontSizeLabel = this.topToolbar.createDiv({ cls: 'toolbar-label' });
|
||||
fontSizeLabel.innerText = '字号';
|
||||
const fontSizeGroup = this.topToolbar.createDiv({ cls: 'font-size-group' });
|
||||
|
||||
|
||||
const fontCard = this.createGridCard(board, 'xhs-area-font');
|
||||
fontCard.createDiv({ cls: 'xhs-label', text: '字号' });
|
||||
const fontSizeGroup = fontCard.createDiv({ cls: 'font-size-group' });
|
||||
|
||||
const decreaseBtn = fontSizeGroup.createEl('button', { text: '−', cls: 'font-size-btn' });
|
||||
decreaseBtn.onclick = () => this.changeFontSize(-1);
|
||||
|
||||
@@ -159,24 +136,19 @@ export class XiaohongshuPreview {
|
||||
value: String(XHS_FONT_SIZE_DEFAULT)
|
||||
}
|
||||
});
|
||||
this.fontSizeInput.style.width = '50px';
|
||||
this.fontSizeInput.style.textAlign = 'center';
|
||||
this.fontSizeInput.onchange = () => this.onFontSizeInputChanged();
|
||||
|
||||
const increaseBtn = fontSizeGroup.createEl('button', { text: '＋', cls: 'font-size-btn' });
|
||||
increaseBtn.onclick = () => this.changeFontSize(1);
|
||||
}
|
||||
|
||||
/**
|
||||
* 构建分页导航
|
||||
*/
|
||||
private buildPageNavigation(): void {
|
||||
this.pageNavigation = this.container.createDiv({ cls: 'xhs-page-navigation' });
|
||||
|
||||
const prevBtn = this.pageNavigation.createEl('button', { text: '‹', cls: 'xhs-nav-btn' });
|
||||
|
||||
const contentWrapper = board.createDiv({ cls: 'xhs-area-content' });
|
||||
this.pageContainer = contentWrapper.createDiv({ cls: 'xhs-page-container' });
|
||||
|
||||
const paginationCard = this.createGridCard(board, 'xhs-area-pagination xhs-pagination');
|
||||
const prevBtn = paginationCard.createEl('button', { text: '‹', cls: 'xhs-nav-btn' });
|
||||
prevBtn.onclick = () => this.previousPage();
|
||||
|
||||
const indicator = this.pageNavigation.createDiv({ cls: 'xhs-page-indicator' });
|
||||
|
||||
const indicator = paginationCard.createDiv({ cls: 'xhs-page-indicator' });
|
||||
this.pageNumberInput = indicator.createEl('input', {
|
||||
cls: 'xhs-page-number-input',
|
||||
attr: { type: 'text', value: '1', inputmode: 'numeric', 'aria-label': '当前页码' }
|
||||
@@ -197,22 +169,20 @@ export class XiaohongshuPreview {
|
||||
this.pageNumberInput.onblur = () => this.handlePageNumberInput();
|
||||
|
||||
this.pageTotalLabel = indicator.createEl('span', { cls: 'xhs-page-number-total', text: '/1' });
|
||||
|
||||
const nextBtn = this.pageNavigation.createEl('button', { text: '›', cls: 'xhs-nav-btn' });
|
||||
|
||||
const nextBtn = paginationCard.createEl('button', { text: '›', cls: 'xhs-nav-btn' });
|
||||
nextBtn.onclick = () => this.nextPage();
|
||||
|
||||
const sliceCard = this.createGridCard(board, 'xhs-area-slice');
|
||||
const sliceCurrentBtn = sliceCard.createEl('button', { text: '⬇ 当前页切图', cls: 'xhs-slice-btn' });
|
||||
sliceCurrentBtn.onclick = () => this.sliceCurrentPage();
|
||||
|
||||
const sliceAllBtn = sliceCard.createEl('button', { text: '⇓ 全部页切图', cls: 'xhs-slice-btn secondary' });
|
||||
sliceAllBtn.onclick = () => this.sliceAllPages();
|
||||
}
|
||||
|
||||
/**
|
||||
* 构建底部操作栏
|
||||
*/
|
||||
private buildBottomToolbar(): void {
|
||||
this.bottomToolbar = this.container.createDiv({ cls: 'xhs-bottom-toolbar' });
|
||||
|
||||
const currentPageBtn = this.bottomToolbar.createEl('button', { text: '⬇ 当前页切图', cls: 'xhs-slice-btn' });
|
||||
currentPageBtn.onclick = () => this.sliceCurrentPage();
|
||||
|
||||
const allPagesBtn = this.bottomToolbar.createEl('button', { text: '⇓ 全部页切图', cls: 'xhs-slice-btn secondary' });
|
||||
allPagesBtn.onclick = () => this.sliceAllPages();
|
||||
private createGridCard(parent: HTMLElement, areaClass: string): HTMLDivElement {
|
||||
return parent.createDiv({ cls: `xhs-card ${areaClass}` });
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -336,6 +306,7 @@ export class XiaohongshuPreview {
|
||||
pageElement.style.width = `${actualWidth}px`;
|
||||
pageElement.style.height = `${actualHeight}px`;
|
||||
pageElement.style.transform = `scale(${scale})`;
|
||||
pageElement.style.transformOrigin = 'top left';
|
||||
pageElement.style.position = 'absolute';
|
||||
pageElement.style.top = '0';
|
||||
pageElement.style.left = '0';
|
||||
@@ -521,13 +492,10 @@ export class XiaohongshuPreview {
|
||||
* 清理资源
|
||||
*/
|
||||
destroy(): void {
|
||||
this.topToolbar = null as any;
|
||||
this.templateSelect = null as any;
|
||||
this.previewWidthSelect = null as any;
|
||||
this.fontSizeInput = null as any;
|
||||
this.pageContainer = null as any;
|
||||
this.bottomToolbar = null as any;
|
||||
this.pageNavigation = null as any;
|
||||
this.pageNumberInput = null as any;
|
||||
this.pageTotalLabel = null as any;
|
||||
this.pages = [];
|
||||
|
||||
230
styles.css
230
styles.css
@@ -460,38 +460,142 @@ label:hover { color: var(--c-primary); }
|
||||
.xiaohongshu-preview-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
padding: 12px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.xhs-preview-container:not([style*="display: none"]) {
|
||||
display: grid !important;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
height: 100%;
|
||||
.xhs-board {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
grid-template-rows: auto auto auto 1fr auto;
|
||||
grid-template-areas:
|
||||
"platform platform platform refresh publish"
|
||||
"template template preview preview font"
|
||||
"content content content content content"
|
||||
"content content content content content"
|
||||
"pagination pagination slice slice slice";
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
background: var(--grad-xhs-bg);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
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-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
padding: 10px 14px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.xhs-label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--c-text-muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.xhs-select {
|
||||
flex: 1 1 auto;
|
||||
padding: 6px 10px;
|
||||
border: 1px solid var(--c-border);
|
||||
border-radius: 6px;
|
||||
background: white;
|
||||
font-size: 13px;
|
||||
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);
|
||||
box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.1);
|
||||
}
|
||||
|
||||
.font-size-group {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 2px;
|
||||
border: 1px solid var(--c-border);
|
||||
border-radius: 6px;
|
||||
background: #f7f9fb;
|
||||
}
|
||||
|
||||
.font-size-btn {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
color: #5f6368;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.font-size-btn:hover { background: #eaf1fe; }
|
||||
|
||||
.font-size-input {
|
||||
width: 60px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
text-align: center;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.font-size-input:focus { outline: none; }
|
||||
|
||||
.xhs-area-platform,
|
||||
.xhs-board .platform-chooser-container,
|
||||
.xhs-board .platform-selector-line {
|
||||
grid-area: platform;
|
||||
}
|
||||
|
||||
.xhs-area-template { grid-area: template; }
|
||||
.xhs-area-preview { grid-area: preview; }
|
||||
.xhs-area-refresh { grid-area: refresh; justify-content: center; }
|
||||
.xhs-area-publish { grid-area: publish; justify-content: center; }
|
||||
.xhs-area-font { grid-area: font; flex-wrap: wrap; }
|
||||
.xhs-area-pagination { grid-area: pagination; justify-content: center; gap: 16px; }
|
||||
.xhs-area-slice { grid-area: slice; justify-content: center; gap: 16px; }
|
||||
|
||||
.xhs-area-content {
|
||||
grid-area: content;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 0;
|
||||
box-shadow: var(--shadow-sm);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.xhs-page-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
background: radial-gradient(ellipse at top, rgba(255,255,255,0.1) 0%, transparent 70%);
|
||||
border-radius: 12px;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 小红书单页包裹器：为缩放后的页面预留正确的布局空间 */
|
||||
.xhs-page-wrapper {
|
||||
margin: 0px auto;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 小红书单页样式：实际尺寸 1080×1440，通过 scale 缩放到 540×720 */
|
||||
.xhs-page {
|
||||
/* 实际尺寸与缩放由代码在运行时设置 */
|
||||
transform-origin: top left;
|
||||
background: white;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
border-radius: 8px;
|
||||
@@ -502,87 +606,10 @@ label:hover { color: var(--c-primary); }
|
||||
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 {
|
||||
.xhs-pagination {
|
||||
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 {
|
||||
@@ -638,17 +665,6 @@ label:hover { color: var(--c-primary); }
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.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);
|
||||
|
||||
754
styles.css.bk
Normal file
754
styles.css.bk
Normal file
@@ -0,0 +1,754 @@
|
||||
/* 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 {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-columns: 1fr;
|
||||
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 {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, max-content));
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
min-height: auto;
|
||||
padding: 8px 12px;
|
||||
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 {
|
||||
margin: 0px auto;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 小红书单页样式：实际尺寸 1080×1440，通过 scale 缩放到 540×720 */
|
||||
.xhs-page {
|
||||
/* 实际尺寸与缩放由代码在运行时设置 */
|
||||
transform-origin: top left;
|
||||
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-indicator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #202124;
|
||||
}
|
||||
|
||||
/* 可编辑页码输入框 */
|
||||
.xhs-page-number-input {
|
||||
width: 56px;
|
||||
padding: 4px 6px;
|
||||
text-align: center;
|
||||
border: 1px solid var(--c-border);
|
||||
border-radius: 6px;
|
||||
background: white;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.xhs-page-number-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--c-primary);
|
||||
box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.15);
|
||||
}
|
||||
|
||||
/* 总页数显示（只读） */
|
||||
.xhs-page-number-total {
|
||||
font-size: 14px;
|
||||
color: #5f6368;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
170
t2.html
Normal file
170
t2.html
Normal file
@@ -0,0 +1,170 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>CSS Grid 5列布局示例</title>
|
||||
<style>
|
||||
:root{
|
||||
--gap: 12px;
|
||||
--radius: 12px;
|
||||
--bg: gray;
|
||||
--panel: #111827;
|
||||
--muted: #1f2937;
|
||||
--text: #e5e7eb;
|
||||
--sub: #9ca3af;
|
||||
--accent: #3b82f6;
|
||||
}
|
||||
|
||||
*{box-sizing: border-box}
|
||||
body{
|
||||
margin:0;
|
||||
min-height:100vh;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font: 15px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.app{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.board{
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
grid-template-rows: auto auto 1fr auto;
|
||||
grid-template-areas:
|
||||
"label1_list1 label1_list1 label1_list1 btnA btnB"
|
||||
"label2_list2 label2_list2 label3_list3 label3_list3 label4"
|
||||
"content content content content content"
|
||||
"component component component btnC btnD";
|
||||
gap: var(--gap);
|
||||
background: var(--panel);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.card{
|
||||
background: var(--muted);
|
||||
border-radius: var(--radius);
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 8px;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.label{
|
||||
color: var(--sub);
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.select{
|
||||
flex: 1 1 auto;
|
||||
background: #0b1220;
|
||||
border: 1px solid #0f1a30;
|
||||
border-radius: 8px;
|
||||
padding: 6px 8px;
|
||||
color: var(--text);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn{
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
padding: 10px 20px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.btn:hover{
|
||||
background: #2563eb; /* 深蓝色 hover */
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.25);
|
||||
}
|
||||
.btn:active{
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
/* 让按钮所在卡片居中对齐 */
|
||||
.btnA, .btnB, .btnC, .btnD{
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
.content{
|
||||
grid-area: content;
|
||||
background: #0b1020;
|
||||
border: 1px dashed #223253;
|
||||
border-radius: 12px;
|
||||
padding: 18px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.label1_list1{ grid-area: label1_list1; }
|
||||
.label2_list2{ grid-area: label2_list2; }
|
||||
.label3_list3{ grid-area: label3_list3; }
|
||||
|
||||
.btnA { grid-area: btnA; }
|
||||
.btnB { grid-area: btnB; }
|
||||
.label4{ grid-area: label4; }
|
||||
.component{ grid-area: component; }
|
||||
.btnC { grid-area: btnC; }
|
||||
.btnD { grid-area: btnD; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="app">
|
||||
<h1>Grid 5列布局 Demo</h1>
|
||||
|
||||
<section class="board">
|
||||
<div class="card label1_list1">
|
||||
<span class="label">发布平台</span>
|
||||
<select class="select">
|
||||
<option>公众号</option>
|
||||
<option>小红书</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="card btnA"><button class="btn">刷新</button></div>
|
||||
<div class="card btnB"><button class="btn">发布</button></div>
|
||||
|
||||
<div class="card label2_list2">
|
||||
<span class="label">模版</span>
|
||||
<select class="select">
|
||||
<option>模版 1</option>
|
||||
<option>模版 2</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="card label3_list3">
|
||||
<span class="label">预览宽度</span>
|
||||
<select class="select">
|
||||
<option>1080px</option>
|
||||
<option>720px</option>
|
||||
<option>540px</option>
|
||||
<option>360px</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="card label4">调节文字大小组件</div>
|
||||
|
||||
<div class="content">小红书预览区域</div>
|
||||
|
||||
<div class="card component">页面选择组件</div>
|
||||
<div class="card btnC"><button class="btn">按钮</button></div>
|
||||
<div class="card btnD"><button class="btn">按钮</button></div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
37
todolist.md
37
todolist.md
@@ -1,19 +1,19 @@
|
||||
# todo list
|
||||
# todo list & recording
|
||||
|
||||
## 功能
|
||||
1. 实现markdown预览页面切图功能，预览页面是以完成渲染的页面，生成一整张长图。再按文章顺序裁剪为图片(png格式)。(v1.3.1)
|
||||
- 长图宽度为1080，可配置。切图图片横竖比例3:4，图片宽度保持与长图相同。
|
||||
✅
|
||||
✅
|
||||
- 横竖比例和图片宽像素可配置。
|
||||
✅
|
||||
✅
|
||||
- 标题取frontmatter的title属性。
|
||||
✅
|
||||
✅
|
||||
- 图片保存路径可配置，默认为/Users/gavin/note2mp/images/xhs。
|
||||
✅
|
||||
✅
|
||||
- 图片名取frontmatter的slug属性，如: slug: mmm，文章长图命名为mmm.png，如切为3张图片，则切图图片名按顺序依次为mmm_1.png,mmm_2.png,mmm_3.png
|
||||
✅
|
||||
✅
|
||||
- 文章预览中增加“切图”按钮，点击执行预览文章的切图操作。
|
||||
✅
|
||||
✅
|
||||
|
||||
2. 说明/修改/增加：
|
||||
- 发布平台选"小红书"时，保留“刷新”，“发布到小红书”，去掉“切图”按钮，用"当前页切图"和"全部页切图"替代切图按钮和功能。
|
||||
@@ -59,11 +59,15 @@
|
||||
## 问题
|
||||
1. "发布平台"首次选“小红书”时，预览页面没有加载当前文章。
|
||||
✅
|
||||
|
||||
2. 顶部按钮适应窗口宽度，超出窗口，折行显示。
|
||||
✅
|
||||
3. 小红书模式，html分页预览不是从顶部开始显示，显示不完整。
|
||||
小红书模式，预览窗口似乎只显示了一部分？上面部分被挡住了吗？
|
||||
参考微信公众号模式下的预览窗口，不同点在于小红书模式下，每页的宽高比按配置要求。
|
||||
|
||||
3. 小红书模式问题：
|
||||
- html分页预览不是从顶部开始显示，显示不完整。
|
||||
- 预览窗口似乎只显示了一部分？上面部分被挡住了吗？
|
||||
- 参考微信公众号模式下的预览窗口，不同点在于小红书模式下，每页的宽高比按配置要求。
|
||||
✅
|
||||
|
||||
4. 修改：
|
||||
- 公共部分独立出来，如“发布平台”，放在新建platform-choose.ts中，“发布平台”选择切换平台逻辑放在该模块中，便于以后其他平台扩展。
|
||||
@@ -103,17 +107,22 @@ SOLVE：obsidian控制台打印信息，定位在哪里阻塞，AI修复。
|
||||
问题：
|
||||
- 字变大时，一页的内容放不下，重新分页应该会增加页数。但现在重新分页当前页放不下的内容只是被剪掉了。
|
||||
- 表格显示不完整。
|
||||
✅
|
||||
|
||||
9. styles.css中有很多冗余。改为grid布局。部分完成，这部分需要后面**手动调整**重构。🧶 ♻️ ❇️
|
||||
问题：小红书预览布局有问题❓
|
||||
|
||||
小红书布局改为grid，但平台选择器部分没有完成修改。
|
||||
保持微信和小红书页面一致性，都用grid重构，复用css样式代码。
|
||||
|
||||
10. 新建docs文件夹，把除了README和todolist以外的markdown文件放到docs中。
|
||||
✅
|
||||
|
||||
|
||||
## 经验
|
||||
1. 在不确定AI是否理解，或者需求是否准确的情况下，先用chat模式提问，看回答确定AI理解是否准确。
|
||||
尤其对于较大规模的重构需求，这点很重要‼️ 。
|
||||
|
||||
1. 在不确定AI是否理解，或者需求是否准确的情况下，先用codex chat模式提问，看回答确定AI理解是否准确。
|
||||
尤其对于较大规模的重构需求，这点很重要 ‼️ 。
|
||||
|
||||
2. 复杂页面，codex生成的css可能无比复杂，不便于维护修改。
|
||||
自己写布局demo原型，让codex参考布局修改(原来元素美化的css可保留)。
|
||||
demo原型可以手绘后，拍照让chatgpt生成，在此基础上自己修改。
|
||||
|
||||
|
||||
Reference in New Issue
Block a user