Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
钟摆人-Puppet゜
ant-design-pro
提交
680c0c3d
A
ant-design-pro
项目概览
钟摆人-Puppet゜
/
ant-design-pro
与 Fork 源项目一致
从无法访问的项目Fork
通知
2
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
A
ant-design-pro
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
680c0c3d
编写于
5月 02, 2018
作者:
J
jim
提交者:
陈帅
5月 18, 2018
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Optimization parameter logic
上级
56ce1efa
变更
8
隐藏空白更改
内联
并排
Showing
8 changed file
with
98 addition
and
142 deletion
+98
-142
src/components/Charts/WaterWave/index.js
src/components/Charts/WaterWave/index.js
+7
-5
src/components/Sidebar/LayoutSetting.js
src/components/Sidebar/LayoutSetting.js
+4
-25
src/components/Sidebar/index.js
src/components/Sidebar/index.js
+34
-69
src/components/Sidebar/index.less
src/components/Sidebar/index.less
+14
-0
src/layouts/BasicLayout.js
src/layouts/BasicLayout.js
+1
-9
src/layouts/Header.js
src/layouts/Header.js
+3
-5
src/layouts/LoadingPage.js
src/layouts/LoadingPage.js
+4
-17
src/models/setting.js
src/models/setting.js
+31
-12
未找到文件。
src/components/Charts/WaterWave/index.js
浏览文件 @
680c0c3d
...
...
@@ -30,11 +30,13 @@ export default class WaterWave extends PureComponent {
resize
=
()
=>
{
requestAnimationFrame
(()
=>
{
const
{
height
}
=
this
.
props
;
const
{
offsetWidth
}
=
this
.
root
.
parentNode
;
this
.
setState
({
radio
:
offsetWidth
<
height
?
offsetWidth
/
height
:
1
,
});
if
(
this
.
root
)
{
const
{
height
}
=
this
.
props
;
const
{
offsetWidth
}
=
this
.
root
.
parentNode
;
this
.
setState
({
radio
:
offsetWidth
<
height
?
offsetWidth
/
height
:
1
,
});
}
});
};
...
...
src/components/Sidebar/LayoutSetting.js
浏览文件 @
680c0c3d
import
{
Tooltip
}
from
'
antd
'
;
import
React
from
'
react
'
;
import
NavSate
from
'
./navState
'
;
import
style
from
'
./index.less
'
;
const
LayoutSetting
=
({
value
,
onChange
})
=>
{
return
(
<
div
style
=
{{
margin
:
5
,
display
:
'
flex
'
,
}}
>
<
div
className
=
{
style
.
layoutSetting
}
>
{[
'
sidemenu
'
,
'
topmenu
'
].
map
(
layout
=>
(
<
div
onClick
=
{()
=>
onChange
&&
onChange
(
layout
)}
key
=
{
layout
}
style
=
{{
width
:
70
,
height
:
44
,
textAlign
:
'
center
'
,
margin
:
8
,
}}
>
<
div
className
=
{
style
.
item
}
onClick
=
{()
=>
onChange
&&
onChange
(
layout
)}
key
=
{
layout
}
>
<
NavSate
type
=
{
layout
}
state
=
{
value
===
layout
?
'
active
'
:
'
default
'
}
alt
=
{
layout
}
/
>
<
/div
>
))}
<
Tooltip
title
=
"
等待后期实现!
"
>
<
div
key
=
"
topside
"
style
=
{{
width
:
70
,
height
:
44
,
textAlign
:
'
center
'
,
margin
:
8
,
}}
>
<
div
key
=
"
topside
"
className
=
{
style
.
item
}
>
<
NavSate
type
=
"
topside
"
state
=
"
disable
"
alt
=
"
topside
"
/>
<
/div
>
<
/Tooltip
>
...
...
src/components/Sidebar/index.js
浏览文件 @
680c0c3d
import
React
,
{
PureComponent
,
Fragment
}
from
'
react
'
;
import
{
Select
,
message
,
List
,
Switch
,
Divider
,
Radio
}
from
'
antd
'
;
import
DrawerMenu
from
'
rc-drawer-menu
'
;
import
{
connect
}
from
'
dva
'
;
import
styles
from
'
./index.less
'
;
import
ThemeColor
from
'
./ThemeColor
'
;
import
LayoutSeting
from
'
./LayoutSetting
'
;
...
...
@@ -30,45 +31,23 @@ const Body = ({ children, title, style }) => (
{
children
}
<
/div
>
);
@
connect
(({
setting
})
=>
({
setting
}))
class
Sidebar
extends
PureComponent
{
static
getDerivedStateFromProps
(
nextProps
,
prevState
)
{
const
nextState
=
{};
Object
.
keys
(
nextProps
).
forEach
(
key
=>
{
if
(
nextProps
[
key
]
&&
prevState
[
key
]
!==
undefined
)
{
nextState
[
key
]
=
nextProps
[
key
];
}
});
return
nextState
;
}
constructor
(
props
)
{
super
(
props
);
this
.
defaultstate
=
{
collapse
:
false
,
silderTheme
:
'
dark
'
,
themeColor
:
'
#1890FF
'
,
layout
:
'
sidemenu
'
,
grid
:
'
Fluid
'
,
fixedHeader
:
false
,
autoHideHeader
:
false
,
fixSiderbar
:
false
,
colorWeak
:
'
close
'
,
};
const
propsState
=
this
.
propsToState
(
props
);
this
.
state
=
{
...
this
.
defaultstate
,
...
propsState
};
}
componentDidMount
()
{
this
.
colorChange
(
this
.
state
.
themeColor
);
const
{
themeColor
}
=
this
.
props
.
setting
;
if
(
themeColor
!==
'
#1890FF
'
)
{
this
.
colorChange
(
themeColor
);
}
}
getLayOutSetting
=
()
=>
{
const
{
layout
}
=
this
.
state
;
const
{
grid
,
fixedHeader
,
autoHideHeader
,
fixSiderbar
,
layout
}
=
this
.
props
.
setting
;
return
[
{
title
:
'
栅格模式
'
,
isShow
:
true
,
action
:
[
<
Select
value
=
{
this
.
state
.
grid
}
value
=
{
grid
}
onSelect
=
{
value
=>
this
.
changeSetting
(
'
grid
'
,
value
)}
style
=
{{
width
:
120
}}
>
...
...
@@ -82,7 +61,7 @@ class Sidebar extends PureComponent {
isShow
:
true
,
action
:
[
<
Switch
checked
=
{
!!
this
.
state
.
fixedHeader
}
checked
=
{
!!
fixedHeader
}
onChange
=
{
checked
=>
this
.
changeSetting
(
'
fixedHeader
'
,
checked
)}
/>
,
],
...
...
@@ -92,7 +71,7 @@ class Sidebar extends PureComponent {
isShow
:
true
,
action
:
[
<
Switch
checked
=
{
!!
this
.
state
.
autoHideHeader
}
checked
=
{
!!
autoHideHeader
}
onChange
=
{
checked
=>
this
.
changeSetting
(
'
autoHideHeader
'
,
checked
)}
/>
,
],
...
...
@@ -100,7 +79,7 @@ class Sidebar extends PureComponent {
{
title
:
'
Fix Siderbar
'
,
isShow
:
layout
===
'
sidemenu
'
,
action
:
[
<
Switch
checked
=
{
!!
this
.
state
.
fixSiderbar
}
onChange
=
{
this
.
fixSiderbar
}
/>]
,
action
:
[
<
Switch
checked
=
{
!!
fixSiderbar
}
onChange
=
{
this
.
fixSiderbar
}
/>]
,
},
].
filter
(
item
=>
item
.
isShow
);
};
...
...
@@ -118,48 +97,34 @@ class Sidebar extends PureComponent {
}
}
this
.
setState
(
nextState
,
()
=>
{
if
(
this
.
props
.
onChange
)
{
this
.
props
.
onChange
(
this
.
state
);
}
this
.
props
.
dispatch
({
type
:
'
setting/changeSetting
'
,
payload
:
this
.
state
,
});
});
};
propsToState
=
props
=>
{
const
nextState
=
{};
Object
.
keys
(
props
).
forEach
(
key
=>
{
if
(
props
[
key
]
&&
this
.
defaultstate
[
key
]
!==
undefined
)
{
nextState
[
key
]
=
props
[
key
];
}
});
return
nextState
;
};
togglerContent
=
()
=>
{
this
.
changeSetting
(
'
collapse
'
,
!
this
.
state
.
collapse
);
this
.
changeSetting
(
'
collapse
'
,
!
this
.
props
.
setting
.
collapse
);
};
colorChange
=
color
=>
{
this
.
changeSetting
(
'
themeColor
'
,
color
);
this
.
setState
(
{
themeColor
:
color
,
},
()
=>
{
const
hideMessage
=
message
.
loading
(
'
正在编译主题!
'
,
0
);
window
.
less
.
modifyVars
({
'
@primary-color
'
:
color
,
})
.
then
(()
=>
{
hideMessage
();
})
.
catch
(()
=>
{
message
.
error
(
`Failed to update theme`
);
});
}
);
const
hideMessage
=
message
.
loading
(
'
正在编译主题!
'
,
0
);
window
.
less
.
modifyVars
({
'
@primary-color
'
:
color
,
})
.
then
(()
=>
{
hideMessage
();
})
.
catch
(()
=>
{
message
.
error
(
`Failed to update theme`
);
});
};
render
()
{
const
radioStyle
=
{
display
:
'
block
'
,
};
const
{
collapse
,
silderTheme
,
themeColor
,
layout
,
colorWeak
}
=
this
.
props
.
setting
;
return
(
<
div
className
=
{
styles
.
sidebar
}
>
<
div
className
=
{
styles
.
mini_bar
}
onClick
=
{
this
.
togglerContent
}
>
...
...
@@ -172,7 +137,7 @@ class Sidebar extends PureComponent {
parent
=
{
null
}
level
=
{
null
}
iconChild
=
{
null
}
open
=
{
this
.
state
.
collapse
}
open
=
{
collapse
}
placement
=
"
right
"
width
=
"
336px
"
onMaskClick
=
{
this
.
togglerContent
}
...
...
@@ -186,7 +151,7 @@ class Sidebar extends PureComponent {
>
<
RadioGroup
onChange
=
{({
target
})
=>
this
.
changeSetting
(
'
silderTheme
'
,
target
.
value
)}
value
=
{
this
.
state
.
silderTheme
}
value
=
{
silderTheme
}
>
<
Radio
style
=
{
radioStyle
}
value
=
"
dark
"
>
<
ColorBlock
color
=
"
#002140
"
title
=
"
深色导航
"
/>
...
...
@@ -195,13 +160,13 @@ class Sidebar extends PureComponent {
<
ColorBlock
color
=
"
#E9E9E9
"
title
=
"
浅色导航
"
/>
<
/Radio
>
<
/RadioGroup
>
<
ThemeColor
value
=
{
th
is
.
state
.
th
emeColor
}
onChange
=
{
this
.
colorChange
}
/
>
<
ThemeColor
value
=
{
themeColor
}
onChange
=
{
this
.
colorChange
}
/
>
<
/Body
>
<
Divider
style
=
{{
margin
:
0
}}
/
>
<
Body
title
=
"
导航设置
"
>
<
LayoutSeting
value
=
{
this
.
state
.
layout
}
onChange
=
{
layout
=>
this
.
changeSetting
(
'
layout
'
,
layout
)}
value
=
{
layout
}
onChange
=
{
value
=>
this
.
changeSetting
(
'
layout
'
,
value
)}
/
>
<
List
split
=
{
false
}
...
...
@@ -218,7 +183,7 @@ class Sidebar extends PureComponent {
title
:
'
色弱模式
'
,
action
:
[
<
Select
value
=
{
this
.
state
.
colorWeak
}
value
=
{
colorWeak
}
onSelect
=
{
value
=>
this
.
changeSetting
(
'
colorWeak
'
,
value
)}
style
=
{{
width
:
120
}}
>
...
...
src/components/Sidebar/index.less
浏览文件 @
680c0c3d
...
...
@@ -10,6 +10,8 @@
position: fixed;
bottom: 50px;
right: 50px;
cursor: pointer;
z-index: 99;
box-shadow: 0 0 6px 0 rgba(0, 21, 41, 0.35);
img {
width: 28px;
...
...
@@ -37,6 +39,18 @@
}
}
}
.layoutSetting {
margin: 5px;
display: flex;
.item {
cursor: pointer;
width: 70px;
height: 44px;
text-align: center;
margin: 8px;
}
}
.color_block {
width: 38px;
height: 22px;
...
...
src/layouts/BasicLayout.js
浏览文件 @
680c0c3d
...
...
@@ -18,8 +18,6 @@ import Context from './MenuContext';
const
{
Content
}
=
Layout
;
const
{
AuthorizedRoute
,
check
}
=
Authorized
;
const
RightSidebar
=
connect
(({
setting
})
=>
({
...
setting
}))(
Sidebar
);
/**
* 获取面包屑映射
* @param {Object} menuData 菜单配置
...
...
@@ -103,12 +101,6 @@ class BasicLayout extends React.PureComponent {
payload
:
collapsed
,
});
};
changeSetting
=
setting
=>
{
this
.
props
.
dispatch
({
type
:
'
setting/changeSetting
'
,
payload
:
setting
,
});
};
render
()
{
const
{
isMobile
,
redirectData
,
routerData
,
fixedHeader
,
match
}
=
this
.
props
;
const
isTop
=
this
.
props
.
layout
===
'
topmenu
'
;
...
...
@@ -164,7 +156,7 @@ class BasicLayout extends React.PureComponent {
<
Context
.
Provider
value
=
{
this
.
getContext
()}
>
<
div
className
=
{
classNames
(
params
)}
>
{
layout
}
<
RightSidebar
onChange
=
{
this
.
changeSetting
}
/
>
<
Sidebar
/>
<
/div
>
<
/Context.Provider
>
)}
...
...
src/layouts/Header.js
浏览文件 @
680c0c3d
...
...
@@ -18,9 +18,7 @@ class HeaderView extends PureComponent {
document
.
getElementById
(
'
root
'
).
addEventListener
(
'
scroll
'
,
this
.
handScroll
);
}
componentWillUnmount
()
{
document
.
getElementById
(
'
root
'
)
.
removeEventListener
(
'
scroll
'
,
this
.
handScroll
);
document
.
getElementById
(
'
root
'
).
removeEventListener
(
'
scroll
'
,
this
.
handScroll
);
}
getHeadWidth
=
()
=>
{
const
{
fixedHeader
,
layout
,
fixSiderbar
}
=
this
.
props
.
setting
;
...
...
@@ -34,7 +32,7 @@ class HeaderView extends PureComponent {
return
'
calc(100% - 80px)
'
;
}
};
handleNoticeClear
=
(
type
)
=>
{
handleNoticeClear
=
type
=>
{
message
.
success
(
`清空了
${
type
}
`
);
this
.
props
.
dispatch
({
type
:
'
global/clearNotices
'
,
...
...
@@ -60,7 +58,7 @@ class HeaderView extends PureComponent {
});
}
};
handleNoticeVisibleChange
=
(
visible
)
=>
{
handleNoticeVisibleChange
=
visible
=>
{
if
(
visible
)
{
this
.
props
.
dispatch
({
type
:
'
global/fetchNotices
'
,
...
...
src/layouts/LoadingPage.js
浏览文件 @
680c0c3d
...
...
@@ -56,25 +56,12 @@ class LoadingPage extends PureComponent {
loading
:
false
,
});
}
/**
* get setting from url params
*/
initSetting
()
{
const
setting
=
{
collapse
:
false
,
silderTheme
:
'
dark
'
,
themeColor
:
'
#1890FF
'
,
layout
:
'
sidemenu
'
,
grid
:
'
Fluid
'
,
fixedHeader
:
false
,
autoHideHeader
:
false
,
fixSiderbar
:
false
,
colorWeak
:
'
close
'
,
};
const
urlParams
=
new
URL
(
window
.
location
.
href
);
Object
.
keys
(
setting
).
forEach
(
key
=>
{
setting
[
key
]
=
urlParams
.
searchParams
.
get
(
key
);
});
this
.
props
.
dispatch
({
type
:
'
setting/changeSetting
'
,
payload
:
setting
,
type
:
'
setting/getSetting
'
,
});
}
render
()
{
...
...
src/models/setting.js
浏览文件 @
680c0c3d
const
defaultSetting
=
{
collapse
:
false
,
silderTheme
:
'
dark
'
,
themeColor
:
'
#1890FF
'
,
layout
:
'
sidemenu
'
,
grid
:
'
Fluid
'
,
fixedHeader
:
false
,
autoHideHeader
:
false
,
fixSiderbar
:
false
,
colorWeak
:
'
close
'
,
};
export
default
{
namespace
:
'
setting
'
,
state
:
{
collapse
:
false
,
silderTheme
:
'
dark
'
,
themeColor
:
'
#1890FF
'
,
layout
:
'
sidemenu
'
,
grid
:
'
Fluid
'
,
fixedHeader
:
false
,
autoHideHeader
:
false
,
fixSiderbar
:
false
,
colorWeak
:
'
close
'
,
},
state
:
defaultSetting
,
reducers
:
{
getSetting
(
state
)
{
const
setting
=
{
...
state
};
const
urlParams
=
new
URL
(
window
.
location
.
href
);
Object
.
keys
(
state
).
forEach
(
key
=>
{
if
(
urlParams
.
searchParams
.
has
(
key
))
{
const
value
=
urlParams
.
searchParams
.
get
(
key
);
setting
[
key
]
=
value
;
}
});
return
setting
;
},
changeSetting
(
state
,
{
payload
})
{
const
urlParams
=
new
URL
(
window
.
location
.
href
);
Object
.
keys
(
defaultSetting
).
forEach
(
key
=>
{
if
(
urlParams
.
searchParams
.
has
(
key
))
{
urlParams
.
searchParams
.
delete
(
key
);
}
});
Object
.
keys
(
payload
).
forEach
(
key
=>
{
if
(
key
===
'
collapse
'
)
{
return
;
...
...
@@ -23,7 +40,9 @@ export default {
if
(
value
===
true
)
{
value
=
1
;
}
urlParams
.
searchParams
.
set
(
key
,
value
);
if
(
defaultSetting
[
key
]
!==
value
)
{
urlParams
.
searchParams
.
set
(
key
,
value
);
}
});
window
.
history
.
replaceState
(
null
,
'
setting
'
,
urlParams
.
href
);
return
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录