feat: add notice bar and swiper block
This commit is contained in:
parent
92bec8c5f5
commit
f7872aa16e
@ -88,6 +88,8 @@ import Expression from './components/Expression';
|
|||||||
import { CustomField } from './components/CustomField';
|
import { CustomField } from './components/CustomField';
|
||||||
import { useGetCustomAssociatedComponents } from './hooks/useGetCustomAssociatedComponents';
|
import { useGetCustomAssociatedComponents } from './hooks/useGetCustomAssociatedComponents';
|
||||||
import { useGetCustomComponents } from './hooks/useGetCustomComponents';
|
import { useGetCustomComponents } from './hooks/useGetCustomComponents';
|
||||||
|
import { SwiperBlock, SwiperBlockInitializer } from './schema-initializer/SwiperBlockInitializer';
|
||||||
|
import { NoticeBlock, NoticeBlockInitializer } from './schema-initializer/NoticeBlockInitializer';
|
||||||
|
|
||||||
export enum CustomComponentType {
|
export enum CustomComponentType {
|
||||||
CUSTOM_FORM_ITEM,
|
CUSTOM_FORM_ITEM,
|
||||||
@ -174,6 +176,8 @@ export class PluginCoreClient extends Plugin {
|
|||||||
DatePicker,
|
DatePicker,
|
||||||
RemoteSelect,
|
RemoteSelect,
|
||||||
SignatureInput,
|
SignatureInput,
|
||||||
|
SwiperBlockInitializer,
|
||||||
|
SwiperBlock,
|
||||||
AssociationField: ExtendedAssociationField,
|
AssociationField: ExtendedAssociationField,
|
||||||
OutboundButton,
|
OutboundButton,
|
||||||
OutboundLinkActionInitializer,
|
OutboundLinkActionInitializer,
|
||||||
@ -198,6 +202,8 @@ export class PluginCoreClient extends Plugin {
|
|||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
Designer: MenuDesigner,
|
Designer: MenuDesigner,
|
||||||
},
|
},
|
||||||
|
NoticeBlock,
|
||||||
|
NoticeBlockInitializer,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -279,6 +285,19 @@ export class PluginCoreClient extends Plugin {
|
|||||||
type: 'divider',
|
type: 'divider',
|
||||||
});
|
});
|
||||||
this.app.schemaInitializerManager.addItem('FilterFormItemInitializers', customItem.name, customItem);
|
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 = {
|
const addCustomComponent = {
|
||||||
name: 'addCustomComponent',
|
name: 'addCustomComponent',
|
||||||
|
@ -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;
|
||||||
|
};
|
@ -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;
|
||||||
|
};
|
Loading…
Reference in New Issue
Block a user