feat:2

AppUI.md

@@ -0,0 +1,256 @@
+# 律助App - 手机端统一UI设计规范
+
+## 🎨 整体视觉风格
+
+### 设计主题
+
+#### 专业科技感 + 人文关怀
+
+- 主色调：专业蓝色系（#1A4B8C 深蓝，#2D6BC9 中蓝，#E8F1FD 浅蓝）
+- 辅助色：公正金色（#D4AF37），成功绿色（#27AE60）
+- 字体：系统默认字体，支持动态字体大小调整
+- 圆角：12px统一圆角，保持现代感
+- 阴影：三层阴影系统，营造层次感
+
+## 📱 页面布局规范
+
+### 1. 首页设计
+
+**布局结构：**
+
+- 状态栏：透明背景，白色图标
+- 导航栏：纯白背景，左侧Logo，右侧消息图标
+- 内容区：浅蓝渐变背景（#F8FBFF → #FFFFFF）
+
+**核心组件：**
+
+- **语音悬浮按钮**：直径64px，主蓝径向渐变，位于右下角固定位置，带有微脉动动画
+- **功能入口网格**：3×2宫格布局，每个卡片尺寸为(屏幕宽度-48px)/3
+- **案件状态区**：白色卡片，内含进度条和待办事项
+- **内容推荐区**：横向滚动卡片，展示热点问题和普法内容
+
+**交互细节：**
+
+- 卡片悬停效果：上浮4px，阴影加深
+- 加载状态：骨架屏动画
+- 空状态：插画+引导文字
+
+### 2. 咨询页面设计
+
+**对话界面布局：**
+
+- 顶部：对话标题栏，包含返回按钮和功能菜单
+- 中部：消息列表，占满剩余空间
+- 底部：输入区域，包含文本输入和语音按钮
+
+**消息气泡设计：**
+
+- **用户消息**：浅蓝色背景（#E8F1FD），右对齐，圆角18px
+- **AI回复**：白色背景，左对齐，左侧金色竖条标识，圆角18px
+- **法律条文**：金色渐变背景（#FFF9E6），特殊边框，专属图标
+
+**输入区域：**
+
+- 文本输入框：圆角24px，带占位符提示
+- 语音按钮：圆形，主蓝色背景
+- 快捷问题：横向滚动标签
+
+### 3. 工具页面设计
+
+**分类导航：**
+
+- 横向滚动标签栏，选中状态蓝色底+白字
+- 分类图标：线性图标，选中时填充主蓝色
+
+**工具卡片：**
+
+- 2列网格布局，间距16px
+- 卡片尺寸：正方形，包含图标和名称
+- 图标容器：圆形背景，浅蓝色渐变
+- 悬停效果：轻微缩放和阴影变化
+
+**工具详情页：**
+
+- 步骤引导式界面
+- 大字体输入框
+- 可视化结果展示
+- 一键导出功能
+
+### 4. 案件页面设计
+
+**时间轴布局：**
+
+- 垂直时间线，左侧对齐
+- 节点：实心圆点，不同状态不同颜色
+- 连接线：虚线，浅灰色
+- 事件卡片：白色背景，包含时间和描述
+
+**进度追踪：**
+
+- 环形进度条或线性进度条
+- 阶段标记：不同颜色区分状态
+- 待办清单：复选框列表形式
+
+### 5. 服务页面设计
+
+**地图/列表视图：**
+
+- 顶部筛选栏：毛玻璃效果
+- 机构卡片：包含头像、评分、距离等信息
+- 地图标记：不同颜色区分机构类型
+
+**律师详情页：**
+
+- 头部：大图背景，半透明覆盖
+- 信息区：白色卡片，包含专业领域和评价
+- 服务选项：卡片式选择器
+
+### 6. 学习页面设计
+
+**内容展示：**
+
+- 分类导航：图标+文字形式
+- 内容卡片：16:9比例，包含封面和标题
+- 进度指示：底部进度条
+
+**学习界面：**
+
+- 视频播放器：自定义控制条
+- 课程目录：可折叠列表
+- 互动测试：选项卡片形式
+
+### 7. 个人中心设计
+
+**信息布局：**
+
+- 头部：浅蓝渐变背景，用户头像居中
+- 功能列表：图标+文字，分组显示
+- 设置项：开关、选择器等标准组件
+
+## 🎯 交互设计规范
+
+### 导航模式
+
+- **底部标签栏**：7个主要功能入口
+- **返回导航**：左上角返回按钮+手势返回
+- **模态弹窗**：从底部滑出，暗色遮罩
+
+### 动效规范
+
+- **页面切换**：淡入淡出，时长300ms
+- **卡片出现**：从下往上轻微移动
+- **加载状态**：骨架屏+渐显动画
+- **成功反馈**：轻微弹跳+颜色变化
+
+### 手势操作
+
+- **下拉刷新**：自定义加载动画
+- **左滑删除**：确认式删除操作
+- **长按编辑**：震动反馈+编辑模式
+
+## 🎨 组件设计系统
+
+### 按钮系统
+
+**主要按钮：**
+
+- 背景：主蓝色渐变
+- 圆角：8px
+- 内边距：12px 24px
+- 字体：白色，中等字重
+
+**次要按钮：**
+
+- 背景：透明
+- 边框：1px主蓝色
+- 文字：主蓝色
+
+**文字按钮：**
+
+- 无背景，主蓝色文字
+- 带下划线或图标
+
+### 表单控件
+
+**输入框：**
+
+- 圆角：8px
+- 边框：1px浅灰色
+- 聚焦状态：蓝色边框
+- 错误状态：红色边框
+
+**选择器：**
+
+- 下拉式选择
+- 单选/多选列表
+- 日期时间选择器
+
+### 提示反馈
+
+**Toast提示：**
+
+- 位置：底部居中
+- 背景：半透明黑色
+- 动画：从下往上滑入
+
+**模态对话框：**
+
+- 居中显示
+- 暗色遮罩
+- 按钮横向排列
+
+## 📐 间距与尺寸
+
+### 间距系统
+
+- **基础单位**：4px
+- **小间距**：8px（元素内部）
+- **中间距**：16px（元素之间）
+- **大间距**：24px（区块之间）
+- **超大间距**：32px（页面边缘）
+
+### 字体层级
+
+- **超大标题**：24px，字重600
+- **大标题**：20px，字重600
+- **正文标题**：17px，字重500
+- **正文**：16px，字重400
+- **辅助文字**：14px，字重400
+- **说明文字**：12px，字重400
+
+## 🌙 深色模式适配
+
+### 色彩映射
+
+- 背景色：#121212
+- 表面色：#1E1E1E
+- 卡片色：#252525
+- 文字色：白色，不同透明度层级
+
+### 特殊处理
+
+- 图片亮度适当降低
+- 阴影效果更加柔和
+- 保持品牌色系不变
+
+## 🔧 无障碍设计
+
+### 字体可调
+
+- 支持系统字体大小设置
+- 最小字体不小于12px
+- 行高不小于1.4倍
+
+### 颜色对比
+
+- 文字与背景对比度≥4.5:1
+- 重要操作按钮对比度≥3:1
+- 色盲友好配色方案
+
+### 语音支持
+
+- 所有功能支持语音操作
+- 重要信息支持语音播报
+- 语音反馈可调节语速
+
+这套设计系统确保了律助App在保持专业性的同时，提供精美、一致且易用的用户体验，完全适配手机端各种使用场景。

legal-assistant-app/src/app/app.html

@@ -2,6 +2,3 @@
   <router-outlet></router-outlet>
   <app-bottom-tab-navigation></app-bottom-tab-navigation>
 </div>
-
-
-<router-outlet />

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

@@ -1,5 +1,5 @@
 .app-container {
   min-height: 100vh;
-  padding-bottom: 60px; // 为底部导航留出空间
+  padding-bottom: calc(80px + env(safe-area-inset-bottom)); // 为底部导航留出更充裕的安全区域空间
   box-sizing: border-box;
 }

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

@@ -1 +1,17 @@
-<p>case-detail-editor works!</p>
+<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>
+</div>

legal-assistant-app/src/app/pages/cases/case-detail-editor/case-detail-editor.scss

@@ -0,0 +1,7 @@
+// 案件详情编辑样式
+.case-editor-container { padding: 12px; }
+.header h3 { margin: 0 0 10px 0; color: #1A4B8C; }
+.form label { display: block; margin: 8px 0 4px; color: #303B49; }
+.form input, .form textarea { width: 100%; background: #FFFFFF; border: none; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); padding: 10px; }
+.actions { margin-top: 12px; }
+.actions .primary { background: linear-gradient(90deg, #2D6BC9, #1A4B8C); color: #FFFFFF; border: none; border-radius: 10px; padding: 8px 14px; }

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

@@ -1,11 +1,15 @@
 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: [],
+  imports: [CommonModule, RouterModule, MatIconModule, FormsModule],
   templateUrl: './case-detail-editor.html',
   styleUrl: './case-detail-editor.scss'
 })
 export class CaseDetailEditor {
-
+  title: string = '';
 }

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

@@ -1 +1,27 @@
-<p>case-management-center works!</p>
+<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>
+</div>

legal-assistant-app/src/app/pages/cases/case-management-center/case-management-center.scss

@@ -0,0 +1,8 @@
+// 案件管理中心样式
+.case-mgt-container { padding: 12px; }
+.section h3 { margin: 0 0 8px 0; color: #1A4B8C; }
+.list { display: flex; flex-direction: column; gap: 8px; }
+.item { display: flex; align-items: center; justify-content: space-between; text-decoration: none; background: #FFFFFF; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); padding: 12px; }
+.item .left { display: flex; align-items: center; gap: 10px; }
+.item .title { color: #303B49; }
+.item .sub { color: #8592A6; font-size: 12px; }

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

@@ -1,11 +1,12 @@
 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: [],
+  imports: [CommonModule, RouterModule, MatIconModule],
   templateUrl: './case-management-center.html',
   styleUrl: './case-management-center.scss'
 })
-export class CaseManagementCenter {
-
-}
+export class CaseManagementCenter {}

legal-assistant-app/src/app/pages/cases/cases.html

@@ -1 +1,25 @@
-<p>cases works!</p>
+<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>
+
+  <router-outlet></router-outlet>
+</div>

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

@@ -0,0 +1,12 @@
+// 案件模块主页面样式
+.cases-container { padding: 12px 12px 72px 12px; }
+.module-header h1 { font-size: 18px; margin: 0 0 8px 0; color: #1A4B8C; }
+
+.feature-group h2 { font-size: 16px; margin: 12px 0 8px; color: #303B49; }
+.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
+.card {
+  display: flex; flex-direction: column; align-items: center; gap: 6px;
+  text-decoration: none; background: #FFFFFF; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); padding: 12px;
+}
+.card mat-icon { background: #E8F1FD; color: #2D6BC9; border-radius: 10px; padding: 8px; }
+.card span { color: #1A4B8C; }

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

@@ -1,11 +1,12 @@
 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: [],
+  imports: [CommonModule, RouterModule, MatIconModule],
   templateUrl: './cases.html',
   styleUrl: './cases.scss'
 })
-export class Cases {
-
-}
+export class Cases {}

legal-assistant-app/src/app/pages/cases/service-progress-tracking/service-progress-tracking.html

@@ -1 +1,22 @@
-<p>service-progress-tracking works!</p>
+<div class="progress-container">
+  <h3>服务进度追踪</h3>
+  <ul class="timeline">
+    <li>
+      <div class="dot"></div>
+      <div class="content">
+        <div class="title">已提交仲裁申请</div>
+        <div class="time">2025-09-05 10:21</div>
+      </div>
+    </li>
+    <li>
+      <div class="dot"></div>
+      <div class="content">
+        <div class="title">仲裁庭开庭通知</div>
+        <div class="time">2025-09-22 09:00</div>
+      </div>
+    </li>
+  </ul>
+  <div class="actions">
+    <a class="btn" routerLink="/cases/case-editor">更新详情</a>
+  </div>
+</div>

legal-assistant-app/src/app/pages/cases/service-progress-tracking/service-progress-tracking.scss

@@ -0,0 +1,8 @@
+// 进度追踪样式
+.progress-container { padding: 12px; }
+.timeline { list-style: none; padding: 0; margin: 0; }
+.timeline li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
+.timeline .dot { width: 12px; height: 12px; background: #2D6BC9; border-radius: 50%; margin-top: 6px; }
+.timeline .content .title { color: #303B49; }
+.timeline .content .time { color: #8592A6; font-size: 12px; }
+.actions .btn { display: inline-block; background: #E8F1FD; color: #2D6BC9; padding: 8px 12px; border-radius: 10px; text-decoration: none; }

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

@@ -1,11 +1,12 @@
 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: [],
+  imports: [CommonModule, RouterModule, MatIconModule],
   templateUrl: './service-progress-tracking.html',
   styleUrl: './service-progress-tracking.scss'
 })
-export class ServiceProgressTracking {
-
-}
+export class ServiceProgressTracking {}

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

@@ -1 +1,21 @@
-<p>ai-consultation-dialog works!</p>
+<div class="dialog-container">
+  <div class="messages">
+    <div class="message user">
+      <div class="bubble">我想咨询交通事故赔偿需要准备哪些材料？</div>
+    </div>
+    <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>
+    </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>
+  </div>
+</div>

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

@@ -0,0 +1,66 @@
+// AI对话页样式，包含消息区与底部输入栏
+.dialog-container {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 160px - env(safe-area-inset-bottom)); // 头部 + 底部导航高度预留
+  padding: 8px 12px 88px 12px; // 预留底部输入栏空间
+}
+
+.messages {
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.message {
+  display: flex;
+  &.user { justify-content: flex-end; }
+  &.ai { justify-content: flex-start; }
+}
+
+.bubble {
+  max-width: 78%;
+  padding: 10px 12px;
+  border-radius: 14px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+}
+.message.user .bubble {
+  background: #E8F1FD;
+  color: #1A4B8C;
+  border-top-right-radius: 4px;
+}
+.message.ai .bubble {
+  background: #FFFFFF;
+  border-top-left-radius: 4px;
+}
+
+.input-bar {
+  position: fixed;
+  left: 0; right: 0;
+  bottom: calc(62px + env(safe-area-inset-bottom)); // 底部导航高度
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: rgba(255,255,255,0.75);
+  backdrop-filter: saturate(180%) blur(20px);
+  border-top: 1px solid rgba(255,255,255,0.8);
+}
+.input-bar input {
+  flex: 1;
+  height: 40px;
+  border: none;
+  border-radius: 12px;
+  padding: 0 12px;
+  background: #FFFFFF;
+  box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
+}
+.voice-btn, .send-btn {
+  background: #E8F1FD;
+  border: none;
+  border-radius: 12px;
+  width: 40px; height: 40px;
+  display: flex; align-items: center; justify-content: center;
+}

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

@@ -1,8 +1,10 @@
 import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
 
 @Component({
   selector: 'app-ai-consultation-dialog',
-  imports: [],
+  imports: [CommonModule, MatIconModule],
   templateUrl: './ai-consultation-dialog.html',
   styleUrl: './ai-consultation-dialog.scss'
 })

legal-assistant-app/src/app/pages/consultation/consultation-history/consultation-history.html

@@ -1 +1,17 @@
-<p>consultation-history works!</p>
+<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>

legal-assistant-app/src/app/pages/consultation/consultation-history/consultation-history.scss

@@ -0,0 +1,18 @@
+// 咨询历史列表样式
+.history-container { padding: 12px; }
+.history-header h3 { margin: 0; color: #1A4B8C; }
+.history-header .sub { color: #8592A6; font-size: 12px; }
+
+.history-list { display: flex; flex-direction: column; gap: 10px; }
+.history-card {
+  display: block;
+  text-decoration: none;
+  background: #FFFFFF;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+  padding: 12px;
+}
+.card-title { display: flex; align-items: center; gap: 8px; }
+.card-title h4 { margin: 0; color: #303B49; }
+.card-meta { color: #8592A6; font-size: 12px; margin-top: 4px; }
+.card-summary { color: #4C5664; margin-top: 6px; }

legal-assistant-app/src/app/pages/consultation/consultation-history/consultation-history.ts

@@ -1,11 +1,18 @@
 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: [],
+  imports: [CommonModule, RouterModule, MatIconModule],
   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' }
+  ];
 }

legal-assistant-app/src/app/pages/consultation/consultation.html

@@ -1 +1,9 @@
-<p>consultation works!</p>
+<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>
+
+  <router-outlet></router-outlet>
+</div>

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

@@ -0,0 +1,28 @@
+// 咨询主页面头部样式
+.consultation-container {
+  padding: 12px 12px 72px 12px; // 预留底部导航空间
+}
+
+.consultation-header {
+  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;
+  }
+
+  .back-btn, .menu-btn {
+    background: #E8F1FD;
+    border: none;
+    border-radius: 10px;
+    padding: 6px;
+  }
+}

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

@@ -1,8 +1,11 @@
 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',
-  imports: [],
+  imports: [CommonModule, RouterModule, MatIconModule],
   templateUrl: './consultation.html',
   styleUrl: './consultation.scss'
 })

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

@@ -1 +1,25 @@
-<p>legal-case-search works!</p>
+<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>

legal-assistant-app/src/app/pages/consultation/legal-case-search/legal-case-search.scss

@@ -0,0 +1,54 @@
+// 法条案例检索页样式，符合AppUI规范
+.case-search-container {
+  padding: 12px;
+}
+.search-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: #FFFFFF;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+  padding: 8px 12px;
+  margin-bottom: 10px;
+}
+.search-bar input {
+  flex: 1;
+  border: none;
+  height: 40px;
+  border-radius: 10px;
+  padding: 0 10px;
+  background: #F8FBFF;
+}
+.search-btn {
+  background: linear-gradient(90deg, #2D6BC9, #1A4B8C);
+  color: #FFFFFF;
+  border: none;
+  border-radius: 10px;
+  padding: 8px 14px;
+}
+
+.filters { display: flex; gap: 8px; margin-bottom: 12px; }
+.filter-chip {
+  padding: 6px 10px;
+  border-radius: 14px;
+  border: 1px solid #E0E7EF;
+  background: #FFFFFF;
+  color: #2D6BC9;
+}
+.filter-chip.active {
+  background: #E8F1FD;
+  border-color: #2D6BC9;
+}
+
+.results { display: flex; flex-direction: column; gap: 10px; }
+.result-card {
+  display: block;
+  text-decoration: none;
+  background: #FFFFFF;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+  padding: 12px;
+}
+.result-card h4 { margin: 0 0 6px 0; color: #1A4B8C; }
+.result-card p { margin: 0; color: #666; }

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

@@ -1,11 +1,15 @@
 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: [],
+  imports: [CommonModule, RouterModule, MatIconModule, FormsModule],
   templateUrl: './legal-case-search.html',
   styleUrl: './legal-case-search.scss'
 })
 export class LegalCaseSearch {
-
+  keyword: string = '';
 }

legal-assistant-app/src/app/pages/home/home.html

@@ -1,30 +1,247 @@
+<!-- 状态栏 -->
+<div class="status-bar"></div>
+
+<!-- 主内容区域 -->
 <div class="home-container">
-  <h1>法律助手</h1>
-  <p>欢迎使用智能法律助手，为您提供专业的法律服务</p>
-  
-  <div class="feature-cards">
-    <div class="feature-card" routerLink="/consultation">
-      <mat-icon>chat</mat-icon>
-      <h3>AI咨询</h3>
-      <p>智能法律问答</p>
+  <!-- 导航栏 -->
+  <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>
     </div>
-    
-    <div class="feature-card" routerLink="/tools">
-      <mat-icon>build</mat-icon>
-      <h3>法律工具</h3>
-      <p>实用法律工具集</p>
+  </header>
+
+  <!-- 搜索栏 -->
+  <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="feature-card" routerLink="/cases">
-      <mat-icon>folder</mat-icon>
-      <h3>案件管理</h3>
-      <p>案件跟踪管理</p>
+  </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>
+
+      <!-- 最近案件进度 -->
+      <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>
+
+      <!-- 待办提醒 -->
+      <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>
+  </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>
+        <span class="function-label">法律学习中心</span>
+      </div>
     </div>
-    
-    <div class="feature-card" routerLink="/services">
-      <mat-icon>support_agent</mat-icon>
-      <h3>法律服务</h3>
-      <p>专业法律服务</p>
+  </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>
+
+    <!-- 普法短视频 -->
+    <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>
+        }
+      </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>
+  </div>
+
+  <!-- 语音咨询悬浮按钮 -->
+  <div class="voice-fab">
+    <button class="voice-button" (click)="onVoiceConsultation()">
+      <mat-icon>mic</mat-icon>
+    </button>
   </div>
 </div>

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

@@ -1,60 +1,794 @@
+// iOS风格首页样式
 .home-container {
-  padding: 20px;
-  text-align: center;
+  min-height: 100vh;
+  background: linear-gradient(180deg, #F8FBFF 0%, #FFFFFF 100%);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  color: #1D2129;
+  padding-bottom: 100px; // 为底部导航留空间
+}
+
+// 状态栏
+.status-bar {
+  height: 24px;
+  background: transparent;
+  width: 100%;
+}
+
+// 导航栏
+.nav-bar {
+  background: white;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  padding: 12px 16px;
+  position: fixed;
+  top: 24px;
+  left: 0;
+  right: 0;
+  z-index: 30;
+  border-radius: 0 0 16px 16px;
 
-  h1 {
-    color: #1976d2;
-    margin-bottom: 10px;
-    font-size: 2rem;
+  .nav-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
   }
 
-  > p {
-    color: #666;
-    margin-bottom: 30px;
-    font-size: 1.1rem;
+  .nav-left {
+    display: flex;
+    align-items: center;
+
+    .app-logo {
+      width: 40px;
+      height: 40px;
+      border-radius: 8px;
+      object-fit: cover;
+    }
+
+    .app-title {
+      margin-left: 8px;
+      font-size: 20px;
+      font-weight: 700;
+      color: #165DFF;
+    }
+  }
+
+  .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;
+      }
+    }
   }
 }
 
-.feature-cards {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  gap: 20px;
-  max-width: 600px;
-  margin: 0 auto;
+// 搜索栏
+.search-section {
+  padding: 80px 16px 16px;
+
+  .search-container {
+    position: relative;
+
+    .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;
+
+      &:focus {
+        box-shadow: 0 4px 12px rgba(22, 93, 255, 0.15);
+        transform: translateY(-1px);
+      }
+
+      &::placeholder {
+        color: #86909C;
+      }
+    }
+
+    .search-icon {
+      position: absolute;
+      left: 16px;
+      top: 50%;
+      transform: translateY(-50%);
+      color: #86909C;
+    }
+
+    .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;
+      }
+    }
+  }
 }
 
-.feature-card {
-  background: white;
-  border-radius: 12px;
-  padding: 20px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  cursor: pointer;
-  transition: all 0.3s ease;
-  text-decoration: none;
-  color: inherit;
+// 智能状态区
+.smart-status-section {
+  padding: 0 16px 24px;
+
+  .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-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;
+      }
+    }
 
-  &:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+    .user-avatar {
+      width: 48px;
+      height: 48px;
+      border-radius: 50%;
+      overflow: hidden;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
   }
 
-  mat-icon {
-    font-size: 32px;
-    width: 32px;
-    height: 32px;
-    color: #1976d2;
-    margin-bottom: 10px;
+  .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;
+      }
+    }
+
+    .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-labels {
+      display: flex;
+      justify-content: space-between;
+      font-size: 12px;
+      color: #86909C;
+    }
   }
 
-  h3 {
-    margin: 10px 0 5px 0;
-    color: #333;
-    font-size: 1.1rem;
+  .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;
+        }
+      }
+    }
+  }
+}
+
+// 核心功能入口
+.function-section {
+  padding: 0 16px 32px;
+
+  .section-title {
+    font-size: 18px;
+    font-weight: 700;
+    margin: 0 0 16px 0;
+  }
+
+  .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;
+
+      &: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;
+      }
+    }
+  }
+}
+
+// 动态内容区
+.content-section {
+  padding: 0 16px 24px;
+
+  .section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+
+    .section-title {
+      font-size: 18px;
+      font-weight: 700;
+      margin: 0;
+    }
+
+    .more-link {
+      color: #165DFF;
+      font-size: 14px;
+      font-weight: 500;
+      text-decoration: none;
+      cursor: pointer;
+      transition: color 0.2s ease;
+
+      &:hover {
+        color: #4080FF;
+      }
+    }
+  }
+}
+
+// 热点法律问题
+.hot-issues-section {
+  margin-bottom: 32px;
+
+  .horizontal-scroll {
+    display: flex;
+    overflow-x: auto;
+    gap: 16px;
+    padding-bottom: 16px;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    .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;
+
+      &: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;
+            }
+          }
+        }
+      }
+    }
   }
+}
+
+// 普法短视频
+.video-section {
+  margin-bottom: 32px;
+
+  .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;
+
+      &: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;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 附近服务机构
+.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;
+        }
+      }
+    }
+
+    .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;
+      }
+    }
+  }
+}
+
+// 语音悬浮按钮
+.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;
+    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;
+    }
+  }
+}
+
+// 动画效果
+@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);
+  }
+}
+
+@keyframes float {
+  0% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-5px);
+  }
+  100% {
+    transform: translateY(0px);
+  }
+}
+
+// 骨架屏动画
+.skeleton {
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: skeleton-loading 1.5s infinite;
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .function-grid {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 12px;
+  }
+
+  .video-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .horizontal-scroll .issue-card {
+    min-width: 260px;
+  }
+}
+
+@media (max-width: 480px) {
+  .search-section {
+    padding: 80px 12px 16px;
+  }
+
+  .smart-status-section,
+  .function-section,
+  .content-section {
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+
+  .voice-fab {
+    bottom: 20px;
+    right: 20px;
 
-  p {
-    margin: 0;
-    color: #666;
-    font-size: 0.9rem;
+    .voice-button {
+      width: 56px;
+      height: 56px;
+    }
   }
 }

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

@@ -1,14 +1,251 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
+import { RouterModule, Router } from '@angular/router';
 import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { FormsModule } from '@angular/forms';
 
 @Component({
   selector: 'app-home',
-  imports: [CommonModule, RouterModule, MatIconModule],
+  imports: [CommonModule, RouterModule, MatIconModule, MatButtonModule, FormsModule],
   templateUrl: './home.html',
   styleUrl: './home.scss'
 })
-export class HomeComponent {
+export class HomeComponent implements OnInit {
+  searchQuery: string = '';
+  currentTime: string = '';
+  greetingText: string = '';
+  userName: string = '李律师';
+  
+  // 案件进度数据
+  caseProgress = {
+    title: '合同纠纷案件',
+    percentage: 65,
+    status: '证据收集',
+    priority: '重要准备'
+  };
 
+  // 待办事项数据
+  todoItems = [
+    {
+      id: 1,
+      title: '提交证据材料',
+      time: '今天 18:00 截止',
+      icon: 'assignment'
+    }
+  ];
+
+  // 热点法律问题数据
+  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'
+    }
+  ];
+
+  // 普法短视频数据
+  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万'
+    }
+  ];
+
+  // 附近服务机构数据
+  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'
+    }
+  ];
+
+  constructor(private router: Router) {}
+
+  ngOnInit() {
+    this.updateTime();
+    this.setGreeting();
+    // 每分钟更新一次时间
+    setInterval(() => {
+      this.updateTime();
+    }, 60000);
+  }
+
+  // 更新当前时间
+  updateTime() {
+    const now = new Date();
+    this.currentTime = now.toLocaleTimeString('zh-CN', { 
+      hour: '2-digit', 
+      minute: '2-digit' 
+    });
+  }
+
+  // 设置问候语
+  setGreeting() {
+    const hour = new Date().getHours();
+    if (hour < 12) {
+      this.greetingText = '早上好';
+    } else if (hour < 18) {
+      this.greetingText = '下午好';
+    } else {
+      this.greetingText = '晚上好';
+    }
+  }
+
+  // 搜索功能
+  onSearch() {
+    if (this.searchQuery.trim()) {
+      this.router.navigate(['/search'], { 
+        queryParams: { q: this.searchQuery } 
+      });
+    }
+  }
+
+  // 语音搜索
+  onVoiceSearch() {
+    // 这里可以集成语音识别API
+    console.log('启动语音搜索');
+  }
+
+  // 语音咨询
+  onVoiceConsultation() {
+    this.router.navigate(['/consultation/voice']);
+  }
+
+  // 处理待办事项
+  onHandleTodo(todoId: number) {
+    this.router.navigate(['/cases/todo', todoId]);
+  }
+
+  // 导航到功能页面
+  navigateToFunction(route: string) {
+    this.router.navigate([route]);
+  }
+
+  // 查看热点问题详情
+  viewIssueDetail(issueId: number) {
+    this.router.navigate(['/learning/article', issueId]);
+  }
+
+  // 播放视频
+  playVideo(videoId: number) {
+    this.router.navigate(['/learning/video', videoId]);
+  }
+
+  // 联系服务机构
+  contactService(serviceId: number) {
+    this.router.navigate(['/services/contact', serviceId]);
+  }
+
+  // 预约服务
+  bookService(serviceId: number) {
+    this.router.navigate(['/services/booking', serviceId]);
+  }
+
+  // 查看更多热点问题
+  viewMoreIssues() {
+    this.router.navigate(['/learning/hot-issues']);
+  }
+
+  // 查看更多视频
+  viewMoreVideos() {
+    this.router.navigate(['/learning/videos']);
+  }
+
+  // 查看更多服务机构
+  viewMoreServices() {
+    this.router.navigate(['/services/nearby']);
+  }
+
+  // 通知点击
+  onNotificationClick() {
+    this.router.navigate(['/notifications']);
+  }
+
+  // 处理待办事项操作
+  onTodoAction() {
+    // 处理待办事项的具体操作
+    this.router.navigate(['/cases/todo', this.todoItems[0].id]);
+  }
+
+  // 通用导航方法
+  navigateTo(route: string) {
+    this.router.navigate([route]);
+  }
+
+  // 查看更多内容的通用方法
+  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);
+    }
+  }
 }

legal-assistant-app/src/app/pages/learning/learning.html

@@ -1 +1,25 @@
-<p>learning works!</p>
+<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>
+
+  <router-outlet></router-outlet>
+</div>

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

@@ -0,0 +1,12 @@
+// 学习模块主页面样式
+.learning-container { padding: 12px 12px 72px 12px; }
+.module-header h1 { font-size: 18px; margin: 0 0 8px 0; color: #1A4B8C; }
+
+.feature-group h2 { font-size: 16px; margin: 12px 0 8px; color: #303B49; }
+.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
+.card {
+  display: flex; flex-direction: column; align-items: center; gap: 6px;
+  text-decoration: none; background: #FFFFFF; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); padding: 12px;
+}
+.card mat-icon { background: #E8F1FD; color: #2D6BC9; border-radius: 10px; padding: 8px; }
+.card span { color: #1A4B8C; }

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

@@ -1,11 +1,12 @@
 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: [],
+  imports: [CommonModule, RouterModule, MatIconModule],
   templateUrl: './learning.html',
   styleUrl: './learning.scss'
 })
-export class Learning {
-
-}
+export class Learning {}

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

@@ -1 +1,25 @@
-<p>legal-education-plaza works!</p>
+<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>

legal-assistant-app/src/app/pages/learning/legal-education-plaza/legal-education-plaza.scss

@@ -0,0 +1,7 @@
+// 普法广场样式
+.education-container { padding: 12px; }
+.list { display: flex; flex-direction: column; gap: 8px; }
+.item { display: flex; align-items: center; justify-content: space-between; text-decoration: none; background: #FFFFFF; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); padding: 12px; }
+.item .left { display: flex; align-items: center; gap: 10px; }
+.item .title { color: #303B49; }
+.item .sub { color: #8592A6; font-size: 12px; }

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

@@ -1,11 +1,12 @@
 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: [],
+  imports: [CommonModule, MatIconModule, RouterModule],
   templateUrl: './legal-education-plaza.html',
   styleUrl: './legal-education-plaza.scss'
 })
-export class LegalEducationPlaza {
-
-}
+export class LegalEducationPlaza {}

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

@@ -1 +1,25 @@
-<p>legal-knowledge-classroom works!</p>
+<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>

legal-assistant-app/src/app/pages/learning/legal-knowledge-classroom/legal-knowledge-classroom.scss

@@ -0,0 +1,7 @@
+// 知识课堂样式
+.knowledge-container { padding: 12px; }
+.list { display: flex; flex-direction: column; gap: 8px; }
+.item { display: flex; align-items: center; justify-content: space-between; text-decoration: none; background: #FFFFFF; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); padding: 12px; }
+.item .left { display: flex; align-items: center; gap: 10px; }
+.item .title { color: #303B49; }
+.item .sub { color: #8592A6; font-size: 12px; }

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

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

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

@@ -1 +1,25 @@
-<p>legal-scenario-lab works!</p>
+<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>

legal-assistant-app/src/app/pages/learning/legal-scenario-lab/legal-scenario-lab.scss

@@ -0,0 +1,7 @@
+// 情景实验室样式
+.scenario-container { padding: 12px; }
+.list { display: flex; flex-direction: column; gap: 8px; }
+.item { display: flex; align-items: center; justify-content: space-between; text-decoration: none; background: #FFFFFF; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); padding: 12px; }
+.item .left { display: flex; align-items: center; gap: 10px; }
+.item .title { color: #303B49; }
+.item .sub { color: #8592A6; font-size: 12px; }

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

@@ -1,11 +1,12 @@
 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: [],
+  imports: [CommonModule, MatIconModule, RouterModule],
   templateUrl: './legal-scenario-lab.html',
   styleUrl: './legal-scenario-lab.scss'
 })
-export class LegalScenarioLab {
-
-}
+export class LegalScenarioLab {}

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

@@ -1 +1,38 @@
-<p>profile works!</p>
+<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>

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

@@ -0,0 +1,62 @@
+// iOS风格我的页样式
+.profile-container {
+  padding: 20px;
+  background: linear-gradient(180deg, #F8FBFF 0%, #FFFFFF 100%);
+}
+
+.profile-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 24px 16px;
+  background: #FFFFFF;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+  margin-bottom: 16px;
+
+  .avatar {
+    width: 72px;
+    height: 72px;
+    border-radius: 50%;
+    background: radial-gradient(80% 80% at 50% 50%, #E8F1FD 0%, #FFFFFF 100%);
+    margin-bottom: 12px;
+  }
+
+  h2 { color: #1A4B8C; margin: 0 0 4px 0; font-size: 20px; }
+  p { color: #666; margin: 0; font-size: 14px; }
+}
+
+.feature-group {
+  margin-bottom: 20px;
+
+  h3 { color: #2D2D2D; font-size: 16px; margin: 0 0 10px 0; }
+
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 12px;
+
+    .card {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 16px;
+      text-decoration: none;
+      background: #FFFFFF;
+      border-radius: 12px;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+      color: #333;
+
+      mat-icon {
+        color: #2D6BC9;
+        margin-bottom: 6px;
+      }
+
+      span {
+        font-size: 13px;
+        color: #2D2D2D;
+      }
+    }
+  }
+}

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

@@ -1,8 +1,11 @@
 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: [],
+  imports: [CommonModule, RouterModule, MatIconModule],
   templateUrl: './profile.html',
   styleUrl: './profile.scss'
 })

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

@@ -1 +1,25 @@
-<p>lawyer-connection works!</p>
+<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>

legal-assistant-app/src/app/pages/services/lawyer-connection/lawyer-connection.scss

@@ -0,0 +1,7 @@
+// 律师对接样式
+.lawyer-conn-container { padding: 12px; }
+.list { display: flex; flex-direction: column; gap: 8px; }
+.item { display: flex; align-items: center; justify-content: space-between; text-decoration: none; background: #FFFFFF; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); padding: 12px; }
+.item .left { display: flex; align-items: center; gap: 10px; }
+.item .title { color: #303B49; }
+.item .sub { color: #8592A6; font-size: 12px; }

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

@@ -1,11 +1,12 @@
 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: [],
+  imports: [CommonModule, RouterModule, MatIconModule],
   templateUrl: './lawyer-connection.html',
   styleUrl: './lawyer-connection.scss'
 })
-export class LawyerConnection {
-
-}
+export class LawyerConnection {}

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

@@ -1 +1,17 @@
-<p>legal-service-map works!</p>
+<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>

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

@@ -0,0 +1,6 @@
+// 法律服务地图样式
+.map-container { padding: 12px; }
+.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
+.card { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; background: #FFFFFF; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); padding: 12px; }
+.card mat-icon { background: #E8F1FD; color: #2D6BC9; border-radius: 10px; padding: 8px; }
+.card span { color: #1A4B8C; }

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

@@ -1,11 +1,12 @@
 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: [],
+  imports: [CommonModule, RouterModule, MatIconModule],
   templateUrl: './legal-service-map.html',
   styleUrl: './legal-service-map.scss'
 })
-export class LegalServiceMap {
-
-}
+export class LegalServiceMap {}

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

@@ -1 +1,25 @@
-<p>mediation-service works!</p>
+<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>

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

@@ -0,0 +1,8 @@
+// 人民调解样式
+.mediation-container { padding: 12px; }
+.list { display: flex; flex-direction: column; gap: 8px; }
+.item { display: flex; align-items: center; justify-content: space-between; text-decoration: none; background: #FFFFFF; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); padding: 12px; }
+.item .left { display: flex; align-items: center; gap: 10px; }
+.item .title { color: #303B49; }
+.item .sub { color: #8592A6; font-size: 12px; }
+.dot { width: 8px; height: 8px; border-radius: 50%; background: #2D6BC9; }

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

@@ -1,11 +1,12 @@
 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: [],
+  imports: [CommonModule, RouterModule, MatIconModule],
   templateUrl: './mediation-service.html',
   styleUrl: './mediation-service.scss'
 })
-export class MediationService {
-
-}
+export class MediationService {}

legal-assistant-app/src/app/pages/services/services.html

@@ -1 +1,25 @@
-<p>services works!</p>
+<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>
+
+  <router-outlet></router-outlet>
+</div>

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

@@ -0,0 +1,12 @@
+// 服务模块主页面样式
+.services-container { padding: 12px 12px 72px 12px; }
+.module-header h1 { font-size: 18px; margin: 0 0 8px 0; color: #1A4B8C; }
+
+.feature-group h2 { font-size: 16px; margin: 12px 0 8px; color: #303B49; }
+.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
+.card {
+  display: flex; flex-direction: column; align-items: center; gap: 6px;
+  text-decoration: none; background: #FFFFFF; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); padding: 12px;
+}
+.card mat-icon { background: #E8F1FD; color: #2D6BC9; border-radius: 10px; padding: 8px; }
+.card span { color: #1A4B8C; }

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

@@ -1,11 +1,12 @@
 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: [],
+  imports: [CommonModule, RouterModule, MatIconModule],
   templateUrl: './services.html',
   styleUrl: './services.scss'
 })
-export class Services {
-
-}
+export class Services {}

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

@@ -1 +1,12 @@
-<p>compensation-calculator works!</p>
+<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>

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

@@ -0,0 +1,6 @@
+// 赔偿计算器样式
+.calcu-container { padding: 12px; }
+form { display: flex; flex-direction: column; gap: 10px; }
+label { color: #303B49; }
+input { width: 100%; padding: 10px; border-radius: 10px; border: 1px solid #E0E7EF; font-size: 14px; }
+.primary { width: 100%; padding: 12px; border: none; border-radius: 12px; background: #2D6BC9; color: #FFFFFF; font-size: 16px; }

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

@@ -1,11 +1,13 @@
 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: [],
+  imports: [CommonModule, FormsModule, RouterModule, MatIconModule],
   templateUrl: './compensation-calculator.html',
   styleUrl: './compensation-calculator.scss'
 })
-export class CompensationCalculator {
-
-}
+export class CompensationCalculator { title = '赔偿计算器'; amount = 0; }

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

@@ -1 +1,12 @@
-<p>document-generator works!</p>
+<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>

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

@@ -0,0 +1,6 @@
+// 文书生成样式
+.docgen-container { padding: 12px; }
+form { display: flex; flex-direction: column; gap: 10px; }
+label { color: #303B49; }
+input, textarea { width: 100%; padding: 10px; border-radius: 10px; border: 1px solid #E0E7EF; font-size: 14px; }
+.primary { width: 100%; padding: 12px; border: none; border-radius: 12px; background: #2D6BC9; color: #FFFFFF; font-size: 16px; }

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

@@ -1,11 +1,13 @@
 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: [],
+  imports: [CommonModule, FormsModule, RouterModule, MatIconModule],
   templateUrl: './document-generator.html',
   styleUrl: './document-generator.scss'
 })
-export class DocumentGenerator {
-
-}
+export class DocumentGenerator { title = '文书生成'; }

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

@@ -1 +1,25 @@
-<p>evidence-organizer works!</p>
+<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>

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

@@ -0,0 +1,7 @@
+// 证据整理样式
+.evidence-container { padding: 12px; }
+.list { display: flex; flex-direction: column; gap: 8px; }
+.item { display: flex; align-items: center; justify-content: space-between; text-decoration: none; background: #FFFFFF; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); padding: 12px; }
+.item .left { display: flex; align-items: center; gap: 10px; }
+.item .title { color: #303B49; }
+.item .sub { color: #8592A6; font-size: 12px; }

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

@@ -1,11 +1,12 @@
 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: [],
+  imports: [CommonModule, RouterModule, MatIconModule],
   templateUrl: './evidence-organizer.html',
   styleUrl: './evidence-organizer.scss'
 })
-export class EvidenceOrganizer {
-
-}
+export class EvidenceOrganizer {}

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

@@ -1 +1,19 @@
-<p>legal-aid-assessment works!</p>
+<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>

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

@@ -0,0 +1,6 @@
+.aid-container { padding: 12px; }
+form { display: flex; flex-direction: column; gap: 10px; }
+label { display: flex; flex-direction: column; gap: 6px; color: #303B49; }
+input { height: 36px; border: 1px solid #E4E7EB; border-radius: 8px; padding: 0 10px; }
+.actions { display: flex; justify-content: flex-end; margin-top: 8px; }
+.primary { display: inline-flex; align-items: center; gap: 6px; background: #2E90FA; color: #fff; text-decoration: none; border-radius: 8px; padding: 8px 12px; }

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

@@ -1,11 +1,13 @@
 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: [],
+  imports: [CommonModule, FormsModule, RouterModule, MatIconModule],
   templateUrl: './legal-aid-assessment.html',
   styleUrl: './legal-aid-assessment.scss'
 })
-export class LegalAidAssessment {
-
-}
+export class LegalAidAssessment { title = '援助评估'; name = ''; income = 0; }

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

@@ -1 +1,25 @@
-<p>legal-tools-market works!</p>
+<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>

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

@@ -0,0 +1,6 @@
+.market-container { padding: 12px; }
+.list { display: flex; flex-direction: column; gap: 8px; }
+.item { display: flex; align-items: center; justify-content: space-between; text-decoration: none; background: #FFFFFF; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); padding: 12px; }
+.item .left { display: flex; align-items: center; gap: 10px; }
+.item .title { color: #303B49; }
+.item .sub { color: #8592A6; font-size: 12px; }

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

@@ -1,11 +1,12 @@
 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: [],
+  imports: [CommonModule, RouterModule, MatIconModule],
   templateUrl: './legal-tools-market.html',
   styleUrl: './legal-tools-market.scss'
 })
-export class LegalToolsMarket {
-
-}
+export class LegalToolsMarket {}

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

@@ -1 +1,29 @@
-<p>tools works!</p>
+<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>
+
+  <router-outlet></router-outlet>
+</div>

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

@@ -0,0 +1,94 @@
+// iOS风格工具页样式
+.tools-container {
+  padding: 20px;
+  background: linear-gradient(180deg, #F8FBFF 0%, #FFFFFF 100%);
+
+  h1 {
+    color: #1A4B8C;
+    font-size: 20px;
+    font-weight: 600;
+    margin-bottom: 16px;
+  }
+
+  .category-tabs {
+    display: flex;
+    gap: 8px;
+    margin-bottom: 16px;
+    overflow-x: auto;
+
+    .category-tab {
+      padding: 8px 12px;
+      border-radius: 16px;
+      border: 1px solid #E0E7EF;
+      background: #FFFFFF;
+      color: #2D6BC9;
+      white-space: nowrap;
+
+      &.active {
+        background: #E8F1FD;
+        border-color: #2D6BC9;
+      }
+    }
+  }
+
+  .tool-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 16px;
+
+    .tool-card {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 16px;
+      text-decoration: none;
+      background: #FFFFFF;
+      border-radius: 12px;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+      color: #333;
+      transition: transform 0.2s ease, box-shadow 0.2s ease;
+
+      &:active {
+        transform: scale(0.98);
+      }
+
+      .icon-circle {
+        width: 56px;
+        height: 56px;
+        border-radius: 50%;
+        background: radial-gradient(80% 80% at 50% 50%, #E8F1FD 0%, #FFFFFF 100%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 8px;
+
+        mat-icon {
+          color: #2D6BC9;
+          font-size: 28px;
+          width: 28px;
+          height: 28px;
+        }
+      }
+
+      span {
+        font-size: 14px;
+        color: #2D2D2D;
+      }
+    }
+  }
+}
+
+
+// 工具模块主页面样式
+.tools-container { padding: 12px 12px 72px 12px; }
+.module-header h1 { font-size: 18px; margin: 0 0 8px 0; color: #1A4B8C; }
+
+.feature-group h2 { font-size: 16px; margin: 12px 0 8px; color: #303B49; }
+.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
+.card {
+  display: flex; flex-direction: column; align-items: center; gap: 6px;
+  text-decoration: none; background: #FFFFFF; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); padding: 12px;
+}
+.card mat-icon { background: #E8F1FD; color: #2D6BC9; border-radius: 10px; padding: 8px; }
+.card span { color: #1A4B8C; }

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

@@ -1,11 +1,12 @@
 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: [],
+  imports: [CommonModule, RouterModule, MatIconModule],
   templateUrl: './tools.html',
   styleUrl: './tools.scss'
 })
-export class Tools {
-
-}
+export class Tools {}

legal-assistant-app/src/app/shared/bottom-tab-navigation/bottom-tab-navigation.scss

@@ -4,11 +4,13 @@
   left: 0;
   right: 0;
   z-index: 1000;
-  background-color: white;
-  border-top: 1px solid #e0e0e0;
-  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
+  background-color: rgba(255, 255, 255, 0.92);
+  backdrop-filter: saturate(180%) blur(20px);
+  border-top: 1px solid rgba(0,0,0,0.06);
+  box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.08);
   display: flex;
   justify-content: space-around;
+  padding: 6px env(safe-area-inset-right) calc(8px + env(safe-area-inset-bottom)) env(safe-area-inset-left);
 
   .tab-item {
     display: flex;
@@ -18,33 +20,40 @@
     padding: 8px 4px;
     min-width: 0;
     text-decoration: none;
-    color: #666;
-    transition: color 0.3s ease;
+    color: #5b6b7a;
+    transition: color 0.25s ease, transform 0.2s ease;
     flex: 1;
+    border-radius: 12px;
 
     &.active-tab {
-      color: #1976d2;
+      color: #1e73ff;
+      background: rgba(30,115,255,0.08);
     }
 
     mat-icon {
-      font-size: 20px;
-      width: 20px;
-      height: 20px;
+      font-size: 22px;
+      width: 22px;
+      height: 22px;
       margin-bottom: 4px;
     }
 
     .tab-label {
-      font-size: 10px;
+      font-size: 11px;
       line-height: 1;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       max-width: 100%;
+      letter-spacing: 0.2px;
+    }
+
+    &:active {
+      transform: scale(0.98);
     }
   }
 }
 
 // 为主内容区域添加底部边距，避免被底部导航遮挡
 :host-context(body) {
-  padding-bottom: 60px;
+  padding-bottom: calc(70px + env(safe-area-inset-bottom));
 }

legal-assistant-app/src/app/shared/bottom-tab-navigation/bottom-tab-navigation.ts

@@ -20,9 +20,6 @@ export class BottomTabNavigationComponent {
     { label: '首页', route: '/home', icon: 'home' },
     { label: '咨询', route: '/consultation', icon: 'chat' },
     { label: '工具', route: '/tools', icon: 'build' },
-    { label: '案件', route: '/cases', icon: 'folder' },
-    { label: '服务', route: '/services', icon: 'support_agent' },
-    { label: '学习', route: '/learning', icon: 'school' },
     { label: '我的', route: '/profile', icon: 'person' }
   ];
 }

legal-assistant-app/src/首页.html

@@ -0,0 +1,707 @@
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+    <title>律助App - 首页</title>
+    <script src="https://res.gemcoder.com/js/reload.js"></script>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link
+      href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+      rel="stylesheet"
+    />
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            colors: {
+              primary: '#165DFF',
+              secondary: '#4080FF',
+              accent: '#69B1FF',
+              light: '#F8FBFF',
+              dark: '#1D2129',
+              'gray-light': '#C9CDD4',
+              'gray-medium': '#86909C',
+              'gray-dark': '#4E5969'
+            },
+            spacing: {
+              '160': '40rem',
+              '128': '32rem',
+              '112': '28rem',
+              '96': '24rem',
+              '88': '22rem',
+              '80': '20rem',
+              '72': '18rem',
+              '68': '17rem',
+              '64': '16rem',
+              '56': '14rem',
+              '52': '13rem',
+              '48': '12rem',
+              '44': '11rem',
+              '40': '10rem',
+              '36': '9rem',
+              '32': '8rem',
+              '28': '7rem',
+              '24': '6rem',
+              '20': '5rem',
+              '18': '4.5rem',
+              '16': '4rem',
+              '14': '3.5rem',
+              '12': '3rem',
+              '10': '2.5rem',
+              '9': '2.25rem',
+              '8': '2rem',
+              '7': '1.75rem',
+              '6': '1.5rem',
+              '5': '1.25rem',
+              '4': '1rem',
+              '3': '0.75rem',
+              '2': '0.5rem',
+              '1': '0.25rem',
+              '0': '0rem'
+            },
+            boxShadow: {
+              'card': '0 4px 12px rgba(0, 0, 0, 0.05)',
+              'card-hover': '0 8px 24px rgba(0, 0, 0, 0.12)'
+            },
+            borderRadius: {
+              'xl': '1rem',
+              '2xl': '1.5rem',
+              '3xl': '2rem'
+            }
+          }
+        }
+      };
+    </script>
+    <style type="text/tailwindcss">
+      @layer utilities {
+          .content-auto {
+              content-visibility: auto;
+          }
+          .bg-gradient-blue {
+              background: linear-gradient(180deg, #F8FBFF 0%, #FFFFFF 100%);
+          }
+          .bg-gradient-primary {
+              background: radial-gradient(circle at center, #165DFF 0%, #4080FF 100%);
+          }
+          .text-shadow {
+              text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+          }
+          .pulse-animation {
+              animation: pulse 2s infinite;
+          }
+          .float-animation {
+              animation: float 3s ease-in-out infinite;
+          }
+          .card-hover {
+              transition: all 0.3s ease;
+          }
+          .card-hover:hover {
+              transform: translateY(-4px);
+              box-shadow: var(--tw-shadow-card-hover);
+          }
+          .skeleton {
+              background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+              background-size: 200% 100%;
+              animation: skeleton-loading 1.5s infinite;
+          }
+          @keyframes pulse {
+              0% {
+                  box-shadow: 0 0 0 0 rgba(22, 93, 255, 0.4);
+              }
+              70% {
+                  box-shadow: 0 0 0 15px rgba(22, 93, 255, 0);
+              }
+              100% {
+                  box-shadow: 0 0 0 0 rgba(22, 93, 255, 0);
+              }
+          }
+          @keyframes float {
+              0% {
+                  transform: translateY(0px);
+              }
+              50% {
+                  transform: translateY(-5px);
+              }
+              100% {
+                  transform: translateY(0px);
+              }
+          }
+          @keyframes skeleton-loading {
+              0% {
+                  background-position: 200% 0;
+              }
+              100% {
+                  background-position: -200% 0;
+              }
+          }
+      }
+    </style>
+  </head>
+  <body class="bg-gradient-blue min-h-screen font-sans text-dark">
+    <!-- 状态栏 -->
+    <div class="h-6 bg-transparent w-full"></div>
+    <!-- [MODULE] abc_主内容区域 -->
+    <div class="relative">
+      <!-- [MODULE] d23_首页页面 -->
+      <div class="w-full" id="home-page">
+        <!-- [MODULE] 33f_首页页面:导航栏 -->
+        <header
+          class="bg-white shadow-sm py-3 px-4 fixed top-6 left-0 right-0 z-30"
+        >
+          <div class="flex items-center justify-between">
+            <div class="flex items-center">
+              <img
+                alt="律助App Logo"
+                class="w-10 h-10 rounded-lg object-cover"
+                src="https://design.gemcoder.com/staticResource/echoAiSystemImages/00ca7252aa74fb56932593c07a8e6dfa.png"
+              />
+              <span class="ml-2 text-xl font-bold text-primary"> 律助 </span>
+            </div>
+            <div class="relative">
+              <button
+                class="w-10 h-10 rounded-full flex items-center justify-center hover:bg-gray-100 transition-colors"
+              >
+                <i class="fas fa-bell text-gray-dark"> </i>
+                <span
+                  class="absolute top-0 right-0 w-3 h-3 bg-red-500 rounded-full"
+                >
+                </span>
+              </button>
+            </div>
+          </div>
+        </header>
+        <!-- [/MODULE] 33f_首页页面:导航栏 -- 包含App Logo和消息通知图标，消息图标右上角有红色通知点 -->
+        <!-- [MODULE] 45d_首页页面:搜索栏 -->
+        <div class="pt-20 pb-4 px-4">
+          <div class="relative">
+            <input
+              class="w-full py-3 pl-10 pr-12 rounded-xl bg-white shadow-card focus:outline-none focus:ring-2 focus:ring-primary/30 transition-all"
+              placeholder="搜索法律问题、法条或案例..."
+              type="text"
+            />
+            <i
+              class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-gray-medium"
+            >
+            </i>
+            <button
+              class="absolute right-4 top-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary"
+            >
+              <i class="fas fa-microphone"> </i>
+            </button>
+          </div>
+        </div>
+        <!-- [/MODULE] 45d_首页页面:搜索栏 -- 包含文本搜索框和语音搜索按钮，支持搜索法律问题、法条或案例 -->
+        <!-- [MODULE] 78e_首页页面:智能状态区 -->
+        <div class="px-4 mb-6">
+          <div
+            class="bg-white rounded-2xl shadow-card p-5 transition-all duration-300"
+          >
+            <!-- [MODULE] 92a_智能状态区:个性化问候 -->
+            <div class="flex items-center justify-between mb-4">
+              <div>
+                <h2 class="text-lg font-semibold">早上好，李律师</h2>
+                <p class="text-gray-medium text-sm">今天有 2 个案件需要跟进</p>
+              </div>
+              <div class="w-12 h-12 rounded-full overflow-hidden">
+                <img
+                  alt="用户头像"
+                  class="w-full h-full object-cover"
+                  src="https://design.gemcoder.com/staticResource/echoAiSystemImages/97bb809d14c5114c20357d8691c96d79.png"
+                />
+              </div>
+            </div>
+            <!-- [/MODULE] 92a_智能状态区:个性化问候 -- 显示用户问候语、待跟进案件数量和用户头像 -->
+            <!-- [MODULE] 15c_智能状态区:最近案件进度 -->
+            <div class="mb-5">
+              <div class="flex justify-between items-center mb-2">
+                <h3 class="font-medium">合同纠纷案件</h3>
+                <span class="text-primary text-sm"> 65% </span>
+              </div>
+              <div class="w-full h-2 bg-gray-100 rounded-full overflow-hidden">
+                <div
+                  class="h-full bg-primary rounded-full"
+                  style="width: 65%"
+                ></div>
+              </div>
+              <div class="flex justify-between text-xs text-gray-medium mt-1">
+                <span> 证据收集 </span>
+                <span> 庭审准备 </span>
+              </div>
+            </div>
+            <!-- [/MODULE] 15c_智能状态区:最近案件进度 -- 显示合同纠纷案件的进度条和当前阶段 -->
+            <!-- [MODULE] 67b_智能状态区:待办提醒 -->
+            <div class="flex items-center p-3 bg-gray-50 rounded-xl">
+              <div
+                class="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-3"
+              >
+                <i class="fas fa-exclamation text-xs"> </i>
+              </div>
+              <div class="flex-1">
+                <p class="text-sm font-medium">提交证据材料</p>
+                <p class="text-xs text-gray-medium">今天 18:00 截止</p>
+              </div>
+              <button class="text-primary text-sm font-medium">处理</button>
+            </div>
+            <!-- [/MODULE] 67b_智能状态区:待办提醒 -- 显示待办事项"提交证据材料"及其截止时间，包含处理按钮 -->
+          </div>
+        </div>
+        <!-- [/MODULE] 78e_首页页面:智能状态区 -- 包含个性化问候、最近案件进度和待办提醒 -->
+        <!-- [MODULE] 24f_首页页面:核心功能入口 -->
+        <div class="px-4 mb-8">
+          <h2 class="text-lg font-bold mb-4">法律服务</h2>
+          <div class="grid grid-cols-3 gap-4">
+            <!-- [MODULE] 56g_核心功能入口:AI法律咨询 -->
+            <div
+              class="flex flex-col items-center p-4 bg-white rounded-xl shadow-card card-hover"
+            >
+              <div
+                class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-3"
+              >
+                <i class="fas fa-comments text-xl"> </i>
+              </div>
+              <span class="text-sm font-medium text-center"> AI法律咨询 </span>
+            </div>
+            <!-- [/MODULE] 56g_核心功能入口:AI法律咨询 -- AI法律咨询功能入口，点击跳转至AI咨询对话页 -->
+            <!-- [MODULE] 79h_核心功能入口:文书生成工具 -->
+            <div
+              class="flex flex-col items-center p-4 bg-white rounded-xl shadow-card card-hover"
+            >
+              <div
+                class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-3"
+              >
+                <i class="fas fa-file-alt text-xl"> </i>
+              </div>
+              <span class="text-sm font-medium text-center">
+                文书生成工具
+              </span>
+            </div>
+            <!-- [/MODULE] 79h_核心功能入口:文书生成工具 -- 文书生成工具功能入口，点击跳转至文书生成页 -->
+            <!-- [MODULE] 31j_核心功能入口:法条案例检索 -->
+            <div
+              class="flex flex-col items-center p-4 bg-white rounded-xl shadow-card card-hover"
+            >
+              <div
+                class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-3"
+              >
+                <i class="fas fa-search text-xl"> </i>
+              </div>
+              <span class="text-sm font-medium text-center">
+                法条案例检索
+              </span>
+            </div>
+            <!-- [/MODULE] 31j_核心功能入口:法条案例检索 -- 法条案例检索功能入口，点击跳转至法条案例检索页 -->
+            <!-- [MODULE] 82k_核心功能入口:我的案件管理 -->
+            <div
+              class="flex flex-col items-center p-4 bg-white rounded-xl shadow-card card-hover"
+            >
+              <div
+                class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-3"
+              >
+                <i class="fas fa-briefcase text-xl"> </i>
+              </div>
+              <span class="text-sm font-medium text-center">
+                我的案件管理
+              </span>
+            </div>
+            <!-- [/MODULE] 82k_核心功能入口:我的案件管理 -- 我的案件管理功能入口，点击跳转至案情管理中心页 -->
+            <!-- [MODULE] 43l_核心功能入口:找律师服务 -->
+            <div
+              class="flex flex-col items-center p-4 bg-white rounded-xl shadow-card card-hover"
+            >
+              <div
+                class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-3"
+              >
+                <i class="fas fa-user-tie text-xl"> </i>
+              </div>
+              <span class="text-sm font-medium text-center"> 找律师服务 </span>
+            </div>
+            <!-- [/MODULE] 43l_核心功能入口:找律师服务 -- 找律师服务功能入口，点击跳转至律师对接通道页 -->
+            <!-- [MODULE] 25m_核心功能入口:法律学习中心 -->
+            <div
+              class="flex flex-col items-center p-4 bg-white rounded-xl shadow-card card-hover"
+            >
+              <div
+                class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-3"
+              >
+                <i class="fas fa-graduation-cap text-xl"> </i>
+              </div>
+              <span class="text-sm font-medium text-center">
+                法律学习中心
+              </span>
+            </div>
+            <!-- [/MODULE] 25m_核心功能入口:法律学习中心 -- 法律学习中心功能入口，点击跳转至普法内容广场页 -->
+          </div>
+        </div>
+        <!-- [/MODULE] 24f_首页页面:核心功能入口 -- 6宫格布局，包含AI法律咨询、文书生成工具、法条案例检索、我的案件管理、找律师服务和法律学习中心六个核心功能入口 -->
+        <!-- [MODULE] 90n_首页页面:动态内容区 -->
+        <div class="px-4 mb-6">
+          <!-- [MODULE] 12p_动态内容区:热点法律问题 -->
+          <div class="mb-8">
+            <div class="flex justify-between items-center mb-4">
+              <h2 class="text-lg font-bold">热点法律问题</h2>
+              <a
+                class="text-primary text-sm font-medium"
+                href="javascript:void(0);"
+              >
+                更多
+              </a>
+            </div>
+            <div class="flex overflow-x-auto pb-4 space-x-4 scrollbar-hide">
+              <div
+                class="min-w-[280px] bg-white rounded-xl shadow-card p-4 card-hover"
+              >
+                <div class="flex items-start">
+                  <div
+                    class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-3 flex-shrink-0"
+                  >
+                    <i class="fas fa-gavel"> </i>
+                  </div>
+                  <div>
+                    <h3 class="font-medium text-sm mb-1">
+                      劳动合同纠纷中，公司单方面调岗是否合法？
+                    </h3>
+                    <div class="flex items-center text-xs text-gray-medium">
+                      <span> 劳动法 </span>
+                      <span class="mx-2"> • </span>
+                      <span> 1.2k 人查看 </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="min-w-[280px] bg-white rounded-xl shadow-card p-4 card-hover"
+              >
+                <div class="flex items-start">
+                  <div
+                    class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-3 flex-shrink-0"
+                  >
+                    <i class="fas fa-home"> </i>
+                  </div>
+                  <div>
+                    <h3 class="font-medium text-sm mb-1">
+                      二手房交易中，如何避免产权纠纷风险？
+                    </h3>
+                    <div class="flex items-center text-xs text-gray-medium">
+                      <span> 物权法 </span>
+                      <span class="mx-2"> • </span>
+                      <span> 896 人查看 </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="min-w-[280px] bg-white rounded-xl shadow-card p-4 card-hover"
+              >
+                <div class="flex items-start">
+                  <div
+                    class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-3 flex-shrink-0"
+                  >
+                    <i class="fas fa-car"> </i>
+                  </div>
+                  <div>
+                    <h3 class="font-medium text-sm mb-1">
+                      交通事故责任认定后，赔偿流程是什么？
+                    </h3>
+                    <div class="flex items-center text-xs text-gray-medium">
+                      <span> 交通法 </span>
+                      <span class="mx-2"> • </span>
+                      <span> 2.1k 人查看 </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- [/MODULE] 12p_动态内容区:热点法律问题 -- 横向滚动卡片，展示劳动合同纠纷、二手房交易、交通事故等热点法律问题 -->
+          <!-- [MODULE] 34q_动态内容区:普法短视频 -->
+          <div class="mb-8">
+            <div class="flex justify-between items-center mb-4">
+              <h2 class="text-lg font-bold">普法短视频</h2>
+              <a
+                class="text-primary text-sm font-medium"
+                href="javascript:void(0);"
+              >
+                更多
+              </a>
+            </div>
+            <div class="grid grid-cols-2 gap-4">
+              <div
+                class="bg-white rounded-xl shadow-card overflow-hidden card-hover"
+              >
+                <div class="relative">
+                  <img
+                    alt="合同法律解读"
+                    class="w-full aspect-video object-cover"
+                    src="https://design.gemcoder.com/staticResource/echoAiSystemImages/99c7f233fc8332d7298909df60f9e75e.png"
+                  />
+                  <div
+                    class="absolute inset-0 bg-black/30 flex items-center justify-center"
+                  >
+                    <div
+                      class="w-12 h-12 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center"
+                    >
+                      <i class="fas fa-play text-white"> </i>
+                    </div>
+                  </div>
+                  <div
+                    class="absolute bottom-2 right-2 bg-black/60 text-white text-xs px-2 py-1 rounded"
+                  >
+                    3:45
+                  </div>
+                </div>
+                <div class="p-3">
+                  <h3 class="font-medium text-sm line-clamp-2">
+                    一分钟了解合同纠纷中的证据收集要点
+                  </h3>
+                  <div class="flex items-center mt-2 text-xs text-gray-medium">
+                    <i class="fas fa-eye mr-1"> </i>
+                    <span> 3.2k 观看 </span>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="bg-white rounded-xl shadow-card overflow-hidden card-hover"
+              >
+                <div class="relative">
+                  <img
+                    alt="婚姻法律解读"
+                    class="w-full aspect-video object-cover"
+                    src="https://design.gemcoder.com/staticResource/echoAiSystemImages/2af3a8fa8a1dfbe643144f730242c3e1.png"
+                  />
+                  <div
+                    class="absolute inset-0 bg-black/30 flex items-center justify-center"
+                  >
+                    <div
+                      class="w-12 h-12 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center"
+                    >
+                      <i class="fas fa-play text-white"> </i>
+                    </div>
+                  </div>
+                  <div
+                    class="absolute bottom-2 right-2 bg-black/60 text-white text-xs px-2 py-1 rounded"
+                  >
+                    5:12
+                  </div>
+                </div>
+                <div class="p-3">
+                  <h3 class="font-medium text-sm line-clamp-2">
+                    离婚诉讼中的财产分割原则与常见误区
+                  </h3>
+                  <div class="flex items-center mt-2 text-xs text-gray-medium">
+                    <i class="fas fa-eye mr-1"> </i>
+                    <span> 5.7k 观看 </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- [/MODULE] 34q_动态内容区:普法短视频 -- 2列布局卡片，展示合同法律解读和婚姻法律解读短视频 -->
+          <!-- [MODULE] 56r_动态内容区:附近服务机构 -->
+          <div>
+            <div class="flex justify-between items-center mb-4">
+              <h2 class="text-lg font-bold">附近服务机构</h2>
+              <a
+                class="text-primary text-sm font-medium"
+                href="javascript:void(0);"
+              >
+                更多
+              </a>
+            </div>
+            <div class="bg-white rounded-xl shadow-card p-4">
+              <div class="flex items-start mb-4 pb-4 border-b border-gray-100">
+                <img
+                  alt="律师事务所"
+                  class="w-16 h-16 rounded-lg object-cover mr-4"
+                  src="https://design.gemcoder.com/staticResource/echoAiSystemImages/5ca32367f2a3a4bf6e77a9653e6b7a3f.png"
+                />
+                <div class="flex-1">
+                  <h3 class="font-medium">诚信律师事务所</h3>
+                  <div class="flex items-center text-xs text-gray-medium mt-1">
+                    <i class="fas fa-map-marker-alt mr-1"> </i>
+                    <span> 距离 1.2 公里 </span>
+                  </div>
+                  <div class="flex items-center mt-1">
+                    <div class="flex text-yellow-400 text-xs">
+                      <i class="fas fa-star"> </i>
+                      <i class="fas fa-star"> </i>
+                      <i class="fas fa-star"> </i>
+                      <i class="fas fa-star"> </i>
+                      <i class="fas fa-star-half-alt"> </i>
+                    </div>
+                    <span class="text-xs text-gray-medium ml-1">
+                      4.8 (126 评价)
+                    </span>
+                  </div>
+                </div>
+                <button
+                  class="px-3 py-1 bg-primary text-white text-sm rounded-lg"
+                >
+                  咨询
+                </button>
+              </div>
+              <div class="flex items-start">
+                <img
+                  alt="公证处"
+                  class="w-16 h-16 rounded-lg object-cover mr-4"
+                  src="https://design.gemcoder.com/staticResource/echoAiSystemImages/a9fa8fbe003cf94e0bbf4fbcec261656.png"
+                />
+                <div class="flex-grow">
+                  <h3 class="font-medium">公正公证处</h3>
+                  <div class="flex items-center text-xs text-gray-medium mt-1">
+                    <i class="fas fa-map-marker-alt mr-1"> </i>
+                    <span> 距离 2.5 公里 </span>
+                  </div>
+                  <div class="flex items-center mt-1">
+                    <div class="flex text-yellow-400 text-xs">
+                      <i class="fas fa-star"> </i>
+                      <i class="fas fa-star"> </i>
+                      <i class="fas fa-star"> </i>
+                      <i class="fas fa-star"> </i>
+                      <i class="far fa-star"> </i>
+                    </div>
+                    <span class="text-xs text-gray-medium ml-1">
+                      4.0 (89 评价)
+                    </span>
+                  </div>
+                </div>
+                <button
+                  class="px-3 py-1 bg-primary text-white text-sm rounded-lg"
+                >
+                  预约
+                </button>
+              </div>
+            </div>
+          </div>
+          <!-- [/MODULE] 56r_动态内容区:附近服务机构 -- 展示附近的诚信律师事务所和公正公证处，包含距离、评分和咨询/预约按钮 -->
+        </div>
+        <!-- [/MODULE] 90n_首页页面:动态内容区 -- 包含热点法律问题、普法短视频和附近服务机构三个内容板块 -->
+        <!-- [MODULE] 78s_首页页面:语音咨询悬浮按钮 -->
+        <div class="fixed bottom-6 right-6 z-40">
+          <button
+            class="w-16 h-16 rounded-full bg-gradient-primary flex items-center justify-center text-white shadow-lg pulse-animation float-animation"
+          >
+            <i class="fas fa-microphone text-xl"> </i>
+          </button>
+        </div>
+        <!-- [/MODULE] 78s_首页页面:语音咨询悬浮按钮 -- 右下角固定位置的语音咨询按钮，带有脉动和浮动动画效果 -->
+      </div>
+      <!-- [/MODULE] d23_首页页面 -- 律助App首页，包含导航栏、搜索栏、智能状态区、核心功能入口、动态内容区和语音咨询悬浮按钮 -->
+      <!-- [MODULE] e7g_底部导航栏 -->
+      <div
+        class="fixed bottom-0 left-0 right-0 bg-white shadow-[0_-2px_10px_rgba(0,0,0,0.05)] z-50"
+      >
+        <div class="flex justify-around items-center h-16">
+          <a
+            class="flex flex-col items-center justify-center text-primary"
+            href="javascript:void(0);"
+          >
+            <i class="fas fa-home text-xl"> </i>
+            <span class="text-xs mt-1"> 首页 </span>
+          </a>
+          <a
+            class="flex flex-col items-center justify-center text-gray-medium"
+            href="javascript:void(0);"
+          >
+            <i class="fas fa-comments text-xl"> </i>
+            <span class="text-xs mt-1"> 咨询 </span>
+          </a>
+          <a
+            class="flex flex-col items-center justify-center text-gray-medium"
+            href="javascript:void(0);"
+          >
+            <i class="fas fa-wrench text-xl"> </i>
+            <span class="text-xs mt-1"> 工具 </span>
+          </a>
+          <a
+            class="flex flex-col items-center justify-center text-gray-medium"
+            href="javascript:void(0);"
+          >
+            <i class="fas fa-user text-xl"> </i>
+            <span class="text-xs mt-1"> 我的 </span>
+          </a>
+        </div>
+      </div>
+      <!-- [/MODULE] e7g_底部导航栏 -- 包含首页、咨询、工具、我的四个导航项，点击可切换不同页面 -->
+    </div>
+    <!-- [/MODULE] abc_主内容区域 -- 律助App首页的完整内容区域 -->
+    <!-- [JSMOD] 29t_页面交互逻辑 -->
+    <script id="page-interactions">
+      document.addEventListener('DOMContentLoaded', function () {
+        // 为所有卡片添加加载状态模拟
+        var cards = document.querySelectorAll('.card-hover');
+
+        // 模拟内容加载
+        setTimeout(function () {
+          cards.forEach(function (card) {
+            // 移除骨架屏类（如果有）
+            var skeletons = card.querySelectorAll('.skeleton');
+            skeletons.forEach(function (skeleton) {
+              skeleton.classList.remove('skeleton');
+            });
+
+            // 添加加载完成的淡入效果
+            card.style.opacity = '1';
+            card.style.transform = 'translateY(0)';
+          });
+        }, 800);
+
+        // 为功能卡片添加点击事件
+        var functionCards = document.querySelectorAll('[class*="核心功能入口"]');
+        functionCards.forEach(function (card) {
+          card.addEventListener('click', function () {
+            // 在实际应用中，这里会根据不同功能跳转到相应页面
+            var functionName = card.querySelector('span').textContent;
+            alert("\u70B9\u51FB\u4E86".concat(functionName, "\u529F\u80FD\uFF0C\u5373\u5C06\u8DF3\u8F6C\u5230\u5BF9\u5E94\u9875\u9762"));
+          });
+        });
+
+        // 为语音按钮添加点击事件
+        var voiceButton = document.querySelector('.bg-gradient-primary');
+        voiceButton.addEventListener('click', function () {
+          alert('语音咨询功能已启动，请开始说话...');
+        });
+
+        // 为通知按钮添加点击事件
+        var notificationButton = document.querySelector('.fa-bell').parentElement;
+        notificationButton.addEventListener('click', function () {
+          alert('查看消息通知');
+        });
+
+        // 为服务机构的咨询/预约按钮添加点击事件
+        var serviceButtons = document.querySelectorAll('[class*="附近服务机构"] button');
+        serviceButtons.forEach(function (button) {
+          button.addEventListener('click', function () {
+            var action = button.textContent;
+            var serviceName = button.closest('div.flex').querySelector('h3').textContent;
+            alert("\u6B63\u5728".concat(action).concat(serviceName, "..."));
+          });
+        });
+
+        // 为待办事项处理按钮添加点击事件
+        var todoButton = document.querySelector('[class*="待办提醒"] button');
+        todoButton.addEventListener('click', function () {
+          alert('处理待办事项：提交证据材料');
+        });
+
+        // 为热点问题卡片添加点击事件
+        var hotIssueCards = document.querySelectorAll('[class*="热点法律问题"] .card-hover');
+        hotIssueCards.forEach(function (card) {
+          card.addEventListener('click', function () {
+            var issueTitle = card.querySelector('h3').textContent;
+            alert("\u67E5\u770B\u70ED\u70B9\u95EE\u9898\u8BE6\u60C5\uFF1A".concat(issueTitle));
+          });
+        });
+
+        // 为短视频卡片添加点击事件
+        var videoCards = document.querySelectorAll('[class*="普法短视频"] .card-hover');
+        videoCards.forEach(function (card) {
+          card.addEventListener('click', function () {
+            var videoTitle = card.querySelector('h3').textContent;
+            alert("\u64AD\u653E\u89C6\u9891\uFF1A".concat(videoTitle));
+          });
+        });
+      });
+    </script>
+    <!-- [/JSMOD] 29t_页面交互逻辑 -- 实现页面中所有可交互元素的点击事件处理，包括功能卡片、语音按钮、通知按钮、服务机构按钮、待办事项按钮、热点问题卡片和短视频卡片 -->
+  </body>
+</html>