% !TeX root = ../main.tex

\chapter{前端展示}

\section{简介}

基于 TypeScript 的 Vite + Vue.js 3 项目，使用 Navie UI 组件库。

\section{路由列表}

\begin{itemize}
  \item /
  \item /idioms/solitaire
  \item /idioms/:idiom
  \item /data
\end{itemize}

\section{主界面 / 查询界面}

主界面即成语成语界面，输入一个成语并选择，转到成语详细页面。如图\ref{fig:index-page}。

\begin{figure}[H]
  \centering
  \includegraphics[width=13cm]{index-page.png}
  \caption{}
  \label{fig:index-page}
\end{figure}

\subsection{成语输入}

支持自动补全。如图\ref{fig:index-input}。

\begin{figure}[H]
  \centering
  \includegraphics[width=13cm]{index-input.png}
  \caption{}
  \label{fig:index-input}
\end{figure}

\subsection{成语信息}

包含成语含义、出处、例句。如图\ref{fig:idiom-detail}。

\begin{figure}[H]
  \centering
  \includegraphics[width=13cm]{idiom-detail.png}
  \caption{}
  \label{fig:idiom-detail}
\end{figure}

\section{成语接龙}

输入一个成语或点击“随机”按钮，自动查询成语，展示接龙。如图\ref{fig:soliaire}。

\begin{figure}[H]
  \centering
  \includegraphics[width=13cm]{soliaire.png}  
  \caption{}
  \label{fig:soliaire}
\end{figure}