fix: xs element -> sm element

src/App.vue

@@ -53,7 +53,7 @@ const fontClassName = computed(() => fontClassMap[font.value])
           {{ $t(tipContent) }}
         </a>
         <button
-          class="btn btn-circle btn-ghost btn-xs"
+          class="btn btn-circle btn-ghost btn-sm"
           @click="tipShowModel = false"
         >
           <XCircleIcon class="w-4 cursor-pointer" />

src/api/index.ts

@@ -152,7 +152,7 @@ export const queryDNSAPI = (params: { name: string; type: string }) => {
 
 const createWebSocket = <T>(url: string, searchParams?: Record<string, string>) => {
   const backend = activeBackend.value!
-  const resurl = new URL(`${getUrlFromBackend(backend)}/${url}`)
+  const resurl = new URL(`${getUrlFromBackend(backend).replace('http', 'ws')}/${url}`)
 
   resurl.searchParams.append('token', backend?.password || '')
 

src/components/connections/ConnectionCard.tsx

@@ -64,7 +64,7 @@ export default defineComponent<{
       const info = (
         <div class="flex w-12 gap-1">
           <button
-            class="btn btn-circle btn-xs"
+            class="btn btn-circle btn-sm"
             onClick={() => handlerInfo(props.conn)}
           >
             <InformationCircleIcon class="h-4 w-4" />

src/components/proxies/LatencyTag.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     :class="
-      twMerge('flex h-4 w-8 items-center justify-center rounded-lg bg-base-100 text-xs', color)
+      twMerge('flex h-5 w-8 items-center justify-center rounded-xl bg-base-100 text-xs', color)
     "
   >
     <BoltIcon

src/components/proxies/ProxyGroup.vue

@@ -21,7 +21,7 @@
           @click.stop="handlerLatencyTest"
         />
       </div>
-      <div class="flex items-center gap-2 text-xs text-slate-500">
+      <div class="flex items-center gap-2 text-sm text-slate-500">
         <div class="flex-1">{{ proxyGroup.type }} ({{ proxyGroup.all?.length }})</div>
         <div class="shrink-0">{{ prettyBytesHelper(downloadTotal) }}/s</div>
       </div>

src/components/proxies/ProxyNodeCard.vue

@@ -19,7 +19,7 @@
     <div
       :class="
         twMerge(
-          'flex-1 whitespace-nowrap text-xs md:text-sm',
+          'flex-1 whitespace-nowrap text-sm',
           truncateProxyName && 'truncate',
           tightMode && 'pr-6',
         )
@@ -29,12 +29,15 @@
       {{ node.name }}
     </div>
     <span
-      :class="`text-xs tracking-tight ${tightMode ? 'absolute bottom-0 right-0 scale-75' : ''}`"
+      :class="`text-xs tracking-tight ${tightMode ? 'absolute bottom-0 right-1 scale-[0.9]' : ''}`"
     >
       {{ typeDescription }}
     </span>
     <LatencyTag
-      :class="[isLatencyTesting ? 'animate-pulse' : '', tightMode ? 'absolute right-2 top-1' : '']"
+      :class="[
+        isLatencyTesting ? 'animate-pulse' : '',
+        tightMode ? 'absolute right-1 top-[2px]' : '',
+      ]"
       :name="node.name"
       @click.stop="handlerLatencyTest"
     />

src/components/proxies/ProxyProvider.vue

@@ -9,13 +9,13 @@
         <div class="flex-1" />
         <div class="flex gap-2">
           <button
-            :class="twMerge('btn btn-circle btn-xs z-30', isHealthChecking ? 'animate-pulse' : '')"
+            :class="twMerge('btn btn-circle btn-sm z-30', isHealthChecking ? 'animate-pulse' : '')"
             @click.stop="healthCheckClickHandler"
           >
             <BoltIcon class="h-4 w-4" />
           </button>
           <button
-            :class="twMerge('btn btn-circle btn-xs z-30', isUpdating ? 'animate-spin' : '')"
+            :class="twMerge('btn btn-circle btn-sm z-30', isUpdating ? 'animate-spin' : '')"
             @click.stop="updateProviderClickHandler"
           >
             <ArrowPathIcon class="h-4 w-4" />

src/components/rules/RuleProvider.vue

@@ -10,7 +10,7 @@
       </div>
     </div>
     <button
-      :class="twMerge('btn btn-circle btn-xs', isUpdating ? 'animate-spin' : '')"
+      :class="twMerge('btn btn-circle btn-sm', isUpdating ? 'animate-spin' : '')"
       @click="updateRuleProviderClickHandler"
     >
       <ArrowPathIcon class="h-4 w-4" />

src/components/settings/BackendSwitch.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="join flex">
     <select
-      class="join-item select select-bordered select-xs w-48"
+      class="join-item select select-bordered select-sm w-48"
       v-model="activeUuid"
     >
       <option
@@ -13,7 +13,7 @@
       </option>
     </select>
     <button
-      class="btn join-item btn-xs"
+      class="btn join-item btn-sm"
       @click="addBackend"
     >
       <PlusIcon class="h-4 w-4" />

src/components/settings/SourceIPLabels.vue

@@ -9,11 +9,11 @@
       {{ ip }} ->
       <input
         type="text"
-        class="input input-xs input-bordered w-24"
+        class="input input-sm input-bordered w-24"
         v-model="sourceIPLabelMap[ip]"
       />
       <button
-        class="btn btn-circle btn-xs"
+        class="btn btn-circle btn-sm"
         @click="() => handlerLabelRemove(ip)"
       >
         <MinusCircleIcon class="h-4 w-4" />
@@ -23,16 +23,16 @@
       IP:
       <input
         type="text"
-        class="input input-xs input-bordered w-44"
+        class="input input-sm input-bordered w-44"
         v-model="newLabelForIP.ip"
       />
       <input
         type="text"
-        class="input input-xs input-bordered w-20"
+        class="input input-sm input-bordered w-20"
         v-model="newLabelForIP.label"
       />
       <button
-        class="btn btn-circle btn-xs"
+        class="btn btn-circle btn-sm"
         @click="handlerLabelAdd"
       >
         <PlusIcon class="h-4 w-4" />

src/components/sidebar/CommonCtrl.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="flex flex-col gap-2 p-2 text-xs">
+  <div class="flex flex-col gap-2 p-2 text-sm">
     <StatisticsInfo />
     <BackendVersion />
 
     <div class="flex">
       <button
-        class="btn btn-circle btn-xs"
+        class="btn btn-circle btn-sm"
         @click="isSiderbarCollapsed = true"
       >
         <ArrowLeftCircleIcon class="h-5 w-5" />

src/components/sidebar/VerticalInfos.vue

@@ -20,7 +20,7 @@
     </div>
     <div class="flex flex-col items-center justify-center">
       <button
-        class="btn btn-circle btn-xs"
+        class="btn btn-circle btn-sm"
         @click="isSiderbarCollapsed = false"
       >
         <ArrowRightCircleIcon class="h-5 w-5" />

src/components/statistics/BasicCharts.vue

@@ -13,7 +13,7 @@
       ref="themeColorRef"
     ></span>
     <button
-      class="btn btn-ghost btn-xs absolute bottom-0 right-1"
+      class="btn btn-ghost btn-sm absolute bottom-0 right-1"
       @click="isPaused = !isPaused"
     >
       <component

src/views/SettingsPage.vue

@@ -64,9 +64,7 @@
         <div class="grid max-w-screen-md grid-cols-2 gap-2 sm:grid-cols-4">
           <template v-if="!isSingBox">
             <button
-              :class="
-                twMerge('btn btn-primary btn-xs sm:btn-sm', isUIUpgrading ? 'animate-pulse' : '')
-              "
+              :class="twMerge('btn btn-primary btn-sm', isUIUpgrading ? 'animate-pulse' : '')"
               @click="handlerClickUpgradeUI"
             >
               {{ $t('upgradeUI') }}
@@ -75,13 +73,13 @@
           </template>
 
           <button
-            class="btn btn-xs sm:btn-sm"
+            class="btn btn-sm"
             @click="exportSettings"
           >
             {{ $t('exportSettings') }}
           </button>
           <button
-            class="btn btn-xs sm:btn-sm"
+            class="btn btn-sm"
             @click="importSettings"
           >
             {{ $t('importSettings') }}
@@ -139,31 +137,28 @@
               </span>
               <button
                 :class="
-                  twMerge(
-                    'btn btn-primary btn-xs flex-1 sm:btn-sm',
-                    isCoreUpgrading ? 'animate-pulse' : '',
-                  )
+                  twMerge('btn btn-primary btn-sm flex-1', isCoreUpgrading ? 'animate-pulse' : '')
                 "
                 @click="handlerClickUpgradeCore"
               >
                 {{ $t('upgradeCore') }}
               </button>
             </div>
             <button
-              :class="twMerge('btn btn-xs sm:btn-sm', isCoreRestarting ? 'animate-pulse' : '')"
+              :class="twMerge('btn btn-sm', isCoreRestarting ? 'animate-pulse' : '')"
               @click="handlerClickRestartCore"
             >
               {{ $t('restartCore') }}
             </button>
           </template>
           <button
-            :class="twMerge('btn btn-xs sm:btn-sm', isConfigReloading ? 'animate-pulse' : '')"
+            :class="twMerge('btn btn-sm', isConfigReloading ? 'animate-pulse' : '')"
             @click="handlerClickReloadConfigs"
           >
             {{ $t('reloadConfigs') }}
           </button>
           <button
-            class="btn btn-xs sm:btn-sm"
+            class="btn btn-sm"
             @click="flushFakeIPAPI"
           >
             {{ $t('flushFakeIP') }}

src/views/SetupPage.vue

@@ -89,13 +89,13 @@
           class="flex items-center gap-2"
         >
           <button
-            class="btn btn-xs flex-1"
+            class="btn btn-sm flex-1"
             @click="selectBackend(backend.uuid)"
           >
             {{ getUrlFromBackend(backend) }}
           </button>
           <button
-            class="btn btn-circle btn-xs"
+            class="btn btn-circle btn-sm"
             @click="() => removeBackend(backend.uuid)"
           >
             <MinusCircleIcon class="h-4 w-4" />