doc: update image and add cli-mind websocket laf client sdk (#1004)

Author: zuoFeng59556

.lycheeignore

@@ -2,4 +2,4 @@
 .*xx.*
 https://beian.miit.gov.cn/
 .*127-0-0-1.*
-https://oss.laf.dev
+https://oss.laf.run

docs/.vitepress/config.js

@@ -13,7 +13,7 @@ const NavConfig = [
   {
     text: "在线体验",
     // target: "_self",
-    link: "https://laf.dev/",
+    link: "https://laf.run/",
   },
 ];
 
@@ -120,7 +120,10 @@ const guideSiderbarConfig = [
     text: "laf-cli 命令行工具",
     items: [{ text: "laf-cli 使用说明", link: "/guide/cli/" }],
   },
-
+  {
+    text: "laf-client-sdk",
+    items: [{ text: "laf-client-sdk 使用说明", link: "/guide/client-sdk/" }],
+  },
 ];
 
 /**

docs/doc-images/add-env.png

@@ -30,9 +30,9 @@ cli 的主要功能就是把在 laf web 上的操作集成到命令行里，下
 ```
 laf login [pat]
 ```
-默认登录 `laf.dev`，如果要登录私有部署的 laf 可通过 `-r` 参数指定：
+默认登录 `laf.run`，如果要登录私有部署的 laf 可通过 `-r` 参数指定：
 
-`laf login [pat] -r https://api.laf.dev`
+`laf login [pat] -r https://api.laf.run`
 ::: tip
 这里要注意，https 后面需要加上 api
 :::

docs/doc-images/add-packages.png

@@ -0,0 +1,86 @@
+---
+title: laf-client-sdk
+---
+
+# {{ $frontmatter.title }}
+
+## 介绍
+laf 为前端提供了 `laf-client-sdk` 适用于任何 js 运行环境。
+
+## 安装
+
+```bash
+ npm install laf-client-sdk
+```
+
+## 使用示例 
+```js
+import { Cloud } from "laf-client-sdk";
+
+const cloud = new Cloud({
+  // 这里 APPID 需要换成对应的 APPID
+  baseUrl: "https://APPID.laf.run",
+  // 这里是访问策略的入口地址，如果没有访问策略可不填
+  dbProxyUrl: "/proxy/app",
+  // 请求时带的token，可空
+  getAccessToken: () => localStorage.getItem("access_token"),
+});
+```
+
+微信小程序中使用
+```js
+import { Cloud } from "laf-client-sdk";
+
+const cloud = new Cloud({
+  baseUrl: "https://APPID.laf.run",
+  dbProxyUrl: "/proxy/app",
+  getAccessToken: () => localStorage.getItem("access_token"),
+  environment: "wxmp",
+});
+```
+
+UNI-APP 中使用
+```js
+import { Cloud } from "laf-client-sdk";
+
+const cloud = new Cloud({
+  baseUrl: "https://APPID.laf.run",
+  dbProxyUrl: "/proxy/app",
+  getAccessToken: () => localStorage.getItem("access_token"),
+  environment: "uniapp",
+});
+```
+                                        
+## 调用云函数
+
+```ts
+import { Cloud } from "laf-client-sdk";
+
+const cloud = new Cloud({
+  baseUrl: "https://APPID.laf.run",
+  dbProxyUrl: "/proxy/app",
+  getAccessToken: () => localStorage.getItem("access_token"),
+});
+
+// 调用 getCode 云函数，并且传入参数
+const res = await cloud.invoke("getCode", { phone: phone.value });
+```
+
+## 操作数据库
+
+```ts
+import { Cloud } from "laf-client-sdk";
+
+const cloud = new Cloud({
+  baseUrl: "https://APPID.laf.run",
+  dbProxyUrl: "/proxy/app",
+  getAccessToken: () => localStorage.getItem("access_token"),
+});
+// 获取用户表中的数据。
+const res = await db.collection('user').get()
+```
+
+:::tip
+通过 client SDK 我们可以像在云函数中一样操作数据库，更多操作情参考 云数据库 章节。  
+还有就是需要配合相对应的访问策略。
+:::

docs/doc-images/create-injector.png

@@ -56,7 +56,7 @@ npm i laf-client-sdk
 import { Cloud } from "laf-client-sdk";
 
 const cloud = new Cloud({
-  baseUrl: "https:/<APP_ID>.laf.dev",   // <APP_ID> 在首页应用列表获取
+  baseUrl: "https:/<APP_ID>.laf.run",   // <APP_ID> 在首页应用列表获取
   getAccessToken: () => "",    // 这里不需要授权，先填空
   dbProxyUrl: "/proxy/app", // 这里就填写我们刚刚强调的“入口地址”
 })

docs/doc-images/edit-cloudfunction.png

@@ -21,7 +21,7 @@ npm i laf-client-sdk
 import { Cloud } from "laf-client-sdk";
 
 const cloud = new Cloud({
-  baseUrl: "https:/<APP_ID>.laf.dev",   // <APP_ID> 在首页应用列表获取
+  baseUrl: "https:/<APP_ID>.laf.run",   // <APP_ID> 在首页应用列表获取
   getAccessToken: () => "",    // 这里不需要授权，先填空
 })
 ```

docs/doc-images/package-list.png

@@ -7,26 +7,18 @@ title: 在云函数中使用环境变量
 
 ## 添加环境变量
 
-1. 首先点击页面左下角的小齿轮按钮，打开应用设置页面
+1. 首先点击页面左下角的小齿轮按钮，打开应用设置页面。
+2. 其次在弹出的应用设置界面，点击 新增环境变量按钮，输入环境变量的 `key` 和 `value`, 并点击确定。
+3. 确认更新环境变量。  
 
-![](/doc-images/add-env-step1.png)
+![](/doc-images/add-env.png)
 
 
-2. 其次在弹出的应用设置界面，点击 新增环境变量按钮，输入环境变量的 `key` 和 `value`, 并点击确定
-
-![](/doc-images/add-env-step2.png)
-
-3. 确认更新环境变量
-
 ::: warning
 请注意，更新环境变量需要重启当前应用以生效。
 重启期间应用将无法正常提供服务，因此在重启之前，请确保应用已暂停业务请求。
 :::
 
-这里我们添加一个 `name` 为 `MY_ENV_KEY`, `value` 为 `MY_ENV_VALUE` 的环境变量，并等待应用重启完成。
-
-![](/doc-images/add-env-step3.png)
-
 
 ## 使用环境变量
 
@@ -39,7 +31,7 @@ export async function main(ctx: FunctionContext) {
 
     const env = cloud.env
     console.log(env)
-    // 可以看到，我们刚才添加的 MY_ENV_NAME: MY_ENV_VALUE 已经生效了
+    // 所有的环境变量都在 cloud.env 里面
 }
 
 ```