fix: update state tree data

fix: check if prototype exists in selection tool
fix: update toggleButton arrow style
2026-09-01 04:19:05 +08:00 · 2024-06-26 16:48:52 +08:00 · 2024-06-25 17:45:34 +08:00 · 2024-06-21 19:40:19 +08:00 · 2024-06-20 15:45:08 +08:00 · 2024-06-20 15:42:49 +08:00
131 changed files with 7240 additions and 25522 deletions
@@ -31,23 +31,17 @@ You can view the detailed usage guide through the following links:
 - Out-of-the-box front-end low-code designer, providing flexible and easy-to-use designer React components
 - Developed using TypeScript, providing complete type definition files

-## 🎯 Milestone
+## 💡 Examples

-```mermaid
-gantt
-    dateFormat  YYYY-MM-DD
-    title       Tango 1.0 Milestones
-    excludes    weekends
-    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
+You can use tango to build lowcode builders, for example:

-    section Builder Release
-    1.0 Alpha  : m1, 2023-10-01, 2024-01-31
-    1.0 RC     : m2, 2024-02-01, 2024-04-30
-    1.0 Stable : m3, 2024-04-30, 2024-12-31
-```
-
-> [!NOTE]
-> Alpha versions will continue to optimize some implementation protocols and continuously integrate new features from the internal version of NetEase; RC versions will provide a stable parsing protocol and implementation; The 1.0 official version is planned to be released in Q2 2024. After the release of the 1.0 official version, we will continue to iterate on versions and gradually incorporate core capabilities such as process design, component library, and AIGC from the internal version.
+| Preview | Description             |
+|---------|-------------------------|
+| ![image](https://github.com/NetEase/tango/assets/6984035/56a71741-4536-4336-803a-d81d51128a76) | Internal App Builder    |
+| ![image](https://github.com/NetEase/tango/assets/6984035/7f817e59-f7aa-4476-bc29-ac3e33fadbf7) | Dashboard App Builder   |
+| ![image](https://github.com/NetEase/tango/assets/6984035/790d88e1-d716-4f99-868a-31dda25e9fb1) | Mobile App Builder      |
+| ![rn app](public/rn-builder.png) | ReactNative App Builder |
+| ![mail app](public/mail-builder.png) | Email Builder           |

 ## 🌐 Compatibility

@@ -26,28 +26,23 @@
 ## ✨ 特性

 - 经历网易云音乐内网生产环境的实际检验，可灵活集成应用于低代码平台，本地开发工具等
- 基于源码 AST 驱动，无私有 DSL 和协议
- 提供实时出码能力，支持源码进，源码出
- 开箱即用的前端低代码设计器，提供灵活易用的设计器 React 组件
- 使用 TypeScript 开发，提供完整的类型定义文件
+- 提供基于源码 AST 驱动的低代码引擎，无私有 DSL 和协议
+- 提供实时出码能力，支持源码进，源码出，适配多种源码开发场景
+- 提供开箱即用的前端低代码设计器，提供灵活易用的设计器 React 组件
+- 使用 TypeScript 开发，提供完整的类型定义文件和完善的文档支持

-## 🎯 里程碑
+## 💡 例子

-```mermaid
-gantt
-    dateFormat  YYYY-MM-DD
-    title       Tango 1.0 Milestones
-    excludes    weekends
-    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
+你可以使用 Tango 快速构建多种类型的基于源码的低代码搭建工具，例如：

-    section Builder Release
-    1.0 Alpha  : m1, 2023-10-01, 2024-01-31
-    1.0 RC     : m2, 2024-02-01, 2024-04-30
-    1.0 Stable : m3, 2024-04-30, 2024-12-31
-```
+| 预览图 | 说明             |
+|---------|-------------------------|
+| ![image](https://github.com/NetEase/tango/assets/6984035/56a71741-4536-4336-803a-d81d51128a76) | 中后台系统搭建    |
+| ![image](https://github.com/NetEase/tango/assets/6984035/7f817e59-f7aa-4476-bc29-ac3e33fadbf7) | 仪表盘应用搭建   |
+| ![image](https://github.com/NetEase/tango/assets/6984035/790d88e1-d716-4f99-868a-31dda25e9fb1) | H5活动页面搭建      |
+| ![rn app](public/rn-builder.png) | ReactNative 应用搭建 |
+| ![mail app](public/mail-builder.png) | 营销类邮件搭建           |

-> [!NOTE]
-> Alpha 版本会持续对一些实现协议进行优化，并持续融合网易内网版本中的新增特性；RC 版本将会提供基本稳定的解析协议和实现；1.0 正式版本计划在 2024 年Q2发布。1.0 正式版发布后我们将会持续进行版本迭代，并逐步融入内网版本中的流程设计、组件库、AIGC 等核心基础能力。

 ## 🌐 兼容环境

@@ -4,7 +4,7 @@
  "private": true,
  "author": "Wells <ww.sun@outlook.com>",
  "scripts": {
-    "dev": "HOST=local.netease.com PORT=8001 umi dev",
+    "dev": "cross-env HOST=local.netease.com PORT=8001 umi dev",
    "build": "umi build",
    "postinstall": "umi setup",
    "setup": "umi setup",
@@ -15,6 +15,6 @@
    "@music163/antd": "^0.2.4",
    "antd": "^4.24.2",
    "coral-system": "^1.0.5",
-    "umi": "^4.0.89"
+    "umi": "^4.2.3"
  }
 }
@@ -5,6 +5,7 @@ import { BranchesOutlined, MenuOutlined, QuestionCircleOutlined } from '@ant-des
 import { registerSetter } from '@music163/tango-designer';
 import type { IVariableTreeNode } from '@music163/tango-helpers';
 import { FooSetter } from '../components';
+import { ToggleButton } from '@music163/tango-ui';

 export * from './mock-files';

@@ -46,8 +47,17 @@ registerSetter({
 // 平台 Logo
 export function Logo() {
  return (
-    <Box width="50px" display="flex" alignItems="center" justifyContent="center" fontSize="20px">
-      <MenuOutlined />
+    <Box width="50px" display="flex" alignItems="center" justifyContent="center" fontSize="14px">
+      <ToggleButton
+        shape="text"
+        items={[
+          { label: '回到首页', key: 'home' },
+          { label: '文档', key: 'doc' },
+          { label: '设置', key: 'setting' },
+        ]}
+      >
+        <MenuOutlined />
+      </ToggleButton>
    </Box>
  );
 }
@@ -2,7 +2,7 @@ const packageJson = {
  name: 'demo',
  private: true,
  dependencies: {
-    '@music163/tango-mail': '0.1.1',
+    '@music163/tango-mail': '0.2.4',
    '@music163/tango-boot': '0.2.5',
    react: '17.0.2',
    'react-dom': '17.0.2',
@@ -44,7 +44,7 @@ const tangoConfigJson = {
    },
    '@music163/tango-mail': {
      description: 'TangoMail 基础物料',
-      version: '0.1.1',
+      version: '0.2.4',
      library: 'TangoMail',
      type: 'baseDependency',
      resources: ['https://unpkg.com/@music163/tango-mail@{{version}}/dist/index.js'],
@@ -116,7 +116,6 @@ const WelcomeEmail = () => (
        </Section>
        <Text style={paragraph}>
          Best,
-          <br />
          The Koala team
        </Text>
        <Hr style={hr} />
@@ -2,8 +2,8 @@ const packageJson = {
  name: 'demo',
  private: true,
  dependencies: {
-    '@music163/antd': '0.2.2',
-    '@music163/tango-boot': '0.2.5',
+    '@music163/antd': '0.2.5',
+    '@music163/tango-boot': '0.3.5',
    react: '17.0.2',
    'react-dom': '17.0.2',
    'prop-types': '15.7.2',
@@ -48,7 +48,7 @@ const tangoConfigJson = {
    },
    '@music163/tango-boot': {
      description: '云音乐低代码运行时框架',
-      version: '0.2.5',
+      version: '0.3.5',
      library: 'TangoBoot',
      type: 'baseDependency',
      resources: ['https://unpkg.com/@music163/tango-boot@{{version}}/dist/boot.js'],
@@ -56,11 +56,12 @@ const tangoConfigJson = {
    },
    '@music163/antd': {
      description: '云音乐低代码中后台应用基础物料',
-      version: '0.2.2',
+      version: '0.2.6',
      library: 'TangoAntd',
      type: 'baseDependency',
      resources: [
        'https://unpkg.com/@music163/antd@{{version}}/dist/index.js',
+        // 'http://localhost:9002/designer.js',
        'https://unpkg.com/antd@4.24.13/dist/antd.css',
      ],
      designerResources: [
@@ -85,6 +86,7 @@ export function registerComponentPrototype(proto) {

 const routesCode = `
 import Index from "./pages/list";
+import Detail from "./pages/detail";

 const routes = [
  {
@@ -92,6 +94,11 @@ const routes = [
    exact: true,
    component: Index
  },
+  {
+    path: '/detail',
+    exact: true,
+    component: Detail
+  },
 ];

 export default routes;
@@ -150,20 +157,33 @@ import {
  Input,
  FormilyForm,
  FormilyFormItem,
+  Table,
 } from "@music163/antd";
 import { Space } from "@music163/antd";
 import { LocalButton } from "../components";
+import { OutButton } from "../components";
+
 class App extends React.Component {
  render() {
    return (
-      <Page title={tango.stores.app.title}>
+      <Page title={tango.stores.app.title} subTitle={111}>
+        <Section tid="section0" />
        <Section tid="section1" title="Section Title">
          your input: <Input tid="input1" defaultValue="hello" />
          copy input: <Input value={tango.page.input1?.value} />
+          <Table
+          columns={[
+            { title: "姓名", dataIndex: "name", key: "name" },
+            { title: "年龄", dataIndex: "age", key: "age" },
+            { title: "住址", dataIndex: "address", key: "address" },
+          ]}
+          tid="table1"
+        />
        </Section>
        <Section tid="section2">
          <Space tid="space1">
            <LocalButton />
+            <OutButton />
            <Button tid="button1">button</Button>
          </Space>
        </Section>
@@ -174,6 +194,9 @@ class App extends React.Component {
          </FormilyForm>
        </Section>
        <Section title="原生 DOM" tid="section4">
+          <h1 style={{ ...{ color: "red" }, fontSize: 64 }}>
+            hello world
+          </h1>
          <div
            style={{
              border: "1px solid #ccc",
@@ -234,6 +257,23 @@ class App extends React.Component {
 export default definePage(App);
 `;

+export const emptyPageCode = `
+import React from "react";
+import { definePage } from "@music163/tango-boot";
+import {
+  Page,
+  Section,
+} from "@music163/antd";
+
+function App() {
+  return (<Page title="Detail Page">
+    <Section></Section>
+  </Page>)
+}
+
+export default definePage(App);
+`;
+
 const componentsButtonCode = `
 import React from 'react';
 import { registerComponentPrototype } from '../utils';
@@ -253,6 +293,14 @@ registerComponentPrototype({
 });
 `;

+const outButtonCode = `
+import React from 'react';
+
+export default function OutButton(props) {
+  return <button {...props}>Out button (from other file)</button>
+}
+`;
+
 const componentsInputCode = `
 import React from 'react';
 import { registerComponentPrototype } from '../utils';
@@ -275,6 +323,7 @@ registerComponentPrototype({
 const componentsEntryCode = `
 export { default as LocalButton } from './button';
 export { default as LocalInput } from './input';
+export { default as OutButton } from './out-button';
 `;

 const storeApp = `
@@ -373,7 +422,9 @@ export const sampleFiles = [
  { filename: '/src/style.css', code: cssCode },
  { filename: '/src/index.js', code: entryCode },
  { filename: '/src/pages/list.js', code: viewHomeCode },
+  { filename: '/src/pages/detail.js', code: emptyPageCode },
  { filename: '/src/components/button.js', code: componentsButtonCode },
+  { filename: '/src/components/out-button.js', code: outButtonCode },
  { filename: '/src/components/input.js', code: componentsInputCode },
  { filename: '/src/components/index.js', code: componentsEntryCode },
  { filename: '/src/routes.js', code: routesCode },
@@ -45,14 +45,18 @@ const Snippet2ColumnLayout: IComponentPrototype = {
 const Snippet3ColumnLayout: IComponentPrototype = {
  name: 'Snippet3ColumnLayout',
  title: '三列布局',
-  icon: 'icon-column3',
+  icon: 'icon-column-3',
  type: 'snippet',
  package: '@music163/antd',
+  // FIXME: Column 组件 需要更新为 defineComponent
  initChildren: `
  <Columns columns={12}>
-    <Column colSpan={4}></Column>
-    <Column colSpan={4}></Column>
-    <Column colSpan={4}></Column>
+    <Column colSpan={4}>
+    </Column>
+    <Column colSpan={4}>
+    </Column>
+    <Column colSpan={4}>
+  </Column>
  </Columns>
  `,
  relatedImports: ['Columns', 'Column'],
@@ -76,13 +80,9 @@ const SnippetButtonGroup: IComponentPrototype = {
 // hack some prototypes
 basePrototypes['Section'].siblingNames = [
  'SnippetButtonGroup',
-  'Section',
-  'Section',
-  'Section',
-  'Section',
-  'Section',
-  'Section',
-  'Section',
+  'Snippet2ColumnLayout',
+  'Snippet3ColumnLayout',
+  'SnippetSuccessResult',
 ];

 export const nativeDomPrototypes = () => {
@@ -174,6 +174,30 @@ const prototypes: Dict<IComponentPrototype> = {
    package: '@music163/antd',
    hasChildren: true,
    siblingNames: ['Box'],
+    props: [
+      {
+        name: 'aaa',
+        title: 'aaa',
+        setter: 'textSetter',
+      },
+      {
+        name: 'bbb',
+        title: 'bbb',
+        setter: 'textSetter',
+        deprecated: true,
+      },
+      {
+        name: 'ccc',
+        title: 'ccc',
+        setter: 'textSetter',
+        deprecated: true,
+      },
+      {
+        name: 'd',
+        title: 'd',
+        setter: 'textSetter',
+      },
+    ],
  },
  Columns: {
    name: 'Columns',
@@ -1,11 +1,7 @@
-import React, { StrictMode } from 'react';
+import React from 'react';
 import { Outlet } from 'umi';
 import './index.less';

 export default function Layout() {
-  return (
-    <StrictMode>
-      <Outlet />
-    </StrictMode>
-  );
+  return <Outlet />;
 }
@@ -1,5 +1,5 @@
 import { Box } from 'coral-system';
-import { Button, Space } from 'antd';
+import { Button, Form, Input, Modal, Space } from 'antd';
 import {
  Designer,
  DesignerPanel,
@@ -15,43 +15,17 @@ import {
 } from '@music163/tango-designer';
 import { createEngine, Workspace } from '@music163/tango-core';
 import prototypes from '../helpers/prototypes';
-import { Logo, ProjectDetail, bootHelperVariables, sampleFiles } from '../helpers';
+import { Logo, ProjectDetail, bootHelperVariables, emptyPageCode, sampleFiles } from '../helpers';
 import {
  ApiOutlined,
  AppstoreAddOutlined,
  BuildOutlined,
-  ClusterOutlined,
  FunctionOutlined,
+  PlusOutlined,
  createFromIconfontCN,
 } from '@ant-design/icons';
-
-// 1. 实例化工作区
-const workspace = new Workspace({
-  entry: '/src/index.js',
-  files: sampleFiles,
-  prototypes,
-});
-
-// inject workspace to window for debug
-(window as any).__workspace__ = workspace;
-
-// 2. 引擎初始化
-const engine = createEngine({
-  workspace,
-});
-
-// @ts-ignore
-window.__workspace__ = workspace;
-
-// 3. 沙箱初始化
-const sandboxQuery = new DndQuery({
-  context: 'iframe',
-});
-
-// 4. 图标库初始化（物料面板和组件树使用了 iconfont 里的图标）
-createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/c/font_2891794_6d4hj5u0bjx.js',
-});
+import { Action, PackageOutlined } from '@music163/tango-ui';
+import { useState } from 'react';

 const menuData = {
  common: [
@@ -63,6 +37,7 @@ const menuData = {
        'Columns',
        'Column',
        'Box',
+        'Text',
        'Space',
        'Typography',
        'Title',
@@ -79,13 +54,49 @@ const menuData = {
      title: 'Formily表单',
      items: ['FormilyForm', 'FormilyFormItem', 'FormilySubmit', 'FormilyReset'],
    },
+    {
+      title: '数据展示',
+      items: ['Comment'],
+    },
  ],
 };

+// 1. 实例化工作区
+const workspace = new Workspace({
+  entry: '/src/index.js',
+  files: sampleFiles,
+  prototypes,
+});
+
+// inject workspace to window for debug
+(window as any).__workspace__ = workspace;
+
+// 2. 引擎初始化
+const engine = createEngine({
+  workspace,
+  menuData,
+  defaultActiveView: 'design', // dual code design
+});
+
+// @ts-ignore
+window.__workspace__ = workspace;
+
+// 3. 沙箱初始化
+const sandboxQuery = new DndQuery({
+  context: 'iframe',
+});
+
+// 4. 图标库初始化（物料面板和组件树使用了 iconfont 里的图标）
+createFromIconfontCN({
+  scriptUrl: '//at.alicdn.com/t/c/font_2891794_151xsllxqd7.js',
+});
+
 /**
 * 5. 平台初始化，访问 https://local.netease.com:6006/
 */
 export default function App() {
+  const [showNewPageModal, setShowNewPageModal] = useState(false);
+  const [form] = Form.useForm();
  return (
    <Designer
      theme={themeLight}
@@ -103,6 +114,14 @@ export default function App() {
          <Box px="l">
            <Toolbar>
              <Toolbar.Item key="routeSwitch" placement="left" />
+              <Toolbar.Item key="addPage" placement="left">
+                <Action
+                  tooltip="添加页面"
+                  shape="outline"
+                  icon={<PlusOutlined />}
+                  onClick={() => setShowNewPageModal(true)}
+                />
+              </Toolbar.Item>
              <Toolbar.Item key="history" placement="left" />
              <Toolbar.Item key="preview" placement="left" />
              <Toolbar.Item key="modeSwitch" placement="right" />
@@ -114,6 +133,30 @@ export default function App() {
                </Space>
              </Toolbar.Item>
            </Toolbar>
+            <Modal
+              title="添加新页面"
+              open={showNewPageModal}
+              onCancel={() => setShowNewPageModal(false)}
+              footer={null}
+            >
+              <Form
+                form={form}
+                onFinish={(values) => {
+                  workspace.addViewFile(values.name, emptyPageCode);
+                  setShowNewPageModal(false);
+                }}
+                layout="vertical"
+              >
+                <Form.Item label="文件名" name="name" required rules={[{ required: true }]}>
+                  <Input placeholder="请输入文件名" />
+                </Form.Item>
+                <Form.Item>
+                  <Button type="primary" htmlType="submit">
+                    提交
+                  </Button>
+                </Form.Item>
+              </Form>
+            </Modal>
          </Box>
        }
      >
@@ -138,7 +181,7 @@ export default function App() {
          <Sidebar.Item
            key="dependency"
            label="依赖"
-            icon={<ClusterOutlined />}
+            icon={<PackageOutlined />}
            isFloat
            width={800}
          />
@@ -45,7 +45,7 @@ const sandboxQuery = new DndQuery({

 // 4. 图标库初始化（物料面板和组件树使用了 iconfont 里的图标）
 createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/c/font_2891794_cou9i7556tl.js',
+  scriptUrl: '//at.alicdn.com/t/c/font_2891794_151xsllxqd7.js',
 });

 /**
@@ -112,6 +112,7 @@ export default function App() {
                  if (sandboxWindow.TangoMail) {
                    if (sandboxWindow.TangoMail.menuData) {
                      setMenuData(sandboxWindow.TangoMail.menuData);
+                      engine.designer.setMenuData(sandboxWindow.TangoMail.menuData);
                    }
                    if (sandboxWindow.TangoMail.prototypes) {
                      workspace.setComponentPrototypes(sandboxWindow.TangoMail.prototypes);
@@ -16,8 +16,8 @@
  "dependencies": {
    "@music163/tango-setting-form": "*",
    "@music163/tango-ui": "*",
-    "mobx": "6.12.0",
-    "mobx-react-lite": "4.0.5"
+    "mobx": "6.12.3",
+    "mobx-react-lite": "4.0.7"
  },
  "devDependencies": {
    "@ant-design/icons": "^4.8.0",
@@ -1,9 +1,7 @@
 import React from 'react';
 import { FormModel, SettingForm, register } from '@music163/tango-setting-form';
 import { IComponentPrototype } from '@music163/tango-helpers';
-import { BorderSetter, DisplaySetter } from '@music163/tango-designer/src/setters/style-setter';
-import { JsxSetter } from '@music163/tango-designer/src/setters/jsx-setter';
-import { RenderSetter, TableCellSetter } from '@music163/tango-designer/src/setters/render-setter';
+import { BUILT_IN_SETTERS } from '@music163/tango-designer/src/setters';
 import { Box } from 'coral-system';
 import { JsonView } from '@music163/tango-ui';
 import { toJS } from 'mobx';
@@ -11,272 +9,18 @@ import { observer } from 'mobx-react-lite';
 import { Card } from 'antd';
 import { createFromIconfontCN } from '@ant-design/icons';

-// 这里按需注入，因为部分 setter 依赖 Designer 的上下文
-register({
-  name: 'borderSetter',
-  component: BorderSetter,
-});
+const BLACK_LIST = ['codeSetter', 'eventSetter', 'modelSetter', 'routerSetter'];

-register({
-  name: 'displaySetter',
-  component: DisplaySetter,
-});
-
-register({
-  name: 'jsxSetter',
-  component: JsxSetter,
-});
-
-register({
-  name: 'renderSetter',
-  component: RenderSetter,
-});
-
-register({
-  name: 'tableCellSetter',
-  component: TableCellSetter,
-});
+BUILT_IN_SETTERS.filter((setter) => !BLACK_LIST.includes(setter.name)).forEach(register);

 createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/c/font_2891794_cou9i7556tl.js',
+  scriptUrl: '//at.alicdn.com/t/c/font_2891794_151xsllxqd7.js',
 });

 export default {
  title: 'SettingForm',
 };

-const prototype: IComponentPrototype = {
-  name: 'Test',
-  exportType: 'namedExport',
-  title: '测试',
-  icon: 'icon-test',
-  type: 'element',
-  category: 'basic',
-  package: '@music163/antd',
-  hasChildren: false,
-  props: [
-    {
-      name: 'text',
-      title: 'textSetter',
-      setter: 'textSetter',
-      tip: '这是一个文本属性',
-      docs: 'https://music-one.fn.netease.com/docs/button',
-      deprecated: '使用 text2 替代',
-    },
-    {
-      name: 'display',
-      title: 'displaySetter',
-      setter: 'displaySetter',
-    },
-    {
-      name: 'border',
-      title: 'borderSetter',
-      setter: 'borderSetter',
-    },
-    {
-      name: 'onClick',
-      title: 'eventSetter',
-      tip: '当点击按钮时',
-      setter: 'eventSetter',
-      group: 'event',
-    },
-    {
-      name: 'children',
-      title: 'jsxSetter',
-      setter: 'jsxSetter',
-    },
-    {
-      name: 'render',
-      title: 'renderSetter',
-      setter: 'renderSetter',
-    },
-    {
-      name: 'cell',
-      title: 'tableCellSetter',
-      setter: 'tableCellSetter',
-    },
-    {
-      name: 'router',
-      title: 'routerSetter',
-      setter: 'routerSetter',
-    },
-    {
-      name: 'object',
-      title: '对象属性',
-      tip: '一个嵌套的对象',
-      props: [
-        {
-          name: 'name',
-          title: 'Name',
-          setter: 'textSetter',
-        },
-        {
-          name: 'age',
-          title: 'Age',
-          setter: 'numberSetter',
-        },
-        {
-          name: 'address',
-          title: 'Address',
-          props: [
-            {
-              name: 'city',
-              title: 'City',
-              setter: 'textSetter',
-            },
-          ],
-        },
-      ],
-      getVisible: (form) => {
-        return form.getValue('text') !== 'test';
-      },
-    },
-    {
-      name: 'expression',
-      title: 'expressionSetter',
-      setter: 'expressionSetter',
-    },
-    {
-      name: 'model',
-      title: 'modelSetter',
-      setter: 'modelSetter',
-    },
-    {
-      name: 'image',
-      title: 'imageSetter',
-      setter: 'imageSetter',
-    },
-    {
-      name: 'css',
-      title: 'cssSetter',
-      setter: 'cssSetter',
-    },
-    {
-      name: 'extra',
-      title: 'jsxSetter',
-      setter: 'jsxSetter',
-    },
-    {
-      name: 'icon',
-      title: 'iconSetter',
-      setter: 'iconSetter',
-    },
-    {
-      name: 'iconType',
-      title: 'iconTypeSetter',
-      setter: 'iconTypeSetter',
-    },
-
-    {
-      name: 'onClick2',
-      title: 'actionSetter',
-      tip: '当点击按钮时',
-      setter: 'actionSetter',
-      group: 'event',
-    },
-    {
-      name: 'disabled',
-      title: 'boolSetter',
-      tip: 'disabled 是否禁用',
-      defaultValue: false,
-      setter: 'boolSetter',
-    },
-    {
-      name: 'size',
-      title: 'choiceSetter',
-      tip: 'size 按钮的尺寸',
-      defaultValue: 'medium',
-      setter: 'choiceSetter',
-      setterProps: {
-        options: [
-          { label: '小', value: 'small' },
-          { label: '中', value: 'medium' },
-          { label: '大', value: 'large' },
-        ],
-      },
-    },
-    {
-      name: 'color',
-      title: 'colorSetter',
-      setter: 'colorSetter',
-    },
-    {
-      name: 'columns',
-      title: 'columnSetter',
-      setter: 'columnSetter',
-    },
-    {
-      name: 'date',
-      title: 'dateSetter',
-      setter: 'dateSetter',
-    },
-    {
-      name: 'dateRange',
-      title: 'dateRangeSetter',
-      setter: 'dateRangeSetter',
-    },
-    {
-      name: 'enum',
-      title: 'enumSetter',
-      setter: 'enumSetter',
-      setterProps: {},
-    },
-    {
-      name: 'time',
-      title: 'timeSetter',
-      setter: 'timeSetter',
-    },
-    {
-      name: 'timeRange',
-      title: 'timeRangeSetter',
-      setter: 'timeRangeSetter',
-    },
-    {
-      name: 'dataSource',
-      title: 'jsonSetter 不推荐',
-      setter: 'jsonSetter',
-    },
-    {
-      name: 'listSetter',
-      title: 'listSetter',
-      setter: 'listSetter',
-    },
-    {
-      name: 'count',
-      title: 'numberSetter',
-      setter: 'numberSetter',
-    },
-    {
-      name: 'options',
-      title: 'optionSetter',
-      setter: 'optionSetter',
-    },
-    {
-      name: 'type',
-      title: 'pickerSetter',
-      defaultValue: 'solid',
-      setter: 'pickerSetter',
-      setterProps: {
-        options: [
-          { label: '文本型', value: 'text' },
-          { label: '实体型', value: 'solid' },
-          { label: '幽灵', value: 'ghost' },
-        ],
-      },
-    },
-    {
-      name: 'title',
-      title: 'textSetter',
-      setter: 'textSetter',
-    },
-    {
-      name: 'invalid',
-      title: 'invalidSetter',
-      setter: 'invalidSetter',
-    },
-  ],
-};
-
 /**
 * 表单值预览
 */
@@ -285,28 +29,22 @@ const FormValuePreview = observer(({ model }: { model: FormModel }) => {
  return <JsonView src={data} />;
 });

-export function Basic() {
-  const model = new FormModel(
-    {
-      router: 'www.163.com',
-      expression: `{ foo: 'foo' }`,
-      object: {
-        name: 'Alice',
-      },
-      image:
-        'https://p6.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/13270238619/2cc5/0782/1d6e/009b96bf90c557b9bbde09b1687a2c80.png',
-    },
-    { onChange: console.log },
-  );
+interface SettingFormDemoProps {
+  initValues?: object;
+  prototype?: IComponentPrototype;
+}

+function SettingFormDemo({ initValues, prototype }: SettingFormDemoProps) {
+  const model = new FormModel(initValues, { onChange: console.log });
  return (
    <Box display="flex">
-      <Box flex="0 0 400px" overflow="hidden">
+      <Box flex="0 0 320px" overflow="hidden">
        <SettingForm
          model={model}
          prototype={prototype}
          showIdentifier={{
            identifierKey: 'tid',
+            getIdentifier: () => `time${Date.now()}`,
          }}
        />
      </Box>
@@ -319,25 +57,493 @@ export function Basic() {
  );
 }

+const prototypeHasBasicProps: IComponentPrototype = {
+  name: 'Sample',
+  title: '演示组件',
+  package: 'sample-pkg',
+  type: 'element',
+  docs: 'https://4x-ant-design.antgroup.com/components/slider-cn',
+  props: [
+    {
+      name: 'code',
+      title: 'codeSetter',
+      setter: 'codeSetter',
+    },
+    {
+      name: 'text',
+      title: 'textSetter',
+      setter: 'textSetter',
+    },
+    {
+      name: 'text2',
+      title: 'textAreaSetter',
+      setter: 'textAreaSetter',
+    },
+    {
+      name: 'src',
+      title: 'imageSetter',
+      setter: 'imageSetter',
+    },
+    {
+      name: 'number',
+      title: 'numberSetter',
+      setter: 'numberSetter',
+    },
+    {
+      name: 'number2',
+      title: 'sliderSetter',
+      setter: 'sliderSetter',
+    },
+    {
+      name: 'bool',
+      title: 'boolSetter',
+      setter: 'boolSetter',
+    },
+    {
+      name: 'enum',
+      title: 'enumSetter',
+      setter: 'enumSetter',
+    },
+    {
+      name: 'list',
+      title: 'listSetter',
+      setter: 'listSetter',
+    },
+  ],
+};
+
+export function Basic() {
+  return (
+    <SettingFormDemo
+      initValues={{
+        bool: true,
+        enum: {
+          aaa: 'aaa',
+          bbb: 'bbb',
+          ccc: 'ccc',
+        },
+        list: [{ key: 1 }, { key: 2 }],
+      }}
+      prototype={prototypeHasBasicProps}
+    />
+  );
+}
+
+export function DeprecatedProp() {
+  return (
+    <SettingFormDemo
+      prototype={{
+        name: 'Deprecated',
+        package: 'sample-pkg',
+        type: 'element',
+        props: [
+          {
+            name: 'number',
+            title: 'numberSetter',
+            setter: 'numberSetter',
+            tip: '这是一个文本属性',
+            docs: 'https://4x-ant-design.antgroup.com/components/slider-cn',
+            deprecated: '使用 text2 替代',
+          },
+          {
+            name: 'number1',
+            title: 'sliderSetter',
+            setter: 'sliderSetter',
+          },
+        ],
+      }}
+    />
+  );
+}
+
+export function Validate() {
+  return (
+    <SettingFormDemo
+      prototype={{
+        name: 'Validate',
+        package: 'sample-pkg',
+        type: 'element',
+        props: [
+          {
+            name: 'number',
+            title: 'numberSetter',
+            setter: 'numberSetter',
+            validate: (value) => {
+              if (!value && value !== 0) {
+                return '必填';
+              }
+              if (value < 0) {
+                return '必须大于 0';
+              }
+              if (value > 10) {
+                return '必须小于等于 10';
+              }
+            },
+          },
+        ],
+      }}
+    />
+  );
+}
+
+export function ObjectSetter() {
+  return (
+    <SettingFormDemo
+      prototype={{
+        name: 'Object',
+        package: 'sample-pkg',
+        type: 'element',
+        props: [
+          {
+            name: 'text',
+            title: 'textSetter',
+            setter: 'textSetter',
+          },
+          {
+            name: 'object',
+            title: 'objectSetter',
+            setter: 'objectSetter',
+            props: [
+              {
+                name: 'text',
+                title: 'textSetter',
+                setter: 'textSetter',
+              },
+              {
+                name: 'number',
+                title: 'numberSetter',
+                setter: 'numberSetter',
+              },
+            ],
+          },
+        ],
+      }}
+    />
+  );
+}
+
+export function InitValues() {
+  return (
+    <SettingFormDemo
+      initValues={{
+        bool: true,
+        bool1: '{{true}}',
+        style: {
+          background: 'red',
+        },
+        object: {
+          text: 'text',
+          number: 10,
+        },
+        object1: {
+          text: 'text',
+          number: '{{tango.stores.user?.age}}',
+        },
+        // 只会有一种情况传下来的是字符串，就是用户代码里存在 rest operator，这时候不需要额外处理，提示用户就使用代码模式
+        object2: '{{{ text: "text22", number: 22, ...{ extra: "some" } }}}',
+        list: [{ key: 'aaa' }, { key: 'bbb' }], // list object
+        list1: "{{[{ key: 'aaa' }, { key: 'bbb' }]}}", // raw code
+      }}
+      prototype={{
+        name: 'InitValues',
+        package: 'sample-pkg',
+        type: 'element',
+        props: [
+          {
+            name: 'bool',
+            title: 'value初始化',
+            setter: 'boolSetter',
+          },
+          {
+            name: 'bool1',
+            title: 'value初始化',
+            setter: 'boolSetter',
+          },
+          {
+            name: 'bool2',
+            title: '无初值',
+            setter: 'boolSetter',
+          },
+          {
+            name: 'style',
+            title: 'codeSetter',
+            setter: 'codeSetter',
+          },
+          {
+            name: 'object',
+            props: [
+              {
+                name: 'text',
+                title: 'text',
+                setter: 'textSetter',
+              },
+              {
+                name: 'number',
+                title: 'number',
+                setter: 'numberSetter',
+              },
+            ],
+          },
+          {
+            name: 'object1',
+            props: [
+              {
+                name: 'text',
+                title: 'text',
+                setter: 'textSetter',
+              },
+              {
+                name: 'number',
+                title: 'number',
+                setter: 'numberSetter',
+              },
+            ],
+          },
+          {
+            name: 'object2',
+            props: [
+              {
+                name: 'text',
+                title: 'text',
+                setter: 'textSetter',
+              },
+              {
+                name: 'number',
+                title: 'number',
+                setter: 'numberSetter',
+              },
+            ],
+          },
+          {
+            name: 'list',
+            title: 'listSetter',
+            setter: 'listSetter',
+          },
+          {
+            name: 'list1',
+            title: 'listSetter',
+            setter: 'listSetter',
+          },
+        ],
+      }}
+    />
+  );
+}
+
 export function Lite() {
  return (
-    <Box width={320} border="solid">
+    <Box width={320} border="solid" borderColor="line2">
      <SettingForm
        showSearch={false}
        showGroups={false}
        showItemSubtitle={false}
-        prototype={prototype}
+        prototype={prototypeHasBasicProps}
        disableSwitchExpressionSetter
      />
    </Box>
  );
 }

-export function NoExpressionSwitch() {
+export function HideToggleCode() {
  const model = new FormModel({});
  return (
-    <Box>
-      <SettingForm model={model} prototype={prototype} disableSwitchExpressionSetter />
+    <Box width={320} border="solid" borderColor="line2">
+      <SettingForm model={model} prototype={prototypeHasBasicProps} disableSwitchExpressionSetter />
    </Box>
  );
 }
+
+const prototypeHasExtraProps: IComponentPrototype = {
+  name: 'ExtraProps',
+  type: 'element',
+  package: '@music163/antd',
+  props: [
+    {
+      name: 'choice',
+      title: 'choiceSetter',
+      setter: 'choiceSetter',
+      options: [
+        { label: '选项1', value: '1' },
+        { label: '选项2', value: '2' },
+        { label: '选项3', value: '3' },
+      ],
+    },
+    {
+      name: 'picker',
+      title: 'pickerSetter',
+      setter: 'pickerSetter',
+      options: [
+        { label: '选项1', value: '1' },
+        { label: '选项2', value: '2' },
+        { label: '选项3', value: '3' },
+      ],
+    },
+    {
+      name: 'actionList',
+      title: 'actionListSetter',
+      setter: 'actionListSetter',
+    },
+    {
+      name: 'list',
+      title: 'listSetter',
+      setter: 'listSetter',
+    },
+    {
+      name: 'options',
+      title: 'optionSetter',
+      setter: 'optionSetter',
+    },
+    {
+      name: 'columns',
+      title: 'tableColumnsSetter',
+      setter: 'tableColumnsSetter',
+    },
+    {
+      name: 'css',
+      title: 'cssSetter',
+      setter: 'cssSetter',
+    },
+    {
+      name: 'date',
+      title: 'dateSetter',
+      setter: 'dateSetter',
+    },
+    {
+      name: 'dateRange',
+      title: 'dateRangeSetter',
+      setter: 'dateRangeSetter',
+    },
+    {
+      name: 'time',
+      title: 'timeSetter',
+      setter: 'timeSetter',
+    },
+    {
+      name: 'time',
+      title: 'timeRangeSetter',
+      setter: 'timeRangeSetter',
+    },
+    {
+      name: 'enum',
+      title: 'enumSetter',
+      setter: 'enumSetter',
+    },
+    {
+      name: 'event',
+      title: 'eventSetter',
+      setter: 'eventSetter',
+    },
+    {
+      name: 'json',
+      title: 'jsonSetter',
+      setter: 'jsonSetter',
+    },
+    {
+      name: 'jsx',
+      title: 'jsxSetter',
+      setter: 'jsxSetter',
+    },
+    {
+      name: 'render',
+      title: 'renderPropsSetter',
+      setter: 'renderPropsSetter',
+    },
+    {
+      name: 'cell',
+      title: 'tableCellSetter',
+      setter: 'tableCellSetter',
+    },
+    {
+      name: 'expandable',
+      title: 'tableExpandableSetter',
+      setter: 'tableExpandableSetter',
+    },
+    {
+      name: 'router',
+      title: 'routerSetter',
+      setter: 'routerSetter',
+    },
+  ],
+};
+
+export function ExtraSetters() {
+  return (
+    <SettingFormDemo
+      initValues={{
+        router: 'www.163.com',
+        expression: `{ foo: 'foo' }`,
+        object: {
+          name: 'Alice',
+        },
+        image:
+          'https://p6.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/13270238619/2cc5/0782/1d6e/009b96bf90c557b9bbde09b1687a2c80.png',
+      }}
+      prototype={prototypeHasExtraProps}
+    />
+  );
+}
+
+export function StyleProps() {
+  return (
+    <SettingFormDemo
+      prototype={{
+        name: 'Box',
+        title: 'Box',
+        type: 'element',
+        package: '@music163/antd',
+        props: [
+          {
+            name: 'style',
+            title: 'styleSetter',
+            setter: 'styleSetter',
+          },
+          {
+            name: 'display',
+            title: 'displaySetter',
+            setter: 'displaySetter',
+          },
+          {
+            name: 'flexDirection',
+            title: 'flexDirectionSetter',
+            setter: 'flexDirectionSetter',
+          },
+          {
+            name: 'flexGap',
+            title: 'flexGapSetter',
+            setter: 'flexGapSetter',
+          },
+          {
+            name: 'flexJustifyContent',
+            title: 'flexJustifyContentSetter',
+            setter: 'flexJustifyContentSetter',
+          },
+          {
+            name: 'flexAlignItems',
+            title: 'flexAlignItemsSetter',
+            setter: 'flexAlignItemsSetter',
+          },
+          {
+            name: 'spacing',
+            title: 'spacingSetter',
+            setter: 'spacingSetter',
+          },
+          {
+            name: 'color',
+            title: 'colorSetter',
+            setter: 'colorSetter',
+          },
+          {
+            name: 'bg',
+            title: 'bgSetter',
+            setter: 'bgSetter',
+          },
+          {
+            name: 'border',
+            title: 'borderSetter',
+            setter: 'borderSetter',
+          },
+        ],
+      }}
+    />
+  );
+}
@@ -0,0 +1,82 @@
+import React from 'react';
+import { DragPanel } from '@music163/tango-ui';
+import { Box, Text } from 'coral-system';
+import { Button } from 'antd';
+
+export default {
+  title: 'UI/DragPanel',
+};
+
+export function Basic() {
+  return (
+    <>
+      <DragPanel
+        title="弹层标题"
+        extra="右上角内容"
+        width={350}
+        body={<Box p="m">内容</Box>}
+        footer={<Text>底部信息</Text>}
+      >
+        <Button>点击唤起浮层</Button>
+      </DragPanel>
+      <DragPanel
+        title="弹层标题"
+        extra="右上角内容"
+        width={350}
+        body={<Box p="m">内容</Box>}
+        footer={<Text>底部信息</Text>}
+      >
+        <Button
+          style={{
+            position: 'absolute',
+            bottom: 20,
+            right: 20,
+          }}
+        >
+          底部浮层自动修正弹出区域
+        </Button>
+      </DragPanel>
+    </>
+  );
+}
+
+export function FooterCustom() {
+  return (
+    <DragPanel
+      title="弹层标题"
+      extra="右上角内容"
+      width={350}
+      body={<Box p="m">内容</Box>}
+      footer={(close) => (
+        <Box display="flex" justifyContent="space-between">
+          <Text>底部信息</Text>
+          <Button size="small" onClick={() => close()}>
+            点此关闭
+          </Button>
+        </Box>
+      )}
+    >
+      <Button>点击唤起浮层</Button>
+    </DragPanel>
+  );
+}
+
+export function ResizeablePanel() {
+  return (
+    <DragPanel
+      title="弹层标题"
+      resizeable
+      extra="右上角内容"
+      width={350}
+      height={400}
+      body={
+        <Box p="m" textAlign="center" background="#fa8484">
+          内容
+        </Box>
+      }
+      footer={<Text>底部信息</Text>}
+    >
+      <Button>点击唤起浮层</Button>
+    </DragPanel>
+  );
+}
@@ -40,6 +40,7 @@
    "@typescript-eslint/parser": "^6.13.2",
    "conventional-changelog-cli": "^4.1.0",
    "copyfiles": "^2.4.1",
+    "cross-env": "^7.0.3",
    "eslint": "^8.55.0",
    "eslint-config-ali": "^14.0.2",
    "eslint-config-prettier": "^9.1.0",
@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [1.1.4](https://github.com/netease/tango/compare/@music163/tango-context@1.1.3...@music163/tango-context@1.1.4) (2024-06-20)
+
+**Note:** Version bump only for package @music163/tango-context
+
+## [1.1.3](https://github.com/netease/tango/compare/@music163/tango-context@1.1.2...@music163/tango-context@1.1.3) (2024-06-05)
+
+**Note:** Version bump only for package @music163/tango-context
+
+## [1.1.2](https://github.com/netease/tango/compare/@music163/tango-context@1.1.1...@music163/tango-context@1.1.2) (2024-06-03)
+
+**Note:** Version bump only for package @music163/tango-context
+
+## [1.1.1](https://github.com/netease/tango/compare/@music163/tango-context@1.1.0...@music163/tango-context@1.1.1) (2024-05-21)
+
+**Note:** Version bump only for package @music163/tango-context
+
+# [1.1.0](https://github.com/netease/tango/compare/@music163/tango-context@1.0.2...@music163/tango-context@1.1.0) (2024-05-17)
+
+### Features
+
+- refactor parse attribute value ([#149](https://github.com/netease/tango/issues/149)) ([ffaa276](https://github.com/netease/tango/commit/ffaa276b5c205ed962d37e2fdb358a703f8fad01))
+
 ## [1.0.1](https://github.com/netease/tango/compare/@music163/tango-context@1.0.0...@music163/tango-context@1.0.1) (2024-04-22)

 ### Bug Fixes
@@ -1,6 +1,6 @@
 {
  "name": "@music163/tango-context",
-  "version": "1.0.1",
+  "version": "1.1.4",
  "description": "react context for tango-apps",
  "keywords": [
    "react",
@@ -31,9 +31,9 @@
    "react": ">= 16.8"
  },
  "dependencies": {
-    "@music163/tango-core": "^1.0.1",
-    "@music163/tango-helpers": "^1.0.0-alpha.7",
-    "mobx-react-lite": "4.0.5"
+    "@music163/tango-core": "^1.3.2",
+    "@music163/tango-helpers": "^1.2.0",
+    "mobx-react-lite": "4.0.7"
  },
  "publishConfig": {
    "access": "public",
@@ -3,6 +3,51 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [1.3.2](https://github.com/netease/tango/compare/@music163/tango-core@1.3.1...@music163/tango-core@1.3.2) (2024-06-20)
+
+### Bug Fixes
+
+- update designer style ([#176](https://github.com/netease/tango/issues/176)) ([0f3f0af](https://github.com/netease/tango/commit/0f3f0afdfa8aee2532a97c5c2e92ef4230397d86))
+
+## [1.3.1](https://github.com/netease/tango/compare/@music163/tango-core@1.3.0...@music163/tango-core@1.3.1) (2024-06-05)
+
+### Bug Fixes
+
+- set value as jsxElement children ([#173](https://github.com/netease/tango/issues/173)) ([ae04850](https://github.com/netease/tango/commit/ae04850bb251f392575a72ca5fd960249ea9d06b))
+
+# [1.3.0](https://github.com/netease/tango/compare/@music163/tango-core@1.2.0...@music163/tango-core@1.3.0) (2024-06-03)
+
+### Bug Fixes
+
+- parse app entry file & pass correct routerType to sandbox ([#168](https://github.com/netease/tango/issues/168)) ([3f3981b](https://github.com/netease/tango/commit/3f3981bb9db874b738a67fd449c579c35c58d08b))
+
+### Features
+
+- add context menu ([#161](https://github.com/netease/tango/issues/161)) ([28040fc](https://github.com/netease/tango/commit/28040fc00604339a40ad3216b76baf7de93a13e0))
+
+# [1.2.0](https://github.com/netease/tango/compare/@music163/tango-core@1.1.0...@music163/tango-core@1.2.0) (2024-05-21)
+
+### Bug Fixes
+
+- enhance code value validate in SettingForm ([#152](https://github.com/netease/tango/issues/152)) ([791fbb1](https://github.com/netease/tango/commit/791fbb162a7147243924e01f54e9c0b586f14438))
+- prototype2code & go back history error ([#156](https://github.com/netease/tango/issues/156)) ([8bf53a7](https://github.com/netease/tango/commit/8bf53a76f8a71eaf261ea68b9ee44e5bf19893aa))
+- support add components with popover ([#155](https://github.com/netease/tango/issues/155)) ([f17ccbb](https://github.com/netease/tango/commit/f17ccbb7f645f8047ecd96d9f3f2185048a3b726))
+
+### Features
+
+- add select parent node of selected node ([#158](https://github.com/netease/tango/issues/158)) ([fe31246](https://github.com/netease/tango/commit/fe3124648325e72abfc58da8b2f8ff83301d40b8))
+- supoort set default active view ([#157](https://github.com/netease/tango/issues/157)) ([f854f75](https://github.com/netease/tango/commit/f854f75b8a8c25384d290bd76d6b8bb6fb69f22d))
+
+# [1.1.0](https://github.com/netease/tango/compare/@music163/tango-core@1.0.2...@music163/tango-core@1.1.0) (2024-05-17)
+
+### Bug Fixes
+
+- parse module with module alias ([#147](https://github.com/netease/tango/issues/147)) ([56d0877](https://github.com/netease/tango/commit/56d0877507b0138877eac6f36db288147b43c7d9))
+
+### Features
+
+- refactor parse attribute value ([#149](https://github.com/netease/tango/issues/149)) ([ffaa276](https://github.com/netease/tango/commit/ffaa276b5c205ed962d37e2fdb358a703f8fad01))
+
 ## [1.0.1](https://github.com/netease/tango/compare/@music163/tango-core@1.0.0...@music163/tango-core@1.0.1) (2024-04-22)

 **Note:** Version bump only for package @music163/tango-core
@@ -1,6 +1,6 @@
 {
  "name": "@music163/tango-core",
-  "version": "1.0.1",
+  "version": "1.3.2",
  "description": "tango core",
  "author": "wwsun <ww.sun@outlook.com>",
  "homepage": "",
@@ -28,10 +28,10 @@
    "@babel/parser": "^7.23.5",
    "@babel/traverse": "^7.23.5",
    "@babel/types": "^7.23.5",
-    "@music163/tango-helpers": "^1.0.0-alpha.7",
+    "@music163/tango-helpers": "^1.2.0",
    "@types/babel__generator": "^7.6.7",
    "@types/babel__traverse": "^7.20.4",
-    "mobx": "6.12.0",
+    "mobx": "6.12.3",
    "path-browserify": "^1.0.1"
  },
  "peerDependencies": {
@@ -1,4 +1,5 @@
-import { Designer, Engine, SimulatorNameType } from './models';
+import { MenuDataType } from '@music163/tango-helpers';
+import { Designer, DesignerViewType, Engine, SimulatorNameType } from './models';
 import { IWorkspace } from './models/interfaces';

 interface ICreateEngineOptions {
@@ -6,6 +7,10 @@ interface ICreateEngineOptions {
   * 自定义工作区
   */
  workspace?: IWorkspace;
+  /**
+   * 菜单信息
+   */
+  menuData?: MenuDataType;
  /**
   * 默认的模拟器模式
   */
@@ -14,6 +19,10 @@ interface ICreateEngineOptions {
   * 默认激活的侧边栏
   */
  defaultActiveSidebarPanel?: string;
+  /**
+   * 默认激活的视图
+   */
+  defaultActiveView?: DesignerViewType;
 }

 /**
@@ -23,15 +32,19 @@ interface ICreateEngineOptions {
 */
 export function createEngine({
  workspace,
+  defaultActiveView = 'design',
  defaultSimulatorMode = 'desktop',
  defaultActiveSidebarPanel = '',
+  menuData,
 }: ICreateEngineOptions) {
  const engine = new Engine({
    workspace,
    designer: new Designer({
      workspace,
      simulator: defaultSimulatorMode,
+      activeView: defaultActiveView,
      activeSidebarPanel: defaultActiveSidebarPanel,
+      menuData,
    }),
  });

@@ -40,6 +40,7 @@ const templatePattern = /^{(.+)}$/s;
 /**
 * 判断给定字符串是否被表达式容器`{expCode}`包裹
 * @param code
+ * @deprecated 新版改为 {{code}} 作为容器，使用 isWrappedCode 代替
 */
 export function isWrappedByExpressionContainer(code: string, isStrict = true) {
  if (isStrict && isValidExpressionCode(code)) {
@@ -3,7 +3,7 @@
 */
 import generator, { GeneratorOptions } from '@babel/generator';
 import * as t from '@babel/types';
-import { logger } from '@music163/tango-helpers';
+import { logger, wrapCode } from '@music163/tango-helpers';
 import { formatCode } from '../string';

 const defaultGeneratorOptions: GeneratorOptions = {
@@ -156,10 +156,10 @@ export function node2code(node: t.Node) {
 /**
 * 将 t.Node 生成为 js 值
 * @param node ast node
- * @param hasExpressionWrapper 是否包裹表达式
+ * @param isWrapCode 是否包裹代码，例如 code -> {{code}}
 * @returns a plain javascript value
 */
-export function node2value(node: t.Node, hasExpressionWrapper = true): any {
+export function node2value(node: t.Node, isWrapCode = true): any {
  let ret;
  switch (node.type) {
    case 'StringLiteral':
@@ -171,39 +171,50 @@ export function node2value(node: t.Node, hasExpressionWrapper = true): any {
    case 'NullLiteral':
      ret = null;
      break;
-    case 'Identifier': // {data}
-    case 'MemberExpression': // {this.props.data}
-    case 'OptionalMemberExpression': // {a?.b}
-    case 'UnaryExpression': // {!false}
-    case 'ArrowFunctionExpression': // {() => {}}
-    case 'TemplateLiteral': // {`hello ${text}`}
-    case 'ConditionalExpression': // {a ? 'foo' : 'bar'}
-    case 'LogicalExpression': // { a || b}
-    case 'BinaryExpression': // { a + b}
-    case 'TaggedTemplateExpression': // {css``}
-    case 'CallExpression': // {[1,2,3].map(fn)}
-    case 'JSXElement': // {<Box>hello</Box>}
-    case 'JSXFragment': // <><Box /></>
+    case 'Identifier': // {{data}}
+    case 'MemberExpression': // {{this.props.data}}
+    case 'OptionalMemberExpression': // {{a?.b}}
+    case 'UnaryExpression': // {{!false}}
+    case 'ArrowFunctionExpression': // {{() => {}}}
+    case 'TemplateLiteral': // {{`hello ${text}`}}
+    case 'ConditionalExpression': // {{a ? 'foo' : 'bar'}}
+    case 'LogicalExpression': // {{ a || b}}
+    case 'BinaryExpression': // {{ a + b}}
+    case 'TaggedTemplateExpression': // {{css``}}
+    case 'CallExpression': // {{[1,2,3].map(fn)}}
+    case 'JSXElement': // {{<Box>hello</Box>}}
+    case 'JSXFragment': // {{<><Box /></>}}
      ret = expression2code(node);
-      if (hasExpressionWrapper) {
-        ret = `{${ret}}`;
+      if (isWrapCode) {
+        ret = wrapCode(ret);
      }
      break;
    case 'ObjectExpression': {
-      ret = node.properties.reduce((prev, propertyNode) => {
-        if (propertyNode.type === 'ObjectProperty') {
-          const key = keyNode2value(propertyNode.key);
-          const value = node2value(propertyNode.value, hasExpressionWrapper);
-          // key 可能是字符串，也可能是数字
-          prev[key] = value;
+      const isSimpleObject = node.properties.every(
+        (propertyNode) => propertyNode.type === 'ObjectProperty',
+      );
+      if (isSimpleObject) {
+        // simple object: { key1, key2, key3 }
+        ret = node.properties.reduce((prev, propertyNode) => {
+          if (propertyNode.type === 'ObjectProperty') {
+            const key = keyNode2value(propertyNode.key);
+            const value = node2value(propertyNode.value, isWrapCode);
+            prev[key] = value; // key 可能是字符串，也可能是数字
+          }
+          return prev;
+        }, {});
+      } else {
+        // mixed object, object property maybe SpreadElement or ObjectMethod, e.g. { key1, fn() {}, ...obj1 }
+        ret = expression2code(node);
+        if (wrapCode) {
+          ret = wrapCode(ret);
        }
-        // FIXME: property is a SpreadElement
-        return prev;
-      }, {});
+      }
      break;
    }
    case 'ArrayExpression': {
-      ret = node.elements.map((elementNode) => node2value(elementNode, hasExpressionWrapper));
+      // FIXME: 有可能会解析失败
+      ret = node.elements.map((elementNode) => node2value(elementNode, isWrapCode));
      break;
    }
    default:
@@ -214,7 +225,7 @@ export function node2value(node: t.Node, hasExpressionWrapper = true): any {
 }

 /**
- * jsx 属性值节点转为 js value
+ * jsx prop value 节点转为 js value
 */
 export function jsxAttributeValueNode2value(node: t.Node): any {
  // e.g. <Checkbox checked /> 此时没有 value node
@@ -232,9 +243,16 @@ export function jsxAttributeValueNode2value(node: t.Node): any {
      // <Foo bar={[]}>
      ret = jsxAttributeValueNode2value(node.expression);
      break;
-    default:
+    case 'ArrayExpression': {
+      // 数组统一处理为 code
+      ret = expression2code(node);
+      ret = wrapCode(ret);
+      break;
+    }
+    default: {
      ret = node2value(node);
      break;
+    }
  }

  return ret;
@@ -5,12 +5,12 @@ import { parse, parseExpression, ParserOptions } from '@babel/parser';
 import * as t from '@babel/types';
 import {
  logger,
-  isValidObjectString,
  getVariableContent,
  isPlainObject,
  Dict,
+  isWrappedCode,
+  getCodeOfWrappedCode,
 } from '@music163/tango-helpers';
-import { isWrappedByExpressionContainer } from '../assert';

 // @see https://babeljs.io/docs/en/babel-parser#pluginss
 const babelParserConfig: ParserOptions = {
@@ -97,8 +97,7 @@ export function code2expression(code: string) {
  try {
    expNode = t.cloneNode(parseExpression(code, babelParserConfig), false, true);
  } catch (err) {
-    logger.error('invalid code', err);
-    // expNode = t.identifier('undefined');
+    logger.error('code2expression failed, invalid code:', code);
  }
  return expNode;
 }
@@ -109,9 +108,6 @@ export function code2expression(code: string) {
 * @returns File
 */
 export function expressionCode2ast(code: string) {
-  if (isWrappedByExpressionContainer(code)) {
-    code = getVariableContent(code);
-  }
  const node = code2expression(code);
  return t.file(t.program([t.blockStatement([t.expressionStatement(node)])]));
 }
@@ -132,18 +128,19 @@ export function value2node(
  | t.Expression {
  let ret;
  switch (typeof value) {
-    case 'number':
-      ret = t.numericLiteral(value);
-      break;
    case 'string':
-      if (isWrappedByExpressionContainer(value)) {
-        // 再检查是否是表达式容器，例如 {this.foo}, {1}
-        const innerString = getVariableContent(value);
-        ret = code2expression(innerString);
+      if (isWrappedCode(value)) {
+        // 再检查是否是代码 {{code}}，例如 {{this.foo}}, {{1}}
+        const innerCode = getCodeOfWrappedCode(value);
+        ret = code2expression(innerCode);
      } else {
+        // 否则当成字符串处理
        ret = t.stringLiteral(value);
      }
      break;
+    case 'number':
+      ret = t.numericLiteral(value);
+      break;
    case 'boolean':
      ret = t.booleanLiteral(value);
      break;
@@ -167,7 +164,7 @@ export function value2node(
      ret = t.identifier('undefined');
      break;
    default: {
-      logger.error(`value2node: unsupport value <${value}>`);
+      logger.error(`value2node: value <${value}> transform failed!`);
      break;
    }
  }
@@ -196,21 +193,23 @@ export function code2jsxAttributeValueNode(code: string) {
  return t.jsxExpressionContainer(code2expression(code));
 }

+/**
+ * FIXME: 统一处理为 code2jsxAttributeValueNode
+ * 将 js value 转为 JSXAttributeValueNode
+ * @param value js value, or wrapped code
+ * @returns 返回 JSXAttributeValueNode，转换失败返回Node为 {undefined}
+ */
 export function value2jsxAttributeValueNode(value: any) {
  let ret;
  switch (typeof value) {
-    // FIXME: 重构这个逻辑，是不是统一当成 code 处理
    case 'string': {
      if (value.length > 1) {
        value = value.trim();
      }
-      if (isValidObjectString(value)) {
-        // 先检查是否是对象字符串
-        ret = t.jsxExpressionContainer(code2expression(value));
-      } else if (isWrappedByExpressionContainer(value)) {
-        // 再检查是否是表达式容器，例如 {this.foo}, {1}
-        const innerString = getVariableContent(value);
-        ret = t.jsxExpressionContainer(code2expression(innerString));
+      if (isWrappedCode(value)) {
+        const innerCode = getCodeOfWrappedCode(value);
+        const node = code2expression(innerCode);
+        ret = t.jsxExpressionContainer(node || t.identifier('undefined'));
      } else {
        ret = t.stringLiteral(value);
      }
@@ -227,10 +226,12 @@ export function value2jsxChildrenValueNode(value: any) {
  let ret: t.JSXElement | t.JSXFragment | t.JSXExpressionContainer | t.JSXSpreadChild | t.JSXText;
  switch (typeof value) {
    case 'string':
-      if (isWrappedByExpressionContainer(value)) {
+      if (isWrappedCode(value)) {
+        // 代码模式
        const innerString = getVariableContent(value);
        ret = t.jsxExpressionContainer(code2expression(innerString));
      } else {
+        // 普通的文本
        ret = t.jsxText(value);
      }
      break;
@@ -391,8 +391,10 @@ export function updateJSXElementAttribute(node: t.JSXElement, attrName: string,
        isExist = true;
        // @ts-ignore
        if (t.isJSXAttribute(jsxAttributeNode)) {
+          // 更新 jsx 属性值 <Foo bar="1" /> 的模式
          jsxAttributeNode.value = value2jsxAttributeValueNode(attrValue);
        } else if (name === 'children') {
+          // 更新 jsx children 的情况 <Foo>children</Foo>
          node.children = value2jsxChildrenValueNode(attrValue);
        }
      }
@@ -1425,3 +1427,22 @@ export function traverseFile(ast: t.File) {
    imports,
  };
 }
+
+/**
+ * app.js 入口文件解析
+ * @param ast
+ */
+export function traverseEntryFile(ast: t.File) {
+  let appConfig: any;
+  traverse(ast, {
+    CallExpression(path) {
+      const { node } = path;
+      const calleeName = keyNode2value(node.callee) as string;
+      if (calleeName === 'runApp') {
+        appConfig = node2value(node.arguments[0]);
+        path.stop();
+      }
+    },
+  });
+  return appConfig;
+}
@@ -1,27 +1,8 @@
-import { getVariableContent } from '@music163/tango-helpers';
-import { value2node, expression2code, isValidExpressionCode } from './ast';
-import { isWrappedByExpressionContainer } from './assert';
+import { getCodeOfWrappedCode, isWrappedCode } from '@music163/tango-helpers';
+import { value2node, expression2code, code2expression, node2value } from './ast';

 /**
- * 将 js value 转换为代码字符串
- */
-export function value2code(value: any) {
-  const node = value2node(value);
-  const code = expression2code(node);
-  return code;
-}
-
-/**
- * 是否是字符串代码
- * @param code
- * @returns
- */
-function isStringCode(code: string) {
-  return /^".*"$/.test(code?.trim());
-}
-
-/**
- * js value 转为表达式代码
+ * js value 转为代码字符串
 * @example 1 => 1
 * @example hello => "hello"
 * @example { foo: bar } => {{ foo: bar }}
@@ -30,34 +11,56 @@ function isStringCode(code: string) {
 * @param val js value
 * @returns 表达式代码
 */
-export function value2expressionCode(val: any) {
-  if (!val) return '';
+export function value2code(val: any) {
+  if (val === undefined) {
+    return '';
+  }
+
+  if (val === null) {
+    return 'null';
+  }

  let ret;
-
  switch (typeof val) {
    case 'string': {
-      if (isValidExpressionCode(val)) {
-        ret = val;
-      } else if (isWrappedByExpressionContainer(val, false)) {
-        ret = getVariableContent(val);
-      } else if (isStringCode(val)) {
-        ret = val;
+      if (isWrappedCode(val)) {
+        ret = getCodeOfWrappedCode(val);
      } else {
        ret = `"${val}"`;
      }
      break;
    }
+    case 'boolean':
+    case 'function':
    case 'number':
      ret = String(val);
      break;
-    case 'object':
-      ret = value2code(val);
-      break;
-    default:
-      ret = '';
+    default: {
+      // other cases, including array, object, null, undefined
+      const node = value2node(val);
+      ret = expression2code(node);
      break;
+    }
  }

  return ret;
 }
+
+export const value2expressionCode = value2code;
+
+/**
+ * 代码字符串转为具体的 js value
+ * @example `() => {}` 返回 undefined
+ *
+ * @param rawCode 代码字符串
+ * @returns 返回解析后的 js value，包括：string, number, boolean, simpleObject, simpleArray
+ */
+export function code2value(rawCode: string) {
+  const node = code2expression(rawCode);
+  const value = node2value(node);
+  if (isWrappedCode(value)) {
+    // 能转的就转，转不能的就返回空
+    return;
+  }
+  return value;
+}
@@ -3,20 +3,24 @@ import {
  IComponentProp,
  IComponentPrototype,
  Dict,
-  isNil,
  logger,
  uuid,
+  isWrappedCode,
+  getCodeOfWrappedCode,
+  wrapCodeWithJSXExpressionContainer,
 } from '@music163/tango-helpers';
 import { getRelativePath, isFilepath } from './string';
 import type { IImportDeclarationPayload, IImportSpecifierData } from '../types';
 import { code2expression } from './ast';
 import { isWrappedByExpressionContainer } from './assert';
+import { value2code } from './code-helpers';

 export function prototype2importDeclarationData(
  prototype: IComponentPrototype,
  relativeFilepath?: string,
 ): { source: string; specifiers: IImportSpecifierData[] } {
  let source = prototype.package;
+  const isSnippet = prototype.type === 'snippet';
  if (relativeFilepath && isFilepath(source)) {
    source = getRelativePath(relativeFilepath, source);
  }
@@ -32,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 {
@@ -84,48 +91,56 @@ export function getImportDeclarationPayloadByPrototype(

 /**
 * 基于 key-value 生成 prop={value} 字符串
- * @param key
- * @param value
+ * @example { name: 'foo', initValue: false } >> name={false}
+ * @example { name: 'foo', initValue: 1 } >> name={1}
+ * @example { name: 'foo', initValue: () => {} } >> name={()=>{}}
+ * @example { name: 'foo', initValue: { foo: 'bar' } } >> name={{ foo: 'bar' }}
+ * @example { name: 'foo', initValue: [{ foo: 'bar' }] } >> name={[{ foo: 'bar' }]}
+ * @example { name: 'foo', initValue: 'bar' } >> name="bar"
+ * @example { name: 'foo', initValue: '{() => {}}' } >> name={()=>{}}
+ * @example { name: 'foo', initValue: '{{() => {}}}' } >> name={() => {}}
+ * @example { name: 'foo', initValue: '{bar}' } >> name={bar}
 * @returns
 */
-function getPropKeyValuePair(item: IComponentProp, generateValue: (...args: any[]) => string) {
+export function propDataToKeyValueString(
+  item: IComponentProp,
+  generateValue?: (...args: any[]) => string,
+) {
  const key = item.name;

  let value = item.initValue;

  if (!value && item.autoInitValue) {
-    value = generateValue(3);
+    value = generateValue?.(3) || uuid(key, 3);
  }

-  if (isNil(value)) {
+  if (value === undefined) {
    return;
  }

  switch (typeof value) {
    case 'number':
-    case 'boolean': {
-      value = `{${value}}`;
+    case 'boolean':
+    case 'function': {
+      value = wrapCodeWithJSXExpressionContainer(String(value));
      break;
    }
    case 'object': {
-      // TIP: bugfix 如果 object 里有 jsx 或者 function 会失败
      try {
-        value = `{${JSON.stringify(value)}}`;
+        value = wrapCodeWithJSXExpressionContainer(value2code(value));
      } catch (err) {
        logger.error(err);
      }
      break;
    }
-    case 'function': {
-      value = `{${(value as object).toString()}}`;
-      break;
-    }
    case 'string': {
-      if (!isWrappedByExpressionContainer(value)) {
-        // 不是变量字符串
-        value = `"${value}"`;
+      if (isWrappedCode(value)) {
+        const innerCode = getCodeOfWrappedCode(value);
+        value = wrapCodeWithJSXExpressionContainer(innerCode);
+      } else if (isWrappedByExpressionContainer(value)) {
+        // TIP: 兼容旧版逻辑，如果是变量字符串，无需处理
      } else {
-        // 如果是变量字符串，无需处理
+        value = `"${value}"`;
      }
      break;
    }
@@ -155,11 +170,11 @@ export function prototype2code(prototype: IComponentPrototype, extraProps?: Dict
          }))
        : [];
      // merge extraProps to props
-      const props = [...prototype.props, ...propList];
+      const props = [...(prototype.props || []), ...propList];

      const keys =
        props.reduce((acc, item) => {
-          const pair = getPropKeyValuePair(item, (fractionDigits: number) =>
+          const pair = propDataToKeyValueString(item, (fractionDigits: number) =>
            uuid(prototype.name, fractionDigits),
          );
          return pair ? ` ${acc} ${pair}` : acc;
@@ -1,5 +1,6 @@
 import { action, computed, makeObservable, observable, toJS } from 'mobx';
 import { IWorkspace } from './interfaces';
+import { MenuDataType } from '@music163/tango-helpers';

 export type SimulatorNameType = 'desktop' | 'phone';

@@ -19,7 +20,15 @@ interface IViewportBounding {
 interface IDesignerOptions {
  workspace: IWorkspace;
  simulator?: SimulatorNameType | ISimulatorType;
+  /**
+   * 菜单配置
+   */
+  menuData: MenuDataType;
  activeSidebarPanel?: string;
+  /**
+   * 默认激活的视图模式
+   */
+  activeView?: DesignerViewType;
 }

 const ISimulatorTypes: Record<string, ISimulatorType> = {
@@ -64,6 +73,26 @@ export class Designer {
   */
  _showSmartWizard = false;

+  /**
+   * 是否显示添加组件面板
+   */
+  _showAddComponentPopover = false;
+
+  /**
+   * 添加组件面板的位置
+   */
+  _addComponentPopoverPosition = { clientX: 0, clientY: 0 };
+
+  /**
+   * 是否显示右键菜单
+   */
+  _showContextMenu = false;
+
+  /**
+   * 右键菜单在 iframe 上的位置
+   */
+  _contextMenuPosition = { clientX: 0, clientY: 0 };
+
  /**
   * 是否显示右侧面板
   */
@@ -75,9 +104,9 @@ export class Designer {
  _isPreview = false;

  /**
-   * 默认展开的侧边栏
+   * 菜单列表
   */
-  defaultActiveSidebarPanel?: string;
+  _menuData?: MenuDataType = null;

  private readonly workspace: IWorkspace;

@@ -109,10 +138,39 @@ export class Designer {
    return this._showRightPanel;
  }

+  get showAddComponentPopover() {
+    return this._showAddComponentPopover;
+  }
+
+  get addComponentPopoverPosition() {
+    return this._addComponentPopoverPosition;
+  }
+
+  get showContextMenu() {
+    return this._showContextMenu;
+  }
+
+  get contextMenuPosition() {
+    return this._contextMenuPosition;
+  }
+
+  get menuData() {
+    return this._menuData ?? ([] as MenuDataType);
+  }
+
  constructor(options: IDesignerOptions) {
    this.workspace = options.workspace;

-    const { simulator, activeSidebarPanel: defaultActiveSidebarPanel } = options;
+    const {
+      simulator,
+      menuData,
+      activeSidebarPanel: defaultActiveSidebarPanel,
+      activeView: defaultActiveView,
+    } = options;
+
+    if (menuData) {
+      this.setMenuData(menuData);
+    }

    // 默认设计器模式
    if (simulator) {
@@ -124,6 +182,11 @@ export class Designer {
      this.setActiveSidebarPanel(defaultActiveSidebarPanel);
    }

+    // 默认激活的视图
+    if (defaultActiveView) {
+      this.setActiveView(defaultActiveView);
+    }
+
    makeObservable(this, {
      _simulator: observable,
      _viewport: observable,
@@ -131,6 +194,11 @@ export class Designer {
      _activeSidebarPanel: observable,
      _showSmartWizard: observable,
      _showRightPanel: observable,
+      _showAddComponentPopover: observable,
+      _addComponentPopoverPosition: observable,
+      _showContextMenu: observable,
+      _contextMenuPosition: observable,
+      _menuData: observable,
      _isPreview: observable,
      simulator: computed,
      viewport: computed,
@@ -139,6 +207,11 @@ export class Designer {
      isPreview: computed,
      showRightPanel: computed,
      showSmartWizard: computed,
+      showAddComponentPopover: computed,
+      addComponentPopoverPosition: computed,
+      showContextMenu: computed,
+      contextMenuPosition: computed,
+      menuData: computed,
      setSimulator: action,
      setViewport: action,
      setActiveView: action,
@@ -147,6 +220,8 @@ export class Designer {
      toggleRightPanel: action,
      toggleSmartWizard: action,
      toggleIsPreview: action,
+      toggleAddComponentPopover: action,
+      toggleContextMenu: action,
    });
  }

@@ -173,6 +248,11 @@ export class Designer {
      this._activeSidebarPanel = '';
    }
  }
+
+  setMenuData(menuData: MenuDataType) {
+    this._menuData = menuData;
+  }
+
  closeSidebarPanel() {
    this._activeSidebarPanel = '';
  }
@@ -185,10 +265,37 @@ export class Designer {
    this._showRightPanel = value ?? !this._showRightPanel;
  }

+  /**
+   * 显示添加组件面板
+   * @param value 是否显示
+   * @param position 坐标
+   */
+  toggleAddComponentPopover(
+    value: boolean,
+    position: {
+      clientX: number;
+      clientY: number;
+    } = this.addComponentPopoverPosition,
+  ) {
+    this._showAddComponentPopover = value;
+    this._addComponentPopoverPosition = position;
+  }
+
  toggleIsPreview(value: boolean) {
    this._isPreview = value ?? !this._isPreview;
    if (value) {
      this.workspace.selectSource.clear();
    }
  }
+
+  toggleContextMenu(
+    value: boolean,
+    position: {
+      clientX: number;
+      clientY: number;
+    } = this.contextMenuPosition,
+  ) {
+    this._showContextMenu = value;
+    this._contextMenuPosition = position;
+  }
 }
@@ -0,0 +1,18 @@
+import { traverseEntryFile } from '../helpers';
+import { IFileConfig } from '../types';
+import { IWorkspace } from './interfaces';
+import { TangoModule } from './module';
+
+export class AppEntryModule extends TangoModule {
+  routerType: string;
+
+  constructor(workspace: IWorkspace, props: IFileConfig) {
+    super(workspace, props, false);
+    this.update(props.code, true, false);
+  }
+
+  _analysisAst() {
+    const config = traverseEntryFile(this.ast);
+    this.routerType = config?.router?.type;
+  }
+}
@@ -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() {
@@ -7,6 +7,7 @@ export * from './drag-source';
 export * from './history';
 export * from './file';
 export * from './module';
+export * from './entry-module';
 export * from './route-module';
 export * from './service-module';
 export * from './store-module';
@@ -16,6 +16,7 @@ import { TangoRouteModule } from './route-module';
 import { TangoStoreModule } from './store-module';
 import { TangoServiceModule } from './service-module';
 import { IdGenerator } from '../helpers';
+import { AppEntryModule } from './entry-module';

 export interface IViewFile {
  readonly workspace: IWorkspace;
@@ -152,6 +153,10 @@ export interface IWorkspace {
   * 解析后的 tango.config.json 文件，如果要获取项目配置，推荐使用 projectConfig 获取
   */
  tangoConfigJson: TangoJsonFile;
+  /**
+   * app.js 入口文件解析后的模块
+   */
+  appEntryModule: AppEntryModule;
  /**
   * 解析后的路由模块
   */
@@ -285,9 +290,16 @@ export interface IWorkspace {
   * 解析后的项目配置信息
   */
  get projectConfig(): ITangoConfigJson;
+  /**
+   * 当前活动的视图文件
+   */
  get activeViewModule(): IViewFile;
  get pages(): any[];
  get bizComps(): string[];
  get baseComps(): string[];
  get localComps(): string[];
+  /**
+   * 是否是合法的项目
+   */
+  get isValid(): boolean;
 }
@@ -109,6 +109,20 @@ export class SelectSource {
    this._start = null;
  }

+  /**
+   * 选中当前选中节点的父节点
+   */
+  selectParent() {
+    const parents = this.first?.parents || [];
+    if (parents.length) {
+      const [parent, ...rest] = parents;
+      this.select({
+        ...parent,
+        parents: rest,
+      });
+    }
+  }
+
  setStart(data: StartDataType) {
    this._start = data;
  }
@@ -11,6 +11,7 @@ import {
  parseServiceVariablePath,
  parseStoreVariablePath,
  uniq,
+  setValue,
 } from '@music163/tango-helpers';
 import {
  prototype2jsxElement,
@@ -35,6 +36,7 @@ import { TangoStoreEntryModule, TangoStoreModule } from './store-module';
 import { TangoServiceModule } from './service-module';
 import { TangoViewModule } from './view-module';
 import { TangoComponentsEntryModule } from './component-module';
+import { AppEntryModule } from './entry-module';

 export interface IWorkspaceOptions {
  /**
@@ -97,6 +99,11 @@ export class Workspace extends EventTarget implements IWorkspace {
   */
  activeViewFile: string;

+  /**
+   * 应用入口模块
+   */
+  appEntryModule: AppEntryModule;
+
  /**
   * 路由配置模块
   */
@@ -144,6 +151,13 @@ export class Workspace extends EventTarget implements IWorkspace {
   */
  private copyTempNodes: TangoNode[];

+  /**
+   * 是否是合法的项目
+   */
+  get isValid() {
+    return !!this.tangoConfigJson && !!this.activeViewModule;
+  }
+
  /**
   * 项目配置，返回解析后的 tango.config.json 文件
   */
@@ -322,6 +336,9 @@ export class Workspace extends EventTarget implements IWorkspace {
   * @param fileType 模块类型
   */
  addFile(filename: string, code: string, fileType?: FileType) {
+    if (!fileType && filename === this.entry) {
+      fileType = FileType.AppEntryModule;
+    }
    const moduleType = fileType || inferFileType(filename);
    const props = {
      filename,
@@ -331,6 +348,10 @@ export class Workspace extends EventTarget implements IWorkspace {

    let module;
    switch (moduleType) {
+      case FileType.AppEntryModule:
+        module = new AppEntryModule(this, props);
+        this.appEntryModule = module;
+        break;
      case FileType.StoreEntryModule:
        module = new TangoStoreEntryModule(this, props);
        this.storeEntryModule = module;
@@ -721,6 +742,7 @@ export class Workspace extends EventTarget implements IWorkspace {
   * 更新依赖，没有就添加
   * @param name
   * @param version
+   * FIXME: 参数3的设置需要重新考虑下
   */
  updateDependency(
    name: string,
@@ -743,15 +765,12 @@ export class Workspace extends EventTarget implements IWorkspace {
        if (!packages) {
          return undefined;
        }
-        if (options?.package || packages[name]) {
-          packages[name] = {
-            type: packages[name]?.type,
-            // 如果没有传入 package 信息，则沿用 tango.config.json 中已记录的数据
-            // 如果传入了，则全量使用传入的信息，适配可能在某个版本中如 resources 等字段被删除的情况
-            ...(options?.package || packages[name]),
-            version,
-          };
-        }
+
+        setValue(packages, name, {
+          ...packages[name], // 保留原有的配置
+          version, // 更新版本号
+          ...options?.package, // 更新 package 配置
+        });

        return packages;
      })
@@ -1226,8 +1245,17 @@ export class Workspace extends EventTarget implements IWorkspace {
    let filename: string;
    this.routeModule?.routes.forEach((route) => {
      if (isPathnameMatchRoute(routePath, route.path) && route.importPath) {
-        const absolutePath = route.importPath.replace('.', '/src');
-        filename = this.getRealViewFilePath(absolutePath);
+        if (route.importPath.startsWith('@/')) {
+          filename = route.importPath;
+          const alias = this.tangoConfigJson.getValue('sandbox.alias') || {};
+          if (alias['@']) {
+            filename = filename.replace('@', alias['@']);
+          }
+          filename = this.getRealViewFilePath(filename);
+        } else {
+          const absolutePath = route.importPath.replace('.', '/src');
+          filename = this.getRealViewFilePath(absolutePath);
+        }
      }
    });
    return filename;
@@ -8,6 +8,7 @@ export type SimulatorMode = 'desktop' | 'tablet' | 'phone';
 export enum FileType {
  // js 文件
  Module = 'module',
+  AppEntryModule = 'appEntryModule',
  StoreEntryModule = 'storeEntryModule',
  RouteModule = 'routeModule',
  ServiceModule = 'serviceModule',
@@ -1,4 +1,4 @@
-import { isTangoVariable, isWrappedByExpressionContainer } from '../src/helpers';
+import { isTangoVariable } from '../src/helpers';

 describe('assert', () => {
  it('isTangoVariable', () => {
@@ -7,19 +7,4 @@ describe('assert', () => {
    expect(isTangoVariable('tango.stores.app?.name')).toBeTruthy();
    // expect(isTangoVariable('tango.copyToClipboard')).toBeTruthy();
  });
-
-  it('isWrappedByExpressionContainer', () => {
-    expect(isWrappedByExpressionContainer('{this.foo}')).toBeTruthy();
-    expect(isWrappedByExpressionContainer('{!false}')).toBeTruthy();
-    expect(isWrappedByExpressionContainer('{[]}')).toBeTruthy();
-    expect(isWrappedByExpressionContainer('{{ foo: "bar" }}')).toBeTruthy();
-    expect(isWrappedByExpressionContainer('{[{ foo: "bar" }]}')).toBeTruthy();
-    expect(isWrappedByExpressionContainer('{123}')).toBeTruthy();
-    expect(isWrappedByExpressionContainer('{"hello"}')).toBeTruthy();
-    expect(isWrappedByExpressionContainer('{ foo: "bar" }')).toBeFalsy();
-    expect(isWrappedByExpressionContainer('{ type: tango.stores?.homePage?.tabKey }')).toBeFalsy();
-    expect(isWrappedByExpressionContainer('{ type: tango.stores.homePage.tabKey }')).toBeFalsy();
-    expect(isWrappedByExpressionContainer('{ foo: "bar" }')).toBeFalsy();
-    expect(isWrappedByExpressionContainer('{ color: tango.stores.app.color }')).toBeFalsy();
-  });
 });
@@ -1,19 +1,28 @@
+import { Identifier } from '@babel/types';
 import {
  object2node,
  serviceConfig2Node,
  isValidCode,
  isValidExpressionCode,
  code2expression,
+  value2jsxAttributeValueNode,
 } from '../src/helpers';

 describe('ast helpers', () => {
  it('isValidCode', () => {
+    expect(isValidCode('')).toBeTruthy();
+    expect(isValidCode('1')).toBeTruthy();
+    expect(isValidCode('"hello"')).toBeTruthy();
+    expect(isValidCode('<div>hello</div>')).toBeTruthy();
+    expect(isValidCode('function fn() {}')).toBeTruthy();
+
+    // invalid function body
    expect(isValidCode('() => { hello world }')).toBeFalsy();
+    // invalid function
    expect(isValidCode('function() {}')).toBeFalsy();
  });

-  it('isValidExpression', () => {
-    expect(isValidExpressionCode('() => { }')).toBeTruthy();
+  it('isValidExpressionCode', () => {
    expect(isValidExpressionCode('1')).toBeTruthy();
    expect(isValidExpressionCode('a = 1')).toBeTruthy();
    expect(isValidExpressionCode('1 + 1')).toBeTruthy();
@@ -22,8 +31,11 @@ describe('ast helpers', () => {
    expect(isValidExpressionCode('{ bizId: "vip", type: "category" }')).toBeTruthy();
    expect(isValidExpressionCode('[1,2,3]')).toBeTruthy();
    expect(isValidExpressionCode('<div>hello</div>')).toBeTruthy();
-    expect(isValidExpressionCode('<div>hello</div>')).toBeTruthy();
+    expect(isValidExpressionCode('tango.stores.app.title')).toBeTruthy();
+    expect(isValidExpressionCode('"hello" + window.location.path')).toBeTruthy();
+    expect(isValidExpressionCode('() => { }')).toBeTruthy();

+    expect(isValidExpressionCode('')).toBeFalsy();
    expect(isValidExpressionCode('{1}')).toBeFalsy();
    expect(isValidExpressionCode('{"1"}')).toBeFalsy();
    expect(isValidExpressionCode('{ 1+1 }')).toBeFalsy();
@@ -54,8 +66,7 @@ describe('ast helpers', () => {

  it('code2expression', () => {
    expect(code2expression('')).toBeUndefined();
-    expect(code2expression('{tango.stores.app}')).toBeUndefined();
-
+    expect(code2expression('tango.stores.app').type).toBe('MemberExpression');
    expect(code2expression('{ type: window.bar }').type).toEqual('ObjectExpression');
    expect(code2expression('() => {};').type).toEqual('ArrowFunctionExpression');
    expect(code2expression('<Button>hello</Button>').type).toBe('JSXElement');
@@ -69,4 +80,16 @@ describe('ast helpers', () => {
    `;
    expect(code2expression(arrayCode).type).toEqual('ArrayExpression');
  });
+
+  it('value2jsxAttributeValueNode', () => {
+    expect(value2jsxAttributeValueNode('hello').type).toBe('StringLiteral');
+    expect(value2jsxAttributeValueNode(true).type).toBe('JSXExpressionContainer');
+    expect(value2jsxAttributeValueNode(1).type).toBe('JSXExpressionContainer');
+    expect(value2jsxAttributeValueNode('{{{ foo: "foo"}}}').type).toBe('JSXExpressionContainer');
+
+    // invalid code will return undefined
+    const node: any = value2jsxAttributeValueNode('{{tango.xx+}}');
+    expect(node.type).toBe('JSXExpressionContainer');
+    expect((node.expression as Identifier).name).toBe('undefined');
+  });
 });
@@ -17,6 +17,7 @@ import {
  getJSXElementAttributes,
  inferFileType,
  deepCloneNode,
+  code2value,
 } from '../src/helpers';
 import { FileType } from '../src/types';

@@ -27,15 +28,18 @@ describe('helpers', () => {

  it('parse jsxElement attributes', () => {
    const node = code2expression(
-      "<XColumn dataIndex='col' enumMap={{ 1: '已解决', 2: '未解决' }} />",
+      "<Foo id={tango.user.id} num={1} str='col' enumMap={{ 1: '已解决', 2: '未解决' }} list={[{ key: 1 }, { key: 2 }]} />",
    );
    const attributes = getJSXElementAttributes(node as JSXElement);
    expect(attributes).toEqual({
-      dataIndex: 'col',
+      id: '{{tango.user.id}}',
+      num: 1,
+      str: 'col',
      enumMap: {
        1: '已解决',
        2: '未解决',
      },
+      list: '{{[{ key: 1 }, { key: 2 }]}}',
    });
  });

@@ -80,15 +84,22 @@ describe('helpers', () => {

  it('expressionCode2ast', () => {
    expect(expressionCode2ast('<Button>hello</Button>').type).toEqual('File');
-    expect(expressionCode2ast('{<Button>hello</Button>}').type).toEqual('File');
    expect(expressionCode2ast('() => <Button>hello</Button>').type).toEqual('File');
-    expect(expressionCode2ast('{() => <Button>hello</Button>}').type).toEqual('File');
  });
 });

 describe('string helpers', () => {
  it('value2code: empty array', () => {
    expect(value2code([])).toEqual('[]');
+    expect(value2code({})).toEqual('{}');
+    expect(value2code(() => {})).toEqual('() => {}');
+    expect(value2code(true)).toEqual('true');
+    expect(value2code(false)).toEqual('false');
+    expect(value2code(1)).toEqual('1');
+    expect(value2code('hello')).toEqual('"hello"');
+    expect(value2code('{{window.tango}}')).toEqual('window.tango');
+    expect(value2code('{{() => {}}}')).toEqual('() => {}');
+    expect(value2code('{{1111}}')).toEqual('1111');
  });

  it('value2code: array', () => {
@@ -201,10 +212,26 @@ describe('schema helpers', () => {
      },
    ],
  };
-  const cloned = deepCloneNode(schema);
-  expect(cloned.props.id).toBe(schema.props.id);
-  expect(cloned.children[0].props.id).toBe(schema.children[0].props.id);
-
-  expect(cloned.id).not.toBe(schema.id);
-  expect(cloned.children[0].id).not.toBe(schema.children[0].id);
+  it('deepCloneNode', () => {
+    const cloned = deepCloneNode(schema);
+    expect(cloned.props.id).toBe(schema.props.id);
+    expect(cloned.children[0].props.id).toBe(schema.children[0].props.id);
+    expect(cloned.id).not.toBe(schema.id);
+    expect(cloned.children[0].id).not.toBe(schema.children[0].id);
+  });
+});
+
+describe('code helper', () => {
+  it('code2value', () => {
+    expect(code2value(`1`)).toEqual(1);
+    expect(code2value(`false`)).toEqual(false);
+    expect(code2value(`"foo"`)).toEqual('foo');
+    expect(code2value(`{ foo: "foo" }`)).toEqual({ foo: 'foo' });
+    expect(code2value(`[{ foo: "foo" }]`)).toEqual([{ foo: 'foo' }]);
+    expect(code2value(`{ foo: "foo", ...{ bar: "bar"} }`)).toBe(undefined);
+    expect(code2value(`() => {}`)).toBe(undefined);
+    expect(code2value(`tango.stores.app.name`)).toBe(undefined);
+    expect(code2value(`window`)).toBe(undefined);
+    expect(code2value(`<div>hello</div>`)).toBe(undefined);
+  });
 });
@@ -0,0 +1,45 @@
+import { propDataToKeyValueString } from '../src/helpers';
+
+describe('prototype helpers', () => {
+  it('propDataToKeyValueString', () => {
+    // basic
+    expect(propDataToKeyValueString({ name: 'foo', initValue: 'bar' })).toEqual('foo="bar"');
+    expect(propDataToKeyValueString({ name: 'foo', initValue: 1 })).toEqual('foo={1}');
+    expect(propDataToKeyValueString({ name: 'foo', initValue: false })).toEqual('foo={false}');
+    expect(propDataToKeyValueString({ name: 'foo', initValue: null })).toEqual('foo={null}');
+    expect(propDataToKeyValueString({ name: 'foo', initValue: [] })).toEqual('foo={[]}');
+    expect(propDataToKeyValueString({ name: 'foo', initValue: {} })).toEqual('foo={{}}');
+    expect(propDataToKeyValueString({ name: 'foo', initValue: () => {} })).toEqual(
+      'foo={() => {}}',
+    );
+    expect(propDataToKeyValueString({ name: 'foo', initValue: { foo: 'bar' } })).toEqual(
+      'foo={{ foo: "bar" }}',
+    );
+    expect(propDataToKeyValueString({ name: 'foo', initValue: [{ foo: 'bar' }] })).toEqual(
+      'foo={[{ foo: "bar" }]}',
+    );
+
+    // wrapped code
+    expect(
+      propDataToKeyValueString({ name: 'foo', initValue: '{{<Placeholder text="放置替换" />}}' }),
+    ).toEqual('foo={<Placeholder text="放置替换" />}');
+    expect(propDataToKeyValueString({ name: 'foo', initValue: '{{tango}}' })).toEqual(
+      'foo={tango}',
+    );
+    expect(propDataToKeyValueString({ name: 'foo', initValue: '{{"bar"}}' })).toEqual(
+      'foo={"bar"}',
+    );
+    expect(propDataToKeyValueString({ name: 'foo', initValue: '{{() => {}}}' })).toEqual(
+      'foo={() => {}}',
+    );
+
+    // compatible with old version
+    expect(propDataToKeyValueString({ name: 'foo', initValue: '{() => {}}' })).toEqual(
+      'foo={() => {}}',
+    );
+    expect(
+      propDataToKeyValueString({ name: 'foo', initValue: '{<Placeholder text="放置替换" />}' }),
+    ).toEqual('foo={<Placeholder text="放置替换" />}');
+    // expect(propDataToKeyValueString({ name: 'foo', initValue: '{tango}' })).toEqual('foo={tango}');
+  });
+});
@@ -3,6 +3,72 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [1.3.2](https://github.com/netease/tango/compare/@music163/tango-designer@1.3.1...@music163/tango-designer@1.3.2) (2024-06-20)
+
+### Bug Fixes
+
+- drag-panel add resizeable & height prop ([#175](https://github.com/netease/tango/issues/175)) ([b53a9f7](https://github.com/netease/tango/commit/b53a9f7eefc748ba8a7c94270c3a374b9d6ed211))
+- fix global hotkey triggering on content editable elements ([#174](https://github.com/netease/tango/issues/174)) ([a2cc418](https://github.com/netease/tango/commit/a2cc418a73edfd9b7fe8aad456ae775a49df2166))
+- update designer style ([#176](https://github.com/netease/tango/issues/176)) ([0f3f0af](https://github.com/netease/tango/commit/0f3f0afdfa8aee2532a97c5c2e92ef4230397d86))
+
+## [1.3.1](https://github.com/netease/tango/compare/@music163/tango-designer@1.3.0...@music163/tango-designer@1.3.1) (2024-06-05)
+
+### Bug Fixes
+
+- fix context menu error on macOS ([#170](https://github.com/netease/tango/issues/170)) ([ca740c8](https://github.com/netease/tango/commit/ca740c83ae7f72a75c7db90d2e137a7e9a032326))
+
+# [1.3.0](https://github.com/netease/tango/compare/@music163/tango-designer@1.2.3...@music163/tango-designer@1.3.0) (2024-06-03)
+
+### Bug Fixes
+
+- parse app entry file & pass correct routerType to sandbox ([#168](https://github.com/netease/tango/issues/168)) ([3f3981b](https://github.com/netease/tango/commit/3f3981bb9db874b738a67fd449c579c35c58d08b))
+
+### Features
+
+- add context menu ([#161](https://github.com/netease/tango/issues/161)) ([28040fc](https://github.com/netease/tango/commit/28040fc00604339a40ad3216b76baf7de93a13e0))
+
+## [1.2.3](https://github.com/netease/tango/compare/@music163/tango-designer@1.2.2...@music163/tango-designer@1.2.3) (2024-05-30)
+
+### Bug Fixes
+
+- optimize variable panel scroll ui & onCancel bug ([#166](https://github.com/netease/tango/issues/166)) ([a0ed57f](https://github.com/netease/tango/commit/a0ed57ff4f332bd88749b8b1925bdb29319e4d13))
+
+## [1.2.2](https://github.com/netease/tango/compare/@music163/tango-designer@1.2.1...@music163/tango-designer@1.2.2) (2024-05-27)
+
+### Bug Fixes
+
+- export usePreviewSandboxQuery & add builtin sandboxQuery ([#163](https://github.com/netease/tango/issues/163)) ([163eced](https://github.com/netease/tango/commit/163ecedff3ed7baee59e200a8cc60dcc63a24e48))
+
+## [1.2.1](https://github.com/netease/tango/compare/@music163/tango-designer@1.2.0...@music163/tango-designer@1.2.1) (2024-05-22)
+
+### Bug Fixes
+
+- check local component prototypes ([#160](https://github.com/netease/tango/issues/160)) ([a0484e8](https://github.com/netease/tango/commit/a0484e8f64f20f67c30c25c3d5ce65de549b3e04))
+
+# [1.2.0](https://github.com/netease/tango/compare/@music163/tango-designer@1.1.0...@music163/tango-designer@1.2.0) (2024-05-21)
+
+### Bug Fixes
+
+- enhance code value validate in SettingForm ([#152](https://github.com/netease/tango/issues/152)) ([791fbb1](https://github.com/netease/tango/commit/791fbb162a7147243924e01f54e9c0b586f14438))
+- prototype2code & go back history error ([#156](https://github.com/netease/tango/issues/156)) ([8bf53a7](https://github.com/netease/tango/commit/8bf53a76f8a71eaf261ea68b9ee44e5bf19893aa))
+- support add components with popover ([#155](https://github.com/netease/tango/issues/155)) ([f17ccbb](https://github.com/netease/tango/commit/f17ccbb7f645f8047ecd96d9f3f2185048a3b726))
+
+### Features
+
+- add history forward & back shortcut key ([#154](https://github.com/netease/tango/issues/154)) ([df3021f](https://github.com/netease/tango/commit/df3021f75e057e229756b429321c14d181223698))
+- add select parent node of selected node ([#158](https://github.com/netease/tango/issues/158)) ([fe31246](https://github.com/netease/tango/commit/fe3124648325e72abfc58da8b2f8ff83301d40b8))
+- event-setter & expression-setter use popover ([#159](https://github.com/netease/tango/issues/159)) ([9daf387](https://github.com/netease/tango/commit/9daf3872e743fcf706184877020bcbf1f75ffd25))
+
+# [1.1.0](https://github.com/netease/tango/compare/@music163/tango-designer@1.0.3...@music163/tango-designer@1.1.0) (2024-05-17)
+
+### Bug Fixes
+
+- support quick set tid in SettingForm ([#151](https://github.com/netease/tango/issues/151)) ([1fc22a4](https://github.com/netease/tango/commit/1fc22a4535a8bdc12a018a41ebd5ab908fc46817))
+
+### Features
+
+- refactor parse attribute value ([#149](https://github.com/netease/tango/issues/149)) ([ffaa276](https://github.com/netease/tango/commit/ffaa276b5c205ed962d37e2fdb358a703f8fad01))
+
 ## [1.0.2](https://github.com/netease/tango/compare/@music163/tango-designer@1.0.1...@music163/tango-designer@1.0.2) (2024-04-22)

 ### Bug Fixes
@@ -1,6 +1,6 @@
 {
  "name": "@music163/tango-designer",
-  "version": "1.0.2",
+  "version": "1.3.2",
  "description": "lowcode designer",
  "keywords": [
    "react"
@@ -32,25 +32,25 @@
  },
  "dependencies": {
    "@ant-design/icons": "^4.8.0",
-    "@music163/request": "^0.1.2",
-    "@music163/tango-context": "^1.0.1",
-    "@music163/tango-core": "^1.0.1",
-    "@music163/tango-helpers": "^1.0.0-alpha.7",
-    "@music163/tango-sandbox": "^1.0.1",
-    "@music163/tango-setting-form": "^1.0.2",
-    "@music163/tango-ui": "^1.0.2",
+    "@music163/request": "^0.2.0",
+    "@music163/tango-context": "^1.1.4",
+    "@music163/tango-core": "^1.3.2",
+    "@music163/tango-helpers": "^1.2.0",
+    "@music163/tango-sandbox": "^1.0.7",
+    "@music163/tango-setting-form": "^1.2.7",
+    "@music163/tango-ui": "^1.3.2",
    "antd": "^4.24.2",
    "cash-dom": "^8.1.2",
-    "classnames": "^2.3.2",
+    "classnames": "^2.5.1",
    "color": "^4.2.3",
    "coral-system": "^1.0.5",
    "cssjson": "^2.1.3",
    "date-fns": "^2.29.2",
    "lodash-es": "^4.17.21",
-    "moment": "^2.29.4",
+    "moment": "^2.30.1",
    "react-color": "^2.19.3",
    "react-resizable": "^3.0.5",
-    "semver": "^7.3.8"
+    "semver": "^7.6.2"
  },
  "devDependencies": {
    "@types/color": "^3.0.5",
@@ -0,0 +1,146 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { Box } from 'coral-system';
+import { observer, useDesigner, useWorkspace } from '@music163/tango-context';
+import { IconFont, DragPanel } from '@music163/tango-ui';
+import { ComponentsPanel, ComponentsPanelProps } from '../sidebar';
+import { IComponentPrototype } from '@music163/tango-helpers';
+
+interface ComponentsPopoverProps {
+  // 添加组件位置
+  type?: 'inner' | 'before' | 'after';
+  // 弹出方式 手动触发/DOM 触发
+  isControlled?: boolean;
+  title?: string;
+  prototype?: IComponentPrototype;
+  children?: React.ReactNode;
+}
+
+export const ComponentsPopover = observer(
+  ({
+    type = 'inner',
+    title = '添加组件',
+    isControlled = false,
+    children,
+    ...popoverProps
+  }: ComponentsPopoverProps) => {
+    const [layout, setLayout] = useState<ComponentsPanelProps['layout']>('grid');
+    const workspace = useWorkspace();
+    const designer = useDesigner();
+
+    const { addComponentPopoverPosition, showAddComponentPopover } = designer;
+    const selectedNode = workspace.selectSource.selected?.[0];
+    const selectedNodeId = selectedNode?.codeId ?? '未选中';
+    const prototype =
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+      workspace.componentPrototypes.get(selectedNode?.name) ?? ({} as IComponentPrototype);
+
+    // 推荐使用的子组件
+    const insertedList = useMemo(
+      () =>
+        Array.isArray(prototype?.childrenName)
+          ? prototype?.childrenName
+          : [prototype?.childrenName].filter(Boolean),
+      [prototype?.childrenName],
+    );
+
+    // 推荐使用的代码片段
+    const siblingList = useMemo(() => prototype?.siblingNames ?? [], [prototype.siblingNames]);
+
+    const tipsTextMap = useMemo(
+      () => ({
+        before: `点击，在 ${selectedNodeId} 的前方添加节点`,
+        after: `点击，在 ${selectedNodeId} 的后方添加节点`,
+        inner: `点击，在 ${selectedNodeId} 内部添加节点`,
+      }),
+      [selectedNodeId],
+    );
+
+    const handleSelect = useCallback(
+      (name: string) => {
+        switch (type) {
+          case 'before':
+            workspace.insertBeforeSelectedNode(name);
+            break;
+          case 'after':
+            workspace.insertAfterSelectedNode(name);
+            break;
+          case 'inner':
+            workspace.insertToSelectedNode(name);
+            break;
+          default:
+            break;
+        }
+      },
+      [type, workspace],
+    );
+
+    const changeLayout = useCallback(() => {
+      setLayout(layout === 'grid' ? 'line' : 'grid');
+    }, [layout]);
+
+    const menuData = useMemo(() => {
+      const menuList = JSON.parse(JSON.stringify(designer.menuData));
+
+      const commonList = menuList['common'] ?? [];
+      if (commonList?.length && siblingList?.length) {
+        commonList.unshift({
+          title: '代码片段',
+          items: siblingList,
+        });
+      }
+
+      if (commonList?.length && insertedList?.length) {
+        commonList.unshift({
+          title: '推荐使用',
+          items: insertedList,
+        });
+      }
+
+      return menuList;
+    }, [insertedList, siblingList, designer.menuData]);
+
+    const innerTypeProps =
+      // 手动触发 适用于 点击添加组件
+      type === 'inner' && isControlled
+        ? {
+            open: showAddComponentPopover,
+            onOpenChange: (open: boolean) => designer.toggleAddComponentPopover(open),
+            left: addComponentPopoverPosition.clientX,
+            top: addComponentPopoverPosition.clientY,
+          }
+        : {};
+
+    return (
+      <DragPanel
+        {...innerTypeProps}
+        title={title}
+        extra={
+          <Box fontSize="12px">
+            {layout === 'grid' ? (
+              <IconFont type="icon-liebiaoitem" onClick={changeLayout} />
+            ) : (
+              <IconFont type="icon-grid1" onClick={changeLayout} />
+            )}
+          </Box>
+        }
+        footer={tipsTextMap[type]}
+        width="330px"
+        height="450px"
+        resizeable
+        maskClosable
+        body={
+          <ComponentsPanel
+            isScope
+            showBizComps={false}
+            menuData={menuData}
+            layout={layout}
+            onItemSelect={handleSelect}
+          />
+        }
+        {...popoverProps}
+      >
+        {children}
+      </DragPanel>
+    );
+  },
+);
@@ -0,0 +1,130 @@
+import React from 'react';
+import { getWidget } from '../widgets';
+import { Menu, MenuProps } from 'antd';
+import { observer, useWorkspace } from '@music163/tango-context';
+import { ISelectedItemData, isString } from '@music163/tango-helpers';
+import { Box, css } from 'coral-system';
+import { IconFont } from '@music163/tango-ui';
+
+const contextMenuStyle = css`
+  .ant-dropdown-menu {
+    width: 240px;
+  }
+
+  .ant-dropdown-menu-title-content {
+    padding-left: 22px;
+  }
+
+  .ant-dropdown-menu-item-icon {
+    font-size: 14px;
+    width: 14px;
+  }
+
+  .ant-dropdown-menu-item-icon + .ant-dropdown-menu-title-content {
+    padding-left: 0;
+  }
+
+  .ant-dropdown-menu-submenu-popup {
+    padding: 0;
+    margin-top: -4px;
+  }
+`;
+
+const ParentNodesMenuItem = ({
+  record,
+  onClick,
+  key,
+}: {
+  record: ISelectedItemData;
+  onClick: () => any;
+  key?: string;
+}) => {
+  const workspace = useWorkspace();
+  const componentPrototype = workspace.componentPrototypes.get(record.name);
+  const icon = componentPrototype?.icon || 'icon-placeholder';
+
+  const iconRender = icon.startsWith('icon-') ? (
+    <IconFont className="material-icon" type={icon} />
+  ) : (
+    <img className="material-icon" src={icon} alt={componentPrototype.name} />
+  );
+
+  return (
+    <Menu.Item key={key || record.id} icon={iconRender} onClick={onClick}>
+      {record.name}
+      {!!record.codeId && ` (${record.codeId})`}
+    </Menu.Item>
+  );
+};
+
+const ParentNodesMenu = observer(() => {
+  const workspace = useWorkspace();
+  const selectSource = workspace.selectSource;
+  const parents = selectSource.first?.parents;
+
+  if (!parents?.length) {
+    return null;
+  }
+
+  return (
+    <Menu.SubMenu key="parentNodes" title="选取父节点">
+      {parents.map((item, index) => (
+        <ParentNodesMenuItem
+          key={item.id}
+          record={item}
+          onClick={() => {
+            selectSource.select({
+              ...item,
+              parents: parents.slice(index + 1),
+            });
+          }}
+        />
+      ))}
+    </Menu.SubMenu>
+  );
+});
+
+export interface ContextMenuProps extends MenuProps {
+  /**
+   * 动作列表，默认列出全部
+   */
+  actions?: Array<string | React.ReactElement>;
+  /**
+   * 是否显示父节点选项
+   */
+  showParents?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+  menuStyle?: React.CSSProperties;
+}
+
+export const ContextMenu = observer(
+  ({
+    showParents,
+    actions: actionsProp,
+    className,
+    style,
+    menuStyle,
+    ...rest
+  }: ContextMenuProps) => {
+    const actions = actionsProp || Object.keys(getWidget('contextMenu'));
+    const menus = actions.map((item) => {
+      if (isString(item)) {
+        const widget = getWidget(['contextMenu', item].join('.'));
+        return widget ? React.createElement(widget) : null;
+      }
+      return item;
+    });
+    if (showParents) {
+      menus.unshift(<ParentNodesMenu />);
+    }
+
+    return (
+      <Box display="inline-block" css={contextMenuStyle} className={className} style={style}>
+        <Menu activeKey={null} {...rest} style={menuStyle}>
+          {menus}
+        </Menu>
+      </Box>
+    );
+  },
+);
@@ -1,4 +1,6 @@
+export * from './context-menu';
 export * from './drag-box';
 export * from './input-kv';
 export * from './variable-tree';
 export * from './variable-tree-modal';
+export * from './components-popover';
@@ -166,7 +166,7 @@ export function VariableTree(props: VariableTreeProps) {

  return (
    <Box display="flex" columnGap="l" className="VariableTree" css={varTreeStyle} {...rest}>
-      <Box className="VariableList" width="40%">
+      <Box className="VariableList" width="40%" overflow="auto">
        {renderHeaderExtra?.(props, state)}
        <Box mb="m" position="sticky" top="0" bg="white" zIndex={2}>
          <Search placeholder="请输入变量名" onChange={(val) => setKeyword(val?.trim())} />
@@ -203,7 +203,11 @@ export function VariableTree(props: VariableTreeProps) {
                  <Box flex="0 0 72px" textAlign="right">
                    {node.showRemoveButton && (
                      <Popconfirm
+                        zIndex={99999}
                        title={`确认删除吗 ${node.title}？该操作会导致引用此模型的代码报错，请谨慎操作！`}
+                        onCancel={(e) => {
+                          e.stopPropagation();
+                        }}
                        onConfirm={(e) => {
                          e.stopPropagation();
                          if (isStoreVariablePath(node.key)) {
@@ -333,7 +337,14 @@ export function VariableTree(props: VariableTreeProps) {
                      }}
                    />
                  ) : (
-                    <ValueDefine data={activeNode} onSave={onUpdateStoreVariable} />
+                    <ValueDefine
+                      data={activeNode}
+                      onSave={(variableKey, code) => {
+                        onUpdateStoreVariable(variableKey, code);
+                        // 更新当前节点 code
+                        setActiveNode((pre) => ({ ...pre, raw: code }));
+                      }}
+                    />
                  )
                }
              </ValueDetail>
@@ -3,7 +3,8 @@ import { Box } from 'coral-system';
 import { Button, Empty } from 'antd';
 import { PlayCircleOutlined } from '@ant-design/icons';
 import { InputCode, Panel, JsonView } from '@music163/tango-ui';
-import { isNil, logger, code2object, getValue } from '@music163/tango-helpers';
+import { isNil, logger, getValue } from '@music163/tango-helpers';
+import { code2value } from '@music163/tango-core';

 export interface ServicePreviewProps {
  appContext?: any;
@@ -22,7 +23,7 @@ export function ServicePreview({ appContext, functionKey }: ServicePreviewProps)
          editable
          showLineNumbers
          onChange={(value: string) => {
-            const obj = code2object(value);
+            const obj = code2value(value); // 转为 object 对象
            setPayload(obj);
          }}
        />
@@ -84,6 +84,8 @@ export function ValueDefine({ data, onSave = noop }: ValueDefineProps) {
              onClick={() => {
                off();
                setError('');
+                // 重置到原始值
+                setValue(data.raw);
              }}
            >
              取消
@@ -0,0 +1,19 @@
+import React from 'react';
+import { useWorkspace, observer } from '@music163/tango-context';
+import { ContextAction } from '@music163/tango-ui';
+import { CopyOutlined } from '@ant-design/icons';
+
+export const CopyNodeContextAction = observer(() => {
+  const workspace = useWorkspace();
+  return (
+    <ContextAction
+      icon={<CopyOutlined />}
+      hotkey="Command+C"
+      onClick={() => {
+        workspace.copySelectedNode();
+      }}
+    >
+      复制节点
+    </ContextAction>
+  );
+});
@@ -0,0 +1,19 @@
+import React from 'react';
+import { useWorkspace, observer } from '@music163/tango-context';
+import { ContextAction } from '@music163/tango-ui';
+import { DeleteOutlined } from '@ant-design/icons';
+
+export const DeleteNodeContextAction = observer(() => {
+  const workspace = useWorkspace();
+  return (
+    <ContextAction
+      icon={<DeleteOutlined />}
+      hotkey="Backspace"
+      onClick={() => {
+        workspace.removeSelectedNode();
+      }}
+    >
+      删除节点
+    </ContextAction>
+  );
+});
@@ -0,0 +1,4 @@
+export * from './copy-node';
+export * from './delete-node';
+export * from './paste-node';
+export * from './view-source';
@@ -0,0 +1,19 @@
+import React from 'react';
+import { useWorkspace, observer } from '@music163/tango-context';
+import { ContextAction } from '@music163/tango-ui';
+import { SnippetsOutlined } from '@ant-design/icons';
+
+export const PasteNodeContextAction = observer(() => {
+  const workspace = useWorkspace();
+  return (
+    <ContextAction
+      icon={<SnippetsOutlined />}
+      hotkey="Command+V"
+      onClick={() => {
+        workspace.pasteSelectedNode();
+      }}
+    >
+      粘贴节点
+    </ContextAction>
+  );
+});
@@ -0,0 +1,18 @@
+import React from 'react';
+import { useDesigner, observer } from '@music163/tango-context';
+import { ContextAction } from '@music163/tango-ui';
+import { CodeOutlined } from '@ant-design/icons';
+
+export const ViewSourceContextAction = observer(() => {
+  const designer = useDesigner();
+  return (
+    <ContextAction
+      icon={<CodeOutlined />}
+      onClick={() => {
+        designer.setActiveView('code');
+      }}
+    >
+      查看源码
+    </ContextAction>
+  );
+});
@@ -6,10 +6,14 @@ export interface IDesignerContext<S = any> {
   * 沙箱查询实例
   */
  sandboxQuery: DndQuery;
+  /**
+   * 预览沙箱查询实例
+   */
+  previewSandboxQuery: DndQuery;
  /**
   * 远程服务
   */
-  remoteServices?: Record<string, S>;
+  remoteServices: Record<string, S>;
 }

 const [DesignerProvider, useDesigner] = createContext<IDesignerContext>({
@@ -19,9 +23,13 @@ const [DesignerProvider, useDesigner] = createContext<IDesignerContext>({
 export { DesignerProvider };

 export const useSandboxQuery = () => {
-  return useDesigner()?.sandboxQuery;
+  return useDesigner().sandboxQuery;
+};
+
+export const usePreviewSandboxQuery = () => {
+  return useDesigner().previewSandboxQuery;
 };

 export const useRemoteServices = () => {
-  return useDesigner()?.remoteServices;
+  return useDesigner().remoteServices;
 };
@@ -5,8 +5,18 @@ import { TangoEngineProvider, ITangoEngineContext } from '@music163/tango-contex
 import zhCN from 'antd/lib/locale/zh_CN';
 import { DesignerProvider, IDesignerContext } from './context';
 import defaultTheme from './themes/default';
+import { DndQuery } from './dnd';
+import { DESIGN_SANDBOX_ID, PREVIEW_SANDBOX_ID } from './helpers';

-export interface DesignerProps extends IDesignerContext, ITangoEngineContext {
+const builtinSandboxQuery = new DndQuery({
+  context: `#${DESIGN_SANDBOX_ID}`,
+});
+
+const builtinPreviewSandboxQuery = new DndQuery({
+  context: `#${PREVIEW_SANDBOX_ID}`,
+});
+
+export interface DesignerProps extends Partial<IDesignerContext>, ITangoEngineContext {
  /**
   * 主题包
   */
@@ -20,13 +30,23 @@ export interface DesignerProps extends IDesignerContext, ITangoEngineContext {
 * @returns
 */
 export function Designer(props: DesignerProps) {
-  const { engine, config, theme: themeProp, sandboxQuery, remoteServices = {}, children } = props;
+  const {
+    engine,
+    config,
+    theme: themeProp,
+    sandboxQuery = builtinSandboxQuery,
+    previewSandboxQuery = builtinPreviewSandboxQuery,
+    remoteServices = {},
+    children,
+  } = props;
  const theme = useMemo(() => extendTheme(themeProp, defaultTheme), [themeProp]);
  return (
    <SystemProvider theme={theme} prefix="--tango">
      <ConfigProvider locale={zhCN}>
        <TangoEngineProvider value={{ engine, config }}>
-          <DesignerProvider value={{ sandboxQuery, remoteServices }}>{children}</DesignerProvider>
+          <DesignerProvider value={{ sandboxQuery, previewSandboxQuery, remoteServices }}>
+            {children}
+          </DesignerProvider>
        </TangoEngineProvider>
      </ConfigProvider>
    </SystemProvider>
@@ -12,7 +12,6 @@ export const DRAGGABLE_SELECTOR = `[${SLOT.dnd}]`;
 interface DndQueryOptions {
  /**
   * DOM 查询上下文选择器
-   * TODO: 是不是可以合并成一个 API
   */
  context?: string;
  /**
@@ -63,6 +62,9 @@ export class DndQuery {
    return false;
  }

+  /**
+   * 沙箱内的 window 对象
+   */
  get window() {
    if (this.context && 'defaultView' in this.context) {
      return (this.context as unknown as Document).defaultView;
@@ -71,6 +73,9 @@ export class DndQuery {
    return window;
  }

+  /**
+   * 沙箱内的全局滚动偏移
+   */
  get scrollTop() {
    if (this.context && 'documentElement' in this.context) {
      return (this.context as unknown as Document).documentElement.scrollTop;
@@ -58,6 +58,15 @@ export function useDnd({
      'command+v,ctrl+v': () => {
        workspace.pasteSelectedNode();
      },
+      'command+arrowup,ctrl+arrowup': () => {
+        workspace.selectSource.selectParent();
+      },
+      'command+z,ctrl+z': () => {
+        workspace.history.back();
+      },
+      'command+shift+z,ctrl+shift+z': () => {
+        workspace.history.forward();
+      },
    });
  }, [workspace]);

@@ -68,6 +77,9 @@ export function useDnd({
    if (designer.isPreview) {
      return;
    }
+    if (designer.showContextMenu) {
+      designer.toggleContextMenu(false);
+    }

    const point = sandboxQuery.getRelativePoint({ x: e.clientX, y: e.clientY });
    selectSource.setStart({
@@ -84,10 +96,10 @@ export function useDnd({
  const onMouseMove = (e: React.MouseEvent) => {
    const point = sandboxQuery.getRelativePoint({ x: e.clientX, y: e.clientY });
    setElementStyle('.SelectionMask', {
-      width: Math.abs(selectSource.start?.point.x - point.x) + 'px',
-      height: Math.abs(selectSource.start?.point.y - point.y) + 'px',
-      left: Math.min(selectSource.start?.point.x, point.x) + 'px',
-      top: Math.min(selectSource.start?.point.y, point.y) + 'px',
+      width: `${Math.abs(selectSource.start?.point.x - point.x)}px`,
+      height: `${Math.abs(selectSource.start?.point.y - point.y)}px`,
+      left: `${Math.min(selectSource.start?.point.x, point.x)}px`,
+      top: `${Math.min(selectSource.start?.point.y, point.y)}px`,
    });
  };

@@ -119,6 +131,9 @@ export function useDnd({
  };

  const onClick = (e: React.MouseEvent) => {
+    if (designer.showContextMenu) {
+      designer.toggleContextMenu(false);
+    }
    const data = sandboxQuery.getDraggableParentsData(e.target as HTMLElement, true);
    if (data && data.id) {
      selectSource.select(data);
@@ -371,7 +386,8 @@ export function useDnd({
  };

  const onKeyDown = (e: React.KeyboardEvent) => {
-    const isInputElement = isInputElements((e.target as HTMLElement).nodeName);
+    const target = e.target as HTMLElement;
+    const isInputElement = target.isContentEditable || isInputElements(target.nodeName);
    // 禁用输入事件的触发的快捷键逻辑
    if (!isInputElement) {
      const key = getHotkey(e);
@@ -379,6 +395,56 @@ export function useDnd({
    }
  };

+  const onContextMenu = (event: React.MouseEvent) => {
+    if (designer.showContextMenu) {
+      designer.toggleContextMenu(false);
+    }
+    // 按下其他按键时，视为用户有特殊操作，此时不展示右键菜单
+    if (event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) {
+      return;
+    }
+    const { clientX, clientY } = event;
+    let target;
+    if (workspace.selectSource.isSelected) {
+      for (const item of workspace.selectSource.selected) {
+        if (
+          // 如果选中的节点是页面根节点（无 parents），则忽略
+          item.parents?.length &&
+          item.bounding &&
+          clientX >= item.bounding.left &&
+          clientX <= item.bounding.left + item.bounding.width &&
+          clientY >= item.bounding.top &&
+          clientY <= item.bounding.top + item.bounding.height
+        ) {
+          // 右键坐标已经在当前选中组件的选区内，直接展示右键菜单
+          target = item;
+          break;
+        }
+      }
+    }
+    // 否则，根据右键的元素选中最接近的组件
+    if (!target) {
+      target = sandboxQuery.getDraggableParentsData(event.target as HTMLElement, true);
+    }
+    if (target && target.id) {
+      if (!target.parents?.length) {
+        // 页面根节点不展示右键菜单操作
+        return;
+      }
+      // 右键时高亮选中当前元素
+      // 以防之前选区有多个元素，即便已经是选中的元素也再选中一遍
+      event.preventDefault();
+      selectSource.select(target);
+      // 在下一周期再展示右键菜单，以让先前的菜单先被销毁
+      requestAnimationFrame(() => {
+        designer.toggleContextMenu(true, {
+          clientX,
+          clientY,
+        });
+      });
+    }
+  };
+
  const onTango = (e: CustomEvent) => {
    const detail = e.detail || {};

@@ -406,6 +472,13 @@ export function useDnd({
        // 打开智能向导弹窗
        designer.toggleSmartWizard(true);
        break;
+      case 'addComponent':
+        // 打开添加组件面板
+        designer.toggleAddComponentPopover(true, {
+          clientX: (e.detail.meta as any).clientX + 40,
+          clientY: (e.detail.meta as any).clientY + 110,
+        });
+        break;
      default:
        break;
    }
@@ -421,6 +494,7 @@ export function useDnd({
    onDragEnd,
    onScroll,
    onKeyDown,
+    onContextMenu,
    onTango,
    ...selectHandler,
  };
@@ -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={{
@@ -7,6 +7,20 @@ import {
  parseDndId,
 } from '@music163/tango-helpers';

+// -----------
+// CONSTANTS
+// -----------
+
+export const DRAG_GHOST_ID = 'dragGhost';
+
+export const DESIGN_SANDBOX_ID = 'sandbox-container';
+
+export const PREVIEW_SANDBOX_ID = 'preview-sandbox-container';
+
+// -----------
+// DOM Helpers
+// -----------
+
 export function buildQueryBySlotId(id: string) {
  return `[${SLOT.dnd}="${id}"]`;
 }
@@ -15,8 +29,6 @@ export function getElement(selector: Selector) {
  return $(selector).get(0);
 }

-export const DRAG_GHOST_ID = 'dragGhost';
-
 export const getDragGhostElement = () => getElement(`#${DRAG_GHOST_ID}`);

 export function setElementStyle(selector: Selector, style: any) {
@@ -75,7 +87,7 @@ export function getElementData(
  const display = getElementCSSDisplay(element);
  return {
    id: dnd.id,
-    codeId: dnd.index,
+    codeId: dnd.codeId,
    name: dnd.component || element.tagName.toLowerCase(),
    filename: dnd.filename,
    bounding,
@@ -8,6 +8,7 @@ import { useSandboxQuery } from '../context';
 import { DndQuery, useDnd } from '../dnd';
 import { Navigator } from './navigator';
 import { SelectionToolsProps } from '../simulator/selection';
+import { DESIGN_SANDBOX_ID, PREVIEW_SANDBOX_ID } from '../helpers';

 interface ISandboxEventHandlerConfig {
  sandboxQuery?: DndQuery;
@@ -48,6 +49,10 @@ export interface CombinedSandboxRef {

 const LANDING_PAGE_PATH = '/__background_landing_page__';

+function fixRouterMode(routerType: string): CodeSandboxProps['routerMode'] {
+  return routerType === 'hash' ? 'hash' : undefined;
+}
+
 function useSandbox({
  isPreview: isPreviewProp,
  configFormatter,
@@ -62,6 +67,7 @@ function useSandbox({
  const workspace = useWorkspace();
  const designer = useDesigner();
  const sandboxQuery = useSandboxQuery();
+
  const isPreview = isPreviewProp ?? designer.isPreview;

  // 组件不一定会立即刷新，因此 isActive 需要实时获取
@@ -103,23 +109,26 @@ function useSandbox({
  // 根据当前 workspace 状态与组件传入的状态是否一致，控制是否需要切换到空白路由
  const display = isActive ? 'block' : 'none';
  const routePath = isActive ? startRoute || workspace.activeRoute : LANDING_PAGE_PATH;
+  const routerMode = fixRouterMode(workspace.appEntryModule?.routerType);

  const sandboxProps = isPreview
    ? {
        files,
        eventHandlers: pick(dndHandlers, ['onTango']),
        onMessage,
+        onLoad,
        display,
        startRoute: routePath,
-        onLoad,
+        routerMode,
      }
    : {
        files,
        eventHandlers: dndHandlers as any,
        onMessage,
+        onLoad,
        display,
        startRoute: routePath,
-        onLoad,
+        routerMode,
      };

  return sandboxProps;
@@ -140,7 +149,7 @@ const PreviewSandbox = observer(

    return (
      <Box display={display} width="100%" height="100%">
-        <CodeSandbox ref={ref} iframeId="preview-sandbox-container" {...sandboxProps} {...rest} />
+        <CodeSandbox ref={ref} iframeId={PREVIEW_SANDBOX_ID} {...sandboxProps} {...rest} />
      </Box>
    );
  },
@@ -188,7 +197,7 @@ const DesignSandbox = observer(

    return (
      <Box display={display} width="100%" height="100%">
-        <CodeSandbox ref={ref} {...sandboxProps} {...rest} />
+        <CodeSandbox ref={ref} iframeId={DESIGN_SANDBOX_ID} {...sandboxProps} {...rest} />
      </Box>
    );
  },
@@ -1,3 +1,5 @@
 export * from './copy-node';
 export * from './delete-node';
+export * from './more-actions';
+export * from './select-parent-node';
 export * from './view-source';
@@ -0,0 +1,16 @@
+import React from 'react';
+import { observer } from '@music163/tango-context';
+import { SelectAction } from '@music163/tango-ui';
+import { MoreOutlined } from '@ant-design/icons';
+import { Dropdown } from 'antd';
+import { ContextMenu } from '../components';
+
+export const MoreActionsAction = observer(() => {
+  return (
+    <Dropdown placement="bottomRight" overlay={<ContextMenu showParents />}>
+      <SelectAction tooltip="更多">
+        <MoreOutlined />
+      </SelectAction>
+    </Dropdown>
+  );
+});
@@ -0,0 +1,18 @@
+import React from 'react';
+import { useWorkspace, observer } from '@music163/tango-context';
+import { IconFont, SelectAction } from '@music163/tango-ui';
+
+export const SelectParentNodeAction = observer(() => {
+  const workspace = useWorkspace();
+
+  return (
+    <SelectAction
+      tooltip="选中父节点"
+      onClick={() => {
+        workspace.selectSource.selectParent();
+      }}
+    >
+      <IconFont type="icon-huiche1" rotate={90} />
+    </SelectAction>
+  );
+});
@@ -2,9 +2,8 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { Box } from 'coral-system';
 // @ts-ignore
 import { toJSON } from 'cssjson';
-import { InputNumber, Space } from 'antd';
+import { InputNumber, Slider, Space } from 'antd';
 import { FormItemComponentProps } from '@music163/tango-setting-form';
-import { SliderSetter } from './number-setter';
 import {
  BgSetter,
  BorderSetter,
@@ -16,10 +15,11 @@ import {
  FlexJustifyContentSetter,
  SpacingSetter,
 } from './style-setter';
+import { wrapCode } from '@music163/tango-helpers';

 const getRawCssValue = (value: string) => {
-  if (value && value.startsWith('{css`')) {
-    return value.split('').slice(5, -2).join('').trim();
+  if (value && value.startsWith('{{css`')) {
+    return value.split('').slice(6, -3).join('').trim();
  }
  return value;
 };
@@ -51,7 +51,8 @@ const cssPattern = (string: string, name: string): any => {
 };

 /**
- * 废弃
+ * coral-system css prop
+ * @example 提供 css-in-js 代码支持，例如 css`background: red;`
 * @deprecated 使用嵌套属性代替
 */
 export function CssSetter(props: FormItemComponentProps<string>) {
@@ -82,16 +83,14 @@ export function CssSetter(props: FormItemComponentProps<string>) {

  useEffect(() => {
    if (contentValue || contentValue === '') {
-      onChange(`{css\`${contentValue}\`}`, {
-        // relatedImports: ['']
-      });
+      onChange(wrapCode(`css\`${contentValue}\``));
    }
  }, [contentValue]);

  const isFlex = ['flex', 'inline-flex'].includes(display);

  return (
-    <Box>
+    <Box bg="fill1">
      <ItemGroup title="布局方式">
        <DisplaySetter
          value={toJSON(contentValue).attributes?.display}
@@ -204,12 +203,12 @@ export function CssSetter(props: FormItemComponentProps<string>) {
        />
      </ItemGroup>
      <ItemGroup title="透明度">
-        <SliderSetter
+        <Slider
          max={1}
          min={0}
          step={0.1}
          value={toJSON(contentValue).attributes?.opacity || 1}
-          onChange={(v) => {
+          onChange={(v: number) => {
            changeStyle(v, 'opacity');
          }}
        />
@@ -25,13 +25,18 @@ const style = {
  width: '100%',
 };

-export function DateSetter({ value, onChange, format = 'YYYY-MM-DD', ...rest }: FormItemComponentProps<string>) {
+export function DateSetter({
+  value,
+  onChange,
+  format = 'YYYY-MM-DD',
+  ...rest
+}: FormItemComponentProps<string>) {
  return (
    <DatePicker
      {...rest}
      format={format}
      style={style}
-      value={toMoment(value, format)}
+      value={value ? toMoment(value, format) : undefined}
      onChange={(val, str) => {
        onChange && onChange(str);
      }}
@@ -46,7 +51,12 @@ function toMoments(value: string[], format: string): moment.Moment[] {
  return [];
 }

-export function DateRangeSetter({ value, onChange, format = 'YYYY-MM-DD', ...rest }: FormItemComponentProps<string[]>) {
+export function DateRangeSetter({
+  value,
+  onChange,
+  format = 'YYYY-MM-DD',
+  ...rest
+}: FormItemComponentProps<string[]>) {
  return (
    <DatePicker.RangePicker
      {...rest}
@@ -60,7 +70,12 @@ export function DateRangeSetter({ value, onChange, format = 'YYYY-MM-DD', ...res
  );
 }

-export function TimeSetter({ value, onChange, format = 'HH:mm:ss', ...rest }: FormItemComponentProps<string>) {
+export function TimeSetter({
+  value,
+  onChange,
+  format = 'HH:mm:ss',
+  ...rest
+}: FormItemComponentProps<string>) {
  return (
    <TimePicker
      {...rest}
@@ -74,7 +89,12 @@ export function TimeSetter({ value, onChange, format = 'HH:mm:ss', ...rest }: Fo
  );
 }

-export function TimeRangeSetter({ value, onChange, format = 'HH:mm:ss', ...rest }: FormItemComponentProps<string[]>) {
+export function TimeRangeSetter({
+  value,
+  onChange,
+  format = 'HH:mm:ss',
+  ...rest
+}: FormItemComponentProps<string[]>) {
  return (
    <TimePicker.RangePicker
      {...rest}
@@ -1,10 +1,12 @@
-import React, { useCallback, useState } from 'react';
-import { css, Box } from 'coral-system';
+import React, { useCallback, useMemo, useState } from 'react';
+import { css, Box, Text } from 'coral-system';
 import { AutoComplete } from 'antd';
 import { ActionSelect } from '@music163/tango-ui';
 import { FormItemComponentProps } from '@music163/tango-setting-form';
 import { useWorkspace, useWorkspaceData } from '@music163/tango-context';
-import { ExpressionModal, getWrappedExpressionCode } from './expression-setter';
+import { wrapCode } from '@music163/tango-helpers';
+import { ExpressionPopover } from './expression-setter';
+import { value2code } from '@music163/tango-core';

 enum EventAction {
  NoAction = 'noAction',
@@ -23,15 +25,6 @@ const wrapperStyle = css`
  }
 `;

-const options = [
-  { label: '无动作', value: EventAction.NoAction },
-  { label: '打印事件', value: EventAction.ConsoleLog },
-  { label: '绑定 JS 表达式', value: EventAction.BindExpression },
-  { label: '打开页面', value: EventAction.NavigateTo },
-  { label: '打开弹窗', value: EventAction.OpenModal },
-  { label: '关闭弹窗', value: EventAction.CloseModal },
-];
-
 export type EventSetterProps = FormItemComponentProps<string>;

 /**
@@ -41,20 +34,47 @@ export function EventSetter(props: EventSetterProps) {
  const { value, onChange, modalTitle } = props;
  const [type, setType] = useState<EventAction>(); // 事件类型
  const [temp, setTemp] = useState(''); // 二级暂存值
-  const [expModalVisible, setExpModalVisible] = useState(false); // 弹窗是否显示
-
  const { actionVariables, routeOptions } = useWorkspaceData();
  const workspace = useWorkspace();
  const modalOptions = workspace.activeViewModule.listModals() || [];

+  const code = value2code(value);
+
  const handleChange = useCallback<FormItemComponentProps['onChange']>(
    (nextValue: any, ...args) => {
-      const ret = getWrappedExpressionCode(nextValue);
-      if (ret !== value) {
-        onChange(ret, ...args);
+      if (!nextValue) {
+        onChange(undefined);
+      }
+      if (nextValue !== code) {
+        onChange(wrapCode(nextValue), ...args);
      }
    },
-    [onChange, value],
+    [onChange, code],
+  );
+  const options = useMemo(
+    () => [
+      { label: '无动作', value: EventAction.NoAction },
+      { label: '打印事件', value: EventAction.ConsoleLog },
+      {
+        label: (
+          <ExpressionPopover
+            title={modalTitle}
+            value={value}
+            onOk={(nextValue) => {
+              handleChange(nextValue);
+            }}
+            dataSource={actionVariables}
+          >
+            <Text>绑定 JS 表达式</Text>
+          </ExpressionPopover>
+        ),
+        value: EventAction.BindExpression,
+      },
+      { label: '打开页面', value: EventAction.NavigateTo },
+      { label: '打开弹窗', value: EventAction.OpenModal },
+      { label: '关闭弹窗', value: EventAction.CloseModal },
+    ],
+    [modalTitle, value, actionVariables, handleChange],
  );

  const onAction = (key: string) => {
@@ -62,9 +82,6 @@ export function EventSetter(props: EventSetterProps) {
    setTemp(''); // 重置二级选项值

    switch (key) {
-      case EventAction.BindExpression:
-        setExpModalVisible(true);
-        break;
      case EventAction.ConsoleLog:
        handleChange('(...args) => console.log(...args)');
        break;
@@ -76,23 +93,11 @@ export function EventSetter(props: EventSetterProps) {
    }
  };

-  const actionText = getActionText(type, temp, value);
-  const inputValue = value;
+  const actionText = getActionText(type, temp, code);

  return (
    <Box css={wrapperStyle}>
      <ActionSelect options={options} onSelect={onAction} text={actionText} />
-      <ExpressionModal
-        title={modalTitle}
-        value={inputValue}
-        visible={expModalVisible}
-        onCancel={() => setExpModalVisible(false)}
-        onOk={(nextValue) => {
-          setExpModalVisible(false);
-          handleChange(nextValue);
-        }}
-        dataSource={actionVariables}
-      />
      {type === EventAction.NavigateTo && (
        <AutoComplete
          placeholder="选择或输入页面路由"
@@ -142,12 +147,12 @@ const handlerMap = {
  [EventAction.NavigateTo]: 'navigateTo',
 };

-function getActionText(type: EventAction, temp: string, value: any) {
+function getActionText(type: EventAction, temp: string, fallbackCode: string) {
  let text;
  if (handlerMap[type]) {
    text = getExpressionValue(type, temp);
-  } else if (value) {
-    text = value;
+  } else if (fallbackCode) {
+    text = fallbackCode;
  }
  text = text || '请选择';
  return text;
@@ -156,6 +161,6 @@ function getActionText(type: EventAction, temp: string, value: any) {
 function getExpressionValue(type: EventAction, value = '') {
  const handler = handlerMap[type];
  if (handler) {
-    return `{() => tango.${handler}("${value}")}`;
+    return `() => tango.${handler}("${value}")`;
  }
 }
@@ -1,26 +0,0 @@
-import React from 'react';
-import { SingleMonacoEditor } from '@music163/tango-ui';
-import { Box } from 'coral-system';
-import { FormItemComponentProps } from '@music163/tango-setting-form/src/form-item';
-
-export function ExpressionSetter({ value, onChange }: FormItemComponentProps) {
-  return (
-    <Box height="120px" border="solid" borderColor="line.normal" borderRadius="s">
-      <SingleMonacoEditor
-        defaultValue={value}
-        onBlur={(newValue) => {
-          if (newValue !== value) {
-            onChange(`{${newValue}}`);
-          }
-        }}
-        language="javascript"
-        options={{
-          lineNumbers: 'off',
-          minimap: {
-            enabled: false,
-          },
-        }}
-      />
-    </Box>
-  );
-}
@@ -1,26 +1,10 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { Box, Text, css } from 'coral-system';
-import { Dropdown, Modal } from 'antd';
-import {
-  isValidExpressionCode,
-  isWrappedByExpressionContainer,
-  value2expressionCode,
-} from '@music163/tango-core';
-import {
-  getVariableContent,
-  noop,
-  useBoolean,
-  getValue,
-  IVariableTreeNode,
-} from '@music163/tango-helpers';
-import {
-  CloseCircleFilled,
-  ExpandAltOutlined,
-  InfoOutlined,
-  KeyOutlined,
-  MenuOutlined,
-} from '@ant-design/icons';
-import { Panel, InputCode, Action, CodeOutlined } from '@music163/tango-ui';
+import { Dropdown, Button } from 'antd';
+import { isValidExpressionCode } from '@music163/tango-core';
+import { getValue, IVariableTreeNode, noop } from '@music163/tango-helpers';
+import { CloseCircleFilled, MenuOutlined } from '@ant-design/icons';
+import { Panel, InputCode, Action, DragPanel, PopOutOutlined } from '@music163/tango-ui';
 import { FormItemComponentProps } from '@music163/tango-setting-form';
 import { useWorkspace, useWorkspaceData } from '@music163/tango-context';
 import { VariableTree } from '../components';
@@ -29,42 +13,19 @@ import { CODE_TEMPLATES } from '../helpers';
 import { shapeServiceValues } from '../sidebar/datasource-panel/interface-config';

 export const expressionValueValidate = (value: string) => {
-  if (isWrappedByExpressionContainer(value)) {
-    const exp = getVariableContent(value);
-    if (!isValidExpressionCode(exp)) {
-      return '表达式存在语法错误！';
-    }
+  if (!isValidExpressionCode(value)) {
+    return '表达式存在语法错误！';
  }
 };

 export const jsonValueValidate = (value: string) => {
-  if (isWrappedByExpressionContainer(value)) {
-    const jsonStr = getVariableContent(value);
-    try {
-      JSON.parse(jsonStr);
-    } catch (e) {
-      return '不是合法的 JSON 语法！';
-    }
+  try {
+    JSON.parse(value);
+  } catch (e) {
+    return '不是合法的 JSON 语法！';
  }
 };

-/**
- * 返回 `{}` 包裹后的表达式代码
- * @param code 原始代码
- * @returns
- */
-export function getWrappedExpressionCode(code: string) {
-  let ret;
-  if (!code) {
-    // do nothing
-  } else if (isWrappedByExpressionContainer(code)) {
-    ret = code;
-  } else {
-    ret = `{${code}}`;
-  }
-  return ret;
-}
-
 const suffixStyle = css`
  display: flex;
  align-items: center;
@@ -90,23 +51,19 @@ export function ExpressionSetter(props: ExpressionSetterProps) {
    modalTitle,
    modalTip,
    autoCompleteOptions,
-    placeholder = '输入JS代码',
+    placeholder = '在这里输入JS代码',
    value: valueProp,
    status,
    allowClear = true,
    newStoreTemplate,
    showOptionsDropDown = true,
  } = props;
-  const [visible, { on, off }] = useBoolean();
-  const [inputValue, setInputValue] = useState(() => {
-    return value2expressionCode(valueProp);
-  });
-  const sandbox = useSandboxQuery();
-  const evaluateContext = sandbox.window;
+  // const codeValue = getCodeOfWrappedCode(valueProp);
+  const [inputValue, setInputValue] = useState(valueProp);

  // when receive new value, sync state
  useEffect(() => {
-    setInputValue(value2expressionCode(valueProp));
+    setInputValue(valueProp);
  }, [valueProp]);

  const change = useCallback(
@@ -114,18 +71,14 @@ export function ExpressionSetter(props: ExpressionSetterProps) {
      if (code === valueProp) {
        return;
      }
-
-      const ret = getWrappedExpressionCode(code);
-
-      if (ret === valueProp) {
-        return;
-      }
-
-      onChange(ret);
+      onChange(code);
    },
    [valueProp, onChange],
  );

+  const sandbox = useSandboxQuery();
+  const evaluateContext = sandbox.window;
+
  return (
    <Box className="ExpressionSetter">
      {/* 同时支持下拉框展示 */}
@@ -161,11 +114,16 @@ export function ExpressionSetter(props: ExpressionSetterProps) {
                <Action tooltip="使用预设代码片段" icon={<MenuOutlined />} size="small" />
              </Dropdown>
            )}
-            <Action
-              tooltip="打开表达式变量选择面板"
-              icon={<ExpandAltOutlined />}
-              onClick={on}
-              size="small"
+            <ExpressionPopover
+              title={modalTitle}
+              subTitle={modalTip}
+              placeholder={placeholder}
+              autoCompleteOptions={autoCompleteOptions}
+              newStoreTemplate={newStoreTemplate}
+              value={inputValue}
+              onOk={(value) => {
+                change(value);
+              }}
            />
          </Box>
        }
@@ -179,32 +137,16 @@ export function ExpressionSetter(props: ExpressionSetterProps) {
        status={status}
        maxHeight="200px"
      />
-      <ExpressionModal
-        title={modalTitle}
-        subTitle={modalTip}
-        placeholder={placeholder}
-        autoCompleteOptions={autoCompleteOptions}
-        newStoreTemplate={newStoreTemplate}
-        visible={visible}
-        value={inputValue}
-        onCancel={() => off()}
-        onOk={(value) => {
-          change(value);
-          off();
-        }}
-      />
    </Box>
  );
 }

-export interface ExpressionModalProps {
+export interface ExpressionPopoverProps {
  title?: string;
  subTitle?: string;
  placeholder?: string;
-  visible?: boolean;
  defaultValue?: string;
  value?: string;
-  onCancel?: () => void;
  onOk?: (value: string) => void;
  dataSource?: IVariableTreeNode[];
  autoCompleteOptions?: string[];
@@ -212,25 +154,27 @@ export interface ExpressionModalProps {
   * 新建 store 的模板代码
   */
  newStoreTemplate?: string;
+  children?: React.ReactNode;
 }

-export function ExpressionModal({
+export function ExpressionPopover({
  title,
  subTitle,
  placeholder,
-  visible,
-  onCancel = noop,
  onOk = noop,
  defaultValue,
  value,
  dataSource,
  autoCompleteOptions,
  newStoreTemplate = CODE_TEMPLATES.newStoreTemplate,
-}: ExpressionModalProps) {
+  children,
+}: ExpressionPopoverProps) {
  const [exp, setExp] = useState(value ?? defaultValue);
  const [error, setError] = useState('');
  const workspace = useWorkspace();

+  const selectNodePath = workspace.selectSource.selected[0]?.codeId;
+
  const { expressionVariables } = useWorkspaceData();
  const serviceModules = Object.keys(workspace.serviceModules).map((key) => ({
    label: key === 'index' ? '默认模块' : key,
@@ -249,109 +193,159 @@ export function ExpressionModal({
  }, [value]);

  return (
-    <Modal
-      closable={false}
-      destroyOnClose
-      width="60%"
-      open={visible}
-      onCancel={onCancel}
-      onOk={() => {
-        onOk(exp);
-      }}
-      bodyStyle={{
-        padding: 0,
+    <DragPanel
+      width={700}
+      height={615}
+      resizeable
+      title={`使用代码设置 ${selectNodePath} 组件的${title}`}
+      onOpenChange={(open) => {
+        if (!open) {
+          setExp(undefined);
+          setError('');
+        }
      }}
+      body={
+        <Box display="flex" flexDirection="column">
+          <Box p="m">
+            <InputCode
+              shape="inset"
+              minHeight="56px"
+              maxHeight="160px"
+              value={exp}
+              placeholder={placeholder}
+              onChange={handleExpInputChange}
+              onBlur={() => {
+                if (exp) {
+                  setError(expressionValueValidate(exp));
+                }
+              }}
+              autoCompleteContext={evaluateContext}
+              autoCompleteOptions={autoCompleteOptions}
+            />
+            {error ? (
+              <Text color="red" fontSize="12px" as="p">
+                出错了！输入的表达式存在语法错误，请修改后再提交！
+              </Text>
+            ) : null}
+            {subTitle && (
+              <Text fontSize="12px" color="text3" as="p">
+                {subTitle}
+              </Text>
+            )}
+            <Text fontSize="12px" color="text3" as="p">
+              说明：你可以在上面的代码输入框里输入常规的 javascript 代码，还可以直接使用 jsx
+              代码，但需要符合该属性的接受值定义。
+            </Text>
+          </Box>
+          <Panel
+            title="从变量列表中选中"
+            shape="solid"
+            borderLeft="0"
+            borderRight="0"
+            flex={1}
+            bodyProps={{
+              style: {
+                overflow: 'hidden',
+              },
+            }}
+          >
+            <VariableTree
+              height="100%"
+              showViewButton
+              dataSource={dataSource || expressionVariables}
+              appContext={sandbox?.window['tango']}
+              getStoreNames={() => Object.keys(workspace.storeModules)}
+              serviceModules={serviceModules}
+              getServiceData={(serviceKey) => {
+                const data = workspace.getServiceFunction(serviceKey);
+                return {
+                  name: data.name,
+                  moduleName: data.moduleName,
+                  method: 'get',
+                  ...data.config,
+                };
+              }}
+              onSelect={(node) => {
+                if (!node.key) {
+                  return;
+                }
+                if (node.key.split('.').length < 2) {
+                  return;
+                }
+                let str;
+                if (/^(stores|services)\./.test(node.key)) {
+                  str = `tango.${node.key.replaceAll('.', '?.')}`;
+                } else {
+                  str = `${node.key}`;
+                }
+                setExp(str);
+              }}
+              onAddStoreVariable={(storeName, data) => {
+                workspace.addStoreState(storeName, data.name, data.initialValue);
+              }}
+              onUpdateStoreVariable={(variableKey, code) => {
+                workspace.updateStoreVariable(variableKey, code);
+              }}
+              onAddStore={(storeName) => {
+                workspace.addStoreFile(storeName, newStoreTemplate);
+              }}
+              onRemoveStoreVariable={(variableKey) => {
+                workspace.removeStoreVariable(variableKey);
+              }}
+              onRemoveService={(serviceKey) => {
+                workspace.removeServiceFunction(serviceKey);
+              }}
+              onAddService={(data) => {
+                const { name, moduleName, ...payload } = shapeServiceValues(data);
+                workspace.addServiceFunction(name, payload, moduleName);
+              }}
+              onUpdateService={(data) => {
+                const { name, moduleName, ...payload } = shapeServiceValues(data);
+                workspace.updateServiceFunction(name, payload, moduleName);
+              }}
+              getPreviewValue={(node) => {
+                if (!node || !node.key) {
+                  return;
+                }
+
+                if (node.type === 'function') {
+                  return;
+                }
+
+                return getValue(evaluateContext['tango'], node.key);
+              }}
+            />
+          </Panel>
+        </Box>
+      }
+      footer={(close) => (
+        <Box display="flex" width="100%" justifyContent="flex-end" gap="5px">
+          <Button
+            type="primary"
+            size="small"
+            onClick={() => {
+              if (!error) {
+                onOk(exp);
+                close();
+              }
+            }}
+          >
+            确认
+          </Button>
+          <Button size="small" onClick={close}>
+            取消
+          </Button>
+        </Box>
+      )}
    >
-      <Panel title={`将 ${title} 设置为引用变量或自定义表达式`} subTitle={subTitle} shape="solid">
-        <InputCode
-          shape="inset"
-          minHeight="56px"
-          maxHeight="200px"
-          value={exp}
-          placeholder={placeholder}
-          onChange={handleExpInputChange}
-          onBlur={() => {
-            setError(expressionValueValidate(exp));
-          }}
-          autoCompleteContext={evaluateContext}
-          autoCompleteOptions={autoCompleteOptions}
+      {children || (
+        <Action
+          tooltip="弹出代码编辑和变量选择面板"
+          tooltipProps={{ placement: 'topLeft' }}
+          icon={<PopOutOutlined />}
+          size="small"
        />
-        {error ? <Text color="red">输入的表达式存在语法错误，请修改后再提交！</Text> : null}
-      </Panel>
-      <Panel
-        title="从变量列表中选中"
-        shape="solid"
-        borderTop="0"
-        overflow="hidden"
-        bodyProps={{ overflow: 'hidden' }}
-      >
-        <VariableTree
-          height={380}
-          showViewButton
-          dataSource={dataSource || expressionVariables}
-          appContext={sandbox?.window['tango']}
-          getStoreNames={() => Object.keys(workspace.storeModules)}
-          serviceModules={serviceModules}
-          getServiceData={(serviceKey) => {
-            const data = workspace.getServiceFunction(serviceKey);
-            return {
-              name: data.name,
-              moduleName: data.moduleName,
-              method: 'get',
-              ...data.config,
-            };
-          }}
-          onSelect={(node) => {
-            if (!node.key) {
-              return;
-            }
-            if (node.key.split('.').length < 2) {
-              return;
-            }
-            let str;
-            if (/^(stores|services)\./.test(node.key)) {
-              str = `{tango.${node.key.replaceAll('.', '?.')}}`;
-            } else {
-              str = `{${node.key}}`;
-            }
-            setExp(str);
-          }}
-          onAddStoreVariable={(storeName, data) => {
-            workspace.addStoreState(storeName, data.name, data.initialValue);
-          }}
-          onUpdateStoreVariable={(variableKey, code) => {
-            workspace.updateStoreVariable(variableKey, code);
-          }}
-          onAddStore={(storeName) => {
-            workspace.addStoreFile(storeName, newStoreTemplate);
-          }}
-          onRemoveStoreVariable={(variableKey) => {
-            workspace.removeStoreVariable(variableKey);
-          }}
-          onRemoveService={(serviceKey) => {
-            workspace.removeServiceFunction(serviceKey);
-          }}
-          onAddService={(data) => {
-            const { name, moduleName, ...payload } = shapeServiceValues(data);
-            workspace.addServiceFunction(name, payload, moduleName);
-          }}
-          onUpdateService={(data) => {
-            const { name, moduleName, ...payload } = shapeServiceValues(data);
-            workspace.updateServiceFunction(name, payload, moduleName);
-          }}
-          getPreviewValue={(node) => {
-            if (!node || !node.key) {
-              return;
-            }
-
-            if (node.type === 'function') {
-              return;
-            }
-
-            return getValue(evaluateContext['tango'], node.key);
-          }}
-        />
-      </Panel>
-    </Modal>
+      )}
+    </DragPanel>
  );
 }
@@ -25,44 +25,46 @@ import {
  FlexAlignItemsSetter,
  FlexDirectionSetter,
 } from './style-setter';
-import { BoolSetter } from './bool-setter';
 import { ChoiceSetter } from './choice-setter';
-import { NumberSetter, SliderSetter } from './number-setter';
-import { TextAreaSetter, TextSetter } from './text-setter';
+import { isValidExpressionCode } from '@music163/tango-core';

-const setters: IFormItemCreateOptions[] = [
+const codeValidate: IFormItemCreateOptions['validate'] = (value, field) => {
+  if (!value) return;
+  const rawCode = field.detail.rawCode;
+  if (!rawCode) return;
+  return isValidExpressionCode(rawCode) ? '' : '请输入合法的 Javascript 代码片段';
+};
+
+const jsonValidate: IFormItemCreateOptions['validate'] = (value, field) => {
+  if (!value) return;
+  try {
+    JSON.parse(field.detail.rawCode);
+    return;
+  } catch (e) {
+    return '请输入合法的 JSON 字符串';
+  }
+};
+
+export const BUILT_IN_SETTERS: IFormItemCreateOptions[] = [
  {
-    name: 'boolSetter',
-    component: BoolSetter,
-  },
-  {
-    name: 'choiceSetter',
-    component: ChoiceSetter,
-  },
-  {
-    name: 'expSetter',
-    alias: ['expressionSetter'],
+    name: 'codeSetter',
+    alias: ['expSetter', 'expressionSetter'],
    component: ExpressionSetter,
+    type: 'code',
+    validate: codeValidate,
  },
  {
-    name: 'numberSetter',
-    component: NumberSetter,
-  },
-  {
-    name: 'textSetter',
-    component: TextSetter,
-  },
-  { name: 'textAreaSetter', component: TextAreaSetter },
-  {
-    name: 'sliderSetter',
-    component: SliderSetter,
+    name: 'radioGroupSetter',
+    alias: ['choiceSetter'],
+    component: ChoiceSetter,
  },
  {
    name: 'actionListSetter',
    component: ActionListSetter,
  },
  {
-    name: 'columnSetter',
+    name: 'tableColumnsSetter',
+    alias: ['columnSetter'], // 兼容
    component: ColumnSetter,
  },
  {
@@ -94,18 +96,17 @@ const setters: IFormItemCreateOptions[] = [
    alias: ['actionSetter', 'functionSetter', 'callbackSetter'],
    component: EventSetter,
  },
-  {
-    name: 'expressionSetter',
-    alias: ['expSetter'],
-    component: ExpressionSetter,
-  },
  {
    name: 'jsonSetter',
    component: JSONSetter,
+    type: 'code',
+    validate: jsonValidate,
  },
  {
    name: 'jsxSetter',
    component: JsxSetter,
+    type: 'code',
+    validate: codeValidate,
  },
  {
    name: 'listSetter',
@@ -120,20 +121,26 @@ const setters: IFormItemCreateOptions[] = [
    component: OptionSetter,
  },
  {
-    name: 'pickerSetter',
+    name: 'selectSetter',
+    alias: ['pickerSetter'],
    component: PickerSetter,
  },
  {
    name: 'renderPropsSetter',
    component: RenderSetter,
+    type: 'code',
+    validate: codeValidate,
  },
  {
    name: 'tableCellSetter',
    component: TableCellSetter,
+    type: 'code',
  },
  {
    name: 'tableExpandableSetter',
    component: TableExpandableSetter,
+    type: 'code',
+    validate: codeValidate,
  },
  {
    name: 'routerSetter',
@@ -169,5 +176,5 @@ const setters: IFormItemCreateOptions[] = [
 ];

 export function registerBuiltinSetters() {
-  setters.forEach(register);
+  BUILT_IN_SETTERS.forEach(register);
 }
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Box } from 'coral-system';
 import { SingleMonacoEditor } from '@music163/tango-ui';
 import { FormItemComponentProps } from '@music163/tango-setting-form';
@@ -6,14 +6,18 @@ import { FormItemComponentProps } from '@music163/tango-setting-form';
 /**
 * JSON Setter
 */
-export function JSONSetter({ value, onChange }: FormItemComponentProps) {
+export function JSONSetter({ value: valueProp, onChange }: FormItemComponentProps) {
+  const [value, setValue] = useState(valueProp || '');
  return (
    <Box height="120px" border="solid" borderColor="line.normal" borderRadius="s">
      <SingleMonacoEditor
        defaultValue={value}
+        onChange={(newValue) => {
+          setValue(newValue);
+        }}
        onBlur={(newValue) => {
          if (newValue !== value) {
-            onChange(`{${newValue}}`);
+            onChange(newValue);
          }
        }}
        language="json"
@@ -1,5 +1,4 @@
-import React from 'react';
-import { isPlainString } from '@music163/tango-helpers';
+import React, { useEffect, useState } from 'react';
 import { ActionSelect, InputCode } from '@music163/tango-ui';
 import { FormItemComponentProps } from '@music163/tango-setting-form';
 import { Box } from 'coral-system';
@@ -54,24 +53,36 @@ const defaultGetTemplate = (key: string) => {
 */
 export function JsxSetter(props: JsxSetterProps) {
  const { showInput, getTemplate = defaultGetTemplate, value, onChange } = props;
+  const [inputValue, setInputValue] = useState(value);
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
  return (
    <Box>
      <ActionSelect
        showInput={showInput}
-        defaultInputValue={isPlainString(value) ? value : undefined}
+        defaultInputValue={value}
        options={options}
        text="设置此区域为"
        onInputChange={onChange}
        onSelect={(key) => {
          const [tpl, deps] = getTemplate(key);
          if (tpl) {
-            onChange(`{${tpl}}`, { relatedImports: deps });
+            onChange(tpl, { relatedImports: deps });
          } else {
            onChange(undefined);
          }
        }}
      />
-      {value && <InputCode value={value} readOnly editable={false} />}
+      {value && (
+        <InputCode
+          value={value}
+          onChange={(val) => setInputValue(val)}
+          onBlur={() => {
+            onChange(inputValue);
+          }}
+        />
+      )}
    </Box>
  );
 }
@@ -234,6 +234,7 @@ function NewOptionForm({ fields = [], initialValues = {}, onSubmit }: NewOptionF
          label={item.label}
          name={item.name}
          required={item.required}
+          rules={[{ required: item.required }]}
          valuePropName={item.valuePropName}
          extra={item.extra}
          style={{
@@ -260,7 +261,7 @@ interface ListSetterProps extends FormItemComponentProps<any[]> {
  addBtnText?: string;
  getListItemKey?: (item: any) => React.Key;
  renderItem?: (item: any) => React.ReactNode;
-};
+}

 const defaultListItemFormFields: ListSetterItemProps['formFields'] = [
  { label: 'key', name: 'key', required: true },
@@ -2,7 +2,6 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { ActionSelect, InputCode } from '@music163/tango-ui';
 import { FormItemComponentProps } from '@music163/tango-setting-form';
 import { Box } from 'coral-system';
-import { value2expressionCode } from '@music163/tango-core';

 interface IRenderOption {
  label: string;
@@ -17,6 +16,11 @@ export interface RenderSetterProps {
  fallbackOption?: IRenderOption;
 }

+const defaultOptions: IRenderOption[] = [
+  { label: '取消自定义', value: '' },
+  { label: '自定义渲染', value: 'Box', render: '() => <Box></Box>' },
+];
+
 /**
 * Render Props Setters
 */
@@ -24,14 +28,12 @@ export function RenderSetter({
  value,
  onChange,
  text = '自定义渲染为',
-  options = [],
+  options = defaultOptions,
  fallbackOption,
 }: FormItemComponentProps & RenderSetterProps) {
-  const [inputValue, setInputValue] = useState(() => {
-    return value2expressionCode(value);
-  });
+  const [inputValue, setInputValue] = useState(value || '');
  useEffect(() => {
-    setInputValue(value2expressionCode(value));
+    setInputValue(value);
  }, [value]);

  const optionsMap = useMemo(() => {
@@ -67,17 +69,22 @@ export function RenderSetter({
 }

 const getRender = (content: string, type?: 'tableCell' | 'tableExpandable') => {
+  let code;
  switch (type) {
    case 'tableCell':
-      return `{(value, record, index) => ${content}}`;
+      code = `(value, record, index) => ${content}`;
+      break;
    case 'tableExpandable':
-      return `{{
-      expandedRowRender: (record) =>  ${content},
-      rowExpandable: (record) => true
-    }}`;
+      code = `{
+        expandedRowRender: (record) =>  ${content},
+        rowExpandable: (record) => true
+      }`;
+      break;
    default:
-      return `{() => ${content}}`;
+      code = `() => ${content}`;
+      break;
  }
+  return code;
 };

 const tableCellOptions: RenderSetterProps['options'] = [
@@ -122,6 +129,7 @@ export function TableCellSetter(props: FormItemComponentProps) {
  return <RenderSetter options={tableCellOptions} {...props} />;
 }

+// FIXME: 应该直接用 props 嵌套的模式
 export function TableExpandableSetter(props: FormItemComponentProps) {
  return <RenderSetter options={tableExpandableOptions} text="配置表格可展开行" {...props} />;
 }
@@ -7,8 +7,6 @@ import { BgColorsOutlined, EyeInvisibleOutlined, FileImageOutlined } from '@ant-
 import { SingleMonacoEditor, LineSolidOutlined, LineDashedOutlined } from '@music163/tango-ui';
 import { FormItemComponentProps } from '@music163/tango-setting-form';
 import { ChoiceSetter } from './choice-setter';
-import { TextSetter } from './text-setter';
-// import { ImageSetter } from './image-setter';

 function getRawCssValue(value: string) {
  if (value && value.startsWith('{css`')) {
@@ -17,12 +15,13 @@ function getRawCssValue(value: string) {
  return value;
 }

+// TODO: style object setter
+
 /**
 * 不稳定，暂不推荐使用
 */
 export function CssCodeSetter({ value, onChange }: FormItemComponentProps<string>) {
  const contentValue = getRawCssValue(value);
-  // TODO: relatedImports
  return (
    <Popover
      placement="leftBottom"
@@ -34,9 +33,7 @@ export function CssCodeSetter({ value, onChange }: FormItemComponentProps<string
            value={contentValue}
            onBlur={(newCode) => {
              if (newCode != contentValue) {
-                onChange(`{css\`${newCode}\`}`, {
-                  // relatedImports: ['']
-                });
+                onChange(`{css\`${newCode}\`}`, {});
              }
            }}
          />
@@ -239,9 +236,10 @@ export function BgSetter({ value, onChange }: FormItemComponentProps<string>) {
      <Box mt="m">
        {mode === 'color' && <ColorSetter value={value} onChange={onChange} />}
        {mode === 'image' && (
-          <TextSetter
+          <Input
            value={getImageUrl(value)}
-            onChange={(imgUrl) => {
+            onChange={(e) => {
+              const imgUrl = e.target.value;
              onChange(imgUrl ? `url(${imgUrl})` : undefined);
            }}
          />
@@ -2,11 +2,15 @@ import React from 'react';
 import { Box } from 'coral-system';
 import { SettingForm, FormModel, SettingFormProps } from '@music163/tango-setting-form';
 import { Panel } from '@music163/tango-ui';
-import { clone } from '@music163/tango-helpers';
+import { clone, parseDndId } from '@music163/tango-helpers';
 import { observer, useDesigner, useWorkspace } from '@music163/tango-context';
 import { registerBuiltinSetters } from './setters';

-registerBuiltinSetters();
+let registered = false;
+if (!registered) {
+  registerBuiltinSetters();
+  registered = true;
+}

 export interface SettingPanelProps extends SettingFormProps {
  title?: React.ReactNode;
@@ -103,6 +107,11 @@ export const SettingPanel = observer((props: SettingPanelProps) => {
          prototype={prototype}
          showIdentifier={{
            identifierKey: 'tid',
+            getIdentifier: () => {
+              // 直接拿当前的虚拟 id 作为 tid
+              const { codeId } = parseDndId(workspace.selectSource.first.id);
+              return codeId;
+            },
          }}
          {...props}
        />
@@ -1,21 +1,29 @@
 import React, { useMemo, useState } from 'react';
 import { Box, Grid, Text } from 'coral-system';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import {
  IComponentPrototype,
+  MenuDataType,
+  MenuValueType,
+  createContext,
  logger,
-  PartialRecord,
  upperCamelCase,
 } from '@music163/tango-helpers';
 import { CollapsePanel, IconFont, Search, Tabs } from '@music163/tango-ui';
 import { observer, useWorkspace } from '@music163/tango-context';
 import { QuestionCircleOutlined } from '@ant-design/icons';
-import { Button, Empty, Spin, Popover } from 'antd';
+import { Button, Empty, Spin, Popover, TabsProps } from 'antd';
 import { getDragGhostElement } from '../helpers';

-type MenuKeyType = 'common' | 'atom' | 'snippet' | 'bizComp' | 'localComp';
-type MenuValueType = Array<{ title: string; items: string[] }>;
-export type MenuDataType = PartialRecord<MenuKeyType, MenuValueType>;
+type IComponentsPanelContext = {
+  isScope: boolean;
+  onItemSelect: (name: string) => void;
+  layout: 'grid' | 'line';
+};
+
+const [ComponentsPanelProvider, usePanelContext] = createContext<IComponentsPanelContext>({
+  name: 'ComponentsPanelContext',
+});

 export interface ComponentsPanelProps {
  /**
@@ -36,6 +44,26 @@ export interface ComponentsPanelProps {
   * @returns
   */
  getBizCompName?: (name: string) => string;
+  /**
+   * 是否局部模式 (快捷添加组件面板中使用)
+   */
+  isScope?: boolean;
+  /**
+   * 组件选中回调
+   */
+  onItemSelect?: (name: string) => void;
+  /**
+   * 自定义样式
+   */
+  style?: React.CSSProperties;
+  /**
+   * tabProps
+   */
+  tabProps?: TabsProps;
+  /**
+   * 布局模式，默认网格布局
+   */
+  layout?: 'grid' | 'line';
 }

 const localeMap = {
@@ -72,10 +100,15 @@ export function useFlatMenuData<T>(menuData: T) {

 export const ComponentsPanel = observer(
  ({
+    isScope = false,
    menuData = emptyMenuData,
    showBizComps = true,
    getBizCompName = upperCamelCase,
    loading = false,
+    style,
+    tabProps,
+    onItemSelect,
+    layout = 'grid',
  }: ComponentsPanelProps) => {
    const [keyword, setKeyword] = useState<string>('');
    const allList = useFlatMenuData<MenuDataType>(menuData);
@@ -109,22 +142,44 @@ export const ComponentsPanel = observer(
        children: <MaterialList data={localCompData} />,
      });
    }
+
    const contentNode =
      tabs.length === 1 ? (
        tabs[0].children
      ) : (
-        <Tabs centered isTabBarSticky tabBarStickyOffset={48} items={tabs} />
+        <Tabs
+          size={isScope ? 'small' : 'middle'}
+          centered
+          isTabBarSticky
+          tabBarStickyOffset={48}
+          items={tabs}
+          {...tabProps}
+        />
      );

    return (
-      <Box className="ComponentsView" overflowY="auto">
-        <Box px="l" py="m" position="sticky" top="0" zIndex={1} bg="white">
-          <Search placeholder="搜索物料" onChange={setKeyword} />
+      <ComponentsPanelProvider
+        value={{
+          isScope,
+          onItemSelect,
+          layout,
+        }}
+      >
+        <Box className="ComponentsView" overflowY="auto" style={style}>
+          <Box px="l" py="m" position="sticky" top="0" zIndex={3} bg="white">
+            <Search
+              style={{
+                borderRadius: '4px',
+              }}
+              placeholder="搜索物料"
+              onChange={setKeyword}
+            />
+          </Box>
+          <Spin spinning={loading} tip="正在加载物料列表...">
+            {!keyword ? contentNode : <MaterialList data={allList} filterKeyword={keyword} />}
+          </Spin>
        </Box>
-        <Spin spinning={loading} tip="正在加载物料列表...">
-          {!keyword ? contentNode : <MaterialList data={allList} filterKeyword={keyword} />}
-        </Spin>
-      </Box>
+      </ComponentsPanelProvider>
    );
  },
 );
@@ -146,6 +201,9 @@ interface MaterialListProps {

 function MaterialList({ data, filterKeyword, type = 'common' }: MaterialListProps) {
  const workspace = useWorkspace();
+  const { layout } = usePanelContext();
+  const isGrid = layout === 'grid';
+
  return (
    <Box className="ComponentsViewList">
      {data.map((cate) => {
@@ -166,15 +224,21 @@ function MaterialList({ data, filterKeyword, type = 'common' }: MaterialListProp
              title={cate.title}
              borderBottom="solid"
              borderColor="line.normal"
+              showBottomBorder={false}
+              bodyProps={{
+                padding: isGrid ? '4px 12px 12px' : '0',
+              }}
            >
              {!items.length && (
                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="没有匹配到任何组件" />
              )}
              <Grid
-                columns={type === 'localComp' ? 1 : 2}
+                templateColumns={isGrid ? 'repeat(auto-fit,minmax(55px,1fr))' : '1fr'}
                spacing="1px"
                bg="background.normal"
                padding="0"
+                gap={isGrid ? '12px 8px' : '0'}
+                backgroundColor="white"
              >
                {items.map((item) => {
                  const prototype = workspace.componentPrototypes.get(item);
@@ -202,9 +266,8 @@ const StyledCommonGridItem = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
-  justify-content: center;
-  padding: 8px;
-  cursor: move;
+  justify-content: start;
+  cursor: ${(props) => (props.draggable ? 'grab' : 'pointer')};
  text-align: center;
  color: var(--tango-colors-text-body);
  background-color: #fff;
@@ -213,7 +276,23 @@ const StyledCommonGridItem = styled.div`
  white-space: nowrap;

  .material-icon {
-    font-size: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 36px;
+    background: #f9f9f9;
+    border-radius: 4px;
+    border: 1px solid #ebebeb;
+    width: 100%;
+    height: 52px;
+    position: relative;
+    transition: 0.15s ease-in-out;
+    transition-property: transform;
+    will-change: transform;
+    img {
+      width: unset;
+      height: 85%;
+    }
  }

  .info {
@@ -225,19 +304,13 @@ const StyledCommonGridItem = styled.div`

  .anticon-question-circle {
    display: none;
+    font-size: 13px;
    position: absolute;
-    top: 8px;
-    right: 8px;
-  }
-
-  img {
-    height: 40px;
-    width: 40px;
+    top: 4px;
+    right: 4px;
  }

  &:hover {
-    box-shadow: 0 0 10px rgb(0 0 0 / 10%);
-
    > span {
      color: var(--tango-colors-brand);
    }
@@ -245,11 +318,26 @@ const StyledCommonGridItem = styled.div`
    .anticon-question-circle {
      display: inline-block;
    }
+    .material-icon {
+      border-color: #c7c7c7;
+    }
+  }
+`;
+
+const GridLineItemStyle = css`
+  cursor: pointer;
+  user-select: none;
+
+  &:hover {
+    background-color: var(--tango-colors-fill2);
  }
 `;

 function MaterialGrid({ data }: MaterialProps) {
  const workspace = useWorkspace();
+  const { isScope, onItemSelect, layout } = usePanelContext();
+
+  const isLine = layout === 'line';

  const handleDragStart = (e: React.DragEvent) => {
    e.dataTransfer.effectAllowed = 'move';
@@ -266,28 +354,92 @@ function MaterialGrid({ data }: MaterialProps) {
    workspace.dragSource.clear();
  };

+  const handleSelect = () => {
+    onItemSelect?.(data.name);
+  };
+
  const icon = data.icon || 'icon-placeholder';

+  const iconNode = icon.startsWith('icon-') ? (
+    <IconFont className="material-icon" type={data.icon || 'icon-placeholder'} />
+  ) : (
+    <Box className="material-icon">
+      <img src={icon} alt={data.name} />
+    </Box>
+  );
+
+  if (isLine) {
+    return (
+      <Box
+        key={data.name}
+        display="flex"
+        columnGap="m"
+        px="l"
+        py="m"
+        fontSize="12px"
+        css={GridLineItemStyle}
+        onClick={handleSelect}
+      >
+        <Box
+          p="m"
+          fontSize="32px"
+          width="46px"
+          height="46px"
+          background="fill1"
+          border="1px solid"
+          borderRadius="4px"
+          borderColor="line2"
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+        >
+          {iconNode}
+        </Box>
+        <Box flex={1}>
+          <Box fontWeight="500" display="flex" justifyContent="space-between">
+            <Text flex={1}>{data.title}</Text>
+            {data.docs ? (
+              <Popover
+                zIndex={9999}
+                placement="right"
+                title={data.title}
+                content={<CommonMaterialInfoBox docs={data.docs} />}
+              >
+                <QuestionCircleOutlined />
+              </Popover>
+            ) : null}
+          </Box>
+          <Box color="text2" fontStyle="italic">
+            {data.help ?? data.title}
+          </Box>
+        </Box>
+      </Box>
+    );
+  }
+
  return (
    <StyledCommonGridItem
-      draggable
+      key={data.name}
+      draggable={!isScope}
      data-name={data.name}
      onDragStart={handleDragStart}
      onDragEnd={handleDragEnd}
+      onClick={handleSelect}
    >
-      {icon.startsWith('icon-') ? (
-        <IconFont className="material-icon" type={data.icon || 'icon-placeholder'} />
-      ) : (
-        <img src={icon} alt={data.name} />
-      )}
-      <Text fontSize="12px" lineHeight="1.5">
-        {data.title}
+      {iconNode}
+      <Text fontSize="12px" marginTop="4px">
+        {data.title ?? data.name}
      </Text>
-      <Text fontSize="12px" color="gray.50">
+      <Text fontSize="10px" color="gray.50">
        {data.name}
      </Text>
      {data.docs || data.help ? (
-        <Popover placement="right" title={data.title} content={<CommonMaterialInfoBox {...data} />}>
+        <Popover
+          zIndex={9999}
+          placement="right"
+          title={data.title}
+          content={<CommonMaterialInfoBox {...data} />}
+        >
          <QuestionCircleOutlined />
        </Popover>
      ) : null}
@@ -295,7 +447,7 @@ function MaterialGrid({ data }: MaterialProps) {
  );
 }

-function CommonMaterialInfoBox({ help, docs }: IComponentPrototype) {
+function CommonMaterialInfoBox({ help, docs }: Pick<IComponentPrototype, 'help' | 'docs'>) {
  return (
    <Box maxWidth={300}>
      {!!help && <Box mb="m">{help}</Box>}
@@ -1,8 +1,6 @@
 import React from 'react';
 import { observer, useWorkspace, useWorkspaceData } from '@music163/tango-context';
 import { Box } from 'coral-system';
-import { getVariableContent } from '@music163/tango-helpers';
-import { isWrappedByExpressionContainer } from '@music163/tango-core';
 import { VariableTree } from '../../components';
 import { useSandboxQuery } from '../../context';

@@ -10,10 +8,6 @@ import { useSandboxQuery } from '../../context';
 export function shapeServiceValues(val: any) {
  const shapeValues = { ...val };
  delete shapeValues.type;
-  // 兼容旧版，如果 formatter 包裹了 {} 则删掉首尾
-  if (shapeValues.formatter && isWrappedByExpressionContainer(shapeValues.formatter)) {
-    shapeValues.formatter = getVariableContent(shapeValues.formatter);
-  }
  return shapeValues;
 }

@@ -68,17 +68,6 @@ export const DependencyPanel = observer(
      [dependencies, baseDependencies, bizDependencies, packages, packageNames],
    );

-    // 业务组件依赖
-    const bizDeps = useMemo(
-      () =>
-        bizDependencies?.map((name: string) => ({
-          name,
-          version: dependencies[name] ?? packages?.[name]?.version,
-          package: packages?.[name],
-        })) || [],
-      [bizDependencies, dependencies, packages],
-    );
-
    // 基础包
    const baseDeps = useMemo(
      () =>
@@ -8,6 +8,7 @@ import { DropMethod, ITangoViewNodeData } from '@music163/tango-core';
 import { noop, parseDndId } from '@music163/tango-helpers';
 import { useSandboxQuery } from '../../context';
 import { buildQueryBySlotId } from '../../helpers';
+import { ContextMenu } from '../../components';

 export interface ComponentsTreeProps {
  /**
@@ -81,8 +82,8 @@ const OutlineTreeNode: React.FC<{ node: ITangoViewNodeData } & ComponentsTreePro
    const sandboxQuery = useSandboxQuery();
    const [visible, setVisible] = useState(true);
    const nodeLabel = (() => {
-      const { index } = parseDndId(node.id);
-      return index;
+      const { codeId } = parseDndId(node.id);
+      return codeId;
    })();
    const componentPrototype = workspace.componentPrototypes.get(node.component);
    const icon = componentPrototype?.icon || 'icon-placeholder';
@@ -143,6 +144,18 @@ export const ComponentsTree: React.FC<ComponentsTreeProps> = observer(
    const file = workspace.activeViewModule;
    const nodesTree = (file?.nodesTree ?? []) as ITangoViewNodeData[];
    const [expandedKeys, setExpandedKeys] = useState(getNodeKeys(nodesTree));
+    const [contextMenuOpen, setContextMenuOpen] = useState(false);
+
+    const handleSelect = (keys: React.Key[]) => {
+      const slotKey = keys?.[0] as string;
+      const data = sandboxQuery.getDraggableParentsData(buildQueryBySlotId(slotKey), true);
+      if (data && data.id) {
+        workspace.selectSource.select(data);
+      }
+      // export selected
+      onSelect(slotKey);
+      setSelectedKeys(keys);
+    };

    useEffect(() => {
      setSelectedKeys(workspace.selectSource.selected.map((item) => item.id));
@@ -164,64 +177,83 @@ export const ComponentsTree: React.FC<ComponentsTreeProps> = observer(

    return (
      <Box css={outlineStyle}>
-        <Tree
-          selectedKeys={selectedKeys as string[]}
-          fieldNames={filedNames}
-          treeData={nodesTree as any[]}
-          onSelect={(keys) => {
-            const slotKey = keys?.[0] as string;
-            const data = sandboxQuery.getDraggableParentsData(buildQueryBySlotId(slotKey), true);
-            if (data && data.id) {
-              workspace.selectSource.select(data);
+        <Dropdown
+          placement="bottomLeft"
+          trigger={['contextMenu']}
+          open={contextMenuOpen}
+          onOpenChange={(val) => {
+            if (!val) {
+              setContextMenuOpen(val);
            }
-            // export selected
-            onSelect(slotKey);
-            setSelectedKeys(keys);
          }}
-          blockNode
-          expandedKeys={expandedKeys}
-          onExpand={(keys) => setExpandedKeys(keys as string[])}
-          draggable
-          onDragStart={(data) => {
-            const prototype = workspace.componentPrototypes.get(data.node.component);
-            if (!prototype) {
-              return;
-            }
-            const { canDrag } = prototype.rules || {};
-            if (canDrag && !canDrag()) {
-              return;
-            }
-            workspace.dragSource.set({
-              id: data.node.id,
-              name: data.node.component,
-            });
-          }}
-          onDrop={(data) => {
-            const dropKey = data.node.key as string;
-            let method;
-            if (data.dropToGap) {
-              // 插入节点的后面
-              method = DropMethod.InsertAfter;
-            } else {
-              // 作为第一个子节点
-              method = DropMethod.InsertFirstChild;
-            }
-            workspace.dragSource.dropTarget.set(
-              {
-                id: dropKey,
-              },
-              method,
-            );
-            workspace.dropNode();
-          }}
-          titleRender={(node) => (
-            <OutlineTreeNode
-              actionItems={actionItems}
-              showToggleVisibleIcon={showToggleVisibleIcon}
-              node={node}
-            />
-          )}
-        />
+          overlay={<ContextMenu onClick={() => setContextMenuOpen(false)} showParents={false} />}
+        >
+          <Tree
+            selectedKeys={selectedKeys as string[]}
+            fieldNames={filedNames}
+            treeData={nodesTree as any[]}
+            onSelect={handleSelect}
+            blockNode
+            expandedKeys={expandedKeys}
+            onExpand={(keys) => setExpandedKeys(keys as string[])}
+            draggable
+            onDragStart={(data) => {
+              const prototype = workspace.componentPrototypes.get(data.node.component);
+              if (!prototype) {
+                return;
+              }
+              const { canDrag } = prototype.rules || {};
+              if (canDrag && !canDrag()) {
+                return;
+              }
+              workspace.dragSource.set({
+                id: data.node.id,
+                name: data.node.component,
+              });
+            }}
+            onDrop={(data) => {
+              const dropKey = data.node.key as string;
+              let method;
+              if (data.dropToGap) {
+                // 插入节点的后面
+                method = DropMethod.InsertAfter;
+              } else {
+                // 作为第一个子节点
+                method = DropMethod.InsertFirstChild;
+              }
+              workspace.dragSource.dropTarget.set(
+                {
+                  id: dropKey,
+                },
+                method,
+              );
+              workspace.dropNode();
+            }}
+            onRightClick={({ event, node }) => {
+              // 按下其他按键时，视为用户有特殊操作，此时不展示右键菜单
+              if (event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) {
+                setContextMenuOpen(false);
+                return;
+              }
+              // 顶层的 Page 组件不展示右键菜单
+              if (node.component === 'Page') {
+                setContextMenuOpen(false);
+                return;
+              }
+              event.preventDefault();
+              // 由于部分操作是基于 selectSource 实现的，因此右键时默认选中当前项
+              handleSelect([node.key]);
+              setContextMenuOpen(true);
+            }}
+            titleRender={(node) => (
+              <OutlineTreeNode
+                actionItems={actionItems}
+                showToggleVisibleIcon={showToggleVisibleIcon}
+                node={node}
+              />
+            )}
+          />
+        </Dropdown>
      </Box>
    );
  },
@@ -30,6 +30,7 @@ export const StateTree = observer(() => {
    'pageStore',
    'services',
    'config',
+    'routeData',
  ]);
  const callback = () => {
    forceUpdate();
@@ -74,7 +74,7 @@ export interface SidebarPanelItemProps
  widgetProps?: object;
 }

-function BaseSidebarPanel({ panelWidth: defaultPanelWidth = 280, footer, children }: SidebarProps) {
+function BaseSidebarPanel({ panelWidth: defaultPanelWidth = 266, footer, children }: SidebarProps) {
  const designer = useDesigner();

  const items = useMemo(() => {
@@ -29,7 +29,7 @@ export const VariablePanel = observer(
            新建模型
          </Button>
        }
-        bodyProps={{ p: 'm' }}
+        bodyProps={{ p: 'm', height: '100%' }}
      >
        {isAdd ? (
          <AddStoreForm
@@ -42,6 +42,7 @@ export const VariablePanel = observer(
          />
        ) : (
          <VariableTree
+            height="100%"
            defaultValueDetailMode="define"
            dataSource={storeVariables}
            onAddStoreVariable={(storeName, data) => {
@@ -1,13 +1,13 @@
 import React from 'react';
 import styled, { css, keyframes } from 'styled-components';
 import { Box, Button, Group, HTMLCoralProps } from 'coral-system';
-import { Dropdown, DropdownProps, Tooltip } from 'antd';
+import { Tooltip } from 'antd';
 import { HolderOutlined, InfoCircleOutlined, PlusOutlined } from '@ant-design/icons';
 import { ISelectedItemData, isString, noop } from '@music163/tango-helpers';
 import { observer, useDesigner, useWorkspace } from '@music163/tango-context';
-import { IconFont } from '@music163/tango-ui';
 import { getDragGhostElement } from '../helpers';
 import { getWidget } from '../widgets';
+import { ComponentsPopover } from '../components';

 /**
 * 选择辅助工具的对齐方式
@@ -24,7 +24,15 @@ export interface SelectionToolsProps {
 }

 export const SelectionTools = observer(
-  ({ actions: actionsProp = ['viewSource', 'copyNode', 'deleteNode'] }: SelectionToolsProps) => {
+  ({
+    actions: actionsProp = [
+      'selectParentNode',
+      'viewSource',
+      'copyNode',
+      'deleteNode',
+      'moreActions',
+    ],
+  }: SelectionToolsProps) => {
    const workspace = useWorkspace();
    const selectSource = workspace.selectSource;
    const actions = actionsProp.map((item) => {
@@ -79,13 +87,6 @@ const bottomAddSiblingBtnStyle = css`
  pointer-events: auto;
 `;

-interface IInsertedData {
-  name: string;
-  label: string;
-  icon: string;
-  description: string;
-}
-
 export interface SelectionBoxProps {
  /**
   * 是否显示操作按钮
@@ -117,36 +118,6 @@ function SelectionBox({ showActions, actions, data }: SelectionBoxProps) {
  const prototype = workspace.componentPrototypes.get(data.name);
  const isPage = prototype?.type === 'page';

-  // 如果声明了 childrenName，提供快捷子元素创建入口
-  let insertedList: IInsertedData[] = [];
-  if (prototype?.childrenName) {
-    const names = Array.isArray(prototype?.childrenName)
-      ? prototype.childrenName
-      : [prototype.childrenName];
-    insertedList = names.map((child) => {
-      const proto = workspace.componentPrototypes.get(child);
-      return {
-        name: child,
-        label: proto?.title || child,
-        icon: proto?.icon,
-        description: proto?.help,
-      };
-    });
-  }
-
-  let siblingList: IInsertedData[] = [];
-  if (prototype?.siblingNames) {
-    siblingList = prototype.siblingNames?.map((item) => {
-      const proto = workspace.componentPrototypes.get(item);
-      return {
-        name: item,
-        label: proto?.title || item,
-        icon: proto?.icon,
-        description: proto?.help,
-      };
-    });
-  }
-
  let selectionHelpersAlign: SelectionHelperAlignType = 'top-right';
  if (data.bounding) {
    if (data.bounding.left + data.bounding.width + boundingOffset < designer.viewport.width) {
@@ -159,6 +130,7 @@ function SelectionBox({ showActions, actions, data }: SelectionBoxProps) {
  }

  const isFromCurrentFile = data.filename === workspace.activeViewFile;
+  const selectedNodeName = workspace.selectSource?.selected?.[0]?.codeId ?? '未选中';

  let style: React.CSSProperties;
  if (data.bounding) {
@@ -183,30 +155,18 @@ function SelectionBox({ showActions, actions, data }: SelectionBoxProps) {
      css={selectionBoxStyle}
      style={style}
    >
-      {siblingList.length > 0 ? (
+      {!isPage ? (
        <>
-          <InsertedDropdown
-            title="在当前节点的前方添加兄弟节点"
-            options={siblingList}
-            onSelect={(name) => {
-              workspace.insertBeforeSelectedNode(name);
-            }}
-          >
-            <Tooltip title="在当前节点的前方添加兄弟节点">
+          <ComponentsPopover type="before">
+            <Tooltip title={`在 ${selectedNodeName} 的前方添加兄弟节点`}>
              <SelectionHelper icon={<PlusOutlined />} css={topAddSiblingBtnStyle} />
            </Tooltip>
-          </InsertedDropdown>
-          <InsertedDropdown
-            title="在当前节点的后方添加兄弟节点"
-            options={siblingList}
-            onSelect={(name) => {
-              workspace.insertAfterSelectedNode(name);
-            }}
-          >
-            <Tooltip title="在当前节点的后方添加兄弟节点">
+          </ComponentsPopover>
+          <ComponentsPopover type="after">
+            <Tooltip title={`在 ${selectedNodeName} 的后方添加兄弟节点`}>
              <SelectionHelper icon={<PlusOutlined />} css={bottomAddSiblingBtnStyle} />
            </Tooltip>
-          </InsertedDropdown>
+          </ComponentsPopover>
        </>
      ) : null}
      {showActions && (
@@ -246,17 +206,12 @@ function SelectionBox({ showActions, actions, data }: SelectionBoxProps) {
            }
          />
          <SelectionToolSet>{!isPage && actions}</SelectionToolSet>
-          {insertedList.length > 0 && (
-            <InsertedDropdown
-              options={insertedList}
-              onSelect={(name) => {
-                workspace.insertToSelectedNode(name);
-              }}
-            >
+          {isFromCurrentFile && prototype?.hasChildren && (
+            <ComponentsPopover>
              <Tooltip title="快捷添加子元素">
                <SelectionHelper icon={<PlusOutlined />} />
              </Tooltip>
-            </InsertedDropdown>
+            </ComponentsPopover>
          )}
        </SelectionHelpers>
      )}
@@ -429,105 +384,3 @@ const NameSelector = ({ label, parents = [], onSelect = noop }: NameSelectorProp
    </NameSelectorWrapper>
  );
 };
-
-interface InsertedDropdownProps extends DropdownProps {
-  title?: string;
-  options?: IInsertedData[];
-  onSelect?: (name: string) => void;
-}
-
-function InsertedDropdown({
-  title = '为当前节点添加子元素',
-  options = [],
-  onSelect,
-  ...props
-}: InsertedDropdownProps) {
-  return (
-    <Dropdown
-      trigger={['click']}
-      dropdownRender={() => {
-        return (
-          <Box
-            bg="#FFF"
-            borderRadius="m"
-            boxShadow="lowDown"
-            border="solid"
-            borderColor="line2"
-            overflow="hidden"
-            width="320px"
-          >
-            <Box px="l" py="m" color="text2">
-              {title}
-            </Box>
-            <Box maxHeight={360} overflowY="auto">
-              {options.map((item) => (
-                <InsertedItem
-                  key={item.name}
-                  label={item.label}
-                  icon={item.icon}
-                  description={item.description || '暂无组件描述'}
-                  onClick={() => onSelect?.(item.name)}
-                />
-              ))}
-            </Box>
-          </Box>
-        );
-      }}
-      {...props}
-    />
-  );
-}
-
-const insertedItemStyle = css`
-  cursor: pointer;
-  user-select: none;
-
-  &:hover {
-    background-color: var(--tango-colors-fill2);
-  }
-`;
-
-function InsertedItem({
-  label,
-  icon,
-  description,
-  ...rest
-}: HTMLCoralProps<'div'> & Omit<IInsertedData, 'name'>) {
-  let iconNode;
-  if (!icon) {
-    iconNode = <IconFont className="material-icon" type="icon-placeholder" />;
-  } else if (icon.startsWith('icon-')) {
-    iconNode = <IconFont className="material-icon" type={icon} />;
-  } else {
-    iconNode = <img src={icon} alt={label} />;
-  }
-
-  return (
-    <Box
-      display="flex"
-      columnGap="m"
-      px="l"
-      py="m"
-      fontSize="12px"
-      css={insertedItemStyle}
-      {...rest}
-    >
-      <Box
-        size="35px"
-        fontSize="32px"
-        background="fill1"
-        border="1px solid"
-        borderColor="line2"
-        display="flex"
-        alignItems="center"
-        justifyContent="center"
-      >
-        {iconNode}
-      </Box>
-      <Box>
-        <Box fontWeight="500">{label}</Box>
-        <Box color="text2">{description}</Box>
-      </Box>
-    </Box>
-  );
-}
@@ -1,20 +1,61 @@
 import React, { useEffect, useRef } from 'react';
 import cx from 'classnames';
 import { Box, HTMLCoralProps } from 'coral-system';
-import { useDesigner, useWorkspace } from '@music163/tango-context';
+import { observer, useDesigner, useWorkspace } from '@music163/tango-context';
 import { Ghost } from './ghost';
 import { useSandboxQuery } from '../context';
 import { SelectionTools, SelectionToolsProps } from './selection';
 import { InsertionPrompt } from './insertion';
 import { DraggingMask } from './mask';
+import { Dropdown, DropdownProps } from 'antd';
+import { ContextMenu } from '../components';

 export interface ViewportProps extends HTMLCoralProps<'div'> {
  selectionTools?: SelectionToolsProps['actions'];
 }

+const ViewportContextMenu = observer((props: DropdownProps) => {
+  const designer = useDesigner();
+
+  // FIXME: 考虑优化定位实现？
+  // 由于 iframe 内的 contextmenu 事件无法被外层感知到，所以无法自动展示与定位
+  // 而手动指定 align 会干扰 contextmenu 溢出时的位置处理，会定位到完全相反的位置
+  // 因此，给 dropdown 单独提供一个定位容器，将其定位至 iframe 内触发点击的位置
+  // 并在每次 contextmenu 隐藏时销毁 dropdown，让 dropdown 能重新获取新的位置
+  return (
+    designer.showContextMenu && (
+      <Dropdown
+        autoAdjustOverflow
+        trigger={['contextMenu']}
+        placement="bottomLeft"
+        open
+        onOpenChange={(val) => {
+          if (!val) {
+            designer.toggleContextMenu(val);
+          }
+        }}
+        overlay={<ContextMenu onClick={() => designer.toggleContextMenu(false)} showParents />}
+        {...props}
+      >
+        <Box
+          width={0}
+          height={0}
+          position="absolute"
+          style={{
+            left: designer.contextMenuPosition.clientX,
+            top: designer.contextMenuPosition.clientY,
+            pointerEvents: 'none',
+          }}
+        />
+      </Dropdown>
+    )
+  );
+});
+
 export function Viewport({ selectionTools, children, className, ...rest }: ViewportProps) {
  return (
    <Box position="relative" height="100%" className={cx('Viewport', className)} {...rest}>
+      <ViewportContextMenu />
      <ViewportBody>{children}</ViewportBody>
      <div className="AuxTools">
        <SelectionTools actions={selectionTools} />
@@ -17,7 +17,7 @@ export const PreviewTool = observer(() => {
          designer.setActiveView('design');
        }
      }}
-      tooltip="预览"
+      tooltip={designer.isPreview ? '切换到设计模式' : '切换到预览模式'}
    >
      <EyeOutlined />
    </ToggleButton>
@@ -60,7 +60,7 @@ export function Toolbar({ children }: ToolbarProps) {
      <Group display="flex" alignItems="center" gap="m">
        {centerTools}
      </Group>
-      <Group display="flex" alignItems="center" gap="m">
+      <Group display="flex" alignItems="center" justifyContent="flex-end" gap="m">
        {rightTools}
      </Group>
    </Box>
@@ -13,14 +13,26 @@ import {
  OutlinePanel,
  VariablePanel,
 } from './sidebar';
-import { CopyNodeAction, DeleteNodeAction, ViewSourceAction } from './selection-menu';
+import {
+  CopyNodeAction,
+  DeleteNodeAction,
+  ViewSourceAction,
+  SelectParentNodeAction,
+  MoreActionsAction,
+} from './selection-menu';
+import {
+  CopyNodeContextAction,
+  DeleteNodeContextAction,
+  PasteNodeContextAction,
+  ViewSourceContextAction,
+} from './context-menu';

 const widgets = {};

 export function registerWidget(key: string, component: React.ComponentType<any>) {
-  if (!/^(toolbar|sidebar|selectionMenu)\.[a-zA-z]+$/.test(key)) {
+  if (!/^(toolbar|sidebar|selectionMenu|contextMenu)\.[a-zA-z]+$/.test(key)) {
    throw new Error(
-      `Invalid widget key(${key}), should start with toolbar, sidebar, or selection-menu`,
+      `Invalid widget key(${key}), should start with toolbar, sidebar, contextMenu or selectionMenu`,
    );
  }
  setValue(widgets, key, component);
@@ -48,4 +60,11 @@ registerWidget('sidebar.dataSource', DataSourcePanel);

 registerWidget('selectionMenu.copyNode', CopyNodeAction);
 registerWidget('selectionMenu.deleteNode', DeleteNodeAction);
+registerWidget('selectionMenu.selectParentNode', SelectParentNodeAction);
 registerWidget('selectionMenu.viewSource', ViewSourceAction);
+registerWidget('selectionMenu.moreActions', MoreActionsAction);
+
+registerWidget('contextMenu.viewSource', ViewSourceContextAction);
+registerWidget('contextMenu.copyNode', CopyNodeContextAction);
+registerWidget('contextMenu.pasteNode', PasteNodeContextAction);
+registerWidget('contextMenu.deleteNode', DeleteNodeContextAction);
@@ -2,6 +2,7 @@ import React from 'react';
 import { Box } from 'coral-system';
 import { observer, useDesigner } from '@music163/tango-context';
 import { DesignerViewType } from '@music163/tango-core';
+import { ComponentsPopover } from './components';

 export interface WorkspaceViewProps {
  /**
@@ -27,6 +28,8 @@ export const WorkspaceView = observer((props: WorkspaceViewProps) => {
      position="relative"
    >
      {children}
+      {/* 添加组件弹层 */}
+      {display === 'block' && <ComponentsPopover type="inner" isControlled />}
    </Box>
  );
 });
@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [1.2.0](https://github.com/netease/tango/compare/@music163/tango-helpers@1.1.1...@music163/tango-helpers@1.2.0) (2024-06-03)
+
+### Features
+
+- add context menu ([#161](https://github.com/netease/tango/issues/161)) ([28040fc](https://github.com/netease/tango/commit/28040fc00604339a40ad3216b76baf7de93a13e0))
+
+## [1.1.1](https://github.com/netease/tango/compare/@music163/tango-helpers@1.1.0...@music163/tango-helpers@1.1.1) (2024-05-21)
+
+### Bug Fixes
+
+- support add components with popover ([#155](https://github.com/netease/tango/issues/155)) ([f17ccbb](https://github.com/netease/tango/commit/f17ccbb7f645f8047ecd96d9f3f2185048a3b726))
+
+# [1.1.0](https://github.com/netease/tango/compare/@music163/tango-helpers@1.0.0...@music163/tango-helpers@1.1.0) (2024-05-17)
+
+### Bug Fixes
+
+- parse module with module alias ([#147](https://github.com/netease/tango/issues/147)) ([56d0877](https://github.com/netease/tango/commit/56d0877507b0138877eac6f36db288147b43c7d9))
+- support quick set tid in SettingForm ([#151](https://github.com/netease/tango/issues/151)) ([1fc22a4](https://github.com/netease/tango/commit/1fc22a4535a8bdc12a018a41ebd5ab908fc46817))
+
+### Features
+
+- refactor parse attribute value ([#149](https://github.com/netease/tango/issues/149)) ([ffaa276](https://github.com/netease/tango/commit/ffaa276b5c205ed962d37e2fdb358a703f8fad01))
+
 # [1.0.0-alpha.7](https://github.com/netease/tango/compare/@music163/tango-helpers@1.0.0-alpha.6...@music163/tango-helpers@1.0.0-alpha.7) (2024-04-22)

 ### Bug Fixes
@@ -1,6 +1,6 @@
 {
  "name": "@music163/tango-helpers",
-  "version": "1.0.0-alpha.7",
+  "version": "1.2.0",
  "description": "Shared types, helpers, and hooks of tango-apps",
  "keywords": [
    "shared",
@@ -68,3 +68,10 @@ export function isServiceVariablePath(key: string) {
 export function isInTangoDesignMode() {
  return !!(window as any).__TANGO_DESIGNER__;
 }
+
+/**
+ * 是否是 macOS 或 iOS like 设备
+ */
+export function isApplePlatform() {
+  return /Mac|iPhone|iPad|iPod/i.test(navigator.platform);
+}
@@ -0,0 +1,197 @@
+import { isString } from './assert';
+
+/**
+ * 给定字符串是否是合法的 JSON 字符串
+ * @param str
+ */
+export function isJSONString(str: string) {
+  if (!str) {
+    return false;
+  }
+
+  let json;
+  try {
+    json = JSON.parse(str);
+    return typeof json === 'object';
+  } catch (err) {
+    return false;
+  }
+}
+
+/**
+ * 给定代码是否是有效的函数代码
+ * @param str
+ */
+export function isValidFunctionCode(str: string) {
+  try {
+    // eslint-disable-next-line no-eval
+    const ret = eval(`typeof (${str})`);
+    return ret === 'function';
+  } catch (e) {
+    return false;
+  }
+}
+
+const templatePattern = /^{{(.+)}}$/s;
+
+/**
+ * 判断给定代码是否被双花括号包裹
+ * @example {{[]}}
+ * @example {{{}}}
+ * @example {{this.foo}}
+ * @example {{123}}
+ * @param str
+ * @returns
+ */
+export function isWrappedCode(str: string) {
+  // 排除简单对象后，再用正则匹配
+  return templatePattern.test(str);
+}
+
+export const isVariableString = isWrappedCode;
+
+/**
+ * 从包裹的代码中获取代码内容
+ * @param str
+ * @returns
+ */
+export function getCodeOfWrappedCode(str: string) {
+  const match = templatePattern.exec(str);
+  if (match && match.length) {
+    return match[1];
+  }
+  return str;
+}
+
+export const getVariableContent = getCodeOfWrappedCode;
+
+/**
+ * 给输入代码加上双花括号 code -> {{code}}
+ * @example foo -> {{foo}}
+ * @example "hello" => {{"hello"}}
+ * @example () => {} => {{() => {}}}
+ *
+ * @param code 输入代码
+ * @returns 加上花括号后的代码
+ */
+export function wrapCode(code: string) {
+  if (isWrappedCode(code)) {
+    return code;
+  }
+  return `{{${code}}}`;
+}
+
+/**
+ * 使用 JSX 表达式容器包裹代码
+ * @example foo -> {foo}
+ * @example "hello" => {"hello"}
+ * @param code
+ * @returns
+ */
+export function wrapCodeWithJSXExpressionContainer(code: string) {
+  return `{${code}}`;
+}
+
+/**
+ * 是否为简单字符串，非变量字符串
+ * @param str
+ */
+export function isPlainString(str: string) {
+  const isWrapped = isString(str) && isWrappedCode(str);
+  return isString && !isWrapped;
+}
+
+const codeBlockPattern = /```(\w*)([\s\S]*?)```/g;
+
+/**
+ * 从 markdown 中解析出代码片段，仅返回第一个匹配的代码片段
+ * @param markdown
+ * @returns
+ */
+export function getCodeBlockFormMarkdown(markdown: string) {
+  const match = codeBlockPattern.exec(markdown.trim());
+  if (match && match.length) {
+    return match[2];
+  }
+}
+
+export function url2serviceName(url: string) {
+  if (url.startsWith('http')) {
+    // 去除域名前缀
+    url = url
+      .replace(/https?:\/\//, '')
+      .split('/')
+      .slice(1)
+      .join('/');
+  }
+
+  return (
+    url
+      // 去除 api + 模块名前缀
+      // - 云音乐 api 规范为 /api/模块名/
+      // - 后端公技基本使用 /模块名/api/
+      // - 中台类服务似乎常用 /api/middle/模块名/
+      // 目前的实现是去除了模块名，只干掉 /api/middle/ 和 /api/backend/ 这种常用前缀
+      .replace(/^\/[^/]+?\/api\/|^\/api\/middle\/|^\/api\/backend\/|^\/api\//, '')
+      // 去除路由参数
+      .replace(/\/\{.*?\}/, '')
+      // 忽略下划线与减号，将后面的字符转成大驼峰
+      .replace(/[-/_]+\w/g, (str) => str.replace(/[-/_]+/, '').toUpperCase())
+      // 首字母转小写
+      .replace(/^./, (str) => str.toLowerCase())
+      // 方法名以数字开头，添加 api 前缀
+      .replace(/^\d/, (str) => `api${str}`)
+  );
+}
+
+/**
+ * 解析状态变量的 path
+ * @example stores.foo.bar => { storeName: 'foo', variableName: 'bar' }
+ * @example stores.user.count => { storeName: 'user', variableName: 'count' }
+ *
+ * @param variablePath
+ * @returns
+ */
+export function parseStoreVariablePath(variablePath: string) {
+  const [, storeName, variableName] = variablePath.split('.');
+  return {
+    storeName,
+    variableName,
+  };
+}
+
+/**
+ * 解析服务变量的 path
+ * @param variablePath
+ * @returns
+ *
+ * @example services.list => { moduleName: 'index', name: 'list' }
+ * @example services.sub.list => { moduleName: 'sub', name: 'list' }
+ * @example foo => undefined
+ */
+export function parseServiceVariablePath(variablePath: string) {
+  const parts = variablePath.split('.');
+  if (parts[0] !== 'services') {
+    return {};
+  }
+
+  let moduleName = 'index';
+  let name = '';
+  switch (parts.length) {
+    case 2: {
+      name = parts[1];
+      break;
+    }
+    case 3: {
+      moduleName = parts[1];
+      name = parts[2];
+      break;
+    }
+    default:
+      break;
+  }
+  return {
+    moduleName,
+    name,
+  };
+}
@@ -7,5 +7,6 @@ export * from './events';
 export * from './function';
 export * from './logger';
 export * from './string';
-export * from './react-helper';
 export * from './object';
+export * from './react-helper';
+export * from './code-helper';
@@ -75,9 +75,13 @@ export function parseDndTrackId(str: string) {

 interface DndIdParsedType {
  /**
-   * 完整的 ID
+   * full id
   */
  id?: string;
+  /**
+   * 组件代码中的 id，一般对应组件的 tid 属性
+   */
+  codeId?: string;
  /**
   * 组件名
   */
@@ -86,19 +90,11 @@ interface DndIdParsedType {
   * 文件名
   */
  filename?: string;
-  /**
-   * @deprecated 使用 filename 代替
-   */
-  module?: string;
-  /**
-   * 序号
-   */
-  index?: string;
 }

 /**
 * 解析 dnd id
- * @example Button:123 -> { component: "Button", id: "Button:123" }
+ * @example Button:button123 -> { component: "Button", id: "Button:123" }
 * @example LocalBlock:Button:123 -> { filename: LocalBlock, component: "Button", id: "Button:123" }
 * @param str
 */
@@ -109,277 +105,23 @@ export function parseDndId(str: string): DndIdParsedType {

  const parts = str.split(':');
  if (parts.length === 2) {
+    // e.g. Button:button123
    return {
-      component: parts[0],
-      index: parts[1],
      id: str,
+      component: parts[0],
+      codeId: parts[1],
    };
  } else if (parts.length >= 3) {
+    // e.g. LocalBlock:Button:button123
    const filename = decodeURIComponent(parts[0]);
    return {
-      module: filename,
+      id: str,
      filename,
      component: parts[1],
-      index: parts[2],
-      id: str,
+      codeId: parts[2],
    };
  }
  return {
    id: str,
  };
 }
-
-/**
- * 给定字符串是否是合法的 JSON 字符串
- * @param str
- */
-export function isJSONString(str: string) {
-  if (!str) {
-    return false;
-  }
-
-  let json;
-  try {
-    json = JSON.parse(str);
-    return typeof json === 'object';
-  } catch (err) {
-    return false;
-  }
-}
-
-/**
- * 给定代码是否是有效的函数代码
- * @param str
- */
-export function isValidFunctionCode(str: string) {
-  try {
-    // eslint-disable-next-line no-eval
-    const ret = eval(`typeof (${str})`);
-    return ret === 'function';
-  } catch (e) {
-    return false;
-  }
-}
-
-/**
- * 是否是有效的对象字符串
- *
- * @example { foo: 'foo' }
- * @example [{ foo: 'foo' }]
- * TODO: 考虑箭头函数的情况 () => {}
- *
- * @param str
- * @returns
- */
-export function isValidObjectString(str: string) {
-  const obj = code2object(str);
-  if (obj && typeof obj === 'object') {
-    return true;
-  }
-  return false;
-}
-
-const templatePattern = /^{(.+)}$/s;
-
-/**
- * 判断给定字符串是否为变量字符串
- * @deprecated 使用 isWrappedByExpressionContainer 代替
- *
- * @example {[]}
- * @example {{}}
- * @example {this.foo}
- * @example {123}
- * @param str
- * @returns
- */
-export function isVariableString(str: string) {
-  // 先检查是否是简单的对象
-  // FIXME: 这里有问题，如果代码中有引用，会被误判
-  if (code2object(str)) {
-    return false;
-  }
-
-  // 排除简单对象后，再用正则匹配
-  return templatePattern.test(str);
-}
-
-/**
- * 给输入代码加上花括号
- * @example foo -> {foo}
- * @example "hello" => {"hello"}
- * @example () => {} => {() => {}}
- *
- * @deprecated 有问题，不要使用
- *
- * @param code 输入代码
- * @returns 加上花括号后的代码
- */
-export function wrapCode(code: string) {
-  if (isVariableString(code)) {
-    return code;
-  }
-  return `{${code}}`;
-}
-
-/**
- * 是否为简单字符串，非变量字符串
- * @param str
- */
-export function isPlainString(str: string) {
-  const isString = typeof str === 'string';
-  const isVarString = isString && isVariableString(str);
-  return isString && !isVarString;
-}
-
-/**
- * 解析并获取变量字符串的内容
- * @param str
- * @returns
- */
-export function getVariableContent(str: string) {
-  const match = templatePattern.exec(str);
-  if (match && match.length) {
-    return match[1];
-  }
-  return str;
-}
-
-// 提供给代码执行环境的全局变量
-const patchCode = `
-var tango = {
-  stores: {},
-  services: {},
-  config: {},
-  refs: {},
-};
-`;
-
-/**
- * 将代码放到函数体中进行执行
- * @param code
- * @returns 函数执行的结果
- */
-export function runCode(code: string) {
-  let ret;
-  try {
-    // eslint-disable-next-line no-new-func
-    ret = new Function(`${patchCode}\n return ${code}`)();
-  } catch (err) {
-    // ignore error
-  }
-  return ret;
-}
-
-// eslint-disable-next-line no-useless-escape
-const objectWrapperPattern = /^[{\[].*[}\]]$/s;
-
-/**
- * 将代码片段转成 js 对象
- * @param code 代码文本
- * @param isStrict 是否为严格模式（是否废弃）
- * @returns
- */
-export function code2object(code: string, isStrict = true) {
-  // 非严格模式直接执行
-  // 严格模式下需检测 code 是一个对象
-  if (!isStrict || (isStrict && objectWrapperPattern.test(code))) {
-    const ret = runCode(code);
-    return typeof ret === 'object' ? ret : undefined;
-  }
-  return code;
-}
-
-const codeBlockPattern = /```(\w*)([\s\S]*?)```/g;
-
-/**
- * 从 markdown 中解析出代码片段，仅返回第一个匹配的代码片段
- * @param markdown
- * @returns
- */
-export function getCodeBlockFormMarkdown(markdown: string) {
-  const match = codeBlockPattern.exec(markdown.trim());
-  if (match && match.length) {
-    return match[2];
-  }
-}
-
-export function url2serviceName(url: string) {
-  if (url.startsWith('http')) {
-    // 去除域名前缀
-    url = url
-      .replace(/https?:\/\//, '')
-      .split('/')
-      .slice(1)
-      .join('/');
-  }
-
-  return (
-    url
-      // 去除 api + 模块名前缀
-      // - 云音乐 api 规范为 /api/模块名/
-      // - 后端公技基本使用 /模块名/api/
-      // - 中台类服务似乎常用 /api/middle/模块名/
-      // 目前的实现是去除了模块名，只干掉 /api/middle/ 和 /api/backend/ 这种常用前缀
-      .replace(/^\/[^/]+?\/api\/|^\/api\/middle\/|^\/api\/backend\/|^\/api\//, '')
-      // 去除路由参数
-      .replace(/\/\{.*?\}/, '')
-      // 忽略下划线与减号，将后面的字符转成大驼峰
-      .replace(/[-/_]+\w/g, (str) => str.replace(/[-/_]+/, '').toUpperCase())
-      // 首字母转小写
-      .replace(/^./, (str) => str.toLowerCase())
-      // 方法名以数字开头，添加 api 前缀
-      .replace(/^\d/, (str) => `api${str}`)
-  );
-}
-
-/**
- * 解析状态变量的 path
- * @example stores.foo.bar => { storeName: 'foo', variableName: 'bar' }
- * @example stores.user.count => { storeName: 'user', variableName: 'count' }
- *
- * @param variablePath
- * @returns
- */
-export function parseStoreVariablePath(variablePath: string) {
-  const [, storeName, variableName] = variablePath.split('.');
-  return {
-    storeName,
-    variableName,
-  };
-}
-
-/**
- * 解析服务变量的 path
- * @param variablePath
- * @returns
- *
- * @example services.list => { moduleName: 'index', name: 'list' }
- * @example services.sub.list => { moduleName: 'sub', name: 'list' }
- * @example foo => undefined
- */
-export function parseServiceVariablePath(variablePath: string) {
-  const parts = variablePath.split('.');
-  if (parts[0] !== 'services') {
-    return {};
-  }
-
-  let moduleName = 'index';
-  let name = '';
-  switch (parts.length) {
-    case 2: {
-      name = parts[1];
-      break;
-    }
-    case 3: {
-      moduleName = parts[1];
-      name = parts[2];
-      break;
-    }
-    default:
-      break;
-  }
-  return {
-    moduleName,
-    name,
-  };
-}
@@ -3,6 +3,7 @@
 */

 import { OptionType } from './advanced';
+import { PartialRecord } from './base';

 /**
 * @deprecated 请使用 IComponentProp 代替
@@ -19,6 +20,15 @@ export type ComponentDndRulesType = IComponentDndRules;
 */
 export type ComponentPrototypeType = IComponentPrototype;

+/**
+ * 组件校验规则
+ */
+export type ComponentPropValidate = (
+  value: any,
+  field: any,
+  trigger: string,
+) => string | Promise<string>;
+
 /**
 * 组件属性类型
 */
@@ -107,6 +117,10 @@ export interface IComponentProp<T = any> {
   * 动态设置表单项是否展示
   */
  getVisible?: (form: any) => boolean;
+  /**
+   * 表单值校验逻辑
+   */
+  validate?: ComponentPropValidate;
  /**
   * 标记属性是否已废弃
   */
@@ -287,6 +301,19 @@ export interface ITangoConfigJson {
   * 外部资源，例如 js, css 文件等
   */
  externalResources?: Record<string, any>;
+  /**
+   * 沙箱配置
+   */
+  sandbox?: {
+    /**
+     * 在沙箱中执行的脚本
+     */
+    evaluateJavaScript?: string;
+    /**
+     * 模块的别名
+     */
+    alias?: Record<string, string>;
+  };
  /**
   * 设计器配置
   */
@@ -301,3 +328,19 @@ export interface ITangoConfigJson {
    autoGenerateComponentId: boolean;
  };
 }
+
+/**
+ * 物料类型
+  common: '基础组件',
+  atom: '原子组件',
+  snippet: '组合',
+  bizComp: '业务组件',
+  localComp: '本地组件',
+ */
+export type MenuKeyType = 'common' | 'atom' | 'snippet' | 'bizComp' | 'localComp';
+export type MenuValueType = Array<{ title: string; items: string[] }>;
+
+/**
+ * 菜单项类型
+ */
+export type MenuDataType = PartialRecord<MenuKeyType, MenuValueType>;
@@ -1,7 +1,5 @@
 import {
  isVariableString,
-  isValidObjectString,
-  code2object,
  parseDndTrackId,
  getVariableContent,
  camelCase,
@@ -35,40 +33,22 @@ describe('string', () => {
  });

  it('isVariableString', () => {
-    expect(isVariableString('{this.foo}')).toBeTruthy();
-    expect(isVariableString('{!false}')).toBeTruthy();
-    expect(isVariableString('{[]}')).toBeTruthy();
-    expect(isVariableString('{{ foo: "bar" }}')).toBeTruthy();
-    expect(isVariableString('{[{ foo: "bar" }]}')).toBeTruthy();
-    expect(isVariableString('{123}')).toBeTruthy();
-    expect(isVariableString('{value}')).toBeTruthy();
-    expect(isVariableString('{"hello"}')).toBeTruthy();
+    expect(isVariableString('{{this.foo}}')).toBeTruthy();
+    expect(isVariableString('{{!false}}')).toBeTruthy();
+    expect(isVariableString('{{[]}}')).toBeTruthy();
+    expect(isVariableString('{{{ foo: "bar" }}}')).toBeTruthy();
+    expect(isVariableString('{{[{ foo: "bar" }]}}')).toBeTruthy();
+    expect(isVariableString('{{123}}')).toBeTruthy();
+    expect(isVariableString('{{value}}')).toBeTruthy();
+    expect(isVariableString('{{"hello"}}')).toBeTruthy();
    expect(isVariableString('{ foo: "bar" }')).toBeFalsy();
    expect(isVariableString('{ type: tango.stores?.homePage?.tabKey }')).toBeFalsy();
-    // expect(isVariableString('{ type: tango.stores.homePage.tabKey }')).toBeFalsy(); // TIP: failed
+    expect(isVariableString('{ type: tango.stores.homePage.tabKey }')).toBeFalsy();
    expect(isVariableString('{ foo: "bar" }')).toBeFalsy();
  });

  it('getVariableContent', () => {
-    expect(getVariableContent('{!false}')).toBe('!false');
-  });
-
-  it('isValidObjectString', () => {
-    expect(isValidObjectString('{ foo: "bar" }')).toBeTruthy();
-    expect(isValidObjectString('[{ foo: "bar" }]')).toBeTruthy();
-    expect(isValidObjectString('[1,2,3]')).toBeTruthy();
-    expect(isValidObjectString('["hello", "world"]')).toBeTruthy();
-    // expect(isValidObjectString('() => {}')).toBeTruthy();
-    expect(isValidObjectString('hello')).toBeFalsy();
-  });
-
-  it('code2object', () => {
-    expect(code2object(`{ foo: 12 }`)).toEqual({ foo: 12 });
-    expect(code2object(`[]`)).toEqual([]);
-    expect(code2object(`{this.foo}`)).toBeUndefined();
-    expect(code2object(`{foo}`)).toBeUndefined();
-    expect(code2object('() => {}')).toEqual('() => {}');
-    expect(code2object('hello')).toEqual('hello');
+    expect(getVariableContent('{{!false}}')).toBe('!false');
  });

  it('parseDndTrackId', () => {
@@ -78,22 +58,21 @@ describe('string', () => {

  it('parseDndId', () => {
    expect(parseDndId('123')).toEqual({ id: '123' });
-    expect(parseDndId('Button:123')).toEqual({
+    expect(parseDndId('Button:button123')).toEqual({
      component: 'Button',
-      id: 'Button:123',
-      index: '123',
+      id: 'Button:button123',
+      codeId: 'button123',
    });
-    expect(parseDndId('Button.Group:123')).toEqual({
+    expect(parseDndId('Button.Group:buttonGroup123')).toEqual({
      component: 'Button.Group',
-      id: 'Button.Group:123',
-      index: '123',
+      id: 'Button.Group:buttonGroup123',
+      codeId: 'buttonGroup123',
    });
-    expect(parseDndId('LocalBlock:Button.Group:123')).toEqual({
+    expect(parseDndId('LocalBlock:Button.Group:buttonGroup123')).toEqual({
+      id: 'LocalBlock:Button.Group:buttonGroup123',
      filename: 'LocalBlock',
-      module: 'LocalBlock',
      component: 'Button.Group',
-      id: 'LocalBlock:Button.Group:123',
-      index: '123',
+      codeId: 'buttonGroup123',
    });
  });

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [1.0.7](https://github.com/netease/tango/compare/@music163/tango-sandbox@1.0.6...@music163/tango-sandbox@1.0.7) (2024-06-20)
+
+**Note:** Version bump only for package @music163/tango-sandbox
+
+## [1.0.6](https://github.com/netease/tango/compare/@music163/tango-sandbox@1.0.5...@music163/tango-sandbox@1.0.6) (2024-06-05)
+
+**Note:** Version bump only for package @music163/tango-sandbox
+
+## [1.0.5](https://github.com/netease/tango/compare/@music163/tango-sandbox@1.0.4...@music163/tango-sandbox@1.0.5) (2024-06-03)
+
+### Bug Fixes
+
+- use addEventListener to bind iframe event handlers ([#169](https://github.com/netease/tango/issues/169)) ([c1306e2](https://github.com/netease/tango/commit/c1306e24e0c747d0f4bd845dc1714488ddd8cdac))
+
+## [1.0.4](https://github.com/netease/tango/compare/@music163/tango-sandbox@1.0.3...@music163/tango-sandbox@1.0.4) (2024-05-21)
+
+**Note:** Version bump only for package @music163/tango-sandbox
+
+## [1.0.3](https://github.com/netease/tango/compare/@music163/tango-sandbox@1.0.2...@music163/tango-sandbox@1.0.3) (2024-05-17)
+
+**Note:** Version bump only for package @music163/tango-sandbox
+
 ## [1.0.1](https://github.com/netease/tango/compare/@music163/tango-sandbox@1.0.0...@music163/tango-sandbox@1.0.1) (2024-04-22)

 **Note:** Version bump only for package @music163/tango-sandbox
@@ -1,6 +1,6 @@
 {
  "name": "@music163/tango-sandbox",
-  "version": "1.0.1",
+  "version": "1.0.7",
  "description": "sandbox of tango apps",
  "author": "wwsun <ww.sun@outlook.com>",
  "homepage": "",
@@ -29,8 +29,8 @@
  },
  "dependencies": {
    "@ant-design/icons": "^4.8.0",
-    "@music163/tango-core": "^1.0.1",
-    "@music163/tango-helpers": "^1.0.0-alpha.7",
+    "@music163/tango-core": "^1.3.2",
+    "@music163/tango-helpers": "^1.2.0",
    "crypto-js": "^4.1.1",
    "lodash.isequal": "4.5.0",
    "react-frame-component": "^5.2.4"
@@ -3,7 +3,13 @@ import { TangoEventName } from '@music163/tango-helpers';
 import Loading from './loading';
 import Manager from './manager';
 import { createMissingPackageJSON, changeRoute } from './helper';
-import { IFiles, CodeSandboxState, CodeSandboxProps, UnsubscribeFunction } from '../types';
+import {
+  IFiles,
+  CodeSandboxState,
+  CodeSandboxProps,
+  UnsubscribeFunction,
+  EventHandlers,
+} from '../types';

 // CodeSandbox 使用示例
 // <CodeSandbox files={files} entry={entry} template={template} bundlerURL={`${window.location.protocol}//codesandbox.fn.netease.com/`} />
@@ -32,6 +38,8 @@ export class CodeSandbox extends React.Component<CodeSandboxProps, CodeSandboxSt

  iframe: HTMLIFrameElement;

+  private eventHandlers: EventHandlers;
+
  constructor(props: CodeSandboxProps) {
    super(props);

@@ -75,11 +83,8 @@ export class CodeSandbox extends React.Component<CodeSandboxProps, CodeSandboxSt
    this.manager.cleanup();

    // clear tango event
-    if (this.iframe && this.props?.eventHandlers?.onTango) {
-      this.iframe.contentDocument?.removeEventListener(
-        TangoEventName.DesignerAction,
-        this.props.eventHandlers.onTango,
-      );
+    if (this.iframe && this.eventHandlers) {
+      this.unbindEvents(this.eventHandlers);
    }
  }

@@ -116,6 +121,29 @@ export class CodeSandbox extends React.Component<CodeSandboxProps, CodeSandboxSt
    externalResources: this.props.externalResources,
  });

+  normalizeEventType = (eventType: string) =>
+    eventType === 'onTango'
+      ? TangoEventName.DesignerAction
+      : eventType.replace(/^on/, '').toLowerCase();
+
+  bindEvents = (eventHandlers: EventHandlers) => {
+    Object.keys(eventHandlers).forEach((eventType) => {
+      this.iframe?.contentDocument?.addEventListener(
+        this.normalizeEventType(eventType),
+        eventHandlers[eventType],
+      );
+    });
+  };
+
+  unbindEvents = (eventHandlers: EventHandlers) => {
+    Object.keys(eventHandlers).forEach((eventType) => {
+      this.iframe?.contentDocument?.removeEventListener(
+        this.normalizeEventType(eventType),
+        eventHandlers[eventType],
+      );
+    });
+  };
+
  // Manager 实例化，即开始构建页面
  // 将 el 传给 Manager 作为实例化参数，当构建完成后，会将构建的页面 dom 设置给 el
  // 注：Manager是一个管理者的角色，从大局上把控整个转译和执行的流程
@@ -155,17 +183,11 @@ export class CodeSandbox extends React.Component<CodeSandboxProps, CodeSandboxSt

        // 注册监听函数
        const { eventHandlers } = this.props;
-        Object.keys(eventHandlers).forEach((eventType) => {
-          if (el.contentDocument) {
-            el.contentDocument[eventType.toLowerCase()] = eventHandlers[eventType];
-          }
-          if (eventType === 'onTango') {
-            el.contentDocument?.addEventListener(
-              TangoEventName.DesignerAction,
-              eventHandlers[eventType],
-            );
-          }
-        });
+        if (eventHandlers) {
+          this.bindEvents(eventHandlers);
+          // 保存一份当前的 eventHandlers，避免 props 变更导致无法取消现在已注册的事件绑定
+          this.eventHandlers = eventHandlers;
+        }
      };
    }
  };
@@ -3,6 +3,49 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [1.2.7](https://github.com/netease/tango/compare/@music163/tango-setting-form@1.2.6...@music163/tango-setting-form@1.2.7) (2024-06-20)
+
+### Bug Fixes
+
+- update designer style ([#176](https://github.com/netease/tango/issues/176)) ([0f3f0af](https://github.com/netease/tango/commit/0f3f0afdfa8aee2532a97c5c2e92ef4230397d86))
+
+## [1.2.6](https://github.com/netease/tango/compare/@music163/tango-setting-form@1.2.5...@music163/tango-setting-form@1.2.6) (2024-06-05)
+
+**Note:** Version bump only for package @music163/tango-setting-form
+
+## [1.2.5](https://github.com/netease/tango/compare/@music163/tango-setting-form@1.2.4...@music163/tango-setting-form@1.2.5) (2024-06-03)
+
+**Note:** Version bump only for package @music163/tango-setting-form
+
+## [1.2.4](https://github.com/netease/tango/compare/@music163/tango-setting-form@1.2.3...@music163/tango-setting-form@1.2.4) (2024-05-30)
+
+**Note:** Version bump only for package @music163/tango-setting-form
+
+## [1.2.3](https://github.com/netease/tango/compare/@music163/tango-setting-form@1.2.2...@music163/tango-setting-form@1.2.3) (2024-05-27)
+
+**Note:** Version bump only for package @music163/tango-setting-form
+
+## [1.2.2](https://github.com/netease/tango/compare/@music163/tango-setting-form@1.2.1...@music163/tango-setting-form@1.2.2) (2024-05-22)
+
+**Note:** Version bump only for package @music163/tango-setting-form
+
+## [1.2.1](https://github.com/netease/tango/compare/@music163/tango-setting-form@1.2.0...@music163/tango-setting-form@1.2.1) (2024-05-21)
+
+### Bug Fixes
+
+- enhance code value validate in SettingForm ([#152](https://github.com/netease/tango/issues/152)) ([791fbb1](https://github.com/netease/tango/commit/791fbb162a7147243924e01f54e9c0b586f14438))
+- prototype2code & go back history error ([#156](https://github.com/netease/tango/issues/156)) ([8bf53a7](https://github.com/netease/tango/commit/8bf53a76f8a71eaf261ea68b9ee44e5bf19893aa))
+
+# [1.2.0](https://github.com/netease/tango/compare/@music163/tango-setting-form@1.1.0...@music163/tango-setting-form@1.2.0) (2024-05-17)
+
+### Bug Fixes
+
+- support quick set tid in SettingForm ([#151](https://github.com/netease/tango/issues/151)) ([1fc22a4](https://github.com/netease/tango/commit/1fc22a4535a8bdc12a018a41ebd5ab908fc46817))
+
+### Features
+
+- refactor parse attribute value ([#149](https://github.com/netease/tango/issues/149)) ([ffaa276](https://github.com/netease/tango/commit/ffaa276b5c205ed962d37e2fdb358a703f8fad01))
+
 ## [1.0.2](https://github.com/netease/tango/compare/@music163/tango-setting-form@1.0.1...@music163/tango-setting-form@1.0.2) (2024-04-22)

 **Note:** Version bump only for package @music163/tango-setting-form
@@ -1,6 +1,6 @@
 {
  "name": "@music163/tango-setting-form",
-  "version": "1.0.2",
+  "version": "1.2.7",
  "description": "setting form of tango-apps",
  "author": "wwsun <ww.sun@outlook.com>",
  "homepage": "",
@@ -28,13 +28,13 @@
  },
  "dependencies": {
    "@ant-design/icons": "^4.8.0",
-    "@music163/tango-core": "^1.0.1",
-    "@music163/tango-helpers": "^1.0.0-alpha.7",
-    "@music163/tango-ui": "^1.0.2",
+    "@music163/tango-core": "^1.3.2",
+    "@music163/tango-helpers": "^1.2.0",
+    "@music163/tango-ui": "^1.3.2",
    "antd": "^4.24.2",
    "coral-system": "^1.0.5",
-    "mobx": "6.12.0",
-    "mobx-react-lite": "4.0.5"
+    "mobx": "6.12.3",
+    "mobx-react-lite": "4.0.7"
  },
  "publishConfig": {
    "access": "public",
@@ -1,12 +1,21 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { toJS } from 'mobx';
 import { observer } from 'mobx-react-lite';
-import { clone, IComponentProp, useBoolean } from '@music163/tango-helpers';
-import { isWrappedByExpressionContainer } from '@music163/tango-core';
-import { ToggleButton, CodeOutlined } from '@music163/tango-ui';
+import {
+  clone,
+  ComponentPropValidate,
+  getCodeOfWrappedCode,
+  IComponentProp,
+  isNil,
+  isString,
+  isWrappedCode,
+  wrapCode,
+} from '@music163/tango-helpers';
+import { ErrorBoundary } from '@music163/tango-ui';
+import { code2value, value2code } from '@music163/tango-core';
 import { InputProps } from 'antd';
 import { useFormModel, useFormVariable } from './context';
-import { FormControl } from './form-ui';
+import { FormControl, ToggleCodeButton } from './form-ui';
 import { Box, Text } from 'coral-system';
 import { ISetterOnChangeCallbackDetail } from './types';

@@ -43,6 +52,10 @@ export interface IFormItemCreateOptions {
   * 设置器别名列表，支持多个名字
   */
  alias?: string[];
+  /**
+   * 设置器类型，value类设置器支持切换到codeSetter，默认为 value setter
+   */
+  type?: 'code' | 'value';
  /**
   * 渲染设置器使用的组件
   */
@@ -58,15 +71,109 @@ export interface IFormItemCreateOptions {
  /**
   * 默认的表单值校验逻辑
   */
-  validate?: (value: string) => string | Promise<any>;
+  validate?: ComponentPropValidate;
 }

 const defaultGetSetterProps = () => ({});
 const defaultGetVisible = () => true;

+function parseFieldValue(fieldValue: any) {
+  let value: any;
+  let code: string;
+
+  if (!fieldValue) {
+    return [];
+  }
+
+  const isCodeString = isString(fieldValue) && isWrappedCode(fieldValue);
+  if (isCodeString) {
+    code = getCodeOfWrappedCode(fieldValue);
+    try {
+      // 避免 code 报错的情况
+      value = code2value(code);
+    } catch (err) {
+      // do nothing
+    }
+  } else {
+    code = value2code(fieldValue);
+    value = fieldValue;
+  }
+  return [value, code];
+}
+
+interface UseSetterValueProps {
+  fieldValue: any;
+  setter?: string;
+  setterType?: IFormItemCreateOptions['type'];
+  /**
+   * 强制初始化为 codeSetter，适用于外部需要特别干预的情况
+   */
+  forceCodeSetter?: boolean;
+}
+
+export function useSetterValue({
+  fieldValue,
+  setter,
+  setterType,
+  forceCodeSetter,
+}: UseSetterValueProps) {
+  const [value, code] = parseFieldValue(fieldValue);
+  const [isCodeSetter, setIsCodeSetter] = useState(() => {
+    if (forceCodeSetter) {
+      return true;
+    }
+
+    // 同时不存在，表示是空置，使用默认模式
+    if (!code && !value) {
+      return false;
+    }
+
+    // value 解析出错的情况，使用 codeSetter
+    if (isNil(value)) {
+      return true;
+    }
+
+    // 其他情况，均使用默认模式
+    return false;
+  });
+
+  const toggleSetter = () => {
+    setIsCodeSetter(!isCodeSetter);
+  };
+
+  let fixedSetter: string;
+  let setterValue: any;
+  if (setterType === 'code') {
+    fixedSetter = setter;
+    setterValue = code;
+  } else {
+    fixedSetter = isCodeSetter ? 'codeSetter' : setter;
+    setterValue = isCodeSetter ? code : value;
+  }
+
+  return {
+    value,
+    code,
+    setter: fixedSetter,
+    setterValue, // setter value
+    isCodeSetter, // 是否为 codeSetter
+    toggleSetter, // 切换 setter
+  };
+}
+
 export function createFormItem(options: IFormItemCreateOptions) {
  const renderSetter =
    options.render ?? ((props: any) => React.createElement(options.component, props));
+  const setterType = options.type ?? 'value'; // 设置器的模式
+
+  function getShowToggleCodeButton(disableVariableSetter = options.disableVariableSetter) {
+    if (setterType === 'code') {
+      // codeSetter 无需切换按钮
+      return false;
+    }
+    // 如果用户设置了 disableVariableSetter，则不显示切换按钮
+    return !disableVariableSetter;
+  }

  function FormItem({
    name,
@@ -75,51 +182,57 @@ export function createFormItem(options: IFormItemCreateOptions) {
    placeholder,
    docs,
    autoCompleteOptions,
-    setter,
+    setter: setterProp,
    setterProps,
    defaultValue,
    options: setterOptions,
-    disableVariableSetter: disableVariableSetterProp = options.disableVariableSetter,
+    disableVariableSetter,
    getVisible: getVisibleProp,
    getSetterProps: getSetterPropsProp,
    deprecated,
    extra,
    footer,
    noStyle,
+    validate = options.validate,
  }: FormItemProps) {
    const { disableSwitchExpressionSetter, showItemSubtitle } = useFormVariable();
    const model = useFormModel();
    const field = model.getField(name);
-    const value = toJS(field.value ?? defaultValue);
-    const disableVariableSetter = disableSwitchExpressionSetter ?? disableVariableSetterProp; // Form 的设置优先
-    const [isVariable, { toggle: toggleIsVariable }] = useBoolean(
-      () => !disableVariableSetter && isWrappedByExpressionContainer(value),
-    );

-    const setterName = isVariable ? 'expressionSetter' : setter;
-
-    field.setConfig({
-      validate: options.validate,
+    const fieldValue = toJS(field.value ?? defaultValue);
+    const { setterValue, setter, isCodeSetter, toggleSetter } = useSetterValue({
+      fieldValue,
+      setter: setterProp,
+      setterType,
    });

-    const baseComponentProps = clone(
-      {
-        value,
-        defaultValue,
-        onChange: field.handleChange,
-        status: field.error ? 'error' : undefined,
-        placeholder,
-        options: setterOptions,
+    field.setConfig({
+      validate: setter === 'codeSetter' ? getSetter('codeSetter').config.validate : validate,
+    });
+
+    let baseComponentProps: FormItemComponentProps = {
+      value: setterValue,
+      defaultValue,
+      onChange(value, detail = {}) {
+        if ((setterType === 'code' || isCodeSetter) && isString(value) && value) {
+          detail.rawCode = value; // 在 detail 中记录原始的 code
+          value = wrapCode(value);
+        }
+        field.setValue(value, detail);
      },
-      false,
-    ) as FormItemComponentProps;
+      status: field.error ? 'error' : undefined,
+      placeholder,
+      options: setterOptions,
+    };
+    baseComponentProps = clone(baseComponentProps, false);

    let expProps = {};

    // FIXME: 重新考虑这段代码的位置，外置这个逻辑
    if (
-      ['expressionSetter', 'expSetter', 'actionSetter', 'eventSetter'].includes(setter) ||
-      isVariable
+      ['codeSetter', 'expressionSetter', 'expSetter', 'actionSetter', 'eventSetter'].includes(
+        setter,
+      )
    ) {
      expProps = {
        modalTitle: title,
@@ -130,10 +243,10 @@ export function createFormItem(options: IFormItemCreateOptions) {

    const getSetterProps = getSetterPropsProp || defaultGetSetterProps;
    // 从注册表中获取 expSetter
-    const ExpressionSetter = REGISTERED_FORM_ITEM_MAP['expressionSetter']?.config?.component;
+    const CodeSetter = REGISTERED_FORM_ITEM_MAP['codeSetter']?.config?.component;

-    const setterNode = isVariable ? (
-      <ExpressionSetter {...expProps} {...baseComponentProps} />
+    const setterNode = isCodeSetter ? (
+      <CodeSetter {...expProps} {...baseComponentProps} />
    ) : (
      renderSetter({
        ...expProps,
@@ -147,9 +260,13 @@ export function createFormItem(options: IFormItemCreateOptions) {

    if (noStyle) {
      // 无样式模式
-      return getVisible(model) ? setterNode : <div data-setter={setterName} data-field={name} />;
+      return getVisible(model) ? setterNode : <div data-setter={setter} data-field={name} />;
    }

+    const showToggleCodeButton = getShowToggleCodeButton(
+      disableSwitchExpressionSetter || disableVariableSetter,
+    );
+
    return (
      <FormControl
        visible={getVisible(model)}
@@ -162,27 +279,16 @@ export function createFormItem(options: IFormItemCreateOptions) {
        extra={
          <Box>
            {extra}
-            {!disableVariableSetter ? (
-              <ToggleButton
-                borderRadius="s"
-                size="s"
-                shape="text"
-                type="primary"
-                tooltip={isVariable ? '关闭 JS 表达式' : '使用 JS 表达式'}
-                tooltipPlacement="left"
-                selected={isVariable}
-                onClick={() => toggleIsVariable()}
-              >
-                <CodeOutlined />
-              </ToggleButton>
+            {showToggleCodeButton ? (
+              <ToggleCodeButton selected={isCodeSetter} onToggle={toggleSetter} />
            ) : null}
          </Box>
        }
        footer={footer}
-        data-setter={setterName}
+        data-setter={setter}
        data-field={name}
      >
-        {setterNode}
+        <ErrorBoundary>{setterNode}</ErrorBoundary>
      </FormControl>
    );
  }
@@ -196,14 +302,24 @@ export function createFormItem(options: IFormItemCreateOptions) {
 // 已注册的 setter 查找表
 const REGISTERED_FORM_ITEM_MAP: Record<string, ReturnType<typeof createFormItem>> = {};

+/**
+ * 获取已注册的 setter
+ * @param name
+ * @returns
+ */
+export function getSetter(name: string) {
+  return REGISTERED_FORM_ITEM_MAP[name];
+}
+
 /**
 * Setter 注册
 * @param config 注册选项
 */
 export function register(config: IFormItemCreateOptions) {
-  const names = [config.name, ...(config.alias ?? [])];
-  names.forEach((name) => {
-    REGISTERED_FORM_ITEM_MAP[name] = createFormItem(config);
+  // 允许直接覆盖同名 setter
+  REGISTERED_FORM_ITEM_MAP[config.name] = createFormItem(config);
+  (Array.isArray(config.alias) ? config.alias : []).forEach((alias) => {
+    REGISTERED_FORM_ITEM_MAP[alias] = getSetter(config.name);
  });
 }

@@ -211,13 +327,13 @@ export function SettingFormItem(props: FormItemProps) {
  const { setter } = props;
  const Comp = REGISTERED_FORM_ITEM_MAP[setter];
  if (Comp == null) {
-    const Fallback = REGISTERED_FORM_ITEM_MAP.expressionSetter;
+    const Fallback = REGISTERED_FORM_ITEM_MAP.codeSetter;
    return (
      <Fallback
        {...props}
        footer={
-          <Text color="red" mt="m">
-            {props.setter} is invalid
+          <Text color="#faad14" mt="m">
+            invalid {props.setter}, fallback to codeSetter
          </Text>
        }
      />
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Wells	8ac0954d65	fix: update state tree data	2024-06-26 16:48:52 +08:00
Wells	0cb71a8634	fix: check if prototype exists in selection tool	2024-06-25 17:45:34 +08:00
Wells	a7759494de	fix: update toggleButton arrow style	2024-06-21 19:40:19 +08:00
Wells	0011cdca0f	chore(release): publish - @music163/tango-context@1.1.4 - @music163/tango-core@1.3.2 - @music163/tango-designer@1.3.2 - @music163/tango-sandbox@1.0.7 - @music163/tango-setting-form@1.2.7 - @music163/tango-ui@1.3.2	2024-06-20 15:45:08 +08:00
Wells	0f3f0afdfa	fix: update designer style (#176 ) * fix: remove useless codes * fix: show insert children icon only for hasChildren node * fix: update dependency * fix: update styles * fix: show sibling action for nodes except page & update drag icon for DragPanel * fix: update ToggleButton style * fix: add showDropdownIcon to ToggleButton * fix: update codeSetter style * fix: add builtin imageSetter * fix: update PopOut icon	2024-06-20 15:42:49 +08:00
BoBoooooo	b53a9f7eef	fix: drag-panel add resizeable & height prop (#175 ) * fix: drag-panel add resizeable & height prop * fix: add className	2024-06-18 16:56:00 +08:00
Wells	5336c2ec28	docs: update	2024-06-11 09:17:36 +00:00
Wells	cdbd2351a2	docs: update README.zh-CN.md	2024-06-11 17:04:28 +08:00
Wells	1f03977f7d	docs: add some examples	2024-06-11 17:01:41 +08:00
864907600cc	a2cc418a73	fix: fix global hotkey triggering on content editable elements (#174 )	2024-06-06 14:57:41 +08:00
Wells	239c0b0a28	chore(release): publish - @music163/tango-context@1.1.3 - @music163/tango-core@1.3.1 - @music163/tango-designer@1.3.1 - @music163/tango-sandbox@1.0.6 - @music163/tango-setting-form@1.2.6 - @music163/tango-ui@1.3.1	2024-06-05 18:17:02 +08:00
Wells	ae04850bb2	fix: set value as jsxElement children (#173 )	2024-06-05 18:11:57 +08:00
864907600cc	ca740c83ae	fix: fix context menu error on macOS (#170 ) * fix: fix context menu error on macOS * fix: adjust context menu icon style	2024-06-03 15:57:58 +08:00
Wells	00bf52a411	chore(release): publish - @music163/tango-context@1.1.2 - @music163/tango-core@1.3.0 - @music163/tango-designer@1.3.0 - @music163/tango-helpers@1.2.0 - @music163/tango-sandbox@1.0.5 - @music163/tango-setting-form@1.2.5 - @music163/tango-ui@1.3.0	2024-06-03 09:51:00 +08:00
864907600cc	c1306e24e0	fix: use addEventListener to bind iframe event handlers (#169 ) * feat: use addEventListener to bind iframe event handlers * fix: types	2024-05-31 17:44:55 +08:00
864907600cc	28040fc006	feat: add context menu (#161 ) * feat: add more actions menu on SelectionTools * feat: add view source context action * feat: normalize hotkey by platform * feat: add context menu to components tree * feat: add context menu to viewport	2024-05-31 17:31:58 +08:00
Wells	3f3981bb9d	fix: parse app entry file & pass correct routerType to sandbox (#168 ) * fix: parse app entry file & pass correct routerType to sandbox * fix: export entry module	2024-05-31 14:54:12 +08:00
Wells	253ceca969	chore(release): publish - @music163/tango-designer@1.2.3 - @music163/tango-setting-form@1.2.4 - @music163/tango-ui@1.2.3	2024-05-30 17:05:52 +08:00
BoBoooooo	a0ed57ff4f	fix: optimize variable panel scroll ui & onCancel bug (#166 )	2024-05-30 14:06:12 +08:00
BoBoooooo	f83c6bc0f6	fix: popover re-click position bug & drag panel drag bug (#165 ) * fix: popover reClick position bug * fix: drag event lose when drag over iframe	2024-05-29 15:26:00 +08:00
Wells	bb92210594	chore(release): publish - @music163/tango-designer@1.2.2 - @music163/tango-setting-form@1.2.3 - @music163/tango-ui@1.2.2	2024-05-27 10:18:03 +08:00
Wells	163ecedff3	fix: export usePreviewSandboxQuery & add builtin sandboxQuery (#163 ) * fix: export usePreviewSandboxQuery * fix: update ui * fix: update ui	2024-05-24 18:28:04 +08:00
Wells	22a2e9bdd1	chore(release): publish - @music163/tango-designer@1.2.1 - @music163/tango-setting-form@1.2.2 - @music163/tango-ui@1.2.1	2024-05-22 14:53:57 +08:00
Wells	696f82bd26	style: update	2024-05-22 14:52:44 +08:00
BoBoooooo	a0484e8f64	fix: check local component prototypes (#160 ) * fix: prototype undefined bug * fix: logic bug * fix: components grid item ui * fix: ui bug * fix: update local file	2024-05-22 11:56:52 +08:00
Wells	cf31ef19f4	chore(release): publish - @music163/tango-context@1.1.1 - @music163/tango-core@1.2.0 - @music163/tango-designer@1.2.0 - @music163/tango-helpers@1.1.1 - @music163/tango-sandbox@1.0.4 - @music163/tango-setting-form@1.2.1 - @music163/tango-ui@1.2.0	2024-05-21 15:06:42 +08:00
864907600cc	fe31246483	feat: add select parent node of selected node (#158 ) * feat: add select parent node of selected node * feat: move select parent node to SelectSource * fix: change icon & order --------- Co-authored-by: ccloli <8115912+ccloli@users.noreply.github.com>	2024-05-20 20:15:28 +08:00
BoBoooooo	9daf3872e7	feat: event-setter & expression-setter use popover (#159 )	2024-05-20 16:57:37 +08:00
BoBoooooo	f17ccbb7f6	fix: support add components with popover (#155 ) * feat: add drag panel & popover component * feat: update web ide version to 1.3.11 * feat: add components-popover * fix: update sidebar default width * feat: add global components popover * fix: _menuData default value * feat: add addComponent event * revert: remove isCollapsed prop * fix: update local icon font url	2024-05-20 16:13:34 +08:00
BoBoooooo	f854f75b8a	feat: supoort set default active view (#157 )	2024-05-20 15:27:32 +08:00
BoBoooooo	df3021f75e	feat: add history forward & back shortcut key (#154 )	2024-05-20 15:26:46 +08:00
BoBoooooo	8bf53a76f8	fix: prototype2code & go back history error (#156 ) * fix: snippet import bug * fix: history could back logic bug * fix: editor add left border when in dual mode * fix: setting-form title overflow bug	2024-05-20 15:26:07 +08:00
Wells	791fbb162a	fix: enhance code value validate in SettingForm (#152 ) * fix: update register setter strategy & add getSetter * fix: handle invalid code to prop value * fix: add validate logic to code setters * fix: update code validate * fix: update ui of settingForm header	2024-05-17 18:20:08 +08:00
Wells	704277b8f0	chore(release): publish - @music163/tango-context@1.1.0 - @music163/tango-core@1.1.0 - @music163/tango-designer@1.1.0 - @music163/tango-helpers@1.1.0 - @music163/tango-sandbox@1.0.3 - @music163/tango-setting-form@1.2.0 - @music163/tango-ui@1.1.0	2024-05-17 11:13:19 +08:00
Wells	1fc22a4535	fix: support quick set tid in SettingForm (#151 ) * fix: support quick set tid * fix: shape return type of parseDndId	2024-05-17 10:53:18 +08:00
Wells	ffaa276b5c	feat: refactor parse attribute value (#149 ) * refactor: update attribute value parsing logic * fix: refactor toggle setter logic * fix: enhance basic setters * fix: move basic value setter to setting-form package * fix: add setter type * fix: update * feat: support toggle formObject to codeSetter * fix: update invalid setter notice * fix: update node2value * fix: trigger onChange for formObject * docs: update * chore: up * feat: improve code2value function and fix related issues * Revert "chore: up" This reverts commit `a87d8fcce4`. * chore: update npm dependencies to latest versions	2024-05-16 13:03:41 +08:00
Wells	56d0877507	fix: parse module with module alias (#147 )	2024-05-11 14:25:45 +08:00
Wells	897fe0a5a1	chore(release): publish - @music163/tango-context@1.0.2 - @music163/tango-core@1.0.2 - @music163/tango-designer@1.0.3 - @music163/tango-helpers@1.0.0 - @music163/tango-sandbox@1.0.2 - @music163/tango-setting-form@1.1.0 - @music163/tango-ui@1.0.3	2024-05-09 10:54:49 +08:00
Wells	b52bbad547	fix: disable toggle variable for expSetter & add isValid to workspace (#146 ) * fix: add isValid to test if valid project * fix: disable toggle variable for expSetter	2024-05-08 20:11:22 +08:00
864907600cc	f7c837a8a9	feat: support validate on formItem (#145 ) Co-authored-by: ccloli <8115912+ccloli@users.noreply.github.com>	2024-05-08 19:57:32 +08:00
Wells	f64d178ab8	chore: up	2024-05-06 15:32:10 +08:00
maxwls	f2dcc942ed	chore: support start playground in different os (#139 ) Co-authored-by: 王龙生 <wanglongsheng@pansoft.com>	2024-05-06 15:31:09 +08:00
Wells	ac48a8880e	fix: update setting form styles & sort deprecated props to the bottom (#142 ) * fix: sort the deprecated props to the bottom * fix: merge undefined props * fix: update form label color	2024-05-06 15:30:29 +08:00