版本：v1.0.0
一个面向企业内部办公场景的 OA 管理系统静态前端原型，已完成多页面拆分、CSS/JS 分离、公共结构拆分准备，并为后续 PHP 动态化开发预留目录和文档。
本项目是一套 OA 管理系统静态 HTML 原型，主要用于企业内部办公系统的页面设计、功能规划、交互验证和后续 PHP 动态网站开发前的结构准备。
当前版本重点完成了：
- 多页面后台系统原型
- 左侧二级导航菜单
- 工作台与审批主流程
- 流程设计器与表单设计器
- 员工、部门、角色权限管理
- 通知公告与消息中心
- 文件中心、日程会议、考勤管理
- 系统设置、系统监控、操作日志
- 错误页与状态页
- CSS / JS 独立分离
- 模拟数据集中管理
- PHP include 结构准备
- MySQL 数据表设计草案
本项目目前仍然是 静态前端原型，暂未接入后端数据库、登录验证、真实权限控制和文件上传接口。后续可在此基础上继续开发 PHP + MySQL 动态功能。
版本号：v1.0.0
阶段：静态 HTML 原型完成版
状态：可继续扩展 PHP 动态功能
当前静态原型使用：
HTML5
CSS3
JavaScript
Bootstrap 5
Bootstrap Icons
后续动态版本建议使用：
PHP 8+
MySQL / MariaDB
PDO
Session
REST / Ajax
项目不再是单个 HTML 文件，而是拆分成多个独立页面，方便后续逐步改造成 PHP 页面。
样式和脚本已经从 HTML 中分离出去：
assets/css/style.css
assets/js/app.js
便于统一维护和继续优化。
左侧菜单已升级为类似后台系统的二级菜单结构：
- 支持一级菜单分组
- 支持二级菜单展开 / 收起
- 当前页面自动高亮
- 桌面端支持图标折叠模式
- 移动端支持抽屉菜单
模拟数据已经集中到：
data/mock-data.js
后续 PHP 动态化时，可以逐步替换为数据库查询结果或接口返回数据。
已新增公共结构目录：
includes/
├── header.html
├── sidebar.html
├── topbar.html
└── footer.html
后续可逐步改成：
includes/
├── header.php
├── sidebar.php
├── topbar.php
└── footer.php
oa-admin-system/
├── index.html
├── login.html
├── approval-detail.html
├── approvals.html
├── apply.html
├── my-applications.html
├── messages.html
├── announcements.html
├── workflow-templates.html
├── form-templates.html
├── flow-designer.html
├── form-designer.html
├── components.html
├── employees.html
├── organization.html
├── roles.html
├── files.html
├── calendar.html
├── attendance.html
├── system-monitor.html
├── empty-states.html
├── error-403.html
├── error-404.html
├── error-500.html
├── profile.html
├── password.html
├── logs.html
├── settings.html
├── php-include-example.php
├── assets/
│ ├── css/
│ │ └── style.css
│ └── js/
│ └── app.js
├── data/
│ └── mock-data.js
├── includes/
│ ├── header.html
│ ├── sidebar.html
│ ├── topbar.html
│ └── footer.html
└── docs/
├── php-include-plan.md
├── php-database-plan.md
└── migration-checklist.md
| 页面 | 文件 | 说明 |
|---|---|---|
| 登录页 | login.html |
静态登录页面，后续可接 PHP Session |
| 个人中心 | profile.html |
用户资料、角色、账号状态 |
| 修改密码 | password.html |
密码修改原型页面 |
| 页面 | 文件 | 说明 |
|---|---|---|
| 首页工作台 | index.html |
待办事项、快捷入口、公告、日程 |
| 审批详情 | approval-detail.html |
表单详情、流程时间线、审批处理 |
| 审批中心 | approvals.html |
全部审批、待我处理、审批中、已通过、已驳回 |
| 发起申请 | apply.html |
选择申请类型、填写表单、提交审批 |
| 我的申请 | my-applications.html |
草稿、审批中、已通过、已驳回、已撤回 |
| 页面 | 文件 | 说明 |
|---|---|---|
| 消息中心 | messages.html |
审批消息、系统消息、公告消息、抄送消息 |
| 通知公告 | announcements.html |
公告列表、公告详情、公告发布 |
| 页面 | 文件 | 说明 |
|---|---|---|
| 流程模板管理 | workflow-templates.html |
流程模板列表、分类、启用状态、预览 |
| 表单模板管理 | form-templates.html |
表单模板列表、字段数、绑定流程 |
| 流程设计器 | flow-designer.html |
流程节点设计、条件分支、审批节点 |
| 表单设计器 | form-designer.html |
表单字段设计、字段属性配置 |
| 通用组件库 | components.html |
按钮、标签、表格、表单、空状态、上传组件 |
| 页面 | 文件 | 说明 |
|---|---|---|
| 员工管理 | employees.html |
员工列表、员工档案、部门岗位 |
| 部门组织架构 | organization.html |
部门树、组织架构图、部门详情 |
| 角色权限 | roles.html |
角色列表、权限矩阵、数据范围 |
| 页面 | 文件 | 说明 |
|---|---|---|
| 文件中心 | files.html |
审批附件、合同附件、项目文件、公司文档 |
| 日程会议 | calendar.html |
月视图、今日日程、会议室状态 |
| 考勤管理 | attendance.html |
今日打卡、月度考勤、异常提醒 |
| 页面 | 文件 | 说明 |
|---|---|---|
| 系统监控 | system-monitor.html |
服务健康度、备份任务、访问趋势、监控日志 |
| 操作日志 | logs.html |
登录、审批、权限、公告等操作记录 |
| 系统设置 | settings.html |
基础设置、安全设置、通知设置、审批设置、备份设置 |
| 页面 | 文件 | 说明 |
|---|---|---|
| 403 页面 | error-403.html |
无权限访问 |
| 404 页面 | error-404.html |
页面不存在 |
| 500 页面 | error-500.html |
系统错误 |
| 状态页面 | empty-states.html |
空状态、加载中、加载失败、保存成功 |
当前原型已经打通了 OA 系统的主线流程：
登录
↓
首页工作台
↓
发起申请
↓
选择申请类型
↓
填写申请表单
↓
提交审批
↓
审批中心
↓
审批详情
↓
审批处理
↓
我的申请
↓
消息通知
↓
操作日志
后续可以在当前静态页面基础上，逐步开发 PHP 动态功能。
将公共结构改成 PHP include：
includes/header.php
includes/sidebar.php
includes/topbar.php
includes/footer.php
每个页面改成类似结构：
<?php
$page_title = '待办工作台';
$active_menu = 'index';
include 'includes/header.php';
include 'includes/sidebar.php';
include 'includes/topbar.php';
?>
<!-- 页面主体内容 -->
<?php include 'includes/footer.php'; ?>后续需要实现：
- 用户登录
- 密码加密存储
- PHP Session
- 登录状态校验
- 退出登录
- 角色权限控制
- 菜单权限控制
- 页面权限控制
- 操作权限控制
建议使用：
password_hash()
password_verify()
$_SESSION
PDO可以优先动态化：
员工管理
部门组织架构
角色权限
对应数据表：
users
departments
roles
permissions
user_roles
role_permissions
审批系统是整个 OA 的核心，建议分阶段开发：
- 发起申请
- 选择表单模板
- 填写表单
- 保存草稿
- 提交审批
- 生成审批任务
- 当前节点处理人
- 待我审批
- 审批通过
- 审批驳回
- 审批转交
- 审批撤回
- 根据流程模板生成节点
- 根据条件分支判断下一节点
- 审批完成后自动归档
- 生成审批日志
对应数据表：
applications
approval_tasks
approval_logs
workflow_templates
form_templates
当前表单设计器和流程设计器是静态原型，后续可以把配置保存为 JSON。
建议字段：
form_templates.schema_json
workflow_templates.flow_json
这样可以实现：
- 动态表单渲染
- 动态字段校验
- 动态审批流程
- 动态节点配置
- 动态条件分支
后续可以实现：
- 审批待办提醒
- 审批超时提醒
- 公告发布推送
- 系统消息
- 抄送消息
- 已读 / 未读
- 消息跳转业务页面
对应数据表：
messages
announcements
announcement_reads
文件中心后续可以接入真实上传功能。
建议功能：
- 文件上传
- 文件预览
- 文件下载
- 文件分类
- 文件权限
- 文件关联审批单
- 文件关联公告
- 文件删除 / 归档
对应数据表：
files
后续可实现：
- 新建会议
- 编辑会议
- 删除会议
- 会议室预约
- 参会人邀请
- 会议提醒
- 日历视图动态渲染
对应数据表：
calendar_events
meeting_rooms
event_participants
考勤模块后续可以实现：
- 上班打卡
- 下班打卡
- 补卡申请
- 请假联动
- 外出申请
- 加班申请
- 月度考勤统计
- 考勤报表导出
对应数据表：
attendance_records
attendance_groups
attendance_corrections
后续可以实现：
- 登录日志
- 操作日志
- 审批日志
- 权限变更日志
- 系统异常日志
- 数据备份记录
- 文件上传记录
对应数据表：
operation_logs
system_logs
backup_logs
建议后续 PHP 动态化按照以下顺序进行：
第一步：公共 include 结构
第二步：数据库连接与 PDO 封装
第三步：登录 / 退出 / Session
第四步：员工管理
第五步：部门组织架构
第六步：角色权限
第七步：表单模板管理
第八步：流程模板管理
第九步：发起申请
第十步：审批中心
第十一步：审批详情与审批处理
第十二步：消息中心
第十三步：通知公告
第十四步：文件中心
第十五步：日程会议
第十六步：考勤管理
第十七步：系统设置与操作日志
项目中已经准备了数据库设计草案：
docs/php-database-plan.md
核心数据表包括：
users
departments
roles
permissions
user_roles
role_permissions
form_templates
workflow_templates
applications
approval_tasks
approval_logs
announcements
messages
files
calendar_events
attendance_records
operation_logs
后续可以根据实际开发需求继续拆分和优化。
后续如果使用 Ajax / REST，可以考虑这些接口：
api/login.php
api/logout.php
api/users.php
api/departments.php
api/roles.php
api/permissions.php
api/applications.php
api/approval-tasks.php
api/messages.php
api/announcements.php
api/files.php
api/calendar-events.php
api/attendance.php
api/logs.php
后续 PHP 动态化时，需要重点考虑：
- SQL 注入防护
- XSS 防护
- CSRF 防护
- 文件上传安全
- 登录密码加密
- Session 固定攻击防护
- 权限绕过防护
- 敏感操作日志记录
- 接口访问权限校验
- 上传文件类型和大小限制
建议：
数据库操作统一使用 PDO 预处理
密码统一使用 password_hash / password_verify
所有表单提交增加 CSRF Token
所有输出内容进行 HTML 转义
文件上传限制扩展名、MIME 类型和大小
后台操作全部记录日志
当前 v1.0.0 版本适合用于：
- OA 系统页面原型展示
- 后台管理系统 UI 参考
- PHP 动态化前的页面结构准备
- 企业内部办公系统功能规划
- 审批流、表单流、权限流研究
- 前后端功能拆分讨论
- 后续数据库表设计参考
当前仍然是静态原型，暂未实现：
- 真实登录验证
- 真实数据库读写
- 真实文件上传
- 真实审批流转
- 真实权限校验
- 真实消息推送
- 真实日程保存
- 真实考勤打卡
- 真实系统监控
- 后端接口
这些功能都可以在后续 PHP 动态开发阶段逐步完成。
当前版本为静态原型完成版。
已完成：
- 多页面拆分
- CSS / JS 分离
- 二级导航菜单
- 工作台
- 审批中心
- 发起申请
- 我的申请
- 审批详情
- 通知公告
- 消息中心
- 流程模板
- 表单模板
- 流程设计器
- 表单设计器
- 通用组件库
- 员工管理
- 部门组织架构
- 角色权限
- 文件中心
- 日程会议
- 考勤管理
- 系统监控
- 操作日志
- 系统设置
- 错误页
- 状态页
- PHP include 准备结构
- 数据库设计草案
- 迁移清单
本项目的最终目标不是只做一套静态页面，而是逐步发展为一套可以实际使用的轻量级 OA 管理系统。
长期方向：
静态 HTML 原型
↓
PHP 公共结构拆分
↓
PHP + MySQL 动态数据
↓
登录权限系统
↓
审批流引擎
↓
动态表单系统
↓
文件与消息系统
↓
企业内部 OA 平台
建议后续维护时遵循：
- 每次新增模块都先做 HTML 原型
- 页面确认后再接 PHP
- 公共样式统一放入
assets/css/style.css - 公共脚本统一放入
assets/js/app.js - 模拟数据统一放入
data/mock-data.js - 页面公共结构统一迁移到
includes/ - 每个模块动态化前先设计数据表
- 所有权限相关逻辑优先规划清楚再开发
当前项目已经完成了一个较完整的 OA 管理系统前端原型。
它的价值在于：
- 页面结构完整
- 模块划分清晰
- 业务流程顺畅
- 后续扩展方向明确
- 已经为 PHP 动态化做好初步准备
后续可以围绕 PHP + MySQL + Session + 权限控制 + 审批流转 继续开发，让它从静态原型逐步变成可实际运行的企业内部 OA 系统。