mirror of
https://github.com/jason5ng32/MyIP.git
synced 2026-11-04 08:55:47 +00:00
Nav Improvements
This commit is contained in:
jason5ng32 committed
1 parent
f61ca832ad
commit
923b58f2da
6 files changed
+156
-117
No files matched your search
@@ -7,7 +7,6 @@ COPY . .
|
||||
RUN npm run build
|
||||
|
||||
# 第二阶段：运行
|
||||
# 基于 Node.js 官方镜像
|
||||
FROM node:20-alpine as production-stage
|
||||
WORKDIR /app
|
||||
COPY --from=build-stage /app/node_modules ./node_modules
|
||||
|
||||
@@ -111,6 +111,11 @@ export default {
|
||||
this.refreshEverything();
|
||||
}
|
||||
},
|
||||
isInfosLoaded(newVal) {
|
||||
if (newVal) {
|
||||
this.$refs.navBarRef.loaded = true;
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.hideLoading();
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="about" class="text-center">
|
||||
<div id="about" class="text-center mb-2">
|
||||
<a class="link link-underline-offset link-underline-opacity-0" :class="[isDarkMode ? 'link-info' : 'link-dark']"
|
||||
data-bs-toggle="offcanvas" href="#About" role="button" aria-controls="About">
|
||||
{{ $t('about.Title') }} <i class="bi bi-arrow-left-circle-fill"></i>
|
||||
@@ -14,7 +14,7 @@
|
||||
</div>
|
||||
|
||||
|
||||
<div class="offcanvas offcanvas-end mt-5" tabindex="-1" id="About" aria-labelledby="AboutLabel"
|
||||
<div class="offcanvas offcanvas-end mt-5" :class="[isMobile ? ' w-100' :'']" tabindex="-1" id="About" aria-labelledby="AboutLabel"
|
||||
:data-bs-theme="isDarkMode ? 'dark' : 'light'">
|
||||
<div class="offcanvas-header mt-3">
|
||||
<div class="btn-group" role="group">
|
||||
|
||||
+119
-36
@@ -1,41 +1,60 @@
|
||||
<template>
|
||||
<!-- Nav -->
|
||||
<nav id="navbar-top" class="navbar navbar-expand-lg bg-body-tertiary px-3 mb-3 jn-navbar-top"
|
||||
:class="{ 'dark-mode-nav navbar-dark bg-dark': isDarkMode }">
|
||||
<div class="jn-logo">
|
||||
<a class="navbar-brand" :class="{ 'text-white': isDarkMode }" href="#" @click="handleLogoClick"><i
|
||||
class="bi bi-box-seam-fill"></i>
|
||||
{{ $t('nav.Title') }} </a>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="darkModeSwitch" @change="toggleDarkMode"
|
||||
:checked="isDarkMode">
|
||||
<label class="form-check-label" for="darkModeSwitch">
|
||||
<i v-if="isDarkMode" class="bi bi-moon-stars"></i>
|
||||
<i v-else class="bi bi-brightness-high"></i>
|
||||
</label>
|
||||
</div>
|
||||
<!-- Nav -->
|
||||
<nav id="navbar-top" class="navbar navbar-expand-lg bg-body-tertiary px-3 mb-3 jn-navbar-top"
|
||||
:class="{ 'dark-mode-nav navbar-dark bg-dark': isDarkMode }">
|
||||
<div class="jn-logo">
|
||||
<a class="navbar-brand" :class="{ 'text-white': isDarkMode }" href="#" @click="handleLogoClick"><i
|
||||
class="bi bi-box-seam-fill"></i>
|
||||
<span class=" fw-bold "> IP</span>
|
||||
<span class="fw-lighter">Check.</span>
|
||||
<span class="fw-lighter" :class="{
|
||||
'background-animation-dark': !loaded && isDarkMode,
|
||||
'background-animation-light': !loaded && !isDarkMode
|
||||
}">ing</span>
|
||||
</a>
|
||||
<div class="btn-group mx-1" :data-bs-theme="isDarkMode ? 'dark' : 'light'">
|
||||
<button type="button" class="btn btn-sm dropdown-toggle jn-button" data-bs-toggle="dropdown"
|
||||
aria-expanded="false">
|
||||
<i class="bi bi-translate"></i>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="?hl=zh"><i class="fi fi-cn"></i> 中文</a></li>
|
||||
<li><a class="dropdown-item" href="?hl=en"><i class="fi fi-us"></i> English</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group btn-group-sm " role="group" aria-label="Dark mode switch">
|
||||
<button type="button" class="btn" :class="{ 'btn-outline-light': isDarkMode, 'btn-dark': !isDarkMode }"
|
||||
@click="toggleDarkMode(false)">
|
||||
<i class="bi bi-brightness-high"></i>
|
||||
</button>
|
||||
<button type="button" class="btn" :class="{ 'btn-outline-secondary': !isDarkMode, 'btn-warning': isDarkMode }"
|
||||
@click="toggleDarkMode(true)">
|
||||
<i class="bi bi-moon-stars"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
|
||||
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon bg-transparent "></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
|
||||
<div class="navbar-nav ">
|
||||
<a class="nav-link" :class="{ 'text-white jn-deactive': isDarkMode }" href="#IPInfo"> {{ $t('nav.IPinfo') }}</a>
|
||||
<a class="nav-link" :class="{ 'text-white jn-deactive': isDarkMode }" href="#Connectivity"> {{
|
||||
$t('nav.Connectivity') }}</a>
|
||||
<a class="nav-link" :class="{ 'text-white jn-deactive': isDarkMode }" href="#WebRTC"> {{ $t('nav.WebRTC') }}</a>
|
||||
<a class="nav-link" :class="{ 'text-white jn-deactive': isDarkMode }" href="#DNSLeakTest"> {{
|
||||
$t('nav.DNSLeakTest') }}</a>
|
||||
<a class="nav-link" :class="{ 'text-white jn-deactive': isDarkMode }" href="#SpeedTest"> {{ $t('nav.SpeedTest')
|
||||
}}</a>
|
||||
<a class="nav-link" :class="{ 'text-white jn-deactive': isDarkMode }" href="#PingTest"> {{ $t('nav.PingTest')
|
||||
}}</a>
|
||||
<a class="nav-link" :class="{ 'text-white jn-deactive': isDarkMode }" href="#MTRTest"> {{ $t('nav.MTRTest') }}</a>
|
||||
</div>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
|
||||
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon bg-transparent "></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
|
||||
<div class="navbar-nav ">
|
||||
<a class="nav-link" :class="{ 'text-white jn-deactive': isDarkMode }" href="#IPInfo"> {{ $t('nav.IPinfo') }}</a>
|
||||
<a class="nav-link" :class="{ 'text-white jn-deactive': isDarkMode }" href="#Connectivity"> {{
|
||||
$t('nav.Connectivity') }}</a>
|
||||
<a class="nav-link" :class="{ 'text-white jn-deactive': isDarkMode }" href="#WebRTC"> {{ $t('nav.WebRTC') }}</a>
|
||||
<a class="nav-link" :class="{ 'text-white jn-deactive': isDarkMode }" href="#DNSLeakTest"> {{
|
||||
$t('nav.DNSLeakTest') }}</a>
|
||||
<a class="nav-link" :class="{ 'text-white jn-deactive': isDarkMode }" href="#SpeedTest"> {{ $t('nav.SpeedTest')
|
||||
}}</a>
|
||||
<a class="nav-link" :class="{ 'text-white jn-deactive': isDarkMode }" href="#PingTest"> {{ $t('nav.PingTest')
|
||||
}}</a>
|
||||
<a class="nav-link" :class="{ 'text-white jn-deactive': isDarkMode }" href="#MTRTest"> {{ $t('nav.MTRTest') }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -55,6 +74,11 @@ export default {
|
||||
};
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
loaded: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 切换暗黑模式
|
||||
@@ -107,4 +131,63 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
<style scoped>
|
||||
.jn-button:hover {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.jn-button:active {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.jn-button:focus {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.jn-button {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.background-animation-light {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.background-animation-light::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
background-color: rgb(0, 0, 0);
|
||||
animation: backgroundSlide 1s linear infinite;
|
||||
}
|
||||
|
||||
.background-animation-dark {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.background-animation-dark::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
background-color: rgb(255, 255, 255);
|
||||
animation: backgroundSlide 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes backgroundSlide {
|
||||
from {
|
||||
left: -100%;
|
||||
}
|
||||
|
||||
to {
|
||||
left: 100%;
|
||||
}
|
||||
}</style>
|
||||
+15
-39
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"nav": {
|
||||
"id": "nav",
|
||||
"Title": "IP Toolbox",
|
||||
"Title": "IPCheck.ing",
|
||||
"IPinfo": "IP Infos",
|
||||
"Connectivity": "Connectivity",
|
||||
"WebRTC": "WebRTC Test",
|
||||
@@ -187,7 +187,7 @@
|
||||
"fix": "Fixed",
|
||||
"versions": [
|
||||
{
|
||||
"version": "v1.0.0",
|
||||
"version": "v1.0",
|
||||
"date": "Nov 06, 2020",
|
||||
"content": [
|
||||
{
|
||||
@@ -205,7 +205,7 @@
|
||||
]
|
||||
},
|
||||
{
|
||||
"version": "v2.0.0",
|
||||
"version": "v2.0",
|
||||
"date": "Nov 24, 2023",
|
||||
"content": [
|
||||
{
|
||||
@@ -219,7 +219,7 @@
|
||||
]
|
||||
},
|
||||
{
|
||||
"version": "v2.1.0",
|
||||
"version": "v2.1",
|
||||
"date": "Nov 25, 2023",
|
||||
"content": [
|
||||
{
|
||||
@@ -233,7 +233,7 @@
|
||||
]
|
||||
},
|
||||
{
|
||||
"version": "v2.2.0",
|
||||
"version": "v2.2",
|
||||
"date": "Nov 26, 2023",
|
||||
"content": [
|
||||
{
|
||||
@@ -251,7 +251,7 @@
|
||||
]
|
||||
},
|
||||
{
|
||||
"version": "v2.3.0",
|
||||
"version": "v2.3",
|
||||
"date": "Nov 27, 2023 ",
|
||||
"content": [
|
||||
{
|
||||
@@ -269,7 +269,7 @@
|
||||
]
|
||||
},
|
||||
{
|
||||
"version": "v2.4.0",
|
||||
"version": "v2.4",
|
||||
"date": "Dec 1, 2023",
|
||||
"content": [
|
||||
{
|
||||
@@ -287,7 +287,7 @@
|
||||
]
|
||||
},
|
||||
{
|
||||
"version": "v2.5.0",
|
||||
"version": "v2.5",
|
||||
"date": "Dec 20, 2023",
|
||||
"content": [
|
||||
{
|
||||
@@ -309,50 +309,26 @@
|
||||
]
|
||||
},
|
||||
{
|
||||
"version": "v2.6.0",
|
||||
"date": "Jan 25, 2024",
|
||||
"version": "v3.0",
|
||||
"date": "Jan 28, 2024",
|
||||
"content": [
|
||||
{
|
||||
"type": "add",
|
||||
"change": "Refactored the entire project using Vite + Vue3"
|
||||
},
|
||||
{
|
||||
"type": "add",
|
||||
"change": "Added global latency test feature"
|
||||
},
|
||||
{
|
||||
"type": "improve",
|
||||
"change": "Optimized map display in dark mode"
|
||||
},
|
||||
{
|
||||
"type": "fix",
|
||||
"change": "Fixed some issues"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"version": "v3.0.0",
|
||||
"date": "Jan 28, 2024",
|
||||
"content": [
|
||||
{
|
||||
"type": "add",
|
||||
"change": "Refactored the entire project using Vue3"
|
||||
"change": "Added MTR test feature"
|
||||
},
|
||||
{
|
||||
"type": "improve",
|
||||
"change": "Multiple performance and user experience optimizations"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"version": "v3.1.0",
|
||||
"date": "Jan 29, 2024",
|
||||
"content": [
|
||||
{
|
||||
"type": "add",
|
||||
"change": "Added MTR test feature"
|
||||
},
|
||||
{
|
||||
"type": "add",
|
||||
"change": "Added global latency test map mode"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
+15
-39
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"nav": {
|
||||
"id": "nav",
|
||||
"Title": "IP 工具箱",
|
||||
"Title": "IPCheck.ing",
|
||||
"IPinfo": "IP 信息",
|
||||
"Connectivity": "网络连通性",
|
||||
"WebRTC": "WebRTC 测试",
|
||||
@@ -187,7 +187,7 @@
|
||||
"fix": "修复",
|
||||
"versions": [
|
||||
{
|
||||
"version": "v1.0.0",
|
||||
"version": "v1.0",
|
||||
"date": "Nov 06, 2020",
|
||||
"content": [
|
||||
{
|
||||
@@ -205,7 +205,7 @@
|
||||
]
|
||||
},
|
||||
{
|
||||
"version": "v2.0.0",
|
||||
"version": "v2.0",
|
||||
"date": "Nov 24, 2023",
|
||||
"content": [
|
||||
{
|
||||
@@ -219,7 +219,7 @@
|
||||
]
|
||||
},
|
||||
{
|
||||
"version": "v2.1.0",
|
||||
"version": "v2.1",
|
||||
"date": "Nov 25, 2023",
|
||||
"content": [
|
||||
{
|
||||
@@ -233,7 +233,7 @@
|
||||
]
|
||||
},
|
||||
{
|
||||
"version": "v2.2.0",
|
||||
"version": "v2.2",
|
||||
"date": "Nov 26, 2023",
|
||||
"content": [
|
||||
{
|
||||
@@ -251,7 +251,7 @@
|
||||
]
|
||||
},
|
||||
{
|
||||
"version": "v2.3.0",
|
||||
"version": "v2.3",
|
||||
"date": "Nov 27, 2023 ",
|
||||
"content": [
|
||||
{
|
||||
@@ -269,7 +269,7 @@
|
||||
]
|
||||
},
|
||||
{
|
||||
"version": "v2.4.0",
|
||||
"version": "v2.4",
|
||||
"date": "Dec 1, 2023",
|
||||
"content": [
|
||||
{
|
||||
@@ -287,7 +287,7 @@
|
||||
]
|
||||
},
|
||||
{
|
||||
"version": "v2.5.0",
|
||||
"version": "v2.5",
|
||||
"date": "Dec 20, 2023",
|
||||
"content": [
|
||||
{
|
||||
@@ -309,50 +309,26 @@
|
||||
]
|
||||
},
|
||||
{
|
||||
"version": "v2.6.0",
|
||||
"date": "Jan 25, 2024",
|
||||
"version": "v3.0",
|
||||
"date": "Jan 28, 2024",
|
||||
"content": [
|
||||
{
|
||||
"type": "add",
|
||||
"change": "使用 Vite + Vue3 重构了整个项目"
|
||||
},
|
||||
{
|
||||
"type": "add",
|
||||
"change": "增加全球延迟测试功能"
|
||||
},
|
||||
{
|
||||
"type": "improve",
|
||||
"change": "优化黑暗模式下的地图展示"
|
||||
},
|
||||
{
|
||||
"type": "fix",
|
||||
"change": "修复一些问题"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"version": "v3.0.0",
|
||||
"date": "Jan 28, 2024",
|
||||
"content": [
|
||||
{
|
||||
"type": "add",
|
||||
"change": "使用 Vue3 重构了整个项目"
|
||||
"change": "增加 MTR 测试功能"
|
||||
},
|
||||
{
|
||||
"type": "improve",
|
||||
"change": "多个性能优化和体验优化"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"version": "v3.1.0",
|
||||
"date": "Jan 29, 2024",
|
||||
"content": [
|
||||
{
|
||||
"type": "add",
|
||||
"change": "添加 MTR 测试功能"
|
||||
},
|
||||
{
|
||||
"type": "add",
|
||||
"change": "添加全球延迟测试地图模式"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user