From 1928b112fb6ccda93a08969857a920061e64263e Mon Sep 17 00:00:00 2001 From: liyuanhu Date: Thu, 24 Apr 2025 18:53:32 +0800 Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A131=E7=9A=84=E4=B8=80=E4=BA=9B?= =?UTF-8?q?=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/data/index.ts | 1483 +++++++++-------- .../components/world-geo.tsx | 238 +-- .../decentralized-lastic-network/index.tsx | 32 +- src/pages/new-home/components/world-geo.tsx | 5 +- src/pages/new-home/index.tsx | 33 +- src/store/web3Slice.ts | 18 +- 6 files changed, 916 insertions(+), 893 deletions(-) diff --git a/src/data/index.ts b/src/data/index.ts index 5f18295..5ebd4c7 100644 --- a/src/data/index.ts +++ b/src/data/index.ts @@ -1,6 +1,6 @@ export const startCountry = { - country_code: 'HK', -} + country_code: "HK", +}; // 采用国家地区编码的方式编写数据。 // 国家地理坐标点，取国家中间位置而非国家首都 export const geoCoordMap: { [key: string]: number[] } = { @@ -76,6 +76,7 @@ export const geoCoordMap: { [key: string]: number[] } = { FR: [2.213749, 46.227638], // 法国 GA: [11.609444, -0.803689], // 加蓬 GB: [-3.435973, 55.378051], // 英国 + UK: [-3.435973, 55.378051], // 英国 GD: [-61.604171, 12.262776], // 格林纳达 GE: [43.356892, 42.315407], // 格鲁吉亚 GF: [-53.125782, 3.933889], // 法属圭亚那 @@ -246,758 +247,760 @@ export const geoCoordMap: { [key: string]: number[] } = { ZA: [22.937506, -30.559482], // 南非 ZM: [27.849332, -13.133897], // 赞比亚 ZW: [29.154857, -19.015438], // 津巴布韦 -} +}; // 地理映射 export const countryNameMap = { - China: '中国', - Afghanistan: '阿富汗', - Angola: '安哥拉', - Albania: '阿尔巴尼亚', - 'United Arab Emirates': '阿拉伯联合酋长国', - Argentina: '阿根廷', - Armenia: '亚美尼亚', - Antarctica: '南极洲', - 'French Southern and Antarctic Lands': '法国南部和南极地', - Australia: '澳大利亚', - Austria: '奥地利', - Azerbaijan: '阿塞拜疆', - Burundi: '布隆迪', - Belgium: '比利时', - Benin: '贝宁', - 'Burkina Faso': '布基纳法索', - Bangladesh: '孟加拉国', - Bulgaria: '保加利亚', - 'The Bahamas': '巴哈马', - 'Bosnia and Herzegovina': '波斯尼亚和黑塞哥维那', - Belarus: '白俄罗斯', - Belize: '伯利兹', - Bermuda: '百慕大', - Bolivia: '玻利维亚', - Brazil: '巴西', - Brunei: '文莱', - Bhutan: '不丹', - Botswana: '博茨瓦纳', - 'Central African Republic': '中非共和国', - Canada: '加拿大', - Switzerland: '瑞士', - Chile: '智利', - 'Ivory Coast': '海牙', - Cameroon: '喀麦隆', - 'Dem. Rep. Congo': '刚果民主共和国', - 'Republic of the Congo': '刚果共和国', - Colombia: '哥伦比亚', - 'Costa Rica': '哥斯达黎加', - Cuba: '古巴', - 'Northern Cyprus': '塞浦路斯北部', - Cyprus: '塞浦路斯', - 'Czech Republic': '捷克共和国', - Germany: '德国', - Djibouti: '吉布提', - Denmark: '丹麦', - 'Dominican Republic': '多明尼加共和国', - Algeria: '阿尔及利亚', - Ecuador: '厄瓜多尔', - Egypt: '埃及', - Eritrea: '厄立特里亚', - Spain: '西班牙', - Estonia: '爱沙尼亚', - Ethiopia: '埃塞俄比亚', - Finland: '芬兰', - Fiji: '斐济', - 'Falkland Is.': '福克兰群岛', - France: '法国', - Gabon: '加蓬', - 'United Kingdom': '英国', - Georgia: '格鲁吉亚', - Ghana: '加纳', - Guinea: '几内亚', - Gambia: '冈比亚', - 'Guinea-Bissau': '几内亚比绍', - 'Equatorial Guinea': '赤道几内亚', - Greece: '希腊', - Greenland: '格陵兰', - Guatemala: '危地马拉', - 'French Guiana': '法属圭亚那', - Guyana: '圭亚那', - Honduras: '洪都拉斯', - Croatia: '克罗地亚', - Haiti: '海地', - Hungary: '匈牙利', - Indonesia: '印度尼西亚', - India: '印度', - Ireland: '爱尔兰', - Iran: '伊朗', - Iraq: '伊拉克', - Iceland: '冰岛', - Israel: '以色列', - Italy: '意大利', - Jamaica: '牙买加', - Jordan: '约旦', - Japan: '日本', - Kazakhstan: '哈萨克斯坦', - Kenya: '肯尼亚', - Cambodia: '柬埔寨', - Korea: '韩国', - Kosovo: '科索沃', - Kuwait: '科威特', - 'Lao PDR': '老挝', - Lebanon: '黎巴嫩', - Liberia: '利比里亚', - Libya: '利比亚', - 'Sri Lanka': '斯里兰卡', - Lesotho: '莱索托', - Lithuania: '立陶宛', - Luxembourg: '卢森堡', - Latvia: '拉脱维亚', - Morocco: '摩洛哥', - Moldova: '摩尔瓦西亚', - Madagascar: '马达加斯加', - Mexico: '墨西哥', - Macedonia: '马其顿', - Mali: '马里', - Malta: '马耳他', - Myanmar: '缅甸', - Montenegro: '黑山', - Mongolia: '蒙古', - Mozambique: '莫桑比克', - Mauritania: '毛里塔尼亚', - Malawi: '马拉维', - Malaysia: '马来西亚', - Namibia: '纳米比亚', - 'New Caledonia': '新喀里多尼亚', - Niger: '尼日尔', - Nigeria: '尼日利亚', - Nicaragua: '尼加拉瓜', - Netherlands: '荷兰', - Norway: '挪威', - Nepal: '尼泊尔', - 'New Zealand': '新西兰', - Oman: '阿曼', - Pakistan: '巴基斯坦', - Panama: '巴拿马', - Peru: '秘鲁', - Philippines: '菲律宾', - 'Papua New Guinea': '巴布亚新几内亚', - Poland: '波兰', - 'Puerto Rico': '波多黎各', - 'Dem. Rep. Korea': '朝鲜', - Portugal: '葡萄牙', - Paraguay: '巴拉圭', - Qatar: '卡塔尔', - Romania: '罗马尼亚', - Russia: '俄罗斯', - Rwanda: '卢旺达', - 'W. Sahara': '西撒哈拉', - 'Saudi Arabia': '沙特阿拉伯', - Sudan: '苏丹', - 'South Sudan': '南苏丹', - Senegal: '塞内加尔', - 'Solomon Islands': '所罗门群岛', - 'Sierra Leone': '塞拉利昂', - 'El Salvador': '萨尔瓦多', - Somaliland: '索马里兰', - Somalia: '索马里', - 'Republic of Serbia': '塞尔维亚共和国', - Suriname: '苏里南', - Slovakia: '斯洛伐克', - Slovenia: '斯洛文尼亚', - Swaziland: '斯威士兰', - Sweden: '瑞典', - Syria: '叙利亚', - Chad: '查德', - Togo: '多哥', - Thailand: '泰国', - Tajikistan: '塔吉克斯坦', - Turkmenistan: '土库曼斯坦', - 'East Timor': '东帝汶', - 'Trinidad and Tobago': '特立尼达和多巴哥', - Tunisia: '哈萨克突尼斯斯坦', - Turkey: '土耳其', - 'Taiwan(China)': '台湾', - 'United Republic of Tanzania': '坦桑尼亚', - Uganda: '乌干达', - Ukraine: '乌克兰', - Uruguay: '乌拉圭', - 'United States': '美国', - Uzbekistan: '乌兹别克斯坦', - Venezuela: '委内瑞拉', - Vietnam: '越南', - Vanuatu: '瓦努阿图', - 'West Bank': '约旦河西岸', - Yemen: '也门', - 'South Africa': '南非', - 'S. Sudan': '南苏丹', - Tanzania: '坦桑尼亚', - 'Central African Rep.': '中非共和国', - Zambia: '赞比亚', - Zimbabwe: '津巴布韦', - Congo: '刚果', - 'Eq. Guinea': '几内亚', - "Côte d'Ivoire": '科特迪瓦共和国', - 'Cape Verde': '佛得角共和国', - 'U.A.E': '阿联酋', - Mauritius: '‌毛里求斯共和国', - 'S. Geo. and S. Sandw. Is.': '南乔治亚和南桑威奇群岛', - 'Saint Helena': '圣赫勒拿', - 'Solomon Is.': '所罗门群岛', - Singapore: '新加坡', - Tonga: '汤加', - Tuvalu: '图瓦卢', - 'Timor-Leste': '东帝汶', - 'Venezuela, RB': '委内瑞拉', - 'Yemen, Rep.': '也门', - 'Congo, Rep.': '刚果', - 'Congo, Dem. Rep.': '刚果民主共和国', - 'St. Vincent and the Grenadines': '圣文森特和格林纳丁斯', - 'Antigua and Barbuda': '安提瓜和巴布达', - 'St. Lucia': '圣卢西亚', - 'St. Kitts and Nevis': '圣克里斯多福及尼维斯', - 'St. Martin (French part)': '圣马丁岛', - 'Sint Maarten (Dutch part)': '圣马丁岛', - 'French Polynesia': '法属玻利尼西亚', - Mayotte: '马约特', - 'Wallis and Futuna': '瓦利斯和富图纳', - Reunion: '留尼汪', - Seychelles: '塞舌尔', - Comoros: '科摩罗', - Pitcairn: '皮特凯恩', - 'Micronesia, Fed. Sts.': '密克罗尼西亚联邦', - 'St. Pierre and Miquelon': '圣皮埃尔和密克隆', - Kiribati: '基里巴斯', - 'Marshall Islands': '马绍尔群岛', - Nauru: '瑙鲁', - Tokelau: '托克劳', - Niue: '纽埃', - Samoa: '萨摩亚', - Guam: '关岛', - Palau: '帕劳', - Minronesia: '密克罗尼西亚', - 'N. Mariana Is.': '北马里亚纳群岛', - 'Fr. S. Antarctic Lands': '法属南半球和南极陆地', - 'São Tomé and Príncipe': '圣多美和普林西比', - 'Br. Indian Ocean Ter.': '英属印度洋领地', - 'Heard I. and McDonald Is.': '赫德岛和麦克唐纳群岛', - Micronesia: '密克罗尼西亚联邦', - 'Saint Lucia': '圣卢西亚', - Barbados: '巴巴多斯', - 'Fr. Polynesia': '法属玻利尼西亚', - Dominica: '多米尼加', - Montserrat: '蒙塞拉特岛', - Grenada: '格林纳达', - 'Antigua and Barb.': '安提瓜和巴布达', - 'U.S. Virgin Is.': '美属维尔京群岛', - 'St. Vin. and Gren.': '圣文森特和格林纳丁斯', - 'Dominican Rep.': '多米尼加共和国', - Bahrain: '巴林', - 'N. Cyprus': '北塞浦路斯', - 'Bosnia and Herz.': '波斯尼亚和黑塞哥维那', - 'Cayman Is.': '开曼群岛', - Serbia: '塞尔维亚', - 'Czech Rep.': '捷克共和国', - Alands: '奥兰群岛', - 'American Samoa': '美属萨摩亚', - Curaçao: '库拉索', -} + China: "中国", + Afghanistan: "阿富汗", + Angola: "安哥拉", + Albania: "阿尔巴尼亚", + "United Arab Emirates": "阿拉伯联合酋长国", + Argentina: "阿根廷", + Armenia: "亚美尼亚", + Antarctica: "南极洲", + "French Southern and Antarctic Lands": "法国南部和南极地", + Australia: "澳大利亚", + Austria: "奥地利", + Azerbaijan: "阿塞拜疆", + Burundi: "布隆迪", + Belgium: "比利时", + Benin: "贝宁", + "Burkina Faso": "布基纳法索", + Bangladesh: "孟加拉国", + Bulgaria: "保加利亚", + "The Bahamas": "巴哈马", + "Bosnia and Herzegovina": "波斯尼亚和黑塞哥维那", + Belarus: "白俄罗斯", + Belize: "伯利兹", + Bermuda: "百慕大", + Bolivia: "玻利维亚", + Brazil: "巴西", + Brunei: "文莱", + Bhutan: "不丹", + Botswana: "博茨瓦纳", + "Central African Republic": "中非共和国", + Canada: "加拿大", + Switzerland: "瑞士", + Chile: "智利", + "Ivory Coast": "海牙", + Cameroon: "喀麦隆", + "Dem. Rep. Congo": "刚果民主共和国", + "Republic of the Congo": "刚果共和国", + Colombia: "哥伦比亚", + "Costa Rica": "哥斯达黎加", + Cuba: "古巴", + "Northern Cyprus": "塞浦路斯北部", + Cyprus: "塞浦路斯", + "Czech Republic": "捷克共和国", + Germany: "德国", + Djibouti: "吉布提", + Denmark: "丹麦", + "Dominican Republic": "多明尼加共和国", + Algeria: "阿尔及利亚", + Ecuador: "厄瓜多尔", + Egypt: "埃及", + Eritrea: "厄立特里亚", + Spain: "西班牙", + Estonia: "爱沙尼亚", + Ethiopia: "埃塞俄比亚", + Finland: "芬兰", + Fiji: "斐济", + "Falkland Is.": "福克兰群岛", + France: "法国", + Gabon: "加蓬", + "United Kingdom": "英国", + Georgia: "格鲁吉亚", + Ghana: "加纳", + Guinea: "几内亚", + Gambia: "冈比亚", + "Guinea-Bissau": "几内亚比绍", + "Equatorial Guinea": "赤道几内亚", + Greece: "希腊", + Greenland: "格陵兰", + Guatemala: "危地马拉", + "French Guiana": "法属圭亚那", + Guyana: "圭亚那", + Honduras: "洪都拉斯", + Croatia: "克罗地亚", + Haiti: "海地", + Hungary: "匈牙利", + Indonesia: "印度尼西亚", + India: "印度", + Ireland: "爱尔兰", + Iran: "伊朗", + Iraq: "伊拉克", + Iceland: "冰岛", + Israel: "以色列", + Italy: "意大利", + Jamaica: "牙买加", + Jordan: "约旦", + Japan: "日本", + Kazakhstan: "哈萨克斯坦", + Kenya: "肯尼亚", + Cambodia: "柬埔寨", + Korea: "韩国", + Kosovo: "科索沃", + Kuwait: "科威特", + "Lao PDR": "老挝", + Lebanon: "黎巴嫩", + Liberia: "利比里亚", + Libya: "利比亚", + "Sri Lanka": "斯里兰卡", + Lesotho: "莱索托", + Lithuania: "立陶宛", + Luxembourg: "卢森堡", + Latvia: "拉脱维亚", + Morocco: "摩洛哥", + Moldova: "摩尔瓦西亚", + Madagascar: "马达加斯加", + Mexico: "墨西哥", + Macedonia: "马其顿", + Mali: "马里", + Malta: "马耳他", + Myanmar: "缅甸", + Montenegro: "黑山", + Mongolia: "蒙古", + Mozambique: "莫桑比克", + Mauritania: "毛里塔尼亚", + Malawi: "马拉维", + Malaysia: "马来西亚", + Namibia: "纳米比亚", + "New Caledonia": "新喀里多尼亚", + Niger: "尼日尔", + Nigeria: "尼日利亚", + Nicaragua: "尼加拉瓜", + Netherlands: "荷兰", + Norway: "挪威", + Nepal: "尼泊尔", + "New Zealand": "新西兰", + Oman: "阿曼", + Pakistan: "巴基斯坦", + Panama: "巴拿马", + Peru: "秘鲁", + Philippines: "菲律宾", + "Papua New Guinea": "巴布亚新几内亚", + Poland: "波兰", + "Puerto Rico": "波多黎各", + "Dem. Rep. Korea": "朝鲜", + Portugal: "葡萄牙", + Paraguay: "巴拉圭", + Qatar: "卡塔尔", + Romania: "罗马尼亚", + Russia: "俄罗斯", + Rwanda: "卢旺达", + "W. Sahara": "西撒哈拉", + "Saudi Arabia": "沙特阿拉伯", + Sudan: "苏丹", + "South Sudan": "南苏丹", + Senegal: "塞内加尔", + "Solomon Islands": "所罗门群岛", + "Sierra Leone": "塞拉利昂", + "El Salvador": "萨尔瓦多", + Somaliland: "索马里兰", + Somalia: "索马里", + "Republic of Serbia": "塞尔维亚共和国", + Suriname: "苏里南", + Slovakia: "斯洛伐克", + Slovenia: "斯洛文尼亚", + Swaziland: "斯威士兰", + Sweden: "瑞典", + Syria: "叙利亚", + Chad: "查德", + Togo: "多哥", + Thailand: "泰国", + Tajikistan: "塔吉克斯坦", + Turkmenistan: "土库曼斯坦", + "East Timor": "东帝汶", + "Trinidad and Tobago": "特立尼达和多巴哥", + Tunisia: "哈萨克突尼斯斯坦", + Turkey: "土耳其", + "Taiwan(China)": "台湾", + "United Republic of Tanzania": "坦桑尼亚", + Uganda: "乌干达", + Ukraine: "乌克兰", + Uruguay: "乌拉圭", + "United States": "美国", + Uzbekistan: "乌兹别克斯坦", + Venezuela: "委内瑞拉", + Vietnam: "越南", + Vanuatu: "瓦努阿图", + "West Bank": "约旦河西岸", + Yemen: "也门", + "South Africa": "南非", + "S. Sudan": "南苏丹", + Tanzania: "坦桑尼亚", + "Central African Rep.": "中非共和国", + Zambia: "赞比亚", + Zimbabwe: "津巴布韦", + Congo: "刚果", + "Eq. Guinea": "几内亚", + "Côte d'Ivoire": "科特迪瓦共和国", + "Cape Verde": "佛得角共和国", + "U.A.E": "阿联酋", + Mauritius: "‌毛里求斯共和国", + "S. Geo. and S. Sandw. Is.": "南乔治亚和南桑威奇群岛", + "Saint Helena": "圣赫勒拿", + "Solomon Is.": "所罗门群岛", + Singapore: "新加坡", + Tonga: "汤加", + Tuvalu: "图瓦卢", + "Timor-Leste": "东帝汶", + "Venezuela, RB": "委内瑞拉", + "Yemen, Rep.": "也门", + "Congo, Rep.": "刚果", + "Congo, Dem. Rep.": "刚果民主共和国", + "St. Vincent and the Grenadines": "圣文森特和格林纳丁斯", + "Antigua and Barbuda": "安提瓜和巴布达", + "St. Lucia": "圣卢西亚", + "St. Kitts and Nevis": "圣克里斯多福及尼维斯", + "St. Martin (French part)": "圣马丁岛", + "Sint Maarten (Dutch part)": "圣马丁岛", + "French Polynesia": "法属玻利尼西亚", + Mayotte: "马约特", + "Wallis and Futuna": "瓦利斯和富图纳", + Reunion: "留尼汪", + Seychelles: "塞舌尔", + Comoros: "科摩罗", + Pitcairn: "皮特凯恩", + "Micronesia, Fed. Sts.": "密克罗尼西亚联邦", + "St. Pierre and Miquelon": "圣皮埃尔和密克隆", + Kiribati: "基里巴斯", + "Marshall Islands": "马绍尔群岛", + Nauru: "瑙鲁", + Tokelau: "托克劳", + Niue: "纽埃", + Samoa: "萨摩亚", + Guam: "关岛", + Palau: "帕劳", + Minronesia: "密克罗尼西亚", + "N. Mariana Is.": "北马里亚纳群岛", + "Fr. S. Antarctic Lands": "法属南半球和南极陆地", + "São Tomé and Príncipe": "圣多美和普林西比", + "Br. Indian Ocean Ter.": "英属印度洋领地", + "Heard I. and McDonald Is.": "赫德岛和麦克唐纳群岛", + Micronesia: "密克罗尼西亚联邦", + "Saint Lucia": "圣卢西亚", + Barbados: "巴巴多斯", + "Fr. Polynesia": "法属玻利尼西亚", + Dominica: "多米尼加", + Montserrat: "蒙塞拉特岛", + Grenada: "格林纳达", + "Antigua and Barb.": "安提瓜和巴布达", + "U.S. Virgin Is.": "美属维尔京群岛", + "St. Vin. and Gren.": "圣文森特和格林纳丁斯", + "Dominican Rep.": "多米尼加共和国", + Bahrain: "巴林", + "N. Cyprus": "北塞浦路斯", + "Bosnia and Herz.": "波斯尼亚和黑塞哥维那", + "Cayman Is.": "开曼群岛", + Serbia: "塞尔维亚", + "Czech Rep.": "捷克共和国", + Alands: "奥兰群岛", + "American Samoa": "美属萨摩亚", + Curaçao: "库拉索", +}; // 获取一个随机的国家key export function getRandomCountryKey() { - const keys = Object.keys(countryCodeMap) - return keys[Math.floor(Math.random() * keys.length)] + const keys = Object.keys(countryCodeMap); + return keys[Math.floor(Math.random() * keys.length)]; } // 获取一个随机的国家name export function getRandomCountryName() { - const keys = Object.keys(countryCodeMap) - return countryCodeMap[keys[Math.floor(Math.random() * keys.length)]] + const keys = Object.keys(countryCodeMap); + return countryCodeMap[keys[Math.floor(Math.random() * keys.length)]]; } // 国家代码映射 export const countryCodeMap: { [key: string]: string } = { - AD: '安道尔', - AE: '阿联酋', - AF: '阿富汗', - AG: '安提瓜和巴布达', - AI: '安圭拉', - AL: '阿尔巴尼亚', - AM: '亚美尼亚', - AO: '安哥拉', + AD: "安道尔", + AE: "阿联酋", + AF: "阿富汗", + AG: "安提瓜和巴布达", + AI: "安圭拉", + AL: "阿尔巴尼亚", + AM: "亚美尼亚", + AO: "安哥拉", // AQ: '南极洲', - AR: '阿根廷', - AS: '美属萨摩亚', - AT: '奥地利', - AU: '澳大利亚', - AW: '阿鲁巴', - AZ: '阿塞拜疆', - BA: '波斯尼亚和黑塞哥维那', - BB: '巴巴多斯', - BD: '孟加拉国', - BE: '比利时', - BF: '布基纳法索', - BG: '保加利亚', - BH: '巴林', - BI: '布隆迪', - BJ: '贝宁', - BM: '百慕大', - BN: '文莱', - BO: '玻利维亚', - BR: '巴西', - BS: '巴哈马', - BT: '不丹', - BV: '布维岛', - BW: '博茨瓦纳', - BY: '白俄罗斯', - BZ: '伯利兹', - CA: '加拿大', - CC: '科科斯（基林）岛', - CD: '刚果民主共和国', - CF: '中非共和国', - CG: '刚果共和国', - CH: '瑞士', - CI: '科特迪瓦', - CK: '库克群岛', - CL: '智利', - CM: '喀麦隆', - CN: '中国', - CO: '哥伦比亚', - CR: '哥斯达黎加', - CU: '古巴', - CV: '佛得角', - CX: '圣诞岛', - CY: '塞浦路斯', - CZ: '捷克', - DE: '德国', - DJ: '吉布提', - DK: '丹麦', - DM: '多米尼克', - DO: '多米尼加共和国', - DZ: '阿尔及利亚', - EC: '厄瓜多尔', - EE: '爱沙尼亚', - EG: '埃及', - EH: '西撒哈拉', - ER: '厄立特里亚', - ES: '西班牙', - ET: '埃塞俄比亚', - FI: '芬兰', - FJ: '斐济', - FM: '密克罗尼西亚', - FO: '法罗群岛', - FR: '法国', - GA: '加蓬', - GB: '英国', - GD: '格林纳达', - GE: '格鲁吉亚', - GF: '法属圭亚那', - GG: '根西岛', - GH: '加纳', - GI: '直布罗陀', - GL: '格陵兰', - GM: '冈比亚', - GN: '几内亚', - GP: '瓜德罗普', - GQ: '赤道几内亚', - GR: '希腊', - GS: '南乔治亚和南桑威奇群岛', - GT: '危地马拉', - GU: '关岛', - GW: '几内亚比绍', - GY: '圭亚那', - HK: '中国香港', - HM: '赫德岛和麦克唐纳岛', - HN: '洪都拉斯', - HR: '克罗地亚', - HT: '海地', - HU: '匈牙利', - ID: '印度尼西亚', - IE: '爱尔兰', - IL: '以色列', - IM: '马恩岛', - IN: '印度', - IO: '英属印度洋领地', - IQ: '伊拉克', - IR: '伊朗', - IS: '冰岛', - IT: '意大利', - JE: '泽西岛', - JM: '牙买加', - JO: '约旦', - JP: '日本', - KE: '肯尼亚', - KG: '吉尔吉斯斯坦', - KH: '柬埔寨', - KI: '基里巴斯', - KM: '科摩罗', - KN: '圣基茨和尼维斯', - KP: '朝鲜', - KR: '韩国', - KW: '科威特', - KY: '开曼群岛', - KZ: '哈萨克斯坦', - LA: '老挝', - LB: '黎巴嫩', - LC: '圣露西亚', - LI: '列支敦士登', - LK: '斯里兰卡', - LR: '利比里亚', - LS: '莱索托', - LT: '立陶宛', - LU: '卢森堡', - LV: '拉脱维亚', - LY: '利比亚', - MA: '摩洛哥', - MC: '摩纳哥', - MD: '摩尔多瓦', - ME: '黑山', - MG: '马达加斯加', - MH: '马绍尔群岛', - MK: '北马其顿', - ML: '马里', - MM: '缅甸', - MN: '蒙古', - MO: '中国澳门', - MP: '北马里亚纳群岛', - MQ: '马提尼克', - MR: '毛里塔尼亚', - MS: '蒙特塞拉特', - MT: '马耳他', - MU: '毛里求斯', - MV: '马尔代夫', - MW: '马拉维', - MX: '墨西哥', - MY: '马来西亚', - MZ: '莫桑比克', - NA: '纳米比亚', - NC: '新喀里多尼亚', - NE: '尼日尔', - NF: '诺福克岛', - NG: '尼日利亚', - NI: '尼加拉瓜', - NL: '荷兰', - NO: '挪威', - NP: '尼泊尔', - NR: '瑙鲁', - NU: '纽埃', - NZ: '新西兰', - OM: '阿曼', - PA: '巴拿马', - PE: '秘鲁', - PF: '法属波利尼西亚', - PG: '巴布亚新几内亚', - PH: '菲律宾', - PK: '巴基斯坦', - PL: '波兰', - PM: '圣皮埃尔和密克隆', - PN: '皮特凯恩群岛', - PR: '波多黎各', - PS: '巴勒斯坦', - PT: '葡萄牙', - PW: '帕劳', - PY: '巴拉圭', - QA: '卡塔尔', - RE: '留尼旺', - RO: '罗马尼亚', - RS: '塞尔维亚', - RU: '俄罗斯', - RW: '卢旺达', - SA: '沙特阿拉伯', - SB: '所罗门群岛', - SC: '塞舌尔', - SD: '苏丹', - SE: '瑞典', - SG: '新加坡', - SH: '圣赫勒拿', - SI: '斯洛文尼亚', - SJ: '斯瓦尔巴和扬马延', - SK: '斯洛伐克', - SL: '塞拉利昂', - SM: '圣马力诺', - SN: '塞内加尔', - SO: '索马里', - SS: '南苏丹', - SR: '苏里南', - ST: '圣多美和普林西比', - SV: '萨尔瓦多', - SY: '叙利亚', - SZ: '斯威士兰', - TC: '特克斯和凯科斯群岛', - TD: '查德', - TF: '法属南部领地', - TG: '多哥', - TH: '泰国', - TJ: '塔吉克斯坦', - TK: '托克劳', - TL: '东帝汶', - TM: '土库曼斯坦', - TN: '突尼斯', - TO: '汤加', - TR: '土耳其', - TT: '特立尼达和多巴哥', - TV: '图瓦卢', - TW: '中国台湾', - TZ: '坦桑尼亚', - UA: '乌克兰', - UG: '乌干达', - UM: '美国本土外小岛屿', - US: '美国', - UY: '乌拉圭', - UZ: '乌兹别克斯坦', - VA: '梵蒂冈', - VC: '圣文森特和格林纳丁斯', - VE: '委内瑞拉', - VG: '英属维尔京群岛', - VI: '美属维尔京群岛', - VN: '越南', - VU: '瓦努阿图', - WF: '瓦利斯和富图纳', - WS: '萨摩亚', - YE: '也门', - YT: '马约特', - ZA: '南非', - ZM: '赞比亚', - ZW: '津巴布韦', -} + AR: "阿根廷", + AS: "美属萨摩亚", + AT: "奥地利", + AU: "澳大利亚", + AW: "阿鲁巴", + AZ: "阿塞拜疆", + BA: "波斯尼亚和黑塞哥维那", + BB: "巴巴多斯", + BD: "孟加拉国", + BE: "比利时", + BF: "布基纳法索", + BG: "保加利亚", + BH: "巴林", + BI: "布隆迪", + BJ: "贝宁", + BM: "百慕大", + BN: "文莱", + BO: "玻利维亚", + BR: "巴西", + BS: "巴哈马", + BT: "不丹", + BV: "布维岛", + BW: "博茨瓦纳", + BY: "白俄罗斯", + BZ: "伯利兹", + CA: "加拿大", + CC: "科科斯（基林）岛", + CD: "刚果民主共和国", + CF: "中非共和国", + CG: "刚果共和国", + CH: "瑞士", + CI: "科特迪瓦", + CK: "库克群岛", + CL: "智利", + CM: "喀麦隆", + CN: "中国", + CO: "哥伦比亚", + CR: "哥斯达黎加", + CU: "古巴", + CV: "佛得角", + CX: "圣诞岛", + CY: "塞浦路斯", + CZ: "捷克", + DE: "德国", + DJ: "吉布提", + DK: "丹麦", + DM: "多米尼克", + DO: "多米尼加共和国", + DZ: "阿尔及利亚", + EC: "厄瓜多尔", + EE: "爱沙尼亚", + EG: "埃及", + EH: "西撒哈拉", + ER: "厄立特里亚", + ES: "西班牙", + ET: "埃塞俄比亚", + FI: "芬兰", + FJ: "斐济", + FM: "密克罗尼西亚", + FO: "法罗群岛", + FR: "法国", + GA: "加蓬", + GB: "英国", + UK: "英国", + GD: "格林纳达", + GE: "格鲁吉亚", + GF: "法属圭亚那", + GG: "根西岛", + GH: "加纳", + GI: "直布罗陀", + GL: "格陵兰", + GM: "冈比亚", + GN: "几内亚", + GP: "瓜德罗普", + GQ: "赤道几内亚", + GR: "希腊", + GS: "南乔治亚和南桑威奇群岛", + GT: "危地马拉", + GU: "关岛", + GW: "几内亚比绍", + GY: "圭亚那", + HK: "中国香港", + HM: "赫德岛和麦克唐纳岛", + HN: "洪都拉斯", + HR: "克罗地亚", + HT: "海地", + HU: "匈牙利", + ID: "印度尼西亚", + IE: "爱尔兰", + IL: "以色列", + IM: "马恩岛", + IN: "印度", + IO: "英属印度洋领地", + IQ: "伊拉克", + IR: "伊朗", + IS: "冰岛", + IT: "意大利", + JE: "泽西岛", + JM: "牙买加", + JO: "约旦", + JP: "日本", + KE: "肯尼亚", + KG: "吉尔吉斯斯坦", + KH: "柬埔寨", + KI: "基里巴斯", + KM: "科摩罗", + KN: "圣基茨和尼维斯", + KP: "朝鲜", + KR: "韩国", + KW: "科威特", + KY: "开曼群岛", + KZ: "哈萨克斯坦", + LA: "老挝", + LB: "黎巴嫩", + LC: "圣露西亚", + LI: "列支敦士登", + LK: "斯里兰卡", + LR: "利比里亚", + LS: "莱索托", + LT: "立陶宛", + LU: "卢森堡", + LV: "拉脱维亚", + LY: "利比亚", + MA: "摩洛哥", + MC: "摩纳哥", + MD: "摩尔多瓦", + ME: "黑山", + MG: "马达加斯加", + MH: "马绍尔群岛", + MK: "北马其顿", + ML: "马里", + MM: "缅甸", + MN: "蒙古", + MO: "中国澳门", + MP: "北马里亚纳群岛", + MQ: "马提尼克", + MR: "毛里塔尼亚", + MS: "蒙特塞拉特", + MT: "马耳他", + MU: "毛里求斯", + MV: "马尔代夫", + MW: "马拉维", + MX: "墨西哥", + MY: "马来西亚", + MZ: "莫桑比克", + NA: "纳米比亚", + NC: "新喀里多尼亚", + NE: "尼日尔", + NF: "诺福克岛", + NG: "尼日利亚", + NI: "尼加拉瓜", + NL: "荷兰", + NO: "挪威", + NP: "尼泊尔", + NR: "瑙鲁", + NU: "纽埃", + NZ: "新西兰", + OM: "阿曼", + PA: "巴拿马", + PE: "秘鲁", + PF: "法属波利尼西亚", + PG: "巴布亚新几内亚", + PH: "菲律宾", + PK: "巴基斯坦", + PL: "波兰", + PM: "圣皮埃尔和密克隆", + PN: "皮特凯恩群岛", + PR: "波多黎各", + PS: "巴勒斯坦", + PT: "葡萄牙", + PW: "帕劳", + PY: "巴拉圭", + QA: "卡塔尔", + RE: "留尼旺", + RO: "罗马尼亚", + RS: "塞尔维亚", + RU: "俄罗斯", + RW: "卢旺达", + SA: "沙特阿拉伯", + SB: "所罗门群岛", + SC: "塞舌尔", + SD: "苏丹", + SE: "瑞典", + SG: "新加坡", + SH: "圣赫勒拿", + SI: "斯洛文尼亚", + SJ: "斯瓦尔巴和扬马延", + SK: "斯洛伐克", + SL: "塞拉利昂", + SM: "圣马力诺", + SN: "塞内加尔", + SO: "索马里", + SS: "南苏丹", + SR: "苏里南", + ST: "圣多美和普林西比", + SV: "萨尔瓦多", + SY: "叙利亚", + SZ: "斯威士兰", + TC: "特克斯和凯科斯群岛", + TD: "查德", + TF: "法属南部领地", + TG: "多哥", + TH: "泰国", + TJ: "塔吉克斯坦", + TK: "托克劳", + TL: "东帝汶", + TM: "土库曼斯坦", + TN: "突尼斯", + TO: "汤加", + TR: "土耳其", + TT: "特立尼达和多巴哥", + TV: "图瓦卢", + TW: "中国台湾", + TZ: "坦桑尼亚", + UA: "乌克兰", + UG: "乌干达", + UM: "美国本土外小岛屿", + US: "美国", + UY: "乌拉圭", + UZ: "乌兹别克斯坦", + VA: "梵蒂冈", + VC: "圣文森特和格林纳丁斯", + VE: "委内瑞拉", + VG: "英属维尔京群岛", + VI: "美属维尔京群岛", + VN: "越南", + VU: "瓦努阿图", + WF: "瓦利斯和富图纳", + WS: "萨摩亚", + YE: "也门", + YT: "马约特", + ZA: "南非", + ZM: "赞比亚", + ZW: "津巴布韦", +}; export type CountryCodeType = - | 'AD' - | 'AE' - | 'AF' - | 'AG' - | 'AI' - | 'AL' - | 'AM' - | 'AO' - | 'AQ' - | 'AR' - | 'AS' - | 'AT' - | 'AU' - | 'AW' - | 'AZ' - | 'BA' - | 'BB' - | 'BD' - | 'BE' - | 'BF' - | 'BG' - | 'BH' - | 'BI' - | 'BJ' - | 'BM' - | 'BN' - | 'BO' - | 'BR' - | 'BS' - | 'BT' - | 'BV' - | 'BW' - | 'BY' - | 'BZ' - | 'CA' - | 'CC' - | 'CD' - | 'CF' - | 'CG' - | 'CH' - | 'CI' - | 'CK' - | 'CL' - | 'CM' - | 'CN' - | 'CO' - | 'CR' - | 'CU' - | 'CV' - | 'CX' - | 'CY' - | 'CZ' - | 'DE' - | 'DJ' - | 'DK' - | 'DM' - | 'DO' - | 'DZ' - | 'EC' - | 'EE' - | 'EG' - | 'EH' - | 'ER' - | 'ES' - | 'ET' - | 'FI' - | 'FJ' - | 'FM' - | 'FO' - | 'FR' - | 'GA' - | 'GB' - | 'GD' - | 'GE' - | 'GF' - | 'GG' - | 'GH' - | 'GI' - | 'GL' - | 'GM' - | 'GN' - | 'GP' - | 'GQ' - | 'GR' - | 'GS' - | 'GT' - | 'GU' - | 'GW' - | 'GY' - | 'HK' - | 'HM' - | 'HN' - | 'HR' - | 'HT' - | 'HU' - | 'ID' - | 'IE' - | 'IL' - | 'IM' - | 'IN' - | 'IO' - | 'IQ' - | 'IR' - | 'IS' - | 'IT' - | 'JE' - | 'JM' - | 'JO' - | 'JP' - | 'KE' - | 'KG' - | 'KH' - | 'KI' - | 'KM' - | 'KN' - | 'KP' - | 'KR' - | 'KW' - | 'KY' - | 'KZ' - | 'LA' - | 'LB' - | 'LC' - | 'LI' - | 'LK' - | 'LR' - | 'LS' - | 'LT' - | 'LU' - | 'LV' - | 'LY' - | 'MA' - | 'MC' - | 'MD' - | 'ME' - | 'MG' - | 'MH' - | 'MK' - | 'ML' - | 'MM' - | 'MN' - | 'MO' - | 'MP' - | 'MQ' - | 'MR' - | 'MS' - | 'MT' - | 'MU' - | 'MV' - | 'MW' - | 'MX' - | 'MY' - | 'MZ' - | 'NA' - | 'NC' - | 'NE' - | 'NF' - | 'NG' - | 'NI' - | 'NL' - | 'NO' - | 'NP' - | 'NR' - | 'NU' - | 'NZ' - | 'OM' - | 'PA' - | 'PE' - | 'PF' - | 'PG' - | 'PH' - | 'PK' - | 'PL' - | 'PM' - | 'PN' - | 'PR' - | 'PS' - | 'PT' - | 'PW' - | 'PY' - | 'QA' - | 'RE' - | 'RO' - | 'RS' - | 'RU' - | 'RW' - | 'SA' - | 'SB' - | 'SC' - | 'SD' - | 'SE' - | 'SG' - | 'SH' - | 'SI' - | 'SJ' - | 'SK' - | 'SL' - | 'SM' - | 'SN' - | 'SO' - | 'SR' - | 'ST' - | 'SV' - | 'SY' - | 'SZ' - | 'TC' - | 'TD' - | 'TF' - | 'TG' - | 'TH' - | 'TJ' - | 'TK' - | 'TL' - | 'TM' - | 'TN' - | 'TO' - | 'TR' - | 'TT' - | 'TV' - | 'TW' - | 'TZ' - | 'UA' - | 'UG' - | 'UM' - | 'US' - | 'UY' - | 'UZ' - | 'VA' - | 'VC' - | 'VE' - | 'VG' - | 'VI' - | 'VN' - | 'VU' - | 'WF' - | 'WS' - | 'YE' - | 'YT' - | 'ZA' - | 'ZM' - | 'ZW' - | '' + | "AD" + | "AE" + | "AF" + | "AG" + | "AI" + | "AL" + | "AM" + | "AO" + | "AQ" + | "AR" + | "AS" + | "AT" + | "AU" + | "AW" + | "AZ" + | "BA" + | "BB" + | "BD" + | "BE" + | "BF" + | "BG" + | "BH" + | "BI" + | "BJ" + | "BM" + | "BN" + | "BO" + | "BR" + | "BS" + | "BT" + | "BV" + | "BW" + | "BY" + | "BZ" + | "CA" + | "CC" + | "CD" + | "CF" + | "CG" + | "CH" + | "CI" + | "CK" + | "CL" + | "CM" + | "CN" + | "CO" + | "CR" + | "CU" + | "CV" + | "CX" + | "CY" + | "CZ" + | "DE" + | "DJ" + | "DK" + | "DM" + | "DO" + | "DZ" + | "EC" + | "EE" + | "EG" + | "EH" + | "ER" + | "ES" + | "ET" + | "FI" + | "FJ" + | "FM" + | "FO" + | "FR" + | "GA" + | "GB" + | "UK" + | "GD" + | "GE" + | "GF" + | "GG" + | "GH" + | "GI" + | "GL" + | "GM" + | "GN" + | "GP" + | "GQ" + | "GR" + | "GS" + | "GT" + | "GU" + | "GW" + | "GY" + | "HK" + | "HM" + | "HN" + | "HR" + | "HT" + | "HU" + | "ID" + | "IE" + | "IL" + | "IM" + | "IN" + | "IO" + | "IQ" + | "IR" + | "IS" + | "IT" + | "JE" + | "JM" + | "JO" + | "JP" + | "KE" + | "KG" + | "KH" + | "KI" + | "KM" + | "KN" + | "KP" + | "KR" + | "KW" + | "KY" + | "KZ" + | "LA" + | "LB" + | "LC" + | "LI" + | "LK" + | "LR" + | "LS" + | "LT" + | "LU" + | "LV" + | "LY" + | "MA" + | "MC" + | "MD" + | "ME" + | "MG" + | "MH" + | "MK" + | "ML" + | "MM" + | "MN" + | "MO" + | "MP" + | "MQ" + | "MR" + | "MS" + | "MT" + | "MU" + | "MV" + | "MW" + | "MX" + | "MY" + | "MZ" + | "NA" + | "NC" + | "NE" + | "NF" + | "NG" + | "NI" + | "NL" + | "NO" + | "NP" + | "NR" + | "NU" + | "NZ" + | "OM" + | "PA" + | "PE" + | "PF" + | "PG" + | "PH" + | "PK" + | "PL" + | "PM" + | "PN" + | "PR" + | "PS" + | "PT" + | "PW" + | "PY" + | "QA" + | "RE" + | "RO" + | "RS" + | "RU" + | "RW" + | "SA" + | "SB" + | "SC" + | "SD" + | "SE" + | "SG" + | "SH" + | "SI" + | "SJ" + | "SK" + | "SL" + | "SM" + | "SN" + | "SO" + | "SR" + | "ST" + | "SV" + | "SY" + | "SZ" + | "TC" + | "TD" + | "TF" + | "TG" + | "TH" + | "TJ" + | "TK" + | "TL" + | "TM" + | "TN" + | "TO" + | "TR" + | "TT" + | "TV" + | "TW" + | "TZ" + | "UA" + | "UG" + | "UM" + | "US" + | "UY" + | "UZ" + | "VA" + | "VC" + | "VE" + | "VG" + | "VI" + | "VN" + | "VU" + | "WF" + | "WS" + | "YE" + | "YT" + | "ZA" + | "ZM" + | "ZW" + | ""; diff --git a/src/pages/decentralized-lastic-network/components/world-geo.tsx b/src/pages/decentralized-lastic-network/components/world-geo.tsx index fc08d4d..7c3b812 100644 --- a/src/pages/decentralized-lastic-network/components/world-geo.tsx +++ b/src/pages/decentralized-lastic-network/components/world-geo.tsx @@ -1,4 +1,4 @@ -import { useEffect, useMemo, useRef, memo } from "react"; +import { useEffect, useMemo, useRef, memo, useState } from "react"; import * as echarts from "echarts"; // import 'echarts-gl'; // import { useQueryClient } from "@tanstack/react-query"; @@ -19,58 +19,9 @@ interface LinesItemType { } type LinesDataType = [LinesItemType, LinesItemType]; type LinesType = [string, LinesDataType[]]; -// 从国家经纬度数据中随机生成涟漪效果 -// const createRandomCountryRipples = (count = 10) => { -// // 获取所有国家代码 -// const countryCodes = Object.keys(geoCoordMap); -// // 创建随机点数据 -// const randomPoints = []; -// // 随机选择国家 -// for (let i = 0; i < count; i++) { -// // 随机选择一个国家代码 -// const randomIndex = Math.floor(Math.random() * countryCodes.length); -// const countryCode = countryCodes[randomIndex]; -// // 获取该国家的坐标 -// const coords = geoCoordMap[countryCode]; -// // 添加一些微小的随机偏移，使点不完全重叠在国家中心 -// const offsetLon = (Math.random() - 0.5) * 5; // ±2.5度的经度偏移 -// const offsetLat = (Math.random() - 0.5) * 5; // ±2.5度的纬度偏移 -// randomPoints.push({ -// name: countryCode, -// value: [coords[0] + offsetLon, coords[1] + offsetLat], -// // 可以随机设置涟漪大小 -// symbolSize: 3 + Math.random() * 5, -// // 可以存储国家代码用于显示信息 -// countryCode: countryCode, -// }); -// } -// // 返回涟漪效果系列 -// return { -// type: "effectScatter", -// coordinateSystem: "geo", -// zlevel: 2, -// symbol: "circle", -// // 使用数据中的symbolSize -// symbolSize: (data: any) => data.symbolSize || 5, -// rippleEffect: { -// period: 4 + Math.random() * 4, // 随机周期 -// brushType: "stroke", -// scale: 4 + Math.random() * 3, // 随机大小 -// }, -// itemStyle: { -// color: "#0ea5e9", -// shadowBlur: 10, -// shadowColor: "#0ea5e9", -// }, -// data: randomPoints, -// // 确保不显示标签 -// label: { -// show: false, -// }, -// // 确保不响应鼠标事件 -// silent: true, -// } as echarts.SeriesOption; -// }; + +// 连线动画的间隔时间（毫秒） +const LINE_ANIMATION_INTERVAL = 3000; // 3秒 // 创建单个国家的涟漪效果 const createCountryRipple = (countryCode: string) => { @@ -85,21 +36,67 @@ const createCountryRipple = (countryCode: string) => { }; export const WorldGeo = memo(({ screenData }: { screenData: any }) => { - // const queryClient = useQueryClient() const proxyGeoRef = useRef(null); const preMainToData = useRef<{ country_code: string }[]>([]); + + // 添加状态来跟踪当前显示的连线索引 + const [currentLineIndex, setCurrentLineIndex] = useState(-1); + + // 添加状态来存储所有连线数据 + const [lineConnections, setLineConnections] = useState<{from: string, to: string}[]>([]); + + // 添加状态来存储所有点 + const [allPoints, setAllPoints] = useState([]); + + // 使用ref来跟踪动画状态，避免重新渲染 + const animationTimerRef = useRef(null); + + // 添加状态来跟踪数据是否已经变化 + const dataKeyRef = useRef(""); + + // 处理代理数据 const mainToData = useMemo(() => { // 使用新的数据结构 const proxiesList = screenData?.proxy_info?.proxies ?? [{data:[{country_code: 'AI', ingress_country_code: 'AE'}], isLine: true}]; - // 初始化数据数组 - 不再包含 startCountry + // 初始化数据数组 const data: any = []; + console.log(proxiesList, 'proxiesList'); + + // 收集所有点和连线信息 + const points: any[] = []; + const connections: {from: string, to: string}[] = []; + // 遍历代理列表 proxiesList.forEach((proxyItem: any) => { // 检查是否有数据数组 if (proxyItem.data && Array.isArray(proxyItem.data)) { // 遍历数据数组中的每个项目 proxyItem.data.forEach((item: any) => { + // 添加起点到点集合 + const fromCode = item.country_code.toUpperCase(); + const fromPoint = createCountryRipple(fromCode); + if (fromPoint && !points.some(p => p.country_code === fromCode)) { + points.push(fromPoint); + } + + // 如果有终点，也添加到点集合 + if (item.ingress_country_code) { + const toCode = item.ingress_country_code.toUpperCase(); + const toPoint = createCountryRipple(toCode); + if (toPoint && !points.some(p => p.country_code === toCode)) { + points.push(toPoint); + } + + // 如果需要连线，添加到连线集合 + if (proxyItem.isLine === true) { + connections.push({ + from: fromCode, + to: toCode + }); + } + } + // 如果有 ingress_country_code，则添加一对起点和终点 if (item.ingress_country_code) { // 添加起点（country_code） @@ -125,9 +122,67 @@ export const WorldGeo = memo(({ screenData }: { screenData: any }) => { } }); + // 更新点和连线状态 + setAllPoints(points); + setLineConnections(connections); + + // 生成当前数据的唯一键 + const currentDataKey = JSON.stringify(proxiesList); + + // 检查数据是否变化 + if (currentDataKey !== dataKeyRef.current) { + // 数据变化，重置连线索引 + setCurrentLineIndex(-1); + dataKeyRef.current = currentDataKey; + + // 清除任何现有的动画定时器 + if (animationTimerRef.current) { + clearTimeout(animationTimerRef.current); + animationTimerRef.current = null; + } + + // 启动连线动画 + if (connections.length > 0) { + setTimeout(() => { + startLineAnimation(connections); + }, 500); // 短暂延迟，确保点已经显示 + } + } + return data; }, [screenData]); + // 启动连线动画的函数 + const startLineAnimation = (connections: {from: string, to: string}[]) => { + if (connections.length === 0) return; + + let index = 0; + + // 递归函数，用于按顺序显示连线 + const animateNextLine = () => { + setCurrentLineIndex(index); + + index++; + + if (index < connections.length) { + animationTimerRef.current = setTimeout(animateNextLine, LINE_ANIMATION_INTERVAL); + } + }; + + // 开始动画 + animateNextLine(); + }; + + // 组件卸载时清除定时器 + useEffect(() => { + return () => { + if (animationTimerRef.current) { + clearTimeout(animationTimerRef.current); + animationTimerRef.current = null; + } + }; + }, []); + const getLineItem = ( preCode: string, nextCode: string @@ -150,56 +205,10 @@ export const WorldGeo = memo(({ screenData }: { screenData: any }) => { // 实现数据处理 const solidData: LinesType[] = [["main", []]]; // 使用"main"替代startCountry.country_code - // 收集需要显示涟漪效果的所有点（包括连线和不连线的） - const ripplePoints: any[] = []; - - // 处理主路径数据 - for (let i = 0; i < mainToData.length; i++) { - // 如果是最后一个元素，则跳过（因为没有下一个元素作为终点） - if (i === mainToData.length - 1) continue; - - const currentItem = mainToData[i]; - const nextItem = mainToData[i + 1]; - - // 获取当前国家代码 - const countryCode = currentItem.country_code.toUpperCase(); - - // 如果当前项是起点，下一项是终点 - if (currentItem.type === "start" && nextItem.type === "end") { - const startCode = countryCode; - const endCode = nextItem.country_code.toUpperCase(); - - // 无论是否连线，都添加点的涟漪效果 - const startPoint = createCountryRipple(startCode); - const endPoint = createCountryRipple(endCode); - if (startPoint) ripplePoints.push(startPoint); - if (endPoint) ripplePoints.push(endPoint); - - // 检查是否应该绘制连线 - if (currentItem.isLine !== false) { - solidData[0]?.[1].push(getLineItem(startCode, endCode)); - } - - // 跳过下一项，因为已经处理了 - i++; - } - // 常规情况：当前项到下一项 - else { - const nextCountryCode = nextItem.country_code.toUpperCase(); - - // 无论是否连线，都添加点的涟漪效果 - const currentPoint = createCountryRipple(countryCode); - const nextPoint = createCountryRipple(nextCountryCode); - if (currentPoint) ripplePoints.push(currentPoint); - if (nextPoint) ripplePoints.push(nextPoint); - - // 检查是否应该绘制连线 - if (currentItem.isLine !== false) { - solidData[0]?.[1].push( - getLineItem(countryCode, nextCountryCode) - ); - } - } + // 只显示到当前索引的连线 + for (let i = 0; i <= currentLineIndex && i < lineConnections.length; i++) { + const connection = lineConnections[i]; + solidData[0]?.[1].push(getLineItem(connection.from, connection.to)); } // 虚线数据处理（保持原有逻辑） @@ -212,7 +221,7 @@ export const WorldGeo = memo(({ screenData }: { screenData: any }) => { return { solidData, otherLineList, - ripplePoints + ripplePoints: allPoints // 使用所有点，无论是否连线 }; }; @@ -348,7 +357,7 @@ export const WorldGeo = memo(({ screenData }: { screenData: any }) => { const getLianData = (series: echarts.SeriesOption[]) => { const { solidData, otherLineList, ripplePoints } = getLine(); - // 如果有需要显示涟漪效果但不连线的点，添加它们 + // 添加所有点的涟漪效果，无论是否连线 if (ripplePoints.length > 0) { // 添加外层蓝色点，带涟漪效果 series.push({ @@ -397,6 +406,7 @@ export const WorldGeo = memo(({ screenData }: { screenData: any }) => { } as echarts.SeriesOption); } + // 添加连线 solidData.forEach((item) => { // 如果没有连线数据，则跳过 if (item[1].length === 0) { @@ -440,6 +450,7 @@ export const WorldGeo = memo(({ screenData }: { screenData: any }) => { series.push(...exitNodes); } }); + otherLineList.forEach((line: any) => { line.forEach((item: any) => { const lastExit = item[1]?.[item[1].length - 1]?.[1] ?? null; @@ -589,11 +600,6 @@ export const WorldGeo = memo(({ screenData }: { screenData: any }) => { const series: echarts.SeriesOption[] = []; getLianData(series); getMianLineTipData(series); - // 添加随机涟漪效果 - 可以添加多组不同参数的涟漪 - // series.push(createRandomCountryRipples(15)); // 添加15个随机涟漪点 - // 可以添加第二组不同参数的涟漪 - // const secondRippleEffect = createRandomCountryRipples(20); - // series.push(secondRippleEffect); // 添加10个随机涟漪点 const regions = getRegions(); const option = { backgroundColor: "transparent", @@ -665,6 +671,13 @@ export const WorldGeo = memo(({ screenData }: { screenData: any }) => { const handleResize = () => { proxyGeoRef.current?.resize(); }; + + // 更新图表 + useEffect(() => { + const option = getOption(); + proxyGeoRef.current?.setOption(option); + }, [currentLineIndex]); // 当当前连线索引变化时更新图表 + useEffect(() => { preMainToData.current?.some( (item, index) => @@ -674,6 +687,7 @@ export const WorldGeo = memo(({ screenData }: { screenData: any }) => { const option = getOption(); proxyGeoRef.current?.setOption(option); }, [screenData, mainToData]); + useEffect(() => { const chartDom = document.getElementById("screenGeo"); proxyGeoRef.current = echarts.init(chartDom); diff --git a/src/pages/decentralized-lastic-network/index.tsx b/src/pages/decentralized-lastic-network/index.tsx index 43d1c20..dc8d008 100644 --- a/src/pages/decentralized-lastic-network/index.tsx +++ b/src/pages/decentralized-lastic-network/index.tsx @@ -189,6 +189,12 @@ const DecentralizedElasticNetwork = () => { // return () => clearInterval(interval); // }, [dispatch]); + useEffect(()=>{ + return ()=>{ + dispatch(setProxiesLine(false)); + } + },[]) + return (
@@ -226,19 +232,19 @@ const DecentralizedElasticNetwork = () => { />
-
+ {/*
*/}
{/*
{item.transactions}
*/} -
{item?.balanceToFixed} SOL
-
- {item.txs.length}笔交易 -
+ {/*
{item?.balanceToFixed} SOL
*/} +
#{item.height}
{item.timerstamp}
-
{item.height} H
+
+ {item.txs.length}次记录 +
); @@ -250,7 +256,7 @@ const DecentralizedElasticNetwork = () => {
- {web3List2.map((item, index) => { + {web3List2.map((item, index) => { const randomDelay = Math.floor(Math.random() * 35) * 1; return (
{ className="w-full h-full" />
-
{item.balance} SOL
-
- {item.numberTransactions}笔交易 -
+
#{item.height}
{item.timerstamp}
-
{item.height} H
+
+ {item.numberTransactions}次记录 +
); @@ -318,7 +323,8 @@ const DecentralizedElasticNetwork = () => {
{ - dispatch(setProxiesLine()); + console.log(proxy_info,'proxy_infoproxy_info') + dispatch(setProxiesLine(true)); }} > diff --git a/src/pages/new-home/components/world-geo.tsx b/src/pages/new-home/components/world-geo.tsx index 9f0da8e..0b9a295 100644 --- a/src/pages/new-home/components/world-geo.tsx +++ b/src/pages/new-home/components/world-geo.tsx @@ -69,6 +69,7 @@ export const WorldGeo = memo( selectedApp && selectedApp ? [...newList, selectedApp] : newList ?? []; // 初始化数据数组 - 不再包含 startCountry const data: any = []; + console.log(proxiesList,'proxiesList') // 遍历代理列表 proxiesList.forEach((proxyItem: any) => { // 检查是否有数据数组 @@ -182,7 +183,7 @@ export const WorldGeo = memo( ) { // 设置提示框位置 customTooltipRef.current.style.left = `${screenCoord[0] + 232 + 7}px`; - customTooltipRef.current.style.top = `${screenCoord[1] + 40 - 190}px`; + customTooltipRef.current.style.top = `${screenCoord[1] + 40 + 15}px`; } } catch (error) { console.error("Error positioning tooltip:", error); @@ -256,7 +257,7 @@ export const WorldGeo = memo( screenCoord[0] - 626 + 20 }px`; customTooltip2Ref.current.style.top = `${ - screenCoord[1] + 40 - 218 + screenCoord[1] + 40 - 13 }px`; } } catch (error) { diff --git a/src/pages/new-home/index.tsx b/src/pages/new-home/index.tsx index 55ba3da..883a8c2 100644 --- a/src/pages/new-home/index.tsx +++ b/src/pages/new-home/index.tsx @@ -73,7 +73,6 @@ const NewHome = () => { const [dialogLoading] = useState(false); const [selectedApp, setSelectedApp] = useState(null); - const [tooltipClosed, setTooltipClosed] = useState(true); const [tooltipType, setTooltipType] = useState( @@ -108,10 +107,6 @@ const NewHome = () => { setSelectedApp(item); }; - - - - const [dataInfo, setDataInfo] = useState({ passAuthentication: { type: "PASS_AUTHENTICATION", @@ -190,7 +185,7 @@ const NewHome = () => { } setIsProxyLoading(true); - + console.log("????"); // 切换代理状态 await dispatch(isProxyEnabled ? disableProxy() : enableProxy()).unwrap(); } catch (error) { @@ -238,9 +233,9 @@ const NewHome = () => { alt="" /> */} {/*
*/} -
-
-
+
+
+
{newWeb3List.map((item, index) => { // 随机0-10的整数 const randomDelay = Math.floor(Math.random() * 35) * 1; @@ -265,20 +260,18 @@ const NewHome = () => { />
-
+ {/*
*/}
{/*
{item.transactions}
*/} -
{item?.balanceToFixed} SOL
-
- {item.txs.length}笔交易 -
+ {/*
{item?.balanceToFixed} SOL
*/} +
#{item.height}
{item.timerstamp}
- {item.height} H + {item.txs.length}次记录
@@ -291,7 +284,7 @@ const NewHome = () => {
- {web3List2.map((item, index) => { + {web3List2.map((item, index) => { const randomDelay = Math.floor(Math.random() * 35) * 1; return (
{ className="w-full h-full" />
-
{item.balance} SOL
-
- {item.numberTransactions}笔交易 -
+
#{item.height}
{item.timerstamp}
- {item.height} H + {item.numberTransactions}次记录
@@ -390,7 +380,6 @@ const NewHome = () => { ); })}
-
); }; diff --git a/src/store/web3Slice.ts b/src/store/web3Slice.ts index 98192a9..723d86e 100644 --- a/src/store/web3Slice.ts +++ b/src/store/web3Slice.ts @@ -1,6 +1,7 @@ -import { createSlice } from "@reduxjs/toolkit"; +import { createSlice,createAsyncThunk } from "@reduxjs/toolkit"; import { v4 as uuid } from "uuid"; import { data1, data2 } from "./datas"; + export interface Iweb3 { id?: string; name?: string; @@ -32,6 +33,13 @@ interface Iweb3Slice { nodeDownList: any[]; // 节点下线 } +export const setProxiesList = createAsyncThunk( + 'web3/setProxiesList', + async (payload, { dispatch }) => { + dispatch(setProxiesLine()); + } +); + // 随机生成 0-100 之间的数字，保留一位小数或整数 const randomBalance = (): string => { const value = Math.random() * 100; @@ -90,7 +98,9 @@ const initialState: Iweb3Slice = { wg: false, change_time: 0, change_at: 0, - proxies: [], + proxies: [ + + ], }, newHomeProxies: [ { @@ -201,7 +211,7 @@ export const appSlice = createSlice({ state.proxy_info.proxies.push(data2); } }, - setProxiesLine: (state) => { + setProxiesLine: (state,action) => { if (state.proxy_info.proxies.length === 0) return; // 判断一下如果state.proxy_info.proxies.lengt === 2并且 web3List.length ===1 那么 添加一个web3 // 如果state.proxy_info.proxies.lengt === 2并且 web3List.length ===2 那么不添加web3 @@ -213,7 +223,7 @@ export const appSlice = createSlice({ if (state.proxy_info.proxies.length === 0) return; // 标记所有代理为在线 - 这个操作仍然需要 state.proxy_info.proxies = state.proxy_info.proxies.map((item: any) => { - item.isLine = true; + item.isLine = action.payload; return item; }); },