[优化] 精简多个组件的描述文本

This commit is contained in:
ryan
2026-03-15 16:55:54 +08:00
parent 6caee17e2d
commit 6f0867948e
11 changed files with 28 additions and 50 deletions
@@ -1,13 +1,17 @@
interface EmptyStateProps { interface EmptyStateProps {
title: string; title: string;
description: string; description?: string;
} }
export function EmptyState({ title, description }: EmptyStateProps) { export function EmptyState({title, description}: EmptyStateProps) {
return ( return (
<div className='rounded-2xl border border-dashed border-[var(--border-default)] bg-[var(--surface-muted)] px-5 py-6 text-sm'> <div
<p className='text-base font-semibold text-[var(--foreground-primary)]'>{title}</p> className='rounded-2xl border border-dashed border-[var(--border-default)] bg-[var(--surface-muted)] px-5 py-6 text-sm'>
<p className='mt-2 leading-6 text-[var(--foreground-secondary)]'>{description}</p> <p className='text-base font-semibold text-[var(--foreground-primary)]'>{title}</p>
</div> {description ?
); <p className='mt-2 leading-6 text-[var(--foreground-secondary)]'>{description}</p> : null
}
</div>
);
} }
@@ -20,7 +20,7 @@ export function ConfigVersionSnapshotModal({
isOpen={Boolean(version)} isOpen={Boolean(version)}
onClose={onClose} onClose={onClose}
title={version ? `版本 ${version.version}` : '查看快照'} title={version ? `版本 ${version.version}` : '查看快照'}
description="在弹窗中查看快照 JSON 与渲染结果,避免把页面主视图撑长。" description="在弹窗中查看快照 JSON 与渲染结果。"
size="xl" size="xl"
footer={ footer={
<div className="flex justify-end"> <div className="flex justify-end">
@@ -248,7 +248,6 @@ export function DashboardOverview() {
<div className="grid gap-6 xl:grid-cols-[1.1fr_0.9fr]"> <div className="grid gap-6 xl:grid-cols-[1.1fr_0.9fr]">
<AppCard <AppCard
title="24 小时网络与磁盘趋势" title="24 小时网络与磁盘趋势"
description="把 OpenResty 吞吐和磁盘读写放到同一屏,方便判断是流量拉升还是资源抖动。"
> >
<div className="space-y-6"> <div className="space-y-6">
<TrendChart <TrendChart
@@ -311,7 +310,6 @@ export function DashboardOverview() {
<AppCard <AppCard
title="Top 节点榜单" title="Top 节点榜单"
description="把流量、错误与容量压力节点并排展示,保留快速定位热点与瓶颈的入口。"
> >
<div className="grid gap-6 xl:grid-cols-1"> <div className="grid gap-6 xl:grid-cols-1">
<div> <div>
@@ -353,7 +351,7 @@ export function DashboardOverview() {
<div className="grid gap-6 xl:grid-cols-3"> <div className="grid gap-6 xl:grid-cols-3">
<AppCard <AppCard
title="来源分布" title="来源分布"
description="聚合最近 24 小时主要来源国家,优先识别流量重心变化。" description="聚合最近 24 小时主要来源国家。"
> >
<RankChart <RankChart
items={overview.distributions.source_countries.map((item) => ({ items={overview.distributions.source_countries.map((item) => ({
@@ -381,7 +379,7 @@ export function DashboardOverview() {
<AppCard <AppCard
title="Top Domain" title="Top Domain"
description="观察主要流量集中在哪些域名,方便判断业务热度与异常集中点。" description="观察主要流量集中在哪些域名。"
> >
<RankChart <RankChart
items={overview.distributions.top_domains.map((item) => ({ items={overview.distributions.top_domains.map((item) => ({
@@ -396,7 +394,7 @@ export function DashboardOverview() {
<AppCard <AppCard
title="节点健康列表" title="节点健康列表"
description="按异常数量和资源压力排序,优先显示最需要关注的节点。" description="按异常数量和资源压力排序。"
action={ action={
<Link <Link
href="/node" href="/node"
@@ -236,17 +236,6 @@ export function WorldStage({
: '节点覆盖信号'} : '节点覆盖信号'}
</div> </div>
<div
className={cn(
'absolute top-16 left-6 z-10 rounded-full px-3 py-1 text-[11px] backdrop-blur',
isDark
? 'bg-slate-900/45 text-slate-200'
: 'bg-white/85 text-slate-600 shadow-[0_10px_24px_rgba(148,163,184,0.16)]',
)}
>
拖动平移,滚轮缩放
</div>
<div className="absolute top-4 right-4 z-10 flex flex-wrap gap-2"> <div className="absolute top-4 right-4 z-10 flex flex-wrap gap-2">
<LegendPill <LegendPill
label="国家底色: 来源热度" label="国家底色: 来源热度"
@@ -812,7 +812,6 @@ export function NodeDetailPage({ nodeId }: { nodeId: string }) {
<AppCard <AppCard
title="实时资源" title="实时资源"
description="读取节点最近一次快照,快速判断资源压力与吞吐情况。"
> >
{observabilityQuery.isLoading ? ( {observabilityQuery.isLoading ? (
<LoadingState /> <LoadingState />
@@ -874,7 +873,6 @@ export function NodeDetailPage({ nodeId }: { nodeId: string }) {
<AppCard <AppCard
title="网络流量" title="网络流量"
description="首屏优先看 OpenResty 吞吐、节点网络与最近窗口流量,快速判断是否存在网络或流量异常。"
> >
{observabilityQuery.isLoading ? ( {observabilityQuery.isLoading ? (
<LoadingState /> <LoadingState />
@@ -994,7 +992,7 @@ export function NodeDetailPage({ nodeId }: { nodeId: string }) {
<div className="grid gap-6 xl:grid-cols-2"> <div className="grid gap-6 xl:grid-cols-2">
<AppCard <AppCard
title="24 小时请求趋势" title="24 小时请求趋势"
description="按小时聚合该节点的请求量和错误量,判断是否存在突发流量或持续异常。" description="按小时聚合该节点的请求量和错误量。"
> >
<TrendChart <TrendChart
labels={ labels={
@@ -1027,7 +1025,7 @@ export function NodeDetailPage({ nodeId }: { nodeId: string }) {
<AppCard <AppCard
title="24 小时容量趋势" title="24 小时容量趋势"
description="观察该节点 CPU 与内存使用率在 24 小时内的变化,辅助扩容和排障。" description="观察该节点 CPU 与内存使用率在 24 小时内的变化。"
> >
<TrendChart <TrendChart
labels={ labels={
@@ -1363,7 +1361,7 @@ export function NodeDetailPage({ nodeId }: { nodeId: string }) {
<AppCard <AppCard
title="当前目标版本" title="当前目标版本"
description="展示当前全局激活配置版本,便于直接核对节点应追上的主配置与路由配置。" description="展示当前全局激活配置版本。"
action={ action={
activeConfigVersion ? ( activeConfigVersion ? (
<SecondaryButton <SecondaryButton
@@ -187,7 +187,7 @@ export function NodesPage() {
<div className="space-y-6"> <div className="space-y-6">
<PageHeader <PageHeader
title="节点管理" title="节点管理"
description="节点列表只保留状态、版本与最近活动等关键内容。节点部署、Token、更新模式与手动升级入口统一收敛到详情页。" description="显示节点相关信息。"
action={ action={
<> <>
<SecondaryButton type="button" onClick={handleCreate}> <SecondaryButton type="button" onClick={handleCreate}>
@@ -1312,9 +1312,6 @@ export function PerformancePage() {
<p className="text-sm font-semibold text-[var(--foreground-primary)]"> <p className="text-sm font-semibold text-[var(--foreground-primary)]">
当前渲染预览 当前渲染预览
</p> </p>
<p className="mt-1 text-xs text-[var(--foreground-secondary)]">
基于当前结构化参数和模板生成的主配置文件。
</p>
</div> </div>
<StatusBadge <StatusBadge
label={`${preview.route_count} 条规则`} label={`${preview.route_count} 条规则`}
@@ -805,7 +805,6 @@ export function ProxyRoutesPage() {
<ResourceField <ResourceField
label="备注" label="备注"
hint="可选,便于标记用途、责任人或特殊说明。"
error={form.formState.errors.remark?.message} error={form.formState.errors.remark?.message}
> >
<ResourceTextarea <ResourceTextarea
@@ -939,7 +939,7 @@ export function SettingsPage() {
<div className="grid gap-6 xl:grid-cols-[1fr_1fr]"> <div className="grid gap-6 xl:grid-cols-[1fr_1fr]">
<AppCard <AppCard
title="Agent 接入设置" title="Agent 接入设置"
description="集中维护 Agent 运行参数、更新仓库与 IP 归属方式。运行参数会通过心跳响应下发到 Agent。" description="运行参数会通过心跳响应下发到 Agent。"
action={ action={
<PrimaryButton <PrimaryButton
type="button" type="button"
@@ -1028,8 +1028,7 @@ export function SettingsPage() {
Agent 更新仓库 Agent 更新仓库
</p> </p>
<p className="text-sm text-[var(--foreground-muted)]"> <p className="text-sm text-[var(--foreground-muted)]">
自动更新和手动更新动作在节点页触发,这里维护 Agent 上游更新仓库
自更新使用的仓库地址。
</p> </p>
</div> </div>
<div className="mt-4"> <div className="mt-4">
@@ -1219,7 +1218,7 @@ export function SettingsPage() {
</div> </div>
<ResourceField <ResourceField
label="一键部署命令" label="一键部署命令"
hint="命令会使用安装脚本自动注册 Agent,并在首次注册后换发专属 agent_token。" hint="命令会使用安装脚本自动注册 Agent。"
> >
<CodeBlock className="break-all whitespace-pre-wrap"> <CodeBlock className="break-all whitespace-pre-wrap">
{discoveryCommand || '请先填写可访问的 Server URL。'} {discoveryCommand || '请先填写可访问的 Server URL。'}
@@ -1229,9 +1228,7 @@ export function SettingsPage() {
)} )}
</AppCard> </AppCard>
<AppCard <AppCard
title="版本与构建信息" title="版本与构建信息">
description="版本检查与升级入口已移动到顶栏“版本”。这里保留构建模式和当前运行状态说明。"
>
<div className="grid gap-4 md:grid-cols-2"> <div className="grid gap-4 md:grid-cols-2">
<div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4"> <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
<p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase"> <p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
@@ -259,8 +259,8 @@ export function VersionUpgradeModal({
: release.in_progress : release.in_progress
? '升级中...' ? '升级中...'
: selectedChannel === 'preview' : selectedChannel === 'preview'
? '升级到预览版' ? '升级预览版'
: '升级到正式版'} : '升级正式版'}
</PrimaryButton> </PrimaryButton>
</div> </div>
) : null} ) : null}
@@ -271,7 +271,6 @@ export function VersionUpgradeModal({
{release ? ( {release ? (
<AppCard <AppCard
title="升级日志" title="升级日志"
description="展示当前自动升级任务的下载、校验与替换进度。"
> >
{upgradeLogs.length > 0 ? ( {upgradeLogs.length > 0 ? (
<div className="space-y-3"> <div className="space-y-3">
@@ -321,7 +320,6 @@ export function VersionUpgradeModal({
) : ( ) : (
<EmptyState <EmptyState
title="暂无升级日志" title="暂无升级日志"
description="开始自动升级后,这里会滚动展示后端返回的执行日志。"
/> />
)} )}
</AppCard> </AppCard>
@@ -330,7 +328,6 @@ export function VersionUpgradeModal({
{canUpgrade ? ( {canUpgrade ? (
<AppCard <AppCard
title="手动升级" title="手动升级"
description="上传服务端二进制后,服务端会先检查版本,再由你确认是否执行升级。"
> >
<div className="space-y-4"> <div className="space-y-4">
<ResourceField <ResourceField
@@ -481,7 +478,6 @@ export function VersionUpgradeModal({
) : ( ) : (
<EmptyState <EmptyState
title="尚未上传升级包" title="尚未上传升级包"
description="上传后会在这里展示识别出的版本信息,并允许你确认升级。"
/> />
)} )}
</div> </div>
@@ -96,7 +96,7 @@ export function WebsitesPage() {
<div className="space-y-6"> <div className="space-y-6">
<PageHeader <PageHeader
title="网站" title="网站"
description="主界面只保留网站列表卡片。新增网站时可直接绑定证书,也可以在弹窗内先添加证书后再应用。" description="新增网站和添加证书。"
action={ action={
<div className="flex flex-wrap gap-3"> <div className="flex flex-wrap gap-3">
<Link <Link