LawAssistant FrontEnd

整体 App 架构

• 技术栈:
  • React：组件化开发与状态管理，构建交互式用户界面。
  • TypeScript：为项目添加静态类型检查，提高代码健壮性和可维护性。
  • Vite：快速开发与构建工具，提升项目启动和构建效率。
  • Tailwindcss：利用实用工具类快速搭建美观、响应式的界面。
  • daisyUI：提供预设计组件，减少 UI 开发工作量。
  • react-router：管理应用内的路由与导航，支持页面间的无刷新跳转。

---

主要模块与功能

1. 登录/注册模块（Login 组件）

   • 实现用户身份验证，包括注册、登录和登出。
   • 与后端进行交互，获取和验证用户信息。
   • 登录成功后，通过 useNavigate 跳转到核心功能页面。

2. 法律助手模块（AiAssist 组件）

   • 提供法律文书生成、投诉状撰写以及法律意见分析等核心功能。
   • 与大模型接口进行交互，将用户需求转化为专业的法律文本。
   • 用户可以在输入框中提交请求，同时侧边栏记录交互历史，方便后续查询。

3. 搜索模块（搜索组件）

   • 实现法律文档、案例和法规等内容的检索。
   • 提供实时搜索建议和结果展示，优化用户检索体验。
   • 用户点击搜索结果后可通过路由跳转到详情页面，查看更详细的信息。

4. 整体页面布局

   • 公共导航栏：包含登录状态显示、快速导航链接（如首页、我的资料、帮助中心等）。
   • 侧边栏：在 AiAssist 页面中用于展示用户与 AI 交互的历史记录及常用功能入口。
   • 内容区域：根据路由展示不同模块，如登录页、法律助手页、搜索结果页等。
   • 页脚：显示版权信息、联系信息等全局性辅助信息。

5. 状态管理与网络请求

   • 使用 React 内置的 useState 和 useEffect 管理组件内部状态。
   • 采用原生 fetch 或第三方库进行网络请求，与后端接口通信。

6. 路由控制

   • 通过 react-router 管理各页面路由，实现登录后的页面保护以及组件间无缝跳转。

---

Login 组件

• 文件位置: /src/pages/Login/Login.tsx
• 概述: 为用户提供注册、登录、取消登录等功能。组件通过调用后端接口获取用户信息，从而实现用户身份验证与管理。
• 技术栈:
  • React：构建交互式 UI。
  • Tailwindcss：全局样式管理。
  • react-router：实现路由跳转。
  • daisyUI：使用预设计好的 UI 组件，如表单与按钮。
• 核心实现:
  • 表单处理：（待补充）处理用户输入数据。
  • 网络请求：使用原生 fetch 发送登录、注册请求。
  • 状态管理：基于 React 内置的 useState（待补充）管理用户状态。
  • 导航控制：通过 useNavigate 实现登录后页面跳转。

---

AiAssist 组件

• 文件位置: /src/pages/Aiassist/Aiassist.tsx

• 概述: 作为网站核心功能组件，为用户提供法律相关的 AI 服务，如生成法律合同、投诉状、法律意见以及法律文件的分析。组件通过与大模型交互获取法律信息。

• 技术栈:

  • React：处理用户交互和组件渲染。
  • Tailwindcss：全局样式管理。
  • daisyUI：快速搭建预设计 UI 组件。

• 核心实现:

  • 输入框：用于用户输入请求或问题。
  • 边栏：记录并展示用户与 AI 交互的历史记录。

---

Searching组件

• 概述:
  搜索组件用于帮助用户查找与法律相关的信息，比如法律文档、案例、法规等。用户在输入关键词后，系统会通过与后端交互获取匹配的搜索结果，并以列表形式展示。

• 技术栈:

  • React：组件化构建和状态管理（例如使用 useState 和 useEffect 来管理搜索关键字及异步请求结果）。
  • Tailwindcss：提供实用的 CSS 工具类，快速构建响应式和美观的搜索框、按钮及列表。
  • react-router：可用于搜索结果详情页的导航和路由管理。

• 组件结构与实现:

  • 搜索输入框：用于捕获用户输入的关键词。
  • 搜索按钮：触发搜索操作，或者在输入框中回车时自动触发搜索。
  • 搜索结果区域：展示搜索结果列表，支持点击跳转到详细信息页面。
  • 网络请求：利用原生 fetch 向后端接口发送搜索请求并处理响应。
  • 状态管理：使用 useState 保存输入关键词与搜索结果，同时使用 useEffect 处理组件挂载和数据更新。

---

工作流程

• 用户访问：用户打开 App 后，首先看到的是登录/注册页面。
• 身份验证：用户输入信息，组件向后端发送请求进行身份验证，验证通过后进入主应用页面。
• 核心交互：在主页面，用户可以选择法律助手功能（AiAssist），输入相关问题；同时也可使用搜索组件查找法律相关资料。
• 数据交互：各模块之间通过共享的全局状态和 API 调用实现数据同步，确保用户操作与后端信息一致。
• 导航与反馈：通过清晰的导航栏和友好的 UI 反馈，用户可以轻松在各模块之间切换，获得连续的使用体验。