mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-06 00:18:51 +08:00
feat: add logo
This commit is contained in:
xiaoxian521
parent
b79ddfcfbd
commit
2d5a82ddc0
2855
package-lock.json
generated
2855
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
10
package.json
10
package.json
@ -19,8 +19,8 @@
|
||||
"cropperjs": "^1.5.11",
|
||||
"dayjs": "^1.10.4",
|
||||
"dotenv": "^8.2.0",
|
||||
"echarts": "^5.1.0",
|
||||
"element-plus": "^1.0.2-beta.40",
|
||||
"echarts": "^5.1.1",
|
||||
"element-plus": "^1.0.2-beta.41",
|
||||
"font-awesome": "^4.7.0",
|
||||
"lodash-es": "^4.17.21",
|
||||
"mitt": "^2.1.0",
|
||||
@ -46,7 +46,7 @@
|
||||
"@types/mockjs": "^1.0.3",
|
||||
"@types/node": "^14.14.14",
|
||||
"@types/nprogress": "^0.2.0",
|
||||
"@vitejs/plugin-vue": "^1.2.1",
|
||||
"@vitejs/plugin-vue": "^1.2.2",
|
||||
"@vitejs/plugin-vue-jsx": "^1.1.3",
|
||||
"@vue/compiler-sfc": "^3.0.11",
|
||||
"autoprefixer": "^10.2.4",
|
||||
@ -57,8 +57,8 @@
|
||||
"sass": "^1.32.8",
|
||||
"sass-loader": "^11.0.1",
|
||||
"typescript": "^4.2.4",
|
||||
"vite": "^2.2.2",
|
||||
"vite": "^2.2.3",
|
||||
"vite-plugin-mock": "^2.5.0",
|
||||
"vite-plugin-style-import": "^0.9.2"
|
||||
"vite-plugin-style-import": "^0.10.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -116,10 +116,6 @@ export default defineComponent({
|
||||
});
|
||||
});
|
||||
|
||||
// onUnmounted(() => {
|
||||
// console.log(props.lf);
|
||||
// });
|
||||
|
||||
return {
|
||||
focusIndex,
|
||||
titleLists,
|
||||
|
||||
@ -1,29 +1,5 @@
|
||||
<template>
|
||||
<panel>
|
||||
<el-divider>界面显示</el-divider>
|
||||
<ul class="setting">
|
||||
<li>
|
||||
<span>灰色模式</span>
|
||||
<vxe-switch v-model="greyVal" open-label="开" close-label="关" @change="greyChange"></vxe-switch>
|
||||
</li>
|
||||
<li>
|
||||
<span>色弱模式</span>
|
||||
<vxe-switch v-model="weekVal" open-label="开" close-label="关" @change="weekChange"></vxe-switch>
|
||||
</li>
|
||||
<li>
|
||||
<span>隐藏标签页</span>
|
||||
<vxe-switch v-model="tagsVal" open-label="开" close-label="关" @change="tagsChange"></vxe-switch>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span>标签风格</span>
|
||||
<vxe-radio-group v-model="markValue" @change="onChange">
|
||||
<vxe-radio label="card" content="卡片"></vxe-radio>
|
||||
<vxe-radio label="smart" content="灵动"></vxe-radio>
|
||||
</vxe-radio-group>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<el-divider>主题风格</el-divider>
|
||||
<ul class="theme-stley">
|
||||
<el-tooltip class="item" effect="dark" content="暗色主题" placement="bottom">
|
||||
@ -41,6 +17,41 @@
|
||||
</el-tooltip>
|
||||
</ul>
|
||||
|
||||
<el-divider>界面显示</el-divider>
|
||||
<ul class="setting">
|
||||
<li>
|
||||
<span>灰色模式</span>
|
||||
<vxe-switch v-model="greyVal" open-label="开" close-label="关" @change="greyChange"></vxe-switch>
|
||||
</li>
|
||||
<li>
|
||||
<span>色弱模式</span>
|
||||
<vxe-switch v-model="weekVal" open-label="开" close-label="关" @change="weekChange"></vxe-switch>
|
||||
</li>
|
||||
<li>
|
||||
<span>隐藏标签页</span>
|
||||
<vxe-switch v-model="tagsVal" open-label="开" close-label="关" @change="tagsChange"></vxe-switch>
|
||||
</li>
|
||||
<li>
|
||||
<span>侧边栏Logo</span>
|
||||
<vxe-switch
|
||||
v-model="logoVal"
|
||||
open-value="1"
|
||||
close-value="-1"
|
||||
open-label="开"
|
||||
close-label="关"
|
||||
@change="logoChange"
|
||||
></vxe-switch>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span>标签风格</span>
|
||||
<vxe-radio-group v-model="markValue" @change="onChange">
|
||||
<vxe-radio label="card" content="卡片"></vxe-radio>
|
||||
<vxe-radio label="smart" content="灵动"></vxe-radio>
|
||||
</vxe-radio-group>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<el-divider />
|
||||
<vxe-button
|
||||
status="danger"
|
||||
@ -71,12 +82,7 @@ export default {
|
||||
// 默认卡片模式
|
||||
const markValue = ref(storageLocal.getItem("showModel") || "card");
|
||||
|
||||
function toggleClass(flag: boolean, clsName: string, target?: HTMLElement) {
|
||||
const targetEl = target || document.body;
|
||||
let { className } = targetEl;
|
||||
className = className.replace(clsName, "");
|
||||
targetEl.className = flag ? `${className} ${clsName} ` : className;
|
||||
}
|
||||
const logoVal = ref(storageLocal.getItem("logoVal") || "1");
|
||||
|
||||
const localOperate = (key: string, value?: any, model?: string): any => {
|
||||
model && model === "set"
|
||||
@ -98,6 +104,13 @@ export default {
|
||||
? localOperate("weekVal", false, "set")
|
||||
: document.querySelector("html")?.setAttribute("class", "html-weakness");
|
||||
|
||||
function toggleClass(flag: boolean, clsName: string, target?: HTMLElement) {
|
||||
const targetEl = target || document.body;
|
||||
let { className } = targetEl;
|
||||
className = className.replace(clsName, "");
|
||||
targetEl.className = flag ? `${className} ${clsName} ` : className;
|
||||
}
|
||||
|
||||
// 灰色模式设置
|
||||
const greyChange = ({ value }): void => {
|
||||
toggleClass(
|
||||
@ -165,6 +178,13 @@ export default {
|
||||
toggleClass(true, isSelect, unref(secondTheme));
|
||||
}
|
||||
|
||||
function logoChange() {
|
||||
unref(logoVal) === "1"
|
||||
? storageLocal.setItem("logoVal", "1")
|
||||
: storageLocal.setItem("logoVal", "-1");
|
||||
emitter.emit("logoChange", unref(logoVal));
|
||||
}
|
||||
|
||||
return {
|
||||
...toRefs(settings),
|
||||
localOperate,
|
||||
@ -176,7 +196,9 @@ export default {
|
||||
onChange,
|
||||
onDark,
|
||||
onLight,
|
||||
dataTheme
|
||||
dataTheme,
|
||||
logoVal,
|
||||
logoChange
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
75
src/layout/components/sidebar/Logo.vue
Normal file
75
src/layout/components/sidebar/Logo.vue
Normal file
@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div class="sidebar-logo-container" :class="{'collapse':collapse}">
|
||||
<transition name="sidebarLogoFade">
|
||||
<router-link
|
||||
v-if="collapse"
|
||||
key="collapse"
|
||||
:title="settings.title"
|
||||
class="sidebar-logo-link"
|
||||
to="/"
|
||||
>
|
||||
<i class="fa fa-optin-monster"></i>
|
||||
<h1 class="sidebar-title">{{ settings.title }}</h1>
|
||||
</router-link>
|
||||
<router-link v-else key="expand" :title="settings.title" class="sidebar-logo-link" to="/">
|
||||
<i class="fa fa-optin-monster"></i>
|
||||
<h1 class="sidebar-title">{{ settings.title }}</h1>
|
||||
</router-link>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import settings from "/@/settings";
|
||||
export default defineComponent({
|
||||
props: {
|
||||
collapse: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
return {
|
||||
settings
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sidebar-logo-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background: #2b2f3a;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
|
||||
.sidebar-logo-link {
|
||||
height: 100%;
|
||||
|
||||
.sidebar-title {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
line-height: 50px;
|
||||
font-size: 20px;
|
||||
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.fa-optin-monster {
|
||||
font-size: 38px;
|
||||
color: #1890ff;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.collapse {
|
||||
.sidebar-logo {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,35 +1,47 @@
|
||||
<template>
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<el-menu
|
||||
:default-active="activeMenu"
|
||||
:collapse="isCollapse"
|
||||
unique-opened
|
||||
:collapse-transition="false"
|
||||
mode="vertical"
|
||||
@select="menuSelect"
|
||||
>
|
||||
<sidebar-item
|
||||
v-for="route in routes"
|
||||
:key="route.path"
|
||||
:item="route"
|
||||
:base-path="route.path"
|
||||
/>
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
<div :class="{'has-logo': showLogo}">
|
||||
<Logo v-if="showLogo === '1'" :collapse="isCollapse" />
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<el-menu
|
||||
:default-active="activeMenu"
|
||||
:collapse="isCollapse"
|
||||
unique-opened
|
||||
:collapse-transition="false"
|
||||
mode="vertical"
|
||||
@select="menuSelect"
|
||||
>
|
||||
<sidebar-item
|
||||
v-for="route in routes"
|
||||
:key="route.path"
|
||||
:item="route"
|
||||
:base-path="route.path"
|
||||
/>
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, unref, nextTick } from "vue";
|
||||
import {
|
||||
computed,
|
||||
defineComponent,
|
||||
ref,
|
||||
unref,
|
||||
nextTick,
|
||||
onBeforeMount
|
||||
} from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { useStore } from "vuex";
|
||||
import SidebarItem from "./SidebarItem.vue";
|
||||
import { algorithm } from "../../../utils/algorithm";
|
||||
import { useDynamicRoutesHook } from "../tag/tagsHook";
|
||||
import { emitter } from "/@/utils/mitt";
|
||||
import Logo from "./Logo.vue";
|
||||
import { storageLocal } from "/@/utils/storage";
|
||||
|
||||
export default defineComponent({
|
||||
name: "sidebar",
|
||||
components: { SidebarItem },
|
||||
components: { SidebarItem, Logo },
|
||||
setup() {
|
||||
const router = useRouter().options.routes;
|
||||
|
||||
@ -37,6 +49,8 @@ export default defineComponent({
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
const showLogo = ref(storageLocal.getItem("logoVal") || "1");
|
||||
|
||||
const activeMenu = computed(() => {
|
||||
const { meta, path } = route;
|
||||
if (meta.activeMenu) {
|
||||
@ -68,11 +82,18 @@ export default defineComponent({
|
||||
emitter.emit("changLayoutRoute", indexPath);
|
||||
};
|
||||
|
||||
onBeforeMount(() => {
|
||||
emitter.on("logoChange", key => {
|
||||
showLogo.value = key;
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
routes: computed(() => algorithm.increaseIndexes(router)),
|
||||
activeMenu,
|
||||
isCollapse: computed(() => !store.getters.sidebar.opened),
|
||||
menuSelect
|
||||
menuSelect,
|
||||
showLogo
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
export default {
|
||||
title: "CURE Admin",
|
||||
title: "PureAdmin",
|
||||
|
||||
fixedHeader: false,
|
||||
|
||||
sidebarLogo: false,
|
||||
sidebarLogo: true,
|
||||
|
||||
hiddenSideBar: false,
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user