fix: routes & nav

travel-platform-web/travel-web/package-lock.json

@@ -8,10 +8,12 @@
       "name": "travel-web",
       "version": "0.0.0",
       "dependencies": {
+        "@angular/animations": "^20.0.5",
         "@angular/common": "^20.0.0",
         "@angular/compiler": "^20.0.0",
         "@angular/core": "^20.0.0",
         "@angular/forms": "^20.0.0",
+        "@angular/material": "^20.0.4",
         "@angular/platform-browser": "^20.0.0",
         "@angular/router": "^20.0.5",
         "rxjs": "~7.8.0",
@@ -110,6 +112,22 @@
         "yarn": ">= 1.13.0"
       }
     },
+    "node_modules/@angular/animations": {
+      "version": "20.0.5",
+      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-20.0.5.tgz",
+      "integrity": "sha512-v8dzr2tnju7Sa7XUhMY6yTJpRV3isMqP3mnOjrul2kkEY870a1tZ7VI7xp0qTx36086/+nzXAvOvOItmRkUaaQ==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "20.0.5",
+        "@angular/core": "20.0.5"
+      }
+    },
     "node_modules/@angular/build": {
       "version": "20.0.4",
       "resolved": "https://registry.npmjs.org/@angular/build/-/build-20.0.4.tgz",
@@ -209,6 +227,22 @@
         }
       }
     },
+    "node_modules/@angular/cdk": {
+      "version": "20.0.4",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-20.0.4.tgz",
+      "integrity": "sha512-NCUuw0qQXwawLsT14JHApNB9or3XGs7D1pWXlOIix/fKqzHVfi4un9xHmpjH2Q1uCiwonuak7fDof8B+IXhbug==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "parse5": "^7.1.2",
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "^20.0.0 || ^21.0.0",
+        "@angular/core": "^20.0.0 || ^21.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
     "node_modules/@angular/cli": {
       "version": "20.0.4",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-20.0.4.tgz",
@@ -455,6 +489,23 @@
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
+    "node_modules/@angular/material": {
+      "version": "20.0.4",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-20.0.4.tgz",
+      "integrity": "sha512-ET+znnyOVjBezHsjy7U42/88JPl9Mhumvf01gMBN8mNcaoSpeM4cc2uKBg30/3YzykKIsjXtvUJj/PaTujmJAQ==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/cdk": "20.0.4",
+        "@angular/common": "^20.0.0 || ^21.0.0",
+        "@angular/core": "^20.0.0 || ^21.0.0",
+        "@angular/forms": "^20.0.0 || ^21.0.0",
+        "@angular/platform-browser": "^20.0.0 || ^21.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
     "node_modules/@angular/platform-browser": {
       "version": "20.0.5",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-20.0.5.tgz",
@@ -7019,7 +7070,6 @@
       "version": "7.3.0",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
       "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "entities": "^6.0.0"
@@ -7073,7 +7123,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
       "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.12"

travel-platform-web/travel-web/package.json

@@ -20,10 +20,12 @@
   },
   "private": true,
   "dependencies": {
+    "@angular/animations": "^20.0.5",
     "@angular/common": "^20.0.0",
     "@angular/compiler": "^20.0.0",
     "@angular/core": "^20.0.0",
     "@angular/forms": "^20.0.0",
+    "@angular/material": "^20.0.4",
     "@angular/platform-browser": "^20.0.0",
     "@angular/router": "^20.0.5",
     "rxjs": "~7.8.0",

travel-platform-web/travel-web/src/app/app.config.ts

@@ -1,12 +1,15 @@
-import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
+import { ApplicationConfig } from '@angular/core';
 import { provideRouter } from '@angular/router';
-
 import { routes } from './app.routes';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { provideHttpClient } from '@angular/common/http';
+import { MatIconModule } from '@angular/material/icon';
 
 export const appConfig: ApplicationConfig = {
   providers: [
-    provideBrowserGlobalErrorListeners(),
-    provideZoneChangeDetection({ eventCoalescing: true }),
-    provideRouter(routes)
+    provideRouter(routes),
+    provideAnimations(),
+    provideHttpClient(),
+    MatIconModule
   ]
-};
+};

travel-platform-web/travel-web/src/app/app.routes.ts

@@ -3,7 +3,10 @@ import { Routes } from '@angular/router';
 
 export const routes: Routes = [
   {
-    path: '../crm/mobile',
+    path:'',pathMatch:'full',redirectTo:"/mobile/home"
+  },
+  {
+    path: 'mobile',
     loadChildren: () => import('../crm/mobile/mobile.routes').then(m => m.MOBILE_ROUTES)
   }
 ];

travel-platform-web/travel-web/src/crm/mobile/nav-mobile-menu/nav-mobile-menu.html

@@ -1,68 +1,62 @@
-<!-- src/app/modules/travel/mobile/components/nav-mobile-menu/nav-mobile-menu.component.html -->
-<nav class="mobile-nav">
-  <div class="mobile-nav-container">
-    <!-- 菜单按钮 (移动端汉堡菜单) -->
-    <button class="mobile-nav-toggle" (click)="toggleMenu()" aria-expanded="isMenuOpen">
-      <span class="sr-only">菜单</span>
-      <span class="hamburger" [class.active]="isMenuOpen"></span>
-    </button>
+<!-- src/app/modules/travel/mobile/components/nav-web-menu/nav-web-menu.component.html -->
+<nav class="web-nav">
+  <div class="web-nav-container">
+    <!-- 品牌Logo/名称 -->
+    <div class="web-nav-brand">
+      <a routerLink="/mobile/home">Travel App</a>
+    </div>
 
-    <!-- 品牌Logo/名称 -->
-    <div class="mobile-nav-brand">
-      <a routerLink="/mobile/home">Travel App</a >
-    </div>
+    <!-- 主菜单 -->
+    <div class="web-nav-menu">
+      <ul class="web-nav-list">
+        <li class="web-nav-item">
+          <a routerLink="/mobile/home" 
+             routerLinkActive="active" 
+             [routerLinkActiveOptions]="{exact: true}">
+            <i class="icon-home"></i>
+            <span>首页</span>
+          </a>
+        </li>
+        <li class="web-nav-item">
+          <a routerLink="/mobile/platform" routerLinkActive="active">
+            <i class="icon-platform"></i>
+            <span>平台</span>
+          </a>
+        </li>
+        <li class="web-nav-item">
+          <a routerLink="/mobile/business" routerLinkActive="active">
+            <i class="icon-business"></i>
+            <span>业务</span>
+          </a>
+        </li>
+        <li class="web-nav-item">
+          <a routerLink="/mobile/service" routerLinkActive="active">
+            <i class="icon-service"></i>
+            <span>服务</span>
+          </a>
+        </li>
+        <li class="web-nav-item">
+          <a routerLink="/mobile/system" routerLinkActive="active">
+            <i class="icon-system"></i>
+            <span>系统</span>
+          </a>
+        </li>
+      </ul>
+    </div>
 
-    <!-- 主菜单 -->
-    <div class="mobile-nav-menu" [class.active]="isMenuOpen">
-      <ul class="mobile-nav-list">
-        <li class="mobile-nav-item">
-          <a routerLink="/mobile/home" 
-             routerLinkActive="active" 
-             [routerLinkActiveOptions]="{exact: true}">
-            <i class="icon-home"></i>
-            <span>首页</span>
-          </a >
-        </li>
-        <li class="mobile-nav-item">
-          <a routerLink="/mobile/platform" routerLinkActive="active">
-            <i class="icon-platform"></i>
-            <span>平台</span>
-          </a >
-        </li>
-        <li class="mobile-nav-item">
-          <a routerLink="/mobile/business" routerLinkActive="active">
-            <i class="icon-business"></i>
-            <span>业务</span>
-          </a >
-        </li>
-        <li class="mobile-nav-item">
-          <a routerLink="/mobile/member" routerLinkActive="active">
-            <i class="icon-member"></i>
-            <span>会员</span>
-          </a >
-        </li>
-        <li class="mobile-nav-item">
-          <a routerLink="/mobile/system" routerLinkActive="active">
-            <i class="icon-system"></i>
-            <span>系统</span>
-          </a >
-        </li>
-      </ul>
-    </div>
-
-    <!-- 用户操作区域 -->
-    <div class="mobile-nav-actions">
-      <button class="mobile-nav-action">
-        <i class="icon-search"></i>
-      </button>
-      <button class="mobile-nav-action">
-        <i class="icon-user"></i>
-      </button>
-    </div>
-  </div>
+    <!-- 用户操作区域 -->
+    <div class="web-nav-actions">
+      <button class="web-nav-action">
+        <i class="icon-search"></i>
+      </button>
+      <button class="web-nav-action">
+        <i class="icon-user"></i>
+      </button>
+    </div>
+  </div>
 </nav>
 
 <!-- 路由插槽 -->
-<div class="mobile-content">
-      <router-outlet></router-outlet>
+<div class="web-content">
+  <router-outlet></router-outlet>
 </div>

travel-platform-web/travel-web/src/crm/mobile/nav-mobile-menu/nav-mobile-menu.scss

@@ -0,0 +1,113 @@
+/* src/app/modules/travel/web/components/nav-web-menu/nav-web-menu.component.css */
+
+/* 基础样式 */
+.web-nav {
+  background-color: #ffffff;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+}
+
+.web-nav-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 60px;
+}
+
+/* 品牌样式 */
+.web-nav-brand a {
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: #333;
+  text-decoration: none;
+}
+
+.web-nav-brand a:hover {
+  color: #0066cc;
+}
+
+/* 菜单样式 */
+.web-nav-menu {
+  flex-grow: 1;
+}
+
+.web-nav-list {
+  display: flex;
+  justify-content: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.web-nav-item {
+  margin: 0 15px;
+  position: relative;
+}
+
+.web-nav-item a {
+  display: flex;
+  align-items: center;
+  color: #555;
+  text-decoration: none;
+  font-size: 1rem;
+  padding: 10px 0;
+  transition: color 0.3s;
+}
+
+.web-nav-item a:hover {
+  color: #0066cc;
+}
+
+.web-nav-item a i {
+  margin-right: 8px;
+  font-size: 1.1rem;
+}
+
+/* 活动菜单项样式 */
+.web-nav-item a.active {
+  color: #0066cc;
+  font-weight: 500;
+}
+
+.web-nav-item a.active:after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background-color: #0066cc;
+}
+
+/* 用户操作区域样式 */
+.web-nav-actions {
+  display: flex;
+  align-items: center;
+}
+
+.web-nav-action {
+  background: none;
+  border: none;
+  color: #555;
+  font-size: 1.2rem;
+  cursor: pointer;
+  margin-left: 15px;
+  padding: 5px;
+  transition: color 0.3s;
+}
+
+.web-nav-action:hover {
+  color: #0066cc;
+}
+
+/* 内容区域样式 */
+.web-content {
+  max-width: 1200px;
+  margin: 20px auto;
+  padding: 0 20px;
+}

travel-platform-web/travel-web/src/crm/mobile/nav-mobile-menu/nav-mobile-menu.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { NavMobileMenu } from './nav-mobile-menu';
-
-describe('NavMobileMenu', () => {
-  let component: NavMobileMenu;
-  let fixture: ComponentFixture<NavMobileMenu>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [NavMobileMenu]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(NavMobileMenu);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

travel-platform-web/travel-web/src/crm/mobile/nav-mobile-menu/nav-mobile-menu.ts

@@ -1,12 +1,20 @@
 import { Component } from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { RouterLink, RouterLinkActive, RouterModule, RouterOutlet } from '@angular/router';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTabsModule } from '@angular/material/tabs';
 
 @Component({
   selector: 'app-nav-mobile-menu',
-  imports: [RouterModule],
+  standalone: true,
+  imports: [CommonModule, RouterOutlet, RouterLink, RouterLinkActive, MatToolbarModule, MatTabsModule,RouterModule],
   templateUrl: './nav-mobile-menu.html',
-  styleUrl: './nav-mobile-menu.scss'
+  styleUrls: ['./nav-mobile-menu.scss']
 })
 export class NavMobileMenu {
-
+  navLinks = [
+    { path: 'home', label: '首页', icon: 'home' },
+    { path: 'platform', label: '平台', icon: 'platform' },
+    { path: 'member', label: '会员', icon: 'member' }
+  ];
 }