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-03 14:37:28 +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
35 changed files with 786 additions and 119 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. 引擎初始化
@@ -46,15 +53,42 @@ const sandboxQuery = new DndQuery({

 // 4. 图标库初始化（物料面板和组件树使用了 iconfont 里的图标）
 createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/c/font_2891794_lzc7rtwuzf.js',
+  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/apps/storybook/src/setting-form.stories.tsx
+++ b/apps/storybook/src/setting-form.stories.tsx
@@ -1,18 +1,29 @@
 import React from 'react';
 import { FormModel, SettingForm, register } from '@music163/tango-setting-form';
 import { ComponentPrototypeType } from '@music163/tango-helpers';
-import { BorderSetter } from '@music163/tango-designer/src/setters/style-setter';
+import { BorderSetter, DisplaySetter } from '@music163/tango-designer/src/setters/style-setter';
 import { Box } from 'coral-system';
 import { JsonView } from '@music163/tango-ui';
 import { toJS } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { Card } from 'antd';
+import { createFromIconfontCN } from '@ant-design/icons';

+// 这里按需注入，因为部分 setter 依赖 Designer 的上下文
 register({
  name: 'borderSetter',
  component: BorderSetter,
 });

+register({
+  name: 'displaySetter',
+  component: DisplaySetter,
+});
+
+createFromIconfontCN({
+  scriptUrl: '//at.alicdn.com/t/c/font_2891794_cou9i7556tl.js',
+});
+
 export default {
  title: 'SettingForm',
 };
@@ -31,6 +42,14 @@ const prototype: ComponentPrototypeType = {
      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',
--- a/packages/context/CHANGELOG.md
+++ b/packages/context/CHANGELOG.md
@@ -3,6 +3,14 @@
 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
+
 # [1.0.0-alpha.7](https://github.com/netease/tango/compare/@music163/tango-context@1.0.0-alpha.6...@music163/tango-context@1.0.0-alpha.7) (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.7",
+  "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.7",
-    "@music163/tango-helpers": "^1.0.0-alpha.3",
+    "@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,16 @@
 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
+
 # [1.0.0-alpha.7](https://github.com/netease/tango/compare/@music163/tango-core@1.0.0-alpha.6...@music163/tango-core@1.0.0-alpha.7) (2024-03-18)

 ### Features
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@music163/tango-core",
-  "version": "1.0.0-alpha.7",
+  "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.3",
+    "@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,37 @@
 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
+
+- select outline node & render dependency list ([#118](https://github.com/netease/tango/issues/118)) ([07febb3](https://github.com/netease/tango/commit/07febb385f710f9a0bc43639ce22787bb05e97ed))
+
+# [1.0.0-alpha.13](https://github.com/netease/tango/compare/@music163/tango-designer@1.0.0-alpha.12...@music163/tango-designer@1.0.0-alpha.13) (2024-03-18)
+
+### Bug Fixes
+
+- add deprecated and data group to ComponentPropType ([#116](https://github.com/netease/tango/issues/116)) ([9f7441c](https://github.com/netease/tango/commit/9f7441c13400dba55c58b7dd6ce9429013edbc45))
+
 # [1.0.0-alpha.12](https://github.com/netease/tango/compare/@music163/tango-designer@1.0.0-alpha.11...@music163/tango-designer@1.0.0-alpha.12) (2024-03-18)

 ### 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.12",
+  "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.7",
-    "@music163/tango-core": "^1.0.0-alpha.7",
-    "@music163/tango-helpers": "^1.0.0-alpha.3",
-    "@music163/tango-sandbox": "^1.0.0-alpha.7",
-    "@music163/tango-setting-form": "^1.0.0-alpha.10",
-    "@music163/tango-ui": "^1.0.0-alpha.8",
+    "@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/choice-setter.tsx
+++ b/packages/designer/src/setters/choice-setter.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { Radio, RadioProps, Tooltip } from 'antd';
 import type { OptionType } from '@music163/tango-helpers';
 import { FormItemComponentProps } from '@music163/tango-setting-form';
+import { IconFont } from '@music163/tango-ui';

 interface ChoiceSetterProps {
-  mode?: 'text' | 'icon';
  options?: OptionType[];
 }

@@ -13,6 +13,18 @@ export function ChoiceSetter({
  onChange,
  ...props
 }: FormItemComponentProps<string> & ChoiceSetterProps) {
+  const renderIcon = useCallback((icon: string) => {
+    if (!icon) {
+      return null;
+    }
+
+    if (icon.startsWith('icon-')) {
+      return <IconFont type={icon} />;
+    }
+
+    return null;
+  }, []);
+
  return (
    <Radio.Group
      optionType="button"
@@ -24,6 +36,7 @@ export function ChoiceSetter({
    >
      {options.map((item) => (
        <RadioButton tip={item.tip} key={item.value} value={item.value}>
+          {renderIcon(item.icon)}
          {item.label}
        </RadioButton>
      ))}
--- 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/sidebar/dependency-panel.tsx
+++ b/packages/designer/src/sidebar/dependency-panel.tsx
@@ -10,7 +10,6 @@ import {
  Popconfirm,
  Radio,
  message,
-  Tag,
  Checkbox,
  ModalProps,
 } from 'antd';
@@ -18,7 +17,7 @@ import { FormListProps } from 'antd/lib/form';
 import { Box, Text } from 'coral-system';
 import semverLt from 'semver/functions/lt';
 import semverValid from 'semver/functions/valid';
-import { ConfigGroup, ConfigItem } from '@music163/tango-ui';
+import { ColorTag, ConfigGroup, ConfigItem } from '@music163/tango-ui';
 import { MinusCircleOutlined, PlusOutlined, QuestionCircleOutlined } from '@ant-design/icons';
 import { useBoolean } from '@music163/tango-helpers';
 import { isUndefined } from 'lodash-es';
@@ -101,8 +100,8 @@ export const DependencyPanel = observer(
        />
        <ConfigGroup
          title={
-            <>
-              基础包&nbsp;
+            <div>
+              基础包
              <Tooltip
                title={
                  <>
@@ -115,7 +114,7 @@ export const DependencyPanel = observer(
              >
                <QuestionCircleOutlined />
              </Tooltip>
-            </>
+            </div>
          }
          key={DependencyItemType.基础包}
        >
@@ -332,25 +331,19 @@ function RenderItem({
    const packageJsonIncluded = !!dependencies?.[name];
    const tangoConfigJsonIncluded = !!packageInfo;

-    return [
-      hasUmd && (
-        <Tooltip title="该依赖拥有 UMD 资源，可优化加载速度">
-          <Tag key="hasUmd" color="green">
+    return (
+      <Box display="inline-block">
+        {hasUmd && (
+          <ColorTag key="hasUmd" color="green" tooltip="该依赖拥有 UMD 资源，可优化加载速度">
            UMD
-          </Tag>
-        </Tooltip>
-      ),
-      packageJsonIncluded && (
-        <Tooltip title="此依赖在 package.json 中存在">
-          <Tag key="packageJson">package</Tag>
-        </Tooltip>
-      ),
-      tangoConfigJsonIncluded && (
-        <Tooltip title="此依赖在 tango.config.json 中存在">
-          <Tag key="tangoConfigJson">tango.config</Tag>
-        </Tooltip>
-      ),
-    ].filter((e) => e);
+          </ColorTag>
+        )}
+        {packageJsonIncluded && <ColorTag tooltip="此依赖在 package.json 中存在">package</ColorTag>}
+        {tangoConfigJsonIncluded && (
+          <ColorTag tooltip="此依赖在 tango.config.json 中存在">tango.config</ColorTag>
+        )}
+      </Box>
+    );
  }, [showTags, workspace, record]);

  return (
--- a/packages/designer/src/sidebar/outline-panel/components-tree.tsx
+++ b/packages/designer/src/sidebar/outline-panel/components-tree.tsx
@@ -172,12 +172,7 @@ export const ComponentsTree: React.FC<ComponentsTreeProps> = observer(
            const slotKey = keys?.[0] as string;
            const data = sandboxQuery.getDraggableParentsData(buildQueryBySlotId(slotKey), true);
            if (data && data.id) {
-              workspace.selectSource.select({
-                id: data.id,
-                name: data.name,
-                bounding: data.bounding,
-                parents: data.parents,
-              });
+              workspace.selectSource.select(data);
            }
            // export selected
            onSelect(slotKey);
--- a/packages/designer/src/simulator/selection.tsx
+++ b/packages/designer/src/simulator/selection.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import styled, { css, keyframes } from 'styled-components';
 import { Box, Button, Group, HTMLCoralProps } from 'coral-system';
-import { Dropdown, DropdownProps } from 'antd';
-import { PlusSquareOutlined, HolderOutlined, InfoCircleOutlined } from '@ant-design/icons';
+import { Dropdown, DropdownProps, 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 { Action, IconFont } from '@music163/tango-ui';
+import { IconFont } from '@music163/tango-ui';
 import { getDragGhostElement } from '../helpers';
 import { getWidget } from '../widgets';

@@ -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
@@ -179,13 +238,9 @@ function SelectionBox({ showActions, actions, data }: SelectionBoxProps) {
                  }}
                />
                {!isFromCurrentFile && (
-                  <Action
-                    as="span"
-                    color="white"
-                    tooltip={`该节点来自其他文件（${data.filename}）`}
-                    icon={<InfoCircleOutlined />}
-                    size="small"
-                  />
+                  <Tooltip title={`该节点来自其他文件（${data.filename}）`}>
+                    <InfoCircleOutlined />
+                  </Tooltip>
                )}
              </>
            }
@@ -198,7 +253,9 @@ function SelectionBox({ showActions, actions, data }: SelectionBoxProps) {
                workspace.insertToSelectedNode(name);
              }}
            >
-              <SelectionHelper icon={<PlusSquareOutlined />} />
+              <Tooltip title="快捷添加子元素">
+                <SelectionHelper icon={<PlusOutlined />} />
+              </Tooltip>
            </InsertedDropdown>
          )}
        </SelectionHelpers>
@@ -248,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));
  }
@@ -262,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"
@@ -272,7 +331,7 @@ const SelectionHelper = ({ icon, label, children, ...rest }: SelectionHelperProp
      border="0"
      borderRadius="s"
      fontSize="12px"
-      css={selectionHelperStyle}
+      css={[selectionHelperStyle, customCss]}
      {...rest}
    >
      {icon}
@@ -372,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']}
@@ -389,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)}
                />
              ))}
@@ -414,6 +480,7 @@ function InsertedDropdown({ options = [], onSelect, ...props }: InsertedDropdown

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

  &:hover {
    background-color: var(--tango-colors-fill2);
@@ -424,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,18 @@
 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
+
+- add deprecated and data group to ComponentPropType ([#116](https://github.com/netease/tango/issues/116)) ([9f7441c](https://github.com/netease/tango/commit/9f7441c13400dba55c58b7dd6ce9429013edbc45))
+
 # [1.0.0-alpha.3](https://github.com/netease/tango/compare/@music163/tango-helpers@1.0.0-alpha.2...@music163/tango-helpers@1.0.0-alpha.3) (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.3",
+  "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
@@ -24,10 +24,11 @@ export type ComponentPropType<T = any> = {
   * 属性的分组
   * - basic 常用属性
   * - event 事件属性
+   * - data  数据属性
   * - style 样式属性
   * - advanced 高级属性
   */
-  group?: 'basic' | 'event' | 'style' | 'advanced';
+  group?: 'basic' | 'event' | 'style' | 'data' | 'advanced';
  /**
   * 帮助文档链接地址
   * @example https://foo.bar/help
@@ -91,6 +92,10 @@ export type ComponentPropType<T = any> = {
   * 动态设置表单项是否展示
   */
  getVisible?: (form: any) => boolean;
+  /**
+   * 标记属性是否已废弃
+   */
+  deprecated?: boolean | string;
 };

 /**
@@ -228,6 +233,10 @@ export type ComponentPrototypeType = {
   * 直接子节点的类型
   */
  childrenName?: string | string[];
+  /**
+   * 兄弟节点的类型
+   */
+  siblingNames?: string[];
  /**
   * 组件的可配置属性集
   */
--- a/packages/sandbox/CHANGELOG.md
+++ b/packages/sandbox/CHANGELOG.md
@@ -3,6 +3,14 @@
 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
+
 # [1.0.0-alpha.7](https://github.com/netease/tango/compare/@music163/tango-sandbox@1.0.0-alpha.6...@music163/tango-sandbox@1.0.0-alpha.7) (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.7",
+  "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.7",
-    "@music163/tango-helpers": "^1.0.0-alpha.3",
+    "@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,22 @@
 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
+
+# [1.0.0-alpha.11](https://github.com/netease/tango/compare/@music163/tango-setting-form@1.0.0-alpha.10...@music163/tango-setting-form@1.0.0-alpha.11) (2024-03-18)
+
+### Bug Fixes
+
+- add deprecated and data group to ComponentPropType ([#116](https://github.com/netease/tango/issues/116)) ([9f7441c](https://github.com/netease/tango/commit/9f7441c13400dba55c58b7dd6ce9429013edbc45))
+
 # [1.0.0-alpha.10](https://github.com/netease/tango/compare/@music163/tango-setting-form@1.0.0-alpha.9...@music163/tango-setting-form@1.0.0-alpha.10) (2024-03-18)

 ### Bug Fixes
--- 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.10",
+  "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.7",
-    "@music163/tango-helpers": "^1.0.0-alpha.3",
-    "@music163/tango-ui": "^1.0.0-alpha.8",
+    "@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
@@ -86,6 +86,7 @@ export function createFormItem(options: IFormItemCreateOptions) {
    disableVariableSetter: disableVariableSetterProp = options.disableVariableSetter,
    getVisible: getVisibleProp,
    getSetterProps: getSetterPropsProp,
+    deprecated,
    extra,
    footer,
    noStyle,
@@ -160,6 +161,7 @@ export function createFormItem(options: IFormItemCreateOptions) {
        note={showItemSubtitle ? name : null}
        tip={tip}
        docs={docs}
+        deprecated={deprecated}
        error={field.error}
        extra={
          <Box>
@@ -168,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/setting-form/src/form-ui.tsx
+++ b/packages/setting-form/src/form-ui.tsx
@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
-import { css, Box, HTMLCoralProps, Text } from 'coral-system';
+import { css, Box, HTMLCoralProps, Link } from 'coral-system';
 import { Checkbox, Tooltip } from 'antd';
 import { CollapsePanel } from '@music163/tango-ui';
 import { isNil, isString } from '@music163/tango-helpers';
+import { WarningOutlined } from '@ant-design/icons';

 export interface FormControlProps extends Omit<FormLabelProps, 'type'> {
  visible: boolean;
@@ -19,6 +20,7 @@ export function FormControl({
  tip,
  docs,
  extra,
+  deprecated,
  footer,
  error,
  children,
@@ -27,7 +29,7 @@ export function FormControl({
  return (
    <Box className="FormControl" display={visible ? 'block' : 'none'} {...rest}>
      <Box display="flex" justifyContent="space-between" alignItems="center" mb="s">
-        <FormLabel label={label} note={note} tip={tip} docs={docs} />
+        <FormLabel label={label} note={note} tip={tip} docs={docs} deprecated={deprecated} />
        {extra}
      </Box>
      <Box>{children}</Box>
@@ -138,12 +140,12 @@ const labelStyle = css`
 `;

 const tipStyle = css`
-  a:link {
-    color: #fff;
+  a {
+    text-decoration: underline;
  }

-  a:hover {
-    color: var(--tango-colors-brand);
+  a:link {
+    color: #fff;
  }
 `;

@@ -169,19 +171,45 @@ interface FormLabelProps extends HTMLCoralProps<'div'> {
   * 文档地址
   */
  docs?: string;
+  /**
+   * 是否显示废弃标记
+   */
+  // eslint-disable-next-line react/no-unused-prop-types
+  deprecated?: boolean | string;
 }

-function FormLabel({ type = 'normal', label, note, tip, docs, ...rest }: FormLabelProps) {
-  const help = docs ? (
-    <Box css={tipStyle}>
-      <Text mr="m">{tip}</Text>
-      <a href={docs} target="_blank" rel="noreferrer">
-        帮助文档
-      </a>
-    </Box>
-  ) : (
-    tip
-  );
+function FormLabel({
+  type = 'normal',
+  label,
+  note,
+  tip,
+  docs,
+  deprecated,
+  ...rest
+}: FormLabelProps) {
+  let help: React.ReactNode;
+  if (deprecated || docs) {
+    help = (
+      <Box>
+        <Box css={tipStyle}>
+          {tip}
+          {docs ? (
+            <Link href={docs} isExternal ml="m">
+              查看属性文档
+            </Link>
+          ) : null}
+        </Box>
+        {deprecated ? (
+          <Box color="#faad14">
+            <WarningOutlined /> 废弃提示：
+            {isString(deprecated) ? deprecated : '该属性已废弃，请谨慎使用。'}
+          </Box>
+        ) : null}
+      </Box>
+    );
+  } else {
+    help = tip;
+  }

  const labelColor = {
    normal: 'text.body',
@@ -197,6 +225,7 @@ function FormLabel({ type = 'normal', label, note, tip, docs, ...rest }: FormLab
      css={labelStyle}
      title={isString(label) ? label : undefined}
    >
+      {deprecated ? <WarningOutlined style={{ color: '#faad14', marginRight: 4 }} /> : null}
      {label}
    </Box>
  );
--- a/packages/ui/CHANGELOG.md
+++ b/packages/ui/CHANGELOG.md
@@ -3,6 +3,20 @@
 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
+
+- select outline node & render dependency list ([#118](https://github.com/netease/tango/issues/118)) ([07febb3](https://github.com/netease/tango/commit/07febb385f710f9a0bc43639ce22787bb05e97ed))
+
+# [1.0.0-alpha.9](https://github.com/netease/tango/compare/@music163/tango-ui@1.0.0-alpha.8...@music163/tango-ui@1.0.0-alpha.9) (2024-03-18)
+
+**Note:** Version bump only for package @music163/tango-ui
+
 # [1.0.0-alpha.8](https://github.com/netease/tango/compare/@music163/tango-ui@1.0.0-alpha.7...@music163/tango-ui@1.0.0-alpha.8) (2024-03-18)

 ### 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.8",
+  "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.3",
+    "@music163/tango-helpers": "^1.0.0-alpha.5",
    "@uiw/react-codemirror": "^4.21.21",
    "antd": "^4.24.2",
    "classnames": "^2.5.1",
--- a/packages/ui/src/color-tag.tsx
+++ b/packages/ui/src/color-tag.tsx
@@ -0,0 +1,14 @@
+import { Tag, TagProps, Tooltip } from 'antd';
+import React from 'react';
+
+interface ColorTagProps extends TagProps {
+  tooltip?: string;
+}
+
+export function ColorTag({ tooltip, children, ...rest }: ColorTagProps) {
+  const tag = <Tag {...rest}>{children}</Tag>;
+  if (tooltip) {
+    return <Tooltip title={tooltip}>{tag}</Tooltip>;
+  }
+  return tag;
+}
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -7,6 +7,7 @@ export * from './chat-input';
 export * from './error-boundary';
 export * from './file-explorer';
 export * from './collapse-panel';
+export * from './color-tag';
 export * from './iconfont';
 export * from './menu';
 export * from './panel';
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
Wells	9ada3fecb3	chore(release): publish - @music163/tango-designer@1.0.0-alpha.14 - @music163/tango-setting-form@1.0.0-alpha.12 - @music163/tango-ui@1.0.0-alpha.10	2024-03-19 19:19:42 +08:00
Wells	07febb385f	fix: select outline node & render dependency list (#118 ) * fix: select outline tree * fix: update selection tip * fix: refactor ColorTag	2024-03-19 19:16:05 +08:00
Wells	ddbda0e6fb	chore(release): publish - @music163/tango-context@1.0.0-alpha.8 - @music163/tango-core@1.0.0-alpha.8 - @music163/tango-designer@1.0.0-alpha.13 - @music163/tango-helpers@1.0.0-alpha.4 - @music163/tango-sandbox@1.0.0-alpha.8 - @music163/tango-setting-form@1.0.0-alpha.11 - @music163/tango-ui@1.0.0-alpha.9	2024-03-18 16:54:59 +08:00
Wells	9f7441c134	fix: add deprecated and data group to ComponentPropType (#116 ) * fix: add deprecated and data group to ComponentPropType * fix: render choiceSetter with icon	2024-03-18 16:49:41 +08:00