elder-yudao-pro/docs/管理端界面定制.md

3.8 KiB
Raw Blame History

管理端界面定制

实施日期:2026-10-05。维护目录:yudao-ui-admin-vue3/,属于 elder-yudao-pro 仓库;分支 axr。node_modules 和构建产物忽略,源码、环境默认值、依赖锁和资源记录纳入版本管理。

Olive 参考与本项目适配

参考 projects/olive/Olive-Smart/ruoyi-vue-plus-master/ruoyi-ui 的 src/views/login.vue、src/views/index.vue、Sidebar/Logo.vue、assets/styles/variables.scss。Olive 使用 Vue 2,本管理端使用 Vue 3,因此沿用视觉元素并在现有登录和权限流程上实现。

元素 本项目实现
科技蓝背景 复用 Olive 的 loginBack.png,作为登录和工作台欢迎区背景
登录面板 深蓝半透明面板、浅蓝强调边框;手机尺寸采用单列
导航 深蓝侧栏 #0e2254、白色顶部导航、蓝色激活项
首页 管理模块与常用入口宫格,使用当前账号可访问菜单
标识与文案 老年健康服务平台;使用健康心形 SVG,浏览器标题、加载页、侧栏、页脚统一
模板推广 清理登录教程/咨询块、用户菜单文档入口和演示首页;关闭页面文档提示和模板外部统计
动态菜单 过滤模板作者/文档外链,默认展示当前已启用的系统管理与基础设施
默认头像与昵称 默认模板管理员在导航/工作台/锁屏显示“平台管理员”和健康标识,自定义账号昵称仍显示真实值

业务菜单、用户、部门、租户等数据库记录没有重命名或删除。管理数据页面仍展示后台真实数据,包括原来的演示账号和部门名称;若要清理这些演示数据,应单独执行数据迁移。后台 Java 包名、原始授权文件和来源记录保留。

后续维护入口

  • 名称:.env 的 VITE_APP_TITLE。
  • 默认租户:.env 的 VITE_APP_DEFAULT_TENANT_ID=1。清空 ID 时显示“服务机构”输入框并按真实租户名称查询;不会通过关闭多租户绕过后台隔离。
  • 模块:.env 的 VITE_APP_ENABLED_MODULES=system,infra。后续实现老人业务时可加 elder;此过滤只负责展示,不替代接口鉴权。
  • 视觉资源:src/assets/brand/,资源说明见该目录的 README.md。
  • 布局主题:src/store/modules/app.ts、src/styles/var.css。主题缓存使用 elderTheme,避免旧模板主题覆盖新的默认配色。
  • 工作台:src/views/Home/Index.vue。无权限时显示空状态;不会展示尚未实现的预约、派单或摄像头功能数据。
  • IDEA:.run/ElderYudaoFrontend.run.xml 已指向新源码目录,启动方式保持 ElderYudao Frontend。
  • 启动脚本:deploy/local/prepare-ui.ps1 从仓库源码安装依赖,不再克隆模板;start-ui.ps1 从新目录启动。

正在运行的旧缓存进程本次同步了界面改动,方便立即查看。今后的修改只在新源码目录进行;在 IDEA 停止旧前端并重新运行 ElderYudao Frontend 后使用新目录。

验证记录

  • 改动文件 ESLint 检查通过。
  • Vite 完整构建通过,产物位于 yudao-ui-admin-vue3/dist/。原模板存在未启用商城模块导出缺失提示,以及表单设计器依赖的 eval 提示;不影响当前系统管理页面构建和运行。
  • Chrome 实际连接本机后台:空密码校验、错误密码提示、正确登录、首页、用户管理(9 条记录)均通过,无页面脚本错误。
  • 首页按账号权限展示 2 个已启用模块、8 个常用入口,无作者动态/开发文档/教程广告;用户下拉菜单无文档推广入口。
  • 390 像素手机宽度下登录和首页通过,当前管理模块图标在本地打包。
  • 原始 MIT 许可与图标资源许可来源保留;前台展示未使用 Olive 的林区名称、备案号或团队标志。