feat: 建筑数字化管理系统静态原型

Vue 3 + Element Plus + Vite，12 页面（PC 7 页 + 移动端 5 页），暖色亲和视觉风格，手机模拟框小程序预览，完整模拟数据 + CRUD 操作。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-15 11:48:26 +08:00
commit a6a3747327
30 changed files with 4648 additions and 0 deletions
@@ -0,0 +1,165 @@
+# 建筑数字化管理系统 - 静态页面原型设计
+
+**日期**: 2026-05-15
+**来源**: 2026-05-14 AI 会议纪要 (document.txt)
+
+## 概述
+
+面向中小建筑企业的轻量化项目数字化管理系统静态原型。覆盖考勤打卡、工时评分、项目生命周期管理、财务回款追踪四大核心模块。原型包含小程序端（手机模拟视图）和 PC 后台管理端，双端共用一套模拟数据。
+
+## 技术栈
+
+- **框架**: Vue 3 + Vite
+- **UI 库**: Element Plus（PC 端）
+- **路由**: Vue Router 4，PC 和移动端独立路由分组
+- **移动端展示**: CSS 手机模拟框，375x667 视口，移动端样式适配
+- **状态管理**: Reactive store，模拟数据内嵌，无需后端
+- **构建产物**: `vite build` 输出纯静态 HTML/CSS/JS，可部署至任意 HTTP 服务器
+
+## 视觉风格
+
+暖色亲和风格：
+- **主色调**: 琥珀/橙色系
+- **背景**: 暖白 / 浅奶油色
+- **卡片**: 圆角、柔和阴影
+- **字体**: 无衬线体，亲和但不失专业感
+- **定位**: 以人为本、工人视角优先，区别于传统冷冰冰的企业软件
+
+## 页面清单（12 页）
+
+### 手机端（5 页）—— 375x667 手机模拟框展示
+
+| 序号 | 页面 | 核心内容 |
+|------|------|----------|
+| 1 | 登录页 | 手机号 + 验证码登录 |
+| 2 | 项目切换 | 所属项目列表，点击切换当前项目 |
+| 3 | 首页 | 项目名称/位置、今日考勤状态、评分环、快捷统计 |
+| 4 | 打卡页 | GPS 定位指示、早晚打卡按钮、评分实时反馈 |
+| 5 | 个人记录 | 考勤历史列表、每日工时、日薪结算 |
+
+移动端导航：底部 4 个 Tab（首页、打卡、记录、我的）。
+
+### PC 后台端（7 页）
+
+| 序号 | 页面 | 核心内容 |
+|------|------|----------|
+| 1 | 登录页 | 账号密码登录表单 |
+| 2 | 仪表盘首页 | 统计卡片（项目数、在岗工人、出勤率、回款汇总）、项目概览表格、近期动态 |
+| 3 | 项目管理 | 项目列表（名称、位置、合同金额、回款进度）、新增/编辑弹窗、项目详情抽屉 |
+| 4 | 人员管理 | 工人列表（姓名、电话、所属项目）、增删人员、项目分配 |
+| 5 | 考勤管理 | 打卡记录表格（按日期/项目/人员筛选）、手动补卡弹窗、工时调整 |
+| 6 | 财务管理 | 回款追踪表格（合同金额、预付款到账、下笔款项日期、待收余额）、回款状态标签 |
+| 7 | 系统设置 | 管理员账号列表、角色配置、操作日志表、系统参数 |
+
+PC 导航：深色侧边栏菜单（可折叠）+ 顶部栏（用户信息、手机预览按钮）。
+
+## 布局结构
+
+### PC 端布局
+```
+-------+------------------------------------+
+|       |  顶部栏（用户信息、通知、手机预览）    |
+| 侧边  +------------------------------------+
+| 栏    |                                    |
+| 菜单  |  内容区（面包屑 + 页面内容）          |
+|       |                                    |
+-------+------------------------------------+
+```
+
+### 手机端布局（模拟框）
+```
+------------------+
+|   状态栏          |
+|   页面标题栏      |
+|                  |
+|   内容区          |
+|                  |
+------------------+
+|   底部 Tab 栏     |
+------------------+
+```
+
+### 双端切换方式
+PC 端顶部栏提供「手机预览」按钮，点击后在右侧滑出面板内展示 375x667 手机模拟框。手机预览与 PC 端共享同一套模拟数据源，操作联动。
+
+## 模拟数据模型
+
+所有数据以 JS 常量内嵌，CRUD 操作在内存中生效，页面刷新后重置。
+
+### 项目
+```
+id, 项目名称, 项目位置, 合同金额, 预付款已收,
+下笔款项日期, 下笔款项金额, 待收余额, 状态
+```
+
+### 工人
+```
+id, 姓名, 手机号, 所属项目ID, 入场日期, 状态
+```
+
+### 考勤记录
+```
+id, 工人ID, 项目ID, 日期, 上班打卡时间, 下班打卡时间,
+评分(0-10), 工时(小时), 日薪, 状态(正常/手动调整)
+```
+
+### 管理员
+```
+id, 用户名, 角色(超级管理员/管理员), 最后登录时间
+```
+
+## 关键设计决策
+
+1. **无审批流程**: 管理员操作（手动补卡、工时调整、删除人员）直接生效。会议明确要求简化操作，不走多级审批。
+
+2. **10 分制评分可视化**: 手机端首页和打卡页展示评分环。满勤 10 小时 = 10 分 = 100% 日薪。早退每小时扣 1 分，日薪按比例折算（如 100 元/天，9 分得 90 元）。
+
+3. **GPS 定位为 UI 状态指示**: 打卡页展示位置状态徽章（绿色 = 在范围内，红色 = 超出范围）。实际定位逻辑用模拟开关替代，方便演示。
+
+4. **项目全生命周期一表展示**: 财务管理页将合同金额、预付款、付款计划、待收余额整合在一张表中，无需多层下钻。
+
+5. **模拟数据力求真实**: 使用真实感的中文建筑项目名称、工人姓名、符合会议提及规模的财务数据（百万级合同额、百人规模工人）。
+
+## 组件结构
+
+```
+src/
+  router/
+    index.js           # Vue Router，PC 和移动端路由分组
+  stores/
+    index.js           # Reactive store，模拟数据 + CRUD 方法
+  views/
+    pc/
+      PcLogin.vue          # PC 登录页
+      Dashboard.vue         # 仪表盘首页
+      ProjectMgmt.vue       # 项目管理
+      WorkerMgmt.vue        # 人员管理
+      AttendanceMgmt.vue    # 考勤管理
+      FinanceMgmt.vue       # 财务管理
+      SystemSettings.vue    # 系统设置
+    mobile/
+      MobileLogin.vue       # 手机登录页
+      ProjectSwitch.vue     # 项目切换
+      MobileHome.vue        # 手机首页
+      ClockIn.vue           # 打卡页
+      PersonalRecords.vue   # 个人记录
+  layouts/
+    PcLayout.vue       # PC 端侧边栏 + 顶部栏外壳
+    MobileFrame.vue    # 手机模拟框包装器
+  components/
+    ScoreRing.vue      # 环形评分组件
+    GpsBadge.vue       # GPS 位置状态徽章
+    StatCard.vue       # 仪表盘统计卡片
+    PhoneSimulator.vue # 375x667 手机框容器
+  App.vue
+  main.js
+```
+
+## 不包含范围
+
+- 真实登录认证 / Token 管理
+- 后端 API 对接
+- 真实 GPS 定位
+- 文件上传 / 文档管理
+- 数据持久化（刷新即重置）
+- PC 页面的响应式适配（固定桌面宽度）