refactor(ui): use clsx

Author: spacemeowx2

ui/instructions/code.md

@@ -1,3 +1,4 @@
 - 不要直接用 fetch 获取资源，而是使用 ui/src/api/v1.ts 来获取数据。
 - 使用 2 spaces 缩进。使用单引号。
 - 在完成任务前验证是否有 Linter 或者 TypeScript 错误
+- 对于动态的 className，优先使用 clsx 来生成。只有遇到可能覆盖的情况下才使用 `import { cn } from '@/lib/utils'`。cn 底层用的是 twMerge，性能上会比 clsx 差一些。

ui/src/pages/main/select.tsx

@@ -11,6 +11,7 @@ import { useState } from 'react';
 import { isSelectNet, SelectNet } from '@/api/rdp';
 import { useInstance } from '@/contexts/instance';
 import { cn } from '@/lib/utils';
+import { clsx } from 'clsx';
 import pLimit from 'p-limit';
 import { useLocalStorage } from '@/hooks/use-local-storage';
 
@@ -69,10 +70,14 @@ const SelectNetItem: React.FC<SelectNetItemProps> = ({
               }
             }}
           >
-            <Timer className={`h-4 w-4 ${net.list?.some(item => testingStates[item]) ? 'animate-spin' : ''}`} />
+            <Timer className={clsx("h-4 w-4", {
+              "animate-spin": net.list?.some(item => testingStates[item])
+            })} />
           </Button>
           <ChevronDown
-            className={`h-4 w-4 transition-transform duration-200 ${isOpen ? 'transform rotate-180' : ''}`}
+            className={clsx("h-4 w-4 transition-transform duration-200", {
+              "transform rotate-180": isOpen
+            })}
           />
         </div>
       </CollapsibleTrigger>
@@ -90,7 +95,7 @@ const SelectNetItem: React.FC<SelectNetItemProps> = ({
             >
               {item}
               {item in latencyResults && (
-                <span className={cn('ml-2 text-xs', colorClass)}>
+                <span className={cn("ml-2 text-xs", colorClass)}>
                   {latencyText}
                 </span>
               )}