chore(release): publish

- @music163/tango-designer@1.2.3
 - @music163/tango-setting-form@1.2.4
 - @music163/tango-ui@1.2.3

.eslintrc

@@ -0,0 +1,14 @@
+{
+  "extends": ["eslint-config-ali/typescript/react", "prettier"],
+  "ignorePatterns": ["**/dist/**/*", "**/lib/**/*", "**/node_modules/**/*", "scripts/**/*"],
+  "rules": {
+    "@typescript-eslint/consistent-type-definitions": "off",
+    "@typescript-eslint/dot-notation": "off",
+    "@typescript-eslint/no-unused-vars": "warn",
+    "import/no-cycle": "off",
+    "no-nested-ternary": "off",
+    "no-useless-return": "off",
+    "no-param-reassign": "off",
+    "prefer-destructuring": "off"
+  }
+}

.github/workflows/ci.yml

@@ -0,0 +1,49 @@
+name: CI
+# Event设置为main分支的pull request事件，
+# 这里的main分支相当于master分支，github项目新建是把main设置为默认分支，我懒得改了所以就保持这样吧
+on:
+  pull_request:
+    branches: main
+jobs:
+  # 只需要定义一个job并命名为CI
+  CI:
+    runs-on: ubuntu-latest
+    steps:
+      # 拉取项目代码
+      - name: Checkout repository
+        uses: actions/checkout@v2
+      # 给当前环境下载node
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18.x'
+      # 检查缓存
+      # 如果key命中缓存则直接将缓存的文件还原到 path 目录，从而减少流水线运行时间
+      # 若 key 没命中缓存时，在当前Job成功完成时将自动创建一个新缓存
+      - name: Cache
+        # 缓存命中结果会存储在steps.[id].outputs.cache-hit里，该变量在继后的step中可读
+        id: cache-dependencies
+        uses: actions/cache@v3
+        with:
+          # 缓存文件目录的路径
+          path: |
+            **/node_modules
+          # key中定义缓存标志位的生成方式。runner.OS指当前环境的系统。外加对yarn.lock内容生成哈希码作为key值，如果yarn.lock改变则代表依赖有变化。
+          # 这里用yarn.lock而不是package.json是因为package.json中还有version和description之类的描述项目但和依赖无关的属性
+          key: ${{runner.OS}}-${{hashFiles('**/yarn.lock')}}
+      # 安装依赖
+      - name: Installing Dependencies
+        # 如果缓存标志位没命中，则执行该step。否则就跳过该step
+        if: steps.cache-dependencies.outputs.cache-hit != 'true'
+        run: yarn install
+      # 预构建
+      - name: Prebuild
+        run: yarn build
+      # 运行代码扫描
+      - name: Running Lint
+        # 通过前面章节定义的命令行执行代码扫描
+        run: yarn eslint
+      # 运行自动化测试
+      - name: Running Test
+        # 通过前面章节定义的命令行执行自动化测试
+        run: yarn test

.github/workflows/deploy.yml

@@ -0,0 +1,53 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy Github Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ['main']
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'npm'
+      - name: Install dependencies
+        run: yarn install
+      - name: Build
+        run: yarn build
+      - name: Build docs
+        run: yarn typedoc
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          # Upload dist repository
+          path: './docs'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2

.gitignore

@@ -0,0 +1,11 @@
+node_modules/
+dist/
+lib/
+coverage/
+
+/docs
+
+.umi/
+.umi-production/
+.log
+.eslintcache

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn commitlint --edit "$1"

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn lint-staged --allow-empty

.npmrc

@@ -0,0 +1,2 @@
+registry=https://registry.npmmirror.com/
+

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "trailingComma": "all",
+  "singleQuote": true,
+  "printWidth": 100
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 NetEase
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,114 @@
+<p align="center">
+  <img width="200" src="https://p6.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/30218210645/b186/3974/338b/2ddfa3cd042cf988ca452686552f8462.png" />
+</p>
+
+<h1 align="center">Tango LowCode Builder</h1>
+<div align="center">
+
+A source code based low-code builder.
+
+[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/NetEase/tango/blob/main/LICENSE)
+[![NPM version](https://img.shields.io/npm/v/@music163/tango-designer.svg?style=flat-square)](http://npmjs.org/package/@music163/tango-designer)
+
+<img src="https://p6.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/30108735057/7ba9/dced/9ac3/420f6e04b371dd47de06e7d71142560d.gif" alt="preview" />
+
+</div>
+
+English | [简体中文](/README.zh-CN.md)
+
+## 📄 Documentation
+
+You can view the detailed usage guide through the following links:
+
+- Document site: <https://netease.github.io/tango-site/>
+- Playground application: <https://tango-demo.musicfe.com/designer/>
+
+## ✨ Features
+
+- Tested in the production environment of NetEase Cloud Music, can be flexibly integrated into low-code platforms, local development tools, etc.
+- Based on source code AST, with no private DSL and protocol
+  Real-time code generation capability, supporting source code in and source code out
+- Out-of-the-box front-end low-code designer, providing flexible and easy-to-use designer React components
+- Developed using TypeScript, providing complete type definition files
+
+## 🎯 Milestone
+
+```mermaid
+gantt
+    dateFormat  YYYY-MM-DD
+    title       Tango 1.0 Milestones
+    excludes    weekends
+    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
+
+    section Builder Release
+    1.0 Alpha  : m1, 2023-10-01, 2024-01-31
+    1.0 RC     : m2, 2024-02-01, 2024-04-30
+    1.0 Stable : m3, 2024-04-30, 2024-12-31
+```
+
+> [!NOTE]
+> Alpha versions will continue to optimize some implementation protocols and continuously integrate new features from the internal version of NetEase; RC versions will provide a stable parsing protocol and implementation; The 1.0 official version is planned to be released in Q2 2024. After the release of the 1.0 official version, we will continue to iterate on versions and gradually incorporate core capabilities such as process design, component library, and AIGC from the internal version.
+
+## 🌐 Compatibility
+
+- Modern browsers（Chrome >= 80, Edge >= 80, last 2 safari versions, last 2 firefox versions）
+
+## 💻 Development
+
+### Environment
+
+- Node `>= 18`
+- Yarn `>= 1.22 && < 2`
+
+### Development Quick Start
+
+```bash
+# clone the repo
+git clone https://github.com/NetEase/tango.git
+
+# enter the project root
+cd tango
+
+# install dependencies
+yarn
+
+# start the designer playground app
+yarn start
+```
+
+## 💬 Community
+
+Join NetEase Tango Community to share your ideas, suggestions, or questions and connect with other users and contributors.
+
+- Discord: <https://discord.gg/B6hkGTe4Rz>
+- [Usage Trends](https://npm-compare.com/@music163/tango-helpers,@music163/tango-context,@music163/tango-core,@music163/tango-setting-form,@music163/tango-sandbox,@music163/tango-ui,@music163/tango-designer)
+
+## 🤝 Contributing
+
+Please read the [github contribution guide](https://docs.github.com/en/get-started/quickstart/contributing-to-projects) first。
+
+- Clone the repository
+- Create a branch
+- Commit and push your code
+- Open a Pull Request
+
+## 💗 Acknowledgments
+
+Thanks to the NetEase Cloud Music Front-end team, Public Technology team, Live Broadcasting Technology team, and all the developers who participated in the Tango project.
+
+Thank you to CodeSandbox for providing the [Sandpack](https://sandpack.codesandbox.io/) project, which provides powerful online code execution capabilities for Tango.
+
+## 📣 Product Promotion
+
+![](https://p5.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/31629770956/da9e/3a74/4e00/7c69cf46a713f1b008bd1243b5b1ab1c.png)
+
+Don't waste your time restoring the UI, try the NetEase Cloud Music "Seal D2C" development tool! Easily turn your design into code, support React, RN, Vue, WeChat apps and other multi-end scenarios, what you see is what you get!
+
+Experience "Seal D2C" now:
+
+- I'm a Figma user: <https://www.figma.com/community/plugin/1174548852019950797/seal-figma-to-code-d2c/>
+- I'm a MasterGo user: <https://mastergo.com/community/plugin/98956774428196/>
+
+## 📄 License
+
+This project is licensed under the terms of the [MIT license](./LICENSE)

README.zh-CN.md

@@ -0,0 +1,115 @@
+<p align="center">
+  <img width="200" src="https://p6.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/30218210645/b186/3974/338b/2ddfa3cd042cf988ca452686552f8462.png" />
+</p>
+
+<h1 align="center">Tango 低代码设计器</h1>
+<div align="center">
+
+一个源码驱动的低代码设计器框架
+
+[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/NetEase/tango/blob/main/LICENSE)
+[![NPM version](https://img.shields.io/npm/v/@music163/tango-designer.svg?style=flat-square)](http://npmjs.org/package/@music163/tango-designer)
+
+<img src="https://p6.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/30108735057/7ba9/dced/9ac3/420f6e04b371dd47de06e7d71142560d.gif" alt="preview" />
+
+</div>
+
+简体中文 | [English](/README.md)
+
+## 📄 文档
+
+可以通过下面的链接查看详细的使用指南：
+
+- 官方文档站点: <https://netease.github.io/tango-site/>
+- 演示应用: <https://tango-demo.musicfe.com/designer/>
+
+## ✨ 特性
+
+- 经历网易云音乐内网生产环境的实际检验，可灵活集成应用于低代码平台，本地开发工具等
+- 基于源码 AST 驱动，无私有 DSL 和协议
+- 提供实时出码能力，支持源码进，源码出
+- 开箱即用的前端低代码设计器，提供灵活易用的设计器 React 组件
+- 使用 TypeScript 开发，提供完整的类型定义文件
+
+## 🎯 里程碑
+
+```mermaid
+gantt
+    dateFormat  YYYY-MM-DD
+    title       Tango 1.0 Milestones
+    excludes    weekends
+    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
+
+    section Builder Release
+    1.0 Alpha  : m1, 2023-10-01, 2024-01-31
+    1.0 RC     : m2, 2024-02-01, 2024-04-30
+    1.0 Stable : m3, 2024-04-30, 2024-12-31
+```
+
+> [!NOTE]
+> Alpha 版本会持续对一些实现协议进行优化，并持续融合网易内网版本中的新增特性；RC 版本将会提供基本稳定的解析协议和实现；1.0 正式版本计划在 2024 年Q2发布。1.0 正式版发布后我们将会持续进行版本迭代，并逐步融入内网版本中的流程设计、组件库、AIGC 等核心基础能力。
+
+## 🌐 兼容环境
+
+- 现代浏览器（Chrome >= 80, Edge >= 80, last 2 safari versions, last 2 firefox versions）
+
+## 💻 开发
+
+### 推荐开发环境
+
+- Node `>= 18`
+- Yarn `>= 1.22 && < 2`
+
+### 本地开发调试方法
+
+```bash
+# 下载仓库
+git clone https://github.com/NetEase/tango.git
+
+# 进入项目根目录
+cd tango
+
+# 安装依赖
+yarn
+
+# 启动设计器示例
+yarn start
+```
+
+## 💬 社区讨论
+
+参与 NetEase Tango 的社区，以分享您的想法、建议或问题，并与其他用户和贡献者建立联系。
+
+- Discord: <https://discord.gg/B6hkGTe4Rz>
+- [使用趋势](https://npm-compare.com/@music163/tango-helpers,@music163/tango-context,@music163/tango-core,@music163/tango-setting-form,@music163/tango-sandbox,@music163/tango-ui,@music163/tango-designer)
+
+## 🤝 参与共建
+
+请先阅读 [贡献指南](https://docs.github.com/en/get-started/quickstart/contributing-to-projects)。
+
+- 克隆仓库
+- 创建分支
+- 提交代码
+- 合并修改 git rebase master
+- 发起 Pull Request
+
+## 💗 致谢
+
+感谢网易云音乐公共技术团队，大前端团队，直播技术团队，以及所有参与过 Tango 项目的开发者。
+
+感谢 CodeSandbox 提供的 [Sandpack](https://sandpack.codesandbox.io/) 项目，为 Tango 提供了强大的基于浏览器的代码构建与执行能力。
+
+## 📣 产品推广
+
+![](https://p5.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/31629770956/da9e/3a74/4e00/7c69cf46a713f1b008bd1243b5b1ab1c.png)
+
+不要再浪费时间还原 UI 啦，快来试试网易云音乐「海豹 D2C」研发工具吧！轻松将设计稿转为代码，支持 React、RN、Vue、微信小程序等多端场景，所见即所得！
+
+立即体验「海豹 D2C」：
+
+- 我是 Figma 用户：<https://www.figma.com/community/plugin/1174548852019950797/seal-figma-to-code-d2c/>
+- 我是 MasterGo 用户：<https://mastergo.com/community/plugin/98956774428196/>
+
+## 📄 开源协议
+
+此项目遵循 [MIT 开源协议](./LICENSE)

apps/playground/.gitignore

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

apps/playground/.umirc.ts

@@ -0,0 +1,65 @@
+import path from 'path';
+import { defineConfig } from 'umi';
+
+const resolvePackageIndex = (relativeEntry: string) =>
+  path.resolve(__dirname, '../../packages/', relativeEntry);
+
+export default defineConfig({
+  routes: [
+    { path: '/', component: 'index' },
+    { path: '/mail', component: 'mail' },
+    { path: '/docs', component: 'docs' },
+  ],
+  npmClient: 'yarn',
+  mfsu: false,
+  codeSplitting: false,
+  alias: {
+    '@music163/tango-helpers': resolvePackageIndex('helpers/src/index.ts'),
+    '@music163/tango-core': resolvePackageIndex('core/src/index.ts'),
+    '@music163/tango-context': resolvePackageIndex('context/src/index.ts'),
+    '@music163/tango-ui': resolvePackageIndex('ui/src/index.ts'),
+    '@music163/tango-designer': resolvePackageIndex('designer/src/index.ts'),
+    '@music163/tango-sandbox': resolvePackageIndex('sandbox/src/index.ts'),
+    '@music163/tango-setting-form': resolvePackageIndex('setting-form/src/index.ts'),
+  },
+  externals: {
+    react: 'React',
+    'react-dom': 'ReactDOM',
+    'styled-components': 'styled',
+    moment: 'moment',
+    antd: 'antd',
+  },
+  headScripts: [
+    'https://unpkg.com/react@18.2.0/umd/react.development.js',
+    'https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js',
+    'https://unpkg.com/react-is@18.2.0/umd/react-is.production.min.js',
+    'https://unpkg.com/moment/min/moment-with-locales.js',
+    'https://unpkg.com/styled-components@5.3.11/dist/styled-components.js',
+    'https://unpkg.com/antd@4.24.13/dist/antd-with-locales.min.js',
+    'https://unpkg.com/prettier@2.6.0/standalone.js',
+    'https://unpkg.com/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
+      .rule('mjs')
+      .test(/\.mjs$/)
+      .include.add(/node_modules/)
+      .end()
+      .type('javascript/auto');
+    config.module.rule('js').include.add(resolvePackageIndex('context/src'));
+    config.module.rule('js').include.add(resolvePackageIndex('core/src'));
+    config.module.rule('js').include.add(resolvePackageIndex('designer/src'));
+    config.module.rule('js').include.add(resolvePackageIndex('helpers/src'));
+    config.module.rule('js').include.add(resolvePackageIndex('sandbox/src'));
+    config.module.rule('js').include.add(resolvePackageIndex('setting-form/src'));
+    config.module.rule('js').include.add(resolvePackageIndex('ui/src'));
+    return config;
+  },
+  monorepoRedirect: {},
+});

apps/playground/local.netease.com-key.pem

@@ -0,0 +1,28 @@
+-----BEGIN PRIVATE KEY-----
+MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQC4sAqDE3nhtSWD
+YqV4mlglnzIs2AioZr2uxfj/OKrpE1ZML/dflJyc5NGUpOZWV+W1vRc70wWVNFxB
+Si8nrYrrseoID7Ehxxe6+J1m/JsEbhZWHwV3M1iGW7JD7VhujaDpSLg67wMTMpSW
+3BUS+0NT+MNfCisp+u/ls4fXPCTgXiWcjMULm95oLlTeYwurPHfxwn9f9hh85I5I
+K3dI7w8MsQN7EFNrJz3UfrNLpmARMtSUBMwBYqrCitoUxRT0q7KYCru7kHxGPB6A
+SQrFpSpOWT79vp8GBSp9g3axhRsK+aEgzQ0QGrFPHBwBP/kWgmdB1URc/K7STSC9
+xyMNZOM7AgMBAAECggEATbyDYDKVbaRymr+tyHqmuYctdmSkGEXOdz8LFFoEzj/+
+ZekWpVuHJB7H/FoAPb2XiYyCuAKVafz1C+IuwPOx8o0bZbM9KmuDmIZGsm+GzDGO
+I0fBZC/vhfYYrbC8NSRV43thWCT8VVtH4cvW7vtllnWxvlIoYu4lhbiwZ68AEpO1
+8PlJsOhnagfkFpG8LehSDs9if5L+Ig0geQEcUY3pGUM9LKYsRoxFv6Vh8wQku1XD
+YOxLvLWDPqJ75m816t50RARe3e6eDJ+ukzDCoDjmLP8uhf1sk1FcL5aOgUNU3VOi
+P6sIH5uzuD0MA3FXx2mItYLOc44r4uaFJZiRUMEXGQKBgQDCjUYblE4rh0nKFkqx
+AhgfcRgpgLbP42OwFtD0u20RXdZAEJDRDQ43NdOgjFp2B50k75LBPIoFXYUZdzKj
+l7S2FH5O9Cc6hEgZGI4hCiYd+nQVI1mxv820YnzZJN4oooxyL+B5RlnW5cDT7LJN
+11Q5PRewkM+XpfbE3lKUjTNcDwKBgQDzBS+j8T9GJSzV2xgA+mpGHe1RjDq6yQtk
+Rl5GWpflW4Nr3/58BbmCWNA8WP0NOWutJhrkltwLCqJC8OZX/WHnmcmq2k+UAfQQ
+z98p+xcMWOTcl5XIbveuhYoZb2udt9WVJLcpRVxVhEWcBrtHsrpScZXsKYf/TaZ1
+JtCjPU5KFQKBgGXj/UqmYkYzxXZ8NEP998pHvcLGsXew/F2VpXv2yQlmXrYQtvd1
+YfOSUjJsL1hPZoKYogBoB1UGBJYwsimxYyhVFU2eWwkvjF7wWEd/fDUJHVCQwgHw
+lPga+I303BDmCK4o2uRI7vY4P8P92+gelPKhR03mmYIvnky+rvsz9CkLAoGAVerl
+du6Z0jDecxUsnVvrKrL17jjHorXlYyRFvFXXEe2SvxbIIAzeEylXJZ7IiF5epS6t
+n1d+oCC4UTZeGYmpjXofhFn+fHNcWH1FhtAQy/q5nwuwltY0luz7cBamU3Jk/n+m
+id7N0CYdfhYbLDQSD4e822ureyV2zkBUzwGjpikCgYEAoCVbhkxVrQHRmxLC2jDx
+pM94W1ij9TqblfGg3OMpPXjpTdlknatWjBw7JkoyxYiYJq5Gi2p4QV6HHUvS1osj
+BB+4A99/PD9A0ICoJglz8SXlGe/895zwHwpKT9f0zjizQrEd2KCPf75URa+t2FGY
+B2GkXsbChRWVrey5+uMzUD8=
+-----END PRIVATE KEY-----

apps/playground/local.netease.com.pem

@@ -0,0 +1,25 @@
+-----BEGIN CERTIFICATE-----
+MIIEQjCCAqqgAwIBAgIRAIeLJ2jwt4MSKycHFmFXL6YwDQYJKoZIhvcNAQELBQAw
+fTEeMBwGA1UEChMVbWtjZXJ0IGRldmVsb3BtZW50IENBMSkwJwYDVQQLDCB3d3N1
+bkBzdW4tbWJwLmxvY2FsIChTVU4gV2Vpd2VpKTEwMC4GA1UEAwwnbWtjZXJ0IHd3
+c3VuQHN1bi1tYnAubG9jYWwgKFNVTiBXZWl3ZWkpMB4XDTIyMDcyODAxNTIxMFoX
+DTI0MTAyODAxNTIxMFowVDEnMCUGA1UEChMebWtjZXJ0IGRldmVsb3BtZW50IGNl
+cnRpZmljYXRlMSkwJwYDVQQLDCB3d3N1bkBzdW4tbWJwLmxvY2FsIChTVU4gV2Vp
+d2VpKTCCASIwDQYJKoZIhvcNAQEBBQADggEPADCCAQoCggEBALiwCoMTeeG1JYNi
+pXiaWCWfMizYCKhmva7F+P84qukTVkwv91+UnJzk0ZSk5lZX5bW9FzvTBZU0XEFK
+Lyetiuux6ggPsSHHF7r4nWb8mwRuFlYfBXczWIZbskPtWG6NoOlIuDrvAxMylJbc
+FRL7Q1P4w18KKyn67+Wzh9c8JOBeJZyMxQub3mguVN5jC6s8d/HCf1/2GHzkjkgr
+d0jvDwyxA3sQU2snPdR+s0umYBEy1JQEzAFiqsKK2hTFFPSrspgKu7uQfEY8HoBJ
+CsWlKk5ZPv2+nwYFKn2DdrGFGwr5oSDNDRAasU8cHAE/+RaCZ0HVRFz8rtJNIL3H
+Iw1k4zsCAwEAAaNmMGQwDgYDVR0PAQH/BAQDAgWgMBMGA1UdJQQMMAoGCCsGAQUF
+BwMBMB8GA1UdIwQYMBaAFDILZR+SW32Ug0HkAKrH1KT2a1ttMBwGA1UdEQQVMBOC
+EWxvY2FsLm5ldGVhc2UuY29tMA0GCSqGSIb3DQEBCwUAA4IBgQCEdeV2Likl4MUt
+wWeN/X3tAR3L7mkl7e4f0CQ4v2lOs8cekOP7p3ZFk5nSyVbxda3usPB0OtbVTibw
+qZ1n/TMRb5epHroXIMleqngP82zFZNg+WVyHm/ZAml8gVD0VZjYM1Tb+U9+SrgGw
+lvZndbuUXa3h/d0irPH90KsdEeAR1SqwzAzvLO2JgvBuimHRceQWcTiiGWDZOyii
+tux4U+pEzh0Dia40uFozFAoYZPDUpZ+gsiQ3MR3HOrAu2OR0a+CfelDXZNLR3C4z
+cBKr53ajAbHstnpxKJh9IfeKph44PrbDo6HMe1XPprl7idoEesX3Ma3SBgm4lmId
+cfEOUWNIYOgtOT5bflXNNyzXOgYVjpLnjwg4EOASO/XIjhvqdjIyCu7HJMIcZ9oo
+Aob2exeluv5LVwic1UJQDl2McDBIgJ8R32oEN4skCKIBSbWlxWyjnxL5I5WkJF4y
+vlSx8bKAjVr8map0C3rWISuZdgheJkF96qjwhVSxOv++p6srq6M=
+-----END CERTIFICATE-----

apps/playground/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "playground",
+  "version": "0.0.0",
+  "private": true,
+  "author": "Wells <ww.sun@outlook.com>",
+  "scripts": {
+    "dev": "cross-env 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/antd": "^0.2.4",
+    "antd": "^4.24.2",
+    "coral-system": "^1.0.5",
+    "umi": "^4.2.3"
+  }
+}

apps/playground/plugin.ts

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

apps/playground/src/components/foo-setter.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export function FooSetter({ value, ...rest }: any) {
+  return <code {...rest}>fooSetter: {value}</code>;
+}

apps/playground/src/components/index.ts

@@ -0,0 +1 @@
+export * from './foo-setter';

apps/playground/src/components/other-panel.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Row, Switch } from 'antd';
+import { observer } from '@music163/tango-context';
+
+const OtherPanel = observer(({ autoRemove, setAutoRemove }: any) => {
+  const onChange = (checked: boolean) => {
+    setAutoRemove(checked);
+  };
+  return (
+    <Row>
+      <label>自动移除未引用变量：</label>
+      <Switch
+        checkedChildren="开启"
+        unCheckedChildren="关闭"
+        onChange={onChange}
+        checked={autoRemove}
+      />
+    </Row>
+  );
+});
+
+export default OtherPanel;

apps/playground/src/helpers/index.tsx

@@ -0,0 +1,250 @@
+import React from 'react';
+import { Box, Group } from 'coral-system';
+import { Avatar, Space, Switch } from 'antd';
+import { BranchesOutlined, MenuOutlined, QuestionCircleOutlined } from '@ant-design/icons';
+import { registerSetter } from '@music163/tango-designer';
+import type { IVariableTreeNode } from '@music163/tango-helpers';
+import { FooSetter } from '../components';
+
+export * from './mock-files';
+
+export const bootHelperVariables: IVariableTreeNode[] = [
+  {
+    key: '$helpers',
+    title: '工具函数',
+    children: [
+      {
+        title: '设置变量值',
+        key: '() => tango.setStoreValue("variableName", "variableValue")',
+        type: 'function',
+        help: '设置状态值，tango.setStoreValue("variableName", "variableValue")',
+      },
+      {
+        title: '获取变量值',
+        key: '() => tango.getStoreValue("variableName")',
+        type: 'function',
+        help: '获取状态值',
+      },
+      { title: '打开弹窗', key: '() => tango.openModal("")', type: 'function' },
+      { title: '关闭弹窗', key: '() => tango.closeModal("")', type: 'function' },
+      { title: '切换路由', key: '() => tango.navigateTo("/")', type: 'function' },
+      {
+        title: '拷贝到剪贴板',
+        key: '() => tango.copyToClipboard("hello")',
+        type: 'function',
+      },
+    ],
+  },
+];
+
+// 注册自定义 setter
+registerSetter({
+  name: 'fooSetter',
+  component: FooSetter,
+});
+
+// 平台 Logo
+export function Logo() {
+  return (
+    <Box width="50px" display="flex" alignItems="center" justifyContent="center" fontSize="20px">
+      <MenuOutlined />
+    </Box>
+  );
+}
+
+// 项目信息
+export function ProjectDetail() {
+  return (
+    <Box display="flex" alignItems="center" columnGap="l">
+      <Box className="ProjectName" fontSize="18px" fontWeight="bold">
+        community-test
+      </Box>
+      <Box className="BranchName" as="code" fontSize="14px">
+        <BranchesOutlined /> feature/list
+      </Box>
+    </Box>
+  );
+}
+
+export function SidebarFooter() {
+  return (
+    <Space direction="vertical" align="center">
+      <QuestionCircleOutlined style={{ fontSize: 20 }} />
+      <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
+    </Space>
+  );
+}
+
+interface ActionsProps {
+  defaultChecked?: boolean;
+  // eslint-disable-next-line react/no-unused-prop-types
+  onChange?: (checked: boolean) => void;
+}
+
+// 平台核心行动点
+export function Actions({ defaultChecked }: ActionsProps) {
+  return (
+    <Group spacingX="8px">
+      <Switch defaultChecked={defaultChecked} checkedChildren="新版" unCheckedChildren="老版" />
+    </Group>
+  );
+}
+
+export const menuData: any = {
+  // 常用组件
+  common: [
+    {
+      title: '基本',
+      items: [
+        'Button',
+        'ButtonGroup',
+        'ActionList',
+        'Action',
+        'Image',
+        'Text',
+        'MultilineText',
+        'Link',
+        'Title',
+        'Paragraph',
+        'Icon',
+      ],
+    },
+    {
+      title: '数据和逻辑',
+      items: ['When', 'DataProvider', 'Interval', 'Each'],
+    },
+    {
+      title: '基础布局',
+      items: [
+        'Section',
+        'Columns',
+        'Box',
+        'Divider',
+        'Space',
+        'Tabs',
+        'Toolbar',
+        'Modal',
+        'Drawer',
+        'SnippetButtonGroup',
+        'Snippet2ColumnLayout',
+        'Snippet3ColumnLayout',
+        'SnippetSuccessResult',
+      ],
+    },
+    {
+      title: '表单表格',
+      items: [
+        'XTable',
+        'XEditableTable',
+        // 'Table',
+        'XForm',
+        'XFormItem',
+        'XStepForms',
+        // 'SearchForm',
+        // 'Form',
+        // 'FormItem',
+      ],
+    },
+    {
+      title: '常用图表',
+      items: [
+        'ChartContainer',
+        'BarChart',
+        'LineChart',
+        'PieChart',
+        'FunnelChart',
+        'ScatterChart',
+        'RadarChart',
+        'WordCloud',
+      ],
+    },
+    {
+      title: '导航',
+      items: [
+        'Breadcrumb',
+        'Dropdown',
+        'Menu',
+        // 'PageHeader',
+        'Pagination',
+        'Steps',
+      ],
+    },
+    {
+      title: '数据录入',
+      items: [
+        'AutoComplete',
+        'Cascader',
+        'Checkbox',
+        'CheckboxGroup',
+        'DatePicker',
+        'DateRangePicker',
+        'WeekPicker',
+        'MonthPicker',
+        'YearPicker',
+        'Input',
+        'InputNumber',
+        'InputKV',
+        'Mentions',
+        'Radio',
+        'RadioGroup',
+        'Rate',
+        'Select',
+        'Slider',
+        'Switch',
+        'Search',
+        'TextArea',
+        'TimePicker',
+        'TimeRangePicker',
+        'Transfer',
+        'TreeSelect',
+        'Upload',
+        'NosUpload',
+      ],
+    },
+    {
+      title: '数据展示',
+      items: [
+        'Avatar',
+        'Badge',
+        'RibbonBadge',
+        'Calendar',
+        'Card',
+        'Carousel',
+        'Collapse',
+        'Comment',
+        'Descriptions',
+        'Empty',
+        'Image',
+        'List',
+        'Popover',
+        'Statistic',
+        'Table',
+        'Tag',
+        'CheckableTag',
+        'Skeleton',
+        'SkeletonAvatar',
+        'SkeletonButton',
+        'SkeletonInput',
+        'SkeletonImage',
+        'SkeletonNode',
+        'Spin',
+        'Timeline',
+        'Tooltip',
+        'Tree',
+      ],
+    },
+    {
+      title: '反馈',
+      items: [
+        'Alert',
+        'Drawer',
+        // 'Message',
+        'Modal',
+        'Notification',
+        'Popconfirm',
+        'Progress',
+        'Result',
+      ],
+    },
+  ],
+};

apps/playground/src/helpers/mail-files.ts

@@ -0,0 +1,180 @@
+const packageJson = {
+  name: 'demo',
+  private: true,
+  dependencies: {
+    '@music163/tango-mail': '0.1.1',
+    '@music163/tango-boot': '0.2.5',
+    react: '17.0.2',
+    'react-dom': '17.0.2',
+    'prop-types': '15.7.2',
+    tslib: '2.5.0',
+  },
+};
+
+const tangoConfigJson = {
+  designerConfig: {
+    autoGenerateComponentId: true,
+  },
+  packages: {
+    react: {
+      version: '17.0.2',
+      library: 'React',
+      type: 'dependency',
+      resources: ['https://unpkg.com/react@{{version}}/umd/react.development.js'],
+    },
+    'react-dom': {
+      version: '17.0.2',
+      library: 'ReactDOM',
+      type: 'dependency',
+      resources: ['https://unpkg.com/react-dom@{{version}}/umd/react-dom.development.js'],
+    },
+    'react-is': {
+      version: '16.13.1',
+      library: 'ReactIs',
+      type: 'dependency',
+      resources: ['https://unpkg.com/react-is@{{version}}/umd/react-is.production.min.js'],
+    },
+    '@music163/tango-boot': {
+      description: '云音乐低代码运行时框架',
+      version: '0.2.5',
+      library: 'TangoBoot',
+      type: 'baseDependency',
+      resources: ['https://unpkg.com/@music163/tango-boot@{{version}}/dist/boot.js'],
+      // resources: ['http://localhost:9001/boot.js'],
+    },
+    '@music163/tango-mail': {
+      description: 'TangoMail 基础物料',
+      version: '0.1.1',
+      library: 'TangoMail',
+      type: 'baseDependency',
+      resources: ['https://unpkg.com/@music163/tango-mail@{{version}}/dist/index.js'],
+      designerResources: ['https://unpkg.com/@music163/tango-mail@{{version}}/dist/designer.js'],
+    },
+  },
+};
+
+const routesCode = `
+import Mail from "./pages/mail";
+
+const routes = [
+  {
+    path: '/',
+    exact: true,
+    component: Mail,
+  },
+];
+
+export default routes;
+`;
+
+const entryCode = `
+import { runApp } from '@music163/tango-boot';
+import routes from './routes';
+
+runApp({
+  boot: {
+    mountElement: document.querySelector('#root'),
+    qiankun: false,
+  },
+
+  router: {
+    type: 'browser',
+    config: routes,
+  },
+});
+`;
+
+const viewHomeCode = `
+import React from 'react';
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Hr,
+  Html,
+  Preview,
+  Section,
+  Text,
+} from '@music163/tango-mail';
+
+const WelcomeEmail = () => (
+  <Html>
+    <Head />
+    <Preview>The sales intelligence platform that helps you uncover qualified leads.</Preview>
+    <Body style={main}>
+      <Container style={container}>
+        <Text style={paragraph}>Hi wells,</Text>
+        <Text style={paragraph}>
+          Welcome to Koala, the sales intelligence platform that helps you uncover qualified leads
+          and close deals faster.
+        </Text>
+        <Section style={btnContainer}>
+          <Button style={button} href="https://getkoala.com">
+            Get started
+          </Button>
+        </Section>
+        <Text style={paragraph}>
+          Best,
+          <br />
+          The Koala team
+        </Text>
+        <Hr style={hr} />
+        <Text style={footer}>470 Noor Ave STE B #1148, South San Francisco, CA 94080</Text>
+      </Container>
+    </Body>
+  </Html>
+);
+
+const main = {
+  backgroundColor: '#ffffff',
+  fontFamily:
+    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
+};
+
+const container = {
+  margin: '0 auto',
+  padding: '20px 0 48px',
+};
+
+const paragraph = {
+  fontSize: '16px',
+  lineHeight: '26px',
+};
+
+const btnContainer = {
+  textAlign: 'center',
+};
+
+const button = {
+  backgroundColor: '#5F51E8',
+  borderRadius: '3px',
+  color: '#fff',
+  fontSize: '16px',
+  textDecoration: 'none',
+  textAlign: 'center',
+  display: 'block',
+  padding: '12px',
+};
+
+const hr = {
+  borderColor: '#cccccc',
+  margin: '20px 0',
+};
+
+const footer = {
+  color: '#8898aa',
+  fontSize: '12px',
+};
+
+export default WelcomeEmail;
+`;
+
+export const mailFiles = [
+  { filename: '/package.json', code: JSON.stringify(packageJson) },
+  { filename: '/tango.config.json', code: JSON.stringify(tangoConfigJson) },
+  { filename: '/README.md', code: '# readme' },
+  { filename: '/src/index.js', code: entryCode },
+  { filename: '/src/pages/mail.js', code: viewHomeCode },
+  { filename: '/src/routes.js', code: routesCode },
+];

apps/playground/src/helpers/mock-files.ts

@@ -0,0 +1,456 @@
+const packageJson = {
+  name: 'demo',
+  private: true,
+  dependencies: {
+    '@music163/antd': '0.2.5',
+    '@music163/tango-boot': '0.2.5',
+    react: '17.0.2',
+    'react-dom': '17.0.2',
+    'prop-types': '15.7.2',
+    tslib: '2.5.0',
+  },
+};
+
+const tangoConfigJson = {
+  designerConfig: {
+    autoGenerateComponentId: true,
+  },
+  packages: {
+    react: {
+      version: '17.0.2',
+      library: 'React',
+      type: 'dependency',
+      resources: ['https://unpkg.com/react@{{version}}/umd/react.development.js'],
+    },
+    'react-dom': {
+      version: '17.0.2',
+      library: 'ReactDOM',
+      type: 'dependency',
+      resources: ['https://unpkg.com/react-dom@{{version}}/umd/react-dom.development.js'],
+    },
+    'react-is': {
+      version: '16.13.1',
+      library: 'ReactIs',
+      type: 'dependency',
+      resources: ['https://unpkg.com/react-is@{{version}}/umd/react-is.production.min.js'],
+    },
+    'styled-components': {
+      version: '5.3.5',
+      library: 'styled',
+      type: 'dependency',
+      resources: ['https://unpkg.com/styled-components@{{version}}/dist/styled-components.min.js'],
+    },
+    moment: {
+      version: '2.29.4',
+      library: 'moment',
+      type: 'dependency',
+      resources: ['https://unpkg.com/moment@{{version}}/moment.js'],
+    },
+    '@music163/tango-boot': {
+      description: '云音乐低代码运行时框架',
+      version: '0.2.5',
+      library: 'TangoBoot',
+      type: 'baseDependency',
+      resources: ['https://unpkg.com/@music163/tango-boot@{{version}}/dist/boot.js'],
+      // resources: ['http://localhost:9001/boot.js'],
+    },
+    '@music163/antd': {
+      description: '云音乐低代码中后台应用基础物料',
+      version: '0.2.6',
+      library: 'TangoAntd',
+      type: 'baseDependency',
+      resources: [
+        'https://unpkg.com/@music163/antd@{{version}}/dist/index.js',
+        // 'http://localhost:9002/designer.js',
+        'https://unpkg.com/antd@4.24.13/dist/antd.css',
+      ],
+      designerResources: [
+        'https://unpkg.com/@music163/antd@{{version}}/dist/designer.js',
+        'https://unpkg.com/antd@4.24.13/dist/antd.css',
+      ],
+    },
+  },
+};
+
+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";
+import Detail from "./pages/detail";
+
+const routes = [
+  {
+    path: '/',
+    exact: true,
+    component: Index
+  },
+  {
+    path: '/detail',
+    exact: true,
+    component: Detail
+  },
+];
+
+export default routes;
+`;
+
+const storeIndexCode = `
+export { default as app } from './app';
+export { default as counter } from './counter';
+`;
+
+const entryCode = `
+import { runApp } from '@music163/tango-boot';
+import routes from './routes';
+import './services';
+import './stores';
+import './index.less';
+
+runApp({
+  boot: {
+    mountElement: document.querySelector('#root'),
+    qiankun: false,
+  },
+
+  router: {
+    type: 'browser',
+    config: routes,
+  },
+});
+`;
+
+const storeCounter = `
+import { defineStore } from '@music163/tango-boot';
+
+const counter = defineStore({
+  // state
+  num: 0,
+
+  // action
+  increment: () => counter.num++,
+
+  decrement: () => {
+    counter.num--;
+  },
+}, 'counter');
+
+export default counter;
+`;
+
+const viewHomeCode = `
+import React from "react";
+import { definePage } from "@music163/tango-boot";
+import {
+  Page,
+  Section,
+  Button,
+  Input,
+  FormilyForm,
+  FormilyFormItem,
+  Table,
+} from "@music163/antd";
+import { Space } from "@music163/antd";
+import { LocalButton } from "../components";
+import { OutButton } from "../components";
+
+class App extends React.Component {
+  render() {
+    return (
+      <Page title={tango.stores.app.title} subTitle={111}>
+        <Section tid="section0" />
+        <Section tid="section1" title="Section Title">
+          your input: <Input tid="input1" defaultValue="hello" />
+          copy input: <Input value={tango.page.input1?.value} />
+          <Table
+          columns={[
+            { title: "姓名", dataIndex: "name", key: "name" },
+            { title: "年龄", dataIndex: "age", key: "age" },
+            { title: "住址", dataIndex: "address", key: "address" },
+          ]}
+          tid="table1"
+        />
+        </Section>
+        <Section tid="section2">
+          <Space tid="space1">
+            <LocalButton />
+            <OutButton />
+            <Button tid="button1">button</Button>
+          </Space>
+        </Section>
+        <Section title="区块标题" tid="section3">
+          <FormilyForm tid="formilyForm1">
+            <FormilyFormItem name="input1" component="Input" label="表单项" />
+            <FormilyFormItem name="select1" component="Select" label="表单项" />
+          </FormilyForm>
+        </Section>
+        <Section title="原生 DOM" tid="section4">
+          <h1 style={{ ...{ color: "red" }, fontSize: 64 }}>
+            hello world
+          </h1>
+          <div
+            style={{
+              border: "1px solid #ccc",
+              borderRadius: "5px",
+              backgroundColor: "#f4f4f4",
+            }}
+          >
+            <form onSubmit={tango.stores.app.submitForm} style={{
+              padding: "10px",
+            }}>
+              <div>
+                <label>Username:</label>
+                <input
+                  type="text"
+                  id="username"
+                  name="username"
+                  style={{ margin: "5px" }}
+                />
+              </div>
+              <div>
+                <label>Password:</label>
+                <input
+                  type="password"
+                  id="password"
+                  name="password"
+                  style={{ margin: "5px" }}
+                />
+              </div>
+              <div>
+                <label>Role:</label>
+                <select id="role" name="role" style={{ margin: "5px" }}>
+                  <option value="admin">Admin</option>
+                  <option value="user">User</option>
+                </select>
+              </div>
+              <div>
+                <button
+                  type="submit"
+                  style={{
+                    marginTop: '5px',
+                    padding: "3px 10px",
+                    backgroundColor: "#007bff",
+                    color: "#fff",
+                    border: "none",
+                    borderRadius: "5px",
+                  }}
+                >
+                  Submit
+                </button>
+              </div>
+            </form>
+          </div>
+        </Section>
+      </Page>
+    );
+  }
+}
+export default definePage(App);
+`;
+
+export const emptyPageCode = `
+import React from "react";
+import { definePage } from "@music163/tango-boot";
+import {
+  Page,
+  Section,
+} from "@music163/antd";
+
+function App() {
+  return (<Page title="Detail Page">
+    <Section></Section>
+  </Page>)
+}
+
+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 outButtonCode = `
+import React from 'react';
+
+export default function OutButton(props) {
+  return <button {...props}>Out button (from other file)</button>
+}
+`;
+
+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';
+export { default as OutButton } from './out-button';
+`;
+
+const storeApp = `
+import { defineStore } from '@music163/tango-boot';
+
+export default defineStore({
+  title: 'Page Title',
+
+  array: [1, 2, 3],
+
+  test: function() {
+    console.log('test');
+  },
+
+  submitForm: function(event) {
+    event.preventDefault();
+    const formData = new FormData(event.target);
+    const username = formData.get("username");
+    const password = formData.get("password");
+    const role = formData.get("role");
+    console.log("Submitted Data:", { username, password, role });
+  }
+}, 'app');
+`;
+
+const serviceCode = `
+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,
+    headers: {
+      'Content-Type': 'application/json',
+    }
+  },
+  list: {
+    url: 'https://nei.hz.netease.com/api/apimock-v2/c45109399a1d33d83e32a59984b25b00/anchor-list-normal',
+  },
+  add: {
+    url: 'https://nei.hz.netease.com/api/apimock-v2/c45109399a1d33d83e32a59984b25b00/api/users',
+    method: 'post',
+  },
+  update: {
+    url: 'https://nei.hz.netease.com/api/apimock-v2/c45109399a1d33d83e32a59984b25b00/api/users',
+    method: 'post',
+  },
+  delete: {
+    url: 'https://nei.hz.netease.com/api/apimock-v2/c45109399a1d33d83e32a59984b25b00/api/users?id=1',
+  },
+});
+`;
+
+const subServiceCode = `
+import { defineServices } from '@music163/tango-boot';
+
+export default defineServices({
+  list: {
+    url: 'https://nei.hz.netease.com/api/apimock-v2/c45109399a1d33d83e32a59984b25b00/anchor-list-normal',
+  },
+}, {
+  namespace: 'sub',
+});
+`;
+
+const lessCode = `
+body {
+  font-size: 12px;
+}
+`;
+
+const cssCode = `
+* {
+  margin: 0;
+  padding: 0;
+}
+
+p {
+  color: red;
+}
+`;
+
+export const sampleFiles = [
+  { filename: '/package.json', code: JSON.stringify(packageJson) },
+  { 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/pages/detail.js', code: emptyPageCode },
+  { filename: '/src/components/button.js', code: componentsButtonCode },
+  { filename: '/src/components/out-button.js', code: outButtonCode },
+  { 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: helperCode },
+];
+
+export const genDefaultPage = (index: number) => ({
+  name: 'new-page',
+  code: `
+  import React from 'react';
+  import tango, { definePage } from '@music163/tango-boot';
+  import { Page, Section } from '@music163/antd';
+
+  function App() {
+    return (
+      <Page title="空白模板${index}">
+        <Section></Section>
+      </Page>
+    )
+  }
+
+  export default definePage(App);
+  `,
+});

apps/playground/src/helpers/prototypes.ts

@@ -0,0 +1,239 @@
+import * as basePrototypes from '@music163/antd/prototypes';
+import type { IComponentPrototype, Dict } from '@music163/tango-helpers';
+
+const sampleBlockCode = `
+<Section>
+  <Result
+      status="success"
+      title="Successfully Purchased Cloud Server ECS!"
+      subTitle="Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait."
+      extra={[
+        <Button type="primary" key="console">
+          Go Console
+        </Button>,
+        <Button key="buy">Buy Again</Button>,
+      ]}
+    />
+</Section>
+`;
+
+const SnippetSuccessResult: IComponentPrototype = {
+  name: 'SnippetSuccessResult',
+  title: '成功结果',
+  icon: 'icon-tupian',
+  type: 'snippet',
+  package: '@music163/antd',
+  initChildren: sampleBlockCode,
+  relatedImports: ['Section', 'Result', 'Button'],
+};
+
+const Snippet2ColumnLayout: IComponentPrototype = {
+  name: 'Snippet2ColumnLayout',
+  title: '两列布局',
+  icon: 'icon-columns',
+  type: 'snippet',
+  package: '@music163/antd',
+  initChildren: `
+  <Columns columns={12}>
+    <Column colSpan={6}></Column>
+    <Column colSpan={6}></Column>
+  </Columns>
+  `,
+  relatedImports: ['Columns', 'Column'],
+};
+
+const Snippet3ColumnLayout: IComponentPrototype = {
+  name: 'Snippet3ColumnLayout',
+  title: '三列布局',
+  icon: 'icon-column-3',
+  type: 'snippet',
+  package: '@music163/antd',
+  // FIXME: Column 组件 需要更新为 defineComponent
+  initChildren: `
+  <Columns columns={12}>
+    <Column colSpan={4}>
+    </Column>
+    <Column colSpan={4}>
+    </Column>
+    <Column colSpan={4}>
+  </Column>
+  </Columns>
+  `,
+  relatedImports: ['Columns', 'Column'],
+};
+
+const SnippetButtonGroup: IComponentPrototype = {
+  name: 'SnippetButtonGroup',
+  title: '按钮组',
+  icon: 'icon-anniuzu',
+  type: 'snippet',
+  package: '@music163/antd',
+  initChildren: `
+  <Space>
+    <Button type="primary">按钮1</Button>
+    <Button>按钮2</Button>
+  </Space>
+  `,
+  relatedImports: ['Space', 'Button'],
+};
+
+// hack some prototypes
+basePrototypes['Section'].siblingNames = [
+  'SnippetButtonGroup',
+  'Snippet2ColumnLayout',
+  'Snippet3ColumnLayout',
+  'SnippetSuccessResult',
+];
+
+export const nativeDomPrototypes = () => {
+  const doms = [
+    'div',
+    'span',
+    'h1',
+    'h2',
+    'p',
+    'a',
+    'img',
+    'ul',
+    'ol',
+    'li',
+    'input',
+    'button',
+    'form',
+    'table',
+    'tr',
+    'td',
+    'header',
+    'footer',
+    'nav',
+    'section',
+    'article',
+    'aside',
+    'main',
+    'video',
+    'audio',
+    'label',
+    'select',
+    'option',
+    'textarea',
+    'iframe',
+  ];
+  const componentPrototypes: Dict<IComponentPrototype> = doms.reduce(
+    (acc: Dict<IComponentPrototype>, tag) => {
+      acc[tag] = {
+        name: tag,
+        title: tag,
+        hasChildren: true,
+        package: '',
+        type: 'element',
+        props: [
+          {
+            name: 'style',
+            title: '样式',
+            group: 'style',
+            setter: 'expressionSetter',
+          },
+          {
+            name: 'className',
+            title: '类名',
+            setter: 'textSetter',
+          },
+          {
+            name: 'id',
+            title: 'ID',
+            setter: 'textSetter',
+          },
+          {
+            name: 'onClick',
+            title: '点击事件',
+            setter: 'actionSetter',
+            group: 'event',
+          },
+        ],
+      };
+      return acc;
+    },
+    {},
+  );
+  return componentPrototypes;
+};
+
+// iconfont: https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2891794
+const prototypes: Dict<IComponentPrototype> = {
+  ...nativeDomPrototypes(),
+  ...(basePrototypes as any),
+  SnippetSuccessResult,
+  Snippet2ColumnLayout,
+  Snippet3ColumnLayout,
+  SnippetButtonGroup,
+  Box: {
+    name: 'Box',
+    title: '盒子',
+    icon: 'icon-mianban',
+    type: 'container',
+    package: '@music163/antd',
+    hasChildren: true,
+    siblingNames: ['Box'],
+    props: [
+      {
+        name: 'aaa',
+        title: 'aaa',
+        setter: 'textSetter',
+      },
+      {
+        name: 'bbb',
+        title: 'bbb',
+        setter: 'textSetter',
+        deprecated: true,
+      },
+      {
+        name: 'ccc',
+        title: 'ccc',
+        setter: 'textSetter',
+        deprecated: true,
+      },
+      {
+        name: 'd',
+        title: 'd',
+        setter: 'textSetter',
+      },
+    ],
+  },
+  Columns: {
+    name: 'Columns',
+    type: 'container',
+    icon: 'icon-column-4',
+    package: '@music163/antd',
+    hasChildren: true,
+    childrenNames: ['Column'],
+  },
+  Column: {
+    name: 'Column',
+    type: 'container',
+    icon: 'icon-juxing',
+    package: '@music163/antd',
+    hasChildren: true,
+    siblingNames: ['Column'],
+  },
+  Text: {
+    name: 'Text',
+    type: 'element',
+    icon: 'icon-wenzi',
+    package: '@music163/antd',
+    initChildren: '文本内容',
+  },
+  Placeholder: {
+    name: 'Placeholder',
+    type: 'element',
+    package: '@music163/antd',
+  },
+  ButtonGroup: {
+    name: 'ButtonGroup',
+    type: 'element',
+    package: '@music163/antd',
+    hasChildren: true,
+    childrenNames: ['Button'],
+  },
+};
+
+export default prototypes;

apps/playground/src/layouts/index.less

@@ -0,0 +1,6 @@
+@import '~antd/es/style/themes/default.less';
+@import '~antd/dist/antd.less'; // 引入官方提供的 less 样式入口文件
+
+@primary-color: #2f54eb;
+@border-radius-base: 2px;
+

apps/playground/src/layouts/index.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import { Outlet } from 'umi';
+import './index.less';
+
+export default function Layout() {
+  return <Outlet />;
+}

apps/playground/src/pages/docs.tsx

@@ -0,0 +1,9 @@
+const DocsPage = () => {
+  return (
+    <div>
+      <p>This is umi docs.</p>
+    </div>
+  );
+};
+
+export default DocsPage;

apps/playground/src/pages/index.tsx

@@ -0,0 +1,220 @@
+import { Box } from 'coral-system';
+import { Button, Form, Input, Modal, Space } from 'antd';
+import {
+  Designer,
+  DesignerPanel,
+  SettingPanel,
+  Sidebar,
+  Toolbar,
+  WorkspacePanel,
+  WorkspaceView,
+  CodeEditor,
+  Sandbox,
+  DndQuery,
+  themeLight,
+} from '@music163/tango-designer';
+import { createEngine, Workspace } from '@music163/tango-core';
+import prototypes from '../helpers/prototypes';
+import { Logo, ProjectDetail, bootHelperVariables, emptyPageCode, sampleFiles } from '../helpers';
+import {
+  ApiOutlined,
+  AppstoreAddOutlined,
+  BuildOutlined,
+  ClusterOutlined,
+  FunctionOutlined,
+  PlusOutlined,
+  createFromIconfontCN,
+} from '@ant-design/icons';
+import { Action } from '@music163/tango-ui';
+import { useState } from 'react';
+
+const menuData = {
+  common: [
+    {
+      title: '常用',
+      items: [
+        'Button',
+        'Section',
+        'Columns',
+        'Column',
+        'Box',
+        'Text',
+        'Space',
+        'Typography',
+        'Title',
+        'Paragraph',
+        'Table',
+        'Each',
+      ],
+    },
+    {
+      title: '输入',
+      items: ['Input', 'InputNumber', 'Select'],
+    },
+    {
+      title: 'Formily表单',
+      items: ['FormilyForm', 'FormilyFormItem', 'FormilySubmit', 'FormilyReset'],
+    },
+    {
+      title: '数据展示',
+      items: ['Comment'],
+    },
+  ],
+};
+
+// 1. 实例化工作区
+const workspace = new Workspace({
+  entry: '/src/index.js',
+  files: sampleFiles,
+  prototypes,
+});
+
+// inject workspace to window for debug
+(window as any).__workspace__ = workspace;
+
+// 2. 引擎初始化
+const engine = createEngine({
+  workspace,
+  menuData,
+  defaultActiveView: 'design', // dual code design
+});
+
+// @ts-ignore
+window.__workspace__ = workspace;
+
+// 3. 沙箱初始化
+const sandboxQuery = new DndQuery({
+  context: 'iframe',
+});
+
+// 4. 图标库初始化（物料面板和组件树使用了 iconfont 里的图标）
+createFromIconfontCN({
+  scriptUrl: '//at.alicdn.com/t/c/font_2891794_151xsllxqd7.js',
+});
+
+/**
+ * 5. 平台初始化，访问 https://local.netease.com:6006/
+ */
+export default function App() {
+  const [showNewPageModal, setShowNewPageModal] = useState(false);
+  const [form] = Form.useForm();
+  return (
+    <Designer
+      theme={themeLight}
+      engine={engine}
+      config={{
+        customActionVariables: bootHelperVariables,
+        customExpressionVariables: bootHelperVariables,
+      }}
+      sandboxQuery={sandboxQuery}
+    >
+      <DesignerPanel
+        logo={<Logo />}
+        description={<ProjectDetail />}
+        actions={
+          <Box px="l">
+            <Toolbar>
+              <Toolbar.Item key="routeSwitch" placement="left" />
+              <Toolbar.Item key="addPage" placement="left">
+                <Action
+                  tooltip="添加页面"
+                  shape="outline"
+                  icon={<PlusOutlined />}
+                  onClick={() => setShowNewPageModal(true)}
+                />
+              </Toolbar.Item>
+              <Toolbar.Item key="history" placement="left" />
+              <Toolbar.Item key="preview" placement="left" />
+              <Toolbar.Item key="modeSwitch" placement="right" />
+              <Toolbar.Item key="togglePanel" placement="right" />
+              <Toolbar.Separator />
+              <Toolbar.Item placement="right">
+                <Space>
+                  <Button type="primary">发布</Button>
+                </Space>
+              </Toolbar.Item>
+            </Toolbar>
+            <Modal
+              title="添加新页面"
+              open={showNewPageModal}
+              onCancel={() => setShowNewPageModal(false)}
+              footer={null}
+            >
+              <Form
+                form={form}
+                onFinish={(values) => {
+                  workspace.addViewFile(values.name, emptyPageCode);
+                  setShowNewPageModal(false);
+                }}
+                layout="vertical"
+              >
+                <Form.Item label="文件名" name="name" required rules={[{ required: true }]}>
+                  <Input placeholder="请输入文件名" />
+                </Form.Item>
+                <Form.Item>
+                  <Button type="primary" htmlType="submit">
+                    提交
+                  </Button>
+                </Form.Item>
+              </Form>
+            </Modal>
+          </Box>
+        }
+      >
+        <Sidebar>
+          <Sidebar.Item
+            key="components"
+            label="组件"
+            icon={<AppstoreAddOutlined />}
+            widgetProps={{
+              menuData,
+            }}
+          />
+          <Sidebar.Item key="outline" label="结构" icon={<BuildOutlined />} />
+          <Sidebar.Item
+            key="variables"
+            label="变量"
+            icon={<FunctionOutlined />}
+            isFloat
+            width={800}
+          />
+          <Sidebar.Item key="dataSource" label="接口" icon={<ApiOutlined />} isFloat width={800} />
+          <Sidebar.Item
+            key="dependency"
+            label="依赖"
+            icon={<ClusterOutlined />}
+            isFloat
+            width={800}
+          />
+        </Sidebar>
+        <WorkspacePanel>
+          <WorkspaceView mode="design">
+            <Sandbox
+              onMessage={(e) => {
+                if (e.type === 'done') {
+                  const sandboxWindow: any = sandboxQuery.window;
+                  // if (sandboxWindow.TangoAntd) {
+                  // if (sandboxWindow.TangoAntd.menuData) {
+                  //   setMenuData(sandboxWindow.TangoAntd.menuData);
+                  // }
+                  // if (sandboxWindow.TangoAntd.prototypes) {
+                  //   workspace.setComponentPrototypes(sandboxWindow.TangoAntd.prototypes);
+                  // }
+                  // }
+                  if (sandboxWindow.localTangoComponentPrototypes) {
+                    workspace.setComponentPrototypes(sandboxWindow.localTangoComponentPrototypes);
+                  }
+                }
+              }}
+              navigatorExtra={<Button size="small">hello world</Button>}
+            />
+          </WorkspaceView>
+          <WorkspaceView mode="code">
+            <CodeEditor />
+          </WorkspaceView>
+        </WorkspacePanel>
+        <SettingPanel />
+      </DesignerPanel>
+    </Designer>
+  );
+}

apps/playground/src/pages/mail.tsx

@@ -0,0 +1,135 @@
+import React, { useState } from 'react';
+import { Box } from 'coral-system';
+import { Button, Space } from 'antd';
+import {
+  Designer,
+  DesignerPanel,
+  SettingPanel,
+  Sidebar,
+  Toolbar,
+  WorkspacePanel,
+  WorkspaceView,
+  CodeEditor,
+  Sandbox,
+  DndQuery,
+  themeLight,
+} from '@music163/tango-designer';
+import { createEngine, Workspace } from '@music163/tango-core';
+import { Logo, ProjectDetail, bootHelperVariables } from '@/helpers';
+import {
+  AppstoreAddOutlined,
+  BuildOutlined,
+  ClusterOutlined,
+  createFromIconfontCN,
+} from '@ant-design/icons';
+import { mailFiles } from '@/helpers/mail-files';
+
+// 1. 实例化工作区
+const workspace = new Workspace({
+  entry: '/src/index.js',
+  files: mailFiles,
+});
+
+// 2. 引擎初始化
+const engine = createEngine({
+  workspace,
+});
+
+// @ts-ignore
+window.__mailWorkspace__ = workspace;
+
+// 3. 沙箱初始化
+const sandboxQuery = new DndQuery({
+  context: 'iframe',
+});
+
+// 4. 图标库初始化（物料面板和组件树使用了 iconfont 里的图标）
+createFromIconfontCN({
+  scriptUrl: '//at.alicdn.com/t/c/font_2891794_151xsllxqd7.js',
+});
+
+/**
+ * 5. 平台初始化，访问 https://local.netease.com:6006/
+ */
+export default function App() {
+  const [menuLoading, setMenuLoading] = useState(true);
+  const [menuData, setMenuData] = useState(false);
+  return (
+    <Designer
+      theme={themeLight}
+      engine={engine}
+      config={{
+        customActionVariables: bootHelperVariables,
+        customExpressionVariables: bootHelperVariables,
+      }}
+      sandboxQuery={sandboxQuery}
+    >
+      <DesignerPanel
+        logo={<Logo />}
+        description={<ProjectDetail />}
+        actions={
+          <Box px="l">
+            <Toolbar>
+              <Toolbar.Item key="history" placement="left" />
+              <Toolbar.Item key="preview" placement="left" />
+              <Toolbar.Item key="modeSwitch" placement="right" />
+              <Toolbar.Item key="togglePanel" placement="right" />
+              <Toolbar.Separator />
+              <Toolbar.Item placement="right">
+                <Space>
+                  <Button type="primary">发布</Button>
+                </Space>
+              </Toolbar.Item>
+            </Toolbar>
+          </Box>
+        }
+      >
+        <Sidebar>
+          <Sidebar.Item
+            key="components"
+            label="组件"
+            icon={<AppstoreAddOutlined />}
+            widgetProps={{
+              menuData: menuData as any,
+              loading: menuLoading,
+            }}
+          />
+          <Sidebar.Item key="outline" label="结构" icon={<BuildOutlined />} />
+          <Sidebar.Item
+            key="dependency"
+            label="依赖"
+            icon={<ClusterOutlined />}
+            isFloat
+            width={800}
+          />
+        </Sidebar>
+        <WorkspacePanel>
+          <WorkspaceView mode="design">
+            <Sandbox
+              onMessage={(e) => {
+                if (e.type === 'done') {
+                  const sandboxWindow: any = sandboxQuery.window;
+                  if (sandboxWindow.TangoMail) {
+                    if (sandboxWindow.TangoMail.menuData) {
+                      setMenuData(sandboxWindow.TangoMail.menuData);
+                      engine.designer.setMenuData(sandboxWindow.TangoMail.menuData);
+                    }
+                    if (sandboxWindow.TangoMail.prototypes) {
+                      workspace.setComponentPrototypes(sandboxWindow.TangoMail.prototypes);
+                    }
+                  }
+                  setMenuLoading(false);
+                }
+              }}
+              navigatorExtra={<Button size="small">hello world</Button>}
+            />
+          </WorkspaceView>
+          <WorkspaceView mode="code">
+            <CodeEditor />
+          </WorkspaceView>
+        </WorkspacePanel>
+        <SettingPanel />
+      </DesignerPanel>
+    </Designer>
+  );
+}

apps/playground/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./src/.umi/tsconfig.json"
+}

apps/playground/typings.d.ts

@@ -0,0 +1 @@
+import 'umi/typings';

apps/storybook/.storybook/main.js

@@ -0,0 +1,37 @@
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+
+  babel: async (config) => {
+    config.plugins.push('babel-plugin-styled-components');
+    return config;
+  },
+
+  typescript: {
+    reactDocgen: false,
+  },
+
+  webpack: async (config) => {
+    if (config.mode === 'production') {
+      config.devtool = false;
+    }
+
+    if (config.resolve.plugins === null) {
+      config.resolve.plugins = [];
+    }
+
+    config.resolve.plugins.push(new TsconfigPathsPlugin());
+
+    // @see https://github.com/graphql/graphql-js/issues/1272#issuecomment-393903706
+    config.module.rules.push({
+      test: /\.mjs$/,
+      include: /node_modules/,
+      type: 'javascript/auto',
+    });
+
+    return config;
+  },
+};

apps/storybook/.storybook/preview-head.html

@@ -0,0 +1 @@
+<!--insert head here-->

apps/storybook/.storybook/preview.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { SystemProvider } from 'coral-system';
+import 'antd/dist/antd.css';
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};
+
+const withSystemProvider = (Story, context) => {
+  return (
+    <SystemProvider prefix="--tango">
+      <Story {...context} />
+    </SystemProvider>
+  );
+};
+
+export const decorators = [withSystemProvider];

apps/storybook/README.md

@@ -0,0 +1,3 @@
+# `docs`
+
+开发调试用的文档

apps/storybook/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "storybook",
+  "version": "0.0.0",
+  "private": "true",
+  "description": "> tango-apps docs",
+  "license": "MIT",
+  "author": "wwsun <sunweiwei01@corp.netease.com>",
+  "files": [
+    "lib"
+  ],
+  "scripts": {
+    "build": "echo \"skip\"",
+    "build-storybook": "build-storybook",
+    "storybook": "start-storybook -p 6008"
+  },
+  "dependencies": {
+    "@music163/tango-setting-form": "*",
+    "@music163/tango-ui": "*",
+    "mobx": "6.12.3",
+    "mobx-react-lite": "4.0.7"
+  },
+  "devDependencies": {
+    "@ant-design/icons": "^4.8.0",
+    "@storybook/addon-actions": "^6.5.14",
+    "@storybook/addon-essentials": "^6.5.14",
+    "@storybook/addon-links": "^6.5.14",
+    "@storybook/react": "^6.5.14",
+    "antd": "^4.24.2",
+    "babel-plugin-styled-components": "^2.0.7",
+    "tsconfig-paths-webpack-plugin": "^3.5.2"
+  }
+}

apps/storybook/src/editor.stories.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Box } from 'coral-system';
+import { SingleMonacoEditor } from '@music163/tango-ui';
+
+export default {
+  title: 'Editor',
+};
+
+const code = `
+import React from 'react';
+import { definePage } from '@music163/tango-boot';
+import { Layout, Page, Section, Button } from '@music163/antd';
+
+function About(props) {
+  const { stores } = props;
+
+  const increment = () => {
+    stores.counter.increment();
+  };
+
+  return (
+    <Layout>
+      <Page title="About Page" height="100vh">
+        <Section>
+          <h1>Counter: {stores.counter.num}</h1>
+          <Button type="primary" onClick={increment}>
+            +1
+          </Button>
+          <p>原生html元素不可拖拽</p>
+        </Section>
+      </Page>
+    </Layout>
+  );
+}
+
+export default definePage(About);
+`;
+
+export function Basic() {
+  return (
+    <Box border="solid" borderColor="line.normal" height="400px">
+      <SingleMonacoEditor defaultValue={code} height="100%" onBlur={console.log} />
+    </Box>
+  );
+}

apps/storybook/src/sandbox.stories.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Box } from 'coral-system';
+import { CodeSandbox } from '@music163/tango-sandbox';
+import { JsonView } from '@music163/tango-ui';
+
+export default {
+  title: 'CodeSandbox',
+};
+
+const entryFilename = '/index.js';
+
+const packageJson = {
+  name: 'demo',
+  private: true,
+  main: entryFilename,
+  dependencies: {
+    react: '^17.0.1',
+    'react-dom': '^17.0.1',
+  },
+};
+
+const entryFile = `
+import React from 'react';
+import ReactDOM from "react-dom";
+import App from './src';
+
+const rootElement = document.getElementById("root");
+
+ReactDOM.render(
+  <App />,
+  rootElement
+);
+`;
+
+const srcAppFile = `
+import React from 'react';
+
+export default function App() {
+  return <div style={{ background: 'yellow', color: 'red' }}>hello world</div>;
+}
+`;
+
+const files = {
+  '/package.json': {
+    code: JSON.stringify(packageJson),
+  },
+  [entryFilename]: {
+    code: entryFile,
+  },
+  '/src/index.js': { code: srcAppFile },
+};
+
+export function Basic() {
+  return (
+    <Box display="flex" height="100vh">
+      <CodeSandbox
+        template="create-react-app"
+        bundlerURL="https://codesandbox.fn.netease.com"
+        files={files}
+        entry={entryFilename}
+        style={{
+          flex: 1,
+        }}
+      />
+      <Box width="30%">
+        <JsonView src={files} />
+      </Box>
+    </Box>
+  );
+}

apps/storybook/src/setting-form.stories.tsx

@@ -0,0 +1,544 @@
+import React from 'react';
+import { FormModel, SettingForm, register } from '@music163/tango-setting-form';
+import { IComponentPrototype } from '@music163/tango-helpers';
+import { BUILT_IN_SETTERS } from '@music163/tango-designer/src/setters';
+import { Box } from 'coral-system';
+import { JsonView } from '@music163/tango-ui';
+import { toJS } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { Card } from 'antd';
+import { createFromIconfontCN } from '@ant-design/icons';
+
+const BLACK_LIST = ['codeSetter', 'eventSetter', 'modelSetter', 'routerSetter'];
+
+BUILT_IN_SETTERS.filter((setter) => !BLACK_LIST.includes(setter.name)).forEach(register);
+
+createFromIconfontCN({
+  scriptUrl: '//at.alicdn.com/t/c/font_2891794_151xsllxqd7.js',
+});
+
+export default {
+  title: 'SettingForm',
+};
+
+/**
+ * 表单值预览
+ */
+const FormValuePreview = observer(({ model }: { model: FormModel }) => {
+  const data = toJS(model.values);
+  return <JsonView src={data} />;
+});
+
+interface SettingFormDemoProps {
+  initValues?: object;
+  prototype?: IComponentPrototype;
+}
+
+function SettingFormDemo({ initValues, prototype }: SettingFormDemoProps) {
+  const model = new FormModel(initValues, { onChange: console.log });
+  return (
+    <Box display="flex">
+      <Box flex="0 0 320px" overflow="hidden">
+        <SettingForm
+          model={model}
+          prototype={prototype}
+          showIdentifier={{
+            identifierKey: 'tid',
+            getIdentifier: () => `time${Date.now()}`,
+          }}
+        />
+      </Box>
+      <Box position="relative">
+        <Card title="表单状态预览" style={{ position: 'sticky', top: 0 }}>
+          <FormValuePreview model={model} />
+        </Card>
+      </Box>
+    </Box>
+  );
+}
+
+const prototypeHasBasicProps: IComponentPrototype = {
+  name: 'Sample',
+  title: '演示组件',
+  package: 'sample-pkg',
+  type: 'element',
+  docs: 'https://4x-ant-design.antgroup.com/components/slider-cn',
+  props: [
+    {
+      name: 'code',
+      title: 'codeSetter',
+      setter: 'codeSetter',
+    },
+    {
+      name: 'text',
+      title: 'textSetter',
+      setter: 'textSetter',
+    },
+    {
+      name: 'text2',
+      title: 'textAreaSetter',
+      setter: 'textAreaSetter',
+    },
+    {
+      name: 'number',
+      title: 'numberSetter',
+      setter: 'numberSetter',
+    },
+    {
+      name: 'number2',
+      title: 'sliderSetter',
+      setter: 'sliderSetter',
+    },
+    {
+      name: 'bool',
+      title: 'boolSetter',
+      setter: 'boolSetter',
+    },
+    {
+      name: 'enum',
+      title: 'enumSetter',
+      setter: 'enumSetter',
+    },
+    {
+      name: 'list',
+      title: 'listSetter',
+      setter: 'listSetter',
+    },
+  ],
+};
+
+export function Basic() {
+  return (
+    <SettingFormDemo
+      initValues={{
+        bool: true,
+        enum: {
+          aaa: 'aaa',
+          bbb: 'bbb',
+          ccc: 'ccc',
+        },
+        list: [{ key: 1 }, { key: 2 }],
+      }}
+      prototype={prototypeHasBasicProps}
+    />
+  );
+}
+
+export function DeprecatedProp() {
+  return (
+    <SettingFormDemo
+      prototype={{
+        name: 'Deprecated',
+        package: 'sample-pkg',
+        type: 'element',
+        props: [
+          {
+            name: 'number',
+            title: 'numberSetter',
+            setter: 'numberSetter',
+            tip: '这是一个文本属性',
+            docs: 'https://4x-ant-design.antgroup.com/components/slider-cn',
+            deprecated: '使用 text2 替代',
+          },
+          {
+            name: 'number1',
+            title: 'sliderSetter',
+            setter: 'sliderSetter',
+          },
+        ],
+      }}
+    />
+  );
+}
+
+export function Validate() {
+  return (
+    <SettingFormDemo
+      prototype={{
+        name: 'Validate',
+        package: 'sample-pkg',
+        type: 'element',
+        props: [
+          {
+            name: 'number',
+            title: 'numberSetter',
+            setter: 'numberSetter',
+            validate: (value) => {
+              if (!value && value !== 0) {
+                return '必填';
+              }
+              if (value < 0) {
+                return '必须大于 0';
+              }
+              if (value > 10) {
+                return '必须小于等于 10';
+              }
+            },
+          },
+        ],
+      }}
+    />
+  );
+}
+
+export function ObjectSetter() {
+  return (
+    <SettingFormDemo
+      prototype={{
+        name: 'Object',
+        package: 'sample-pkg',
+        type: 'element',
+        props: [
+          {
+            name: 'text',
+            title: 'textSetter',
+            setter: 'textSetter',
+          },
+          {
+            name: 'object',
+            title: 'objectSetter',
+            setter: 'objectSetter',
+            props: [
+              {
+                name: 'text',
+                title: 'textSetter',
+                setter: 'textSetter',
+              },
+              {
+                name: 'number',
+                title: 'numberSetter',
+                setter: 'numberSetter',
+              },
+            ],
+          },
+        ],
+      }}
+    />
+  );
+}
+
+export function InitValues() {
+  return (
+    <SettingFormDemo
+      initValues={{
+        bool: true,
+        bool1: '{{true}}',
+        style: {
+          background: 'red',
+        },
+        object: {
+          text: 'text',
+          number: 10,
+        },
+        object1: {
+          text: 'text',
+          number: '{{tango.stores.user?.age}}',
+        },
+        // 只会有一种情况传下来的是字符串，就是用户代码里存在 rest operator，这时候不需要额外处理，提示用户就使用代码模式
+        object2: '{{{ text: "text22", number: 22, ...{ extra: "some" } }}}',
+        list: [{ key: 'aaa' }, { key: 'bbb' }], // list object
+        list1: "{{[{ key: 'aaa' }, { key: 'bbb' }]}}", // raw code
+      }}
+      prototype={{
+        name: 'InitValues',
+        package: 'sample-pkg',
+        type: 'element',
+        props: [
+          {
+            name: 'bool',
+            title: 'value初始化',
+            setter: 'boolSetter',
+          },
+          {
+            name: 'bool1',
+            title: 'value初始化',
+            setter: 'boolSetter',
+          },
+          {
+            name: 'bool2',
+            title: '无初值',
+            setter: 'boolSetter',
+          },
+          {
+            name: 'style',
+            title: 'codeSetter',
+            setter: 'codeSetter',
+          },
+          {
+            name: 'object',
+            props: [
+              {
+                name: 'text',
+                title: 'text',
+                setter: 'textSetter',
+              },
+              {
+                name: 'number',
+                title: 'number',
+                setter: 'numberSetter',
+              },
+            ],
+          },
+          {
+            name: 'object1',
+            props: [
+              {
+                name: 'text',
+                title: 'text',
+                setter: 'textSetter',
+              },
+              {
+                name: 'number',
+                title: 'number',
+                setter: 'numberSetter',
+              },
+            ],
+          },
+          {
+            name: 'object2',
+            props: [
+              {
+                name: 'text',
+                title: 'text',
+                setter: 'textSetter',
+              },
+              {
+                name: 'number',
+                title: 'number',
+                setter: 'numberSetter',
+              },
+            ],
+          },
+          {
+            name: 'list',
+            title: 'listSetter',
+            setter: 'listSetter',
+          },
+          {
+            name: 'list1',
+            title: 'listSetter',
+            setter: 'listSetter',
+          },
+        ],
+      }}
+    />
+  );
+}
+
+export function Lite() {
+  return (
+    <Box width={320} border="solid" borderColor="line2">
+      <SettingForm
+        showSearch={false}
+        showGroups={false}
+        showItemSubtitle={false}
+        prototype={prototypeHasBasicProps}
+        disableSwitchExpressionSetter
+      />
+    </Box>
+  );
+}
+
+export function HideToggleCode() {
+  const model = new FormModel({});
+  return (
+    <Box width={320} border="solid" borderColor="line2">
+      <SettingForm model={model} prototype={prototypeHasBasicProps} disableSwitchExpressionSetter />
+    </Box>
+  );
+}
+
+const prototypeHasExtraProps: IComponentPrototype = {
+  name: 'ExtraProps',
+  type: 'element',
+  package: '@music163/antd',
+  props: [
+    {
+      name: 'choice',
+      title: 'choiceSetter',
+      setter: 'choiceSetter',
+      options: [
+        { label: '选项1', value: '1' },
+        { label: '选项2', value: '2' },
+        { label: '选项3', value: '3' },
+      ],
+    },
+    {
+      name: 'picker',
+      title: 'pickerSetter',
+      setter: 'pickerSetter',
+      options: [
+        { label: '选项1', value: '1' },
+        { label: '选项2', value: '2' },
+        { label: '选项3', value: '3' },
+      ],
+    },
+    {
+      name: 'actionList',
+      title: 'actionListSetter',
+      setter: 'actionListSetter',
+    },
+    {
+      name: 'list',
+      title: 'listSetter',
+      setter: 'listSetter',
+    },
+    {
+      name: 'options',
+      title: 'optionSetter',
+      setter: 'optionSetter',
+    },
+    {
+      name: 'columns',
+      title: 'tableColumnsSetter',
+      setter: 'tableColumnsSetter',
+    },
+    {
+      name: 'css',
+      title: 'cssSetter',
+      setter: 'cssSetter',
+    },
+    {
+      name: 'date',
+      title: 'dateSetter',
+      setter: 'dateSetter',
+    },
+    {
+      name: 'dateRange',
+      title: 'dateRangeSetter',
+      setter: 'dateRangeSetter',
+    },
+    {
+      name: 'time',
+      title: 'timeSetter',
+      setter: 'timeSetter',
+    },
+    {
+      name: 'time',
+      title: 'timeRangeSetter',
+      setter: 'timeRangeSetter',
+    },
+    {
+      name: 'enum',
+      title: 'enumSetter',
+      setter: 'enumSetter',
+    },
+    {
+      name: 'event',
+      title: 'eventSetter',
+      setter: 'eventSetter',
+    },
+    {
+      name: 'json',
+      title: 'jsonSetter',
+      setter: 'jsonSetter',
+    },
+    {
+      name: 'jsx',
+      title: 'jsxSetter',
+      setter: 'jsxSetter',
+    },
+    {
+      name: 'render',
+      title: 'renderPropsSetter',
+      setter: 'renderPropsSetter',
+    },
+    {
+      name: 'cell',
+      title: 'tableCellSetter',
+      setter: 'tableCellSetter',
+    },
+    {
+      name: 'expandable',
+      title: 'tableExpandableSetter',
+      setter: 'tableExpandableSetter',
+    },
+    {
+      name: 'router',
+      title: 'routerSetter',
+      setter: 'routerSetter',
+    },
+  ],
+};
+
+export function ExtraSetters() {
+  return (
+    <SettingFormDemo
+      initValues={{
+        router: 'www.163.com',
+        expression: `{ foo: 'foo' }`,
+        object: {
+          name: 'Alice',
+        },
+        image:
+          'https://p6.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/13270238619/2cc5/0782/1d6e/009b96bf90c557b9bbde09b1687a2c80.png',
+      }}
+      prototype={prototypeHasExtraProps}
+    />
+  );
+}
+
+export function StyleProps() {
+  return (
+    <SettingFormDemo
+      prototype={{
+        name: 'Box',
+        title: 'Box',
+        type: 'element',
+        package: '@music163/antd',
+        props: [
+          {
+            name: 'style',
+            title: 'styleSetter',
+            setter: 'styleSetter',
+          },
+          {
+            name: 'display',
+            title: 'displaySetter',
+            setter: 'displaySetter',
+          },
+          {
+            name: 'flexDirection',
+            title: 'flexDirectionSetter',
+            setter: 'flexDirectionSetter',
+          },
+          {
+            name: 'flexGap',
+            title: 'flexGapSetter',
+            setter: 'flexGapSetter',
+          },
+          {
+            name: 'flexJustifyContent',
+            title: 'flexJustifyContentSetter',
+            setter: 'flexJustifyContentSetter',
+          },
+          {
+            name: 'flexAlignItems',
+            title: 'flexAlignItemsSetter',
+            setter: 'flexAlignItemsSetter',
+          },
+          {
+            name: 'spacing',
+            title: 'spacingSetter',
+            setter: 'spacingSetter',
+          },
+          {
+            name: 'color',
+            title: 'colorSetter',
+            setter: 'colorSetter',
+          },
+          {
+            name: 'bg',
+            title: 'bgSetter',
+            setter: 'bgSetter',
+          },
+          {
+            name: 'border',
+            title: 'borderSetter',
+            setter: 'borderSetter',
+          },
+        ],
+      }}
+    />
+  );
+}

apps/storybook/src/ui/action.stories.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Action } from '@music163/tango-ui';
+import { PlusOutlined, QuestionCircleOutlined } from '@ant-design/icons';
+import { Space } from 'antd';
+
+export default {
+  title: 'UI/Action',
+  component: Action,
+};
+
+export const Basic = {
+  args: {
+    icon: <PlusOutlined />,
+    tooltip: '添加服务函数',
+  },
+};
+
+export const Link = {
+  args: {
+    icon: <QuestionCircleOutlined />,
+    tooltip: '查看帮助文档',
+    href: 'https://music.163.com',
+  },
+};
+
+export const Outline = {
+  args: {
+    icon: <PlusOutlined />,
+    tooltip: '添加服务函数',
+    shape: 'outline',
+  },
+};
+
+export const Small = {
+  args: {
+    size: 'small',
+    icon: <PlusOutlined />,
+    tooltip: '添加服务函数',
+  },
+};
+
+export const Disabled = () => {
+  return (
+    <Space>
+      <Action icon={<PlusOutlined />} tooltip="添加服务函数" disabled />
+      <Action icon={<PlusOutlined />} tooltip="添加服务函数" disabled shape="outline" />
+      <Action
+        icon={<QuestionCircleOutlined />}
+        tooltip="查看帮助文档"
+        href="https://music.163.com"
+        disabled
+      />
+    </Space>
+  );
+};
+
+export const List = () => {
+  return (
+    <Space>
+      <Action icon={<PlusOutlined />} tooltip="添加服务函数" />
+      <Action
+        icon={<QuestionCircleOutlined />}
+        tooltip="查看帮助文档"
+        href="https://music.163.com"
+      />
+    </Space>
+  );
+};

apps/storybook/src/ui/chat.stories.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ChatInput } from '@music163/tango-ui';
+
+export default {
+  title: 'UI/ChatGPT',
+};
+
+export function Basic() {
+  return <ChatInput />;
+}

apps/storybook/src/ui/copy.stories.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { CopyClipboard } from '@music163/tango-ui';
+
+export default {
+  title: 'UI/Copy',
+};
+
+export function Basic() {
+  return (
+    <CopyClipboard text="hello">
+      {(copied) => <button>{copied ? 'copied' : 'copy'}</button>}
+    </CopyClipboard>
+  );
+}

apps/storybook/src/ui/drag-panel.stories.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { DragPanel } from '@music163/tango-ui';
+import { Box, Text } from 'coral-system';
+import { Button } from 'antd';
+
+export default {
+  title: 'UI/DragPanel',
+};
+
+export function Basic() {
+  return (
+    <DragPanel
+      title="弹层标题"
+      extra="右上角内容"
+      width={350}
+      body={<Box p="m">内容</Box>}
+      footer={<Text>底部信息</Text>}
+    >
+      <Button>点击唤起浮层</Button>
+    </DragPanel>
+  );
+}
+
+export function FooterCustom() {
+  return (
+    <DragPanel
+      title="弹层标题"
+      extra="右上角内容"
+      width={350}
+      body={<Box p="m">内容</Box>}
+      footer={(close) => (
+        <Box display="flex" justifyContent="space-between">
+          <Text>底部信息</Text>
+          <Button size="small" onClick={() => close()}>
+            点此关闭
+          </Button>
+        </Box>
+      )}
+    >
+      <Button>点击唤起浮层</Button>
+    </DragPanel>
+  );
+}

apps/storybook/src/ui/input-code.stories.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Action, InputCode } from '@music163/tango-ui';
+import { BlockOutlined } from '@ant-design/icons';
+
+export default {
+  title: 'UI/InputCode',
+};
+
+const context = {
+  stores: {
+    foo: {
+      loading: false,
+      action: () => {},
+    },
+  },
+  services: {
+    list: () => {},
+    get: () => {},
+  },
+};
+
+export function Basic() {
+  return (
+    <InputCode
+      suffix={<Action icon={<BlockOutlined />} size="small" />}
+      autoCompleteContext={{ tango: context }}
+    />
+  );
+}
+
+const code = `
+function foo() {
+  console.log("test");
+  console.log("test");
+  console.log("test");
+  console.log("test");
+  console.log("test");
+  console.log("test");
+  console.log("test");
+  console.log("test");
+  console.log("test");
+  console.log("test");
+  console.log("test");
+  console.log("test");
+  console.log("test");
+  console.log("test");
+  console.log("test");
+  console.log("test");
+  console.log("test");
+  console.log("test");
+  console.log("test");
+  console.log("test");
+  console.log("test");
+  console.log("test");
+  console.log("test");
+  console.log("test");
+  console.log("test");
+  console.log("test");
+}
+`;
+
+export function Readonly() {
+  return <InputCode shape="inset" readOnly value={code} />;
+}
+
+export function Inset() {
+  return <InputCode shape="inset" />;
+}

apps/storybook/src/ui/input-list.stories.tsx

@@ -0,0 +1,11 @@
+import React, { useState } from 'react';
+import { InputList } from '@music163/tango-ui';
+
+export default {
+  title: 'UI/InputList',
+};
+
+export function Basic() {
+  const [value, setValue] = useState([]);
+  return <InputList value={value} onChange={setValue} />;
+}

apps/storybook/src/ui/menu.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Menu } from '@music163/tango-ui';
+
+export default {
+  title: 'UI/Menu',
+};
+
+export function Basic() {
+  return (
+    <Menu
+      activeKey="2"
+      items={[
+        { key: '1', label: 'bob', note: 'male', deletable: true },
+        { key: '2', label: 'alice', note: 'female', deletable: true },
+        { key: '3', label: 'tom', deletable: true },
+      ]}
+    ></Menu>
+  );
+}

apps/storybook/src/ui/select-list.stories.tsx

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import { SelectList } from '@music163/tango-ui';
+
+export default {
+  title: 'UI/SelectList',
+};
+
+const options = [
+  {
+    value: 'alice',
+    label: 'Alice',
+  },
+  {
+    value: 'jack',
+    label: 'Jack',
+  },
+  {
+    value: 'lucy',
+    label: 'Lucy',
+  },
+  {
+    value: 'bob',
+    label: 'Bob',
+  },
+];
+
+export function Basic() {
+  const [value, setValue] = useState([]);
+  return <SelectList value={value} onChange={setValue} options={options} />;
+}
+
+export function UniqueValue() {
+  const [value, setValue] = useState([]);
+  return <SelectList isUniqueValue value={value} onChange={setValue} options={options} />;
+}

apps/storybook/src/ui/tag-select.stories.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { TagSelect } from '@music163/tango-ui';
+
+export default {
+  title: 'UI/TagSelect',
+};
+
+export function Basic() {
+  return (
+    <TagSelect
+      options={['Movies', 'Books', 'Music', 'Sports'].map((item) => ({ label: item, value: item }))}
+      onChange={console.log}
+    />
+  );
+}
+
+export function SingleMode() {
+  return (
+    <TagSelect
+      options={['Movies', 'Books', 'Music', 'Sports'].map((item) => ({ label: item, value: item }))}
+      mode="single"
+      onChange={console.log}
+    />
+  );
+}

apps/storybook/src/ui/toggle-button.stories.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { ToggleButton, UndoOutlined, RedoOutlined } from '@music163/tango-ui';
+import { Box, Group, Flex } from 'coral-system';
+
+export default {
+  title: 'UI/ToggleButton',
+};
+
+export function Basic() {
+  return (
+    <Box>
+      <Box display="flex" columnGap="l" p="l">
+        <ToggleButton>
+          <UndoOutlined />
+        </ToggleButton>
+        <ToggleButton selected>
+          <RedoOutlined />
+        </ToggleButton>
+        <ToggleButton disabled>
+          <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="text">
+          <UndoOutlined />
+        </ToggleButton>
+        <ToggleButton shape="text" selected>
+          <RedoOutlined />
+        </ToggleButton>
+        <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>
+  );
+}

apps/storybook/src/ui/var-tree.stories.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { VariableTree } from '@music163/tango-designer/src/components';
+import { Box } from 'coral-system';
+
+export default {
+  title: 'Designer/VariableTree',
+};
+
+const data = [
+  {
+    title: 'Stores',
+    key: 'stores',
+    selectable: false,
+    children: [
+      {
+        title: 'user',
+        key: 'stores.user',
+        children: [
+          {
+            title: 'name',
+            key: 'stores.user.name',
+            raw: '"Tom"',
+          },
+          {
+            title: 'age',
+            key: 'stores.user.age',
+            raw: '18',
+          },
+        ],
+      },
+      {
+        title: 'book',
+        key: 'stores.book',
+        children: [
+          {
+            title: 'name',
+            key: 'stores.book.name',
+            raw: '"JavaScript 高级程序设计"',
+          },
+          {
+            title: 'price',
+            key: 'stores.book.price',
+            raw: '99.99',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    title: 'Services',
+    key: 'services',
+    selectable: false,
+    children: [
+      {
+        title: 'add',
+        key: 'services.add',
+      },
+      {
+        title: 'multiply',
+        key: 'services.multiply',
+      },
+    ],
+  },
+];
+
+export function Basic() {
+  return (
+    <Box width={600} border="solid">
+      <VariableTree dataSource={data} />
+    </Box>
+  );
+}

apps/storybook/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "esnext"
+  }
+}

assets/js/01a85c17.66d62e43.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4013],{3558:(e,t,a)=>{a.d(t,{Z:()=>E});var l=a(2784),r=a(6277),n=a(2842),s=a(7963),i=a(9817),c=a(1077);const m={sidebar:"sidebar_RYHo",sidebarItemTitle:"sidebarItemTitle_sRjx",sidebarItemList:"sidebarItemList_uMtB",sidebarItem:"sidebarItem_rygH",sidebarItemLink:"sidebarItemLink_EKgd",sidebarItemLinkActive:"sidebarItemLinkActive_hRXJ"};function o(e){let{sidebar:t}=e;return l.createElement("aside",{className:"col col--3"},l.createElement("nav",{className:(0,r.Z)(m.sidebar,"thin-scrollbar"),"aria-label":(0,c.I)({id:"theme.blog.sidebar.navAriaLabel",message:"Blog recent posts navigation",description:"The ARIA label for recent posts in the blog sidebar"})},l.createElement("div",{className:(0,r.Z)(m.sidebarItemTitle,"margin-bottom--md")},t.title),l.createElement("ul",{className:(0,r.Z)(m.sidebarItemList,"clean-list")},t.items.map((e=>l.createElement("li",{key:e.permalink,className:m.sidebarItem},l.createElement(i.Z,{isNavLink:!0,to:e.permalink,className:m.sidebarItemLink,activeClassName:m.sidebarItemLinkActive},e.title)))))))}var g=a(7548);function u(e){let{sidebar:t}=e;return l.createElement("ul",{className:"menu__list"},t.items.map((e=>l.createElement("li",{key:e.permalink,className:"menu__list-item"},l.createElement(i.Z,{isNavLink:!0,to:e.permalink,className:"menu__link",activeClassName:"menu__link--active"},e.title)))))}function b(e){return l.createElement(g.Zo,{component:u,props:e})}function d(e){let{sidebar:t}=e;const a=(0,s.i)();return t?.items.length?"mobile"===a?l.createElement(b,{sidebar:t}):l.createElement(o,{sidebar:t}):null}function E(e){const{sidebar:t,toc:a,children:s,...i}=e,c=t&&t.items.length>0;return l.createElement(n.Z,i,l.createElement("div",{className:"container margin-vert--lg"},l.createElement("div",{className:"row"},l.createElement(d,{sidebar:t}),l.createElement("main",{className:(0,r.Z)("col",{"col--7":c,"col--9 col--offset-1":!c}),itemScope:!0,itemType:"http://schema.org/Blog"},s),a&&l.createElement("div",{className:"col col--2"},a))))}},5286:(e,t,a)=>{a.r(t),a.d(t,{default:()=>E});var l=a(2784),r=a(6277),n=a(1077);const s=()=>(0,n.I)({id:"theme.tags.tagsPageTitle",message:"Tags",description:"The title of the tag list page"});var i=a(328),c=a(211),m=a(3558),o=a(7207);const g={tag:"tag_YYDp"};function u(e){let{letterEntry:t}=e;return l.createElement("article",null,l.createElement("h2",null,t.letter),l.createElement("ul",{className:"padding--none"},t.tags.map((e=>l.createElement("li",{key:e.permalink,className:g.tag},l.createElement(o.Z,e))))),l.createElement("hr",null))}function b(e){let{tags:t}=e;const a=function(e){const t={};return Object.values(e).forEach((e=>{const a=function(e){return e[0].toUpperCase()}(e.label);t[a]??=[],t[a].push(e)})),Object.entries(t).sort(((e,t)=>{let[a]=e,[l]=t;return a.localeCompare(l)})).map((e=>{let[t,a]=e;return{letter:t,tags:a.sort(((e,t)=>e.label.localeCompare(t.label)))}}))}(t);return l.createElement("section",{className:"margin-vert--lg"},a.map((e=>l.createElement(u,{key:e.letter,letterEntry:e}))))}var d=a(4390);function E(e){let{tags:t,sidebar:a}=e;const n=s();return l.createElement(i.FG,{className:(0,r.Z)(c.k.wrapper.blogPages,c.k.page.blogTagsListPage)},l.createElement(i.d,{title:n}),l.createElement(d.Z,{tag:"blog_tags_list"}),l.createElement(m.Z,{sidebar:a},l.createElement("h1",null,n),l.createElement(b,{tags:t})))}},7207:(e,t,a)=>{a.d(t,{Z:()=>i});var l=a(2784),r=a(6277),n=a(9817);const s={tag:"tag_qE9H",tagRegular:"tagRegular_aHXt",tagWithCount:"tagWithCount_UC8q"};function i(e){let{permalink:t,label:a,count:i}=e;return l.createElement(n.Z,{href:t,className:(0,r.Z)(s.tag,i?s.tagWithCount:s.tagRegular)},a,i&&l.createElement("span",null,i))}}}]);

assets/js/02818bb7.1ecad48d.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3478],{876:(e,t,r)=>{r.d(t,{Zo:()=>l,kt:()=>y});var n=r(2784);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function a(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function c(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var s=n.createContext({}),p=function(e){var t=n.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):a(a({},t),e)),r},l=function(e){var t=p(e.components);return n.createElement(s.Provider,{value:t},e.children)},d="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},f=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,i=e.originalType,s=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),d=p(r),f=o,y=d["".concat(s,".").concat(f)]||d[f]||u[f]||i;return r?n.createElement(y,a(a({ref:t},l),{},{components:r})):n.createElement(y,a({ref:t},l))}));function y(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var i=r.length,a=new Array(i);a[0]=f;var c={};for(var s in t)hasOwnProperty.call(t,s)&&(c[s]=t[s]);c.originalType=e,c[d]="string"==typeof e?e:o,a[1]=c;for(var p=2;p<i;p++)a[p]=r[p];return n.createElement.apply(null,a)}return n.createElement.apply(null,r)}f.displayName="MDXCreateElement"},9597:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>s,contentTitle:()=>a,default:()=>u,frontMatter:()=>i,metadata:()=>c,toc:()=>p});var n=r(7896),o=(r(2784),r(876));const i={},a="\u8bbe\u8ba1\u5668\u63a5\u5165",c={unversionedId:"designer/deploy/designer",id:"designer/deploy/designer",title:"\u8bbe\u8ba1\u5668\u63a5\u5165",description:"\u6b63\u5728\u7f16\u5199\u4e2d\uff0c\u656c\u8bf7\u671f\u5f85\u3002",source:"@site/docs/designer/deploy/designer.mdx",sourceDirName:"designer/deploy",slug:"/designer/deploy/designer",permalink:"/tango/docs/designer/deploy/designer",draft:!1,editUrl:"https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/docs/designer/deploy/designer.mdx",tags:[],version:"current",frontMatter:{},sidebar:"designer",previous:{title:"\u5feb\u901f\u5f00\u59cb",permalink:"/tango/docs/designer/quick-start"},next:{title:"\u4f4e\u4ee3\u7801\u6c99\u7bb1\u63a5\u5165",permalink:"/tango/docs/designer/deploy/sandbox"}},s={},p=[],l={toc:p},d="wrapper";function u(e){let{components:t,...r}=e;return(0,o.kt)(d,(0,n.Z)({},l,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"\u8bbe\u8ba1\u5668\u63a5\u5165"},"\u8bbe\u8ba1\u5668\u63a5\u5165"),(0,o.kt)("admonition",{type:"tip"},(0,o.kt)("p",{parentName:"admonition"},"\u6b63\u5728\u7f16\u5199\u4e2d\uff0c\u656c\u8bf7\u671f\u5f85\u3002")))}u.isMDXComponent=!0}}]);

assets/js/1359ec89.4b35b903.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4863],{2304:e=>{e.exports=JSON.parse('{"label":"open-source","permalink":"/tango/blog/tags/open-source","allTagsPath":"/tango/blog/tags","count":1}')}}]);

assets/js/2006.2d917ce7.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2006],{2006:(e,t,n)=>{n.r(t),n.d(t,{default:()=>i});var a=n(2784),l=n(1077),o=n(328),r=n(2842);function i(){return a.createElement(a.Fragment,null,a.createElement(o.d,{title:(0,l.I)({id:"theme.NotFound.title",message:"Page Not Found"})}),a.createElement(r.Z,null,a.createElement("main",{className:"container margin-vert--xl"},a.createElement("div",{className:"row"},a.createElement("div",{className:"col col--6 col--offset-3"},a.createElement("h1",{className:"hero__title"},a.createElement(l.Z,{id:"theme.NotFound.title",description:"The title of the 404 page"},"Page Not Found")),a.createElement("p",null,a.createElement(l.Z,{id:"theme.NotFound.p1",description:"The first paragraph of the 404 page"},"We could not find what you were looking for.")),a.createElement("p",null,a.createElement(l.Z,{id:"theme.NotFound.p2",description:"The 2nd paragraph of the 404 page"},"Please contact the owner of the site that linked you to the original URL and let them know their link is broken.")))))))}}}]);

assets/js/2c029b61.4a2ef811.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7980],{8077:e=>{e.exports=JSON.parse('{"permalink":"/tango/blog/tags/open-source","page":1,"postsPerPage":10,"totalPages":1,"totalCount":1,"blogDescription":"Blog","blogTitle":"Blog"}')}}]);

assets/js/2fecc3a5.d2c74c9d.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2798],{876:(e,t,r)=>{r.d(t,{Zo:()=>l,kt:()=>f});var n=r(2784);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function c(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function s(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var a=n.createContext({}),u=function(e){var t=n.useContext(a),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},l=function(e){var t=u(e.components);return n.createElement(a.Provider,{value:t},e.children)},p="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},d=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,i=e.originalType,a=e.parentName,l=s(e,["components","mdxType","originalType","parentName"]),p=u(r),d=o,f=p["".concat(a,".").concat(d)]||p[d]||m[d]||i;return r?n.createElement(f,c(c({ref:t},l),{},{components:r})):n.createElement(f,c({ref:t},l))}));function f(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var i=r.length,c=new Array(i);c[0]=d;var s={};for(var a in t)hasOwnProperty.call(t,a)&&(s[a]=t[a]);s.originalType=e,s[p]="string"==typeof e?e:o,c[1]=s;for(var u=2;u<i;u++)c[u]=r[u];return n.createElement.apply(null,c)}return n.createElement.apply(null,r)}d.displayName="MDXCreateElement"},330:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>m,frontMatter:()=>i,metadata:()=>s,toc:()=>u});var n=r(7896),o=(r(2784),r(876));const i={},c="\u9009\u62e9\u5668\u81ea\u5b9a\u4e49",s={unversionedId:"designer/customize/selections",id:"designer/customize/selections",title:"\u9009\u62e9\u5668\u81ea\u5b9a\u4e49",description:"\u6b63\u5728\u7f16\u5199\u4e2d\uff0c\u656c\u8bf7\u671f\u5f85\u3002",source:"@site/docs/designer/customize/selections.mdx",sourceDirName:"designer/customize",slug:"/designer/customize/selections",permalink:"/tango/docs/designer/customize/selections",draft:!1,editUrl:"https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/docs/designer/customize/selections.mdx",tags:[],version:"current",frontMatter:{},sidebar:"designer",previous:{title:"\u5de5\u5177\u680f\u81ea\u5b9a\u4e49",permalink:"/tango/docs/designer/customize/tools"},next:{title:"\u8bbe\u7f6e\u5668\u81ea\u5b9a\u4e49",permalink:"/tango/docs/designer/customize/setters"}},a={},u=[],l={toc:u},p="wrapper";function m(e){let{components:t,...r}=e;return(0,o.kt)(p,(0,n.Z)({},l,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"\u9009\u62e9\u5668\u81ea\u5b9a\u4e49"},"\u9009\u62e9\u5668\u81ea\u5b9a\u4e49"),(0,o.kt)("admonition",{type:"tip"},(0,o.kt)("p",{parentName:"admonition"},"\u6b63\u5728\u7f16\u5199\u4e2d\uff0c\u656c\u8bf7\u671f\u5f85\u3002")))}m.isMDXComponent=!0}}]);

assets/js/34a51889.98d9843c.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5648],{876:(e,t,n)=>{n.d(t,{Zo:()=>u,kt:()=>d});var r=n(2784);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var p=r.createContext({}),l=function(e){var t=r.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},u=function(e){var t=l(e.components);return r.createElement(p.Provider,{value:t},e.children)},s="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},f=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,a=e.originalType,p=e.parentName,u=c(e,["components","mdxType","originalType","parentName"]),s=l(n),f=o,d=s["".concat(p,".").concat(f)]||s[f]||m[f]||a;return n?r.createElement(d,i(i({ref:t},u),{},{components:n})):r.createElement(d,i({ref:t},u))}));function d(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=n.length,i=new Array(a);i[0]=f;var c={};for(var p in t)hasOwnProperty.call(t,p)&&(c[p]=t[p]);c.originalType=e,c[s]="string"==typeof e?e:o,i[1]=c;for(var l=2;l<a;l++)i[l]=n[l];return r.createElement.apply(null,i)}return r.createElement.apply(null,n)}f.displayName="MDXCreateElement"},6701:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>p,contentTitle:()=>i,default:()=>m,frontMatter:()=>a,metadata:()=>c,toc:()=>l});var r=n(7896),o=(n(2784),n(876));const a={},i="\u56fd\u9645\u5316",c={unversionedId:"boot/i18n",id:"boot/i18n",title:"\u56fd\u9645\u5316",description:"TangoBoot \u672c\u8eab\u4e0d\u63d0\u4f9b\u56fd\u9645\u5316\u529f\u80fd\uff0c\u56fd\u9645\u5316\u548c\u60a8\u7684 UI \u7ec4\u4ef6\u5e93\u76f8\u5173\uff0c\u5728\u4e91\u97f3\u4e50\uff0c\u6211\u4eec\u91c7\u7528\u7684\u662f\u57fa\u4e8e @music163/antd \u7684 UI \u5c42\u89e3\u51b3\u65b9\u6848\u3002\u53ef\u4ee5\u501f\u52a9\u5e94\u7528\u5165\u53e3\u7684\u5bb9\u5668\u914d\u7f6e\u529f\u80fd\u8fdb\u884c\u56fd\u9645\u5316\u914d\u7f6e\u3002",source:"@site/docs/boot/i18n.mdx",sourceDirName:"boot",slug:"/boot/i18n",permalink:"/tango/docs/boot/i18n",draft:!1,editUrl:"https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/docs/boot/i18n.mdx",tags:[],version:"current",frontMatter:{}},p={},l=[{value:"\u914d\u7f6e\u793a\u4f8b",id:"\u914d\u7f6e\u793a\u4f8b",level:2}],u={toc:l},s="wrapper";function m(e){let{components:t,...n}=e;return(0,o.kt)(s,(0,r.Z)({},u,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"\u56fd\u9645\u5316"},"\u56fd\u9645\u5316"),(0,o.kt)("p",null,"TangoBoot \u672c\u8eab\u4e0d\u63d0\u4f9b\u56fd\u9645\u5316\u529f\u80fd\uff0c\u56fd\u9645\u5316\u548c\u60a8\u7684 UI \u7ec4\u4ef6\u5e93\u76f8\u5173\uff0c\u5728\u4e91\u97f3\u4e50\uff0c\u6211\u4eec\u91c7\u7528\u7684\u662f\u57fa\u4e8e ",(0,o.kt)("inlineCode",{parentName:"p"},"@music163/antd")," \u7684 UI \u5c42\u89e3\u51b3\u65b9\u6848\u3002\u53ef\u4ee5\u501f\u52a9\u5e94\u7528\u5165\u53e3\u7684\u5bb9\u5668\u914d\u7f6e\u529f\u80fd\u8fdb\u884c\u56fd\u9645\u5316\u914d\u7f6e\u3002"),(0,o.kt)("admonition",{type:"tip"},(0,o.kt)("p",{parentName:"admonition"},"\u5982\u679c\u60a8\u8fd8\u4e0d\u4e86\u89e3\u5e94\u7528\u5165\u53e3\u914d\u7f6e\uff0c\u53ef\u4ee5\u5148\u8bbf\u95ee ",(0,o.kt)("a",{parentName:"p",href:"./app"},"\u5e94\u7528\u5165\u53e3")," \u4e00\u8282\u8fdb\u884c\u4e86\u89e3\u3002")),(0,o.kt)("h2",{id:"\u914d\u7f6e\u793a\u4f8b"},"\u914d\u7f6e\u793a\u4f8b"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-js"},"import { runApp } from '@music163/tango-boot';\nimport { ConfigProvider } from '@music163/antd';\nimport locale from '@music163/antd/es/locale/zh_CN';\nimport 'moment/dist/locale/zh-cn';\n\n// \u8bbe\u7f6e moment \u7684\u6587\u6848\nmoment.locale('zh-cn');\n\nrunApp({\n  // \u8bbe\u7f6e UI \u7ec4\u4ef6\u5e93\u7684\u6587\u6848\u914d\u7f6e\n  providers: [<ConfigProvider locale={locale} />],\n});\n")))}m.isMDXComponent=!0}}]);

assets/js/3a4ef12b.9227259b.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6653],{3769:e=>{e.exports=JSON.parse('{"name":"docusaurus-plugin-content-docs","id":"default"}')}}]);

assets/js/4622598a.ddc8cbe4.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6266],{876:(e,t,r)=>{r.d(t,{Zo:()=>p,kt:()=>f});var n=r(2784);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function c(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function a(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var s=n.createContext({}),u=function(e){var t=n.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},p=function(e){var t=u(e.components);return n.createElement(s.Provider,{value:t},e.children)},l="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},m=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,i=e.originalType,s=e.parentName,p=a(e,["components","mdxType","originalType","parentName"]),l=u(r),m=o,f=l["".concat(s,".").concat(m)]||l[m]||d[m]||i;return r?n.createElement(f,c(c({ref:t},p),{},{components:r})):n.createElement(f,c({ref:t},p))}));function f(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var i=r.length,c=new Array(i);c[0]=m;var a={};for(var s in t)hasOwnProperty.call(t,s)&&(a[s]=t[s]);a.originalType=e,a[l]="string"==typeof e?e:o,c[1]=a;for(var u=2;u<i;u++)c[u]=r[u];return n.createElement.apply(null,c)}return n.createElement.apply(null,r)}m.displayName="MDXCreateElement"},9109:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>s,contentTitle:()=>c,default:()=>d,frontMatter:()=>i,metadata:()=>a,toc:()=>u});var n=r(7896),o=(r(2784),r(876));const i={},c="\u7f16\u8f91\u5668\u81ea\u5b9a\u4e49",a={unversionedId:"designer/customize/editor",id:"designer/customize/editor",title:"\u7f16\u8f91\u5668\u81ea\u5b9a\u4e49",description:"\u6b63\u5728\u7f16\u5199\u4e2d\uff0c\u656c\u8bf7\u671f\u5f85\u3002",source:"@site/docs/designer/customize/editor.mdx",sourceDirName:"designer/customize",slug:"/designer/customize/editor",permalink:"/tango/docs/designer/customize/editor",draft:!1,editUrl:"https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/docs/designer/customize/editor.mdx",tags:[],version:"current",frontMatter:{},sidebar:"designer",previous:{title:"\u8bbe\u7f6e\u5668\u81ea\u5b9a\u4e49",permalink:"/tango/docs/designer/customize/setters"},next:{title:"\u7ec4\u4ef6\u5e93\u81ea\u5b9a\u4e49",permalink:"/tango/docs/designer/customize/components"}},s={},u=[],p={toc:u},l="wrapper";function d(e){let{components:t,...r}=e;return(0,o.kt)(l,(0,n.Z)({},p,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"\u7f16\u8f91\u5668\u81ea\u5b9a\u4e49"},"\u7f16\u8f91\u5668\u81ea\u5b9a\u4e49"),(0,o.kt)("admonition",{type:"tip"},(0,o.kt)("p",{parentName:"admonition"},"\u6b63\u5728\u7f16\u5199\u4e2d\uff0c\u656c\u8bf7\u671f\u5f85\u3002")))}d.isMDXComponent=!0}}]);

assets/js/46813098.495a46cb.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4683],{2994:a=>{a.exports=JSON.parse('{"label":"tango","permalink":"/tango/blog/tags/tango","allTagsPath":"/tango/blog/tags","count":1}')}}]);

assets/js/4ab0863e.5d2ab68c.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3885],{4469:e=>{e.exports=JSON.parse('{"name":"docusaurus-plugin-content-blog","id":"default"}')}}]);

assets/js/4b3ae2da.b10a95b8.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4214],{876:(e,t,r)=>{r.d(t,{Zo:()=>l,kt:()=>f});var n=r(2784);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function a(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function c(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var s=n.createContext({}),u=function(e){var t=n.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):a(a({},t),e)),r},l=function(e){var t=u(e.components);return n.createElement(s.Provider,{value:t},e.children)},p="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},d=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,i=e.originalType,s=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),p=u(r),d=o,f=p["".concat(s,".").concat(d)]||p[d]||m[d]||i;return r?n.createElement(f,a(a({ref:t},l),{},{components:r})):n.createElement(f,a({ref:t},l))}));function f(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var i=r.length,a=new Array(i);a[0]=d;var c={};for(var s in t)hasOwnProperty.call(t,s)&&(c[s]=t[s]);c.originalType=e,c[p]="string"==typeof e?e:o,a[1]=c;for(var u=2;u<i;u++)a[u]=r[u];return n.createElement.apply(null,a)}return n.createElement.apply(null,r)}d.displayName="MDXCreateElement"},1670:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>s,contentTitle:()=>a,default:()=>m,frontMatter:()=>i,metadata:()=>c,toc:()=>u});var n=r(7896),o=(r(2784),r(876));const i={},a="\u5de5\u5177\u680f\u81ea\u5b9a\u4e49",c={unversionedId:"designer/customize/tools",id:"designer/customize/tools",title:"\u5de5\u5177\u680f\u81ea\u5b9a\u4e49",description:"\u6b63\u5728\u7f16\u5199\u4e2d\uff0c\u656c\u8bf7\u671f\u5f85\u3002",source:"@site/docs/designer/customize/tools.mdx",sourceDirName:"designer/customize",slug:"/designer/customize/tools",permalink:"/tango/docs/designer/customize/tools",draft:!1,editUrl:"https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/docs/designer/customize/tools.mdx",tags:[],version:"current",frontMatter:{},sidebar:"designer",previous:{title:"\u9762\u677f\u81ea\u5b9a\u4e49",permalink:"/tango/docs/designer/customize/panels"},next:{title:"\u9009\u62e9\u5668\u81ea\u5b9a\u4e49",permalink:"/tango/docs/designer/customize/selections"}},s={},u=[],l={toc:u},p="wrapper";function m(e){let{components:t,...r}=e;return(0,o.kt)(p,(0,n.Z)({},l,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"\u5de5\u5177\u680f\u81ea\u5b9a\u4e49"},"\u5de5\u5177\u680f\u81ea\u5b9a\u4e49"),(0,o.kt)("admonition",{type:"tip"},(0,o.kt)("p",{parentName:"admonition"},"\u6b63\u5728\u7f16\u5199\u4e2d\uff0c\u656c\u8bf7\u671f\u5f85\u3002")))}m.isMDXComponent=!0}}]);

assets/js/56fa944f.2c3e13b7.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2729],{3019:e=>{e.exports=JSON.parse('{"permalink":"/tango/blog","page":1,"postsPerPage":10,"totalPages":1,"totalCount":1,"blogDescription":"Blog","blogTitle":"Blog"}')}}]);

assets/js/57d9a315.9aedb504.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9619],{876:(e,t,r)=>{r.d(t,{Zo:()=>p,kt:()=>m});var n=r(2784);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function s(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function a(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var c=n.createContext({}),l=function(e){var t=n.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):s(s({},t),e)),r},p=function(e){var t=l(e.components);return n.createElement(c.Provider,{value:t},e.children)},u="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},f=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,i=e.originalType,c=e.parentName,p=a(e,["components","mdxType","originalType","parentName"]),u=l(r),f=o,m=u["".concat(c,".").concat(f)]||u[f]||d[f]||i;return r?n.createElement(m,s(s({ref:t},p),{},{components:r})):n.createElement(m,s({ref:t},p))}));function m(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var i=r.length,s=new Array(i);s[0]=f;var a={};for(var c in t)hasOwnProperty.call(t,c)&&(a[c]=t[c]);a.originalType=e,a[u]="string"==typeof e?e:o,s[1]=a;for(var l=2;l<i;l++)s[l]=r[l];return n.createElement.apply(null,s)}return n.createElement.apply(null,r)}f.displayName="MDXCreateElement"},8433:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>s,default:()=>d,frontMatter:()=>i,metadata:()=>a,toc:()=>l});var n=r(7896),o=(r(2784),r(876));const i={},s="\u6587\u4ef6\u7cfb\u7edf",a={unversionedId:"designer/design/filesystem",id:"designer/design/filesystem",title:"\u6587\u4ef6\u7cfb\u7edf",description:"\u6b63\u5728\u7f16\u5199\u4e2d\uff0c\u656c\u8bf7\u671f\u5f85\u3002",source:"@site/docs/designer/design/filesystem.mdx",sourceDirName:"designer/design",slug:"/designer/design/filesystem",permalink:"/tango/docs/designer/design/filesystem",draft:!1,editUrl:"https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/docs/designer/design/filesystem.mdx",tags:[],version:"current",frontMatter:{},sidebar:"designer",previous:{title:"\u6280\u672f\u67b6\u6784\u6982\u89c8",permalink:"/tango/docs/designer/design/overview"},next:{title:"\u6c99\u7bb1\u5b9e\u73b0",permalink:"/tango/docs/designer/design/sandbox"}},c={},l=[],p={toc:l},u="wrapper";function d(e){let{components:t,...r}=e;return(0,o.kt)(u,(0,n.Z)({},p,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"\u6587\u4ef6\u7cfb\u7edf"},"\u6587\u4ef6\u7cfb\u7edf"),(0,o.kt)("admonition",{type:"tip"},(0,o.kt)("p",{parentName:"admonition"},"\u6b63\u5728\u7f16\u5199\u4e2d\uff0c\u656c\u8bf7\u671f\u5f85\u3002")))}d.isMDXComponent=!0}}]);

assets/js/6875c492.9893eb4f.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8610],{2156:(e,t,a)=>{a.d(t,{Z:()=>s});var n=a(2784),l=a(1077),r=a(7066);function s(e){const{metadata:t}=e,{previousPage:a,nextPage:s}=t;return n.createElement("nav",{className:"pagination-nav","aria-label":(0,l.I)({id:"theme.blog.paginator.navAriaLabel",message:"Blog list page navigation",description:"The ARIA label for the blog pagination"})},a&&n.createElement(r.Z,{permalink:a,title:n.createElement(l.Z,{id:"theme.blog.paginator.newerEntries",description:"The label used to navigate to the newer blog posts page (previous page)"},"Newer Entries")}),s&&n.createElement(r.Z,{permalink:s,title:n.createElement(l.Z,{id:"theme.blog.paginator.olderEntries",description:"The label used to navigate to the older blog posts page (next page)"},"Older Entries"),isNext:!0}))}},1852:(e,t,a)=>{a.d(t,{Z:()=>s});var n=a(2784),l=a(1375),r=a(1035);function s(e){let{items:t,component:a=r.Z}=e;return n.createElement(n.Fragment,null,t.map((e=>{let{content:t}=e;return n.createElement(l.n,{key:t.metadata.permalink,content:t},n.createElement(a,null,n.createElement(t,null)))})))}},242:(e,t,a)=>{a.r(t),a.d(t,{default:()=>E});var n=a(2784),l=a(6277),r=a(1077),s=a(7239),o=a(328),i=a(211),g=a(9817),c=a(3558),m=a(2156),p=a(4390),u=a(1852);function d(e){const t=function(){const{selectMessage:e}=(0,s.c)();return t=>e(t,(0,r.I)({id:"theme.blog.post.plurals",description:'Pluralized label for "{count} posts". Use as much plural forms (separated by "|") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)',message:"One post|{count} posts"},{count:t}))}();return(0,r.I)({id:"theme.blog.tagTitle",description:"The title of the page for a blog tag",message:'{nPosts} tagged with "{tagName}"'},{nPosts:t(e.count),tagName:e.label})}function h(e){let{tag:t}=e;const a=d(t);return n.createElement(n.Fragment,null,n.createElement(o.d,{title:a}),n.createElement(p.Z,{tag:"blog_tags_posts"}))}function b(e){let{tag:t,items:a,sidebar:l,listMetadata:s}=e;const o=d(t);return n.createElement(c.Z,{sidebar:l},n.createElement("header",{className:"margin-bottom--xl"},n.createElement("h1",null,o),n.createElement(g.Z,{href:t.allTagsPath},n.createElement(r.Z,{id:"theme.tags.tagsPageLink",description:"The label of the link targeting the tag list page"},"View All Tags"))),n.createElement(u.Z,{items:a}),n.createElement(m.Z,{metadata:s}))}function E(e){return n.createElement(o.FG,{className:(0,l.Z)(i.k.wrapper.blogPages,i.k.page.blogTagPostListPage)},n.createElement(h,e),n.createElement(b,e))}}}]);

assets/js/6ff5cc81.9700074a.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9333],{876:(e,t,r)=>{r.d(t,{Zo:()=>u,kt:()=>m});var n=r(2784);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function a(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function c(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var s=n.createContext({}),p=function(e){var t=n.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):a(a({},t),e)),r},u=function(e){var t=p(e.components);return n.createElement(s.Provider,{value:t},e.children)},l="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},f=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,i=e.originalType,s=e.parentName,u=c(e,["components","mdxType","originalType","parentName"]),l=p(r),f=o,m=l["".concat(s,".").concat(f)]||l[f]||d[f]||i;return r?n.createElement(m,a(a({ref:t},u),{},{components:r})):n.createElement(m,a({ref:t},u))}));function m(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var i=r.length,a=new Array(i);a[0]=f;var c={};for(var s in t)hasOwnProperty.call(t,s)&&(c[s]=t[s]);c.originalType=e,c[l]="string"==typeof e?e:o,a[1]=c;for(var p=2;p<i;p++)a[p]=r[p];return n.createElement.apply(null,a)}return n.createElement.apply(null,r)}f.displayName="MDXCreateElement"},7654:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>s,contentTitle:()=>a,default:()=>d,frontMatter:()=>i,metadata:()=>c,toc:()=>p});var n=r(7896),o=(r(2784),r(876));const i={},a="\u6280\u672f\u67b6\u6784\u6982\u89c8",c={unversionedId:"designer/design/overview",id:"designer/design/overview",title:"\u6280\u672f\u67b6\u6784\u6982\u89c8",description:"\u6b63\u5728\u7f16\u5199\u4e2d\uff0c\u656c\u8bf7\u671f\u5f85\u3002",source:"@site/docs/designer/design/overview.mdx",sourceDirName:"designer/design",slug:"/designer/design/overview",permalink:"/tango/docs/designer/design/overview",draft:!1,editUrl:"https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/docs/designer/design/overview.mdx",tags:[],version:"current",frontMatter:{},sidebar:"designer",previous:{title:"\u7ec4\u4ef6\u5e93\u81ea\u5b9a\u4e49",permalink:"/tango/docs/designer/customize/components"},next:{title:"\u6587\u4ef6\u7cfb\u7edf",permalink:"/tango/docs/designer/design/filesystem"}},s={},p=[],u={toc:p},l="wrapper";function d(e){let{components:t,...r}=e;return(0,o.kt)(l,(0,n.Z)({},u,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"\u6280\u672f\u67b6\u6784\u6982\u89c8"},"\u6280\u672f\u67b6\u6784\u6982\u89c8"),(0,o.kt)("admonition",{type:"tip"},(0,o.kt)("p",{parentName:"admonition"},"\u6b63\u5728\u7f16\u5199\u4e2d\uff0c\u656c\u8bf7\u671f\u5f85\u3002")))}d.isMDXComponent=!0}}]);

assets/js/7203fa0e.ce7648a7.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4913],{493:e=>{e.exports=JSON.parse('[{"label":"netease","permalink":"/tango/blog/tags/netease","count":1},{"label":"tango","permalink":"/tango/blog/tags/tango","count":1},{"label":"open-source","permalink":"/tango/blog/tags/open-source","count":1}]')}}]);

assets/js/814f3328.50f110b1.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2535],{5641:e=>{e.exports=JSON.parse('{"title":"Recent posts","items":[{"title":"Tango LowCode Builder Released!","permalink":"/tango/blog/2023/08/30/welcome"}]}')}}]);

assets/js/95dd1100.f31575cf.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8340],{876:(e,t,r)=>{r.d(t,{Zo:()=>p,kt:()=>f});var n=r(2784);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function s(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function c(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var a=n.createContext({}),u=function(e){var t=n.useContext(a),r=t;return e&&(r="function"==typeof e?e(t):s(s({},t),e)),r},p=function(e){var t=u(e.components);return n.createElement(a.Provider,{value:t},e.children)},l="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},m=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,i=e.originalType,a=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),l=u(r),m=o,f=l["".concat(a,".").concat(m)]||l[m]||d[m]||i;return r?n.createElement(f,s(s({ref:t},p),{},{components:r})):n.createElement(f,s({ref:t},p))}));function f(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var i=r.length,s=new Array(i);s[0]=m;var c={};for(var a in t)hasOwnProperty.call(t,a)&&(c[a]=t[a]);c.originalType=e,c[l]="string"==typeof e?e:o,s[1]=c;for(var u=2;u<i;u++)s[u]=r[u];return n.createElement.apply(null,s)}return n.createElement.apply(null,r)}m.displayName="MDXCreateElement"},4269:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>a,contentTitle:()=>s,default:()=>d,frontMatter:()=>i,metadata:()=>c,toc:()=>u});var n=r(7896),o=(r(2784),r(876));const i={},s="\u8bbe\u7f6e\u5668\u81ea\u5b9a\u4e49",c={unversionedId:"designer/customize/setters",id:"designer/customize/setters",title:"\u8bbe\u7f6e\u5668\u81ea\u5b9a\u4e49",description:"\u6b63\u5728\u7f16\u5199\u4e2d\uff0c\u656c\u8bf7\u671f\u5f85\u3002",source:"@site/docs/designer/customize/setters.mdx",sourceDirName:"designer/customize",slug:"/designer/customize/setters",permalink:"/tango/docs/designer/customize/setters",draft:!1,editUrl:"https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/docs/designer/customize/setters.mdx",tags:[],version:"current",frontMatter:{},sidebar:"designer",previous:{title:"\u9009\u62e9\u5668\u81ea\u5b9a\u4e49",permalink:"/tango/docs/designer/customize/selections"},next:{title:"\u7f16\u8f91\u5668\u81ea\u5b9a\u4e49",permalink:"/tango/docs/designer/customize/editor"}},a={},u=[],p={toc:u},l="wrapper";function d(e){let{components:t,...r}=e;return(0,o.kt)(l,(0,n.Z)({},p,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"\u8bbe\u7f6e\u5668\u81ea\u5b9a\u4e49"},"\u8bbe\u7f6e\u5668\u81ea\u5b9a\u4e49"),(0,o.kt)("admonition",{type:"tip"},(0,o.kt)("p",{parentName:"admonition"},"\u6b63\u5728\u7f16\u5199\u4e2d\uff0c\u656c\u8bf7\u671f\u5f85\u3002")))}d.isMDXComponent=!0}}]);

assets/js/9e4087bc.f2f1f02b.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3608],{3008:(e,t,a)=>{a.r(t),a.d(t,{default:()=>o});var r=a(2784),l=a(9817),n=a(1077),c=a(328),i=a(2842);function m(e){let{year:t,posts:a}=e;return r.createElement(r.Fragment,null,r.createElement("h3",null,t),r.createElement("ul",null,a.map((e=>r.createElement("li",{key:e.metadata.date},r.createElement(l.Z,{to:e.metadata.permalink},e.metadata.formattedDate," - ",e.metadata.title))))))}function s(e){let{years:t}=e;return r.createElement("section",{className:"margin-vert--lg"},r.createElement("div",{className:"container"},r.createElement("div",{className:"row"},t.map(((e,t)=>r.createElement("div",{key:t,className:"col col--4 margin-vert--lg"},r.createElement(m,e)))))))}function o(e){let{archive:t}=e;const a=(0,n.I)({id:"theme.blog.archive.title",message:"Archive",description:"The page & hero title of the blog archive page"}),l=(0,n.I)({id:"theme.blog.archive.description",message:"Archive",description:"The page & hero description of the blog archive page"}),m=function(e){const t=e.reduceRight(((e,t)=>{const a=t.metadata.date.split("-")[0],r=e.get(a)??[];return e.set(a,[t,...r])}),new Map);return Array.from(t,(e=>{let[t,a]=e;return{year:t,posts:a}}))}(t.blogPosts);return r.createElement(r.Fragment,null,r.createElement(c.d,{title:a,description:l}),r.createElement(i.Z,null,r.createElement("header",{className:"hero hero--primary"},r.createElement("div",{className:"container"},r.createElement("h1",{className:"hero__title"},a),r.createElement("p",{className:"hero__subtitle"},l))),r.createElement("main",null,m.length>0&&r.createElement(s,{years:m}))))}}}]);

assets/js/a62be7fb.13d02872.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[870],{876:(e,t,r)=>{r.d(t,{Zo:()=>u,kt:()=>f});var n=r(2784);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function a(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function i(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?a(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):a(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function c(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var s=n.createContext({}),p=function(e){var t=n.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},u=function(e){var t=p(e.components);return n.createElement(s.Provider,{value:t},e.children)},l="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},m=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,a=e.originalType,s=e.parentName,u=c(e,["components","mdxType","originalType","parentName"]),l=p(r),m=o,f=l["".concat(s,".").concat(m)]||l[m]||d[m]||a;return r?n.createElement(f,i(i({ref:t},u),{},{components:r})):n.createElement(f,i({ref:t},u))}));function f(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=r.length,i=new Array(a);i[0]=m;var c={};for(var s in t)hasOwnProperty.call(t,s)&&(c[s]=t[s]);c.originalType=e,c[l]="string"==typeof e?e:o,i[1]=c;for(var p=2;p<a;p++)i[p]=r[p];return n.createElement.apply(null,i)}return n.createElement.apply(null,r)}m.displayName="MDXCreateElement"},5407:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>s,contentTitle:()=>i,default:()=>d,frontMatter:()=>a,metadata:()=>c,toc:()=>p});var n=r(7896),o=(r(2784),r(876));const a={},i="\u9762\u677f\u81ea\u5b9a\u4e49",c={unversionedId:"designer/customize/panels",id:"designer/customize/panels",title:"\u9762\u677f\u81ea\u5b9a\u4e49",description:"\u6b63\u5728\u7f16\u5199\u4e2d\uff0c\u656c\u8bf7\u671f\u5f85\u3002",source:"@site/docs/designer/customize/panels.mdx",sourceDirName:"designer/customize",slug:"/designer/customize/panels",permalink:"/tango/docs/designer/customize/panels",draft:!1,editUrl:"https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/docs/designer/customize/panels.mdx",tags:[],version:"current",frontMatter:{},sidebar:"designer",previous:{title:"\u670d\u52a1\u7aef\u63a5\u5165",permalink:"/tango/docs/designer/deploy/server"},next:{title:"\u5de5\u5177\u680f\u81ea\u5b9a\u4e49",permalink:"/tango/docs/designer/customize/tools"}},s={},p=[],u={toc:p},l="wrapper";function d(e){let{components:t,...r}=e;return(0,o.kt)(l,(0,n.Z)({},u,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"\u9762\u677f\u81ea\u5b9a\u4e49"},"\u9762\u677f\u81ea\u5b9a\u4e49"),(0,o.kt)("admonition",{type:"tip"},(0,o.kt)("p",{parentName:"admonition"},"\u6b63\u5728\u7f16\u5199\u4e2d\uff0c\u656c\u8bf7\u671f\u5f85\u3002")))}d.isMDXComponent=!0}}]);

assets/js/a6aa9e1f.84c5daeb.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3089],{9956:(e,t,a)=>{a.r(t),a.d(t,{default:()=>u});var n=a(2784),l=a(6277),r=a(7614),i=a(328),o=a(211),s=a(3558),m=a(2156),c=a(4390),g=a(1852);function p(e){const{metadata:t}=e,{siteConfig:{title:a}}=(0,r.Z)(),{blogDescription:l,blogTitle:o,permalink:s}=t,m="/"===s?a:o;return n.createElement(n.Fragment,null,n.createElement(i.d,{title:m,description:l}),n.createElement(c.Z,{tag:"blog_posts_list"}))}function d(e){const{metadata:t,items:a,sidebar:l}=e;return n.createElement(s.Z,{sidebar:l},n.createElement(g.Z,{items:a}),n.createElement(m.Z,{metadata:t}))}function u(e){return n.createElement(i.FG,{className:(0,l.Z)(o.k.wrapper.blogPages,o.k.page.blogListPage)},n.createElement(p,e),n.createElement(d,e))}},2156:(e,t,a)=>{a.d(t,{Z:()=>i});var n=a(2784),l=a(1077),r=a(7066);function i(e){const{metadata:t}=e,{previousPage:a,nextPage:i}=t;return n.createElement("nav",{className:"pagination-nav","aria-label":(0,l.I)({id:"theme.blog.paginator.navAriaLabel",message:"Blog list page navigation",description:"The ARIA label for the blog pagination"})},a&&n.createElement(r.Z,{permalink:a,title:n.createElement(l.Z,{id:"theme.blog.paginator.newerEntries",description:"The label used to navigate to the newer blog posts page (previous page)"},"Newer Entries")}),i&&n.createElement(r.Z,{permalink:i,title:n.createElement(l.Z,{id:"theme.blog.paginator.olderEntries",description:"The label used to navigate to the older blog posts page (next page)"},"Older Entries"),isNext:!0}))}},1852:(e,t,a)=>{a.d(t,{Z:()=>i});var n=a(2784),l=a(1375),r=a(1035);function i(e){let{items:t,component:a=r.Z}=e;return n.createElement(n.Fragment,null,t.map((e=>{let{content:t}=e;return n.createElement(l.n,{key:t.metadata.permalink,content:t},n.createElement(a,null,n.createElement(t,null)))})))}}}]);

assets/js/ae267dd3.31131df9.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1510],{876:(e,t,r)=>{r.d(t,{Zo:()=>u,kt:()=>f});var n=r(2784);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function c(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function a(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var s=n.createContext({}),p=function(e){var t=n.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},u=function(e){var t=p(e.components);return n.createElement(s.Provider,{value:t},e.children)},l="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},d=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,i=e.originalType,s=e.parentName,u=a(e,["components","mdxType","originalType","parentName"]),l=p(r),d=o,f=l["".concat(s,".").concat(d)]||l[d]||m[d]||i;return r?n.createElement(f,c(c({ref:t},u),{},{components:r})):n.createElement(f,c({ref:t},u))}));function f(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var i=r.length,c=new Array(i);c[0]=d;var a={};for(var s in t)hasOwnProperty.call(t,s)&&(a[s]=t[s]);a.originalType=e,a[l]="string"==typeof e?e:o,c[1]=a;for(var p=2;p<i;p++)c[p]=r[p];return n.createElement.apply(null,c)}return n.createElement.apply(null,r)}d.displayName="MDXCreateElement"},8977:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>s,contentTitle:()=>c,default:()=>m,frontMatter:()=>i,metadata:()=>a,toc:()=>p});var n=r(7896),o=(r(2784),r(876));const i={},c="\u7ec4\u4ef6\u5e93\u81ea\u5b9a\u4e49",a={unversionedId:"designer/customize/components",id:"designer/customize/components",title:"\u7ec4\u4ef6\u5e93\u81ea\u5b9a\u4e49",description:"\u6b63\u5728\u7f16\u5199\u4e2d\uff0c\u656c\u8bf7\u671f\u5f85\u3002",source:"@site/docs/designer/customize/components.mdx",sourceDirName:"designer/customize",slug:"/designer/customize/components",permalink:"/tango/docs/designer/customize/components",draft:!1,editUrl:"https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/docs/designer/customize/components.mdx",tags:[],version:"current",frontMatter:{},sidebar:"designer",previous:{title:"\u7f16\u8f91\u5668\u81ea\u5b9a\u4e49",permalink:"/tango/docs/designer/customize/editor"},next:{title:"\u6280\u672f\u67b6\u6784\u6982\u89c8",permalink:"/tango/docs/designer/design/overview"}},s={},p=[],u={toc:p},l="wrapper";function m(e){let{components:t,...r}=e;return(0,o.kt)(l,(0,n.Z)({},u,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"\u7ec4\u4ef6\u5e93\u81ea\u5b9a\u4e49"},"\u7ec4\u4ef6\u5e93\u81ea\u5b9a\u4e49"),(0,o.kt)("admonition",{type:"tip"},(0,o.kt)("p",{parentName:"admonition"},"\u6b63\u5728\u7f16\u5199\u4e2d\uff0c\u656c\u8bf7\u671f\u5f85\u3002")))}m.isMDXComponent=!0}}]);