Claude Code文件操作进阶指南：掌握AI代码生成核心技能

import React, { useState } from 'react';
import { Avatar, Button, Card, Badge, Tooltip } from '@/components/ui';
import { MessageSquare, User, Phone, Mail } from 'lucide-react';
import { cn } from '@/lib/utils';

interface UserProfileCardProps {
  user: {
    id: string;
    name: string;
    position: string;
    avatar?: string;
    email: string;
    phone?: string;
    isOnline: boolean;
    lastSeen?: Date;
  };
  size?: 'sm' | 'md' | 'lg';
  variant?: 'default' | 'compact';
  onMessage?: (userId: string) => void;
  onViewDetails?: (userId: string) => void;
  className?: string;
}

export const UserProfileCard: React.FC<UserProfileCardProps> = ({
  user,
  size = 'md',
  variant = 'default',
  onMessage,
  onViewDetails,
  className,
}) => {
  const [isAvatarExpanded, setIsAvatarExpanded] = useState(false);

  const sizeClasses = {
    sm: 'p-3 space-y-2',
    md: 'p-4 space-y-3',
    lg: 'p-6 space-y-4',
  };

  const avatarSizes = {
    sm: 'w-8 h-8',
    md: 'w-12 h-12',
    lg: 'w-16 h-16',
  };

  const formatLastSeen = (date: Date) => {
    const diff = Date.now() - date.getTime();
    const minutes = Math.floor(diff / 60000);
    
    if (minutes < 1) return '刚刚在线';
    if (minutes < 60) return `${minutes}分钟前在线`;
    if (minutes < 1440) return `${Math.floor(minutes / 60)}小时前在线`;
    return `${Math.floor(minutes / 1440)}天前在线`;
  };

  return (
    <Card 
      className={cn(
        'relative transition-all duration-200 hover:shadow-md',
        'dark:hover:shadow-xl dark:hover:shadow-gray-900/20',
        sizeClasses[size],
        className
      )}
    >
      {/* 在线状态指示器 */}
      <div className="absolute top-2 right-2">
        <Badge 
          variant={user.isOnline ? 'success' : 'secondary'}
          className="text-xs"
        >
          {user.isOnline ? '在线' : '离线'}
        </Badge>
      </div>

      <div className={cn(
        'flex items-start gap-3',
        variant === 'compact' && 'flex-row',
        variant === 'default' && 'flex-col items-center text-center'
      )}>
        {/* 用户头像 */}
        <div className="relative">
          <Avatar
            src={user.avatar}
            alt={user.name}
            fallback={user.name.charAt(0)}
            className={cn(
              avatarSizes[size],
              'cursor-pointer transition-transform hover:scale-105',
              'ring-2 ring-offset-2',
              user.isOnline 
                ? 'ring-green-400 dark:ring-green-500' 
                : 'ring-gray-300 dark:ring-gray-600'
            )}
            onClick={() => setIsAvatarExpanded(true)}
          />
          
          {/* 在线状态点 */}
          <div 
            className={cn(
              'absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full border-2 border-white dark:border-gray-800',
              user.isOnline ? 'bg-green-400' : 'bg-gray-400'
            )}
          />
        </div>

        {/* 用户信息 */}
        <div className="flex-1 min-w-0">
          <h3 className={cn(
            'font-semibold text-gray-900 dark:text-gray-100 truncate',
            size === 'sm' && 'text-sm',
            size === 'md' && 'text-base',
            size === 'lg' && 'text-lg'
          )}>
            {user.name}
          </h3>
          
          <p className={cn(
            'text-gray-600 dark:text-gray-400 truncate',
            size === 'sm' && 'text-xs',
            size === 'md' && 'text-sm',
            size === 'lg' && 'text-base'
          )}>
            {user.position}
          </p>

          {/* 联系方式 */}
          <div className="flex items-center gap-2 mt-1">
            <Tooltip content={user.email}>
              <Mail className="w-3 h-3 text-gray-500" />
            </Tooltip>
            {user.phone && (
              <Tooltip content={user.phone}>
                <Phone className="w-3 h-3 text-gray-500" />
              </Tooltip>
            )}
          </div>

          {/* 最后在线时间 */}
          {!user.isOnline && user.lastSeen && (
            <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
              {formatLastSeen(user.lastSeen)}
            </p>
          )}
        </div>
      </div>

      {/* 操作按钮 */}
      {(onMessage || onViewDetails) && (
        <div className={cn(
          'flex gap-2 mt-3',
          variant === 'compact' && 'justify-end',
          variant === 'default' && 'justify-center'
        )}>
          {onMessage && (
            <Button
              variant="outline"
              size={size === 'sm' ? 'sm' : 'default'}
              onClick={() => onMessage(user.id)}
              className="flex items-center gap-1"
            >
              <MessageSquare className="w-4 h-4" />
              发消息
            </Button>
          )}
          
          {onViewDetails && (
            <Button
              variant="default"
              size={size === 'sm' ? 'sm' : 'default'}
              onClick={() => onViewDetails(user.id)}
              className="flex items-center gap-1"
            >
              <User className="w-4 h-4" />
              查看详情
            </Button>
          )}
        </div>
      )}

      {/* 头像放大模态框 */}
      {isAvatarExpanded && (
        <div 
          className="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
          onClick={() => setIsAvatarExpanded(false)}
        >
          <div className="bg-white dark:bg-gray-800 rounded-lg p-4 max-w-sm">
            <Avatar
              src={user.avatar}
              alt={user.name}
              fallback={user.name.charAt(0)}
              className="w-32 h-32 mx-auto"
            />
            <p className="text-center mt-2 font-medium">{user.name}</p>
          </div>
        </div>
      )}
    </Card>
  );
};

// 导出类型定义以供其他组件使用
export type { UserProfileCardProps };

// 默认导出
export default UserProfileCard;

import { Request, Response, NextFunction } from 'express';
import jwt from 'jsonwebtoken';
import Redis from 'ioredis';
import rateLimit from 'express-rate-limit';
import { logger } from '@/utils/logger';
import { ApiError } from '@/utils/errors';
import { UserService } from '@/services/UserService';
import { AuditService } from '@/services/AuditService';
import { DeviceFingerprint } from '@/utils/deviceFingerprint';

interface AuthRequest extends Request {
  user?: {
    id: string;
    role: string;
    sessionId: string;
    deviceId: string;
  };
}

interface TokenPayload {
  userId: string;
  role: string;
  sessionId: string;
  deviceId: string;
  iat: number;
  exp: number;
}

export class AuthMiddleware {
  private redis: Redis;
  private userService: UserService;
  private auditService: AuditService;
  private deviceFingerprint: DeviceFingerprint;

  constructor() {
    this.redis = new Redis(process.env.REDIS_URL!);
    this.userService = new UserService();
    this.auditService = new AuditService();
    this.deviceFingerprint = new DeviceFingerprint();
  }

  // Rate limiting中间件
  public createRateLimiter() {
    return rateLimit({
      windowMs: 15 * 60 * 1000, // 15分钟
      max: 100, // 每个IP最多100次请求
      message: {
        error: 'Too many requests',
        code: 'RATE_LIMIT_EXCEEDED',
        retryAfter: 900 // 15分钟后重试
      },
      standardHeaders: true,
      legacyHeaders: false,
      keyGenerator: (req: Request) => {
        // 组合IP和用户ID作为限流key
        const userKey = req.user?.id || 'anonymous';
        return `rate_limit:${req.ip}:${userKey}`;
      },
      skip: (req: Request) => {
        // 管理员请求跳过限流
        return req.user?.role === 'admin';
      }
    });
  }

  // JWT验证中间件
  public authenticate = async (
    req: AuthRequest,
    res: Response,
    next: NextFunction
  ): Promise<void> => {
    const startTime = Date.now();
    
    try {
      // 1. 提取token
      const token = this.extractToken(req);
      if (!token) {
        throw new ApiError(401, 'Authentication required', 'NO_TOKEN');
      }

      // 2. 验证token格式和签名
      const decoded = await this.verifyToken(token);
      
      // 3. 检查token黑名单
      await this.checkTokenBlacklist(token);
      
      // 4. 验证用户和会话状态
      await this.validateUserSession(decoded);
      
      // 5. 设备指纹验证
      await this.validateDeviceFingerprint(req, decoded.deviceId);
      
      // 6. 检查权限和角色
      await this.validateUserPermissions(decoded.userId);
      
      // 7. 设置用户上下文
      req.user = {
        id: decoded.userId,
        role: decoded.role,
        sessionId: decoded.sessionId,
        deviceId: decoded.deviceId
      };

      // 8. 记录成功的认证日志
      await this.logAuthSuccess(req, decoded, Date.now() - startTime);
      
      // 9. 刷新token（如果需要）
      await this.refreshTokenIfNeeded(req, res, decoded);
      
      next();
      
    } catch (error) {
      await this.handleAuthError(req, res, error, Date.now() - startTime);
    }
  };

  // 权限检查中间件
  public authorize = (requiredRoles: string[] | string) => {
    return async (req: AuthRequest, res: Response, next: NextFunction): Promise<void> => {
      try {
        if (!req.user) {
          throw new ApiError(401, 'Authentication required', 'NOT_AUTHENTICATED');
        }

        const roles = Array.isArray(requiredRoles) ? requiredRoles : [requiredRoles];
        
        if (!roles.includes(req.user.role)) {
          // 记录权限拒绝日志
          await this.auditService.logSecurityEvent({
            type: 'AUTHORIZATION_DENIED',
            userId: req.user.id,
            requiredRoles: roles,
            userRole: req.user.role,
            resource: req.originalUrl,
            ip: req.ip,
            userAgent: req.get('User-Agent')
          });

          throw new ApiError(403, 'Insufficient permissions', 'INSUFFICIENT_PERMISSIONS');
        }

        next();
      } catch (error) {
        next(error);
      }
    };
  };

  // 提取JWT token
  private extractToken(req: Request): string | null {
    const authHeader = req.headers.authorization;
    
    if (authHeader && authHeader.startsWith('Bearer ')) {
      return authHeader.substring(7);
    }
    
    // 也支持从cookie中获取token
    if (req.cookies?.accessToken) {
      return req.cookies.accessToken;
    }
    
    return null;
  }

  // 验证JWT token
  private async verifyToken(token: string): Promise<TokenPayload> {
    try {
      const decoded = jwt.verify(token, process.env.JWT_SECRET!) as TokenPayload;
      
      // 验证token结构
      if (!decoded.userId || !decoded.sessionId || !decoded.deviceId) {
        throw new ApiError(401, 'Invalid token structure', 'INVALID_TOKEN_STRUCTURE');
      }
      
      return decoded;
    } catch (error) {
      if (error instanceof jwt.TokenExpiredError) {
        throw new ApiError(401, 'Token expired', 'TOKEN_EXPIRED');
      } else if (error instanceof jwt.JsonWebTokenError) {
        throw new ApiError(401, 'Invalid token', 'INVALID_TOKEN');
      }
      throw error;
    }
  }

  // 检查token黑名单
  private async checkTokenBlacklist(token: string): Promise<void> {
    const tokenHash = this.hashToken(token);
    const isBlacklisted = await this.redis.get(`blacklist:${tokenHash}`);
    
    if (isBlacklisted) {
      throw new ApiError(401, 'Token has been revoked', 'TOKEN_REVOKED');
    }
  }

  // 验证用户会话
  private async validateUserSession(decoded: TokenPayload): Promise<void> {
    // 检查会话是否存在
    const sessionKey = `session:${decoded.userId}:${decoded.sessionId}`;
    const session = await this.redis.get(sessionKey);
    
    if (!session) {
      throw new ApiError(401, 'Session expired', 'SESSION_EXPIRED');
    }

    // 检查用户是否仍然活跃
    const user = await this.userService.findById(decoded.userId);
    if (!user || !user.isActive) {
      throw new ApiError(401, 'User account disabled', 'ACCOUNT_DISABLED');
    }
  }

  // 设备指纹验证
  private async validateDeviceFingerprint(req: Request, deviceId: string): Promise<void> {
    const currentFingerprint = this.deviceFingerprint.generate(req);
    const storedFingerprint = await this.redis.get(`device:${deviceId}`);
    
    if (storedFingerprint && storedFingerprint !== currentFingerprint) {
      // 设备指纹不匹配，可能是安全风险
      await this.auditService.logSecurityEvent({
        type: 'DEVICE_FINGERPRINT_MISMATCH',
        deviceId,
        expectedFingerprint: storedFingerprint,
        actualFingerprint: currentFingerprint,
        ip: req.ip,
        userAgent: req.get('User-Agent')
      });

      // 根据安全策略决定是否拒绝访问
      if (process.env.STRICT_DEVICE_VALIDATION === 'true') {
        throw new ApiError(401, 'Device verification failed', 'DEVICE_VERIFICATION_FAILED');
      }
    }
  }

  // 验证用户权限
  private async validateUserPermissions(userId: string): Promise<void> {
    const user = await this.userService.findByIdWithPermissions(userId);
    
    if (!user) {
      throw new ApiError(401, 'User not found', 'USER_NOT_FOUND');
    }

    // 检查账户锁定状态
    if (user.isLocked && user.lockedUntil && user.lockedUntil > new Date()) {
      const lockDuration = Math.ceil((user.lockedUntil.getTime() - Date.now()) / 1000 / 60);
      throw new ApiError(401, `Account locked for ${lockDuration} minutes`, 'ACCOUNT_LOCKED');
    }
  }

  // 刷新token
  private async refreshTokenIfNeeded(
    req: AuthRequest,
    res: Response,
    decoded: TokenPayload
  ): Promise<void> {
    const tokenAge = Date.now() / 1000 - decoded.iat;
    const tokenLifetime = decoded.exp - decoded.iat;
    
    // 如果token已使用超过50%的生命周期，则刷新
    if (tokenAge > tokenLifetime * 0.5) {
      try {
        const newToken = await this.userService.generateAccessToken(
          decoded.userId,
          decoded.sessionId,
          decoded.deviceId
        );
        
        // 设置新token到响应头
        res.setHeader('X-New-Token', newToken);
        
        logger.info('Token refreshed', {
          userId: decoded.userId,
          sessionId: decoded.sessionId,
          oldTokenAge: tokenAge
        });
        
      } catch (error) {
        logger.error('Failed to refresh token', {
          userId: decoded.userId,
          error: error.message
        });
      }
    }
  }

  // 记录认证成功日志
  private async logAuthSuccess(
    req: AuthRequest,
    decoded: TokenPayload,
    duration: number
  ): Promise<void> {
    await this.auditService.logAuthEvent({
      type: 'AUTHENTICATION_SUCCESS',
      userId: decoded.userId,
      sessionId: decoded.sessionId,
      ip: req.ip,
      userAgent: req.get('User-Agent'),
      endpoint: req.originalUrl,
      method: req.method,
      duration
    });

    logger.info('User authenticated successfully', {
      userId: decoded.userId,
      role: decoded.role,
      sessionId: decoded.sessionId,
      endpoint: req.originalUrl,
      duration
    });
  }

  // 处理认证错误
  private async handleAuthError(
    req: AuthRequest,
    res: Response,
    error: any,
    duration: number
  ): Promise<void> {
    const errorInfo = {
      type: 'AUTHENTICATION_FAILED',
      error: error.message || 'Unknown authentication error',
      code: error.code || 'AUTH_ERROR',
      ip: req.ip,
      userAgent: req.get('User-Agent'),
      endpoint: req.originalUrl,
      method: req.method,
      duration
    };

    // 记录认证失败日志
    await this.auditService.logAuthEvent(errorInfo);

    logger.warn('Authentication failed', errorInfo);

    // 返回友好的错误响应
    if (error instanceof ApiError) {
      res.status(error.statusCode).json({
        error: error.message,
        code: error.code,
        timestamp: new Date().toISOString()
      });
    } else {
      res.status(401).json({
        error: 'Authentication failed',
        code: 'AUTH_ERROR',
        timestamp: new Date().toISOString()
      });
    }
  }

  // 生成token哈希
  private hashToken(token: string): string {
    const crypto = require('crypto');
    return crypto.createHash('sha256').update(token).digest('hex');
  }

  // 用户登出时将token加入黑名单
  public async blacklistToken(token: string, expiresIn: number = 3600): Promise<void> {
    const tokenHash = this.hashToken(token);
    await this.redis.setex(`blacklist:${tokenHash}`, expiresIn, '1');
  }
}

// 导出中间件实例
export const authMiddleware = new AuthMiddleware();

// 导出便捷方法
export const authenticate = authMiddleware.authenticate;
export const authorize = authMiddleware.authorize;
export const rateLimiter = authMiddleware.createRateLimiter();