diff --git a/ROADMAP.md b/ROADMAP.md
index 639d71c..49366d8 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -504,6 +504,7 @@ services/api.ts (1324L)
 | Q30 | 前端巨型组件拆分（CloudBilling 534L→295L (-45%)，提取 cloud-billing/ 3 个文件 (OverviewTab 110L 概览统计:同步信息+成本告警横幅+趋势图+厂商分布 + RecordsTab 146L 成本记录表格+RecordsFilterToolbar筛选工具栏 + AlertRulesTab 91L 预警规则卡片网格)） | P0 | **done** |
 | Q31 | 前端巨型组件拆分（PromDsFormDialog 528L→294L (-44%)，提取 6 个文件 (CollapsibleSection 42L 通用折叠包装器 DRY 3 个重复折叠模式 + AuthSection 107L 认证折叠 + HeadersSection 64L 自定义Headers + AlertingSection 58L 告警折叠 + MiscSection 47L 杂项折叠 + TestResultBanner 32L 测试结果横幅)，3 个折叠区块全部使用共享 CollapsibleSection 消除重复 JSX)） | P0 | **done** |
 | Q32 | 前端巨型组件拆分（AuditOperationsTab 527L→275L (-48%)，提取 audit-operations/ 3 个文件 (types 43L normalizeLog 纯函数+AuditStatistics 接口 + LogDetailDialog 85L 详情弹窗+DetailRow + StatisticsDialog 108L 统计弹窗+StatCard)，清除死代码 useConfirm/_confirm/_handleShowStats/statsOpen/statistics/statsLoading，ESLint errors=0/any=0，tsc -b=0，npm build✓，go build=0，17/17 测试通过） | P0 | **done** |
+| Q33 | 前端巨型组件拆分（DashboardRecent 518L→25L (-95%)，提取 dashboard-recent/ 7 个文件 (types 48L + shared-components(StatusDot/SeverityBadge) 35L + AlertMessagesCard 72L + CertificateExpiryCard 99L + ReleaseHistoryCard 99L + OpsOverviewCard 77L + KubernetesClusterCard 97L)，主文件改为 barrel re-export 保持向后兼容，tsc -b=0，npm build✓，ESLint=0/0/0，go build=0，17/17 测试通过） | P0 | **done** |
 
 ---
 
diff --git a/frontend/src/components/dashboard/DashboardRecent.tsx b/frontend/src/components/dashboard/DashboardRecent.tsx
index 34d8bab..2a9f3aa 100644
--- a/frontend/src/components/dashboard/DashboardRecent.tsx
+++ b/frontend/src/components/dashboard/DashboardRecent.tsx
@@ -1,518 +1,25 @@
-import { useNavigate } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import {
-  Rocket,
-  AlertTriangle,
-  ArrowRight,
-  Cloud,
-  Shield,
-  Clock3,
-  Globe,
-  Database,
-  Server,
-  Monitor,
-  Activity,
-} from 'lucide-react';
-import { cn } from '@/lib/utils';
-import type { AlertEventRecord, CertExpiryRecord } from '@/types';
-
-/** 仪表盘卡片数据类型 — 与 Dashboard API 响应对齐 */
-export interface DashboardRelease {
-  id: number | string;
-  status: string;
-  app_name: string;
-  version: string;
-  environment?: string;
-  commit_id?: string;
-  [key: string]: unknown;
-}
-
-export interface DashboardCluster {
-  id: number | string;
-  code?: string;
-  name: string;
-  status: string;
-  cpu_usage?: number;
-  memory_usage?: number;
-  node_count?: number;
-  pod_count?: number;
-  ingress_count?: number;
-  deployment_count?: number;
-  service_count?: number;
-  [key: string]: unknown;
-}
-
-export interface DashboardAutomationStats {
-  cron_job_count?: number;
-  script_count?: number;
-  today_executions?: number;
-  success_rate?: number;
-}
-
-export interface DashboardOpsStats {
-  domain_count?: number;
-  site_task_count?: number;
-  middleware_count?: number;
-  snmp_device_count?: number;
-  monitor_target_count?: number;
-}
-
-export interface DashboardPipelineStats {
-  today_count?: number;
-  success?: number;
-  failed?: number;
-  running?: number;
-}
-
 /**
- * DashboardRecent - 优化后的仪表盘底部卡片组件
- * 
- * 优化点：
- * 1. 使用 dg-card 工具类替代硬编码的 slate 颜色
- * 2. 统一的状态指示器样式
- * 3. 更好的 hover 效果和过渡动画
- * 4. ScrollArea 使用 scrollbar-thin 类
- * 5. 空状态显示更友好
+ * DashboardRecent — barrel re-export
+ *
+ * 原始 518L 单文件拆分为 dashboard-recent/ 目录下独立文件:
+ * - types.ts: DashboardRelease / DashboardCluster / DashboardAutomationStats / DashboardOpsStats / DashboardPipelineStats
+ * - shared-components.tsx: StatusDot / SeverityBadge
+ * - AlertMessagesCard.tsx: 告警消息卡片
+ * - CertificateExpiryCard.tsx: 证书到期卡片
+ * - ReleaseHistoryCard.tsx: 发布历史卡片
+ * - OpsOverviewCard.tsx: 运维概览卡片
+ * - KubernetesClusterCard.tsx: Kubernetes 集群卡片
  */
+export { AlertMessagesCard } from './dashboard-recent/AlertMessagesCard';
+export { CertificateExpiryCard } from './dashboard-recent/CertificateExpiryCard';
+export { ReleaseHistoryCard } from './dashboard-recent/ReleaseHistoryCard';
+export { OpsOverviewCard } from './dashboard-recent/OpsOverviewCard';
+export { KubernetesClusterCard } from './dashboard-recent/KubernetesClusterCard';
 
-// Status dot component
-function StatusDot({ severity }: { severity: string }) {
-  return (
-    <div
-      className={cn(
-        'w-2 h-2 rounded-full flex-shrink-0 mt-1.5',
-        severity === 'critical' && 'bg-[var(--dg-red)]',
-        severity === 'warning' && 'bg-[var(--dg-yellow)]',
-        severity === 'info' && 'bg-[var(--dg-blue)]',
-      )}
-    />
-  );
-}
-
-// Severity badge
-function SeverityBadge({ severity }: { severity: string }) {
-  const { t } = useTranslation();
-  return (
-    <Badge
-      variant="outline"
-      className={cn(
-        'text-xs font-medium',
-        severity === 'critical' && 'dg-badge-red border',
-        severity === 'warning' && 'dg-badge-yellow border',
-        severity === 'info' && 'dg-badge-blue border',
-      )}
-    >
-      {severity === 'critical' ? t('common.error') : severity === 'warning' ? t('common.warning') : t('common.info')}
-    </Badge>
-  );
-}
-
-export function AlertMessagesCard({ alerts }: { alerts: AlertEventRecord[] }) {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-  const recentAlerts = alerts.filter((a) => a.status === 'firing').slice(0, 8);
-
-  return (
-    <Card className="dg-card dg-card-hover">
-      <CardHeader className="pb-2">
-        <div className="flex items-center justify-between">
-          <div>
-            <CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.alerts.title')}</CardTitle>
-            <CardDescription className="text-[var(--dg-text-muted)]">{t('dashboard.alerts.description')}</CardDescription>
-          </div>
-          <Button
-            variant="ghost"
-            size="sm"
-            className="dg-btn-ghost text-xs"
-            onClick={() => navigate('/alerts')}
-          >
-            {t('dashboard.alerts.viewAll')}
-            <ArrowRight className="h-3.5 w-3.5 ml-1" />
-          </Button>
-        </div>
-      </CardHeader>
-      <CardContent>
-        <ScrollArea className="h-[320px] scrollbar-thin">
-          {recentAlerts.length === 0 ? (
-            <div className="flex flex-col items-center justify-center py-12 text-[var(--dg-text-muted)]">
-              <AlertTriangle className="h-10 w-10 mb-3 opacity-30" />
-              <p className="text-sm">{t('dashboard.alerts.empty')}</p>
-              <p className="text-xs mt-1 opacity-60">{t('dashboard.alerts.emptyHint')}</p>
-            </div>
-          ) : (
-            <div className="space-y-1.5 pr-2">
-              {recentAlerts.map((alert) => (
-                <div
-                  key={alert.id}
-                  className="flex items-start gap-3 p-3 rounded-lg bg-[var(--dg-bg-tertiary)]/50 hover:bg-[var(--dg-bg-hover)] transition-all duration-200 cursor-pointer group"
-                  onClick={() => navigate('/alert-center')}
-                >
-                  <StatusDot severity={alert.severity || 'info'} />
-                  <div className="flex-1 min-w-0">
-                    <div className="flex items-center gap-2 flex-wrap">
-                      <span className="text-sm font-medium text-[var(--dg-text-primary)] truncate">
-                        {alert.rule_name}
-                      </span>
-                      <SeverityBadge severity={alert.severity || 'info'} />
-                    </div>
-                    <p className="text-xs text-[var(--dg-text-muted)] mt-1">{alert.target}</p>
-                    <p className="text-xs text-[var(--dg-text-muted)]/70 line-clamp-1">{alert.message}</p>
-                  </div>
-                  <span className="text-[11px] text-[var(--dg-text-muted)]/50 whitespace-nowrap flex-shrink-0">
-                    {alert.created_at ? new Date(alert.created_at).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }) : ''}
-                  </span>
-                </div>
-              ))}
-            </div>
-          )}
-        </ScrollArea>
-      </CardContent>
-    </Card>
-  );
-}
-
-export function CertificateExpiryCard({ expCerts }: { expCerts: CertExpiryRecord[] }) {
-  const { t } = useTranslation();
-  const expiringDomains = (expCerts ?? [])
-    .map((d) => ({
-      ...d,
-      // eslint-disable-next-line react-hooks/purity
-      daysUntilExpiry: d.days_until_expiry ?? Math.ceil((new Date(d.expire_date).getTime() - Date.now()) / (1000 * 60 * 60 * 24)),
-    }))
-    .sort((a, b) => a.daysUntilExpiry - b.daysUntilExpiry);
-
-  const criticalCount = expiringDomains.filter((d) => d.daysUntilExpiry < 30).length;
-  const warningCount = expiringDomains.filter((d) => d.daysUntilExpiry >= 30 && d.daysUntilExpiry < 60).length;
-
-  return (
-    <Card className="dg-card dg-card-hover">
-      <CardHeader className="pb-2">
-        <div className="flex items-center justify-between flex-wrap gap-2">
-          <div>
-            <CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.certificates.title')}</CardTitle>
-            <CardDescription className="text-[var(--dg-text-muted)]">{t('dashboard.certificates.description')}</CardDescription>
-          </div>
-          <div className="flex items-center gap-2">
-            {criticalCount > 0 && (
-              <Badge className="dg-badge-red border">
-                <AlertTriangle className="h-3 w-3 mr-1" />
-                {criticalCount} {t('dashboard.certificates.expiringSoon')}
-              </Badge>
-            )}
-            {warningCount > 0 && (
-              <Badge className="dg-badge-yellow border">
-                {warningCount} {t('dashboard.certificates.expiringIn30Days')}
-              </Badge>
-            )}
-          </div>
-        </div>
-      </CardHeader>
-      <CardContent>
-        <ScrollArea className="h-[280px] scrollbar-thin">
-          {expiringDomains.length === 0 ? (
-            <div className="flex flex-col items-center justify-center py-10 text-[var(--dg-text-muted)]">
-              <Shield className="h-10 w-10 mb-3 opacity-30" />
-              <p className="text-sm">{t('dashboard.certificates.empty')}</p>
-            </div>
-          ) : (
-            <div className="space-y-1.5 pr-2">
-              {expiringDomains.map((domain) => (
-                <div
-                  key={domain.id}
-                  className="flex items-center justify-between p-3 rounded-lg bg-[var(--dg-bg-tertiary)]/50 hover:bg-[var(--dg-bg-hover)] transition-all duration-200"
-                >
-                  <div className="flex items-center gap-3 min-w-0">
-                    <div
-                      className={cn(
-                        'w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0',
-                        domain.daysUntilExpiry < 30 ? 'bg-[var(--dg-red)]/10' :
-                        domain.daysUntilExpiry < 60 ? 'bg-[var(--dg-yellow)]/10' :
-                        'bg-[var(--dg-green)]/10'
-                      )}
-                    >
-                      <Shield className={cn(
-                        'h-4 w-4',
-                        domain.daysUntilExpiry < 30 ? 'text-[var(--dg-red)]' :
-                        domain.daysUntilExpiry < 60 ? 'text-[var(--dg-yellow)]' :
-                        'text-[var(--dg-green)]'
-                      )} />
-                    </div>
-                    <div className="min-w-0">
-                      <p className="text-sm font-medium text-[var(--dg-text-primary)] truncate">{domain.name}</p>
-                      <p className="text-xs text-[var(--dg-text-muted)]">{t('dashboard.certificates.expireDate')}: {domain.expire_date?.substring(0, 10)}</p>
-                    </div>
-                  </div>
-                  <Badge
-                    variant="outline"
-                    className={cn(
-                      'text-xs flex-shrink-0',
-                      domain.daysUntilExpiry < 30 ? 'dg-badge-red border' :
-                      domain.daysUntilExpiry < 60 ? 'dg-badge-yellow border' :
-                      'dg-badge-green border'
-                    )}
-                  >
-                    {domain.daysUntilExpiry < 0 ? t('dashboard.certificates.expired') : `${domain.daysUntilExpiry} ${t('dashboard.certificates.days')}`}
-                  </Badge>
-                </div>
-              ))}
-            </div>
-          )}
-        </ScrollArea>
-      </CardContent>
-    </Card>
-  );
-}
-
-export function ReleaseHistoryCard({ releases }: { releases: DashboardRelease[] }) {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-  const releaseList = releases?.slice(0, 5) ?? [];
-
-  return (
-    <Card className="dg-card dg-card-hover">
-      <CardHeader className="pb-2">
-        <div className="flex items-center justify-between">
-          <div>
-            <CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.releases.title')}</CardTitle>
-            <CardDescription className="text-[var(--dg-text-muted)]">{t('dashboard.releases.description')}</CardDescription>
-          </div>
-          <Button
-            variant="ghost"
-            size="sm"
-            className="dg-btn-ghost text-xs"
-            onClick={() => navigate('/pipelines')}
-          >
-            {t('dashboard.releases.viewAll')}
-            <ArrowRight className="h-3.5 w-3.5 ml-1" />
-          </Button>
-        </div>
-      </CardHeader>
-      <CardContent>
-        {releaseList.length === 0 ? (
-          <div className="flex flex-col items-center justify-center py-10 text-[var(--dg-text-muted)]">
-            <Rocket className="h-10 w-10 mb-3 opacity-30" />
-            <p className="text-sm">{t('dashboard.releases.empty')}</p>
-          </div>
-        ) : (
-          <div className="space-y-2">
-            {releaseList.map((release) => (
-              <div
-                key={release.id}
-                className="flex items-center gap-3 p-3 rounded-lg bg-[var(--dg-bg-tertiary)]/50 hover:bg-[var(--dg-bg-hover)] transition-all duration-200"
-              >
-                <div
-                  className={cn(
-                    'w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0',
-                    release.status === 'success' ? 'bg-[var(--dg-green)]/10' :
-                    release.status === 'failed' ? 'bg-[var(--dg-red)]/10' :
-                    release.status === 'deploying' ? 'bg-[var(--dg-blue)]/10' :
-                    'bg-[var(--dg-yellow)]/10'
-                  )}
-                >
-                  <Rocket className={cn(
-                    'h-4 w-4',
-                    release.status === 'success' ? 'text-[var(--dg-green)]' :
-                    release.status === 'failed' ? 'text-[var(--dg-red)]' :
-                    release.status === 'deploying' ? 'text-[var(--dg-blue)]' :
-                    'text-[var(--dg-yellow)]'
-                  )} />
-                </div>
-                <div className="flex-1 min-w-0">
-                  <div className="flex items-center gap-2">
-                    <span className="text-sm font-medium text-[var(--dg-text-primary)] truncate">{release.app_name}</span>
-                    <Badge variant="outline" className="text-xs border-[var(--dg-border)] text-[var(--dg-text-muted)] flex-shrink-0">
-                      {release.version}
-                    </Badge>
-                  </div>
-                  <div className="flex items-center gap-2 mt-0.5">
-                    <span className="text-xs text-[var(--dg-text-muted)]">{release.environment}</span>
-                    <span className="text-xs text-[var(--dg-border)]">·</span>
-                    <span className="text-xs text-[var(--dg-text-muted)] truncate">{release.commit_id}</span>
-                  </div>
-                </div>
-                <Badge
-                  variant="outline"
-                  className={cn(
-                    'text-xs flex-shrink-0',
-                    release.status === 'success' ? 'dg-badge-green border' :
-                    release.status === 'failed' ? 'dg-badge-red border' :
-                    release.status === 'deploying' ? 'dg-badge-blue border' :
-                    'dg-badge-yellow border'
-                  )}
-                >
-                  {release.status === 'success' ? t('dashboard.releases.success') :
-                   release.status === 'failed' ? t('dashboard.releases.failed') :
-                   release.status === 'deploying' ? t('dashboard.releases.deploying') :
-                   release.status === 'rolled_back' ? t('dashboard.releases.rolledBack') : t('dashboard.releases.building')}
-                </Badge>
-              </div>
-            ))}
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  );
-}
-
-/** 运维概览 — 资产 / 监控 / 任务快捷入口 // Logan.Li */
-export function OpsOverviewCard({
-  automation,
-  ops,
-  serverCount,
-  hostMonitorCount,
-  firingAlerts,
-}: {
-  automation?: DashboardAutomationStats;
-  ops?: DashboardOpsStats;
-  serverCount?: number;
-  hostMonitorCount?: number;
-  firingAlerts?: number;
-}) {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-
-  const tiles = [
-    { key: 'servers', label: t('dashboard.ops.servers'), value: serverCount ?? 0, icon: Server, path: '/servers', color: 'text-[var(--dg-blue)]' },
-    { key: 'domains', label: t('dashboard.ops.domains'), value: ops?.domain_count ?? 0, icon: Globe, path: '/domains', color: 'text-[var(--dg-cyan)]' },
-    { key: 'host', label: t('dashboard.ops.hostMonitor'), value: hostMonitorCount ?? serverCount ?? 0, icon: Monitor, path: '/host-monitor', color: 'text-[var(--dg-green)]' },
-    { key: 'mw', label: t('dashboard.ops.middleware'), value: ops?.middleware_count ?? 0, icon: Database, path: '/monitor-center?tab=middleware', color: 'text-[var(--dg-red)]' },
-    { key: 'site', label: t('dashboard.ops.siteProbes'), value: ops?.site_task_count ?? 0, icon: Activity, path: '/monitor-center?tab=site', color: 'text-[var(--dg-yellow)]' },
-    { key: 'cron', label: t('dashboard.ops.cronJobs'), value: automation?.cron_job_count ?? 0, icon: Clock3, path: '/cronjobs', color: 'text-[var(--dg-purple)]' },
-  ];
-
-  return (
-    <Card className="dg-card dg-card-hover">
-      <CardHeader className="pb-2">
-        <div className="flex items-center justify-between">
-          <div>
-            <CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.ops.title')}</CardTitle>
-            <CardDescription className="text-[var(--dg-text-muted)]">{t('dashboard.ops.description')}</CardDescription>
-          </div>
-          <Button variant="ghost" size="sm" className="dg-btn-ghost text-xs" onClick={() => navigate('/ai-agent-cli')}>
-            {t('menu.aiAgentCli')}
-            <ArrowRight className="h-3.5 w-3.5 ml-1" />
-          </Button>
-        </div>
-      </CardHeader>
-      <CardContent>
-        <div className="grid grid-cols-2 sm:grid-cols-3 gap-2 mb-3">
-          {tiles.map((tile) => (
-            <button
-              key={tile.key}
-              type="button"
-              onClick={() => navigate(tile.path)}
-              className="flex items-center gap-2.5 p-2.5 rounded-xl bg-[var(--dg-bg-tertiary)]/50 hover:bg-[var(--dg-bg-hover)] transition-all text-left"
-            >
-              <tile.icon className={cn('h-4 w-4 shrink-0', tile.color)} />
-              <div className="min-w-0">
-                <div className="text-base font-bold text-[var(--dg-text-primary)] leading-none">{tile.value}</div>
-                <div className="text-[10px] text-[var(--dg-text-muted)] mt-0.5 truncate">{tile.label}</div>
-              </div>
-            </button>
-          ))}
-        </div>
-        <div className="flex items-center justify-between text-xs px-1 pt-1 border-t border-[var(--dg-border)]">
-          <span className="text-[var(--dg-text-muted)]">
-            {t('dashboard.ops.todayExecutions')}: <span className="text-[var(--dg-text-primary)] font-medium">{automation?.today_executions ?? 0}</span>
-          </span>
-          <button type="button" className="text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)]" onClick={() => navigate('/alert-center')}>
-            {t('dashboard.ops.firingAlerts')}: <span className={cn('font-medium', (firingAlerts ?? 0) > 0 ? 'text-[var(--dg-red)]' : 'text-[var(--dg-text-primary)]')}>{firingAlerts ?? 0}</span>
-          </button>
-        </div>
-      </CardContent>
-    </Card>
-  );
-}
-
-export function KubernetesClusterCard({ clusters }: { clusters: DashboardCluster[] }) {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-
-  return (
-    <Card className="dg-card dg-card-hover">
-      <CardHeader className="pb-2">
-        <div className="flex items-center justify-between">
-          <div>
-            <CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.clusters.title')}</CardTitle>
-            <CardDescription className="text-[var(--dg-text-muted)]">{t('dashboard.clusters.description')}</CardDescription>
-          </div>
-          <Button
-            variant="ghost"
-            size="sm"
-            className="dg-btn-ghost text-xs"
-            onClick={() => navigate('/kubernetes')}
-          >
-            {t('dashboard.clusters.viewAll')}
-            <ArrowRight className="h-3.5 w-3.5 ml-1" />
-          </Button>
-        </div>
-      </CardHeader>
-      <CardContent>
-        {clusters.length === 0 ? (
-          <div className="flex flex-col items-center justify-center py-10 text-[var(--dg-text-muted)]">
-            <Cloud className="h-10 w-10 mb-3 opacity-30" />
-            <p className="text-sm">{t('dashboard.clusters.empty')}</p>
-          </div>
-        ) : (
-          <div className="space-y-3">
-            {clusters.map((cluster) => {
-              const cpuUsage = Number(cluster.cpu_usage ?? 0);
-              const memoryUsage = Number(cluster.memory_usage ?? 0);
-              const hasUsage = cpuUsage > 0 || memoryUsage > 0;
-              const metrics = hasUsage
-                ? [
-                    { label: t('dashboard.clusters.nodes'), value: cluster.node_count ?? 0 },
-                    { label: t('dashboard.clusters.pods'), value: cluster.pod_count ?? 0 },
-                    { label: t('dashboard.clusters.cpu'), value: `${cpuUsage.toFixed(1)}%` },
-                    { label: t('dashboard.clusters.memory'), value: `${memoryUsage.toFixed(1)}%` },
-                  ]
-                : [
-                    { label: t('dashboard.clusters.nodes'), value: cluster.node_count ?? 0 },
-                    { label: t('dashboard.clusters.pods'), value: cluster.pod_count ?? 0 },
-                    { label: t('dashboard.clusters.ingress'), value: cluster.ingress_count ?? 0 },
-                    { label: t('dashboard.clusters.deployments'), value: cluster.deployment_count ?? 0 },
-                  ];
-              return (
-                <div
-                  key={cluster.id}
-                  className="p-3.5 rounded-xl bg-[var(--dg-bg-tertiary)]/50 hover:bg-[var(--dg-bg-hover)] transition-all duration-200 cursor-pointer"
-                  onClick={() => navigate(`/kubernetes/${cluster.code || cluster.id}`)}
-                >
-                  <div className="flex items-center justify-between mb-3">
-                    <div className="flex items-center gap-2.5">
-                      <Cloud className="h-4.5 w-4.5 text-[var(--dg-blue)]" />
-                      <span className="text-sm font-semibold text-[var(--dg-text-primary)]">{cluster.name}</span>
-                    </div>
-                    <Badge
-                      variant="outline"
-                      className={cn(
-                        'text-xs',
-                        cluster.status === 'healthy' ? 'dg-badge-green border' :
-                        cluster.status === 'warning' ? 'dg-badge-yellow border' :
-                        'dg-badge-red border'
-                      )}
-                    >
-                      {cluster.status === 'healthy' ? t('dashboard.clusters.healthy') : cluster.status === 'warning' ? t('dashboard.clusters.warning') : t('dashboard.clusters.error')}
-                    </Badge>
-                  </div>
-                  <div className="grid grid-cols-4 gap-2 text-center">
-                    {metrics.map((item) => (
-                      <div key={item.label} className="p-1.5 rounded-lg bg-[var(--dg-bg-primary)]/50">
-                        <div className="text-sm font-semibold text-[var(--dg-text-primary)]">{item.value}</div>
-                        <div className="text-[10px] text-[var(--dg-text-muted)] mt-0.5">{item.label}</div>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  );
-}
+export type {
+  DashboardRelease,
+  DashboardCluster,
+  DashboardAutomationStats,
+  DashboardOpsStats,
+  DashboardPipelineStats,
+} from './dashboard-recent/types';
diff --git a/frontend/src/components/dashboard/dashboard-recent/AlertMessagesCard.tsx b/frontend/src/components/dashboard/dashboard-recent/AlertMessagesCard.tsx
new file mode 100644
index 0000000..15e62c7
--- /dev/null
+++ b/frontend/src/components/dashboard/dashboard-recent/AlertMessagesCard.tsx
@@ -0,0 +1,72 @@
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { AlertTriangle, ArrowRight } from 'lucide-react';
+import type { AlertEventRecord } from '@/types';
+import { StatusDot, SeverityBadge } from './shared-components';
+
+export function AlertMessagesCard({ alerts }: { alerts: AlertEventRecord[] }) {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const recentAlerts = alerts.filter((a) => a.status === 'firing').slice(0, 8);
+
+  return (
+    <Card className="dg-card dg-card-hover">
+      <CardHeader className="pb-2">
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.alerts.title')}</CardTitle>
+            <CardDescription className="text-[var(--dg-text-muted)]">{t('dashboard.alerts.description')}</CardDescription>
+          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="dg-btn-ghost text-xs"
+            onClick={() => navigate('/alerts')}
+          >
+            {t('dashboard.alerts.viewAll')}
+            <ArrowRight className="h-3.5 w-3.5 ml-1" />
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <ScrollArea className="h-[320px] scrollbar-thin">
+          {recentAlerts.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-12 text-[var(--dg-text-muted)]">
+              <AlertTriangle className="h-10 w-10 mb-3 opacity-30" />
+              <p className="text-sm">{t('dashboard.alerts.empty')}</p>
+              <p className="text-xs mt-1 opacity-60">{t('dashboard.alerts.emptyHint')}</p>
+            </div>
+          ) : (
+            <div className="space-y-1.5 pr-2">
+              {recentAlerts.map((alert) => (
+                <div
+                  key={alert.id}
+                  className="flex items-start gap-3 p-3 rounded-lg bg-[var(--dg-bg-tertiary)]/50 hover:bg-[var(--dg-bg-hover)] transition-all duration-200 cursor-pointer group"
+                  onClick={() => navigate('/alert-center')}
+                >
+                  <StatusDot severity={alert.severity || 'info'} />
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2 flex-wrap">
+                      <span className="text-sm font-medium text-[var(--dg-text-primary)] truncate">
+                        {alert.rule_name}
+                      </span>
+                      <SeverityBadge severity={alert.severity || 'info'} />
+                    </div>
+                    <p className="text-xs text-[var(--dg-text-muted)] mt-1">{alert.target}</p>
+                    <p className="text-xs text-[var(--dg-text-muted)]/70 line-clamp-1">{alert.message}</p>
+                  </div>
+                  <span className="text-[11px] text-[var(--dg-text-muted)]/50 whitespace-nowrap flex-shrink-0">
+                    {alert.created_at ? new Date(alert.created_at).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }) : ''}
+                  </span>
+                </div>
+              ))}
+            </div>
+          )}
+        </ScrollArea>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/frontend/src/components/dashboard/dashboard-recent/CertificateExpiryCard.tsx b/frontend/src/components/dashboard/dashboard-recent/CertificateExpiryCard.tsx
new file mode 100644
index 0000000..f921768
--- /dev/null
+++ b/frontend/src/components/dashboard/dashboard-recent/CertificateExpiryCard.tsx
@@ -0,0 +1,99 @@
+import { useTranslation } from 'react-i18next';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { AlertTriangle, Shield } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { CertExpiryRecord } from '@/types';
+
+export function CertificateExpiryCard({ expCerts }: { expCerts: CertExpiryRecord[] }) {
+  const { t } = useTranslation();
+  const expiringDomains = (expCerts ?? [])
+    .map((d) => ({
+      ...d,
+      // eslint-disable-next-line react-hooks/purity
+      daysUntilExpiry: d.days_until_expiry ?? Math.ceil((new Date(d.expire_date).getTime() - Date.now()) / (1000 * 60 * 60 * 24)),
+    }))
+    .sort((a, b) => a.daysUntilExpiry - b.daysUntilExpiry);
+
+  const criticalCount = expiringDomains.filter((d) => d.daysUntilExpiry < 30).length;
+  const warningCount = expiringDomains.filter((d) => d.daysUntilExpiry >= 30 && d.daysUntilExpiry < 60).length;
+
+  return (
+    <Card className="dg-card dg-card-hover">
+      <CardHeader className="pb-2">
+        <div className="flex items-center justify-between flex-wrap gap-2">
+          <div>
+            <CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.certificates.title')}</CardTitle>
+            <CardDescription className="text-[var(--dg-text-muted)]">{t('dashboard.certificates.description')}</CardDescription>
+          </div>
+          <div className="flex items-center gap-2">
+            {criticalCount > 0 && (
+              <Badge className="dg-badge-red border">
+                <AlertTriangle className="h-3 w-3 mr-1" />
+                {criticalCount} {t('dashboard.certificates.expiringSoon')}
+              </Badge>
+            )}
+            {warningCount > 0 && (
+              <Badge className="dg-badge-yellow border">
+                {warningCount} {t('dashboard.certificates.expiringIn30Days')}
+              </Badge>
+            )}
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <ScrollArea className="h-[280px] scrollbar-thin">
+          {expiringDomains.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-10 text-[var(--dg-text-muted)]">
+              <Shield className="h-10 w-10 mb-3 opacity-30" />
+              <p className="text-sm">{t('dashboard.certificates.empty')}</p>
+            </div>
+          ) : (
+            <div className="space-y-1.5 pr-2">
+              {expiringDomains.map((domain) => (
+                <div
+                  key={domain.id}
+                  className="flex items-center justify-between p-3 rounded-lg bg-[var(--dg-bg-tertiary)]/50 hover:bg-[var(--dg-bg-hover)] transition-all duration-200"
+                >
+                  <div className="flex items-center gap-3 min-w-0">
+                    <div
+                      className={cn(
+                        'w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0',
+                        domain.daysUntilExpiry < 30 ? 'bg-[var(--dg-red)]/10' :
+                        domain.daysUntilExpiry < 60 ? 'bg-[var(--dg-yellow)]/10' :
+                        'bg-[var(--dg-green)]/10'
+                      )}
+                    >
+                      <Shield className={cn(
+                        'h-4 w-4',
+                        domain.daysUntilExpiry < 30 ? 'text-[var(--dg-red)]' :
+                        domain.daysUntilExpiry < 60 ? 'text-[var(--dg-yellow)]' :
+                        'text-[var(--dg-green)]'
+                      )} />
+                    </div>
+                    <div className="min-w-0">
+                      <p className="text-sm font-medium text-[var(--dg-text-primary)] truncate">{domain.name}</p>
+                      <p className="text-xs text-[var(--dg-text-muted)]">{t('dashboard.certificates.expireDate')}: {domain.expire_date?.substring(0, 10)}</p>
+                    </div>
+                  </div>
+                  <Badge
+                    variant="outline"
+                    className={cn(
+                      'text-xs flex-shrink-0',
+                      domain.daysUntilExpiry < 30 ? 'dg-badge-red border' :
+                      domain.daysUntilExpiry < 60 ? 'dg-badge-yellow border' :
+                      'dg-badge-green border'
+                    )}
+                  >
+                    {domain.daysUntilExpiry < 0 ? t('dashboard.certificates.expired') : `${domain.daysUntilExpiry} ${t('dashboard.certificates.days')}`}
+                  </Badge>
+                </div>
+              ))}
+            </div>
+          )}
+        </ScrollArea>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/frontend/src/components/dashboard/dashboard-recent/KubernetesClusterCard.tsx b/frontend/src/components/dashboard/dashboard-recent/KubernetesClusterCard.tsx
new file mode 100644
index 0000000..eb7b8a1
--- /dev/null
+++ b/frontend/src/components/dashboard/dashboard-recent/KubernetesClusterCard.tsx
@@ -0,0 +1,97 @@
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Cloud, ArrowRight } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { DashboardCluster } from './types';
+
+export function KubernetesClusterCard({ clusters }: { clusters: DashboardCluster[] }) {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  return (
+    <Card className="dg-card dg-card-hover">
+      <CardHeader className="pb-2">
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.clusters.title')}</CardTitle>
+            <CardDescription className="text-[var(--dg-text-muted)]">{t('dashboard.clusters.description')}</CardDescription>
+          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="dg-btn-ghost text-xs"
+            onClick={() => navigate('/kubernetes')}
+          >
+            {t('dashboard.clusters.viewAll')}
+            <ArrowRight className="h-3.5 w-3.5 ml-1" />
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent>
+        {clusters.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-10 text-[var(--dg-text-muted)]">
+            <Cloud className="h-10 w-10 mb-3 opacity-30" />
+            <p className="text-sm">{t('dashboard.clusters.empty')}</p>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {clusters.map((cluster) => {
+              const cpuUsage = Number(cluster.cpu_usage ?? 0);
+              const memoryUsage = Number(cluster.memory_usage ?? 0);
+              const hasUsage = cpuUsage > 0 || memoryUsage > 0;
+              const metrics = hasUsage
+                ? [
+                    { label: t('dashboard.clusters.nodes'), value: cluster.node_count ?? 0 },
+                    { label: t('dashboard.clusters.pods'), value: cluster.pod_count ?? 0 },
+                    { label: t('dashboard.clusters.cpu'), value: `${cpuUsage.toFixed(1)}%` },
+                    { label: t('dashboard.clusters.memory'), value: `${memoryUsage.toFixed(1)}%` },
+                  ]
+                : [
+                    { label: t('dashboard.clusters.nodes'), value: cluster.node_count ?? 0 },
+                    { label: t('dashboard.clusters.pods'), value: cluster.pod_count ?? 0 },
+                    { label: t('dashboard.clusters.ingress'), value: cluster.ingress_count ?? 0 },
+                    { label: t('dashboard.clusters.deployments'), value: cluster.deployment_count ?? 0 },
+                  ];
+              return (
+                <div
+                  key={cluster.id}
+                  className="p-3.5 rounded-xl bg-[var(--dg-bg-tertiary)]/50 hover:bg-[var(--dg-bg-hover)] transition-all duration-200 cursor-pointer"
+                  onClick={() => navigate(`/kubernetes/${cluster.code || cluster.id}`)}
+                >
+                  <div className="flex items-center justify-between mb-3">
+                    <div className="flex items-center gap-2.5">
+                      <Cloud className="h-4.5 w-4.5 text-[var(--dg-blue)]" />
+                      <span className="text-sm font-semibold text-[var(--dg-text-primary)]">{cluster.name}</span>
+                    </div>
+                    <Badge
+                      variant="outline"
+                      className={cn(
+                        'text-xs',
+                        cluster.status === 'healthy' ? 'dg-badge-green border' :
+                        cluster.status === 'warning' ? 'dg-badge-yellow border' :
+                        'dg-badge-red border'
+                      )}
+                    >
+                      {cluster.status === 'healthy' ? t('dashboard.clusters.healthy') : cluster.status === 'warning' ? t('dashboard.clusters.warning') : t('dashboard.clusters.error')}
+                    </Badge>
+                  </div>
+                  <div className="grid grid-cols-4 gap-2 text-center">
+                    {metrics.map((item) => (
+                      <div key={item.label} className="p-1.5 rounded-lg bg-[var(--dg-bg-primary)]/50">
+                        <div className="text-sm font-semibold text-[var(--dg-text-primary)]">{item.value}</div>
+                        <div className="text-[10px] text-[var(--dg-text-muted)] mt-0.5">{item.label}</div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/frontend/src/components/dashboard/dashboard-recent/OpsOverviewCard.tsx b/frontend/src/components/dashboard/dashboard-recent/OpsOverviewCard.tsx
new file mode 100644
index 0000000..8466f9f
--- /dev/null
+++ b/frontend/src/components/dashboard/dashboard-recent/OpsOverviewCard.tsx
@@ -0,0 +1,77 @@
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { ArrowRight, Clock3, Globe, Database, Server, Monitor, Activity } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { DashboardAutomationStats, DashboardOpsStats } from './types';
+
+/** 运维概览 — 资产 / 监控 / 任务快捷入口 */
+export function OpsOverviewCard({
+  automation,
+  ops,
+  serverCount,
+  hostMonitorCount,
+  firingAlerts,
+}: {
+  automation?: DashboardAutomationStats;
+  ops?: DashboardOpsStats;
+  serverCount?: number;
+  hostMonitorCount?: number;
+  firingAlerts?: number;
+}) {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  const tiles = [
+    { key: 'servers', label: t('dashboard.ops.servers'), value: serverCount ?? 0, icon: Server, path: '/servers', color: 'text-[var(--dg-blue)]' },
+    { key: 'domains', label: t('dashboard.ops.domains'), value: ops?.domain_count ?? 0, icon: Globe, path: '/domains', color: 'text-[var(--dg-cyan)]' },
+    { key: 'host', label: t('dashboard.ops.hostMonitor'), value: hostMonitorCount ?? serverCount ?? 0, icon: Monitor, path: '/host-monitor', color: 'text-[var(--dg-green)]' },
+    { key: 'mw', label: t('dashboard.ops.middleware'), value: ops?.middleware_count ?? 0, icon: Database, path: '/monitor-center?tab=middleware', color: 'text-[var(--dg-red)]' },
+    { key: 'site', label: t('dashboard.ops.siteProbes'), value: ops?.site_task_count ?? 0, icon: Activity, path: '/monitor-center?tab=site', color: 'text-[var(--dg-yellow)]' },
+    { key: 'cron', label: t('dashboard.ops.cronJobs'), value: automation?.cron_job_count ?? 0, icon: Clock3, path: '/cronjobs', color: 'text-[var(--dg-purple)]' },
+  ];
+
+  return (
+    <Card className="dg-card dg-card-hover">
+      <CardHeader className="pb-2">
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.ops.title')}</CardTitle>
+            <CardDescription className="text-[var(--dg-text-muted)]">{t('dashboard.ops.description')}</CardDescription>
+          </div>
+          <Button variant="ghost" size="sm" className="dg-btn-ghost text-xs" onClick={() => navigate('/ai-agent-cli')}>
+            {t('menu.aiAgentCli')}
+            <ArrowRight className="h-3.5 w-3.5 ml-1" />
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="grid grid-cols-2 sm:grid-cols-3 gap-2 mb-3">
+          {tiles.map((tile) => (
+            <button
+              key={tile.key}
+              type="button"
+              onClick={() => navigate(tile.path)}
+              className="flex items-center gap-2.5 p-2.5 rounded-xl bg-[var(--dg-bg-tertiary)]/50 hover:bg-[var(--dg-bg-hover)] transition-all text-left"
+            >
+              <tile.icon className={cn('h-4 w-4 shrink-0', tile.color)} />
+              <div className="min-w-0">
+                <div className="text-base font-bold text-[var(--dg-text-primary)] leading-none">{tile.value}</div>
+                <div className="text-[10px] text-[var(--dg-text-muted)] mt-0.5 truncate">{tile.label}</div>
+              </div>
+            </button>
+          ))}
+        </div>
+        <div className="flex items-center justify-between text-xs px-1 pt-1 border-t border-[var(--dg-border)]">
+          <span className="text-[var(--dg-text-muted)]">
+            {t('dashboard.ops.todayExecutions')}: <span className="text-[var(--dg-text-primary)] font-medium">{automation?.today_executions ?? 0}</span>
+          </span>
+          <button type="button" className="text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)]" onClick={() => navigate('/alert-center')}>
+            {t('dashboard.ops.firingAlerts')}: <span className={cn('font-medium', (firingAlerts ?? 0) > 0 ? 'text-[var(--dg-red)]' : 'text-[var(--dg-text-primary)]')}>{firingAlerts ?? 0}</span>
+          </button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/frontend/src/components/dashboard/dashboard-recent/ReleaseHistoryCard.tsx b/frontend/src/components/dashboard/dashboard-recent/ReleaseHistoryCard.tsx
new file mode 100644
index 0000000..85549e8
--- /dev/null
+++ b/frontend/src/components/dashboard/dashboard-recent/ReleaseHistoryCard.tsx
@@ -0,0 +1,99 @@
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Rocket, ArrowRight } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { DashboardRelease } from './types';
+
+export function ReleaseHistoryCard({ releases }: { releases: DashboardRelease[] }) {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const releaseList = releases?.slice(0, 5) ?? [];
+
+  return (
+    <Card className="dg-card dg-card-hover">
+      <CardHeader className="pb-2">
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.releases.title')}</CardTitle>
+            <CardDescription className="text-[var(--dg-text-muted)]">{t('dashboard.releases.description')}</CardDescription>
+          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="dg-btn-ghost text-xs"
+            onClick={() => navigate('/pipelines')}
+          >
+            {t('dashboard.releases.viewAll')}
+            <ArrowRight className="h-3.5 w-3.5 ml-1" />
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent>
+        {releaseList.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-10 text-[var(--dg-text-muted)]">
+            <Rocket className="h-10 w-10 mb-3 opacity-30" />
+            <p className="text-sm">{t('dashboard.releases.empty')}</p>
+          </div>
+        ) : (
+          <div className="space-y-2">
+            {releaseList.map((release) => (
+              <div
+                key={release.id}
+                className="flex items-center gap-3 p-3 rounded-lg bg-[var(--dg-bg-tertiary)]/50 hover:bg-[var(--dg-bg-hover)] transition-all duration-200"
+              >
+                <div
+                  className={cn(
+                    'w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0',
+                    release.status === 'success' ? 'bg-[var(--dg-green)]/10' :
+                    release.status === 'failed' ? 'bg-[var(--dg-red)]/10' :
+                    release.status === 'deploying' ? 'bg-[var(--dg-blue)]/10' :
+                    'bg-[var(--dg-yellow)]/10'
+                  )}
+                >
+                  <Rocket className={cn(
+                    'h-4 w-4',
+                    release.status === 'success' ? 'text-[var(--dg-green)]' :
+                    release.status === 'failed' ? 'text-[var(--dg-red)]' :
+                    release.status === 'deploying' ? 'text-[var(--dg-blue)]' :
+                    'text-[var(--dg-yellow)]'
+                  )} />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm font-medium text-[var(--dg-text-primary)] truncate">{release.app_name}</span>
+                    <Badge variant="outline" className="text-xs border-[var(--dg-border)] text-[var(--dg-text-muted)] flex-shrink-0">
+                      {release.version}
+                    </Badge>
+                  </div>
+                  <div className="flex items-center gap-2 mt-0.5">
+                    <span className="text-xs text-[var(--dg-text-muted)]">{release.environment}</span>
+                    <span className="text-xs text-[var(--dg-border)]">·</span>
+                    <span className="text-xs text-[var(--dg-text-muted)] truncate">{release.commit_id}</span>
+                  </div>
+                </div>
+                <Badge
+                  variant="outline"
+                  className={cn(
+                    'text-xs flex-shrink-0',
+                    release.status === 'success' ? 'dg-badge-green border' :
+                    release.status === 'failed' ? 'dg-badge-red border' :
+                    release.status === 'deploying' ? 'dg-badge-blue border' :
+                    'dg-badge-yellow border'
+                  )}
+                >
+                  {release.status === 'success' ? t('dashboard.releases.success') :
+                   release.status === 'failed' ? t('dashboard.releases.failed') :
+                   release.status === 'deploying' ? t('dashboard.releases.deploying') :
+                   release.status === 'rolled_back' ? t('dashboard.releases.rolledBack') : t('dashboard.releases.building')}
+                </Badge>
+              </div>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/frontend/src/components/dashboard/dashboard-recent/shared-components.tsx b/frontend/src/components/dashboard/dashboard-recent/shared-components.tsx
new file mode 100644
index 0000000..e1e48ec
--- /dev/null
+++ b/frontend/src/components/dashboard/dashboard-recent/shared-components.tsx
@@ -0,0 +1,35 @@
+import { useTranslation } from 'react-i18next';
+import { Badge } from '@/components/ui/badge';
+import { cn } from '@/lib/utils';
+
+/** Status dot component */
+export function StatusDot({ severity }: { severity: string }) {
+  return (
+    <div
+      className={cn(
+        'w-2 h-2 rounded-full flex-shrink-0 mt-1.5',
+        severity === 'critical' && 'bg-[var(--dg-red)]',
+        severity === 'warning' && 'bg-[var(--dg-yellow)]',
+        severity === 'info' && 'bg-[var(--dg-blue)]',
+      )}
+    />
+  );
+}
+
+/** Severity badge */
+export function SeverityBadge({ severity }: { severity: string }) {
+  const { t } = useTranslation();
+  return (
+    <Badge
+      variant="outline"
+      className={cn(
+        'text-xs font-medium',
+        severity === 'critical' && 'dg-badge-red border',
+        severity === 'warning' && 'dg-badge-yellow border',
+        severity === 'info' && 'dg-badge-blue border',
+      )}
+    >
+      {severity === 'critical' ? t('common.error') : severity === 'warning' ? t('common.warning') : t('common.info')}
+    </Badge>
+  );
+}
diff --git a/frontend/src/components/dashboard/dashboard-recent/types.ts b/frontend/src/components/dashboard/dashboard-recent/types.ts
new file mode 100644
index 0000000..1c40bbc
--- /dev/null
+++ b/frontend/src/components/dashboard/dashboard-recent/types.ts
@@ -0,0 +1,48 @@
+/** Dashboard 卡片数据类型 — 与 Dashboard API 响应对齐 */
+
+export interface DashboardRelease {
+  id: number | string;
+  status: string;
+  app_name: string;
+  version: string;
+  environment?: string;
+  commit_id?: string;
+  [key: string]: unknown;
+}
+
+export interface DashboardCluster {
+  id: number | string;
+  code?: string;
+  name: string;
+  status: string;
+  cpu_usage?: number;
+  memory_usage?: number;
+  node_count?: number;
+  pod_count?: number;
+  ingress_count?: number;
+  deployment_count?: number;
+  service_count?: number;
+  [key: string]: unknown;
+}
+
+export interface DashboardAutomationStats {
+  cron_job_count?: number;
+  script_count?: number;
+  today_executions?: number;
+  success_rate?: number;
+}
+
+export interface DashboardOpsStats {
+  domain_count?: number;
+  site_task_count?: number;
+  middleware_count?: number;
+  snmp_device_count?: number;
+  monitor_target_count?: number;
+}
+
+export interface DashboardPipelineStats {
+  today_count?: number;
+  success?: number;
+  failed?: number;
+  running?: number;
+}