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

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";
 
@@ -249,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.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

packages/context/package.json

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

packages/core/CHANGELOG.md

@@ -3,6 +3,24 @@
 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

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@music163/tango-core",
-  "version": "0.2.7",
+  "version": "0.2.10",
   "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);

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/view-module.ts

@@ -307,10 +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);
         const { source, specifiers } = prototype2importDeclarationData(proto, this.filename);
-        this.addImportSpecifiers(source, specifiers);
+        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);

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'];
 }
 
 /**
@@ -96,7 +94,7 @@ export class Workspace extends EventTarget implements IWorkspace {
 
   /**
    * 本地区块 { [blockName]: filePath }
-   * FIXME: 修正类型 Record<string, TangoBlockModule>
+   * TODO: 废弃这个，不再支持
    */
   localBlocks: Record<string, string>;
 
@@ -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();
   }
 
   /**
@@ -1175,6 +1131,10 @@ export class Workspace extends EventTarget implements IWorkspace {
     }
   }
 
+  onFilesChange(filenams: string[]) {
+    // do nothing
+  }
+
   /**
    * 刷新目标文件
    * @param filenames
@@ -1188,7 +1148,6 @@ export class Workspace extends EventTarget implements IWorkspace {
         },
       }),
     );
-    this.onFilesChange?.(filenames);
   }
 
   /**

packages/core/src/types.ts

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

packages/designer/CHANGELOG.md

@@ -3,6 +3,34 @@
 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

packages/designer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@music163/tango-designer",
-  "version": "0.5.8",
+  "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.8",
-    "@music163/tango-core": "^0.2.7",
+    "@music163/tango-context": "^0.2.11",
+    "@music163/tango-core": "^0.2.10",
     "@music163/tango-helpers": "^0.1.8",
-    "@music163/tango-sandbox": "^0.1.12",
-    "@music163/tango-setting-form": "^0.2.11",
-    "@music163/tango-ui": "^0.1.11",
+    "@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",

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/sandbox/sandbox.tsx

@@ -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());
@@ -413,6 +425,7 @@ function fixSandboxFiles(files: Record<string, { code: string }>, entry = '/src/
       `,
     };
   }
+
   return files;
 }
 

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

packages/sandbox/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@music163/tango-sandbox",
-  "version": "0.1.12",
+  "version": "0.1.15",
   "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.7",
+    "@music163/tango-core": "^0.2.10",
     "@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.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

packages/setting-form/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@music163/tango-setting-form",
-  "version": "0.2.11",
+  "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.7",
+    "@music163/tango-core": "^0.2.10",
     "@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>
   );