github
/
certd
mirror of https://github.com/certd/certd
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

refactor: deploy
refactor: deploy
refactor: 1.10.0
refactor: 1
perf: 增加s3示例
pull/14/head
GitHub Actions Bot 2023-03-11 19:23:57 +00:00
parent 336faa46b2
commit a634c8f2d1
12 changed files with 87 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/ui/certd-client/CHANGELOG.md
View File

@ -3,6 +3,29 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [1.10.0](https://github.com/fast-crud/fast-crud/compare/v1.9.2...v1.10.0) (2023-03-11)
### Bug Fixes
* 行编辑支持多级表头 ([a547c99](https://github.com/fast-crud/fast-crud/commit/a547c99250f2d00b9d91c326364ccb81415c2772))
### Features
* fs-form-wrapper支持多实例 ([023cc1d](https://github.com/fast-crud/fast-crud/commit/023cc1d425d5b1fa618a3d13fe5c88c81671524d))
### Performance Improvements
* 完善文档，完善部分types ([8fff02d](https://github.com/fast-crud/fast-crud/commit/8fff02d758530bbb1212d7475dc94bc8b562ef97))
* 优化d.ts类型 ([7a51aac](https://github.com/fast-crud/fast-crud/commit/7a51aace532ed6692f28a53332a2103a74f5827a))
* 增加s3示例 ([9060b03](https://github.com/fast-crud/fast-crud/commit/9060b036ce9e36ef8f2ddc50b1362682c7d3aa7f))
## [1.9.2](https://github.com/fast-crud/fast-crud/compare/v1.9.1...v1.9.2) (2023-03-01)
**Note:** Version bump only for package @fast-crud/fs-admin-antdv

8
packages/ui/certd-client/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@fast-crud/fs-admin-antdv",
"version": "1.9.2",
"version": "1.10.0",
"private": true,
"scripts": {
"dev": "vite",
@ -23,9 +23,9 @@
"@ant-design/colors": "^7.0.0",
"@ant-design/icons-vue": "^6.1.0",
"@aws-sdk/s3-request-presigner": "^3.288.0",
"@fast-crud/fast-crud": "workspace:^1.9.2",
"@fast-crud/fast-extends": "workspace:^1.9.2",
"@fast-crud/ui-antdv": "workspace:^1.9.2",
"@fast-crud/fast-crud": "^1.10.0",
"@fast-crud/fast-extends": "^1.10.0",
"@fast-crud/ui-antdv": "^1.10.0",
"@iconify/iconify": "^3.1.0",
"@iconify/json": "^2.2.32",
"@purge-icons/generated": "^0.9.0",

4
packages/ui/certd-client/src/App.vue
View File

@ -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>

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

@ -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什么的

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

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

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

@ -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);
}

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

@ -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"
}
}
}

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

@ -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" />

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

@ -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);
}

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

@ -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;
}
}
},

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

@ -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: {

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

@ -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();