这是由 Axero 和 Holistic Webdev 联合举办的前端挑战赛：办公空间版的参赛作品。
我创建了AetherDesk，这是我梦寐以求的企业内网和一体化数字工作空间。它使用 HTML、CSS 和 JavaScript 构建，是一个高度个性化的中心，我可以在这里：
AetherDesk的设计灵感源自Axero，并根据我作为 Web 开发人员的工作流程量身定制，它将我需要的一切都集中在一个地方：工作、专注、学习和娱乐。
我是一名网页开发人员，讨厌不停地切换标签页（谁会喜欢呢，对吧）。我想要一个空间来：
AetherDesk 反映了我作为开发人员的自然工作流程：完成任务、保持好奇心，并记得在间隙休息一下。
一个个性化的空间，用于成长、提升技能，并访问我保存的所有学习资料：
体验完整功能，探索所有功能、主题和版块的实际应用。点击下方图片👇⬇️
想知道它是如何构建的吗？看看代码库，了解各个部分是如何工作的，或者自己 fork 一下。
实时调整布局、测试交互或切换主题。点击这里👇
我首先浏览了 Axero 的网站，了解优秀的企业内部网仪表盘应该具备哪些要素。在此基础上，我实施了以下方案：
但后来我问自己：“如果这不仅仅是一个工作空间，而是我的数字宇宙呢？”
因此，我根据自己真实的工作、学习和放松方式，又增加了 3 个核心部分：
最初只是一个仪表盘，后来发展成为AetherDesk，一个完整的、个性化的数字工作空间，它陪伴我度过一天中的每一部分。
AetherDesk 的外观简洁时尚，但其底层逻辑却十分强大（这显而易见！）。以下是一些核心功能概览：
可自定义定时专注计时器，并可在工作和休息时段之间自动切换。
let workTime = 25 * 60;
let breakTime = 5 * 60;
let isWork = true;
let interval;
function startTimer() {
interval = setInterval(() => {
let currentTime = isWork ? workTime : breakTime;
currentTime--;
displayTime(currentTime);
if (currentTime <= 0) {
clearInterval(interval);
isWork = !isWork;
startTimer(); // switch session
}
if (isWork) {
workTime = currentTime;
} else {
breakTime = currentTime;
}
localStorage.setItem("pomodoroSession", JSON.stringify({ workTime, breakTime, isWork }));
}, 1000);
}
💡功能：
自动切换工作和休息模式
使用 localStorage 持久化会话状态
一个使用 HTML5 Drag API 和 localStorage 构建的面向开发人员的任务看板。
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev, targetColumnId) {
ev.preventDefault();
let data = ev.dataTransfer.getData("text");
let task = document.getElementById(data);
document.getElementById(targetColumnId).appendChild(task);
saveBoardState();
}
💡功能：
将任务拖放到“计划”→“进行中”→“代码审查”→“已部署”区域。
将任务位置和棋盘状态存储在本地存储中
支持自定义标签、优先级颜色和元数据模态框
可在粉色、蓝色、绿色和紫色这 4 种颜色主题之间切换。
const themeBtn = document.getElementById("theme-toggle");
themeBtn.addEventListener("click", () => {
const themes = ["pink", "blue", "green", "purple"];
const current = document.documentElement.getAttribute("data-theme");
const index = themes.indexOf(current);
const next = themes[(index + 1) % themes.length];
document.documentElement.setAttribute("data-theme", next);
localStorage.setItem("theme", next);
});
💡功能：
循环显示以下配色方案：
#e91e63/#9c27b0#1976d2/#0d47a1#388e3c/#2e7d32#7b1fa2/#6a1b9a使用 CSS 自定义属性实现平滑过渡
将用户偏好设置存储在本地存储中
一款简洁而强大的工具，可帮助您设定当天的主要工作重点。
const goalInput = document.getElementById("daily-goal");
goalInput.addEventListener("input", () => {
localStorage.setItem("focusGoal", goalInput.value);
});
window.addEventListener("DOMContentLoaded", () => {
const savedGoal = localStorage.getItem("focusGoal");
if (savedGoal) goalInput.value = savedGoal;
});
💡功能：
保存并重新加载您当天的优先事项（仅限 1 项）
强化专注力和目标设定习惯
与专注模式布局无缝集成
内置运动和迷你锻炼，让你的身心保持活力充沛。
const workoutBtns = document.querySelectorAll(".workout-start");
workoutBtns.forEach((btn) =>
btn.addEventListener("click", () => {
const type = btn.dataset.type;
startWorkout(type); // launches Desk, HIIT, Tabata, or Cardio
showToast(`${type} started! 💪`);
})
);
💡功能：
一键式锻炼：办公桌锻炼、高强度间歇训练、塔巴塔训练或有氧运动
追踪“今日”、“本周”和“所有时间”等统计数据
伴随着激励性的反馈、声音和灯光用户界面庆祝
有助于打破久坐状态，全天保持活力。
AetherDesk 完全采用核心前端技术打造，使其速度快、重量轻且完全可定制：
flex<img>、grid<img>、clamp()<img> 和过渡效果AetherDesk 的每个部分都促使我更深入地思考其功能性和用户体验，以下是其中最艰难但也最有成就感的部分：
这对我来说不仅仅是一项设计或编码任务，而是一次完整的创意和功能探索：
✅ 熟练掌握Flexbox、CSS Grid和现代单元等响应式布局clamp()
✅ 精进原生 JavaScript技能，无需库即可处理逻辑繁重的组件
✅ 广泛使用localStorage，使每个部分都具有持久性和设计感
✅ 构建可重用组件，例如弹出窗口、模态框和卡片，以简化 UI/UX 一致性
✅ 采用SASS编写可扩展且简洁的 CSS
✅ 应用无障碍最佳实践——ARIA 角色、键盘交互和焦点高亮
✅ 基于真实用户行为进行设计——专注学习、学习冲刺、游戏休息和正念健康
✅ 学会构建兼顾效率和个性的空间
是的，界面特意针对大屏幕进行了优化，因为在大屏幕上工作更适合深度工作。
我把所有元素都做得更宽敞一些，因为……我戴眼镜😭😭
在笔记本电脑上，只需将缩放比例缩小到80%，就能体验到完整的 AetherDesk 使用感受！
AetherDesk 不仅仅是一个项目，它是我的数字空间。一个反映我思考、工作、学习和放松方式的工作空间。
在这里，番茄工作法与玩乐完美融合，专注与平静并存，深度工作与多巴胺的刺激交织在一起。
我想要的不仅仅是另一个仪表盘——我想要的是一个能承载我开发流程的家。一个专为我打造的
东西，因为我是一个专注的开发者，一个求知欲强的学习者，而且需要时不时地做做Wordle或者高强度间歇训练来放松一下。
感谢DEV.to和Axero给我的启发，让我最终构建出了我甚至都不知道自己需要的东西💙🩷
从探索真实的企业内部网，到融入我自己的混乱、清晰和创造力——这不仅仅是一项挑战，更是一次愉悦的体验。
感谢你读到最后——从疲惫到灵感迸发，从代码编写到内心平静，这片空间不再只属于我。它属于每一位想要一站式服务的开发者。✨💻🧠💖🎯
最后，非常感谢您读到这里！🫶
如果您觉得 AetherDesk 对您有所帮助或启发，以下是一些表达支持的方式：
您的支持对我意义非凡。💖
