结合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移动端应用界面效果如下所示。
用户登录
移动前端用户通过账号密码进行登录（也可以选择短信验证码方式登录）后台管理系统，登录界面如下所示。
如果用户需要手机登录,切换到手机登录界面，使用手机号+验证码登录即可（需要开通短信接口）
用户输入系统正确的账号、密码，即可顺利登录系统，系统根据用户所属角色和分组信息，展示用户能够管理的功能页面。系统默认展示首页视图。
忘记密码
如果用户忘记自己的账号密码，可以通过手机验证码方式进行重置密码操作。
修改用户资料
登录系统成功后，在系统菜单中进入【个人信息】编辑处理界面，界面效果如下所示。
如需修改用户头像，单击头像图片，图片选择确认后上传图片进行头像修改。
修改手机号码/登录密码
如需修改手机号码，单击【账户与安全】栏目，可以进行手机号码的修改调整，手机修改需要接受短信验证码，输入成功后才能更新该用户的手机号码。或者也可以修改登陆密码、电子邮箱等操作。
注册账号
如果用户账号还没有开通，那么也可以注册用户，让管理员进行审核，审核生效后可以登录使用。
由使用人员使用手机和手机验证码自己申请注册用户，由系统管理员审核同意后，创建并分配系统用户，一个手机号码只能申请一次。注册账号的界面如下所示。
系统管理员登录后，可以在管理功能中进行注册用户的管理操作，如下界面所示。
单击用户列表，弹出审核对话框，审核通过后，系统将创建指定相关信息的用户账号，可以使用该账号和初始密码进行登录。拒绝申请则不再接收该用户的注册，系统不创建账号。
字典管理
字典管理是一个通用的字典大项、字典项目的维护管理，便于系统下拉列表以及相关参考值的维护，字典管理界面如下所示。
这样在具体页面中就可以直接使用字典项目信息了，如下树形列表和下拉项目所示。为了方便，在手机前端为管理员提供一个维护常规字典类型和字典项目的入口，在【字典管理】入口进入，如下所示。
单击其中字典大类，可以进行查看或者编辑对应字典大类下的项目信息，如下界面所示。
我的地址簿
为了方便管理一些地址信息，系统提供了一个通用的地址簿进行管理，可以录入常见的地址信息，如下界面所示。可以新增或者对已有地址记录进行编辑
系统用户维护
系统管理员用户可以登录后，进行系统用户的维护，包括对用户进行查询，以及用户密码重置、用户过期/用户恢复的设置处理。
单击用户列表记录，可以对用户进行密码重置、设置过期、用户恢复操作。
组织机构管理
在管理面板中找到【组织机构】入口，如下图所示。
页面分层列出整个公司部门的组织机构，示例组织机构如下所示，实际根据自己的系统进行创建，单击可以查看详细的机构信息。
角色管理
系统角色管理包括角色查看、角色创建、以及分配角色用户几个功能。 由于角色是基于不同公司进行管理的，因此在管理面板中找到【集团公司列表】入口，如下图所示。
角色是以公司进行划分的，因此查看角色需要选择特定的公司节点，如下所示。
也可以为角色选择用户人员，或【新增角色】，弹出如下界面，录入提交即可创建新角色。
新闻资讯管理
结合BS管理端的富文本编辑器和上传文件的处理操作，我们可以用它来实现系统新闻资讯的管理。
业务数据管理
业务功能：提供一个店面信息的管理案例，对店面创建、店面查询、店面信息展示处理，并可以对店面店面异常信息进行采集和上报，根据角色对店面的异常记录进行多角色的上报和审批、认定处理的流程，送货员可以对店面的签收记录进行登记和跟踪查询，异常上报等操作。
