update at 2026-02-13 22:55:01
This commit is contained in:
douboer@gmail.com
777
miniapp/data/theme-presets.js
Normal file
777
miniapp/data/theme-presets.js
Normal file
@@ -0,0 +1,777 @@
|
||||
module.exports = [
|
||||
{
|
||||
"id": "figma-aegean",
|
||||
"name": "Figma-Aegean",
|
||||
"colors": [
|
||||
"#264653",
|
||||
"#287271",
|
||||
"#2A9D8F",
|
||||
"#8AB17D",
|
||||
"#E9C46A",
|
||||
"#EFB366",
|
||||
"#F4A261",
|
||||
"#F1965D",
|
||||
"#EE8959",
|
||||
"#E76F51"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-violet",
|
||||
"name": "Figma-Violet",
|
||||
"colors": [
|
||||
"#F72585",
|
||||
"#B5179E",
|
||||
"#7209B7",
|
||||
"#560BAD",
|
||||
"#480CA8",
|
||||
"#3A0CA3",
|
||||
"#3F37C9",
|
||||
"#4361EE",
|
||||
"#4895EF",
|
||||
"#4CC9F0"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-1",
|
||||
"name": "Figma-01",
|
||||
"colors": [
|
||||
"#322F4F",
|
||||
"#433E71",
|
||||
"#554C93",
|
||||
"#98958C",
|
||||
"#DBDD85",
|
||||
"#D8DD7D",
|
||||
"#D5DB74",
|
||||
"#CED56E",
|
||||
"#C8CF67",
|
||||
"#BAC35A"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-2",
|
||||
"name": "Figma-02",
|
||||
"colors": [
|
||||
"#2B3B51",
|
||||
"#355971",
|
||||
"#3F7690",
|
||||
"#91A483",
|
||||
"#E2D075",
|
||||
"#E4C66F",
|
||||
"#E4BD69",
|
||||
"#E0B464",
|
||||
"#DBAA5F",
|
||||
"#D19654"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-3",
|
||||
"name": "Figma-03",
|
||||
"colors": [
|
||||
"#274D4C",
|
||||
"#2B7171",
|
||||
"#2F9595",
|
||||
"#8B9395",
|
||||
"#E79094",
|
||||
"#EC878A",
|
||||
"#EF7D7F",
|
||||
"#EC7578",
|
||||
"#E86D6F",
|
||||
"#E15D5F"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-4",
|
||||
"name": "Figma-04",
|
||||
"colors": [
|
||||
"#3D3D3D",
|
||||
"#5B5B5B",
|
||||
"#797979",
|
||||
"#9F9F9F",
|
||||
"#C4C4C4",
|
||||
"#BCBCBC",
|
||||
"#B3B3B3",
|
||||
"#AAAAAA",
|
||||
"#A1A1A1",
|
||||
"#8F8F8F"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-5",
|
||||
"name": "Figma-05",
|
||||
"colors": [
|
||||
"#F4F1DE",
|
||||
"#EAB69F",
|
||||
"#E07A5F",
|
||||
"#8F5D5D",
|
||||
"#3D405B",
|
||||
"#5F797B",
|
||||
"#81B29A",
|
||||
"#9EB998",
|
||||
"#BABF95",
|
||||
"#F2CC8F"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-6",
|
||||
"name": "Figma-06",
|
||||
"colors": [
|
||||
"#F2F3E3",
|
||||
"#D6DAA5",
|
||||
"#B9C167",
|
||||
"#7C805D",
|
||||
"#3E3D52",
|
||||
"#68667A",
|
||||
"#938FA1",
|
||||
"#A8A6A1",
|
||||
"#BBBBA1",
|
||||
"#E3E6A1"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-7",
|
||||
"name": "Figma-07",
|
||||
"colors": [
|
||||
"#F3F1E0",
|
||||
"#E0C7A1",
|
||||
"#CD9B62",
|
||||
"#856D5D",
|
||||
"#3D3F57",
|
||||
"#63707A",
|
||||
"#89A19D",
|
||||
"#A2B09C",
|
||||
"#BABD9A",
|
||||
"#EBD896"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-8",
|
||||
"name": "Figma-08",
|
||||
"colors": [
|
||||
"#F3E6E7",
|
||||
"#E7A8A9",
|
||||
"#DA6A6B",
|
||||
"#8C5D5D",
|
||||
"#3D4F4E",
|
||||
"#607A7A",
|
||||
"#83A4A5",
|
||||
"#9FA6A7",
|
||||
"#BAA7A8",
|
||||
"#F0A9AB"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-9",
|
||||
"name": "Figma-09",
|
||||
"colors": [
|
||||
"#EFEFEF",
|
||||
"#C2C2C2",
|
||||
"#959595",
|
||||
"#6B6B6B",
|
||||
"#424242",
|
||||
"#717171",
|
||||
"#A0A0A0",
|
||||
"#ADADAD",
|
||||
"#B8B8B8",
|
||||
"#D0D0D0"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-10",
|
||||
"name": "Figma-10",
|
||||
"colors": [
|
||||
"#A8B868",
|
||||
"#798575",
|
||||
"#4A5282",
|
||||
"#393F7C",
|
||||
"#313679",
|
||||
"#282C75",
|
||||
"#3C3C9D",
|
||||
"#4E4CC3",
|
||||
"#645FD4",
|
||||
"#7A71E4"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-11",
|
||||
"name": "Figma-11",
|
||||
"colors": [
|
||||
"#EF476F",
|
||||
"#F78C6B",
|
||||
"#FFD166",
|
||||
"#83D483",
|
||||
"#06D6A0",
|
||||
"#001914",
|
||||
"#118AB2",
|
||||
"#0F7799",
|
||||
"#0C637F",
|
||||
"#073B4C"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-12",
|
||||
"name": "Figma-12",
|
||||
"colors": [
|
||||
"#D06A79",
|
||||
"#984B8D",
|
||||
"#5E2BA1",
|
||||
"#482398",
|
||||
"#3D1F94",
|
||||
"#311B90",
|
||||
"#3D39B6",
|
||||
"#4857DC",
|
||||
"#567BE3",
|
||||
"#629FEB"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-13",
|
||||
"name": "Figma-13",
|
||||
"colors": [
|
||||
"#B0BC63",
|
||||
"#CED674",
|
||||
"#EDF186",
|
||||
"#A19B9B",
|
||||
"#5444B0",
|
||||
"#493DAB",
|
||||
"#3E35A6",
|
||||
"#362E8E",
|
||||
"#2C2676",
|
||||
"#1A1646"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-14",
|
||||
"name": "Figma-14",
|
||||
"colors": [
|
||||
"#D07E6A",
|
||||
"#E3AF6F",
|
||||
"#F6E073",
|
||||
"#91B98D",
|
||||
"#2C90A6",
|
||||
"#2A79A9",
|
||||
"#2761AD",
|
||||
"#225494",
|
||||
"#1B467B",
|
||||
"#102949"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-15",
|
||||
"name": "Figma-15",
|
||||
"colors": [
|
||||
"#E65D5C",
|
||||
"#F1797A",
|
||||
"#FC9498",
|
||||
"#87A6A9",
|
||||
"#10B7B9",
|
||||
"#14ACAC",
|
||||
"#17A09F",
|
||||
"#148A88",
|
||||
"#107271",
|
||||
"#094443"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-16",
|
||||
"name": "Figma-16",
|
||||
"colors": [
|
||||
"#7D7D7D",
|
||||
"#A8A8A8",
|
||||
"#D2D2D2",
|
||||
"#B2B2B2",
|
||||
"#919191",
|
||||
"#7E7E7E",
|
||||
"#6A6A6A",
|
||||
"#5B5B5B",
|
||||
"#4C4C4C",
|
||||
"#2D2D2D"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-17",
|
||||
"name": "Figma-17",
|
||||
"colors": [
|
||||
"#5F0F40",
|
||||
"#7D092F",
|
||||
"#9A031E",
|
||||
"#CB4721",
|
||||
"#FB8B24",
|
||||
"#EF781C",
|
||||
"#E36414",
|
||||
"#AE5E26",
|
||||
"#795838",
|
||||
"#0F4C5C"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-18",
|
||||
"name": "Figma-18",
|
||||
"colors": [
|
||||
"#414731",
|
||||
"#515A23",
|
||||
"#616C15",
|
||||
"#99A32C",
|
||||
"#D1D942",
|
||||
"#C2CB37",
|
||||
"#B3BC2C",
|
||||
"#909636",
|
||||
"#6C6F41",
|
||||
"#252157"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-19",
|
||||
"name": "Figma-19",
|
||||
"colors": [
|
||||
"#502939",
|
||||
"#672F2A",
|
||||
"#7E351A",
|
||||
"#B27225",
|
||||
"#E6B030",
|
||||
"#D99F27",
|
||||
"#CB8E1E",
|
||||
"#9F782D",
|
||||
"#72623C",
|
||||
"#1A375A"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-20",
|
||||
"name": "Figma-20",
|
||||
"colors": [
|
||||
"#5B2A28",
|
||||
"#771E1C",
|
||||
"#921211",
|
||||
"#C43133",
|
||||
"#F55054",
|
||||
"#E94347",
|
||||
"#DC363A",
|
||||
"#AA3E40",
|
||||
"#774547",
|
||||
"#125554"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-21",
|
||||
"name": "Figma-21",
|
||||
"colors": [
|
||||
"#2C2C2C",
|
||||
"#303030",
|
||||
"#333333",
|
||||
"#6A6A6A",
|
||||
"#A0A0A0",
|
||||
"#919191",
|
||||
"#808080",
|
||||
"#6F6F6F",
|
||||
"#5E5E5E",
|
||||
"#3B3B3B"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-22",
|
||||
"name": "Figma-22",
|
||||
"colors": [
|
||||
"#366260",
|
||||
"#516765",
|
||||
"#6C6B6A",
|
||||
"#8E6D6C",
|
||||
"#B16E6D",
|
||||
"#C76E6D",
|
||||
"#DE6D6D",
|
||||
"#E38384",
|
||||
"#E6999A"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-23",
|
||||
"name": "Figma-23",
|
||||
"colors": [
|
||||
"#39476C",
|
||||
"#515371",
|
||||
"#695F75",
|
||||
"#876F74",
|
||||
"#A67F73",
|
||||
"#BA8971",
|
||||
"#CE936E",
|
||||
"#D7AA7E",
|
||||
"#DEC08F"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-24",
|
||||
"name": "Figma-24",
|
||||
"colors": [
|
||||
"#3F3D66",
|
||||
"#52526B",
|
||||
"#656770",
|
||||
"#7E8270",
|
||||
"#979D70",
|
||||
"#A7AE6F",
|
||||
"#B7C06D",
|
||||
"#C5CC81",
|
||||
"#D2D794"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-25",
|
||||
"name": "Figma-25",
|
||||
"colors": [
|
||||
"#4B4B4B",
|
||||
"#575757",
|
||||
"#626262",
|
||||
"#707070",
|
||||
"#7E7E7E",
|
||||
"#878787",
|
||||
"#8F8F8F",
|
||||
"#A5A5A5",
|
||||
"#BABABA"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-26",
|
||||
"name": "Figma-26",
|
||||
"colors": [
|
||||
"#363636",
|
||||
"#474747",
|
||||
"#585858",
|
||||
"#9C9C9C",
|
||||
"#E0E0E0",
|
||||
"#A5A5A5",
|
||||
"#696969",
|
||||
"#565656",
|
||||
"#424242"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-27",
|
||||
"name": "Figma-27",
|
||||
"colors": [
|
||||
"#293B3B",
|
||||
"#235959",
|
||||
"#1D7575",
|
||||
"#84A6A6",
|
||||
"#ECD7D8",
|
||||
"#D58A8A",
|
||||
"#BD3C3D",
|
||||
"#993333",
|
||||
"#732829"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-28",
|
||||
"name": "Figma-28",
|
||||
"colors": [
|
||||
"#2B363B",
|
||||
"#2B4559",
|
||||
"#295477",
|
||||
"#899BA6",
|
||||
"#EAE2D5",
|
||||
"#CBA886",
|
||||
"#AC6F37",
|
||||
"#8B5B2F",
|
||||
"#694626"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-29",
|
||||
"name": "Figma-29",
|
||||
"colors": [
|
||||
"#2F2E3B",
|
||||
"#353159",
|
||||
"#3A3376",
|
||||
"#908EA6",
|
||||
"#E7E8D6",
|
||||
"#BEC388",
|
||||
"#949D3A",
|
||||
"#788031",
|
||||
"#5B6127"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-30",
|
||||
"name": "Figma-30",
|
||||
"colors": [
|
||||
"#283D3B",
|
||||
"#21585A",
|
||||
"#197278",
|
||||
"#83A8A6",
|
||||
"#EDDDD4",
|
||||
"#D99185",
|
||||
"#E9B5AF",
|
||||
"#9E3A2E",
|
||||
"#772E25"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-31",
|
||||
"name": "Figma-31",
|
||||
"colors": [
|
||||
"#BDBDBD",
|
||||
"#9D9D9D",
|
||||
"#7E7E7E",
|
||||
"#6B6B6B",
|
||||
"#585858",
|
||||
"#5D5D5D",
|
||||
"#606060",
|
||||
"#626262",
|
||||
"#707070",
|
||||
"#7D7D7D"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-32",
|
||||
"name": "Figma-32",
|
||||
"colors": [
|
||||
"#FB5860",
|
||||
"#F74046",
|
||||
"#F2292C",
|
||||
"#F23433",
|
||||
"#F23E39",
|
||||
"#B86E68",
|
||||
"#9C867F",
|
||||
"#7F9E96",
|
||||
"#5FB4AE",
|
||||
"#3DCAC5"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-33",
|
||||
"name": "Figma-33",
|
||||
"colors": [
|
||||
"#F3D321",
|
||||
"#E7B019",
|
||||
"#DC8C10",
|
||||
"#D67039",
|
||||
"#D05460",
|
||||
"#A2529A",
|
||||
"#8C51B8",
|
||||
"#7550D5",
|
||||
"#5F5FE3",
|
||||
"#476CEF"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-34",
|
||||
"name": "Figma-34",
|
||||
"colors": [
|
||||
"#E6EB40",
|
||||
"#D1DA2F",
|
||||
"#BDC91E",
|
||||
"#AEBE36",
|
||||
"#9FB24D",
|
||||
"#838F81",
|
||||
"#757E9C",
|
||||
"#666CB6",
|
||||
"#5F5FC8",
|
||||
"#5650DA"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-35",
|
||||
"name": "Figma-35",
|
||||
"colors": [
|
||||
"#FFBE0B",
|
||||
"#FD8A09",
|
||||
"#FB5607",
|
||||
"#FD2B3B",
|
||||
"#FF006E",
|
||||
"#C11CAD",
|
||||
"#A22ACD",
|
||||
"#8338EC",
|
||||
"#5F5FF6",
|
||||
"#3A86FF"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-36",
|
||||
"name": "Figma-36",
|
||||
"colors": [
|
||||
"#6E6E6E",
|
||||
"#555555",
|
||||
"#3C3C3C",
|
||||
"#333333",
|
||||
"#2F2F2F",
|
||||
"#2A2A2A",
|
||||
"#4A4A4A",
|
||||
"#686868",
|
||||
"#888888",
|
||||
"#A8A8A8"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-37",
|
||||
"name": "Figma-37",
|
||||
"colors": [
|
||||
"#EC5B57",
|
||||
"#AD635D",
|
||||
"#6C6B64",
|
||||
"#526660",
|
||||
"#45645D",
|
||||
"#37615B",
|
||||
"#3E8983",
|
||||
"#44B0AB",
|
||||
"#4BC8C4",
|
||||
"#52DFDD"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-38",
|
||||
"name": "Figma-38",
|
||||
"colors": [
|
||||
"#05668D",
|
||||
"#04738F",
|
||||
"#028090",
|
||||
"#019493",
|
||||
"#00A896",
|
||||
"#01B698",
|
||||
"#02C39A",
|
||||
"#79DBAC",
|
||||
"#B5E7B5",
|
||||
"#F0F3BD"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-39",
|
||||
"name": "Figma-39",
|
||||
"colors": [
|
||||
"#292281",
|
||||
"#2D2586",
|
||||
"#31278B",
|
||||
"#382D93",
|
||||
"#3F329B",
|
||||
"#4437A1",
|
||||
"#4A3BA6",
|
||||
"#9D96BA",
|
||||
"#C7C4C4",
|
||||
"#F1F0CD"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-40",
|
||||
"name": "Figma-40",
|
||||
"colors": [
|
||||
"#164588",
|
||||
"#184E8B",
|
||||
"#19568E",
|
||||
"#1B6393",
|
||||
"#1E7098",
|
||||
"#22799B",
|
||||
"#25829F",
|
||||
"#8ABAB1",
|
||||
"#BED6BB",
|
||||
"#F0F2C3"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-41",
|
||||
"name": "Figma-41",
|
||||
"colors": [
|
||||
"#097C7A",
|
||||
"#098281",
|
||||
"#088988",
|
||||
"#089393",
|
||||
"#089D9E",
|
||||
"#0AA4A6",
|
||||
"#0BABAD",
|
||||
"#7DC0C2",
|
||||
"#B7CACC",
|
||||
"#F0D4D6"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-42",
|
||||
"name": "Figma-42",
|
||||
"colors": [
|
||||
"#4D4D4D",
|
||||
"#555555",
|
||||
"#5C5C5C",
|
||||
"#676767",
|
||||
"#737373",
|
||||
"#7C7C7C",
|
||||
"#848484",
|
||||
"#B8B8B8",
|
||||
"#D2D2D2",
|
||||
"#EBEBEB"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-43",
|
||||
"name": "Figma-43",
|
||||
"colors": [
|
||||
"#16697A",
|
||||
"#2F8498",
|
||||
"#489FB5",
|
||||
"#65B0C1",
|
||||
"#9DCAD2",
|
||||
"#B8D4D8",
|
||||
"#EDE7E3",
|
||||
"#F2D7B5",
|
||||
"#F6C787",
|
||||
"#FFA62B"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-44",
|
||||
"name": "Figma-44",
|
||||
"colors": [
|
||||
"#352E74",
|
||||
"#4E4892",
|
||||
"#6862AE",
|
||||
"#817BBB",
|
||||
"#ADAACF",
|
||||
"#C2C0D6",
|
||||
"#EAEBE4",
|
||||
"#E7E9BF",
|
||||
"#E4E79A",
|
||||
"#DDE44F"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-45",
|
||||
"name": "Figma-45",
|
||||
"colors": [
|
||||
"#254D77",
|
||||
"#3E6795",
|
||||
"#5782B2",
|
||||
"#7297BE",
|
||||
"#A5BBD1",
|
||||
"#BDCAD7",
|
||||
"#EBE8E3",
|
||||
"#EDDFB9",
|
||||
"#EDD68F",
|
||||
"#EEC33A"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-46",
|
||||
"name": "Figma-46",
|
||||
"colors": [
|
||||
"#1A7271",
|
||||
"#338F8E",
|
||||
"#4CABAA",
|
||||
"#68B9B8",
|
||||
"#9FCECE",
|
||||
"#B9D6D6",
|
||||
"#ECE4E4",
|
||||
"#F0C3C5",
|
||||
"#F3A2A5",
|
||||
"#FA6065"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "figma-47",
|
||||
"name": "Figma-47",
|
||||
"colors": [
|
||||
"#525252",
|
||||
"#6C6C6C",
|
||||
"#878787",
|
||||
"#9B9B9B",
|
||||
"#BDBDBD",
|
||||
"#CCCCCC",
|
||||
"#E8E8E8",
|
||||
"#DBDBDB",
|
||||
"#CDCDCD",
|
||||
"#B2B2B2"
|
||||
]
|
||||
}
|
||||
];
|
||||
@@ -1,5 +1,6 @@
|
||||
const { parseTableByFileName, buildSankeyData } = require('../../utils/sankey');
|
||||
const defaultSankeyTable = require('../../data/sankey.default.js');
|
||||
const themePresets = require('../../data/theme-presets.js');
|
||||
|
||||
/**
|
||||
* 将表头标准化，便于做中英文别名匹配。
|
||||
@@ -65,11 +66,39 @@ function getFileExtension(fileName) {
|
||||
return lowerName.slice(lastDotIndex + 1);
|
||||
}
|
||||
|
||||
const FALLBACK_THEME_COLORS = ['#9b6bc2', '#7e95f7', '#4cc9f0', '#f4a261'];
|
||||
|
||||
/**
|
||||
* 节点配色：与当前画布渲染保持一致，双色交替。
|
||||
* 节点配色：使用当前主题色带循环取色。
|
||||
*/
|
||||
function getNodeColor(index) {
|
||||
return index % 2 === 0 ? '#9b6bc2' : '#7e95f7';
|
||||
function getNodeColor(index, palette) {
|
||||
const colors = Array.isArray(palette) && palette.length > 0 ? palette : FALLBACK_THEME_COLORS;
|
||||
return colors[index % colors.length];
|
||||
}
|
||||
|
||||
/**
|
||||
* 将 16 进制颜色转换为 rgba，便于控制连线透明度。
|
||||
*/
|
||||
function toRgbaColor(color, alpha) {
|
||||
const text = String(color || '').trim();
|
||||
const safeAlpha = Number.isFinite(Number(alpha)) ? Math.max(0, Math.min(1, Number(alpha))) : 1;
|
||||
const shortHex = /^#([0-9a-fA-F]{3})$/;
|
||||
const longHex = /^#([0-9a-fA-F]{6})$/;
|
||||
|
||||
let hex = '';
|
||||
if (shortHex.test(text)) {
|
||||
const raw = text.slice(1);
|
||||
hex = `${raw[0]}${raw[0]}${raw[1]}${raw[1]}${raw[2]}${raw[2]}`;
|
||||
} else if (longHex.test(text)) {
|
||||
hex = text.slice(1);
|
||||
} else {
|
||||
return text || `rgba(155,107,194,${safeAlpha})`;
|
||||
}
|
||||
|
||||
const r = parseInt(hex.slice(0, 2), 16);
|
||||
const g = parseInt(hex.slice(2, 4), 16);
|
||||
const b = parseInt(hex.slice(4, 6), 16);
|
||||
return `rgba(${r},${g},${b},${safeAlpha})`;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -137,6 +166,14 @@ const DEFAULT_SANKEY_FILE_PATHS = [
|
||||
'data/sankey.xlsx',
|
||||
'miniapp/data/sankey.xlsx'
|
||||
];
|
||||
const DEFAULT_THEME_ID = 'figma-violet';
|
||||
const DEFAULT_THEME_INDEX = (() => {
|
||||
if (!Array.isArray(themePresets) || themePresets.length === 0) {
|
||||
return 0;
|
||||
}
|
||||
const index = themePresets.findIndex((item) => item && item.id === DEFAULT_THEME_ID);
|
||||
return index >= 0 ? index : 0;
|
||||
})();
|
||||
|
||||
/**
|
||||
* 数值限制，避免 UI 参数导致布局异常。
|
||||
@@ -256,6 +293,10 @@ function buildSankeyLayout(links, width, height, renderOptions) {
|
||||
|
||||
const sourceNames = Object.keys(sourceValueMap);
|
||||
const targetNames = Object.keys(targetValueMap);
|
||||
const sourceIndexMap = {};
|
||||
sourceNames.forEach((name, index) => {
|
||||
sourceIndexMap[name] = index;
|
||||
});
|
||||
const totalValue = sourceNames.reduce((sum, name) => sum + sourceValueMap[name], 0);
|
||||
if (totalValue <= 0) {
|
||||
return null;
|
||||
@@ -329,7 +370,8 @@ function buildSankeyLayout(links, width, height, renderOptions) {
|
||||
controlX,
|
||||
sy,
|
||||
ty,
|
||||
linkHeight
|
||||
linkHeight,
|
||||
sourceIndex: Number.isFinite(sourceIndexMap[link.source]) ? sourceIndexMap[link.source] : 0
|
||||
});
|
||||
});
|
||||
|
||||
@@ -354,6 +396,12 @@ function buildSankeySvgText(links, width, height, renderOptions) {
|
||||
return '';
|
||||
}
|
||||
const labelPositionMode = (renderOptions && renderOptions.labelPositionMode) || 'inner';
|
||||
const themeColors =
|
||||
renderOptions &&
|
||||
Array.isArray(renderOptions.themeColors) &&
|
||||
renderOptions.themeColors.length > 0
|
||||
? renderOptions.themeColors
|
||||
: FALLBACK_THEME_COLORS;
|
||||
|
||||
const segments = [];
|
||||
segments.push(
|
||||
@@ -372,7 +420,10 @@ function buildSankeySvgText(links, width, height, renderOptions) {
|
||||
segment.endX
|
||||
)} ${formatSvgNumber(segment.ty)}`;
|
||||
segments.push(
|
||||
`<path d="${pathData}" fill="none" stroke="#9b6bc2" stroke-opacity="0.35" stroke-width="${formatSvgNumber(
|
||||
`<path d="${pathData}" fill="none" stroke="${toRgbaColor(
|
||||
getNodeColor(segment.sourceIndex, themeColors),
|
||||
0.35
|
||||
)}" stroke-width="${formatSvgNumber(
|
||||
segment.linkHeight
|
||||
)}" stroke-linecap="round" />`
|
||||
);
|
||||
@@ -385,7 +436,7 @@ function buildSankeySvgText(links, width, height, renderOptions) {
|
||||
segments.push(
|
||||
`<rect x="${formatSvgNumber(layout.leftX)}" y="${formatSvgNumber(node.y)}" width="${formatSvgNumber(
|
||||
layout.nodeWidth
|
||||
)}" height="${formatSvgNumber(node.h)}" fill="${getNodeColor(index)}" />`
|
||||
)}" height="${formatSvgNumber(node.h)}" fill="${getNodeColor(index, themeColors)}" />`
|
||||
);
|
||||
segments.push(
|
||||
`<text x="${formatSvgNumber(textPlacement.x)}" y="${formatSvgNumber(textY)}" fill="#4e5969" font-size="10" text-anchor="${
|
||||
@@ -401,7 +452,7 @@ function buildSankeySvgText(links, width, height, renderOptions) {
|
||||
segments.push(
|
||||
`<rect x="${formatSvgNumber(layout.rightX)}" y="${formatSvgNumber(node.y)}" width="${formatSvgNumber(
|
||||
layout.nodeWidth
|
||||
)}" height="${formatSvgNumber(node.h)}" fill="${getNodeColor(index)}" />`
|
||||
)}" height="${formatSvgNumber(node.h)}" fill="${getNodeColor(index, themeColors)}" />`
|
||||
);
|
||||
segments.push(
|
||||
`<text x="${formatSvgNumber(textPlacement.x)}" y="${formatSvgNumber(textY)}" fill="#4e5969" font-size="10" text-anchor="${
|
||||
@@ -416,7 +467,8 @@ function buildSankeySvgText(links, width, height, renderOptions) {
|
||||
|
||||
Page({
|
||||
data: {
|
||||
selectedThemeIndex: 1,
|
||||
selectedThemeIndex: DEFAULT_THEME_INDEX,
|
||||
themes: Array.isArray(themePresets) ? themePresets : [],
|
||||
showThemeSheet: false,
|
||||
uploadMessage: '默认加载 data/sankey.xlsx 中...',
|
||||
parseError: '',
|
||||
@@ -525,6 +577,37 @@ Page({
|
||||
this.setData({ showThemeSheet: false });
|
||||
},
|
||||
|
||||
/**
|
||||
* 返回当前选中主题色带。
|
||||
*/
|
||||
getCurrentThemeColors() {
|
||||
const themes = this.data.themes || [];
|
||||
const selectedTheme = themes[this.data.selectedThemeIndex] || themes[0];
|
||||
if (!selectedTheme || !Array.isArray(selectedTheme.colors) || selectedTheme.colors.length === 0) {
|
||||
return FALLBACK_THEME_COLORS;
|
||||
}
|
||||
return selectedTheme.colors;
|
||||
},
|
||||
|
||||
/**
|
||||
* 选择主题后立即生效，并关闭底部主题弹层。
|
||||
*/
|
||||
onSelectTheme(e) {
|
||||
const index = Number(e.currentTarget.dataset.index);
|
||||
if (Number.isNaN(index)) {
|
||||
return;
|
||||
}
|
||||
this.setData(
|
||||
{
|
||||
selectedThemeIndex: index,
|
||||
showThemeSheet: false
|
||||
},
|
||||
() => {
|
||||
this.drawSankey();
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
/**
|
||||
* 更新“节点间距”下拉值并立即重绘。
|
||||
*/
|
||||
@@ -931,6 +1014,7 @@ Page({
|
||||
drawSankey() {
|
||||
const rawLinks = this.data.sankeyLinks || [];
|
||||
const links = applyDirection(rawLinks, this.data.direction);
|
||||
const themeColors = this.getCurrentThemeColors();
|
||||
const query = wx.createSelectorQuery().in(this);
|
||||
query.select('#sankeyCanvas').boundingClientRect();
|
||||
query.exec((res) => {
|
||||
@@ -960,7 +1044,7 @@ Page({
|
||||
}
|
||||
|
||||
layout.linkSegments.forEach((segment) => {
|
||||
ctx.setStrokeStyle('rgba(155,107,194,0.35)');
|
||||
ctx.setStrokeStyle(toRgbaColor(getNodeColor(segment.sourceIndex, themeColors), 0.35));
|
||||
ctx.setLineWidth(segment.linkHeight);
|
||||
ctx.setLineCap('round');
|
||||
ctx.beginPath();
|
||||
@@ -979,7 +1063,7 @@ Page({
|
||||
layout.sourceNames.forEach((name, index) => {
|
||||
const node = layout.sourcePos[name];
|
||||
const labelPlacement = getCanvasLabelPlacement(layout, true, this.data.labelPositionMode);
|
||||
ctx.setFillStyle(getNodeColor(index));
|
||||
ctx.setFillStyle(getNodeColor(index, themeColors));
|
||||
ctx.fillRect(layout.leftX, node.y, layout.nodeWidth, node.h);
|
||||
ctx.setFillStyle('#4e5969');
|
||||
ctx.setFontSize(10);
|
||||
@@ -991,7 +1075,7 @@ Page({
|
||||
layout.targetNames.forEach((name, index) => {
|
||||
const node = layout.targetPos[name];
|
||||
const labelPlacement = getCanvasLabelPlacement(layout, false, this.data.labelPositionMode);
|
||||
ctx.setFillStyle(getNodeColor(index));
|
||||
ctx.setFillStyle(getNodeColor(index, themeColors));
|
||||
ctx.fillRect(layout.rightX, node.y, layout.nodeWidth, node.h);
|
||||
ctx.setFillStyle('#4e5969');
|
||||
ctx.setFontSize(10);
|
||||
@@ -1049,6 +1133,7 @@ Page({
|
||||
onExportSvg() {
|
||||
const rawLinks = this.data.sankeyLinks || [];
|
||||
const links = applyDirection(rawLinks, this.data.direction);
|
||||
const themeColors = this.getCurrentThemeColors();
|
||||
if (!Array.isArray(links) || links.length === 0) {
|
||||
wx.showToast({
|
||||
title: '暂无可导出的数据',
|
||||
@@ -1073,7 +1158,8 @@ Page({
|
||||
nodeGap: this.data.nodeGap,
|
||||
chartPadding: this.data.chartPadding,
|
||||
labelPositionMode: this.data.labelPositionMode,
|
||||
targetAlignMode: this.data.targetAlignMode
|
||||
targetAlignMode: this.data.targetAlignMode,
|
||||
themeColors
|
||||
});
|
||||
if (!svgText) {
|
||||
wx.showToast({
|
||||
|
||||
@@ -156,12 +156,30 @@
|
||||
<view class="theme-sheet-mask" wx:if="{{showThemeSheet}}" bindtap="onCloseThemeSheet" />
|
||||
<view class="theme-sheet" wx:if="{{showThemeSheet}}">
|
||||
<text class="theme-title">选择配色主题</text>
|
||||
<view class="theme-row" wx:for="{{4}}" wx:key="index">
|
||||
<image
|
||||
src="{{selectedThemeIndex === index ? '../../assets/icons/radiobutton.svg' : '../../assets/icons/radiobutton-no.svg'}}"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<view class="theme-bar" />
|
||||
</view>
|
||||
<scroll-view class="theme-list" scroll-y enhanced show-scrollbar="true">
|
||||
<view
|
||||
class="theme-row"
|
||||
wx:for="{{themes}}"
|
||||
wx:key="id"
|
||||
wx:for-item="theme"
|
||||
wx:for-index="themeIndex"
|
||||
data-index="{{themeIndex}}"
|
||||
bindtap="onSelectTheme"
|
||||
>
|
||||
<image
|
||||
src="{{selectedThemeIndex === themeIndex ? '../../assets/icons/radiobutton.svg' : '../../assets/icons/radiobutton-no.svg'}}"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<view class="theme-bar">
|
||||
<view
|
||||
class="theme-color"
|
||||
wx:for="{{theme.colors}}"
|
||||
wx:key="*this"
|
||||
wx:for-item="color"
|
||||
style="background-color: {{color}};"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -385,8 +385,9 @@
|
||||
bottom: 0;
|
||||
background: #fff;
|
||||
border-radius: 16px 16px 0 0;
|
||||
padding: 12px;
|
||||
padding: 12px 12px 16px;
|
||||
z-index: 11;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.theme-title {
|
||||
@@ -395,11 +396,21 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.theme-row {
|
||||
.theme-list {
|
||||
margin-top: 8px;
|
||||
height: 216px;
|
||||
min-height: 216px;
|
||||
}
|
||||
|
||||
.theme-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.theme-row + .theme-row {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.theme-row image {
|
||||
@@ -411,5 +422,11 @@
|
||||
flex: 1;
|
||||
height: 20px;
|
||||
border-radius: 2px;
|
||||
background: linear-gradient(90deg, #f72585, #3f37c9, #4cc9f0);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.theme-color {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user