zwgczx/zwpanel
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加ping检测时间，智能根据内网情况打开网页

Browse Source
This commit is contained in:
wintsa 2024-03-18 17:45:13 +08:00
parent 76c26f3e28
commit 51df420c01
5 changed files with 198 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/typings/panel.d.ts vendored
View File

@ -13,6 +13,7 @@ declare namespace Panel {
description?: string
openMethod: number
itemIconGroupId ?:number
time ?:number|string|null
}
interface ItemIconGroup extends Common.InfoBase {

21
src/utils/functions/ping.ts Normal file
View File

@ -0,0 +1,21 @@
export function ping(url:string) {
return new Promise((resolve, reject) => {
var start = new Date().getTime();
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === XMLHttpRequest.DONE) {
var end = new Date().getTime();
var time = end - start;
resolve(time);
}
};
xhr.onerror = function () {
reject(new Error('请求失败'));
};
xhr.open("GET", url, true);
xhr.send();
});
}

33
src/utils/is/index.ts
View File

@ -53,3 +53,36 @@ export function isMap<T extends Map<any, any>>(value: T | unknown): value is T {
export function isFile<T extends File>(value: T | unknown): value is T {
return Object.prototype.toString.call(value) === '[object File]'
}
/**
* @Author: wintsa
* @Date: 2024-03-18 16:32:53
* @LastEditors: wintsa
* @Description: 判断ip是否为局域网
* @return {*}
*/
export function isLocalUrl(url:string) {
// 创建一个 <a> 元素
var anchor = document.createElement('a');
// 设置其 href 属性为所检查的 URL
anchor.href = url;
// 获取主机名
var hostname = anchor.hostname;
// 检查主机名是否是局域网的
// 这里假设局域网主机名的特征
var ip = hostname.split('.');
if (
// 检查是否为localhost
hostname === 'localhost' ||
// 检查是否为私有IP地址
(ip.length === 4 && (
ip[0] === '10' ||
(ip[0] === '172' && parseInt(ip[1]) >= 16 && parseInt(ip[1]) <= 31) ||
(ip[0] === '192' && ip[1] === '168')
))
) {
return true;
} else {
return false;
}
}

51
src/views/home/components/AppIcon/index.vue
View File

@ -37,21 +37,25 @@ const textColor = computed(() => {
<template>
<div class="app-icon w-full">
<!-- 详情图标 -->
<div
v-if="style === PanelPanelConfigStyleEnum.info"
<div v-if="style === PanelPanelConfigStyleEnum.info"
class="app-icon-info w-full rounded-2xl transition-all duration-200 hover:shadow-[0_0_20px_10px_rgba(0,0,0,0.2)] flex"
:style="{ background: itemInfo?.icon?.backgroundColor || defaultBackground }"
>
:style="{ background: itemInfo?.icon?.backgroundColor || defaultBackground }">
<!-- 图标 -->
<div class="app-icon-info-icon w-[70px] h-[70px]">
<div class="w-[70px] h-full flex items-center justify-center ">
<ItemIcon :item-icon="itemInfo?.icon" force-background="transparent" :size="50" class="overflow-hidden rounded-xl" />
<ItemIcon :item-icon="itemInfo?.icon" force-background="transparent" :size="50"
class="overflow-hidden rounded-xl" />
</div>
</div>
<!-- 文字 -->
<!-- 如果为纯白色，将自动根据背景的明暗计算字体的黑白色 -->
<div class="text-white flex items-center" :style="{ color: (iconTextColor === '#ffffff') ? textColor : iconTextColor, maxWidth: 'calc(100% - 80px)' }">
<div class="text-white flex items-center"
:style="{ color: (iconTextColor === '#ffffff') ? textColor : iconTextColor, maxWidth: 'calc(100% - 80px)', flex: 1,position: 'relative' }">
<transition name="fade">
<div class="badge" v-if="itemInfo?.time">{{ itemInfo?.time }}</div> <!-- 这里的数字表示未读数 -->
</transition>
<div class="app-icon-info-text-box w-full">
<div class="app-icon-info-text-box-title font-semibold w-full">
<NEllipsis>
@ -71,17 +75,40 @@ const textColor = computed(() => {
<div v-if="style === PanelPanelConfigStyleEnum.icon" class="app-icon-small">
<div
class="app-icon-small-icon overflow-hidden rounded-2xl sunpanel w-[70px] h-[70px] mx-auto rounded-2xl transition-all duration-200 hover:shadow-[0_0_20px_10px_rgba(0,0,0,0.2)]"
:title="itemInfo?.description"
>
:title="itemInfo?.description">
<ItemIcon :item-icon="itemInfo?.icon" />
</div>
<div
v-if="!iconTextIconHideTitle"
<div v-if="!iconTextIconHideTitle"
class="app-icon-small-title text-center app-icon-text-shadow cursor-pointer mt-[2px]"
:style="{ color: iconTextColor }"
>
:style="{ color: iconTextColor }">
<span>{{ itemInfo?.title }}</span>
</div>
</div>
</div>
</template>
<style scoped>
.badge {
position: absolute;
top: 0;
right: 0;
color: white;
width: 20px;
/* 设置徽章的宽度 */
height: 20px;
/* 设置徽章的高度 */
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
mix-blend-mode: difference; /* 设置文字与背景色反色 */
/* 设置徽章内文本的大小 */
}
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>

198
src/views/home/index.vue
View File

@ -14,6 +14,8 @@ import { PanelPanelConfigStyleEnum, PanelStateNetworkModeEnum } from '@/enums'
import { VisitMode } from '@/enums/auth'
import { router } from '@/router'
import { t } from '@/locales'
import { isLocalUrl } from '@/utils/is'
import { ping } from '@/utils/functions/ping'
interface ItemGroup extends Panel.ItemIconGroup {
sortStatus?: boolean
@ -76,10 +78,20 @@ function handleItemClick(itemGroupIndex: number, item: Panel.ItemInfo) {
let jumpUrl = ''
if (item)
jumpUrl = (panelState.networkMode === PanelStateNetworkModeEnum.lan ? item.lanUrl : item.url) as string
if (item.lanUrl === '')
// if (item)
// jumpUrl = (panelState.networkMode === PanelStateNetworkModeEnum.lan ? item.lanUrl : item.url) as string
// if (item.lanUrl === '')
// jumpUrl = item.url
//修改为自动判断目前为局域网/公网
const isflag = isLocalUrl(window.location.origin)
if (isflag && item.lanUrl) {
jumpUrl = item.lanUrl as string
} else {
jumpUrl = item.url
}
openPage(item.openMethod, jumpUrl, item.title)
}
@ -184,6 +196,7 @@ function handleEditSuccess(item: Panel.ItemInfo) {
function handleChangeNetwork(mode: PanelStateNetworkModeEnum) {
panelState.setNetworkMode(mode)
if (mode === PanelStateNetworkModeEnum.lan)
ms.success(t('panelHome.changeToLanModelSuccess'))
else
@ -307,8 +320,26 @@ function handleSetSortStatus(groupIndex: number, sortStatus: boolean) {
updateItemIconGroupByNet(groupIndex, items.value[groupIndex].id as number)
}
}
function ping(params: any) {
return params
async function usePing(params: any, itemGroupIndex: any) {
const isflag = isLocalUrl(window.location.origin)
const promises = params.items.map(async (e: any) => {
if (isflag && e.lanUrl) {
return ping(e.lanUrl)
} else {
return ping(e.url)
}
})
const result = await Promise.all(promises)
items.value[itemGroupIndex].items?.forEach((e: any, i) => {
e['time'] = result[i]
})
setTimeout(() => {
items.value[itemGroupIndex].items?.forEach((e: any) => {
delete e['time']
})
}, 5000);
}
function handleEditItem(item: Panel.ItemInfo) {
editItemInfoData.value = item
@ -326,24 +357,19 @@ function handleAddItem(itemIconGroupId?: number) {
<template>
<div class="w-full h-full sun-main">
<div
class="cover wallpaper" :style="{
<div class="cover wallpaper" :style="{
filter: `blur(${panelState.panelConfig.backgroundBlur}px)`,
background: `url(${panelState.panelConfig.backgroundImageSrc}) no-repeat`,
backgroundSize: 'cover',
backgroundPosition: 'center',
}"
/>
}" />
<div class="mask" :style="{ backgroundColor: `rgba(0,0,0,${panelState.panelConfig.backgroundMaskNumber})` }" />
<div ref="scrollContainerRef" class="absolute w-full h-full overflow-auto">
<div
class="p-2.5 mx-auto"
:style="{
<div class="p-2.5 mx-auto" :style="{
marginTop: `${panelState.panelConfig.marginTop}%`,
marginBottom: `${panelState.panelConfig.marginBottom}%`,
maxWidth: (panelState.panelConfig.maxWidth ?? '1200') + panelState.panelConfig.maxWidthUnit,
}"
>
}">
<!-- 头 -->
<div class="mx-[auto] w-[80%]">
<div class="flex mx-[auto] items-center justify-center text-white">
@ -365,45 +391,38 @@ function handleAddItem(itemIconGroupId?: number) {
</div>
<!-- 应用盒子 -->
<div :style="{ marginLeft: `${panelState.panelConfig.marginX}px`, marginRight: `${panelState.panelConfig.marginX}px` }">
<!-- 系统监控状态 -->
<div
v-if="panelState.panelConfig.systemMonitorShow
:style="{ marginLeft: `${panelState.panelConfig.marginX}px`, marginRight: `${panelState.panelConfig.marginX}px` }">
<!-- 系统监控状态 -->
<div v-if="panelState.panelConfig.systemMonitorShow
&& ((panelState.panelConfig.systemMonitorPublicVisitModeShow && authStore.visitMode === VisitMode.VISIT_MODE_PUBLIC)
|| authStore.visitMode === VisitMode.VISIT_MODE_LOGIN)"
class="flex mx-auto"
>
<SystemMonitor
:allow-edit="authStore.visitMode === VisitMode.VISIT_MODE_LOGIN"
:show-title="panelState.panelConfig.systemMonitorShowTitle"
/>
|| authStore.visitMode === VisitMode.VISIT_MODE_LOGIN)" class="flex mx-auto">
<SystemMonitor :allow-edit="authStore.visitMode === VisitMode.VISIT_MODE_LOGIN"
:show-title="panelState.panelConfig.systemMonitorShowTitle" />
</div>
<!-- 组纵向排列 -->
<div
v-for="(itemGroup, itemGroupIndex) in filterItems" :key="itemGroupIndex"
class="item-list mt-[50px]"
<div v-for="(itemGroup, itemGroupIndex) in filterItems" :key="itemGroupIndex" class="item-list mt-[50px]"
:class="itemGroup.sortStatus ? 'shadow-2xl border shadow-[0_0_30px_10px_rgba(0,0,0,0.3)] p-[10px] rounded-2xl' : ''"
@mouseenter="handleSetHoverStatus(itemGroupIndex, true)"
@mouseleave="handleSetHoverStatus(itemGroupIndex, false)"
>
@mouseleave="handleSetHoverStatus(itemGroupIndex, false)">
<!-- 分组标题 -->
<div class="text-white text-xl font-extrabold mb-[20px] ml-[10px] flex items-center">
<span class="group-title text-shadow">
{{ itemGroup.title }}
</span>
<div
v-if="authStore.visitMode === VisitMode.VISIT_MODE_LOGIN"
<div v-if="authStore.visitMode === VisitMode.VISIT_MODE_LOGIN"
class="group-buttons ml-2 delay-100 transition-opacity flex"
:class="itemGroup.hoverStatus ? 'opacity-100' : 'opacity-0'"
>
:class="itemGroup.hoverStatus ? 'opacity-100' : 'opacity-0'">
<span class="mr-2 cursor-pointer" :title="t('common.add')" @click="handleAddItem(itemGroup.id)">
<SvgIcon class="text-white font-xl" icon="typcn:plus" />
</span>
<span class="mr-2 cursor-pointer " :title="t('common.sort')" @click="handleSetSortStatus(itemGroupIndex, !itemGroup.sortStatus)">
<span class="mr-2 cursor-pointer " :title="t('common.sort')"
@click="handleSetSortStatus(itemGroupIndex, !itemGroup.sortStatus)">
<SvgIcon class="text-white font-xl" icon="ri:drag-drop-line" />
</span>
<span class="mr-2 cursor-pointer " :title="t('panelHome.ping')" @click="ping(itemGroupIndex)">
<span class="mr-2 cursor-pointer " :title="t('panelHome.ping')"
@click="usePing(itemGroup, itemGroupIndex)">
<SvgIcon class="text-white font-xl" icon="mdi-wan" />
</span>
</div>
@ -412,34 +431,24 @@ function handleAddItem(itemIconGroupId?: number) {
<!-- 详情图标 -->
<div v-if="panelState.panelConfig.iconStyle === PanelPanelConfigStyleEnum.info">
<div v-if="itemGroup.items">
<VueDraggable
v-model="itemGroup.items" item-key="sort" :animation="300"
class="icon-info-box"
filter=".not-drag"
:disabled="!itemGroup.sortStatus"
>
<div v-for="item, index in itemGroup.items" :key="index" :title="item.description" @contextmenu="(e) => handleContextMenu(e, itemGroupIndex, item)">
<AppIcon
:class="itemGroup.sortStatus ? 'cursor-move' : 'cursor-pointer'"
:item-info="item"
<VueDraggable v-model="itemGroup.items" item-key="sort" :animation="300" class="icon-info-box"
filter=".not-drag" :disabled="!itemGroup.sortStatus">
<div v-for="item, index in itemGroup.items" :key="index" :title="item.description"
@contextmenu="(e) => handleContextMenu(e, itemGroupIndex, item)">
<AppIcon :class="itemGroup.sortStatus ? 'cursor-move' : 'cursor-pointer'" :item-info="item"
:icon-text-color="panelState.panelConfig.iconTextColor"
:icon-text-info-hide-description="panelState.panelConfig.iconTextInfoHideDescription || false"
:icon-text-icon-hide-title="panelState.panelConfig.iconTextIconHideTitle || false"
:style="0"
@click="handleItemClick(itemGroupIndex, item)"
/>
:icon-text-icon-hide-title="panelState.panelConfig.iconTextIconHideTitle || false" :style="0"
@click="handleItemClick(itemGroupIndex, item)" />
</div>
<div v-if="itemGroup.items.length === 0" class="not-drag">
<AppIcon
:class="itemGroup.sortStatus ? 'cursor-move' : 'cursor-pointer'"
<AppIcon :class="itemGroup.sortStatus ? 'cursor-move' : 'cursor-pointer'"
:item-info="{ icon: { itemType: 3, text: 'subway:add' }, title: t('common.add'), url: '', openMethod: 0 }"
:icon-text-color="panelState.panelConfig.iconTextColor"
:icon-text-info-hide-description="panelState.panelConfig.iconTextInfoHideDescription || false"
:icon-text-icon-hide-title="panelState.panelConfig.iconTextIconHideTitle || false"
:style="0"
@click="handleAddItem(itemGroup.id)"
/>
:icon-text-icon-hide-title="panelState.panelConfig.iconTextIconHideTitle || false" :style="0"
@click="handleAddItem(itemGroup.id)" />
</div>
</VueDraggable>
</div>
@ -448,35 +457,24 @@ function handleAddItem(itemIconGroupId?: number) {
<!-- APP图标宫型盒子 -->
<div v-if="panelState.panelConfig.iconStyle === PanelPanelConfigStyleEnum.icon">
<div v-if="itemGroup.items">
<VueDraggable
v-model="itemGroup.items" item-key="sort" :animation="300"
class="icon-small-box"
filter=".not-drag"
:disabled="!itemGroup.sortStatus"
>
<div v-for="item, index in itemGroup.items" :key="index" :title="item.description" @contextmenu="(e) => handleContextMenu(e, itemGroupIndex, item)">
<AppIcon
:class="itemGroup.sortStatus ? 'cursor-move' : 'cursor-pointer'"
:item-info="item"
<VueDraggable v-model="itemGroup.items" item-key="sort" :animation="300" class="icon-small-box"
filter=".not-drag" :disabled="!itemGroup.sortStatus">
<div v-for="item, index in itemGroup.items" :key="index" :title="item.description"
@contextmenu="(e) => handleContextMenu(e, itemGroupIndex, item)">
<AppIcon :class="itemGroup.sortStatus ? 'cursor-move' : 'cursor-pointer'" :item-info="item"
:icon-text-color="panelState.panelConfig.iconTextColor"
:icon-text-info-hide-description="!panelState.panelConfig.iconTextInfoHideDescription"
:icon-text-icon-hide-title="panelState.panelConfig.iconTextIconHideTitle || false"
:style="1"
@click="handleItemClick(itemGroupIndex, item)"
/>
:icon-text-icon-hide-title="panelState.panelConfig.iconTextIconHideTitle || false" :style="1"
@click="handleItemClick(itemGroupIndex, item)" />
</div>
<div v-if="itemGroup.items.length === 0" class="not-drag">
<AppIcon
class="cursor-pointer"
<AppIcon class="cursor-pointer"
:item-info="{ icon: { itemType: 3, text: 'subway:add' }, title: $t('common.add'), url: '', openMethod: 0 }"
:icon-text-color="panelState.panelConfig.iconTextColor"
:icon-text-info-hide-description="!panelState.panelConfig.iconTextInfoHideDescription"
:icon-text-icon-hide-title="panelState.panelConfig.iconTextIconHideTitle || false"
:style="1"
@click="handleAddItem(itemGroup.id)"
/>
:icon-text-icon-hide-title="panelState.panelConfig.iconTextIconHideTitle || false" :style="1"
@click="handleAddItem(itemGroup.id)" />
</div>
</vuedraggable>
</div>
@ -502,40 +500,41 @@ function handleAddItem(itemIconGroupId?: number) {
</div>
<!-- 右键菜单 -->
<NDropdown
placement="bottom-start" trigger="manual" :x="dropdownMenuX" :y="dropdownMenuY"
:options="getDropdownMenuOptions()" :show="dropdownShow" :on-clickoutside="onClickoutside" @select="handleRightMenuSelect"
/>
<NDropdown placement="bottom-start" trigger="manual" :x="dropdownMenuX" :y="dropdownMenuY"
:options="getDropdownMenuOptions()" :show="dropdownShow" :on-clickoutside="onClickoutside"
@select="handleRightMenuSelect" />
<!-- 悬浮按钮 -->
<div class="fixed-element shadow-[0_0_10px_2px_rgba(0,0,0,0.2)]">
<NButtonGroup vertical>
<!-- 网络模式切换按钮组 -->
<NButton
v-if="panelState.networkMode === PanelStateNetworkModeEnum.lan && panelState.panelConfig.netModeChangeButtonShow" color="#2a2a2a6b"
:title="t('panelHome.changeToWanModel')" @click="handleChangeNetwork(PanelStateNetworkModeEnum.wan)"
>
v-if="panelState.networkMode === PanelStateNetworkModeEnum.lan && panelState.panelConfig.netModeChangeButtonShow"
color="#2a2a2a6b" :title="t('panelHome.changeToWanModel')"
@click="handleChangeNetwork(PanelStateNetworkModeEnum.wan)">
<template #icon>
<SvgIcon class="text-white font-xl" icon="material-symbols:lan-outline-rounded" />
</template>
</NButton>
<NButton
v-if="panelState.networkMode === PanelStateNetworkModeEnum.wan && panelState.panelConfig.netModeChangeButtonShow" color="#2a2a2a6b"
:title="t('panelHome.changeToLanModel')" @click="handleChangeNetwork(PanelStateNetworkModeEnum.lan)"
>
v-if="panelState.networkMode === PanelStateNetworkModeEnum.wan && panelState.panelConfig.netModeChangeButtonShow"
color="#2a2a2a6b" :title="t('panelHome.changeToLanModel')"
@click="handleChangeNetwork(PanelStateNetworkModeEnum.lan)">
<template #icon>
<SvgIcon class="text-white font-xl" icon="mdi:wan" />
</template>
</NButton>
<NButton v-if="authStore.visitMode === VisitMode.VISIT_MODE_LOGIN" color="#2a2a2a6b" @click="settingModalShow = !settingModalShow">
<NButton v-if="authStore.visitMode === VisitMode.VISIT_MODE_LOGIN" color="#2a2a2a6b"
@click="settingModalShow = !settingModalShow">
<template #icon>
<SvgIcon class="text-white font-xl" icon="majesticons-applications" />
</template>
</NButton>
<NButton v-if="authStore.visitMode === VisitMode.VISIT_MODE_PUBLIC" color="#2a2a2a6b" :title="$t('panelHome.goToLogin')" @click="router.push('/login')">
<NButton v-if="authStore.visitMode === VisitMode.VISIT_MODE_PUBLIC" color="#2a2a2a6b"
:title="$t('panelHome.goToLogin')" @click="router.push('/login')">
<template #icon>
<SvgIcon class="text-white font-xl" icon="material-symbols:account-circle" />
</template>
@ -546,12 +545,8 @@ function handleAddItem(itemIconGroupId?: number) {
<!-- <Setting v-model:visible="settingModalShow" /> -->
</div>
<NBackTop
:listen-to="() => scrollContainerRef"
:right="10"
:bottom="10"
style="background-color:transparent;border: none;box-shadow: none;"
>
<NBackTop :listen-to="() => scrollContainerRef" :right="10" :bottom="10"
style="background-color:transparent;border: none;box-shadow: none;">
<div class="shadow-[0_0_10px_2px_rgba(0,0,0,0.2)]">
<NButton color="#2a2a2a6b">
<template #icon>
@ -561,14 +556,13 @@ function handleAddItem(itemIconGroupId?: number) {
</div>
</NBackTop>
<EditItem v-model:visible="editItemInfoShow" :item-info="editItemInfoData" :item-group-id="currentAddItenIconGroupId" @done="handleEditSuccess" />
<EditItem v-model:visible="editItemInfoShow" :item-info="editItemInfoData"
:item-group-id="currentAddItenIconGroupId" @done="handleEditSuccess" />
<!-- 弹窗 -->
<NModal
v-model:show="windowShow" :mask-closable="false" preset="card"
<NModal v-model:show="windowShow" :mask-closable="false" preset="card"
style="max-width: 1000px;height: 600px;border-radius: 1rem;" :bordered="true" size="small" role="dialog"
aria-modal="true"
>
aria-modal="true">
<template #header>
<div class="flex items-center">
<span class="mr-[20px]">
@ -584,10 +578,8 @@ function handleAddItem(itemIconGroupId?: number) {
<NSkeleton height="180px" width="100%" class="mt-[20px] rounded-lg" />
<NSkeleton height="180px" width="100%" class="mt-[20px] rounded-lg" />
</div>
<iframe
v-show="!windowIframeIsLoad" id="windowIframeId" ref="windowIframeRef" :src="windowSrc"
class="w-full h-full" frameborder="0" @load="handWindowIframeIdLoad"
/>
<iframe v-show="!windowIframeIsLoad" id="windowIframeId" ref="windowIframeRef" :src="windowSrc"
class="w-full h-full" frameborder="0" @load="handWindowIframeIdLoad" />
</div>
</NModal>
</div>