fix: ResponsiveContainer -1 error & projects sort order

web/src/components/layout/app-sidebar/nav-user.tsx

@@ -201,3 +201,4 @@ export function NavUser() {
     </SidebarMenu>
   );
 }
+

web/src/components/ui/chart.tsx

@@ -63,7 +63,9 @@ function ChartContainer({
         {...props}
       >
         <ChartStyle id={chartId} config={config} />
-        <RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>
+        <RechartsPrimitive.ResponsiveContainer width="100%" height="100%" minHeight={1}>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
       </div>
     </ChartContext.Provider>
   );

web/src/hooks/queries/use-usage-stats.ts

@@ -3,7 +3,7 @@
  * 支持多层级时间粒度聚合
  */
 
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { keepPreviousData, useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { getTransport, type UsageStatsFilter, type StatsGranularity } from '@/lib/transport';
 
 // Query Keys
@@ -117,6 +117,7 @@ export function useUsageStats(filter?: UsageStatsFilter) {
   return useQuery({
     queryKey: usageStatsKeys.list(filter),
     queryFn: () => getTransport().getUsageStats(filter),
+    placeholderData: keepPreviousData,
   });
 }
 

web/src/pages/projects/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import {
@@ -41,6 +41,24 @@ export function ProjectsPage() {
     navigate(`/projects/${id}`);
   };
 
+  const sortedProjects = useMemo(() => {
+    if (!projects) {
+      return undefined;
+    }
+    return projects.slice().sort((a, b) => {
+      const timeA = Number.isFinite(new Date(a.createdAt).getTime())
+        ? new Date(a.createdAt).getTime()
+        : 0;
+      const timeB = Number.isFinite(new Date(b.createdAt).getTime())
+        ? new Date(b.createdAt).getTime()
+        : 0;
+      if (timeA !== timeB) {
+        return timeA - timeB;
+      }
+      return a.id - b.id;
+    });
+  }, [projects]);
+
   return (
     <div className="flex flex-col h-full bg-background">
       <PageHeader
@@ -89,9 +107,9 @@ export function ProjectsPage() {
           <div className="flex items-center justify-center p-12">
             <Loader2 className="h-8 w-8 animate-spin text-accent" />
           </div>
-        ) : projects && projects.length > 0 ? (
+        ) : sortedProjects && sortedProjects.length > 0 ? (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
-            {projects.map((project) => (
+            {sortedProjects.map((project) => (
               <Card
                 key={project.id}
                 className="group border-border bg-surface-primary cursor-pointer hover:border-accent/50 hover:shadow-card-hover transition-all duration-200 flex flex-col"

web/src/pages/stats/index.tsx

@@ -898,8 +898,8 @@ export function StatsPage() {
                   </Tabs>
                 </CardHeader>
                 <CardContent className="pt-2">
-                  <div className="w-full" style={{ height: '400px' }}>
-                    <ResponsiveContainer width="100%" height="100%">
+                  <div className="w-full h-[400px] min-h-[400px]">
+                    <ResponsiveContainer width="100%" height={400}>
                       <ComposedChart data={chartData}>
                         <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" opacity={0.5} />
                         <XAxis