Skip to content

Commit 27d7dfc

Browse files
ATRIOR-LCLATRIOR-LCL
committed
feat: add intel mac undetected dialog
1 parent 618ab43 commit 27d7dfc

6 files changed

Lines changed: 276 additions & 23 deletions

File tree

‎src/client/assets/images/guide-about-1.png‎

53.6 KB
Loading

‎src/client/assets/images/guide-about-2.png‎

20.7 KB
Loading

‎src/client/components/download-button.vue‎

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,45 +5,46 @@ import macOS from '@client/assets/images/macos.png';
55
import windows from '@client/assets/images/windows.png';
66
import download from '@client/assets/images/download.png';
77
import { ReleasesConfig } from '@client/utils/data.config';
8-
import { ElMessage } from 'element-plus';
8+
import { ElMessage, ElDialog } from 'element-plus';
99
import { logEvent } from '@client/utils/ga';
10+
import { Inject } from 'vue-property-decorator';
1011
1112
@Options({
12-
components: {},
13+
components: {
14+
ElDialog,
15+
},
1316
})
1417
export default class DownloadButton extends Vue {
1518
@Prop({ type: String, required: true }) platform!: string;
1619
@Prop({ type: String, required: true }) arch!: string;
1720
@Prop({ type: Boolean, default: false }) isHome: Boolean;
1821
@Prop({ type: String, required: true }) version!: string;
22+
@Inject() isUnDetectedMac: boolean;
23+
@Inject() openMacPlatformSelectWindow: () => void;
1924
2025
get isMobileDevice(): boolean {
2126
return this.platform !== 'windows' && this.platform !== 'mac';
2227
}
2328
2429
get isSupportedPlatform(): boolean {
25-
// 只有在主页时才考虑移动设备检测
2630
if (this.isHome && this.isMobileDevice) {
2731
return false;
2832
}
2933
return this.platform === 'windows' || this.platform === 'mac';
3034
}
3135
3236
get isUnsupportedPlatform(): boolean {
33-
// 只有在主页时才考虑移动设备，releases页面按正常平台逻辑
3437
if (this.isHome && this.isMobileDevice) {
3538
return true;
3639
}
3740
return this.platform !== 'windows' && this.platform !== 'mac';
3841
}
3942
4043
get platformName(): string {
41-
// 只有在主页时才显示移动设备名称
4244
if (this.isHome && this.isMobileDevice) {
4345
return '移动设备';
4446
}
4547
46-
// 确保服务端和客户端返回一致的平台名称
4748
switch (this.platform) {
4849
case 'mac':
4950
return 'macOS';
@@ -55,7 +56,6 @@ export default class DownloadButton extends Vue {
5556
}
5657
5758
get platformImage(): string {
58-
// 只有在主页时，移动设备才显示通用下载图标
5959
if (this.isHome && this.isMobileDevice) {
6060
return download;
6161
}
@@ -75,11 +75,20 @@ export default class DownloadButton extends Vue {
7575
this.$router.push({ name: 'Releases' });
7676
return;
7777
}
78-
const releasesConfig = new ReleasesConfig(this.version);
79-
let downloadLink = releasesConfig.downloadSingleSystemLink(this.platform, this.arch);
80-
ElMessage('下载开始，请稍候...');
81-
window.open(downloadLink, '_parent');
82-
logEvent(`下载 ${this.platform} ${this.version}`, { category: 'engagement', label: `${this.platform}-${this.arch}` });
78+
console.log(`isUnDetectedMac: ${this.isUnDetectedMac}`);
79+
if (!this.isUnDetectedMac) {
80+
const releasesConfig = new ReleasesConfig(this.version);
81+
let downloadLink = releasesConfig.downloadSingleSystemLink(this.platform, this.arch);
82+
ElMessage('下载开始，请稍候...');
83+
window.open(downloadLink, '_parent');
84+
logEvent(`下载 ${this.platform} ${this.version}`, {
85+
category: 'engagement',
86+
label: `${this.platform}-${this.arch}`,
87+
});
88+
} else {
89+
this.openMacPlatformSelectWindow();
90+
}
91+
// this.openMacPlatformSelectWindow()
8392
}
8493
}
8594
</script>

‎src/client/components/mac-undetected-dialog.vue‎

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
<script lang="ts">
2+
import { Vue, Options } from 'vue-class-component';
3+
import { Inject } from 'vue-property-decorator';
4+
import { ElDialog, ElButton, ElMessage } from 'element-plus';
5+
import { ReleasesConfig } from '@client/utils/data.config';
6+
import { GetPlatformInfoDTO } from '@common/modules/platform/platform.dto';
7+
import { logEvent } from '@client/utils/ga';
8+
9+
@Options({
10+
components: {
11+
ElDialog,
12+
ElButton,
13+
},
14+
})
15+
export default class MacUndetectedDialog extends Vue {
16+
@Inject()
17+
isOpenMacPlatformSelectWindow: boolean;
18+
19+
@Inject()
20+
homeState: GetPlatformInfoDTO;
21+
22+
@Inject()
23+
closeMacPlatformSelectWindow: () => void;
24+
25+
handleClickToDownload(arch: string) {
26+
const releasesConfig = new ReleasesConfig(this.homeState.releases.version);
27+
const downloadLink = releasesConfig.downloadSingleSystemLink('mac', arch);
28+
this.closeMacPlatformSelectWindow();
29+
ElMessage('下载开始，请稍候...');
30+
window.open(downloadLink, '_parent');
31+
logEvent(`下载 mac ${this.homeState.releases.version}`, {
32+
category: 'engagement',
33+
label: `mac-${arch}`,
34+
});
35+
}
36+
}
37+
</script>
38+
39+
<template>
40+
<el-dialog
41+
:model-value="isOpenMacPlatformSelectWindow"
42+
@update:model-value="closeMacPlatformSelectWindow"
43+
class="dialog"
44+
title="Notice"
45+
width="800"
46+
center
47+
align-center
48+
>
49+
<template #header>
50+
<h1 class="title">选择适合你的 Algo Bootstrap 版本</h1>
51+
<div class="dialog-container">
52+
<ElButton @click="handleClickToDownload('x64')" class="my-el-button" type="info" round
53+
>下载 Intel 芯片版本</ElButton
54+
>
55+
<ElButton @click="handleClickToDownload('arm64')" class="my-el-button" type="info" round
56+
>下载 Apple 芯片版本</ElButton
57+
>
58+
</div>
59+
</template>
60+
<template #footer>
61+
<div class="dialog-footer">
62+
<p class="dialog-footer-header">如何确定芯片类型？</p>
63+
<div class="dialog-footer-guide">
64+
<div class="dialog-footer-section">
65+
<p>在左上角，打开 <span>Apple菜单</span><br />选择"<span>关于本机</span>"</p>
66+
<div class="image-container">
67+
<img src="../assets/images/guide-about-1.png" alt="" />
68+
</div>
69+
</div>
70+
<div class="dialog-footer-section">
71+
<p>
72+
在"<span>处理器</span>"或"<span>芯片</span>"中<br />查看是"<span>Intel</span>"还是"<span>Apple</span>"
73+
</p>
74+
<div class="image-container">
75+
<img src="../assets/images/guide-about-2.png" alt="" />
76+
</div>
77+
</div>
78+
</div>
79+
</div>
80+
</template>
81+
</el-dialog>
82+
</template>
83+
84+
<style lang="less" scoped>
85+
.my-el-button {
86+
padding: 20px;
87+
font-size: 18px;
88+
}
89+
.dialog {
90+
background-color: transparent !important;
91+
}
92+
93+
.title {
94+
font-size: 30px;
95+
font-weight: bold;
96+
color: #000;
97+
margin-top: 100px;
98+
margin-bottom: 40px;
99+
text-align: center;
100+
}
101+
102+
.dialog-container {
103+
width: 100%;
104+
display: flex;
105+
justify-content: center;
106+
gap: 16px;
107+
}
108+
109+
.dialog-footer {
110+
width: 100%;
111+
padding: 20px;
112+
background-color: #f5f5f5;
113+
border-radius: 5px;
114+
}
115+
116+
.dialog-footer-header {
117+
font-size: 16px;
118+
font-weight: bold;
119+
color: #333;
120+
margin-bottom: 16px;
121+
text-align: center;
122+
}
123+
124+
.dialog-footer-guide {
125+
display: flex;
126+
gap: 20px;
127+
justify-content: space-between;
128+
}
129+
130+
.dialog-footer-section {
131+
flex: 1;
132+
display: flex;
133+
flex-direction: column;
134+
align-items: center;
135+
text-align: center;
136+
padding: 16px;
137+
border-radius: 8px;
138+
139+
p {
140+
position: relative;
141+
font-size: 14px;
142+
line-height: 1.4;
143+
color: #2d2d2d;
144+
margin: 0 0 12px 0;
145+
padding-left: 30px;
146+
text-align: left;
147+
148+
& span {
149+
font-weight: bold;
150+
color: #131313;
151+
}
152+
153+
&::before {
154+
content: '';
155+
position: absolute;
156+
left: 0;
157+
top: 0;
158+
width: 20px;
159+
height: 20px;
160+
background-color: #666;
161+
border-radius: 50%;
162+
display: flex;
163+
align-items: center;
164+
justify-content: center;
165+
font-size: 12px;
166+
font-weight: bold;
167+
color: white;
168+
}
169+
}
170+
171+
&:first-child p::before {
172+
content: '1';
173+
}
174+
175+
&:nth-child(2) p::before {
176+
content: '2';
177+
}
178+
179+
.image-container {
180+
width: 240px;
181+
height: 135px;
182+
overflow: hidden;
183+
border-radius: 8px;
184+
border: 1px solid #ddd;
185+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
186+
187+
img {
188+
width: 100%;
189+
height: 100%;
190+
object-fit: cover;
191+
display: block;
192+
}
193+
}
194+
}
195+
196+
@media screen and (max-width: 600px) {
197+
.dialog-footer-guide {
198+
flex-direction: column;
199+
gap: 16px;
200+
}
201+
202+
.dialog-footer-section {
203+
.image-container {
204+
width: 140px;
205+
height: 105px;
206+
}
207+
}
208+
}
209+
</style>

‎src/client/modules/home/home.view.vue‎

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@ import Download from '@client/components/svgs/download.vue';
1313
import { AsyncDataOptions } from '@client/typings';
1414
import beams from '@client/components/beams.vue';
1515
import { Prop, Inject } from 'vue-property-decorator';
16+
import { Provide } from 'vue-property-decorator';
17+
import { ElDialog, ElButton } from 'element-plus';
18+
import MacUndetectedDialog from '@client/components/mac-undetected-dialog.vue';
1619
1720
@View('/')
1821
@Options({
@@ -25,24 +28,51 @@ import { Prop, Inject } from 'vue-property-decorator';
2528
HomeFooter,
2629
Download,
2730
beams,
31+
ElDialog,
32+
ElButton,
33+
MacUndetectedDialog
2834
},
2935
})
3036
@RenderMethod(RenderMethodKind.SSR)
3137
export default class Home extends Vue {
3238
@Prop()
39+
@Provide()
3340
homeState!: GetPlatformInfoDTO;
3441
3542
@Prop()
3643
isMobile!: boolean;
3744
45+
@Prop()
46+
@Provide()
47+
isUnDetectedMac!: boolean;
48+
49+
@Provide({ reactive: true})
50+
isOpenMacPlatformSelectWindow: boolean = false;
51+
52+
@Provide()
53+
openMacPlatformSelectWindow() {
54+
this.isOpenMacPlatformSelectWindow = true;
55+
console.log(`now is ${this.isOpenMacPlatformSelectWindow}`)
56+
}
57+
58+
@Provide()
59+
closeMacPlatformSelectWindow() {
60+
this.isOpenMacPlatformSelectWindow = false;
61+
}
62+
3863
mounted() {
3964
window.scrollTo(0, 0);
4065
}
4166
4267
async asyncData({ apiClient }: AsyncDataOptions) {
4368
try {
4469
const res = await apiClient.getPlatformInfo();
45-
return { homeState: res, isMobile: res.os !== 'windows' && res.os !== 'mac' };
70+
console.log(res);
71+
return {
72+
homeState: res,
73+
isMobile: res.os !== 'windows' && res.os !== 'mac',
74+
isUnDetectedMac: res.architecture === 'Unknown' && res.os === 'mac',
75+
};
4676
} catch (error) {
4777
console.error('Failed to fetch platform info:', error);
4878
}
@@ -92,6 +122,7 @@ export default class Home extends Vue {
92122
<back-top v-if="!isMobile" />
93123
</ClientOnly>
94124
<HomeFooter />
125+
<MacUndetectedDialog />
95126
</div>
96127
</template>
97128

0 commit comments

Comments
 (0)