wood/clash-and-dashboard
1
0
Fork 0
mirror of https://github.com/woodchen-ink/clash-and-dashboard.git synced 2025-07-18 14:01:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

Feature: show udp tag on proxy

Browse Source
This commit is contained in:
Dreamacro 2022-08-07 19:34:51 +08:00
parent 33d3bf15f1
commit 27441f8a1d
4 changed files with 21 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/containers/Proxies/components/Proxy/index.tsx
View File

@ -68,12 +68,21 @@ export function Proxy (props: ProxyProps) {
[delay], [delay],
) )
const backgroundColor = hasError ? undefined : color const backgroundColor = hasError ? '#E5E7EB' : color
return ( return (
<div className={classnames('proxy-item', { 'proxy-error': hasError }, className)}> <div className={classnames('proxy-item', { 'opacity-50': hasError }, className)}>
<span className="proxy-type" style={{ backgroundColor }}>{config.type}</span> <div className="flex-1">
<span
className={classnames('rounded-sm py-[3px] px-1 text-[10px] text-white', { 'text-gray-600': hasError })}
style={{ backgroundColor }}>
{config.type}
</span>
<p className="proxy-name">{config.name}</p> <p className="proxy-name">{config.name}</p>
<p className="proxy-delay">{delay === 0 ? '-' : `${delay}ms`}</p> </div>
<div className="flex h-full flex-col items-center justify-center space-y-3 text-[10px] md:h-[18px] md:flex-row md:justify-between md:space-y-0">
<p>{delay === 0 ? '-' : `${delay}ms`}</p>
{ config.udp && <p className="rounded bg-gray-200 p-[3px] text-gray-600">UDP</p> }
</div>
</div> </div>
) )
} }

49
src/containers/Proxies/components/Proxy/style.scss
View File

@ -1,4 +1,6 @@
.proxy-item { .proxy-item {
display: flex;
flex-flow: column nowrap;
position: relative; position: relative;
width: 100%; width: 100%;
height: 110px; height: 110px;
@ -6,20 +8,14 @@
border-radius: 4px; border-radius: 4px;
background: $color-white; background: $color-white;
user-select: none; user-select: none;
overflow: hidden;
cursor: default; cursor: default;
box-shadow: 2px 5px 20px -3px rgba($color-primary-dark, 0.2); box-shadow: 2px 5px 20px -3px rgba($color-primary-dark, 0.2);
transition: all 300ms ease; transition: all 300ms ease;
.proxy-type {
padding: 2px 5px;
font-size: 10px;
color: $color-white;
border-radius: 2px;
}
.proxy-name { .proxy-name {
display: -webkit-box; display: -webkit-box;
margin-top: 10px; margin: 6px 0;
color: $color-primary-darken; color: $color-primary-darken;
font-size: 10px; font-size: 10px;
overflow: hidden; overflow: hidden;
@ -29,39 +25,12 @@
} }
.proxy-delay { .proxy-delay {
position: absolute;
left: 10px;
bottom: 13px;
font-size: 10px; font-size: 10px;
color: rgba($color: $color-primary-darken, $alpha: 0.8); color: rgba($color: $color-primary-darken, $alpha: 0.8);
} }
.proxy-editor {
position: absolute;
right: 10px;
bottom: 10px;
cursor: pointer;
color: rgba($color: $color-primary-darken, $alpha: 0.8);
opacity: 0;
pointer-events: none;
transition: all 300ms ease;
}
&:hover { &:hover {
box-shadow: 0 14px 20px -4px rgba($color-primary-darken, 0.4); box-shadow: 0 14px 20px -4px rgba($color-primary-darken, 0.4);
.proxy-editor {
opacity: 1;
pointer-events: visible;
}
}
}
.proxy-error {
opacity: 0.5;
.proxy-type {
background-color: $color-gray-darken;
} }
} }
@ -69,15 +38,7 @@
.proxy-item { .proxy-item {
$height: 70px; $height: 70px;
flex-flow: row nowrap;
height: $height; height: $height;
.proxy-delay {
left: unset;
bottom: unset;
top: 0;
right: 20px;
height: $height;
line-height: $height;
}
} }
} }

1
src/lib/request.ts
View File

@ -58,6 +58,7 @@ export interface Proxy {
name: string name: string
type: 'Direct' | 'Reject' | 'Shadowsocks' | 'Vmess' | 'Trojan' | 'Socks' | 'Http' | 'Snell' type: 'Direct' | 'Reject' | 'Shadowsocks' | 'Vmess' | 'Trojan' | 'Socks' | 'Http' | 'Snell'
history: History[] history: History[]
udp: boolean
} }
export interface Group { export interface Group {