feat(plugin-file-manager): add thumbnail rule for cos (#5097)

packages/plugins/@nocobase/plugin-file-manager/src/client/FileStorage.tsx

@@ -9,14 +9,14 @@
 
 import { PlusOutlined, DownOutlined } from '@ant-design/icons';
 import { uid } from '@formily/shared';
-import { ActionContext, SchemaComponent, useCompile, usePlugin, useRecord } from '@nocobase/client';
+import { ActionContext, i18n, SchemaComponent, useCompile, usePlugin, useRecord } from '@nocobase/client';
 import { Button, Card, Dropdown } from 'antd';
 import _ from 'lodash';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import FileManagerPlugin from '.';
-import { StorageOptions } from './StorageOptions';
 import { storageSchema } from './schemas/storage';
+import { storageTypes } from './schemas/storageTypes';
 
 export const CreateStorage = () => {
   const [schema, setSchema] = useState({});
@@ -38,7 +38,7 @@ export const CreateStorage = () => {
                   [uid()]: {
                     type: 'void',
                     'x-component': 'Action.Drawer',
-                    'x-decorator': 'Form',
+                    'x-decorator': 'FormV2',
                     'x-decorator-props': {
                       initialValue: {
                         type: storageType.name,
@@ -46,7 +46,7 @@ export const CreateStorage = () => {
                     },
                     title: compile("{{t('Add new')}}") + ' - ' + compile(storageType.title),
                     properties: {
-                      ..._.cloneDeep(storageType.properties),
+                      ..._.cloneDeep(storageType.fieldset),
                       footer: {
                         type: 'void',
                         'x-component': 'Action.Drawer.Footer',
@@ -120,7 +120,7 @@ export const EditStorage = () => {
                 [uid()]: {
                   type: 'void',
                   'x-component': 'Action.Drawer',
-                  'x-decorator': 'Form',
+                  'x-decorator': 'FormV2',
                   'x-decorator-props': {
                     initialValue: {
                       ...record,
@@ -128,7 +128,7 @@ export const EditStorage = () => {
                   },
                   title: compile("{{t('Edit')}}") + ' - ' + compile(storageType.title),
                   properties: {
-                    ..._.cloneDeep(storageType.properties),
+                    ..._.cloneDeep(storageType.fieldset),
                     footer: {
                       type: 'void',
                       'x-component': 'Action.Drawer.Footer',
@@ -164,29 +164,32 @@ export const EditStorage = () => {
   );
 };
 
+function renderThumbnailRuleDesc(key) {
+  const option = storageTypes[key];
+  return option?.thumbnailRule ? (
+    <div>
+      <a target="_blank" href={option.thumbnailRuleLink} rel="noreferrer">
+        {i18n.t('See more')}
+      </a>
+    </div>
+  ) : null;
+}
+
 export const FileStoragePane = () => {
-  const { t } = useTranslation();
   const compile = useCompile();
   const plugin = usePlugin(FileManagerPlugin);
-  const storageTypes = [...plugin.storageTypes.values()].map((storageType) => {
+  const storageTypes = [...plugin.storageTypes.values()];
+  const storageTypeOptions = storageTypes.map((storageType) => {
     return {
       value: storageType.name,
       label: compile(storageType.title),
     };
   });
-  const xStyleProcessDesc = (
-    <div>
-      {t('See more')}{' '}
-      <a target="_blank" href="https://help.aliyun.com/zh/oss/user-guide/resize-images-4" rel="noreferrer">
-        x-oss-process
-      </a>
-    </div>
-  );
   return (
     <Card bordered={false}>
       <SchemaComponent
-        components={{ StorageOptions, CreateStorage, EditStorage }}
-        scope={{ useNewId: (prefix) => `${prefix}${uid()}`, storageTypes, xStyleProcessDesc }}
+        components={{ CreateStorage, EditStorage }}
+        scope={{ useNewId: (prefix) => `${prefix}${uid()}`, storageTypeOptions, renderThumbnailRuleDesc }}
         schema={storageSchema}
       />
     </Card>

packages/plugins/@nocobase/plugin-file-manager/src/client/schemas/storage.ts

@@ -45,7 +45,7 @@ const collection = {
         type: 'string',
         'x-component': 'Select',
         required: true,
-        enum: '{{ storageTypes }}',
+        enum: '{{ storageTypeOptions }}',
       } as ISchema,
     },
     {

packages/plugins/@nocobase/plugin-file-manager/src/client/schemas/storageTypes/ali-oss.tsx

@@ -7,13 +7,16 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
+import React from 'react';
+
 import { NAMESPACE } from '../../locale';
 import common from './common';
+import { useTranslation } from 'react-i18next';
 
 export default {
   title: `{{t("Aliyun OSS", { ns: "${NAMESPACE}" })}}`,
   name: 'ali-oss',
-  properties: {
+  fieldset: {
     title: common.title,
     name: common.name,
     baseUrl: common.baseUrl,
@@ -58,7 +61,7 @@ export default {
           'x-component-props': {
             placeholder: '?x-oss-process=image/auto-orient,1/resize,m_fill,w_94,h_94/quality,q_90',
           },
-          description: '{{ xStyleProcessDesc }}',
+          description: '{{ renderThumbnailRuleDesc("ali-oss") }}',
         },
       },
     },
@@ -67,4 +70,5 @@ export default {
     default: common.default,
     paranoid: common.paranoid,
   },
+  thumbnailRuleLink: 'https://help.aliyun.com/zh/oss/user-guide/resize-images-4',
 };

packages/plugins/@nocobase/plugin-file-manager/src/client/schemas/storageTypes/local.ts

@@ -13,7 +13,7 @@ import common from './common';
 export default {
   title: `{{t("Local storage", { ns: "${NAMESPACE}" })}}`,
   name: 'local',
-  properties: {
+  fieldset: {
     title: common.title,
     name: common.name,
     baseUrl: {

packages/plugins/@nocobase/plugin-file-manager/src/client/schemas/storageTypes/s3.ts

@@ -13,7 +13,7 @@ import common from './common';
 export default {
   title: `{{t("Amazon S3", { ns: "${NAMESPACE}" })}}`,
   name: 's3',
-  properties: {
+  fieldset: {
     title: common.title,
     name: common.name,
     baseUrl: common.baseUrl,

packages/plugins/@nocobase/plugin-file-manager/src/client/schemas/storageTypes/tx-cos.tsx

@@ -7,13 +7,15 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
+import { useTranslation } from 'react-i18next';
 import { NAMESPACE } from '../../locale';
 import common from './common';
+import React from 'react';
 
 export default {
   title: `{{t("Tencent COS", { ns: "${NAMESPACE}" })}}`,
   name: 'tx-cos',
-  properties: {
+  fieldset: {
     title: common.title,
     name: common.name,
     baseUrl: common.baseUrl,
@@ -49,6 +51,16 @@ export default {
           'x-component': 'Input',
           required: true,
         },
+        thumbnailRule: {
+          title: 'Thumbnail rule',
+          type: 'string',
+          'x-decorator': 'FormItem',
+          'x-component': 'Input',
+          'x-component-props': {
+            placeholder: '?imageMogr2/thumbnail/!50p',
+          },
+          description: '{{ renderThumbnailRuleDesc("tx-cos") }}',
+        },
       },
     },
     path: common.path,
@@ -56,4 +68,5 @@ export default {
     default: common.default,
     paranoid: common.paranoid,
   },
+  thumbnailRuleLink: 'https://cloud.tencent.com/document/product/436/42214',
 };