Update project

backend/src/admin/admin.controller.ts

@@ -7,6 +7,7 @@ import {
   Param,
   Body,
   UseGuards,
+  Query,
 } from '@nestjs/common';
 import { AdminService } from './admin.service';
 import { CreateCourseDto } from './dto/create-course.dto';
@@ -47,4 +48,23 @@ export class AdminController {
     const data = await this.adminService.getOrders();
     return { success: true, data };
   }
+
+  @Get('statistics')
+  async getStatistics(
+    @Query('startDate') startDate?: string,
+    @Query('endDate') endDate?: string,
+  ) {
+    const data = await this.adminService.getStatistics(startDate, endDate);
+    return { success: true, data };
+  }
+
+  @Get('statistics/details')
+  async getStatisticsDetails(
+    @Query('type') type: string,
+    @Query('startDate') startDate?: string,
+    @Query('endDate') endDate?: string,
+  ) {
+    const data = await this.adminService.getStatisticsDetails(type, startDate, endDate);
+    return { success: true, data };
+  }
 }

backend/src/admin/admin.service.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@nestjs/common';
 import { InjectRepository } from '@nestjs/typeorm';
 import { Repository } from 'typeorm';
 import { Course } from '../entities/course.entity';
-import { Order } from '../entities/order.entity';
+import { Order, OrderStatus, OrderType } from '../entities/order.entity';
 import { CreateCourseDto } from './dto/create-course.dto';
 
 @Injectable()
@@ -34,4 +34,65 @@ export class AdminService {
       order: { createdAt: 'DESC' },
     });
   }
+
+  async getStatistics(startDate?: string, endDate?: string) {
+    const query = this.orderRepository.createQueryBuilder('order')
+      .select('order.orderType', 'orderType')
+      .addSelect('SUM(order.amount)', 'total')
+      .where('order.status = :status', { status: OrderStatus.PAID });
+
+    if (startDate) {
+      query.andWhere('order.createdAt >= :startDate', { startDate: new Date(startDate) });
+    }
+    
+    if (endDate) {
+      const end = new Date(endDate);
+      end.setDate(end.getDate() + 1);
+      query.andWhere('order.createdAt < :endDate', { endDate: end });
+    }
+
+    const results = await query.groupBy('order.orderType').getRawMany();
+
+    const stats = {
+      vipAmount: 0,
+      donationAmount: 0,
+      purchaseAmount: 0,
+    };
+
+    results.forEach(row => {
+      const total = Number(row.total) || 0;
+      if (row.orderType === OrderType.VIP) {
+        stats.vipAmount += total;
+      } else if (row.orderType === OrderType.DONATION) {
+        stats.donationAmount += total;
+      } else if (row.orderType === OrderType.PURCHASE) {
+        stats.purchaseAmount += total;
+      }
+    });
+
+    return stats;
+  }
+
+  async getStatisticsDetails(type: string, startDate?: string, endDate?: string) {
+    const query = this.orderRepository.createQueryBuilder('order')
+      .leftJoinAndSelect('order.user', 'user')
+      .leftJoinAndSelect('order.course', 'course')
+      .where('order.status = :status', { status: OrderStatus.PAID });
+
+    if (type && type !== 'all') {
+      query.andWhere('order.orderType = :type', { type });
+    }
+
+    if (startDate) {
+      query.andWhere('order.createdAt >= :startDate', { startDate: new Date(startDate) });
+    }
+    
+    if (endDate) {
+      const end = new Date(endDate);
+      end.setDate(end.getDate() + 1);
+      query.andWhere('order.createdAt < :endDate', { endDate: end });
+    }
+
+    return query.orderBy('order.createdAt', 'DESC').getMany();
+  }
 }

backend/src/app.module.ts

@@ -9,11 +9,14 @@ import { Order } from './entities/order.entity';
 import { Payment } from './entities/payment.entity';
 import { UserCourse } from './entities/user-course.entity';
 import { UserStar } from './entities/user-star.entity';
+import { SystemConfig } from './entities/system-config.entity';
+import { Comment } from './entities/comment.entity';
 import { AuthModule } from './auth/auth.module';
 import { CoursesModule } from './courses/courses.module';
 import { OrdersModule } from './orders/orders.module';
 import { AdminModule } from './admin/admin.module';
 import { PaymentModule } from './payment/payment.module';
+import { AppConfigModule } from './config/config.module';
 
 @Module({
   imports: [
@@ -23,7 +26,16 @@ import { PaymentModule } from './payment/payment.module';
     TypeOrmModule.forRoot({
       type: 'sqlite',
       database: 'course_subscription.sqlite',
-      entities: [User, Course, Order, Payment, UserCourse, UserStar],
+      entities: [
+        User,
+        Course,
+        Order,
+        Payment,
+        UserCourse,
+        UserStar,
+        SystemConfig,
+        Comment,
+      ],
       synchronize: true, // Auto-create tables in dev
     }),
     AuthModule,
@@ -31,6 +43,7 @@ import { PaymentModule } from './payment/payment.module';
     OrdersModule,
     AdminModule,
     PaymentModule,
+    AppConfigModule,
   ],
   controllers: [AppController],
   providers: [AppService],

backend/src/auth/auth.service.ts

@@ -46,7 +46,7 @@ export class AuthService implements OnModuleInit {
   }
 
   async register(registerDto: RegisterDto) {
-    const { email, password, emailCode } = registerDto;
+    const { email, password, emailCode, nickname } = registerDto;
 
     // In a real app, verify emailCode here
     if (emailCode !== '123456') {
@@ -66,7 +66,7 @@ export class AuthService implements OnModuleInit {
     const user = this.userRepository.create({
       email,
       passwordHash,
-      nickname: `User_${email.split('@')[0].slice(0, 6)}`,
+      nickname: nickname || `User_${email.split('@')[0].slice(0, 6)}`,
       role: UserRole.USER,
     });
 
@@ -94,20 +94,14 @@ export class AuthService implements OnModuleInit {
       token: this.jwtService.sign(payload),
       role: user.role,
       nickname: user.nickname,
+      isVip: user.isVip,
     };
   }
 
   async getProfile(userId: number) {
     const user = await this.userRepository.findOne({
       where: { id: userId },
-      select: [
-        'id',
-        'email',
-        'nickname',
-        'avatar',
-        'role',
-        'createdAt',
-      ],
+      select: ['id', 'email', 'nickname', 'avatar', 'role', 'isVip', 'createdAt'],
     });
 
     if (!user) {

backend/src/auth/dto/register.dto.ts

@@ -1,4 +1,4 @@
-import { IsString, IsNotEmpty, Length, IsEmail } from 'class-validator';
+import { IsString, IsNotEmpty, Length, IsEmail, IsOptional } from 'class-validator';
 
 export class RegisterDto {
   @IsEmail()
@@ -10,6 +10,10 @@ export class RegisterDto {
   @Length(6, 20)
   password: string;
 
+  @IsString()
+  @IsOptional()
+  nickname?: string;
+
   @IsString()
   @IsNotEmpty()
   emailCode: string;

backend/src/config/config.controller.ts

@@ -0,0 +1,25 @@
+import { Controller, Get, Put, Body, UseGuards } from '@nestjs/common';
+import { ConfigService } from './config.service';
+import { JwtAuthGuard } from '../auth/guards/jwt-auth.guard';
+import { RolesGuard } from '../auth/guards/roles.guard';
+import { Roles } from '../auth/decorators/roles.decorator';
+import { UserRole } from '../entities/user.entity';
+
+@Controller('api/config')
+export class ConfigController {
+  constructor(private readonly configService: ConfigService) {}
+
+  @Get('ui')
+  async getUiConfig() {
+    const data = await this.configService.getUiConfig();
+    return { success: true, data };
+  }
+
+  @UseGuards(JwtAuthGuard, RolesGuard)
+  @Roles(UserRole.ADMIN)
+  @Put('ui')
+  async updateUiConfig(@Body() body: any) {
+    const data = await this.configService.updateUiConfig(body);
+    return { success: true, data };
+  }
+}

backend/src/config/config.module.ts

@@ -0,0 +1,13 @@
+import { Module } from '@nestjs/common';
+import { TypeOrmModule } from '@nestjs/typeorm';
+import { ConfigController } from './config.controller';
+import { ConfigService } from './config.service';
+import { SystemConfig } from '../entities/system-config.entity';
+
+@Module({
+  imports: [TypeOrmModule.forFeature([SystemConfig])],
+  controllers: [ConfigController],
+  providers: [ConfigService],
+  exports: [ConfigService],
+})
+export class AppConfigModule {}

backend/src/config/config.service.ts

@@ -0,0 +1,67 @@
+import { Injectable, OnModuleInit } from '@nestjs/common';
+import { InjectRepository } from '@nestjs/typeorm';
+import { Repository } from 'typeorm';
+import { SystemConfig } from '../entities/system-config.entity';
+
+export const DEFAULT_CONFIG = {
+  siteName: '极简AI',
+  logo: '',
+  footerText: '© ' + new Date().getFullYear() + ' 极简AI. 保留所有权利。',
+  navLinks: [
+    { label: 'AI新资讯', value: 'ai-news' },
+    { label: 'Comfyui资讯', value: 'comfyui' },
+    { label: '满血整合包', value: 'full-blood' },
+    { label: '闭源API接口', value: 'closed-api' },
+    { label: '应用广场', value: 'app-square' },
+  ],
+  memberFee: 99,
+};
+
+@Injectable()
+export class ConfigService implements OnModuleInit {
+  constructor(
+    @InjectRepository(SystemConfig)
+    private readonly configRepo: Repository<SystemConfig>,
+  ) {}
+
+  async onModuleInit() {
+    await this.initDefaultConfig();
+  }
+
+  async initDefaultConfig() {
+    const existingConfig = await this.configRepo.findOne({
+      where: { key: 'ui_config' },
+    });
+
+    if (!existingConfig) {
+      const config = this.configRepo.create({
+        key: 'ui_config',
+        value: DEFAULT_CONFIG,
+        description: 'Global UI Configuration',
+      });
+      await this.configRepo.save(config);
+      console.log('Default UI configuration initialized.');
+    }
+  }
+
+  async getUiConfig() {
+    const config = await this.configRepo.findOne({
+      where: { key: 'ui_config' },
+    });
+    return config?.value || DEFAULT_CONFIG;
+  }
+
+  async updateUiConfig(value: any) {
+    let config = await this.configRepo.findOne({
+      where: { key: 'ui_config' },
+    });
+
+    if (!config) {
+      config = this.configRepo.create({ key: 'ui_config' });
+    }
+
+    config.value = { ...config.value, ...value };
+    await this.configRepo.save(config);
+    return config.value;
+  }
+}

backend/src/courses/courses.controller.ts

@@ -6,6 +6,7 @@ import {
   UseGuards,
   Request,
   ParseIntPipe,
+  Body,
 } from '@nestjs/common';
 import { CoursesService } from './courses.service';
 import { JwtAuthGuard } from '../auth/guards/jwt-auth.guard';
@@ -65,4 +66,27 @@ export class CoursesController {
     const data = await this.coursesService.getCourseAccess(req.user.userId, id);
     return { success: true, data };
   }
+
+  @Get(':id/comments')
+  async getComments(@Param('id', ParseIntPipe) id: number) {
+    const data = await this.coursesService.getComments(id);
+    return { success: true, data };
+  }
+
+  @UseGuards(JwtAuthGuard)
+  @Post(':id/comments')
+  async addComment(
+    @Param('id', ParseIntPipe) id: number,
+    @Body() body: { content: string; parentId?: number; replyToCommentId?: number },
+    @Request() req,
+  ) {
+    const data = await this.coursesService.addComment(
+      id,
+      req.user.userId,
+      body.content,
+      body.parentId,
+      body.replyToCommentId,
+    );
+    return { success: true, data };
+  }
 }

backend/src/courses/courses.module.ts

@@ -5,9 +5,10 @@ import { CoursesController } from './courses.controller';
 import { Course } from '../entities/course.entity';
 import { UserCourse } from '../entities/user-course.entity';
 import { UserStar } from '../entities/user-star.entity';
+import { Comment } from '../entities/comment.entity';
 
 @Module({
-  imports: [TypeOrmModule.forFeature([Course, UserCourse, UserStar])],
+  imports: [TypeOrmModule.forFeature([Course, UserCourse, UserStar, Comment])],
   providers: [CoursesService],
   controllers: [CoursesController],
   exports: [CoursesService],

backend/src/courses/courses.service.ts

@@ -8,6 +8,7 @@ import { Repository } from 'typeorm';
 import { Course } from '../entities/course.entity';
 import { UserCourse } from '../entities/user-course.entity';
 import { UserStar } from '../entities/user-star.entity';
+import { Comment } from '../entities/comment.entity';
 
 @Injectable()
 export class CoursesService {
@@ -18,12 +19,24 @@ export class CoursesService {
     private userCourseRepository: Repository<UserCourse>,
     @InjectRepository(UserStar)
     private userStarRepository: Repository<UserStar>,
+    @InjectRepository(Comment)
+    private commentRepository: Repository<Comment>,
   ) {}
 
   async findAll() {
     return this.courseRepository.find({
       where: { isActive: true },
-      select: ['id', 'title', 'description', 'coverImage', 'price', 'category', 'viewCount', 'likeCount', 'starCount'],
+      select: [
+        'id',
+        'title',
+        'description',
+        'coverImage',
+        'price',
+        'category',
+        'viewCount',
+        'likeCount',
+        'starCount',
+      ],
       order: { createdAt: 'DESC' },
     });
   }
@@ -31,7 +44,17 @@ export class CoursesService {
   async findOne(id: number) {
     const course = await this.courseRepository.findOne({
       where: { id, isActive: true },
-      select: ['id', 'title', 'description', 'coverImage', 'price', 'category', 'viewCount', 'likeCount', 'starCount'],
+      select: [
+        'id',
+        'title',
+        'description',
+        'coverImage',
+        'price',
+        'category',
+        'viewCount',
+        'likeCount',
+        'starCount',
+      ],
     });
 
     if (!course) {
@@ -100,6 +123,75 @@ export class CoursesService {
     }));
   }
 
+  async getComments(courseId: number) {
+    const comments = await this.commentRepository.find({
+      where: { courseId },
+      relations: ['user', 'replyToComment', 'replyToComment.user'],
+      order: { createdAt: 'ASC' },
+    });
+    
+    return comments.map(c => ({
+      id: c.id,
+      courseId: c.courseId,
+      userId: c.userId,
+      parentId: c.parentId,
+      replyToCommentId: c.replyToCommentId,
+      content: c.content,
+      createdAt: c.createdAt,
+      user: {
+        id: c.user.id,
+        nickname: c.user.nickname,
+        avatar: c.user.avatar,
+        isVip: c.user.isVip,
+      },
+      replyToUser: c.replyToComment ? {
+        id: c.replyToComment.user.id,
+        nickname: c.replyToComment.user.nickname,
+      } : undefined
+    }));
+  }
+
+  async addComment(courseId: number, userId: number, content: string, parentId?: number, replyToCommentId?: number) {
+    const course = await this.courseRepository.findOne({ where: { id: courseId } });
+    if (!course) throw new NotFoundException('Course not found');
+
+    const comment = this.commentRepository.create({
+      courseId,
+      userId,
+      content,
+      parentId,
+      replyToCommentId,
+    });
+    await this.commentRepository.save(comment);
+
+    const savedComment = await this.commentRepository.findOne({
+      where: { id: comment.id },
+      relations: ['user', 'replyToComment', 'replyToComment.user']
+    });
+
+    if (!savedComment) throw new NotFoundException('Comment not found after save');
+
+    return {
+      id: savedComment.id,
+      courseId: savedComment.courseId,
+      userId: savedComment.userId,
+      parentId: savedComment.parentId,
+      replyToCommentId: savedComment.replyToCommentId,
+      content: savedComment.content,
+      createdAt: savedComment.createdAt,
+      user: {
+        id: savedComment.user.id,
+        nickname: savedComment.user.nickname,
+        avatar: savedComment.user.avatar,
+        isVip: savedComment.user.isVip,
+      },
+      replyToUser: savedComment.replyToComment ? {
+        id: savedComment.replyToComment.user.id,
+        nickname: savedComment.replyToComment.user.nickname,
+      } : undefined
+    };
+  }
+
   async getCourseAccess(userId: number, courseId: number) {
     const userCourse = await this.userCourseRepository.findOne({
       where: { userId, courseId },

backend/src/entities/comment.entity.ts

@@ -0,0 +1,58 @@
+import {
+  Entity,
+  Column,
+  PrimaryGeneratedColumn,
+  CreateDateColumn,
+  UpdateDateColumn,
+  ManyToOne,
+  JoinColumn,
+  OneToMany,
+} from 'typeorm';
+import { User } from './user.entity';
+import { Course } from './course.entity';
+
+@Entity('comments')
+export class Comment {
+  @PrimaryGeneratedColumn()
+  id: number;
+
+  @Column({ name: 'course_id' })
+  courseId: number;
+
+  @Column({ name: 'user_id' })
+  userId: number;
+
+  @Column({ name: 'parent_id', nullable: true })
+  parentId: number;
+
+  @Column({ name: 'reply_to_comment_id', nullable: true })
+  replyToCommentId: number;
+
+  @Column({ type: 'text' })
+  content: string;
+
+  @CreateDateColumn({ name: 'created_at' })
+  createdAt: Date;
+
+  @UpdateDateColumn({ name: 'updated_at' })
+  updatedAt: Date;
+
+  @ManyToOne(() => User, (user) => user.comments)
+  @JoinColumn({ name: 'user_id' })
+  user: User;
+
+  @ManyToOne(() => Course, (course) => course.comments)
+  @JoinColumn({ name: 'course_id' })
+  course: Course;
+
+  @ManyToOne(() => Comment, (comment) => comment.replies)
+  @JoinColumn({ name: 'parent_id' })
+  parent: Comment;
+
+  @ManyToOne(() => Comment)
+  @JoinColumn({ name: 'reply_to_comment_id' })
+  replyToComment: Comment;
+
+  @OneToMany(() => Comment, (comment) => comment.parent)
+  replies: Comment[];
+}

backend/src/entities/course.entity.ts

@@ -8,6 +8,7 @@ import {
 } from 'typeorm';
 import { Order } from './order.entity';
 import { UserCourse } from './user-course.entity';
+import { Comment } from './comment.entity';
 
 @Entity('courses')
 export class Course {
@@ -55,4 +56,7 @@ export class Course {
 
   @OneToMany(() => UserCourse, (userCourse) => userCourse.course)
   userCourses: UserCourse[];
+
+  @OneToMany(() => Comment, (comment) => comment.course)
+  comments: Comment[];
 }

backend/src/entities/order.entity.ts

@@ -18,6 +18,12 @@ export enum OrderStatus {
   REFUNDED = 'refunded',
 }
 
+export enum OrderType {
+  PURCHASE = 'purchase',
+  DONATION = 'donation',
+  VIP = 'vip',
+}
+
 @Entity('orders')
 export class Order {
   @PrimaryGeneratedColumn()
@@ -29,7 +35,7 @@ export class Order {
   @Column({ name: 'user_id' })
   userId: number;
 
-  @Column({ name: 'course_id' })
+  @Column({ name: 'course_id', nullable: true })
   courseId: number;
 
   @Column({ type: 'decimal', precision: 10, scale: 2 })
@@ -38,6 +44,12 @@ export class Order {
   @Column({ type: 'varchar', default: OrderStatus.PENDING })
   status: OrderStatus;
 
+  @Column({ type: 'varchar', default: OrderType.PURCHASE, name: 'order_type' })
+  orderType: OrderType;
+
+  @Column({ type: 'varchar', length: 255, nullable: true })
+  message: string;
+
   @CreateDateColumn({ name: 'created_at' })
   createdAt: Date;
 

backend/src/entities/system-config.entity.ts

@@ -0,0 +1,28 @@
+import {
+  Entity,
+  Column,
+  PrimaryGeneratedColumn,
+  CreateDateColumn,
+  UpdateDateColumn,
+} from 'typeorm';
+
+@Entity('system_configs')
+export class SystemConfig {
+  @PrimaryGeneratedColumn()
+  id: number;
+
+  @Column({ type: 'varchar', length: 100, unique: true })
+  key: string;
+
+  @Column({ type: 'simple-json', nullable: true })
+  value: any;
+
+  @Column({ type: 'varchar', length: 255, nullable: true })
+  description: string;
+
+  @CreateDateColumn({ name: 'created_at' })
+  createdAt: Date;
+
+  @UpdateDateColumn({ name: 'updated_at' })
+  updatedAt: Date;
+}

backend/src/entities/user.entity.ts

@@ -8,6 +8,7 @@ import {
 } from 'typeorm';
 import { Order } from './order.entity';
 import { UserCourse } from './user-course.entity';
+import { Comment } from './comment.entity';
 
 export enum UserRole {
   USER = 'user',
@@ -31,6 +32,9 @@ export class User {
   @Column({ type: 'varchar', length: 255, nullable: true })
   avatar: string;
 
+  @Column({ type: 'boolean', default: false, name: 'is_vip' })
+  isVip: boolean;
+
   @Column({ type: 'varchar', default: UserRole.USER })
   role: UserRole;
 
@@ -45,4 +49,7 @@ export class User {
 
   @OneToMany(() => UserCourse, (userCourse) => userCourse.user)
   userCourses: UserCourse[];
+
+  @OneToMany(() => Comment, (comment) => comment.user)
+  comments: Comment[];
 }

backend/src/orders/dto/create-order.dto.ts

@@ -1,11 +1,23 @@
-import { IsNumber, IsNotEmpty } from 'class-validator';
+import { IsNumber, IsNotEmpty, IsOptional, IsBoolean, IsString } from 'class-validator';
 
 export class CreateOrderDto {
   @IsNumber()
-  @IsNotEmpty()
-  courseId: number;
+  @IsOptional()
+  courseId?: number;
 
   @IsNumber()
-  @IsNotEmpty()
-  price: number;
+  @IsOptional()
+  price?: number;
+
+  @IsBoolean()
+  @IsOptional()
+  isDonation?: boolean;
+
+  @IsBoolean()
+  @IsOptional()
+  isVip?: boolean;
+
+  @IsString()
+  @IsOptional()
+  message?: string;
 }

backend/src/orders/orders.module.ts

@@ -4,9 +4,10 @@ import { OrdersService } from './orders.service';
 import { OrdersController } from './orders.controller';
 import { Order } from '../entities/order.entity';
 import { Course } from '../entities/course.entity';
+import { AppConfigModule } from '../config/config.module';
 
 @Module({
-  imports: [TypeOrmModule.forFeature([Order, Course])],
+  imports: [TypeOrmModule.forFeature([Order, Course]), AppConfigModule],
   providers: [OrdersService],
   controllers: [OrdersController],
   exports: [OrdersService],

backend/src/orders/orders.service.ts

@@ -5,9 +5,10 @@ import {
 } from '@nestjs/common';
 import { InjectRepository } from '@nestjs/typeorm';
 import { Repository } from 'typeorm';
-import { Order, OrderStatus } from '../entities/order.entity';
+import { Order, OrderStatus, OrderType } from '../entities/order.entity';
 import { Course } from '../entities/course.entity';
 import { CreateOrderDto } from './dto/create-order.dto';
+import { ConfigService } from '../config/config.service';
 
 @Injectable()
 export class OrdersService {
@@ -16,18 +17,36 @@ export class OrdersService {
     private orderRepository: Repository<Order>,
     @InjectRepository(Course)
     private courseRepository: Repository<Course>,
+    private configService: ConfigService,
   ) {}
 
   async create(userId: number, createOrderDto: CreateOrderDto) {
-    const course = await this.courseRepository.findOne({
-      where: { id: createOrderDto.courseId },
-    });
-    if (!course) {
-      throw new NotFoundException('Course not found');
-    }
+    let amount = 0;
+    let orderType = OrderType.PURCHASE;
+    let courseId = null;
+
+    if (createOrderDto.isVip) {
+      const config = await this.configService.getUiConfig();
+      amount = config.memberFee || 99;
+      orderType = OrderType.VIP;
+    } else {
+      if (!createOrderDto.courseId) {
+        throw new BadRequestException('Course ID is required for non-VIP orders');
+      }
+      const course = await this.courseRepository.findOne({
+        where: { id: createOrderDto.courseId },
+      });
+      if (!course) {
+        throw new NotFoundException('Course not found');
+      }
+
+      if (!createOrderDto.isDonation && Number(course.price) !== Number(createOrderDto.price)) {
+        throw new BadRequestException('Price mismatch');
+      }
 
-    if (Number(course.price) !== Number(createOrderDto.price)) {
-      throw new BadRequestException('Price mismatch');
+      amount = createOrderDto.isDonation ? (createOrderDto.price || 0) : course.price;
+      orderType = createOrderDto.isDonation ? OrderType.DONATION : OrderType.PURCHASE;
+      courseId = course.id;
     }
 
     // Generate simple order number with timestamp to avoid collision under high concurrency
@@ -41,9 +60,11 @@ export class OrdersService {
     const order = this.orderRepository.create({
       orderNo,
       userId,
-      courseId: course.id,
-      amount: course.price,
+      courseId,
+      amount,
       status: OrderStatus.PENDING,
+      orderType,
+      message: createOrderDto.message,
     });
 
     await this.orderRepository.save(order);

backend/src/payment/payment.module.ts

@@ -5,9 +5,11 @@ import { PaymentController } from './payment.controller';
 import { Payment } from '../entities/payment.entity';
 import { Order } from '../entities/order.entity';
 import { UserCourse } from '../entities/user-course.entity';
+import { User } from '../entities/user.entity';
+import { Course } from '../entities/course.entity';
 
 @Module({
-  imports: [TypeOrmModule.forFeature([Payment, Order, UserCourse])],
+  imports: [TypeOrmModule.forFeature([Payment, Order, UserCourse, User, Course])],
   providers: [PaymentService],
   controllers: [PaymentController],
 })

backend/src/payment/payment.service.ts

@@ -7,9 +7,11 @@ import { InjectRepository } from '@nestjs/typeorm';
 import { Repository } from 'typeorm';
 import * as crypto from 'crypto';
 import { Payment, PaymentStatus, PayType } from '../entities/payment.entity';
-import { Order, OrderStatus } from '../entities/order.entity';
+import { Order, OrderStatus, OrderType } from '../entities/order.entity';
 import { UserCourse } from '../entities/user-course.entity';
 import { PreparePaymentDto } from './dto/prepare-payment.dto';
+import { User } from '../entities/user.entity';
+import { Course } from '../entities/course.entity';
 
 @Injectable()
 export class PaymentService {
@@ -20,6 +22,10 @@ export class PaymentService {
     private orderRepository: Repository<Order>,
     @InjectRepository(UserCourse)
     private userCourseRepository: Repository<UserCourse>,
+    @InjectRepository(User)
+    private userRepository: Repository<User>,
+    @InjectRepository(Course)
+    private courseRepository: Repository<Course>,
   ) {}
 
   async prepare(userId: number, preparePaymentDto: PreparePaymentDto) {
@@ -80,24 +86,49 @@ export class PaymentService {
       order.paidAt = new Date();
       await this.orderRepository.save(order);
 
-      // Grant access
-      const expiredAt = new Date();
-      expiredAt.setFullYear(expiredAt.getFullYear() + 1); // 1 year access
-
-      const accessToken = crypto.randomBytes(32).toString('hex');
-
-      const userCourse = this.userCourseRepository.create({
-        userId: order.userId,
-        courseId: order.courseId,
-        accessToken,
-        expiredAt,
-      });
-
-      // Handle duplicate purchase gracefully
-      try {
-        await this.userCourseRepository.save(userCourse);
-      } catch {
-        // Already purchased, maybe extend expiration
+      // Only grant access if it's a purchase order
+      if (order.orderType === OrderType.PURCHASE) {
+        // Send email with drive link instead of generating access token
+        const user = await this.userRepository.findOne({ where: { id: order.userId } });
+        const course = await this.courseRepository.findOne({ where: { id: order.courseId } });
+
+        if (user && course && course.driveLink) {
+          // In a real application, you would use a mail service like Nodemailer here
+          console.log('----------------------------------------');
+          console.log(`[MOCK EMAIL SERVICE] Sending course materials...`);
+          console.log(`To: ${user.email}`);
+          console.log(`Subject: 您购买的课程【${course.title}】资料`);
+          console.log(`Body: 感谢您的购买！您的课程资料链接如下：\n${course.driveLink}`);
+          console.log('----------------------------------------');
+        }
+
+        // We still create a UserCourse record to mark that the user has purchased it,
+        // but the accessToken isn't strictly needed anymore for viewing the content.
+        const expiredAt = new Date();
+        expiredAt.setFullYear(expiredAt.getFullYear() + 1); // 1 year access
+
+        const accessToken = crypto.randomBytes(32).toString('hex');
+
+        const userCourse = this.userCourseRepository.create({
+          userId: order.userId,
+          courseId: order.courseId,
+          accessToken,
+          expiredAt,
+        });
+
+        // Handle duplicate purchase gracefully
+        try {
+          await this.userCourseRepository.save(userCourse);
+        } catch {
+          // Already purchased, maybe extend expiration
+        }
+      } else if (order.orderType === OrderType.VIP) {
+        // Upgrade user to VIP
+        const user = await this.userRepository.findOne({ where: { id: order.userId } });
+        if (user) {
+          user.isVip = true;
+          await this.userRepository.save(user);
+        }
       }
     } else {
       payment.status = PaymentStatus.FAILED;

backend/src/seed-categories.ts

@@ -8,24 +8,27 @@ const CATEGORIES = [
   'Comfyui资讯',
   '满血整合包',
   '闭源API接口',
-  '应用广场'
+  '应用广场',
 ];
 
 async function bootstrap() {
   const app = await NestFactory.createApplicationContext(AppModule);
-  
+
   const courseRepository = app.get(getRepositoryToken(Course));
-  
+
   const courses = await courseRepository.find();
   console.log(`Found ${courses.length} courses. Updating categories...`);
-  
+
   for (const course of courses) {
-    const randomCategory = CATEGORIES[Math.floor(Math.random() * CATEGORIES.length)];
+    const randomCategory =
+      CATEGORIES[Math.floor(Math.random() * CATEGORIES.length)];
     course.category = randomCategory;
     await courseRepository.save(course);
-    console.log(`Updated course ${course.id} "${course.title}" to category: ${randomCategory}`);
+    console.log(
+      `Updated course ${course.id} "${course.title}" to category: ${randomCategory}`,
+    );
   }
-  
+
   console.log('Finished updating categories.');
   await app.close();
 }

deploy/nginx/zhyjs.com.cn.conf

@@ -0,0 +1,19 @@
+server {
+    listen 80;
+    server_name zhyjs.com.cn www.zhyjs.com.cn;
+
+    # 代理所有请求到前端服务 (端口默认为 Dockerfile 中的 7860)
+    location / {
+        proxy_pass http://127.0.0.1:7860;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_cache_bypass $http_upgrade;
+        
+        # 传递真实 IP
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+}

frontend/package-lock.json

@@ -17,6 +17,7 @@
         "react-dom": "^18",
         "react-quill": "^2.0.0",
         "tailwind-merge": "^3.5.0",
+        "xlsx": "^0.18.5",
         "zustand": "^5.0.12"
       },
       "devDependencies": {
@@ -1175,6 +1176,15 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/adler-32": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz",
+      "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.14.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.14.0.tgz",
@@ -1635,6 +1645,19 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/cfb": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz",
+      "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "crc-32": "~1.2.0"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -1726,6 +1749,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/codepage": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
+      "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -1775,6 +1807,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/crc-32": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
+      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
+      "license": "Apache-2.0",
+      "bin": {
+        "crc32": "bin/crc32.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -2870,6 +2914,15 @@
         "node": ">= 6"
       }
     },
+    "node_modules/frac": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
+      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -5330,6 +5383,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ssf": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
+      "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "frac": "~1.1.2"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/stable-hash": {
       "version": "0.0.5",
       "resolved": "https://registry.npmjs.org/stable-hash/-/stable-hash-0.0.5.tgz",
@@ -6145,6 +6210,24 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/wmf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
+      "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/word": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
+      "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/word-wrap": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
@@ -6263,6 +6346,27 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/xlsx": {
+      "version": "0.18.5",
+      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz",
+      "integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "cfb": "~1.2.1",
+        "codepage": "~1.15.0",
+        "crc-32": "~1.2.1",
+        "ssf": "~0.11.2",
+        "wmf": "~1.0.1",
+        "word": "~0.3.0"
+      },
+      "bin": {
+        "xlsx": "bin/xlsx.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",

frontend/package.json

@@ -18,6 +18,7 @@
     "react-dom": "^18",
     "react-quill": "^2.0.0",
     "tailwind-merge": "^3.5.0",
+    "xlsx": "^0.18.5",
     "zustand": "^5.0.12"
   },
   "devDependencies": {

frontend/src/app/admin/page.tsx

@@ -3,9 +3,10 @@
 import { useEffect, useState, useCallback } from "react";
 import { useRouter } from "next/navigation";
 import { api } from "@/lib/api";
-import { useAuthStore } from "@/lib/store";
-import { Plus, LayoutDashboard, ShoppingCart, ArrowLeft, Settings } from "lucide-react";
+import { useAuthStore, useConfigStore } from "@/lib/store";
+import { Plus, LayoutDashboard, ShoppingCart, Settings, BarChart3, Download } from "lucide-react";
 import RichTextEditor from "@/components/RichTextEditor";
+import * as XLSX from 'xlsx';
 
 interface Course {
   id: number;
@@ -16,6 +17,8 @@ interface Course {
   price: number;
   category?: string;
   viewCount?: number;
+  likeCount?: number;
+  starCount?: number;
 }
 
 interface Order {
@@ -30,10 +33,29 @@ interface Order {
 export default function AdminDashboard() {
   const router = useRouter();
   const { user, token } = useAuthStore();
-  const [activeTab, setActiveTab] = useState<'courses' | 'orders'>('courses');
+  const { uiConfig: globalUiConfig, setUiConfig: setGlobalUiConfig } = useConfigStore();
+  const [activeTab, setActiveTab] = useState<'courses' | 'orders' | 'settings' | 'statistics'>('courses');
   const [courses, setCourses] = useState<Course[]>([]);
   const [orders, setOrders] = useState<Order[]>([]);
   
+  // Statistics State
+  const [statistics, setStatistics] = useState({ vipAmount: 0, donationAmount: 0, purchaseAmount: 0 });
+  const [statisticsDetails, setStatisticsDetails] = useState<any[]>([]);
+  const [activeStatTab, setActiveStatTab] = useState<'all' | 'vip' | 'donation' | 'purchase'>('all');
+  const [startDate, setStartDate] = useState('');
+  const [endDate, setEndDate] = useState('');
+  
+  // UI Config Form
+  const [uiConfig, setUiConfig] = useState({
+    siteName: '',
+    logo: '',
+    footerText: '',
+    heroBackground: '',
+    navLinks: [] as { label: string; value: string }[],
+    banners: [] as { imageUrl: string; linkUrl: string }[],
+    memberFee: 99,
+  });
+  
   // Course Form
   const [title, setTitle] = useState('');
   const [description, setDescription] = useState('');
@@ -42,6 +64,8 @@ export default function AdminDashboard() {
   const [price, setPrice] = useState('');
   const [category, setCategory] = useState('');
   const [viewCount, setViewCount] = useState<number | string>(0);
+  const [likeCount, setLikeCount] = useState<number | string>(0);
+  const [starCount, setStarCount] = useState<number | string>(0);
   const [showAddForm, setShowAddForm] = useState(false);
   const [editingCourseId, setEditingCourseId] = useState<number | null>(null);
   const [showSettings, setShowSettings] = useState(true);
@@ -51,14 +75,99 @@ export default function AdminDashboard() {
       if (activeTab === 'courses') {
         const res = await api.get('/api/courses'); // In real app, might want a specific admin endpoint to see inactive ones too
         if (res.success) setCourses(res.data);
-      } else {
+      } else if (activeTab === 'orders') {
         const res = await api.get('/api/admin/orders');
         if (res.success) setOrders(res.data);
+      } else if (activeTab === 'settings') {
+        const res = await api.get('/api/config/ui');
+        if (res.success) setUiConfig(res.data);
+      } else if (activeTab === 'statistics') {
+        let url = '/api/admin/statistics';
+        const params = new URLSearchParams();
+        if (startDate) params.append('startDate', startDate);
+        if (endDate) params.append('endDate', endDate);
+        if (params.toString()) url += `?${params.toString()}`;
+        
+        const res = await api.get(url);
+        if (res.success) setStatistics(res.data);
+
+        // Fetch details
+        let detailsUrl = '/api/admin/statistics/details';
+        const detailsParams = new URLSearchParams();
+        detailsParams.append('type', activeStatTab);
+        if (startDate) detailsParams.append('startDate', startDate);
+        if (endDate) detailsParams.append('endDate', endDate);
+        detailsUrl += `?${detailsParams.toString()}`;
+
+        const detailsRes = await api.get(detailsUrl);
+        if (detailsRes.success) setStatisticsDetails(detailsRes.data);
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  }, [activeTab, startDate, endDate, activeStatTab]);
+
+  const handleSaveUiConfig = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      const res = await api.put('/api/config/ui', uiConfig);
+      if (res.success) {
+        alert('界面设置已保存，立即生效。');
+        setUiConfig(res.data);
+        setGlobalUiConfig(res.data);
       }
     } catch (err) {
       console.error(err);
+      alert('保存设置失败');
     }
-  }, [activeTab]);
+  };
+
+  const handleExportExcel = () => {
+    if (statisticsDetails.length === 0) {
+      alert('没有数据可导出');
+      return;
+    }
+
+    const dataToExport = statisticsDetails.map(item => {
+      const baseData: any = {
+        '时间': new Date(item.createdAt).toLocaleString('zh-CN', {
+          year: 'numeric', month: '2-digit', day: '2-digit',
+          hour: '2-digit', minute: '2-digit'
+        }),
+        '订单号': item.orderNo,
+        '用户昵称': item.user?.nickname || item.user?.email || '未知用户',
+        '用户邮箱': item.user?.email || '-',
+      };
+
+      if (activeStatTab === 'purchase') {
+        baseData['分类'] = item.course?.category || '未分类';
+        baseData['课程名称'] = item.course?.title || '-';
+      }
+
+      baseData['金额(元)'] = Number(item.amount).toFixed(2);
+      
+      return baseData;
+    });
+
+    const worksheet = XLSX.utils.json_to_sheet(dataToExport);
+    const workbook = XLSX.utils.book_new();
+    
+    // Auto-size columns
+    const colWidths = Object.keys(dataToExport[0]).map(key => ({ wch: Math.max(key.length * 2, 15) }));
+    worksheet['!cols'] = colWidths;
+
+    const sheetNameMap: Record<string, string> = {
+      'all': '全部明细',
+      'vip': '会员费明细',
+      'donation': '打赏明细',
+      'purchase': '购买明细'
+    };
+    
+    XLSX.utils.book_append_sheet(workbook, worksheet, sheetNameMap[activeStatTab]);
+    
+    const fileName = `${sheetNameMap[activeStatTab]}_${new Date().toISOString().split('T')[0]}.xlsx`;
+    XLSX.writeFile(workbook, fileName);
+  };
 
   useEffect(() => {
     if (!token || user?.role !== 'admin') {
@@ -71,14 +180,16 @@ export default function AdminDashboard() {
   const handleSubmitCourse = async (e: React.FormEvent) => {
     e.preventDefault();
     try {
-      const payload = {
-        title,
-        description,
-        coverImage,
-        driveLink,
-        price: Number(price),
+      const payload = { 
+        title, 
+        description, 
+        coverImage, 
+        driveLink, 
+        price: Number(price), 
         category,
-        viewCount: Number(viewCount) || 0
+        viewCount: Number(viewCount),
+        likeCount: Number(likeCount),
+        starCount: Number(starCount)
       };
       
       let res;
@@ -94,7 +205,7 @@ export default function AdminDashboard() {
         setEditingCourseId(null);
         fetchData();
         // Reset form
-        setTitle(''); setDescription(''); setCoverImage(''); setDriveLink(''); setPrice(''); setCategory(''); setViewCount(0);
+        setTitle(''); setDescription(''); setCoverImage(''); setDriveLink(''); setPrice(''); setCategory(''); setViewCount(0); setLikeCount(0); setStarCount(0);
       }
     } catch (err) {
       console.error(err);
@@ -111,6 +222,8 @@ export default function AdminDashboard() {
     setPrice(course.price ? course.price.toString() : '');
     setCategory(course.category || '');
     setViewCount(course.viewCount || 0);
+    setLikeCount(course.likeCount || 0);
+    setStarCount(course.starCount || 0);
     setShowAddForm(true);
   };
 
@@ -162,6 +275,20 @@ export default function AdminDashboard() {
             <ShoppingCart className="w-5 h-5" />
             订单管理
           </button>
+          <button 
+            onClick={() => setActiveTab('settings')}
+            className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-colors ${activeTab === 'settings' ? 'bg-blue-50 text-blue-600 font-medium' : 'text-gray-600 hover:bg-gray-50'}`}
+          >
+            <Settings className="w-5 h-5" />
+            界面设置
+          </button>
+          <button 
+            onClick={() => setActiveTab('statistics')}
+            className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-colors ${activeTab === 'statistics' ? 'bg-blue-50 text-blue-600 font-medium' : 'text-gray-600 hover:bg-gray-50'}`}
+          >
+            <BarChart3 className="w-5 h-5" />
+            数据统计
+          </button>
         </nav>
       </div>
 
@@ -176,7 +303,7 @@ export default function AdminDashboard() {
                   if (showAddForm) {
                     setShowAddForm(false);
                     setEditingCourseId(null);
-                    setTitle(''); setDescription(''); setCoverImage(''); setDriveLink(''); setPrice(''); setCategory(''); setViewCount(0);
+                    setTitle(''); setDescription(''); setCoverImage(''); setDriveLink(''); setPrice(''); setCategory(''); setViewCount(0); setLikeCount(0); setStarCount(0);
                   } else {
                     setShowAddForm(true);
                   }
@@ -275,6 +402,18 @@ export default function AdminDashboard() {
                       <input type="number" value={viewCount} onChange={e => setViewCount(e.target.value)} className="w-full px-3 py-2 rounded-lg border border-gray-200 bg-white" placeholder="0" />
                     </div>
 
+                    {/* Like Count */}
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-2">点赞人数设置</label>
+                      <input type="number" value={likeCount} onChange={e => setLikeCount(e.target.value)} className="w-full px-3 py-2 rounded-lg border border-gray-200 bg-white" placeholder="0" />
+                    </div>
+
+                    {/* Star Count */}
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-2">收藏人数设置</label>
+                      <input type="number" value={starCount} onChange={e => setStarCount(e.target.value)} className="w-full px-3 py-2 rounded-lg border border-gray-200 bg-white" placeholder="0" />
+                    </div>
+
                     {/* Category */}
                     <div>
                       <label className="block text-sm font-medium text-gray-700 mb-2">分类</label>
@@ -284,11 +423,9 @@ export default function AdminDashboard() {
                         className="w-full px-3 py-2 rounded-lg border border-gray-200 bg-white"
                       >
                         <option value="">请选择分类</option>
-                        <option value="AI新资讯">AI新资讯</option>
-                        <option value="Comfyui资讯">Comfyui资讯</option>
-                        <option value="满血整合包">满血整合包</option>
-                        <option value="闭源API接口">闭源API接口</option>
-                        <option value="应用广场">应用广场</option>
+                        {globalUiConfig?.navLinks?.map(link => (
+                          <option key={link.value} value={link.label}>{link.label}</option>
+                        ))}
                       </select>
                     </div>
 
@@ -388,6 +525,417 @@ export default function AdminDashboard() {
             </div>
           </div>
         )}
+        {activeTab === 'settings' && (
+          <div>
+            <h2 className="text-2xl font-bold text-gray-900 mb-8">界面设置</h2>
+            <form onSubmit={handleSaveUiConfig} className="max-w-2xl space-y-6">
+              <div className="space-y-4 bg-gray-50 p-6 rounded-xl border border-gray-100">
+                <h3 className="font-semibold text-gray-900">基础信息</h3>
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">站点名称</label>
+                  <input 
+                    type="text" 
+                    value={uiConfig.siteName} 
+                    onChange={e => setUiConfig({ ...uiConfig, siteName: e.target.value })}
+                    className="w-full px-4 py-2 rounded-lg border border-gray-200"
+                    required
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">Logo URL (可选)</label>
+                  <input 
+                    type="text" 
+                    value={uiConfig.logo} 
+                    onChange={e => setUiConfig({ ...uiConfig, logo: e.target.value })}
+                    className="w-full px-4 py-2 rounded-lg border border-gray-200"
+                    placeholder="输入Logo图片URL，若不填则显示站点名称"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">顶部背景图 URL (可选)</label>
+                  <div className="space-y-2">
+                    {uiConfig.heroBackground && (
+                      <div className="relative w-full max-w-sm aspect-[3/1] rounded-lg overflow-hidden border border-gray-200">
+                        <img src={uiConfig.heroBackground} alt="Hero Background" className="w-full h-full object-cover" />
+                        <button type="button" onClick={() => setUiConfig({ ...uiConfig, heroBackground: '' })} className="absolute top-2 right-2 bg-black/50 text-white rounded-full p-1 hover:bg-black/70">
+                          &times;
+                        </button>
+                      </div>
+                    )}
+                    <div className="flex gap-2">
+                      <input 
+                        type="text" 
+                        value={uiConfig.heroBackground || ''} 
+                        onChange={e => setUiConfig({ ...uiConfig, heroBackground: e.target.value })}
+                        className="flex-1 px-4 py-2 rounded-lg border border-gray-200"
+                        placeholder="输入图片URL，或使用右侧按钮上传"
+                      />
+                      <label className="cursor-pointer px-4 py-2 bg-gray-100 text-gray-700 rounded-lg font-medium hover:bg-gray-200 transition-colors flex items-center">
+                        上传
+                        <input 
+                          type="file" 
+                          accept="image/*" 
+                          className="hidden" 
+                          onChange={async (e) => {
+                            const file = e.target.files?.[0];
+                            if (!file) return;
+                            const formData = new FormData();
+                            formData.append('file', file);
+                            try {
+                              const res = await api.post('/api/upload', formData, {
+                                headers: { 'Content-Type': 'multipart/form-data' }
+                              });
+                              if (res.success) setUiConfig({ ...uiConfig, heroBackground: res.url });
+                              else alert('上传失败');
+                            } catch (err) {
+                              console.error(err);
+                              alert('上传失败');
+                            }
+                          }} 
+                        />
+                      </label>
+                    </div>
+                  </div>
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">底部版权文案</label>
+                  <input 
+                    type="text" 
+                    value={uiConfig.footerText} 
+                    onChange={e => setUiConfig({ ...uiConfig, footerText: e.target.value })}
+                    className="w-full px-4 py-2 rounded-lg border border-gray-200"
+                    required
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">会员收费 (¥)</label>
+                  <input 
+                    type="number" 
+                    value={uiConfig.memberFee ?? 99} 
+                    onChange={e => setUiConfig({ ...uiConfig, memberFee: Number(e.target.value) })}
+                    className="w-full px-4 py-2 rounded-lg border border-gray-200"
+                    min="0"
+                    step="0.01"
+                    required
+                  />
+                </div>
+              </div>
+
+              <div className="space-y-4 bg-gray-50 p-6 rounded-xl border border-gray-100">
+                <div className="flex justify-between items-center">
+                  <h3 className="font-semibold text-gray-900">导航栏与分类管理</h3>
+                  <button 
+                    type="button"
+                    onClick={() => setUiConfig({
+                      ...uiConfig,
+                      navLinks: [...(uiConfig.navLinks || []), { label: '新分类', value: 'new-category' }]
+                    })}
+                    className="text-sm text-blue-600 hover:text-blue-700 flex items-center gap-1"
+                  >
+                    <Plus className="w-4 h-4" /> 添加分类
+                  </button>
+                </div>
+                <div className="space-y-3">
+                  {(uiConfig.navLinks || []).map((link, idx) => (
+                    <div key={idx} className="flex gap-3 items-center">
+                      <input 
+                        type="text" 
+                        value={link.label} 
+                        onChange={e => {
+                          const newLinks = [...uiConfig.navLinks];
+                          newLinks[idx].label = e.target.value;
+                          setUiConfig({ ...uiConfig, navLinks: newLinks });
+                        }}
+                        className="flex-1 px-4 py-2 rounded-lg border border-gray-200"
+                        placeholder="显示名称 (如: AI新资讯)"
+                        required
+                      />
+                      <input 
+                        type="text" 
+                        value={link.value} 
+                        onChange={e => {
+                          const newLinks = [...uiConfig.navLinks];
+                          newLinks[idx].value = e.target.value;
+                          setUiConfig({ ...uiConfig, navLinks: newLinks });
+                        }}
+                        className="flex-1 px-4 py-2 rounded-lg border border-gray-200"
+                        placeholder="路由值 (如: ai-news)"
+                        required
+                      />
+                      <button 
+                        type="button"
+                        onClick={() => {
+                          const newLinks = [...uiConfig.navLinks];
+                          newLinks.splice(idx, 1);
+                          setUiConfig({ ...uiConfig, navLinks: newLinks });
+                        }}
+                        className="p-2 text-red-500 hover:bg-red-50 rounded-lg"
+                      >
+                        删除
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              <div className="space-y-4 bg-gray-50 p-6 rounded-xl border border-gray-100">
+                <div className="flex justify-between items-center">
+                  <h3 className="font-semibold text-gray-900">广告图管理</h3>
+                  <button 
+                    type="button"
+                    onClick={() => setUiConfig({
+                      ...uiConfig,
+                      banners: [...(uiConfig.banners || []), { imageUrl: '', linkUrl: '' }]
+                    })}
+                    className="text-sm text-blue-600 hover:text-blue-700 flex items-center gap-1"
+                  >
+                    <Plus className="w-4 h-4" /> 添加广告图
+                  </button>
+                </div>
+                <div className="space-y-4">
+                  {(uiConfig.banners || []).map((banner, idx) => (
+                    <div key={idx} className="flex flex-col md:flex-row gap-3 items-start md:items-center bg-white p-4 rounded-lg border border-gray-200">
+                      <div className="flex-1 w-full space-y-3">
+                        <div className="flex gap-2 items-center">
+                          {banner.imageUrl && (
+                            <img src={banner.imageUrl} alt="banner preview" className="w-16 h-10 object-cover rounded" />
+                          )}
+                          <input 
+                            type="text" 
+                            value={banner.imageUrl} 
+                            onChange={e => {
+                              const newBanners = [...(uiConfig.banners || [])];
+                              newBanners[idx].imageUrl = e.target.value;
+                              setUiConfig({ ...uiConfig, banners: newBanners });
+                            }}
+                            className="flex-1 px-3 py-2 rounded-md border border-gray-200 text-sm"
+                            placeholder="图片 URL (或右侧上传)"
+                            required
+                          />
+                          <label className="cursor-pointer px-3 py-2 bg-gray-100 text-gray-700 rounded-md text-sm font-medium hover:bg-gray-200 transition-colors">
+                            上传
+                            <input 
+                              type="file" 
+                              accept="image/*" 
+                              className="hidden" 
+                              onChange={async (e) => {
+                                const file = e.target.files?.[0];
+                                if (!file) return;
+                                const formData = new FormData();
+                                formData.append('file', file);
+                                try {
+                                  const res = await api.post('/api/upload', formData, {
+                                    headers: { 'Content-Type': 'multipart/form-data' }
+                                  });
+                                  if (res.success) {
+                                    const newBanners = [...(uiConfig.banners || [])];
+                                    newBanners[idx].imageUrl = res.url;
+                                    setUiConfig({ ...uiConfig, banners: newBanners });
+                                  } else alert('上传失败');
+                                } catch (err) {
+                                  console.error(err);
+                                  alert('上传失败');
+                                }
+                              }} 
+                            />
+                          </label>
+                        </div>
+                        <input 
+                          type="text" 
+                          value={banner.linkUrl} 
+                          onChange={e => {
+                            const newBanners = [...(uiConfig.banners || [])];
+                            newBanners[idx].linkUrl = e.target.value;
+                            setUiConfig({ ...uiConfig, banners: newBanners });
+                          }}
+                          className="w-full px-3 py-2 rounded-md border border-gray-200 text-sm"
+                          placeholder="跳转链接 URL"
+                        />
+                      </div>
+                      <button 
+                        type="button"
+                        onClick={() => {
+                          const newBanners = [...(uiConfig.banners || [])];
+                          newBanners.splice(idx, 1);
+                          setUiConfig({ ...uiConfig, banners: newBanners });
+                        }}
+                        className="p-2 text-red-500 hover:bg-red-50 rounded-lg shrink-0 self-end md:self-auto"
+                      >
+                        删除
+                      </button>
+                    </div>
+                  ))}
+                  {(!uiConfig.banners || uiConfig.banners.length === 0) && (
+                    <div className="text-center py-4 text-gray-500 text-sm border-2 border-dashed border-gray-200 rounded-lg">
+                      暂无广告图，点击右上角添加
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              <div className="pt-4">
+                <button type="submit" className="px-6 py-2.5 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors">
+                  保存设置
+                </button>
+              </div>
+            </form>
+          </div>
+        )}
+
+        {activeTab === 'statistics' && (
+          <div>
+            <h2 className="text-2xl font-bold text-gray-900 mb-8">数据统计</h2>
+            
+            <div className="flex flex-wrap gap-4 mb-8 items-end">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">开始日期</label>
+                <input 
+                  type="date" 
+                  value={startDate} 
+                  onChange={e => setStartDate(e.target.value)}
+                  className="px-4 py-2 rounded-lg border border-gray-200"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">结束日期</label>
+                <input 
+                  type="date" 
+                  value={endDate} 
+                  onChange={e => setEndDate(e.target.value)}
+                  className="px-4 py-2 rounded-lg border border-gray-200"
+                />
+              </div>
+              <button 
+                onClick={fetchData}
+                className="px-6 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors"
+              >
+                查询
+              </button>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+              <div 
+                className={`p-6 rounded-2xl border cursor-pointer transition-all ${activeStatTab === 'all' ? 'bg-blue-100 border-blue-300 ring-2 ring-blue-500/20' : 'bg-blue-50 border-blue-100 hover:bg-blue-100'}`}
+                onClick={() => setActiveStatTab('all')}
+              >
+                <div className="text-blue-600 text-sm font-medium mb-2">总计收入</div>
+                <div className="text-3xl font-bold text-gray-900">
+                  ¥{(statistics.vipAmount + statistics.donationAmount + statistics.purchaseAmount).toFixed(2)}
+                </div>
+              </div>
+              
+              <div 
+                className={`p-6 rounded-2xl border cursor-pointer transition-all ${activeStatTab === 'vip' ? 'bg-yellow-100 border-yellow-300 ring-2 ring-yellow-500/20' : 'bg-yellow-50 border-yellow-100 hover:bg-yellow-100'}`}
+                onClick={() => setActiveStatTab('vip')}
+              >
+                <div className="text-yellow-600 text-sm font-medium mb-2">会员费统计</div>
+                <div className="text-2xl font-bold text-gray-900">¥{statistics.vipAmount.toFixed(2)}</div>
+              </div>
+
+              <div 
+                className={`p-6 rounded-2xl border cursor-pointer transition-all ${activeStatTab === 'donation' ? 'bg-green-100 border-green-300 ring-2 ring-green-500/20' : 'bg-green-50 border-green-100 hover:bg-green-100'}`}
+                onClick={() => setActiveStatTab('donation')}
+              >
+                <div className="text-green-600 text-sm font-medium mb-2">打赏统计</div>
+                <div className="text-2xl font-bold text-gray-900">¥{statistics.donationAmount.toFixed(2)}</div>
+              </div>
+
+              <div 
+                className={`p-6 rounded-2xl border cursor-pointer transition-all ${activeStatTab === 'purchase' ? 'bg-purple-100 border-purple-300 ring-2 ring-purple-500/20' : 'bg-purple-50 border-purple-100 hover:bg-purple-100'}`}
+                onClick={() => setActiveStatTab('purchase')}
+              >
+                <div className="text-purple-600 text-sm font-medium mb-2">购买统计</div>
+                <div className="text-2xl font-bold text-gray-900">¥{statistics.purchaseAmount.toFixed(2)}</div>
+              </div>
+            </div>
+
+            <div className="bg-white border border-gray-100 rounded-2xl overflow-hidden shadow-sm">
+              <div className="px-6 py-4 border-b border-gray-100 flex justify-between items-center bg-gray-50/50">
+                <h3 className="font-semibold text-gray-900">
+                  {activeStatTab === 'all' && '全部明细'}
+                  {activeStatTab === 'vip' && '会员费明细'}
+                  {activeStatTab === 'donation' && '打赏明细'}
+                  {activeStatTab === 'purchase' && '购买明细'}
+                </h3>
+                <button 
+                  onClick={handleExportExcel}
+                  disabled={statisticsDetails.length === 0}
+                  className="flex items-center gap-2 px-4 py-2 bg-white border border-gray-200 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  <Download className="w-4 h-4" /> 导出 Excel
+                </button>
+              </div>
+              <div className="overflow-x-auto">
+                <table className="w-full text-left border-collapse border border-gray-200">
+                  <thead>
+                    <tr className="bg-gray-50">
+                      <th className="py-3 px-6 font-medium border border-gray-200 text-sm text-gray-700">时间</th>
+                      <th className="py-3 px-6 font-medium border border-gray-200 text-sm text-gray-700">订单号</th>
+                      <th className="py-3 px-6 font-medium border border-gray-200 text-sm text-gray-700">用户</th>
+                      {activeStatTab === 'purchase' && (
+                        <>
+                          <th className="py-3 px-6 font-medium border border-gray-200 text-sm text-gray-700">分类</th>
+                          <th className="py-3 px-6 font-medium border border-gray-200 text-sm text-gray-700">课程名称</th>
+                        </>
+                      )}
+                      <th className="py-3 px-6 font-medium border border-gray-200 text-sm text-gray-700 text-right">金额</th>
+                    </tr>
+                  </thead>
+                  <tbody className="bg-white">
+                    {statisticsDetails.map((item, idx) => (
+                      <tr key={idx} className="text-sm hover:bg-gray-50/50 transition-colors">
+                        <td className="py-4 px-6 text-gray-500 border border-gray-200">
+                          {new Date(item.createdAt).toLocaleString('zh-CN', {
+                            year: 'numeric', month: '2-digit', day: '2-digit',
+                            hour: '2-digit', minute: '2-digit'
+                          })}
+                        </td>
+                        <td className="py-4 px-6 text-gray-500 font-mono text-xs border border-gray-200">{item.orderNo}</td>
+                        <td className="py-4 px-6 border border-gray-200">
+                          <div className="flex items-center gap-2">
+                            <div className="w-6 h-6 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center font-bold text-xs shrink-0">
+                              {item.user?.nickname?.charAt(0).toUpperCase() || 'U'}
+                            </div>
+                            <span className="font-medium text-gray-900 truncate max-w-[120px]" title={item.user?.nickname || item.user?.email}>
+                              {item.user?.nickname || item.user?.email || '未知用户'}
+                            </span>
+                          </div>
+                        </td>
+                        {activeStatTab === 'purchase' && (
+                          <>
+                            <td className="py-4 px-6 border border-gray-200">
+                              <span className="px-2 py-1 bg-gray-100 text-gray-600 rounded-md text-xs font-medium whitespace-nowrap">
+                                {item.course?.category || '未分类'}
+                              </span>
+                            </td>
+                            <td className="py-4 px-6 text-gray-900 font-medium max-w-[200px] truncate border border-gray-200" title={item.course?.title || '-'}>
+                              {item.course?.title || '-'}
+                            </td>
+                          </>
+                        )}
+                        <td className="py-4 px-6 font-semibold text-gray-900 text-right border border-gray-200">
+                          ¥{Number(item.amount).toFixed(2)}
+                        </td>
+                      </tr>
+                    ))}
+                    {statisticsDetails.length === 0 && (
+                      <tr>
+                        <td colSpan={activeStatTab === 'purchase' ? 6 : 4} className="py-12 text-center text-gray-500 border border-gray-200">
+                          <div className="flex flex-col items-center justify-center">
+                            <div className="w-16 h-16 bg-gray-50 rounded-full flex items-center justify-center mb-3">
+                              <span className="text-2xl text-gray-300">📊</span>
+                            </div>
+                            <p>该时间段内暂无数据</p>
+                          </div>
+                        </td>
+                      </tr>
+                    )}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+        )}
       </div>
     </div>
   );

frontend/src/app/client-layout.tsx

@@ -1,30 +1,131 @@
 "use client";
 
 import Link from "next/link";
-import { useAuthStore } from "@/lib/store";
+import { useAuthStore, useConfigStore } from "@/lib/store";
 import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { api } from "@/lib/api";
 
 export default function ClientLayout({ children }: { children: React.ReactNode }) {
   const { user, logout } = useAuthStore();
+  const { uiConfig, setUiConfig } = useConfigStore();
   const router = useRouter();
+  const [isInitializing, setIsInitializing] = useState(true);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const { setAuth, token } = useAuthStore();
+
+  useEffect(() => {
+    let isMounted = true;
+    
+    const initApp = async () => {
+      try {
+        const configPromise = api.get('/api/config/ui').catch(e => {
+          console.error('Failed to fetch UI config:', e);
+          return null;
+        });
+
+        const authPromise = (async () => {
+          const storedToken = localStorage.getItem('token');
+          if (storedToken && !user) {
+            try {
+              const res = await api.get('/api/auth/profile');
+              if (res.success && isMounted) {
+                setAuth(res.data, storedToken);
+              }
+            } catch (err) {
+              console.error('Failed to restore auth:', err);
+              localStorage.removeItem('token');
+            }
+          }
+        })();
+
+        const [configRes] = await Promise.all([configPromise, authPromise]);
+
+        if (isMounted && configRes && configRes.success && configRes.data) {
+          setUiConfig(configRes.data);
+        }
+      } finally {
+        if (isMounted) {
+          setIsInitializing(false);
+        }
+      }
+    };
+
+    if (!uiConfig?.siteName || !user) {
+      initApp();
+    } else {
+      setIsInitializing(false);
+    }
+
+    return () => {
+      isMounted = false;
+    };
+  }, [setUiConfig, setAuth, uiConfig?.siteName, user]);
 
   const handleLogout = () => {
     logout();
     router.push('/');
   };
 
+  const handleUpgradeVip = async () => {
+    try {
+      const res = await api.post('/api/orders/create', { isVip: true });
+      if (res.success) {
+        router.push(`/payment/${res.data.orderId}`);
+      }
+    } catch (err) {
+      console.error(err);
+      alert('创建会员订单失败，请稍后重试');
+    }
+  };
+
+  const getAvatarColor = (name: string) => {
+    let hash = 0;
+    for (let i = 0; i < name.length; i++) {
+      hash = name.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    const hue = Math.abs(hash % 360);
+    return `hsl(${hue}, 70%, 50%)`;
+  };
+
+  if (isInitializing) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-50">
+        <div className="flex flex-col items-center gap-3">
+          <div className="w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
+          <p className="text-gray-500 font-medium">应用加载中...</p>
+        </div>
+      </div>
+    );
+  }
+
+  const siteName = uiConfig?.siteName || '极简AI';
+  const footerText = uiConfig?.footerText || `© ${new Date().getFullYear()} 极简AI. 保留所有权利。`;
+  const navLinks = uiConfig?.navLinks || [];
+
   return (
     <>
       <header className="bg-white border-b sticky top-0 z-50">
         <div className="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
-          <Link href="/" className="text-xl font-bold text-blue-600">极简AI</Link>
+          <Link href="/" className="text-xl font-bold text-blue-600">
+            {uiConfig?.logo ? (
+              // eslint-disable-next-line @next/next/no-img-element
+              <img src={uiConfig.logo} alt={siteName} className="h-8 object-contain" />
+            ) : (
+              siteName
+            )}
+          </Link>
           <nav className="flex items-center gap-6">
             <Link href="/" className="text-gray-600 hover:text-blue-600 font-medium">首页</Link>
-            <Link href="/?category=ai-news" className="text-gray-600 hover:text-blue-600 font-medium">AI新资讯</Link>
-            <Link href="/?category=comfyui" className="text-gray-600 hover:text-blue-600 font-medium">Comfyui资讯</Link>
-            <Link href="/?category=full-blood" className="text-gray-600 hover:text-blue-600 font-medium">满血整合包</Link>
-            <Link href="/?category=closed-api" className="text-gray-600 hover:text-blue-600 font-medium">闭源API接口</Link>
-            <Link href="/?category=app-square" className="text-gray-600 hover:text-blue-600 font-medium">应用广场</Link>
+            {navLinks.map((link, idx) => (
+              <Link 
+                key={idx} 
+                href={`/?category=${link.value}`} 
+                className="text-gray-600 hover:text-blue-600 font-medium"
+              >
+                {link.label}
+              </Link>
+            ))}
             
             {user ? (
               <>
@@ -37,14 +138,57 @@ export default function ClientLayout({ children }: { children: React.ReactNode }
                 {user.role === 'admin' && (
                   <Link href="/admin" className="text-gray-600 hover:text-blue-600 font-medium">管理后台</Link>
                 )}
-                <div className="flex items-center gap-4 border-l pl-6 ml-2">
-                  <span className="text-sm font-medium text-gray-900">{user.nickname}</span>
-                  <button 
-                    onClick={handleLogout}
-                    className="text-sm text-gray-500 hover:text-gray-900"
+                <div className="relative border-l pl-6 ml-2">
+                  <div 
+                    className="w-10 h-10 rounded-full flex items-center justify-center text-white font-bold cursor-pointer hover:opacity-90 transition-opacity select-none relative"
+                    style={{ backgroundColor: getAvatarColor(user.nickname) }}
+                    onClick={() => setDropdownOpen(!dropdownOpen)}
                   >
-                    退出登录
-                  </button>
+                    {user.nickname.charAt(0).toUpperCase()}
+                    {user.isVip && (
+                      <div className="absolute -bottom-1 -right-1 bg-yellow-400 text-xs text-white px-1.5 rounded-full border-2 border-white shadow-sm font-bold scale-75">
+                        VIP
+                      </div>
+                    )}
+                  </div>
+
+                  {dropdownOpen && (
+                    <>
+                      <div 
+                        className="fixed inset-0 z-40" 
+                        onClick={() => setDropdownOpen(false)}
+                      ></div>
+                      <div className="absolute right-0 mt-3 w-48 bg-white rounded-xl shadow-lg border border-gray-100 py-2 z-50 overflow-hidden">
+                        <div className="px-4 py-2 border-b border-gray-50 mb-1">
+                          <div className="text-sm font-medium text-gray-900 truncate">{user.nickname}</div>
+                          <div className="text-xs text-gray-500 truncate">{user.email}</div>
+                        </div>
+                        
+                        {!user.isVip && (
+                          <button 
+                            onClick={() => {
+                              setDropdownOpen(false);
+                              handleUpgradeVip();
+                            }}
+                            className="w-full text-left px-4 py-2.5 text-sm text-yellow-600 hover:bg-yellow-50 font-medium flex items-center transition-colors"
+                          >
+                            <span className="mr-2">👑</span>
+                            注册会员 (¥{uiConfig?.memberFee ?? 99})
+                          </button>
+                        )}
+                        
+                        <button 
+                          onClick={() => {
+                            setDropdownOpen(false);
+                            handleLogout();
+                          }}
+                          className="w-full text-left px-4 py-2.5 text-sm text-gray-600 hover:bg-gray-50 transition-colors"
+                        >
+                          退出登录
+                        </button>
+                      </div>
+                    </>
+                  )}
                 </div>
               </>
             ) : (
@@ -62,7 +206,7 @@ export default function ClientLayout({ children }: { children: React.ReactNode }
 
       <footer className="bg-white border-t py-8 mt-auto">
         <div className="max-w-7xl mx-auto px-4 text-center text-gray-500 text-sm">
-          © {new Date().getFullYear()} 极简AI. 保留所有权利。
+          {footerText}
         </div>
       </footer>
     </>

frontend/src/app/course/[id]/comments.tsx

@@ -0,0 +1,250 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { api } from "@/lib/api";
+import { useAuthStore } from "@/lib/store";
+
+interface Comment {
+  id: number;
+  courseId: number;
+  userId: number;
+  parentId: number | null;
+  replyToCommentId: number | null;
+  content: string;
+  createdAt: string;
+  user: {
+    id: number;
+    nickname: string;
+    avatar: string | null;
+    isVip: boolean;
+  };
+  replyToUser?: {
+    id: number;
+    nickname: string;
+  };
+}
+
+export default function Comments({ courseId }: { courseId: number }) {
+  const [comments, setComments] = useState<Comment[]>([]);
+  const [newComment, setNewComment] = useState("");
+  const [replyContent, setReplyContent] = useState("");
+  const [replyingTo, setReplyingTo] = useState<Comment | null>(null);
+  const [loading, setLoading] = useState(true);
+  const { user } = useAuthStore();
+  const [isPosting, setIsPosting] = useState(false);
+
+  useEffect(() => {
+    fetchComments();
+  }, [courseId]);
+
+  const fetchComments = async () => {
+    try {
+      const res = await api.get(`/api/courses/${courseId}/comments`);
+      if (res.success) {
+        setComments(res.data);
+      }
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSubmit = async (targetComment: Comment | null = null) => {
+    if (!user) {
+      alert("请先登录");
+      return;
+    }
+
+    const content = targetComment ? replyContent : newComment;
+    if (!content.trim()) return;
+
+    setIsPosting(true);
+    try {
+      let parentId = null;
+      let replyToCommentId = null;
+
+      if (targetComment) {
+        parentId = targetComment.parentId || targetComment.id;
+        replyToCommentId = targetComment.id;
+      }
+
+      const res = await api.post(`/api/courses/${courseId}/comments`, {
+        content,
+        parentId,
+        replyToCommentId,
+      });
+
+      if (res.success) {
+        setComments((prev) => [...prev, res.data]);
+        if (targetComment) {
+          setReplyContent("");
+          setReplyingTo(null);
+        } else {
+          setNewComment("");
+        }
+      }
+    } catch (err) {
+      console.error(err);
+      alert("发送评论失败");
+    } finally {
+      setIsPosting(false);
+    }
+  };
+
+  const getAvatarColor = (name: string) => {
+    let hash = 0;
+    for (let i = 0; i < name.length; i++) {
+      hash = name.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    const hue = Math.abs(hash % 360);
+    return `hsl(${hue}, 70%, 50%)`;
+  };
+
+  const renderComment = (comment: Comment, isReply = false) => {
+    return (
+      <div key={comment.id} className={`flex gap-3 sm:gap-4 ${isReply ? 'mt-4' : 'mt-6'}`}>
+        <div 
+          className={`${isReply ? 'w-8 h-8 text-sm' : 'w-10 h-10'} rounded-full flex-shrink-0 flex items-center justify-center text-white font-bold select-none relative`}
+          style={{ backgroundColor: getAvatarColor(comment.user.nickname) }}
+        >
+          {comment.user.nickname.charAt(0).toUpperCase()}
+          {comment.user.isVip && (
+            <div className={`absolute ${isReply ? '-bottom-1 -right-1 scale-50' : '-bottom-1 -right-1 scale-75'} bg-yellow-400 text-[10px] text-white px-1 rounded-full border-2 border-white font-bold`}>
+              VIP
+            </div>
+          )}
+        </div>
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 mb-1">
+            <span className="font-medium text-gray-400 truncate">{comment.user.nickname}</span>
+            <span className="text-xs sm:text-sm text-gray-500 whitespace-nowrap">
+              {new Date(comment.createdAt).toLocaleString()}
+            </span>
+          </div>
+          <p className="text-sm sm:text-base text-black whitespace-pre-wrap break-words">
+            {isReply && comment.replyToUser && comment.replyToCommentId !== comment.parentId && (
+              <span className="text-gray-500 mr-2">回复 <span className="text-gray-400">@{comment.replyToUser.nickname}</span>:</span>
+            )}
+            {comment.content}
+          </p>
+          
+          {user && (
+            <div className="mt-2">
+              <button 
+                onClick={() => {
+                  setReplyingTo(replyingTo?.id === comment.id ? null : comment);
+                  setReplyContent("");
+                }}
+                className="text-sm text-gray-400 hover:text-gray-600 font-medium"
+              >
+                回复
+              </button>
+            </div>
+          )}
+
+          {replyingTo?.id === comment.id && (
+            <div className="mt-3 sm:mt-4 flex flex-col sm:flex-row gap-2 sm:gap-3">
+              <input
+                type="text"
+                value={replyContent}
+                onChange={(e) => setReplyContent(e.target.value)}
+                placeholder={`回复 ${comment.user.nickname}...`}
+                className="flex-1 px-3 py-2 sm:px-4 sm:py-2 rounded-xl border border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none text-sm sm:text-base"
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                    handleSubmit(comment);
+                  }
+                }}
+                autoFocus
+              />
+              <div className="flex justify-end gap-2">
+                <button
+                  onClick={() => {
+                    setReplyingTo(null);
+                    setReplyContent("");
+                  }}
+                  className="px-4 py-2 bg-gray-100 text-gray-600 rounded-xl hover:bg-gray-200 transition-colors font-medium text-sm sm:text-base"
+                >
+                  取消
+                </button>
+                <button
+                  onClick={() => handleSubmit(comment)}
+                  disabled={!replyContent.trim() || isPosting}
+                  className="px-4 py-2 bg-blue-600 text-white rounded-xl hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed font-medium text-sm sm:text-base"
+                >
+                  {isPosting ? '发送中...' : '发送'}
+                </button>
+              </div>
+            </div>
+          )}
+
+          {/* Render replies */}
+          {!isReply && (
+            <div className="mt-4 space-y-4">
+              {comments
+                .filter((c) => c.parentId === comment.id)
+                .map((reply) => renderComment(reply, true))}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  };
+
+  const topLevelComments = comments.filter((c) => !c.parentId);
+
+  return (
+    <div className="mt-8 sm:mt-12 bg-white rounded-2xl shadow-sm border border-gray-100 p-4 sm:p-8">
+      <h3 className="text-lg sm:text-xl font-bold text-gray-900 mb-4 sm:mb-6">评论区 ({comments.length})</h3>
+      
+      <div className="flex gap-3 sm:gap-4 mb-6 sm:mb-8">
+        {user ? (
+          <div 
+            className="w-10 h-10 rounded-full flex-shrink-0 flex items-center justify-center text-white font-bold select-none relative"
+            style={{ backgroundColor: getAvatarColor(user.nickname) }}
+          >
+            {user.nickname.charAt(0).toUpperCase()}
+            {user.isVip && (
+              <div className="absolute -bottom-1 -right-1 bg-yellow-400 text-[10px] text-white px-1 rounded-full border-2 border-white font-bold scale-75">
+                VIP
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className="w-10 h-10 sm:w-12 sm:h-12 rounded-full flex-shrink-0 bg-gray-100 flex items-center justify-center text-gray-400">
+            ?
+          </div>
+        )}
+        <div className="flex-1 min-w-0">
+          <textarea
+            value={newComment}
+            onChange={(e) => setNewComment(e.target.value)}
+            placeholder={user ? "写下你的评论..." : "请先登录后发表评论"}
+            className="w-full px-3 py-2 sm:px-4 sm:py-3 rounded-xl border border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none min-h-[80px] sm:min-h-[100px] resize-y text-sm sm:text-base"
+            disabled={!user}
+          />
+          <div className="mt-2 sm:mt-3 flex justify-end">
+            <button
+              onClick={() => handleSubmit()}
+              disabled={!user || !newComment.trim() || isPosting}
+              className="px-4 py-2 sm:px-6 sm:py-2.5 bg-blue-600 text-white rounded-xl hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed font-medium text-sm sm:text-base"
+            >
+              {isPosting ? '发表中...' : '发表评论'}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-4 sm:space-y-6 divide-y divide-gray-100">
+        {loading ? (
+          <div className="text-center text-gray-500 py-8">加载评论中...</div>
+        ) : topLevelComments.length > 0 ? (
+          topLevelComments.map((comment) => renderComment(comment))
+        ) : (
+          <div className="text-center text-gray-500 py-8">暂无评论，来抢沙发吧！</div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/app/course/[id]/page.tsx

@@ -3,9 +3,10 @@
 import { useEffect, useState, useRef } from "react";
 import { useParams, useRouter } from "next/navigation";
 import { api } from "@/lib/api";
-import { ArrowLeft, Link as LinkIcon, Copy, X, Eye, ThumbsUp, Star } from "lucide-react";
+import { ArrowLeft, Link as LinkIcon, Copy, X, Eye, ThumbsUp, Star, Coins } from "lucide-react";
 import Link from "next/link";
 import { useAuthStore } from "@/lib/store";
+import Comments from "./comments";
 
 export default function CourseDetail() {
   const { id } = useParams();
@@ -19,8 +20,14 @@ export default function CourseDetail() {
   const [selectedLink, setSelectedLink] = useState<string | null>(null);
   const [isLiked, setIsLiked] = useState(false);
   const [isStarred, setIsStarred] = useState(false);
+  const [showDonateModal, setShowDonateModal] = useState(false);
+  const [donateAmount, setDonateAmount] = useState<number | ''>(2);
+  const [donateMessage, setDonateMessage] = useState('');
+  const [paymentMethod, setPaymentMethod] = useState<'alipay' | 'wechat' | null>(null);
   const hasViewedRef = useRef(false);
 
+  const presetAmounts = [2, 5, 10, 20, 50];
+
   useEffect(() => {
     const fetchData = async () => {
       try {
@@ -135,6 +142,38 @@ export default function CourseDetail() {
     }
   };
 
+  const handleDonate = async () => {
+    if (!token) {
+      router.push('/login');
+      return;
+    }
+    if (!donateAmount || donateAmount <= 0) {
+      alert('请输入有效的打赏金额');
+      return;
+    }
+    if (!paymentMethod) {
+      alert('请选择支付方式');
+      return;
+    }
+
+    try {
+      const res = await api.post('/api/orders/create', {
+        courseId: Number(id),
+        price: Number(donateAmount),
+        isDonation: true,
+        message: donateMessage
+      });
+      
+      if (res.success) {
+        setShowDonateModal(false);
+        router.push(`/payment/${res.data.orderId}`);
+      }
+    } catch (err) {
+      console.error(err);
+      alert('创建打赏订单失败');
+    }
+  };
+
   if (loading) {
     return <div className="animate-pulse h-96 bg-white rounded-xl"></div>;
   }
@@ -188,7 +227,7 @@ export default function CourseDetail() {
           
           <div className="flex justify-between items-center pt-6 border-t">
             {/* Interaction Buttons */}
-            <div className="flex gap-6">
+            <div className="flex gap-6 items-center">
               <button 
                 onClick={handleToggleLike}
                 className={`flex items-center gap-2 transition-colors ${isLiked ? 'text-blue-600' : 'text-gray-500 hover:text-gray-900'}`}
@@ -203,6 +242,14 @@ export default function CourseDetail() {
                 <Star className={`w-6 h-6 ${isStarred ? 'fill-current' : ''}`} />
                 <span className="font-medium">{course.starCount || 0}</span>
               </button>
+              
+              <button
+                onClick={() => setShowDonateModal(true)}
+                className="flex items-center gap-1.5 px-4 py-1.5 bg-pink-500 hover:bg-pink-600 text-white rounded-full font-medium transition-colors ml-4"
+              >
+                <Coins className="w-4 h-4" />
+                给TA打赏
+              </button>
             </div>
 
             {/* Action Buttons */}
@@ -216,11 +263,10 @@ export default function CourseDetail() {
                     已购买
                   </button>
                   <button 
-                    onClick={handleAccess}
-                    className="bg-blue-600 text-white px-8 py-2.5 rounded-xl font-semibold text-base hover:bg-blue-700 transition-colors shadow-lg shadow-blue-200 flex items-center"
+                    disabled
+                    className="bg-green-50 text-green-600 px-8 py-2.5 rounded-xl font-semibold text-base flex items-center cursor-default"
                   >
-                    <LinkIcon className="w-5 h-5 mr-2" />
-                    获取资料
+                    资料已发送至您的邮箱
                   </button>
                 </>
               ) : (
@@ -236,56 +282,108 @@ export default function CourseDetail() {
         </div>
       </div>
 
-      {/* 资料链接弹窗 */}
-      {selectedLink && (
-        <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
-          <div className="bg-white rounded-2xl max-w-lg w-full p-6 shadow-xl">
-            <div className="flex justify-between items-center mb-6">
-              <h3 className="text-xl font-bold text-gray-900">课程学习资料</h3>
-              <button 
-                onClick={() => setSelectedLink(null)}
-                className="text-gray-400 hover:text-gray-600 transition-colors"
-              >
-                <X className="w-6 h-6" />
-              </button>
-            </div>
+      <Comments courseId={Number(id)} />
+
+      {/* 打赏弹窗 */}
+      {showDonateModal && (
+        <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
+          <div className="bg-white rounded-2xl max-w-md w-full p-6 shadow-xl relative">
+            <button 
+              onClick={() => setShowDonateModal(false)}
+              className="absolute top-4 right-4 text-gray-400 hover:text-gray-600 transition-colors"
+            >
+              <X className="w-5 h-5" />
+            </button>
             
-            <div className="bg-blue-50 border border-blue-100 rounded-xl p-4 mb-6">
-              <p className="text-sm text-blue-800 mb-2">请复制以下链接在浏览器中打开，或直接点击访问：</p>
-              <div className="flex items-center gap-2">
-                <input 
-                  type="text" 
-                  readOnly 
-                  value={selectedLink}
-                  className="flex-1 bg-white border border-blue-200 rounded-lg px-3 py-2 text-sm text-gray-700 outline-none"
-                />
-                <button 
-                  onClick={() => copyToClipboard(selectedLink)}
-                  className="p-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 transition-colors"
-                  title="复制链接"
+            <div className="text-center mb-6">
+              <h3 className="text-lg font-medium text-gray-800">按需赞赏，支持创作者</h3>
+            </div>
+
+            {/* 金额选择网格 */}
+            <div className="grid grid-cols-3 gap-3 mb-6">
+              {presetAmounts.map(amount => (
+                <button
+                  key={amount}
+                  onClick={() => setDonateAmount(amount)}
+                  className={`flex items-center justify-center gap-1 py-3 rounded-lg border-2 transition-all ${
+                    donateAmount === amount 
+                      ? 'border-red-500 text-red-500 bg-red-50' 
+                      : 'border-gray-100 text-gray-700 hover:border-red-200'
+                  }`}
                 >
-                  <Copy className="w-4 h-4" />
+                  <Coins className="w-4 h-4" />
+                  <span className="font-bold text-lg">{amount}</span>
+                  <span className="text-sm">¥</span>
                 </button>
+              ))}
+              <div 
+                className={`flex items-center justify-center gap-1 px-2 rounded-lg border-2 transition-all ${
+                  !presetAmounts.includes(donateAmount as number) && donateAmount !== ''
+                    ? 'border-red-500 bg-red-50' 
+                    : 'border-gray-100'
+                }`}
+              >
+                <input
+                  type="number"
+                  placeholder="自定义"
+                  value={!presetAmounts.includes(donateAmount as number) ? donateAmount : ''}
+                  onChange={(e) => {
+                    const val = e.target.value;
+                    setDonateAmount(val === '' ? '' : Number(val));
+                  }}
+                  className="w-full bg-transparent border-none text-center font-bold text-gray-700 outline-none placeholder:font-normal"
+                  min="0.1"
+                  step="0.1"
+                />
               </div>
             </div>
-            
-            <div className="flex gap-3 justify-end">
-              <button 
-                onClick={() => setSelectedLink(null)}
-                className="px-5 py-2.5 border border-gray-200 text-gray-700 rounded-xl font-medium hover:bg-gray-50 transition-colors"
+
+            {/* 留言输入框 */}
+            <div className="mb-6">
+              <textarea
+                value={donateMessage}
+                onChange={(e) => setDonateMessage(e.target.value)}
+                placeholder="给Ta留言..."
+                className="w-full bg-gray-50 border border-gray-200 rounded-xl p-3 text-sm text-gray-700 outline-none focus:border-red-300 focus:ring-2 focus:ring-red-100 resize-none h-20"
+              />
+            </div>
+
+            {/* 显示当前金额 */}
+            <div className="text-center mb-6">
+              <span className="text-2xl text-green-600 font-bold">¥ </span>
+              <span className="text-4xl text-green-600 font-bold">{donateAmount || '0'}</span>
+            </div>
+
+            {/* 支付方式选择 */}
+            <div className="flex gap-3 mb-6">
+              <button
+                onClick={() => setPaymentMethod('alipay')}
+                className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl border-2 transition-all ${
+                  paymentMethod === 'alipay' ? 'border-blue-500 bg-blue-50 text-blue-600' : 'border-gray-100 text-gray-600 hover:bg-gray-50'
+                }`}
               >
-                关闭
+                <div className="w-5 h-5 bg-blue-500 rounded-full text-white flex items-center justify-center text-xs font-bold">支</div>
+                <span className="font-medium">支付宝</span>
               </button>
-              <a 
-                href={selectedLink}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="px-5 py-2.5 bg-blue-600 text-white rounded-xl font-medium hover:bg-blue-700 transition-colors"
-                onClick={() => setSelectedLink(null)}
+              <button
+                onClick={() => setPaymentMethod('wechat')}
+                className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl border-2 transition-all ${
+                  paymentMethod === 'wechat' ? 'border-green-500 bg-green-50 text-green-600' : 'border-gray-100 text-gray-600 hover:bg-gray-50'
+                }`}
               >
-                直接访问
-              </a>
+                <div className="w-5 h-5 bg-green-500 rounded-full text-white flex items-center justify-center text-xs font-bold">微</div>
+                <span className="font-medium">微信支付</span>
+              </button>
             </div>
+
+            {/* 确认支付按钮 */}
+            <button
+              onClick={handleDonate}
+              disabled={!paymentMethod || !donateAmount}
+              className="w-full py-3.5 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 text-white rounded-xl font-bold text-lg transition-colors shadow-lg shadow-blue-200"
+            >
+              {paymentMethod ? '确认打赏' : '请选择支付方式'}
+            </button>
           </div>
         </div>
       )}

frontend/src/app/login/page.tsx

@@ -11,6 +11,7 @@ export default function Login() {
   const [isLogin, setIsLogin] = useState(true);
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
+  const [nickname, setNickname] = useState("");
   const [emailCode, setEmailCode] = useState("");
   const [loading, setLoading] = useState(false);
 
@@ -23,16 +24,16 @@ export default function Login() {
         const res = await api.post('/api/auth/login', { email, password });
         if (res.success) {
           setAuth(
-            { id: res.data.userId, email, nickname: res.data.nickname, role: res.data.role }, 
+            { id: res.data.userId, email, nickname: res.data.nickname, role: res.data.role, isVip: res.data.isVip }, 
             res.data.token
           );
           router.push('/');
         }
       } else {
-        const res = await api.post('/api/auth/register', { email, password, emailCode: emailCode || '123456' });
+        const res = await api.post('/api/auth/register', { email, password, nickname, emailCode: emailCode || '123456' });
         if (res.success) {
           setAuth(
-            { id: res.data.userId, email, nickname: res.data.nickname, role: res.data.role }, 
+            { id: res.data.userId, email, nickname: res.data.nickname, role: res.data.role, isVip: res.data.isVip }, 
             res.data.token
           );
           router.push('/');
@@ -80,22 +81,35 @@ export default function Login() {
           </div>
 
           {!isLogin && (
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">邮箱验证码 (模拟: 123456)</label>
-              <div className="flex gap-3">
+            <>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                 <input 
                   type="text" 
-                  required
-                  value={emailCode}
-                  onChange={(e) => setEmailCode(e.target.value)}
-                  className="flex-1 px-4 py-3 rounded-xl border border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none transition-all"
-                  placeholder="6位验证码"
+                  required={!isLogin}
+                  value={nickname}
+                  onChange={(e) => setNickname(e.target.value)}
+                  className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none transition-all"
+                  placeholder="请输入用户名"
                 />
-                <button type="button" className="px-4 py-3 bg-gray-100 text-gray-700 rounded-xl text-sm font-medium hover:bg-gray-200 transition-colors whitespace-nowrap">
-                  发送验证码
-                </button>
               </div>
-            </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">邮箱验证码 (模拟: 123456)</label>
+                <div className="flex gap-3">
+                  <input 
+                    type="text" 
+                    required
+                    value={emailCode}
+                    onChange={(e) => setEmailCode(e.target.value)}
+                    className="flex-1 px-4 py-3 rounded-xl border border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none transition-all"
+                    placeholder="6位验证码"
+                  />
+                  <button type="button" className="px-4 py-3 bg-gray-100 text-gray-700 rounded-xl text-sm font-medium hover:bg-gray-200 transition-colors whitespace-nowrap">
+                    发送验证码
+                  </button>
+                </div>
+              </div>
+            </>
           )}
 
           <button 

frontend/src/app/page.tsx

@@ -1,20 +1,14 @@
 "use client";
 
-import { useEffect, useState, Suspense } from "react";
+import { useEffect, useState, Suspense, useMemo } from "react";
 import { api } from "@/lib/api";
 import Link from "next/link";
 import { BookOpen, Search, Eye, ThumbsUp, Star } from "lucide-react";
 import { useSearchParams } from "next/navigation";
-
-const CATEGORY_MAP: Record<string, string> = {
-  'ai-news': 'AI新资讯',
-  'comfyui': 'Comfyui资讯',
-  'full-blood': '满血整合包',
-  'closed-api': '闭源API接口',
-  'app-square': '应用广场'
-};
+import { useConfigStore } from "@/lib/store";
 
 function HomeContent() {
+  const { uiConfig } = useConfigStore();
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [courses, setCourses] = useState<any[]>([]);
   const [loading, setLoading] = useState(true);
@@ -22,6 +16,16 @@ function HomeContent() {
   const searchParams = useSearchParams();
   const currentCategory = searchParams.get('category');
 
+  const CATEGORY_MAP = useMemo(() => {
+    const map: Record<string, string> = {};
+    if (uiConfig?.navLinks) {
+      uiConfig.navLinks.forEach(link => {
+        map[link.value] = link.label;
+      });
+    }
+    return map;
+  }, [uiConfig]);
+
   const filteredCourses = courses.filter(course => {
     const matchesSearch = course.title.toLowerCase().includes(searchQuery.toLowerCase()) || 
                           course.description?.toLowerCase().includes(searchQuery.toLowerCase());
@@ -36,20 +40,27 @@ function HomeContent() {
   });
 
   useEffect(() => {
+    let isMounted = true;
     const fetchCourses = async () => {
       try {
         const res = await api.get('/api/courses');
-        if (res.success) {
+        if (isMounted && res.success) {
           setCourses(res.data);
         }
       } catch (err) {
         console.error(err);
       } finally {
-        setLoading(false);
+        if (isMounted) {
+          setLoading(false);
+        }
       }
     };
 
     fetchCourses();
+
+    return () => {
+      isMounted = false;
+    };
   }, []);
 
   const displayTitle = currentCategory && CATEGORY_MAP[currentCategory] 
@@ -59,18 +70,68 @@ function HomeContent() {
   return (
     <div className="space-y-8">
       {/* Search Section */}
-      <section className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100">
-        <div className="relative">
-          <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
-          <input 
-            type="text" 
-            placeholder="搜索课程..." 
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            className="w-full pl-12 pr-4 py-3 rounded-xl border border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none transition-all text-gray-900 placeholder:text-gray-400"
-          />
-        </div>
-      </section>
+      {uiConfig?.heroBackground ? (
+        <section 
+          className="relative rounded-2xl overflow-hidden shadow-sm border border-gray-100 min-h-[300px] flex items-center justify-center p-8"
+          style={{
+            backgroundImage: `url(${uiConfig.heroBackground})`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+          }}
+        >
+          <div className="absolute inset-0 bg-black/30 backdrop-blur-[2px]"></div>
+          <div className="relative w-full max-w-2xl mx-auto z-10">
+            <h1 className="text-3xl md:text-4xl font-bold text-white text-center mb-8 drop-shadow-md">
+              探索精选课程，提升你的技能
+            </h1>
+            <div className="relative">
+              <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
+              <input 
+                type="text" 
+                placeholder="搜索课程..." 
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="w-full pl-12 pr-4 py-4 rounded-xl border-none focus:ring-4 focus:ring-blue-500/30 outline-none transition-all text-gray-900 placeholder:text-gray-400 text-lg shadow-lg bg-white/95 backdrop-blur-sm"
+              />
+            </div>
+          </div>
+        </section>
+      ) : (
+        <section className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100">
+          <div className="relative">
+            <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
+            <input 
+              type="text" 
+              placeholder="搜索课程..." 
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="w-full pl-12 pr-4 py-3 rounded-xl border border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none transition-all text-gray-900 placeholder:text-gray-400"
+            />
+          </div>
+        </section>
+      )}
+
+      {/* Banners Section */}
+      {uiConfig?.banners && uiConfig.banners.length > 0 && (
+        <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {uiConfig.banners.map((banner, idx) => (
+            <a 
+              key={idx} 
+              href={banner.linkUrl || '#'} 
+              target={banner.linkUrl ? "_blank" : "_self"}
+              rel="noopener noreferrer"
+              className="block rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow group relative aspect-[21/3] md:aspect-[16/3]"
+            >
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img 
+                src={banner.imageUrl} 
+                alt={`Banner ${idx + 1}`} 
+                className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+              />
+            </a>
+          ))}
+        </section>
+      )}
 
       {/* Course List */}
       {loading ? (
@@ -113,7 +174,7 @@ function HomeContent() {
 
 export default function Home() {
   return (
-    <Suspense fallback={<div className="p-8 text-center text-gray-500">加载中...</div>}>
+    <Suspense fallback={<div className="p-8 text-center text-gray-500">页面内容加载中...</div>}>
       <HomeContent />
     </Suspense>
   );

frontend/src/app/payment/[id]/page.tsx

@@ -1,15 +1,17 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useParams, useRouter } from "next/navigation";
 import { api } from "@/lib/api";
 import { CreditCard, Smartphone } from "lucide-react";
+import { useAuthStore } from "@/lib/store";
 
 export default function Payment() {
   const { id } = useParams();
   const router = useRouter();
   const [payType, setPayType] = useState<'wechat' | 'alipay'>('wechat');
   const [loading, setLoading] = useState(false);
+  const { setAuth } = useAuthStore();
 
   const handlePay = async () => {
     setLoading(true);
@@ -29,7 +31,18 @@ export default function Payment() {
           status: 'SUCCESS'
         });
 
-        router.push('/user/courses');
+        // Refresh user profile to update VIP status if it was a VIP order
+        const token = localStorage.getItem('token');
+        if (token) {
+          const profileRes = await api.get('/api/auth/profile');
+          if (profileRes.success) {
+            setAuth(profileRes.data, token);
+          }
+        }
+
+        // Redirect
+        alert('支付流程完成');
+        router.back();
       }
     } catch (err) {
       console.error(err);

frontend/src/app/user/stars/page.tsx

@@ -8,10 +8,11 @@ import { useAuthStore } from "@/lib/store";
 import { useRouter } from "next/navigation";
 
 export default function UserStarsPage() {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [courses, setCourses] = useState<any[]>([]);
   const [loading, setLoading] = useState(true);
   const [searchQuery, setSearchQuery] = useState("");
-  const { token, user } = useAuthStore();
+  const { token } = useAuthStore();
   const router = useRouter();
 
   useEffect(() => {

frontend/src/lib/store.ts

@@ -5,6 +5,7 @@ interface User {
   email: string;
   nickname: string;
   role: string;
+  isVip?: boolean;
 }
 
 interface AuthState {
@@ -26,3 +27,33 @@ export const useAuthStore = create<AuthState>((set) => ({
     set({ user: null, token: null });
   },
 }));
+
+export interface NavLink {
+  label: string;
+  value: string;
+}
+
+export interface Banner {
+  imageUrl: string;
+  linkUrl: string;
+}
+
+export interface UiConfig {
+  siteName: string;
+  logo: string;
+  footerText: string;
+  heroBackground?: string;
+  navLinks: NavLink[];
+  banners?: Banner[];
+  memberFee?: number;
+}
+
+interface ConfigState {
+  uiConfig: UiConfig | null;
+  setUiConfig: (config: UiConfig) => void;
+}
+
+export const useConfigStore = create<ConfigState>((set) => ({
+  uiConfig: null,
+  setUiConfig: (uiConfig) => set({ uiConfig }),
+}));

管理员账号

@@ -1 +1 @@
-admin@example.com （密码： 123456 ）
+管理员账号：admin@example.com （密码： 123456 ）