a619938e0c
Include xll-miniapp prototype, PRD resources, annotation directory sync, agent skills, and cloud publishing setup. Co-authored-by: Cursor <cursoragent@cursor.com>
864 lines
27 KiB
TypeScript
864 lines
27 KiB
TypeScript
/**
|
||
*本项目Variant Switcher 组件 (重构版)
|
||
*
|
||
* 核心特性：
|
||
* - 零依赖：不依赖任何外部 CSS 框架或图标库
|
||
* - 轻量化 UI：使用图标入口替代重型控制条
|
||
* - 丰富信息：支持标题和描述
|
||
* - 全局面板：支持页面级统一管理和跳转
|
||
* - 隐形控制：支持快捷键显隐入口
|
||
* - 自动全局入口：当有比选组件时自动显示全局入口按钮
|
||
*/
|
||
|
||
import React, { useState, useEffect, useCallback, CSSProperties, useRef } from 'react';
|
||
import { createPortal } from 'react-dom';
|
||
|
||
// --- 类型定义 ---
|
||
|
||
export interface VariantItem {
|
||
/** 唯一标识，若不提供则使用索引 */
|
||
key?: string;
|
||
/** 渲染内容 */
|
||
content: React.ReactNode;
|
||
/** 方案标题 */
|
||
title: string;
|
||
/** 方案一句话描述 */
|
||
description: string;
|
||
/** 方案详细说明文档（Markdown 格式） */
|
||
markdown?: string;
|
||
}
|
||
|
||
export interface VariantAPI {
|
||
id: string;
|
||
/** 比选方案的中文名称，用于在全局面板中显示 */
|
||
name: string;
|
||
currentIndex: number;
|
||
totalVariants: number;
|
||
isDecided: boolean;
|
||
variants: VariantItem[]; // 暴露方案详情供全局面板使用
|
||
select: (index: number) => void;
|
||
confirm: () => void;
|
||
reset: () => void;
|
||
focus: () => void; // 聚焦到该组件（滚动）
|
||
}
|
||
|
||
declare global {
|
||
interface Window {
|
||
AXHUB_VARIANT_MANAGER?: VariantManager;
|
||
}
|
||
}
|
||
|
||
type Listener = () => void;
|
||
|
||
export interface VariantManager {
|
||
register: (id: string, api: VariantAPI) => void;
|
||
unregister: (id: string) => void;
|
||
instances: Record<string, VariantAPI>;
|
||
subscribe: (listener: Listener) => () => void;
|
||
notify: () => void;
|
||
setVisibility: (visible: boolean) => void;
|
||
isVisible: boolean;
|
||
}
|
||
|
||
export interface VariantSwitcherProps {
|
||
id?: string;
|
||
/** 比选方案的中文名称，显示在全局面板中（如"头部设计"、"登录页布局"） */
|
||
name?: string;
|
||
/** 方案列表 */
|
||
variants: VariantItem[];
|
||
defaultIndex?: number;
|
||
onConfirm?: (index: number, item: VariantItem) => void;
|
||
onReset?: () => void;
|
||
style?: CSSProperties;
|
||
className?: string;
|
||
}
|
||
|
||
// --- 图标定义 ---
|
||
|
||
const Icons = {
|
||
Switcher: () => (
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
|
||
</svg>
|
||
),
|
||
Check: () => (
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||
<polyline points="20 6 9 17 4 12"/>
|
||
</svg>
|
||
),
|
||
Close: () => (
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||
</svg>
|
||
),
|
||
// 比选图标：两个重叠的卡片，表示多个方案比选
|
||
VariantCompare: () => (
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||
{/* 底层卡片 */}
|
||
<rect x="4" y="6" width="12" height="10" rx="2" opacity="0.4" />
|
||
{/* 顶层卡片（偏移） */}
|
||
<rect x="8" y="4" width="12" height="10" rx="2" />
|
||
</svg>
|
||
),
|
||
Target: () => (
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||
<circle cx="12" cy="12" r="10"></circle>
|
||
<circle cx="12" cy="12" r="6"></circle>
|
||
<circle cx="12" cy="12" r="2"></circle>
|
||
</svg>
|
||
),
|
||
Exit: () => (
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
|
||
<polyline points="16 17 21 12 16 7"></polyline>
|
||
<line x1="21" y1="12" x2="9" y2="12"></line>
|
||
</svg>
|
||
),
|
||
Doc: () => (
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
|
||
<polyline points="14 2 14 8 20 8"></polyline>
|
||
<line x1="16" y1="13" x2="8" y2="13"></line>
|
||
<line x1="16" y1="17" x2="8" y2="17"></line>
|
||
<polyline points="10 9 9 9 8 9"></polyline>
|
||
</svg>
|
||
),
|
||
Back: () => (
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||
<polyline points="15 18 9 12 15 6"></polyline>
|
||
</svg>
|
||
)
|
||
};
|
||
|
||
// --- 主题配置 ---
|
||
const THEME_COLOR = '#008F5D';
|
||
const THEME_COLOR_BG = 'rgba(0, 143, 93, 0.1)';
|
||
|
||
// --- 内置 Markdown 渲染器（零依赖） ---
|
||
|
||
const MarkdownViewer: React.FC<{ content: string }> = ({ content }) => {
|
||
const parseInlineStyles = (text: string): React.ReactNode => {
|
||
// 处理行内代码 `code`
|
||
const parts = text.split(/(`[^`]+`)/g);
|
||
return parts.map((part, i) => {
|
||
if (part.startsWith('`') && part.endsWith('`')) {
|
||
return (
|
||
<code key={i} style={{
|
||
backgroundColor: '#f5f5f5',
|
||
padding: '2px 6px',
|
||
borderRadius: '3px',
|
||
fontSize: '13px',
|
||
fontFamily: 'Monaco, Consolas, monospace',
|
||
color: '#e83e8c'
|
||
}}>
|
||
{part.slice(1, -1)}
|
||
</code>
|
||
);
|
||
}
|
||
// 处理加粗 **text**
|
||
const boldParts = part.split(/(\*\*[^*]+\*\*)/g);
|
||
return boldParts.map((bp, j) => {
|
||
if (bp.startsWith('**') && bp.endsWith('**')) {
|
||
return <strong key={`${i}-${j}`}>{bp.slice(2, -2)}</strong>;
|
||
}
|
||
return bp;
|
||
});
|
||
});
|
||
};
|
||
|
||
const parseLine = (line: string, index: number): React.ReactNode => {
|
||
// 标题
|
||
if (line.startsWith('### ')) {
|
||
return <h3 key={index} style={{ fontSize: '16px', fontWeight: 600, color: '#333', marginTop: '20px', marginBottom: '8px' }}>{parseInlineStyles(line.slice(4))}</h3>;
|
||
}
|
||
if (line.startsWith('## ')) {
|
||
return <h2 key={index} style={{ fontSize: '18px', fontWeight: 600, color: '#333', marginTop: '24px', marginBottom: '12px', paddingBottom: '8px', borderBottom: '1px solid #eee' }}>{parseInlineStyles(line.slice(3))}</h2>;
|
||
}
|
||
if (line.startsWith('# ')) {
|
||
return <h1 key={index} style={{ fontSize: '22px', fontWeight: 600, color: '#333', marginBottom: '16px' }}>{parseInlineStyles(line.slice(2))}</h1>;
|
||
}
|
||
// 列表
|
||
if (line.startsWith('- ')) {
|
||
return (
|
||
<li key={index} style={{ marginLeft: '16px', paddingLeft: '8px', color: '#555', marginBottom: '6px', listStyle: 'disc' }}>
|
||
{parseInlineStyles(line.slice(2))}
|
||
</li>
|
||
);
|
||
}
|
||
if (/^\d+\.\s/.test(line)) {
|
||
const match = line.match(/^(\d+)\.\s(.*)$/);
|
||
if (match) {
|
||
return (
|
||
<li key={index} style={{ marginLeft: '16px', paddingLeft: '8px', color: '#555', marginBottom: '6px', listStyle: 'decimal' }}>
|
||
{parseInlineStyles(match[2])}
|
||
</li>
|
||
);
|
||
}
|
||
}
|
||
// 引用
|
||
if (line.startsWith('> ')) {
|
||
return (
|
||
<blockquote key={index} style={{ marginLeft: 0, paddingLeft: '12px', borderLeft: `3px solid ${THEME_COLOR}`, color: '#666', fontStyle: 'italic', margin: '12px 0' }}>
|
||
{parseInlineStyles(line.slice(2))}
|
||
</blockquote>
|
||
);
|
||
}
|
||
// 空行
|
||
if (line.trim() === '') {
|
||
return <div key={index} style={{ height: '12px' }} />;
|
||
}
|
||
// 普通段落
|
||
return <p key={index} style={{ color: '#555', lineHeight: 1.7, marginBottom: '12px' }}>{parseInlineStyles(line)}</p>;
|
||
};
|
||
|
||
const lines = content.split('\n');
|
||
|
||
return (
|
||
<div style={{ fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif', fontSize: '14px' }}>
|
||
{lines.map((line, i) => parseLine(line, i))}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
// --- 全局管理器实现 ---
|
||
|
||
const listeners: Listener[] = [];
|
||
let globalVisible = true;
|
||
|
||
function initGlobalManager(): VariantManager {
|
||
if (!window.AXHUB_VARIANT_MANAGER) {
|
||
window.AXHUB_VARIANT_MANAGER = {
|
||
instances: {},
|
||
isVisible: true,
|
||
register(id, api) {
|
||
this.instances[id] = api;
|
||
this.notify();
|
||
},
|
||
unregister(id) {
|
||
delete this.instances[id];
|
||
this.notify();
|
||
},
|
||
subscribe(listener) {
|
||
listeners.push(listener);
|
||
return () => {
|
||
const idx = listeners.indexOf(listener);
|
||
if (idx > -1) listeners.splice(idx, 1);
|
||
};
|
||
},
|
||
notify() {
|
||
this.isVisible = globalVisible;
|
||
listeners.forEach(fn => fn());
|
||
},
|
||
setVisibility(visible) {
|
||
globalVisible = visible;
|
||
this.notify();
|
||
}
|
||
};
|
||
}
|
||
return window.AXHUB_VARIANT_MANAGER;
|
||
}
|
||
|
||
// --- Hooks ---
|
||
|
||
/** 获取所有注册的实例及全局可见性 */
|
||
function useVariantManager() {
|
||
const [state, setState] = useState<{
|
||
instances: Record<string, VariantAPI>;
|
||
isVisible: boolean;
|
||
}>({ instances: {}, isVisible: true });
|
||
|
||
useEffect(() => {
|
||
const manager = initGlobalManager();
|
||
const update = () => setState({
|
||
instances: { ...manager.instances },
|
||
isVisible: manager.isVisible
|
||
});
|
||
update();
|
||
return manager.subscribe(update);
|
||
}, []);
|
||
|
||
return state;
|
||
}
|
||
|
||
// --- 样式定义 ---
|
||
|
||
const STYLES = {
|
||
container: {
|
||
position: 'relative' as const,
|
||
width: '100%',
|
||
height: '100%',
|
||
},
|
||
triggerBtn: {
|
||
position: 'absolute' as const,
|
||
top: '4px',
|
||
right: '4px',
|
||
zIndex: 9001,
|
||
width: '24px',
|
||
height: '24px',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
background: 'rgba(255, 255, 255, 0.95)',
|
||
border: '1px solid rgba(0, 0, 0, 0.08)',
|
||
borderRadius: '2px',
|
||
color: '#666',
|
||
cursor: 'pointer',
|
||
boxShadow: '0 1px 2px rgba(0,0,0,0.05)',
|
||
transition: 'all 0.2s',
|
||
},
|
||
popover: {
|
||
position: 'absolute' as const,
|
||
top: '32px',
|
||
right: '0px',
|
||
width: '260px',
|
||
backgroundColor: '#fff',
|
||
borderRadius: '2px',
|
||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
|
||
border: '1px solid rgba(0, 0, 0, 0.08)',
|
||
padding: '4px',
|
||
zIndex: 9999,
|
||
display: 'flex',
|
||
flexDirection: 'column' as const,
|
||
gap: '2px',
|
||
opacity: 0,
|
||
transform: 'translateY(-4px)',
|
||
pointerEvents: 'none' as const,
|
||
transition: 'all 0.15s ease-out',
|
||
},
|
||
popoverVisible: {
|
||
opacity: 1,
|
||
transform: 'translateY(0)',
|
||
pointerEvents: 'auto' as const,
|
||
},
|
||
variantCard: {
|
||
display: 'flex',
|
||
flexDirection: 'column' as const,
|
||
padding: '8px 10px',
|
||
borderRadius: '0',
|
||
cursor: 'pointer',
|
||
border: 'none',
|
||
transition: 'background 0.2s',
|
||
textAlign: 'left' as const,
|
||
background: 'transparent',
|
||
},
|
||
variantCardActive: {
|
||
background: THEME_COLOR_BG,
|
||
border: 'none',
|
||
},
|
||
variantTitle: {
|
||
fontSize: '13px',
|
||
fontWeight: 500,
|
||
color: '#333',
|
||
marginBottom: '2px',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
},
|
||
variantDesc: {
|
||
fontSize: '12px',
|
||
color: '#888',
|
||
lineHeight: '1.4',
|
||
},
|
||
globalTrigger: {
|
||
position: 'fixed' as const,
|
||
bottom: '24px',
|
||
right: '24px',
|
||
zIndex: 99999,
|
||
width: '32px',
|
||
height: '32px',
|
||
borderRadius: '16px',
|
||
backgroundColor: '#fff',
|
||
color: '#555',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.12)',
|
||
cursor: 'pointer',
|
||
border: '1px solid rgba(0,0,0,0.05)',
|
||
transition: 'transform 0.2s, opacity 0.2s',
|
||
},
|
||
globalPanel: {
|
||
position: 'fixed' as const,
|
||
top: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
width: '300px',
|
||
backgroundColor: '#fff',
|
||
boxShadow: '-4px 0 24px rgba(0,0,0,0.08)',
|
||
zIndex: 100000,
|
||
padding: '0',
|
||
display: 'flex',
|
||
flexDirection: 'column' as const,
|
||
transform: 'translateX(100%)',
|
||
transition: 'transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)',
|
||
},
|
||
globalPanelVisible: {
|
||
transform: 'translateX(0)',
|
||
},
|
||
globalPanelHeader: {
|
||
padding: '16px',
|
||
borderBottom: '1px solid #f5f5f5',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
fontSize: '15px',
|
||
fontWeight: 600,
|
||
color: '#333',
|
||
},
|
||
globalPanelContent: {
|
||
flex: 1,
|
||
overflowY: 'auto' as const,
|
||
padding: '16px',
|
||
},
|
||
globalPanelFooter: {
|
||
padding: '12px 16px',
|
||
borderTop: '1px solid #f5f5f5',
|
||
display: 'flex',
|
||
justifyContent: 'center',
|
||
},
|
||
nodeGroup: {
|
||
marginBottom: '16px',
|
||
border: '1px solid #eee',
|
||
borderRadius: '0',
|
||
overflow: 'hidden',
|
||
},
|
||
nodeHeader: {
|
||
padding: '6px 10px',
|
||
backgroundColor: '#fafafa',
|
||
borderBottom: '1px solid #eee',
|
||
fontSize: '12px',
|
||
fontWeight: 600,
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
color: '#666',
|
||
},
|
||
exitBtn: {
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: '6px',
|
||
background: 'none',
|
||
border: 'none',
|
||
color: '#999',
|
||
fontSize: '12px',
|
||
cursor: 'pointer',
|
||
padding: '8px',
|
||
borderRadius: '0',
|
||
transition: 'all 0.2s',
|
||
}
|
||
};
|
||
|
||
// --- 全局入口组件（单例） ---
|
||
|
||
let globalControlMountRef = { current: false };
|
||
|
||
/** 全局入口控制组件 */
|
||
const GlobalVariantControl: React.FC = () => {
|
||
const [isPanelOpen, setIsPanelOpen] = useState(false);
|
||
const [docView, setDocView] = useState<{ title: string; content: string } | null>(null);
|
||
const { instances: allInstances, isVisible } = useVariantManager();
|
||
|
||
// 键盘快捷键监听
|
||
useEffect(() => {
|
||
const handleKeyDown = (e: KeyboardEvent) => {
|
||
if ((e.metaKey || e.ctrlKey) && e.key === '.') {
|
||
e.preventDefault();
|
||
initGlobalManager().setVisibility(!isVisible);
|
||
}
|
||
};
|
||
window.addEventListener('keydown', handleKeyDown);
|
||
return () => window.removeEventListener('keydown', handleKeyDown);
|
||
}, [isVisible]);
|
||
|
||
const instancesList = Object.values(allInstances);
|
||
|
||
// 按 id 字母顺序排序，保持稳定的显示顺序
|
||
const sortedInstances = [...instancesList].sort((a, b) => a.id.localeCompare(b.id));
|
||
|
||
// 如果没有实例或不可见，则不渲染
|
||
if (!isVisible || sortedInstances.length === 0) {
|
||
return null;
|
||
}
|
||
|
||
return (
|
||
<>
|
||
{/* 全局悬浮球 */}
|
||
<button
|
||
style={STYLES.globalTrigger}
|
||
onClick={() => setIsPanelOpen(true)}
|
||
title="方案比选 (Ctrl + .)"
|
||
>
|
||
<Icons.VariantCompare />
|
||
</button>
|
||
|
||
{/* 全局侧边栏面板 */}
|
||
<div style={{
|
||
...STYLES.globalPanel,
|
||
...(isPanelOpen ? STYLES.globalPanelVisible : {})
|
||
}}>
|
||
{/* Header */}
|
||
<div style={STYLES.globalPanelHeader}>
|
||
{docView ? (
|
||
<>
|
||
<button
|
||
onClick={() => setDocView(null)}
|
||
style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, color: '#666', display: 'flex', alignItems: 'center', gap: '4px' }}
|
||
>
|
||
<Icons.Back />
|
||
<span style={{ fontSize: '14px' }}>返回</span>
|
||
</button>
|
||
<button
|
||
onClick={() => setIsPanelOpen(false)}
|
||
style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 4, color: '#999' }}
|
||
>
|
||
<Icons.Close />
|
||
</button>
|
||
</>
|
||
) : (
|
||
<>
|
||
<span>方案比选</span>
|
||
<button
|
||
onClick={() => setIsPanelOpen(false)}
|
||
style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 4, color: '#999' }}
|
||
>
|
||
<Icons.Close />
|
||
</button>
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
{/* Content */}
|
||
<div style={STYLES.globalPanelContent}>
|
||
{docView ? (
|
||
/* 文档视图 - 简洁无风格 */
|
||
<div style={{ padding: '0 4px' }}>
|
||
<div style={{ fontSize: '13px', color: '#999', marginBottom: '16px' }}>{docView.title}</div>
|
||
<MarkdownViewer content={docView.content} />
|
||
</div>
|
||
) : (
|
||
/* 方案列表视图 */
|
||
sortedInstances.map(inst => (
|
||
<div key={inst.id} style={STYLES.nodeGroup}>
|
||
{/* Node Header */}
|
||
<div style={STYLES.nodeHeader}>
|
||
<span>{inst.name}</span>
|
||
<button
|
||
onClick={() => {
|
||
inst.focus();
|
||
setIsPanelOpen(false);
|
||
}}
|
||
style={{
|
||
background: 'none', border: 'none', cursor: 'pointer',
|
||
color: THEME_COLOR, display: 'flex', alignItems: 'center', fontSize: '12px'
|
||
}}
|
||
>
|
||
<Icons.Target />
|
||
<span style={{ marginLeft: 4 }}>定位</span>
|
||
</button>
|
||
</div>
|
||
{/* Variants List */}
|
||
<div>
|
||
{inst.variants.map((v, idx) => {
|
||
const isActive = inst.currentIndex === idx;
|
||
return (
|
||
<div
|
||
key={v.key || idx}
|
||
style={{
|
||
...STYLES.variantCard,
|
||
...(isActive ? { background: THEME_COLOR_BG } : {}),
|
||
borderBottom: '1px solid #f9f9f9',
|
||
borderRadius: 0,
|
||
}}
|
||
>
|
||
<div
|
||
onClick={() => inst.select(idx)}
|
||
style={{ cursor: 'pointer' }}
|
||
>
|
||
<div style={STYLES.variantTitle}>
|
||
<span>{v.title}</span>
|
||
{isActive && <span style={{color: THEME_COLOR, fontSize: '12px'}}>当前</span>}
|
||
</div>
|
||
<div style={STYLES.variantDesc}>{v.description}</div>
|
||
</div>
|
||
{/* 文档按钮 */}
|
||
{v.markdown && (
|
||
<button
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
setDocView({ title: v.title, content: v.markdown! });
|
||
}}
|
||
style={{
|
||
background: 'none', border: 'none', cursor: 'pointer',
|
||
color: '#999', display: 'flex', alignItems: 'center',
|
||
fontSize: '12px', marginTop: '6px', padding: 0
|
||
}}
|
||
onMouseEnter={e => e.currentTarget.style.color = THEME_COLOR}
|
||
onMouseLeave={e => e.currentTarget.style.color = '#999'}
|
||
>
|
||
<Icons.Doc />
|
||
<span style={{ marginLeft: 4 }}>查看文档</span>
|
||
</button>
|
||
)}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
))
|
||
)}
|
||
</div>
|
||
|
||
{/* Footer: Exit Button - 仅在列表视图显示 */}
|
||
{!docView && (
|
||
<div style={STYLES.globalPanelFooter}>
|
||
<button
|
||
style={STYLES.exitBtn}
|
||
onClick={() => {
|
||
initGlobalManager().setVisibility(false);
|
||
setIsPanelOpen(false);
|
||
}}
|
||
title="隐藏比选入口 (Ctrl + . 重新开启)"
|
||
onMouseEnter={e => e.currentTarget.style.color = '#333'}
|
||
onMouseLeave={e => e.currentTarget.style.color = '#999'}
|
||
>
|
||
<Icons.Exit />
|
||
<span>退出比选</span>
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* 遮罩层 */}
|
||
{isPanelOpen && (
|
||
<div
|
||
onClick={() => setIsPanelOpen(false)}
|
||
style={{
|
||
position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
|
||
backgroundColor: 'rgba(0,0,0,0.1)', zIndex: 99999
|
||
}}
|
||
/>
|
||
)}
|
||
</>
|
||
);
|
||
};
|
||
|
||
// --- 主组件 ---
|
||
|
||
export const VariantSwitcher: React.FC<VariantSwitcherProps> = ({
|
||
id: propId,
|
||
name: propName,
|
||
variants = [],
|
||
defaultIndex = 0,
|
||
onConfirm,
|
||
onReset,
|
||
style,
|
||
className,
|
||
}) => {
|
||
const [instanceId] = useState(() =>
|
||
propId || `axhub_vs_${Math.random().toString(36).substr(2, 9)}`
|
||
);
|
||
|
||
// 如果没有提供 name，使用 id 作为显示名称
|
||
const displayName = propName || instanceId;
|
||
|
||
const containerRef = useRef<HTMLDivElement>(null);
|
||
const [currentIndex, setCurrentIndex] = useState(defaultIndex);
|
||
const [isDecided, setIsDecided] = useState(false);
|
||
const [isHovered, setIsHovered] = useState(false);
|
||
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
|
||
|
||
const { isVisible: globalVisible } = useVariantManager();
|
||
|
||
// 标记当前组件负责渲染全局入口（单例，只渲染一次）
|
||
const [isGlobalControlOwner, setIsGlobalControlOwner] = useState(false);
|
||
|
||
useEffect(() => {
|
||
// 如果还没有组件负责渲染全局入口，则当前组件负责
|
||
if (!globalControlMountRef.current) {
|
||
globalControlMountRef.current = true;
|
||
setIsGlobalControlOwner(true);
|
||
}
|
||
|
||
// 组件卸载时，如果当前组件是全局入口的拥有者，则释放
|
||
return () => {
|
||
if (isGlobalControlOwner) {
|
||
globalControlMountRef.current = false;
|
||
}
|
||
};
|
||
}, [isGlobalControlOwner]);
|
||
|
||
// --- API Methods ---
|
||
const select = useCallback((index: number) => {
|
||
if (index >= 0 && index < variants.length) {
|
||
setCurrentIndex(index);
|
||
}
|
||
}, [variants.length]);
|
||
|
||
const confirm = useCallback(() => {
|
||
setIsDecided(true);
|
||
setIsPopoverOpen(false);
|
||
if (variants[currentIndex]) {
|
||
onConfirm?.(currentIndex, variants[currentIndex]);
|
||
}
|
||
}, [currentIndex, variants, onConfirm]);
|
||
|
||
const reset = useCallback(() => {
|
||
setIsDecided(false);
|
||
onReset?.();
|
||
}, [onReset]);
|
||
|
||
const focus = useCallback(() => {
|
||
if (containerRef.current) {
|
||
containerRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||
setIsHovered(true);
|
||
setTimeout(() => setIsHovered(false), 2000);
|
||
}
|
||
}, []);
|
||
|
||
// --- 注册到全局 ---
|
||
useEffect(() => {
|
||
if (variants.length > 0) {
|
||
const manager = initGlobalManager();
|
||
const api: VariantAPI = {
|
||
id: instanceId,
|
||
name: displayName,
|
||
currentIndex,
|
||
totalVariants: variants.length,
|
||
isDecided,
|
||
variants,
|
||
select,
|
||
confirm,
|
||
reset,
|
||
focus,
|
||
};
|
||
|
||
manager.register(instanceId, api);
|
||
return () => manager.unregister(instanceId);
|
||
}
|
||
}, [instanceId, displayName, currentIndex, variants, isDecided, select, confirm, reset, focus]);
|
||
|
||
// --- 点击外部关闭弹窗 ---
|
||
useEffect(() => {
|
||
const handleClickOutside = (e: MouseEvent) => {
|
||
if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
|
||
setIsPopoverOpen(false);
|
||
}
|
||
};
|
||
if (isPopoverOpen) {
|
||
document.addEventListener('mousedown', handleClickOutside);
|
||
}
|
||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||
}, [isPopoverOpen]);
|
||
|
||
if (variants.length === 0) return null;
|
||
|
||
return (
|
||
<>
|
||
{/* 全局入口（单例，通过 Portal 渲染到 body，只由第一个组件渲染） */}
|
||
{isGlobalControlOwner && typeof document !== 'undefined' && createPortal(
|
||
<GlobalVariantControl />,
|
||
document.body
|
||
)}
|
||
|
||
<div
|
||
ref={containerRef}
|
||
className={className}
|
||
style={{ ...STYLES.container, ...style }}
|
||
onMouseEnter={() => setIsHovered(true)}
|
||
onMouseLeave={() => setIsHovered(false)}
|
||
data-axhub-variant-id={instanceId}
|
||
>
|
||
{/* 渲染当前方案内容 */}
|
||
{variants[currentIndex]?.content}
|
||
|
||
{/* 触发器图标 (轻量化，悬停显示) */}
|
||
{globalVisible && (
|
||
<button
|
||
style={{
|
||
...STYLES.triggerBtn,
|
||
opacity: (isHovered || isPopoverOpen) ? 1 : 0,
|
||
pointerEvents: (isHovered || isPopoverOpen) ? 'auto' : 'none',
|
||
backgroundColor: isPopoverOpen ? THEME_COLOR : '#fff',
|
||
color: isPopoverOpen ? '#fff' : '#666',
|
||
borderColor: isPopoverOpen ? THEME_COLOR : 'rgba(0,0,0,0.06)'
|
||
}}
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
setIsPopoverOpen(!isPopoverOpen);
|
||
}}
|
||
title="切换方案"
|
||
>
|
||
<Icons.Switcher />
|
||
</button>
|
||
)}
|
||
|
||
{/* 下拉选择面板 */}
|
||
{globalVisible && (
|
||
<div style={{
|
||
...STYLES.popover,
|
||
...(isPopoverOpen ? STYLES.popoverVisible : {})
|
||
}}>
|
||
<div style={{ padding: '4px 8px', fontSize: '12px', color: '#999', fontWeight: 600 }}>
|
||
选择方案
|
||
</div>
|
||
|
||
<div style={{ maxHeight: '300px', overflowY: 'auto' }}>
|
||
{variants.map((variant, index) => {
|
||
const isActive = index === currentIndex;
|
||
return (
|
||
<div
|
||
key={variant.key || index}
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
select(index);
|
||
}}
|
||
style={{
|
||
...STYLES.variantCard,
|
||
...(isActive ? STYLES.variantCardActive : {}),
|
||
}}
|
||
>
|
||
<div style={STYLES.variantTitle}>
|
||
{variant.title}
|
||
{isActive && <Icons.Check />}
|
||
</div>
|
||
<div style={STYLES.variantDesc}>
|
||
{variant.description}
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
<div style={{ borderTop: '1px solid #f5f5f5', marginTop: '4px', paddingTop: '8px', display: 'flex', justifyContent: 'flex-end', gap: '8px' }}>
|
||
{isDecided ? (
|
||
<button
|
||
onClick={(e) => { e.stopPropagation(); reset(); }}
|
||
style={{
|
||
background: 'transparent', border: '1px solid #eee', borderRadius: '4px',
|
||
padding: '4px 10px', fontSize: '12px', cursor: 'pointer', color: '#666'
|
||
}}
|
||
>
|
||
重选
|
||
</button>
|
||
) : (
|
||
<button
|
||
onClick={(e) => { e.stopPropagation(); confirm(); }}
|
||
style={{
|
||
background: THEME_COLOR, border: 'none', borderRadius: '4px',
|
||
padding: '4px 10px', fontSize: '12px', cursor: 'pointer', color: '#fff'
|
||
}}
|
||
>
|
||
确认
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default VariantSwitcher;
|