Initial commit: SQL audit platform v0.1.0

FastAPI backend with auth, user, instance, ticket, query, dashboard APIs.
React + TypeScript frontend with mock data UI (10 pages).
SQLite + async SQLAlchemy, JWT auth, role-based access control.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

frontend/src/pages/Dashboard.tsx

@@ -0,0 +1,330 @@
+import { useEffect, useRef, useState } from 'react';
+import {
+  ClipboardList, Clock, CheckCircle, AlertTriangle,
+  TrendingUp, TrendingDown, Database, Megaphone, ChevronRight,
+  X, AlertCircle, Info, Bell
+} from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { dashboardStats, dbInstances, statusMap, statusColorMap, dbTypeColorMap, tickets, announcements } from '@/lib/mock';
+import type { Announcement } from '@/lib/mock';
+import { useTheme } from '@/hooks/useTheme';
+import { useAuth } from '@/hooks/useAuth';
+import * as echarts from 'echarts';
+
+const priorityStyle: Record<string, { border: string; bg: string; icon: React.ElementType; iconColor: string; badge: string }> = {
+  urgent: { border: 'border-l-red-500', bg: 'bg-red-500/5', icon: AlertCircle, iconColor: 'text-red-400', badge: 'bg-red-500/15 text-red-400 border-red-500/30' },
+  high: { border: 'border-l-orange-500', bg: 'bg-orange-500/5', icon: AlertTriangle, iconColor: 'text-orange-400', badge: 'bg-orange-500/15 text-orange-400 border-orange-500/30' },
+  normal: { border: 'border-l-blue-500', bg: 'bg-blue-500/5', icon: Info, iconColor: 'text-blue-400', badge: 'bg-blue-500/15 text-blue-400 border-blue-500/30' },
+  low: { border: 'border-l-gray-500', bg: 'bg-gray-500/5', icon: Bell, iconColor: 'text-gray-400', badge: 'bg-gray-500/15 text-gray-400 border-gray-500/30' },
+};
+
+const priorityLabel: Record<string, string> = { urgent: '紧急', high: '重要', normal: '通知', low: '一般' };
+
+const stats = [
+  { title: '今日工单', value: dashboardStats.todayTickets, trend: dashboardStats.todayTicketsTrend, icon: ClipboardList, color: 'text-blue-400', bg: 'bg-blue-400/10' },
+  { title: '待审批', value: dashboardStats.pendingApproval, trend: dashboardStats.pendingTrend, icon: Clock, color: 'text-orange-400', bg: 'bg-orange-400/10' },
+  { title: '查询审计', value: dashboardStats.queryAuditCount.toLocaleString(), trend: dashboardStats.queryTrend, icon: CheckCircle, color: 'text-purple-400', bg: 'bg-purple-400/10' },
+  { title: '慢查询', value: dashboardStats.slowQueries, trend: dashboardStats.slowQueryTrend, icon: AlertTriangle, color: 'text-red-400', bg: 'bg-red-400/10' },
+];
+
+export default function Dashboard() {
+  const chartRef = useRef<HTMLDivElement>(null);
+  const { theme } = useTheme();
+  const { user } = useAuth();
+  const [dismissedIds, setDismissedIds] = useState<Set<string>>(new Set());
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+
+  const visibleAnnouncements = announcements
+    .filter(a => a.enabled && a.targetRoles.includes(user.role) && !dismissedIds.has(a.id))
+    .sort((a, b) => {
+      if (a.pinned !== b.pinned) return a.pinned ? -1 : 1;
+      const po = { urgent: 0, high: 1, normal: 2, low: 3 };
+      if (po[a.priority] !== po[b.priority]) return po[a.priority] - po[b.priority];
+      return new Date(b.publishTime).getTime() - new Date(a.publishTime).getTime();
+    });
+
+  const dismiss = (id: string) => setDismissedIds(prev => new Set(prev).add(id));
+  const toggleExpand = (id: string) => setExpandedId(prev => prev === id ? null : id);
+
+  useEffect(() => {
+    if (!chartRef.current) return;
+    const chart = echarts.init(chartRef.current);
+    const isLight = theme === 'light';
+    const colors = isLight
+      ? { bg: 'rgba(255,255,255,0.95)', border: '#e2e5eb', text: '#1a1d23', muted: '#5c6370', grid: '#f0f1f5', blue: '#2563eb', green: '#16a34a', red: '#dc2626' }
+      : { bg: 'rgba(22, 27, 34, 0.95)', border: '#30363d', text: '#f0f6fc', muted: '#8b949e', grid: '#21262d', blue: '#58a6ff', green: '#3fb950', red: '#f85149' };
+    const option: any = {
+      backgroundColor: 'transparent',
+      tooltip: {
+        trigger: 'axis' as const,
+        backgroundColor: colors.bg,
+        borderColor: colors.border,
+        textStyle: { color: colors.text },
+      },
+      legend: {
+        data: ['提交工单', '执行成功', '执行失败'],
+        textStyle: { color: colors.muted },
+        bottom: 0,
+        itemWidth: 14,
+        itemHeight: 8,
+      },
+      grid: { left: '2%', right: '3%', bottom: '18%', top: '8%', containLabel: true },
+      xAxis: {
+        type: 'category' as const,
+        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+        axisLine: { lineStyle: { color: colors.border } },
+        axisLabel: { color: colors.muted, fontSize: 11 },
+      },
+      yAxis: {
+        type: 'value' as const,
+        axisLine: { show: false },
+        splitLine: { lineStyle: { color: colors.grid } },
+        axisLabel: { color: colors.muted, fontSize: 11 },
+      },
+      series: [
+        {
+          name: '提交工单', type: 'line', smooth: true,
+          data: [120, 132, 101, 134, 90, 230, 210],
+          itemStyle: { color: colors.blue },
+          lineStyle: { width: 2 },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: isLight ? 'rgba(37, 99, 235, 0.15)' : 'rgba(88, 166, 255, 0.3)' },
+              { offset: 1, color: 'transparent' },
+            ]),
+          },
+          symbol: 'none',
+        },
+        {
+          name: '执行成功', type: 'line', smooth: true,
+          data: [110, 125, 95, 128, 85, 215, 200],
+          itemStyle: { color: colors.green },
+          lineStyle: { width: 2 },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: isLight ? 'rgba(22, 163, 74, 0.15)' : 'rgba(63, 185, 80, 0.3)' },
+              { offset: 1, color: 'transparent' },
+            ]),
+          },
+          symbol: 'none',
+        },
+        {
+          name: '执行失败', type: 'line', smooth: true,
+          data: [5, 3, 4, 2, 3, 8, 5],
+          itemStyle: { color: colors.red },
+          lineStyle: { width: 2 },
+          symbol: 'none',
+        },
+      ],
+    };
+    chart.setOption(option);
+    const handleResize = () => chart.resize();
+    window.addEventListener('resize', handleResize);
+    return () => { window.removeEventListener('resize', handleResize); chart.dispose(); };
+  }, [theme]);
+
+  const onlineInstances = dbInstances.filter(i => i.status === 'online').length;
+  const warningInstances = dbInstances.filter(i => i.status === 'warning').length;
+  const offlineInstances = dbInstances.filter(i => i.status === 'offline').length;
+  const pendingTickets = tickets.filter(t => t.status === 'pending' || t.status === 'reviewing').slice(0, 4);
+
+  return (
+    <div className="space-y-6">
+      {/* 公告通知栏 */}
+      {visibleAnnouncements.length > 0 && (
+        <div className="space-y-3">
+          {visibleAnnouncements.slice(0, 3).map(ann => {
+            const style = priorityStyle[ann.priority] || priorityStyle.normal;
+            const PIcon = style.icon;
+            const isExpanded = expandedId === ann.id;
+            return (
+              <div
+                key={ann.id}
+                className={`dg-card border-l-[3px] ${style.border} ${style.bg} overflow-hidden transition-all duration-300`}
+              >
+                <div className="px-5 py-3.5 flex items-start gap-3">
+                  <div className={`w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5 ${style.badge.split(' ').slice(1).join(' ')}`}>
+                    <PIcon className="w-4 h-4" />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2 mb-1">
+                      <span className={`text-[10px] px-2 py-0.5 rounded-full border font-medium ${style.badge}`}>
+                        {priorityLabel[ann.priority]}
+                      </span>
+                      <span className="text-sm font-semibold truncate">{ann.title}</span>
+                      {ann.pinned && <span className="text-[10px] text-purple-400 flex-shrink-0">置顶</span>}
+                    </div>
+                    <div className={`text-xs text-[var(--dg-text-secondary)] leading-relaxed ${isExpanded ? '' : 'line-clamp-1'}`}>
+                      {ann.content}
+                    </div>
+                    {ann.content.includes('\n') && (
+                      <button
+                        onClick={() => toggleExpand(ann.id)}
+                        className="text-[11px] text-blue-400 hover:text-blue-300 mt-1 flex items-center gap-0.5 transition-colors"
+                      >
+                        {isExpanded ? '收起' : '展开全文'}
+                        <ChevronRight className={`w-3 h-3 transition-transform ${isExpanded ? 'rotate-90' : ''}`} />
+                      </button>
+                    )}
+                  </div>
+                  <div className="flex items-center gap-2 flex-shrink-0">
+                    <span className="text-[11px] text-[var(--dg-text-muted)]">{ann.publishTime.slice(0, 10)}</span>
+                    <button
+                      onClick={() => dismiss(ann.id)}
+                      className="w-6 h-6 rounded-md flex items-center justify-center text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)] transition-colors"
+                    >
+                      <X className="w-3.5 h-3.5" />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+          {visibleAnnouncements.length > 3 && (
+            <div className="text-center">
+              <span className="text-xs text-[var(--dg-text-muted)]">
+                还有 {visibleAnnouncements.length - 3} 条公告，可在「公告管理」中查看
+              </span>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* 统计卡片 */}
+      <div className="grid grid-cols-4 gap-5">
+        {stats.map((s, i) => (
+          <Card key={i} className="dg-card dg-card-hover">
+            <CardContent className="p-5">
+              <div className="flex items-center justify-between mb-4">
+                <span className="text-sm text-[var(--dg-text-secondary)] font-medium">{s.title}</span>
+                <div className={`w-10 h-10 rounded-xl ${s.bg} flex items-center justify-center`}>
+                  <s.icon className={`w-5 h-5 ${s.color}`} />
+                </div>
+              </div>
+              <div className="text-3xl font-bold text-[var(--dg-text-primary)] mb-2">{s.value}</div>
+              <div className="flex items-center gap-2 text-sm">
+                <span className={`flex items-center gap-1 font-medium ${s.trend >= 0 ? 'text-green-400' : 'text-red-400'}`}>
+                  {s.trend >= 0 ? <TrendingUp className="w-3.5 h-3.5" /> : <TrendingDown className="w-3.5 h-3.5" />}
+                  {Math.abs(s.trend)}%
+                </span>
+                <span className="text-[var(--dg-text-muted)]">较昨日</span>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      {/* 图表 + 实例状态 */}
+      <div className="grid grid-cols-3 gap-5">
+        {/* 工单趋势图 */}
+        <Card className="dg-card col-span-2">
+          <CardHeader className="pb-2 border-b border-[var(--dg-border)]">
+            <div className="flex items-center justify-between">
+              <CardTitle className="text-[15px] font-semibold">工单趋势</CardTitle>
+              <div className="flex gap-1.5">
+                {['近7天', '近30天', '近90天'].map((p, i) => (
+                  <button key={p} className={`px-3 py-1.5 text-xs rounded-md transition-colors ${i === 0 ? 'bg-blue-500/15 text-blue-400 border border-blue-500/30' : 'bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-secondary)] border border-[var(--dg-border)] hover:border-[var(--dg-text-muted)]'}`}>
+                    {p}
+                  </button>
+                ))}
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent className="p-5">
+            <div ref={chartRef} style={{ height: 300 }} />
+          </CardContent>
+        </Card>
+
+        {/* 实例状态 */}
+        <Card className="dg-card">
+          <CardHeader className="pb-2 border-b border-[var(--dg-border)]">
+            <CardTitle className="text-[15px] font-semibold">实例状态</CardTitle>
+          </CardHeader>
+          <CardContent className="p-0">
+            <div className="p-4 border-b border-[var(--dg-border-light)]">
+              <div className="grid grid-cols-3 gap-3 text-center">
+                <div>
+                  <div className="text-2xl font-bold text-green-400">{onlineInstances}</div>
+                  <div className="text-xs text-[var(--dg-text-muted)] mt-1">在线</div>
+                </div>
+                <div>
+                  <div className="text-2xl font-bold text-yellow-400">{warningInstances}</div>
+                  <div className="text-xs text-[var(--dg-text-muted)] mt-1">告警</div>
+                </div>
+                <div>
+                  <div className="text-2xl font-bold text-red-400">{offlineInstances}</div>
+                  <div className="text-xs text-[var(--dg-text-muted)] mt-1">离线</div>
+                </div>
+              </div>
+            </div>
+            {dbInstances.slice(0, 4).map(inst => (
+              <div key={inst.id} className="flex items-center px-5 py-3.5 border-b border-[var(--dg-border-light)] last:border-0 hover:bg-[var(--dg-bg-hover)] transition-colors cursor-pointer">
+                <div className={`w-9 h-9 rounded-lg flex items-center justify-center mr-3.5 ${inst.dbType === 'mysql' ? 'bg-[rgba(0,117,143,0.2)] text-[#26a69a]' : inst.dbType === 'redis' ? 'bg-[rgba(220,50,32,0.2)] text-[#ef5350]' : inst.dbType === 'postgres' ? 'bg-[rgba(51,103,145,0.2)] text-[#42a5f5]' : 'bg-[rgba(71,162,72,0.2)] text-[#66bb6a]'}`}>
+                  <Database className="w-4.5 h-4.5" />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <div className="text-sm font-medium truncate">{inst.name}</div>
+                  <div className="text-xs text-[var(--dg-text-muted)]">{inst.host}:{inst.port}</div>
+                </div>
+                <span className={`px-2.5 py-1 rounded-full text-[11px] font-medium ${inst.status === 'online' ? 'bg-green-500/15 text-green-400' : inst.status === 'warning' ? 'bg-yellow-500/15 text-yellow-400' : 'bg-red-500/15 text-red-400'}`}>
+                  {inst.status === 'online' ? '在线' : inst.status === 'warning' ? '告警' : '离线'}
+                </span>
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* 待处理工单 */}
+      <Card className="dg-card">
+        <CardHeader className="pb-2 border-b border-[var(--dg-border)]">
+          <CardTitle className="text-[15px] font-semibold">待处理工单</CardTitle>
+        </CardHeader>
+        <CardContent className="p-0">
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="border-b border-[var(--dg-border)] bg-[var(--dg-bg-tertiary)]">
+                  <th className="text-left px-5 py-3 font-semibold text-[var(--dg-text-primary)]">工单号</th>
+                  <th className="text-left px-5 py-3 font-semibold text-[var(--dg-text-primary)]">标题</th>
+                  <th className="text-left px-5 py-3 font-semibold text-[var(--dg-text-primary)]">数据库</th>
+                  <th className="text-left px-5 py-3 font-semibold text-[var(--dg-text-primary)]">申请人</th>
+                  <th className="text-left px-5 py-3 font-semibold text-[var(--dg-text-primary)]">状态</th>
+                  <th className="text-left px-5 py-3 font-semibold text-[var(--dg-text-primary)]">创建时间</th>
+                  <th className="text-left px-5 py-3 font-semibold text-[var(--dg-text-primary)]">操作</th>
+                </tr>
+              </thead>
+              <tbody>
+                {pendingTickets.map(ticket => (
+                  <tr key={ticket.id} className="border-b border-[var(--dg-border-light)] hover:bg-[var(--dg-bg-hover)] transition-colors">
+                    <td className="px-5 py-3.5 font-mono text-xs">{ticket.id}</td>
+                    <td className="px-5 py-3.5 max-w-xs truncate">{ticket.title}</td>
+                    <td className="px-5 py-3.5">
+                      <span className={`inline-flex items-center gap-1 px-2.5 py-1 rounded-md text-xs font-medium ${dbTypeColorMap[ticket.dbType] || ''}`}>
+                        {ticket.dbType.toUpperCase()}
+                      </span>
+                    </td>
+                    <td className="px-5 py-3.5">{ticket.applicant}</td>
+                    <td className="px-5 py-3.5">
+                      <span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium ${statusColorMap[ticket.status] || ''}`}>
+                        <span className={`w-1.5 h-1.5 rounded-full ${ticket.status === 'reviewing' ? 'bg-blue-400 animate-pulse' : ticket.status === 'pending' ? 'bg-yellow-400' : ''}`} />
+                        {statusMap[ticket.status]}
+                      </span>
+                    </td>
+                    <td className="px-5 py-3.5 text-[var(--dg-text-secondary)]">{ticket.createTime}</td>
+                    <td className="px-5 py-3.5">
+                      <div className="flex gap-2">
+                        <button className="text-blue-400 hover:text-blue-300 text-xs font-medium transition-colors">查看</button>
+                        <button className="text-green-400 hover:text-green-300 text-xs font-medium transition-colors">审批</button>
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}