feat(traffic): implement standalone traffic analysis page with IndexedDB storage

Author: xuqingfande

components/DataUsageTable.vue

@@ -36,15 +36,15 @@ onMounted(() => {
   >
     <!-- Backdrop blur container -->
     <div
-      class="mx-2 mb-2 overflow-hidden rounded-2xl shadow-lg backdrop-blur-[12px]"
+      class="mx-1 mb-2 overflow-hidden rounded-2xl shadow-lg backdrop-blur-[12px] sm:mx-2"
       :style="{
         border:
           '1px solid color-mix(in oklch, var(--color-base-content) 10%, transparent)',
         background:
           'color-mix(in oklch, var(--color-base-300) 90%, transparent)',
       }"
     >
-      <div class="grid h-16 grid-cols-6">
+      <div class="grid h-16 w-full grid-cols-7">
         <NuxtLink
           v-for="nav in navItems"
           :key="nav.href"
@@ -90,7 +90,7 @@ onMounted(() => {
           <!-- Visual label with fade animation -->
           <span
             aria-hidden="true"
-            class="relative z-10 text-[10px] font-medium transition-all duration-300 ease-in-out group-hover:opacity-100"
+            class="relative z-10 truncate px-0.5 text-[9px] font-medium transition-all duration-300 ease-in-out group-hover:opacity-100 sm:text-[10px]"
             :class="isActive(nav.href) ? 'opacity-100' : 'opacity-80'"
           >
             {{ nav.name }}

components/MobileBottomNav.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import {
+  IconChartAreaLine,
   IconChevronsLeft,
   IconChevronsRight,
   IconFileStack,
@@ -20,6 +21,7 @@ const navItems = computed(() => [
   { href: '/proxies', name: t('proxies'), icon: IconGlobe },
   { href: '/rules', name: t('rules'), icon: IconRuler },
   { href: '/connections', name: t('connections'), icon: IconNetwork },
+  { href: '/traffic', name: t('dataUsage'), icon: IconChartAreaLine },
   { href: '/logs', name: t('logs'), icon: IconFileStack },
   { href: '/config', name: t('config'), icon: IconSettings },
 ])