Skip to content

Commit 79808e7

Browse files
KuingsmileKuingsmile
committed
✨ Feature(custom): support indicate current picbed config page
1 parent 4cfa61c commit 79808e7

File tree

3 files changed

+96
-498
lines changed

3 files changed

+96
-498
lines changed

‎src/renderer/components/NavigationPage.vue‎

Lines changed: 86 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,38 @@
11
<template>
2-
<nav class="navigation" :class="{ collapsed: isCollapsed }">
3-
<div class="title-bar">
4-
<div v-show="!isCollapsed" class="app-title">
5-
<div class="app-text" @click="openGithubPage">
2+
<nav
3+
class="group no-scrollbar flex h-screen w-[150px] flex-col overflow-hidden border-r border-r-border-secondary/50 bg-bg-secondary transition-all duration-medium ease-apple max-md:w-[60px] [.collapsed]:w-[60px]"
4+
:class="{ collapsed: isCollapsed }"
5+
>
6+
<div
7+
class="relative flex items-center justify-center bg-bg-secondary px-4 py-5 group-[.collapsed]:px-2 group-[.collapsed]:py-4"
8+
>
9+
<div v-show="!isCollapsed" class="flex flex-col items-center gap-1 group-[.collapsed]:hidden max-md:hidden">
10+
<div
11+
class="text-[16px] font-bold tracking-tight text-main hover:cursor-pointer hover:text-accent"
12+
@click="openGithubPage"
13+
>
614
{{ t('app.title') }}
715
</div>
8-
<div class="app-version">v{{ version }}</div>
16+
<div
17+
class="rounded-lg border border-border/50 bg-bg-secondary px-[8px] py-[3px] text-[10px] font-medium text-secondary"
18+
>
19+
v{{ version }}
20+
</div>
921
</div>
1022
<button
1123
:title="isCollapsed ? t('navigation.expand') : t('navigation.collapse')"
12-
class="collapse-button"
24+
class="absolute top-1/2 right-[8px] flex -translate-y-1/2 cursor-pointer items-center justify-center rounded-sm border-none bg-transparent p-[4px] transition-all duration-200 ease-apple group-[.collapsed]:absolute group-[.collapsed]:top-[20px] group-[.collapsed]:right-[16px] group-[.collapsed]:transform-none hover:bg-surface-elevated hover:text-main"
1325
@click="isCollapsed = !isCollapsed"
1426
>
1527
<component :is="isCollapsed ? ChevronRightIcon : ChevronLeftIcon" :size="16" />
1628
</button>
1729
</div>
1830

19-
<div class="theme-section">
31+
<div class="flex items-center justify-center p-3">
2032
<ThemeSwitcher :collapsed="isCollapsed" />
2133
</div>
2234

23-
<div class="nav-menu">
35+
<div class="no-scrollbar min-h-0 flex-1 overflow-y-auto py-4">
2436
<div
2537
v-for="item in navigationItems.slice(0, 3)"
2638
:key="item.path"
@@ -32,22 +44,29 @@
3244
<div class="nav-icon-container">
3345
<component :is="item.icon" :size="18" />
3446
</div>
35-
<span v-show="!isCollapsed" class="nav-label">{{ item.name }}</span>
47+
<span v-show="!isCollapsed" class="max-md:hidden" :class="isCollapsed ? 'hidden' : ''">{{ item.name }}</span>
3648
</div>
3749

38-
<Disclosure v-show="!isCollapsed" v-slot="{ open }" as="div" class="nav-submenu">
39-
<DisclosureButton class="nav-item submenu-trigger">
50+
<Disclosure v-show="!isCollapsed" v-slot="{ open }" as="div" class="relative mt-[4px] justify-center">
51+
<DisclosureButton
52+
class="nav-item relative flex w-full cursor-pointer items-center justify-center gap-3 border-none bg-transparent px-4 py-3 text-sm font-medium text-secondary no-underline transition-all duration-200 ease-apple hover:bg-surface-elevated hover:text-main"
53+
>
4054
<div class="nav-icon-container">
4155
<DatabaseIcon :size="18" />
4256
</div>
43-
<span class="nav-label">{{ t('navigation.picbed') }}</span>
44-
<ChevronDownIcon :size="16" class="submenu-arrow" :class="{ 'rotate-180': open }" />
57+
<span class="shrink-0 max-md:hidden" :class="isCollapsed ? 'hidden' : ''">{{ t('navigation.picbed') }}</span>
58+
<ChevronDownIcon
59+
:size="16"
60+
class="absolute right-4 shrink-0 transition-all duration-200 ease-apple"
61+
:class="{ 'rotate-180': open }"
62+
/>
4563
</DisclosureButton>
46-
<DisclosurePanel class="submenu-panel">
64+
<DisclosurePanel class="mt-[2px] flex flex-col gap-[4px] pl-11">
4765
<div
4866
v-for="item in visiblePicBeds"
4967
:key="item.type"
50-
class="submenu-item"
68+
:class="{ 'router-link-active': isPicBedPathActive(item.type) }"
69+
class="flex cursor-pointer items-center px-4 py-2 text-sm font-medium text-secondary no-underline transition-all duration-200 ease-apple hover:bg-surface-elevated hover:text-accent-hover [.router-link-active]:border-r-4 [.router-link-active]:border-accent [.router-link-active]:bg-surface [.router-link-active]:text-accent"
5170
@click="navigateToUploaderConfig(item.type)"
5271
>
5372
<span>{{ item.name }}</span>
@@ -56,7 +75,7 @@
5675
</Disclosure>
5776
<div
5877
v-show="isCollapsed"
59-
class="nav-item collapsed-picbed"
78+
class="nav-item cursor-default bg-surface-elevated hover:text-main"
6079
:title="t('navigation.picbed')"
6180
@click="isCollapsed = !isCollapsed"
6281
>
@@ -76,11 +95,15 @@
7695
<div class="nav-icon-container">
7796
<component :is="item.icon" :size="18" />
7897
</div>
79-
<span v-show="!isCollapsed" class="nav-label">{{ item.name }}</span>
98+
<span v-show="!isCollapsed" class="max-md:hidden" :class="isCollapsed ? 'hidden' : ''">{{ item.name }}</span>
8099
</div>
81100
</div>
82-
<div class="sidebar-footer">
83-
<button class="footer-button" :title="t('navigation.moreOptions')" @click="openMenu">
101+
<div class="border-t border-t-border p-3">
102+
<button
103+
class="fixed bottom-[4px] left-[4px] cursor-pointer rounded-full border-none bg-transparent p-[8px] text-tertiary hover:bg-surface-elevated hover:text-main"
104+
:title="t('navigation.moreOptions')"
105+
@click="openMenu"
106+
>
84107
<Info :size="20" />
85108
</button>
86109
</div>
@@ -89,38 +112,51 @@
89112
<FirstTimeGuide ref="guideRef" />
90113

91114
<TransitionRoot appear :show="qrcodeVisible" as="template">
92-
<Dialog as="div" class="qr-dialog" @close="qrcodeVisible = false">
93-
<div class="dialog-container">
115+
<Dialog
116+
as="div"
117+
class="fixed inset-0 z-50 flex items-center justify-center overflow-y-auto"
118+
@close="qrcodeVisible = false"
119+
>
120+
<div class="fixed inset-0 z-50 flex min-h-screen items-center justify-center overflow-y-auto p-[16px]">
94121
<TransitionChild as="template">
95-
<DialogPanel class="dialog-panel">
96-
<DialogTitle class="dialog-title">
122+
<DialogPanel
123+
class="w-full max-w-[500px] overflow-visible rounded-xl border border-border bg-bg-tertiary shadow-md"
124+
>
125+
<DialogTitle class="m-0 px-[24px] pt-[20px] text-2xl font-semibold text-main">
97126
{{ t('navigation.picBedQrCode') }}
98127
</DialogTitle>
99128

100-
<div class="dialog-content">
101-
<div class="form-group">
102-
<label class="form-label">{{ t('navigation.choosePicBed') }}</label>
129+
<div class="p-4">
130+
<div class="mb-5">
131+
<label class="mb-2 block text-base font-medium text-main">{{ t('navigation.choosePicBed') }}</label>
103132
<Listbox v-model="choosedPicBedForQRCode" multiple>
104-
<div class="listbox-container">
105-
<ListboxButton class="listbox-button">
106-
<span v-if="choosedPicBedForQRCode.length === 0" class="placeholder">
133+
<div class="relative">
134+
<ListboxButton
135+
class="flex w-full cursor-pointer items-center justify-between rounded-2xl border border-border bg-surface px-4 py-3 text-base text-main hover:border-accent"
136+
>
137+
<span v-if="choosedPicBedForQRCode.length === 0" class="text-secondary">
107138
{{ t('navigation.selectPicBeds') }}
108139
</span>
109-
<span v-else class="selected-count">
140+
<span v-else class="text-main">
110141
{{ choosedPicBedForQRCode.length }} {{ t('navigation.selected') }}
111142
</span>
112-
<ChevronDownIcon :size="16" class="listbox-arrow" />
143+
<ChevronDownIcon :size="16" class="text-secondary" />
113144
</ListboxButton>
114145

115146
<transition>
116-
<ListboxOptions class="listbox-options">
147+
<ListboxOptions
148+
class="absolute top-full right-0 left-0 z-1000 mt-[4px] max-h-[300px] overflow-y-auto rounded-sm border border-border bg-bg-tertiary shadow-md"
149+
>
117150
<ListboxOption
118151
v-for="picbed in picBedG"
119152
:key="picbed.type"
120153
v-slot="{ active, selected }"
121154
:value="picbed.type"
122155
>
123-
<li class="listbox-option" :class="{ active, selected }">
156+
<li
157+
class="flex cursor-pointer items-center justify-between px-4 py-3 text-base text-main [.active]:bg-surface-elevated [.selected]:bg-accent [.selected]:text-white"
158+
:class="{ active, selected }"
159+
>
124160
<span>{{ picbed.name }}</span>
125161
<CheckIcon v-if="selected" :size="16" />
126162
</li>
@@ -130,19 +166,26 @@
130166
</div>
131167
</Listbox>
132168

133-
<button v-if="choosedPicBedForQRCode.length > 0" class="copy-button" @click="handleCopyPicBedConfig">
169+
<button
170+
v-if="choosedPicBedForQRCode.length > 0"
171+
class="mt-3 flex cursor-pointer items-center gap-2 rounded-sm border-none bg-accent px-4 py-2 text-base font-medium text-white hover:bg-accent-hover"
172+
@click="handleCopyPicBedConfig"
173+
>
134174
<CopyIcon :size="16" />
135175
{{ t('navigation.copyPicBedConfig') }}
136176
</button>
137177
</div>
138178

139-
<div v-if="choosedPicBedForQRCode.length > 0" class="qr-container">
140-
<qrcode-vue :size="280" :value="picBedConfigString" class="qr-code" />
179+
<div v-if="choosedPicBedForQRCode.length > 0" class="flex justify-center py-5">
180+
<qrcode-vue :size="280" :value="picBedConfigString" class="overflow-hidden shadow-sm" />
141181
</div>
142182
</div>
143183

144-
<div class="dialog-actions">
145-
<button class="cancel-button" @click="qrcodeVisible = false">
184+
<div class="flex justify-end gap-3 px-4 pb-4">
185+
<button
186+
class="cursor-pointer rounded-sm border border-border bg-danger/50 px-4 py-2 text-base text-main hover:bg-danger/70"
187+
@click="qrcodeVisible = false"
188+
>
146189
{{ $t('navigation.close') }}
147190
</button>
148191
</div>
@@ -268,6 +311,11 @@ function isPathActive(path: string): boolean {
268311
return route.path === path
269312
}
270313
314+
function isPicBedPathActive(type: string): boolean {
315+
console.log('type:', type, 'route.params.type:', route.params.type)
316+
return route.name === routerConfig.UPLOADER_CONFIG_PAGE && route.params.type === type
317+
}
318+
271319
const navigationItems = computed(() => [
272320
{ name: t('navigation.upload'), path: '/main-page/upload', icon: UploadIcon },
273321
{ name: t('navigation.manage'), path: '/main-page/manage-login-page', icon: BriefcaseBusiness },

0 commit comments

Comments
 (0)