chore(release): publish

- @music163/tango-context@1.0.0-alpha.2 - @music163/tango-core@1.0.0-alpha.2 - @music163/tango-designer@1.0.0-alpha.3 - @music163/tango-helpers@1.0.0-alpha.0 - @music163/tango-sandbox@1.0.0-alpha.2 - @music163/tango-setting-form@1.0.0-alpha.2 - @music163/tango-ui@1.0.0-alpha.2
feat: support local components (#78 )
2026-08-31 20:06:59 +08:00 · 2023-12-19 15:17:19 +08:00 · 2023-12-19 15:07:44 +08:00 · 2023-12-13 15:59:20 +08:00 · 2023-12-13 15:57:54 +08:00 · 2023-12-13 14:03:07 +08:00
101 changed files with 5906 additions and 4318 deletions
@@ -0,0 +1,2 @@
+registry=https://registry.npmmirror.com/
+
@@ -45,18 +45,18 @@ 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

-### Recommended Development Environment
+### Environment

- Node.js >= 16.0.0
- Yarn >= 1.22.0
+- Node `>= 18`
+- Yarn `>= 1.22 && < 2`

 ### Development Quick Start

@@ -45,18 +45,18 @@ 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
 ```

 ## 💻 开发

 ### 推荐开发环境

- Node.js >= 16.0.0
- Yarn >= 1.22.0
+- Node `>= 18`
+- Yarn `>= 1.22 && < 2`

 ### 本地开发调试方法

@@ -1,2 +0,0 @@
-PORT=6006
-HOST=local.netease.com
@@ -0,0 +1,9 @@
+/node_modules
+/.env.local
+/.umirc.local.ts
+/config/config.local.ts
+/src/.umi
+/src/.umi-production
+/src/.umi-test
+/dist
+.swc
@@ -1,33 +1,17 @@
 import path from 'path';
+import { defineConfig } from 'umi';

 const resolvePackageIndex = (relativeEntry: string) =>
-  path.resolve(__dirname, '../../../packages/', relativeEntry);
+  path.resolve(__dirname, '../../packages/', relativeEntry);

-export default {
+export default defineConfig({
  routes: [
-    {
-      exact: true,
-      path: '/',
-      component: 'index',
-      name: '首页',
-    },
+    { path: '/', component: 'index' },
+    { path: '/docs', component: 'docs' },
  ],
-  devServer: {
-    host: 'local.netease.com',
-    port: 8008,
-    https: {
-      key: path.resolve(__dirname, 'local.netease.com-key.pem'),
-      cert: path.resolve(__dirname, 'local.netease.com.pem'),
-    },
-    headers: { 'Origin-Agent-Cluster': '?0' },
-  },
-  targets: {
-    chrome: 79,
-    firefox: false,
-    safari: false,
-    edge: false,
-    ios: false,
-  },
+  npmClient: 'yarn',
+  mfsu: false,
+  codeSplitting: false,
  alias: {
    '@music163/tango-helpers': resolvePackageIndex('helpers/src/index.ts'),
    '@music163/tango-core': resolvePackageIndex('core/src/index.ts'),
@@ -44,6 +28,21 @@ export default {
    moment: 'moment',
    antd: 'antd',
  },
+  headScripts: [
+    'https://cdn.jsdelivr.net/npm/react@18.2.0/umd/react.development.js',
+    'https://cdn.jsdelivr.net/npm/react-dom@18.2.0/umd/react-dom.development.js',
+    'https://cdn.jsdelivr.net/npm/react-is@18.2.0/umd/react-is.production.min.js',
+    'https://cdn.jsdelivr.net/npm/moment/min/moment-with-locales.js',
+    'https://cdn.jsdelivr.net/npm/styled-components@5.3.11/dist/styled-components.js',
+    'https://cdn.jsdelivr.net/npm/antd@4.24.13/dist/antd-with-locales.min.js',
+    'https://cdn.jsdelivr.net/npm/prettier@2.6.0/standalone.js',
+    'https://cdn.jsdelivr.net/npm/prettier@2.6.0/parser-babel.js',
+  ],
+  https: {
+    key: path.resolve(__dirname, 'local.netease.com-key.pem'),
+    cert: path.resolve(__dirname, 'local.netease.com.pem'),
+    http2: false,
+  },
  chainWebpack: (config: any) => {
    // @see https://github.com/graphql/graphql-js/issues/1272#issuecomment-393903706
    config.module
@@ -61,4 +60,5 @@ export default {
    config.module.rule('js').include.add(resolvePackageIndex('ui/src'));
    return config;
  },
-};
+  monorepoRedirect: {},
+});
@@ -1,5 +0,0 @@
-# `playground`
-
-搭建平台演示示例
-
-## 说明
@@ -2,24 +2,23 @@
  "name": "playground",
  "version": "0.0.0",
  "private": true,
-  "description": "playground of tango-apps",
-  "license": "MIT",
-  "author": "wwsun <ww.sun@outlook.com>",
-  "files": [
-    "lib"
-  ],
+  "author": "Wells <ww.sun@outlook.com>",
  "scripts": {
-    "build": "COMPRESS=none umi build",
-    "start": "umi dev"
+    "dev": "HOST=local.netease.com PORT=8001 umi dev",
+    "build": "umi build",
+    "postinstall": "umi setup",
+    "setup": "umi setup",
+    "start": "npm run dev"
  },
  "dependencies": {
    "@ant-design/icons": "^4.8.0",
-    "@music163/tango-designer": "*",
-    "@music163/tango-helpers": "*",
    "antd": "^4.24.2",
-    "coral-system": "^1.0.5"
+    "coral-system": "^1.0.5",
+    "umi": "^4.0.89"
  },
  "devDependencies": {
-    "umi": "^3.5.24"
+    "@types/react": "^18.0.33",
+    "@types/react-dom": "^18.0.11",
+    "typescript": "^5.0.3"
  }
 }
@@ -0,0 +1,10 @@
+import type { IApi } from 'umi';
+
+export default (api: IApi) => {
+  api.addMiddlewares(() => {
+    return (req, res, next) => {
+      res.setHeader('Origin-Agent-Cluster', '?0');
+      next();
+    };
+  });
+};
@@ -6,29 +6,30 @@ import { registerSetter } from '@music163/tango-designer';
 import type { ComponentPrototypeType } from '@music163/tango-helpers';
 import { FooSetter } from '../components';

+export * from './mock-files';
+
 export const bootHelperVariables = [
  {
    key: '$helpers',
    title: '工具函数',
    children: [
      {
-        title: 'setStoreValue',
+        title: '设置变量值',
        key: '() => tango.setStoreValue("variableName", "variableValue")',
        type: 'function',
+        help: '设置状态值，tango.setStoreValue("variableName", "variableValue")',
      },
      {
-        title: 'getStoreValue',
+        title: '获取变量值',
        key: '() => tango.getStoreValue("variableName")',
        type: 'function',
+        help: '获取状态值',
      },
-      { title: 'openModal', key: '() => tango.openModal("")', type: 'function' },
-      { title: 'closeModal', key: '() => tango.closeModal("")', type: 'function' },
-      { title: 'navigateTo', key: '() => tango.navigateTo("/")', type: 'function' },
-      { title: 'showToast', key: '() => tango.showToast("hello")', type: 'function' },
-      { title: 'formatDate', key: '() => tango.formatDate("2022-12-12")', type: 'function' },
-      { title: 'formatNumber', key: '() => tango.formatDate(9999)', type: 'function' },
+      { title: '打开弹窗', key: '() => tango.openModal("")', type: 'function' },
+      { title: '关闭弹窗', key: '() => tango.closeModal("")', type: 'function' },
+      { title: '切换路由', key: '() => tango.navigateTo("/")', type: 'function' },
      {
-        title: 'copyToClipboard',
+        title: '拷贝到剪贴板',
        key: '() => tango.copyToClipboard("hello")',
        type: 'function',
      },
@@ -75,14 +75,17 @@ const tangoConfigJson = {
  },
 };

-const appJson: any = {
-  pages: [
-    {
-      path: '/',
-      name: '首页',
-    },
-  ],
-};
+const helperCode = `
+export function registerComponentPrototype(proto) {
+  if (!proto) return;
+  if (!window.localTangoComponentPrototypes) {
+    window.localTangoComponentPrototypes = {};
+  }
+  if (proto.name) {
+    window.localTangoComponentPrototypes[proto.name] = proto;
+  }
+}
+`;

 const routesCode = `
 import Index from "./pages/list";
@@ -152,6 +155,8 @@ import {
  FormilyForm,
 } from "@music163/antd";
 import { Space } from '@music163/antd';
+import { LocalButton } from '../components';
+
 class App extends React.Component {
  render() {
    return (
@@ -160,6 +165,7 @@ class App extends React.Component {
       </Section>
       <Section>
       <Space>
+          <LocalButton />
          <Button>button</Button>
          <Input />
          </Space>
@@ -168,9 +174,53 @@ class App extends React.Component {
    );
  }
 }
+
 export default definePage(App);
 `;

+const componentsButtonCode = `
+import React from 'react';
+import { registerComponentPrototype } from '../utils';
+
+export default function MyButton(props) {
+  return <button {...props}>my button</button>
+}
+
+registerComponentPrototype({
+  name: 'LocalButton',
+  title: 'Local Button',
+  exportType: 'namedExport',
+  package: '/src/components',
+  props: [
+    { name: 'background', title: '背景色', setter: 'colorSetter'  },
+  ],
+});
+`;
+
+const componentsInputCode = `
+import React from 'react';
+import { registerComponentPrototype } from '../utils';
+
+export default function MyInput(props) {
+  return <input {...props} />;
+}
+
+registerComponentPrototype({
+  name: 'LocalInput',
+  title: 'Local Input',
+  exportType: 'namedExport',
+  package: '/src/components',
+  props: [
+    { name: 'color', title: '文本色', setter: 'colorSetter'  },
+  ],
+});
+`;
+
+const componentsEntryCode = `
+export { default as LocalButton } from './button';
+export { default as LocalInput } from './input';
+`;
+
 const storeApp = `
 import { defineStore } from '@music163/tango-boot';

@@ -187,6 +237,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,20 +299,22 @@ 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 },
  { filename: '/src/style.css', code: cssCode },
  { filename: '/src/index.js', code: entryCode },
  { filename: '/src/pages/list.js', code: viewHomeCode },
+  { filename: '/src/components/button.js', code: componentsButtonCode },
+  { filename: '/src/components/input.js', code: componentsInputCode },
+  { filename: '/src/components/index.js', code: componentsEntryCode },
  { filename: '/src/routes.js', code: routesCode },
  { filename: '/src/stores/index.js', code: storeIndexCode },
  { filename: '/src/stores/app.js', code: storeApp },
  { filename: '/src/stores/counter.js', code: storeCounter },
  { filename: '/src/services/index.js', code: serviceCode },
  { filename: '/src/services/sub.js', code: subServiceCode },
-  { filename: '/src/utils/index.js', code: `export function foo() {}` },
+  { filename: '/src/utils/index.js', code: helperCode },
 ];

 export const genDefaultPage = (index: number) => ({
@@ -2,4 +2,5 @@
@import '~antd/dist/antd.less'; // 引入官方提供的 less 样式入口文件

@primary-color: #2f54eb;
-@border-radius-base: 2px;
+@border-radius-base: 2px;
+
@@ -0,0 +1,11 @@
+import React from 'react';
+import { Outlet } from 'umi';
+import './index.less';
+
+export default function Layout() {
+  return (
+    <div>
+      <Outlet />
+    </div>
+  );
+}
@@ -0,0 +1,9 @@
+const DocsPage = () => {
+  return (
+    <div>
+      <p>This is umi docs.</p>
+    </div>
+  );
+};
+
+export default DocsPage;
@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Tango Playground</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script src="https://cdn.jsdelivr.net/npm/react@16.14.0/umd/react.development.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/react-dom@16.14.0/umd/react-dom.development.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/react-is@16.13.1/umd/react-is.production.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/moment/min/moment-with-locales.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/styled-components@5.3.11/dist/styled-components.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.15.6/babel.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/prettier@2.6.0/standalone.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/prettier@2.6.0/parser-babel.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/antd@4.24.13/dist/antd-with-locales.min.js"></script>
-  </body>
-</html>
@@ -12,11 +12,10 @@ import {
  CodeEditor,
  Sandbox,
  DndQuery,
+  themeLight,
 } from '@music163/tango-designer';
 import { createEngine, Workspace } from '@music163/tango-core';
-import { Logo, ProjectDetail, bootHelperVariables } from './share';
-import { sampleFiles } from '../mock/project';
-import './index.less';
+import { Logo, ProjectDetail, bootHelperVariables, sampleFiles } from '../helpers';
 import {
  ApiOutlined,
  AppstoreAddOutlined,
@@ -34,7 +33,6 @@ const workspace = new Workspace({
 // 2. 引擎初始化
 const engine = createEngine({
  workspace,
-  defaultActiveSidebarPanel: 'outline',
 });

 // @ts-ignore
@@ -52,6 +50,7 @@ export default function App() {
  const [menuData, setMenuData] = useState(false);
  return (
    <Designer
+      theme={themeLight}
      engine={engine}
      config={{
        customActionVariables: bootHelperVariables,
@@ -66,6 +65,7 @@ export default function App() {
          <Box px="l">
            <Toolbar>
              <Toolbar.Item key="routeSwitch" placement="left" />
+              <Toolbar.Item key="history" placement="left" />
              <Toolbar.Item key="preview" placement="left" />
              <Toolbar.Item key="modeSwitch" placement="right" />
              <Toolbar.Item key="togglePanel" placement="right" />
@@ -80,7 +80,6 @@ export default function App() {
        }
      >
        <Sidebar>
-          <Sidebar.Item key="outline" label="结构" icon={<BuildOutlined />} />
          <Sidebar.Item
            key="components"
            label="组件"
@@ -90,6 +89,7 @@ export default function App() {
              loading: menuLoading,
            }}
          />
+          <Sidebar.Item key="outline" label="结构" icon={<BuildOutlined />} />
          <Sidebar.Item
            key="variables"
            label="变量"
@@ -120,6 +120,9 @@ export default function App() {
                      workspace.setComponentPrototypes(sandboxWindow.TangoAntd.prototypes);
                    }
                  }
+                  if (sandboxWindow.localTangoComponentPrototypes) {
+                    workspace.setComponentPrototypes(sandboxWindow.localTangoComponentPrototypes);
+                  }
                  setMenuLoading(false);
                }
              }}
@@ -1,3 +1,3 @@
 {
-  "extends": "../../tsconfig.json"
+  "extends": "./src/.umi/tsconfig.json"
 }
@@ -0,0 +1 @@
+import 'umi/typings';
@@ -16,8 +16,8 @@
  "dependencies": {
    "@music163/tango-setting-form": "*",
    "@music163/tango-ui": "*",
-    "mobx": "6.9.0",
-    "mobx-react-lite": "4.0.2"
+    "mobx": "6.12.0",
+    "mobx-react-lite": "4.0.5"
  },
  "devDependencies": {
    "@storybook/addon-actions": "^6.5.14",
@@ -1,7 +1,6 @@
-import React, { useState } from 'react';
-import { EditableVariableTree, FormModel, SettingForm } from '@music163/tango-setting-form';
-import { ComponentPrototypeType, getValue } from '@music163/tango-helpers';
-import { createServices } from '@music163/request';
+import React from 'react';
+import { FormModel, SettingForm } from '@music163/tango-setting-form';
+import { ComponentPrototypeType } from '@music163/tango-helpers';
 import { Box } from 'coral-system';
 import { JsonView } from '@music163/tango-ui';
 import { toJS } from 'mobx';
@@ -9,51 +8,9 @@ import { observer } from 'mobx-react-lite';
 import { Card } from 'antd';

 export default {
-  title: 'SettingForm/ Setters',
+  title: 'SettingForm',
 };

-const modelVariables = [
-  {
-    title: 'stores',
-    key: 'stores',
-    selectable: false,
-    children: [
-      {
-        title: 'app',
-        key: 'stores.app',
-        selectable: false,
-        children: [
-          { title: 'app.title', key: 'stores.app.title', raw: '"hello"' },
-          { title: 'app.age', key: 'stores.app.age', raw: '20' },
-          { title: 'app.detail', key: 'stores.app.detail', raw: '{ foo: "foo" }' },
-          { title: 'app.list', key: 'stores.app.list', type: 'function', raw: '() => {}' },
-        ],
-      },
-      {
-        title: 'user',
-        key: 'stores.user',
-        selectable: false,
-        children: [
-          { title: 'name', key: 'stores.user.name' },
-          { title: 'age', key: 'stores.user.age' },
-        ],
-      },
-    ],
-  },
-  {
-    title: 'services',
-    key: 'services',
-    selectable: false,
-    children: [
-      {
-        title: 'listUsers',
-        key: 'services.listUsers',
-        type: 'function',
-      },
-    ],
-  },
-];
-
 const prototype: ComponentPrototypeType = {
  name: 'Test',
  exportType: 'namedExport',
@@ -257,47 +214,6 @@ const prototype: ComponentPrototypeType = {
  ],
 };

-const deerService = createServices(
-  {
-    listMy: {
-      url: '/my/upload/list',
-    },
-    listFav: {
-      url: '/my/star/list',
-    },
-    listPub: {
-      url: '/list',
-    },
-  },
-  {
-    baseURL: 'https://febase-openapi.fn.netease.com/deer/api/deer/pic',
-    withCredentials: false, // 解决跨域时必须非*问题
-    headers: {
-      'Febase-Auth': 'dskPVkIRnQ2dEn1DbyxURmUj4rl4BsCh53xFAsJnvVs=',
-    },
-  },
-);
-
-const context = {
-  stores: {
-    app: {
-      title: 'Sample App',
-      age: 20,
-      detail: {
-        foo: 'foo',
-        bar: 'bar',
-        biz: {
-          x: 'xxx',
-        },
-      },
-      newKey: 'xxx',
-    },
-    foo: {
-      test: 'test string',
-    },
-  },
-};
-
 /**
 * 表单值预览
 */
@@ -310,9 +226,7 @@ export function Basic() {
  const model = new FormModel(
    {
      router: 'www.163.com',
-      expression: {
-        foo: 'foo',
-      },
+      expression: `{ foo: 'foo' }`,
      object: {
        name: 'Alice',
      },
@@ -324,19 +238,7 @@ export function Basic() {

  return (
    <Box display="flex">
-      <SettingForm
-        model={model}
-        remoteServices={{
-          ImageService: deerService as any,
-        }}
-        prototype={prototype}
-        evaluateContext={{
-          tango: context,
-          __UNSAFE_TANGO_CURRENT_PAGE_RENDER_RUNTIME__: { routeData: { params: {}, query: {} } },
-        }}
-        modelVariables={modelVariables}
-        expressionVariables={modelVariables}
-      />
+      <SettingForm model={model} prototype={prototype} />
      <Box position="relative">
        <Card title="表单状态预览" style={{ position: 'sticky', top: 0 }}>
          <FormValuePreview model={model} />
@@ -346,6 +248,14 @@ export function Basic() {
  );
 }

+export function Lite() {
+  return (
+    <Box width={320} border="solid">
+      <SettingForm showSearch={false} showGroups={false} prototype={prototype} />
+    </Box>
+  );
+}
+
 export function NoExpressionSwitch() {
  const model = new FormModel({});
  return (
@@ -354,30 +264,3 @@ export function NoExpressionSwitch() {
    </Box>
  );
 }
-
-export function Binding() {
-  const [data, setData] = useState<any>({});
-  return (
-    <Box>
-      <Box as="code" bg="highlight" color="white" fontSize="24px">
-        selected: {data?.key}
-      </Box>
-      <EditableVariableTree
-        dataSource={modelVariables as any}
-        getPreviewValue={(node) => {
-          if (!node || !node.key) {
-            return;
-          }
-          if (node.type === 'function') {
-            return node.raw;
-          }
-          const keyPath = node.key.replaceAll('?', '');
-          return getValue(context, keyPath);
-        }}
-        onSelect={setData}
-        onAddVariable={console.log}
-        onSave={console.log}
-      />
-    </Box>
-  );
-}
@@ -1,6 +1,6 @@
 import React from 'react';
-import { ToggleButton, IconFont } from '@music163/tango-ui';
-import { Box, Flex } from 'coral-system';
+import { ToggleButton, UndoOutlined, RedoOutlined } from '@music163/tango-ui';
+import { Box, Group, Flex } from 'coral-system';

 export default {
  title: 'UI/ToggleButton',
@@ -9,28 +9,73 @@ export default {
 export function Basic() {
  return (
    <Box>
-      <Flex gap="l" bg="#efefef" p="l">
+      <Box display="flex" columnGap="l" p="l">
        <ToggleButton>
-          <IconFont type="icon-undo" />
+          <UndoOutlined />
        </ToggleButton>
        <ToggleButton selected>
-          <IconFont type="icon-redo" />
+          <RedoOutlined />
        </ToggleButton>
        <ToggleButton disabled>
-          <IconFont type="icon-redo" />
+          <RedoOutlined />
+        </ToggleButton>
+      </Box>
+      <Box display="flex" columnGap="l" p="l">
+        <ToggleButton type="primary">
+          <UndoOutlined />
+        </ToggleButton>
+        <ToggleButton type="primary" selected>
+          <RedoOutlined />
+        </ToggleButton>
+        <ToggleButton type="primary" disabled>
+          <RedoOutlined />
+        </ToggleButton>
+      </Box>
+    </Box>
+  );
+}
+
+export function DarkMode() {
+  return (
+    <Box>
+      <Flex gap="l" bg="#222" p="l">
+        <ToggleButton shape="ghost">
+          <UndoOutlined />
+        </ToggleButton>
+        <ToggleButton shape="ghost" selected>
+          <RedoOutlined />
+        </ToggleButton>
+        <ToggleButton shape="ghost" disabled>
+          <UndoOutlined />
        </ToggleButton>
      </Flex>
      <Flex gap="l" bg="#222" p="l">
-        <ToggleButton shape="ghost">
-          <IconFont type="icon-undo" />
+        <ToggleButton shape="text">
+          <UndoOutlined />
        </ToggleButton>
-        <ToggleButton shape="ghost" selected>
-          <IconFont type="icon-redo" />
+        <ToggleButton shape="text" selected>
+          <RedoOutlined />
        </ToggleButton>
-        <ToggleButton shape="ghost" disabled>
-          <IconFont type="icon-undo" />
+        <ToggleButton shape="text" disabled>
+          <RedoOutlined />
        </ToggleButton>
      </Flex>
    </Box>
  );
 }
+
+export function ButtonGroup() {
+  return (
+    <Group attached>
+      <ToggleButton>
+        <UndoOutlined />
+      </ToggleButton>
+      <ToggleButton selected>
+        <RedoOutlined />
+      </ToggleButton>
+      <ToggleButton disabled>
+        <RedoOutlined />
+      </ToggleButton>
+    </Group>
+  );
+}
@@ -1,6 +1,5 @@
 {
  "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "useWorkspaces": true,
  "version": "independent",
  "packages": ["packages/*"],
  "npmClient": "yarn",
@@ -6,7 +6,7 @@
    "apps/*"
  ],
  "scripts": {
-    "start": "yarn workspace playground start",
+    "start": "yarn workspace playground dev",
    "start:docs": "yarn workspace storybook storybook",
    "start:site": "yarn workspace website start",
    "deploy:site": "yarn workspace website deploy",
@@ -18,18 +18,19 @@
    "test:watch": "jest --watch",
    "eslint": "eslint packages/**/src/*.{ts,tsx} --cache",
    "publish": "lerna publish",
-    "ver": "lerna version --no-private --conventional-commits",
-    "release": "yarn eslint && yarn build && yarn run ver && lerna publish from-git",
+    "ver": "lerna version --no-private",
+    "release": "yarn eslint && yarn build && lerna version --no-private --conventional-commits && lerna publish from-git",
+    "release:npm": "yarn eslint && yarn build && yarn run ver && lerna publish from-git",
    "release:beta": "yarn eslint && yarn build && yarn run ver && lerna publish from-package --dist-tag beta",
    "up": "yarn upgrade-interactive --latest",
    "prepare": "husky install"
  },
  "devDependencies": {
-    "@babel/preset-env": "^7.23.2",
-    "@babel/preset-react": "^7.22.15",
-    "@babel/preset-typescript": "^7.23.2",
-    "@commitlint/cli": "^17.5.0",
-    "@commitlint/config-conventional": "^17.3.0",
+    "@babel/preset-env": "^7.23.6",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@commitlint/cli": "^18.4.3",
+    "@commitlint/config-conventional": "^18.4.3",
    "@types/jest": "^29.5.7",
    "@types/lodash-es": "^4.17.10",
    "@types/lodash.get": "^4.4.8",
@@ -38,13 +39,13 @@
    "@types/react": "^18.2.34",
    "@types/react-dom": "^18.2.14",
    "@types/styled-components": "^5.1.29",
-    "@typescript-eslint/eslint-plugin": "^6.9.1",
-    "@typescript-eslint/parser": "^6.9.1",
-    "conventional-changelog-cli": "^2.2.2",
+    "@typescript-eslint/eslint-plugin": "^6.13.2",
+    "@typescript-eslint/parser": "^6.13.2",
+    "conventional-changelog-cli": "^4.1.0",
    "copyfiles": "^2.4.1",
-    "eslint": "^8.52.0",
+    "eslint": "^8.55.0",
    "eslint-config-ali": "^14.0.2",
-    "eslint-config-prettier": "^9.0.0",
+    "eslint-config-prettier": "^9.1.0",
    "eslint-import-resolver-typescript": "^3.6.1",
    "eslint-plugin-import": "^2.29.0",
    "eslint-plugin-react": "^7.33.2",
@@ -53,14 +54,17 @@
    "husky": "^8.0.3",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
-    "lerna": "^6.6.1",
-    "lint-staged": "^14.0.1",
-    "prettier": "^2.8.7",
+    "lerna": "^8.0.0",
+    "lint-staged": "^15.2.0",
+    "prettier": "^3.1.0",
    "react": "^17.0.0",
    "react-dom": "^17.0.0",
    "styled-components": "^5.3.6",
-    "typedoc": "^0.25.3",
-    "typescript": "^5.2.2"
+    "typedoc": "^0.25.4",
+    "typescript": "^5.3.3"
+  },
+  "engines": {
+    "node": ">=18"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [1.0.0-alpha.1](https://github.com/netease/tango/compare/@music163/tango-context@0.2.12...@music163/tango-context@1.0.0-alpha.1) (2023-12-12)
+
+**Note:** Version bump only for package @music163/tango-context
+
+## [0.2.12](https://github.com/netease/tango/compare/@music163/tango-context@0.2.11...@music163/tango-context@0.2.12) (2023-12-04)
+
+**Note:** Version bump only for package @music163/tango-context
+
+## [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
@@ -1,6 +1,6 @@
 {
  "name": "@music163/tango-context",
-  "version": "0.2.7",
+  "version": "1.0.0-alpha.2",
  "description": "react context for tango-apps",
  "keywords": [
    "react",
@@ -31,9 +31,9 @@
    "react": ">= 16.8"
  },
  "dependencies": {
-    "@music163/tango-core": "^0.2.6",
-    "@music163/tango-helpers": "^0.1.8",
-    "mobx-react-lite": "4.0.2"
+    "@music163/tango-core": "^1.0.0-alpha.2",
+    "@music163/tango-helpers": "^1.0.0-alpha.0",
+    "mobx-react-lite": "4.0.5"
  },
  "publishConfig": {
    "access": "public",
@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [1.0.0-alpha.1](https://github.com/netease/tango/compare/@music163/tango-core@0.2.11...@music163/tango-core@1.0.0-alpha.1) (2023-12-12)
+
+**Note:** Version bump only for package @music163/tango-core
+
+## [0.2.11](https://github.com/netease/tango/compare/@music163/tango-core@0.2.10...@music163/tango-core@0.2.11) (2023-12-04)
+
+### Bug Fixes
+
+- update FileType ([c884712](https://github.com/netease/tango/commit/c8847123312bc47ea06575f4e714dfd596893e39))
+
+## [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
@@ -1,6 +1,6 @@
 {
  "name": "@music163/tango-core",
-  "version": "0.2.6",
+  "version": "1.0.0-alpha.2",
  "description": "tango core",
  "author": "wwsun <ww.sun@outlook.com>",
  "homepage": "",
@@ -24,14 +24,14 @@
    "prepublishOnly": "yarn build"
  },
  "dependencies": {
-    "@babel/generator": "^7.23.0",
-    "@babel/parser": "^7.23.0",
-    "@babel/traverse": "^7.23.2",
-    "@babel/types": "^7.23.0",
-    "@music163/tango-helpers": "^0.1.8",
-    "@types/babel__generator": "^7.6.6",
-    "@types/babel__traverse": "^7.20.3",
-    "mobx": "6.9.0",
+    "@babel/generator": "^7.23.5",
+    "@babel/parser": "^7.23.5",
+    "@babel/traverse": "^7.23.5",
+    "@babel/types": "^7.23.5",
+    "@music163/tango-helpers": "^1.0.0-alpha.0",
+    "@types/babel__generator": "^7.6.7",
+    "@types/babel__traverse": "^7.20.4",
+    "mobx": "6.12.0",
    "path-browserify": "^1.0.1"
  },
  "peerDependencies": {
@@ -22,7 +22,7 @@ import {
  code2expression,
  object2node,
 } from './parse';
-import { isValidComponentName } from '../string';
+import { getFullPath, isValidComponentName } from '../string';
 import { isDefineService, isDefineStore, isTangoVariable } from '../assert';
 import type {
  IRouteData,
@@ -32,6 +32,7 @@ import type {
  IServiceFunctionPayload,
  InsertChildPositionType,
  IImportSpecifierData,
+  IExportSpecifierData,
 } from '../../types';
 import { IdGenerator } from '../id-generator';

@@ -688,7 +689,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 +1262,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);
      }
    },
@@ -1326,6 +1331,33 @@ export function traverseViewFile(ast: t.File, idGenerator: IdGenerator) {
  };
 }

+export function traverseComponentsEntryFile(ast: t.File, baseDir?: string) {
+  const exportMap: Record<string, IExportSpecifierData> = {};
+  traverse(ast, {
+    ExportNamedDeclaration(path) {
+      const node = path.node;
+      let source = node2value(node.source);
+      if (baseDir) {
+        // fix relative source path
+        source = getFullPath(baseDir, source);
+      }
+      node.specifiers.forEach((specifier) => {
+        if (t.isExportSpecifier(specifier)) {
+          const name = keyNode2value(specifier.exported) as string;
+          if (name) {
+            exportMap[name] = {
+              source,
+              exportedName: name,
+            };
+          }
+        }
+      });
+    },
+  });
+
+  return { ast, exportMap };
+}
+
 /**
 * 解析导入语句
 */
@@ -33,6 +33,10 @@ export function inferFileType(filename: string): FileType {
    return FileType.JsonViewModule;
  }

+  if (/\/(blocks|components)\/index\.js/.test(filename)) {
+    return FileType.ComponentsEntryModule;
+  }
+
  if (/\/services\/.+\.js$/.test(filename)) {
    return FileType.ServiceModule;
  }
@@ -49,10 +53,6 @@ export function inferFileType(filename: string): FileType {
    return FileType.StoreModule;
  }

-  if (/\/blocks\/[\w-]+\/index\.js/.test(filename)) {
-    return FileType.BlockEntryModule;
-  }
-
  if (/\.jsx?$/.test(filename)) {
    return FileType.Module;
  }
@@ -170,24 +170,35 @@ export function getBlockNameByFilename(filename: string) {
 }

 /**
- * FIXME: 有问题，需要优化下
- * 基于 from 文件的地址计算 to 文件的相对引用路径
- * @param from
- * @param to
+ * 合并两个路径
+ * @param root
+ * @param filename
+ * @returns
 */
-export function getRelativePath(from: string, to: string) {
-  const fromFolder = path.dirname(from);
-  return path.relative(fromFolder, to);
+export function getFullPath(root: string, filename: string) {
+  return path.join(root, filename);
+}
+
+/**
+ * 计算 targetFile 在 sourceFile 中的相对引用路径
+ * @param sourceFile
+ * @param targetFile
+ * @returns
+ */
+export function getRelativePath(sourceFile: string, targetFile: string) {
+  sourceFile = path.dirname(sourceFile);
+  return path.relative(sourceFile, targetFile);
 }

 /**
 * 判断给定字符串是否是文件路径
 * @example ./pages/index.js -- yes
 * @example ../pages/index.js -- yes
+ * @example ../components -- yes
 * @example /src/pages/index.js -- yes
 * @example @music163/tango-designer -- no
 * @param str
 */
 export function isFilepath(str: string) {
-  return /^(\.\.?\/|\/).*\.[a-z]+$/.test(str);
+  return /^(\.\.?\/|\/).*(\.[a-z]+)?$/.test(str);
 }
@@ -4,5 +4,5 @@ export * from './helpers';
 export * from './types';

 export { default as generator } from '@babel/generator';
-export { default as traverse } from '@babel/types';
+export { default as traverse } from '@babel/traverse';
 export * from '@babel/parser';
@@ -0,0 +1,40 @@
+import path from 'path';
+import { action, computed, makeObservable, observable } from 'mobx';
+import { TangoModule } from './module';
+import { IWorkspace } from './interfaces';
+import { IExportSpecifierData, IFileConfig } from '../types';
+import { traverseComponentsEntryFile } from '../helpers';
+
+/**
+ * 本地组件目录的入口文件，例如 '/components/index.js' 或 `/blocks/index.js`
+ */
+export class TangoComponentsEntryModule extends TangoModule {
+  exportList: Record<string, IExportSpecifierData>;
+
+  constructor(workspace: IWorkspace, props: IFileConfig) {
+    super(workspace, props, false);
+    this.update(props.code, false, false);
+    makeObservable(this, {
+      _code: observable,
+      _cleanCode: observable,
+      exportList: observable,
+      code: computed,
+      cleanCode: computed,
+      update: action,
+    });
+  }
+
+  _analysisAst() {
+    const baseDir = path.dirname(this.filename);
+    const { exportMap } = traverseComponentsEntryFile(this.ast, baseDir);
+    this.exportList = exportMap;
+    Object.keys(this.exportList).forEach((key) => {
+      this.workspace.componentPrototypes.set(key, {
+        name: key,
+        exportType: 'namedExport',
+        package: baseDir,
+        type: 'element',
+      });
+    });
+  }
+}
@@ -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]);
  }

  /**
@@ -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;
@@ -262,5 +266,5 @@ export interface IWorkspace {
  get pages(): any[];
  get bizComps(): string[];
  get baseComps(): string[];
-  get blocks(): any[];
+  get localComps(): string[];
 }
@@ -22,9 +22,9 @@ export class TangoModule extends TangoFile {
  ast: t.File;

  /**
-   * 导入语句
+   * 导入的依赖列表
   */
-  imports: ImportDeclarationDataType;
+  importList: ImportDeclarationDataType;

  constructor(workspace: IWorkspace, props: IFileConfig, isSyncCode = true) {
    super(workspace, props, isSyncCode);
@@ -46,6 +46,8 @@ export class TangoModule extends TangoFile {

    this._analysisAst();

+    this.workspace.onFilesChange([this.filename]);
+
    if (refreshWorkspace) {
      this.workspace.refresh([this.filename]);
    }
@@ -93,7 +95,7 @@ export class TangoModule extends TangoFile {

  _analysisAst() {
    const { imports } = traverseFile(this.ast);
-    this.imports = imports;
+    this.importList = imports;
  }
 }

@@ -59,7 +59,7 @@ export class TangoServiceModule extends TangoModule {

  _analysisAst() {
    const { imports, services, baseConfig } = traverseServiceFile(this.ast);
-    this.imports = imports;
+    this.importList = imports;
    this._serviceFunctions = services;
    this._baseConfig = baseConfig;
    if (baseConfig.namespace) {
@@ -159,7 +159,7 @@ export class TangoViewModule extends TangoModule implements IViewFile {
    this._cleanCode = ast2code(cleanAst);

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

@@ -180,7 +180,7 @@ export class TangoViewModule extends TangoModule implements IViewFile {
   * 依赖列表
   */
  listImportSources() {
-    return Object.keys(this.imports);
+    return Object.keys(this.importList);
  }

  /**
@@ -227,7 +227,7 @@ export class TangoViewModule extends TangoModule implements IViewFile {
   * @returns
   */
  addImportSpecifiers(source: string, newSpecifiers: IImportSpecifierData[]) {
-    const existSpecifiers = this.imports[source];
+    const existSpecifiers = this.importList[source];
    if (existSpecifiers) {
      const insertedSpecifiers = newSpecifiers.filter((item) => {
        return !existSpecifiers.find((existItem) => existItem.localName === item.localName);
@@ -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);
@@ -1,7 +1,6 @@
 import { action, computed, makeObservable, observable } from 'mobx';
 import { JSXElement } from '@babel/types';
 import {
-  array2object,
  ComponentPrototypeType,
  hasFileExtension,
  isString,
@@ -15,8 +14,6 @@ import {
  isPathnameMatchRoute,
  getJSXElementChildrenNames,
  namesToImportDeclarations,
-  getBlockNameByFilename,
-  getPrivilegeCode,
  prototype2importDeclarationData,
 } from '../helpers';
 import { DropMethod } from './drop-target';
@@ -38,6 +35,7 @@ import { TangoRouteModule } from './route-module';
 import { TangoStoreEntryModule, TangoStoreModule } from './store-module';
 import { TangoServiceModule } from './service-module';
 import { TangoViewModule } from './view-module';
+import { TangoComponentsEntryModule } from './component-module';

 export interface IWorkspaceOptions {
  /**
@@ -59,7 +57,7 @@ export interface IWorkspaceOptions {
  /**
   * 工作区文件变更事件
   */
-  onFilesChange?: (filenames: string[]) => void;
+  onFilesChange?: IWorkspace['onFilesChange'];
 }

 /**
@@ -75,8 +73,14 @@ export class Workspace extends EventTarget implements IWorkspace {
   */
  files: Map<string, TangoFile>;

+  /**
+   * 组件配置
+   */
  componentPrototypes: Map<string, ComponentPrototypeType>;

+  /**
+   * 入口文件
+   */
  entry: string;

  /**
@@ -94,12 +98,6 @@ export class Workspace extends EventTarget implements IWorkspace {
   */
  activeViewFile: string;

-  /**
-   * 本地区块 { [blockName]: filePath }
-   * FIXME: 修正类型 Record<string, TangoBlockModule>
-   */
-  localBlocks: Record<string, string>;
-
  /**
   * 路由配置模块
   */
@@ -114,6 +112,8 @@ export class Workspace extends EventTarget implements IWorkspace {

  serviceModules: Record<string, TangoServiceModule> = {};

+  componentsEntryModule: TangoComponentsEntryModule;
+
  /**
   * package.json 文件
   */
@@ -124,17 +124,6 @@ export class Workspace extends EventTarget implements IWorkspace {
   */
  tangoConfigJson: TangoJsonFile;

-  /**
-   * appJson.json 文件
-   * FIXME: 是否保留 ???
-   */
-  appJson: TangoJsonFile;
-
-  /**
-   * 代码变更回调
-   */
-  onFilesChange?: (filenames: string[]) => void;
-
  /**
   * 绑定事件
   * TODO: 是否需要自己来管理 listeners，并及时进行 gc
@@ -170,15 +159,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,
        });
      }
    });
@@ -213,8 +199,8 @@ export class Workspace extends EventTarget implements IWorkspace {
    return list;
  }

-  get blocks() {
-    return Object.keys(this.localBlocks);
+  get localComps(): string[] {
+    return Object.keys(this.componentsEntryModule.exportList);
  }

  constructor(options?: IWorkspaceOptions) {
@@ -223,14 +209,17 @@ export class Workspace extends EventTarget implements IWorkspace {
    this.selectSource = new SelectSource(this);
    this.dragSource = new DragSource(this);
    this.componentPrototypes = new Map();
-    this.localBlocks = {};
    this.entry = options?.entry;
    this.activeRoute = options?.defaultActiveRoute || '/';
    this.activeFile = options?.entry;
    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);
@@ -245,8 +234,6 @@ export class Workspace extends EventTarget implements IWorkspace {
      activeRoute: observable,
      activeFile: observable,
      activeViewFile: observable,
-      localBlocks: observable,
-      blocks: computed,
      pages: computed,
      bizComps: computed,
      setActiveRoute: action,
@@ -342,6 +329,10 @@ export class Workspace extends EventTarget implements IWorkspace {
        module = new TangoStoreEntryModule(this, props);
        this.storeEntryModule = module;
        break;
+      case FileType.ComponentsEntryModule:
+        module = new TangoComponentsEntryModule(this, props);
+        this.componentsEntryModule = module;
+        break;
      case FileType.RouteModule: {
        module = new TangoRouteModule(this, props);
        this.routeModule = module;
@@ -363,19 +354,6 @@ export class Workspace extends EventTarget implements IWorkspace {
        module = new TangoStoreModule(this, props);
        this.storeModules[module.name] = module;
        break;
-      case FileType.BlockEntryModule: {
-        const blockName = getBlockNameByFilename(props.filename);
-        const prototype: ComponentPrototypeType = {
-          name: blockName,
-          exportType: 'defaultExport',
-          package: props.filename,
-          type: 'block',
-        };
-        this.localBlocks[blockName] = props.filename;
-        this.componentPrototypes.set(blockName, prototype);
-        module = new TangoViewModule(this, props);
-        break;
-      }
      case FileType.Module:
        module = new TangoJsModule(this, props);
        break;
@@ -390,10 +368,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;
@@ -420,8 +394,22 @@ export class Workspace extends EventTarget implements IWorkspace {
    this.storeEntryModule.addStore(storeName).update();
  }

+  /**
+   * 添加视图文件
+   * @param viewName 文件名
+   * @param code 代码
+   */
  addViewFile(viewName: string, code: string) {
-    // TODO: implement it
+    const viewRoute = viewName.startsWith('/') ? viewName : `/${viewName}`;
+    const filename = `/src/pages/${viewName}.js`;
+    this.addFile(filename, code);
+    this.addRoute(
+      {
+        name: viewName,
+        path: viewRoute,
+      },
+      filename,
+    );
  }

  updateFile(filename: string, code: string, shouldFormatCode = false) {
@@ -517,51 +505,14 @@ 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);
  }

-  /**
-   * 添加新的视图文件
-   * @deprecated 使用 addViewFile 代替
-   * FIXME: 重构这个逻辑
-   * @param route 视图名
-   * @param code 视图代码
-   */
-  addViewPage(routeConfig: string | IPageConfigData, code: string) {
-    const config =
-      typeof routeConfig === 'string'
-        ? {
-            name: routeConfig,
-            path: routeConfig.startsWith('/') ? routeConfig : `/${routeConfig}`,
-          }
-        : routeConfig;
-
-    const filename = getFilepath(config.path, '/src/pages', '.js');
-    this.addFile(filename, code);
-    this.addRoute(config, filename);
-  }
-
  /**
   * 添加新的路由
   */
  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 +524,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 +635,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 +1114,10 @@ export class Workspace extends EventTarget implements IWorkspace {
    }
  }

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

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

+  // 组件配置文件
+  ComponentPrototypeModule = 'componentPrototypeModule',
+  // 组件运行调试入口文件，一般为 `/app.js`
+  ComponentDemoEntryModule = 'componentDemoEntryModule',
+  /**
+   * 本地组件目录的入口文件
+   */
+  ComponentsEntryModule = 'componentsEntryModule',
+  /**
+   * @deprecated 已废弃
+   */
+  BlockEntryModule = 'blockEntryModule',
+
+  // jsx 类型视图文件
  JsxViewModule = 'jsxViewModule',
+  // json 类型视图文件
  JsonViewModule = 'jsonViewModule',

  // 非 js 文件
@@ -72,6 +86,24 @@ export interface ITangoViewNodeData<T = JSXElement> {
  children?: Array<ITangoViewNodeData<T>>;
 }

+/**
+ * 导出变量数据
+ */
+export interface IExportSpecifierData {
+  /**
+   * 来源
+   */
+  source: string;
+  /**
+   * exported name
+   */
+  exportedName: string;
+  /**
+   * local name
+   */
+  localName?: string;
+}
+
 /**
 * 导入变量的来源
 */
@@ -100,7 +132,6 @@ export interface IImportSpecifierData {

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

@@ -193,7 +224,7 @@ export interface IPageConfigData {
   */
  name?: string;
  /**
-   * PMS 权限码
+   * 权限码
   */
  privilegeCode?: string;
 }
@@ -129,8 +129,10 @@ describe('string helpers', () => {
    expect(getRelativePath('/src/pages/index.js', '/src/blocks/sample-block/index.js')).toEqual(
      '../blocks/sample-block/index.js',
    );
-    // TODO: fix me
-    // expect(getRelativePath('/src/pages/', '/src/pages/index.js')).toEqual('./index.js');
+    expect(getRelativePath('/src/pages/index.js', '/src/components')).toEqual('../components');
+    expect(getRelativePath('/src/pages/index.js', '/src/components/input.js')).toEqual(
+      '../components/index.js',
+    );
  });

  it('getFilepath', () => {
@@ -143,7 +145,9 @@ describe('string helpers', () => {
    expect(isFilepath('./pages/index.js')).toBeTruthy();
    expect(isFilepath('../pages/index.js')).toBeTruthy();
    expect(isFilepath('./pages/index.css')).toBeTruthy();
-    expect(isFilepath('/src/pages/index.js')).toBeTruthy();
+    expect(isFilepath('./src/pages/index.js')).toBeTruthy();
+    expect(isFilepath('./src/components')).toBeTruthy();
+    expect(isFilepath('../src/components')).toBeTruthy();
    expect(isFilepath('path')).toBeFalsy();
    expect(isFilepath('path-browserify')).toBeFalsy();
    expect(isFilepath('@music/one')).toBeFalsy();
@@ -3,6 +3,63 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [1.0.0-alpha.2](https://github.com/netease/tango/compare/@music163/tango-designer@1.0.0-alpha.1...@music163/tango-designer@1.0.0-alpha.2) (2023-12-13)
+
+### Bug Fixes
+
+- update variable tree with help messages and styling & add tangoConfig schema ([5e7e285](https://github.com/netease/tango/commit/5e7e285452b46888b447991b0e8548b6392acb3a))
+
+# [1.0.0-alpha.1](https://github.com/netease/tango/compare/@music163/tango-designer@0.5.14...@music163/tango-designer@1.0.0-alpha.1) (2023-12-12)
+
+### Bug Fixes
+
+- add showSearch and showGroups to SettingForm & update internal icons ([#73](https://github.com/netease/tango/issues/73)) ([a8357f4](https://github.com/netease/tango/commit/a8357f45b8b0c1f2b91a856918f6bdecdc65aa73))
+- render form item without setter & enhance tools ([#76](https://github.com/netease/tango/issues/76)) ([1acfa68](https://github.com/netease/tango/commit/1acfa6864b1faad1a441facc426d8d94b6b090b5))
+
+## [0.5.14](https://github.com/netease/tango/compare/@music163/tango-designer@0.5.13...@music163/tango-designer@0.5.14) (2023-12-04)
+
+**Note:** Version bump only for package @music163/tango-designer
+
+## [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
@@ -1,6 +1,6 @@
 {
  "name": "@music163/tango-designer",
-  "version": "0.5.6",
+  "version": "1.0.0-alpha.3",
  "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-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-context": "^1.0.0-alpha.2",
+    "@music163/tango-core": "^1.0.0-alpha.2",
+    "@music163/tango-helpers": "^1.0.0-alpha.0",
+    "@music163/tango-sandbox": "^1.0.0-alpha.2",
+    "@music163/tango-setting-form": "^1.0.0-alpha.2",
+    "@music163/tango-ui": "^1.0.0-alpha.2",
    "antd": "^4.24.2",
    "cash-dom": "^8.1.2",
    "classnames": "^2.3.2",
@@ -11,6 +11,7 @@ import {
  Empty,
  Popconfirm,
  Tooltip,
+  Alert,
 } from 'antd';
 import { Box, Text, css } from 'coral-system';
 import {
@@ -166,7 +167,7 @@ export function EditableVariableTree({
      height={height}
      position="relative"
    >
-      <Box p="l" width="40%" borderRight="solid" borderColor="line.normal">
+      <Box p="l" width="40%">
        <Box mb="m" position="sticky" top="0" bg="white" zIndex={2}>
          <Input.Group compact>
            <Search
@@ -201,68 +202,75 @@ export function EditableVariableTree({
        />
      </Box>
      {node ? (
-        <Panel
-          title={
-            {
-              preview: '变量值预览',
-              add: '添加变量',
-              define: '变量定义',
-            }[mode]
-          }
-          extra={
-            hasPanelSwitch && mode !== 'add' ? (
-              <Radio.Group
-                optionType="button"
-                buttonStyle="solid"
-                size="small"
-                value={mode}
-                onChange={(e) => setMode(e.target.value)}
-                options={previewOptions}
+        <Box width="60%" position="sticky" top="0">
+          {node.help && (
+            <Alert
+              type="info"
+              message={`使用说明：${node.help}`}
+              closable
+              style={{ marginBottom: 12 }}
+            />
+          )}
+          <Panel
+            shape="solid"
+            title={
+              {
+                preview: '变量值预览',
+                add: '添加变量',
+                define: '变量定义',
+              }[mode]
+            }
+            extra={
+              hasPanelSwitch && mode !== 'add' ? (
+                <Radio.Group
+                  optionType="button"
+                  buttonStyle="solid"
+                  size="small"
+                  value={mode}
+                  onChange={(e) => setMode(e.target.value)}
+                  options={previewOptions}
+                />
+              ) : null
+            }
+            bodyProps={{ px: 'm' }}
+          >
+            {mode === 'preview' && (
+              <ValuePreview
+                value={getPreviewValue(node)}
+                onSelect={(valuePath) => {
+                  return ['tango', node.key.replaceAll('.', '?.'), valuePath].join('.');
+                }}
              />
-            ) : null
-          }
-          width="60%"
-          borderRadius="m"
-          position="sticky"
-          top="0"
-          bodyProps={{ px: 'm' }}
-        >
-          {mode === 'preview' && (
-            <ValuePreview
-              value={getPreviewValue(node)}
-              onSelect={(valuePath) => {
-                return ['tango', node.key.replaceAll('.', '?.'), valuePath].join('.');
-              }}
-            />
-          )}
-          {mode === 'define' && (
-            <NodeDefineForm
-              node={node}
-              onSave={onSave}
-              onDelete={(item) => {
-                const [type, storeName, stateName] = item.key.split('.');
-                onDeleteVariable(storeName, stateName);
-                setNode(null);
-              }}
-            />
-          )}
-          {mode === 'add' && (
-            <AddNodeForm
-              parentNode={node}
-              onCancel={() => {
-                setMode(defaultMode);
-                setNode(null);
-              }}
-              onSubmit={(storeName, data) => {
-                onAddVariable(storeName, data);
-                setMode(defaultMode);
-                setNode(null);
-              }}
-            />
-          )}
-        </Panel>
+            )}
+            {mode === 'define' && (
+              <NodeDefineForm
+                node={node}
+                onSave={onSave}
+                onDelete={(item) => {
+                  const [type, storeName, stateName] = item.key.split('.');
+                  onDeleteVariable(storeName, stateName);
+                  setNode(null);
+                }}
+              />
+            )}
+            {mode === 'add' && (
+              <AddNodeForm
+                parentNode={node}
+                onCancel={() => {
+                  setMode(defaultMode);
+                  setNode(null);
+                }}
+                onSubmit={(storeName, data) => {
+                  onAddVariable(storeName, data);
+                  setMode(defaultMode);
+                  setNode(null);
+                }}
+              />
+            )}
+          </Panel>
+        </Box>
      ) : (
-        <Panel title="提示" flex="1" position="sticky" top="0">
+        <Panel shape="solid" title="提示" flex="1" position="sticky" top="0">
          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="请从左侧列表中选择一个变量" />
        </Panel>
      )}
@@ -317,6 +325,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;
  }
@@ -465,11 +477,11 @@ interface NodePreviewProps {

 export function ValuePreview({ value, onSelect }: NodePreviewProps) {
  if (isNil(value)) {
-    return <span>暂时没有可预览的数据</span>;
+    return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂时没有可预览的数据" />;
  }

  if (isFunction(value)) {
-    return <span>暂不支持预览函数</span>;
+    return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂不支持预览函数" />;
  }

  if (typeof value === 'object') {
@@ -499,7 +511,7 @@ function NodeDefineForm({ node, onSave = noop, onDelete = noop }: NodeDefineProp
  const [error, setError] = useState('');
  const [editable, { on, off }] = useBoolean();
  if (isNil(node.raw)) {
-    return <Empty description="缺失定义数据" />;
+    return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="缺失定义数据" />;
  }
  return (
    <Box>
@@ -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,
@@ -72,7 +72,6 @@ export function getElementData(
  const bounding = getElementBoundingData(element, relativeContainer);
  const data = getElementDataProps(element);
  const dnd = parseDndId(data.dnd);
-  // FIXME: 是否改为按需执行，仅 dropTarget 需要 display 信息，且目前 display 信息并不准确
  const display = getElementCSSDisplay(element);
  return {
    id: dnd.id,
@@ -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());
@@ -413,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();
        }}
      />
@@ -168,4 +168,6 @@ const setters: IFormItemCreateOptions[] = [
  { name: 'borderSetter', component: BorderSetter },
 ];

-setters.forEach(register);
+export function registerBuiltinSetters() {
+  setters.forEach(register);
+}
@@ -4,7 +4,9 @@ import { SettingForm, FormModel, SettingFormProps } from '@music163/tango-settin
 import { Panel } from '@music163/tango-ui';
 import { clone } from '@music163/tango-helpers';
 import { observer, useDesigner, useWorkspace } from '@music163/tango-context';
-import './setters';
+import { registerBuiltinSetters } from './setters';
+
+registerBuiltinSetters();

 export interface SettingPanelProps extends SettingFormProps {
  title?: React.ReactNode;
@@ -13,7 +13,7 @@ import { QuestionCircleOutlined } from '@ant-design/icons';
 import { Button, Empty, Spin, Popover } from 'antd';
 import { getDragGhostElement } from '../helpers';

-type MenuKeyType = 'common' | 'atom' | 'snippet' | 'block' | 'bizComp';
+type MenuKeyType = 'common' | 'atom' | 'snippet' | 'bizComp' | 'localComp';
 type MenuValueType = Array<{ title: string; items: string[] }>;
 export type MenuDataType = PartialRecord<MenuKeyType, MenuValueType>;

@@ -26,10 +26,6 @@ export interface ComponentsPanelProps {
   * 展示业务组件分类
   */
  showBizComps?: boolean;
-  /**
-   * 展示基础组件分类
-   */
-  showBlocks?: boolean;
  /**
   * 动态加载物料 loading，避免未加载完成用户点击空列表
   */
@@ -47,7 +43,7 @@ const localeMap = {
  atom: '原子组件',
  snippet: '组合',
  bizComp: '业务组件',
-  block: '区块',
+  localComp: '本地组件',
 };

 const emptyMenuData: MenuDataType = {
@@ -78,19 +74,18 @@ export const ComponentsPanel = observer(
  ({
    menuData = emptyMenuData,
    showBizComps = true,
-    showBlocks = true,
    getBizCompName = upperCamelCase,
    loading = false,
  }: ComponentsPanelProps) => {
    const [keyword, setKeyword] = useState<string>('');
    const allList = useFlatMenuData<MenuDataType>(menuData);
    const workspace = useWorkspace();
-    const [bizCompData, blockData] = useMemo(
+    const [bizCompData, localCompData] = useMemo(
      () => [
        [{ title: '已安装业务组件', items: workspace.bizComps.map(getBizCompName) }],
-        [{ title: '项目区块', items: workspace.blocks }],
+        [{ title: '本地组件', items: workspace.localComps }],
      ],
-      [workspace.bizComps, workspace.blocks, getBizCompName],
+      [workspace.bizComps, workspace.localComps, getBizCompName],
    );

    const tabs = Object.keys(menuData).map((key) => ({
@@ -106,11 +101,12 @@ export const ComponentsPanel = observer(
        children: <MaterialList type="bizComp" data={bizCompData} />,
      });
    }
-    if (showBlocks) {
+
+    if (localCompData.length) {
      tabs.push({
-        key: 'block',
-        label: localeMap.block,
-        children: <MaterialList type="block" data={blockData} />,
+        key: 'localComps',
+        label: localeMap.localComp,
+        children: <MaterialList data={localCompData} />,
      });
    }
    const contentNode =
@@ -145,7 +141,7 @@ interface MaterialListProps {
  /**
   * 物料类型
   */
-  type?: 'common' | 'bizComp' | 'block';
+  type?: 'common' | 'bizComp' | 'localComp';
 }

 function MaterialList({ data, filterKeyword, type = 'common' }: MaterialListProps) {
@@ -175,7 +171,7 @@ function MaterialList({ data, filterKeyword, type = 'common' }: MaterialListProp
                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="没有匹配到任何组件" />
              )}
              <Grid
-                columns={type === 'block' ? 1 : 2}
+                columns={type === 'localComp' ? 1 : 2}
                spacing="1px"
                bg="background.normal"
                padding="0"
@@ -185,9 +181,7 @@ function MaterialList({ data, filterKeyword, type = 'common' }: MaterialListProp
                  if (!prototype) {
                    logger.log(`<${item}> prototype not found!`);
                  }
-                  return prototype ? (
-                    <MaterialGrid key={item} data={prototype} type={type} />
-                  ) : null;
+                  return prototype ? <MaterialGrid key={item} data={prototype} /> : null;
                })}
                {addBlock && <Box bg="white" />}
              </Grid>
@@ -201,7 +195,6 @@ function MaterialList({ data, filterKeyword, type = 'common' }: MaterialListProp

 interface MaterialProps {
  data: ComponentPrototypeType;
-  type: 'common' | 'atom' | 'snippet' | 'bizComp' | 'block';
 }

 const StyledCommonGridItem = styled.div`
@@ -219,11 +212,6 @@ const StyledCommonGridItem = styled.div`
  text-overflow: ellipsis;
  white-space: nowrap;

-  &[class~='block-item'] {
-    flex-direction: row;
-    justify-content: flex-start;
-  }
-
  .material-icon {
    font-size: 40px;
  }
@@ -260,7 +248,7 @@ const StyledCommonGridItem = styled.div`
  }
 `;

-function MaterialGrid({ data, type }: MaterialProps) {
+function MaterialGrid({ data }: MaterialProps) {
  const workspace = useWorkspace();

  const handleDragStart = (e: React.DragEvent) => {
@@ -286,7 +274,6 @@ function MaterialGrid({ data, type }: MaterialProps) {
      data-name={data.name}
      onDragStart={handleDragStart}
      onDragEnd={handleDragEnd}
-      className={type === 'block' ? 'block-item' : null}
    >
      {icon.startsWith('icon-') ? (
        <IconFont className="material-icon" type={data.icon || 'icon-placeholder'} />
@@ -296,7 +283,7 @@ function MaterialGrid({ data, type }: MaterialProps) {
      <Text fontSize="12px" lineHeight="1.5">
        {data.title}
      </Text>
-      <Text fontSize="12px" color={type === 'block' ? 'inherit' : 'gray.50'}>
+      <Text fontSize="12px" color="gray.50">
        {data.name}
      </Text>
      {data.docs || data.help ? (
@@ -1,9 +1,9 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import { observer, useWorkspace, useWorkspaceData } from '@music163/tango-context';
 import { Box, css } from 'coral-system';
-import { Button, FormProps, Empty, Space, Dropdown } from 'antd';
+import { Button, FormProps, Empty, Space, Dropdown, Form, Select, Input } from 'antd';
 import { PlayCircleOutlined } from '@ant-design/icons';
-import { Form, InputCode, Panel, JsonView, Search } from '@music163/tango-ui';
+import { InputCode, Panel, JsonView, Search } from '@music163/tango-ui';
 import {
  isNil,
  getVariableContent,
@@ -37,15 +37,6 @@ enum ServiceFunctionMethodType {
  // DELETE = 'DELETE',
 }

-/**
- * requestType
- * headers: Content-Type
- */
-enum DataServiceRequestType {
-  'application/json' = 'json',
-  'application/x-www-form-urlencoded' = 'x-www-form-urlencoded',
-}
-
 /**
 * 将 api 路径转换为默认的驼峰方法名
 */
@@ -79,12 +70,6 @@ const httpMethods = Object.keys(ServiceFunctionMethodType).map((key) => ({
  value: key,
 }));

-// requestType 类型
-const requestTypes = Object.keys(DataServiceRequestType).map((key) => ({
-  label: key,
-  value: DataServiceRequestType[key],
-}));
-
 const detailFormStyle = css`
  .ant-form-item {
    margin-bottom: 12px;
@@ -261,8 +246,8 @@ function ServiceDetailForm({
  return (
    <Form
      form={form}
-      labelCol={6}
-      wrapperCol={17}
+      labelCol={{ span: 6 }}
+      wrapperCol={{ span: 17 }}
      colon={false}
      layout="horizontal"
      initialValues={initialValues}
@@ -285,12 +270,9 @@ function ServiceDetailForm({
            required: true,
          },
        ]}
-        component="select"
-        componentProps={{
-          options: serviceModules,
-          disabled: disabled || isModifyMode,
-        }}
-      />
+      >
+        <Select options={serviceModules} disabled={disabled || isModifyMode} />
+      </Form.Item>
      <Form.Item
        label="方法名"
        name="name"
@@ -308,11 +290,6 @@ function ServiceDetailForm({
            },
          },
        ]}
-        component="input"
-        componentProps={{
-          placeholder: '请输入数据服务调用名称',
-          disabled: disabled || isModifyMode,
-        }}
        extra={
          !disabled &&
          !isModifyMode && (
@@ -331,38 +308,15 @@ function ServiceDetailForm({
            </Box>
          )
        }
-      />
-      <Form.Item
-        label="路径"
-        name="url"
-        rules={[{ required: true, type: 'url' }]}
-        component="input"
-        componentProps={{
-          placeholder: '请输入数据服务调用名称',
-          disabled: disabled || isModifyMode,
-        }}
-      />
-      <Form.Item
-        label="方法"
-        name="method"
-        component="select"
-        componentProps={{
-          options: httpMethods,
-          placeholder: '请选择 HTTP 请求方法',
-          disabled,
-        }}
-      />
-      <Form.Item
-        label="编码类型"
-        name="requestType"
-        tooltip="设置请求头的 Content-Type，若不设置，则默认变为为 JSON"
-        component="select"
-        componentProps={{
-          options: requestTypes,
-          placeholder: '请求头Content-Type，默认为JSON',
-          disabled,
-        }}
-      />
+      >
+        <Input placeholder="请输入数据服务调用名称" disabled={disabled || isModifyMode} />
+      </Form.Item>
+      <Form.Item label="路径" name="url" rules={[{ required: true, type: 'url' }]}>
+        <Input placeholder="请输入数据服务调用名称" disabled={disabled || isModifyMode} />
+      </Form.Item>
+      <Form.Item label="方法" name="method">
+        <Select options={httpMethods} placeholder="请选择 HTTP 请求方法" disabled={disabled} />
+      </Form.Item>
      <Form.Item
        label="格式化响应"
        name="formatter"
@@ -366,19 +366,19 @@ function RenderItem({
              </Popconfirm>,
            ]
          : baseNeedUpgrade
-          ? [
-              <Popconfirm
-                title={`确认升级 ${record.name} 到 ${basePackage.version} 吗？`}
-                onConfirm={() => onDepUpgrade({ version: basePackage.version })}
-              >
-                <a key="upgrade">升级</a>
-              </Popconfirm>,
-            ]
-          : [
-              <Text key="latest" color={'rgba(0, 0, 0, 0.45)'}>
-                {!isUndefined(baseNeedUpgrade) && '已是最新'}
-              </Text>,
-            ]
+            ? [
+                <Popconfirm
+                  title={`确认升级 ${record.name} 到 ${basePackage.version} 吗？`}
+                  onConfirm={() => onDepUpgrade({ version: basePackage.version })}
+                >
+                  <a key="upgrade">升级</a>
+                </Popconfirm>,
+              ]
+            : [
+                <Text key="latest" color={'rgba(0, 0, 0, 0.45)'}>
+                  {!isUndefined(baseNeedUpgrade) && '已是最新'}
+                </Text>,
+              ]
      }
    >
      <List.Item.Meta
@@ -453,7 +453,7 @@ function AddDependencyModal({

  const onFinishCallback = (name?: string) => {
    name && message.success(`${name} 添加成功`);
-    // FIXME: 修复沙箱添加组件后 HMR 失效的 bug，添加完刷新
+    // TIP: 修复沙箱添加组件后 HMR 失效的 bug，添加完刷新
    sandbox.reload();
    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>
    );
  },
-);
+);
@@ -1,8 +1,8 @@
 import React from 'react';
-import { Button, Space } from 'antd';
-import { useBoolean } from '@music163/tango-helpers';
-import { Panel, Form, IconButton } from '@music163/tango-ui';
+import { Button, Space, Form, Input } from 'antd';
 import { FileAddOutlined, QuestionCircleOutlined } from '@ant-design/icons';
+import { useBoolean } from '@music163/tango-helpers';
+import { Panel, IconButton } from '@music163/tango-ui';
 import { observer, useWorkspace, useWorkspaceData } from '@music163/tango-context';
 import { EditableVariableTree, EditableVariableTreeProps } from '../components';

@@ -30,7 +30,6 @@ export const VariablePanel = observer(

    return (
      <Panel
-        shape="solid"
        className="ModelView"
        height={wrapperHeight}
        title="视图模型与变量管理"
@@ -91,9 +90,10 @@ interface AddStoreFormProps {

 function AddStoreForm({ existNames = [], onCancel, onSubmit }: AddStoreFormProps) {
  return (
-    <Panel title="添加模型" subTitle="模型可以用来组织一组变量">
+    <Panel title="添加模型" subTitle="模型可以用来组织一组变量" bodyProps={{ p: 'l' }}>
      <Form
        autoComplete="off"
+        colon={false}
        onFinish={(values) => {
          onSubmit && onSubmit(values);
        }}
@@ -113,11 +113,9 @@ function AddStoreForm({ existNames = [], onCancel, onSubmit }: AddStoreFormProps
              },
            },
          ]}
-          component="input"
-          componentProps={{
-            placeholder: '请输入模型名称',
-          }}
-        />
+        >
+          <Input placeholder="请输入模型名称" />
+        </Form.Item>
        <Form.Item label=" ">
          <Space>
            <Button onClick={onCancel}>取消</Button>
@@ -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',
+    },
+  },
+});
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box } from 'coral-system';
-import { ToggleButton, IconFont } from '@music163/tango-ui';
+import { ToggleButton, RedoOutlined, UndoOutlined } from '@music163/tango-ui';
 import { observer, useWorkspace } from '@music163/tango-context';

 export const HistoryTool = observer(() => {
@@ -10,24 +10,24 @@ export const HistoryTool = observer(() => {
      <ToggleButton
        shape="ghost"
        disabled={!workspace.history.couldBack || workspace.history.index === 0}
-        tip="撤销"
+        tooltip="撤销"
        onClick={() => {
          workspace.history.back();
          workspace.selectSource.clear();
        }}
      >
-        <IconFont type="icon-undo" />
+        <UndoOutlined />
      </ToggleButton>
      <ToggleButton
        shape="ghost"
        disabled={!workspace.history.couldForward}
-        tip="重做"
+        tooltip="重做"
        onClick={() => {
          workspace.history.forward();
          workspace.selectSource.clear();
        }}
      >
-        <IconFont type="icon-redo" />
+        <RedoOutlined />
      </ToggleButton>
    </Box>
  );
@@ -1,8 +1,9 @@
 import React from 'react';
 import { Group } from 'coral-system';
 import { Modal } from 'antd';
-import { ToggleButton } from '@music163/tango-ui';
+import { ToggleButton, CodeOutlined } from '@music163/tango-ui';
 import { observer, useDesigner, useWorkspace } from '@music163/tango-context';
+import { BorderOutlined } from '@ant-design/icons';

 export const ModeSwitchTool = observer(() => {
  const workspace = useWorkspace();
@@ -17,7 +18,7 @@ export const ModeSwitchTool = observer(() => {
        }}
        tooltip="设计视图"
      >
-        设计
+        <BorderOutlined />
      </ToggleButton>
      <ToggleButton
        shape="ghost"
@@ -36,7 +37,7 @@ export const ModeSwitchTool = observer(() => {
        }}
        tooltip="源码视图"
      >
-        源码
+        <CodeOutlined />
      </ToggleButton>
    </Group>
  );
@@ -17,7 +17,7 @@ export const PreviewTool = observer(() => {
          designer.setActiveView('design');
        }
      }}
-      tip="预览"
+      tooltip="预览"
    >
      <EyeOutlined />
    </ToggleButton>
@@ -1,10 +1,10 @@
 import React, { useMemo, useState } from 'react';
-import { Button, Popconfirm, Modal, ModalProps } from 'antd';
+import { Button, Popconfirm, Modal, ModalProps, Form, Input } from 'antd';
 import { Box, css, Group, Text } from 'coral-system';
 import { FileOutlined, DeleteOutlined, CopyOutlined, SettingOutlined } from '@ant-design/icons';
 import { array2object, callAll } from '@music163/tango-helpers';
 import { IPageConfigData } from '@music163/tango-core';
-import { Form, ToggleButton } from '@music163/tango-ui';
+import { ToggleButton } from '@music163/tango-ui';
 import { observer, useWorkspace } from '@music163/tango-context';

 export const RouteSwitchTool = observer(() => {
@@ -71,6 +71,7 @@ function PageSelect({ value, onSelect, onRemove, onUpdate, onCopy, options }: Pa
          }}
        />
      }
+      icon={<FileOutlined />}
    >
      {current?.name || current?.label || value}
    </ToggleButton>
@@ -249,17 +250,13 @@ function CopyViewModalForm({
      }}
    >
      <Form
-        wrapperCol={20}
+        wrapperCol={{ span: 20 }}
        form={form}
        initialValues={{ name: current?.name, path: current?.path }}
      >
-        <Form.Item
-          label="页面标题"
-          name="name"
-          required
-          component="input"
-          componentProps={{ placeholder: '请输入标题' }}
-        />
+        <Form.Item label="页面标题" name="name" required>
+          <Input placeholder="请输入标题" />
+        </Form.Item>
        <Form.Item
          label="页面路由"
          name="path"
@@ -280,11 +277,9 @@ function CopyViewModalForm({
              message: '非法的路由地址',
            },
          ]}
-          component="input"
-          componentProps={{
-            placeholder: '输入页面路由',
-          }}
-        />
+        >
+          <Input placeholder="请输入页面路由" />
+        </Form.Item>
      </Form>
    </Modal>
  );
@@ -1,7 +1,13 @@
 import React from 'react';
 import { observer, useDesigner } from '@music163/tango-context';
 import { Box } from 'coral-system';
-import { IconFont, ToggleButton } from '@music163/tango-ui';
+import {
+  OpenPanelFilledLeftOutlined,
+  OpenPanelFilledRightOutlined,
+  OpenPanelLeftOutlined,
+  OpenPanelRightOutlined,
+  ToggleButton,
+} from '@music163/tango-ui';

 export const TogglePanelTool = observer(() => {
  const designer = useDesigner();
@@ -14,20 +20,15 @@ export const TogglePanelTool = observer(() => {
          designer.setActiveSidebarPanel(designer.activeSidebarPanel ? '' : 'outline');
        }}
      >
-        <IconFont
-          type={
-            designer.activeSidebarPanel ? 'icon-open-panel-filled-left' : 'icon-open-panel-left'
-          }
-        />
+        {designer.activeSidebarPanel ? <OpenPanelFilledLeftOutlined /> : <OpenPanelLeftOutlined />}
      </ToggleButton>
      <ToggleButton
        tooltip="隐藏/显示右侧面板"
        shape="ghost"
        onClick={() => designer.toggleRightPanel()}
+        disabled={designer.activeView === 'code'}
      >
-        <IconFont
-          type={designer.showRightPanel ? 'icon-open-panel-filled-right' : 'icon-open-panel-right'}
-        />
+        {designer.showRightPanel ? <OpenPanelFilledRightOutlined /> : <OpenPanelRightOutlined />}
      </ToggleButton>
    </Box>
  );
@@ -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>
@@ -1,6 +1,6 @@
 {
  "name": "@music163/tango-helpers",
-  "version": "0.1.8",
+  "version": "1.0.0-alpha.0",
  "description": "Shared types, helpers, and hooks of tango-apps",
  "keywords": [
    "shared",
@@ -43,7 +43,7 @@ describe('string', () => {
    expect(isVariableString('{"hello"}')).toBeTruthy();
    expect(isVariableString('{ foo: "bar" }')).toBeFalsy();
    expect(isVariableString('{ type: tango.stores?.homePage?.tabKey }')).toBeFalsy();
-    // expect(isVariableString('{ type: tango.stores.homePage.tabKey }')).toBeFalsy(); // FIXME: fix this case
+    // expect(isVariableString('{ type: tango.stores.homePage.tabKey }')).toBeFalsy(); // TIP: failed
    expect(isVariableString('{ foo: "bar" }')).toBeFalsy();
  });

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

+# [1.0.0-alpha.1](https://github.com/netease/tango/compare/@music163/tango-sandbox@0.1.16...@music163/tango-sandbox@1.0.0-alpha.1) (2023-12-12)
+
+**Note:** Version bump only for package @music163/tango-sandbox
+
+## [0.1.16](https://github.com/netease/tango/compare/@music163/tango-sandbox@0.1.15...@music163/tango-sandbox@0.1.16) (2023-12-04)
+
+**Note:** Version bump only for package @music163/tango-sandbox
+
+## [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
@@ -1,6 +1,6 @@
 {
  "name": "@music163/tango-sandbox",
-  "version": "0.1.11",
+  "version": "1.0.0-alpha.2",
  "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.6",
-    "@music163/tango-helpers": "^0.1.8",
+    "@music163/tango-core": "^1.0.0-alpha.2",
+    "@music163/tango-helpers": "^1.0.0-alpha.0",
    "crypto-js": "^4.1.1",
    "lodash.isequal": "4.5.0",
    "react-frame-component": "^5.2.4"
@@ -3,6 +3,42 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [1.0.0-alpha.1](https://github.com/netease/tango/compare/@music163/tango-setting-form@0.2.16...@music163/tango-setting-form@1.0.0-alpha.1) (2023-12-12)
+
+### Bug Fixes
+
+- add showSearch and showGroups to SettingForm & update internal icons ([#73](https://github.com/netease/tango/issues/73)) ([a8357f4](https://github.com/netease/tango/commit/a8357f45b8b0c1f2b91a856918f6bdecdc65aa73))
+- render form item without setter & enhance tools ([#76](https://github.com/netease/tango/issues/76)) ([1acfa68](https://github.com/netease/tango/commit/1acfa6864b1faad1a441facc426d8d94b6b090b5))
+
+## [0.2.16](https://github.com/netease/tango/compare/@music163/tango-setting-form@0.2.15...@music163/tango-setting-form@0.2.16) (2023-12-04)
+
+**Note:** Version bump only for package @music163/tango-setting-form
+
+## [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
@@ -1,6 +1,6 @@
 {
  "name": "@music163/tango-setting-form",
-  "version": "0.2.10",
+  "version": "1.0.0-alpha.2",
  "description": "setting form of tango-apps",
  "author": "wwsun <ww.sun@outlook.com>",
  "homepage": "",
@@ -28,13 +28,13 @@
  },
  "dependencies": {
    "@ant-design/icons": "^4.8.0",
-    "@music163/tango-core": "^0.2.6",
-    "@music163/tango-helpers": "^0.1.8",
-    "@music163/tango-ui": "^0.1.11",
+    "@music163/tango-core": "^1.0.0-alpha.2",
+    "@music163/tango-helpers": "^1.0.0-alpha.0",
+    "@music163/tango-ui": "^1.0.0-alpha.2",
    "antd": "^4.24.2",
    "coral-system": "^1.0.5",
-    "mobx": "6.9.0",
-    "mobx-react-lite": "4.0.2"
+    "mobx": "6.12.0",
+    "mobx-react-lite": "4.0.5"
  },
  "publishConfig": {
    "access": "public",
@@ -8,14 +8,15 @@ import {
  useBoolean,
 } from '@music163/tango-helpers';
 import { isWrappedByExpressionContainer } from '@music163/tango-core';
-import { IconFont, ToggleButton } from '@music163/tango-ui';
-import { QuestionCircleOutlined } from '@ant-design/icons';
-import { InputProps, Tooltip } from 'antd';
+import { ToggleButton, CodeOutlined } from '@music163/tango-ui';
+import { InputProps } from 'antd';
 import { useFormModel, useFormVariable } from './context';
 import { FormControl } from './form-ui';
+import { Box, Text } from 'coral-system';

 export interface FormItemProps extends ComponentPropType {
  extra?: React.ReactNode;
+  footer?: React.ReactNode;
 }

 export interface FormItemComponentProps<T = any> {
@@ -76,6 +77,7 @@ export function createFormItem(options: IFormItemCreateOptions) {
    getVisible: getVisibleProp,
    getSetterProps: getSetterPropsProp,
    extra,
+    footer,
  }: FormItemProps) {
    const { disableSwitchExpressionSetter } = useFormVariable();
    const model = useFormModel();
@@ -106,8 +108,11 @@ export function createFormItem(options: IFormItemCreateOptions) {

    let expProps = {};

-    // FIXME: 重新考虑这段代码的位置
-    if (['expressionSetter', 'actionSetter', 'eventSetter'].includes(setter) || isVariable) {
+    // FIXME: 重新考虑这段代码的位置，外置这个逻辑
+    if (
+      ['expressionSetter', 'expSetter', 'actionSetter', 'eventSetter'].includes(setter) ||
+      isVariable
+    ) {
      expProps = {
        modalTitle: title,
        modalTip: tip,
@@ -141,7 +146,8 @@ export function createFormItem(options: IFormItemCreateOptions) {
        docs={docs}
        error={field.error}
        extra={
-          <>
+          <Box>
+            {extra}
            {!disableVariableSetter ? (
              <ToggleButton
                borderRadius="s"
@@ -153,12 +159,12 @@ export function createFormItem(options: IFormItemCreateOptions) {
                selected={isVariable}
                onClick={() => toggleIsVariable()}
              >
-                <IconFont type="icon-brackets-curly" />
+                <CodeOutlined />
              </ToggleButton>
            ) : null}
-            {extra}
-          </>
+          </Box>
        }
+        footer={footer}
        data-setter={setterName}
        data-field={name}
      >
@@ -187,10 +193,6 @@ export function register(config: IFormItemCreateOptions) {
  });
 }

-const iconStyle = {
-  color: 'red',
-};
-
 export function SettingFormItem(props: FormItemProps) {
  const { setter } = props;
  const Comp = REGISTERED_FORM_ITEM_MAP[setter];
@@ -199,10 +201,10 @@ export function SettingFormItem(props: FormItemProps) {
    return (
      <Fallback
        {...props}
-        extra={
-          <Tooltip title={`${props.name}: invalid setter ${props.setter}`}>
-            <QuestionCircleOutlined color="red" style={iconStyle} />
-          </Tooltip>
+        footer={
+          <Text color="red" mt="m">
+            {props.setter} is invalid
+          </Text>
        }
      />
    );
@@ -7,6 +7,7 @@ import { isNil, isString } from '@music163/tango-helpers';
 export interface FormControlProps extends Omit<FormLabelProps, 'type'> {
  visible: boolean;
  extra?: React.ReactNode;
+  footer?: React.ReactNode;
  error?: string;
  children?: React.ReactNode;
 }
@@ -18,6 +19,7 @@ export function FormControl({
  tip,
  docs,
  extra,
+  footer,
  error,
  children,
  ...rest
@@ -29,6 +31,7 @@ export function FormControl({
        {extra}
      </Box>
      <Box>{children}</Box>
+      {footer}
      {!!error && (
        <Box mt="m" color="red">
          {error}
@@ -83,7 +83,15 @@ export interface SettingFormProps {
   */
  prototype?: ComponentPrototypeType;
  /**
-   * 选项分组信息
+   * 是否显示搜索框
+   */
+  showSearch?: boolean;
+  /**
+   * 是否显示分组导航
+   */
+  showGroups?: boolean;
+  /**
+   * 选项分组信息，用于对表单项进行分组展示，如未提供，则使用内置的分组信息
   */
  groupOptions?: IFormTabsGroupOption[];
  /**
@@ -98,6 +106,8 @@ export function SettingForm({
  model: modelProp,
  defaultValue,
  onChange = noop,
+  showSearch = true,
+  showGroups = true,
  groupOptions = internalGroups,
 }: SettingFormProps) {
  const [keyword, setKeyword] = useState('');
@@ -107,10 +117,8 @@ export function SettingForm({
  const componentPropGroups = useMemo(() => {
    return normalizeComponentProps(componentProps);
  }, [componentProps]);
+
  const filterProps = useMemo(() => {
-    if (!keyword) {
-      return componentPropGroups[tabKey] || [];
-    }
    const computedProps = mapTreeData(componentProps, (node) => {
      const { getProp, ...rest } = node;
      return {
@@ -118,8 +126,19 @@ export function SettingForm({
        ...getProp?.(model),
      };
    });
+
+    // 没有进行搜索的情况
+    if (!keyword) {
+      if (showGroups) {
+        return componentPropGroups[tabKey] || [];
+      } else {
+        return computedProps;
+      }
+    }
+
+    // 用户进行搜索的情况
    return filterComponentProps(computedProps, keyword);
-  }, [keyword, componentProps, tabKey, model]);
+  }, [keyword, componentProps, tabKey, model, showGroups, componentPropGroups]);

  const renderProps = useCallback(
    (props: ComponentPropType[]) =>
@@ -129,15 +148,7 @@ export function SettingForm({
          ...rest,
          ...getProp?.(model),
        };
-        const FormChild = isValidNestProps(childProto.props)
-          ? SettingFormObject
-          : childProto.setter
-          ? SettingFormItem
-          : null;
-
-        if (!FormChild) {
-          return null;
-        }
+        const FormChild = isValidNestProps(childProto.props) ? SettingFormObject : SettingFormItem;
        return <FormChild key={item.name} {...childProto} />;
      }),
    [model],
@@ -155,15 +166,17 @@ export function SettingForm({
      <FormModelProvider value={model}>
        <Box className="SettingForm" mb="xl" css={formStyle}>
          <Box className="SettingFormHeader" position="sticky" top="0" bg="white" zIndex="2">
-            <Box className="SettingFormSearch" px="l" py="m">
-              <Search
-                placeholder="搜索属性"
-                onChange={(val) => {
-                  setKeyword(val?.trim());
-                }}
-              />
-            </Box>
-            {!keyword && (
+            {showSearch && (
+              <Box className="SettingFormSearch" px="l" py="m">
+                <Search
+                  placeholder="搜索属性"
+                  onChange={(val) => {
+                    setKeyword(val?.trim());
+                  }}
+                />
+              </Box>
+            )}
+            {!keyword && showGroups && (
              <Box className="SettingFormNav">
                <Tabs activeKey={tabKey} onChange={setTabKey}>
                  {groupOptions.map((group) => (
@@ -1,5 +1,5 @@
 import { register } from './form-item';
-import { ExpressionSetter } from './setter';
+import { ExpressionSetter, TextSetter } from './setter';

 // 预注册基础 Setter
 register({
@@ -7,6 +7,11 @@ register({
  component: ExpressionSetter,
 });

+register({
+  name: 'textSetter',
+  component: TextSetter,
+});
+
 export * from './form';
 export * from './form-item';
 export * from './form-object';
@@ -1,7 +1,12 @@
 import React from 'react';
+import { Input } from 'antd';
+import { InputCode } from '@music163/tango-ui';
 import { FormItemComponentProps } from './form-item';

-// FIXME: 内置 ExpressionSetter，默认全部 fallback 到此 setter
-export function ExpressionSetter(props: FormItemComponentProps<string>) {
-  return <div>exp setter</div>;
+export function ExpressionSetter({ value, onChange, ...rest }: FormItemComponentProps<string>) {
+  return <InputCode onChange={(val) => onChange?.(val)} value={value || ''} {...rest} />;
+}
+
+export function TextSetter({ onChange, ...rest }: FormItemComponentProps<string>) {
+  return <Input onChange={(e) => onChange?.(e.target.value)} {...rest} />;
 }
@@ -0,0 +1,10 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## 1.0.2 (2023-12-13)
+
+### Bug Fixes
+
+- update variable tree with help messages and styling & add tangoConfig schema ([5e7e285](https://github.com/NetEase/tango/commit/5e7e285452b46888b447991b0e8548b6392acb3a))
@@ -0,0 +1,3 @@
+# Tango Config Spec
+
+This is the specification for the Tango Config format.
@@ -0,0 +1,27 @@
+{
+  "name": "tango-spec",
+  "version": "1.0.2",
+  "description": "tango config spec",
+  "keywords": [
+    "json",
+    "schema"
+  ],
+  "author": "wwsun <ww.sww@outlook.com>",
+  "homepage": "https://github.com/NetEase/tango#readme",
+  "license": "MIT",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/NetEase/tango.git"
+  },
+  "scripts": {
+    "test": "node ./__tests__/spec.test.js"
+  },
+  "bugs": {
+    "url": "https://github.com/NetEase/tango/issues"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}
@@ -0,0 +1,118 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "https://unpkg.com/tango-spec/tango-config.json",
+  "title": "JSON Schema of tango.config.json",
+  "description": "tango.config.json is a configuration file for NetEase Tango apps",
+  "type": "object",
+  "properties": {
+    "packages": {
+      "type": "object",
+      "patternProperties": {
+        "^(?:@[a-z0-9-~][a-z0-9-._~]*/)?[a-z0-9-~][a-z0-9-._~]*$": {
+          "type": "object",
+          "properties": {
+            "description": {
+              "type": "string",
+              "description": "package description"
+            },
+            "version": {
+              "type": "string",
+              "description": "package version"
+            },
+            "library": {
+              "type": "string",
+              "description": "package library"
+            },
+            "type": {
+              "type": "string",
+              "description": "package type",
+              "enum": ["dependency", "bizDependency", "baseDependency"]
+            },
+            "resources": {
+              "type": "array",
+              "items": {
+                "type": "string"
+              },
+              "description": "package resources"
+            },
+            "designerResources": {
+              "type": "array",
+              "items": {
+                "type": "string"
+              },
+              "description": "package designer resources"
+            }
+          },
+          "additionalProperties": false,
+          "required": ["version", "library"]
+        }
+      },
+      "additionalProperties": false
+    },
+    "dataSource": {
+      "type": "object",
+      "properties": {
+        "ox": {
+          "type": "object",
+          "description": "music ox data provider",
+          "properties": {
+            "key": {
+              "type": "string",
+              "description": "dataSource provider name"
+            },
+            "value": {
+              "type": "array",
+              "items": {
+                "type": "object",
+                "properties": {
+                  "app": {
+                    "type": "string",
+                    "description": "app name"
+                  },
+                  "branch": {
+                    "type": "string",
+                    "description": "branch name"
+                  }
+                },
+                "additionalProperties": false,
+                "required": ["app", "branch"]
+              }
+            }
+          }
+        }
+      }
+    },
+    "proxy": {
+      "type": "object",
+      "properties": {
+        "key": {
+          "type": "string",
+          "description": "the path of proxy rule"
+        },
+        "value": {
+          "type": "object",
+          "properties": {
+            "target": {
+              "type": "string",
+              "description": "the target of proxy rule"
+            },
+            "changeOrigin": {
+              "type": "boolean",
+              "description": "whether change origin of proxy rule"
+            }
+          },
+          "additionalProperties": false,
+          "required": ["target"]
+        }
+      }
+    },
+    "externalResources": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      }
+    }
+  },
+  "additionalProperties": true,
+  "required": ["packages"]
+}
@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [1.0.0-alpha.1](https://github.com/netease/tango/compare/@music163/tango-ui@0.1.12...@music163/tango-ui@1.0.0-alpha.1) (2023-12-12)
+
+### Bug Fixes
+
+- add showSearch and showGroups to SettingForm & update internal icons ([#73](https://github.com/netease/tango/issues/73)) ([a8357f4](https://github.com/netease/tango/commit/a8357f45b8b0c1f2b91a856918f6bdecdc65aa73))
+- disable search keymap of InputCode ([#72](https://github.com/netease/tango/issues/72)) ([9db6358](https://github.com/netease/tango/commit/9db635858876ee0b9612e4b2ccd996280fc35d3b))
+- render form item without setter & enhance tools ([#76](https://github.com/netease/tango/issues/76)) ([1acfa68](https://github.com/netease/tango/commit/1acfa6864b1faad1a441facc426d8d94b6b090b5))
+
+## [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
@@ -1,6 +1,6 @@
 {
  "name": "@music163/tango-ui",
-  "version": "0.1.11",
+  "version": "1.0.0-alpha.2",
  "description": "ui widgets of tango",
  "keywords": [
    "react",
@@ -34,14 +34,13 @@
  },
  "dependencies": {
    "@ant-design/icons": "^4.8.0",
-    "@codemirror/autocomplete": "^6.10.2",
+    "@codemirror/autocomplete": "^6.11.1",
    "@codemirror/lang-javascript": "^6.2.1",
    "@codemirror/lint": "^6.4.2",
-    "@codemirror/search": "^6.5.4",
-    "@music163/tango-helpers": "^0.1.8",
-    "@uiw/react-codemirror": "^4.21.20",
+    "@codemirror/search": "^6.5.5",
+    "@music163/tango-helpers": "^1.0.0-alpha.0",
+    "@uiw/react-codemirror": "^4.21.21",
    "antd": "^4.24.2",
-    "antd-easy-form": "^1.1.3",
    "coral-system": "^1.0.5",
    "eslint-linter-browserify": "^8.51.0",
    "react-json-view": "^1.21.3",
@@ -0,0 +1,22 @@
+import React from 'react';
+import { createIcon } from './create-icon';
+
+const CodeOutlinedSvg = () => (
+  <svg
+    viewBox="0 0 32 32"
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="currentColor"
+  >
+    <path d="m31 16-7 7-1.41-1.41 5.58-5.59-5.58-5.59 1.41-1.41z" />
+    <path d="m1 16 7-7 1.41 1.41-5.58 5.59 5.58 5.59-1.41 1.41z" />
+    <path
+      d="m5.91 15h20.17v2h-20.17z"
+      transform="matrix(.25881905 -.96592583 .96592583 .25881905 -3.6 27.31)"
+    />
+    <path d="m0 0h32v32h-32z" fill="none" transform="matrix(0 -1 1 0 0 32)" />
+  </svg>
+);
+
+export const CodeOutlined = createIcon(CodeOutlinedSvg, 'CodeOutlined');
@@ -0,0 +1,13 @@
+import React from 'react';
+import Icon from '@ant-design/icons';
+import type { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
+
+export function createIcon(component: React.ComponentType<any>, displayName?: string) {
+  const CustomIcon = (props: Partial<CustomIconComponentProps>) => (
+    <Icon component={component} {...props} />
+  );
+  if (displayName) {
+    CustomIcon.displayName = displayName;
+  }
+  return CustomIcon;
+}
@@ -0,0 +1,8 @@
+export * from './create-icon';
+export * from './code-outlined';
+export * from './open-panel-filled-left-outlined';
+export * from './open-panel-filled-right-outlined';
+export * from './open-panel-left-outlined';
+export * from './open-panel-right-outlined';
+export * from './undo-outlined';
+export * from './redo-outlined';
@@ -0,0 +1,20 @@
+import React from 'react';
+import { createIcon } from './create-icon';
+
+const OpenPanelFilledLeftOutlinedSvg = () => (
+  <svg
+    width="1em"
+    height="1em"
+    fill="currentColor"
+    viewBox="0 0 32 32"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="m28 4h-24a2 2 0 0 0 -2 2v20a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2v-20a2 2 0 0 0 -2-2zm0 22h-16v-20h16z" />
+    <path d="m0 0h32v32h-32z" fill="none" />
+  </svg>
+);
+
+export const OpenPanelFilledLeftOutlined = createIcon(
+  OpenPanelFilledLeftOutlinedSvg,
+  'OpenPanelFilledLeftOutlined',
+);
@@ -0,0 +1,20 @@
+import React from 'react';
+import { createIcon } from './create-icon';
+
+const OpenPanelFilledRightOutlinedSvg = () => (
+  <svg
+    width="1em"
+    height="1em"
+    fill="currentColor"
+    viewBox="0 0 32 32"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="m28 4h-24a2 2 0 0 0 -2 2v20a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2v-20a2 2 0 0 0 -2-2zm-24 2h16v20h-16z" />
+    <path d="m0 0h32v32h-32z" fill="none" />
+  </svg>
+);
+
+export const OpenPanelFilledRightOutlined = createIcon(
+  OpenPanelFilledRightOutlinedSvg,
+  'OpenPanelFilledRightOutlined',
+);
@@ -0,0 +1,17 @@
+import React from 'react';
+import { createIcon } from './create-icon';
+
+const OpenPanelLeftOutlinedSvg = () => (
+  <svg
+    width="1em"
+    height="1em"
+    fill="currentColor"
+    viewBox="0 0 32 32"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="m28 4h-24a2 2 0 0 0 -2 2v20a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2v-20a2 2 0 0 0 -2-2zm-24 2h6v20h-6zm24 20h-16v-20h16z" />
+    <path d="m0 0h32v32h-32z" fill="none" />
+  </svg>
+);
+
+export const OpenPanelLeftOutlined = createIcon(OpenPanelLeftOutlinedSvg, 'OpenPanelLeftOutlined');
@@ -0,0 +1,20 @@
+import React from 'react';
+import { createIcon } from './create-icon';
+
+const OpenPanelRightOutlinedSvg = () => (
+  <svg
+    width="1em"
+    height="1em"
+    fill="currentColor"
+    viewBox="0 0 32 32"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="m28 4h-24a2 2 0 0 0 -2 2v20a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2v-20a2 2 0 0 0 -2-2zm-24 2h16v20h-16zm24 20h-6v-20h6z" />
+    <path d="m0 0h32v32h-32z" fill="none" />
+  </svg>
+);
+
+export const OpenPanelRightOutlined = createIcon(
+  OpenPanelRightOutlinedSvg,
+  'OpenPanelRightOutlined',
+);
@@ -0,0 +1,16 @@
+import React from 'react';
+import { createIcon } from './create-icon';
+
+const RedoOutlinedSvg = () => (
+  <svg
+    width="1em"
+    height="1em"
+    fill="currentColor"
+    viewBox="0 0 32 32"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="m12 10h12.1851l-3.5874-3.5859 1.4023-1.4141 6 6-6 6-1.4023-1.4146 3.5844-3.5854h-12.1821a6 6 0 0 0 0 12h8v2h-8a8 8 0 0 1 0-16z" />
+  </svg>
+);
+
+export const RedoOutlined = createIcon(RedoOutlinedSvg, 'RedoOutlined');
@@ -0,0 +1,16 @@
+import React from 'react';
+import { createIcon } from './create-icon';
+
+const UndoOutlinedSvg = () => (
+  <svg
+    width="1em"
+    height="1em"
+    fill="currentColor"
+    viewBox="0 0 32 32"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="m20 10h-12.1851l3.5874-3.5859-1.4023-1.4141-6 6 6 6 1.4023-1.4146-3.5844-3.5854h12.1821a6 6 0 0 1 0 12h-8v2h8a8 8 0 0 0 0-16z" />
+  </svg>
+);
+
+export const UndoOutlined = createIcon(UndoOutlinedSvg, 'UndoOutlined');
@@ -1,3 +1,4 @@
+export * from './icons';
 export * from './action-select';
 export * from './code-editor';
 export * from './chat-input';
@@ -19,4 +20,3 @@ export * from './tabs';
 export * from './select-action';
 export * from './copy-clipboard';
 export * from './tag-select';
-export { Form } from 'antd-easy-form';
@@ -153,12 +153,12 @@ export function InputCode({
      autocomplete: buildAutoComplete(autoCompleteContext, options),
    });
  }, [autoCompleteContext, autoCompleteOptions]);
-  const { rootStyle, codeSetup } = useInputCode({ shape, status, showLineNumbers, showFoldGutter });
  const extensions = [javascript({ jsx: true }), globalJavaScriptCompletions];
  if (enableESLint) {
    // @ts-ignore
    extensions.push(lintGutter(), linter(esLint(new eslint.Linter(), eslintConfig)));
  }
+  const { rootStyle, codeSetup } = useInputCode({ shape, status, showLineNumbers, showFoldGutter });

  return (
    <Box className="InputCode" display="flex" alignItems="center" overflow="hidden" {...rootStyle}>
@@ -194,6 +194,7 @@ function useInputCode({
    codeSetup: {
      lineNumbers: showLineNumbers ?? lineNumbers,
      foldGutter: showFoldGutter ?? foldGutter,
+      searchKeymap: false, // 默认关闭搜索快捷键，原因：https://github.com/uiwjs/react-codemirror/issues/280
    },
  };
 }
@@ -1,8 +1,26 @@
-import React, { useMemo } from 'react';
+import React from 'react';
+import styled from 'styled-components';
+import cx from 'classnames';
 import { Tabs as AntTabs, TabsProps as AntTabsProps } from 'antd';

-const defaultTabBarStyle: React.CSSProperties = { paddingLeft: 12, paddingRight: 12, margin: 0 };
-const centerTabBarStyle: React.CSSProperties = { margin: 0 };
+const StyledTabs = styled(AntTabs)<any>`
+  .ant-tabs-nav {
+    padding-left: 12px;
+    padding-right: 12px;
+    margin: 0;
+  }
+
+  &.sticky .ant-tabs-nav {
+    position: sticky;
+    top: ${(props) => props.$stickyOffset};
+    z-index: 2;
+    background: #fff;
+  }
+
+  &.ant-tabs-centered .ant-tabs-nav {
+    margin: 0;
+  }
+`;

 export interface TabsProps extends AntTabsProps {
  isTabBarSticky?: boolean;
@@ -13,22 +31,18 @@ export function Tabs({
  centered,
  isTabBarSticky = false,
  tabBarStickyOffset = 0,
+  className,
  ...rest
 }: TabsProps) {
-  const tabBarStyle = useMemo(() => {
-    let ret = centered ? centerTabBarStyle : defaultTabBarStyle;
-    if (isTabBarSticky) {
-      ret = { ...ret, position: 'sticky', top: tabBarStickyOffset, zIndex: 2, background: '#fff' };
-    }
-    return ret;
-  }, [centered, isTabBarSticky, tabBarStickyOffset]);
+  const classNames = cx(className, { sticky: isTabBarSticky });

  return (
-    <AntTabs
+    <StyledTabs
      size="small"
      tabBarGutter={24}
      centered={centered}
-      tabBarStyle={tabBarStyle}
+      className={classNames}
+      $stickyOffset={tabBarStickyOffset}
      {...rest}
    />
  );
@@ -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 {
@@ -72,18 +64,18 @@ const buttonStyle = css`

  &.shape-outline {
    background-color: #fff;
-    border: 1px solid #d9d9d9;
+    border: 1px solid var(--tango-colors-line2);
    border-radius: var(--tango-radii-s);

    &.disabled {
-      color: rgba(0, 0, 0, 0.25);
-      background-color: #f5f5f5;
+      color: var(--tango-colors-text4);
+      background-color: var(--tango-colors-fill1);
    }

    &.selected.type-normal {
      color: var(--tango-colors-gray-100);
-      background-color: var(--tango-colors-gray-30);
-      border-color: var(--tango-colors-gray-30);
+      background-color: var(--tango-colors-fill3);
+      border-color: var(--tango-colors-line2);
    }

    &.selected.type-primary {
@@ -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>
  );
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
wwsun	45b0d856c1	chore(release): publish - @music163/tango-context@1.0.0-alpha.2 - @music163/tango-core@1.0.0-alpha.2 - @music163/tango-designer@1.0.0-alpha.3 - @music163/tango-helpers@1.0.0-alpha.0 - @music163/tango-sandbox@1.0.0-alpha.2 - @music163/tango-setting-form@1.0.0-alpha.2 - @music163/tango-ui@1.0.0-alpha.2	2023-12-19 15:17:19 +08:00
Wells	6fc0498901	feat: support local components (#78 ) * docs: update * feat: parse local components * fix: update * refactor: module exports to exportList * fix: update workspace --------- Co-authored-by: wwsun <ww.sww@outlook.com>	2023-12-19 15:07:44 +08:00
wwsun	f2919c1aa0	chore(release): publish - @music163/tango-designer@1.0.0-alpha.2 - tango-spec@1.0.2	2023-12-13 15:59:20 +08:00
wwsun	5dd5ab62a8	chore: up	2023-12-13 15:57:54 +08:00
Wells	5e7e285452	fix: update variable tree with help messages and styling & add tangoConfig schema * fix: update variable tree with help messages and styling * chore: add spec package * fix: update schema * chore: disabled umi https2 --------- Co-authored-by: wwsun <ww.sww@outlook.com>	2023-12-13 14:03:07 +08:00
wwsun	b3a458a914	chore(release): publish - @music163/tango-context@1.0.0-alpha.1 - @music163/tango-core@1.0.0-alpha.1 - @music163/tango-designer@1.0.0-alpha.1 - @music163/tango-sandbox@1.0.0-alpha.1 - @music163/tango-setting-form@1.0.0-alpha.1 - @music163/tango-ui@1.0.0-alpha.1	2023-12-12 11:12:09 +08:00
Wells	1acfa6864b	fix: render form item without setter & enhance tools (#76 ) * fix: render form item without setter * fix: update toggle-button style * fix: update tools * fix: remove useless code --------- Co-authored-by: wwsun <ww.sww@outlook.com>	2023-12-12 11:10:17 +08:00
Wells	baf071f130	chore: use umi4 (#75 ) Co-authored-by: wwsun <ww.sww@outlook.com>	2023-12-08 15:46:51 +08:00
Wells	6b1d55a11f	RC (#74 ) * chore: up * chore: update release scripts * chore: up * chore: update lerna config * chore(release): publish - @music163/tango-context@1.0.0-alpha.0 - @music163/tango-core@1.0.0-alpha.0 - @music163/tango-designer@1.0.0-alpha.0 - @music163/tango-sandbox@1.0.0-alpha.0 - @music163/tango-setting-form@1.0.0-alpha.0 - @music163/tango-ui@1.0.0-alpha.0 --------- Co-authored-by: wwsun <ww.sww@outlook.com>	2023-12-07 12:40:18 +08:00
Wells	a8357f45b8	fix: add showSearch and showGroups to SettingForm & update internal icons (#73 ) * fix: add internal setters & fix ui * feat: add showSearch and showGroups to SettingForm * fix: update icons * fix: use antd form --------- Co-authored-by: wwsun <ww.sww@outlook.com>	2023-12-07 10:31:19 +08:00
Wells	9db6358588	fix: disable search keymap of InputCode (#72 ) Co-authored-by: wwsun <ww.sww@outlook.com>	2023-12-06 15:33:47 +08:00
wwsun	5bc2fb2d5a	chore: up	2023-12-06 11:33:05 +08:00
wwsun	05a0f8f490	chore(release): publish - @music163/tango-context@0.2.12 - @music163/tango-core@0.2.11 - @music163/tango-designer@0.5.14 - @music163/tango-sandbox@0.1.16 - @music163/tango-setting-form@0.2.16	2023-12-04 18:43:14 +08:00
wwsun	c884712331	fix: update FileType	2023-12-04 18:38:38 +08:00
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