fix: resolve HMR error and TypeScript build issues

- Disable all experimental features to fix React 19 and Next.js 16 compatibility
- Fix TypeScript error in check-permission.ts (role property issue)
- Add test script for Contact page validation
- Use production mode to avoid HMR issues completely

next.config.ts

@@ -25,8 +25,8 @@ const nextConfig: NextConfig = {
   reactStrictMode: true,
   reactProductionProfiling: !isDev,
   experimental: {
-    optimizePackageImports: ['lucide-react', 'framer-motion', '@radix-ui/react-dialog', '@radix-ui/react-dropdown-menu'],
-    // 暂时禁用optimizeCss以解决React 19和Next.js 16的HMR兼容性问题
+    // 暂时禁用所有实验性功能以解决React 19和Next.js 16的HMR兼容性问题
+    // optimizePackageImports: ['lucide-react', 'framer-motion', '@radix-ui/react-dialog', '@radix-ui/react-dropdown-menu'],
     // optimizeCss: true,
   },
   compiler: {

scripts/test-contact-page.sh

@@ -0,0 +1,48 @@
+#!/bin/bash
+
+echo "🧪 测试Contact页面HMR错误"
+echo "=========================="
+echo ""
+
+# 颜色定义
+GREEN='\033[0;32m'
+RED='\033[0;31m'
+YELLOW='\033[1;33m'
+NC='\033[0m' # No Color
+
+# 检查开发服务器是否运行
+if ! lsof -ti:3000 > /dev/null 2>&1; then
+    echo -e "${RED}❌ 开发服务器未运行${NC}"
+    echo "请先运行: npm run dev"
+    exit 1
+fi
+
+echo -e "${GREEN}✅ 开发服务器正在运行${NC}"
+echo ""
+
+# 测试contact页面
+echo "测试Contact页面..."
+echo "访问: http://localhost:3000/contact"
+echo ""
+
+# 使用curl测试页面
+response=$(curl -s -o /dev/null -w "%{http_code}" http://localhost:3000/contact)
+
+if [ "$response" -eq 200 ]; then
+    echo -e "${GREEN}✅ Contact页面响应正常 (HTTP $response)${NC}"
+else
+    echo -e "${RED}❌ Contact页面响应异常 (HTTP $response)${NC}"
+fi
+
+echo ""
+echo "📋 请在浏览器中访问 http://localhost:3000/contact 并检查控制台"
+echo "如果仍然看到HMR错误，请尝试以下方案："
+echo ""
+echo "1. 清除浏览器缓存"
+echo "2. 使用无痕模式打开"
+echo "3. 运行: ./scripts/fix-dev-server.sh --deep"
+echo "4. 考虑使用生产模式: npm run build && npm run start"
+echo ""
+echo "如果问题持续，建议："
+echo "- 升级Next.js到15.x: npm install next@^15.0.0"
+echo "- 或降级React到18.x: npm install react@^18.3.0 react-dom@^18.3.0"

src/lib/auth/check-permission.ts

@@ -1,5 +1,5 @@
 import { auth } from '../auth';
-import { isAdminUser } from './permissions';
+import { isAdminUser, hasPermission } from './permissions';
 
 export async function checkIsAdmin(): Promise<{ isAdmin: boolean; userId?: string }> {
   const session = await auth();
@@ -35,3 +35,41 @@ export async function getAdminUserId(): Promise<string | null> {
   }
   return session.user.id;
 }
+
+export async function checkPermission(
+  resource: Parameters<typeof hasPermission>[1],
+  action: Parameters<typeof hasPermission>[2]
+): Promise<{ allowed: boolean; userId?: string; role?: string }> {
+  const session = await auth();
+
+  if (!session || !session.user) {
+    return { allowed: false };
+  }
+
+  const isAdmin = session.user.isAdmin as boolean | undefined;
+  const role: Parameters<typeof hasPermission>[0] = isAdmin ? 'admin' : 'viewer';
+  
+  const allowed = hasPermission(role, resource, action);
+
+  return {
+    allowed,
+    userId: session.user.id,
+    role,
+  };
+}
+
+export async function requirePermission(
+  resource: Parameters<typeof hasPermission>[1],
+  action: Parameters<typeof hasPermission>[2]
+): Promise<{ userId: string; role: string }> {
+  const result = await checkPermission(resource, action);
+
+  if (!result.allowed) {
+    throw new Error('无权限执行此操作');
+  }
+
+  return {
+    userId: result.userId!,
+    role: result.role!,
+  };
+}