feat: preview by auto

src/components/ProxyNodePreview.tsx

@@ -1,16 +1,35 @@
-import { Show } from 'solid-js'
+import { Show, createMemo } from 'solid-js'
 import { PROXIES_PREVIEW_TYPE } from '~/config/enum'
 import { proxiesPreviewType } from '~/pages/Config'
 import ProxyPreviewBar from './ProxyPreviewBar'
 import ProxyPreviewDots from './ProxyPreviewDots'
 
 export default (props: { proxyNameList: string[]; now?: string }) => {
+  const isSmallGroup = createMemo(() => props.proxyNameList.length <= 30)
+  const isShowBar = createMemo(() => {
+    const type = proxiesPreviewType()
+
+    return (
+      type === PROXIES_PREVIEW_TYPE.BAR ||
+      (type === PROXIES_PREVIEW_TYPE.Auto && !isSmallGroup())
+    )
+  })
+
+  const isShowDots = createMemo(() => {
+    const type = proxiesPreviewType()
+
+    return (
+      type === PROXIES_PREVIEW_TYPE.BAR ||
+      (type === PROXIES_PREVIEW_TYPE.Auto && isSmallGroup())
+    )
+  })
+
   return (
     <>
-      <Show when={proxiesPreviewType() === PROXIES_PREVIEW_TYPE.BAR}>
+      <Show when={isShowBar()}>
         <ProxyPreviewBar proxyNameList={props.proxyNameList} now={props.now} />
       </Show>
-      <Show when={proxiesPreviewType() === PROXIES_PREVIEW_TYPE.DOTS}>
+      <Show when={isShowDots()}>
         <ProxyPreviewDots proxyNameList={props.proxyNameList} now={props.now} />
       </Show>
     </>

src/components/ProxyPreviewBar.tsx

@@ -1,5 +1,4 @@
 import { createMemo } from 'solid-js'
-import { twMerge } from 'tailwind-merge'
 import Delay from '~/components/Delay'
 import { DELAY } from '~/config/enum'
 import { useProxies } from '~/signals/proxies'
@@ -32,28 +31,28 @@ export default (props: { proxyNameList: string[]; now?: string }) => {
   )
 
   return (
-    <div class="flex w-full items-center">
+    <div class="flex h-6 w-full items-center">
       <div class="flex flex-1 overflow-hidden rounded-2xl">
         <div
-          class={twMerge('h-2 bg-success')}
+          class="h-2 bg-success"
           style={{
             width: `${(good() * 100) / all()}%`, // cant use tw class cause dynamic classname wont import
           }}
         ></div>
         <div
-          class={twMerge('h-2 bg-warning')}
+          class="h-2 bg-warning"
           style={{
             width: `${(middle() * 100) / all()}%`,
           }}
         ></div>
         <div
-          class={twMerge('h-2 bg-error')}
+          class="h-2 bg-error"
           style={{
             width: `${(slow() * 100) / all()}%`,
           }}
         ></div>
         <div
-          class={twMerge('h-2 bg-neutral')}
+          class="h-2 bg-neutral"
           style={{
             width: `${(notConnected() * 100) / all()}%`,
           }}

src/config/enum.ts

@@ -23,6 +23,7 @@ export enum DELAY {
 export enum PROXIES_PREVIEW_TYPE {
   DOTS = 'dots',
   BAR = 'bar',
+  Auto = 'auto',
 }
 
 export enum LANG {

src/i18n/en.ts

@@ -34,4 +34,8 @@ export default {
   close: 'Close',
   reset: 'Reset',
   dnsQuery: 'DNS Query',
+  dots: 'Dots',
+  bar: 'Bar',
+  auto: 'Auto',
+  proxiesPreviewType: 'Proxies preview type',
 }

src/i18n/zh.ts

@@ -34,4 +34,8 @@ export default {
   close: '关闭',
   reset: '重置',
   dnsQuery: 'DNS 查询',
+  dots: '点阵',
+  bar: '条形',
+  auto: '自适应',
+  proxiesPreviewType: '节点组预览样式',
 }

src/pages/Config.tsx

@@ -134,6 +134,8 @@ export const [proxiesPreviewType, setProxiesPreviewType] = makePersisted(
 )
 
 export default () => {
+  const [t] = useI18n()
+
   return (
     <div class="flex flex-col gap-4">
       <DNSQueryForm />
@@ -141,31 +143,23 @@ export default () => {
       <ConfigForm />
 
       <div>
-        <div>Proxies preview type:</div>
-
-        <div class="join">
-          <label class="flex items-center">
-            Bar
-            <input
-              class="radio m-4"
-              aria-label="Bar"
-              type="radio"
-              name="proxiesPreviewType"
-              checked={PROXIES_PREVIEW_TYPE.BAR === proxiesPreviewType()}
-              onChange={() => setProxiesPreviewType(PROXIES_PREVIEW_TYPE.BAR)}
-            />
-          </label>
-          <label class="flex items-center">
-            Dots
-            <input
-              class="radio m-4"
-              aria-label="Dots"
-              type="radio"
-              name="proxiesPreviewType"
-              checked={PROXIES_PREVIEW_TYPE.DOTS === proxiesPreviewType()}
-              onChange={() => setProxiesPreviewType(PROXIES_PREVIEW_TYPE.DOTS)}
-            />
-          </label>
+        <div>{t('proxiesPreviewType')}</div>
+        <div class="flex">
+          <For each={Object.values(PROXIES_PREVIEW_TYPE)}>
+            {(value) => (
+              <label class="flex items-center">
+                {t(value)}
+                <input
+                  class="radio m-4"
+                  aria-label={value}
+                  type="radio"
+                  name="proxiesPreviewType"
+                  checked={value === proxiesPreviewType()}
+                  onChange={() => setProxiesPreviewType(value)}
+                />
+              </label>
+            )}
+          </For>
         </div>
       </div>
     </div>