refactor: 日志和镜像测试页面加入返回按钮;镜像站配置移动到高级设置中
This commit is contained in:
@@ -1,8 +1,18 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="logs-container">
|
<div class="logs-container">
|
||||||
<div class="logs-header">
|
<div class="logs-header">
|
||||||
<h1>日志查看</h1>
|
<div class="header-content">
|
||||||
<p class="logs-description">查看和管理应用程序日志</p>
|
<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>
|
</div>
|
||||||
|
|
||||||
<LogViewer />
|
<LogViewer />
|
||||||
@@ -11,9 +21,12 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed } from 'vue'
|
import { computed } from 'vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import { ArrowLeftOutlined } from '@ant-design/icons-vue'
|
||||||
import LogViewer from '@/components/LogViewer.vue'
|
import LogViewer from '@/components/LogViewer.vue'
|
||||||
import { useTheme } from '@/composables/useTheme'
|
import { useTheme } from '@/composables/useTheme'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
const { isDark } = useTheme()
|
const { isDark } = useTheme()
|
||||||
|
|
||||||
const textColor = computed(() =>
|
const textColor = computed(() =>
|
||||||
@@ -22,6 +35,10 @@ const textColor = computed(() =>
|
|||||||
const textSecondaryColor = computed(() =>
|
const textSecondaryColor = computed(() =>
|
||||||
isDark.value ? 'rgba(255, 255, 255, 0.65)' : 'rgba(0, 0, 0, 0.65)'
|
isDark.value ? 'rgba(255, 255, 255, 0.65)' : 'rgba(0, 0, 0, 0.65)'
|
||||||
)
|
)
|
||||||
|
|
||||||
|
const goBack = () => {
|
||||||
|
router.push('/settings')
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@@ -31,6 +48,19 @@ const textSecondaryColor = computed(() =>
|
|||||||
padding: 20px;
|
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 {
|
.logs-header h1 {
|
||||||
margin: 0 0 8px 0;
|
margin: 0 0 8px 0;
|
||||||
|
|||||||
@@ -1,8 +1,18 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="mirror-test-container">
|
<div class="mirror-test-container">
|
||||||
<div class="test-header">
|
<div class="test-header">
|
||||||
<h2>镜像配置测试页面</h2>
|
<div class="header-content">
|
||||||
<p>用于测试云端镜像配置拉取功能</p>
|
<div class="title-section">
|
||||||
|
<h2>镜像配置测试页面</h2>
|
||||||
|
<p>用于测试云端镜像配置拉取功能</p>
|
||||||
|
</div>
|
||||||
|
<a-button @click="goBack" size="large">
|
||||||
|
<template #icon>
|
||||||
|
<ArrowLeftOutlined />
|
||||||
|
</template>
|
||||||
|
返回设置
|
||||||
|
</a-button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="test-content">
|
<div class="test-content">
|
||||||
@@ -83,10 +93,14 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted } from 'vue'
|
import { ref, onMounted } from 'vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
import { message } from 'ant-design-vue'
|
import { message } from 'ant-design-vue'
|
||||||
|
import { ArrowLeftOutlined } from '@ant-design/icons-vue'
|
||||||
import { mirrorManager } from '@/utils/mirrorManager'
|
import { mirrorManager } from '@/utils/mirrorManager'
|
||||||
import { cloudConfigManager, type CloudMirrorConfig } from '@/utils/cloudConfigManager'
|
import { cloudConfigManager, type CloudMirrorConfig } from '@/utils/cloudConfigManager'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
interface TestLog {
|
interface TestLog {
|
||||||
time: string
|
time: string
|
||||||
message: string
|
message: string
|
||||||
@@ -196,6 +210,10 @@ const testCloudUrl = async () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const goBack = () => {
|
||||||
|
router.push('/settings')
|
||||||
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
updateStatus()
|
updateStatus()
|
||||||
addLog('镜像配置测试页面已加载', 'info')
|
addLog('镜像配置测试页面已加载', 'info')
|
||||||
@@ -210,10 +228,20 @@ onMounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.test-header {
|
.test-header {
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 24px;
|
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 {
|
.test-header h2 {
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,19 @@
|
|||||||
<script setup lang="ts">
|
<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>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="tab-content">
|
<div class="tab-content">
|
||||||
@@ -16,5 +30,45 @@ const { goToLogs, openDevTools } = defineProps<{ goToLogs: () => void; openDevTo
|
|||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</template>
|
</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 TabStart from './TabStart.vue'
|
||||||
import TabVoice from './TabVoice.vue'
|
import TabVoice from './TabVoice.vue'
|
||||||
import TabAdvanced from './TabAdvanced.vue'
|
import TabAdvanced from './TabAdvanced.vue'
|
||||||
import TabMirrors from './TabMirrors.vue'
|
|
||||||
import TabOthers from './TabOthers.vue'
|
import TabOthers from './TabOthers.vue'
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
@@ -308,11 +307,10 @@ onMounted(() => {
|
|||||||
<TabVoice :settings="settings" :voice-type-options="voiceTypeOptions" :handle-setting-change="handleSettingChange" />
|
<TabVoice :settings="settings" :voice-type-options="voiceTypeOptions" :handle-setting-change="handleSettingChange" />
|
||||||
</a-tab-pane>
|
</a-tab-pane>
|
||||||
<a-tab-pane key="advanced" tab="高级设置">
|
<a-tab-pane key="advanced" tab="高级设置">
|
||||||
<TabAdvanced :go-to-logs="goToLogs" :open-dev-tools="openDevTools" />
|
<TabAdvanced
|
||||||
</a-tab-pane>
|
:go-to-logs="goToLogs"
|
||||||
<a-tab-pane key="mirrors" tab="镜像配置">
|
:open-dev-tools="openDevTools"
|
||||||
<TabMirrors
|
:mirror-config-status="mirrorConfigStatus"
|
||||||
:mirror-config-status="mirrorConfigStatus.value"
|
|
||||||
:refreshing-config="refreshingConfig"
|
:refreshing-config="refreshingConfig"
|
||||||
:refresh-mirror-config="refreshMirrorConfig"
|
:refresh-mirror-config="refreshMirrorConfig"
|
||||||
:go-to-mirror-test="goToMirrorTest"
|
:go-to-mirror-test="goToMirrorTest"
|
||||||
|
|||||||
Reference in New Issue
Block a user