Skip to content

Commit 258ed48

Browse files
KuingsmileKuingsmile
committed
🐛 Fix(custom): fix guide page location issue
1 parent 79808e7 commit 258ed48

File tree

4 files changed

+46
-297
lines changed

4 files changed

+46
-297
lines changed

‎src/renderer/components/FirstTimeGuide.vue‎

Lines changed: 31 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,58 @@
11
<template>
22
<TransitionRoot appear :show="isVisible" as="template">
3-
<div class="guide-overlay">
4-
<div class="guide-backdrop" @click="handleClose" />
3+
<div class="pointer-events-auto fixed inset-0 z-9999">
4+
<div class="absolute inset-0 bg-black/15 transition-all duration-300 ease-apple" @click="handleClose" />
55

6-
<div v-if="currentStepConfig.target" class="guide-spotlight" :style="spotlightStyle" />
6+
<div
7+
v-if="currentStepConfig.target"
8+
class="pointer-events-none absolute z-10000 rounded-xl border-2 border-dashed border-accent shadow-sm transition-all duration-300 ease-apple"
9+
:style="spotlightStyle"
10+
/>
711

812
<!-- Guide Card -->
9-
<div class="guide-card" :style="cardStyle">
10-
<div class="guide-header">
11-
<div class="guide-header-left">
12-
<h3 class="guide-title">{{ t('guide.title') }}</h3>
13-
<span class="guide-step-indicator">
13+
<div
14+
class="absolute z-10001 max-h-[80vh] w-[420px] max-w-[90vw] overflow-auto rounded-lg border border-border bg-bg-tertiary shadow-2xl transition-all duration-300 ease-apple max-sm:w-[calc(100vw-32px)]"
15+
:style="cardStyle"
16+
>
17+
<div class="flex items-center justify-between border-b border-b-border px-4 py-3">
18+
<div class="flex flex-col gap-0.5">
19+
<h3 class="m-0 text-[16px] font-semibold text-main">{{ t('guide.title') }}</h3>
20+
<span class="text-sm text-tertiary">
1421
{{ t('guide.stepIndicator', { current: currentStep + 1, total: steps.length }) }}
1522
</span>
1623
</div>
17-
<button class="guide-close" :title="t('guide.close')" @click="handleClose">
24+
<button
25+
class="flex cursor-pointer items-center justify-center rounded-sm border-none bg-transparent p-[4px] text-secondary transition-all duration-200 ease-apple hover:bg-accent-hover hover:text-main"
26+
:title="t('guide.close')"
27+
@click="handleClose"
28+
>
1829
<XIcon :size="20" />
1930
</button>
2031
</div>
2132

22-
<div class="guide-content">
23-
<div class="guide-icon">
33+
<div class="flex items-start gap-4 px-5 py-4">
34+
<div
35+
class="border-lg flex h-[40px] w-[40px] shrink-0 items-center justify-center rounded-lg bg-accent text-white"
36+
>
2437
<component :is="currentStepConfig.icon" :size="24" />
2538
</div>
26-
<div class="guide-text">
27-
<h4 class="guide-content-title">{{ t(currentStepConfig.title) }}</h4>
28-
<p class="guide-content-description">{{ t(currentStepConfig.description) }}</p>
39+
<div class="min-w-0 flex-1">
40+
<h4 class="mb-1 text-base font-semibold text-main">{{ t(currentStepConfig.title) }}</h4>
41+
<p class="m-0 text-sm leading-[1.5] text-secondary">{{ t(currentStepConfig.description) }}</p>
2942
</div>
3043
</div>
3144

32-
<div class="guide-footer">
33-
<div class="guide-progress">
45+
<div class="border-t border-t-border p-3">
46+
<div class="mb-2.5 flex justify-center gap-1.5">
3447
<div
3548
v-for="(_, index) in steps"
3649
:key="index"
37-
class="progress-dot"
50+
class="h-[6px] w-[6px] rounded-full bg-border transition-all duration-300 ease-apple [.active]:w-5 [.active]:rounded-xs [.active]:bg-accent [.completed]:bg-success"
3851
:class="{ active: index === currentStep, completed: index < currentStep }"
3952
/>
4053
</div>
4154

42-
<div class="guide-actions">
55+
<div class="flex justify-end gap-1.5">
4356
<button v-if="currentStep > 0" class="guide-btn secondary" @click="handlePrevious">
4457
<ChevronLeftIcon :size="16" />
4558
{{ t('guide.previous') }}

‎src/renderer/components/NavigationPage.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
</button>
2929
</div>
3030

31-
<div class="flex items-center justify-center p-3">
31+
<div class="theme-switcher flex items-center justify-center p-3">
3232
<ThemeSwitcher :collapsed="isCollapsed" />
3333
</div>
3434

‎src/renderer/components/css/FirstTimeGuide.css‎

Lines changed: 13 additions & 277 deletions
Original file line numberDiff line numberDiff line change
@@ -1,280 +1,16 @@
1-
.guide-overlay {
2-
position: fixed;
3-
inset: 0;
4-
z-index: 9999;
5-
pointer-events: auto;
6-
}
7-
8-
.guide-backdrop {
9-
position: absolute;
10-
inset: 0;
11-
background: rgb(0 0 0 / 10%);
12-
transition: all 0.3s ease;
13-
}
14-
15-
.guide-overlay.advancedAnimation .guide-backdrop {
16-
animation: fade-in 0.3s ease;
17-
}
18-
19-
.guide-spotlight {
20-
position: absolute;
21-
border: 2px solid var(--color-accent);
22-
border-radius: var(--radius-md);
23-
box-shadow:
24-
0 0 0 9999px rgb(0 0 0 / 10%),
25-
0 0 20px rgb(255 255 255 / 30%),
26-
inset 0 0 20px rgb(255 255 255 / 10%);
27-
transition: all 0.3s ease;
28-
pointer-events: none;
29-
z-index: 10000;
30-
}
31-
32-
.guide-card {
33-
position: absolute;
34-
background: var(--color-background-tertiary);
35-
border: 1px solid var(--color-border);
36-
border-radius: var(--radius-lg);
37-
box-shadow: 0 10px 40px rgb(0 0 0 / 25%);
38-
width: 420px;
39-
max-width: 90vw;
40-
max-height: 80vh;
41-
overflow: auto;
42-
z-index: 10001;
43-
transition: all 0.3s ease;
44-
}
45-
46-
.guide-overlay.advancedAnimation .guide-card {
47-
animation: slide-up var(--transition-bounce-slow);
48-
}
49-
50-
.guide-header {
51-
display: flex;
52-
align-items: center;
53-
justify-content: space-between;
54-
padding: 12px 18px;
55-
border-bottom: 1px solid var(--color-border);
56-
}
57-
58-
.guide-header-left {
59-
display: flex;
60-
flex-direction: column;
61-
gap: 2px;
62-
}
63-
64-
.guide-title {
65-
font-size: 15px;
66-
font-weight: 600;
67-
color: var(--color-text-primary);
68-
margin: 0;
69-
}
70-
71-
.guide-step-indicator {
72-
font-size: 11px;
73-
color: var(--color-text-tertiary);
74-
}
75-
76-
.guide-close {
77-
background: transparent;
78-
border: none;
79-
color: var(--color-text-secondary);
80-
cursor: pointer;
81-
padding: 4px;
82-
border-radius: var(--radius-sm);
83-
display: flex;
84-
align-items: center;
85-
justify-content: center;
86-
transition: all 0.2s;
87-
}
88-
89-
.guide-close:hover {
90-
background: var(--color-accent-hover);
91-
color: var(--color-text-primary);
92-
}
93-
94-
.guide-content {
95-
padding: 14px 18px;
96-
display: flex;
97-
gap: 14px;
98-
align-items: flex-start;
99-
}
100-
101-
.guide-icon {
102-
width: 40px;
103-
height: 40px;
104-
flex-shrink: 0;
105-
border-radius: var(--radius-lg);
106-
background: var(--color-accent);
107-
display: flex;
108-
align-items: center;
109-
justify-content: center;
110-
color: white;
111-
}
112-
113-
.guide-text {
114-
flex: 1;
115-
min-width: 0;
116-
}
117-
118-
.guide-content-title {
119-
font-size: 14px;
120-
font-weight: 600;
121-
color: var(--color-text-primary);
122-
margin: 0 0 4px;
123-
}
124-
125-
.guide-content-description {
126-
font-size: 13px;
127-
color: var(--color-text-secondary);
128-
line-height: 1.5;
129-
margin: 0;
130-
}
131-
132-
.guide-additional-info {
133-
background: var(--color-background-tertiary);
134-
border-radius: var(--radius-sm);
135-
padding: 10px 12px;
136-
margin-top: 10px;
137-
}
138-
139-
.guide-additional-info p {
140-
font-size: 12px;
141-
color: var(--color-text-secondary);
142-
line-height: 1.4;
143-
margin: 6px 0;
144-
}
145-
146-
.guide-additional-info p:first-child {
147-
margin-top: 0;
148-
}
149-
150-
.guide-additional-info p:last-child {
151-
margin-bottom: 0;
152-
}
153-
154-
.guide-footer {
155-
padding: 10px 18px 12px;
156-
border-top: 1px solid var(--color-border);
157-
}
158-
159-
.guide-progress {
160-
display: flex;
161-
justify-content: center;
162-
gap: 6px;
163-
margin-bottom: 10px;
164-
}
165-
166-
.progress-dot {
167-
width: 6px;
168-
height: 6px;
169-
border-radius: var(--radius-round);
170-
background: var(--color-border);
171-
transition: all 0.3s;
172-
}
173-
174-
.progress-dot.active {
175-
background: var(--color-accent);
176-
width: 20px;
177-
border-radius: 3px;
178-
}
179-
180-
.progress-dot.completed {
181-
background: var(--color-success);
182-
}
183-
184-
.guide-actions {
185-
display: flex;
186-
gap: 6px;
187-
justify-content: flex-end;
188-
}
1+
@import "tailwindcss" reference;
2+
@import "../../assets/css/theme.css" reference;
3+
@import "../../assets/css/utilities.css" reference;
1894

1905
.guide-btn {
191-
padding: 6px 12px;
192-
border-radius: var(--radius-sm);
193-
font-size: 13px;
194-
font-weight: 500;
195-
cursor: pointer;
196-
border: none;
197-
display: flex;
198-
align-items: center;
199-
gap: 4px;
200-
transition: all 0.2s;
201-
}
202-
203-
.guide-btn.primary {
204-
background: var(--color-accent);
205-
color: white;
206-
}
207-
208-
.guide-btn.primary:hover {
209-
background: var(--color-accent-hover);
210-
transform: translateY(-1px);
211-
}
212-
213-
.guide-btn.secondary {
214-
background: var(--color-background-tertiary);
215-
color: var(--color-text-primary);
216-
}
217-
218-
.guide-btn.secondary:hover {
219-
background: var(--color-accent-hover);
220-
}
221-
222-
.guide-btn.outline {
223-
background: transparent;
224-
color: var(--color-text-primary);
225-
border: 1px solid var(--color-border);
226-
}
227-
228-
.guide-btn.outline:hover {
229-
background: var(--color-accent);
230-
color: var(--color-text-primary);
231-
}
232-
233-
.guide-btn.success {
234-
background: var(--color-success);
235-
color: white;
236-
}
237-
238-
.guide-btn.success:hover {
239-
background: var(--color-success);
240-
transform: translateY(-1px);
241-
}
242-
243-
@keyframes fade-in {
244-
from {
245-
opacity: 0;
246-
}
247-
248-
to {
249-
opacity: 1;
250-
}
251-
}
252-
253-
@keyframes slide-up {
254-
from {
255-
opacity: 0;
256-
transform: translate(-50%, -40%) scale(0.95);
257-
}
258-
259-
to {
260-
opacity: 1;
261-
transform: translate(-50%, -50%) scale(1);
262-
}
263-
}
264-
265-
/* Responsive */
266-
@media (width <= 640px) {
267-
.guide-card {
268-
width: calc(100vw - 32px);
269-
}
270-
271-
.guide-actions {
272-
flex-wrap: wrap;
273-
}
274-
275-
.guide-btn {
276-
flex: 1;
277-
min-width: calc(50% - 4px);
278-
justify-content: center;
279-
}
6+
@apply px-3 py-1.5 rounded-sm text-sm font-medium cursor-pointer border-none flex items-center gap-1 transition-all duration-200 ease-apple;
7+
@apply [.primary]:bg-accent [.primary]:text-white;
8+
@apply hover:[.primary]:bg-accent-hover hover:[.primary]:transform-[-translateY(1px)];
9+
@apply [.secondary]:bg-bg-tertiary [.secondary]:text-main;
10+
@apply hover:[.secondary]:bg-accent-hover;
11+
@apply [.outline]:bg-transparent [.outline]:text-main [.outline]:border-border;
12+
@apply hover:[.outline]:bg-accent hover:[.outline]:text-main;
13+
@apply [.success]:bg-success [.success]:text-white;
14+
@apply hover:[.success]:bg-success hover:[.success]:-translate-y-px;
15+
@apply max-md:flex-1 max-md:justify-center max-md:min-w-[calc(50%-4px)]
28016
}

‎src/renderer/pages/Upload.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
>
1010
<div class="flex max-w-[calc(100%-300px)] flex-1 flex-wrap items-center gap-2 max-md:order-1">
1111
<button
12-
class="group/provider flex w-auto min-w-[150px] shrink-0 cursor-pointer items-center gap-3 rounded-lg border border-border-secondary bg-bg-secondary px-4 py-2 font-[inherit] duration-fast ease-standard hover:-translate-y-px hover:border-accent-hover/70 hover:bg-surface hover:shadow-sm focus-visible:focus-ring max-xs:w-full max-xs:min-w-[100px]"
12+
class="provider-button group/provider flex w-auto min-w-[150px] shrink-0 cursor-pointer items-center gap-3 rounded-lg border border-border-secondary bg-bg-secondary px-4 py-2 font-[inherit] duration-fast ease-standard hover:-translate-y-px hover:border-accent-hover/70 hover:bg-surface hover:shadow-sm focus-visible:focus-ring max-xs:w-full max-xs:min-w-[100px]"
1313
:title="t('pages.upload.uploadViewHint')"
1414
@click="handlePicBedNameClick(picBedName)"
1515
>

0 commit comments

Comments
 (0)