Skip to content

Commit 6763a80

Browse files
orangelckcorangelckc
committed
refactor: all modals using Modal component
1 parent d3fec88 commit 6763a80

File tree

9 files changed

+149
-214
lines changed

9 files changed

+149
-214
lines changed

‎apps/client/components/common/Modal.vue

+4-4
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,14 @@ const props = withDefaults(
1515
modal?: boolean;
1616
closeOnClickModal?: boolean;
1717
modalColor?: string;
18-
offset?: number;
18+
offset?: string;
1919
}>(),
2020
{
2121
showModal: false,
2222
modal: false,
2323
closeOnClickModal: false,
2424
modalColor: "rgba(0, 0, 0, 0.3)",
25-
offset: 0,
25+
offset: "-8vh",
2626
},
2727
);
2828
@@ -69,9 +69,9 @@ defineExpose({
6969
<template>
7070
<dialog
7171
ref="modalRef"
72-
class="modal mt-[-8vh]"
72+
class="modal"
7373
:style="{
74-
marginTop: `${offset}px`,
74+
marginTop: offset,
7575
}"
7676
@click="onClick"
7777
>

‎apps/client/components/main/AuthRequired.vue

+2-5
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
<template>
2-
<dialog
3-
className="modal top-[-8vh]"
4-
:open="authRequireModalState"
5-
>
2+
<CommonModal :show-modal="authRequireModalState">
63
<div className="modal-box">
74
<h3 className="font-bold text-lg mb-4">✨ 友情提示</h3>
85
<p class="py-4 text-center text-xl">注册以进行下一课的学习哦~ 😊</p>
@@ -21,7 +18,7 @@
2118
</button>
2219
</div>
2320
</div>
24-
</dialog>
21+
</CommonModal>
2522
</template>
2623

2724
<script setup lang="ts">

‎apps/client/components/main/MessageBox/MessageBox.vue

+10-12
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
2-
<dialog
3-
:open="isShow"
4-
class="modal invisible"
2+
<CommonModal
3+
:show-modal="isShow"
4+
modal
55
>
66
<div
77
ref="dialogBoxRef"
@@ -10,14 +10,12 @@
1010
<h3 class="text-lg font-bold">{{ title }}</h3>
1111
<p class="py-4">{{ content }}</p>
1212
<div class="modal-action">
13-
<form method="dialog">
14-
<button
15-
@click="handleCancel"
16-
class="cancel btn"
17-
>
18-
{{ cancelBtnText }}
19-
</button>
20-
</form>
13+
<button
14+
@click="handleCancel"
15+
class="cancel btn"
16+
>
17+
{{ cancelBtnText }}
18+
</button>
2119
<button
2220
v-if="confirmBtnText"
2321
class="confirm btn"
@@ -27,7 +25,7 @@
2725
</button>
2826
</div>
2927
</div>
30-
</dialog>
28+
</CommonModal>
3129
</template>
3230

3331
<script setup lang="ts">

‎apps/client/components/main/Share.vue

+47-52
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,60 @@
11
<template>
2-
<div>
3-
<dialog
4-
class="modal mt-[-8vh]"
5-
:open="shareModalVisible"
2+
<CommonModal :show-modal="shareModalVisible">
3+
<div
4+
ref="dialogBoxRef"
5+
class="modal-box flex w-[27rem] flex-col items-center overflow-hidden"
66
>
7-
<div
8-
ref="dialogBoxRef"
9-
class="modal-box flex w-[27rem] flex-col items-center overflow-hidden"
10-
>
11-
<div class="flex">
12-
<div class="gallery mr-2 py-2">
13-
<div
14-
v-for="(imgItem, index) in galleryImgs"
15-
:key="imgItem.src"
16-
:class="[
17-
'gallery-item h-18 mb-2 mr-2 w-14 cursor-pointer overflow-hidden rounded-sm border-2 border-transparent',
18-
{
19-
'!border-primary': currImageIndex === index,
20-
skeleton: !imgItem.src,
21-
},
22-
]"
23-
@click="handleSelectImage(index)"
24-
>
25-
<img
26-
v-show="imgItem.src"
27-
:src="imgItem.src"
28-
:alt="`Card ${index}`"
29-
/>
30-
</div>
31-
</div>
7+
<div class="flex">
8+
<div class="gallery mr-2 py-2">
329
<div
33-
:class="['h-[27rem] w-[19rem]', { skeleton: !shareImageSrc }]"
34-
ref="imageContainer"
10+
v-for="(imgItem, index) in galleryImgs"
11+
:key="imgItem.src"
12+
:class="[
13+
'gallery-item h-18 mb-2 mr-2 w-14 cursor-pointer overflow-hidden rounded-sm border-2 border-transparent',
14+
{
15+
'!border-primary': currImageIndex === index,
16+
skeleton: !imgItem.src,
17+
},
18+
]"
19+
@click="handleSelectImage(index)"
3520
>
3621
<img
37-
v-show="shareImageSrc"
38-
:src="shareImageSrc"
39-
alt="Selected Share Image"
40-
width="400"
41-
height="600"
42-
class="rounded-md"
22+
v-show="imgItem.src"
23+
:src="imgItem.src"
24+
:alt="`Card ${index}`"
4325
/>
4426
</div>
4527
</div>
46-
<div class="modal-action">
47-
<button
48-
class="btn btn-primary"
49-
@click="copyAndClose"
50-
>
51-
复制并关闭
52-
</button>
53-
<button
54-
class="btn"
55-
@click="hideShareModal"
56-
>
57-
关闭
58-
</button>
28+
<div
29+
:class="['h-[27rem] w-[19rem]', { skeleton: !shareImageSrc }]"
30+
ref="imageContainer"
31+
>
32+
<img
33+
v-show="shareImageSrc"
34+
:src="shareImageSrc"
35+
alt="Selected Share Image"
36+
width="400"
37+
height="600"
38+
class="rounded-md"
39+
/>
5940
</div>
6041
</div>
61-
</dialog>
62-
</div>
42+
<div class="modal-action">
43+
<button
44+
class="btn btn-primary"
45+
@click="copyAndClose"
46+
>
47+
复制并关闭
48+
</button>
49+
<button
50+
class="btn"
51+
@click="hideShareModal"
52+
>
53+
关闭
54+
</button>
55+
</div>
56+
</div>
57+
</CommonModal>
6358
</template>
6459

6560
<script setup lang="ts">

‎apps/client/components/main/Summary.vue

+60-65
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,70 @@
11
<template>
2-
<div>
3-
<dialog
4-
className="modal mt-[-8vh]"
5-
:open="showModal"
6-
>
7-
<div className="modal-box max-w-[48rem]">
8-
<div class="relative">
9-
<h3 className="font-bold text-lg mb-4">🎉 Congratulations!</h3>
10-
<button
11-
tabindex="0"
12-
class="btn btn-ghost btn-sm absolute right-0 top-0 mx-1 h-7 w-7 rounded-md p-0"
13-
@click="soundSentence"
14-
>
15-
<span class="i-ph-speaker-simple-high h-full w-full"></span>
16-
</button>
17-
</div>
2+
<CommonModal :show-modal="showModal">
3+
<div className="modal-box max-w-[48rem]">
4+
<div class="relative">
5+
<h3 className="font-bold text-lg mb-4">🎉 Congratulations!</h3>
6+
<button
7+
tabindex="0"
8+
class="btn btn-ghost btn-sm absolute right-0 top-0 mx-1 h-7 w-7 rounded-md p-0"
9+
@click="soundSentence"
10+
>
11+
<span class="i-ph-speaker-simple-high h-full w-full"></span>
12+
</button>
13+
</div>
1814

19-
<div class="flex flex-col">
20-
<div class="flex">
21-
<span class="text-6xl font-bold">"</span>
22-
<div class="flex-1 text-center text-xl leading-loose">
23-
{{ enSentence }}
24-
</div>
25-
<span class="invisible text-6xl font-bold">"</span>
15+
<div class="flex flex-col">
16+
<div class="flex">
17+
<span class="text-6xl font-bold">"</span>
18+
<div class="flex-1 text-center text-xl leading-loose">
19+
{{ enSentence }}
2620
</div>
21+
<span class="invisible text-6xl font-bold">"</span>
22+
</div>
2723

28-
<div class="flex">
29-
<span class="invisible text-6xl font-bold">"</span>
30-
<div class="flex-1 text-center text-xl leading-loose">
31-
{{ zhSentence }}
32-
</div>
33-
<span class="text-6xl font-bold">"</span>
24+
<div class="flex">
25+
<span class="invisible text-6xl font-bold">"</span>
26+
<div class="flex-1 text-center text-xl leading-loose">
27+
{{ zhSentence }}
3428
</div>
35-
<p class="text-3 text-right text-gray-200">—— 金山词霸「每日一句」</p>
36-
<p class="pl-14 text-base leading-loose text-gray-600">
37-
{{
38-
`恭喜您一共完成 ${courseTimer.totalRecordNumber()} 道题，用时 ${formatSecondsToTime(
39-
courseTimer.calculateTotalTime(),
40-
)} `
41-
}}
42-
</p>
43-
</div>
44-
<div className="modal-action">
45-
<button
46-
class="btn btn-primary"
47-
@click="toShare"
48-
>
49-
生成打卡图
50-
</button>
51-
<button
52-
class="btn"
53-
@click="handleDoAgain"
54-
>
55-
再来一次
56-
</button>
57-
58-
<button
59-
class="btn"
60-
@click="goToNextCourse"
61-
>
62-
{{ haveNextCourse || !isAuthenticated() ? "开始下一课" : "返回课程列表" }}
63-
<kbd class="kbd"> ↵ </kbd>
64-
</button>
29+
<span class="text-6xl font-bold">"</span>
6530
</div>
31+
<p class="text-3 text-right text-gray-200">—— 金山词霸「每日一句」</p>
32+
<p class="pl-14 text-base leading-loose text-gray-600">
33+
{{
34+
`恭喜您一共完成 ${courseTimer.totalRecordNumber()} 道题，用时 ${formatSecondsToTime(
35+
courseTimer.calculateTotalTime(),
36+
)} `
37+
}}
38+
</p>
39+
</div>
40+
<div className="modal-action">
41+
<button
42+
class="btn btn-primary"
43+
@click="toShare"
44+
>
45+
生成打卡图
46+
</button>
47+
<button
48+
class="btn"
49+
@click="handleDoAgain"
50+
>
51+
再来一次
52+
</button>
53+
54+
<button
55+
class="btn"
56+
@click="goToNextCourse"
57+
>
58+
{{ haveNextCourse || !isAuthenticated() ? "开始下一课" : "返回课程列表" }}
59+
<kbd class="kbd"> ↵ </kbd>
60+
</button>
6661
</div>
67-
<canvas
68-
ref="confettiCanvasRef"
69-
class="pointer-events-none absolute left-0 top-0 h-full w-full"
70-
></canvas>
71-
</dialog>
72-
</div>
62+
</div>
63+
<canvas
64+
ref="confettiCanvasRef"
65+
class="pointer-events-none absolute left-0 top-0 h-full w-full"
66+
></canvas>
67+
</CommonModal>
7368
</template>
7469

7570
<script setup lang="ts">

‎apps/client/components/rank/RankingList.vue

+11-21
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,17 @@
11
<template>
2-
<dialog
2+
<CommonModal
33
id="rank-list"
4-
class="modal"
5-
:open="rankingStore.rankModal"
4+
:show-modal="rankingStore.rankModal"
5+
:close-on-click-modal="true"
6+
@close="rankingStore.hideRankModal"
67
>
78
<div class="modal-box flex h-[568px] w-[420px] flex-col overflow-hidden px-4 pb-12">
8-
<!-- close button -->
9-
<form method="dialog">
10-
<button
11-
class="btn btn-circle btn-ghost btn-sm absolute right-2 top-2"
12-
@click="rankingStore.hideRankModal"
13-
>
14-
✕
15-
</button>
16-
</form>
9+
<button
10+
class="btn btn-circle btn-ghost btn-sm absolute right-2 top-2"
11+
@click="rankingStore.hideRankModal"
12+
>
13+
✕
14+
</button>
1715

1816
<!-- title -->
1917
<h2 class="mb-4 text-center text-xl font-bold">排行榜</h2>
@@ -65,15 +63,7 @@
6563
:rankingSelf="rankingStore.rankingSelf"
6664
/>
6765
</div>
68-
69-
<!-- click outside to close -->
70-
<form
71-
method="dialog"
72-
class="modal-backdrop"
73-
>
74-
<button @click="rankingStore.hideRankModal"></button>
75-
</form>
76-
</dialog>
66+
</CommonModal>
7767
</template>
7868

7969
<script setup lang="ts">

0 commit comments

Comments
 (0)