Skip to content

Commit 28e3174

Browse files
qianmoQqianmoQ
committed
feat: 添加网络配置页面
1 parent 8a9851d commit 28e3174

3 files changed

Lines changed: 219 additions & 2 deletions

File tree

‎src/components/Settings.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,11 @@
2020
<template #language>
2121
<Language v-if="activeTab === 'language'" @settings-changed="handleLanguageSettingsChanged"/>
2222
</template>
23+
24+
<!-- 网络配置 -->
25+
<template #network>
26+
<Network v-if="activeTab === 'network'" @settings-changed="handleNetworkSettingsChanged" @error="handleEditorError"/>
27+
</template>
2328
</Tabs>
2429
</Modal>
2530
</template>
@@ -31,6 +36,7 @@ import Tabs from '../ui/Tabs.vue'
3136
import General from './setting/General.vue'
3237
import Language from './setting/Language.vue'
3338
import Editor from './setting/Editor.vue'
39+
import Network from './setting/Network.vue'
3440
import { useSettings } from '../composables/useSettings.ts'
3541
3642
const emit = defineEmits<{
@@ -44,6 +50,7 @@ const {
4450
tabsData,
4551
handleEditorSettingsChanged,
4652
handleLanguageSettingsChanged,
53+
handleNetworkSettingsChanged,
4754
handleEditorError,
4855
closeSettings,
4956
initialize

‎src/components/setting/Network.vue‎

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
<template>
2+
<div>
3+
<!-- CDN 镜像配置 -->
4+
<div class="mb-6">
5+
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
6+
<Globe class="w-5 h-5 mr-2"/>
7+
CDN 镜像配置
8+
</h3>
9+
10+
<div class="space-y-4">
11+
<div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
12+
<div class="flex items-center space-x-3">
13+
<div class="flex items-center">
14+
<input id="cdn-enabled"
15+
v-model="cdnEnabled"
16+
type="checkbox"
17+
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
18+
@change="handleCdnEnabledChange">
19+
<label for="cdn-enabled" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300 cursor-pointer">
20+
启用 CDN 镜像加速
21+
</label>
22+
</div>
23+
</div>
24+
<div class="flex items-center space-x-2">
25+
<div v-if="cdnEnabled" class="flex items-center text-green-600 dark:text-green-400 text-sm">
26+
<CheckCircle class="w-4 h-4 mr-1"/>
27+
已启用
28+
</div>
29+
<div v-else class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
30+
<XCircle class="w-4 h-4 mr-1"/>
31+
未启用
32+
</div>
33+
</div>
34+
</div>
35+
36+
<Label label="CDN 基础 URL">
37+
<Input v-model="cdnBaseUrl"
38+
placeholder="http://cdn.global.devlive.top"
39+
class="w-full"
40+
:disabled="!cdnEnabled"
41+
@input="handleCdnBaseUrlChange"/>
42+
</Label>
43+
44+
<div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
45+
<div class="flex items-start">
46+
<Info class="w-5 h-5 text-blue-600 dark:text-blue-400 mr-2 mt-0.5 flex-shrink-0"/>
47+
<div class="text-sm text-blue-800 dark:text-blue-300">
48+
<p class="font-medium mb-2">CDN 镜像说明</p>
49+
<ul class="space-y-1 list-disc list-inside">
50+
<li>CDN 镜像用于加速环境安装包的下载</li>
51+
<li>URL 格式：<code class="bg-blue-100 dark:bg-blue-800 px-1 py-0.5 rounded">{base_url}/{language}/{version}/{filename}</code></li>
52+
<li>例如：<code class="bg-blue-100 dark:bg-blue-800 px-1 py-0.5 rounded">http://cdn.global.devlive.top/clojure/1.12.4.1582/clojure-tools-1.12.4.1582.tar.gz</code>
53+
</li>
54+
<li>如果 CDN 下载失败，系统会自动回退到 GitHub 官方源</li>
55+
</ul>
56+
</div>
57+
</div>
58+
</div>
59+
60+
<!-- 操作按钮 -->
61+
<div class="flex gap-3 pt-0.5">
62+
<Button @click="saveCdnConfig" :disabled="!hasChanges || isSaving" :loading="isSaving" type="primary">
63+
{{ isSaving ? '保存中...' : '保存配置' }}
64+
</Button>
65+
<Button @click="resetCdnConfig" type="secondary">
66+
重置为默认
67+
</Button>
68+
<Button @click="testCdnConnection" :loading="isTesting" :disabled="!cdnEnabled || !cdnBaseUrl || isTesting" type="secondary">
69+
{{ isTesting ? '测试中...' : '测试连接' }}
70+
</Button>
71+
</div>
72+
</div>
73+
</div>
74+
</div>
75+
</template>
76+
77+
<script setup lang="ts">
78+
import { computed, onMounted, ref } from 'vue'
79+
import { CheckCircle, Globe, Info, XCircle } from 'lucide-vue-next'
80+
import Button from '../../ui/Button.vue'
81+
import Label from '../../ui/Label.vue'
82+
import { invoke } from '@tauri-apps/api/core'
83+
import { useToast } from '../../plugins/toast'
84+
import Input from "../../ui/Input.vue";
85+
86+
const emit = defineEmits<{
87+
'settings-changed': [type: string, value: any]
88+
'error': [message: string]
89+
}>()
90+
91+
const toast = useToast()
92+
93+
// 状态
94+
const cdnEnabled = ref(false)
95+
const cdnBaseUrl = ref('')
96+
const originalEnabled = ref(false)
97+
const originalBaseUrl = ref('')
98+
const isSaving = ref(false)
99+
const isTesting = ref(false)
100+
101+
// 计算是否有变更
102+
const hasChanges = computed(() => {
103+
return cdnEnabled.value !== originalEnabled.value || cdnBaseUrl.value !== originalBaseUrl.value
104+
})
105+
106+
// 加载配置
107+
const loadCdnConfig = async () => {
108+
try {
109+
const config = await invoke<any>('get_app_config')
110+
if (config.environment_mirror) {
111+
cdnEnabled.value = config.environment_mirror.enabled ?? false
112+
cdnBaseUrl.value = config.environment_mirror.base_url ?? ''
113+
originalEnabled.value = cdnEnabled.value
114+
originalBaseUrl.value = cdnBaseUrl.value
115+
}
116+
}
117+
catch (error) {
118+
console.error('加载 CDN 配置失败:', error)
119+
toast.error('加载 CDN 配置失败: ' + error)
120+
}
121+
}
122+
123+
// 保存配置
124+
const saveCdnConfig = async () => {
125+
isSaving.value = true
126+
try {
127+
const config = await invoke<any>('get_app_config')
128+
config.environment_mirror = {
129+
enabled: cdnEnabled.value,
130+
base_url: cdnBaseUrl.value
131+
}
132+
133+
await invoke('update_app_config', { config })
134+
135+
originalEnabled.value = cdnEnabled.value
136+
originalBaseUrl.value = cdnBaseUrl.value
137+
138+
toast.success('CDN 配置已保存')
139+
emit('settings-changed', 'cdn', config.environment_mirror)
140+
}
141+
catch (error) {
142+
console.error('保存 CDN 配置失败:', error)
143+
toast.error('保存 CDN 配置失败: ' + error)
144+
emit('error', '保存 CDN 配置失败')
145+
}
146+
finally {
147+
isSaving.value = false
148+
}
149+
}
150+
151+
// 重置配置
152+
const resetCdnConfig = async () => {
153+
cdnEnabled.value = true
154+
cdnBaseUrl.value = 'http://cdn.global.devlive.top'
155+
}
156+
157+
// 测试连接
158+
const testCdnConnection = async () => {
159+
if (!cdnBaseUrl.value) {
160+
toast.error('请先输入 CDN 基础 URL')
161+
return
162+
}
163+
164+
isTesting.value = true
165+
try {
166+
// 简单的连通性测试：尝试访问 CDN URL
167+
const testUrl = cdnBaseUrl.value.replace(/\/$/, '')
168+
const response = await fetch(testUrl, {
169+
method: 'HEAD',
170+
mode: 'no-cors'
171+
})
172+
173+
toast.success('CDN 连接测试成功')
174+
}
175+
catch (error) {
176+
console.error('CDN 连接测试失败:', error)
177+
toast.warning('无法直接测试 CDN 连接，但这可能是正常的（CORS 限制）。请尝试下载环境包以验证 CDN 是否正常工作。')
178+
}
179+
finally {
180+
isTesting.value = false
181+
}
182+
}
183+
184+
// 处理启用状态变化
185+
const handleCdnEnabledChange = () => {
186+
console.log('CDN 启用状态变化:', cdnEnabled.value)
187+
}
188+
189+
// 处理 URL 变化
190+
const handleCdnBaseUrlChange = () => {
191+
console.log('CDN URL 变化:', cdnBaseUrl.value)
192+
}
193+
194+
// 生命周期
195+
onMounted(async () => {
196+
await loadCdnConfig()
197+
})
198+
199+
defineExpose({
200+
loadCdnConfig,
201+
saveCdnConfig
202+
})
203+
</script>

‎src/composables/useSettings.ts‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { nextTick, ref } from 'vue'
2-
import { BracesIcon, CodeIcon, ShieldIcon } from 'lucide-vue-next'
2+
import { BracesIcon, CodeIcon, Globe, ShieldIcon } from 'lucide-vue-next'
33

44
export function useSettings(emit: any)
55
{
@@ -11,7 +11,8 @@ export function useSettings(emit: any)
1111
const tabsData = [
1212
{ key: 'general', label: '通用', icon: ShieldIcon },
1313
{ key: 'editor', label: '编辑器', icon: CodeIcon },
14-
{ key: 'language', label: '语言', icon: BracesIcon }
14+
{ key: 'language', label: '语言', icon: BracesIcon },
15+
{ key: 'network', label: '网络', icon: Globe }
1516
]
1617

1718
const handleEditorSettingsChanged = (config: any) => {
@@ -24,6 +25,11 @@ export function useSettings(emit: any)
2425
emit('settings-changed', config)
2526
}
2627

28+
const handleNetworkSettingsChanged = (config: any) => {
29+
console.log('设置模态框接收到网络配置变更:', config)
30+
emit('settings-changed', config)
31+
}
32+
2733
const handleEditorError = (message: string) => {
2834
console.error('编辑器设置错误:', message)
2935
}
@@ -51,6 +57,7 @@ export function useSettings(emit: any)
5157
tabsData,
5258
handleEditorSettingsChanged,
5359
handleLanguageSettingsChanged,
60+
handleNetworkSettingsChanged,
5461
handleEditorError,
5562
closeSettings,
5663
initialize

0 commit comments

Comments
 (0)