feat(access-logs): 优化概览饼图布局并在查询出错时增加日志记录

- 将设备类型与状态码饼图的断点由 xl 降为 lg，在大屏/笔记本视口下保持双列展示
- 修复 valueCountDistribution 在 ClickHouse 查询出错时静默吞掉错误的缺陷，引入 logger.ErrorF 捕获
- 补充 unreleased 变更日志

docs/changelog/index.md

@@ -23,8 +23,11 @@ sidebar: false
 
 ### 变更
 
+- 优化访问日志概览及其他图表全局排行榜 (RankChart) 的样式布局：将每一项改为单行横向排布（左侧标签、中间进度条、右侧数值），数值支持自动格式化为 Compact 形式（如 39.57k、1.2M），同时调整默认高度为 320px 并隐藏滚动条。
 - 访问日志页面重构为「概览」与「日志明细」两个标签页：概览展示请求量、访问量、带宽趋势与 Top Paths/Hosts/IPs，明细列表保留检索能力；已移除时间折叠与 IP 汇总视图。
 - 边缘访问日志现支持上报并存储 User-Agent；概览新增设备类型饼图，以及浏览器、操作系统、User-Agent 排行。
+- 优化访问日志概览的设备类型与状态码饼图布局，使设备类型与状态码饼图在 1024px（lg）以上屏幕保持双列并排展示，提升页面紧凑度。
+- 修复访问日志概览在 ClickHouse 查询发生错误时静默吞掉报错的缺陷，引入错误日志输出，方便定位问题。
 
 ## [v3.4.0] - 2026-07-18
 

frontend/app/(main)/access-logs/components/overview-tab.tsx

@@ -5,7 +5,7 @@ import type { EChartsOption } from 'echarts';
 import ReactECharts from 'echarts-for-react';
 import { Cell, Pie, PieChart } from 'recharts';
 
-import { RankChart } from '@/components/data/rank-chart';
+import { RankCard } from '@/components/data/rank-card';
 import { TrendChart } from '@/components/data/trend-chart';
 import { EmptyStateWithBorder } from '@/components/layout/empty';
 import { ErrorInline } from '@/components/layout/error';
@@ -160,38 +160,6 @@ function toRankItems(items: DistributionItem[] | undefined) {
   }));
 }
 
-function RankCard({
-  title,
-  description,
-  items,
-  color,
-}: {
-  title: string;
-  description: string;
-  items: { label: string; value: number }[];
-  color: string;
-}) {
-  return (
-    <Card className='border-dashed shadow-none'>
-      <CardHeader className='pb-3'>
-        <CardTitle className='text-sm font-semibold text-foreground'>
-          {title}
-        </CardTitle>
-        <CardDescription className='text-xs text-muted-foreground'>
-          {description}
-        </CardDescription>
-      </CardHeader>
-      <CardContent className='pt-0'>
-        <RankChart
-          items={items}
-          color={color}
-          emptyMessage={`暂无 ${title} 数据`}
-        />
-      </CardContent>
-    </Card>
-  );
-}
-
 function PieDistributionCard({
   title,
   description,
@@ -236,13 +204,13 @@ function PieDistributionCard({
       </CardHeader>
       <CardContent className='pt-0'>
         {chartData.length === 0 ? (
-          <div className='flex h-[450px] items-center justify-center rounded-md border border-dashed bg-muted/20 text-sm text-muted-foreground'>
+          <div className='flex h-[300px] items-center justify-center rounded-md border border-dashed bg-muted/20 text-sm text-muted-foreground'>
             {emptyMessage}
           </div>
         ) : (
           <ChartContainer
             config={chartConfig}
-            className='mx-auto h-[450px] w-full'
+            className='mx-auto h-[300px] w-full'
           >
             <PieChart>
               <Pie
@@ -251,8 +219,8 @@ function PieDistributionCard({
                 nameKey='name'
                 cx='50%'
                 cy='46%'
-                innerRadius={72}
-                outerRadius={110}
+                innerRadius={50}
+                outerRadius={80}
                 paddingAngle={2}
               >
                 {chartData.map((entry) => (
@@ -456,19 +424,16 @@ function OverviewContent({
         <RankCard
           title='Top Paths'
           description='访问量最高的请求路径。'
-          color='#a78bfa'
           items={toRankItems(data.top_paths)}
         />
         <RankCard
           title='Top Hosts'
           description='流量集中的访问域名。'
-          color='#34d399'
           items={toRankItems(data.top_hosts)}
         />
         <RankCard
           title='Top IPs'
           description='请求次数最多的来源 IP。'
-          color='#38bdf8'
           items={toRankItems(data.top_ips)}
         />
       </div>
@@ -477,19 +442,16 @@ function OverviewContent({
         <RankCard
           title='Top browsers'
           description='按浏览器聚合的请求排行。'
-          color='#f59e0b'
           items={toRankItems(data.top_browsers)}
         />
         <RankCard
           title='Top Operating System'
           description='按操作系统聚合的请求排行。'
-          color='#22c55e'
           items={toRankItems(data.top_operating_systems)}
         />
         <RankCard
           title='Top User-Agent'
           description='原始 User-Agent 请求排行。'
-          color='#818cf8'
           items={toRankItems(data.top_user_agents)}
         />
       </div>

frontend/components/data/rank-card.tsx

@@ -0,0 +1,48 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+
+import { RankChart } from './rank-chart';
+
+type RankCardItem = {
+  label: string;
+  value: number;
+};
+
+type RankCardProps = {
+  title: string;
+  description: string;
+  items: RankCardItem[];
+  color?: string;
+};
+
+export function RankCard({
+  title,
+  description,
+  items,
+  color = '#3b82f6',
+}: RankCardProps) {
+  return (
+    <Card className='border-dashed shadow-none'>
+      <CardHeader className='pb-3'>
+        <CardTitle className='text-sm font-semibold text-foreground'>
+          {title}
+        </CardTitle>
+        <CardDescription className='text-xs text-muted-foreground'>
+          {description}
+        </CardDescription>
+      </CardHeader>
+      <CardContent className='pt-0'>
+        <RankChart
+          items={items}
+          color={color}
+          emptyMessage={`暂无 ${title} 数据`}
+        />
+      </CardContent>
+    </Card>
+  );
+}

frontend/components/data/rank-chart.tsx

@@ -17,7 +17,15 @@ type RankChartProps = {
   className?: string;
 };
 
-const defaultFormatter = (value: number) => value.toLocaleString('zh-CN');
+const defaultFormatter = (value: number) => {
+  if (value >= 1000000) {
+    return `${Number((value / 1000000).toFixed(2))}M`;
+  }
+  if (value >= 1000) {
+    return `${Number((value / 1000).toFixed(2))}k`;
+  }
+  return value.toLocaleString('zh-CN');
+};
 
 export function RankChart({
   items,
@@ -35,7 +43,7 @@ export function RankChart({
     return (
       <div
         className={cn(
-          'flex h-[450px] items-center justify-center rounded-md border border-dashed bg-muted/20 text-sm text-muted-foreground',
+          'flex h-[320px] items-center justify-center rounded-md border border-dashed bg-muted/20 text-sm text-muted-foreground',
           className,
         )}
       >
@@ -45,31 +53,39 @@ export function RankChart({
   }
 
   return (
-    <div className={cn('h-[450px] space-y-1.5 overflow-y-auto', className)}>
+    <div
+      className={cn(
+        'h-[320px] space-y-0.5 overflow-y-auto pr-1 hide-scrollbar',
+        className,
+      )}
+    >
       {items.map((item) => {
         const ratio = maxValue > 0 ? (item.value / maxValue) * 100 : 0;
         return (
-          <div key={item.label} className='group space-y-1'>
-            <div className='flex items-center justify-between gap-3 text-[13px] leading-none'>
-              <span
-                className='min-w-0 truncate font-medium text-foreground'
-                title={item.label}
-              >
-                {item.label}
-              </span>
-              <span className='shrink-0 tabular-nums text-foreground/80'>
+          <div
+            key={item.label}
+            className='group flex items-center justify-between gap-3 py-1.5 text-sm'
+          >
+            <span
+              className='min-w-0 flex-1 truncate text-[13px] font-normal text-foreground/90'
+              title={item.label}
+            >
+              {item.label}
+            </span>
+            <div className='flex items-center gap-3 shrink-0'>
+              <div className='h-1.5 w-24 sm:w-28 overflow-hidden rounded-full bg-muted/60'>
+                <div
+                  className='h-full rounded-full transition-[width] duration-300'
+                  style={{
+                    width: `${ratio}%`,
+                    backgroundColor: color,
+                  }}
+                />
+              </div>
+              <span className='w-14 text-right tabular-nums text-foreground/80 text-[13px] font-medium'>
                 {valueFormatter(item.value)}
               </span>
             </div>
-            <div className='h-1.5 overflow-hidden rounded-full bg-muted'>
-              <div
-                className='h-full rounded-full transition-[width] duration-300'
-                style={{
-                  width: `${ratio}%`,
-                  backgroundColor: color,
-                }}
-              />
-            </div>
           </div>
         );
       })}

internal/apps/openflare/observability/access_log_logics.go

@@ -10,6 +10,7 @@ import (
 
 	"github.com/Rain-kl/Wavelet/internal/model"
 	analyticsrepo "github.com/Rain-kl/Wavelet/internal/repository/analytics"
+	"github.com/Rain-kl/Wavelet/pkg/logger"
 )
 
 const (
@@ -236,10 +237,10 @@ type AccessLogCleanupResult struct {
 }
 
 const (
-	defaultAccessLogOverviewHours     = 24
-	maxAccessLogOverviewHours         = 24 * 30
-	accessLogOverviewTopLimit         = 10
-	accessLogOverviewUASampleLimit    = 200
+	defaultAccessLogOverviewHours  = 24
+	maxAccessLogOverviewHours      = 24 * 30
+	accessLogOverviewTopLimit      = 10
+	accessLogOverviewUASampleLimit = 200
 )
 
 // GetAccessLogOverview returns summary metrics, trends, and top rankings.
@@ -310,7 +311,11 @@ func valueCountDistribution(
 	limit int,
 ) []DistributionItem {
 	rows, err := model.ValueCountsOpenFlareAccessLogs(ctx, query, column, limit)
-	if err != nil || len(rows) == 0 {
+	if err != nil {
+		logger.ErrorF(ctx, "[AccessLog] ValueCountsOpenFlareAccessLogs failed for column %s: %v", column, err)
+		return []DistributionItem{}
+	}
+	if len(rows) == 0 {
 		return []DistributionItem{}
 	}
 	items := make([]DistributionItem, 0, len(rows))

internal/repository/analytics/node_access_log.go

@@ -221,12 +221,16 @@ func ValueCountsNodeAccessLogs(ctx context.Context, filter NodeAccessLogFilter,
 	}
 	clause, args := buildNodeAccessLogFilterClause(filter)
 	tableName := nodeAccessLogTableName()
+	filterExpr := valueExpr + " != ''"
+	if col == nodeAccessLogColumnStatusCode {
+		filterExpr = "status_code >= 0"
+	}
 	sql := fmt.Sprintf(`
 SELECT %s AS value, count() AS count
 FROM %s
-WHERE %s AND %s != ''
+WHERE %s AND %s
 GROUP BY value
-ORDER BY count DESC, value ASC`, valueExpr, tableName, clause, valueExpr)
+ORDER BY count DESC, value ASC`, valueExpr, tableName, clause, filterExpr)
 	if limit > 0 {
 		sql += clickHouseLimitClause
 		args = append(args, limit)