feat: add notice bar and swiper block

This commit is contained in:
sealday 2024-03-12 03:45:44 +08:00
parent 92bec8c5f5
commit f7872aa16e
3 changed files with 235 additions and 0 deletions

View File

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

View File

@ -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 = () => (
<svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
<path
d="M338.773333 362.666667H170.666667v298.666666h105.578666l45.013334 0.021334 17.258666 0.426666L682.666667 809.258667V214.890667L338.773333 362.666667z m-17.578666-85.333334L768 85.333333v853.333334l-448-191.978667L85.333333 746.666667V277.333333h235.861334zM170.666667 661.333333v85.333334h85.333333v-85.333334H170.666667zM853.333333 298.666667h85.333334v426.666666h-85.333334z"
fill="#000000"
></path>
</svg>
);
const NoticeIcon = (props: Partial<any>) => <Icon component={NoticeSvg} {...props} />;
export const NoticeBlock = () => {
return <NoticeBar content="月底冲量佣金上调" color="alert" />;
};
export const NoticeBlockInitializer = () => {
const { insert } = useSchemaInitializer();
const cm = useCollectionManager();
const itemConfig = useSchemaInitializerItem();
return (
<DataBlockInitializer
{...itemConfig}
icon={<NoticeIcon />}
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;
};

View File

@ -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 = () => (
<svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
<path d="M0 219.428571h73.142857v585.142858H0V219.428571z m950.857143 0h73.142857v585.142858h-73.142857V219.428571z m-146.285714-146.285714a73.142857 73.142857 0 0 1 73.142857 73.142857v731.428572a73.142857 73.142857 0 0 1-73.142857 73.142857H219.428571a73.142857 73.142857 0 0 1-73.142857-73.142857V146.285714a73.142857 73.142857 0 0 1 73.142857-73.142857h585.142858z m0 73.142857H219.428571v731.428572h585.142858V146.285714zM365.714286 694.857143a36.571429 36.571429 0 1 1 0 73.142857 36.571429 36.571429 0 0 1 0-73.142857z m146.285714 0a36.571429 36.571429 0 1 1 0 73.142857 36.571429 36.571429 0 0 1 0-73.142857z m146.285714 0a36.571429 36.571429 0 1 1 0 73.142857 36.571429 36.571429 0 0 1 0-73.142857z"></path>
</svg>
);
const SwiperIcon = (props: Partial<any>) => <Icon component={SwiperSvg} {...props} />;
export const SwiperBlock = () => {
const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac'];
const items = colors.map((color, index) => (
<Swiper.Item key={index}>
<div
className={css`
height: 120px;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
font-size: 48px;
user-select: none;
`}
style={{ background: color }}
onClick={() => {
Toast.show(`你点击了卡片 ${index + 1}`);
}}
>
{index + 1}
</div>
</Swiper.Item>
));
return (
<Swiper loop autoplay>
{items}
</Swiper>
);
};
export const SwiperBlockInitializer = () => {
const { insert } = useSchemaInitializer();
const cm = useCollectionManager();
const itemConfig = useSchemaInitializerItem();
return (
<DataBlockInitializer
{...itemConfig}
icon={<SwiperIcon />}
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;
};