Skip to content

J
jinfa-admin
Commit 3138a3e9 authored by 卢均锐's avatar 卢均锐
Browse files
Options

Merge branch 'v2-featMenu' into v2-220418-featMenu

* v2-featMenu: fix: 处理品类多次请求的问题 fix: 调整导航交互样式 feat: 导航菜单交互样式优化 -修改路径 feat: 导航菜单交互样式优化 feat: 添加h5品类导航页 fix: 内容管理富文本上传，xmlHttpRequest 改为fetch 请求方式 fix: 修改内容管理富文本图片上传，不使用base64的方式。改为上传到oss上
parents 3422b69f c0bdb5d1
Hide whitespace changes
Inline Side-by-side
Showing with 328 additions and 179 deletions
src/global.css
View file @ 3138a3e9
...@@ -230,9 +230,9 @@ ol { ...@@ -230,9 +230,9 @@ ol {
left: 0px; left: 0px;
margin: auto 0; margin: auto 0;
} }
#root .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected { /* #root .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
background: none; background: none;
} } */
#root .ant-menu-sub .ant-menu-item-selected .lx-menu-item-link::before { #root .ant-menu-sub .ant-menu-item-selected .lx-menu-item-link::before {
border: 1px solid #00B37A; border: 1px solid #00B37A;
} }
......
src/global.less
View file @ 3138a3e9
...@@ -288,9 +288,9 @@ ol { ...@@ -288,9 +288,9 @@ ol {
} }
} }
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected { // .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
background: none; // background: none;
} // }
.ant-menu-sub .ant-menu-item-selected .lx-menu-item-link::before { .ant-menu-sub .ant-menu-item-selected .lx-menu-item-link::before {
// background: @main-color; // background: @main-color;
......
src/global/styles/reset.less
View file @ 3138a3e9
@import './mixins/layout.less'; @import './mixins/layout.less';
#root { #root {
// 去除input type为number时的箭头 // 去除input type为number时的箭头
.ant-input-number-handler-wrap { .ant-input-number-handler-wrap {
display: none; display: none;
} }
.ant-pro-global-footer { .ant-pro-global-footer {
margin: 8px auto 32px auto; margin: 8px auto 32px auto;
} }
.ant-page-header { .ant-page-header {
padding: 8px 24px; padding: 8px 24px;
} }
.common_checkbox { .common_checkbox {
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
.ant-checkbox-inner { .ant-checkbox-inner {
border-color: var(--mall_main_color); border-color: var(--mall_main_color);
} }
} }
.ant-checkbox-group-item { .ant-checkbox-group-item {
display: block; display: block;
margin-bottom: 12px; margin-bottom: 12px;
} }
.ant-checkbox { .ant-checkbox {
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
.ant-checkbox-inner { .ant-checkbox-inner {
border-color: var(--mall_main_color); border-color: var(--mall_main_color);
} }
} }
} }
.ant-checkbox .ant-checkbox-indeterminate { .ant-checkbox .ant-checkbox-indeterminate {
&:hover { &:hover {
border-color: var(--mall_main_color); border-color: var(--mall_main_color);
} }
} }
.ant-checkbox-indeterminate.ant-checkbox-checked .ant-checkbox-inner { .ant-checkbox-indeterminate.ant-checkbox-checked .ant-checkbox-inner {
background-color: transparent; background-color: transparent;
} }
.ant-checkbox-indeterminate .ant-checkbox-inner { .ant-checkbox-indeterminate .ant-checkbox-inner {
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
border-color: var(--mall_main_color); border-color: var(--mall_main_color);
} }
&::after { &::after {
background-color: var(--mall_main_color); background-color: var(--mall_main_color);
border-color: var(--mall_main_color); border-color: var(--mall_main_color);
} }
} }
.ant-checkbox-checked .ant-checkbox-inner { .ant-checkbox-checked .ant-checkbox-inner {
background-color: var(--mall_main_color); background-color: var(--mall_main_color);
border-color: var(--mall_main_color); border-color: var(--mall_main_color);
} }
} }
// 去除数字输入框的箭头 // 去除数字输入框的箭头
input[type=number] { input[type=number] {
-moz-appearance: textfield; -moz-appearance: textfield;
} }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none; -webkit-appearance: none;
margin: 0; margin: 0;
} }
.ant-pro-global-footer { .ant-pro-global-footer {
margin: 8px auto 32px auto; margin: 8px auto 32px auto;
} }
.identityRadio{ .identityRadio{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 0 auto; margin: 0 auto;
.make-center(text); .make-center(text);
& label{ & label{
width: 320px; width: 320px;
height: 48px; height: 48px;
.make-center-space(margin, 12); .make-center-space(margin, 12);
vertical-align: middle; vertical-align: middle;
line-height: 48px; line-height: 48px;
} }
} }
.businessRadio{ .businessRadio{
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
width: 320px; width: 320px;
.make-center(margin); .make-center(margin);
.make-center(text); .make-center(text);
& label{ & label{
width: 148px; width: 148px;
height: 32px; height: 32px;
line-height: 32px; line-height: 32px;
margin: 8px 0; margin: 8px 0;
} }
& label:nth-child(odd) { & label:nth-child(odd) {
margin-right: 24px; margin-right: 24px;
} }
} }
// 处理PageHeaderWrapper外边距冲突 // 处理PageHeaderWrapper外边距冲突
.ant-pro-basicLayout-content .ant-pro-page-header-wrap { .ant-pro-basicLayout-content .ant-pro-page-header-wrap {
margin: 0; margin: 0;
} }
// 处理因为antd版本不同导致anchor的背景色不同 // 处理因为antd版本不同导致anchor的背景色不同
.ant-anchor-wrapper{ .ant-anchor-wrapper{
background-color: #fff; background-color: #fff;
} }
}
// 覆写左边菜单
.ant-descriptions-item-label { .ant-menu-item {
color: #909399 !important; padding-left: 8px !important;
} padding-right: 8px !important;
}
.mega-layout-container-content { .ant-menu-submenu-title {
overflow: hidden; padding-left: 8px !important;
} padding-right: 8px !important;
}
.ant-form-item-label > label { .anticon-border {
font-size: 12px !important; margin-right: 8px;
color: #909399 !important; }
} }
// 隐藏表格头 td 的 竖线 .ant-descriptions-item-label {
.ant-table-thead > tr > th::before { color: #909399 !important;
display: none; }
}
\ No newline at end of file .mega-layout-container-content {
overflow: hidden;
}
.ant-form-item-label > label {
font-size: 12px !important;
color: #909399 !important;
}
// 隐藏表格头 td 的 竖线
.ant-table-thead > tr > th::before {
display: none;
}
src/global/styles/theme.less
View file @ 3138a3e9
...@@ -22,6 +22,7 @@ ...@@ -22,6 +22,7 @@
@menu-select-color : rgba(0, 0, 0, 0.85); @menu-select-color : rgba(0, 0, 0, 0.85);
@menu-select-bg : rgba(0, 0, 0, .02); @menu-select-bg : rgba(0, 0, 0, .02);
@menu-circle-color : #D8DEE4; @menu-circle-color : #D8DEE4;
@menu-select-bg-color : rgba(0,169,143,0.04);
// status circle color // status circle color
@status-stop : #C1C7D0; // 停用 @status-stop : #C1C7D0; // 停用
......
src/layouts/components/MenuSlider.tsx
View file @ 3138a3e9
...@@ -4,6 +4,8 @@ import { Layout, Menu } from 'antd' ...@@ -4,6 +4,8 @@ import { Layout, Menu } from 'antd'
import { Link, history } from 'umi'; import { Link, history } from 'umi';
import { import {
BorderOutlined, BorderOutlined,
DownOutlined,
RightOutlined,
} from '@ant-design/icons' } from '@ant-design/icons'
import OuterSider from './OuterSide' import OuterSider from './OuterSide'
import styles from '../styles/MenuSlider.less' import styles from '../styles/MenuSlider.less'
...@@ -90,9 +92,17 @@ const MenuSlider: React.FC<MenuSliderProps> = (props) => { ...@@ -90,9 +92,17 @@ const MenuSlider: React.FC<MenuSliderProps> = (props) => {
sessionStorage.setItem("currentState", JSON.stringify(result)) sessionStorage.setItem("currentState", JSON.stringify(result))
} }
const customExpandIcon = (props) => {
if (props.isOpen) {
return <DownOutlined />
} else {
return <RightOutlined />
}
}
return <> return <>
<OuterSider {...props} /> <OuterSider {...props} />
<Sider theme="light" className="menu_sider" collapsed={props.collapseState}> <Sider theme="light" className={styles.menu_sider} collapsed={props.collapseState}>
<Link to={`/`} className={styles.logo}> <Link to={`/`} className={styles.logo}>
<img src={menuIcon} /> <img src={menuIcon} />
</Link> </Link>
...@@ -106,6 +116,7 @@ const MenuSlider: React.FC<MenuSliderProps> = (props) => { ...@@ -106,6 +116,7 @@ const MenuSlider: React.FC<MenuSliderProps> = (props) => {
openKeys={openKeys} openKeys={openKeys}
mode="inline" mode="inline"
onClick={clickMenuItem} onClick={clickMenuItem}
expandIcon={customExpandIcon}
> >
{ {
menuItemsCache menuItemsCache
......
src/layouts/components/OuterSide.tsx
View file @ 3138a3e9
...@@ -70,7 +70,7 @@ const OuterSider: React.FC<OuterSiderProps> = observer((props) => { ...@@ -70,7 +70,7 @@ const OuterSider: React.FC<OuterSiderProps> = observer((props) => {
siderMenu.map(item => ( siderMenu.map(item => (
<li key={item.key} className={defaultSelectedKeys === item.relationParentCode ? styles.currentItem : ''}> <li key={item.key} className={defaultSelectedKeys === item.relationParentCode ? styles.currentItem : ''}>
<Link to={item.path}> <Link to={item.path}>
<CustomIcon type={item.icon} style={{ width: 20, height: 20 }} /> <CustomIcon type={item.icon} style={{ width: 16, height: 16 }} />
<label>{item.title}</label> <label>{item.title}</label>
</Link> </Link>
</li> </li>
......
src/layouts/styles/MenuSlider.less
View file @ 3138a3e9
@import '../../global/styles/theme.less';
.logo { .logo {
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
height: 48px; height: 48px;
...@@ -27,7 +28,78 @@ ...@@ -27,7 +28,78 @@
.menu_sider { .menu_sider {
position: relative; position: relative;
:global {
.ant-menu-root{
padding: 0 8px;
}
.ant-menu-sub {
background: #fff;
}
.ant-menu-submenu{
.ant-menu-submenu-title{
.anticon-right{
color: #91959B;
}
}
}
.ant-menu-submenu-open{
.ant-menu-submenu-title{
color: #252D37;
background: #EDEEEF;
border-radius: 4px;
}
.ant-menu-submenu-arrow{
color: #252D37;
}
}
.ant-menu-submenu-active,.ant-menu-submenu-selected{
.ant-menu-submenu-title{
background: #F5F6F7;
color: #252D37;
border-radius: 4px;
}
.ant-menu-submenu-arrow{
color: #252D37;
}
}
.ant-menu-inline .ant-menu-item-selected::after {
opacity: 0;
}
.ant-menu-item {
.anticon-border{
color: #91959B;
}
}
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-active {
background: #F5F6F7;
color: #252D37;
border-radius: 4px;
.anticon-border{
color: #252D37;
}
a {
color: #252D37;
}
}
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
background: @menu-select-bg-color;
color: #00A98F;
border-radius: 4px;
.anticon-border{
color: #00A98F;
}
a {
color: #00A98F;
}
}
}
} }
...@@ -62,7 +134,7 @@ ...@@ -62,7 +134,7 @@
} }
.wrapperSilder { .wrapperSilder {
background-color: #FAFBFC !important; background-color: #fff !important;
min-height: 100vh; min-height: 100vh;
.menuBox { .menuBox {
...@@ -75,7 +147,24 @@ ...@@ -75,7 +147,24 @@
position: relative; position: relative;
a { a {
display: block; display: flex;
flex-direction: column;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 8px;
background: #FFFFFF;
margin: 0 auto;
&:hover{
background: #F5F6F7;
span {
color: #252D37 !important;
}
label {
color: #252D37 !important;
}
}
} }
label { label {
...@@ -85,6 +174,7 @@ ...@@ -85,6 +174,7 @@
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
color: rgba(151, 160, 175, 1); color: rgba(151, 160, 175, 1);
cursor: pointer;
} }
span { span {
...@@ -97,29 +187,60 @@ ...@@ -97,29 +187,60 @@
} }
} }
} .currentItem {
} &:not(:first-child)::after {
position: absolute;
content: "";
right: 0;
top: 50%;
transform: translate(0, -50%);
border-right: 8px solid #fff;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
.currentItem { a{
&:not(:first-child)::after { background: @menu-select-bg-color;
position: absolute; }
content: "";
right: 0; span {
top: 50%; color: #00A98F !important;
transform: translate(0, -50%); }
border-right: 8px solid #fff;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
span {
color: #00A98F !important;
}
label { label {
color: #00A98F !important; color: #00A98F !important;
}
}
} }
} }
// .currentItem {
// &:not(:first-child)::after {
// position: absolute;
// content: "";
// right: 0;
// top: 50%;
// transform: translate(0, -50%);
// border-right: 8px solid #fff;
// border-top: 8px solid transparent;
// border-bottom: 8px solid transparent;
// }
// li {
// a{
// background: @menu-select-bg-color;
// }
// }
// span {
// color: #00A98F !important;
// }
// label {
// color: #00A98F !important;
// }
// }
.menuItem { .menuItem {
padding-left: 30px !important; padding-left: 30px !important;
} }
......
src/pages/pageCustomized/templateDetail/index.tsx
View file @ 3138a3e9
...@@ -227,7 +227,7 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => { ...@@ -227,7 +227,7 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => {
) )
} }
{ {
(type === TEMPLATE_TYPE_TEXT.mall && (detailInfo?.environment === 4 || detailInfo?.environment === 3)) && ( (type === TEMPLATE_TYPE_TEXT.mall && ([2, 3, 4].includes(detailInfo?.environment!))) && (
<div className={cx(styles.btn, styles.renovation)} onClick={() => window.location.href = `/pageCustomized/mobile/template/category?id=${id}&template=${detailInfo?.fileName}&environment=${detailInfo?.environment}&shopId=${detailInfo?.shopId}`} > <div className={cx(styles.btn, styles.renovation)} onClick={() => window.location.href = `/pageCustomized/mobile/template/category?id=${id}&template=${detailInfo?.fileName}&environment=${detailInfo?.environment}&shopId=${detailInfo?.shopId}`} >
<LayoutOutlined /> <LayoutOutlined />
<label>品类导航装修</label> <label>品类导航装修</label>
......
src/pages/productManage/classAndProperty/class/index.tsx
View file @ 3138a3e9
import React from 'react' import React, { useState } from 'react'
import { Row, Col, Popconfirm, Button, Card } from 'antd'; import { Row, Col, Popconfirm, Button, Card } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout'; import { PageHeaderWrapper } from '@ant-design/pro-layout';
import TabTree, { createTreeActions } from '@/components/TabTree'; import TabTree, { createTreeActions } from '@/components/TabTree';
...@@ -49,22 +49,26 @@ const ClassProperty: React.FC<{}> = () => { ...@@ -49,22 +49,26 @@ const ClassProperty: React.FC<{}> = () => {
fetchItemDetailData: getProductPlatformGetCategory fetchItemDetailData: getProductPlatformGetCategory
}) })
const [loading, setLoading] = useState<boolean>(false)
const formInitValue = (nodeRecord && treeStatus === FormState.EDIT) ? getTreeMaps(nodeRecord.key) : {} const formInitValue = (nodeRecord && treeStatus === FormState.EDIT) ? getTreeMaps(nodeRecord.key) : {}
const onFinish = (values) => { const onFinish = (values) => {
setLoading(true)
const editOrAdd = nodeRecord && treeStatus === FormState.EDIT const editOrAdd = nodeRecord && treeStatus === FormState.EDIT
const params = editOrAdd ? { ...values, parentId: nodeRecord.parentId } : { const params = editOrAdd ? { ...values, parentId: nodeRecord.parentId } : {
...values, ...values,
parentId: nodeRecord ? nodeRecord.parentId : 0, parentId: nodeRecord ? nodeRecord.parentId : 0,
id: null, id: null,
} }
postProductPlatformSaveOrUpdateCategory(params).then(res => { postProductPlatformSaveOrUpdateCategory(params).then(() => {
resetMenu() resetMenu()
setTreeStatus(FormState.FREE) setTreeStatus(FormState.FREE)
setNodeRecord(undefined) setNodeRecord(undefined)
// 保存后要将是否填写过表单设为false // 保存后要将是否填写过表单设为false
setIsEditForm(false) setIsEditForm(false)
flag = false flag = false
setLoading(false)
}) })
} }
...@@ -122,7 +126,7 @@ const ClassProperty: React.FC<{}> = () => { ...@@ -122,7 +126,7 @@ const ClassProperty: React.FC<{}> = () => {
schema={classSchema} schema={classSchema}
> >
<FormButtonGroup> <FormButtonGroup>
<Button htmlType='submit' type="primary" style={{ marginTop: 32, marginBottom: 16, marginRight: 24}}> <Button htmlType='submit' type="primary" loading={loading} style={{ marginTop: 32, marginBottom: 16, marginRight: 24}}>
保存 保存
</Button> </Button>
<Popconfirm title="确定要删除吗？" okText="是" cancelText="否" onConfirm={handleDeleteMenu}> <Popconfirm title="确定要删除吗？" okText="是" cancelText="否" onConfirm={handleDeleteMenu}>
......
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