chore(release): publish

- @music163/tango-designer@1.2.2
 - @music163/tango-setting-form@1.2.3
 - @music163/tango-ui@1.2.2

packages/designer/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.2](https://github.com/netease/tango/compare/@music163/tango-designer@1.2.1...@music163/tango-designer@1.2.2) (2024-05-27)
+
+### Bug Fixes
+
+- export usePreviewSandboxQuery & add builtin sandboxQuery ([#163](https://github.com/netease/tango/issues/163)) ([163eced](https://github.com/netease/tango/commit/163ecedff3ed7baee59e200a8cc60dcc63a24e48))
+
 ## [1.2.1](https://github.com/netease/tango/compare/@music163/tango-designer@1.2.0...@music163/tango-designer@1.2.1) (2024-05-22)
 
 ### Bug Fixes

packages/designer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@music163/tango-designer",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "lowcode designer",
   "keywords": [
     "react"
@@ -37,8 +37,8 @@
     "@music163/tango-core": "^1.2.0",
     "@music163/tango-helpers": "^1.1.1",
     "@music163/tango-sandbox": "^1.0.4",
-    "@music163/tango-setting-form": "^1.2.2",
-    "@music163/tango-ui": "^1.2.1",
+    "@music163/tango-setting-form": "^1.2.3",
+    "@music163/tango-ui": "^1.2.2",
     "antd": "^4.24.2",
     "cash-dom": "^8.1.2",
     "classnames": "^2.5.1",

packages/designer/src/context.ts

@@ -6,10 +6,14 @@ export interface IDesignerContext<S = any> {
    * 沙箱查询实例
    */
   sandboxQuery: DndQuery;
+  /**
+   * 预览沙箱查询实例
+   */
+  previewSandboxQuery: DndQuery;
   /**
    * 远程服务
    */
-  remoteServices?: Record<string, S>;
+  remoteServices: Record<string, S>;
 }
 
 const [DesignerProvider, useDesigner] = createContext<IDesignerContext>({
@@ -19,9 +23,13 @@ const [DesignerProvider, useDesigner] = createContext<IDesignerContext>({
 export { DesignerProvider };
 
 export const useSandboxQuery = () => {
-  return useDesigner()?.sandboxQuery;
+  return useDesigner().sandboxQuery;
+};
+
+export const usePreviewSandboxQuery = () => {
+  return useDesigner().previewSandboxQuery;
 };
 
 export const useRemoteServices = () => {
-  return useDesigner()?.remoteServices;
+  return useDesigner().remoteServices;
 };

packages/designer/src/designer.tsx

@@ -5,8 +5,18 @@ import { TangoEngineProvider, ITangoEngineContext } from '@music163/tango-contex
 import zhCN from 'antd/lib/locale/zh_CN';
 import { DesignerProvider, IDesignerContext } from './context';
 import defaultTheme from './themes/default';
+import { DndQuery } from './dnd';
+import { DESIGN_SANDBOX_ID, PREVIEW_SANDBOX_ID } from './helpers';
 
-export interface DesignerProps extends IDesignerContext, ITangoEngineContext {
+const builtinSandboxQuery = new DndQuery({
+  context: `#${DESIGN_SANDBOX_ID}`,
+});
+
+const builtinPreviewSandboxQuery = new DndQuery({
+  context: `#${PREVIEW_SANDBOX_ID}`,
+});
+
+export interface DesignerProps extends Partial<IDesignerContext>, ITangoEngineContext {
   /**
    * 主题包
    */
@@ -20,13 +30,23 @@ export interface DesignerProps extends IDesignerContext, ITangoEngineContext {
  * @returns
  */
 export function Designer(props: DesignerProps) {
-  const { engine, config, theme: themeProp, sandboxQuery, remoteServices = {}, children } = props;
+  const {
+    engine,
+    config,
+    theme: themeProp,
+    sandboxQuery = builtinSandboxQuery,
+    previewSandboxQuery = builtinPreviewSandboxQuery,
+    remoteServices = {},
+    children,
+  } = props;
   const theme = useMemo(() => extendTheme(themeProp, defaultTheme), [themeProp]);
   return (
     <SystemProvider theme={theme} prefix="--tango">
       <ConfigProvider locale={zhCN}>
         <TangoEngineProvider value={{ engine, config }}>
-          <DesignerProvider value={{ sandboxQuery, remoteServices }}>{children}</DesignerProvider>
+          <DesignerProvider value={{ sandboxQuery, previewSandboxQuery, remoteServices }}>
+            {children}
+          </DesignerProvider>
         </TangoEngineProvider>
       </ConfigProvider>
     </SystemProvider>

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

@@ -12,7 +12,6 @@ export const DRAGGABLE_SELECTOR = `[${SLOT.dnd}]`;
 interface DndQueryOptions {
   /**
    * DOM 查询上下文选择器
-   * TODO: 是不是可以合并成一个 API
    */
   context?: string;
   /**
@@ -63,6 +62,9 @@ export class DndQuery {
     return false;
   }
 
+  /**
+   * 沙箱内的 window 对象
+   */
   get window() {
     if (this.context && 'defaultView' in this.context) {
       return (this.context as unknown as Document).defaultView;
@@ -71,6 +73,9 @@ export class DndQuery {
     return window;
   }
 
+  /**
+   * 沙箱内的全局滚动偏移
+   */
   get scrollTop() {
     if (this.context && 'documentElement' in this.context) {
       return (this.context as unknown as Document).documentElement.scrollTop;

packages/designer/src/helpers/dom.ts

@@ -7,6 +7,20 @@ import {
   parseDndId,
 } from '@music163/tango-helpers';
 
+// -----------
+// CONSTANTS
+// -----------
+
+export const DRAG_GHOST_ID = 'dragGhost';
+
+export const DESIGN_SANDBOX_ID = 'sandbox-container';
+
+export const PREVIEW_SANDBOX_ID = 'preview-sandbox-container';
+
+// -----------
+// DOM Helpers
+// -----------
+
 export function buildQueryBySlotId(id: string) {
   return `[${SLOT.dnd}="${id}"]`;
 }
@@ -15,8 +29,6 @@ export function getElement(selector: Selector) {
   return $(selector).get(0);
 }
 
-export const DRAG_GHOST_ID = 'dragGhost';
-
 export const getDragGhostElement = () => getElement(`#${DRAG_GHOST_ID}`);
 
 export function setElementStyle(selector: Selector, style: any) {

packages/designer/src/sandbox/sandbox.tsx

@@ -8,6 +8,7 @@ import { useSandboxQuery } from '../context';
 import { DndQuery, useDnd } from '../dnd';
 import { Navigator } from './navigator';
 import { SelectionToolsProps } from '../simulator/selection';
+import { DESIGN_SANDBOX_ID, PREVIEW_SANDBOX_ID } from '../helpers';
 
 interface ISandboxEventHandlerConfig {
   sandboxQuery?: DndQuery;
@@ -62,6 +63,7 @@ function useSandbox({
   const workspace = useWorkspace();
   const designer = useDesigner();
   const sandboxQuery = useSandboxQuery();
+
   const isPreview = isPreviewProp ?? designer.isPreview;
 
   // 组件不一定会立即刷新，因此 isActive 需要实时获取
@@ -140,7 +142,7 @@ const PreviewSandbox = observer(
 
     return (
       <Box display={display} width="100%" height="100%">
-        <CodeSandbox ref={ref} iframeId="preview-sandbox-container" {...sandboxProps} {...rest} />
+        <CodeSandbox ref={ref} iframeId={PREVIEW_SANDBOX_ID} {...sandboxProps} {...rest} />
       </Box>
     );
   },
@@ -188,7 +190,7 @@ const DesignSandbox = observer(
 
     return (
       <Box display={display} width="100%" height="100%">
-        <CodeSandbox ref={ref} {...sandboxProps} {...rest} />
+        <CodeSandbox ref={ref} iframeId={DESIGN_SANDBOX_ID} {...sandboxProps} {...rest} />
       </Box>
     );
   },

packages/designer/src/toolbar/preview.tsx

@@ -17,7 +17,7 @@ export const PreviewTool = observer(() => {
           designer.setActiveView('design');
         }
       }}
-      tooltip="预览"
+      tooltip={designer.isPreview ? '切换到设计模式' : '切换到预览模式'}
     >
       <EyeOutlined />
     </ToggleButton>

packages/designer/src/toolbar/toolbar.tsx

@@ -60,7 +60,7 @@ export function Toolbar({ children }: ToolbarProps) {
       <Group display="flex" alignItems="center" gap="m">
         {centerTools}
       </Group>
-      <Group display="flex" alignItems="center" gap="m">
+      <Group display="flex" alignItems="center" justifyContent="flex-end" gap="m">
         {rightTools}
       </Group>
     </Box>

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.3](https://github.com/netease/tango/compare/@music163/tango-setting-form@1.2.2...@music163/tango-setting-form@1.2.3) (2024-05-27)
+
+**Note:** Version bump only for package @music163/tango-setting-form
+
 ## [1.2.2](https://github.com/netease/tango/compare/@music163/tango-setting-form@1.2.1...@music163/tango-setting-form@1.2.2) (2024-05-22)
 
 **Note:** Version bump only for package @music163/tango-setting-form

packages/setting-form/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@music163/tango-setting-form",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "setting form of tango-apps",
   "author": "wwsun <ww.sun@outlook.com>",
   "homepage": "",
@@ -30,7 +30,7 @@
     "@ant-design/icons": "^4.8.0",
     "@music163/tango-core": "^1.2.0",
     "@music163/tango-helpers": "^1.1.1",
-    "@music163/tango-ui": "^1.2.1",
+    "@music163/tango-ui": "^1.2.2",
     "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.2.2](https://github.com/netease/tango/compare/@music163/tango-ui@1.2.1...@music163/tango-ui@1.2.2) (2024-05-27)
+
+### Bug Fixes
+
+- export usePreviewSandboxQuery & add builtin sandboxQuery ([#163](https://github.com/netease/tango/issues/163)) ([163eced](https://github.com/netease/tango/commit/163ecedff3ed7baee59e200a8cc60dcc63a24e48))
+
 ## [1.2.1](https://github.com/netease/tango/compare/@music163/tango-ui@1.2.0...@music163/tango-ui@1.2.1) (2024-05-22)
 
 **Note:** Version bump only for package @music163/tango-ui

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@music163/tango-ui",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "ui widgets of tango",
   "keywords": [
     "react",

packages/ui/src/action.tsx

@@ -14,6 +14,7 @@ const actionStyle = css`
   border-radius: var(--tango-radii-s);
   color: var(--tango-colors-text2);
   background-color: transparent;
+  white-space: nowrap;
 
   &:hover {
     background-color: var(--tango-colors-fill2);

packages/ui/src/toggle-button.tsx

@@ -91,7 +91,7 @@ const buttonStyle = css`
     background-color: var(--tango-colors-custom-toolbarButtonBg, rgba(223, 223, 223, 0.08));
     color: var(--tango-colors-custom-toolbarButtonTextColor, #999);
     border: 0;
-    border-radius: var(--tango-radii-m);
+    border-radius: var(--tango-radii-s);
 
     &:hover {
       color: var(--tango-colors-custom-toolbarButtonTextColorHover, #fff);