refactor(http): 添加HTTP拦截器并配置代理

angular.json

@@ -75,6 +75,9 @@
               "buildTarget": "wanjie:build:development"
             }
           },
+          "options": {
+            "proxyConfig": "proxy.conf.js"
+          },
           "defaultConfiguration": "development"
         },
         "extract-i18n": {

proxy.conf.js

@@ -0,0 +1,8 @@
+module.exports = {
+  '/api': {
+    target: 'https://wanjie-api.vercel.app',
+    secure: false,
+    changeOrigin: true,
+    logLevel: 'debug'
+  }
+};

src/app/app.component.ts

@@ -2,7 +2,7 @@ import { Component, inject, OnInit } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { NavigationEnd, Router, RouterOutlet } from '@angular/router';
 import { EventType, SystemEventOperate } from '@models';
-import { EventService } from '@services';
+import { EventService, KimiService } from '@services';
 import { NzLayoutModule } from 'ng-zorro-antd/layout';
 import { NzModalModule, NzModalService } from 'ng-zorro-antd/modal';
 import { NzSegmentedModule } from 'ng-zorro-antd/segmented';
@@ -34,7 +34,12 @@ export class AppComponent implements OnInit {
   segmentedRoutes: string[] = ['/home', '/method', '/universe', '/challenge', '/shop', '/statistics'];
   currentSegmented: number = 0;
 
+  private kimi = inject(KimiService);
+
   ngOnInit() {
+    // this.kimi.getCharacterList(5).subscribe(res => {
+    //   console.log(res);
+    // });
     this.event
       .sendEvent({
         type: EventType.System,

src/app/app.config.ts

@@ -1,5 +1,5 @@
 import { registerLocaleData } from '@angular/common';
-import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClient, withInterceptors } from '@angular/common/http';
 import zh from '@angular/common/locales/zh';
 import { ApplicationConfig, provideZoneChangeDetection, importProvidersFrom } from '@angular/core';
 import { FormsModule } from '@angular/forms';
@@ -9,6 +9,7 @@ import { zh_CN, provideNzI18n } from 'ng-zorro-antd/i18n';
 import { NzModalService } from 'ng-zorro-antd/modal';
 
 import { routes } from './app.routes';
+import { apiInterceptor } from './interceptors/api-interceptor.interceptor';
 
 const ZORRO_SERVICES = [NzModalService];
 
@@ -21,7 +22,7 @@ export const appConfig: ApplicationConfig = {
     provideNzI18n(zh_CN),
     importProvidersFrom(FormsModule),
     provideAnimationsAsync(),
-    provideHttpClient(),
+    provideHttpClient(withInterceptors([apiInterceptor])),
     ...ZORRO_SERVICES
   ]
 };

src/app/interceptors/api-interceptor.interceptor.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+import { HttpInterceptorFn } from '@angular/common/http';
+
+import { apiInterceptor } from './api-interceptor.interceptor';
+
+describe('apiInterceptor', () => {
+  const interceptor: HttpInterceptorFn = (req, next) => TestBed.runInInjectionContext(() => apiInterceptor(req, next));
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+  });
+
+  it('should be created', () => {
+    expect(interceptor).toBeTruthy();
+  });
+});

src/app/interceptors/api-interceptor.interceptor.ts

@@ -0,0 +1,11 @@
+import { HttpInterceptorFn } from '@angular/common/http';
+import { environment } from 'environments/environment';
+
+export const apiInterceptor: HttpInterceptorFn = (req, next) => {
+  if (req.url.startsWith('/api')) {
+    const newUrl = `${environment.apiUrl}${req.url}`;
+    const modifiedReq = req.clone({ url: newUrl });
+    return next(modifiedReq);
+  }
+  return next(req);
+};

src/app/services/index.ts

@@ -3,6 +3,7 @@ export * from './battle.service'; // 战斗管理
 export * from './character.service'; // 角色管理
 export * from './env.service'; // 环境管理
 export * from './event.service'; // 事件管理
+export * from './kimi.service'; // kimi
 export * from './log.service'; // 日志管理
 export * from './runtime.service'; // 运行时管理
 export * from './task.service'; // 任务管理

src/app/services/kimi.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { KimiService } from './kimi.service';
+
+describe('KimiService', () => {
+  let service: KimiService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(KimiService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/kimi.service.ts

@@ -0,0 +1,15 @@
+import { HttpClient } from '@angular/common/http';
+import { inject, Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class KimiService {
+  private http = inject(HttpClient);
+
+  getCharacterList(length: number) {
+    return this.http.get('/api/generate/character', {
+      params: { length }
+    });
+  }
+}

src/environments/environment.prod.ts

@@ -0,0 +1,4 @@
+export const environment = {
+  production: true,
+  apiUrl: 'https://wanjie-api.vercel.app'
+};

src/environments/environment.ts

@@ -0,0 +1,4 @@
+export const environment = {
+  production: false,
+  apiUrl: ''
+};