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

refactor: deploy refactor: deploy refactor: 1.10.0 refactor: 1 perf: 增加s3示例
2026-05-17 05:37:30 +08:00 · 2023-03-11 19:23:57 +00:00
parent 336faa46b2
commit a634c8f2d1
12 changed files with 87 additions and 35 deletions
@@ -95,6 +95,14 @@ export default function ({ expose }) {
        pictureCard2: {
          title: "通过urls显示",
          type: "image-uploader",
+          form: {
+            show: false,
+            component: {
+              uploader: {
+                type: "form"
+              }
+            }
+          },
          column: {
            component: {
              urls: [
@@ -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);
 }
@@ -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"
            }
          }
        }
@@ -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" />
@@ -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);
  }
@@ -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;
            }
          }
        },
@@ -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: {
@@ -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();