style(frontend): redesign with Miuix HyperOS design language

- Color system: Miuix dark tokens (primary #277AF7, bg #242424, surface #000)
- Components: rounded-full buttons, squircle cards (18px), glass header
- Messages: blue user bubbles, dark AI bubbles with typing animation
- Admin dashboard: stat cards with real-time service status
- Login: centered logo with gradient shadow, HyperOS input fields
- Smooth transitions and scale-on-press interactions

frontend/web/src/pages/admin/DashboardPage.tsx

@@ -1,17 +1,45 @@
+import { useEffect, useState } from 'react'
+import { api } from '../../api/client'
+
 export default function DashboardPage() {
+  const [data, setData] = useState<Record<string, any> | null>(null)
+
+  useEffect(() => {
+    api.admin.dashboard().then(r => setData(r.dashboard))
+  }, [])
+
   return (
-    <div className="p-6 max-w-3xl mx-auto">
-      <h1 className="text-xl font-bold mb-4">管理面板</h1>
-      <div className="grid grid-cols-2 gap-4">
-        <div className="bg-gray-800 rounded-lg p-4">
-          <p className="text-gray-400 text-sm">服务状态</p>
-          <p className="text-green-400 text-lg font-bold mt-1">运行中</p>
-        </div>
-        <div className="bg-gray-800 rounded-lg p-4">
-          <p className="text-gray-400 text-sm">版本</p>
-          <p className="text-purple-400 text-lg font-bold mt-1">2.0.0-dev</p>
-        </div>
+    <div className="p-6 max-w-2xl mx-auto">
+      <h2 className="text-lg font-semibold mb-5">管理面板</h2>
+
+      {/* Stats grid */}
+      <div className="grid grid-cols-2 gap-3 mb-5">
+        <StatCard label="服务状态" value={data?.status || '...'} accent="text-[#4788FF]" />
+        <StatCard label="版本" value={data?.version || '...'} accent="text-white/80" />
+        <StatCard label="运行时间" value={`${data?.uptime_sec || 0}s`} accent="text-white/60" />
+        <StatCard label="服务数"
+          value={data ? Object.values(data.services || {}).filter(Boolean).length + '/3' : '...'}
+          accent="text-[#4788FF]" />
+      </div>
+
+      {/* Service status */}
+      <div className="bg-[#000] rounded-[18px] border border-[#404040] divide-y divide-[#393939]">
+        {['ai_core', 'memory', 'voice'].map(name => (
+          <div key={name} className="flex items-center justify-between px-4 py-3">
+            <span className="text-sm text-[#F2F2F2]">{name}</span>
+            <span className={`w-2 h-2 rounded-full ${data?.services?.[name] ? 'bg-[#4788FF]' : 'bg-[#404040]'}`} />
+          </div>
+        ))}
       </div>
     </div>
   )
 }
+
+function StatCard({ label, value, accent }: { label: string; value: string; accent: string }) {
+  return (
+    <div className="bg-[#000] border border-[#404040] rounded-[18px] px-4 py-3">
+      <p className="text-xs text-white/40 mb-1">{label}</p>
+      <p className={`text-lg font-semibold capitalize ${accent}`}>{value}</p>
+    </div>
+  )
+}