61 lines
1.2 KiB
TeX
61 lines
1.2 KiB
TeX
% !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}
|