update at 2025-10-08 19:45:28

src/platform-chooser.ts

@@ -0,0 +1,163 @@
+/**
+ * 文件：platform-chooser.ts
+ * 作用：平台选择器组件，负责渲染平台选择 UI 并处理平台切换事件
+ * 
+ * 这是一个公共组件，独立于具体平台实现，便于未来扩展新平台
+ */
+
+import { Platform as ObsidianPlatform } from 'obsidian';
+
+export type PlatformType = 'wechat' | 'xiaohongshu';
+
+/**
+ * 平台选择器配置
+ */
+export interface PlatformChooserOptions {
+    /** 默认选中的平台 */
+    defaultPlatform?: PlatformType;
+    /** 平台切换回调 */
+    onPlatformChange?: (platform: PlatformType) => Promise<void>;
+}
+
+/**
+ * 平台信息接口
+ */
+interface PlatformInfo {
+    value: PlatformType;
+    label: string;
+    icon?: string;
+}
+
+/**
+ * 支持的平台列表
+ */
+const SUPPORTED_PLATFORMS: PlatformInfo[] = [
+    { value: 'wechat', label: '微信公众号', icon: '📱' },
+    { value: 'xiaohongshu', label: '小红书', icon: '📔' }
+];
+
+/**
+ * 平台选择器类
+ * 
+ * 职责：
+ * 1. 渲染平台选择 UI
+ * 2. 处理用户的平台切换操作
+ * 3. 触发平台切换回调
+ * 4. 维护当前选中的平台状态
+ */
+export class PlatformChooser {
+    private container: HTMLElement;
+    private selectElement: HTMLSelectElement | null = null;
+    private currentPlatform: PlatformType;
+    private onChange?: (platform: PlatformType) => void;
+
+    constructor(container: HTMLElement, options: PlatformChooserOptions = {}) {
+        this.container = container;
+        this.currentPlatform = options.defaultPlatform || 'wechat';
+        if (options.onPlatformChange) {
+            this.onChange = (platform) => {
+                options.onPlatformChange!(platform);
+            };
+        }
+    }
+
+    /**
+     * 设置平台切换回调
+     */
+    setOnChange(callback: (platform: PlatformType) => void): void {
+        this.onChange = callback;
+    }
+
+    /**
+     * 渲染平台选择器 UI
+     */
+    render(): void {
+        // 创建平台选择行
+        const lineDiv = this.container.createDiv({ cls: 'toolbar-line platform-selector-line' });
+        
+        // 创建标签
+        const platformLabel = lineDiv.createDiv({ cls: 'style-label' });
+        platformLabel.innerText = '发布平台';
+        
+        // 创建选择器
+        const platformSelect = lineDiv.createEl('select', { cls: 'platform-select' });
+        this.selectElement = platformSelect;
+        
+        // 添加平台选项
+        SUPPORTED_PLATFORMS.forEach(platform => {
+            const option = platformSelect.createEl('option');
+            option.value = platform.value;
+            option.text = platform.icon ? `${platform.icon} ${platform.label}` : platform.label;
+            
+            // 设置默认选中
+            if (platform.value === this.currentPlatform) {
+                option.selected = true;
+            }
+        });
+        
+        // 绑定切换事件
+        platformSelect.onchange = () => {
+            const newPlatform = platformSelect.value as PlatformType;
+            this.switchPlatformInternal(newPlatform);
+        };
+    }
+
+    /**
+     * 切换平台（内部方法）
+     */
+    private switchPlatformInternal(platform: PlatformType): void {
+        if (platform === this.currentPlatform) {
+            return; // 相同平台，不需要切换
+        }
+
+        console.log(`[PlatformChooser] 切换平台: ${this.currentPlatform} -> ${platform}`);
+        
+        this.currentPlatform = platform;
+        
+        // 触发平台切换回调
+        if (this.onChange) {
+            try {
+                this.onChange(platform);
+            } catch (error) {
+                console.error('[PlatformChooser] 平台切换失败:', error);
+            }
+        }
+    }
+
+    /**
+     * 切换平台（公共方法，供 PreviewManager 调用）
+     */
+    switchPlatform(platform: PlatformType): void {
+        this.currentPlatform = platform;
+        if (this.selectElement) {
+            this.selectElement.value = platform;
+        }
+    }
+
+    /**
+     * 获取当前选中的平台
+     */
+    getCurrentPlatform(): PlatformType {
+        return this.currentPlatform;
+    }
+
+    /**
+     * 程序化设置平台（不触发回调）
+     */
+    setPlatform(platform: PlatformType): void {
+        this.currentPlatform = platform;
+        if (this.selectElement) {
+            this.selectElement.value = platform;
+        }
+    }
+
+    /**
+     * 清理资源
+     */
+    destroy(): void {
+        if (this.selectElement) {
+            this.selectElement.onchange = null;
+            this.selectElement = null;
+        }
+    }
+}