refactor: mock清理+安全配置+通用组件+菜单优化

P0安全: SECRET_KEY/ADMIN_PASSWORD/CORS环境变量化, seed仅admin

P1Mock: mock.ts 301->88行, 删8数据mock+5generateMock, net-1300行

P2组件: useToast/useFetchList+ConfirmDialog/FormDialog

P3菜单: menuSections/menuItems->constants/menu.ts

P4API: NotificationsPage/WorkflowPage重写+RolesPage演示

测试: 1050passed, tsc clean

frontend/src/hooks/useAuth.tsx

@@ -1,5 +1,14 @@
 import { createContext, useContext, useState, useCallback, useMemo, useRef, useEffect } from 'react';
-import { menuItems, currentUser as defaultUser } from '@/lib/mock';
+import { menuItems } from '@/constants/menu';
+
+const defaultUser = {
+  id: 0,
+  username: 'guest',
+  email: '',
+  role: 'guest' as const,
+  roleName: '访客',
+  avatar: 'G',
+};
 import { authApi } from '@/api/auth';
 
 export type UserRole = 'admin' | 'dba' | 'developer' | 'guest';

frontend/src/hooks/useFetchList.ts

@@ -0,0 +1,24 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+
+export function useFetchList<T>(fetchFn: () => Promise<T[]>, deps: unknown[] = []) {
+  const [data, setData] = useState<T[]>([]);
+  const [loading, setLoading] = useState(true);
+  const fetchFnRef = useRef(fetchFn);
+  fetchFnRef.current = fetchFn;
+
+  const refresh = useCallback(() => {
+    setLoading(true);
+    fetchFnRef
+      .current()
+      .then((res) => setData(res))
+      .catch(() => setData([]))
+      .finally(() => setLoading(false));
+  }, []);
+
+  useEffect(() => {
+    refresh();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+
+  return { data, loading, refresh };
+}

frontend/src/hooks/useToast.ts

@@ -0,0 +1,40 @@
+import { useState, useEffect, useCallback } from 'react';
+import { CheckCircle, XCircle, X } from 'lucide-react';
+
+export interface Toast {
+  message: string;
+  type: 'success' | 'error';
+}
+
+export function useToast() {
+  const [toast, setToast] = useState<Toast | null>(null);
+
+  useEffect(() => {
+    if (!toast) return;
+    const t = setTimeout(() => setToast(null), 3000);
+    return () => clearTimeout(t);
+  }, [toast]);
+
+  const showToast = useCallback((message: string, type: 'success' | 'error' = 'success') => {
+    setToast({ message, type });
+  }, []);
+
+  const ToastComponent = () => {
+    if (!toast) return null;
+    const isSuccess = toast.type === 'success';
+    return (
+      <div
+        className={`fixed bottom-6 right-6 z-[100] flex items-center gap-2 rounded-lg px-4 py-3 text-sm shadow-lg
+          animate-[fadeInUp_0.25s_ease-out] ${isSuccess ? 'bg-green-500/15 text-green-400' : 'bg-red-500/15 text-red-400'}`}
+      >
+        {isSuccess ? <CheckCircle className="h-4 w-4 shrink-0" /> : <XCircle className="h-4 w-4 shrink-0" />}
+        <span>{toast.message}</span>
+        <button onClick={() => setToast(null)} className="ml-1 hover:opacity-70">
+          <X className="h-3 w-3" />
+        </button>
+      </div>
+    );
+  };
+
+  return { toast, showToast, ToastComponent };
+}