chore(release): publish

- @music163/tango-context@1.0.0-alpha.9 - @music163/tango-core@1.0.0-alpha.9 - @music163/tango-designer@1.0.0-alpha.17 - @music163/tango-helpers@1.0.0-alpha.5 - @music163/tango-sandbox@1.0.0-alpha.9 - @music163/tango-setting-form@1.0.0-alpha.13 - @music163/tango-ui@1.0.0-alpha.11
feat: quick add sibling nodes (#127 )
2026-09-05 23:48:19 +08:00 · 2024-03-26 19:43:53 +08:00 · 2024-03-26 19:36:28 +08:00 · 2024-03-21 16:06:40 +08:00 · 2024-03-21 15:33:23 +08:00 · 2024-03-20 17:42:17 +08:00
28 changed files with 609 additions and 59 deletions
--- a/apps/playground/.umirc.ts
+++ b/apps/playground/.umirc.ts
@@ -7,6 +7,7 @@ const resolvePackageIndex = (relativeEntry: string) =>
 export default defineConfig({
  routes: [
    { path: '/', component: 'index' },
+    { path: '/mail', component: 'mail' },
    { path: '/docs', component: 'docs' },
  ],
  npmClient: 'yarn',
--- a/apps/playground/src/helpers/index.tsx
+++ b/apps/playground/src/helpers/index.tsx
@@ -136,7 +136,7 @@ const SnippetButtonGroup: ComponentPrototypeType = {
  relatedImports: ['Space', 'Button'],
 };

-export const prototypes = {
+export const extendPrototypes = {
  CtPcToggleButton: bizToggleButtonPrototype,
  SnippetSuccessResult,
  Snippet2ColumnLayout,
--- a/apps/playground/src/helpers/mail-files.ts
+++ b/apps/playground/src/helpers/mail-files.ts
@@ -0,0 +1,180 @@
+const packageJson = {
+  name: 'demo',
+  private: true,
+  dependencies: {
+    '@music163/tango-mail': '0.1.1',
+    '@music163/tango-boot': '0.2.5',
+    react: '17.0.2',
+    'react-dom': '17.0.2',
+    'prop-types': '15.7.2',
+    tslib: '2.5.0',
+  },
+};
+
+const tangoConfigJson = {
+  designerConfig: {
+    autoGenerateComponentId: true,
+  },
+  packages: {
+    react: {
+      version: '17.0.2',
+      library: 'React',
+      type: 'dependency',
+      resources: ['https://unpkg.com/react@{{version}}/umd/react.development.js'],
+    },
+    'react-dom': {
+      version: '17.0.2',
+      library: 'ReactDOM',
+      type: 'dependency',
+      resources: ['https://unpkg.com/react-dom@{{version}}/umd/react-dom.development.js'],
+    },
+    'react-is': {
+      version: '16.13.1',
+      library: 'ReactIs',
+      type: 'dependency',
+      resources: ['https://unpkg.com/react-is@{{version}}/umd/react-is.production.min.js'],
+    },
+    '@music163/tango-boot': {
+      description: '云音乐低代码运行时框架',
+      version: '0.2.5',
+      library: 'TangoBoot',
+      type: 'baseDependency',
+      resources: ['https://unpkg.com/@music163/tango-boot@{{version}}/dist/boot.js'],
+      // resources: ['http://localhost:9001/boot.js'],
+    },
+    '@music163/tango-mail': {
+      description: 'TangoMail 基础物料',
+      version: '0.1.1',
+      library: 'TangoMail',
+      type: 'baseDependency',
+      resources: ['https://unpkg.com/@music163/tango-mail@{{version}}/dist/index.js'],
+      designerResources: ['https://unpkg.com/@music163/tango-mail@{{version}}/dist/designer.js'],
+    },
+  },
+};
+
+const routesCode = `
+import Mail from "./pages/mail";
+
+const routes = [
+  {
+    path: '/',
+    exact: true,
+    component: Mail,
+  },
+];
+
+export default routes;
+`;
+
+const entryCode = `
+import { runApp } from '@music163/tango-boot';
+import routes from './routes';
+
+runApp({
+  boot: {
+    mountElement: document.querySelector('#root'),
+    qiankun: false,
+  },
+
+  router: {
+    type: 'browser',
+    config: routes,
+  },
+});
+`;
+
+const viewHomeCode = `
+import React from 'react';
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Hr,
+  Html,
+  Preview,
+  Section,
+  Text,
+} from '@music163/tango-mail';
+
+const WelcomeEmail = () => (
+  <Html>
+    <Head />
+    <Preview>The sales intelligence platform that helps you uncover qualified leads.</Preview>
+    <Body style={main}>
+      <Container style={container}>
+        <Text style={paragraph}>Hi wells,</Text>
+        <Text style={paragraph}>
+          Welcome to Koala, the sales intelligence platform that helps you uncover qualified leads
+          and close deals faster.
+        </Text>
+        <Section style={btnContainer}>
+          <Button style={button} href="https://getkoala.com">
+            Get started
+          </Button>
+        </Section>
+        <Text style={paragraph}>
+          Best,
+          <br />
+          The Koala team
+        </Text>
+        <Hr style={hr} />
+        <Text style={footer}>470 Noor Ave STE B #1148, South San Francisco, CA 94080</Text>
+      </Container>
+    </Body>
+  </Html>
+);
+
+const main = {
+  backgroundColor: '#ffffff',
+  fontFamily:
+    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
+};
+
+const container = {
+  margin: '0 auto',
+  padding: '20px 0 48px',
+};
+
+const paragraph = {
+  fontSize: '16px',
+  lineHeight: '26px',
+};
+
+const btnContainer = {
+  textAlign: 'center',
+};
+
+const button = {
+  backgroundColor: '#5F51E8',
+  borderRadius: '3px',
+  color: '#fff',
+  fontSize: '16px',
+  textDecoration: 'none',
+  textAlign: 'center',
+  display: 'block',
+  padding: '12px',
+};
+
+const hr = {
+  borderColor: '#cccccc',
+  margin: '20px 0',
+};
+
+const footer = {
+  color: '#8898aa',
+  fontSize: '12px',
+};
+
+export default WelcomeEmail;
+`;
+
+export const mailFiles = [
+  { filename: '/package.json', code: JSON.stringify(packageJson) },
+  { filename: '/tango.config.json', code: JSON.stringify(tangoConfigJson) },
+  { filename: '/README.md', code: '# readme' },
+  { filename: '/src/index.js', code: entryCode },
+  { filename: '/src/pages/mail.js', code: viewHomeCode },
+  { filename: '/src/routes.js', code: routesCode },
+];
--- a/apps/playground/src/helpers/mock-files.ts
+++ b/apps/playground/src/helpers/mock-files.ts
@@ -2,7 +2,7 @@ const packageJson = {
  name: 'demo',
  private: true,
  dependencies: {
-    '@music163/antd': '0.2.1',
+    '@music163/antd': '0.2.2',
    '@music163/tango-boot': '0.2.5',
    react: '17.0.2',
    'react-dom': '17.0.2',
@@ -56,7 +56,7 @@ const tangoConfigJson = {
    },
    '@music163/antd': {
      description: '云音乐低代码中后台应用基础物料',
-      version: '0.2.1',
+      version: '0.2.2',
      library: 'TangoAntd',
      type: 'baseDependency',
      resources: [
@@ -149,29 +149,34 @@ import {
  Button,
  Input,
  FormilyForm,
+  FormilyFormItem,
 } from "@music163/antd";
-import { Space } from '@music163/antd';
-import { LocalButton } from '../components';
-
+import { Space } from "@music163/antd";
+import { LocalButton } from "../components";
 class App extends React.Component {
  render() {
    return (
      <Page title={tango.stores.app.title}>
-       <Section tid="section1" title="Section Title">
-        your input: <Input tid="input1" defaultValue="hello" />
-        copy input: <Input value={tango.page.input1?.value} />
-       </Section>
-       <Section tid="section2">
-       <Space tid="space1">
-          <LocalButton />
-          <Button tid="button1">button</Button>
+        <Section tid="section1" title="Section Title">
+          your input: <Input tid="input1" defaultValue="hello" />
+          copy input: <Input value={tango.page.input1?.value} />
+        </Section>
+        <Section tid="section2">
+          <Space tid="space1">
+            <LocalButton />
+            <Button tid="button1">button</Button>
          </Space>
        </Section>
+        <Section title="区块标题" tid="section3">
+          <FormilyForm tid="formilyForm1">
+            <FormilyFormItem name="input1" component="Input" label="表单项" />
+            <FormilyFormItem name="select1" component="Select" label="表单项" />
+          </FormilyForm>
+        </Section>
      </Page>
    );
  }
 }
-
 export default definePage(App);
 `;

--- a/apps/playground/src/pages/index.tsx
+++ b/apps/playground/src/pages/index.tsx
@@ -15,7 +15,13 @@ import {
  themeLight,
 } from '@music163/tango-designer';
 import { createEngine, Workspace } from '@music163/tango-core';
-import { Logo, ProjectDetail, bootHelperVariables, sampleFiles } from '../helpers';
+import {
+  Logo,
+  ProjectDetail,
+  bootHelperVariables,
+  extendPrototypes,
+  sampleFiles,
+} from '../helpers';
 import {
  ApiOutlined,
  AppstoreAddOutlined,
@@ -29,6 +35,7 @@ import {
 const workspace = new Workspace({
  entry: '/src/index.js',
  files: sampleFiles,
+  prototypes: extendPrototypes,
 });

 // 2. 引擎初始化
@@ -49,12 +56,39 @@ createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/c/font_2891794_cou9i7556tl.js',
 });

+const menuData = {
+  common: [
+    {
+      title: '基本',
+      items: [
+        'Button',
+        'Section',
+        'Columns',
+        'Column',
+        'Box',
+        'Space',
+        'Typography',
+        'Title',
+        'Paragraph',
+      ],
+    },
+    {
+      title: '输入',
+      items: ['Input', 'InputNumber', 'Select'],
+    },
+    {
+      title: 'Formily表单',
+      items: ['FormilyForm', 'FormilyFormItem', 'FormilySubmit', 'FormilyReset'],
+    },
+  ],
+};
+
 /**
 * 5. 平台初始化，访问 https://local.netease.com:6006/
 */
 export default function App() {
  const [menuLoading, setMenuLoading] = useState(true);
-  const [menuData, setMenuData] = useState(false);
+  // const [menuData, setMenuData] = useState(false);
  return (
    <Designer
      theme={themeLight}
@@ -92,7 +126,7 @@ export default function App() {
            label="组件"
            icon={<AppstoreAddOutlined />}
            widgetProps={{
-              menuData: menuData as any,
+              menuData,
              loading: menuLoading,
            }}
          />
@@ -120,10 +154,23 @@ export default function App() {
                if (e.type === 'done') {
                  const sandboxWindow: any = sandboxQuery.window;
                  if (sandboxWindow.TangoAntd) {
-                    if (sandboxWindow.TangoAntd.menuData) {
-                      setMenuData(sandboxWindow.TangoAntd.menuData);
-                    }
+                    // if (sandboxWindow.TangoAntd.menuData) {
+                    //   setMenuData(sandboxWindow.TangoAntd.menuData);
+                    // }
                    if (sandboxWindow.TangoAntd.prototypes) {
+                      sandboxWindow.TangoAntd.prototypes['Section'].siblingNames = [
+                        'SnippetButtonGroup',
+                        'Section',
+                        'Section',
+                        'Section',
+                        'Section',
+                        'Section',
+                        'Section',
+                        'Section',
+                      ];
+                      sandboxWindow.TangoAntd.prototypes['FormilyFormItem'].siblingNames = [
+                        'FormilyFormItem',
+                      ];
                      workspace.setComponentPrototypes(sandboxWindow.TangoAntd.prototypes);
                    }
                  }
--- a/apps/playground/src/pages/mail.tsx
+++ b/apps/playground/src/pages/mail.tsx
@@ -0,0 +1,134 @@
+import React, { useState } from 'react';
+import { Box } from 'coral-system';
+import { Button, Space } from 'antd';
+import {
+  Designer,
+  DesignerPanel,
+  SettingPanel,
+  Sidebar,
+  Toolbar,
+  WorkspacePanel,
+  WorkspaceView,
+  CodeEditor,
+  Sandbox,
+  DndQuery,
+  themeLight,
+} from '@music163/tango-designer';
+import { createEngine, Workspace } from '@music163/tango-core';
+import { Logo, ProjectDetail, bootHelperVariables } from '@/helpers';
+import {
+  AppstoreAddOutlined,
+  BuildOutlined,
+  ClusterOutlined,
+  createFromIconfontCN,
+} from '@ant-design/icons';
+import { mailFiles } from '@/helpers/mail-files';
+
+// 1. 实例化工作区
+const workspace = new Workspace({
+  entry: '/src/index.js',
+  files: mailFiles,
+});
+
+// 2. 引擎初始化
+const engine = createEngine({
+  workspace,
+});
+
+// @ts-ignore
+window.__mailWorkspace__ = workspace;
+
+// 3. 沙箱初始化
+const sandboxQuery = new DndQuery({
+  context: 'iframe',
+});
+
+// 4. 图标库初始化（物料面板和组件树使用了 iconfont 里的图标）
+createFromIconfontCN({
+  scriptUrl: '//at.alicdn.com/t/c/font_2891794_cou9i7556tl.js',
+});
+
+/**
+ * 5. 平台初始化，访问 https://local.netease.com:6006/
+ */
+export default function App() {
+  const [menuLoading, setMenuLoading] = useState(true);
+  const [menuData, setMenuData] = useState(false);
+  return (
+    <Designer
+      theme={themeLight}
+      engine={engine}
+      config={{
+        customActionVariables: bootHelperVariables,
+        customExpressionVariables: bootHelperVariables,
+      }}
+      sandboxQuery={sandboxQuery}
+    >
+      <DesignerPanel
+        logo={<Logo />}
+        description={<ProjectDetail />}
+        actions={
+          <Box px="l">
+            <Toolbar>
+              <Toolbar.Item key="history" placement="left" />
+              <Toolbar.Item key="preview" placement="left" />
+              <Toolbar.Item key="modeSwitch" placement="right" />
+              <Toolbar.Item key="togglePanel" placement="right" />
+              <Toolbar.Separator />
+              <Toolbar.Item placement="right">
+                <Space>
+                  <Button type="primary">发布</Button>
+                </Space>
+              </Toolbar.Item>
+            </Toolbar>
+          </Box>
+        }
+      >
+        <Sidebar>
+          <Sidebar.Item
+            key="components"
+            label="组件"
+            icon={<AppstoreAddOutlined />}
+            widgetProps={{
+              menuData: menuData as any,
+              loading: menuLoading,
+            }}
+          />
+          <Sidebar.Item key="outline" label="结构" icon={<BuildOutlined />} />
+          <Sidebar.Item
+            key="dependency"
+            label="依赖"
+            icon={<ClusterOutlined />}
+            isFloat
+            width={800}
+          />
+        </Sidebar>
+        <WorkspacePanel>
+          <WorkspaceView mode="design">
+            <Sandbox
+              onMessage={(e) => {
+                if (e.type === 'done') {
+                  const sandboxWindow: any = sandboxQuery.window;
+                  if (sandboxWindow.TangoMail) {
+                    if (sandboxWindow.TangoMail.menuData) {
+                      setMenuData(sandboxWindow.TangoMail.menuData);
+                    }
+                    if (sandboxWindow.TangoMail.prototypes) {
+                      workspace.setComponentPrototypes(sandboxWindow.TangoMail.prototypes);
+                    }
+                  }
+                  setMenuLoading(false);
+                }
+              }}
+              navigatorExtra={<Button size="small">hello world</Button>}
+            />
+          </WorkspaceView>
+          <WorkspaceView mode="code">
+            <CodeEditor />
+          </WorkspaceView>
+        </WorkspacePanel>
+        <SettingPanel />
+      </DesignerPanel>
+    </Designer>
+  );
+}
--- a/packages/context/CHANGELOG.md
+++ b/packages/context/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [1.0.0-alpha.9](https://github.com/netease/tango/compare/@music163/tango-context@1.0.0-alpha.8...@music163/tango-context@1.0.0-alpha.9) (2024-03-26)
+
+**Note:** Version bump only for package @music163/tango-context
+
 # [1.0.0-alpha.8](https://github.com/netease/tango/compare/@music163/tango-context@1.0.0-alpha.7...@music163/tango-context@1.0.0-alpha.8) (2024-03-18)

 **Note:** Version bump only for package @music163/tango-context
--- a/packages/context/package.json
+++ b/packages/context/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@music163/tango-context",
-  "version": "1.0.0-alpha.8",
+  "version": "1.0.0-alpha.9",
  "description": "react context for tango-apps",
  "keywords": [
    "react",
@@ -31,8 +31,8 @@
    "react": ">= 16.8"
  },
  "dependencies": {
-    "@music163/tango-core": "^1.0.0-alpha.8",
-    "@music163/tango-helpers": "^1.0.0-alpha.4",
+    "@music163/tango-core": "^1.0.0-alpha.9",
+    "@music163/tango-helpers": "^1.0.0-alpha.5",
    "mobx-react-lite": "4.0.5"
  },
  "publishConfig": {
--- a/packages/core/CHANGELOG.md
+++ b/packages/core/CHANGELOG.md
@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [1.0.0-alpha.9](https://github.com/netease/tango/compare/@music163/tango-core@1.0.0-alpha.8...@music163/tango-core@1.0.0-alpha.9) (2024-03-26)
+
+### Features
+
+- quick add sibling nodes ([#127](https://github.com/netease/tango/issues/127)) ([9ed6a7d](https://github.com/netease/tango/commit/9ed6a7d1a4944d69d96e034f243b61531862e317))
+
 # [1.0.0-alpha.8](https://github.com/netease/tango/compare/@music163/tango-core@1.0.0-alpha.7...@music163/tango-core@1.0.0-alpha.8) (2024-03-18)

 **Note:** Version bump only for package @music163/tango-core
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@music163/tango-core",
-  "version": "1.0.0-alpha.8",
+  "version": "1.0.0-alpha.9",
  "description": "tango core",
  "author": "wwsun <ww.sun@outlook.com>",
  "homepage": "",
@@ -28,7 +28,7 @@
    "@babel/parser": "^7.23.5",
    "@babel/traverse": "^7.23.5",
    "@babel/types": "^7.23.5",
-    "@music163/tango-helpers": "^1.0.0-alpha.4",
+    "@music163/tango-helpers": "^1.0.0-alpha.5",
    "@types/babel__generator": "^7.6.7",
    "@types/babel__traverse": "^7.20.4",
    "mobx": "6.12.0",
--- a/packages/core/src/models/history.ts
+++ b/packages/core/src/models/history.ts
@@ -11,6 +11,8 @@ export enum HistoryMessage {
  ReplaceNode = 'replaceNode',
  CloneNode = 'cloneNode',
  InsertNode = 'insertNode',
+  InsertBeforeNode = 'insertBeforeNode',
+  InsertAfterNode = 'insertAfterNode',
  DropNode = 'dropNode',
  UpdateAttribute = 'updateAttribute',
  UpdateCode = 'updateCode',
--- a/packages/core/src/models/interfaces.ts
+++ b/packages/core/src/models/interfaces.ts
@@ -205,6 +205,8 @@ export interface IWorkspace {
  copySelectedNode: () => void;
  pasteSelectedNode: () => void;
  insertToSelectedNode: (childNameOrPrototype: string | ComponentPrototypeType) => void;
+  insertBeforeSelectedNode: (sourceNameOrPrototype: string | ComponentPrototypeType) => void;
+  insertAfterSelectedNode: (sourceNameOrPrototype: string | ComponentPrototypeType) => void;
  dropNode: () => void;
  insertToNode: (
    targetNodeId: string,
--- a/packages/core/src/models/workspace.ts
+++ b/packages/core/src/models/workspace.ts
@@ -1022,6 +1022,46 @@ export class Workspace extends EventTarget implements IWorkspace {
    }
  }

+  insertBeforeSelectedNode(sourceName: string | ComponentPrototypeType) {
+    if (!sourceName) {
+      return;
+    }
+    const targetNodeId = this.selectSource.first.id;
+    const sourcePrototype = this.getPrototype(sourceName);
+    const newNode = prototype2jsxElement(sourcePrototype);
+    const file = this.getNode(targetNodeId).file;
+    const { source, specifiers } = prototype2importDeclarationData(sourcePrototype, file.filename);
+
+    file.insertBefore(targetNodeId, newNode).addImportSpecifiers(source, specifiers).update();
+
+    this.history.push({
+      message: HistoryMessage.InsertBeforeNode,
+      data: {
+        [file.filename]: file.code,
+      },
+    });
+  }
+
+  insertAfterSelectedNode(sourceName: string | ComponentPrototypeType) {
+    if (!sourceName) {
+      return;
+    }
+    const targetNodeId = this.selectSource.first.id;
+    const sourcePrototype = this.getPrototype(sourceName);
+    const newNode = prototype2jsxElement(sourcePrototype);
+    const file = this.getNode(targetNodeId).file;
+    const { source, specifiers } = prototype2importDeclarationData(sourcePrototype, file.filename);
+
+    file.insertAfter(targetNodeId, newNode).addImportSpecifiers(source, specifiers).update();
+
+    this.history.push({
+      message: HistoryMessage.InsertAfterNode,
+      data: {
+        [file.filename]: file.code,
+      },
+    });
+  }
+
  updateSelectedNodeAttributes(
    attributes: Record<string, any> = {},
    relatedImports: string[] = [],
--- a/packages/designer/CHANGELOG.md
+++ b/packages/designer/CHANGELOG.md
@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [1.0.0-alpha.17](https://github.com/netease/tango/compare/@music163/tango-designer@1.0.0-alpha.16...@music163/tango-designer@1.0.0-alpha.17) (2024-03-26)
+
+### Features
+
+- quick add sibling nodes ([#127](https://github.com/netease/tango/issues/127)) ([9ed6a7d](https://github.com/netease/tango/commit/9ed6a7d1a4944d69d96e034f243b61531862e317))
+
+# [1.0.0-alpha.16](https://github.com/netease/tango/compare/@music163/tango-designer@1.0.0-alpha.15...@music163/tango-designer@1.0.0-alpha.16) (2024-03-21)
+
+### Bug Fixes
+
+- copy node path in variable tree ([6215ed9](https://github.com/netease/tango/commit/6215ed96f241adf6b67aa3019745bf7d40751787))
+
+# [1.0.0-alpha.15](https://github.com/netease/tango/compare/@music163/tango-designer@1.0.0-alpha.14...@music163/tango-designer@1.0.0-alpha.15) (2024-03-20)
+
+### Bug Fixes
+
+- quick insert child ([d640429](https://github.com/netease/tango/commit/d64042922bc21723025b1a59586ef23f37f17ffc))
+- update selection helper style ([bceb7a5](https://github.com/netease/tango/commit/bceb7a5c9cea9dc2acb091bf7967e5d3b7ba5210))
+
 # [1.0.0-alpha.14](https://github.com/netease/tango/compare/@music163/tango-designer@1.0.0-alpha.13...@music163/tango-designer@1.0.0-alpha.14) (2024-03-19)

 ### Bug Fixes
--- a/packages/designer/package.json
+++ b/packages/designer/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@music163/tango-designer",
-  "version": "1.0.0-alpha.14",
+  "version": "1.0.0-alpha.17",
  "description": "lowcode designer",
  "keywords": [
    "react"
@@ -33,12 +33,12 @@
  "dependencies": {
    "@ant-design/icons": "^4.8.0",
    "@music163/request": "^0.1.2",
-    "@music163/tango-context": "^1.0.0-alpha.8",
-    "@music163/tango-core": "^1.0.0-alpha.8",
-    "@music163/tango-helpers": "^1.0.0-alpha.4",
-    "@music163/tango-sandbox": "^1.0.0-alpha.8",
-    "@music163/tango-setting-form": "^1.0.0-alpha.12",
-    "@music163/tango-ui": "^1.0.0-alpha.10",
+    "@music163/tango-context": "^1.0.0-alpha.9",
+    "@music163/tango-core": "^1.0.0-alpha.9",
+    "@music163/tango-helpers": "^1.0.0-alpha.5",
+    "@music163/tango-sandbox": "^1.0.0-alpha.9",
+    "@music163/tango-setting-form": "^1.0.0-alpha.13",
+    "@music163/tango-ui": "^1.0.0-alpha.11",
    "antd": "^4.24.2",
    "cash-dom": "^8.1.2",
    "classnames": "^2.3.2",
--- a/packages/designer/src/components/variable-tree/index.tsx
+++ b/packages/designer/src/components/variable-tree/index.tsx
@@ -184,6 +184,12 @@ export function VariableTree(props: VariableTreeProps) {

            if (isLeaf) {
              const showView = node.showViewButton ?? showViewButton;
+
+              let nodePath = node.key;
+              if (/^(stores|services)\./.test(nodePath)) {
+                nodePath = `tango.${node.key.replaceAll('.', '?.').replace('?.', '.')}`;
+              }
+
              return (
                <Box display="flex" justifyContent="space-between" alignItems="center">
                  <Text flex="1" truncated>
@@ -216,7 +222,7 @@ export function VariableTree(props: VariableTreeProps) {
                        />
                      </Popconfirm>
                    )}
-                    <CopyClipboard text={`tango.${node.key.replaceAll('.', '?.')}`}>
+                    <CopyClipboard text={nodePath}>
                      {({ copied, onClick }) => {
                        const label = copied ? '已复制' : '复制变量路径';
                        return (
--- a/packages/designer/src/setters/expression-setter.tsx
+++ b/packages/designer/src/setters/expression-setter.tsx
@@ -81,7 +81,7 @@ export function ExpressionSetter(props: ExpressionSetterProps) {
    modalTitle,
    modalTip,
    autoCompleteOptions,
-    placeholder = '输入JS表达式代码',
+    placeholder = '输入JS代码',
    value: valueProp,
    status,
    allowClear = true,
--- a/packages/designer/src/simulator/selection.tsx
+++ b/packages/designer/src/simulator/selection.tsx
@@ -2,7 +2,7 @@ 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 { PlusSquareOutlined, HolderOutlined, InfoCircleOutlined } from '@ant-design/icons';
+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';
@@ -59,6 +59,26 @@ const selectionBoxStyle = css`
  top: 0;
 `;

+const topAddSiblingBtnStyle = css`
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  top: 0;
+  border-radius: 32px;
+  z-index: 999;
+  pointer-events: auto;
+`;
+
+const bottomAddSiblingBtnStyle = css`
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%, 50%);
+  bottom: 0;
+  border-radius: 32px;
+  z-index: 999;
+  pointer-events: auto;
+`;
+
 interface IInsertedData {
  name: string;
  label: string;
@@ -114,6 +134,19 @@ function SelectionBox({ showActions, actions, data }: SelectionBoxProps) {
    });
  }

+  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) {
@@ -150,6 +183,32 @@ function SelectionBox({ showActions, actions, data }: SelectionBoxProps) {
      css={selectionBoxStyle}
      style={style}
    >
+      {siblingList.length > 0 ? (
+        <>
+          <InsertedDropdown
+            title="在当前节点的前方添加兄弟节点"
+            options={siblingList}
+            onSelect={(name) => {
+              workspace.insertBeforeSelectedNode(name);
+            }}
+          >
+            <Tooltip title="在当前节点的前方添加兄弟节点">
+              <SelectionHelper icon={<PlusOutlined />} css={topAddSiblingBtnStyle} />
+            </Tooltip>
+          </InsertedDropdown>
+          <InsertedDropdown
+            title="在当前节点的后方添加兄弟节点"
+            options={siblingList}
+            onSelect={(name) => {
+              workspace.insertAfterSelectedNode(name);
+            }}
+          >
+            <Tooltip title="在当前节点的后方添加兄弟节点">
+              <SelectionHelper icon={<PlusOutlined />} css={bottomAddSiblingBtnStyle} />
+            </Tooltip>
+          </InsertedDropdown>
+        </>
+      ) : null}
      {showActions && (
        <SelectionHelpers align={selectionHelpersAlign}>
          <SelectionHelper
@@ -194,7 +253,9 @@ function SelectionBox({ showActions, actions, data }: SelectionBoxProps) {
                workspace.insertToSelectedNode(name);
              }}
            >
-              <SelectionHelper icon={<PlusSquareOutlined />} />
+              <Tooltip title="快捷添加子元素">
+                <SelectionHelper icon={<PlusOutlined />} />
+              </Tooltip>
            </InsertedDropdown>
          )}
        </SelectionHelpers>
@@ -244,10 +305,6 @@ const selectionHelperStyle = css`
  cursor: pointer;
  background: var(--color-active, var(--tango-colors-brand));

-  svg {
-    margin-right: 4px;
-  }
-
  &:hover {
    background: var(--color-active-hover, var(--tango-colors-primary-50));
  }
@@ -258,7 +315,13 @@ interface SelectionHelperProps extends HTMLCoralProps<'button'> {
  label?: React.ReactNode;
 }

-const SelectionHelper = ({ icon, label, children, ...rest }: SelectionHelperProps) => {
+const SelectionHelper = ({
+  icon,
+  label,
+  children,
+  css: customCss,
+  ...rest
+}: SelectionHelperProps) => {
  return (
    <Button
      position="relative"
@@ -268,7 +331,7 @@ const SelectionHelper = ({ icon, label, children, ...rest }: SelectionHelperProp
      border="0"
      borderRadius="s"
      fontSize="12px"
-      css={selectionHelperStyle}
+      css={[selectionHelperStyle, customCss]}
      {...rest}
    >
      {icon}
@@ -368,11 +431,17 @@ const NameSelector = ({ label, parents = [], onSelect = noop }: NameSelectorProp
 };

 interface InsertedDropdownProps extends DropdownProps {
+  title?: string;
  options?: IInsertedData[];
  onSelect?: (name: string) => void;
 }

-function InsertedDropdown({ options = [], onSelect, ...props }: InsertedDropdownProps) {
+function InsertedDropdown({
+  title = '为当前节点添加子元素',
+  options = [],
+  onSelect,
+  ...props
+}: InsertedDropdownProps) {
  return (
    <Dropdown
      trigger={['click']}
@@ -385,17 +454,18 @@ function InsertedDropdown({ options = [], onSelect, ...props }: InsertedDropdown
            border="solid"
            borderColor="line2"
            overflow="hidden"
+            width="320px"
          >
            <Box px="l" py="m" color="text2">
-              为当前节点添加子元素
+              {title}
            </Box>
-            <Box>
+            <Box maxHeight={360} overflowY="auto">
              {options.map((item) => (
                <InsertedItem
                  key={item.name}
                  label={item.label}
                  icon={item.icon}
-                  description={item.description}
+                  description={item.description || '暂无组件描述'}
                  onClick={() => onSelect?.(item.name)}
                />
              ))}
@@ -410,6 +480,7 @@ function InsertedDropdown({ options = [], onSelect, ...props }: InsertedDropdown

 const insertedItemStyle = css`
  cursor: pointer;
+  user-select: none;

  &:hover {
    background-color: var(--tango-colors-fill2);
@@ -420,9 +491,18 @@ function InsertedItem({
  label,
  icon = 'icon-placeholder',
  description,
+  ...rest
 }: HTMLCoralProps<'div'> & Omit<IInsertedData, 'name'>) {
  return (
-    <Box display="flex" columnGap="m" px="l" py="m" fontSize="12px" css={insertedItemStyle}>
+    <Box
+      display="flex"
+      columnGap="m"
+      px="l"
+      py="m"
+      fontSize="12px"
+      css={insertedItemStyle}
+      {...rest}
+    >
      <Box
        size="35px"
        fontSize="32px"
--- a/packages/helpers/CHANGELOG.md
+++ b/packages/helpers/CHANGELOG.md
@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [1.0.0-alpha.5](https://github.com/netease/tango/compare/@music163/tango-helpers@1.0.0-alpha.4...@music163/tango-helpers@1.0.0-alpha.5) (2024-03-26)
+
+### Features
+
+- quick add sibling nodes ([#127](https://github.com/netease/tango/issues/127)) ([9ed6a7d](https://github.com/netease/tango/commit/9ed6a7d1a4944d69d96e034f243b61531862e317))
+
 # [1.0.0-alpha.4](https://github.com/netease/tango/compare/@music163/tango-helpers@1.0.0-alpha.3...@music163/tango-helpers@1.0.0-alpha.4) (2024-03-18)

 ### Bug Fixes
--- a/packages/helpers/package.json
+++ b/packages/helpers/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@music163/tango-helpers",
-  "version": "1.0.0-alpha.4",
+  "version": "1.0.0-alpha.5",
  "description": "Shared types, helpers, and hooks of tango-apps",
  "keywords": [
    "shared",
--- a/packages/helpers/src/types/prototype.ts
+++ b/packages/helpers/src/types/prototype.ts
@@ -233,6 +233,10 @@ export type ComponentPrototypeType = {
   * 直接子节点的类型
   */
  childrenName?: string | string[];
+  /**
+   * 兄弟节点的类型
+   */
+  siblingNames?: string[];
  /**
   * 组件的可配置属性集
   */
--- a/packages/sandbox/CHANGELOG.md
+++ b/packages/sandbox/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [1.0.0-alpha.9](https://github.com/netease/tango/compare/@music163/tango-sandbox@1.0.0-alpha.8...@music163/tango-sandbox@1.0.0-alpha.9) (2024-03-26)
+
+**Note:** Version bump only for package @music163/tango-sandbox
+
 # [1.0.0-alpha.8](https://github.com/netease/tango/compare/@music163/tango-sandbox@1.0.0-alpha.7...@music163/tango-sandbox@1.0.0-alpha.8) (2024-03-18)

 **Note:** Version bump only for package @music163/tango-sandbox
--- a/packages/sandbox/package.json
+++ b/packages/sandbox/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@music163/tango-sandbox",
-  "version": "1.0.0-alpha.8",
+  "version": "1.0.0-alpha.9",
  "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.0-alpha.8",
-    "@music163/tango-helpers": "^1.0.0-alpha.4",
+    "@music163/tango-core": "^1.0.0-alpha.9",
+    "@music163/tango-helpers": "^1.0.0-alpha.5",
    "crypto-js": "^4.1.1",
    "lodash.isequal": "4.5.0",
    "react-frame-component": "^5.2.4"
--- a/packages/setting-form/CHANGELOG.md
+++ b/packages/setting-form/CHANGELOG.md
@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [1.0.0-alpha.13](https://github.com/netease/tango/compare/@music163/tango-setting-form@1.0.0-alpha.12...@music163/tango-setting-form@1.0.0-alpha.13) (2024-03-26)
+
+### Features
+
+- quick add sibling nodes ([#127](https://github.com/netease/tango/issues/127)) ([9ed6a7d](https://github.com/netease/tango/commit/9ed6a7d1a4944d69d96e034f243b61531862e317))
+
 # [1.0.0-alpha.12](https://github.com/netease/tango/compare/@music163/tango-setting-form@1.0.0-alpha.11...@music163/tango-setting-form@1.0.0-alpha.12) (2024-03-19)

 **Note:** Version bump only for package @music163/tango-setting-form
--- a/packages/setting-form/package.json
+++ b/packages/setting-form/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@music163/tango-setting-form",
-  "version": "1.0.0-alpha.12",
+  "version": "1.0.0-alpha.13",
  "description": "setting form of tango-apps",
  "author": "wwsun <ww.sun@outlook.com>",
  "homepage": "",
@@ -28,9 +28,9 @@
  },
  "dependencies": {
    "@ant-design/icons": "^4.8.0",
-    "@music163/tango-core": "^1.0.0-alpha.8",
-    "@music163/tango-helpers": "^1.0.0-alpha.4",
-    "@music163/tango-ui": "^1.0.0-alpha.10",
+    "@music163/tango-core": "^1.0.0-alpha.9",
+    "@music163/tango-helpers": "^1.0.0-alpha.5",
+    "@music163/tango-ui": "^1.0.0-alpha.11",
    "antd": "^4.24.2",
    "coral-system": "^1.0.5",
    "mobx": "6.12.0",
--- a/packages/setting-form/src/form-item.tsx
+++ b/packages/setting-form/src/form-item.tsx
@@ -170,7 +170,7 @@ export function createFormItem(options: IFormItemCreateOptions) {
              <ToggleButton
                borderRadius="s"
                size="s"
-                shape="outline"
+                shape="ghost"
                type="primary"
                tooltip={isVariable ? '关闭 JS 表达式' : '使用 JS 表达式'}
                tooltipPlacement="left"
--- a/packages/ui/CHANGELOG.md
+++ b/packages/ui/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [1.0.0-alpha.11](https://github.com/netease/tango/compare/@music163/tango-ui@1.0.0-alpha.10...@music163/tango-ui@1.0.0-alpha.11) (2024-03-26)
+
+**Note:** Version bump only for package @music163/tango-ui
+
 # [1.0.0-alpha.10](https://github.com/netease/tango/compare/@music163/tango-ui@1.0.0-alpha.9...@music163/tango-ui@1.0.0-alpha.10) (2024-03-19)

 ### Bug Fixes
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@music163/tango-ui",
-  "version": "1.0.0-alpha.10",
+  "version": "1.0.0-alpha.11",
  "description": "ui widgets of tango",
  "keywords": [
    "react",
@@ -38,7 +38,7 @@
    "@codemirror/lang-javascript": "^6.2.1",
    "@codemirror/lint": "^6.4.2",
    "@codemirror/search": "^6.5.5",
-    "@music163/tango-helpers": "^1.0.0-alpha.4",
+    "@music163/tango-helpers": "^1.0.0-alpha.5",
    "@uiw/react-codemirror": "^4.21.21",
    "antd": "^4.24.2",
    "classnames": "^2.5.1",
Author	SHA1	Message	Date
Wells	47364e4219	chore(release): publish - @music163/tango-context@1.0.0-alpha.9 - @music163/tango-core@1.0.0-alpha.9 - @music163/tango-designer@1.0.0-alpha.17 - @music163/tango-helpers@1.0.0-alpha.5 - @music163/tango-sandbox@1.0.0-alpha.9 - @music163/tango-setting-form@1.0.0-alpha.13 - @music163/tango-ui@1.0.0-alpha.11	2024-03-26 19:43:53 +08:00
Wells	9ed6a7d1a4	feat: quick add sibling nodes (#127 ) * docs: add mail example * fix: update SettingForm style * fix: add tooltip to quick add action * feat: quick add sibling nodes * fix: update view	2024-03-26 19:36:28 +08:00
Wells	6f2c8f239a	chore(release): publish - @music163/tango-designer@1.0.0-alpha.16	2024-03-21 16:06:40 +08:00
Wells	6215ed96f2	fix: copy node path in variable tree	2024-03-21 15:33:23 +08:00
Wells	190aa1d8ee	chore(release): publish - @music163/tango-designer@1.0.0-alpha.15	2024-03-20 17:42:17 +08:00
Wells	bceb7a5c9c	fix: update selection helper style	2024-03-20 17:40:12 +08:00
Wells	d64042922b	fix: quick insert child	2024-03-20 17:10:52 +08:00