add system preview

src/components/preview-view/PreviewViewRoot.tsx

@@ -0,0 +1,105 @@
+import { getIcon } from 'obsidian'
+import { useEffect, useRef } from 'react'
+
+import { PreviewViewState } from '../../PreviewView'
+
+export default function PreviewViewRoot({
+	state,
+	close,
+}: {
+	state: PreviewViewState
+	close: () => void
+}) {
+	const closeIcon = getIcon('x')
+	const contentRef = useRef<HTMLDivElement>(null)
+
+	// 显示原始文本内容
+	useEffect(() => {
+		if (contentRef.current && state.content) {
+			// 清空现有内容
+			contentRef.current.empty()
+			
+			// 创建预格式化文本元素
+			const preElement = document.createElement('pre')
+			preElement.className = 'infio-raw-content'
+			preElement.textContent = state.content
+			
+			// 添加到容器
+			contentRef.current.appendChild(preElement)
+		}
+	}, [state.content, state.file])
+
+	return (
+		<div id="infio-preview-view">
+			<div className="view-header">
+				<div className="view-header-left">
+					<div className="view-header-nav-buttons"></div>
+				</div>
+				<div className="view-header-title-container mod-at-start">
+					<div className="view-header-title">
+						{state.title || (state.file ? state.file.name : 'Markdown Preview')}
+					</div>
+					<div className="view-actions">
+						<button
+							className="clickable-icon view-action infio-close-button"
+							aria-label="Close preview"
+							onClick={close}
+						>
+							{closeIcon && '✕'}
+							Close
+						</button>
+					</div>
+				</div>
+			</div>
+
+			<div className="view-content">
+				<div className="markdown-preview-view is-readable-line-width">
+					<div className="markdown-preview-sizer">
+						<div className="infio-preview-title">
+							{state.title || (state.file ? state.file.name.replace(/\.[^/.]+$/, '') : '')}
+						</div>
+						<div 
+							ref={contentRef} 
+							className="markdown-preview-section"
+						></div>
+					</div>
+				</div>
+			</div>
+			<style>{`
+				#infio-preview-view {
+					display: flex;
+					flex-direction: column;
+					height: 100%;
+					background-color: var(--background-primary);
+				}
+				
+				#infio-preview-view .view-content {
+					flex-grow: 1;
+					overflow: auto;
+					padding: 0 20px;
+				}
+				
+				.infio-preview-title {
+					font-size: 1.8em;
+					font-weight: bold;
+					margin-bottom: 20px;
+					padding-bottom: 10px;
+					border-bottom: 1px solid var(--background-modifier-border);
+				}
+				
+				.markdown-preview-section {
+					padding: 10px 0;
+				}
+				
+				.infio-raw-content {
+					white-space: pre-wrap;
+					word-break: break-word;
+					font-family: var(--font-monospace);
+					padding: 10px;
+					background-color: var(--background-secondary);
+					border-radius: 4px;
+				}
+			`}</style>
+		</div>
+	)
+}