refactor: 日志和镜像测试页面加入返回按钮;镜像站配置移动到高级设置中
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user