|
|
# 高校雷达网管理后台 · 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规范》](./管理后台UI规范.md)**。
|
|
|
|
|
|
---
|
|
|
|
|
|
## 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. 页面结构（三层）
|
|
|
|
|
|
1. **登录层**：独立全页，**不使用** layout（无顶栏侧栏）。
|
|
|
2. **布局层**：最上 **通栏顶栏**（左侧「高校雷达网管理后台」；右侧「管理员」下拉：**个人信息**、**退出登录**）；其下为 **左侧导航** + 主区 **iframe** 单实例加载各功能页。
|
|
|
3. **功能页层**：各业务列表/表单/地图均在 `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 | 补全三层结构、品牌色、页面清单与需求映射；与《技术栈与项目说明》对齐 |
|
