Skip to content

Commit

Permalink
Code Improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@jason5ng32
jason5ng32 committed Feb 2, 2025
1 parent 76ae6d7 commit 89c9577
Show file tree
Hide file tree
Showing 4 changed files with 124 additions and 100 deletions.
10 changes: 5 additions & 5 deletions frontend/components/advanced-tools/BrowserInfo.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,9 +173,6 @@
import { ref, computed, watch, onMounted } from 'vue';
import { useMainStore } from '@/store';
import { useI18n } from 'vue-i18n';
import { UAParser } from 'ua-parser-js';
import { getFingerprint as calFingerPrint, setOption as setFingerPrintOption } from '@thumbmarkjs/thumbmarkjs';
import { getGPUTier } from 'detect-gpu';
const { t } = useI18n();
Expand Down Expand Up @@ -208,6 +205,7 @@ const otherInfos = ref({});
// 获取 GPU 信息
const getGPU = async () => {
try {
const { getGPUTier } = await import('detect-gpu');
const gpuTier = await getGPUTier();
if (gpuTier && gpuTier.gpu) {
gpu.value = gpuTier.gpu.toLowerCase().replace(/(^\w|\s\w)/g, m => m.toUpperCase());
Expand All @@ -223,6 +221,7 @@ const getGPU = async () => {
// 获取 UA
const getUA = async () => {
try {
const { UAParser } = await import('ua-parser-js');
const parser = new UAParser();
parser.setUA(parser.getUA());
userAgent.value = parser.getResult();
Expand Down Expand Up @@ -268,8 +267,9 @@ const getFingerPrint = async () => {
fingerprint.value = t('browserinfo.calculating');
try {
let excludes = await getExcludeOptions();
setFingerPrintOption('exclude', excludes);
const getFP = await calFingerPrint();
const { getFingerprint, setOption } = await import('@thumbmarkjs/thumbmarkjs');
setOption('exclude', excludes);
const getFP = await getFingerprint();
fingerprint.value = getFP;
} catch (error) {
console.error('Error getting fingerprint:', error);
Expand Down
18 changes: 10 additions & 8 deletions frontend/components/advanced-tools/GlobalLatencyTest.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,8 @@
{{ result.country_name }}
</td>
<td v-for="stat in ['min', 'max', 'avg']" :key="stat"
:class="result.stats[stat] < 100 ? 'text-success' : ''">
{{ result.stats[stat].toFixed(1) }}
:class="result.stats[stat] < 100 ? 'text-success' : ''">
{{ result.stats[stat].toFixed(1) }}
</td>
<td>{{ result.stats.total }}</td>
<td>{{ Math.round(result.stats.loss) }}%</td>
Expand Down Expand Up @@ -90,8 +90,6 @@ import { ref, computed } from 'vue';
import { useMainStore } from '@/store';
import { useI18n } from 'vue-i18n';
import { trackEvent } from '@/utils/use-analytics';
import svgMap from 'svgmap';
import 'svgmap/dist/svgMap.min.css';
import getCountryName from '@/utils/country-name.js';
const { t } = useI18n();
Expand Down Expand Up @@ -214,7 +212,11 @@ const processpingResults = (data) => {
};
// 绘制地图
const drawMap = () => {
const drawMap = async () => {
// 动态导入 svgMap 和其样式
const svgMapModule = await import('svgmap');
await import('svgmap/dist/svgMap.min.css');
const mapData = {
data: {
avgPing: {
Expand Down Expand Up @@ -264,8 +266,8 @@ const drawMap = () => {
};
});
// 创建 svgMap 实例
new svgMap({
// 使用动态导入的 svgMap
new svgMapModule.default({
targetElementID: 'svgMap',
data: mapData,
colorMax: '#083923',
Expand All @@ -278,7 +280,7 @@ const drawMap = () => {
}
// 清除地图数据
const cleanMap = () => {
const cleanMap = () => {
document.getElementById('svgMap').innerHTML = '';
};
Expand Down
188 changes: 105 additions & 83 deletions frontend/utils/use-speedtest-charts.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,79 @@
import { ref, reactive } from 'vue';

// 将 Chart.js 相关的配置抽离出来
const getChartConfig = (t) => ({
download: {
type: 'line',
options: (gradient) => ({
data: {
labels: [],
datasets: [{
label: t('speedtest.Download'),
data: [],
borderColor: '#0dcaf0',
backgroundColor: gradient,
fill: true,
tension: 0.3
}]
}
})
},
upload: {
type: 'line',
options: (gradient) => ({
data: {
labels: [],
datasets: [{
label: t('speedtest.Upload'),
data: [],
borderColor: '#20c997',
backgroundColor: gradient,
fill: true,
tension: 0.3
}]
}
})
},
latency: {
type: 'scatter',
options: {
data: {
labels: [],
datasets: [{
label: t('speedtest.Latency'),
data: [],
backgroundColor: 'rgba(255, 193, 7, 0.8)',
borderColor: '#ffc107',
borderWidth: 1,
pointRadius: 3,
pointHoverRadius: 3,
showLine: false,
pointStyle: 'circle'
}]
}
}
},
jitter: {
type: 'scatter',
options: {
data: {
labels: [],
datasets: [{
label: t('speedtest.Jitter'),
data: [],
backgroundColor: 'rgba(214, 51, 132, 0.8)',
borderColor: '#d63384',
borderWidth: 1,
pointRadius: 3,
pointHoverRadius: 3,
showLine: false,
pointStyle: 'circle'
}]
}
}
}
});

export default function useSpeedTestCharts(t) {
// 图表引用
const downloadChart = ref(null);
Expand Down Expand Up @@ -41,13 +115,6 @@ export default function useSpeedTestCharts(t) {
}
});

// 动态导入 Chart.js
const loadChart = async () => {
const { Chart, registerables } = await import('chart.js/auto');
Chart.register(...registerables);
return Chart;
};

// 图表通用配置
const getLineChartOptions = (yAxisLabel) => ({
responsive: true,
Expand Down Expand Up @@ -92,100 +159,55 @@ export default function useSpeedTestCharts(t) {
}
});

// 初始化图表
// 修改 initCharts 方法
const initCharts = async () => {
const Chart = await loadChart();
// 动态导入 Chart.js
const { Chart, registerables } = await import('chart.js/auto');
Chart.register(...registerables);

// 下载速度图表
const config = getChartConfig(t);

// 初始化每个图表
if (downloadChart.value) {
const downloadCtx = downloadChart.value.getContext('2d');
const downloadGradient = downloadCtx.createLinearGradient(0, 0, 0, 200);
downloadGradient.addColorStop(0, 'rgba(32, 201, 151, 0.6)');
downloadGradient.addColorStop(1, 'rgba(32, 201, 151, 0)');

charts.download = new Chart(downloadCtx, {
type: 'line',
data: {
labels: [],
datasets: [{
label: t('speedtest.Download'),
data: [],
borderColor: '#20c997',
backgroundColor: downloadGradient,
fill: true,
tension: 0.3
}]
},
const ctx = downloadChart.value.getContext('2d');
const gradient = ctx.createLinearGradient(0, 0, 0, 200);
gradient.addColorStop(0, 'rgba(13, 202, 240, 0.6)');
gradient.addColorStop(1, 'rgba(13, 202, 240, 0)');

charts.download = new Chart(ctx, {
type: config.download.type,
...config.download.options(gradient),
options: getLineChartOptions(t('speedtest.Download') + ' (Mb/s)')
});
}

// 上传速度图表
if (uploadChart.value) {
const uploadCtx = uploadChart.value.getContext('2d');
const uploadGradient = uploadCtx.createLinearGradient(0, 0, 0, 200);
uploadGradient.addColorStop(0, 'rgba(13, 202, 240, 0.6)');
uploadGradient.addColorStop(1, 'rgba(13, 202, 240, 0)');

charts.upload = new Chart(uploadCtx, {
type: 'line',
data: {
labels: [],
datasets: [{
label: t('speedtest.Upload'),
data: [],
borderColor: '#0dcaf0',
backgroundColor: uploadGradient,
fill: true,
tension: 0.3
}]
},
const ctx = uploadChart.value.getContext('2d');
const gradient = ctx.createLinearGradient(0, 0, 0, 200);
gradient.addColorStop(0, 'rgba(32, 201, 151, 0.6)');
gradient.addColorStop(1, 'rgba(32, 201, 151, 0)');

charts.upload = new Chart(ctx, {
type: config.upload.type,
...config.upload.options(gradient),
options: getLineChartOptions(t('speedtest.Upload') + ' (Mb/s)')
});
}

// 延迟图表
if (latencyChart.value) {
const latencyCtx = latencyChart.value.getContext('2d');
charts.latency = new Chart(latencyCtx, {
type: 'scatter',
data: {
labels: [],
datasets: [{
label: t('speedtest.Latency'),
data: [],
backgroundColor: 'rgba(255, 193, 7, 0.8)',
borderColor: '#ffc107',
borderWidth: 1,
pointRadius: 3,
pointHoverRadius: 3,
showLine: false,
pointStyle: 'circle'
}]
},
const ctx = latencyChart.value.getContext('2d');
charts.latency = new Chart(ctx, {
type: config.latency.type,
...config.latency.options,
options: getLineChartOptions(t('speedtest.Latency') + ' (ms)')
});
}

// 抖动图表
if (jitterChart.value) {
const jitterCtx = jitterChart.value.getContext('2d');
charts.jitter = new Chart(jitterCtx, {
type: 'scatter',
data: {
labels: [],
datasets: [{
label: t('speedtest.Jitter'),
data: [],
backgroundColor: 'rgba(214, 51, 132, 0.8)',
borderColor: '#d63384',
borderWidth: 1,
pointRadius: 3,
pointHoverRadius: 3,
showLine: false,
pointStyle: 'circle'
}]
},
const ctx = jitterChart.value.getContext('2d');
charts.jitter = new Chart(ctx, {
type: config.jitter.type,
...config.jitter.options,
options: getLineChartOptions(t('speedtest.Jitter') + ' (ms)')
});
}
Expand Down
8 changes: 4 additions & 4 deletions vite.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,10 +116,10 @@ export default defineConfig({
build: {
rollupOptions: {
output: {
manualChunks(id) {
if (id.includes('node_modules')) {
return 'vendor';
}
manualChunks: {
'vendor': ['vue', 'vue-router', 'vue-i18n'],
'chart': ['chart.js/auto'],
'speedtest': ['@cloudflare/speedtest']
},
assetFileNames: (assetInfo) => {
if (assetInfo.fileName && (assetInfo.fileName.endsWith('.woff') || assetInfo.fileName.endsWith('.woff2'))) {
Expand Down

0 comments on commit 89c9577

Please sign in to comment.