Skip to content

Commit

Permalink
[5_34] 移动端适配和代码优化
Browse files Browse the repository at this point in the history
  • Loading branch information
@da-liii
Yuki authored and da-liii committed Dec 23, 2024
1 parent aed91b6 commit 3b4420d
Show file tree
Hide file tree
Showing 12 changed files with 262 additions and 741 deletions.
64 changes: 50 additions & 14 deletions ...mponents/ButtonZh/DownloadButtonMacOS.vue → ...components/Button/DownloadButtonMacOS.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,46 +2,60 @@
<div>
<button :class="$style.button" @click="showModal = true" @mouseover="hover = true" @mouseleave="hover = false">
<div v-if="hover" :class="$style.hoverContent">
<img src="/images/download_lightblue.png" alt="download" :class="$style.icon">
<p>点击下载</p>
<img src="/images/download_lightblue.png" :alt="hoverAltText" :class="$style.icon">
<p>{{ hoverText }}</p>
</div>

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

<div v-if="showModal" :class="$style.modalBackdrop" @click.self="showModal = false">
<div :class="$style.modalContent">
<h3>选择下载版本</h3>
<button :class="$style.smallButton" @click="downloadFileX64">下载 macOS (x64)</button>
<button :class="$style.smallButton" @click="downloadFileArm">下载 macOS (Arm64)</button>
<button :class="$style.closeButton" @click="showModal = false">关闭</button>
<h3>{{ modalTitle }}</h3>
<button :class="$style.smallButton" @click="downloadFileX64">{{ buttonTextX64 }}</button>
<button :class="$style.smallButton" @click="downloadFileArm">{{ buttonTextArm }}</button>
<button :class="$style.closeButton" @click="showModal = false">{{ closeButtonText }}</button>
</div>
</div>
</div>
</template>

<script setup>
import { ref } from 'vue';
import { ref, computed } from 'vue';
import { useRoute } from 'vitepress';
const showModal = ref(false);
const hover = ref(false);
const route = useRoute();
const language = computed(() => route.path.startsWith('/zh/') ? 'zh' : 'en');
const hoverText = computed(() => language.value === 'zh' ? '点击下载' : 'Click to Download');
const defaultText = computed(() => language.value === 'zh' ? 'macOS' : 'macOS');
const hoverAltText = computed(() => language.value === 'zh' ? '下载' : 'Download');
const defaultAltText = computed(() => language.value === 'zh' ? 'macOS' : 'macOS');
const modalTitle = computed(() => language.value === 'zh' ? '选择下载版本' : 'Select Download Version');
const buttonTextX64 = computed(() => language.value === 'zh' ? '下载 macOS (x64)' : 'Download macOS (x64)');
const buttonTextArm = computed(() => language.value === 'zh' ? '下载 macOS (Arm64)' : 'Download macOS (Arm64)');
const closeButtonText = computed(() => language.value === 'zh' ? '关闭' : 'Close');
const version = 'v1.2.9.7';
function downloadFileX64() {
const link = document.createElement('a');
link.href = 'https://mirrors.ustc.edu.cn/github-release/XmacsLabs/mogan/v1.2.9.7/MoganResearch-v1.2.9.7.dmg';
link.download = '墨干v1.2.9.7';
link.href = `https://mirrors.ustc.edu.cn/github-release/XmacsLabs/mogan/${version}/MoganResearch-${version}.dmg`;
link.download = language.value === 'zh' ? `墨干${version}` : `Mogan ${version}`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
function downloadFileArm() {
const link = document.createElement('a');
link.href = 'https://mirrors.ustc.edu.cn/github-release/XmacsLabs/mogan/v1.2.9.7/MoganResearch-v1.2.9.7-arm.dmg';
link.download = '墨干v1.2.9.7-arm';
link.href = `https://mirrors.ustc.edu.cn/github-release/XmacsLabs/mogan/${version}/MoganResearch-${version}-arm.dmg`;
link.download = language.value === 'zh' ? `墨干${version}-arm` : `Mogan ${version}-arm`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
Expand Down Expand Up @@ -163,4 +177,26 @@ function downloadFileArm() {
.closeButton:active {
background-color: #003f7f;
}
</style>
@media (max-width: 600px) {
.button {
width: 100px;
height: 100px;
padding: 8px;
}
.icon {
width: 40px;
height: 40px;
}
.button p {
font-size: 14px;
margin-top: 5px;
}
.hoverContent {
font-size: 16px;
}
}
</style>
66 changes: 52 additions & 14 deletions ...ponents/ButtonZh/DownloadButtonUbuntu.vue → ...omponents/Button/DownloadButtonUbuntu.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,46 +2,62 @@
<div>
<button :class="$style.button" @click="showModal = true" @mouseover="hover = true" @mouseleave="hover = false">
<div v-if="hover" :class="$style.hoverContent">
<img src="/images/download_orange.png" alt="download" :class="$style.icon">
<p>点击下载</p>
<img src="/images/download_orange.png" :alt="hoverAltText" :class="$style.icon">
<p>{{ hoverText }}</p>
</div>

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

<div v-if="showModal" :class="$style.modalBackdrop" @click.self="showModal = false">
<div :class="$style.modalContent">
<h3>选择下载版本</h3>
<button :class="$style.smallButton" @click="downloadFile2204">下载 Ubuntu 22.04</button>
<button :class="$style.smallButton" @click="downloadFile2404">下载 Ubuntu 24.04</button>
<button :class="$style.closeButton" @click="showModal = false">关闭</button>
<h3>{{ modalTitle }}</h3>
<button :class="$style.smallButton" @click="downloadFile2204">{{ buttonText2204 }}</button>
<button :class="$style.smallButton" @click="downloadFile2404">{{ buttonText2404 }}</button>
<button :class="$style.closeButton" @click="showModal = false">{{ closeButtonText }}</button>
</div>
</div>
</div>
</template>

<script setup>
import { ref } from 'vue';
import { ref, computed } from 'vue';
import { useRoute } from 'vitepress';
// 获取当前语言
const route = useRoute();
const language = computed(() => route.path.startsWith('/zh/') ? 'zh' : 'en');
const showModal = ref(false);
const hover = ref(false);
const hoverText = computed(() => language.value === 'zh' ? '点击下载' : 'Click to Download');
const defaultText = computed(() => language.value === 'zh' ? 'Ubuntu' : 'Ubuntu');
const hoverAltText = computed(() => language.value === 'zh' ? '下载' : 'Download');
const defaultAltText = computed(() => language.value === 'zh' ? 'Ubuntu' : 'Ubuntu');
const modalTitle = computed(() => language.value === 'zh' ? '选择下载版本' : 'Select Download Version');
const buttonText2204 = computed(() => language.value === 'zh' ? '下载 Ubuntu 22.04' : 'Download Ubuntu 22.04');
const buttonText2404 = computed(() => language.value === 'zh' ? '下载 Ubuntu 24.04' : 'Download Ubuntu 24.04');
const closeButtonText = computed(() => language.value === 'zh' ? '关闭' : 'Close');
const version = 'v1.2.9.7';
function downloadFile2204() {
const link = document.createElement('a');
link.href = 'https://mirrors.ustc.edu.cn/github-release/XmacsLabs/mogan/v1.2.9.7/mogan-research-v1.2.9.7-ubuntu22.04.deb';
link.download = '墨干v1.2.9.7';
link.href = `https://mirrors.ustc.edu.cn/github-release/XmacsLabs/mogan/${version}/mogan-research-${version}-ubuntu22.04.deb`;
link.download = language.value === 'zh' ? `墨干${version}` : `Mogan ${version}`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
function downloadFile2404() {
const link = document.createElement('a');
link.href = 'https://mirrors.ustc.edu.cn/github-release/XmacsLabs/mogan/v1.2.9.7/mogan-research-v1.2.9.7-ubuntu24.04.deb';
link.download = '墨干v1.2.9.7';
link.href = `https://mirrors.ustc.edu.cn/github-release/XmacsLabs/mogan/${version}/mogan-research-${version}-ubuntu24.04.deb`;
link.download = language.value === 'zh' ? `墨干${version}` : `Mogan ${version}`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
Expand Down Expand Up @@ -163,4 +179,26 @@ function downloadFile2404() {
.closeButton:active {
background-color: #990000;
}
</style>
@media (max-width: 600px) {
.button {
width: 100px;
height: 100px;
padding: 8px;
}
.icon {
width: 40px;
height: 40px;
}
.button p {
font-size: 14px;
margin-top: 5px;
}
.hoverContent {
font-size: 16px;
}
}
</style>
63 changes: 50 additions & 13 deletions ...onents/ButtonZh/DownloadButtonWindows.vue → ...mponents/Button/DownloadButtonWindows.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,50 +2,65 @@
<div>
<button :class="$style.button" @click="showModal = true" @mouseover="hover = true" @mouseleave="hover = false">
<div v-if="hover" :class="$style.hoverContent">
<img src="/images/download_blue.png" alt="download" :class="$style.icon">
<p>点击下载</p>
<img src="/images/download_blue.png" :alt="hoverAltText" :class="$style.icon">
<p>{{ hoverText }}</p>
</div>

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

<div v-if="showModal" :class="$style.modalBackdrop" @click.self="showModal = false">
<div :class="$style.modalContent">
<h3>选择下载版本</h3>
<button :class="$style.smallButton" @click="downloadFile">下载 Windows</button>
<button :class="$style.smallButton" @click="downloadFileGreen">下载 Windows(绿色版)</button>
<button :class="$style.closeButton" @click="showModal = false">关闭</button>
<h3>{{ modalTitle }}</h3>
<button :class="$style.smallButton" @click="downloadFile">{{ buttonText }}</button>
<button :class="$style.smallButton" @click="downloadFileGreen">{{ buttonGreenText }}</button>
<button :class="$style.closeButton" @click="showModal = false">{{ closeButtonText }}</button>
</div>
</div>
</div>
</template>

<script setup>
import { ref } from 'vue';
import { ref, computed } from 'vue';
import { useRoute } from 'vitepress';
const showModal = ref(false);
const hover = ref(false);
const route = useRoute();
const language = computed(() => route.path.startsWith('/zh/') ? 'zh' : 'en');
const hoverText = computed(() => language.value === 'zh' ? '点击下载' : 'Click to Download');
const defaultText = computed(() => language.value === 'zh' ? 'Windows' : 'Windows');
const hoverAltText = computed(() => language.value === 'zh' ? '下载' : 'Download');
const defaultAltText = computed(() => language.value === 'zh' ? 'Windows' : 'Windows');
const modalTitle = computed(() => language.value === 'zh' ? '选择下载版本' : 'Select Download Version');
const buttonText = computed(() => language.value === 'zh' ? '下载 Windows' : 'Download Windows');
const buttonGreenText = computed(() => language.value === 'zh' ? '下载 Windows(绿色版)' : 'Download Windows (Portable)');
const closeButtonText = computed(() => language.value === 'zh' ? '关闭' : 'Close');
const version = 'v1.2.9.7';
function downloadFile() {
const link = document.createElement('a');
link.href = 'https://mirrors.ustc.edu.cn/github-release/XmacsLabs/mogan/v1.2.9.7/MoganResearch-v1.2.9.7-64bit-installer.exe';
link.download = '墨干v1.2.9.7';
link.href = `https://mirrors.ustc.edu.cn/github-release/XmacsLabs/mogan/${version}/MoganResearch-${version}-64bit-installer.exe`;
link.download = language.value === 'zh' ? `墨干${version}` : `Mogan ${version}`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
function downloadFileGreen() {
const link = document.createElement('a');
link.href = 'https://mirrors.ustc.edu.cn/github-release/XmacsLabs/mogan/v1.2.9.7/MoganResearch-v1.2.9.7-64bit-portable.zip';
link.download = '墨干v1.2.9.7';
link.href = `https://mirrors.ustc.edu.cn/github-release/XmacsLabs/mogan/${version}/MoganResearch-${version}-64bit-portable.zip`;
link.download = language.value === 'zh' ? `墨干${version}` : `Mogan ${version}`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
</script>

<style module>
Expand Down Expand Up @@ -163,4 +178,26 @@ function downloadFileGreen() {
.closeButton:active {
background-color: #003f7f;
}
@media (max-width: 600px) {
.button {
width: 100px;
height: 100px;
padding: 8px;
}
.icon {
width: 40px;
height: 40px;
}
.button p {
font-size: 14px;
margin-top: 5px;
}
.hoverContent {
font-size: 16px;
}
}
</style>
Loading

0 comments on commit 3b4420d

Please sign in to comment.