Skip to content

Commit 3b4420d

Browse files
Yukida-liii
Yuki
authored and
da-liii
committed
[5_34] 移动端适配和代码优化
1 parent aed91b6 commit 3b4420d

File tree

12 files changed

+262
-741
lines changed

12 files changed

+262
-741
lines changed

docs/.vitepress/components/ButtonZh/DownloadButtonMacOS.vue renamed to docs/.vitepress/components/Button/DownloadButtonMacOS.vue

Lines changed: 50 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,46 +2,60 @@
22
<div>
33
<button :class="$style.button" @click="showModal = true" @mouseover="hover = true" @mouseleave="hover = false">
44
<div v-if="hover" :class="$style.hoverContent">
5-
<img src="/images/download_lightblue.png" alt="download" :class="$style.icon">
6-
<p>点击下载</p>
5+
<img src="/images/download_lightblue.png" :alt="hoverAltText" :class="$style.icon">
6+
<p>{{ hoverText }}</p>
77
</div>
88

99
<div v-else :class="$style.defaultContent">
10-
<img src="/images/macOS_icon.png" alt="macOS" :class="$style.icon">
11-
<p>macOS</p>
10+
<img src="/images/macOS_icon.png" :alt="defaultAltText" :class="$style.icon">
11+
<p>{{ defaultText }}</p>
1212
</div>
1313
</button>
1414

1515
<div v-if="showModal" :class="$style.modalBackdrop" @click.self="showModal = false">
1616
<div :class="$style.modalContent">
17-
<h3>选择下载版本</h3>
18-
<button :class="$style.smallButton" @click="downloadFileX64">下载 macOS (x64)</button>
19-
<button :class="$style.smallButton" @click="downloadFileArm">下载 macOS (Arm64)</button>
20-
<button :class="$style.closeButton" @click="showModal = false">关闭</button>
17+
<h3>{{ modalTitle }}</h3>
18+
<button :class="$style.smallButton" @click="downloadFileX64">{{ buttonTextX64 }}</button>
19+
<button :class="$style.smallButton" @click="downloadFileArm">{{ buttonTextArm }}</button>
20+
<button :class="$style.closeButton" @click="showModal = false">{{ closeButtonText }}</button>
2121
</div>
2222
</div>
2323
</div>
2424
</template>
2525

2626
<script setup>
27-
import { ref } from 'vue';
27+
import { ref, computed } from 'vue';
28+
import { useRoute } from 'vitepress';
2829
2930
const showModal = ref(false);
3031
const hover = ref(false);
32+
const route = useRoute();
33+
const language = computed(() => route.path.startsWith('/zh/') ? 'zh' : 'en');
34+
35+
const hoverText = computed(() => language.value === 'zh' ? '点击下载' : 'Click to Download');
36+
const defaultText = computed(() => language.value === 'zh' ? 'macOS' : 'macOS');
37+
const hoverAltText = computed(() => language.value === 'zh' ? '下载' : 'Download');
38+
const defaultAltText = computed(() => language.value === 'zh' ? 'macOS' : 'macOS');
39+
const modalTitle = computed(() => language.value === 'zh' ? '选择下载版本' : 'Select Download Version');
40+
const buttonTextX64 = computed(() => language.value === 'zh' ? '下载 macOS (x64)' : 'Download macOS (x64)');
41+
const buttonTextArm = computed(() => language.value === 'zh' ? '下载 macOS (Arm64)' : 'Download macOS (Arm64)');
42+
const closeButtonText = computed(() => language.value === 'zh' ? '关闭' : 'Close');
43+
44+
const version = 'v1.2.9.7';
3145
3246
function downloadFileX64() {
3347
const link = document.createElement('a');
34-
link.href = 'https://mirrors.ustc.edu.cn/github-release/XmacsLabs/mogan/v1.2.9.7/MoganResearch-v1.2.9.7.dmg';
35-
link.download = '墨干v1.2.9.7';
48+
link.href = `https://mirrors.ustc.edu.cn/github-release/XmacsLabs/mogan/${version}/MoganResearch-${version}.dmg`;
49+
link.download = language.value === 'zh' ? `墨干${version}` : `Mogan ${version}`;
3650
document.body.appendChild(link);
3751
link.click();
3852
document.body.removeChild(link);
3953
}
4054
4155
function downloadFileArm() {
4256
const link = document.createElement('a');
43-
link.href = 'https://mirrors.ustc.edu.cn/github-release/XmacsLabs/mogan/v1.2.9.7/MoganResearch-v1.2.9.7-arm.dmg';
44-
link.download = '墨干v1.2.9.7-arm';
57+
link.href = `https://mirrors.ustc.edu.cn/github-release/XmacsLabs/mogan/${version}/MoganResearch-${version}-arm.dmg`;
58+
link.download = language.value === 'zh' ? `墨干${version}-arm` : `Mogan ${version}-arm`;
4559
document.body.appendChild(link);
4660
link.click();
4761
document.body.removeChild(link);
@@ -163,4 +177,26 @@ function downloadFileArm() {
163177
.closeButton:active {
164178
background-color: #003f7f;
165179
}
166-
</style>
180+
181+
@media (max-width: 600px) {
182+
.button {
183+
width: 100px;
184+
height: 100px;
185+
padding: 8px;
186+
}
187+
188+
.icon {
189+
width: 40px;
190+
height: 40px;
191+
}
192+
193+
.button p {
194+
font-size: 14px;
195+
margin-top: 5px;
196+
}
197+
198+
.hoverContent {
199+
font-size: 16px;
200+
}
201+
}
202+
</style>

docs/.vitepress/components/ButtonZh/DownloadButtonUbuntu.vue renamed to docs/.vitepress/components/Button/DownloadButtonUbuntu.vue

Lines changed: 52 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,46 +2,62 @@
22
<div>
33
<button :class="$style.button" @click="showModal = true" @mouseover="hover = true" @mouseleave="hover = false">
44
<div v-if="hover" :class="$style.hoverContent">
5-
<img src="/images/download_orange.png" alt="download" :class="$style.icon">
6-
<p>点击下载</p>
5+
<img src="/images/download_orange.png" :alt="hoverAltText" :class="$style.icon">
6+
<p>{{ hoverText }}</p>
77
</div>
88

99
<div v-else :class="$style.defaultContent">
10-
<img src="/images/Ubuntu_icon.png" alt="ubuntu" :class="$style.icon">
11-
<p>Ubuntu</p>
10+
<img src="/images/Ubuntu_icon.png" :alt="defaultAltText" :class="$style.icon">
11+
<p>{{ defaultText }}</p>
1212
</div>
1313
</button>
1414

1515
<div v-if="showModal" :class="$style.modalBackdrop" @click.self="showModal = false">
1616
<div :class="$style.modalContent">
17-
<h3>选择下载版本</h3>
18-
<button :class="$style.smallButton" @click="downloadFile2204">下载 Ubuntu 22.04</button>
19-
<button :class="$style.smallButton" @click="downloadFile2404">下载 Ubuntu 24.04</button>
20-
<button :class="$style.closeButton" @click="showModal = false">关闭</button>
17+
<h3>{{ modalTitle }}</h3>
18+
<button :class="$style.smallButton" @click="downloadFile2204">{{ buttonText2204 }}</button>
19+
<button :class="$style.smallButton" @click="downloadFile2404">{{ buttonText2404 }}</button>
20+
<button :class="$style.closeButton" @click="showModal = false">{{ closeButtonText }}</button>
2121
</div>
2222
</div>
2323
</div>
2424
</template>
2525

2626
<script setup>
27-
import { ref } from 'vue';
27+
import { ref, computed } from 'vue';
28+
import { useRoute } from 'vitepress';
29+
30+
// 获取当前语言
31+
const route = useRoute();
32+
const language = computed(() => route.path.startsWith('/zh/') ? 'zh' : 'en');
2833
2934
const showModal = ref(false);
3035
const hover = ref(false);
3136
37+
const hoverText = computed(() => language.value === 'zh' ? '点击下载' : 'Click to Download');
38+
const defaultText = computed(() => language.value === 'zh' ? 'Ubuntu' : 'Ubuntu');
39+
const hoverAltText = computed(() => language.value === 'zh' ? '下载' : 'Download');
40+
const defaultAltText = computed(() => language.value === 'zh' ? 'Ubuntu' : 'Ubuntu');
41+
const modalTitle = computed(() => language.value === 'zh' ? '选择下载版本' : 'Select Download Version');
42+
const buttonText2204 = computed(() => language.value === 'zh' ? '下载 Ubuntu 22.04' : 'Download Ubuntu 22.04');
43+
const buttonText2404 = computed(() => language.value === 'zh' ? '下载 Ubuntu 24.04' : 'Download Ubuntu 24.04');
44+
const closeButtonText = computed(() => language.value === 'zh' ? '关闭' : 'Close');
45+
46+
const version = 'v1.2.9.7';
47+
3248
function downloadFile2204() {
3349
const link = document.createElement('a');
34-
link.href = 'https://mirrors.ustc.edu.cn/github-release/XmacsLabs/mogan/v1.2.9.7/mogan-research-v1.2.9.7-ubuntu22.04.deb';
35-
link.download = '墨干v1.2.9.7';
50+
link.href = `https://mirrors.ustc.edu.cn/github-release/XmacsLabs/mogan/${version}/mogan-research-${version}-ubuntu22.04.deb`;
51+
link.download = language.value === 'zh' ? `墨干${version}` : `Mogan ${version}`;
3652
document.body.appendChild(link);
3753
link.click();
3854
document.body.removeChild(link);
3955
}
4056
4157
function downloadFile2404() {
4258
const link = document.createElement('a');
43-
link.href = 'https://mirrors.ustc.edu.cn/github-release/XmacsLabs/mogan/v1.2.9.7/mogan-research-v1.2.9.7-ubuntu24.04.deb';
44-
link.download = '墨干v1.2.9.7';
59+
link.href = `https://mirrors.ustc.edu.cn/github-release/XmacsLabs/mogan/${version}/mogan-research-${version}-ubuntu24.04.deb`;
60+
link.download = language.value === 'zh' ? `墨干${version}` : `Mogan ${version}`;
4561
document.body.appendChild(link);
4662
link.click();
4763
document.body.removeChild(link);
@@ -163,4 +179,26 @@ function downloadFile2404() {
163179
.closeButton:active {
164180
background-color: #990000;
165181
}
166-
</style>
182+
183+
@media (max-width: 600px) {
184+
.button {
185+
width: 100px;
186+
height: 100px;
187+
padding: 8px;
188+
}
189+
190+
.icon {
191+
width: 40px;
192+
height: 40px;
193+
}
194+
195+
.button p {
196+
font-size: 14px;
197+
margin-top: 5px;
198+
}
199+
200+
.hoverContent {
201+
font-size: 16px;
202+
}
203+
}
204+
</style>

docs/.vitepress/components/ButtonZh/DownloadButtonWindows.vue renamed to docs/.vitepress/components/Button/DownloadButtonWindows.vue

Lines changed: 50 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,50 +2,65 @@
22
<div>
33
<button :class="$style.button" @click="showModal = true" @mouseover="hover = true" @mouseleave="hover = false">
44
<div v-if="hover" :class="$style.hoverContent">
5-
<img src="/images/download_blue.png" alt="download" :class="$style.icon">
6-
<p>点击下载</p>
5+
<img src="/images/download_blue.png" :alt="hoverAltText" :class="$style.icon">
6+
<p>{{ hoverText }}</p>
77
</div>
88

99
<div v-else :class="$style.defaultContent">
10-
<img src="/images/windows_icon.png" alt="Windows" :class="$style.icon">
11-
<p>Windows</p>
10+
<img src="/images/windows_icon.png" :alt="defaultAltText" :class="$style.icon">
11+
<p>{{ defaultText }}</p>
1212
</div>
1313
</button>
1414

1515
<div v-if="showModal" :class="$style.modalBackdrop" @click.self="showModal = false">
1616
<div :class="$style.modalContent">
17-
<h3>选择下载版本</h3>
18-
<button :class="$style.smallButton" @click="downloadFile">下载 Windows</button>
19-
<button :class="$style.smallButton" @click="downloadFileGreen">下载 Windows(绿色版)</button>
20-
<button :class="$style.closeButton" @click="showModal = false">关闭</button>
17+
<h3>{{ modalTitle }}</h3>
18+
<button :class="$style.smallButton" @click="downloadFile">{{ buttonText }}</button>
19+
<button :class="$style.smallButton" @click="downloadFileGreen">{{ buttonGreenText }}</button>
20+
<button :class="$style.closeButton" @click="showModal = false">{{ closeButtonText }}</button>
2121
</div>
2222
</div>
2323
</div>
2424
</template>
2525

2626
<script setup>
27-
import { ref } from 'vue';
27+
import { ref, computed } from 'vue';
28+
import { useRoute } from 'vitepress';
2829
2930
const showModal = ref(false);
3031
const hover = ref(false);
32+
const route = useRoute();
33+
const language = computed(() => route.path.startsWith('/zh/') ? 'zh' : 'en');
34+
35+
const hoverText = computed(() => language.value === 'zh' ? '点击下载' : 'Click to Download');
36+
const defaultText = computed(() => language.value === 'zh' ? 'Windows' : 'Windows');
37+
const hoverAltText = computed(() => language.value === 'zh' ? '下载' : 'Download');
38+
const defaultAltText = computed(() => language.value === 'zh' ? 'Windows' : 'Windows');
39+
const modalTitle = computed(() => language.value === 'zh' ? '选择下载版本' : 'Select Download Version');
40+
const buttonText = computed(() => language.value === 'zh' ? '下载 Windows' : 'Download Windows');
41+
const buttonGreenText = computed(() => language.value === 'zh' ? '下载 Windows(绿色版)' : 'Download Windows (Portable)');
42+
const closeButtonText = computed(() => language.value === 'zh' ? '关闭' : 'Close');
43+
44+
const version = 'v1.2.9.7';
3145
3246
function downloadFile() {
3347
const link = document.createElement('a');
34-
link.href = 'https://mirrors.ustc.edu.cn/github-release/XmacsLabs/mogan/v1.2.9.7/MoganResearch-v1.2.9.7-64bit-installer.exe';
35-
link.download = '墨干v1.2.9.7';
48+
link.href = `https://mirrors.ustc.edu.cn/github-release/XmacsLabs/mogan/${version}/MoganResearch-${version}-64bit-installer.exe`;
49+
link.download = language.value === 'zh' ? `墨干${version}` : `Mogan ${version}`;
3650
document.body.appendChild(link);
3751
link.click();
3852
document.body.removeChild(link);
3953
}
4054
4155
function downloadFileGreen() {
4256
const link = document.createElement('a');
43-
link.href = 'https://mirrors.ustc.edu.cn/github-release/XmacsLabs/mogan/v1.2.9.7/MoganResearch-v1.2.9.7-64bit-portable.zip';
44-
link.download = '墨干v1.2.9.7';
57+
link.href = `https://mirrors.ustc.edu.cn/github-release/XmacsLabs/mogan/${version}/MoganResearch-${version}-64bit-portable.zip`;
58+
link.download = language.value === 'zh' ? `墨干${version}` : `Mogan ${version}`;
4559
document.body.appendChild(link);
4660
link.click();
4761
document.body.removeChild(link);
4862
}
63+
4964
</script>
5065

5166
<style module>
@@ -163,4 +178,26 @@ function downloadFileGreen() {
163178
.closeButton:active {
164179
background-color: #003f7f;
165180
}
181+
182+
@media (max-width: 600px) {
183+
.button {
184+
width: 100px;
185+
height: 100px;
186+
padding: 8px;
187+
}
188+
189+
.icon {
190+
width: 40px;
191+
height: 40px;
192+
}
193+
194+
.button p {
195+
font-size: 14px;
196+
margin-top: 5px;
197+
}
198+
199+
.hoverContent {
200+
font-size: 16px;
201+
}
202+
}
166203
</style>

0 commit comments

Comments
 (0)