feat: time for log & proxy icon

src/components/proxies/ProxyGroup.vue

@@ -2,6 +2,11 @@
   <div class="collapse collapse-arrow bg-base-100 shadow-lg">
     <div class="collapse-title">
       <div class="flex items-center gap-2">
+        <img
+          v-if="proxyGroup.icon"
+          class="h-5 w-5"
+          :src="proxyGroup.icon"
+        />
         <div class="text-lg font-medium sm:text-xl">
           {{ proxyGroup.name }}
         </div>

src/store/logs.ts

@@ -31,6 +31,7 @@ export const initLogs = () => {
 
     logs.value.unshift({
       ...parsedData,
+      time: new Date().valueOf(),
       seq: idx++,
     })
 

src/types/index.d.ts

@@ -24,6 +24,7 @@ export type Proxy = {
   all?: string[]
   udp: boolean
   now: string
+  icon: string
 }
 
 export type ProxyGroup = Proxy & {
@@ -93,4 +94,4 @@ export type Log = {
   payload: string
 }
 
-export type LogWithSeq = Log & { seq: number }
+export type LogWithSeq = Log & { seq: number; time: number }

src/views/LogsPage.vue

@@ -8,9 +8,10 @@
     <div
       v-for="log in renderLogs"
       :key="log.seq"
-      class="card w-full flex-row gap-1 rounded-xl bg-base-100 p-2 text-sm shadow-lg"
+      class="card w-full flex-row gap-1 gap-2 rounded-xl bg-base-100 p-2 text-sm shadow-lg"
     >
       <span>{{ log.seq }}</span>
+      <span class="text-info">{{ dayjs(log.time).locale(language).format('HH:mm:ss') }}</span>
       <span :class="textColorMapForType[log.type]">{{ log.type }}</span>
       <span>{{ log.payload }}</span>
     </div>
@@ -19,7 +20,9 @@
 
 <script setup lang="ts">
 import { LOG_LEVEL } from '@/config'
+import { language } from '@/store/config'
 import { logFilter, logs } from '@/store/logs'
+import dayjs from 'dayjs'
 import { computed } from 'vue'
 
 const textColorMapForType = {