chore(release): publish

- @music163/tango-designer@1.2.2 - @music163/tango-setting-form@1.2.3 - @music163/tango-ui@1.2.2
fix: export usePreviewSandboxQuery & add builtin sandboxQuery (#163 )
2026-09-01 04:19:05 +08:00 · 2024-05-27 10:18:03 +08:00 · 2024-05-24 18:28:04 +08:00 · 2024-05-22 14:53:57 +08:00 · 2024-05-22 14:52:44 +08:00 · 2024-05-22 11:56:52 +08:00
19 changed files with 128 additions and 32 deletions
@@ -161,6 +161,8 @@ import {
 } from "@music163/antd";
 import { Space } from "@music163/antd";
 import { LocalButton } from "../components";
+import { OutButton } from "../components";
+
 class App extends React.Component {
  render() {
    return (
@@ -181,6 +183,7 @@ class App extends React.Component {
        <Section tid="section2">
          <Space tid="space1">
            <LocalButton />
+            <OutButton />
            <Button tid="button1">button</Button>
          </Space>
        </Section>
@@ -290,6 +293,14 @@ registerComponentPrototype({
 });
 `;

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

 const storeApp = `
@@ -412,6 +424,7 @@ export const sampleFiles = [
  { filename: '/src/pages/list.js', code: viewHomeCode },
  { filename: '/src/pages/detail.js', code: emptyPageCode },
  { filename: '/src/components/button.js', code: componentsButtonCode },
+  { filename: '/src/components/out-button.js', code: outButtonCode },
  { filename: '/src/components/input.js', code: componentsInputCode },
  { filename: '/src/components/index.js', code: componentsEntryCode },
  { filename: '/src/routes.js', code: routesCode },
@@ -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.2.2](https://github.com/netease/tango/compare/@music163/tango-designer@1.2.1...@music163/tango-designer@1.2.2) (2024-05-27)
+
+### Bug Fixes
+
+- export usePreviewSandboxQuery & add builtin sandboxQuery ([#163](https://github.com/netease/tango/issues/163)) ([163eced](https://github.com/netease/tango/commit/163ecedff3ed7baee59e200a8cc60dcc63a24e48))
+
+## [1.2.1](https://github.com/netease/tango/compare/@music163/tango-designer@1.2.0...@music163/tango-designer@1.2.1) (2024-05-22)
+
+### Bug Fixes
+
+- check local component prototypes ([#160](https://github.com/netease/tango/issues/160)) ([a0484e8](https://github.com/netease/tango/commit/a0484e8f64f20f67c30c25c3d5ce65de549b3e04))
+
 # [1.2.0](https://github.com/netease/tango/compare/@music163/tango-designer@1.1.0...@music163/tango-designer@1.2.0) (2024-05-21)

 ### Bug Fixes
@@ -1,6 +1,6 @@
 {
  "name": "@music163/tango-designer",
-  "version": "1.2.0",
+  "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.1",
-    "@music163/tango-ui": "^1.2.0",
+    "@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",
@@ -6,10 +6,14 @@ export interface IDesignerContext<S = any> {
   * 沙箱查询实例
   */
  sandboxQuery: DndQuery;
+  /**
+   * 预览沙箱查询实例
+   */
+  previewSandboxQuery: DndQuery;
  /**
   * 远程服务
   */
-  remoteServices?: Record<string, S>;
+  remoteServices: Record<string, S>;
 }

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

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

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

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

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

+  /**
+   * 沙箱内的全局滚动偏移
+   */
  get scrollTop() {
    if (this.context && 'documentElement' in this.context) {
      return (this.context as unknown as Document).documentElement.scrollTop;
@@ -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) {
@@ -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>
    );
  },
@@ -289,6 +289,10 @@ const StyledCommonGridItem = styled.div`
    transition: 0.15s ease-in-out;
    transition-property: transform;
    will-change: transform;
+    img {
+      width: unset;
+      height: 85%;
+    }
  }

  .info {
@@ -355,6 +359,15 @@ function MaterialGrid({ data }: MaterialProps) {
  };

  const icon = data.icon || 'icon-placeholder';
+
+  const iconNode = icon.startsWith('icon-') ? (
+    <IconFont className="material-icon" type={data.icon || 'icon-placeholder'} />
+  ) : (
+    <Box className="material-icon">
+      <img src={icon} alt={data.name} />
+    </Box>
+  );
+
  if (isLine) {
    return (
      <Box
@@ -380,11 +393,7 @@ function MaterialGrid({ data }: MaterialProps) {
          alignItems="center"
          justifyContent="center"
        >
-          {icon.startsWith('icon-') ? (
-            <IconFont className="material-icon" type={data.icon || 'icon-placeholder'} />
-          ) : (
-            <img className="material-icon" src={icon} alt={data.name} />
-          )}
+          {iconNode}
        </Box>
        <Box flex={1}>
          <Box fontWeight="500" display="flex" justifyContent="space-between">
@@ -417,11 +426,7 @@ function MaterialGrid({ data }: MaterialProps) {
      onDragEnd={handleDragEnd}
      onClick={handleSelect}
    >
-      {icon.startsWith('icon-') ? (
-        <IconFont className="material-icon" type={data.icon || 'icon-placeholder'} />
-      ) : (
-        <img className="material-icon" src={icon} alt={data.name} />
-      )}
+      {iconNode}
      <Text fontSize="12px" marginTop="4px">
        {data.title ?? data.name}
      </Text>
@@ -198,7 +198,7 @@ function SelectionBox({ showActions, actions, data }: SelectionBoxProps) {
            }
          />
          <SelectionToolSet>{!isPage && actions}</SelectionToolSet>
-          {prototype.hasChildren !== false && (
+          {isFromCurrentFile && prototype?.hasChildren !== false && (
            <ComponentsPopover>
              <Tooltip title="快捷添加子元素">
                <SelectionHelper icon={<PlusOutlined />} />
@@ -17,7 +17,7 @@ export const PreviewTool = observer(() => {
          designer.setActiveView('design');
        }
      }}
-      tooltip="预览"
+      tooltip={designer.isPreview ? '切换到设计模式' : '切换到预览模式'}
    >
      <EyeOutlined />
    </ToggleButton>
@@ -60,7 +60,7 @@ export function Toolbar({ children }: ToolbarProps) {
      <Group display="flex" alignItems="center" gap="m">
        {centerTools}
      </Group>
-      <Group display="flex" alignItems="center" gap="m">
+      <Group display="flex" alignItems="center" justifyContent="flex-end" gap="m">
        {rightTools}
      </Group>
    </Box>
@@ -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.2.3](https://github.com/netease/tango/compare/@music163/tango-setting-form@1.2.2...@music163/tango-setting-form@1.2.3) (2024-05-27)
+
+**Note:** Version bump only for package @music163/tango-setting-form
+
+## [1.2.2](https://github.com/netease/tango/compare/@music163/tango-setting-form@1.2.1...@music163/tango-setting-form@1.2.2) (2024-05-22)
+
+**Note:** Version bump only for package @music163/tango-setting-form
+
 ## [1.2.1](https://github.com/netease/tango/compare/@music163/tango-setting-form@1.2.0...@music163/tango-setting-form@1.2.1) (2024-05-21)

 ### Bug Fixes
@@ -1,6 +1,6 @@
 {
  "name": "@music163/tango-setting-form",
-  "version": "1.2.1",
+  "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.0",
+    "@music163/tango-ui": "^1.2.2",
    "antd": "^4.24.2",
    "coral-system": "^1.0.5",
    "mobx": "6.12.3",
@@ -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.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
+
 # [1.2.0](https://github.com/netease/tango/compare/@music163/tango-ui@1.1.0...@music163/tango-ui@1.2.0) (2024-05-21)

 ### Bug Fixes
@@ -1,6 +1,6 @@
 {
  "name": "@music163/tango-ui",
-  "version": "1.2.0",
+  "version": "1.2.2",
  "description": "ui widgets of tango",
  "keywords": [
    "react",
@@ -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);
@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { Box, HTMLCoralProps, css } from 'coral-system';
+import { Box, HTMLCoralProps } from 'coral-system';
 import CodeMirror, { ReactCodeMirrorProps } from '@uiw/react-codemirror';
 import { javascript, javascriptLanguage, esLint } from '@codemirror/lang-javascript';
 import { CompletionContext } from '@codemirror/autocomplete';
@@ -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);
Author	SHA1	Message	Date
Wells	bb92210594	chore(release): publish - @music163/tango-designer@1.2.2 - @music163/tango-setting-form@1.2.3 - @music163/tango-ui@1.2.2	2024-05-27 10:18:03 +08:00
Wells	163ecedff3	fix: export usePreviewSandboxQuery & add builtin sandboxQuery (#163 ) * fix: export usePreviewSandboxQuery * fix: update ui * fix: update ui	2024-05-24 18:28:04 +08:00
Wells	22a2e9bdd1	chore(release): publish - @music163/tango-designer@1.2.1 - @music163/tango-setting-form@1.2.2 - @music163/tango-ui@1.2.1	2024-05-22 14:53:57 +08:00
Wells	696f82bd26	style: update	2024-05-22 14:52:44 +08:00
BoBoooooo	a0484e8f64	fix: check local component prototypes (#160 ) * fix: prototype undefined bug * fix: logic bug * fix: components grid item ui * fix: ui bug * fix: update local file	2024-05-22 11:56:52 +08:00