{
"component": "Me

{
"component": "MessageList",
"type": "container",
"layout": {
"display": "grid",
"columns": 12,
"gap": "0px"
},
"padding": "0px",
"backgroundColor": "#F7F8FA",
"children": [
{
"component": "Header",
"layout": {
"display": "flex",
"justifyContent": "space-between",
"alignItems": "center",
"padding": "24px 32px",
"backgroundColor": "#FFFFFF"
},
"boxShadow": "0 1px 2px rgba(0,0,0,0.05)",
"children": [
{
"component": "Text",
"content": "消息列表",
"style": {
"fontSize": "20px",
"fontWeight": "500",
"color": "#333333"
}
},
{
"component": "Button",
"content": "新建消息",
"style": {
"backgroundColor": "#6236FF",
"color": "#FFFFFF",
"borderRadius": "4px",
"padding": "8px 16px",
"fontSize": "14px",
"fontWeight": "500"
},
"icon": {
"name": "heroicons:plus-solid",
"position": "left",
"size": "16px",
"color": "#FFFFFF"
}
}
]
},
{
"component": "FilterArea",
"type": "container",
"layout": {
"display": "flex",
"flexDirection": "column",
"padding": "24px 32px",
"gap": "16px",
"gridColumn": "span 12"
},
"backgroundColor": "#FFFFFF",
"children": [
{
"component": "SearchInput",
"layout": {
"display": "flex",
"alignItems": "center"
},
"style": {
"width": "w-full",
"height": "40px",
"borderRadius": "4px",
"border": "1px solid #D9D9D9",
"paddingLeft": "12px",
"paddingRight": "12px"
},
"placeholder": "搜索消息标题、内容或ID...",
"icon": {
"name": "heroicons:magnifying-glass",
"position": "right",
"size": "20px",
"color": "#909399"
}
},
{
"component": "FilterRow",
"layout": {
"display": "flex",
"alignItems": "center",
"gap": "16px",
"flexWrap": "wrap"
},
"children": [
{
"component": "Dropdown",
"label": "全部消息类型",
"style": {
"width": "140px",
"height": "32px",
"border": "1px solid #D9D9D9",
"borderRadius": "4px",
"padding": "0 8px"
},
"icon": {
"name": "heroicons:chevron-down",
"size": "16px"
}
},
{
"component": "Dropdown",
"label": "全部状态",
"style": {
"width": "120px",
"height": "32px",
"border": "1px solid #D9D9D9",
"borderRadius": "4px",
"padding": "0 8px"
},
"icon": {
"name": "heroicons:chevron-down",
"size": "16px"
}
},
{
"component": "Dropdown",
"label": "全部优先级",
"style": {
"width": "120px",
"height": "32px",
"border": "1px solid #D9D9D9",
"borderRadius": "4px",
"padding": "0 8px"
},
"icon": {
"name": "heroicons:chevron-down",
"size": "16px"
}
},
{
"component": "DatePicker",
"label": "年/月/日",
"style": {
"width": "120px",
"height": "32px",
"border": "1px solid #D9D9D9",
"borderRadius": "4px",
"padding": "0 8px"
},
"icon": {
"name": "heroicons:calendar",
"size": "16px"
}
},
{
"component": "DatePicker",
"label": "年/月/日",
"style": {
"width": "120px",
"height": "32px",
"border": "1px solid #D9D9D9",
"borderRadius": "4px",
"padding": "0 8px"
},
"icon": {
"name": "heroicons:calendar",
"size": "16px"
}
},
{
"component": "Button",
"content": "重置筛选",
"style": {
"backgroundColor": "#F5F5F5",
"color": "#333333",
"borderRadius": "4px",
"padding": "6px 12px",
"fontSize": "14px",
"fontWeight": "500",
"border": "1px solid #D9D9D9"
},
"icon": {
"name": "heroicons:arrow-path",
"position": "left",
"size": "16px",
"color": "#333333"
}
}
]
}
]
},
{
"component": "Table",
"type": "container",
"layout": {
"display": "flex",
"flexDirection": "column",
"padding": "0px 32px 32px 32px",
"gridColumn": "span 12"
},
"backgroundColor": "#FFFFFF",
"children": [
{
"component": "TableHeader",
"layout": {
"display": "grid",
"columns": "repeat(8, minmax(0, 1fr))",
"alignItems": "center",
"padding": "16px 0",
"borderBottom": "1px solid #E0E0E0"
},
"style": {
"backgroundColor": "#FFFFFF",
"fontSize": "14px",
"fontWeight": "500",
"color": "#333333"
},
"children": [
{ "component": "Text", "content": "消息ID" },
{ "component": "Text", "content": "标题" },
{ "component": "Text", "content": "类型" },
{ "component": "Text", "content": "优先级" },
{ "component": "Text", "content": "发送对象" },
{ "component": "Text", "content": "发送时间" },
{ "component": "Text", "content": "状态" },
{ "component": "Text", "content": "操作" }
]
},
{
"component": "TableRow",
"layout": {
"display": "grid",
"columns": "repeat(8, minmax(0, 1fr))",
"alignItems": "center",
"padding": "16px 0",
"borderBottom": "1px solid #E0E0E0"
},
"style": {
"backgroundColor": "#FFFFFF",
"fontSize": "14px",
"color": "#333333"
},
"children": [
{ "component": "Text", "content": "MSG-20230615-001" },
{ "component": "Text", "content": "系统维护通知" },
{
"component": "Tag",
"content": "系统通知",
"style": {
"backgroundColor": "#D3D7FF",
"color": "#6236FF",
"borderRadius": "4px",
"padding": "4px 8px",
"fontSize": "12px"
}
},
{
"component": "PriorityTag",
"content": "中",
"style": {
"backgroundColor": "#FFF8D3",
"color": "#F3AF00",
"borderRadius": "4px",
"padding": "4px 8px",
"fontSize": "12px",
"fontWeight": "500",
"border": "1px solid #F3AF00"
}
},
{ "component": "Text", "content": "全部用户" },
{ "component": "Text", "content": "2023-06-15 08:00" },
{
"component": "StatusTag",
"content": "已发布",
"style": {
"backgroundColor": "#D3FFD3",
"color": "#009900",
"borderRadius": "4px",
"padding": "4px 8px",
"fontSize": "12px",
"fontWeight": "500",
"border": "1px solid #009900"
}
},
{
"component": "ButtonGroup",
"layout": {
"display": "flex",
"gap": "8px"
},
"children": [
{
"component": "Button",
"content": "查看",
"style": {
"backgroundColor": "transparent",
"color": "#6236FF",
"border": "none",
"fontSize": "14px"
}
},
{
"component": "Button",
"content": "撤回",
"style": {
"backgroundColor": "transparent",
"color": "#6236FF",
"border": "none",
"fontSize": "14px"
}
}
]
}
]
},
{
"component": "TableRow",
"layout": {
"display": "grid",
"columns": "repeat(8, minmax(0, 1fr))",
"alignItems": "center",
"padding": "16px 0",
"borderBottom": "1px solid #E0E0E0"
},
"style": {
"backgroundColor": "#FFFFFF",
"fontSize": "14px",
"color": "#333333"
},
"children": [
{ "component": "Text", "content": "MSG-20230614-005" },
{ "component": "Text", "content": "京沪限流交通管制提醒" },
{
"component": "Tag",
"content": "紧急通知",
"style": {
"backgroundColor": "#FFD3D3",
"color": "#FF0000",
"borderRadius": "4px",
"padding": "4px 8px",
"fontSize": "12px"
}
},
{
"component": "PriorityTag",
"content": "高",
"style": {
"backgroundColor": "#FFD3D3",
"color": "#FF0000",
"borderRadius": "4px",
"padding": "4px 8px",
"fontSize": "12px",
"fontWeight": "500",
"border": "1px solid #FF0000"
}
},
{ "component": "Text", "content": "京沪线司机" },
{ "component": "Text", "content": "2023-06-14 14:30" },
{
"component": "StatusTag",
"content": "已发布",
"style": {
"backgroundColor": "#D3FFD3",
"color": "#009900",
"borderRadius": "4px",
"padding": "4px 8px",
"fontSize": "12px",
"fontWeight": "500",
"border": "1px solid #009900"
}
},
{
"component": "ButtonGroup",
"layout": {
"display": "flex",
"gap": "8px"
},
"children": [
{
"component": "Button",
"content": "查看",
"style": {
"backgroundColor": "transparent",
"color": "#6236FF",
"border": "none",
"fontSize": "14px"
}
},
{
"component": "Button",
"content": "撤回",
"style": {
"backgroundColor": "transparent",
"color": "#6236FF",
"border": "none",
"fontSize": "14px"
}
}
]
}
]
},
{
"component": "TableRow",
"layout": {
"display": "grid",
"columns": "repeat(8, minmax(0, 1fr))",
"alignItems": "center",
"padding": "16px 0",
"borderBottom": "1px solid #E0E0E0"
},
"style": {
"backgroundColor": "#FFFFFF",
"fontSize": "14px",
"color": "#333333"
},
"children": [
{ "component": "Text", "content": "MSG-20230614-003" },
{ "component": "Text", "content": "端午节放假安排" },
{
"component": "Tag",
"content": "系统通知",
"style": {
"backgroundColor": "#D3D7FF",
"color": "#6236FF",
"borderRadius": "4px",
"padding": "4px 8px",
"fontSize": "12px"
}
},
{
"component": "PriorityTag",
"content": "低",
"style": {
"backgroundColor": "#D3FFD3",
"color": "#009900",
"borderRadius": "4px",
"padding": "4px 8px",
"fontSize": "12px",
"fontWeight": "500",
"border": "1px solid #009900"
}
},
{ "component": "Text", "content": "全体员工" },
{ "component": "Text", "content": "2023-06-14 10:15" },
{
"component": "StatusTag",
"content": "已发布",
"style": {
"backgroundColor": "#D3FFD3",
"color": "#009900",
"borderRadius": "4px",
"padding": "4px 8px",
"fontSize": "12px",
"fontWeight": "500",
"border": "1px solid #009900"
}
},
{
"component": "ButtonGroup",
"layout": {
"display": "flex",
"gap": "8px"
},
"children": [
{
"component": "Button",
"content": "查看",
"style": {
"backgroundColor": "transparent",
"color": "#6236FF",
"border": "none",
"fontSize": "14px"
}
},
{
"component": "Button",
"content": "撤回",
"style": {
"backgroundColor": "transparent",
"color": "#6236FF",
"border": "none",
"fontSize": "14px"
}
}
]
}
]
},
{
"component": "TableRow",
"layout": {
"display": "grid",
"columns": "repeat(8, minmax(0, 1fr))",
"alignItems": "center",
"padding": "16px 0",
"borderBottom": "1px solid #E0E0E0"
},
"style": {
"backgroundColor": "#FFFFFF",
"fontSize": "14px",
"color": "#333333"
},
"children": [
{ "component": "Text", "content": "MSG-20230613-002" },
{ "component": "Text", "content": "新功能上线通知" },
{
"component": "Tag",
"content": "系统通知",
"style": {
"backgroundColor": "#D3D7FF",
"color": "#6236FF",
"borderRadius": "4px",
"padding": "4px 8px",
"fontSize": "12px"
}
},
{
"component": "PriorityTag",
"content": "中",
"style": {
"backgroundColor": "#FFF8D3",
"color": "#F3AF00",
"borderRadius": "4px",
"padding": "4px 8px",
"fontSize": "12px",
"fontWeight": "500",
"border": "1px solid #F3AF00"
}
},
{ "component": "Text", "content": "全部用户" },
{ "component": "Text", "content": "2023-06-13 18:00" },
{
"component": "StatusTag",
"content": "已发布",
"style": {
"backgroundColor": "#D3FFD3",
"color": "#009900",
"borderRadius": "4px",
"padding": "4px 8px",
"fontSize": "12px",
"fontWeight": "500",
"border": "1px solid #009900"
}
},
{
"component": "ButtonGroup",
"layout": {
"display": "flex",
"gap": "8px"
},
"children": [
{
"component": "Button",
"content": "查看",
"style": {
"backgroundColor": "transparent",
"color": "#6236FF",
"border": "none",
"fontSize": "14px"
}
},
{
"component": "Button",
"content": "撤回",
"style": {
"backgroundColor": "transparent",
"color": "#6236FF",
"border": "none",
"fontSize": "14px"
}
}
]
}
]
},
{
"component": "TableRow",
"layout": {
"display": "grid",
"columns": "repeat(8, minmax(0, 1fr))",
"alignItems": "center",
"padding": "16px 0",
"borderBottom": "1px solid #E0E0E0"
},
"style": {
"backgroundColor": "#FFFFFF",
"fontSize": "14px",
"color": "#333333"
},
"children": [
{ "component": "Text", "content": "MSG-20230612-004" },
{ "component": "Text", "content": "6月账单提醒" },
{
"component": "Tag",
"content": "营销消息",
"style": {
"backgroundColor": "#D3E0FF",
"color": "#3366FF",
"borderRadius": "4px",
"padding": "4px 8px",
"fontSize": "12px"
}
},
{
"component": "PriorityTag",
"content": "低",
"style": {
"backgroundColor": "#D3FFD3",
"color": "#009900",
"borderRadius": "4px",
"padding": "4px 8px",
"fontSize": "12px",
"fontWeight": "500",
"border": "1px solid #009900"
}
},
{ "component": "Text", "content": "全部货主" },
{ "component": "Text", "content": "2023-06-12 09:00" },
{
"component": "StatusTag",
"content": "已发布",
"style": {
"backgroundColor": "#D3FFD3",
"color": "#009900",
"borderRadius": "4px",
"padding": "4px 8px",
"fontSize": "12px",
"fontWeight": "500",
"border": "1px solid #009900"
}
},
{
"component": "ButtonGroup",
"layout": {
"display": "flex",
"gap": "8px"
},
"children": [
{
"component": "Button",
"content": "查看",
"style": {
"backgroundColor": "transparent",
"color": "#6236FF",
"border": "none",
"fontSize": "14px"
}
},
{
"component": "Button",
"content": "撤回",
"style": {
"backgroundColor": "transparent",
"color": "#6236FF",
"border": "none",
"fontSize": "14px"
}
}
]
}
]
},
{
"component": "TableRow",
"layout": {
"display": "grid",
"columns": "repeat(8, minmax(0, 1fr))",
"alignItems": "center",
"padding": "16px 0",
"borderBottom": "1px solid #E0E0E0"
},
"style": {
"backgroundColor": "#FFFFFF",
"fontSize": "14px",
"color": "#333333"
},
"children": [
{ "component": "Text", "content": "MSG-20230610-006" },
{ "component": "Text", "content": "订单TRUCK-20230610-009起运通知" },
{
"component": "Tag",
"content": "紧急通知",
"style": {
"backgroundColor": "#FFD3D3",
"color": "#FF0000",
"borderRadius": "4px",
"padding": "4px 8px",
"fontSize": "12px"
}
},
{
"component": "PriorityTag",
"content": "高",
"style": {
"backgroundColor": "#FFD3D3",
"color": "#FF0000",
"borderRadius": "4px",
"padding": "4px 8px",
"fontSize": "12px",
"fontWeight": "500",
"border": "1px solid #FF0000"
}
},
{ "component": "Text", "content": "相关货主" },
{ "component": "Text", "content": "2023-06-10 16:45" },
{
"component": "StatusTag",
"content": "已撤回",
"style": {
"backgroundColor": "#F0F0F0",
"color": "#909399",
"borderRadius": "4px",
"padding": "4px 8px",
"fontSize": "12px",
"fontWeight": "500",
"border": "1px solid #D9D9D9"
}
},
{
"component": "ButtonGroup",
"layout": {
"display": "flex",
"gap": "8px"
},
"children": [
{
"component": "Button",
"content": "查看",
"style": {
"backgroundColor": "transparent",
"color": "#6236FF",
"border": "none",
"fontSize": "14px"
}
},
{
"component": "Button",
"content": "重新发布",
"style": {
"backgroundColor": "transparent",
"color": "#6236FF",
"border": "none",
"fontSize": "14px"
}
}
]
}
]
},
{
"component": "TableRow",
"layout": {
"display": "grid",
"columns": "repeat(8, minmax(0, 1fr))",
"alignItems": "center",
"padding": "16px 0",
"borderBottom": "1px solid #E0E0E0"
},
"style": {
"backgroundColor": "#FFFFFF",
"fontSize": "14px",
"color": "#333333"
},
"children": [
{ "component": "Text", "content": "MSG-20230610-007" },
{ "component": "Text", "content": "新司机入网通知" },
{
"component": "Tag",
"content": "内部通知",
"style": {
"backgroundColor": "#D3F0FF",
"color": "#0099CC",
"borderRadius": "4px",
"padding": "4px 8px",
"fontSize": "12px"
}
},
{
"component": "PriorityTag",
"content": "中",
"style": {
"backgroundColor": "#FFF8D3",
"color": "#F3AF00",
"borderRadius": "4px",
"padding": "4px 8px",
"fontSize": "12px",
"fontWeight": "500",
"border": "1px solid #F3AF00"
}
},
{ "component": "Text", "content": "新注册司机" },
{ "component": "Text", "content": "2023-06-10 14:00" },
{
"component": "StatusTag",
"content": "未发布",
"style": {
"backgroundColor": "#F0F0F0",
"color": "#909399",
"borderRadius": "4px",
"padding": "4px 8px",
"fontSize": "12px",
"fontWeight": "500",
"border": "1px solid #D9D9D9"
}
},
{
"component": "ButtonGroup",
"layout": {
"display": "flex",
"gap": "8px"
},
"children": [
{
"component": "Button",
"content": "编辑",
"style": {
"backgroundColor": "transparent",
"color": "#6236FF",
"border": "none",
"fontSize": "14px"
}
},
{
"component": "Button",
"content": "删除",
"style": {
"backgroundColor": "transparent",
"color": "#FF0000",
"border": "none",
"fontSize": "14px"
}
},
{
"component": "Button",
"content": "发布",
"style": {
"backgroundColor": "transparent",
"color": "#6236FF",
"border": "none",
"fontSize": "14px"
}
}
]
}
]
}
]
},
{
"component": "Pagination",
"layout": {
"display": "flex",
"justifyContent": "center",
"alignItems": "center",
"gap": "8px",
"padding": "24px 0",
"gridColumn": "span 12"
},
"style": {
"backgroundColor": "#FFFFFF"
},
"children": [
{
"component": "Button",
"content": "上一页",
"style": {
"backgroundColor": "#FFFFFF",
"color": "#606266",
"border": "1px solid #DCDFE6",
"borderRadius": "4px",
"padding": "8px 12px",
"fontSize": "14px"
}
},
{
"component": "PageNumber",
"content": "1",
"style": {
"backgroundColor": "#6236FF",
"color": "#FFFFFF",
"borderRadius": "4px",
"padding": "8px 12px",
"fontSize": "14px"
}
},
{
"component": "PageNumber",
"content": "2",
"style": {
"backgroundColor": "#FFFFFF",
"color": "#606266",
"border": "1px solid #DCDFE6",
"borderRadius": "4px",
"padding": "8px 12px",
"fontSize": "14px"
}
},
{
"component": "PageNumber",
"content": "3",
"style": {
"backgroundColor": "#FFFFFF",
"color": "#606266",
"border": "1px solid #DCDFE6",
"borderRadius": "4px",
"padding": "8px 12px",
"fontSize": "14px"
}
},
{
"component": "Button",
"content": "下一页",
"style": {
"backgroundColor": "#FFFFFF",
"color": "#606266",
"border": "1px solid #DCDFE6",
"borderRadius": "4px",
"padding": "8px 12px",
"fontSize": "14px"
}
}
]
}
]
}