18 changed files with 520 additions and 1205 deletions
File diff suppressed because it is too large
Load Diff
@ -1,107 +0,0 @@
@@ -1,107 +0,0 @@
|
||||
<template> |
||||
<div class="speed-test"> |
||||
<h1>GoFaster Speed Test</h1> |
||||
<button @click="startTest" :disabled="testing"> |
||||
{{ testing ? 'Testing...' : 'Start Test' }} |
||||
</button> |
||||
|
||||
<div v-if="result" class="results"> |
||||
<h3>Test Results:</h3> |
||||
<div class="result-item"> |
||||
<span class="label">Download:</span> |
||||
<span class="value">{{ result.download }} Mbps</span> |
||||
</div> |
||||
<div class="result-item"> |
||||
<span class="label">Upload:</span> |
||||
<span class="value">{{ result.upload }} Mbps</span> |
||||
</div> |
||||
<div class="result-item"> |
||||
<span class="label">Ping:</span> |
||||
<span class="value">{{ result.ping }} ms</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { ref } from 'vue' |
||||
import { useStore } from 'vuex' |
||||
|
||||
export default { |
||||
name: 'SpeedTest', |
||||
setup() { |
||||
const store = useStore() |
||||
const testing = ref(false) |
||||
const result = ref(null) |
||||
|
||||
const startTest = async () => { |
||||
testing.value = true |
||||
result.value = null |
||||
|
||||
// 模拟网络测试 (替换为真实测试逻辑) |
||||
await new Promise(resolve => setTimeout(resolve, 2000)) |
||||
|
||||
const testResult = { |
||||
download: (Math.random() * 100).toFixed(2), |
||||
upload: (Math.random() * 50).toFixed(2), |
||||
ping: (Math.random() * 100).toFixed(2), |
||||
timestamp: new Date().toISOString() |
||||
} |
||||
|
||||
// 保存结果 |
||||
await store.dispatch('saveTestResult', testResult) |
||||
result.value = testResult |
||||
testing.value = false |
||||
} |
||||
|
||||
return { testing, result, startTest } |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.speed-test { |
||||
padding: 20px; |
||||
max-width: 600px; |
||||
margin: 0 auto; |
||||
text-align: center; |
||||
} |
||||
|
||||
button { |
||||
padding: 10px 20px; |
||||
font-size: 16px; |
||||
background-color: #42b983; |
||||
color: white; |
||||
border: none; |
||||
border-radius: 4px; |
||||
cursor: pointer; |
||||
margin: 20px 0; |
||||
} |
||||
|
||||
button:disabled { |
||||
background-color: #cccccc; |
||||
cursor: not-allowed; |
||||
} |
||||
|
||||
.results { |
||||
margin-top: 20px; |
||||
padding: 15px; |
||||
background-color: #f5f5f5; |
||||
border-radius: 4px; |
||||
text-align: left; |
||||
} |
||||
|
||||
.result-item { |
||||
margin: 10px 0; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
} |
||||
|
||||
.label { |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.value { |
||||
color: #42b983; |
||||
} |
||||
</style> |
||||
@ -1,11 +0,0 @@
@@ -1,11 +0,0 @@
|
||||
// 业务功能模块入口文件
|
||||
|
||||
// 速度测试功能
|
||||
export { default as SpeedTest } from './components/SpeedTest.vue' |
||||
|
||||
// 历史记录功能
|
||||
export { default as History } from './views/History.vue' |
||||
|
||||
// 业务服务
|
||||
export { default as speedTestService } from './services/speedTest.js' |
||||
export { default as historyService } from './services/history.js' |
||||
@ -1,42 +0,0 @@
@@ -1,42 +0,0 @@
|
||||
// 历史记录服务
|
||||
class HistoryService { |
||||
constructor() { |
||||
this.testResults = [] |
||||
} |
||||
|
||||
// 加载测试结果
|
||||
async loadTestResults() { |
||||
// 从本地存储或数据库加载测试结果
|
||||
const stored = localStorage.getItem('gofaster-test-results') |
||||
if (stored) { |
||||
this.testResults = JSON.parse(stored) |
||||
} |
||||
return this.testResults |
||||
} |
||||
|
||||
// 保存测试结果
|
||||
async saveTestResult(result) { |
||||
this.testResults.push(result) |
||||
localStorage.setItem('gofaster-test-results', JSON.stringify(this.testResults)) |
||||
return result |
||||
} |
||||
|
||||
// 获取测试结果
|
||||
getTestResults() { |
||||
return this.testResults |
||||
} |
||||
|
||||
// 清除测试结果
|
||||
async clearTestResults() { |
||||
this.testResults = [] |
||||
localStorage.removeItem('gofaster-test-results') |
||||
} |
||||
|
||||
// 格式化日期
|
||||
formatDate(timestamp) { |
||||
return new Date(timestamp).toLocaleString() |
||||
} |
||||
} |
||||
|
||||
export default new HistoryService() |
||||
|
||||
@ -1,35 +0,0 @@
@@ -1,35 +0,0 @@
|
||||
// 速度测试服务
|
||||
class SpeedTestService { |
||||
constructor() { |
||||
this.testResults = [] |
||||
} |
||||
|
||||
// 开始速度测试
|
||||
async startTest() { |
||||
// 模拟网络测试 (替换为真实测试逻辑)
|
||||
await new Promise(resolve => setTimeout(resolve, 2000)) |
||||
|
||||
const testResult = { |
||||
download: (Math.random() * 100).toFixed(2), |
||||
upload: (Math.random() * 50).toFixed(2), |
||||
ping: (Math.random() * 100).toFixed(2), |
||||
timestamp: new Date().toISOString() |
||||
} |
||||
|
||||
this.testResults.push(testResult) |
||||
return testResult |
||||
} |
||||
|
||||
// 获取测试结果
|
||||
getTestResults() { |
||||
return this.testResults |
||||
} |
||||
|
||||
// 清除测试结果
|
||||
clearTestResults() { |
||||
this.testResults = [] |
||||
} |
||||
} |
||||
|
||||
export default new SpeedTestService() |
||||
|
||||
@ -1,99 +0,0 @@
@@ -1,99 +0,0 @@
|
||||
<template> |
||||
<div class="history-view"> |
||||
<h1>Test History</h1> |
||||
|
||||
<div v-if="testResults.length === 0" class="empty-state"> |
||||
No speed tests recorded yet. |
||||
</div> |
||||
|
||||
<div v-else class="history-list"> |
||||
<div v-for="(result, index) in testResults" :key="index" class="history-item"> |
||||
<div class="history-date"> |
||||
{{ formatDate(result.timestamp) }} |
||||
</div> |
||||
<div class="history-stats"> |
||||
<span class="stat download">↓ {{ result.download }} Mbps</span> |
||||
<span class="stat upload">↑ {{ result.upload }} Mbps</span> |
||||
<span class="stat ping">↔ {{ result.ping }} ms</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { computed, onMounted } from 'vue' |
||||
import { useStore } from 'vuex' |
||||
|
||||
export default { |
||||
name: 'HistoryView', |
||||
setup() { |
||||
const store = useStore() |
||||
|
||||
onMounted(() => { |
||||
store.dispatch('loadTestResults') |
||||
}) |
||||
|
||||
const testResults = computed(() => store.state.testResults) |
||||
|
||||
const formatDate = (timestamp) => { |
||||
return new Date(timestamp).toLocaleString() |
||||
} |
||||
|
||||
return { testResults, formatDate } |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.history-view { |
||||
padding: 20px; |
||||
max-width: 800px; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.empty-state { |
||||
text-align: center; |
||||
padding: 40px; |
||||
color: #888; |
||||
} |
||||
|
||||
.history-list { |
||||
margin-top: 20px; |
||||
} |
||||
|
||||
.history-item { |
||||
padding: 15px; |
||||
margin-bottom: 10px; |
||||
background-color: #f9f9f9; |
||||
border-radius: 4px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
} |
||||
|
||||
.history-date { |
||||
color: #666; |
||||
} |
||||
|
||||
.history-stats { |
||||
display: flex; |
||||
gap: 15px; |
||||
} |
||||
|
||||
.stat { |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.download { |
||||
color: #42b983; |
||||
} |
||||
|
||||
.upload { |
||||
color: #3498db; |
||||
} |
||||
|
||||
.ping { |
||||
color: #e74c3c; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue