refactor: 日志和镜像测试页面加入返回按钮;镜像站配置移动到高级设置中

This commit is contained in:
2025-09-14 14:13:40 +08:00
parent 4d8d71f294
commit 5f12ddf332
5 changed files with 122 additions and 84 deletions

View File

@@ -1,8 +1,18 @@
<template>
<div class="logs-container">
<div class="logs-header">
<h1>日志查看</h1>
<p class="logs-description">查看和管理应用程序日志</p>
<div class="header-content">
<div class="title-section">
<h1>日志查看</h1>
<p class="logs-description">查看和管理应用程序日志</p>
</div>
<a-button @click="goBack" size="large">
<template #icon>
<ArrowLeftOutlined />
</template>
返回设置
</a-button>
</div>
</div>
<LogViewer />
@@ -11,9 +21,12 @@
<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { ArrowLeftOutlined } from '@ant-design/icons-vue'
import LogViewer from '@/components/LogViewer.vue'
import { useTheme } from '@/composables/useTheme'
const router = useRouter()
const { isDark } = useTheme()
const textColor = computed(() =>
@@ -22,6 +35,10 @@ const textColor = computed(() =>
const textSecondaryColor = computed(() =>
isDark.value ? 'rgba(255, 255, 255, 0.65)' : 'rgba(0, 0, 0, 0.65)'
)
const goBack = () => {
router.push('/settings')
}
</script>
<style scoped>
@@ -31,6 +48,19 @@ const textSecondaryColor = computed(() =>
padding: 20px;
}
.logs-header {
margin-bottom: 24px;
}
.header-content {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.title-section {
flex: 1;
}
.logs-header h1 {
margin: 0 0 8px 0;

View File

@@ -1,8 +1,18 @@
<template>
<div class="mirror-test-container">
<div class="test-header">
<h2>镜像配置测试页面</h2>
<p>用于测试云端镜像配置拉取功能</p>
<div class="header-content">
<div class="title-section">
<h2>镜像配置测试页面</h2>
<p>用于测试云端镜像配置拉取功能</p>
</div>
<a-button @click="goBack" size="large">
<template #icon>
<ArrowLeftOutlined />
</template>
返回设置
</a-button>
</div>
</div>
<div class="test-content">
@@ -83,10 +93,14 @@
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { ArrowLeftOutlined } from '@ant-design/icons-vue'
import { mirrorManager } from '@/utils/mirrorManager'
import { cloudConfigManager, type CloudMirrorConfig } from '@/utils/cloudConfigManager'
const router = useRouter()
interface TestLog {
time: string
message: string
@@ -196,6 +210,10 @@ const testCloudUrl = async () => {
}
}
const goBack = () => {
router.push('/settings')
}
onMounted(() => {
updateStatus()
addLog('镜像配置测试页面已加载', 'info')
@@ -210,10 +228,20 @@ onMounted(() => {
}
.test-header {
text-align: center;
margin-bottom: 24px;
}
.header-content {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.title-section {
flex: 1;
text-align: center;
}
.test-header h2 {
margin-bottom: 8px;
}

View File

@@ -1,5 +1,19 @@
<script setup lang="ts">
const { goToLogs, openDevTools } = defineProps<{ goToLogs: () => void; openDevTools: () => void }>()
const {
goToLogs,
openDevTools,
mirrorConfigStatus,
refreshingConfig,
refreshMirrorConfig,
goToMirrorTest
} = defineProps<{
goToLogs: () => void
openDevTools: () => void
mirrorConfigStatus: { isUsingCloudConfig: boolean; version: string; lastUpdated: string; source: 'cloud' | 'fallback' }
refreshingConfig: boolean
refreshMirrorConfig: () => Promise<void>
goToMirrorTest: () => void
}>()
</script>
<template>
<div class="tab-content">
@@ -16,5 +30,45 @@ const { goToLogs, openDevTools } = defineProps<{ goToLogs: () => void; openDevTo
</a-col>
</a-row>
</div>
<div class="form-section">
<div class="section-header">
<h3>镜像站配置</h3>
<p class="section-description">管理下载站和加速站配置支持从云端自动更新最新的镜像站列表</p>
</div>
<a-row :gutter="24">
<a-col :span="24">
<div class="form-item-vertical">
<div class="form-label-wrapper">
<span class="form-label">配置管理</span>
</div>
<a-space size="large">
<a-button type="primary" @click="refreshMirrorConfig" :loading="refreshingConfig"
size="large">更新云端最新配置</a-button>
<a-button @click="goToMirrorTest" size="large">测试页面</a-button>
</a-space>
</div>
</a-col>
</a-row>
<a-row :gutter="24" style="margin-top: 24px;">
<a-col :span="24">
<div class="form-item-vertical">
<div class="form-label-wrapper">
<span class="form-label">说明</span>
</div>
<a-alert message="镜像配置说明" type="info" show-icon>
<template #description>
<ul style="margin:8px 0; padding-left:20px;">
<li>应用启动时会自动尝试从云端拉取最新的镜像站配置</li>
<li>可以手动点击"刷新云端配置"按钮获取最新配置</li>
</ul>
</template>
</a-alert>
</div>
</a-col>
</a-row>
</div>
</div>
</template>

View File

@@ -1,72 +0,0 @@
<script setup lang="ts">
const { mirrorConfigStatus, refreshingConfig, refreshMirrorConfig, goToMirrorTest } = defineProps<{
mirrorConfigStatus: { isUsingCloudConfig: boolean; version: string; lastUpdated: string; source: 'cloud' | 'fallback' }
refreshingConfig: boolean
refreshMirrorConfig: () => Promise<void>
goToMirrorTest: () => void
}>()
</script>
<template>
<div class="tab-content">
<div class="form-section">
<div class="section-header">
<h3>镜像站配置</h3>
<p class="section-description">管理下载站和加速站配置支持从云端自动更新最新的镜像站列表</p>
</div>
<a-row :gutter="24">
<a-col :span="24">
<div class="form-item-vertical">
<div class="form-label-wrapper">
<span class="form-label">配置状态</span>
</div>
<a-descriptions :column="1" bordered size="small">
<a-descriptions-item label="配置来源">
<a-tag :color="mirrorConfigStatus.source === 'cloud' ? 'green' : 'orange'">
{{ mirrorConfigStatus.source === 'cloud' ? '云端配置' : '本地兜底配置' }}
</a-tag>
</a-descriptions-item>
<a-descriptions-item label="配置版本" v-if="mirrorConfigStatus.version">
{{ mirrorConfigStatus.version }}
</a-descriptions-item>
<a-descriptions-item label="最后更新" v-if="mirrorConfigStatus.lastUpdated">
{{ new Date(mirrorConfigStatus.lastUpdated).toLocaleString() }}
</a-descriptions-item>
</a-descriptions>
</div>
</a-col>
</a-row>
<a-row :gutter="24" style="margin-top:24px;">
<a-col :span="24">
<div class="form-item-vertical">
<div class="form-label-wrapper">
<span class="form-label">配置管理</span>
</div>
<a-space size="large">
<a-button type="primary" @click="refreshMirrorConfig" :loading="refreshingConfig" size="large">更新云端最新配置</a-button>
<a-button @click="goToMirrorTest" size="large">测试页面</a-button>
</a-space>
</div>
</a-col>
</a-row>
<a-row :gutter="24" style="margin-top: 24px;">
<a-col :span="24">
<div class="form-item-vertical">
<div class="form-label-wrapper">
<span class="form-label">说明</span>
</div>
<a-alert message="镜像配置说明" type="info" show-icon>
<template #description>
<ul style="margin:8px 0; padding-left:20px;">
<li>应用启动时会自动尝试从云端拉取最新的镜像站配置</li>
<li>可以手动点击"刷新云端配置"按钮获取最新配置</li>
</ul>
</template>
</a-alert>
</div>
</a-col>
</a-row>
</div>
</div>
</template>

View File

@@ -22,7 +22,6 @@ import TabUpdate from './TabUpdate.vue'
import TabStart from './TabStart.vue'
import TabVoice from './TabVoice.vue'
import TabAdvanced from './TabAdvanced.vue'
import TabMirrors from './TabMirrors.vue'
import TabOthers from './TabOthers.vue'
const router = useRouter()
@@ -308,11 +307,10 @@ onMounted(() => {
<TabVoice :settings="settings" :voice-type-options="voiceTypeOptions" :handle-setting-change="handleSettingChange" />
</a-tab-pane>
<a-tab-pane key="advanced" tab="高级设置">
<TabAdvanced :go-to-logs="goToLogs" :open-dev-tools="openDevTools" />
</a-tab-pane>
<a-tab-pane key="mirrors" tab="镜像配置">
<TabMirrors
:mirror-config-status="mirrorConfigStatus.value"
<TabAdvanced
:go-to-logs="goToLogs"
:open-dev-tools="openDevTools"
:mirror-config-status="mirrorConfigStatus"
:refreshing-config="refreshingConfig"
:refresh-mirror-config="refreshMirrorConfig"
:go-to-mirror-test="goToMirrorTest"