TechElevate Office——现代化的企业内部网仪表盘——整体Web开发挑战

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

这是由 Axero 赞助的前端挑战赛：办公版的参赛作品，Holistic Webdev：办公空间。

📚 目录

• 我建造的
• 特征
• 演示
• 屏幕截图和主要亮点
  • 首页
  • 导航栏部分
  • 经验/简介
  • 经济与新闻
  • 表单和模板 + 仪表盘按钮
  • 表单、日历和活动
  • 社交角和生日
  • 团队部分
  • 招聘职位
  • 联系小组和可信标志
  • 消息栏用于帮助员工联系同事和团队成员。
• 旅行
  • 方法
  • 快速原型制作
  • 原生 JavaScript 选择
  • 响应能力
  • 无障碍
  • 主要挑战与解决方案
  • 经验教训
• 技术栈
• 未来改进
• 鸣谢
• 执照

我建造的

TechElevate Office是一款现代化的全功能企业内网仪表盘，专为混合办公、远程办公和办公室办公的组织而设计。

其目标是：提供一个简洁友好的数字化空间，用于发布团队公告、获取重要资源、开展协作和互动，打造如同数字总部般的体验。

特征：

• 🌟欢迎区：鼓舞人心的着陆区，包含公司统计数据和明确的行动号召。
• 📈关键指标：贷款增长、投资、新账户和目标面板。
• 📬消息按钮（浮动图标）仅在登录后显示——允许员工向人力资源部或同事发送消息。
• 📰经济、新闻与事件：文章摘要、图片轮播和带模态框的信息流列表。
• 🗃️角色控制仪表盘：项目、福利、报告、帮助台、目录和表单等部分默认隐藏，只有在登录后才会显示。
• 📝表单和模板：可搜索、可筛选的类别（入职、工资、标准操作程序、隐私），默认情况下是隐藏的，只有在登录后才会显示。
• 📅日历和活动：交互式月视图 + 即将举行的活动列表。
• 💬社交角落：使用原生 JS 实现的轻量级信息流（帖子、评论、点赞）。
• 🎂生日：自动生成带有头像的列表。
• 👥招聘页面：团队介绍 + 职位空缺列表。
• 🤝值得信赖：合作伙伴/客户的标志条。
• 🔐员工登录：导航栏中的安全登录弹窗，用于访问员工仪表盘。登录后，会显示用户名（您好！用户名），提供个性化体验。
• 📱完全响应式： Flex/Grid + Tailwind 工具。
• ♿无障碍：语义化的 HTML、焦点状态、ARIA 标签、键盘交互。

演示

在线演示：
https://company-website-elevate.vercel.app/
GitHub 代码库： https: //github.com/Aishika3/Company_website_elevate
视频演示：
https://drive.google.com/file/d/1w0mhCozFBI73HcHcOLjkQY60lWjP5-40/view ?usp=sharing

屏幕截图和主要亮点

首页

• 深色系首页图片（现代玻璃建筑，黄昏）。
• 导航栏中的员工登录模态框——登录后，用户会看到自己的名字（“你好！用户名”）。
• 叠加统计数据：50 多个项目，100 多名工程师，价值 350 万美元。
• 醒目标题：打造用户喜爱的软件。
• “开始使用”+“向下滚动”提示。

导航栏部分

• 直观的导航栏：使用简洁的导航栏，只需单击一下即可立即访问仪表板的任何部分。
• 登录选项：员工可直接从导航栏安全登录，以便快速访问个性化功能。

经验/简介

• 干净的白色区域，充足的留白。
• 标题强调“将愿景变为现实”。
• 使用重叠的团队成员头像来建立信任。
• 合作伙伴/徽标行 + “了解更多”行动号召。

经济与新闻

• 三部分布局：摘要卡、专题图片、新闻列表。
• “关键经济指标”文章摘要。
• 侧边栏包含堆叠式新闻缩略图。
• 卡片式、圆润、带阴影的风格。

表单、模板和仪表盘按钮

• 它们默认是角色控制的，并且默认是隐藏的，只有在登录后才会显示。
• 一排方形导航按钮（项目 - 显示员工正在参与的项目列表；福利 - 员工福利等）。
• 搜索栏用于查找所需的表格/模板。
• 彩色编码的表格类别芯片。
• 相邻的日历卡片（月视图）。

表单、日历和事件

• 表单和模板部分默认设置了角色权限，只有登录后才能访问。
• 表单网格 + 日历 + 事件列表列。
• 活动物品：日期徽章、称号、类别标签。
• 统一的白色卡片，清晰的层级结构。
• 增强一目了然的日程安排功能。

社交角和生日

• 发布内容 + 社交更新卡片网格。
• 帮助员工创建新帖子
• 每篇帖子包含：头像、摘要、图片、统计数据。
• 生日侧边栏（头像和日期）。
• 强调参与和认可。

团队部分

• 分屏布局：文字叙述 + 大型团队照片。
• 标题介绍了团队文化。
• 带有阴影的圆形图像卡片。
• 增强真实性和协作性。

招聘职位

• 统一工作卡片网格。
• 每项内容均显示职位、类型、描述、地点和薪资。
• 每张卡片对应一个联系邮箱。
• 简洁明了、便于浏览的招聘信息部分。

联系面板和可信徽标

• “联系我们”标题，包含地址、电话、电子邮件。
• 重点突出联系方式。
• 用于社会认同的灰度标志条。
• 宣称：“深受1600多家公司的信赖。”

消息栏用于帮助员工联系同事和团队成员。

• 仅登录后可见——确保已验证访问权限。
• 浮动图标——固定在屏幕右下角。
• 指向 message.html 的链接——用于内部消息传递。
• 通过 JavaScript 切换——基于 isLoggedIn 状态。
• 使用 TailwindCSS 进行样式设计——响应式且不突兀。

旅行

方法

首先采用模块化布局方案（主页面、内容侧边栏、实用面板），避免后续重构。先构建结构化 HTML，然后分层添加 Tailwind 实用工具，最后添加 JS 增强功能。
在导航栏中添加登录模态框，方便员工安全访问仪表盘功能。登录后会显示用户名，提供个性化体验；注销时会切换会话状态——所有操作都通过流畅的模态框流程完成。

快速原型制作

TailwindCSS 能够以最少的自定义 CSS 快速调整间距、颜色和响应式断点。

原生 JavaScript 选择

• 模态逻辑（打开/关闭 + 覆盖层）现在也用于主页区域的登录/注销切换和用户名显示。
• 表单和模板实时筛选
• 日历月份导航
• 社交动态插入后及渐进式加载

响应能力

移动优先的课程设计；网格布局可折叠成单列，大型交互区域仍可点击。
登录模态框和导航栏可适应所有屏幕尺寸；导航栏菜单在入口处包含直接登录选项。

无障碍

• 语义化HTML分段（header，，，，，nav）mainsectionarticleaside
• aria-label+ 描述性替代文本
• 对焦环保留/定制
• 按钮角色代替可点击的div

主要挑战和解决方案

经验教训

• 早期信息架构可以防止后期用户界面频繁变更。
• 对于中型仪表盘来说，原生 JavaScript 仍然高效。
• 及早开展无障碍设施建设工作 = 减少后期改造。

技术栈

未来改进

• prefers-color-scheme使用.切换深色模式
• 通过本地存储保存社交媒体帖子和偏好设置。
• 基于角色的内容版块（管理员与员工）。
• 日历/筛选逻辑的单元测试（Jest）。
• 延迟加载屏幕外的图片和帖子。

鸣谢

@aishika3的个人项目。

执照

麻省理工学院

感谢您关注 TechElevate Office！🚀 欢迎提出反馈和建议。