5.5 KiB
高校雷达网管理后台 · UI 原型说明
1. 原型目标
本原型用于演示「S-lake 先进技术发展中心高校雷达网」PC 管理后台的页面结构、导航与核心交互流程（含高校雷达网地图点击链路），不包含后端接口与真实数据存储。数据均为前端 Mock，按钮以提示或本地演示为主。
范围说明：公众端为微信小程序，不在本 HTML 仓库内交付；若需小程序高保真原型，建议单独使用 Figma/微信开发者工具搭建。本文档以管理后台为主。
2. 品牌与视觉规范
| 项 | 值 |
|---|---|
| 主色（元禾 Logo 红） | #B11E23 |
| 主色 hover / 深红 | #8B1519（近似，用于按钮悬停） |
| 主文字 | #000000 |
| 背景 | #FFFFFF；侧栏/页头辅助底 #F8F9FA |
| 状态色（课程列表等） | 未开始 #0DCAF0、进行中 #198754、已结束 #FFC107（深字 #212529）；未发布 #6C757D、已发布 #198754 |
字体：中文界面优先 PingFang SC / Microsoft YaHei，英文 system-ui。与元禾品牌中英混排气质一致即可。
Vue 管理端落地规范（列表页布局、筛选区、表格字号、状态标签、操作列按钮等全站统一规则）见 《管理后台UI规范》。
3. 文件位置
| 文件 | 说明 |
|---|---|
| 入口 | frontend/prototype/login.html |
| 主布局（通栏顶栏项目名称 + 右侧管理员下拉；侧栏导航；iframe 功能主区） | frontend/prototype/layout.html |
| 功能页 | frontend/prototype/pages/*.html |
| 公共样式 | frontend/prototype/css/prototype.css |
| 布局脚本 | frontend/prototype/js/layout.js |
| 内页跨 iframe 跳转（file 兼容） | frontend/prototype/js/prototype-nav.js |
使用方式：用浏览器打开 login.html，左右分栏品牌区 + 右侧登录卡（账号、密码），点击「登录」进入 layout.html；侧栏切换各功能页在 iframe 内加载。
关于 file:// 预览：Chrome 等对本地 file 页面 iframe 的安全策略较严格（各文件常被视为互不相同的源）；子页面若访问 window.parent 的属性会报错。本原型内页使用 prototypeLoadPage（prototype-nav.js）+ postMessage 切换路由；layout.js 在 file: 下通过 销毁并重建 iframe 切换页面，以减轻 「Unsafe attempt to load URL」「SecurityError … loadPage」等问题。若仍有告警或异常，请以本地 HTTP 打开：在目录 frontend/prototype 下执行 python3 -m http.server 8765，浏览器访问 http://127.0.0.1:8765/layout.html。
4. 页面结构（三层）
- 登录层：独立全页，不使用 layout（无顶栏侧栏）。
- 布局层：最上 通栏顶栏（左侧「高校雷达网管理后台」；右侧「管理员」下拉：个人信息、退出登录）；其下为 左侧导航 + 主区 iframe 单实例加载各功能页。
- 功能页层：各业务列表/表单/地图均在
pages/下独立 HTML，便于后续替换为 Vue 路由或 ThinkPHP 模板。
5. 已覆盖功能点（与需求对照）
| 模块 | 原型页面 | 覆盖点 |
|---|---|---|
| 认证 | login.html |
分栏式欢迎登录：账号、密码（原型演示） |
| 数据看板 + 待办 | pages/dashboard.html |
经营总览；待办；课程活动日历；资源库卡片 |
| 基础管理 | pages/courses.html |
课程列表、签到码二维码、报名与签到（列表样式遵循《管理后台UI规范》） |
pages/activities.html |
活动列表 Mock | |
pages/news.html |
资讯列表 Mock | |
pages/users.html |
用户列表、搜索、标记正式伙伴（Mock 勾选） | |
| 论文爬虫 | pages/crawler.html |
平台 URL + 关键词 + 手动抓取表单 |
pages/papers.html |
论文列表、按作者检索、关联老师入口（Mock） | |
| 老师入库 | pages/teachers.html |
列表筛选、星级、批量改星（演示） |
pages/teacher-detail.html |
基本信息、论文列表、跟进记录、添加跟进模态框 | |
| 老师跟进 | pages/follow-board.html |
个人统计：待跟进 / 已跟进 / 转化 |
| 需求管理 | pages/demands.html |
需求列表、类型标签 |
pages/demand-detail.html |
需求详情 + 处理记录时间线 | |
| 高校雷达网 | pages/map.html |
预置坐标映射圆点；点击圆点右侧老师卡片；跳转详情 |
pages/universities.html |
高校坐标库 CRUD 表单演示 |
6. UI 技术
- HTML5 + CSS3 + JavaScript
- Bootstrap 5.3（中国 CDN：BootCDN）
- 图标：Bootstrap Icons（BootCDN）
7. 后续对接开发注意
- iframe 内页面路径使用相对
pages/，由layout.html同目录加载；正式工程可改为 SPA 路由。 - 地图为示意坐标（百分比定位），正式环境用高校表经纬度 + 统一投影算法替换。
- 所有「导出 Excel」「触发爬虫」等按钮在原型中仅
alert或控制台日志，避免误调用。
8. 修订记录
| 日期 | 变更摘要 |
|---|---|
| 2026-05-21 | 新增全站《管理后台UI规范》；更新课程状态色 |
| 2026-05-21 | 本地 file 预览：内页跳转改为 prototype-nav.js（postMessage）；layout.js 在 file: 下重建 iframe；补充本节使用说明 |
| 2026-05-02 | 补全三层结构、品牌色、页面清单与需求映射；与《技术栈与项目说明》对齐 |