1. 简介
2. 如何使用
   1. 界面操作区
   2. 操作区说明
   3. 一些模板
   4. 编写的代码长度有上限么？

简介

CyberCloud Playground（游乐场）是一个 Web 端的代码预览工具。

你可以通过项目主页进入一个代码编辑器页面，选择平台 UI 库版本，编写代码，实时预览效果并将编写的代码通过链接分享给他人。目前，游乐场接入了 Vue、Element Plus 和 @cybercloud/ui 库[^add-more]。

[^add-more]：如果你对在游乐场接入其它库比如 @cybercloud/wms-component 感兴趣，我们能提供技术上的支持。如果只是想临时性引入一些代码框架和库比如 lodash，你需要编写 import_map。

游乐场适用于以下场景：

1. 反馈问题：想给平台的 @cybercloud/ui 库提问题和改进建议，但又不知道怎么描述，那么你一定要来体验一下游乐场的魅力，编写代码、一键复制分享链接，就是这么简单。
2. 确认问题：通过在页面切换库的版本，能轻松判断出出现问题的库版本，也就是说你获得到了一个能轻松 git bisect 的工具。
3. 体验新功能：@cybercloud/ui 发新版时有能力通过发版日志或 Gitlab Issue 介绍中的链接直接预览效果，并评估是否需要在插件或其它项目中使用新版 UI 库。
4. ...

如何使用

界面操作区

![[CyberCloud Playground 界面说明.png]]

操作区说明

1. 访问首页 https://ttx.lionad.art/ui-playground
2. 在编辑器区域任意编写代码，import_map 或添加新文件
3. 如果代码有错误，编辑器会在底部出现醒目提示
4. 效果预览时（代码运行时）的警告和错误会在这块区域出现
5. 如果你写的代码是”正确的“，右侧应当能实时预览效果
6. 可以自由调节 @cybercloud/ui、Element Plus 和 Vue 几个组件库的版本（稍有限制后面小节说明）
7. 点击分享按钮，将链接分享给你喜欢的人

一些模板

• 通过 import_map 引入 lodash 处理数据：https://tools.lionad.art/short-url/t/prod/6D9T78jueucHvNkXj5Z8tLMTFASdA1tw

编写的代码长度有上限么？

代码被 Vue/Repl 压缩后拼接成了 URL Hash，而当你点击”分享“按钮后，程序会通过短 URL 服务为你生成一个只有 80 字符长的 URL，以便于在单条消息最长 2000 字符的企业微信或其它通讯工具中分享。

从这个流程来看，尽管 Chrome 浏览器本身支持高达 2MB 的 URL 容量，但是受木桶短板的限制实际容量不会那么长。

• 如果你直接分享带 Hash 的 URL，3000 loc 的代码（约 350 KB）能正常打开及渲染，见示例

![[3000 loc 代码.png]]

• 如果你使用”分享“按钮生成短链接并分享，