Feature: show udp tag on proxy

src/containers/Proxies/components/Provider/index.tsx

@@ -41,7 +41,7 @@ export function Provider (props: ProvidersProps) {
     return (
         <Card className="proxy-provider">
             <Loading visible={visible} />
-            <div className="md:(flex-row items-center) flex flex-col justify-between ">
+            <div className="md:(flex-row items-center) flex flex-col justify-between">
                 <div className="flex items-center">
                     <span className="mr-6">{ provider.name }</span>
                     <Tag>{ provider.vehicleType }</Tag>

src/containers/Proxies/components/Proxy/index.tsx

@@ -68,12 +68,21 @@ export function Proxy (props: ProxyProps) {
         [delay],
     )
 
-    const backgroundColor = hasError ? undefined : color
+    const backgroundColor = hasError ? '#E5E7EB' : color
     return (
-        <div className={classnames('proxy-item', { 'proxy-error': hasError }, className)}>
-            <span className="proxy-type" style={{ backgroundColor }}>{config.type}</span>
-            <p className="proxy-name">{config.name}</p>
-            <p className="proxy-delay">{delay === 0 ? '-' : `${delay}ms`}</p>
+        <div className={classnames('proxy-item', { 'opacity-50': hasError }, className)}>
+            <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>
+            </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>
     )
 }

src/containers/Proxies/components/Proxy/style.scss

@@ -1,4 +1,6 @@
 .proxy-item {
+    display: flex;
+    flex-flow: column nowrap;
     position: relative;
     width: 100%;
     height: 110px;
@@ -6,20 +8,14 @@
     border-radius: 4px;
     background: $color-white;
     user-select: none;
+    overflow: hidden;
     cursor: default;
     box-shadow: 2px 5px 20px -3px rgba($color-primary-dark, 0.2);
     transition: all 300ms ease;
 
-    .proxy-type {
-        padding: 2px 5px;
-        font-size: 10px;
-        color: $color-white;
-        border-radius: 2px;
-    }
-
     .proxy-name {
         display: -webkit-box;
-        margin-top: 10px;
+        margin: 6px 0;
         color: $color-primary-darken;
         font-size: 10px;
         overflow: hidden;
@@ -29,39 +25,12 @@
     }
 
     .proxy-delay {
-        position: absolute;
-        left: 10px;
-        bottom: 13px;
         font-size: 10px;
         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 {
         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 {
         $height: 70px;
 
+        flex-flow: row nowrap;
         height: $height;
-
-        .proxy-delay {
-            left: unset;
-            bottom: unset;
-            top: 0;
-            right: 20px;
-            height: $height;
-            line-height: $height;
-        }
     }
 }

src/lib/request.ts

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