feat: two line proxy card

Zephyruso · Dec 24, 2024 · f942cd3 · f942cd3
1 parent d0a160d
commit f942cd3
Show file tree

Hide file tree

Showing 9 changed files with 30 additions and 50 deletions.
diff --git a/src/components/connections/ConnectionCard.tsx b/src/components/connections/ConnectionCard.tsx
@@ -64,12 +64,15 @@ export default defineComponent<{
       const info = (
         <div class="flex w-12 gap-1">
           <button
-            class="btn btn-circle btn-sm"
+            class="btn btn-circle btn-xs"
             onClick={() => handlerInfo(props.conn)}
           >
             <InformationCircleIcon class="h-4 w-4" />
           </button>
-          <button onClick={() => disconnectByIdAPI(props.conn.id)}>
+          <button
+            class="btn btn-circle btn-xs"
+            onClick={() => disconnectByIdAPI(props.conn.id)}
+          >
             <XMarkIcon class="h-4 w-4" />
           </button>
         </div>

diff --git a/src/components/proxies/LatencyTag.vue b/src/components/proxies/LatencyTag.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     :class="
-      twMerge('flex h-5 w-8 items-center justify-center rounded-xl bg-base-100 text-xs', color)
+      twMerge('flex h-4 w-8 items-center justify-center rounded-xl bg-base-100 text-xs', color)
     "
   >
     <BoltIcon

diff --git a/src/components/proxies/ProxyNodeCard.vue b/src/components/proxies/ProxyNodeCard.vue
@@ -3,7 +3,7 @@
     ref="cardRef"
     :class="
       twMerge(
-        'relative flex min-h-9 cursor-pointer flex-wrap items-center justify-end gap-1 rounded-md bg-base-200 p-2',
+        'flex cursor-pointer flex-col items-start rounded-md bg-base-200 px-2 py-1',
         active ? 'bg-primary text-primary-content' : 'sm:hover:bg-base-300',
         isTruncated && 'tooltip tooltip-bottom',
       )
@@ -17,37 +17,29 @@
       :fill="active ? 'fill-primary-content' : 'fill-base-content'"
     />
     <div
-      :class="
-        twMerge(
-          'flex-1 whitespace-nowrap text-sm',
-          truncateProxyName && 'truncate',
-          tightMode && 'pr-6',
-        )
-      "
+      :class="twMerge('w-full flex-1 text-sm', truncateProxyName && 'truncate')"
       ref="nameRef"
     >
       {{ node.name }}
     </div>
-    <span
-      :class="`text-xs tracking-tight ${tightMode ? 'absolute bottom-0 right-1 scale-[0.9]' : ''}`"
-    >
-      {{ typeDescription }}
-    </span>
-    <LatencyTag
-      :class="[
-        isLatencyTesting ? 'animate-pulse' : '',
-        tightMode ? 'absolute right-1 top-[2px]' : '',
-      ]"
-      :name="node.name"
-      @click.stop="handlerLatencyTest"
-    />
+    <div class="flex h-4 w-full items-center justify-between">
+      <span
+        :class="`whitespace-nowrap text-xs tracking-tight ${active ? 'text-primary-content/80' : 'text-slate-500'}`"
+      >
+        {{ typeDescription }}
+      </span>
+      <LatencyTag
+        :class="[isLatencyTesting ? 'animate-pulse' : '']"
+        :name="node.name"
+        @click.stop="handlerLatencyTest"
+      />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { isSmallScreen } from '@/helper'
 import { getIPv6ByName, proxyLatencyTest, proxyMap } from '@/store/proxies'
-import { IPv6test, truncateProxyName, twoColumnNodeForMobile } from '@/store/settings'
+import { IPv6test, truncateProxyName } from '@/store/settings'
 import { twMerge } from 'tailwind-merge'
 import { computed, ref } from 'vue'
 import LatencyTag from './LatencyTag.vue'
@@ -80,13 +72,11 @@ const typeFormatter = (type: string) => {
 }
 const typeDescription = computed(() => {
   const type = typeFormatter(node.value.type)
-  const isV6 = IPv6test.value && getIPv6ByName(node.value.name) ? 'v6' : ''
+  const isV6 = IPv6test.value && getIPv6ByName(node.value.name) ? 'IPv6' : ''
   const isUDP = node.value.udp ? 'udp' : ''
-  const attr = [isUDP, isV6].filter(Boolean).join('.')
 
-  return [type, attr].filter(Boolean).join(' | ')
+  return [type, isUDP, isV6].filter(Boolean).join(' / ')
 })
-const tightMode = computed(() => isSmallScreen.value && twoColumnNodeForMobile.value)
 const handlerLatencyTest = async () => {
   if (isLatencyTesting.value) return
 

diff --git a/src/components/proxies/ProxyNodeGrid.vue b/src/components/proxies/ProxyNodeGrid.vue
@@ -2,16 +2,15 @@
   <div
     :class="
       twMerge(
-        'grid gap-2',
+        'grid grid-cols-2 gap-2',
         truncateProxyName && 'max-h-96 overflow-y-auto',
-        twoColumnNodeForMobile ? 'grid-cols-2' : 'grid-cols-1',
         isSiderbarCollapsed
           ? hasTwoColumns
-            ? 'sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-2 2xl:grid-cols-3'
-            : 'sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7'
+            ? 'sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-3 2xl:grid-cols-4 3xl:grid-cols-5'
+            : 'sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-8 3xl:grid-cols-10'
           : hasTwoColumns
-            ? 'sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-2 3xl:grid-cols-3'
-            : 'sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 3xl:grid-cols-6',
+            ? 'sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-2 2xl:grid-cols-3 3xl:grid-cols-4'
+            : 'sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-6 3xl:grid-cols-8',
       )
     "
   >
@@ -21,7 +20,7 @@
 
 <script lang="ts" setup>
 import { useProxies } from '@/composables/proxies'
-import { isSiderbarCollapsed, truncateProxyName, twoColumnNodeForMobile } from '@/store/settings'
+import { isSiderbarCollapsed, truncateProxyName } from '@/store/settings'
 import { twMerge } from 'tailwind-merge'
 
 const { hasTwoColumns } = useProxies()

diff --git a/src/i18n/en.ts b/src/i18n/en.ts
@@ -69,7 +69,6 @@ export default {
   latencyasc: 'Latency Asc',
   language: 'Language',
   automaticDisconnection: 'Automatic Disconnection',
-  twoColumnNodeForMobile: 'Two Column Proxy Node',
   backend: 'Backend',
   tunMode: 'Tun Mode',
   upgradeCore: 'Upgrade Core',

diff --git a/src/i18n/zh.ts b/src/i18n/zh.ts
@@ -69,7 +69,6 @@ export default {
   latencyasc: '按延迟升序',
   language: '语言',
   automaticDisconnection: '自动断开连接',
-  twoColumnNodeForMobile: '双列显示节点',
   backend: '后端',
   upgradeCore: '更新核心',
   tunMode: 'Tun 模式',

diff --git a/src/store/settings.ts b/src/store/settings.ts
@@ -33,7 +33,6 @@ export const proxySortType = useStorage<PROXY_SORT_TYPE>(
   PROXY_SORT_TYPE.DEFAULT,
 )
 export const automaticDisconnection = useStorage('config/automatic-disconnection', true)
-export const twoColumnNodeForMobile = useStorage('config/two-column-for-mobile', true)
 export const truncateProxyName = useStorage('config/truncate-proxy-name', true)
 export const proxyPreviewType = useStorage('config/proxy-preview-type', PROXY_PREVIEW_TYPE.AUTO)
 export const hideUnavailableProxies = useStorage('config/hide-unavailable-proxies', false)

diff --git a/src/views/SettingsPage.vue b/src/views/SettingsPage.vue
@@ -214,14 +214,6 @@
             v-model="twoColumnProxyGroup"
           />
         </div>
-        <div class="flex items-center gap-2 sm:hidden">
-          {{ $t('twoColumnNodeForMobile') }}:
-          <input
-            class="toggle"
-            type="checkbox"
-            v-model="twoColumnNodeForMobile"
-          />
-        </div>
         <div class="flex w-full items-center gap-2">
           <span class="shrink-0"> {{ $t('speedtestUrl') }}: </span>
           <input
@@ -369,7 +361,6 @@ import {
   speedtestUrl,
   theme,
   truncateProxyName,
-  twoColumnNodeForMobile,
   twoColumnProxyGroup,
   useConnectionCard,
 } from '@/store/settings'

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -10,7 +10,7 @@ export default {
       lg: '1024px',
       xl: '1280px',
       '2xl': '1536px',
-      '3xl': '1800px',
+      '3xl': '1792px',
     },
     extend: {
       colors: {