feat: make network info cards sortable

src/main/utils/template.ts

@@ -27,6 +27,7 @@ export const defaultConfig: IAppConfig = {
   autoCloseConnection: true,
   subscriptionTimeout: 30000,
   networkLatencyTargets: [],
+  networkInfoCardOrder: ['ip', 'topology', 'latency'],
   useNameserverPolicy: false,
   controlDns: true,
   controlSniff: true,

src/renderer/src/pages/network.tsx

@@ -2,6 +2,16 @@ import BasePage from '@renderer/components/base/base-page'
 import NetworkTopologyCard from '@renderer/components/network/network-topology'
 import React, { useState, useEffect, useCallback, useMemo } from 'react'
 import { Button, Select, SelectItem, Chip, Tooltip, Input } from '@heroui/react'
+import {
+  DndContext,
+  closestCorners,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  DragEndEvent
+} from '@dnd-kit/core'
+import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
 import {
   IoRefresh,
   IoCopyOutline,
@@ -119,6 +129,56 @@ const DEFAULT_LATENCY_TARGETS: LatencyTarget[] = [
   { name: 'GitHub', url: 'https://github.com/' }
 ]
 
+const DEFAULT_NETWORK_INFO_CARD_ORDER: NetworkInfoCardKey[] = ['ip', 'topology', 'latency']
+
+function mergeNetworkInfoCardOrder(saved: string[] = []): NetworkInfoCardKey[] {
+  const valid = saved.filter((key): key is NetworkInfoCardKey =>
+    DEFAULT_NETWORK_INFO_CARD_ORDER.includes(key as NetworkInfoCardKey)
+  )
+  const missing = DEFAULT_NETWORK_INFO_CARD_ORDER.filter((key) => !valid.includes(key))
+  return [...valid, ...missing]
+}
+
+interface SortableNetworkInfoCardProps {
+  id: NetworkInfoCardKey
+  order: number
+  children: React.ReactNode
+}
+
+const SortableNetworkInfoCard: React.FC<SortableNetworkInfoCardProps> = ({
+  id,
+  order,
+  children
+}) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform: tf,
+    transition,
+    isDragging
+  } = useSortable({ id })
+  const transform = tf ? { x: tf.x, y: tf.y, scaleX: 1, scaleY: 1 } : null
+
+  return (
+    <div
+      ref={setNodeRef}
+      {...attributes}
+      {...listeners}
+      style={{
+        position: 'relative',
+        transform: CSS.Transform.toString(transform),
+        transition,
+        order,
+        zIndex: isDragging ? 'calc(infinity)' : undefined
+      }}
+      className={`w-full ${isDragging ? 'scale-[0.98] tap-highlight-transparent' : ''}`}
+    >
+      {children}
+    </div>
+  )
+}
+
 function normalizeLatencyUrl(value: string): string | null {
   const trimmed = value.trim()
   if (!trimmed) return null
@@ -229,6 +289,34 @@ const IPPage: React.FC = () => {
   const [latencyResults, setLatencyResults] = useState<Record<string, LatencyResult>>({})
   const [testingLatency, setTestingLatency] = useState(false)
   const appConfigLoaded = appConfig !== undefined
+  const [cardOrder, setCardOrder] = useState<NetworkInfoCardKey[]>(() =>
+    mergeNetworkInfoCardOrder(appConfig?.networkInfoCardOrder)
+  )
+  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 8 } }))
+
+  useEffect(() => {
+    setCardOrder(mergeNetworkInfoCardOrder(appConfig?.networkInfoCardOrder))
+  }, [appConfig?.networkInfoCardOrder])
+
+  const handleCardDragEnd = useCallback(
+    async (event: DragEndEvent): Promise<void> => {
+      const { active, over } = event
+      if (!over || active.id === over.id) return
+
+      const activeId = active.id as NetworkInfoCardKey
+      const overId = over.id as NetworkInfoCardKey
+      const activeIndex = cardOrder.indexOf(activeId)
+      const overIndex = cardOrder.indexOf(overId)
+      if (activeIndex === -1 || overIndex === -1) return
+
+      const nextOrder = cardOrder.slice()
+      nextOrder.splice(activeIndex, 1)
+      nextOrder.splice(overIndex, 0, activeId)
+      setCardOrder(nextOrder)
+      await patchAppConfig({ networkInfoCardOrder: nextOrder })
+    },
+    [cardOrder, patchAppConfig]
+  )
 
   const customLatencyTargets = useMemo(
     () => normalizeLatencyTargets(appConfig?.networkLatencyTargets),
@@ -405,313 +493,341 @@ const IPPage: React.FC = () => {
   return (
     <BasePage title={t('network.title')}>
       <div className="m-2 flex flex-col gap-4">
-        {/* 当前 IP 卡片 */}
+        <div style={{ overflowX: 'clip' }} className="flex flex-col gap-4">
-        <div className="rounded-xl border border-foreground/10 bg-content1 p-4 shadow-sm">
+          <DndContext
-          {/* 卡片 Header */}
+            sensors={sensors}
-          <div className="mb-3.5 flex items-center justify-between gap-3">
+            collisionDetection={closestCorners}
-            <div className="flex items-center gap-2">
+            onDragEnd={handleCardDragEnd}
-              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/15 text-primary">
+          >
-                <IoMdGlobe size={18} />
+            <SortableContext items={cardOrder} strategy={verticalListSortingStrategy}>
-              </div>
+              {/* 当前 IP 卡片 */}
-              <h3 className="text-[15px] font-semibold">{t('network.ipCard.title')}</h3>
+              <SortableNetworkInfoCard id="ip" order={cardOrder.indexOf('ip')}>
-            </div>
+                <div className="rounded-xl border border-foreground/10 bg-content1 p-4 shadow-sm">
-            <div className="flex items-center gap-1.5">
+                  {/* 卡片 Header */}
-              <Select
+                  <div className="mb-3.5 flex items-center justify-between gap-3">
-                size="sm"
+                    <div className="flex items-center gap-2">
-                className="w-28"
+                      <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/15 text-primary">
-                selectedKeys={[provider]}
+                        <IoMdGlobe size={18} />
-                onSelectionChange={(keys) => {
+                      </div>
-                  const val = Array.from(keys)[0] as IPProvider
+                      <h3 className="text-[15px] font-semibold">{t('network.ipCard.title')}</h3>
-                  if (val) fetchIP(val)
+                    </div>
-                }}
+                    <div className="flex items-center gap-1.5">
-              >
+                      <Select
-                {providers.map((p) => (
-                  <SelectItem key={p.value}>{p.label}</SelectItem>
-                ))}
-              </Select>
-              <Button
-                size="sm"
-                isIconOnly
-                variant="light"
-                isLoading={loading}
-                onPress={() => fetchIP()}
-                className="h-7 w-7 min-w-0"
-              >
-                <IoRefresh size={16} />
-              </Button>
-            </div>
-          </div>
-
-          {/* 加载中 */}
-          {loading && !ipInfo && (
-            <div className="flex justify-center py-6">
-              <span className="h-6 w-6 animate-spin rounded-full border-2 border-foreground/10 border-t-primary" />
-            </div>
-          )}
-
-          {/* 错误 */}
-          {error && (
-            <div className="rounded-lg border border-danger/20 bg-danger/10 p-3 text-[13px] text-danger">
-              {error}
-            </div>
-          )}
-
-          {/* IP 信息 */}
-          {ipInfo && (
-            <div className="flex flex-col gap-2.5">
-              {/* IP 地址高亮行（负 margin 贴边） */}
-              <div className="-mx-1 -mt-1 mb-1 flex items-center justify-between gap-3 rounded-lg border border-primary/20 bg-primary/8 px-2.5 py-2">
-                <span className="shrink-0 text-[13px] text-foreground/60">
-                  {t('network.ipAddress')}
-                </span>
-                <div className="flex items-center gap-1.5">
-                  <span className="overflow-hidden text-right font-mono text-[13px] font-semibold text-primary text-ellipsis whitespace-nowrap">
-                    {hidden ? '••••••••••••••' : ipInfo.ip}
-                  </span>
-                  <button
-                    onClick={() => setHidden((h) => !h)}
-                    className="shrink-0 text-primary/60 hover:text-primary transition-colors"
-                  >
-                    {hidden ? <IoEyeOffOutline size={14} /> : <IoEyeOutline size={14} />}
-                  </button>
-                  <Tooltip content={copied ? t('network.copied') : t('network.copy')}>
-                    <button
-                      onClick={handleCopy}
-                      className="shrink-0 text-primary/60 hover:text-primary transition-colors"
-                    >
-                      {copied ? <IoCheckmark size={14} /> : <IoCopyOutline size={14} />}
-                    </button>
-                  </Tooltip>
-                </div>
-              </div>
-
-              {ipInfo.country && (
-                <InfoRow
-                  label={t('network.country')}
-                  value={
-                    <span className="flex items-center justify-end gap-1.5">
-                      <CountryFlag code={ipInfo.countryCode} />
-                      <span>{ipInfo.country}</span>
-                    </span>
-                  }
-                />
-              )}
-              {ipInfo.region && <InfoRow label={t('network.region')} value={ipInfo.region} />}
-              {ipInfo.city && <InfoRow label={t('network.city')} value={ipInfo.city} />}
-              {ipInfo.timezone && <InfoRow label={t('network.timezone')} value={ipInfo.timezone} />}
-              {ipInfo.latitude != null && ipInfo.longitude != null && (
-                <InfoRow
-                  label={t('network.coordinates')}
-                  value={`${ipInfo.latitude.toFixed(4)}, ${ipInfo.longitude.toFixed(4)}`}
-                  mono
-                />
-              )}
-              {ipInfo.asn != null && <InfoRow label="ASN" value={`AS${ipInfo.asn}`} mono />}
-              {ipInfo.org && <InfoRow label={t('network.organization')} value={ipInfo.org} />}
-              {ipInfo.isp && <InfoRow label="ISP" value={ipInfo.isp} />}
-
-              {(ipInfo.isProxy !== undefined || ipInfo.isVPN !== undefined) && (
-                <div className="flex items-center justify-between gap-3">
-                  <span className="shrink-0 text-[13px] text-foreground/60">
-                    {t('network.proxyDetection')}
-                  </span>
-                  <div className="flex gap-1">
-                    {ipInfo.isProxy && (
-                      <Chip
                         size="sm"
-                        color="warning"
+                        className="w-28"
-                        variant="flat"
+                        selectedKeys={[provider]}
-                        classNames={{ content: 'text-[11px] font-semibold uppercase' }}
+                        onSelectionChange={(keys) => {
+                          const val = Array.from(keys)[0] as IPProvider
+                          if (val) fetchIP(val)
+                        }}
                       >
-                        Proxy
+                        {providers.map((p) => (
-                      </Chip>
+                          <SelectItem key={p.value}>{p.label}</SelectItem>
-                    )}
+                        ))}
-                    {ipInfo.isVPN && (
+                      </Select>
-                      <Chip
-                        size="sm"
-                        color="warning"
-                        variant="flat"
-                        classNames={{ content: 'text-[11px] font-semibold uppercase' }}
-                      >
-                        VPN
-                      </Chip>
-                    )}
-                    {!ipInfo.isProxy && !ipInfo.isVPN && (
-                      <Chip
-                        size="sm"
-                        color="success"
-                        variant="flat"
-                        classNames={{ content: 'text-[11px] font-semibold uppercase' }}
-                      >
-                        {t('network.clean')}
-                      </Chip>
-                    )}
-                  </div>
-                </div>
-              )}
-            </div>
-          )}
-
-          {!loading && !error && !ipInfo && (
-            <div className="py-6 text-center text-sm text-foreground/50">{t('network.noData')}</div>
-          )}
-        </div>
-
-        {/* 网络拓扑卡片 */}
-        <NetworkTopologyCard />
-
-        {/* 网络延迟卡片 */}
-        <div className="rounded-xl border border-foreground/10 bg-content1 p-4 shadow-sm">
-          <div className="mb-3.5 flex items-center justify-between gap-3">
-            <div className="flex items-center gap-2">
-              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/15 text-primary">
-                <IoMdPulse size={18} />
-              </div>
-              <h3 className="text-[15px] font-semibold">{t('network.latency.title')}</h3>
-            </div>
-            <div className="flex items-center gap-2">
-              {averageLatency !== null && (
-                <span
-                  className={`rounded-md px-2 py-1 text-xs font-semibold ${
-                    averageLatency < 100
-                      ? 'bg-success/15 text-success'
-                      : averageLatency < 300
-                        ? 'bg-warning/15 text-warning'
-                        : 'bg-danger/15 text-danger'
-                  }`}
-                >
-                  {t('network.latency.average')}: {averageLatency}ms
-                </span>
-              )}
-              <Tooltip content={t('network.latency.add')}>
-                <Button
-                  size="sm"
-                  isIconOnly
-                  variant={isAddingLatencyTarget ? 'flat' : 'light'}
-                  className="h-7 w-7 min-w-0"
-                  aria-label={t('network.latency.add')}
-                  onPress={openLatencyTargetForm}
-                >
-                  <IoAdd size={16} />
-                </Button>
-              </Tooltip>
-              <Button
-                size="sm"
-                isIconOnly
-                variant="light"
-                isLoading={testingLatency}
-                isDisabled={testingLatency}
-                onPress={testAllLatencies}
-                className="h-7 w-7 min-w-0"
-              >
-                <IoRefresh size={16} />
-              </Button>
-            </div>
-          </div>
-
-          {isAddingLatencyTarget && (
-            <div className="mb-3 flex flex-wrap items-start gap-2">
-              <Input
-                size="sm"
-                className="min-w-32 flex-1"
-                value={customLatencyName}
-                placeholder={t('network.latency.namePlaceholder')}
-                aria-label={t('network.latency.namePlaceholder')}
-                isInvalid={customLatencyNameError}
-                errorMessage={customLatencyNameError ? t('network.latency.invalidName') : undefined}
-                onValueChange={updateCustomLatencyName}
-                onKeyDown={submitLatencyTargetOnEnter}
-              />
-              <Input
-                size="sm"
-                className="min-w-48 flex-[1.5]"
-                value={customLatencyUrl}
-                placeholder={t('network.latency.urlPlaceholder')}
-                aria-label={t('network.latency.urlPlaceholder')}
-                isInvalid={customLatencyUrlError}
-                errorMessage={customLatencyUrlError ? t('network.latency.invalidUrl') : undefined}
-                onValueChange={updateCustomLatencyUrl}
-                onKeyDown={submitLatencyTargetOnEnter}
-              />
-              <Tooltip content={t('common.save')}>
-                <Button
-                  size="sm"
-                  isIconOnly
-                  variant="flat"
-                  color="primary"
-                  className="h-8 w-8 min-w-0"
-                  aria-label={t('common.save')}
-                  onPress={addCustomLatencyTarget}
-                >
-                  <IoCheckmark size={16} />
-                </Button>
-              </Tooltip>
-              <Tooltip content={t('common.cancel')}>
-                <Button
-                  size="sm"
-                  isIconOnly
-                  variant="light"
-                  className="h-8 w-8 min-w-0"
-                  aria-label={t('common.cancel')}
-                  onPress={closeLatencyTargetForm}
-                >
-                  <IoClose size={16} />
-                </Button>
-              </Tooltip>
-            </div>
-          )}
-
-          <div className="flex flex-col gap-3">
-            {latencyTargets.map((target) => {
-              const res = latencyResults[target.url]
-              return (
-                <div key={target.url} className="flex items-center gap-3">
-                  <span className="w-20 shrink-0 overflow-hidden text-[13px] text-ellipsis whitespace-nowrap">
-                    {target.name}
-                  </span>
-                  <div className="h-2 flex-1 overflow-hidden rounded-full bg-foreground/10">
-                    <div
-                      className={`h-full rounded-full transition-[width] duration-500 ease-out ${latencyBarColor(res?.latency ?? null)}`}
-                      style={{
-                        width:
-                          res?.status === 'success' && res.latency !== null
-                            ? `${Math.min((res.latency / 500) * 100, 100)}%`
-                            : '0%'
-                      }}
-                    />
-                  </div>
-                  <span className="w-16 shrink-0 text-right font-mono text-[13px]">
-                    {!res || res.status === 'idle' ? (
-                      <span className="text-foreground/40">-</span>
-                    ) : res.status === 'pending' ? (
-                      <span className="inline-block h-3 w-3 animate-spin rounded-full border-2 border-foreground/10 border-t-primary" />
-                    ) : res.status === 'success' ? (
-                      <span className={latencyColor(res.latency)}>{res.latency}ms</span>
-                    ) : (
-                      <span className="text-danger">{t('network.latency.timeout')}</span>
-                    )}
-                  </span>
-                  {target.custom ? (
-                    <Tooltip content={t('common.delete')}>
                       <Button
                         size="sm"
                         isIconOnly
                         variant="light"
-                        color="danger"
+                        isLoading={loading}
-                        className="h-6 w-6 min-w-0 shrink-0"
+                        onPress={() => fetchIP()}
-                        aria-label={t('common.delete')}
+                        className="h-7 w-7 min-w-0"
-                        onPress={() => removeCustomLatencyTarget(target.url)}
                       >
-                        <IoClose size={14} />
+                        <IoRefresh size={16} />
                       </Button>
-                    </Tooltip>
+                    </div>
-                  ) : (
+                  </div>
-                    <span className="h-6 w-6 shrink-0" />
+
+                  {/* 加载中 */}
+                  {loading && !ipInfo && (
+                    <div className="flex justify-center py-6">
+                      <span className="h-6 w-6 animate-spin rounded-full border-2 border-foreground/10 border-t-primary" />
+                    </div>
+                  )}
+
+                  {/* 错误 */}
+                  {error && (
+                    <div className="rounded-lg border border-danger/20 bg-danger/10 p-3 text-[13px] text-danger">
+                      {error}
+                    </div>
+                  )}
+
+                  {/* IP 信息 */}
+                  {ipInfo && (
+                    <div className="flex flex-col gap-2.5">
+                      {/* IP 地址高亮行（负 margin 贴边） */}
+                      <div className="-mx-1 -mt-1 mb-1 flex items-center justify-between gap-3 rounded-lg border border-primary/20 bg-primary/8 px-2.5 py-2">
+                        <span className="shrink-0 text-[13px] text-foreground/60">
+                          {t('network.ipAddress')}
+                        </span>
+                        <div className="flex items-center gap-1.5">
+                          <span className="overflow-hidden text-right font-mono text-[13px] font-semibold text-primary text-ellipsis whitespace-nowrap">
+                            {hidden ? '••••••••••••••' : ipInfo.ip}
+                          </span>
+                          <button
+                            onClick={() => setHidden((h) => !h)}
+                            className="shrink-0 text-primary/60 hover:text-primary transition-colors"
+                          >
+                            {hidden ? <IoEyeOffOutline size={14} /> : <IoEyeOutline size={14} />}
+                          </button>
+                          <Tooltip content={copied ? t('network.copied') : t('network.copy')}>
+                            <button
+                              onClick={handleCopy}
+                              className="shrink-0 text-primary/60 hover:text-primary transition-colors"
+                            >
+                              {copied ? <IoCheckmark size={14} /> : <IoCopyOutline size={14} />}
+                            </button>
+                          </Tooltip>
+                        </div>
+                      </div>
+
+                      {ipInfo.country && (
+                        <InfoRow
+                          label={t('network.country')}
+                          value={
+                            <span className="flex items-center justify-end gap-1.5">
+                              <CountryFlag code={ipInfo.countryCode} />
+                              <span>{ipInfo.country}</span>
+                            </span>
+                          }
+                        />
+                      )}
+                      {ipInfo.region && (
+                        <InfoRow label={t('network.region')} value={ipInfo.region} />
+                      )}
+                      {ipInfo.city && <InfoRow label={t('network.city')} value={ipInfo.city} />}
+                      {ipInfo.timezone && (
+                        <InfoRow label={t('network.timezone')} value={ipInfo.timezone} />
+                      )}
+                      {ipInfo.latitude != null && ipInfo.longitude != null && (
+                        <InfoRow
+                          label={t('network.coordinates')}
+                          value={`${ipInfo.latitude.toFixed(4)}, ${ipInfo.longitude.toFixed(4)}`}
+                          mono
+                        />
+                      )}
+                      {ipInfo.asn != null && <InfoRow label="ASN" value={`AS${ipInfo.asn}`} mono />}
+                      {ipInfo.org && (
+                        <InfoRow label={t('network.organization')} value={ipInfo.org} />
+                      )}
+                      {ipInfo.isp && <InfoRow label="ISP" value={ipInfo.isp} />}
+
+                      {(ipInfo.isProxy !== undefined || ipInfo.isVPN !== undefined) && (
+                        <div className="flex items-center justify-between gap-3">
+                          <span className="shrink-0 text-[13px] text-foreground/60">
+                            {t('network.proxyDetection')}
+                          </span>
+                          <div className="flex gap-1">
+                            {ipInfo.isProxy && (
+                              <Chip
+                                size="sm"
+                                color="warning"
+                                variant="flat"
+                                classNames={{ content: 'text-[11px] font-semibold uppercase' }}
+                              >
+                                Proxy
+                              </Chip>
+                            )}
+                            {ipInfo.isVPN && (
+                              <Chip
+                                size="sm"
+                                color="warning"
+                                variant="flat"
+                                classNames={{ content: 'text-[11px] font-semibold uppercase' }}
+                              >
+                                VPN
+                              </Chip>
+                            )}
+                            {!ipInfo.isProxy && !ipInfo.isVPN && (
+                              <Chip
+                                size="sm"
+                                color="success"
+                                variant="flat"
+                                classNames={{ content: 'text-[11px] font-semibold uppercase' }}
+                              >
+                                {t('network.clean')}
+                              </Chip>
+                            )}
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  )}
+
+                  {!loading && !error && !ipInfo && (
+                    <div className="py-6 text-center text-sm text-foreground/50">
+                      {t('network.noData')}
+                    </div>
                   )}
                 </div>
-              )
+              </SortableNetworkInfoCard>
-            })}
+
-          </div>
+              {/* 网络拓扑卡片 */}
+              <SortableNetworkInfoCard id="topology" order={cardOrder.indexOf('topology')}>
+                <NetworkTopologyCard />
+              </SortableNetworkInfoCard>
+
+              {/* 网络延迟卡片 */}
+              <SortableNetworkInfoCard id="latency" order={cardOrder.indexOf('latency')}>
+                <div className="rounded-xl border border-foreground/10 bg-content1 p-4 shadow-sm">
+                  <div className="mb-3.5 flex items-center justify-between gap-3">
+                    <div className="flex items-center gap-2">
+                      <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/15 text-primary">
+                        <IoMdPulse size={18} />
+                      </div>
+                      <h3 className="text-[15px] font-semibold">{t('network.latency.title')}</h3>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      {averageLatency !== null && (
+                        <span
+                          className={`rounded-md px-2 py-1 text-xs font-semibold ${
+                            averageLatency < 100
+                              ? 'bg-success/15 text-success'
+                              : averageLatency < 300
+                                ? 'bg-warning/15 text-warning'
+                                : 'bg-danger/15 text-danger'
+                          }`}
+                        >
+                          {t('network.latency.average')}: {averageLatency}ms
+                        </span>
+                      )}
+                      <Tooltip content={t('network.latency.add')}>
+                        <Button
+                          size="sm"
+                          isIconOnly
+                          variant={isAddingLatencyTarget ? 'flat' : 'light'}
+                          className="h-7 w-7 min-w-0"
+                          aria-label={t('network.latency.add')}
+                          onPress={openLatencyTargetForm}
+                        >
+                          <IoAdd size={16} />
+                        </Button>
+                      </Tooltip>
+                      <Button
+                        size="sm"
+                        isIconOnly
+                        variant="light"
+                        isLoading={testingLatency}
+                        isDisabled={testingLatency}
+                        onPress={testAllLatencies}
+                        className="h-7 w-7 min-w-0"
+                      >
+                        <IoRefresh size={16} />
+                      </Button>
+                    </div>
+                  </div>
+
+                  {isAddingLatencyTarget && (
+                    <div className="mb-3 flex flex-wrap items-start gap-2">
+                      <Input
+                        size="sm"
+                        className="min-w-32 flex-1"
+                        value={customLatencyName}
+                        placeholder={t('network.latency.namePlaceholder')}
+                        aria-label={t('network.latency.namePlaceholder')}
+                        isInvalid={customLatencyNameError}
+                        errorMessage={
+                          customLatencyNameError ? t('network.latency.invalidName') : undefined
+                        }
+                        onValueChange={updateCustomLatencyName}
+                        onKeyDown={submitLatencyTargetOnEnter}
+                      />
+                      <Input
+                        size="sm"
+                        className="min-w-48 flex-[1.5]"
+                        value={customLatencyUrl}
+                        placeholder={t('network.latency.urlPlaceholder')}
+                        aria-label={t('network.latency.urlPlaceholder')}
+                        isInvalid={customLatencyUrlError}
+                        errorMessage={
+                          customLatencyUrlError ? t('network.latency.invalidUrl') : undefined
+                        }
+                        onValueChange={updateCustomLatencyUrl}
+                        onKeyDown={submitLatencyTargetOnEnter}
+                      />
+                      <Tooltip content={t('common.save')}>
+                        <Button
+                          size="sm"
+                          isIconOnly
+                          variant="flat"
+                          color="primary"
+                          className="h-8 w-8 min-w-0"
+                          aria-label={t('common.save')}
+                          onPress={addCustomLatencyTarget}
+                        >
+                          <IoCheckmark size={16} />
+                        </Button>
+                      </Tooltip>
+                      <Tooltip content={t('common.cancel')}>
+                        <Button
+                          size="sm"
+                          isIconOnly
+                          variant="light"
+                          className="h-8 w-8 min-w-0"
+                          aria-label={t('common.cancel')}
+                          onPress={closeLatencyTargetForm}
+                        >
+                          <IoClose size={16} />
+                        </Button>
+                      </Tooltip>
+                    </div>
+                  )}
+
+                  <div className="flex flex-col gap-3">
+                    {latencyTargets.map((target) => {
+                      const res = latencyResults[target.url]
+                      return (
+                        <div key={target.url} className="flex items-center gap-3">
+                          <span className="w-20 shrink-0 overflow-hidden text-[13px] text-ellipsis whitespace-nowrap">
+                            {target.name}
+                          </span>
+                          <div className="h-2 flex-1 overflow-hidden rounded-full bg-foreground/10">
+                            <div
+                              className={`h-full rounded-full transition-[width] duration-500 ease-out ${latencyBarColor(res?.latency ?? null)}`}
+                              style={{
+                                width:
+                                  res?.status === 'success' && res.latency !== null
+                                    ? `${Math.min((res.latency / 500) * 100, 100)}%`
+                                    : '0%'
+                              }}
+                            />
+                          </div>
+                          <span className="w-16 shrink-0 text-right font-mono text-[13px]">
+                            {!res || res.status === 'idle' ? (
+                              <span className="text-foreground/40">-</span>
+                            ) : res.status === 'pending' ? (
+                              <span className="inline-block h-3 w-3 animate-spin rounded-full border-2 border-foreground/10 border-t-primary" />
+                            ) : res.status === 'success' ? (
+                              <span className={latencyColor(res.latency)}>{res.latency}ms</span>
+                            ) : (
+                              <span className="text-danger">{t('network.latency.timeout')}</span>
+                            )}
+                          </span>
+                          {target.custom ? (
+                            <Tooltip content={t('common.delete')}>
+                              <Button
+                                size="sm"
+                                isIconOnly
+                                variant="light"
+                                color="danger"
+                                className="h-6 w-6 min-w-0 shrink-0"
+                                aria-label={t('common.delete')}
+                                onPress={() => removeCustomLatencyTarget(target.url)}
+                              >
+                                <IoClose size={14} />
+                              </Button>
+                            </Tooltip>
+                          ) : (
+                            <span className="h-6 w-6 shrink-0" />
+                          )}
+                        </div>
+                      )
+                    })}
+                  </div>
+                </div>
+              </SortableNetworkInfoCard>
+            </SortableContext>
+          </DndContext>
         </div>
       </div>
     </BasePage>

src/shared/types.d.ts

@@ -18,6 +18,7 @@ type SiderCardKey =
   | 'substore'
   | 'network'
   | 'usage'
+type NetworkInfoCardKey = 'ip' | 'topology' | 'latency'
 type AppTheme = 'system' | 'light' | 'dark'
 type MihomoGroupType = 'Selector' | 'URLTest' | 'Fallback' | 'LoadBalance' | 'Relay'
 type Priority =
@@ -344,6 +345,7 @@ interface IAppConfig {
   delayTestTimeout?: number
   networkLatencyTargets?: INetworkLatencyTarget[]
   networkIPProvider?: 'ip.sb' | 'ipwho.is' | 'ipapi.is'
+  networkInfoCardOrder?: NetworkInfoCardKey[]
   subscriptionTimeout?: number
   encryptedPassword?: number[]
   controlDns?: boolean