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

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.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

packages/context/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@music163/tango-context",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "react context for tango-apps",
   "keywords": [
     "react",
@@ -31,8 +31,8 @@
     "react": ">= 16.8"
   },
   "dependencies": {
-    "@music163/tango-core": "^1.2.0",
-    "@music163/tango-helpers": "^1.1.1",
+    "@music163/tango-core": "^1.3.0",
+    "@music163/tango-helpers": "^1.2.0",
     "mobx-react-lite": "4.0.7"
   },
   "publishConfig": {

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.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

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@music163/tango-core",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "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.1.1",
+    "@music163/tango-helpers": "^1.2.0",
     "@types/babel__generator": "^7.6.7",
     "@types/babel__traverse": "^7.20.4",
     "mobx": "6.12.3",

packages/core/src/helpers/ast/traverse.ts

@@ -1425,3 +1425,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;
+}

packages/core/src/models/designer.ts

@@ -83,6 +83,16 @@ export class Designer {
    */
   _addComponentPopoverPosition = { clientX: 0, clientY: 0 };
 
+  /**
+   * 是否显示右键菜单
+   */
+  _showContextMenu = false;
+
+  /**
+   * 右键菜单在 iframe 上的位置
+   */
+  _contextMenuPosition = { clientX: 0, clientY: 0 };
+
   /**
    * 是否显示右侧面板
    */
@@ -136,6 +146,14 @@ export class Designer {
     return this._addComponentPopoverPosition;
   }
 
+  get showContextMenu() {
+    return this._showContextMenu;
+  }
+
+  get contextMenuPosition() {
+    return this._contextMenuPosition;
+  }
+
   get menuData() {
     return this._menuData ?? ([] as MenuDataType);
   }
@@ -178,6 +196,8 @@ export class Designer {
       _showRightPanel: observable,
       _showAddComponentPopover: observable,
       _addComponentPopoverPosition: observable,
+      _showContextMenu: observable,
+      _contextMenuPosition: observable,
       _menuData: observable,
       _isPreview: observable,
       simulator: computed,
@@ -189,6 +209,8 @@ export class Designer {
       showSmartWizard: computed,
       showAddComponentPopover: computed,
       addComponentPopoverPosition: computed,
+      showContextMenu: computed,
+      contextMenuPosition: computed,
       menuData: computed,
       setSimulator: action,
       setViewport: action,
@@ -199,6 +221,7 @@ export class Designer {
       toggleSmartWizard: action,
       toggleIsPreview: action,
       toggleAddComponentPopover: action,
+      toggleContextMenu: action,
     });
   }
 
@@ -264,4 +287,15 @@ export class Designer {
       this.workspace.selectSource.clear();
     }
   }
+
+  toggleContextMenu(
+    value: boolean,
+    position: {
+      clientX: number;
+      clientY: number;
+    } = this.contextMenuPosition,
+  ) {
+    this._showContextMenu = value;
+    this._contextMenuPosition = position;
+  }
 }

packages/core/src/models/entry-module.ts

@@ -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;
+  }
+}

packages/core/src/models/index.ts

@@ -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';

packages/core/src/models/interfaces.ts

@@ -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;
   /**
    * 解析后的路由模块
    */

packages/core/src/models/workspace.ts

@@ -35,6 +35,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 +98,11 @@ export class Workspace extends EventTarget implements IWorkspace {
    */
   activeViewFile: string;
 
+  /**
+   * 应用入口模块
+   */
+  appEntryModule: AppEntryModule;
+
   /**
    * 路由配置模块
    */
@@ -329,6 +335,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,
@@ -338,6 +347,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;

packages/core/src/types.ts

@@ -8,6 +8,7 @@ export type SimulatorMode = 'desktop' | 'tablet' | 'phone';
 export enum FileType {
   // js 文件
   Module = 'module',
+  AppEntryModule = 'appEntryModule',
   StoreEntryModule = 'storeEntryModule',
   RouteModule = 'routeModule',
   ServiceModule = 'serviceModule',

packages/designer/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.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

packages/designer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@music163/tango-designer",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "description": "lowcode designer",
   "keywords": [
     "react"
@@ -33,12 +33,12 @@
   "dependencies": {
     "@ant-design/icons": "^4.8.0",
     "@music163/request": "^0.2.0",
-    "@music163/tango-context": "^1.1.1",
-    "@music163/tango-core": "^1.2.0",
-    "@music163/tango-helpers": "^1.1.1",
-    "@music163/tango-sandbox": "^1.0.4",
-    "@music163/tango-setting-form": "^1.2.4",
-    "@music163/tango-ui": "^1.2.3",
+    "@music163/tango-context": "^1.1.2",
+    "@music163/tango-core": "^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",
     "antd": "^4.24.2",
     "cash-dom": "^8.1.2",
     "classnames": "^2.5.1",

packages/designer/src/components/context-menu.tsx

@@ -0,0 +1,125 @@
+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: 20px;
+  }
+
+  .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>
+    );
+  },
+);

packages/designer/src/components/index.ts

@@ -1,3 +1,4 @@
+export * from './context-menu';
 export * from './drag-box';
 export * from './input-kv';
 export * from './variable-tree';

packages/designer/src/context-menu/copy-node.tsx

@@ -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>
+  );
+});

packages/designer/src/context-menu/delete-node.tsx

@@ -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>
+  );
+});

packages/designer/src/context-menu/index.tsx

@@ -0,0 +1,4 @@
+export * from './copy-node';
+export * from './delete-node';
+export * from './paste-node';
+export * from './view-source';

packages/designer/src/context-menu/paste-node.tsx

@@ -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>
+  );
+});

packages/designer/src/context-menu/view-source.tsx

@@ -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>
+  );
+});

packages/designer/src/dnd/use-dnd.ts

@@ -77,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({
@@ -128,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);
@@ -388,6 +394,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 || {};
 
@@ -437,6 +493,7 @@ export function useDnd({
     onDragEnd,
     onScroll,
     onKeyDown,
+    onContextMenu,
     onTango,
     ...selectHandler,
   };

packages/designer/src/sandbox/sandbox.tsx

@@ -49,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,
@@ -105,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;

packages/designer/src/selection-menu/index.ts

@@ -1,4 +1,5 @@
 export * from './copy-node';
 export * from './delete-node';
+export * from './more-actions';
 export * from './select-parent-node';
 export * from './view-source';

packages/designer/src/selection-menu/more-actions.tsx

@@ -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>
+  );
+});

packages/designer/src/sidebar/outline-panel/components-tree.tsx

@@ -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 {
   /**
@@ -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>
     );
   },

packages/designer/src/simulator/selection.tsx

@@ -25,7 +25,13 @@ export interface SelectionToolsProps {
 
 export const SelectionTools = observer(
   ({
-    actions: actionsProp = ['selectParentNode', 'viewSource', 'copyNode', 'deleteNode'],
+    actions: actionsProp = [
+      'selectParentNode',
+      'viewSource',
+      'copyNode',
+      'deleteNode',
+      'moreActions',
+    ],
   }: SelectionToolsProps) => {
     const workspace = useWorkspace();
     const selectSource = workspace.selectSource;

packages/designer/src/simulator/viewport.tsx

@@ -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} />

packages/designer/src/widgets.ts

@@ -18,14 +18,21 @@ import {
   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);
@@ -55,3 +62,9 @@ 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);

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.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

packages/helpers/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@music163/tango-helpers",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Shared types, helpers, and hooks of tango-apps",
   "keywords": [
     "shared",

packages/helpers/src/helpers/assert.ts

@@ -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);
+}

packages/sandbox/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.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

packages/sandbox/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@music163/tango-sandbox",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "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.2.0",
-    "@music163/tango-helpers": "^1.1.1",
+    "@music163/tango-core": "^1.3.0",
+    "@music163/tango-helpers": "^1.2.0",
     "crypto-js": "^4.1.1",
     "lodash.isequal": "4.5.0",
     "react-frame-component": "^5.2.4"

packages/sandbox/src/code-sandbox/index.tsx

@@ -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;
+        }
       };
     }
   };

packages/setting-form/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.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

packages/setting-form/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@music163/tango-setting-form",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "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.2.0",
-    "@music163/tango-helpers": "^1.1.1",
-    "@music163/tango-ui": "^1.2.3",
+    "@music163/tango-core": "^1.3.0",
+    "@music163/tango-helpers": "^1.2.0",
+    "@music163/tango-ui": "^1.3.0",
     "antd": "^4.24.2",
     "coral-system": "^1.0.5",
     "mobx": "6.12.3",

packages/ui/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.3.0](https://github.com/netease/tango/compare/@music163/tango-ui@1.2.3...@music163/tango-ui@1.3.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.2.3](https://github.com/netease/tango/compare/@music163/tango-ui@1.2.2...@music163/tango-ui@1.2.3) (2024-05-30)
 
 ### Bug Fixes

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@music163/tango-ui",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "description": "ui widgets of tango",
   "keywords": [
     "react",
@@ -38,7 +38,7 @@
     "@codemirror/lang-javascript": "^6.2.2",
     "@codemirror/lint": "^6.7.1",
     "@codemirror/search": "^6.5.6",
-    "@music163/tango-helpers": "^1.1.1",
+    "@music163/tango-helpers": "^1.2.0",
     "@uiw/react-codemirror": "^4.22.0",
     "antd": "^4.24.2",
     "classnames": "^2.5.1",

packages/ui/src/context-action.tsx

@@ -0,0 +1,86 @@
+import React, { useMemo } from 'react';
+import { Menu, Space } from 'antd';
+import { Box, css } from 'coral-system';
+import { isApplePlatform } from '@music163/tango-helpers';
+
+const contextActionStyle = css`
+  display: flex;
+  gap: 8px;
+  align-items: center;
+
+  .ContextActionContent {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .ContextActionExtra {
+    flex: none;
+    color: var(--tango-colors-gray-40);
+  }
+`;
+
+interface ContextActionProps {
+  icon?: React.ReactNode;
+  children?: React.ReactNode;
+  hotkey?: string;
+  extra?: React.ReactNode;
+  onClick?: () => void;
+  className?: string;
+  disabled?: boolean;
+  key?: string;
+}
+
+export function ContextAction({
+  icon,
+  children,
+  hotkey,
+  extra,
+  disabled,
+  onClick,
+  className,
+  key,
+}: ContextActionProps) {
+  const normalizedHotKey = useMemo(() => {
+    if (!hotkey) {
+      return null;
+    }
+    const keyMap = isApplePlatform()
+      ? {
+          command: '⌘',
+          meta: '⌘',
+          ctrl: '^',
+          control: '^',
+          alt: '⌥',
+          option: '⌥',
+          shift: '⇧',
+          '+': '',
+        }
+      : {
+          command: 'Ctrl',
+          meta: 'Win',
+          ctrl: 'Ctrl',
+          control: 'Ctrl',
+          alt: 'Alt',
+          option: 'Alt',
+          shift: 'Shift',
+        };
+    const regexp = new RegExp(Object.keys(keyMap).join('|').replace(/\\+/, '\\+'), 'ig');
+    return hotkey.replace(regexp, (match) => keyMap[match.toLowerCase()]);
+  }, [hotkey]);
+
+  return (
+    <Menu.Item key={key} onClick={onClick} icon={icon} className={className} disabled={disabled}>
+      <Box className="ContextAction" css={contextActionStyle}>
+        <Box className="ContextActionContent">{children}</Box>
+        <Box className="ContextActionExtra">
+          <Space>
+            {normalizedHotKey}
+            {extra}
+          </Space>
+        </Box>
+      </Box>
+    </Menu.Item>
+  );
+}

packages/ui/src/index.ts

@@ -24,3 +24,4 @@ export * from './copy-clipboard';
 export * from './tag-select';
 export * from './popover';
 export * from './drag-panel';
+export * from './context-action';