tcjlj/OpenFlare
1
0
Fork 0
mirror of https://github.com/Rain-kl/OpenFlare.git synced 2026-09-29 05:56:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

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