You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
534 lines
22 KiB
534 lines
22 KiB
6 months ago
|
from dash import html
|
||
|
|
import feffery_antd_components as fac
|
||
|
|
import feffery_utils_components as fuc
|
||
|
|
import feffery_antd_charts as fact
|
||
|
|
|
||
|
|
|
||
|
|
def render_page_bottom():
|
||
|
|
# 模拟数据
|
||
|
|
radar_origin_data = [
|
||
|
|
{
|
||
|
|
'name': '个人',
|
||
|
|
'ref': 10,
|
||
|
|
'koubei': 8,
|
||
|
|
'output': 4,
|
||
|
|
'contribute': 5,
|
||
|
|
'hot': 7
|
||
|
|
},
|
||
|
|
{
|
||
|
|
'name': '团队',
|
||
|
|
'ref': 3,
|
||
|
|
'koubei': 9,
|
||
|
|
'output': 6,
|
||
|
|
'contribute': 3,
|
||
|
|
'hot': 1
|
||
|
|
},
|
||
|
|
{
|
||
|
|
'name': '部门',
|
||
|
|
'ref': 4,
|
||
|
|
'koubei': 1,
|
||
|
|
'output': 6,
|
||
|
|
'contribute': 5,
|
||
|
|
'hot': 7
|
||
|
|
}
|
||
|
|
]
|
||
|
|
|
||
|
|
radar_data = []
|
||
|
|
radar_title_map = {
|
||
|
|
'ref': '引用',
|
||
|
|
'koubei': '口碑',
|
||
|
|
'output': '产量',
|
||
|
|
'contribute': '贡献',
|
||
|
|
'hot': '热度'
|
||
|
|
}
|
||
|
|
|
||
|
|
for item in radar_origin_data:
|
||
|
|
for key, value in item.items():
|
||
|
|
if key != 'name':
|
||
|
|
radar_data.append({
|
||
|
|
'name': item['name'],
|
||
|
|
'label': radar_title_map[key],
|
||
|
|
'value': value
|
||
|
|
})
|
||
|
|
|
||
|
|
project_list = [
|
||
|
|
{
|
||
|
|
"id": "xxx1",
|
||
|
|
"title": "Alipay",
|
||
|
|
"logo": "https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png",
|
||
|
|
"description": "那是一种内在的东西，他们到达不了，也无法触及的",
|
||
|
|
"updatedAt": "2023-09-15T01:08:36.135Z",
|
||
|
|
"member": "科学搬砖组",
|
||
|
|
"href": "",
|
||
|
|
"memberLink": ""
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"id": "xxx2",
|
||
|
|
"title": "Angular",
|
||
|
|
"logo": "https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png",
|
||
|
|
"description": "希望是一个好东西，也许是最好的，好东西是不会消亡的",
|
||
|
|
"updatedAt": "2017-07-24T00:00:00.000Z",
|
||
|
|
"member": "全组都是吴彦祖",
|
||
|
|
"href": "",
|
||
|
|
"memberLink": ""
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"id": "xxx3",
|
||
|
|
"title": "Ant Design",
|
||
|
|
"logo": "https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png",
|
||
|
|
"description": "城镇中有那么多的酒馆，她却偏偏走进了我的酒馆",
|
||
|
|
"updatedAt": "2023-09-15T01:08:36.135Z",
|
||
|
|
"member": "中二少女团",
|
||
|
|
"href": "",
|
||
|
|
"memberLink": ""
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"id": "xxx4",
|
||
|
|
"title": "Ant Design Pro",
|
||
|
|
"logo": "https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png",
|
||
|
|
"description": "那时候我只会想自己想要什么，从不想自己拥有什么",
|
||
|
|
"updatedAt": "2017-07-23T00:00:00.000Z",
|
||
|
|
"member": "程序员日常",
|
||
|
|
"href": "",
|
||
|
|
"memberLink": ""
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"id": "xxx5",
|
||
|
|
"title": "Bootstrap",
|
||
|
|
"logo": "https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png",
|
||
|
|
"description": "凛冬将至",
|
||
|
|
"updatedAt": "2017-07-23T00:00:00.000Z",
|
||
|
|
"member": "高逼格设计天团",
|
||
|
|
"href": "",
|
||
|
|
"memberLink": ""
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"id": "xxx6",
|
||
|
|
"title": "React",
|
||
|
|
"logo": "https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png",
|
||
|
|
"description": "生命就像一盒巧克力，结果往往出人意料",
|
||
|
|
"updatedAt": "2017-07-23T00:00:00.000Z",
|
||
|
|
"member": "骗你来学计算机",
|
||
|
|
"href": "",
|
||
|
|
"memberLink": ""
|
||
|
|
}
|
||
|
|
]
|
||
|
|
|
||
|
|
activity_list = [
|
||
|
|
{
|
||
|
|
"id": "trend-1",
|
||
|
|
"updatedAt": "2023-09-15 01:08:36",
|
||
|
|
"user": {
|
||
|
|
"name": "曲丽丽",
|
||
|
|
"avatar": "https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"
|
||
|
|
},
|
||
|
|
"group": {
|
||
|
|
"name": "高逼格设计天团",
|
||
|
|
"link": "http://github.com/"
|
||
|
|
},
|
||
|
|
"project": {
|
||
|
|
"name": "六月迭代",
|
||
|
|
"link": "http://github.com/"
|
||
|
|
},
|
||
|
|
"template": "新建项目"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"id": "trend-2",
|
||
|
|
"updatedAt": "2023-09-15 01:08:36",
|
||
|
|
"user": {
|
||
|
|
"name": "付小小",
|
||
|
|
"avatar": "https://gw.alipayobjects.com/zos/rmsportal/cnrhVkzwxjPwAaCfPbdc.png"
|
||
|
|
},
|
||
|
|
"group": {
|
||
|
|
"name": "高逼格设计天团",
|
||
|
|
"link": "http://github.com/"
|
||
|
|
},
|
||
|
|
"project": {
|
||
|
|
"name": "六月迭代",
|
||
|
|
"link": "http://github.com/"
|
||
|
|
},
|
||
|
|
"template": "新建项目"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"id": "trend-3",
|
||
|
|
"updatedAt": "2023-09-15 01:08:36",
|
||
|
|
"user": {
|
||
|
|
"name": "林东东",
|
||
|
|
"avatar": "https://gw.alipayobjects.com/zos/rmsportal/gaOngJwsRYRaVAuXXcmB.png"
|
||
|
|
},
|
||
|
|
"group": {
|
||
|
|
"name": "中二少女团",
|
||
|
|
"link": "http://github.com/"
|
||
|
|
},
|
||
|
|
"project": {
|
||
|
|
"name": "六月迭代",
|
||
|
|
"link": "http://github.com/"
|
||
|
|
},
|
||
|
|
"template": "新建项目"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"id": "trend-4",
|
||
|
|
"updatedAt": "2023-09-15 01:08:36",
|
||
|
|
"user": {
|
||
|
|
"name": "周星星",
|
||
|
|
"avatar": "https://gw.alipayobjects.com/zos/rmsportal/WhxKECPNujWoWEFNdnJE.png"
|
||
|
|
},
|
||
|
|
"group": {
|
||
|
|
"name": "白鹭酱油开发组",
|
||
|
|
"link": "http://github.com/"
|
||
|
|
},
|
||
|
|
"project": {
|
||
|
|
"name": "5 月日常迭代",
|
||
|
|
"link": "http://github.com/"
|
||
|
|
},
|
||
|
|
"template": "发布了"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"id": "trend-5",
|
||
|
|
"updatedAt": "2023-09-15 01:08:36",
|
||
|
|
"user": {
|
||
|
|
"name": "乐哥",
|
||
|
|
"avatar": "https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png"
|
||
|
|
},
|
||
|
|
"group": {
|
||
|
|
"name": "程序员日常",
|
||
|
|
"link": "http://github.com/"
|
||
|
|
},
|
||
|
|
"project": {
|
||
|
|
"name": "品牌迭代",
|
||
|
|
"link": "http://github.com/"
|
||
|
|
},
|
||
|
|
"template": "新建项目"
|
||
|
|
}
|
||
|
|
]
|
||
|
|
|
||
|
|
return html.Div(
|
||
|
|
[
|
||
|
|
fac.AntdRow(
|
||
|
|
[
|
||
|
|
fac.AntdCol(
|
||
|
|
[
|
||
|
|
fac.AntdCard(
|
||
|
|
[
|
||
|
|
fac.AntdCardGrid(
|
||
|
|
[
|
||
|
|
html.Div(
|
||
|
|
[
|
||
|
|
fac.AntdAvatar(
|
||
|
|
mode='image',
|
||
|
|
src=item.get('logo'),
|
||
|
|
size='small'
|
||
|
|
),
|
||
|
|
html.A(
|
||
|
|
item.get('title')
|
||
|
|
)
|
||
|
|
],
|
||
|
|
className='card-title'
|
||
|
|
),
|
||
|
|
html.Div(
|
||
|
|
item.get('description'),
|
||
|
|
className='card-description'
|
||
|
|
),
|
||
|
|
html.Div(
|
||
|
|
[
|
||
|
|
html.A(item.get('member')),
|
||
|
|
html.Span(
|
||
|
|
'9小时前',
|
||
|
|
className='datetime'
|
||
|
|
)
|
||
|
|
],
|
||
|
|
className='project-item'
|
||
|
|
)
|
||
|
|
]
|
||
|
|
)
|
||
|
|
for item in project_list
|
||
|
|
],
|
||
|
|
className='project-list',
|
||
|
|
title='进行中的项目',
|
||
|
|
bordered=False,
|
||
|
|
extraLink={
|
||
|
|
'content': '全部项目'
|
||
|
|
},
|
||
|
|
bodyStyle={
|
||
|
|
'padding': 0
|
||
|
|
},
|
||
|
|
style={
|
||
|
|
'marginBottom': '24px',
|
||
|
|
'boxShadow': 'rgba(0, 0, 0, 0.1) 0px 4px 12px'
|
||
|
|
}
|
||
|
|
),
|
||
|
|
fac.AntdCard(
|
||
|
|
fac.AntdSpace(
|
||
|
|
[
|
||
|
|
html.Div(
|
||
|
|
[
|
||
|
|
html.Div(
|
||
|
|
[
|
||
|
|
html.Div(
|
||
|
|
fac.AntdAvatar(
|
||
|
|
mode='image',
|
||
|
|
src=item.get('user').get('avatar'),
|
||
|
|
size='small',
|
||
|
|
),
|
||
|
|
style={
|
||
|
|
'flex': '0 1',
|
||
|
|
'marginRight': '16px'
|
||
|
|
}
|
||
|
|
),
|
||
|
|
html.Div(
|
||
|
|
[
|
||
|
|
html.Div(
|
||
|
|
[
|
||
|
|
html.Span(f"{item.get('user').get('name')} 在 "),
|
||
|
|
html.A(item.get('group').get('name'), href=item.get('group').get('link')),
|
||
|
|
html.Span(f" {item.get('template')} "),
|
||
|
|
html.A(item.get('project').get('name'), href=item.get('project').get('link'))
|
||
|
|
],
|
||
|
|
key=item.get('id')
|
||
|
|
),
|
||
|
|
html.Div(
|
||
|
|
item.get('updatedAt'),
|
||
|
|
style={
|
||
|
|
'color': 'rgba(0,0,0,.45)',
|
||
|
|
'fontSize': '14px',
|
||
|
|
'lineHeight': '22px'
|
||
|
|
}
|
||
|
|
),
|
||
|
|
],
|
||
|
|
style={
|
||
|
|
'flex': '1 1 auto'
|
||
|
|
}
|
||
|
|
),
|
||
|
|
],
|
||
|
|
style={
|
||
|
|
'display': 'flex'
|
||
|
|
}
|
||
|
|
),
|
||
|
|
fac.AntdDivider()
|
||
|
|
]
|
||
|
|
)
|
||
|
|
for item in activity_list
|
||
|
|
],
|
||
|
|
direction='vertical',
|
||
|
|
style={
|
||
|
|
'width': '100%',
|
||
|
|
'maxHeight': '500px',
|
||
|
|
'overflowY': 'auto'
|
||
|
|
}
|
||
|
|
),
|
||
|
|
title='动态',
|
||
|
|
bordered=False,
|
||
|
|
style={
|
||
|
|
'marginBottom': '24px',
|
||
|
|
'boxShadow': 'rgba(0, 0, 0, 0.1) 0px 4px 12px'
|
||
|
|
}
|
||
|
|
),
|
||
|
|
],
|
||
|
|
xl=16,
|
||
|
|
lg=24,
|
||
|
|
md=24,
|
||
|
|
sm=24,
|
||
|
|
xs=24
|
||
|
|
),
|
||
|
|
fac.AntdCol(
|
||
|
|
[
|
||
|
|
fac.AntdCard(
|
||
|
|
html.Div(
|
||
|
|
[
|
||
|
|
html.A('操作一'),
|
||
|
|
html.A('操作二'),
|
||
|
|
html.A('操作三'),
|
||
|
|
html.A('操作四'),
|
||
|
|
html.A('操作五'),
|
||
|
|
fac.AntdButton(
|
||
|
|
'添加',
|
||
|
|
type="primary",
|
||
|
|
size='small',
|
||
|
|
icon=fac.AntdIcon(icon='antd-plus'),
|
||
|
|
style={
|
||
|
|
'marginLeft': '20px'
|
||
|
|
}
|
||
|
|
)
|
||
|
|
],
|
||
|
|
className='item-group'
|
||
|
|
),
|
||
|
|
title='快速开始 / 便捷导航',
|
||
|
|
bordered=False,
|
||
|
|
style={
|
||
|
|
'marginBottom': '24px',
|
||
|
|
'boxShadow': 'rgba(0, 0, 0, 0.1) 0px 4px 12px'
|
||
|
|
}
|
||
|
|
),
|
||
|
|
fac.AntdCard(
|
||
|
|
html.Div(
|
||
|
|
fact.AntdRadar(
|
||
|
|
height=343,
|
||
|
|
data=radar_data,
|
||
|
|
xField='label',
|
||
|
|
yField='value',
|
||
|
|
seriesField='name',
|
||
|
|
point={},
|
||
|
|
legend={
|
||
|
|
'position': 'bottom'
|
||
|
|
},
|
||
|
|
),
|
||
|
|
style={
|
||
|
|
'minHeight': '400px',
|
||
|
|
'margin': '0 auto',
|
||
|
|
'paddingTop': '30px'
|
||
|
|
}
|
||
|
|
),
|
||
|
|
title='XX 指数',
|
||
|
|
bordered=False,
|
||
|
|
bodyStyle={
|
||
|
|
'padding': 0
|
||
|
|
},
|
||
|
|
style={
|
||
|
|
'marginBottom': '24px',
|
||
|
|
'boxShadow': 'rgba(0, 0, 0, 0.1) 0px 4px 12px'
|
||
|
|
}
|
||
|
|
),
|
||
|
|
fac.AntdCard(
|
||
|
|
html.Div(
|
||
|
|
fac.AntdRow(
|
||
|
|
[
|
||
|
|
fac.AntdCol(
|
||
|
|
html.A(
|
||
|
|
[
|
||
|
|
fac.AntdAvatar(
|
||
|
|
mode='image',
|
||
|
|
src=item.get('logo'),
|
||
|
|
size='small'
|
||
|
|
),
|
||
|
|
html.Span(
|
||
|
|
item.get('member'),
|
||
|
|
className='member'
|
||
|
|
)
|
||
|
|
]
|
||
|
|
),
|
||
|
|
span=12
|
||
|
|
)
|
||
|
|
for item in project_list
|
||
|
|
]
|
||
|
|
),
|
||
|
|
className='members'
|
||
|
|
),
|
||
|
|
title='团队',
|
||
|
|
bordered=False,
|
||
|
|
style={
|
||
|
|
'marginBottom': '24px',
|
||
|
|
'boxShadow': 'rgba(0, 0, 0, 0.1) 0px 4px 12px'
|
||
|
|
}
|
||
|
|
),
|
||
|
|
],
|
||
|
|
xl=8,
|
||
|
|
lg=24,
|
||
|
|
md=24,
|
||
|
|
sm=24,
|
||
|
|
xs=24,
|
||
|
|
style={
|
||
|
|
'padding': '0 12px'
|
||
|
|
}
|
||
|
|
),
|
||
|
|
],
|
||
|
|
gutter=24
|
||
|
|
),
|
||
|
|
fuc.FefferyStyle(
|
||
|
|
rawStyle='''
|
||
|
|
.project-list .card-title {
|
||
|
|
font-size: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.project-list .card-title a {
|
||
|
|
color: rgba(0, 0, 0, 0.85);
|
||
|
|
margin-left: 12px;
|
||
|
|
line-height: 24px;
|
||
|
|
height: 24px;
|
||
|
|
display: inline-block;
|
||
|
|
vertical-align: top;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.project-list .card-title a:hover {
|
||
|
|
color: #1890ff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.project-list .card-description {
|
||
|
|
color: rgba(0, 0, 0, 0.45);
|
||
|
|
height: 44px;
|
||
|
|
line-height: 22px;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.project-list .project-item {
|
||
|
|
display: flex;
|
||
|
|
margin-top: 8px;
|
||
|
|
overflow: hidden;
|
||
|
|
font-size: 12px;
|
||
|
|
height: 20px;
|
||
|
|
line-height: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.project-list .project-item a {
|
||
|
|
color: rgba(0, 0, 0, 0.45);
|
||
|
|
display: inline-block;
|
||
|
|
flex: 1 1 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.project-list .project-item a:hover {
|
||
|
|
color: #1890ff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.project-list .project-item .datetime {
|
||
|
|
color: rgba(0, 0, 0, 0.25);
|
||
|
|
flex: 0 0 auto;
|
||
|
|
float: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
.project-list .ant-card-meta-description {
|
||
|
|
color: rgba(0, 0, 0, 0.45);
|
||
|
|
height: 44px;
|
||
|
|
line-height: 22px;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-group {
|
||
|
|
padding: 20px 0 8px 24px;
|
||
|
|
font-size: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-group a {
|
||
|
|
color: rgba(0, 0, 0, 0.65);
|
||
|
|
display: inline-block;
|
||
|
|
font-size: 14px;
|
||
|
|
margin-bottom: 13px;
|
||
|
|
width: 25%;
|
||
|
|
padding-left: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.members a {
|
||
|
|
display: block;
|
||
|
|
margin: 12px 0;
|
||
|
|
line-height: 24px;
|
||
|
|
height: 24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.members a .member {
|
||
|
|
font-size: 14px;
|
||
|
|
color: rgba(0, 0, 0, 0.65);
|
||
|
|
line-height: 24px;
|
||
|
|
max-width: 100px;
|
||
|
|
vertical-align: top;
|
||
|
|
margin-left: 12px;
|
||
|
|
transition: all 0.3s;
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.members a .member:hover span {
|
||
|
|
color: #1890ff;
|
||
|
|
}
|
||
|
|
'''
|
||
|
|
)
|
||
|
|
]
|
||
|
|
)
|