結合SqlSugar Web AP + Vue3 + TypeScript 來構建移動端解決方案，通過 Vant4+Vue3 實現的移動端前端界面展示，界面美觀大方；現在的很多程序應用，基本上都是需要多端覆蓋，因此基于一個Web API的后端接口，來構建多端應用，如微信、H5、APP、WInForm、BS的Web管理端、H5移動端等都是常見的應用。
1、基于Vant4+Vue3+TypeScript 的移動前端
前端開發，可以是基于Vue&Element的管理后臺的前端開發，也可以是Vue3 + TypeScript + 手機端組件庫的開發H5或者App應用，技術路線都是基于Vue3 + TypeScript 的，我們這里主要介紹Vant4+Vue3+TypeScript 來開發H5移動端的應用。
關于Vant4
Vant 是一個輕量、可定制的移動端組件庫，于 2017 年開源。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社區團隊維護 React 版本和支付寶小程序版本。
當前移動端 項目采用最新的Vant4進行開發，適合于Vue3的項目開發。
Vant 4 是一款基于 Vue 3 的輕量、可靠的手機端組件庫，主要用于快速搭建移動端應用。它提供了許多常用的 UI 組件，如按鈕、卡片、表單、導航等，旨在幫助開發者提高開發效率，同時保持應用的性能和一致性。
Vant 4 是完全基于 Vue 3 構建的，充分利用了 Vue 3 的新特性和性能優化，如 Composition API、Teleport、Fragments 等。通過 Vue 3 的優化，Vant 4 在渲染性能上有了顯著提升，特別是在處理大型列表和復雜組件時。
基于Vant4+Vue3+TypeScript的H5移動前端
本H5移動前端項目使用最新的 `Vue3.5`、`Vite6`、`Vant4`、`Pinia`、`TypeScript`、`UnoCSS`、`Vue-i18n` 等主流技術開發，結合我們《SqlSguar開發框架》后端的功能接口，實現了相關的框架基礎功能和一些業務案例的功能。另外集成了 `Axios`、`ECharts`、`IconSvg`、`mockjs`、`qrcode`、`dayjs` 等等一些優秀的第三方組件。
本項目采用VSCode開發，支持TypeScript，支持國際化，支持主題切換，支持權限驗證，支持多種后端API對接。后端API可以對接基于《SqlSugar開發框架》的后端API，也可以對接基于Python+FastApi的后端API。
基礎功能：功能內容包括了用戶管理、注冊用戶管理、組織機構管理、角色管理、地址管理、字典管理、附件管理、報表圖表、參數配置、資訊管理等管理功能。
其中包括多個登錄界面、支持賬號密碼登錄、手機+驗證碼登錄、修改密碼（配合驗證碼）、修改手機號碼（配合驗證碼）、用戶信息修改、頭像修改、主題設置、其中未登錄用戶可以申請注冊用戶，管理員后臺審核、審核通過后創建用戶，申請的用戶即可登錄系統。
業務功能：提供一個店面信息的管理案例，對店面創建、店面查詢、店面信息展示處理，并可以對店面店面異常信息進行采集和上報，根據角色對店面的異常記錄進行多角色的上報和審批、認定處理的流程，送貨員可以對店面的簽收記錄進行登記和跟蹤查詢，異常上報等操作。
組件例子封裝：根據業務需要，我們封裝了便于使用的自定義組件，包括字典選擇、附件上傳、多圖片展示、日期選擇、日期范圍選擇、省市區選擇、部門機構選擇、記錄篩選選擇、條碼/二維碼顯示組件、多語言處理案例、內容區展示組件、頁面頭部組件、手寫簽名處理等眾多組件，以便更好的重用相關界面元素，提高開發效率。
基于Web API的Vant4+Vue3+TypeScript移動端應用界面效果如下所示。
用戶登錄
移動前端用戶通過賬號密碼進行登錄（也可以選擇短信驗證碼方式登錄）后臺管理系統，登錄界面如下所示。
如果用戶需要手機登錄,切換到手機登錄界面，使用手機號+驗證碼登錄即可（需要開通短信接口）
用戶輸入系統正確的賬號、密碼，即可順利登錄系統，系統根據用戶所屬角色和分組信息，展示用戶能夠管理的功能頁面。系統默認展示首頁視圖。
忘記密碼
如果用戶忘記自己的賬號密碼，可以通過手機驗證碼方式進行重置密碼操作。
修改用戶資料
登錄系統成功后，在系統菜單中進入【個人信息】編輯處理界面，界面效果如下所示。
如需修改用戶頭像，單擊頭像圖片，圖片選擇確認后上傳圖片進行頭像修改。
修改手機號碼/登錄密碼
如需修改手機號碼，單擊【賬戶與安全】欄目，可以進行手機號碼的修改調整，手機修改需要接受短信驗證碼，輸入成功后才能更新該用戶的手機號碼�；蛘咭部梢孕薷牡顷懨艽a、電子郵箱等操作。
注冊賬號
如果用戶賬號還沒有開通，那么也可以注冊用戶，讓管理員進行審核，審核生效后可以登錄使用。
由使用人員使用手機和手機驗證碼自己申請注冊用戶，由系統管理員審核同意后，創建并分配系統用戶，一個手機號碼只能申請一次。注冊賬號的界面如下所示。
系統管理員登錄后，可以在管理功能中進行注冊用戶的管理操作，如下界面所示。
單擊用戶列表，彈出審核對話框，審核通過后，系統將創建指定相關信息的用戶賬號，可以使用該賬號和初始密碼進行登錄。拒絕申請則不再接收該用戶的注冊，系統不創建賬號。
字典管理
字典管理是一個通用的字典大項、字典項目的維護管理，便于系統下拉列表以及相關參考值的維護，字典管理界面如下所示。
這樣在具體頁面中就可以直接使用字典項目信息了，如下樹形列表和下拉項目所示。為了方便，在手機前端為管理員提供一個維護常規字典類型和字典項目的入口，在【字典管理】入口進入，如下所示。
單擊其中字典大類，可以進行查看或者編輯對應字典大類下的項目信息，如下界面所示。
我的地址簿
為了方便管理一些地址信息，系統提供了一個通用的地址簿進行管理，可以錄入常見的地址信息，如下界面所示�？梢孕略龌蛘邔σ延械刂酚涗涍M行編輯
系統用戶維護
系統管理員用戶可以登錄后，進行系統用戶的維護，包括對用戶進行查詢，以及用戶密碼重置、用戶過期/用戶恢復的設置處理。
單擊用戶列表記錄，可以對用戶進行密碼重置、設置過期、用戶恢復操作。
組織機構管理
在管理面板中找到【組織機構】入口，如下圖所示。
頁面分層列出整個公司部門的組織機構，示例組織機構如下所示，實際根據自己的系統進行創建，單擊可以查看詳細的機構信息。
角色管理
系統角色管理包括角色查看、角色創建、以及分配角色用戶幾個功能。 由于角色是基于不同公司進行管理的，因此在管理面板中找到【集團公司列表】入口，如下圖所示。
角色是以公司進行劃分的，因此查看角色需要選擇特定的公司節點，如下所示。
也可以為角色選擇用戶人員，或【新增角色】，彈出如下界面，錄入提交即可創建新角色。
新聞資訊管理
結合BS管理端的富文本編輯器和上傳文件的處理操作，我們可以用它來實現系統新聞資訊的管理。
業務數據管理
業務功能：提供一個店面信息的管理案例，對店面創建、店面查詢、店面信息展示處理，并可以對店面店面異常信息進行采集和上報，根據角色對店面的異常記錄進行多角色的上報和審批、認定處理的流程，送貨員可以對店面的簽收記錄進行登記和跟蹤查詢，異常上報等操作。
