mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-10-09 00:56:37 +08:00
[优化] 界面优化
This commit is contained in:
@@ -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
|
||||||
|
|||||||
@@ -13,7 +13,7 @@ export const dashboardNavigation: NavigationItem[] = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
href: '/proxy-route',
|
href: '/proxy-route',
|
||||||
label: '反向代理',
|
label: '规则',
|
||||||
icon: 'proxy',
|
icon: 'proxy',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
Reference in New Issue
Block a user