diff --git a/frontend/src/frameworks/components/layout/AppShell.tsx b/frontend/src/frameworks/components/layout/AppShell.tsx
index 7db89ba..d059a1b 100644
--- a/frontend/src/frameworks/components/layout/AppShell.tsx
+++ b/frontend/src/frameworks/components/layout/AppShell.tsx
@@ -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>
   );
 }