Skip to content

Commit

Permalink
增加淘宝、Upai IP来源，添加地图展示开关
Browse files Browse the repository at this point in the history
  • Loading branch information
@jason5ng32
jason5ng32 committed Nov 26, 2023
1 parent cff1215 commit 67a3c9f
Show file tree
Hide file tree
Showing 2 changed files with 128 additions and 63 deletions.
19 changes: 16 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,10 +86,18 @@
margin-bottom: 40pt;
margin-right: 4pt;
}

footer {
height: 100pt;
padding-top: 20pt;
}

.jn-radio {
display: flex;
justify-content: flex-end;
align-items: stretch;
flex-direction: row;
}
</style>
</head>

Expand Down Expand Up @@ -134,15 +142,20 @@
<!-- IP 数据容器 -->
<div class="ip-data-section mb-4">
<div class="row jn-title">
<h2 id="scrollspyHeading1">🛜 IP 数据</h2>
<h2 id="scrollspyHeading1" class="col-6">🛜 IP 数据</h2>
<div class="form-check form-switch col-6 jn-radio">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault"
@change="toggleMaps" :checked="isMapShown">
<label class="form-check-label" for="flexSwitchCheckDefault">{{ isMapShown ? '&nbsp;显示地图' : '&nbsp;隐藏地图' }}</label>
</div>
</div>
<div class="text-secondary">
<p>将会从 4 个来源检查 IP 数据，如果当前 IP 栈只有 1 个，则没有数据的来源会显示为空。</p>
</div>
<div class="jn-card-deck">
<div class="row">
<div v-for="card in ipDataCards" :key="card.id"
:class="{'jn-opacity': !card.asn, 'col-xl-3': true, 'col-lg-6': true, 'col-md-6': true, 'mb-4': true}">
:class="{'jn-opacity': !card.asn, 'col-xl-4': true, 'col-lg-6': true, 'col-md-6': true, 'mb-4': true}">
<div class="card jn-card">
<div class="card-header jn-ip-title" style="font-weight: bold;">
<span>来源: {{ card.source }}</span>
Expand All @@ -155,7 +168,7 @@ <h2 id="scrollspyHeading1">🛜 IP 数据</h2>
style="border:0;" allowfullscreen>
</iframe> -->

<img :src="card.mapUrl" class="card-img-top jn-map-image" alt="地图">
<img v-if="isMapShown" :src="card.mapUrl" class="card-img-top jn-map-image" alt="地图">
<div class="card-body">
<ul class="list-group list-group-flush">
<li class="list-group-item jn-list-group-item"><span class="jn-text">🖥️ IP 地址</span>: {{ card.ip
Expand Down
172 changes: 112 additions & 60 deletions res/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,36 @@ new Vue({
el: '#app',
data: {
ipDataCards: [
{
id: 'upai',
ip: '',
country_name: '',
region: '',
city: '',
latitude: '',
longitude: '',
isp: '',
asn: '',
asnlink: '',
mapUrl: 'res/defaultMap.jpg',
showMap: false,
source: 'Upai'
},
{
id: 'taobao',
ip: '',
country_name: '',
region: '',
city: '',
latitude: '',
longitude: '',
isp: '',
asn: '',
asnlink: '',
mapUrl: 'res/defaultMap.jpg',
showMap: false,
source: 'Taobao'
},
{
id: 'cloudflare_v4',
ip: '',
Expand All @@ -14,6 +44,7 @@ new Vue({
asn: '',
asnlink: '',
mapUrl: 'res/defaultMap.jpg',
showMap: false,
source: 'Cloudflare IPv4'
},
{
Expand All @@ -28,6 +59,7 @@ new Vue({
asn: '',
asnlink: '',
mapUrl: 'res/defaultMap.jpg',
showMap: false,
source: 'Cloudflare IPv6'
},
{
Expand All @@ -42,6 +74,7 @@ new Vue({
asn: '',
asnlink: '',
mapUrl: 'res/defaultMap.jpg',
showMap: false,
source: 'IPify IPv4'
},
{
Expand All @@ -56,34 +89,9 @@ new Vue({
asn: '',
asnlink: '',
mapUrl: 'res/defaultMap.jpg',
showMap: false,
source: 'IPify IPv6'
},
// {
// id: 'ipapi',
// ip: '',
// country_name: '',
// region: '',
// city: '',
// latitude: '',
// longitude: '',
// isp: '',
// asn: '',
// asnlink: '',
// source: ''
// },
// {
// id: 'taobao',
// ip: '',
// country_name: '',
// region: '',
// city: '',
// latitude: '',
// longitude: '',
// isp: '',
// asn: '',
// asnlink: '',
// source: ''
// },
],
connectivityTests: [
{
Expand Down Expand Up @@ -201,9 +209,47 @@ new Vue({
// queryError: '',
modalQueryResult: null,
modalQueryError: '',
isMapShown: false,
},
methods: {

getIPFromUpai() {
const unixTime = Date.now();
const url = `https://pubstatic.b0.upaiyun.com/?_upnode&t=${unixTime}`;

fetch(url)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
const ip = data.remote_addr;
this.ipDataCards[0].ip = ip;
this.fetchIPDetails(this.ipDataCards[0], ip);
})
.catch(error => {
console.error('Error fetching IP from Upai:', error);
this.ipDataCards[0].ip = '获取失败或不存在 IPv4 地址';
});
},

getIPFromTaobao() {
window.ipCallback = (data) => {
var ip = data.ip;
this.ipDataCards[1].ip = ip; // 存储获取到的 IP 地址
this.ipDataCards[1].source = 'TaoBao';
this.fetchIPDetails(this.ipDataCards[1], ip);
delete window.ipCallback; // 清理
};
var script = document.createElement('script');
script.src = 'https://www.taobao.com/help/getip.php?callback=ipCallback';
document.head.appendChild(script);
// 清理
document.head.removeChild(script);
},

getIPFromCloudflare_V4() {
fetch('https://1.0.0.1/cdn-cgi/trace')
.then(response => response.text())
Expand All @@ -212,13 +258,13 @@ new Vue({
const ipLine = lines.find(line => line.startsWith('ip='));
if (ipLine) {
const ip = ipLine.split('=')[1];
this.ipDataCards[0].ip = ip;
this.fetchIPDetails(this.ipDataCards[0], ip);
this.ipDataCards[2].ip = ip;
this.fetchIPDetails(this.ipDataCards[2], ip);
}
})
.catch(error => {
console.error('Error fetching IP from Cloudflare:', error);
this.ipDataCards[0].ip = '获取失败或不存在 IPv4 地址';
this.ipDataCards[2].ip = '获取失败或不存在 IPv4 地址';
});
},

Expand All @@ -230,13 +276,13 @@ new Vue({
const ipLine = lines.find(line => line.startsWith('ip='));
if (ipLine) {
const ip = ipLine.split('=')[1];
this.ipDataCards[1].ip = ip;
this.fetchIPDetails(this.ipDataCards[1], ip);
this.ipDataCards[3].ip = ip;
this.fetchIPDetails(this.ipDataCards[3], ip);
}
})
.catch(error => {
console.error('Error fetching IP from Cloudflare:', error);
this.ipDataCards[1].ip = '获取失败或不存在 IPv6 地址';
this.ipDataCards[3].ip = '获取失败或不存在 IPv6 地址';
});
},
getIPFromIpify_V4() {
Expand All @@ -248,12 +294,12 @@ new Vue({
return response.json();
})
.then(data => {
this.ipDataCards[2].ip = data.ip;
this.fetchIPDetails(this.ipDataCards[2], data.ip);
this.ipDataCards[4].ip = data.ip;
this.fetchIPDetails(this.ipDataCards[4], data.ip);
})
.catch(error => {
console.error('Error fetching IPv4 address from ipify:', error);
this.ipDataCards[2].ip = '获取失败或不存在 IPv4 地址';
this.ipDataCards[4].ip = '获取失败或不存在 IPv4 地址';
});
},
getIPFromIpify_V6() {
Expand All @@ -265,14 +311,15 @@ new Vue({
return response.json();
})
.then(data => {
this.ipDataCards[3].ip = data.ip;
this.fetchIPDetails(this.ipDataCards[3], data.ip);
this.ipDataCards[5].ip = data.ip;
this.fetchIPDetails(this.ipDataCards[5], data.ip);
})
.catch(error => {
console.error('Error fetching IPv6 address from ipify:', error);
this.ipDataCards[3].ip = '获取失败或不存在 IPv6 地址';
this.ipDataCards[5].ip = '获取失败或不存在 IPv6 地址';
});
},

// getIPFromIpapi() {
// var xhr = new XMLHttpRequest();
// xhr.onreadystatechange = () => {
Expand All @@ -287,21 +334,6 @@ new Vue({
// xhr.open('GET', 'https://ipapi.co/json/', true);
// xhr.send();
// },

// getIPFromTaobao() {
// window.ipCallback = (data) => {
// var ip = data.ip;
// this.ipDataCards[5].ip = ip; // 存储获取到的 IP 地址
// this.ipDataCards[5].source = 'TaoBao';
// this.fetchIPDetails(this.ipDataCards[5], ip);
// delete window.ipCallback; // 清理
// };
// var script = document.createElement('script');
// script.src = 'https://www.taobao.com/help/getip.php?callback=ipCallback';
// document.head.appendChild(script);
// // 清理
// document.head.removeChild(script);
// },
async fetchIPDetails(card, ip) {
try {
const response = await fetch(`https://ipapi.co/${ip}/json/`);
Expand Down Expand Up @@ -357,12 +389,12 @@ new Vue({
case 'IPify IPv6':
this.getIPFromIpify_V6(card);
break;
// case 'IPAPI.co':
// this.getIPFromIpapi(card);
// break;
// case 'TaoBao':
// this.getIPFromTaobao(card);
// break;
case 'Upai':
this.getIPFromUpai(card);
break;
case 'TaoBao':
this.getIPFromTaobao(card);
break;
default:
console.error('未知来源:', card.source);
}
Expand All @@ -381,6 +413,13 @@ new Vue({
card.mapUrl = 'res/defaultMap.jpg';
},

toggleMaps() {
this.isMapShown = !this.isMapShown; // 切换开关状态
this.ipDataCards.forEach(card => {
card.showMap = this.isMapShown; // 更新每一项的 showMap 值
});
},

checkConnectivityHandler(test) {
const beginTime = + new Date();
test.status = "检查中...";
Expand Down Expand Up @@ -532,6 +571,18 @@ new Vue({
},

},

created() {
if (localStorage.getItem('isMapShown')) {
this.isMapShown = localStorage.getItem('isMapShown') === 'true';
}
},
watch: {
isMapShown(newVal) {
// 当 isMapShown 改变时，更新本地存储
localStorage.setItem('isMapShown', newVal);
}
},
mounted() {
setTimeout(() => {
this.checkAllConnectivity();
Expand All @@ -544,7 +595,8 @@ new Vue({
this.getIPFromIpify_V4();
this.getIPFromIpify_V6();
// this.getIPFromIpapi();
// this.getIPFromTaobao();
this.getIPFromTaobao();
this.getIPFromUpai();
const modalElement = document.getElementById('IPCheck');
modalElement.addEventListener('hidden.bs.modal', this.resetModalData);
}
Expand Down

0 comments on commit 67a3c9f

Please sign in to comment.