diff --git a/packages/plugins/@hera/plugin-core/src/client/index.tsx b/packages/plugins/@hera/plugin-core/src/client/index.tsx index c0ad6142a..c57c05c8e 100644 --- a/packages/plugins/@hera/plugin-core/src/client/index.tsx +++ b/packages/plugins/@hera/plugin-core/src/client/index.tsx @@ -88,6 +88,8 @@ import Expression from './components/Expression'; import { CustomField } from './components/CustomField'; import { useGetCustomAssociatedComponents } from './hooks/useGetCustomAssociatedComponents'; import { useGetCustomComponents } from './hooks/useGetCustomComponents'; +import { SwiperBlock, SwiperBlockInitializer } from './schema-initializer/SwiperBlockInitializer'; +import { NoticeBlock, NoticeBlockInitializer } from './schema-initializer/NoticeBlockInitializer'; export enum CustomComponentType { CUSTOM_FORM_ITEM, @@ -174,6 +176,8 @@ export class PluginCoreClient extends Plugin { DatePicker, RemoteSelect, SignatureInput, + SwiperBlockInitializer, + SwiperBlock, AssociationField: ExtendedAssociationField, OutboundButton, OutboundLinkActionInitializer, @@ -198,6 +202,8 @@ export class PluginCoreClient extends Plugin { // @ts-ignore Designer: MenuDesigner, }, + NoticeBlock, + NoticeBlockInitializer, }); } @@ -279,6 +285,19 @@ export class PluginCoreClient extends Plugin { type: 'divider', }); this.app.schemaInitializerManager.addItem('FilterFormItemInitializers', customItem.name, customItem); + // mobile + this.app.schemaInitializerManager.addItem('MBlockInitializers', 'dataBlocks.swiper', { + title: 'swiper', + name: 'swiper', + type: 'item', + Component: 'SwiperBlockInitializer', + }); + this.app.schemaInitializerManager.addItem('MBlockInitializers', 'dataBlocks.notice', { + title: 'notice', + name: 'notice', + type: 'item', + Component: 'NoticeBlockInitializer', + }); const addCustomComponent = { name: 'addCustomComponent', diff --git a/packages/plugins/@hera/plugin-core/src/client/schema-initializer/NoticeBlockInitializer.tsx b/packages/plugins/@hera/plugin-core/src/client/schema-initializer/NoticeBlockInitializer.tsx new file mode 100644 index 000000000..f4b96f7cf --- /dev/null +++ b/packages/plugins/@hera/plugin-core/src/client/schema-initializer/NoticeBlockInitializer.tsx @@ -0,0 +1,96 @@ +import Icon from '@ant-design/icons'; +import { ISchema } from '@formily/react'; +import { + DataBlockInitializer, + useCollectionManager, + useSchemaInitializer, + useSchemaInitializerItem, +} from '@nocobase/client'; +import React from 'react'; +import { uid } from '@nocobase/utils/client'; +import { NoticeBar } from 'antd-mobile'; + +const NoticeSvg = () => ( + + + +); + +const NoticeIcon = (props: Partial) => ; + +export const NoticeBlock = () => { + return ; +}; + +export const NoticeBlockInitializer = () => { + const { insert } = useSchemaInitializer(); + const cm = useCollectionManager(); + const itemConfig = useSchemaInitializerItem(); + return ( + } + componentType={'Notice'} + onCreateBlockSchema={async ({ item }) => { + const collection = cm.getCollection(item.name); + const schema = createGridCardBlockSchema({ + collection: item.name, + dataSource: item.dataSource, + rowKey: collection.filterTargetKey || 'id', + settings: 'blockSettings:gridCard', + }); + insert(schema); + }} + /> + ); +}; + +export const createGridCardBlockSchema = (options) => { + const { + formItemInitializers = 'ReadPrettyFormItemInitializers', + actionInitializers = 'GridCardActionInitializers', + itemActionInitializers = 'GridCardItemActionInitializers', + collection, + association, + resource, + template, + dataSource, + settings, + ...others + } = options; + const resourceName = resource || association || collection; + const schema: ISchema = { + type: 'void', + 'x-acl-action': `${resourceName}:view`, + 'x-decorator': 'GridCard.Decorator', + 'x-decorator-props': { + resource: resourceName, + collection, + association, + dataSource, + readPretty: true, + action: 'list', + params: { + pageSize: 12, + }, + runWhenParamsChanged: true, + ...others, + }, + 'x-component': 'BlockItem', + 'x-component-props': { + useProps: '{{ useGridCardBlockItemProps }}', + }, + 'x-toolbar': 'BlockSchemaToolbar', + 'x-settings': settings, + properties: { + [uid()]: { + type: 'void', + 'x-component': 'NoticeBlock', + }, + }, + }; + return schema; +}; diff --git a/packages/plugins/@hera/plugin-core/src/client/schema-initializer/SwiperBlockInitializer.tsx b/packages/plugins/@hera/plugin-core/src/client/schema-initializer/SwiperBlockInitializer.tsx new file mode 100644 index 000000000..611b105fa --- /dev/null +++ b/packages/plugins/@hera/plugin-core/src/client/schema-initializer/SwiperBlockInitializer.tsx @@ -0,0 +1,120 @@ +import Icon from '@ant-design/icons'; +import { ISchema } from '@formily/react'; +import { + DataBlockInitializer, + css, + useCollectionManager, + useSchemaInitializer, + useSchemaInitializerItem, +} from '@nocobase/client'; +import React from 'react'; +import { uid } from '@nocobase/utils/client'; +import { Swiper, Toast } from 'antd-mobile'; + +const SwiperSvg = () => ( + + + +); + +const SwiperIcon = (props: Partial) => ; + +export const SwiperBlock = () => { + const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac']; + const items = colors.map((color, index) => ( + +
{ + Toast.show(`你点击了卡片 ${index + 1}`); + }} + > + {index + 1} +
+
+ )); + return ( + + {items} + + ); +}; + +export const SwiperBlockInitializer = () => { + const { insert } = useSchemaInitializer(); + const cm = useCollectionManager(); + const itemConfig = useSchemaInitializerItem(); + return ( + } + componentType={'Swiper'} + onCreateBlockSchema={async ({ item }) => { + const collection = cm.getCollection(item.name); + const schema = createGridCardBlockSchema({ + collection: item.name, + dataSource: item.dataSource, + rowKey: collection.filterTargetKey || 'id', + settings: 'blockSettings:gridCard', + }); + insert(schema); + }} + /> + ); +}; + +export const createGridCardBlockSchema = (options) => { + const { + formItemInitializers = 'ReadPrettyFormItemInitializers', + actionInitializers = 'GridCardActionInitializers', + itemActionInitializers = 'GridCardItemActionInitializers', + collection, + association, + resource, + template, + dataSource, + settings, + ...others + } = options; + const resourceName = resource || association || collection; + const schema: ISchema = { + type: 'void', + 'x-acl-action': `${resourceName}:view`, + 'x-decorator': 'GridCard.Decorator', + 'x-decorator-props': { + resource: resourceName, + collection, + association, + dataSource, + readPretty: true, + action: 'list', + params: { + pageSize: 12, + }, + runWhenParamsChanged: true, + ...others, + }, + 'x-component': 'BlockItem', + 'x-component-props': { + useProps: '{{ useGridCardBlockItemProps }}', + }, + 'x-toolbar': 'BlockSchemaToolbar', + 'x-settings': settings, + properties: { + [uid()]: { + type: 'void', + 'x-component': 'SwiperBlock', + }, + }, + }; + return schema; +};