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

README.md

@@ -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

README.zh-CN.md

@@ -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
 ```
 
 ## 💻 开发

apps/playground/src/mock/project.ts

@@ -75,15 +75,6 @@ const tangoConfigJson = {
   },
 };
 
-const appJson: any = {
-  pages: [
-    {
-      path: '/',
-      name: '首页',
-    },
-  ],
-};
-
 const routesCode = `
 import Index from "./pages/list";
 
@@ -187,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,
@@ -242,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 },

apps/playground/src/pages/index.tsx

@@ -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="变量"

packages/context/CHANGELOG.md

@@ -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.
 
+## [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

packages/context/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@music163/tango-context",
-  "version": "0.2.7",
+  "version": "0.2.10",
   "description": "react context for tango-apps",
   "keywords": [
     "react",
@@ -31,7 +31,7 @@
     "react": ">= 16.8"
   },
   "dependencies": {
-    "@music163/tango-core": "^0.2.6",
+    "@music163/tango-core": "^0.2.9",
     "@music163/tango-helpers": "^0.1.8",
     "mobx-react-lite": "4.0.2"
   },

packages/core/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@music163/tango-core",
-  "version": "0.2.6",
+  "version": "0.2.9",
   "description": "tango core",
   "author": "wwsun <ww.sun@outlook.com>",
   "homepage": "",

packages/core/src/helpers/ast/traverse.ts

@@ -688,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);
@@ -1262,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);
       }
     },

packages/core/src/models/file.ts

@@ -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]);
   }
 
   /**

packages/core/src/models/interfaces.ts

@@ -149,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;
@@ -169,6 +167,12 @@ export interface IWorkspace {
   listFiles: () => Record<string, string>;
   getFile: (filename: string) => TangoFile;
 
+  /**
+   * 文件变化回调
+   * @param filenames 文件名列表
+   */
+  onFilesChange: (filenames: string[]) => void;
+
   // ----------------- 节点操作 -----------------
 
   removeSelectedNode: () => void;

packages/core/src/models/module.ts

@@ -46,6 +46,8 @@ export class TangoModule extends TangoFile {
 
     this._analysisAst();
 
+    this.workspace.onFilesChange([this.filename]);
+
     if (refreshWorkspace) {
       this.workspace.refresh([this.filename]);
     }

packages/core/src/models/workspace.ts

@@ -1,7 +1,6 @@
 import { action, computed, makeObservable, observable } from 'mobx';
 import { JSXElement } from '@babel/types';
 import {
-  array2object,
   ComponentPrototypeType,
   hasFileExtension,
   isString,
@@ -16,7 +15,6 @@ import {
   getJSXElementChildrenNames,
   namesToImportDeclarations,
   getBlockNameByFilename,
-  getPrivilegeCode,
   prototype2importDeclarationData,
 } from '../helpers';
 import { DropMethod } from './drop-target';
@@ -59,7 +57,7 @@ export interface IWorkspaceOptions {
   /**
    * 工作区文件变更事件
    */
-  onFilesChange?: (filenames: string[]) => void;
+  onFilesChange?: IWorkspace['onFilesChange'];
 }
 
 /**
@@ -124,17 +122,6 @@ export class Workspace extends EventTarget implements IWorkspace {
    */
   tangoConfigJson: TangoJsonFile;
 
-  /**
-   * appJson.json 文件
-   * FIXME: 是否保留 ???
-   */
-  appJson: TangoJsonFile;
-
-  /**
-   * 代码变更回调
-   */
-  onFilesChange?: (filenames: string[]) => void;
-
   /**
    * 绑定事件
    * TODO: 是否需要自己来管理 listeners，并及时进行 gc
@@ -170,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,
         });
       }
     });
@@ -230,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);
@@ -390,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;
@@ -517,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);
   }
 
@@ -552,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();
   }
 
   /**
@@ -573,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();
   }
 
   /**
@@ -696,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];
       });
     });
@@ -1177,6 +1131,10 @@ export class Workspace extends EventTarget implements IWorkspace {
     }
   }
 
+  onFilesChange(filenams: string[]) {
+    // do nothing
+  }
+
   /**
    * 刷新目标文件
    * @param filenames
@@ -1190,7 +1148,6 @@ export class Workspace extends EventTarget implements IWorkspace {
         },
       }),
     );
-    this.onFilesChange?.(filenames);
   }
 
   /**

packages/core/src/types.ts

@@ -100,7 +100,6 @@ export interface IImportSpecifierData {
 
 /**
  * 解析的导入语句数据
- * FIXME: 需要考虑到有两行重复的语句的情况
  */
 export type ImportDeclarationDataType = Record<string, IImportSpecifierData[]>;
 
@@ -193,7 +192,7 @@ export interface IPageConfigData {
    */
   name?: string;
   /**
-   * PMS 权限码
+   * 权限码
    */
   privilegeCode?: string;
 }

packages/designer/CHANGELOG.md

@@ -3,6 +3,40 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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

packages/designer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@music163/tango-designer",
-  "version": "0.5.6",
+  "version": "0.5.12",
   "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.7",
-    "@music163/tango-core": "^0.2.6",
+    "@music163/tango-context": "^0.2.10",
+    "@music163/tango-core": "^0.2.9",
     "@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",
+    "@music163/tango-sandbox": "^0.1.14",
+    "@music163/tango-setting-form": "^0.2.14",
+    "@music163/tango-ui": "^0.1.12",
     "antd": "^4.24.2",
     "cash-dom": "^8.1.2",
     "classnames": "^2.3.2",

packages/designer/src/components/variable-tree.tsx

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

packages/designer/src/designer-panel.tsx

@@ -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">

packages/designer/src/designer.tsx

@@ -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,

packages/designer/src/index.ts

@@ -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';
 

packages/designer/src/sandbox/navigator.tsx

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

packages/designer/src/setters/event-setter.tsx

@@ -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}
       />

packages/designer/src/setters/expression-setter.tsx

@@ -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();
         }}
       />

packages/designer/src/sidebar/outline-panel/components-tree.tsx

@@ -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>
     );
   },
-);
+);

packages/designer/src/sidebar/variable-panel.tsx

@@ -30,7 +30,6 @@ export const VariablePanel = observer(
 
     return (
       <Panel
-        shape="solid"
         className="ModelView"
         height={wrapperHeight}
         title="视图模型与变量管理"

packages/designer/src/themes/default.ts

@@ -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',

packages/designer/src/themes/index.ts

@@ -0,0 +1,2 @@
+export { default as themeDefault } from './default';
+export { default as themeLight } from './light';

packages/designer/src/themes/light.ts

@@ -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',
+    },
+  },
+});

packages/designer/src/toolbar/history.tsx

@@ -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();

packages/designer/src/toolbar/preview.tsx

@@ -17,7 +17,7 @@ export const PreviewTool = observer(() => {
           designer.setActiveView('design');
         }
       }}
-      tip="预览"
+      tooltip="预览"
     >
       <EyeOutlined />
     </ToggleButton>

packages/designer/src/toolbar/route-switch.tsx

@@ -71,6 +71,7 @@ function PageSelect({ value, onSelect, onRemove, onUpdate, onCopy, options }: Pa
           }}
         />
       }
+      icon={<FileOutlined />}
     >
       {current?.name || current?.label || value}
     </ToggleButton>

packages/designer/src/toolbar/toolbar.tsx

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

packages/designer/src/toolbar/viewport-switch.tsx

@@ -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>

packages/sandbox/CHANGELOG.md

@@ -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.
 
+## [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

packages/sandbox/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@music163/tango-sandbox",
-  "version": "0.1.11",
+  "version": "0.1.14",
   "description": "sandbox of tango apps",
   "author": "wwsun <ww.sun@outlook.com>",
   "homepage": "",
@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "@ant-design/icons": "^4.8.0",
-    "@music163/tango-core": "^0.2.6",
+    "@music163/tango-core": "^0.2.9",
     "@music163/tango-helpers": "^0.1.8",
     "crypto-js": "^4.1.1",
     "lodash.isequal": "4.5.0",

packages/setting-form/CHANGELOG.md

@@ -3,6 +3,27 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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

packages/setting-form/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@music163/tango-setting-form",
-  "version": "0.2.10",
+  "version": "0.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": "^0.2.6",
+    "@music163/tango-core": "^0.2.9",
     "@music163/tango-helpers": "^0.1.8",
-    "@music163/tango-ui": "^0.1.11",
+    "@music163/tango-ui": "^0.1.12",
     "antd": "^4.24.2",
     "coral-system": "^1.0.5",
     "mobx": "6.9.0",

packages/setting-form/src/setter.tsx

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

packages/ui/CHANGELOG.md

@@ -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.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

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@music163/tango-ui",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "ui widgets of tango",
   "keywords": [
     "react",

packages/ui/src/toggle-button.tsx

@@ -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>
   );