diff --git a/apps/playground/src/pages/index.tsx b/apps/playground/src/pages/index.tsx
index b0d3e2e..179c1ad 100644
--- a/apps/playground/src/pages/index.tsx
+++ b/apps/playground/src/pages/index.tsx
@@ -76,6 +76,7 @@ const workspace = new Workspace({
 const engine = createEngine({
   workspace,
   menuData,
+  defaultActiveView: 'design', // dual code design
 });
 
 // @ts-ignore
diff --git a/packages/core/src/factory.ts b/packages/core/src/factory.ts
index 10721a1..58b971c 100644
--- a/packages/core/src/factory.ts
+++ b/packages/core/src/factory.ts
@@ -1,5 +1,5 @@
 import { MenuDataType } from '@music163/tango-helpers';
-import { Designer, Engine, SimulatorNameType } from './models';
+import { Designer, DesignerViewType, Engine, SimulatorNameType } from './models';
 import { IWorkspace } from './models/interfaces';
 
 interface ICreateEngineOptions {
@@ -19,6 +19,10 @@ interface ICreateEngineOptions {
    * 默认激活的侧边栏
    */
   defaultActiveSidebarPanel?: string;
+  /**
+   * 默认激活的视图
+   */
+  defaultActiveView?: DesignerViewType;
 }
 
 /**
@@ -28,6 +32,7 @@ interface ICreateEngineOptions {
  */
 export function createEngine({
   workspace,
+  defaultActiveView = 'design',
   defaultSimulatorMode = 'desktop',
   defaultActiveSidebarPanel = '',
   menuData,
@@ -37,6 +42,7 @@ export function createEngine({
     designer: new Designer({
       workspace,
       simulator: defaultSimulatorMode,
+      activeView: defaultActiveView,
       activeSidebarPanel: defaultActiveSidebarPanel,
       menuData,
     }),
diff --git a/packages/core/src/helpers/prototype.ts b/packages/core/src/helpers/prototype.ts
index b59a52c..710f107 100644
--- a/packages/core/src/helpers/prototype.ts
+++ b/packages/core/src/helpers/prototype.ts
@@ -20,6 +20,7 @@ export function prototype2importDeclarationData(
   relativeFilepath?: string,
 ): { source: string; specifiers: IImportSpecifierData[] } {
   let source = prototype.package;
+  const isSnippet = prototype.type === 'snippet';
   if (relativeFilepath && isFilepath(source)) {
     source = getRelativePath(relativeFilepath, source);
   }
@@ -35,12 +36,15 @@ export function prototype2importDeclarationData(
       type: 'ImportDefaultSpecifier',
     });
   } else {
-    [prototype.name, ...(prototype.relatedImports || [])].forEach((item) => {
-      specifiers.push({
-        localName: item,
-        type: 'ImportSpecifier',
-      });
-    });
+    // 忽略代码片段 name
+    [...(isSnippet ? [] : [prototype.name]), ...(prototype.relatedImports || [])].forEach(
+      (item) => {
+        specifiers.push({
+          localName: item,
+          type: 'ImportSpecifier',
+        });
+      },
+    );
   }
 
   return {
diff --git a/packages/core/src/models/designer.ts b/packages/core/src/models/designer.ts
index d113a60..57bb7aa 100644
--- a/packages/core/src/models/designer.ts
+++ b/packages/core/src/models/designer.ts
@@ -25,6 +25,10 @@ interface IDesignerOptions {
    */
   menuData: MenuDataType;
   activeSidebarPanel?: string;
+  /**
+   * 默认激活的视图模式
+   */
+  activeView?: DesignerViewType;
 }
 
 const ISimulatorTypes: Record<string, ISimulatorType> = {
@@ -139,7 +143,12 @@ export class Designer {
   constructor(options: IDesignerOptions) {
     this.workspace = options.workspace;
 
-    const { simulator, menuData, activeSidebarPanel: defaultActiveSidebarPanel } = options;
+    const {
+      simulator,
+      menuData,
+      activeSidebarPanel: defaultActiveSidebarPanel,
+      activeView: defaultActiveView,
+    } = options;
 
     if (menuData) {
       this.setMenuData(menuData);
@@ -155,6 +164,11 @@ export class Designer {
       this.setActiveSidebarPanel(defaultActiveSidebarPanel);
     }
 
+    // 默认激活的视图
+    if (defaultActiveView) {
+      this.setActiveView(defaultActiveView);
+    }
+
     makeObservable(this, {
       _simulator: observable,
       _viewport: observable,
diff --git a/packages/core/src/models/history.ts b/packages/core/src/models/history.ts
index e0b1689..1576303 100644
--- a/packages/core/src/models/history.ts
+++ b/packages/core/src/models/history.ts
@@ -58,7 +58,7 @@ export class TangoHistory {
   }
 
   get couldBack() {
-    return this._records.length > 0 && this._index > -1;
+    return this._records.length > 0 && this._index > 0;
   }
 
   get couldForward() {
diff --git a/packages/designer/src/dnd/use-dnd.ts b/packages/designer/src/dnd/use-dnd.ts
index 3af90b0..0a7ee67 100644
--- a/packages/designer/src/dnd/use-dnd.ts
+++ b/packages/designer/src/dnd/use-dnd.ts
@@ -58,6 +58,12 @@ export function useDnd({
       'command+v,ctrl+v': () => {
         workspace.pasteSelectedNode();
       },
+      'command+z,ctrl+z': () => {
+        workspace.history.back();
+      },
+      'command+shift+z,ctrl+shift+z': () => {
+        workspace.history.forward();
+      },
     });
   }, [workspace]);
 
diff --git a/packages/designer/src/editor.tsx b/packages/designer/src/editor.tsx
index b208f54..084f951 100644
--- a/packages/designer/src/editor.tsx
+++ b/packages/designer/src/editor.tsx
@@ -1,7 +1,7 @@
 import React, { useRef, useEffect, useCallback } from 'react';
 import { Box } from 'coral-system';
 import { MultiEditor, MultiEditorProps } from '@music163/tango-ui';
-import { observer, useWorkspace } from '@music163/tango-context';
+import { observer, useDesigner, useWorkspace } from '@music163/tango-context';
 import { isValidCode } from '@music163/tango-core';
 import { Modal } from 'antd';
 
@@ -32,6 +32,7 @@ export const CodeEditor = observer(
   ({ autoRemoveUnusedImports = true, ...rest }: CodeEditorProps) => {
     const editorRef = useRef(null);
     const workspace = useWorkspace();
+    const designer = useDesigner();
     const files = workspace.listFiles();
     const activeFile = workspace.activeFile;
 
@@ -101,8 +102,15 @@ export const CodeEditor = observer(
       [workspace],
     );
 
+    const borderStyle =
+      designer.activeView === 'dual'
+        ? {
+            borderLeft: 'solid 1px var(--tango-colors-line2)',
+          }
+        : {};
+
     return (
-      <Box display="flex" flexDirection="row" height="100%" bg="white">
+      <Box display="flex" flexDirection="row" height="100%" bg="white" {...borderStyle}>
         <MultiEditor
           ref={editorRef}
           options={{
diff --git a/packages/setting-form/src/form-ui.tsx b/packages/setting-form/src/form-ui.tsx
index 71ad05d..f695d9b 100644
--- a/packages/setting-form/src/form-ui.tsx
+++ b/packages/setting-form/src/form-ui.tsx
@@ -257,6 +257,8 @@ export function FormHeader({ title, extra, subTitle }: FormHeaderProps) {
             mr="s"
             whiteSpace="nowrap"
             className="FormHeaderTitle"
+            textOverflow="ellipsis"
+            overflow="hidden"
           >
             {title}
           </Box>