chore(release): publish

- @music163/tango-context@1.1.9 - @music163/tango-core@1.4.3 - @music163/tango-designer@1.4.5 - @music163/tango-helpers@1.2.3 - @music163/tango-sandbox@1.0.12 - @music163/tango-setting-form@1.2.14 - @music163/tango-ui@1.4.4
fix: add prop value template & fix components popover (#201 )
2026-08-31 00:59:32 +08:00 · 2024-09-02 10:50:59 +08:00 · 2024-08-30 18:09:01 +08:00 · 2024-08-16 17:50:55 +08:00 · 2024-08-16 11:16:39 +08:00 · 2024-08-09 15:49:28 +08:00
48 changed files with 1245 additions and 158 deletions
@@ -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>
  );
 }
@@ -153,6 +153,7 @@ import { definePage } from "@music163/tango-boot";
 import {
  Page,
  Section,
+  Box,
  Button,
  Input,
  FormilyForm,
@@ -166,8 +167,10 @@ import { OutButton } from "../components";
 class App extends React.Component {
  render() {
    return (
-      <Page title={tango.stores.app.title} subTitle={111}>
-        <Section tid="section0" />
+      <Page title={tango.stores.app.title} subTitle={<><Button>hello</Button></>}>
+        <Section tid="section0">
+          <Box></Box>
+        </Section>
        <Section tid="section1" title="Section Title">
          your input: <Input tid="input1" defaultValue="hello" />
          copy input: <Input value={tango.page.input1?.value} />
@@ -132,6 +132,9 @@ export const nativeDomPrototypes = () => {
            title: '样式',
            group: 'style',
            setter: 'expressionSetter',
+            setterProps: {
+              expressionType: 'cssObject',
+            },
          },
          {
            name: 'className',
@@ -197,6 +200,13 @@ const prototypes: Dict<IComponentPrototype> = {
        title: 'd',
        setter: 'textSetter',
      },
+      {
+        name: 'onClick',
+        title: '点击事件',
+        setter: 'eventSetter',
+        template: '(e) => {\n  {{content}}\n}',
+        tip: '回调参数说明：e 为事件对象',
+      },
    ],
  },
  Columns: {
@@ -3,7 +3,7 @@ import { SystemProvider } from 'coral-system';
 import 'antd/dist/antd.css';

 export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
+  actions: { argTypesRegex: '^on.*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
@@ -69,6 +69,14 @@ const prototypeHasBasicProps: IComponentPrototype = {
      title: 'codeSetter',
      setter: 'codeSetter',
    },
+    {
+      name: 'style',
+      title: 'codeSetter(cssObject)',
+      setter: 'codeSetter',
+      setterProps: {
+        expressionType: 'cssObject',
+      },
+    },
    {
      name: 'text',
      title: 'textSetter',
@@ -268,6 +276,9 @@ export function InitValues() {
            name: 'style',
            title: 'codeSetter',
            setter: 'codeSetter',
+            setterProps: {
+              expressionType: 'cssObject',
+            },
          },
          {
            name: 'object',
@@ -0,0 +1,29 @@
+import React from 'react';
+import { ActionSelect } from '@music163/tango-ui';
+
+export default {
+  title: 'UI/ActionSelect',
+  component: ActionSelect,
+};
+
+const options = [
+  { label: 'action1', value: 'action1' },
+  { label: 'action2', value: 'action2' },
+  { label: 'action3', value: 'action3' },
+];
+
+export const Basic = {
+  args: {
+    defaultText: '选择动作',
+    options,
+    onSelect: console.log,
+  },
+};
+
+export const showInput = {
+  args: {
+    text: '选择动作',
+    options,
+    showInput: true,
+  },
+};
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Action, InputCode } from '@music163/tango-ui';
+import { Action, InputCode, InputStyleCode } from '@music163/tango-ui';
 import { BlockOutlined } from '@ant-design/icons';

 export default {
@@ -28,6 +28,10 @@ export function Basic() {
  );
 }

+export function CSS() {
+  return <InputStyleCode enableESLint suffix={<Action icon={<BlockOutlined />} size="small" />} />;
+}
+
 const code = `
 function foo() {
  console.log("test");
@@ -15,10 +15,10 @@
    "test:watch": "jest --watch",
    "eslint": "eslint packages/**/src/*.{ts,tsx} --cache",
    "publish": "lerna publish",
-    "ver": "lerna version --no-private",
-    "release": "yarn eslint && yarn build && lerna version --no-private --conventional-commits && lerna publish from-git",
-    "release:npm": "yarn eslint && yarn build && yarn run ver && lerna publish from-git",
-    "release:beta": "yarn eslint && yarn build && yarn run ver && lerna publish from-package --dist-tag beta",
+    "ver": "lerna version --no-private --conventional-commits",
+    "release": "yarn eslint && yarn build && yarn ver && lerna publish from-git",
+    "release:npm": "yarn eslint && yarn build && yarn ver && lerna publish from-package",
+    "release:beta": "yarn eslint && yarn build && yarn ver && lerna publish from-package --dist-tag beta",
    "up": "yarn upgrade-interactive --latest",
    "prepare": "husky install"
  },
@@ -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.1.9](https://github.com/netease/tango/compare/@music163/tango-context@1.1.8...@music163/tango-context@1.1.9) (2024-09-02)
+
+**Note:** Version bump only for package @music163/tango-context
+
+## [1.1.8](https://github.com/netease/tango/compare/@music163/tango-context@1.1.7...@music163/tango-context@1.1.8) (2024-08-06)
+
+**Note:** Version bump only for package @music163/tango-context
+
+## [1.1.7](https://github.com/netease/tango/compare/@music163/tango-context@1.1.6...@music163/tango-context@1.1.7) (2024-08-05)
+
+**Note:** Version bump only for package @music163/tango-context
+
 ## [1.1.6](https://github.com/netease/tango/compare/@music163/tango-context@1.1.5...@music163/tango-context@1.1.6) (2024-08-01)

 **Note:** Version bump only for package @music163/tango-context
@@ -1,6 +1,6 @@
 {
  "name": "@music163/tango-context",
-  "version": "1.1.6",
+  "version": "1.1.9",
  "description": "react context for tango-apps",
  "keywords": [
    "react",
@@ -31,8 +31,8 @@
    "react": ">= 16.8"
  },
  "dependencies": {
-    "@music163/tango-core": "^1.4.0",
-    "@music163/tango-helpers": "^1.2.1",
+    "@music163/tango-core": "^1.4.3",
+    "@music163/tango-helpers": "^1.2.3",
    "mobx-react-lite": "4.0.7"
  },
  "publishConfig": {
@@ -3,6 +3,20 @@
 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-core@1.4.2...@music163/tango-core@1.4.3) (2024-09-02)
+
+**Note:** Version bump only for package @music163/tango-core
+
+## [1.4.2](https://github.com/netease/tango/compare/@music163/tango-core@1.4.1...@music163/tango-core@1.4.2) (2024-08-06)
+
+### Bug Fixes
+
+- view module \_nodesTree set init value ([#194](https://github.com/netease/tango/issues/194)) ([269e304](https://github.com/netease/tango/commit/269e304d685c4fcc80635b9d04220cda333b80c4))
+
+## [1.4.1](https://github.com/netease/tango/compare/@music163/tango-core@1.4.0...@music163/tango-core@1.4.1) (2024-08-05)
+
+**Note:** Version bump only for package @music163/tango-core
+
 # [1.4.0](https://github.com/netease/tango/compare/@music163/tango-core@1.3.3...@music163/tango-core@1.4.0) (2024-08-01)

 ### Bug Fixes
@@ -1,6 +1,6 @@
 {
  "name": "@music163/tango-core",
-  "version": "1.4.0",
+  "version": "1.4.3",
  "description": "tango core",
  "author": "wwsun <ww.sun@outlook.com>",
  "homepage": "",
@@ -28,7 +28,7 @@
    "@babel/parser": "^7.23.5",
    "@babel/traverse": "^7.23.5",
    "@babel/types": "^7.23.5",
-    "@music163/tango-helpers": "^1.2.1",
+    "@music163/tango-helpers": "^1.2.3",
    "@types/babel__generator": "^7.6.7",
    "@types/babel__traverse": "^7.20.4",
    "mobx": "6.12.3",
@@ -84,7 +84,7 @@ function nodeListToTreeData(list: ITangoViewNodeData[]) {
 */
 export class TangoViewModule extends TangoModule implements IViewFile {
  // 解析为树结构的 jsxNodes 数组
-  _nodesTree: ITangoViewNodeData[];
+  _nodesTree: ITangoViewNodeData[] = [];
  /**
   * 通过导入组件名查找组件来自的包
   */
@@ -3,6 +3,37 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [1.4.5](https://github.com/netease/tango/compare/@music163/tango-designer@1.4.4...@music163/tango-designer@1.4.5) (2024-09-02)
+
+### Bug Fixes
+
+- add prop value template & fix components popover ([#201](https://github.com/netease/tango/issues/201)) ([c4e1ed6](https://github.com/netease/tango/commit/c4e1ed67f55deb17dae740559602cd0adcfc8eb4))
+
+## [1.4.4](https://github.com/netease/tango/compare/@music163/tango-designer@1.4.3...@music163/tango-designer@1.4.4) (2024-08-16)
+
+### Bug Fixes
+
+- CodeInput 支持 jsx css 代码补全 ([#198](https://github.com/netease/tango/issues/198)) ([6de5488](https://github.com/netease/tango/commit/6de54884b50d683c74d695a8c13184dc0ce8d3c4))
+
+## [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
+
+## [1.4.1](https://github.com/netease/tango/compare/@music163/tango-designer@1.4.0...@music163/tango-designer@1.4.1) (2024-08-05)
+
+### Bug Fixes
+
+- parse template code & update maxRow of TextAreaSetter ([#192](https://github.com/netease/tango/issues/192)) ([a1eea02](https://github.com/netease/tango/commit/a1eea02f9409db73f042c74d7903ad84258f25c2))
+- show right panel when design view select node & optimize editor css ([#193](https://github.com/netease/tango/issues/193)) ([b83d965](https://github.com/netease/tango/commit/b83d965955c8d33ed8d37063482c7abe079e62b1))
+
 # [1.4.0](https://github.com/netease/tango/compare/@music163/tango-designer@1.3.3...@music163/tango-designer@1.4.0) (2024-08-01)

 ### Bug Fixes
@@ -1,6 +1,6 @@
 {
  "name": "@music163/tango-designer",
-  "version": "1.4.0",
+  "version": "1.4.5",
  "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.6",
-    "@music163/tango-core": "^1.4.0",
-    "@music163/tango-helpers": "^1.2.1",
-    "@music163/tango-sandbox": "^1.0.9",
-    "@music163/tango-setting-form": "^1.2.9",
-    "@music163/tango-ui": "^1.4.0",
+    "@music163/tango-context": "^1.1.9",
+    "@music163/tango-core": "^1.4.3",
+    "@music163/tango-helpers": "^1.2.3",
+    "@music163/tango-sandbox": "^1.0.12",
+    "@music163/tango-setting-form": "^1.2.14",
+    "@music163/tango-ui": "^1.4.4",
    "antd": "^4.24.2",
    "cash-dom": "^8.1.2",
    "classnames": "^2.5.1",
@@ -34,17 +34,17 @@ export const ComponentsPopover = observer(
      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
      workspace.componentPrototypes.get(selectedNode?.name) ?? ({} as IComponentPrototype);

-    // 推荐使用的子组件
-    const insertedList = useMemo(
-      () =>
-        Array.isArray(prototype?.childrenName)
-          ? prototype?.childrenName
-          : [prototype?.childrenName].filter(Boolean),
-      [prototype?.childrenName],
-    );
-
-    // 推荐使用的代码片段
-    const siblingList = useMemo(() => prototype?.siblingNames ?? [], [prototype.siblingNames]);
+    const recommendedList = useMemo(() => {
+      if (type === 'inner') {
+        return prototype?.childrenName
+          ? Array.isArray(prototype?.childrenName)
+            ? prototype.childrenName
+            : [prototype.childrenName]
+          : [];
+      }
+      // 默认推荐使用相同类型的组件作为兄弟节点
+      return prototype.siblingNames || [prototype.name];
+    }, [prototype.childrenName, prototype.siblingNames, prototype.name, type]);

    const tipsTextMap = useMemo(
      () => ({
@@ -82,22 +82,15 @@ export const ComponentsPopover = observer(
      const menuList = JSON.parse(JSON.stringify(designer.menuData));

      const commonList = menuList['common'] ?? [];
-      if (commonList?.length && siblingList?.length) {
-        commonList.unshift({
-          title: '代码片段',
-          items: siblingList,
-        });
-      }
-
-      if (commonList?.length && insertedList?.length) {
+      if (commonList?.length && recommendedList.length) {
        commonList.unshift({
          title: '推荐使用',
-          items: insertedList,
+          items: recommendedList,
        });
      }

      return menuList;
-    }, [insertedList, siblingList, designer.menuData]);
+    }, [recommendedList, designer.menuData]);

    const innerTypeProps =
      // 手动触发 适用于 点击添加组件
@@ -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>
@@ -137,6 +137,8 @@ export function useDnd({
    const data = sandboxQuery.getDraggableParentsData(e.target as HTMLElement, true);
    if (data && data.id) {
      selectSource.select(data);
+      // 画布选中节点时，自动唤起 right-panel
+      designer.toggleRightPanel(true);
    }
  };

@@ -81,6 +81,7 @@ export const CodeEditor = observer((props: CodeEditorProps) => {
    designer.activeView === 'dual'
      ? {
          borderLeft: 'solid 1px var(--tango-colors-line2)',
+          borderRight: 'solid 1px var(--tango-colors-line2)',
        }
      : {};

@@ -1,11 +1,11 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { css, Box, Text } from 'coral-system';
-import { AutoComplete } from 'antd';
+import { AutoComplete, Input } from 'antd';
 import { ActionSelect } from '@music163/tango-ui';
 import { FormItemComponentProps } from '@music163/tango-setting-form';
 import { useWorkspace, useWorkspaceData } from '@music163/tango-context';
 import { Dict, wrapCode } from '@music163/tango-helpers';
-import { ExpressionPopover } from './expression-setter';
+import { ExpressionPopover, getCallbackValue } from './expression-setter';
 import { value2code } from '@music163/tango-core';

 enum EventAction {
@@ -31,7 +31,7 @@ export type EventSetterProps = FormItemComponentProps<string>;
 * 事件监听函数绑定器
 */
 export function EventSetter(props: EventSetterProps) {
-  const { value, onChange, modalTitle } = props;
+  const { value, onChange, modalTitle, modalTip, template } = props;
  const [type, setType] = useState<EventAction>(); // 事件类型
  const [temp, setTemp] = useState(''); // 二级暂存值
  const { actionVariables, routeOptions } = useWorkspaceData();
@@ -59,7 +59,9 @@ export function EventSetter(props: EventSetterProps) {
        label: (
          <ExpressionPopover
            title={modalTitle}
+            subTitle={modalTip}
            value={value}
+            template={template}
            onOk={(nextValue) => {
              handleChange(nextValue);
            }}
@@ -74,30 +76,34 @@ export function EventSetter(props: EventSetterProps) {
      { label: '打开弹窗', value: EventAction.OpenModal },
      { label: '关闭弹窗', value: EventAction.CloseModal },
    ],
-    [modalTitle, value, actionVariables, handleChange],
+    [modalTitle, value, actionVariables, template, handleChange],
  );

  const onAction = (key: string) => {
    setType(key as EventAction); // 记录事件类型
    setTemp(''); // 重置二级选项值

-    switch (key) {
-      case EventAction.ConsoleLog:
-        handleChange('(...args) => console.log(...args)');
-        break;
-      case EventAction.NoAction:
-        handleChange(undefined);
-        break;
-      default:
-        break;
+    if (key === EventAction.NoAction) {
+      handleChange(undefined);
+      return;
    }
  };

-  const actionText = getActionText(type, temp, code);
-
  return (
    <Box css={wrapperStyle}>
-      <ActionSelect options={options} onSelect={onAction} text={actionText} />
+      <ActionSelect options={options} onSelect={onAction} defaultText="请选择动作类型" />
+      {type === EventAction.ConsoleLog && (
+        <Input
+          placeholder="输入 Console.log 日志内容"
+          value={temp}
+          onChange={(e) => setTemp(e.target.value)}
+          onBlur={() => {
+            if (temp) {
+              handleChange(getExpressionValue(type, temp));
+            }
+          }}
+        />
+      )}
      {type === EventAction.NavigateTo && (
        <AutoComplete
          placeholder="选择或输入页面路由"
@@ -142,25 +148,15 @@ export function EventSetter(props: EventSetterProps) {
 }

 const handlerMap: Dict = {
-  [EventAction.OpenModal]: 'openModal',
-  [EventAction.CloseModal]: 'closeModal',
-  [EventAction.NavigateTo]: 'navigateTo',
+  [EventAction.ConsoleLog]: 'console.log',
+  [EventAction.OpenModal]: 'tango.openModal',
+  [EventAction.CloseModal]: 'tango.closeModal',
+  [EventAction.NavigateTo]: 'tango.navigateTo',
 };

-function getActionText(type: EventAction, temp: string, fallbackCode: string) {
-  let text;
-  if (handlerMap[type]) {
-    text = getExpressionValue(type, temp);
-  } else if (fallbackCode) {
-    text = fallbackCode;
-  }
-  text = text || '请选择';
-  return text;
-}
-
 function getExpressionValue(type: EventAction, value = '') {
  const handler = handlerMap[type];
  if (handler) {
-    return `() => tango.${handler}("${value}")`;
+    return getCallbackValue(`${handler}("${value}");`);
  }
 }
@@ -2,9 +2,17 @@ import React, { useState, useEffect, useCallback } from 'react';
 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 { getValue, interpolate, IVariableTreeNode, noop } from '@music163/tango-helpers';
 import { CloseCircleFilled, MenuOutlined } from '@ant-design/icons';
-import { Panel, InputCode, Action, DragPanel, PopOutOutlined } from '@music163/tango-ui';
+import {
+  Panel,
+  InputCode,
+  Action,
+  DragPanel,
+  PopOutOutlined,
+  InputCodeProps,
+  InputStyleCode,
+} from '@music163/tango-ui';
 import { FormItemComponentProps } from '@music163/tango-setting-form';
 import { useWorkspace, useWorkspaceData } from '@music163/tango-context';
 import { VariableTree } from '../components';
@@ -26,6 +34,19 @@ export const jsonValueValidate = (value: string) => {
  }
 };

+/**
+ * 拼装回调函数
+ * @param value 回调函数体
+ * @param template 回调函数模板
+ * @returns
+ */
+export function getCallbackValue(value: string, template?: string) {
+  if (!value) {
+    return;
+  }
+  return template ? interpolate(template, { content: value }) : `() => {\n  ${value}\n}`;
+}
+
 const suffixStyle = css`
  display: flex;
  align-items: center;
@@ -43,6 +64,10 @@ export interface ExpressionSetterProps extends FormItemComponentProps<string> {
  autoCompleteOptions?: string[];
  allowClear?: boolean;
  showOptionsDropDown?: boolean;
+  /**
+   * 表达式类型指定为 css object
+   */
+  expressionType?: 'cssObject';
 }

 export function ExpressionSetter(props: ExpressionSetterProps) {
@@ -51,12 +76,14 @@ export function ExpressionSetter(props: ExpressionSetterProps) {
    modalTitle,
    modalTip,
    autoCompleteOptions,
-    placeholder = '在这里输入JS代码',
+    template,
+    placeholder = '在这里输入代码',
    value: valueProp,
    status,
    allowClear = true,
    newStoreTemplate,
    showOptionsDropDown = true,
+    expressionType,
  } = props;
  // const codeValue = getCodeOfWrappedCode(valueProp);
  const [inputValue, setInputValue] = useState(valueProp);
@@ -79,10 +106,12 @@ export function ExpressionSetter(props: ExpressionSetterProps) {
  const sandbox = useSandboxQuery();
  const evaluateContext = sandbox.window;

+  const InputCodeComponent = expressionType === 'cssObject' ? InputStyleCode : InputCode;
+
  return (
    <Box className="ExpressionSetter">
      {/* 同时支持下拉框展示 */}
-      <InputCode
+      <InputCodeComponent
        placeholder={placeholder}
        suffix={
          <Box css={suffixStyle}>
@@ -90,7 +119,7 @@ export function ExpressionSetter(props: ExpressionSetterProps) {
              <CloseCircleFilled
                title="清空"
                onClick={() => {
-                  change('');
+                  change(undefined);
                }}
              />
            )}
@@ -119,8 +148,10 @@ export function ExpressionSetter(props: ExpressionSetterProps) {
              subTitle={modalTip}
              placeholder={placeholder}
              autoCompleteOptions={autoCompleteOptions}
+              template={template}
              newStoreTemplate={newStoreTemplate}
              value={inputValue}
+              expressionType={expressionType}
              onOk={(value) => {
                change(value);
              }}
@@ -141,7 +172,7 @@ export function ExpressionSetter(props: ExpressionSetterProps) {
  );
 }

-export interface ExpressionPopoverProps {
+export interface ExpressionPopoverProps extends InputCodeProps {
  title?: string;
  subTitle?: string;
  placeholder?: string;
@@ -150,10 +181,18 @@ export interface ExpressionPopoverProps {
  onOk?: (value: string) => void;
  dataSource?: IVariableTreeNode[];
  autoCompleteOptions?: string[];
+  /**
+   * 值的模板，一般用于定义函数模板
+   */
+  template?: string;
  /**
   * 新建 store 的模板代码
   */
  newStoreTemplate?: string;
+  /**
+   * 表达式类型指定为 css object
+   */
+  expressionType?: 'cssObject';
  children?: React.ReactNode;
 }

@@ -166,12 +205,15 @@ export function ExpressionPopover({
  value,
  dataSource,
  autoCompleteOptions,
+  template,
  newStoreTemplate = CODE_TEMPLATES.newStoreTemplate,
  children,
+  expressionType,
 }: ExpressionPopoverProps) {
  const [exp, setExp] = useState(value ?? defaultValue);
  const [error, setError] = useState('');
  const workspace = useWorkspace();
+  const InputCodeComponent = expressionType === 'cssObject' ? InputStyleCode : InputCode;

  const selectNodePath = workspace.selectSource.selected[0]?.codeId;

@@ -207,7 +249,7 @@ export function ExpressionPopover({
      body={
        <Box display="flex" flexDirection="column">
          <Box p="m">
-            <InputCode
+            <InputCodeComponent
              shape="inset"
              minHeight="56px"
              maxHeight="160px"
@@ -223,19 +265,18 @@ export function ExpressionPopover({
              autoCompleteOptions={autoCompleteOptions}
            />
            {error ? (
-              <Text color="red" fontSize="12px" as="p">
+              <Text color="red" fontSize="12px" as="div">
                出错了！输入的表达式存在语法错误，请修改后再提交！
              </Text>
            ) : null}
-            {subTitle && (
-              <Text fontSize="12px" color="text3" as="p">
-                {subTitle}
+            <Box fontSize="12px" color="text2">
+              <Text display="block">说明：</Text>
+              {subTitle && <Text display="block">{subTitle}</Text>}
+              <Text display="block">
+                你可以在上面的代码输入框里输入常规的 javascript 代码，还可以直接使用 jsx
+                代码，但需要符合该属性的接受值定义。
              </Text>
-            )}
-            <Text fontSize="12px" color="text3" as="p">
-              说明：你可以在上面的代码输入框里输入常规的 javascript 代码，还可以直接使用 jsx
-              代码，但需要符合该属性的接受值定义。
-            </Text>
+            </Box>
          </Box>
          <Panel
            title="从变量列表中选中"
@@ -274,7 +315,11 @@ export function ExpressionPopover({
                }
                let str;
                if (/^(stores|services)\./.test(node.key)) {
-                  str = `tango.${node.key.replaceAll('.', '?.')}`;
+                  // 从匹配到的第二个点开始替换为 ?.，因为第一个点是 stores 或 services
+                  str = `tango.${node.key.replace(/(?<=\..*?)\./g, '?.')}`;
+                  if (node.type === 'function') {
+                    str = getCallbackValue(`${str}();`, template);
+                  }
                } else {
                  str = `${node.key}`;
                }
@@ -365,7 +365,7 @@ function MaterialGrid({ data }: MaterialProps) {
    <IconFont className="material-icon" type={data.icon || 'icon-placeholder'} />
  ) : (
    <Box className="material-icon">
-      <img src={icon} alt={data.name} />
+      <img src={icon} alt={data.name} height="32" />
    </Box>
  );

@@ -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;
  }
 `;

@@ -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'}
@@ -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,
@@ -31,7 +31,7 @@ export const WorkspaceView = observer((props: WorkspaceViewProps) => {
      {children}
      {/* 添加组件弹层 */}
      {display === 'block' && <ComponentsPopover type="inner" isControlled />}
-      {mode === 'design' && <FileErrorsOverlay />}
+      {designer.activeView === 'design' && <FileErrorsOverlay />}
    </Box>
  );
 });
@@ -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.3](https://github.com/netease/tango/compare/@music163/tango-helpers@1.2.2...@music163/tango-helpers@1.2.3) (2024-09-02)
+
+### Bug Fixes
+
+- add prop value template & fix components popover ([#201](https://github.com/netease/tango/issues/201)) ([c4e1ed6](https://github.com/netease/tango/commit/c4e1ed67f55deb17dae740559602cd0adcfc8eb4))
+
+## [1.2.2](https://github.com/netease/tango/compare/@music163/tango-helpers@1.2.1...@music163/tango-helpers@1.2.2) (2024-08-05)
+
+### Bug Fixes
+
+- parse template code & update maxRow of TextAreaSetter ([#192](https://github.com/netease/tango/issues/192)) ([a1eea02](https://github.com/netease/tango/commit/a1eea02f9409db73f042c74d7903ad84258f25c2))
+
 ## [1.2.1](https://github.com/netease/tango/compare/@music163/tango-helpers@1.2.0...@music163/tango-helpers@1.2.1) (2024-08-01)

 ### Bug Fixes
@@ -1,6 +1,6 @@
 {
  "name": "@music163/tango-helpers",
-  "version": "1.2.1",
+  "version": "1.2.3",
  "description": "Shared types, helpers, and hooks of tango-apps",
  "keywords": [
    "shared",
@@ -32,7 +32,7 @@ export function isValidFunctionCode(str: string) {
  }
 }

-const templatePattern = /^{{(.+)}}$/;
+const templatePattern = /^{{([\s\S]+)}}$/;

 /**
 * 判断给定代码是否被双花括号包裹
@@ -125,3 +125,17 @@ export function parseDndId(str: string): DndIdParsedType {
    id: str,
  };
 }
+
+/**
+ * 替换模板中的变量
+ * @example interpolate('hello {{name}}', { name: 'world' }) -> 'hello world'
+ *
+ * @param template 带模板变量的字符串
+ * @param props 变量字典
+ * @returns 返回替换后的字符串
+ */
+export function interpolate(template: string, props: Record<string, any>) {
+  return template.replace(/\{\{(\w+)\}\}/g, (_match, key) => {
+    return props[key];
+  });
+}
@@ -88,6 +88,11 @@ export interface IComponentProp<T = any> {
   * 自动补全的提示值，仅对 ExpressionSetter 有效
   */
  autoCompleteOptions?: string[];
+  /**
+   * value 的模板，一般用于函数类型的属性，便于 setter 用来拼装返回值
+   * @example "(arg1, arg2, arg3) => {  {{content}}}"
+   */
+  template?: string;
  /**
   * 设置器
   */
@@ -0,0 +1,13 @@
+import { isWrappedCode } from '../src/helpers';
+
+describe('helpers/codeHelper', () => {
+  it('isWrappedCode', () => {
+    expect(isWrappedCode('{{[]}}')).toBeTruthy(); // true
+    expect(isWrappedCode('{{{}}}')).toBeTruthy(); // true
+    expect(isWrappedCode('{{this.foo}}')).toBeTruthy(); // true
+    expect(isWrappedCode('{{123}}')).toBeTruthy(); // true
+    expect(isWrappedCode('{{() => {}}}')).toBeTruthy(); // true
+    expect(isWrappedCode('{{<Button>button</Button>}}')).toBeTruthy(); // true
+    expect(isWrappedCode('{{<>\n<Button>hello</Button>\n</>}}')).toBeTruthy(); // true
+  });
+});
@@ -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.0.12](https://github.com/netease/tango/compare/@music163/tango-sandbox@1.0.11...@music163/tango-sandbox@1.0.12) (2024-09-02)
+
+**Note:** Version bump only for package @music163/tango-sandbox
+
+## [1.0.11](https://github.com/netease/tango/compare/@music163/tango-sandbox@1.0.10...@music163/tango-sandbox@1.0.11) (2024-08-06)
+
+**Note:** Version bump only for package @music163/tango-sandbox
+
+## [1.0.10](https://github.com/netease/tango/compare/@music163/tango-sandbox@1.0.9...@music163/tango-sandbox@1.0.10) (2024-08-05)
+
+**Note:** Version bump only for package @music163/tango-sandbox
+
 ## [1.0.9](https://github.com/netease/tango/compare/@music163/tango-sandbox@1.0.8...@music163/tango-sandbox@1.0.9) (2024-08-01)

 **Note:** Version bump only for package @music163/tango-sandbox
@@ -1,6 +1,6 @@
 {
  "name": "@music163/tango-sandbox",
-  "version": "1.0.9",
+  "version": "1.0.12",
  "description": "sandbox of tango apps",
  "author": "wwsun <ww.sun@outlook.com>",
  "homepage": "",
@@ -29,8 +29,8 @@
  },
  "dependencies": {
    "@ant-design/icons": "^4.8.0",
-    "@music163/tango-core": "^1.4.0",
-    "@music163/tango-helpers": "^1.2.1",
+    "@music163/tango-core": "^1.4.3",
+    "@music163/tango-helpers": "^1.2.3",
    "crypto-js": "^4.1.1",
    "lodash.isequal": "4.5.0",
    "react-frame-component": "^5.2.4"
@@ -3,6 +3,32 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [1.2.14](https://github.com/netease/tango/compare/@music163/tango-setting-form@1.2.13...@music163/tango-setting-form@1.2.14) (2024-09-02)
+
+### Bug Fixes
+
+- add prop value template & fix components popover ([#201](https://github.com/netease/tango/issues/201)) ([c4e1ed6](https://github.com/netease/tango/commit/c4e1ed67f55deb17dae740559602cd0adcfc8eb4))
+
+## [1.2.13](https://github.com/netease/tango/compare/@music163/tango-setting-form@1.2.12...@music163/tango-setting-form@1.2.13) (2024-08-16)
+
+### Bug Fixes
+
+- CodeInput 支持 jsx css 代码补全 ([#198](https://github.com/netease/tango/issues/198)) ([6de5488](https://github.com/netease/tango/commit/6de54884b50d683c74d695a8c13184dc0ce8d3c4))
+
+## [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
+
+## [1.2.10](https://github.com/netease/tango/compare/@music163/tango-setting-form@1.2.9...@music163/tango-setting-form@1.2.10) (2024-08-05)
+
+### Bug Fixes
+
+- parse template code & update maxRow of TextAreaSetter ([#192](https://github.com/netease/tango/issues/192)) ([a1eea02](https://github.com/netease/tango/commit/a1eea02f9409db73f042c74d7903ad84258f25c2))
+
 ## [1.2.9](https://github.com/netease/tango/compare/@music163/tango-setting-form@1.2.8...@music163/tango-setting-form@1.2.9) (2024-08-01)

 ### Bug Fixes
@@ -1,6 +1,6 @@
 {
  "name": "@music163/tango-setting-form",
-  "version": "1.2.9",
+  "version": "1.2.14",
  "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.4.0",
-    "@music163/tango-helpers": "^1.2.1",
-    "@music163/tango-ui": "^1.4.0",
+    "@music163/tango-core": "^1.4.3",
+    "@music163/tango-helpers": "^1.2.3",
+    "@music163/tango-ui": "^1.4.4",
    "antd": "^4.24.2",
    "coral-system": "^1.0.5",
    "mobx": "6.12.3",
@@ -182,6 +182,7 @@ export function createFormItem(options: IFormItemCreateOptions) {
    placeholder,
    docs,
    autoCompleteOptions,
+    template,
    setter: setterProp,
    setterProps,
    defaultValue,
@@ -238,6 +239,7 @@ export function createFormItem(options: IFormItemCreateOptions) {
        modalTitle: title,
        modalTip: tip,
        autoCompleteOptions,
+        template,
      };
    }

@@ -246,7 +248,7 @@ export function createFormItem(options: IFormItemCreateOptions) {
    const CodeSetter = REGISTERED_FORM_ITEM_MAP['codeSetter']?.config?.component;

    const setterNode = isCodeSetter ? (
-      <CodeSetter {...expProps} {...baseComponentProps} />
+      <CodeSetter {...expProps} {...baseComponentProps} {...setterProps} />
    ) : (
      renderSetter({
        ...expProps,
@@ -34,7 +34,7 @@ export function TextSetter({

 const autoSize = {
  minRows: 2,
-  maxRows: 5,
+  maxRows: 6,
 };

 export function TextAreaSetter({
@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [1.4.4](https://github.com/netease/tango/compare/@music163/tango-ui@1.4.3...@music163/tango-ui@1.4.4) (2024-09-02)
+
+### Bug Fixes
+
+- add prop value template & fix components popover ([#201](https://github.com/netease/tango/issues/201)) ([c4e1ed6](https://github.com/netease/tango/commit/c4e1ed67f55deb17dae740559602cd0adcfc8eb4))
+
+## [1.4.3](https://github.com/netease/tango/compare/@music163/tango-ui@1.4.2...@music163/tango-ui@1.4.3) (2024-08-16)
+
+### Bug Fixes
+
+- CodeInput 支持 jsx css 代码补全 ([#198](https://github.com/netease/tango/issues/198)) ([6de5488](https://github.com/netease/tango/commit/6de54884b50d683c74d695a8c13184dc0ce8d3c4))
+
+## [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
+
 # [1.4.0](https://github.com/netease/tango/compare/@music163/tango-ui@1.3.3...@music163/tango-ui@1.4.0) (2024-08-01)

 ### Bug Fixes
@@ -1,6 +1,6 @@
 {
  "name": "@music163/tango-ui",
-  "version": "1.4.0",
+  "version": "1.4.4",
  "description": "ui widgets of tango",
  "keywords": [
    "react",
@@ -38,7 +38,7 @@
    "@codemirror/lang-javascript": "^6.2.2",
    "@codemirror/lint": "^6.7.1",
    "@codemirror/search": "^6.5.6",
-    "@music163/tango-helpers": "^1.2.1",
+    "@music163/tango-helpers": "^1.2.3",
    "@uiw/react-codemirror": "^4.22.0",
    "antd": "^4.24.2",
    "classnames": "^2.5.1",
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Box, css, Text } from 'coral-system';
 import { Button, Dropdown, Input, Menu } from 'antd';
 import { DownOutlined, PlusSquareOutlined } from '@ant-design/icons';
@@ -23,9 +23,13 @@ interface ActionSelectProps {
   */
  onInputChange?: (value: string) => void;
  /**
-   * 提示文本
+   * 受控的提示文本
   */
  text?: string;
+  /**
+   * 默认的提示文本
+   */
+  defaultText?: string;
  /**
   * 选择菜单时的回调
   */
@@ -50,11 +54,6 @@ const actionInputStyle = css`
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
-    color: var(--tango-colors-text3);
-
-    &:hover {
-      color: var(--tango-colors-text2);
-    }
  }

  .anticon-down {
@@ -71,15 +70,25 @@ const inputStyle = { width: 'calc(100% - 82px)' };
 export function ActionSelect({
  showInput = false,
  defaultInputValue,
-  text,
+  text: textProp,
+  defaultText,
  options = [],
  onSelect,
  onInputChange,
 }: ActionSelectProps) {
+  const [text, setText] = useState<string>(defaultText);
  const menu = (
-    <Menu onClick={({ key }) => onSelect(key)}>
+    <Menu>
      {options.map((item) => (
-        <Menu.Item key={item.value}>
+        <Menu.Item
+          key={item.value}
+          onClick={() => {
+            onSelect?.(item.value);
+            if (!textProp) {
+              setText(item.label as string);
+            }
+          }}
+        >
          <Box display="flex" alignItems="center" minWidth={200} columnGap="m">
            <Box flex="1">{item.label}</Box>
            <Text fontSize="12px" color="text.note">
@@ -122,8 +131,8 @@ export function ActionSelect({
        mb="m"
        css={actionInputStyle}
      >
-        <Box className="action-input-text" color="text.body">
-          {text}
+        <Box className="action-input-text" color="text2">
+          {textProp ?? text}
        </Box>
        <DownOutlined />
      </Box>
@@ -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"
@@ -13,6 +13,7 @@ export * from './menu';
 export * from './panel';
 export * from './toggle-button';
 export * from './input-code';
+export * from './input-style-code';
 export * from './input-list';
 export * from './search';
 export * from './json-view';
@@ -174,7 +174,7 @@ export function InputCode({
  );
 }

-function useInputCode({
+export function useInputCode({
  shape,
  status,
  showLineNumbers,
@@ -0,0 +1,99 @@
+import React from 'react';
+import { Box } from 'coral-system';
+import CodeMirror from '@uiw/react-codemirror';
+import { javascript, javascriptLanguage, esLint } from '@codemirror/lang-javascript';
+import { CompletionContext } from '@codemirror/autocomplete';
+import { syntaxTree } from '@codemirror/language';
+import { linter, lintGutter } from '@codemirror/lint';
+import * as eslint from 'eslint-linter-browserify';
+import { jsxCSSproperties, jsxCSSvalues } from './lang/css-object';
+import type { Completion } from '@codemirror/autocomplete';
+import { InputCodeProps, useInputCode } from './input-code';
+
+const eslintConfig = {
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  env: {
+    browser: true,
+  },
+  rules: {},
+};
+
+function completeProperties(from: number, cssOptions: Completion[] | readonly Completion[]) {
+  return {
+    from,
+    options: cssOptions,
+    validFor: /^[\w$]*$/,
+  };
+}
+
+/**
+ *
+ * @param scope 预测 CSS 的补全上下文
+ * @param customOptions 自定义补全选项列表
+ * @returns
+ */
+function buildAutoComplete() {
+  /**
+   * @see context https://codemirror.net/docs/ref/#autocomplete.CompletionContext
+   */
+  return function (context: CompletionContext) {
+    const nodeBefore = syntaxTree(context.state).resolveInner(context.pos, -1);
+    if (nodeBefore.name === 'VariableName') {
+      // match css property name
+      return completeProperties(nodeBefore.from, jsxCSSproperties());
+    }
+    // match css property value
+    else if (nodeBefore.name === 'String') {
+      return completeProperties(nodeBefore.from + 1, jsxCSSvalues);
+    }
+    return null;
+  };
+}
+
+export type InputStyleCodeProps = Omit<
+  InputCodeProps,
+  'autoCompleteContext' | 'autoCompleteOptions'
+>;
+
+export function InputStyleCode({
+  shape = 'solid',
+  suffix,
+  status,
+  showLineNumbers,
+  showFoldGutter,
+  enableESLint = false,
+  ...rest
+}: InputStyleCodeProps) {
+  const extensions = [
+    javascript({ jsx: true }),
+    javascriptLanguage.data.of({
+      autocomplete: buildAutoComplete(),
+    }),
+  ];
+  if (enableESLint) {
+    extensions.push(lintGutter(), linter(esLint(new eslint.Linter(), eslintConfig)));
+  }
+  const { rootStyle, codeSetup } = useInputCode({
+    shape,
+    status,
+    showLineNumbers,
+    showFoldGutter,
+  });
+
+  return (
+    <Box className="InputCode" display="flex" alignItems="center" overflow="hidden" {...rootStyle}>
+      <Box flex="1" overflow="auto">
+        <CodeMirror
+          extensions={extensions}
+          basicSetup={codeSetup}
+          placeholder={'//输入 css 代码'}
+          {...rest}
+        />
+      </Box>
+      {suffix}
+    </Box>
+  );
+}
@@ -0,0 +1,602 @@
+/**
+ * @file: jsx css completion file
+ * @description: fork from https://github.com/codemirror/lang-css/blob/main/src/complete.ts
+ */
+
+import type { Completion } from '@codemirror/autocomplete';
+
+function toCamelCase(input: string): string {
+  return input.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+}
+
+let _properties: readonly Completion[] | null = null;
+
+// inject global css properties
+export function jsxCSSproperties() {
+  if (!_properties && typeof document === 'object' && document.body) {
+    const { style } = document.body;
+    const names = [];
+    const seen = new Set();
+    for (let prop in style)
+      if (prop !== 'cssText' && prop !== 'cssFloat') {
+        if (typeof style[prop] === 'string') {
+          if (/[A-Z]/.test(prop)) prop = prop.replace(/[A-Z]/g, (ch) => `-${ch.toLowerCase()}`);
+          if (!seen.has(prop)) {
+            names.push(prop);
+            seen.add(prop);
+          }
+        }
+      }
+    _properties = names.sort().map((name) => ({ label: toCamelCase(name), type: 'variable' }));
+  }
+  return _properties || [];
+}
+
+export const jsxCSSvalues = [
+  'above',
+  'absolute',
+  'activeborder',
+  'additive',
+  'activecaption',
+  'after-white-space',
+  'ahead',
+  'alias',
+  'all',
+  'all-scroll',
+  'alphabetic',
+  'alternate',
+  'always',
+  'antialiased',
+  'appworkspace',
+  'asterisks',
+  'attr',
+  'auto',
+  'auto-flow',
+  'avoid',
+  'avoid-column',
+  'avoid-page',
+  'avoid-region',
+  'axis-pan',
+  'background',
+  'backwards',
+  'baseline',
+  'below',
+  'bidi-override',
+  'blink',
+  'block',
+  'block-axis',
+  'bold',
+  'bolder',
+  'border',
+  'border-box',
+  'both',
+  'bottom',
+  'break',
+  'break-all',
+  'break-word',
+  'bullets',
+  'button',
+  'button-bevel',
+  'buttonface',
+  'buttonhighlight',
+  'buttonshadow',
+  'buttontext',
+  'calc',
+  'capitalize',
+  'caps-lock-indicator',
+  'caption',
+  'captiontext',
+  'caret',
+  'cell',
+  'center',
+  'checkbox',
+  'circle',
+  'cjk-decimal',
+  'clear',
+  'clip',
+  'close-quote',
+  'col-resize',
+  'collapse',
+  'color',
+  'color-burn',
+  'color-dodge',
+  'column',
+  'column-reverse',
+  'compact',
+  'condensed',
+  'contain',
+  'content',
+  'contents',
+  'content-box',
+  'context-menu',
+  'continuous',
+  'copy',
+  'counter',
+  'counters',
+  'cover',
+  'crop',
+  'cross',
+  'crosshair',
+  'currentcolor',
+  'cursive',
+  'cyclic',
+  'darken',
+  'dashed',
+  'decimal',
+  'decimal-leading-zero',
+  'default',
+  'default-button',
+  'dense',
+  'destination-atop',
+  'destination-in',
+  'destination-out',
+  'destination-over',
+  'difference',
+  'disc',
+  'discard',
+  'disclosure-closed',
+  'disclosure-open',
+  'document',
+  'dot-dash',
+  'dot-dot-dash',
+  'dotted',
+  'double',
+  'down',
+  'e-resize',
+  'ease',
+  'ease-in',
+  'ease-in-out',
+  'ease-out',
+  'element',
+  'ellipse',
+  'ellipsis',
+  'embed',
+  'end',
+  'ethiopic-abegede-gez',
+  'ethiopic-halehame-aa-er',
+  'ethiopic-halehame-gez',
+  'ew-resize',
+  'exclusion',
+  'expanded',
+  'extends',
+  'extra-condensed',
+  'extra-expanded',
+  'fantasy',
+  'fast',
+  'fill',
+  'fill-box',
+  'fixed',
+  'flat',
+  'flex',
+  'flex-end',
+  'flex-start',
+  'footnotes',
+  'forwards',
+  'from',
+  'geometricPrecision',
+  'graytext',
+  'grid',
+  'groove',
+  'hand',
+  'hard-light',
+  'help',
+  'hidden',
+  'hide',
+  'higher',
+  'highlight',
+  'highlighttext',
+  'horizontal',
+  'hsl',
+  'hsla',
+  'hue',
+  'icon',
+  'ignore',
+  'inactiveborder',
+  'inactivecaption',
+  'inactivecaptiontext',
+  'infinite',
+  'infobackground',
+  'infotext',
+  'inherit',
+  'initial',
+  'inline',
+  'inline-axis',
+  'inline-block',
+  'inline-flex',
+  'inline-grid',
+  'inline-table',
+  'inset',
+  'inside',
+  'intrinsic',
+  'invert',
+  'italic',
+  'justify',
+  'keep-all',
+  'landscape',
+  'large',
+  'larger',
+  'left',
+  'level',
+  'lighter',
+  'lighten',
+  'line-through',
+  'linear',
+  'linear-gradient',
+  'lines',
+  'list-item',
+  'listbox',
+  'listitem',
+  'local',
+  'logical',
+  'loud',
+  'lower',
+  'lower-hexadecimal',
+  'lower-latin',
+  'lower-norwegian',
+  'lowercase',
+  'ltr',
+  'luminosity',
+  'manipulation',
+  'match',
+  'matrix',
+  'matrix3d',
+  'medium',
+  'menu',
+  'menutext',
+  'message-box',
+  'middle',
+  'min-intrinsic',
+  'mix',
+  'monospace',
+  'move',
+  'multiple',
+  'multiple_mask_images',
+  'multiply',
+  'n-resize',
+  'narrower',
+  'ne-resize',
+  'nesw-resize',
+  'no-close-quote',
+  'no-drop',
+  'no-open-quote',
+  'no-repeat',
+  'none',
+  'normal',
+  'not-allowed',
+  'nowrap',
+  'ns-resize',
+  'numbers',
+  'numeric',
+  'nw-resize',
+  'nwse-resize',
+  'oblique',
+  'opacity',
+  'open-quote',
+  'optimizeLegibility',
+  'optimizeSpeed',
+  'outset',
+  'outside',
+  'outside-shape',
+  'overlay',
+  'overline',
+  'padding',
+  'padding-box',
+  'painted',
+  'page',
+  'paused',
+  'perspective',
+  'pinch-zoom',
+  'plus-darker',
+  'plus-lighter',
+  'pointer',
+  'polygon',
+  'portrait',
+  'pre',
+  'pre-line',
+  'pre-wrap',
+  'preserve-3d',
+  'progress',
+  'push-button',
+  'radial-gradient',
+  'radio',
+  'read-only',
+  'read-write',
+  'read-write-plaintext-only',
+  'rectangle',
+  'region',
+  'relative',
+  'repeat',
+  'repeating-linear-gradient',
+  'repeating-radial-gradient',
+  'repeat-x',
+  'repeat-y',
+  'reset',
+  'reverse',
+  'rgb',
+  'rgba',
+  'ridge',
+  'right',
+  'rotate',
+  'rotate3d',
+  'rotateX',
+  'rotateY',
+  'rotateZ',
+  'round',
+  'row',
+  'row-resize',
+  'row-reverse',
+  'rtl',
+  'run-in',
+  'running',
+  's-resize',
+  'sans-serif',
+  'saturation',
+  'scale',
+  'scale3d',
+  'scaleX',
+  'scaleY',
+  'scaleZ',
+  'screen',
+  'scroll',
+  'scrollbar',
+  'scroll-position',
+  'se-resize',
+  'self-start',
+  'self-end',
+  'semi-condensed',
+  'semi-expanded',
+  'separate',
+  'serif',
+  'show',
+  'single',
+  'skew',
+  'skewX',
+  'skewY',
+  'skip-white-space',
+  'slide',
+  'slider-horizontal',
+  'slider-vertical',
+  'sliderthumb-horizontal',
+  'sliderthumb-vertical',
+  'slow',
+  'small',
+  'small-caps',
+  'small-caption',
+  'smaller',
+  'soft-light',
+  'solid',
+  'source-atop',
+  'source-in',
+  'source-out',
+  'source-over',
+  'space',
+  'space-around',
+  'space-between',
+  'space-evenly',
+  'spell-out',
+  'square',
+  'start',
+  'static',
+  'status-bar',
+  'stretch',
+  'stroke',
+  'stroke-box',
+  'sub',
+  'subpixel-antialiased',
+  'svg_masks',
+  'super',
+  'sw-resize',
+  'symbolic',
+  'symbols',
+  'system-ui',
+  'table',
+  'table-caption',
+  'table-cell',
+  'table-column',
+  'table-column-group',
+  'table-footer-group',
+  'table-header-group',
+  'table-row',
+  'table-row-group',
+  'text',
+  'text-bottom',
+  'text-top',
+  'textarea',
+  'textfield',
+  'thick',
+  'thin',
+  'threeddarkshadow',
+  'threedface',
+  'threedhighlight',
+  'threedlightshadow',
+  'threedshadow',
+  'to',
+  'top',
+  'transform',
+  'translate',
+  'translate3d',
+  'translateX',
+  'translateY',
+  'translateZ',
+  'transparent',
+  'ultra-condensed',
+  'ultra-expanded',
+  'underline',
+  'unidirectional-pan',
+  'unset',
+  'up',
+  'upper-latin',
+  'uppercase',
+  'url',
+  'var',
+  'vertical',
+  'vertical-text',
+  'view-box',
+  'visible',
+  'visibleFill',
+  'visiblePainted',
+  'visibleStroke',
+  'visual',
+  'w-resize',
+  'wait',
+  'wave',
+  'wider',
+  'window',
+  'windowframe',
+  'windowtext',
+  'words',
+  'wrap',
+  'wrap-reverse',
+  'x-large',
+  'x-small',
+  'xor',
+  'xx-large',
+  'xx-small',
+]
+  .map((name) => ({ label: name, type: 'text' }))
+  .concat(
+    [
+      'aliceblue',
+      'antiquewhite',
+      'aqua',
+      'aquamarine',
+      'azure',
+      'beige',
+      'bisque',
+      'black',
+      'blanchedalmond',
+      'blue',
+      'blueviolet',
+      'brown',
+      'burlywood',
+      'cadetblue',
+      'chartreuse',
+      'chocolate',
+      'coral',
+      'cornflowerblue',
+      'cornsilk',
+      'crimson',
+      'cyan',
+      'darkblue',
+      'darkcyan',
+      'darkgoldenrod',
+      'darkgray',
+      'darkgreen',
+      'darkkhaki',
+      'darkmagenta',
+      'darkolivegreen',
+      'darkorange',
+      'darkorchid',
+      'darkred',
+      'darksalmon',
+      'darkseagreen',
+      'darkslateblue',
+      'darkslategray',
+      'darkturquoise',
+      'darkviolet',
+      'deeppink',
+      'deepskyblue',
+      'dimgray',
+      'dodgerblue',
+      'firebrick',
+      'floralwhite',
+      'forestgreen',
+      'fuchsia',
+      'gainsboro',
+      'ghostwhite',
+      'gold',
+      'goldenrod',
+      'gray',
+      'grey',
+      'green',
+      'greenyellow',
+      'honeydew',
+      'hotpink',
+      'indianred',
+      'indigo',
+      'ivory',
+      'khaki',
+      'lavender',
+      'lavenderblush',
+      'lawngreen',
+      'lemonchiffon',
+      'lightblue',
+      'lightcoral',
+      'lightcyan',
+      'lightgoldenrodyellow',
+      'lightgray',
+      'lightgreen',
+      'lightpink',
+      'lightsalmon',
+      'lightseagreen',
+      'lightskyblue',
+      'lightslategray',
+      'lightsteelblue',
+      'lightyellow',
+      'lime',
+      'limegreen',
+      'linen',
+      'magenta',
+      'maroon',
+      'mediumaquamarine',
+      'mediumblue',
+      'mediumorchid',
+      'mediumpurple',
+      'mediumseagreen',
+      'mediumslateblue',
+      'mediumspringgreen',
+      'mediumturquoise',
+      'mediumvioletred',
+      'midnightblue',
+      'mintcream',
+      'mistyrose',
+      'moccasin',
+      'navajowhite',
+      'navy',
+      'oldlace',
+      'olive',
+      'olivedrab',
+      'orange',
+      'orangered',
+      'orchid',
+      'palegoldenrod',
+      'palegreen',
+      'paleturquoise',
+      'palevioletred',
+      'papayawhip',
+      'peachpuff',
+      'peru',
+      'pink',
+      'plum',
+      'powderblue',
+      'purple',
+      'rebeccapurple',
+      'red',
+      'rosybrown',
+      'royalblue',
+      'saddlebrown',
+      'salmon',
+      'sandybrown',
+      'seagreen',
+      'seashell',
+      'sienna',
+      'silver',
+      'skyblue',
+      'slateblue',
+      'slategray',
+      'snow',
+      'springgreen',
+      'steelblue',
+      'tan',
+      'teal',
+      'thistle',
+      'tomato',
+      'turquoise',
+      'violet',
+      'wheat',
+      'white',
+      'whitesmoke',
+      'yellow',
+      'yellowgreen',
+    ].map((name) => ({ label: name, type: 'text' })),
+  );
@@ -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}
@@ -17697,7 +17697,16 @@ string-length@^4.0.1:
    char-regex "^1.0.2"
    strip-ansi "^6.0.0"

-"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
  version "4.2.3"
  resolved "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz"
  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -17810,7 +17819,7 @@ string_decoder@~1.1.1:
  dependencies:
    safe-buffer "~5.1.0"

-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
  version "6.0.1"
  resolved "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz"
  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -17824,6 +17833,13 @@ strip-ansi@^3.0.1:
  dependencies:
    ansi-regex "^2.0.0"

+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
 strip-ansi@^7.0.1, strip-ansi@^7.1.0:
  version "7.1.0"
  resolved "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-7.1.0.tgz"
@@ -19360,7 +19376,7 @@ workerpool@^9.1.1:
  resolved "https://registry.npmmirror.com/workerpool/-/workerpool-9.1.1.tgz#9ba4d534a79a5517c1e1b9d1014151516829be8d"
  integrity sha512-EFoFTSEo9m4V4wNrwzVRjxnf/E/oBpOzcI/R5CIugJhl9RsCiq525rszo4AtqcjQQoqFdu2E3H82AnbtpaQHvg==

-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
  version "7.0.0"
  resolved "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -19378,6 +19394,15 @@ wrap-ansi@^6.0.1:
    string-width "^4.1.0"
    strip-ansi "^6.0.0"

+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
  version "8.1.0"
  resolved "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz"
Author	SHA1	Message	Date
wwsun	a86e0e049c	chore(release): publish - @music163/tango-context@1.1.9 - @music163/tango-core@1.4.3 - @music163/tango-designer@1.4.5 - @music163/tango-helpers@1.2.3 - @music163/tango-sandbox@1.0.12 - @music163/tango-setting-form@1.2.14 - @music163/tango-ui@1.4.4	2024-09-02 10:50:59 +08:00
Wells	c4e1ed67f5	fix: add prop value template & fix components popover (#201 ) * fix: clear value in CodeSetter * fix: update variable path in codesetter * fix: add prop value template * fix: update recommendedList for ComponentsPopover * fix: update icon size in line mode for ComponentsPanel	2024-08-30 18:09:01 +08:00
wwsun	179de0cc52	chore(release): publish - @music163/tango-designer@1.4.4 - @music163/tango-setting-form@1.2.13 - @music163/tango-ui@1.4.3	2024-08-16 17:50:55 +08:00
BoBoooooo	6de54884b5	fix: CodeInput 支持 jsx css 代码补全 (#198 ) * feat: code setter support jsx css completion * fix: refactor expression css mode * fix: update story * fix: revert code	2024-08-16 11:16:39 +08:00
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
wwsun	8fe57333a0	chore(release): publish - @music163/tango-context@1.1.8 - @music163/tango-core@1.4.2 - @music163/tango-designer@1.4.2 - @music163/tango-sandbox@1.0.11 - @music163/tango-setting-form@1.2.11	2024-08-06 13:54:27 +08:00
BoBoooooo	269e304d68	fix: view module _nodesTree set init value (#194 )	2024-08-06 11:08:42 +08:00
wwsun	8c80255f81	chore: up	2024-08-05 12:31:12 +08:00
wwsun	359aa0b148	chore: update	2024-08-05 12:30:37 +08:00
wwsun	51ca4a72ce	chore(release): publish - @music163/tango-context@1.1.7 - @music163/tango-core@1.4.1 - @music163/tango-designer@1.4.1 - @music163/tango-helpers@1.2.2 - @music163/tango-sandbox@1.0.10 - @music163/tango-setting-form@1.2.10 - @music163/tango-ui@1.4.1	2024-08-05 12:28:43 +08:00
BoBoooooo	b83d965955	fix: show right panel when design view select node & optimize editor css (#193 )	2024-08-05 11:45:41 +08:00
Wells	a1eea02f94	fix: parse template code & update maxRow of TextAreaSetter (#192 ) * fix: update templatePattern regex to allow for multiline code wrapping * fix: update error overlay display to use designer.activeView instead of mode * fix: update maxRows to 6 in TextAreaSetter	2024-08-05 11:20:41 +08:00