feat(ui): redesign with transparent liquid glass (#414)

* docs: add design spec for iOS 26 Liquid Glass UI redesign

* docs: add implementation plan for iOS 26 Liquid Glass UI redesign

* feat(ui): add liquid glass CSS variables and update root layouts

* feat(ui): update Card and Modal components to iOS 26 Liquid Glass style

* feat(ui): redesign dashboard page to Liquid Glass style

* feat(ui): redesign node management page cards and charts

* feat(ui): redesign monitor page to Liquid Glass style

* feat(ui): redesign group and panel-sharing cards to Liquid Glass

* feat(ui): redesign settings and user components to Liquid Glass

* feat(ui): redesign profile and auth pages to Liquid Glass

* fix(ui): revert to LineChart to fix compilation issues

* refactor(ui): extract dashboard user header and cleanup admin layout

* feat(ui): refine monitor page hero metrics and fix build

* fix(ui): real data for monitor hero metrics and card padding adjustments

* fix(ui): apply global card padding and fix index layouts

* feat(ui): implement liquid-glass-react for all Card components

* fix(ui): resolve liquid-glass-react rendering issues causing invisible text and broken layout

* fix(ui): native CSS liquid-glass effect replacing NPM package

* fix(ui): cleanup duplicate closing tags and complete liquid glass tables

* fix(ui): apply perfect rounded corners to list views and table headers in non-compact mode

* fix(ui): apply liquid glass styling to grouped rules view in forward page

* fix(ui): re-implement liquid-glass natively to prevent text distortion and remove package dependency

* fix(ui): remove mouse distortion and preserve proper liquid glass texture

* fix(ui): remove svg filter causing text distortion and replace with pure css liquid glass

* fix(ui): apply properly scoped border radius to table headers

* fix(ui): remove hardcoded bg-default-50/60 from TableHeader

* fix(ui): apply global liquid glass styling and transparent overlays to all modals and dialogs

* fix(ui): remove absolute/relative class conflicts hiding Dialog modales and implement pure transparent layout

* feat(ui): apply global liquid glass styling to cards, buttons, and diagnosis modals

vite-frontend/src/pages/dashboard/components/flow-chart-card.tsx

@@ -1,5 +1,4 @@
 import {
-  CartesianGrid,
   Line,
   LineChart,
   ResponsiveContainer,
@@ -28,7 +27,7 @@ export const FlowChartCard = ({
   formatFlow,
 }: FlowChartCardProps) => {
   return (
-    <Card className="mb-6 lg:mb-8 border border-gray-200 dark:border-default-200 shadow-md">
+    <Card className="mb-6 lg:mb-8">
       <CardHeader className="pb-3">
         <div className="flex items-center gap-2">
           <svg
@@ -51,17 +50,16 @@ export const FlowChartCard = ({
         ) : (
           <div className="h-64 lg:h-80 w-full">
             <ResponsiveContainer height="100%" width="100%">
-              <LineChart data={chartData}>
-                <CartesianGrid className="opacity-30" strokeDasharray="3 3" />
+              <LineChart data={chartData} margin={{ top: 20, right: 0, left: -20, bottom: 0 }}>
                 <XAxis
-                  axisLine={{ stroke: "#e5e7eb", strokeWidth: 1 }}
+                  axisLine={false}
                   dataKey="time"
-                  tick={{ fontSize: 12 }}
+                  tick={{ fill: "currentColor", opacity: 0.5, fontSize: 12 }}
                   tickLine={false}
                 />
                 <YAxis
-                  axisLine={{ stroke: "#e5e7eb", strokeWidth: 1 }}
-                  tick={{ fontSize: 12 }}
+                  axisLine={false}
+                  tick={{ fill: "currentColor", opacity: 0.5, fontSize: 12 }}
                   tickFormatter={(value: number | string) => {
                     const v = typeof value === "number" ? value : Number(value);
 
@@ -97,27 +95,20 @@ export const FlowChartCard = ({
                         : 0;
 
                       return (
-                        <div className="bg-white dark:bg-default-100 border border-default-200 rounded-lg shadow-lg p-3">
+                        <div className="bg-white/70 dark:bg-zinc-900/70 backdrop-blur-xl border border-white/50 rounded-2xl shadow-[0_10px_30px_rgba(0,0,0,0.1)] p-4">
                           <p className="font-medium text-foreground">{`时间: ${label ?? ""}`}</p>
-                          <p className="text-primary">{`流量: ${formatFlow(flowValue)}`}</p>
+                          <p className="text-primary font-semibold mt-1">{`流量: ${formatFlow(flowValue)}`}</p>
                         </div>
                       );
                     }
 
                     return null;
                   }}
+                  cursor={{ fill: "rgba(0, 122, 255, 0.05)" }}
                 />
                 <Line
-                  activeDot={{
-                    r: 4,
-                    stroke: "#8b5cf6",
-                    strokeWidth: 2,
-                    fill: "#fff",
-                  }}
                   dataKey="flow"
-                  dot={false}
-                  stroke="#8b5cf6"
-                  strokeWidth={3}
+                  stroke="#007aff"
                   type="monotone"
                 />
               </LineChart>

vite-frontend/src/pages/dashboard/components/metric-card.tsx

@@ -18,22 +18,24 @@ export const MetricCard = ({
   bottomContent,
 }: MetricCardProps) => {
   return (
-    <Card className="border border-gray-200 dark:border-default-200 shadow-md hover:shadow-lg transition-shadow">
-      <CardBody className="p-3 lg:p-4">
-        <div className="flex flex-col space-y-2">
+    <Card className="h-48 flex flex-col justify-between overflow-hidden">
+      <CardBody className="!p-4 md:!p-6 h-full flex flex-col justify-between overflow-visible">
+        <div className="flex flex-col space-y-4">
           <div className="flex items-center justify-between">
-            <p className="text-xs lg:text-sm text-default-600 truncate">
+            <p className="text-sm font-medium text-default-600 truncate">
               {title}
             </p>
             <div
-              className={`p-1.5 lg:p-2 rounded-lg flex-shrink-0 ${iconClassName}`}
+              className={`p-2 rounded-xl flex-shrink-0 ${iconClassName}`}
             >
               {icon}
             </div>
           </div>
-          <p className="text-base lg:text-xl font-bold text-foreground truncate">
+          <p className="text-2xl lg:text-3xl font-bold text-foreground truncate mt-2">
             {value}
           </p>
+        </div>
+        <div className="mt-auto pt-4">
           {bottomContent}
         </div>
       </CardBody>