- {JSON.stringify(value, null, 2)}
-
- )
+ if (valueMb >= 1024) {
+ return `${(valueMb / 1024).toFixed(1)} GB`
}
- return String(value)
+ return `${valueMb} MB`
}
export function ServerStatePage() {
- const [server, setServer] = useState
+
+
+ 服务器状态
+
+
+ 页面按 CPU、内存、磁盘和运行时信息聚合展示，便于快速判断资源压力和运行状态。
+
+
+ } onClick={() => void loadServerInfo()} loading={loading}>
+ 刷新状态
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ) : null}
+
+
+
+
+ 运行中
+
+
+ {server.os.goos.toUpperCase()} · Go Runtime
+
+
+ 当前运行时包含 {server.os.numGoroutine} 个 goroutine，编译器为 {server.os.compiler}，
+ Go 版本为 {server.os.goVersion}。
+
+
+
+
+
+
+
+
+
+
+ 逻辑 CPU
+
+ {server.os.numCpu}
+
+
+
+ CPU 平均负载
+
+ {averageCpuUsage}%
+
+
+
+ 内存占用
+
+ {server.ram.usedPercent}%
+
+
+
+
+
+ CPU 负载
+
+
+
+ 内存负载
+
+
+
+
+
+
+ CPU 核心数
+
+ {server.cpu.cores}
+
+
+
+ Goroutine
+
+ {server.os.numGoroutine}
+
+
+
+ 已用内存
+
+ {formatStorageFromMb(server.ram.usedMb)}
+
+
+
+ 磁盘占用
+
+ {diskSummary.usedPercent}%
+
+
+
+
+
+ [`${Number(value ?? 0).toFixed(1)}%`, '占用率']}
+ />
+
+ {cpuChartData.map((item) => (
+ | = 80 ? '#c34747' : item.usage >= 60 ? '#d29b2f' : '#d16f3f'}
+ />
+ ))}
+ |
+
+
+
+
+
+
+ {server.disk.map((diskItem) => (
+
+
+ ))}
+
+
+
+
+
+ {diskItem.usedPercent}%
+
+
+
+
+ {diskItem.mountPoint}
+
+ 已用 {formatStorageFromMb(diskItem.usedMb)} / {formatStorageFromMb(diskItem.totalMb)}
+
+
+
+
+
+
+ )
+ }
+
+ if (typeof value === 'number') {
+ return (
+
+
+
+
+ )
+ }
+
+ const stringValue = typeof value === 'string' ? value : value == null ? '' : String(value)
+ const input = schema?.options ? (
+
+ ) : schema?.inputType === 'textarea' || shouldUseTextArea(namePath, stringValue) ? (
+
+
+ {input}
+
+
+ )
+ }
+
+ const renderField = (namePath: ConfigPath, key: string, value: unknown): React.ReactNode => {
+ const fieldKey = namePath.join('.')
+
+ if (Array.isArray(value)) {
+ const schema = getFieldSchema(namePath)
+ const sampleItem = cloneConfigValue(
+ schema?.template !== undefined ? schema.template : value.find((item) => item !== undefined) ?? '',
+ )
+
+ return (
+
+
+ {(fields, { add, remove }) => (
+
+ {schema?.description ? (
+ {schema.description}
+ ) : null}
+ }
+ onClick={() => add(cloneConfigValue(sampleItem))}
+ >
+ 新增项
+
+
+ }
+ >
+ {fields.length ? (
+
+ )}
+
+
+ )
+ }
+
+ if (isPlainObject(value)) {
+ return (
+
+ {fields.map((field, index) => {
+ const sourceItem = value[index] ?? sampleItem
+
+ if (isPlainObject(sourceItem)) {
+ return (
+
+ ) : (
+
+ {Object.entries(sourceItem).map(([childKey, childValue]) =>
+ renderField([...namePath, field.name, childKey], childKey, childValue),
+ )}
+
+
+ )
+ }
+
+ return (
+
+
+
+
+ )
+ }
+
+ return renderPrimitiveField(namePath, key, value)
+ }
+
+ const groupItems = Object.entries(config).map(([groupKey, groupValue]) => {
+ const meta = groupMetaMap[groupKey] || {
+ title: formatLabel(groupKey),
+ summary: '当前分组未登记说明，使用原始配置结构渲染。',
+ }
+
+ return {
+ key: groupKey,
+ label: (
+
+ {Object.entries(value).map(([childKey, childValue]) => renderField([...namePath, childKey], childKey, childValue))}
+
+
+ {meta.title}
+ {meta.summary}
+
+ ),
+ children: (
+
+
+ ),
+ }
+ })
+
return (
+ {groupKey}
+
+
+
+ {meta.title}
+
+
+ {meta.summary}
+
+
+
+ {isPlainObject(groupValue)
+ ? Object.entries(groupValue).map(([childKey, childValue]) => renderField([groupKey, childKey], childKey, childValue))
+ : renderField([groupKey], groupKey, groupValue)}
+
+
- {JSON.stringify(config, null, 2)}
-
- ),
- },
- ]}
- />
+