diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 4243a02..3bd1a70 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -21,6 +21,7 @@
         "@radix-ui/react-dropdown-menu": "^2.1.2",
         "@radix-ui/react-label": "^2.1.0",
         "@radix-ui/react-popover": "^1.1.2",
+        "@radix-ui/react-progress": "^1.1.8",
         "@radix-ui/react-scroll-area": "^1.2.0",
         "@radix-ui/react-separator": "^1.1.0",
         "@radix-ui/react-slot": "^1.1.0",
@@ -1530,6 +1531,30 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-progress": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.1.8.tgz",
+      "integrity": "sha512-+gISHcSPUJ7ktBy9RnTqbdKW78bcGke3t6taawyZ71pio1JewwGSJizycs7rLhGTvMJYCQB1DBK4KQsxs7U8dA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-context": "1.1.3",
+        "@radix-ui/react-primitive": "2.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-roving-focus": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.11.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index cb6db09..ed2b1f0 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -24,6 +24,7 @@
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-progress": "^1.1.8",
     "@radix-ui/react-scroll-area": "^1.2.0",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
diff --git a/frontend/src/components/ui/progress.tsx b/frontend/src/components/ui/progress.tsx
new file mode 100644
index 0000000..105fb65
--- /dev/null
+++ b/frontend/src/components/ui/progress.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "@/lib/utils"
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
+      className
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }
diff --git a/frontend/src/i18n/locales/en.ts b/frontend/src/i18n/locales/en.ts
index ce62e89..30995dc 100644
--- a/frontend/src/i18n/locales/en.ts
+++ b/frontend/src/i18n/locales/en.ts
@@ -215,6 +215,14 @@ const en = {
     cacheTTLPlaceholder: 'Cache TTL in seconds, 0 = no cache',
     emptyTitle: 'Add your first upstream provider',
     emptyDescription: 'Providers supply the real nodes. Later, subscriptions can enable these sources and merge them into the final config.',
+    traffic: 'Traffic',
+    trafficUpload: 'Upload',
+    trafficDownload: 'Download',
+    trafficTotal: 'Total',
+    trafficExpires: 'Expires',
+    trafficExpired: 'Expired',
+    trafficExpiresToday: 'Expires today',
+    trafficDaysLeft: '{{count}} days left',
   },
 
   userAgents: {
diff --git a/frontend/src/i18n/locales/zh.ts b/frontend/src/i18n/locales/zh.ts
index 10c7cba..2b46f6c 100644
--- a/frontend/src/i18n/locales/zh.ts
+++ b/frontend/src/i18n/locales/zh.ts
@@ -220,6 +220,14 @@ const zh = {
     cacheTTLPlaceholder: '缓存有效期（秒），0 表示不缓存',
     emptyTitle: '先添加一个上游订阅源',
     emptyDescription: '订阅源负责提供真实节点。后续创建订阅时，可以勾选这些来源并统一生成最终配置。',
+    traffic: '流量',
+    trafficUpload: '上传',
+    trafficDownload: '下载',
+    trafficTotal: '总量',
+    trafficExpires: '到期',
+    trafficExpired: '已过期',
+    trafficExpiresToday: '今日到期',
+    trafficDaysLeft: '{{count}} 天后到期',
   },
 
   // UA 库
diff --git a/frontend/src/pages/Providers.tsx b/frontend/src/pages/Providers/index.tsx
similarity index 96%
rename from frontend/src/pages/Providers.tsx
rename to frontend/src/pages/Providers/index.tsx
index de94e7d..f39baa2 100644
--- a/frontend/src/pages/Providers.tsx
+++ b/frontend/src/pages/Providers/index.tsx
@@ -37,13 +37,8 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '@/components/ui/tooltip'
-
-interface ProviderFormData {
-  name: string
-  url: string
-  user_agent_id: string
-  cache_ttl: string
-}
+import type { ProviderFormData } from './shared/types'
+import { TrafficCell } from './traffic/TrafficCell'
 
 export function Providers() {
   const { t } = useTranslation()
@@ -177,6 +172,7 @@ export function Providers() {
               <TableHead>{t('providers.providerUrl')}</TableHead>
               <TableHead>{t('providers.userAgent')}</TableHead>
               <TableHead>{t('providers.lastFetched')}</TableHead>
+              <TableHead>{t('providers.traffic')}</TableHead>
               <TableHead className="w-[130px]">{t('common.actions')}</TableHead>
             </TableRow>
           </TableHeader>
@@ -184,14 +180,14 @@ export function Providers() {
             {isLoading ? (
               Array.from({ length: 3 }).map((_, i) => (
                 <TableRow key={i}>
-                  {Array.from({ length: 5 }).map((_, j) => (
+                  {Array.from({ length: 6 }).map((_, j) => (
                     <TableCell key={j}><Skeleton className="h-5 w-full" /></TableCell>
                   ))}
                 </TableRow>
               ))
             ) : providers.length === 0 ? (
               <TableRow>
-                <TableCell colSpan={5}>
+                <TableCell colSpan={6}>
                   <EmptyState
                     title={t('providers.emptyTitle')}
                     description={t('providers.emptyDescription')}
@@ -254,6 +250,14 @@ export function Providers() {
                       </span>
                     )}
                   </TableCell>
+                  <TableCell>
+                    <TrafficCell
+                      upload={p.traffic_upload}
+                      download={p.traffic_download}
+                      total={p.traffic_total}
+                      expireAt={p.traffic_expire_at}
+                    />
+                  </TableCell>
                   <TableCell>
                     <div className="flex items-center gap-1">
                       <Button
diff --git a/frontend/src/pages/Providers/shared/types.ts b/frontend/src/pages/Providers/shared/types.ts
new file mode 100644
index 0000000..0bea58d
--- /dev/null
+++ b/frontend/src/pages/Providers/shared/types.ts
@@ -0,0 +1,6 @@
+export interface ProviderFormData {
+  name: string
+  url: string
+  user_agent_id: string
+  cache_ttl: string
+}
diff --git a/frontend/src/pages/Providers/traffic/TrafficCell.tsx b/frontend/src/pages/Providers/traffic/TrafficCell.tsx
new file mode 100644
index 0000000..6277dc3
--- /dev/null
+++ b/frontend/src/pages/Providers/traffic/TrafficCell.tsx
@@ -0,0 +1,120 @@
+import { useTranslation } from 'react-i18next'
+import { CalendarDays } from 'lucide-react'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
+import { Badge } from '@/components/ui/badge'
+import { cn } from '@/lib/utils'
+import { formatBytes, calcUsagePercent, formatExpireDate, daysRemaining } from './traffic-utils'
+
+interface TrafficCellProps {
+  upload?: number | null
+  download?: number | null
+  total?: number | null
+  expireAt?: string | null
+}
+
+function percentBadgeVariant(p: number) {
+  if (p >= 90) return 'destructive' as const
+  if (p >= 75) return 'secondary' as const
+  return 'outline' as const
+}
+
+function progressColor(p: number) {
+  if (p >= 90) return 'bg-destructive'
+  if (p >= 75) return 'bg-amber-500'
+  return 'bg-emerald-500'
+}
+
+export function TrafficCell({ upload, download, total, expireAt }: TrafficCellProps) {
+  const { t } = useTranslation()
+  const percent = calcUsagePercent(upload, download, total)
+  const used = (upload ?? 0) + (download ?? 0)
+  const expireStr = formatExpireDate(expireAt)
+  const days = daysRemaining(expireAt)
+
+  // 无任何流量数据
+  if (percent === null && !expireStr) {
+    return <span className="text-muted-foreground text-sm">-</span>
+  }
+
+  return (
+    <div className="min-w-[180px] space-y-2">
+      {/* 流量使用量 + 百分比 */}
+      {percent !== null && (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="space-y-1.5">
+                {/* 第一行：已用 | 百分比 badge */}
+                <div className="flex items-center justify-between gap-2">
+                  <span className="text-sm font-semibold tabular-nums truncate">
+                    {formatBytes(used)}
+                  </span>
+                  <Badge
+                    variant={percentBadgeVariant(percent)}
+                    className={cn(
+                      'shrink-0 text-[11px] font-bold tabular-nums px-1.5 py-0',
+                      percent < 75 && 'border-emerald-500/50 text-emerald-600'
+                    )}
+                  >
+                    {percent}%
+                  </Badge>
+                </div>
+
+                {/* 进度条 */}
+                <div className="h-2.5 w-full overflow-hidden rounded-full bg-secondary">
+                  <div
+                    className={cn('h-full rounded-full transition-all', progressColor(percent))}
+                    style={{ width: `${percent}%` }}
+                  />
+                </div>
+
+                {/* 第三行：总量 */}
+                <p className="text-[11px] text-muted-foreground">
+                  {t('providers.trafficTotal')}: {formatBytes(total)}
+                </p>
+              </div>
+            </TooltipTrigger>
+            <TooltipContent>
+              <div className="space-y-1 text-xs">
+                <p>{t('providers.trafficUpload')}: {formatBytes(upload ?? 0)}</p>
+                <p>{t('providers.trafficDownload')}: {formatBytes(download ?? 0)}</p>
+                <p>{t('providers.trafficTotal')}: {formatBytes(total)}</p>
+              </div>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      )}
+
+      {/* 到期时间 */}
+      {expireStr && (
+        <div
+          className={cn(
+            'flex items-center gap-1.5 text-[11px]',
+            days !== null && days < 0
+              ? 'text-destructive font-medium'
+              : days !== null && days <= 7
+                ? 'text-amber-600 font-medium'
+                : 'text-muted-foreground'
+          )}
+        >
+          <CalendarDays className="h-3 w-3 shrink-0" />
+          <span>{expireStr}</span>
+          {days !== null && (
+            <span className="ml-auto">
+              {days < 0
+                ? t('providers.trafficExpired')
+                : days === 0
+                  ? t('providers.trafficExpiresToday')
+                  : t('providers.trafficDaysLeft', { count: days })}
+            </span>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/frontend/src/pages/Providers/traffic/traffic-utils.ts b/frontend/src/pages/Providers/traffic/traffic-utils.ts
new file mode 100644
index 0000000..9bc03e2
--- /dev/null
+++ b/frontend/src/pages/Providers/traffic/traffic-utils.ts
@@ -0,0 +1,62 @@
+/**
+ * 将字节数格式化为可读字符串（KB/MB/GB/TB）。
+ * 使用二进制单位（1 GB = 1024^3），网络流量通用标准。
+ */
+export function formatBytes(bytes: number | null | undefined): string {
+  if (bytes == null || bytes <= 0) return '-'
+  const units = ['B', 'KB', 'MB', 'GB', 'TB']
+  let i = 0
+  let value = bytes
+  while (value >= 1024 && i < units.length - 1) {
+    value /= 1024
+    i++
+  }
+  return `${value.toFixed(i === 0 ? 0 : 2)} ${units[i]}`
+}
+
+/**
+ * 计算流量使用百分比: (upload + download) / total * 100
+ * total 不可用或为 0 时返回 null。
+ */
+export function calcUsagePercent(
+  upload: number | null | undefined,
+  download: number | null | undefined,
+  total: number | null | undefined
+): number | null {
+  if (total == null || total <= 0) return null
+  const used = (upload ?? 0) + (download ?? 0)
+  return Math.min(Math.round((used / total) * 100), 100)
+}
+
+/**
+ * 将 ISO 日期字符串格式化为 YYYY-MM-DD 格式。
+ * 输入为 null/undefined 或 Unix epoch 0 时返回 null。
+ */
+export function formatExpireDate(isoDate: string | null | undefined): string | null {
+  if (!isoDate) return null
+  const d = new Date(isoDate)
+  if (isNaN(d.getTime())) return null
+  if (d.getTime() <= 0) return null
+  const y = d.getFullYear()
+  const m = String(d.getMonth() + 1).padStart(2, '0')
+  const day = String(d.getDate()).padStart(2, '0')
+  return `${y}-${m}-${day}`
+}
+
+/**
+ * 计算剩余天数。返回 null 表示无到期信息；负数表示已过期。
+ */
+export function daysRemaining(isoDate: string | null | undefined): number | null {
+  if (!isoDate) return null
+  const d = new Date(isoDate)
+  if (isNaN(d.getTime()) || d.getTime() <= 0) return null
+  return Math.ceil((d.getTime() - Date.now()) / (1000 * 60 * 60 * 24))
+}
+
+/**
+ * 判断订阅是否已过期。
+ */
+export function isExpired(isoDate: string | null | undefined): boolean {
+  const days = daysRemaining(isoDate)
+  return days !== null && days < 0
+}
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index a65e453..3fcdf12 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -28,6 +28,11 @@ export interface Provider {
   last_fetched_at?: string
   fetch_error?: string
   user_agent?: UserAgent
+  // 订阅流量信息（从 subscription-userinfo 响应头解析）
+  traffic_upload?: number | null
+  traffic_download?: number | null
+  traffic_total?: number | null
+  traffic_expire_at?: string | null
 }
 
 // 代理节点（结构化）
diff --git a/internal/model/provider.go b/internal/model/provider.go
index 2980a79..f146c65 100644
--- a/internal/model/provider.go
+++ b/internal/model/provider.go
@@ -14,6 +14,12 @@ type Provider struct {
 	CacheTTL      int        `gorm:"default:60" json:"cache_ttl"` // 缓存有效期（分钟）
 	FetchError    string     `json:"fetch_error,omitempty"`       // 最近一次拉取错误信息
 
+	// ── 订阅流量信息（从 subscription-userinfo 响应头解析） ──
+	TrafficUpload   *int64     `json:"traffic_upload"`    // 已上传（字节）
+	TrafficDownload *int64     `json:"traffic_download"`  // 已下载（字节）
+	TrafficTotal    *int64     `json:"traffic_total"`     // 总流量（字节）
+	TrafficExpireAt *time.Time `json:"traffic_expire_at"` // 订阅到期时间
+
 	User      User       `gorm:"foreignKey:UserID" json:"-"`
 	UserAgent *UserAgent `gorm:"foreignKey:UserAgentID" json:"user_agent,omitempty"`
 }
diff --git a/internal/repository/migrations/schema.go b/internal/repository/migrations/schema.go
index c15da45..5781aa4 100644
--- a/internal/repository/migrations/schema.go
+++ b/internal/repository/migrations/schema.go
@@ -15,6 +15,24 @@ func init() {
 	})
 }
 
+func init() {
+	register(Migration{
+		Version: 20260429133900,
+		Up:      migrate20260429133900,
+	})
+}
+
+// migrate20260429133900 为 Provider 表新增流量信息字段（subscription-userinfo 解析结果）。
+func migrate20260429133900(db *gorm.DB) error {
+	return db.Exec(`
+		ALTER TABLE providers
+		ADD COLUMN traffic_upload    BIGINT       NULL AFTER fetch_error,
+		ADD COLUMN traffic_download  BIGINT       NULL AFTER traffic_upload,
+		ADD COLUMN traffic_total     BIGINT       NULL AFTER traffic_download,
+		ADD COLUMN traffic_expire_at DATETIME(3)  NULL AFTER traffic_total
+	`).Error
+}
+
 func applySchemaUp(db *gorm.DB) error {
 	return ApplySchema(db)
 }
diff --git a/internal/service/provider.go b/internal/service/provider.go
index ae48e82..be12d56 100644
--- a/internal/service/provider.go
+++ b/internal/service/provider.go
@@ -5,6 +5,8 @@ import (
 	"io"
 	"log/slog"
 	"net/http"
+	"strconv"
+	"strings"
 	"time"
 
 	"clash-config-store/internal/model"
@@ -61,6 +63,9 @@ func FetchAndCache(providerID uint) error {
 		return saveProviderError(&p, errMsg)
 	}
 
+	// 解析 subscription-userinfo 响应头（如有）
+	trafficInfo := parseSubscriptionUserinfo(resp.Header.Get("subscription-userinfo"))
+
 	// 最大读取 10MB，防止超大响应占用内存
 	body, err := io.ReadAll(io.LimitReader(resp.Body, 10*1024*1024))
 	if err != nil {
@@ -70,11 +75,21 @@ func FetchAndCache(providerID uint) error {
 	}
 
 	now := time.Now()
-	if err := repository.DB.Model(&p).Updates(map[string]interface{}{
+	updateMap := map[string]interface{}{
 		"cache_content":   string(body),
 		"last_fetched_at": now,
 		"fetch_error":     "",
-	}).Error; err != nil {
+	}
+
+	// 仅当上游返回了流量信息时才更新（保留旧数据，避免临时缺失导致清空）
+	if trafficInfo != nil {
+		updateMap["traffic_upload"] = trafficInfo.Upload
+		updateMap["traffic_download"] = trafficInfo.Download
+		updateMap["traffic_total"] = trafficInfo.Total
+		updateMap["traffic_expire_at"] = trafficInfo.ExpireAt
+	}
+
+	if err := repository.DB.Model(&p).Updates(updateMap).Error; err != nil {
 		return fmt.Errorf("保存缓存失败: %w", err)
 	}
 
@@ -94,3 +109,61 @@ func saveProviderError(p *model.Provider, errMsg string) error {
 	repository.DB.Model(p).Update("fetch_error", errMsg)
 	return fmt.Errorf("%s", errMsg)
 }
+
+// subscriptionTraffic 解析后的订阅流量信息
+type subscriptionTraffic struct {
+	Upload   *int64
+	Download *int64
+	Total    *int64
+	ExpireAt *time.Time
+}
+
+// parseSubscriptionUserinfo 解析 subscription-userinfo 响应头。
+// 格式: "upload=123; download=456; total=789; expire=1735689600"
+// 返回 nil 表示 header 为空或无有效数据。
+func parseSubscriptionUserinfo(header string) *subscriptionTraffic {
+	if header == "" {
+		return nil
+	}
+
+	result := &subscriptionTraffic{}
+	hasAny := false
+
+	for _, part := range strings.Split(header, ";") {
+		kv := strings.SplitN(strings.TrimSpace(part), "=", 2)
+		if len(kv) != 2 {
+			continue
+		}
+		key := strings.TrimSpace(kv[0])
+		val := strings.TrimSpace(kv[1])
+
+		switch key {
+		case "upload":
+			if v, err := strconv.ParseInt(val, 10, 64); err == nil {
+				result.Upload = &v
+				hasAny = true
+			}
+		case "download":
+			if v, err := strconv.ParseInt(val, 10, 64); err == nil {
+				result.Download = &v
+				hasAny = true
+			}
+		case "total":
+			if v, err := strconv.ParseInt(val, 10, 64); err == nil {
+				result.Total = &v
+				hasAny = true
+			}
+		case "expire":
+			if v, err := strconv.ParseInt(val, 10, 64); err == nil && v > 0 {
+				t := time.Unix(v, 0)
+				result.ExpireAt = &t
+				hasAny = true
+			}
+		}
+	}
+
+	if !hasAny {
+		return nil
+	}
+	return result
+}