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
2026-08-28 17:41:30 +08:00 · 2024-06-20 15:42:49 +08:00
parent b53a9f7eef
commit 0f3f0afdfa
15 changed files with 141 additions and 64 deletions
@@ -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>
  );
 }
@@ -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',
@@ -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,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';
@@ -197,8 +197,7 @@ export function ExpressionPopover({
      width={700}
      height={615}
      resizeable
-      title={`将 ${selectNodePath}/${title} 设置为引用变量或自定义表达式`}
-      extra={subTitle}
+      title={`使用代码设置 ${selectNodePath} 组件的${title}`}
      onOpenChange={(open) => {
        if (!open) {
          setExp(undefined);
@@ -207,7 +206,7 @@ export function ExpressionPopover({
      }}
      body={
        <Box display="flex" flexDirection="column">
-          <Panel shape="solid">
+          <Box p="m">
            <InputCode
              shape="inset"
              minHeight="56px"
@@ -216,26 +215,33 @@ export function ExpressionPopover({
              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"
+            borderLeft="0"
+            borderRight="0"
            flex={1}
            bodyProps={{
              style: {
@@ -333,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(
      () =>
@@ -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 />} />
@@ -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;
@@ -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
@@ -143,7 +143,7 @@ export function DragPanel({
          >
            <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">
@@ -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,10 @@ 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;
  }

  &.size-s {
@@ -57,6 +59,10 @@ const buttonStyle = css`

    &:hover {
      background-color: rgba(197, 197, 197, 0.16);
+
+      .anticon-down {
+        transform: translateY(2px);
+      }
    }

    &.disabled {
@@ -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>
  );