i/Aether
1
0
Fork 0
mirror of https://github.com/fawney19/Aether.git synced 2026-09-03 09:50:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(system-settings): 添加右侧悬浮目录导航

Browse Source 
为系统设置页面添加 TOC 侧边栏，支持点击跳转和滚动高亮，
使用 IntersectionObserver 实现滚动监听，圆点指示器标记当前章节。

Co-authored-by: AAEE86 <AAEE86@users.noreply.github.com>
Closes #177
This commit is contained in:
fawney19
2026-02-15 18:46:26 +08:00
parent a7bc7f25b4
commit 25046d7c98
1 changed files with 212 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

309
frontend/src/views/admin/SystemSettings.vue
View File

@@ -1,110 +1,156 @@
<template> <template>
<PageContainer> <PageContainer>
<PageHeader <div class="relative flex gap-6">
title="系统设置" <!-- 主内容 -->
description="管理系统级别的配置和参数" <div class="flex-1 min-w-0">
/> <PageHeader
title="系统设置"
description="管理系统级别的配置和参数"
/>
<div class="mt-6 space-y-6"> <div class="mt-6 space-y-6">
<!-- 站点信息 --> <!-- 站点信息 -->
<SiteInfoSection <SiteInfoSection
:site-name="systemConfig.site_name" id="section-site-info"
:site-subtitle="systemConfig.site_subtitle" :site-name="systemConfig.site_name"
:loading="siteInfoLoading" :site-subtitle="systemConfig.site_subtitle"
:has-changes="hasSiteInfoChanges" :loading="siteInfoLoading"
@save="saveSiteInfo" :has-changes="hasSiteInfoChanges"
@update:site-name="systemConfig.site_name = $event" @save="saveSiteInfo"
@update:site-subtitle="systemConfig.site_subtitle = $event" @update:site-name="systemConfig.site_name = $event"
/> @update:site-subtitle="systemConfig.site_subtitle = $event"
/>
<!-- 配置导出/导入 --> <!-- 配置导出/导入 -->
<ConfigManagementSection <ConfigManagementSection
:export-loading="exportLoading" id="section-config-mgmt"
:import-loading="importLoading" :export-loading="exportLoading"
@export="handleExportConfig" :import-loading="importLoading"
@file-select="handleConfigFileSelect" @export="handleExportConfig"
/> @file-select="handleConfigFileSelect"
/>
<!-- 用户数据导出/导入 --> <!-- 用户数据导出/导入 -->
<UserDataSection <UserDataSection
:export-loading="exportUsersLoading" id="section-user-data"
:import-loading="importUsersLoading" :export-loading="exportUsersLoading"
@export="handleExportUsers" :import-loading="importUsersLoading"
@file-select="handleUsersFileSelect" @export="handleExportUsers"
/> @file-select="handleUsersFileSelect"
/>
<!-- 网络代理 --> <!-- 网络代理 -->
<ProxyConfigSection <ProxyConfigSection
:proxy-node-id="systemConfig.system_proxy_node_id" id="section-proxy"
:online-nodes="proxyNodesStore.onlineNodes" :proxy-node-id="systemConfig.system_proxy_node_id"
:loading="proxyConfigLoading" :online-nodes="proxyNodesStore.onlineNodes"
:has-changes="hasProxyConfigChanges" :loading="proxyConfigLoading"
@save="saveProxyConfig" :has-changes="hasProxyConfigChanges"
@update:proxy-node-id="systemConfig.system_proxy_node_id = $event" @save="saveProxyConfig"
/> @update:proxy-node-id="systemConfig.system_proxy_node_id = $event"
/>
<!-- 基础配置 --> <!-- 基础配置 -->
<BasicConfigSection <BasicConfigSection
:default-user-quota-usd="systemConfig.default_user_quota_usd" id="section-basic"
:rate-limit-per-minute="systemConfig.rate_limit_per_minute" :default-user-quota-usd="systemConfig.default_user_quota_usd"
:enable-registration="systemConfig.enable_registration" :rate-limit-per-minute="systemConfig.rate_limit_per_minute"
:auto-delete-expired-keys="systemConfig.auto_delete_expired_keys" :enable-registration="systemConfig.enable_registration"
:enable-format-conversion="systemConfig.enable_format_conversion" :auto-delete-expired-keys="systemConfig.auto_delete_expired_keys"
:loading="basicConfigLoading" :enable-format-conversion="systemConfig.enable_format_conversion"
:has-changes="hasBasicConfigChanges" :loading="basicConfigLoading"
@save="saveBasicConfig" :has-changes="hasBasicConfigChanges"
@update:default-user-quota-usd="systemConfig.default_user_quota_usd = $event" @save="saveBasicConfig"
@update:rate-limit-per-minute="systemConfig.rate_limit_per_minute = $event" @update:default-user-quota-usd="systemConfig.default_user_quota_usd = $event"
@update:enable-registration="systemConfig.enable_registration = $event" @update:rate-limit-per-minute="systemConfig.rate_limit_per_minute = $event"
@update:auto-delete-expired-keys="systemConfig.auto_delete_expired_keys = $event" @update:enable-registration="systemConfig.enable_registration = $event"
@update:enable-format-conversion="systemConfig.enable_format_conversion = $event" @update:auto-delete-expired-keys="systemConfig.auto_delete_expired_keys = $event"
/> @update:enable-format-conversion="systemConfig.enable_format_conversion = $event"
/>
<!-- 请求记录配置 --> <!-- 请求记录配置 -->
<RequestLogSection <RequestLogSection
:request-record-level="systemConfig.request_record_level" id="section-request-log"
:max-request-body-size-k-b="maxRequestBodySizeKB" :request-record-level="systemConfig.request_record_level"
:max-response-body-size-k-b="maxResponseBodySizeKB" :max-request-body-size-k-b="maxRequestBodySizeKB"
:sensitive-headers-str="sensitiveHeadersStr" :max-response-body-size-k-b="maxResponseBodySizeKB"
:loading="logConfigLoading" :sensitive-headers-str="sensitiveHeadersStr"
:has-changes="hasLogConfigChanges" :loading="logConfigLoading"
@save="saveLogConfig" :has-changes="hasLogConfigChanges"
@update:request-record-level="systemConfig.request_record_level = $event" @save="saveLogConfig"
@update:max-request-body-size-k-b="maxRequestBodySizeKB = $event" @update:request-record-level="systemConfig.request_record_level = $event"
@update:max-response-body-size-k-b="maxResponseBodySizeKB = $event" @update:max-request-body-size-k-b="maxRequestBodySizeKB = $event"
@update:sensitive-headers-str="sensitiveHeadersStr = $event" @update:max-response-body-size-k-b="maxResponseBodySizeKB = $event"
/> @update:sensitive-headers-str="sensitiveHeadersStr = $event"
/>
<!-- 请求记录清理策略 --> <!-- 请求记录清理策略 -->
<CleanupPolicySection <CleanupPolicySection
:enable-auto-cleanup="systemConfig.enable_auto_cleanup" id="section-cleanup"
:detail-log-retention-days="systemConfig.detail_log_retention_days" :enable-auto-cleanup="systemConfig.enable_auto_cleanup"
:compressed-log-retention-days="systemConfig.compressed_log_retention_days" :detail-log-retention-days="systemConfig.detail_log_retention_days"
:header-retention-days="systemConfig.header_retention_days" :compressed-log-retention-days="systemConfig.compressed_log_retention_days"
:log-retention-days="systemConfig.log_retention_days" :header-retention-days="systemConfig.header_retention_days"
:cleanup-batch-size="systemConfig.cleanup_batch_size" :log-retention-days="systemConfig.log_retention_days"
:audit-log-retention-days="systemConfig.audit_log_retention_days" :cleanup-batch-size="systemConfig.cleanup_batch_size"
:loading="cleanupConfigLoading" :audit-log-retention-days="systemConfig.audit_log_retention_days"
:has-changes="hasCleanupConfigChanges" :loading="cleanupConfigLoading"
@save="saveCleanupConfig" :has-changes="hasCleanupConfigChanges"
@toggle-auto-cleanup="handleAutoCleanupToggle" @save="saveCleanupConfig"
@update:detail-log-retention-days="systemConfig.detail_log_retention_days = $event" @toggle-auto-cleanup="handleAutoCleanupToggle"
@update:compressed-log-retention-days="systemConfig.compressed_log_retention_days = $event" @update:detail-log-retention-days="systemConfig.detail_log_retention_days = $event"
@update:header-retention-days="systemConfig.header_retention_days = $event" @update:compressed-log-retention-days="systemConfig.compressed_log_retention_days = $event"
@update:log-retention-days="systemConfig.log_retention_days = $event" @update:header-retention-days="systemConfig.header_retention_days = $event"
@update:cleanup-batch-size="systemConfig.cleanup_batch_size = $event" @update:log-retention-days="systemConfig.log_retention_days = $event"
@update:audit-log-retention-days="systemConfig.audit_log_retention_days = $event" @update:cleanup-batch-size="systemConfig.cleanup_batch_size = $event"
/> @update:audit-log-retention-days="systemConfig.audit_log_retention_days = $event"
/>
<!-- 定时任务 --> <!-- 定时任务 -->
<ScheduledTasksSection <ScheduledTasksSection
:scheduled-tasks="scheduledTasks" id="section-scheduled"
:quota-reset-interval-days="systemConfig.user_quota_reset_interval_days" :scheduled-tasks="scheduledTasks"
@update:quota-reset-interval-days="systemConfig.user_quota_reset_interval_days = $event" :quota-reset-interval-days="systemConfig.user_quota_reset_interval_days"
/> @update:quota-reset-interval-days="systemConfig.user_quota_reset_interval_days = $event"
/>
<!-- 系统版本信息 --> <!-- 系统版本信息 -->
<SystemInfoSection :system-version="systemVersion" /> <SystemInfoSection
id="section-sysinfo"
:system-version="systemVersion"
/>
</div>
</div>
<!-- 右侧悬浮目录 -->
<nav class="hidden lg:block w-44 shrink-0">
<div class="sticky top-1/2 -translate-y-1/2">
<div class="relative">
<!-- 竖线：通过绝对定位，以圆点中心为基准 -->
<div class="absolute right-[3px] top-0 bottom-0 w-px bg-border" />
<ul class="relative text-sm">
<li
v-for="item in tocItems"
:key="item.id"
>
<button
class="relative flex items-center justify-end w-full text-right pr-4 pl-2 py-1.5 transition-all duration-200"
:class="activeSection === item.id
? 'text-primary font-medium'
: 'text-muted-foreground hover:text-foreground'"
@click="scrollToSection(item.id)"
>
{{ item.label }}
<span
class="absolute right-0 w-[7px] h-[7px] rounded-full transition-all duration-200"
:class="activeSection === item.id ? 'bg-primary scale-125' : 'bg-border'"
/>
</button>
</li>
</ul>
</div>
</div>
</nav>
</div> </div>
<!-- 导入配置对话框 --> <!-- 导入配置对话框 -->
@@ -142,7 +188,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } from 'vue' import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import { PageHeader, PageContainer } from '@/components/layout' import { PageHeader, PageContainer } from '@/components/layout'
import { useProxyNodesStore } from '@/stores/proxy-nodes' import { useProxyNodesStore } from '@/stores/proxy-nodes'
@@ -168,6 +214,66 @@ import UsersImportDialog from './system-settings/UsersImportDialog.vue'
const proxyNodesStore = useProxyNodesStore() const proxyNodesStore = useProxyNodesStore()
// TOC 目录导航
const tocItems = [
{ id: 'section-site-info', label: '站点信息' },
{ id: 'section-config-mgmt', label: '配置管理' },
{ id: 'section-user-data', label: '用户数据管理' },
{ id: 'section-proxy', label: '网络代理' },
{ id: 'section-basic', label: '基础配置' },
{ id: 'section-request-log', label: '请求记录' },
{ id: 'section-cleanup', label: '记录清理策略' },
{ id: 'section-scheduled', label: '定时任务' },
{ id: 'section-sysinfo', label: '系统信息' },
]
const activeSection = ref(tocItems[0].id)
let observer: IntersectionObserver | null = null
function getScrollContainer(): HTMLElement | null {
return document.querySelector('.app-shell__content')
}
function scrollToSection(id: string) {
const el = document.getElementById(id)
const container = getScrollContainer()
if (el && container) {
const offset = 80
const top = el.getBoundingClientRect().top - container.getBoundingClientRect().top + container.scrollTop - offset
container.scrollTo({ top, behavior: 'smooth' })
}
}
function setupScrollSpy() {
const sectionIds = tocItems.map(item => item.id)
const container = getScrollContainer()
if (!container) return
const visibleSections = new Set<string>()
observer = new IntersectionObserver(
(entries) => {
for (const entry of entries) {
if (entry.isIntersecting) {
visibleSections.add(entry.target.id)
} else {
visibleSections.delete(entry.target.id)
}
}
const topId = sectionIds.find(id => visibleSections.has(id))
if (topId) {
activeSection.value = topId
}
},
{ root: container, rootMargin: '-80px 0px -60% 0px', threshold: 0 }
)
for (const id of sectionIds) {
const el = document.getElementById(id)
if (el) observer.observe(el)
}
}
// System config composable // System config composable
const { const {
systemConfig, systemConfig,
@@ -235,5 +341,14 @@ onMounted(async () => {
]) ])
// 配置加载完成后初始化定时任务的原始值 // 配置加载完成后初始化定时任务的原始值
initPreviousValues() initPreviousValues()
await nextTick()
setupScrollSpy()
})
onBeforeUnmount(() => {
if (observer) {
observer.disconnect()
observer = null
}
}) })
</script> </script>