refactor: split mobile and admin Angular applications

README.md

@@ -1,6 +1,11 @@
-# 小树陪练 Angular H5
+# 小树陪练 Angular 多项目工作区
 
-这是从同级 `xiaoshu-uniapp` 迁移出的 Angular 18 Web/H5 项目。项目保留原有 95 条业务路由，并使用 Angular Router、Signals、HttpClient 与独立组件重新实现登录、学习、复习、测试、游戏、商城、支付、订单、团队、商户、表单与会员业务。
+这是从同级 `xiaoshu-uniapp` 迁移出的 Angular 18 工作区。移动端与运营管理后台是两个物理隔离、可独立构建和发布的 Angular 应用：
+
+- `projects/xiaoshu-mobile`：学生端与老师端，根据登录身份展示对应业务能力。
+- `projects/xiaoshu-admin`：运营管理后台与仅超级管理员可见的技术后台。
+
+两个应用拥有独立入口、路由、测试配置、开发端口和构建产物，不会把另一端的业务源码打进自己的前端包。
 
 ## 环境
 
@@ -12,15 +17,16 @@
 
 ```bash
 npm install
-npm start -- --host 127.0.0.1 --port 4201
+npm run start:mobile
+npm run start:admin
 ```
 
-浏览器打开 `http://127.0.0.1:4201/`。开发服务器通过 `proxy.conf.cjs` 将 `/backend` 转发到线上 UniApp 当前使用的 `https://test.fmode.cn/engxs`，并将客服、NCloud 与 AI 请求转发到对应服务，避免本地 H5 调试时的跨域问题。
+移动端运行在 `http://127.0.0.1:4200/`，管理后台运行在 `http://127.0.0.1:4300/admin/login`。两个开发服务器都通过 `proxy.conf.cjs` 转发所需服务，避免本地调试时的跨域问题。
 
 AI 阅读需要在启动进程中提供服务端环境变量，令牌不会进入浏览器构建产物：
 
 ```bash
-FMODE_API_TOKEN="你的令牌" npm start -- --host 127.0.0.1 --port 4201
+FMODE_API_TOKEN="你的令牌" npm run start:mobile
 ```
 
 ## 构建与测试
@@ -30,7 +36,16 @@ npm run build
 npm run test:ci
 ```
 
-生产文件输出到 `dist/xiaoshu-angular/browser/`。部署时需要把 Angular 路由回退到 `index.html`，并确认原后端允许生产域名跨域；也可以在 Web 服务器上继续反向代理 `/backend`。
+也可以分别执行：
+
+```bash
+npm run build:mobile
+npm run build:admin
+npm run test:mobile:ci
+npm run test:admin:ci
+```
+
+移动端输出到 `dist/xiaoshu-mobile/browser/`，管理后台输出到 `dist/xiaoshu-admin/browser/`。两个站点部署时都需要把各自的 Angular 路由回退到对应的 `index.html`。
 
 ## 迁移验收
 

angular.json

@@ -7,52 +7,35 @@
   },
   "newProjectRoot": "projects",
   "projects": {
-    "xiaoshu-angular": {
+    "xiaoshu-mobile": {
       "projectType": "application",
       "schematics": {
         "@schematics/angular:component": {
           "style": "scss"
         }
       },
-      "root": "",
-      "sourceRoot": "src",
+      "root": "projects/xiaoshu-mobile",
+      "sourceRoot": "projects/xiaoshu-mobile/src",
       "prefix": "app",
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist/xiaoshu-angular",
-            "index": "src/index.html",
-            "browser": "src/main.ts",
-            "polyfills": [
-              "zone.js"
-            ],
-            "tsConfig": "tsconfig.app.json",
+            "outputPath": "dist/xiaoshu-mobile",
+            "index": "projects/xiaoshu-mobile/src/index.html",
+            "browser": "projects/xiaoshu-mobile/src/main.ts",
+            "polyfills": ["zone.js"],
+            "tsConfig": "projects/xiaoshu-mobile/tsconfig.app.json",
             "inlineStyleLanguage": "scss",
-            "assets": [
-              {
-                "glob": "**/*",
-                "input": "public"
-              }
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
+            "assets": [{ "glob": "**/*", "input": "public" }],
+            "styles": ["projects/xiaoshu-mobile/src/styles.scss"],
             "scripts": []
           },
           "configurations": {
             "production": {
               "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "500kB",
-                  "maximumError": "1MB"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "8kB",
-                  "maximumError": "20kB"
-                }
+                { "type": "initial", "maximumWarning": "500kB", "maximumError": "1MB" },
+                { "type": "anyComponentStyle", "maximumWarning": "8kB", "maximumError": "20kB" }
               ],
               "outputHashing": "all"
             },
@@ -66,14 +49,74 @@
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": { "buildTarget": "xiaoshu-mobile:build:production" },
+            "development": { "buildTarget": "xiaoshu-mobile:build:development" }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": ["zone.js", "zone.js/testing"],
+            "tsConfig": "projects/xiaoshu-mobile/tsconfig.spec.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [{ "glob": "**/*", "input": "public" }],
+            "styles": ["projects/xiaoshu-mobile/src/styles.scss"],
+            "scripts": []
+          }
+        }
+      }
+    },
+    "xiaoshu-admin": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "projects/xiaoshu-admin",
+      "sourceRoot": "projects/xiaoshu-admin/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/xiaoshu-admin",
+            "index": "projects/xiaoshu-admin/src/index.html",
+            "browser": "projects/xiaoshu-admin/src/main.ts",
+            "polyfills": ["zone.js"],
+            "tsConfig": "projects/xiaoshu-admin/tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [{ "glob": "**/*", "input": "public" }],
+            "styles": ["projects/xiaoshu-admin/src/styles.scss"],
+            "scripts": []
+          },
           "configurations": {
             "production": {
-              "buildTarget": "xiaoshu-angular:build:production"
+              "budgets": [
+                { "type": "initial", "maximumWarning": "500kB", "maximumError": "1MB" },
+                { "type": "anyComponentStyle", "maximumWarning": "8kB", "maximumError": "20kB" }
+              ],
+              "outputHashing": "all"
             },
             "development": {
-              "buildTarget": "xiaoshu-angular:build:development"
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
             }
           },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": { "buildTarget": "xiaoshu-admin:build:production" },
+            "development": { "buildTarget": "xiaoshu-admin:build:development" }
+          },
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
@@ -82,21 +125,11 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ],
-            "tsConfig": "tsconfig.spec.json",
+            "polyfills": ["zone.js", "zone.js/testing"],
+            "tsConfig": "projects/xiaoshu-admin/tsconfig.spec.json",
             "inlineStyleLanguage": "scss",
-            "assets": [
-              {
-                "glob": "**/*",
-                "input": "public"
-              }
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
+            "assets": [{ "glob": "**/*", "input": "public" }],
+            "styles": ["projects/xiaoshu-admin/src/styles.scss"],
             "scripts": []
           }
         }

package.json

@@ -3,8 +3,12 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve --proxy-config proxy.conf.cjs",
-    "build": "ng build",
+    "start": "npm run start:mobile",
+    "start:mobile": "ng serve xiaoshu-mobile --proxy-config proxy.conf.cjs --port 4200",
+    "start:admin": "ng serve xiaoshu-admin --proxy-config proxy.conf.cjs --port 4300",
+    "build": "npm run build:mobile && npm run build:admin",
+    "build:mobile": "ng build xiaoshu-mobile",
+    "build:admin": "ng build xiaoshu-admin",
     "parity:generate": "node scripts/generate-source-parity.mjs",
     "parity:check": "node scripts/generate-source-parity.mjs --check",
     "admin-coverage:generate": "node scripts/generate-admin-coverage.mjs",
@@ -25,9 +29,15 @@
     "sync-bridge:publish": "dotnet publish legacy-sync-bridge/Xiaoshu.LegacySyncBridge.csproj -c Release -r win-x64 --self-contained true -o dist/legacy-sync-bridge-win-x64",
     "sync-bridge:package": "npm run sync-bridge:publish && bash legacy-sync-bridge/deployment/package.sh",
     "sync-bridge:smoke": "dotnet build legacy-sync-bridge/Xiaoshu.LegacySyncBridge.csproj -c Release --no-restore && node scripts/smoke-legacy-sync-bridge.mjs",
-    "watch": "ng build --watch --configuration development",
-    "test": "ng test",
-    "test:ci": "ng test --no-watch --no-progress --browsers=ChromeHeadless"
+    "watch": "npm run watch:mobile",
+    "watch:mobile": "ng build xiaoshu-mobile --watch --configuration development",
+    "watch:admin": "ng build xiaoshu-admin --watch --configuration development",
+    "test": "npm run test:mobile && npm run test:admin",
+    "test:mobile": "ng test xiaoshu-mobile",
+    "test:admin": "ng test xiaoshu-admin",
+    "test:ci": "npm run test:mobile:ci && npm run test:admin:ci",
+    "test:mobile:ci": "ng test xiaoshu-mobile --no-watch --no-progress --browsers=ChromeHeadless",
+    "test:admin:ci": "ng test xiaoshu-admin --no-watch --no-progress --browsers=ChromeHeadless"
   },
   "private": true,
   "dependencies": {

src/app/admin/admin.constants.ts → projects/xiaoshu-admin/src/app/admin.constants.ts

@@ -6,6 +6,10 @@ export const CLOUD_FUNCTION_BASE_URL = isLocalDevelopment
   ? '/cloud-functions'
   : 'https://server.xiaoshu.pro/api/functions';
 
+export const LEGACY_ASSET_BASE_URL = isLocalDevelopment
+  ? '/backend'
+  : 'https://test.fmode.cn/engxs';
+
 export const ADMIN_SESSION_KEY = 'xiaoshu_admin_session_v1';
 
 export interface AdminNavigationItem { label: string; icon: string; route: string; }

projects/xiaoshu-admin/src/app/app.component.spec.ts

@@ -0,0 +1,14 @@
+import { TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { AppComponent } from './app.component';
+
+describe('Admin AppComponent', () => {
+  it('creates the independent admin application shell', async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppComponent],
+      providers: [provideRouter([])],
+    }).compileComponents();
+
+    expect(TestBed.createComponent(AppComponent).componentInstance).toBeTruthy();
+  });
+});

projects/xiaoshu-admin/src/app/app.component.ts

@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [RouterOutlet],
+  template: '<router-outlet />',
+  styles: ':host { display: block; min-height: 100%; }',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AppComponent {}

projects/xiaoshu-admin/src/app/app.config.ts

@@ -0,0 +1,12 @@
+import { provideHttpClient } from '@angular/common/http';
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideHttpClient(),
+    provideRouter(routes),
+  ],
+};

projects/xiaoshu-admin/src/app/app.routes.isolation.spec.ts

@@ -0,0 +1,18 @@
+import { Route } from '@angular/router';
+import { routes } from './app.routes';
+
+function routePaths(items: readonly Route[], prefix = ''): string[] {
+  return items.flatMap((route) => {
+    const path = [prefix, route.path || ''].filter(Boolean).join('/');
+    return [path, ...routePaths(route.children || [], path)];
+  });
+}
+
+describe('admin application route isolation', () => {
+  it('contains only admin route families', () => {
+    const paths = routePaths(routes);
+    expect(paths).toContain('admin');
+    expect(paths).toContain('tech-admin');
+    expect(paths.some((path) => path === 'pages' || path.startsWith('pages/'))).toBeFalse();
+  });
+});

projects/xiaoshu-admin/src/app/app.routes.ts

@@ -0,0 +1,8 @@
+import { Routes } from '@angular/router';
+import { adminRoutes } from './admin.routes';
+
+export const routes: Routes = [
+  ...adminRoutes,
+  { path: '', pathMatch: 'full', redirectTo: 'admin/dashboard' },
+  { path: '**', redirectTo: 'admin/dashboard' },
+];