mirror of
https://github.com/Kuingsmile/PicList.git
synced 2026-08-07 22:44:10 +08:00
✨ Feature(custom): rewrite titlebar and navigation UI
This commit is contained in:
Kuingsmile
94
src/renderer/components/ui/ThemeSwitcher.vue
Normal file
94
src/renderer/components/ui/ThemeSwitcher.vue
Normal file
@@ -0,0 +1,94 @@
|
||||
<script setup lang="ts">
|
||||
import { Monitor, Moon, Sun } from 'lucide-vue-next'
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import { useAppStore } from '@/hooks/appStore'
|
||||
|
||||
const { t } = useI18n()
|
||||
const appStore = useAppStore()
|
||||
|
||||
const currentTheme = computed(() => appStore.settings.app.theme || 'light')
|
||||
|
||||
const themeOptions = computed(() => [
|
||||
{
|
||||
value: 'light',
|
||||
label: t('settings.theme.light'),
|
||||
icon: Sun,
|
||||
description: t('settings.theme.lightDesc')
|
||||
},
|
||||
{
|
||||
value: 'dark',
|
||||
label: t('settings.theme.dark'),
|
||||
icon: Moon,
|
||||
description: t('settings.theme.darkDesc')
|
||||
},
|
||||
{
|
||||
value: 'auto',
|
||||
label: t('settings.theme.auto'),
|
||||
icon: Monitor,
|
||||
description: t('settings.theme.autoDesc')
|
||||
}
|
||||
])
|
||||
|
||||
const currentThemeOption = computed(
|
||||
() => themeOptions.value.find(option => option.value === currentTheme.value) || themeOptions.value[0]
|
||||
)
|
||||
|
||||
const toggleTheme = () => {
|
||||
appStore.toggleTheme()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="theme-switcher">
|
||||
<button
|
||||
class="theme-toggle-btn"
|
||||
:title="t('settings.theme.toggle')"
|
||||
@click="toggleTheme"
|
||||
>
|
||||
<component
|
||||
:is="currentThemeOption.icon"
|
||||
:size="18"
|
||||
/>
|
||||
<span class="theme-label">{{ currentThemeOption.label }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.theme-switcher {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.theme-toggle-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid var(--color-border);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: var(--color-text-secondary);
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.theme-toggle-btn:hover {
|
||||
background: var(--color-surface-elevated);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.theme-label {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Mobile responsive */
|
||||
@media (max-width: 768px) {
|
||||
.theme-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
241
src/renderer/components/ui/TitleBar.vue
Normal file
241
src/renderer/components/ui/TitleBar.vue
Normal file
@@ -0,0 +1,241 @@
|
||||
<template>
|
||||
<div
|
||||
class="title-bar"
|
||||
data-drag-region
|
||||
>
|
||||
<div class="title-bar-content">
|
||||
<div class="title-left">
|
||||
<div class="app-icon">
|
||||
<img
|
||||
src="/roundLogo.png"
|
||||
alt="App Icon"
|
||||
width="20"
|
||||
height="20"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="title-center">
|
||||
<!-- Progress bar in title bar -->
|
||||
<div
|
||||
v-if="isShowprogress"
|
||||
class="progress-container"
|
||||
>
|
||||
<div class="progress-bar">
|
||||
<div
|
||||
class="progress-fill"
|
||||
:style="{ width: `${progress}%` }"
|
||||
/>
|
||||
</div>
|
||||
<span class="progress-text">{{ progress }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="title-right"
|
||||
>
|
||||
<div class="window-controls">
|
||||
<button
|
||||
class="control-button pin-button"
|
||||
:class="{ active: isAlwaysOnTop }"
|
||||
:title="$t('titleBar.alwaysOnTop')"
|
||||
@click="setAlwaysOnTop"
|
||||
>
|
||||
<PinIcon
|
||||
:color="isAlwaysOnTop ? '#CE6769' : '#000'"
|
||||
:size="14"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
class="control-button minimize-button"
|
||||
:title="$t('titleBar.minimize')"
|
||||
@click="minimizeWindow"
|
||||
>
|
||||
<MinusIcon :size="14" />
|
||||
</button>
|
||||
<button
|
||||
class="control-button mini-button"
|
||||
:title="$t('titleBar.miniWindow')"
|
||||
@click="openMiniWindow"
|
||||
>
|
||||
<ShrinkIcon :size="14" />
|
||||
</button>
|
||||
<button
|
||||
class="control-button close-button"
|
||||
:title="$t('titleBar.close')"
|
||||
@click="closeWindow"
|
||||
>
|
||||
<XIcon :size="14" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { IpcRendererEvent } from 'electron'
|
||||
import { MinusIcon, PinIcon, ShrinkIcon, XIcon } from 'lucide-vue-next'
|
||||
import { onBeforeMount, onBeforeUnmount, ref } from 'vue'
|
||||
|
||||
import { IRPCActionType } from '#/types/enum'
|
||||
|
||||
const isShowprogress = ref(false)
|
||||
const progress = ref(0)
|
||||
const isAlwaysOnTop = ref(false)
|
||||
|
||||
function setAlwaysOnTop () {
|
||||
isAlwaysOnTop.value = !isAlwaysOnTop.value
|
||||
window.electron.sendRPC(IRPCActionType.MAIN_WINDOW_ON_TOP)
|
||||
}
|
||||
|
||||
function minimizeWindow () {
|
||||
window.electron.sendRPC(IRPCActionType.MINIMIZE_WINDOW)
|
||||
}
|
||||
|
||||
function openMiniWindow () {
|
||||
window.electron.sendRPC(IRPCActionType.OPEN_MINI_WINDOW)
|
||||
}
|
||||
|
||||
function closeWindow () {
|
||||
window.electron.sendRPC(IRPCActionType.CLOSE_WINDOW)
|
||||
}
|
||||
const uploadProcessHandler = (_event: IpcRendererEvent, data: { progress: number }) => {
|
||||
isShowprogress.value = data.progress !== 100 && data.progress !== 0
|
||||
progress.value = data.progress
|
||||
}
|
||||
|
||||
onBeforeMount(() => {
|
||||
window.electron.ipcRendererOn('updateProgress', uploadProcessHandler)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.electron.ipcRendererRemoveListener('updateProgress', uploadProcessHandler)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.title-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 32px;
|
||||
background: var(--color-background-secondary);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
z-index: 1000;
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
|
||||
.title-bar-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.title-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.app-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.app-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.app-version {
|
||||
font-size: 12px;
|
||||
color: var(--color-text-secondary);
|
||||
background: var(--color-border);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.title-center {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
flex: 1;
|
||||
height: 4px;
|
||||
background: var(--color-border);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: var(--color-success);
|
||||
border-radius: 2px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
font-size: 11px;
|
||||
color: var(--color-text-secondary);
|
||||
min-width: 35px;
|
||||
}
|
||||
|
||||
.title-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.window-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.control-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 20px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
border-radius: 4px;
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.control-button:hover {
|
||||
background: var(--color-surface-elevated);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.pin-button.active {
|
||||
color: var(--color-accent);
|
||||
background: var(--color-accent)20;
|
||||
}
|
||||
|
||||
.close-button:hover {
|
||||
background: var(--color-danger);
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user