lkddi/AlgerMusicPlayer
1
0
Fork 0
mirror of https://github.com/algerkong/AlgerMusicPlayer.git synced 2026-04-03 14:20:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #472 from souvenp/feat/menu-expand

Browse Source 
feat: 左上角菜单展开状态持久保存
This commit is contained in:
Alger
2025-09-14 00:00:54 +08:00
committed by GitHub
parent d05a63c5e3 10421fa4d2
commit 74b9d73241
2 changed files with 13 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/main/set.json
View File

@@ -28,6 +28,7 @@
"contentZoomFactor": 1, "contentZoomFactor": 1,
"autoTheme": false, "autoTheme": false,
"manualTheme": "light", "manualTheme": "light",
"isMenuExpanded": false,
"customApiPlugin": "", "customApiPlugin": "",
"customApiPluginName": "" "customApiPluginName": ""
} }

18
src/renderer/layout/components/AppMenu.vue
View File

@@ -1,15 +1,15 @@
<template> <template>
<div> <div>
<!-- menu --> <!-- menu -->
<div class="app-menu" :class="{ 'app-menu-expanded': isText }"> <div class="app-menu" :class="{ 'app-menu-expanded': settingsStore.setData.isMenuExpanded }">
<div class="app-menu-header"> <div class="app-menu-header">
<div class="app-menu-logo" @click="isText = !isText"> <div class="app-menu-logo" @click="toggleMenu">
<img :src="icon" class="w-9 h-9" alt="logo" /> <img :src="icon" class="w-9 h-9" alt="logo" />
</div> </div>
</div> </div>
<div class="app-menu-list"> <div class="app-menu-list">
<div v-for="(item, index) in menus" :key="item.path" class="app-menu-item"> <div v-for="(item, index) in menus" :key="item.path" class="app-menu-item">
<n-tooltip :delay="200" :disabled="isText || isMobile" placement="bottom"> <n-tooltip :delay="200" :disabled="settingsStore.setData.isMenuExpanded || isMobile" placement="bottom">
<template #trigger> <template #trigger>
<router-link class="app-menu-item-link" :to="item.path"> <router-link class="app-menu-item-link" :to="item.path">
<i <i
@@ -18,14 +18,14 @@
:class="item.meta.icon" :class="item.meta.icon"
></i> ></i>
<span <span
v-if="isText" v-if="settingsStore.setData.isMenuExpanded"
class="app-menu-item-text ml-3" class="app-menu-item-text ml-3"
:class="isChecked(index) ? 'text-green-500' : ''" :class="isChecked(index) ? 'text-green-500' : ''"
>{{ t(item.meta.title) }}</span >{{ t(item.meta.title) }}</span
> >
</router-link> </router-link>
</template> </template>
<div v-if="!isText">{{ t(item.meta.title) }}</div> <div v-if="!settingsStore.setData.isMenuExpanded">{{ t(item.meta.title) }}</div>
</n-tooltip> </n-tooltip>
</div> </div>
</div> </div>
@@ -40,6 +40,7 @@ import { useRoute } from 'vue-router';
import icon from '@/assets/icon.png'; import icon from '@/assets/icon.png';
import { isMobile } from '@/utils'; import { isMobile } from '@/utils';
import { useSettingsStore } from '@/store';
const props = defineProps({ const props = defineProps({
size: { size: {
@@ -62,6 +63,7 @@ const props = defineProps({
const route = useRoute(); const route = useRoute();
const path = ref(route.path); const path = ref(route.path);
const settingsStore = useSettingsStore();
watch( watch(
() => route.path, () => route.path,
async (newParams) => { async (newParams) => {
@@ -83,7 +85,11 @@ const iconStyle = (index: number) => {
return style; return style;
}; };
const isText = ref(false); const toggleMenu = () => {
settingsStore.setSetData({
isMenuExpanded: !settingsStore.setData.isMenuExpanded
});
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>