🔱: [client] sync upgrade with 6 commits [trident-sync]

refactor: deploy
refactor: deploy
refactor: 1.10.0
refactor: 1
perf: 增加s3示例

packages/ui/certd-client/src/App.vue

@@ -1,8 +1,6 @@
 <template>
   <a-config-provider :locale="locale">
-    <fs-form-provider>
-      <router-view v-if="routerEnabled" />
-    </fs-form-provider>
+    <router-view v-if="routerEnabled" />
   </a-config-provider>
 </template>
 

packages/ui/certd-client/src/plugin/fast-crud/index.tsx

@@ -7,7 +7,8 @@ import "@fast-crud/fast-extends/dist/style.css";
 import UiAntdv from "@fast-crud/ui-antdv";
 import _ from "lodash-es";
 import { useCrudPermission } from "../permission";
-import { TransformResProps } from "@fast-crud/fast-crud/src";
+import { TransformResProps } from "@fast-crud/fast-crud";
+import { GetSignedUrl } from "/@/views/crud/component/uploader/s3/api";
 
 function install(app: any, options: any = {}) {
   app.use(UiAntdv);
@@ -170,20 +171,24 @@ function install(app: any, options: any = {}) {
       domain: "http://d2p.file.handsfree.work/"
     },
     s3: {
+      //同时也支持minio
       bucket: "fast-crud",
       sdkOpts: {
         s3ForcePathStyle: true,
         signatureVersion: "v4",
         region: "us-east-1",
         forcePathStyle: true,
+        //minio与s3完全适配
         endpoint: "https://play.min.io",
         credentials: {
+          //不建议在客户端使用secretAccessKey来上传
           accessKeyId: "Q3AM3UQ867SPQQA43P2F", //访问登录名
           secretAccessKey: "zuf+tfteSlswRu7BJ86wekitnifILbZam1KYY3TG" //访问密码
         }
       },
-      custom: {
-        // buildKey，获取授权等接口中将会传入
+      //预签名配置，向后端获取上传的预签名连接
+      async getSignedUrl(bucket: string, key: string, options: any) {
+        return await GetSignedUrl(bucket, key, "put");
       },
       successHandle(ret: any) {
         // 上传完成后可以在此处处理结果，修改url什么的

packages/ui/certd-client/src/views/crud/component/uploader/form/crud.jsx

@@ -95,6 +95,14 @@ export default function ({ expose }) {
         pictureCard2: {
           title: "通过urls显示",
           type: "image-uploader",
+          form: {
+            show: false,
+            component: {
+              uploader: {
+                type: "form"
+              }
+            }
+          },
           column: {
             component: {
               urls: [

packages/ui/certd-client/src/views/crud/component/uploader/s3/api.ts

@@ -1,5 +1,6 @@
 import { requestForMock } from "/src/api/service";
-import { generateUrls } from "/@/views/crud/component/uploader/s3/s3-server";
+import { generateSignedUrl } from "/@/views/crud/component/uploader/s3/s3-server";
+import { SignedUrlType } from "@fast-crud/fast-extends";
 const request = requestForMock;
 const apiPrefix = "/mock/S3Uploader";
 export function GetList(query: any) {
@@ -46,8 +47,10 @@ export function GetObj(id: any) {
  * 向后端请求获取预签名url
  * @param bucket
  * @param key
+ * @param type
  * @constructor
  */
-export async function GetSignedUrl(bucket: string, key: string) {
-  return await generateUrls(bucket, key);
+export async function GetSignedUrl(bucket: string, key: string, type: SignedUrlType) {
+  //此处模拟获取预签名url
+  return await generateSignedUrl(bucket, key, type);
 }

packages/ui/certd-client/src/views/crud/component/uploader/s3/crud.tsx

@@ -1,6 +1,7 @@
 import * as api from "./api";
-import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
 import { GetSignedUrl } from "./api";
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+
 export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
@@ -39,17 +40,27 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
         file: {
           title: "S3上传",
           type: "file-uploader",
+          // 将被分发到 form.component 和 column.component之下
+          async buildUrl(key: string) {
+            //向后端获取下载的预签名链接
+            return await GetSignedUrl("fast-crud", key, "get");
+          },
           form: {
             component: {
               uploader: {
                 type: "s3"
-              }
+              },
+              valueType: "key" //返回值为key
             }
           }
         },
         pictureCard: {
           title: "照片墙",
           type: "image-uploader",
+          async buildUrl(key: string) {
+            //向后端获取下载的预签名链接
+            return await GetSignedUrl("fast-crud", key, "get");
+          },
           form: {
             component: {
               uploader: {
@@ -57,26 +68,21 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
               },
               valueType: "key"
             }
-          },
-          column: {
-            component: {
-              async buildUrl(key: string) {
-                const url = await GetSignedUrl("fast-crud", key);
-                debugger;
-                console.log("url", url);
-                return url;
-              }
-            }
           }
         },
         cropper: {
           title: "裁剪",
           type: "cropper-uploader",
+          async buildUrl(key: string) {
+            //向后端获取下载的预签名链接
+            return await GetSignedUrl("fast-crud", key, "get");
+          },
           form: {
             component: {
               uploader: {
                 type: "s3"
-              }
+              },
+              valueType: "key"
             }
           }
         }

packages/ui/certd-client/src/views/crud/component/uploader/s3/index.vue

@@ -6,7 +6,7 @@
         <span class="sub">支持minio</span>
       </div>
       <div class="more">
-        <a target="_blank" href="http://fast-crud.docmirror.cn/api/crud-options/toolbar.html#columnsfilter-mode">文档</a>
+        <a target="_blank" href="http://fast-crud.docmirror.cn/guide/extends/uploader.html">文档</a>
       </div>
     </template>
     <fs-crud ref="crudRef" v-bind="crudBinding" />

packages/ui/certd-client/src/views/crud/component/uploader/s3/s3-server.ts

@@ -1,7 +1,8 @@
-import { S3Client, GetObjectCommand } from "@aws-sdk/client-s3";
+// @ts-ignore
+import { S3Client, GetObjectCommand, PutObjectCommand } from "@aws-sdk/client-s3";
 import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
 
-export async function generateUrls(bucket: string, key: string) {
+export async function generateSignedUrl(bucket: string, key: string, type: "put" | "get" = "get") {
   const client = new S3Client({
     s3ForcePathStyle: true,
     signatureVersion: "v4",
@@ -13,14 +14,19 @@ export async function generateUrls(bucket: string, key: string) {
       secretAccessKey: "zuf+tfteSlswRu7BJ86wekitnifILbZam1KYY3TG" //访问密码
     }
   });
-  const getParams = {
+  const params = {
     Bucket: bucket,
     Key: key
   };
   let url;
-  const getCmd = new GetObjectCommand(getParams);
+  let cmd;
+  if (type === "get") {
+    cmd = new GetObjectCommand(params);
+  } else {
+    cmd = new PutObjectCommand(params);
+  }
   try {
-    url = await getSignedUrl(client, getCmd);
+    url = await getSignedUrl(client, cmd);
   } catch (err) {
     console.log("Error getting signed URL ", err);
   }

packages/ui/certd-client/src/views/crud/feature/index/crud.jsx

@@ -38,7 +38,7 @@ export default function ({ expose }) {
               //计算序号,你可以自定义计算规则，此处为翻页累加
               let index = context.index ?? 1;
               let pagination = expose.crudBinding.value.pagination;
-              return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1;
+              return ((pagination.current ?? 1) - 1) * pagination.pageSize + index + 1;
             }
           }
         },

packages/ui/certd-client/src/views/crud/form/custom-form/crud.tsx

@@ -1,7 +1,7 @@
 import * as api from "./api.js";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, CrudExpose, CrudOptions, DelReq, dict, EditReq, useColumns, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
 import { message } from "ant-design-vue";
-import { useFormWrapper } from "@fast-crud/fast-crud/src";
+import { useFormWrapper } from "@fast-crud/fast-crud";
 
 function useCustomFormWrapperDemo(crudExpose: CrudExpose) {
   let index = 0;
@@ -33,6 +33,9 @@ function useCustomFormWrapperDemo(crudExpose: CrudExpose) {
               openCustomForm();
             }
           }
+        },
+        onOpened() {
+          console.log("fsFormWrapper", crudExpose.getFormWrapperRef());
         }
       },
       group: {

packages/ui/certd-client/src/views/crud/form/independent/index.vue

@@ -49,7 +49,7 @@ import { defineComponent, ref } from "vue";
 import { message } from "ant-design-vue";
 import { useCrud, useExpose, useColumns, useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
-import { useFormWrapper } from "@fast-crud/fast-crud/src";
+import { useFormWrapper } from "@fast-crud/fast-crud";
 
 function createFormOptionsFromCrudOptions() {
   const { buildFormOptions } = useColumns();