Skip to content

J
jinfa-admin
Commit 3ba1d67a authored by 许佳敏's avatar 许佳敏
Browse files
Options

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

V2 220418 feat menu See merge request linkseeks-design/pro-admin!36
parents 3422b69f 3138a3e9
Hide whitespace changes
Inline Side-by-side
Showing with 328 additions and 179 deletions
src/global.css
View file @ 3ba1d67a
......@@ -230,9 +230,9 @@ ol {
left: 0px;
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;
}
} */
#root .ant-menu-sub .ant-menu-item-selected .lx-menu-item-link::before {
border: 1px solid #00B37A;
}
......
src/global.less
View file @ 3ba1d67a
......@@ -288,9 +288,9 @@ ol {
}
}
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
background: none;
}
// .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
// background: none;
// }
.ant-menu-sub .ant-menu-item-selected .lx-menu-item-link::before {
// background: @main-color;
......
src/global/styles/reset.less
View file @ 3ba1d67a
@import './mixins/layout.less';
#root {
// 去除input type为number时的箭头
.ant-input-number-handler-wrap {
display: none;
}
.ant-pro-global-footer {
margin: 8px auto 32px auto;
}
.ant-page-header {
padding: 8px 24px;
}
.common_checkbox {
&:hover,
&:active,
&:focus {
.ant-checkbox-inner {
border-color: var(--mall_main_color);
}
}
.ant-checkbox-group-item {
display: block;
margin-bottom: 12px;
}
.ant-checkbox {
&:hover,
&:active,
&:focus {
.ant-checkbox-inner {
border-color: var(--mall_main_color);
}
}
}
.ant-checkbox .ant-checkbox-indeterminate {
&:hover {
border-color: var(--mall_main_color);
}
}
.ant-checkbox-indeterminate.ant-checkbox-checked .ant-checkbox-inner {
background-color: transparent;
}
.ant-checkbox-indeterminate .ant-checkbox-inner {
&:hover,
&:active,
&:focus {
border-color: var(--mall_main_color);
}
&::after {
background-color: var(--mall_main_color);
border-color: var(--mall_main_color);
}
}
.ant-checkbox-checked .ant-checkbox-inner {
background-color: var(--mall_main_color);
border-color: var(--mall_main_color);
}
}
// 去除数字输入框的箭头
input[type=number] {
-moz-appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.ant-pro-global-footer {
margin: 8px auto 32px auto;
}
.identityRadio{
display: flex;
flex-direction: column;
margin: 0 auto;
.make-center(text);
& label{
width: 320px;
height: 48px;
.make-center-space(margin, 12);
vertical-align: middle;
line-height: 48px;
}
}
.businessRadio{
display: flex;
flex-wrap: wrap;
width: 320px;
.make-center(margin);
.make-center(text);
& label{
width: 148px;
height: 32px;
line-height: 32px;
margin: 8px 0;
}
& label:nth-child(odd) {
margin-right: 24px;
}
}
// 处理PageHeaderWrapper外边距冲突
.ant-pro-basicLayout-content .ant-pro-page-header-wrap {
margin: 0;
}
// 处理因为antd版本不同导致anchor的背景色不同
.ant-anchor-wrapper{
background-color: #fff;
}
}
.ant-descriptions-item-label {
color: #909399 !important;
}
.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;
}
\ No newline at end of file
@import './mixins/layout.less';
#root {
// 去除input type为number时的箭头
.ant-input-number-handler-wrap {
display: none;
}
.ant-pro-global-footer {
margin: 8px auto 32px auto;
}
.ant-page-header {
padding: 8px 24px;
}
.common_checkbox {
&:hover,
&:active,
&:focus {
.ant-checkbox-inner {
border-color: var(--mall_main_color);
}
}
.ant-checkbox-group-item {
display: block;
margin-bottom: 12px;
}
.ant-checkbox {
&:hover,
&:active,
&:focus {
.ant-checkbox-inner {
border-color: var(--mall_main_color);
}
}
}
.ant-checkbox .ant-checkbox-indeterminate {
&:hover {
border-color: var(--mall_main_color);
}
}
.ant-checkbox-indeterminate.ant-checkbox-checked .ant-checkbox-inner {
background-color: transparent;
}
.ant-checkbox-indeterminate .ant-checkbox-inner {
&:hover,
&:active,
&:focus {
border-color: var(--mall_main_color);
}
&::after {
background-color: var(--mall_main_color);
border-color: var(--mall_main_color);
}
}
.ant-checkbox-checked .ant-checkbox-inner {
background-color: var(--mall_main_color);
border-color: var(--mall_main_color);
}
}
// 去除数字输入框的箭头
input[type=number] {
-moz-appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.ant-pro-global-footer {
margin: 8px auto 32px auto;
}
.identityRadio{
display: flex;
flex-direction: column;
margin: 0 auto;
.make-center(text);
& label{
width: 320px;
height: 48px;
.make-center-space(margin, 12);
vertical-align: middle;
line-height: 48px;
}
}
.businessRadio{
display: flex;
flex-wrap: wrap;
width: 320px;
.make-center(margin);
.make-center(text);
& label{
width: 148px;
height: 32px;
line-height: 32px;
margin: 8px 0;
}
& label:nth-child(odd) {
margin-right: 24px;
}
}
// 处理PageHeaderWrapper外边距冲突
.ant-pro-basicLayout-content .ant-pro-page-header-wrap {
margin: 0;
}
// 处理因为antd版本不同导致anchor的背景色不同
.ant-anchor-wrapper{
background-color: #fff;
}
// 覆写左边菜单
.ant-menu-item {
padding-left: 8px !important;
padding-right: 8px !important;
}
.ant-menu-submenu-title {
padding-left: 8px !important;
padding-right: 8px !important;
}
.anticon-border {
margin-right: 8px;
}
}
.ant-descriptions-item-label {
color: #909399 !important;
}
.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 @ 3ba1d67a
......@@ -22,6 +22,7 @@
@menu-select-color : rgba(0, 0, 0, 0.85);
@menu-select-bg : rgba(0, 0, 0, .02);
@menu-circle-color : #D8DEE4;
@menu-select-bg-color : rgba(0,169,143,0.04);
// status circle color
@status-stop : #C1C7D0; // 停用
......
src/layouts/components/MenuSlider.tsx
View file @ 3ba1d67a
......@@ -4,6 +4,8 @@ import { Layout, Menu } from 'antd'
import { Link, history } from 'umi';
import {
BorderOutlined,
DownOutlined,
RightOutlined,
} from '@ant-design/icons'
import OuterSider from './OuterSide'
import styles from '../styles/MenuSlider.less'
......@@ -90,9 +92,17 @@ const MenuSlider: React.FC<MenuSliderProps> = (props) => {
sessionStorage.setItem("currentState", JSON.stringify(result))
}
const customExpandIcon = (props) => {
if (props.isOpen) {
return <DownOutlined />
} else {
return <RightOutlined />
}
}
return <>
<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}>
<img src={menuIcon} />
</Link>
......@@ -106,6 +116,7 @@ const MenuSlider: React.FC<MenuSliderProps> = (props) => {
openKeys={openKeys}
mode="inline"
onClick={clickMenuItem}
expandIcon={customExpandIcon}
>
{
menuItemsCache
......
src/layouts/components/OuterSide.tsx
View file @ 3ba1d67a
......@@ -70,7 +70,7 @@ const OuterSider: React.FC<OuterSiderProps> = observer((props) => {
siderMenu.map(item => (
<li key={item.key} className={defaultSelectedKeys === item.relationParentCode ? styles.currentItem : ''}>
<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>
</Link>
</li>
......
src/layouts/styles/MenuSlider.less
View file @ 3ba1d67a
@import '../../global/styles/theme.less';
.logo {
background: rgba(255, 255, 255, 1);
height: 48px;
......@@ -27,7 +28,78 @@
.menu_sider {
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 @@
}
.wrapperSilder {
background-color: #FAFBFC !important;
background-color: #fff !important;
min-height: 100vh;
.menuBox {
......@@ -75,7 +147,24 @@
position: relative;
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 {
......@@ -85,6 +174,7 @@
font-size: 12px;
font-weight: 400;
color: rgba(151, 160, 175, 1);
cursor: pointer;
}
span {
......@@ -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 {
&: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;
}
span {
color: #00A98F !important;
}
a{
background: @menu-select-bg-color;
}
span {
color: #00A98F !important;
}
label {
color: #00A98F !important;
label {
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 {
padding-left: 30px !important;
}
......
src/pages/pageCustomized/templateDetail/index.tsx
View file @ 3ba1d67a
......@@ -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}`} >
<LayoutOutlined />
<label>品类导航装修</label>
......
src/pages/productManage/classAndProperty/class/index.tsx
View file @ 3ba1d67a
import React from 'react'
import React, { useState } from 'react'
import { Row, Col, Popconfirm, Button, Card } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import TabTree, { createTreeActions } from '@/components/TabTree';
......@@ -49,22 +49,26 @@ const ClassProperty: React.FC<{}> = () => {
fetchItemDetailData: getProductPlatformGetCategory
})
const [loading, setLoading] = useState<boolean>(false)
const formInitValue = (nodeRecord && treeStatus === FormState.EDIT) ? getTreeMaps(nodeRecord.key) : {}
const onFinish = (values) => {
setLoading(true)
const editOrAdd = nodeRecord && treeStatus === FormState.EDIT
const params = editOrAdd ? { ...values, parentId: nodeRecord.parentId } : {
...values,
parentId: nodeRecord ? nodeRecord.parentId : 0,
id: null,
}
postProductPlatformSaveOrUpdateCategory(params).then(res => {
postProductPlatformSaveOrUpdateCategory(params).then(() => {
resetMenu()
setTreeStatus(FormState.FREE)
setNodeRecord(undefined)
// 保存后要将是否填写过表单设为false
setIsEditForm(false)
flag = false
setLoading(false)
})
}
......@@ -122,7 +126,7 @@ const ClassProperty: React.FC<{}> = () => {
schema={classSchema}
>
<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>
<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