424 lines
14 KiB
TypeScript
424 lines
14 KiB
TypeScript
/**
|
||
* 文件：wechat/wechat-preview.ts
|
||
* 作用：微信公众号预览视图组件，专门处理微信公众号平台的预览和发布功能
|
||
*
|
||
* 功能：
|
||
* 1. 渲染微信公众号专属的工具栏和预览界面
|
||
* 2. 处理文章的复制、上传图片、发布草稿等操作
|
||
* 3. 管理微信公众号相关的设置（公众号选择、封面、样式等）
|
||
* 4. 提供文章导出HTML功能
|
||
*/
|
||
|
||
import { Notice, Platform, TFile, TFolder } from 'obsidian';
|
||
import { NMPSettings } from '../settings';
|
||
import AssetsManager from '../assets';
|
||
import { ArticleRender } from '../article-render';
|
||
import { uevent } from '../utils';
|
||
|
||
/**
|
||
* 微信公众号预览视图类
|
||
*/
|
||
export class WechatPreview {
|
||
container: HTMLElement;
|
||
settings: NMPSettings;
|
||
assetsManager: AssetsManager;
|
||
render: ArticleRender;
|
||
app: any;
|
||
|
||
// 当前状态
|
||
currentFile: TFile | null = null;
|
||
currentAppId: string = '';
|
||
currentTheme: string;
|
||
currentHighlight: string;
|
||
|
||
// UI 元素
|
||
toolbar: HTMLDivElement | null = null;
|
||
renderDiv: HTMLDivElement | null = null;
|
||
wechatSelect: HTMLSelectElement | null = null;
|
||
themeSelect: HTMLSelectElement | null = null;
|
||
highlightSelect: HTMLSelectElement | null = null;
|
||
coverEl: HTMLInputElement | null = null;
|
||
useDefaultCover: HTMLInputElement | null = null;
|
||
useLocalCover: HTMLInputElement | null = null;
|
||
|
||
// 回调函数
|
||
onRefreshCallback?: () => Promise<void>;
|
||
onAppIdChangeCallback?: (appId: string) => void;
|
||
|
||
constructor(container: HTMLElement, app: any, render: ArticleRender) {
|
||
this.container = container;
|
||
this.app = app;
|
||
this.render = render;
|
||
this.settings = NMPSettings.getInstance();
|
||
this.assetsManager = AssetsManager.getInstance();
|
||
this.currentTheme = this.settings.defaultStyle;
|
||
this.currentHighlight = this.settings.defaultHighlight;
|
||
|
||
// 初始化默认公众号
|
||
if (this.settings.wxInfo.length > 0) {
|
||
this.currentAppId = this.settings.wxInfo[0].appid;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 构建微信公众号预览界面
|
||
*/
|
||
build(): void {
|
||
this.container.empty();
|
||
|
||
// 创建工具栏
|
||
this.toolbar = this.container.createDiv({ cls: 'preview-toolbar' });
|
||
this.buildToolbar(this.toolbar);
|
||
|
||
// 创建渲染区域
|
||
this.renderDiv = this.container.createDiv({ cls: 'render-div' });
|
||
this.renderDiv.id = 'render-div';
|
||
|
||
// 将 ArticleRender 的 style 与内容节点挂载
|
||
try {
|
||
if (this.render && this.render.styleEl && !this.renderDiv.contains(this.render.styleEl)) {
|
||
this.renderDiv.appendChild(this.render.styleEl);
|
||
}
|
||
if (this.render && this.render.articleDiv && !this.renderDiv.contains(this.render.articleDiv)) {
|
||
// 容器样式：模拟公众号编辑器宽度，更好的排版显示
|
||
this.render.articleDiv.addClass('wechat-article-wrapper');
|
||
this.renderDiv.appendChild(this.render.articleDiv);
|
||
}
|
||
} catch (e) {
|
||
console.warn('[WechatPreview] 挂载文章容器失败', e);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 构建工具栏
|
||
*/
|
||
private buildToolbar(parent: HTMLDivElement): void {
|
||
let lineDiv;
|
||
|
||
// 公众号选择
|
||
if (this.settings.wxInfo.length > 1 || Platform.isDesktop) {
|
||
lineDiv = parent.createDiv({ cls: 'toolbar-line' });
|
||
|
||
const wxLabel = lineDiv.createDiv({ cls: 'style-label' });
|
||
wxLabel.innerText = '公众号';
|
||
|
||
const wxSelect = lineDiv.createEl('select', { cls: 'wechat-select' });
|
||
wxSelect.onchange = async () => {
|
||
this.currentAppId = wxSelect.value;
|
||
this.onAppIdChanged();
|
||
};
|
||
|
||
const defaultOp = wxSelect.createEl('option');
|
||
defaultOp.value = '';
|
||
defaultOp.text = '请在设置里配置公众号';
|
||
|
||
for (let i = 0; i < this.settings.wxInfo.length; i++) {
|
||
const op = wxSelect.createEl('option');
|
||
const wx = this.settings.wxInfo[i];
|
||
op.value = wx.appid;
|
||
op.text = wx.name;
|
||
if (i === 0) {
|
||
op.selected = true;
|
||
this.currentAppId = wx.appid;
|
||
}
|
||
}
|
||
this.wechatSelect = wxSelect;
|
||
|
||
if (Platform.isDesktop) {
|
||
const separator = lineDiv.createDiv({ cls: 'toolbar-separator' });
|
||
const openBtn = lineDiv.createEl('button', { text: '🌐 去公众号后台', cls: 'toolbar-button purple-gradient' });
|
||
openBtn.onclick = async () => {
|
||
const { shell } = require('electron');
|
||
shell.openExternal('https://mp.weixin.qq.com');
|
||
uevent('open-mp');
|
||
};
|
||
}
|
||
}
|
||
|
||
// 操作按钮行
|
||
lineDiv = parent.createDiv({ cls: 'toolbar-line flex-wrap' });
|
||
|
||
const refreshBtn = lineDiv.createEl('button', { text: '🔄 刷新', cls: 'toolbar-button purple-gradient' });
|
||
refreshBtn.onclick = async () => {
|
||
if (this.onRefreshCallback) {
|
||
await this.onRefreshCallback();
|
||
}
|
||
};
|
||
|
||
if (Platform.isDesktop) {
|
||
const copyBtn = lineDiv.createEl('button', { text: '📋 复制', cls: 'toolbar-button' });
|
||
copyBtn.onclick = async () => {
|
||
try {
|
||
await this.render.copyArticle();
|
||
new Notice('复制成功，请到公众号编辑器粘贴。');
|
||
uevent('copy');
|
||
} catch (error) {
|
||
console.error(error);
|
||
new Notice('复制失败: ' + error);
|
||
}
|
||
};
|
||
}
|
||
|
||
const uploadImgBtn = lineDiv.createEl('button', { text: '📤 上传图片', cls: 'toolbar-button' });
|
||
uploadImgBtn.onclick = async () => await this.uploadImages();
|
||
|
||
const postBtn = lineDiv.createEl('button', { text: '📝 发草稿', cls: 'toolbar-button' });
|
||
postBtn.onclick = async () => await this.postArticle();
|
||
|
||
const imagesBtn = lineDiv.createEl('button', { text: '🖼️ 图片/文字', cls: 'toolbar-button' });
|
||
imagesBtn.onclick = async () => await this.postImages();
|
||
|
||
if (Platform.isDesktop && this.settings.isAuthKeyVaild()) {
|
||
const htmlBtn = lineDiv.createEl('button', { text: '💾 导出HTML', cls: 'toolbar-button' });
|
||
htmlBtn.onclick = async () => await this.exportHTML();
|
||
}
|
||
|
||
// 封面选择
|
||
this.buildCoverSelector(parent);
|
||
|
||
// 样式选择（如果启用）
|
||
if (this.settings.showStyleUI) {
|
||
this.buildStyleSelector(parent);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 构建封面选择器
|
||
*/
|
||
private buildCoverSelector(parent: HTMLDivElement): void {
|
||
const lineDiv = parent.createDiv({ cls: 'toolbar-line' });
|
||
const coverTitle = lineDiv.createDiv({ cls: 'style-label' });
|
||
coverTitle.innerText = '封面';
|
||
|
||
this.useDefaultCover = lineDiv.createEl('input', { cls: 'input-style' });
|
||
this.useDefaultCover.setAttr('type', 'radio');
|
||
this.useDefaultCover.setAttr('name', 'cover');
|
||
this.useDefaultCover.setAttr('value', 'default');
|
||
this.useDefaultCover.setAttr('checked', true);
|
||
this.useDefaultCover.id = 'default-cover';
|
||
this.useDefaultCover.onchange = async () => {
|
||
if (this.useDefaultCover?.checked && this.coverEl) {
|
||
this.coverEl.setAttr('style', 'visibility:hidden;width:0px;');
|
||
}
|
||
};
|
||
|
||
const defaultLabel = lineDiv.createEl('label');
|
||
defaultLabel.innerText = '默认';
|
||
defaultLabel.setAttr('for', 'default-cover');
|
||
|
||
this.useLocalCover = lineDiv.createEl('input', { cls: 'input-style' });
|
||
this.useLocalCover.setAttr('type', 'radio');
|
||
this.useLocalCover.setAttr('name', 'cover');
|
||
this.useLocalCover.setAttr('value', 'local');
|
||
this.useLocalCover.id = 'local-cover';
|
||
this.useLocalCover.setAttr('style', 'margin-left:20px;');
|
||
this.useLocalCover.onchange = async () => {
|
||
if (this.useLocalCover?.checked && this.coverEl) {
|
||
this.coverEl.setAttr('style', 'visibility:visible;width:180px;');
|
||
}
|
||
};
|
||
|
||
const localLabel = lineDiv.createEl('label');
|
||
localLabel.setAttr('for', 'local-cover');
|
||
localLabel.innerText = '上传';
|
||
|
||
this.coverEl = lineDiv.createEl('input', { cls: 'upload-input' });
|
||
this.coverEl.setAttr('type', 'file');
|
||
this.coverEl.setAttr('placeholder', '封面图片');
|
||
this.coverEl.setAttr('accept', '.png, .jpg, .jpeg');
|
||
this.coverEl.setAttr('name', 'cover');
|
||
this.coverEl.id = 'cover-input';
|
||
}
|
||
|
||
/**
|
||
* 构建样式选择器
|
||
*/
|
||
private buildStyleSelector(parent: HTMLDivElement): void {
|
||
const lineDiv = parent.createDiv({ cls: 'toolbar-line flex-wrap' });
|
||
|
||
const cssStyle = lineDiv.createDiv({ cls: 'style-label' });
|
||
cssStyle.innerText = '样式';
|
||
|
||
const selectBtn = lineDiv.createEl('select', { cls: 'style-select' });
|
||
selectBtn.onchange = async () => {
|
||
this.currentTheme = selectBtn.value;
|
||
this.render.updateStyle(selectBtn.value);
|
||
};
|
||
|
||
for (let s of this.assetsManager.themes) {
|
||
const op = selectBtn.createEl('option');
|
||
op.value = s.className;
|
||
op.text = s.name;
|
||
op.selected = s.className === this.settings.defaultStyle;
|
||
}
|
||
this.themeSelect = selectBtn;
|
||
|
||
const separator = lineDiv.createDiv({ cls: 'toolbar-separator' });
|
||
|
||
const highlightStyle = lineDiv.createDiv({ cls: 'style-label' });
|
||
highlightStyle.innerText = '代码高亮';
|
||
|
||
const highlightStyleBtn = lineDiv.createEl('select', { cls: 'style-select' });
|
||
highlightStyleBtn.onchange = async () => {
|
||
this.currentHighlight = highlightStyleBtn.value;
|
||
this.render.updateHighLight(highlightStyleBtn.value);
|
||
};
|
||
|
||
const highlights = this.assetsManager.highlights;
|
||
for (let h of highlights) {
|
||
const op = highlightStyleBtn.createEl('option');
|
||
op.value = h.url;
|
||
op.text = h.name;
|
||
op.selected = h.url === this.currentHighlight;
|
||
}
|
||
this.highlightSelect = highlightStyleBtn;
|
||
}
|
||
|
||
/**
|
||
* 显示微信预览视图
|
||
*/
|
||
show(): void {
|
||
if (this.container) {
|
||
this.container.style.display = 'flex';
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 隐藏微信预览视图
|
||
*/
|
||
hide(): void {
|
||
if (this.container) {
|
||
this.container.style.display = 'none';
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 公众号切换处理
|
||
*/
|
||
private onAppIdChanged(): void {
|
||
if (this.onAppIdChangeCallback) {
|
||
this.onAppIdChangeCallback(this.currentAppId);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 上传图片
|
||
*/
|
||
private async uploadImages(): Promise<void> {
|
||
// 待实现 - 从原来的 note-preview.ts 迁移
|
||
new Notice('上传图片功能');
|
||
uevent('upload');
|
||
}
|
||
|
||
/**
|
||
* 发布草稿
|
||
*/
|
||
private async postArticle(): Promise<void> {
|
||
try {
|
||
if (!this.currentFile) {
|
||
new Notice('请先打开一个 Markdown 文件');
|
||
return;
|
||
}
|
||
if (!this.currentAppId) {
|
||
new Notice('请先在设置中配置公众号信息');
|
||
return;
|
||
}
|
||
new Notice('正在创建公众号草稿...');
|
||
const mediaId = await this.render.postArticle(this.currentAppId, this.getLocalCoverFile());
|
||
if (mediaId) {
|
||
new Notice('草稿创建成功');
|
||
}
|
||
uevent('pub');
|
||
} catch (e) {
|
||
console.error(e);
|
||
new Notice('发布失败: ' + (e instanceof Error ? e.message : e));
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 发布图片/文字
|
||
*/
|
||
private async postImages(): Promise<void> {
|
||
try {
|
||
if (!this.currentFile) {
|
||
new Notice('请先打开一个 Markdown 文件');
|
||
return;
|
||
}
|
||
if (!this.currentAppId) {
|
||
new Notice('请先在设置中配置公众号信息');
|
||
return;
|
||
}
|
||
new Notice('正在创建图片/文字消息草稿...');
|
||
const mediaId = await this.render.postImages(this.currentAppId);
|
||
if (mediaId) {
|
||
new Notice('图片/文字草稿创建成功');
|
||
}
|
||
uevent('pub-images');
|
||
} catch (e) {
|
||
console.error(e);
|
||
new Notice('发布失败: ' + (e instanceof Error ? e.message : e));
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 导出HTML
|
||
*/
|
||
private async exportHTML(): Promise<void> {
|
||
try {
|
||
if (!this.currentFile) {
|
||
new Notice('请先打开一个 Markdown 文件');
|
||
return;
|
||
}
|
||
await this.render.exportHTML();
|
||
new Notice('HTML 导出完成');
|
||
uevent('export-html');
|
||
} catch (e) {
|
||
console.error(e);
|
||
new Notice('导出失败: ' + (e instanceof Error ? e.message : e));
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 更新样式和高亮显示
|
||
*/
|
||
updateStyleAndHighlight(theme: string, highlight: string): void {
|
||
this.currentTheme = theme;
|
||
this.currentHighlight = highlight;
|
||
|
||
if (this.themeSelect) {
|
||
this.themeSelect.value = theme;
|
||
}
|
||
if (this.highlightSelect) {
|
||
this.highlightSelect.value = highlight;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 清理资源
|
||
*/
|
||
destroy(): void {
|
||
this.toolbar = null;
|
||
this.renderDiv = null;
|
||
this.wechatSelect = null;
|
||
this.themeSelect = null;
|
||
this.highlightSelect = null;
|
||
this.coverEl = null;
|
||
this.useDefaultCover = null;
|
||
this.useLocalCover = null;
|
||
}
|
||
|
||
/** 获取本地上传封面（如果选择了“上传”单选并选了文件） */
|
||
private getLocalCoverFile(): File | null {
|
||
if (this.useLocalCover?.checked && this.coverEl?.files && this.coverEl.files.length > 0) {
|
||
return this.coverEl.files[0];
|
||
}
|
||
return null;
|
||
}
|
||
|
||
/** 对外：发布草稿（供外层菜单调用） */
|
||
async postDraft() { await this.postArticle(); }
|
||
|
||
/** 由上层在切换/渲染时注入当前文件 */
|
||
setFile(file: TFile | null) { this.currentFile = file; }
|
||
}
|