chore(release): publish

- @music163/tango-context@0.2.11 - @music163/tango-core@0.2.10 - @music163/tango-designer@0.5.13 - @music163/tango-sandbox@0.1.15 - @music163/tango-setting-form@0.2.15
fix: add filesFormatter to sandbox & fix update props with imports (#71 )
2026-08-31 09:30:28 +08:00 · 2023-12-04 12:54:30 +08:00 · 2023-12-04 12:52:10 +08:00 · 2023-11-30 15:46:50 +08:00 · 2023-11-30 15:44:42 +08:00 · 2023-11-29 14:50:40 +08:00
51 changed files with 659 additions and 454 deletions
@@ -2,11 +2,12 @@
  "extends": ["eslint-config-ali/typescript/react", "prettier"],
  "ignorePatterns": ["**/dist/**/*", "**/lib/**/*", "**/node_modules/**/*", "scripts/**/*"],
  "rules": {
+    "@typescript-eslint/consistent-type-definitions": "off",
    "@typescript-eslint/dot-notation": "off",
    "@typescript-eslint/no-unused-vars": "warn",
    "import/no-cycle": "off",
    "no-nested-ternary": "off",
-    "no-useless-return":"off",
+    "no-useless-return": "off",
    "no-param-reassign": "off",
    "prefer-destructuring": "off"
  }
@@ -45,10 +45,10 @@ gantt
    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)

    section Builder Release
-    Alpha version            :active,  des1, 2023-08-10, 2023-08-30
-    Beta version               :         des2, 2023-09-01, 2023-09-30
-    1.0 RC               :         des3, after des2, 40d
-    1.0 version              :         des4, after des3, 21d
+    Alpha version            :active,  m1, 2023-08-10, 2023-08-30
+    Beta version               :         m2, 2023-09-01, 2023-09-30
+    1.0 RC               :         m3, 2023-10-01, 2023-12-15
+    1.0 version              :         m4, after m3, 10d
 ```

 ## 💻 Development
@@ -96,6 +96,17 @@ Thanks to the NetEase Cloud Music Front-end team, Public Technology team, Live B

 Thank you to CodeSandbox for providing the [Sandpack](https://sandpack.codesandbox.io/) project, which provides powerful online code execution capabilities for Tango.

+## 📣 Product Promotion
+
+![](https://p5.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/31629770956/da9e/3a74/4e00/7c69cf46a713f1b008bd1243b5b1ab1c.png)
+
+Don't waste your time restoring the UI, try the NetEase Cloud Music "Seal D2C" development tool! Easily turn your design into code, support React, RN, Vue, WeChat apps and other multi-end scenarios, what you see is what you get!
+
+Experience "Seal D2C" now:
+
+- I'm a Figma user: <https://www.figma.com/community/plugin/1174548852019950797/seal-figma-to-code-d2c/>
+- I'm a MasterGo user: <https://mastergo.com/community/plugin/98956774428196/>
+
 ## 📄 License

 This project is licensed under the terms of the [MIT license](./LICENSE)
@@ -45,10 +45,10 @@ gantt
    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)

    section Builder Release
-    Alpha version            :active,  des1, 2023-08-10, 2023-08-30
-    Beta version               :         des2, 2023-09-01, 2023-09-30
-    1.0 RC               :         des3, after des2, 40d
-    1.0 version              :         des4, after des3, 21d
+    Alpha version            :active,  m1, 2023-08-10, 2023-08-30
+    Beta version               :         m2, 2023-09-01, 2023-09-30
+    1.0 RC               :         m3, 2023-10-01, 2023-12-15
+    1.0 version              :         m4, after m3, 10d
 ```

 ## 💻 开发
@@ -97,6 +97,17 @@ yarn start

 感谢 CodeSandbox 提供的 [Sandpack](https://sandpack.codesandbox.io/) 项目，为 Tango 提供了强大的基于浏览器的代码构建与执行能力。

+## 📣 产品推广
+
+![](https://p5.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/31629770956/da9e/3a74/4e00/7c69cf46a713f1b008bd1243b5b1ab1c.png)
+
+不要再浪费时间还原 UI 啦，快来试试网易云音乐「海豹 D2C」研发工具吧！轻松将设计稿转为代码，支持 React、RN、Vue、微信小程序等多端场景，所见即所得！
+
+立即体验「海豹 D2C」：
+
+- 我是 Figma 用户：<https://www.figma.com/community/plugin/1174548852019950797/seal-figma-to-code-d2c/>
+- 我是 MasterGo 用户：<https://mastergo.com/community/plugin/98956774428196/>
+
 ## 📄 开源协议

 此项目遵循 [MIT 开源协议](./LICENSE)
@@ -75,15 +75,6 @@ const tangoConfigJson = {
  },
 };

-const appJson: any = {
-  pages: [
-    {
-      path: '/',
-      name: '首页',
-    },
-  ],
-};
-
 const routesCode = `
 import Index from "./pages/list";

@@ -151,6 +142,7 @@ import {
  Input,
  FormilyForm,
 } from "@music163/antd";
+import { Space } from '@music163/antd';
 class App extends React.Component {
  render() {
    return (
@@ -158,8 +150,10 @@ class App extends React.Component {
       <Section title="Section Title">
       </Section>
       <Section>
+       <Space>
          <Button>button</Button>
          <Input />
+          </Space>
        </Section>
      </Page>
    );
@@ -184,6 +178,13 @@ import { defineServices } from '@music163/tango-boot';
 import './sub';

 export default defineServices({
+  longLongLongLongLongLongLongLongGet: {
+    url: 'https://nei.hz.netease.com/api/apimock-v2/cc974ffbaa7a85c77f30e4ce67deb67f/api/getUserProfile',
+    formatter: res => res.data,
+    headers: {
+      'Content-Type': 'application/json',
+    }
+  },
  get: {
    url: 'https://nei.hz.netease.com/api/apimock-v2/cc974ffbaa7a85c77f30e4ce67deb67f/api/getUserProfile',
    formatter: res => res.data,
@@ -239,7 +240,6 @@ p {

 export const sampleFiles = [
  { filename: '/package.json', code: JSON.stringify(packageJson) },
-  { filename: '/appJson.json', code: JSON.stringify(appJson) },
  { filename: '/tango.config.json', code: JSON.stringify(tangoConfigJson) },
  { filename: '/README.md', code: '# readme' },
  { filename: '/src/index.less', code: lessCode },
@@ -12,6 +12,7 @@ import {
  CodeEditor,
  Sandbox,
  DndQuery,
+  themeLight,
 } from '@music163/tango-designer';
 import { createEngine, Workspace } from '@music163/tango-core';
 import { Logo, ProjectDetail, bootHelperVariables } from './share';
@@ -52,6 +53,7 @@ export default function App() {
  const [menuData, setMenuData] = useState(false);
  return (
    <Designer
+      theme={themeLight}
      engine={engine}
      config={{
        customActionVariables: bootHelperVariables,
@@ -80,7 +82,6 @@ export default function App() {
        }
      >
        <Sidebar>
-          <Sidebar.Item key="outline" label="结构" icon={<BuildOutlined />} />
          <Sidebar.Item
            key="components"
            label="组件"
@@ -90,6 +91,7 @@ export default function App() {
              loading: menuLoading,
            }}
          />
+          <Sidebar.Item key="outline" label="结构" icon={<BuildOutlined />} />
          <Sidebar.Item
            key="variables"
            label="变量"
@@ -137,7 +137,7 @@ const config = {
            ],
          },
          {
-            title: '更多',
+            title: '相关资源',
            items: [
              {
                label: '博客',
@@ -149,6 +149,19 @@ const config = {
              },
            ],
          },
+          {
+            title: '更多产品',
+            items: [
+              {
+                label: '海豹 D2C - Figma 插件',
+                to: 'https://www.figma.com/community/plugin/1174548852019950797/seal-figma-to-code-d2c',
+              },
+              {
+                label: '海豹 D2C - MasterGo 插件',
+                to: 'https://mastergo.com/community/plugin/98956774428196/',
+              },
+            ],
+          },
        ],
        logo: {
          alt: 'NetEase Cloud Music',
@@ -24,7 +24,7 @@ const timelines = [
  {
    icon: null,
    title: '1.0 RC',
-    date: '2023.10.30',
+    date: '2023.11.30',
    description: translate({
      id: 'homepage.timeline.rc',
      message: '核心 API 基本稳定，不再发生 BR，发布 1.0 RC 版本。',
@@ -33,7 +33,7 @@ const timelines = [
  {
    icon: null,
    title: '1.0',
-    date: 'Before 2023.12.25',
+    date: 'Before 2023.12.29',
    description: translate({
      id: 'homepage.timeline.stable',
      message: 'API 完全稳定，提供良好的社区支持，可用于生产环境。',
@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [0.2.11](https://github.com/netease/tango/compare/@music163/tango-context@0.2.10...@music163/tango-context@0.2.11) (2023-12-04)
+
+**Note:** Version bump only for package @music163/tango-context
+
+## [0.2.10](https://github.com/netease/tango/compare/@music163/tango-context@0.2.9...@music163/tango-context@0.2.10) (2023-11-30)
+
+**Note:** Version bump only for package @music163/tango-context
+
+## [0.2.9](https://github.com/netease/tango/compare/@music163/tango-context@0.2.8...@music163/tango-context@0.2.9) (2023-11-29)
+
+**Note:** Version bump only for package @music163/tango-context
+
+## [0.2.8](https://github.com/netease/tango/compare/@music163/tango-context@0.2.7...@music163/tango-context@0.2.8) (2023-11-27)
+
+**Note:** Version bump only for package @music163/tango-context
+
+## [0.2.7](https://github.com/netease/tango/compare/@music163/tango-context@0.2.6...@music163/tango-context@0.2.7) (2023-11-23)
+
+**Note:** Version bump only for package @music163/tango-context
+
 ## [0.2.6](https://github.com/netease/tango/compare/@music163/tango-context@0.2.5...@music163/tango-context@0.2.6) (2023-11-20)

 **Note:** Version bump only for package @music163/tango-context
@@ -1,6 +1,6 @@
 {
  "name": "@music163/tango-context",
-  "version": "0.2.6",
+  "version": "0.2.11",
  "description": "react context for tango-apps",
  "keywords": [
    "react",
@@ -31,8 +31,8 @@
    "react": ">= 16.8"
  },
  "dependencies": {
-    "@music163/tango-core": "^0.2.5",
-    "@music163/tango-helpers": "^0.1.7",
+    "@music163/tango-core": "^0.2.10",
+    "@music163/tango-helpers": "^0.1.8",
    "mobx-react-lite": "4.0.2"
  },
  "publishConfig": {
@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [0.2.10](https://github.com/netease/tango/compare/@music163/tango-core@0.2.9...@music163/tango-core@0.2.10) (2023-12-04)
+
+### Bug Fixes
+
+- add filesFormatter to sandbox & fix update props with imports ([#71](https://github.com/netease/tango/issues/71)) ([138cbe9](https://github.com/netease/tango/commit/138cbe9b203b370aff42c1ae8086d69edacf35e9))
+
+## [0.2.9](https://github.com/netease/tango/compare/@music163/tango-core@0.2.8...@music163/tango-core@0.2.9) (2023-11-30)
+
+### Bug Fixes
+
+- fix render components tree ([76a5a2c](https://github.com/netease/tango/commit/76a5a2c65920bc42b019cd1f32a3cacd0d888638))
+
+## [0.2.8](https://github.com/netease/tango/compare/@music163/tango-core@0.2.7...@music163/tango-core@0.2.8) (2023-11-29)
+
+### Bug Fixes
+
+- workspace onFilesChange ([#70](https://github.com/netease/tango/issues/70)) ([accd826](https://github.com/netease/tango/commit/accd8263764c811ea8175a9cd341fc6fa6c75967))
+
+## [0.2.7](https://github.com/netease/tango/compare/@music163/tango-core@0.2.6...@music163/tango-core@0.2.7) (2023-11-27)
+
+### Bug Fixes
+
+- list service functions ([91b53da](https://github.com/netease/tango/commit/91b53da38e362ae320457429037dc347adf90bd3))
+- parse tango variables in view file ([d917633](https://github.com/netease/tango/commit/d91763379c4ccf9d826b717aa80a07abdaf2e3a2))
+
+## [0.2.6](https://github.com/netease/tango/compare/@music163/tango-core@0.2.5...@music163/tango-core@0.2.6) (2023-11-23)
+
+### Bug Fixes
+
+- prototype to import declaration ([#67](https://github.com/netease/tango/issues/67)) ([8a1234e](https://github.com/netease/tango/commit/8a1234e565489c92f041356b7a06339eaeee48df))
+- refactor update import specifiers ([#68](https://github.com/netease/tango/issues/68)) ([558f2cd](https://github.com/netease/tango/commit/558f2cd0a692c6bbc866d08250d25e2619af183f))
+
 ## [0.2.5](https://github.com/netease/tango/compare/@music163/tango-core@0.2.4...@music163/tango-core@0.2.5) (2023-11-20)

 ### Bug Fixes
@@ -1,6 +1,6 @@
 {
  "name": "@music163/tango-core",
-  "version": "0.2.5",
+  "version": "0.2.10",
  "description": "tango core",
  "author": "wwsun <ww.sun@outlook.com>",
  "homepage": "",
@@ -28,7 +28,7 @@
    "@babel/parser": "^7.23.0",
    "@babel/traverse": "^7.23.2",
    "@babel/types": "^7.23.0",
-    "@music163/tango-helpers": "^0.1.7",
+    "@music163/tango-helpers": "^0.1.8",
    "@types/babel__generator": "^7.6.6",
    "@types/babel__traverse": "^7.20.3",
    "mobx": "6.9.0",
@@ -453,7 +453,7 @@ function getLastExportDeclarationIndex(node: t.Program) {
 * @param importedSourcePath
 * @returns
 */
-export function makeImportDeclaration(importedModule: IImportDeclarationPayload) {
+export function makeImportDeclarationLegacy(importedModule: IImportDeclarationPayload) {
  const specifierNodes =
    importedModule.specifiers?.map((localName) =>
      t.importSpecifier(t.identifier(localName), t.identifier(localName)),
@@ -468,19 +468,28 @@ export function makeImportDeclaration(importedModule: IImportDeclarationPayload)
  return t.importDeclaration(newSpecifierNodes, t.stringLiteral(importedModule.sourcePath));
 }

-export function makeImportDeclaration2(source: string, specifiers: IImportSpecifierData[]) {
-  const specifierNodes = specifiers.map((item) => {
-    switch (item.type) {
-      case 'ImportDefaultSpecifier':
-        return t.importDefaultSpecifier(t.identifier(item.localName));
-      case 'ImportSpecifier':
-        return t.importSpecifier(t.identifier(item.importedName), t.identifier(item.localName));
-      case 'ImportNamespaceSpecifier':
-        return t.importNamespaceSpecifier(t.identifier(item.localName));
-      default:
-        return;
-    }
-  });
+function specifierData2node(data: IImportSpecifierData) {
+  switch (data.type) {
+    case 'ImportDefaultSpecifier':
+      return t.importDefaultSpecifier(t.identifier(data.localName));
+    case 'ImportSpecifier':
+      return t.importSpecifier(
+        t.identifier(data.importedName || data.localName),
+        t.identifier(data.localName),
+      );
+    case 'ImportNamespaceSpecifier':
+      return t.importNamespaceSpecifier(t.identifier(data.localName));
+    default:
+      return;
+  }
+}
+
+function specifierDataList2nodes(specifiers: IImportSpecifierData[]) {
+  return specifiers.map((item) => specifierData2node(item)).filter((item) => !!item);
+}
+
+export function makeImportDeclaration(source: string, specifiers: IImportSpecifierData[]) {
+  const specifierNodes = specifierDataList2nodes(specifiers);
  return t.importDeclaration(specifierNodes, t.stringLiteral(source));
 }

@@ -515,11 +524,11 @@ function getImportDeclarationData(node: t.ImportDeclaration): IImportDeclaration
 * @param importedSourcePath
 * @returns
 */
-export function addImportDeclaration(ast: t.File, importedModule: IImportDeclarationPayload) {
+export function addImportDeclarationLegacy(ast: t.File, importedModule: IImportDeclarationPayload) {
  traverse(ast, {
    Program(path) {
      const lastIndex = getLastImportDeclarationIndex(path.node);
-      const newImportDeclaration = makeImportDeclaration(importedModule);
+      const newImportDeclaration = makeImportDeclarationLegacy(importedModule);
      path.node.body.splice(lastIndex, 0, newImportDeclaration);
      path.stop();
    },
@@ -527,7 +536,7 @@ export function addImportDeclaration(ast: t.File, importedModule: IImportDeclara
  return ast;
 }

-export function addImportDeclaration2(
+export function addImportDeclaration(
  ast: t.File,
  source: string,
  specifiers: IImportSpecifierData[],
@@ -535,11 +544,12 @@ export function addImportDeclaration2(
  traverse(ast, {
    Program(path) {
      const lastIndex = getLastImportDeclarationIndex(path.node);
-      const newImportDeclaration = makeImportDeclaration2(source, specifiers);
+      const newImportDeclaration = makeImportDeclaration(source, specifiers);
      path.node.body.splice(lastIndex, 0, newImportDeclaration);
      path.stop();
    },
  });
+  return ast;
 }

 /**
@@ -550,12 +560,15 @@ export function addImportDeclaration2(
 * @param importedSourcePath
 * @returns
 */
-export function updateImportDeclaration(ast: t.File, importedModule: IImportDeclarationPayload) {
+export function updateImportDeclarationLegacy(
+  ast: t.File,
+  importedModule: IImportDeclarationPayload,
+) {
  traverse(ast, {
    ImportDeclaration(path) {
      const currentSourcePath = node2value(path.node.source);
      if (currentSourcePath === importedModule.sourcePath) {
-        const newImportDeclaration = makeImportDeclaration(importedModule);
+        const newImportDeclaration = makeImportDeclarationLegacy(importedModule);
        path.replaceWith(newImportDeclaration);
        path.stop(); // 只修改匹配到的第一条
      }
@@ -564,7 +577,7 @@ export function updateImportDeclaration(ast: t.File, importedModule: IImportDecl
  return ast;
 }

-export function updateImportDeclaration2(
+export function updateImportDeclaration(
  ast: t.File,
  source: string,
  specifiers: IImportSpecifierData[],
@@ -573,7 +586,7 @@ export function updateImportDeclaration2(
    ImportDeclaration(path) {
      const currentSourcePath = node2value(path.node.source);
      if (currentSourcePath === source) {
-        const newImportDeclaration = makeImportDeclaration2(source, specifiers);
+        const newImportDeclaration = makeImportDeclaration(source, specifiers);
        path.replaceWith(newImportDeclaration);
        path.stop(); // 只修改匹配到的第一条
      }
@@ -582,6 +595,32 @@ export function updateImportDeclaration2(
  return ast;
 }

+/**
+ * 再已有的导入语句中添加新的导入符号
+ * @param ast
+ * @param source
+ * @param newSpecifiers
+ * @returns
+ */
+export function insertImportSpecifiers(
+  ast: t.File,
+  source: string,
+  newSpecifiers: IImportSpecifierData[],
+) {
+  traverse(ast, {
+    ImportDeclaration(path) {
+      const currentSourcePath = node2value(path.node.source);
+      if (currentSourcePath === source) {
+        const nodes = specifierDataList2nodes(newSpecifiers);
+        path.node.specifiers.push(...nodes);
+        // 只在匹配到的第一个导入声明语句添加即可，不再重复执行
+        path.stop();
+      }
+    },
+  });
+  return ast;
+}
+
 /**
 * 新增类属性
 * @param ast
@@ -649,7 +688,6 @@ export function addRouteToRouteFile(ast: t.File, routePath: string, importFilePa
      const newNode = t.objectExpression([
        t.objectProperty(t.identifier('path'), t.stringLiteral(routePath)),
        t.objectProperty(t.identifier('component'), t.identifier(component)),
-        // FIXME: tango/issues#144 https://g.hz.netease.com/tango/issues/-/issues/144
        t.objectProperty(t.identifier('exact'), t.booleanLiteral(true)),
      ]);
      path.node.elements.push(newNode);
@@ -1180,7 +1218,12 @@ export function traverseViewFile(ast: t.File, idGenerator: IdGenerator) {
  traverse(ast, {
    ImportDeclaration(path) {
      const { source, specifiers } = parseImportDeclaration(path.node);
-      imports[source] = specifiers;
+      if (imports[source]) {
+        // 存在重复的导入语句，合并导入符号列表
+        imports[source] = imports[source].concat(specifiers);
+      } else {
+        imports[source] = specifiers;
+      }

      // FIXME: 下面的逻辑兼容旧的逻辑，后续需要移除掉
      const declarationData = specifiers.reduce(
@@ -1218,7 +1261,12 @@ export function traverseViewFile(ast: t.File, idGenerator: IdGenerator) {

    MemberExpression(path) {
      const variable = node2value(path.node, false);
-      if (isTangoVariable(variable) && !variables.includes(variable)) {
+      const parentNode = path.parentPath.node;
+      if (
+        !t.isMemberExpression(parentNode) &&
+        isTangoVariable(variable) &&
+        !variables.includes(variable)
+      ) {
        variables.push(variable);
      }
    },
@@ -7,12 +7,47 @@ import {
  uuid,
 } from '@music163/tango-helpers';
 import { getRelativePath, isFilepath } from './string';
-import type { IImportDeclarationPayload } from '../types';
+import type { IImportDeclarationPayload, IImportSpecifierData } from '../types';
 import { code2expression } from './ast';
 import { isWrappedByExpressionContainer } from './assert';

+export function prototype2importDeclarationData(
+  prototype: ComponentPrototypeType,
+  relativeFilepath?: string,
+): { source: string; specifiers: IImportSpecifierData[] } {
+  let source = prototype.package;
+  if (relativeFilepath && isFilepath(source)) {
+    source = getRelativePath(relativeFilepath, source);
+  }
+  if (source.endsWith('.js')) {
+    source = source.slice(0, -3);
+  }
+
+  const specifiers: IImportSpecifierData[] = [];
+
+  if (prototype.exportType === 'defaultExport') {
+    specifiers.push({
+      localName: prototype.name,
+      type: 'ImportDefaultSpecifier',
+    });
+  } else {
+    [prototype.name, ...(prototype.relatedImports || [])].forEach((item) => {
+      specifiers.push({
+        localName: item,
+        type: 'ImportSpecifier',
+      });
+    });
+  }
+
+  return {
+    source,
+    specifiers,
+  };
+}
+
 /**
 * 根据组件的 prototype 生成 ImportDeclarationPayload
+ * @deprecated
 */
 export function getImportDeclarationPayloadByPrototype(
  prototype: ComponentPrototypeType,
@@ -35,6 +70,9 @@ export function getImportDeclarationPayloadByPrototype(
  if (relativeFilepath && isFilepath(sourcePath)) {
    sourcePath = getRelativePath(relativeFilepath, sourcePath);
  }
+  if (sourcePath.endsWith('.js')) {
+    sourcePath = sourcePath.slice(0, -3);
+  }

  return {
    defaultSpecifier,
@@ -56,6 +56,7 @@ export class TangoFile {
      this._code = code;
      this._cleanCode = code;
    }
+    this.workspace.onFilesChange([this.filename]);
  }
 }

@@ -134,6 +135,7 @@ export class TangoJsonFile extends TangoFile {
        logger.error(err);
      }
    }
+    this.workspace.onFilesChange([this.filename]);
  }

  /**
@@ -5,12 +5,12 @@ import { DragSource } from './drag-source';
 import {
  IFileConfig,
  FileType,
-  IImportDeclarationPayload,
  InsertChildPositionType,
  ITangoConfigPackages,
  IPageConfigData,
  IServiceFunctionPayload,
  IImportSpecifierSourceData,
+  IImportSpecifierData,
 } from '../types';
 import { TangoFile, TangoJsonFile } from './file';
 import { TangoRouteModule } from './route-module';
@@ -33,6 +33,14 @@ export interface IViewFile {

  update: (code?: string, isFormatCode?: boolean, refreshWorkspace?: boolean) => void;

+  /**
+   * 添加新的导入符号
+   * @param source 导入来源
+   * @param newSpecifiers 新导入符号列表
+   * @returns this
+   */
+  addImportSpecifiers: (source: string, newSpecifiers: IImportSpecifierData[]) => IViewFile;
+
  getNode: (targetNodeId: string) => IViewNode;

  removeNode: (targetNodeId: string) => IViewFile;
@@ -41,31 +49,15 @@ export interface IViewFile {
    targetNodeId: string,
    newNode: any,
    position?: InsertChildPositionType,
-    sourcePrototype?: string | ComponentPrototypeType,
  ) => IViewFile;

-  insertAfter: (
-    targetNodeId: string,
-    newNode: any,
-    sourcePrototype?: string | ComponentPrototypeType,
-  ) => IViewFile;
+  insertAfter: (targetNodeId: string, newNode: any) => IViewFile;

-  insertBefore: (
-    targetNodeId: string,
-    newNode: any,
-    sourcePrototype?: string | ComponentPrototypeType,
-  ) => IViewFile;
+  insertBefore: (targetNodeId: string, newNode: any) => IViewFile;

-  replaceNode: (
-    targetNodeId: string,
-    newNode: any,
-    sourcePrototype?: string | ComponentPrototypeType,
-  ) => IViewFile;
+  replaceNode: (targetNodeId: string, newNode: any) => IViewFile;

-  replaceViewChildren: (
-    rawNodes: any[],
-    importDeclarations?: IImportDeclarationPayload[],
-  ) => IViewFile;
+  replaceViewChildren: (rawNodes: any[]) => IViewFile;

  updateNodeAttribute: (
    nodeId: string,
@@ -157,8 +149,6 @@ export interface IWorkspace {
  setComponentPrototypes: (prototypes: Record<string, ComponentPrototypeType>) => void;
  getPrototype: (name: string | ComponentPrototypeType) => ComponentPrototypeType;

-  onFilesChange?: (filenames: string[]) => void;
-
  // ----------------- 文件操作 -----------------
  addFiles: (files: IFileConfig[]) => void;
  addFile: (filename: string, code: string, fileType?: FileType) => void;
@@ -177,6 +167,12 @@ export interface IWorkspace {
  listFiles: () => Record<string, string>;
  getFile: (filename: string) => TangoFile;

+  /**
+   * 文件变化回调
+   * @param filenames 文件名列表
+   */
+  onFilesChange: (filenames: string[]) => void;
+
  // ----------------- 节点操作 -----------------

  removeSelectedNode: () => void;
@@ -6,8 +6,8 @@ import {
  ast2code,
  formatCode,
  traverseFile,
-  addImportDeclaration2,
-  updateImportDeclaration2,
+  addImportDeclaration,
+  updateImportDeclaration,
 } from '../helpers';
 import { TangoFile } from './file';
 import { IFileConfig, IImportSpecifierData, ImportDeclarationDataType } from '../types';
@@ -46,18 +46,20 @@ export class TangoModule extends TangoFile {

    this._analysisAst();

+    this.workspace.onFilesChange([this.filename]);
+
    if (refreshWorkspace) {
      this.workspace.refresh([this.filename]);
    }
  }

  addImportDeclaration(source: string, specifiers: IImportSpecifierData[]) {
-    addImportDeclaration2(this.ast, source, specifiers);
+    this.ast = addImportDeclaration(this.ast, source, specifiers);
    return this;
  }

  updateImportDeclaration(source: string, specifiers: IImportSpecifierData[]) {
-    updateImportDeclaration2(this.ast, source, specifiers);
+    this.ast = updateImportDeclaration(this.ast, source, specifiers);
    return this;
  }

@@ -1,6 +1,6 @@
 import * as t from '@babel/types';
 import { action, computed, makeObservable, observable, toJS } from 'mobx';
-import { ComponentPrototypeType, Dict } from '@music163/tango-helpers';
+import { Dict } from '@music163/tango-helpers';
 import {
  ast2code,
  traverseViewFile,
@@ -8,15 +8,17 @@ import {
  insertSiblingAfterJSXElement,
  appendChildToJSXElement,
  addImportDeclaration,
-  updateImportDeclaration,
  replaceJSXElement,
-  getImportDeclarationPayloadByPrototype,
  removeUnusedImportSpecifiers,
  insertSiblingBeforeJSXElement,
  replaceRootJSXElementChildren,
  IdGenerator,
  updateJSXAttributes,
  queryXFormItemFields,
+  prototype2importDeclarationData,
+  insertImportSpecifiers,
+  addImportDeclarationLegacy,
+  updateImportDeclarationLegacy,
 } from '../helpers';
 import { TangoNode } from './node';
 import {
@@ -26,10 +28,57 @@ import {
  InsertChildPositionType,
  IImportSpecifierSourceData,
  ImportDeclarationDataType,
+  IImportSpecifierData,
 } from '../types';
 import { IViewFile, IWorkspace } from './interfaces';
 import { TangoModule } from './module';

+/**
+ * 导入信息转为 变量名->来源 的 map 结构
+ * @param importedModules
+ * @returns
+ */
+function buildImportMap(importedModules: ImportDeclarationDataType) {
+  const map: Dict<IImportSpecifierSourceData> = {};
+  Object.keys(importedModules).forEach((source) => {
+    const specifiers = importedModules[source];
+    specifiers?.forEach((specifier) => {
+      map[specifier.localName] = {
+        source,
+        isDefault: specifier.type === 'ImportDefaultSpecifier',
+      };
+    });
+  });
+  return map;
+}
+
+/**
+ * 将节点列表转换为 tree data 嵌套数组
+ * @param list
+ */
+function nodeListToTreeData(list: ITangoViewNodeData[]) {
+  const map: Record<string, ITangoViewNodeData> = {};
+
+  list.forEach((item) => {
+    // 如果不存在，则初始化
+    if (!map[item.id]) {
+      map[item.id] = {
+        ...item,
+        children: [],
+      };
+    }
+
+    // 是否找到父节点，找到则塞进去
+    if (item.parentId && map[item.parentId]) {
+      map[item.parentId].children.push(map[item.id]);
+    }
+  });
+
+  // 保留根节点
+  const ret = Object.values(map).filter((item) => !item.parentId);
+  return ret;
+}
+
 /**
 * 视图模块
 */
@@ -111,7 +160,7 @@ export class TangoViewModule extends TangoModule implements IViewFile {

    this._importedModules = importedModules;
    this.imports = imports;
-    this.importMap = this.buildImportMap(imports);
+    this.importMap = buildImportMap(imports);
    this.variables = variables;

    this._nodes.clear();
@@ -172,27 +221,30 @@ export class TangoViewModule extends TangoModule implements IViewFile {
  }

  /**
-   * 基于组件的 prototype 信息更新导入信息
-   * TODO: 和 Module.addImportDeclaration 中的保持一致
-   * @deprecated
-   * @param prototype
-   * @param shouldUpdateCode
+   * 添加导入符号
+   * @param source
+   * @param newSpecifiers
+   * @returns
   */
-  updateImportSpecifiersByPrototype(sourcePrototype: string | ComponentPrototypeType) {
-    const prototype = this.workspace.getPrototype(sourcePrototype);
-    if (prototype) {
-      const importDeclaration = getImportDeclarationPayloadByPrototype(prototype, this.filename);
-      this.updateImportSpecifiers(importDeclaration);
+  addImportSpecifiers(source: string, newSpecifiers: IImportSpecifierData[]) {
+    const existSpecifiers = this.imports[source];
+    if (existSpecifiers) {
+      const insertedSpecifiers = newSpecifiers.filter((item) => {
+        return !existSpecifiers.find((existItem) => existItem.localName === item.localName);
+      });
+      this.ast = insertImportSpecifiers(this.ast, source, insertedSpecifiers);
+    } else {
+      // 不存在导入来源，直接添加新的导入语句
+      this.ast = addImportDeclaration(this.ast, source, newSpecifiers);
    }
    return this;
  }

  /**
-   * 更新导入的变量（新版）
-   * TODO: 和 Module.updateImportDeclaration 中的保持一致
-   * @deprecated
+   * 更新导入的变量
+   * @deprecated 使用 updateImportDeclaration 代替
   */
-  updateImportSpecifiers(importDeclaration: IImportDeclarationPayload) {
+  updateImportSpecifiersLegacy(importDeclaration: IImportDeclarationPayload) {
    const mods = this._importedModules[importDeclaration.sourcePath];
    let ast;
    // 如果模块已存在，需要去重
@@ -207,12 +259,12 @@ export class TangoViewModule extends TangoModule implements IViewFile {
        (name) => !specifiers.includes(name),
      );

-      ast = updateImportDeclaration(this.ast, {
+      ast = updateImportDeclarationLegacy(this.ast, {
        ...importDeclaration,
        specifiers: newSpecifiers.concat(targetMod.specifiers),
      });
    } else {
-      ast = addImportDeclaration(this.ast, importDeclaration);
+      ast = addImportDeclarationLegacy(this.ast, importDeclaration);
    }
    this.ast = ast;
    return this;
@@ -255,9 +307,24 @@ export class TangoViewModule extends TangoModule implements IViewFile {
  updateNodeAttributes(nodeId: string, config: Record<string, any>, relatedImports?: string[]) {
    if (relatedImports && relatedImports.length) {
      // 导入依赖的组件
-      relatedImports.forEach((name: string) => {
+      const newImportData = relatedImports.reduce((prev, name) => {
        const proto = this.workspace.getPrototype(name);
-        this.updateImportSpecifiersByPrototype(proto);
+        const { source, specifiers } = prototype2importDeclarationData(proto, this.filename);
+        const existSpecifiers: IImportSpecifierData[] = prev[source];
+        if (existSpecifiers) {
+          // merge specifiers
+          specifiers.forEach((item) => {
+            if (!existSpecifiers.find((existItem) => existItem.localName === item.localName)) {
+              existSpecifiers.push(item);
+            }
+          });
+        } else {
+          prev[source] = specifiers;
+        }
+        return prev;
+      }, {});
+      Object.keys(newImportData).forEach((source) => {
+        this.addImportSpecifiers(source, newImportData[source]);
      });
    }
    this.ast = updateJSXAttributes(this.ast, nodeId, config);
@@ -268,43 +335,25 @@ export class TangoViewModule extends TangoModule implements IViewFile {
   * 插入子节点的最后面
   * @param targetNodeId
   * @param newNode
-   * @param sourceName
+   * @param position
   * @returns
   */
  insertChild(
    targetNodeId: string,
    newNode: t.JSXElement,
    position: InsertChildPositionType = 'last',
-    sourceName: string | ComponentPrototypeType,
  ) {
    this.ast = appendChildToJSXElement(this.ast, targetNodeId, newNode, position);
-    if (sourceName) {
-      this.updateImportSpecifiersByPrototype(sourceName);
-    }
    return this;
  }

-  insertAfter(
-    targetNodeId: string,
-    newNode: t.JSXElement,
-    sourceName?: string | ComponentPrototypeType,
-  ) {
+  insertAfter(targetNodeId: string, newNode: t.JSXElement) {
    this.ast = insertSiblingAfterJSXElement(this.ast, targetNodeId, newNode);
-    if (sourceName) {
-      this.updateImportSpecifiersByPrototype(sourceName);
-    }
    return this;
  }

-  insertBefore(
-    targetNodeId: string,
-    newNode: t.JSXElement,
-    sourceName?: string | ComponentPrototypeType,
-  ) {
+  insertBefore(targetNodeId: string, newNode: t.JSXElement) {
    this.ast = insertSiblingBeforeJSXElement(this.ast, targetNodeId, newNode);
-    if (sourceName) {
-      this.updateImportSpecifiersByPrototype(sourceName);
-    }
    return this;
  }

@@ -312,22 +361,15 @@ export class TangoViewModule extends TangoModule implements IViewFile {
   * 替换目标节点为新节点
   * @param targetNodeId
   * @param newNode
-   * @param sourcePrototype
   */
-  replaceNode(
-    targetNodeId: string,
-    newNode: t.JSXElement,
-    sourceName?: string | ComponentPrototypeType,
-  ) {
+  replaceNode(targetNodeId: string, newNode: t.JSXElement) {
    this.ast = replaceJSXElement(this.ast, targetNodeId, newNode);
-    if (sourceName) {
-      this.updateImportSpecifiersByPrototype(sourceName);
-    }
    return this;
  }

  /**
   * 替换 jsx 跟结点的子元素
+   * @deprecated 不推荐使用
   */
  replaceViewChildren(
    childrenNodes: t.JSXElement[],
@@ -339,51 +381,10 @@ export class TangoViewModule extends TangoModule implements IViewFile {

    if (importDeclarations?.length) {
      importDeclarations.forEach((item) => {
-        this.updateImportSpecifiers(item);
+        this.updateImportSpecifiersLegacy(item);
      });
    }

    return this;
  }
-
-  private buildImportMap(importedModules: ImportDeclarationDataType) {
-    const map: Dict<IImportSpecifierSourceData> = {};
-    Object.keys(importedModules).forEach((source) => {
-      const specifiers = importedModules[source];
-      specifiers?.forEach((specifier) => {
-        map[specifier.localName] = {
-          source,
-          isDefault: specifier.type === 'ImportDefaultSpecifier',
-        };
-      });
-    });
-    return map;
-  }
-}
-
-/**
- * 将节点列表转换为 tree data 嵌套数组
- * @param list
- */
-function nodeListToTreeData(list: ITangoViewNodeData[]) {
-  const map: Record<string, ITangoViewNodeData> = {};
-
-  list.forEach((item) => {
-    // 如果不存在，则初始化
-    if (!map[item.id]) {
-      map[item.id] = {
-        ...item,
-        children: [],
-      };
-    }
-
-    // 是否找到父节点，找到则塞进去
-    if (item.parentId && map[item.parentId]) {
-      map[item.parentId].children.push(map[item.id]);
-    }
-  });
-
-  // 保留根节点
-  const ret = Object.values(map).filter((item) => !item.parentId);
-  return ret;
 }
@@ -1,7 +1,6 @@
 import { action, computed, makeObservable, observable } from 'mobx';
 import { JSXElement } from '@babel/types';
 import {
-  array2object,
  ComponentPrototypeType,
  hasFileExtension,
  isString,
@@ -16,7 +15,7 @@ import {
  getJSXElementChildrenNames,
  namesToImportDeclarations,
  getBlockNameByFilename,
-  getPrivilegeCode,
+  prototype2importDeclarationData,
 } from '../helpers';
 import { DropMethod } from './drop-target';
 import { HistoryMessage, TangoHistory } from './history';
@@ -58,7 +57,7 @@ export interface IWorkspaceOptions {
  /**
   * 工作区文件变更事件
   */
-  onFilesChange?: (filenames: string[]) => void;
+  onFilesChange?: IWorkspace['onFilesChange'];
 }

 /**
@@ -95,7 +94,7 @@ export class Workspace extends EventTarget implements IWorkspace {

  /**
   * 本地区块 { [blockName]: filePath }
-   * FIXME: 修正类型 Record<string, TangoBlockModule>
+   * TODO: 废弃这个，不再支持
   */
  localBlocks: Record<string, string>;

@@ -123,17 +122,6 @@ export class Workspace extends EventTarget implements IWorkspace {
   */
  tangoConfigJson: TangoJsonFile;

-  /**
-   * appJson.json 文件
-   * FIXME: 是否保留 ???
-   */
-  appJson: TangoJsonFile;
-
-  /**
-   * 代码变更回调
-   */
-  onFilesChange?: (filenames: string[]) => void;
-
  /**
   * 绑定事件
   * TODO: 是否需要自己来管理 listeners，并及时进行 gc
@@ -169,15 +157,12 @@ export class Workspace extends EventTarget implements IWorkspace {
   * 获取页面列表
   */
  get pages() {
-    const appJsonPages = this.appJson?.getValue('pages');
-    const pagesMap = array2object(appJsonPages || [], (item) => item.path);
    const ret: IPageConfigData[] = [];
    this.routeModule?.routes.forEach((item) => {
-      const data = pagesMap[item.path];
      if (item.path !== '*') {
        ret.push({
-          ...data,
          path: item.path,
+          name: item.component,
        });
      }
    });
@@ -229,7 +214,11 @@ export class Workspace extends EventTarget implements IWorkspace {
    this.activeViewFile = '';
    this.files = new Map();
    this.isReady = false;
-    this.onFilesChange = options?.onFilesChange;
+
+    if (options?.onFilesChange) {
+      // 使用用户提供的 onFilesChange
+      this.onFilesChange = options.onFilesChange;
+    }

    if (options?.files) {
      this.addFiles(options.files);
@@ -389,10 +378,6 @@ export class Workspace extends EventTarget implements IWorkspace {
        module = new TangoJsonFile(this, props);
        this.tangoConfigJson = module;
        break;
-      case FileType.AppJson:
-        module = new TangoJsonFile(this, props);
-        this.appJson = module;
-        break;
      case FileType.Json:
        module = new TangoJsonFile(this, props);
        break;
@@ -516,12 +501,6 @@ export class Workspace extends EventTarget implements IWorkspace {
      this.routeModule.removeRoute(routePath).update();
      this.setActiveRoute(this.routeModule.routes[0]?.path || '/');
    }
-    // remove appJson page
-    this.appJson
-      ?.setValue('pages', (pages) => {
-        return (pages as IPageConfigData[]).filter((page) => page.path !== routePath);
-      })
-      .update();
    this.removeFile(filename);
  }

@@ -551,16 +530,6 @@ export class Workspace extends EventTarget implements IWorkspace {
   */
  addRoute(routeData: IPageConfigData, importFilePath: string) {
    this.routeModule?.addRoute(routeData.path, importFilePath).update();
-    this.appJson
-      ?.setValue('pages', (pages) => {
-        (pages as IPageConfigData[]).push({
-          name: routeData.name || routeData.path,
-          path: routeData.path,
-          privilegeCode: getPrivilegeCode(this.packageJson?.getValue('name'), routeData.path),
-        });
-        return pages;
-      })
-      .update();
  }

  /**
@@ -572,18 +541,6 @@ export class Workspace extends EventTarget implements IWorkspace {
    if (sourceRoutePath !== targetPageData.path) {
      this.routeModule?.updateRoute(sourceRoutePath, targetPageData.path).update();
    }
-    this.appJson
-      ?.setValue('pages', (pages) => {
-        for (const page of pages as IPageConfigData[]) {
-          if (page.path === sourceRoutePath) {
-            page.path = targetPageData.path;
-            page.name = targetPageData.name;
-            break;
-          }
-        }
-        return pages;
-      })
-      .update();
  }

  /**
@@ -695,12 +652,10 @@ export class Workspace extends EventTarget implements IWorkspace {
   */
  listServiceFunctions() {
    const ret: Record<string, object> = {};
-    Object.values(this.serviceModules).forEach((module) => {
+    Object.keys(this.serviceModules).forEach((moduleName) => {
+      const module = this.serviceModules[moduleName];
      Object.keys(module.serviceFunctions).forEach((name) => {
-        const serviceKey =
-          module.baseConfig.namespace !== 'index'
-            ? name
-            : [module.baseConfig.namespace, name].join('.');
+        const serviceKey = moduleName === 'index' ? name : [moduleName, name].join('.');
        ret[serviceKey] = module.serviceFunctions[name];
      });
    });
@@ -950,7 +905,7 @@ export class Workspace extends EventTarget implements IWorkspace {
    );

    importDeclarations.forEach((importDeclaration) => {
-      this.activeViewModule.updateImportSpecifiers(importDeclaration);
+      this.activeViewModule.updateImportSpecifiersLegacy(importDeclaration);
    });

    this.copyTempNodes.forEach((node) => {
@@ -1001,7 +956,11 @@ export class Workspace extends EventTarget implements IWorkspace {
    const sourcePrototype = this.getPrototype(sourceName);
    const newNode = prototype2jsxElement(sourcePrototype);
    const file = this.getNode(targetNodeId).file;
-    file.insertChild(targetNodeId, newNode, 'last', sourcePrototype).update();
+    const { source, specifiers } = prototype2importDeclarationData(sourcePrototype, file.filename);
+    file
+      .insertChild(targetNodeId, newNode, 'last')
+      .addImportSpecifiers(source, specifiers)
+      .update();
    this.history.push({
      message: HistoryMessage.InsertNode,
      data: {
@@ -1021,7 +980,8 @@ export class Workspace extends EventTarget implements IWorkspace {
    const sourcePrototype = this.getPrototype(sourceName);
    const newNode = prototype2jsxElement(sourcePrototype);
    const file = this.getNode(targetNodeId).file;
-    file.replaceNode(targetNodeId, newNode, sourcePrototype).update();
+    const { source, specifiers } = prototype2importDeclarationData(sourcePrototype, file.filename);
+    file.replaceNode(targetNodeId, newNode).addImportSpecifiers(source, specifiers).update();
    this.history.push({
      message: HistoryMessage.ReplaceNode,
      data: {
@@ -1039,7 +999,14 @@ export class Workspace extends EventTarget implements IWorkspace {
    if (insertedPrototype) {
      const newNode = prototype2jsxElement(insertedPrototype);
      const file = this.selectSource.file;
-      file.insertChild(this.selectSource.first.id, newNode, 'last', insertedPrototype).update();
+      const { source, specifiers } = prototype2importDeclarationData(
+        insertedPrototype,
+        file.filename,
+      );
+      file
+        .insertChild(this.selectSource.first.id, newNode, 'last')
+        .addImportSpecifiers(source, specifiers)
+        .update();
      this.history.push({
        message: HistoryMessage.InsertNode,
        data: {
@@ -1095,30 +1062,40 @@ export class Workspace extends EventTarget implements IWorkspace {
    const targetFile = dropTarget.node?.file;
    const sourceFile = dragSource.node?.file;

+    // dragSourcePrototype to importDeclarations
+    const { source, specifiers } = prototype2importDeclarationData(
+      dragSourcePrototype,
+      targetFile.filename,
+    );
+
    let isValidOperation = true;
    switch (dropTarget.method) {
      // 直接往目标节点的 children 里添加一个节点
      case DropMethod.InsertChild: {
-        targetFile.insertChild(dropTarget.id, newNode, 'last', dragSourcePrototype);
+        targetFile
+          .insertChild(dropTarget.id, newNode, 'last')
+          .addImportSpecifiers(source, specifiers);
        break;
      }
      case DropMethod.InsertFirstChild: {
-        targetFile.insertChild(dropTarget.id, newNode, 'first', dragSourcePrototype);
+        targetFile
+          .insertChild(dropTarget.id, newNode, 'first')
+          .addImportSpecifiers(source, specifiers);
        break;
      }
      // 往目标节点的后边插入一个节点
      case DropMethod.InsertAfter: {
-        targetFile.insertAfter(dropTarget.id, newNode, dragSourcePrototype);
+        targetFile.insertAfter(dropTarget.id, newNode).addImportSpecifiers(source, specifiers);
        break;
      }
      // 往目标节点的前方插入一个节点
      case DropMethod.InsertBefore: {
-        targetFile.insertBefore(dropTarget.id, newNode, dragSourcePrototype);
+        targetFile.insertBefore(dropTarget.id, newNode).addImportSpecifiers(source, specifiers);
        break;
      }
      // 替换目标节点
      case DropMethod.ReplaceNode: {
-        targetFile.replaceNode(dropTarget.id, newNode, dragSourcePrototype);
+        targetFile.replaceNode(dropTarget.id, newNode).addImportSpecifiers(source, specifiers);
        break;
      }
      default:
@@ -1154,6 +1131,10 @@ export class Workspace extends EventTarget implements IWorkspace {
    }
  }

+  onFilesChange(filenams: string[]) {
+    // do nothing
+  }
+
  /**
   * 刷新目标文件
   * @param filenames
@@ -1167,7 +1148,6 @@ export class Workspace extends EventTarget implements IWorkspace {
        },
      }),
    );
-    this.onFilesChange?.(filenames);
  }

  /**
@@ -10,11 +10,15 @@ export enum FileType {
  Module = 'module',
  StoreEntryModule = 'storeEntryModule',
  RouteModule = 'routeModule',
-  BlockEntryModule = 'blockEntryModule',
  ServiceModule = 'serviceModule',
  StoreModule = 'storeModule',

+  // 区块入口文件
+  BlockEntryModule = 'blockEntryModule',
+
+  // jsx 类型视图文件
  JsxViewModule = 'jsxViewModule',
+  // json 类型视图文件
  JsonViewModule = 'jsonViewModule',

  // 非 js 文件
@@ -100,7 +104,6 @@ export interface IImportSpecifierData {

 /**
 * 解析的导入语句数据
- * FIXME: 需要考虑到有两行重复的语句的情况
 */
 export type ImportDeclarationDataType = Record<string, IImportSpecifierData[]>;

@@ -193,7 +196,7 @@ export interface IPageConfigData {
   */
  name?: string;
  /**
-   * PMS 权限码
+   * 权限码
   */
  privilegeCode?: string;
 }
@@ -3,6 +3,56 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [0.5.13](https://github.com/netease/tango/compare/@music163/tango-designer@0.5.12...@music163/tango-designer@0.5.13) (2023-12-04)
+
+### Bug Fixes
+
+- add filesFormatter to sandbox & fix update props with imports ([#71](https://github.com/netease/tango/issues/71)) ([138cbe9](https://github.com/netease/tango/commit/138cbe9b203b370aff42c1ae8086d69edacf35e9))
+
+## [0.5.12](https://github.com/netease/tango/compare/@music163/tango-designer@0.5.11...@music163/tango-designer@0.5.12) (2023-11-30)
+
+### Bug Fixes
+
+- fix render components tree ([76a5a2c](https://github.com/netease/tango/commit/76a5a2c65920bc42b019cd1f32a3cacd0d888638))
+
+## [0.5.11](https://github.com/netease/tango/compare/@music163/tango-designer@0.5.10...@music163/tango-designer@0.5.11) (2023-11-29)
+
+**Note:** Version bump only for package @music163/tango-designer
+
+## [0.5.10](https://github.com/netease/tango/compare/@music163/tango-designer@0.5.9...@music163/tango-designer@0.5.10) (2023-11-28)
+
+### Bug Fixes
+
+- update default theme ([14cd4c5](https://github.com/netease/tango/commit/14cd4c54a1e5eed834d01921e186bdba9bbe7922))
+
+## [0.5.9](https://github.com/netease/tango/compare/@music163/tango-designer@0.5.8...@music163/tango-designer@0.5.9) (2023-11-28)
+
+### Bug Fixes
+
+- update theme ([2550411](https://github.com/netease/tango/commit/2550411c1c93037931d44aa9f7822ffe8caa900b))
+
+## [0.5.8](https://github.com/netease/tango/compare/@music163/tango-designer@0.5.7...@music163/tango-designer@0.5.8) (2023-11-27)
+
+### Bug Fixes
+
+- event setter ([588861f](https://github.com/netease/tango/commit/588861f6492b45954e29ceed950567781b822492))
+
+## [0.5.7](https://github.com/netease/tango/compare/@music163/tango-designer@0.5.6...@music163/tango-designer@0.5.7) (2023-11-23)
+
+### Bug Fixes
+
+- update varTreeNode style ([#69](https://github.com/netease/tango/issues/69)) ([f604996](https://github.com/netease/tango/commit/f604996e56c9e4d58ff7f80cd98c3753986f081f))
+
+## [0.5.6](https://github.com/netease/tango/compare/@music163/tango-designer@0.5.5...@music163/tango-designer@0.5.6) (2023-11-23)
+
+**Note:** Version bump only for package @music163/tango-designer
+
+## [0.5.5](https://github.com/netease/tango/compare/@music163/tango-designer@0.5.4...@music163/tango-designer@0.5.5) (2023-11-20)
+
+### Bug Fixes
+
+- pass down sandbox props ([d6ffb50](https://github.com/netease/tango/commit/d6ffb50e85573cb17ee52a797b84de5e6cedb044))
+
 ## [0.5.4](https://github.com/netease/tango/compare/@music163/tango-designer@0.5.3...@music163/tango-designer@0.5.4) (2023-11-20)

 ### Bug Fixes
@@ -1,6 +1,6 @@
 {
  "name": "@music163/tango-designer",
-  "version": "0.5.4",
+  "version": "0.5.13",
  "description": "lowcode designer",
  "keywords": [
    "react"
@@ -33,12 +33,12 @@
  "dependencies": {
    "@ant-design/icons": "^4.8.0",
    "@music163/request": "^0.1.2",
-    "@music163/tango-context": "^0.2.6",
-    "@music163/tango-core": "^0.2.5",
-    "@music163/tango-helpers": "^0.1.7",
-    "@music163/tango-sandbox": "^0.1.10",
-    "@music163/tango-setting-form": "^0.2.9",
-    "@music163/tango-ui": "^0.1.10",
+    "@music163/tango-context": "^0.2.11",
+    "@music163/tango-core": "^0.2.10",
+    "@music163/tango-helpers": "^0.1.8",
+    "@music163/tango-sandbox": "^0.1.15",
+    "@music163/tango-setting-form": "^0.2.15",
+    "@music163/tango-ui": "^0.1.12",
    "antd": "^4.24.2",
    "cash-dom": "^8.1.2",
    "classnames": "^2.3.2",
@@ -317,6 +317,10 @@ const varTreeStyle = css`
    font-family: Consolas, Menlo, Courier, monospace;
  }

+  .ant-tree-node-content-wrapper.ant-tree-node-content-wrapper-normal {
+    width: calc(100% - 50px);
+  }
+
  .ant-tree .ant-tree-treenode {
    padding: 0;
  }
@@ -36,6 +36,8 @@ export function DesignerPanel(props: DesignerPanelProps) {
          height="48px"
          bg="colors.custom.topNavBg"
          color="colors.custom.topNavColor"
+          borderBottom="solid"
+          borderColor="colors.custom.topNavBorderColor"
          className="DesignerPanelHeader"
        >
          <Box display="flex" alignItems="center">
@@ -3,9 +3,9 @@ import { SystemProvider, extendTheme } from 'coral-system';
 import { ConfigProvider } from 'antd';
 import { TangoEngineProvider, ITangoEngineContext } from '@music163/tango-context';
 import { createFromIconfontCN } from '@ant-design/icons';
-import { DesignerProvider, IDesignerContext } from './context';
-import { theme as baseTheme } from './theme';
 import zhCN from 'antd/lib/locale/zh_CN';
+import { DesignerProvider, IDesignerContext } from './context';
+import defaultTheme from './themes/default';

 export interface DesignerProps extends IDesignerContext, ITangoEngineContext {
  /**
@@ -34,7 +34,7 @@ export function Designer(props: DesignerProps) {
    iconfontScriptUrl = '//at.alicdn.com/t/c/font_2891794_lzc7rtwuzf.js',
    children,
  } = props;
-  const theme = useMemo(() => extendTheme(themeProp, baseTheme), [themeProp]);
+  const theme = useMemo(() => extendTheme(themeProp, defaultTheme), [themeProp]);
  useEffect(() => {
    createFromIconfontCN({
      scriptUrl: iconfontScriptUrl,
@@ -12,6 +12,7 @@ export * from './sidebar';
 export * from './toolbar';
 export * from './selection-menu';
 export * from './widgets';
+export * from './themes';

 export { register as registerSetter } from '@music163/tango-setting-form';

@@ -17,6 +17,12 @@ const navigatorStyle = css`

  .navigatorInput {
    flex: 1;
+    border-color: transparent;
+    background-color: var(--tango-colors-fill2);
+
+    &:focus {
+      background-color: #fff;
+    }
  }
 `;

@@ -68,7 +74,7 @@ export class Navigator extends React.Component<NavigatorProps, NavigatorState> {
        className="navigator"
        bg="white"
        px="l"
-        py="4px"
+        py="m"
        borderBottom="solid"
        borderBottomColor="line.normal"
        css={navigatorStyle}
@@ -23,6 +23,12 @@ export type SandboxProps = Omit<CodeSandboxProps, 'files' | 'eventHandlers' | 'o
   * tangoConfigJson 处理器
   */
  configFormatter?: IMergeTangoConfigJsonConfig['formatter'];
+  /**
+   * 文件格式化器
+   * @param files 沙箱文件列表
+   * @returns 修改后的文件列表
+   */
+  filesFormatter?: (files: CodeSandboxProps['files']) => CodeSandboxProps['files'];
  sandboxType?: 'design' | 'preview';
  mode?: 'single' | 'combined';
  injectScript?: string;
@@ -41,6 +47,7 @@ const LANDING_PAGE_PATH = '/__background_landing_page__';
 function useSandbox({
  isPreview: isPreviewProp,
  configFormatter,
+  filesFormatter,
  onViewChange,
  onMessage: onMessageProp,
  onLoad: onLoadProp,
@@ -79,7 +86,12 @@ function useSandbox({
    prev[filename] = { code };
    return prev;
  }, {});
+
  files = fixSandboxFiles(files, workspace.entry);
+  if (filesFormatter) {
+    // 支持用户对传入的文件进行修改
+    files = filesFormatter(files);
+  }

  const onMessage = (data: any) => onMessageProp && onMessageProp(data, getSandboxConfig());
  const onLoad = () => onLoadProp && onLoadProp(getSandboxConfig());
@@ -119,6 +131,7 @@ const PreviewSandbox = observer(
      startRoute,
      injectScript,
      sandboxType: 'preview',
+      ...rest,
    });

    return (
@@ -166,6 +179,7 @@ const DesignSandbox = observer(
      startRoute,
      injectScript,
      sandboxType: 'design',
+      ...rest,
    });

    return (
@@ -411,6 +425,7 @@ function fixSandboxFiles(files: Record<string, { code: string }>, entry = '/src/
      `,
    };
  }
+
  return files;
 }

@@ -4,7 +4,7 @@ import { AutoComplete } from 'antd';
 import { ActionSelect } from '@music163/tango-ui';
 import { FormItemComponentProps } from '@music163/tango-setting-form';
 import { useWorkspace, useWorkspaceData } from '@music163/tango-context';
-import { ExpressionModal } from './expression-setter';
+import { ExpressionModal, getWrappedExpressionCode } from './expression-setter';

 enum EventAction {
  NoAction = 'noAction',
@@ -47,8 +47,9 @@ export function EventSetter(props: EventSetterProps) {

  const handleChange = useCallback<FormItemComponentProps['onChange']>(
    (nextValue: any, ...args) => {
-      if (nextValue !== value) {
-        onChange(nextValue, ...args);
+      const ret = getWrappedExpressionCode(nextValue);
+      if (ret !== value) {
+        onChange(ret, ...args);
      }
    },
    [onChange, value],
@@ -83,7 +84,7 @@ export function EventSetter(props: EventSetterProps) {
        onCancel={() => setExpModalVisible(false)}
        onOk={(nextValue) => {
          setExpModalVisible(false);
-          handleChange(`{${nextValue}}`);
+          handleChange(nextValue);
        }}
        dataSource={actionVariables}
      />
@@ -34,6 +34,23 @@ export const jsonValueValidate = (value: string) => {
  }
 };

+/**
+ * 返回 `{}` 包裹后的表达式代码
+ * @param code 原始代码
+ * @returns
+ */
+export function getWrappedExpressionCode(code: string) {
+  let ret;
+  if (!code) {
+    // do nothing
+  } else if (isWrappedByExpressionContainer(code)) {
+    ret = code;
+  } else {
+    ret = `{${code}}`;
+  }
+  return ret;
+}
+
 const suffixStyle = css`
  .anticon-close-circle {
    color: rgba(0, 0, 0, 0.25);
@@ -79,15 +96,7 @@ export function ExpressionSetter(props: ExpressionSetterProps) {
        return;
      }

-      let ret;
-
-      if (!code) {
-        // do nothing
-      } else if (isWrappedByExpressionContainer(code)) {
-        ret = code;
-      } else {
-        ret = `{${code}}`;
-      }
+      const ret = getWrappedExpressionCode(code);

      if (ret === valueProp) {
        return;
@@ -138,7 +147,7 @@ export function ExpressionSetter(props: ExpressionSetterProps) {
        value={inputValue}
        onCancel={() => off()}
        onOk={(value) => {
-          onChange(value);
+          change(value);
          off();
        }}
      />
@@ -148,6 +148,12 @@ export const ComponentsTree: React.FC<ComponentsTreeProps> = observer(
      setSelectedKeys(workspace.selectSource.selected.map((item) => item.id));
    }, [workspace.selectSource.selected]);

+    useEffect(() => {
+      setExpandedKeys(getNodeKeys(nodesTree));
+      // nodeTree 更新后重新计算expandKeys
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [nodesTree?.[0]?.id]);
+
    if (!nodesTree.length) {
      return (
        <Box>
@@ -156,12 +162,6 @@ export const ComponentsTree: React.FC<ComponentsTreeProps> = observer(
      );
    }

-    useEffect(() => {
-      setExpandedKeys(getNodeKeys(nodesTree));
-      // nodeTree 更新后重新计算expandKeys
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [nodesTree?.[0]?.id]);
-
    return (
      <Box css={outlineStyle}>
        <Tree
@@ -230,4 +230,4 @@ export const ComponentsTree: React.FC<ComponentsTreeProps> = observer(
      </Box>
    );
  },
-);
+);
@@ -30,7 +30,6 @@ export const VariablePanel = observer(

    return (
      <Panel
-        shape="solid"
        className="ModelView"
        height={wrapperHeight}
        title="视图模型与变量管理"
@@ -1,6 +1,6 @@
 import { extendTheme } from 'coral-system';

-export const theme = extendTheme({
+export default extendTheme({
  colors: {
    primary: {
      10: '#e8f3ff',
@@ -27,11 +27,16 @@ export const theme = extendTheme({
    custom: {
      topNavBg: '#222',
      topNavColor: '#fff',
+      topNavBorderColor: '#222',
+      toolbarDividerColor: 'gray.60',
      toolbarButtonBg: 'rgba(223, 223, 223, 0.08)',
      toolbarButtonBgHover: '#4080ff',
-      toolbarButtonTextColor: '#f5f5f5',
+      toolbarButtonBgDisabled: 'rgba(223,223,223, 0.08)',
+      toolbarButtonBgActive: '#4080ff',
+      toolbarButtonTextColor: '#FFF',
      toolbarButtonTextColorHover: '#FFF',
-      toolbarButtonTextColorDisabled: '#bfbfbf',
+      toolbarButtonTextColorDisabled: 'hsla(0,0%,100%,0.3)',
+      toolbarButtonTextColorActive: '#fff',
      sidebarBg: '#fff',
      sidebarExpandBg: '#fff',
      sidebarItemActiveBg: '#f2f3f5',
@@ -0,0 +1,2 @@
+export { default as themeDefault } from './default';
+export { default as themeLight } from './light';
@@ -0,0 +1,25 @@
+import { extendTheme } from 'coral-system';
+
+export default extendTheme({
+  colors: {
+    custom: {
+      topNavBg: '#FFF',
+      topNavColor: '#333',
+      topNavBorderColor: 'rgb(229,230,235)',
+      toolbarDividerColor: 'rgb(229,230,235)',
+      toolbarButtonBg: 'rgb(242,243,245)',
+      toolbarButtonBgHover: 'rgb(229,230,235)',
+      toolbarButtonBgDisabled: 'rgb(247,248,250)',
+      toolbarButtonBgActive: 'colors.brand',
+      toolbarButtonTextColor: 'colors.text2',
+      toolbarButtonTextColorHover: 'colors.text2',
+      toolbarButtonTextColorDisabled: 'colors.text4',
+      toolbarButtonTextColorActive: '#FFF',
+      sidebarBg: '#fff',
+      sidebarExpandBg: '#fff',
+      sidebarItemActiveBg: '#f2f3f5',
+      sidebarItemHoverBg: '#f2f3f5',
+      viewportBg: '#f0f2f5',
+    },
+  },
+});
@@ -10,7 +10,7 @@ export const HistoryTool = observer(() => {
      <ToggleButton
        shape="ghost"
        disabled={!workspace.history.couldBack || workspace.history.index === 0}
-        tip="撤销"
+        tooltip="撤销"
        onClick={() => {
          workspace.history.back();
          workspace.selectSource.clear();
@@ -21,7 +21,7 @@ export const HistoryTool = observer(() => {
      <ToggleButton
        shape="ghost"
        disabled={!workspace.history.couldForward}
-        tip="重做"
+        tooltip="重做"
        onClick={() => {
          workspace.history.forward();
          workspace.selectSource.clear();
@@ -17,7 +17,7 @@ export const PreviewTool = observer(() => {
          designer.setActiveView('design');
        }
      }}
-      tip="预览"
+      tooltip="预览"
    >
      <EyeOutlined />
    </ToggleButton>
@@ -71,6 +71,7 @@ function PageSelect({ value, onSelect, onRemove, onUpdate, onCopy, options }: Pa
          }}
        />
      }
+      icon={<FileOutlined />}
    >
      {current?.name || current?.label || value}
    </ToggleButton>
@@ -81,7 +81,7 @@ function ToolbarItem({ placement, widgetProps, children }: ToolbarItemProps) {
 }

 function Separator() {
-  return <Box className="Separator" width={1} height={16} bg="gray.60" />;
+  return <Box className="Separator" width={1} height={16} bg="colors.custom.toolbarDividerColor" />;
 }

 Toolbar.Item = ToolbarItem;
@@ -17,7 +17,7 @@ export const ViewportSwitchTool = observer(() => {
        onClick={() => {
          designer.setSimulator('desktop');
        }}
-        tip="桌面视图"
+        tooltip="桌面视图"
      >
        <DesktopOutlined />
      </ToggleButton>
@@ -27,7 +27,7 @@ export const ViewportSwitchTool = observer(() => {
        onClick={() => {
          designer.setSimulator('phone');
        }}
-        tip="手机视图"
+        tooltip="手机视图"
      >
        <MobileOutlined />
      </ToggleButton>
@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [0.1.8](https://github.com/netease/tango/compare/@music163/tango-helpers@0.1.7...@music163/tango-helpers@0.1.8) (2023-11-23)
+
+### Bug Fixes
+
+- refactor update import specifiers ([#68](https://github.com/netease/tango/issues/68)) ([558f2cd](https://github.com/netease/tango/commit/558f2cd0a692c6bbc866d08250d25e2619af183f))
+
 ## [0.1.7](https://github.com/netease/tango/compare/@music163/tango-helpers@0.1.6...@music163/tango-helpers@0.1.7) (2023-11-20)

 ### Bug Fixes
@@ -1,6 +1,6 @@
 {
  "name": "@music163/tango-helpers",
-  "version": "0.1.7",
+  "version": "0.1.8",
  "description": "Shared types, helpers, and hooks of tango-apps",
  "keywords": [
    "shared",
@@ -33,94 +33,11 @@ export type OptionType = {
  relatedImports?: string[];
 };

-type TangoSchemaTreeNodePropValueBaseType = {
-  value: string | number | boolean;
-  rawCode: string;
-};
-
-type TangoSchemaTreeNodePropValueSlotType = {
-  type: 'Slot';
-  value: TangoSchemaTreeNodeType;
-};
-
-type TangoSchemaTreeNodePropValueType =
-  | string
-  | number
-  | boolean
-  | object
-  | TangoSchemaTreeNodePropValueBaseType
-  | TangoSchemaTreeNodePropValueSlotType;
-
-export type TangoSchemaTreeNodeType = {
-  /**
-   * 节点唯一标识
-   */
-  id?: string;
-  /**
-   * 节点组件名
-   */
-  component?: string;
-  /**
-   * 节点属性集合
-   */
-  props?: Record<string, TangoSchemaTreeNodePropValueType>;
-  /**
-   * 节点是否渲染
-   * TODO: 支持变量表达式
-   */
-  isRender?: boolean;
-  /**
-   * 子节点
-   */
-  children?: TangoSchemaTreeNodeType[];
-};
-
 /**
 * 服务函数类型
 */
 export type ServiceFunctionType = (...args: any[]) => Promise<any>;

-export type TangoRemoteServicesType = {
-  /**
-   * 图片服务
-   */
-  ImageService?: {
-    listMy: ServiceFunctionType;
-    listFav: ServiceFunctionType;
-    listPub: ServiceFunctionType;
-  };
-  /**
-   * 数据源服务
-   */
-  OxService?: {
-    listApp: ServiceFunctionType;
-    listBranch: ServiceFunctionType;
-    listApi: ServiceFunctionType;
-    listApiByPage: ServiceFunctionType;
-  };
-  /**
-   * 依赖面板服务
-   */
-  DependencyService?: {
-    listBizDependencies: ServiceFunctionType;
-    listBaseDependencies: ServiceFunctionType;
-    listPackageVersions: ServiceFunctionType;
-  };
-  RiddleService?: {
-    listBlock: ServiceFunctionType;
-    postBlock: ServiceFunctionType;
-    updateBlock: ServiceFunctionType;
-  };
-  /**
-   * AIGC 服务
-   */
-  GptService?: {
-    codeCompletion?: ServiceFunctionType;
-    textCompletion?: ServiceFunctionType;
-    textEmbedding?: ServiceFunctionType;
-  };
-};
-
 export type RelatedDependencyType = { name: string; version: string };

 /**
@@ -163,63 +80,3 @@ export type SetterOnChangeDetailType = {
  relatedImports?: string[];
  isRawCode?: boolean;
 };
-
-/**
- * 智能向导生成类型
- */
-export enum WizardType {
-  NEW = 'new',
-  REPLACE = 'replace',
-  PREVIEW = 'preview',
-}
-
-/**
- * 智能向导OX模型定义
- */
-export interface IOXModel {
-  key: string; // 唯一标识 (字段名加哈希值)
-  name: string; // 字段名
-  description: string; // 字段描述
-  basicDataModelName: 'List' | 'Integer' | 'int' | 'String' | 'long' | 'boolean' | 'ENUM'; // 字段类型
-  dataModelFieldDTOList: IOXModel[];
-  type: 'ARRAY' | 'BASIC' | 'CLASS' | 'GENERIC' | 'ENUM' | 'MAP';
-  extra: IOXModel;
-  extras: IOXModel[];
-  linkedDataModelName: String;
-  linkedModelDTO: {
-    type: 'ARRAY' | 'BASIC' | 'CLASS' | 'GENERIC' | 'ENUM' | 'MAP';
-    fieldDTOList: IOXModel[];
-  };
-  paramType: 'RequestParam' | 'JsonRequestParam'; // 请求传参类型
-}
-
-/**
- * 通用智能向导
- */
-type ChildType = Array<Record<string, any>>;
-
-export type IDataProviderFormProps = {
-  loadData: string;
-  payload: Record<string, any>;
-  model: string;
-  formatter: (res: any) => any;
-};
-
-export interface CommonGuideFormValueType {
-  fatherComponentName: string;
-  fatherProps: Record<string, any>;
-  childComponentName: string;
-  children: ChildType;
-  dataProviderProps: IDataProviderFormProps;
-  childPropsConfig: {
-    // 字段名对应属性名
-    fieldName: string;
-    // 字段注释对应属性名
-    fieldDescriptionName: string;
-    // 字段值类型对应属性类型 (暂时用不到)
-    fieldType?: string;
-  };
-}
-/**
- * end
- */
@@ -15,8 +15,8 @@ export type PartialRecord<K extends keyof any, T> = {
  [P in K]?: T;
 };

-export type ReactComponentProps = {
+export interface ReactComponentProps {
  children?: React.ReactNode;
  style?: React.CSSProperties;
  className?: string;
-};
+}
@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [0.1.15](https://github.com/netease/tango/compare/@music163/tango-sandbox@0.1.14...@music163/tango-sandbox@0.1.15) (2023-12-04)
+
+**Note:** Version bump only for package @music163/tango-sandbox
+
+## [0.1.14](https://github.com/netease/tango/compare/@music163/tango-sandbox@0.1.13...@music163/tango-sandbox@0.1.14) (2023-11-30)
+
+**Note:** Version bump only for package @music163/tango-sandbox
+
+## [0.1.13](https://github.com/netease/tango/compare/@music163/tango-sandbox@0.1.12...@music163/tango-sandbox@0.1.13) (2023-11-29)
+
+**Note:** Version bump only for package @music163/tango-sandbox
+
+## [0.1.12](https://github.com/netease/tango/compare/@music163/tango-sandbox@0.1.11...@music163/tango-sandbox@0.1.12) (2023-11-27)
+
+**Note:** Version bump only for package @music163/tango-sandbox
+
+## [0.1.11](https://github.com/netease/tango/compare/@music163/tango-sandbox@0.1.10...@music163/tango-sandbox@0.1.11) (2023-11-23)
+
+**Note:** Version bump only for package @music163/tango-sandbox
+
 ## [0.1.10](https://github.com/netease/tango/compare/@music163/tango-sandbox@0.1.9...@music163/tango-sandbox@0.1.10) (2023-11-20)

 **Note:** Version bump only for package @music163/tango-sandbox
@@ -1,6 +1,6 @@
 {
  "name": "@music163/tango-sandbox",
-  "version": "0.1.10",
+  "version": "0.1.15",
  "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": "^0.2.5",
-    "@music163/tango-helpers": "^0.1.7",
+    "@music163/tango-core": "^0.2.10",
+    "@music163/tango-helpers": "^0.1.8",
    "crypto-js": "^4.1.1",
    "lodash.isequal": "4.5.0",
    "react-frame-component": "^5.2.4"
@@ -3,6 +3,35 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [0.2.15](https://github.com/netease/tango/compare/@music163/tango-setting-form@0.2.14...@music163/tango-setting-form@0.2.15) (2023-12-04)
+
+**Note:** Version bump only for package @music163/tango-setting-form
+
+## [0.2.14](https://github.com/netease/tango/compare/@music163/tango-setting-form@0.2.13...@music163/tango-setting-form@0.2.14) (2023-11-30)
+
+**Note:** Version bump only for package @music163/tango-setting-form
+
+## [0.2.13](https://github.com/netease/tango/compare/@music163/tango-setting-form@0.2.12...@music163/tango-setting-form@0.2.13) (2023-11-29)
+
+### Bug Fixes
+
+- workspace onFilesChange ([#70](https://github.com/netease/tango/issues/70)) ([accd826](https://github.com/netease/tango/commit/accd8263764c811ea8175a9cd341fc6fa6c75967))
+
+## [0.2.12](https://github.com/netease/tango/compare/@music163/tango-setting-form@0.2.11...@music163/tango-setting-form@0.2.12) (2023-11-28)
+
+### Bug Fixes
+
+- update theme ([2550411](https://github.com/netease/tango/commit/2550411c1c93037931d44aa9f7822ffe8caa900b))
+- update type ([1db5294](https://github.com/netease/tango/commit/1db52948dbdc28f4533eb968f7da1bf6d16173d4))
+
+## [0.2.11](https://github.com/netease/tango/compare/@music163/tango-setting-form@0.2.10...@music163/tango-setting-form@0.2.11) (2023-11-27)
+
+**Note:** Version bump only for package @music163/tango-setting-form
+
+## [0.2.10](https://github.com/netease/tango/compare/@music163/tango-setting-form@0.2.9...@music163/tango-setting-form@0.2.10) (2023-11-23)
+
+**Note:** Version bump only for package @music163/tango-setting-form
+
 ## [0.2.9](https://github.com/netease/tango/compare/@music163/tango-setting-form@0.2.8...@music163/tango-setting-form@0.2.9) (2023-11-20)

 ### Bug Fixes
@@ -1,6 +1,6 @@
 {
  "name": "@music163/tango-setting-form",
-  "version": "0.2.9",
+  "version": "0.2.15",
  "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": "^0.2.5",
-    "@music163/tango-helpers": "^0.1.7",
-    "@music163/tango-ui": "^0.1.10",
+    "@music163/tango-core": "^0.2.10",
+    "@music163/tango-helpers": "^0.1.8",
+    "@music163/tango-ui": "^0.1.12",
    "antd": "^4.24.2",
    "coral-system": "^1.0.5",
    "mobx": "6.9.0",
@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormItemComponentProps } from './form-item';

-// FIXME: 内置 ExpressionSetter，默认全部 fallback 到此 setter
+// TODO: 内置基本的 ExpressionSetter，默认全部 fallback 到此 setter
 export function ExpressionSetter(props: FormItemComponentProps<string>) {
  return <div>exp setter</div>;
 }
@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [0.1.12](https://github.com/netease/tango/compare/@music163/tango-ui@0.1.11...@music163/tango-ui@0.1.12) (2023-11-28)
+
+### Bug Fixes
+
+- update theme ([2550411](https://github.com/netease/tango/commit/2550411c1c93037931d44aa9f7822ffe8caa900b))
+
+## [0.1.11](https://github.com/netease/tango/compare/@music163/tango-ui@0.1.10...@music163/tango-ui@0.1.11) (2023-11-23)
+
+**Note:** Version bump only for package @music163/tango-ui
+
 ## [0.1.10](https://github.com/netease/tango/compare/@music163/tango-ui@0.1.9...@music163/tango-ui@0.1.10) (2023-11-20)

 **Note:** Version bump only for package @music163/tango-ui
@@ -1,6 +1,6 @@
 {
  "name": "@music163/tango-ui",
-  "version": "0.1.10",
+  "version": "0.1.12",
  "description": "ui widgets of tango",
  "keywords": [
    "react",
@@ -38,7 +38,7 @@
    "@codemirror/lang-javascript": "^6.2.1",
    "@codemirror/lint": "^6.4.2",
    "@codemirror/search": "^6.5.4",
-    "@music163/tango-helpers": "^0.1.7",
+    "@music163/tango-helpers": "^0.1.8",
    "@uiw/react-codemirror": "^4.21.20",
    "antd": "^4.24.2",
    "antd-easy-form": "^1.1.3",
@@ -1,6 +1,6 @@
 import React from 'react';
 import cx from 'classnames';
-import { css, Button, HTMLCoralProps } from 'coral-system';
+import { css, Button, HTMLCoralProps, Box } from 'coral-system';
 import { DropDownProps, Dropdown, MenuProps, Tooltip, TooltipProps } from 'antd';
 import { DownOutlined } from '@ant-design/icons';

@@ -26,19 +26,11 @@ const buttonStyle = css`
  &.size-m {
    height: 32px;
    font-size: 14px;
-
-    .anticon {
-      font-size: 16px;
-    }
  }

  &.size-l {
    height: 40px;
    font-size: 16px;
-
-    .anticon {
-      font-size: 20px;
-    }
  }

  &.size-xl {
@@ -106,10 +98,12 @@ const buttonStyle = css`

    &.disabled {
      color: var(--tango-colors-custom-toolbarButtonTextColorDisabled, rgb(201, 205, 212));
+      background-color: var(--tango-colors-custom-toolbarButtonBgDisabled, rgb(247, 248, 250));
    }

    &.selected {
-      background-color: var(--tango-colors-brand);
+      color: var(--tango-colors-custom-toolbarButtonTextColorActive);
+      background-color: var(--tango-colors-custom-toolbarButtonBgActive);
    }
  }

@@ -124,6 +118,7 @@ export interface ToggleButtonProps extends Omit<HTMLCoralProps<'button'>, 'type'
  type?: 'normal' | 'primary';
  selected?: boolean;
  disabled?: boolean;
+  icon?: React.ReactNode;
  /**
   * 提示文案
   * @deprecated 使用 tooltip 代替
@@ -167,6 +162,7 @@ export function ToggleButton(props: ToggleButtonProps) {
    disabled,
    selected,
    children,
+    icon,
    tip,
    tooltip = tip,
    tooltipPlacement = 'bottom',
@@ -189,7 +185,14 @@ export function ToggleButton(props: ToggleButtonProps) {

  let btn = (
    <Button css={buttonStyle} className={clazz} type="button" {...rest}>
-      {children}
+      <Box as="span">
+        {icon && (
+          <Box as="span" className="buttonIcon" mr="s">
+            {icon}
+          </Box>
+        )}
+        {children}
+      </Box>
      {showDropdown ? <DownOutlined /> : null}
    </Button>
  );
Author	SHA1	Message	Date
wwsun	e35ff792a0	chore(release): publish - @music163/tango-context@0.2.11 - @music163/tango-core@0.2.10 - @music163/tango-designer@0.5.13 - @music163/tango-sandbox@0.1.15 - @music163/tango-setting-form@0.2.15	2023-12-04 12:54:30 +08:00
Wells	138cbe9b20	fix: add filesFormatter to sandbox & fix update props with imports (#71 ) * fix: update types * fix: add filesFormatter to sandbox * fix: update node attributes with imports --------- Co-authored-by: wwsun <ww.sww@outlook.com>	2023-12-04 12:52:10 +08:00
wwsun	979aa34259	chore(release): publish - @music163/tango-context@0.2.10 - @music163/tango-core@0.2.9 - @music163/tango-designer@0.5.12 - @music163/tango-sandbox@0.1.14 - @music163/tango-setting-form@0.2.14	2023-11-30 15:46:50 +08:00
wwsun	76a5a2c659	fix: fix render components tree	2023-11-30 15:44:42 +08:00
wwsun	53ebd89c9a	chore(release): publish - @music163/tango-context@0.2.9 - @music163/tango-core@0.2.8 - @music163/tango-designer@0.5.11 - @music163/tango-sandbox@0.1.13 - @music163/tango-setting-form@0.2.13	2023-11-29 14:50:40 +08:00
wwsun	3980810502	docs: update milestone	2023-11-29 14:47:40 +08:00
Wells	accd826376	fix: workspace onFilesChange (#70 ) * fix: workspace onFilesChange * fix: remove appJson parse logic * style: remove comments --------- Co-authored-by: wwsun <ww.sww@outlook.com>	2023-11-29 14:43:06 +08:00
wwsun	5ca1118f88	chore(release): publish - @music163/tango-designer@0.5.10	2023-11-28 14:55:20 +08:00
wwsun	14cd4c54a1	fix: update default theme	2023-11-28 14:51:10 +08:00
wwsun	7f46137c56	chore(release): publish - @music163/tango-designer@0.5.9 - @music163/tango-setting-form@0.2.12 - @music163/tango-ui@0.1.12	2023-11-28 13:51:35 +08:00
wwsun	1db52948db	fix: update type	2023-11-28 13:49:44 +08:00
wwsun	2550411c1c	fix: update theme	2023-11-28 13:45:17 +08:00
wwsun	640859d36e	chore(release): publish - @music163/tango-context@0.2.8 - @music163/tango-core@0.2.7 - @music163/tango-designer@0.5.8 - @music163/tango-sandbox@0.1.12 - @music163/tango-setting-form@0.2.11	2023-11-27 14:02:30 +08:00
wwsun	d91763379c	fix: parse tango variables in view file	2023-11-27 13:55:53 +08:00
wwsun	588861f649	fix: event setter	2023-11-27 13:46:45 +08:00
wwsun	91b53da38e	fix: list service functions	2023-11-24 09:50:14 +08:00
wwsun	9b0ada94a0	chore(release): publish - @music163/tango-designer@0.5.7	2023-11-23 18:50:57 +08:00
Wells	f604996e56	fix: update varTreeNode style (#69 ) Co-authored-by: wwsun <ww.sww@outlook.com>	2023-11-23 18:46:56 +08:00
wwsun	fb26540f27	chore(release): publish - @music163/tango-context@0.2.7 - @music163/tango-core@0.2.6 - @music163/tango-designer@0.5.6 - @music163/tango-helpers@0.1.8 - @music163/tango-sandbox@0.1.11 - @music163/tango-setting-form@0.2.10 - @music163/tango-ui@0.1.11	2023-11-23 15:56:48 +08:00
Wells	558f2cd0a6	fix: refactor update import specifiers (#68 ) * fix: refactor update import declaration * fix: rename module methods * fix: update types * fix: update --------- Co-authored-by: wwsun <ww.sww@outlook.com>	2023-11-23 15:54:22 +08:00
Wells	8a1234e565	fix: prototype to import declaration (#67 ) Co-authored-by: wwsun <ww.sww@outlook.com>	2023-11-22 20:00:32 +08:00
wwsun	630c486eb8	chore(release): publish - @music163/tango-designer@0.5.5	2023-11-20 17:20:18 +08:00
wwsun	324f450851	docs: update timeline	2023-11-20 17:15:59 +08:00
wwsun	d6ffb50e85	fix: pass down sandbox props	2023-11-20 17:05:44 +08:00
青岚	2906efc8fc	docs: add seal d2c intro (#63 )	2023-11-20 17:02:27 +08:00