Skip to content

J
jinfa-admin
Commit ffbd5d40 authored by XieZhiXiong's avatar XieZhiXiong
Browse files
Options

Merge branch 'v2' of http://10.0.0.22:3000/lingxi/lingxi-business-system into v2

parents a1e0a54b eb76a0c9
Hide whitespace changes
Inline Side-by-side
Showing with 1219 additions and 8 deletions
config/routes/index.ts
View file @ ffbd5d40
......@@ -92,6 +92,7 @@ const router = [
// path: '/mobile/template/edit',
// component: '@/pages/pageCustomized/mobileEdit',
// },
{
path: '/',
component: '@/layouts/index',
......@@ -100,6 +101,12 @@ const router = [
path: '/',
redirect: '/home'
},
{
path: '/pageCustomized/mobile/template/category',
name: '品类导航页装修',
noLayout: true,
component: '@/pages/pageCustomized/categoryNavigation',
},
// {
// path: '/home',
// name: 'home',
......@@ -112,6 +119,7 @@ const router = [
// marketingRoutes,
// platformCouponManageRoute,
...asyncRoutes,
// purchaseBidRoute,
{
path: '/noAuth',
......
config/routes/pageCustomized.ts
View file @ ffbd5d40
......@@ -36,8 +36,13 @@ const router =
hideInMenu: true,
hidePageHeader: true,
},
{
path: '/pageCustomized/mobile/template/category',
name: '品类导航页装修',
component: '@/pages/pageCustomized/categoryNavigation',
}
]
}
};
export default router
export default router;
src/pages/marketing/marketingActivitiesManagement/activePage/fixtures/common/configs/pageConfigs.ts
View file @ ffbd5d40
import * as LingXiUI from 'lingxi-design-ui';
import * as LxUI from '@lingxi-disign/ui';
import { ConfigType } from '@lingxi-disign/react';
import MallLayout from '@/pages/pageCustomized/configs/componentConfigs/LingXiUI/MallLayout';
import * as HTML from '@/pages/pageCustomized/configs/componentConfigs/HTML';
import schema from './schema';
import CustomLayouts from '../../components/Layouts';
import MallLayout from '@/pages/pageCustomized/configs/componentConfigs/LingXiUI/MallLayout';
// import MobileQuickNav from '@/pages/pageCustomized/configs/componentConfigs/LingXiUI/MobileQuickNav';
import * as HTML from '@/pages/pageCustomized/configs/componentConfigs/HTML';
const componentSchemasMap = { MallLayout, ...schema, ...HTML };
const originalComponents = { ...LxUI, ...LingXiUI, ...CustomLayouts };
......@@ -27,7 +27,7 @@ const originalComponents = { ...LxUI, ...LingXiUI, ...CustomLayouts };
*/
const config: ConfigType = {
componentsMap: originalComponents,
componentSchemasMap: componentSchemasMap,
componentSchemasMap: componentSchemasMap as any,
};
export default config;
src/pages/marketing/marketingActivitiesManagement/activePage/fixtures/index.tsx
View file @ ffbd5d40
......@@ -5,6 +5,8 @@ import _get from 'lodash/get';
import _omit from 'lodash/omit';
import _pick from 'lodash/pick';
import { history } from 'umi';
import { usePageStatus } from '@/hooks/usePageStatus';
import { PublicApi } from '@/services/api';
import MobileDesignPanel from './components/MobileDesignPanel';
import componentConfigs from './common/configs';
import Toolbar from './components/Toolbar';
......@@ -15,8 +17,6 @@ import useGetData from './common/hooks/useGetData';
import Module from './components/ComponentTree';
import ToolbarSubmit from './components/Toolbar/toolbarSubmit';
import { RenovationProvider } from './common/context/shopContext';
import { usePageStatus } from '@/hooks/usePageStatus';
import { PublicApi } from '@/services/api';
const { TabPane } = Tabs;
......@@ -138,7 +138,7 @@ const Fixtures = () => {
<MobileDesignPanel theme={'theme-mall-science'} onlyEidt />
</div>
</div>
<RenovationProvider value={{shopId: detail?.shopId}}>
<RenovationProvider value={{shopId: detail!.shopId}}>
<EditPanel />
</RenovationProvider>
</div>
......
src/pages/pageCustomized/categoryNavigation/common/hooks/useGetLayout.tsx 0 → 100644
View file @ ffbd5d40
import React, { useEffect } from 'react';
import { updatePageConfig } from '@lingxi-disign/core';
import pageConfig from '../schema/pageConfig';
function useGetLayout() {
useEffect(() => {
updatePageConfig(pageConfig);
}, []);
}
export default useGetLayout;
src/pages/pageCustomized/categoryNavigation/common/mock/index.json 0 → 100644
View file @ ffbd5d40
{
"style":0,
"category":[
{
"id":1,
"status":false,
"name":"成品皮1",
"children":[
{"id":5, "icon":"logo.png", "name":"牛皮"},
{"id":6, "icon":"logo.png", "name":"牛皮"}
],
"flashSale":{
"status":true,
"title":"限时抢购",
"id":[1, 2, 3]
},
"saleRanking":{
"status":true,
"title":"销量排行榜",
"product":[
{"id":1, "sale":5000},
{"id":2, "sale":10000}
]
},
"brand":{
"status":true,
"title":"精选品牌",
"id":[1, 2, 3]
},
"suggestProduct":{
"status":true,
"title":"新品 - 自定义商品(装修那里需要显示商品, 并且可以设置活动标签)",
"type":3,
"num":null,
"customize":[
{"id":1, "lable":["特价", "满299减30"]},
{"id":2, "lable":[]},
{"id":3, "lable":["特价", "满299减30", "赠帆布袋"]}
]
}
},
{
"id":2,
"status":false,
"name":"成品皮2",
"children":[
{"id":7, "icon":"logo.png", "name":"牛皮"},
{"id":8, "icon":"logo.png", "name":"牛皮"}
],
"flashSale":{
"status":true,
"title":"限时抢购",
"id":[1, 2, 3]
},
"saleRanking":{
"status":true,
"title":"销量排行榜",
"product":[
{"id":1, "sale":5000},
{"id":2, "sale":10000}
]
},
"brand":{
"status":true,
"title":"精选品牌",
"id":[1, 2, 3]
},
"suggestProduct":{
"status":true,
"title":"新品 - 自动按上架时间排序展示(装修那里是不会显示商品的, 所以不需要活动标签)",
"type":2,
"num":50,
"customize":null
}
},
{
"id":3,
"status":false,
"name":"成品皮3",
"children":[
{"id":9, "icon":"logo.png", "name":"牛皮"}
],
"flashSale":{
"status":true,
"title":"限时抢购",
"id":[1, 2, 3]
},
"saleRanking":{
"status":true,
"title":"销量排行榜",
"product":[
{"id":1, "sale":5000},
{"id":2, "sale":10000}
]
},
"brand":{
"status":true,
"title":"精选品牌",
"id":[1, 2, 3]
},
"suggestProduct":{
"status":true,
"title":"新品 - 自动按销量排序展示(装修那里是不会显示商品的, 所以不需要活动标签)",
"type":1,
"num":50,
"customize":null
}
}
]
}
src/pages/pageCustomized/categoryNavigation/common/schema/index.tsx 0 → 100644
View file @ ffbd5d40
import * as LingXiUI from 'lingxi-design-ui';
import * as LxUI from '@lingxi-disign/ui';
import { ConfigType } from '@lingxi-disign/react';
import MallLayout from '@/pages/pageCustomized/configs/componentConfigs/LingXiUI/MallLayout';
import * as HTML from '@/pages/pageCustomized/configs/componentConfigs/HTML';
import schema from './layoutSchema';
import CustomLayouts from '../../components';
// import CustomLayouts from '../../components/Layouts';
// import MobileQuickNav from '@/pages/pageCustomized/configs/componentConfigs/LingXiUI/MobileQuickNav';
const componentSchemasMap = { MallLayout, ...schema, ...HTML };
const originalComponents = { ...LxUI, ...LingXiUI, ...CustomLayouts };
// /**
// * 容器组件分类
// */
// export const CONTAINER_CATEGORY = { ...reactContainers, ...htmlContainers };
// /**
// * 非容器组件分类
// * @type {{Input, InputNumber, Slider, Checkbox, Rate, Radio, Icon, Typography}}
// */
// export const NON_CONTAINER_CATEGORY = { ...reactNonContainers, ...htmlNonContainers };
/**
* 设计面板iframe 模板，如果集成到项目中，需要将拖拽组件所依赖的样式在模板中设置，
* 否则设计面板渲染的页面将是无样式的效果
*/
const config: ConfigType = {
componentsMap: originalComponents,
componentSchemasMap: componentSchemasMap as any,
};
export default config;
src/pages/pageCustomized/categoryNavigation/common/schema/layoutSchema.tsx 0 → 100644
View file @ ffbd5d40
import { ComponentSchemaType, PROPS_SETTING_TYPES, PROPS_TYPES } from '@lingxi-disign/core';
const HeaderNav: {[key: string]: ComponentSchemaType} = {
HeaderNav: {
propsConfig: {
children: {
label: '内容',
type: PROPS_TYPES.string,
}
},
},
"HeaderNav.ActionItem": {
propsConfig: {
children: {
label: '内容',
type: PROPS_TYPES.string,
}
},
}
};
const CustomizeTabs: ComponentSchemaType = {
propsConfig: {
children: {
label: '内容',
type: PROPS_TYPES.string,
}
},
};
const SecondaryNavigation: {[key: string]: ComponentSchemaType} = {
SecondaryNavigation: {
propsConfig: {
children: {
label: '内容',
type: PROPS_TYPES.string,
}
},
},
"SecondaryNavigation.Item": {
propsConfig: {
children: {
label: '内容',
type: PROPS_TYPES.string,
}
},
}
};
const CustomizeCard: ComponentSchemaType = {
propsConfig: {
children: {
label: '内容',
type: PROPS_TYPES.string,
}
},
};
const Container: ComponentSchemaType = {
propsConfig: {
children: {
label: '内容',
type: PROPS_TYPES.string,
}
},
};
const SimpleCommodity: {[key: string]: ComponentSchemaType} = {
SimpleCommodityList: {
propsConfig: {
children: {
label: '内容',
type: PROPS_TYPES.string,
}
},
},
"SimpleCommodityList.Item": {
propsConfig: {
children: {
label: '内容',
type: PROPS_TYPES.string,
}
},
}
};
const CategoryList: {[key: string]: ComponentSchemaType} = {
CategoryList: {
propsConfig: {
children: {
label: '内容',
type: PROPS_TYPES.string,
}
},
},
"CategoryList.Item": {
propsConfig: {
children: {
label: '内容',
type: PROPS_TYPES.string,
}
},
}
};
const Product: ComponentSchemaType = {
propsConfig: {
children: {
label: '内容',
type: PROPS_TYPES.string,
}
},
};
export default {
...HeaderNav,
...SecondaryNavigation,
...SimpleCommodity,
CustomizeTabs,
CustomizeCard,
Container,
...CategoryList,
Product
};
src/pages/pageCustomized/categoryNavigation/common/schema/pageConfig.tsx 0 → 100644
View file @ ffbd5d40
import React from 'react';
import { PageConfigType, PROPS_SETTING_TYPES } from '@lingxi-disign/core';
const template = {
"6-1": {
componentName: 'SecondaryNavigation',
title: "二级导航",
addBtnText: '添加导航',
childComponentName: 'SecondaryNavigation.Item',
childNodes: []
},
"6-2": {
componentName: 'Container',
title: '秒杀',
props: {
cardProps: {
title: '今日大牌秒杀',
headStyle: {
padding: '0 12px'
},
bodyStyle: {
padding: '0 12px 12px 12px',
overflowX: 'auto'
},
},
listStyle: {
marginRight: '-12px',
},
itemStyle: {
marginRight: '12px',
}
},
childNodes: []
},
"6-3": {
componentName: 'Container',
title: '品类销量排行',
addBtnText: '添加销量排行商品',
childComponentName: 'SimpleCommodityList.Item',
props: {
cardProps: {
title: '品类销量排行',
headStyle: {
padding: '0 12px'
},
bodyStyle: {
padding: '0 12px 12px 12px',
overflowX: 'auto'
},
},
listStyle: {
marginRight: '-12px',
},
itemStyle: {
marginRight: '12px',
}
},
childNodes: []
},
"6-4": {
componentName: 'Container',
title: '品牌',
addBtnText: '添加品牌',
childComponentName: 'CategoryList.Item',
props: {
cardProps: {
bodyStyle: {
padding: '12px 16px',
},
bordered: false,
},
listStyle: {
marginRight: '-34px',
marginBottom: '-12px',
flexWrap : 'wrap',
alignItems: 'center',
},
itemStyle: {
flexBasic: '25%',
paddingRight: '24px',
marginBottom: '12px',
}
},
childNodes: []
},
"6-5": {
componentName: 'Container',
title: '商品',
addBtnText: '添加商品',
childComponentName: 'Product',
props: {
card: false,
listStyle: {
marginRight: '-8px',
flexWrap: 'wrap'
},
itemStyle: {
paddingRight: '8px',
width: '50%'
}
},
childNodes: []
},
};
/**
* 以下对应的组件全部在Layout 文件夹中
*
*/
const mallLayoutConfig: PageConfigType = {
"0": {
"componentName": "MallLayout",
title: '组件树',
"props": {
"style": {
"width": "100%",
"minHeight": "100%",
// "background": "#DD3041",
"overflowX": "hidden",
"paddingBottom": "50px",
}
},
"childNodes": ["1", "4"]
},
};
const header: PageConfigType = {
"1": {
componentName: 'HeaderNav',
title: '头部',
props: {},
childNodes: ["2", "3"],
},
"2": {
componentName: 'HeaderNav.ActionItem',
title: '我的',
props: {
data: {
name: "我的",
content: "",
status: true,
type: 1
},
}
},
"3": {
componentName: 'HeaderNav.ActionItem',
title: '搜索框',
props: {
data: {
name: "搜索框",
content: "灯具",
status: true,
type: 4
},
}
}
};
const tab: PageConfigType = {
"4": {
componentName: 'CustomizeTabs',
title: 'tab',
props: {
defaultActiveKey: "2",
},
childComponentName: 'div',
addBtnText: '添加Tab',
childNodes: ['5', "6"],
childProps: {
title: 'tab',
props: {
tab: 'tab',
}
}
},
"5": {
componentName: 'div',
title: '首页',
props: {
tab: '首页',
disabled: true,
// children: 123123
},
},
};
const tabContent: PageConfigType = {
"6": {
componentName: 'div',
title: '数码',
props: {
tab: '数码',
style: {
padding: '8px 8px 0 8px'
}
},
childNodes: ['6-1', "6-2", "6-3", "6-4", "6-5"],
},
"6-1": {
componentName: 'SecondaryNavigation',
title: "二级导航",
addBtnText: '添加导航',
childComponentName: 'SecondaryNavigation.Item',
childNodes: ['6-1-1']
},
"6-1-1": {
componentName: 'SecondaryNavigation.Item',
title: "二级导航-标签",
},
"6-2": {
componentName: 'Container',
title: '秒杀',
addBtnText: '添加秒杀商品',
childComponentName: 'SimpleCommodityList.Item',
props: {
cardProps: {
title: '今日大牌秒杀',
headStyle: {
padding: '0 12px'
},
bodyStyle: {
padding: '0 12px 12px 12px',
overflowX: 'auto'
},
},
listStyle: {
marginRight: '-12px',
},
itemStyle: {
marginRight: '12px',
}
},
childNodes: ["6-2-1"]
},
"6-2-1": {
componentName: 'SimpleCommodityList.Item',
title: '123',
props: {
// image: "https://img2.baidu.com/it/u=4073850171,2776482768&fm=26&fmt=auto&gp=0.jpg",
// originalPrice: 266,
// discount: 255
}
},
"6-3": {
componentName: 'Container',
title: '品类销量排行',
addBtnText: '添加销量排行商品',
childComponentName: 'SimpleCommodityList.Item',
props: {
cardProps: {
title: '品类销量排行',
headStyle: {
padding: '0 12px'
},
bodyStyle: {
padding: '0 12px 12px 12px',
overflowX: 'auto'
},
},
listStyle: {
marginRight: '-12px',
},
itemStyle: {
marginRight: '12px',
}
},
childNodes: ["6-3-1"]
},
"6-3-1": {
componentName: 'SimpleCommodityList.Item',
title: '123',
props: {
// image: "https://img2.baidu.com/it/u=4073850171,2776482768&fm=26&fmt=auto&gp=0.jpg",
// originalPrice: 266,
// footer: '<div>123</div>'
}
},
"6-4": {
componentName: 'Container',
title: '品牌',
addBtnText: '添加品牌',
childComponentName: 'CategoryList.Item',
props: {
cardProps: {
bodyStyle: {
padding: '12px 16px',
},
bordered: false,
},
listStyle: {
marginRight: '-34px',
marginBottom: '-12px',
flexWrap : 'wrap',
alignItems: 'center',
},
itemStyle: {
flexBasic: '25%',
paddingRight: '24px',
marginBottom: '12px',
}
},
childNodes: ["6-4-1"]
},
"6-4-1": {
componentName: 'CategoryList.Item',
title: '123',
props: {}
},
/** 商品 */
"6-5": {
componentName: 'Container',
title: '商品',
addBtnText: '添加商品',
childComponentName: 'Product',
props: {
card: false,
listStyle: {
marginRight: '-8px',
flexWrap: 'wrap'
},
itemStyle: {
paddingRight: '8px',
width: '50%'
}
},
childNodes: ["6-5-1"]
},
"6-5-1": {
componentName: 'Product',
title: '商品',
props: {}
}
};
const configs = {
...mallLayoutConfig,
...header,
...tab,
...tabContent,
// ...spike,
// ...rank,
// ...category,
// ...commodity,
};
export default configs;
src/pages/pageCustomized/categoryNavigation/components/Layout/Card/index.less 0 → 100644
View file @ ffbd5d40
.wrap {
margin-bottom: 8px;
:global {
.ant-card {
border-radius: 8px;
.ant-card-head {
border-bottom: none;
}
.ant-card-head-title {
font-size: 16px;
color: #252D37;
line-height: 16px;
}
}
}
}
src/pages/pageCustomized/categoryNavigation/components/Layout/Card/index.tsx 0 → 100644
View file @ ffbd5d40
import React from 'react';
import { Card } from 'antd';
import cs from 'classnames';
import styles from './index.less';
type CardProps = React.ComponentProps<typeof Card>;
interface Iprops extends CardProps {
children: React.ReactNode,
}
const CustomizeCard: React.FC<Iprops> = (props: Iprops) => {
const { children, ...rest } = props;
const { onClick, onDrag, onDragEnd, onDragEnter, onDragStart, onMouseOver, getOperateState, className, ...otherRest} = props as any;
/** guaidLine 属性 */
const divProps = {
onClick, onDrag, onDragEnd, onDragEnter, onDragStart, onMouseOver
};
return (
<div {...divProps} className={cs(styles.wrap, className)}>
<Card {...otherRest}>
{ children }
</Card>
</div>
);
};
export default CustomizeCard;
src/pages/pageCustomized/categoryNavigation/components/Layout/Category/index.less 0 → 100644
View file @ ffbd5d40
.list {
display: flex;
flex-direction: row;
align-items: center;
margin-right: -32px;
margin-bottom: -12px;
flex-wrap: wrap;
.item {
flex-basis: 25%;
padding-right: 24px;
margin-bottom: 12px;
}
}
.container {
display: flex;
flex-direction: column;
align-items: center;
.image {
width: 64px;
height: 36px;
margin-bottom: 8px;
}
.name {
color: #606266;
font-size: 12px;
}
}
src/pages/pageCustomized/categoryNavigation/components/Layout/Category/index.tsx 0 → 100644
View file @ ffbd5d40
import React from 'react';
import cs from 'classnames';
import styles from './index.less';
import CustomizeCard from '../Card';
interface Iprops {
children: React.ReactElement
}
const CategoryList: React.FC<Iprops> & { Item: typeof CategoryItem } = (props: Iprops) => {
const { children } = props;
const { onClick, onDrag, onDragEnd, onDragEnter, onDragStart, onMouseOver, getOperateState, className, ...rest} = props as any;
const divProps = {
onClick, onDrag, onDragEnd, onDragEnter, onDragStart, onMouseOver
};
const wrapClass = cs(className, styles.wrap);
return (
<div className={wrapClass} {...divProps}>
<CustomizeCard bordered={false} bodyStyle={{padding: '12px 16px'}}>
<div className={styles.list}>
{
React.Children.map(children, (_child, _index) => {
const node = React.cloneElement(_child);
return (
<div key={_index} className={styles.item}>
{node}
</div>
);
})
}
</div>
</CustomizeCard>
</div>
);
};
interface IcategoryItemProps {
name: string,
image: string,
}
const CategoryItem: React.FC<IcategoryItemProps> = (props: IcategoryItemProps) => {
const { name, image } = props;
const { onClick, onDrag, onDragEnd, onDragEnter, onDragStart, onMouseOver, getOperateState, className, ...rest} = props as any;
const divProps = {
onClick, onDrag, onDragEnd, onDragEnter, onDragStart, onMouseOver
};
const wrapClass = cs(className, styles.container);
return (
<div className={wrapClass} {...divProps}>
<img src={image} className={styles.image} />
<span className={styles.name}>荣耀</span>
</div>
);
};
CategoryList.Item = CategoryItem;
export default CategoryList;
src/pages/pageCustomized/categoryNavigation/components/Layout/Commodity/index.tsx 0 → 100644
View file @ ffbd5d40
import React from 'react';
import { Commodity } from '@lingxi-disign/ui';
import cs from 'classnames';
import styles from './index.less';
type CommodityType = React.ComponentProps<typeof Commodity>
type Iprops = Omit<CommodityType, 'mode'>
const Product: React.FC<Iprops> = (props: Iprops) => {
const { onClick, onDrag, onDragEnd, onDragEnter, onDragStart, onMouseOver, getOperateState, className, ...rest } = props as any;
const divProps = {
onClick, onDrag, onDragEnd, onDragEnter, onDragStart, onMouseOver
};
const wrapClass = cs(className, styles.simple);
return (
<div className={wrapClass} {...divProps}>
<Commodity mode="vertical" />
</div>
);
};
export default Product;
src/pages/pageCustomized/categoryNavigation/components/Layout/Commodity/simple.less 0 → 100644
View file @ ffbd5d40
.list {
display: flex;
flex-direction: row;
align-items: center;
margin-right: -12px;
.simpleItem {
padding-right: 12px;
}
}
.simple {
}
src/pages/pageCustomized/categoryNavigation/components/Layout/Commodity/simple.tsx 0 → 100644
View file @ ffbd5d40
import React from 'react';
import { SimpleCommodity, CustomizeTag } from '@lingxi-disign/ui';
import cs from 'classnames';
import styles from './simple.less';
interface Iprops {
children: React.ReactElement
}
const SimpleCommodityList: React.FC<Iprops> & { Item: typeof SimpleItem } = (props: Iprops) => {
const { children } = props;
return (
<div className={styles.list}>
{
React.Children.map(children, (_child, _index) => {
const node = React.cloneElement(_child);
return (
<div key={_index} className={styles.simpleItem}>
{node}
</div>
);
})
}
</div>
);
};
interface IsimpleItemprops {
image: string,
discount?: number,
originalPrice?: number,
footer?: React.ReactNode
}
const SimpleItem: React.FC<IsimpleItemprops> = (props: IsimpleItemprops) => {
const { image, discount, originalPrice, footer } = props;
const { onClick, onDrag, onDragEnd, onDragEnter, onDragStart, onMouseOver, getOperateState, className } = props as any;
const divProps = {
onClick, onDrag, onDragEnd, onDragEnter, onDragStart, onMouseOver
};
const rest = footer ? { footer } : { originalPrice };
const wrapClass = cs(className, styles.simple);
return (
<div className={wrapClass} {...divProps}>
<SimpleCommodity image={image} discount={discount} {...rest} />
</div>
);
};
SimpleCommodityList.Item = SimpleItem;
export default SimpleCommodityList;
src/pages/pageCustomized/categoryNavigation/components/Layout/Container/index.less 0 → 100644
View file @ ffbd5d40
.list {
display: flex;
flex-direction: row;
align-items: center;
margin-right: -12px;
}
src/pages/pageCustomized/categoryNavigation/components/Layout/Container/index.tsx 0 → 100644
View file @ ffbd5d40
import React, { CSSProperties } from 'react';
import cs from 'classnames';
import { Card } from 'antd';
import styles from './index.less';
import CustomizeCard from '../Card';
type CardProps = React.ComponentProps<typeof Card>;
interface Iprops {
children: React.ReactElement,
card: boolean,
cardProps?: CardProps,
listStyle?: CSSProperties,
itemStyle?: CSSProperties
}
const Container: React.FC<Iprops> = (props: Iprops) => {
const { children, card = true, cardProps = {}, listStyle = {}, itemStyle = {} } = props;
const { onClick, onDrag, onDragEnd, onDragEnter, onDragStart, onMouseOver, getOperateState, className, ...rest} = props as any;
const divProps = {
onClick, onDrag, onDragEnd, onDragEnter, onDragStart, onMouseOver
};
const wrapClass = cs(className, styles.wrap);
return (
<div className={wrapClass} {...divProps}>
{
card && (
<CustomizeCard bordered={false} {...cardProps}>
<div className={styles.list} style={listStyle}>
{
React.Children.map(children, (_child, _index) => {
const node = React.cloneElement(_child);
return (
<div key={_index} className={styles.item} style={itemStyle}>
{node}
</div>
);
})
}
</div>
</CustomizeCard>
) || (
<div className={styles.list} style={listStyle}>
{
React.Children.map(children, (_child, _index) => {
const node = React.cloneElement(_child);
return (
<div key={_index} className={styles.item} style={itemStyle}>
{node}
</div>
);
})
}
</div>
)
}
</div>
);
};
export default Container;
src/pages/pageCustomized/categoryNavigation/components/Layout/SecondaryNavigation/index.less 0 → 100644
View file @ ffbd5d40
.wrap {
:global {
.ant-card {
border-radius: 8px;
}
}
.list {
display: flex;
flex-direction: row;
align-items: center;
margin-right: -34px;
.item {
flex-basis: 20%;
margin-bottom: 12px;
.content {
width: 40px;
height: 40px;
background-color: red;
}
}
}
}
src/pages/pageCustomized/categoryNavigation/components/Layout/SecondaryNavigation/index.tsx 0 → 100644
View file @ ffbd5d40
import React from 'react';
// import { Card } from 'antd';
import cs from 'classnames';
import styles from './index.less';
import CustomizeCard from '../Card';
interface Iprops {
children: React.ReactElement
}
const SecondaryNavigation: React.FC<Iprops> & { Item: typeof Item } = (props: Iprops) => {
const { children } = props;
const { onClick, onDrag, onDragEnd, onDragEnter, onDragStart, onMouseOver, getOperateState, className, ...rest} = props as any;
const divProps = {
onClick, onDrag, onDragEnd, onDragEnter, onDragStart, onMouseOver
};
const wrapClass = cs(className, styles.wrap);
return (
<div className={wrapClass} {...divProps}>
<CustomizeCard bordered={false} bodyStyle={{padding: '12px 12px 0 12px', borderRadius: 8}}>
<div className={styles.list}>
{
React.Children.map(children, (_item) => {
return React.cloneElement(_item);
})
}
</div>
</CustomizeCard>
</div>
);
};
const Item = (props) => {
const { onClick, onDrag, onDragEnd, onDragEnter, onDragStart, onMouseOver, getOperateState, className, ...rest} = props as any;
/** guaidLine 属性 */
const divProps = {
onClick, onDrag, onDragEnd, onDragEnter, onDragStart, onMouseOver
};
const wrapClass = cs(className, styles.content);
return (
<div className={styles.item} >
<div {...divProps} className={wrapClass}>123</div>
</div>
);
};
SecondaryNavigation.Item = Item;
export default SecondaryNavigation;
src/pages/pageCustomized/categoryNavigation/components/Layout/Tabs/index.less 0 → 100644
View file @ ffbd5d40
.wrap {
:global {
.ant-tabs-nav {
margin-bottom: 0px;
}
}
}
src/pages/pageCustomized/categoryNavigation/components/Layout/Tabs/index.tsx 0 → 100644
View file @ ffbd5d40
import React from 'react';
import { Tabs } from 'antd';
import cs from 'classnames';
import styles from './index.less';
const { TabPane } = Tabs;
interface Iprops {
defaultActiveKey: string,
children: React.ReactElement,
}
const CustomizeTabs: React.FC<Iprops> = (props: Iprops) => {
const { children, defaultActiveKey } = props;
const { onClick, onDrag, onDragEnd, onDragEnter, onDragStart, onMouseOver, getOperateState, className, ...rest} = props as any;
/** guaidLine 属性 */
const divProps = {
onClick, onDrag, onDragEnd, onDragEnter, onDragStart, onMouseOver
};
const node = React.Children.map(children, (_item, index) => {
const cloneNode = React.cloneElement(_item);
return (
<TabPane tab={_item.props.tab} key={index.toString()} disabled={_item.props.disabled || false}>
<div {...divProps}>
{/* <SecondaryNavigation></SecondaryNavigation> */}
{ cloneNode }
</div>
</TabPane>
);
});
const wrapClass = cs(className, styles.wrap);
return (
<div {...divProps} className={wrapClass}>
<Tabs defaultActiveKey={defaultActiveKey} tabBarStyle={{background: '#fff', padding: '0 12px'}}>
{node}
</Tabs>
</div>
);
};
export default CustomizeTabs;
src/pages/pageCustomized/categoryNavigation/components/index.tsx 0 → 100644
View file @ ffbd5d40
import Tabs from './Layout/Tabs';
import SecondaryNavigation from './Layout/SecondaryNavigation';
import CustomizeCard from './Layout/Card';
import SimpleCommodityList from './Layout/Commodity/simple';
import CategoryList from './Layout/Category';
import Container from './Layout/Container';
import Product from './Layout/Commodity';
export default {
CustomizeTabs: Tabs,
SecondaryNavigation: SecondaryNavigation,
CustomizeCard: CustomizeCard,
SimpleCommodityList: SimpleCommodityList,
CategoryList: CategoryList,
Container: Container,
Product: Product,
};
src/pages/pageCustomized/categoryNavigation/index.less 0 → 100644
View file @ ffbd5d40
@content-height: calc(100vh - 120px);
.wrapper {
background: white;
display: flex;
flex-direction: column;
box-shadow: 2px 0 4px 0 rgba(174, 174, 174, 0.50);
transition: all .3s;
}
.content {
display: flex;
flex: 1;
flex-direction: row;
justify-content: center;
background-color: #F2F3F5;
height: calc(100vh - 64px);
.tree {
width: 335px;
background: #fff;
:global {
.ant-tabs-nav {
margin-bottom: 0px;
}
.ant-tabs-nav-wrap {
flex: 1;
width: 100%;
padding: 0 16px;
}
.ant-tabs-nav-list {
width: 100%;
}
.ant-tabs-tab {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
}
.module {
display: flex;
flex-direction: row;
flex-wrap: wrap;
.moduleItem {
flex-basis: 50%,
}
}
}
}
.app-wrapper {
display: flex;
flex: 1;
justify-content: center;
}
.app-canvas-container {
display: flex;
width: 381px;
margin-top: 40px;
margin-bottom: 52px;
justify-content: center;
background-color: #F4F5F7;
// height: calc(@content-height + 50px);
overflow: hidden;
}
src/pages/pageCustomized/categoryNavigation/index.tsx 0 → 100644
View file @ ffbd5d40
import React from 'react';
import { Spin, message } from 'antd';
import { BrickProvider, ModuleTree } from '@lingxi-disign/react';
import ToolbarSubmit from '@/pages/marketing/marketingActivitiesManagement/activePage/fixtures/components/Toolbar/toolbarSubmit';
import Toolbar from '@/pages/marketing/marketingActivitiesManagement/activePage/fixtures/components/Toolbar';
import MobileDesignPanel from '@/pages/marketing/marketingActivitiesManagement/activePage/fixtures/components/MobileDesignPanel';
import styles from './index.less';
import configs from './common/schema';
import useGetLayout from './common/hooks/useGetLayout';
const CategoryNavigation = () => {
useGetLayout();
const onSave = () => {};
return (
<Spin spinning={false}>
<BrickProvider
config={configs}
warn={(msg: string) => {
message.warning(msg);
}}
>
<div className={styles['wrapper']}>
<Toolbar title="正在编辑：平台营销活动页" extra={<ToolbarSubmit loading={false} onSubmit={onSave}>保存</ToolbarSubmit>} />
<div className={styles['content']}>
<div className={styles.tree}>
<ModuleTree />
</div>
<div className={styles['app-wrapper']}>
<div className={styles['app-canvas-container']}>
<MobileDesignPanel theme={'theme-mall-science'} onlyEidt />
</div>
</div>
</div>
</div>
</BrickProvider>
</Spin>
);
};
export default CategoryNavigation;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment