```markdown

✨ feat(`environments`, `angular.json`, `package.json`, `services`, `styles.scss`, `app.config.ts`, `proxy.conf.json`, `.prettierrc.json`, `.vscode/settings.json`): Implement application environment setup, add services, configure routing, and improve project configurations

- Adds development and production environment configurations
- Updates Angular JSON to include Bootstrap CSS and JS, removes unnecessary polyfills, sets up proxy configuration, and adjusts build targets
- Installs and configures Bootstrap and DayJS dependencies
- Introduces BrowserStorage and SessionStorage services for local and session storage management
- Implements HTTP Interceptors for default request handling and authentication token management
- Adds a page title strategy service for dynamic page titles
- Adjusts global SCSS styles and includes them in the project
- Enhances app routing with custom title strategy and HTTP client configurations
- Initializes a proxy configuration for backend API and RSocket communication
- Sets up Prettier and VSCode settings for code formatting and linting
```

ng-web/.prettierignore

@@ -0,0 +1,42 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db

ng-web/.prettierrc.json

@@ -0,0 +1,12 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": true,
+  "semi": true,
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "trailingComma": "es5",
+  "bracketSameLine": true,
+  "printWidth": 120,
+  "endOfLine": "auto"
+}

ng-web/.vscode/settings.json

@@ -1,3 +1,25 @@
 {
+  "[css]": {
+    "editor.foldingStrategy": "indentation"
+  },
+  "files.autoSave": "afterDelay",
+  "angular.forceStrictTemplates": true,
+  "editor.suggest.snippetsPreventQuickSuggestions": false,
+  "editor.inlineSuggest.enabled": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "angular.view-engine": false,
+  "Codegeex.CompletionModel": "CodeGeeX Pro[Beta]",
+  "Codegeex.Privacy": true,
+  "merge-conflict.autoNavigateNextConflict.enabled": true,
+  "css.styleSheets": [],
+  "[html]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "prettier.bracketSameLine": true,
+  "Codegeex.CommitMessageStyle": "ConventionalCommits",
   "Codegeex.RepoIndex": true
-}
+}

ng-web/angular.json

@@ -20,9 +20,7 @@
             "outputPath": "dist/ng-web",
             "index": "src/index.html",
             "browser": "src/main.ts",
-            "polyfills": [
-              "zone.js"
-            ],
+            "polyfills": [],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": [
@@ -32,9 +30,12 @@
               }
             ],
             "styles": [
+              "bootstrap/dist/css/bootstrap.css",
               "src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [
+              "bootstrap/dist/js/bootstrap.bundle.js"
+            ]
           },
           "configurations": {
             "production": {
@@ -67,7 +68,8 @@
               "buildTarget": "ng-web:build:production"
             },
             "development": {
-              "buildTarget": "ng-web:build:development"
+              "buildTarget": "ng-web:build:development",
+              "proxyConfig": "proxy.conf.json"
             }
           },
           "defaultConfiguration": "development"
@@ -78,10 +80,7 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ],
+            "polyfills": [],
             "tsConfig": "tsconfig.spec.json",
             "inlineStyleLanguage": "scss",
             "assets": [

ng-web/package.json

@@ -18,9 +18,10 @@
     "@angular/platform-browser": "^18.2.0",
     "@angular/platform-browser-dynamic": "^18.2.0",
     "@angular/router": "^18.2.0",
+    "bootstrap": "^5.3.3",
+    "dayjs": "^1.11.13",
     "rxjs": "~7.8.0",
-    "tslib": "^2.3.0",
-    "zone.js": "~0.14.10"
+    "tslib": "^2.3.0"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^18.2.5",

ng-web/proxy.conf.json

@@ -0,0 +1,18 @@
+{
+  "/api": {
+    "target": "http://localhost:9001",
+    "secure": false,
+    "pathRewrite": {
+      "^/api": ""
+    },
+    "changeOrigin": true,
+    "logLevel": "debug"
+  },
+  "/rsocket": {
+    "target": "ws://localhost:9001/",
+    "secure": false,
+    "ws": true,
+    "changeOrigin": true,
+    "logLevel": "debug"
+  }
+}

ng-web/src/app/app.config.ts

@@ -1,8 +1,42 @@
-import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
-import { provideRouter } from '@angular/router';
-
+import { ApplicationConfig, importProvidersFrom, provideExperimentalZonelessChangeDetection } from '@angular/core';
+import { provideRouter, TitleStrategy, withComponentInputBinding } from '@angular/router';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { routes } from './app.routes';
 
+import {
+  provideHttpClient,
+  withFetch,
+  withInterceptors,
+  withInterceptorsFromDi,
+  withXsrfConfiguration,
+} from '@angular/common/http';
+
+import dayjs from 'dayjs';
+import isLeapYear from 'dayjs/plugin/isLeapYear';
+import 'dayjs/locale/zh-cn';
+import { authTokenInterceptor, defaultInterceptor } from '../service/http.Interceptor';
+import { PageTitleStrategy } from '../service/page-title-strategy.service';
+
+dayjs.extend(isLeapYear);
+dayjs.locale('zh-cn');
+
 export const appConfig: ApplicationConfig = {
-  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)],
+  providers: [
+    provideExperimentalZonelessChangeDetection(),
+    provideRouter(routes, withComponentInputBinding()),
+    importProvidersFrom(BrowserAnimationsModule),
+    provideAnimationsAsync(),
+    provideRouter(routes),
+    provideHttpClient(
+      withFetch(),
+      withInterceptorsFromDi(),
+      withInterceptors([defaultInterceptor, authTokenInterceptor]),
+      withXsrfConfiguration({
+        cookieName: 'XSRF-TOKEN',
+        headerName: 'X-XSRF-TOKEN',
+      }),
+    ),
+    { provide: TitleStrategy, useClass: PageTitleStrategy },
+  ],
 };

ng-web/src/environments/environment.development.ts

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

ng-web/src/environments/environment.ts

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

ng-web/src/service/auth.service.ts

@@ -0,0 +1,97 @@
+import { HttpErrorResponse } from '@angular/common/http';
+import { inject, Injectable, signal } from '@angular/core';
+import { CanActivateChildFn, CanActivateFn, CanMatchFn, Router } from '@angular/router';
+import dayjs from 'dayjs';
+import { SessionStorageService } from './session-storage.service';
+
+// 定义一个接口，用于存储用户的认证信息
+export interface Authentication {
+  token: string;
+  expires: number;
+  lastAccessTime: number;
+  details: any;
+}
+
+// 定义一个函数，用于判断用户是否已登录
+export const authGuard: CanMatchFn | CanActivateFn | CanActivateChildFn = () => {
+  const auth = inject(AuthService);
+  const router = inject(Router);
+  if (auth.isLogged()) {
+    return true;
+  }
+  return router.parseUrl(auth.loginUrl);
+};
+
+@Injectable({ providedIn: 'root' })
+export class AuthService {
+  readonly loginUrl = '/auth/login';
+  private _storage = inject(SessionStorageService);
+  private readonly authenticationKey = 'authentication';
+  private isLoggedIn = signal(false);
+  private authentication = signal({} as Authentication);
+
+  authenticationToken() {
+    if (this.isLoggedIn()) {
+      return this.authentication();
+    }
+    const authentication = this.authenticationLoadStorage();
+    if (authentication) {
+      authentication.lastAccessTime = dayjs().unix();
+      this.login(authentication);
+      return authentication;
+    }
+    throw new HttpErrorResponse({
+      error: 'Authenticate is incorrectness,please login again.',
+      status: 401,
+    });
+  }
+
+  isLogged(): boolean {
+    if (this.isLoggedIn()) {
+      return true;
+    }
+    return false;
+  }
+
+  authToken(): string {
+    if (this.isLoggedIn()) {
+      return this.authentication().token;
+    }
+    const authentication = this.authenticationLoadStorage();
+    if (authentication) {
+      authentication.lastAccessTime = dayjs().unix();
+      this.login(authentication);
+      return authentication.token;
+    }
+    throw new HttpErrorResponse({
+      error: 'Authenticate is incorrectness,please login again.',
+      status: 401,
+    });
+  }
+
+  login(authentication: Authentication): void {
+    this.isLoggedIn.set(true);
+    this.authentication.set(authentication);
+    this._storage.set(this.authenticationKey, JSON.stringify(authentication));
+  }
+
+  logout(): void {
+    this.isLoggedIn.set(false);
+    this.authentication.set({} as Authentication);
+    this._storage.remove(this.authenticationKey);
+  }
+
+  private authenticationLoadStorage(): Authentication | null {
+    const authenticationJsonStr = this._storage.get(this.authenticationKey);
+    if (authenticationJsonStr) {
+      const authentication: Authentication = JSON.parse(authenticationJsonStr);
+      const lastAccessTime = dayjs.unix(authentication.lastAccessTime);
+      const diffSec = dayjs().diff(lastAccessTime, 'second');
+      if (diffSec < authentication.expires) {
+        return authentication;
+      }
+      this._storage.remove(this.authenticationKey);
+    }
+    return null;
+  }
+}