feat: add authentication system with login and registration

- Added login and registration pages with modern UI design and form validation
- Implemented AuthGuard for route protection (temporarily disabled for testing)
- Restructured profile routes from nested to flat structure for better navigation

legal-assistant-app/src/app/app.routes.ts

@@ -1,17 +1,30 @@
 import { Routes } from '@angular/router';
+import { AuthGuard } from './shared/guards/auth.guard';
 
 export const routes: Routes = [
   // 默认重定向到首页
   { path: '', redirectTo: '/home', pathMatch: 'full' },
   
-  // 主要Tab页面路由
+  // 登录注册页面（无需认证）
+  {
+    path: 'login',
+    loadComponent: () => import('./pages/auth/login/login').then(m => m.Login)
+  },
+  {
+    path: 'register',
+    loadComponent: () => import('./pages/auth/register/register').then(m => m.Register)
+  },
+  
+  // 主要Tab页面路由（需要认证）
   {
     path: 'home',
     loadComponent: () => import('./pages/home/home').then(m => m.Home)
+    // canActivate: [AuthGuard] // 临时注释以便测试
   },
   {
     path: 'consultation',
     loadComponent: () => import('./pages/consultation/consultation').then(m => m.Consultation),
+    // canActivate: [AuthGuard], // 临时注释以便测试
     children: [
       { path: '', redirectTo: 'ai-dialog', pathMatch: 'full' },
       {
@@ -31,6 +44,7 @@ export const routes: Routes = [
   {
     path: 'tools',
     loadComponent: () => import('./pages/tools/tools').then(m => m.Tools),
+    // canActivate: [AuthGuard], // 临时注释以便测试
     children: [
       { path: '', redirectTo: 'tools-market', pathMatch: 'full' },
       {
@@ -58,6 +72,7 @@ export const routes: Routes = [
   {
     path: 'cases',
     loadComponent: () => import('./pages/cases/cases').then(m => m.Cases),
+    // canActivate: [AuthGuard], // 临时注释以便测试
     children: [
       { path: '', redirectTo: 'case-management', pathMatch: 'full' },
       {
@@ -77,6 +92,7 @@ export const routes: Routes = [
   {
     path: 'services',
     loadComponent: () => import('./pages/services/services').then(m => m.Services),
+    // canActivate: [AuthGuard], // 临时注释以便测试
     children: [
       { path: '', redirectTo: 'lawyer-connection', pathMatch: 'full' },
       {
@@ -96,6 +112,7 @@ export const routes: Routes = [
   {
     path: 'learning',
     loadComponent: () => import('./pages/learning/learning').then(m => m.Learning),
+    // canActivate: [AuthGuard], // 临时注释以便测试
     children: [
       { path: '', redirectTo: 'education-plaza', pathMatch: 'full' },
       {
@@ -114,28 +131,30 @@ export const routes: Routes = [
   },
   {
     path: 'profile',
-    loadComponent: () => import('./pages/profile/profile').then(m => m.Profile),
-    children: [
-      { path: '', redirectTo: 'personal-center', pathMatch: 'full' },
-      {
-        path: 'personal-center',
-        loadComponent: () => import('./pages/profile/personal-center/personal-center').then(m => m.PersonalCenter)
-      },
-      {
-        path: 'privacy-settings',
-        loadComponent: () => import('./pages/profile/privacy-settings/privacy-settings').then(m => m.PrivacySettings)
-      },
-      {
-        path: 'voice-settings',
-        loadComponent: () => import('./pages/profile/voice-display-settings/voice-display-settings').then(m => m.VoiceDisplaySettings)
-      },
-      {
-        path: 'help-center',
-        loadComponent: () => import('./pages/profile/help-center/help-center').then(m => m.HelpCenter)
-      }
-    ]
+    loadComponent: () => import('./pages/profile/profile').then(m => m.Profile)
+    // canActivate: [AuthGuard] // 临时注释以便测试
+  },
+  {
+    path: 'profile/personal-center',
+    loadComponent: () => import('./pages/profile/personal-center/personal-center').then(m => m.PersonalCenter)
+    // canActivate: [AuthGuard] // 临时注释以便测试
+  },
+  {
+    path: 'profile/privacy-settings',
+    loadComponent: () => import('./pages/profile/privacy-settings/privacy-settings').then(m => m.PrivacySettings)
+    // canActivate: [AuthGuard] // 临时注释以便测试
+  },
+  {
+    path: 'profile/voice-settings',
+    loadComponent: () => import('./pages/profile/voice-display-settings/voice-display-settings').then(m => m.VoiceDisplaySettings)
+    // canActivate: [AuthGuard] // 临时注释以便测试
+  },
+  {
+    path: 'profile/help-center',
+    loadComponent: () => import('./pages/profile/help-center/help-center').then(m => m.HelpCenter)
+    // canActivate: [AuthGuard] // 临时注释以便测试
   },
   
   // 通配符路由，处理未匹配的路径
-  { path: '**', redirectTo: '/home' }
+  { path: '**', redirectTo: '/home' } // 临时改为home以便测试
 ];

legal-assistant-app/src/app/pages/auth/login/login.html

@@ -0,0 +1,125 @@
+<div class="login-page">
+  <div class="login-container">
+    <!-- Logo和标题 -->
+    <div class="login-header">
+      <div class="logo-wrapper">
+        <i class="fas fa-balance-scale"></i>
+      </div>
+      <h1>智慧法律助手</h1>
+      <p>让法律服务触手可及</p>
+    </div>
+
+    <!-- 登录表单 -->
+    <form class="login-form" (ngSubmit)="onSubmit()">
+      <!-- 错误提示 -->
+      @if (errorMessage) {
+        <div class="error-alert">
+          <i class="fas fa-exclamation-circle"></i>
+          <span>{{errorMessage}}</span>
+        </div>
+      }
+
+      <!-- 用户名输入 -->
+      <div class="form-group">
+        <label>
+          <i class="fas fa-user"></i>
+          <span>用户名</span>
+        </label>
+        <input 
+          type="text" 
+          [(ngModel)]="username" 
+          name="username"
+          placeholder="请输入用户名"
+          autocomplete="username"
+          required>
+      </div>
+
+      <!-- 密码输入 -->
+      <div class="form-group">
+        <label>
+          <i class="fas fa-lock"></i>
+          <span>密码</span>
+        </label>
+        <div class="password-wrapper">
+          <input 
+            [type]="showPassword ? 'text' : 'password'"
+            [(ngModel)]="password" 
+            name="password"
+            placeholder="请输入密码"
+            autocomplete="current-password"
+            required>
+          <button 
+            type="button" 
+            class="toggle-password"
+            (click)="togglePasswordVisibility()">
+            <i [class]="showPassword ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>
+          </button>
+        </div>
+      </div>
+
+      <!-- 记住我和忘记密码 -->
+      <div class="form-options">
+        <label class="remember-me">
+          <input type="checkbox" [(ngModel)]="rememberMe" name="rememberMe">
+          <span>记住我</span>
+        </label>
+        <a class="forgot-password">忘记密码？</a>
+      </div>
+
+      <!-- 登录按钮 -->
+      <button 
+        type="submit" 
+        class="login-btn"
+        [class.loading]="isLoading"
+        [disabled]="isLoading">
+        @if (isLoading) {
+          <i class="fas fa-spinner fa-spin"></i>
+          <span>登录中...</span>
+        } @else {
+          <span>登录</span>
+        }
+      </button>
+    </form>
+
+    <!-- 分隔线 -->
+    <div class="divider">
+      <span>其他登录方式</span>
+    </div>
+
+    <!-- 第三方登录 -->
+    <div class="social-login">
+      <button class="social-btn wechat" (click)="quickLogin('微信')">
+        <i class="fab fa-weixin"></i>
+      </button>
+      <button class="social-btn qq" (click)="quickLogin('QQ')">
+        <i class="fab fa-qq"></i>
+      </button>
+      <button class="social-btn alipay" (click)="quickLogin('支付宝')">
+        <i class="fab fa-alipay"></i>
+      </button>
+    </div>
+
+    <!-- 注册链接 -->
+    <div class="register-link">
+      <span>还没有账号？</span>
+      <a (click)="navigateToRegister()">立即注册</a>
+    </div>
+
+    <!-- 底部协议 -->
+    <div class="terms">
+      <p>登录即表示同意</p>
+      <p>
+        <a>《用户协议》</a>
+        和
+        <a>《隐私政策》</a>
+      </p>
+    </div>
+  </div>
+
+  <!-- 装饰背景 -->
+  <div class="background-decoration">
+    <div class="circle circle-1"></div>
+    <div class="circle circle-2"></div>
+    <div class="circle circle-3"></div>
+  </div>
+</div>

legal-assistant-app/src/app/pages/auth/login/login.scss

@@ -0,0 +1,401 @@
+.login-page {
+  position: relative;
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  overflow: hidden;
+  padding: 20px;
+}
+
+.login-container {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: 420px;
+  background: white;
+  border-radius: 24px;
+  padding: 40px 30px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  animation: slideUp 0.6s ease-out;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.login-header {
+  text-align: center;
+  margin-bottom: 40px;
+}
+
+.logo-wrapper {
+  width: 80px;
+  height: 80px;
+  margin: 0 auto 20px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
+  
+  i {
+    font-size: 40px;
+    color: white;
+  }
+}
+
+.login-header h1 {
+  font-size: 28px;
+  font-weight: 700;
+  color: #1a1a1a;
+  margin-bottom: 8px;
+}
+
+.login-header p {
+  font-size: 14px;
+  color: #666;
+  margin: 0;
+}
+
+.login-form {
+  margin-bottom: 30px;
+}
+
+.error-alert {
+  background: #fee;
+  border: 1px solid #fcc;
+  border-radius: 12px;
+  padding: 12px 16px;
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: #d33;
+  font-size: 14px;
+  animation: shake 0.3s ease-in-out;
+  
+  i {
+    font-size: 16px;
+  }
+}
+
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-5px); }
+  75% { transform: translateX(5px); }
+}
+
+.form-group {
+  margin-bottom: 24px;
+  
+  label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #333;
+    margin-bottom: 8px;
+    
+    i {
+      color: #667eea;
+    }
+  }
+  
+  input {
+    width: 100%;
+    height: 48px;
+    padding: 0 16px;
+    border: 2px solid #e0e0e0;
+    border-radius: 12px;
+    font-size: 15px;
+    transition: all 0.3s;
+    
+    &:focus {
+      outline: none;
+      border-color: #667eea;
+      box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+    }
+    
+    &::placeholder {
+      color: #999;
+    }
+  }
+}
+
+.password-wrapper {
+  position: relative;
+  
+  input {
+    padding-right: 48px;
+  }
+  
+  .toggle-password {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    color: #999;
+    cursor: pointer;
+    padding: 8px;
+    
+    &:hover {
+      color: #667eea;
+    }
+  }
+}
+
+.form-options {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+}
+
+.remember-me {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  color: #666;
+  cursor: pointer;
+  
+  input[type="checkbox"] {
+    width: 18px;
+    height: 18px;
+    cursor: pointer;
+  }
+}
+
+.forgot-password {
+  font-size: 14px;
+  color: #667eea;
+  text-decoration: none;
+  cursor: pointer;
+  
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.login-btn {
+  width: 100%;
+  height: 52px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border: none;
+  border-radius: 12px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  
+  &:hover:not(:disabled) {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
+  }
+  
+  &:active:not(:disabled) {
+    transform: translateY(0);
+  }
+  
+  &:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+  }
+  
+  &.loading {
+    pointer-events: none;
+  }
+}
+
+.divider {
+  position: relative;
+  text-align: center;
+  margin: 30px 0;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    width: 100%;
+    height: 1px;
+    background: #e0e0e0;
+  }
+  
+  span {
+    position: relative;
+    background: white;
+    padding: 0 15px;
+    font-size: 13px;
+    color: #999;
+  }
+}
+
+.social-login {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  margin-bottom: 30px;
+}
+
+.social-btn {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  border: 2px solid #e0e0e0;
+  background: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s;
+  
+  i {
+    font-size: 24px;
+  }
+  
+  &:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+  }
+  
+  &.wechat {
+    i { color: #09bb07; }
+    &:hover { border-color: #09bb07; }
+  }
+  
+  &.qq {
+    i { color: #12b7f5; }
+    &:hover { border-color: #12b7f5; }
+  }
+  
+  &.alipay {
+    i { color: #1678ff; }
+    &:hover { border-color: #1678ff; }
+  }
+}
+
+.register-link {
+  text-align: center;
+  font-size: 14px;
+  color: #666;
+  
+  a {
+    color: #667eea;
+    font-weight: 600;
+    text-decoration: none;
+    cursor: pointer;
+    margin-left: 5px;
+    
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.terms {
+  text-align: center;
+  margin-top: 20px;
+  
+  p {
+    font-size: 12px;
+    color: #999;
+    margin: 5px 0;
+    
+    a {
+      color: #667eea;
+      text-decoration: none;
+      cursor: pointer;
+      
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+.background-decoration {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.circle {
+  position: absolute;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.1);
+  animation: float 6s ease-in-out infinite;
+}
+
+.circle-1 {
+  width: 200px;
+  height: 200px;
+  top: -100px;
+  right: -50px;
+  animation-delay: 0s;
+}
+
+.circle-2 {
+  width: 150px;
+  height: 150px;
+  bottom: -75px;
+  left: -75px;
+  animation-delay: 2s;
+}
+
+.circle-3 {
+  width: 100px;
+  height: 100px;
+  top: 50%;
+  left: -50px;
+  animation-delay: 4s;
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0) rotate(0deg);
+  }
+  50% {
+    transform: translateY(-20px) rotate(180deg);
+  }
+}
+
+/* 响应式设计 */
+@media (max-width: 480px) {
+  .login-container {
+    padding: 30px 20px;
+    border-radius: 20px;
+  }
+  
+  .logo-wrapper {
+    width: 70px;
+    height: 70px;
+    
+    i {
+      font-size: 35px;
+    }
+  }
+  
+  .login-header h1 {
+    font-size: 24px;
+  }
+}

legal-assistant-app/src/app/pages/auth/login/login.ts

@@ -0,0 +1,79 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Router, RouterModule, ActivatedRoute } from '@angular/router';
+import { AuthService } from '../../../shared/services/auth.service';
+
+@Component({
+  selector: 'app-login',
+  standalone: true,
+  imports: [CommonModule, FormsModule, RouterModule],
+  templateUrl: './login.html',
+  styleUrl: './login.scss'
+})
+export class Login {
+  username = '';
+  password = '';
+  rememberMe = false;
+  isLoading = false;
+  errorMessage = '';
+  showPassword = false;
+  returnUrl = '/home';
+
+  constructor(
+    private authService: AuthService,
+    private router: Router,
+    private route: ActivatedRoute
+  ) {
+    // 如果已登录，直接跳转到首页
+    if (this.authService.isAuthenticated()) {
+      this.router.navigate(['/home']);
+    }
+    
+    // 获取返回URL
+    this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/home';
+  }
+
+  onSubmit(): void {
+    if (!this.username || !this.password) {
+      this.errorMessage = '请输入用户名和密码';
+      return;
+    }
+
+    if (this.password.length < 6) {
+      this.errorMessage = '密码至少需要6位';
+      return;
+    }
+
+    this.isLoading = true;
+    this.errorMessage = '';
+
+    this.authService.login(this.username, this.password).subscribe({
+      next: () => {
+        if (this.rememberMe) {
+          localStorage.setItem('rememberMe', 'true');
+        }
+        // 登录成功，跳转到之前的页面或首页
+        this.router.navigate([this.returnUrl]);
+      },
+      error: (error) => {
+        this.isLoading = false;
+        this.errorMessage = error.message || '登录失败，请重试';
+      }
+    });
+  }
+
+  togglePasswordVisibility(): void {
+    this.showPassword = !this.showPassword;
+  }
+
+  navigateToRegister(): void {
+    this.router.navigate(['/register']);
+  }
+
+  quickLogin(type: string): void {
+    // 第三方登录功能（模拟）
+    console.log(`使用 ${type} 登录`);
+    this.errorMessage = '第三方登录功能暂未开放';
+  }
+}

legal-assistant-app/src/app/pages/auth/register/register.html

@@ -0,0 +1,194 @@
+<div class="register-page">
+  <div class="register-container">
+    <!-- Logo和标题 -->
+    <div class="register-header">
+      <div class="logo-wrapper">
+        <i class="fas fa-balance-scale"></i>
+      </div>
+      <h1>创建账号</h1>
+      <p>加入智慧法律助手，享受专业法律服务</p>
+    </div>
+
+    <!-- 进度指示器 -->
+    <div class="progress-indicator">
+      <div class="progress-step" [class.active]="currentStep >= 1" [class.completed]="currentStep > 1">
+        <div class="step-number">1</div>
+        <div class="step-label">基本信息</div>
+      </div>
+      <div class="progress-line" [class.active]="currentStep > 1"></div>
+      <div class="progress-step" [class.active]="currentStep >= 2">
+        <div class="step-number">2</div>
+        <div class="step-label">设置密码</div>
+      </div>
+    </div>
+
+    <!-- 错误提示 -->
+    @if (errorMessage) {
+      <div class="error-alert">
+        <i class="fas fa-exclamation-circle"></i>
+        <span>{{errorMessage}}</span>
+      </div>
+    }
+
+    <!-- 注册表单 - 第一步 -->
+    @if (currentStep === 1) {
+      <form class="register-form" (ngSubmit)="nextStep()">
+        <div class="form-group">
+          <label>
+            <i class="fas fa-user"></i>
+            <span>用户名</span>
+            <span class="required">*</span>
+          </label>
+          <input 
+            type="text" 
+            [(ngModel)]="username" 
+            name="username"
+            placeholder="请输入用户名（至少3个字符）"
+            autocomplete="username"
+            required>
+        </div>
+
+        <div class="form-group">
+          <label>
+            <i class="fas fa-envelope"></i>
+            <span>邮箱</span>
+            <span class="required">*</span>
+          </label>
+          <input 
+            type="email" 
+            [(ngModel)]="email" 
+            name="email"
+            placeholder="请输入邮箱地址"
+            autocomplete="email"
+            required>
+        </div>
+
+        <div class="form-group">
+          <label>
+            <i class="fas fa-mobile-alt"></i>
+            <span>手机号</span>
+            <span class="optional">(可选)</span>
+          </label>
+          <input 
+            type="tel" 
+            [(ngModel)]="phone" 
+            name="phone"
+            placeholder="请输入手机号"
+            autocomplete="tel">
+        </div>
+
+        <button type="submit" class="next-btn">
+          <span>下一步</span>
+          <i class="fas fa-arrow-right"></i>
+        </button>
+      </form>
+    }
+
+    <!-- 注册表单 - 第二步 -->
+    @if (currentStep === 2) {
+      <form class="register-form" (ngSubmit)="onSubmit()">
+        <div class="form-group">
+          <label>
+            <i class="fas fa-lock"></i>
+            <span>密码</span>
+            <span class="required">*</span>
+          </label>
+          <div class="password-wrapper">
+            <input 
+              [type]="showPassword ? 'text' : 'password'"
+              [(ngModel)]="password" 
+              name="password"
+              placeholder="请输入密码（至少6位）"
+              autocomplete="new-password"
+              required>
+            <button 
+              type="button" 
+              class="toggle-password"
+              (click)="togglePasswordVisibility('password')">
+              <i [class]="showPassword ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>
+            </button>
+          </div>
+          @if (password) {
+            <div class="password-strength">
+              <div class="strength-bar">
+                <div 
+                  class="strength-fill" 
+                  [class.weak]="getPasswordStrength() === 'weak'"
+                  [class.medium]="getPasswordStrength() === 'medium'"
+                  [class.strong]="getPasswordStrength() === 'strong'"
+                  [style.width]="getPasswordStrength() === 'weak' ? '33%' : getPasswordStrength() === 'medium' ? '66%' : '100%'">
+                </div>
+              </div>
+              <span class="strength-label">密码强度: {{getPasswordStrengthLabel()}}</span>
+            </div>
+          }
+        </div>
+
+        <div class="form-group">
+          <label>
+            <i class="fas fa-lock"></i>
+            <span>确认密码</span>
+            <span class="required">*</span>
+          </label>
+          <div class="password-wrapper">
+            <input 
+              [type]="showConfirmPassword ? 'text' : 'password'"
+              [(ngModel)]="confirmPassword" 
+              name="confirmPassword"
+              placeholder="请再次输入密码"
+              autocomplete="new-password"
+              required>
+            <button 
+              type="button" 
+              class="toggle-password"
+              (click)="togglePasswordVisibility('confirm')">
+              <i [class]="showConfirmPassword ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>
+            </button>
+          </div>
+        </div>
+
+        <div class="form-group checkbox-group">
+          <label class="checkbox-label">
+            <input type="checkbox" [(ngModel)]="agreedToTerms" name="agreedToTerms" required>
+            <span>我已阅读并同意</span>
+            <a>《用户协议》</a>
+            <span>和</span>
+            <a>《隐私政策》</a>
+          </label>
+        </div>
+
+        <div class="form-actions">
+          <button type="button" class="back-btn" (click)="prevStep()">
+            <i class="fas fa-arrow-left"></i>
+            <span>上一步</span>
+          </button>
+          <button 
+            type="submit" 
+            class="register-btn"
+            [class.loading]="isLoading"
+            [disabled]="isLoading">
+            @if (isLoading) {
+              <i class="fas fa-spinner fa-spin"></i>
+              <span>注册中...</span>
+            } @else {
+              <span>立即注册</span>
+            }
+          </button>
+        </div>
+      </form>
+    }
+
+    <!-- 登录链接 -->
+    <div class="login-link">
+      <span>已有账号？</span>
+      <a (click)="navigateToLogin()">立即登录</a>
+    </div>
+  </div>
+
+  <!-- 装饰背景 -->
+  <div class="background-decoration">
+    <div class="circle circle-1"></div>
+    <div class="circle circle-2"></div>
+    <div class="circle circle-3"></div>
+  </div>
+</div>

legal-assistant-app/src/app/pages/auth/register/register.scss

@@ -0,0 +1,481 @@
+.register-page {
+  position: relative;
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  overflow: hidden;
+  padding: 20px;
+}
+
+.register-container {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: 480px;
+  background: white;
+  border-radius: 24px;
+  padding: 40px 30px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  animation: slideUp 0.6s ease-out;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.register-header {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.logo-wrapper {
+  width: 80px;
+  height: 80px;
+  margin: 0 auto 20px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
+  
+  i {
+    font-size: 40px;
+    color: white;
+  }
+}
+
+.register-header h1 {
+  font-size: 28px;
+  font-weight: 700;
+  color: #1a1a1a;
+  margin-bottom: 8px;
+}
+
+.register-header p {
+  font-size: 14px;
+  color: #666;
+  margin: 0;
+}
+
+.progress-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 30px;
+}
+
+.progress-step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  
+  .step-number {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: #e0e0e0;
+    color: #999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 600;
+    transition: all 0.3s;
+  }
+  
+  .step-label {
+    font-size: 12px;
+    color: #999;
+    transition: all 0.3s;
+  }
+  
+  &.active {
+    .step-number {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: white;
+      box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
+    }
+    
+    .step-label {
+      color: #667eea;
+      font-weight: 600;
+    }
+  }
+  
+  &.completed {
+    .step-number {
+      background: #43e97b;
+      color: white;
+    }
+  }
+}
+
+.progress-line {
+  width: 80px;
+  height: 2px;
+  background: #e0e0e0;
+  margin: 0 10px;
+  margin-bottom: 28px;
+  transition: all 0.3s;
+  
+  &.active {
+    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+  }
+}
+
+.error-alert {
+  background: #fee;
+  border: 1px solid #fcc;
+  border-radius: 12px;
+  padding: 12px 16px;
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: #d33;
+  font-size: 14px;
+  animation: shake 0.3s ease-in-out;
+  
+  i {
+    font-size: 16px;
+  }
+}
+
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-5px); }
+  75% { transform: translateX(5px); }
+}
+
+.register-form {
+  margin-bottom: 25px;
+}
+
+.form-group {
+  margin-bottom: 24px;
+  
+  label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #333;
+    margin-bottom: 8px;
+    
+    i {
+      color: #667eea;
+    }
+    
+    .required {
+      color: #f44336;
+      font-size: 12px;
+    }
+    
+    .optional {
+      color: #999;
+      font-size: 12px;
+    }
+  }
+  
+  input {
+    width: 100%;
+    height: 48px;
+    padding: 0 16px;
+    border: 2px solid #e0e0e0;
+    border-radius: 12px;
+    font-size: 15px;
+    transition: all 0.3s;
+    
+    &:focus {
+      outline: none;
+      border-color: #667eea;
+      box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+    }
+    
+    &::placeholder {
+      color: #999;
+    }
+  }
+}
+
+.password-wrapper {
+  position: relative;
+  
+  input {
+    padding-right: 48px;
+  }
+  
+  .toggle-password {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    color: #999;
+    cursor: pointer;
+    padding: 8px;
+    
+    &:hover {
+      color: #667eea;
+    }
+  }
+}
+
+.password-strength {
+  margin-top: 8px;
+  
+  .strength-bar {
+    height: 4px;
+    background: #e0e0e0;
+    border-radius: 2px;
+    overflow: hidden;
+    margin-bottom: 5px;
+  }
+  
+  .strength-fill {
+    height: 100%;
+    transition: all 0.3s;
+    border-radius: 2px;
+    
+    &.weak {
+      background: #f44336;
+    }
+    
+    &.medium {
+      background: #ff9800;
+    }
+    
+    &.strong {
+      background: #4caf50;
+    }
+  }
+  
+  .strength-label {
+    font-size: 12px;
+    color: #666;
+  }
+}
+
+.checkbox-group {
+  margin-bottom: 30px;
+  
+  .checkbox-label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 13px;
+    color: #666;
+    cursor: pointer;
+    flex-wrap: wrap;
+    
+    input[type="checkbox"] {
+      width: 18px;
+      height: 18px;
+      cursor: pointer;
+    }
+    
+    a {
+      color: #667eea;
+      text-decoration: none;
+      cursor: pointer;
+      
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+.next-btn {
+  width: 100%;
+  height: 52px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border: none;
+  border-radius: 12px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
+  }
+  
+  &:active {
+    transform: translateY(0);
+  }
+}
+
+.form-actions {
+  display: flex;
+  gap: 15px;
+}
+
+.back-btn {
+  flex: 1;
+  height: 52px;
+  background: white;
+  color: #667eea;
+  border: 2px solid #667eea;
+  border-radius: 12px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  
+  &:hover {
+    background: #f5f5f5;
+  }
+}
+
+.register-btn {
+  flex: 2;
+  height: 52px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border: none;
+  border-radius: 12px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  
+  &:hover:not(:disabled) {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
+  }
+  
+  &:active:not(:disabled) {
+    transform: translateY(0);
+  }
+  
+  &:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+  }
+  
+  &.loading {
+    pointer-events: none;
+  }
+}
+
+.login-link {
+  text-align: center;
+  font-size: 14px;
+  color: #666;
+  
+  a {
+    color: #667eea;
+    font-weight: 600;
+    text-decoration: none;
+    cursor: pointer;
+    margin-left: 5px;
+    
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.background-decoration {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.circle {
+  position: absolute;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.1);
+  animation: float 6s ease-in-out infinite;
+}
+
+.circle-1 {
+  width: 200px;
+  height: 200px;
+  top: -100px;
+  right: -50px;
+  animation-delay: 0s;
+}
+
+.circle-2 {
+  width: 150px;
+  height: 150px;
+  bottom: -75px;
+  left: -75px;
+  animation-delay: 2s;
+}
+
+.circle-3 {
+  width: 100px;
+  height: 100px;
+  top: 50%;
+  left: -50px;
+  animation-delay: 4s;
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0) rotate(0deg);
+  }
+  50% {
+    transform: translateY(-20px) rotate(180deg);
+  }
+}
+
+/* 响应式设计 */
+@media (max-width: 480px) {
+  .register-container {
+    padding: 30px 20px;
+    border-radius: 20px;
+  }
+  
+  .logo-wrapper {
+    width: 70px;
+    height: 70px;
+    
+    i {
+      font-size: 35px;
+    }
+  }
+  
+  .register-header h1 {
+    font-size: 24px;
+  }
+  
+  .form-actions {
+    flex-direction: column;
+    
+    .back-btn,
+    .register-btn {
+      width: 100%;
+    }
+  }
+}

legal-assistant-app/src/app/pages/auth/register/register.ts

@@ -0,0 +1,153 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Router, RouterModule } from '@angular/router';
+import { AuthService } from '../../../shared/services/auth.service';
+
+@Component({
+  selector: 'app-register',
+  standalone: true,
+  imports: [CommonModule, FormsModule, RouterModule],
+  templateUrl: './register.html',
+  styleUrl: './register.scss'
+})
+export class Register {
+  username = '';
+  email = '';
+  phone = '';
+  password = '';
+  confirmPassword = '';
+  agreedToTerms = false;
+  isLoading = false;
+  errorMessage = '';
+  showPassword = false;
+  showConfirmPassword = false;
+  currentStep = 1;
+
+  constructor(
+    private authService: AuthService,
+    private router: Router
+  ) {
+    // 如果已登录，直接跳转到首页
+    if (this.authService.isAuthenticated()) {
+      this.router.navigate(['/home']);
+    }
+  }
+
+  validateStep1(): boolean {
+    if (!this.username || this.username.length < 3) {
+      this.errorMessage = '用户名至少需要3个字符';
+      return false;
+    }
+
+    if (!this.email || !this.isValidEmail(this.email)) {
+      this.errorMessage = '请输入有效的邮箱地址';
+      return false;
+    }
+
+    if (this.phone && !this.isValidPhone(this.phone)) {
+      this.errorMessage = '请输入有效的手机号';
+      return false;
+    }
+
+    this.errorMessage = '';
+    return true;
+  }
+
+  validateStep2(): boolean {
+    if (!this.password || this.password.length < 6) {
+      this.errorMessage = '密码至少需要6个字符';
+      return false;
+    }
+
+    if (this.password !== this.confirmPassword) {
+      this.errorMessage = '两次输入的密码不一致';
+      return false;
+    }
+
+    if (!this.agreedToTerms) {
+      this.errorMessage = '请先同意用户协议和隐私政策';
+      return false;
+    }
+
+    this.errorMessage = '';
+    return true;
+  }
+
+  nextStep(): void {
+    if (this.currentStep === 1 && this.validateStep1()) {
+      this.currentStep = 2;
+    }
+  }
+
+  prevStep(): void {
+    this.currentStep = 1;
+    this.errorMessage = '';
+  }
+
+  onSubmit(): void {
+    if (!this.validateStep2()) {
+      return;
+    }
+
+    this.isLoading = true;
+    this.errorMessage = '';
+
+    this.authService.register(this.username, this.email, this.password, this.phone).subscribe({
+      next: () => {
+        // 注册成功，跳转到首页
+        this.router.navigate(['/home']);
+      },
+      error: (error) => {
+        this.isLoading = false;
+        this.errorMessage = error.message || '注册失败，请重试';
+      }
+    });
+  }
+
+  isValidEmail(email: string): boolean {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  }
+
+  isValidPhone(phone: string): boolean {
+    const phoneRegex = /^1[3-9]\d{9}$/;
+    return phoneRegex.test(phone);
+  }
+
+  togglePasswordVisibility(field: 'password' | 'confirm'): void {
+    if (field === 'password') {
+      this.showPassword = !this.showPassword;
+    } else {
+      this.showConfirmPassword = !this.showConfirmPassword;
+    }
+  }
+
+  navigateToLogin(): void {
+    this.router.navigate(['/login']);
+  }
+
+  getPasswordStrength(): string {
+    if (!this.password) return '';
+    
+    let strength = 0;
+    if (this.password.length >= 8) strength++;
+    if (/[a-z]/.test(this.password) && /[A-Z]/.test(this.password)) strength++;
+    if (/\d/.test(this.password)) strength++;
+    if (/[!@#$%^&*(),.?":{}|<>]/.test(this.password)) strength++;
+    
+    if (strength <= 1) return 'weak';
+    if (strength <= 2) return 'medium';
+    return 'strong';
+  }
+
+  getPasswordStrengthLabel(): string {
+    const strength = this.getPasswordStrength();
+    switch (strength) {
+      case 'weak': return '弱';
+      case 'medium': return '中';
+      case 'strong': return '强';
+      default: return '';
+    }
+  }
+}

legal-assistant-app/src/app/pages/profile/help-center/help-center.html

@@ -1,5 +1,14 @@
 <div class="help-center-page">
-  <!-- 顶部标签页 -->
+  <!-- 顶部导航栏 -->
+  <header class="page-header">
+    <button class="back-btn" (click)="goBack()">
+      <i class="fas fa-arrow-left"></i>
+    </button>
+    <h1>帮助中心</h1>
+    <div class="placeholder"></div>
+  </header>
+
+  <!-- 标签页 -->
   <div class="top-tabs">
     <button 
       class="tab-btn"

legal-assistant-app/src/app/pages/profile/help-center/help-center.scss

@@ -1,85 +1,134 @@
 .help-center-page {
   min-height: 100vh;
-  background: var(--bg-primary);
+  background: #f5f5f5;
   padding-bottom: 80px;
 
-  .top-tabs {
+  // 顶部导航栏
+  .page-header {
     display: flex;
-    background: var(--bg-secondary);
-    padding: var(--spacing-xs);
-    gap: var(--spacing-xs);
+    align-items: center;
+    justify-content: space-between;
+    padding: 18px 20px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     position: sticky;
     top: 0;
-    z-index: var(--z-sticky);
-    border-bottom: 1px solid var(--border-color);
+    z-index: 100;
+
+    h1 {
+      flex: 1;
+      text-align: center;
+      font-size: 20px;
+      font-weight: 700;
+      color: white;
+      margin: 0;
+    }
+
+    .back-btn {
+      width: 40px;
+      height: 40px;
+      border-radius: 12px;
+      background: rgba(255, 255, 255, 0.2);
+      border: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      transition: all 0.3s;
+      color: white;
+
+      i {
+        font-size: 18px;
+      }
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.3);
+      }
+
+      &:active {
+        transform: scale(0.95);
+      }
+    }
+
+    .placeholder {
+      width: 40px;
+    }
+  }
+
+  // 标签页
+  .top-tabs {
+    display: flex;
+    gap: 10px;
+    padding: 15px 20px;
+    background: white;
+    border-bottom: 1px solid #f0f0f0;
+    overflow-x: auto;
 
     .tab-btn {
       flex: 1;
-      padding: var(--spacing-md);
+      padding: 12px 20px;
       border: none;
-      border-radius: var(--radius-md);
-      background: transparent;
-      color: var(--text-secondary);
-      font-size: var(--font-sm);
-      font-weight: var(--font-medium);
+      border-radius: 12px;
+      background: #f5f5f5;
+      color: #666;
+      font-size: 15px;
+      font-weight: 600;
       cursor: pointer;
-      transition: all var(--transition-fast);
+      transition: all 0.3s;
       display: flex;
-      flex-direction: column;
       align-items: center;
-      gap: 4px;
+      justify-content: center;
+      gap: 8px;
+      white-space: nowrap;
 
       i {
-        font-size: 20px;
+        font-size: 16px;
       }
 
       &.active {
-        background: var(--primary-color);
-        color: var(--text-white);
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
       }
 
-      &:active {
-        transform: scale(0.98);
+      &:hover:not(.active) {
+        background: #ececec;
       }
     }
   }
 
-  // FAQ区域
+  // FAQ 部分
   .faq-section {
-    padding: var(--spacing-lg);
+    padding: 20px;
 
     .category-filter {
       display: flex;
-      gap: var(--spacing-sm);
-      margin-bottom: var(--spacing-xl);
+      gap: 10px;
+      margin-bottom: 20px;
       overflow-x: auto;
-      -webkit-overflow-scrolling: touch;
-
-      &::-webkit-scrollbar {
-        display: none;
-      }
+      padding-bottom: 5px;
 
       .category-btn {
-        padding: var(--spacing-sm) var(--spacing-lg);
-        border: 1px solid var(--border-color);
-        border-radius: var(--radius-xl);
-        background: var(--bg-secondary);
-        color: var(--text-secondary);
-        font-size: var(--font-sm);
-        font-weight: var(--font-medium);
+        padding: 8px 18px;
+        border: 2px solid #e0e0e0;
+        border-radius: 20px;
+        background: white;
+        color: #666;
+        font-size: 14px;
+        font-weight: 500;
         cursor: pointer;
-        transition: all var(--transition-fast);
+        transition: all 0.3s;
         white-space: nowrap;
-        flex-shrink: 0;
 
         &.active {
-          border-color: var(--primary-color);
-          background: var(--primary-color);
-          color: var(--text-white);
+          border-color: #667eea;
+          background: #f5f5ff;
+          color: #667eea;
+          font-weight: 600;
         }
 
-        &:active {
-          transform: scale(0.95);
+        &:hover:not(.active) {
+          border-color: #ccc;
         }
       }
     }
@@ -87,94 +136,92 @@
     .faq-list {
       display: flex;
       flex-direction: column;
-      gap: var(--spacing-md);
+      gap: 12px;
 
       .faq-item {
-        background: var(--bg-secondary);
-        border-radius: var(--radius-lg);
+        background: white;
+        border-radius: 14px;
         overflow: hidden;
-        transition: all var(--transition-fast);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+        transition: all 0.3s;
+
+        &.expanded {
+          box-shadow: 0 4px 16px rgba(102, 126, 234, 0.15);
+        }
 
         .faq-question {
           display: flex;
-          justify-content: space-between;
           align-items: center;
-          padding: var(--spacing-lg);
+          justify-content: space-between;
+          padding: 18px;
           cursor: pointer;
-          transition: all var(--transition-fast);
-
-          &:active {
-            background: var(--bg-tertiary);
-          }
+          transition: all 0.3s;
 
           h3 {
             flex: 1;
-            font-size: var(--font-md);
-            font-weight: var(--font-semibold);
-            color: var(--text-primary);
+            font-size: 16px;
+            font-weight: 600;
+            color: #1a1a1a;
             margin: 0;
-            margin-right: var(--spacing-md);
+            line-height: 1.5;
           }
 
           i {
-            font-size: 16px;
-            color: var(--text-secondary);
-            transition: transform var(--transition-fast);
+            font-size: 14px;
+            color: #667eea;
+            margin-left: 12px;
+            transition: transform 0.3s;
           }
-        }
 
-        &.expanded .faq-question i {
-          transform: rotate(180deg);
+          &:hover {
+            background: #f9f9f9;
+          }
         }
 
         .faq-answer {
-          padding: 0 var(--spacing-lg) var(--spacing-lg) var(--spacing-lg);
+          padding: 0 18px 18px;
           animation: slideDown 0.3s ease;
 
           p {
-            font-size: var(--font-sm);
-            color: var(--text-secondary);
-            line-height: 1.6;
             margin: 0;
+            font-size: 15px;
+            color: #666;
+            line-height: 1.7;
           }
         }
       }
     }
   }
 
-  // 教程区域
+  // 教程部分
   .tutorial-section {
-    padding: var(--spacing-lg);
+    padding: 20px;
 
     .tutorial-list {
-      display: flex;
-      flex-direction: column;
-      gap: var(--spacing-lg);
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+      gap: 20px;
 
       .tutorial-card {
-        background: var(--bg-secondary);
-        border-radius: var(--radius-lg);
+        background: white;
+        border-radius: 16px;
         overflow: hidden;
-        box-shadow: var(--shadow-sm);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
         cursor: pointer;
-        transition: all var(--transition-fast);
+        transition: all 0.3s;
 
-        &:active {
-          transform: scale(0.98);
-          box-shadow: var(--shadow-md);
+        &:hover {
+          transform: translateY(-4px);
+          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
         }
 
         .tutorial-thumbnail {
           position: relative;
           width: 100%;
-          padding-top: 56.25%; // 16:9
-          background: var(--bg-tertiary);
+          height: 160px;
           overflow: hidden;
 
           img {
-            position: absolute;
-            top: 0;
-            left: 0;
             width: 100%;
             height: 100%;
             object-fit: cover;
@@ -182,55 +229,55 @@
 
           .play-overlay {
             position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            width: 56px;
-            height: 56px;
-            border-radius: var(--radius-full);
-            background: rgba(0, 0, 0, 0.7);
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.3);
             display: flex;
             align-items: center;
             justify-content: center;
 
             i {
-              font-size: 24px;
-              color: var(--text-white);
-              margin-left: 2px;
+              font-size: 48px;
+              color: white;
+              opacity: 0.9;
             }
           }
 
           .duration-badge {
             position: absolute;
-            bottom: 8px;
-            right: 8px;
-            padding: 4px 8px;
-            border-radius: 4px;
+            bottom: 10px;
+            right: 10px;
+            padding: 4px 10px;
             background: rgba(0, 0, 0, 0.7);
-            color: var(--text-white);
-            font-size: var(--font-xs);
+            color: white;
+            font-size: 12px;
+            font-weight: 600;
+            border-radius: 6px;
           }
         }
 
         .tutorial-info {
-          padding: var(--spacing-lg);
+          padding: 15px;
 
           h3 {
-            font-size: var(--font-md);
-            font-weight: var(--font-semibold);
-            color: var(--text-primary);
-            margin: 0 0 var(--spacing-sm) 0;
+            font-size: 16px;
+            font-weight: 600;
+            color: #1a1a1a;
+            margin: 0 0 8px 0;
+            line-height: 1.4;
           }
 
           .tutorial-type {
-            display: flex;
+            display: inline-flex;
             align-items: center;
-            gap: 4px;
-            font-size: var(--font-sm);
-            color: var(--text-secondary);
+            gap: 6px;
+            font-size: 13px;
+            color: #999;
 
             i {
-              font-size: 12px;
+              color: #667eea;
             }
           }
         }
@@ -238,118 +285,131 @@
     }
   }
 
-  // 联系客服区域
+  // 联系客服部分
   .contact-section {
-    padding: var(--spacing-lg);
+    padding: 20px;
 
     .contact-options {
-      display: flex;
-      flex-direction: column;
-      gap: var(--spacing-md);
-      margin-bottom: var(--spacing-2xl);
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: 15px;
+      margin-bottom: 30px;
 
       .contact-card {
-        background: var(--bg-secondary);
-        border-radius: var(--radius-xl);
-        padding: var(--spacing-2xl);
+        background: white;
+        border-radius: 16px;
+        padding: 30px 20px;
         text-align: center;
-        box-shadow: var(--shadow-sm);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
         cursor: pointer;
-        transition: all var(--transition-fast);
+        transition: all 0.3s;
 
-        &:active {
-          transform: scale(0.98);
+        &:hover {
+          transform: translateY(-4px);
+          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
         }
 
         .contact-icon {
           width: 64px;
           height: 64px;
-          border-radius: var(--radius-full);
+          margin: 0 auto 15px;
+          border-radius: 50%;
           background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-          margin: 0 auto var(--spacing-lg);
           display: flex;
           align-items: center;
           justify-content: center;
+          box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
 
           i {
             font-size: 28px;
-            color: var(--text-white);
+            color: white;
           }
         }
 
         h3 {
-          font-size: var(--font-lg);
-          font-weight: var(--font-semibold);
-          color: var(--text-primary);
-          margin: 0 0 var(--spacing-sm) 0;
+          font-size: 18px;
+          font-weight: 700;
+          color: #1a1a1a;
+          margin: 0 0 8px 0;
         }
 
         p {
-          font-size: var(--font-sm);
-          color: var(--text-secondary);
-          margin: 0 0 var(--spacing-lg) 0;
+          font-size: 14px;
+          color: #999;
+          margin: 0 0 20px 0;
         }
 
         .contact-btn {
-          padding: var(--spacing-sm) var(--spacing-2xl);
+          width: 100%;
+          padding: 12px;
           border: none;
-          border-radius: var(--radius-lg);
-          background: var(--primary-color);
-          color: var(--text-white);
-          font-size: var(--font-sm);
-          font-weight: var(--font-semibold);
+          border-radius: 10px;
+          background: #f5f5ff;
+          color: #667eea;
+          font-size: 15px;
+          font-weight: 600;
           cursor: pointer;
-          transition: all var(--transition-fast);
+          transition: all 0.3s;
 
-          &:active {
-            transform: scale(0.95);
+          &:hover {
+            background: #667eea;
+            color: white;
           }
         }
       }
     }
 
     .about-section {
+      margin-top: 30px;
+
       h3 {
-        font-size: var(--font-lg);
-        font-weight: var(--font-semibold);
-        color: var(--text-primary);
-        margin-bottom: var(--spacing-md);
+        font-size: 18px;
+        font-weight: 700;
+        color: #1a1a1a;
+        margin: 0 0 15px 0;
       }
 
       .about-card {
-        background: var(--bg-secondary);
-        border-radius: var(--radius-lg);
-        padding: var(--spacing-lg);
+        background: white;
+        border-radius: 16px;
+        padding: 25px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
 
         p {
-          font-size: var(--font-sm);
-          color: var(--text-secondary);
-          line-height: 1.6;
-          margin-bottom: var(--spacing-md);
+          font-size: 15px;
+          color: #666;
+          margin: 0 0 12px 0;
+          line-height: 1.7;
 
           strong {
-            color: var(--text-primary);
+            color: #1a1a1a;
+            font-weight: 600;
           }
 
           &.description {
-            margin-top: var(--spacing-lg);
-            padding-top: var(--spacing-lg);
-            border-top: 1px solid var(--border-color);
+            margin-top: 15px;
+            padding-top: 15px;
+            border-top: 1px solid #f0f0f0;
           }
         }
 
         .links {
           display: flex;
-          gap: var(--spacing-lg);
-          margin-top: var(--spacing-lg);
+          gap: 20px;
+          margin-top: 20px;
+          padding-top: 20px;
+          border-top: 1px solid #f0f0f0;
 
           a {
-            color: var(--primary-color);
+            color: #667eea;
             text-decoration: none;
-            font-size: var(--font-sm);
+            font-size: 15px;
+            font-weight: 600;
+            transition: all 0.3s;
 
-            &:active {
-              opacity: 0.7;
+            &:hover {
+              color: #764ba2;
+              text-decoration: underline;
             }
           }
         }
@@ -361,11 +421,42 @@
 @keyframes slideDown {
   from {
     opacity: 0;
-    max-height: 0;
+    transform: translateY(-10px);
   }
   to {
     opacity: 1;
-    max-height: 500px;
+    transform: translateY(0);
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .help-center-page {
+    .tutorial-section .tutorial-list {
+      grid-template-columns: 1fr;
+    }
+
+    .contact-section .contact-options {
+      grid-template-columns: 1fr;
+    }
   }
 }
 
+@media (max-width: 480px) {
+  .help-center-page {
+    .top-tabs {
+      padding: 12px 15px;
+
+      .tab-btn {
+        padding: 10px 16px;
+        font-size: 14px;
+      }
+    }
+
+    .faq-section,
+    .tutorial-section,
+    .contact-section {
+      padding: 15px;
+    }
+  }
+}

legal-assistant-app/src/app/pages/profile/help-center/help-center.ts

@@ -1,6 +1,6 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
+import { RouterModule, Router, ActivatedRoute } from '@angular/router';
 
 interface FAQItem {
   id: number;
@@ -25,7 +25,7 @@ interface Tutorial {
   templateUrl: './help-center.html',
   styleUrl: './help-center.scss'
 })
-export class HelpCenter {
+export class HelpCenter implements OnInit {
   activeTab: 'faq' | 'tutorial' | 'contact' = 'faq';
   
   selectedCategory = 'all';
@@ -107,7 +107,19 @@ export class HelpCenter {
     }
   ];
   
-  constructor() {}
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute
+  ) {}
+  
+  ngOnInit() {
+    // 检查查询参数以设置默认标签页
+    this.route.queryParams.subscribe(params => {
+      if (params['tab']) {
+        this.activeTab = params['tab'] as 'faq' | 'tutorial' | 'contact';
+      }
+    });
+  }
   
   get filteredFAQs() {
     if (this.selectedCategory === 'all') {
@@ -145,4 +157,8 @@ export class HelpCenter {
         break;
     }
   }
+  
+  goBack() {
+    this.router.navigate(['/profile']);
+  }
 }

legal-assistant-app/src/app/pages/profile/personal-center/personal-center.scss

@@ -1,6 +1,6 @@
 .personal-center-page {
   min-height: 100vh;
-  background: var(--bg-primary);
+  background: #f5f5f5;
   padding-bottom: 80px;
 
   // 顶部导航栏
@@ -8,43 +8,43 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: var(--spacing-lg);
-    background: var(--bg-secondary);
-    border-bottom: 1px solid var(--border-color);
+    padding: 18px 20px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     position: sticky;
     top: 0;
-    z-index: var(--z-sticky);
+    z-index: 100;
 
     h1 {
       flex: 1;
       text-align: center;
-      font-size: var(--font-xl);
-      font-weight: var(--font-semibold);
-      color: var(--text-primary);
+      font-size: 20px;
+      font-weight: 700;
+      color: white;
       margin: 0;
     }
 
     .back-btn,
     .edit-btn {
-      width: 36px;
-      height: 36px;
-      border-radius: var(--radius-md);
-      background: transparent;
+      width: 40px;
+      height: 40px;
+      border-radius: 12px;
+      background: rgba(255, 255, 255, 0.2);
       border: none;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
-      transition: all var(--transition-fast);
-      color: var(--text-primary);
-      font-size: var(--font-md);
+      transition: all 0.3s;
+      color: white;
+      font-size: 15px;
 
       i {
         font-size: 18px;
       }
 
       &:hover {
-        background: var(--bg-tertiary);
+        background: rgba(255, 255, 255, 0.3);
       }
 
       &:active {
@@ -54,7 +54,7 @@
   }
 
   .page-content {
-    padding: var(--spacing-lg);
+    padding: 20px;
   }
 
   // 头像区域
@@ -62,40 +62,48 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: var(--spacing-2xl) 0;
-    margin-bottom: var(--spacing-lg);
+    padding: 40px 0;
+    margin-bottom: 25px;
+    background: white;
+    border-radius: 16px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
 
     .avatar-container {
       position: relative;
-      margin-bottom: var(--spacing-md);
+      margin-bottom: 15px;
 
       .avatar-image {
-        width: 100px;
-        height: 100px;
-        border-radius: var(--radius-full);
+        width: 110px;
+        height: 110px;
+        border-radius: 50%;
         object-fit: cover;
-        border: 4px solid var(--bg-secondary);
-        box-shadow: var(--shadow-lg);
+        border: 4px solid #f5f5ff;
+        box-shadow: 0 4px 16px rgba(102, 126, 234, 0.2);
       }
 
       .change-avatar-btn {
         position: absolute;
-        bottom: 0;
-        right: 0;
-        width: 32px;
-        height: 32px;
-        border-radius: var(--radius-full);
-        background: var(--primary-color);
-        border: 3px solid var(--bg-primary);
+        bottom: 4px;
+        right: 4px;
+        width: 36px;
+        height: 36px;
+        border-radius: 50%;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border: 3px solid white;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
-        transition: all var(--transition-fast);
+        transition: all 0.3s;
+        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
 
         i {
-          font-size: 14px;
-          color: var(--text-white);
+          font-size: 16px;
+          color: white;
+        }
+
+        &:hover {
+          transform: scale(1.1);
         }
 
         &:active {
@@ -105,21 +113,22 @@
     }
 
     .avatar-tip {
-      font-size: var(--font-sm);
-      color: var(--text-secondary);
+      font-size: 13px;
+      color: #999;
       margin: 0;
     }
   }
 
   // 信息表单
   .info-form {
-    background: var(--bg-secondary);
-    border-radius: var(--radius-lg);
-    padding: var(--spacing-lg);
-    margin-bottom: var(--spacing-lg);
+    background: white;
+    border-radius: 16px;
+    padding: 25px;
+    margin-bottom: 20px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
 
     .form-group {
-      margin-bottom: var(--spacing-lg);
+      margin-bottom: 22px;
 
       &:last-child {
         margin-bottom: 0;
@@ -128,54 +137,55 @@
       .form-label {
         display: flex;
         align-items: center;
-        gap: var(--spacing-sm);
-        font-size: var(--font-sm);
-        font-weight: var(--font-medium);
-        color: var(--text-secondary);
-        margin-bottom: var(--spacing-sm);
+        gap: 8px;
+        font-size: 14px;
+        font-weight: 600;
+        color: #666;
+        margin-bottom: 10px;
 
         i {
-          font-size: 14px;
-          color: var(--primary-color);
+          font-size: 15px;
+          color: #667eea;
         }
       }
 
       .form-input,
       .form-textarea {
         width: 100%;
-        padding: var(--spacing-md);
-        border: 1px solid var(--border-color);
-        border-radius: var(--radius-md);
-        font-size: var(--font-md);
-        color: var(--text-primary);
-        background: var(--bg-tertiary);
+        padding: 14px 16px;
+        border: 2px solid #e0e0e0;
+        border-radius: 12px;
+        font-size: 15px;
+        color: #333;
+        background: #f9f9f9;
         outline: none;
-        transition: all var(--transition-fast);
+        transition: all 0.3s;
 
         &::placeholder {
-          color: var(--text-tertiary);
+          color: #999;
         }
 
         &:focus {
-          border-color: var(--primary-color);
-          background: var(--bg-secondary);
-          box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
+          border-color: #667eea;
+          background: white;
+          box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
         }
       }
 
       .form-textarea {
         resize: vertical;
-        min-height: 80px;
+        min-height: 100px;
         font-family: inherit;
+        line-height: 1.6;
       }
 
       .form-value {
-        padding: var(--spacing-md);
-        font-size: var(--font-md);
-        color: var(--text-primary);
-        background: var(--bg-tertiary);
-        border-radius: var(--radius-md);
-        min-height: 48px;
+        padding: 14px 16px;
+        font-size: 15px;
+        color: #333;
+        background: #f9f9f9;
+        border-radius: 12px;
+        min-height: 52px;
         display: flex;
         align-items: center;
       }
@@ -184,34 +194,36 @@
 
   // 操作按钮
   .action-buttons {
-    margin-bottom: var(--spacing-xl);
+    margin-bottom: 30px;
 
     .save-btn {
       width: 100%;
-      padding: var(--spacing-lg);
+      padding: 16px;
       border: none;
-      border-radius: var(--radius-lg);
-      background: var(--primary-color);
-      color: var(--text-white);
-      font-size: var(--font-md);
-      font-weight: var(--font-semibold);
+      border-radius: 14px;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: white;
+      font-size: 16px;
+      font-weight: 600;
       cursor: pointer;
-      transition: all var(--transition-fast);
+      transition: all 0.3s;
       display: flex;
       align-items: center;
       justify-content: center;
-      gap: var(--spacing-sm);
+      gap: 10px;
+      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
 
       i {
         font-size: 18px;
       }
 
-      &:active {
-        transform: scale(0.98);
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
       }
 
-      &:hover {
-        background: var(--primary-dark);
+      &:active {
+        transform: scale(0.98);
       }
     }
   }
@@ -220,30 +232,31 @@
   .extra-info {
     display: flex;
     flex-direction: column;
-    gap: var(--spacing-lg);
+    gap: 20px;
 
     .info-card {
-      background: var(--bg-secondary);
-      border-radius: var(--radius-lg);
-      padding: var(--spacing-lg);
+      background: white;
+      border-radius: 16px;
+      padding: 25px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
 
       .info-header {
         display: flex;
         align-items: center;
-        gap: var(--spacing-sm);
-        margin-bottom: var(--spacing-lg);
-        padding-bottom: var(--spacing-md);
-        border-bottom: 1px solid var(--border-color);
+        gap: 10px;
+        margin-bottom: 20px;
+        padding-bottom: 15px;
+        border-bottom: 2px solid #f0f0f0;
 
         i {
-          font-size: 18px;
-          color: var(--primary-color);
+          font-size: 20px;
+          color: #667eea;
         }
 
         h3 {
-          font-size: var(--font-lg);
-          font-weight: var(--font-semibold);
-          color: var(--text-primary);
+          font-size: 18px;
+          font-weight: 700;
+          color: #1a1a1a;
           margin: 0;
         }
       }
@@ -253,8 +266,8 @@
           display: flex;
           justify-content: space-between;
           align-items: center;
-          padding: var(--spacing-md) 0;
-          border-bottom: 1px solid var(--border-color);
+          padding: 14px 0;
+          border-bottom: 1px solid #f0f0f0;
 
           &:last-child {
             border-bottom: none;
@@ -266,31 +279,33 @@
           }
 
           .item-label {
-            font-size: var(--font-md);
-            color: var(--text-secondary);
+            font-size: 15px;
+            color: #666;
+            font-weight: 500;
           }
 
           .item-value {
-            font-size: var(--font-md);
-            color: var(--text-primary);
+            font-size: 15px;
+            color: #333;
+            font-weight: 600;
             display: flex;
             align-items: center;
-            gap: 4px;
+            gap: 6px;
 
             i {
-              font-size: 14px;
+              font-size: 16px;
             }
 
             &.verified {
-              color: var(--success-color);
+              color: #43a047;
 
               i {
-                color: var(--success-color);
+                color: #43a047;
               }
             }
 
             &.vip {
-              color: var(--warning-color);
+              color: #ff9800;
 
               i {
                 color: #FFD700;
@@ -302,3 +317,21 @@
     }
   }
 }
+
+// 响应式设计
+@media (max-width: 480px) {
+  .personal-center-page {
+    .page-content {
+      padding: 15px;
+    }
+
+    .avatar-section .avatar-container .avatar-image {
+      width: 100px;
+      height: 100px;
+    }
+
+    .info-form {
+      padding: 20px;
+    }
+  }
+}

legal-assistant-app/src/app/pages/profile/privacy-settings/privacy-settings.html

@@ -1,4 +1,138 @@
-<div class="page-container">
-  <h1>隐私设置</h1>
-  <p>页面内容已清空，路由正常工作</p>
+<div class="privacy-settings-page">
+  <!-- 顶部导航栏 -->
+  <header class="page-header">
+    <button class="back-btn" (click)="goBack()">
+      <i class="fas fa-arrow-left"></i>
+    </button>
+    <h1>隐私设置</h1>
+    <div class="placeholder"></div>
+  </header>
+
+  <div class="page-content">
+    <!-- 账号隐私 -->
+    <div class="settings-section">
+      <h2 class="section-title">账号隐私</h2>
+      <div class="settings-card">
+        @for (item of accountPrivacySettings; track item.id) {
+          <div class="setting-item">
+            <div class="setting-info">
+              <div class="setting-icon" [style.background]="item.color">
+                <i class="fas {{item.icon}}"></i>
+              </div>
+              <div class="setting-text">
+                <h3>{{item.title}}</h3>
+                <p>{{item.description}}</p>
+              </div>
+            </div>
+            <label class="toggle-switch">
+              <input 
+                type="checkbox" 
+                [(ngModel)]="item.enabled"
+                (change)="onSettingChange(item)">
+              <span class="slider"></span>
+            </label>
+          </div>
+        }
+      </div>
+    </div>
+
+    <!-- 数据权限 -->
+    <div class="settings-section">
+      <h2 class="section-title">数据权限</h2>
+      <div class="settings-card">
+        @for (item of dataPermissions; track item.id) {
+          <div class="setting-item">
+            <div class="setting-info">
+              <div class="setting-icon" [style.background]="item.color">
+                <i class="fas {{item.icon}}"></i>
+              </div>
+              <div class="setting-text">
+                <h3>{{item.title}}</h3>
+                <p>{{item.description}}</p>
+              </div>
+            </div>
+            <label class="toggle-switch">
+              <input 
+                type="checkbox" 
+                [(ngModel)]="item.enabled"
+                (change)="onSettingChange(item)">
+              <span class="slider"></span>
+            </label>
+          </div>
+        }
+      </div>
+    </div>
+
+    <!-- 通知设置 -->
+    <div class="settings-section">
+      <h2 class="section-title">通知设置</h2>
+      <div class="settings-card">
+        @for (item of notificationSettings; track item.id) {
+          <div class="setting-item">
+            <div class="setting-info">
+              <div class="setting-icon" [style.background]="item.color">
+                <i class="fas {{item.icon}}"></i>
+              </div>
+              <div class="setting-text">
+                <h3>{{item.title}}</h3>
+                <p>{{item.description}}</p>
+              </div>
+            </div>
+            <label class="toggle-switch">
+              <input 
+                type="checkbox" 
+                [(ngModel)]="item.enabled"
+                (change)="onSettingChange(item)">
+              <span class="slider"></span>
+            </label>
+          </div>
+        }
+      </div>
+    </div>
+
+    <!-- 其他设置 -->
+    <div class="settings-section">
+      <h2 class="section-title">其他</h2>
+      <div class="settings-card">
+        <div 
+          class="setting-item clickable"
+          (click)="manageBlockedUsers()">
+          <div class="setting-info">
+            <div class="setting-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+              <i class="fas fa-user-slash"></i>
+            </div>
+            <div class="setting-text">
+              <h3>黑名单管理</h3>
+              <p>管理已屏蔽的用户</p>
+            </div>
+          </div>
+          <i class="fas fa-chevron-right"></i>
+        </div>
+
+        <div 
+          class="setting-item clickable"
+          (click)="clearHistory()">
+          <div class="setting-info">
+            <div class="setting-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
+              <i class="fas fa-trash-alt"></i>
+            </div>
+            <div class="setting-text">
+              <h3>清除缓存</h3>
+              <p>清除本地缓存和历史记录</p>
+            </div>
+          </div>
+          <i class="fas fa-chevron-right"></i>
+        </div>
+      </div>
+    </div>
+
+    <!-- 提示信息 -->
+    <div class="info-banner">
+      <i class="fas fa-info-circle"></i>
+      <div>
+        <strong>隐私声明</strong>
+        <p>我们尊重并保护您的个人信息。您的数据将根据相关隐私政策进行处理和存储。</p>
+      </div>
+    </div>
+  </div>
 </div>

legal-assistant-app/src/app/pages/profile/privacy-settings/privacy-settings.scss

@@ -0,0 +1,272 @@
+.privacy-settings-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding-bottom: 80px;
+
+  // 顶部导航栏
+  .page-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 18px 20px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+
+    h1 {
+      flex: 1;
+      text-align: center;
+      font-size: 20px;
+      font-weight: 700;
+      color: white;
+      margin: 0;
+    }
+
+    .back-btn {
+      width: 40px;
+      height: 40px;
+      border-radius: 12px;
+      background: rgba(255, 255, 255, 0.2);
+      border: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      transition: all 0.3s;
+      color: white;
+
+      i {
+        font-size: 18px;
+      }
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.3);
+      }
+
+      &:active {
+        transform: scale(0.95);
+      }
+    }
+
+    .placeholder {
+      width: 40px;
+    }
+  }
+
+  .page-content {
+    padding: 20px;
+  }
+
+  // 设置区块
+  .settings-section {
+    margin-bottom: 30px;
+
+    .section-title {
+      font-size: 16px;
+      font-weight: 700;
+      color: #1a1a1a;
+      margin: 0 0 15px 0;
+      padding-left: 4px;
+    }
+
+    .settings-card {
+      background: white;
+      border-radius: 16px;
+      overflow: hidden;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+
+      .setting-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 18px;
+        border-bottom: 1px solid #f0f0f0;
+        transition: all 0.3s;
+
+        &:last-child {
+          border-bottom: none;
+        }
+
+        &.clickable {
+          cursor: pointer;
+
+          &:hover {
+            background: #f9f9f9;
+          }
+
+          &:active {
+            background: #f0f0f0;
+          }
+        }
+
+        .setting-info {
+          display: flex;
+          align-items: center;
+          gap: 15px;
+          flex: 1;
+
+          .setting-icon {
+            width: 48px;
+            height: 48px;
+            border-radius: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+
+            i {
+              font-size: 22px;
+              color: white;
+            }
+          }
+
+          .setting-text {
+            flex: 1;
+
+            h3 {
+              font-size: 16px;
+              font-weight: 600;
+              color: #1a1a1a;
+              margin: 0 0 4px 0;
+            }
+
+            p {
+              font-size: 13px;
+              color: #999;
+              margin: 0;
+              line-height: 1.4;
+            }
+          }
+        }
+
+        > i {
+          color: #ccc;
+          font-size: 16px;
+        }
+
+        // 开关按钮
+        .toggle-switch {
+          position: relative;
+          display: inline-block;
+          width: 52px;
+          height: 28px;
+
+          input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+
+            &:checked + .slider {
+              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            }
+
+            &:checked + .slider:before {
+              transform: translateX(24px);
+            }
+          }
+
+          .slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: #e0e0e0;
+            transition: .4s;
+            border-radius: 28px;
+
+            &:before {
+              position: absolute;
+              content: "";
+              height: 22px;
+              width: 22px;
+              left: 3px;
+              bottom: 3px;
+              background-color: white;
+              transition: .4s;
+              border-radius: 50%;
+              box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // 提示信息横幅
+  .info-banner {
+    display: flex;
+    gap: 15px;
+    padding: 20px;
+    background: white;
+    border-radius: 16px;
+    border-left: 4px solid #667eea;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    margin-top: 20px;
+
+    > i {
+      font-size: 24px;
+      color: #667eea;
+      flex-shrink: 0;
+      margin-top: 2px;
+    }
+
+    div {
+      flex: 1;
+
+      strong {
+        display: block;
+        font-size: 16px;
+        font-weight: 700;
+        color: #1a1a1a;
+        margin-bottom: 8px;
+      }
+
+      p {
+        font-size: 14px;
+        color: #666;
+        line-height: 1.7;
+        margin: 0;
+      }
+    }
+  }
+}
+
+// 响应式设计
+@media (max-width: 480px) {
+  .privacy-settings-page {
+    .page-content {
+      padding: 15px;
+    }
+
+    .settings-section .settings-card .setting-item {
+      padding: 15px;
+
+      .setting-info {
+        gap: 12px;
+
+        .setting-icon {
+          width: 44px;
+          height: 44px;
+
+          i {
+            font-size: 20px;
+          }
+        }
+
+        .setting-text h3 {
+          font-size: 15px;
+        }
+      }
+    }
+
+    .info-banner {
+      padding: 15px;
+      gap: 12px;
+    }
+  }
+}

legal-assistant-app/src/app/pages/profile/privacy-settings/privacy-settings.ts

@@ -1,8 +1,17 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
+import { RouterModule, Router } from '@angular/router';
 import { FormsModule } from '@angular/forms';
 
+interface SettingItem {
+  id: string;
+  title: string;
+  description: string;
+  icon: string;
+  color: string;
+  enabled: boolean;
+}
+
 @Component({
   selector: 'app-privacy-settings',
   standalone: true,
@@ -11,36 +20,107 @@ import { FormsModule } from '@angular/forms';
   styleUrls: ['./privacy-settings.scss']
 })
 export class PrivacySettings {
-  settings = {
-    profileVisible: true,
-    consultationHistory: false,
-    allowAnalytics: true,
-    allowNotifications: true,
-    allowLocationAccess: false,
-    twoFactorAuth: false
-  };
+  accountPrivacySettings: SettingItem[] = [
+    {
+      id: 'profile-visible',
+      title: '公开个人资料',
+      description: '允许其他用户查看你的个人信息',
+      icon: 'fa-eye',
+      color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+      enabled: true
+    },
+    {
+      id: 'search-visible',
+      title: '在搜索中显示',
+      description: '允许他人通过搜索找到你',
+      icon: 'fa-search',
+      color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
+      enabled: true
+    },
+    {
+      id: 'two-factor',
+      title: '双因素认证',
+      description: '增加账号安全性',
+      icon: 'fa-shield-alt',
+      color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
+      enabled: false
+    }
+  ];
+
+  dataPermissions: SettingItem[] = [
+    {
+      id: 'location-access',
+      title: '地理位置',
+      description: '允许应用访问您的地理位置',
+      icon: 'fa-map-marker-alt',
+      color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
+      enabled: true
+    },
+    {
+      id: 'camera-access',
+      title: '相机权限',
+      description: '允许上传证据照片',
+      icon: 'fa-camera',
+      color: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
+      enabled: true
+    },
+    {
+      id: 'analytics',
+      title: '数据分析',
+      description: '帮助我们改进服务体验',
+      icon: 'fa-chart-line',
+      color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+      enabled: true
+    }
+  ];
+
+  notificationSettings: SettingItem[] = [
+    {
+      id: 'case-updates',
+      title: '案件更新',
+      description: '案件进展通知',
+      icon: 'fa-bell',
+      color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
+      enabled: true
+    },
+    {
+      id: 'messages',
+      title: '消息通知',
+      description: '接收聊天消息提醒',
+      icon: 'fa-envelope',
+      color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
+      enabled: true
+    },
+    {
+      id: 'system',
+      title: '系统通知',
+      description: '系统更新和公告',
+      icon: 'fa-info-circle',
+      color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
+      enabled: false
+    }
+  ];
+  
+  constructor(private router: Router) {}
   
-  saveSettings() {
-    console.log('保存设置:', this.settings);
-    alert('设置已保存');
+  onSettingChange(item: SettingItem) {
+    console.log(`${item.title} 设置已更改为:`, item.enabled);
+    // 这里可以调用API保存设置
   }
   
-  clearHistory() {
-    if (confirm('确定清除所有咨询历史吗？此操作不可恢复。')) {
-      console.log('清除咨询历史');
-      alert('咨询历史已清除');
-    }
+  manageBlockedUsers() {
+    console.log('管理黑名单');
+    alert('黑名单管理功能开发中...');
   }
   
-  deleteAccount() {
-    if (confirm('确定要删除账号吗？此操作不可恢复，所有数据将被永久删除。')) {
-      console.log('删除账号');
-      alert('账号删除申请已提交');
+  clearHistory() {
+    if (confirm('确定清除所有缓存和历史记录吗？')) {
+      console.log('清除缓存');
+      alert('缓存已清除！');
     }
   }
   
-  exportData() {
-    console.log('导出个人数据');
-    alert('正在生成数据导出文件...');
+  goBack() {
+    this.router.navigate(['/profile']);
   }
 }

legal-assistant-app/src/app/pages/profile/profile.scss

@@ -1,57 +1,59 @@
 .profile-page {
   min-height: 100vh;
-  background: var(--bg-primary);
-  padding: var(--spacing-lg);
+  background: #f5f5f5;
+  padding: 20px;
   padding-bottom: 80px;
 
   // 用户信息卡片
   .user-card {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    border-radius: var(--radius-xl);
-    padding: var(--spacing-2xl);
-    margin-bottom: var(--spacing-xl);
-    box-shadow: var(--shadow-lg);
+    border-radius: 20px;
+    padding: 30px;
+    margin-bottom: 25px;
+    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
 
     .user-header {
       display: flex;
       align-items: center;
-      gap: var(--spacing-lg);
-      margin-bottom: var(--spacing-2xl);
+      gap: 18px;
+      margin-bottom: 30px;
 
       .avatar {
-        width: 72px;
-        height: 72px;
-        border-radius: var(--radius-full);
+        width: 80px;
+        height: 80px;
+        border-radius: 50%;
         border: 4px solid rgba(255, 255, 255, 0.3);
         object-fit: cover;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
       }
 
       .user-info {
         flex: 1;
 
         h2 {
-          font-size: var(--font-2xl);
-          font-weight: var(--font-bold);
-          color: var(--text-white);
-          margin: 0 0 4px 0;
+          font-size: 24px;
+          font-weight: 700;
+          color: white;
+          margin: 0 0 6px 0;
         }
 
         p {
-          font-size: var(--font-md);
-          color: rgba(255, 255, 255, 0.8);
-          margin: 0 0 var(--spacing-sm) 0;
+          font-size: 15px;
+          color: rgba(255, 255, 255, 0.9);
+          margin: 0 0 10px 0;
         }
 
         .member-badge {
           display: inline-flex;
           align-items: center;
-          gap: 4px;
-          padding: 4px 12px;
-          background: rgba(255, 255, 255, 0.2);
-          border-radius: var(--radius-xl);
-          color: var(--text-white);
-          font-size: var(--font-xs);
-          font-weight: var(--font-semibold);
+          gap: 6px;
+          padding: 5px 14px;
+          background: rgba(255, 255, 255, 0.25);
+          border-radius: 20px;
+          color: white;
+          font-size: 13px;
+          font-weight: 600;
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 
           i {
             color: #FFD700;
@@ -60,25 +62,28 @@
       }
 
       .edit-btn {
-        width: 40px;
-        height: 40px;
-        border-radius: var(--radius-full);
+        width: 44px;
+        height: 44px;
+        border-radius: 50%;
         background: rgba(255, 255, 255, 0.2);
         border: none;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
-        transition: all var(--transition-fast);
+        transition: all 0.3s;
 
         i {
           font-size: 18px;
-          color: var(--text-white);
+          color: white;
+        }
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.3);
         }
 
         &:active {
           transform: scale(0.95);
-          background: rgba(255, 255, 255, 0.3);
         }
       }
     }
@@ -86,28 +91,31 @@
     .stats-row {
       display: flex;
       justify-content: space-around;
+      padding-top: 20px;
+      border-top: 1px solid rgba(255, 255, 255, 0.2);
 
       .stat-item {
         display: flex;
         flex-direction: column;
         align-items: center;
         cursor: pointer;
-        transition: all var(--transition-fast);
+        transition: all 0.3s;
 
         &:active {
           transform: scale(0.95);
         }
 
         .stat-value {
-          font-size: var(--font-2xl);
-          font-weight: var(--font-bold);
-          color: var(--text-white);
-          margin-bottom: 4px;
+          font-size: 28px;
+          font-weight: 700;
+          color: white;
+          margin-bottom: 6px;
         }
 
         .stat-label {
-          font-size: var(--font-sm);
-          color: rgba(255, 255, 255, 0.8);
+          font-size: 13px;
+          color: rgba(255, 255, 255, 0.85);
+          font-weight: 500;
         }
       }
     }
@@ -115,56 +123,62 @@
 
   // 快捷入口
   .quick-links-section {
-    margin-bottom: var(--spacing-xl);
+    margin-bottom: 25px;
 
     h3 {
-      font-size: var(--font-lg);
-      font-weight: var(--font-semibold);
-      color: var(--text-primary);
-      margin-bottom: var(--spacing-md);
+      font-size: 18px;
+      font-weight: 700;
+      color: #1a1a1a;
+      margin-bottom: 15px;
     }
 
     .quick-links-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
-      gap: var(--spacing-md);
+      gap: 12px;
 
       .quick-link-card {
         display: flex;
         flex-direction: column;
         align-items: center;
-        gap: var(--spacing-sm);
-        background: var(--bg-secondary);
-        border-radius: var(--radius-lg);
-        padding: var(--spacing-lg);
-        box-shadow: var(--shadow-sm);
+        gap: 10px;
+        background: white;
+        border-radius: 16px;
+        padding: 20px 12px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
         cursor: pointer;
-        transition: all var(--transition-fast);
+        transition: all 0.3s;
+
+        &:hover {
+          transform: translateY(-3px);
+          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+        }
 
         &:active {
           transform: scale(0.95);
-          box-shadow: var(--shadow-md);
         }
 
         .link-icon {
-          width: 48px;
-          height: 48px;
-          border-radius: var(--radius-md);
+          width: 52px;
+          height: 52px;
+          border-radius: 14px;
           display: flex;
           align-items: center;
           justify-content: center;
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 
           i {
-            font-size: 22px;
-            color: var(--text-white);
+            font-size: 24px;
+            color: white;
           }
         }
 
         span {
-          font-size: var(--font-sm);
-          color: var(--text-primary);
-          font-weight: var(--font-medium);
+          font-size: 13px;
+          color: #333;
+          font-weight: 600;
           text-align: center;
+          line-height: 1.3;
         }
       }
     }
@@ -174,63 +188,69 @@
   .settings-section {
     display: flex;
     flex-direction: column;
-    gap: var(--spacing-xl);
+    gap: 25px;
 
     .setting-group {
       h3 {
-        font-size: var(--font-lg);
-        font-weight: var(--font-semibold);
-        color: var(--text-primary);
-        margin-bottom: var(--spacing-md);
+        font-size: 18px;
+        font-weight: 700;
+        color: #1a1a1a;
+        margin-bottom: 12px;
       }
 
       .setting-list {
-        background: var(--bg-secondary);
-        border-radius: var(--radius-lg);
+        background: white;
+        border-radius: 16px;
         overflow: hidden;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
 
         .setting-item {
           display: flex;
           align-items: center;
-          gap: var(--spacing-md);
-          padding: var(--spacing-lg);
+          gap: 15px;
+          padding: 18px;
           cursor: pointer;
-          transition: all var(--transition-fast);
-          border-bottom: 1px solid var(--border-color);
+          transition: all 0.3s;
+          border-bottom: 1px solid #f0f0f0;
 
           &:last-child {
             border-bottom: none;
           }
 
+          &:hover {
+            background: #f9f9f9;
+          }
+
           &:active {
-            background: var(--bg-tertiary);
+            background: #f0f0f0;
           }
 
           .setting-icon {
-            width: 40px;
-            height: 40px;
-            border-radius: var(--radius-md);
-            background: var(--bg-tertiary);
+            width: 44px;
+            height: 44px;
+            border-radius: 12px;
+            background: #f5f5ff;
             display: flex;
             align-items: center;
             justify-content: center;
+            flex-shrink: 0;
 
             i {
-              font-size: 18px;
-              color: var(--primary-color);
+              font-size: 20px;
+              color: #667eea;
             }
           }
 
           .setting-title {
             flex: 1;
-            font-size: var(--font-md);
-            color: var(--text-primary);
-            font-weight: var(--font-medium);
+            font-size: 16px;
+            color: #333;
+            font-weight: 600;
           }
 
           > i {
-            font-size: 14px;
-            color: var(--text-tertiary);
+            font-size: 16px;
+            color: #ccc;
           }
         }
       }
@@ -239,28 +259,63 @@
 
   // 退出登录
   .logout-section {
-    margin-top: var(--spacing-2xl);
-    padding: 0;
+    margin-top: 30px;
 
     .logout-btn {
       width: 100%;
-      padding: var(--spacing-lg);
+      padding: 16px;
       border: none;
-      border-radius: var(--radius-lg);
-      background: var(--bg-secondary);
-      color: var(--error-color);
-      font-size: var(--font-md);
-      font-weight: var(--font-semibold);
+      border-radius: 14px;
+      background: white;
+      color: #f44336;
+      font-size: 16px;
+      font-weight: 600;
       cursor: pointer;
-      transition: all var(--transition-fast);
+      transition: all 0.3s;
       display: flex;
       align-items: center;
       justify-content: center;
-      gap: var(--spacing-sm);
+      gap: 10px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+
+      i {
+        font-size: 18px;
+      }
+
+      &:hover {
+        background: #fff5f5;
+      }
 
       &:active {
         transform: scale(0.98);
-        background: var(--bg-tertiary);
+      }
+    }
+  }
+}
+
+// 响应式设计
+@media (max-width: 480px) {
+  .profile-page {
+    padding: 15px;
+
+    .quick-links-section .quick-links-grid {
+      gap: 10px;
+
+      .quick-link-card {
+        padding: 15px 8px;
+
+        .link-icon {
+          width: 48px;
+          height: 48px;
+
+          i {
+            font-size: 22px;
+          }
+        }
+
+        span {
+          font-size: 12px;
+        }
       }
     }
   }

legal-assistant-app/src/app/pages/profile/profile.ts

@@ -58,8 +58,8 @@ export class Profile {
       title: '帮助与支持',
       items: [
         { id: 'help', title: '帮助中心', icon: 'fa-question-circle', route: '/profile/help-center' },
-        { id: 'feedback', title: '意见反馈', icon: 'fa-comment-dots' },
-        { id: 'about', title: '关于我们', icon: 'fa-info-circle' }
+        { id: 'feedback', title: '意见反馈', icon: 'fa-comment-dots', action: () => this.openFeedback() },
+        { id: 'about', title: '关于我们', icon: 'fa-info-circle', action: () => this.openAbout() }
       ]
     }
   ];
@@ -83,4 +83,14 @@ export class Profile {
       console.log('点击设置项:', item.title);
     }
   }
+  
+  openFeedback() {
+    // 跳转到帮助中心的联系客服标签
+    this.router.navigate(['/profile/help-center'], { queryParams: { tab: 'contact' } });
+  }
+  
+  openAbout() {
+    // 跳转到帮助中心的联系客服标签（包含关于我们）
+    this.router.navigate(['/profile/help-center'], { queryParams: { tab: 'contact' } });
+  }
 }

legal-assistant-app/src/app/pages/profile/voice-display-settings/voice-display-settings.html

@@ -1,4 +1,168 @@
-<div class="page-container">
-  <h1>语音与显示设置</h1>
-  <p>页面内容已清空，路由正常工作</p>
+<div class="voice-display-settings-page">
+  <!-- 顶部导航栏 -->
+  <header class="page-header">
+    <button class="back-btn" (click)="goBack()">
+      <i class="fas fa-arrow-left"></i>
+    </button>
+    <h1>语音与显示</h1>
+    <div class="placeholder"></div>
+  </header>
+
+  <div class="page-content">
+    <!-- 语音设置 -->
+    <div class="settings-section">
+      <h2 class="section-title">
+        <i class="fas fa-microphone"></i>
+        语音设置
+      </h2>
+      <div class="settings-card">
+        <div class="setting-item">
+          <div class="setting-info">
+            <span class="setting-label">启用语音</span>
+            <span class="setting-desc">启用语音播报功能</span>
+          </div>
+          <label class="toggle-switch">
+            <input type="checkbox" [(ngModel)]="settings.voiceEnabled">
+            <span class="slider"></span>
+          </label>
+        </div>
+
+        <div class="setting-item">
+          <div class="setting-info">
+            <span class="setting-label">语音性别</span>
+          </div>
+          <div class="radio-group">
+            <label class="radio-option">
+              <input 
+                type="radio" 
+                name="voiceGender" 
+                value="female"
+                [(ngModel)]="settings.voiceGender">
+              <span>女声</span>
+            </label>
+            <label class="radio-option">
+              <input 
+                type="radio" 
+                name="voiceGender" 
+                value="male"
+                [(ngModel)]="settings.voiceGender">
+              <span>男声</span>
+            </label>
+          </div>
+        </div>
+
+        <div class="setting-item vertical">
+          <div class="setting-info">
+            <span class="setting-label">语音速度</span>
+            <span class="setting-value">{{settings.voiceSpeed}}x</span>
+          </div>
+          <input 
+            type="range" 
+            class="slider-input"
+            [(ngModel)]="settings.voiceSpeed"
+            min="0.5"
+            max="2"
+            step="0.25">
+          <div class="slider-labels">
+            <span>0.5x</span>
+            <span>1.0x</span>
+            <span>1.5x</span>
+            <span>2.0x</span>
+          </div>
+        </div>
+
+        <div class="setting-item vertical">
+          <div class="setting-info">
+            <span class="setting-label">音量</span>
+            <span class="setting-value">{{settings.voiceVolume}}%</span>
+          </div>
+          <input 
+            type="range" 
+            class="slider-input"
+            [(ngModel)]="settings.voiceVolume"
+            min="0"
+            max="100"
+            step="5">
+        </div>
+
+        <div class="setting-item">
+          <button class="test-btn" (click)="testVoice()">
+            <i class="fas fa-play"></i>
+            测试语音
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 显示设置 -->
+    <div class="settings-section">
+      <h2 class="section-title">
+        <i class="fas fa-desktop"></i>
+        显示设置
+      </h2>
+      <div class="settings-card">
+        <div class="setting-item">
+          <div class="setting-info">
+            <span class="setting-label">主题模式</span>
+          </div>
+          <select class="select-input" [(ngModel)]="settings.theme">
+            @for (theme of themes; track theme.value) {
+              <option [value]="theme.value">{{theme.label}}</option>
+            }
+          </select>
+        </div>
+
+        <div class="setting-item vertical">
+          <div class="setting-info">
+            <span class="setting-label">字体大小</span>
+            <span class="setting-value">{{settings.fontSize}}px</span>
+          </div>
+          <input 
+            type="range" 
+            class="slider-input"
+            [(ngModel)]="settings.fontSize"
+            min="12"
+            max="24"
+            step="2">
+          <div class="font-preview" [style.fontSize.px]="settings.fontSize">
+            预览文本样式
+          </div>
+        </div>
+
+        <div class="setting-item">
+          <div class="setting-info">
+            <span class="setting-label">高对比度</span>
+            <span class="setting-desc">提高文字可读性</span>
+          </div>
+          <label class="toggle-switch">
+            <input type="checkbox" [(ngModel)]="settings.highContrast">
+            <span class="slider"></span>
+          </label>
+        </div>
+
+        <div class="setting-item">
+          <div class="setting-info">
+            <span class="setting-label">阅读友好字体</span>
+            <span class="setting-desc">适合阅读障碍人士</span>
+          </div>
+          <label class="toggle-switch">
+            <input type="checkbox" [(ngModel)]="settings.dyslexicFont">
+            <span class="slider"></span>
+          </label>
+        </div>
+      </div>
+    </div>
+
+    <!-- 操作按钮 -->
+    <div class="action-buttons">
+      <button class="btn-secondary" (click)="resetSettings()">
+        <i class="fas fa-undo"></i>
+        恢复默认
+      </button>
+      <button class="btn-primary" (click)="saveSettings()">
+        <i class="fas fa-save"></i>
+        保存设置
+      </button>
+    </div>
+  </div>
 </div>

legal-assistant-app/src/app/pages/profile/voice-display-settings/voice-display-settings.scss

@@ -0,0 +1,366 @@
+.voice-display-settings-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding-bottom: 80px;
+
+  .page-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 18px 20px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+
+    h1 {
+      flex: 1;
+      text-align: center;
+      font-size: 20px;
+      font-weight: 700;
+      color: white;
+      margin: 0;
+    }
+
+    .back-btn {
+      width: 40px;
+      height: 40px;
+      border-radius: 12px;
+      background: rgba(255, 255, 255, 0.2);
+      border: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      transition: all 0.3s;
+      color: white;
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.3);
+      }
+
+      &:active {
+        transform: scale(0.95);
+      }
+    }
+
+    .placeholder {
+      width: 40px;
+    }
+  }
+
+  .page-content {
+    padding: 20px;
+  }
+
+  .settings-section {
+    margin-bottom: 30px;
+
+    .section-title {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      font-size: 18px;
+      font-weight: 700;
+      color: #1a1a1a;
+      margin: 0 0 15px 0;
+
+      i {
+        color: #667eea;
+      }
+    }
+
+    .settings-card {
+      background: white;
+      border-radius: 16px;
+      overflow: hidden;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+
+      .setting-item {
+        padding: 18px;
+        border-bottom: 1px solid #f0f0f0;
+
+        &:last-child {
+          border-bottom: none;
+        }
+
+        &.vertical {
+          display: flex;
+          flex-direction: column;
+          gap: 12px;
+        }
+
+        &:not(.vertical) {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+        }
+
+        .setting-info {
+          flex: 1;
+
+          .setting-label {
+            display: block;
+            font-size: 16px;
+            font-weight: 600;
+            color: #1a1a1a;
+            margin-bottom: 4px;
+          }
+
+          .setting-desc {
+            display: block;
+            font-size: 13px;
+            color: #999;
+          }
+
+          .setting-value {
+            font-size: 15px;
+            font-weight: 600;
+            color: #667eea;
+            margin-left: auto;
+          }
+        }
+
+        .toggle-switch {
+          position: relative;
+          display: inline-block;
+          width: 52px;
+          height: 28px;
+
+          input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+
+            &:checked + .slider {
+              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            }
+
+            &:checked + .slider:before {
+              transform: translateX(24px);
+            }
+          }
+
+          .slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: #e0e0e0;
+            transition: .4s;
+            border-radius: 28px;
+
+            &:before {
+              position: absolute;
+              content: "";
+              height: 22px;
+              width: 22px;
+              left: 3px;
+              bottom: 3px;
+              background-color: white;
+              transition: .4s;
+              border-radius: 50%;
+              box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+            }
+          }
+        }
+
+        .radio-group {
+          display: flex;
+          gap: 12px;
+
+          .radio-option {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 8px 16px;
+            border: 2px solid #e0e0e0;
+            border-radius: 20px;
+            cursor: pointer;
+            transition: all 0.3s;
+
+            input[type="radio"] {
+              width: 18px;
+              height: 18px;
+              cursor: pointer;
+            }
+
+            span {
+              font-size: 15px;
+              font-weight: 500;
+              color: #666;
+            }
+
+            &:has(input:checked) {
+              border-color: #667eea;
+              background: #f5f5ff;
+
+              span {
+                color: #667eea;
+                font-weight: 600;
+              }
+            }
+          }
+        }
+
+        .slider-input {
+          -webkit-appearance: none;
+          width: 100%;
+          height: 6px;
+          border-radius: 3px;
+          background: #e0e0e0;
+          outline: none;
+
+          &::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            cursor: pointer;
+            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
+          }
+
+          &::-moz-range-thumb {
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            cursor: pointer;
+            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
+            border: none;
+          }
+        }
+
+        .slider-labels {
+          display: flex;
+          justify-content: space-between;
+          font-size: 12px;
+          color: #999;
+        }
+
+        .font-preview {
+          padding: 15px;
+          background: #f9f9f9;
+          border-radius: 12px;
+          text-align: center;
+          color: #333;
+          font-weight: 500;
+        }
+
+        .select-input {
+          padding: 10px 16px;
+          border: 2px solid #e0e0e0;
+          border-radius: 10px;
+          font-size: 15px;
+          color: #333;
+          background: white;
+          outline: none;
+          cursor: pointer;
+          transition: all 0.3s;
+
+          &:focus {
+            border-color: #667eea;
+          }
+        }
+
+        .test-btn {
+          width: 100%;
+          padding: 12px;
+          border: none;
+          border-radius: 12px;
+          background: #f5f5ff;
+          color: #667eea;
+          font-size: 15px;
+          font-weight: 600;
+          cursor: pointer;
+          transition: all 0.3s;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 8px;
+
+          i {
+            font-size: 16px;
+          }
+
+          &:hover {
+            background: #667eea;
+            color: white;
+          }
+
+          &:active {
+            transform: scale(0.98);
+          }
+        }
+      }
+    }
+  }
+
+  .action-buttons {
+    display: flex;
+    gap: 15px;
+    margin-top: 30px;
+
+    button {
+      flex: 1;
+      height: 52px;
+      border-radius: 14px;
+      font-size: 16px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.3s;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 10px;
+      border: none;
+
+      i {
+        font-size: 18px;
+      }
+
+      &.btn-secondary {
+        background: white;
+        color: #667eea;
+        border: 2px solid #667eea;
+
+        &:hover {
+          background: #f5f5ff;
+        }
+      }
+
+      &.btn-primary {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+
+        &:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
+        }
+      }
+
+      &:active {
+        transform: scale(0.98);
+      }
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .voice-display-settings-page {
+    .page-content {
+      padding: 15px;
+    }
+
+    .action-buttons button {
+      height: 48px;
+      font-size: 15px;
+    }
+  }
+}

legal-assistant-app/src/app/pages/profile/voice-display-settings/voice-display-settings.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
+import { RouterModule, Router } from '@angular/router';
 import { FormsModule } from '@angular/forms';
 
 @Component({
@@ -44,6 +44,8 @@ export class VoiceDisplaySettings {
     alert(`正在播放测试语音...\n速度: ${this.settings.voiceSpeed}x\n音量: ${this.settings.voiceVolume}%`);
   }
   
+  constructor(private router: Router) {}
+
   resetSettings() {
     if (confirm('确定要恢复默认设置吗？')) {
       this.settings = {
@@ -59,4 +61,8 @@ export class VoiceDisplaySettings {
       alert('已恢复默认设置');
     }
   }
+
+  goBack() {
+    this.router.navigate(['/profile']);
+  }
 }

legal-assistant-app/src/app/pages/services/legal-service-map/legal-service-map.scss

@@ -1,6 +1,706 @@
-// 法律服务地图样式
-.map-container { padding: 12px; }
-.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
-.card { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; background: #FFFFFF; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); padding: 12px; }
-.card mat-icon { background: #E8F1FD; color: #2D6BC9; border-radius: 10px; padding: 8px; }
-.card span { color: #1A4B8C; }
+.service-map-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+  display: flex;
+  flex-direction: column;
+
+  // 顶部搜索栏
+  .top-bar {
+    background: white;
+    padding: 15px 20px;
+    display: flex;
+    gap: 12px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+
+    .search-bar {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      background: #f5f5f5;
+      border-radius: 12px;
+      padding: 0 15px;
+      height: 48px;
+
+      i {
+        color: #999;
+        font-size: 16px;
+      }
+
+      input {
+        flex: 1;
+        border: none;
+        background: transparent;
+        font-size: 15px;
+        outline: none;
+
+        &::placeholder {
+          color: #999;
+        }
+      }
+    }
+
+    .view-toggle {
+      width: 80px;
+      height: 48px;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: white;
+      border: none;
+      border-radius: 12px;
+      font-size: 14px;
+      font-weight: 600;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+      transition: all 0.3s;
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
+      }
+
+      i {
+        font-size: 16px;
+      }
+    }
+  }
+
+  // 类型筛选
+  .type-filters {
+    display: flex;
+    gap: 10px;
+    padding: 15px 20px;
+    overflow-x: auto;
+    background: white;
+    border-bottom: 1px solid #e0e0e0;
+
+    &::-webkit-scrollbar {
+      height: 4px;
+    }
+
+    .filter-btn {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 16px;
+      border: 2px solid #e0e0e0;
+      border-radius: 20px;
+      background: white;
+      color: #666;
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.3s;
+      white-space: nowrap;
+      flex-shrink: 0;
+
+      i {
+        font-size: 16px;
+      }
+
+      .count {
+        background: #f5f5f5;
+        padding: 2px 8px;
+        border-radius: 10px;
+        font-size: 12px;
+        font-weight: 600;
+      }
+
+      &.active {
+        border-color: #667eea;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+
+        .count {
+          background: rgba(255, 255, 255, 0.2);
+          color: white;
+        }
+      }
+
+      &:hover:not(.active) {
+        border-color: #667eea;
+        background: #f5f5ff;
+      }
+    }
+  }
+
+  // 列表视图
+  .institutions-list {
+    flex: 1;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    overflow-y: auto;
+
+    .institution-card {
+      background: white;
+      border-radius: 16px;
+      padding: 20px;
+      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+      cursor: pointer;
+      transition: all 0.3s;
+      display: flex;
+      gap: 15px;
+
+      &:hover {
+        transform: translateY(-3px);
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+      }
+
+      .card-icon {
+        width: 60px;
+        height: 60px;
+        border-radius: 14px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+
+        i {
+          font-size: 28px;
+          color: white;
+        }
+      }
+
+      .card-content {
+        flex: 1;
+        min-width: 0;
+
+        .card-header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-bottom: 10px;
+          gap: 10px;
+
+          h3 {
+            font-size: 18px;
+            font-weight: 700;
+            color: #1a1a1a;
+            margin: 0;
+            flex: 1;
+            min-width: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .type-badge {
+            padding: 4px 12px;
+            background: #e3f2fd;
+            color: #1976d2;
+            border-radius: 12px;
+            font-size: 12px;
+            font-weight: 600;
+            flex-shrink: 0;
+          }
+        }
+
+        .card-info {
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+          margin-bottom: 12px;
+
+          .info-item {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 14px;
+            color: #666;
+
+            i {
+              color: #999;
+              font-size: 14px;
+              width: 16px;
+              text-align: center;
+            }
+
+            span {
+              flex: 1;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+          }
+        }
+
+        .card-services {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 8px;
+          margin-bottom: 12px;
+
+          .service-tag {
+            padding: 4px 10px;
+            background: #f5f5f5;
+            border-radius: 10px;
+            font-size: 12px;
+            color: #666;
+          }
+        }
+
+        .card-footer {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding-top: 12px;
+          border-top: 1px solid #f0f0f0;
+
+          .rating {
+            display: flex;
+            align-items: center;
+            gap: 5px;
+            font-size: 16px;
+            font-weight: 700;
+            color: #ffa726;
+
+            i {
+              font-size: 18px;
+            }
+          }
+
+          .card-actions {
+            display: flex;
+            gap: 8px;
+
+            .action-btn {
+              padding: 8px 16px;
+              background: #f5f5f5;
+              border: none;
+              border-radius: 10px;
+              font-size: 13px;
+              font-weight: 600;
+              color: #667eea;
+              cursor: pointer;
+              transition: all 0.3s;
+              display: flex;
+              align-items: center;
+              gap: 5px;
+
+              i {
+                font-size: 14px;
+              }
+
+              &:hover {
+                background: #667eea;
+                color: white;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .empty-state {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 60px 20px;
+      color: #999;
+
+      i {
+        font-size: 64px;
+        margin-bottom: 20px;
+        opacity: 0.5;
+      }
+
+      p {
+        font-size: 16px;
+        margin: 0;
+      }
+    }
+  }
+
+  // 地图视图
+  .map-view {
+    flex: 1;
+    display: flex;
+    position: relative;
+    overflow: hidden;
+
+    .map-container {
+      flex: 1;
+      background: #e5e3df;
+      position: relative;
+
+      .map-placeholder {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        text-align: center;
+        color: #999;
+
+        i {
+          font-size: 80px;
+          margin-bottom: 20px;
+          opacity: 0.3;
+        }
+
+        p {
+          font-size: 16px;
+          margin: 10px 0;
+        }
+
+        small {
+          font-size: 13px;
+        }
+      }
+    }
+
+    .map-sidebar {
+      width: 320px;
+      background: white;
+      border-left: 1px solid #e0e0e0;
+      display: flex;
+      flex-direction: column;
+
+      h3 {
+        padding: 20px;
+        margin: 0;
+        font-size: 18px;
+        font-weight: 700;
+        color: #1a1a1a;
+        border-bottom: 1px solid #e0e0e0;
+      }
+
+      .sidebar-list {
+        flex: 1;
+        overflow-y: auto;
+        padding: 15px;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+
+        .sidebar-item {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+          padding: 15px;
+          background: #f9f9f9;
+          border-radius: 12px;
+          cursor: pointer;
+          transition: all 0.3s;
+
+          &:hover {
+            background: #f0f0f0;
+            transform: translateX(5px);
+          }
+
+          .item-icon {
+            width: 48px;
+            height: 48px;
+            border-radius: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+
+            i {
+              font-size: 24px;
+              color: white;
+            }
+          }
+
+          .item-info {
+            flex: 1;
+            min-width: 0;
+
+            h4 {
+              font-size: 15px;
+              font-weight: 600;
+              color: #1a1a1a;
+              margin: 0 0 5px 0;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+
+            .item-distance {
+              font-size: 13px;
+              color: #999;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // 详情模态框
+  .modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    padding: 20px;
+
+    .modal-content {
+      background: white;
+      border-radius: 20px;
+      max-width: 600px;
+      width: 100%;
+      max-height: 90vh;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+      animation: modalSlideUp 0.3s ease-out;
+
+      @keyframes modalSlideUp {
+        from {
+          opacity: 0;
+          transform: translateY(30px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+    }
+
+    .modal-header {
+      padding: 25px;
+      display: flex;
+      align-items: center;
+      gap: 15px;
+      border-bottom: 1px solid #e0e0e0;
+
+      .header-icon {
+        width: 60px;
+        height: 60px;
+        border-radius: 14px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+
+        i {
+          font-size: 28px;
+          color: white;
+        }
+      }
+
+      .header-info {
+        flex: 1;
+        min-width: 0;
+
+        h3 {
+          font-size: 20px;
+          font-weight: 700;
+          color: #1a1a1a;
+          margin: 0 0 5px 0;
+        }
+
+        .type-label {
+          display: inline-block;
+          padding: 4px 12px;
+          background: #e3f2fd;
+          color: #1976d2;
+          border-radius: 12px;
+          font-size: 12px;
+          font-weight: 600;
+        }
+      }
+
+      .close-btn {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        background: #f5f5f5;
+        border: none;
+        color: #666;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.3s;
+        flex-shrink: 0;
+
+        &:hover {
+          background: #e0e0e0;
+          color: #333;
+        }
+
+        i {
+          font-size: 20px;
+        }
+      }
+    }
+
+    .modal-body {
+      flex: 1;
+      overflow-y: auto;
+      padding: 25px;
+
+      .detail-section {
+        margin-bottom: 25px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        h4 {
+          font-size: 16px;
+          font-weight: 700;
+          color: #1a1a1a;
+          margin-bottom: 15px;
+          display: flex;
+          align-items: center;
+          gap: 8px;
+
+          i {
+            color: #667eea;
+          }
+        }
+
+        .detail-grid {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+          gap: 15px;
+
+          .detail-item {
+            .label {
+              display: block;
+              font-size: 13px;
+              color: #999;
+              margin-bottom: 5px;
+            }
+
+            .value {
+              display: block;
+              font-size: 15px;
+              color: #333;
+              font-weight: 500;
+
+              i {
+                color: #ffa726;
+                margin-right: 3px;
+              }
+            }
+          }
+        }
+
+        .services-grid {
+          display: grid;
+          grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+          gap: 12px;
+
+          .service-item {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 12px;
+            background: #f9f9f9;
+            border-radius: 10px;
+            font-size: 14px;
+            color: #333;
+
+            i {
+              color: #4caf50;
+              font-size: 16px;
+            }
+          }
+        }
+      }
+    }
+
+    .modal-footer {
+      padding: 20px 25px;
+      border-top: 1px solid #e0e0e0;
+      display: flex;
+      gap: 12px;
+
+      button {
+        flex: 1;
+        height: 48px;
+        border-radius: 12px;
+        font-size: 15px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.3s;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+
+        i {
+          font-size: 16px;
+        }
+      }
+
+      .btn-secondary {
+        background: white;
+        border: 2px solid #667eea;
+        color: #667eea;
+
+        &:hover {
+          background: #f5f5ff;
+        }
+      }
+
+      .btn-primary {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border: none;
+        color: white;
+
+        &:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
+        }
+      }
+    }
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .service-map-page {
+    .top-bar {
+      .view-toggle {
+        width: 60px;
+        font-size: 0;
+
+        i {
+          margin: 0;
+        }
+      }
+    }
+
+    .map-view {
+      flex-direction: column;
+
+      .map-sidebar {
+        width: 100%;
+        max-height: 40%;
+        border-left: none;
+        border-top: 1px solid #e0e0e0;
+      }
+    }
+
+    .modal-overlay {
+      .modal-footer {
+        flex-direction: column;
+
+        button {
+          width: 100%;
+        }
+      }
+    }
+  }
+}

legal-assistant-app/src/app/pages/tools/compensation-calculator/compensation-calculator.scss

@@ -1,6 +1,574 @@
-// 赔偿计算器样式
-.calcu-container { padding: 12px; }
-form { display: flex; flex-direction: column; gap: 10px; }
-label { color: #303B49; }
-input { width: 100%; padding: 10px; border-radius: 10px; border: 1px solid #E0E7EF; font-size: 14px; }
-.primary { width: 100%; padding: 12px; border: none; border-radius: 12px; background: #2D6BC9; color: #FFFFFF; font-size: 16px; }
+.calculator-page {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding-bottom: 80px;
+
+  // 计算器类型选择页
+  .calculator-types {
+    padding: 20px;
+
+    .page-header {
+      text-align: center;
+      margin-bottom: 30px;
+      color: white;
+
+      h2 {
+        font-size: 28px;
+        font-weight: 700;
+        margin-bottom: 10px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 10px;
+
+        i {
+          font-size: 32px;
+        }
+      }
+
+      p {
+        font-size: 16px;
+        opacity: 0.9;
+      }
+    }
+
+    .types-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      gap: 20px;
+
+      .type-card {
+        position: relative;
+        background: white;
+        border-radius: 20px;
+        padding: 25px;
+        cursor: pointer;
+        transition: all 0.3s;
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+
+        &:hover {
+          transform: translateY(-5px);
+          box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
+        }
+
+        .type-icon {
+          width: 70px;
+          height: 70px;
+          border-radius: 18px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-bottom: 18px;
+          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+
+          i {
+            font-size: 34px;
+            color: white;
+          }
+        }
+
+        h3 {
+          font-size: 20px;
+          font-weight: 700;
+          color: #1a1a1a;
+          margin-bottom: 10px;
+        }
+
+        p {
+          font-size: 14px;
+          color: #666;
+          line-height: 1.6;
+          margin-bottom: 15px;
+        }
+
+        .type-arrow {
+          position: absolute;
+          bottom: 20px;
+          right: 20px;
+          width: 36px;
+          height: 36px;
+          border-radius: 50%;
+          background: #f5f5f5;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          transition: all 0.3s;
+
+          i {
+            color: #667eea;
+          }
+        }
+
+        &:hover .type-arrow {
+          background: #667eea;
+
+          i {
+            color: white;
+          }
+        }
+      }
+    }
+  }
+
+  // 计算器表单页
+  .calculator-form {
+    background: white;
+    min-height: 100vh;
+
+    .form-header {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      padding: 20px;
+      color: white;
+      display: flex;
+      align-items: center;
+      gap: 15px;
+      position: sticky;
+      top: 0;
+      z-index: 100;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+
+      .back-btn {
+        width: 40px;
+        height: 40px;
+        border-radius: 12px;
+        background: rgba(255, 255, 255, 0.2);
+        border: none;
+        color: white;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.3s;
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.3);
+        }
+
+        i {
+          font-size: 18px;
+        }
+      }
+
+      .header-title {
+        flex: 1;
+
+        h2 {
+          font-size: 22px;
+          font-weight: 700;
+          margin: 0 0 5px 0;
+        }
+
+        p {
+          font-size: 14px;
+          opacity: 0.9;
+          margin: 0;
+        }
+      }
+    }
+
+    .form-content {
+      padding: 25px 20px;
+      max-width: 800px;
+      margin: 0 auto;
+
+      .form-section {
+        background: #f8f9fa;
+        border-radius: 16px;
+        padding: 20px;
+        margin-bottom: 20px;
+
+        h3 {
+          font-size: 18px;
+          font-weight: 700;
+          color: #1a1a1a;
+          margin-bottom: 20px;
+          display: flex;
+          align-items: center;
+          gap: 10px;
+
+          i {
+            color: #667eea;
+            font-size: 20px;
+          }
+        }
+
+        .form-fields {
+          display: flex;
+          flex-direction: column;
+          gap: 18px;
+        }
+
+        .form-field {
+          label {
+            display: block;
+            font-size: 15px;
+            font-weight: 600;
+            color: #333;
+            margin-bottom: 8px;
+
+            .required {
+              color: #f44336;
+              margin-left: 4px;
+            }
+          }
+
+          input,
+          select {
+            width: 100%;
+            height: 48px;
+            padding: 0 16px;
+            border: 2px solid #e0e0e0;
+            border-radius: 12px;
+            font-size: 15px;
+            transition: all 0.3s;
+            background: white;
+
+            &:focus {
+              outline: none;
+              border-color: #667eea;
+              box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+            }
+          }
+
+          small {
+            display: block;
+            margin-top: 6px;
+            font-size: 13px;
+            color: #999;
+          }
+        }
+
+        .form-row {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+          gap: 18px;
+        }
+
+        .radio-group {
+          display: flex;
+          gap: 20px;
+
+          .radio-label {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 15px;
+            color: #333;
+            cursor: pointer;
+
+            input[type="radio"] {
+              width: 20px;
+              height: 20px;
+              cursor: pointer;
+            }
+          }
+        }
+      }
+
+      .form-actions {
+        display: flex;
+        gap: 15px;
+        margin-top: 30px;
+
+        button {
+          flex: 1;
+          height: 52px;
+          border-radius: 12px;
+          font-size: 16px;
+          font-weight: 600;
+          cursor: pointer;
+          transition: all 0.3s;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 10px;
+
+          i {
+            font-size: 18px;
+          }
+        }
+
+        .btn-secondary {
+          background: white;
+          border: 2px solid #667eea;
+          color: #667eea;
+
+          &:hover {
+            background: #f5f5f5;
+          }
+        }
+
+        .btn-primary {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border: none;
+          color: white;
+
+          &:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
+          }
+        }
+      }
+    }
+  }
+
+  // 计算结果页
+  .calculation-result {
+    background: white;
+    min-height: 100vh;
+
+    .result-header {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      padding: 20px;
+      color: white;
+      display: flex;
+      align-items: center;
+      gap: 15px;
+      position: sticky;
+      top: 0;
+      z-index: 100;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+
+      .back-btn {
+        width: 40px;
+        height: 40px;
+        border-radius: 12px;
+        background: rgba(255, 255, 255, 0.2);
+        border: none;
+        color: white;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.3s;
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.3);
+        }
+
+        i {
+          font-size: 18px;
+        }
+      }
+
+      .header-title {
+        flex: 1;
+
+        h2 {
+          font-size: 22px;
+          font-weight: 700;
+          margin: 0 0 5px 0;
+        }
+
+        p {
+          font-size: 14px;
+          opacity: 0.9;
+          margin: 0;
+        }
+      }
+    }
+
+    .result-content {
+      padding: 25px 20px;
+      max-width: 800px;
+      margin: 0 auto;
+
+      .total-card {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border-radius: 20px;
+        padding: 30px;
+        display: flex;
+        align-items: center;
+        gap: 20px;
+        margin-bottom: 30px;
+        box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
+
+        .total-icon {
+          width: 70px;
+          height: 70px;
+          border-radius: 50%;
+          background: rgba(255, 255, 255, 0.2);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          i {
+            font-size: 36px;
+            color: white;
+          }
+        }
+
+        .total-info {
+          flex: 1;
+
+          .total-label {
+            font-size: 14px;
+            color: rgba(255, 255, 255, 0.9);
+            margin-bottom: 8px;
+          }
+
+          .total-amount {
+            font-size: 32px;
+            font-weight: 700;
+            color: white;
+            margin: 0;
+          }
+        }
+      }
+
+      .breakdown-section {
+        background: #f8f9fa;
+        border-radius: 16px;
+        padding: 25px;
+        margin-bottom: 25px;
+
+        h3 {
+          font-size: 18px;
+          font-weight: 700;
+          color: #1a1a1a;
+          margin-bottom: 20px;
+          display: flex;
+          align-items: center;
+          gap: 10px;
+
+          i {
+            color: #667eea;
+          }
+        }
+
+        .breakdown-list {
+          display: flex;
+          flex-direction: column;
+          gap: 12px;
+        }
+
+        .breakdown-item {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 15px;
+          background: white;
+          border-radius: 12px;
+          border-left: 4px solid #667eea;
+
+          .item-label {
+            font-size: 15px;
+            color: #333;
+            font-weight: 500;
+          }
+
+          .item-amount {
+            font-size: 16px;
+            font-weight: 700;
+            color: #667eea;
+          }
+        }
+      }
+
+      .result-note {
+        background: #fff8e1;
+        border-left: 4px solid #ffc107;
+        border-radius: 12px;
+        padding: 15px;
+        margin-bottom: 25px;
+        display: flex;
+        gap: 12px;
+
+        i {
+          color: #ffc107;
+          font-size: 20px;
+          flex-shrink: 0;
+        }
+
+        p {
+          font-size: 14px;
+          color: #666;
+          margin: 0;
+          line-height: 1.6;
+        }
+      }
+
+      .result-actions {
+        display: flex;
+        gap: 12px;
+        flex-wrap: wrap;
+
+        button {
+          flex: 1;
+          min-width: 140px;
+          height: 48px;
+          border-radius: 12px;
+          font-size: 15px;
+          font-weight: 600;
+          cursor: pointer;
+          transition: all 0.3s;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 8px;
+
+          i {
+            font-size: 16px;
+          }
+        }
+
+        .btn-secondary {
+          background: white;
+          border: 2px solid #667eea;
+          color: #667eea;
+
+          &:hover {
+            background: #f5f5f5;
+          }
+        }
+
+        .btn-primary {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border: none;
+          color: white;
+
+          &:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
+          }
+        }
+      }
+    }
+  }
+}
+
+// 辅助函数
+.formatCurrency {
+  font-family: 'Arial', sans-serif;
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .calculator-page {
+    .calculator-types {
+      .types-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    .calculator-form,
+    .calculation-result {
+      .form-content,
+      .result-content {
+        padding: 20px 15px;
+      }
+
+      .form-section .form-row {
+        grid-template-columns: 1fr;
+      }
+
+      .result-actions {
+        flex-direction: column;
+
+        button {
+          width: 100%;
+        }
+      }
+    }
+  }
+}

legal-assistant-app/src/app/pages/tools/document-generator/document-generator.scss

@@ -1,23 +1,23 @@
 .document-generator-page {
   min-height: 100vh;
-  background: var(--bg-secondary);
+  background: #f5f5f5;
   padding-bottom: 80px;
 
   .search-section {
-    padding: var(--spacing-md);
-    background: var(--bg-primary);
+    padding: 15px;
+    background: white;
 
     .search-bar {
       display: flex;
       align-items: center;
-      background: var(--bg-secondary);
-      border-radius: var(--radius-md);
-      padding: var(--spacing-md);
-      gap: var(--spacing-md);
+      background: #f5f5f5;
+      border-radius: 12px;
+      padding: 12px 16px;
+      gap: 12px;
 
       i {
         font-size: 16px;
-        color: var(--text-secondary);
+        color: #999;
       }
 
       .search-input {
@@ -25,11 +25,11 @@
         border: none;
         background: transparent;
         outline: none;
-        font-size: var(--font-md);
-        color: var(--text-primary);
+        font-size: 15px;
+        color: #333;
 
         &::placeholder {
-          color: var(--text-tertiary);
+          color: #999;
         }
       }
     }
@@ -37,11 +37,11 @@
 
   .category-tabs {
     display: flex;
-    gap: var(--spacing-sm);
+    gap: 10px;
     overflow-x: auto;
-    padding: var(--spacing-md);
-    padding-bottom: var(--spacing-sm);
-    background: var(--bg-primary);
+    padding: 15px;
+    padding-bottom: 10px;
+    background: white;
     -webkit-overflow-scrolling: touch;
 
     &::-webkit-scrollbar {
@@ -49,35 +49,41 @@
     }
 
     &::-webkit-scrollbar-thumb {
-      background: var(--border-color);
+      background: #e0e0e0;
       border-radius: 2px;
     }
 
     .category-tab {
       display: flex;
       align-items: center;
-      gap: var(--spacing-xs);
-      padding: var(--spacing-sm) var(--spacing-md);
-      border: 1px solid var(--border-color);
-      border-radius: var(--radius-full);
-      background: var(--bg-secondary);
-      color: var(--text-secondary);
-      font-size: var(--font-sm);
+      gap: 8px;
+      padding: 10px 18px;
+      border: 2px solid #e0e0e0;
+      border-radius: 20px;
+      background: white;
+      color: #666;
+      font-size: 14px;
+      font-weight: 600;
       cursor: pointer;
-      transition: all var(--transition-fast);
+      transition: all 0.3s;
       white-space: nowrap;
       flex-shrink: 0;
 
       i {
-        font-size: var(--font-sm);
+        font-size: 14px;
       }
 
       &.active {
-        border-color: var(--primary-color);
-        background: var(--primary-color);
+        border-color: #667eea;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
         color: white;
       }
 
+      &:hover:not(.active) {
+        border-color: #667eea;
+        background: #f5f5ff;
+      }
+
       &:active {
         transform: scale(0.95);
       }
@@ -85,59 +91,65 @@
   }
 
   .template-list {
-    padding: var(--spacing-md);
+    padding: 15px;
 
     .list-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      margin-bottom: var(--spacing-md);
+      margin-bottom: 18px;
 
       h3 {
-        font-size: var(--font-lg);
-        font-weight: 600;
-        color: var(--text-primary);
+        font-size: 18px;
+        font-weight: 700;
+        color: #1a1a1a;
       }
 
       .count {
-        font-size: var(--font-sm);
-        color: var(--text-secondary);
+        font-size: 14px;
+        color: #999;
+        font-weight: 600;
       }
     }
 
     .template-grid {
       display: flex;
       flex-direction: column;
-      gap: var(--spacing-md);
+      gap: 12px;
 
       .template-card {
         display: flex;
         align-items: center;
-        gap: var(--spacing-md);
-        background: var(--bg-primary);
-        border-radius: var(--radius-lg);
-        padding: var(--spacing-md);
-        box-shadow: var(--shadow-sm);
+        gap: 15px;
+        background: white;
+        border-radius: 16px;
+        padding: 16px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
         cursor: pointer;
-        transition: all var(--transition-fast);
+        transition: all 0.3s;
+
+        &:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        }
 
         &:active {
           transform: scale(0.98);
-          box-shadow: var(--shadow-md);
         }
 
         .template-icon {
-          width: 48px;
-          height: 48px;
-          border-radius: var(--radius-md);
-          background: var(--primary-gradient);
+          width: 52px;
+          height: 52px;
+          border-radius: 12px;
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
           display: flex;
           align-items: center;
           justify-content: center;
           flex-shrink: 0;
+          box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
 
           i {
-            font-size: 20px;
+            font-size: 22px;
             color: white;
           }
         }
@@ -147,27 +159,27 @@
           min-width: 0;
 
           h4 {
-            font-size: var(--font-md);
-            font-weight: 600;
-            color: var(--text-primary);
-            margin: 0 0 4px 0;
+            font-size: 16px;
+            font-weight: 700;
+            color: #1a1a1a;
+            margin: 0 0 6px 0;
           }
 
           p {
-            font-size: var(--font-sm);
-            color: var(--text-secondary);
-            margin: 0 0 var(--spacing-xs) 0;
-            line-height: 1.4;
+            font-size: 13px;
+            color: #666;
+            margin: 0 0 8px 0;
+            line-height: 1.5;
           }
 
           .template-meta {
-            font-size: var(--font-xs);
-            color: var(--text-tertiary);
+            font-size: 12px;
+            color: #999;
 
             span {
               display: inline-flex;
               align-items: center;
-              gap: 4px;
+              gap: 5px;
 
               i {
                 font-size: 12px;
@@ -177,56 +189,65 @@
         }
 
         > i {
-          color: var(--text-tertiary);
-          font-size: 14px;
+          color: #ccc;
+          font-size: 16px;
         }
       }
     }
 
     .empty-state {
       text-align: center;
-      padding: var(--spacing-xl);
-      color: var(--text-tertiary);
+      padding: 60px 20px;
+      color: #999;
 
       i {
-        font-size: 48px;
-        margin-bottom: var(--spacing-md);
+        font-size: 64px;
+        margin-bottom: 20px;
+        opacity: 0.5;
       }
 
       p {
-        font-size: var(--font-md);
+        font-size: 16px;
       }
     }
   }
 
-  // ========== 模板编辑器 ==========
+  // 模板编辑器
   .template-editor {
     min-height: 100vh;
-    background: var(--bg-secondary);
+    background: white;
 
     .editor-header {
       display: flex;
       align-items: center;
-      gap: var(--spacing-md);
-      padding: var(--spacing-md);
-      background: var(--bg-primary);
-      border-bottom: 1px solid var(--border-light);
+      gap: 15px;
+      padding: 20px;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      position: sticky;
+      top: 0;
+      z-index: 100;
 
       .back-btn {
         width: 40px;
         height: 40px;
-        border-radius: var(--radius-full);
+        border-radius: 12px;
         border: none;
-        background: var(--bg-secondary);
-        color: var(--text-primary);
+        background: rgba(255, 255, 255, 0.2);
+        color: white;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         flex-shrink: 0;
+        transition: all 0.3s;
 
         i {
-          font-size: var(--font-lg);
+          font-size: 18px;
+        }
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.3);
         }
 
         &:active {
@@ -238,65 +259,67 @@
         flex: 1;
 
         h2 {
-          font-size: var(--font-lg);
-          font-weight: 600;
-          color: var(--text-primary);
-          margin: 0 0 4px 0;
+          font-size: 20px;
+          font-weight: 700;
+          color: white;
+          margin: 0 0 5px 0;
         }
 
         p {
-          font-size: var(--font-sm);
-          color: var(--text-secondary);
+          font-size: 14px;
+          color: rgba(255, 255, 255, 0.9);
           margin: 0;
         }
       }
     }
 
     .editor-content {
-      padding: var(--spacing-md);
+      padding: 20px;
+      background: #f5f5f5;
 
       .form-section {
-        background: var(--bg-primary);
-        border-radius: var(--radius-lg);
-        padding: var(--spacing-lg);
-        margin-bottom: var(--spacing-md);
+        background: white;
+        border-radius: 16px;
+        padding: 25px;
+        margin-bottom: 20px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
 
         h3 {
           display: flex;
           align-items: center;
-          gap: var(--spacing-sm);
-          font-size: var(--font-lg);
-          font-weight: 600;
-          color: var(--text-primary);
-          margin: 0 0 var(--spacing-xs) 0;
+          gap: 10px;
+          font-size: 18px;
+          font-weight: 700;
+          color: #1a1a1a;
+          margin: 0 0 10px 0;
 
           i {
-            color: var(--primary-color);
+            color: #667eea;
           }
         }
 
         .form-tip {
-          font-size: var(--font-sm);
-          color: var(--text-secondary);
-          margin: 0 0 var(--spacing-lg) 0;
+          font-size: 14px;
+          color: #666;
+          margin: 0 0 25px 0;
         }
 
         .form-fields {
           display: flex;
           flex-direction: column;
-          gap: var(--spacing-lg);
+          gap: 20px;
 
           .form-field {
             label {
               display: block;
-              font-size: var(--font-sm);
-              font-weight: 500;
-              color: var(--text-primary);
-              margin-bottom: var(--spacing-xs);
+              font-size: 15px;
+              font-weight: 600;
+              color: #333;
+              margin-bottom: 8px;
 
               .required {
-                color: var(--danger-color);
-                margin-left: 2px;
+                color: #f44336;
+                margin-left: 4px;
               }
             }
 
@@ -304,29 +327,34 @@
             textarea,
             select {
               width: 100%;
-              padding: var(--spacing-md);
-              border: 1px solid var(--border-color);
-              border-radius: var(--radius-md);
-              font-size: var(--font-md);
-              color: var(--text-primary);
-              background: var(--bg-secondary);
+              padding: 12px 16px;
+              border: 2px solid #e0e0e0;
+              border-radius: 12px;
+              font-size: 15px;
+              color: #333;
+              background: white;
               outline: none;
-              transition: all var(--transition-fast);
+              transition: all 0.3s;
 
               &:focus {
-                border-color: var(--primary-color);
-                box-shadow: 0 0 0 3px rgba(26, 75, 140, 0.1);
+                border-color: #667eea;
+                box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
               }
 
               &::placeholder {
-                color: var(--text-tertiary);
+                color: #999;
               }
             }
 
             textarea {
               resize: vertical;
-              min-height: 80px;
+              min-height: 100px;
               font-family: inherit;
+              line-height: 1.6;
+            }
+
+            select {
+              cursor: pointer;
             }
           }
         }
@@ -334,42 +362,50 @@
 
       .editor-actions {
         display: flex;
-        gap: var(--spacing-md);
-        padding: var(--spacing-md) 0;
+        gap: 15px;
+        padding: 20px 0;
 
         button {
           flex: 1;
           display: flex;
           align-items: center;
           justify-content: center;
-          gap: var(--spacing-sm);
-          padding: var(--spacing-md);
-          border-radius: var(--radius-md);
-          font-size: var(--font-md);
-          font-weight: 500;
+          gap: 10px;
+          padding: 14px;
+          border-radius: 12px;
+          font-size: 16px;
+          font-weight: 600;
           cursor: pointer;
-          transition: all var(--transition-fast);
+          transition: all 0.3s;
           border: none;
 
           i {
-            font-size: var(--font-lg);
+            font-size: 18px;
           }
 
           &.btn-secondary {
-            background: var(--bg-primary);
-            color: var(--text-secondary);
-            border: 1px solid var(--border-color);
+            background: white;
+            color: #666;
+            border: 2px solid #e0e0e0;
+
+            &:hover {
+              background: #f5f5f5;
+            }
 
             &:active {
               transform: scale(0.98);
-              background: var(--bg-secondary);
             }
           }
 
           &.btn-primary {
-            background: var(--primary-gradient);
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             color: white;
 
+            &:hover {
+              transform: translateY(-2px);
+              box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
+            }
+
             &:active {
               transform: scale(0.98);
             }
@@ -379,36 +415,44 @@
     }
   }
 
-  // ========== 文书预览 ==========
+  // 文书预览
   .document-preview {
     min-height: 100vh;
-    background: var(--bg-secondary);
+    background: #f5f5f5;
     display: flex;
     flex-direction: column;
 
     .preview-header {
       display: flex;
       align-items: center;
-      gap: var(--spacing-md);
-      padding: var(--spacing-md);
-      background: var(--bg-primary);
-      border-bottom: 1px solid var(--border-light);
+      gap: 15px;
+      padding: 20px;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      position: sticky;
+      top: 0;
+      z-index: 100;
 
       .back-btn {
         width: 40px;
         height: 40px;
-        border-radius: var(--radius-full);
+        border-radius: 12px;
         border: none;
-        background: var(--bg-secondary);
-        color: var(--text-primary);
+        background: rgba(255, 255, 255, 0.2);
+        color: white;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         flex-shrink: 0;
+        transition: all 0.3s;
 
         i {
-          font-size: var(--font-lg);
+          font-size: 18px;
+        }
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.3);
         }
 
         &:active {
@@ -420,15 +464,15 @@
         flex: 1;
 
         h2 {
-          font-size: var(--font-lg);
-          font-weight: 600;
-          color: var(--text-primary);
-          margin: 0 0 4px 0;
+          font-size: 20px;
+          font-weight: 700;
+          color: white;
+          margin: 0 0 5px 0;
         }
 
         p {
-          font-size: var(--font-sm);
-          color: var(--text-secondary);
+          font-size: 14px;
+          color: rgba(255, 255, 255, 0.9);
           margin: 0;
         }
       }
@@ -437,19 +481,19 @@
     .preview-content {
       flex: 1;
       overflow-y: auto;
-      padding: var(--spacing-md);
+      padding: 20px;
       -webkit-overflow-scrolling: touch;
 
       .document-paper {
         background: white;
-        border-radius: var(--radius-lg);
-        padding: var(--spacing-xl);
-        box-shadow: var(--shadow-md);
-        min-height: 400px;
+        border-radius: 16px;
+        padding: 30px;
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+        min-height: 500px;
 
         .document-text {
-          font-family: 'SimSun', serif;
-          font-size: 14px;
+          font-family: 'Microsoft YaHei', 'SimSun', serif;
+          font-size: 15px;
           line-height: 2;
           color: #000;
           white-space: pre-wrap;
@@ -462,35 +506,42 @@
     .preview-actions {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
-      gap: var(--spacing-sm);
-      padding: var(--spacing-md);
-      background: var(--bg-primary);
-      border-top: 1px solid var(--border-light);
+      gap: 10px;
+      padding: 20px;
+      background: white;
+      border-top: 1px solid #e0e0e0;
+      box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
 
       .action-btn {
         display: flex;
         flex-direction: column;
         align-items: center;
-        gap: var(--spacing-xs);
-        padding: var(--spacing-md) var(--spacing-xs);
+        gap: 8px;
+        padding: 15px 10px;
         border: none;
-        border-radius: var(--radius-md);
-        background: var(--bg-secondary);
-        color: var(--text-secondary);
+        border-radius: 12px;
+        background: #f5f5f5;
+        color: #666;
         cursor: pointer;
-        transition: all var(--transition-fast);
+        transition: all 0.3s;
 
         i {
-          font-size: var(--font-xl);
+          font-size: 22px;
         }
 
         span {
-          font-size: var(--font-xs);
+          font-size: 12px;
+          font-weight: 600;
         }
 
         &.primary {
-          background: var(--primary-gradient);
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
           color: white;
+          box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+        }
+
+        &:hover:not(.primary) {
+          background: #e0e0e0;
         }
 
         &:active {
@@ -500,3 +551,24 @@
     }
   }
 }
+
+// 响应式设计
+@media (max-width: 480px) {
+  .document-generator-page {
+    .preview-actions {
+      grid-template-columns: repeat(2, 1fr);
+
+      .action-btn {
+        padding: 12px 8px;
+
+        i {
+          font-size: 20px;
+        }
+
+        span {
+          font-size: 11px;
+        }
+      }
+    }
+  }
+}

legal-assistant-app/src/app/pages/tools/evidence-organizer/evidence-organizer.scss

@@ -1,7 +1,870 @@
-// 证据整理样式
-.evidence-container { padding: 12px; }
-.list { display: flex; flex-direction: column; gap: 8px; }
-.item { display: flex; align-items: center; justify-content: space-between; text-decoration: none; background: #FFFFFF; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); padding: 12px; }
-.item .left { display: flex; align-items: center; gap: 10px; }
-.item .title { color: #303B49; }
-.item .sub { color: #8592A6; font-size: 12px; }
+.evidence-organizer-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding-bottom: 80px;
+
+  // 工具栏
+  .toolbar {
+    background: white;
+    padding: 15px 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+
+    .search-bar {
+      display: flex;
+      align-items: center;
+      background: #f5f5f5;
+      border-radius: 12px;
+      padding: 10px 16px;
+      gap: 10px;
+      flex: 1;
+
+      i {
+        color: #999;
+        font-size: 16px;
+      }
+
+      input {
+        flex: 1;
+        border: none;
+        background: transparent;
+        outline: none;
+        font-size: 15px;
+        color: #333;
+
+        &::placeholder {
+          color: #999;
+        }
+      }
+    }
+
+    .toolbar-actions {
+      display: flex;
+      gap: 10px;
+      flex-wrap: wrap;
+
+      .view-toggle {
+        width: 44px;
+        height: 44px;
+        border-radius: 10px;
+        border: 2px solid #e0e0e0;
+        background: white;
+        color: #666;
+        cursor: pointer;
+        transition: all 0.3s;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        i {
+          font-size: 18px;
+        }
+
+        &:hover {
+          border-color: #667eea;
+          color: #667eea;
+        }
+      }
+
+      .btn-primary,
+      .btn-secondary {
+        flex: 1;
+        min-width: 120px;
+        height: 44px;
+        border-radius: 10px;
+        font-size: 14px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.3s;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        border: none;
+
+        i {
+          font-size: 16px;
+        }
+      }
+
+      .btn-primary {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+
+        &:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
+        }
+      }
+
+      .btn-secondary {
+        background: white;
+        color: #667eea;
+        border: 2px solid #667eea;
+
+        &:hover {
+          background: #f5f5ff;
+        }
+      }
+    }
+  }
+
+  // 分类标签
+  .category-tabs {
+    display: flex;
+    gap: 10px;
+    padding: 15px 20px;
+    overflow-x: auto;
+    background: white;
+    border-bottom: 1px solid #e0e0e0;
+
+    &::-webkit-scrollbar {
+      height: 4px;
+    }
+
+    .category-tab {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 16px;
+      border: 2px solid #e0e0e0;
+      border-radius: 20px;
+      background: white;
+      color: #666;
+      font-size: 14px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.3s;
+      white-space: nowrap;
+      flex-shrink: 0;
+
+      i {
+        font-size: 16px;
+      }
+
+      .count {
+        background: #f5f5f5;
+        padding: 2px 8px;
+        border-radius: 10px;
+        font-size: 12px;
+        margin-left: 4px;
+      }
+
+      &.active {
+        border-color: #667eea;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+
+        .count {
+          background: rgba(255, 255, 255, 0.2);
+          color: white;
+        }
+      }
+
+      &:hover:not(.active) {
+        border-color: #667eea;
+        background: #f5f5ff;
+      }
+    }
+  }
+
+  // 网格视图
+  .evidence-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 20px;
+    padding: 20px;
+
+    .evidence-card {
+      background: white;
+      border-radius: 16px;
+      overflow: hidden;
+      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+      cursor: pointer;
+      transition: all 0.3s;
+
+      &:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+      }
+
+      .card-thumbnail {
+        position: relative;
+        width: 100%;
+        height: 180px;
+        overflow: hidden;
+        background: #f5f5f5;
+
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+
+        .importance-badge {
+          position: absolute;
+          top: 12px;
+          right: 12px;
+          padding: 4px 10px;
+          border-radius: 12px;
+          font-size: 12px;
+          font-weight: 700;
+          color: white;
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+        }
+
+        .type-icon {
+          position: absolute;
+          bottom: 12px;
+          left: 12px;
+          width: 40px;
+          height: 40px;
+          border-radius: 50%;
+          background: rgba(255, 255, 255, 0.95);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+          i {
+            font-size: 18px;
+            color: #667eea;
+          }
+        }
+      }
+
+      .card-content {
+        padding: 16px;
+
+        .evidence-name {
+          font-size: 16px;
+          font-weight: 700;
+          color: #1a1a1a;
+          margin: 0 0 8px 0;
+          line-height: 1.4;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .evidence-desc {
+          font-size: 13px;
+          color: #666;
+          margin: 0 0 12px 0;
+          line-height: 1.5;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+        }
+
+        .evidence-meta {
+          display: flex;
+          gap: 15px;
+          font-size: 12px;
+          color: #999;
+          margin-bottom: 12px;
+
+          span {
+            display: flex;
+            align-items: center;
+            gap: 5px;
+
+            i {
+              font-size: 12px;
+            }
+          }
+        }
+
+        .evidence-tags {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 6px;
+
+          .tag {
+            padding: 4px 10px;
+            background: #f5f5f5;
+            border-radius: 10px;
+            font-size: 12px;
+            color: #666;
+          }
+        }
+      }
+
+      .card-actions {
+        display: flex;
+        border-top: 1px solid #f0f0f0;
+
+        button {
+          flex: 1;
+          height: 44px;
+          border: none;
+          background: transparent;
+          color: #666;
+          cursor: pointer;
+          transition: all 0.3s;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          i {
+            font-size: 16px;
+          }
+
+          &:hover {
+            background: #f5f5f5;
+            color: #667eea;
+          }
+
+          &:not(:last-child) {
+            border-right: 1px solid #f0f0f0;
+          }
+
+          &:last-child:hover {
+            color: #f44336;
+          }
+        }
+      }
+    }
+  }
+
+  // 列表视图
+  .evidence-list {
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+
+    .evidence-item {
+      background: white;
+      border-radius: 16px;
+      padding: 16px;
+      display: flex;
+      align-items: center;
+      gap: 15px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+      cursor: pointer;
+      transition: all 0.3s;
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      }
+
+      .item-icon {
+        width: 52px;
+        height: 52px;
+        border-radius: 12px;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+
+        i {
+          font-size: 24px;
+          color: white;
+        }
+      }
+
+      .item-info {
+        flex: 1;
+        min-width: 0;
+
+        h4 {
+          font-size: 16px;
+          font-weight: 700;
+          color: #1a1a1a;
+          margin: 0 0 6px 0;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        p {
+          font-size: 13px;
+          color: #666;
+          margin: 0 0 8px 0;
+          line-height: 1.5;
+          display: -webkit-box;
+          -webkit-line-clamp: 1;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+        }
+
+        .item-meta {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 12px;
+          font-size: 12px;
+          color: #999;
+
+          span {
+            display: flex;
+            align-items: center;
+            gap: 5px;
+
+            &.importance {
+              font-weight: 700;
+            }
+          }
+
+          .tag {
+            padding: 3px 8px;
+            background: #f5f5f5;
+            border-radius: 8px;
+          }
+        }
+      }
+
+      .item-actions {
+        display: flex;
+        gap: 8px;
+
+        button {
+          width: 36px;
+          height: 36px;
+          border-radius: 50%;
+          border: none;
+          background: #f5f5f5;
+          color: #666;
+          cursor: pointer;
+          transition: all 0.3s;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          i {
+            font-size: 14px;
+          }
+
+          &:hover {
+            background: #667eea;
+            color: white;
+          }
+
+          &:last-child:hover {
+            background: #f44336;
+          }
+        }
+      }
+    }
+  }
+
+  // 空状态
+  .empty-state {
+    text-align: center;
+    padding: 80px 20px;
+    color: #999;
+
+    i {
+      font-size: 80px;
+      margin-bottom: 20px;
+      opacity: 0.5;
+    }
+
+    p {
+      font-size: 16px;
+      margin-bottom: 30px;
+    }
+
+    .btn-primary {
+      margin: 0 auto;
+      min-width: 200px;
+      height: 50px;
+      border-radius: 12px;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: white;
+      border: none;
+      font-size: 16px;
+      font-weight: 600;
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 10px;
+      transition: all 0.3s;
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
+      }
+    }
+  }
+
+  // 模态框样式
+  .modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    padding: 20px;
+    animation: fadeIn 0.3s;
+
+    @keyframes fadeIn {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+  }
+
+  .modal-content {
+    background: white;
+    border-radius: 20px;
+    max-width: 600px;
+    width: 100%;
+    max-height: 90vh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+    animation: slideUp 0.3s ease-out;
+
+    @keyframes slideUp {
+      from {
+        opacity: 0;
+        transform: translateY(30px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+  }
+
+  .modal-header {
+    padding: 25px;
+    border-bottom: 1px solid #e0e0e0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    h3 {
+      font-size: 20px;
+      font-weight: 700;
+      color: #1a1a1a;
+      margin: 0;
+    }
+
+    .close-btn {
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+      border: none;
+      background: #f5f5f5;
+      color: #666;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.3s;
+
+      &:hover {
+        background: #e0e0e0;
+      }
+
+      i {
+        font-size: 18px;
+      }
+    }
+  }
+
+  .modal-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 25px;
+
+    .upload-area {
+      border: 2px dashed #e0e0e0;
+      border-radius: 12px;
+      padding: 40px 20px;
+      text-align: center;
+      cursor: pointer;
+      transition: all 0.3s;
+      margin-bottom: 25px;
+
+      &:hover {
+        border-color: #667eea;
+        background: #f5f5ff;
+      }
+
+      i {
+        font-size: 48px;
+        color: #667eea;
+        margin-bottom: 15px;
+      }
+
+      p {
+        font-size: 16px;
+        color: #333;
+        margin: 0 0 8px 0;
+      }
+
+      small {
+        font-size: 13px;
+        color: #999;
+      }
+    }
+
+    .form-fields {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+    }
+
+    .form-row {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 15px;
+    }
+
+    .form-field {
+      label {
+        display: block;
+        font-size: 15px;
+        font-weight: 600;
+        color: #333;
+        margin-bottom: 8px;
+
+        .required {
+          color: #f44336;
+          margin-left: 4px;
+        }
+      }
+
+      input,
+      select,
+      textarea {
+        width: 100%;
+        padding: 12px 16px;
+        border: 2px solid #e0e0e0;
+        border-radius: 12px;
+        font-size: 15px;
+        color: #333;
+        background: white;
+        outline: none;
+        transition: all 0.3s;
+
+        &:focus {
+          border-color: #667eea;
+          box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+        }
+
+        &::placeholder {
+          color: #999;
+        }
+      }
+
+      textarea {
+        resize: vertical;
+        font-family: inherit;
+        line-height: 1.6;
+      }
+
+      .radio-group {
+        display: flex;
+        gap: 15px;
+
+        .radio-label {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          cursor: pointer;
+
+          input[type="radio"] {
+            width: 20px;
+            height: 20px;
+          }
+
+          span {
+            font-size: 15px;
+            color: #333;
+          }
+        }
+      }
+    }
+  }
+
+  .modal-footer {
+    padding: 20px 25px;
+    border-top: 1px solid #e0e0e0;
+    display: flex;
+    gap: 12px;
+
+    button {
+      flex: 1;
+      height: 48px;
+      border-radius: 12px;
+      font-size: 15px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.3s;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      border: none;
+
+      &.btn-secondary {
+        background: white;
+        color: #667eea;
+        border: 2px solid #667eea;
+
+        &:hover {
+          background: #f5f5ff;
+        }
+      }
+
+      &.btn-primary {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+
+        &:hover:not(:disabled) {
+          transform: translateY(-2px);
+          box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
+        }
+
+        &:disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+      }
+
+      &.btn-danger {
+        background: #f44336;
+        color: white;
+
+        &:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 10px 25px rgba(244, 67, 54, 0.4);
+        }
+      }
+    }
+  }
+
+  // 详情模态框
+  .detail-modal {
+    .detail-preview {
+      width: 100%;
+      height: 300px;
+      border-radius: 12px;
+      overflow: hidden;
+      margin-bottom: 20px;
+      background: #f5f5f5;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+
+    .detail-info {
+      h2 {
+        font-size: 22px;
+        font-weight: 700;
+        color: #1a1a1a;
+        margin: 0 0 20px 0;
+      }
+
+      .detail-meta {
+        background: #f9f9f9;
+        border-radius: 12px;
+        padding: 20px;
+        margin-bottom: 20px;
+
+        .meta-item {
+          display: flex;
+          align-items: center;
+          padding: 10px 0;
+          border-bottom: 1px solid #f0f0f0;
+
+          &:last-child {
+            border-bottom: none;
+          }
+
+          .label {
+            font-size: 14px;
+            color: #999;
+            width: 100px;
+          }
+
+          .value {
+            font-size: 15px;
+            color: #333;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+          }
+        }
+      }
+
+      .detail-description,
+      .detail-tags {
+        margin-bottom: 20px;
+
+        h4 {
+          font-size: 16px;
+          font-weight: 700;
+          color: #1a1a1a;
+          margin: 0 0 12px 0;
+        }
+
+        p {
+          font-size: 15px;
+          color: #666;
+          line-height: 1.8;
+          margin: 0;
+        }
+      }
+
+      .tags-list {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+
+        .tag {
+          padding: 6px 14px;
+          background: #f5f5f5;
+          border-radius: 12px;
+          font-size: 13px;
+          color: #666;
+          font-weight: 600;
+        }
+      }
+    }
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .evidence-organizer-page {
+    .evidence-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .toolbar .toolbar-actions {
+      .btn-primary,
+      .btn-secondary {
+        min-width: auto;
+        flex: 1;
+      }
+    }
+
+    .form-row {
+      grid-template-columns: 1fr !important;
+    }
+  }
+}

legal-assistant-app/src/app/pages/tools/legal-aid-assessment/legal-aid-assessment.scss

@@ -1,6 +1,636 @@
-.aid-container { padding: 12px; }
-form { display: flex; flex-direction: column; gap: 10px; }
-label { display: flex; flex-direction: column; gap: 6px; color: #303B49; }
-input { height: 36px; border: 1px solid #E4E7EB; border-radius: 8px; padding: 0 10px; }
-.actions { display: flex; justify-content: flex-end; margin-top: 8px; }
-.primary { display: inline-flex; align-items: center; gap: 6px; background: #2E90FA; color: #fff; text-decoration: none; border-radius: 8px; padding: 8px 12px; }
+.assessment-page {
+  min-height: 100vh;
+  background: linear-gradient(to bottom, #f5f7fa 0%, #ffffff 100%);
+  padding-bottom: 80px;
+
+  // 评估问卷容器
+  .assessment-container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+
+    // 进度指示器
+    .progress-indicator {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 30px;
+      position: relative;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 20px;
+        left: 0;
+        right: 0;
+        height: 2px;
+        background: #e0e0e0;
+        z-index: 0;
+      }
+
+      .step-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 10px;
+        position: relative;
+        z-index: 1;
+        flex: 1;
+
+        .step-number {
+          width: 40px;
+          height: 40px;
+          border-radius: 50%;
+          background: #e0e0e0;
+          color: #999;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-weight: 700;
+          font-size: 16px;
+          transition: all 0.3s;
+        }
+
+        .step-title {
+          font-size: 13px;
+          color: #999;
+          font-weight: 600;
+          transition: all 0.3s;
+        }
+
+        &.active {
+          .step-number {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+          }
+
+          .step-title {
+            color: #667eea;
+          }
+        }
+
+        &.completed {
+          .step-number {
+            background: #43e97b;
+            color: white;
+          }
+
+          .step-title {
+            color: #43e97b;
+          }
+        }
+      }
+    }
+
+    // 表单卡片
+    .form-card {
+      background: white;
+      border-radius: 20px;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+      overflow: hidden;
+
+      .card-header {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        padding: 30px;
+        color: white;
+
+        h2 {
+          font-size: 24px;
+          font-weight: 700;
+          margin: 0 0 10px 0;
+        }
+
+        p {
+          font-size: 15px;
+          opacity: 0.9;
+          margin: 0;
+          line-height: 1.6;
+        }
+      }
+
+      .card-body {
+        padding: 30px;
+
+        .question-block {
+          margin-bottom: 30px;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+
+          .question-title {
+            font-size: 18px;
+            font-weight: 700;
+            color: #1a1a1a;
+            margin-bottom: 18px;
+            line-height: 1.5;
+
+            .hint {
+              font-size: 14px;
+              color: #999;
+              font-weight: 500;
+              margin-left: 8px;
+            }
+          }
+
+          .options-list {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+
+            .option-card {
+              position: relative;
+              display: flex;
+              align-items: center;
+              gap: 15px;
+              padding: 18px 20px;
+              border: 2px solid #e0e0e0;
+              border-radius: 12px;
+              cursor: pointer;
+              transition: all 0.3s;
+              background: white;
+
+              input[type="radio"],
+              input[type="checkbox"] {
+                width: 22px;
+                height: 22px;
+                cursor: pointer;
+              }
+
+              .option-label {
+                flex: 1;
+                font-size: 16px;
+                color: #333;
+                font-weight: 500;
+              }
+
+              i {
+                font-size: 20px;
+                color: #e0e0e0;
+                transition: all 0.3s;
+              }
+
+              &:hover {
+                border-color: #667eea;
+                background: #f5f5ff;
+              }
+
+              &.selected {
+                border-color: #667eea;
+                background: linear-gradient(to right, #f5f5ff 0%, #ffffff 100%);
+
+                i {
+                  color: #667eea;
+                }
+
+                .option-label {
+                  color: #667eea;
+                  font-weight: 600;
+                }
+              }
+            }
+          }
+
+          .text-input {
+            width: 100%;
+            padding: 15px 18px;
+            border: 2px solid #e0e0e0;
+            border-radius: 12px;
+            font-size: 16px;
+            color: #333;
+            outline: none;
+            transition: all 0.3s;
+
+            &:focus {
+              border-color: #667eea;
+              box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+            }
+
+            &::placeholder {
+              color: #999;
+            }
+          }
+        }
+      }
+
+      .card-footer {
+        padding: 20px 30px;
+        border-top: 1px solid #e0e0e0;
+        display: flex;
+        gap: 15px;
+
+        .spacer {
+          flex: 1;
+        }
+
+        button {
+          height: 48px;
+          min-width: 120px;
+          padding: 0 24px;
+          border-radius: 12px;
+          font-size: 16px;
+          font-weight: 600;
+          cursor: pointer;
+          transition: all 0.3s;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 8px;
+          border: none;
+
+          i {
+            font-size: 16px;
+          }
+
+          &.btn-secondary {
+            background: white;
+            color: #667eea;
+            border: 2px solid #667eea;
+
+            &:hover {
+              background: #f5f5ff;
+            }
+          }
+
+          &.btn-primary {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+
+            &:hover:not(:disabled) {
+              transform: translateY(-2px);
+              box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
+            }
+
+            &:disabled {
+              opacity: 0.5;
+              cursor: not-allowed;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // 评估结果容器
+  .result-container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+
+    .result-card {
+      background: white;
+      border-radius: 20px;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+      overflow: hidden;
+
+      .result-header {
+        padding: 40px 30px;
+        text-align: center;
+        background: linear-gradient(to bottom, #f9f9f9 0%, #ffffff 100%);
+
+        .result-icon {
+          width: 80px;
+          height: 80px;
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin: 0 auto 20px;
+          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+
+          i {
+            font-size: 40px;
+          }
+
+          &.eligible {
+            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
+
+            i {
+              color: white;
+            }
+          }
+
+          &.ineligible {
+            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
+
+            i {
+              color: white;
+            }
+          }
+        }
+
+        h2 {
+          font-size: 26px;
+          font-weight: 700;
+          color: #1a1a1a;
+          margin: 0 0 20px 0;
+        }
+
+        .score-display {
+          display: flex;
+          align-items: baseline;
+          justify-content: center;
+          gap: 8px;
+
+          .score-label {
+            font-size: 16px;
+            color: #666;
+          }
+
+          .score-value {
+            font-size: 48px;
+            font-weight: 700;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+          }
+
+          .score-unit {
+            font-size: 20px;
+            color: #999;
+          }
+        }
+      }
+
+      .result-body {
+        padding: 30px;
+
+        .result-section {
+          margin-bottom: 30px;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+
+          h3 {
+            font-size: 18px;
+            font-weight: 700;
+            color: #1a1a1a;
+            margin: 0 0 18px 0;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+
+            i {
+              color: #667eea;
+              font-size: 20px;
+            }
+          }
+
+          .suggestion-list,
+          .steps-list {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+
+            li {
+              position: relative;
+              padding-left: 30px;
+              margin-bottom: 12px;
+              font-size: 15px;
+              color: #666;
+              line-height: 1.8;
+
+              &::before {
+                content: '';
+                position: absolute;
+                left: 0;
+                top: 8px;
+                width: 6px;
+                height: 6px;
+                border-radius: 50%;
+                background: #667eea;
+              }
+
+              &:last-child {
+                margin-bottom: 0;
+              }
+            }
+          }
+
+          .steps-list {
+            counter-reset: step-counter;
+
+            li {
+              counter-increment: step-counter;
+
+              &::before {
+                content: counter(step-counter);
+                position: absolute;
+                left: 0;
+                top: 0;
+                width: 20px;
+                height: 20px;
+                border-radius: 50%;
+                background: #667eea;
+                color: white;
+                font-size: 12px;
+                font-weight: 700;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+              }
+            }
+          }
+        }
+
+        .info-box {
+          background: #fff8e1;
+          border-left: 4px solid #ffc107;
+          border-radius: 12px;
+          padding: 20px;
+          display: flex;
+          gap: 15px;
+          margin-top: 30px;
+
+          i {
+            color: #ffc107;
+            font-size: 24px;
+            flex-shrink: 0;
+            margin-top: 2px;
+          }
+
+          div {
+            flex: 1;
+
+            strong {
+              font-size: 16px;
+              color: #1a1a1a;
+              display: block;
+              margin-bottom: 8px;
+            }
+
+            p {
+              font-size: 14px;
+              color: #666;
+              line-height: 1.8;
+              margin: 0;
+            }
+          }
+        }
+      }
+
+      .result-footer {
+        padding: 20px 30px;
+        border-top: 1px solid #e0e0e0;
+        display: flex;
+        gap: 15px;
+
+        button {
+          flex: 1;
+          height: 52px;
+          border-radius: 12px;
+          font-size: 16px;
+          font-weight: 600;
+          cursor: pointer;
+          transition: all 0.3s;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 10px;
+          border: none;
+
+          i {
+            font-size: 18px;
+          }
+
+          &.btn-secondary {
+            background: white;
+            color: #667eea;
+            border: 2px solid #667eea;
+
+            &:hover {
+              background: #f5f5ff;
+            }
+          }
+
+          &.btn-primary {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+
+            &:hover {
+              transform: translateY(-2px);
+              box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
+            }
+          }
+        }
+      }
+    }
+
+    // 联系方式卡片
+    .contact-card {
+      background: white;
+      border-radius: 20px;
+      padding: 30px;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+
+      h3 {
+        font-size: 20px;
+        font-weight: 700;
+        color: #1a1a1a;
+        margin: 0 0 25px 0;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+
+        i {
+          color: #667eea;
+          font-size: 22px;
+        }
+      }
+
+      .contact-list {
+        display: flex;
+        flex-direction: column;
+        gap: 18px;
+
+        .contact-item {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 15px;
+          background: #f9f9f9;
+          border-radius: 12px;
+
+          .contact-label {
+            font-size: 15px;
+            color: #666;
+            font-weight: 500;
+          }
+
+          .contact-value {
+            font-size: 16px;
+            color: #1a1a1a;
+            font-weight: 700;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .assessment-page {
+    .progress-indicator {
+      .step-item {
+        .step-title {
+          font-size: 11px;
+        }
+
+        .step-number {
+          width: 36px;
+          height: 36px;
+          font-size: 14px;
+        }
+      }
+    }
+
+    .form-card {
+      .card-header {
+        padding: 25px 20px;
+
+        h2 {
+          font-size: 20px;
+        }
+
+        p {
+          font-size: 14px;
+        }
+      }
+
+      .card-body {
+        padding: 20px;
+
+        .question-block .question-title {
+          font-size: 16px;
+        }
+
+        .option-card {
+          padding: 15px;
+
+          .option-label {
+            font-size: 15px;
+          }
+        }
+      }
+    }
+
+    .result-container {
+      .result-footer button {
+        flex-direction: column;
+        height: auto;
+        padding: 12px;
+
+        i {
+          margin: 0;
+        }
+      }
+    }
+  }
+}

legal-assistant-app/src/app/pages/tools/legal-tools-market/legal-tools-market.scss

@@ -1,23 +1,23 @@
 .tools-market-page {
-  padding: var(--spacing-lg);
+  padding: 20px;
   min-height: 100vh;
-  background: var(--bg-primary);
+  background: #f5f5f5;
 
   // 分类导航
   .category-tabs {
     display: flex;
-    gap: var(--spacing-sm);
-    margin-bottom: var(--spacing-xl);
+    gap: 12px;
+    margin-bottom: 25px;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
-    padding-bottom: var(--spacing-sm);
+    padding-bottom: 10px;
 
     &::-webkit-scrollbar {
       height: 4px;
     }
 
     &::-webkit-scrollbar-thumb {
-      background: var(--border-color);
+      background: #e0e0e0;
       border-radius: 2px;
     }
 
@@ -25,31 +25,39 @@
       display: flex;
       flex-direction: column;
       align-items: center;
-      gap: var(--spacing-xs);
-      padding: var(--spacing-md);
-      border: 2px solid var(--border-color);
-      border-radius: var(--radius-lg);
-      background: var(--bg-secondary);
-      color: var(--text-secondary);
-      min-width: 80px;
+      gap: 8px;
+      padding: 16px 20px;
+      border: 2px solid #e0e0e0;
+      border-radius: 16px;
+      background: white;
+      color: #666;
+      min-width: 90px;
       cursor: pointer;
-      transition: all var(--transition-fast);
+      transition: all 0.3s;
       flex-shrink: 0;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 
       i {
-        font-size: 24px;
+        font-size: 26px;
       }
 
       span {
-        font-size: var(--font-sm);
-        font-weight: var(--font-medium);
+        font-size: 14px;
+        font-weight: 600;
         white-space: nowrap;
       }
 
       &.active {
-        border-color: var(--primary-color);
-        background: var(--primary-color);
-        color: var(--text-white);
+        border-color: #667eea;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
+      }
+
+      &:hover:not(.active) {
+        border-color: #667eea;
+        background: #f5f5ff;
+        transform: translateY(-2px);
       }
 
       &:active {
@@ -63,67 +71,72 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: var(--spacing-lg);
+    margin-bottom: 20px;
 
     h2 {
-      font-size: var(--font-xl);
-      font-weight: var(--font-semibold);
-      color: var(--text-primary);
+      font-size: 20px;
+      font-weight: 700;
+      color: #1a1a1a;
       display: flex;
       align-items: center;
-      gap: var(--spacing-sm);
+      gap: 10px;
 
       i {
-        color: var(--warning-color);
+        color: #ff6b6b;
       }
     }
 
     .tool-count {
-      font-size: var(--font-sm);
-      color: var(--text-secondary);
+      font-size: 14px;
+      color: #999;
+      font-weight: 600;
     }
   }
 
   // 热门工具区
   .hot-tools-section {
-    margin-bottom: var(--spacing-2xl);
+    margin-bottom: 30px;
 
     .hot-tools-grid {
       display: flex;
       flex-direction: column;
-      gap: var(--spacing-md);
+      gap: 15px;
 
       .hot-tool-card {
         display: flex;
         align-items: center;
-        gap: var(--spacing-lg);
-        background: var(--bg-secondary);
-        border-radius: var(--radius-lg);
-        padding: var(--spacing-lg);
-        box-shadow: var(--shadow-md);
+        gap: 18px;
+        background: white;
+        border-radius: 16px;
+        padding: 20px;
+        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
         cursor: pointer;
-        transition: all var(--transition-fast);
+        transition: all 0.3s;
         position: relative;
         overflow: hidden;
 
+        &:hover {
+          transform: translateY(-3px);
+          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+        }
+
         &:active {
           transform: scale(0.98);
-          box-shadow: var(--shadow-lg);
         }
 
         .tool-icon {
-          width: 60px;
-          height: 60px;
-          border-radius: var(--radius-lg);
+          width: 70px;
+          height: 70px;
+          border-radius: 16px;
           display: flex;
           align-items: center;
           justify-content: center;
           flex-shrink: 0;
-          box-shadow: var(--shadow-md);
+          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
 
           i {
-            font-size: 28px;
-            color: var(--text-white);
+            font-size: 32px;
+            color: white;
           }
         }
 
@@ -132,36 +145,37 @@
           min-width: 0;
 
           h3 {
-            font-size: var(--font-lg);
-            font-weight: var(--font-semibold);
-            color: var(--text-primary);
-            margin: 0 0 4px 0;
+            font-size: 18px;
+            font-weight: 700;
+            color: #1a1a1a;
+            margin: 0 0 6px 0;
           }
 
           p {
-            font-size: var(--font-sm);
-            color: var(--text-secondary);
+            font-size: 14px;
+            color: #666;
             margin: 0;
-            line-height: 1.4;
+            line-height: 1.5;
           }
         }
 
         .hot-badge {
           position: absolute;
-          top: var(--spacing-md);
-          right: var(--spacing-md);
-          padding: 4px 8px;
-          border-radius: var(--radius-xl);
+          top: 15px;
+          right: 15px;
+          padding: 5px 10px;
+          border-radius: 20px;
           background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%);
-          color: var(--text-white);
-          font-size: var(--font-xs);
-          font-weight: var(--font-semibold);
+          color: white;
+          font-size: 12px;
+          font-weight: 700;
           display: flex;
           align-items: center;
-          gap: 4px;
+          gap: 5px;
+          box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
 
           i {
-            font-size: 10px;
+            font-size: 12px;
           }
         }
       }
@@ -173,54 +187,58 @@
     .tools-grid {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
-      gap: var(--spacing-md);
+      gap: 15px;
 
       .tool-card {
         position: relative;
-        background: var(--bg-secondary);
-        border-radius: var(--radius-lg);
-        padding: var(--spacing-lg);
-        box-shadow: var(--shadow-sm);
+        background: white;
+        border-radius: 16px;
+        padding: 20px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
         cursor: pointer;
-        transition: all var(--transition-fast);
+        transition: all 0.3s;
         display: flex;
         flex-direction: column;
         align-items: center;
         text-align: center;
 
+        &:hover {
+          transform: translateY(-5px);
+          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
+        }
+
         &:active {
           transform: scale(0.95);
-          box-shadow: var(--shadow-md);
         }
 
         .tool-icon {
-          width: 56px;
-          height: 56px;
-          border-radius: var(--radius-lg);
+          width: 64px;
+          height: 64px;
+          border-radius: 16px;
           display: flex;
           align-items: center;
           justify-content: center;
-          margin-bottom: var(--spacing-md);
-          box-shadow: var(--shadow-sm);
+          margin-bottom: 15px;
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 
           i {
-            font-size: 26px;
-            color: var(--text-white);
+            font-size: 30px;
+            color: white;
           }
         }
 
         h4 {
-          font-size: var(--font-md);
-          font-weight: var(--font-semibold);
-          color: var(--text-primary);
-          margin: 0 0 var(--spacing-sm) 0;
+          font-size: 16px;
+          font-weight: 700;
+          color: #1a1a1a;
+          margin: 0 0 10px 0;
         }
 
         p {
-          font-size: var(--font-xs);
-          color: var(--text-secondary);
+          font-size: 13px;
+          color: #666;
           margin: 0;
-          line-height: 1.4;
+          line-height: 1.5;
           display: -webkit-box;
           -webkit-line-clamp: 2;
           -webkit-box-orient: vertical;
@@ -229,22 +247,30 @@
 
         .hot-tag {
           position: absolute;
-          top: 8px;
-          right: 8px;
-          width: 24px;
-          height: 24px;
+          top: 10px;
+          right: 10px;
+          width: 28px;
+          height: 28px;
           border-radius: 50%;
           background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%);
           display: flex;
           align-items: center;
           justify-content: center;
+          box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
 
           i {
-            font-size: 12px;
-            color: var(--text-white);
+            font-size: 14px;
+            color: white;
           }
         }
       }
     }
   }
+
+  // 响应式设计
+  @media (max-width: 480px) {
+    .tools-grid {
+      grid-template-columns: 1fr !important;
+    }
+  }
 }

legal-assistant-app/src/app/pages/tools/tools.scss

@@ -1,6 +1,6 @@
 .tools-container {
   min-height: 100vh;
-  background: var(--bg-primary);
+  background: #f5f5f5;
   display: flex;
   flex-direction: column;
 
@@ -8,41 +8,41 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: var(--spacing-lg);
-    background: var(--bg-secondary);
-    border-bottom: 1px solid var(--border-color);
+    padding: 20px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     position: sticky;
     top: 0;
-    z-index: var(--z-sticky);
+    z-index: 100;
 
     h1 {
       flex: 1;
       text-align: center;
-      font-size: var(--font-xl);
-      font-weight: var(--font-semibold);
-      color: var(--text-primary);
+      font-size: 22px;
+      font-weight: 700;
+      color: white;
       margin: 0;
     }
 
     .header-btn {
-      width: 36px;
-      height: 36px;
-      border-radius: var(--radius-md);
-      background: transparent;
+      width: 40px;
+      height: 40px;
+      border-radius: 12px;
+      background: rgba(255, 255, 255, 0.2);
       border: none;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
-      transition: all var(--transition-fast);
+      transition: all 0.3s;
 
       i {
         font-size: 18px;
-        color: var(--text-primary);
+        color: white;
       }
 
       &:hover {
-        background: var(--bg-tertiary);
+        background: rgba(255, 255, 255, 0.3);
       }
 
       &:active {
@@ -51,12 +51,13 @@
     }
 
     .placeholder {
-      width: 36px;
+      width: 40px;
     }
   }
 
   .tools-content {
     flex: 1;
     overflow-y: auto;
+    background: #f5f5f5;
   }
 }

legal-assistant-app/src/app/pages/tools/tools.ts

@@ -1,6 +1,8 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { RouterModule, Router } from '@angular/router';
+import { RouterModule, Router, NavigationEnd } from '@angular/router';
+import { Location } from '@angular/common';
+import { filter } from 'rxjs/operators';
 
 @Component({
   selector: 'app-tools',
@@ -10,9 +12,27 @@ import { RouterModule, Router } from '@angular/router';
   styleUrl: './tools.scss'
 })
 export class Tools {
-  constructor(private router: Router) {}
+  showBackButton = false;
+
+  constructor(
+    private router: Router,
+    private location: Location
+  ) {
+    // 监听路由变化，判断是否在工具市场页面
+    this.router.events.pipe(
+      filter(event => event instanceof NavigationEnd)
+    ).subscribe(() => {
+      this.showBackButton = !this.router.url.includes('/tools/tools-market');
+    });
+  }
   
   goBack() {
-    this.router.navigate(['/home']);
+    // 如果在工具子页面，返回工具市场
+    if (this.router.url.startsWith('/tools/') && !this.router.url.includes('/tools/tools-market')) {
+      this.router.navigate(['/tools/tools-market']);
+    } else {
+      // 否则返回上一页
+      this.location.back();
+    }
   }
 }

legal-assistant-app/src/app/shared/guards/auth.guard.ts

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { AuthService } from '../services/auth.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthGuard implements CanActivate {
+  constructor(
+    private router: Router,
+    private authService: AuthService
+  ) {}
+
+  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
+    if (this.authService.isAuthenticated()) {
+      return true;
+    }
+
+    // 未登录，重定向到登录页面，并保存原始URL
+    this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
+    return false;
+  }
+}

legal-assistant-app/src/app/shared/services/auth.service.ts

@@ -0,0 +1,111 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+
+export interface User {
+  id: string;
+  username: string;
+  email: string;
+  avatar?: string;
+  phone?: string;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthService {
+  private currentUserSubject: BehaviorSubject<User | null>;
+  public currentUser: Observable<User | null>;
+
+  constructor() {
+    const storedUser = localStorage.getItem('currentUser');
+    this.currentUserSubject = new BehaviorSubject<User | null>(
+      storedUser ? JSON.parse(storedUser) : null
+    );
+    this.currentUser = this.currentUserSubject.asObservable();
+  }
+
+  public get currentUserValue(): User | null {
+    return this.currentUserSubject.value;
+  }
+
+  login(username: string, password: string): Observable<boolean> {
+    return new Observable(observer => {
+      // 模拟API调用延迟
+      setTimeout(() => {
+        // 简单的模拟验证
+        if (username && password.length >= 6) {
+          const user: User = {
+            id: '1',
+            username: username,
+            email: `${username}@example.com`,
+            avatar: 'assets/images/default-avatar.png'
+          };
+          
+          localStorage.setItem('currentUser', JSON.stringify(user));
+          localStorage.setItem('authToken', 'mock-jwt-token');
+          this.currentUserSubject.next(user);
+          
+          observer.next(true);
+          observer.complete();
+        } else {
+          observer.error({ message: '用户名或密码错误' });
+        }
+      }, 800);
+    });
+  }
+
+  register(username: string, email: string, password: string, phone?: string): Observable<boolean> {
+    return new Observable(observer => {
+      setTimeout(() => {
+        // 检查用户名是否已存在（模拟）
+        const existingUsers = JSON.parse(localStorage.getItem('registeredUsers') || '[]');
+        const userExists = existingUsers.some((u: any) => u.username === username || u.email === email);
+        
+        if (userExists) {
+          observer.error({ message: '用户名或邮箱已存在' });
+          return;
+        }
+
+        // 创建新用户
+        const newUser: User = {
+          id: Date.now().toString(),
+          username,
+          email,
+          phone,
+          avatar: 'assets/images/default-avatar.png'
+        };
+
+        // 保存到"数据库"（localStorage）
+        existingUsers.push({ ...newUser, password });
+        localStorage.setItem('registeredUsers', JSON.stringify(existingUsers));
+
+        // 自动登录
+        localStorage.setItem('currentUser', JSON.stringify(newUser));
+        localStorage.setItem('authToken', 'mock-jwt-token');
+        this.currentUserSubject.next(newUser);
+
+        observer.next(true);
+        observer.complete();
+      }, 1000);
+    });
+  }
+
+  logout(): void {
+    localStorage.removeItem('currentUser');
+    localStorage.removeItem('authToken');
+    this.currentUserSubject.next(null);
+  }
+
+  isAuthenticated(): boolean {
+    return !!this.currentUserValue && !!localStorage.getItem('authToken');
+  }
+
+  updateUserProfile(updates: Partial<User>): void {
+    const currentUser = this.currentUserValue;
+    if (currentUser) {
+      const updatedUser = { ...currentUser, ...updates };
+      localStorage.setItem('currentUser', JSON.stringify(updatedUser));
+      this.currentUserSubject.next(updatedUser);
+    }
+  }
+}