npm - @dao42/d42paas-front - Versions diffs - 0.9.23 → 0.9.26 - Mend

@dao42/d42paas-front 0.9.23 → 0.9.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/README.md +402 -0
package/dist/DaoPaaS.cjs +218 -172
package/dist/DaoPaaS.d.ts +85 -485
package/dist/sdk/docs/assets/highlight.css +59 -10
package/dist/sdk/docs/assets/search.js +1 -1
package/dist/sdk/docs/enums/Messages.html +18 -0
package/dist/sdk/docs/enums/ThemeType.html +11 -0
package/dist/sdk/docs/index.html +69 -50
package/dist/sdk/docs/interfaces/Component.html +7 -8
package/dist/sdk/docs/interfaces/IDaoPaaS.html +64 -47
package/dist/sdk/docs/interfaces/PaaSOptions.html +12 -8
package/dist/sdk/docs/modules.html +15 -3
package/package.json +13 -14
package/dist/sdk/docs/interfaces/BrowserProps.html +0 -11
package/dist/sdk/docs/interfaces/ConsoleOrShellProps.html +0 -19
package/dist/sdk/docs/interfaces/DiffPatternInfo.html +0 -1
package/dist/sdk/docs/interfaces/EditorProps.html +0 -37
package/dist/sdk/docs/interfaces/MenuTagProps.html +0 -17
package/dist/sdk/docs/interfaces/TreeProps.html +0 -17

package/dist/sdk/docs/index.html CHANGED Viewed

@@ -1,70 +1,89 @@
 <!DOCTYPE html><html class="default"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>DaoPaaS API Options</title><meta name="description" content="Documentation for DaoPaaS API Options"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="assets/style.css"/><link rel="stylesheet" href="assets/highlight.css"/><script async src="assets/search.js" id="search-script"></script></head><body><script>document.body.classList.add(localStorage.getItem("tsd-theme") || "os")</script><header><div class="tsd-page-toolbar"><div class="container"><div class="table-wrap"><div class="table-cell" id="tsd-search" data-base="."><div class="field"><label for="tsd-search-field" class="tsd-widget search no-caption">Search</label><input type="text" id="tsd-search-field"/></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="index.html" class="title">DaoPaaS API Options</a></div><div class="table-cell" id="tsd-widgets"><div id="tsd-filter"><a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a><div class="tsd-filter-group"><div class="tsd-select" id="tsd-filter-visibility"><span class="tsd-select-label">All</span><ul class="tsd-select-list"><li data-value="public">Public</li><li data-value="protected">Public/Protected</li><li data-value="private" class="selected">All</li></ul></div> <input type="checkbox" id="tsd-filter-inherited" checked/><label class="tsd-widget" for="tsd-filter-inherited">Inherited</label><input type="checkbox" id="tsd-filter-externals" checked/><label class="tsd-widget" for="tsd-filter-externals">Externals</label></div></div><a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a></div></div></div></div><div class="tsd-page-title"><div class="container"><h1>DaoPaaS API Options </h1></div></div></header><div class="container container-main"><div class="row"><div class="col-8 col-content"><div class="tsd-panel tsd-typography">
-<a href="#paas-sdk-project" id="paas-sdk-project" style="color: inherit; text-decoration: none;">
-  <h1>PaaS SDK project</h1>
-</a>
-<a href="#environments" id="environments" style="color: inherit; text-decoration: none;">
-  <h2>Environments</h2>
+<a href="#paas-sdk-示例" id="paas-sdk-示例" style="color: inherit; text-decoration: none;">
+  <h1>PaaS SDK 示例</h1>
 </a>
+<p>欢迎来到PaaS SDK示例，本文是DaoPaaS的一个简单使用示例。</p>
+<p>温馨提示</p>
 <ul>
-<li>node &gt;= 14</li>
-<li>pnpm &gt; 7.1.6</li>
-<li>mongodb &gt; 4.0</li>
+<li>SDK接口文档<a href="https://www.apifox.cn/apidoc/shared-c0c0ebad-15b3-4605-896e-e39879fe6e47/doc-952073">api地址</a></li>
+<li>本案例的axios为封装后的axios, baseUrl默认为“<a href="http://www.1024paas.com%E2%80%9D%E3%80%82">www.1024paas.com”。</a></li>
+<li>真实接口请求过程中，请按照接口文档的要求携带头信息。</li>
+<li>本案例使用React，非React项目请参考逻辑。</li>
+<li>请用户自行优化代码逻辑并做合适的错误处理。</li>
 </ul>
-<p>开始前, 请确认以上软件已经安装.</p>
-<p>mongodb 可以使用 Docker 来运行</p>
-<pre><code class="language-bash"><span class="hl-0"># 启动</span><br/><span class="hl-1">docker-compose up -d</span><br/><br/><span class="hl-0"># 关闭</span><br/><span class="hl-1">docker-compose down</span>
-</code></pre>
-<a href="#install" id="install" style="color: inherit; text-decoration: none;">
-  <h2>Install</h2>
+<a href="#part-one-请求获取ticket票流程" id="part-one-请求获取ticket票流程" style="color: inherit; text-decoration: none;">
+  <h2>PART-ONE 请求获取ticket(票)流程</h2>
 </a>
-<p>首先，安装依赖</p>
-<p><code>npm install pnpm -g</code></p>
-<p><code>npm config set auto-install-peers=true</code></p>
-<p><code>pnpm install</code></p>
-<p>然后启动环境</p>
-<p>第一步, 配置环境变量, <code>cp .env.local.example .env</code>, 然后修改其中的 <code>PAAS_SERVER_RABBITMQ_QUEUE=你的名字</code>，其他一般不用动。</p>
-<p>第二步, 启动 demo，<code>cd packages/d42paas-official; pnpm dev</code></p>
-<p>第三步，新开终端，再执行 <code>cd packages/server; pnpm dev</code></p>
-<p>最后，访问：<a href="http://localhost:3010">http://localhost:3010</a> 即可</p>
-<a href="#调试" id="调试" style="color: inherit; text-decoration: none;">
-  <h1>调试</h1>
+<a href="#第一步：定义接口" id="第一步：定义接口" style="color: inherit; text-decoration: none;">
+  <h3>第一步：定义接口</h3>
 </a>
-<p>将 <code>pnpm dev</code> 换成 <code>pnpm debug</code>, 然后在浏览器上启动 chrome node debugger 即可.</p>
-<p>也可以直接用 VSCODE 的调试器进行调试</p>
+<pre><code class="language-ts"><span class="hl-0">/* </span><br/><span class="hl-0"> * 获取codeZone环境列表 </span><br/><span class="hl-0"> * @returns { {id: int, versionList: {id: string, name: string}[]}[] }</span><br/><span class="hl-0">*/</span><br/><span class="hl-1">export</span><span class="hl-2"> </span><span class="hl-3">async</span><span class="hl-2"> </span><span class="hl-3">function</span><span class="hl-2"> </span><span class="hl-4">getEnvironmentsApi</span><span class="hl-2">() {</span><br/><span class="hl-2">    </span><span class="hl-3">const</span><span class="hl-2"> </span><span class="hl-5">res</span><span class="hl-2"> = </span><span class="hl-1">await</span><span class="hl-2"> </span><span class="hl-6">axios</span><span class="hl-2">.</span><span class="hl-4">get</span><span class="hl-2">(</span><span class="hl-7">&#39;/api/v1/sdk/environments&#39;</span><span class="hl-2">)</span><br/><span class="hl-2">    </span><span class="hl-1">return</span><span class="hl-2"> </span><span class="hl-6">res</span><span class="hl-2">.</span><span class="hl-6">data</span><span class="hl-2"> </span><span class="hl-0">// 环境列表(数组)</span><br/><span class="hl-2">}</span><br/><span class="hl-0">/* </span><br/><span class="hl-0"> * 创建codeZone, 获取codeZoneId</span><br/><span class="hl-0"> * @param { string } environmentVerId 环境id</span><br/><span class="hl-0"> * @returns { string }</span><br/><span class="hl-0">*/</span><br/><span class="hl-3">async</span><span class="hl-2"> </span><span class="hl-3">function</span><span class="hl-2"> </span><span class="hl-4">getCodeZoneIdApi</span><span class="hl-2">(</span><span class="hl-6">environmentVerId</span><span class="hl-2">: </span><span class="hl-8">string</span><span class="hl-2">): </span><span class="hl-8">string</span><span class="hl-2"> {</span><br/><span class="hl-2">    </span><span class="hl-3">const</span><span class="hl-2"> </span><span class="hl-5">res</span><span class="hl-2"> = </span><span class="hl-1">await</span><span class="hl-2"> </span><span class="hl-6">axios</span><span class="hl-2">.</span><span class="hl-4">post</span><span class="hl-2">(</span><span class="hl-7">&#39;/api/v1/sdk/codeZones&#39;</span><span class="hl-2">,{</span><span class="hl-6">environmentVerId</span><span class="hl-2">})</span><br/><span class="hl-2">    </span><span class="hl-1">return</span><span class="hl-2"> </span><span class="hl-6">res</span><span class="hl-2">.</span><span class="hl-6">data</span><span class="hl-2">.</span><span class="hl-6">id</span><br/><span class="hl-2">}</span><br/><span class="hl-0">/* </span><br/><span class="hl-0"> * 通过 codeZoneId 获取 playgroundId</span><br/><span class="hl-0"> * @param { string } codeZoneId </span><br/><span class="hl-0"> * @returns { string }</span><br/><span class="hl-0">*/</span><br/><span class="hl-3">async</span><span class="hl-2"> </span><span class="hl-3">function</span><span class="hl-2"> </span><span class="hl-4">getPlaygroundIdApi</span><span class="hl-2">(</span><span class="hl-6">codeZoneId</span><span class="hl-2">: </span><span class="hl-8">string</span><span class="hl-2">): </span><span class="hl-8">string</span><span class="hl-2"> {</span><br/><span class="hl-2">    </span><span class="hl-3">const</span><span class="hl-2"> </span><span class="hl-5">res</span><span class="hl-2"> = </span><span class="hl-1">await</span><span class="hl-2"> </span><span class="hl-6">axios</span><span class="hl-2">.</span><span class="hl-4">get</span><span class="hl-2">(</span><span class="hl-7">&#39;/api/v1/sdk/codeZones/&#39;</span><span class="hl-2">+</span><span class="hl-6">codeZoneId</span><span class="hl-2">+</span><span class="hl-7">&#39;/playground&#39;</span><span class="hl-2">)</span><br/><span class="hl-2">    </span><span class="hl-1">return</span><span class="hl-2"> </span><span class="hl-6">res</span><span class="hl-2">.</span><span class="hl-6">data</span><span class="hl-2">.</span><span class="hl-6">id</span><br/><span class="hl-2">}</span><br/><span class="hl-0">/* </span><br/><span class="hl-0"> * 通过 playgroundId 获取 ticket</span><br/><span class="hl-0"> * @param { string } playgroundId </span><br/><span class="hl-0"> * @returns { string }</span><br/><span class="hl-0">*/</span><br/><span class="hl-3">async</span><span class="hl-2"> </span><span class="hl-3">function</span><span class="hl-2"> </span><span class="hl-4">getTicketApi</span><span class="hl-2">(</span><span class="hl-6">playgroundId</span><span class="hl-2">: </span><span class="hl-8">string</span><span class="hl-2">): </span><span class="hl-8">string</span><span class="hl-2"> {</span><br/><span class="hl-2">    </span><span class="hl-3">const</span><span class="hl-2"> </span><span class="hl-5">res</span><span class="hl-2"> = </span><span class="hl-1">await</span><span class="hl-2"> </span><span class="hl-6">axios</span><span class="hl-2">.</span><span class="hl-4">post</span><span class="hl-2">(</span><span class="hl-7">&#39;/api/v1/sdk/ticket&#39;</span><span class="hl-2">, {</span><br/><span class="hl-2">        </span><span class="hl-6">playgroundId</span><span class="hl-2">,</span><br/><span class="hl-2">        </span><span class="hl-6">tillTime:</span><span class="hl-2"> </span><span class="hl-8">Date</span><span class="hl-2">.</span><span class="hl-4">now</span><span class="hl-2">() + </span><span class="hl-9">12</span><span class="hl-2">*</span><span class="hl-9">60</span><span class="hl-2">*</span><span class="hl-9">60</span><span class="hl-2">*</span><span class="hl-9">1000</span><span class="hl-2">, </span><span class="hl-0">// 截止时间(时间戳)</span><br/><span class="hl-2">        </span><span class="hl-6">userInfo:</span><span class="hl-2"> {}, </span><span class="hl-0">// 数据格式请参考接口文档</span><br/><span class="hl-2">    })</span><br/><span class="hl-2">    </span><span class="hl-1">return</span><span class="hl-2"> </span><span class="hl-6">res</span><span class="hl-2">.</span><span class="hl-6">data</span><span class="hl-2">.</span><span class="hl-6">ticket</span><br/><span class="hl-2">}</span>
+</code></pre>
-<a href="#monorepo" id="monorepo" style="color: inherit; text-decoration: none;">
-  <h1>Monorepo</h1>
+<a href="#第二步：封装逻辑" id="第二步：封装逻辑" style="color: inherit; text-decoration: none;">
+  <h3>第二步：封装逻辑</h3>
 </a>
-<p>d42pass_frontend 是一个 Monorepo 项目, 由 <a href="https://pnpm.io/zh/workspaces">pnpm workspaces</a>管理. 在packages下的项目都有属于自己的package.json</p>
-<pre><code><span class="hl-1">├── </span><span class="hl-2">packages</span><br/><span class="hl-1">│   ├── </span><span class="hl-2">client</span><span class="hl-1">          </span><span class="hl-0">// SDK</span><br/><span class="hl-1">│   ├── </span><span class="hl-2">demo</span><span class="hl-1">     </span><span class="hl-0">// demo</span><br/><span class="hl-1">│   ├── </span><span class="hl-2">server</span><span class="hl-1">   </span><span class="hl-0">// nodejs 服务端</span><br/><span class="hl-1">├── ...</span><br/><span class="hl-1">│</span>
+<pre><code class="language-ts"><span class="hl-0">// 通过调用 getEnvironmentsApi() 我们获取到了codeZone环境列表, 并渲染到页面上</span><br/><span class="hl-3">const</span><span class="hl-2"> </span><span class="hl-5">environments</span><span class="hl-2"> = </span><span class="hl-1">await</span><span class="hl-2"> </span><span class="hl-4">getEnvironmentsApi</span><span class="hl-2">()</span><br/><span class="hl-0">// 假设用户点击了某一个环境，我们得到了一个具体的 environmentVerId</span><br/><span class="hl-3">const</span><span class="hl-2"> </span><span class="hl-5">environmentVerId</span><span class="hl-2"> = </span><span class="hl-6">environments</span><span class="hl-2">[</span><span class="hl-9">0</span><span class="hl-2">].</span><span class="hl-6">versionList</span><span class="hl-2">[</span><span class="hl-9">0</span><span class="hl-2">].</span><span class="hl-6">id</span><br/><span class="hl-0">// 封装获取ticket(票)逻辑</span><br/><span class="hl-1">export</span><span class="hl-2"> </span><span class="hl-3">async</span><span class="hl-2"> </span><span class="hl-3">function</span><span class="hl-2"> </span><span class="hl-4">handleGetTicket</span><span class="hl-2">(</span><span class="hl-6">environmentVerId</span><span class="hl-2">: </span><span class="hl-8">string</span><span class="hl-2">) {</span><br/><span class="hl-2">    </span><span class="hl-3">const</span><span class="hl-2"> </span><span class="hl-5">codeZoneId</span><span class="hl-2"> = </span><span class="hl-1">await</span><span class="hl-2"> </span><span class="hl-4">getCodeZoneIdApi</span><span class="hl-2">(</span><span class="hl-6">environmentVerId</span><span class="hl-2">)</span><br/><span class="hl-2">    </span><span class="hl-3">const</span><span class="hl-2"> </span><span class="hl-5">playgroundId</span><span class="hl-2"> = </span><span class="hl-1">await</span><span class="hl-2"> </span><span class="hl-4">getPlaygroundIdApi</span><span class="hl-2">(</span><span class="hl-6">codeZoneId</span><span class="hl-2">)</span><br/><span class="hl-2">    </span><span class="hl-3">const</span><span class="hl-2"> </span><span class="hl-5">ticket</span><span class="hl-2"> = </span><span class="hl-1">await</span><span class="hl-2"> </span><span class="hl-4">getTicketApi</span><span class="hl-2">(</span><span class="hl-6">playgroundId</span><span class="hl-2">)</span><br/><span class="hl-2">    </span><span class="hl-1">return</span><span class="hl-2"> </span><span class="hl-6">ticket</span><br/><span class="hl-2">}</span>
 </code></pre>
-<a href="#pnpm-workspaces" id="pnpm-workspaces" style="color: inherit; text-decoration: none;">
-  <h1>Pnpm workspaces</h1>
+<a href="#part-two-在组件中使用" id="part-two-在组件中使用" style="color: inherit; text-decoration: none;">
+  <h2>PART-TWO 在组件中使用</h2>
 </a>
-<p>给项目安装依赖时请统一使用pnpm，初始化安装依赖时，请使用<code>pnpm install</code>安装</p>
-<pre><code><span class="hl-1"># </span><span class="hl-2">给某个工作区安装依赖时</span><span class="hl-1">，</span><span class="hl-2">请切到对应目录使用</span><span class="hl-1"> </span><span class="hl-2">pnpm</span><span class="hl-1"> </span><span class="hl-2">add</span><span class="hl-1"> </span><span class="hl-2">xxx</span><span class="hl-1"> </span><span class="hl-2">进行安装</span><br/><span class="hl-2">cd</span><span class="hl-1"> </span><span class="hl-2">packages</span><span class="hl-1">/</span><span class="hl-2">client</span><br/><span class="hl-2">pnpm</span><span class="hl-1"> </span><span class="hl-2">add</span><span class="hl-1"> </span><span class="hl-2">xxx</span><span class="hl-1"> -</span><span class="hl-3">D</span>
-</code></pre>
-<a href="#状态管理" id="状态管理" style="color: inherit; text-decoration: none;">
-  <h1>状态管理</h1>
+<a href="#第一步：引入sdk和样式" id="第一步：引入sdk和样式" style="color: inherit; text-decoration: none;">
+  <h3>第一步：引入SDK和样式</h3>
 </a>
-<p><a href="https://github.com/udecode/zustood">https://github.com/udecode/zustood</a></p>
-<pre><code><span class="hl-1"># </span><span class="hl-2">获取值</span><br/><span class="hl-2">store</span><span class="hl-1">.</span><span class="hl-2">repo</span><span class="hl-1">.</span><span class="hl-4">name</span><span class="hl-1">()</span><br/><span class="hl-1"># </span><span class="hl-2">监听</span><br/><span class="hl-4">useStore</span><span class="hl-1">().</span><span class="hl-2">repo</span><span class="hl-1">.</span><span class="hl-4">name</span><span class="hl-1">()</span><br/><span class="hl-1"># </span><span class="hl-2">操作</span><br/><span class="hl-2">actions</span><span class="hl-1">.</span><span class="hl-2">repo</span><span class="hl-1">.</span><span class="hl-4">stars</span><span class="hl-1">(</span><span class="hl-2">store</span><span class="hl-1">.</span><span class="hl-2">repo</span><span class="hl-1">.</span><span class="hl-2">stars</span><span class="hl-1"> + </span><span class="hl-5">1</span><span class="hl-1">)</span>
+<pre><code class="language-ts"><span class="hl-1">import</span><span class="hl-2"> { </span><span class="hl-6">DaoPaaS</span><span class="hl-2">, </span><span class="hl-6">Messages</span><span class="hl-2"> } </span><span class="hl-1">from</span><span class="hl-2"> </span><span class="hl-7">&#39;DaoPaaS.cjs&#39;</span><span class="hl-2">;</span><br/><span class="hl-1">import</span><span class="hl-2"> </span><span class="hl-7">&#39;style.css&#39;</span><span class="hl-2"> </span>
 </code></pre>
-<a href="#sdk-发布流程" id="sdk-发布流程" style="color: inherit; text-decoration: none;">
-  <h1>SDK 发布流程</h1>
+<a href="#第二步：初始化实例" id="第二步：初始化实例" style="color: inherit; text-decoration: none;">
+  <h3>第二步：初始化实例</h3>
 </a>
 <ol>
-<li>cd packages/client</li>
-<li>pnpm build</li>
-<li>npm version patch</li>
-<li>npm login</li>
-<li>npm publish --access public</li>
-<li>scp -r dist/sdk <a href="mailto:paas@develop.1024paas.com">paas@develop.1024paas.com</a>:jssdk/</li>
+<li>创建实例</li>
+</ol>
+<pre><code class="language-ts"><span class="hl-3">const</span><span class="hl-2"> </span><span class="hl-5">dao</span><span class="hl-2"> = </span><span class="hl-3">new</span><span class="hl-2"> </span><span class="hl-4">DaoPaaS</span><span class="hl-2">({</span><br/><span class="hl-2">    </span><span class="hl-6">tenantId:</span><span class="hl-2"> </span><span class="hl-7">&#39;租户id&#39;</span><span class="hl-2">,</span><br/><span class="hl-2">    </span><span class="hl-6">ticket:</span><span class="hl-2"> </span><span class="hl-7">&#39;动态获取的ticket&#39;</span><span class="hl-2">, </span><span class="hl-0">// ticket(票)</span><br/><span class="hl-2">    </span><span class="hl-6">userInfo:</span><span class="hl-2"> { </span><span class="hl-6">username:</span><span class="hl-2"> </span><span class="hl-7">&#39;用户名&#39;</span><span class="hl-2">}, </span><span class="hl-0">// 用户信息</span><br/><span class="hl-2">});</span>
+</code></pre>
+<ol start="2">
+<li>监听消息</li>
+</ol>
+<pre><code class="language-ts"><span class="hl-6">dao</span><span class="hl-2">.</span><span class="hl-4">onMessage</span><span class="hl-2">((</span><span class="hl-6">message</span><span class="hl-2">: </span><span class="hl-8">Message</span><span class="hl-2">) </span><span class="hl-3">=&gt;</span><span class="hl-2"> {</span><br/><span class="hl-2">    </span><span class="hl-3">const</span><span class="hl-2"> { </span><span class="hl-5">name</span><span class="hl-2">, </span><span class="hl-5">payload</span><span class="hl-2"> } = </span><span class="hl-6">message</span><span class="hl-2">;</span><br/><span class="hl-2">    </span><span class="hl-3">let</span><span class="hl-2"> </span><span class="hl-6">status</span><span class="hl-2">: </span><span class="hl-8">PlaygroundStatus</span><span class="hl-2">;</span><br/><span class="hl-2">    </span><span class="hl-3">let</span><span class="hl-2"> </span><span class="hl-6">dockerStatus</span><span class="hl-2">: </span><span class="hl-8">DockerStatus</span><span class="hl-2">;</span><br/><span class="hl-2">    </span><span class="hl-3">let</span><span class="hl-2"> </span><span class="hl-6">lspStatus</span><span class="hl-2">: </span><span class="hl-8">LspStatusEnum</span><span class="hl-2">;</span><br/><span class="hl-2">    </span><span class="hl-1">switch</span><span class="hl-2"> (</span><span class="hl-6">name</span><span class="hl-2">) {</span><br/><span class="hl-2">    </span><span class="hl-1">case</span><span class="hl-2"> </span><span class="hl-6">Messages</span><span class="hl-2">.</span><span class="hl-6">Ready</span><span class="hl-2">:</span><br/><span class="hl-2">        </span><span class="hl-6">console</span><span class="hl-2">.</span><span class="hl-4">log</span><span class="hl-2">(</span><span class="hl-7">&#39;appStatus readyBasic&#39;</span><span class="hl-2">) </span><br/><span class="hl-2">        </span><span class="hl-6">console</span><span class="hl-2">.</span><span class="hl-4">log</span><span class="hl-2">(</span><span class="hl-7">&#39;playgroundInfo状态&#39;</span><span class="hl-2">, </span><span class="hl-6">dao</span><span class="hl-2">.</span><span class="hl-6">playgroundInfo</span><span class="hl-2">.</span><span class="hl-6">status</span><span class="hl-2">) </span><br/><span class="hl-2">        </span><span class="hl-6">console</span><span class="hl-2">.</span><span class="hl-4">log</span><span class="hl-2">(</span><span class="hl-7">&#39;语法补全状态&#39;</span><span class="hl-2">, </span><span class="hl-6">dao</span><span class="hl-2">.</span><span class="hl-6">playgroundInfo</span><span class="hl-2">.</span><span class="hl-6">dockerInfo</span><span class="hl-2">.</span><span class="hl-6">lspStatus</span><span class="hl-2">) </span><br/><span class="hl-2">        </span><span class="hl-6">console</span><span class="hl-2">.</span><span class="hl-4">log</span><span class="hl-2">(</span><span class="hl-7">&#39;docker运行状态&#39;</span><span class="hl-2">, </span><span class="hl-6">dao</span><span class="hl-2">.</span><span class="hl-6">playgroundInfo</span><span class="hl-2">.</span><span class="hl-6">dockerInfo</span><span class="hl-2">.</span><span class="hl-6">runStatus</span><span class="hl-2">)</span><br/><span class="hl-2">        </span><span class="hl-1">break</span><span class="hl-2">;</span><br/><span class="hl-2">    </span><span class="hl-1">case</span><span class="hl-2"> </span><span class="hl-6">Messages</span><span class="hl-2">.</span><span class="hl-6">Online</span><span class="hl-2">:</span><br/><span class="hl-2">        </span><span class="hl-6">console</span><span class="hl-2">.</span><span class="hl-4">log</span><span class="hl-2">(</span><span class="hl-7">&#39;网络已恢复&#39;</span><span class="hl-2">);</span><br/><span class="hl-2">        </span><span class="hl-4">setSpinLoading</span><span class="hl-2">(</span><span class="hl-3">false</span><span class="hl-2">);</span><br/><span class="hl-2">        </span><span class="hl-1">break</span><span class="hl-2">;</span><br/><span class="hl-2">    </span><span class="hl-1">case</span><span class="hl-2"> </span><span class="hl-6">Messages</span><span class="hl-2">.</span><span class="hl-6">Offline</span><span class="hl-2">:</span><br/><span class="hl-2">        </span><span class="hl-6">console</span><span class="hl-2">.</span><span class="hl-4">log</span><span class="hl-2">(</span><span class="hl-7">&#39;网络掉线&#39;</span><span class="hl-2">);</span><br/><span class="hl-2">        </span><span class="hl-1">break</span><span class="hl-2">;</span><br/><span class="hl-2">    </span><span class="hl-1">case</span><span class="hl-2"> </span><span class="hl-6">Messages</span><span class="hl-2">.</span><span class="hl-6">StatusChanged</span><span class="hl-2">:</span><br/><span class="hl-2">        </span><span class="hl-6">console</span><span class="hl-2">.</span><span class="hl-4">log</span><span class="hl-2">(</span><span class="hl-7">&#39;playground状态发生变化&#39;</span><span class="hl-2">, </span><span class="hl-6">payload</span><span class="hl-2">.</span><span class="hl-6">status</span><span class="hl-2">);</span><br/><span class="hl-2">        </span><span class="hl-1">break</span><span class="hl-2">;</span><br/><span class="hl-2">    </span><span class="hl-1">case</span><span class="hl-2"> </span><span class="hl-6">Messages</span><span class="hl-2">.</span><span class="hl-6">PlaygroundChanged</span><span class="hl-2">:</span><br/><span class="hl-2">        </span><span class="hl-6">console</span><span class="hl-2">.</span><span class="hl-4">log</span><span class="hl-2">(</span><span class="hl-7">&#39;playground环境变了，比如换题&#39;</span><span class="hl-2">)</span><br/><span class="hl-2">        </span><span class="hl-1">break</span><span class="hl-2">;</span><br/><span class="hl-2">    </span><span class="hl-1">case</span><span class="hl-2"> </span><span class="hl-6">Messages</span><span class="hl-2">.</span><span class="hl-6">LspStatusChanged</span><span class="hl-2">:</span><br/><span class="hl-2">        </span><span class="hl-6">console</span><span class="hl-2">.</span><span class="hl-4">log</span><span class="hl-2">(</span><span class="hl-7">&#39;Lsp状态发生变化&#39;</span><span class="hl-2">, </span><span class="hl-6">payload</span><span class="hl-2">.</span><span class="hl-6">status</span><span class="hl-2">)</span><br/><span class="hl-2">        </span><span class="hl-1">break</span><span class="hl-2">;</span><br/><span class="hl-2">    </span><span class="hl-1">case</span><span class="hl-2"> </span><span class="hl-6">Messages</span><span class="hl-2">.</span><span class="hl-6">RunStatusChanged</span><span class="hl-2">:</span><br/><span class="hl-2">        </span><span class="hl-6">console</span><span class="hl-2">.</span><span class="hl-4">log</span><span class="hl-2">(</span><span class="hl-7">&#39;docker运行状态变化&#39;</span><span class="hl-2">, </span><span class="hl-6">payload</span><span class="hl-2">.</span><span class="hl-6">status</span><span class="hl-2">)</span><br/><span class="hl-2">        </span><span class="hl-1">if</span><span class="hl-2"> (</span><span class="hl-6">dockerStatus</span><span class="hl-2"> != </span><span class="hl-7">&#39;STOP&#39;</span><span class="hl-2">) {</span><br/><span class="hl-2">            </span><span class="hl-1">return</span><span class="hl-2">;</span><br/><span class="hl-2">        } </span><span class="hl-1">else</span><span class="hl-2"> </span><span class="hl-1">if</span><span class="hl-2"> (</span><span class="hl-6">payload</span><span class="hl-2">.</span><span class="hl-6">runResult</span><span class="hl-2"> === </span><span class="hl-9">0</span><span class="hl-2">) {</span><br/><span class="hl-2">            </span><span class="hl-6">console</span><span class="hl-2">.</span><span class="hl-4">log</span><span class="hl-2">(</span><span class="hl-7">`运行结果成功`</span><span class="hl-2">);</span><br/><span class="hl-2">        } </span><span class="hl-1">else</span><span class="hl-2"> {</span><br/><span class="hl-2">            </span><span class="hl-6">console</span><span class="hl-2">.</span><span class="hl-4">log</span><span class="hl-2">(</span><span class="hl-7">`运行结果失败: </span><span class="hl-3">${</span><span class="hl-6">payload</span><span class="hl-10">.</span><span class="hl-6">runResult</span><span class="hl-3">}</span><span class="hl-7">`</span><span class="hl-2">);</span><br/><span class="hl-2">        }</span><br/><span class="hl-2">        </span><span class="hl-1">break</span><span class="hl-2">;</span><br/><span class="hl-2">    }</span><br/><span class="hl-2">});</span>
+</code></pre>
+<ol start="3">
+<li>监听错误消息</li>
 </ol>
-</div></div><div class="col-4 col-menu menu-sticky-wrap menu-highlight"><nav class="tsd-navigation primary"><ul><li class="current"><a href="modules.html">Exports</a></li></ul></nav><nav class="tsd-navigation secondary menu-sticky"><ul><li class="tsd-kind-interface"><a href="interfaces/BrowserProps.html" class="tsd-kind-icon">Browser<wbr/>Props</a></li><li class="tsd-kind-interface tsd-has-type-parameter"><a href="interfaces/Component.html" class="tsd-kind-icon">Component</a></li><li class="tsd-kind-interface"><a href="interfaces/ConsoleOrShellProps.html" class="tsd-kind-icon">Console<wbr/>Or<wbr/>Shell<wbr/>Props</a></li><li class="tsd-kind-interface"><a href="interfaces/DiffPatternInfo.html" class="tsd-kind-icon">Diff<wbr/>Pattern<wbr/>Info</a></li><li class="tsd-kind-interface"><a href="interfaces/EditorProps.html" class="tsd-kind-icon">Editor<wbr/>Props</a></li><li class="tsd-kind-interface"><a href="interfaces/IDaoPaaS.html" class="tsd-kind-icon">IDao<wbr/>PaaS</a></li><li class="tsd-kind-interface"><a href="interfaces/MenuTagProps.html" class="tsd-kind-icon">Menu<wbr/>Tag<wbr/>Props</a></li><li class="tsd-kind-interface"><a href="interfaces/PaaSOptions.html" class="tsd-kind-icon">PaaSOptions</a></li><li class="tsd-kind-interface"><a href="interfaces/TreeProps.html" class="tsd-kind-icon">Tree<wbr/>Props</a></li><li class="tsd-kind-type-alias"><a href="modules.html#ComponentPropsType" class="tsd-kind-icon">Component<wbr/>Props<wbr/>Type</a></li><li class="tsd-kind-type-alias"><a href="modules.html#ComponentType" class="tsd-kind-icon">Component<wbr/>Type</a></li><li class="tsd-kind-type-alias"><a href="modules.html#Components" class="tsd-kind-icon">Components</a></li><li class="tsd-kind-type-alias"><a href="modules.html#DockerStatus" class="tsd-kind-icon">Docker<wbr/>Status</a></li><li class="tsd-kind-type-alias"><a href="modules.html#PlaygroundStatus" class="tsd-kind-icon">Playground<wbr/>Status</a></li></ul></nav></div></div></div><footer class="with-border-bottom"><div class="container"><h2>Legend</h2><div class="tsd-legend-group"><ul class="tsd-legend"><li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li><li class="tsd-kind-method tsd-parent-kind-interface"><span class="tsd-kind-icon">Method</span></li></ul></div><h2>Settings</h2><p>Theme <select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></p></div></footer><div class="container tsd-generator"><p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div><div class="overlay"></div><script src="assets/main.js"></script></body></html>
+<pre><code class="language-ts"><span class="hl-6">dao</span><span class="hl-2">.</span><span class="hl-4">onError</span><span class="hl-2">((</span><span class="hl-6">message</span><span class="hl-2">: </span><span class="hl-8">Message</span><span class="hl-2">) </span><span class="hl-3">=&gt;</span><span class="hl-2"> {</span><br/><span class="hl-2">    </span><span class="hl-3">const</span><span class="hl-2"> { </span><span class="hl-5">name</span><span class="hl-2">, </span><span class="hl-5">error</span><span class="hl-2"> } = </span><span class="hl-6">message</span><span class="hl-2">;</span><br/><span class="hl-2">    </span><span class="hl-1">switch</span><span class="hl-2"> (</span><span class="hl-6">name</span><span class="hl-2">) {</span><br/><span class="hl-2">    </span><span class="hl-1">case</span><span class="hl-2"> </span><span class="hl-6">Messages</span><span class="hl-2">.</span><span class="hl-6">ConnectionBroken</span><span class="hl-2">:</span><br/><span class="hl-2">        </span><span class="hl-6">console</span><span class="hl-2">.</span><span class="hl-4">log</span><span class="hl-2">(</span><span class="hl-7">&#39;与服务器的连接中断，可以尝试连接到另一个服务器&#39;</span><span class="hl-2">)</span><br/><span class="hl-2">        </span><span class="hl-1">break</span><span class="hl-2">;</span><br/><span class="hl-2">    </span><span class="hl-1">case</span><span class="hl-2"> </span><span class="hl-6">Messages</span><span class="hl-2">.</span><span class="hl-6">AuthorizationFailed</span><span class="hl-2">:</span><br/><span class="hl-2">        </span><span class="hl-6">console</span><span class="hl-2">.</span><span class="hl-4">log</span><span class="hl-2">(</span><span class="hl-7">&#39;授权失败，所以您需要再次登录或获得一个新的ticket&#39;</span><span class="hl-2">)</span><br/><span class="hl-2">        </span><span class="hl-1">break</span><span class="hl-2">;</span><br/><span class="hl-2">    </span><span class="hl-1">case</span><span class="hl-2"> </span><span class="hl-7">&#39;errorFromServer&#39;</span><span class="hl-2">:</span><br/><span class="hl-2">        </span><span class="hl-6">console</span><span class="hl-2">.</span><span class="hl-4">log</span><span class="hl-2">(</span><span class="hl-7">&#39;与服务器的连接中断&#39;</span><span class="hl-2">)</span><br/><span class="hl-2">        </span><span class="hl-1">break</span><span class="hl-2">;</span><br/><span class="hl-2">    }</span><br/><span class="hl-2">});</span>
+</code></pre>
+<ol start="4">
+<li>把实例的组件挂载到dom节点</li>
+</ol>
+<pre><code class="language-ts"><span class="hl-0">// container: 项目中真实节点的选择器, item: 要挂载的dao内部组件的名称</span><br/><span class="hl-0">// 这个方法运行后，会把item对应名称的dao内部组件挂载到container配置类名的dom节点上</span><br/><span class="hl-6">dao</span><span class="hl-2">.</span><span class="hl-4">mapRender</span><span class="hl-2">([</span><br/><span class="hl-2">    { </span><span class="hl-6">container:</span><span class="hl-2"> </span><span class="hl-7">&#39;.tree-section&#39;</span><span class="hl-2">, </span><span class="hl-6">item:</span><span class="hl-2"> </span><span class="hl-7">&#39;Tree&#39;</span><span class="hl-2"> },</span><br/><span class="hl-2">    { </span><span class="hl-6">container:</span><span class="hl-2"> </span><span class="hl-7">&#39;.editor-section&#39;</span><span class="hl-2">, </span><span class="hl-6">item:</span><span class="hl-2"> </span><span class="hl-7">&#39;Editor&#39;</span><span class="hl-2"> },</span><br/><span class="hl-2">    { </span><span class="hl-6">container:</span><span class="hl-2"> </span><span class="hl-7">&#39;.browser-section&#39;</span><span class="hl-2">, </span><span class="hl-6">item:</span><span class="hl-2"> </span><span class="hl-7">&#39;Browser&#39;</span><span class="hl-2">},</span><br/><span class="hl-2">    { </span><span class="hl-6">container:</span><span class="hl-2"> </span><span class="hl-7">&#39;.terminal-section&#39;</span><span class="hl-2">, </span><span class="hl-6">item:</span><span class="hl-2"> </span><span class="hl-7">&#39;Shell&#39;</span><span class="hl-2"> },</span><br/><span class="hl-2">    { </span><span class="hl-6">container:</span><span class="hl-2"> </span><span class="hl-7">&#39;.console-section&#39;</span><span class="hl-2">, </span><span class="hl-6">item:</span><span class="hl-2"> </span><span class="hl-7">&#39;Console&#39;</span><span class="hl-2"> },</span><br/><span class="hl-2">]);</span>
+</code></pre>
+<ol start="5">
+<li>创建HTML标签</li>
+</ol>
+<p>运行<code>dao.mapRender([...])</code>方法后，会把dao内部组件渲染到对应的dom节点</p>
+<pre><code class="language-html"><span class="hl-11">&lt;</span><span class="hl-12">div</span><span class="hl-11">&gt;</span><br/><span class="hl-2">    </span><span class="hl-11">&lt;</span><span class="hl-12">div</span><span class="hl-2"> </span><span class="hl-13">className</span><span class="hl-2">=</span><span class="hl-14">&quot;tree-section&quot;</span><span class="hl-11">&gt;&lt;/</span><span class="hl-12">div</span><span class="hl-11">&gt;</span><br/><span class="hl-2">    </span><span class="hl-11">&lt;</span><span class="hl-12">div</span><span class="hl-2"> </span><span class="hl-13">className</span><span class="hl-2">=</span><span class="hl-14">&quot;editor-section&quot;</span><span class="hl-11">&gt;&lt;/</span><span class="hl-12">div</span><span class="hl-11">&gt;</span><br/><span class="hl-2">    </span><span class="hl-11">&lt;</span><span class="hl-12">div</span><span class="hl-2"> </span><span class="hl-13">className</span><span class="hl-2">=</span><span class="hl-14">&quot;browser-section&quot;</span><span class="hl-11">&gt;&lt;/</span><span class="hl-12">div</span><span class="hl-11">&gt;</span><br/><span class="hl-2">    </span><span class="hl-11">&lt;</span><span class="hl-12">div</span><span class="hl-2"> </span><span class="hl-13">className</span><span class="hl-2">=</span><span class="hl-14">&quot;console-section&quot;</span><span class="hl-11">&gt;&lt;/</span><span class="hl-12">div</span><span class="hl-11">&gt;</span><br/><span class="hl-2">    </span><span class="hl-11">&lt;</span><span class="hl-12">div</span><span class="hl-2"> </span><span class="hl-13">className</span><span class="hl-2">=</span><span class="hl-14">&quot;terminal-section&quot;</span><span class="hl-11">&gt;&lt;/</span><span class="hl-12">div</span><span class="hl-11">&gt;</span><br/><span class="hl-11">&lt;/</span><span class="hl-12">div</span><span class="hl-11">&gt;</span>
+</code></pre>
+<a href="#第三步：销毁实例" id="第三步：销毁实例" style="color: inherit; text-decoration: none;">
+  <h3>第三步：销毁实例</h3>
+</a>
+<p>在页面卸载的时候需要销毁dao实例和相关的缓存数据</p>
+<pre><code class="language-ts"><span class="hl-4">useEffect</span><span class="hl-2">(() </span><span class="hl-3">=&gt;</span><span class="hl-2"> {</span><br/><span class="hl-2">    </span><span class="hl-0">// ...</span><br/><span class="hl-2">    </span><span class="hl-1">return</span><span class="hl-2"> () </span><span class="hl-3">=&gt;</span><span class="hl-2"> {</span><br/><span class="hl-2">        </span><span class="hl-6">dao</span><span class="hl-2">.</span><span class="hl-4">dispose</span><span class="hl-2">()</span><br/><span class="hl-2">    }</span><br/><span class="hl-2">}, [])</span>
+</code></pre>
+<a href="#part-three-sdk部分其他方法" id="part-three-sdk部分其他方法" style="color: inherit; text-decoration: none;">
+  <h2>PART-THREE SDK部分其他方法</h2>
+</a>
+<pre><code class="language-ts"><span class="hl-0">// 配置是否在控制台开启DaoPaaS内部打印</span><br/><span class="hl-6">dao</span><span class="hl-2">.</span><span class="hl-4">loggerEnable</span><span class="hl-2">(</span><span class="hl-3">true</span><span class="hl-2">);</span><br/><span class="hl-0">// 修改主题</span><br/><span class="hl-6">dao</span><span class="hl-2">.</span><span class="hl-4">loadTheme</span><span class="hl-2">(</span><span class="hl-7">&#39;dark&#39;</span><span class="hl-2">)</span><br/><span class="hl-0">// 激活容器</span><br/><span class="hl-6">dao</span><span class="hl-2">.</span><span class="hl-4">activePlayground</span><span class="hl-2">()</span><br/><span class="hl-0">// 运行容器</span><br/><span class="hl-6">dao</span><span class="hl-2">.</span><span class="hl-4">runPlayground</span><span class="hl-2">()</span><br/><span class="hl-0">// 停止容器运行</span><br/><span class="hl-6">dao</span><span class="hl-2">.</span><span class="hl-4">stopPlayground</span><span class="hl-2">()</span><br/><span class="hl-0">// ...</span>
+</code></pre>
+<a href="#part-four-基础案例" id="part-four-基础案例" style="color: inherit; text-decoration: none;">
+  <h2>PART-FOUR 基础案例</h2>
+</a>
+<pre><code class="language-tsx"><span class="hl-1">import</span><span class="hl-2"> </span><span class="hl-6">React</span><span class="hl-2">, { </span><span class="hl-6">useEffect</span><span class="hl-2">, </span><span class="hl-6">useState</span><span class="hl-2"> } </span><span class="hl-1">from</span><span class="hl-2"> </span><span class="hl-7">&#39;react&#39;</span><span class="hl-2">;</span><br/><span class="hl-1">import</span><span class="hl-2"> { </span><span class="hl-6">DaoPaaS</span><span class="hl-2">, </span><span class="hl-6">Messages</span><span class="hl-2"> } </span><span class="hl-1">from</span><span class="hl-2"> </span><span class="hl-7">&#39;~/DaoPaaS&#39;</span><span class="hl-2">;</span><br/><br/><span class="hl-3">enum</span><span class="hl-2"> </span><span class="hl-8">LspStatusEnum</span><span class="hl-2"> {</span><br/><span class="hl-2">  </span><span class="hl-5">NOT_SUPPORT</span><span class="hl-2"> = </span><span class="hl-7">&#39;notSupport&#39;</span><span class="hl-2">,</span><br/><span class="hl-2">  </span><span class="hl-5">LOADING</span><span class="hl-2"> = </span><span class="hl-7">&#39;loading&#39;</span><span class="hl-2">,</span><br/><span class="hl-2">  </span><span class="hl-5">RUNNING</span><span class="hl-2"> = </span><span class="hl-7">&#39;running&#39;</span><span class="hl-2">,</span><br/><span class="hl-2">  </span><span class="hl-5">SHUTDOWN</span><span class="hl-2"> = </span><span class="hl-7">&#39;shutdown&#39;</span><span class="hl-2">,</span><br/><span class="hl-2">}</span><br/><br/><span class="hl-1">export</span><span class="hl-2"> </span><span class="hl-1">default</span><span class="hl-2"> </span><span class="hl-3">function</span><span class="hl-2"> </span><span class="hl-4">SimpleExample</span><span class="hl-2">({</span><span class="hl-6">environmentVerId</span><span class="hl-2">}) {</span><br/><span class="hl-2">  </span><span class="hl-3">const</span><span class="hl-2"> [</span><span class="hl-5">daoPaasObj</span><span class="hl-2">, </span><span class="hl-5">setDaoPaasObj</span><span class="hl-2">] = </span><span class="hl-4">useState</span><span class="hl-2">&lt;</span><span class="hl-8">DaoPaaS</span><span class="hl-2"> | </span><span class="hl-8">null</span><span class="hl-2">&gt;(</span><span class="hl-3">null</span><span class="hl-2">);</span><br/><span class="hl-2">  </span><span class="hl-3">const</span><span class="hl-2"> [</span><span class="hl-5">playgroundStatus</span><span class="hl-2">, </span><span class="hl-5">setPlaygroundStatus</span><span class="hl-2">] =</span><br/><span class="hl-2">    </span><span class="hl-4">useState</span><span class="hl-2">&lt;</span><span class="hl-8">PlaygroundStatus</span><span class="hl-2">&gt;(</span><span class="hl-7">&#39;EMPTY&#39;</span><span class="hl-2">);</span><br/><span class="hl-2">  </span><span class="hl-3">const</span><span class="hl-2"> [</span><span class="hl-5">dockerStatus</span><span class="hl-2">, </span><span class="hl-5">setDockerStatus</span><span class="hl-2">] = </span><span class="hl-4">useState</span><span class="hl-2">&lt;</span><span class="hl-8">DockerStatus</span><span class="hl-2">&gt;(</span><span class="hl-7">&#39;STOP&#39;</span><span class="hl-2">);</span><br/><span class="hl-2">  </span><span class="hl-3">const</span><span class="hl-2"> {</span><span class="hl-5">setLspStatus</span><span class="hl-2">, </span><span class="hl-5">LspStatusFC</span><span class="hl-2">} = </span><span class="hl-4">useLspStatus</span><span class="hl-2">();</span><br/><span class="hl-2">  </span><span class="hl-3">const</span><span class="hl-2"> [</span><span class="hl-5">remindVisible</span><span class="hl-2">, </span><span class="hl-5">setRemindVisible</span><span class="hl-2">] = </span><span class="hl-4">useState</span><span class="hl-2">(</span><span class="hl-3">false</span><span class="hl-2">);</span><br/><br/><span class="hl-2">  </span><span class="hl-0">// SDK初始化</span><br/><span class="hl-2">  </span><span class="hl-3">const</span><span class="hl-2"> </span><span class="hl-4">initSDK</span><span class="hl-2"> = </span><span class="hl-3">async</span><span class="hl-2"> () </span><span class="hl-3">=&gt;</span><span class="hl-2"> {</span><br/><span class="hl-2">    </span><span class="hl-6">console</span><span class="hl-2">.</span><span class="hl-4">log</span><span class="hl-2">(</span><span class="hl-7">&#39;开始连接运行环境...&#39;</span><span class="hl-2">)</span><br/><span class="hl-2">    </span><span class="hl-0">// 获取ticket(票)</span><br/><span class="hl-2">    </span><span class="hl-3">const</span><span class="hl-2"> </span><span class="hl-5">ticket</span><span class="hl-2"> = </span><span class="hl-4">handleGetTicket</span><span class="hl-2">(</span><span class="hl-6">environmentVerId</span><span class="hl-2">)</span><br/><span class="hl-2">    </span><span class="hl-0">// 生成实例</span><br/><span class="hl-2">    </span><span class="hl-3">const</span><span class="hl-2"> </span><span class="hl-5">dao</span><span class="hl-2"> = </span><span class="hl-3">new</span><span class="hl-2"> </span><span class="hl-4">DaoPaaS</span><span class="hl-2">({</span><br/><span class="hl-2">      </span><span class="hl-6">paasDomain:</span><span class="hl-2"> </span><span class="hl-7">&#39;www.1024paas.com&#39;</span><span class="hl-2">,</span><br/><span class="hl-2">      </span><span class="hl-6">tenantId:</span><span class="hl-2"> </span><span class="hl-7">&#39;请输入租户id&#39;</span><span class="hl-2">,</span><br/><span class="hl-2">      </span><span class="hl-6">ticket:</span><span class="hl-2"> </span><span class="hl-6">ticket</span><span class="hl-2">,</span><br/><span class="hl-2">      </span><span class="hl-6">userInfo:</span><span class="hl-2"> { </span><span class="hl-6">username:</span><span class="hl-2"> </span><span class="hl-7">&quot;***&quot;</span><span class="hl-2"> },</span><br/><span class="hl-2">    });</span><br/><span class="hl-2">    </span><span class="hl-0">// 保存实例</span><br/><span class="hl-2">    </span><span class="hl-4">setDaoPaasObj</span><span class="hl-2">(</span><span class="hl-6">dao</span><span class="hl-2">);</span><br/><span class="hl-2">    </span><span class="hl-0">// 监听消息</span><br/><span class="hl-2">    </span><span class="hl-6">dao</span><span class="hl-2">.</span><span class="hl-4">onMessage</span><span class="hl-2">((</span><span class="hl-6">message</span><span class="hl-2">: </span><span class="hl-8">Message</span><span class="hl-2">) </span><span class="hl-3">=&gt;</span><span class="hl-2"> {</span><br/><span class="hl-2">      </span><span class="hl-3">const</span><span class="hl-2"> { </span><span class="hl-5">name</span><span class="hl-2">, </span><span class="hl-5">payload</span><span class="hl-2"> } = </span><span class="hl-6">message</span><span class="hl-2">;</span><br/><span class="hl-2">      </span><span class="hl-3">let</span><span class="hl-2"> </span><span class="hl-6">status</span><span class="hl-2">: </span><span class="hl-8">PlaygroundStatus</span><span class="hl-2">;</span><br/><span class="hl-2">      </span><span class="hl-3">let</span><span class="hl-2"> </span><span class="hl-6">dockerStatus</span><span class="hl-2">: </span><span class="hl-8">DockerStatus</span><span class="hl-2">;</span><br/><span class="hl-2">      </span><span class="hl-3">let</span><span class="hl-2"> </span><span class="hl-6">lspStatus</span><span class="hl-2">: </span><span class="hl-8">LspStatusEnum</span><span class="hl-2">;</span><br/><span class="hl-2">      </span><span class="hl-1">switch</span><span class="hl-2"> (</span><span class="hl-6">name</span><span class="hl-2">) {</span><br/><span class="hl-2">        </span><span class="hl-1">case</span><span class="hl-2"> </span><span class="hl-6">Messages</span><span class="hl-2">.</span><span class="hl-6">Ready</span><span class="hl-2">:</span><br/><span class="hl-2">          </span><span class="hl-6">console</span><span class="hl-2">.</span><span class="hl-4">log</span><span class="hl-2">(</span><span class="hl-7">&#39;连接运行环境已经停止&#39;</span><span class="hl-2">)</span><br/><span class="hl-2">          </span><span class="hl-4">setRemindVisible</span><span class="hl-2">(</span><span class="hl-6">dao</span><span class="hl-2">.</span><span class="hl-6">playgroundInfo</span><span class="hl-2">.</span><span class="hl-6">status</span><span class="hl-2"> === </span><span class="hl-7">&#39;INACTIVE&#39;</span><span class="hl-2">);</span><br/><span class="hl-2">          </span><span class="hl-4">setPlaygroundStatus</span><span class="hl-2">(</span><span class="hl-6">dao</span><span class="hl-2">.</span><span class="hl-6">playgroundInfo</span><span class="hl-2">.</span><span class="hl-6">status</span><span class="hl-2">);</span><br/><span class="hl-2">          </span><span class="hl-4">setLspStatus</span><span class="hl-2">(</span><br/><span class="hl-2">            </span><span class="hl-6">dao</span><span class="hl-2">.</span><span class="hl-6">playgroundInfo</span><span class="hl-2">.</span><span class="hl-6">dockerInfo</span><span class="hl-2">.</span><span class="hl-6">lspStatus</span><span class="hl-2"> </span><span class="hl-1">as</span><span class="hl-2"> </span><span class="hl-8">LspStatusEnum</span><span class="hl-2">,</span><br/><span class="hl-2">          );</span><br/><span class="hl-2">          </span><span class="hl-4">setDockerStatus</span><span class="hl-2">(</span><br/><span class="hl-2">            </span><span class="hl-6">dao</span><span class="hl-2">.</span><span class="hl-6">playgroundInfo</span><span class="hl-2">.</span><span class="hl-6">dockerInfo</span><span class="hl-2">.</span><span class="hl-6">runStatus</span><span class="hl-2"> </span><span class="hl-1">as</span><span class="hl-2"> </span><span class="hl-8">DockerStatus</span><span class="hl-2">,</span><br/><span class="hl-2">          );</span><br/><span class="hl-2">          </span><span class="hl-1">break</span><span class="hl-2">;</span><br/><span class="hl-2">        </span><span class="hl-1">case</span><span class="hl-2"> </span><span class="hl-6">Messages</span><span class="hl-2">.</span><span class="hl-6">Online</span><span class="hl-2">:</span><br/><span class="hl-2">          </span><span class="hl-6">console</span><span class="hl-2">.</span><span class="hl-4">log</span><span class="hl-2">(</span><span class="hl-7">&#39;网络已恢复&#39;</span><span class="hl-2">);</span><br/><span class="hl-2">          </span><span class="hl-6">console</span><span class="hl-2">.</span><span class="hl-4">log</span><span class="hl-2">(</span><span class="hl-7">&#39;连接运行环境已经停止&#39;</span><span class="hl-2">)</span><br/><span class="hl-2">          </span><span class="hl-1">break</span><span class="hl-2">;</span><br/><span class="hl-2">        </span><span class="hl-1">case</span><span class="hl-2"> </span><span class="hl-6">Messages</span><span class="hl-2">.</span><span class="hl-6">Offline</span><span class="hl-2">:</span><br/><span class="hl-2">          </span><span class="hl-6">console</span><span class="hl-2">.</span><span class="hl-4">log</span><span class="hl-2">(</span><span class="hl-7">&#39;网络掉线&#39;</span><span class="hl-2">);</span><br/><span class="hl-2">          </span><span class="hl-1">break</span><span class="hl-2">;</span><br/><span class="hl-2">        </span><span class="hl-1">case</span><span class="hl-2"> </span><span class="hl-6">Messages</span><span class="hl-2">.</span><span class="hl-6">StatusChanged</span><span class="hl-2">:</span><br/><span class="hl-2">          </span><span class="hl-6">status</span><span class="hl-2"> = </span><span class="hl-6">payload</span><span class="hl-2">.</span><span class="hl-6">status</span><span class="hl-2">;</span><br/><span class="hl-2">          </span><span class="hl-4">setRemindVisible</span><span class="hl-2">(</span><span class="hl-6">status</span><span class="hl-2"> === </span><span class="hl-7">&#39;INACTIVE&#39;</span><span class="hl-2">);</span><br/><span class="hl-2">          </span><span class="hl-4">setPlaygroundStatus</span><span class="hl-2">(</span><span class="hl-6">payload</span><span class="hl-2">.</span><span class="hl-6">status</span><span class="hl-2">);</span><br/><span class="hl-2">          </span><span class="hl-1">break</span><span class="hl-2">;</span><br/><span class="hl-2">        </span><span class="hl-1">case</span><span class="hl-2"> </span><span class="hl-6">Messages</span><span class="hl-2">.</span><span class="hl-6">PlaygroundChanged</span><span class="hl-2">:</span><br/><span class="hl-2">          </span><span class="hl-4">setRemindVisible</span><span class="hl-2">(</span><span class="hl-3">false</span><span class="hl-2">);</span><br/><span class="hl-2">          </span><span class="hl-1">break</span><span class="hl-2">;</span><br/><span class="hl-2">        </span><span class="hl-1">case</span><span class="hl-2"> </span><span class="hl-6">Messages</span><span class="hl-2">.</span><span class="hl-6">LspStatusChanged</span><span class="hl-2">:</span><br/><span class="hl-2">          </span><span class="hl-6">lspStatus</span><span class="hl-2"> = </span><span class="hl-6">payload</span><span class="hl-2">.</span><span class="hl-6">status</span><span class="hl-2">;</span><br/><span class="hl-2">          </span><span class="hl-4">setLspStatus</span><span class="hl-2">(</span><span class="hl-6">lspStatus</span><span class="hl-2">);</span><br/><span class="hl-2">          </span><span class="hl-1">break</span><span class="hl-2">;</span><br/><span class="hl-2">        </span><span class="hl-1">case</span><span class="hl-2"> </span><span class="hl-6">Messages</span><span class="hl-2">.</span><span class="hl-6">RunStatusChanged</span><span class="hl-2">:</span><br/><span class="hl-2">          </span><span class="hl-6">dockerStatus</span><span class="hl-2"> = </span><span class="hl-6">payload</span><span class="hl-2">.</span><span class="hl-6">status</span><span class="hl-2">;</span><br/><span class="hl-2">          </span><span class="hl-4">setDockerStatus</span><span class="hl-2">(</span><span class="hl-6">dockerStatus</span><span class="hl-2">);</span><br/><span class="hl-2">          </span><span class="hl-1">if</span><span class="hl-2"> (</span><span class="hl-6">dockerStatus</span><span class="hl-2"> != </span><span class="hl-7">&#39;STOP&#39;</span><span class="hl-2">) {</span><br/><span class="hl-2">            </span><span class="hl-1">return</span><span class="hl-2">;</span><br/><span class="hl-2">          }</span><br/><span class="hl-2">          </span><span class="hl-1">if</span><span class="hl-2"> (</span><span class="hl-6">payload</span><span class="hl-2">.</span><span class="hl-6">runResult</span><span class="hl-2"> === </span><span class="hl-9">0</span><span class="hl-2">) {</span><br/><span class="hl-2">            </span><span class="hl-6">console</span><span class="hl-2">.</span><span class="hl-4">log</span><span class="hl-2">(</span><span class="hl-7">`运行结果成功`</span><span class="hl-2">);</span><br/><span class="hl-2">          } </span><span class="hl-1">else</span><span class="hl-2"> {</span><br/><span class="hl-2">            </span><span class="hl-6">console</span><span class="hl-2">.</span><span class="hl-4">warn</span><span class="hl-2">(</span><span class="hl-7">`运行结果失败: </span><span class="hl-3">${</span><span class="hl-6">payload</span><span class="hl-10">.</span><span class="hl-6">runResult</span><span class="hl-3">}</span><span class="hl-7">`</span><span class="hl-2">);</span><br/><span class="hl-2">          }</span><br/><span class="hl-2">          </span><span class="hl-1">break</span><span class="hl-2">;</span><br/><span class="hl-2">      }</span><br/><span class="hl-2">    });</span><br/><span class="hl-2">    </span><span class="hl-0">// 监听报错消息</span><br/><span class="hl-2">    </span><span class="hl-6">dao</span><span class="hl-2">.</span><span class="hl-4">onError</span><span class="hl-2">((</span><span class="hl-6">message</span><span class="hl-2">: </span><span class="hl-8">Message</span><span class="hl-2">) </span><span class="hl-3">=&gt;</span><span class="hl-2"> {</span><br/><span class="hl-2">      </span><span class="hl-3">const</span><span class="hl-2"> { </span><span class="hl-5">name</span><span class="hl-2">, </span><span class="hl-5">error</span><span class="hl-2"> } = </span><span class="hl-6">message</span><span class="hl-2">;</span><br/><span class="hl-2">      </span><span class="hl-1">switch</span><span class="hl-2"> (</span><span class="hl-6">name</span><span class="hl-2">) {</span><br/><span class="hl-2">        </span><span class="hl-1">case</span><span class="hl-2"> </span><span class="hl-6">Messages</span><span class="hl-2">.</span><span class="hl-6">ConnectionBroken</span><span class="hl-2">:</span><br/><span class="hl-2">          </span><span class="hl-6">console</span><span class="hl-2">.</span><span class="hl-4">error</span><span class="hl-2">(</span><span class="hl-6">error</span><span class="hl-2">, </span><span class="hl-9">0</span><span class="hl-2">);</span><br/><span class="hl-2">          </span><span class="hl-1">break</span><span class="hl-2">;</span><br/><span class="hl-2">        </span><span class="hl-1">case</span><span class="hl-2"> </span><span class="hl-6">Messages</span><span class="hl-2">.</span><span class="hl-6">AuthorizationFailed</span><span class="hl-2">:</span><br/><span class="hl-2">          </span><span class="hl-6">console</span><span class="hl-2">.</span><span class="hl-4">error</span><span class="hl-2">(</span><span class="hl-6">error</span><span class="hl-2">, </span><span class="hl-9">0</span><span class="hl-2">);</span><br/><span class="hl-2">          </span><span class="hl-1">break</span><span class="hl-2">;</span><br/><span class="hl-2">        </span><span class="hl-1">case</span><span class="hl-2"> </span><span class="hl-7">&#39;errorFromServer&#39;</span><span class="hl-2">:</span><br/><span class="hl-2">          </span><span class="hl-6">console</span><span class="hl-2">.</span><span class="hl-4">log</span><span class="hl-2">(</span><span class="hl-7">&#39;连接运行环境已经停止&#39;</span><span class="hl-2">)</span><br/><span class="hl-2">          </span><span class="hl-6">console</span><span class="hl-2">.</span><span class="hl-4">error</span><span class="hl-2">(</span><span class="hl-6">error</span><span class="hl-2">, </span><span class="hl-9">0</span><span class="hl-2">);</span><br/><span class="hl-2">          </span><span class="hl-1">break</span><span class="hl-2">;</span><br/><span class="hl-2">      }</span><br/><span class="hl-2">    });</span><br/><span class="hl-2">    </span><span class="hl-0">// 挂载实例组件</span><br/><span class="hl-2">    </span><span class="hl-6">dao</span><span class="hl-2">.</span><span class="hl-4">mapRender</span><span class="hl-2">([</span><br/><span class="hl-2">      { </span><span class="hl-6">container:</span><span class="hl-2"> </span><span class="hl-7">&#39;.tree-section&#39;</span><span class="hl-2">, </span><span class="hl-6">item:</span><span class="hl-2"> </span><span class="hl-7">&#39;Tree&#39;</span><span class="hl-2">},</span><br/><span class="hl-2">      { </span><span class="hl-6">container:</span><span class="hl-2"> </span><span class="hl-7">&#39;.editor-section&#39;</span><span class="hl-2">, </span><span class="hl-6">item:</span><span class="hl-2"> </span><span class="hl-7">&#39;Editor&#39;</span><span class="hl-2">},</span><br/><span class="hl-2">      { </span><span class="hl-6">container:</span><span class="hl-2"> </span><span class="hl-7">&#39;.browser-section&#39;</span><span class="hl-2">, </span><span class="hl-6">item:</span><span class="hl-2"> </span><span class="hl-7">&#39;Browser&#39;</span><span class="hl-2">},</span><br/><span class="hl-2">      { </span><span class="hl-6">container:</span><span class="hl-2"> </span><span class="hl-7">&#39;.terminal-section&#39;</span><span class="hl-2">, </span><span class="hl-6">item:</span><span class="hl-2"> </span><span class="hl-7">&#39;Shell&#39;</span><span class="hl-2">},</span><br/><span class="hl-2">      { </span><span class="hl-6">container:</span><span class="hl-2"> </span><span class="hl-7">&#39;.console-section&#39;</span><span class="hl-2">, </span><span class="hl-6">item:</span><span class="hl-2"> </span><span class="hl-7">&#39;Console&#39;</span><span class="hl-2">},</span><br/><span class="hl-2">    ]);</span><br/><span class="hl-2">  };</span><br/><span class="hl-2">  </span><span class="hl-0">// 语法补全连接状态</span><br/><span class="hl-2">  </span><span class="hl-3">function</span><span class="hl-2"> </span><span class="hl-4">useLspStatus</span><span class="hl-2">() {</span><br/><span class="hl-2">    </span><span class="hl-3">const</span><span class="hl-2"> [</span><span class="hl-5">lspStatus</span><span class="hl-2">, </span><span class="hl-5">setLspStatus</span><span class="hl-2">] = </span><span class="hl-4">useState</span><span class="hl-2">&lt;</span><span class="hl-8">LspStatusEnum</span><span class="hl-2">&gt;(</span><br/><span class="hl-2">      </span><span class="hl-6">LspStatusEnum</span><span class="hl-2">.</span><span class="hl-5">LOADING</span><span class="hl-2">,</span><br/><span class="hl-2">    );</span><br/><span class="hl-2">    </span><span class="hl-3">function</span><span class="hl-2"> </span><span class="hl-4">LspStatusFC</span><span class="hl-2">() {</span><br/><span class="hl-2">      </span><span class="hl-3">const</span><span class="hl-2"> </span><span class="hl-5">textMap</span><span class="hl-2"> = {</span><br/><span class="hl-2">        </span><span class="hl-6">[LspStatusEnum.</span><span class="hl-5">NOT_SUPPORT</span><span class="hl-6">]:</span><span class="hl-2"> </span><span class="hl-7">&#39;不支持&#39;</span><span class="hl-2">,</span><br/><span class="hl-2">        </span><span class="hl-6">[LspStatusEnum.</span><span class="hl-5">LOADING</span><span class="hl-6">]:</span><span class="hl-2"> </span><span class="hl-7">&#39;连接中&#39;</span><span class="hl-2">,</span><br/><span class="hl-2">        </span><span class="hl-6">[LspStatusEnum.</span><span class="hl-5">RUNNING</span><span class="hl-6">]:</span><span class="hl-2"> </span><span class="hl-7">&#39;运行中&#39;</span><span class="hl-2">,</span><br/><span class="hl-2">        </span><span class="hl-6">[LspStatusEnum.</span><span class="hl-5">SHUTDOWN</span><span class="hl-6">]:</span><span class="hl-2"> </span><span class="hl-7">&#39;已关闭&#39;</span><span class="hl-2">,</span><br/><span class="hl-2">      };</span><br/><span class="hl-2">      </span><span class="hl-1">return</span><span class="hl-2"> (</span><br/><span class="hl-2">        </span><span class="hl-11">&lt;</span><span class="hl-12">div</span><span class="hl-11">&gt;</span><span class="hl-2"> 代码补全·(</span><span class="hl-3">{</span><span class="hl-6">textMap</span><span class="hl-10">[</span><span class="hl-6">lspStatus</span><span class="hl-10">]</span><span class="hl-3">}</span><span class="hl-2">)</span><span class="hl-11">&lt;/</span><span class="hl-12">div</span><span class="hl-11">&gt;</span><br/><span class="hl-2">      );</span><br/><span class="hl-2">    }</span><br/><span class="hl-2">    </span><span class="hl-1">return</span><span class="hl-2"> {</span><br/><span class="hl-2">      </span><span class="hl-6">setLspStatus</span><span class="hl-2">,</span><br/><span class="hl-2">      </span><span class="hl-6">LspStatusFC</span><span class="hl-2">,</span><br/><span class="hl-2">    };</span><br/><span class="hl-2">  }</span><br/><span class="hl-2">  </span><span class="hl-4">useEffect</span><span class="hl-2">(() </span><span class="hl-3">=&gt;</span><span class="hl-2"> {</span><br/><span class="hl-2">    </span><span class="hl-4">initSDK</span><span class="hl-2">();</span><br/><span class="hl-2">    </span><span class="hl-1">return</span><span class="hl-2"> () </span><span class="hl-3">=&gt;</span><span class="hl-2"> {</span><br/><span class="hl-2">      </span><span class="hl-0">// 在页面卸载的时候需要销毁实例和相关的缓存数据</span><br/><span class="hl-2">      </span><span class="hl-6">daoPaasObj</span><span class="hl-2"> &amp;&amp; </span><span class="hl-6">daoPaasObj</span><span class="hl-2">.</span><span class="hl-4">dispose</span><span class="hl-2">();</span><br/><span class="hl-2">      </span><span class="hl-4">setDaoPaasObj</span><span class="hl-2">(</span><span class="hl-3">null</span><span class="hl-2">);</span><br/><span class="hl-2">    };</span><br/><span class="hl-2">  }, []);</span><br/><span class="hl-2">  </span><span class="hl-1">return</span><span class="hl-2"> (</span><br/><span class="hl-2">    </span><span class="hl-11">&lt;&gt;</span><br/><span class="hl-2">      </span><span class="hl-3">{</span><span class="hl-6">remindVisible</span><span class="hl-10"> </span><span class="hl-2">&amp;&amp;</span><span class="hl-10"> </span><span class="hl-11">&lt;</span><span class="hl-12">button</span><br/><span class="hl-10">        </span><span class="hl-13">onClick</span><span class="hl-2">=</span><span class="hl-3">{</span><span class="hl-10">() </span><span class="hl-3">=&gt;</span><span class="hl-10"> {</span><br/><span class="hl-10">          </span><span class="hl-6">daoPaasObj</span><span class="hl-10">?.</span><span class="hl-4">activePlayground</span><span class="hl-10">();</span><br/><span class="hl-10">          </span><span class="hl-4">setRemindVisible</span><span class="hl-10">(</span><span class="hl-3">false</span><span class="hl-10">);</span><br/><span class="hl-10">        }</span><span class="hl-3">}</span><br/><span class="hl-10">      </span><span class="hl-11">&gt;</span><br/><span class="hl-10">        容器状态为失活，点击确认激活容器</span><br/><span class="hl-10">      </span><span class="hl-11">&lt;/</span><span class="hl-12">button</span><span class="hl-11">&gt;</span><span class="hl-3">}</span><br/><span class="hl-2">      </span><span class="hl-11">&lt;</span><span class="hl-12">div</span><span class="hl-11">&gt;</span><br/><span class="hl-2">        </span><span class="hl-11">&lt;</span><span class="hl-8">LspStatusFC</span><span class="hl-2"> </span><span class="hl-11">/&gt;</span><br/><span class="hl-2">        </span><span class="hl-11">&lt;</span><span class="hl-12">div</span><span class="hl-11">&gt;</span><br/><span class="hl-2">          </span><span class="hl-3">{</span><span class="hl-6">playgroundStatus</span><span class="hl-10"> </span><span class="hl-2">!==</span><span class="hl-10"> </span><span class="hl-7">&#39;ACTIVE&#39;</span><span class="hl-10"> </span><span class="hl-2">?</span><span class="hl-10"> (</span><br/><span class="hl-10">            </span><span class="hl-11">&lt;</span><span class="hl-12">button</span><span class="hl-10"> </span><span class="hl-13">onClick</span><span class="hl-2">=</span><span class="hl-3">{</span><span class="hl-10">() </span><span class="hl-3">=&gt;</span><span class="hl-10">  </span><span class="hl-6">daoPaasObj</span><span class="hl-10">?.</span><span class="hl-4">activePlayground</span><span class="hl-10">() </span><span class="hl-3">}</span><span class="hl-11">&gt;</span><span class="hl-10">激活</span><span class="hl-11">&lt;/</span><span class="hl-12">button</span><span class="hl-11">&gt;</span><br/><span class="hl-10">          ) </span><span class="hl-2">:</span><span class="hl-10"> (</span><br/><span class="hl-10">            </span><span class="hl-11">&lt;</span><span class="hl-12">div</span><span class="hl-11">&gt;</span><span class="hl-10">已激活</span><span class="hl-11">&lt;/</span><span class="hl-12">div</span><span class="hl-11">&gt;</span><br/><span class="hl-10">          )</span><span class="hl-3">}</span><br/><span class="hl-2">          </span><span class="hl-3">{</span><span class="hl-6">dockerStatus</span><span class="hl-10"> </span><span class="hl-2">!==</span><span class="hl-10"> </span><span class="hl-7">&#39;RUNNING&#39;</span><span class="hl-10"> </span><span class="hl-2">?</span><span class="hl-10"> (</span><br/><span class="hl-10">            </span><span class="hl-11">&lt;</span><span class="hl-12">button</span><br/><span class="hl-10">              </span><span class="hl-13">disabled</span><span class="hl-2">=</span><span class="hl-3">{</span><span class="hl-6">playgroundStatus</span><span class="hl-10"> </span><span class="hl-2">!==</span><span class="hl-10"> </span><span class="hl-7">&#39;ACTIVE&#39;</span><span class="hl-3">}</span><br/><span class="hl-10">              </span><span class="hl-13">onClick</span><span class="hl-2">=</span><span class="hl-3">{</span><span class="hl-10">() </span><span class="hl-3">=&gt;</span><span class="hl-10"> {</span><br/><span class="hl-10">                </span><span class="hl-6">daoPaasObj</span><span class="hl-10">?.</span><span class="hl-4">runPlayground</span><span class="hl-10">();</span><br/><span class="hl-10">              }</span><span class="hl-3">}</span><br/><span class="hl-10">            </span><span class="hl-11">&gt;</span><br/><span class="hl-10">              运行</span><br/><span class="hl-10">            </span><span class="hl-11">&lt;/</span><span class="hl-12">button</span><span class="hl-11">&gt;</span><br/><span class="hl-10">          ) </span><span class="hl-2">:</span><span class="hl-10"> (</span><br/><span class="hl-10">            </span><span class="hl-11">&lt;</span><span class="hl-12">button</span><br/><span class="hl-10">              </span><span class="hl-13">disabled</span><span class="hl-2">=</span><span class="hl-3">{</span><span class="hl-6">playgroundStatus</span><span class="hl-10"> </span><span class="hl-2">!==</span><span class="hl-10"> </span><span class="hl-7">&#39;ACTIVE&#39;</span><span class="hl-3">}</span><br/><span class="hl-10">              </span><span class="hl-13">onClick</span><span class="hl-2">=</span><span class="hl-3">{</span><span class="hl-10">() </span><span class="hl-3">=&gt;</span><span class="hl-10"> </span><span class="hl-6">daoPaasObj</span><span class="hl-10">?.</span><span class="hl-4">stopPlayground</span><span class="hl-10">()</span><span class="hl-3">}</span><br/><span class="hl-10">            </span><span class="hl-11">&gt;</span><br/><span class="hl-10">              停止</span><br/><span class="hl-10">            </span><span class="hl-11">&lt;/</span><span class="hl-12">button</span><span class="hl-11">&gt;</span><br/><span class="hl-10">          )</span><span class="hl-3">}</span><br/><span class="hl-2">        </span><span class="hl-11">&lt;/</span><span class="hl-12">div</span><span class="hl-11">&gt;</span><br/><span class="hl-2">      </span><span class="hl-11">&lt;/</span><span class="hl-12">div</span><span class="hl-11">&gt;</span><br/><span class="hl-2">      </span><span class="hl-11">&lt;</span><span class="hl-12">div</span><span class="hl-11">&gt;</span><br/><span class="hl-2">        </span><span class="hl-11">&lt;</span><span class="hl-12">div</span><span class="hl-2"> </span><span class="hl-13">className</span><span class="hl-2">=</span><span class="hl-7">&quot;tree-section&quot;</span><span class="hl-11">&gt;&lt;/</span><span class="hl-12">div</span><span class="hl-11">&gt;</span><br/><span class="hl-2">        </span><span class="hl-11">&lt;</span><span class="hl-12">div</span><span class="hl-2"> </span><span class="hl-13">className</span><span class="hl-2">=</span><span class="hl-7">&quot;editor-section&quot;</span><span class="hl-11">&gt;&lt;/</span><span class="hl-12">div</span><span class="hl-11">&gt;</span><br/><span class="hl-2">        </span><span class="hl-11">&lt;</span><span class="hl-12">div</span><span class="hl-2"> </span><span class="hl-13">className</span><span class="hl-2">=</span><span class="hl-7">&quot;browser-section&quot;</span><span class="hl-11">&gt;&lt;/</span><span class="hl-12">div</span><span class="hl-11">&gt;</span><br/><span class="hl-2">        </span><span class="hl-11">&lt;</span><span class="hl-12">div</span><span class="hl-2"> </span><span class="hl-13">className</span><span class="hl-2">=</span><span class="hl-7">&quot;console-section&quot;</span><span class="hl-11">&gt;&lt;/</span><span class="hl-12">div</span><span class="hl-11">&gt;</span><br/><span class="hl-2">        </span><span class="hl-11">&lt;</span><span class="hl-12">div</span><span class="hl-2"> </span><span class="hl-13">className</span><span class="hl-2">=</span><span class="hl-7">&quot;terminal-section&quot;</span><span class="hl-11">&gt;&lt;/</span><span class="hl-12">div</span><span class="hl-11">&gt;</span><br/><span class="hl-2">      </span><span class="hl-11">&lt;/</span><span class="hl-12">div</span><span class="hl-11">&gt;</span><br/><span class="hl-2">    </span><span class="hl-11">&lt;/&gt;</span><br/><span class="hl-2">  );</span><br/><span class="hl-2">}</span>
+</code></pre>
+</div></div><div class="col-4 col-menu menu-sticky-wrap menu-highlight"><nav class="tsd-navigation primary"><ul><li class="current"><a href="modules.html">Exports</a></li></ul></nav><nav class="tsd-navigation secondary menu-sticky"><ul><li class="tsd-kind-enum"><a href="enums/Messages.html" class="tsd-kind-icon">Messages</a></li><li class="tsd-kind-enum"><a href="enums/ThemeType.html" class="tsd-kind-icon">Theme<wbr/>Type</a></li><li class="tsd-kind-interface"><a href="interfaces/Component.html" class="tsd-kind-icon">Component</a></li><li class="tsd-kind-interface"><a href="interfaces/IDaoPaaS.html" class="tsd-kind-icon">IDao<wbr/>PaaS</a></li><li class="tsd-kind-interface"><a href="interfaces/PaaSOptions.html" class="tsd-kind-icon">PaaSOptions</a></li><li class="tsd-kind-type-alias"><a href="modules.html#ComponentType" class="tsd-kind-icon">Component<wbr/>Type</a></li><li class="tsd-kind-type-alias"><a href="modules.html#DockerStatus" class="tsd-kind-icon">Docker<wbr/>Status</a></li><li class="tsd-kind-type-alias"><a href="modules.html#Message" class="tsd-kind-icon">Message</a></li><li class="tsd-kind-type-alias"><a href="modules.html#PlaygroundStatus" class="tsd-kind-icon">Playground<wbr/>Status</a></li></ul></nav></div></div></div><footer class="with-border-bottom"><div class="container"><h2>Legend</h2><div class="tsd-legend-group"><ul class="tsd-legend"><li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li><li class="tsd-kind-method tsd-parent-kind-interface"><span class="tsd-kind-icon">Method</span></li></ul></div><h2>Settings</h2><p>Theme <select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></p></div></footer><div class="container tsd-generator"><p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div><div class="overlay"></div><script src="assets/main.js"></script></body></html>

package/dist/sdk/docs/interfaces/Component.html CHANGED Viewed

@@ -1,8 +1,7 @@
-<!DOCTYPE html><html class="default"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>Component | DaoPaaS API Options</title><meta name="description" content="Documentation for DaoPaaS API Options"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.body.classList.add(localStorage.getItem("tsd-theme") || "os")</script><header><div class="tsd-page-toolbar"><div class="container"><div class="table-wrap"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget search no-caption">Search</label><input type="text" id="tsd-search-field"/></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">DaoPaaS API Options</a></div><div class="table-cell" id="tsd-widgets"><div id="tsd-filter"><a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a><div class="tsd-filter-group"><div class="tsd-select" id="tsd-filter-visibility"><span class="tsd-select-label">All</span><ul class="tsd-select-list"><li data-value="public">Public</li><li data-value="protected">Public/Protected</li><li data-value="private" class="selected">All</li></ul></div> <input type="checkbox" id="tsd-filter-inherited" checked/><label class="tsd-widget" for="tsd-filter-inherited">Inherited</label><input type="checkbox" id="tsd-filter-externals" checked/><label class="tsd-widget" for="tsd-filter-externals">Externals</label></div></div><a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a></div></div></div></div><div class="tsd-page-title"><div class="container"><ul class="tsd-breadcrumb"><li><a href="../modules.html">DaoPaaS API Options</a></li><li><a href="Component.html">Component</a></li></ul><h1>Interface Component&lt;T&gt; </h1></div></div></header><div class="container container-main"><div class="row"><div class="col-8 col-content"><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography"><dl class="tsd-comment-tags"><dt>interface</dt><dd><p>Component</p>
-</dd><dt>desc</dt><dd><p>The props of the component.</p>
-</dd></dl></div></section><section class="tsd-panel tsd-type-parameters"><h3>Type Parameters</h3><ul class="tsd-type-parameters"><li><h4>T</h4></li></ul></section><section class="tsd-panel tsd-hierarchy"><h3>Hierarchy</h3><ul class="tsd-hierarchy"><li><span class="target">Component</span></li></ul></section><section class="tsd-panel-group tsd-index-group"><h2>Index</h2><section class="tsd-panel tsd-index-panel"><div class="tsd-index-content"><section class="tsd-index-section "><h3>Properties</h3><ul class="tsd-index-list"><li class="tsd-kind-property tsd-parent-kind-interface"><a href="Component.html#container" class="tsd-kind-icon">container</a></li><li class="tsd-kind-property tsd-parent-kind-interface"><a href="Component.html#item" class="tsd-kind-icon">item</a></li><li class="tsd-kind-property tsd-parent-kind-interface"><a href="Component.html#props" class="tsd-kind-icon">props</a></li></ul></section></div></section></section><section class="tsd-panel-group tsd-member-group "><h2>Properties</h2><section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="container" class="tsd-anchor"></a><h3 class="tsd-anchor-link">container<a href="#container" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><div class="tsd-signature tsd-kind-icon">container<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">HTMLElement</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">Element</span></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/dao42/d42paas_frontend/blob/434ae77d/packages/client/src/types/DaoPaaS.d.ts#L269">DaoPaaS.d.ts:269</a></li></ul></aside><div class="tsd-comment tsd-typography"><div class="lead">
-<p>The DOM for the component.</p>
-</div></div></section><section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="item" class="tsd-anchor"></a><h3 class="tsd-anchor-link">item<a href="#item" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><div class="tsd-signature tsd-kind-icon">item<span class="tsd-signature-symbol">:</span> <a href="../modules.html#ComponentType" class="tsd-signature-type" data-tsd-kind="Type alias">ComponentType</a></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/dao42/d42paas_frontend/blob/434ae77d/packages/client/src/types/DaoPaaS.d.ts#L271">DaoPaaS.d.ts:271</a></li></ul></aside></section><section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="props" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagOptional">Optional</span> props<a href="#props" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><div class="tsd-signature tsd-kind-icon">props<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">any</span></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/dao42/d42paas_frontend/blob/434ae77d/packages/client/src/types/DaoPaaS.d.ts#L276">DaoPaaS.d.ts:276</a></li></ul></aside><div class="tsd-comment tsd-typography"><div class="lead">
-<p>The component props
-todo: fix the type of any</p>
-</div></div></section></section></div><div class="col-4 col-menu menu-sticky-wrap menu-highlight"><nav class="tsd-navigation primary"><ul><li class=""><a href="../modules.html">Exports</a></li></ul></nav><nav class="tsd-navigation secondary menu-sticky"><ul><li class="current tsd-kind-interface tsd-has-type-parameter"><a href="Component.html" class="tsd-kind-icon">Component</a><ul><li class="tsd-kind-property tsd-parent-kind-interface"><a href="Component.html#container" class="tsd-kind-icon">container</a></li><li class="tsd-kind-property tsd-parent-kind-interface"><a href="Component.html#item" class="tsd-kind-icon">item</a></li><li class="tsd-kind-property tsd-parent-kind-interface"><a href="Component.html#props" class="tsd-kind-icon">props</a></li></ul></li></ul></nav></div></div></div><footer class="with-border-bottom"><div class="container"><h2>Legend</h2><div class="tsd-legend-group"><ul class="tsd-legend"><li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li><li class="tsd-kind-method tsd-parent-kind-interface"><span class="tsd-kind-icon">Method</span></li></ul></div><h2>Settings</h2><p>Theme <select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></p></div></footer><div class="container tsd-generator"><p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div><div class="overlay"></div><script src="../assets/main.js"></script></body></html>
+<!DOCTYPE html><html class="default"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>Component | DaoPaaS API Options</title><meta name="description" content="Documentation for DaoPaaS API Options"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.body.classList.add(localStorage.getItem("tsd-theme") || "os")</script><header><div class="tsd-page-toolbar"><div class="container"><div class="table-wrap"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget search no-caption">Search</label><input type="text" id="tsd-search-field"/></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">DaoPaaS API Options</a></div><div class="table-cell" id="tsd-widgets"><div id="tsd-filter"><a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a><div class="tsd-filter-group"><div class="tsd-select" id="tsd-filter-visibility"><span class="tsd-select-label">All</span><ul class="tsd-select-list"><li data-value="public">Public</li><li data-value="protected">Public/Protected</li><li data-value="private" class="selected">All</li></ul></div> <input type="checkbox" id="tsd-filter-inherited" checked/><label class="tsd-widget" for="tsd-filter-inherited">Inherited</label><input type="checkbox" id="tsd-filter-externals" checked/><label class="tsd-widget" for="tsd-filter-externals">Externals</label></div></div><a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a></div></div></div></div><div class="tsd-page-title"><div class="container"><ul class="tsd-breadcrumb"><li><a href="../modules.html">DaoPaaS API Options</a></li><li><a href="Component.html">Component</a></li></ul><h1>Interface Component </h1></div></div></header><div class="container container-main"><div class="row"><div class="col-8 col-content"><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography"><div class="lead">
+<p>用于挂载组件的的配置接口</p>
+</div></div></section><section class="tsd-panel tsd-hierarchy"><h3>Hierarchy</h3><ul class="tsd-hierarchy"><li><span class="target">Component</span></li></ul></section><section class="tsd-panel-group tsd-index-group"><h2>Index</h2><section class="tsd-panel tsd-index-panel"><div class="tsd-index-content"><section class="tsd-index-section "><h3>Properties</h3><ul class="tsd-index-list"><li class="tsd-kind-property tsd-parent-kind-interface"><a href="Component.html#container" class="tsd-kind-icon">container</a></li><li class="tsd-kind-property tsd-parent-kind-interface"><a href="Component.html#item" class="tsd-kind-icon">item</a></li></ul></section></div></section></section><section class="tsd-panel-group tsd-member-group "><h2>Properties</h2><section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="container" class="tsd-anchor"></a><h3 class="tsd-anchor-link">container<a href="#container" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><div class="tsd-signature tsd-kind-icon">container<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">HTMLElement</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">Element</span></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/dao42/d42paas_frontend/blob/48937575/packages/client/src/types/DaoPaaS.d.ts#L27">types/DaoPaaS.d.ts:27</a></li></ul></aside><div class="tsd-comment tsd-typography"><div class="lead">
+<p>SDK内部组件挂载的dom元素选择器，如“.dom-classname”,&quot;#dom-id&quot;,&quot;div span&quot;</p>
+</div></div></section><section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="item" class="tsd-anchor"></a><h3 class="tsd-anchor-link">item<a href="#item" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><div class="tsd-signature tsd-kind-icon">item<span class="tsd-signature-symbol">:</span> <a href="../modules.html#ComponentType" class="tsd-signature-type" data-tsd-kind="Type alias">ComponentType</a></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/dao42/d42paas_frontend/blob/48937575/packages/client/src/types/DaoPaaS.d.ts#L29">types/DaoPaaS.d.ts:29</a></li></ul></aside><div class="tsd-comment tsd-typography"><div class="lead">
+<p>SDK内部组件名</p>
+</div></div></section></section></div><div class="col-4 col-menu menu-sticky-wrap menu-highlight"><nav class="tsd-navigation primary"><ul><li class=""><a href="../modules.html">Exports</a></li></ul></nav><nav class="tsd-navigation secondary menu-sticky"><ul><li class="current tsd-kind-interface"><a href="Component.html" class="tsd-kind-icon">Component</a><ul><li class="tsd-kind-property tsd-parent-kind-interface"><a href="Component.html#container" class="tsd-kind-icon">container</a></li><li class="tsd-kind-property tsd-parent-kind-interface"><a href="Component.html#item" class="tsd-kind-icon">item</a></li></ul></li></ul></nav></div></div></div><footer class="with-border-bottom"><div class="container"><h2>Legend</h2><div class="tsd-legend-group"><ul class="tsd-legend"><li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li><li class="tsd-kind-method tsd-parent-kind-interface"><span class="tsd-kind-icon">Method</span></li></ul></div><h2>Settings</h2><p>Theme <select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></p></div></footer><div class="container tsd-generator"><p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div><div class="overlay"></div><script src="../assets/main.js"></script></body></html>