User Interface

Overview

Before starting development, let's first understand the project page planning and design.

💡 Tip

In frontend frameworks, there is also the concept of components. Breaking an application into smaller modules makes it easier to build the user interface and improves reusability.

/citizen-report

This page is mainly divided into two tabs: Report and Inquiry.

The Report tab displays popular reporting services. By clicking the button, users can quickly navigate to the reporting form for that service.

Users can also click on More Items to view all available reporting types.

Clicking the 1999 Hotline button allows users to quickly dial the service hotline.

Under the Inquiry tab, there are two categories: 1999 and Disaster Reports. Different types of reports are automatically classified under these two main categories.

Users can quickly learn the progress of the reported incidents.

/citizen-report/list

This page displays all reporting items based on their main categories, allowing users to find the corresponding form items according to the type of report they need to submit.

/citizen-report/form/:id

This page is the reporting form. Users can fill in the details of the report in the form and submit it.

/citizen-report/search

This page allows users to search for reportable items using keyword-based fuzzy search, enabling them to quickly find the items they need to report.

/citizen-report/search-detail/:id

This page is the detailed view for reporting progress inquiries, where users can check the status of their report and review the responses from relevant departments.