徐福静0235668 14 timmar sedan
förälder
incheckning
fddf2ed559
74 ändrade filer med 2990 tillägg och 1685 borttagningar
  1. 810 0
      index.html
  2. 1 1
      legal-assistant-app/package-lock.json
  3. 2 2
      legal-assistant-app/package.json
  4. 1 1
      legal-assistant-app/src/app/app.routes.ts
  5. 2 15
      legal-assistant-app/src/app/pages/cases/case-detail-editor/case-detail-editor.html
  6. 3 4
      legal-assistant-app/src/app/pages/cases/case-detail-editor/case-detail-editor.ts
  7. 2 25
      legal-assistant-app/src/app/pages/cases/case-management-center/case-management-center.html
  8. 5 3
      legal-assistant-app/src/app/pages/cases/case-management-center/case-management-center.ts
  9. 3 23
      legal-assistant-app/src/app/pages/cases/cases.html
  10. 5 3
      legal-assistant-app/src/app/pages/cases/cases.ts
  11. 5 3
      legal-assistant-app/src/app/pages/cases/service-progress-tracking/service-progress-tracking.ts
  12. 34 11
      legal-assistant-app/src/app/pages/consultation/ai-consultation-dialog/ai-consultation-dialog.html
  13. 18 1
      legal-assistant-app/src/app/pages/consultation/ai-consultation-dialog/ai-consultation-dialog.scss
  14. 75 3
      legal-assistant-app/src/app/pages/consultation/ai-consultation-dialog/ai-consultation-dialog.ts
  15. 3 16
      legal-assistant-app/src/app/pages/consultation/consultation-history/consultation-history.html
  16. 3 7
      legal-assistant-app/src/app/pages/consultation/consultation-history/consultation-history.ts
  17. 16 6
      legal-assistant-app/src/app/pages/consultation/consultation.html
  18. 16 22
      legal-assistant-app/src/app/pages/consultation/consultation.scss
  19. 12 3
      legal-assistant-app/src/app/pages/consultation/consultation.ts
  20. 3 24
      legal-assistant-app/src/app/pages/consultation/legal-case-search/legal-case-search.html
  21. 3 4
      legal-assistant-app/src/app/pages/consultation/legal-case-search/legal-case-search.ts
  22. 158 221
      legal-assistant-app/src/app/pages/home/home.html
  23. 463 713
      legal-assistant-app/src/app/pages/home/home.scss
  24. 187 179
      legal-assistant-app/src/app/pages/home/home.ts
  25. 3 23
      legal-assistant-app/src/app/pages/learning/learning.html
  26. 5 3
      legal-assistant-app/src/app/pages/learning/learning.ts
  27. 3 24
      legal-assistant-app/src/app/pages/learning/legal-education-plaza/legal-education-plaza.html
  28. 5 3
      legal-assistant-app/src/app/pages/learning/legal-education-plaza/legal-education-plaza.ts
  29. 3 24
      legal-assistant-app/src/app/pages/learning/legal-knowledge-classroom/legal-knowledge-classroom.html
  30. 6 3
      legal-assistant-app/src/app/pages/learning/legal-knowledge-classroom/legal-knowledge-classroom.ts
  31. 3 24
      legal-assistant-app/src/app/pages/learning/legal-scenario-lab/legal-scenario-lab.html
  32. 5 3
      legal-assistant-app/src/app/pages/learning/legal-scenario-lab/legal-scenario-lab.ts
  33. 4 1
      legal-assistant-app/src/app/pages/profile/help-center/help-center.html
  34. 5 2
      legal-assistant-app/src/app/pages/profile/help-center/help-center.ts
  35. 4 1
      legal-assistant-app/src/app/pages/profile/personal-center/personal-center.html
  36. 5 2
      legal-assistant-app/src/app/pages/profile/personal-center/personal-center.ts
  37. 4 1
      legal-assistant-app/src/app/pages/profile/privacy-settings/privacy-settings.html
  38. 5 2
      legal-assistant-app/src/app/pages/profile/privacy-settings/privacy-settings.ts
  39. 5 38
      legal-assistant-app/src/app/pages/profile/profile.html
  40. 3 3
      legal-assistant-app/src/app/pages/profile/profile.ts
  41. 4 1
      legal-assistant-app/src/app/pages/profile/voice-display-settings/voice-display-settings.html
  42. 5 2
      legal-assistant-app/src/app/pages/profile/voice-display-settings/voice-display-settings.ts
  43. 3 24
      legal-assistant-app/src/app/pages/services/lawyer-connection/lawyer-connection.html
  44. 5 3
      legal-assistant-app/src/app/pages/services/lawyer-connection/lawyer-connection.ts
  45. 3 16
      legal-assistant-app/src/app/pages/services/legal-service-map/legal-service-map.html
  46. 5 3
      legal-assistant-app/src/app/pages/services/legal-service-map/legal-service-map.ts
  47. 3 24
      legal-assistant-app/src/app/pages/services/mediation-service/mediation-service.html
  48. 5 3
      legal-assistant-app/src/app/pages/services/mediation-service/mediation-service.ts
  49. 3 23
      legal-assistant-app/src/app/pages/services/services.html
  50. 5 3
      legal-assistant-app/src/app/pages/services/services.ts
  51. 3 11
      legal-assistant-app/src/app/pages/tools/compensation-calculator/compensation-calculator.html
  52. 5 4
      legal-assistant-app/src/app/pages/tools/compensation-calculator/compensation-calculator.ts
  53. 3 11
      legal-assistant-app/src/app/pages/tools/document-generator/document-generator.html
  54. 5 4
      legal-assistant-app/src/app/pages/tools/document-generator/document-generator.ts
  55. 3 24
      legal-assistant-app/src/app/pages/tools/evidence-organizer/evidence-organizer.html
  56. 5 3
      legal-assistant-app/src/app/pages/tools/evidence-organizer/evidence-organizer.ts
  57. 3 18
      legal-assistant-app/src/app/pages/tools/legal-aid-assessment/legal-aid-assessment.html
  58. 5 4
      legal-assistant-app/src/app/pages/tools/legal-aid-assessment/legal-aid-assessment.ts
  59. 3 24
      legal-assistant-app/src/app/pages/tools/legal-tools-market/legal-tools-market.html
  60. 4 3
      legal-assistant-app/src/app/pages/tools/legal-tools-market/legal-tools-market.ts
  61. 3 27
      legal-assistant-app/src/app/pages/tools/tools.html
  62. 5 3
      legal-assistant-app/src/app/pages/tools/tools.ts
  63. 16 0
      legal-assistant-app/src/assets/icons/case-management.svg
  64. 14 0
      legal-assistant-app/src/assets/icons/consultation.svg
  65. 16 0
      legal-assistant-app/src/assets/icons/legal-aid.svg
  66. 18 0
      legal-assistant-app/src/assets/icons/legal-knowledge.svg
  67. 19 0
      legal-assistant-app/src/assets/icons/legal-tools.svg
  68. 16 0
      legal-assistant-app/src/assets/icons/mediation.svg
  69. 11 0
      legal-assistant-app/src/assets/images/avatar.jpg
  70. 12 0
      legal-assistant-app/src/assets/images/video1.jpg
  71. 12 0
      legal-assistant-app/src/assets/images/video2.jpg
  72. 12 0
      legal-assistant-app/src/assets/images/video3.jpg
  73. 1 0
      legal-assistant-app/src/index.html
  74. 857 0
      legal-assistant-app/src/zixun.html

+ 810 - 0
index.html

@@ -0,0 +1,810 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>律助App - 您的智能法律助手</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+        }
+        
+        :root {
+            --primary-color: #1A237E;
+            --primary-light: #303F9F;
+            --accent-color: #FFD700;
+            --warning-color: #D32F2F;
+            --success-color: #388E3C;
+            --bg-color: #F5F5F5;
+            --card-color: #FFFFFF;
+            --text-primary: #212121;
+            --text-secondary: #616161;
+            --border-radius: 16px;
+            --shadow: 0 4px 16px rgba(0,0,0,0.08);
+            --transition: all 0.3s ease;
+        }
+        
+        body {
+            background-color: var(--bg-color);
+            color: var(--text-primary);
+            max-width: 500px;
+            margin: 0 auto;
+            position: relative;
+            padding-bottom: 80px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 16px;
+            background: white;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+        }
+        
+        .logo {
+            font-size: 20px;
+            font-weight: bold;
+            color: var(--primary-color);
+        }
+        
+        .nav-icons {
+            display: flex;
+            gap: 16px;
+        }
+        
+        .nav-icon {
+            font-size: 18px;
+            color: var(--text-secondary);
+            cursor: pointer;
+            position: relative;
+        }
+        
+        .notification-badge {
+            position: absolute;
+            top: -5px;
+            right: -5px;
+            background: var(--warning-color);
+            color: white;
+            border-radius: 50%;
+            width: 16px;
+            height: 16px;
+            font-size: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        /* 搜索栏 */
+        .search-bar {
+            padding: 16px;
+        }
+        
+        .search-container {
+            background: white;
+            border-radius: var(--border-radius);
+            padding: 12px;
+            box-shadow: var(--shadow);
+        }
+        
+        .search-input {
+            display: flex;
+            align-items: center;
+            background: var(--bg-color);
+            border-radius: 24px;
+            padding: 8px 16px;
+            transition: var(--transition);
+        }
+        
+        .search-input:focus-within {
+            box-shadow: 0 0 0 2px rgba(26, 35, 126, 0.2);
+        }
+        
+        .search-input i {
+            color: var(--text-secondary);
+            margin-right: 8px;
+        }
+        
+        .search-input input {
+            flex: 1;
+            border: none;
+            background: none;
+            outline: none;
+            font-size: 16px;
+            padding: 8px 0;
+        }
+        
+        .voice-btn {
+            background: var(--primary-color);
+            color: white;
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: var(--transition);
+        }
+        
+        .voice-btn:hover {
+            background: var(--primary-light);
+            transform: scale(1.05);
+        }
+        
+        /* 消息通知 */
+        .notification-bar {
+            background: #FFF9C4;
+            border-radius: var(--border-radius);
+            padding: 12px 16px;
+            margin: 0 16px 20px;
+            border-left: 4px solid var(--accent-color);
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            cursor: pointer;
+            transition: var(--transition);
+        }
+        
+        .notification-bar:hover {
+            transform: translateY(-2px);
+            box-shadow: var(--shadow);
+        }
+        
+        .notification-icon {
+            color: var(--accent-color);
+            font-size: 18px;
+        }
+        
+        /* 智能状态区 */
+        .status-card {
+            background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
+            color: white;
+            border-radius: var(--border-radius);
+            padding: 20px;
+            margin: 0 16px 20px;
+            box-shadow: var(--shadow);
+        }
+        
+        .greeting h3 {
+            margin-bottom: 4px;
+            font-size: 20px;
+        }
+        
+        .greeting p {
+            opacity: 0.9;
+            font-size: 14px;
+        }
+        
+        .case-progress {
+            margin: 20px 0;
+        }
+        
+        .progress-item {
+            margin-bottom: 16px;
+        }
+        
+        .case-title {
+            font-size: 14px;
+            opacity: 0.9;
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 8px;
+        }
+        
+        .progress-bar {
+            background: rgba(255,255,255,0.3);
+            height: 6px;
+            border-radius: 3px;
+            overflow: hidden;
+        }
+        
+        .progress-fill {
+            background: var(--accent-color);
+            height: 100%;
+            border-radius: 3px;
+            transition: width 1s ease;
+        }
+        
+        .todo-reminder {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            font-size: 14px;
+            background: rgba(255,255,255,0.2);
+            padding: 12px;
+            border-radius: 8px;
+        }
+        
+        .todo-icon {
+            color: var(--accent-color);
+        }
+        
+        /* 核心功能入口 */
+        .section-title {
+            padding: 0 16px;
+            margin: 24px 0 16px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .section-title h2 {
+            font-size: 18px;
+            color: var(--text-primary);
+        }
+        
+        .function-grid {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 16px;
+            padding: 0 16px;
+            margin-bottom: 24px;
+        }
+        
+        .function-item {
+            background: white;
+            border-radius: var(--border-radius);
+            padding: 20px 12px;
+            text-align: center;
+            box-shadow: var(--shadow);
+            transition: var(--transition);
+            cursor: pointer;
+        }
+        
+        .function-item:hover {
+            transform: translateY(-6px);
+            box-shadow: 0 12px 24px rgba(0,0,0,0.15);
+        }
+        
+        .function-icon {
+            font-size: 28px;
+            margin-bottom: 12px;
+            height: 50px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .function-name {
+            font-size: 14px;
+            font-weight: 500;
+            color: var(--text-primary);
+        }
+        
+        /* 动态内容区 */
+        .dynamic-content {
+            padding: 0 16px;
+        }
+        
+        .content-section {
+            background: white;
+            border-radius: var(--border-radius);
+            padding: 16px;
+            margin-bottom: 20px;
+            box-shadow: var(--shadow);
+        }
+        
+        .section-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 16px;
+        }
+        
+        .section-header h3 {
+            font-size: 16px;
+        }
+        
+        .more-link {
+            color: var(--primary-color);
+            font-size: 14px;
+            text-decoration: none;
+            display: flex;
+            align-items: center;
+            gap: 4px;
+        }
+        
+        .hot-questions .question-item {
+            padding: 12px 0;
+            border-bottom: 1px solid #f0f0f0;
+            cursor: pointer;
+            transition: var(--transition);
+        }
+        
+        .hot-questions .question-item:hover {
+            background: #f9f9f9;
+            margin: 0 -16px;
+            padding: 12px 16px;
+        }
+        
+        .question-item:last-child {
+            border-bottom: none;
+        }
+        
+        .tag {
+            background: rgba(26, 35, 126, 0.1);
+            color: var(--primary-color);
+            padding: 4px 8px;
+            border-radius: 12px;
+            font-size: 12px;
+            display: inline-block;
+            margin-bottom: 8px;
+        }
+        
+        .question-item p {
+            margin-bottom: 8px;
+            line-height: 1.4;
+        }
+        
+        .views {
+            color: var(--text-secondary);
+            font-size: 12px;
+            display: flex;
+            align-items: center;
+            gap: 4px;
+        }
+        
+        .video-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 12px;
+        }
+        
+        .video-item {
+            border-radius: 12px;
+            overflow: hidden;
+            position: relative;
+            cursor: pointer;
+        }
+        
+        .video-thumbnail {
+            width: 100%;
+            height: 100px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-size: 24px;
+        }
+        
+        .video-title {
+            padding: 8px;
+            font-size: 13px;
+            line-height: 1.3;
+        }
+        
+        .service-list {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+        }
+        
+        .service-item {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 12px;
+            border-radius: 8px;
+            background: #f9f9f9;
+            cursor: pointer;
+            transition: var(--transition);
+        }
+        
+        .service-item:hover {
+            background: #f0f0f0;
+            transform: translateX(4px);
+        }
+        
+        .service-icon {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--primary-color);
+            color: white;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .service-info {
+            flex: 1;
+        }
+        
+        .service-name {
+            font-weight: 500;
+            margin-bottom: 4px;
+        }
+        
+        .service-distance {
+            font-size: 12px;
+            color: var(--text-secondary);
+        }
+        
+        /* 全局悬浮按钮 */
+        .floating-btn {
+            position: fixed;
+            right: 20px;
+            bottom: 100px;
+            width: 60px;
+            height: 60px;
+            background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 0 6px 20px rgba(26, 35, 126, 0.4);
+            cursor: pointer;
+            z-index: 100;
+            transition: var(--transition);
+            animation: pulse 2s infinite;
+        }
+        
+        .floating-btn:hover {
+            transform: scale(1.1);
+        }
+        
+        .floating-btn i {
+            color: white;
+            font-size: 24px;
+        }
+        
+        @keyframes pulse {
+            0% {
+                box-shadow: 0 6px 20px rgba(26, 35, 126, 0.4);
+            }
+            50% {
+                box-shadow: 0 6px 30px rgba(26, 35, 126, 0.6);
+            }
+            100% {
+                box-shadow: 0 6px 20px rgba(26, 35, 126, 0.4);
+            }
+        }
+        
+        /* 底部导航栏 */
+        .bottom-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            max-width: 500px;
+            margin: 0 auto;
+            background: white;
+            display: flex;
+            justify-content: space-around;
+            padding: 12px 0;
+            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
+            z-index: 100;
+        }
+        
+        .nav-item {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 8px 16px;
+            border-radius: 20px;
+            transition: var(--transition);
+            cursor: pointer;
+        }
+        
+        .nav-item.active {
+            background: rgba(26, 35, 126, 0.1);
+        }
+        
+        .nav-icon {
+            font-size: 20px;
+            margin-bottom: 4px;
+        }
+        
+        .nav-text {
+            font-size: 12px;
+            font-weight: 500;
+        }
+        
+        .nav-item.active .nav-text {
+            color: var(--primary-color);
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <div class="top-nav">
+        <div class="logo">律助App</div>
+        <div class="nav-icons">
+            <div class="nav-icon">
+                <i class="far fa-bell"></i>
+                <div class="notification-badge">3</div>
+            </div>
+            <div class="nav-icon">
+                <i class="far fa-envelope"></i>
+                <div class="notification-badge">2</div>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 搜索栏 -->
+    <div class="search-bar">
+        <div class="search-container">
+            <div class="search-input">
+                <i class="fas fa-search"></i>
+                <input type="text" placeholder="输入法律问题或语音咨询...">
+                <div class="voice-btn">
+                    <i class="fas fa-microphone"></i>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 消息通知 -->
+    <div class="notification-bar">
+        <div class="notification-icon">
+            <i class="fas fa-bell"></i>
+        </div>
+        <div class="notification-text">
+            您有2条新消息和3个待办事项需要处理
+        </div>
+    </div>
+    
+    <!-- 智能状态区 -->
+    <div class="status-card">
+        <div class="greeting">
+            <h3>下午好,张先生!</h3>
+            <p>今天是2024年1月15日,祝您一切顺利</p>
+        </div>
+        
+        <div class="case-progress">
+            <div class="progress-item">
+                <div class="case-title">
+                    <span>劳动争议案</span>
+                    <span>60%</span>
+                </div>
+                <div class="progress-bar">
+                    <div class="progress-fill" style="width: 60%"></div>
+                </div>
+            </div>
+            <div class="progress-item">
+                <div class="case-title">
+                    <span>合同纠纷案</span>
+                    <span>30%</span>
+                </div>
+                <div class="progress-bar">
+                    <div class="progress-fill" style="width: 30%"></div>
+                </div>
+            </div>
+        </div>
+        
+        <div class="todo-reminder">
+            <div class="todo-icon">
+                <i class="fas fa-clock"></i>
+            </div>
+            <div class="todo-text">
+                明天下午3点与律师会议,请提前准备材料
+            </div>
+        </div>
+    </div>
+    
+    <!-- 核心功能入口 -->
+    <div class="section-title">
+        <h2>核心功能</h2>
+    </div>
+    
+    <div class="function-grid">
+        <div class="function-item" onclick="navigateTo('ai-consult')">
+            <div class="function-icon">
+                <i class="fas fa-robot"></i>
+            </div>
+            <div class="function-name">AI法律咨询</div>
+        </div>
+        <div class="function-item" onclick="navigateTo('doc-generate')">
+            <div class="function-icon">
+                <i class="fas fa-file-contract"></i>
+            </div>
+            <div class="function-name">文书生成</div>
+        </div>
+        <div class="function-item" onclick="navigateTo('law-search')">
+            <div class="function-icon">
+                <i class="fas fa-balance-scale"></i>
+            </div>
+            <div class="function-name">法条检索</div>
+        </div>
+        <div class="function-item" onclick="navigateTo('case-manage')">
+            <div class="function-icon">
+                <i class="fas fa-folder-open"></i>
+            </div>
+            <div class="function-name">案件管理</div>
+        </div>
+        <div class="function-item" onclick="navigateTo('lawyer-service')">
+            <div class="function-icon">
+                <i class="fas fa-user-tie"></i>
+            </div>
+            <div class="function-name">找律师</div>
+        </div>
+        <div class="function-item" onclick="navigateTo('learn-center')">
+            <div class="function-icon">
+                <i class="fas fa-graduation-cap"></i>
+            </div>
+            <div class="function-name">学习中心</div>
+        </div>
+    </div>
+    
+    <!-- 动态内容区 -->
+    <div class="dynamic-content">
+        <!-- 热点法律问题 -->
+        <div class="content-section">
+            <div class="section-header">
+                <h3>热点法律问题</h3>
+                <a href="#" class="more-link">
+                    更多 <i class="fas fa-chevron-right"></i>
+                </a>
+            </div>
+            <div class="hot-questions">
+                <div class="question-item">
+                    <div class="tag">劳动法</div>
+                    <p>公司裁员如何争取合理补偿?</p>
+                    <div class="views">
+                        <i class="far fa-eye"></i> 1.2万浏览
+                    </div>
+                </div>
+                <div class="question-item">
+                    <div class="tag">合同法</div>
+                    <p>租房合同中的霸王条款如何应对?</p>
+                    <div class="views">
+                        <i class="far fa-eye"></i> 8千浏览
+                    </div>
+                </div>
+                <div class="question-item">
+                    <div class="tag">婚姻法</div>
+                    <p>离婚财产分割有哪些注意事项?</p>
+                    <div class="views">
+                        <i class="far fa-eye"></i> 5千浏览
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 普法短视频 -->
+        <div class="content-section">
+            <div class="section-header">
+                <h3>普法短视频</h3>
+                <a href="#" class="more-link">
+                    更多 <i class="fas fa-chevron-right"></i>
+                </a>
+            </div>
+            <div class="video-grid">
+                <div class="video-item">
+                    <div class="video-thumbnail">
+                        <i class="fas fa-play-circle"></i>
+                    </div>
+                    <div class="video-title">劳动合同签订注意事项</div>
+                </div>
+                <div class="video-item">
+                    <div class="video-thumbnail">
+                        <i class="fas fa-play-circle"></i>
+                    </div>
+                    <div class="video-title">交通事故责任认定</div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 附近服务机构 -->
+        <div class="content-section">
+            <div class="section-header">
+                <h3>附近服务机构</h3>
+                <a href="#" class="more-link">
+                    更多 <i class="fas fa-chevron-right"></i>
+                </a>
+            </div>
+            <div class="service-list">
+                <div class="service-item">
+                    <div class="service-icon">
+                        <i class="fas fa-balance-scale"></i>
+                    </div>
+                    <div class="service-info">
+                        <div class="service-name">正义律师事务所</div>
+                        <div class="service-distance">距离 1.2km</div>
+                    </div>
+                </div>
+                <div class="service-item">
+                    <div class="service-icon">
+                        <i class="fas fa-gavel"></i>
+                    </div>
+                    <div class="service-info">
+                        <div class="service-name">法律援助中心</div>
+                        <div class="service-distance">距离 2.5km</div>
+                    </div>
+                </div>
+                <div class="service-item">
+                    <div class="service-icon">
+                        <i class="fas fa-landmark"></i>
+                    </div>
+                    <div class="service-info">
+                        <div class="service-name">人民法院</div>
+                        <div class="service-distance">距离 3.8km</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 全局悬浮按钮 -->
+    <div class="floating-btn">
+        <i class="fas fa-microphone"></i>
+    </div>
+    
+    <!-- 底部导航栏 -->
+    <div class="bottom-nav">
+        <div class="nav-item active">
+            <div class="nav-icon">
+                <i class="fas fa-home"></i>
+            </div>
+            <div class="nav-text">首页</div>
+        </div>
+        <div class="nav-item">
+            <div class="nav-icon">
+                <i class="fas fa-comments"></i>
+            </div>
+            <div class="nav-text">咨询</div>
+        </div>
+        <div class="nav-item">
+            <div class="nav-icon">
+                <i class="fas fa-tools"></i>
+            </div>
+            <div class="nav-text">工具</div>
+        </div>
+        <div class="nav-item">
+            <div class="nav-icon">
+                <i class="fas fa-user"></i>
+            </div>
+            <div class="nav-text">我的</div>
+        </div>
+    </div>
+
+    <script>
+        // 页面导航功能
+        function navigateTo(page) {
+            alert('即将跳转到: ' + page);
+            // 实际项目中这里会进行页面跳转
+        }
+        
+        // 语音按钮功能
+        document.querySelector('.voice-btn').addEventListener('click', function() {
+            alert('开始语音输入...');
+            // 实际项目中这里会调用语音识别API
+        });
+        
+        // 悬浮按钮功能
+        document.querySelector('.floating-btn').addEventListener('click', function() {
+            alert('开始语音咨询...');
+            // 实际项目中这里会启动语音咨询功能
+        });
+        
+        // 底部导航切换
+        document.querySelectorAll('.nav-item').forEach(item => {
+            item.addEventListener('click', function() {
+                document.querySelectorAll('.nav-item').forEach(nav => {
+                    nav.classList.remove('active');
+                });
+                this.classList.add('active');
+            });
+        });
+        
+        // 模拟进度条动画
+        window.addEventListener('load', function() {
+            const progressBars = document.querySelectorAll('.progress-fill');
+            progressBars.forEach(bar => {
+                const width = bar.style.width;
+                bar.style.width = '0%';
+                setTimeout(() => {
+                    bar.style.width = width;
+                }, 500);
+            });
+        });
+    </script>
+</body>
+</html>

+ 1 - 1
legal-assistant-app/package-lock.json

@@ -12,7 +12,7 @@
         "@angular/common": "^20.3.0",
         "@angular/compiler": "^20.3.0",
         "@angular/core": "^20.3.0",
-        "@angular/forms": "^20.3.0",
+        "@angular/forms": "^20.3.2",
         "@angular/material": "^20.2.5",
         "@angular/platform-browser": "^20.3.0",
         "@angular/platform-server": "^20.3.0",

+ 2 - 2
legal-assistant-app/package.json

@@ -27,7 +27,7 @@
     "@angular/common": "^20.3.0",
     "@angular/compiler": "^20.3.0",
     "@angular/core": "^20.3.0",
-    "@angular/forms": "^20.3.0",
+    "@angular/forms": "^20.3.2",
     "@angular/material": "^20.2.5",
     "@angular/platform-browser": "^20.3.0",
     "@angular/platform-server": "^20.3.0",
@@ -52,4 +52,4 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "typescript": "~5.9.2"
   }
-}
+}

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

@@ -7,7 +7,7 @@ export const routes: Routes = [
   // 主要Tab页面路由
   {
     path: 'home',
-    loadComponent: () => import('./pages/home/home').then(m => m.HomeComponent)
+    loadComponent: () => import('./pages/home/home').then(m => m.Home)
   },
   {
     path: 'consultation',

+ 2 - 15
legal-assistant-app/src/app/pages/cases/case-detail-editor/case-detail-editor.html

@@ -1,17 +1,4 @@
 <div class="case-editor-container">
-  <div class="header">
-    <h3>案件详情编辑</h3>
-  </div>
-
-  <div class="form">
-    <label>案件标题</label>
-    <input [(ngModel)]="title" placeholder="请输入案件标题" />
-
-    <label>案件描述</label>
-    <textarea placeholder="请描述案件经过、证据与诉求..."></textarea>
-
-    <div class="actions">
-      <button class="primary" routerLink="/cases/case-management">保存</button>
-    </div>
-  </div>
+  <h2>案件详情编辑</h2>
+  <p>页面内容已清空,路由功能正常。</p>
 </div>

+ 3 - 4
legal-assistant-app/src/app/pages/cases/case-detail-editor/case-detail-editor.ts

@@ -1,15 +1,14 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
-import { MatIconModule } from '@angular/material/icon';
-import { FormsModule } from '@angular/forms';
 
 @Component({
   selector: 'app-case-detail-editor',
-  imports: [CommonModule, RouterModule, MatIconModule, FormsModule],
+  imports: [CommonModule, RouterModule],
   templateUrl: './case-detail-editor.html',
   styleUrl: './case-detail-editor.scss'
 })
 export class CaseDetailEditor {
-  title: string = '';
+  constructor() {}
 }
+

+ 2 - 25
legal-assistant-app/src/app/pages/cases/case-management-center/case-management-center.html

@@ -1,27 +1,4 @@
 <div class="case-mgt-container">
-  <div class="section">
-    <h3>我的案件</h3>
-    <div class="list">
-      <a class="item" routerLink="/cases/case-editor">
-        <div class="left">
-          <mat-icon>assignment</mat-icon>
-          <div>
-            <div class="title">交通事故赔偿(示例)</div>
-            <div class="sub">创建于 2025-09-10 · 待完善材料</div>
-          </div>
-        </div>
-        <mat-icon>chevron_right</mat-icon>
-      </a>
-      <a class="item" routerLink="/cases/progress-tracking">
-        <div class="left">
-          <mat-icon>assignment</mat-icon>
-          <div>
-            <div class="title">劳动争议仲裁(示例)</div>
-            <div class="sub">创建于 2025-09-03 · 正在仲裁</div>
-          </div>
-        </div>
-        <mat-icon>chevron_right</mat-icon>
-      </a>
-    </div>
-  </div>
+  <h2>案件管理中心</h2>
+  <p>页面内容已清空,路由功能正常。</p>
 </div>

+ 5 - 3
legal-assistant-app/src/app/pages/cases/case-management-center/case-management-center.ts

@@ -1,12 +1,14 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
-import { MatIconModule } from '@angular/material/icon';
 
 @Component({
   selector: 'app-case-management-center',
-  imports: [CommonModule, RouterModule, MatIconModule],
+  imports: [CommonModule, RouterModule],
   templateUrl: './case-management-center.html',
   styleUrl: './case-management-center.scss'
 })
-export class CaseManagementCenter {}
+export class CaseManagementCenter {
+  constructor() {}
+}
+

+ 3 - 23
legal-assistant-app/src/app/pages/cases/cases.html

@@ -1,25 +1,5 @@
-<div class="cases-container">
-  <div class="module-header">
-    <h1>案件模块</h1>
-  </div>
-
-  <div class="feature-group">
-    <h2>功能入口</h2>
-    <div class="grid">
-      <a class="card" routerLink="/cases/case-management">
-        <mat-icon>folder</mat-icon>
-        <span>管理中心</span>
-      </a>
-      <a class="card" routerLink="/cases/progress-tracking">
-        <mat-icon>timeline</mat-icon>
-        <span>进度追踪</span>
-      </a>
-      <a class="card" routerLink="/cases/case-editor">
-        <mat-icon>edit</mat-icon>
-        <span>详情编辑</span>
-      </a>
-    </div>
-  </div>
-
+<div class="page-container">
+  <h1>案件模块</h1>
+  <p>页面内容已清空,路由正常工作</p>
   <router-outlet></router-outlet>
 </div>

+ 5 - 3
legal-assistant-app/src/app/pages/cases/cases.ts

@@ -1,12 +1,14 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
-import { MatIconModule } from '@angular/material/icon';
 
 @Component({
   selector: 'app-cases',
-  imports: [CommonModule, RouterModule, MatIconModule],
+  imports: [CommonModule, RouterModule],
   templateUrl: './cases.html',
   styleUrl: './cases.scss'
 })
-export class Cases {}
+export class Cases {
+  constructor() {}
+}
+

+ 5 - 3
legal-assistant-app/src/app/pages/cases/service-progress-tracking/service-progress-tracking.ts

@@ -1,12 +1,14 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
-import { MatIconModule } from '@angular/material/icon';
 
 @Component({
   selector: 'app-service-progress-tracking',
-  imports: [CommonModule, RouterModule, MatIconModule],
+  imports: [CommonModule, RouterModule],
   templateUrl: './service-progress-tracking.html',
   styleUrl: './service-progress-tracking.scss'
 })
-export class ServiceProgressTracking {}
+export class ServiceProgressTracking {
+  constructor() {}
+}
+

+ 34 - 11
legal-assistant-app/src/app/pages/consultation/ai-consultation-dialog/ai-consultation-dialog.html

@@ -1,21 +1,44 @@
 <div class="dialog-container">
-  <div class="messages">
-    <div class="message user">
-      <div class="bubble">我想咨询交通事故赔偿需要准备哪些材料?</div>
-    </div>
+  <!-- 快捷问题模板 -->
+  <div class="quick-templates">
+    <button class="template-item" (click)="useTemplate('劳动纠纷咨询', chatInput)">劳动纠纷咨询</button>
+    <button class="template-item" (click)="useTemplate('合同审查要点', chatInput)">合同审查要点</button>
+    <button class="template-item" (click)="useTemplate('赔偿金额计算', chatInput)">赔偿金额计算</button>
+    <button class="template-item" (click)="useTemplate('法律文书起草', chatInput)">法律文书起草</button>
+    <button class="template-item" (click)="useTemplate('证据收集指导', chatInput)">证据收集指导</button>
+    <button class="template-item" (click)="useTemplate('诉讼流程咨询', chatInput)">诉讼流程咨询</button>
+  </div>
+
+  <!-- 对话消息区 -->
+  <div class="messages" #messagesContainer>
+    <!-- 初始欢迎消息 -->
     <div class="message ai">
       <div class="bubble">
-        <div class="summary">结论摘要:请准备事故认定书、医疗票据、收入证明等关键材料。</div>
-        <div class="legal-basis">法律依据:道路交通安全法、相关司法解释。</div>
-        <div class="steps">行动步骤:1) 收集材料 2) 申请调解 3) 准备诉讼。</div>
-        <div class="explain">通俗解释:这些材料用于证明事故事实与损失情况,方便计算赔偿金额。</div>
+        <div class="conclusion">您好!我是您的AI法律助手,可以为您提供法律咨询、法条查询、案例分析和文书生成等服务。</div>
+        <div class="legal-reference">基于《中华人民共和国法律咨询服务规范》提供专业建议</div>
+        <div class="action-steps">
+          <strong>您可以:</strong>
+          <ol>
+            <li>描述您的法律问题</li>
+            <li>上传相关文件让我分析</li>
+            <li>使用快捷模板快速提问</li>
+          </ol>
+        </div>
+        <div class="explanation">我会用通俗易懂的方式解释法律概念,并提供具体的行动建议。</div>
       </div>
     </div>
+
+    <!-- 动态消息渲染 -->
+    <div class="message" *ngFor="let m of chatMessages" [ngClass]="m.sender">
+      <div class="bubble">{{ m.text }}</div>
+    </div>
   </div>
 
+  <!-- 底部输入栏 -->
   <div class="input-bar">
-    <button class="voice-btn"><mat-icon>keyboard_voice</mat-icon></button>
-    <input type="text" placeholder="请输入您的问题..." />
-    <button class="send-btn"><mat-icon>send</mat-icon></button>
+    <button class="voice-btn" (click)="toggleVoice()" [innerHTML]="voiceIconHtml" aria-label="语音输入"></button>
+    <input id="chatInput" #chatInput type="text" placeholder="请输入您的法律问题..." (input)="onInputChanged(chatInput.value)" (keyup.enter)="sendMessage(chatInput)" />
+    <button class="attach-btn" (click)="attachFile()" aria-label="附件"><i class="fas fa-paperclip"></i></button>
+    <button class="send-btn" [disabled]="sendDisabled" (click)="sendMessage(chatInput)" aria-label="发送"><i class="fas fa-paper-plane"></i></button>
   </div>
 </div>

+ 18 - 1
legal-assistant-app/src/app/pages/consultation/ai-consultation-dialog/ai-consultation-dialog.scss

@@ -63,4 +63,21 @@
   border-radius: 12px;
   width: 40px; height: 40px;
   display: flex; align-items: center; justify-content: center;
-}
+}
+
+.quick-templates {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 6px 0 10px 0;
+}
+.template-item {
+  border: none;
+  border-radius: 12px;
+  padding: 8px 12px;
+  background: #F2F6FB;
+  color: #1A4B8C;
+  font-size: 13px;
+}
+
+.messages { gap: 12px; }

+ 75 - 3
legal-assistant-app/src/app/pages/consultation/ai-consultation-dialog/ai-consultation-dialog.ts

@@ -1,13 +1,85 @@
-import { Component } from '@angular/core';
+import { Component, ElementRef, ViewChild } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MatIconModule } from '@angular/material/icon';
+import { RouterModule } from '@angular/router';
 
 @Component({
   selector: 'app-ai-consultation-dialog',
-  imports: [CommonModule, MatIconModule],
+  imports: [CommonModule, RouterModule],
   templateUrl: './ai-consultation-dialog.html',
   styleUrl: './ai-consultation-dialog.scss'
 })
 export class AiConsultationDialog {
+  @ViewChild('messagesContainer') messagesContainerRef?: ElementRef<HTMLDivElement>;
 
+  chatMessages: { sender: 'user' | 'ai'; text: string }[] = [];
+  sendDisabled = true;
+  voiceEnabled = false;
+  voiceIconHtml = '<i class="fas fa-microphone"></i>';
+
+  // 输入变化,控制发送按钮可用状态
+  onInputChanged(value: string) {
+    this.sendDisabled = !value || !value.trim();
+  }
+
+  // 使用快捷模板
+  useTemplate(template: string, inputEl: HTMLInputElement) {
+    inputEl.value = template;
+    this.onInputChanged(template);
+    inputEl.focus();
+  }
+
+  // 发送消息
+  sendMessage(inputEl: HTMLInputElement) {
+    const text = (inputEl.value || '').trim();
+    if (!text) return;
+
+    this.chatMessages.push({ sender: 'user', text });
+    inputEl.value = '';
+    this.onInputChanged('');
+    this.scrollToBottom();
+
+    // 模拟AI回复
+    this.simulateAiReply(text);
+  }
+
+  // 语音按钮切换
+  toggleVoice() {
+    this.voiceEnabled = !this.voiceEnabled;
+    this.voiceIconHtml = this.voiceEnabled ? '<i class="fas fa-microphone-slash"></i>' : '<i class="fas fa-microphone"></i>';
+    const tip = this.voiceEnabled ? '语音输入已开启(示例)' : '语音输入已关闭';
+    this.chatMessages.push({ sender: 'ai', text: tip });
+    this.scrollToBottom();
+  }
+
+  // 附件按钮占位
+  attachFile() {
+    this.chatMessages.push({ sender: 'ai', text: '附件上传功能即将上线,当前为演示占位。' });
+    this.scrollToBottom();
+  }
+
+  // 模拟AI回复
+  private simulateAiReply(userText: string) {
+    const thinking = '我正在分析您的问题…';
+    this.chatMessages.push({ sender: 'ai', text: thinking });
+    this.scrollToBottom();
+
+    setTimeout(() => {
+      // 替换最后一条“分析中”为具体建议
+      const idx = this.chatMessages.findIndex(m => m.sender === 'ai' && m.text === thinking);
+      if (idx >= 0) {
+        this.chatMessages[idx] = {
+          sender: 'ai',
+          text: `针对您提到的“${userText}”,建议如下:\n1)先收集关键证据与材料;\n2)根据适用法条评估权利义务;\n3)如需提起诉讼,建议先尝试协商或调解。`
+        };
+      }
+      this.scrollToBottom();
+    }, 600);
+  }
+
+  private scrollToBottom() {
+    const el = this.messagesContainerRef?.nativeElement;
+    if (!el) return;
+    setTimeout(() => { el.scrollTop = el.scrollHeight; }, 0);
+  }
 }
+

+ 3 - 16
legal-assistant-app/src/app/pages/consultation/consultation-history/consultation-history.html

@@ -1,17 +1,4 @@
-<div class="history-container">
-  <div class="history-header">
-    <h3>咨询历史</h3>
-    <span class="sub">最近的咨询会话与摘要</span>
-  </div>
-
-  <div class="history-list">
-    <a class="history-card" *ngFor="let item of historyItems" [routerLink]="item.link">
-      <div class="card-title">
-        <mat-icon>history</mat-icon>
-        <h4>{{ item.title }}</h4>
-      </div>
-      <div class="card-meta">{{ item.time }}</div>
-      <div class="card-summary">{{ item.summary }}</div>
-    </a>
-  </div>
+<div class="page-container">
+  <h1>咨询历史</h1>
+  <p>页面内容已清空,路由正常工作</p>
 </div>

+ 3 - 7
legal-assistant-app/src/app/pages/consultation/consultation-history/consultation-history.ts

@@ -1,18 +1,14 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
-import { MatIconModule } from '@angular/material/icon';
 
 @Component({
   selector: 'app-consultation-history',
-  imports: [CommonModule, RouterModule, MatIconModule],
+  imports: [CommonModule, RouterModule],
   templateUrl: './consultation-history.html',
   styleUrl: './consultation-history.scss'
 })
 export class ConsultationHistory {
-  historyItems = [
-    { title: '关于离婚财产分割的咨询', time: '2025-09-20 14:32', summary: 'AI给出分割原则与举证建议', link: '/consultation/ai-dialog' },
-    { title: '劳动合同解除与赔偿', time: '2025-09-18 09:21', summary: 'AI给出仲裁流程与赔偿计算', link: '/consultation/ai-dialog' },
-    { title: '交通事故赔偿计算', time: '2025-09-15 20:05', summary: 'AI给出赔偿项目与标准', link: '/consultation/ai-dialog' }
-  ];
+  constructor() {}
 }
+

+ 16 - 6
legal-assistant-app/src/app/pages/consultation/consultation.html

@@ -1,9 +1,19 @@
-<div class="consultation-container">
-  <div class="consultation-header">
-    <button class="back-btn" routerLink="/home"><mat-icon>arrow_back_ios_new</mat-icon></button>
-    <h1>AI法律咨询</h1>
-    <button class="menu-btn"><mat-icon>more_horiz</mat-icon></button>
+<div class="consult-page">
+  <!-- 顶部导航 -->
+  <div class="top-nav">
+    <div class="nav-title">AI法律咨询</div>
+    <div class="nav-actions">
+      <button class="nav-action" (click)="showConsultHistory()" aria-label="咨询历史">
+        <i class="fas fa-history"></i>
+      </button>
+      <button class="nav-action" (click)="showLawSearch()" aria-label="法条检索">
+        <i class="fas fa-search"></i>
+      </button>
+    </div>
   </div>
 
-  <router-outlet></router-outlet>
+  <!-- 咨询页面容器(子路由呈现对话界面) -->
+  <div class="consult-container">
+    <router-outlet></router-outlet>
+  </div>
 </div>

+ 16 - 22
legal-assistant-app/src/app/pages/consultation/consultation.scss

@@ -1,28 +1,22 @@
-// 咨询主页面头部样式
-.consultation-container {
-  padding: 12px 12px 72px 12px; // 预留底部导航空间
+.consult-page {
+  padding: 8px 12px 72px 12px; /* 预留底部导航 */
 }
 
-.consultation-header {
+.top-nav {
+  position: sticky;
+  top: 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background: #FFFFFF;
-  border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
-  padding: 10px 12px;
-  margin-bottom: 8px;
-
-  h1 {
-    font-size: 18px;
-    margin: 0;
-    color: #1A4B8C;
-  }
+  height: 56px;
+  background: rgba(255,255,255,0.88);
+  backdrop-filter: saturate(180%) blur(16px);
+  border-bottom: 1px solid rgba(0,0,0,0.06);
+  padding: 0 12px;
+  z-index: 10;
+}
+.nav-title { font-size: 18px; font-weight: 600; color: #1A4B8C; }
+.nav-actions { display: flex; gap: 8px; }
+.nav-action { width: 36px; height: 36px; border-radius: 10px; border: none; background: #E8F1FD; color: #1A4B8C; display:flex; align-items:center; justify-content:center; }
 
-  .back-btn, .menu-btn {
-    background: #E8F1FD;
-    border: none;
-    border-radius: 10px;
-    padding: 6px;
-  }
-}
+.consult-container { margin-top: 10px; }

+ 12 - 3
legal-assistant-app/src/app/pages/consultation/consultation.ts

@@ -1,14 +1,23 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
-import { MatIconModule } from '@angular/material/icon';
+import { RouterModule, Router } from '@angular/router';
 
 @Component({
   selector: 'app-consultation',
-  imports: [CommonModule, RouterModule, MatIconModule],
+  imports: [CommonModule, RouterModule],
   templateUrl: './consultation.html',
   styleUrl: './consultation.scss'
 })
 export class Consultation {
+  constructor(private router: Router) {}
 
+  // 顶部右侧操作:咨询历史
+  showConsultHistory() {
+    this.router.navigate(['/consultation/history']);
+  }
+
+  // 顶部右侧操作:法条检索
+  showLawSearch() {
+    this.router.navigate(['/consultation/case-search']);
+  }
 }

+ 3 - 24
legal-assistant-app/src/app/pages/consultation/legal-case-search/legal-case-search.html

@@ -1,25 +1,4 @@
-<div class="case-search-container">
-  <div class="search-bar">
-    <mat-icon>search</mat-icon>
-    <input [(ngModel)]="keyword" type="text" placeholder="请输入关键词或自然语言描述..." />
-    <button class="search-btn">搜索</button>
-  </div>
-
-  <div class="filters">
-    <button class="filter-chip active">全部</button>
-    <button class="filter-chip">地区</button>
-    <button class="filter-chip">时间</button>
-    <button class="filter-chip">类型</button>
-  </div>
-
-  <div class="results">
-    <a class="result-card" routerLink="/consultation/ai-dialog">
-      <h4>交通事故赔偿标准(示例)</h4>
-      <p>裁判要点:根据事故认定书与医疗票据计算赔偿...</p>
-    </a>
-    <a class="result-card" routerLink="/consultation/ai-dialog">
-      <h4>劳动争议仲裁流程(示例)</h4>
-      <p>裁判要点:先仲裁后诉讼,举证责任分配...</p>
-    </a>
-  </div>
+<div class="page-container">
+  <h1>法律案例搜索</h1>
+  <p>页面内容已清空,路由正常工作</p>
 </div>

+ 3 - 4
legal-assistant-app/src/app/pages/consultation/legal-case-search/legal-case-search.ts

@@ -1,15 +1,14 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
-import { MatIconModule } from '@angular/material/icon';
-import { FormsModule } from '@angular/forms';
 
 @Component({
   selector: 'app-legal-case-search',
-  imports: [CommonModule, RouterModule, MatIconModule, FormsModule],
+  imports: [CommonModule, RouterModule],
   templateUrl: './legal-case-search.html',
   styleUrl: './legal-case-search.scss'
 })
 export class LegalCaseSearch {
-  keyword: string = '';
+  constructor() {}
 }
+

+ 158 - 221
legal-assistant-app/src/app/pages/home/home.html

@@ -1,247 +1,184 @@
-<!-- 状态栏 -->
-<div class="status-bar"></div>
+<!-- 顶部导航 -->
+<div class="top-nav">
+  <div class="logo">律助App</div>
+  <div class="nav-icons">
+    <div class="nav-icon" (click)="onNotificationClick()">
+      <i class="far fa-bell"></i>
+      <div class="notification-badge" *ngIf="notificationCount > 0">{{notificationCount}}</div>
+    </div>
+    <div class="nav-icon" (click)="onMessageClick()">
+      <i class="far fa-envelope"></i>
+      <div class="notification-badge" *ngIf="messageCount > 0">{{messageCount}}</div>
+    </div>
+  </div>
+</div>
 
-<!-- 主内容区域 -->
-<div class="home-container">
-  <!-- 导航栏 -->
-  <header class="nav-bar">
-    <div class="nav-content">
-      <div class="nav-left">
-        <img
-          alt="律助App Logo"
-          class="app-logo"
-          src="assets/images/logo.png"
-        />
-        <span class="app-title">律助</span>
-      </div>
-      <div class="nav-right">
-        <button class="notification-btn" (click)="onNotificationClick()">
-          <mat-icon>notifications</mat-icon>
-          <span class="notification-dot"></span>
-        </button>
+<!-- 搜索栏 -->
+<div class="search-bar">
+  <div class="search-container">
+    <div class="search-input">
+      <i class="fas fa-search"></i>
+      <input 
+        type="text" 
+        #searchInput
+        placeholder="输入法律问题或语音咨询..."
+        (keyup.enter)="onSearch(searchInput.value)"
+      >
+      <div class="voice-btn" (click)="onVoiceSearch()">
+        <i class="fas fa-microphone"></i>
       </div>
     </div>
-  </header>
+  </div>
+</div>
 
-  <!-- 搜索栏 -->
-  <div class="search-section">
-    <div class="search-container">
-      <input
-        class="search-input"
-        placeholder="搜索法律问题、法条或案例..."
-        type="text"
-        [(ngModel)]="searchQuery"
-        (keyup.enter)="onSearch()"
-      />
-      <mat-icon class="search-icon">search</mat-icon>
-      <button class="voice-search-btn" (click)="onVoiceSearch()">
-        <mat-icon>mic</mat-icon>
-      </button>
-    </div>
+<!-- 消息通知 -->
+<div class="notification-bar" (click)="onNotificationBarClick()" *ngIf="hasNotifications">
+  <div class="notification-icon">
+    <i class="fas fa-bell"></i>
   </div>
+  <div class="notification-text">
+    {{notificationText}}
+  </div>
+</div>
 
-  <!-- 智能状态区 -->
-  <div class="smart-status-section">
-    <div class="status-card">
-      <!-- 个性化问候 -->
-      <div class="greeting-section">
-        <div class="greeting-content">
-          <h2 class="greeting-title">早上好,李律师</h2>
-          <p class="greeting-subtitle">今天有 2 个案件需要跟进</p>
-        </div>
-        <div class="user-avatar">
-          <img
-            alt="用户头像"
-            src="assets/images/avatar.png"
-          />
-        </div>
+<!-- 智能状态区 -->
+<div class="status-card">
+  <div class="greeting">
+      <h3>{{greeting}},{{user.name}}!</h3>
+      <p>{{currentTime}},祝您一切顺利</p>
+    </div>
+  
+  <div class="case-progress" *ngIf="caseProgress.length > 0">
+    <div class="progress-item" *ngFor="let case of caseProgress">
+      <div class="case-title">
+        <span>{{case.title}}</span>
+        <span>{{case.progress}}%</span>
       </div>
-
-      <!-- 最近案件进度 -->
-      <div class="progress-section">
-        <div class="progress-header">
-          <h3 class="progress-title">合同纠纷案件</h3>
-          <span class="progress-percentage">65%</span>
-        </div>
-        <div class="progress-bar-container">
-          <div class="progress-bar" [style.width.%]="65"></div>
-        </div>
-        <div class="progress-labels">
-          <span>证据收集</span>
-          <span>庭审准备</span>
-        </div>
+      <div class="progress-bar">
+        <div class="progress-fill" [style.width.%]="case.progress"></div>
       </div>
+    </div>
+  </div>
+  
+  <div class="todo-reminder" *ngIf="todoReminder" (click)="onTodoClick()">
+    <div class="todo-icon">
+      <i class="fas fa-clock"></i>
+    </div>
+    <div class="todo-text">
+      {{todoReminder}}
+    </div>
+  </div>
+</div>
 
-      <!-- 待办提醒 -->
-      <div class="todo-section">
-        <div class="todo-item">
-          <div class="todo-icon">
-            <mat-icon>priority_high</mat-icon>
-          </div>
-          <div class="todo-content">
-            <p class="todo-title">提交证据材料</p>
-            <p class="todo-time">今天 18:00 截止</p>
-          </div>
-          <button class="todo-action-btn" (click)="onTodoAction()">处理</button>
-        </div>
-      </div>
+<!-- 核心功能入口 -->
+<div class="section-title">
+  <h2>核心功能</h2>
+</div>
+
+<div class="function-grid">
+  <div class="function-item" (click)="navigateToFunction('consultation')">
+    <div class="function-icon">
+      <img src="assets/icons/consultation.svg" alt="AI法律咨询">
+    </div>
+    <div class="function-name">AI法律咨询</div>
+  </div>
+  <div class="function-item" (click)="navigateToFunction('tools/document-generator')">
+    <div class="function-icon">
+      <img src="assets/icons/legal-tools.svg" alt="文书生成">
+    </div>
+    <div class="function-name">文书生成</div>
+  </div>
+  <div class="function-item" (click)="navigateToFunction('consultation/case-search')">
+    <div class="function-icon">
+      <img src="assets/icons/legal-knowledge.svg" alt="法条检索">
+    </div>
+    <div class="function-name">法条检索</div>
+  </div>
+  <div class="function-item" (click)="navigateToFunction('cases')">
+    <div class="function-icon">
+      <img src="assets/icons/case-management.svg" alt="案件管理">
+    </div>
+    <div class="function-name">案件管理</div>
+  </div>
+  <div class="function-item" (click)="navigateToFunction('services/lawyer-connection')">
+    <div class="function-icon">
+      <img src="assets/icons/legal-aid.svg" alt="找律师">
     </div>
+    <div class="function-name">找律师</div>
   </div>
+  <div class="function-item" (click)="navigateToFunction('learning')">
+    <div class="function-icon">
+      <img src="assets/icons/mediation.svg" alt="学习中心">
+    </div>
+    <div class="function-name">学习中心</div>
+  </div>
+</div>
 
-  <!-- 核心功能入口 -->
-  <div class="function-section">
-    <h2 class="section-title">法律服务</h2>
-    <div class="function-grid">
-      <div class="function-card" (click)="navigateTo('/consultation')">
-        <div class="function-icon">
-          <mat-icon>chat</mat-icon>
-        </div>
-        <span class="function-label">AI法律咨询</span>
-      </div>
-      
-      <div class="function-card" (click)="navigateTo('/tools/document-generator')">
-        <div class="function-icon">
-          <mat-icon>description</mat-icon>
-        </div>
-        <span class="function-label">文书生成工具</span>
-      </div>
-      
-      <div class="function-card" (click)="navigateTo('/tools/case-search')">
-        <div class="function-icon">
-          <mat-icon>search</mat-icon>
-        </div>
-        <span class="function-label">法条案例检索</span>
-      </div>
-      
-      <div class="function-card" (click)="navigateTo('/cases')">
-        <div class="function-icon">
-          <mat-icon>work</mat-icon>
-        </div>
-        <span class="function-label">我的案件管理</span>
-      </div>
-      
-      <div class="function-card" (click)="navigateTo('/services/lawyer-connection')">
-        <div class="function-icon">
-          <mat-icon>person</mat-icon>
-        </div>
-        <span class="function-label">找律师服务</span>
-      </div>
-      
-      <div class="function-card" (click)="navigateTo('/learning')">
-        <div class="function-icon">
-          <mat-icon>school</mat-icon>
+<!-- 动态内容区 -->
+<div class="dynamic-content">
+  <!-- 热点法律问题 -->
+  <div class="content-section">
+    <div class="section-header">
+      <h3>热点法律问题</h3>
+      <a class="more-link" (click)="viewMoreIssues()">
+        更多 <i class="fas fa-chevron-right"></i>
+      </a>
+    </div>
+    <div class="hot-questions">
+      <div class="question-item" *ngFor="let issue of hotLegalIssues" (click)="viewIssueDetail(issue)">
+        <div class="tag">{{issue.category}}</div>
+        <p>{{issue.title}}</p>
+        <div class="views">
+          <i class="far fa-eye"></i> {{issue.views}}
         </div>
-        <span class="function-label">法律学习中心</span>
       </div>
     </div>
   </div>
-
-  <!-- 动态内容区 -->
+  
+  <!-- 普法短视频 -->
   <div class="content-section">
-    <!-- 热点法律问题 -->
-    <div class="hot-issues-section">
-      <div class="section-header">
-        <h2 class="section-title">热点法律问题</h2>
-        <a class="more-link" (click)="viewMore('hot-issues')">更多</a>
-      </div>
-      <div class="horizontal-scroll">
-        @for (issue of hotIssues; track issue.id) {
-          <div class="issue-card" (click)="viewIssueDetail(issue.id)">
-            <div class="issue-content">
-              <div class="issue-icon">
-                <mat-icon>{{ issue.icon }}</mat-icon>
-              </div>
-              <div class="issue-info">
-                <h3 class="issue-title">{{ issue.title }}</h3>
-                <div class="issue-meta">
-                  <span>{{ issue.category }}</span>
-                  <span class="separator">•</span>
-                  <span>{{ issue.views }} 人查看</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        }
-      </div>
+    <div class="section-header">
+      <h3>普法短视频</h3>
+      <a class="more-link" (click)="viewMoreVideos()">
+        更多 <i class="fas fa-chevron-right"></i>
+      </a>
     </div>
-
-    <!-- 普法短视频 -->
-    <div class="video-section">
-      <div class="section-header">
-        <h2 class="section-title">普法短视频</h2>
-        <a class="more-link" (click)="viewMore('videos')">更多</a>
-      </div>
-      <div class="video-grid">
-        @for (video of legalVideos; track video.id) {
-          <div class="video-card" (click)="playVideo(video.id)">
-            <div class="video-thumbnail">
-              <img [src]="video.thumbnail" [alt]="video.title" />
-              <div class="play-overlay">
-                <div class="play-button">
-                  <mat-icon>play_arrow</mat-icon>
-                </div>
-              </div>
-              <div class="video-duration">{{ video.duration }}</div>
-            </div>
-            <div class="video-info">
-              <h3 class="video-title">{{ video.title }}</h3>
-              <div class="video-meta">
-                <mat-icon class="view-icon">visibility</mat-icon>
-                <span>{{ video.views }} 观看</span>
-              </div>
-            </div>
+    <div class="video-grid">
+      <div class="video-item" *ngFor="let video of legalVideos" (click)="playVideo(video)">
+        <div class="video-thumbnail">
+          <img [src]="video.thumbnail" [alt]="video.title">
+          <div class="play-overlay">
+            <i class="fas fa-play-circle"></i>
           </div>
-        }
+        </div>
+        <div class="video-title">{{video.title}}</div>
       </div>
     </div>
-
-    <!-- 附近服务机构 -->
-    <div class="nearby-services-section">
-      <div class="section-header">
-        <h2 class="section-title">附近服务机构</h2>
-        <a class="more-link" (click)="viewMore('services')">更多</a>
-      </div>
-      <div class="services-card">
-        @for (service of nearbyServices; track service.id; let last = $last) {
-          <div class="service-item" [class.no-border]="last">
-            <img [src]="service.image" [alt]="service.name" class="service-image" />
-            <div class="service-info">
-              <h3 class="service-name">{{ service.name }}</h3>
-              <div class="service-location">
-                <mat-icon class="location-icon">place</mat-icon>
-                <span>距离 {{ service.distance }} 公里</span>
-              </div>
-              <div class="service-rating">
-                <div class="stars">
-                  @for (star of service.stars; track $index) {
-                    <mat-icon [class]="star.class">{{ star.icon }}</mat-icon>
-                  }
-                </div>
-                <span class="rating-text">{{ service.rating }} ({{ service.reviews }} 评价)</span>
-              </div>
-            </div>
-            <button class="service-action-btn" (click)="contactService(service.id)">
-              {{ service.actionText }}
-            </button>
-          </div>
-        }
-        
-        <!-- 空状态 -->
-        @if (nearbyServices.length === 0) {
-          <div class="empty-state">
-            <mat-icon class="empty-icon">location_off</mat-icon>
-            <p class="empty-text">暂无附近服务机构</p>
-            <p class="empty-subtitle">请检查位置权限或稍后重试</p>
-          </div>
-        }
+  </div>
+  
+  <!-- 附近服务机构 -->
+  <div class="content-section">
+    <div class="section-header">
+      <h3>附近服务机构</h3>
+      <a class="more-link" (click)="viewMoreServices()">
+        更多 <i class="fas fa-chevron-right"></i>
+      </a>
+    </div>
+    <div class="service-list">
+      <div class="service-item" *ngFor="let service of nearbyServices" (click)="contactService(service)">
+        <div class="service-icon">
+          <i [class]="service.icon"></i>
+        </div>
+        <div class="service-info">
+          <div class="service-name">{{service.name}}</div>
+          <div class="service-distance">距离 {{service.distance}}</div>
+        </div>
       </div>
     </div>
   </div>
+</div>
 
-  <!-- 语音咨询悬浮按钮 -->
-  <div class="voice-fab">
-    <button class="voice-button" (click)="onVoiceConsultation()">
-      <mat-icon>mic</mat-icon>
-    </button>
-  </div>
+<!-- 全局悬浮按钮 -->
+<div class="floating-btn" (click)="onVoiceConsultation()">
+  <i class="fas fa-microphone"></i>
 </div>

+ 463 - 713
legal-assistant-app/src/app/pages/home/home.scss

@@ -1,794 +1,544 @@
-// iOS风格首页样式
-.home-container {
-  min-height: 100vh;
-  background: linear-gradient(180deg, #F8FBFF 0%, #FFFFFF 100%);
+/* 全局样式 */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  color: #1D2129;
-  padding-bottom: 100px; // 为底部导航留空间
+  background-color: #f5f5f5;
+  color: #333;
+  line-height: 1.6;
 }
 
-// 状态栏
-.status-bar {
-  height: 24px;
-  background: transparent;
-  width: 100%;
+/* 顶部导航 */
+.top-nav {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  padding: 15px 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
 }
 
-// 导航栏
-.nav-bar {
-  background: white;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-  padding: 12px 16px;
-  position: fixed;
-  top: 24px;
-  left: 0;
+.logo {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.nav-icons {
+  display: flex;
+  gap: 15px;
+}
+
+.nav-icon {
+  position: relative;
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 50%;
+  transition: background-color 0.3s;
+}
+
+.nav-icon:hover {
+  background-color: rgba(255,255,255,0.2);
+}
+
+.nav-icon i {
+  font-size: 18px;
+}
+
+.notification-badge {
+  position: absolute;
+  top: 0;
   right: 0;
-  z-index: 30;
-  border-radius: 0 0 16px 16px;
+  background: #ff4757;
+  color: white;
+  border-radius: 50%;
+  width: 18px;
+  height: 18px;
+  font-size: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+}
 
-  .nav-content {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
+/* 搜索栏 */
+.search-bar {
+  padding: 15px 20px;
+  background: white;
+}
 
-  .nav-left {
-    display: flex;
-    align-items: center;
+.search-container {
+  position: relative;
+}
 
-    .app-logo {
-      width: 40px;
-      height: 40px;
-      border-radius: 8px;
-      object-fit: cover;
-    }
+.search-input {
+  display: flex;
+  align-items: center;
+  background: #f8f9fa;
+  border-radius: 25px;
+  padding: 12px 20px;
+  border: 1px solid #e9ecef;
+}
 
-    .app-title {
-      margin-left: 8px;
-      font-size: 20px;
-      font-weight: 700;
-      color: #165DFF;
-    }
-  }
+.search-input i.fa-search {
+  color: #6c757d;
+  margin-right: 10px;
+}
 
-  .nav-right {
-    .notification-btn {
-      width: 40px;
-      height: 40px;
-      border-radius: 50%;
-      border: none;
-      background: transparent;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      position: relative;
-      transition: background-color 0.2s ease;
-
-      &:hover {
-        background-color: #F5F5F5;
-      }
-
-      mat-icon {
-        color: #4E5969;
-      }
-
-      .notification-dot {
-        position: absolute;
-        top: 0;
-        right: 0;
-        width: 12px;
-        height: 12px;
-        background: #FF4D4F;
-        border-radius: 50%;
-        border: 2px solid white;
-      }
-    }
-  }
+.search-input input {
+  flex: 1;
+  border: none;
+  background: none;
+  outline: none;
+  font-size: 16px;
+  color: #333;
 }
 
-// 搜索栏
-.search-section {
-  padding: 80px 16px 16px;
+.search-input input::placeholder {
+  color: #6c757d;
+}
 
-  .search-container {
-    position: relative;
+.voice-btn {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border-radius: 50%;
+  width: 35px;
+  height: 35px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  margin-left: 10px;
+  transition: transform 0.2s;
+}
 
-    .search-input {
-      width: 100%;
-      padding: 12px 16px 12px 48px;
-      border-radius: 12px;
-      border: none;
-      background: white;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-      font-size: 16px;
-      outline: none;
-      transition: all 0.3s ease;
+.voice-btn:hover {
+  transform: scale(1.1);
+}
 
-      &:focus {
-        box-shadow: 0 4px 12px rgba(22, 93, 255, 0.15);
-        transform: translateY(-1px);
-      }
+/* 消息通知栏 */
+.notification-bar {
+  background: linear-gradient(90deg, #ffecd2 0%, #fcb69f 100%);
+  padding: 12px 20px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  border-left: 4px solid #ff6b6b;
+}
 
-      &::placeholder {
-        color: #86909C;
-      }
-    }
+.notification-icon {
+  margin-right: 10px;
+  color: #ff6b6b;
+}
 
-    .search-icon {
-      position: absolute;
-      left: 16px;
-      top: 50%;
-      transform: translateY(-50%);
-      color: #86909C;
-    }
+.notification-text {
+  flex: 1;
+  font-size: 14px;
+  color: #333;
+}
 
-    .voice-search-btn {
-      position: absolute;
-      right: 16px;
-      top: 50%;
-      transform: translateY(-50%);
-      width: 32px;
-      height: 32px;
-      border-radius: 50%;
-      border: none;
-      background: rgba(22, 93, 255, 0.1);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: all 0.2s ease;
-
-      &:hover {
-        background: rgba(22, 93, 255, 0.2);
-      }
-
-      mat-icon {
-        color: #165DFF;
-        font-size: 18px;
-      }
-    }
-  }
+/* 智能状态区 */
+.status-card {
+  background: white;
+  margin: 15px 20px;
+  padding: 20px;
+  border-radius: 15px;
+  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
 }
 
-// 智能状态区
-.smart-status-section {
-  padding: 0 16px 24px;
+.greeting h3 {
+  font-size: 18px;
+  color: #333;
+  margin-bottom: 5px;
+}
 
-  .status-card {
-    background: white;
-    border-radius: 16px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-    padding: 20px;
-    transition: all 0.3s ease;
-
-    &:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
-    }
-  }
+.greeting p {
+  color: #666;
+  font-size: 14px;
+  margin-bottom: 15px;
+}
 
-  .greeting-section {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 16px;
-
-    .greeting-content {
-      .greeting-title {
-        font-size: 18px;
-        font-weight: 600;
-        margin: 0 0 4px 0;
-      }
-
-      .greeting-subtitle {
-        font-size: 14px;
-        color: #86909C;
-        margin: 0;
-      }
-    }
+.case-progress {
+  margin: 15px 0;
+}
 
-    .user-avatar {
-      width: 48px;
-      height: 48px;
-      border-radius: 50%;
-      overflow: hidden;
-
-      img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-    }
-  }
+.progress-item {
+  margin-bottom: 15px;
+}
 
-  .progress-section {
-    margin-bottom: 20px;
-
-    .progress-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 8px;
-
-      .progress-title {
-        font-size: 16px;
-        font-weight: 500;
-        margin: 0;
-      }
-
-      .progress-percentage {
-        color: #165DFF;
-        font-size: 14px;
-        font-weight: 600;
-      }
-    }
+.case-title {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  font-size: 14px;
+  color: #333;
+}
 
-    .progress-bar-container {
-      width: 100%;
-      height: 8px;
-      background: #F5F5F5;
-      border-radius: 4px;
-      overflow: hidden;
-      margin-bottom: 4px;
-
-      .progress-bar {
-        height: 100%;
-        background: #165DFF;
-        border-radius: 4px;
-        transition: width 0.3s ease;
-      }
-    }
+.progress-bar {
+  background: #e9ecef;
+  height: 6px;
+  border-radius: 3px;
+  overflow: hidden;
+}
 
-    .progress-labels {
-      display: flex;
-      justify-content: space-between;
-      font-size: 12px;
-      color: #86909C;
-    }
-  }
+.progress-fill {
+  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+  height: 100%;
+  border-radius: 3px;
+  transition: width 0.3s ease;
+}
 
-  .todo-section {
-    .todo-item {
-      display: flex;
-      align-items: center;
-      padding: 12px;
-      background: #F8F9FA;
-      border-radius: 12px;
-
-      .todo-icon {
-        width: 24px;
-        height: 24px;
-        border-radius: 50%;
-        background: rgba(22, 93, 255, 0.1);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin-right: 12px;
-
-        mat-icon {
-          color: #165DFF;
-          font-size: 12px;
-        }
-      }
-
-      .todo-content {
-        flex: 1;
-
-        .todo-title {
-          font-size: 14px;
-          font-weight: 500;
-          margin: 0 0 2px 0;
-        }
-
-        .todo-time {
-          font-size: 12px;
-          color: #86909C;
-          margin: 0;
-        }
-      }
-
-      .todo-action-btn {
-        color: #165DFF;
-        font-size: 14px;
-        font-weight: 500;
-        border: none;
-        background: transparent;
-        cursor: pointer;
-        transition: color 0.2s ease;
-
-        &:hover {
-          color: #4080FF;
-        }
-      }
-    }
-  }
+.todo-reminder {
+  background: #f8f9fa;
+  padding: 12px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  border-left: 4px solid #28a745;
 }
 
-// 核心功能入口
-.function-section {
-  padding: 0 16px 32px;
+.todo-icon {
+  margin-right: 10px;
+  color: #28a745;
+}
 
-  .section-title {
-    font-size: 18px;
-    font-weight: 700;
-    margin: 0 0 16px 0;
-  }
+.todo-text {
+  flex: 1;
+  font-size: 14px;
+  color: #333;
+}
 
-  .function-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 16px;
-
-    .function-card {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      padding: 16px;
-      background: white;
-      border-radius: 12px;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-      cursor: pointer;
-      transition: all 0.3s ease;
+/* 区块标题 */
+.section-title {
+  padding: 20px 20px 10px;
+}
 
-      &:hover {
-        transform: translateY(-4px);
-        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
-      }
-
-      .function-icon {
-        width: 48px;
-        height: 48px;
-        border-radius: 50%;
-        background: rgba(22, 93, 255, 0.1);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin-bottom: 12px;
-
-        mat-icon {
-          color: #165DFF;
-          font-size: 20px;
-        }
-      }
-
-      .function-label {
-        font-size: 14px;
-        font-weight: 500;
-        text-align: center;
-        line-height: 1.2;
-      }
-    }
+.section-title h2 {
+  font-size: 18px;
+  color: #333;
+  font-weight: 600;
+}
+
+/* 功能网格 */
+.function-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 15px;
+  padding: 0 20px 20px;
+}
+
+.function-item {
+  background: white;
+  padding: 20px 10px;
+  border-radius: 15px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+}
+
+.function-item:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
+}
+
+.function-icon {
+  width: 48px;
+  height: 48px;
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
   }
+  
+  i {
+    font-size: 24px;
+    color: #4A90E2;
+  }
+}
+
+.function-name {
+  font-size: 12px;
+  color: #333;
+  font-weight: 500;
+}
+
+/* 动态内容区 */
+.dynamic-content {
+  padding: 0 20px;
 }
 
-// 动态内容区
 .content-section {
-  padding: 0 16px 24px;
+  background: white;
+  margin-bottom: 20px;
+  border-radius: 15px;
+  overflow: hidden;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+}
 
-  .section-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 16px;
+.section-header {
+  padding: 15px 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #f0f0f0;
+}
 
-    .section-title {
-      font-size: 18px;
-      font-weight: 700;
-      margin: 0;
-    }
+.section-header h3 {
+  font-size: 16px;
+  color: #333;
+  font-weight: 600;
+}
 
-    .more-link {
-      color: #165DFF;
-      font-size: 14px;
-      font-weight: 500;
-      text-decoration: none;
-      cursor: pointer;
-      transition: color 0.2s ease;
-
-      &:hover {
-        color: #4080FF;
-      }
-    }
-  }
+.more-link {
+  color: #667eea;
+  font-size: 14px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 5px;
 }
 
-// 热点法律问题
-.hot-issues-section {
-  margin-bottom: 32px;
+.more-link:hover {
+  color: #764ba2;
+}
 
-  .horizontal-scroll {
-    display: flex;
-    overflow-x: auto;
-    gap: 16px;
-    padding-bottom: 16px;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
+/* 热点问题 */
+.hot-questions {
+  padding: 0 20px 20px;
+}
 
-    .issue-card {
-      min-width: 280px;
-      background: white;
-      border-radius: 12px;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-      padding: 16px;
-      cursor: pointer;
-      transition: all 0.3s ease;
+.question-item {
+  padding: 15px 0;
+  border-bottom: 1px solid #f0f0f0;
+  cursor: pointer;
+}
 
-      &:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
-      }
-
-      .issue-content {
-        display: flex;
-        align-items: flex-start;
-
-        .issue-icon {
-          width: 40px;
-          height: 40px;
-          border-radius: 50%;
-          background: rgba(22, 93, 255, 0.1);
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          margin-right: 12px;
-          flex-shrink: 0;
-
-          mat-icon {
-            color: #165DFF;
-          }
-        }
-
-        .issue-info {
-          .issue-title {
-            font-size: 14px;
-            font-weight: 500;
-            margin: 0 0 4px 0;
-            line-height: 1.3;
-          }
-
-          .issue-meta {
-            display: flex;
-            align-items: center;
-            font-size: 12px;
-            color: #86909C;
-
-            .separator {
-              margin: 0 8px;
-            }
-          }
-        }
-      }
-    }
-  }
+.question-item:last-child {
+  border-bottom: none;
 }
 
-// 普法短视频
-.video-section {
-  margin-bottom: 32px;
+.question-item .tag {
+  background: #e3f2fd;
+  color: #1976d2;
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  display: inline-block;
+  margin-bottom: 8px;
+}
 
-  .video-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 16px;
-
-    .video-card {
-      background: white;
-      border-radius: 12px;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-      overflow: hidden;
-      cursor: pointer;
-      transition: all 0.3s ease;
+.question-item p {
+  font-size: 14px;
+  color: #333;
+  margin-bottom: 8px;
+  line-height: 1.5;
+}
 
-      &:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
-      }
-
-      .video-thumbnail {
-        position: relative;
-        aspect-ratio: 16/9;
-
-        img {
-          width: 100%;
-          height: 100%;
-          object-fit: cover;
-        }
-
-        .play-overlay {
-          position: absolute;
-          inset: 0;
-          background: rgba(0, 0, 0, 0.3);
-          display: flex;
-          align-items: center;
-          justify-content: center;
-
-          .play-button {
-            width: 48px;
-            height: 48px;
-            border-radius: 50%;
-            background: rgba(255, 255, 255, 0.2);
-            backdrop-filter: blur(4px);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-
-            mat-icon {
-              color: white;
-              font-size: 24px;
-            }
-          }
-        }
-
-        .video-duration {
-          position: absolute;
-          bottom: 8px;
-          right: 8px;
-          background: rgba(0, 0, 0, 0.6);
-          color: white;
-          font-size: 12px;
-          padding: 4px 8px;
-          border-radius: 4px;
-        }
-      }
-
-      .video-info {
-        padding: 12px;
-
-        .video-title {
-          font-size: 14px;
-          font-weight: 500;
-          margin: 0 0 8px 0;
-          line-height: 1.3;
-          display: -webkit-box;
-          -webkit-line-clamp: 2;
-          line-clamp: 2;
-          -webkit-box-orient: vertical;
-          overflow: hidden;
-        }
-
-        .video-meta {
-          display: flex;
-          align-items: center;
-          font-size: 12px;
-          color: #86909C;
-
-          .view-icon {
-            font-size: 14px;
-            margin-right: 4px;
-          }
-        }
-      }
-    }
-  }
+.question-item .views {
+  font-size: 12px;
+  color: #666;
+  display: flex;
+  align-items: center;
+  gap: 5px;
 }
 
-// 附近服务机构
-.nearby-services-section {
-  .services-card {
-    background: white;
-    border-radius: 12px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-    padding: 16px;
-
-    .service-item {
-      display: flex;
-      align-items: flex-start;
-      padding-bottom: 16px;
-      margin-bottom: 16px;
-      border-bottom: 1px solid #F0F0F0;
-
-      &.no-border {
-        border-bottom: none;
-        margin-bottom: 0;
-        padding-bottom: 0;
-      }
-
-      .service-image {
-        width: 64px;
-        height: 64px;
-        border-radius: 8px;
-        object-fit: cover;
-        margin-right: 16px;
-      }
-
-      .service-info {
-        flex: 1;
-
-        .service-name {
-          font-size: 16px;
-          font-weight: 500;
-          margin: 0 0 4px 0;
-        }
-
-        .service-location {
-          display: flex;
-          align-items: center;
-          font-size: 12px;
-          color: #86909C;
-          margin-bottom: 4px;
-
-          .location-icon {
-            font-size: 14px;
-            margin-right: 4px;
-          }
-        }
-
-        .service-rating {
-          display: flex;
-          align-items: center;
-
-          .stars {
-            display: flex;
-            margin-right: 4px;
-
-            mat-icon {
-              font-size: 12px;
-              color: #FFD700;
-
-              &.half {
-                color: #FFD700;
-              }
-
-              &.empty {
-                color: #E0E0E0;
-              }
-            }
-          }
-
-          .rating-text {
-            font-size: 12px;
-            color: #86909C;
-          }
-        }
-      }
-
-      .service-action-btn {
-        padding: 6px 12px;
-        background: #165DFF;
-        color: white;
-        border: none;
-        border-radius: 6px;
-        font-size: 14px;
-        cursor: pointer;
-        transition: background-color 0.2s ease;
-
-        &:hover {
-          background: #4080FF;
-        }
-      }
-    }
+/* 视频网格 */
+.video-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 15px;
+  padding: 15px 20px 20px;
+}
 
-    .empty-state {
-      text-align: center;
-      padding: 40px 20px;
-
-      .empty-icon {
-        font-size: 48px;
-        color: #C9CDD4;
-        margin-bottom: 16px;
-      }
-
-      .empty-text {
-        font-size: 16px;
-        font-weight: 500;
-        margin: 0 0 8px 0;
-      }
-
-      .empty-subtitle {
-        font-size: 14px;
-        color: #86909C;
-        margin: 0;
-      }
-    }
-  }
+.video-item {
+  cursor: pointer;
+  transition: transform 0.2s;
 }
 
-// 语音悬浮按钮
-.voice-fab {
-  position: fixed;
-  bottom: 24px;
-  right: 24px;
-  z-index: 40;
-
-  .voice-button {
-    width: 64px;
-    height: 64px;
-    border-radius: 50%;
-    border: none;
-    background: radial-gradient(circle at center, #165DFF 0%, #4080FF 100%);
-    color: white;
+.video-item:hover {
+  transform: scale(1.05);
+}
+
+.video-thumbnail {
+  position: relative;
+  width: 100%;
+  height: 90px;
+  border-radius: 8px;
+  overflow: hidden;
+  margin-bottom: 8px;
+  
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  
+  .play-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
     display: flex;
     align-items: center;
     justify-content: center;
-    box-shadow: 0 8px 24px rgba(22, 93, 255, 0.3);
-    cursor: pointer;
-    animation: pulse 2s infinite, float 3s ease-in-out infinite;
-
-    mat-icon {
-      font-size: 20px;
+    background: rgba(0, 0, 0, 0.3);
+    
+    i {
+      font-size: 32px;
+      color: white;
+      opacity: 0.9;
+    }
+  }
+  
+  &:hover .play-overlay {
+    background: rgba(0, 0, 0, 0.5);
+    
+    i {
+      opacity: 1;
+      transform: scale(1.1);
+      transition: all 0.3s ease;
     }
   }
 }
 
-// 动画效果
-@keyframes pulse {
-  0% {
-    box-shadow: 0 8px 24px rgba(22, 93, 255, 0.3), 0 0 0 0 rgba(22, 93, 255, 0.4);
-  }
-  70% {
-    box-shadow: 0 8px 24px rgba(22, 93, 255, 0.3), 0 0 0 15px rgba(22, 93, 255, 0);
-  }
-  100% {
-    box-shadow: 0 8px 24px rgba(22, 93, 255, 0.3), 0 0 0 0 rgba(22, 93, 255, 0);
-  }
+.video-title {
+  font-size: 12px;
+  color: #333;
+  text-align: center;
+  line-height: 1.4;
 }
 
-@keyframes float {
-  0% {
-    transform: translateY(0px);
-  }
-  50% {
-    transform: translateY(-5px);
-  }
-  100% {
-    transform: translateY(0px);
-  }
+/* 服务列表 */
+.service-list {
+  padding: 15px 20px 20px;
 }
 
-// 骨架屏动画
-.skeleton {
-  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
-  background-size: 200% 100%;
-  animation: skeleton-loading 1.5s infinite;
+.service-item {
+  display: flex;
+  align-items: center;
+  padding: 15px 0;
+  border-bottom: 1px solid #f0f0f0;
+  cursor: pointer;
 }
 
-@keyframes skeleton-loading {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
+.service-item:last-child {
+  border-bottom: none;
+}
+
+.service-icon {
+  width: 40px;
+  height: 40px;
+  background: #f8f9fa;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 15px;
+  color: #667eea;
+  font-size: 18px;
+}
+
+.service-info {
+  flex: 1;
+}
+
+.service-name {
+  font-size: 14px;
+  color: #333;
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+.service-distance {
+  font-size: 12px;
+  color: #666;
+}
+
+/* 悬浮按钮 */
+.floating-btn {
+  position: fixed;
+  bottom: 80px;
+  right: 20px;
+  width: 60px;
+  height: 60px;
+  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 24px;
+  cursor: pointer;
+  box-shadow: 0 4px 20px rgba(255, 107, 107, 0.4);
+  z-index: 1000;
+  transition: all 0.3s ease;
 }
 
-// 响应式设计
-@media (max-width: 768px) {
+.floating-btn:hover {
+  transform: scale(1.1);
+  box-shadow: 0 6px 25px rgba(255, 107, 107, 0.6);
+}
+
+/* 响应式设计 */
+@media (max-width: 480px) {
   .function-grid {
-    grid-template-columns: repeat(3, 1fr);
-    gap: 12px;
+    grid-template-columns: repeat(2, 1fr);
   }
-
+  
   .video-grid {
     grid-template-columns: 1fr;
   }
-
-  .horizontal-scroll .issue-card {
-    min-width: 260px;
+  
+  .function-item {
+    padding: 15px 8px;
+  }
+  
+  .function-icon {
+    width: 40px;
+    height: 40px;
+    font-size: 18px;
+  }
+  
+  .function-name {
+    font-size: 11px;
   }
 }
 
-@media (max-width: 480px) {
-  .search-section {
-    padding: 80px 12px 16px;
+@media (max-width: 360px) {
+  .top-nav {
+    padding: 12px 15px;
   }
-
-  .smart-status-section,
-  .function-section,
-  .content-section {
-    padding-left: 12px;
-    padding-right: 12px;
+  
+  .search-bar {
+    padding: 12px 15px;
   }
-
-  .voice-fab {
-    bottom: 20px;
-    right: 20px;
-
-    .voice-button {
-      width: 56px;
-      height: 56px;
-    }
+  
+  .status-card {
+    margin: 12px 15px;
+    padding: 15px;
+  }
+  
+  .function-grid {
+    padding: 0 15px 15px;
+    gap: 12px;
+  }
+  
+  .dynamic-content {
+    padding: 0 15px;
   }
 }

+ 187 - 179
legal-assistant-app/src/app/pages/home/home.ts

@@ -1,251 +1,259 @@
 import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule, Router } from '@angular/router';
-import { MatIconModule } from '@angular/material/icon';
-import { MatButtonModule } from '@angular/material/button';
-import { FormsModule } from '@angular/forms';
+
+interface CaseProgress {
+  id: number;
+  title: string;
+  progress: number;
+  status: string;
+}
+
+interface TodoReminder {
+  id: number;
+  title: string;
+  deadline: string;
+  urgent: boolean;
+}
+
+interface LegalIssue {
+  id: number;
+  title: string;
+  views: number;
+  category: string;
+}
+
+interface LegalVideo {
+  id: number;
+  title: string;
+  duration: string;
+  thumbnail: string;
+}
+
+interface ServiceAgency {
+  id: number;
+  name: string;
+  distance: string;
+  rating: number;
+  address: string;
+  icon: string;
+}
 
 @Component({
   selector: 'app-home',
-  imports: [CommonModule, RouterModule, MatIconModule, MatButtonModule, FormsModule],
+  standalone: true,
+  imports: [CommonModule, RouterModule],
   templateUrl: './home.html',
-  styleUrl: './home.scss'
+  styleUrls: ['./home.scss']
 })
-export class HomeComponent implements OnInit {
-  searchQuery: string = '';
-  currentTime: string = '';
-  greetingText: string = '';
-  userName: string = '李律师';
-  
-  // 案件进度数据
-  caseProgress = {
-    title: '合同纠纷案件',
-    percentage: 65,
-    status: '证据收集',
-    priority: '重要准备'
+export class Home implements OnInit {
+  // 用户信息
+  user = {
+    name: '张先生',
+    avatar: 'assets/images/avatar.jpg'
   };
 
-  // 待办事项数据
-  todoItems = [
-    {
-      id: 1,
-      title: '提交证据材料',
-      time: '今天 18:00 截止',
-      icon: 'assignment'
-    }
+  // 通知和消息计数
+  notificationCount = 3;
+  messageCount = 1;
+  hasNotifications = true;
+  notificationText = '您有新的案件进展通知,请及时查看';
+
+  // 通知信息
+  notifications = [
+    '您的案件进度有更新',
+    '新的法律咨询回复',
+    '系统维护通知'
   ];
 
-  // 热点法律问题数据
-  hotIssues = [
-    {
-      id: 1,
-      title: '劳动合同纠纷处理指南',
-      category: '劳动法',
-      views: '1.2万',
-      time: '2小时前',
-      icon: 'work'
-    },
-    {
-      id: 2,
-      title: '房屋买卖合同注意事项',
-      category: '房产法',
-      views: '8.5千',
-      time: '4小时前',
-      icon: 'home'
-    },
-    {
-      id: 3,
-      title: '交通事故责任认定',
-      category: '交通法',
-      views: '6.3千',
-      time: '6小时前',
-      icon: 'directions_car'
-    }
+  // 案件进度
+  caseProgress: CaseProgress[] = [
+    { id: 1, title: '劳动纠纷案', progress: 75, status: '审理中' },
+    { id: 2, title: '合同纠纷案', progress: 30, status: '准备中' }
   ];
 
-  // 普法短视频数据
-  legalVideos = [
-    {
-      id: 1,
-      title: '如何正确签署劳动合同',
-      thumbnail: 'assets/images/video1.jpg',
-      duration: '03:45',
-      views: '2.1万'
-    },
-    {
-      id: 2,
-      title: '消费者权益保护法解读',
-      thumbnail: 'assets/images/video2.jpg',
-      duration: '05:20',
-      views: '1.8万'
-    }
+  // 待办提醒
+  todoReminders: TodoReminder[] = [
+    { id: 1, title: '提交补充材料', deadline: '2024-01-15', urgent: true },
+    { id: 2, title: '参加庭审', deadline: '2024-01-20', urgent: false }
   ];
 
-  // 附近服务机构数据
-  nearbyServices = [
-    {
-      id: 1,
-      name: '北京市朝阳区律师事务所',
-      distance: '1.2km',
-      rating: 4.8,
-      image: 'assets/images/law-firm1.jpg',
-      type: 'law_firm',
-      actionText: '咨询',
-      stars: [
-        { icon: 'star', class: 'filled' },
-        { icon: 'star', class: 'filled' },
-        { icon: 'star', class: 'filled' },
-        { icon: 'star', class: 'filled' },
-        { icon: 'star_half', class: 'filled' }
-      ],
-      reviews: '128'
-    },
-    {
-      id: 2,
-      name: '朝阳公证处',
-      distance: '2.1km',
-      rating: 4.6,
-      image: 'assets/images/notary1.jpg',
-      type: 'notary',
-      actionText: '预约',
-      stars: [
-        { icon: 'star', class: 'filled' },
-        { icon: 'star', class: 'filled' },
-        { icon: 'star', class: 'filled' },
-        { icon: 'star', class: 'filled' },
-        { icon: 'star_border', class: 'empty' }
-      ],
-      reviews: '86'
-    }
+  // 待办提醒文本
+  todoReminder = '今日有2个重要事项待处理';
+
+  // 热门法律问题
+  hotLegalIssues: LegalIssue[] = [
+    { id: 1, title: '劳动合同纠纷处理', views: 1234, category: '劳动法' },
+    { id: 2, title: '房屋买卖合同注意事项', views: 987, category: '房产法' },
+    { id: 3, title: '交通事故责任认定', views: 756, category: '交通法' }
+  ];
+
+  // 法律科普视频
+  legalVideos: LegalVideo[] = [
+    { id: 1, title: '如何维护劳动者权益', duration: '05:30', thumbnail: 'assets/images/video1.jpg' },
+    { id: 2, title: '房产纠纷预防指南', duration: '08:15', thumbnail: 'assets/images/video2.jpg' },
+    { id: 3, title: '交通事故处理流程', duration: '06:45', thumbnail: 'assets/images/video3.jpg' }
   ];
 
+  // 附近服务机构
+  nearbyServices: ServiceAgency[] = [
+    { id: 1, name: '市法律援助中心', distance: '0.5km', rating: 4.8, address: '市中心大街123号', icon: 'fas fa-university' },
+    { id: 2, name: '律师事务所', distance: '1.2km', rating: 4.6, address: '商业区456号', icon: 'fas fa-balance-scale' },
+    { id: 3, name: '公证处', distance: '2.1km', rating: 4.5, address: '政务区789号', icon: 'fas fa-file-signature' }
+  ];
+
+  // 当前时间和问候语
+  currentTime = '';
+  greeting = '';
+
   constructor(private router: Router) {}
 
   ngOnInit() {
-    this.updateTime();
-    this.setGreeting();
-    // 每分钟更新一次时间
+    this.updateGreetingAndTime();
+    
+    // 每分钟更新一次时间和问候语
     setInterval(() => {
-      this.updateTime();
+      this.updateGreetingAndTime();
     }, 60000);
   }
 
-  // 更新当前时间
-  updateTime() {
+  // 更新问候语和时间
+  updateGreetingAndTime() {
     const now = new Date();
+    const hour = now.getHours();
+    
     this.currentTime = now.toLocaleTimeString('zh-CN', { 
       hour: '2-digit', 
       minute: '2-digit' 
     });
-  }
-
-  // 设置问候语
-  setGreeting() {
-    const hour = new Date().getHours();
+    
     if (hour < 12) {
-      this.greetingText = '早上好';
+      this.greeting = '早上好';
     } else if (hour < 18) {
-      this.greetingText = '下午好';
+      this.greeting = '下午好';
     } else {
-      this.greetingText = '晚上好';
+      this.greeting = '晚上好';
     }
   }
 
+  // 通知点击事件
+  onNotificationClick() {
+    console.log('通知被点击');
+    // 这里可以导航到通知页面或显示通知列表
+  }
+
+  // 消息点击事件
+  onMessageClick() {
+    console.log('消息被点击');
+    // 这里可以导航到消息页面
+  }
+
   // 搜索功能
-  onSearch() {
-    if (this.searchQuery.trim()) {
-      this.router.navigate(['/search'], { 
-        queryParams: { q: this.searchQuery } 
+  onSearch(query?: string) {
+    const searchQuery = query || '';
+    if (searchQuery.trim()) {
+      console.log('搜索:', searchQuery);
+      // 这里可以实现搜索功能或导航到搜索结果页面
+      this.router.navigate(['/consultation/case-search'], { 
+        queryParams: { q: searchQuery } 
       });
     }
   }
 
   // 语音搜索
   onVoiceSearch() {
-    // 这里可以集成语音识别API
-    console.log('启动语音搜索');
+    console.log('语音搜索被触发');
+    // 这里可以实现语音识别功能
+    if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
+      this.startVoiceRecognition();
+    } else {
+      alert('您的浏览器不支持语音识别功能');
+    }
   }
 
-  // 语音咨询
-  onVoiceConsultation() {
-    this.router.navigate(['/consultation/voice']);
-  }
+  // 启动语音识别
+  startVoiceRecognition() {
+    const SpeechRecognition = (window as any).webkitSpeechRecognition || (window as any).SpeechRecognition;
+    const recognition = new SpeechRecognition();
+    
+    recognition.lang = 'zh-CN';
+    recognition.continuous = false;
+    recognition.interimResults = false;
 
-  // 处理待办事项
-  onHandleTodo(todoId: number) {
-    this.router.navigate(['/cases/todo', todoId]);
-  }
+    recognition.onresult = (event: any) => {
+      const transcript = event.results[0][0].transcript;
+      this.onSearch(transcript);
+    };
 
-  // 导航到功能页面
-  navigateToFunction(route: string) {
-    this.router.navigate([route]);
-  }
+    recognition.onerror = (event: any) => {
+      console.error('语音识别错误:', event.error);
+    };
 
-  // 查看热点问题详情
-  viewIssueDetail(issueId: number) {
-    this.router.navigate(['/learning/article', issueId]);
+    recognition.start();
   }
 
-  // 播放视频
-  playVideo(videoId: number) {
-    this.router.navigate(['/learning/video', videoId]);
+  // 通知栏点击
+  onNotificationBarClick() {
+    console.log('通知栏被点击');
+    // 这里可以导航到具体的通知详情
   }
 
-  // 联系服务机构
-  contactService(serviceId: number) {
-    this.router.navigate(['/services/contact', serviceId]);
+  // 待办事项点击
+  onTodoClick() {
+    console.log('待办事项被点击');
+    // 这里可以导航到待办事项页面
   }
 
-  // 预约服务
-  bookService(serviceId: number) {
-    this.router.navigate(['/services/booking', serviceId]);
+  // 功能导航
+  navigateToFunction(route: string) {
+    console.log('导航到:', route);
+    this.router.navigate([route]);
   }
 
   // 查看更多热点问题
   viewMoreIssues() {
-    this.router.navigate(['/learning/hot-issues']);
+    console.log('查看更多热点问题');
+    this.router.navigate(['/learning']);
   }
 
-  // 查看更多视频
-  viewMoreVideos() {
-    this.router.navigate(['/learning/videos']);
+  // 查看问题详情
+  viewIssueDetail(issue: LegalIssue) {
+    console.log('查看问题详情:', issue);
+    this.router.navigate(['/consultation/issue-detail', issue.id]);
   }
 
-  // 查看更多服务机构
-  viewMoreServices() {
-    this.router.navigate(['/services/nearby']);
+  // 查看更多视频
+  viewMoreVideos() {
+    console.log('查看更多视频');
+    this.router.navigate(['/learning']);
   }
 
-  // 通知点击
-  onNotificationClick() {
-    this.router.navigate(['/notifications']);
+  // 播放视频
+  playVideo(video: LegalVideo) {
+    console.log('播放视频:', video.title);
+    // 这里可以实现视频播放功能
   }
 
-  // 处理待办事项操作
-  onTodoAction() {
-    // 处理待办事项的具体操作
-    this.router.navigate(['/cases/todo', this.todoItems[0].id]);
+  // 查看更多服务
+  viewMoreServices() {
+    console.log('查看更多服务');
+    this.router.navigate(['/services']);
   }
 
-  // 通用导航方法
-  navigateTo(route: string) {
-    this.router.navigate([route]);
+  // 联系服务机构
+  contactService(service: ServiceAgency) {
+    console.log('联系服务机构:', service);
+    // 这里可以实现联系功能,比如拨打电话或导航
+    if (confirm(`是否联系 ${service.name}?`)) {
+      // 可以实现电话拨打或地图导航功能
+      console.log('正在联系:', service.name);
+    }
   }
 
-  // 查看更多内容的通用方法
-  viewMore(type: string) {
-    switch(type) {
-      case 'hot-issues':
-        this.viewMoreIssues();
-        break;
-      case 'videos':
-        this.viewMoreVideos();
-        break;
-      case 'services':
-        this.viewMoreServices();
-        break;
-      default:
-        console.log('Unknown view more type:', type);
-    }
+  // 语音咨询
+  onVoiceConsultation() {
+    console.log('语音咨询被触发');
+    // 这里可以启动语音咨询功能
+    this.router.navigate(['/consultation']);
   }
 }

+ 3 - 23
legal-assistant-app/src/app/pages/learning/learning.html

@@ -1,25 +1,5 @@
-<div class="learning-container">
-  <div class="module-header">
-    <h1>学习模块</h1>
-  </div>
-
-  <div class="feature-group">
-    <h2>功能入口</h2>
-    <div class="grid">
-      <a class="card" routerLink="/learning/education-plaza">
-        <mat-icon>menu_book</mat-icon>
-        <span>普法广场</span>
-      </a>
-      <a class="card" routerLink="/learning/scenario-lab">
-        <mat-icon>science</mat-icon>
-        <span>情景实验室</span>
-      </a>
-      <a class="card" routerLink="/learning/knowledge-classroom">
-        <mat-icon>school</mat-icon>
-        <span>知识课堂</span>
-      </a>
-    </div>
-  </div>
-
+<div class="page-container">
+  <h1>学习模块</h1>
+  <p>页面内容已清空,路由正常工作</p>
   <router-outlet></router-outlet>
 </div>

+ 5 - 3
legal-assistant-app/src/app/pages/learning/learning.ts

@@ -1,12 +1,14 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
-import { MatIconModule } from '@angular/material/icon';
 
 @Component({
   selector: 'app-learning',
-  imports: [CommonModule, RouterModule, MatIconModule],
+  imports: [CommonModule, RouterModule],
   templateUrl: './learning.html',
   styleUrl: './learning.scss'
 })
-export class Learning {}
+export class Learning {
+  constructor() {}
+}
+

+ 3 - 24
legal-assistant-app/src/app/pages/learning/legal-education-plaza/legal-education-plaza.html

@@ -1,25 +1,4 @@
-<div class="education-container">
-  <h3>普法广场</h3>
-  <div class="list">
-    <a class="item" routerLink="/learning/knowledge-classroom">
-      <div class="left">
-        <mat-icon>article</mat-icon>
-        <div>
-          <div class="title">交通事故索赔指南</div>
-          <div class="sub">图文解读 · 15分钟</div>
-        </div>
-      </div>
-      <mat-icon>chevron_right</mat-icon>
-    </a>
-    <a class="item" routerLink="/learning/scenario-lab">
-      <div class="left">
-        <mat-icon>video_library</mat-icon>
-        <div>
-          <div class="title">劳动仲裁流程讲解</div>
-          <div class="sub">视频课程 · 20分钟</div>
-        </div>
-      </div>
-      <mat-icon>chevron_right</mat-icon>
-    </a>
-  </div>
+<div class="page-container">
+  <h1>普法广场</h1>
+  <p>页面内容已清空,路由正常工作</p>
 </div>

+ 5 - 3
legal-assistant-app/src/app/pages/learning/legal-education-plaza/legal-education-plaza.ts

@@ -1,12 +1,14 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MatIconModule } from '@angular/material/icon';
 import { RouterModule } from '@angular/router';
 
 @Component({
   selector: 'app-legal-education-plaza',
-  imports: [CommonModule, MatIconModule, RouterModule],
+  imports: [CommonModule, RouterModule],
   templateUrl: './legal-education-plaza.html',
   styleUrl: './legal-education-plaza.scss'
 })
-export class LegalEducationPlaza {}
+export class LegalEducationPlaza {
+  constructor() {}
+}
+

+ 3 - 24
legal-assistant-app/src/app/pages/learning/legal-knowledge-classroom/legal-knowledge-classroom.html

@@ -1,25 +1,4 @@
-<div class="knowledge-container">
-  <h3>知识课堂</h3>
-  <div class="list">
-    <a class="item" routerLink="/learning/education-plaza">
-      <div class="left">
-        <mat-icon>library_books</mat-icon>
-        <div>
-          <div class="title">合同法基础</div>
-          <div class="sub">入门课程 · 30分钟</div>
-        </div>
-      </div>
-      <mat-icon>chevron_right</mat-icon>
-    </a>
-    <a class="item" routerLink="/learning/scenario-lab">
-      <div class="left">
-        <mat-icon>assignment</mat-icon>
-        <div>
-          <div class="title">案例分析练习</div>
-          <div class="sub">实操练习 · 15分钟</div>
-        </div>
-      </div>
-      <mat-icon>chevron_right</mat-icon>
-    </a>
-  </div>
+<div class="page-container">
+  <h1>知识课堂</h1>
+  <p>页面内容已清空,路由正常工作</p>
 </div>

+ 6 - 3
legal-assistant-app/src/app/pages/learning/legal-knowledge-classroom/legal-knowledge-classroom.ts

@@ -1,11 +1,14 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MatIconModule } from '@angular/material/icon';
+import { RouterModule } from '@angular/router';
 
 @Component({
   selector: 'app-legal-knowledge-classroom',
-  imports: [CommonModule, MatIconModule],
+  imports: [CommonModule, RouterModule],
   templateUrl: './legal-knowledge-classroom.html',
   styleUrl: './legal-knowledge-classroom.scss'
 })
-export class LegalKnowledgeClassroom {}
+export class LegalKnowledgeClassroom {
+  constructor() {}
+}
+

+ 3 - 24
legal-assistant-app/src/app/pages/learning/legal-scenario-lab/legal-scenario-lab.html

@@ -1,25 +1,4 @@
-<div class="scenario-container">
-  <h3>情景实验室</h3>
-  <div class="list">
-    <a class="item" routerLink="/consultation/ai-dialog">
-      <div class="left">
-        <mat-icon>psychology</mat-icon>
-        <div>
-          <div class="title">AI对话:模拟仲裁问答</div>
-          <div class="sub">互动练习 · 10分钟</div>
-        </div>
-      </div>
-      <mat-icon>chevron_right</mat-icon>
-    </a>
-    <a class="item" routerLink="/learning/knowledge-classroom">
-      <div class="left">
-        <mat-icon>quiz</mat-icon>
-        <div>
-          <div class="title">案件要点速测</div>
-          <div class="sub">选择题 · 5分钟</div>
-        </div>
-      </div>
-      <mat-icon>chevron_right</mat-icon>
-    </a>
-  </div>
+<div class="page-container">
+  <h1>情景实验室</h1>
+  <p>页面内容已清空,路由正常工作</p>
 </div>

+ 5 - 3
legal-assistant-app/src/app/pages/learning/legal-scenario-lab/legal-scenario-lab.ts

@@ -1,12 +1,14 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MatIconModule } from '@angular/material/icon';
 import { RouterModule } from '@angular/router';
 
 @Component({
   selector: 'app-legal-scenario-lab',
-  imports: [CommonModule, MatIconModule, RouterModule],
+  imports: [CommonModule, RouterModule],
   templateUrl: './legal-scenario-lab.html',
   styleUrl: './legal-scenario-lab.scss'
 })
-export class LegalScenarioLab {}
+export class LegalScenarioLab {
+  constructor() {}
+}
+

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

@@ -1 +1,4 @@
-<p>help-center works!</p>
+<div class="page-container">
+  <h1>帮助中心</h1>
+  <p>页面内容已清空,路由正常工作</p>
+</div>

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

@@ -1,11 +1,14 @@
 import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
 
 @Component({
   selector: 'app-help-center',
-  imports: [],
+  imports: [CommonModule, RouterModule],
   templateUrl: './help-center.html',
   styleUrl: './help-center.scss'
 })
 export class HelpCenter {
-
+  constructor() {}
 }
+

+ 4 - 1
legal-assistant-app/src/app/pages/profile/personal-center/personal-center.html

@@ -1 +1,4 @@
-<p>personal-center works!</p>
+<div class="page-container">
+  <h1>个人中心</h1>
+  <p>页面内容已清空,路由正常工作</p>
+</div>

+ 5 - 2
legal-assistant-app/src/app/pages/profile/personal-center/personal-center.ts

@@ -1,11 +1,14 @@
 import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
 
 @Component({
   selector: 'app-personal-center',
-  imports: [],
+  imports: [CommonModule, RouterModule],
   templateUrl: './personal-center.html',
   styleUrl: './personal-center.scss'
 })
 export class PersonalCenter {
-
+  constructor() {}
 }
+

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

@@ -1 +1,4 @@
-<p>privacy-settings works!</p>
+<div class="page-container">
+  <h1>隐私设置</h1>
+  <p>页面内容已清空,路由正常工作</p>
+</div>

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

@@ -1,11 +1,14 @@
 import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
 
 @Component({
   selector: 'app-privacy-settings',
-  imports: [],
+  imports: [CommonModule, RouterModule],
   templateUrl: './privacy-settings.html',
   styleUrl: './privacy-settings.scss'
 })
 export class PrivacySettings {
-
+  constructor() {}
 }
+

+ 5 - 38
legal-assistant-app/src/app/pages/profile/profile.html

@@ -1,38 +1,5 @@
-<div class="profile-container">
-  <div class="profile-header">
-    <div class="avatar"></div>
-    <h2>用户名</h2>
-    <p>AI数字人:小律</p>
-  </div>
-
-  <div class="feature-group">
-    <h3>我的</h3>
-    <div class="grid">
-      <a class="card" routerLink="/consultation/history"><mat-icon>history</mat-icon><span>咨询历史</span></a>
-      <a class="card" routerLink="/tools/document-generator"><mat-icon>description</mat-icon><span>我的文书</span></a>
-      <a class="card" routerLink="/home"><mat-icon>favorite</mat-icon><span>我的收藏</span></a>
-      <a class="card" routerLink="/learning/education-plaza"><mat-icon>school</mat-icon><span>学习记录</span></a>
-      <a class="card" routerLink="/cases/case-management"><mat-icon>folder</mat-icon><span>我的案件</span></a>
-      <a class="card" routerLink="/services/lawyer-connection"><mat-icon>support_agent</mat-icon><span>律师对接</span></a>
-    </div>
-  </div>
-
-  <div class="feature-group">
-    <h3>快捷服务</h3>
-    <div class="grid">
-      <a class="card" routerLink="/services/legal-service-map"><mat-icon>map</mat-icon><span>法律服务地图</span></a>
-      <a class="card" routerLink="/services/mediation-service"><mat-icon>handshake</mat-icon><span>人民调解</span></a>
-      <a class="card" routerLink="/tools/legal-aid-assessment"><mat-icon>volunteer_activism</mat-icon><span>法律援助</span></a>
-    </div>
-  </div>
-
-  <div class="feature-group">
-    <h3>设置</h3>
-    <div class="grid">
-      <a class="card" routerLink="/profile/privacy-settings"><mat-icon>privacy_tip</mat-icon><span>隐私保护</span></a>
-      <a class="card" routerLink="/profile/voice-settings"><mat-icon>record_voice_over</mat-icon><span>语音与显示</span></a>
-      <a class="card" routerLink="/profile/help-center"><mat-icon>help</mat-icon><span>帮助中心</span></a>
-    </div>
-  </div>
-</div>
-<router-outlet></router-outlet>
+<div class="page-container">
+  <h1>个人中心</h1>
+  <p>页面内容已清空,路由正常工作</p>
+  <router-outlet></router-outlet>
+</div>

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

@@ -1,14 +1,14 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
-import { MatIconModule } from '@angular/material/icon';
 
 @Component({
   selector: 'app-profile',
-  imports: [CommonModule, RouterModule, MatIconModule],
+  imports: [CommonModule, RouterModule],
   templateUrl: './profile.html',
   styleUrl: './profile.scss'
 })
 export class Profile {
-
+  constructor() {}
 }
+

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

@@ -1 +1,4 @@
-<p>voice-display-settings works!</p>
+<div class="page-container">
+  <h1>语音与显示设置</h1>
+  <p>页面内容已清空,路由正常工作</p>
+</div>

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

@@ -1,11 +1,14 @@
 import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
 
 @Component({
   selector: 'app-voice-display-settings',
-  imports: [],
+  imports: [CommonModule, RouterModule],
   templateUrl: './voice-display-settings.html',
   styleUrl: './voice-display-settings.scss'
 })
 export class VoiceDisplaySettings {
-
+  constructor() {}
 }
+

+ 3 - 24
legal-assistant-app/src/app/pages/services/lawyer-connection/lawyer-connection.html

@@ -1,25 +1,4 @@
-<div class="lawyer-conn-container">
-  <h3>律师对接</h3>
-  <div class="list">
-    <a class="item" routerLink="/consultation/ai-dialog">
-      <div class="left">
-        <mat-icon>person</mat-icon>
-        <div>
-          <div class="title">张律师 · 交通事故</div>
-          <div class="sub">北京 · 10年经验 · 成功率高</div>
-        </div>
-      </div>
-      <mat-icon>chevron_right</mat-icon>
-    </a>
-    <a class="item" routerLink="/consultation/ai-dialog">
-      <div class="left">
-        <mat-icon>person</mat-icon>
-        <div>
-          <div class="title">李律师 · 劳动争议</div>
-          <div class="sub">上海 · 8年经验 · 仲裁专家</div>
-        </div>
-      </div>
-      <mat-icon>chevron_right</mat-icon>
-    </a>
-  </div>
+<div class="page-container">
+  <h1>律师对接</h1>
+  <p>页面内容已清空,路由正常工作</p>
 </div>

+ 5 - 3
legal-assistant-app/src/app/pages/services/lawyer-connection/lawyer-connection.ts

@@ -1,12 +1,14 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
-import { MatIconModule } from '@angular/material/icon';
 
 @Component({
   selector: 'app-lawyer-connection',
-  imports: [CommonModule, RouterModule, MatIconModule],
+  imports: [CommonModule, RouterModule],
   templateUrl: './lawyer-connection.html',
   styleUrl: './lawyer-connection.scss'
 })
-export class LawyerConnection {}
+export class LawyerConnection {
+  constructor() {}
+}
+

+ 3 - 16
legal-assistant-app/src/app/pages/services/legal-service-map/legal-service-map.html

@@ -1,17 +1,4 @@
-<div class="map-container">
-  <h3>法律服务地图</h3>
-  <div class="grid">
-    <a class="card" routerLink="/services/lawyer-connection">
-      <mat-icon>location_on</mat-icon>
-      <span>附近律师</span>
-    </a>
-    <a class="card" routerLink="/services/mediation-service">
-      <mat-icon>diversity_3</mat-icon>
-      <span>调解站点</span>
-    </a>
-    <a class="card" routerLink="/consultation/case-search">
-      <mat-icon>travel_explore</mat-icon>
-      <span>案例检索</span>
-    </a>
-  </div>
+<div class="page-container">
+  <h1>法律服务地图</h1>
+  <p>页面内容已清空,路由正常工作</p>
 </div>

+ 5 - 3
legal-assistant-app/src/app/pages/services/legal-service-map/legal-service-map.ts

@@ -1,12 +1,14 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
-import { MatIconModule } from '@angular/material/icon';
 
 @Component({
   selector: 'app-legal-service-map',
-  imports: [CommonModule, RouterModule, MatIconModule],
+  imports: [CommonModule, RouterModule],
   templateUrl: './legal-service-map.html',
   styleUrl: './legal-service-map.scss'
 })
-export class LegalServiceMap {}
+export class LegalServiceMap {
+  constructor() {}
+}
+

+ 3 - 24
legal-assistant-app/src/app/pages/services/mediation-service/mediation-service.html

@@ -1,25 +1,4 @@
-<div class="mediation-container">
-  <h3>人民调解</h3>
-  <div class="list">
-    <a class="item" routerLink="/cases/progress-tracking">
-      <div class="left">
-        <div class="dot"></div>
-        <div>
-          <div class="title">社区纠纷调解 · 待分配</div>
-          <div class="sub">李某与邻居噪音纠纷 · 需要安排调解员</div>
-        </div>
-      </div>
-      <mat-icon>chevron_right</mat-icon>
-    </a>
-    <a class="item" routerLink="/cases/progress-tracking">
-      <div class="left">
-        <div class="dot"></div>
-        <div>
-          <div class="title">劳动仲裁前置调解 · 进行中</div>
-          <div class="sub">王某与公司加班工资争议 · 已预约会议</div>
-        </div>
-      </div>
-      <mat-icon>chevron_right</mat-icon>
-    </a>
-  </div>
+<div class="page-container">
+  <h1>人民调解</h1>
+  <p>页面内容已清空,路由正常工作</p>
 </div>

+ 5 - 3
legal-assistant-app/src/app/pages/services/mediation-service/mediation-service.ts

@@ -1,12 +1,14 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
-import { MatIconModule } from '@angular/material/icon';
 
 @Component({
   selector: 'app-mediation-service',
-  imports: [CommonModule, RouterModule, MatIconModule],
+  imports: [CommonModule, RouterModule],
   templateUrl: './mediation-service.html',
   styleUrl: './mediation-service.scss'
 })
-export class MediationService {}
+export class MediationService {
+  constructor() {}
+}
+

+ 3 - 23
legal-assistant-app/src/app/pages/services/services.html

@@ -1,25 +1,5 @@
-<div class="services-container">
-  <div class="module-header">
-    <h1>服务模块</h1>
-  </div>
-
-  <div class="feature-group">
-    <h2>功能入口</h2>
-    <div class="grid">
-      <a class="card" routerLink="/services/lawyer-connection">
-        <mat-icon>groups</mat-icon>
-        <span>律师对接</span>
-      </a>
-      <a class="card" routerLink="/services/mediation-service">
-        <mat-icon>handshake</mat-icon>
-        <span>人民调解</span>
-      </a>
-      <a class="card" routerLink="/services/legal-service-map">
-        <mat-icon>map</mat-icon>
-        <span>法律服务地图</span>
-      </a>
-    </div>
-  </div>
-
+<div class="page-container">
+  <h1>服务模块</h1>
+  <p>页面内容已清空,路由正常工作</p>
   <router-outlet></router-outlet>
 </div>

+ 5 - 3
legal-assistant-app/src/app/pages/services/services.ts

@@ -1,12 +1,14 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
-import { MatIconModule } from '@angular/material/icon';
 
 @Component({
   selector: 'app-services',
-  imports: [CommonModule, RouterModule, MatIconModule],
+  imports: [CommonModule, RouterModule],
   templateUrl: './services.html',
   styleUrl: './services.scss'
 })
-export class Services {}
+export class Services {
+  constructor() {}
+}
+

+ 3 - 11
legal-assistant-app/src/app/pages/tools/compensation-calculator/compensation-calculator.html

@@ -1,12 +1,4 @@
-<div class="calcu-container">
-  <h3>{{ title }}</h3>
-  <form>
-    <label>伤残等级(示例)</label>
-    <input type="text" placeholder="请输入等级,如十级">
-
-    <label>预计赔偿金额(示例)</label>
-    <input type="number" [(ngModel)]="amount" placeholder="请输入金额">
-
-    <button type="button" class="primary" routerLink="/tools">计算并返回</button>
-  </form>
+<div class="page-container">
+  <h1>赔偿计算器</h1>
+  <p>页面内容已清空,路由正常工作</p>
 </div>

+ 5 - 4
legal-assistant-app/src/app/pages/tools/compensation-calculator/compensation-calculator.ts

@@ -1,13 +1,14 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { MatIconModule } from '@angular/material/icon';
 import { RouterModule } from '@angular/router';
 
 @Component({
   selector: 'app-compensation-calculator',
-  imports: [CommonModule, FormsModule, RouterModule, MatIconModule],
+  imports: [CommonModule, RouterModule],
   templateUrl: './compensation-calculator.html',
   styleUrl: './compensation-calculator.scss'
 })
-export class CompensationCalculator { title = '赔偿计算器'; amount = 0; }
+export class CompensationCalculator {
+  constructor() {}
+}
+

+ 3 - 11
legal-assistant-app/src/app/pages/tools/document-generator/document-generator.html

@@ -1,12 +1,4 @@
-<div class="docgen-container">
-  <h3>{{ title }}</h3>
-  <form>
-    <label>文书标题</label>
-    <input type="text" placeholder="请输入标题">
-
-    <label>文书内容</label>
-    <textarea rows="6" placeholder="请输入主要内容"></textarea>
-
-    <button type="button" class="primary" routerLink="/tools">生成并返回</button>
-  </form>
+<div class="page-container">
+  <h1>文书生成器</h1>
+  <p>页面内容已清空,路由正常工作</p>
 </div>

+ 5 - 4
legal-assistant-app/src/app/pages/tools/document-generator/document-generator.ts

@@ -1,13 +1,14 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { MatIconModule } from '@angular/material/icon';
 import { RouterModule } from '@angular/router';
 
 @Component({
   selector: 'app-document-generator',
-  imports: [CommonModule, FormsModule, RouterModule, MatIconModule],
+  imports: [CommonModule, RouterModule],
   templateUrl: './document-generator.html',
   styleUrl: './document-generator.scss'
 })
-export class DocumentGenerator { title = '文书生成'; }
+export class DocumentGenerator {
+  constructor() {}
+}
+

+ 3 - 24
legal-assistant-app/src/app/pages/tools/evidence-organizer/evidence-organizer.html

@@ -1,25 +1,4 @@
-<div class="evidence-container">
-  <h3>证据整理</h3>
-  <div class="list">
-    <a class="item" routerLink="/cases/detail-editor">
-      <div class="left">
-        <mat-icon>attach_file</mat-icon>
-        <div>
-          <div class="title">上传事故照片</div>
-          <div class="sub">图片/视频 · 3个文件</div>
-        </div>
-      </div>
-      <mat-icon>chevron_right</mat-icon>
-    </a>
-    <a class="item" routerLink="/cases/detail-editor">
-      <div class="left">
-        <mat-icon>folder</mat-icon>
-        <div>
-          <div class="title">整理工资流水</div>
-          <div class="sub">PDF/Excel · 2个文件</div>
-        </div>
-      </div>
-      <mat-icon>chevron_right</mat-icon>
-    </a>
-  </div>
+<div class="page-container">
+  <h1>证据整理器</h1>
+  <p>页面内容已清空,路由正常工作</p>
 </div>

+ 5 - 3
legal-assistant-app/src/app/pages/tools/evidence-organizer/evidence-organizer.ts

@@ -1,12 +1,14 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
-import { MatIconModule } from '@angular/material/icon';
 
 @Component({
   selector: 'app-evidence-organizer',
-  imports: [CommonModule, RouterModule, MatIconModule],
+  imports: [CommonModule, RouterModule],
   templateUrl: './evidence-organizer.html',
   styleUrl: './evidence-organizer.scss'
 })
-export class EvidenceOrganizer {}
+export class EvidenceOrganizer {
+  constructor() {}
+}
+

+ 3 - 18
legal-assistant-app/src/app/pages/tools/legal-aid-assessment/legal-aid-assessment.html

@@ -1,19 +1,4 @@
-<div class="aid-container">
-  <h3>{{ title }}</h3>
-  <form>
-    <label>
-      姓名
-      <input type="text" [(ngModel)]="name" name="name" placeholder="请输入您的姓名" />
-    </label>
-    <label>
-      月收入(元)
-      <input type="number" [(ngModel)]="income" name="income" placeholder="请输入月收入" />
-    </label>
-    <div class="actions">
-      <a class="primary" routerLink="/tools">
-        <mat-icon>check_circle</mat-icon>
-        评估并返回
-      </a>
-    </div>
-  </form>
+<div class="page-container">
+  <h1>法律援助评估</h1>
+  <p>页面内容已清空,路由正常工作</p>
 </div>

+ 5 - 4
legal-assistant-app/src/app/pages/tools/legal-aid-assessment/legal-aid-assessment.ts

@@ -1,13 +1,14 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { MatIconModule } from '@angular/material/icon';
 import { RouterModule } from '@angular/router';
 
 @Component({
   selector: 'app-legal-aid-assessment',
-  imports: [CommonModule, FormsModule, RouterModule, MatIconModule],
+  imports: [CommonModule, RouterModule],
   templateUrl: './legal-aid-assessment.html',
   styleUrl: './legal-aid-assessment.scss'
 })
-export class LegalAidAssessment { title = '援助评估'; name = ''; income = 0; }
+export class LegalAidAssessment {
+  constructor() {}
+}
+

+ 3 - 24
legal-assistant-app/src/app/pages/tools/legal-tools-market/legal-tools-market.html

@@ -1,25 +1,4 @@
-<div class="market-container">
-  <h3>法律工具市场</h3>
-  <div class="list">
-    <a class="item" routerLink="/tools/document-generator">
-      <div class="left">
-        <mat-icon>description</mat-icon>
-        <div>
-          <div class="title">文书生成</div>
-          <div class="sub">模板丰富,智能填充</div>
-        </div>
-      </div>
-      <mat-icon>chevron_right</mat-icon>
-    </a>
-    <a class="item" routerLink="/tools/compensation-calculator">
-      <div class="left">
-        <mat-icon>calculate</mat-icon>
-        <div>
-          <div class="title">赔偿计算器</div>
-          <div class="sub">交通/工伤/医疗纠纷</div>
-        </div>
-      </div>
-      <mat-icon>chevron_right</mat-icon>
-    </a>
-  </div>
+<div class="page-container">
+  <h1>法律工具市场</h1>
+  <p>页面内容已清空,路由正常工作</p>
 </div>

+ 4 - 3
legal-assistant-app/src/app/pages/tools/legal-tools-market/legal-tools-market.ts

@@ -1,12 +1,13 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MatIconModule } from '@angular/material/icon';
 import { RouterModule } from '@angular/router';
 
 @Component({
   selector: 'app-legal-tools-market',
-  imports: [CommonModule, RouterModule, MatIconModule],
+  imports: [CommonModule, RouterModule],
   templateUrl: './legal-tools-market.html',
   styleUrl: './legal-tools-market.scss'
 })
-export class LegalToolsMarket {}
+export class LegalToolsMarket {
+  constructor() {}
+}

+ 3 - 27
legal-assistant-app/src/app/pages/tools/tools.html

@@ -1,29 +1,5 @@
-<div class="tools-container">
-  <div class="module-header">
-    <h1>工具模块</h1>
-  </div>
-
-  <div class="feature-group">
-    <h2>功能入口</h2>
-    <div class="grid">
-      <a class="card" routerLink="/tools/document-generator">
-        <mat-icon>description</mat-icon>
-        <span>文书生成</span>
-      </a>
-      <a class="card" routerLink="/tools/compensation-calculator">
-        <mat-icon>calculate</mat-icon>
-        <span>赔偿计算器</span>
-      </a>
-      <a class="card" routerLink="/tools/evidence-organizer">
-        <mat-icon>inventory_2</mat-icon>
-        <span>证据整理</span>
-      </a>
-      <a class="card" routerLink="/tools/legal-aid-assessment">
-        <mat-icon>assignment_ind</mat-icon>
-        <span>法律援助评估</span>
-      </a>
-    </div>
-  </div>
-
+<div class="page-container">
+  <h1>工具模块</h1>
+  <p>页面内容已清空,路由正常工作</p>
   <router-outlet></router-outlet>
 </div>

+ 5 - 3
legal-assistant-app/src/app/pages/tools/tools.ts

@@ -1,12 +1,14 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
-import { MatIconModule } from '@angular/material/icon';
 
 @Component({
   selector: 'app-tools',
-  imports: [CommonModule, RouterModule, MatIconModule],
+  imports: [CommonModule, RouterModule],
   templateUrl: './tools.html',
   styleUrl: './tools.scss'
 })
-export class Tools {}
+export class Tools {
+  constructor() {}
+}
+

+ 16 - 0
legal-assistant-app/src/assets/icons/case-management.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
+  <defs>
+    <linearGradient id="caseGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#E53E3E;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#C53030;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <circle cx="32" cy="32" r="30" fill="url(#caseGrad)" stroke="#9B2C2C" stroke-width="2"/>
+  <rect x="18" y="20" width="28" height="32" rx="2" fill="white" opacity="0.9"/>
+  <rect x="22" y="16" width="20" height="6" rx="1" fill="white" opacity="0.7"/>
+  <line x1="22" y1="28" x2="40" y2="28" stroke="#E53E3E" stroke-width="2" stroke-linecap="round"/>
+  <line x1="22" y1="34" x2="36" y2="34" stroke="#E53E3E" stroke-width="2" stroke-linecap="round"/>
+  <line x1="22" y1="40" x2="38" y2="40" stroke="#E53E3E" stroke-width="2" stroke-linecap="round"/>
+  <circle cx="38" cy="46" r="3" fill="#E53E3E"/>
+  <path d="M36 46l2 2 4-4" stroke="white" stroke-width="1.5" fill="none" stroke-linecap="round"/>
+</svg>

+ 14 - 0
legal-assistant-app/src/assets/icons/consultation.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
+  <defs>
+    <linearGradient id="consultationGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#4A90E2;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#357ABD;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <circle cx="32" cy="32" r="30" fill="url(#consultationGrad)" stroke="#2C5282" stroke-width="2"/>
+  <path d="M20 24h24c2 0 4 2 4 4v16c0 2-2 4-4 4H28l-4 4-4-4H20c-2 0-4-2-4-4V28c0-2 2-4 4-4z" fill="white" opacity="0.9"/>
+  <circle cx="26" cy="34" r="2" fill="#4A90E2"/>
+  <circle cx="32" cy="34" r="2" fill="#4A90E2"/>
+  <circle cx="38" cy="34" r="2" fill="#4A90E2"/>
+  <path d="M22 18c0-2 2-4 4-4h12c2 0 4 2 4 4v2H22v-2z" fill="white" opacity="0.7"/>
+</svg>

+ 16 - 0
legal-assistant-app/src/assets/icons/legal-aid.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
+  <defs>
+    <linearGradient id="aidGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#38A169;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#2F855A;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <circle cx="32" cy="32" r="30" fill="url(#aidGrad)" stroke="#276749" stroke-width="2"/>
+  <path d="M32 16l8 12H24l8-12z" fill="white" opacity="0.9"/>
+  <rect x="28" y="28" width="8" height="20" fill="white" opacity="0.9"/>
+  <circle cx="24" cy="38" r="6" fill="white" opacity="0.7"/>
+  <circle cx="40" cy="38" r="6" fill="white" opacity="0.7"/>
+  <path d="M20 36c0-2 2-4 4-4s4 2 4 4-2 4-4 4-4-2-4-4z" fill="#38A169"/>
+  <path d="M36 36c0-2 2-4 4-4s4 2 4 4-2 4-4 4-4-2-4-4z" fill="#38A169"/>
+  <path d="M28 20h8v4h-8z" fill="#38A169"/>
+</svg>

+ 18 - 0
legal-assistant-app/src/assets/icons/legal-knowledge.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
+  <defs>
+    <linearGradient id="knowledgeGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#ED8936;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#DD6B20;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <circle cx="32" cy="32" r="30" fill="url(#knowledgeGrad)" stroke="#C05621" stroke-width="2"/>
+  <rect x="20" y="18" width="24" height="28" rx="2" fill="white" opacity="0.9"/>
+  <rect x="18" y="20" width="24" height="28" rx="2" fill="white" opacity="0.7"/>
+  <rect x="16" y="22" width="24" height="28" rx="2" fill="white" opacity="0.5"/>
+  <line x1="20" y1="28" x2="36" y2="28" stroke="#ED8936" stroke-width="2"/>
+  <line x1="20" y1="32" x2="34" y2="32" stroke="#ED8936" stroke-width="1.5"/>
+  <line x1="20" y1="36" x2="32" y2="36" stroke="#ED8936" stroke-width="1.5"/>
+  <line x1="20" y1="40" x2="30" y2="40" stroke="#ED8936" stroke-width="1.5"/>
+  <circle cx="44" cy="20" r="6" fill="#ED8936"/>
+  <path d="M41 20l2 2 4-4" stroke="white" stroke-width="1.5" fill="none" stroke-linecap="round"/>
+</svg>

+ 19 - 0
legal-assistant-app/src/assets/icons/legal-tools.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
+  <defs>
+    <linearGradient id="toolsGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#4299E1;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#3182CE;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <circle cx="32" cy="32" r="30" fill="url(#toolsGrad)" stroke="#2C5282" stroke-width="2"/>
+  <rect x="20" y="24" width="24" height="16" rx="2" fill="white" opacity="0.9"/>
+  <circle cx="26" cy="30" r="2" fill="#4299E1"/>
+  <circle cx="32" cy="30" r="2" fill="#4299E1"/>
+  <circle cx="38" cy="30" r="2" fill="#4299E1"/>
+  <rect x="24" y="34" width="16" height="2" fill="#4299E1"/>
+  <path d="M28 18l8 4-8 4V18z" fill="white" opacity="0.8"/>
+  <rect x="18" y="42" width="28" height="4" rx="2" fill="white" opacity="0.7"/>
+  <circle cx="22" cy="44" r="1" fill="#4299E1"/>
+  <circle cx="26" cy="44" r="1" fill="#4299E1"/>
+  <circle cx="30" cy="44" r="1" fill="#4299E1"/>
+</svg>

+ 16 - 0
legal-assistant-app/src/assets/icons/mediation.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
+  <defs>
+    <linearGradient id="mediationGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#9F7AEA;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#805AD5;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <circle cx="32" cy="32" r="30" fill="url(#mediationGrad)" stroke="#553C9A" stroke-width="2"/>
+  <circle cx="22" cy="28" r="8" fill="white" opacity="0.8"/>
+  <circle cx="42" cy="28" r="8" fill="white" opacity="0.8"/>
+  <circle cx="22" cy="28" r="4" fill="#9F7AEA"/>
+  <circle cx="42" cy="28" r="4" fill="#9F7AEA"/>
+  <path d="M16 44c0-4 4-8 8-8h16c4 0 8 4 8 8v4H16v-4z" fill="white" opacity="0.8"/>
+  <path d="M28 40h8l-4 8-4-8z" fill="#9F7AEA"/>
+  <circle cx="32" cy="20" r="3" fill="white"/>
+</svg>

+ 11 - 0
legal-assistant-app/src/assets/images/avatar.jpg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+  <defs>
+    <linearGradient id="avatarGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#667EEA;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#764BA2;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <circle cx="50" cy="50" r="50" fill="url(#avatarGrad)"/>
+  <circle cx="50" cy="35" r="15" fill="white" opacity="0.9"/>
+  <path d="M20 80c0-15 13-27 30-27s30 12 30 27v20H20V80z" fill="white" opacity="0.9"/>
+</svg>

+ 12 - 0
legal-assistant-app/src/assets/images/video1.jpg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 90" width="160" height="90">
+  <defs>
+    <linearGradient id="video1Grad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#4A90E2;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#357ABD;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <rect width="160" height="90" fill="url(#video1Grad)"/>
+  <circle cx="80" cy="45" r="20" fill="white" opacity="0.9"/>
+  <path d="M72 35l16 10-16 10V35z" fill="#4A90E2"/>
+  <text x="80" y="75" text-anchor="middle" fill="white" font-family="Arial" font-size="12" opacity="0.8">劳动者权益</text>
+</svg>

+ 12 - 0
legal-assistant-app/src/assets/images/video2.jpg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 90" width="160" height="90">
+  <defs>
+    <linearGradient id="video2Grad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#E74C3C;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#C0392B;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <rect width="160" height="90" fill="url(#video2Grad)"/>
+  <circle cx="80" cy="45" r="20" fill="white" opacity="0.9"/>
+  <path d="M72 35l16 10-16 10V35z" fill="#E74C3C"/>
+  <text x="80" y="75" text-anchor="middle" fill="white" font-family="Arial" font-size="12" opacity="0.8">合同纠纷</text>
+</svg>

+ 12 - 0
legal-assistant-app/src/assets/images/video3.jpg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 90" width="160" height="90">
+  <defs>
+    <linearGradient id="video3Grad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#27AE60;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#229954;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <rect width="160" height="90" fill="url(#video3Grad)"/>
+  <circle cx="80" cy="45" r="20" fill="white" opacity="0.9"/>
+  <path d="M72 35l16 10-16 10V35z" fill="#27AE60"/>
+  <text x="80" y="75" text-anchor="middle" fill="white" font-family="Arial" font-size="12" opacity="0.8">婚姻家庭</text>
+</svg>

+ 1 - 0
legal-assistant-app/src/index.html

@@ -8,6 +8,7 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 </head>
 <body>
   <app-root></app-root>

+ 857 - 0
legal-assistant-app/src/zixun.html

@@ -0,0 +1,857 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>律助App - AI法律咨询</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+        }
+        
+        :root {
+            --primary-color: #1A237E;
+            --primary-light: #303F9F;
+            --accent-color: #FFD700;
+            --warning-color: #D32F2F;
+            --success-color: #388E3C;
+            --bg-color: #F5F5F5;
+            --card-color: #FFFFFF;
+            --text-primary: #212121;
+            --text-secondary: #616161;
+            --border-radius: 16px;
+            --shadow: 0 4px 16px rgba(0,0,0,0.08);
+            --transition: all 0.3s ease;
+        }
+        
+        body {
+            background-color: var(--bg-color);
+            color: var(--text-primary);
+            max-width: 500px;
+            margin: 0 auto;
+            position: relative;
+            padding-bottom: 80px;
+            height: 100vh;
+            overflow: hidden;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 16px;
+            background: white;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+        }
+        
+        .nav-title {
+            font-size: 18px;
+            font-weight: bold;
+            color: var(--primary-color);
+        }
+        
+        .nav-actions {
+            display: flex;
+            gap: 16px;
+        }
+        
+        .nav-action {
+            font-size: 18px;
+            color: var(--text-secondary);
+            cursor: pointer;
+            transition: var(--transition);
+        }
+        
+        .nav-action:hover {
+            color: var(--primary-color);
+        }
+        
+        /* 咨询页面容器 */
+        .consult-container {
+            height: calc(100vh - 140px);
+            display: flex;
+            flex-direction: column;
+            background: white;
+        }
+        
+        /* 对话历史区 */
+        .chat-history {
+            flex: 1;
+            overflow-y: auto;
+            padding: 16px;
+            background: #f8f9ff;
+        }
+        
+        .message {
+            display: flex;
+            margin-bottom: 20px;
+            animation: fadeIn 0.3s ease;
+        }
+        
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        
+        .user-message {
+            justify-content: flex-end;
+        }
+        
+        .message-avatar {
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 8px;
+            flex-shrink: 0;
+        }
+        
+        .ai-message .message-avatar {
+            background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
+            color: white;
+        }
+        
+        .user-message .message-avatar {
+            background: var(--accent-color);
+            color: var(--text-primary);
+        }
+        
+        .message-content {
+            max-width: 80%;
+            padding: 12px 16px;
+            border-radius: 18px;
+            line-height: 1.4;
+        }
+        
+        .ai-message .message-content {
+            background: white;
+            border: 1px solid #e0e0e0;
+            border-radius: 18px 18px 18px 4px;
+            box-shadow: var(--shadow);
+        }
+        
+        .user-message .message-content {
+            background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
+            color: white;
+            border-radius: 18px 18px 4px 18px;
+        }
+        
+        /* 智能回答区样式 */
+        .conclusion {
+            margin-bottom: 12px;
+            font-weight: 500;
+        }
+        
+        .legal-reference {
+            background: #FFF9C4;
+            padding: 10px 12px;
+            border-radius: 8px;
+            margin-bottom: 12px;
+            border-left: 4px solid var(--accent-color);
+            position: relative;
+        }
+        
+        .legal-reference:hover::after {
+            content: "点击查看详细法条";
+            position: absolute;
+            bottom: -25px;
+            left: 0;
+            background: rgba(0,0,0,0.7);
+            color: white;
+            padding: 4px 8px;
+            border-radius: 4px;
+            font-size: 12px;
+        }
+        
+        .action-steps {
+            margin-bottom: 12px;
+        }
+        
+        .action-steps ol {
+            margin-left: 20px;
+            margin-top: 8px;
+        }
+        
+        .action-steps li {
+            margin-bottom: 6px;
+        }
+        
+        .explanation {
+            background: #E3F2FD;
+            padding: 10px 12px;
+            border-radius: 8px;
+            font-size: 14px;
+            color: var(--text-secondary);
+            position: relative;
+            cursor: help;
+        }
+        
+        .explanation:hover::after {
+            content: "通俗解释:用简单语言说明法律概念";
+            position: absolute;
+            bottom: -25px;
+            left: 0;
+            background: rgba(0,0,0,0.7);
+            color: white;
+            padding: 4px 8px;
+            border-radius: 4px;
+            font-size: 12px;
+        }
+        
+        /* 快捷问题模板 */
+        .quick-templates {
+            display: flex;
+            gap: 8px;
+            overflow-x: auto;
+            padding: 16px;
+            background: white;
+            border-bottom: 1px solid #f0f0f0;
+        }
+        
+        .template-item {
+            background: white;
+            padding: 10px 16px;
+            border-radius: 20px;
+            border: 1px solid #e0e0e0;
+            font-size: 14px;
+            white-space: nowrap;
+            cursor: pointer;
+            transition: var(--transition);
+            flex-shrink: 0;
+        }
+        
+        .template-item:hover {
+            background: var(--primary-color);
+            color: white;
+            transform: translateY(-2px);
+        }
+        
+        /* 输入控制区 */
+        .input-area {
+            background: white;
+            padding: 16px;
+            border-top: 1px solid #f0f0f0;
+        }
+        
+        .input-container {
+            display: flex;
+            align-items: center;
+            background: var(--bg-color);
+            border-radius: 24px;
+            padding: 8px 16px;
+            gap: 8px;
+            transition: var(--transition);
+        }
+        
+        .input-container:focus-within {
+            box-shadow: 0 0 0 2px rgba(26, 35, 126, 0.2);
+        }
+        
+        .attach-btn {
+            cursor: pointer;
+            font-size: 18px;
+            color: var(--text-secondary);
+            transition: var(--transition);
+        }
+        
+        .attach-btn:hover {
+            color: var(--primary-color);
+        }
+        
+        .input-container input {
+            flex: 1;
+            border: none;
+            background: none;
+            outline: none;
+            font-size: 16px;
+            padding: 8px 0;
+        }
+        
+        .voice-btn {
+            background: var(--primary-color);
+            color: white;
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: var(--transition);
+        }
+        
+        .voice-btn:hover {
+            background: var(--primary-light);
+            transform: scale(1.05);
+        }
+        
+        .voice-btn.listening {
+            background: var(--warning-color);
+            animation: pulse 1.5s infinite;
+        }
+        
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.1); }
+            100% { transform: scale(1); }
+        }
+        
+        .send-btn {
+            background: var(--primary-color);
+            color: white;
+            border: none;
+            padding: 8px 16px;
+            border-radius: 16px;
+            cursor: pointer;
+            font-weight: 500;
+            transition: var(--transition);
+        }
+        
+        .send-btn:hover {
+            background: var(--primary-light);
+            transform: translateY(-2px);
+        }
+        
+        .send-btn:disabled {
+            background: var(--text-secondary);
+            cursor: not-allowed;
+            transform: none;
+        }
+        
+        /* 功能扩展区 */
+        .function-extension {
+            display: flex;
+            justify-content: space-around;
+            padding: 12px 16px;
+            background: white;
+            border-top: 1px solid #f0f0f0;
+        }
+        
+        .extension-item {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 6px;
+            cursor: pointer;
+            padding: 8px 12px;
+            border-radius: 8px;
+            transition: var(--transition);
+        }
+        
+        .extension-item:hover {
+            background: var(--bg-color);
+            transform: translateY(-2px);
+        }
+        
+        .extension-item i {
+            font-size: 20px;
+            color: var(--primary-color);
+        }
+        
+        .extension-item span {
+            font-size: 12px;
+            color: var(--text-secondary);
+        }
+        
+        /* 底部导航栏 */
+        .bottom-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            max-width: 500px;
+            margin: 0 auto;
+            background: white;
+            display: flex;
+            justify-content: space-around;
+            padding: 12px 0;
+            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
+            z-index: 100;
+        }
+        
+        .nav-item {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 8px 16px;
+            border-radius: 20px;
+            transition: var(--transition);
+            cursor: pointer;
+        }
+        
+        .nav-item.active {
+            background: rgba(26, 35, 126, 0.1);
+        }
+        
+        .nav-icon {
+            font-size: 20px;
+            margin-bottom: 4px;
+        }
+        
+        .nav-text {
+            font-size: 12px;
+            font-weight: 500;
+        }
+        
+        .nav-item.active .nav-text {
+            color: var(--primary-color);
+        }
+        
+        /* 加载动画 */
+        .typing-indicator {
+            display: flex;
+            align-items: center;
+            padding: 12px 16px;
+            background: white;
+            border-radius: 18px;
+            border: 1px solid #e0e0e0;
+            width: fit-content;
+            box-shadow: var(--shadow);
+        }
+        
+        .typing-dots {
+            display: flex;
+            gap: 4px;
+        }
+        
+        .typing-dot {
+            width: 8px;
+            height: 8px;
+            background: var(--text-secondary);
+            border-radius: 50%;
+            animation: typing 1.4s infinite ease-in-out;
+        }
+        
+        .typing-dot:nth-child(1) { animation-delay: -0.32s; }
+        .typing-dot:nth-child(2) { animation-delay: -0.16s; }
+        
+        @keyframes typing {
+            0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
+            40% { transform: scale(1); opacity: 1; }
+        }
+        
+        /* 响应式调整 */
+        @media (max-height: 700px) {
+            .consult-container {
+                height: calc(100vh - 120px);
+            }
+            
+            .quick-templates {
+                padding: 12px 16px;
+            }
+            
+            .input-area {
+                padding: 12px 16px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <div class="top-nav">
+        <div class="nav-title">AI法律咨询</div>
+        <div class="nav-actions">
+            <div class="nav-action" onclick="showConsultHistory()">
+                <i class="fas fa-history"></i>
+            </div>
+            <div class="nav-action" onclick="showLawSearch()">
+                <i class="fas fa-search"></i>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 咨询页面容器 -->
+    <div class="consult-container">
+        <!-- 快捷问题模板 -->
+        <div class="quick-templates">
+            <div class="template-item" onclick="useTemplate('劳动纠纷咨询')">劳动纠纷咨询</div>
+            <div class="template-item" onclick="useTemplate('合同审查要点')">合同审查要点</div>
+            <div class="template-item" onclick="useTemplate('赔偿金额计算')">赔偿金额计算</div>
+            <div class="template-item" onclick="useTemplate('法律文书起草')">法律文书起草</div>
+            <div class="template-item" onclick="useTemplate('证据收集指导')">证据收集指导</div>
+            <div class="template-item" onclick="useTemplate('诉讼流程咨询')">诉讼流程咨询</div>
+        </div>
+        
+        <!-- 对话历史区 -->
+        <div class="chat-history" id="chatHistory">
+            <!-- 初始AI欢迎消息 -->
+            <div class="message ai-message">
+                <div class="message-avatar">
+                    <i class="fas fa-robot"></i>
+                </div>
+                <div class="message-content">
+                    <div class="conclusion">您好!我是您的AI法律助手,可以为您提供法律咨询、法条查询、案例分析和文书生成等服务。</div>
+                    <div class="legal-reference">基于《中华人民共和国法律咨询服务规范》提供专业建议</div>
+                    <div class="action-steps">
+                        <strong>您可以:</strong>
+                        <ol>
+                            <li>描述您的法律问题</li>
+                            <li>上传相关文件让我分析</li>
+                            <li>使用快捷模板快速提问</li>
+                        </ol>
+                    </div>
+                    <div class="explanation">我会用通俗易懂的方式解释法律概念,并提供具体的行动建议。</div>
+                </div>
+            </div>
+            
+            <!-- 示例对话 -->
+            <div class="message user-message">
+                <div class="message-content">
+                    公司无故辞退我,应该怎么办?
+                </div>
+                <div class="message-avatar">
+                    <i class="fas fa-user"></i>
+                </div>
+            </div>
+            
+            <div class="message ai-message">
+                <div class="message-avatar">
+                    <i class="fas fa-robot"></i>
+                </div>
+                <div class="message-content">
+                    <div class="conclusion">结论摘要:公司无故辞退属于违法解除劳动合同,您有权要求赔偿。</div>
+                    <div class="legal-reference">
+                        <strong>法律依据:</strong>
+                        《劳动合同法》第四十八条:用人单位违反本法规定解除或者终止劳动合同,劳动者要求继续履行劳动合同的,用人单位应当继续履行;劳动者不要求继续履行劳动合同或者劳动合同已经不能继续履行的,用人单位应当依照本法第八十七条规定支付赔偿金。
+                    </div>
+                    <div class="action-steps">
+                        <strong>行动步骤:</strong>
+                        <ol>
+                            <li>收集证据:劳动合同、工资单、辞退通知等</li>
+                            <li>与公司协商,要求支付赔偿金</li>
+                            <li>协商不成可申请劳动仲裁</li>
+                            <li>对仲裁结果不服可向人民法院提起诉讼</li>
+                        </ol>
+                    </div>
+                    <div class="explanation">
+                        通俗解释:就像租房子房东不能随便赶走租客一样,公司也不能无故辞退员工,否则需要支付相当于2倍经济补偿的赔偿金。
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 输入控制区 -->
+        <div class="input-area">
+            <div class="input-container">
+                <div class="attach-btn" onclick="attachFile()">
+                    <i class="fas fa-paperclip"></i>
+                </div>
+                <input type="text" placeholder="输入您的问题..." id="chatInput">
+                <div class="voice-btn" id="voiceBtn" onclick="toggleVoiceInput()">
+                    <i class="fas fa-microphone"></i>
+                </div>
+                <button class="send-btn" id="sendBtn" onclick="sendMessage()">发送</button>
+            </div>
+        </div>
+        
+        <!-- 功能扩展区 -->
+        <div class="function-extension">
+            <div class="extension-item" onclick="attachFile()">
+                <i class="fas fa-file-upload"></i>
+                <span>附件上传</span>
+            </div>
+            <div class="extension-item" onclick="showRelatedTools()">
+                <i class="fas fa-tools"></i>
+                <span>关联工具</span>
+            </div>
+            <div class="extension-item" onclick="saveConversation()">
+                <i class="fas fa-star"></i>
+                <span>收藏回答</span>
+            </div>
+            <div class="extension-item" onclick="shareConversation()">
+                <i class="fas fa-share-alt"></i>
+                <span>分享咨询</span>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 底部导航栏 -->
+    <div class="bottom-nav">
+        <div class="nav-item" onclick="switchPage('home')">
+            <div class="nav-icon">
+                <i class="fas fa-home"></i>
+            </div>
+            <div class="nav-text">首页</div>
+        </div>
+        <div class="nav-item active">
+            <div class="nav-icon">
+                <i class="fas fa-comments"></i>
+            </div>
+            <div class="nav-text">咨询</div>
+        </div>
+        <div class="nav-item" onclick="switchPage('tools')">
+            <div class="nav-icon">
+                <i class="fas fa-tools"></i>
+            </div>
+            <div class="nav-text">工具</div>
+        </div>
+        <div class="nav-item" onclick="switchPage('profile')">
+            <div class="nav-icon">
+                <i class="fas fa-user"></i>
+            </div>
+            <div class="nav-text">我的</div>
+        </div>
+    </div>
+
+    <script>
+        // DOM元素
+        const chatInput = document.getElementById('chatInput');
+        const sendBtn = document.getElementById('sendBtn');
+        const voiceBtn = document.getElementById('voiceBtn');
+        const chatHistory = document.getElementById('chatHistory');
+        
+        // 发送消息功能
+        function sendMessage() {
+            const message = chatInput.value.trim();
+            if (message) {
+                // 添加用户消息
+                addUserMessage(message);
+                chatInput.value = '';
+                sendBtn.disabled = true;
+                
+                // 显示AI正在输入
+                showTypingIndicator();
+                
+                // 模拟AI回复(实际项目中会调用AI API)
+                setTimeout(() => {
+                    removeTypingIndicator();
+                    addAIResponse(message);
+                }, 2000);
+            }
+        }
+        
+        // 添用户消息到聊天界面
+        function addUserMessage(content) {
+            const messageDiv = document.createElement('div');
+            messageDiv.className = 'message user-message';
+            messageDiv.innerHTML = `
+                <div class="message-content">${content}</div>
+                <div class="message-avatar">
+                    <i class="fas fa-user"></i>
+                </div>
+            `;
+            chatHistory.appendChild(messageDiv);
+            scrollToBottom();
+        }
+        
+        // 添加AI回复
+        function addAIResponse(userMessage) {
+            // 根据用户消息生成不同的回复(简化版)
+            let response = generateAIResponse(userMessage);
+            
+            const messageDiv = document.createElement('div');
+            messageDiv.className = 'message ai-message';
+            messageDiv.innerHTML = `
+                <div class="message-avatar">
+                    <i class="fas fa-robot"></i>
+                </div>
+                <div class="message-content">
+                    ${response}
+                </div>
+            `;
+            chatHistory.appendChild(messageDiv);
+            scrollToBottom();
+            sendBtn.disabled = false;
+        }
+        
+        // 生成AI回复(简化版)
+        function generateAIResponse(userMessage) {
+            const responses = {
+                '劳动': `
+                    <div class="conclusion">结论摘要:劳动纠纷通常涉及劳动合同、工资报酬、工作时间等问题。</div>
+                    <div class="legal-reference">
+                        <strong>法律依据:</strong>
+                        《劳动合同法》相关规定保障劳动者权益,包括签订书面合同、支付劳动报酬、提供劳动保护等。
+                    </div>
+                    <div class="action-steps">
+                        <strong>行动步骤:</strong>
+                        <ol>
+                            <li>收集相关证据材料</li>
+                            <li>与用人单位协商解决</li>
+                            <li>向劳动监察部门投诉</li>
+                            <li>申请劳动仲裁或提起诉讼</li>
+                        </ol>
+                    </div>
+                    <div class="explanation">
+                        通俗解释:工作中遇到问题,首先要保留证据,然后按照法定程序维护自己的权益。
+                    </div>
+                `,
+                '合同': `
+                    <div class="conclusion">结论摘要:合同审查需要注意主体资格、条款内容、权利义务等方面。</div>
+                    <div class="legal-reference">
+                        <strong>法律依据:</strong>
+                        《民法典》合同编规定了合同的订立、效力、履行、变更和转让、权利义务终止等内容。
+                    </div>
+                    <div class="action-steps">
+                        <strong>行动步骤:</strong>
+                        <ol>
+                            <li>审查合同主体是否适格</li>
+                            <li>检查关键条款是否明确</li>
+                            <li>注意违约责任条款</li>
+                            <li>确认争议解决方式</li>
+                        </ol>
+                    </div>
+                    <div class="explanation">
+                        通俗解释:签合同就像做交易,要看清条款,明确双方责任,避免日后纠纷。
+                    </div>
+                `,
+                '默认': `
+                    <div class="conclusion">结论摘要:我已理解您的问题,将为您提供专业的法律分析。</div>
+                    <div class="legal-reference">
+                        <strong>法律依据:</strong>
+                        根据相关法律法规和司法实践,针对您的情况提供以下建议。
+                    </div>
+                    <div class="action-steps">
+                        <strong>行动步骤:</strong>
+                        <ol>
+                            <li>详细描述具体情况</li>
+                            <li>提供相关证据材料</li>
+                            <li>明确您的诉求</li>
+                            <li>我可以为您生成详细解决方案</li>
+                        </ol>
+                    </div>
+                    <div class="explanation">
+                        通俗解释:请详细说明您遇到的法律问题,我会用通俗易懂的方式为您解答。
+                    </div>
+                `
+            };
+            
+            // 根据关键词匹配回复
+            if (userMessage.includes('劳动') || userMessage.includes('工资') || userMessage.includes('辞退')) {
+                return responses['劳动'];
+            } else if (userMessage.includes('合同') || userMessage.includes('协议') || userMessage.includes('条款')) {
+                return responses['合同'];
+            } else {
+                return responses['默认'];
+            }
+        }
+        
+        // 显示正在输入指示器
+        function showTypingIndicator() {
+            const typingDiv = document.createElement('div');
+            typingDiv.className = 'message ai-message';
+            typingDiv.id = 'typingIndicator';
+            typingDiv.innerHTML = `
+                <div class="message-avatar">
+                    <i class="fas fa-robot"></i>
+                </div>
+                <div class="typing-indicator">
+                    <div class="typing-dots">
+                        <div class="typing-dot"></div>
+                        <div class="typing-dot"></div>
+                        <div class="typing-dot"></div>
+                    </div>
+                </div>
+            `;
+            chatHistory.appendChild(typingDiv);
+            scrollToBottom();
+        }
+        
+        // 移除正在输入指示器
+        function removeTypingIndicator() {
+            const typingIndicator = document.getElementById('typingIndicator');
+            if (typingIndicator) {
+                typingIndicator.remove();
+            }
+        }
+        
+        // 滚动到底部
+        function scrollToBottom() {
+            chatHistory.scrollTop = chatHistory.scrollHeight;
+        }
+        
+        // 使用快捷模板
+        function useTemplate(template) {
+            chatInput.value = template;
+            chatInput.focus();
+        }
+        
+        // 语音输入功能
+        let isListening = false;
+        function toggleVoiceInput() {
+            if (!isListening) {
+                // 开始语音输入
+                voiceBtn.classList.add('listening');
+                voiceBtn.innerHTML = '<i class="fas fa-stop"></i>';
+                isListening = true;
+                alert('开始语音识别...请说话');
+                
+                // 模拟语音识别结果
+                setTimeout(() => {
+                    const voiceResults = [
+                        "如何申请劳动仲裁?",
+                        "租房合同纠纷怎么处理?",
+                        "交通事故责任认定标准",
+                        "离婚财产分割原则"
+                    ];
+                    const randomResult = voiceResults[Math.floor(Math.random() * voiceResults.length)];
+                    chatInput.value = randomResult;
+                    stopVoiceInput();
+                }, 3000);
+            } else {
+                stopVoiceInput();
+            }
+        }
+        
+        function stopVoiceInput() {
+            voiceBtn.classList.remove('listening');
+            voiceBtn.innerHTML = '<i class="fas fa-microphone"></i>';
+            isListening = false;
+        }
+        
+        // 输入框事件
+        chatInput.addEventListener('input', function() {
+            sendBtn.disabled = !this.value.trim();
+        });
+        
+        chatInput.addEventListener('keypress', function(e) {
+            if (e.key === 'Enter' && !sendBtn.disabled) {
+                sendMessage();
+            }
+        });
+        
+        // 其他功能函数
+        function attachFile() {
+            alert('打开文件选择器,支持图片、PDF、Word文档等格式');
+        }
+        
+        function showRelatedTools() {
+            alert('显示相关工具:文书生成、赔偿计算器等');
+        }
+        
+        function saveConversation() {
+            alert('当前咨询已收藏');
+        }
+        
+        function shareConversation() {
+            alert('分享咨询记录');
+        }
+        
+        function showConsultHistory() {
+            alert('打开咨询历史页面');
+        }
+        
+        function showLawSearch() {
+            alert('打开法条案例检索页面');
+        }
+        
+        function switchPage(page) {
+            alert(`切换到${page}页面`);
+            // 实际项目中这里会进行页面跳转
+        }
+        
+        // 初始化
+        window.onload = function() {
+            sendBtn.disabled = true;
+            scrollToBottom();
+        };
+    </script>
+</body>
+</html>