(null);
+
+ // Format-specific options
+ const [quality, setQuality] = useState(90);
+ const [resolution, setResolution] = useState(2);
+ const [pageSize, setPageSize] = useState('A4');
+ const [orientation, setOrientation] = useState<'portrait' | 'landscape'>('landscape');
+ const [sheetName, setSheetName] = useState('Sheet1');
+ const [pptStyle, setPptStyle] = useState('minimal');
+ const [htmlTitle, setHtmlTitle] = useState('DataViz Pro Export');
+
+ const chartIds = useMemo(() => charts.map((c) => c.id), [charts]);
+
+ const handleClose = useCallback(() => {
+ setVisible(false);
+ setSelectedFormat(null);
+ }, [setVisible]);
+
+ const handleDoExport = useCallback(async () => {
+ if (!selectedFormat) {
+ message.warning('请先选择导出格式');
+ return;
+ }
+ if (chartIds.length === 0) {
+ message.warning('当前看板没有图表可供导出');
+ return;
+ }
+
+ try {
+ await handleExport({
+ format: selectedFormat,
+ chartIds,
+ datasetId: activeDataSetId ?? '',
+ fileName: `dataviz-export.${selectedFormat === 'template' ? 'json' : selectedFormat}`,
+ });
+ message.success('导出成功');
+ handleClose();
+ } catch {
+ message.error(error ?? '导出失败，请重试');
+ }
+ }, [selectedFormat, chartIds, activeDataSetId, handleExport, handleClose, error]);
+
+ const renderFormatOptions = () => {
+ if (!selectedFormat) return null;
+
+ const isImage = selectedFormat === 'png' || selectedFormat === 'jpg';
+ const isSvg = selectedFormat === 'svg';
+ const isPdf = selectedFormat === 'pdf';
+ const isExcel = selectedFormat === 'excel';
+ const isPpt = selectedFormat === 'ppt';
+ const isHtml = selectedFormat === 'html';
+
+ return (
+
+
+ 导出选项
+
+
+ {isImage && (
+
+
+ 图片质量: {quality}%
+
+
+
+ 分辨率
+
+
+
+
+ )}
+
+ {isSvg && (
+
+ 分辨率
+
+
+
+ )}
+
+ {isPdf && (
+
+
+ 页面大小
+
+
+
+
+ 页面方向
+
+ setOrientation(e.target.value)}
+ style={{ marginTop: 4 }}
+ >
+ 纵向
+ 横向
+
+
+
+ )}
+
+ {isExcel && (
+
+ 工作表名称
+
+ setSheetName(e.target.value)}
+ placeholder="Sheet1"
+ style={{ width: 200, marginTop: 4 }}
+ maxLength={31}
+ />
+
+ )}
+
+ {isPpt && (
+
+ 演示模板风格
+
+
+
+ )}
+
+ {isHtml && (
+
+ 页面标题
+
+ setHtmlTitle(e.target.value)}
+ placeholder="输入页面标题"
+ style={{ width: 300, marginTop: 4 }}
+ maxLength={100}
+ />
+
+ )}
+
+
+ 选择导出格式（当前 {chartIds.length} 个图表）
+
+
+
+ {FORMATS.map((fmt) => {
+ const isSelected = selectedFormat === fmt.key;
+ return (
+
+ setSelectedFormat(fmt.key)}
+ style={{
+ textAlign: 'center',
+ borderColor: isSelected ? fmt.color : undefined,
+ borderWidth: isSelected ? 2 : 1,
+ background: isSelected ? `${fmt.color}08` : undefined,
+ cursor: 'pointer',
+ }}
+ styles={{
+ body: { padding: '16px 8px' },
+ }}
+ >
+
+ {fmt.icon}
+
+
+ {fmt.name}
+
+
+ {fmt.description}
+
+
+
+ );
+ })}
+
+
+ {renderFormatOptions()}
+
+
+ 数据 / 图表 / 字段
+
+
+ 左面板内容区域
+
+
+
+ 数据绑定 / 样式 / 交互
+
+
+ 右面板内容区域
+
+
+ {/* Left: dataset info */}
+
+
+ 数据集: {dataSets.length}
+
+
+ 总行数: {totalRows.toLocaleString()}
+
+
+
+ {/* Center: chart count */}
+
+
+ 图表: {charts.length}
+
+
+
+ {/* Right: theme & zoom */}
+
+
+ 主题: {currentTheme === 'light' ? '亮色' : '暗色'}
+
+
+ 缩放: {Math.round(zoomLevel * 100)}%
+
+
+
+ );
+}
diff --git a/frontend/src/frameworks/components/layout/CenterCanvas.tsx b/frontend/src/frameworks/components/layout/CenterCanvas.tsx
new file mode 100644
index 0000000..7b6a492
--- /dev/null
+++ b/frontend/src/frameworks/components/layout/CenterCanvas.tsx
@@ -0,0 +1,97 @@
+'use client';
+
+import React, { useMemo } from 'react';
+import { Responsive } from 'react-grid-layout';
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+const WidthProvider = require('react-grid-layout').WidthProvider;
+import { useAppSelector } from '@/adapters/state/redux/store';
+import { useLayout } from '@/frameworks/hooks/useLayout';
+import { ChartWrapper } from '@/frameworks/components/charts/ChartWrapper';
+import { UploadOutlined } from '@ant-design/icons';
+import { useUIStore } from '@/adapters/state/zustand/uiStore';
+
+import 'react-grid-layout/css/styles.css';
+import 'react-resizable/css/styles.css';
+
+const ResponsiveGridLayout = WidthProvider(Responsive);
+
+/** Placeholder shown when the canvas is empty. */
+function DropZonePlaceholder() {
+ const setImportModalVisible = useUIStore((s) => s.setImportModalVisible);
+
+ return (
+ setImportModalVisible(true)}
+ style={{
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ width: '100%',
+ height: '100%',
+ minHeight: 400,
+ border: '2px dashed var(--border)',
+ borderRadius: 12,
+ cursor: 'pointer',
+ color: 'var(--text-tertiary)',
+ gap: 12,
+ }}
+ >
+
+ 拖拽文件到此处 或 点击导入数据
+
+ );
+}
+
+export function CenterCanvas() {
+ const charts = useAppSelector((s) => s.chart.charts);
+ const { layouts, onLayoutChange } = useLayout();
+
+ const gridLayouts = useMemo(() => {
+ return layouts.map((item) => ({
+ i: item.chartId,
+ x: item.x,
+ y: item.y,
+ w: item.w,
+ h: item.h,
+ }));
+ }, [layouts]);
+
+ if (charts.length === 0) {
+ return (
+
+
+
+ );
+ }
+
+ return (
+
+
onLayoutChange(layout)}
+ isDraggable
+ isResizable
+ compactType="vertical"
+ >
+ {charts.map((chart) => (
+
+
+
+ ))}
+
+
+ {dataSets.map((ds) => (
+
dispatch(setActiveDataSet(ds.id))}
+ >
+
+
+
+
+ {ds.fileName}
+ {ds.sheetName ? ` (${ds.sheetName})` : ''}
+
+
+ {ds.columns.length} 列 · {ds.rowCount} 行
+
+
+
+ ))}
+
+ {fieldItems.map((field) => (
+
handleDragStart(e, field)}
+ style={{
+ display: 'flex',
+ alignItems: 'center',
+ gap: 8,
+ padding: '6px 8px',
+ borderRadius: 4,
+ cursor: 'grab',
+ fontSize: 13,
+ border: '1px solid var(--border-light)',
+ background: 'var(--bg-secondary, transparent)',
+ }}
+ >
+
+ {FIELD_TYPE_ICON[field.type] ?? }
+
+ {field.name}
+
+ {field.type}
+
+
+ ))}
+
+ {Object.entries(grouped).map(([category, charts]) => (
+
+
+ {CATEGORY_LABELS[category] ?? category}
+
+
+ {charts.map((meta) => (
+
+
+ {meta.label}
+
+ ))}
+
+
+ ))}
+
+ setLeftPanelTab(key as any)}
+ size="small"
+ items={tabItems}
+ style={{ height: '100%' }}
+ />
+
+ );
+}
diff --git a/frontend/src/frameworks/components/layout/RightPanel.tsx b/frontend/src/frameworks/components/layout/RightPanel.tsx
new file mode 100644
index 0000000..6c77bf1
--- /dev/null
+++ b/frontend/src/frameworks/components/layout/RightPanel.tsx
@@ -0,0 +1,89 @@
+'use client';
+
+import { Tabs, Empty } from 'antd';
+import { useUIStore } from '@/adapters/state/zustand/uiStore';
+import { useAppSelector } from '@/adapters/state/redux/store';
+
+/** Placeholder for the DataBinding configuration component. */
+function DataBindingTab() {
+ return (
+
+
+ 数据绑定配置区域 — 将字段拖拽到对应轴位置
+
+
+
+ 样式配置区域 — 标题、颜色、图例、坐标轴、标签等
+
+
+
+ 交互配置区域 — 工具提示、缩放、筛选联动等
+
+
+
+
+ );
+ }
+
+ const tabItems = [
+ {
+ key: 'bindData',
+ label: '数据',
+ children: ,
+ },
+ {
+ key: 'style',
+ label: '样式',
+ children: ,
+ },
+ {
+ key: 'interaction',
+ label: '交互',
+ children: ,
+ },
+ ];
+
+ return (
+
+ setRightPanelTab(key as any)}
+ size="small"
+ items={tabItems}
+ />
+
+ );
+}
diff --git a/frontend/src/frameworks/components/layout/TopToolbar.tsx b/frontend/src/frameworks/components/layout/TopToolbar.tsx
new file mode 100644
index 0000000..c67a6cb
--- /dev/null
+++ b/frontend/src/frameworks/components/layout/TopToolbar.tsx
@@ -0,0 +1,142 @@
+'use client';
+
+import { Button, Dropdown, Space, Switch, Tooltip } from 'antd';
+import {
+ UploadOutlined,
+ PlusOutlined,
+ ExportOutlined,
+ AppstoreOutlined,
+ BulbOutlined,
+} from '@ant-design/icons';
+import { useUIStore } from '@/adapters/state/zustand/uiStore';
+import { useThemeStore } from '@/adapters/state/zustand/themeStore';
+import { useCreateChart } from '@/frameworks/hooks/useCreateChart';
+import {
+ CHART_TYPE_META,
+ type ChartType,
+} from '@/domain/valueObjects/ChartType';
+import type { MenuProps } from 'antd';
+
+const CATEGORY_LABELS: Record = {
+ basic: '基础图表',
+ statistical: '统计图表',
+ relationship: '关系图表',
+ composition: '构成图表',
+ geo: '地理图表',
+ other: '其他',
+};
+
+function buildChartMenuItems(): MenuProps['items'] {
+ const grouped: Record = {};
+ for (const meta of Object.values(CHART_TYPE_META)) {
+ if (!grouped[meta.category]) grouped[meta.category] = [];
+ grouped[meta.category].push({ type: meta.type, label: meta.label });
+ }
+
+ const items: MenuProps['items'] = [];
+ for (const [category, charts] of Object.entries(grouped)) {
+ items.push({
+ key: `group-${category}`,
+ type: 'group',
+ label: CATEGORY_LABELS[category] ?? category,
+ children: charts.map((c) => ({
+ key: c.type,
+ label: c.label,
+ })),
+ });
+ }
+ return items;
+}
+
+export function TopToolbar() {
+ const setImportModalVisible = useUIStore((s) => s.setImportModalVisible);
+ const setExportModalVisible = useUIStore((s) => s.setExportModalVisible);
+ const setTemplateModalVisible = useUIStore((s) => s.setTemplateModalVisible);
+
+ const currentTheme = useThemeStore((s) => s.currentTheme);
+ const setTheme = useThemeStore((s) => s.setTheme);
+
+ const { handleCreate, activeDataSetId, loading: chartCreating } = useCreateChart();
+
+ const handleAddChart = async (chartType: ChartType) => {
+ try {
+ await handleCreate(chartType);
+ } catch {
+ // Error is already captured in the hook's error state
+ }
+ };
+
+ const chartMenuItems = buildChartMenuItems();
+
+ return (
+
+
+ DataViz Pro
+
+
+
+
+ }
+ onClick={() => setImportModalVisible(true)}
+ >
+ 导入数据
+
+
+
+ handleAddChart(key as ChartType),
+ }}
+ trigger={['click']}
+ disabled={chartCreating || !activeDataSetId}
+ >
+ }
+ loading={chartCreating}
+ disabled={chartCreating || !activeDataSetId}
+ >
+ 添加图表
+
+
+
+
+
+
+ setTheme(checked ? 'dark' : 'light')}
+ />
+
+
+
+
+ }
+ onClick={() => setExportModalVisible(true)}
+ >
+ 导出
+
+
+
+
+ }
+ onClick={() => setTemplateModalVisible(true)}
+ >
+ 模板
+
+
+
+
+ );
+}
diff --git a/frontend/src/frameworks/components/layout/index.ts b/frontend/src/frameworks/components/layout/index.ts
new file mode 100644
index 0000000..f51631e
--- /dev/null
+++ b/frontend/src/frameworks/components/layout/index.ts
@@ -0,0 +1,6 @@
+export { AppShell } from './AppShell';
+export { TopToolbar } from './TopToolbar';
+export { LeftPanel } from './LeftPanel';
+export { CenterCanvas } from './CenterCanvas';
+export { RightPanel } from './RightPanel';
+export { BottomStatusBar } from './BottomStatusBar';
diff --git a/frontend/src/frameworks/components/template/TemplateCard.tsx b/frontend/src/frameworks/components/template/TemplateCard.tsx
new file mode 100644
index 0000000..f55be4f
--- /dev/null
+++ b/frontend/src/frameworks/components/template/TemplateCard.tsx
@@ -0,0 +1,108 @@
+'use client';
+
+import React, { useCallback } from 'react';
+import { Card, Button, Typography, Popconfirm, Space, Tag } from 'antd';
+import {
+ AppstoreOutlined,
+ ExportOutlined,
+ DeleteOutlined,
+} from '@ant-design/icons';
+import { type Template } from '@/domain/entities/Template';
+
+const { Text, Paragraph } = Typography;
+
+const themeColors: Record = {
+ default: '#1677ff',
+ dark: '#141414',
+ light: '#f0f2f5',
+ blue: '#1890ff',
+ green: '#52c41a',
+ purple: '#722ed1',
+};
+
+export interface TemplateCardProps {
+ template: Template;
+ onApply: (templateId: string) => void;
+ onExport: (templateId: string) => void;
+ onDelete: (templateId: string) => void;
+}
+
+export const TemplateCard: React.FC = ({
+ template,
+ onApply,
+ onExport,
+ onDelete,
+}) => {
+ const bgColor = themeColors[template.theme] ?? themeColors.default;
+ const createdDate = new Date(template.createdAt).toLocaleDateString('zh-CN');
+
+ const handleApply = useCallback(() => onApply(template.id), [onApply, template.id]);
+ const handleExport = useCallback(() => onExport(template.id), [onExport, template.id]);
+ const handleDelete = useCallback(() => onDelete(template.id), [onDelete, template.id]);
+
+ return (
+
+
+
+ }
+ actions={[
+ ,
+ ,
+
+
+ ,
+ ]}
+ >
+
+
+ {template.name}
+
+ {template.charts.length} 图表
+
+ }
+ description={
+ <>
+
+ {template.description || '暂无描述'}
+
+
+ 创建于 {createdDate}
+
+
+ }
+ />
+
+ );
+};
diff --git a/frontend/src/frameworks/components/template/TemplateGallery.tsx b/frontend/src/frameworks/components/template/TemplateGallery.tsx
new file mode 100644
index 0000000..b739202
--- /dev/null
+++ b/frontend/src/frameworks/components/template/TemplateGallery.tsx
@@ -0,0 +1,137 @@
+'use client';
+
+import React, { useMemo, useState, useCallback } from 'react';
+import { Input, Row, Col, Button, Upload, Empty, message } from 'antd';
+import { ImportOutlined } from '@ant-design/icons';
+import type { UploadProps } from 'antd';
+import { useTemplate } from '@/frameworks/hooks/useTemplate';
+import { TemplateCard } from './TemplateCard';
+
+export const TemplateGallery: React.FC = () => {
+ const {
+ templates,
+ deleteTemplate,
+ applyTemplate,
+ exportTemplateJson,
+ importTemplateJson,
+ } = useTemplate();
+
+ const [search, setSearch] = useState('');
+
+ const filtered = useMemo(() => {
+ if (!search.trim()) return templates;
+ const keyword = search.trim().toLowerCase();
+ return templates.filter(
+ (t) =>
+ t.name.toLowerCase().includes(keyword) ||
+ t.description.toLowerCase().includes(keyword),
+ );
+ }, [templates, search]);
+
+ const handleApply = useCallback(
+ (templateId: string) => {
+ try {
+ // Use empty string as dataSetId — caller should bind data separately
+ applyTemplate(templateId, '');
+ message.success('模板已应用');
+ } catch {
+ message.error('应用模板失败');
+ }
+ },
+ [applyTemplate],
+ );
+
+ const handleExport = useCallback(
+ async (templateId: string) => {
+ try {
+ const json = await exportTemplateJson(templateId);
+ if (!json) {
+ message.error('导出失败：模板不存在');
+ return;
+ }
+ const blob = new Blob([json], { type: 'application/json' });
+ const url = URL.createObjectURL(blob);
+ const link = document.createElement('a');
+ link.href = url;
+ const tpl = templates.find((t) => t.id === templateId);
+ link.download = `${tpl?.name ?? 'template'}.json`;
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+ URL.revokeObjectURL(url);
+ message.success('模板已导出');
+ } catch {
+ message.error('导出模板失败');
+ }
+ },
+ [exportTemplateJson, templates],
+ );
+
+ const handleDelete = useCallback(
+ (templateId: string) => {
+ try {
+ deleteTemplate(templateId);
+ message.success('模板已删除');
+ } catch {
+ message.error('删除模板失败');
+ }
+ },
+ [deleteTemplate],
+ );
+
+ const uploadProps: UploadProps = {
+ accept: '.json',
+ showUploadList: false,
+ beforeUpload: (file) => {
+ const reader = new FileReader();
+ reader.onload = (e) => {
+ try {
+ const json = e.target?.result as string;
+ importTemplateJson(json);
+ message.success('模板导入成功');
+ } catch {
+ message.error('导入失败：无效的模板文件');
+ }
+ };
+ reader.readAsText(file);
+ return false; // prevent auto upload
+ },
+ };
+
+ return (
+
+
+ setSearch(e.target.value)}
+ style={{ flex: 1 }}
+ />
+
+ }>导入模板
+
+
+
+ {filtered.length === 0 ? (
+
+ ) : (
+
+ {filtered.map((template) => (
+
+
+
+ ))}
+
+ )}
+
+
+
当前看板概览
+
+
+ {charts.length}
+
+ 图表数量
+
+
+ {layouts.length}
+
+ 布局组件
+
+
+
+
+
+