chore(release): publish

- @music163/tango-designer@1.4.3 - @music163/tango-setting-form@1.2.12 - @music163/tango-ui@1.4.2
fix: file errors overlay support click to error file & optimize ui (#197 )
2026-09-03 22:47:27 +08:00 · 2024-08-09 15:49:28 +08:00 · 2024-08-09 13:52:35 +08:00 · 2024-08-08 11:20:20 +08:00 · 2024-08-07 15:51:36 +08:00
13 changed files with 155 additions and 43 deletions
--- a/apps/playground/src/helpers/index.tsx
+++ b/apps/playground/src/helpers/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Group } from 'coral-system';
+import { Box, Group, Text } from 'coral-system';
 import { Avatar, Space, Switch } from 'antd';
 import { BranchesOutlined, MenuOutlined, QuestionCircleOutlined } from '@ant-design/icons';
 import { registerSetter } from '@music163/tango-designer';
@@ -66,12 +66,12 @@ export function Logo() {
 export function ProjectDetail() {
  return (
    <Box display="flex" alignItems="center" columnGap="l">
-      <Box className="ProjectName" fontSize="18px" fontWeight="bold">
+      <Text className="ProjectName" fontSize="18px" fontWeight="bold" truncated>
        community-test
-      </Box>
-      <Box className="BranchName" as="code" fontSize="14px">
+      </Text>
+      <Text className="BranchName" as="code" fontSize="14px" truncated>
        <BranchesOutlined /> feature/list
-      </Box>
+      </Text>
    </Box>
  );
 }
--- a/packages/designer/CHANGELOG.md
+++ b/packages/designer/CHANGELOG.md
@@ -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.4.3](https://github.com/netease/tango/compare/@music163/tango-designer@1.4.2...@music163/tango-designer@1.4.3) (2024-08-09)
+
+### Bug Fixes
+
+- file errors overlay support click to error file & optimize ui ([#197](https://github.com/netease/tango/issues/197)) ([ca56edd](https://github.com/netease/tango/commit/ca56edd9ae201dbeb84b03ad390a09085433a257))
+- route matching without query string & toggle button wrapping ([#195](https://github.com/netease/tango/issues/195)) ([9394666](https://github.com/netease/tango/commit/939466648d40331800f15e886256a0789b7e7623))
+- update mobile simulator ui ([#196](https://github.com/netease/tango/issues/196)) ([65149f1](https://github.com/netease/tango/commit/65149f1326eaf78e8a27222993c3cacc674cd378))
+
 ## [1.4.2](https://github.com/netease/tango/compare/@music163/tango-designer@1.4.1...@music163/tango-designer@1.4.2) (2024-08-06)

 **Note:** Version bump only for package @music163/tango-designer
--- a/packages/designer/package.json
+++ b/packages/designer/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@music163/tango-designer",
-  "version": "1.4.2",
+  "version": "1.4.3",
  "description": "lowcode designer",
  "keywords": [
    "react"
@@ -37,8 +37,8 @@
    "@music163/tango-core": "^1.4.2",
    "@music163/tango-helpers": "^1.2.2",
    "@music163/tango-sandbox": "^1.0.11",
-    "@music163/tango-setting-form": "^1.2.11",
-    "@music163/tango-ui": "^1.4.1",
+    "@music163/tango-setting-form": "^1.2.12",
+    "@music163/tango-ui": "^1.4.2",
    "antd": "^4.24.2",
    "cash-dom": "^8.1.2",
    "classnames": "^2.5.1",
--- a/packages/designer/src/components/file-errors-overlay.tsx
+++ b/packages/designer/src/components/file-errors-overlay.tsx
@@ -1,11 +1,39 @@
 import React, { useState } from 'react';
-import { Box, css } from 'coral-system';
-import { observer, useWorkspace } from '@music163/tango-context';
+import { Box, css, Text } from 'coral-system';
+import { observer, useDesigner, useWorkspace } from '@music163/tango-context';
 import { CloseOutlined } from '@ant-design/icons';

 const errorMessageStyle = css`
-  padding: 24px;
+  padding: 35px;
+  position: relative;
  white-space: pre-wrap;
+  color: #f45755;
+  font-weight: bold;
+  height: 100%;
+  background-color: #171717;
+  border-radius: 8px;
+  .top-bar {
+    border-radius: 8px 8px 0 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 10px;
+    background-color: #f45755;
+  }
+  .WorkspaceErrorOverlayItem {
+    font-size: 18px;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    .WorkspaceErrorOverlayItemFilename {
+      color: #48cacb;
+      text-decoration: underline;
+      letter-spacing: 1px;
+      &:hover {
+        color: #51b1ff;
+      }
+    }
+  }
 `;

 /**
@@ -14,11 +42,17 @@ const errorMessageStyle = css`
 export const FileErrorsOverlay = observer(() => {
  const [isVisible, setIsVisible] = useState<boolean>(true);
  const workspace = useWorkspace();
+  const designer = useDesigner();

  const handleClose = () => {
    setIsVisible(false);
  };

+  const handleOpenErrorFile = (fileName: string) => {
+    workspace.setActiveFile(fileName);
+    designer.setActiveView('code');
+  };
+
  if (workspace.fileErrors.length === 0) {
    return null;
  }
@@ -35,32 +69,63 @@ export const FileErrorsOverlay = observer(() => {
      left="0"
      right="0"
      height="100%"
-      bg="rgba(244, 244, 244, 0.9)"
+      bg="rgb(84, 84, 84)"
+      padding="30px"
      color="red"
+      overflow="auto"
      zIndex={1999}
    >
-      <Box position="relative" p="4">
+      <Box position="relative" p="4" boxShadow="0 0 10px rgba(0, 0, 0, 0.5)">
        <CloseOutlined
          style={{
            position: 'absolute',
-            top: 12,
+            top: 24,
            right: 12,
-            color: '#000',
+            color: '#fff',
+            zIndex: 2,
          }}
          onClick={handleClose}
        />
        <Box css={errorMessageStyle}>
-          <Box fontSize="20px" mb="l">
-            代码解析错误，请回到源码模式检查并修改错误
+          <Box className="top-bar" />
+          <Box fontSize="18px" mb="l">
+            <Text letterSpacing=".5px" color="#c29ef5">
+              [plugin: @babel/parser]
+            </Text>
+            <Text marginLeft={'8px'} color="#f45755">
+              SyntaxError in {workspace.fileErrors.length} files，Click file to modify the error
+              code
+            </Text>
          </Box>
-          {workspace.fileErrors.map((fileError) => (
-            <Box key={fileError.filename} borderBottom="solid" borderBottomColor="line2" py="l">
-              <Box fontWeight="bold">{fileError.filename}</Box>
-              <Box as="code" display="block">
-                {fileError.message}
+          <Box>
+            {workspace.fileErrors.map((fileError, index) => (
+              <Box
+                className="WorkspaceErrorOverlayItem"
+                key={fileError.filename}
+                borderBottom={index === workspace.fileErrors.length - 1 ? 'none' : 'dashed'}
+                borderBottomColor="line2"
+                py="l"
+              >
+                <Box
+                  className="WorkspaceErrorOverlayItemFilename"
+                  fontWeight="bold"
+                  style={{ cursor: 'pointer' }}
+                  onClick={() => handleOpenErrorFile(fileError.filename)}
+                >
+                  {fileError.filename}
+                </Box>
+                <Box
+                  as="code"
+                  display="block"
+                  color="#daa15e"
+                  fontSize="16px"
+                  fontWeight={'normal'}
+                >
+                  {fileError.message}
+                </Box>
              </Box>
-            </Box>
-          ))}
+            ))}
+          </Box>
        </Box>
      </Box>
    </Box>
--- a/packages/designer/src/simulator/simulator.tsx
+++ b/packages/designer/src/simulator/simulator.tsx
@@ -25,22 +25,45 @@ function DesktopSimulator({ children }: HTMLCoralProps<'div'>) {
 }

 const mobileStyle = css`
-  --device-viewport-width: 375px;
-  --device-viewport-height: 812px;
-  --device-frame-width: 13px;
-  background-image: url(https://p5.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/21897838692/b1c5/2665/56db/10558c1bb2030d55ceabbcc74431de99.png);
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  box-shadow: 0 2px 8px rgb(2 8 20 / 10%), 0 8px 16px rgb(2 8 20 / 8%);
-  border-radius: 62px;
-  overflow: hidden;
+  --device-viewport-width: 360px;
+  --device-viewport-height: 640px;
+  position: relative;
+  margin: auto;
+  border: 16px black solid;
+  border-top-width: 60px;
+  border-bottom-width: 60px;
+  border-radius: 36px;
+
+  &::before {
+    content: '';
+    display: block;
+    width: 60px;
+    height: 5px;
+    position: absolute;
+    top: -30px;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: #333;
+    border-radius: 10px;
+  }
+
+  &::after {
+    content: '';
+    display: block;
+    width: 35px;
+    height: 35px;
+    position: absolute;
+    left: 50%;
+    bottom: -65px;
+    transform: translate(-50%, -50%);
+    background: #333;
+    border-radius: 50%;
+  }

  .MobileSimulatorDeviceFrame {
-    border-radius: 50px;
    width: var(--device-viewport-width);
    height: var(--device-viewport-height);
-    margin: var(--device-frame-width);
-    overflow: hidden;
+    background: white;
  }
 `;

--- a/packages/designer/src/toolbar/mode-switch.tsx
+++ b/packages/designer/src/toolbar/mode-switch.tsx
@@ -9,7 +9,7 @@ export const ModeSwitchTool = observer(() => {
  const designer = useDesigner();

  return (
-    <Group attached>
+    <Group attached whiteSpace="nowrap">
      <ToggleButton
        shape="ghost"
        selected={designer.activeView === 'design'}
--- a/packages/designer/src/toolbar/route-switch.tsx
+++ b/packages/designer/src/toolbar/route-switch.tsx
@@ -47,11 +47,14 @@ function PageSelect({ value, onSelect, onRemove, onUpdate, onCopy, options }: Pa
    setVisible(false);
  };

-  const current = optionMap[value];
+  const pathname = value?.split?.('?')[0];
+  const current = optionMap[pathname];
  return (
    <ToggleButton
      shape="ghost"
      minWidth={100}
+      maxWidth={200}
+      textAlign="left"
      dropdownProps={{
        open: visible,
        onOpenChange: setVisible,
--- a/packages/setting-form/CHANGELOG.md
+++ b/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.12](https://github.com/netease/tango/compare/@music163/tango-setting-form@1.2.11...@music163/tango-setting-form@1.2.12) (2024-08-09)
+
+**Note:** Version bump only for package @music163/tango-setting-form
+
 ## [1.2.11](https://github.com/netease/tango/compare/@music163/tango-setting-form@1.2.10...@music163/tango-setting-form@1.2.11) (2024-08-06)

 **Note:** Version bump only for package @music163/tango-setting-form
--- a/packages/setting-form/package.json
+++ b/packages/setting-form/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@music163/tango-setting-form",
-  "version": "1.2.11",
+  "version": "1.2.12",
  "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.4.2",
    "@music163/tango-helpers": "^1.2.2",
-    "@music163/tango-ui": "^1.4.1",
+    "@music163/tango-ui": "^1.4.2",
    "antd": "^4.24.2",
    "coral-system": "^1.0.5",
    "mobx": "6.12.3",
--- a/packages/ui/CHANGELOG.md
+++ b/packages/ui/CHANGELOG.md
@@ -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.4.2](https://github.com/netease/tango/compare/@music163/tango-ui@1.4.1...@music163/tango-ui@1.4.2) (2024-08-09)
+
+### Bug Fixes
+
+- route matching without query string & toggle button wrapping ([#195](https://github.com/netease/tango/issues/195)) ([9394666](https://github.com/netease/tango/commit/939466648d40331800f15e886256a0789b7e7623))
+- update mobile simulator ui ([#196](https://github.com/netease/tango/issues/196)) ([65149f1](https://github.com/netease/tango/commit/65149f1326eaf78e8a27222993c3cacc674cd378))
+
 ## [1.4.1](https://github.com/netease/tango/compare/@music163/tango-ui@1.4.0...@music163/tango-ui@1.4.1) (2024-08-05)

 **Note:** Version bump only for package @music163/tango-ui
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@music163/tango-ui",
-  "version": "1.4.1",
+  "version": "1.4.2",
  "description": "ui widgets of tango",
  "keywords": [
    "react",
--- a/packages/ui/src/icons/dual-outlined.tsx
+++ b/packages/ui/src/icons/dual-outlined.tsx
@@ -3,7 +3,7 @@ import { createIcon } from './create-icon';

 const DualOutlinedSvg = () => (
  <svg
-    viewBox="0 0 1025 1024"
+    viewBox="0 0 1024 1024"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    width="1em"
--- a/packages/ui/src/toggle-button.tsx
+++ b/packages/ui/src/toggle-button.tsx
@@ -12,6 +12,7 @@ const buttonStyle = css`
  cursor: pointer;
  color: var(--tango-colors-gray-50);
  padding: 0 8px;
+  white-space: nowrap;

  .anticon-down {
    width: 10px;
@@ -201,7 +202,8 @@ export function ToggleButton(props: ToggleButtonProps) {

  let btn = (
    <Button css={buttonStyle} className={clazz} type="button" {...rest}>
-      <Box as="span">
+      {/* @ts-ignore textOverflow is available */}
+      <Box as="span" flex="1" overflow="hidden" textOverflow="ellipsis">
        {icon && (
          <Box as="span" className="buttonIcon" mr="s">
            {icon}
Author	SHA1	Message	Date
wwsun	55bf417ddf	chore(release): publish - @music163/tango-designer@1.4.3 - @music163/tango-setting-form@1.2.12 - @music163/tango-ui@1.4.2	2024-08-09 15:49:28 +08:00
BoBoooooo	ca56edd9ae	fix: file errors overlay support click to error file & optimize ui (#197 )	2024-08-09 13:52:35 +08:00
Wells	65149f1326	fix: update mobile simulator ui (#196 ) * fix: update mobile simulator styles * docs: update * fix: update icon	2024-08-08 11:20:20 +08:00
864907600cc	939466648d	fix: route matching without query string & toggle button wrapping (#195 ) * fix: fix route is not matched when url contains query string * fix: fix mode switch button group wrapping * fix: fix toggle button text wrapping	2024-08-07 15:51:36 +08:00