From 0d05e9f0a8c0c0be202ad6cfddbe8f81ccf60c9d Mon Sep 17 00:00:00 2001 From: oldli <48485262@qq.com> Date: Thu, 23 Jul 2026 14:56:39 +0800 Subject: [PATCH] feat: add advanced UI dashboard schema example with fine-grained style params Co-Authored-By: Claude Sonnet 5 --- schema/examples/ui-advanced.json | 367 +++++++++++++++++++++++++++++++ 1 file changed, 367 insertions(+) create mode 100644 schema/examples/ui-advanced.json diff --git a/schema/examples/ui-advanced.json b/schema/examples/ui-advanced.json new file mode 100644 index 0000000..23fe62d --- /dev/null +++ b/schema/examples/ui-advanced.json @@ -0,0 +1,367 @@ +{ + "presentation": { + "layout": "LAYOUT_16x9", + "title": "金融数据看板 - Advanced UI" + }, + "slides": [ + { + "background": { + "color": "0D0D2B" + }, + "objects": [ + { + "type": "shape", + "shapeName": "rect", + "options": { + "x": 0, + "y": 0, + "w": 10, + "h": 5.625, + "fill": { "color": "0D0D2B" } + } + }, + { + "type": "shape", + "shapeName": "rect", + "options": { + "x": 0, + "y": 0, + "w": 10, + "h": 5.625, + "fill": { "color": "1A0A3E", "transparency": 50 } + } + }, + { + "type": "shape", + "shapeName": "rect", + "options": { + "x": 0, + "y": 0, + "w": 10, + "h": 0.65, + "fill": { "color": "1A1A3A" } + } + }, + { + "type": "text", + "text": "金融数据看板", + "options": { + "x": 0.4, + "y": 0.12, + "w": 5, + "h": 0.4, + "fontSize": 20, + "fontFace": "Arial", + "color": "FFFFFF", + "bold": true, + "charSpacing": 3, + "glow": { "color": "6669E3", "opacity": 0.6, "size": 4 } + } + }, + { + "type": "text", + "text": "2026-07-23 14:30:00", + "options": { + "x": 7.2, + "y": 0.15, + "w": 2.5, + "h": 0.35, + "fontSize": 11, + "fontFace": "Arial", + "color": "FFFFFF", + "transparency": 40, + "align": "right" + } + }, + { + "type": "shape", + "shapeName": "roundRect", + "options": { + "x": 0.4, + "y": 0.9, + "w": 2.1, + "h": 1.3, + "fill": { "color": "1E1E3A" }, + "rectRadius": 0.15, + "shadow": { "type": "outer", "blur": 8, "offset": 3, "color": "000000", "opacity": 0.4 } + } + }, + { + "type": "text", + "text": "¥12.8亿", + "options": { + "x": 0.4, + "y": 1.0, + "w": 2.1, + "h": 0.5, + "fontSize": 26, + "fontFace": "Arial", + "color": "FFFFFF", + "bold": true, + "align": "center" + } + }, + { + "type": "text", + "text": "总资产", + "options": { + "x": 0.4, + "y": 1.65, + "w": 2.1, + "h": 0.3, + "fontSize": 12, + "fontFace": "Arial", + "color": "AAAAAA", + "align": "center" + } + }, + { + "type": "shape", + "shapeName": "roundRect", + "options": { + "x": 2.75, + "y": 0.9, + "w": 2.1, + "h": 1.3, + "fill": { "color": "1E1E3A" }, + "rectRadius": 0.15, + "shadow": { "type": "outer", "blur": 8, "offset": 3, "color": "000000", "opacity": 0.4 } + } + }, + { + "type": "text", + "text": "¥3,240万", + "options": { + "x": 2.75, + "y": 1.0, + "w": 2.1, + "h": 0.5, + "fontSize": 26, + "fontFace": "Arial", + "color": "3BC798", + "bold": true, + "align": "center" + } + }, + { + "type": "text", + "text": "今日交易额", + "options": { + "x": 2.75, + "y": 1.65, + "w": 2.1, + "h": 0.3, + "fontSize": 12, + "fontFace": "Arial", + "color": "AAAAAA", + "align": "center" + } + }, + { + "type": "shape", + "shapeName": "roundRect", + "options": { + "x": 5.1, + "y": 0.9, + "w": 2.1, + "h": 1.3, + "fill": { "color": "1E1E3A" }, + "rectRadius": 0.15, + "shadow": { "type": "outer", "blur": 8, "offset": 3, "color": "000000", "opacity": 0.4 } + } + }, + { + "type": "text", + "text": "-2.34%", + "options": { + "x": 5.1, + "y": 1.0, + "w": 2.1, + "h": 0.5, + "fontSize": 26, + "fontFace": "Arial", + "color": "FF6752", + "bold": true, + "align": "center" + } + }, + { + "type": "text", + "text": "市场指数", + "options": { + "x": 5.1, + "y": 1.65, + "w": 2.1, + "h": 0.3, + "fontSize": 12, + "fontFace": "Arial", + "color": "AAAAAA", + "align": "center" + } + }, + { + "type": "shape", + "shapeName": "roundRect", + "options": { + "x": 7.45, + "y": 0.9, + "w": 2.1, + "h": 1.3, + "fill": { "color": "1E1E3A" }, + "rectRadius": 0.15, + "shadow": { "type": "outer", "blur": 8, "offset": 3, "color": "000000", "opacity": 0.4 } + } + }, + { + "type": "shape", + "shapeName": "roundRect", + "options": { + "x": 7.45, + "y": 0.9, + "w": 2.1, + "h": 1.3, + "fill": { "color": "6669E3", "transparency": 80 }, + "rectRadius": 0.15 + } + }, + { + "type": "text", + "text": "+8.56%", + "options": { + "x": 7.45, + "y": 1.0, + "w": 2.1, + "h": 0.5, + "fontSize": 26, + "fontFace": "Arial", + "color": "3BC798", + "bold": true, + "align": "center" + } + }, + { + "type": "text", + "text": "年化收益率", + "options": { + "x": 7.45, + "y": 1.65, + "w": 2.1, + "h": 0.3, + "fontSize": 12, + "fontFace": "Arial", + "color": "AAAAAA", + "align": "center" + } + }, + { + "type": "chart", + "chartType": "line", + "data": [ + { + "name": "上证指数", + "labels": ["09:30", "10:30", "11:30", "13:30", "14:30", "15:00"], + "values": [3250, 3280, 3265, 3295, 3310, 3305] + }, + { + "name": "沪深300", + "labels": ["09:30", "10:30", "11:30", "13:30", "14:30", "15:00"], + "values": [3980, 4020, 4005, 4045, 4070, 4060] + } + ], + "options": { + "x": 0.4, + "y": 2.5, + "w": 9.2, + "h": 1.7, + "chartColors": ["6669E3", "3BC798"], + "lineSize": 2.5, + "showLegend": true, + "showTitle": true, + "title": "市场走势", + "titleColor": "FFFFFF", + "titleFontSize": 12, + "legendColor": "AAAAAA", + "legendFontSize": 9, + "legendPos": "b", + "catAxisLabelColor": "888888", + "catAxisLabelFontSize": 8, + "valAxisLabelColor": "888888", + "valAxisLabelFontSize": 8, + "catGridLine": { "color": "2A2A4A", "size": 0.5, "style": "dash" }, + "valGridLine": { "color": "2A2A4A", "size": 0.5, "style": "solid" }, + "lineDataSymbol": "circle", + "lineDataSymbolSize": 4, + "lineDataSymbolLineColor": "FFFFFF", + "plotArea": { "fill": { "color": "16162E" } } + } + }, + { + "type": "table", + "rows": [ + [ + { "text": "股票代码", "options": { "bold": true, "fill": { "color": "262650" }, "color": "FFFFFF", "fontSize": 10, "align": "center" } }, + { "text": "名称", "options": { "bold": true, "fill": { "color": "262650" }, "color": "FFFFFF", "fontSize": 10, "align": "center" } }, + { "text": "最新价", "options": { "bold": true, "fill": { "color": "262650" }, "color": "FFFFFF", "fontSize": 10, "align": "center" } }, + { "text": "涨跌幅", "options": { "bold": true, "fill": { "color": "262650" }, "color": "FFFFFF", "fontSize": 10, "align": "center" } } + ], + [ + { "text": "600001", "options": { "fill": { "color": "1E1E3A" }, "color": "CCCCCC", "fontSize": 9, "align": "center" } }, + { "text": "平安银行", "options": { "fill": { "color": "1E1E3A" }, "color": "CCCCCC", "fontSize": 9, "align": "center" } }, + { "text": "14.58", "options": { "fill": { "color": "1E1E3A" }, "color": "3BC798", "fontSize": 9, "align": "center" } }, + { "text": "+2.15%", "options": { "fill": { "color": "1E1E3A" }, "color": "3BC798", "fontSize": 9, "align": "center" } } + ], + [ + { "text": "600002", "options": { "fill": { "color": "252540" }, "color": "CCCCCC", "fontSize": 9, "align": "center" } }, + { "text": "科技创新", "options": { "fill": { "color": "252540" }, "color": "CCCCCC", "fontSize": 9, "align": "center" } }, + { "text": "28.90", "options": { "fill": { "color": "252540" }, "color": "FF6752", "fontSize": 9, "align": "center" } }, + { "text": "-1.34%", "options": { "fill": { "color": "252540" }, "color": "FF6752", "fontSize": 9, "align": "center" } } + ], + [ + { "text": "600003", "options": { "fill": { "color": "1E1E3A" }, "color": "CCCCCC", "fontSize": 9, "align": "center" } }, + { "text": "绿色能源", "options": { "fill": { "color": "1E1E3A" }, "color": "CCCCCC", "fontSize": 9, "align": "center" } }, + { "text": "45.20", "options": { "fill": { "color": "1E1E3A" }, "color": "3BC798", "fontSize": 9, "align": "center" } }, + { "text": "+3.67%", "options": { "fill": { "color": "1E1E3A" }, "color": "3BC798", "fontSize": 9, "align": "center" } } + ], + [ + { "text": "600004", "options": { "fill": { "color": "252540" }, "color": "CCCCCC", "fontSize": 9, "align": "center" } }, + { "text": "医药健康", "options": { "fill": { "color": "252540" }, "color": "CCCCCC", "fontSize": 9, "align": "center" } }, + { "text": "62.10", "options": { "fill": { "color": "252540" }, "color": "FF6752", "fontSize": 9, "align": "center" } }, + { "text": "-0.52%", "options": { "fill": { "color": "252540" }, "color": "FF6752", "fontSize": 9, "align": "center" } } + ] + ], + "options": { + "x": 0.4, + "y": 4.4, + "w": 9.2, + "h": 1.0, + "colW": [1.5, 3.2, 2.0, 2.5], + "border": { "type": "solid", "color": "2A2A4A", "pt": 0.5 }, + "align": "center" + } + }, + { + "type": "shape", + "shapeName": "rect", + "options": { + "x": 0, + "y": 0.7, + "w": 0.06, + "h": 3.5, + "fill": { "color": "6669E3", "transparency": 60 } + } + }, + { + "type": "shape", + "shapeName": "ellipse", + "options": { + "x": 9.3, + "y": 4.9, + "w": 0.4, + "h": 0.4, + "fill": { "color": "6669E3", "transparency": 50 } + } + } + ] + } + ] +}