${escapeHtml(category.title)}
+${escapeHtml(category.description)}
+课程命令：${counts[category.title] || 0}
+Master a lesson after you can explain the command, predict the output, and connect it to a real operations step.
+ Stage map
+ 阶段路线清单
+按阶段划分的学习路线，帮你把命令练习串联成一条完整的运维路径。
+ + +Command categories
+ 命令家族可视化
+了解各类命令在当前课程中的分布，以及建议的学习顺序。
+ +Learning stages
System route from Linux basics to operations habits
@@ -1248,12 +1370,18 @@ } } + const persistedAuth = JSON.parse(localStorage.getItem('linux_lab_auth') || '{}'); const state = { overview: null, lesson: null, language: localStorage.getItem('linux_lab_language') || 'zh', theme: localStorage.getItem('linux_lab_theme') || 'light', - progress: JSON.parse(localStorage.getItem('linux_lab_progress') || '{}') + progress: JSON.parse(localStorage.getItem('linux_lab_progress') || '{}'), + auth: { + loggedIn: persistedAuth.loggedIn || false, + user: persistedAuth.user || '', + token: persistedAuth.token || '' + } }; document.addEventListener('DOMContentLoaded', async () => { @@ -1272,6 +1400,7 @@ }); document.getElementById('masteryBtn').addEventListener('click', toggleMastery); await loadOverview(); + renderAuthStatus(); }); function saveProgress() { @@ -1301,6 +1430,26 @@ renderLesson(); } + function persistAuth() { + localStorage.setItem('linux_lab_auth', JSON.stringify(state.auth)); + } + + function renderAuthStatus() { + const badge = document.getElementById('authStatusBadge'); + const modeLabel = document.getElementById('authModeLabel'); + const hint = document.getElementById('authHint'); + const form = document.getElementById('loginForm'); + const logoutBtn = document.getElementById('logoutBtn'); + badge.textContent = state.auth.loggedIn ? '已登录' : '公开访问'; + modeLabel.textContent = state.auth.loggedIn ? `当前登录：${state.auth.user}` : '未登录'; + hint.textContent = state.auth.loggedIn + ? '您已解锁全部实验和进度保存功能。' + : '登录后可解锁任务追踪、保存进度和补全排障建议提示。'; + form.style.display = state.auth.loggedIn ? 'none' : 'flex'; + logoutBtn.style.display = state.auth.loggedIn ? 'inline-flex' : 'none'; + badge.classList.toggle('auth-status', !!state.auth.loggedIn); + } + async function loadOverview() { const response = await fetch('/api/overview'); state.overview = await response.json(); @@ -1658,19 +1807,125 @@ document.getElementById('themeBtn').textContent = theme === 'light' ? uiText().themeToDark : uiText().themeToLight; } + const COMMAND_CATEGORY_META = [ + { id: "navigation", title: "导航", description: "帮你定位在系统中的上下文、目录和状态。" }, + { id: "filesystem", title: "文件系统", description: "读写/移动/备份关键资产的安全操作。" }, + { id: "text", title: "文本处理", description: "过滤日志、提取字段、整理数据。" }, + { id: "observation", title: "观测", description: "实时洞察服务、进程、资源使用。" }, + { id: "service", title: "服务控制", description: "管理 systemd 单元、日志和守护进程。" }, + { id: "network", title: "网络", description: "检查连接、响应、DNS 及路由。" }, + ]; + function escapeHtml(value) { return String(value) - .replaceAll('&', '&') - .replaceAll('<', '<') - .replaceAll('>', '>') - .replaceAll('"', '"') - .replaceAll("'", '''); + .replaceAll("&", "&") + .replaceAll("<", "<") + .replaceAll(">", ">") + .replaceAll('"', """) + .replaceAll("'", "'"); } + function renderStageTimeline() { + const map = document.getElementById("stageMap"); + const modules = (state.overview?.modules || []).slice(0, 5); + if (!modules.length) { + map.innerHTML = "尚无阶段数据
";
+ return;
+ }
+ map.innerHTML = modules.map((module, index) => `
+
+ ${index + 1}. ${escapeHtml(localizedModuleTitle(module))}
+ ${(module.lesson_count || 0)} lessons · ${(module.exercise_count || 0)} exercises
+
+ `).join("");
+ const track = document.getElementById("progressTrack");
+ const completion = completionRate();
+ track.innerHTML = modules.map((module, index) => {
+ const masteredLessons = (module.lessons || []).filter((lesson) => isMastered(lesson.id)).length;
+ const totalLessons = module.lesson_count || (module.lessons || []).length;
+ const percent = totalLessons ? Math.round((masteredLessons / totalLessons) * 100) : 0;
+ return `${escapeHtml(localizedModuleTitle(module))}: ${percent}%`;
+ }).join("");
+ }
+
+ function renderCategoryGrid() {
+ const container = document.getElementById("categoryGrid");
+ const commandSet = new Set(state.overview?.commands || []);
+ const counts = {};
+ commandSet.forEach((cmd) => {
+ for (const category of COMMAND_CATEGORY_META) {
+ if (!counts[category.title]) {
+ counts[category.title] = 0;
+ }
+ const family = category.id;
+ const supported = window.COMMAND_FAMILIES?.[family] || [];
+ if (supported.includes(cmd)) {
+ counts[category.title]++;
+ }
+ }
+ });
+ container.innerHTML = COMMAND_CATEGORY_META.map((category) => `
+