fix: wire real components into AppShell instead of placeholders
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
9d2969410e
commit
79c144d74b
|
|
@ -2,68 +2,26 @@
|
|||
|
||||
import { Layout } from 'antd';
|
||||
import { useUIStore } from '@/adapters/state/zustand/uiStore';
|
||||
import { TopToolbar } from './TopToolbar';
|
||||
import { LeftPanel } from './LeftPanel';
|
||||
import { CenterCanvas } from './CenterCanvas';
|
||||
import { RightPanel } from './RightPanel';
|
||||
import { BottomStatusBar } from './BottomStatusBar';
|
||||
import ImportModal from '@/frameworks/components/dataImport/ImportModal';
|
||||
import { ExportDialog } from '@/frameworks/components/export/ExportDialog';
|
||||
import { TemplateModal } from '@/frameworks/components/template/TemplateModal';
|
||||
|
||||
const { Header, Sider, Content, Footer } = Layout;
|
||||
const { Sider, Content } = Layout;
|
||||
|
||||
export function AppShell() {
|
||||
const leftPanelCollapsed = useUIStore((s) => s.leftPanelCollapsed);
|
||||
const rightPanelCollapsed = useUIStore((s) => s.rightPanelCollapsed);
|
||||
const toggleLeftPanel = useUIStore((s) => s.toggleLeftPanel);
|
||||
const toggleRightPanel = useUIStore((s) => s.toggleRightPanel);
|
||||
|
||||
return (
|
||||
<Layout style={{ height: '100vh', overflow: 'hidden' }}>
|
||||
{/* Top Toolbar - 48px */}
|
||||
<Header
|
||||
style={{
|
||||
height: 48,
|
||||
lineHeight: '48px',
|
||||
padding: '0 16px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||
<strong style={{ fontSize: 16, color: 'var(--primary)' }}>
|
||||
DataViz Pro
|
||||
</strong>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<button
|
||||
onClick={toggleLeftPanel}
|
||||
style={{
|
||||
background: 'none',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: 4,
|
||||
padding: '2px 8px',
|
||||
cursor: 'pointer',
|
||||
fontSize: 12,
|
||||
color: 'var(--text-secondary)',
|
||||
}}
|
||||
>
|
||||
{leftPanelCollapsed ? '显示左面板' : '隐藏左面板'}
|
||||
</button>
|
||||
<button
|
||||
onClick={toggleRightPanel}
|
||||
style={{
|
||||
background: 'none',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: 4,
|
||||
padding: '2px 8px',
|
||||
cursor: 'pointer',
|
||||
fontSize: 12,
|
||||
color: 'var(--text-secondary)',
|
||||
}}
|
||||
>
|
||||
{rightPanelCollapsed ? '显示右面板' : '隐藏右面板'}
|
||||
</button>
|
||||
</div>
|
||||
</Header>
|
||||
<TopToolbar />
|
||||
|
||||
<Layout hasSider>
|
||||
{/* Left Panel - 280px collapsible */}
|
||||
<Sider
|
||||
width={280}
|
||||
collapsedWidth={0}
|
||||
|
|
@ -73,58 +31,23 @@ export function AppShell() {
|
|||
style={{
|
||||
overflow: 'auto',
|
||||
height: 'calc(100vh - 48px - 32px)',
|
||||
background: 'var(--surface, #fff)',
|
||||
}}
|
||||
>
|
||||
<div style={{ padding: 12 }}>
|
||||
<div
|
||||
style={{
|
||||
padding: '8px 0',
|
||||
fontWeight: 500,
|
||||
fontSize: 13,
|
||||
color: 'var(--text-secondary)',
|
||||
borderBottom: '1px solid var(--border-light)',
|
||||
marginBottom: 8,
|
||||
}}
|
||||
>
|
||||
数据 / 图表 / 字段
|
||||
</div>
|
||||
<p
|
||||
style={{
|
||||
fontSize: 13,
|
||||
color: 'var(--text-tertiary)',
|
||||
padding: '24px 0',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
左面板内容区域
|
||||
</p>
|
||||
</div>
|
||||
<LeftPanel />
|
||||
</Sider>
|
||||
|
||||
{/* Center Canvas - flex grow */}
|
||||
<Content
|
||||
style={{
|
||||
overflow: 'auto',
|
||||
height: 'calc(100vh - 48px - 32px)',
|
||||
position: 'relative',
|
||||
background: 'var(--bg, #f5f5f5)',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
padding: 16,
|
||||
minHeight: '100%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<p style={{ color: 'var(--text-tertiary)', fontSize: 14 }}>
|
||||
将图表拖放到画布上
|
||||
</p>
|
||||
</div>
|
||||
<CenterCanvas />
|
||||
</Content>
|
||||
|
||||
{/* Right Panel - 320px collapsible */}
|
||||
<Sider
|
||||
width={320}
|
||||
collapsedWidth={0}
|
||||
|
|
@ -134,57 +57,21 @@ export function AppShell() {
|
|||
style={{
|
||||
overflow: 'auto',
|
||||
height: 'calc(100vh - 48px - 32px)',
|
||||
borderLeft: '1px solid var(--border-light)',
|
||||
borderLeft: '1px solid var(--border-light, #e8e8e8)',
|
||||
borderRight: 'none',
|
||||
background: 'var(--surface, #fff)',
|
||||
}}
|
||||
>
|
||||
<div style={{ padding: 12 }}>
|
||||
<div
|
||||
style={{
|
||||
padding: '8px 0',
|
||||
fontWeight: 500,
|
||||
fontSize: 13,
|
||||
color: 'var(--text-secondary)',
|
||||
borderBottom: '1px solid var(--border-light)',
|
||||
marginBottom: 8,
|
||||
}}
|
||||
>
|
||||
数据绑定 / 样式 / 交互
|
||||
</div>
|
||||
<p
|
||||
style={{
|
||||
fontSize: 13,
|
||||
color: 'var(--text-tertiary)',
|
||||
padding: '24px 0',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
右面板内容区域
|
||||
</p>
|
||||
</div>
|
||||
<RightPanel />
|
||||
</Sider>
|
||||
</Layout>
|
||||
|
||||
{/* Bottom Status Bar - 32px */}
|
||||
<Footer
|
||||
style={{
|
||||
height: 32,
|
||||
lineHeight: '32px',
|
||||
padding: '0 16px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
fontSize: 12,
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||
<span>就绪</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||
<span>图表: 0</span>
|
||||
<span>缩放: 100%</span>
|
||||
</div>
|
||||
</Footer>
|
||||
<BottomStatusBar />
|
||||
|
||||
{/* Modals */}
|
||||
<ImportModal />
|
||||
<ExportDialog />
|
||||
<TemplateModal />
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue