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

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

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>
         );
       })}