add more details to proxy-item

src/renderer/src/components/proxies/proxy-item.tsx

@@ -53,20 +53,70 @@ const ProxyItem: React.FC<Props> = (props) => {
       isPressable
       fullWidth
       shadow="sm"
-      className={`${fixed ? 'bg-secondary/30' : selected ? 'bg-primary/30' : 'bg-content2'}`}
+      className={`${
+        fixed 
+          ? 'bg-secondary/30 border-r-2 border-r-secondary border-l-2 border-l-secondary' 
+          : selected 
+            ? 'bg-primary/30 border-r-2 border-r-primary border-l-2 border-l-primary' 
+            : 'bg-content2'
+      }`}
       radius="sm"
     >
-      <CardBody className="p-2">
+    <CardBody className="p-1">
-        <div className="flex justify-between items-center">
+      {proxyDisplayMode === 'full' ? (
+          <div className="flex flex-col gap-1">
+            <div className="flex justify-between items-center pl-1">
+              <div className="text-ellipsis overflow-hidden whitespace-nowrap" title={proxy.name}>
+                {proxy.name}
+              </div>
+              {fixed && (
+                <Button
+                  isIconOnly
+                  title="取消固定"
+                  color="danger"
+                  onPress={async () => {
+                    await mihomoUnfixedProxy(group.name)
+                    mutateProxies()
+                  }}
+                  variant="light"
+                  className="h-[20px] p-0 text-sm"
+                >
+                  <FaMapPin className="text-md le" />
+                </Button>
+              )}
+            </div>
+            <div className="flex justify-between items-center pl-1">
+              <div className="flex gap-1 items-center">
+                <div className="text-foreground-400 text-xs bg-default-100 px-1 rounded-md">
+                  {proxy.type}
+                </div>
+                {['tfo', 'udp', 'xudp', 'mptcp', 'smux'].map(protocol => 
+                  proxy[protocol as keyof IMihomoProxy] && (
+                    <div key={protocol} className="text-foreground-400 text-xs bg-default-100 px-1 rounded-md">
+                      {protocol}
+                    </div>
+                  )
+                )}
+              </div>
+              <Button
+                isIconOnly
+                title={proxy.type}
+                isLoading={loading}
+                color={delayColor(delay)}
+                onPress={onDelay}
+                variant="light"
+                className="h-full text-sm ml-auto -mt-0.5"
+              >
+                {delayText(delay)}
+              </Button>
+            </div>
+          </div>
+        ) : (
+        <div className="flex justify-between items-center pl-1 p-1">
           <div className="text-ellipsis overflow-hidden whitespace-nowrap">
             <div className="flag-emoji inline" title={proxy.name}>
               {proxy.name}
             </div>
-            {proxyDisplayMode === 'full' && (
-              <div className="inline ml-2 text-foreground-500" title={proxy.type}>
-                {proxy.type}
-              </div>
-            )}
           </div>
           <div className="flex justify-end">
             {fixed && (
@@ -97,6 +147,7 @@ const ProxyItem: React.FC<Props> = (props) => {
             </Button>
           </div>
         </div>
+      )}
       </CardBody>
     </Card>
   )

src/shared/types.d.ts

@@ -142,6 +142,8 @@ interface IMihomoProxy {
   type: MihomoProxyType
   udp: boolean
   xudp: boolean
+  mptcp: boolean
+  smux: boolean
 }
 
 interface IMihomoGroup {