mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-06 00:32:01 +02:00
replace navmenu
This commit is contained in:
pa
Natsumi
218
package-lock.json
generated
218
package-lock.json
generated
@@ -41,7 +41,6 @@
|
||||
"echarts": "^6.0.0",
|
||||
"electron": "^39.2.7",
|
||||
"electron-builder": "^26.4.0",
|
||||
"element-plus": "^2.13.1",
|
||||
"embla-carousel-vue": "^8.6.0",
|
||||
"esbuild-jest": "^0.5.0",
|
||||
"eslint": "^9.39.2",
|
||||
@@ -767,16 +766,6 @@
|
||||
"node": ">=0.1.95"
|
||||
}
|
||||
},
|
||||
"node_modules/@ctrl/tinycolor": {
|
||||
"version": "3.6.1",
|
||||
"resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
|
||||
"integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/@develar/schema-utils": {
|
||||
"version": "2.6.5",
|
||||
"resolved": "https://registry.npmjs.org/@develar/schema-utils/-/schema-utils-2.6.5.tgz",
|
||||
@@ -1319,16 +1308,6 @@
|
||||
"node": ">= 10.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@element-plus/icons-vue": {
|
||||
"version": "2.3.2",
|
||||
"resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.3.2.tgz",
|
||||
"integrity": "sha512-OzIuTaIfC8QXEPmJvB4Y4kw34rSXdCJzxcD1kFStBvr8bK6X1zQAYDo0CNMjojnfTqRQCJ0I7prlErcoRiET2A==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"vue": "^3.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@emnapi/core": {
|
||||
"version": "1.7.1",
|
||||
"resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.7.1.tgz",
|
||||
@@ -4044,18 +4023,6 @@
|
||||
"url": "https://opencollective.com/pkgr"
|
||||
}
|
||||
},
|
||||
"node_modules/@popperjs/core": {
|
||||
"name": "@sxzz/popperjs-es",
|
||||
"version": "2.11.7",
|
||||
"resolved": "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
|
||||
"integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/popperjs"
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/pluginutils": {
|
||||
"version": "1.0.0-beta.53",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.53.tgz",
|
||||
@@ -5287,24 +5254,6 @@
|
||||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/lodash": {
|
||||
"version": "4.17.21",
|
||||
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.21.tgz",
|
||||
"integrity": "sha512-FOvQ0YPD5NOfPgMzJihoT+Za5pdkDJWcbpuj1DjaKZIr/gxodQjY/uWEFlTNqW2ugXHUiL8lRQgw63dzKHZdeQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/lodash-es": {
|
||||
"version": "4.17.12",
|
||||
"resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.12.tgz",
|
||||
"integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@types/lodash": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/ms": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
|
||||
@@ -6511,13 +6460,6 @@
|
||||
"node": ">=0.12.0"
|
||||
}
|
||||
},
|
||||
"node_modules/async-validator": {
|
||||
"version": "4.2.5",
|
||||
"resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
|
||||
"integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/asynckit": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
|
||||
@@ -8545,132 +8487,6 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/element-plus": {
|
||||
"version": "2.13.1",
|
||||
"resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.13.1.tgz",
|
||||
"integrity": "sha512-eG4BDBGdAsUGN6URH1PixzZb0ngdapLivIk1meghS1uEueLvQ3aljSKrCt5x6sYb6mUk8eGtzTQFgsPmLavQcA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@ctrl/tinycolor": "^3.4.1",
|
||||
"@element-plus/icons-vue": "^2.3.2",
|
||||
"@floating-ui/dom": "^1.0.1",
|
||||
"@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
|
||||
"@types/lodash": "^4.17.20",
|
||||
"@types/lodash-es": "^4.17.12",
|
||||
"@vueuse/core": "^10.11.0",
|
||||
"async-validator": "^4.2.5",
|
||||
"dayjs": "^1.11.19",
|
||||
"lodash": "^4.17.21",
|
||||
"lodash-es": "^4.17.21",
|
||||
"lodash-unified": "^1.0.3",
|
||||
"memoize-one": "^6.0.0",
|
||||
"normalize-wheel-es": "^1.2.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^3.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/element-plus/node_modules/@types/web-bluetooth": {
|
||||
"version": "0.0.20",
|
||||
"resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
|
||||
"integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/element-plus/node_modules/@vueuse/core": {
|
||||
"version": "10.11.1",
|
||||
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.11.1.tgz",
|
||||
"integrity": "sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/web-bluetooth": "^0.0.20",
|
||||
"@vueuse/metadata": "10.11.1",
|
||||
"@vueuse/shared": "10.11.1",
|
||||
"vue-demi": ">=0.14.8"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
}
|
||||
},
|
||||
"node_modules/element-plus/node_modules/@vueuse/core/node_modules/vue-demi": {
|
||||
"version": "0.14.10",
|
||||
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
|
||||
"integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"vue-demi-fix": "bin/vue-demi-fix.js",
|
||||
"vue-demi-switch": "bin/vue-demi-switch.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@vue/composition-api": "^1.0.0-rc.1",
|
||||
"vue": "^3.0.0-0 || ^2.6.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/element-plus/node_modules/@vueuse/metadata": {
|
||||
"version": "10.11.1",
|
||||
"resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.11.1.tgz",
|
||||
"integrity": "sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
}
|
||||
},
|
||||
"node_modules/element-plus/node_modules/@vueuse/shared": {
|
||||
"version": "10.11.1",
|
||||
"resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.11.1.tgz",
|
||||
"integrity": "sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"vue-demi": ">=0.14.8"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
}
|
||||
},
|
||||
"node_modules/element-plus/node_modules/@vueuse/shared/node_modules/vue-demi": {
|
||||
"version": "0.14.10",
|
||||
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
|
||||
"integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"vue-demi-fix": "bin/vue-demi-fix.js",
|
||||
"vue-demi-switch": "bin/vue-demi-switch.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@vue/composition-api": "^1.0.0-rc.1",
|
||||
"vue": "^3.0.0-0 || ^2.6.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/embla-carousel": {
|
||||
"version": "8.6.0",
|
||||
"resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
|
||||
@@ -13465,26 +13281,6 @@
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/lodash-es": {
|
||||
"version": "4.17.21",
|
||||
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
|
||||
"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/lodash-unified": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/lodash-unified/-/lodash-unified-1.0.3.tgz",
|
||||
"integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@types/lodash-es": "*",
|
||||
"lodash": "*",
|
||||
"lodash-es": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/lodash.merge": {
|
||||
"version": "4.6.2",
|
||||
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
|
||||
@@ -13648,13 +13444,6 @@
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/memoize-one": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
|
||||
"integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/merge-stream": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
|
||||
@@ -14233,13 +14022,6 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/normalize-wheel-es": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
|
||||
"integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==",
|
||||
"dev": true,
|
||||
"license": "BSD-3-Clause"
|
||||
},
|
||||
"node_modules/noty": {
|
||||
"version": "3.2.0-beta-deprecated",
|
||||
"resolved": "https://registry.npmjs.org/noty/-/noty-3.2.0-beta-deprecated.tgz",
|
||||
|
||||
@@ -62,7 +62,6 @@
|
||||
"echarts": "^6.0.0",
|
||||
"electron": "^39.2.7",
|
||||
"electron-builder": "^26.4.0",
|
||||
"element-plus": "^2.13.1",
|
||||
"embla-carousel-vue": "^8.6.0",
|
||||
"esbuild-jest": "^0.5.0",
|
||||
"eslint": "^9.39.2",
|
||||
|
||||
@@ -1,6 +1,3 @@
|
||||
@import 'element-plus/dist/index.css';
|
||||
@import 'element-plus/theme-chalk/dark/css-vars.css';
|
||||
|
||||
@import 'animate.css/animate.min.css';
|
||||
@import 'noty/lib/noty.css';
|
||||
@import 'remixicon/fonts/remixicon.css';
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
import { createApp } from 'vue';
|
||||
|
||||
import ElementPlus from 'element-plus';
|
||||
|
||||
import {
|
||||
i18n,
|
||||
initComponents,
|
||||
@@ -20,7 +18,7 @@ await initPiniaPlugins();
|
||||
|
||||
const app = createApp(App);
|
||||
|
||||
app.use(pinia).use(i18n).use(ElementPlus);
|
||||
app.use(pinia).use(i18n);
|
||||
initComponents(app);
|
||||
initRouter(app);
|
||||
await initSentry(app);
|
||||
|
||||
@@ -1,241 +1,210 @@
|
||||
<template>
|
||||
<div class="x-menu-container nav-menu-container" :class="{ 'is-collapsed': isCollapsed }">
|
||||
<template v-if="navLayoutReady">
|
||||
<div class="nav-menu-body mt-5">
|
||||
<div v-if="pendingVRCXUpdate || pendingVRCXInstall" class="pending-update">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="hover:bg-transparent"
|
||||
style="font-size: 19px; height: 36px; margin: 10px"
|
||||
@click="showVRCXUpdateDialog">
|
||||
<span class="relative inline-flex items-center justify-center">
|
||||
<i class="ri-arrow-down-circle-line text-muted-foreground text-[20px]"></i>
|
||||
<span class="absolute top-0.5 -right-1 h-1.5 w-1.5 rounded-full bg-red-500"></span>
|
||||
</span>
|
||||
<span v-if="!isCollapsed" class="text-[13px] text-muted-foreground">{{
|
||||
t('nav_menu.update_available')
|
||||
}}</span>
|
||||
</Button>
|
||||
</div>
|
||||
<Sidebar side="left" variant="sidebar" collapsible="icon">
|
||||
<SidebarContent class="pt-4">
|
||||
<div v-if="navLayoutReady" class="px-2">
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem v-if="pendingVRCXUpdate || pendingVRCXInstall">
|
||||
<SidebarMenuButton
|
||||
:tooltip="t('nav_menu.update_available')"
|
||||
variant="default"
|
||||
@click="showVRCXUpdateDialog">
|
||||
<span class="relative inline-flex size-6 items-center justify-center">
|
||||
<i class="ri-arrow-down-circle-line text-muted-foreground text-[20px]"></i>
|
||||
<span class="absolute top-0.5 -right-1 h-1.5 w-1.5 rounded-full bg-red-500"></span>
|
||||
</span>
|
||||
<span v-show="!isCollapsed" class="text-[13px] text-muted-foreground">{{
|
||||
t('nav_menu.update_available')
|
||||
}}</span>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
</div>
|
||||
|
||||
<el-menu ref="navMenuRef" class="nav-menu" :collapse="isCollapsed" :collapse-transition="false">
|
||||
<template v-for="item in menuItems" :key="item.index">
|
||||
<el-menu-item
|
||||
v-if="!item.children?.length"
|
||||
:index="item.index"
|
||||
:class="{ notify: isNavItemNotified(item) }"
|
||||
@click="handleMenuItemClick(item)">
|
||||
<i :class="item.icon"></i>
|
||||
<template #title>
|
||||
<span>{{ item.titleIsCustom ? item.title : t(item.title || '') }}</span>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
<el-sub-menu v-else :index="item.index">
|
||||
<template #title>
|
||||
<div :class="{ notify: isNavItemNotified(item) }">
|
||||
<i :class="item.icon"></i>
|
||||
<SidebarGroup>
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenu v-if="navLayoutReady">
|
||||
<template v-for="item in menuItems" :key="item.index">
|
||||
<SidebarMenuItem v-if="!item.children?.length">
|
||||
<SidebarMenuButton
|
||||
:is-active="activeMenuIndex === item.index"
|
||||
:tooltip="item.titleIsCustom ? item.title : t(item.title || '')"
|
||||
:class="isNavItemNotified(item) ? 'notify' : undefined"
|
||||
@click="handleMenuItemClick(item)">
|
||||
<i
|
||||
:class="item.icon"
|
||||
class="inline-flex size-6 items-center justify-center text-[19px]" />
|
||||
<span v-show="!isCollapsed">{{
|
||||
item.titleIsCustom ? item.title : t(item.title || '')
|
||||
}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-menu-item
|
||||
v-for="entry in item.children"
|
||||
:key="entry.index"
|
||||
:index="entry.index"
|
||||
class="pl-9!"
|
||||
:class="{ notify: isEntryNotified(entry) }"
|
||||
@click="handleSubmenuClick(entry, item.index)">
|
||||
<i v-show="entry.icon" :class="entry.icon"></i>
|
||||
<template #title>
|
||||
<span>{{ t(entry.label) }}</span>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
</el-sub-menu>
|
||||
</template>
|
||||
</el-menu>
|
||||
</div>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
|
||||
<div class="nav-menu-container-bottom mb-4">
|
||||
<el-popover
|
||||
v-model:visible="supportMenuVisible"
|
||||
placement="right"
|
||||
trigger="click"
|
||||
popper-style="padding:4px;border-radius:8px;"
|
||||
:offset="-10"
|
||||
:show-arrow="false"
|
||||
:width="200"
|
||||
:hide-after="0">
|
||||
<div class="nav-menu-support nav-menu-settings">
|
||||
<div class="nav-menu-support__section">
|
||||
<button type="button" class="nav-menu-settings__item" @click="showChangeLogDialog">
|
||||
<span>{{ t('nav_menu.whats_new') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<Separator />
|
||||
<div class="nav-menu-support__section">
|
||||
<span class="nav-menu-support__title">{{ t('nav_menu.resources') }}</span>
|
||||
<button type="button" class="nav-menu-settings__item" @click="handleSupportLink('wiki')">
|
||||
<span>{{ t('nav_menu.wiki') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<Separator />
|
||||
<div class="nav-menu-support__section">
|
||||
<span class="nav-menu-support__title">{{ t('nav_menu.get_help') }}</span>
|
||||
<button type="button" class="nav-menu-settings__item" @click="handleSupportLink('github')">
|
||||
<span>{{ t('nav_menu.github') }}</span>
|
||||
</button>
|
||||
<button type="button" class="nav-menu-settings__item" @click="handleSupportLink('discord')">
|
||||
<span>{{ t('nav_menu.discord') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<template #reference>
|
||||
<div>
|
||||
<TooltipWrapper
|
||||
:delay-duration="150"
|
||||
:content="t('nav_tooltip.help_support')"
|
||||
side="right"
|
||||
:disabled="!isCollapsed">
|
||||
<div class="bottom-button">
|
||||
<i class="ri-question-line"></i>
|
||||
<span v-show="!isCollapsed" class="bottom-button__label">{{
|
||||
t('nav_tooltip.help_support')
|
||||
}}</span>
|
||||
</div>
|
||||
</TooltipWrapper>
|
||||
</div>
|
||||
</template>
|
||||
</el-popover>
|
||||
|
||||
<el-popover
|
||||
v-model:visible="settingsMenuVisible"
|
||||
placement="right"
|
||||
trigger="click"
|
||||
popper-style="padding:4px;border-radius:8px;"
|
||||
:offset="6"
|
||||
:show-arrow="false"
|
||||
:width="200"
|
||||
:hide-after="0">
|
||||
<div class="nav-menu-settings">
|
||||
<div class="nav-menu-settings__header">
|
||||
<img class="nav-menu-settings__logo" :src="vrcxLogo" alt="VRCX" @click="openGithub" />
|
||||
<div class="nav-menu-settings__meta">
|
||||
<span class="nav-menu-settings__title" @click="openGithub"
|
||||
>VRCX
|
||||
<i class="ri-heart-3-fill nav-menu-settings__heart"></i>
|
||||
</span>
|
||||
<span class="nav-menu-settings__version">{{ version }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<Separator />
|
||||
<button type="button" class="nav-menu-settings__item" @click="handleSettingsClick">
|
||||
<span>{{ t('nav_tooltip.settings') }}</span>
|
||||
</button>
|
||||
<button type="button" class="nav-menu-settings__item" @click="handleOpenCustomNavDialog">
|
||||
<span>{{ t('nav_menu.custom_nav.header') }}</span>
|
||||
</button>
|
||||
<el-popover
|
||||
v-model:visible="themeMenuVisible"
|
||||
placement="right-start"
|
||||
trigger="hover"
|
||||
popper-style="padding:4px;border-radius:8px;"
|
||||
:offset="8"
|
||||
:width="200"
|
||||
:hide-after="0">
|
||||
<div class="nav-menu-theme">
|
||||
<button
|
||||
v-for="theme in themes"
|
||||
:key="theme"
|
||||
type="button"
|
||||
class="nav-menu-theme__item"
|
||||
:class="{ 'is-active': themeMode === theme }"
|
||||
@click="handleThemeSelect(theme)">
|
||||
<span class="nav-menu-theme__label">{{ themeDisplayName(theme) }}</span>
|
||||
<span v-if="themeMode === theme" class="nav-menu-theme__check">✓</span>
|
||||
</button>
|
||||
|
||||
<Separator />
|
||||
|
||||
<el-popover
|
||||
v-model:visible="themeColorMenuVisible"
|
||||
placement="right-start"
|
||||
trigger="hover"
|
||||
popper-style="padding:4px;border-radius:8px;"
|
||||
:offset="8"
|
||||
:width="200"
|
||||
:show-arrow="false"
|
||||
:hide-after="0"
|
||||
:teleported="false">
|
||||
<div class="nav-menu-theme nav-menu-theme--colors">
|
||||
<button
|
||||
v-for="color in colorFamilies"
|
||||
:key="color.name"
|
||||
type="button"
|
||||
class="nav-menu-theme__item"
|
||||
:class="{ 'is-active': currentPrimary === color.base }"
|
||||
:disabled="isApplyingPrimaryColor"
|
||||
@click="handleThemeColorSelect(color)">
|
||||
<span class="nav-menu-theme__label nav-menu-theme__label--swatch">
|
||||
<span
|
||||
class="nav-menu-theme__swatch"
|
||||
:style="{ backgroundColor: color.base }"></span>
|
||||
<span class="nav-menu-theme__label-text">{{ color.name }}</span>
|
||||
</span>
|
||||
<span v-if="currentPrimary === color.base" class="nav-menu-theme__check">
|
||||
✓
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<template #reference>
|
||||
<button type="button" class="nav-menu-theme__item" @click.prevent>
|
||||
<span class="nav-menu-theme__label">{{
|
||||
t('view.settings.appearance.theme_color.header')
|
||||
}}</span>
|
||||
<span class="nav-menu-settings__arrow">›</span>
|
||||
</button>
|
||||
<SidebarMenuItem v-else>
|
||||
<Collapsible
|
||||
class="group/collapsible"
|
||||
:default-open="activeMenuIndex && item.children?.some((e) => e.index === activeMenuIndex)">
|
||||
<template #default="{ open }">
|
||||
<CollapsibleTrigger as-child>
|
||||
<SidebarMenuButton
|
||||
:is-active="item.children?.some((e) => e.index === activeMenuIndex)"
|
||||
:tooltip="item.titleIsCustom ? item.title : t(item.title || '')"
|
||||
:class="isNavItemNotified(item) ? 'notify' : undefined">
|
||||
<i
|
||||
:class="item.icon"
|
||||
class="inline-flex size-6 items-center justify-center text-[19px]" />
|
||||
<span v-show="!isCollapsed">{{
|
||||
item.titleIsCustom ? item.title : t(item.title || '')
|
||||
}}</span>
|
||||
<ChevronRight
|
||||
v-show="!isCollapsed"
|
||||
class="ml-auto transition-transform"
|
||||
:class="open ? 'rotate-90' : ''" />
|
||||
</SidebarMenuButton>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<SidebarMenuSub>
|
||||
<SidebarMenuSubItem
|
||||
v-for="entry in item.children"
|
||||
:key="entry.index">
|
||||
<SidebarMenuSubButton
|
||||
:is-active="activeMenuIndex === entry.index"
|
||||
@click="handleSubmenuClick(entry, item.index)">
|
||||
<i
|
||||
v-if="entry.icon"
|
||||
:class="entry.icon"
|
||||
class="inline-flex size-5 items-center justify-center text-[16px]" />
|
||||
<span>{{ t(entry.label) }}</span>
|
||||
</SidebarMenuSubButton>
|
||||
</SidebarMenuSubItem>
|
||||
</SidebarMenuSub>
|
||||
</CollapsibleContent>
|
||||
</template>
|
||||
</el-popover>
|
||||
</Collapsible>
|
||||
</SidebarMenuItem>
|
||||
</template>
|
||||
</SidebarMenu>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
</SidebarContent>
|
||||
|
||||
<SidebarFooter class="p-2">
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child>
|
||||
<SidebarMenuButton :tooltip="t('nav_tooltip.help_support')">
|
||||
<i class="ri-question-line inline-flex size-6 items-center justify-center text-[19px]" />
|
||||
<span v-show="!isCollapsed">{{ t('nav_tooltip.help_support') }}</span>
|
||||
</SidebarMenuButton>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent side="right" align="start" class="w-56">
|
||||
<DropdownMenuItem @click="showChangeLogDialog">
|
||||
<span>{{ t('nav_menu.whats_new') }}</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuLabel>{{ t('nav_menu.resources') }}</DropdownMenuLabel>
|
||||
<DropdownMenuItem @click="handleSupportLink('wiki')">
|
||||
<span>{{ t('nav_menu.wiki') }}</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuLabel>{{ t('nav_menu.get_help') }}</DropdownMenuLabel>
|
||||
<DropdownMenuItem @click="handleSupportLink('github')">
|
||||
<span>{{ t('nav_menu.github') }}</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem @click="handleSupportLink('discord')">
|
||||
<span>{{ t('nav_menu.discord') }}</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</SidebarMenuItem>
|
||||
|
||||
<SidebarMenuItem>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child>
|
||||
<SidebarMenuButton :tooltip="t('nav_tooltip.manage')">
|
||||
<i class="ri-settings-3-line inline-flex size-6 items-center justify-center text-[19px]" />
|
||||
<span v-show="!isCollapsed">{{ t('nav_tooltip.manage') }}</span>
|
||||
</SidebarMenuButton>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent side="right" align="start" class="w-64">
|
||||
<div class="flex items-center gap-2 px-2 py-1.5">
|
||||
<img class="h-6 w-6 cursor-pointer" :src="vrcxLogo" alt="VRCX" @click="openGithub" />
|
||||
<div class="flex min-w-0 flex-col">
|
||||
<button
|
||||
type="button"
|
||||
class="text-left text-sm font-medium truncate"
|
||||
@click="openGithub">
|
||||
VRCX
|
||||
</button>
|
||||
<span class="text-xs text-muted-foreground">{{ version }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<template #reference>
|
||||
<button type="button" class="nav-menu-settings__item" @click.prevent>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem @click="handleSettingsClick">
|
||||
<span>{{ t('nav_tooltip.settings') }}</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem @click="handleOpenCustomNavDialog">
|
||||
<span>{{ t('nav_menu.custom_nav.header') }}</span>
|
||||
</DropdownMenuItem>
|
||||
|
||||
<DropdownMenuSub>
|
||||
<DropdownMenuSubTrigger>
|
||||
<span>{{ t('view.settings.appearance.appearance.theme_mode') }}</span>
|
||||
<span class="nav-menu-settings__arrow">›</span>
|
||||
</button>
|
||||
</template>
|
||||
</el-popover>
|
||||
<button
|
||||
type="button"
|
||||
class="nav-menu-settings__item nav-menu-settings__item--danger"
|
||||
@click="handleLogoutClick">
|
||||
<span>{{ t('dialog.user.actions.logout') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<template #reference>
|
||||
<div class="bottom-button">
|
||||
<i class="ri-settings-3-line"></i>
|
||||
<span v-show="!isCollapsed" class="bottom-button__label">{{
|
||||
t('nav_tooltip.manage')
|
||||
}}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-popover>
|
||||
<TooltipWrapper
|
||||
:delay-duration="150"
|
||||
:content="t('nav_tooltip.expand_menu')"
|
||||
:disabled="!isCollapsed"
|
||||
side="right">
|
||||
<div class="bottom-button" @click="toggleNavCollapse">
|
||||
<i class="ri-side-bar-line"></i>
|
||||
<span v-show="!isCollapsed" class="bottom-button__label">{{
|
||||
t('nav_tooltip.collapse_menu')
|
||||
}}</span>
|
||||
</div>
|
||||
</TooltipWrapper>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</DropdownMenuSubTrigger>
|
||||
<DropdownMenuSubContent side="right" align="start" class="w-72">
|
||||
<DropdownMenuItem
|
||||
v-for="theme in themes"
|
||||
:key="theme"
|
||||
:class="themeMode === theme ? 'font-medium' : undefined"
|
||||
@click="handleThemeSelect(theme)">
|
||||
<span class="flex-1">{{ themeDisplayName(theme) }}</span>
|
||||
<span v-if="themeMode === theme" class="text-muted-foreground">✓</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
|
||||
<DropdownMenuSub>
|
||||
<DropdownMenuSubTrigger>
|
||||
<span>{{ t('view.settings.appearance.theme_color.header') }}</span>
|
||||
</DropdownMenuSubTrigger>
|
||||
<DropdownMenuSubContent side="right" align="start" class="w-72 max-h-80 overflow-auto">
|
||||
<DropdownMenuItem
|
||||
v-for="color in colorFamilies"
|
||||
:key="color.name"
|
||||
:disabled="isApplyingPrimaryColor"
|
||||
@click="handleThemeColorSelect(color)">
|
||||
<span class="flex items-center gap-2 min-w-0 flex-1">
|
||||
<span class="h-3 w-3 shrink-0 rounded-sm" :style="{ backgroundColor: color.base }" />
|
||||
<span class="truncate">{{ color.name }}</span>
|
||||
</span>
|
||||
<span v-if="currentPrimary === color.base" class="text-muted-foreground">✓</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuSubContent>
|
||||
</DropdownMenuSub>
|
||||
</DropdownMenuSubContent>
|
||||
</DropdownMenuSub>
|
||||
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem variant="destructive" @click="handleLogoutClick">
|
||||
<span>{{ t('dialog.user.actions.logout') }}</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</SidebarMenuItem>
|
||||
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton
|
||||
:tooltip="isCollapsed ? t('nav_tooltip.expand_menu') : t('nav_tooltip.collapse_menu')"
|
||||
@click="toggleNavCollapse">
|
||||
<i class="ri-side-bar-line inline-flex size-6 items-center justify-center text-[19px]" />
|
||||
<span v-show="!isCollapsed">{{ t('nav_tooltip.collapse_menu') }}</span>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
</SidebarFooter>
|
||||
|
||||
<SidebarRail />
|
||||
</Sidebar>
|
||||
|
||||
<CustomNavDialog
|
||||
v-model:visible="customNavDialogVisible"
|
||||
:layout="navLayout"
|
||||
@@ -244,15 +213,41 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, defineAsyncComponent, onMounted, ref, watch } from 'vue';
|
||||
import { ElMenu, ElMenuItem, ElPopover, ElSubMenu } from 'element-plus';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { dayjs } from 'element-plus';
|
||||
import { computed, defineAsyncComponent, onMounted, ref } from 'vue';
|
||||
import dayjs from 'dayjs';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import { ChevronRight } from 'lucide-vue-next';
|
||||
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubContent,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuTrigger
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import {
|
||||
Sidebar,
|
||||
SidebarContent,
|
||||
SidebarFooter,
|
||||
SidebarGroup,
|
||||
SidebarGroupContent,
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
SidebarMenuSub,
|
||||
SidebarMenuSubButton,
|
||||
SidebarMenuSubItem,
|
||||
SidebarRail
|
||||
} from '@/components/ui/sidebar';
|
||||
|
||||
import {
|
||||
useAppearanceSettingsStore,
|
||||
useAuthStore,
|
||||
@@ -314,11 +309,6 @@
|
||||
const { logout } = useAuthStore();
|
||||
const appearanceSettingsStore = useAppearanceSettingsStore();
|
||||
const { themeMode, isNavCollapsed: isCollapsed } = storeToRefs(appearanceSettingsStore);
|
||||
const settingsMenuVisible = ref(false);
|
||||
const themeMenuVisible = ref(false);
|
||||
const themeColorMenuVisible = ref(false);
|
||||
const supportMenuVisible = ref(false);
|
||||
const navMenuRef = ref(null);
|
||||
const navLayout = ref([]);
|
||||
const navLayoutReady = ref(false);
|
||||
|
||||
@@ -407,16 +397,6 @@
|
||||
selectPaletteColor
|
||||
} = useThemePrimaryColor();
|
||||
|
||||
watch(
|
||||
() => activeMenuIndex.value,
|
||||
(value) => {
|
||||
if (value) {
|
||||
navMenuRef.value?.updateActiveIndex(value);
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
watch(
|
||||
() => locale.value,
|
||||
() => {
|
||||
@@ -504,28 +484,19 @@
|
||||
};
|
||||
|
||||
const handleSettingsClick = () => {
|
||||
themeMenuVisible.value = false;
|
||||
supportMenuVisible.value = false;
|
||||
settingsMenuVisible.value = false;
|
||||
router.push({ name: 'settings' });
|
||||
};
|
||||
|
||||
const handleLogoutClick = () => {
|
||||
settingsMenuVisible.value = false;
|
||||
logout();
|
||||
};
|
||||
|
||||
const handleThemeSelect = (theme) => {
|
||||
themeMenuVisible.value = false;
|
||||
settingsMenuVisible.value = false;
|
||||
appearanceSettingsStore.setThemeMode(theme);
|
||||
};
|
||||
|
||||
const handleThemeColorSelect = async (colorFamily) => {
|
||||
await selectPaletteColor(colorFamily);
|
||||
themeColorMenuVisible.value = false;
|
||||
themeMenuVisible.value = false;
|
||||
settingsMenuVisible.value = false;
|
||||
};
|
||||
|
||||
const openGithub = () => {
|
||||
@@ -548,9 +519,6 @@
|
||||
};
|
||||
|
||||
const handleOpenCustomNavDialog = () => {
|
||||
themeMenuVisible.value = false;
|
||||
supportMenuVisible.value = false;
|
||||
settingsMenuVisible.value = false;
|
||||
customNavDialogVisible.value = true;
|
||||
};
|
||||
|
||||
@@ -602,7 +570,6 @@
|
||||
};
|
||||
|
||||
const handleSupportLink = (id) => {
|
||||
supportMenuVisible.value = false;
|
||||
const target = links[id];
|
||||
if (target) {
|
||||
openExternalLink(target);
|
||||
@@ -639,39 +606,23 @@
|
||||
return false;
|
||||
};
|
||||
|
||||
const closeNavFlyouts = () => {
|
||||
settingsMenuVisible.value = false;
|
||||
supportMenuVisible.value = false;
|
||||
themeMenuVisible.value = false;
|
||||
themeColorMenuVisible.value = false;
|
||||
};
|
||||
|
||||
const triggerNavAction = (entry, navIndex = entry?.index) => {
|
||||
if (!entry) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (entry.action === 'direct-access') {
|
||||
closeNavFlyouts();
|
||||
directAccessPaste();
|
||||
if (navIndex) {
|
||||
navMenuRef.value?.updateActiveIndex(navIndex);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (entry.routeName) {
|
||||
handleRouteChange(entry.routeName, navIndex);
|
||||
closeNavFlyouts();
|
||||
return;
|
||||
}
|
||||
|
||||
if (entry.path) {
|
||||
router.push(entry.path);
|
||||
if (navIndex) {
|
||||
navMenuRef.value?.updateActiveIndex(navIndex);
|
||||
}
|
||||
closeNavFlyouts();
|
||||
}
|
||||
};
|
||||
|
||||
@@ -680,26 +631,8 @@
|
||||
return;
|
||||
}
|
||||
router.push({ name: routeName });
|
||||
if (navIndex) {
|
||||
navMenuRef.value?.updateActiveIndex(navIndex);
|
||||
}
|
||||
};
|
||||
|
||||
watch(settingsMenuVisible, (visible) => {
|
||||
if (visible) {
|
||||
supportMenuVisible.value = false;
|
||||
} else {
|
||||
themeMenuVisible.value = false;
|
||||
themeColorMenuVisible.value = false;
|
||||
}
|
||||
});
|
||||
|
||||
watch(supportMenuVisible, (visible) => {
|
||||
if (visible) {
|
||||
settingsMenuVisible.value = false;
|
||||
}
|
||||
});
|
||||
|
||||
function getFirstNavRoute(layout) {
|
||||
for (const entry of layout) {
|
||||
if (entry.type === 'item') {
|
||||
@@ -759,261 +692,6 @@
|
||||
min-width: 64px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
justify-content: flex-start;
|
||||
background-color: var(--el-bg-color-page);
|
||||
box-shadow: none;
|
||||
backdrop-filter: blur(14px) saturate(130%);
|
||||
}
|
||||
|
||||
.nav-menu-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
overflow: hidden auto;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-menu :deep(.el-menu-item),
|
||||
.nav-menu :deep(.el-sub-menu__title) {
|
||||
height: 46px;
|
||||
line-height: 46px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 10px;
|
||||
font-size: 13px;
|
||||
padding: 0 20px !important;
|
||||
}
|
||||
|
||||
.nav-menu :deep(.el-menu-item i[class*='ri-']),
|
||||
.nav-menu :deep(.el-sub-menu__title i[class*='ri-']) {
|
||||
font-size: 19px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nav-menu :deep(.el-sub-menu__title > div) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.nav-menu :deep(.el-sub-menu__icon-arrow) {
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
.bottom-button {
|
||||
font-size: 19px;
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 10px;
|
||||
padding: 0 20px;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
& > span {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-button i {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.bottom-button__label {
|
||||
font-size: 13px;
|
||||
color: var(--el-text-color-regular);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.bottom-button:hover {
|
||||
background-color: var(--el-menu-hover-bg-color);
|
||||
transition:
|
||||
border-color var(--el-transition-duration),
|
||||
background-color var(--el-transition-duration),
|
||||
color var(--el-transition-duration);
|
||||
}
|
||||
|
||||
.nav-menu-container-bottom {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.nav-menu-container.is-collapsed .nav-menu :deep(.el-menu-item),
|
||||
.nav-menu-container.is-collapsed .nav-menu :deep(.el-sub-menu__title) {
|
||||
column-gap: 0;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav-menu-container.is-collapsed {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-menu-container.is-collapsed .nav-menu :deep(.el-sub-menu__title > div) {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.nav-menu-container.is-collapsed .bottom-button {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
gap: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:deep(.el-menu-item .el-menu-tooltip__trigger) {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
:deep(.el-button.is-text:not(.is-disabled):hover) {
|
||||
background-color: var(--el-menu-hover-bg-color);
|
||||
}
|
||||
|
||||
.nav-menu-settings {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
.nav-menu-settings__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 8px 10px;
|
||||
.nav-menu-settings__logo {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
object-fit: contain;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav-menu-settings__meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 12px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.nav-menu-settings__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: var(--el-text-color-regular);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav-menu-settings__heart {
|
||||
font-size: 14px;
|
||||
color: var(--el-color-success);
|
||||
}
|
||||
|
||||
.nav-menu-settings__version {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
.nav-menu-settings__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: 8px 12px;
|
||||
width: 100%;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--el-text-color-regular);
|
||||
font-size: 13px;
|
||||
border-radius: 4px;
|
||||
transition: background-color var(--el-transition-duration);
|
||||
cursor: pointer;
|
||||
.nav-menu-settings__arrow {
|
||||
margin-left: auto;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.nav-menu-settings__item:hover {
|
||||
background-color: var(--el-menu-hover-bg-color);
|
||||
}
|
||||
|
||||
.nav-menu-settings__item--danger {
|
||||
color: var(--el-color-danger);
|
||||
}
|
||||
|
||||
.nav-menu-settings__item--danger:hover {
|
||||
background-color: color-mix(in oklch, var(--el-color-danger) 18%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-menu-support {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
|
||||
.nav-menu-support__section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.nav-menu-support__title {
|
||||
padding: 0 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--el-text-color-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-menu-theme {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
.nav-menu-theme__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 6px 10px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-size: 13px;
|
||||
border-radius: 6px;
|
||||
transition: background-color var(--el-transition-duration);
|
||||
cursor: pointer;
|
||||
.nav-menu-theme__check {
|
||||
font-size: 12px;
|
||||
color: var(--el-color-primary);
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.nav-menu-theme__item:hover,
|
||||
.nav-menu-theme__item.is-active {
|
||||
background-color: var(--el-menu-hover-bg-color);
|
||||
}
|
||||
|
||||
.nav-menu-theme__label--swatch {
|
||||
display: inline-flex;
|
||||
|
||||
@@ -22,6 +22,14 @@
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
width: {
|
||||
type: [String, Number],
|
||||
default: undefined
|
||||
},
|
||||
widthIcon: {
|
||||
type: [String, Number],
|
||||
default: undefined
|
||||
},
|
||||
class: {
|
||||
type: [String, Array, Object],
|
||||
default: undefined
|
||||
@@ -33,10 +41,18 @@
|
||||
const isMobile = useMediaQuery('(max-width: 768px)');
|
||||
const openMobile = ref(false);
|
||||
|
||||
const open = useVModel(props, 'open', emits, {
|
||||
defaultValue: props.defaultOpen ?? false,
|
||||
passive: props.open === undefined
|
||||
});
|
||||
let open;
|
||||
if (props.open === undefined) {
|
||||
open = useVModel(props, 'open', emits, {
|
||||
defaultValue: props.defaultOpen ?? false,
|
||||
passive: true
|
||||
});
|
||||
} else {
|
||||
open = useVModel(props, 'open', emits, {
|
||||
defaultValue: props.defaultOpen ?? false,
|
||||
passive: false
|
||||
});
|
||||
}
|
||||
|
||||
function setOpen(value) {
|
||||
open.value = value; // emits('update:open', value)
|
||||
@@ -65,6 +81,23 @@
|
||||
// This makes it easier to style the sidebar with Tailwind classes.
|
||||
const state = computed(() => (open.value ? 'expanded' : 'collapsed'));
|
||||
|
||||
const normalizeCssSize = (value) => {
|
||||
if (value === null || value === undefined) {
|
||||
return undefined;
|
||||
}
|
||||
if (typeof value === 'number' && Number.isFinite(value)) {
|
||||
return `${value}px`;
|
||||
}
|
||||
if (typeof value === 'string') {
|
||||
const trimmed = value.trim();
|
||||
return trimmed || undefined;
|
||||
}
|
||||
return undefined;
|
||||
};
|
||||
|
||||
const cssSidebarWidth = computed(() => normalizeCssSize(props.width) ?? SIDEBAR_WIDTH);
|
||||
const cssSidebarWidthIcon = computed(() => normalizeCssSize(props.widthIcon) ?? SIDEBAR_WIDTH_ICON);
|
||||
|
||||
provideSidebarContext({
|
||||
state,
|
||||
open,
|
||||
@@ -81,8 +114,8 @@
|
||||
<div
|
||||
data-slot="sidebar-wrapper"
|
||||
:style="{
|
||||
'--sidebar-width': SIDEBAR_WIDTH,
|
||||
'--sidebar-width-icon': SIDEBAR_WIDTH_ICON
|
||||
'--sidebar-width': cssSidebarWidth,
|
||||
'--sidebar-width-icon': cssSidebarWidthIcon
|
||||
}"
|
||||
:class="cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', props.class)"
|
||||
v-bind="$attrs">
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
|
||||
import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
|
||||
import { useAppearanceSettingsStore } from '../stores';
|
||||
@@ -6,16 +6,11 @@ import { useAppearanceSettingsStore } from '../stores';
|
||||
import configRepository from '../service/config';
|
||||
|
||||
export function useAuthenticatedLayoutResizable() {
|
||||
const navCollapsedPx = 64;
|
||||
const navDefaultPx = 240;
|
||||
const navMinPx = 180;
|
||||
const navMaxPx = 300;
|
||||
const asideMaxPx = 500;
|
||||
|
||||
const appearanceStore = useAppearanceSettingsStore();
|
||||
const { setAsideWidth, setNavWidth } = appearanceStore;
|
||||
const { asideWidth, isNavCollapsed, isSideBarTabShow, navWidth } =
|
||||
storeToRefs(appearanceStore);
|
||||
const { setAsideWidth } = appearanceStore;
|
||||
const { asideWidth, isSideBarTabShow, isNavCollapsed } = storeToRefs(appearanceStore);
|
||||
|
||||
const fallbackWidth =
|
||||
typeof window !== 'undefined' && window.innerWidth
|
||||
@@ -23,9 +18,7 @@ export function useAuthenticatedLayoutResizable() {
|
||||
: 1200;
|
||||
|
||||
const panelGroupRef = ref(null);
|
||||
const navPanelRef = ref(null);
|
||||
const asidePanelRef = ref(null);
|
||||
const navExpandedSize = ref(null);
|
||||
const groupWidth = ref(fallbackWidth);
|
||||
const draggingCount = ref(0);
|
||||
let resizeObserver = null;
|
||||
@@ -70,27 +63,7 @@ export function useAuthenticatedLayoutResizable() {
|
||||
const percentToPx = (percent, groupWidth) => (percent / 100) * groupWidth;
|
||||
|
||||
const isAsideCollapsed = (layout) =>
|
||||
Array.isArray(layout) &&
|
||||
layout.length >= 3 &&
|
||||
layout[layout.length - 1] <= 1;
|
||||
|
||||
const navCollapsedSize = computed(() =>
|
||||
pxToPercent(navCollapsedPx, groupWidth.value)
|
||||
);
|
||||
const navExpandedPx = computed(() => navWidth.value || navDefaultPx);
|
||||
|
||||
const navDefaultSize = computed(() =>
|
||||
isNavCollapsed.value
|
||||
? navCollapsedSize.value
|
||||
: pxToPercent(navExpandedPx.value)
|
||||
);
|
||||
|
||||
const navMinSize = computed(() =>
|
||||
isNavCollapsed.value ? navCollapsedSize.value : pxToPercent(navMinPx)
|
||||
);
|
||||
const navMaxSize = computed(() =>
|
||||
isNavCollapsed.value ? navCollapsedSize.value : pxToPercent(navMaxPx)
|
||||
);
|
||||
Array.isArray(layout) && layout.length >= 2 && layout[layout.length - 1] <= 1;
|
||||
|
||||
const asideDefaultSize = computed(() =>
|
||||
pxToPercent(asideWidth.value, undefined, 0)
|
||||
@@ -98,14 +71,11 @@ export function useAuthenticatedLayoutResizable() {
|
||||
const asideMaxSize = computed(() => pxToPercent(asideMaxPx, undefined, 0));
|
||||
|
||||
const mainDefaultSize = computed(
|
||||
() =>
|
||||
100 -
|
||||
navDefaultSize.value -
|
||||
(isSideBarTabShow.value ? asideDefaultSize.value : 0)
|
||||
() => 100 - (isSideBarTabShow.value ? asideDefaultSize.value : 0)
|
||||
);
|
||||
|
||||
const handleLayout = (sizes) => {
|
||||
if (!Array.isArray(sizes) || sizes.length < 2) {
|
||||
if (!Array.isArray(sizes) || sizes.length < 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -113,22 +83,16 @@ export function useAuthenticatedLayoutResizable() {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isSideBarTabShow.value || sizes.length < 2) {
|
||||
return;
|
||||
}
|
||||
|
||||
const rawWidth = getGroupWidthRaw();
|
||||
if (!Number.isFinite(rawWidth) || rawWidth <= 0) {
|
||||
return;
|
||||
}
|
||||
const width = rawWidth;
|
||||
|
||||
const navSize = sizes[0];
|
||||
if (!isNavCollapsed.value && Number.isFinite(navSize) && navSize > 0) {
|
||||
navExpandedSize.value = navSize;
|
||||
setNavWidth(Math.round(percentToPx(navSize, width)));
|
||||
}
|
||||
|
||||
if (!isSideBarTabShow.value || sizes.length < 3) {
|
||||
return;
|
||||
}
|
||||
|
||||
const asideSize = sizes[sizes.length - 1];
|
||||
if (!Number.isFinite(asideSize)) {
|
||||
return;
|
||||
@@ -142,9 +106,6 @@ export function useAuthenticatedLayoutResizable() {
|
||||
setAsideWidth(Math.round(percentToPx(asideSize, width)));
|
||||
};
|
||||
|
||||
const resizeNavPanel = (targetSize) =>
|
||||
navPanelRef.value?.resize?.(targetSize);
|
||||
|
||||
const resizeAsidePanel = (targetSize) =>
|
||||
asidePanelRef.value?.resize?.(targetSize);
|
||||
|
||||
@@ -152,14 +113,6 @@ export function useAuthenticatedLayoutResizable() {
|
||||
const width = getGroupWidth();
|
||||
groupWidth.value = width;
|
||||
|
||||
if (isNavCollapsed.value) {
|
||||
resizeNavPanel(navCollapsedSize.value);
|
||||
} else {
|
||||
const targetSize = pxToPercent(navExpandedPx.value, width);
|
||||
navExpandedSize.value = targetSize;
|
||||
resizeNavPanel(targetSize);
|
||||
}
|
||||
|
||||
if (!isSideBarTabShow.value) {
|
||||
return;
|
||||
}
|
||||
@@ -194,27 +147,9 @@ export function useAuthenticatedLayoutResizable() {
|
||||
}
|
||||
};
|
||||
|
||||
watch(isNavCollapsed, async (collapsed) => {
|
||||
await nextTick();
|
||||
if (collapsed) {
|
||||
resizeNavPanel(navCollapsedSize.value);
|
||||
return;
|
||||
}
|
||||
const targetSize =
|
||||
navExpandedSize.value ?? pxToPercent(navExpandedPx.value);
|
||||
resizeNavPanel(targetSize);
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
await nextTick();
|
||||
updateGroupWidth();
|
||||
let panelSize = null;
|
||||
panelSize = navPanelRef.value?.getSize?.() ?? null;
|
||||
|
||||
navExpandedSize.value = panelSize ?? navDefaultSize.value;
|
||||
if (isNavCollapsed.value) {
|
||||
resizeNavPanel(navCollapsedSize.value);
|
||||
}
|
||||
|
||||
const element = panelGroupRef.value?.$el ?? panelGroupRef.value;
|
||||
if (element && typeof ResizeObserver !== 'undefined') {
|
||||
@@ -232,11 +167,7 @@ export function useAuthenticatedLayoutResizable() {
|
||||
|
||||
return {
|
||||
panelGroupRef,
|
||||
navPanelRef,
|
||||
asidePanelRef,
|
||||
navDefaultSize,
|
||||
navMinSize,
|
||||
navMaxSize,
|
||||
asideDefaultSize,
|
||||
asideMaxSize,
|
||||
mainDefaultSize,
|
||||
|
||||
@@ -1,46 +1,56 @@
|
||||
<template>
|
||||
<template v-if="watchState.isLoggedIn">
|
||||
<ResizablePanelGroup
|
||||
ref="panelGroupRef"
|
||||
direction="horizontal"
|
||||
class="group/main-layout flex-1 h-full min-w-0"
|
||||
@layout="handleLayout">
|
||||
<template #default="{ layout }">
|
||||
<ResizablePanel ref="navPanelRef" :min-size="navMinSize" :max-size="navMaxSize" :order="1">
|
||||
<NavMenu></NavMenu>
|
||||
</ResizablePanel>
|
||||
<ResizableHandle
|
||||
:disabled="isNavCollapsed"
|
||||
class="opacity-0"
|
||||
@dragging="setIsDragging"></ResizableHandle>
|
||||
<ResizablePanel :default-size="mainDefaultSize" :order="2">
|
||||
<RouterView v-slot="{ Component }">
|
||||
<KeepAlive exclude="Charts">
|
||||
<component :is="Component" />
|
||||
</KeepAlive>
|
||||
</RouterView>
|
||||
</ResizablePanel>
|
||||
<SidebarProvider
|
||||
:open="sidebarOpen"
|
||||
:width="navWidth"
|
||||
width-icon="64"
|
||||
class="relative flex-1 h-full min-w-0"
|
||||
@update:open="handleSidebarOpenChange">
|
||||
<NavMenu />
|
||||
|
||||
<template v-if="isSideBarTabShow">
|
||||
<ResizableHandle
|
||||
with-handle
|
||||
:class="[
|
||||
isAsideCollapsed(layout) ? 'opacity-100' : 'opacity-0',
|
||||
'z-20 [&>div]:-translate-x-1/2'
|
||||
]"
|
||||
@dragging="setIsDragging"></ResizableHandle>
|
||||
<ResizablePanel
|
||||
ref="asidePanelRef"
|
||||
:default-size="asideDefaultSize"
|
||||
:max-size="asideMaxSize"
|
||||
:collapsed-size="0"
|
||||
collapsible
|
||||
:order="3">
|
||||
<Sidebar></Sidebar>
|
||||
</ResizablePanel>
|
||||
</template>
|
||||
</template>
|
||||
</ResizablePanelGroup>
|
||||
<div
|
||||
v-show="sidebarOpen"
|
||||
class="absolute top-0 bottom-0 z-30 w-1 cursor-col-resize select-none hover:bg-border/60"
|
||||
:style="{ left: 'var(--sidebar-width)' }"
|
||||
@pointerdown.prevent="startNavResize" />
|
||||
|
||||
<SidebarInset class="min-w-0">
|
||||
<ResizablePanelGroup
|
||||
ref="panelGroupRef"
|
||||
direction="horizontal"
|
||||
class="group/main-layout flex-1 h-full min-w-0"
|
||||
@layout="handleLayout">
|
||||
<template #default="{ layout }">
|
||||
<ResizablePanel :default-size="mainDefaultSize" :order="1">
|
||||
<RouterView v-slot="{ Component }">
|
||||
<KeepAlive exclude="Charts">
|
||||
<component :is="Component" />
|
||||
</KeepAlive>
|
||||
</RouterView>
|
||||
</ResizablePanel>
|
||||
|
||||
<template v-if="isSideBarTabShow">
|
||||
<ResizableHandle
|
||||
with-handle
|
||||
:class="[
|
||||
isAsideCollapsed(layout) ? 'opacity-100' : 'opacity-0',
|
||||
'z-20 [&>div]:-translate-x-1/2'
|
||||
]"
|
||||
@dragging="setIsDragging"></ResizableHandle>
|
||||
<ResizablePanel
|
||||
ref="asidePanelRef"
|
||||
:default-size="asideDefaultSize"
|
||||
:max-size="asideMaxSize"
|
||||
:collapsed-size="0"
|
||||
collapsible
|
||||
:order="2">
|
||||
<Sidebar></Sidebar>
|
||||
</ResizablePanel>
|
||||
</template>
|
||||
</template>
|
||||
</ResizablePanelGroup>
|
||||
</SidebarInset>
|
||||
</SidebarProvider>
|
||||
|
||||
<!-- ## Dialogs ## -->
|
||||
<UserDialog></UserDialog>
|
||||
@@ -82,10 +92,13 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, onUnmounted, watch } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { watch } from 'vue';
|
||||
|
||||
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../../components/ui/resizable';
|
||||
import { SidebarInset, SidebarProvider } from '../../components/ui/sidebar';
|
||||
import { useAppearanceSettingsStore } from '../../stores';
|
||||
import { useAuthenticatedLayoutResizable } from '../../composables/useAuthenticatedLayoutResizable';
|
||||
import { watchState } from '../../service/watchState';
|
||||
|
||||
@@ -112,19 +125,64 @@
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const appearanceSettingsStore = useAppearanceSettingsStore();
|
||||
const { navWidth, isNavCollapsed } = storeToRefs(appearanceSettingsStore);
|
||||
|
||||
const sidebarOpen = computed(() => !isNavCollapsed.value);
|
||||
|
||||
const handleSidebarOpenChange = (open) => {
|
||||
appearanceSettingsStore.setNavCollapsed(!open);
|
||||
};
|
||||
|
||||
let isResizingNav = false;
|
||||
let cleanupNavResize = null;
|
||||
|
||||
const startNavResize = (event) => {
|
||||
if (!sidebarOpen.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
isResizingNav = true;
|
||||
const prevUserSelect = document.body.style.userSelect;
|
||||
const prevCursor = document.body.style.cursor;
|
||||
document.body.style.userSelect = 'none';
|
||||
document.body.style.cursor = 'col-resize';
|
||||
|
||||
const handleMove = (e) => {
|
||||
if (!isResizingNav) {
|
||||
return;
|
||||
}
|
||||
appearanceSettingsStore.setNavWidth(e.clientX);
|
||||
};
|
||||
|
||||
const handleUp = () => {
|
||||
isResizingNav = false;
|
||||
document.body.style.userSelect = prevUserSelect;
|
||||
document.body.style.cursor = prevCursor;
|
||||
window.removeEventListener('pointermove', handleMove);
|
||||
window.removeEventListener('pointerup', handleUp);
|
||||
cleanupNavResize = null;
|
||||
};
|
||||
|
||||
window.addEventListener('pointermove', handleMove);
|
||||
window.addEventListener('pointerup', handleUp);
|
||||
cleanupNavResize = handleUp;
|
||||
appearanceSettingsStore.setNavWidth(event.clientX);
|
||||
};
|
||||
|
||||
onUnmounted(() => {
|
||||
cleanupNavResize?.();
|
||||
});
|
||||
|
||||
const {
|
||||
panelGroupRef,
|
||||
navPanelRef,
|
||||
asidePanelRef,
|
||||
navMinSize,
|
||||
navMaxSize,
|
||||
asideDefaultSize,
|
||||
asideMaxSize,
|
||||
mainDefaultSize,
|
||||
handleLayout,
|
||||
setIsDragging,
|
||||
isAsideCollapsed,
|
||||
isNavCollapsed,
|
||||
isSideBarTabShow
|
||||
} = useAuthenticatedLayoutResizable();
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
"moduleResolution": "bundler",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"lib": ["esnext", "dom", "dom.iterable"],
|
||||
"types": ["vite/client", "element-plus/global"],
|
||||
"types": ["vite/client"],
|
||||
"resolveJsonModule": true,
|
||||
"noEmit": true,
|
||||
"paths": {
|
||||
|
||||
Reference in New Issue
Block a user