fix: update state tree data

fix: check if prototype exists in selection tool
fix: update toggleButton arrow style
2026-09-01 04:19:05 +08:00 · 2024-06-26 16:48:52 +08:00 · 2024-06-25 17:45:34 +08:00 · 2024-06-21 19:40:19 +08:00 · 2024-06-20 15:45:08 +08:00 · 2024-06-20 15:42:49 +08:00
36 changed files with 343 additions and 174 deletions
@@ -31,23 +31,17 @@ You can view the detailed usage guide through the following links:
 - Out-of-the-box front-end low-code designer, providing flexible and easy-to-use designer React components
 - Developed using TypeScript, providing complete type definition files

-## 🎯 Milestone
+## 💡 Examples

-```mermaid
-gantt
-    dateFormat  YYYY-MM-DD
-    title       Tango 1.0 Milestones
-    excludes    weekends
-    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
+You can use tango to build lowcode builders, for example:

-    section Builder Release
-    1.0 Alpha  : m1, 2023-10-01, 2024-01-31
-    1.0 RC     : m2, 2024-02-01, 2024-04-30
-    1.0 Stable : m3, 2024-04-30, 2024-12-31
-```
-
-> [!NOTE]
-> Alpha versions will continue to optimize some implementation protocols and continuously integrate new features from the internal version of NetEase; RC versions will provide a stable parsing protocol and implementation; The 1.0 official version is planned to be released in Q2 2024. After the release of the 1.0 official version, we will continue to iterate on versions and gradually incorporate core capabilities such as process design, component library, and AIGC from the internal version.
+| Preview | Description             |
+|---------|-------------------------|
+| ![image](https://github.com/NetEase/tango/assets/6984035/56a71741-4536-4336-803a-d81d51128a76) | Internal App Builder    |
+| ![image](https://github.com/NetEase/tango/assets/6984035/7f817e59-f7aa-4476-bc29-ac3e33fadbf7) | Dashboard App Builder   |
+| ![image](https://github.com/NetEase/tango/assets/6984035/790d88e1-d716-4f99-868a-31dda25e9fb1) | Mobile App Builder      |
+| ![rn app](public/rn-builder.png) | ReactNative App Builder |
+| ![mail app](public/mail-builder.png) | Email Builder           |

 ## 🌐 Compatibility

@@ -26,28 +26,23 @@
 ## ✨ 特性

 - 经历网易云音乐内网生产环境的实际检验，可灵活集成应用于低代码平台，本地开发工具等
- 基于源码 AST 驱动，无私有 DSL 和协议
- 提供实时出码能力，支持源码进，源码出
- 开箱即用的前端低代码设计器，提供灵活易用的设计器 React 组件
- 使用 TypeScript 开发，提供完整的类型定义文件
+- 提供基于源码 AST 驱动的低代码引擎，无私有 DSL 和协议
+- 提供实时出码能力，支持源码进，源码出，适配多种源码开发场景
+- 提供开箱即用的前端低代码设计器，提供灵活易用的设计器 React 组件
+- 使用 TypeScript 开发，提供完整的类型定义文件和完善的文档支持

-## 🎯 里程碑
+## 💡 例子

-```mermaid
-gantt
-    dateFormat  YYYY-MM-DD
-    title       Tango 1.0 Milestones
-    excludes    weekends
-    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
+你可以使用 Tango 快速构建多种类型的基于源码的低代码搭建工具，例如：

-    section Builder Release
-    1.0 Alpha  : m1, 2023-10-01, 2024-01-31
-    1.0 RC     : m2, 2024-02-01, 2024-04-30
-    1.0 Stable : m3, 2024-04-30, 2024-12-31
-```
+| 预览图 | 说明             |
+|---------|-------------------------|
+| ![image](https://github.com/NetEase/tango/assets/6984035/56a71741-4536-4336-803a-d81d51128a76) | 中后台系统搭建    |
+| ![image](https://github.com/NetEase/tango/assets/6984035/7f817e59-f7aa-4476-bc29-ac3e33fadbf7) | 仪表盘应用搭建   |
+| ![image](https://github.com/NetEase/tango/assets/6984035/790d88e1-d716-4f99-868a-31dda25e9fb1) | H5活动页面搭建      |
+| ![rn app](public/rn-builder.png) | ReactNative 应用搭建 |
+| ![mail app](public/mail-builder.png) | 营销类邮件搭建           |

-> [!NOTE]
-> Alpha 版本会持续对一些实现协议进行优化，并持续融合网易内网版本中的新增特性；RC 版本将会提供基本稳定的解析协议和实现；1.0 正式版本计划在 2024 年Q2发布。1.0 正式版发布后我们将会持续进行版本迭代，并逐步融入内网版本中的流程设计、组件库、AIGC 等核心基础能力。

 ## 🌐 兼容环境

@@ -5,6 +5,7 @@ import { BranchesOutlined, MenuOutlined, QuestionCircleOutlined } from '@ant-des
 import { registerSetter } from '@music163/tango-designer';
 import type { IVariableTreeNode } from '@music163/tango-helpers';
 import { FooSetter } from '../components';
+import { ToggleButton } from '@music163/tango-ui';

 export * from './mock-files';

@@ -46,8 +47,17 @@ registerSetter({
 // 平台 Logo
 export function Logo() {
  return (
-    <Box width="50px" display="flex" alignItems="center" justifyContent="center" fontSize="20px">
-      <MenuOutlined />
+    <Box width="50px" display="flex" alignItems="center" justifyContent="center" fontSize="14px">
+      <ToggleButton
+        shape="text"
+        items={[
+          { label: '回到首页', key: 'home' },
+          { label: '文档', key: 'doc' },
+          { label: '设置', key: 'setting' },
+        ]}
+      >
+        <MenuOutlined />
+      </ToggleButton>
    </Box>
  );
 }
@@ -3,7 +3,7 @@ const packageJson = {
  private: true,
  dependencies: {
    '@music163/antd': '0.2.5',
-    '@music163/tango-boot': '0.2.5',
+    '@music163/tango-boot': '0.3.5',
    react: '17.0.2',
    'react-dom': '17.0.2',
    'prop-types': '15.7.2',
@@ -48,7 +48,7 @@ const tangoConfigJson = {
    },
    '@music163/tango-boot': {
      description: '云音乐低代码运行时框架',
-      version: '0.2.5',
+      version: '0.3.5',
      library: 'TangoBoot',
      type: 'baseDependency',
      resources: ['https://unpkg.com/@music163/tango-boot@{{version}}/dist/boot.js'],
@@ -20,12 +20,11 @@ import {
  ApiOutlined,
  AppstoreAddOutlined,
  BuildOutlined,
-  ClusterOutlined,
  FunctionOutlined,
  PlusOutlined,
  createFromIconfontCN,
 } from '@ant-design/icons';
-import { Action } from '@music163/tango-ui';
+import { Action, PackageOutlined } from '@music163/tango-ui';
 import { useState } from 'react';

 const menuData = {
@@ -182,7 +181,7 @@ export default function App() {
          <Sidebar.Item
            key="dependency"
            label="依赖"
-            icon={<ClusterOutlined />}
+            icon={<PackageOutlined />}
            isFloat
            width={800}
          />
@@ -79,6 +79,11 @@ const prototypeHasBasicProps: IComponentPrototype = {
      title: 'textAreaSetter',
      setter: 'textAreaSetter',
    },
+    {
+      name: 'src',
+      title: 'imageSetter',
+      setter: 'imageSetter',
+    },
    {
      name: 'number',
      title: 'numberSetter',
@@ -9,15 +9,34 @@ export default {

 export function Basic() {
  return (
-    <DragPanel
-      title="弹层标题"
-      extra="右上角内容"
-      width={350}
-      body={<Box p="m">内容</Box>}
-      footer={<Text>底部信息</Text>}
-    >
-      <Button>点击唤起浮层</Button>
-    </DragPanel>
+    <>
+      <DragPanel
+        title="弹层标题"
+        extra="右上角内容"
+        width={350}
+        body={<Box p="m">内容</Box>}
+        footer={<Text>底部信息</Text>}
+      >
+        <Button>点击唤起浮层</Button>
+      </DragPanel>
+      <DragPanel
+        title="弹层标题"
+        extra="右上角内容"
+        width={350}
+        body={<Box p="m">内容</Box>}
+        footer={<Text>底部信息</Text>}
+      >
+        <Button
+          style={{
+            position: 'absolute',
+            bottom: 20,
+            right: 20,
+          }}
+        >
+          底部浮层自动修正弹出区域
+        </Button>
+      </DragPanel>
+    </>
  );
 }

@@ -41,3 +60,23 @@ export function FooterCustom() {
    </DragPanel>
  );
 }
+
+export function ResizeablePanel() {
+  return (
+    <DragPanel
+      title="弹层标题"
+      resizeable
+      extra="右上角内容"
+      width={350}
+      height={400}
+      body={
+        <Box p="m" textAlign="center" background="#fa8484">
+          内容
+        </Box>
+      }
+      footer={<Text>底部信息</Text>}
+    >
+      <Button>点击唤起浮层</Button>
+    </DragPanel>
+  );
+}
@@ -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.4](https://github.com/netease/tango/compare/@music163/tango-context@1.1.3...@music163/tango-context@1.1.4) (2024-06-20)
+
+**Note:** Version bump only for package @music163/tango-context
+
 ## [1.1.3](https://github.com/netease/tango/compare/@music163/tango-context@1.1.2...@music163/tango-context@1.1.3) (2024-06-05)

 **Note:** Version bump only for package @music163/tango-context
@@ -1,6 +1,6 @@
 {
  "name": "@music163/tango-context",
-  "version": "1.1.3",
+  "version": "1.1.4",
  "description": "react context for tango-apps",
  "keywords": [
    "react",
@@ -31,7 +31,7 @@
    "react": ">= 16.8"
  },
  "dependencies": {
-    "@music163/tango-core": "^1.3.1",
+    "@music163/tango-core": "^1.3.2",
    "@music163/tango-helpers": "^1.2.0",
    "mobx-react-lite": "4.0.7"
  },
@@ -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.2](https://github.com/netease/tango/compare/@music163/tango-core@1.3.1...@music163/tango-core@1.3.2) (2024-06-20)
+
+### Bug Fixes
+
+- update designer style ([#176](https://github.com/netease/tango/issues/176)) ([0f3f0af](https://github.com/netease/tango/commit/0f3f0afdfa8aee2532a97c5c2e92ef4230397d86))
+
 ## [1.3.1](https://github.com/netease/tango/compare/@music163/tango-core@1.3.0...@music163/tango-core@1.3.1) (2024-06-05)

 ### Bug Fixes
@@ -1,6 +1,6 @@
 {
  "name": "@music163/tango-core",
-  "version": "1.3.1",
+  "version": "1.3.2",
  "description": "tango core",
  "author": "wwsun <ww.sun@outlook.com>",
  "homepage": "",
@@ -11,6 +11,7 @@ import {
  parseServiceVariablePath,
  parseStoreVariablePath,
  uniq,
+  setValue,
 } from '@music163/tango-helpers';
 import {
  prototype2jsxElement,
@@ -741,6 +742,7 @@ export class Workspace extends EventTarget implements IWorkspace {
   * 更新依赖，没有就添加
   * @param name
   * @param version
+   * FIXME: 参数3的设置需要重新考虑下
   */
  updateDependency(
    name: string,
@@ -763,15 +765,12 @@ export class Workspace extends EventTarget implements IWorkspace {
        if (!packages) {
          return undefined;
        }
-        if (options?.package || packages[name]) {
-          packages[name] = {
-            type: packages[name]?.type,
-            // 如果没有传入 package 信息，则沿用 tango.config.json 中已记录的数据
-            // 如果传入了，则全量使用传入的信息，适配可能在某个版本中如 resources 等字段被删除的情况
-            ...(options?.package || packages[name]),
-            version,
-          };
-        }
+
+        setValue(packages, name, {
+          ...packages[name], // 保留原有的配置
+          version, // 更新版本号
+          ...options?.package, // 更新 package 配置
+        });

        return packages;
      })
@@ -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.3.2](https://github.com/netease/tango/compare/@music163/tango-designer@1.3.1...@music163/tango-designer@1.3.2) (2024-06-20)
+
+### Bug Fixes
+
+- drag-panel add resizeable & height prop ([#175](https://github.com/netease/tango/issues/175)) ([b53a9f7](https://github.com/netease/tango/commit/b53a9f7eefc748ba8a7c94270c3a374b9d6ed211))
+- fix global hotkey triggering on content editable elements ([#174](https://github.com/netease/tango/issues/174)) ([a2cc418](https://github.com/netease/tango/commit/a2cc418a73edfd9b7fe8aad456ae775a49df2166))
+- update designer style ([#176](https://github.com/netease/tango/issues/176)) ([0f3f0af](https://github.com/netease/tango/commit/0f3f0afdfa8aee2532a97c5c2e92ef4230397d86))
+
 ## [1.3.1](https://github.com/netease/tango/compare/@music163/tango-designer@1.3.0...@music163/tango-designer@1.3.1) (2024-06-05)

 ### Bug Fixes
@@ -1,6 +1,6 @@
 {
  "name": "@music163/tango-designer",
-  "version": "1.3.1",
+  "version": "1.3.2",
  "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.3",
-    "@music163/tango-core": "^1.3.1",
+    "@music163/tango-context": "^1.1.4",
+    "@music163/tango-core": "^1.3.2",
    "@music163/tango-helpers": "^1.2.0",
-    "@music163/tango-sandbox": "^1.0.6",
-    "@music163/tango-setting-form": "^1.2.6",
-    "@music163/tango-ui": "^1.3.1",
+    "@music163/tango-sandbox": "^1.0.7",
+    "@music163/tango-setting-form": "^1.2.7",
+    "@music163/tango-ui": "^1.3.2",
    "antd": "^4.24.2",
    "cash-dom": "^8.1.2",
    "classnames": "^2.5.1",
@@ -125,6 +125,8 @@ export const ComponentsPopover = observer(
        }
        footer={tipsTextMap[type]}
        width="330px"
+        height="450px"
+        resizeable
        maskClosable
        body={
          <ComponentsPanel
@@ -133,10 +135,6 @@ export const ComponentsPopover = observer(
            menuData={menuData}
            layout={layout}
            onItemSelect={handleSelect}
-            style={{
-              maxHeight: '400px',
-              overflow: 'auto',
-            }}
          />
        }
        {...popoverProps}
@@ -386,7 +386,8 @@ export function useDnd({
  };

  const onKeyDown = (e: React.KeyboardEvent) => {
-    const isInputElement = isInputElements((e.target as HTMLElement).nodeName);
+    const target = e.target as HTMLElement;
+    const isInputElement = target.isContentEditable || isInputElements(target.nodeName);
    // 禁用输入事件的触发的快捷键逻辑
    if (!isInputElement) {
      const key = getHotkey(e);
@@ -3,8 +3,8 @@ import { Box, Text, css } from 'coral-system';
 import { Dropdown, Button } from 'antd';
 import { isValidExpressionCode } from '@music163/tango-core';
 import { getValue, IVariableTreeNode, noop } from '@music163/tango-helpers';
-import { CloseCircleFilled, ExpandAltOutlined, MenuOutlined } from '@ant-design/icons';
-import { Panel, InputCode, Action, DragPanel } from '@music163/tango-ui';
+import { CloseCircleFilled, MenuOutlined } from '@ant-design/icons';
+import { Panel, InputCode, Action, DragPanel, PopOutOutlined } from '@music163/tango-ui';
 import { FormItemComponentProps } from '@music163/tango-setting-form';
 import { useWorkspace, useWorkspaceData } from '@music163/tango-context';
 import { VariableTree } from '../components';
@@ -195,53 +195,62 @@ export function ExpressionPopover({
  return (
    <DragPanel
      width={700}
-      title={`将 ${selectNodePath}/${title} 设置为引用变量或自定义表达式`}
-      extra={subTitle}
+      height={615}
+      resizeable
+      title={`使用代码设置 ${selectNodePath} 组件的${title}`}
      onOpenChange={(open) => {
        if (!open) {
          setExp(undefined);
          setError('');
        }
      }}
-      popoverStyle={{
-        height: '615px',
-      }}
      body={
-        <>
-          <Panel shape="solid">
+        <Box display="flex" flexDirection="column">
+          <Box p="m">
            <InputCode
              shape="inset"
              minHeight="56px"
-              maxHeight="200px"
+              maxHeight="160px"
              value={exp}
              placeholder={placeholder}
              onChange={handleExpInputChange}
              onBlur={() => {
-                setError(expressionValueValidate(exp));
+                if (exp) {
+                  setError(expressionValueValidate(exp));
+                }
              }}
              autoCompleteContext={evaluateContext}
              autoCompleteOptions={autoCompleteOptions}
            />
            {error ? (
-              <Text color="red" fontSize="12px">
+              <Text color="red" fontSize="12px" as="p">
                出错了！输入的表达式存在语法错误，请修改后再提交！
              </Text>
-            ) : (
-              <Text fontSize="12px" color="text3">
-                说明：你可以在上面的代码输入框里输入常规的 javascript 代码，还可以直接使用 jsx
-                代码，但需要符合该属性的接受值定义。
+            ) : null}
+            {subTitle && (
+              <Text fontSize="12px" color="text3" as="p">
+                {subTitle}
              </Text>
            )}
-          </Panel>
+            <Text fontSize="12px" color="text3" as="p">
+              说明：你可以在上面的代码输入框里输入常规的 javascript 代码，还可以直接使用 jsx
+              代码，但需要符合该属性的接受值定义。
+            </Text>
+          </Box>
          <Panel
            title="从变量列表中选中"
            shape="solid"
-            borderTop="0"
-            overflow="hidden"
-            bodyProps={{ overflow: 'hidden' }}
+            borderLeft="0"
+            borderRight="0"
+            flex={1}
+            bodyProps={{
+              style: {
+                overflow: 'hidden',
+              },
+            }}
          >
            <VariableTree
-              height={380}
+              height="100%"
              showViewButton
              dataSource={dataSource || expressionVariables}
              appContext={sandbox?.window['tango']}
@@ -307,10 +316,10 @@ export function ExpressionPopover({
              }}
            />
          </Panel>
-        </>
+        </Box>
      }
      footer={(close) => (
-        <Box display="flex" justifyContent="flex-end" gap="5px">
+        <Box display="flex" width="100%" justifyContent="flex-end" gap="5px">
          <Button
            type="primary"
            size="small"
@@ -330,7 +339,12 @@ export function ExpressionPopover({
      )}
    >
      {children || (
-        <Action tooltip="打开表达式变量选择面板" icon={<ExpandAltOutlined />} size="small" />
+        <Action
+          tooltip="弹出代码编辑和变量选择面板"
+          tooltipProps={{ placement: 'topLeft' }}
+          icon={<PopOutOutlined />}
+          size="small"
+        />
      )}
    </DragPanel>
  );
@@ -68,17 +68,6 @@ export const DependencyPanel = observer(
      [dependencies, baseDependencies, bizDependencies, packages, packageNames],
    );

-    // 业务组件依赖
-    const bizDeps = useMemo(
-      () =>
-        bizDependencies?.map((name: string) => ({
-          name,
-          version: dependencies[name] ?? packages?.[name]?.version,
-          package: packages?.[name],
-        })) || [],
-      [bizDependencies, dependencies, packages],
-    );
-
    // 基础包
    const baseDeps = useMemo(
      () =>
@@ -30,6 +30,7 @@ export const StateTree = observer(() => {
    'pageStore',
    'services',
    'config',
+    'routeData',
  ]);
  const callback = () => {
    forceUpdate();
@@ -155,18 +155,20 @@ function SelectionBox({ showActions, actions, data }: SelectionBoxProps) {
      css={selectionBoxStyle}
      style={style}
    >
-      <>
-        <ComponentsPopover type="before">
-          <Tooltip title={`在 ${selectedNodeName} 的前方添加兄弟节点`}>
-            <SelectionHelper icon={<PlusOutlined />} css={topAddSiblingBtnStyle} />
-          </Tooltip>
-        </ComponentsPopover>
-        <ComponentsPopover type="after">
-          <Tooltip title={`在 ${selectedNodeName} 的后方添加兄弟节点`}>
-            <SelectionHelper icon={<PlusOutlined />} css={bottomAddSiblingBtnStyle} />
-          </Tooltip>
-        </ComponentsPopover>
-      </>
+      {!isPage ? (
+        <>
+          <ComponentsPopover type="before">
+            <Tooltip title={`在 ${selectedNodeName} 的前方添加兄弟节点`}>
+              <SelectionHelper icon={<PlusOutlined />} css={topAddSiblingBtnStyle} />
+            </Tooltip>
+          </ComponentsPopover>
+          <ComponentsPopover type="after">
+            <Tooltip title={`在 ${selectedNodeName} 的后方添加兄弟节点`}>
+              <SelectionHelper icon={<PlusOutlined />} css={bottomAddSiblingBtnStyle} />
+            </Tooltip>
+          </ComponentsPopover>
+        </>
+      ) : null}
      {showActions && (
        <SelectionHelpers align={selectionHelpersAlign}>
          <SelectionHelper
@@ -204,7 +206,7 @@ function SelectionBox({ showActions, actions, data }: SelectionBoxProps) {
            }
          />
          <SelectionToolSet>{!isPage && actions}</SelectionToolSet>
-          {isFromCurrentFile && prototype?.hasChildren !== false && (
+          {isFromCurrentFile && prototype?.hasChildren && (
            <ComponentsPopover>
              <Tooltip title="快捷添加子元素">
                <SelectionHelper icon={<PlusOutlined />} />
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [1.0.7](https://github.com/netease/tango/compare/@music163/tango-sandbox@1.0.6...@music163/tango-sandbox@1.0.7) (2024-06-20)
+
+**Note:** Version bump only for package @music163/tango-sandbox
+
 ## [1.0.6](https://github.com/netease/tango/compare/@music163/tango-sandbox@1.0.5...@music163/tango-sandbox@1.0.6) (2024-06-05)

 **Note:** Version bump only for package @music163/tango-sandbox
@@ -1,6 +1,6 @@
 {
  "name": "@music163/tango-sandbox",
-  "version": "1.0.6",
+  "version": "1.0.7",
  "description": "sandbox of tango apps",
  "author": "wwsun <ww.sun@outlook.com>",
  "homepage": "",
@@ -29,7 +29,7 @@
  },
  "dependencies": {
    "@ant-design/icons": "^4.8.0",
-    "@music163/tango-core": "^1.3.1",
+    "@music163/tango-core": "^1.3.2",
    "@music163/tango-helpers": "^1.2.0",
    "crypto-js": "^4.1.1",
    "lodash.isequal": "4.5.0",
@@ -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.7](https://github.com/netease/tango/compare/@music163/tango-setting-form@1.2.6...@music163/tango-setting-form@1.2.7) (2024-06-20)
+
+### Bug Fixes
+
+- update designer style ([#176](https://github.com/netease/tango/issues/176)) ([0f3f0af](https://github.com/netease/tango/commit/0f3f0afdfa8aee2532a97c5c2e92ef4230397d86))
+
 ## [1.2.6](https://github.com/netease/tango/compare/@music163/tango-setting-form@1.2.5...@music163/tango-setting-form@1.2.6) (2024-06-05)

 **Note:** Version bump only for package @music163/tango-setting-form
@@ -1,6 +1,6 @@
 {
  "name": "@music163/tango-setting-form",
-  "version": "1.2.6",
+  "version": "1.2.7",
  "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.3.1",
+    "@music163/tango-core": "^1.3.2",
    "@music163/tango-helpers": "^1.2.0",
-    "@music163/tango-ui": "^1.3.1",
+    "@music163/tango-ui": "^1.3.2",
    "antd": "^4.24.2",
    "coral-system": "^1.0.5",
    "mobx": "6.12.3",
@@ -1,3 +1,4 @@
+import React from 'react';
 import { CodeSetter } from './code-setter';
 import { BoolSetter } from './bool-setter';
 import { IdSetter } from './id-setter';
@@ -36,6 +37,10 @@ const BASIC_SETTERS: IFormItemCreateOptions[] = [
    name: 'idSetter',
    component: IdSetter,
  },
+  {
+    name: 'imageSetter',
+    render: (props) => <TextSetter placeholder="请提供图片地址" {...props} />,
+  },
 ];

 let registered = false;
@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [1.3.2](https://github.com/netease/tango/compare/@music163/tango-ui@1.3.1...@music163/tango-ui@1.3.2) (2024-06-20)
+
+### Bug Fixes
+
+- drag-panel add resizeable & height prop ([#175](https://github.com/netease/tango/issues/175)) ([b53a9f7](https://github.com/netease/tango/commit/b53a9f7eefc748ba8a7c94270c3a374b9d6ed211))
+- update designer style ([#176](https://github.com/netease/tango/issues/176)) ([0f3f0af](https://github.com/netease/tango/commit/0f3f0afdfa8aee2532a97c5c2e92ef4230397d86))
+
 ## [1.3.1](https://github.com/netease/tango/compare/@music163/tango-ui@1.3.0...@music163/tango-ui@1.3.1) (2024-06-05)

 ### Bug Fixes
@@ -1,6 +1,6 @@
 {
  "name": "@music163/tango-ui",
-  "version": "1.3.1",
+  "version": "1.3.2",
  "description": "ui widgets of tango",
  "keywords": [
    "react",
@@ -1,4 +1,4 @@
-import { Tooltip } from 'antd';
+import { Tooltip, TooltipProps } from 'antd';
 import React from 'react';
 import { css, Button, Link, HTMLCoralProps } from 'coral-system';
 import cx from 'classnames';
@@ -48,6 +48,10 @@ export interface ActionProps extends HTMLCoralProps<any> {
   * 提示文本
   */
  tooltip?: string;
+  /**
+   * Tooltip属性透传
+   */
+  tooltipProps?: TooltipProps;
  /**
   * 超链接
   */
@@ -75,6 +79,7 @@ export interface ActionProps extends HTMLCoralProps<any> {
 export function Action({
  icon,
  tooltip,
+  tooltipProps,
  href,
  size,
  shape,
@@ -110,7 +115,11 @@ export function Action({
  }

  if (tooltip) {
-    return <Tooltip title={tooltip}>{ret}</Tooltip>;
+    return (
+      <Tooltip title={tooltip} {...tooltipProps}>
+        {ret}
+      </Tooltip>
+    );
  }
  return ret;
 }
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box, HTMLCoralProps, css } from 'coral-system';
-import { UpOutlined } from '@ant-design/icons';
+import { CaretRightOutlined } from '@ant-design/icons';
 import { useControllableState } from '@music163/tango-helpers';

 export interface CollapsePanelProps extends Omit<HTMLCoralProps<'div'>, 'title'> {
@@ -39,8 +39,10 @@ export interface CollapsePanelProps extends Omit<HTMLCoralProps<'div'>, 'title'>
 const headerStyle = css`
  user-select: none;

-  .anticon-up {
-    margin-right: 8px;
+  .anticon-caret-right {
+    width: 10px;
+    height: 10px;
+    margin-right: 4px;
    color: var(--tango-colors-text2);
    transition: transform 0.2s ease 0s;
  }
@@ -67,7 +69,7 @@ export function CollapsePanel(props: CollapsePanelProps) {
  });

  const iconStyle = {
-    transform: collapsed ? undefined : 'rotate(-180deg)',
+    transform: collapsed ? undefined : 'rotate(90deg)',
  };

  const stickHeaderProps: HTMLCoralProps<'div'> = stickyHeader
@@ -104,7 +106,7 @@ export function CollapsePanel(props: CollapsePanelProps) {
        css={headerStyle}
      >
        <Box display="flex" alignItems="center" fontSize="14px" fontWeight="500">
-          <UpOutlined style={iconStyle} />
+          <CaretRightOutlined style={iconStyle} />
          {title}
        </Box>
        <Box>{extra}</Box>
@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 import { Box, Text, styled } from 'coral-system';
-import { Popover, PopoverProps, IconFont } from './';
 import Draggable from 'react-draggable';
-import { CloseOutlined } from '@ant-design/icons';
+import { CloseOutlined, HolderOutlined } from '@ant-design/icons';
 import { noop } from '@music163/tango-helpers';
+import { Popover, PopoverProps } from './popover';

 // Dragging over an iframe stops dragging when moving the mouse too fast #613
 // https://github.com/react-grid-layout/react-draggable/issues/613
@@ -35,6 +35,52 @@ const CloseIcon = styled(CloseOutlined)`
  }
 `;

+const DragPanelContainer = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+  border: 1px solid var(--tango-colors-line2);
+  width: ${(props) => props.width}px;
+  height: ${(props) => props.height}px;
+  resize: ${(props) => (props.resizeable ? 'both' : 'none')};
+  overflow: ${(props) => (props.resizeable ? 'auto' : 'hidden')};
+`;
+
+const DragPanelHeader = styled(Box)`
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--tango-colors-line2);
+  cursor: move;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  min-height: 36px;
+`;
+
+const DragPanelBody = styled(Box)`
+  flex: 1;
+  min-height: 0;
+  > * {
+    height: 100%;
+  }
+`;
+
+const DragPanelFooter = styled(Box)`
+  padding: 8px 12px;
+  min-height: 36px;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  background: var(--tango-colors-line1);
+  font-size: 12px;
+  font-weight: 400;
+  border-top: 1px solid var(--tango-colors-line2);
+`;
+
 interface DragPanelProps extends Omit<PopoverProps, 'overlay' | 'open'> {
  // 标题
  title?: React.ReactNode | string;
@@ -44,8 +90,12 @@ interface DragPanelProps extends Omit<PopoverProps, 'overlay' | 'open'> {
  footer?: ((close: () => void) => React.ReactNode) | React.ReactNode | string;
  // 宽度
  width?: number | string;
+  // 高度
+  height?: number | string;
  // 右上角区域
  extra?: React.ReactNode | string;
+  // 是否可以缩放
+  resizeable?: boolean;
  children?: React.ReactNode;
 }

@@ -55,8 +105,10 @@ export function DragPanel({
  body,
  children,
  width = 330,
+  height = 330,
  extra,
  onOpenChange = noop,
+  resizeable = false,
  ...props
 }: DragPanelProps) {
  const [open, setOpen] = useState(false);
@@ -78,32 +130,20 @@ export function DragPanel({
      }}
      overlay={
        <Draggable
-          handle=".selection-drag-bar"
+          handle=".drag-panel-header"
          onStart={() => {
            injectStyleToBody();
          }}
        >
-          <Box
-            bg="#FFF"
-            borderRadius="m"
-            boxShadow="lowDown"
-            border="solid"
-            borderColor="line2"
-            overflow="hidden"
+          <DragPanelContainer
+            className="drag-panel"
            width={width}
+            height={height}
+            resizeable={resizeable}
          >
-            {/* 头部区域 */}
-            <Box
-              px="l"
-              py="m"
-              className="selection-drag-bar"
-              borderBottom="1px solid var(--tango-colors-line2)"
-              cursor="move"
-              display="flex"
-              justifyContent="space-between"
-            >
+            <DragPanelHeader className="drag-panel-header">
              <Box fontSize="12px" color="text2">
-                <IconFont type="icon-applications" />
+                <HolderOutlined />
                <Text marginLeft={'5px'}>{title}</Text>
              </Box>
              <Box color="text2" fontSize="12px" display="flex" alignItems="center">
@@ -115,26 +155,12 @@ export function DragPanel({
                  }}
                />
              </Box>
-            </Box>
-            {/* 主体区域 */}
-            {body}
-            {/* 底部 */}
+            </DragPanelHeader>
+            <DragPanelBody className="drag-panel-body">{body}</DragPanelBody>
            {footer && (
-              <Box
-                px="l"
-                py="m"
-                whiteSpace="nowrap"
-                overflow="hidden"
-                textOverflow="ellipsis"
-                background="var(--tango-colors-line1)"
-                fontSize="12px"
-                fontWeight={400}
-                borderTop="1px solid var(--tango-colors-line2)"
-              >
-                {footerNode}
-              </Box>
+              <DragPanelFooter className="drag-panel-footer">{footerNode}</DragPanelFooter>
            )}
-          </Box>
+          </DragPanelContainer>
        </Draggable>
      }
      {...props}
@@ -2,10 +2,12 @@ export * from './create-icon';
 export * from './code-outlined';
 export * from './line-dashed-outlined';
 export * from './line-solid-outlined';
+export * from './package-outlined';
 export * from './open-panel-filled-left-outlined';
 export * from './open-panel-filled-right-outlined';
 export * from './open-panel-left-outlined';
 export * from './open-panel-right-outlined';
 export * from './undo-outlined';
+export * from './pop-out-outlined';
 export * from './redo-outlined';
 export * from './dual-outlined';
@@ -0,0 +1,16 @@
+import React from 'react';
+import { createIcon } from './create-icon';
+
+const PackageOutlinedSvg = () => (
+  <svg
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+  >
+    <path d="M915.2 284.8c0-3.2 0-3.2-3.2-6.4 0-3.2-3.2-3.2-6.4-6.4-9.6-12.8-22.4-25.6-38.4-35.2l-297.6-169.6c-35.2-22.4-80-22.4-118.4 0L313.6 147.2c-6.4 3.2-12.8 6.4-16 12.8L153.6 240c-12.8 9.6-25.6 22.4-38.4 35.2 0 3.2-3.2 3.2-3.2 6.4s0 3.2-3.2 6.4c-6.4 16-12.8 35.2-12.8 54.4v342.4c0 41.6 22.4 80 57.6 102.4l297.6 169.6c12.8 6.4 28.8 12.8 41.6 16 3.2 3.2 9.6 3.2 16 3.2s9.6-3.2 16-3.2c16-3.2 28.8-6.4 41.6-16l297.6-169.6c35.2-22.4 57.6-60.8 57.6-102.4V342.4c6.4-19.2 0-38.4-6.4-57.6z m-428.8-160c9.6-3.2 16-6.4 25.6-6.4 9.6 0 19.2 3.2 25.6 6.4L832 291.2l-128 73.6-316.8-182.4 99.2-57.6z m25.6 352L192 291.2l128-73.6 316.8 182.4-124.8 76.8zM185.6 729.6c-16-9.6-25.6-28.8-25.6-48V345.6l320 185.6V896l-294.4-166.4z m652.8 0L544 896V531.2l320-185.6v336c0 19.2-9.6 38.4-25.6 48z" />
+  </svg>
+);
+
+export const PackageOutlined = createIcon(PackageOutlinedSvg, 'PackageOutlined');
@@ -0,0 +1,17 @@
+import React from 'react';
+import { createIcon } from './create-icon';
+
+const Svg = () => (
+  <svg
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="currentColor"
+  >
+    <path d="M832 544a32 32 0 0 1 64 0V832a128 128 0 0 1-128 128H192a128 128 0 0 1-128-128V256a128 128 0 0 1 128-128h288a32 32 0 0 1 0 64H192a64 64 0 0 0-64 64v576a64 64 0 0 0 64 64h576a64 64 0 0 0 64-64V544z m-327.68 21.696a32 32 0 1 1-45.184-45.248L851.52 128H672a32 32 0 0 1 0-64H896a64 64 0 0 1 64 64v224a32 32 0 0 1-64 0V174.08L504.32 565.632z" />
+  </svg>
+);
+
+export const PopOutOutlined = createIcon(Svg, 'PopOutOutlined');
@@ -14,8 +14,14 @@ const buttonStyle = css`
  padding: 0 8px;

  .anticon-down {
-    font-size: 12px !important;
+    width: 10px;
+    height: 10px;
    margin-left: 4px;
+    transition: transform 0.1s ease-in;
+  }
+
+  &:hover .anticon-down {
+    transform: translateY(2px);
  }

  &.size-s {
@@ -154,6 +160,10 @@ export interface ToggleButtonProps extends Omit<HTMLCoralProps<'button'>, 'type'
   * 下拉菜单的属性
   */
  dropdownProps?: DropDownProps;
+  /**
+   * 是否显示下拉图标
+   */
+  showDropdownIcon?: boolean;
 }

 /**
@@ -176,6 +186,7 @@ export function ToggleButton(props: ToggleButtonProps) {
    overlayStyle,
    onItemClick,
    dropdownProps = {},
+    showDropdownIcon = true,
    ...rest
  } = props;
  const clazz = cx({
@@ -198,7 +209,7 @@ export function ToggleButton(props: ToggleButtonProps) {
        )}
        {children}
      </Box>
-      {showDropdown ? <DownOutlined /> : null}
+      {showDropdown && showDropdownIcon ? <DownOutlined /> : null}
    </Button>
  );
Author	SHA1	Message	Date
Wells	8ac0954d65	fix: update state tree data	2024-06-26 16:48:52 +08:00
Wells	0cb71a8634	fix: check if prototype exists in selection tool	2024-06-25 17:45:34 +08:00
Wells	a7759494de	fix: update toggleButton arrow style	2024-06-21 19:40:19 +08:00
Wells	0011cdca0f	chore(release): publish - @music163/tango-context@1.1.4 - @music163/tango-core@1.3.2 - @music163/tango-designer@1.3.2 - @music163/tango-sandbox@1.0.7 - @music163/tango-setting-form@1.2.7 - @music163/tango-ui@1.3.2	2024-06-20 15:45:08 +08:00
Wells	0f3f0afdfa	fix: update designer style (#176 ) * fix: remove useless codes * fix: show insert children icon only for hasChildren node * fix: update dependency * fix: update styles * fix: show sibling action for nodes except page & update drag icon for DragPanel * fix: update ToggleButton style * fix: add showDropdownIcon to ToggleButton * fix: update codeSetter style * fix: add builtin imageSetter * fix: update PopOut icon	2024-06-20 15:42:49 +08:00
BoBoooooo	b53a9f7eef	fix: drag-panel add resizeable & height prop (#175 ) * fix: drag-panel add resizeable & height prop * fix: add className	2024-06-18 16:56:00 +08:00
Wells	5336c2ec28	docs: update	2024-06-11 09:17:36 +00:00
Wells	cdbd2351a2	docs: update README.zh-CN.md	2024-06-11 17:04:28 +08:00
Wells	1f03977f7d	docs: add some examples	2024-06-11 17:01:41 +08:00
864907600cc	a2cc418a73	fix: fix global hotkey triggering on content editable elements (#174 )	2024-06-06 14:57:41 +08:00