opsx
f3733f0bfc
- 品牌: Go 模块/数据文件/二进制/构建部署资产全部 opsx→lokistack;前端 localStorage 命名空间迁移(读旧写新,含按用户 id 前缀迁移);修复 nginx upstream 与 Makefile 引用已改名服务的断裂 - i18n: react-i18next 落地,common + 11 个页面域命名空间全站中英(菜单/顶栏/登录/列表页/表单/确认弹窗/状态徽章);设置页语言即时切换;修复词典自注册导致的循环导入白屏 - 用户管理: 批量删除(POST /users/batch-delete,不删自己/最后管理员,部分失败不阻断)+ 行复选/全选/批量工具条 - 主题: 浅色侧栏(中性灰激活态)、四态模式(浅色/深色/跟随系统/定时切换,按时区判定)、顶栏太阳月亮二态、设置页紧凑分段选择器 - UI: 登录记住用户名、CardActionButton 统一五页卡片操作钮、shadcn Badge 替换手写徽章、语义色修正 - 清理: 移除主机 Web 终端(前后端)、k8s-helm/Helm 遗留代码与字段、README 重写精简 - 修复: 侧栏与日志告警 order 重复、路由标题 i18n key 未翻译、词典双逗号等
52 lines
2.0 KiB
TypeScript
52 lines
2.0 KiB
TypeScript
import { memo } from 'react'
|
|
import { Monitor, RefreshCw, Trash2, Eye, Pencil } from 'lucide-react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { StatusBadge } from '@/components/StatusBadge'
|
|
import { ResourceCard } from '@/components/ResourceCard'
|
|
import { CardActionButton } from '@/components/CardActionButton'
|
|
import type { Host } from '@/types'
|
|
|
|
interface HostCardProps {
|
|
host: Host
|
|
validating: number | null
|
|
onViewInfo: (h: Host) => void
|
|
onValidate: (id: number) => void
|
|
onDelete: (h: Host) => void
|
|
onEdit: (h: Host) => void
|
|
}
|
|
|
|
/** 主机卡片 — 统一 ResourceCard 样式 */
|
|
export const HostCard = memo(function HostCard({
|
|
host, validating, onViewInfo, onValidate, onDelete, onEdit,
|
|
}: HostCardProps) {
|
|
const { t } = useTranslation('hosts')
|
|
return (
|
|
<ResourceCard
|
|
icon={Monitor}
|
|
iconClassName="text-info"
|
|
title={host.name}
|
|
badges={<StatusBadge status={host.status} />}
|
|
fields={[
|
|
{ label: t('fields.address'), value: `${host.hostIP}:${host.port}` },
|
|
{ label: t('fields.user'), value: host.user },
|
|
{ label: t('fields.auth'), value: host.authType === 'key' ? t('fields.authKey') : t('fields.authPassword') },
|
|
{ label: t('fields.os'), value: `${host.os || t('fields.unknown')} / ${host.arch || t('fields.unknown')}` },
|
|
]}
|
|
actions={
|
|
<>
|
|
<CardActionButton icon={Pencil} ariaLabel={t('actions.editAria', { name: host.name })} onClick={() => onEdit(host)} />
|
|
<CardActionButton icon={Eye} label={t('actions.detail')} onClick={() => onViewInfo(host)} />
|
|
<CardActionButton
|
|
icon={RefreshCw}
|
|
ariaLabel={t('actions.validateAria', { name: host.name })}
|
|
spinning={validating === host.id}
|
|
disabled={validating === host.id}
|
|
onClick={() => onValidate(host.id)}
|
|
/>
|
|
<CardActionButton icon={Trash2} ariaLabel={t('actions.deleteAria', { name: host.name })} destructive onClick={() => onDelete(host)} />
|
|
</>
|
|
}
|
|
/>
|
|
)
|
|
})
|