添加一些数据
This commit is contained in:
yuding
224
demo-next/components/ControlPanel.tsx
Normal file
224
demo-next/components/ControlPanel.tsx
Normal file
@@ -0,0 +1,224 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
|
||||
interface ControlPanelProps {
|
||||
engineStatus: string;
|
||||
isLoading: boolean;
|
||||
onInitEngine: () => void;
|
||||
onLoadModel: (url?: string) => void;
|
||||
onSetLang: (lang: 'zh-CN' | 'en-US') => void;
|
||||
onSetTheme: (theme: 'dark' | 'light') => void;
|
||||
onSetCustomTheme: () => void;
|
||||
onOpenTestDialog: () => void;
|
||||
onOpenInfoDialog: () => void;
|
||||
onOpenTreeDialog: () => void;
|
||||
onToggleToolbar: (visible: boolean) => void;
|
||||
onToggleLabel: (visible: boolean) => void;
|
||||
onPauseRendering: () => void;
|
||||
onResumeRendering: () => void;
|
||||
}
|
||||
|
||||
export default function ControlPanel({
|
||||
engineStatus,
|
||||
onInitEngine,
|
||||
onLoadModel,
|
||||
onSetLang,
|
||||
onSetTheme,
|
||||
onSetCustomTheme,
|
||||
onOpenTestDialog,
|
||||
onOpenInfoDialog,
|
||||
onOpenTreeDialog,
|
||||
onToggleToolbar,
|
||||
onToggleLabel,
|
||||
onPauseRendering,
|
||||
onResumeRendering
|
||||
}: ControlPanelProps) {
|
||||
const [modelUrl, setModelUrl] = useState('');
|
||||
const [isToolbarVisible, setIsToolbarVisible] = useState(true);
|
||||
const [isLabelVisible, setIsLabelVisible] = useState(true);
|
||||
|
||||
const handleToggleToolbar = () => {
|
||||
const newVisible = !isToolbarVisible;
|
||||
setIsToolbarVisible(newVisible);
|
||||
onToggleToolbar(newVisible);
|
||||
};
|
||||
|
||||
const handleToggleLabel = () => {
|
||||
const newVisible = !isLabelVisible;
|
||||
setIsLabelVisible(newVisible);
|
||||
onToggleLabel(newVisible);
|
||||
};
|
||||
|
||||
const handleLoadModel = () => {
|
||||
const url = modelUrl.trim();
|
||||
onLoadModel(url || undefined);
|
||||
};
|
||||
|
||||
const getStatusColor = () => {
|
||||
switch (engineStatus) {
|
||||
case '已初始化':
|
||||
return '#28a745';
|
||||
case '初始化失败':
|
||||
case '初始化错误':
|
||||
case 'SDK 未加载':
|
||||
return '#dc3545';
|
||||
default:
|
||||
return '#666';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<aside
|
||||
style={{
|
||||
width: '320px',
|
||||
background: '#fff',
|
||||
borderRight: '1px solid #e0e0e0',
|
||||
padding: '20px',
|
||||
overflowY: 'auto',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '20px',
|
||||
boxShadow: '2px 0 5px rgba(0, 0, 0, 0.05)',
|
||||
zIndex: 10
|
||||
}}
|
||||
>
|
||||
<h1 style={{ fontSize: '1.4rem', color: '#333', marginBottom: '10px' }}>
|
||||
iFlow Engine Demo
|
||||
</h1>
|
||||
<p style={{ fontSize: '0.85rem', color: '#666', marginBottom: '10px' }}>
|
||||
Next.js + React
|
||||
</p>
|
||||
|
||||
<ControlGroup title="🌍 语言 (Language)">
|
||||
<ButtonGroup>
|
||||
<button className="btn-primary" onClick={() => onSetLang('zh-CN')}>中文</button>
|
||||
<button className="btn-primary" onClick={() => onSetLang('en-US')}>English</button>
|
||||
</ButtonGroup>
|
||||
</ControlGroup>
|
||||
|
||||
<ControlGroup title="🪟 弹窗 (Dialog)">
|
||||
<ButtonGroup>
|
||||
<button onClick={onOpenTestDialog}>测试弹窗</button>
|
||||
<button onClick={onOpenInfoDialog}>信息弹窗</button>
|
||||
<button onClick={onOpenTreeDialog}>树组件</button>
|
||||
</ButtonGroup>
|
||||
</ControlGroup>
|
||||
|
||||
<ControlGroup title="🛠️ 工具栏 (Toolbar)">
|
||||
<ButtonGroup>
|
||||
<button onClick={handleToggleToolbar}>
|
||||
{isToolbarVisible ? '隐藏工具栏' : '显示工具栏'}
|
||||
</button>
|
||||
<button onClick={handleToggleLabel}>
|
||||
{isLabelVisible ? '隐藏标签' : '显示标签'}
|
||||
</button>
|
||||
</ButtonGroup>
|
||||
</ControlGroup>
|
||||
|
||||
<ControlGroup title="🎨 样式 (Theme)">
|
||||
<ButtonGroup>
|
||||
<button onClick={() => onSetTheme('dark')}>深色</button>
|
||||
<button onClick={() => onSetTheme('light')}>浅色</button>
|
||||
<button onClick={onSetCustomTheme}>自定义红</button>
|
||||
</ButtonGroup>
|
||||
</ControlGroup>
|
||||
|
||||
<ControlGroup title="🎮 3D 引擎 (Engine)">
|
||||
<ButtonGroup>
|
||||
<button className="btn-primary" onClick={onInitEngine}>初始化引擎</button>
|
||||
<button className="btn-primary" onClick={handleLoadModel}>加载模型</button>
|
||||
</ButtonGroup>
|
||||
<input
|
||||
type="text"
|
||||
value={modelUrl}
|
||||
onChange={(e) => setModelUrl(e.target.value)}
|
||||
placeholder="输入模型 URL（可选）"
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '6px 8px',
|
||||
fontSize: '0.85rem',
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '4px',
|
||||
fontFamily: 'Consolas, Monaco, monospace',
|
||||
outline: 'none',
|
||||
marginTop: '8px'
|
||||
}}
|
||||
/>
|
||||
<ButtonGroup style={{ marginTop: '8px' }}>
|
||||
<button onClick={onPauseRendering}>暂停渲染</button>
|
||||
<button onClick={onResumeRendering}>恢复渲染</button>
|
||||
</ButtonGroup>
|
||||
<div style={{ marginTop: '10px', fontSize: '0.85rem', color: '#666' }}>
|
||||
状态: <span style={{ color: getStatusColor() }}>{engineStatus}</span>
|
||||
</div>
|
||||
</ControlGroup>
|
||||
|
||||
<style jsx>{`
|
||||
button {
|
||||
padding: 6px 12px;
|
||||
font-size: 0.9rem;
|
||||
border: 1px solid #ddd;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
button:hover {
|
||||
background: #f0f0f0;
|
||||
border-color: #ccc;
|
||||
}
|
||||
.btn-primary {
|
||||
background: #0078d4;
|
||||
color: white;
|
||||
border-color: #0063b1;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background: #0063b1;
|
||||
}
|
||||
`}</style>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
function ControlGroup({ title, children }: { title: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
background: '#f9f9f9',
|
||||
padding: '15px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #eee'
|
||||
}}
|
||||
>
|
||||
<h2
|
||||
style={{
|
||||
fontSize: '1rem',
|
||||
color: '#555',
|
||||
marginBottom: '10px',
|
||||
paddingBottom: '5px',
|
||||
borderBottom: '2px solid #e0e0e0'
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ButtonGroup({ children, style }: { children: React.ReactNode; style?: React.CSSProperties }) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
gap: '8px',
|
||||
...style
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user