feat: proxy chain direction

src/components/connections/ConnectionCard.tsx

@@ -1,18 +1,19 @@
 import { disconnectByIdAPI } from '@/api'
 import { useConnections } from '@/composables/connections'
-import { CONNECTIONS_TABLE_ACCESSOR_KEY } from '@/config'
+import { CONNECTIONS_TABLE_ACCESSOR_KEY, PROXY_CHAIN_DIRECTION } from '@/config'
 import {
   fromNow,
   getDestinationFromConnection,
   getIPLabelFromMap,
   getProcessFromConnection,
   prettyBytesHelper,
 } from '@/helper'
-import { connectionCardLines } from '@/store/settings'
+import { connectionCardLines, proxyChainDirection } from '@/store/settings'
 import type { Connection } from '@/types'
 import {
   ArrowDownCircleIcon,
   ArrowDownIcon,
+  ArrowLeftCircleIcon,
   ArrowRightCircleIcon,
   ArrowUpCircleIcon,
   ArrowUpIcon,
@@ -32,6 +33,23 @@ export default defineComponent<{
   name: 'ConnectionCard',
   setup(props) {
     const { handlerInfo } = useConnections()
+    const getChains = (chains: string[]) => {
+      const render =
+        proxyChainDirection.value === PROXY_CHAIN_DIRECTION.NORMAL
+          ? [last(chains), first(chains)]
+          : [first(chains), last(chains)]
+      return (
+        <>
+          {render[0]}
+          {proxyChainDirection.value === PROXY_CHAIN_DIRECTION.NORMAL ? (
+            <ArrowRightCircleIcon class="h-4 w-4"></ArrowRightCircleIcon>
+          ) : (
+            <ArrowLeftCircleIcon class="h-4 w-4"></ArrowLeftCircleIcon>
+          )}
+          {render[1]}
+        </>
+      )
+    }
 
     return () => {
       const componentMap: Record<CONNECTIONS_TABLE_ACCESSOR_KEY, JSX.Element> = {
@@ -65,13 +83,7 @@ export default defineComponent<{
         ),
         [CONNECTIONS_TABLE_ACCESSOR_KEY.Chains]: (
           <span class="flex w-80 grow items-center gap-1 break-all">
-            {last(props.conn.chains)}
-            {last(props.conn.chains) !== first(props.conn.chains) && (
-              <>
-                <ArrowRightCircleIcon class="h-4 w-4" />
-                {first(props.conn.chains)}
-              </>
-            )}
+            {getChains(props.conn.chains)}
           </span>
         ),
         [CONNECTIONS_TABLE_ACCESSOR_KEY.Download]: (

src/components/connections/ConnectionTable.vue

@@ -120,7 +120,7 @@
 <script setup lang="ts">
 import { disconnectByIdAPI } from '@/api'
 import { useConnections } from '@/composables/connections'
-import { CONNECTIONS_TABLE_ACCESSOR_KEY, TABLE_SIZE } from '@/config'
+import { CONNECTIONS_TABLE_ACCESSOR_KEY, PROXY_CHAIN_DIRECTION, TABLE_SIZE } from '@/config'
 import {
   fromNow,
   getDestinationFromConnection,
@@ -129,10 +129,11 @@ import {
   prettyBytesHelper,
 } from '@/helper'
 import { renderConnections } from '@/store/connections'
-import { connectionTableColumns, tableSize } from '@/store/settings'
+import { connectionTableColumns, proxyChainDirection, tableSize } from '@/store/settings'
 import type { Connection } from '@/types'
 import {
   ArrowDownCircleIcon,
+  ArrowLeftCircleIcon,
   ArrowRightCircleIcon,
   ArrowUpCircleIcon,
   InformationCircleIcon,
@@ -239,13 +240,21 @@ const columns: ColumnDef<Connection>[] = [
     accessorFn: (original) => original.chains.join(','),
     cell: ({ row }) => {
       const chains: VNode[] = []
+      const modifyChain =
+        proxyChainDirection.value === PROXY_CHAIN_DIRECTION.NORMAL
+          ? chains.unshift.bind(chains)
+          : chains.push.bind(chains)
+      const icon =
+        proxyChainDirection.value === PROXY_CHAIN_DIRECTION.NORMAL
+          ? ArrowRightCircleIcon
+          : ArrowLeftCircleIcon
 
       row.original.chains.forEach((chain, index) => {
-        chains.unshift(h('span', chain))
+        modifyChain(h('span', chain))
 
         if (index < row.original.chains.length - 1) {
-          chains.unshift(
-            h(ArrowRightCircleIcon, {
+          modifyChain(
+            h(icon, {
               class: 'h-4 w-4',
             }),
           )

src/components/settings/ConnectionsSettings.vue

@@ -5,6 +5,21 @@
       {{ $t('connections') }}
     </div>
     <div class="card-body">
+      <div class="flex items-center gap-2">
+        {{ $t('proxyChainDirection') }}:
+        <select
+          class="select select-bordered select-sm w-24"
+          v-model="proxyChainDirection"
+        >
+          <option
+            v-for="opt in Object.values(PROXY_CHAIN_DIRECTION)"
+            :key="opt"
+            :value="opt"
+          >
+            {{ $t(opt) }}
+          </option>
+        </select>
+      </div>
       <div class="flex items-center gap-2">
         {{ $t('connectionStyle') }}:
         {{ $t('table') }}
@@ -26,6 +41,8 @@
 <script setup lang="ts">
 import ConnectionCardSettings from '@/components/settings/ConnectionCardSettings.vue'
 import SourceIPLabels from '@/components/settings/SourceIPLabels.vue'
+import { PROXY_CHAIN_DIRECTION } from '@/config'
+import { proxyChainDirection, useConnectionCard } from '@/store/settings'
 import TableSettings from '@/components/settings/TableSettings.vue'
-import { useConnectionCard } from '@/store/settings'
+
 </script>

src/config/index.ts

@@ -125,3 +125,8 @@ export enum PROXY_CARD_SIZE {
   SMALL = 'small',
   LARGE = 'large',
 }
+
+export enum PROXY_CHAIN_DIRECTION {
+  NORMAL = 'normal',
+  REVERSE = 'reverse',
+}

src/i18n/en.ts

@@ -123,6 +123,8 @@ const en = {
   iconSize: 'Icon Size',
   iconMarginRight: 'Icon Margin Right',
   allowLan: 'Allow Lan',
+  proxyChainDirection: 'Proxy Chain Direction',
+  reverse: 'Reverse',
 }
 
 export type LANG_MESSAGE = typeof en

src/i18n/ru.ts

@@ -126,6 +126,8 @@ const ru: LANG_MESSAGE = {
   iconSize: 'Размер иконки',
   iconMarginRight: 'Отступ правой иконки',
   allowLan: 'Разрешить локальную сеть',
+  proxyChainDirection: 'Направление цепочки прокси',
+  reverse: 'Обратное',
 }
 
 export default ru

src/i18n/zh.ts

@@ -124,6 +124,8 @@ const zh: LANG_MESSAGE = {
   iconSize: '图标尺寸',
   iconMarginRight: '图标间距',
   allowLan: '允许局域网',
+  proxyChainDirection: '代理链方向',
+  reverse: '反向',
 }
 
 export default zh

src/store/settings.ts

@@ -3,6 +3,7 @@ import {
   FONTS,
   LANG,
   PROXY_CARD_SIZE,
+  PROXY_CHAIN_DIRECTION,
   PROXY_PREVIEW_TYPE,
   PROXY_SORT_TYPE,
   TABLE_SIZE,
@@ -73,6 +74,10 @@ export const iconMarginRight = useStorage('config/icon-margin-right', 4)
 
 // connections
 export const useConnectionCard = useStorage('config/use-connecticon-card', window.innerWidth < 640)
+export const proxyChainDirection = useStorage(
+  'config/proxy-chain-direction',
+  PROXY_CHAIN_DIRECTION.NORMAL,
+)
 export const tableSize = useStorage<TABLE_SIZE>('config/connecticon-table-size', TABLE_SIZE.SMALL)
 export const connectionTableColumns = useStorage<CONNECTIONS_TABLE_ACCESSOR_KEY[]>(
   'config/connection-table-columns',