mirror of
https://gitee.com/nocobase/nocobase.git
synced 2024-12-08 15:18:30 +08:00
feat(plugin-file-manager): add thumbnail rule for cos (#5097)
This commit is contained in:
parent
a2698003bd
commit
ddefabf917
@ -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>
|
||||
|
@ -45,7 +45,7 @@ const collection = {
|
||||
type: 'string',
|
||||
'x-component': 'Select',
|
||||
required: true,
|
||||
enum: '{{ storageTypes }}',
|
||||
enum: '{{ storageTypeOptions }}',
|
||||
} as ISchema,
|
||||
},
|
||||
{
|
||||
|
@ -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',
|
||||
};
|
@ -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: {
|
||||
|
@ -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,
|
||||
|
@ -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',
|
||||
};
|
Loading…
Reference in New Issue
Block a user