-
-
+
-
-
-
-
-
+
+
+
-
-
-
+
-
-
-
-
- ...
- ...
-
+
+
+
+
+
+
- ......
-
-
-
-
-
-
+
+
-
-
- | - |
+
+
-
+
+ --%
+
-
+
+
-
-
-
-
+
+
+
+
+
+
-
-
-
-
-
-
+
-
-
-
+
-
-
-
+
+ 
+
+
+
+
+
-
-
-
+
-
- -
-
-
+
-
+
+ 
+
+
+
+
+
-
- ${name}
-
- ${status === 'ok' ? duration + 'ms' : ''}
-
-
+
+
+
+ 
+ ${name}
+
+
+ ${status === 'ok' ? duration + 'ms' : '—'}
+
diff --git a/src/public/parts/shells/debug_info/public/templates/connectivity_list.html b/src/public/parts/shells/debug_info/public/templates/connectivity_list.html
index ff0a55e8e6..38f2e3aa44 100644
--- a/src/public/parts/shells/debug_info/public/templates/connectivity_list.html
+++ b/src/public/parts/shells/debug_info/public/templates/connectivity_list.html
@@ -1,8 +1,13 @@
${checks.map(check => `
-
- ${check.name}
-
- ${check.status === 'ok' && check.duration != null ? check.duration + 'ms' : ''}
-
-
+
+
+
+ 
+ ${check.name}
+
+
+ ${check.status === 'ok' && check.duration != null ? check.duration + 'ms' : check.status === 'ok' && check.activeLinks != null ? `` : '—'}
+
`).join('')}
diff --git a/src/public/parts/shells/debug_info/public/templates/system_info_table.html b/src/public/parts/shells/debug_info/public/templates/system_info_table.html
index c56986c83a..3ec50da2e2 100644
--- a/src/public/parts/shells/debug_info/public/templates/system_info_table.html
+++ b/src/public/parts/shells/debug_info/public/templates/system_info_table.html
@@ -1,6 +1,11 @@
${rows.map(row => `
- ${row.key}
- ${row.val}
+
+
+ 
+ ${row.key}
+
+
+ ${row.val}
`).join('')}
diff --git a/src/public/parts/shells/debug_info/test/frontend/smoke.spec.mjs b/src/public/parts/shells/debug_info/test/frontend/smoke.spec.mjs
index 6092e51a7f..5bd8d6c512 100644
--- a/src/public/parts/shells/debug_info/test/frontend/smoke.spec.mjs
+++ b/src/public/parts/shells/debug_info/test/frontend/smoke.spec.mjs
@@ -5,13 +5,21 @@ import { test, expect } from './fixtures.mjs'
test.describe('debug_info shell smoke', () => {
test('debug info page boots with system table', async ({ page, baseUrl }) => {
+ await page.route('**/api/parts/shells:debug_info/system_info', route => route.fulfill({ json: {
+ os: { platform: 'test', release: '1', arch: 'x64' },
+ cpu: { model: 'test', cores: 1, speed: 1 },
+ memory: { total: 1, free: 0 },
+ connectivity: [{ id: 'fount-network', name: 'fount Network', status: 'ok', activeLinks: 2 }],
+ } }))
await page.goto(`${baseUrl}/parts/shells:debug_info/`, { waitUntil: 'domcontentloaded' })
await expect(page.locator('main')).toBeVisible({ timeout: 30_000 })
await expect(page.locator('#copy-button')).toBeVisible()
await expect(page.locator('h1[data-i18n="debug_info.heading"]')).toBeVisible()
+ await expect(page.locator('.page-status')).toHaveCount(0)
const systemTable = page.locator('#system-info-table')
await expect(systemTable).toBeVisible()
await expect(systemTable.locator('tr').first()).toBeVisible({ timeout: 30_000 })
+ await expect(page.locator('[data-i18n="debug_info.linksCount"][data-count="2"]')).toBeVisible()
})
test('update button surfaces the auto-update-disabled notice instead of staying silently disabled', async ({ page, baseUrl }) => {
-
+
+
+
+
diff --git a/src/public/parts/shells/debug_info/public/index.mjs b/src/public/parts/shells/debug_info/public/index.mjs
index b5f006bc14..40c0abdf6a 100644
--- a/src/public/parts/shells/debug_info/public/index.mjs
+++ b/src/public/parts/shells/debug_info/public/index.mjs
@@ -6,6 +6,7 @@ import { onServerEvent } from '/scripts/endpoints/server_events.mjs'
import { ping } from '/scripts/endpoints/base.mjs'
import { createTestStatusWs, getSystemInfo, postRestart } from './src/endpoints.mjs'
import { mountTemplate, renderTemplate } from './templates.mjs'
+import { recordLatency, redrawLatencySparklines } from './src/latency_sparkline.mjs'
applyTheme()
await initTranslations('debug_info')
@@ -40,9 +41,34 @@ let isUpToDate = null
* @param {number} bytes - 字节数。
* @returns {string} 以 GiB 为单位保留两位小数的字符串。
*/
-const bytesToGiB = bytes => (bytes / 1024 ** 3).toFixed(2)
+const bytesToGiB = bytes => Number.isFinite(bytes) && bytes >= 0 ? (bytes / 1024 ** 3).toFixed(2) : 'Unknown'
+
+function getMemoryStats(memory = {}) {
+ const total = Number(memory.total)
+ const free = Number(memory.free)
+ if (!Number.isFinite(total) || !Number.isFinite(free) || total <= 0) return { used: null, percent: null }
+ const used = Math.max(0, total - Math.min(free, total))
+ return { used, percent: Math.round(used / total * 100) }
+}
+
+function setBadgeState(element, state) {
+ element.dataset.state = state
+}
const FOUNT_REPO_COMMITS = 'https://api.github.com/repos/steve02081504/fount/commits'
+const ICONIFY_LINE = 'https://api.iconify.design/line-md'
+const SERVICE_ICONS = new Map([
+ ['npm Registry', 'square'],
+ ['Deno Land', 'engine'],
+ ['jsDelivr', 'cloud'],
+ ['JSR', 'list-3-filled'],
+ ['fount Network', 'link'],
+ ['fount Server', 'computer'],
+ ['esm.sh', 'cloud-alt-braces'],
+ ['Iconify', 'image'],
+ ['fount Public', 'external-link'],
+])
+const serviceIcon = name => `${ICONIFY_LINE}/${SERVICE_ICONS.get(name) || 'square'}.svg`
/**
* 获取 GitHub 上指定分支的最新提交 SHA。
@@ -75,11 +101,11 @@ async function fetchVersionInfo() {
debugData.version.remote = remoteVer
isUpToDate = localVer === remoteVer
- versionIndicator.className = `badge badge-lg ${isUpToDate ? 'badge-success' : 'badge-error'} gap-2`
+ setBadgeState(versionIndicator, isUpToDate ? 'ok' : 'outdated')
versionIndicator.dataset.i18n = isUpToDate ? 'debug_info.versionStatus.upToDate' : 'debug_info.versionStatus.outdated'
} catch (error) {
console.error('Version check failed:', error)
- versionIndicator.className = 'badge badge-lg badge-warning gap-2'
+ setBadgeState(versionIndicator, 'failed')
versionIndicator.dataset.i18n = 'debug_info.versionStatus.checkFailed'
isUpToDate = null
}
@@ -97,17 +123,24 @@ async function fetchSystemInfo() {
const data = await getSystemInfo()
debugData.system = data
- const { os, cpu, memory, connectivity } = data
+ const { os = {}, cpu = {}, memory = {}, connectivity = [] } = data
+ const { percent } = getMemoryStats(memory)
+ document.getElementById('memory-percent').textContent = percent == null ? '--%' : `${percent}%`
+ document.getElementById('memory-progress').value = percent ?? 0
const rows = [
- { key: 'OS', val: `${os.platform} ${os.release} (${os.arch})` },
- { key: 'CPU', val: `${cpu.model} (${cpu.cores} cores) @ ${cpu.speed}MHz` },
- { key: 'Memory', val: `Total: ${bytesToGiB(memory.total)} GB / Free: ${bytesToGiB(memory.free)} GB` },
+ { key: 'OS', icon: `${ICONIFY_LINE}/monitor.svg`, val: `${os.platform} ${os.release} (${os.arch})` },
+ { key: 'CPU', icon: `${ICONIFY_LINE}/cog.svg`, val: `${cpu.model} (${cpu.cores} cores) @ ${cpu.speed}MHz` },
+ { key: 'Memory', icon: `${ICONIFY_LINE}/engine.svg`, val: `Total: ${bytesToGiB(memory.total)} GB / Free: ${bytesToGiB(memory.free)} GB` },
]
await mountTemplate(systemInfoTable, 'system_info_table', { rows })
debugData.connectivity.backend = connectivity
- await mountTemplate(backendChecks, 'connectivity_list', { checks: connectivity })
+ for (const check of connectivity) recordLatency(check.id || check.name, check.duration)
+ await mountTemplate(backendChecks, 'connectivity_list', {
+ checks: connectivity.map(check => ({ ...check, icon: serviceIcon(check.name) })),
+ })
+ redrawLatencySparklines(backendChecks)
} catch (error) {
console.error('System info fetch failed:', error)
systemInfoTable.innerHTML = '
+
+ 
-