github/basic
1
0
Fork 1
mirror of https://github.com/fantastic-admin/basic.git synced 2026-10-07 13:17:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化 el-drawer 组件使用

Browse Source
This commit is contained in:
hooray
2022-06-11 12:31:21 +08:00
parent 8d01f6acc0
commit 0e44404b6e
1 changed files with 203 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layout/components/AppSetting/index.vue
+203 -218
View File
@@ -42,206 +42,204 @@ function handleCopy() {
<template>
<div>
<el-drawer v-model="isShow" title="应用配置" direction="rtl" :size="350" custom-class="flex-container">
<div class="container">
<el-alert title="应用配置可实时预览效果，但仅是临时生效，要想真正作用于项目，可以点击下方的“复制配置”按钮，将配置粘贴到 src/settings.custom.json 中即可，或者也可在 src/settings.js 中直接修改默认配置。同时建议在生产环境隐藏应用配置功能。" type="error" :closable="false" />
<el-divider>颜色主题</el-divider>
<div class="color-scheme">
<div class="switch" :class="settings.app.colorScheme" @click="settings.app.colorScheme = settings.app.colorScheme === 'dark' ? 'light' : 'dark'">
<el-icon class="icon">
<svg-icon v-show="settings.app.colorScheme === 'light'" name="ep:sunny" />
<svg-icon v-show="settings.app.colorScheme === 'dark'" name="ep:moon" />
</el-icon>
</div>
</div>
<el-divider v-if="settingsStore.mode === 'pc'">导航栏模式</el-divider>
<div v-if="settingsStore.mode === 'pc'" class="menu-mode">
<el-tooltip content="侧边栏模式（含主导航）" placement="top" :show-after="500">
<div class="mode mode-side" :class="{'active': settings.menu.menuMode === 'side'}" @click="settings.menu.menuMode = 'side'">
<div class="mode-container" />
<el-icon>
<svg-icon name="ep:check" />
</el-icon>
</div>
</el-tooltip>
<el-tooltip content="顶部模式" placement="top" :show-after="500">
<div class="mode mode-head" :class="{'active': settings.menu.menuMode === 'head'}" @click="settings.menu.menuMode = 'head'">
<div class="mode-container" />
<el-icon>
<svg-icon name="ep:check" />
</el-icon>
</div>
</el-tooltip>
<el-tooltip content="侧边栏模式（不含主导航）" placement="top" :show-after="500">
<div class="mode mode-single" :class="{'active': settings.menu.menuMode === 'single'}" @click="settings.menu.menuMode = 'single'">
<div class="mode-container" />
<el-icon>
<svg-icon name="ep:check" />
</el-icon>
</div>
</el-tooltip>
</div>
<el-divider>导航栏</el-divider>
<div class="setting-item">
<div class="label">是否折叠</div>
<el-switch v-model="settings.menu.subMenuCollapse" />
</div>
<div class="setting-item">
<div class="label">
切换跳转
<el-tooltip content="开启该功能后，切换侧边栏时，页面自动跳转至该侧边栏导航下第一个路由地址" placement="top">
<el-icon>
<svg-icon name="ep:question-filled" />
</el-icon>
</el-tooltip>
</div>
<el-switch v-model="settings.menu.switchMainMenuAndPageJump" :disabled="['single'].includes(settings.menu.menuMode)" />
</div>
<div class="setting-item">
<div class="label">
保持展开一个
<el-tooltip content="开启该功能后，侧边栏只保持一个子菜单的展开" placement="top">
<el-icon>
<svg-icon name="ep:question-filled" />
</el-icon>
</el-tooltip>
</div>
<el-switch v-model="settings.menu.subMenuUniqueOpened" />
</div>
<el-divider>顶栏</el-divider>
<div class="setting-item">
<div class="label">是否固定</div>
<el-switch v-model="settings.topbar.fixed" />
</div>
<div v-if="settingsStore.mode === 'pc'" class="setting-item">
<div class="label">折叠按钮</div>
<el-switch v-model="settings.topbar.enableSidebarCollapse" />
</div>
<div v-if="settingsStore.mode === 'pc'" class="setting-item">
<div class="label">面包屑导航</div>
<el-switch v-model="settings.topbar.enableBreadcrumb" />
</div>
<div class="setting-item">
<div class="label">
导航栏搜索
<el-tooltip content="对导航栏进行快捷搜索" placement="top">
<el-icon>
<svg-icon name="ep:question-filled" />
</el-icon>
</el-tooltip>
</div>
<el-switch v-model="settings.topbar.enableNavSearch" />
</div>
<div v-if="settingsStore.mode === 'pc'" class="setting-item">
<div class="label">
全屏
<el-tooltip content="该功能使用场景极少，用户习惯于通过窗口“最大化”功能来扩大显示区域，以显示更多内容，并且使用 F11 键也可以进入全屏效果" placement="top">
<el-icon>
<svg-icon name="ep:question-filled" />
</el-icon>
</el-tooltip>
</div>
<el-switch v-model="settings.topbar.enableFullscreen" />
</div>
<div class="setting-item">
<div class="label">
页面刷新
<el-tooltip content="开启时会阻止原生 F5 键刷新功能，并采用框架提供的刷新模式进行页面刷新" placement="top">
<el-icon>
<svg-icon name="ep:question-filled" />
</el-icon>
</el-tooltip>
</div>
<el-switch v-model="settings.topbar.enablePageReload" />
</div>
<div class="setting-item">
<div class="label">
颜色主题
<el-tooltip content="开启后可在明亮/暗黑模式中切换" placement="top">
<el-icon>
<svg-icon name="ep:question-filled" />
</el-icon>
</el-tooltip>
</div>
<el-switch v-model="settings.topbar.enableColorScheme" />
</div>
<el-divider>底部版权</el-divider>
<div class="setting-item">
<div class="label">是否启用</div>
<el-switch v-model="settings.copyright.enable" />
</div>
<div class="setting-item">
<div class="label">日期</div>
<el-input v-model="settings.copyright.dates" size="small" :disabled="!settings.copyright.enable" />
</div>
<div class="setting-item">
<div class="label">公司</div>
<el-input v-model="settings.copyright.company" size="small" :disabled="!settings.copyright.enable" />
</div>
<div class="setting-item">
<div class="label">网址</div>
<el-input v-model="settings.copyright.website" size="small" :disabled="!settings.copyright.enable" />
</div>
<el-divider>控制台</el-divider>
<div class="setting-item">
<div class="label">
是否开启
<el-tooltip content="该功能开启时，登录成功默认进入控制台页面，反之则默认进入导航栏里第一个导航页面" placement="top">
<el-icon>
<svg-icon name="ep:question-filled" />
</el-icon>
</el-tooltip>
</div>
<el-switch v-model="settings.dashboard.enable" />
</div>
<div class="setting-item">
<div class="label">控制台名称</div>
<el-input v-model="settings.dashboard.title" size="small" />
</div>
<el-divider>其它</el-divider>
<div class="setting-item">
<div class="label">
组件尺寸
<el-tooltip content="全局设置 Element Plus 组件的默认尺寸大小" placement="top">
<el-icon>
<svg-icon name="ep:question-filled" />
</el-icon>
</el-tooltip>
</div>
<el-radio-group v-model="settings.app.elementSize" size="small">
<el-radio-button label="large">较大</el-radio-button>
<el-radio-button label="default">默认</el-radio-button>
<el-radio-button label="small">稍小</el-radio-button>
</el-radio-group>
</div>
<div class="setting-item">
<div class="label">是否启用权限</div>
<el-switch v-model="settings.app.enablePermission" />
</div>
<div class="setting-item">
<div class="label">
载入进度条
<el-tooltip content="该功能开启时，跳转路由会看到页面顶部有进度条" placement="top">
<el-icon>
<svg-icon name="ep:question-filled" />
</el-icon>
</el-tooltip>
</div>
<el-switch v-model="settings.app.enableProgress" />
</div>
<div class="setting-item">
<div class="label">
动态标题
<el-tooltip content="该功能开启时，页面标题会显示当前路由标题，格式为“页面标题 - 网站名称”；关闭时则显示网站名称，网站名称在项目根目录下 .env.* 文件里配置" placement="top">
<el-icon>
<svg-icon name="ep:question-filled" />
</el-icon>
</el-tooltip>
</div>
<el-switch v-model="settings.app.enableDynamicTitle" />
<el-drawer v-model="isShow" title="应用配置" direction="rtl" :size="360">
<el-alert title="应用配置可实时预览效果，但仅是临时生效，要想真正作用于项目，可以点击下方的“复制配置”按钮，将配置粘贴到 src/settings.custom.json 中即可，或者也可在 src/settings.js 中直接修改默认配置。同时建议在生产环境隐藏应用配置功能。" type="error" :closable="false" />
<el-divider>颜色主题</el-divider>
<div class="color-scheme">
<div class="switch" :class="settings.app.colorScheme" @click="settings.app.colorScheme = settings.app.colorScheme === 'dark' ? 'light' : 'dark'">
<el-icon class="icon">
<svg-icon v-show="settings.app.colorScheme === 'light'" name="ep:sunny" />
<svg-icon v-show="settings.app.colorScheme === 'dark'" name="ep:moon" />
</el-icon>
</div>
</div>
<div v-if="isSupported" class="action-buttons">
<el-divider v-if="settingsStore.mode === 'pc'">导航栏模式</el-divider>
<div v-if="settingsStore.mode === 'pc'" class="menu-mode">
<el-tooltip content="侧边栏模式（含主导航）" placement="top" :show-after="500">
<div class="mode mode-side" :class="{'active': settings.menu.menuMode === 'side'}" @click="settings.menu.menuMode = 'side'">
<div class="mode-container" />
<el-icon>
<svg-icon name="ep:check" />
</el-icon>
</div>
</el-tooltip>
<el-tooltip content="顶部模式" placement="top" :show-after="500">
<div class="mode mode-head" :class="{'active': settings.menu.menuMode === 'head'}" @click="settings.menu.menuMode = 'head'">
<div class="mode-container" />
<el-icon>
<svg-icon name="ep:check" />
</el-icon>
</div>
</el-tooltip>
<el-tooltip content="侧边栏模式（不含主导航）" placement="top" :show-after="500">
<div class="mode mode-single" :class="{'active': settings.menu.menuMode === 'single'}" @click="settings.menu.menuMode = 'single'">
<div class="mode-container" />
<el-icon>
<svg-icon name="ep:check" />
</el-icon>
</div>
</el-tooltip>
</div>
<el-divider>导航栏</el-divider>
<div class="setting-item">
<div class="label">是否折叠</div>
<el-switch v-model="settings.menu.subMenuCollapse" />
</div>
<div class="setting-item">
<div class="label">
切换跳转
<el-tooltip content="开启该功能后，切换侧边栏时，页面自动跳转至该侧边栏导航下第一个路由地址" placement="top">
<el-icon>
<svg-icon name="ep:question-filled" />
</el-icon>
</el-tooltip>
</div>
<el-switch v-model="settings.menu.switchMainMenuAndPageJump" :disabled="['single'].includes(settings.menu.menuMode)" />
</div>
<div class="setting-item">
<div class="label">
保持展开一个
<el-tooltip content="开启该功能后，侧边栏只保持一个子菜单的展开" placement="top">
<el-icon>
<svg-icon name="ep:question-filled" />
</el-icon>
</el-tooltip>
</div>
<el-switch v-model="settings.menu.subMenuUniqueOpened" />
</div>
<el-divider>顶栏</el-divider>
<div class="setting-item">
<div class="label">是否固定</div>
<el-switch v-model="settings.topbar.fixed" />
</div>
<div v-if="settingsStore.mode === 'pc'" class="setting-item">
<div class="label">折叠按钮</div>
<el-switch v-model="settings.topbar.enableSidebarCollapse" />
</div>
<div v-if="settingsStore.mode === 'pc'" class="setting-item">
<div class="label">面包屑导航</div>
<el-switch v-model="settings.topbar.enableBreadcrumb" />
</div>
<div class="setting-item">
<div class="label">
导航栏搜索
<el-tooltip content="对导航栏进行快捷搜索" placement="top">
<el-icon>
<svg-icon name="ep:question-filled" />
</el-icon>
</el-tooltip>
</div>
<el-switch v-model="settings.topbar.enableNavSearch" />
</div>
<div v-if="settingsStore.mode === 'pc'" class="setting-item">
<div class="label">
全屏
<el-tooltip content="该功能使用场景极少，用户习惯于通过窗口“最大化”功能来扩大显示区域，以显示更多内容，并且使用 F11 键也可以进入全屏效果" placement="top">
<el-icon>
<svg-icon name="ep:question-filled" />
</el-icon>
</el-tooltip>
</div>
<el-switch v-model="settings.topbar.enableFullscreen" />
</div>
<div class="setting-item">
<div class="label">
页面刷新
<el-tooltip content="开启时会阻止原生 F5 键刷新功能，并采用框架提供的刷新模式进行页面刷新" placement="top">
<el-icon>
<svg-icon name="ep:question-filled" />
</el-icon>
</el-tooltip>
</div>
<el-switch v-model="settings.topbar.enablePageReload" />
</div>
<div class="setting-item">
<div class="label">
颜色主题
<el-tooltip content="开启后可在明亮/暗黑模式中切换" placement="top">
<el-icon>
<svg-icon name="ep:question-filled" />
</el-icon>
</el-tooltip>
</div>
<el-switch v-model="settings.topbar.enableColorScheme" />
</div>
<el-divider>底部版权</el-divider>
<div class="setting-item">
<div class="label">是否启用</div>
<el-switch v-model="settings.copyright.enable" />
</div>
<div class="setting-item">
<div class="label">日期</div>
<el-input v-model="settings.copyright.dates" size="small" :disabled="!settings.copyright.enable" />
</div>
<div class="setting-item">
<div class="label">公司</div>
<el-input v-model="settings.copyright.company" size="small" :disabled="!settings.copyright.enable" />
</div>
<div class="setting-item">
<div class="label">网址</div>
<el-input v-model="settings.copyright.website" size="small" :disabled="!settings.copyright.enable" />
</div>
<el-divider>控制台</el-divider>
<div class="setting-item">
<div class="label">
是否开启
<el-tooltip content="该功能开启时，登录成功默认进入控制台页面，反之则默认进入导航栏里第一个导航页面" placement="top">
<el-icon>
<svg-icon name="ep:question-filled" />
</el-icon>
</el-tooltip>
</div>
<el-switch v-model="settings.dashboard.enable" />
</div>
<div class="setting-item">
<div class="label">控制台名称</div>
<el-input v-model="settings.dashboard.title" size="small" />
</div>
<el-divider>其它</el-divider>
<div class="setting-item">
<div class="label">
组件尺寸
<el-tooltip content="全局设置 Element Plus 组件的默认尺寸大小" placement="top">
<el-icon>
<svg-icon name="ep:question-filled" />
</el-icon>
</el-tooltip>
</div>
<el-radio-group v-model="settings.app.elementSize" size="small">
<el-radio-button label="large">较大</el-radio-button>
<el-radio-button label="default">默认</el-radio-button>
<el-radio-button label="small">稍小</el-radio-button>
</el-radio-group>
</div>
<div class="setting-item">
<div class="label">是否启用权限</div>
<el-switch v-model="settings.app.enablePermission" />
</div>
<div class="setting-item">
<div class="label">
载入进度条
<el-tooltip content="该功能开启时，跳转路由会看到页面顶部有进度条" placement="top">
<el-icon>
<svg-icon name="ep:question-filled" />
</el-icon>
</el-tooltip>
</div>
<el-switch v-model="settings.app.enableProgress" />
</div>
<div class="setting-item">
<div class="label">
动态标题
<el-tooltip content="该功能开启时，页面标题会显示当前路由标题，格式为“页面标题 - 网站名称”；关闭时则显示网站名称，网站名称在项目根目录下 .env.* 文件里配置" placement="top">
<el-icon>
<svg-icon name="ep:question-filled" />
</el-icon>
</el-tooltip>
</div>
<el-switch v-model="settings.app.enableDynamicTitle" />
</div>
<template v-if="isSupported" #footer>
<el-button type="primary" @click="handleCopy">
<template #icon>
<el-icon>
@@ -250,36 +248,23 @@ function handleCopy() {
</template>
复制配置
</el-button>
</div>
</template>
</el-drawer>
</div>
</template>
<style lang="scss" scoped>
:deep(.el-drawer__body) {
display: flex;
flex-direction: column;
overflow: auto;
padding: 0;
}
:deep(.el-drawer__header) {
margin-bottom: initial;
padding-bottom: 20px;
border-bottom: 1px solid var(--el-border-color);
}
.flex-container {
.container {
padding: 15px;
overflow: auto;
flex: 1;
}
.action-buttons {
padding: 15px;
text-align: center;
border-top: 1px solid var(--el-border-color);
.el-button {
width: 100%;
}
:deep(.el-drawer__footer) {
padding: 20px;
border-top: 1px solid var(--el-border-color);
transition: var(--el-transition-border);
.el-button {
width: 100%;
}
}
:deep(.el-divider) {