feat: host label map & log style

src/components/connections/ConnectionTable.vue

@@ -114,7 +114,7 @@ import { disconnectByIdAPI } from '@/api'
 import { CONNECTIONS_TABLE_ACCESSOR_KEY } from '@/config'
 import { fromNow, prettyBytesHelper } from '@/helper'
 import { renderConnections } from '@/store/connections'
-import { connectionTableColumns } from '@/store/settings'
+import { connectionTableColumns, sourceIPLabelMap } from '@/store/settings'
 import type { Connection } from '@/types'
 import {
   ArrowDownCircleIcon,
@@ -262,7 +262,7 @@ const columns: ColumnDef<Connection>[] = [
     header: () => t('sourceIP'),
     id: CONNECTIONS_TABLE_ACCESSOR_KEY.SourceIP,
     accessorFn: (original) => {
-      return original.metadata.sourceIP
+      return sourceIPLabelMap.value[original.metadata.sourceIP] || original.metadata.sourceIP
     },
   },
   {

src/components/settings/SourceIPLabels.vue

@@ -0,0 +1,68 @@
+<template>
+  <div>{{ $t('sourceIPLabels') }}:</div>
+  <div class="flex flex-col gap-2 bg-base-200 p-2">
+    <div
+      v-for="ip in sourceIPs"
+      :key="ip"
+      class="flex items-center gap-2"
+    >
+      {{ ip }}:
+      <input
+        type="text"
+        class="input input-xs input-bordered w-24"
+        v-model="sourceIPLabelMap[ip]"
+      />
+      <button
+        class="btn btn-circle btn-xs bg-base-300"
+        @click="() => handlerLabelRemove(ip)"
+      >
+        <MinusCircleIcon class="h-4 w-4" />
+      </button>
+    </div>
+    <div class="flex w-full items-center gap-2">
+      IP:
+      <input
+        type="text"
+        class="input input-xs input-bordered"
+        v-model="newLabelForIP.ip"
+      />
+      <input
+        type="text"
+        class="input input-xs input-bordered w-20"
+        v-model="newLabelForIP.label"
+      />
+      <button
+        class="btn btn-circle btn-xs bg-base-300"
+        @click="handlerLabelAdd"
+      >
+        <PlusIcon class="h-4 w-4" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { sourceIPLabelMap } from '@/store/settings'
+import { MinusCircleIcon, PlusIcon } from '@heroicons/vue/24/outline'
+import { computed, reactive } from 'vue'
+
+const sourceIPs = computed(() => {
+  return Object.keys(sourceIPLabelMap.value)
+})
+
+const newLabelForIP = reactive({
+  ip: '',
+  label: '',
+})
+
+const handlerLabelAdd = () => {
+  sourceIPLabelMap.value[newLabelForIP.ip] = newLabelForIP.label
+  newLabelForIP.ip = ''
+  newLabelForIP.label = ''
+}
+
+const handlerLabelRemove = (ip: string) => {
+  Reflect.deleteProperty(sourceIPLabelMap.value, ip)
+  sourceIPLabelMap.value = { ...sourceIPLabelMap.value }
+}
+</script>

src/components/sidebar/ConnectionCtrl.vue

@@ -55,10 +55,10 @@
         label="all"
       ></option>
       <option
-        v-for="opt in sourceIPs"
-        :key="opt"
-        :value="opt"
-        :label="opt"
+        v-for="opt in sourceIPOpts"
+        :key="opt.value"
+        :value="opt.value"
+        :label="opt.label"
       />
     </select>
     <div class="join flex-1">
@@ -72,10 +72,10 @@
           label="all"
         ></option>
         <option
-          v-for="opt in sourceIPs"
-          :key="opt"
-          :value="opt"
-          :label="opt"
+          v-for="opt in sourceIPOpts"
+          :key="opt.value"
+          :value="opt.value"
+          :label="opt.label"
         />
       </select>
       <input
@@ -116,9 +116,10 @@ import {
   sourceIPFilter,
   sourceIPs,
 } from '@/store/connections'
-import { useConnectionCard } from '@/store/settings'
+import { sourceIPLabelMap, useConnectionCard } from '@/store/settings'
 import { PauseIcon, PlayIcon, XMarkIcon } from '@heroicons/vue/24/outline'
 import { twMerge } from 'tailwind-merge'
+import { computed } from 'vue'
 defineProps<{
   horizontal?: boolean
 }>()
@@ -127,4 +128,13 @@ const handlerClickCloseAll = () => {
     disconnectByIdAPI(conn.id)
   })
 }
+
+const sourceIPOpts = computed(() => {
+  return sourceIPs.value.map((ip) => {
+    return {
+      label: sourceIPLabelMap.value[ip] || ip,
+      value: ip,
+    }
+  })
+})
 </script>

src/i18n/en.ts

@@ -76,6 +76,7 @@ export default {
   tunMode: 'Tun Mode',
   upgradeCore: 'Upgrade Core',
   truncateProxyName: 'Truncate Proxy Name',
+  sourceIPLabels: 'Source IP Labels',
   [LANG.EN_US]: 'English',
   [LANG.ZH_CN]: '中文',
 }

src/i18n/zh.ts

@@ -76,6 +76,7 @@ export default {
   upgradeCore: '更新核心',
   tunMode: 'Tun 模式',
   truncateProxyName: '截断代理名称',
+  sourceIPLabels: '源IP标签',
   [LANG.EN_US]: 'English',
   [LANG.ZH_CN]: '中文',
 }

src/store/settings.ts

@@ -55,7 +55,7 @@ export const connectionTableColumns = useStorage<CONNECTIONS_TABLE_ACCESSOR_KEY[
   ],
 )
 export const compactConnectionCard = useStorage<boolean>('config/compact-connection-card', true)
-export const hostLabelMap = useStorage<Record<string, string>>('config/host-label-map', {})
+export const sourceIPLabelMap = useStorage<Record<string, string>>('config/source-ip-label-map', {})
 
 // rules
 export const rulesTabShow = ref(RULE_TAB_TYPE.RULES)

src/views/LogsPage.vue

@@ -8,7 +8,7 @@
     <div
       v-for="log in renderLogs"
       :key="log.seq"
-      class="card w-full flex-row gap-1 gap-2 rounded-xl bg-base-100 p-2 text-sm shadow-lg"
+      class="card w-full flex-row flex-wrap gap-2 break-all rounded-xl bg-base-100 p-2 text-sm shadow-lg"
     >
       <span>{{ log.seq }}</span>
       <span class="text-primary">{{ dayjs(log.time).locale(language).format('HH:mm:ss') }}</span>

src/views/SettingsPage.vue

@@ -158,6 +158,7 @@
         {{ $t('connections') }}
       </div>
       <div class="card-body">
+        <SourceIPLabels />
         <div class="flex items-center gap-2">
           {{ $t('connectionStyle') }}:
           {{ $t('table') }}
@@ -202,6 +203,7 @@ import {
 } from '@/api'
 import TableSettings from '@/components/connections/TableSettings.vue'
 import BackendSwitch from '@/components/settings/BackendSwitch.vue'
+import SourceIPLabels from '@/components/settings/SourceIPLabels.vue'
 import { LANG } from '@/config'
 import { i18n } from '@/i18n'
 import { configs, updateConfigs } from '@/store/config'