[优化] 界面优化

This commit is contained in:
ryan
2026-03-11 21:51:32 +08:00
parent 0edc024cbd
commit c0ec718563
8 changed files with 536 additions and 623 deletions
@@ -301,18 +301,10 @@ export function ConfigVersionsPage() {
onConfirm={() => publishMutation.mutate()} onConfirm={() => publishMutation.mutate()}
onCancel={() => setPublishPreview(null)} onCancel={() => setPublishPreview(null)}
/> />
) : ( ) : null}
<AppCard title='发布建议' description='建议先查看变更摘要,再决定是否发布为新的激活版本。'>
<div className='space-y-3 text-sm leading-6 text-[var(--foreground-secondary)]'>
<p>1. 使用“预览并发布”查看新增、删除和修改的域名清单。</p>
<p>2. 确认渲染出的 Nginx 配置与支持文件内容符合预期。</p>
<p>3. 若需要回滚,可在下方历史版本列表中重新激活旧版本。</p>
</div>
</AppCard>
)}
</div> </div>
<AppCard title='历史版本' description='支持查看快照详情,并在必要时将旧版本重新设为当前激活版本。'> <AppCard title='历史版本'>
{versionsQuery.isLoading ? ( {versionsQuery.isLoading ? (
<LoadingState /> <LoadingState />
) : versionsQuery.isError ? ( ) : versionsQuery.isError ? (
@@ -219,36 +219,6 @@ export function DashboardOverview() {
return ( return (
<div className='space-y-6'> <div className='space-y-6'>
<AppCard
title='控制台仪表盘'
description='首页统一承接节点、发布、域名、证书、反向代理和用户六个模块的核心总览,避免在各页面重复扫一遍摘要。'
action={<StatusBadge label='实时聚合概览' variant='success' />}
>
<div className='grid gap-4 md:grid-cols-3'>
<div className='rounded-2xl border border-[var(--border-default)] bg-[var(--surface-muted)] p-4'>
<p className='text-xs uppercase tracking-[0.2em] text-[var(--foreground-muted)]'>信息架构</p>
<p className='mt-2 text-base font-semibold text-[var(--foreground-primary)]'>首页负责总览</p>
<p className='mt-2 text-sm leading-6 text-[var(--foreground-secondary)]'>
模块页保留列表、表单和具体操作,摘要统一回收到仪表盘。
</p>
</div>
<div className='rounded-2xl border border-[var(--border-default)] bg-[var(--surface-muted)] p-4'>
<p className='text-xs uppercase tracking-[0.2em] text-[var(--foreground-muted)]'>导航效率</p>
<p className='mt-2 text-base font-semibold text-[var(--foreground-primary)]'>顶栏与侧栏已精简</p>
<p className='mt-2 text-sm leading-6 text-[var(--foreground-secondary)]'>
顶栏只保留版本、主题切换和用户入口,侧栏宽度与按钮高度同步压缩。
</p>
</div>
<div className='rounded-2xl border border-[var(--border-default)] bg-[var(--surface-muted)] p-4'>
<p className='text-xs uppercase tracking-[0.2em] text-[var(--foreground-muted)]'>响应式</p>
<p className='mt-2 text-base font-semibold text-[var(--foreground-primary)]'>小屏可正常展开侧栏</p>
<p className='mt-2 text-sm leading-6 text-[var(--foreground-secondary)]'>
小于 1000px 时切换为抽屉侧栏,不再出现按钮可点但导航不可见的问题。
</p>
</div>
</div>
</AppCard>
<div className='grid gap-6 xl:grid-cols-2'> <div className='grid gap-6 xl:grid-cols-2'>
{dashboardCards.map((card) => ( {dashboardCards.map((card) => (
<SummaryCard key={card.title} {...card} /> <SummaryCard key={card.title} {...card} />
@@ -228,7 +228,6 @@ export function ManagedDomainsPage() {
<AppCard <AppCard
title='域名规则列表' title='域名规则列表'
description='支持快速查看绑定证书、启用状态与最近更新时间。'
action={ action={
<SecondaryButton <SecondaryButton
type='button' type='button'
@@ -369,52 +369,6 @@ export function NodesPage() {
{feedback ? <InlineMessage tone={feedback.tone} message={feedback.message} /> : null} {feedback ? <InlineMessage tone={feedback.tone} message={feedback.message} /> : null}
<div className='grid gap-6 xl:grid-cols-[1fr_1fr]'> <div className='grid gap-6 xl:grid-cols-[1fr_1fr]'>
<AppCard
title='Discovery Token 部署'
description='适用于新节点首次接入,Agent 会自动注册并换取节点专属 Token。'
action={
<div className='flex flex-wrap gap-2'>
<SecondaryButton type='button' onClick={handleRotateToken} disabled={rotateMutation.isPending}>
{rotateMutation.isPending ? '生成中...' : '重新生成 Token'}
</SecondaryButton>
{discoveryCommand ? (
<PrimaryButton
type='button'
onClick={() => void handleCopy(discoveryCommand, 'Discovery 部署命令已复制。')}
>
复制命令
</PrimaryButton>
) : null}
</div>
}
>
{bootstrapQuery.isLoading ? (
<LoadingState />
) : bootstrapQuery.isError ? (
<ErrorState title='Discovery Token 加载失败' description={getErrorMessage(bootstrapQuery.error)} />
) : (
<div className='space-y-4'>
<ResourceField label='Server URL' hint='默认使用当前管理端来源,可按需改为对外访问地址。'>
<ResourceInput value={serverUrl} onChange={(event) => setServerUrl(event.target.value)} />
</ResourceField>
<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 uppercase tracking-[0.2em] text-[var(--foreground-muted)]'>Discovery Token</p>
<p className='mt-2 break-all text-sm text-[var(--foreground-primary)]'>
{bootstrapToken || '暂无'}
</p>
</div>
<div className='rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4 text-sm leading-6 text-[var(--foreground-secondary)]'>
创建节点后也可以使用节点专属 Token 安装,这种方式适合预分配节点名与更新策略。
</div>
</div>
{discoveryCommand ? <CodeBlock className='whitespace-pre-wrap'>{discoveryCommand}</CodeBlock> : null}
</div>
)}
</AppCard>
<AppCard <AppCard
title='节点专属部署命令' title='节点专属部署命令'
description='适用于已在管理端预创建节点的场景,可避免首次接入时匿名自动命名。' description='适用于已在管理端预创建节点的场景,可避免首次接入时匿名自动命名。'
@@ -408,7 +408,7 @@ export function ProxyRoutesPage() {
{feedback ? <InlineMessage tone={feedback.tone} message={feedback.message} /> : null} {feedback ? <InlineMessage tone={feedback.tone} message={feedback.message} /> : null}
<AppCard title='规则列表' description='支持查看启用状态、HTTPS 配置、自定义请求头数量及最近更新时间。'> <AppCard title='规则列表'>
{routesQuery.isLoading ? ( {routesQuery.isLoading ? (
<LoadingState /> <LoadingState />
) : routesQuery.isError ? ( ) : routesQuery.isError ? (
@@ -221,7 +221,6 @@ export function TlsCertificatesPage() {
<AppCard <AppCard
title='证书列表' title='证书列表'
description='展示证书有效期、到期状态与最近更新时间。删除前会提示确认。'
action={ action={
<SecondaryButton <SecondaryButton
type='button' type='button'
@@ -289,7 +289,6 @@ export function UsersPage() {
<AppCard <AppCard
title='用户列表' title='用户列表'
description='搜索会切换到全量匹配结果;分页模式下按服务器默认每页 10 条加载。'
action={ action={
<div className='flex flex-wrap gap-2'> <div className='flex flex-wrap gap-2'>
<SecondaryButton <SecondaryButton
+1 -1
View File
@@ -13,7 +13,7 @@ export const dashboardNavigation: NavigationItem[] = [
}, },
{ {
href: '/proxy-route', href: '/proxy-route',
label: '反向代理', label: '规则',
icon: 'proxy', icon: 'proxy',
}, },
{ {