diff --git a/packages/design/src/css/index.less b/packages/design/src/css/index.less
index 9302367..376c0ee 100644
--- a/packages/design/src/css/index.less
+++ b/packages/design/src/css/index.less
@@ -4,7 +4,7 @@
 @import './icons/index.less';
 
 @import './modules/header.less';
-@import './modules/sketch.less';
+@import './modules/dashboard.less';
 @import './modules/toolbar.less';
 @import './modules/panel-layer.less';
 @import './modules/split-pane.less';
diff --git a/packages/design/src/css/modules/sketch.less b/packages/design/src/css/modules/dashboard.less
similarity index 77%
rename from packages/design/src/css/modules/sketch.less
rename to packages/design/src/css/modules/dashboard.less
index c43217f..2ae871a 100644
--- a/packages/design/src/css/modules/sketch.less
+++ b/packages/design/src/css/modules/dashboard.less
@@ -1,10 +1,10 @@
 @import '../variable.less';
 
-@mod-sketch: ~'@{prefix}-mod-sketch';
+@mod-dashboard: ~'@{prefix}-mod-dashboard';
 
-// @mod-sketch-header-height: 36px;
+// @mod-dashboard-header-height: 36px;
 
-.@{mod-sketch} {
+.@{mod-dashboard} {
   color: ~'var(--@{prefix}-text-color)';
   background: ~'var(--@{prefix}-bg-color)';
   display: flex;
@@ -20,7 +20,7 @@
     background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
   }
 
-  .@{mod-sketch}-toolbar-position {
+  .@{mod-dashboard}-toolbar-position {
     position: absolute;
     bottom: 50px;
     left: 50%;
@@ -29,7 +29,7 @@
     transform: translateX(-50%);
   }
 
-  .@{mod-sketch}-header {
+  .@{mod-dashboard}-header {
     position: absolute;
     top: 0;
     left: 0;
@@ -37,29 +37,29 @@
     box-sizing: border-box;
     border-bottom: 1px solid;
     border-color: ~'var(--@{prefix}-border-color)';
-    // height: @mod-sketch-header-height;
+    // height: @mod-dashboard-header-height;
   }
 
-  .@{mod-sketch}-content {
+  .@{mod-dashboard}-content {
     position: absolute;
-    // top: @mod-sketch-header-height;
+    // top: @mod-dashboard-header-height;
     bottom: 0;
     left: 0;
     right: 0;
   }
-  .@{mod-sketch}-left {
+  .@{mod-dashboard}-left {
     border-right: 1px solid;
     border-color: ~'var(--@{prefix}-border-color)';
     height: 100%;
   }
 
-  .@{mod-sketch}-right {
+  .@{mod-dashboard}-right {
     border-left: 1px solid;
     border-color: ~'var(--@{prefix}-border-color)';
     height: 100%;
   }
 
-  .@{mod-sketch}-center {
+  .@{mod-dashboard}-center {
     display: block;
   }
 }
diff --git a/packages/design/src/index.tsx b/packages/design/src/index.tsx
index e24941e..474ba33 100644
--- a/packages/design/src/index.tsx
+++ b/packages/design/src/index.tsx
@@ -2,17 +2,17 @@ import React, { useEffect, useReducer } from 'react';
 import ConfigProvider from 'antd/es/config-provider';
 import theme from 'antd/es/theme';
 import classnames from 'classnames';
-import { Sketch } from './modules';
+import { Dashboard } from './modules';
 import { createPrefixName } from './css';
 import { Provider, createDesignContextState, createDesignReducer } from './context';
 import type { DesignData } from './types';
-import type { SketchProps } from './modules';
+import type { DashboardProps } from './modules';
 import './css/index.less';
 
 const themeName = 'theme';
 const themePrefixName = createPrefixName(themeName);
 
-export type DesignProps = SketchProps & {
+export type DesignProps = DashboardProps & {
   designData?: DesignData;
   locale?: string; // TODO
   themeMode?: 'light' | 'dark';
@@ -35,7 +35,7 @@ export const Design = (props: DesignProps) => {
   return (
     <Provider value={{ state, dispatch }}>
       <ConfigProvider theme={{ algorithm: state.themeMode === 'dark' ? theme.darkAlgorithm : theme.defaultAlgorithm }}>
-        <Sketch
+        <Dashboard
           width={width}
           height={height}
           style={style}
diff --git a/packages/design/src/modules/sketch/index.tsx b/packages/design/src/modules/dashboard/index.tsx
similarity index 97%
rename from packages/design/src/modules/sketch/index.tsx
rename to packages/design/src/modules/dashboard/index.tsx
index d8919c8..a5936e0 100644
--- a/packages/design/src/modules/sketch/index.tsx
+++ b/packages/design/src/modules/dashboard/index.tsx
@@ -11,20 +11,20 @@ import { createPrefixName } from '../../css';
 import { HEADER_HEIGHT } from './layout';
 import SplitPane from '../split-pane';
 
-const modName = 'mod-sketch';
+const modName = 'mod-dashboard';
 const leftSiderDefaultWidth = 240;
 const rightSiderDefaultWidth = 200;
 
 const prefixName = createPrefixName(modName);
 
-export interface SketchProps {
+export interface DashboardProps {
   className?: string;
   style?: CSSProperties;
   width: number;
   height: number;
 }
 
-export const Sketch = (props: SketchProps) => {
+export const Dashboard = (props: DashboardProps) => {
   const ref = useRef<HTMLDivElement>(null);
   const refCore = useRef<Core | null>(null);
   const { className, style, width, height } = props;
diff --git a/packages/design/src/modules/sketch/layout.ts b/packages/design/src/modules/dashboard/layout.ts
similarity index 100%
rename from packages/design/src/modules/sketch/layout.ts
rename to packages/design/src/modules/dashboard/layout.ts
diff --git a/packages/design/src/modules/index.tsx b/packages/design/src/modules/index.tsx
index 9cb07d1..5ae7903 100644
--- a/packages/design/src/modules/index.tsx
+++ b/packages/design/src/modules/index.tsx
@@ -1,5 +1,5 @@
 export { Toolbar } from './toolbar/index';
 export type { ToolbarProps } from './toolbar/index';
 
-export { Sketch } from './sketch/index';
-export type { SketchProps } from './sketch/index';
+export { Dashboard } from './dashboard/index';
+export type { DashboardProps } from './dashboard/index';
diff --git a/packages/design/src/types/data.ts b/packages/design/src/types/data.ts
index 529bb59..a223994 100644
--- a/packages/design/src/types/data.ts
+++ b/packages/design/src/types/data.ts
@@ -2,6 +2,8 @@ import type { Element, ElementType, ElementSize, ElementBaseDesc } from '@idraw/
 
 export type DesignItemType = 'component' | 'component-item' | 'module' | 'page';
 
+export type DesignDrawDataType = 'component' | 'module' | 'page';
+
 export type DesignComponentItem = Omit<ElementSize, 'angle'> & {
   uuid: string;
   type: 'component-item';