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

chore: 1.16.11
chore: 1.16.10
chore:
chore:
chore:
build: publish success
perf: 组件独立使用示例

https://github.com/fast-crud/fast-crud/issues/226
perf: 导出增加 onlyShow 和 columnFilter配置

https://github.com/fast-crud/fast-crud/issues/229
Merge remote-tracking branch 'origin/main'
perf: 表单labelWidth演示

https://github.com/fast-crud/fast-crud/issues/230
perf: 翻页后自动滚动到顶部

https://github.com/fast-crud/fast-crud/issues/232

packages/ui/certd-client/.eslintrc.js

@@ -19,6 +19,7 @@ module.exports = {
   extends: ["plugin:vue/vue3-recommended", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended", "prettier"],
   rules: {
     //"max-len": [0, 200, 2, { ignoreUrls: true }],
+    "@typescript-eslint/no-unused-vars": "off",
     "@typescript-eslint/ban-ts-ignore": "off",
     "@typescript-eslint/explicit-function-return-type": "off",
     "@typescript-eslint/no-explicit-any": "off",

packages/ui/certd-client/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.16.11](https://github.com/fast-crud/fast-crud/compare/v1.16.10...v1.16.11) (2023-09-03)
+
+**Note:** Version bump only for package @fast-crud/fs-admin-antdv
+
+## [1.16.10](https://github.com/fast-crud/fast-crud/compare/v1.16.9...v1.16.10) (2023-09-03)
+
+**Note:** Version bump only for package @fast-crud/fs-admin-antdv
+
+## [1.16.9](https://github.com/fast-crud/fast-crud/compare/v1.16.8...v1.16.9) (2023-09-03)
+
+**Note:** Version bump only for package @fast-crud/fs-admin-antdv
+
+## [1.16.8](https://github.com/fast-crud/fast-crud/compare/v1.16.7...v1.16.8) (2023-09-03)
+
+### Performance Improvements
+
+* 翻页后自动滚动到顶部 ([a6e5f67](https://github.com/fast-crud/fast-crud/commit/a6e5f6740a59780995283c7d787864fdd65f0d4b))
+
 ## [1.16.7](https://github.com/fast-crud/fast-crud/compare/v1.16.6...v1.16.7) (2023-08-21)
 
 **Note:** Version bump only for package @fast-crud/fs-admin-antdv

packages/ui/certd-client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fast-crud/fs-admin-antdv",
-  "version": "1.16.7",
+  "version": "1.16.11",
   "private": true,
   "scripts": {
     "dev": "vite",
@@ -26,10 +26,10 @@
     "@ant-design/icons-vue": "^6.1.0",
     "@aws-sdk/client-s3": "^3.383.0",
     "@aws-sdk/s3-request-presigner": "^3.383.0",
-    "@fast-crud/fast-crud": "^1.16.7",
+    "@fast-crud/fast-crud": "^1.16.11",
-    "@fast-crud/fast-extends": "^1.16.7",
+    "@fast-crud/fast-extends": "^1.16.11",
-    "@fast-crud/ui-antdv": "^1.16.7",
+    "@fast-crud/ui-antdv": "^1.16.11",
-    "@fast-crud/ui-interface": "^1.16.7",
+    "@fast-crud/ui-interface": "^1.16.11",
     "@iconify/iconify": "^3.1.1",
     "@iconify/json": "^2.2.98",
     "@purge-icons/generated": "^0.9.0",

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

@@ -1,7 +1,7 @@
 import { request, requestForMock } from "/src/api/service";
 import { ColumnCompositionProps, CrudOptions, FastCrud, PageQuery, PageRes, setLogger, TransformResProps, useColumns, UseCrudProps, UserPageQuery, useTypes, useUi } from "@fast-crud/fast-crud";
 import "@fast-crud/fast-crud/dist/style.css";
-import { FsExtendsCopyable, FsExtendsEditor, FsExtendsJson, FsExtendsTime, FsExtendsUploader } from "@fast-crud/fast-extends";
+import { FsExtendsCopyable, FsExtendsEditor, FsExtendsJson, FsExtendsTime, FsExtendsUploader, FsUploaderS3SignedUrlType } from "@fast-crud/fast-extends";
 import "@fast-crud/fast-extends/dist/style.css";
 import UiAntdv from "@fast-crud/ui-antdv";
 import _ from "lodash-es";
@@ -209,8 +209,8 @@ function install(app: any, options: any = {}) {
         }
       },
       //预签名配置，向后端获取上传的预签名连接
-      async getSignedUrl(bucket: string, key: string, options: any) {
+      async getSignedUrl(bucket: string, key: string, options: any, type: FsUploaderS3SignedUrlType) {
-        return await GetSignedUrl(bucket, key, "put");
+        return await GetSignedUrl(bucket, key, type);
       },
       successHandle(ret: any) {
         // 上传完成后可以在此处处理结果，修改url什么的

packages/ui/certd-client/src/router/source/modules/crud.ts

@@ -293,6 +293,12 @@ export const crudResources = [
             name: "ComponentJson",
             path: "/crud/component/json",
             component: "/crud/component/json/index.vue"
+          },
+          {
+            title: "组件独立使用",
+            name: "ComponentIndependent",
+            path: "/crud/component/independent",
+            component: "/crud/component/independent/index.vue"
           }
         ]
       },

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

@@ -0,0 +1,109 @@
+<template>
+  <fs-page>
+    <template #header>
+      <div class="title">独立使用组件</div>
+      <div class="more"></div>
+    </template>
+    <div style="padding: 20px; width: 50%">
+      <a-form ref="formRef" :model="form" :label-col="{ style: { width: '150px' } }">
+        <a-form-item label="上传">
+          <fs-file-uploader v-model="form.upload" :uploader="uploader" />
+        </a-form-item>
+        <a-form-item label="裁剪">
+          <fs-cropper-uploader v-model="form.avatar" v-bind="cropperUploader" />
+        </a-form-item>
+        <a-form-item label="可复制">
+          <fs-copyable v-model="form.copyable" />
+        </a-form-item>
+        <a-form-item label="人性化时间">
+          <fs-time-humanize v-model="form.humanizeTime" />
+          = {{ form.humanizeTime.format("YYYY-MM-DD HH:mm:ss") }}
+        </a-form-item>
+        <a-form-item label="dict-select">
+          <fs-dict-select v-model="form.select" :dict="dictRef" />
+        </a-form-item>
+        <a-form-item label="使用上传方法">
+          <input type="file" @change="fileUploaderChange" />
+          <a v-if="signedUrl" :href="signedUrl" target="_blank">下载</a>
+        </a-form-item>
+        <a-form-item>
+          <a-button @click="submit">提交</a-button>
+        </a-form-item>
+      </a-form>
+    </div>
+  </fs-page>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from "vue";
+import { message } from "ant-design-vue";
+import { dict, useUi } from "@fast-crud/fast-crud";
+import dayjs from "dayjs";
+import { FsUploaderS3, loadUploader, useUploader } from "@fast-crud/fast-extends";
+
+defineOptions({
+  name: "ComponentIndependent"
+});
+const form = reactive({
+  upload: [],
+  avatar: undefined,
+  copyable: "可复制的内容",
+  select: 1,
+  humanizeTime: dayjs(new Date().getTime() - 100000)
+});
+
+const uploader = ref({
+  type: "cos",
+  keepName: true
+});
+
+const cropperUploader = ref({
+  uploader: {
+    type: "cos",
+    keepName: true
+  },
+  cropper: {
+    viewMode: 1
+  },
+  async onReady(context: any) {
+    console.log("onReady", context);
+    context.zoom(-0.1);
+    context.zoom(-0.1);
+    context.zoom(-0.1);
+  }
+});
+
+const dictRef = dict({
+  data: [
+    { label: "选项1", value: 1 },
+    { label: "选项2", value: 2 },
+    { label: "选项3", value: 3 }
+  ]
+});
+
+const signedUrl = ref();
+async function fileUploaderChange(event: any) {
+  const file = event.target.files[0];
+  //异步加载上传组件
+  const s3Uploader = await loadUploader<FsUploaderS3>("s3");
+  const res = await s3Uploader.upload({
+    file,
+    fileName: file.name,
+    onProgress(progress: any) {
+      console.log("progress:" + progress.percent + "%");
+    }
+  });
+  const { ui } = useUi();
+  ui.message.info("upload success；" + JSON.stringify(res));
+  //构建下载地址
+  const { getConfig } = useUploader();
+  const s3Config = getConfig("s3");
+  const url = await s3Uploader.buildSignedUrl(s3Config, res.key, "get");
+  signedUrl.value = url;
+}
+
+function submit() {
+  message.info("submit:" + JSON.stringify(form));
+  console.log("submit:", form);
+}
+</script>

packages/ui/certd-client/src/views/crud/feature/export/crud.tsx

@@ -1,7 +1,7 @@
 import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
-import { Modal } from "ant-design-vue";
 import dayjs from "dayjs";
+
 export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
@@ -44,6 +44,8 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
           },
           fileType: context.fileType, //导出类型为excel
           dataFrom: context.dataFrom, //search查询获取， local 当前页数据
+          //仅导出显示的列
+          onlyShow: true,
           searchParams: {
             //查询条件
             page: {

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

@@ -1,7 +1,9 @@
 import * as api from "./api";
 import { message } from "ant-design-vue";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, FormWrapperContext, ScopeContext, UserPageQuery, UserPageRes, utils } from "@fast-crud/fast-crud";
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+import { computed } from "vue";
+
+export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
@@ -16,6 +18,7 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
   const addRequest = async ({ form }: AddReq) => {
     return await api.AddObj(form);
   };
+
   return {
     crudOptions: {
       request: {
@@ -25,6 +28,22 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
         delRequest
       },
       form: {
+        labelCol: {
+          //固定label宽度
+          span: null,
+          style: {
+            width: computed(() => {
+              return context.labelWidthRef.value + "px";
+            })
+          }
+        },
+        afterSubmit(context) {
+          // context.res 是add或update请求返回结果
+          if (context.form.id === 1) {
+            message.error("模拟保存失败，阻止弹窗关闭");
+            throw new Error("模拟失败，阻止弹窗关闭");
+          }
+        },
         wrapper: {
           buttons: {
             ok: {
@@ -34,9 +53,16 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
               text: "自定义按钮",
               click: async (context: FormWrapperContext) => {
                 utils.logger.info("btn context", context);
-                message.info({ content: "通过自定义按钮，触发保存" });
+                message.info("通过自定义按钮，触发保存");
                 await context.submit();
-                message.info({ content: "保存成功" });
+                message.info("保存成功");
+              }
+            },
+            customClose: {
+              text: "自定义关闭",
+              color: "red",
+              click: async (context: FormWrapperContext) => {
+                context.close();
               }
             }
           }

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

@@ -1,21 +1,32 @@
 <template>
   <fs-page>
+    <template #header>
+      <div class="title">基本表单</div>
+    </template>
     <fs-crud ref="crudRef" v-bind="crudBinding">
-      <template #actionbar-right>
+      <template #form-body-top>
-        <a-alert class="ml-1" type="info" message="基本表单" />
+        <div style="display: flex">
+          <span>label宽度设置:</span>
+          <a-slider v-model:value="labelWidthRef" style="width: 200px" :min="40" :max="300"></a-slider>
+        </div>
       </template>
     </fs-crud>
   </fs-page>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, onMounted, nextTick } from "vue";
+import { defineComponent, onMounted, ref } from "vue";
-import { useFs, UseFsProps } from "@fast-crud/fast-crud";
+import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud.jsx";
+
 export default defineComponent({
   name: "FormBase",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const labelWidthRef = ref(100);
+    const context = {
+      labelWidthRef
+    };
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context });
 
     // 页面打开后获取列表数据
     onMounted(async () => {
@@ -24,7 +35,8 @@ export default defineComponent({
 
     return {
       crudBinding,
-      crudRef
+      crudRef,
+      labelWidthRef
     };
   }
 });

packages/ui/certd-client/src/views/crud/form/base/mock.ts

@@ -10,7 +10,8 @@ const list = [
     age: 15,
     password: "",
     status: "2",
-    url: "https://baidu.com"
+    url: "https://baidu.com",
+    renderLabel: "第一行编辑演示阻止表单提交"
   },
   {
     name: "张三",