{"id":20572005,"url":"https://github.com/netease/tango-playground","last_synced_at":"2025-09-11T06:38:13.199Z","repository":{"id":191612997,"uuid":"684993387","full_name":"NetEase/tango-playground","owner":"NetEase","description":"A playground app of tango low-code builder","archived":false,"fork":false,"pushed_at":"2024-09-10T09:38:58.000Z","size":79343,"stargazers_count":7,"open_issues_count":1,"forks_count":8,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-21T17:59:24.986Z","etag":null,"topics":["builder","low-code","tango"],"latest_commit_sha":null,"homepage":"https://tango-demo.musicfe.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NetEase.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-08-30T09:30:09.000Z","updated_at":"2025-03-14T13:40:42.000Z","dependencies_parsed_at":"2023-12-12T10:28:27.173Z","dependency_job_id":"f5c8bbcd-6172-443c-9465-bacf4ee44087","html_url":"https://github.com/NetEase/tango-playground","commit_stats":null,"previous_names":["netease-tango/netease-tango.github.io","netease/tango-playground"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/NetEase/tango-playground","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NetEase%2Ftango-playground","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NetEase%2Ftango-playground/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NetEase%2Ftango-playground/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NetEase%2Ftango-playground/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NetEase","download_url":"https://codeload.github.com/NetEase/tango-playground/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NetEase%2Ftango-playground/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274589627,"owners_count":25312971,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-11T02:00:13.660Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["builder","low-code","tango"],"created_at":"2024-11-16T05:18:01.638Z","updated_at":"2025-09-11T06:38:13.145Z","avatar_url":"https://github.com/NetEase.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `playground`\n\n搭建平台演示示例\n\n## 开发\n\n开发前需先写入 hosts 文件\n\n```hosts\n127.0.0.1 local.netease.com\n```\n\n此外还需要参考 Tango 的文档 [启动本地沙箱](https://netease.github.io/tango/docs/designer/quick-start#%E5%90%AF%E5%8A%A8%E6%9C%AC%E5%9C%B0%E6%B2%99%E7%AE%B1) 一节在本地运行沙箱（线上版本沙箱因 GitHub Pages 限制，无法返回 http 响应头），启动后确认 https://local.netease.com:8443 能访问到沙箱产物并信任自签证书\n\n若沙箱的地址或端口不一致，请指定 `SANDBOX_BUNDLER_URL` 环境变量或修改 `src/pages/index.tsx` 中 `\u003cSandbox\u003e` 的 `bundlerURL` 属性\n\n然后安装依赖并启动即可\n\n```sh\nnpm i\nnpm start\n```\n\n启动后访问 https://local.netease.com:6006/designer 即可看到 playground\n\n## Demo 编写\n\ndemo 均放置在 `/src/demo` 目录下，每个目录就是一个 demo 示例\n\n目前暂不支持动态配置，因此如果需要新增 demo，请 **严格按照以下流程初始化**\n\n1.  在 `/src/demo` 目录下创建一个目录，目录名为 demo 的名称（例如 `your-demo`）\n\n2.  在新建的目录下自由创建文件，建议基于现有低代码的格式建立文件树（参考 `/src/mock/project.ts`）  \n    新的 demo 模板会默认基于 `/src/mock/project.ts` 扩展。也就是说，你只需要创建你需要修改的文件（一般只需要创建 `src/pages/index.js` 即入口页面）即可。其他的文件如 `tango.config.json` 和 `package.json` 等文件，除非需要修改（例如调整依赖？），一般不需要再复制创建，下面会自动合并默认的模板。\n\n3.  在该目录下创建 `index.ts` 文件，将你使用的文件用 `raw-loader` 给 import 进来，生成 Tango 需要的文件格式，然后 export：\n    ```ts\n    // @ts-nocheck\n    import srcPagesIndex from '!!raw-loader!./src/pages/index.js';\n    import srcStoresIndex from '!!raw-loader!./src/stores/index.js';\n    import tangoConfigJson from '!!raw-loader!./tango.config.json';\n\n    export default {\n      title: 'Your Demo',\n      files: [{\n        filename: '/src/pages/index.js', code: srcPagesIndex,\n        filename: '/src/stores/index.js', code: srcStoresIndex,\n        filename: '/tango.config.json', code: tangoConfigJson,\n      }]\n    };\n    ```\n\n4.  修改 `/src/demo` 目录下的 `index.ts` 文件，将上面的文件夹 import 进来，使用 `mergeDemo()` 包裹，然后在 export default 中导出，导出时填写的 key 就是模板名称：\n    ```ts\n    import { mergeDemo } from '../utils';\n    // ...其他的 demo...\n    import yourDemo from './your-demo';\n\n    export default {\n      // ...其他的 demo...\n      'your-demo': mergeDemo(yourDemo),\n    };\n    ```\n\n5.  编写完成后，访问 https://local.netease.com:6006/designer/[demo-key] 即可查看效果  \n    如果 demo 不存在，会在控制台打出 warning，请确认已按照上述方式编写 demo 模板并正确导出\n\n如果遇到问题，请参考 `/src/demo/example` 确认示例模板\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnetease%2Ftango-playground","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnetease%2Ftango-playground","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnetease%2Ftango-playground/lists"}